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

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}




@font-face {
    font-family: 'gilroybold';
    src: url('../fonts/gilroy-bold-webfont.eot');
    src: url('../fonts/gilroy-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-bold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-bold-webfont.woff') format('woff'),
         url('../fonts/gilroy-bold-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-bold-webfont.svg#gilroybold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gilroylight';
    src: url('../fonts/gilroy-light-webfont.eot');
    src: url('../fonts/gilroy-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-light-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-light-webfont.woff') format('woff'),
         url('../fonts/gilroy-light-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-light-webfont.svg#gilroylight') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'gilroy-regular';
    src: url('../fonts/gilroy-regular-webfont.eot');
    src: url('../fonts/gilroy-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-regular-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-regular-webfont.woff') format('woff'),
         url('../fonts/gilroy-regular-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-regular-webfont.svg#gilroy-regular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'gilroy-heavy';
    src: url('../fonts/gilroy-heavy-webfont.eot');
    src: url('../fonts/gilroy-heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-heavy-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-heavy-webfont.woff') format('woff'),
         url('../fonts/gilroy-heavy-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-heavy-webfont.svg#gilroy-heavyuploaded_file') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'gilroy-semibold';
    src: url('../fonts/gilroy-semibold-webfont.eot');
    src: url('../fonts/gilroy-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gilroy-semibold-webfont.woff2') format('woff2'),
         url('../fonts/gilroy-semibold-webfont.woff') format('woff'),
         url('../fonts/gilroy-semibold-webfont.ttf') format('truetype'),
         url('../fonts/gilroy-semibold-webfont.svg#gilroy-semibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{ overflow-x: hidden;  font-family: 'gilroylight'; background: #D1DAE9;}
p{ font-size: 20px; line-height:1.5; margin-bottom:20px; color: #121212; font-family: 'gilroy-semibold';}
p:last-child{ margin-bottom:0 !important;}

a{ text-decoration: none;}

/* section{ height: 100vh; max-height: 100vh;} */

.flex{ display: flex;}
.flex-wrap{ flex-wrap: wrap;}
.img-fluid{ max-width: 100%; height: auto;}
.common-padding{ padding:80px 0;}


h1{ font-size: 175px; line-height: 1; text-transform: uppercase;  font-family: 'gilroy-heavy'; text-shadow: 0 5.757px 14.393px #B6C2D8;}
.heading105{font-size: 105px; line-height: 1;}
h2{font-size:134px; line-height:1.25;}
h3{ font-size: 35px; line-height: 1.25;}

.text-white{ color:#fff !important}
.text-yellow{ color:#f0ff4d !important}



section{height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center;}

/**========================================
Force for good intro
========================================**/
#force-for-good-intro::before{content: ''; border-radius: 472px; background: #FFF; filter: blur(132px); position: absolute; top: 50%; left: 50%;    transform: translate(-50%, -50%); z-index: 0; height: 50%; width: 50%;}
.video-outer {overflow: hidden; mix-blend-mode: plus-lighter; flex-shrink: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-outer video{object-fit: cover; width: 100%; height: 100%;filter: opacity(0.2);}
.forceforgood-in{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); max-width: 625px; text-align: center;}



/**======================================
Masthead Caption
=====================================**/
#masthead-banner::before{content:''; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  border-radius: 1939px; background: radial-gradient(50% 50% at 50% 50%, rgba(187, 200, 219, 0.00) 0%, #B6C2D8 100%); filter: blur(127px); z-index: 2;}
.mastheadcaption{ position: relative; max-width:560px; margin:20vh auto 0; z-index:9;}
.mastheadcaption h1 span{ display: flex;}
.flag{position: absolute; left: 2.75%; top: 12.5vw;transform: rotate(31.5deg); flex-shrink: 0;  width: 29.75vw;}
.map{position: absolute; left:30vw;top: 5vw;}
.bird{position: absolute; left: 20vw; top: 17vw;}

.flag-plain{ position:relative; top:-150px; display: flex; flex-wrap:nowrap; left: 60px;}
.flag-plain .plain{height:215px; position: absolute;}
.flag-plain .plain:nth-of-type(1){left:0; top: 0;}
.flag-plain .plain:nth-of-type(2){left:15%; top: 15px;z-index: -1;}
.flag-plain .plain:nth-of-type(3){left:30%; top: 30px; z-index: -1;}

.rocket{position:absolute; right: 12vw;  top:0vw; display: inline-block; transform: translateX(0)  translatey(2vw) rotate(0deg);
  animation: moveRocket 6s ease-out forwards infinite;}
.moon{position:absolute; right: 19vw; top:4vw}

 
/* @keyframes moveRocket {
  to{right:13vw;  top:vw; transform: translateX(2vw) translatey(-2vw) rotate(14deg);}
}  */


#masthead-banner{ position: relative; height: 100vh; background-color: #fff;   display: flex; width: 100vw;justify-content: center;
    align-items: center;}

#masthead-banner::before{ content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 1939px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(191, 210, 238, 0.00) 0%, #C3C3C3 100%);
    filter: blur(127px);
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%); z-index: 0;}

#masthead-banner img {
  display: block;               /* avoid layout jumps */
  transform-origin: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;       /* optional: GSAP will clear this after intro */
}

.mastheadcaption {
  will-change: transform;
}




  .left-masthead{ position: absolute; top: 50%; left:-10vw; width:50vw; height: auto; transform: translateY(-50%);z-index:2;}
  .center-masthead{ position: absolute; top:8%; left: 50%; width: auto; height: auto; transform: translate(-50%,-0%); z-index:1;}
  .right-masthead{ position: absolute; top: 50%; right: -10vw; width: 50vw; height: auto; transform: translateY(-50%); z-index: 3;}

.chakra-big-container{
  position: absolute;
  top: 0;
  right: 0vw;  
  z-index: 10;
}
.chakra-img-big{ animation: spin 20s infinite linear; position: absolute; top:0; right:10vw; height:40vw; width:40vw; max-width: inherit; transform: translateY(-50%);  transform-origin: center center; /* ensures spin from center */}
.chakra-ray{ position: absolute;
    top: 0;
    right: 10vw;
    z-index: 10;
    max-width: 40vw;
    z-index: 1;
    filter: blur(17px);
    mix-blend-mode: screen; opacity: 0.5;}

@keyframes spin {  
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}


.chakra-img-small{    animation: spin 20s infinite linear;
    position: absolute;
    top: 56%;
    left: 10%;
    height: 15vw;
    width: 20vw;
    max-width: inherit;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    z-index: -1; }

.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero canvas {
  position: absolute;
  inset: 0;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  pointer-events: none; z-index: 1;
}


canvas {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0; 
}

.hero .content {
  position: relative;
  z-index: 1;
  color: #000;
}

.blur-frame {
    opacity: 0;
    transition: opacity 1s ease; /* Smooth fade-in */
  }
  .blur-frame.visible {
    opacity: 1;
  }



body.no-scroll {
   position: fixed;
  width: 100%;
}


/**READ MORE**/
.read-more-container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  flex-direction: row-reverse; /* keep if you want arrow on right */
  flex-wrap:wrap; /* prevent wrapping */    width: 100%; justify-content: center;
}

.read-more-icon {
  transition: transform 0.3s ease;
}

.extra-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.4s ease; line-height: 1; font-size: 20px; color:#fff;

}

.read-more-container:hover .extra-text {
  max-width: 100px; /* adjust as needed */
  opacity: 1;
  color:#FFF;
}

.read-more-container:hover .read-more-icon {
  transform: translateX(4px);
}






.hero {
    position: relative;
    overflow: hidden;
}
.hero-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: white; /* Optional */
    display: flex;
    flex-direction: column;
}

.hero-new-content {
    flex: 1; /* Fill the remaining height */
    overflow-y: auto; /* Enable vertical scroll */
    /* padding: 20px; */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on mobile */
}
.hidden {
    display: none;
}

.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.fade-in {
    opacity: 1;
    display: block;
    transition: opacity 0.5s ease;
}


.bg-image {
    position: absolute;
    inset: 0;
    /* background-image: url("../images/build-bg.webp");
    background-size: cover;
    background-position: center; */
    filter: url(#ripple);
    transition: filter 0.2s; 
}

.bg-image img{ width: 100%; height: 100%; object-fit: cover;}
.overlay {
       position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    color: white;   
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-wrap: wrap;
}
.overlay h1{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}


.bookmark {
    position: sticky;
    margin-left: -3vw !important;
    left: 0;
  top: 50%;
  transform: translateY(-50%);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 10; display: flex; flex-wrap: wrap; flex-direction: column; width: 12px;  margin-top: -100px;
}
.bookmark li {
  width: 12px;
  height: 12px;
  border-radius:0%;
  background:transparent;
  margin: 7px 0;
  transition: background 0.3s;   
  border: 1px solid #fff;
}
.bookmark li.active {
  background:#fff;
   border: 1px solid #fff;
}


 .build-images-slide {
     /*height: 100vh;
   overflow-y: auto;*/  padding: 5vw 7vw; 
  }

  
.build-parallax-img {
    max-height: 675px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 100px;
    overflow: hidden;
    border-radius: 30px;
}

.build-parallax-img figure{ display:flex; flex-wrap: wrap; width:100%; position: relative; }
.build-parallax-img .figurecaption{ position: absolute; top:50%; padding:0px;  align-items: center; transform: translateY(-50%);max-width:430px; left:60px; z-index: 10;}

/* .build-parallax-img:nth-of-type(1){ margin-top: -100px !important;} */
  .build-parallax-img .img{ width: 100%;}
  .build-parallax-img  .img-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
   .build-parallax-img  .img-container img{ width: 100%; max-width:inherit; height: 100%; object-fit: cover;}
  canvas.webgl {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }

  .build-parallax-img h2{ font-size: 122px; line-height: 1; border-bottom: 1px solid #fff; color: #fff; font-family: 'gilroy-heavy'; height:95px; margin-bottom: 20px; overflow: hidden;}
  .build-parallax-img h3{ font-size: 28px; line-height: 1;  color: #fff;   font-family: 'gilroybold';}
  .build-parallax-img p,
  .build-parallax-img ul li{ font-size: 18px  !important; line-height: 1.25 !important;   color: #fff;     font-family: 'gilroy-semibold';}
    .build-parallax-img ul{ padding-left: 0 !important; list-style-type: none;}
  .build-parallax-img ul li{ margin-bottom: 5px; padding-left: 20px; position: relative;}
  .build-parallax-img ul li::before{ content:''; position: absolute; left: 0; top:5px; background: #fff; border-radius: 50%; height:7px; width: 7px;}
  .build-parallax-img .readmore{display: flex; flex-wrap: wrap; align-items: CENTER; max-width: max-content; position: relative; color: #fff;  transition: text-indent 0.6s; margin-right: 40px;}
  .build-parallax-img .readmore::before{ content:''; background: url(../images/readmore-arrow.webp) no-repeat;  position: absolute;  right: -50px; height: 40px; width: 40px;
    background-size: cover;  filter: invert(13%) sepia(88%) saturate(6500%) hue-rotate(-6deg) brightness(90%) contrast(90%); transition: right 0.6s;}
  .build-parallax-img .readmore:hover::before{ right:-50px}

/**=======================================
POPUP CSS
=======================================**/
  .breadcrumb-list{ display: flex; flex-wrap: wrap; gap: 40px; align-items: center; margin-bottom:50px;  position: sticky;
    top: 15px;
    left: 7vw;
    z-index:99;}
  .breadcrumb-list span{ font-size:25px; line-height:25px;  font-family: 'gilroybold';     color: #e0e0e0 !important; text-shadow: 0 1.227px 3.069px rgba(0, 0, 0, 0.5); opacity: 0.9;}
  #build-popup .breadcrumb-list .back-btn:nth-of-type(2){ margin-left: -30px; color: #fff !important; }
/**Build Popup**/
.back-btn{    font-size:28px; line-height:25px;  font-family: 'gilroybold';
    background: transparent;
    border: none; 
    column-gap: 10px;
    display: flex;
    align-items: CENTER;  text-shadow: 0 1.227px 3.069px rgba(0, 0, 0, 0.25); color: #fff !important;}
.back-btn span.icon img{ transform: rotate(-180deg); }

.popup {
  position: fixed;
  inset: 0;
  background:#D1DAE9;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.95);
  transition: none;
}

.popup {
  transform-style: preserve-3d;
  perspective: 1000px;
}




.popup-content{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column; overflow-y: scroll;
  
}

.popup-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* enable smooth native scroll on iOS */
  height: 100vh; /* or fixed height to allow scrolling */
  max-height: 100vh;
  overscroll-behavior: contain; /* prevent parent scroll bleed */
}

.panel {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  background: #eee;
  margin-bottom: 1rem;
}

.popup .close-btn{background: crimson; color: white; border: none; padding: 0.5rem; cursor: pointer;}


   #build-popup .popup-body:before{   background: url(../images/build-bg.webp) no-repeat; }
    #better-popup .popup-body:before{ background: url(../images/better-bg.webp) no-repeat;}
    #today-popup .popup-body:before{ background: url(../images/today-bg.webp) no-repeat;}


#build-popup .popup-body:before,
#better-popup .popup-body:before,
#today-popup .popup-body:before{content:''; position: fixed; top: 0; bottom:0; left: 0; right: 0;   background-size: cover;  background-attachment: fixed;  background-position: center center; filter: opacity(0.3); z-index: -1;}

 


    /* .ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff55 10%, transparent 70%);
  width: 100px;
  height: 100px;
  pointer-events: none;
  transform: scale(0);
  opacity: 0;
  z-index: 1;
} */

.build-parallax-img {

  display: flex;
  justify-content: center;
  align-items: center;
}

.build-parallax-img img {
  will-change: transform;
  transform: translate3d(0, 0, 0); /* trigger GPU acceleration */
}

#conclusion{ background: #131313; position: relative;}
#conclusion .conclusion-in{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center; width: 58vw;}
#conclusion .conclusion-in p{ color: #fff !important; font-size:28px; line-height: 1.5; font-family: 'gilroylight';}
#conclusion video{ position: absolute; top:0; bottom:0; left:0; right:0; z-index:0;}

 .preloader-overlay {
    position: fixed;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,1);
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 2rem;
    z-index: 9999;
  }
  .preloader-text span {
    display: inline-block;
    opacity: 0;
  }
  /* Simple SVG styling */
  .preloader-svg {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    stroke: white;
    stroke-width: 3;
    fill: none;
  }


  .build-parallax-img figure::before{ content:''; position: absolute; top:0; bottom: 0; left: 0; right:0; background-color: rgba(0,0,0,0.65);}

  .left-masthead img{ width: 100%; height: auto; }


@media all and (min-width:992px){
 .popup-body {
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        .popup-scroll-wrapper {
            min-height: 100%;
            overflow: visible;
            will-change: transform;
        }
        html.lenis {
            height: auto;
        }
        .lenis.lenis-smooth {
            scroll-behavior: auto;
        }
      }

  

@media all and (max-width:767px){
  h1 {    font-size: 110px;}
  .heading105 {font-size: 67px;}
  .build-parallax-img{ height: 80vh; margin-bottom: 80px;}
  .build-parallax-img figure{ height: 100%;}
  .build-parallax-img .figurecaption{ width: calc(100% - 60px); left: 30px; max-width: inherit;}

  .bookmark{ margin-left:-5vw !important; }
  

  .hero canvas{ width: 100%; height: 100%; left: 0 !important;   top: 0 !important;}
  .forceforgood-in{ width: 90vw;}
  #force-for-good-intro{ height: 80vh;}

  #conclusion .conclusion-in,
  .mastheadcaption{ width:90vw;}
  .map {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90vw;
    margin: 0 auto;
    transform: translate(-50%, -50%) !important;
}

.build-parallax-img .img-container{ position: relative;}
.build-parallax-img .img-container::before{ content:''; position:absolute; background: rgba(0,0,0,0.10); height: 100%; width: 100%; z-index: 9;}


  .build-images-slide{ padding:20vw 7vw 5vw;}
   .popup  .popup-body:before{ background-size: cover !important;}

   .breadcrumb-list{ gap: 30px;}
   .breadcrumb-list{ margin-bottom: 30px;}
   .breadcrumb-list span,
   .back-btn {
    font-size: 22px;
    line-height: 25px;}
    #build-popup .breadcrumb-list .back-btn:nth-of-type(2) {
    margin-left: -15px;}

    #conclusion .conclusion-in p{ font-size:25px; line-height: 1.25;}

    .build-parallax-img h2{ font-size:90px;   line-height: 1; height: 68px;}
    .build-parallax-img p, .build-parallax-img ul li{ font-size: 16px !important;}
    .build-parallax-img h3 {font-size: 25px;}



    .moon {
    position: absolute;
    right: 0;
    top: -30vw;}

    
.rocket {
    position: absolute;
    right: -17vw;
    top: 35vw;}

    .img-left-group,
    .img-right-group{ display: none;}
  
    .video-outer video{filter: opacity(0.5);}

    .mastheadcaption{ margin-top: -10vh;}

    .left-masthead,
    .right-masthead,
    .center-masthead{ top:inherit !important; bottom:20vw !important;         transform: inherit;}
    .center-masthead {
    left: 20vw;}

    #masthead-banner {
    position: relative;
    height: 100vh;}

   }

 /* Loader Overlay */
  /* .loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
  }

  .loader img {
    max-width: 200px;
    display: block;
  } */


  #loaderCanvas
   canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none; width: 100%; height: 100%;
  }

  body.loader-active {
  overflow: hidden;
}


.img-left-group,
.img-right-group{
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

body.loader-done .img-left-group,
body.loader-done .img-right-group {
  opacity: 1 !important;
  visibility: visible !important;
 
}
body.loader-active .mastheadcaption {
  opacity: 1;
  visibility: visible;
}


.mobile{ display:none !important;}


@media all and (max-width:767px){
  .mobile{ display:block !important; width: 100vw; height: 100%;}
  .mobile img{ width: 100%; height: 100%; object-fit: cover; max-width: inherit;}
  .dektop{ display:none !important;}
}

@media all and (max-width:480px){
  h1 {font-size: 28vw;}
  .heading105 {font-size: 17vw;}
}


/**STYLE FOR 1920*1080 screen at 125% scale**/
@media only screen and (max-width: 1536px) and (min-width: 1441px) {
   h1 {font-size: 120px;}
}

/**STYLE FOR 1920*1080 screen at 150% scale**/
@media (max-width:1439px) and (min-width: 1263px) and (-webkit-device-pixel-ratio:1.5) {
   h1 {font-size: 120px;}
   .heading105 {font-size: 74px;}
   .mastheadcaption{max-width: 32vw;}

   .build-parallax-img { max-height: 70vh;}
   .build-parallax-img h2 { font-size: 90px;height: 70px;}
   .build-parallax-img h3 { font-size: 24px;}
   .build-parallax-img .figurecaption{ max-width: 35vw;}

   .back-btn{font-size: 24px; line-height:1.25;}
   .breadcrumb-list span {font-size: 20px; line-height:1.25;}
}