:root{
   --autoWidth: 86em; 
   /* 1440px */
 
    
  --family_inter: "Inter", sans-serif;
  --family_kanit: "Kanit", sans-serif;
  --transition: all 0.5s ease;

  --bg_color: #020202;
  --text_grey: #8C8C8C;
  --dark_color: var(--bg_color);
  --black: #000;
  --white: #fff;
  --primary: var(--white);
 
 
  --baseFS: 16px;
  --fs10: 0.6875em;
  --fs12: 0.75em;
  --fs14: 0.875em;
  --fs16: 1em;
  --fs18: 1.125em;
  --fs20: 1.25em;
  --fs22: 1.375em;
  --fs24: 1.3125em;
  --fs26: 1.625em;
  --fs30: 1.875em; 
  --fs32: 2em; 
  --fs36: 2.25em;
  --fs40: 2.5em;
  --fs42: 2.625em;
  --fs48: 3em;
  --fs50: 3.125em;
  --fs60: 3.75em;
  --fs70: 4.375em;
  --fs80: 5em;
  --fs100: 6.25em;

  --secPad:5em;
  
}


*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-optical-sizing: auto;
   font-style: normal;
}
a{ text-decoration: none; }
ol, ul{ margin: 0; list-style: none;  margin: 0;}

p, h1, h2, h3, h4, h5, h6, strong, b{ margin: 0; font-weight: normal; }

em{ font-style: normal; }

input, textarea, select, button{ border:0px none; border-radius:0px; background:none; outline:none; -webkit-appearance:none; appearance:none; outline:none; font-family: var(--family); font-weight: 400; }

img{ display: block; height: auto; outline: none; }

