/* =========================
           GLOBAL
        ========================== */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        :root {

            --dark: #071522;

            --dark-light: #102434;

            --dark-card: #122635;

            --gold: #d6b164;

            --gold-light: #e4c67e;

            --white: #f5f3ee;

            --text: #c7c8c7;

            --border: rgba(214, 177, 100, 0.25);

        }


        body {

            font-family: "DM Sans", sans-serif;

            background: var(--dark);

            color: var(--white);

            overflow-x: hidden;

        }




        /* =========================
           NAVBAR
        ========================== */

        .navbar {

            width: 100%;

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 22px 5%;

            position: absolute;

            top: 0;

            left: 0;

            z-index: 100;

        }


        .logo {

            display: flex;

            align-items: center;

            gap: 12px;

            font-size: 18px;

            font-weight: 700;

            letter-spacing: 2px;

        }


        .logo-icon {

            width: 48px;

            height: 48px;

            border-radius: 50%;

            background: rgba(255,255,255,0.08);

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--gold);

            font-size: 22px;

        }


        .nav-links {

            display: flex;

            align-items: center;

            gap: 38px;

        }


        .nav-links a {

            color: #d8d6d1;

            text-decoration: none;

            font-size: 16px;

            font-weight: 600;

            transition: 0.3s;

        }


        .nav-links a:hover {

            color: var(--gold);

        }


        .nav-button {

            border: 1px solid rgba(214,177,100,0.5);

            padding: 14px 24px;

            border-radius: 40px;

        }


        /* =========================
           HERO
        ========================== */

        .hero {

            min-height: 520px;

            display: flex;

            align-items: center;

            padding: 130px 8% 80px;

            position: relative;

            overflow: hidden;

            background:

                linear-gradient(
                    90deg,
                    rgba(5,18,30,0.96) 0%,
                    rgba(5,18,30,0.80) 45%,
                    rgba(5,18,30,0.55) 100%
                ),

                url("assets/CUS.png");

            background-size: cover;

            background-position: center;

        }


        /* FALLBACK BACKGROUND */

        .hero::before {

            content: "";

            position: absolute;

            inset: 0;

            background:

                radial-gradient(
                    circle at 80% 20%,
                    rgba(214,177,100,0.18),
                    transparent 35%
                );

        }


        .hero-content {

            max-width: 850px;

            position: relative;

            z-index: 2;

        }


        .small-title {

            display: flex;

            align-items: center;

            gap: 14px;

            color: #d7d1c7;

            font-size: 14px;

            font-weight: 700;

            letter-spacing: 4px;

            margin-bottom: 25px;

        }


        .small-line {

            width: 35px;

            height: 2px;

            background: var(--gold);

        }


        .hero h1 {

            font-family: "Playfair Display", serif;

            font-size: clamp(55px, 8vw, 100px);

            font-weight: 500;

            line-height: 0.95;

            margin-bottom: 25px;

        }


        .hero h1 span {

            color: var(--gold);

            font-style: italic;

        }


        .hero p {

            max-width: 600px;

            font-size: 19px;

            line-height: 1.7;

            color: #d0d0ce;

        }

/* =========================
   NAVIGATION
========================= */

.nav {
    width: min(1180px, calc(100% - 48px));
    margin: 22px auto 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    position: relative;
    z-index: 10;
}


/* LOGO */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;

    font-weight: 700;
    letter-spacing: .08em;
    font-size: .82rem;
}


.brand img {
    width: 60px;
    height: 79px;

    border-radius: 50px;
}


.brand em {
    font-style: normal;
    color: #D8B66A;
}


/* NAVIGATION LINKS */

.nav-links {
    display: flex;
    align-items: center;

    gap: 4px;

    list-style: none;
}


.nav-links a {
    display: flex;
    align-items: center;

    gap: 6px;

    padding: 11px 13px;

    color: rgba(255, 255, 255, .82);

    font-size: .82rem;
    font-weight: 600;

    text-decoration: none;

    transition: .2s;
}


.nav-links a:hover {
    color: #ffffff;
}


