/* 
-----------------------------------------
HEADER
-----------------------------------------
*/


/*------ Home header section -------*/

.section-header-home {
    margin-bottom: 1.5rem;
    min-height: 100vh;
}

/* ----- Other pages header section ---------- */

.section-header {
    margin-bottom: 1.5rem;
    /*min-height: 60vh;*/
    height: 500px;
    position: relative;
}

    .section-header .header-bg-container {
        position: absolute;
        top: 0;
        right: .5rem;
        bottom: 0;
        left: .5rem;
        overflow: hidden;
    }

        .section-header .header-bg-container .overlay {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

    .section-header .header-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat
    }

    .section-header .header-content {
        z-index: 1;
    }

        .section-header .header-content h1 {
            font-size: clamp(2.5rem, 2.0408rem + 1.9592vw, 4rem);
            font-weight: 500;
            line-height: 1.2em;
            letter-spacing: 0em;
        }

        .section-header .header-content > div {
            padding-top: 105px;
        }

        .section-header .header-content,
        .section-header .header-content > div {
            height: 500px;
        }

    .section-header.container {
        max-width: 600px;
    }

.no-bg-img {
    background: linear-gradient(180deg, rgba(15, 51, 61, 0.50) -91.47%, rgba(29, 71, 84, 0.50) 100%);
}

@media screen and (max-width: 991px) {
    .top-margin {
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) {
    .section-header .header-bg-container {
        position: absolute;
        top: 0;
        right: 1rem;
        bottom: 0;
        left: 1rem;
        overflow: hidden;
    }
}

@media screen and (min-width: 992px) {
    .section-header {
        margin-bottom: 2rem;
    }

        .section-header .header-bg-container {
            position: absolute;
            top: 0;
            right: 1.5rem;
            bottom: 0;
            left: 1.5rem;
            overflow: hidden;
        }
}

@media screen and (min-width: 1200px) {
    .section-header {
        margin-bottom: 2.25rem;
    }
}

.vision-img > div,
.vision-img > div .cover-img-bottom {
    max-height: 500px;
}