/*=============================
TOUR DETAILS
=============================*/
body{

    overflow-x:hidden;

}

.tour-details{

padding:80px 0;

background:#F8FAFC;

}

.tour-wrapper{

display:grid;

grid-template-columns:2fr 360px;

gap:40px;

align-items:start;

}

.booking-sidebar{

position:sticky;

top:100px;

background:white;

padding:25px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.main-image img{

width:100%;

height:420px;

object-fit:cover;

border-radius:20px;

}

.thumbnail-gallery{

display:grid;

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

gap:12px;

margin-top:15px;

}

.thumbnail-gallery img{

width:100%;

height:95px;

object-fit:cover;

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.thumbnail-gallery img:hover{

transform:scale(1.05);

}
/*=========================
TOUR HEADER
=========================*/

.tour-header{

margin-top:30px;

}

.tour-header h2{

font-size:38px;

margin-bottom:15px;

color:#0F172A;

}

.tour-meta{

display:flex;

gap:30px;

margin-bottom:18px;

color:#64748B;

font-weight:600;

}

.tour-location{

display:flex;

flex-wrap:wrap;

gap:18px;

color:#0F766E;

font-weight:600;

}

.tour-location i{

margin-right:6px;

}
/*=========================
TOUR TABS
=========================*/

.tour-tabs{

display:flex;

gap:10px;

margin:35px 0;

border-bottom:1px solid #E5E7EB;

padding-bottom:15px;

overflow-x:auto;

}

.tab-btn{

background:none;

border:none;

padding:12px 18px;

cursor:pointer;

font-weight:600;

color:#64748B;

transition:.3s;

white-space:nowrap;

}

.tab-btn.active{

color:#0F766E;

border-bottom:3px solid #0F766E;

}

/*=========================
TAB CONTENT
=========================*/

.tab-content{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.tab-content h3{

margin-bottom:18px;

font-size:28px;

}

.tab-content p{

line-height:1.8;

color:#475569;

margin-bottom:30px;

}

.tour-features{

display:grid;

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

gap:20px;

}

.tour-features div{

display:flex;

align-items:center;

gap:15px;

padding:18px;

background:#F8FAFC;

border-radius:14px;

}

.tour-features i{

font-size:24px;

color:#0F766E;

}
/*=========================
BOOKING SIDEBAR
=========================*/

.booking-price{

font-size:36px;

color:#0F766E;

margin-bottom:25px;

}

.booking-price span{

font-size:16px;

color:#64748B;

font-weight:500;

}

.booking-group{

display:flex;

flex-direction:column;

margin-bottom:18px;

}

.booking-group label{

margin-bottom:8px;

font-weight:600;

color:#334155;

}

.booking-group input,

.booking-group select{

padding:14px;

border:1px solid #CBD5E1;

border-radius:12px;

font-size:15px;

outline:none;

transition:.3s;

}

.booking-group input:focus,

.booking-group select:focus{

border-color:#0F766E;

}

.book-btn{

width:100%;

padding:16px;

border:none;

border-radius:12px;

background:#0F766E;

color:white;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.3s;

margin-top:10px;

}

.book-btn:hover{

background:#115E59;

}

.booking-note{

margin-top:18px;

font-size:14px;

color:#16A34A;

display:flex;

align-items:center;

gap:8px;

}
/*=========================
THUMBNAIL ACTIVE
=========================*/

.thumb{

cursor:pointer;

border:3px solid transparent;

transition:.3s;

}

.thumb.active{

border:3px solid #0F766E;

}

.thumb:hover{

transform:scale(1.05);

border:3px solid #0F766E;

}

.main-image img{

transition:.35s ease;

}
/*=========================
TAB PANES
=========================*/

.tab-pane{

display:none;

animation:fade .4s ease;

}

.tab-pane.active{

display:block;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

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

.reviews-grid{

display:grid;

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

gap:25px;

margin-top:25px;

}

.review-card{

background:#F8FAFC;

padding:25px;

border-radius:18px;

transition:.3s;

}

.review-card:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.review-header{

display:flex;

align-items:center;

gap:15px;

margin-bottom:15px;

}

.review-header img{

width:60px;

height:60px;

border-radius:50%;

object-fit:cover;

}

.review-stars{

color:#F59E0B;

margin-bottom:15px;

font-size:18px;

}
.tour-map{

margin-top:50px;

}

.tour-map iframe{

width:100%;

height:400px;

border:none;

border-radius:20px;

}
.custom-itinerary{
    margin-top:40px;
    padding:30px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.custom-itinerary h3{
    font-size:30px;
    color:#13c58a;
    margin-bottom:12px;
}

.custom-itinerary p{
    color:#666;
    margin-bottom:20px;
    line-height:1.6;
}

.custom-itinerary textarea{
    width:100%;
    min-height:220px;
    padding:18px;
    border:1px solid #ddd;
    border-radius:12px;
    resize:vertical;
    font-size:16px;
    outline:none;
}

.custom-itinerary textarea:focus{
    border-color:#13c58a;
}
*{
    max-width:100%;
}

img{
    max-width:100%;
    height:auto;
}

iframe{
    width:100%;
    max-width:100%;
}
@media(max-width:768px){

    .tour-details{

        padding:25px 15px;

    }

    .tour-wrapper{

        display:flex;

        flex-direction:column;

        gap:25px;

    }

    .tour-left{

        width:100%;

    }

    .booking-sidebar{

        position:static;

        width:100%;

        margin-top:20px;

    }

    .main-image img{

        height:240px;

    }

    .thumbnail-gallery{

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

    }

    .thumbnail-gallery img{

        height:70px;

    }

    .tour-header h2{

        font-size:30px;

    }

    .tour-meta{

        flex-wrap:wrap;

        gap:12px;

    }

    .tour-features{

        grid-template-columns:1fr;

    }

    .reviews-grid{

        grid-template-columns:1fr;

    }

}