/* @media only screen and (max-width: 768px) { */

/* ========== header-info  ========== */

delcon>infoatas .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: fixed;
    width: 100%;
    height: 15vh;
    padding: 0 2em;
    background-color: #54b44f;
    color: yellow;
    z-index: 2;
}

delcon>infoatas .judul {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.5rem;

}

delcon>infoatas .subjudul {
    font-weight: 600;
    font-style: italic;
    font-size: 0.75rem;
    text-transform: capitalize;
    margin-top: 0rem;
}


/* ==========  header-gambar  ========== */

delcon>infogambar {
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center 25vh;
}

delcon>infogambar .servis-info {
    position: absolute;
    top: 40vh;
    height: 20vh;
    width: 100vw;
    padding-left: 5vw;
    padding-top: 5px;

    font-size: 1rem;
    font-weight: 900;
    text-transform: capitalize;
    color: white;
    background-image: linear-gradient(to top, rgba(0, 0, 0), rgba(0, 0, 0, 0.005));

}

/* >>>>>>>>>> gambar header <<<<<<<<<< */

delcon>infogambar.antikorosif {
    background-image: url('/images/header/antikorosif.jpg');
    /* background-position: 0 25vh; */
}

delcon>infogambar.flooring {
    background-image: url('/images/header/flooring.jpg');
    /* background-position: center 25vh; */
}

delcon>infogambar.waterproofing {
    background-image: url('/images/header/waterproofing.jpg');
    /* background-position: center 25vh; */
}

delcon>infogambar.repairconcrete {
    background-image: url('/images/header/repairconcrete.jpg');
    /* background-position: center; */
}

/* >>>>>>>>>> end gambar header <<<<<<<<<< */
/* } */




/* desktop style */
@media only screen and (min-width: 768px) {

    /* ========== #desktop# header-info  ========== */
    delcon>infoatas .header {
        display: flex;
        position: fixed;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        height: 12vh;
        width: 100%;
        padding-right: 10vw;
        background-color: #54b44f;
        color: white;
    }

    delcon .header>.judul {
        font-weight: 800;
        text-transform: uppercase;
        font-size: 1.25rem;
    }

    delcon .header>.subjudul {
        font-weight: 600;
        font-style: italic;
        font-size: 1rem;
        text-transform: none;
        margin-top: -3px;
        height: 40%;
    }


    /* ========== #desktop# header-gambar  ========== */

    delcon>infogambar {
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    delcon>infogambar .servis-info {
        position: absolute;
        top: 80vh;
        height: 20vh;
        width: 100%;
        padding-left: 5vw;
        padding-top: 5px;

        font-size: 8vh;
        font-weight: 900;
        text-transform: capitalize;
        color: white;
        background-image: linear-gradient(to top, rgba(0, 0, 0), rgba(0, 0, 0, 0.005));

    }


    /* >>>>>>>>>> #desktop# gambar header <<<<<<<<<< */


    delcon>infogambar.antikorosif {
        background-size: 100% auto;
        background-position: center 10vh;
    }

    delcon>infogambar.flooring {
        background-size: 100% auto;
        background-position: center center;
    }

    delcon>infogambar.waterproofing {
        background-size: 100% auto;
        background-position: center 0;
    }

    delcon>infogambar.repairconcrete {
        background-size: 100% auto;
        background-position: center;
    }
}