/*=========================================
        GALLERY SECTION
==========================================*/

.gallery-section{

    padding:90px 0;

    background:#f5f7fc;

    overflow:hidden;

}


/*=========================================
        HEADING
==========================================*/

.gallery-heading{

    max-width:760px;

    margin:0 auto 50px;

}

.gallery-tag{

    display:inline-block;

    padding:8px 20px;

    border-radius:50px;

    background:#eef1fb;

    color:#213166;

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:15px;

}

.gallery-heading h2{

    font-size:42px;

    font-weight:800;

    color:#213166;

    margin-bottom:15px;

}

.gallery-heading h2 span{

    color:#f39c12;

}

.gallery-heading p{

    color:#6c7280;

    font-size:16px;

    line-height:28px;

    margin:0;

}


/*=========================================
        GALLERY ITEM
==========================================*/

.gallery-item{

    position:relative;

    height:300px;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

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

    cursor:pointer;

    animation:galleryFade .7s ease both;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:
        transform .6s ease,
        filter .6s ease;

}


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

.gallery-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(33,49,102,.90),
            rgba(33,49,102,.15),
            transparent
        );

    display:flex;

    align-items:flex-end;

    padding:25px;

    opacity:0;

    transition:.4s ease;

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(.85);

}


/*=========================================
        GALLERY CONTENT
==========================================*/

.gallery-content{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    transform:translateY(20px);

    transition:.4s ease;

}

.gallery-item:hover .gallery-content{

    transform:translateY(0);

}

.gallery-content h5{

    color:#fff;

    margin:0;

    font-size:18px;

    font-weight:600;

}


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

.gallery-view{

    width:45px;

    height:45px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.5);

    background:#FFC107;

    color:#213166;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}

.gallery-view:hover{

    background:#fff;

    transform:rotate(10deg) scale(1.1);

}


/*=========================================
        LIGHTBOX
==========================================*/

.gallery-lightbox{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    background:rgba(5,10,25,.94);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    padding:30px;

}

.gallery-lightbox.active{

    opacity:1;

    visibility:visible;

}


/*=========================================
        LIGHTBOX CONTENT
==========================================*/

.lightbox-content{

    max-width:1000px;

    max-height:90vh;

    text-align:center;

    position:relative;

    transform:scale(.85);

    transition:.4s ease;

}

.gallery-lightbox.active .lightbox-content{

    transform:scale(1);

}

.lightbox-content img{

    max-width:100%;

    max-height:80vh;

    object-fit:contain;

    border-radius:12px;

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

}


/*=========================================
        LIGHTBOX TITLE
==========================================*/

.lightbox-title{

    color:#fff;

    font-size:17px;

    font-weight:600;

    margin-top:15px;

}


/*=========================================
        LIGHTBOX BUTTONS
==========================================*/

.lightbox-close,
.lightbox-prev,
.lightbox-next{

    position:absolute;

    border:0;

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

    z-index:5;

}

.lightbox-close{

    top:25px;

    right:30px;

    background:#fff;

    color:#213166;

    font-size:20px;

}

.lightbox-prev{

    left:30px;

    top:50%;

    transform:translateY(-50%);

    background:#FFC107;

    color:#213166;

    font-size:22px;

}

.lightbox-next{

    right:30px;

    top:50%;

    transform:translateY(-50%);

    background:#FFC107;

    color:#213166;

    font-size:22px;

}

.lightbox-close:hover{

    background:#FFC107;

    transform:rotate(90deg);

}

.lightbox-prev:hover{

    background:#fff;

    transform:translateY(-50%) scale(1.1);

}

.lightbox-next:hover{

    background:#fff;

    transform:translateY(-50%) scale(1.1);

}


/*=========================================
        ANIMATION
==========================================*/

@keyframes galleryFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media(max-width:991px){

    .gallery-section{

        padding:70px 0;

    }

    .gallery-heading h2{

        font-size:36px;

    }

    .gallery-item{

        height:280px;

    }

    .lightbox-prev{

        left:15px;

    }

    .lightbox-next{

        right:15px;

    }

}


@media(max-width:767px){

    .gallery-section{

        padding:60px 15px;

    }

    .gallery-heading{

        margin-bottom:35px;

    }

    .gallery-heading h2{

        font-size:30px;

    }

    .gallery-heading p{

        font-size:15px;

        line-height:25px;

    }

    .gallery-item{

        height:260px;

        border-radius:16px;

    }

    .gallery-overlay{

        opacity:1;

        padding:18px;

    }

    .gallery-content{

        transform:translateY(0);

    }

    .lightbox-content{

        max-width:95%;

    }

    .lightbox-content img{

        max-height:70vh;

    }

    .lightbox-close{

        top:15px;

        right:15px;

        width:45px;

        height:45px;

    }

    .lightbox-prev,
    .lightbox-next{

        width:42px;

        height:42px;

    }

}