/*=========================================
        Temple Gallery Section
=========================================*/

.gallery-section{
    padding:50px 0;
    background:#fcf8f3;
    overflow:hidden;
}

.gallery-section .container{
    width:90%;
    max-width:1450px;
    margin:auto;
}

/*=========================================
        Heading
=========================================*/

.gallery-heading{
    text-align:center;
    margin-bottom:70px;
}

.gallery-heading span{
    display:inline-block;
    color:#f36b2a;
    font-size:15px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.gallery-heading h2{
    font-size:60px;
    font-family:Georgia, serif;
    font-weight:400;
    color:#2b2b2b;
    line-height:1.2;
    margin-bottom:20px;
}

.gallery-heading p{
    max-width:760px;
    margin:auto;
    font-size:18px;
    color:#666;
    line-height:1.9;
}

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

.gallery-grid{

    display:grid;

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

    gap:28px;

}

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

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

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

    background:#fff;

    opacity:0;

    transform:translateY(60px);

    transition:

        transform .6s ease,

        opacity .6s ease,

        box-shadow .4s ease;

}

.gallery-card.show{

    opacity:1;

    transform:translateY(0);

}

.gallery-card:hover{

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}

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

.gallery-card img{

    width:100%;

    height:320px;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;

}

.gallery-card:hover img{

    transform:scale(1.12);

}

/*=========================================
        Overlay
=========================================*/

.gallery-overlay{

    position:absolute;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    transition:.45s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

/*=========================================
        Eye Button
=========================================*/

.gallery-view{

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#f36b2a;

    font-size:24px;

    cursor:pointer;

    transform:scale(.5);

    transition:.35s;

}

.gallery-card:hover .gallery-view{

    transform:scale(1);

}

.gallery-view:hover{

    background:#f36b2a;

    color:#fff;

}

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

.gallery-popup{

    position:fixed;

    inset:0;

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

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:99999;

    padding:30px;

}

.gallery-popup.active{

    opacity:1;

    visibility:visible;

}

.gallery-popup img{

    max-width:92%;

    max-height:90vh;

    border-radius:15px;

    animation:popupZoom .35s ease;

}

@keyframes popupZoom{

    from{

        transform:scale(.7);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================
        Close Button
=========================================*/

.gallery-close{

    position:absolute;

    top:30px;

    right:40px;

    color:#fff;

    font-size:42px;

    cursor:pointer;

    transition:.3s;

}

.gallery-close:hover{

    color:#f36b2a;

}

/*=========================================
        Large Tablet
=========================================*/

@media(max-width:1200px){

    .gallery-grid{

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

    }

    .gallery-heading h2{

        font-size:50px;

    }

}

/*=========================================
        Tablet
=========================================*/

@media(max-width:992px){

    .gallery-grid{

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

    }

    .gallery-heading h2{

        font-size:42px;

    }

}

/*=========================================
        Mobile
=========================================*/

@media(max-width:768px){

    .gallery-section{

        padding:80px 0;

    }

    .gallery-section .container{

        width:92%;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .gallery-heading{

        margin-bottom:45px;

    }

    .gallery-heading h2{

        font-size:34px;

    }

    .gallery-heading p{

        font-size:15px;

    }

    .gallery-card img{

        height:260px;

    }

    .gallery-view{

        width:58px;

        height:58px;

        font-size:20px;

    }

}

/*=========================================
        Small Mobile
=========================================*/

@media(max-width:480px){

    .gallery-heading h2{

        font-size:28px;

    }

    .gallery-card{

        border-radius:18px;

    }

    .gallery-card img{

        height:220px;

    }

}