html, body{
    overflow-x: hidden;
    scroll-behavior: smooth!important;
}
body{
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0.5px;
}
/**************generals**************/
ul{
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}
p{
    margin-bottom: 0;
}
h1,h2,h3,h5,h6{
    margin-bottom: 0;
}
/****************colors*****************/
.primary{
    color: #2BB2C8;
}
.secondary{
    color: #002E44;
}
.medium-emphasis{
    color: #464646;
}
.white{
    color: white;
}
/********backgrounds colors************************/
.bg-secondary{
    background-color:#002E44!important;
}
.back-help{
    background-color: #2BB2C8;
}
.services, .footer, .bg-secondary{
    background-color:#002E44!important;
}
.s-dark{
    background-color: #012637;
}
.black{
    background-color: rgba(0,0,0,0.25);
}
/***********headlines**************/
.title, .title-section{
    font-size: 30px;
    font-weight: 400;
    line-height: 30px;
}
.service{ /*por que*/
    font-size: 34px;
    line-height: 36px;
    font-weight: 400;
}
.h5{
    font-size: 24px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0;
    margin-top: 16px;
}
.values{
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
}
.caption{
    font-size: 12px;
    font-weight: 400;
}
/**********buttons*******************/
.primary-btn{
    padding: 12px;
    color:#012637;
    line-height: 16px;
    letter-spacing: 1.25px;
    font-weight: 500;
    border: none;
    border-radius: 4px;
    cursor:pointer;
    background-color: #2BB2C8;
    transition: background-color 1s linear;
}
.primary-btn:hover{
    color:#012637;
    background-color:#66E9F7;
}
.primary-btn img:hover{
    animation-duration: 2s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-timing-function:linear;
}
@keyframes slidein {
    0% {
        transform: translateX(-5px);
    }
    25% {
        transform: translateX(5px);
    }
    50% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(-5px);
    }
}

.link{
    width: 40px;
    height: 56px;
    margin-left: auto;
}
/*********home***********************/

.myVideo{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    margin-top: 58px;
    }
