/*=========================================
    GOOGLE FONT
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*=========================================
    ROOT VARIABLES
=========================================*/

:root {

    --primary: #2d8f60;
    --primary-dark: #1d6e49;
    --primary-light: #effaf4;

    --white: #ffffff;
    --black: #1d1d1d;

    --gray: #777;
    --gray-light: #f8f9fa;

    --border: #ececec;

    --shadow-sm:
        0 10px 30px rgba(0,0,0,.08);

    --shadow-md:
        0 15px 40px rgba(0,0,0,.12);

    --shadow-lg:
        0 25px 60px rgba(0,0,0,.18);

}


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

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    overflow-x:hidden;

    color:var(--black);

    background:#fff;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

    margin:0;
    padding:0;

}

section{

    position:relative;

}

.form-control,
.form-select{

    height:55px;

    border-radius:15px;

    border:1px solid #e6e6e6;

    box-shadow:none !important;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

}


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

.custom-navbar{

    padding:18px 0;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    transition:.4s;

    z-index:999;

}

.custom-navbar.scrolled{

    background:#fff;

    box-shadow:
        0 5px 30px rgba(0,0,0,.08);

}

.logo{

    font-size:28px;

    font-weight:800;

    color:#fff;

}

.logo i{

    margin-right:10px;

}

.custom-navbar.scrolled .logo{

    color:var(--primary);

}

.nav-link{

    color:#fff;

    font-weight:500;

    margin:0 10px;

    transition:.3s;

}

.nav-link:hover,
.nav-link.active{

    color:#d6ffe8;

}

.custom-navbar.scrolled .nav-link{

    color:#333;

}

.book-btn{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    height:50px;

    padding:0 28px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.book-btn:hover{

    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-3px);

}


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

.tour-hero{

    min-height:100vh;

    display:flex;
    align-items:flex-end;

    padding:180px 0 120px;

    background:

        linear-gradient(
            rgba(0,0,0,.30),
            rgba(0,0,0,.60)
        ),

        url('https://images.unsplash.com/photo-1573843981267-be1999ff37cd?w=1800')
        center/cover no-repeat;

    position:relative;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        radial-gradient(
            circle at center,
            rgba(45,143,96,.15),
            transparent 70%
        );

}

.hero-content{

    position:relative;

    z-index:5;

    max-width:800px;

}

.tour-category{

    display:inline-block;

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

    backdrop-filter:blur(20px);

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:72px;

    color:#fff;

    font-weight:800;

    line-height:1.1;

    margin-bottom:25px;

}

.hero-content p{

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

    font-size:18px;

    line-height:1.9;

    max-width:700px;

}


/*=========================================
    BREADCRUMB
=========================================*/

.tour-breadcrumb{

    position:relative;

    z-index:5;

    margin-bottom:60px;

}

.breadcrumb{

    margin:0;

}

.breadcrumb-item a{

    color:#fff;

    opacity:.8;

}

.breadcrumb-item.active{

    color:#fff;

}

.breadcrumb-item + .breadcrumb-item::before{

    color:#fff;

}


/*=========================================
    TOUR META
=========================================*/

.tour-meta{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    margin-top:40px;

}

.tour-meta div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:15px;

}

.tour-meta i{

    color:#7df2b7;

}


/*=========================================
    REVIEW
=========================================*/

.tour-review{

    margin-top:35px;

    display:flex;

    align-items:center;

    gap:20px;

}

.stars{

    color:#FFD43B;

    display:flex;

    gap:5px;

}

.tour-review span{

    color:#fff;

    font-size:15px;

}


/*=========================================
    MAIN SECTION
=========================================*/

.tour-details-section{

    padding:50px 0;

    background:#fff;

}

.section-heading{

    margin-bottom:30px;

}

.section-heading h2{

    font-size:38px;

    font-weight:800;

    color:var(--black);

}

.section-heading h3{

    font-size:20px;

    font-weight:700;

}

.section-heading p{

    color:var(--gray);

    font-size:16px;

    margin-top:8px;

}


/*=========================================
    HIGHLIGHTS
=========================================*/

.tour-highlights{

    display:grid;

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

    gap:20px;

    margin-bottom:60px;

}

.highlight-card{

    background:#fff;

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

    border-radius:25px;

    padding:30px 20px;

    text-align:center;

    transition:.4s;

    box-shadow:var(--shadow-sm);

}

