/* ===============================
   Root Variables (Theme Colors)
   =============================== */
:root {
    /* Brand Colors */
    --primary-500: #FDC300;
    --secondary-100: #CCF1FF;
    --secondary-500: #0197CD;
    --secondary-900: #002533;
    --secondary-950: #001319;
    --gray-neutral-300: #CBD5E1;
    --gray-neutral-800: #1E293B;
    --white-color: #ffffff;

    /* Typography */
    --font-family-base: Arial, Helvetica, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Transitions */
    --transition-fast: 0.2s ease-in-out;
    --transition-base: 0.3s ease-in-out;
}

/* ===============================
   Base Styles
   =============================== */
body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background: linear-gradient(0deg,rgba(254, 249, 225, 0.4) 0%, rgba(255, 255, 255, 1) 100%);
    background-repeat: no-repeat;
    color: var(--secondary-900);
    overflow-x: hidden;
}

/* ===============================
   Typography
   =============================== */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  margin: 0;
}
h1{font-size: 48px;line-height: 55px;}
h2{font-size: 40px;line-height: 46px;}
h3{font-size: 30px;line-height: 34px;}
h5{font-size: 20px;line-height: 28px;}
h6{font-size: 18px;line-height: 24px;}

p{font-size: 18px;line-height: 28px;color: var(--gray-neutral-800);margin: 0;}
.mb-16{margin-bottom: 16px !important;}
.mb-20{margin-bottom: 20px !important;}
.mb-30{margin-bottom: 30px !important;}

ul{padding: 0;margin: 0;}
a{text-decoration: none;}

.py-100{padding-top: 100px;padding-bottom: 100px;}
.space-10{padding: 10px !important;}
.color-primary{color: var(--primary-500);}
.color-secondary{color: var(--secondary-500);}
/* ===============================
   Header
   =============================== */
.header{border-bottom: 1px solid rgba(52, 200, 254, 0.2);padding: 20px 0;position: relative;z-index: 2;}
.lang_select .dropdown-toggle{background-color: rgba(1, 151, 205, 0.1);border: none;padding: 10px 16px;border-radius: 100px;}
.lang_select .dropdown-toggle::after{background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M7.41 8.59L12 13.17L16.59 8.59L18 10L12 16L6 10L7.41 8.59Z" fill="%230197CD"/></svg>');width: 24px;height: 24px;border: none;vertical-align: middle;}
.lang_select .dropdown-menu{min-width: 90px;background-color: #e5f3f9;border: none;}
.lang_select .dropdown-menu li a{text-align: center;}
.lang_select .dropdown-menu li a:hover,.lang_select .dropdown-menu li a:focus{background-color: transparent;}

/* ===============================
   Hero Section
   =============================== */
.hero-section{padding: 134px 0;z-index: 1;overflow-x: hidden;}
.hero-section::before{content: '';position: absolute;left: -330px;top: -50px;width: 500px;height: 500px;background-color: var(--primary-500);opacity: 0.1;border-radius: 50%;filter: blur(160px);}
.upper-tag{background-color: rgba(1, 151, 208, 0.08);border-radius: 30px;padding: 4px 16px;display: flex;align-items: center;gap: 10px;width: fit-content;font-size: 18px;line-height: 30px;font-weight: 500;}
.scanner-img{display: flex;flex-wrap: wrap;gap: 42px;margin-top: 40px;}
.scanner-box>img:first-child{max-width: 125px;}
.scanner-box{background-color: rgba(1, 151, 205, 0.1);border-radius: 10px;display: flex;flex-wrap: wrap;flex-direction: column;gap: 12px;padding: 12px;transition: var(--transition-base);}
.scanner-box:hover{transform: translateY(-5px);}

.hero-img img{filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.2));}
.juste-text{writing-mode: vertical-rl;font-size: 180px;font-weight: 800;color: var(--primary-500);opacity: 0.1;text-transform: uppercase;line-height: normal;position: absolute;right: -64px;top: 50%;transform: translateY(-50%);z-index: -1;pointer-events: none;}
.hero-mobile-img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);animation: upDown 2s ease-in-out infinite;}
@keyframes upDown {
   0% {
      margin-top: 0;
   }
   50% {
      margin-top: -20px;
   }
   100% {
      margin-top: 0;
   }
}

/* ===============================
   Information Section
   =============================== */
