html {
    font-size: 18px;
}

:root{
    --color-scheme-1-bg: #EBF2FE;
    --color-scheme-1-text: #0C0801;
    --color-scheme-1-footer-link: #212529;
    --color-scheme-1-text-muted: #6c757d;
    --color-scheme-1-faq-title: #0D2A4F;
    --color-scheme-2-bg: #D7E6FD;
    --color-white: #fff;
    --dodger: #3B82F6;
    --mountain: #10B981;
    --neutral-15: rgba(12,8,1,0.15);
    --image-filter: none;
    
    --product-card-bg: #fff;
    --product-card-img-bg: #f4f4f4;
    --product-card-border-color: #0c080126;
    
    --faq-body-bg: #fff;
    
    --step-circle-border-color: #000000;
    
    --tag-pill-bg: rgba(12,8,1,0.05);
    
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-blur: 10px;
    --glass-transition: 0.3s ease;

    --cookie-banner-wrapper: transparent;

    --logo-text-color: #153c63;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --color-scheme-1-bg: #142749;
        --color-scheme-1-text: #fff;
        --color-scheme-1-footer-link: #f8f9fa;
        --color-scheme-1-text-muted: #adb5bd;
        --color-scheme-1-faq-title: #fff;
        --color-scheme-2-bg: #1c3462;
        --color-white: #fff;
        --dodger: #3B82F6;
        --mountain: #10B981;
        --neutral-15: rgba(12,8,1,0.15);
        --image-filter: invert(99%) sepia(93%) saturate(14%) hue-rotate(88deg) brightness(105%) contrast(102%);
        
        --product-card-bg: #1a1a1a83;
        --product-card-img-bg: #2a2a2a83;
        --product-card-border-color: #2a2a2a83;
        
        --faq-body-bg: rgba(0, 0, 0, 0.288);
        
        --step-circle-border-color: #fff;
        
        --tag-pill-bg: rgba(255,255,255,0.08);
        
        --glass-bg: rgba(255, 255, 255, 0.1);
        --glass-blur: 10px;
        --glass-transition: 0.3s ease;

        --cookie-banner-wrapper: rgba(255, 255, 255, 0.306);

        --logo-text-color: #6FA3D2;
    }
}
@font-face {
  font-family: 'Pink Sans';
  src: url('/vendor/fonts/pink-sans/PinkSans-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
.glass-effect {
    background-color: var(--glass-bg) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    transition: var(--glass-transition) !important;
}


/* Header */
.site-header{ 
    box-shadow: none; 
    border-bottom: 1px solid transparent; 
    height: 8vh;
    background-color: var(--color-scheme-1-bg);
}
header ul li a {
    color: var(--color-scheme-1-text);
}
.navbar-brand .logo{
    width: 60px; 
    height: 60px; 
    background: transparent; 
    position: relative;
}
.logo-text{
    color: var(--logo-text-color);
    font-family: "Pink Sans";
    letter-spacing: .4px;
    font-weight: normal;
    font-size: 1.7rem;
}
.navbar .nav-link{
    color: var(--color-scheme-1-text);
    font-size: 1rem;
    font-weight: 400;
    padding: .5rem 1rem;
    transform: translate(0, 0);
    transition: all ease-out 300ms;
}
.btn-nav {
    font-size: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 6px;
    padding: .5rem 1.1rem;
    font-weight: 400;
}
.navbar .nav-link:hover{ 
    opacity: .85; 
    text-decoration: none; 
    transform: translate(0, -0.3rem);
    transition: all ease-in 300ms;
}
.navbar-toggler-icon{
    filter: var(--image-filter) !important;
}
.navbar .dropdown-toggle:hover{
    transform: translate(0, 0);
}
.btn-contact{
    border: 1px solid var(--neutral-15);
    border-radius: 0.5rem;
    color: var(--color-scheme-1-text);
    background: transparent;
}
.btn-contact:hover{
    color: var(--color-scheme-1-text-muted) !important;
}
.btn-chat{
    background: linear-gradient(135deg, var(--dodger) 0%, var(--mountain) 100%);
    border: 1px solid var(--dodger);
    border-radius: 0.5rem;
    color: var(--color-white);
}


/* Sections */
.section{ padding-top: 4.5rem; padding-bottom: 4.5rem; }
.bg-scheme-2{ background: var(--color-scheme-2-bg); }
.bg-scheme-1{ background: var(--color-scheme-1-bg); }
.bg-scheme-1-text{ color: var(--color-scheme-1-text); }
section:nth-of-type(odd){ --section-bg: var(--color-scheme-1-bg); background-color: var(--section-bg); }
section:nth-of-type(even){ --section-bg: var(--color-scheme-2-bg); background-color: var(--section-bg); }
section:last-of-type:nth-of-type(odd) ~ footer{ background-color: var(--color-scheme-2-bg); }
section:last-of-type:nth-of-type(even) ~ footer{ background-color: var(--color-scheme-1-bg); }
.mt-8{ margin-top: 8rem; }
.mb-8{ margin-bottom: 8rem; }
.icon{ filter: var(--image-filter); }


/* Eyebrow and headings */
.eyebrow{
    color: var(--color-scheme-2-text, var(--color-scheme-1-text));
    font-weight: 600;
    font-family: Raleway;
    letter-spacing: .4px;
    text-transform: none;
    font-size: 0.95rem;
}
.section-title{
    font-family: Nunito;
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    margin-top: .35rem;
    color: var(--color-scheme-1-text);
}
.section-title-left{
    text-transform:uppercase;
    font-family:Nunito;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    margin-top:.6rem;
    width: 50%;
    color: var(--color-scheme-1-text);
}
.section-sub, .section-sub-left{
    font-family: Raleway;
    font-size: 1.125rem;
    line-height: 1.6;
    margin-top: .5rem;
    color: var(--color-scheme-1-text);
}


/* Back to top */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 25px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--dodger) 0%, var(--mountain) 100%);
    color: #fff;
    font-size: 1.5rem;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: right 0.5s ease, bottom 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
}
#backToTop.show {
    right: 100px;
    opacity: 1;
    visibility: visible;
    transition: right 0.5s ease, bottom 0.5s ease, opacity 0.3s ease, visibility 0.3s ease;
}
#backToTop:hover {
    background-color: #0056b3;
}

