/* ===========================================================
   QUEST SAFARI DESTINATIONS
   Unique Prefix: qsdw-
=========================================================== */

/*==================================================
QUEST SAFARI DESTINATIONS
Unique Prefix: qsdx-
==================================================*/

.qsdx-section{
    padding:100px 0;
    background:#f7f5ef;
}

.qsdx-container{
    width:min(92%,1400px);
    margin:auto;
}

/*==========================
HEADER
==========================*/

.qsdx-header{
    text-align:center;
    margin-bottom:60px;
}

.qsdx-subtitle{
    display:inline-block;
    color:#9c7b36;
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:13px;
    font-weight:700;
    margin-bottom:15px;
}

.qsdx-title{
    font-size:54px;
    color:#173126;
    font-family:"Playfair Display",serif;
    margin-bottom:20px;
}

.qsdx-description{
    max-width:760px;
    margin:auto;
    color:#666;
    line-height:1.9;
    font-size:17px;
}

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

.qsdx-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:25px;

    margin-bottom:25px;

}

.qsdx-feature{

    position:relative;

    min-height:720px;

    overflow:hidden;

    border-radius:20px;

}

.qsdx-right{

    display:grid;

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

    gap:25px;

}

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

.qsdx-bottom{

    display:grid;

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

    gap:25px;

}

/*==========================
CARDS
==========================*/

.qsdx-card,
.qsdx-video{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    min-height:220px;

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

}

.qsdx-feature img,
.qsdx-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.qsdx-feature:hover img,
.qsdx-card:hover img{

    transform:scale(1.08);

}

/*==========================
VIDEO
==========================*/

.qsdx-video iframe{

    width:100%;

    height:100%;

    border:0;

    transform:scale(1.25);

}

/*==========================
OVERLAY
==========================*/

.qsdx-overlay,
.qsdx-card-overlay,
.qsdx-video-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.15)
    );

    color:#fff;

}

.qsdx-card-overlay{

    padding:25px;

}

.qsdx-badge{

    display:inline-block;

    width:max-content;

    background:#b68b3d;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:18px;

}

.qsdx-overlay h3{

    font-size:50px;

    margin-bottom:18px;

    font-family:"Playfair Display",serif;

}

.qsdx-overlay p{

    max-width:520px;

    line-height:1.8;

    margin-bottom:30px;

}

.qsdx-card-overlay h4{

    font-size:24px;

    margin-bottom:8px;

    font-family:"Playfair Display",serif;

}

.qsdx-card-overlay span{

    opacity:.9;

    font-size:14px;

}

.qsdx-video-overlay span{

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.qsdx-video-overlay h4{

    font-size:30px;

    margin-bottom:20px;

    font-family:"Playfair Display",serif;

}

/*==========================
BUTTON
==========================*/

.qsdx-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:14px 28px;

    border-radius:50px;

    background:#b68b3d;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.qsdx-btn:hover{

    background:#fff;

    color:#173126;

    transform:translateY(-5px);

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

}

/*==========================
HOVER
==========================*/

.qsdx-feature,
.qsdx-card,
.qsdx-video{

    transition:.4s;

}

.qsdx-feature:hover,
.qsdx-card:hover,
.qsdx-video:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.18);

}

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

@media(max-width:1100px){

.qsdx-grid{

grid-template-columns:1fr;

}

.qsdx-right{

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

grid-template-rows:1fr;

}

.qsdx-bottom{

grid-template-columns:1fr;

}

.qsdx-feature{

min-height:520px;

}

.qsdx-card,
.qsdx-video{

min-height:260px;

}

}

@media(max-width:768px){

.qsdx-title{

font-size:38px;

}

.qsdx-right{

grid-template-columns:1fr;

}

.qsdx-overlay{

padding:25px;

}

.qsdx-overlay h3{

font-size:34px;

}

.qsdx-btn{

width:100%;

}

}
/* =====================================
   UNIQUE DESTINATIONS SECTION
===================================== */


.destinations{

padding:100px 5%;

background:#faf8f2;

}



.section-title{

text-align:center;

max-width:750px;

margin:auto;

margin-bottom:60px;

}



.section-title span{

color:#c59d5f;

font-size:15px;

font-weight:600;

letter-spacing:3px;

text-transform:uppercase;

}



.section-title h2{

font-size:48px;

margin:15px 0;

color:#1f3d2b;

}



.section-title p{

font-size:18px;

line-height:1.7;

color:#666;

}





/* DESTINATION GRID */


.destination-grid{

display:grid;

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

gap:25px;

max-width:1400px;

margin:auto;

}




/* CARD */


.destination-card{

height:500px;

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

}



.destination-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}





.destination-card::after{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.75),
transparent 60%
);

}




.destination-card:hover img{

transform:scale(1.12);

}





/* TEXT OVER IMAGE */


.destination-overlay{

position:absolute;

bottom:0;

left:0;

padding:30px;

color:white;

z-index:2;

}



.destination-overlay h3{

font-size:28px;

margin-bottom:12px;

}



.destination-overlay p{

font-size:15px;

line-height:1.6;

color:#eee;

margin-bottom:20px;

}



.destination-overlay a{

color:#d4b06f;

font-weight:600;

font-size:15px;

}





/* HOVER EFFECT */


.destination-card:hover .destination-overlay h3{

color:#d4b06f;

}





/* RESPONSIVE */


@media(max-width:1100px){


.destination-grid{

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

}


}



@media(max-width:600px){


.destinations{

padding:70px 5%;

}



.section-title h2{

font-size:34px;

}


.destination-grid{

grid-template-columns:1fr;

}



.destination-card{

height:420px;

}


}