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

.hero{

    position:relative;

    width:100%;

    min-height:85vh;

    background:url("../home/school.jpeg") center center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;
}

/* Dark overlay */

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.55);

    z-index:1;
}

/* Content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

    padding:20px;

    color:#fff;
}

.hero-content h1{

    font-size:3.5rem;

    margin-bottom:20px;

    font-weight:700;

    line-height:1.2;
}



/* ==========================
        TABLET
========================== */

@media (max-width:992px){

.hero{

    min-height:75vh;
}

.hero-content h1{

    font-size:2.8rem;
}


}

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

@media (max-width:768px){

.hero{

    min-height:65vh;

    padding:80px 20px;
}

.hero-content h1{

    font-size:2rem;
}



}






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

.gallery-section{

    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

.gallery-header{

    text-align:center;
    margin-bottom:50px;
}

.gallery-header h2{

    font-size:42px;
    color:#0f172a;
    margin-bottom:12px;
}

.gallery-header p{

    color:#666;
    font-size:18px;
}

.gallery{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:22px;
}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:15px;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    display:block;

    transition:.5s;
}

/* Overlay */

.overlay{

    position:absolute;

    inset:0;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

    opacity:0;

    transform:translateY(20px);

    transition:.4s;
}

.overlay h3{

    color:#fff;

    font-size:28px;

    margin-bottom:10px;
}

.overlay p{

    color:#ddd;

    font-size:16px;

    line-height:1.6;
}

/* Hover Effects */

.gallery-item:hover img{

    transform:scale(1.1);
}

.gallery-item:hover .overlay{

    opacity:1;

    transform:translateY(0);
}



@media (max-width:768px){

    .gallery-header h2{
        font-size:32px;
    }

    .gallery-header p{
        font-size:15px;
    }

    .gallery-item img{
        height:220px;
    }

    .overlay h3{
        font-size:22px;
    }

    .overlay p{
        font-size:14px;
    }

}