:root {
   --brand-element-color: #20C63E;
   --green-border: rgba(45, 228, 1, 0.20);
   --brand-text-color: #f2a029;
   --local-text-color: #88898e;
   --pane-bg-color: rgba(217, 217, 217, 0.1);
   --white-border: rgba(255, 255, 255, 0.30);
   --vulcan-blue: #11141E;
   --bg-gray-005:rgba(255, 255, 255, 0.05);
   --bg-gray-010:rgba(255, 255, 255, 0.10);
   --bg-gray-020:rgba(255, 255, 255, 0.20);
   --card-bg-box: #1b2028;
   --white: #fff;
   --black: #000;
   --dark-blue: #0F141D;
   --placeholder-color: #848484;
   --inter-font: 'Inter', sans-serif;
   --container-width: 1280px;
   --wide-container-width: 1570px;
   --brand-border-color: rgba(32, 198, 62, 0.50);
}

html{
   font-family: var(--inter-font); 
}


body {
   background-color: #12141E;
   font-family: var(--inter-font); 
   color: #fff;
}

.page-offset-top {
   padding-top: 140px;
   @media screen and (min-width: 1200px) {
      padding-top: 50px;
   }
}

.content {
   a {
      color: var(--brand-element-color);
      transition: all 0.3s ease;
      &:hover {
         color: darken(var(--brand-element-color), 10%);
      }
   }
}

.palanquin-regular {
   font-family: "Palanquin", sans-serif;
   font-weight: 400;
   font-style: normal;
 }
 .palanquin-bold {
   font-family: "Palanquin", sans-serif;
   font-weight: 700;
   font-style: normal;
 }

.text-green{
   color: var(--brand-element-color);
}

.bg-gray-010{
   background-color: var(--bg-gray-010);
}

.font-open-sans{
   font-family: var(--inter-font);
}
.main-site-container{
   max-width: var(--container-width); 
   margin: 0 auto;
   padding: 0 20px;
}
.site-header{
   max-width: max(var(--container-width), 1440px); 
   margin: 0 auto;
   padding: 20px 0;
   @media screen and (min-width: 1700px) {
      max-width: max(var(--container-width), 1600px); 
   }
   .client-area-link {
       display: flex !important;
       overflow: hidden !important;
       text-overflow: ellipsis;
       line-height: 1.4;
       white-space: normal !important;
       min-width: max-content;
   }
}
.gtranslate_wrapper {
   position: relative;
}
.lang-switcher-header {
   z-index: 1000;
   @media screen and (min-width: 1024px) {
      padding-left: 10px;
   }
   .gt_switcher {
      a {
         font-size: 16px;
         font-family: Inter;
         font-weight: 400;
      }
   }
   .gt_selected {
      background: transparent!important;
      a {
         color: var(--white)!important;
         font-size: 16px!important;
         font-family: Inter!important;
         border:none!important;
         padding: 5px 10px!important;
         white-space: nowrap!important;
         overflow: hidden!important;
         text-overflow: ellipsis!important;
         max-width: 150px!important;
         display: flex!important;
         align-items: center!important;
         box-sizing: border-box!important;
         @media screen and (max-width: 1024px) {   
            padding-left: 0!important;
         }
         &:hover {
            background: transparent!important;
         }
         img {
            margin-right: 5px!important;
         }
         &:after {
            height: 24px;
            display: inline-block;
            position: absolute;
            right: 10px;
            width: 15px;
            background-position: 50%;
            background-size: 15px!important;
            background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M1.5%201.93333L6.75%207.88333L12%201.93333%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E)!important;
            background-repeat: no-repeat;
            content: "" !important;
         }
      }
   }
   .gt_option {
      position: absolute!important;
      background: #212529!important;
      border-radius: 10px!important;
      border: none!important;
      max-height: 382px!important;
      min-height: 382px!important;
      transition: height 0.3s ease!important;
      /* height: 380px!important; */
      z-index: 1000!important;
      top: 40px!important;
      @media screen and (max-width: 1024px) {   
         top: 45px!important;
      }

      /* Custom scrollbar styling */
      scrollbar-width: thin!important;
      scrollbar-color: var(--bg-gray-020) var(--bg-gray-005)!important;
      
      /* Webkit browsers scrollbar styling */
      &::-webkit-scrollbar {
         width: 12px!important;
      }
      
      &::-webkit-scrollbar-track {
         background: var(--bg-gray-005)!important;
      }
      
      &::-webkit-scrollbar-thumb {
         background: var(--bg-gray-020)!important;
         border-radius: 6px!important;
      }
      
      &::-webkit-scrollbar-thumb:hover {
         background: darkred!important;
      }
      
      a.nturl {
         color: var(--white)!important;
         font-size: 16px!important;
         font-family: Inter!important;
         border:none!important;
         transition: all 0.3s ease;
         padding: 8px 10px!important;
         &:hover {
            color: var(--brand-element-color)!important;
            background: transparent!important;
         }
         img {
            margin-right: 5px;
         }
      }
      
      /* Special styling for Chinese (Simplified) option */
      a.nturl[data-gt-lang="zh-CN"] {
         line-height: 1.4!important;
         padding: 8px 10px!important;
         display: flex!important;
         align-items: flex-start!important;
      }
   }
}


.main-site-holder{
   max-width: var(--wide-container-width)!important; 
   margin: 0 auto;
}

.main-page-holder{
   max-width: var(--wide-container-width); 
   padding: 0 20px;
   margin: 0 auto; 
   padding-top: 140px;
   @media screen and (min-width: 1200px) {
      padding-top: 50px;
   }
   .job-page-holder{
      max-width: 1015px;
      margin: 0 auto;
      .job-header {
         h1 {
            font-size: 36px;
            font-style: normal;
            font-weight: 600;
            margin-bottom: 20px;
            @media screen and (min-width: 768px) {
               font-size: 50px;
            }
            @media screen and (max-width:768px) {
               margin-bottom: -120px;
            }
         }
         &.careers-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            h1 {
               color: var(--brand-element-color);
               text-align: center;
               font-size: 20px;
               font-weight: 300;
               margin-bottom: 0;
            }
            p {
               color: var(--white);
               text-align: center;
               font-size: 45px;
               font-weight: 600;
            }
         }
      }
   }
   .content-page-holder {
      h2 {
         font-family: "Open Sans";
         font-size: 23px;
         font-style: normal;
         font-weight: 700;
         margin-bottom: 24px;
      }
      h3, h4, h5, h6 {
         font-family: "Open Sans";
         font-size: 18px;
         font-style: normal;
         font-weight: 700;
         margin-bottom: 24px;
      }
      p {
         color: var(--white);
         font-family: "Open Sans";
         font-size: 18px;
         font-style: normal;
         font-weight: 400;
         margin-bottom: 24px;
      }
      .wp-block-list {
         padding-left: 1rem;
         margin-left: 0;
      }

      .list-title {
         font-size: 18px;
         font-style: normal;
         font-weight: 700;
         margin-bottom: 24px;
      }
   }
}
.job-page-holder{
   max-width: 1063px!important;
   margin: 0 auto;
}
.spacer {
   height: 87px;
   
   @media screen and (max-width: 768px) {
      height: 37px;
   }
}

.bg-center-cover {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

.bg-center-bottom {
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center bottom;
}

.background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.background img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.margin-bottom-minus {
   margin-bottom: 0rem;
}

.padding-add {
   padding-top: 120px !important;
}

@media (min-width: 1441px) {
   .margin-bottom-minus {
      margin-bottom: -7rem;
   }
}

.w-max-content {
   width: max-content !important;
}

.h-max-content {
   height: max-content !important;
}

.footer-social-icon {
   width: 30px;
   height: 30px;
}

.font-300 {
   font-weight: 300;
}

.font-400 {
   font-weight: 400;
}

.font-500 {
   font-weight: 500;
}

.font-600 {
   font-weight: 600;
}

.font-700 {
   font-weight: 700;
}

.font-800 {
   font-weight: 800;
}

.font-900 {
   font-weight: 900;
}

.font-12 {
   font-size: 12px;
}

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

.font-15 {
   font-size: 15px;
}

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

.font-18 {
   font-size: 18px;
}

.font-20 {
   font-size: 20px;
}

.font-22 {
   font-size: 22px;
}

.font-24 {
   font-size: 24px;
}

.font-25 {
   font-size: 14px;

   @media (min-width: 768px) {
      font-size: 25px;
   }
}

.font-28 {
   font-size: 28px;
}

.font-30 {
   font-size: 30px;
}

.font-32 {
   font-size: 32px;
}

.font-34 {
   font-size: 34px;
}

.font-36 {
   font-size: 36px;
}

.font-38 {
   font-size: 38px;
}

.font-40 {
   font-size: 40px;
}

.font-50 {
   font-size: 50px;
}

.font-60 {
   font-size: 60px;
}

.font-70 {
   font-size: 70px;
}

.font-80 {
   font-size: 80px;
}

.font-90 {
   font-size: 90px;
}

.font-100 {
   font-size: 100px;
}

@media (max-width: 1399px) {
   .font-24 {
      font-size: 22px;
   }
}

@media (max-width: 991px) {
   .font-24 {
      font-size: 20px;
   }
}

@media (max-width: 767px) {
   .font-16 {
      font-size: 12px;
   }

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

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

   .font-24 {
      font-size: 18px;
   }

   .font-26 {
      font-size: 18px;
   }
}

.d-ruby {
   display: ruby !important;
}

@media (min-width: 992px) {
   .d-lg-ruby {
      display: ruby !important;
   }
}

.bg-000 {
   background-color: #000 !important;
}

.bg-fff {
   background-color: #fff !important;
}

.bg-000-06 {
   background-color: rgba(0, 0, 0, 0.6);
}

.color-fff {
   color: #fff;
}

.color-000 {
   color: #000 !important;
}

.color-68a2bc {
   color: #68a2bc;
}

.color-f2a029 {
   color: var(--brand-text-color);
}

.color-88898e {
   color: var(--local-text-color);
}

.color-848484 {
   color: #848484;
}

.text-uppercase {
   text-transform: uppercase;
}

.text-decoration-none a {
   text-decoration: none;
}

.text-justify {
   text-align: justify;
}

.justify-items-center {
   justify-items: center;
}

.margin-p p,
p.margin-p,
.margin_p p {
   margin-bottom: 0;
}

.bg-certificate {
   background-color: #353535;
   border: 1px solid #f2a029;
   border-radius: 15px;
}

.text-request {
   text-transform: uppercase;
   font-size: 24px;
   font-weight: 700;
}

.text-title-banner-home {
   font-size: 30px;
   font-weight: 900;
   line-height: 40px;
}

.text-discription {
   font-size: 14px;
   font-weight: 400;
   line-height: 1.6;
}

.main-button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 220px;
   height: 41px;
   border-radius: 5px;
   font-size: 18px;
   font-weight: 500;
   text-decoration: none;
   padding: 0;
   transition: filter 0.3s ease;
   border:none;
}

.main-button:hover {
   filter: brightness(0.9);
}

.drop-shadow-effect:hover {
   filter: brightness(0.9) drop-shadow(0px 4px 4px rgba(46, 228, 1, 0.2));
}

.main-button--green,
.main-button--green-alt {
   background-color: var(--brand-element-color);
}

.main-button--green {
   color: black;
}

.main-button--green-alt {
   color: var(--black);
}

.main-button--white {
   background-color: #fff;
   color: black;
}

.main-button--fullwidth {
   width: 100%;
}

.main-button--transparent {
   background-color: transparent;
   border: 1px solid white;
   color: white;
}

.main-button--transparent:hover,
.main-button--transparent:focus,
.main-button--transparent:active {
   border-color: white;
}

.small-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   font-size: 14px;
   text-decoration: none;
   border-radius: 5px;
   transition: all 0.3s ease;
   min-width: 68px;
   min-height: 30px;
   height: 30px;

   &.small-btn--filled {
       background: var(--brand-element-color);
       border: 1px solid rgba(45, 193, 175, 0.00);
       color: #11141E;

       &:hover {
           background: #28a745;
           color: #11141E;
       }
   }

   &.small-btn--outlined {
       background: #12141E;
       border: 1px solid var(--brand-element-color);
       color: var(--brand-element-color);

       &:hover {
           background: rgba(124, 255, 131, 0.1);
           color: #FFF;
       }
   }
}
.standard-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   font-size: 14px;
   text-decoration: none;
   border-radius: 5px;
   transition: all 0.3s ease;
   min-width: 68px;
   height: 44px;
   text-align: center;

   &.standard-btn--filled {
       background: var(--brand-element-color);
       border: 1px solid rgba(45, 193, 175, 0.00);
       color: #11141E;

       &:hover {
           filter: brightness(0.9);
           color:var(--white);
       }
   }

   &.standard-btn--outlined {
       background: #12141E;
       border: 1px solid var(--brand-element-color);
       color: #FFF;

       &:hover {
           background: rgba(133, 255, 88, 0.1);
           color: #FFF;
       }
   }
}

.auto-width {
   width: max-content!important;
   padding-left: 20px;
   padding-right: 20px;
}

.box-singup {
   background: linear-gradient(90deg, rgba(98, 230, 154, 1) 0%, rgba(45, 193, 175, 1) 100%);
   text-align: center;
   padding: 10px;
   border-radius: 10px;
   border: 0;
   color: #000;
   font-size: 16px;
   font-weight: 700;
   width: 154px;

   &.small {
      font-size: 14px;
      font-weight: 700;
      width: max-content;
      padding: 10px 30px;
   }
}

.box-request {
   background-color: #fff;
   text-align: center;
   padding: 10px;
   border-radius: 10px;
   color: #000;
   font-size: 16px;
   font-weight: 700;
   width: 154px;
}

@media (min-width: 576px) {
   .text-title-banner-home {
      font-size: 42px;
      line-height: 55px;
   }

   .text-request {
      font-size: 36px;
   }
}

@media (min-width: 992px) {

   .text-title-banner-home {
      font-size: 54px;
   }

   .box-singup {
      width: 240px;
      font-size: 26px;
   }

   .box-request {
      width: 240px;
      font-size: 26px;
   }

   .text-discription {
      font-size: 20px;
   }

   .text-request {
      font-size: 48px;
   }
}

@media (min-width: 1400px) {
   .text-title-banner-home {
      font-size: 66px;
      line-height: 75px;
   }
}

.padding-x-main {
   padding: 40px 145px;
}

.padding-x-main--checkout{
   @media (min-width: 1200px) and (max-width: 1600px){
      padding: 40px!important;
   }
}

.form-checkout {
   padding-top: 25px!important;
}

@media (max-width: 1399px) {
   .padding-x-main {
      padding: 30px 70px;
   }
}

@media (max-width: 991px) {
   .padding-x-main {
      /* padding-left: 30px;
      padding-right: 30px; */
      padding: 30px 30px;
   }

   .text-align-custom-banner {
      text-align: center;
   }
}

@media (max-width: 575px) {
   .padding-x-main {
      /* padding-left: 30px;
      padding-right: 30px; */
      padding: 20px 30px;
   }
}

.block {
   max-width: 1570px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px 15px;

   @media (min-width: 576px) {
      padding: 30px;
   }

   @media (min-width: 992px) {
      padding-left: 70px; 
      padding-right: 70px; 
   }
   
   @media (min-width: 1400px) {
      padding: 40px 145px; 
   }

   .description {
      max-width: 600px;
      margin: 0 auto;
   }
}

.block-spacing{
   padding-top: 100px;
   padding-bottom: 100px;
}

.block__header {
   font-size: 37px;
   font-weight: 700;
   line-height: 1.2;

   @media (min-width: 992px) {
      font-size: 45px;
   }
   @media screen and (max-width: 768px) {
      max-width: 300px;
      margin: 0 auto;
      text-align: center;
   }

   .description {
      font-size: 15px;
      line-height: 1.6;
      @media (min-width: 992px) {
         line-height: 1.66;
      }
   }
}

/* ----------------------------header-------------------------- */
.site-header {
   z-index: 10;
}

.logo-header {
   display: block;
   margin-left: -10px;


   .logo-header-img {
      width: 120px; 
      height: auto;
      @media (min-width: 768px) {
         width: 161px; 
         height: 51px;
      }
   }
}

.logo-header img {
   height: 100%;
   max-width: none;
}

.padding-header {
   padding: 20px;
}


.main-navigation #menu-pc li a {
   color: #fff;   
   font-size: 16px;
   @media (min-width: 1200px) {
      padding-top: 10px;
      padding-bottom: 10px;
   }
}

#menu-pc {
   justify-content: center;
}

.test-border {
   position: relative;
   display: inline-block;
   padding: 10px 20px;
   color: #fff;
   background: transparent;
   z-index: 0;
   /* width: 125px; */
   text-decoration: none;
   text-align: center;
}

.width-content {
   @media (min-width: 1200px) {
      width: max-content!important;
   }
}

.test-border::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 8px;
   background: linear-gradient(90deg, rgba(98, 230, 154, 1) 0%, rgba(45, 193, 175, 1) 100%);
   z-index: -1;
   padding: 2px;
   -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
   -webkit-mask-composite: destination-out;
   mask-composite: exclude;
}



@media (min-width: 1200px) {
   .test-border {
      width: 125px;
   }

}

/* ----------------------------header mobile-------------------------- */

