 
:root{
   --autoWidth: 1740px;
   --family: "Poppins", sans-serif;
   --transition: all 0.3s ease;
   --color_red: #DC1111;
   --p_bg: #18191C;
   --s_bg: #FCC211;
   --p_color: #18191C;
   --s_color: #FCC00F;
   --grey: #7C848E;
   --black: #000;
   --white: #fff;

   --baseFS: 16px;
   --fs16: 1em;
   --fs14: 0.875em;
   --fs24: 1.3125em;
   --fs26: 1.625em;
   --fs28: 1.75em; 
   --fs36: 2.25em;
   --fs50: 3.125em;
   --fs60: 3.75em;
   --fs94: 5.875em;
  --bannerHeight: 79px;
}


*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
  font-optical-sizing: auto;
   font-style: normal;
}
a{ text-decoration: none !important; }
ol, ul, li{ 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); }

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

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

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%;   }



body { width: 100%; font-family: var(--family);  color: var(--white); font-size: var(--baseFS); font-weight: 400; overflow-x: hidden; }

.texture{ position: relative;  }


.texture:after { content: ""; background: url(../images/texture2.png) repeat 0px 0px;  position: absolute;  top: 0; left: 0; width: 100%;  height: 100%; mix-blend-mode: soft-light; z-index: 1;  }
.texture_yellow{ background-color: var(--s_bg);  }
.texture_dark{  background-color: var(--p_bg);  }


.texture_child{ position: relative; z-index: 2;}


.wrapper{  width: 100%; margin: auto; overflow-x: hidden;  }

.autoContent {  max-width: var(--autoWidth);  padding: 0px 20px; width: 100%; margin: auto; }
 
.all_btn{ color: var(--black); font-size: var(--fs16); line-height: 1.4em;  padding:20px 30px 20px 30px; cursor: pointer; font-weight: 500;   border-radius: 40px;  background:  var(--p_bg);  transition: var(--transition); color: var(--white); display: block; text-align: center; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;  position: relative;  }

.has_border{  border: 1px solid transparent;  }

.all_btn span{ position: relative; z-index: 1;  }
.all_btn svg{ max-width: 24px; position: relative; z-index: 1; }
.all_btn svg path{ transition: var(--transition);}

.all_btn::after{ content: ''; position: absolute; left: 0px; top: 0px; width:50%; height: 50%; left: 50%; top: 50%; transform: translate(-50% , -50%); z-index: 0; background-color: var(--s_color); transition: var(--transition); opacity: 0; border-radius: 40px;  }

 .all_btn.small{ padding: 10px 20px; font-weight: 600;}

.all_btn:hover::after{ width: 110%; height: 110%; opacity: 1; }
 
.all_btn.outline_orange{  background-color:transparent; border-color: var(--s_color); color:  var(--s_color); }
.all_btn.outline_orange:hover{ color: var(--p_color); }
.all_btn.outline_orange:hover svg path{ stroke: var(--p_color);}


.all_white{ background-color: var(--white); color: var(--p_color); }
.all_btn.all_white:hover{ color: var(--white);  }
.all_btn.all_white:hover svg path{ stroke: var(--white);}
.all_btn.all_white:hover::after{ background-color: var(--p_color); }


.all_btn.btn_orange{  background-color:var(--s_color); border-color: var(--s_color); color:  var(--p_color); }
.all_btn.btn_orange:hover{ color: var(--p_color); }
 .all_btn.btn_orange::after{ background-color: var(--white);}

 
.all_btn.all_dark:hover{ color: var(--p_color);  }
.all_btn.all_dark:hover svg path{ stroke: var(--p_color);}
.all_btn.all_dark:hover::after{ background-color: var(--white); }

.demo_form_btn{ min-width: 150px; justify-content: center;}



 /* width */
::-webkit-scrollbar {
  width: 5px;
  border-radius: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #18191C;
  border-radius: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #FCC00F 0%, #967209 100%);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #967209 0%, #FCC00F 100%);
}


.header{ width: 100%;  position: fixed; left: 0px; top: 0px; z-index: 999; border-bottom: 1px solid rgba(225, 225, 225, 0.3);  }

.header_inner{ display: flex; align-items: center; justify-content: space-between; padding: 16px 0px; }

