.gallery-section{

    width:100%;

    background:#f8fbff;

}


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


.gallery-hero{

    position:relative;

    width:100%;

    height:620px;

    background-image:url("../Assets/Banner1.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}



.gallery-hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.35),
        rgba(0,0,0,.65)
    );

}



.gallery-hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    max-width:850px;

    color:#f8fbff;

    padding:20px;

}



.gallery-hero-content span{

    display:inline-block;

    font-size:14px;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:20px;

    text-transform:uppercase;

}



.gallery-hero-content h1{

    font-size:64px;

    line-height:1.1;

    font-weight:800;

    margin-bottom:20px;

    white-space:nowrap;

    font-size:clamp(40px,5vw,64px);

}



.gallery-hero-content p{

    font-size:18px;

    line-height:1.7;

    opacity:.9;

    max-width:650px;

    margin:auto;

}



/* Animation */


.gallery-hero-content{

    animation:
    galleryFade .9s ease forwards;

}



@keyframes galleryFade{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



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


@media(max-width:768px){


.gallery-hero{

    height:480px;

}



.gallery-hero-content h1{

    font-size:38px;
    white-space: normal;

}



.gallery-hero-content p{

    font-size:15px;

}



}