#menu-header-mobile {
      ul.sub-menu {
         margin-left: 0px;
         padding-left: 16px;
         .menu-item::marker {
            color: var(--brand-element-color);
         }
      }
   
}

/* Styling for mobile menu markers */
#menu-header-mobile .sub-menu li.menu-item {
   list-style-type: none;
   position: relative;
   padding-left: 15px;
}

#menu-header-mobile .sub-menu li.menu-item:before {
   content: '\f054'; /* FontAwesome right arrow icon */
   font-family: 'Font Awesome 5 Free', 'FontAwesome';
   font-weight: 900;
   position: absolute;
   left: 0;
   top: 65%;
   transform: translateY(-50%);
   color: var(--brand-element-color);
   font-size: 12px;
}

/* Alternative version using a simple arrow character if FontAwesome isn't loaded */
#menu-header-mobile .sub-menu li.menu-item:not(:has(::before)) {
   list-style-type: none;
   position: relative;
   padding-left: 15px;
}

#menu-header-mobile .sub-menu li.menu-item:not(:has(::before)):before {
   content: '→';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   color: var(--brand-element-color);
}

#masthead-mobile {
   z-index: 100;
   position: fixed;
   width: 100%;
   height: 90px;
   background-color: rgba(17, 20, 30, 0.9);
   /* backdrop-filter: blur(15px); */

   @media (min-width: 767px) {
      height: 110px;
   }
}

.header-mobile-menu {
   display: flex;
   width: 100%;
}

#nav_mobile.open {
   width: 100%;
}

.menu-mobile {
   height: 100%;
   width: 0;
   position: fixed;
   /* z-index: 30000; */
   top: 0;
   right: 0;
   background-color: rgba(17, 20, 30, 0.8);
   backdrop-filter: blur(15px);
   overflow-x: hidden;
   transition: 0.5s;
   /* padding-top: 45px; */
}

.menu-mobile a {
   text-decoration: none;
   color: #f1f1f1;
   display: block;
   transition: 0.3s;
   padding-top: 10px;
}

.menu-mobile ul {
   display: block;
   /* width: max-content; */
}

.header-mobile-menu .menu {
   padding: 0;
   margin: 0;
   list-style: none;
}

.hamburger-icon {
   z-index: 1;
}

.hamburger-icon .line {
   width: 30px;
   height: 5px;
   background-color: #fff;
   display: block;
   margin: 5px;
   transition: all 0.3s ease-in-out;
   border-radius: 50px;
}

.hamburger-icon.nav-opan .line {
   margin: 8px;
}

.hamburger-icon:hover {
   cursor: pointer;
}

.hamburger-icon.nav-opan .line:nth-child(1) {
   transform: translateY(13px) rotate(45deg);
}

.hamburger-icon.nav-opan .line:nth-child(2) {
   opacity: 0;
}

.hamburger-icon.nav-opan .line:nth-child(3) {
   transform: translateY(-13px) rotate(-45deg);
}

.stars {
   width: 98px;
}

/* --------------------- main carousel ---------------------------   */

.slider {
   padding-top: 90px;

   @media (min-width: 768px) {
      padding-top: 110px;
   }

   @media (min-width: 1200px) {
      padding-top: 119px;
   }
}

.vdo__grid .owl-nav button.owl-prev,
.vdo__grid .owl-nav button.owl-next,
.slider .owl-nav button.owl-prev, 
.slider .owl-nav button.owl-next {
   position: absolute;
   top: 350px;
   font-size: 48px;
   color: var(--brand-element-color);
}

.vdo__grid .owl-nav button.owl-prev,
.slider .owl-nav button.owl-prev {
   left: 10px;

   @media (min-width: 992px) {
      left: 20px;
   }

   @media (min-width: 1400px) {
      left: 100px;
   }
}

.vdo__grid .owl-nav button.owl-next,
.slider .owl-nav button.owl-next {
   right: 10px;

   @media (min-width: 992px) {
      right: 20px;
   }

   @media (min-width: 1400px) {
      right: 100px;
   }
}

.slider .owl-dots {
   position: absolute;
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 5px;
   top: 540px;

   @media (min-width: 586px) {
      top: 590px;
   }

   @media (min-width: 768px) {
      top: 615px;
   }
}

.slider .owl-dots button.owl-dot {
   width: 9px;
   height: 9px;
   border-radius: 100%;
   border: 1px solid var(--brand-element-color);
}

.slider .owl-dots button.owl-dot.active {
   background-color: var(--brand-element-color);
}

.slide {
   display: flex;
   flex-direction: column;
   height: 850px;
}

.slide__main {
   position: relative;
   height: 640px;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   text-align: center;
   padding: 40px 30px;

   @media (min-width: 992px) {
      padding-left: 70px;
      padding-right: 70px;
   }

   @media (min-width: 1400px) {
      height: 660px;
      padding-left: 145px;
      padding-right: 145px;
   }
}

.slide__main--1::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: 174%;
   background-position: center;
   opacity: 0.7;
   z-index: -1;

   @media (min-width: 576px) {
      background-size: 120%;
      background-position: center top -40px;
   }
}

.slide__main--2 .text-discription {
   max-width: 380px;

   @media (min-width: 992px) {
      max-width: 500px;
   }
}

.slide__content {

   @media (min-width: 992px) {
      width: 100%;
   }
}

.slide__illustration {
   position: relative;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   width: 320px;
   height: 354px;

   @media (min-width: 576px) {
      width: 353px;
      height: 390px;
   }

   @media (min-width: 992px) {
      width: 860px;
      height: 420px;
   }
}

.slide__title {
   margin: 8px 0;
}

.slide__header {
   font-weight: 700;
   font-size: 56px;
   line-height: 1.2;

   @media (min-width: 576px) {
      font-size: 60px;
   }

   @media (min-width: 992px) {
      font-size: 100px;
   }
}

.slide__preferences {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 80px;

   @media (min-width: 576px) {
      gap: 16px;
      margin-top: 85px;
   }

   @media (min-width: 768px) {
      margin-top: 40px;
   }

   @media (min-width: 992px) {
      gap: 16px;
   }
}

.slide__slogan,
.slide__preference {
   display: flex;
   align-items: center;
   gap: 10px;
}

.slide__slogan {
   flex-direction: column;

   @media (min-width: 992px) {
      flex-direction: row;
   }
}

.slide__preference {

   @media (min-width: 992px) {
      gap: 16px;
   }
}

.slide__buttons {
   display: flex;
   flex-direction: column;
   gap: 10px;
   
   @media (min-width: 576px) {
      flex-direction: row;
      gap: 30px;
   }
}

.slide__footer {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   align-items: center;
   text-align: center;
   padding: 20px;
}

.slide__footer .text-discription {
   max-width: 450px;

   @media (min-width: 992px) {
      max-width: 580px;
   }
}

.promotion {
   position: absolute;
   top: 50px;
   left: 32px;

   @media (min-width: 576px) {
      top: 55px;
      left: 41px;
   }

   @media (min-width: 992px) {
      top: 15px;
      left: 137px;
   }
}

.promotion__header {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 116px;
   height: 26px;
   border-radius: 5px;
   background-color: var(--brand-text-color);
   color: white;
   font-size: 10px;
   line-height: 1.2;
   font-weight: 500;

   @media (min-width: 992px) {
      font-size: 20px;
      width: 250px;
      height: 55px;
   }
}

.promotion__price {
   color: var(--brand-element-color);
   font-weight: 700;
   line-height: 1;
}

.promotion__price span:first-child {
   font-size: 36px;

   @media (min-width: 576px) {
      font-size: 40px;
   }

   @media (min-width: 992px) {
      font-size: 80px;
   }
}

.promotion__price span:last-child {
   font-size: 70px;

   @media (min-width: 576px) {
      font-size: 80px;
   }

   @media (min-width: 992px) {
      font-size: 150px;
   }
}

.promotion__description {
   display: flex;
   flex-direction: column;
   gap: 2px;
   line-height: 1;
   margin-left: -6px;
   margin-top: 16px;

   @media (min-width: 992px) {
      gap: 4px;
      margin-top: 30px;
   }
}

.promotion__description span:nth-child(1) {
   font-size: 12px;
   font-weight: 500;
   color: var(--brand-element-color);

   @media (min-width: 992px) {
      font-size: 25px;
   }
}

.promotion__description span:nth-child(2) {
   font-size: 14px;
   font-weight: 500;

   @media (min-width: 992px) {
      font-size: 28px;
   }
}

.promotion__description span:nth-child(3) {
   font-size: 30px;
   font-weight: 700;
   text-shadow: 1px 0 0 var(--brand-element-color), -1px 0 0 var(--brand-element-color), 0 1px 0 var(--brand-element-color), 0 -1px 0 var(--brand-element-color);

   @media (min-width: 992px) {
      font-size: 63px;
   }
}

.promotion__description span:nth-child(4) {
   font-size: 8px;
   font-weight: 500;
   margin-top: 4px;

   @media (min-width: 992px) {
      font-size: 17px;
      margin-top: 6px;
   }
}

.perks-holder {
   display: flex;
   flex-direction: column;
   gap:15px;
   margin-top: 30px;
   @media (min-width: 768px) {
      gap:40px;
      flex-direction: row;
      margin-top:60px;
   }
   @media (max-width: 767px) {
      align-items: flex-start;
   }

   .perk {
      display: flex;
      align-items: center;
      justify-content: center;
      gap:10px;
      @media (min-width: 768px) {
         justify-content: center;
         flex-direction: column;
      }
      
      .perk-title {
         font-size: 16px;
         max-width: 300px;
         @media (max-width: 767px) {
            text-align: left;
         }
         @media (min-width: 992px) {
            font-size: 22px;
            line-height: 1.2;
            max-width: 320px;
         }
      }
      .perk-image {
         width: 30px;
         height: 30px;

         @media (min-width: 992px) {
            width: 40px;
            height: 40px;
         }
      }
   }
}

/* --------------------- stats --------------------------- */

.stats {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 65px;
   padding: 18px 10px;
   background-color: var(--pane-bg-color);
   @media screen and (max-width: 767px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px ;
      height: auto;
      padding: 20px 30px;
   }

   @media (min-width: 420px) {
      padding-left: 30px;
   }

   @media (min-width: 768px) {
      height: 90px;
      padding: 22px 30px;
   }

   @media (min-width: 992px) {
      padding: 29px 70px;
   }
}

.stats__element {
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   gap: 3px;
   line-height: 1;
   @media screen and (max-width: 767px) {
      align-items: center;
      justify-content: center;
   }

   @media (min-width: 992px) {
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 6px;
   }

   @media (min-width: 1400px) {
      gap: 12px;
   }
}

.stats__value {
   font-size: 18px;
   font-weight: 700;
   color: var(--white);
   margin: 0;
   padding: 0;
   line-height: 1;
   font-family: var(--inter-font);

   @media (min-width: 768px) {
      font-size: 26px;
   }

   @media (min-width: 1200px) {
      font-size: 35px;
   }
}

.stats__label {
   font-size: 12px;
   margin: 0;
   padding: 0;
   line-height: 1;
   font-family: var(--inter-font);

   @media (min-width: 768px) {
      font-size: 18px;
   }

   @media (min-width: 1200px) {
      font-size: 20px;
   }
}

/* --------------------- Practice --------------------------- */

.practice-steps {
   margin-top: 70px;

   @media (min-width: 992px) {
      margin-bottom: 25px;
   }
}

.practice-pane {
   position: relative;
   border: 1px solid transparent;
   border-radius: 20px;
   height: 320px;
   margin-bottom: 115px;
   text-align: left;
   background-color: var(--card-bg-box);

   @media (min-width: 992px) {
      margin-bottom: 0;
      height: 310px;
   }
   @media (max-width: 767px) {
      height: auto;
   }
}

.practice-pane__title {
   min-height: 120px;
   display: flex;
   align-items: center;
   padding: 16px 24px;
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   font-size: 22px;
   font-weight: 700;
   line-height: 1.43;
   background-color: var(--bg-gray-005);

   @media (min-width: 992px) {
      line-height: 1.5;
   }
}

.practice-pane__title > * {
   max-width: 280px;
}

.practice-pane__text {
   max-width: 480px;
   padding: 18px 24px;
   padding-bottom: 40px;
   font-size: 15px;
   line-height: 1.6;
   @media screen and (min-width: 768px) {
      padding-bottom: 35px;
   }
}

.practice-pane__number {
   position: absolute;
   right: 20px;
   top: -22px;
}

.practice-pane__number img {
   height: 45px;
}

.practice-pane__icon {
   position: absolute;
   left: 50%;
   bottom: -52px;
   margin-left: -51px;

   @media (min-width: 1200px) {
      bottom: -52px;
      margin-left: -51px;
   }
}

.practice-pane__icon img {
   height: 102px;
   width: 102px;
}

/* --------------------- Why join --------------------------- */

.why-pane {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   background-color:var(--dark-blue);
   border-radius: 20px;
   height: 271px;
   padding: 16px 10px;
   margin-bottom: 24px;

   @media (min-width: 992px) {
      min-height: 300px;
      height: auto;
      padding-top: 30px;
      padding-bottom: 30px;
      margin-bottom: 0;
   }
   @media screen and (max-width: 768px) {
      min-height: 280px;
      height: auto;
      gap: 20px
   }
}

.why-pane__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.why-pane__content > p {
   max-width: 255px;
   margin-bottom: 0;
   font-size: 15px;
   line-height: 1.66;

   @media (min-width: 576px) {
      max-width: 310px;
   }
}

.why-pane__title {
   font-size: 23px;
   font-weight: 700;
   line-height: 1.3;
   width: 250px;
}

.why-pane__image img {
   width: 80px;
   height: 80px;
   @media screen and (max-width: 768px) {
      width: 92px;
      height: 92px;
   }
}

/* --------------------- Challenge --------------------------- */

.challenge {
   padding: 28px 8px;
   border: 1px solid var(--brand-element-color);
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.15);

   @media (min-width: 576px) {
      padding: 46px 16px 24px;
   }

   @media (min-width: 992px) {
      padding-left: 48px;
      padding-right: 48px;
   }

   @media (min-width: 1200px) {
      padding-left: 96px;
      padding-right: 96px;
   }
}

.challenge-main {
   padding: 0 15px;
}

.challenge-main__cell {
   display: flex;
   align-items: center;
   height: 45px;
   background-color: rgba(17, 20, 30, 0.72);
   border-radius: 10px;
   margin-bottom: 10px;

   @media (min-width: 768px) {
      height: 65px;
      padding: 0 8px;
      margin-bottom: 15px;
   }
}

.challenge-main__cell:last-child {
   margin-bottom: 0;
}

.challenge-tab {
   list-style: none;
   padding: 0 3px;
   margin-bottom: 0;
}

.challenge-tab__item {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 2px solid var(--brand-element-color);
   border-radius: 10px;
   background-color: rgba(255, 255, 255, 0.8);
   color: #000;
   width: 100%;
   margin: 0 auto;
   max-width: 270px;
   height: 103px;
   padding: 10px 0 0 0;

   @media (min-width: 768px) {
      height: 115px;
      max-width: none;
      padding-top: 18px;
   }

   .challange-title {
      font-size: 18px;
      font-weight: 700;
   }

   .price-usd {
      font-size: 50px;
      font-weight: 700;
      line-height: 40px;
   }

   .price-converted {
      line-height: 2;
      color: var(--local-text-color);
   }

   .popular {
      position: absolute;
      width: 168px;
      height: 30px;
      top: -15px;
      left: 50%;
      margin-left: -84px;
      border-radius: 40px;
      background-color: var(--brand-element-color);
      font-size: 18px;
      font-weight: 700;
      color: #000;
      text-transform: uppercase;
      text-align: center;

      @media (min-width: 1200px) {
         width: 203px;
         margin-left: -101px;
      }
   }
}

.challenge-tab__item.active {
   background-color: transparent;

   .challange-title {
      color: var(--brand-element-color);
   }

   .price-usd {
      color: #fff;
   }
}

.challenge-tab__item:focus,
.challenge-tab__item:hover {
   border-color: var(--brand-element-color);
}

.challenge-price {
   width: fit-content;
   margin: 12px auto;
   text-align: center;
}

.challenge-price__fee {
   margin-right: 12px;
   color: var(--brand-element-color);
   font-size: 20px;

   @media (min-width: 768px) {
      font-size: 30px;
   }
}

.challenge-price__amount,
.challenge-price__currency {
   color: var(--brand-element-color);
   line-height: 1;
   font-size: 60px;

   @media (min-width: 768px) {
      font-size: 70px;
   }
}

.challenge-price__currency {
   font-weight: 300;
}

.challenge-price__amount {
   font-weight: 700;
}

.challenge-price__local {
   color: var(--local-text-color);
   font-size: 16px;

   @media (min-width: 768px) {
      font-size: 20px;
   }
}

/* --------------------- Vdo --------------------------- */

.vdo {
   display: flex;
   flex-direction: column;

   @media (min-width: 1200px) {
      flex-direction: row;
   }
}

.vdo__left {
   width: 100%;
   background-color: var(--bg-gray-010);

   @media (min-width: 1200px) {
      display: flex;
      justify-content: end;

      .vdo__block {
         padding-left: 0;
         padding-right: 60px;
      }
   }
}

