:root {
    --primary-red: #A41F36;
    --primary-lightgray: #EDF0F2;
    --second-red: #82041A;
    --second-gray: #777777;
    --second-lightgray: #A4A4A5;
    --second-darkgray: #545454;
    --landing-yellow: #EEB601;
    
}
body{
    width: 100%;
    margin: 0;
    font-family: "Lato", sans-serif;
    color: black;
}
.conteiner-whatsapp{
    width: 0px;
    height: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.whatsapp-button{
    position: fixed;
    width: fit-content;
    right: 2%;
    bottom: 2%;
    z-index: 200;
    padding-top: 1%;
    padding-right: 0.9%;
    padding-bottom: 1%;
    padding-left: 1%;
    /*background: #008000;*/
    background: #008000;
    border-radius: 50% 50%;
}
.arrow{
    position: fixed;
    right: 4%;
    bottom: 15%;
    z-index: 200;
    /*padding-top: 1%;
    padding-right: 0.9%;
    padding-bottom: 1%;
    padding-left: 1%;*/
}
.arrow a{
    color: var(--second-darkgray)
}
.whatsapp-button svg{
    width: 100%;
}
#red-button, .red-button{
    display:flex; 
    justify-content: center;
    align-items: center;
}
#red-button button, .red-button button {
    /*background: var(--second-red) !important;*/
    background: var(--second-red);
}
#red-button button:hover, .red-button button:hover{
    background: var(--second-darkgray);
}

