* ::before ::after {
  box-sizing: border-box;
  margin: 0;
}

html {
 scroll-behavior: smooth;
}
:root {
  --naranja: #ffab76;
  --gris-oscuro: #252525;
  --gris-claro: #c1c1c1;
  --azul: #00234d;

  --padding-container: 80px 0;
}

body,
input,
textarea,
button {
  font-family: "Poppins", sans-serif;
}

body {
  margin: 0;
  background-color: var(--gris-oscuro);
}

.header {
  height: 100vhpx;
}

.container {
  
  padding: 2rem 0;
  width: min(90%, 1200px);
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--gris-oscuro);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:60px;
  --nav-icon-background: url("/src/label_icon_open.svg");
  --transform-list-menu: translate(-100%);
}

.nav:has(.nav_checkbox:checked) {
  --nav-icon-background: url("/src/Label_icon_close.svg");
  --transform-list-menu: translate(0%);
}

.nav_checkbox {
  display: none;
}

.nav_label {
  width: 50px;
  height: 50px;
  background-image: var(--nav-icon-background);
  background-size: cover;
  cursor: pointer;
  transition: background-image 0.4s;
}

.nav_list {
  position: absolute;
  inset: 0;
  place-content: center;
  background-color: var(--gris-oscuro);
  padding: 0;
  display: grid;
  gap: 1rem;
  text-align: center;
  list-style: none;
  transition: transform 0.5s;
  transform: var(--transform-list-menu);
  z-index: 99;
  height: 100vh;
}

.nav_logo-link img {
  width: 90px;
  height: 90px;
  overflow: hidden;
}

.nav_label,
.nav_logo-link {
  z-index: 100;
}

.nav_link {
  display: inline-block;
  padding: 0.6rem 1rem;
  color: #c1c1c1;
  text-decoration: none;
  font-size: 26px;
  font-weight: 300;
  z-index: 100;
  transition: background-color 0.4s;
  border-radius: 10px;
}

.nav_link:hover {
  transition: background-color 0.4s;
  background-color: rgba(255, 139, 37, .6);
  color: #252525;
 }

/**hero main**/
.hero_main {
  z-index: 0;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(/src/AutoelevadorPasillo.jpg);
  background-position: center;
  background-size:cover;
  overflow: hidden;
}

.hero_tittle {
  z-index: 1;
  padding-top: 1rem;
  text-align: center;
  line-height: 4rem;
  word-spacing: 0.6rem;
  justify-self: center;
  font-size: clamp(2rem, 2vw + 1rem, 2.8rem);
  color: #c1c1c1;
  font-weight: 300;
  font-size: 28px;
  }

.hero_tittle-background {
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  border-radius: 20px;
  margin: 2rem auto;
  width: min(90%, 600px);
}

.hero_figure {
  display: none;
}

.hero_cta {
  justify-self: center;
  height: 40px;
  width: 200px;
  background-color: rgba(255, 158, 73, 0.6);
  align-content: center;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.5rem 0.5rem;
  color: var(--gris-oscuro);
  transition: background-color 0.4s;
  margin-top: 4rem ;
}

.hero_cta:hover {
  background-color: #f9985c;
  transition: background-color opacity 0.4s;
  opacity: 1;
}

.main_container {
  width: min(90%, 1200px);
  margin: 0 auto;
  padding: 6rem 0 0 0;
}

.main_content {
  background-color: var(--azul);
  border-radius: 20px;
  padding: 4rem;
}

.servicios {
margin: 8rem auto  
}

.main_servicios {
  display: grid;
  gap: 4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  justify-content: space-evenly;
}

.main_tittle {
  color: var(--gris-claro);
  font-size: 28px;
  padding: 2rem 0;
}

.main_image-servicio {
  width: 80px;
}

.main_servicio {
  width: min(90%, 500px);
  margin: auto 0;
  display: flex;
}

.main_tittle-servicio {
  color: var(--naranja);
  font-size: clamp(0.4rem, 1.1rem, 2rem);
  font-weight: 400;
}

.main_parrafo-servicio {
  color: var(--gris-claro);
  font-size: clamp(0.2rem, 1rem, 2rem);
  font-weight: 300;
}

.tittle_para {
  padding-left: 2rem;
  width: min(95%, 400px);
}

.marcas {
  padding: 6rem 0;
  width: min(90%, 1200px);
  margin: 0 auto;
}

.marcas_conteiner {
  border-radius: 20px;
  background-color: #999999;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.marcas_img {
  width: min(100%, 100px);
  padding: 2rem;
  margin: 0 auto;
}

.quienes {
  padding: 6rem 0;
  margin: 0 auto;
  width: min(90%, 1000px);
}


.quienes_tittle {
  text-align: center;
  color: var(--naranja);
  font-size: 26px;
  font-weight: 500;
}
.quienes_parrafo {
  text-align: center;
  color: var(--gris-claro);
  font-size: clamp(0.2rem, 1.4rem, 2rem);
  font-weight: 300;
}

.contacto {
  background-color: var(--naranja);
}

.contacto_list {
  padding: 0;
}
.contacto_conteiner {
  padding: 2rem 0;
  width: min(90%, 1200px);
  margin: 0 auto;
}

.contacto_tittle {
  justify-content: center;
}

.contacto_item {
  list-style: none;
}
.contacto_item-a {
  display: flex;
  justify-content: center;
  padding: .4rem 0;
  color: var(--gris-oscuro);
  align-items: center;
  text-decoration: none;
}

.contacto_item_tittle {
  font-size: 28px;
  list-style: none;
  justify-content: center;
  display: flex;
  font-weight: 300;

}

.contacto_icon {
    display: flex;
    justify-content: center;
    width: 30px;
}

.contacto_parrafo {
    display: flex;
    justify-content:center;
    padding-left: 1rem;
}

@media (width <=800px){
    .main_servicio {
        width: min(90%, 800px);
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .main_parrafo-servicio{
        font-size: 14px;
        text-align: center;
    }

    .main_tittle-servicio{
        font-size: 18px;
        text-align: center;
        padding:0;
    }

    .main_content {
        padding: 1rem;
      }

      .quienes_tittle {
        font-size: 18px;
      }
      .quienes_parrafo {
        font-size: 16px;
      }

}

@media (width >=900px) {
  .nav {
    --transform-list-menu: translate(0%);
  }

  .nav_label {
    display: none;
  }

  .nav_list {
    position: static;
    grid-auto-flow: column;
  }

  .hero_tittle {
    padding-top: 1rem;
    text-align: center;
    line-height: 6rem;
    word-spacing: 0.6rem;
    justify-self: center;
    width: min(110%, 700px);
    font-size: clamp(0.2rem, 1.2vw + 1rem, 2rem);
    color: var(--gris-claro);
    font-weight: 300;
    padding-top: 0;
  }

  .hero_tittle-background {
    width: min(110%, 900px);
  }

  
  .hero_img {
    width: min(100%, 1000px);
    border-radius: 10px;
  }

  #slider {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
  }

  .image {
    position: absolute;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
  }

  .image.active {
    opacity: 1;
  }

  .hero_main {
    display: flex;
    flex-direction: column;
    height: 90vh;
  }

  .hero_cta {
    width: 240px;
    font-size: 20px;
    grid-area: cta;
    justify-self: left;
  }
}