.vdo__right {
   width: 100%;
   background-color: var(--bg-gray-005);

   @media (min-width: 1200px) {
      display: flex;
      justify-content: start;

      .vdo__block {
         padding-left: 60px;
         padding-right: 0;
      }
   }
}

.vdo__block {
   text-align: center;
   padding: 80px 15px 80px;
   @media screen and (max-width: 768px) {
      padding: 73px 15px 73px;
   }

   @media (min-width: 568px) {
      padding-left: 30px;
      padding-right: 30px;
   }

   @media (min-width: 1200px) {
      width: 100%;
      max-width: 560px;
      padding-bottom: 80px;
   }

   @media (min-width: 1400px) {
      max-width: 640px;
   }
}

.vdo__grid {
   position: relative;
 
   @media (min-width: 768px) {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      max-width: 692px;    
      margin: 0 auto;
   }

   .owl-nav button.owl-prev,
   .owl-nav button.owl-next {
      top: 50%;
      margin-top: -42px;
   }
}

.vdo__link {
   display: block;
   position: relative;
   width: 100%;
   aspect-ratio: 616/347;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 10px;
   overflow: hidden;
}

.vdo__link--lg {

   @media (min-width: 768px) {
      max-width: 692px; 
      margin: 0 auto;
   }
}

.vdo__link--sm {

   @media (min-width: 768px) {
      width: 337px;
   }

   @media (min-width: 1200px) {
      width: 241px;
   }
  
   @media (min-width: 1400px) {
      width: 281px;
   }
}

.vdo__icon {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 46px;
   height: 46px;
   margin-top: -23px;
   margin-left: -23px;
}

.vdo__icon--lg {

   @media (min-width: 768px) {
      width: 96px;
      height: 96px;
      margin-top: -48px;
      margin-left: -48px;
   }
}

/* --------------------- Clients --------------------------- */

.clients-logo {
   width: 125px;
   margin: 20px auto 0;

   @media (min-width: 1200px) {
      position: absolute;
      top: 4px;
      right: 0;
      margin: 0;
   }
}

.reviews {
   margin-top: 24px;

   @media (min-width: 586px) {
      column-count: 2;
   }

   @media (min-width: 992px) {
      margin-top: 30px;
      column-count: 3;
   }
}
 
.review {
   display: flex;
   flex-direction: column;
   gap: 4px;
   height: fit-content;
   margin-bottom: 18px;
   padding: 6px 12px 12px;
   background-color: #fff;
   break-inside: avoid;
   text-decoration: none;
}

.review__icon {
   width: 82px;
}

/* -------------------------- CTA -------------------------------- */

.cta {
   position: relative;
   height: 346px;
   max-width: var(--container-width);
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   margin-top: 80px;
   margin-bottom: 80px;
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.20);
   @media screen and (max-width: 768px) {
      height: 380px;
      margin: 50px 15px;
   }

   .block__header {
      text-shadow: 10px 4px 4px rgba(0, 0, 0, 0.25);
      position: relative;
      z-index: 2;
      @media screen and (max-width: 768px) {
         max-width: 300px;
      }
   }
}

.cta__buttons {
   position: relative;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   margin-top: 25px;

   @media (min-width: 992px) {
      flex-direction: row;
      margin-top: 45px;
      gap: 32px;
   }
}

/* ----------------------------------------------------------- */

.padding-custom-content {
   padding-left: 30px;
   padding-right: 30px;
}

.img-width-custom {
   width: 50%;
}

@media (min-width: 992px) {
   .img-width-custom {
      width: 100%;
   }

   .padding-custom-content {
      padding-left: 145px;
      padding-right: 145px;
   }
}

/* ----------------------------footer-------------------------- */
.custom-menu-footer .menu-memu-footer-container ul {
   display: flex;
   margin: 0;
   padding: 0;
   list-style: none;
   justify-content: space-between;
   .menu-item {
      a {
         transition: color 0.3s ease;
         &:hover {
            color: var(--brand-element-color)!important;
         }
      }
   }
}

.menu-menu-policy-container #menu-pc {
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
   margin-top: 10px;
   max-width: 800px;
}

.menu-menu-policy-container #menu-pc li a {
   text-decoration: none;
   color: var(--white);
   transition: color 0.3s ease;
   &:hover {
      color: var(--brand-element-color)!important;
   }
}

.menu-menu-policy-container #menu-mobile {
   padding: 0;
   margin: 0;
   list-style: none;
}

.menu-menu-policy-container #menu-mobile li a {
   text-decoration: none;
   color: #fff;
}

@media (max-width: 1199px) {
   .custom-menu-footer .menu-memu-footer-container ul {
      display: block;
   }
}

.custom-menu-footer .menu-memu-footer-container ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 12px;
}

.disclaimer {
   margin-top: 30px;
   font-size: 12px;
}

.disclaimer__title {
   font-weight: 700;
}

.disclaimer__description {
   color: #F5F5F5;

   p {
      margin-bottom: 0;
   }
}

/* --------------------------------------------------------------- */

.challenge-tabs {
   margin-top: 24px;
}

.challenge-info {
   padding: 0 15px;
}

.challenge-info__cell {
   display: flex;
   align-items: center;
   background-color: #2b2e37;
   border-radius: 8px;
   height: 60px;
   line-height: 1.4;
   margin-bottom: 8px;

   @media (min-width: 576px) {
      padding: 0 8px;
   }
}

.challenge-info__cell:last-child {
   margin-bottom: 0;
}

.bg-select-checkout {
   display: flex;
   flex-direction: column;
   gap: 8px;

   @media (min-width: 390px) {
      flex-direction: row;
   }

   @media (min-width: 576px) {
      gap: 16px;
   }
}

.button-checkout {
   color: #000;
   background-color: rgba(224, 224, 224, 0.9);
   border: #fff solid 3px;
   border-radius: 50px;
   padding: 10px 15px;
   font-size: 12px;
   font-weight: 600;
   width: 100%;
}

.button-checkout.active {
   color: #ff9f40;
   background-color: rgba(0, 0, 0, 0.5);
   font-weight: 600;
   border: #ff9f40 solid 2px;
}

.button-checkout:hover,
.button-checkout.active:hover {
   border-color: #fff;
}

@media (min-width: 768px) {
   .button-checkout {
      font-size: 16px;
   }
}

@media (min-width: 1200px) {
   .button-checkout {
      font-size: 20px;
      height: 80px;
   }
}

#lightcase-overlay {
   background-color: rgba(51, 51, 51, 0.9) !important;
}

/* -------------------------- Rule and FAQ -------------------------------- */

.faq {
   padding: 60px 0;
   @media screen and (max-width: 768px) {
      padding: 32px 0;
   }
}

.accordion-pane {
   border-bottom: 1px solid #fff;
}

.accordion-title-main {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   padding: 20px 30px 20px 20px;
   font-size: 18px;
   font-weight: 600;
   color: var(--brand-element-color);
   text-align: left;
   background-color: transparent;
   border: 0;
   overflow-anchor: none;
   transition: var(--bs-accordion-transition);
}

/* .accordion-title-main.collapsed {
   padding: 20px 30px 20px 20px;
} */

.accordion-title-main.collapsed::before {
   /* content: "\f0d7";
   font-family: 'FontAwesome';
   position: absolute;
   left: 0px;
   top: 27%;
   z-index: 1; */
   /* transform: translateY(-60%); */
   transform: rotate(0deg);
   /* transition: all 0.3s linear; */
}

.accordion-title-main::before {
   content: "\f0d7";
   font-family: 'FontAwesome';
   position: absolute;
   right: 0px;
   top: 32%;
   z-index: 1;
   transition: all 0.3s linear;
   transform: rotate(-180deg);
}

.accordion-title-sub {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   padding: 20px 0px 20px 30px;
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   text-align: left;
   background-color: transparent;
   border: 0;
   overflow-anchor: none;
   transition: var(--bs-accordion-transition);
}

.accordion-title-sub.collapsed::before {
   content: "+";
   transform: rotate(90deg);
}

.accordion-title-sub::before {
   content: "-";
   font-size: 20px;
   font-weight: 900;
   position: absolute;
   position: absolute;
   left: 0;
   top: 18px;
   /* top: 30px; */
   /* transform: translateY(-50%); */
   width: 25px;
   text-align: -webkit-center;
   transition: transform 0.4s ease-in-out;
}

.accordion-sub-body {
   padding: 0 0px 30px 20px;
}

@media (min-width: 576px) {

   .accordion-title-sub {
      font-size: 24px;
      padding: 30px 30px 30px 50px;
   }

   .accordion-title-main {
      font-size: 24px;
      padding: 30px 50px;
   }

   .accordion-title-main::before {
      right: 50px;
   }

   .accordion-sub-body {
      padding: 0 50px 30px 50px;
   }

   .accordion-title-sub::before {
      top: 33px;
   }

}

@media (min-width: 992px) {
   .accordion-title-main {
      font-size: 30px;
   }

   .accordion-title-sub {
      font-size: 30px;
   }

   .accordion-title-sub::before {
      font-size: 40px;
      top: 22px;
   }

}

/* -------------------------- Questions -------------------------------- */

.text-question {
   font-size: 18px;
   font-weight: 600;
}

.accordion-custom {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   padding: 18px 30px 18px 30px;
   font-size: 18px;
   font-weight: 600;
   color: #fff;
   text-align: left;
   background-color: transparent;
   border: 0;
   overflow-anchor: none;
   transition: var(--bs-accordion-transition);
}

.accordion-custom.collapsed::before {
   content: "+";
   transform: rotate(90deg);
   top: 12px;

   @media(max-width: 768px) {
      top: 16px;
   }
}

.accordion-custom::before {
   content: "-";
   font-size: 20px;
   font-weight: 900;
   position: absolute;
   position: absolute;
   left: 0;
   top: 24px;
   width: 25px;
   text-align: -webkit-center;
   transition: transform 0.4s ease-in-out;
   @media(max-width: 768px) {
      top: 16px;
   }
}

.accordion-body-custom {
   padding: 0px 0px 30px 30px;
   font-size: 14px;
}

.accordion-body-custom ul {
   padding-left: 20px;
}

@media (min-width: 576px) {
   .text-question {
      font-size: 24px;
   }

   .accordion-custom {
      font-size: 20px;
      padding: 18px 30px 18px 50px;
   }

   .accordion-body-custom {
      padding: 0px 0px 30px 50px;
      font-size: 15px;
   }

   .accordion-custom::before {
      top: 8px;
   }
}

@media (min-width: 992px) {
   .text-question {
      font-size: 30px;
   }

   .accordion-custom {
      font-size: 20px;
   }

   .accordion-custom::before {
      font-size: 30px;
      top: 8px;
   }

}

/* -------------------------------------------------------------------------------- */
.form-select-custom {
   background-color: transparent;
   border: 3px solid #fff;
   padding: 15px;
   width: 100%;
   border-radius: 50px;
}

.modal-close {
   background-color: transparent;
   border: 0;
   font-size: 20px;
   color: #a0a0a0;
}

/* ----------------------------- Form Request ------------------------------------ */
label.form-request {
   color: var(--white) !important;
   font-size: 15px;
}

input.form-request,
select.form-request {
   background: rgba(77, 78, 82, 0.30);
   border-radius: 10px !important;
   border: 1px solid #757472!important;
   text-align: start;
   border: 0;
   color: #fff;
   height: 48px;
}
input.form-request:focus {
   color: #fff;
   /* background-color: rgba(104, 162, 188, 0.5); */
   background: transparent;
   border: 1px solid #FFF;
   outline: none;
   box-shadow: none;
}

textarea.form-request {
   width: 100%;
   border-radius: 10px;
   border: 1px solid #757472;
   background: rgba(77, 78, 82, 0.30);
   color: var(--white);
   padding: 10px;
   min-height: 114px;
   &:focus {
      color: #fff;
      /* background-color: rgba(104, 162, 188, 0.5); */
      background: transparent;
      border: 1px solid #FFF;
      outline: none;
      box-shadow: none;
   }
   &::placeholder {
      color: var(--placeholder-color);
   }
}

select.form-request {
   appearance: none;
   width: 100%;
   background-image: url('images/icon-down-arrow.png');
   background-repeat: no-repeat;
   background-position: right 1rem center;
   background-size: 9px 17px;
}

.form-request option {
   background-color: #fff;
   color: #000;
}

input.form-request::placeholder {
   color: var(--placeholder-color);
}




.css-phone .iti {
   width: 100%;
}

.css-phone .iti--allow-dropdown .iti__flag-container {
   right: auto !important;
   left: 0 !important;
}

.css-phone .iti__selected-flag {
   background-color: #2C2E37;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
}

.css-phone .iti--allow-dropdown .iti__flag-container:hover {
   background-color: #2C2E37;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;
}

.css-phone .iti__country {
   color: #000;
}

.iti-mobile .iti__country {
   color: #000;
}
.iti__selected-dial-code {
   color: var(--white);
}

.iti__arrow {
   margin-left: 6px;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 6px solid var(--white);
}
.iti__arrow--up {
   border-top: none;
   border-bottom: 6px solid var(--white);
}

@media (min-width: 992px) {
   label.form-request {
      font-size: 18px;
   }
}

/* ----------------------------- Form Credit Card ------------------------------------ */
label.form-credit {
   color: #f2a029 !important;
   font-size: 14px;
}

input.form-credit {
   background-color: rgba(0, 0, 0, 0.5) !important;
   border-radius: 8px !important;
   /* text-align: start; */
   border: 3px solid #fff;
   color: #fff;
}

input.form-credit::placeholder {
   color: var(--pl);
}

input.form-credit:focus {
   color: #fff;
   background-color: rgba(0, 0, 0, 0.5) !important;
   outline: none;
   box-shadow: none !important;
   border-color: #fff;
}

.checkbox.style-d input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}

.checkbox.style-d input:checked~.checkbox__checkmark {
   background-color: rgba(0, 0, 0, 1);
}

.checkbox.style-d input:checked~.checkbox__checkmark:after {
   opacity: 1;
}

.checkbox.style-d .checkbox__checkmark {
   position: relative;
   top: 0px;
   left: 0;
   height: 25px;
   /* width: 25px; */
   max-width: 25px;
   min-width: 25px;
   background-color: rgba(0, 0, 0, 0.5);
   border: 3px solid #fff;
   transition: background-color 0.25s ease;
   border-radius: 50%;
}

.checkbox.style-d .checkbox__checkmark:after {
   content: "";
   position: absolute;
   left: 7px;
   top: 4px;
   width: 5px;
   height: 10px;
   border: solid #fff;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
   opacity: 0;
   transition: opacity 0.25s ease;
}

@media (min-width: 576px) {
   label.form-credit {
      font-size: 18px;
   }
}

/* ---------------------------- select country ------------------------------------- */
.dropbtn {
   background-color: transparent;
   border: 0;
   font-weight: 500;
   font-size: 16px;
   cursor: pointer;
   width: 100%;
   text-align: start;
   color: #FFFFFF;
   display: flex;
   align-items: center;
   gap:8px;
   border-radius: 8px;
   padding: 10px 20px;
   transition: all 0.3s ease;
   svg {
      path {
         fill: #FFFFFF;
         transition: fill 0.3s ease;
      }
   }
   svg {
      path {
         fill: #FFFFFF;
         transition: fill 0.3s ease;
      }
   }
   &:hover {
      border-color: transparent;
      svg {
         path {
            fill: var(--brand-element-color);
         }
      }
   }
   &:focus {
      border-color: transparent;
   }
}

.dropbtn img {
   width: 29px;
   height: auto;
   pointer-events: none;
}

.dropdown-content {
   opacity: 0;
   max-height: 0;
   overflow: hidden;
   position: absolute;
   background-color: #fff;
   width: max-content;
   z-index: 10000;
   margin-top: 10px;
   transition: opacity 0.5s, max-height 0.5s linear;
   padding: 0px 16px;
}

.dropdown-content.show {
   opacity: 1;
   max-height: 300px;
   @media (min-width:1024px) {
      max-height: 480px;
   }
}

.dropdown-content a {
   color: #000;
   font-size: 16px;
   font-weight: 500;
   padding: 12px 0px;
   text-decoration: none;
   display: block;
   border-bottom: 1px solid #f1f1f1;
}

.dropdown-content button {
   color: #000;
   font-size: 16px;
   font-weight: 500;
   padding: 12px 0px;
   text-decoration: none;
   display: block;
   border-bottom: 1px solid #f1f1f1;
}

.country-settings {
   display: flex;
   justify-content: center;
   margin-top: 8px;

   .open-settings-btn {
      padding: 1rem;
      color: #ffffff;
      border: none;
   }
}

.settings-country-btn {
   display: flex!important;
   gap:8px;
   align-items: center;
   svg {
      width: 20px;
      height: 20px;
   }
}
/* ----------------------------------------------------------------- */
.text-title-table {
   text-align: center;
   font-size: 12px;
}

tr th.text-title-table:first-child {
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
}

tr th.text-title-table:last-child {
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}

table tbody tr:first-child td.text-detail-table:first-child {
   border-top-left-radius: 10px;
}

table tbody tr:first-child td.text-detail-table:last-child {
   border-top-right-radius: 10px;
}

table tbody tr:last-child td.text-detail-table:first-child {
   border-bottom-left-radius: 10px;
}

table tbody tr:last-child td.text-detail-table:last-child {
   border-bottom-right-radius: 10px;
}

.text-title-table:nth-child(1) {
   color: #f2a029;
   text-align: start;
}

