/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --yellow: #f2d511;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: 'Raleway', sans-serif; font-size: 16px; color: var(--black); line-height: 2; background: var(--white) url(../images/bg.png) repeat; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
p { margin-bottom: 30px; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h2 { margin-bottom: 20px; font-size: 28px; }
h2 span { background: url(../images/headingbg.png) no-repeat; background-size: 100% 100%; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }

/* global */
.centered { padding-right: calc((100% - 820px)/ 2); padding-left: calc((100% - 820px)/ 2); }
.text-highlight { all: unset; background-repeat: no-repeat; background-size: 0% 100%; transition: color calc(2s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-color calc(2s / 4) cubic-bezier(0.25, 1, 0.5, 1), background-size 2s cubic-bezier(0.25, 1, 0.5, 1); }
.text-highlight.active { background-size: 100% 100%; background-image: url(../images/headingbg.png); background-repeat: no-repeat; }

/* wrapper */
.wrapper { width: 100%; position: relative; }

/* header */
.header { padding: 15px 20px; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; display: flex; justify-content: center; align-items: center; } 
.header .logo { width: 200px; height: 46px; display: block; }
.header .logo svg { width: 200px; height: 46px; }

/* hero */
.hero { margin-bottom: 20px; width: 100%; overflow: hidden; position: relative; min-height: 750px; }
.hero .img_1 { position: absolute; left: 20px; top: 0; max-width: 350px; width: 100%; transition-delay: 0.2s; }
.hero .img_2 { position: absolute; right: 0; top: 0; mix-blend-mode: multiply; max-width: 350px; width: 100%; transition-delay: 0.3s; }
.hero .img_3 { position: absolute; left: 0; bottom: 40px; max-width: 210px; width: 100%; transition-delay: 0.4s; }
.hero .img_4 { position: absolute; right: -80px; bottom: 130px; max-width: 900px; width: 100%; transition-delay: 0.5s; }
.hero .girl { position: absolute; left: 50%; bottom: 160px; z-index: 1; transform: translateX(-50%); width: 100%; max-width: 230px; }
.hero .girl img { width: 100%; height: auto; transition-delay: 0.6s; }
.hero .text { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 1050px; width: 100%; text-align: center; z-index: 1; }
.hero h1 { margin-bottom: -85px; font-weight: 900; text-transform: uppercase; font-size: 80px; line-height: 1; }
.hero .subtitle { padding: 0 40px; margin-bottom: 35px; color: var(--yellow); line-height: 1.2; font-size: 50px; font-weight: 700; text-transform: uppercase; display: inline-block; background-color: var(--black); border-radius: 10px; transform: rotate(-8deg); }
.hero h1 svg { width: 100%; height: 100%; font-family: 'Raleway', sans-serif; font-weight: 900; line-height: 1; }
.hero h1 svg text { text-transform: uppercase; animation: stroke 2s alternate; stroke-width: 2; stroke: #000; font-size: 130px; }
.hero .title { font-size: 24px; font-weight: 700; text-align: center; }

@keyframes stroke {
	0%   {
		fill: rgba(0,0,0,0); stroke: var(--yellow);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(0,0,0,0); stroke: var(--yellow); }
	80%  {fill: rgba(0,0,0,0); stroke: var(--yellow); stroke-width: 3; }
	100% {
		fill: var(--black); stroke: var(--yellow); 
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

/* text */
.textSec { margin-bottom: 40px; width: 100%; } 
.textSec .title { font-size: 24px; font-weight: 700; text-align: center; }
.textSec .story { margin: 30px 0; text-align: center; text-transform: uppercase; line-height: 1.6; font-size: 16px; }
.textSec .image { display: flex; justify-content: center; }
.textSec .image img { mix-blend-mode: multiply; }
.textSec .cycleBlock { margin: 50px auto; max-width: 838px; position: relative; height: 1230px; width: 100%; }
.textSec .block { position: absolute; display: flex; flex-wrap: wrap; gap: 20px; font-size: 16px; line-height: 1.5; }
.textSec .text { position: relative; z-index: 1; }
.textSec .block:nth-child(1) { padding-left: 50px; min-height: 192px; }
.textSec .block:nth-child(1) .img { width: 46%; align-self: flex-end; }
.textSec .block:nth-child(1) .text { width: 50%; }
.textSec .block:nth-child(2) { left: -10%; top: 21%; gap: 10px; max-width: 430px; width: 100%; z-index: 1; flex-direction: row-reverse; }
.textSec .block:nth-child(2) .img { padding-top: 40px; align-self: flex-end; }
.textSec .block:nth-child(2) .text { max-width: 207px; width: 100%; }
.textSec .block:nth-child(3) { right: 10%; top: 21%; max-width: 330px; width: 100%; z-index: 1; }
.textSec .block:nth-child(3) .text { width: 75%; }
.textSec .block:nth-child(3) .img { margin-left: auto; }
.textSec .block:nth-child(4) { left: 20%; top: 45%; z-index: 1; max-width: 520px; width: 100%; }
.textSec .block:nth-child(4) .text { max-width: 206px; width: 100%; }
.textSec .block:nth-child(5) { right: -10%; top: 58%; z-index: 1; gap: 10px; width: 532px; flex-direction: row-reverse; }
.textSec .block:nth-child(5) .text { padding-bottom: 40px; width: 240px; align-self: flex-end; }
.textSec .block:nth-child(5) .img { width: 282px; }
.textSec .block:nth-child(6) { left: -10%; top: 66%; gap: 10px; z-index: 1; width: 460px; flex-direction: row-reverse; }
.textSec .block:nth-child(6) .text { margin-top: 30px; width: 230px; }
.textSec .block:nth-child(6) .img { width: 220px; }
.textSec .block:nth-child(7) { right: 0; z-index: 1; bottom: -15px; }
.textSec .block:nth-child(7) .img { right: -60px; position: relative; }
.textSec .block:nth-child(7) .text { align-self: flex-end; }
.textSec .road { position: relative; height: 100%; }
.textSec .road img { height: 100%; }
.textSec .map { margin: 50px auto; width: 100%; max-width: 996px; min-height: 100svh; height: 100svh; position: sticky; top: 0; }
.textSec .map img { margin: 0 auto; height: 100svh; }
.textSec .height { width: 100%; height: 100svh; position: sticky; top: 0; opacity: 0; transition: opacity 0.15s; }
.textSec .height.fadeIn { opacity: 1; }
.textSec .height.fadeOut .mapText { opacity: 0; }
.textSec .mapText { padding: 10px; position: absolute; width: 40%; z-index: 1; font-size: 15px; line-height: 1.5; background-color: var(--white); border: 1px solid #d3d3d3; /*background: url(../images/map-bg.png) no-repeat; background-size: 100% 100%; opacity: 0; transition: opacity 0.15s;*/ }
.textSec .mapText.fadeIn { opacity: 1; }
.textSec .mapText.fadeOut { opacity: 0; }
.textSec .pin { position: absolute; left: 32%; top: 23%; width: 20px; transition-delay: 0.6s; }
.textSec h4 { color: #bf0a0a; }
.textSec .two .pin { left: 34%; top: 25.5%; }
.textSec .three .pin { left: 25%; top: 31%; }
.textSec .four .pin { left: 58%; top: 34%; }
.textSec .five .pin { left: 28%; top: 54%; }
.textSec .six .pin { left: 37%; top: 77%; }
.textSec .mapText.panipat { top: 10%; left: 0; }
.textSec .mapText.delhi { top: 19%; left: 38%; }
.textSec .mapText.rajasthan { top: 36%; left: 10%; }
.textSec .mapText.bihar { top: 32%; left: 62%; }
.textSec .mapText.mumbai { top: 60%; left: 0; }
.textSec .mapText.tamil-nadu { top: 82%; left: 32%; width: 70%; }
.textSec .imageBlock { margin-top: 30px; max-width: 890px; position: relative; width: 100%; }
.textSec .imageBlock img { mix-blend-mode: unset; }
.textSec .cloth_1,
.textSec .cloth_2,
.textSec .cloth_3 { position: absolute; top: 7%; transition: all 0.8s ease-in-out; }
.textSec .cloth_1 { left: 62%; z-index: 2; width: 7.42%; }
.textSec .cloth_2 { left: 65%; z-index: 1; width: 9.2%; }
.textSec .cloth_3 { left: 69%; width: 6.6%; }
.textSec .imageBlock.active .cloth_1.one { transform: translateX(-60px); }
.textSec .imageBlock.active .cloth_2.two { transform: translateX(-45px); }
.textSec .list { width: 100%; }
.textSec .list li { padding-left: 15px; margin-bottom: 3px; font-size: 14px; position: relative; }
.textSec .list li:before { position: absolute; left: 0; top: 7px; content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #000; }
.textSec .list li:last-child { margin-bottom: 0; }
.textSec blockquote { margin: 0 auto 20px; color: #000; padding: 25px 100px; font-weight: 500; position: relative; font-size: 22px; line-height: 1.6; }
.textSec blockquote:last-child { margin-bottom: 0; }
.textSec blockquote:before { content: "“"; color: #ff00c6; font-family: Arial, Helvetica, sans-serif; font-size: 150px; position: absolute; left: 30px; top: 0; line-height: 1; }
.textSec blockquote span { margin-top: 10px; display: block; color: #ff00c6; font-style: normal; font-weight: 400; font-size: 16px; }
.textSec .imagePoint { margin-bottom: 30px; display: flex; justify-content: space-between; gap: 20px; }
.textSec .imagePoint:last-child { margin-bottom: 0; }

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; background-color: var(--black); }
.credit h2 { margin-bottom: 20px; color: var(--white); }

/* copyright */
.copyright { padding-top: 15px; padding-bottom: 15px; font-size: 16px; text-align: center; color: var(--white); width: 100%; background-color: var(--black); }

/* share btn */
.share-btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 60px; height: 60px; display: none; align-items: center; justify-content: center; border-radius: 50%; background-color: #404040; cursor: pointer; border: 0; transition: var(--transition); opacity: 0; visibility: hidden; }
.share-btn.show { opacity: 1; visibility: visible; }
.share-btn svg { width: 25px; height: 25px; fill: var(--white); }

@media screen and (max-width: 860px)  {
    .centered { padding-left: 20px; padding-right: 20px; }

    .header .logo,
    .header .logo svg { width: 200px; height: 45px; }

    .hero { min-height: 700px; }
    .hero h1 { margin-bottom: -55px; font-size: 90px; }
    .hero .subtitle { padding: 0 30px; margin-bottom: 25px; font-size: 60px; }
    .hero .img_1 { max-width: unset; width: 32%; }
    .hero .img_2 { max-width: unset; width: 35%; }
    .hero .img_3 { max-width: unset; width: 20%; }
    .hero .img_4 { right: -50px; max-width: unset; width: 70%; }
    .hero .girl { bottom: 170px; max-width: 220px; }

    .textSec .block h3 { font-size: 22px; }
    .textSec .block { font-size: 14px; }
    .textSec .block:nth-child(2) { left: 0; width: 400px; max-width: unset; }
    .textSec .block:nth-child(2) .text { width: 180px; }
    .textSec .block:nth-child(2) .img { width: 160px; }
    .textSec .block:nth-child(3) { top: 23%; width: 280px; max-width: unset; }
    .textSec .block:nth-child(3) .img { width: 200px; }
    .textSec .block:nth-child(4) { width: 450px; top: 47%; }
    .textSec .block:nth-child(4) .img { width: 220px; }
    .textSec .block:nth-child(5) { right: -20px; width: 410px; max-width: unset; }
    .textSec .block:nth-child(5) .text { width: 200px; }
    .textSec .block:nth-child(5) .img { width: 200px; }
    .textSec .block:nth-child(6) { left: 0; top: 67%; width: 370px; max-width: unset; }
    .textSec .block:nth-child(6) .text { width: 200px; }
    .textSec .block:nth-child(6) .img { width: 160px; }
    .textSec .block:nth-child(7) { bottom: 0; width: 88%; flex-wrap: unset; }
    .textSec .mapText h4 { font-size: 16px; }
    .textSec .mapText { font-size: 12px; }
}

@media screen and (max-width: 767px)  {
    body { font-size: 16px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }

    .header { padding-top: 15px; padding-bottom: 15px; }
    .header .logo,
    .header .logo svg { width: 120px; height: 28px; }

    .hero { min-height: 600px; }
    .hero h1 { margin-bottom: -30px; font-size: 60px; }
    .hero .subtitle { padding: 0 20px; margin-bottom: 16px; font-size: 40px; }
    .hero .girl { bottom: 110px; max-width: 210px; }
    .hero .img_4 { bottom: 130px; }
    .hero .title { font-size: 18px; }

    .textSec .title { font-size: 18px; line-height: 1.6; }
    .textSec .cycleBlock { height: unset; }
    .textSec .block { padding: 0; height: unset; position: relative; width: 100%; }
    .textSec .block h3 { font-size: 20px; }
    .textSec .road { display: none; }
    .textSec .block:nth-child(1),
    .textSec .block:nth-child(2),
    .textSec .block:nth-child(3),
    .textSec .block:nth-child(4),
    .textSec .block:nth-child(5),
    .textSec .block:nth-child(6),
    .textSec .block:nth-child(7) { padding-left: 0; margin-bottom: 30px; align-items: center; left: unset; top: unset; right: unset; bottom: unset; min-height: unset; left: 0; width: 100%; gap: 15px; flex-direction: unset; }
    .textSec .block:nth-child(3) { flex-direction: row-reverse; }
    .textSec .block:nth-child(1) .img,
    .textSec .block:nth-child(2) .img,
    .textSec .block:nth-child(3) .img,
    .textSec .block:nth-child(4) .img,
    .textSec .block:nth-child(5) .img,
    .textSec .block:nth-child(6) .img,
    .textSec .block:nth-child(7) .img { width: 120px; align-self: center; }
    .textSec .block:nth-child(7) .img { right: 0; }
    .textSec .block:nth-child(1) .text,
    .textSec .block:nth-child(2) .text,
    .textSec .block:nth-child(3) .text,
    .textSec .block:nth-child(4) .text,
    .textSec .block:nth-child(5) .text,
    .textSec .block:nth-child(6) .text,
    .textSec .block:nth-child(7) .text { width: calc(100% - 135px); }
    .textSec .map { display: flex; justify-content: center; align-items: center; }
    .textSec .map img { width: 100%; height: auto; }
    .textSec .mapText.panipat { width: 100%; }
    .textSec .mapText.delhi { width: 66%; }
    .textSec .mapText.rajasthan { width: 65%; }
    .textSec .mapText.bihar { width: 70%; left: unset; right: 20px; }
    .textSec .mapText.mumbai { width: 70%; }
    .textSec .mapText.tamil-nadu { left: 10%; top: 79%; width: 90%; }
    .textSec .imageBlock.active .cloth_1.one { transform: translateX(-35px); }
    .textSec .imageBlock.active .cloth_2.two { transform: translateX(-20px); }
    .textSec blockquote { font-size: 18px; padding: 25px; margin-bottom: 0px; }
    .textSec blockquote:before { font-size: 5em; position: absolute; left: 0; top: 0; }
    .textSec .imagePoint { gap: 10px; }
    .textSec .pin { left: 27%; top: 24%; width: 15px; }
    .textSec .two .pin { left: 30.5%; top: 27%; }
    .textSec .three .pin { left: 18%; top: 31%; }
    .textSec .four .pin { left: 60%; top: 35%; }
    .textSec .five .pin { left: 22%; top: 54%; }
    .textSec .six .pin { left: 34%; top: 74%; }

    .share-btn { display: flex; }
}

@media screen and (max-width: 479px)  {
    .hero h1 { margin-bottom: -20px; font-size: 45px; }
    .hero .subtitle { padding: 3px 15px; margin-bottom: 12px; font-size: 25px; }
    .hero .girl { bottom: 80px; }
    .hero .img_1 { left: 10px; width: 30%; }
    .hero .img_2 { width: 32%; }
    .hero .img_3 { bottom: 80px; }
    .hero .img_4 { bottom: 100px; width: 80%; }

    .textSec .mapText.tamil-nadu { top: 64%; left: 0; width: 100%; }
    .textSec .imageBlock.active .cloth_1.one { transform: translateX(-25px); }
    .textSec .imageBlock.active .cloth_2.two { transform: translateX(-15px); }
    .textSec .mapText h4 { font-size: 13px; }
    .textSec .pin { left: 27%; top: 34%; width: 15px; }
    .textSec .two .pin { left: 30%; top: 36%; }
    .textSec .three .pin { left: 18%; top: 37%; }
    .textSec .four .pin { left: 60%; top: 40%; }
    .textSec .five .pin { left: 22%; top: 51%; }
    .textSec .six .pin { left: 32%; top: 61%; }
    .textSec .block:nth-child(1) .img,
    .textSec .block:nth-child(2) .img,
    .textSec .block:nth-child(3) .img,
    .textSec .block:nth-child(4) .img,
    .textSec .block:nth-child(5) .img,
    .textSec .block:nth-child(6) .img,
    .textSec .block:nth-child(7) .img { width: 100px; align-self: center; }
    .textSec .block:nth-child(1) .text,
    .textSec .block:nth-child(2) .text,
    .textSec .block:nth-child(3) .text,
    .textSec .block:nth-child(4) .text,
    .textSec .block:nth-child(5) .text,
    .textSec .block:nth-child(6) .text,
    .textSec .block:nth-child(7) .text { width: calc(100% - 115px); }
    .textSec .block h3 { font-size: 16px; }

}