.deatail_box{background-color: var(--secondary-500);border-radius: 12px;padding: 24px;transition: var(--transition-base);text-align: center;min-height: 100%;}
.deatail_box:hover{box-shadow: 10px 16px 30px rgba(1, 151, 205, 0.2);}
.info_icon{background-color: var(--white-color);width: 64px;height: 64px;border-radius: 20px;display: flex;align-items: center;justify-content: center;margin: 0 auto;box-shadow: inset 0 -3px 9px rgba(1, 151, 205, 0.6), 0 4px 16px rgba(11, 65, 85, 0.25);}
.info_number{font-size: 30px;line-height: 34px;color: var(--white-color);font-weight: 600;display: block;margin: 20px 0 8px;}
.deatail_box h6{font-size: 20px;line-height: 23px;color: var(--white-color);font-weight: normal;}


/* ===============================
   About Us Section
   =============================== */
.about-content{padding-left: 40px;}
.list li{display: flex;align-items: center;gap: 20px;font-size: 18px;line-height: 28px;color: var(--gray-neutral-800);}
.list li:not(:last-child){margin-bottom: 16px;}
.list-icon{width: 40px;height: 40px;flex: 0 0 40px;border-radius: 50%;background-color: rgba(1, 151, 205, 0.15);display: flex;align-items: center;justify-content: center;}

/* ===============================
   Our Working Section
   =============================== */
.work-steps{display: grid;grid-template-columns: repeat(4, 1fr);gap: 76px;margin-top: 60px;}
.work-box{border: 3px solid var(--secondary-100);border-radius: 40px;padding: 74px 30px 38px;position: relative;border-top: none;border-right: none;}
.work-box:not(:last-child):after{content: '';position: absolute;right: -70px;bottom: 80px;width: 70px;height: 3px;background-color: var(--secondary-100);}
.work-box:not(:last-child):before{content: '';position: absolute;right: -68px;bottom: 68px;width: 26px;height: 26px;border-right: 3px solid var(--secondary-100);border-bottom: 3px solid var(--secondary-100);transform: rotate(-45deg);}
.work-icon{width: 74px;height: 74px;display: flex;align-items: center;justify-content: center;background-color: var(--secondary-100);border: 2px solid var(--white-color);box-shadow: inset 0 -3px 9px rgba(1, 151, 205, 0.4), 0 4px 16px rgba(1, 151, 205, 0.25);border-radius: 50%;position: absolute;left: 50px;top: -37px;}
.work-box h6{font-size: 18px;line-height: 28px;margin-bottom: 10px;}
.blank_border_top_left{position: absolute;left: -1px;top: -2px;width: 90px;height: 100%;border-top: 3px solid var(--secondary-100);border-top-left-radius: 43px;}
.blank_border_right_bototm{position: absolute;right: -2px;bottom: 0;width: 100%;height: 83px;border-right: 3px solid var(--secondary-100);border-bottom-right-radius: 42px;}

/* ===============================
   Multi Mobile Section
   =============================== */
.mobile-section h2{margin-bottom: 60px;}

/* ===============================
   Ready For Service Section
   =============================== */
