/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
    display: flex;
    align-items: center;
    height: 650px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%), url("../img/hero-bg.jpg") center center no-repeat;
    background-size: cover;
    color: #fff;
}

#hero h3 {
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.2rem;
    margin-top: 1rem;
}



@media (min-width: 1200px) {
    #hero {
        background-attachment: fixed;
    }
}

@media (max-width: 991px) {
    #hero {
        text-align: center;
    }

    #hero .container,
    #hero .container-fluid {
        padding-top: 68px;
    }

    #hero .hero-img {
        text-align: center;
    }

    #hero .hero-img img {
        width: 50%;
    }
}

@media (max-width: 768px) {

    #hero h3 {
        font-size: 16px;
        letter-spacing: 0;
    }

    #hero .hero-img img {
        width: 60%;
    }
}

@media (max-width: 575px) {
    #hero .hero-img img {
        width: 80%;
    }
}

@media (max-width: 575px),
(max-height: 600px) {
    #hero {
        height: auto;
    }
}

/*--------------------------------------------------------------
# inner-kv
--------------------------------------------------------------*/
.inner-kv {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.5) 100%), url("../img/hero-bg.jpg") center center no-repeat;
    background-size: cover;
    color: #fff;
    padding: 7rem 1rem 4rem;
}

.inner-kv h1,
.inner-kv h2 {
    display: inline-block;
}

.inner-kv h1 {
    background-color: #000000;
}

.inner-kv h2 {
    color: #000000;
    background-color: #ffffff;
}