.highlight-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

}

.highlight-card i{

    width:75px;
    height:75px;

    margin:auto;

    margin-bottom:20px;

    border-radius:20px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:28px;

    display:flex;

    justify-content:center;
    align-items:center;

}

.highlight-card h6{

    margin:0;

    font-size:16px;

    font-weight:700;

}


/*=========================================
    TOUR OVERVIEW
=========================================*/

.tour-overview{

    background:#fff;

    padding:40px;

    border-radius:30px;

    box-shadow:var(--shadow-sm);

}

.tour-overview p{

    color:var(--gray);

    line-height:2;

    margin-bottom:20px;

}


/*=========================================
    BOOKING CARD
=========================================*/

.booking-card{

    position:sticky;

    top:120px;

    background:#fff;

    border-radius:35px;

    padding:40px;

    box-shadow:var(--shadow-lg);

    overflow:hidden;

}

.discount-badge{

    position:absolute;

    top:25px;
    right:-35px;

    background:#ff4f5e;

    color:#fff;

    font-size:13px;

    font-weight:700;

    padding:10px 40px;

    transform:rotate(40deg);

}

.booking-card h3{

    font-size:50px;

    color:var(--primary);

    font-weight:800;

}

.booking-card del{

    font-size:20px;

    color:#999;

    margin-left:10px;

}

.booking-card span{

    color:var(--gray);

}

.booking-card hr{

    margin:30px 0;

}

.booking-card label{

    font-weight:600;

    margin-bottom:10px;

}

.book-tour-btn{

    height:60px;

    border:none;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.3s;

}

.book-tour-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.booking-features{

    margin-top:30px;

}

.booking-features div{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:#555;

}

.booking-features i{

    color:var(--primary);

}


/*=========================================
    FLOATING ANIMATION
=========================================*/

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.booking-card{

    animation:
        floatCard 5s infinite ease-in-out;

}

/*=========================================
    TOUR GALLERY
=========================================*/

.tour-gallery{

    margin-top:60px;
    margin-bottom:80px;

}

.gallery-item{

    overflow:hidden;

    border-radius:30px;

    position:relative;

    cursor:pointer;

    box-shadow:var(--shadow-md);

}

.gallery-item img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.7s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.big-image{

    height:500px;

}

.small-image{

    height:240px;

}


/*=========================================
    ITINERARY
=========================================*/

.tour-itinerary{

    margin-bottom:80px;

}

.itinerary-days{

    position:relative;

    flex:1;
    min-width:0;

}

/* Connecting timeline rail, sits behind the numbered markers */
.itinerary-days::before{

    content:"";

    position:absolute;

    top:6px;
    bottom:6px;

    left:29px;

    width:2px;

    background:linear-gradient(to bottom, var(--primary), var(--border) 92%);

}

/* Mobile quick jump rail, hidden on tablet/desktop */
.itinerary-quick-nav{

    display:none;

}

.itinerary-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    gap:26px;

    margin-bottom:28px;

}

.itinerary-card:last-child{

    margin-bottom:0;

}

.itinerary-marker{

    position:relative;
    z-index:2;

    flex:0 0 60px;

    display:flex;

    justify-content:center;

    padding-top:4px;

}

.itinerary-marker-number{

    width:56px;
    height:56px;

    border-radius:50%;

    background:linear-gradient(135deg, var(--primary), var(--primary-dark));

    color:#fff;

    font-size:20px;

    font-weight:800;

    display:flex;

    align-items:center;
    justify-content:center;

    box-shadow:0 10px 24px -8px rgba(45,143,96,.55);

    border:4px solid #fff;

}

