html {
    box-sizing: border-box;
    font-size: 62.5%; 
}

*, *:before, *:after {
    box-sizing: inherit;
}

:root{
    --font_text: "Questrial", "Arial", sans-serif;
    --font_size_navbar: 1.8rem;
    --font_size_link: 1.6rem;
    --bg-navbar: linear-gradient(to right, #000428, #004E92);
    --bg-quote: #F7F7F7;
    --bg-carrousel: #f5f5f5;
    --bg-services: #0C4574;
    --bg-footer: #038CCD;
    --bg-button: #0A9AE3;
    --bg-btn-whats: #25D366;
    --white_off: rgba(255, 255, 255, 0.7);
    --yellow: #ffff00;
    --white: #FFFFFF;
    --white-navbar: #e8e4e4;
    --gray: #b4bcc4;
    --soft_gray: #D3D3D3;
    --black: #000000;
    --blue-link: #00BFFF;
    --green: #2ECC71;
    --red: #eb4132;
    --red-off: #c7382d;
    --blue-bright: #007BFF;
    --blue--one: #0C4574;
    --blue--two: #1354ac;
}

h1{
    color: var(--black)!important;
    font-size: 4.8rem!important;
    font-family: var(--font_text);
    word-wrap: break-word;
}

h2{
    font-size: 4.8rem!important;
    font-family: var(--font_text);
    word-wrap: break-word;
}

h3{
    font-size: 3rem!important;
    font-family: var(--font_text);
    word-wrap: break-word;
}

h4{
    font-size: 2.8rem!important;
    font-family: var(--font_text);
    word-wrap: break-word;
}

p{
    font-size: 2rem!important;
    font-family: var(--font_text);
    word-wrap: break-word;
}

a{
    text-decoration: none!important;
    font-family: var(--font_text);
}

button{
    border: none;
}

.setting__section{
    padding: 8rem 2rem;
    position: relative;
}

.button__md {
    padding: 1rem 2rem;
    background-color: var(--bg-button)!important;
    border-radius: 4rem;
    transition: all 0.3s ease;
    font-size: var(--font_size_navbar);
    font-family: var(--font_text);
    color: var(--white);
}

.button__md:hover {
    background-color: #005f9e!important;
    color: var(--yellow);
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    z-index: 9999;
}

.preloader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4rem;
    height: 4rem;
    margin: -2rem 0 0 -2rem;
    border: 0.4rem solid #333;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loaded .preloader {
    transition-property: opacity, left;
    transition-duration: 0.75s, 0s;
    transition-delay: 0s, 0.75s;
    opacity: 0;
    left: 100%;
}

.navbar__position{
    position: fixed;
    width: 100%;
    z-index: 10;
    height: 8rem;
}

.bg__navbar{
    background: var(--bg-navbar);
}

.margin__items--nav{
    margin-left: 1rem;
}

.logo__ccg{
    width: 14rem;
    max-width: 100%;
}

.navbar-nav-lg-d li{
    font-size: var(--font_size_navbar);
    margin-right: 2rem;
}

.dropdown-menu li {
    margin-right: 0;
    font-family: var(--font_text);
}

.drop__item--color{
    color: var(--blue-bright)!important;
}

.dropdown--shade {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    border: none;
    padding: 10px;
}

.dropdown--lg > li > .dropdown-item {
    padding: 2rem 2rem;
}

.dropdown--lg > li:not(:last-child) > .dropdown-item {
    border-bottom: 0.2rem solid var(--gray);
}

.navbar-nav-lg-d > .nav-item > .nav-link{
    color: var(--white) !important;
}

.navbar-nav-lg-d .nav-link{
    transition: all 0.3s ease!important;
}

.navbar-nav-lg-d .nav-link--hover:focus,
.navbar-nav-lg-d .nav-link--hover:hover{
    color: var(--white_off)!important;
}

.navbar .nav-item .button__md--contact {
    padding: 1rem 2rem!important;
}

.navbar .nav-item .button__md--contact:hover{
    color: var(--yellow)!important;
}

