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

.gallery-section{

    position: relative;
    overflow: hidden;

    padding:50px 0;

    background:#eef7ff;

}


.gallery-section .container{

    max-width:1400px;

    margin:auto;

    padding:0 20px;

}


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

.gallery-heading{

    text-align:center;

    margin-bottom:55px;

}


.gallery-heading h2{

    font-size:46px;

    font-weight:800;

    color:#12305d;

    margin-bottom:18px;

    position:relative;

    display:inline-block;

}


.gallery-heading h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-14px;

    transform:translateX(-50%);

    width:70px;

    height:4px;

    border-radius:30px;

    background:#0d6efd;

}


.gallery-heading p{

    margin-top:28px;

    font-size:18px;

    color:#666;

    line-height:30px;

}



/*=========================================
            SLIDER
=========================================*/

.gallery-slider{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}



/*=========================================
            WRAPPER
=========================================*/

.gallery-wrapper{

    width:100%;

    overflow:hidden;

}



/*=========================================
            TRACK
=========================================*/

.gallery-track{

    display:flex;

    gap:25px;

    transition:.6s ease;

    will-change:transform;

}



/*=========================================
            CARD
=========================================*/

.gallery-card{

    flex:0 0 calc((100% - 75px) / 4);

    text-decoration:none;

}



/*=========================================
            IMAGE BOX
=========================================*/

.gallery-card{

    overflow:hidden;

    border-radius:24px;

    background:#fff;

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

    transition:.35s;

}



.gallery-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    transition:.45s;

}



/*=========================================
            HOVER
=========================================*/

.gallery-card:hover{

    transform:translateY(-8px);

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

}



.gallery-card:hover img{

    transform:scale(1.08);

}



/*=========================================
            ARROWS
=========================================*/

.gallery-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

    z-index:100;

    box-shadow:0 10px 30px rgba(13,110,253,.35);

}



.gallery-btn:hover{

    background:#083baf;

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

}



.gallery-prev{

    left:-28px;

}



.gallery-next{

    right:-28px;

}



/*=========================================
            IMAGE RADIUS
=========================================*/

.gallery-card img{

    border-radius:24px;

}



/*=========================================
            SMOOTH
=========================================*/

.gallery-track,

.gallery-card,

.gallery-card img,

.gallery-btn{

    transition:all .4s ease;

}



/*=========================================
        RESPONSIVE - 1200px
=========================================*/

@media (max-width:1200px){

    .gallery-section{

        padding:80px 0;

    }

    .gallery-heading h2{

        font-size:42px;

    }

    .gallery-card{

        flex:0 0 calc((100% - 75px) / 4);

    }

    .gallery-card img{

        height:300px;

    }

}



/*=========================================
        RESPONSIVE - 992px
=========================================*/

@media (max-width:992px){

    .gallery-section{

        padding:70px 0;

    }

    .gallery-heading{

        margin-bottom:45px;

    }

    .gallery-heading h2{

        font-size:38px;

    }

    .gallery-heading p{

        font-size:16px;

        line-height:28px;

    }

    .gallery-track{

        gap:20px;

    }

    .gallery-card{

        flex:0 0 calc((100% - 20px) / 2);

    }

    .gallery-card img{

        height:300px;

    }

    .gallery-btn{

        width:50px;

        height:50px;

        font-size:22px;

    }

    .gallery-prev{

        left:-20px;

    }

    .gallery-next{

        right:-20px;

    }

}



/*=========================================
        RESPONSIVE - 768px
=========================================*/

@media (max-width:768px){

    .gallery-section{

        padding:60px 0;

    }

    .gallery-heading{

        margin-bottom:35px;

    }

    .gallery-heading h2{

        font-size:32px;

    }

    .gallery-heading h2::after{

        width:60px;

    }

    .gallery-heading p{

        font-size:15px;

        line-height:26px;

        padding:0 15px;

    }

    .gallery-track{

        gap:15px;

    }

    .gallery-card{

        flex:0 0 100%;

    }

    .gallery-card img{

        height:280px;

    }

    .gallery-btn{

        width:45px;

        height:45px;

        font-size:20px;

    }

    .gallery-prev{

        left:-10px;

    }

    .gallery-next{

        right:-10px;

    }

}



/*=========================================
        RESPONSIVE - 576px
=========================================*/

@media (max-width:576px){

    .gallery-section{

        padding:50px 0;

    }

    .gallery-heading h2{

        font-size:28px;

    }

    .gallery-heading p{

        font-size:14px;

        line-height:24px;

    }

    .gallery-card{

        border-radius:18px;

    }

    .gallery-card img{

        height:240px;

        border-radius:18px;

    }

    .gallery-btn{

        width:40px;

        height:40px;

        font-size:18px;
    }

    .gallery-prev{

        left:5px;

    }

    .gallery-next{

        right:5px;

    }

}



/*=========================================
        SMALL MOBILE - 400px
=========================================*/

@media (max-width:400px){

    .gallery-heading h2{

        font-size:24px;

    }

    .gallery-heading p{

        font-size:13px;

    }

    .gallery-card img{

        height:220px;

    }

    .gallery-btn{

        width:38px;

        height:38px;

        font-size:16px;

    }

}