@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&family=Iansui&family=Manrope:wght@200..800&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --background-height: 100vh;
    --site-language-alignment: left;
    --site-language-direction: ltr;
    --site-language-flex-alignment: flex-start;
    --site-language-indent-left: 1;
    --site-language-indent-right: 0;
    --viewport-height: 100vh
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: var(--viewport-height);
    min-width: 320px;
    overflow-x: hidden;
    word-wrap: break-word;
    margin: 0px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

section a {
    text-decoration: none;
}

#container-home {
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.012) 0%, transparent 100%), url("../Images/cover/01.jpg");
    /* background-position: 0% 0%, 50% calc(50% -(((var(--scroll-y, 0)* 1px) -(var(--element-top, 0)* 1px))* var(--background-parallax-intensity, 0))); */
    background-position: -50px 30px;
    background-repeat: repeat, repeat;
    background-size: cover, cover;
    background-position-x: 550px;
    background-position-y: 65px;
}

.container.style1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: var(--viewport-height);
    align-items: center;
    justify-content: top;
    background-attachment: fixed;
}

.logo img {
    width: 20rem;
}

.main-title {
    margin-top: 30px;
    font-size: 45px;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    letter-spacing: 4px;
    text-align: center;
    margin-bottom: 30px;
}


.desc p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    text-align: center;
}

.actions {
    margin-top: 30px;
}

.services, .galery {
    border: 1px solid white;
    color: white;
    padding: 15px;
    width: 6.2rem;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 5px;
    letter-spacing: 3px;
}

.services, .galery, .touch {
    transition: 0.3s;
}

    .services:hover, .galery:hover {
        color: rgba(220,153,202,255);
        transform: scale(1.2);
        border-color: rgba(220,153,202,255);
        background-color: black;
    }

.touch {
    border: 1px solid white;
    color: white;
    padding: 15px;
    width: 10.2rem;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 5px;
    letter-spacing: 3px;
    margin-top: 40px;
    background-color: rgba(220,153,202,255);
    font-weight: 600;
}

    .touch:hover {
        color: rgba(220,153,202,255);
        transform: scale(1.2);
        border-color: rgba(220,153,202,255);
        background-color: black;
    }

/* SECTION - SERVICES */

.services-header {
    background-color: black;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column;
}

    .services-header .title {
        margin-top: 50px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 45px;
        letter-spacing: 15px;
        color: white;
    }

    .services-header .desc {
        color: grey;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: large;
        letter-spacing: 2px;
        margin-top: 50px;
        margin-bottom: 50px;
        text-align: center;
    }

.services-work {
    margin: 0px;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
}

    .services-work div {
        width: 100%;
    }

    .services-work img {
        width: 100%;
        object-fit: cover;
        transition: 0.3s;
        filter: brightness(75%);
    }

    .services-work .img-wrap span {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 600;
        letter-spacing: 2px;
        transition: 0.3s;
    }

    .services-work .img-wrap:hover img {
        transform: scale(1.1);
        font-size: larger;
    }

    .services-work .img-wrap:hover span {
        font-size: larger;
    }


    .services-work .img-wrap {
        position: relative;
    }

        .services-work .img-wrap span {
            color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.services-interior {
    margin: 0;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .services-interior .first {
        color: white;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 30px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

        .services-interior .first span {
            font-size: 30px;
        }

        .services-interior .first p {
            font-size: large;
            color: gray;
            padding: 10px;
            text-align: center;
        }

    .services-interior .view-galery {
        border: 1px solid white;
        padding: 15px;
        margin-bottom: 35px;
        letter-spacing: 2px;
        transition: 0.3s;
        border-radius: 5px;
    }

        .services-interior .view-galery:hover {
            transform: scale(1.2);
            border-color: rgba(220,153,202,255);
            color: rgba(220,153,202,255);
        }

    .services-interior .second {
        width: 90%;
    }

        .services-interior .second img {
            width: 100%;
            object-fit: cover;
            border-radius: 5px;
        }

.services-engine {
    margin: 0;
    background-color: lightgray;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

    .services-engine .first {
        width: 90%;
        order: 2;
    }

        .services-engine .first img {
            width: 100%;
            object-fit: cover;
            border-radius: 5px;
        }

    .services-engine .second {
        color: white;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 30px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        order: 1;
    }

        .services-engine .second span {
            font-size: 35px;
            color: black;
            letter-spacing: 2px;
            text-align: center;
        }

        .services-engine .second p {
            font-size: large;
            color: black;
            padding: 10px;
            text-align: center;
        }

        .services-engine .second .get-in-touch {
            /*            background-color: rgb(16, 162, 172);*/
            background-color: rgba(220,153,202,255);
            padding: 20px;
            border-radius: 5px;
            transition: 0.3s;
            width: 60%;
            text-align: center;
            margin-bottom: 40px;
        }

            .services-engine .second .get-in-touch:hover {
                transform: scale(1.1);
            }

#section-quality {
    background-color: black;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    #section-quality .title {
        color: white;
        font-size: 45px;
        padding: 80px 0 50px 0;
        letter-spacing: 5px;
    }

    #section-quality .desc {
        color: grey;
        font-size: 20px;
        letter-spacing: 1px;
        padding-bottom: 30px;
        text-align: center;
    }

    #section-quality .get-in-touch {
        padding: 20px;
        border-radius: 5px;
        border: 1px solid white;
        transition: 0.3s;
        text-align: center;
        margin-bottom: 40px;
        color: white;
        letter-spacing: 3px;
        transition: 0.3s;
    }

        #section-quality .get-in-touch:hover {
            transform: scale(1.1);
            /*            background-color: rgb(16, 162, 172);*/
            background-color: rgba(220,153,202,255);
        }