.red-button.active button{
    background: var(--second-darkgray) !important;
}
#red-button a, .red-button a{
    color: white;
}
h1, h2, h3, h4, h5, h6, p, div, span, a{
    font-family: 'Lato' !important;
}
a{
    font-family: 'Lato' !important;
    text-decoration: none !important;
}
svg{
    width: 75%;
}
.navbar {
    padding: 0% !important;
    width: 100%;
}
.navicono img{
    width: 95%;
}
.navbar-first{
    color: white;
    background: #A41F36;
    /*padding: 0% 3%;*/
    /*padding-left: 5%;*/
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navbarfirst-left, .navbar-brand{
    width: 30%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.navbarfirst-left .navicono{
    width: 20%;
    padding: 3% 5%;
    border-right: 2px solid white;
}
.navbarfirst-right {
    width: 70%;
    /*padding: 0% 4%;*/
    display: flex;
    justify-content: flex-end;
}
.navbarfirst-right a{
    color:white;
    padding:0% 4.5%;
}
.navbar-second{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--primary-lightgray);
}
.navbar-second .nav-movil{
    background: var(--second-red);
    padding: 3%;
    border-bottom: 1px solid var(--primary-red);
}
.navbarsecond-right .navbar-nav{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.navbar a, .nav-link:focus{
    color: white;
}
.navbarsecond-right .navbar-nav li.dropdown {
    padding: 3% 3%;
}
.navbar-brand img{
    width: 60%;
}
.navbar-nav li.switch-1{
    background: #545454 !important;
    border:none;
}
.navbar-nav  li.switch-2{
    background: #777777 !important;
    border:none;
}
.navbar-nav  li.switch-3{
    background: #A4A4A5 !important;
    border:none;
}

.nav-item a, li.nav-item.dropdown a.nav-link.dropdown-toggle:hover,  a.nav-link.dropdown-toggle.show{
    color: white;
}

.dropdown-menu.show{
    margin:0% !important;
    padding: 0%;
    background: var(--primary-red) !important;
    border-radius: 0%;
    -webkit-border-radius: 0%;
    -moz-border-radius: 0%;
    -ms-border-radius: 0%;
    -o-border-radius: 0%;
}
.navbar-nav  li.dropdown:active{
    background: var(--second-red) !important;
    color: white !important;
}
/*No mover abajo*/
li.nav-item.dropdown:hover, li.nav-item.dropdown.show, .dropdown-item:hover, .navbar-nav  li.dropdown:active {
    background: var(--second-red) !important;
    color: white !important;
}
.switch-3 ul.dropdown-menu.show{
    left: -10% !important;
}
.dropdown-toggle::after{
    display: none !important;
}
.section1home{
    width: 100%!important;
}
.section1home-right{
    display: flex;
    align-items: center;
    flex-direction: column;
    /*justify-content: center;*/
    background-image: url('../img/home/figuraheader.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 55%;
}
.section1homeright-text{
    padding: 10% 0% !important;
}
.section1homeright-text.except{
    padding: 17% 0% !important;
}
.section1homeright-text h1{
    font-weight: 800;
}
.section1homeright-text span{
    font-weight: 300;
    background: white;
}
#backgound-secction2home{
    width: 100% !important;
    height: fit-content;
    padding: 0% 0%;
    padding-top: 5%;
    padding-bottom: 5%;
    background-image: url('../img/home/Fondo.png');
    background-repeat: no-repeat;
    background-size: cover;
}
#backgound-secction2home p{
    font-size: 2rem;
    font-weight: 600;
}
.q1-section2home, .q2-section2service{
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    padding-bottom: 10% !important;
}
button{
    padding: 1% 3% !important;
    border-radius: 30px 30px !important;
    border:none !important;
    color: white;
}
.q1-section2home button{
    background: var(--second-gray);
}
.q1-section2home button:hover{
    background: var(--second-lightgray);
}
.q1-section2home h6, .q2-section2service h6{
    font-size: 2rem;
}
.carousel-cert img.except{
    padding: 5% 2%;
}
.carousel-cert img{
    padding: 5% 6%;
}
.banner-section2home img{
    max-width: 100%;
}
#img-clients{
    z-index: 100;
}
.clients{
    margin-left: -8%;
}
.carousel-clients{
    padding: 5% 0%;
    height: 250px;
}
.carousel-item img{
    width: 45%;
}
.carousel-cert{
    height: 400px;
}
/*.carousel-item.active, .carousel-item-next, .carousel-item-prev */
.carousel-item.active{
    display: flex;
    justify-content: space-evenly;
}
.section1landing .carousel-caption{
    background-image: url('../img/landing/Header/HeaderDegradado.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.section1landing .carousel-caption{
    height: 100% !important;
    width: 100% !important;
    right: 0%;
    bottom: 0rem;
    left: 0%;
    padding: 0% 4%;
    /*text-align: justify;*/
    text-align: left;
    display:flex;
    align-items:center;
}
.section1landing .carousel-caption h2{
    /*border-bottom: 4px solid #82041A;*/
    /*letter-spacing: 5px;*/
    line-height: 1;
    text-transform: uppercase;
    /*padding-bottom: 4%;*/
    margin-bottom: 3%;
    padding-bottom: 3%;
}
.section1landing .carousel-caption .span1{
    font-weight: 300; 
    font-size: 3rem;
}
.section1landing .carousel-caption .span2{
    font-weight: bold; 
    font-size: 4.5rem;
}
.section1landing .carousel-caption p{
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 2%;
}
.csa{
    padding: 0% 8%;
}
.csa img{
    width: 75%;
}
/*------------------------------Services----------------------------*/
#background-service{
    width: 100%;
    margin: 3% 0%;
    padding: 2% 0%;
    height: fit-content;
    background-image: url('../img/Servicios/Servicios.png');
    background-repeat: no-repeat;
    background-size: 80% 100%;
    color: white;
}
#section3{
    width: 100%;
    /*margin: 3% 0%;*/
    padding: 2% 0%;
    height: fit-content;
    background-image: url('../img/home/Fondo.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: black;
}
#section3 h3{
    font-weight: 400 !important;
}
.q1-section2service{
    padding: 7% 9%;
    font-size: 1.6rem;
}
.q2-section2service button{
    background: var(--primary-red);
}
.q2-section2service button:hover{
    background: var(--second-red);
}
.q2services{
    padding: 2% 3%; 
    border-top:1px solid var(--second-red); 
    border-bottom:1px solid var(--second-red); 
    
}
.q2services a, .q2services a:focus{
    color:black;
    font-size: 1rem;
}
.q2services a:hover{
    color:var(--second-red);
    font-size: 1.2rem;
}
.q2services svg{
    color:var(--second-red);
}
.q1-section2home h6, .q2-section2service h6 {
    font-size: 1.8rem;
}
/*------------------------CONTACTO---------------------*/
.backgroundcontact{
    width: 100%;
    padding: 5% 0%;
    height: fit-content;
    background-image: url('../img/Contacto/fondo.png');
    background-repeat: no-repeat;
    background-size: cover;
    
}
.backgroundcontact img{
    margin-left: -10%;
    margin-bottom: 15%;
    margin-top: -7%;
}
.backgroundcontact svg{
    width: 15%;
}
#title-contact{
    color:var(--second-red); 
    font-weight:800; 
    /*font-size:5rem !important;*/
}
.backgroundcontact img {
    margin-left: -13%;
    margin-bottom: 0%;
    margin-top: -10%;
}
.backgroundcontact button a{
    font-size: 70%;
}
.info-contact{
    /*padding: 0% 10% !important;*/
    padding-left: 7% !important;
}
.backgroundcontact #red-button a{
    font-size: 0.9rem;
}
#contacto p{
    text-align: center;
}
/*------------------About us-----------------------------------------*/
.aboutus{
    padding: 2% 3% !important;
}
.aboutm-img{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.aboutm-title{
    color: var(--second-red);
    text-align: center;
    padding: 5% 0%;
}
.aboutm-text{
    background: var(--primary-lightgray);
    margin-top: -24%;
    height: 87%;
    padding: 25% 10% !important;
    text-align: justify;
}
.aboutm-text h5{
    font-weight: 700;
    color: var(--second-red);
}
.section4-aboutus{
    margin-top: -21%;
    padding: 5% 0%;
}
.btn-section4aboutus{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: 2% 6%;
    align-items: center;
}
.q1aboutus-background{
    width: 100%;
    height: fit-content;
    background-image: url('../img/Nosotros_Somos/figurasomos.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 40%;
}
.q1aboutus{
    /*padding-left: 5% !important; */
    padding: 15% 5% !important;
}
.aboutus-text{
    width: 60%;
    padding-left: 5%;
    margin-bottom: 7%;
    margin-top: -9%;
}
.aboutus-title, .title-contact{
    font-size: 3.5rem;
}
/*----------------------------Compressor-----------------------------*/
.q1element-section1{
    padding: 5% 1%;
    text-align: center;
    background: var(--primary-lightgray);
}
.q1element-section1-text{
    padding: 5% 10%;
    text-align: justify;
}
.background-element{
    width: 100%;
    height: fit-content;
    background-image: url('../img/Compresores/Fondo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    padding: 0% 10%;
}
.background-element.other{
    width: 100%;
    height: fit-content;
    background-image: url(../img/Compresores/fondo2.png);
    background-repeat: no-repeat;
    background-size: 77% 100%;
    background-position-x: left;
}
.details-element{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    
    justify-content: flex-end;
    padding-bottom: 5%;
}
.titlefirst-element{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.titlefirst-element h2{
    font-weight: 800;
    color: var(--second-red);
    font-size: 3.5rem; 
}
.titlefirst-element p{
    font-weight: 300;
    font-size: 2rem; 
}
#red-button.except{
    justify-content: flex-end !important;
    margin-bottom: -5% !important;
}
.element-q{
    padding: 5% 4% !important;
}
.element-qin{
    border-right: 2px solid var(--second-lightgray);
    border-bottom: 2px solid var(--second-lightgray);
    background: white;
}
.element-img {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
.element-img img {
    width: 145% !important;
    margin-top: -79%;
    margin-left: 20%;
}
.element-title{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 10%;
}
.element-title p{
    color: var(--second-darkgray);
    font-weight: 400;
}
.element-title h6{
    font-weight: 700;
    color: var(--second-red);
}
.content-body{
    padding: 5% 0% !important;
}
/*-------------------------Formulario--------------------------------*/
.q1-section2home  .modal-body button, .q2-section2service .modal-body button{
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat; 
}
#backgound-secction2home .modal p{
    font-size: 1rem;
    text-align: center;
}
#backgound-secction2home .modal-footer p {
    font-size: 0.8rem;
    color:var(--second-gray)
}
.modal-body{
    padding: 3% 7% !important;
}
/*--------------------------Aviso de privacidad--------------------------------*/
.container-priv{
    padding: 2% 0%;
}
.container-priv h6, .container-priv h1{
    padding: 1% 0%;
}
/*---------------------------------footer----------------------------*/
footer{
    
    width: 100%;
    height: fit-content;
    background-image: url('../img/home/fondofooter.png');
    background-repeat: no-repeat;
    background-size: cover;
}
footer a, footer  p, footer{
    color:white;
}
/*Cookies*/
.cookies {
    display:none;
    background: black;
    position:fixed;
    z-index:90000;
    bottom:0%;
    width:100%;
    padding: 3% 7%;
    opacity: 0;
    transition: opacity 20s ease;
    -webkit-transition: opacity 20s ease;
    -moz-transition: opacity 20s ease;
    -ms-transition: opacity 20s ease;
    -o-transition: opacity 20s ease;
}
.cookies.active{
    display: block;
    opacity: 1;
}
.form-switch .form-check-input {
    width: 3em;
}
.form-check-input {
    width: 1em;
    height: 1.5em;
}
#content {
    display: none; /* El contenido está oculto por defecto */
    margin-top: 10px;
  }
.read-more {
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}
.cookies button{
    width: 35%;
    /*height: 35%;
    */background: none;
    color: var(--primary-red);
    border: 1px solid var(--primary-red);
    border-radius: 50px;
    padding: 5px 10px;
    
}
.accordion-header svg{
    width: 15%;
}
.modal-footer button{
    background: var(--primary-red);
}
.cookies button:hover{
    background: var(--secondary);
    color:white;
}
.icon-social img{
    width: 50%;
}

/*------------------LANDING---------------------*/
/*------------Section 1--------------*/
.navbarfirst-right .navicono{
    /*border-left: 2px solid white; */
    width: 6%;
    background: white;
    padding: 1.5%;
    margin-left: 1%;
}
.navbarfirst-right .navicono.navicon-right{
    /*padding-right: 10%;*/
    margin-left: 0%;
}
/*.navbarfirst-right .navicono.navicon-right img{
    width: 195%;
}*/
/*------------Section 2-------------*/
.section2landing .containerleft{
    background-color: var(--second-red); 
    color:white;
    padding: 5% 5% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
}
.containerline-red{
    width: fit-content;
    margin-top: -15px;
}
.containerline-red .line-red{
    position:relative;
    background: var(--second-red);
    width: 100%;
    height: 3px;
    bottom: 7px;
    z-index: 0;
}
.containerleft h2{
line-height: 1;
}
.containerleft h2 .span1{
    font-weight:300;
    text-transform: uppercase;
}
.containerleft h2 .span2, .containerleft h2 .span3{
    font-weight:700;
    font-size:5rem;
    text-transform: uppercase;
}
.container-line{
    width: fit-content;
    margin-top: -15px;
}
.container-line .line{
    position:relative;
    background: var(--landing-yellow);
    width: 100%;
    height: 15px;
    bottom: 25px;
    z-index: 0;
}
.containerleft h2 .span3{
    position: relative;
    z-index: 2;
}
.section2landing .containerleft #red-button.button-landing,.section2landing .containerright #red-button,
.section5landing .container5-right #red-button.button-landing, .section5landing .container5-right #red-button{
    justify-content: start;
    align-items: center;
}
.section2landing .containerleft #red-button.button-landing button
{
    background: var(--landing-yellow) !important;
}
.section2landing .containerleft #red-button.button-landing button:hover{
    background: var(--second-darkgray) !important;
}
.section2landing .containerright{
    /*color:black;*/
    padding: 5% 5% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
}