/* PLAN MY TRIP BUTTON */

.nav-links .nav-cta {

    margin-left: 8px;

    border: 1px solid rgba(216, 182, 106, .52);

    border-radius: 999px;

    padding: 11px 16px;

    background: rgba(16, 42, 67, .40);

    backdrop-filter: blur(10px);
}


/* MOBILE MENU BUTTON */

.menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255, 255, 255, .3);

    border-radius: 12px;

    color: #ffffff;

    background: rgba(0, 0, 0, .15);

    cursor: pointer;
}


/* MOBILE */

@media(max-width: 900px) {

    .nav-links {

        display: none;

        position: absolute;

        right: 0;
        top: 58px;

        min-width: 230px;

        padding: 10px;

        background: rgba(12, 27, 21, .97);

        border: 1px solid rgba(255, 255, 255, .15);

        flex-direction: column;

        align-items: stretch;
    }


    .nav-links.open {
        display: flex;
    }


    .nav-links .nav-cta {
        margin: 5px 0;
    }


    .menu-toggle {
        display: block;
    }

}


@media(max-width: 600px) {

    .nav {
        width: calc(100% - 28px);
    }

}
        /* =========================
           MAIN FORM
        ========================== */

        .main-container {

            max-width: 1200px;

            margin: auto;

            padding: 90px 25px;

        }


        .intro {

            text-align: center;

            max-width: 700px;

            margin: auto auto 70px;

        }


        .intro h2 {

            font-family: "Playfair Display", serif;

            font-size: 46px;

            font-weight: 500;

            margin-bottom: 18px;

        }


        .intro p {

            color: var(--text);

            line-height: 1.7;

            font-size: 17px;

        }


        /* =========================
           FORM SECTION
        ========================== */

        .form-section {

            background:

                linear-gradient(
                    135deg,
                    rgba(18,38,53,0.95),
                    rgba(10,27,39,0.95)
                );

            border: 1px solid var(--border);

            border-radius: 20px;

            padding: 40px;

            margin-bottom: 30px;

            position: relative;

        }


        .section-number {

            color: var(--gold);

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 3px;

            margin-bottom: 12px;

        }


        .form-section h2 {

            font-family: "Playfair Display", serif;

            font-size: 32px;

            font-weight: 500;

            margin-bottom: 10px;

        }


        .section-text {

            color: var(--text);

            margin-bottom: 30px;

            line-height: 1.6;

        }


        /* =========================
           DESTINATION CAROUSEL
        ========================== */

        .carousel-wrapper {

            display: flex;

            align-items: center;

            gap: 15px;

        }


        .carousel {

            display: flex;

            gap: 18px;

            overflow-x: auto;

            scroll-behavior: smooth;

            width: 100%;

            padding: 10px 3px 20px;

            scrollbar-width: none;

        }


        .carousel::-webkit-scrollbar {

            display: none;

        }


        .destination-card {

            min-width: 230px;

            height: 280px;

            border-radius: 16px;

            position: relative;

            overflow: hidden;

            cursor: pointer;

            border: 1px solid rgba(255,255,255,0.08);

            transition: 0.4s;

            display: flex;

            align-items: flex-end;

        }


        .destination-card::before {

            content: "";

            position: absolute;

            inset: 0;

            background:

                linear-gradient(
                    to top,
                    rgba(3,10,16,0.95),
                    rgba(3,10,16,0.1)
                );

            z-index: 1;

        }


        .destination-card:hover {

            transform: translateY(-8px);

            border-color: var(--gold);

        }


        .destination-card.selected {

            border: 2px solid var(--gold);

            transform: translateY(-8px);

            box-shadow:

                0 15px 40px rgba(214,177,100,0.18);

        }


        .destination-name {

            position: relative;

            z-index: 2;

            padding: 25px;

            font-family: "Playfair Display", serif;

            font-size: 24px;

        }


        /* DESTINATION BACKGROUNDS */

        .silk {
            background:
            url("assets/C1.jpeg") center/cover;
        }


        .kalimpong {
            background:
            url("assets/C2.jpeg") center/cover;
        }


        .darjeeling {
            background:
            url("assets/C3.jpeg") center/cover;
        }


        .kashmir {
            background:
            url("assets/C4.jpeg") center/cover;
        }


        .andaman {
            background:
            url("assets/C5.jpeg") center/cover;
        }


        .thailand {
            background:
            url("assets/C6.jpeg") center/cover;
        }


        .rajasthan {
            background:
            url("assets/C7.jpeg") center/cover;
        }


        .puri {
            background:
            url("assets/C8.jpeg") center/cover;
        }


        .shimla {
            background:
            url("assets/C9.jpeg") center/cover;
        }


        .shillong {
            background:
            url("assets/C10.jpeg") center/cover;
        }


        .arunachal {
            background:
            url("assets/C11.jpeg") center/cover;
        }


        .vizag {
            background:
            url("assets/C12.jpeg") center/cover;
        }


        .dooars {
            background:
            url("assets/C13.jpeg") center/cover;
        }


        .kerala {
            background:
            url("assets/C14.jpeg") center/cover;
        }


        /* CAROUSEL BUTTON */

        .carousel-btn {

            width: 48px;

            height: 48px;

            border-radius: 50%;

            border: 1px solid var(--border);

            background: transparent;

            color: var(--gold);

            font-size: 22px;

            cursor: pointer;

            transition: 0.3s;

            flex-shrink: 0;

        }


        .carousel-btn:hover {

            background: var(--gold);

            color: var(--dark);

        }


        /* =========================
           QUESTION
        ========================== */

        .question {

            margin-bottom: 28px;

        }


        .question-title {

            display: block;

            font-size: 17px;

            font-weight: 600;

            margin-bottom: 15px;

        }

        .nav{width:min(1180px,calc(100% - 48px));margin:22px auto 0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10}
        .nav-links{display:flex;align-items:center;gap:4px;list-style:none}
