*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial,sans-serif;
    background:#f5f6f8;
    color:#333;
    line-height:1.7;
    margin-top: 130px;
}

/*=========================
HERO
==========================*/

.hero{

    position:relative;
    height:420px;

    background:
    linear-gradient(rgba(103,3,47,.75),rgba(103,3,47,.75)),
    url('../img/gallery-banner.jpg');

    background-size:cover;
    background-position:center;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;

}

.hero::before{

    content:"";
    position:absolute;
    width:170%;
    height:170%;
    background:
    radial-gradient(rgba(255,255,255,.08),transparent 60%);
    animation:floatBackground 18s linear infinite;

}

@keyframes floatBackground{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.hero-overlay{

    position:absolute;
    inset:0;

}

.hero-content{

    position:relative;
    z-index:2;
    color:#fff;
    max-width:700px;
    padding:20px;

}

.hero h1{

    font-size:55px;
    margin-bottom:20px;

}

.hero p{

    font-size:19px;
    opacity:.95;

}

/*=========================
LAYOUT
==========================*/

.container{

    width:95%;
    max-width:1400px;
    margin:60px auto;

}

.gallery-layout{

    display:grid;
    grid-template-columns:3fr 1fr;
    gap:35px;

}

.gallery-content h2{

    color:#67032F;
    margin-bottom:30px;
    font-size:34px;

}

/*=========================
MASONRY
==========================*/

.masonry{

    columns:3 320px;
    column-gap:22px;

}

.gallery-item{

    break-inside:avoid;
    margin-bottom:22px;

    opacity:0;
    transform:translateY(40px);

    animation:fadeUp .7s forwards;

}

.gallery-item:nth-child(2){
    animation-delay:.08s;
}

.gallery-item:nth-child(3){
    animation-delay:.15s;
}

.gallery-item:nth-child(4){
    animation-delay:.22s;
}

.gallery-item:nth-child(5){
    animation-delay:.28s;
}

.gallery-item:nth-child(6){
    animation-delay:.35s;
}

@keyframes fadeUp{

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.image-box{

    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    cursor:pointer;

}

.image-box img{

    width:100%;
    display:block;
    transition:.6s;

}

.image-box:hover img{

    transform:scale(1.08);

}

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

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
    transparent,
    rgba(0,0,0,.8));

    display:flex;
    align-items:flex-end;

    opacity:0;
    transition:.4s;

}

.image-box:hover .overlay{

    opacity:1;

}

.overlay p{

    color:#fff;
    padding:22px;
    font-size:15px;
    font-weight:bold;

}

/*=========================
SIDEBAR
==========================*/

.sidebar{

    position:sticky;
    top:25px;
    height:fit-content;

}

.sidebar-card{

    background:#fff;
    border-radius:18px;
    padding:25px;
    margin-bottom:25px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.sidebar-card:hover{

    transform:translateY(-6px);

}

.sidebar-card h3{

    color:#67032F;
    margin-bottom:18px;

}

.sidebar-card p{

    color:#666;
    margin-bottom:15px;

}

.sidebar-card a{

    display:block;
    padding:10px 0;
    color:#333;
    text-decoration:none;
    border-bottom:1px solid #eee;
    transition:.3s;

}

.sidebar-card a:last-child{

    border:none;

}

.sidebar-card a:hover{

    color:#67032F;
    padding-left:10px;

}

/*=========================
DONATE
==========================*/

.donate{

    background:#67032F;
    color:#fff;

}

.donate h3,
.donate p{

    color:#fff;

}

.donate a{

    display:inline-block;
    margin-top:10px;
    background:#fff;
    color:#67032F;
    border:none;
    padding:14px 25px;
    border-radius:40px;
    font-weight:bold;
    text-decoration:none;
    transition:.35s;

}

.donate a:hover{

    background:#111;
    color:#fff;

}

/*=========================
PAGINATION
==========================*/

.pagination{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:45px;

}

.pagination a{

    background:#67032F;
    color:#fff;
    text-decoration:none;
    padding:12px 22px;
    border-radius:40px;
    transition:.3s;

}

.pagination a:hover{

    background:#000;

}

.pagination span{

    background:#fff;
    padding:12px 22px;
    border-radius:30px;
    box-shadow:0 5px 12px rgba(0,0,0,.08);

}

/*=========================
EMPTY
==========================*/

.empty{

    background:#fff;
    padding:80px;
    text-align:center;
    border-radius:20px;
    color:#777;
    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

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

#lightbox{

    position:fixed;
    inset:0;

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

    display:none;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    z-index:99999;

    padding:30px;

}

#lightbox img{

    max-width:90%;
    max-height:82vh;
    border-radius:15px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);

}