.layer{
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    position: absolute;
    top: 0;
    margin-top: 58px;
}
.home-text{
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
/*********menu mobile button******************/
.nav-mobile{
    position: fixed;
    top:0;
    z-index: 1;
}
.nav-open-trigger, .btn-close{
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 12px;
    line-height: 1;
}
.btn-close{
    opacity: 0;
    background:none;
    fill: white;
}
.btn-close:hover{
    fill:#2BB2C8;
 }
.menu-position{
   /*****para esconder el desbordamiento provocado por el menu movil right: -200vw;**/
    pointer-events: none;
    overflow: hidden;
}
.overlay{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /*eje principal es vertical*/
    align-items: center; /*alineacion eje horizontal*/
    justify-content: center;/*alineacion vertical*/
    height: 58px;
    right: -200vw;
    z-index: 1;
    overflow: hidden;
}
.lang-item{
    display: inline-block;
    padding: 12px;
}
.lang-link{
    color: white;
    pointer-events: none;
    opacity: 0;
}

.lang-link:hover, .lang-link:active,
.lang-d-link:hover, .lang-d-link:active,
.active-lang,.active-lang
{
    color: #2BB2C8;
}
.menu-item{
    display: block;
    padding: 12px;
    text-align: center;
}
.menu-footer-item{
    display: block;
}
.menu-link{
    color: white;
    position: relative;
    opacity: 0;
    pointer-events: none;
}
.menu-footer-link{
    color: white;
    position: relative;
}
.menu-link:hover,.menu-link:active,
.menu-footer-link:hover,.menu-footer-link:active {color: white}
.menu-link::after,.menu-d-link::after, .menu-footer-link::after{
    content: "";
    width: 0;
    position: absolute;
    height: 2px;
    border-radius: 5px;
    background-color:#2BB2C8;
    bottom: -10px;
    left: 0;
    transition: 0.5s ease;
}
.menu-footer-link::after {
    bottom: -2px;
}
.menu-link:hover::after, .menu-link:active::after,
.menu-d-link:hover::after, .menu-d-link:active::after,
.menu-footer-link:hover::after,.menu-footer-link:active::after
{
    width: 100%;
}
.menu-language, .menu-social{margin-top: 80px;}
.social-item{display: inline-block;}
.social-item a{opacity: 0; pointer-events: none}
.social-link, .footer-social-link:hover{
    fill: white;
}
.social-link:hover,.footer-social-link{fill:#2BB2C8;}
.active{
    border-bottom: 2px solid #2BB2C8;
    padding-bottom: 8px;
    pointer-events: none;
}
.active::after{
    transition: none
}
.active:hover::after{
    width: 0;
}
/**********paddings sections***********/
.about-us, .services, .img-services{
    padding: 58px 0;
}
.contact-us,.contact-us-pw, .contact-us-pi, .contact-us-other{
    padding: 80px 0;
}
.pb-40{
    padding-bottom: 40px;
}
.pt-40{
    padding-top: 40px;
}
/*******contact us***************/
.contact-us, .contact-us-pw, .contact-us-pi,.contact-us-other{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.contact-us, .contact-us-other{
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/detail-of-cleaning-terrace-with-high-pressure-wate.webp");
 }
.contact-us-pw{
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/cleaning-street-with-high-pressure.webp");
}
.contact-us-pi{
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/paving-stones-paving-background.webp");
}
/**********footer*******************/
.menu-footer-nav, .menu-language, .menu-nav{
    letter-spacing: 1.25px;
    line-height: 16px;
    font-weight: 500;
    font-size: 16px;
}
.menu-footer-info{
    letter-spacing: 1.25px;
    line-height: 24px;
    font-weight: 500;
}
.menu-footer-social li{
    display: inline;
}
/*************media queries**************************/
@media (min-width: 1200px) {

    /***navbar************/
    nav{
        height: 58px;
        background-color: rgba(255,255,255,0.9) !important;
        z-index: 200;
    }
    .menu-d-nav, .menu-d-language{
        margin-bottom: 0;
    }
    .menu-d-item{
        display: inline-block;
        padding: 12px 8px;
        text-align: center;
    }
    .menu-d-link{
        position: relative;
    }
    .menu-d-link, .menu-d-language{
        font-size: 16px;
    }
    .menu-d-link, .lang-d-link{
        font-weight: 500;
    }
    .navbar-brand{
        width: 109px;
        padding: 0;
    }
    .menu-d-language{
        list-style-type: none;
        width: 327px;
    }
    .lang-d-item{
        display: inline;
        padding: 12px;
    }
    .lang-d-link, .menu-d-link,
    .menu-d-link:hover, .menu-d-link:active{
        color: #002E44;
    }
    .active-d-lang
    {
        color: #2BB2C8;
    }
    .social-link{
        fill: #002E44;
    }
    .social-link:hover{fill:#2BB2C8;}

    .home-text, .myVideo,.layer {
        height: 80vh;
    }
    .layer{
        margin-top: 58px;
    }
    .bg-light{
        background-color: rgba(255,255,255,0.9) !important;
    }
    .contact-us{
        height: 72vh;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    /*******headlines*************/
    .title{
        font-size: 65px;
        font-weight: 300;
        line-height: 112px;
        letter-spacing: -1.5px;
    }
    .title-section{
        font-size: 50px;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: -0.5px;
    }
    .service{
        font-size: 34px;
        line-height: 36px;
        font-weight: 400;
    }
    .h5{
        font-size: 30px;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 0.18px;
        margin-top: 80px;
    }
    .caption{
        font-size: 12px;
        font-weight: 400;
    }
    /**********paddings sections***********/
    .about-us, .services, .img-services, .contact-us{
        padding: 80px 0;
    }
    /********margin**************/
    .mt-n4{
       margin-top: -17px!important;
    }
    /*******services****/
    .item{
        display: inline-block;
    }
    /*******images***************/
    .img-fluid-height{
        height: 190px;
        width: 190px;
    }
     /**********footer*******************/
    .menu-footer-nav, .menu-language, .menu-nav{
        letter-spacing: 1.25px;
        line-height: 16px;
        font-weight: 500;
        font-size: 16px;
    }
    .menu-footer-info{
        letter-spacing: 1.25px;
        line-height: 24px;
        font-weight: 500;
    }
    .menu-footer-social li{
        display: inline;
    }
    .py-xl{
        padding: 50px 0!important;
    }
}

@media (min-width: 1400px) {
    .mt-n4{
        margin-top: -140px!important;
    }
    .menu-d-link, .menu-d-language{
        position: relative;
        font-size: 19px;
    }
}