﻿/* =====================================================
   DESTINATION SECTION
   domestic and internation section travel part
    package part : uttrakhand , goa etc 
===================================================== */
/* =================================================================================================
   DESTINATION SECTION
===================================================== */

.destination-packages-section {
    padding: 80px 0;
    background: #f7f8fb;
}

    .destination-packages-section .container {
        max-width: 1280px;
    }


/* =====================================================
   SECTION HEADING
===================================================== */

.destination-section-heading {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

    .destination-section-heading h2 {
        margin-bottom: 14px;
        color: #111827;
        font-size: 42px;
        font-weight: 800;
        line-height: 1.2;
    }

        .destination-section-heading h2::after {
            content: "";
            display: block;
            width: 70px;
            height: 4px;
            margin: 16px auto 0;
            background: #ff6600;
            border-radius: 999px;
        }

    .destination-section-heading p {
        margin: 0;
        color: #6b7280;
        font-size: 16px;
        line-height: 1.8;
    }


/* =====================================================
   DESTINATION CARD
===================================================== */

.destination-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(15, 34, 58, 0.08);
    transition: all 0.3s ease;
}

    .destination-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(15, 34, 58, 0.14);
    }


/* =====================================================
   CARD LINK
===================================================== */

.destination-card-link {
    flex: 1;
    display: block;
    color: inherit;
    text-decoration: none !important;
}

    .destination-card-link:hover {
        color: inherit;
        text-decoration: none !important;
    }


/* =====================================================
   CARD IMAGE
===================================================== */

.destination-card-media {
    position: relative;
    height: 250px;
    overflow: hidden;
}

    .destination-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.45s ease;
    }

.destination-card:hover .destination-card-media img {
    transform: scale(1.06);
}

.destination-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(0,0,0,0.50), transparent 60% );
}


/* =====================================================
   DURATION BADGE
===================================================== */

.destination-duration {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    padding: 7px 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    background: #ff6600;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(255, 102, 0, 0.35);
}


/* =====================================================
   CARD CONTENT
===================================================== */

.destination-card-content {
    padding: 20px 18px 10px;
    text-align: center;
}

    .destination-card-content h3 {
        margin-bottom: 10px;
        color: #111827;
        font-size: 24px;
        font-weight: 800;
        line-height: 1.3;
    }

    .destination-card-content p {
        margin: 0;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.7;
    }


/* =====================================================
   CARD FOOTER
===================================================== */

.destination-card-footer {
    padding: 0 18px 24px;
    text-align: center;
}

    .destination-card-footer .btn {
        min-width: 150px;
        padding: 10px 22px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        background: #1565d8;
        border: none;
        border-radius: 999px;
        box-shadow: 0 8px 18px rgba(21, 101, 216, 0.22);
        transition: all 0.3s ease;
    }

        .destination-card-footer .btn:hover {
            color: #fff;
            background: #0d57c7;
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(21, 101, 216, 0.28);
        }

        .destination-card-footer .btn:focus {
            color: #fff;
            box-shadow: 0 0 0 0.2rem rgba(21, 101, 216, 0.2);
        }


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1199.98px) {

    .destination-card-media {
        height: 230px;
    }
}


@media (max-width: 991.98px) {

    .destination-packages-section {
        padding: 70px 0;
    }

    .destination-section-heading h2 {
        font-size: 34px;
    }

    .destination-card-media {
        height: 220px;
    }
}


@media (max-width: 767.98px) {

    .destination-packages-section {
        padding: 55px 0;
    }

    .destination-section-heading {
        margin-bottom: 40px;
    }

        .destination-section-heading h2 {
            font-size: 28px;
        }

        .destination-section-heading p {
            font-size: 14px;
        }

    .destination-card-media {
        height: 210px;
    }

    .destination-card-content h3 {
        font-size: 22px;
    }
}


@media (max-width: 575.98px) {

    .destination-card-media {
        height: 200px;
    }

    .destination-card-footer .btn {
        width: 100%;
    }
}
/* =====================================================================
   TRAVEL INTRO SECTION
   Domestic + International Shared CSS
===================================================================== */

.travel-intro {
    padding: 80px 0;
    text-align: center;
    background: #f8fafc;
}

    .travel-intro h2 {
        margin-bottom: 18px;
        color: #111827;
        font-size: 38px;
        font-weight: 800;
        line-height: 1.3;
    }

        .travel-intro h2 span {
            color: #ff6600;
        }

    .travel-intro p {
        max-width: 760px;
        margin: 0 auto 14px;
        color: #6b7280;
        font-size: 16px;
        line-height: 1.8;
    }


