/* ==========================================================
   MEDIA DETAIL PAGE
========================================================== */

body{
    background:#f5f7fb;
}

/*==========================================================
Breadcrumb
==========================================================*/

.media-detail-header{

    background:#ffffff;

    border-bottom:1px solid #e8e8e8;

    padding:18px 0;

}

.media-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    font-size:15px;

}

.media-breadcrumb a{

    color:#0d6efd;

    text-decoration:none;

    font-weight:500;

}

.media-breadcrumb a:hover{

    color:#084298;

}

.media-breadcrumb span{

    color:#777;

}

/*==========================================================
Hero
==========================================================*/

.media-hero{

    padding:70px 0;

    background:#fff;

}

.media-hero-content{

    padding-right:40px;

}

.media-category{

    display:inline-block;

    padding:8px 18px;

    background:#0d6efd;

    color:#fff;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.media-hero h1{

    font-size:44px;

    font-weight:700;

    line-height:1.3;

    color:#1f2937;

    margin-bottom:25px;

}

.media-meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:30px;

}

.media-meta div{

    display:flex;

    align-items:center;

    gap:8px;

    color:#6b7280;

    font-size:15px;

}

.media-meta i{

    color:#0d6efd;

    font-size:18px;

}

.media-short-description{

    font-size:18px;

    color:#4b5563;

    line-height:34px;

}

/*==========================================================
Hero Image
==========================================================*/

.media-thumbnail{

    border-radius:18px;

    overflow:hidden;

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

}

.media-thumbnail img{

    width:100%;

    height:430px;

    object-fit:cover;

    transition:.5s;

}

.media-thumbnail:hover img{

    transform:scale(1.05);

}

/*==========================================================
Description
==========================================================*/

.media-description{

    padding:70px 0;

}

.description-card{

    background:#fff;

    border-radius:18px;

    padding:45px;

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

}

.description-card h2{

    font-size:32px;

    font-weight:700;

    margin-bottom:25px;

    color:#1f2937;

    position:relative;

}

.description-card h2::after{

    content:"";

    width:70px;

    height:4px;

    background:#0d6efd;

    display:block;

    margin-top:12px;

    border-radius:20px;

}

.description-card p{

    color:#555;

    font-size:17px;

    line-height:34px;

    margin-bottom:20px;

}

.description-card img{

    max-width:100%;

    border-radius:12px;

    margin:20px 0;

}

/*==========================================================
Responsive
==========================================================*/

@media(max-width:991px){

    .media-hero{

        padding:50px 0;

    }

    .media-hero-content{

        padding-right:0;

        margin-bottom:40px;

    }

    .media-hero h1{

        font-size:34px;

    }

    .media-thumbnail img{

        height:320px;

    }

}

@media(max-width:576px){

    .media-hero h1{

        font-size:28px;

    }

    .description-card{

        padding:25px;

    }

    .description-card h2{

        font-size:26px;

    }

    .media-short-description{

        font-size:16px;

        line-height:30px;

    }

}
/*==================================================
Gallery
==================================================*/

.media-gallery-section{

    padding:70px 0;

    background:#f8f9fc;

}

.section-title{

    text-align:center;

    margin-bottom:50px;

}

.section-title span{

    display:inline-block;

    background:#0d6efd;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    margin-bottom:18px;

}

.section-title h2{

    font-size:38px;

    font-weight:700;

    color:#222;

}

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:#fff;

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

    transition:.35s;

}

.gallery-card:hover{

    transform:translateY(-8px);

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

}

.gallery-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.45s;

    display:block;

}

.gallery-card::before{

    content:"";

    position:absolute;

    inset:0;

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

    opacity:0;

    transition:.35s;

    z-index:1;

}

.gallery-card:hover::before{

    opacity:1;

}

.gallery-card::after{

    content:"\f00e";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.6);

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff;

    color:#0d6efd;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    opacity:0;

    transition:.35s;

    z-index:2;

}

.gallery-card:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

.gallery-card:hover img{

    transform:scale(1.08);

}


.gallery-caption{

    padding:18px;

    font-size:15px;

    text-align:center;

    color:#555;

}

.no-gallery{

    text-align:center;

    background:#fff;

    border-radius:20px;

    padding:80px;

}

.no-gallery i{

    font-size:70px;

    color:#0d6efd;

}

.no-gallery h3{

    margin-top:25px;

    font-size:30px;

}

.no-gallery p{

    color:#777;

}