body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Segoe UI', sans-serif;
    background-color: #121212; /* solid dark background */
    color: #fff;
    font-size:10px;
}

/* CSS */
h1 {
    font-size: 20px !important; /* sets the size of the h1 text */
    line-height: 1.2; /* controls spacing between lines */
    font-weight: bold; /* ensures the heading looks prominent */
}

/* Navbar */
.navbar {
    background-color: #121212;
    height: 64px;
    padding: 0;
}


.navbar-logo {
    height: 46px; /* logo size */
    width: auto;
}
/* Mobile breakpoint: adjust logo height */
@media (max-width: 576px) {
    .navbar-logo {
        height: 36px;
    }
}

.lang-select {
    background-color: #121212;
    color: #fff;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.9rem;
}

/* Video Banner */
/* Prevent zoom on inputs by ensuring font-size >= 16px */
.carousel-item video,
.carousel-item img {
    height: 70vh; /* default banner height */
    object-fit: cover; /* crop nicely */
}


/* Fade-in animations */
@keyframes fadeInVideo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Sections */
.section {
    padding: 4rem 1rem;
    text-align: center;
}

.locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.location {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 500;
}

.form-section {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 10px;
    max-width: 600px;
    margin: 2rem auto;
}


/* Full-screen video wrapper */