#lightbox p{

    margin-top:20px;
    color:#fff;
    font-size:18px;
    max-width:700px;
    text-align:center;

}

#close-lightbox{

    position:absolute;
    top:20px;
    right:35px;
    font-size:55px;
    color:#fff;
    cursor:pointer;

}

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

@media(max-width:1100px){

.gallery-layout{

    grid-template-columns:1fr;

}

.sidebar{

    position:static;

}

}

@media(max-width:768px){

.hero{

    height:320px;

}

.hero h1{

    font-size:38px;

}

.hero p{

    font-size:17px;

}

.gallery-content h2{

    font-size:28px;

}

.masonry{

    columns:2 220px;

}

}

@media(max-width:550px){

.masonry{

    columns:1;

}

.hero h1{

    font-size:30px;

}

.hero p{

    font-size:16px;

}

.pagination{

    flex-direction:column;

}

}
/* Fix gallery image click */

.image-box{
    position:relative;
}


.image-box a{
    display:block;
    position:relative;
    z-index:5;
}


.overlay{
    pointer-events:none;
}
.gallery-slider{
    position:relative;
    height:350px;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}


.slide{
    position:absolute;
    inset:0;
    opacity:0;
    transition:1s ease;
    text-decoration:none;
}


.slide.active{
    opacity:1;
}


.slide img{

    width:100%;
    height:350px;
    object-fit:cover;

}


.slide-caption{

    position:absolute;
    bottom:0;
    width:100%;

    padding:25px;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.8)
    );

    color:white;

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

}


@media(max-width:700px){

.gallery-slider,
.slide img{

height:250px;

}

}
.gallery-slider{

    position:relative;
    width:100%;
    height:350px;
    overflow:hidden;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,.15);

}


.slide{

    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 1s ease;
    text-decoration:none;

}


.slide.active{

    opacity:1;

}


.slide img{

    width:100%;
    height:350px;
    object-fit:cover;

}



.slide-caption{

    position:absolute;
    bottom:0;
    left:0;
    width:100%;

    padding:25px;

    color:white;

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

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.8)
    );

}



@media(max-width:700px){

.gallery-slider,
.slide img{

    height:250px;

}

}

/* =========================================
   MOBILE GALLERY HERO FIX
========================================= */