.header_left{ max-width: 116px; width: 100%; display: block; }
.header_logo{ display: block;}
.header_logo img{ width: 100%; height: auto; display: block; }

.header_right{ display: flex; margin-left: auto; align-items: center; justify-content: flex-end; width: 100%; }
   
.hidden{ overflow: hidden !important; }

 

.hamburger-lines {
   display: none;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  height: 40px;
  justify-content: space-between;
  padding: 10.9px 8px;
  position: relative;
  width: 40px;
  z-index: 999
}

.hamburger-lines .line {
  background: var(--white);
  border-radius: 10px;
  display: block;
  height: 1.4px;
  width: 100%
}

.hamburger-lines .line1 {
  transform-origin: 0 0;
  transition: all .4s ease-in-out
}

.hamburger-lines .line2 {
  transition: all .2s ease-in-out
}

.hamburger-lines .line3 {
  transform-origin: 0 100%;
  transition: all .4s ease-in-out
}

.hamburger-lines.open .line {
  margin-left: 7px
}

.hamburger-lines.open .line1 {
  transform: rotate(45deg)
}

.hamburger-lines.open .line2 {
  transform: scaleY(0)
}

.hamburger-lines.open .line3 {
  transform: rotate(-45deg)
}
 
/* banner */

.banner{ width: 100%; position: relative; padding-top: var(--bannerHeight); overflow: hidden; }
 

.banner_inner{ width: 100%; padding:90px 0px; min-height: calc(100vh -  var(--bannerHeight)); display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }

.bannerText{ max-width: 58%; padding-right: 60px;}
 
.bannerText h1{ font-size: var(--fs94); font-weight: 600; line-height: 1.15em; padding-bottom: 20px; color: var(--p_color);}

.bannerText p{ font-size: var(--fs28); color: var(--p_color); line-height: 1.4em; padding-bottom: 35px; }

.banner_btns_row{ display: flex; align-items: start; gap: 12px;}

.banner_img{ max-width: 42%; position: relative;}
.banner_img figure{ display: block; width: 100%; }
.banner_img img{ display: block; width: 100%; max-width: none; height: auto; }


.banner_tag{ padding: 8px 20px 8px 8px; background-color: var(--white); color: var(--p_color); display: inline-flex; align-items: center; justify-content: flex-start; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.25); border-radius: 40px; gap: 10px; min-width: 166px; position: absolute; left: 56px; top: 19%; animation: upDown 3.2s infinite;  } 