@media (min-width: 991px) {
    .navbar-nav .dropdown .dropdown-menu {
        display: block;
        opacity: 0;
        transform: translateY(1rem);
        visibility: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    .navbar-nav .dropdown:hover > .dropdown-menu {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }

    .navbar-nav .dropstart .dropdown-menu {
        left: auto;
        right: 100%;
        top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-1rem);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    .navbar-nav .dropstart:hover > .dropdown-menu {
        opacity: 1;
        transform: translateX(0);
        visibility: visible;
    }

    /* Habilita la interacción en desktop */
    .navbar-nav .dropdown > .nav-link {
        pointer-events: auto;
    }
}

.navbar-toggler {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.burger-toggler-icon i{
    font-size: 5.5rem;
    color: var(--white-navbar);
    transition: all 0.3s ease;
    transform: scaleY(0.7); 
    display: inline-block;
}

.burger-toggler-icon i:hover{
    color: var(--gray);
}

.btn-close{
    box-shadow: none !important;
    font-size: 2rem;
}

.offcanvas-header{
    padding: 1rem 2rem!important;
}

#offcanvasMenuLabel{
    font-size: 2.6rem;
}

.navbar-nav-md > .nav-item > .nav-link{
    color: var(--white)!important;
    font-size: var(--font_size_navbar);
    font-family: var(--font_text);
    padding: 3.6rem 1rem 1.6rem 1rem;
}

.navbar-nav--dropdown li{
    font-size: var(--font_size_navbar);
    font-family: var(--font_text);
}

.offcanvas-body .nav-link {
    border-bottom: 0.2rem solid var(--white);
    padding: 1rem 1.2rem;
}

.offcanvas-body .navbar-nav--dropdown .dropdown-item {
    white-space: normal !important; 
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.navbar-nav--dropdown li{
    padding: 0 1rem;
}

.none-padd--item{
    padding: 0!important;
}

.navbar-nav--dropdown > li:not(:last-child) > .dropdown-item {
    border-bottom: 0.2rem solid var(--gray);
}

#bombeo-dropdown.show{
    margin-top: 0.5rem;
}

#pisos-dropdown.show {
    border-top: 0.2rem solid var(--gray);
}

.button-container{
    margin-top: 3rem;
    padding: 0 1.4rem;
}

.margin-icons-nav{
    margin-right: 1rem;
}

@media (max-width: 576px) {
    .padd__navbar{
        padding: 0.5rem 1rem!important;
    }

    .logo__ccg{
        width: 12rem;
    }

    .burger-toggler-icon i{
        font-size: 4rem;
        transform: scaleY(0.7); 
    }
}

@media (max-width: 215px) {
    .logo__ccg{
        width: 5rem;
    }

    .burger-toggler-icon i{
        font-size: 2.5rem;
    }

    .container{
        padding: 0.2rem !important;
    }

    .padd__navbar{
        padding: 0.2rem 0rem!important;
    }
}

.bg__main__overlay::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.bg__main__container{
    height: 75rem;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    padding-top: 5.6rem;
}

@media (min-width: 700px) {
    .bg__main__container{
        height: 100vh;
    }
}

@media (min-width: 1201px) {
    .title__main{
        font-size: 9.8rem!important;
    }
}

@media (max-width: 1200px) {
    .title__main {
        font-size: 7rem !important;
    }
}

@media (max-width: 992px) {
    .title__main {
        font-size: 6.5rem !important;
    }
}

@media (max-width: 768px) {
    .title__main {
        font-size: 6rem !important;
    }
}

@media (max-width: 400px) {
    .title__main {
        font-size: 4.8rem !important;
    }
}

.container{
    position: relative;
    z-index: 2;
}

.button-container--main{
    margin-top: 6rem!important;
}

.button__md--main{
    padding: 2.4rem 3rem;
}

.button__md--h:hover{
    color: var(--white);
}

@media (max-width: 300px) {
    .button__md--main{
        padding: 1rem;
    }
}

@media (max-width: 200px) {
    .button__md--main{
        font-size: 1.5rem;
    }
}

.container__button__about{
    margin-top: 4rem;
}

.button__md--about{
    padding: 1.8rem 4rem;
}

@media (max-width: 992px) {
    .container__text__about{
        margin-top: 3.8rem!important;
    }
}

@media (max-width: 768px) {
    .section__about{
        padding: 6rem 2rem;
    }
}

@media (max-width: 270px) {
    .button__md--about{
        padding: 1rem 2rem;
    }
}

.section__services{
    background: var(--bg-services);
    padding: 4rem 2rem;
}

.box__services{
    padding: 0.5rem;
}

