/* ==============================
   BIG IMAGE GALLERY – FULL CSS
   ============================== */

/* Section wrapper */
.section{
    width:92%;
    margin:40px auto;
    background:#ffffff;
    padding:30px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
    animation: fadeUp 0.8s ease;
}

/* Section Title */
.section h2{
    margin:0 0 24px;
    color:#003f7f;
    font-size:36px;
    font-weight:700;
    border-bottom:3px solid #ff9933;
    padding-bottom:10px;
}

/* Gallery Grid – WIDER IMAGES */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(420px, 1fr));
    gap:26px;
}

/* Image Card */
.img-box{
    height:340px;
    border-radius:18px;
    overflow:hidden;
    position:relative;
    background:#f2f2f2;
    box-shadow:0 8px 18px rgba(0,0,0,0.18);
    transition:transform 0.35s ease, box-shadow 0.35s ease;
    animation: fadeUp 0.7s ease;
}

/* Image */
.img-box img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Hover – lift only */
.img-box:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 40px rgba(0,0,0,0.32);
}

/* Overlay */
.img-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0.05),
        rgba(0,0,0,0.35)
    );
    opacity:0;
    transition:opacity 0.35s ease;
}

.img-box:hover::after{
    opacity:1;
}

/* Entry animation */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

/* Tablets */
@media(max-width:1024px){
    .gallery{
        grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
    }

    .img-box{
        height:300px;
    }
}

/* Mobile */
@media(max-width:768px){
    .section{
        padding:20px;
    }

    .section h2{
        font-size:26px;
    }

    .gallery{
        grid-template-columns:1fr;   /* single big image */
        gap:18px;
    }

    .img-box{
        height:240px;
    }
}