.cursor-pointer {
    cursor: pointer;
}

    .gradient-title {
        font-size: 3rem;
        font-weight: bold;
        text-align: center;
        background: linear-gradient(to right, #ff0000, #ff0070, #00b3ff82, #00ffffdb);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    .route-map-container {
        margin-top: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .route-map-img {
        max-width: 100%;
        height: auto;
        width: 600px; /* Adjust as needed for your layout */
    }

    .form-gradient-wrapper {
        background: linear-gradient(to right, #ff0000, #ff0070, #00b3ff82, #00ffffdb);
        padding: 4rem 1rem;
    }

    .form-section {
        /*background-color: rgba(0, 0, 0, 0.7);*/
        padding: 2rem;
        border-radius: 10px;
        max-width: 600px;
        margin: 0 auto;
        color: #fff;
    }

    /* Input styling */
    .custom-input {
        background-color: #fff;
        border: none;
        border-radius: 0;
        padding: 0.75rem;
        font-size: 1rem;
        box-shadow: none;
    }

        .custom-input:focus {
            border: none;
            outline: none;
            box-shadow: 0 0 0 0.2rem rgba(255, 0, 255, 0.25);
        }

    .gradient-input-wrapper {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        background: linear-gradient(to right, #ff0000, #ff0070, #00b3ff82, #00ffffdb);
        padding: 1rem;
        border-radius: 8px;
    }

    .gradient-label {
        color: #fff;
        font-weight: 500;
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

    .gradient-input {
        background: transparent;
        border: none;
        border-bottom: 1px solid #fff;
        color: #fff;
        font-size: 1rem;
        padding: 0.5rem 0;
        outline: none;
    }

        .gradient-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }

        .gradient-input:focus {
            border-bottom: 1px solid #00ffff;
        }

    .form-wrapper {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .form-wrapper {
        max-width: 600px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .form-group {
        margin-bottom: 1rem; /* reduced spacing between fields */
    }

    .form-label {
        font-weight: 500;
        margin-bottom: 0.25rem;
        color: #fff;
        font-size: 0.95rem;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        box-shadow: 0 0 0 1000px transparent inset !important;
        background-color: transparent !important;
        -webkit-text-fill-color: #fff !important; /* change text color if needed */
        transition: background-color 5000s ease-in-out 0s;
    }

    .form-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .form-input:focus {
        border-bottom: 1px solid #00ffff;
    }

    /* Responsive tweaks for mobile */
    @media (max-width: 576px) {
        .form-wrapper {
            padding: 1.5rem 1rem;
        }

        .form-label,
        .form-input {
            font-size: 0.9rem;
        }

        .form-group {
            margin-bottom: 0.75rem;
        }
    }

    .form-input::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .form-input:focus {
        border-bottom: 1px solid #00ffff;
    }


    /* Ensure footer is visible on mobile */
    @media (max-width: 576px) {
        footer {
            font-size: 0.8rem; /* slightly smaller text */
            padding: 2rem 1rem; /* more padding for touch comfort */
            line-height: 1.4;
        }
    }

    .invia-section {
        gap: 1rem;
        margin-top: 2rem;
    }

    .invia-btn {
        background-color: #000;
        color: #fff;
        border-radius: 30px;
        padding: 0.5rem 1.5rem;
        font-weight: 500;
        font-size: 1rem;
        border: none;
        transition: background-color 0.3s ease;
    }

        .invia-btn:hover {
            background-color: #00ffffdb;
        }

    .invia-text {
        flex: 1;
        color: #fff;
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0;
    }

    /* Responsive tweaks for mobile */
    @media (max-width: 576px) {
        .invia-section {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .invia-btn {
            width: 100%;
            margin-bottom: 1rem;
        }

        .invia-text {
            font-size: 0.9rem;
        }
    }


    .floating-group {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .form-input {
        width: 100%;
        padding: 0.75rem 0.5rem;
        font-size: 1rem;
        background: transparent;
        border: none;
        border-bottom: 1px solid #fff;
        color: #fff;
        outline: none;
    }

    .floating-label {
        position: absolute;
        left: 0.5rem;
        top: 0.75rem;
        color: #fff;
        font-size: 1rem;
        pointer-events: none;
        transition: all 0.2s ease;
    }

    /* Float label when input is focused or has content */
    .form-input:focus + .floating-label,
    .form-input:not(:placeholder-shown) + .floating-label {
        top: -0.6rem;
        left: 0;
        font-size: 0.8rem;
        color: #00ffff;
    }

    .floating-label.active {
        top: -0.6rem;
        left: 0;
        font-size: 0.8rem;
        color: #ffff;
    }

    /*------Css for land code drop-down--------*/
/* Top-level trigger (EN + arrow) */
.lang-trigger {
    color: #ffffff;
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

    .lang-trigger:hover {
        color: #f1f1f1;
    }

/* Dropdown menu container */
.lang-menu {
    background: #2e3235;
    border: none;
    border-radius: 10px;
    padding: 6px 0;
    min-width: 140px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

    /* Dropdown items */
    .lang-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: 10px 18px; /* equal space LEFT + RIGHT */
        font-size: 0.90rem;
        color: #ffffff;
        text-transform: lowercase;
        border-radius: 6px;
    }

        /* Hover effect */
        .lang-menu .dropdown-item:hover {
            background: #3c3f41;
            color: #ffffff;
        }

/* Responsive behavior for small screens */
@media (max-width: 480px) {
    .lang-menu .dropdown-item {
        padding: 12px 16px; /* slightly adjusted on mobile */
        font-size: 1rem;
    }
}



.lang-dropdown .dropdown-menu {
    top: 100% !important; /* directly below EN */
    left: auto !important;
    right: 0 !important; /* align right edges */
    transform: translateX(0) !important; /* no shift */
    margin-top: 6px; /* small gap below EN */
}
.lang-menu {
    background: #2e3235;
    border: none;
    border-radius: 10px;
    padding: 6px 0;
    min-width: 100px; /* 🔥 reduced width */
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

    .lang-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: 10px 16px;
        font-size: 0.95rem;
        color: #ffffff;
        text-transform: lowercase;
        border-radius: 6px;
    }

        .lang-menu .dropdown-item:hover {
            background: #3c3f41;
            color: #ffffff;
        }

/* Arrow small fix */
.lang-arrow {
    font-size: 0.8rem;
}

/* Visually-friendly wrapper */
.consent-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* optional: limit width so label wraps nicely */
    max-width: 900px;
}

/* hide but keep accessible native checkbox (screen-readers still see it) */
.real-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none; /* label toggles it */
}

/* label layout: box + text */
.consent-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

/* The visible checkbox (styled span) */
.checkbox-box {
    display: inline-block;
    width: clamp(18px, 4.2vw, 24px); /* responsive sizing */
    height: clamp(18px, 4.2vw, 24px);
    border: 2px solid #fff; /* white outline */
    border-radius: 6px; /* rounded-square */
    background: transparent;
    box-sizing: border-box;
    transition: background .12s ease, border-color .12s ease, transform .08s ease;
    flex-shrink: 0;
    position: relative;
}

    /* tick (drawn inside the .checkbox-box using its ::after) */
    .checkbox-box::after {
        content: "";
        position: absolute;
        display: block;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) rotate(45deg) scale(0); /* hidden by default */
        width: 6px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2.5px 2.5px 0;
        transition: transform .12s ease;
    }

/* when checked: change border and show tick */
.real-checkbox:checked + .consent-label .checkbox-box {
    border-color: #fff;
    background: transparent; /* keep transparent like your design */
}

    /* reveal tick by scaling it in */
    .real-checkbox:checked + .consent-label .checkbox-box::after {
        transform: translate(-50%,-50%) rotate(45deg) scale(1);
    }

/* hover / active feedback */
.consent-label:hover .checkbox-box {
    transform: translateY(-1px);
}

/* focus visible for keyboard users */
.real-checkbox:focus + .consent-label .checkbox-box {
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}

/* text styling next to the box */
.checkbox-text {
    color: #fff;
    font-size: 1rem;
    line-height: 1.4;
}

/* small-screen tweaks if you want */
@media (max-width: 480px) {
    .checkbox-text {
        font-size: 0.95rem;
    }

    .checkbox-box {
        width: clamp(16px, 6vw, 20px);
        height: clamp(16px,6vw,20px);
    }
}

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 60px; /* adjust for your text */
}

.marquee-track {
    position: absolute;
    white-space: nowrap;
    display: flex; /* ensures items line up horizontally */
    gap: 5px;
}

.marquee-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.fs-4r {
    font-size:4rem !important
}
.marquee-track {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 14s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-70%);
    }
    /* shift by half if doubled text */
}

/* FIXED animation — slides EXACT width of original text */
@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Instead of -50%, use -100% of content width */
        transform: translateX(-100%);
    }
}


.parallax-container {
    position: relative;
    height: 600px; /* Default for desktop */
    overflow: hidden;
    margin-top: 30px;
}

/* Tablet screens (≤ 768px) */
@media (max-width: 768px) {
    .parallax-container {
        height: 300px; /* Slightly smaller for tablets */
    }
}

/* Mobile screens (≤ 576px) */
@media (max-width: 576px) {
    .parallax-container {
        height: 200px; /* Compact height for mobile */
    }
}


/* all layers */
.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* background SVG */
.layer-background .parallax-image {
    width: 100%;
    opacity: 0.50;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Foreground text */
.layer-foreground {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
    padding: 1px;
}

    .layer-foreground .text-center {
        font-size: 1.8rem;
        line-height: 1.5;
    }

/* Smooth transitions */
.parallax-layer {
    will-change: transform;
}

    .parallax-layer.layer-background {
       /* background: radial-gradient( circle at center, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 70% );*/

    }

.parallax-section-bg {
    padding: 0px 0;
}

.parallax-image {
    opacity: 0.25;
    filter: invert(1) brightness(200%); /* makes the lines white & visible */
}

.signature-section {
    padding: 51px 0px;
    text-align: center;
}
.signature-img {
    mix-blend-mode: normal !important;
    filter: none !important;
    opacity: 1.25;
    /* Fixed size for desktop */
    width: 794px;
    height: auto; /* keep aspect ratio */
    display: block;
    margin: 0 auto; /* center the image */
}

/* Tablet screens (≤ 768px) */
@media (max-width: 768px) {
    .signature-img {
        width: 470px; /* smaller width for tablets */
    }
}

/* Mobile screens (≤ 576px) */
@media (max-width: 576px) {
    .signature-img {
        width: 200px; /* compact size for mobile */
    }
}

/*.marquee-track span {
    margin-right: 30px;*/ /* default spacing */
/*}

@media (max-width: 600px) {
    .marquee-track span {
        margin-right: 90px;*/ /* extra spacing on small screens */
    /*}
}*/

    /*----------------END------------------*/

    footer {
        background-color: #121212;
        color: #aaa;
        padding: 1.5rem 1rem;
        text-align: center;
        font-size: 0.9rem;
        position: relative;
        width: 100%;
    }

html, body {
    font-family: 'Space Grotesk', sans-serif !important;
}