@media screen and (max-width: 600px) {

    section.hero {
        width: 100%;
        height: 190px;
        min-height: 190px;
        max-height: 190px;

        padding: 0 15px;

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

        text-align: center;

        overflow: hidden;
        box-sizing: border-box;
    }

    section.hero .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    section.hero .hero-content h1 {
        font-size: 28px;
        line-height: 1.2;
        margin: 0 0 10px;
        max-width: 100%;
        overflow-wrap: break-word;
    }

    section.hero .hero-content p {
        font-size: 13px;
        line-height: 1.5;
        margin: 0 auto;
        max-width: 320px;
        overflow-wrap: break-word;
    }

    section.hero .hero-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

}
/* =========================================================
   SILENTTOUCH GALLERY - MOBILE RESPONSIVE FIX
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 768px) {

    /* -----------------------------------------
       PAGE
    ----------------------------------------- */

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    section.hero {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        max-height: 220px !important;

        margin: 0 !important;
        padding: 20px 15px !important;

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

        position: relative !important;
        overflow: hidden !important;

        box-sizing: border-box !important;
    }

    .hero-overlay {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        max-width: 350px !important;

        margin: 0 auto !important;
        padding: 0 10px !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }

    .hero-content h1 {
        margin: 0 0 12px 0 !important;

        font-size: 30px !important;
        line-height: 1.2 !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    .hero-content p {
        margin: 0 auto !important;

        width: 100% !important;
        max-width: 320px !important;

        font-size: 14px !important;
        line-height: 1.5 !important;

        overflow-wrap: break-word !important;
    }


    /* -----------------------------------------
       MAIN CONTAINER
    ----------------------------------------- */

    .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding: 20px 15px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       GALLERY LAYOUT
    ----------------------------------------- */

    .gallery-layout {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 25px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       GALLERY CONTENT
    ----------------------------------------- */

    .gallery-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .gallery-content h2 {
        width: 100% !important;

        margin: 0 0 18px 0 !important;

        font-size: 24px !important;
        line-height: 1.3 !important;

        overflow-wrap: break-word !important;
    }


    /* -----------------------------------------
       GALLERY GRID
    ----------------------------------------- */

    .masonry {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       GALLERY ITEM
    ----------------------------------------- */

    .gallery-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       IMAGE BOX
    ----------------------------------------- */

    .image-box {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        border-radius: 12px !important;

        overflow: hidden !important;

        position: relative !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       GALLERY IMAGES
    ----------------------------------------- */

    .image-box img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 240px !important;
        max-height: 240px !important;

        object-fit: cover !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       IMAGE CAPTION OVERLAY
    ----------------------------------------- */

    .image-box .overlay {
        max-width: 100% !important;

        box-sizing: border-box !important;
    }

    .image-box .overlay p {
        max-width: 100% !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* -----------------------------------------
       SIDEBAR
    ----------------------------------------- */

    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       SIDEBAR CARDS
    ----------------------------------------- */

    .sidebar-card {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 20px 0 !important;

        padding: 20px !important;

        border-radius: 12px !important;

        box-sizing: border-box !important;

        overflow: hidden !important;
    }

    .sidebar-card h3 {
        font-size: 20px !important;
        line-height: 1.3 !important;

        overflow-wrap: break-word !important;
    }

    .sidebar-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;

        overflow-wrap: break-word !important;
    }

    .sidebar-card a {
        display: block !important;

        max-width: 100% !important;

        overflow-wrap: break-word !important;
        word-break: normal !important;
    }


    /* -----------------------------------------
       PAGINATION
    ----------------------------------------- */

    .pagination {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        flex-wrap: wrap !important;

        justify-content: center !important;
        align-items: center !important;

        gap: 8px !important;

        margin: 25px 0 0 0 !important;

        box-sizing: border-box !important;
    }

    .pagination a,
    .pagination span {
        max-width: 100% !important;

        padding: 9px 12px !important;

        font-size: 13px !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------
       LIGHTBOX
    ----------------------------------------- */

    #lightbox {
        width: 100% !important;
        max-width: 100% !important;

        padding: 15px !important;

        box-sizing: border-box !important;
    }

    #lightbox-image {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: 75vh !important;

        object-fit: contain !important;

        margin: auto !important;
    }

    #lightbox-caption {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 14px !important;
        line-height: 1.5 !important;

        overflow-wrap: break-word !important;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media screen and (max-width: 480px) {

    section.hero {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;

        padding: 15px !important;
    }

    .hero-content {
        max-width: 330px !important;
        padding: 0 5px !important;
    }

    .hero-content h1 {
        font-size: 27px !important;
    }

    .hero-content p {
        font-size: 13px !important;
        max-width: 300px !important;
    }

    .container {
        padding: 18px 12px !important;
    }

    .gallery-content h2 {
        font-size: 22px !important;
    }

    .masonry {
        gap: 15px !important;
    }

    .image-box img {
        height: 220px !important;
        max-height: 220px !important;
    }

    .sidebar-card {
        padding: 18px !important;
    }

}

@media screen and (max-width: 600px) {

    section.hero {
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    .hero-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 100 !important;

    transform: translateY(8px) !important;

    width: 100% !important;
    max-width: 330px !important;

    margin: 0 auto !important;
}
 .hero-content h1 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    z-index: 101 !important;

    margin: 0 0 12px 0 !important;

    font-size: 30px !important;
    line-height: 1.25 !important;

    color: #ffffff !important;

    overflow: visible !important;
}

    .hero-content p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 11 !important;

        margin: 0 auto !important;
        color: #ffffff !important;
    }

}