/* =====================================================
   TRAVEL GRID SECTION
===================================================== */

.travel-grid-section {
    padding: 80px 0;
    background: #fff;
}

    .travel-grid-section .container {
        max-width: 1280px;
    }


/* =====================================================
   TRAVEL CARD
===================================================== */

.travel-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 34, 58, 0.10);
    transition: all 0.35s ease;
}

    .travel-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(15, 34, 58, 0.16);
    }

    .travel-card img {
        width: 100%;
        height: 320px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .travel-card:hover img {
        transform: scale(1.08);
    }


/* =====================================================
   CARD OVERLAY
===================================================== */

.travel-card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    background: linear-gradient( to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.08) );
}

    .travel-card-overlay h4 {
        margin-bottom: 6px;
        color: #fff;
        font-size: 26px;
        font-weight: 800;
    }

    .travel-card-overlay span {
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        opacity: 0.95;
    }


/* =====================================================
   TRAVEL EXPERIENCE SECTION
===================================================== */

.travel-experience {
    padding: 80px 0;
    background: #f8fafc;
}

    .travel-experience .row {
        align-items: center;
    }

    .travel-experience h2 {
        margin-bottom: 14px;
        color: #111827;
        font-size: 36px;
        font-weight: 800;
    }

    .travel-experience p {
        color: #6b7280;
        font-size: 16px;
        line-height: 1.8;
    }


/* =====================================================
   EXPERIENCE GRID
===================================================== */

.travel-exp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}


/* =====================================================
   INTERNATIONAL EXPERIENCE GRID
===================================================== */

.international-page .travel-exp-grid {
    grid-template-columns: repeat(3, 1fr);
}


/* =====================================================
   EXPERIENCE CARD
===================================================== */

.travel-exp-card {
    min-height: 160px;
    padding: 28px 18px;
    text-align: center;
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(15, 34, 58, 0.08);
    box-shadow: 0 6px 18px rgba(15, 34, 58, 0.06);
    transition: all 0.3s ease;
}

    .travel-exp-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 30px rgba(15, 34, 58, 0.12);
    }

    .travel-exp-card i {
        margin-bottom: 16px;
        color: #ff6600;
        font-size: 34px;
    }

    .travel-exp-card h4 {
        margin-bottom: 8px;
        color: #111827;
        font-size: 17px;
        font-weight: 700;
    }

    .travel-exp-card span {
        display: block;
        color: #6b7280;
        font-size: 14px;
        line-height: 1.6;
    }


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .travel-intro,
    .travel-grid-section,
    .travel-experience {
        padding: 70px 0;
    }

        .travel-intro h2,
        .travel-experience h2 {
            font-size: 32px;
        }

    .travel-card img {
        height: 280px;
    }

    .travel-exp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 767.98px) {

    .travel-intro,
    .travel-grid-section,
    .travel-experience {
        padding: 55px 0;
    }

        .travel-intro h2,
        .travel-experience h2 {
            font-size: 28px;
        }

        .travel-intro p,
        .travel-experience p {
            font-size: 14px;
        }

    .travel-card img {
        height: 240px;
    }

    .travel-card-overlay {
        padding: 20px;
    }

        .travel-card-overlay h4 {
            font-size: 22px;
        }

    .travel-exp-grid {
        grid-template-columns: 1fr;
    }

    .travel-exp-card {
        min-height: auto;
    }
}


@media (max-width: 575.98px) {

    .travel-card img {
        height: 220px;
    }
}
/* =======================================================================================================================================
   PACKAGE PAGE
   Shared Package Detail Page CSS
===================================================================== */