.nav-links a{display:flex;align-items:center;gap:6px;padding:11px 13px;color:rgba(255,255,255,.82);font-size:.82rem;font-weight:600;transition:.2s}
.nav-links a:hover{color:#fff}
.nav-links .nav-cta{margin-left:8px;border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:11px 16px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px)}

        /* =========================
           OPTIONS
        ========================== */

        .option-group {

            display: flex;

            flex-wrap: wrap;

            gap: 12px;

        }


        .option-group input {

            display: none;

        }


        .option-group label {

            padding: 13px 24px;

            border: 1px solid rgba(255,255,255,0.15);

            border-radius: 40px;

            color: #d9d9d7;

            cursor: pointer;

            transition: 0.3s;

            font-size: 15px;

        }


        .option-group label:hover {

            border-color: var(--gold);

            color: var(--gold);

        }


        .option-group input:checked + label {

            background: var(--gold);

            color: #101820;

            border-color: var(--gold);

        }


        /* =========================
           INPUTS
        ========================== */

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        textarea {

            width: 100%;

            background: rgba(255,255,255,0.04);

            border: 1px solid rgba(255,255,255,0.15);

            color: white;

            padding: 15px 17px;

            border-radius: 10px;

            outline: none;

            font-size: 16px;

            font-family: inherit;

            transition: 0.3s;

        }


        input:focus,
        textarea:focus {

            border-color: var(--gold);

            background: rgba(255,255,255,0.06);

        }


        textarea {

            min-height: 130px;

            resize: vertical;

        }


        /* =========================
           CONDITIONAL
        ========================== */

        .conditional {

            display: none;

            margin-top: 22px;

            padding: 25px;

            background: rgba(214,177,100,0.05);

            border-left: 2px solid var(--gold);

            border-radius: 10px;

        }


        /* =========================
           GRID
        ========================== */

        .grid-3 {

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            gap: 25px;

        }


        .grid-2 {

            display: grid;

            grid-template-columns: repeat(2, 1fr);

            gap: 25px;

        }


        .full {

            grid-column: 1 / -1;

        }


        /* =========================
           SUBMIT
        ========================== */

        .submit-section {

            text-align: center;

            padding-top: 30px;

        }


        .submit-btn {

            border: none;

            background: var(--gold);

            color: #101820;

            padding: 18px 38px;

            border-radius: 40px;

            font-size: 16px;

            font-weight: 700;

            cursor: pointer;

            transition: 0.3s;

        }


        .submit-btn:hover {

            background: var(--gold-light);

            transform: translateY(-3px);

        }


        .success-message {

            display: none;

            margin-top: 30px;

            padding: 25px;

            border: 1px solid rgba(214,177,100,0.4);

            border-radius: 12px;

            color: var(--gold-light);

            background: rgba(214,177,100,0.06);

        }


        /* =========================
           FOOTER
        ========================== */

        footer {

            border-top: 1px solid rgba(255,255,255,0.08);

            padding: 30px 5%;

            text-align: center;

            color: #8c9296;

        }


        /* =========================
           MOBILE
        ========================== */

        @media (max-width: 850px) {


            .nav-links {

                display: none;

            }


            .navbar {

                padding: 20px;

            }


            .hero {

                min-height: 500px;

                padding: 130px 25px 70px;

            }


            .hero h1 {

                font-size: 60px;

            }


            .main-container {

                padding: 65px 18px;

            }


            .form-section {

                padding: 25px;

            }


            .grid-3,
            .grid-2 {

                grid-template-columns: 1fr;

            }


            .carousel-btn {

                display: none;

            }


            .destination-card {

                min-width: 210px;

            }


        }


        @media (max-width: 500px) {


            .hero h1 {

                font-size: 48px;

            }


            .hero p {

                font-size: 16px;

            }


            .intro h2 {

                font-size: 36px;

            }


            .form-section h2 {

                font-size: 27px;

            }


        }
