/* navbar is sticky so give a padding top */
body {
    font-family: "Montserrat", sans-serif;
}

/* heros section */
.heroSection {
    height: 75vh;
    overflow: hidden;
    background-image: url(../img/index/hero.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
}
/* hero gradient */
.heroSection .image-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(to bottom, transparent, #2d3192); */
    background: linear-gradient(to bottom, transparent 55%, #3e4095 100%);

    z-index: 1;
    pointer-events: none;
}

/* banner section */
.bannerSection {
    min-height: 100vh;
    background-image: url(../img/index/banner.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* banner section */
.customBannerSection {
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.swiper-container {
    width: 100%; /* Full width */
    height: auto; /* Adjust height based on content */
    overflow: hidden; /* Prevent overflow */
}

/* Parallex effect image */

/* reveal images */
.image-container {
    position: relative;
    overflow: hidden;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background-size: cover;
    background-position: center;
    transition: height 0.5s ease-out;
}

/* hero gradient */
.faculty-card-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #151515);
    z-index: 1;
    pointer-events: none;
}
.faculty-card-info {
    z-index: 2;
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
    /* heros section */
    .heroSection {
        background-image: url(../img/index/hero-mobile.jpg);
    }

    .customBannerSection {
        min-height: 110vh;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
}