/*========================================
        MALAWI SAFARI ARTICLE PAGE
========================================*/


.msarticle-hero{

    height:75vh;

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

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.msarticle-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

}


.msarticle-hero-content{

    position:relative;

    z-index:2;

    color:white;

    width:min(950px,90%);

}


.msarticle-hero-content span{

    color:#d5ad72;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:600;

}


.msarticle-hero-content h1{

    font-size:58px;

    line-height:1.15;

    margin:25px 0;

}


.msarticle-meta{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    font-size:16px;

}


.msarticle-meta span{

    color:white;

    letter-spacing:0;

    text-transform:none;

}


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


.msarticle-breadcrumb{

    width:85%;

    margin:40px auto;

    color:#777;

    font-size:15px;

}


.msarticle-breadcrumb a{

    color:#9b6738;

    text-decoration:none;

}





/*========================================
ARTICLE LAYOUT
========================================*/


.msarticle-layout{

    width:85%;

    margin:auto;

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:60px;

    align-items:start;

}



/*========================================
ARTICLE CONTENT
========================================*/


.msarticle-content{

    background:white;

    padding:45px;

    border-radius:15px;

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

}


.msarticle-main-image{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:12px;

    margin-bottom:40px;

}



.msarticle-content h2{

    font-size:36px;

    color:#222;

    margin:45px 0 20px;

    line-height:1.3;

}


.msarticle-content p{

    font-size:18px;

    color:#555;

    line-height:1.9;

    margin-bottom:25px;

}



.msarticle-content img{

    width:100%;

    border-radius:12px;

    margin:35px 0;

}





/*========================================
QUOTE BOX
========================================*/


.msarticle-highlight{

    background:#9b6738;

    color:white;

    padding:35px;

    margin:40px 0;

    border-radius:10px;

    font-size:24px;

    font-style:italic;

    text-align:center;

}



/*========================================
INFO BOX
========================================*/


.msarticle-info-box{

    background:#f3eee8;

    border-left:5px solid #9b6738;

    padding:30px;

    margin:40px 0;

    border-radius:8px;

}


.msarticle-info-box h3{

    margin-bottom:15px;

    font-size:25px;

    color:#9b6738;

}





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


.msarticle-book-btn{

    display:inline-block;

    background:#9b6738;

    color:white;

    text-decoration:none;

    padding:16px 40px;

    border-radius:50px;

    margin-top:20px;

    font-weight:600;

    transition:.3s;

}


.msarticle-book-btn:hover{

    background:#74491f;

}





/*========================================
SIDEBAR
========================================*/


.msarticle-sidebar{

    position:sticky;

    top:30px;

}



.msarticle-sidebar-box{

    background:white;

    padding:30px;

    border-radius:12px;

    margin-bottom:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.07);

}


.msarticle-sidebar-box h3{

    font-size:25px;

    margin-bottom:20px;

    color:#9b6738;

}



.msarticle-sidebar-box ul{

    list-style:none;

    padding:0;

}


.msarticle-sidebar-box li{

    padding:10px 0;

    border-bottom:1px solid #eee;

}



.msarticle-sidebar-box a{

    display:block;

    padding:12px 0;

    color:#555;

    text-decoration:none;

    border-bottom:1px solid #eee;

}



.msarticle-sidebar-box a:hover{

    color:#9b6738;

}





/*========================================
RELATED ARTICLES
========================================*/


.msarticle-related{

    width:85%;

    margin:90px auto;

}



.msarticle-related h2{

    text-align:center;

    font-size:40px;

    margin-bottom:40px;

}



.msarticle-related-grid{

    display:grid;

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

    gap:25px;

}



.msarticle-related-grid a{

    background:#9b6738;

    color:white;

    padding:35px;

    text-align:center;

    text-decoration:none;

    border-radius:12px;

    transition:.3s;

}


.msarticle-related-grid a:hover{

    transform:translateY(-5px);

    background:#7b5129;

}





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


.msarticle-footer{

    background:#111;

    color:#ddd;

    text-align:center;

    padding:35px;

}





/*========================================
TABLET
========================================*/


@media(max-width:1100px){


.msarticle-layout{

grid-template-columns:1fr;

}


.msarticle-sidebar{

position:relative;

}



.msarticle-related-grid{

grid-template-columns:1fr;

}



}





/*========================================
MOBILE
========================================*/


@media(max-width:700px){


.msarticle-hero{

height:65vh;

}



.msarticle-hero-content h1{

font-size:34px;

}



.msarticle-meta{

gap:15px;

flex-direction:column;

}



.msarticle-layout,

.msarticle-related,

.msarticle-breadcrumb{

width:92%;

}



.msarticle-content{

padding:25px;

}



.msarticle-main-image{

height:280px;

}



.msarticle-content h2{

font-size:28px;

}



.msarticle-content p{

font-size:16px;

}



.msarticle-highlight{

font-size:19px;

padding:25px;

}



.msarticle-related h2{

font-size:30px;

}



}

/*========================================
 ARTICLE JS ELEMENTS
========================================*/


.msarticle-progress{

position:fixed;

top:0;

left:0;

height:5px;

width:0%;

background:#d19a55;

z-index:9999;

transition:.2s;

}





.msarticle-top-button{

position:fixed;

right:30px;

bottom:30px;

width:50px;

height:50px;

border-radius:50%;

border:none;

background:#9b6738;

color:white;

font-size:18px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}



.msarticle-top-button.show{

opacity:1;

visibility:visible;

}



.msarticle-hidden{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}



.msarticle-visible{

opacity:1;

transform:translateY(0);

}



@media(max-width:700px){

.msarticle-top-button{

right:20px;

bottom:20px;

width:45px;

height:45px;

}

}