/*========================================
        BLOG PAGE
========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    color:#222;
    background:#fafafa;
    line-height:1.7;
}

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

.msblogpage-hero{

    position:relative;
    height:60vh;

    background:url("https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?w=1600&auto=format&fit=crop&q=80")
    center/cover no-repeat;

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

    text-align:center;
    margin-top:90px;

}

.msblogpage-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);

}

.msblogpage-content{

    position:relative;
    z-index:2;
    color:#fff;
    width:min(900px,90%);

}

.msblogpage-content span{

    color:#d8b37a;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;

}

.msblogpage-content h1{

    font-size:58px;
    margin:20px 0;

}

.msblogpage-content p{

    font-size:20px;
    color:#eee;

}

/*========================
SEARCH
========================*/

.msblogpage-search{

    padding:50px 8%;

}

.msblogpage-search-box{

    max-width:650px;
    margin:auto;
    position:relative;

}

.msblogpage-search-box input{

    width:100%;
    padding:18px 60px 18px 25px;
    border:none;
    border-radius:50px;
    font-size:17px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    outline:none;

}

.msblogpage-search-box i{

    position:absolute;
    right:25px;
    top:50%;
    transform:translateY(-50%);
    color:#9b6738;
    font-size:20px;

}

/*========================
FEATURED
========================*/

.msblogpage-featured{

    width:85%;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:center;
    padding-bottom:80px;

}

.msblogpage-featured img{

    width:100%;
    border-radius:16px;
    display:block;

}

.msblogpage-featured-content span{

    color:#9b6738;
    font-weight:600;
    text-transform:uppercase;

}

.msblogpage-featured-content h2{

    font-size:42px;
    margin:18px 0;

}

.msblogpage-featured-content p{

    color:#666;
    margin-bottom:30px;

}

.msblogpage-featured-content a{

    display:inline-block;
    text-decoration:none;
    color:#fff;
    background:#9b6738;
    padding:15px 35px;
    border-radius:40px;
    transition:.3s;

}

.msblogpage-featured-content a:hover{

    background:#7b5129;

}

/*========================
FILTER
========================*/

.msblogpage-filter{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:60px;

}

.msblogpage-filter button{

    border:none;
    padding:12px 28px;
    border-radius:30px;
    background:#eee;
    cursor:pointer;
    transition:.3s;

}

.msblogpage-filter button:hover,
.msblogpage-filter .active{

    background:#9b6738;
    color:#fff;

}

/*========================
BLOG GRID
========================*/

.msblogpage-grid{

    width:85%;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;

}

.msblogpage-card{

    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;

}

.msblogpage-card:hover{

    transform:translateY(-8px);

}

.msblogpage-card img{

    width:100%;
    height:250px;
    object-fit:cover;
    transition:.5s;

}

.msblogpage-card:hover img{

    transform:scale(1.06);

}

.msblogpage-card-content{

    padding:28px;

}

.msblogpage-card-content span{

    color:#9b6738;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;

}

.msblogpage-card-content h3{

    margin:15px 0;
    font-size:25px;

}

.msblogpage-card-content p{

    color:#666;
    margin-bottom:25px;

}

.msblogpage-card-content a{

    color:#9b6738;
    text-decoration:none;
    font-weight:600;

}

/*========================
PAGINATION
========================*/

.msblogpage-pagination{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin:70px 0;

}

.msblogpage-pagination a{

    text-decoration:none;
    padding:12px 20px;
    border-radius:8px;
    background:#fff;
    color:#222;
    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.msblogpage-pagination .active{

    background:#9b6738;
    color:#fff;

}

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

@media(max-width:1100px){

.msblogpage-featured{

grid-template-columns:1fr;

}

.msblogpage-grid{

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

}

.msblogpage-content h1{

font-size:46px;

}

}

@media(max-width:768px){

.msblogpage-grid{

grid-template-columns:1fr;

}

.msblogpage-content h1{

font-size:34px;

}

.msblogpage-content p{

font-size:17px;

}

.msblogpage-featured h2{

font-size:30px;

}

.msblogpage-featured{

width:92%;

}

.msblogpage-grid{

width:92%;

}

}

/*=========================================
QUEST SAFARI STORY
=========================================*/

.qs-story-section{
    padding:100px 8%;
    background:#fff;
}

.qs-story-container{
    max-width:1300px;
    margin:auto;
}

.qs-story-image{
    position:relative;
}

.qs-story-image img{
    width:100%;
    height:650px;
    object-fit:cover;
    border-radius:6px;
}

/* Floating Card */

.qs-story-card{

    position:absolute;

    left:-40px;
    top:120px;

    width:340px;

    background:#fff;

    padding:45px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.qs-story-card span{

    color:#5c4739;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;
}

.qs-story-card h3{

    margin:15px 0 20px;

    font-size:36px;

    color:#5c4739;

    line-height:1.2;
}

.qs-story-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:30px;
}

.qs-story-btn{

    display:inline-block;

    background:#5c4739;

    color:#fff;

    padding:15px 30px;

    font-weight:600;

    transition:.3s;
}

.qs-story-btn:hover{

    background:#3f3026;
}


/*=========================================
QUEST INTRO
=========================================*/

.qs-intro-section{

    padding:90px 8%;

    background:#fff;
}

.qs-intro-container{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:220px 1fr;

    gap:60px;

    align-items:flex-start;
}

.qs-intro-letter{

    font-size:220px;

    font-family:Georgia, serif;

    color:#8b4b24;

    line-height:0.8;

    font-style:italic;
}

.qs-intro-content h2{

    font-size:52px;

    color:#5c4739;

    margin-bottom:35px;

    max-width:700px;

    text-transform:uppercase;

    line-height:1.2;
}

.qs-intro-text{

    display:grid;

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

    gap:40px;
}

.qs-intro-text p{

    color:#666;

    line-height:2;
}


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

@media(max-width:992px){

.qs-story-card{

    position:relative;

    left:0;

    top:-60px;

    width:100%;
}

.qs-story-image img{

    height:500px;
}

.qs-intro-container{

    grid-template-columns:1fr;

    gap:20px;
}

.qs-intro-letter{

    font-size:150px;

    text-align:center;
}

.qs-intro-content h2{

    font-size:38px;
}

.qs-intro-text{

    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.qs-story-section{

    padding:70px 5%;
}

.qs-story-card{

    padding:30px;
}

.qs-story-card h3{

    font-size:28px;
}

.qs-intro-section{

    padding:60px 5%;
}

.qs-intro-content h2{

    font-size:30px;
}

.qs-intro-letter{

    font-size:120px;
}

}