/*SECTION cleantle*/

#section-cleantle {
    background-color: black;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cleantle-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:50px;
    margin-bottom:50px;
}

    .cleantle-header .title {
        color: white;
        font-size: 40px;
        text-align: center;
        letter-spacing: 2px;
        padding-top: 25px;
    }

    .cleantle-header .desc {
        color: grey;
        font-size: large;
        text-align: center;
        letter-spacing: 2px;
        padding-top: 25px;
        width:100%;
    }

/*.cleantle-subtitle{
    margin-top:30px;
    color:white;
    font-size:30px
}

.cleantle-imgs {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.cleantle-img {
    padding: 5px 10px 5px 10px;
}

    .cleantle-img img {
        height: 250px;
        width: 100%;
        object-fit:cover;
    }*/

.cleantle-category{
    color:white;
    font-size:30px;
    font-weight:600;
    margin-top:30px
}

.cleantle-box {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: 20px;
}

.cleantle-img-container {
    height: 280px;
    width: 100%;
}

        .cleantle-img-container img {
            height: 100%;
            object-fit:cover;
        }

.cleantle-prop-container {
    color: black;
    background-color: white;
}
.cleantle-prop-title {
    color: black;
    font-weight: 600;
    font-size: 25px;
    margin-bottom: 10px;
    font-family: "Asap", sans-serif;
}
.cleantle-prop-desc {
    color: black;
    font-size: 15px;
    margin: 20px;
    text-align: justify;
    font-family: "Asap", sans-serif;
}

.cleantle-prop-units {
    margin: 20px;
    text-align: justify;
    font-family: "Asap", sans-serif;
}

    .cleantle-prop-units table tr td:first-child{
        width:70px;
    }





    /*SECTION PICKUP*/
    .pickup {
        margin: 0;
        background-color: rgb(0, 0, 0);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .pickup .first {
        width: 90%;
        order: 2;
    }

        .pickup .first img {
            width: 100%;
            object-fit: cover;
            border-radius: 5px;
        }

    .pickup .second {
        color: white;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-top: 30px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        order: 1;
    }

        .pickup .second span {
            font-size: 35px;
            color: rgb(255, 255, 255);
            letter-spacing: 2px;
            text-align: center;
        }

        .pickup .second p {
            font-size: large;
            color: grey;
            padding: 10px;
            text-align: center;
        }

        .pickup .second .get-in-touch {
            /*            background-color: rgb(16, 162, 172);*/
            background-color: rgba(220,153,202,255);
            padding: 20px;
            border-radius: 5px;
            transition: 0.3s;
            width: 60%;
            text-align: center;
            margin-bottom: 40px;
        }

            .pickup .second .get-in-touch:hover {
                transform: scale(1.1);
            }


/* SECTION - GALERY */

#section-galery {
    background-color: black;
    margin: 0;
}

.galery-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .galery-header .title {
        color: white;
        font-size: 30px;
        text-align: center;
        letter-spacing: 2px;
        padding-top: 25px;
    }

    .galery-header .desc {
        color: grey;
        font-size: large;
        text-align: center;
        letter-spacing: 2px;
        padding-top: 25px;
    }

/* GALERY-IMAGES */

.gallery-imgs {
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
}

.gallery-img {
    padding: 5px 10px 5px 10px;
}

    .gallery-img img {
        height: 250px;
        width: 100%;
        object-fit: cover;
    }


.interior-images-header .title {
    color: white;
    font-size: 25px;
    letter-spacing: 5px;
    text-align: center;
}

.interior-images {
    padding-top: 50px;
}

/* APPOINTMENT */

#section-contact {
    padding-top: 40px;
    padding-bottom: 60px;
    background-color: lightgrey;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    #section-contact .appointment {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #section-contact .appointment-title {
        font-size: 25px;
        text-align: center;
        padding-bottom: 40px;
    }

.appointment-form {
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
}

    .appointment-form input, textarea {
        width: 300px;
        height: 30px;
        margin-bottom: 10px;
        border: none;
        border-radius: 5px;
        padding: 10px;
    }