.text-detail-table:nth-child(-n+2) {
   color: #68a2bc;
}

.text-detail-table:nth-child(odd) {
   background-color: #000;
}

.text-detail-table:nth-child(even) {
   background-color: #111111;
}

.text-detail-table {
   text-align: center;
   font-size: 12px;
}

.text-detail-table:nth-child(1) {
   text-align: start;
}

.padding-content-table {
   padding: 0px;
}

@media (min-width: 576px) {
   .text-title-table {
      font-size: 20px;
   }

   .text-detail-table {
      font-size: 18px;
   }
}

@media (min-width: 992px) {
   .padding-content-table {
      padding: 30px 70px;
   }
}

@media (min-width: 1400px) {
   .padding-content-table {
      padding: 40px 145px;
   }
}

.bg-content-partner:nth-child(even) {
   background-color: #000;
}

.text-validation {
   display: none;
}

.text-validation.show {
   display: block;
   color: red;
   font-size: 12px;
}

.text-orange {
   color:#ff9f40;
}

.blue-border-down {
   border-bottom:#68a2bc solid 1px;
}

.tab-link {
   display: flex;
   flex-direction: column;
   gap:4px;
   align-items: center;
}




.success-message {
   color: #28a745;
   font-size: 14px;
}

.btn-globe {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 30px;
   border:1px solid transparent;
   position: relative;
   padding: 10px;

   i {
      font-size: 20px;
      transition:0.3s all ease-in-out;
   }
}

/* checkout */
.checkout {
   padding: 16px;
   border-radius: 8px;
   background-color: #2b2e37;
}

.checkout-separator {
   width: 100%; 
   height: 1px; 
   background-color: var(--white);
   margin: 16px auto;
}

.input-box-check-out {
   position: relative;
   min-width: 130px;
   max-width: max-content;
}

.input-check-out {
   background-color: transparent;
   position: absolute;
   height: 100%;
   width: 100%;
   outline: 0;
   border: 0 !important;
   color: #fff !important;
   text-align: end;
   font-weight: 600;
   right: 0;
}


/* payment options */

.payment-options {
   display: flex;
   flex-direction: column;

   .payment-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      background-color: #ffffff;
      border-radius: 50px!important;
      padding: 0 0 0 15px;
      transition: all 0.3s ease-in-out;
      min-height: 48px;
      @media screen and (max-width: 767px) {
         padding: 0 0 0 5px;
      }

      &.active {
         border-color: #ffffff;
      }

      &:hover {
         cursor: pointer;
      }
      .method-name {
         @media screen and (max-width: 767px) {
            min-width: 112px;
         }
         .checkbox {
            .psp-name {
               color: #000000;
               font-weight: 700;
               @media screen and (max-width: 767px) {
                  font-size: 14px;
               }
            }
         }
      }

      input[type="radio"] {
         margin-right: 10px;
      }

      .payment-methods {
         display: flex;
         flex-wrap: wrap;
         gap: 8px;
         justify-content: flex-end;
         .payment-icons{

         }
         .badge-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            padding:10px 10px 10px 0;
            gap:6px;
            flex-wrap: wrap;
            @media screen and (max-width: 380px) {
               display: none;
            }
         }

         .badge {
           font-size: 12px;
           background-color: #3A3D44; 
           color: #fff;
           padding: 5px 10px;
           border-radius: 12px;
           letter-spacing: -0.16px;
           font-weight: 700;
           @media screen and (max-width: 420px) {  
            font-size: 9px;
           }
         }

         .badge-logo-wrap {
            background: #CFCECD;
            border-radius: 0 50px 50px 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 0 5px;
            gap: 5px;
            @media screen and (min-width: 768px) {
               gap: 20px;
               padding: 0 30px;
               min-height: 48px;
            }
            @media screen and (max-width: 767px) {
               height: 100%;
               min-height: 48px;
               padding: 0 10px;
            }
            .badge-logo {
               background: transparent;
               padding: 0;
               img {
                  max-width: 100%;
                  height: auto;
                  display: block;
                  object-fit: contain;
                  @media screen and (max-width: 767px) {
                     width: 40px;
                     height: 24px;
                  }
                  @media screen and (min-width: 768px) {
                     width: 40px;
                     height: 30px;
                  }
                  @media screen and (min-width: 1440px) {
                     width: 40px;
                     height: 40px;
                  }
               }
            }
            .badge-logo-viva {
               img { 
                  width: 80px;
                  height: 40px;
               }
            }
         }
      }
   }
}

.payment-info-holder {
   max-width: var(--container-width)!important;
   padding-top: 150px;

   @media (min-width: 1024px) {
      padding: 150px 20px;
   }


   .details {
      .payment-details {
         max-width: 1024px;
      }
   }
}

.submit-checkout {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   width: 100%;
   border:none;
   .button-loader {
      margin-left: 10px; /* Adjust as needed */
      color: #fff;
      display: none;
   }
}

.submit-checkout.loading .button-text {
   display: none; /* Hide the text when loading */
}

.submit-checkout.loading .button-loader {
   display: inline-block;
}


.text-title-checkout {
   font-weight: 900;
   text-transform: uppercase;
   font-size: 33px;
   line-height: 1.2;

    @media (min-width: 1024px) {
      font-size: 40px;
   }
}

.form-subheading {
   color:#fff;
   font-size: 18px;
   font-weight: 900;
   padding-bottom: 20px;
   text-align: center;
   margin: 0 auto;

   @media (min-width: 1024px) {
      font-size: 24px;
      text-align: left;
   }
}

.center-mobile {
   @media (max-width: 767px) {
      text-align: center;
      margin: 0 auto;
   }
}

/* hide recaptcha badge */
.grecaptcha-badge { 
   visibility: hidden !important;
}

/* chat */
#whatsapp-chat {
   position: fixed;
   bottom: 15px;
   left: 20px;
   width: 64px; 
   height: 64px;
   z-index: 9999; 
   @media (min-width: 768px) {
      display:none;
   }
}

#whatsapp-chat img {
   width: 100%;
   height: auto;
   border-radius: 20px; /* Makes the icon circular like chat icon */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
   transition: transform 0.3s ease;
}

.radio-orange {
   accent-color: #f2a029;
}



.status {
   flex-direction: column;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.10);
   background: #11141D;
   display: none;
   margin-top:30px;

   .status-main {
      display: flex;
      flex-direction: column;
      gap: 20px;
      background: #1A1F2C;
      padding: 24px;
      .icon-status {
         display: flex;
         align-items: flex-start;
         gap: 12px;
         .icon-inner {
            width: 48px;
            height: 48px;
         }
         .content {
            display: flex;
            flex-direction: column;
            .title {
               color: #C2CAD2;
   
               font-size: 12px;
               font-style: normal;
               font-weight: 600;
               line-height: 16px; /* 133.333% */
               letter-spacing: -0.12px;
            }
            .actual-status {
               color: #299672;
               font-size: 20px;
               font-style: normal;
               font-weight: 700;
               line-height: 28px; /* 140% */
               letter-spacing: -0.2px;
            }
         }
      }
      .short-desc {
         color: #FFF;
         font-size: 16px;
         font-style: normal;
         font-weight: 600;
         line-height: 24px; /* 150% */
         letter-spacing: -0.16px;
      }
      .detailed-desc {
         color: #C2CAD2;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 142.857% */
         letter-spacing: -0.14px;
      }
   }
   .status-additional-msg {
      padding: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(26, 31, 44, 0.40);
      .message {
         color: #728393;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 142.857% */
         letter-spacing: -0.14px;
         margin: 0;
         padding: 0;
      }
   }
}


.status--new, .status--pending, .status--declined, .status--done {
   display: flex;
}

/* These modifier classes change the color of the actual status text.
   You can update the colors as needed or even change the icon via CSS. */
.status.status--new .status-main .icon-status .content .actual-status {
   color: #B98A4A; /* Blue for NEW */
}
.status.status--pending .status-main .icon-status .content .actual-status {
   color: #2F8FCA; /* Info color for PENDING */
}
.status.status--declined .status-main .icon-status .content .actual-status {
   color: #CA2F51; /* Red for DECLINED */
}
.status.status--done .status-main .icon-status .content .actual-status {
   color: #299672; /* Green for DONE */
}

/* funded packages */

.challenge-select {
   font-weight: 700;
   border: 2px solid #ff9f40!important;
   color: #fff!important;
   transition: all 0.3s ease-in-out;

   &:focus {
      background-color: transparent;
      box-shadow: none;
      border:2px solid #fff!important;
   }

   &:hover {
      box-shadow: none;
      border:2px solid #fff!important;
      cursor:pointer!important;
   }
}

.form-checkout-funded {
   margin: 0 auto;
   max-width: 1200px;
}

.blur-bg {
   filter: blur(10px);
}


/* homepage redesign */
.challenge-selection-tab-homepage {
   /* Override .step-selection width constraint on mobile */
   @media screen and (max-width: 768px) {
      height: auto;
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%!important;
      max-width: none !important;
      margin:0 auto 20px auto!important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      text-align: center!important;
      display: flex!important;
      justify-content: center!important;
      
      /* Custom scrollbar styling */
      &::-webkit-scrollbar {
         height: 4px;
      }
      
      &::-webkit-scrollbar-track {
         background: rgba(255, 255, 255, 0.1);
         border-radius: 2px;
      }
      
      &::-webkit-scrollbar-thumb {
         background: var(--brand-element-color);
         border-radius: 2px;
      }
      
      &::-webkit-scrollbar-thumb:hover {
         background: rgba(var(--brand-element-color), 0.8);
      }
   }

   .step-options-holder {
      /* Enable horizontal scrolling on mobile when content overflows */
      @media screen and (max-width: 768px) {
         flex-wrap: nowrap;
         align-items: center;
         justify-content: center;
         width: max-content;
         min-width: 100%;
         padding-left: 20px;
         padding-right: 20px;
      }
   }
}

.step-selection {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 22px auto;
   gap: 16px;
   width: max-content;
   padding: 0 20px;
   border-radius: 40px;
   background: var(--bg-gray-010);
   min-height: 64px;
   height: auto;
   @media screen and (min-width: 768px) {
      gap: 30px;
   }

   .step-selection__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      height: 41px;
      background: transparent;
      border: 1px solid var(--brand-element-color);
      font-weight: 600;
      color:#fff;
      border-radius: 20px;
      padding: 0 30px;
      margin: 0;
      @media (max-width: 767px) {
         font-size: 16px;
         padding: 0 10px;
      }
      .title {
         margin: 0;
         padding: 0;
         .addition {
            @media (max-width: 1365px) {
               display: none;
            }
         }
      }

      &.active {
         background: var(--brand-element-color);
         color: var(--black);
      }
      position: relative;
      .popular-label {
          position: absolute;
          top: -12px;
          left: 50%;
          transform: translateX(-50%);
          background: var(--brand-element-color);
          color: #181b20;
          font-weight: 700;
          font-size: 12px;
          border-radius: 70px;
          padding: 0 10px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;
          box-shadow: 0 2px 8px rgba(0,0,0,0.08);
          margin-bottom: -30px;
          min-width: 90px;
      }
   }
}


.challenge-selection-tab {

   .step-options-holder {
      display: none;

      &.active {
         display: flex!important;
         gap:22px;
         @media screen and (max-width: 768px) {
            gap:10px
         }
      }

      .step-selection__item {
         padding: 0 15px;
         background: transparent;
         border: none;
         @media screen and (max-width: 768px) {
            padding: 0 10px;
            flex-shrink: 0;
         }
         &.active {
            background: var(--brand-element-color);
            color: var(--black);
         }
         .title {
            font-size: 22px;
            font-weight: 600;
            text-transform: lowercase;
            @media (min-width: 768px) {
               font-size: 30px;
            }
         }
         
      }
   }
}

.details-holder {
   display: flex;
   flex-direction: column;
   gap:20px;
   @media (min-width: 768px) {
      flex-direction: row;
   }

   .box {
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.30);
      background: var(--bg-gray-005);
      border-radius: 10px;
      padding: 28px 40px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      position: relative;
      border: 1px solid var(--green-border);
      &.box-finished {
         border: 1px solid var(--green-border);
      }
      &.arrow-right-indicator {
         .arrow-image {
            position: absolute;
            top: 33px;
            right: -40px;
            width: 54px;
            height: 24px;
            z-index: 1;
            @media screen and (max-width: 768px) {
               top: auto;
               right: auto;
               bottom: -25px;
               left: 50%;
               transform: translateX(-50%) rotate(90deg);
            }
         }
      }
      .box-header {

         .tag {
            height: 24px;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            border-radius: 30px;
            background: var(--brand-element-color);
            color: var(--black);
            display: flex;
            align-items: center;
            justify-content: center;
            width: max-content;
            padding: 4px 10px;
            &.invisible {
               visibility: hidden;
               opacity: 0;
            }

         }
         .step-name {
            font-size: 23px;
            font-style: normal;
            font-weight: 700;
            margin-top: 17px;
            margin-bottom: 30px;
         }
      }
      .info {
         display: flex;
         flex-direction: column;
         gap: 30px;
         .item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            .name {
               font-size: 15px;
               font-weight: 400; 
               margin: 0;
               padding: 0;
            }
            .value {
               font-size: 15px;
               font-weight: 600; 
            }
         }
      }
   }
}

.additional-holder{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap:20px;
   margin-top:16px;
   .additonal-settings {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 40px;
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      @media screen and (max-width: 768px) {
         display: flex;
         align-items: center;
         justify-content: center;
         flex-direction: column-reverse;
         gap: 10px;
      }
      .open-settings-btn, .terms {
         color:#fff;
         font-size: 14px;
         font-style: normal;
         font-weight: 600;
         line-height: 2.14;
         .settings-icon {
            margin-right: 10px;
         }
      }
   }
   .credit-card {
      @media screen and (max-width: 768px) {
         max-width: 80vw;
      }
   }
}

.indicator-holder {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap:4px;
   .indicator {
      color: #FFF;
      font-size: 25px;
      line-height: 30px; /* 120% */
      height: 45px;
      border-radius: 30px;
      border: 1px solid rgba(255, 255, 255, 0.30);
      background: #111827;
      display: flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      padding: 4px 15px;
			@media screen and (min-width: 768px) {
				height: 45px;
				font-weight: 500;
				padding: 0 25px;
			}
			@media screen and (max-width: 767px) {
				font-size: 20px;
				text-align: center;
				max-width: 100%;
				width: 100%;
				height: auto;
				padding: 10px;
				border-radius: 25px;
			}
   }
   .holder--challenge {
      margin: 0 auto 20px auto;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   /* Base styling for indicator-converted */
   .indicator-converted {
      margin-top: 5px;
      font-size: 14px;
      color: #88898e;
      display: block; /* Always display by default */
   }

   /* Style for local currency values */
   .local-price, .local-capital {
      font-weight: 600;
      color: var(--brand-element-color);
   }
}

.terms-wrapper {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 2.14;
   .terms-links {
      .link {
         transition: all 0.3s ease;
         color: var(--white);
         &:hover {
            color: var(--brand-element-color)!important;
         }
      }
   }
}


/* Hero Section Styles */
.hero-section {
   position: relative;
   padding: 20px 0 80px;
   color: #ffffff;
   overflow: hidden;
   background-color: var(--vulcan-blue);
   @media screen and (min-width: 768px) {
      min-height: auto;
      /* min-height: calc(100vh - 119px - 90px); */
   }
   @media screen and (max-width: 1199px) {
      padding: 120px 0 50px;
   }
   @media screen and (min-width: 1200px) {
      padding: 60px 0 80px;
   }

   &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(17, 20, 30, 0.05);
      z-index: 1;
   }

   
   .hero-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
      background-position: center;
      background-size: cover;
   }
   .hero-content {
      position: relative;
      z-index: 2;
      max-width: 1480px;
      margin: 0 auto;
      .hero-title {
         font-size: 42px;
         font-weight: 700;
         margin-bottom: 13px;
         line-height: 1.19;
         color: #ffffff;
         font-family: var(--inter-font);

         @media (min-width: 768px) {
            font-size: 75px;
            font-weight: 700;
            margin-bottom: 20px;
         }
      }
      
      .hero-subtitle {
         font-size: 15px;
         color: #ffffff;
         margin-left: auto;
         margin-right: auto;
         font-weight: 400;
         line-height: 1.4;
         max-width: 260px;
         @media (min-width: 768px) {
            max-width: 650px;
            margin-bottom: 64px;
         }
      }
      
      .hero-features {
         margin-bottom: 28px;
         font-size: 14px;
         display: flex;
         justify-content: center;
         gap: 10px;
         @media (min-width: 768px) {
            font-size: 22px;
            margin-bottom: 4rem;
         }

         .feature-box {
            @media (max-width: 768px) {
               width: 320px;
               justify-content: center;
            }
         }

         .feature-item:nth-child(3) {
            .feature-box {
               @media (max-width: 768px) {
                  justify-content: center;
               }
            }
         }
      }
      .hero-buttons {
         display: flex;
         justify-content: center;
         gap: 20px;
         @media (max-width: 767px) {
            flex-direction: column;
            align-items: center;
         }
         .main-button {
            width: 100%;
            max-width: 280px;
        }
      }
      .hero-trustpilot {
         display: flex;
         justify-content: center;
         margin-top: 35px;
         @media (max-width: 767px) {
            margin-top: 60px;
         }
         a {
            display: inline-block;
            transition: opacity 0.3s ease, transform 0.3s ease;
            &:hover {
               opacity: 0.85;
               transform: translateY(-2px);
            }
         }
         img {
            max-width: 283px;
            height: auto;
            @media (max-width: 767px) {
               max-width: 283px;
            }
         }
      }
   }
}