.tag_icon{ display: flex; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(180deg, #FCC00F 0%, #967209 100%); align-items: center; justify-content: center; }

.banner_tag em{ display: block; font-size: var(--fs16); font-weight: 600;  color: #1E1E1E; } 
.banner_tag.tag1{ animation: upDown 3s infinite; }
.banner_tag.tag2{ left: initial; right: -10px; top: 19%; animation: upDown 3.8s infinite;}

.banner_tag.tag3{ left: initial; right: 20px; top: 63%; min-width: 217px; animation: upDown 3.2s infinite;}

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

.aboutUs{ width: 100%; padding: 120px 0px;}

.aboutInner{ display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; }

.aboutImg{ max-width: 35%; position: relative;}
.aboutImg figure{ display: block; width: 100%; }
.aboutImg img{ display: block; width: 100%; max-width: none; height: auto; }

.aboutData{ width: 65%; padding-right: 80px;}

.titleLable{ padding: 5px 16px; border-radius: 40px;  border: 2px solid var(--Base-30, #E6E6E6); display: inline-block; vertical-align: top; margin-bottom: 30px; font-size: var(--fs16); font-weight: 500;  line-height: 1.5em; letter-spacing: -0.32px; }

 
.aboutText h2{ font-size: var(--fs50); font-weight: 600;  letter-spacing: -2px;  text-transform: capitalize; line-height: 1.25em; padding-bottom: 22px; color: var(--white);}

.aboutText p{ font-size: var(--fs24); color: var(--white); line-height: 1.4em; font-weight: 400;  opacity: 0.8; }

.aboutData ul{ display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap;}
.aboutData ul li{ padding-top: 30px; width: 42%;}
.aboutData ul li:first-child{ width: 100%; padding-top: 0px; }


.advangeSec{ width: 100%; padding: 70px 0px;}

.colo_dark{ color: var(--p_color);}

.headlines{ text-align: center; padding-bottom: 70px;}

.headlines h2{ font-size: var(--fs50); font-weight: 600; letter-spacing: -2px;  text-transform: capitalize; line-height: 1.25em; padding-bottom: 10px; }

.headlines p{ font-size: var(--fs24);  line-height: 1.4em; font-weight: 400; }


.advangeList{ width: 100%;}

.advangeList ul{ display: flex; flex-wrap: wrap; margin: 0px -20px; }
.advangeList ul li{ width: 33.33%; padding: 0px 20px;}

.advangeBox{ border-radius: 32px; background: var(--white); width: 100%; min-height: 100%; }

.advangeBox figure{ display: block; height: 390px; overflow: hidden; border-radius: 32px 32px 0px 0px;}
.advangeBox figure img{ display: block; width: 100%; height: 100%; object-fit: cover;}

.advangeText{ padding: 25px 40px; width: 100%; color: var(--p_color);  }

.advangeText h3{ font-size: var(--fs36); font-weight: 600; letter-spacing: -0.72px;  line-height: 1.25em; padding-bottom: 16px; }

.advangeText p{ font-size: var(--fs24); letter-spacing: -0.48px;  line-height: 1.5em; font-weight: 400; }

.solutionSec{ background: url(../images/solutions_bg.png) no-repeat right 0px; background-size: auto 100%; padding: 100px 0px;}


.solutionsList{ width: 100%;}

.solutionsList ul{ display: flex;  flex-wrap: wrap;  margin: 0px -20px; }
.solutionsList ul li{ padding-top: 30px; width: 33.33%; padding: 20px; }
.solutionsList ul li:first-child{ width: 66.67%; }

.solutionBox{ padding: 30px; border-radius: 32px;  border: 2px solid var(--s_color);  background: rgba(19, 19, 21, 0.50); min-height: 100%; transition: var(--transition); }

.solutionBox h3{ font-size: var(--fs28); font-weight: 600;letter-spacing: -0.56px; line-height: 1.25em; padding-bottom: 10px; color: var(--s_color);  transition: var(--transition);  }

.solutionBox p{ font-size: var(--fs16); font-weight: 400; line-height: 1.6em; color: var(--white); padding-bottom: 20px;  transition: var(--transition); opacity: 0.8; }

.solutionBox p:last-child{ padding-bottom: 0px;}

.solutionIcon{ margin-bottom: 22px; width: 68px;
  height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 16.832px 40.398px 74.063px rgba(191, 191, 202, 0.25); padding: 5px; 
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.50) 0%, rgba(174, 174, 174, 0.50) 100%);
  border: 2px solid var(--s_color);  transition: var(--transition);  }
 
 .solutionIcon svg{display: block; }
  .solutionIcon i{  background-color: var(--s_color); border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;  transition: var(--transition);  }

.solutionBox:hover{ background-color: var(--s_color);}
.solutionBox:hover p, .solutionBox:hover h3{ color: var(--p_color);}
.solutionBox:hover .solutionIcon{ background-color: var(--white);}


.whySec{ width: 100%; padding: 100px 0px;}

.whyRow{ width: 100%; display: flex;}

.whyleft{ width: 50%; padding-left: 110px; padding-right: 20px; padding-bottom: 120px; }

.whyright{ width: 50%; padding-left: 20px;  }

.whyBox{ padding: 50px 50px; border-radius: 32px;  background: #18191C; position: relative; }


.whyBox h3{ font-size: var(--fs36); font-weight: 600; letter-spacing: -0.72px; line-height: 1.25em; padding-bottom: 30px; color: var(--white);  }

.whyBox p{ font-size: var(--fs26); font-weight: 400; line-height: 1.5em; color: var(--white);   letter-spacing: -0.52px; padding-left: 220px; padding-bottom: 20px; opacity: 0.8; }

.whySmallImg{ width: 353px;  height: 371px; border-radius: 32px; overflow: hidden; position: absolute; left: -110px; bottom: -100px;}

.whySmallImg img{ width: 100%; height: 100%; max-width: none; object-fit: cover;}

.whyright h3{ font-weight: 600;}

.whyVideoFrame{ width: 100%; height: 490px; position: relative; }

.whyVideoFrame video{   width: 100%; height: 100%;  object-fit: cover ; border-radius: 30px; }

.play-icon {  position: absolute;   top: 50%;  left: 50%;   transform: translate(-50%, -50%);   cursor: pointer;  }

.play-icon svg{ max-width: 80px;}

.footer{ width: 100%;  padding: 160px 0px 100px 0px; }

.footer_inner{ text-align: center; max-width: 850px; margin: auto;}

.footerLogo a{ display: block; width: 100%; max-width: 146px; margin: auto; margin-bottom: 15px;}
.footerLogo a img{ display: block; max-width: none;}


.footer_inner p{ font-size: var(--fs24); font-weight: 400; line-height: 1.5em; color: var(--grey);   letter-spacing: -0.48px;  padding-bottom: 20px; }

.footer_inner span{ font-size: var(--fs16); font-weight: 400; line-height: 1.5em; color: var(--white);   letter-spacing: -0.48px;  }
.footer_inner span a{ color: var(--white); transition: var(--transition);}
.footer_inner span a:hover{ color: var(--s_color); text-decoration: underline;}


.overflow_hidden{ overflow: hidden !important; }


.custom_popup{ width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 9998; display: flex; align-items: center; justify-content: center; overflow-y: auto;}

.popup_inner{ width: 100%; padding: 20px; width: 100%; min-height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}

.popup_overlay{  width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: 0; background: rgba(30, 27, 39, 0.60); -webkit-backdrop-filter: blur(20px);  backdrop-filter: blur(20px); }


.popup_box{ border-radius: 20px;  border: 1px solid #26242C;  background: #0E0C15; overflow: hidden; width: 100%; max-width: 640px; position: relative; z-index: 2; margin: auto;  } 

.popupHeader{ display: flex; justify-content: center; align-items: center; position: relative; padding: 20px; position: relative; }

.popupHeader h3{ font-size: 22px; line-height: 1.2em; font-weight: 700; color: #fff; }

.popup_close{ width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--s_color); transition: all 0.3s ease; position: absolute; right: 10px; top: 10px; }

.popup_close:hover svg path{ transition: all 0.3s ease; }

.popup_content{  width: 100%; padding: 20px 30px; }
.privacy_popup .popup_content{ max-height: calc(100vh - 170px);  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; border-radius: 20px;  }

.privacy_popup .popup_box{ padding-bottom: 20px;}

.popup_close:hover svg path{ stroke: #fff; }

.demo_form ul li{ padding-bottom: 20px; }
.demo_form ul li:last-child{ padding-bottom: 0px; }

.form_field{ width: 100%; font-size: 14px; font-weight: 500; color: #fff; padding: 12px 16px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.50); transition: all 0.3s ease; } 

.form_field:focus{ border-color: #FFC401; }

.popup_footer{ display: flex; justify-content: center; padding: 20px 20px 30px 20px; }

.btn_yellow{ background: #FFC401; color: #0E0C15; }
.popup_footer .btn_yellow{ padding: 15px 60px; }

.countrypicker{ width: 100% !important; }


.countrypicker .btn-default{ background: transparent !important; font-size: 14px !important; font-weight: 500 !important; color: #fff !important; padding: 12px 16px !important; border-radius: 5px !important; border: 1px solid rgba(255, 255, 255, 0.50) !important; transition: all 0.3s ease; }

.countrypicker.bootstrap-select .dropdown-toggle:focus{ outline: none !important; border-color: #FFC401; }

.custom_popup{ display: none; }

.error_text{ font-size:14px; line-height:1.5em; display:block; color:#d32e2e;  }
.error_stroke{ border-color:#d32e2e !important; }

.disabled{ opacity: 0.2; pointer-events: none;}

.sucessPop_content{ text-align: center; padding: 50px 15px;}

.sucessPop_content i{ display: block; width: 100%; padding-bottom: 20px;  }

.sucessPop_content i img{ display: block; width: 100%; max-width: 200px; margin: auto;}

.sucessPop_content h3{ padding-bottom: 30px; font-weight: 600; font-size: 18px; line-height: 1.5em; max-width: 450px; margin: auto;  }

.sucessPop_content a{ min-width: 160px; text-align: center; justify-content: center; }


.g-recaptcha{ display: flex; justify-content: center; flex-wrap: wrap; }