.icon-placeholder{
    color: var(--white);
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.service-title{
    color: var(--green);
    margin-bottom: 2rem;
}

.section__services p{
    color: var(--soft_gray);
}

.service-box{
    margin: 2rem;
}

.info__service{
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.setting__link{
    color: var(--white);
    font-size: var(--font_size_link);
    font-family: var(--font_text);
}

.setting__link i{
    margin-left: 0.8rem;
}

.setting__link i.fa-chevron-right {
    display: inline-block;
    transition: margin-left 300ms ease; 
}

.setting__link:hover i.fa-chevron-right {
    margin-left: 2rem; 
}

@media (max-width: 992px) {
    .section__services{
        padding: 3rem 2rem;
    }
    
    .service-box{
        margin: 2rem 0.5rem;
    }
}

.section__customers{
    padding-top: 12rem;
    padding-bottom: 9rem;
}

.glider-contain{
    margin-top: 4rem!important;
}

.glider__element {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-carrousel);
    border-radius: 1rem;
    padding: 1rem;
    margin: 1rem;
}

.glider__element img{
    width: 24rem;
    height: 16rem;
    object-fit: contain;
}

.glider-next, .glider-prev {
    position: absolute;
    z-index: 2;
    font-size: 4rem!important;
    top: 35%!important;
    cursor: pointer;
    color: var(--black)!important;
}

.glider__indicator{
    margin-top: 3rem!important;
}

.glider-dot.active{
    background: var(--bg-button)!important;
}

.glider{
    overflow: hidden;
}

@media (min-width: 1061px) {
    .glider-contain {
        max-width: 900px;
    }
}

@media (max-width: 1060px) {
    .glider-contain {
        max-width: 700px;
    }
    .glider-next, .glider-prev {
        font-size: 3rem!important;
    }
}

@media (max-width: 799px) {
    .glider-contain {
        max-width: 600px;
    }
}

@media (max-width: 652px) {
    .section__customers{
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    
    .glider-contain {
        max-width: 450px;
    }
}

@media (max-width: 500px) {
    .glider-contain {
        max-width: 340px; 
    }
}

@media (max-width: 399px) {
    .glider-contain {
        max-width: 300px; 
    }
}

@media (max-width: 361px) {
    .glider-contain {
        max-width: 250px; 
    }
}

@media (max-width: 305px) {
    .glider-contain {
        max-width: 170px; 
    }
}

.section__contact{
    padding-top: 0;
    padding-bottom: 1rem;
}

.title__contact{
    padding-bottom: 4rem;
}

.container__items__contact img{
    padding-bottom: 2rem;
}

.list__whatsapp, .list__mail{
    font-size: 2rem;
}

.list__whatsapp i, 
.list__mail i{
    font-size: 2.6rem;
}

.list__whatsapp a,
.list__mail a{
    word-wrap: break-word;
}

.list__mail{
    padding-top: 1.2rem;
}

.list__mail i{
    color: var(--red);
}

.contact__form label{
    font-size: 2rem;
    font-family: var(--font_text);
}

.form-control{
    box-shadow: none !important;
    padding: 0.5rem!important;
}

.contact__form input {
    border: none; 
    border-bottom: 2px solid #000; 
    border-radius: 0;
    outline: none;
    padding: 1rem!important;
    font-size: 1.6rem;
}

.contact__form, .form__group{
    padding-bottom: 2rem;
}

.padd__msg{
    padding-bottom: 1.5rem;
}

.msg__label textarea{
    border: 0.1rem solid !important;
    border-radius: 6px;
    font-size: 1.6rem;
    padding: 1rem!important;
}

.button__md--send{
    padding: 1rem 5rem;
}

.button__md--send:hover{
    color: var(--white);
}

@media (max-width: 992px) {
    .contact__form{
        padding-left: 3rem!important;
    }
}

@media (max-width: 768px) {
    .contact__form{
        padding-left: 0!important;
    }

    .container__items__contact{
        padding-bottom: 4rem;
    }

    .list__whatsapp{
        padding-bottom: 1rem;
    }

    .container__items__contact img{
        padding-bottom: 3rem;
    }

    .button__md--send{
        width: 100%;
    }
}

@media (max-width: 300px) {
    .section__contact{
        padding: 1rem;
    }
    .size__img__contact{
        width: 100%;
    }
}

.container__footer{
    padding: 2rem 1rem;
    position: relative;
}

.bg__footer{
    background-color: var(--bg-services);
}

.bg__footer__copy{
    background-color: var(--bg-footer);
}

.col-md-4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.address--txt{
    font-size: 1.8rem!important;
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 1px solid white;
    border-radius: 50%;
    color: var(--white);
    font-size: 2rem;
    transition: all 0.3s ease-in-out;
}

.social-icon:hover {
    background-color: white;
    color: var(--blue-link);
}

.container__privacy{
    padding-top: 1.4rem;
}

.container__sub__footer{
    padding: 1.2rem 1.6rem;
}

.copy--txt{
    font-size: 1.6rem!important;
}

@media (max-width: 768px) {
    .container__logo__footer{
        padding-bottom: 2rem;
    }

    .container__logo__footer img{
        width: 100%;
    }

    .container__address{
        padding: 1rem 0;
    }

    .container__follow__priv{
        padding: 1rem 0;
    }
}

.bg__main--template{
    background: linear-gradient(to right, rgba(0, 4, 40, 0.95), rgba(0, 78, 146, 0.95));

}

@media (max-width: 768px) {
    .setting__section--temp{
        padding: 6rem 2rem;
    }
}

.container__process{
    padding-top: 3rem;
}

.list__process{
    font-size: 1.6rem;
    font-family: var(--font_text);
    word-wrap: break-word;
}

.list-group-item {
    border: 1px solid var(--soft_gray)!important;
}

.setting__section--process{
    padding-top: 0;
}

.section__ind{
    background-color: var(--bg-services);
}

.title__ind{
    color: var(--white);
    padding-bottom: 7rem;
}

.icon-container {
    padding: 1.6rem; 
}

.icon-container i{
    font-size: 5.2rem;
}

.icon-container p{
    color: var(--green);
    padding-top: 2.6rem;
    font-size: 2.2rem!important;
}

@media (max-width: 992px) {
    .text__ind{
        padding-bottom: 2.6rem;
    }

    .icon-container {
        padding: 1rem; 
    }
}

.setting__section--project{
    padding-bottom: 4rem;
}

.text__project{
    padding-bottom: 3.8rem;
}

.container__project{
    margin-bottom: 3rem;
}

.img__project {
    width: 100%;
    height: 0;
    padding-top: 80%;
    position: relative;
    overflow: hidden;
}

.img__project img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 400px;
}

@media (max-width: 768px) {
    .img__project {
        padding-top: 90%;
    }

    .img__project img {
        max-height: 600px;
    }
}

.container__pumping{
    width: 100%;
}

.container__text__pumping{
    padding-top: 0.6rem;
    padding-bottom: 1rem;
}

.pumping__list li{
    font-size: 2rem;
    font-family: var(--font_text);
}

.padd__pumping{
    padding-top: 7rem;
}

@media (max-width: 410px) {
    
}

.container__project--floor{
    height: 100%;
    min-height: 300px;
}

.container__text__floor{
    padding-top: 1rem;
}

.info__service--padd{
    padding-top: 3rem;
}

.padd__text__temp{
    padding-top: 1rem;
}

.container__separator{
    padding: 3rem 0;
    background-color: var(--white_off);
}

@media (max-width: 767px) {
    .info__service--padd{
        padding-top: 0;
    }
}

.vfrc-input-container {
  display: none !important;
}

.custom-card {
    height: 100%; 
    min-height: 400px;
    padding: 2rem;
    margin: 0;
}

@media (max-width: 992px) {
    .custom-card{
        min-height: 560px;
    }
}

@media (max-width: 767px) {
    .custom-card{
        min-height: 220px;
    }
}

.col-no-padd{
    padding: 0!important;
}

.title__var{
    font-size: 2.5rem!important;
    padding-bottom: 1.4rem;
}

.setting__link--services{
    color: var(--black);
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1150px!important;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1100px!important;
    }
}