.feature-box {
   background-color: var(--bg-gray-005);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 50px;
   padding: 10px 20px;
   display: inline-flex;
   align-items:center;
   justify-content: flex-start;
   text-align: left;
   gap: 8px;
   min-height: 35px;
   font-size: 14px;
   transition: all 0.3s ease;

   @media (min-width: 768px) {
      padding: 15px 25px;
      font-size: 16px;
      min-height: 80px;
      gap: 20px
   }
   @media (min-width: 1200px) {
      min-width: 350px;
      max-height: 80px;
   }
   @media (max-width: 767px) {
      width: 100%;
   }

   .holder {
      display: inline-flex;
      align-items:center;
      justify-content: flex-start;
      text-align: left;
      gap: 8px;
      @media (min-width: 768px) {
         gap: 20px;
      }
      span {
         font-size: 16px;
         @media (max-width: 767px) {
            flex: 1;
            line-height: 1.3;
            text-wrap: wrap;
            word-wrap: break-word;
            hyphens: auto;
            text-align: center;
            font-size: 14px;
         }
      }
      .feature-icon {
         width: 20px;
         height: 20px;
         flex-shrink: 0;
         @media (min-width: 768px) {
            width: 30px;
            height: 30px;
         }
      }
   }
}
@media (min-width: 1200px) {
   /* Main menu container */
   .menu-menu-1-container {
      position: relative;
      
      .menu{
         display: flex;
         align-items: center;
         gap: 40px;
         margin: 0;
         padding: 0;
         list-style: none;

         /* Main menu items */
         & > li {
               position: relative;
               
               /* Main menu links */
               & > a {
                  color: #FFF;
                  text-decoration: none;
                  font-size: 14px;
                  transition: color 0.3s ease;

                  &:hover {
                     color: var(--brand-element-color);
                  }
               }

               /* Arrow for items with submenu */
               &.menu-item-has-children > a {
                  position: relative;
                  padding-right: 24px; /* Make space for the arrow */

                  &::after {
                     content: '';
                     position: absolute;
                     right: 0;
                     top: 50%;
                     transform: translateY(-50%);
                     width: 24px;
                     height: 24px;
                     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%2320C63E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                     background-repeat: no-repeat;
                     background-position: center;
                     transition: transform 0.3s ease;
                  }
               }

               /* Rotate arrow on hover */
               &.menu-item-has-children:hover > a::after {
                  transform: translateY(-50%) rotate(180deg);
               }

               /* Submenu styling */
               & .sub-menu {
                  position: absolute;
                  top: 90%;
                  left: 0;
                  display: flex ;
                  flex-direction: column;
                  background: #12141E;
                  border-radius: 5px;
                  padding: 8px 0;
                  min-width: 200px;
                  opacity: 0;
                  visibility: hidden;
                  transform: translateY(10px);
                  transition: all 0.3s ease;
                  z-index: 100;
                  margin: 0;
                  list-style: none;

                  /* Submenu items */
                  li {
                     padding: 0;
                     margin: 0;

                     a {
                           display: block;
                           padding: 8px 16px 8px 8px;
                           color: #FFF;
                           text-decoration: none;
                           font-size: 14px;
                           transition: all 0.3s ease;

                        &:hover {
                              color: var(--brand-element-color)!important;
                        }
                     }
                  }
            }

               /* Show submenu on hover */
               &:hover {
                  & > a {
                     color: var(--brand-element-color)!important;
                  }
                  & > .sub-menu {
                     opacity: 1;
                     visibility: visible;
                     transform: translateY(0);
                  }
               }
         }

         /* Active/current menu item */
         .current-menu-item > a {
               color: var(--brand-element-color);
         }
      }
   }
}
@media (min-width: 1600px) {
   .menu-menu-1-container {
      margin-left: 100px;
   }
}

.tradingview-section {
   margin:72px 31px;
   @media screen and (min-width: 768px) {
      margin:0 auto;
   }

   .section-cards {
      display: flex;
      flex-direction: column;
      gap: 40px;
      @media screen and (min-width: 768px) {
         gap: 37px;
      }
   }

   .section-card {
      background: var(--bg-gray-005);
      border-radius: 10px;
      padding: 40px;
      @media screen and (max-width: 768px) {
         flex-direction: column-reverse;
         gap: 45px;
         padding: 37px 27px
      }
      .tradingview-title {
         color: var(--white);
         font-size: 23px;
         font-weight: 700;
         line-height: 1.3;
         padding-bottom: 30px;
         @media screen and (min-width: 768px) {
            padding-bottom: 10px;
         }
      }
      .tradingview-description {
         font-size: 15px;
         line-height: 1.875;
         color: var(--white);
         p {
            margin:0;
            font-weight: 400;
            strong {
               font-weight: 700;
            }
         }
      }
   }
}

.footer-holder {
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: var(--container-width)!important;
    margin: 0 auto;
    .footer-holder__top-items {
      display: flex;
      flex-direction: column;
      justify-content: space-between;     
      @media screen and (min-width: 768px) {
         align-items: flex-end;
         padding-top: 15px;
         flex-direction: row;
      }
      @media screen and (max-width: 767px) {
         gap: 20px;  
      }
      .left {
         display: flex;
         flex-direction: row;
         align-items: flex-start;
         justify-content: flex-start;
         gap: 130px;
         @media screen and (max-width: 768px) {
            flex-direction: column;       
            gap: 20px;  
         }
         .links {
            .menu {
               display: flex;
               align-items: center;
               justify-content: space-between;
               gap: 25px;
               @media screen and (max-width: 768px) {
                  flex-direction: column;
                  justify-content: flex-start;
                  align-items: flex-start;
                  gap:10px
               }
            }
         }
         .support {
            a {
               color: var(--white);
               text-decoration: none;
               font-size: 15px;
               font-weight: 700;
               transition: all 0.3s ease;
               &:hover {
                  color: var(--brand-element-color);
               }
            }
         }
      }
      .right {
         .title {
            color: var(--white);
            font-size: 15px;
         }
      }
    }
   .footer-policy-pc {
      .menu-menu-policy-container {
         .menu {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
         }
      }
   }
   .footer-holder__bottom-items {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding-top: 30px;
      padding-bottom: 20px;
      
      @media screen and (max-width: 768px) {
         padding-top: 20px;
         gap: 8px;
      }
      
      .trading-app-link {
         display: inline-block;
         transition: transform 0.3s ease, opacity 0.3s ease;
         
         &:hover {
            transform: translateY(-3px);
            opacity: 0.9;
         }
         
         &:active {
            transform: translateY(-1px);
         }
         
         .trading-app-icon {
            height: 54px;
            width: auto;
            display: block;
         }
      }
   }
}

.challenge-tables {
   max-width: 1920px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px 15px;
   overflow: hidden;

   @media (min-width: 576px) {
      padding: 30px;
   }

   @media (min-width: 992px) {
      padding-left: 70px; 
      padding-right: 70px; 
   }
   
   @media (min-width: 1400px) {
      padding: 40px 40px; 
   }
}

.tradingview-section {
   .tradingview-content {
      @media screen and (max-width: 768px) {
         padding-top: 20px;
      }
   }
}

/* Challenge Details Grid Layout */
.challenge-details-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin: 2rem auto;
    width: 100%;
    justify-content: center;

    &.challenge-details-grid---two-per-row {
      max-width: 1033px;
      .three-step-box {
         .arrow-image {
            @media screen and (min-width: 768px) {
               display: none;
            }
         }
      }
    }
}

/* Default styling for grid items - Desktop (above 1024px) */
.challenge-details-grid > * {
    flex:1; /* Default width for cards */
    max-width: 500px;
    @media screen and (min-width: 768px) {
      min-width: 340px;
    }
}


/* Tablet - Two cards per row (768px - 1024px) */
@media (max-width: 1024px) {
    .challenge-details-grid > * {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }
}

/* Mobile - Full width (up to 768px) */
@media (max-width: 768px) {
    .challenge-details-grid > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.practice-section {
   .block__header {
      max-width: 100%;
   }
}


/* Tooltip styling */
.tooltip-icon {
   position: relative;
   display: inline-block;
   margin-right: 4px;
   cursor: pointer;
   svg {
      width: 19px;
      height: 19px;
      vertical-align: middle;
      path, circle {
         transition: all 0.3s ease;
      }
      &:hover {
         path, circle {
            stroke: var(--brand-element-color);
         }
      }
   }
 }

 
 .tooltip-icon:hover .tooltip-img {
   filter: invert(75%) ;
 }
 
 .tooltip-content {
   visibility: hidden;
   width: 300px;
   background-color: #12141d;
   color: #fff;
   text-align: left;
   padding: 30px 25px 25px 25px;
   position: absolute;
   z-index: 1000;
   top: 50%;
   left: calc(100% + 15px); /* Position to the right */
   transform: translateY(-50%);
   opacity: 0;
   transition: opacity 0.3s;
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
   box-shadow: 0 0 10px rgba(0,0,0,0.2);

   @media screen and (max-width: 768px) {
      left: calc(100% + 15px);
      top: calc(100% + 8px);
      width: 240px;
   }
 }
 
 /* Only show tooltip on active state (click) - not on hover */
 .tooltip-icon.active .tooltip-content {
   visibility: visible;
   opacity: 1;
 }

 .tooltip-content::before {
   content: "";
   position: absolute;
   top: 50%;
   right: 100%; /* Position at the left side of tooltip */
   margin-top: -8px;
   border-width: 8px;
   border-style: solid;
   border-color: transparent #12141d transparent transparent;
 }
 


.tooltip-content .close-icon {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 26px;
   height: 26px;
   cursor: pointer;
   stroke: #fff;
   transition: fill 0.3s ease;
}

.tooltip-content .close-icon:hover {
   stroke: var(--brand-element-color);
}


.challenges-holder-selection {
   .form-subheading {
      text-align: center;
   }
}
.checkout-header {
   padding-bottom: 0;
   @media screen and (max-width: 1440px) {
      padding-top: 120px;
   }
   .subtitle {
      color: var(--white);
      font-size: 20px;
      font-weight: 400;
      line-height: 1.5;
      margin-bottom: 28px;
   }
   .checkout-header-summary {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 20px;
      @media screen and (max-width: 1365px) {
         flex-direction: column;
         align-items: center;
      }
      .step-indicator {
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         .step-indicator__item {
            padding: 0 15px;
            border-radius: 40px;
            border: 1px solid rgba(242, 161, 40, 0.00);
            height: 40px;
            color: var(--black);
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            background: var(--brand-element-color);
            display: none; 
            &.active {
               display: flex;
               align-items: center;
               justify-content: center;
            }
         }

      }
      .indicator-holder {
         .indicator {
					  @media screen and (min-width: 768px) {
							height: 40px;
							padding: 0 25px;
							font-size: 18px;
							font-weight: 600;
              padding: 0 50px;
						}
						@media screen and (max-width: 768px) {
							font-size: 20px;
							text-align: center;
							max-width: 100%;
							width: 100%;
							height: auto;
							padding: 10px;
							border-radius: 25px;
						}
         }
      }
   }
}
.checkout-wrap {
   border-radius: 10px;
   background: #2C2E37;
   padding: 33px 10px;
   max-width: 1200px;
   margin: 0 auto;
   @media screen and (min-width: 1024px) {
      padding: 27px 30px 82px 30px;
   }
   @media screen and (min-width: 1200px) {
      padding: 27px 74px 82px 74px;
   }
   .form-title {
      color: var(--white);
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 30px;
   }
   .checkout-form-minimal {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 20px;
      @media screen and (min-width: 1024px) {
         flex-direction: row;
         justify-content: space-between;
      }
      @media screen and (min-width: 1024px) {
         gap: 40px;
      }
      @media screen and (min-width: 1200px) {
         gap: 80px;
      }
      .checkout-form-minimal__left {
         width: 100%;
      }
      .checkout-form-minimal__right {
         width: 100%;
         .select-payment-title {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 20px;
         }
         .terms-holder {
            .terms-text {
               font-size: 15px;
               font-style: normal;
               font-weight: 100;
               a{
                  text-decoration: none;
                  font-weight: 700;
                  transition: all 0.3s ease;
                  &:hover {
                     color: var(--brand-element-color);
                  }
               }
            }
         }
         .total-payment-holder {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding: 40px 0 10px 0;
            border-bottom: 1px solid var(--white);
            .payment-title {
               font-size: 16px;
               font-weight: 700;
               color: var(--white);
            }
            .total-wrap {
               display: flex;
               align-items: flex-start;
               justify-content: center;
               gap: 10px;
               .amount-payment {
                  font-size: 20px;
                  color: var(--white);
                  font-weight: 700;
                  margin: 0;
                  padding: 0;
                  line-height: 1.25;
               }
               .info-converted {
                  font-size: 16px;
                  font-style: normal;
                  font-weight: 400;
                  margin: 0;
                  padding: 0;
               }
            }
         }
         .btn-holder {
            .main-button {
               margin: 35px auto 0 auto;
               min-width: 142px;
               width: max-content;
               padding: 0 28px;
            }
         }
         .country-selection {
            margin-top: 25px;
            i {
               font-size: 18px;
            }
            .btn {
               color: var(--white);
               text-align: left;
               display: flex;
               gap: 10px;
               align-items: flex-start;
               justify-content: flex-start;
               padding: 8px;

               &:hover {
                  border-color: var(--white);
               }
            }
         }
      }
   }
}

/* --- Hero Animation --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  opacity: 0; /* Start hidden */
  animation: fadeInUp 0.6s ease-out forwards;
  animation-delay: var(--animation-delay, 0s); /* Use CSS variable for delay */
}

/* Assign delays using data attribute (could also use nth-child selectors) */
[data-delay="0.1s"] { --animation-delay: 0.1s; }
[data-delay="0.3s"] { --animation-delay: 0.3s; }
[data-delay="0.5s"] { --animation-delay: 0.5s; } /* Increased delays for main elements */
[data-delay="0.6s"] { --animation-delay: 0.6s; } /* Feature 2 */
[data-delay="0.7s"] { --animation-delay: 0.7s; } /* Feature 3 */
[data-delay="0.9s"] { --animation-delay: 0.9s; } /* Buttons */
 /* --- End Hero Animation --- */