.appointment-send {
    /*    background-color: rgb(16, 162, 172);*/
    background-color: rgba(220,153,202,255);
    width: 290px;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    transition: .3s;
}

    .appointment-send a {
        text-decoration: none;
        color: white;
        font-weight: 600;
    }

    .appointment-send:hover {
        transform: scale(1.1);
    }

#section-contact .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#section-contact .contact-title {
    font-size: 45px;
    text-align: center;
    padding-bottom: 40px;
}

#section-contact .contact-desc {
    font-size: large;
    text-align: center;
    padding: 10px 15px 10px 15px;
    letter-spacing: 1px;
    padding-bottom: 50px;
}

.contact-social {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 20px;
    padding-bottom: 100px;
}

    .contact-social a {
        text-decoration: none;
        color: black;
        font-size: 25px;
        border: 1px solid black;
        padding: 10px;
        width: 30px;
        text-align: center;
    }

#section-footer {
    background-color: black;
    margin: 0;
    color: grey;
    text-align: center;
}

    #section-footer p {
        margin: 0;
        padding: 30px;
    }



/* mobile */
@media only screen and (max-width: 768px) {
    .desc {
        width: 80%;
    }

    .services, .galery {
        margin-top: 15px;
        width: 15rem
    }

    .touch {
        margin-bottom: 30px;
    }

    /* section-services */

    .services-header .title {
        margin-top: 50px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 28px;
        letter-spacing: 1px;
        color: white;
    }
}

@media only screen and (min-width: 769px) {


    #container-home {
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.012) 0%, transparent 100%), url("/Images/cover/01.jpg");
        background-position: 0% 50%;
        background-repeat: repeat, repeat;
        background-size: cover, cover;
    }

    .desc {
        width: 55%;
    }

    .actions {
        display: flex;
    }

    .services, .galery {
        width: 6.5rem;
        height: 2rem;
        display:flex;
        justify-content:center;
        align-items:center
    }

    .services-work {
        margin-right: 0px;
        background-color: black;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }

        .services-work div {
            width: 31%;
        }

    .services-interior {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 50px;
    }

        .services-interior .first {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-basis: 50%;
        }

            .services-interior .first span {
                text-align: center;
            }

        .services-interior .second {
            flex-basis: 50%;
            padding: 30px;
            text-align: center;
        }

            .services-interior .second img {
                border-radius: 10px;
                width: 80%;
            }

        .services-interior .first span {
            font-size: 55px;
            letter-spacing: 5px;
        }

        .services-interior .first {
            letter-spacing: 2px;
        }

    .services-engine .first {
        order: 1;
    }

    .services-engine .second {
        order: 2;
    }

    .services-engine {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 50px;
    }

        .services-engine .second {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-basis: 50%;
        }

            .services-engine .second span {
                text-align: center;
            }

        .services-engine .first {
            flex-basis: 50%;
            padding: 30px;
            text-align: center;
        }

            .services-engine .first img {
                border-radius: 10px;
                width: 80%;
            }

        .services-engine .second span {
            font-size: 55px;
            letter-spacing: 5px;
        }

        .services-engine .second {
            letter-spacing: 2px;
        }

    /*dddd*/
    #section-pickup .pickup .first {
        order: 2;
    }

    #section-pickup .pickup .second {
        order: 1;
    }

    #section-pickup .pickup {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding-top: 50px;
    }

        #section-pickup .pickup .second {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-basis: 50%;
        }

            #section-pickup .pickup .second span {
                text-align: center;
            }

        #section-pickup .pickup .first {
            flex-basis: 50%;
            padding: 30px;
            text-align: center;
        }

            #section-pickup .pickup .first img {
                border-radius: 10px;
                width: 80%;
            }

        #section-pickup .pickup .second span {
            font-size: 55px;
            letter-spacing: 5px;
        }

        #section-pickup .pickup .second {
            letter-spacing: 2px;
        }

    #section-galery {
        padding-top: 50px;
    }

    .galery-header .title {
        font-size: 45px;
        letter-spacing: 10px;
    }

    .gallery-imgs {
        padding-top: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .gallery-img {
        padding: 5px 10px 5px 10px;
        flex-basis: 30%;
        transition: .3s;
    }

        .gallery-img img {
            height: 250px;
            width: 100%;
            object-fit: cover;
        }

        .gallery-img:hover {
            transform: scale(1.07);
            rotate: -3deg;
            filter: brightness(85%);
        }

    .cleantle-items {
        padding-top: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cleantle-box {
        padding: 5px 10px 5px 10px;
        flex-basis: 25%;
        transition: .3s;
    }

    .cleantle-img-container img {
        cursor:pointer;
    }

    .cleantle-prop-desc {
        height:80px;
    }


    .interior-images {
        padding-top: 50px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .interior-images-header {
        padding: 30px 0 30px 0;
    }

        .interior-images-header .title {
            font-size: 45px;
        }
}