@import url('https://fonts.googleapis.com/css2?family=Parisienne&family=Yatra+One&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: 'Poppins', sans-serif; font-size: 16px; color: var(--black); line-height: 1.6; background-color: #9f9e9e; }
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; }
h1 { font-size: 120px; font-weight: 800; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
p { margin-bottom: 20px; }
p a { font-weight: 700; color: #d85204; text-decoration: none; }
p a:hover { color: var(--black); }
p:last-child { margin-bottom: 0; }

/* global */
.centered { padding-right: calc((100% - 1000px)/ 2); padding-left: calc((100% - 1000px)/ 2); }
.btn { min-width: 204px; font-size: 16px; cursor: pointer; display: inline-flex; border: 0; align-items: center; justify-content: center; min-height: 50px; color: var(--white); transition: var(--transition); background-color: var(--black); border-radius: 10px; }
.btn:hover { background-color: #769166; }

.btn1 { min-width: 204px; font-size: 16px; cursor: pointer; display: inline-flex; border: 0; align-items: center; justify-content: center; min-height: 50px; color: var(--white); transition: var(--transition); background-color: #ff0034; border-radius: 10px; }
.btn1:hover { background-color: var(--black); color: var(--white);}

.btn:disabled { cursor: auto; background-color: #bbb; }
.generatedText { padding-left: 22px; position: absolute; right: 10px; bottom: 10px; color: var(--white); font-size: 10px; z-index: 1; }
.generatedText:before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ''; width: 18px; height: 18px; background: url(../images/star.png) no-repeat; background-size: contain; }

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

/* header */
.header { padding-top: 20px; padding-bottom: 20px; position: absolute; left: 0; top: 0; z-index: 3; width: 100%; display: flex; justify-content: space-between; }
.header .left ul { display: flex; align-items: center; }
.header .left li { display: flex; align-items: center; }
.header .left li:after { margin: 0 20px; display: block; content: ''; width: 2px; height: 20px; background-color: var(--white); }
.header .left li:last-child:after { display: none; }
.header .right { display: flex; align-items: center; }
.header .jconnectlogo { width: 125px; display: block; }
.header .aqi { width: 60px; display: block; }
.header .language { display: flex; align-items: center; border-radius: 16px; overflow: hidden; }
.header .language li a { padding: 0 15px; display: flex; align-items: center; font-size: 14px; font-weight: 400; min-height: 32px; color: var(--black); background-color: var(--white); }
.header .language li.is-active a,
.header .language li a:hover { color: var(--white); font-weight: 700; background-color: var(--black); }
.header .home { margin-left: 20px; width: 30px; height: 29px; }
.header .home svg { width: 30px; height: 29px; fill: var(--white); transition: var(--transition); }
.header .home:hover svg { transform: scale(1.1); }

/* hero */
.heroSec { margin-bottom: 50px; width: 100%; height: 100vh; position: relative; z-index: 1; display: flex; align-items: center; overflow: hidden; }
.heroSec .blur{position: absolute; width: 100%; height: 100%; left: 0; top: 0; backdrop-filter: blur(5px); background: rgba(225, 225, 225, 0.1); z-index: 2;}
.heroSec .text { max-width: 450px; width: 100%; font-size: 20px; text-align: center; color: var(--white); z-index: 3; position: relative;} 
.heroSec .text p{text-shadow: 4px 3px 7px #000000;}
.heroSec h1 { margin-bottom: 20px; color: var(--black); line-height: 1; font-family: "Yatra One", sans-serif; font-weight: 700; }
.heroSec .bg { position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%; }
.heroSec .bg:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); }
.heroSec .bg:after { position: absolute; left: 0; bottom: 0; content: ''; width: 100%; height: 30%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(159,158,158,1) 100%); }
.heroSec .bg video { min-width: 100%; min-height: 100%; }

/* about air */
.aboutAir { margin-bottom: 50px; width: 100%; overflow: hidden; }
.aboutAir .top { margin-bottom: 20px; width: 100%; font-size: 20px; }
.aboutAir .top h2 { margin-bottom: 10px; text-align: center; }
.aboutAir .top p { text-align: center; }

/* sign sec */
.signSec { margin-bottom: 50px; width: 100%; position: relative; overflow: hidden; }
.signSec .win { padding: 30px 50px; width: 100%; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.signSec .left { width: 160px; }
.signSec .right { width: calc(100% - 160px); }
.signSec .monitor { padding: 12px; width: 132px; position: relative; height: 132px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #68b555; /*animation: pulse-animation 2s infinite;*/ }
.signSec .monitor:after,
.signSec .monitor:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; z-index: -1; }
.signSec .monitor:before { animation: 2.5s anim-effect-front 0s linear infinite; box-shadow: 0 0 0 20px rgba(151,219,136,1); }
.signSec .monitor:after { animation: 2.5s anim-effect-back 0s linear infinite; box-shadow: 0 0 0 40px rgba(151,219,136,1); }
.signSec .win h2 { margin-bottom: 10px; text-align: center; }
.signSec .win p { margin-bottom: 20px; text-align: center; }
.signSec .win p span{display: inline-block; color: #217c0b; font-weight: 600;}
.signSec .button { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; }
.signSec .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; border-radius: 25px; overflow: hidden; background-color: #fff;}
.signSec .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: none;}
.signSec .congratulation { padding: 30px 50px; width: 100%; display: none; flex-wrap: wrap; justify-content: space-between; position: relative; overflow: hidden; box-shadow: 0px 0px 38px 22px rgba(0,0,0,0.07); border-radius: 25px; background-color: var(--white); }
.signSec .text { width: 73%; }
.signSec .img { width: 24%; }
.signSec .text h2 { margin-bottom: 10px; font-size: 40px; color: #d85204; font-family: "Parisienne", sans-serif; }
.signSec .share-btn { padding: 12px; position: absolute; right: 15px; top: 15px; z-index: 1; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #838383; cursor: pointer; border: 0; transition: var(--transition); }
.signSec .share-btn svg { width: 25px; height: 25px; fill: var(--white); }

@keyframes anim-effect-back {
    0% {
        box-shadow: 0 0 0 5px rgba(151,219,136,1);
        opacity: 1;
        transform: scale3d(1,1,1.1)
    }

    50% {
        box-shadow: 0 0 0 20px rgba(151,219,136,.6);
        opacity: 1;
        transform: scale3d(1,1,1.1)
    }

    100% {
        box-shadow: 0 0 0 30px rgba(151,219,136,0);
        opacity: 0;
        transform: scale3d(1,1,1.1)
    }
}

@keyframes anim-effect-front {
    0% {
        box-shadow: 0 0 0 0px rgba(151,219,136,1);
        opacity: 1;
        transform: scale3d(1,1,.5)
    }

    50% {
        box-shadow: 0 0 0 10px rgba(151,219,136,.6);
        opacity: 1;
        transform: scale3d(1,1,.5)
    }

    100% {
        box-shadow: 0 0 0 15px rgba(151,219,136,0);
        opacity: 0;
        transform: scale3d(1,1,.5)
    }
}

/* poll sec */
.pollSec { margin-bottom: 50px; width: 100%; }
.pollSec .top { margin-bottom: 30px; width: 100%; }
.pollSec .heading { margin-bottom: 10px; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; align-items: flex-end; }
.pollSec .top p { text-align: center; }
.pollSec .pollBlock { width: 100%; position: relative; }
.pollSec .poll { padding: 30px 20px; margin-bottom: 30px; position: sticky; top: 40px; width: 100%; border-radius: 25px; background-color: var(--white); }
.pollSec .poll:last-child { margin-bottom: 0; }
.pollSec .poll h3 { margin-bottom: 15px; font-size: 16px; font-weight: 600; min-height: 45px; }
.pollSec .poll ul { list-style: none; }
.pollSec .poll li { margin-bottom: 10px; width: 100%; display: flex; /*gap: 15px;*/ align-items: center; }
.pollSec .poll li:last-child { margin-bottom: 0; }
.pollSec input { width: 14px; height: 14px; }
.pollSec label { padding-left: 10px; font-size: 14px; white-space: nowrap; width: 200px; }
.pollSec .bar { position: relative; width: calc(100% - 274px); height: 12px; border-radius: 3px; background-color: #c8c8c8; }
.pollSec .bar span { position: absolute; left: 0; top: 0; height: 100%; background-color: #71c78a; }
.pollSec .percent { font-size: 14px; width: 60px; text-align: right; }
.pollSec .button { margin-top: 15px; display: flex; justify-content: center; width: 100%; }
.pollSec .btn { min-width: 120px; min-height: 40px; }

/* fact sec */
.factSec { margin-bottom: 50px; width: 100%; overflow: hidden; }
.factSec .top { margin-bottom: 20px; width: 100%; }
.factSec h2 { text-align: center; }
.factSec h2 strong { text-align: center; display: block; font-weight: 700; font-size: 60px; }
.factSec .subtitle { text-align: center; font-size: 25px; }
.factSec .factBlock { margin-bottom: 30px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; overflow: hidden; border-radius: 20px; background-color: var(--white); }
.factSec .factBlock:last-child { margin-bottom: 0; }
.factSec .factBlock:nth-child(odd) { flex-direction: row-reverse; }
.factSec .factImg { width: 300px; position: relative; }
.factSec .factImg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.factSec .factText { padding: 20px 30px; width: calc(100% - 300px); align-self: center; }
.factSec .myth { margin-bottom: 50px; width: 100%; }
.factSec h3 { padding: 8px 20px; margin-bottom: 8px; display: inline-block; color: var(--white); font-weight: 400; border-radius: 8px; background-color: #e51414; }
.factSec .fact { padding: 0 20px 20px 20px; display: flex; flex-wrap: wrap; width: 100%; color: var(--white); background-color: #289348; }
.factSec .fact h3 { margin-top: -22px; margin-left: -20px; background-color: #005118; }

/* video sec */
.videoSec { margin-bottom: 50px; width: 100%; overflow: hidden; }
.videoSec .video { margin-bottom: 50px; width: 100%; min-height: 450px; position: relative; justify-content: center; display: flex; align-items: center; overflow: hidden; }
.videoSec .video:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; z-index: 1;  background-color: rgba(0,0,0,0.5);}
.videoSec .video video { width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; position: absolute; top: 50%;
    left: 50%; transform: translate(-50%, -50%); aspect-ratio: 16/9; overflow: hidden; }
.videoSec .videoText { padding: 20px; position: relative; z-index: 1; max-width: 720px; width: 100%; color: var(--white); text-align: center; font-size: 24px; }

/* footer */
.footer { padding-top: 20px; padding-bottom: 20px; width: 100%; text-align: center; color: var(--white); background-color: var(--black); }

/* share btn */
/* .share-btn { padding: 12px; position: fixed; right: 15px; bottom: 15px; z-index: 99; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #404040; cursor: pointer; border: 0; transition: var(--transition); }
.share-btn svg { width: 25px; height: 25px; fill: var(--white); } */

/* smoke */
.fadeOut { animation-name: fadeOut; }  
#viewport { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: -1; overflow: hidden; }
#viewport .smoke { position: absolute; width: 250px; height: 250px; background: url('../images/smoke.png') no-repeat; bottom: -350px; margin-left: 0px }

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}  

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

@media screen and (max-width: 992px)  {
    h1 { font-size: 80px; }

    .videoSec .video { min-height: 400px; }
}

@media screen and (max-width: 767px)  {
    .btn { min-width: 170px; }
    h1 { font-size: 60px; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }

    .header { align-items: center; }
    .header .jconnectlogo { width: 80px; }
    .header .aqi { width: 40px; }
    .header .left li:after { margin: 0 12px; width: 1px; height: 16px; }
    .header .language li a { font-size: 12px; }
    .header .home { margin-left: 15px; }
    .header .home,
    .header .home svg { width: 22px; height: 21px; }

    .heroSec .text { max-width: 100%; font-size: 16px; }   
    .heroSec .bg:before { z-index: 1; }
    .heroSec .bg video { min-width: unset; object-fit: cover; position: absolute; right: -470px; }

    .aboutAir { margin-bottom: 50px; }
    .aboutAir .top { font-size: 16px; }

    .signSec .win { padding: 30px 20px; }
    .signSec .left { margin-bottom: 30px; width: 100%; display: flex; justify-content: center; }
    /* .signSec .left img { max-width: 120px; } */
    .signSec .right { width: 100%; }
    .signSec .congratulation { padding: 20px; }
    .signSec .text { width: 100%; order: 1; }
    .signSec .img { margin-bottom: 20px; width: 100%; display: flex; justify-content: center; }
    .signSec .img img { max-width: 180px; }

    .pollSec .icon { max-width: 85px; }
    .pollSec .heading h2 { width: 100%; text-align: center; }
    .pollSec .poll { width: 100%; }
    .pollSec label { font-size: 12px; width: 170px; }
    .pollSec .percent { font-size: 12px; }
    .pollSec .bar { width: calc(100% - 244px); }

    .factSec h2 strong { font-size: 35px; }
    .factSec .subtitle { font-size: 16px; }
    .factSec .factImg { width: 100%; height: 300px; }
    .factSec .factText { padding: 20px; width: 100%; }

    .videoSec .video { min-height: 300px; }
    .videoSec .videoText { font-size: 16px; }

    .footer { font-size: 14px; }
}