/* ===================================
    Cover
====================================== */

section{
  position: relative;
  overflow-x:clip;
}

.cover{
  width: 100%;
  height: 450px;
  padding-top: 150px;
  padding-bottom: 0px;
  position: relative;
  overflow-x: clip;
  background: linear-gradient(180deg, rgba(3, 3, 3, 0.7) 0%, #030303 100%),url("../../assets/img/Nosotros/Cover BG.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display:flex;
  align-items: center;
}


.bg-cover{
  background: rgb(0,0,0);
background: linear-gradient(176deg, rgba(0,0,0,1) 85%, rgba(255,255,255,1) 85%);
}

.inf-cover{
  width: 100%;
}

.inf-cover .description{
  position: relative;
  z-index: 10;
  width: 100%;
}

.inf-cover .indicador{
  font-size: 14px;
  font-weight: 300;
  line-height: 21px;
  color: #fff;
}

.inf-cover h1{
  font-family: 'Poppins', sans-serif !important;
  text-transform: uppercase;
}

.img-cover{
  width: 80%;
position: absolute;
top: 200px;
right: 50px;
z-index: 1;
}

.img-deco{
  width: auto;
  position: absolute;
  top:40%;
  right: 0px;
  transform: translate(-0%, -50%);
}

.frente{
  position: relative;
  z-index: 10;
}
/* ===================================
    Global
====================================== */

.content-img-nosotros{
  padding-right: 15px;
  position: relative;
  min-height: 650px;
  display: none;
}

.img-nosotros{
  width: 110%;
  height: 650px;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 10px;
  position: absolute;
  top:0;
  left: -200px;

}

.img-nosotros img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 10px;
}

.content-años{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
}

.content-años img{
  width: 120px;
  margin-bottom: 20px;
}

.text-año{
  font-size: 56px;
  color: #010811;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  line-height: 4rem;
  text-transform: none!important;
}

/*--------------------*/

.inf-card{
  width: 90%;
position: relative;
top: -100%;
right: 0px;
background: #050404;
color: #fff !important;
padding: 40px 110px 30px 30px;
border-radius: 10px;
}

.inf-card .deco{
  position: absolute;
  right: -50px;
  bottom: -20px;
}

.inf-card .sig{
  position: absolute;
  top: -20px;
  left: 30px;
}

.deco-nosotros{
  width: 100%;
  position: relative;
  top:60px;
  right: -40%;
}


/*-----Clientes------*/

.content-clientes{
  background: #000;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 50px 30px 0px 30px;
}

.inf-card-clientes{
  position:relative;
  background: #FFFFFF;
  color: #000!important;
  padding: 20px 20px 20px 20px;
  border-radius: 10px;
  margin-left: 0px;
  margin-top: 30px;
}


.inf-card-clientes .sig{
  position: absolute;
  top: -20px;
  left: 30px;
}

/*-----Presupuesto-----*/

.content-presupuesto{
  padding: 0px 10px 0px 10px;
  position: relative;
}

.bg-back-presupuesto{
  position: absolute;
  top: 0;
  background: #000;
  width: 100%;
  height: 50%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*-----Galeria Marcas-----*/

.content-marcas{
  padding-right: 10px;
  padding-left: 10px;
}

#galery-marcas{
  padding-top: 50px;
  padding-bottom: 50px;
}

#galery-marcas .deco{
  width: 100%;
  height: 12px;
  background: linear-gradient(270.04deg, #9D0404 0.04%, #FF0000 99.98%);
  border-radius: 30px;
  position: relative;
  top:92px;
}

#galery-marcas .swiper-slide{
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#galery-marcas .swiper-slide img{
  width: 150px;
  height: 60px;
}

#galery-marcas .swiper-slide .circulo{
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 20px;
}

#galery-marcas .swiper-slide .description{
  padding-left: 20px;
  padding-right: 20px;
}