/* --- Scroll Animation --- */
@keyframes scrollFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  opacity: 0; 
  transform: translateY(-20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--scroll-animation-delay, 0s); /* Use CSS variable for delay */
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* If you prefer CSS animation over transition when visible: */
  /* animation: scrollFadeDown 0.6s ease-out forwards; */
  /* animation-delay: var(--scroll-animation-delay, 0s); */
}
/* --- End Scroll Animation --- */
.contact-page-holder{
   max-width: var(--container-width); 
   padding: 0 20px;
   margin: 0 auto; 
   padding-top: 140px;
   @media screen and (min-width: 1200px) {
      padding-top: 50px;
   }
}
.contacts{
   .contacts-header {
      h1 {
         font-size: 36px;
         font-style: normal;
         font-weight: 600;
         margin-bottom: 20px;
         @media screen and (min-width: 768px) {
            font-size: 50px;
         }
         @media screen and (max-:768px) {
            margin-bottom: 30px;
         }
      }
   }
   .contacts-wrap {
      display: grid;
      grid-template-columns: 1fr;
      gap: 20px;
      @media screen and (min-width:768px) {
         grid-template-columns: 1fr 1fr;
      }
      @media screen and (min-width: 1200px) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
      }
      .contacts-card {
         border-radius: 10px;
         background: rgba(217, 217, 217, 0.10);
         display: flex;
         flex-direction: column;
         gap: 20px;
         padding: 20px;
         text-decoration: none;
         transition: all 0.3s ease;
         border: 1px solid rgba(217, 217, 217, 0.10);
         &:hover {
            border: 1px solid var(--brand-element-color);
         }
         .contacts-card__icon {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 20px;
            img {
               width: 32px;
               height: 32px;
            }
            .title {
               font-size: 18px;
               font-weight: 600;
               color: var(--white);
               margin: 0;
               padding: 0;
            }
         }
         .contacts-card__content {
            .description {
               color: var(--white);
               font-size: 14px;
               font-weight: 400;
               line-height: 1.5;
               transition: all 0.3s ease;
               word-wrap: break-word;        
               overflow-wrap: break-word;    
               word-break: break-all;        
               white-space: normal;         
               text-decoration: none;
               &:hover {
                  color: var(--brand-element-color);
               }
            }
         }
      }
   }
   .contact-additional {
      .description-msg {
         font-size: 20px;
         font-style: normal;
         font-weight: 400;
         color: var(--white);
         margin-top: 20px;
      }
   }
}
.map {
   margin-top: 50px;
   display: flex;
   gap: 20px;
   border-radius: 10px;
   overflow: hidden;
   background: rgba(217, 217, 217, 0.10);
   flex-direction: column;
   @media screen and (min-width: 768px) {
      flex-direction: row;
   }
   .map_details {
      flex: 1;
      padding: 20px;
      @media screen and (min-width: 768px) {
         padding: 50px;
      }
      h2 {
         color: var(--white);
         font-size: 33px;
         font-weight: 600;
         margin-bottom: 35px;
      }
      .info-part {
         .title {
            color: var(--white);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
         }
         .line { 
            color: var(--white);
            font-size: 18px;
            font-weight: 400;
            margin:0;
            padding:0
         }
         &:last-child {
            margin-top: 35px;
         }
      }
   }
   .map_card {
      flex: 0 1 50%;
      display: flex;
      iframe {
         width: 100%;
         margin: 0;
         padding: 0;
      }
   }
}
.social-media {
   margin-top: 50px;
   .social-media__header {
      h2 {
         color: var(--white);
         font-size: 36px;
         font-style: normal;
         font-weight: 600;
         margin-bottom: 20px;
         @media screen and (min-width: 768px) {
            font-size: 50px;
         }
         @media screen and (max-:768px) {
            max-width: 250px;
            margin-bottom: 30px;
         }
      }
   }
   .social-media__wrap {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 20px;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      @media screen and (max-width: 768px) {
         flex-direction: column;
      }
      .social-media-card {
         text-decoration: none;
         border-radius: 10px;
         background: rgba(217, 217, 217, 0.10);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 20px 16px 16px 16px;
         
         min-width: 140px;
         transition: all 0.3s ease;
         border: 1px solid rgba(217, 217, 217, 0.10);
         @media screen and (max-width: 768px) {
            flex:1;
            width: 100%;
         }
         &:hover {
            border: 1px solid var(--brand-element-color);
         }
         .holder{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 25px;
            @media screen and (max-width: 768px) {
               flex:1;
               width: 100%;
               flex-direction: row;
               justify-content: flex-start;
            }
            img {
               width: 45px;
               height: 45px;
            }
            .subscribe-text {
               color: var(--white);
               font-size: 18px;
               font-weight: 600;
               margin: 0;
               padding: 0;
            }
         }
      }
   }
}
.contact-form-main {
   margin: 50px 0;
   .contact-form-main__header {
      h2 {
         font-size: 36px;
         font-style: normal;
         font-weight: 600;
         margin-bottom: 20px;
         @media screen and (min-width: 768px) {
            font-size: 50px;
            margin-bottom: 30px;
         }
      }
   }
   .contact-form-main__holder {
      border-radius: 10px;
      background: #2C2E37;
      padding: 20px;
      @media screen and (min-width: 768px) {
         padding: 30px;
      }
      .inner-form-title {
         font-size: 20px;
         font-style: normal;
         font-weight: 600;
         margin-bottom: 20px;
         @media screen and (min-width: 768px) {
            font-size: 33px;
         }
      }
      .form-holder {
         .kickstage-form--contact {
            display: flex;
            flex-direction: column;
            gap: 20px;
            @media screen and (min-width: 768px) {
               flex-direction: row;
               gap: 50px;
            }
            .left-side {
               flex: 1;
            }
            .right-side {
               flex: 1;
               .submit-request {
                  height: 48px;
               }
               .terms-msg-validation {
                  &.show {
                     margin-bottom: 10px;
                  }
               }
            }
         }
      }
   }
}

/* --------------------- REFERRAL --------------------------- */

.block--ref-baseline {
   max-width: 1196px;

   @media screen and (min-width: 1400px) {
      max-width: 1346px;
   } 
}

.referral-description,
.referral-description > p {
   font-size: 15px;
   line-height: 25px;
   margin-bottom: 0;
}

.referral-banner {
   max-width: 880px;
   margin-left: auto;
   margin-right: auto;
   padding: 110px 15px 40px;
   
   @media screen and (min-width: 992px) {
      padding-top: 10px;
      padding-bottom: 100px;
   }
}

.referral-banner__title,
.referral-cta__title {
   font-size: 37px;
   font-weight: 700;
   line-height: 47px;
   text-align: center;
   max-width: 420px;

   @media screen and (max-width: 1024px) {
      margin:0 auto;
   }

   @media screen and (min-width: 992px) {
      font-size: 45px;
      line-height: 65px;
      text-align: left;
   }
}

.referral-banner__description {
   margin-top: 10px;
   margin-bottom: 22px;
   text-align: center;

   @media screen and (min-width: 992px) {
      text-align: left;
   }
}

.referral-banner__image {
   width: 225px;
   margin: 10px auto 15px;

   @media screen and (min-width: 992px) {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      margin: 0;

      > img {
         transform: translateY(-15px);
      }
   }
}

.referral-banner__button {
   display: flex;
   justify-content: center;

   @media screen and (min-width: 992px) {
      justify-self: start;
   }
}

.block--ref-howto {
   text-align: center;
   max-width: 1152px;

   @media screen and (min-width: 1400px) {
      max-width: 1302px;
   } 
}

.referral-howto {

   @media screen and (min-width: 586px) {
      background-color: var(--bg-gray-005);
   }
}

.referral-step {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 150px;
   margin-bottom: 40px;
   padding: 0 40px;
   border-radius: 10px;
   background-color: var(--bg-gray-005);

   @media screen and (min-width: 992px) {
      height: 175px;
      margin-bottom: 60px;
   }
}

.referral-step__number {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 134px;
   height: 33px;
   color: var(--black);
   background-color: var(--brand-element-color);
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 60px;
   font-size: 20px;
   font-weight: 600;
   line-height: 24px;

   @media screen and (min-width: 992px) {
      width: 142px;
   }
}

.howmuch-table {
   border-radius: 10px;
   overflow: hidden;
   background-color: var(--bg-gray-005);
   border: 2px solid var(--green-border);
   padding: 10px 10px 20px;

   @media screen and (min-width: 586px) {
      padding: 15px 20px 30px;
   }

   @media screen and (min-width: 992px) {
      padding: 20px 45px 45px;
   }
}

.howmuch-table__row {
   display: flex;
   width: 100%;
   gap: 9px;
}

.howmuch-table__cell {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 45px;
   width: 100%;
}

.howmuch-table__cell--header {
   font-size: 15px;
   font-weight: 700;
   line-height: 25px;
   color: var(--white);

   @media screen and (min-width: 992px) {
      font-size: 20px;
   }
}

.howmuch-table__cell--odd,
.howmuch-table__cell--even {
   font-size: 15px;
   line-height: 20px;
}

.howmuch-table__cell--odd {
   background-color: var(--bg-gray-005);
}

.howmuch-table__cell--even {
   background-color: var(--bg-gray-010);
}

.partner-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   height: 280px;
   margin-bottom: 20px;
   padding: 12px;
   border-radius: 10px;
   background-color: var(--bg-gray-010);

   @media screen and (min-width: 586px) {
      padding: 24px;
   }

   @media screen and (min-width: 768px) {
      height: 334px;
   }

   @media screen and (min-width: 1200px) {
      gap: 32px;
      padding: 32px 70px 46px;
   }
}

.partner-tile__title {
   font-size: 23px;
   font-weight: 700;
   line-height: 30px;
}

.referral-cta {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
   overflow: hidden;
   border-radius: 20px;
   padding: 48px 10px 20px;

   @media screen and (min-width: 768px) {
      flex-direction: row;
      justify-content: space-between;
      padding: 32px 0 32px 50px;
      min-height: 391px;
   }

   @media screen and (min-width: 1200px) {
      padding: 24px 0 24px 70px;
   }
}

.referral-cta__content {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   gap: 24px;
   z-index: 2;

   @media screen and (min-width: 768px) {
      align-items: flex-start;
      flex-basis: 50%;
      gap: 0;
      text-align: left;
   }

   @media screen and (min-width: 1200px) {
      flex-basis: 40%;
   }
}

.referral-cta__image {
   display: flex;
   justify-content: center;
   z-index: 2;
   
   @media screen and (min-width: 768px) {
      flex-basis: 50%;
   }

   @media screen and (min-width: 1200px) {
      flex-basis: 60%;
   }

   img { 
      width: 226px;

      @media screen and (min-width: 1200px) {
         width: 238px;
      }
   }
}


.text-and-icon-card {
   border-radius: 10px;
   border: 1px solid var(--brand-border-color);
   padding: 35px 28px;
   @media screen and (min-width: 768px) {
      min-height: 178px;
   }
   display: flex;
   align-items: center;
   justify-content: space-between;
   .text-and-icon-card__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      width: 100%;
      .title {
         font-size: 20px;
         font-weight: 600;
         line-height: 1.5;
         margin: 0;
         max-width: 170px;
      }
      .icon-holder {
         .icon {
            width: auto;
            height: 58px;
         }
      }
   }
}

.location-or-workplace-card {
   border-radius: 10px;
   background: rgba(217, 217, 217, 0.1);
   padding: 35px 28px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   @media screen and (min-width: 768px) {
     min-height: 185px;
     padding: 35px 60px;
   }
 
   .location-or-workplace-card__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     width: 100%;
     .content {
       display: flex;
       flex-direction: column;
       gap: 10px;
       flex: 2;
       .badge {
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 40px;
         border: 1px solid var(--brand-element-color);
         height: 38px;
         background: var(--brand-element-color);
         color: white;
         font-family: "Open Sans";
         font-size: 18px;
         font-style: normal;
         font-weight: 400;
         max-width: max-content;
         padding: 0 20px;
       }
       .title {
         font-size: 30px;
         font-style: normal;
         font-weight: 700;
         margin: 0;
         padding: 0;
       }
       .subtitle {
         font-size: 18px;
         font-style: normal;
       }
     }
     .icon-holder {
       flex: 1;
       display: flex;
       align-items: center;
       justify-content: center;
       .icon {
         width: auto;
         height: 70px;
       }
     }
   }
 }

:where(.wp-block-columns.is-layout-flex) {
   gap: 20px;
}
:where(.wp-block-columns) {
   margin-bottom: 20px;
}

.apply-now-holder {
   margin: 0 0 50px 0;
   @media screen and (max-width: 768px) {
      margin-top: -90px;
   }
   .wrap {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      @media screen and (max-width: 768px) {
         align-items: center;
      }
      .alternative-text {
         font-size: 20px;
         font-style: normal;
         font-weight: 600;
         color:var(--white);
         transition: color 0.3s ease;
         a {
            color: var(--white);
            transition: color 0.3s ease;
            &:hover {
               color: var(--brand-element-color);
            }
         }
         @media screen and (max-width: 768px) {
            margin: 0 auto;
            text-align: center;
         }
      }
   }
}

.test-our-product-section {
   position: relative;
   padding: 50px 0;
   overflow: hidden;
   border-radius: 20px;
   margin-bottom: 100px;

   .background-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      .bg-image {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
      }
   }
   .wrap {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:has(.main-button:hover) {
         .smartphone-image {
            transform: perspective(1000px) rotateY(-10deg);
         }
      }
      @media screen and (max-width: 768px) {
         flex-direction: column;
         text-align: center;
      }
      @media screen and (min-width: 768px) {
         padding: 0 20px 0 70px;
      }
      .content-side {
         flex: 0 1 50%;
         color: #ffffff;
         @media screen and (max-width: 768px) {
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            flex-direction: column;
         }
         h2 {
            font-size: 50px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #ffffff;
         }
         p {
            font-size: 18px;
            margin-bottom: 23px;
            color: #ffffff;
         }
      }
      .image-side {
         flex: 0 1 45%;
         display: flex;
         justify-content: flex-end;
         @media screen and (max-width: 768px) {
            justify-content: center;
            flex: 0 1 100%;
         }

         .smartphone-image {
            max-width: 100%;
            height: auto;
            transform: perspective(1000px) rotateY(0deg);
            transition: transform 0.3s ease;
            @media screen and (max-width: 767px) {
               max-width: 80%;
            }
            @media screen and (min-width: 768px) {
               min-height: 390px;
            }
         }
      }
   }
}

.careers-page-holder {
   padding-bottom: 100px;
   @media screen and (min-width: 768px) {
      padding-bottom: 200px;
   }
   .filters {
      display: flex;
      align-items: center;
      gap: 1rem;
      @media screen and (max-width: 768px) {
         margin-top: -100px;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 1rem;
         max-width: 100%;
      }
      @media screen and (max-width: 768px) {
         flex-wrap: wrap
      }
      .filter-select {
         border-radius: 5px;
         border: 1px solid rgba(255, 255, 255, 0.00);
         transition: all 0.3s ease;
         color: #FFF;
         font-size: 15px;
         font-weight: 600;
         background: rgba(217, 217, 217, 0.25);
         padding: 10px 30px 10px 20px;
         -webkit-appearance: none;
         -moz-appearance: none;
         appearance: none;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M12 1.5L6.5 7L1 1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
         background-repeat: no-repeat;
         background-position: right 10px center;
         background-size: 13px 8px;
         @media screen and (max-width: 768px) {
            padding: 10px 8px;
         }

         option {
            background: rgba(217, 217, 217, 0.25);
            color: #FFF;
            font-size: 15px;
            font-weight: 600;
         }
         
         &:focus,
         &:hover,
         &:active,
         &.active {
            border: 1px solid var(--brand-element-color);
            outline: none;
         }
      }
      .clear-filters-btn {
         border-radius: 5px;
         border: 1px solid rgba(255, 255, 255, 0.50);
         background: rgba(217, 217, 217, 0.00);
         width: 73px;
         height: 41px;
         color: var(--white);
         text-align: center;
         font-size: 15px;  
         transition: all 0.3s ease;
         @media screen and (max-width: 768px) {
            width: 100%;
         }
         &:hover {
            background: var(--brand-element-color);
            border-color: var(--brand-element-color);
         }
      }
   }
   .jobs-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-top: 25px;
      .filter-msg {
         margin-bottom: 350px;
      }
      .job-post {
         display: flex;
         flex-direction: column;
         gap: 20px;
         padding: 30px;
         border-radius: 5px;
         border: 1px solid rgba(0, 0, 0, 0.00);
         background: rgba(217, 217, 217, 0.10);
         @media screen and (min-width: 768px) {
            min-height: 173px;
         }
         .wrap {
            display: flex;
            flex-direction: column;
            gap: 20px;
            @media screen and (max-width: 768px) {
               gap: 0;
            }
            .details {
               .section {
                  display: flex;
                  align-items: center;
                  gap: 8px;
                  .icon {
                     width: 30px;
                  }
                  .department {     
                     font-size: 18px;
                     font-weight: 600;
                     color: var(--brand-element-color);
                     @media screen and (max-width: 768px) {
                        font-size: 15px;
                     }
                  }
               }
               .job-title {
                  font-size: 24px;
                  font-style: normal;
                  font-weight: 600;
                  line-height: 1.5; 
                  text-transform: capitalize;
                  margin: 20px 0;

                  @media screen and (max-width: 768px) {
                     font-size: 18px;
                  }
               }
            }
            .bottom-holder {
               display: flex;
               align-items: center;
               justify-content: space-between;
               @media screen and (max-width: 768px) {
                  flex-direction: column-reverse;
                  align-items: flex-start;
                  justify-content: flex-start;
                  gap: 20px;
               }
               .btn {
                  background: transparent;
                  color: var(--white);
                  height: 40px;
                  border: 1px solid var(--white);
                  padding: 10px 20px;
                  border-radius: 5px;
                  font-size: 18px;
                  font-weight: 600;
                  transition: all 0.3s ease;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  &:hover {   
                     background: var(--brand-element-color);
                     border-color: var(--brand-element-color);
                  }

                  @media screen and (max-width: 768px) {
                     font-size: 14px;
                     height: 30px;
                  }
               }
               .additional-details {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  .location {
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     gap: 14px;

                     .work-type {
                        font-size: 18px;
                        font-weight: 600;
                        color: var(--white);
                        @media screen and (max-width: 768px) {
                           font-size: 14px;
                        }
                     }
                     .country-info {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 10px;
                        .pin-icon{
                           width: 11px;
                           height: 15px;
                        }
                        .country-name {
                           font-size: 18px;
                           font-weight: 600;
                           color: var(--white);
                           line-height: 1;
                           @media screen and (max-width: 768px) {
                              font-size: 14px;
                           }
                        }
                        .country-flag {
                           display: inline-block;
                           .country-flag-img {
                              width: 25px;
                              height: 25px;
                              min-width: 25px;
                              min-height: 25px;
                              border-radius: 50%;
                              object-fit: cover;
                              box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                          }
                       }
                     }
                  }
               }
            }
         }
      }
   }
}



.filter-select option {
    display: flex;
    align-items: center;
    padding: 5px;
}

.filter-select option .country-flag-img {
    margin-right: 8px;
    vertical-align: middle;
}

/* For the select dropdown, we need to style the flag images */
.filter-select {
    position: relative;
}

.filter-select option {
    padding-left: 35px;
    position: relative;
}

.filter-select option .country-flag-img {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}

