/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&family=Khand:wght@300;400;500;600;700&display=swap');

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

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

body { font-family: 'Anek Devanagari', sans-serif; font-size: 16px; color: var(--black); line-height: 2; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); text-decoration: none; transition: var(--transition); }
p { margin-bottom: 20px; }
p a { text-decoration: underline; color: #6351ff; }
p a:hover { text-decoration: none; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 20px; font-weight: 700; line-height: 1.2; }
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 20px; }

/* global */
.centered { padding-right: calc((100% - 820px)/ 2); padding-left: calc((100% - 820px)/ 2); }
 
/* wrapper */
.wrapper { width: 100%; position: relative; overflow: hidden; }

/* hero */
.hero { margin-bottom: 40px; width: 100%; overflow: hidden; position: relative; height: 720px; background-color: var(--black); }
.hero .text { padding: 70px 15px; width: 100%; height: 100%; position: relative; z-index: 4; transition-delay: 1.5s; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; }
.hero .logo { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); z-index: 5; width: 200px; height: 39px; display: block; }
.hero .logo a { display: block; transition-delay: 1.5s; }
.hero .logo svg { width: 200px; height: 39px; fill: var(--white); }
.hero h1 { margin-bottom: 10px; font-weight: 700; text-transform: uppercase; font-size: 150px; line-height: 0.94; text-align: center; color: #83bb20; text-shadow: 1px 8px 34px rgba(0,0,0,0.8); font-family: 'Khand', sans-serif; width: 100%; }
.hero .subtitle { margin-bottom: 35px; text-align: center; color: var(--white); line-height: 1.2; font-size: 20px; font-weight: 600; text-transform: capitalize; text-shadow: 1px 8px 20px rgba(0,0,0,0.5); width: 100%; }
.hero .arrow { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: 30px; z-index: 8; animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.hero .image { position: absolute; box-shadow: 0px 0px 55px 0px rgba(0,0,0,0.6); overflow: hidden; }
.hero .image:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ''; width: 120%; height: 120%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }
.hero .image img { filter: grayscale(100%); width: 100%; height: auto; }
.hero .image.one { left: 20px; top: 20px; width: 25%; }
.hero .image.two { left: 43%; top: -100px; transform: translateX(-50%); width: 33%; }
.hero .image.two img { transition-delay: 0.5s; }
.hero .image.three { right: 0; top: 50px; width: 23%; transition-delay: 0.7s; }
.hero .image.four { left: -40px; top: 50%; width: 28%; transition-delay: 0.5s; }
.hero .image.five { left: 27%; top: 60%; width: 24%; transition-delay: 0.8s; }
.hero .image.six { left: 55%; top: 56%; width: 26%; transition-delay: 1s; }
.hero .image.seven { right: -60px; top: 60%; width: 20%; transition-delay: 0.9s; }
.hero .image.eight { right: 21%; top: 0; width: 20%; transition-delay: 0.9s; }

@keyframes bounce {
    50% { transform: translate(-50%, -15px); }
}

/* text */
.textSec { /*padding-bottom: 120px;*/ margin-bottom: 60px; width: 100%; /*background: url(../images/devaider.png) center bottom repeat-x;*/ }
.textSec .story { margin: 30px 0; text-align: center; text-transform: uppercase; line-height: 1.6; } 
.textSec .audio { width: 100%; }
.textSec .audiosub { text-align: center; width: 100%; }
.textSec .image { margin-top: 30px; width: 100%; display: flex; justify-content: center; }
.textSec .image img { width: 300px; height: auto; }
.textSec .source { width: 100%; text-align: center; font-size: 12px; }
.textSec .source a { color: blue; }
.textSec h2 { padding-bottom: 20px; margin-bottom: 40px; margin-left: -50px; position: relative; color: #639708; font-weight: 700; font-size: 65px; }
.textSec h2::after { position: absolute; left: 0; bottom: 0; content: ''; width: 254px; height: 23px; background: url(../images/heading-line.png) no-repeat; background-size: contain; }
.textSec h3 { margin-bottom: 0; }
.textSec .name { margin-bottom: 15px; font-weight: 600; }
.textSec .name.spcing { margin-left: -50px; margin-top: -20px;  }
.textSec .videoBlock { margin-top: 60px; margin-bottom: 50px; position: relative; left: 50%; width: calc(100% + 100px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: space-between; }
.textSec .videoBlock:nth-child(even) { flex-direction: row-reverse; }
.textSec .videoBlock:nth-child(even) .arrowVideo { left: unset; top: unset; bottom: 70px; right: -100px; }
.textSec .videoBlock:nth-child(even) .arrowVideo img { transform: rotate(180deg); }
.textSec .videoText { width: 52%; align-self: center; }
.textSec .video { width: 35%; position: relative; align-self: center; }
.textSec .video::before { position: absolute; left: -20px; top: -11px; content: ''; width: 100%; height: calc(100% + 10px); border-radius: 40px; border: 1px solid #499f31; z-index: -1; }
.textSec .video video,
.textSec .video img { width: 100%; height:425px; object-fit: cover; object-position: center top; display: block; transition: var(--transition); border-radius: 40px; }
.textSec .video video:hover { transform: rotate(0deg); }
.textSec .arrowVideo { position: absolute; left: -125px; top: 20px; width: 120px; }
.textSec .arrowVideo img { width: 100%; height: auto; object-fit: unset; object-position: unset; border-radius: 0; }
.textSec .detailList { position: relative; left: 50%; width: calc(100% + 50px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: space-between; }
.textSec .detailList .left { width: 45%; }
.textSec .detailList .right { width: 45%; }
.textSec .detailList h3 { font-family: 'Khand', sans-serif; font-size: 68px; }
.textSec .listblock { padding: 70px 30px; width: 100%; position: relative; color: var(--white); border-radius: 40px; border: 1px solid #4ea137; background-color: #639708; }
.textSec .listblock::before,
.textSec .listblock::after { position: absolute; left: 0; top: 0; content: ''; z-index: -1; border-radius: 40px; width: 100%; height: 100%; border: 1px solid #4ea137; background-color: var(--white); }
.textSec .listblock::before { transform: rotate(6deg); }
.textSec .listblock::after { transform: rotate(12deg); }
.textSec .listblock ul { width: 100%; }
.textSec .listblock li { padding-left: 30px; margin-bottom: 12px; position: relative; color: var(--white); font-size: 22px; font-weight: 500; line-height: 1.4; }
.textSec .listblock li:last-child { margin-bottom: 0; }
.textSec .listblock li::before { position: absolute; left: 0; top: 3px; content: ''; width: 15px; height: 15px; border-radius: 50%; background-color: var(--white); }
.textSec .listblock .shape1 { position: absolute; left: -12px; top: -6px; width: 50px; }
.textSec .listblock .shape2 { position: absolute; right: -70px; bottom: -18px; z-index: -2; }
.textSec .chartBlock { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.chart-container { display: flex; align-items: center; gap: 20px; }
.circle-chart { position: relative; width: 200px; height: 200px; }
.center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 20px; line-height: 1.4; font-weight: 700; }
.progress-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bg-circle { fill: none; stroke: #d3d3d3; stroke-width: 15; opacity: 0.3; }
.inner-bg { stroke-width: 15; }
.progress-circle { fill: none; stroke-width: 15; stroke-linecap: round; stroke-dasharray: 0 999; stroke-dashoffset: 0; transition: stroke-dasharray 2s ease; }
.outer { stroke: #2f8e29; }
.inner { stroke: #f5d97c; }
.labels { display: flex; flex-direction: column; gap: 20px; }
.label .percent { font-size: 24px; font-weight: 700; line-height: 1; display: block; }
.label p { font-size: 16px; margin: 5px 0 0; line-height: 1.4; }
.textSec .questionList li { margin-bottom: 20px; }
.textSec .questionList li h4 { margin-bottom: 5px; }

/* audio */
.music-player-container { display: inline-block; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.music-player-container h3 { margin-bottom: 0; text-align: center; width: 100%; }
.music-player-container .audioSub { width: 100%; text-align: center; }
.album { width: 100%; height: auto; position: relative; border-radius: 40px; overflow: hidden; }
.album-art { height: auto; position: relative; width: 100%; z-index: 10; overflow: hidden; }
.album-art:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0, 0, 0, 0.3); }
.music-player-controls { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; text-align: center; z-index: 11; }
[class^="control-"] { border-radius: 100%; display: inline-block; height: 44px; margin: 0 3px; width: 44px; }
[class^="control-"]:hover { cursor: pointer; }
.control-play { background: transparent url('../images/play-button.png') center / cover no-repeat; }
.is-playing .control-play { background: transparent url('../images/pause-button.png') center / cover no-repeat; }

/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; margin-top: 100px; position: relative; color: var(--white); width: 100%; background-color: var(--black); }
.credit:before { position: absolute; left: 0; top: -58px; z-index: -1; content: ''; width: 100%; height: 68px; background: url(../images/devaider.png) center bottom repeat-x; background-size: contain; }
.credit h2 { margin-bottom: 20px; color: var(--white); }
.copyright { padding-top: 20px; font-size: 14px; text-align: center; color: var(--white); background-color: var(--black); }

/* share btn */
.share-btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 60px; height: 60px; display: flex; 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: 960px)  {
    .centered { padding-left: 20px; padding-right: 20px; }   

    .hero h1 { font-size: 140px; }
    .hero .image.one { top: 13%; }
    .hero .image.two { top: 0; }
    .hero .image.four { top: 54%; }
    .hero .image.five { top: 71%; }
    
    .textSec h2 { margin-left: 0; }
    .textSec .name.spcing { margin-left: 0;  }
    .textSec .videoBlock,
    .textSec .detailList { width: 100%; transform: translateX(0); left: 0; }
}

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

    .hero .logo { margin-bottom: 20px; }
    .hero .logo,
    .hero .logo svg { width: 160px; height: 31px; }
    .hero { height: 550px; }
    .hero h1 { font-size: 80px; }
    .hero .subtitle { font-size: 18px; letter-spacing: 0; }
    .hero .image.four { width: 32%; }
    .hero .image.five { width: 30%; }
    .hero .image.six { top: 48%; width: 30%; left: 59%; }
    .hero .image.seven { right: 0; top: unset; bottom: 20px; }
    .hero .image.eight { right: 16%; }
    .hero .arrow { width: 20px; }

    .textSec .story { font-size: 14px; }
    .textSec .chartBlock { grid-template-columns: repeat(1, 1fr); }
    .textSec .chart { width: 100%; }
    .circle-chart { width: 160px; height: 160px; }
    .textSec h2 { padding-bottom: 10px; font-size: 30px; }
    .textSec h2::after { height: 12px; }
    .textSec .videoText { width: 100%; order: 1; }
    .textSec .video { margin: 0 auto 40px auto; width: 300px; }
    .textSec .arrowVideo { display: none; }
    .textSec .detailList .left { margin-bottom: 30px; width: 100%; }
    .textSec .detailList .right { width: 100%; }
    .textSec .listblock .shape2 { display: none; }
    .textSec .detailList h3 { margin-bottom: 10px; font-size: 30px; }
    .textSec .listblock li { font-size: 16px; }
    .textSec .listblock li::before { width: 10px; height: 10px; }
    .textSec .videoBlock { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dashed #499f31; }
    .textSec .videoBlock .image { order: 2; }
    .textSec .detailList { padding-bottom: 60px; margin-bottom: 30px; border-bottom: 1px dashed #499f31; }

    .music-player-container .audioSub { font-size: 14px; }
}

@media screen and (max-width: 479px)  {
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }

    .hero h1 { font-size: 60px; }
    .hero .subtitle { font-size: 16px; }
    .hero .image.two { top: 4%; }
    .hero .image.three { top: 18%; }
    .hero .image.four { left: -25px; }
    .hero .image.seven { width: 28%; }

    .textSec .listblock { padding: 40px 20px; }
    .textSec .listblock li { padding-left: 25px; }
    .textSec .listblock .shape1 { left: 0; width: 30px; }
}