/* ReCaptcha badge */
.grecaptcha-badge {
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: 0px !important;
}
.grecaptcha-badge:hover {
    width: 256px !important;
}


/* Cookie banner */
.cookie-banner-wrapper {
    position: fixed;
    display: none;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 40px, 900px);
    background-color: var(--cookie-banner-wrapper) !important;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    z-index: 99999999999;
}
#cookie-banner {
    position: relative;
    display: flex;
    width: 100%;
    padding: 16px 20px;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    gap: 16px;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
}
.btn-cookies {
    background: linear-gradient(135deg, var(--dodger) 0%, var(--mountain) 100%);
    border: 1px solid var(--dodger);
    border-radius: 10rem 12rem 1rem 12rem;
    color: var(--color-white);
}
#cookie-banner span {
    max-width: 650px;
}
#cookie-accept:active {
    transform: translateY(0);
    box-shadow: none;
}
@keyframes cookie-exit {
    0% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    40% {
        transform: translateX(-50%) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(90px);
        opacity: 0;
    }
}
.cookie-banner-wrapper.hide {
    animation: cookie-exit 0.45s ease forwards;
}


/* Popup banner */
.popup-glass {
    background: white;
    backdrop-filter: blur(var(--glass-blur));
    border-radius: 1.25rem;
    border: 1px solid var(--neutral-15);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    color: var(--color-scheme-1-text);
}
.popup-eyebrow {
    font-family: Raleway;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-scheme-1-text-muted);
    letter-spacing: .5px;
    text-transform: uppercase;
}
.popup-title {
    font-family: Nunito;
    font-size: 2rem;
    text-transform: uppercase;
    color: var(--color-scheme-1-text);
    line-height: 1.2;
}
.popup-text {
    font-family: Raleway;
    font-size: 1.05rem;
    color: var(--color-scheme-1-text);
    opacity: 0.9;
}
.popup-img {
    max-height: 260px;
    object-fit: contain;
    filter: var(--image-filter);
}
.btn-popup-accept {
    background: linear-gradient(135deg, var(--dodger) 0%, var(--mountain) 100%);
    border: 1px solid var(--dodger);
    border-radius: 0.5rem;
    color: var(--color-white);
}
.btn-popup-close {
    border: 1px solid var(--neutral-15);
    border-radius: 0.5rem;
    color: var(--color-scheme-1-text);
    background: transparent;
}
#marketingPopup .modal.fade .modal-dialog {
    transform: translateY(20px);
    transition: all 0.3s ease;
}
#marketingPopup .modal.show .modal-dialog {
    transform: translateY(0);
}
.check-input-hide{
    background: linear-gradient(135deg, var(--dodger) 0%, var(--mountain) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
    opacity: 0%;
    transform: translate(0, 150%);
    z-index: -1;
    transition: transform 800ms, opacity 400ms, z-index 800ms;
}
.check-input{
    opacity: 100%;
    transform: translate(0, 15%);
    z-index: 0;
    transition: transform 800ms, opacity 400ms, z-index 800ms;
}



/* Footer */
footer{ color: var(--color-scheme-1-text); }
footer ul li a { color: var(--color-scheme-1-footer-link); }
footer .col-lg-4 small { color: var(--color-scheme-1-text-muted); }
.logo-footer-img{ width: 60px; height: auto; }
.footer-copyright-text{ font-family: 'Raleway', sans-serif; }


/* Extra small devices (phones, portrait) */
@media (max-width: 575.98px) {
    #backToTop {
        right: 28px;
    }
    #backToTop.show {
        bottom: 95px;
        right: 28px;
    }
    .grecaptcha-badge {
        bottom: 240px !important;
        right: -1px !important;
        left: auto !important;
    }
    #cookie-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* Small devices (phones, landscape) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* CSS for larger phones / small tablets */
}

/* Only for medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    .mt-10{
        margin-top: 6rem !important;
    }
}

/* Large devices (desktops) */
@media (min-width: 992px) {
    .pt-lg-10{
        padding-top: 10rem;
    }
    .p-lg-10{
        padding: 10rem;
    }
    .p-lg-8{
        padding: 6rem;
    }
    .mt-lg-6{
        margin-top: 6rem !important;
    }
    .mt-lg-8{
        margin-top: 8rem !important;
    }
    .container-lg-fluid {
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
}