.ready-section{background: linear-gradient(90deg,rgba(255, 208, 51, 1) 0%, rgba(253, 195, 0, 1) 100%);z-index: 1;}
.ready-section::before,.ready-section::after{content: '';position: absolute;left: -200px;bottom: -200px;width: 385px;height: 385px;border-radius: 50%;background-color: #FDC301;filter: blur(30px);z-index: -1;}
.ready-section::after{left: 10%;bottom: inherit;top: -200px;}
.ready-section p{color: var(--secondary-900);}
.juste-symbol{position: absolute;right: 30px;bottom: -70px;opacity: 0.2;z-index: -1;}
.ready-section .scanner-box{background-color: rgba(255,255,255,0.2);}
.ready-section .scanner-box .qr-img,.ready-section .scanner-box .strore-btn{max-width: 165px;width: 100%;}

/* ===============================
   Why Choose Section
   =============================== */
.choose-lists{display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;margin-top: 60px;}
.choose-box{border: 1px solid rgba(1, 151, 205, 0.2);border-radius: 12px;padding: 24px;transition: var(--transition-base);}
.choose-box:hover{background-color: var(--secondary-500);box-shadow: 10px 16px 30px rgba(1, 151, 205, 0.2);}
.choose-icon{width: 60px;height: 60px;background: rgba(1, 151, 205, 0.1);display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: var(--transition-base);}
.choose-box:hover .choose-icon{background-color: rgba(255,255,255,0.15);}
.choose-box:hover .choose-icon svg path:not(.fill-white){fill: var(--primary-500);}
.choose-box h6{color: var(--secondary-900);font-weight: 600;margin-top: 20px;margin-bottom: 8px;transition: var(--transition-base);}
.choose-box p{color: var(--secondary-900);font-size: 18px;line-height: 28px;transition: var(--transition-base);}
.choose-box:hover h6,.choose-box:hover p{color: var(--white-color);}

/* ===============================
   Transparent Payments Section
   =============================== */
.payment-group{background-color: var(--secondary-500);border-radius: 12px;padding: 100px;}
.payment-group h5{font-weight: normal;max-width: 75%;margin: 0 auto;}

/* ===============================
   FAQ Section
   =============================== */
.faq-group{margin-top: 60px;}
.accordion-item{background-color: transparent;border: none;border-bottom: 1px solid rgba(1, 15, 205, 0.1);border-radius: 0 !important;}
.accordion-item + .accordion-item{margin-top: 8px;}
.accordion-item.active{background-color: var(--white-color);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 8px 32px rgba(0, 0, 0, 0.06);border-radius: 16px !important;border-bottom: none;}
.accordion-button{font-size: 18px;line-height: 28px;color: var(--secondary-900);font-weight: normal;background-color: transparent;border: none;box-shadow: none;padding: 20px 32px;}
.accordion-button:not(.collapsed){background-color: transparent;border: none;box-shadow: none;color: var(--secondary-500);font-weight: 600;}
.accordion-button:focus{box-shadow: none;}
.accordion-body{padding: 0 66px 20px 32px;color: var(--secondary-900);}
.accordion-body p{color: var(--secondary-900);}

.accordion-button::after{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6.69768 6.69666L17.3043 17.3033M17.3043 17.3033L9.08417 17.5684M17.3043 17.3033L17.5695 9.08314" stroke="%23002533" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');}
.accordion-button:not(.collapsed)::after{background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6.69666 17.3034L17.3033 6.69681M17.3033 6.69681L17.5684 14.9169M17.3033 6.69681L9.08314 6.43165" stroke="url(%23paint0_linear_13823_7060)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="paint0_linear_13823_7060" x1="16.2426" y1="16.2428" x2="7.75732" y2="7.75747" gradientUnits="userSpaceOnUse"><stop stop-color="%23279EFF"/><stop offset="1" stop-color="%23005499"/></linearGradient></defs></svg>');transform: none;}
/* ===============================
   Download Section
   =============================== */
.download-section{background: linear-gradient(90deg,rgba(255, 208, 51, 1) 0%, rgba(253, 195, 0, 1) 100%);z-index: 1;padding-top: 60px;padding-bottom: 60px;}
.download-section::after{content: '';position: absolute;left: 10%;top: -280px;width: 385px;height: 385px;border-radius: 50%;background-color: #FDC301;filter: blur(30px);z-index: -1;}
.download-section h3{font-weight: normal;}
.store-btn-group{display: flex;align-items: center;justify-content: flex-end;gap: 30px;flex-wrap: wrap;}
.store-btn-group .strore-btn{max-width: 188px;width: 100%;}
.store-btn-group .strore-btn img{width: 100%;}
.download-section .juste-symbol{max-width: 198px;right: 8%;bottom: -30px;}

/* ===============================
   Footer Section
   =============================== */
.footer{background-color: var(--secondary-950);}
.footer-top{padding: 70px 0;}
.footer-top p{color: var(--gray-neutral-300);line-height: 24px;font-size: 16px;margin: 16px 0 24px;}
.footer-top h6{color: var(--gray-neutral-300);line-height: 24px;font-size: 16px;margin-bottom: 10px;font-weight: normal;}

.social-icon{display: flex;flex-wrap: wrap;gap: 10px;}
.social-icon li{display: block;}
.social-icon li>a{width: 40px;height: 40px;border-radius: 50%;display: flex;align-items: center;justify-content: center;background-color: rgba(255,255,255,0.1);}
.social-icon li>a:hover{background-color: var(--primary-500);}

.connect_info{display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;}
.connect_info a{color: var(--gray-neutral-300);display: inline-block;}
.connect_info a>div{display: flex;align-items: center;gap: 10px;margin-bottom: 10px;}
.connect_info a>div span{font-size: 16px;line-height: 24px;font-weight: 600;}
.connect_info a>span{font-size: 16px;line-height: 24px;display: inline-block;}
.connect_info a + a{margin-top: 24px;}

.download-box{background-color: rgba(255,255,255,0.1);border-radius: 8px;padding: 10px 20px;display: flex;align-items: center;gap: 16px;justify-content: space-between;position: relative;}
.download-box + .download-box{margin-top: 24px;}
.download-right,.store-img{flex: 0 0 30px;max-width: 30px;}
.download-left{display: flex;align-items: center;gap: 16px;}
.download-content{display: flex;flex-wrap: wrap;flex-direction: column;}
.download-content span{color: var(--white-color);line-height: 24px;font-size: 16px;}
.download_btn{color: var(--primary-500);font-weight: 600;text-decoration: underline;font-size: 16px;line-height: 24px;display: block;}
.download_btn::before{content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;}

.copyright{border-top: 1px solid var(--secondary-900);padding: 20px 0;}
.copyright p,.copyright ul li>a{color: var(--gray-neutral-300);line-height: 24px;font-size: 16px;text-decoration: none;}
.copyright ul{display: flex;align-items: center;gap: 30px;justify-content: flex-end;}
.copyright ul li{display: block;}
.copyright ul li>a:hover{color: var(--primary-500);}

.swiss-made-main img {max-width: 150px;}

.content-pages h1,.content-pages h2{font-size: 28px;line-height: 34px;margin-bottom: 10px;}
.content-pages h3{font-size: 22px;line-height: 26px;}
.content-pages ul{padding-left: 18px;}
.content-pages ul li{font-size: 18px;line-height: 28px;color: var(--gray-neutral-800);}
.content-pages p + h2,.content-pages ul + h2{margin-top: 30px;}
.content-pages p + h3{margin-top: 12px;}
.content-pages p a{color: #00509d;}



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

@media screen and (max-width: 1399px){
   .work-steps{gap: 40px;}
   .work-box:not(:last-child):after{right: -30px;width: 30px}
   .work-box:not(:last-child):before{right: -28px;}
   .work-box{padding: 60px 20px 20px;}
   .choose-box,.deatail_box{padding: 20px;}
   .about-content{padding-left: 20px;}
}

@media screen and (max-width: 991px){
   h1{font-size: 34px;line-height: 40px;}
   h2{font-size: 30px;line-height: 36px;}
   h3{font-size: 24px;line-height: 30px;}

   .py-100,.footer-top{padding-top: 60px;padding-bottom: 60px;}

   .hero-section{padding: 60px 0;}
   .hero-mobile-img{height: 100%;}
   .scanner-img,.store-btn-group{justify-content: center;}
   .hero-img{margin-top: 50px;}

   .about-content{padding-left: 0;padding-top: 40px;}

   .work-steps{grid-template-columns: repeat(1, 1fr);gap: 76px;}
   .work-box{border: 3px solid var(--secondary-100);}
   .blank_border_top_left,.blank_border_right_bototm{display: none;}

   .choose-lists{grid-template-columns: repeat(2, 1fr);}
   .work-box:not(:last-child):after{right: inherit;left: 86px;width: 3px;height: 30px;bottom: -30px;}
   .work-box:not(:last-child):before{right: inherit;left: 74px;bottom: -28px;transform: rotate(45deg);}

   .payment-group{padding: 60px;}

   .faq-group,.choose-lists{margin-top: 30px;}
   .accordion-button{padding: 20px;}
   .accordion-body{padding-left: 20px;}
   .mobile-section h2{margin-bottom: 40px;}
   .payment-group h5{max-width: 100%;}
}

@media screen and (max-width: 767px){
   .juste-text{font-size: 90px;right: -28px;}
   .scanner-img{gap: 20px;}

   .work-steps{grid-template-columns: repeat(1, 1fr);}

   .payment-group{padding: 30px;}

   .content-pages h1,.content-pages h2{font-size: 24px;line-height: 28px;}
   .content-pages h3{font-size: 20px;line-height: 24px;}
}

@media screen and (max-width: 575px){
   .hero-section .scanner-box img{max-width: 100px;}
   .ready-section .scanner-box .qr-img, .ready-section .scanner-box .strore-btn{width: 100px;}

   .choose-lists{grid-template-columns: repeat(1, 1fr);}

   .copyright ul{justify-content: center;margin-top: 10px;}

   .store-btn-group .strore-btn{max-width: max-content;}
}