#galery-marcas .swiper-slide .description p{
  margin-bottom: 0;
  font-size: 14px;
  line-height: normal;
  color: #000;
}

#galery-marcas .swiper-button-next-marcas {
  color: #000;
}

#galery-marcas .swiper-button-prev-marcas{
  color: #000;
}

#galery-marcas .swiper-button-next-marcas:hover{
  color: #fff;
}

#galery-marcas .swiper-button-prev-marcas:hover{
  color: #fff;
}

/*call to action*/


.content-cta-bottom{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "img"
    "inf";

}

.info-cta {
  grid-area: inf;
  position: relative;
  z-index: 10;
}

.cta-bottom{
  padding-bottom: 250px;
}

.content-cta-bottom .description{
  width: 70%;
}

.img-cta-bottom{
  position: relative;
  grid-area: img;
}

.img-cta-bottom img{
  position: relative;
width: 300px;
top: -50px;
left: -10px;
}


/* ===================================
    Grid
====================================== */

.grid-nosotros{
  display: grid;
  grid-template-columns: 1fr;
  gap:30px;
}

.grid-clientes{
  display: grid;
  grid-template-columns: 1fr;

}

.grid-marcas{
  display: grid;
  grid-template-columns: 1fr;
  gap:30px;
}

/* ===================================
    Responsive
====================================== */

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.img-cover{width: 70%;
        position: absolute;
        top: 155px;
        right: -50px;}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

.content-años{text-align: left;flex-direction: row;}

.content-presupuesto{padding: 0px 30px 0px 30px;}

.img-cover{        width: 60%;
        position: absolute;
        top: 85px;
        right: -85px;}


}
/* md  */ @media (min-width: 768px) {

.cover{height: 500px;}

.inf-cover .description{width: 70%;}

.img-cover{width: 60%;
        position: absolute;
        top: 20px;
        right: -125px;}

.content-marcas{
  padding-right: 50px;
  padding-left: 50px;
}



.inf-card{width: 85%;}

.deco-nosotros{top: 40px;right: -35%;}


.content-cta-bottom{
  display: grid;
  grid-template-columns: 50% auto;
  grid-template-areas:
    "inf img";
}

.img-cta-bottom img{
  position: absolute;
width: 130%;
top: -150px;
left: -80px;
}


} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {
.grid-nosotros{
  display: grid;
  grid-template-columns: 50% auto;
  gap:0;
}

.grid-clientes{
  display: grid;
  grid-template-columns: 50% auto;

}

.inf-card-clientes{
  margin-left: 50px;
  margin-top: 0px;
}

.grid-marcas{
  display: grid;
  grid-template-columns: 50% auto;
  gap:0;
}

.content-marcas{
  padding-right: 100px;
  padding-left: 100px;
}

.inf-cover{
  width: 70%;
}

.img-cover{
  width: 50%;
        position: absolute;
        top: 35px;
        right: -65px;
}

.content-img-nosotros{display: inherit;}

.img-nosotros{
  width: 100%;
  height: 600px;
  left: -100px;
}
.inf-card{width: 100%;}

.deco-nosotros{top: 40px;right: -35%;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {


.grid-nosotros{
  display: grid;
  grid-template-columns: 65% auto;
}

.grid-clientes{
  display: grid;
  grid-template-columns: 60% auto;

}

.inf-cover{
  width: 60%;
}

.img-cover{
  width: 45%;
position: absolute;
top: 60px;
right: 0px;
}
}


.img-nosotros{
  width: 110%;
  height: 650px;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 10px;
  position: absolute;
  top:0;
  left: -200px;
}

.inf-card{
  width: 70%;
  position:absolute;
  top: -100%;
  right: 50px;
  background: #050404;
  color: #fff!important;
  padding: 40px 110px 30px 30px;
  border-radius: 10px;
}

.deco-nosotros{
  width: 100%;
  position: relative;
  top:60px;
  right: -40%;
}

}
/* xxl */ @media (min-width: 1400px) {}
