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

:root {
    --white: #fff;
    --black: #000;
    --primary: #ff0000;
    --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: 1.8; background-color: #fff; background: url(../images/body-bg.jpg) 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); }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.4; }
h2 { margin-bottom: 15px; font-size: 40px; }
h3 { font-size: 18px; }

/* global */
.centered { padding-right: calc((100% - 1160px)/ 2); padding-left: calc((100% - 1160px)/ 2); }
.btn { padding: 4px 30px 0 30px; min-width: 200px; min-height: 60px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 700; cursor: pointer; color: var(--black); border-radius: 35px; background-color: var(--white); }
.btn:hover { color: var(--white); background-color: var(--primary); }

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

/* header */
.headerSec { padding: 0 50px; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.headerSec .logo { display: block; height: 28px; }
.headerSec .logo svg { height: 28px; width: 163px; }
.headerSec .back { color: var(--white); position: relative; text-transform: uppercase; font-size: 14px; font-weight: 500; }
.headerSec .back:before { position: absolute; left: -12px; top: 6px; content: ''; width: 0; height: 0; border-width: 5px 6px 5px 0; border-color: transparent #e81616 transparent transparent; border-style: solid; }
.headerSec .back:hover { color: var(--primary); }

/* hero */
.heroSec { padding-top: 100px; padding-bottom: 50px; width: 100%; min-height: 640px; overflow: hidden; position: relative; background: #13161c url(../images/hero-pattan.png) center top no-repeat; background-size: cover; }
.heroSec .block { position: relative; width: 100%; z-index: 1; }
.heroSec .title { margin: 0 auto 30px auto; text-align: center; width: 100%; position: relative; z-index: 2; color: var(--white); }
.heroSec h1 { margin-bottom: 20px; position: relative; text-align: center; color: var(--white); font-size: 140px; font-weight: 800; line-height: 0.9; }
.heroSec h1 span { background: #EF929E; background: linear-gradient(to right, #EF929E 0%, #FEAE4B 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.heroSec .countdown { margin: 0 auto 60px auto; position: relative; max-width: 500px; width: 100%; }
.heroSec .countdown::before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; z-index: 1; }
.heroSec .countdown span { height: 1px; opacity: 0; display: block; }
.heroSec .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.heroSec .bg:before { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 200px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(17,17,17,1) 100%); }
.heroSec .divider-vertical { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; max-width: 1350px; margin: 0 auto; }
.heroSec .divider-vertical .line { position: absolute; top: 0; width: 1px; height: 100%; background-color: rgba(55, 55, 55, 0.57); }
.heroSec .divider-vertical .line:before { position: absolute; left: 0; top: 0; content: ''; width: 1px; height: 60px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.00000001) 100%); animation: line_fall 10s linear infinite; }
.heroSec .divider-vertical .line1 { left: 0; }
.heroSec .divider-vertical .line2 { left: 33%; }
.heroSec .divider-vertical .line3 { left: 67%; }
.heroSec .divider-vertical .line4 { left: 100%; }
.heroSec .scroll-element { background-repeat: no-repeat; background-size: cover; background-position: center; width: 100%; height: calc(100% + 50px); background-image: url(../images/hero-shape.webp); }
/* new year */
.new-year { margin-bottom: 50px; position: relative; width: 100%; height: auto; display: flex; justify-content: center;  }
.new-year svg { width: 100%; max-width: 450px; height: 100%; }
.stroke-fill { stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke: #efefef; }
#happy-stroke { animation: happy-dash 1.7s linear normal forwards; }
#n-stroke { animation: dash 2s 1.8s linear normal forwards; }
#ew-stroke { animation: dash 2s 2.5s linear normal forwards; }
#y-stroke { animation: dash 2s 3.3s linear normal forwards; }
#ye-stroke { animation: dash 1s 4s linear normal forwards; }
#ear-stroke { animation: dash 2s 4.18s linear normal forwards; }
#underline-stroke { animation: dash 0.5s 5.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) normal forwards; }

.flake path{ fill:#fff; }  
.flake-wrapper{ position:absolute; }
.flake { width:100%; height:100%; }
  
@keyframes falling{
    0%{
        top:-50px;
        opacity:1;
    }
    50%{
        opacity:1;
    }
    80%{
        opacity:0;
    }
    100%{
        top:100%;
        opacity:0;
    }
}
  
@keyframes line_fall {
    0% {
        top: 0%;
    }
    100% {
        top: 100%;
    }    
}

/* new year */
@keyframes dash {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes happy-dash {
    0% {
        stroke-dashoffset: 1000;
    }
    6% {
        stroke-dashoffset: 976;
    }
    6.01% {
        stroke-dashoffset: 958;
    }
    13% {
        stroke-dashoffset: 936;
    }
    13.01% {
        stroke-dashoffset: 905;
    }
    20% {
        stroke-dashoffset: 896;
    }
    20.01% {
        stroke-dashoffset: 864;
    }
    27% {
        stroke-dashoffset: 840;
    }
    27.01% {
        stroke-dashoffset: 830;
    }
    34% {
        stroke-dashoffset: 808;
    }
    34.01% {
        stroke-dashoffset: 775;
    }
    40% {
        stroke-dashoffset: 764;
    }
    40.01% {
        stroke-dashoffset: 738;
    }
    60% {
        stroke-dashoffset: 688;
    }
    60.01% {
        stroke-dashoffset: 658;
    }
    80% {
        stroke-dashoffset: 610;
    }
    80.01% {
        stroke-dashoffset: 580;
    }
    90% {
        stroke-dashoffset: 555;
    }
    90.01% {
        stroke-dashoffset: 543;
    }
    99.99% {
        stroke-dashoffset: 525;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* top photo */
.topPhoto { padding-bottom: 50px; width: 100%; height: 475px; overflow: hidden; background-color: #111; }
.topPhoto .img { position: relative; width: 100%; }
.topPhoto .img img { width: 100%; height: auto; border-radius: 20px; }
.topPhoto .img:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20%; background: linear-gradient(0deg, #13161c 0%, rgba(19, 22, 28, 0.00) 95.2%); }
.topPhoto .swiper-slide { padding: 30px; transition: var(--transition); transform: translateZ(0) scale(0.9)!important; }
.topPhoto .swiper-slide-prev,
.topPhoto .swiper-slide-next { transform: translateZ(0) scale(1)!important; }
.topPhoto .swiper-slide-active { transform: translateZ(0) scale(1.2)!important; }

/* news Sec */
.newsSec { padding-top: 50px; padding-bottom: 50px; margin-bottom: 100px; width: 100%; overflow: hidden; background-color: #111; }
.newsSec h2 { color: var(--white); }
.newsSec .block { width: 100%; display: flex; gap: 30px; flex-wrap: wrap; }
.newsSec .item { width: calc(25% - 23px); }
.newsSec .button { margin-top: 50px; width: 100%; display: flex; justify-content: center; }

/* card Story */
.cardStory { width: 100%; height: 100%; background-color: #232323; }
.cardStory .image { width: 100%; height: 200px; }
.cardStory .image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.cardStory .sliderText { padding: 20px; width: 100%; color: var(--white); font-weight: 300; }

/* timeline sec */
.timelineSec { margin-bottom: 150px; width: 100%; overflow: hidden; }
.timelineSec h2 { margin-bottom: 30px; width: 100%; text-align: center; }
.timelineSec .timelineList { width: 100%; background: url(../images/line.png) center top repeat-y; background-size: 50px; }
.timelineSec .timelineList li { margin-bottom: 50px; width: 100%; }
.timelineSec .timelineList li:last-child { margin-bottom: 0; }
.timelineSec .timelineList li:nth-child(even) .block { padding-left: 100px; padding-right: 0; margin-left: auto; }
.timelineSec .timelineList li:nth-child(even) .timeline { margin-left: 0; }
.timelineSec .timelineList li:nth-child(even) .icon { right: unset; left: -22px;  }
.timelineSec .timelineList li:nth-child(even) .title { padding-left: 50px; padding-right: 0; }
.timelineSec .block { padding-right: 100px; width: 50%; position: relative; }
.timelineSec .icon { padding: 22px; position: absolute; right: -25px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: var(--primary); }
.timelineSec .timeline { margin-left: auto; max-width: 350px; width: 100%; text-align: center; }
.timelineSec .title { padding-right: 50px; font-size: 70px; color: var(--black); opacity: 0.1; font-weight: 900; line-height: 1; }
.timelineSec .date { margin-top: -40px; font-size: 20px; color: var(--black); font-weight: 700; }
.timelineSec .text { font-size: 24px; color: var(--black); font-weight: 700; }
.timelineSec .timelineList li:nth-child(5) .icon,
.timelineSec .timelineList li:nth-child(7) .icon,
.timelineSec .timelineList li:nth-child(9) .icon { right: -50px; }
.timelineSec .timelineList li:nth-child(6) .icon,
.timelineSec .timelineList li:nth-child(8) .icon { left: -50px; }
.timelineSec .timelineList li:nth-child(10) .icon { left: -40px; }
.timelineSec .timelineList li:nth-child(4) .icon { left: -40px; }
.timelineSec .timelineList li:nth-child(1) .icon { right: -10px; }

/* gallery sec */
.gallerySec { margin-bottom: 150px; width: 100%; }
.gallerySec .top { margin-bottom: 20px; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.gallerySec h2 { margin-bottom: 0; }
.gallerySec .button { display: flex; align-items: center; gap: 15px; }
.gallerySec .swiper { width: 100%; height: 100%; position: relative; }
.gallerySec .swiper-slide { cursor: pointer; }

/* slider button */
.slideBtn { margin: 0; cursor: pointer; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; transition: var(--transition); border: 1px solid #c7c7c7; background-color: var(--white); }
.slideBtn svg { width: 24px; height: 14px; transition: var(--transition); height: auto; object-fit: unset; transform-origin: unset; fill: var(--black); }
.slideBtn:hover { border: 1px solid var(--black); background-color: var(--black); }
.slideBtn:hover svg { fill: var(--white); }
.slideBtn:after { display: none; }
.pagination { margin-top: 20px; position: relative; left: unset!important; top: unset!important; bottom: unset!important; right: unset!important; display: flex; justify-content: flex-end; }
.pagination span { width: 8px; height: 8px; background-color: #9ca3af; }

/* video sec */
.videoSec { margin-bottom: 150px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
.videoSec .left { width: 285px; }
.videoSec .right { width: calc(100% - 300px); }
.videoSec .left p { margin-bottom: 20px; }
.videoSec .button { width: 100%; display: flex; gap: 15px; }
.videoSec .slideBtn { position: relative; top: unset; left: unset; bottom: unset; right: unset; }

/* card video */
.cardVideo { width: 100%; height: 100%; display: block; box-shadow: 4px 3px 22px -6px rgb(0 0 0 / 13%); background-color: #232323; }
.cardVideo .image { width: 100%; position: relative; height: 160px; }
.cardVideo .image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.cardVideo .icon { position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%); width: 50px; transition: var(--transition); }
.cardVideo .text { padding: 40px 20px 20px 20px; transition: var(--transition); width: 100%; color: var(--black); font-weight: 300; background-color: var(--white); }
.cardVideo:hover .text { color: var(--primary); }
.cardVideo:hover .icon { transform: translateX(-50%) scale(1.1); }

/* quiz sec */
.quizSec { margin-bottom: 150px; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }

/* fact sec */
.factSec {  margin-bottom: 150px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; width: 100%; position: relative; }
/* .factSec h2 { font-size: 50px; line-height: 1; text-transform: uppercase; font-weight: 900; } */
.factSec .left { position: sticky; top: 60px; width: 38%; }
.factSec .left p { font-weight: 700; font-size: 18px; }
.factSec .right { /*position: sticky; top: 20px; padding-top: 50px;*/ width: 56%; /*gap: 40px; display: flex; flex-wrap: wrap; justify-content: space-between;*/ }
.factSec .block { margin-bottom: 40px; position: sticky; top: 60px; width: 100%; }
.factSec .block:nth-child(2) { top: 70px; }
.factSec .block:nth-child(3) { top: 80px; }
.factSec .block:nth-child(4) { top: 90px; }
.factSec .block:nth-child(5) { top: 100px; }
.factSec .block:nth-child(6) { top: 110px; }
.factSec .block:nth-child(7) { top: 120px; }
.factSec .block:nth-child(8) { top: 130px; }
.factSec .block:nth-child(9) { top: 140px; }
.factSec .block:last-child { margin-bottom: 0; }
/* .factSec .block { width: calc(50% - 20px); }
.factSec .block:nth-child(odd) { margin-top: -50px; } */

/* card fact */
.cardFact { width: 100%; position: relative; display: block; border-radius: 20px; overflow: hidden; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); }
.cardFact img { width: 100%; height: auto; /*height: 100%; object-fit: cover; object-position: center center;*/ }
.cardFact .factText { padding: 20px 40px; color: var(--white); position: absolute; left: 0; top: 0; font-size: 20px; width: 100%; height: 100%; display: flex; align-items: flex-end; align-content: flex-end; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.9) 100%); transition: var(--transition); }
.cardFact:hover .factText { opacity: 0.8; }

/* webstory sec */
.webstorySec { margin-bottom: 100px; width: 100%; }
.webstorySec .top { margin-bottom: 20px; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.webstorySec h2 { margin-bottom: 0; }
.webstorySec .button { display: flex; align-items: center; gap: 15px; }
.webstorySec .slideBtn { top: -80px; width: 60px; height: 60px; }
.webstorySec .slideBtn svg { width: 24px; height: 14px;}

/* card webstory */
.cardWebstory { width: 100%; height: 100%; display: block; position: relative; }
.cardWebstory:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; opacity: 0.7; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 37%,rgba(0,0,0,1) 100%); }
.cardWebstory .caption { padding: 15px; font-size: 16px; position: absolute; left: 0; bottom: 0; width: 100%; color: var(--white); font-weight: 500; transition: var(--transition); }
.cardWebstory:hover .caption { opacity: 0.7; }

/* footer */
.footerSec { padding-top: 50px; padding-bottom: 50px; width: 100%; background-color: var(--black); }
.footerSec .title { margin-bottom: 20px; font-size: 20px; width: 100%; text-align: center; font-weight: 700; color: var(--white); }
.footerSec .social { margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
.footerSec .social li a { width: 35px; height: 35px; display: block; }
.footerSec .copyright { font-size: 12px; width: 100%; text-align: center; color: var(--white); }

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

    .cardFact .factText { font-size: 16px; }
}

@media screen and (max-width: 992px)  {
    .heroSec h1 { font-size: 100px; }
    .topPhoto { gap: 20px; }

    .newsSec .item { width: calc(33.33% - 20px); }
}

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

    .headerSec { min-height: 46px; }
    .headerSec .logo { height: 20px; }
    .headerSec .logo svg { width: 120px; height: 20px; }
    .headerSec .back { font-size: 12px; }
    .headerSec .back:before { top: 5px; }

    .heroSec { padding-top: 60px; min-height: 580px; }
    .heroSec .countdown { max-width: 300px; }
    .heroSec h1 { font-size: 60px; }
    .heroSec .title { font-size: 14px; }

    .topPhoto { height: auto; }
    .topPhoto .swiper-slide { transition: var(--transition); transform: translateZ(0) scale(1)!important; }
    .topPhoto .swiper-slide-prev,
    .topPhoto .swiper-slide-active { transform: translateZ(0) scale(1)!important; }


    .cardStory .sliderText { font-size: 14px; line-height: 28px; }

    .newsSec { padding-top: 20px; margin-bottom: 80px; }
    .newsSec .item { width: calc(50% - 20px); }

    .timelineSec { margin-bottom: 80px; }
    .timelineSec .timelineList { background-position: 10px top; background-size: 30px; }
    .timelineSec .block,
    .timelineSec .timelineList li:nth-child(even) .block { padding-left: 80px; padding-right: 0; width: 100%; }
    .timelineSec .icon,
    .timelineSec .timelineList li:nth-child(even) .icon { padding: 16px; right: unset; left: 0; width: 50px; height: 50px; }
    .timelineSec .title { padding: 0 0 0 30px; font-size: 40px; }
    .timelineSec .date { margin-top: -20px; font-size: 16px; }
    .timelineSec .text { font-size: 20px; }
    .timelineSec .timeline { margin-left: 0; text-align: left; }
    .timelineSec .timelineList li:nth-child(even) .title { padding: 0 0 0 30px; }

    .gallerySec { margin-bottom: 80px; }
    .gallerySec .swiper-slide { width: 280px; }
    .gallerySec .slideBtn { top: -40px; }
    .gallerySec .swiper-button-prev { right: 55px; }
    .gallerySec img { width: 100%; height: auto; }

    .slideBtn { width: 40px!important; height: 40px!important; }
    .slideBtn svg { width: 18px!important; height: 11px!important; }

    .videoSec { margin-bottom: 80px; }

    .quizSec { margin-bottom: 80px; }

    .factSec { margin-bottom: 80px; }
    .factSec h2 { margin-bottom: 10px; }
    .factSec .left { position: relative; top: 0; margin-bottom: 50px; width: 100%; }
    .factSec .left p { font-size: 16px; }
    .factSec .right { width: 100%; }
    /* .factSec .right { position: relative; top: 0; padding-top: 0; width: 100%; gap: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; } */
    /* .factSec .block { width: calc(50% - 10px); } */

    /* .cardFact { height: 200px; }
    .cardFact img { height: 100%; object-fit: cover; object-position: center center; } */
    .cardFact .factText { padding: 20px; font-size: 14px; line-height: 1.4; }

    .videoSec h2 { margin-bottom: 10px; }
    .videoSec .left { margin-bottom: 20px; width: 100%; }
    .videoSec .right { width: 100%; }
    .videoSec .swiper-slide { width: 280px; }
    .videoSec .button { justify-content: flex-end; }

    .webstorySec .swiper-slide { width: 280px; }
}

@media screen and (max-width: 480px)  {
    .newsSec .item { width: 100%; }
    .topPhoto .swiper-slide { padding: 15px; }
}