.bg__main__container--quote{
    height: 40rem;
    padding-top: 11rem;
    background-color: var(--white);
}

.bg__quote{
    background-color: var(--bg-quote);
}

.title__quote__padd{
    padding: 2rem 0;
}

.line__quote{
    margin: 3rem 0;
}

.quote__form label{
    font-size: 2rem;
    font-family: var(--font_text);
}

.quote__form input,
.quote__form select,
.quote__form textarea,
.quote__form option {
    padding: 1rem !important;
    font-size: 1.8rem;
    border: 2px solid var(--gray);
}

.button__md--add,
.button__md--rem{
    font-size: 1.4rem;
    border-radius: 0.8rem!important;
    padding: 0.8rem 1rem;
}

.button__md--add:hover,
.button__md--rem:hover{
    color: var(--white);
}

.button__md--rem{
    background-color: var(--red)!important;
}

.button__md--rem:hover{
    background-color: var(--red-off)!important;
}

.space__label__data .col-md-6:nth-child(-n+4) {
    padding-bottom: 2rem;
}

.container__button__quote{
    padding-top: 2rem;
}

.button__md--quote{
    background-color: var(--bg-btn-whats)!important;
}

.button__md--quote:hover{
    background-color: #1ebe57!important;
}

@media (max-width: 768px) {
    .space__label__service .col-md-6:nth-child(1){
        padding-bottom: 2rem;
    }

    .space__label__data .col-md-6:nth-child(5){
        padding-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .stg__quote{
        padding: 6rem 2.6rem!important;
    }
}