#content .bg {
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--footer-height) - 80px);
    margin: 0;
    padding: 40px 0;
}

#content .bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../../img/about-bg.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

#content .bg::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#content .desc {
    padding: 100px 0 250px;
    color: #cecece;
}

#content .desc h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
    #content .bg {
        min-height: calc(100vh - var(--header-height) - var(--footer-height) - 40px);
        padding: 20px 0;
    }

    #content .bg::before {
        background-position: 46% center;
    }

    #content .desc {
        padding: 20px 0 350px;
    }
}

@media (max-width: 575px) {
    #content .bg::after {
        background-color: rgb(0 0 0 / 40%);
    }

    #content .bg::before {
        background-position: 20% center;
    }

    #content .desc {
        padding: 0;
    }
}

@media (max-width: 480px) {
    #content .bg::before {
        background-position: 35% center;
    }
}