/* =====================================
   GENERATED QUOTATION
===================================== */

.quotation-result {

    max-width: 1000px;

    margin: 50px auto;

    padding: 45px;

    background:
        linear-gradient(
            135deg,
            #122635,
            #0b1d2a
        );

    border: 1px solid rgba(214,177,100,0.35);

    border-radius: 20px;

    box-shadow:
        0 15px 50px rgba(0,0,0,0.35);

    color: #f5f3ee;

}


.quotation-header {

    text-align: center;

    padding-bottom: 25px;

    border-bottom:
        1px solid rgba(214,177,100,0.25);

}


.quotation-header h2 {

    font-family:
        "Playfair Display", serif;

    font-size: 36px;

    font-weight: 500;

    color: #d6b164;

    margin-bottom: 12px;

}


.quotation-header p {

    color: #c7c8c7;

}


.quotation-summary {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

    margin: 35px 0;

}


.quotation-summary div {

    padding: 22px;

    background:
        rgba(255,255,255,0.04);

    border:

        1px solid
        rgba(214,177,100,0.18);

    border-radius: 12px;

    text-align: center;

}


.quotation-summary span {

    display: block;

    font-size: 14px;

    color: #c7c8c7;

    margin-bottom: 10px;

}


.quotation-summary strong {

    font-size: 19px;

    color: #d6b164;

}


.quotation-content {

    line-height: 1.9;

    font-size: 16px;

    color: #e5e3de;

    white-space: normal;

}


.quotation-contact {

    margin-top: 40px;

    padding: 28px;

    text-align: center;

    border-radius: 12px;

    background:

        rgba(214,177,100,0.08);

    border:

        1px solid
        rgba(214,177,100,0.25);

}


.quotation-contact h3 {

    font-family:
        "Playfair Display", serif;

    font-size: 24px;

    color: #d6b164;

    margin-bottom: 12px;

}


.quotation-contact p {

    color: #c7c8c7;

    margin-bottom: 12px;

}


.quotation-contact strong {

    font-size: 21px;

    color: #f5f3ee;

}


/* MOBILE */

@media (max-width: 768px) {

    .quotation-result {

        margin: 30px 15px;

        padding: 25px 20px;

    }


    .quotation-summary {

        grid-template-columns:
            1fr;

    }


    .quotation-header h2 {

        font-size: 28px;

    }

}