input[type='submit']{  border-radius:0px; -webkit-appearance:none; appearance:none; outline:none; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove arrows for Firefox */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

body.hidden{ overflow: hidden !important;}

textarea{ resize:none; overflow:auto; }

:focus{ outline:none;}

.clearfix:after{content:""; display:block; clear:both; height:0px; visibility:hidden;}

.clearfix{ display:block; zoom:1; }

i, em{ font-style: normal;}

.overflow_hidden{ overflow: hidden !important; }

html{ min-height: 100%;   }

.wrapper{ width: 100%; max-width: 100%;  }
/* overflow-x: hidden;  */

body { width: 100%; font-family: var(--family_inter); color: var(--primary); font-size: var(--baseFS); overflow-x: hidden; max-width: 100%; }


.autoContent{ max-width: var(--autoWidth); padding: 0px 1.25em; margin: auto; width: 100%; }


.all_btn{ color: var(--primary); line-height: 1.3em; font-weight: 600; font-size: var(--fs24); border-radius: 1.598px; background:var(--white); padding: 0.75em 1em 0.75em 1em; cursor: pointer; box-shadow: 0px 4px 24px 0px rgba(255, 255, 255, 0.25); }

.all_btn:hover{ background: linear-gradient(180deg, #F3621D 0.03%, #FF9759 100.04%); }


.all_headline{ text-align: center; padding-bottom: var(--secPad); }

.all_headline h2{ font-size: var(--fs32); line-height: 130%; font-family: var(--family_merri); }

.all_headline span{ font-size: var(--fs16); line-height: 120%; color: var(--gray); font-family: var(--family_gellix_medium); border-radius: 2em; border: 1px solid var(--dark_gray); background: rgba(255, 255, 255, 0.08); padding: 0.5em 1em; margin-bottom: 1em; display: inline-block; }

.mb-0{ margin-bottom: 0px !important;}

.all_headline p{ font-size: var(--fs20); line-height: 1.3em; padding-top: 1em;  max-width: 58.75em; margin: auto; }

.all_headline.big h2{ font-size: var(--fs40); }


.section_box{ height: 100vh; background: var(--bg_color); position: relative; overflow: hidden; width: 100%; transform: translate(0); }

 

.landing_section .secInner::before{ content: ""; width: 34.625em; height: 1554px; border-radius: 1554px;   position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: url("../images/sec1_blur.svg") no-repeat center center; background-size: 100% 100%; width: 554px;
height: 1554px; display: none;
  }

.landing_inner{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; position: relative; z-index: 3; padding: 30px 20px; }

.landing_inner .autoContent{ padding: 0px;}

.landing_text{ text-align: center; transition: all 1.8s ease; opacity: 1; }

.landing_text span{ font-size: var(--fs24); color: var(--white); line-height: 1em; font-family: var(--family_inter);font-weight: 300;  text-transform: uppercase;  }
 

.landing_text.translate{ transform: translateY(-100vh); opacity: 0;}

.landing_lines{ width: 50%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/bars_bg.png) no-repeat left top; background-size: cover; }

.landing_lines.landing_right_bg{ left: inherit; right: 0; }

.next_btn{ position: fixed; left: 50%; bottom: 1em; z-index: 999; cursor: pointer; transition: all 0.3s ease; background: url("../images/point_down_icon.svg") no-repeat center center; width: 44px; height: 44px; margin-left: -22px; animation: upDown 1.5s ease-in-out infinite;
}


.section_box .next_btn{ display: none !important;}

@keyframes upDown {
  0%   { transform: translateY(-3px); }
  50%  { transform: translateY(3px); }
  100% { transform: translateY(-3px); }
}

.sec1_logoText{ text-align: center; }

 
.mainLogo {
  --mainTransition: all 1.5s ease;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  transition: var(--mainTransition);
  opacity: 0;
  pointer-events: none;
  z-index: 33;
  cursor: pointer; padding-left: 2.411em;
  
}

.mainLogo.show {
  opacity: 1;
  pointer-events: auto;
   transform: translate(-50%, -50%) scale(1);
}

.mainLogo.pinned {
   opacity: 1;
  top: 1.875em;
  transform: translateX(-50%) scale(1);
  padding-left: 0.529em;
  pointer-events: auto;
}

.sec1_logo{ padding-bottom: var(--fs20); width: 100%; max-width: 7.68em; margin: auto; transition: var(--mainTransition); }
.sec1_logo a{ display: block;}
.sec1_logo img, .sec1_logo svg{ display: block; max-width: none; width: 100%; height: auto;}

.sec1_logoText h4{  color: var(--primary); font-family: var(--family_kanit); font-size: var(--fs32); font-style: normal; font-weight: 400; line-height: 1em; letter-spacing: 1.1875em;  transition: var(--mainTransition);  white-space: nowrap; }

.logoText_small .sec1_logo, .mainLogo.pinned .sec1_logo{ max-width: 2.875em; padding-bottom: var(--fs12);}
.logoText_small h4, .mainLogo.pinned h4{ letter-spacing: 0.70em; font-size: var(--fs12); font-weight: 400;}


.secVideo{ position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;  background-color: var(--bg_color);}
.secVideo video{ display: block;  position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; object-fit: cover; mix-blend-mode: luminosity; }

.section_one .secVideo video{ opacity: 0.1; transform: rotate(180deg);}

.section_two .secVideo video{ opacity:0.2;  transform: rotate(-90deg) translateX(0%); height: 218%; top: -10%; left: -2.1%; }

.section_three .secVideo video{ opacity:0.05;  transform:  translateX(0%); height: 218%; top: -10%; left: -2.1%; }


.section_four .secVideo video{  height: calc(100vh - 9.5em); top: 4em; width: calc(100vw - 28.125em); left: 14.0625em;  }

.section_footer .secVideo video{ opacity: 0.2; mix-blend-mode: color-dodge;  width: 110%;  height: 110%;  left: -5%;  top: -5%; }  


.sec2_headings{ max-width: 68.75em; text-align: center; padding-bottom: 5em;  }
.sec2_headings h4{ font-size: var(--fs24); color: var(--text_grey); line-height: 1em; font-family: var(--family_kanit); font-weight: 500; padding-bottom: 20px; }

.sec2_headings h2{ font-size: var(--fs100); color: var(--white); line-height: 0.8em; font-family: var(--family_inter); font-weight:300; }
.sec2_headings h2 span{ display: block;   }
/* .sec2_headings h2 span:nth-child(2){ transition-delay: 0.1s;}
.sec2_headings h2 span:nth-child(3){ transition-delay: 0.2s;}
.sec2_headings h2 span:nth-child(4){ transition-delay: 0.3s;} */


/* .section_box.active .sec2_headings h2 span{ opacity: 1; transform: translateY(0px);} */


.sec_large_heading{ padding: 0px 0px 20px 0px; margin: auto; max-width: 55em; transition: var(--transition);}

.sec_large_heading h2{  color: var(--white); text-align: center; font-family: var(--family_inter); font-size: var(--fs100); font-weight: 300; line-height: 0.8em; text-transform: uppercase; transition: var(--transition); }


.sec_large_heading.small{ margin-bottom: auto; margin-top: initial; transition: var(--mainTransition); }

.sec_large_heading.small h2{ font-size: var(--fs22); transition: var(--mainTransition); }

.insights_main{ width: 100%; margin: auto; }

.insights_main ul{ display: flex; justify-content: space-between; flex-wrap: wrap; }


.insights_main ul li{ max-width: 23em; }

.insight_icon{  margin-bottom: 2.375em; width: 100%; min-height: 4.6875em; }

.insight_icon svg{ display: block; max-width: 4.0625em; max-height: 4.6875em; animation: iconsAnimation 1.5s ease-in-out infinite;  }

.insights_main ul li:nth-child(odd) .insight_icon svg{ animation: iconsAnimation 2.5s ease-in-out infinite; }

.heading_text{ font-size: var(--fs50); color: var(--white); line-height: 0.8em; font-family: var(--family_inter); font-weight:600; padding-bottom: 0.32em; text-transform: uppercase; }

.insights_box p{ font-size: var(--fs26); color: var(--text_grey); line-height:1.2em; font-weight:400; padding-bottom: 0.32em; max-width: 80%; }
 

@keyframes iconsAnimation {
  0%   { transform: translateY(-5px); }
  50%  { transform: translateY(5px); }
  100% { transform: translateY(-5px); }
}


.engine_box h2{ padding: 0px;}

 
.engine_main{ width: 100%; margin-top: auto; padding-bottom: 4em; }

.engine_main ul{ display: flex; justify-content: space-between; flex-wrap: wrap; }

.bg_black, .bg_black .secVideo{ background-color: var(--black) !important;}

.engine_main ul li{ max-width: 22em; position: relative; }

.engine_main ul li:not(:first-child):after{ content: "";  position: absolute; left: -122px; top: 0px; width: 50px; height: 100%; background: url("../images/arrowPointer.svg") no-repeat left center; background-size: 100% auto; }

.engine_box{ display: flex; align-items: center; gap: 10px;}

.engine_box span{ font-size: var(--fs100); color: var(--white); line-height: 0.8em; font-family: var(--family_inter); font-weight:400;  text-transform: uppercase; background: linear-gradient(0deg, var(--white) -36.66%, var(--bg_color) 121.88%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }


.footer_content_row{ margin: auto; max-width: 44em; width: 100%; }

.footer_content_headlines{ text-align: center; padding-bottom: 2em;}

.footer_content_headlines p{color: var(--text_grey);  text-align: center; font-size: var(--fs26); font-weight: 400; line-height: 1.2em; }

.footer_form{ width: 100%; display: flex; gap: 10px;}

.formField input{ border: 2.8px solid;  border-image-source: linear-gradient(360deg, #FFFFFF -17.3%, rgba(6, 6, 6, 0) 243.22%); border-image-slice: 1; width: 100%; padding: 0.454em 0.681em;  color: var(--white); font-family: var(--family_inter); font-size: var(--fs22); font-weight: 400; line-height: 1.45em; transition: var(--transition); display: block; height: 100%; border-radius: 0.4px; background: var(--dark_color); }

.formField input:focus{ box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.75);}

.formField{ width: 100%; }

.formSubmit{  border: 2.8px solid;  border-image-source: linear-gradient(360deg, #FFFFFF -17.3%, rgba(6, 6, 6, 0) 243.22%); border-image-slice: 1; width: 12.5em; padding: 3px; flex-shrink: 0;  }

.formSubmit input{ display: block; text-align: center; border-radius: 1.598px;
background: var(--white);
box-shadow: 0px 4px 24px 0px rgba(255, 255, 255, 0.25); color: var(--dark_color);
text-align: center;
font-family: var(--family_inter);
font-size: var(--fs24);
font-style: normal;
font-weight: 600;
 height: 100%; line-height: 0.48em;
text-transform: uppercase; display: block; width: 100%; cursor: pointer; transition: var(--transition); }

.formSubmit input:hover{ opacity: 0.6;  }

.error_stroke, .error_stroke .formField input{ border-color: red !important; border-image-source: none;}

.error_text{ font-size: var(--fs14); display: block; color: red; font-weight: 400; padding: 4px; position: absolute;}




 ::-webkit-scrollbar {
  width: 5px; border-radius: 10px;
}

 ::-webkit-scrollbar-thumb {
  background-color: var(--white);;     
  border-radius: 10px;  
}

 ::-webkit-scrollbar-track {
  background-color: var(--text_grey); 
}


/* .section_box {
    height: 100%;
    width: 100%;
    top: 0;
    position: fixed;
    visibility: hidden;
    will-change: transform;
} */

   body.lock-scroll, body {
        overflow: hidden;
        touch-action: none;
        }

.section_box {
  height: 100vh;
  width: 100%;
  scroll-snap-align: start;
  position: relative;
}

.secInner, .landing_inner{ min-height: 100vh;  }

 .landing_inner{  position: relative; padding-top: 9.3em;}

 .landing_section .landing_inner{ padding-top: 0px;}

 .social_links ul{ display: flex; align-items: center; justify-content: space-between; max-width: 100%;  max-width: 320px; margin: auto; }

  .social_links ul li a{ display: block; transition: var(--transition);}

  .social_links ul li a:hover{ opacity: 0.6;}