/* Custom file upload wrapper */
.custom-file-upload-wrapper {
   position: relative;
   width: 100%;
   position: relative; 
   width: 100%;
   margin-top: 5px;
   .custom-file-upload-wrapper input[type="file"] {
     opacity: 0;
     position: absolute;
     left: 0; top: 0;
     width: 100%; height: 100%;
     z-index: 2;
     cursor: pointer;
   }
   
   .custom-file-label {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     min-height: 48px;
     background: transparent;
     border: 1px solid var(--white);
     border-radius: 0.25rem;
     color: #fff;
     font-weight: 500;
     pointer-events: none;
     z-index: 1;
     font-size: 14px;
   }
 }

 #jobApplicationModal, #eventBookingModal {
   .modal-dialog {
      max-width: 480px!important;
      margin: 0 auto;
      .modal-content {
         .title {
            font-size: 24px;
            color: var(--white);
            margin-bottom: 20px;
         }
         .logo-holder {
            .logo {
               width: 100px;
               height: 32px;
               max-width: 100px;
            }
         }
      }
      .modal-body {
         .kickstage-form {
            .submit-request {
               margin: 0 auto;
               max-width: max-content;
               padding-left: 20px;
               padding-right: 20px;
            }
         }
      }
   }
 }

#languageCountryModal{
   .modal-dialog {
      max-width: 462px!important;
     .modal-content {
        background-color: var(--dark-blue);
        border: 1px solid var(--brand-element-color);
        .modal-header {
           border-bottom: none;
           position: relative;
					 @media screen and (max-width: 767px) {
						margin-top: 10px;
					 }
           .modal-title {
              font-size: 18px;
              font-weight: 700;
              text-transform: capitalize;
              line-height: 1.3;
              color: var(--white);
              max-width: 330px;
              @media screen and (min-width: 768px) {
								font-size: 23px;
              }
           }
           .modal-close {
              position: absolute;
              right: 0;
              top: 0;
              z-index: 1;
              transition: all 0.3s ease;
              svg {
                 path {
                    transition: all 0.3s ease;
                 }
              }
              &:hover {
                 svg {
                    path {
                       fill: var(--brand-element-color);
                    }
                 }
              }
           }
        }
        .modal-footer {
         .main-button {
            max-width: 150px;
         }
      }
     }
   }
}


/*--------------------------------------------------------------
# Custom Blocks
--------------------------------------------------------------*/

/* Checkmark List Block
--------------------------------------------- */
.checkmark-list {
	margin-bottom: 1.5em;
}

.checkmark-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
   .checkmark-list__item {
      display: flex;
      align-items: center;
      margin-bottom: 0.75em;
      padding: 0;
      &:last-child {
         margin-bottom: 0;
      }
      .checkmark-emoji {
         font-size: 1.2em;
         margin-right: 0.75em;
         margin-top: 0.1em;
         flex-shrink: 0;
      }
      
      .item-text {
         flex: 1;
         line-height: 1.5;
      }
   }
}

.checkmark-list__placeholder {
	padding: 1em;
	background-color: #f8f9fa;
	border: 1px dashed #dee2e6;
	border-radius: 4px;
	text-align: center;
	color: #6c757d;
}

/* Introsection Block
--------------------------------------------- */
.introsection {
   padding: 24px;
   border-radius: 10px;
   background: #272b34;
   @media screen and (min-width: 768px) {
      padding: 64px 34px;
   }
   .introsection__inner {
      display: flex;
      align-items: center;
      gap: 48px;
      flex-direction: column;
      @media screen and (min-width: 768px) {
         flex-direction: row;
         gap: 96px;
      }
   }
   .introsection__image {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      @media screen and (min-width: 768px) {
         flex: 0 1 45%;
      }
      img {
         max-width: 100%;
         height: auto;
         @media screen and (min-width: 768px) {
            max-width: 348px;
         }
      }
   }
   
   .introsection__content {
      flex: 1;
      @media screen and (min-width: 768px) {
         flex: 0 1 55%;
      }
      .introsection__title {
         font-family: Inter;
         font-size: 37px;
         font-style: normal;
         font-weight: 700;
         line-height: 40px;
         margin-bottom: 24px;
         color: #FFF;
         @media screen and (min-width: 768px) {
            font-size: 50px;
            line-height: 1.2;
         }
      }
      
      .introsection__description {
         color: #FFF;
         font-family: Inter;
         font-size: 15px;
         font-style: normal;
         font-weight: 400;
         line-height: 1.66;
         margin: 0;
      }
   }
}

/* Section with Image Block
--------------------------------------------- */
.section-with-image {
   @media screen and (min-width: 768px) {
      padding: 0 34px;
   }
   .section-with-image__inner {
      display: flex;
      flex-direction: column;
      gap: 50px;
      @media screen and (min-width: 980px) {
         flex-direction: row;
         align-items: center;
         gap: 80px;
      }

      .section-with-image__image {
         flex-shrink: 0;
         img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            width: 100%;
         }
      }
      
      .section-with-image__content {
         flex: 1;
         .section-with-image__title {
            font-family: Inter;
            font-size: 37px;
            font-style: normal;
            font-weight: 700;
            line-height: 40px;
            margin-bottom: 24px;
            color: #FFF;
            @media screen and (min-width: 768px) {
               font-size: 50px;
               line-height: 1.2;
            }
         }
         
         .section-with-image__description {
            color: #FFF;
            font-family: Inter;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.66;
            margin: 0;
         }
      }
   }
}


/* Desktop Layout */
@media screen and (min-width: 980px) {
	/* Right orientation (default) - Content left, Image right */
	.section-with-image--right .section-with-image__inner {
		flex-direction: row-reverse;
	}
	
	/* Left orientation - Image left, Content right */
	.section-with-image--left .section-with-image__inner {
		flex-direction: row;
	}
	
	.section-with-image__image {
		max-width: 50%;
	}
	
	.section-with-image__content {
		max-width: 50%;
	}
}

/* Mission and Vision Block
--------------------------------------------- */
.mission-and-vision {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
   overflow: hidden;
   .mission-and-vision__container {
      background: radial-gradient(52.45% 146.45% at 51.05% -2.27%, #3A3D49 13%, #12141E 87%);
      padding: 40px 20px;
      @media screen and (min-width: 768px) {
         padding: 60px 20px;
      }
      display: flex;
      align-items: center;
      justify-content: center;
      .mission-and-vision__grid {
         display: grid;
         grid-template-columns: 1fr;
         gap: 24px;
         width: 100%;
         max-width: 1172px;
         @media screen and (min-width: 768px) {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
         }
         .mission-and-vision__item {
            padding: 43px 34px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.10);
   
            .mission-and-vision__icon {
               margin-bottom: 36px;
               img {
                  max-width: 130px;
                  height: auto;
               }
            }
            
            
            .mission-and-vision__title {
               font-family: Inter;
               font-size: 45px;
               font-style: normal;
               font-weight: 700;
               line-height: 1.2;
               margin-bottom: 24px;
               color: #FFF;
               @media screen and (min-width: 768px) {
                  font-size: 50px;
                  margin-bottom: 30px;
               }
            }
            
            .mission-and-vision__description {
               color: #FFF;
               font-family: Inter;
               font-size: 15px;
               font-style: normal;
               font-weight: 400;
               line-height: 25px; /* 166.667% */
               margin: 0;
               p {
                  margin: 0 0 1em 0;
               }
               
               p:last-child {
                  margin-bottom: 0;
               }
            }
         }
      }
   }
}






.mission-and-vision__placeholder {
	text-align: center;
	color: #cccccc;
	font-style: italic;
}

/* Desktop Layout */
@media screen and (min-width: 768px) {
	.mission-and-vision__container {
		padding: 64px 40px;
	}

	
	.mission-and-vision__title {
		font-size: 50px;
		line-height: 1.2;
	}
	
	.mission-and-vision__icon img {
		max-width: 80px;
	}
}

.spacer-block {
   height: 50px;
   @media screen and (min-width: 768px) {
      height: 95px;
   }
}

/* Discount Code Section Styles */

.green-price {
   color: var(--brand-element-color);
}
.discount-code-input:disabled {
   background: rgb(54 56 64 )!important;
   color: rgba(255, 255, 255, 0.6);
   cursor: not-allowed;
}

.apply-discount-btn {
   max-width: max-content;
   padding: 0 10px;
   height: 46px;
   white-space: nowrap;
   display: flex;
   gap: 5px;
   align-items: center;
   justify-content: flex-start;
   background-color: var(--brand-text-color)!important;
   color: var(--black)!important;
   opacity: 1!important;
   &:hover {
      background-color: var(--brand-text-color)!important;
      color: var(--black)!important;
   }
}


.discount-success-message {
   margin-top: 0.5rem;
}

.discount-applied-banner {
   border: 1px solid #757472;
   background: rgba(77, 78, 82, 0.30);
   border-radius: 8px;
   padding: 1rem;
   color: white;
}

.discount-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 5px;
   color: var(--brand-element-color);
   .header-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      .discount-title {
         font-weight: 500;
         font-size: 14px;
      }
   }
}


.discount-pricing {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-size: 16px;
   font-weight: 600;
   .original-price {
     text-decoration: line-through;
     opacity: 0.4;
     font-size: 16px;
   }
   
   .discounted-price {
     color: white;
     font-size: 16px;
     font-size: 700;
   }
   
   .savings-amount {
     color: #20C63E;
     font-size: 16px;
   }
}


/* Error styling for discount code */
.box-validation.error .form-control {
   border-color: #dc3545 !important;
   box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

.box-validation.error .text-validation {
   color: #dc3545;
   display: block !important;
}

/* Strikethrough price styling */
.checkout-form-minimal .amount-payment span span:first-child {
   font-size: 20px;
}

.checkout-form-minimal .amount-payment span span:last-child {
   font-size: 20px;
}

.event-page-holder {
   max-width: 1198px;
   margin: 0 auto;
   @media screen and (max-width: 1024px) {
      padding: 0 20px;
   }
   .event-title {
      max-width: 1000px;
      margin: 0 auto;
   }
}
/* Event Details Styling */
.event-details-section {
   margin: 40px 0;
   background: var(--bg-gray-005);
   padding: 20px;
   border-radius: 10px;
   @media (min-width: 768px) {
      padding: 65px 45px;
   }
   
   .event-intro-wrapper {
      display: flex;
      gap: 40px;
      margin-bottom: 40px;
      
      @media (max-width: 768px) {
         flex-direction: column;
         gap: 20px;
      }
      
      .event-description {
         flex: 1;
         
         p {
            font-size: 18px;
            line-height: 1.6;
            color: var(--white);
            margin: 0;
         }
      }
      
      .event-image {
         flex: 1;
         
         img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            object-fit: cover;
         }
      }
   }
   
   .event-info-boxes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      
      @media (max-width: 768px) {
         grid-template-columns: 1fr;
         gap: 20px;
      }
      
      .event-info-box {
         padding: 30px 20px;
         border-radius: 5px;
         background: #0F141D;
         box-shadow: 0 2px 7px 0 rgba(32, 198, 62, 0.50);
         border-bottom: 4px solid;
         border-image: linear-gradient(90deg, #FFFFFF1A 10%, #20C63E, #FFFFFF1A) 1;
         display: flex;
         align-items: flex-start;
         gap: 15px;
         transition: transform 0.3s ease;
         
         &:hover {
            transform: translateY(-2px);
         }
         
         .box-icon {
            flex-shrink: 0;
            
            img {
               width: 42px;
               height: 42px;
               filter: brightness(0) saturate(100%) invert(75%) sepia(56%) saturate(2454%) hue-rotate(86deg) brightness(118%) contrast(119%);
            }
         }
         
         .box-content {
            flex: 1;
            
            h3 {
               font-size: 18px;
               font-weight: 600;
               color: var(--brand-element-color);
               margin: 0 0 8px 0;
               line-height: 1.2;
            }
            
            p {
               font-size: 16px;
               color: var(--white);
               margin: 0;
               line-height: 1.4;
               
               .venue {
                  font-weight: 600;
               }
               
               .location {
                  font-weight: 400;
               }
            }
         }
      }
   }
}

/* Why Attend Block Styling */
.why-attend {
   
   .why-attend__container {
      max-width: var(--container-width);
      margin: 0 auto;
      
      @media screen and (min-width: 768px) {
         padding: 0 40px;
      }
   }
   
   .why-attend__title {
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 40px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin: 0 0 40px 0;
      }
   }
   
   .why-attend__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      
      @media screen and (min-width: 768px) {
         grid-template-columns: 1fr 1fr 1fr 1fr;
      }
   }
   
   .why-attend__item {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 5px;
      padding: 22px 18px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      
      &:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
         border-color: rgba(var(--brand-element-color-rgb), 0.3);
      }
      .why-attend__item-title {
         font-size: 24px;
         font-weight: 700;
         color: var(--brand-element-color);
         margin: 0 0 20px 0;
         line-height: 1.3;
         min-height: 64px;
         
         @media screen and (min-width: 768px) {
            margin: 0 0 30px 0;
         }
      }
      
      .why-attend__item-description {
         font-size: 16px;
         color: var(--white);
         margin: 0;
         line-height: 1.66;
         opacity: 0.9;
      }
   }
   
   
   .why-attend__placeholder {
      text-align: center;
      padding: 60px 20px;
      background: rgba(15, 20, 29, 0.5);
      border-radius: 10px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      
      p {
         color: var(--white);
         font-size: 18px;
         margin: 0;
         opacity: 0.7;
      }
   }
}

/* Reserve Your Seat Block Styling */
.reserve-your-seat {
   .reserve-your-seat__container {
      max-width: var(--container-width);
      margin: 0 auto;
      @media screen and (min-width: 768px) {
         padding: 0 40px;
      }
   }
   
   .reserve-your-seat__content {
      text-align: left;
   }
   
   .reserve-your-seat__title {
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 25px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin: 0 0 40px 0;
      }
   }
   
   .reserve-your-seat__description {
      font-size: 16px;
      color: var(--white);
      margin: 0 0 40px 0;
      line-height: 1.6;
   }
   
   .reserve-your-seat__under-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 30px 0;
      line-height: 1.5;
   }
   
   .reserve-your-seat__features {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      
      @media screen and (min-width: 768px) {
         grid-template-columns: repeat(3, 1fr);
      }
   }
   
   .reserve-your-seat__feature {
      background: #282C34;
      border-radius: 8px;
      padding: 30px 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      
      &:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }
      
      .reserve-your-seat__feature-icon {
         margin: 0 0 20px 0;
         
         img {
            width: 42px;
            height: 42px;
         }
      }
      
      .reserve-your-seat__feature-text {
         font-size: 16px;
         color: var(--white);
         margin: 0;
         line-height: 1.5;
         font-weight: 500;
         max-width: 214px;
      }
   }
   
   .reserve-your-seat__placeholder {
      text-align: center;
      padding: 60px 20px;
      background: rgba(15, 20, 29, 0.5);
      border-radius: 10px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      
      p {
         color: var(--white);
         font-size: 18px;
         margin: 0;
         opacity: 0.7;
      }
   }
}

/* Agenda Block Styling */
.agenda-block {
   
   .agenda-block__container {
      max-width: var(--container-width);
      margin: 0 auto;
      
      @media screen and (min-width: 768px) {
         padding: 0 40px;
      }
   }
   
   .agenda-block__title {
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 40px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin: 0 0 40px 0;
      }
   }
   
   .agenda-block__items {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 50px;
      .agenda-block__item {
         background: rgba(255, 255, 255, 0.05);
         border-radius: 50px;
         padding: 20px 25px;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         
         @media screen and (min-width: 768px) {
            padding: 25px 35px;
            max-width: max-content;
         }
         
         &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
         }
         .agenda-block__item-content {
            display: flex;
            gap: 14px;
            flex-direction: column;
            @media screen and (min-width: 768px) {
               align-items: center;
               justify-content: flex-start;
               flex-direction: row;
               gap: 180px;
            }
            .agenda-block__item-left {
               display: flex;
               align-items: center;
               gap: 20px;
               
               @media screen and (min-width: 768px) {
                  gap: 25px;
               }
               .agenda-block__play-icon {
                  flex-shrink: 0;
                  
                  img {
                     width: 31px;
                     height: 31px;
                  }
               }
               
               .agenda-block__item-title {
                  font-size: 18px;
                  font-weight: 400;
                  color: var(--white);
                  margin: 0;
                  line-height: 1.3;
                  
                  @media screen and (min-width: 768px) {
                     font-weight: 700;
                     font-size: 24px;
                  }
               }
            }
            
            
            .agenda-block__item-right {
               flex-shrink: 0;
               .agenda-block__time {
                  display: flex;
                  align-items: center;
                  gap: 20px;
                  @media screen and (min-width: 768px) {
                     gap:10px
                  }
                  .agenda-block__clock-icon {
                     width: 32px;
                     height: 31px;
                  }
                  
                  .agenda-block__time-text {
                     font-size: 18px;
                     font-weight: 400;
                     color: var(--brand-element-color);
                     white-space: nowrap;
                     @media screen and (min-width: 768px) {
                        font-size: 24px;
                     }
                  }
               }
            }
         }
      }
   }
   
   .agenda-block__cta {
      text-align: center;
      .agenda-block__book-btn {
         margin: 0 auto;
         &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(46, 228, 1, 0.3);
         }
      }
   }
   
   
   .agenda-block__placeholder {
      text-align: center;
      padding: 60px 20px;
      background: rgba(15, 20, 29, 0.5);
      border-radius: 10px;
      border: 2px dashed rgba(255, 255, 255, 0.2);
      
      p {
         color: var(--white);
         font-size: 18px;
         margin: 0;
         opacity: 0.7;
      }
   }
}