.package-page {
    font-family: inherit;
}


    /* =====================================================
   PACKAGE SECTION
===================================================== */

    .package-page .pkg-section {
        padding: 80px 0;
    }

        .package-page .pkg-section .container {
            max-width: 1280px;
        }


    /* =====================================================
   SEO SECTION
===================================================== */

    .package-page .pkg-title {
        margin-bottom: 18px;
        color: #111827;
        font-size: 42px;
        font-weight: 800;
        line-height: 1.3;
    }

    .package-page .pkg-highlight {
        margin-bottom: 14px;
        color: #ff6600;
        font-size: 18px;
        font-weight: 700;
    }

    .package-page .pkg-text {
        color: #6b7280;
        font-size: 16px;
        line-height: 1.9;
    }


    /* =====================================================
   FEATURES
===================================================== */

    .package-page .pkg-features {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 24px;
    }

    .package-page .pkg-feature {
        padding: 12px 16px;
        color: #374151;
        font-size: 14px;
        font-weight: 600;
        background: #f8fafc;
        border-radius: 12px;
        border: 1px solid rgba(15, 34, 58, 0.06);
    }


    /* =====================================================
   TRUST BOX
===================================================== */

    .package-page .pkg-trust-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
        color: #111827;
        font-weight: 600;
    }

    .package-page .pkg-cta-link {
        color: #ff6600;
        font-weight: 700;
        text-decoration: none;
        transition: 0.3s ease;
    }

        .package-page .pkg-cta-link:hover {
            color: #e65c00;
        }


    /* =====================================================
   SEO IMAGE
===================================================== */

    .package-page .pkg-seo-img {
        overflow: hidden;
        border-radius: 24px;
        box-shadow: 0 18px 45px rgba(15, 34, 58, 0.12);
    }

        .package-page .pkg-seo-img img {
            width: 100%;
            height: auto;
            display: block;
        }


    /* =====================================================
   SECTION HEADINGS
===================================================== */

    .package-page .pkg-section h2 {
        margin-bottom: 18px;
        color: #111827;
        font-size: 38px;
        font-weight: 800;
        line-height: 1.3;
    }

        .package-page .pkg-section h2 span {
            color: #ff6600;
        }


    /* =====================================================
   PACKAGE CARD
===================================================== */

    .package-page .pkg-card {
        height: 100%;
        overflow: hidden;
        background: #fff;
        border-radius: 20px;
        border: 1px solid rgba(15, 34, 58, 0.06);
        box-shadow: 0 10px 30px rgba(15, 34, 58, 0.08);
        transition: all 0.35s ease;
    }

        .package-page .pkg-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 45px rgba(15, 34, 58, 0.14);
        }


    /* =====================================================
   PACKAGE IMAGE
===================================================== */

    .package-page .pkg-img-box {
        position: relative;
        overflow: hidden;
    }

        .package-page .pkg-img-box img {
            width: 100%;
            height: 260px;
            object-fit: cover;
            transition: transform 0.45s ease;
        }

    .package-page .pkg-card:hover .pkg-img-box img {
        transform: scale(1.08);
    }


    /* =====================================================
   PACKAGE BADGE
===================================================== */

    .package-page .pkg-badge-img {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        padding: 8px 14px;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        border-radius: 999px;
        backdrop-filter: blur(6px);
    }

        .package-page .pkg-badge-img.popular {
            background: linear-gradient(135deg, #ff6600, #ff8533);
        }

        .package-page .pkg-badge-img.bestseller {
            background: linear-gradient(135deg, #1565d8, #3b82f6);
        }

        .package-page .pkg-badge-img.romantic {
            background: linear-gradient(135deg, #ec4899, #f472b6);
        }


    /* =====================================================
   PACKAGE CARD BODY
===================================================== */

    .package-page .pkg-card-body {
        padding: 22px;
    }

    .package-page .pkg-card-title {
        margin-bottom: 10px;
        color: #111827;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.4;
    }

    .package-page .pkg-card-location {
        margin-bottom: 10px;
        color: #ff6600;
        font-size: 14px;
        font-weight: 700;
    }

    .package-page .pkg-card-body p {
        margin-bottom: 0;
        color: #6b7280;
        font-size: 15px;
        line-height: 1.7;
    }


    /* =====================================================
   PACKAGE CARD FOOTER
===================================================== */

    .package-page .pkg-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20px;
    }

        .package-page .pkg-card-footer span {
            color: #374151;
            font-size: 14px;
            font-weight: 700;
        }


    /* =====================================================
   PACKAGE BUTTON
===================================================== */

    .package-page .pkg-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        background: #1565d8;
        border-radius: 999px;
        text-decoration: none;
        transition: all 0.3s ease;
    }

        .package-page .pkg-btn:hover {
            color: #fff;
            background: #0d57c7;
            transform: translateY(-2px);
        }


    /* =====================================================
   GALLERY
===================================================== */

    .package-page .pkg-gallery {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
    }

        .package-page .pkg-gallery img {
            width: 100%;
            height: 320px;
            object-fit: cover;
            transition: transform 0.45s ease;
        }

        .package-page .pkg-gallery:hover img {
            transform: scale(1.08);
        }

    .package-page .pkg-gallery-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 24px;
        background: linear-gradient( to top, rgba(0,0,0,0.72), rgba(0,0,0,0.08) );
    }

        .package-page .pkg-gallery-overlay h5 {
            margin-bottom: 4px;
            color: #fff;
            font-size: 24px;
            font-weight: 800;
        }

        .package-page .pkg-gallery-overlay span {
            color: rgba(255,255,255,0.92);
            font-size: 14px;
        }


    /* =====================================================
   SUCCESS MESSAGE
===================================================== */

    .package-page .pkg-success {
        margin: 0 auto 30px;
        padding: 16px 22px;
        max-width: 700px;
        color: #166534;
        font-weight: 700;
        background: #dcfce7;
        border-radius: 12px;
    }


    /* =====================================================
   FORM BOX
===================================================== */

    .package-page .pkg-form-box {
        display: flex;
        gap: 40px;
        padding: 40px;
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 15px 40px rgba(15, 34, 58, 0.08);
    }

    .package-page .pkg-form-left,
    .package-page .pkg-form-right {
        flex: 1;
    }


        /* =====================================================
   FORM CONTENT
===================================================== */

        .package-page .pkg-form-left h2 {
            margin-bottom: 14px;
            color: #111827;
            font-size: 34px;
            font-weight: 800;
        }

        .package-page .pkg-form-left p {
            color: #6b7280;
            font-size: 16px;
            line-height: 1.8;
        }

    .package-page .pkg-form-benefits {
        margin-top: 24px;
        padding-left: 0;
        list-style: none;
    }

        .package-page .pkg-form-benefits li {
            margin-bottom: 10px;
            color: #374151;
            font-weight: 600;
        }

    .package-page .pkg-form-trust {
        margin-top: 24px;
        color: #111827;
        font-weight: 700;
    }


    /* =====================================================
   FORM FIELDS
===================================================== */

    .package-page .pkg-form-right input,
    .package-page .pkg-form-right textarea,
    .package-page .pkg-form-right select {
        width: 100%;
        padding: 14px 16px;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        outline: none;
        transition: 0.3s ease;
    }

        .package-page .pkg-form-right input:focus,
        .package-page .pkg-form-right textarea:focus,
        .package-page .pkg-form-right select:focus {
            border-color: #1565d8;
            box-shadow: 0 0 0 4px rgba(21, 101, 216, 0.08);
        }


    /* =====================================================
   SUBMIT BUTTON
===================================================== */

    .package-page .pkg-submit-btn {
        width: 100%;
        padding: 14px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        background: #ff6600;
        border: none;
        border-radius: 14px;
        transition: all 0.3s ease;
    }

        .package-page .pkg-submit-btn:hover {
            background: #e65c00;
            transform: translateY(-2px);
        }


    /* =====================================================
   FORM NOTE
===================================================== */

    .package-page .pkg-form-note {
        margin-top: 14px;
        color: #6b7280;
        font-size: 13px;
        text-align: center;
    }


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 991.98px) {

    .package-page .pkg-section {
        padding: 70px 0;
    }

        .package-page .pkg-title,
        .package-page .pkg-section h2 {
            font-size: 34px;
        }

    .package-page .pkg-form-box {
        flex-direction: column;
    }

    .package-page .pkg-gallery img,
    .package-page .pkg-img-box img {
        height: 240px;
    }
}


@media (max-width: 767.98px) {

    .package-page .pkg-section {
        padding: 55px 0;
    }

        .package-page .pkg-title,
        .package-page .pkg-section h2 {
            font-size: 28px;
        }

    .package-page .pkg-text,
    .package-page .pkg-form-left p {
        font-size: 14px;
    }

    .package-page .pkg-features {
        grid-template-columns: 1fr;
    }

    .package-page .pkg-form-box {
        padding: 24px;
    }

    .package-page .pkg-card-body {
        padding: 18px;
    }

    .package-page .pkg-card-title {
        font-size: 20px;
    }

    .package-page .pkg-gallery img,
    .package-page .pkg-img-box img {
        height: 220px;
    }
}


@media (max-width: 575.98px) {

    .package-page .pkg-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .package-page .pkg-btn {
        width: 100%;
    }

    .package-page .pkg-form-left h2 {
        font-size: 28px;
    }
}