.section2landing .containerright #red-button button{
    background: var(--second-red) !important; 
}
.section2landing .containerright #red-button button:hover,
.section5landing .container5-right #red-button button:hover{
    background: var(--landing-yellow) !important; 
}
.section3landing{
    background: url(../img/landing/por-que-coinver/FondoPorqueCoinver.png) ;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4% 5%;
}
.section3landing h2{
    color:white;
    text-align: center;
    font-weight: 700;
    font-size:4.5rem;
    text-transform: uppercase;
    padding-bottom: 5%;
}
.section3landing p, .section3landing .esr p{
    color:white;
    font-size: 1.5rem;
}
.section3landing img{
    width: 85%;
}
.section3landing .esr img {
    width: 60% !important;
}
.containerline-yellow{
    width: fit-content;
    padding-left: 1%;
    /*margin-top: -15px;*/
}
.containerline-yellow .line-yellow{
    position:relative;
    background: var(--landing-yellow);
    width: 100%;
    height: 15px;
    bottom: 50px;
    z-index: 0;
}
.containerline-yellow h2.span3{
    position: relative;
    z-index: 2;
}
.section3landing .title-row{
    display:flex;
    justify-content: center;
}
.section3landing .landing-row1{
    padding-top: 3%;
    /*align-items: center !important;*/
    align-content: center !important;
}
.section3landing .landing-row2{
    padding-top: 7%;
}
.section4-landing{
    background:  url(../img/landing/Productos-y-Servicios/fondo-rojo.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.containerleft.except h2 .span2, .containerleft.except h2 .span3{
    font-size: 4.5rem;
    font-weight: 600;
}
.containerleft.except .container-line {
    width: fit-content;
    margin-top: -6px;
}
.section5landing .container5-left img{
    width: 100%;
}
.section5landing .container5-right{
    display: flex;
    padding: 0% 7%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.section5landing .container5-right h6{
    font-size: 2rem;
    text-transform: uppercase;
}
.container5-right.question1 h6, .container5-right.question3 h6{
    width: 60%;
}
.section6landing{
    background:  url(../img/landing/Formulario/formulario.png);
    background-repeat: no-repeat;
    background-size: cover;
    color:white; 
    padding: 3% 0%;
}
.section6landing #contacto{
    background: rgba(238, 182, 1, 0.9) !important;
    padding: 7% 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.section6landing .containerleft{
    padding: 3% 5% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.section6landing .containerright{
    padding: 0% 3%;
}
.section6landing .contact-form-right h5{
    text-transform: uppercase;
    font-size: 1.7rem;
}
.section6landing .contact-form-right p.text-up{
    font-size: 1.5rem;
    text-align: left;
}
.section6landing #myform{
    padding-top: 3%;
}
.section6landing #contacto p {
    text-align: left;
}
.section6landing #red-button{
    justify-content: flex-start;
}
.section6landing #red-button button, .section6landing .red-button button {
    /* background: var(--second-red) !important; */
    background: var(--second-red);
    padding: 3% 5% !important;
}