/* Speakers Block Styling */
.speakers {
   @media screen and (min-width: 768px) {
      padding: 0 40px;
   }
   .speakers__title {
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 40px 0;
      text-align: left;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin-bottom: 40px;
      }
   }
   
   .speakers__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      
      @media screen and (min-width: 768px) {
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
      }
   }
   
   .speakers__item {
      background: var(--dark-bg);
      border: 1px solid var(--brand-element-color);
      border-radius: 8px;
      padding: 30px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      
      &:hover {
         transform: translateY(-4px);
         box-shadow: 0 8px 25px rgba(32, 198, 62, 0.2);
      }
   }
   
   .speakers__content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      
      @media screen and (min-width: 768px) {
         flex-direction: row;
         align-items: flex-start;
         gap: 30px;
      }
      .speakers__text {
         flex: 1;
         display: flex;
         flex-direction: column;
         gap: 8px;
         .speakers__name {
            font-size: 24px;
            color: var(--white);
            margin: 0;
            line-height: 1.2;
            
            @media screen and (min-width: 768px) {
               font-size: 22px;
            }
         }
         
         .speakers__position {
            font-size: 14px;
            font-weight: 400;
            color: var(--white);
            margin: 0 0 60px 0;
            line-height: 1.4;
            
            @media screen and (min-width: 768px) {
               font-size: 18px;
            }
         }
         
         .speakers__topic {
            font-size: 24px;
            font-weight: 700;
            color: var(--brand-element-color);
            margin: 0;
            line-height: 1.4;
         }
      }
      
      
      .speakers__image {
         flex-shrink: 0;
         width: 120px;
         height: 171px;
         
         @media screen and (min-width: 768px) {
            width: 259px;
            height: 371px;
         }
         
         img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
         }
      }
   }
   
   .speakers__placeholder {
      text-align: center;
      padding: 60px 20px;
      
      p {
         color: var(--white);
         font-size: 18px;
         margin: 0;
         opacity: 0.7;
      }
   }
}

/* About DemoPips Card Block Styling */
.about-demopips-card {
   display: flex;
   align-items: center;
   @media screen and (max-width: 768px) {
      height: auto;
   }
   @media screen and (min-width: 768px) {   
      margin: 0 40px;
      height: 300px;
   }

   .about-demopips-card__container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      height: 100%;
      display: flex;
      align-items: center;
      @media screen and (max-width: 768px) {
         padding: 40px 24px ;
      }
      
      @media screen and (min-width: 768px) {
         padding: 0 40px;
      }
   }
   
   .about-demopips-card__content {
      display: flex;
      flex-direction: column-reverse;
      gap: 40px;
      align-items: center;
      height: 100%;
      
      @media screen and (min-width: 768px) {
         flex-direction: row;
         gap: 60px;
         align-items: center;
      }
   }
   
   .about-demopips-card__text {
      flex: 1;
      order: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      @media screen and (min-width: 768px) {
         order: 1;
      }
   }

   
   .about-demopips-card__description {
      font-size: 15px;
      color: var(--white);
      margin: 0;
      line-height: 1.66;
      max-width: 390px;
   }
   
   .about-demopips-card__image {
      flex-shrink: 0;
      order: 1;
      width: 100%;
      max-width: 400px;
      height: 100%;
      @media screen and (min-width: 768px) {
         order: 2;
         width: 50%;
         max-width: 500px;
      }
      
      img {
         height: 100%;
         width: auto;
      }
   }
   
   // Orientation variations
   &.about-demopips-card--right {
      .about-demopips-card__text {
         order: 2;
         
         @media screen and (min-width: 768px) {
            order: 1;
         }
      }
      
      .about-demopips-card__image {
         order: 1;
         
         @media screen and (min-width: 768px) {
            order: 2;
         }
      }
   }
   
   &.about-demopips-card--left {
      .about-demopips-card__text {
         order: 2;
         
         @media screen and (min-width: 768px) {
            order: 2;
         }
      }
      
      .about-demopips-card__image {
         order: 1;
         
         @media screen and (min-width: 768px) {
            order: 1;
         }
      }
   }
   
   // Background variations
   &.about-demopips-card--transparent {
      background: transparent;
   }
   
   &.about-demopips-card--gray {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
   }
}
.about-demopips-card__pretitle {
   font-size: 36px;
   font-weight: 700;
   color: var(--white);
   margin: 0 0 30px 0;
   line-height: 1.2;
   
   @media screen and (min-width: 768px) {
      padding-left: 40px;
      font-size: 45px;
      margin: 0 0 40px 0;
   }
}


.select2-results__option[aria-selected] {
   color:#000000!important;
}

/* Who We Are Block Styling */
.who-we-are {
   background: var(--dark-bg);
   
   .who-we-are__container {
      margin: 0 auto;
   }
   
   .who-we-are__content {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
      border: 1px solid var(--brand-element-color);
      border-radius: 12px;
      padding: 60px 40px;
      
      @media screen and (min-width: 768px) {
         flex-direction: row;
         gap: 60px;
         align-items: flex-start;
         padding: 80px 60px;
      }
   }
   
   .who-we-are__text {
      flex: 1;
      order: 2;
      
      @media screen and (min-width: 768px) {
         order: 1;
      }
   }
   
   .who-we-are__title {
      font-size: 32px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 30px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin-bottom: 32px;
      }
   }
   
   .who-we-are__description {
      font-size: 15px;
      color: var(--white);
      margin: 0;
      line-height: 1.6;
   }
   
   .who-we-are__image {
      flex-shrink: 0;
      order: 1;
      width: 100%;
      max-width: 400px;
      
      @media screen and (min-width: 768px) {
         order: 2;
         width: 50%;
         max-width: 500px;
      }
      
      img {
         width: 100%;
         height: auto;
      }
   }
}

/* Book Your Seat Now Block Styling */
.book-your-seat {
   background: var(--dark-bg);
   bac
   .book-your-seat__container {
      margin: 0 auto;
      background: #20C63E;
   }
   
   .book-your-seat__content {
      border-radius: 10px;
      background: linear-gradient(135deg, #1a4d3a 0%, #20C63E 100%);
      padding: 60px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
      z-index: 0;
      
      /* Add the conic gradient overlay */
       &::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: url('images/bg-img.jpg') center/cover no-repeat;
         opacity: 1;
         z-index: 1;
      } 
      
      /* Ensure content is above the gradient */
      > * {
         position: relative;
         z-index: 2;
      }
      
      @media screen and (min-width: 768px) {
         padding: 80px 60px;
      }
   }
   
   .book-your-seat__title {
      font-size: 32px;
      font-weight: 700;
      color: var(--white);
      margin: 0 0 20px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 40px;
         margin-bottom: 30px;
      }
   }
   
   .book-your-seat__description {
      font-size: 16px;
      color: var(--white);
      margin: 0 0 40px 0;
      line-height: 1.6;
      opacity: 0.9;
      
      @media screen and (min-width: 768px) {
         font-size: 18px;
         margin-bottom: 50px;
      }
   }
   
   .book-your-seat__button {
      display: flex;
      justify-content: center;
      
      .main-button {
         min-width: 200px;
      }
   }
}

/* Events Page Styling */
.events-page {
   background: var(--dark-bg);
   
   .events-page__container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 20px;
      
      @media screen and (min-width: 768px) {
         padding: 0 40px;
      }
   }
}

/* Upcoming Events Section */
.upcoming-events {
   margin-bottom: 100px;
   
   .upcoming-events__title {
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      text-align: center;
      margin: 0 0 50px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin: 0 0 60px 0;
      }
   }
   
   .upcoming-events__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      
      @media screen and (min-width: 768px) {
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
      }
      
      @media screen and (min-width: 1200px) {
         grid-template-columns: repeat(2, 1fr);
      }
   }
   
   .upcoming-events__empty {
      text-align: center;
      
      .upcoming-events__empty-content {
         max-width: 100%;
         margin: 0 auto;
      }
      
      .upcoming-events__empty-title {
         font-size: 36px;
         font-weight: 700;
         color: var(--white);
         margin: 0 0 20px 0;
         line-height: 1.2;
         
         @media screen and (min-width: 768px) {
            font-size: 45px;
            margin: 0 0 24px 0;
         }
      }
      
      .upcoming-events__empty-description {
         font-size: 15px;
         color: var(--white);
         margin: 0 0 42px 0;
         line-height: 1.6;
         @media screen and (max-width: 768px) {
            max-width: 290px;
            margin: 0 auto;
         }
      }
      
      .upcoming-events__empty-image {
         margin-top: 40px;
         
         img {
            width: 100%;
            height: auto;
            min-height: 216px;
            object-fit: cover;
            object-position: center;
            
            @media screen and (max-width: 767px) {
               aspect-ratio: 16/9;
               height: auto;
            }
         }
         
         @media screen and (min-width: 768px) {
            margin-top: 50px;
         }
      }
   }
}

/* Past Events Section */
.past-events {
   .past-events__title {
      font-size: 36px;
      font-weight: 700;
      color: var(--white);
      text-align: center;
      margin: 0 0 25px 0;
      line-height: 1.2;
      
      @media screen and (min-width: 768px) {
         font-size: 45px;
         margin: 0 0 25px 0;
      }
   }
   
   .past-events__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 30px;
      margin-bottom: 50px;
      
      @media screen and (min-width: 768px) {
         grid-template-columns: repeat(2, 1fr);
         gap: 40px;
      }
   }
   
   .past-events__more {
      text-align: center;
      display: flex;
      justify-content: center;
      justify-items: center;
      .past-events__more-button {
         &:hover {
            transform: translateY(-2px);
         }
      }
   }
   
   .past-events__empty {
      text-align: center;
      padding: 60px 20px;
      
      p {
         color: var(--white);
         font-size: 18px;
         margin: 0;
         opacity: 0.7;
      }
   }
}

/* Event Card Styling */
.event-card {
   background: #0F141D;
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
   height: 100%;
   
   /* Gradient bottom border using pseudo-element */
   &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #FFFFFF1A 10%, #20C63E, #FFFFFF1A);
      border-radius: 0 0 10px 10px;
   }
   
   &:hover {
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      border-color: rgba(32, 198, 62, 0.3);
   }
   
   .event-card__image {
      width: 100%;
      height: 200px;
      overflow: hidden;
      flex-shrink: 0;
      @media screen and (min-width: 768px) {
         height: 300px;
      }
      
      img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.3s ease;
      }
   }
   
   .event-card__content {
      padding: 25px 40px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
   }
   
   .event-card__title {
      font-size: 24px;
      font-weight: 700;
      color: #20C63E;
      margin: 0 0 20px 0;
      line-height: 1.3;
      max-width: 464px;
      
      @media screen and (min-width: 768px) {
         margin: 0 0 24px 0;
      }
   }
   
   .event-card__description {
      font-size: 15px;
      color: var(--white);
      margin: 0 0 20px 0;
      line-height: 1.66;
      flex-grow: 1;
      max-width: 464px;
      
      @media screen and (min-width: 768px) {
         font-size: 15px;
         margin: 0 0 25px 0;
      }
   }
   
   .event-card__details {
      margin-bottom: 0;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: auto auto;
      gap: 10px;
      margin-top: 40px;
      

      
      .event-card__detail {
         margin-bottom: 10px;
         display: flex;
         align-items: flex-start;
         
         .event-card__detail-icon {
            margin-right: 12px;
            font-size: 16px;
            color: #20C63E;
            text-align: center;
            flex-shrink: 0;
            width: 16px;
         }
         
         .event-card__detail-text {
            font-size: 15px;
            color: var(--white);
         }
         
         /* Grid positioning for specific elements */
         &.event-card__detail--time {
            grid-column: 1;
            grid-row: 1;
         }
         
         &.event-card__detail--date {
            grid-column: 2;
            grid-row: 1;
            align-self: start;
            justify-self: end;
         }
         
         &.event-card__detail--location {
            grid-column: 1;
            grid-row: 2;
            align-self: center;
            @media screen and (min-width: 768px) {
               padding-top: 10px;
            }
         }
      }

      /* For past events with only location and button */
      &.event-card__details--past {
         grid-template-columns: 2fr 1fr;
         grid-template-rows: auto;
         
         .event-card__detail--location {
            grid-column: 1;
            grid-row: 1;
            align-self: center;
         }
         
         .event-card__button {
            grid-column: 2;
            grid-row: 1;
         }
      }
      
      .event-card__button {
         grid-column: 2;
         grid-row: 2;
         align-self: start;
         justify-self: end;
         width: auto;
         min-width: 120px;
         margin-top: 0;
         display: inline-block;
         padding: 8px 24px;
         border-radius: 5px;
         text-decoration: none;
         font-weight: 500;
         font-size: 16px;
         transition: all 0.3s ease;
         text-align: center;
         border: none;
         cursor: pointer;
         
         &.event-card__button--green {
            background: #20C63E;
            color: var(--white);
            
            &:hover {
               background: #1a9e32;
               transform: translateY(-2px);
               box-shadow: 0 4px 12px rgba(32, 198, 62, 0.3);
            }
         }
         
         &.event-card__button--outline {
            background: transparent;
            color: var(--white);
            border: 2px solid #20C63E;
            
            &:hover {
               background: #20C63E;
               color: var(--white);
               transform: translateY(-2px);
               box-shadow: 0 4px 12px rgba(32, 198, 62, 0.3);
            }
         }
      }
   }
   
   /* Image scale effect when hovering over buttons */
   &:hover .event-card__image img {
      transform: scale(1.05);
   }
   
   /* Clickable event card styling */
   &.event-card--clickable {
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      
      &:hover {
         text-decoration: none;
         color: inherit;
         
         /* Apply button hover styling to the button when card is hovered */
         .event-card__button--outline {
            background: #20C63E;
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(32, 198, 62, 0.3);
         }
      }
   }
}

/* Loading states and animations for past events */
.past-events__more-button {
   transition: all 0.3s ease;
   min-width: 120px;
   width: max-content;
   padding: 0 10px;
   color: var(--white);
   
   &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
   }
   
   .fa-spinner {
      margin-right: 8px;
   }
}

/* Animation for newly loaded events */
.event-card--past:not(.loaded) {
   opacity: 0;
   transform: translateY(20px);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.event-card--past.loaded {
   opacity: 1;
   transform: translateY(0);
}

/* thai qr checkout page */
.payment-qr-holder {
   max-width: var(--container-width);
   padding: 0 20px;
   margin: 0 auto;
   padding-top: 80px;

   @media screen and (max-width: 1199px) {
      padding-top: 140px;
   }
}

/* Custom CSS for 12Group QR Payment Layout */
@media (max-width: 991px) {
 
   .col-left-holder {
      min-width: auto !important;
      width: 100%;
   }

   .col-right-holder {
      width: 100%;
   }
}

@media (min-width: 992px) {
   .col-left-holder {
      max-width: 450px;
   }

   .col-right-holder {
      min-width: 400px;
   }
}

.qr-container {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 12px !important;
}


#action-buttons .btn {
   min-width: 150px;
}

@media (max-width: 576px) {
   #action-buttons .d-flex {
      flex-direction: column;
   }

   #action-buttons .btn {
      width: 100%;
      margin-bottom: 0.5rem;
   }
}

.refresh-btn {
   background-color: var(--brand-element-color);
   color: var(--black);
   border-color: var(--brand-element-color);

   &:hover {
      color: var(--black);
      border-color: var(--brand-element-color);
      background-color: #28a745;
   }
   &:active {
      color: var(--black)!important;
      border-color: var(--brand-element-color)!important;
      background-color: #28a745!important;
   }
   &:focus {
      color: var(--black);
      border-color: var(--brand-element-color);
      background-color: #28a745;
   }
}

.back-to-checkout {
   color: var(--brand-element-color);
   border-color: var(--brand-element-color);

   &:hover {
      background-color: var(--brand-element-color);
      color: var(--black);
      border-color: var(--brand-element-color);
   }
   &:active {
      background-color: var(--brand-element-color);
      color: var(--black);
      border-color: var(--brand-element-color);
   }
   &:focus {
      background-color: var(--brand-element-color);
      color: var(--black);
      border-color: var(--brand-element-color);
   }
}

.payment-instructions {
   ol {
      margin-left: 20px;
   }
}
@keyframes spin-refresh {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.refresh-icon-spinning {
   animation: spin-refresh 1.5s linear;
}

/* Video Section Styles */
.video-section {
   width: 100%;
   max-width: var(--container-width);
   margin: 0 auto;
   padding: 0 20px 60px 20px;
   
   @media screen and (max-width: 768px) {
      padding: 40px 20px;
   }
}

.video-section__container {
   width: 100%;
   max-width: 662px;
   margin: 0 auto;
}

.video-section__wrapper {
   position: relative;
   width: 100%;
   padding-bottom: 56.25%; /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
   border-radius: 12px;
   background-color: #000;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.video-section__iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: none;
}

.video-section__footer {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   margin-top: 30px;
   text-decoration: none;
   transition: opacity 0.3s ease, transform 0.2s ease;
   
   &:hover {
      opacity: 0.8;
      transform: translateY(-2px);
   }
   
   &:active {
      transform: translateY(0);
   }
   
   @media screen and (max-width: 480px) {
      gap: 10px;
      margin-top: 20px;
   }
}

.video-section__text {
   font-size: 18px;
   font-weight: 500;
   color: #fff;
   
   @media screen and (max-width: 480px) {
      font-size: 16px;
   }
}

.video-section__logo {
   height: 32px;
   width: auto;
   object-fit: contain;
   
   @media screen and (max-width: 480px) {
      height: 28px;
   }
}