.itinerary-content{
    flex:1;
    min-width:0;
    background:#fff;
    padding:32px 36px;
    border-radius:24px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.itinerary-card:hover .itinerary-content{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.day-badge{

    display:inline-block;
    width:fit-content;

    background:var(--primary-light);

    color:var(--primary-dark);

    padding:6px 18px;

    border-radius:50px;

    font-size:12.5px;

    font-weight:700;

    letter-spacing:.03em;
    text-transform:uppercase;

    margin-bottom:14px;

}

.itinerary-content h4{

    margin-top:0;

    font-size:20px;

    font-weight:700;

    margin-bottom:14px;

}

.itinerary-content p{

    color:var(--gray);

    line-height:1.9;

    margin-bottom:22px;

}

.itinerary-content p:last-child{

    margin-bottom:0;

}

.itinerary-activities{

    display:grid;

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

    gap:12px 20px;

    border-top:1px dashed var(--border);

    padding-top:22px;

}

.itinerary-activities li{

    position:relative;

    display:flex;
    align-items:flex-start;

    gap:10px;

    font-size:14px;

    line-height:1.4;

    color:#4a4a4a;

}

.itinerary-activities li::before{

    content:"\f00c";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    flex:0 0 18px;

    width:18px;
    height:18px;

    margin-top:1px;

    border-radius:50%;

    background:var(--primary-light);

    color:var(--primary);

    font-size:10px;

    display:flex;

    align-items:center;
    justify-content:center;

}

@media (max-width:576px){

    .itinerary-activities{

        grid-template-columns:1fr;

    }

}


/*=========================================
    INCLUDED / EXCLUDED
=========================================*/

.tour-services{

    margin-bottom:50px;

}

.service-card{

    padding:26px 30px;

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    height:100%;

}

.service-card.included{

    border-top:4px solid var(--primary);

}

.service-card.excluded{

    border-top:4px solid #ff4f5e;

}

.service-card .section-heading{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:16px;

}

.service-card .section-heading .service-icon{

    width:34px;

    height:34px;

    flex:0 0 34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

}

.service-card.included .section-heading .service-icon{

    background:var(--primary-light);

    color:var(--primary);

}

.service-card.excluded .section-heading .service-icon{

    background:#ffe9eb;

    color:#ff4f5e;

}

.service-card .section-heading h3{

    font-size:20px;

    margin:0;

}

.service-card ul{

    display:grid;

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

    gap:10px 20px;

    margin:0;

    padding:0;

    list-style:none;

}

.service-card ul li{

    position:relative;

    padding-left:24px;

    margin-bottom:0;

    line-height:1.45;

    font-size:14px;

    color:var(--gray);

}

.included ul li::before{

    content:"\f00c";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:0;

    top:1px;

    font-size:12px;

    color:var(--primary);

}

.excluded ul li::before{

    content:"\f00d";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    left:0;

    top:1px;

    font-size:12px;

    color:#ff4f5e;

}

@media (max-width:768px){

    .service-card ul{

        grid-template-columns:1fr;

    }

}


/*=========================================
    FACILITIES
=========================================*/

.tour-facilities{

    margin-bottom:80px;

}

.facility-card{

    background:#fff;

    padding:40px;

    border-radius:30px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:.4s;

    height:100%;

}

.facility-card:hover{

    transform:translateY(-10px);

}

.facility-icon{

    width:90px;
    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:25px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:34px;

    display:flex;

    justify-content:center;
    align-items:center;

}

.facility-card h4{

    font-size:20px;

    font-weight:700;

    margin-bottom:18px;

}

.facility-card p{

    color:var(--gray);

    line-height:1.9;

}


/*=========================================
    REVIEWS
=========================================*/

.tour-reviews{

    margin-bottom:80px;

}

.review-card{

    background:#fff;

    border-radius:30px;

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:.4s;

    height:100%;

}

.review-card:hover{

    transform:translateY(-8px);

}

.review-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

}

.review-header img{

    width:70px;
    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.review-header h5{

    margin:0;

    font-size:16px;

    font-weight:700;

}

.review-header span{

    color:var(--gray);

    font-size:14px;

}

.review-stars{

    color:#FFD43B;

    margin-bottom:15px;

}

.review-card p{

    color:var(--gray);

    line-height:1.9;

}


/*=========================================
    FAQ
=========================================*/

.tour-faq{

    margin-bottom:90px;

}

.accordion-item{

    border:none;

    margin-bottom:20px;

    border-radius:20px !important;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

.accordion-button{

    min-height:75px;

    font-size:18px;

    font-weight:600;

    box-shadow:none !important;

}

.accordion-button:not(.collapsed){

    background:var(--primary-light);

    color:var(--primary);

}

.accordion-body{

    color:var(--gray);

    line-height:1.9;

}


/*=========================================
    SIMILAR TOURS
=========================================*/

.similar-tours{

    padding:100px 0;

    background:#f8fcfa;

}

.package-card{

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.4s;

}

.package-card:hover{

    transform:translateY(-12px);

}

.package-card img{

    width:100%;
    height:260px;

    object-fit:cover;

}

.package-content{

    padding:30px;

}

.package-category{

    color:var(--primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.package-content h4{

    margin:15px 0;

    font-size:20px;

    font-weight:700;

}

.package-content p{

    color:var(--gray);

}

.package-price{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

}

.package-price span{

    color:var(--primary);

    font-size:28px;

    font-weight:800;

}

.package-price a{

    background:var(--primary);

    color:#fff;

    padding:12px 24px;

    border-radius:50px;

    transition:.3s;

}

.package-price a:hover{

    background:var(--primary-dark);

    color:#fff;

}


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

.footer-section{

    background:#16221d;

    color:#fff;

    padding:100px 0 30px;

}

.footer-brand h3{

    font-size:32px;

    font-weight:800;

    margin-bottom:20px;

}

.footer-brand i{

    color:var(--primary);

}

.footer-brand p{

    color:#cfcfcf;

    line-height:1.9;

}

.footer-section h5{

    margin-bottom:25px;

    font-weight:700;

}

.footer-section ul li{

    margin-bottom:14px;

}

.footer-section a{

    color:#cfcfcf;

    transition:.3s;

}

.footer-section a:hover{

    color:#fff;

    padding-left:5px;

}

.footer-contact i{

    color:var(--primary);

    margin-right:10px;

}

.footer-section hr{

    margin:50px 0 25px;

    opacity:.15;

}

.footer-bottom{

    text-align:center;

}

.footer-bottom p{

    color:#bdbdbd;

    margin:0;

}


/*=========================================
    RESPONSIVE
=========================================*/

@media (max-width:1200px){

    .hero-content h1{

        font-size:60px;

    }

}

@media (max-width:992px){

    .tour-highlights{

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

    }

    .booking-card{

        position:relative;

        top:auto;

        margin-top:50px;

    }

    .big-image{

        height:380px;

    }

}

@media (max-width:768px){

    .hero-content h1{

        font-size:46px;

    }

    .tour-meta{

        gap:18px;

    }

    .tour-highlights{

        grid-template-columns:1fr;

    }

    .big-image,
    .small-image{

        height:250px;

    }

    .tour-itinerary-list{

        display:flex;
        flex-direction:column;

        gap:16px;

    }

    /* Per-card marker is replaced by the quick-nav rail on mobile */
    .itinerary-card .itinerary-marker{

        display:none;

    }

    .itinerary-card{

        margin-bottom:20px;

    }

    .itinerary-days::before{

        display:none;

    }

    .itinerary-content{

        padding:24px 20px;

    }

    /* Sticky horizontal quick-jump rail */
    .itinerary-quick-nav{

        display:flex;
        flex-direction:row;

        gap:10px;

        width:100%;

        position:sticky;
        top:50px;
        z-index:10;

        overflow-x:auto;
        overflow-y:hidden;

        padding:6px 4px 12px;

        background:#fff;

        scrollbar-width:none;

        -ms-overflow-style:none;

        -webkit-overflow-scrolling:touch;

    }

    .itinerary-quick-nav::-webkit-scrollbar{

        display:none;

    }

    .itinerary-quick-nav-btn{

        flex:0 0 auto;

        width:40px;
        height:40px;

        border-radius:50%;

        display:flex;

        align-items:center;
        justify-content:center;

        background:var(--primary-light);

        color:var(--primary-dark);

        font-size:14px;
        font-weight:700;

        transition:.25s;

    }

    .itinerary-quick-nav-btn:hover,
    .itinerary-quick-nav-btn.is-active{

        background:var(--primary);

        color:#fff;

        transform:scale(1.08);

    }

    .service-card,
    .facility-card,
    .review-card{

        padding:30px;

    }

}

@media (max-width:576px){

    .tour-hero{

        min-height:80vh;

        padding:150px 0 80px;

    }

    .hero-content h1{

        font-size:36px;

    }

    .section-heading h2{

        font-size:30px;

    }

    .booking-card{

        padding:30px 25px;

    }

    .booking-card h3{

        font-size:40px;

    }

    .package-price{

        flex-direction:column;

        gap:20px;

        align-items:flex-start;

    }

}