/* =====================================================
   BLOG SECTION
=====================================================*/

.blog-section{
    padding:80px 0 40px;
    background:#f8fafc;
}

/* Featured Blog */

.featured-blog{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    margin-bottom:70px;
    position:relative;
}

.featured-slider{
    position:relative;
}

.featured-slider{
    position:relative;
    min-height:560px;
    overflow:hidden;
}

.featured-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease;
}

.featured-slide.active{
    position:relative;
    opacity:1;
    visibility:visible;
}

.featured-slide.active{
    display:block;
}

.featured-image{
    height:500px;
    overflow:hidden;
}

.featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.featured-image:hover img{
    transform:scale(1.08);
}

.featured-content{
    padding:60px 45px;
}

.blog-category{
    display:inline-block;
    background:#003366;
    color:#fff;
    padding:7px 18px;
    border-radius:30px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:25px;
}

.featured-content h2{
    font-size:34px;
    line-height:1.3;
    margin-bottom:25px;
    font-weight:700;
    color:#222;
}

.featured-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:30px;
}

.blog-meta{
    margin:0;
    padding:0;
    list-style:none;
}

.blog-meta li{
    display:inline-block;
    margin-right:25px;
    color:#777;
    font-size:14px;
}

.blog-meta i{
    color:#d4af37;
    margin-right:6px;
}

/* Read Button */

.btn-read{
    display:inline-block;
    margin-top:30px;
    padding:14px 36px;
    background:#003366;
    color:#fff;
    border-radius:40px;
    transition:.35s;
    text-decoration:none;
}

.btn-read:hover{
    background:#d4af37;
    color:#fff;
    text-decoration:none;
}

/* Featured Slider Dots */

.featured-dots{
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:30;
    display:flex;
    align-items:center;
    gap:9px;
    transform:translateX(-50%);
}

.featured-dot{
    width:9px;
    height:9px;
    padding:0;
    border:1px solid rgba(0,51,102,.55);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:.25s;
}

.featured-dot.active,
.featured-dot:hover{
    background:#003366;
    border-color:#003366;
}

/* =========================================
Latest Stories
========================================= */

.latest-stories{
    background:#f8fafc;
    padding:70px 0;
}

.latest-stories .row{
    display:flex;
    flex-wrap:wrap;
}

.latest-stories .row > [class*="col-"]{
    display:flex;
}

.section-heading{
    margin-bottom:40px;
}

.section-heading h2{
    font-size:36px;
    font-weight:700;
    color:#222;
}

.view-all{
    color:#003366;
    font-weight:600;
    margin-top:15px;
}

.story-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    margin-bottom:35px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
    cursor:pointer;
    width:100%;
    display:flex;
    flex-direction:column;
}

.story-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(0,0,0,.15);
}

.story-image{
    position:relative;
    overflow:hidden;
    height:240px;
    background:#f1f5f9;
}

.story-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    display:block;
    transition:.5s;
}

.story-card:hover img{
    transform:scale(1.1);
}

.story-category{
    display:inline-block;
    background:#003366;
    color:#fff;
    padding:6px 15px;
    border-radius:30px;
    font-size:11px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.story-content{
    padding:28px;
    display:flex;
    flex:1;
    flex-direction:column;
}

.story-date{
    display:block;
    color:#999;
    font-size:13px;
}

.story-date i{
    margin-right:6px;
}

.story-content h3{
    font-size:23px;
    margin:18px 0;
    line-height:1.5;
    color:#222;
    transition:.3s;
}

.story-card:hover h3{
    color:#003366;
}

.story-content p,
.story-content > div{
    color:#666;
    line-height:1.8;
    margin-bottom:25px;
}

.story-content a{
    color:#003366;
    font-weight:600;
    text-decoration:none;
    margin-top:auto;
}

.story-content a i{
    margin-left:6px;
    transition:.3s;
}

.story-content a:hover i{
    margin-left:12px;
}

/* Load More */

.load-more-blog{
    padding:15px 45px;
    border-radius:40px;
    background:#003366;
    color:#fff !important;
    display:inline-block;
    transition:.35s;
}

.load-more-blog:hover{
    background:#d4af37;
}

/* =========================================
Popup
========================================= */

.blog-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    z-index:9999;
    display:none;
    overflow:auto;
}

.blog-popup.active{
    display:block;
}

.popup-content{
    background:#fff;
    width:90%;
    max-width:1050px;
    margin:60px auto;
    border-radius:18px;
    animation:popup .4s ease;
    position:relative;
    overflow:visible;
}

@keyframes popup{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.popup-image{
    width:100%;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.popup-image img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
}

.popup-body{
    padding:45px;
}

.popup-body h2{
    font-size:34px;
    margin-bottom:25px;
}

.popup-body p{
    color:#555;
    line-height:2;
}

.popup-close{
    position:fixed;
    top:25px;
    right:25px;

    width:48px;
    height:48px;

    background:#fff;
    color:#222;

    border-radius:50%;

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

    font-size:28px;
    font-weight:bold;

    cursor:pointer;

    z-index:999999;

    box-shadow:0 5px 20px rgba(0,0,0,.25);

    transition:.3s;
}

.popup-close:hover{
    background:#003366;
    color:#fff;
}

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

.popup-gallery{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:35px;
}

.popup-gallery img{
    width:130px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    margin:0 8px;
    cursor:pointer;
    transition:.3s;
}

.popup-gallery img:hover{
    transform:scale(1.08);
}

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

@media(max-width:991px){

.featured-content{
    padding:35px;
}

.featured-content h2{
    font-size:28px;
}

.featured-image{
    height:350px;
}

.story-image{
    height:220px;
}

}

@media(max-width:767px){

.blog-section{
    padding:50px 0;
}

.popup-content{
    width:94%;
    margin:24px auto;
    border-radius:12px;
    overflow:hidden;
}

.popup-image{
    padding:12px;
}

.popup-image img{
    width:100%;
    max-height:280px;
    height:auto;
    object-fit:contain;
}

.featured-content{
    padding:25px;
}

.featured-content h2{
    font-size:24px;
}

.featured-dots{
    bottom:12px;
}

.section-heading h2{
    font-size:28px;
}

.story-content{
    padding:20px;
}

.story-content h3{
    font-size:20px;
}

.story-image{
    height:220px;
}

.story-image img{
    height:100%;
    object-fit:contain;
}

.popup-body{
    padding:25px;
}

.popup-body h2{
    font-size:25px;
}

.gallery-slider img{
    height:260px;
    object-fit:contain;
    background:#f8fafc;
}

.popup-close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    line-height:38px;
    font-size:24px;
}

}

.popup-gallery{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:40px;
}

.gallery-slider{
    width:100%;
    max-width:700px;
}

.gallery-slider img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:10px;
}

.popup-gallery-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:16px;
}

.popup-gallery-dot{
    width:9px;
    height:9px;
    padding:0;
    border:1px solid rgba(0,51,102,.55);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    transition:.25s;
}

.popup-gallery-dot.active,
.popup-gallery-dot:hover{
    background:#003366;
    border-color:#003366;
}

.popup-close{
    position:absolute;
    top:20px;
    right:20px;
    width:45px;
    height:45px;
    background:#fff;
    border-radius:50%;
    text-align:center;
    line-height:45px;
    font-size:28px;
    cursor:pointer;
    z-index:99999;
}

.featured-image{
    height:650px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.featured-image img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}

@media(max-width:767px){

.gallery-slider img{
    height:260px;
    object-fit:contain;
    background:#f8fafc;
}

.popup-close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    line-height:38px;
    font-size:24px;
}

}