/* =====================================================
   DESTINATIONS PAGE
   Joy Travels & Vacations
===================================================== */

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

.destination-hero{

    position:relative;
    height:70vh;
    background:url("../images/destinations/destinations.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}
.destination-hero .hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:20px;
    color:#fff;
}
.destination-hero span{
    display:inline-block;
    margin-bottom:15px;
    color:var(--primary);
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* =====================================================
   INTRODUCTION
===================================================== */
.destination-intro{
    padding:90px 8%;
    background:#fff;

}
/* =====================================================
   DESTINATION GRID
===================================================== */
.destination-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
    padding:0 8% 90px;

}
/* =====================================================
   DESTINATION CARDS
===================================================== */

.destination-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.4s;
}

.destination-card:hover{
    transform:translateY(-10px);
}

.destination-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
}

.destination-card:hover img{
    transform:scale(1.08);
}

.destination-info{
    padding:30px;
}
.destination-info h3{
    margin-bottom:15px;
    color:var(--dark);
}

.destination-info p{
    margin-bottom:25px;
    line-height:1.7;
}
/* =====================================================
   DESTINATION CATEGORIES
===================================================== */

.destination-category{
    padding:90px 8%;
    background:var(--cream);
}
.destination-category .cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:35px;
    margin-top:50px;
}
.destination-category .card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.destination-category .card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 18px 40px rgba(0,0,0,.15);
}
.destination-category .card img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}
.destination-category .card:hover img{
    transform:scale(1.06);
}
.destination-category:nth-child(even){
    background:#fff;
}
/* =====================================================
   WHY VISIT KENYA
===================================================== */

.why-visit{
    padding:100px 8%;
    background:#f8f8f8;
}
.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}
.why-box{
    background:#fff;
    padding:35px;
    border-radius:12px;
    text-align:center;
    box-shadow:var(--shadow);
}
.why-box h3{
    margin:20px 0;

}
/* =====================================================
   TRAVEL TIPS
===================================================== */

.travel-tips{
    padding:100px 8%;
}
.tips-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.tips-grid div{
    background:#fff;
    padding:35px;
    border-left:5px solid var(--primary);
    box-shadow:var(--shadow);
}
/* =====================================================
   CTA
===================================================== */

.booking{
    text-align:center;
    padding:100px 8%;
}
/* =====================================================
   ANIMATIONS
===================================================== */

.destination-card,
.why-box,
.tips-grid div{

    transition:.35s;

}

.destination-card:hover,
.why-box:hover,
.tips-grid div:hover{

    transform:translateY(-8px);

}
/* =====================================================
   DESTINATIONS RESPONSIVE
===================================================== */

/* ==========================================
   Tablets (992px)
========================================== */

@media (max-width:992px){
.destination-hero{
    height:70vh;
}
.destination-hero h1{
    font-size:48px;
}
.destination-grid,
.cards{
    grid-template-columns:repeat(2,1fr);
}
.destination-content{
    padding:25px;
}
}

/* ==========================================
   Mobile (768px)
========================================== */

@media (max-width:768px){
.destination-hero{
    height:60vh;
}
.destination-hero h1{
    font-size:36px;
}
.destination-hero p{
    font-size:18px;
}
.destination-grid,
.cards{
    grid-template-columns:1fr;
}
.section-title h2{
    font-size:34px;
}
}

/* ==========================================
   Small Phones (576px)
========================================== */

@media (max-width:576px){
.destination-hero h1{
    font-size:30px;
}
.destination-hero p{
    font-size:16px;
}
.destination-card img,
.card img{
    height:220px;
}
.destination-content{
    padding:20px;
}
}