/* Basic Reset */
:root {
  --color-primary: #c8142c;
  --color-secondary: #171f25;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lexend", sans-serif;
}

body{
  overflow-x: hidden;
}

section{
  /* width: 100%; */
  /* max-width: 1200px; */
}

/* Navbar Styles */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
}

/* Estilo del botón flotante */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  display: none; /* Inicialmente oculto */
  z-index: 1;
}
.back-to-top:hover {
  background-color: #c8142c;
}

/* Logo Styles */
.logo_gemba img {
  height: 60px;
  /* Adjust this value as needed */
}
/* Logo Styles */
.logo_sdaas img {
  height: 80px;
  /* Adjust this value as needed */
}

/* Button Styles */
.btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 0.8em;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: 0.2s ease-out;
  text-transform: uppercase;
}

.btn-primary {
  background-color: #c8142c;
  color: white;
}

.btn-primary:hover {
  scale: 1.05 !important;
}

/* Home Styles */
.container-home {
  height: 80vh;
  background: url("");
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-content: center;
  gap: 20px;
  margin: 0 10%;
  .home-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    .title {
      font-size: 3em;
      font-weight: 800;
    }

    .description {
      width: 80%;
      font-size: 1.6em;
      padding: 15px 0;
      font-weight: 300;
    }
  }

  .home-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    .card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: auto;
      height: 450px;
      border-radius: 8px;
      color: white;
      box-shadow: 10px 10px 0px 0px var(--color-secondary);
      padding: 15px 20px;
      transition: 0.2s ease-out;
      .card-ubication {
        display: grid;
        grid-template-columns: 7% 93%;
        gap: 5px;
      }
      .card-name {
        font-size: 40px;
        font-weight: 500;
      }
      .card-line {
        width: 100%;
        height: 1px;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 10px;
        transition: all 0.3s;
      }
    }
    .card-one {
      background: url("../img/foto_1.png") no-repeat;
      background-size: cover;
      background-position: center;
    }
    .card-two {
      background: url("../img/foto_2.png") no-repeat;
      background-size: cover;
      background-position: center;
    }
    .card-one:hover {
      background: url("../img/foto_1_color.png") no-repeat;
      background-size: cover;
      background-position: center;
      scale: 1.05;
    }
    .card-two:hover {
      background: url("../img/foto_2_color.png") no-repeat;
      background-size: cover;
      background-position: center;
      scale: 1.05;
    }
  }
}

/* Gemba Styles */
.container-gemba {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  gap: 20px;
  margin: 0 10%;
  .gemba-galery {
    width: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "one two"
      "three three";
    gap: 10px;
    .gemba-one {
      grid-area: one;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 250px;
      height: 250px;
      background-color: #c8142c35;
      border-radius: 8px;
    }
    .gemba-two {
      grid-area: two;
      width: 250px;
      height: 250px;
      background: url("../img/photo_code_two.png") no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
    }
    .gemba-three {
      grid-area: three;
      height: 250px;
      background: url("../img/photo_code_one.png") no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
    }
  }
  .gemba-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;
    font-size: 25px;
    color: #7e7e7e;
    .gemba-line {
      width: 30%;
      height: 3px;
      margin-top: 2px;
      border-radius: 10px;
      background: var(--color-primary);
    }
  }
}

/* Realtime Styles */
.container-realtime {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .realtime-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80%;
    background: url("../img/bg_realtime.png") no-repeat;
    background-size: cover;
    background-position: center;
    .text {
      color: white;
      font-size: 2.8rem;
      font-weight: 500;
      text-align: center;
      padding: 0 10%;
    }
    .btn {
      margin-top: 20px;
    }
  }
}

/* AI Styles */
.container-ai {
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5% 10%;
  .ai-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3.5rem;
    font-weight: 500;
    margin-bottom: 2%;
  }
  .ai-galery {
    width: 50%;
    padding: 5% 5% 5% 8%;
    display: grid;
    align-self: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      ". copilop ."
      "aws azur gcp"
      ". codium .";
    gap: 10px;
    .ai-copilop {
      grid-area: copilop;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #fff;
      padding: 10%;
    }
    .ai-aws {
      grid-area: aws;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #fff;
      padding: 10%;
    }
    .ai-azure {
      grid-area: azur;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #fff;
      padding: 10%;
    }
    .ai-gcp {
      grid-area: gcp;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #fff;
      padding: 10%;
    }
    .ai-codium {
      grid-area: codium;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: #fff;
      padding: 10%;
    }
  }
  .ai-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
    grid-area: info;
    font-size: 25px;
    .ai-line {
      width: 30%;
      height: 3px;
      margin-top: 2px;
      border-radius: 10px;
      background: var(--color-primary);
    }
  }
}

.container-companies {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
  padding: 0 10%;
  .companies-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 7%;
    .companies-title {
      font-size: clamp(1rem, -0.875rem + 8.333333vw, 3rem);
      font-weight: 500;
    }
    .companies-text {
      ul li {
        list-style: url("../img/check-circle.svg");
        line-height: 1.3rem;
        margin: 15px 25px;
        font-size: 14px;
        font-weight: 400;
        color: #7e7e7e;
      }
    }
  }
  .companies-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .companies-galery {
        display: flex;
        align-items: center;
        justify-content: center;
        width: clamp(50%, 10vw + 100%, 100%);
      height: auto; /* Para mantener la proporción de la imagen */
      img {
        
        width: clamp(200px, 100%, 100%);
      }
    }
  }
}

.container-choose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 5% 12%;
  .choose-title {
    width: 100%;
    text-align: center;
    font-size: clamp(1rem, -0.875rem + 8.333333vw, 3.5rem);
    font-weight: 500;
  }
  .choose-items{
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  }
  .choose-6 {
    /* grid-area: card6; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card-choose {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 15px;
    height: 250px;
    border: solid 1px #b2b2b2;
    background-color: #fff;
    border-radius: 7px;
    box-shadow: 15px 15px 0px 0px var(--color-secondary);
    .card-icon {
      color: #e58b8b7d;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 26px;
      border: solid 3px #e58b8b7d;
    }
    .card-title {
      width: 80%;
      font-size: 25px;
      color: #414141;
    }
    .card-info {
      font-size: 22px;
      font-weight: 300;
      color: #414141;
    }
  }
}

.container-benefits{
    height: 100vh;
    background: url("../img/bgbenefits.png") no-repeat;
    background-size: cover;
    background-position: center;
    display: grid;
    color: white;
    align-self: center;
    align-content: center;
    gap: 40px;
    grid-template-columns: 1fr;
    grid-template-areas:
    "title"
    "items";
    .benefits-title{
        grid-area: title;
        text-align: center;
        justify-items: center;
        font-size: clamp(1rem, -0.875rem + 8.333333vw, 3.5rem);
        font-weight: 500;
    }
    .benefits-items{
        grid-area: items;
        padding: 0 5%;
        display: grid;
        gap: 10px;
        /* grid-template-columns: repeat(4, 1fr); */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        .item{
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            margin: 0 20px;
            .item-icon{
                display: grid;
                align-items: center;
                justify-items: center;
                background-color: white;
                margin-bottom: 15px;
                width: 70px;
                height: 70px;
                border-radius: 50%;
            }
            .item-title{
                text-align: center;
                margin-bottom: 15px;
                font-size: 1.5rem;
                font-weight: 500;
            }
            .item-info{
                text-align: center;
                font-size: 1.5rem;
                font-weight: 300;
            }
        }
    }
}

.container-services{
    width: 99%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    .carousel{
      width: 100%;
      text-align: center;
    }
    .services-title{
      font-size: 3.5rem;
      text-align: center;
    }
    .services-subtitle{
      font-size: 2.5rem;
      text-align: center;
      font-weight: 500;
      color: #3A4C59;
      margin: 20px 0;
    }
    .services-carusel{
      .carousel-container {
        width: 95%;
        margin: auto;
      }
      .carousel{
          height: 300px;
      }
      .carousel-item{
        margin: 10px;
      }
      .carousel-item img {
          width: 100%;
          filter: grayscale(100%);
          transition: filter 1s ease;
      }
      .carousel-item.slick-center img {
          filter: none;
          scale: 1.2;
          z-index: 1;
      }
      .slick-prev, .slick-next {
          width: 20px;
          height: 20px;
          background-color: #000000;
          color: black;
          /* border: none; */
          border-radius: 50%;
          z-index: 1;
      }
      .title {
          color: black;
          text-align: center;
          margin-top: 20px;
          font-size: 24px;
          font-weight: bold;
      }
    }
}

.container-get-started{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    .get-started-text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 75%;
        padding: 0 5%;
        background: url("../img/bg_get.png") no-repeat;
        background-size: cover;
        background-position: center;
        .get-started-title{
            font-size: 2.8rem;
          font-weight: 500;
          color: var(--color-primary);
        }
        .get-started-info{
          font-size: 2.8rem;
          font-weight: 500;
          color: white;
          text-align: center;
          margin-top: 20px;
        }
        .btn {
            margin-top: 20px;
          }
    }
    
}

.container-questions{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
    height: 100vh;
    background-color: white;
    margin: 0 5%;
    .questions-title{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
    }
    .question-title-h1 {
        width: 100%;
        max-width: 800px;
        display: flex;
        justify-content: start;
        align-items: center;
      }
      
      .title-bg {
        width: 45%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
      }
      
      .title-text {
        position: absolute;
        font-size: 3.5rem;
        mix-blend-mode: difference;
        color: white; /* Color blanco por defecto para el mix-blend-mode */
        text-align: start;
        padding-left: 65px;
      }

      .questions{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .contenedor-acordeon {
          width: 100%;
      }
      
      .acordeon {
          background: #fff;
          position: relative;
      }
      
      .acordeon label {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 10px;
          padding: 20px;
          font-size: 20px;
          background: #D9D9D9;
          color: #667179;
          cursor: pointer;
          margin-bottom: 2px;
          transition: all 300ms ease;
          position: relative;
          user-select: none;
          p{
            width: 90%;
          }
      }
      
      .acordeon .bg-arrow{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        background-color:#171F25;
        border-radius: 50%;
        margin-left: 10px;
      }
      
      .acordeon .arrow {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 10px;
          height: 10px;
          /* border-right: 2px solid #000000;
          border-bottom: 2px solid #000000; */
          transform: rotate(180deg);
          transition: transform 500ms ease;
      }
      
      .acordeon .contenido-acordeon {
          padding: 0px;
          margin: 0px 20px;
          max-height: 0px;
          overflow: hidden;
          transition: all 300ms ease;
      }
      
      .btn-acordeon:checked ~ label .arrow {
          transform: rotate(360deg);
      }
      
      .btn-acordeon:checked ~ .contenido-acordeon {
          max-height: 600px;
          padding: 15px 0px;
      }
      
      .btn-acordeon {
          display: none;
      }
      }
    
}

.container-contact{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  .contact-form{
    width: 50%;
    padding: 20px;
    background-color: white;
    border-radius: 18px;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
    .form-title{
      font-size: 3.5rem;
      font-weight: 500;
      text-align: center;
    }
    form{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-areas: 
      "first last"
      "email email"
      "message message"
      ".. button"
      ;
      .form-group{
        display: flex;
        flex-direction: column;
        background: #F2F0F0;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
        user-select: none;
        input{
          border: none;
          background: none;
        }
        label{
          user-select: none;
        }
      }
      .input-first{
        grid-area: first;
      }
      .input-last{
        grid-area: last;
      }
      .input-email{
        grid-area: email;
      }
      .input-message{
        grid-area: message;
        textarea{
          height: 200px;
          border: none;
          background: none;
        }
      }
      .btn-submit{
        grid-area: button;
        justify-self: end;
        margin: 10px 10px;
        user-select: none;
      }
    }
  }
}

.container-footer{
  background-color: #04080F;
  display: flex;
  flex-direction: column;
  color: white;
  .footer-infocontact{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    text-align: center;
    padding: 5% 0;
  }
  .footer-copy{
    text-align: center;
    font-weight: 200;
    color: #8C8484;
    padding: 1% 0;
  }
}



/* Responsive */

@media screen and (max-width: 1094px) {
  .btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 0.5em;
    border-radius: 5px;
    letter-spacing: 0.9px;
    transition: 0.2s ease-out;
    text-transform: uppercase;
  }
  /* Navbar Styles */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 20px;
    background-color: #fff;
  }

  /* Logo Styles */
  .logo img {
    height: 60px;
    /* Adjust this value as needed */
  }
  /* Home Styles */
  .container-home {
    height: 80vh;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    align-content: center;
    gap: 20px;
    margin: 0 10%;
    .home-title {
      .title {
        font-size: 2.3em;
        font-weight: 800;
      }

      .description {
        width: 80%;
        font-size: 1.2em;
        padding: 15px 0;
        font-weight: 300;
      }
    }

    .home-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;

      .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 340px;
        border-radius: 8px;
        color: white;
        box-shadow: 10px 10px 0px 0px var(--color-secondary);
        padding: 15px 20px;
        transition: 0.2s ease-out;
        .card-ubication {
          display: grid;
          grid-template-columns: 7% 93%;
          gap: 5px;
        }
        .card-name {
          font-size: 40px;
          font-weight: 500;
        }
        .card-line {
          width: 100%;
          height: 1px;
          margin-bottom: 10px;
          background: #fff;
          border-radius: 10px;
          transition: all 0.3s;
        }
      }
      .card-one {
        background: url("../img/foto_1.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-two {
        background: url("../img/foto_2.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-one:hover {
        background: url("../img/foto_1_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
      .card-two:hover {
        background: url("../img/foto_2_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
    }
  }

  /* Gemba Styles */
  .container-gemba {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 10%;
    .gemba-img {
      display: flex;
      align-items: center;
      justify-content: center;
      .gemba-galery {
        width: 300px;
        height: 300px;
        display: grid;
        align-self: center;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "one two"
          "three three";
        gap: 10px;
        .gemba-one {
          grid-area: one;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 150px;
          background-color: #c8142c35;
          border-radius: 8px;
          img {
            width: 70%;
          }
        }
        .gemba-two {
          grid-area: two;
          width: 150px;
          height: 150px;
          background: url("../img/photo_code_two.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
        .gemba-three {
          grid-area: three;
          width: 310px;
          height: 150px;
          background: url("../img/photo_code_one.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
      }
    }
    .gemba-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 5%;
      font-size: 20px;
      color: #7e7e7e;
      .gemba-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* Realtime Styles */
  .container-realtime {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .realtime-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80%;
      background: url("../img/bg_realtime.png") no-repeat;
      background-size: cover;
      background-position: center;
      .text {
        color: white;
        font-size: 2.3rem;
        font-weight: 300;
        text-align: center;
        padding: 0 9%;
      }
      .btn {
        margin-top: 20px;
      }
    }
  }

  /* AI Styles */
  .container-ai {
    width: 100%;
    height: 100vh;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 5% 10%;
    .ai-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 3rem;
      font-weight: 500;
      margin-bottom: 2%;
    }
    .ai-galery {
      width: 60%;
      padding: 5% 5% 5% 8%;
      display: grid;
      align-self: center;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
        ". copilop ."
        "aws azur gcp"
        ". codium .";
      gap: 10px;
      .ai-copilop {
        grid-area: copilop;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-aws {
        grid-area: aws;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-azure {
        grid-area: azur;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-gcp {
        grid-area: gcp;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-codium {
        grid-area: codium;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
    }
    .ai-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 40%;
      grid-area: info;
      font-size: 20px;
      font-weight: 300;
      .ai-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* en tramite */

  .container-companies {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
    padding: 0 10%;
    .companies-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 7%;
      .companies-title {
        font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.3rem);
        font-weight: 500;
      }
      .companies-text {
        ul li {
          list-style: url("../img/check-circle.svg");
          line-height: 1.3rem;
          margin: 15px 25px;
          font-size: 14px;
          font-weight: 400;
          color: #7e7e7e;
        }
      }
    }
    .companies-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .companies-galery {
          display: flex;
          align-items: center;
          justify-content: center;
          width: clamp(50%, 10vw + 100%, 100%);
        height: auto; /* Para mantener la proporción de la imagen */
        img {
          
          width: clamp(200px, 100%, 100%);
        }
      }
    }
  }
  
  .container-choose {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 5% 12%;
    .choose-title {
      width: 100%;
      text-align: center;
      font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.5rem);
      font-weight: 500;
    }
    .choose-items{
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    }
    .choose-6 {
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 60%;
      }
    }
    .card-choose {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 10px;
      height: 150px;
      border: solid 1px #b2b2b2;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 15px 15px 0px 0px var(--color-secondary);
      .card-icon {
        color: #e58b8b7d;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        border: solid 3px #e58b8b7d;
      }
      .card-title {
        width: 80%;
        font-size: 18px;
        color: #414141;
      }
      .card-info {
        font-size: 15px;
        font-weight: 300;
        color: #414141;
      }
    }
  }
  
  .container-benefits{
      height: 100vh;
      background: url("../img/bgbenefits.png") no-repeat;
      background-size: cover;
      background-position: center;
      display: grid;
      color: white;
      align-self: center;
      align-content: center;
      gap: 30px;
      grid-template-columns: 1fr;
      grid-template-areas:
      "title"
      "items";
      .benefits-title{
          grid-area: title;
          text-align: center;
          justify-items: center;
          font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.8rem);
          font-weight: 500;
      }
      .benefits-items{
          grid-area: items;
          padding: 0 4%;
          display: grid;
          gap: 10px;
          /* grid-template-columns: repeat(4, 1fr); */
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          .item{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-items: center;
              margin: 0 15px;
              .item-icon{
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  background-color: white;
                  margin-bottom: 15px;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
              }
              .item-title{
                  text-align: center;
                  margin-bottom: 15px;
                  font-size: 1rem;
                  font-weight: 500;
              }
              .item-info{
                  text-align: center;
                  font-size: 1rem;
                  font-weight: 300;
              }
          }
      }
  }
  
  .container-services{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      .carousel{
        width: 100%;
        text-align: center;
      }
      .services-title{
        font-size: 2.8rem;
        text-align: center;
        font-weight: 500;
      }
      .services-subtitle{
        font-size: 2rem;
        text-align: center;
        font-weight: 500;
        color: #3A4C59;
        margin: 20px 0;
      }
      .services-carusel{
        .carousel-container {
          width: 95%;
          margin: auto;
        }
        .carousel{
            height: 300px;
        }
        .carousel-item{
          margin: 10px;
        }
        .carousel-item img {
            width: 100%;
            filter: grayscale(100%);
            transition: filter 1s ease;
        }
        .carousel-item.slick-center img {
            filter: none;
            scale: 1.2;
            z-index: 1;
        }
        .slick-prev, .slick-next {
            width: 20px;
            height: 20px;
            background-color: #000000;
            color: black;
            /* border: none; */
            border-radius: 50%;
            z-index: 1;
        }
        .title {
            color: black;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
      }
  }
  
  .container-get-started{
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .get-started-text{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 75%;
          padding: 0 5%;
          background: url("../img/bg_get.png") no-repeat;
          background-size: cover;
          background-position: center;
          .get-started-title{
            font-size: 2.3rem;
            font-weight: 500;
            color: var(--color-primary);
          }
          .get-started-info{
            font-size: 2.3rem;
            font-weight: 300;
            color: white;
            text-align: center;
            margin-top: 20px;
          }
          .btn {
              margin-top: 20px;
            }
      }
      
  }
  
  .container-questions{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(400px,1fr));
      height: 100vh;
      background-color: white;
      margin: 0 5%;
      .questions-title{
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
      }
      .question-title-h1 {
          width: 100%;
          max-width: 800px;
          display: flex;
          justify-content: start;
          align-items: center;
        }
        
        .title-bg {
          width: 45%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;
        }
        
        .title-text {
          position: absolute;
          font-size: 3.1rem;
          mix-blend-mode: difference;
          color: white; /* Color blanco por defecto para el mix-blend-mode */
          text-align: start;
          padding-left: 65px;
        }
  
        .questions{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .contenedor-acordeon {
            width: 100%;
        }
        
        .acordeon {
            background: #fff;
            position: relative;
        }
        
        .acordeon label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 10px;
            padding: 10px;
            font-size: 1rem;
            background: #D9D9D9;
            color: #667179;
            cursor: pointer;
            margin-bottom: 2px;
            transition: all 300ms ease;
            position: relative;
            user-select: none;
            p{
              width: 90%;
            }
        }
        
        .acordeon .bg-arrow{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color:#171F25;
          border-radius: 50%;
          margin-left: 10px;
        }
        
        .acordeon .arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 10px;
            /* border-right: 2px solid #000000;
            border-bottom: 2px solid #000000; */
            transform: rotate(180deg);
            transition: transform 500ms ease;
        }
        
        .acordeon .contenido-acordeon {
            padding: 0px;
            margin: 0px 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 300ms ease;
        }
        
        .btn-acordeon:checked ~ label .arrow {
            transform: rotate(360deg);
        }
        
        .btn-acordeon:checked ~ .contenido-acordeon {
            max-height: 600px;
            padding: 15px 0px;
        }
        
        .btn-acordeon {
            display: none;
        }
        }
      
  }
  
  .container-contact{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    .contact-form{
      width: 50%;
      padding: 15px;
      background-color: white;
      border-radius: 18px;
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
      .form-title{
        font-size: 2.8rem;
        font-weight: 500;
        text-align: center;
      }
      form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "first last"
        "email email"
        "message message"
        ".. button"
        ;
        .form-group{
          display: flex;
          flex-direction: column;
          background: #F2F0F0;
          padding: 5px;
          margin: 5px;
          border-radius: 5px;
          user-select: none;
          input{
            border: none;
            background: none;
          }
          label{
            user-select: none;
          }
        }
        .input-first{
          grid-area: first;
        }
        .input-last{
          grid-area: last;
        }
        .input-email{
          grid-area: email;
        }
        .input-message{
          grid-area: message;
          textarea{
            height: 150px;
            border: none;
            background: none;
          }
        }
        .btn-submit{
          grid-area: button;
          justify-self: end;
          margin: 10px 10px;
          user-select: none;
        }
      }
    }
  }
  
  .container-footer{
    background-color: #04080F;
    display: flex;
    flex-direction: column;
    color: white;
    .footer-infocontact{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      text-align: center;
      padding: 5% 0;
    }
    .footer-copy{
      text-align: center;
      font-weight: 200;
      color: #8C8484;
      padding: 1% 0;
    }
  }

}

@media screen and (max-width: 920px){
  /* Home Styles */
/* Home Styles */
.container-home {
  height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-content: center;
  gap: 20px;
  margin: 0 10%;
  .home-title {
    .title {
      font-size: 2.3em;
      font-weight: 800;
    }

    .description {
      width: 80%;
      font-size: 1.2em;
      padding: 15px 0;
      font-weight: 300;
    }
  }

  .home-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;

    .card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: auto;
      height: 300px;
      border-radius: 8px;
      color: white;
      box-shadow: 10px 10px 0px 0px var(--color-secondary);
      padding: 15px 20px;
      transition: 0.2s ease-out;
      .card-ubication {
        display: grid;
        font-size: 0.8rem;
        grid-template-columns: 7% 93%;
        gap: 10px;
      }
      .card-name {
        font-size: 30px;
        font-weight: 500;
      }
      .card-line {
        width: 100%;
        height: 1px;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 10px;
        transition: all 0.3s;
      }
      .card-type{
        font-size: 0.7rem;
      }
    }
    .card-one {
      background: url("../img/foto_1.png") no-repeat;
      background-size: cover;
      background-position: center;
    }
    .card-two {
      background: url("../img/foto_2.png") no-repeat;
      background-size: cover;
      background-position: center;
    }
    .card-one:hover {
      background: url("../img/foto_1_color.png") no-repeat;
      background-size: cover;
      background-position: center;
      scale: 1.05;
    }
    .card-two:hover {
      background: url("../img/foto_2_color.png") no-repeat;
      background-size: cover;
      background-position: center;
      scale: 1.05;
    }
  }
}

}


@media screen and (max-width: 875px) {
  .btn {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 0.5em;
    border-radius: 5px;
    letter-spacing: 0.9px;
    transition: 0.2s ease-out;
    text-transform: uppercase;
  }
  /* Navbar Styles */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 20px;
    background-color: #fff;
  }

  /* Logo Styles */
  .logo img {
    height: 60px;
    /* Adjust this value as needed */
  }
  /* Home Styles */
  .container-home {
    height: 80vh;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    align-content: center;
    gap: 20px;
    margin: 0 10%;
    .home-title {
      .title {
        font-size: 2.3em;
        font-weight: 800;
      }

      .description {
        width: 80%;
        font-size: 1.2em;
        padding: 15px 0;
        font-weight: 300;
      }
    }

    .home-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;

      .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 300px;
        border-radius: 8px;
        color: white;
        box-shadow: 10px 10px 0px 0px var(--color-secondary);
        padding: 15px 20px;
        transition: 0.2s ease-out;
        .card-ubication {
          display: grid;
          font-size: 0.8rem;
          grid-template-columns: 7% 93%;
          gap: 10px;
        }
        .card-name {
          font-size: 30px;
          font-weight: 500;
        }
        .card-line {
          width: 100%;
          height: 1px;
          margin-bottom: 10px;
          background: #fff;
          border-radius: 10px;
          transition: all 0.3s;
        }
        .card-type{
          font-size: 0.7rem;
        }
      }
      .card-one {
        background: url("../img/foto_1.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-two {
        background: url("../img/foto_2.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-one:hover {
        background: url("../img/foto_1_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
      .card-two:hover {
        background: url("../img/foto_2_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
    }
  }

  /* Gemba Styles */
  .container-gemba {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 0 10%;
    .gemba-img {
      display: flex;
      align-items: center;
      justify-content: center;
      .gemba-galery {
        width: 300px;
        height: 300px;
        display: grid;
        align-self: center;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "one two"
          "three three";
        gap: 10px;
        .gemba-one {
          grid-area: one;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 150px;
          background-color: #c8142c35;
          border-radius: 8px;
          img {
            width: 70%;
          }
        }
        .gemba-two {
          grid-area: two;
          width: 150px;
          height: 150px;
          background: url("../img/photo_code_two.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
        .gemba-three {
          grid-area: three;
          width: 310px;
          height: 150px;
          background: url("../img/photo_code_one.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
      }
    }
    .gemba-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 5%;
      font-size: 20px;
      color: #7e7e7e;
      .gemba-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* Realtime Styles */
.container-realtime {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .realtime-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80%;
      background: url("../img/bg_realtime.png") no-repeat;
      background-size: cover;
      background-position: center;
      .text {
        color: white;
        font-size: 2.3rem;
        font-weight: 300;
        text-align: center;
        padding: 0 9%;
      }
      .btn {
        margin-top: 20px;
      }
    }
  }

  /* AI Styles */
  .container-ai {
    width: 100%;
    height: 100vh;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0% 10%;
    .ai-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 2.5rem;
      font-weight: 500;
      margin-bottom: 2%;
    }
    .ai-galery {
      width: 50%;
      padding: 5% 5% 5% 8%;
      display: grid;
      align-self: start;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
        ". copilop ."
        "aws azur gcp"
        ". codium .";
      gap: 10px;
      .ai-copilop {
        grid-area: copilop;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-aws {
        grid-area: aws;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-azure {
        grid-area: azur;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-gcp {
        grid-area: gcp;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-codium {
        grid-area: codium;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
    }
    .ai-info {
      display: grid;
      align-self: start;
      grid-template-columns: 1fr;
      width: 50%;
      grid-area: info;
      font-size: 20px;
      font-weight: 300;
      .ai-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* en tramite */

  .container-companies {
    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  }
  
  .container-choose {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 5% 12%;
    .choose-title {
      width: 100%;
      text-align: center;
      font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.5rem);
      font-weight: 500;
    }
    .choose-items{
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    }
    .choose-6 {
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 60%;
      }
    }
    .card-choose {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 10px;
      height: 150px;
      border: solid 1px #b2b2b2;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 15px 15px 0px 0px var(--color-secondary);
      .card-icon {
        color: #e58b8b7d;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        border: solid 3px #e58b8b7d;
      }
      .card-title {
        width: 80%;
        font-size: 18px;
        color: #414141;
      }
      .card-info {
        font-size: 15px;
        font-weight: 300;
        color: #414141;
      }
    }
  }
  
  .container-benefits{
      height: 100vh;
      background: url("../img/bgbenefits.png") no-repeat;
      background-size: cover;
      background-position: center;
      display: grid;
      color: white;
      align-self: center;
      align-content: center;
      gap: 30px;
      grid-template-columns: 1fr;
      grid-template-areas:
      "title"
      "items";
      .benefits-title{
          grid-area: title;
          text-align: center;
          justify-items: center;
          font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.8rem);
          font-weight: 500;
      }
      .benefits-items{
          grid-area: items;
          padding: 0 4%;
          display: grid;
          gap: 10px;
          /* grid-template-columns: repeat(4, 1fr); */
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          .item{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-items: center;
              margin: 0 15px;
              .item-icon{
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  background-color: white;
                  margin-bottom: 15px;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
              }
              .item-title{
                  text-align: center;
                  margin-bottom: 15px;
                  font-size: 1rem;
                  font-weight: 500;
              }
              .item-info{
                  text-align: center;
                  font-size: 1rem;
                  font-weight: 300;
              }
          }
      }
  }
  
  .container-services{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      .carousel{
        width: 100%;
        text-align: center;
      }
      .services-title{
        font-size: 2.8rem;
        text-align: center;
        font-weight: 500;
      }
      .services-subtitle{
        font-size: 2rem;
        text-align: center;
        font-weight: 500;
        color: #3A4C59;
        margin: 20px 0;
      }
      .services-carusel{
        .carousel-container {
          width: 95%;
          margin: auto;
        }
        .carousel{
            height: auto;
        }
        .carousel-item{
          margin: 10px;
        }
        .carousel-item img {
            width: 100%;
            filter: grayscale(100%);
            transition: filter 1s ease;
        }
        .carousel-item.slick-center img {
            filter: none;
            scale: 1.2;
            z-index: 1;
        }
        .slick-prev, .slick-next {
            width: 20px;
            height: 20px;
            background-color: #000000;
            color: black;
            /* border: none; */
            border-radius: 50%;
            z-index: 1;
        }
        .title {
            color: black;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
      }
  }
  
  .container-get-started{
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .get-started-text{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 75%;
          padding: 0 5%;
          background: url("../img/bg_get.png") no-repeat;
          background-size: cover;
          background-position: center;
          .get-started-title{
            font-size: 2.3rem;
            font-weight: 500;
            color: var(--color-primary);
          }
          .get-started-info{
            font-size: 2.3rem;
            font-weight: 300;
            color: white;
            text-align: center;
            margin-top: 20px;
          }
          .btn {
              margin-top: 20px;
            }
      }
      
  }
  
  .container-questions{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
      height: 100vh;
      background-color: white;
      margin: 0 5%;
      .questions-title{
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
      }
      .question-title-h1 {
          width: 100%;
          max-width: 800px;
          display: flex;
          justify-content: start;
          align-items: center;
        }
        
        .title-bg {
          width: 50%;
          height: 90%;
          object-fit: cover;
          border-radius: 10px;
        }
        
        .title-text {
          position: absolute;
          font-size: 2.2rem;
          mix-blend-mode: difference;
          color: white; /* Color blanco por defecto para el mix-blend-mode */
          text-align: start;
          padding-left: 65px;
        }
  
        .questions{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .contenedor-acordeon {
            width: 100%;
        }
        
        .acordeon {
            background: #fff;
            position: relative;
        }
        
        .acordeon label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 10px;
            padding: 10px;
            font-size: 0.8rem;
            background: #D9D9D9;
            color: #667179;
            cursor: pointer;
            margin-bottom: 2px;
            transition: all 300ms ease;
            position: relative;
            user-select: none;
            p{
              width: 90%;
            }
        }
        
        .acordeon .bg-arrow{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color:#171F25;
          border-radius: 50%;
          margin-left: 10px;
        }
        
        .acordeon .arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 10px;
            /* border-right: 2px solid #000000;
            border-bottom: 2px solid #000000; */
            transform: rotate(180deg);
            transition: transform 500ms ease;
        }
        
        .acordeon .contenido-acordeon {
            padding: 0px;
            margin: 0px 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 300ms ease;
        }
        
        .btn-acordeon:checked ~ label .arrow {
            transform: rotate(360deg);
        }
        
        .btn-acordeon:checked ~ .contenido-acordeon {
            max-height: 600px;
            padding: 15px 0px;
        }
        
        .btn-acordeon {
            display: none;
        }
        }
      
  }
  
  .container-contact{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    .contact-form{
      width: 50%;
      padding: 15px;
      background-color: white;
      border-radius: 18px;
      box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
      .form-title{
        font-size: 2.8rem;
        font-weight: 500;
        text-align: center;
      }
      form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
        "first last"
        "email email"
        "message message"
        ".. button"
        ;
        .form-group{
          display: flex;
          flex-direction: column;
          background: #F2F0F0;
          padding: 5px;
          margin: 5px;
          border-radius: 5px;
          user-select: none;
          input{
            border: none;
            background: none;
          }
          label{
            user-select: none;
          }
        }
        .input-first{
          grid-area: first;
        }
        .input-last{
          grid-area: last;
        }
        .input-email{
          grid-area: email;
        }
        .input-message{
          grid-area: message;
          textarea{
            height: 150px;
            border: none;
            background: none;
          }
        }
        .btn-submit{
          grid-area: button;
          justify-self: end;
          margin: 10px 10px;
          user-select: none;
        }
      }
    }
  }
  
  .container-footer{
    background-color: #04080F;
    display: flex;
    flex-direction: column;
    color: white;
    .footer-infocontact{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      text-align: center;
      padding: 5% 0;
    }
    .footer-copy{
      text-align: center;
      font-weight: 200;
      color: #8C8484;
      padding: 1% 0;
    }
  }

}

@media screen and (max-width: 798px){
  .container-contact {
    .contact-form {
      form{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "first" 
        "last"
        "email"
        "message"
        "button"
        ;
      }
    }
  }
  .container-contact{
    height: 100vh;
  }
}

@media screen and (max-width: 750px) {

  /* Home Styles */
  .container-home {
    height: 80vh;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    margin: 0 10%;
    .home-title {
      .title {
        font-size: 2.3em;
        font-weight: 800;
      }

      .description {
        width: 80%;
        font-size: 1.2em;
        padding: 15px 0;
        font-weight: 300;
      }
    }

    .home-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;

      .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 300px;
        border-radius: 8px;
        color: white;
        box-shadow: 10px 10px 0px 0px var(--color-secondary);
        padding: 15px 20px;
        transition: 0.2s ease-out;
        .card-ubication {
          display: grid;
          font-size: 0.8rem;
          grid-template-columns: 7% 93%;
          gap: 10px;
        }
        .card-name {
          font-size: 30px;
          font-weight: 500;
        }
        .card-line {
          width: 100%;
          height: 1px;
          margin-bottom: 10px;
          background: #fff;
          border-radius: 10px;
          transition: all 0.3s;
        }
        .card-type{
          font-size: 0.7rem;
        }
      }
      .card-one {
        background: url("../img/foto_1.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-two {
        background: url("../img/foto_2.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-one:hover {
        background: url("../img/foto_1_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
      .card-two:hover {
        background: url("../img/foto_2_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
    }
  }

  /* Gemba Styles */
  .container-gemba {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "text" 
                          "img";
    gap: 20px;
    margin: 0 10%;
    .gemba-img {
      grid-area: img;
      display: flex;
      align-items: center;
      justify-content: center;
      .gemba-galery {
        width: 300px;
        height: 300px;
        display: grid;
        align-self: center;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "one two"
          "three three";
        gap: 10px;
        .gemba-one {
          grid-area: one;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 150px;
          height: 150px;
          background-color: #c8142c35;
          border-radius: 8px;
          img {
            width: 70%;
          }
        }
        .gemba-two {
          grid-area: two;
          width: 150px;
          height: 150px;
          background: url("../img/photo_code_two.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
        .gemba-three {
          grid-area: three;
          width: 310px;
          height: 150px;
          background: url("../img/photo_code_one.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
      }
    }
    .gemba-info {
      grid-area: text;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 5%;
      font-size: 20px;
      color: #7e7e7e;
      .gemba-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* en tramite */
  .container-companies {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    padding: 0 10%;
    .companies-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 7%;
      .companies-title {
        font-size: 1.7rem;
        font-weight: 500;
      }
      .companies-text {
        ul li {
          list-style: url("../img/check-circle.svg");
          line-height: 1rem;
          margin: 15px 25px;
          font-size: 0.8rem;
          font-weight: 400;
          color: #7e7e7e;
        }
      }
    }
    .companies-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .companies-galery {
          display: flex;
          align-items: center;
          justify-content: center;
          width: clamp(50%, 10vw + 100%, 100%);
        height: auto; /* Para mantener la proporción de la imagen */
        img {
          
          width: clamp(200px, 100%, 100%);
        }
      }
    }
  }
  
  .container-choose {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 5% 12%;
    .choose-title {
      width: 100%;
      text-align: center;
      font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.5rem);
      font-weight: 500;
    }
    .choose-items{
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    }
    .choose-6 {
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 60%;
      }
    }
    .card-choose {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 10px;
      height: 150px;
      border: solid 1px #b2b2b2;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 15px 15px 0px 0px var(--color-secondary);
      .card-icon {
        color: #e58b8b7d;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        border: solid 3px #e58b8b7d;
      }
      .card-title {
        width: 80%;
        font-size: 18px;
        color: #414141;
      }
      .card-info {
        font-size: 15px;
        font-weight: 300;
        color: #414141;
      }
    }
  }
  
  .container-benefits{
      height: 100vh;
      background: url("../img/bgbenefits.png") no-repeat;
      background-size: cover;
      background-position: center;
      display: grid;
      color: white;
      align-self: center;
      align-content: center;
      gap: 30px;
      grid-template-columns: 1fr;
      grid-template-areas:
      "title"
      "items";
      .benefits-title{
          grid-area: title;
          text-align: center;
          justify-items: center;
          font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.8rem);
          font-weight: 500;
      }
      .benefits-items{
          grid-area: items;
          padding: 0 4%;
          display: grid;
          gap: 10px;
          /* grid-template-columns: repeat(4, 1fr); */
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          .item{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-items: center;
              margin: 0 15px;
              .item-icon{
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  background-color: white;
                  margin-bottom: 15px;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
              }
              .item-title{
                  text-align: center;
                  margin-bottom: 15px;
                  font-size: 1rem;
                  font-weight: 500;
              }
              .item-info{
                  text-align: center;
                  font-size: 1rem;
                  font-weight: 300;
              }
          }
      }
  }
  
  .container-services{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      .carousel{
        width: 100%;
        text-align: center;
      }
      .services-title{
        font-size: 2.8rem;
        text-align: center;
        font-weight: 500;
      }
      .services-subtitle{
        font-size: 2rem;
        text-align: center;
        font-weight: 500;
        color: #3A4C59;
        margin: 20px 0;
      }
      .services-carusel{
        .carousel-container {
          width: 100%;
          margin: auto;
        }
        .carousel{
            height: auto;
        }
        .carousel-item{
          margin: 10px;
        }
        .carousel-item img {
            width: 100%;
            filter: grayscale(100%);
            transition: filter 1s ease;
        }
        .carousel-item.slick-center img {
            filter: none;
            scale: 1.2;
            z-index: 1;
        }
        .slick-prev, .slick-next {
            width: 20px;
            height: 20px;
            background-color: #000000;
            color: black;
            /* border: none; */
            border-radius: 50%;
            z-index: 1;
        }
        .title {
            color: black;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
      }
  }
  
  .container-get-started{
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
      .get-started-text{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 75%;
          padding: 0 5%;
          background: url("../img/bg_get.png") no-repeat;
          background-size: cover;
          background-position: center;
          .get-started-title{
            font-size: 2.3rem;
            font-weight: 500;
            color: var(--color-primary);
          }
          .get-started-info{
            font-size: 2.3rem;
            font-weight: 300;
            color: white;
            text-align: center;
            margin-top: 20px;
          }
          .btn {
              margin-top: 20px;
            }
      }
      
  }
  
  .container-questions{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
      height: 100vh;
      background-color: white;
      margin: 0 5%;
      .questions-title{
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
      }
      .question-title-h1 {
          width: 100%;
          max-width: 800px;
          display: flex;
          justify-content: start;
          align-items: center;
        }
        
        .title-bg {
          width: 50%;
          height: 90%;
          object-fit: cover;
          border-radius: 10px;
        }
        
        .title-text {
          position: absolute;
          font-size: 2rem;
          mix-blend-mode: difference;
          color: white; /* Color blanco por defecto para el mix-blend-mode */
          text-align: start;
          padding-left: 65px;
        }
  
        .questions{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .contenedor-acordeon {
            width: 100%;
        }
        
        .acordeon {
            background: #fff;
            position: relative;
        }
        
        .acordeon label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 10px;
            padding: 10px;
            font-size: 0.8rem;
            background: #D9D9D9;
            color: #667179;
            cursor: pointer;
            margin-bottom: 2px;
            transition: all 300ms ease;
            position: relative;
            user-select: none;
            p{
              width: 90%;
            }
        }
        
        .acordeon .bg-arrow{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color:#171F25;
          border-radius: 50%;
          margin-left: 10px;
        }
        
        .acordeon .arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 10px;
            transform: rotate(180deg);
            transition: transform 500ms ease;
        }
        
        .acordeon .contenido-acordeon {
            padding: 0px;
            margin: 0px 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 300ms ease;
        }
        
        .btn-acordeon:checked ~ label .arrow {
            transform: rotate(360deg);
        }
        
        .btn-acordeon:checked ~ .contenido-acordeon {
            max-height: 600px;
            padding: 15px 0px;
        }
        
        .btn-acordeon {
            display: none;
        }
        }
      
  }
  
  .container-footer{
    background-color: #04080F;
    display: flex;
    flex-direction: column;
    color: white;
    .footer-infocontact{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      text-align: center;
      padding: 5% 0;
    }
    .footer-copy{
      text-align: center;
      font-weight: 200;
      color: #8C8484;
      padding: 1% 0;
    }
  }

}

@media screen and (max-width: 668px){
  
  /* Home Styles */
  .container-home {
    height: 80vh;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    margin: 0 5%;
    .home-title {
      .title {
        font-size: 2rem;
        font-weight: 800;
      }

      .description {
        width: 80%;
        font-size: 1.2em;
        padding: 10px 0;
        font-weight: 300;
      }
    }

    .home-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;

      .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 300px;
        border-radius: 8px;
        color: white;
        box-shadow: 10px 10px 0px 0px var(--color-secondary);
        padding: 15px 20px;
        transition: 0.2s ease-out;
        .card-ubication {
          display: grid;
          font-size: 0.8rem;
          grid-template-columns: 7% 93%;
          gap: 10px;
        }
        .card-name {
          font-size: 30px;
          font-weight: 500;
        }
        .card-line {
          width: 100%;
          height: 1px;
          margin-bottom: 10px;
          background: #fff;
          border-radius: 10px;
          transition: all 0.3s;
        }
        .card-type{
          font-size: 0.7rem;
        }
      }
      .card-one {
        background: url("../img/foto_1.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-two {
        background: url("../img/foto_2.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-one:hover {
        background: url("../img/foto_1_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
      .card-two:hover {
        background: url("../img/foto_2_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
    }
  }

  /* Gemba Styles */
  .container-gemba {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "text" 
                          "img";
    gap: 20px;
    margin: 0 10%;
    .gemba-img {
      grid-area: img;
      display: flex;
      align-items: center;
      justify-content: center;
      .gemba-galery {
        width: 300px;
        height: 300px;
        display: grid;
        align-self: center;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "one two"
          "three three";
        gap: 5px;
        .gemba-one {
          grid-area: one;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 145px;
          height: 150px;
          background-color: #c8142c35;
          border-radius: 8px;
          img {
            width: 70%;
          }
        }
        .gemba-two {
          grid-area: two;
          width: 150px;
          height: 150px;
          background: url("../img/photo_code_two.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
        .gemba-three {
          grid-area: three;
          width: 300px;
          height: 150px;
          background: url("../img/photo_code_one.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
      }
    }
    .gemba-info {
      grid-area: text;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 5%;
      font-size: 20px;
      color: #7e7e7e;
      .gemba-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

   /* AI Styles */
   .container-ai {
    width: 100%;
    height: 100vh;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0% 10%;
    .ai-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 2.5rem;
      font-weight: 500;
      margin-bottom: 2%;
    }
    .ai-galery {
      width: 100%;
      padding: 5% 5% 5% 8%;
      display: grid;
      align-self: start;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
        ". copilop ."
        "aws azur gcp"
        ". codium .";
      gap: 10px;
      .ai-copilop {
        grid-area: copilop;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-aws {
        grid-area: aws;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-azure {
        grid-area: azur;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-gcp {
        grid-area: gcp;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-codium {
        grid-area: codium;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
    }
    .ai-info {
      display: grid;
      align-self: start;
      grid-template-columns: 1fr;
      width: 100%;
      grid-area: info;
      font-size: 20px;
      font-weight: 300;
      .ai-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* en tramite */
  .container-companies {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    padding: 0 10%;
    .companies-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 0%;
      .companies-title {
        font-size: 1.7rem;
        font-weight: 500;
      }
      .companies-text {
        ul li {
          list-style: url("../img/check-circle.svg");
          line-height: 1rem;
          margin: 15px 15px;
          font-size: 0.8rem;
          font-weight: 400;
          color: #7e7e7e;
        }
      }
    }
    .companies-img {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .companies-galery {
          display: flex;
          justify-content: center;
          width: clamp(50%, 10vw + 100%, 100%);
        height: auto; /* Para mantener la proporción de la imagen */
        img {
          
          width: clamp(200px, 100%, 70%);
        }
      }
    }
  }
  
  .container-choose {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 5% 12%;
    .choose-title {
      width: 100%;
      text-align: center;
      font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.5rem);
      font-weight: 500;
    }
    .choose-items{
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    }
    .choose-6 {
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 60%;
      }
    }
    .card-choose {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 10px;
      height: 150px;
      border: solid 1px #b2b2b2;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 15px 15px 0px 0px var(--color-secondary);
      .card-icon {
        color: #e58b8b7d;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        border: solid 3px #e58b8b7d;
      }
      .card-title {
        width: 80%;
        font-size: 18px;
        color: #414141;
      }
      .card-info {
        font-size: 15px;
        font-weight: 300;
        color: #414141;
      }
    }
  }
  
  .container-benefits{
      height: 100vh;
      background: url("../img/bgbenefits.png") no-repeat;
      background-size: cover;
      background-position: center;
      display: grid;
      color: white;
      align-self: center;
      align-content: center;
      gap: 30px;
      grid-template-columns: 1fr;
      grid-template-areas:
      "title"
      "items";
      .benefits-title{
          grid-area: title;
          text-align: center;
          justify-items: center;
          font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.8rem);
          font-weight: 500;
      }
      .benefits-items{
          grid-area: items;
          padding: 0 4%;
          display: grid;
          gap: 10px;
          /* grid-template-columns: repeat(4, 1fr); */
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          .item{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-items: center;
              margin: 0 15px;
              .item-icon{
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  background-color: white;
                  margin-bottom: 15px;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
              }
              .item-title{
                  text-align: center;
                  margin-bottom: 15px;
                  font-size: 1rem;
                  font-weight: 500;
              }
              .item-info{
                  text-align: center;
                  font-size: 1rem;
                  font-weight: 300;
              }
          }
      }
  }
  
  .container-services{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      .carousel{
        width: 100%;
        text-align: center;
      }
      .services-title{
        font-size: 2.8rem;
        text-align: center;
        font-weight: 500;
      }
      .services-subtitle{
        font-size: 2rem;
        text-align: center;
        font-weight: 500;
        color: #3A4C59;
        margin: 20px 0;
      }
      .services-carusel{
        .carousel-container {
          width: 95%;
          margin: auto;
        }
        .carousel{
            height: auto;
        }
        .carousel-item{
          margin: 10px;
        }
        .carousel-item img {
            width: 100%;
            filter: grayscale(100%);
            transition: filter 1s ease;
        }
        .carousel-item.slick-center img {
            filter: none;
            scale: 1.2;
            z-index: 1;
        }
        .slick-prev, .slick-next {
            width: 20px;
            height: 20px;
            background-color: #000000;
            color: black;
            /* border: none; */
            border-radius: 50%;
            z-index: 1;
        }
        .title {
            color: black;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
      }
  }
  
  .container-get-started{
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      
      .get-started-text{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          padding: 0 5%;
          background: url("../img/bg_get.png") no-repeat;
          background-size: cover;
          background-position: center;
          .get-started-title{
            font-size: 2.3rem;
            font-weight: 500;
            color: var(--color-primary);
          }
          .get-started-info{
            font-size: 2.3rem;
            font-weight: 300;
            color: white;
            text-align: center;
            margin-top: 20px;
          }
          .btn {
              margin-top: 20px;
            }
      }
      
  }
  
  .container-questions{
      display: grid;
      height: 100vh;
      background-color: white;
      margin: 0 5%;
      .questions-title{
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
      }
      .question-title-h1 {
          width: 100%;
          max-width: 800px;
          display: flex;
          justify-content: start;
          align-items: center;
        }
        
        .title-bg {
          width: 50%;
          object-fit: cover;
          border-radius: 10px;
        }
        
        .title-text {
          position: absolute;
          font-size: 2rem;
          mix-blend-mode: difference;
          color: white; /* Color blanco por defecto para el mix-blend-mode */
          text-align: start;
          padding-left: 65px;
        }
  
        .questions{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .contenedor-acordeon {
            width: 100%;
        }
        
        .acordeon {
            background: #fff;
            position: relative;
        }
        
        .acordeon label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 10px;
            padding: 10px;
            font-size: 0.8rem;
            background: #D9D9D9;
            color: #667179;
            cursor: pointer;
            margin-bottom: 2px;
            transition: all 300ms ease;
            position: relative;
            user-select: none;
            p{
              width: 90%;
            }
        }
        
        .acordeon .bg-arrow{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color:#171F25;
          border-radius: 50%;
          margin-left: 10px;
        }
        
        .acordeon .arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 10px;
            transform: rotate(180deg);
            transition: transform 500ms ease;
        }
        
        .acordeon .contenido-acordeon {
            padding: 0px;
            margin: 0px 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 300ms ease;
        }
        
        .btn-acordeon:checked ~ label .arrow {
            transform: rotate(360deg);
        }
        
        .btn-acordeon:checked ~ .contenido-acordeon {
            max-height: 600px;
            padding: 15px 0px;
        }
        
        .btn-acordeon {
            display: none;
        }
        }
      
  }

  .container-contact {
    height: 100vh;
    .contact-form {
      width: 100%;
      margin: 0 5%;
      form{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "first" 
        "last"
        "email"
        "message"
        "button"
        ;
      }
    }
  }
  
  .container-footer{
    background-color: #04080F;
    display: flex;
    flex-direction: column;
    color: white;
    .footer-infocontact{
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
      align-items: center;
      text-align: center;
      padding: 5% 0;
    }
    .footer-copy{
      text-align: center;
      font-weight: 200;
      color: #8C8484;
      padding: 1% 0;
    }
  }
 
}

@media screen and (max-width: 360px){
  
  /* Home Styles */
  .container-home {
    height: 80vh;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px;
    margin: 0 5%;
    .home-title {
      .title {
        font-size: 2rem;
        font-weight: 800;
      }

      .description {
        width: 80%;
        font-size: 1.2em;
        padding: 10px 0;
        font-weight: 300;
      }
    }

    .home-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;

      .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: auto;
        height: 300px;
        border-radius: 8px;
        color: white;
        box-shadow: 10px 10px 0px 0px var(--color-secondary);
        padding: 15px 20px;
        transition: 0.2s ease-out;
        .card-ubication {
          display: grid;
          font-size: 0.8rem;
          grid-template-columns: 7% 93%;
          gap: 10px;
        }
        .card-name {
          font-size: 30px;
          font-weight: 500;
        }
        .card-line {
          width: 100%;
          height: 1px;
          margin-bottom: 10px;
          background: #fff;
          border-radius: 10px;
          transition: all 0.3s;
        }
        .card-type{
          font-size: 0.7rem;
        }
      }
      .card-one {
        background: url("../img/foto_1.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-two {
        background: url("../img/foto_2.png") no-repeat;
        background-size: cover;
        background-position: center;
      }
      .card-one:hover {
        background: url("../img/foto_1_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
      .card-two:hover {
        background: url("../img/foto_2_color.png") no-repeat;
        background-size: cover;
        background-position: center;
        scale: 1.05;
      }
    }
  }

  /* Gemba Styles */
  .container-gemba {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "text" 
                          "img";
    gap: 20px;
    margin: 0 10%;
    .gemba-img {
      grid-area: img;
      display: flex;
      align-items: center;
      justify-content: center;
      .gemba-galery {
        width: 300px;
        height: 300px;
        display: grid;
        align-self: center;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "one two"
          "three three";
        gap: 5px;
        .gemba-one {
          grid-area: one;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 145px;
          height: 150px;
          background-color: #c8142c35;
          border-radius: 8px;
          img {
            width: 70%;
          }
        }
        .gemba-two {
          grid-area: two;
          width: 150px;
          height: 150px;
          background: url("../img/photo_code_two.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
        .gemba-three {
          grid-area: three;
          width: 300px;
          height: 150px;
          background: url("../img/photo_code_one.png") no-repeat;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
        }
      }
    }
    .gemba-info {
      grid-area: text;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 5%;
      font-size: 20px;
      color: #7e7e7e;
      .gemba-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

   /* AI Styles */
   .container-ai {
    width: 100%;
    height: 100vh;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 0% 10%;
    .ai-title {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 2.5rem;
      font-weight: 500;
      margin-bottom: 2%;
    }
    .ai-galery {
      width: 100%;
      padding: 5% 5% 5% 8%;
      display: grid;
      align-self: start;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
        ". copilop ."
        "aws azur gcp"
        ". codium .";
      gap: 10px;
      .ai-copilop {
        grid-area: copilop;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-aws {
        grid-area: aws;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-azure {
        grid-area: azur;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-gcp {
        grid-area: gcp;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
      .ai-codium {
        grid-area: codium;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #fff;
        padding: 10%;
      }
    }
    .ai-info {
      display: grid;
      align-self: start;
      grid-template-columns: 1fr;
      width: 100%;
      grid-area: info;
      font-size: 20px;
      font-weight: 300;
      .ai-line {
        width: 30%;
        height: 3px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--color-primary);
      }
    }
  }

  /* en tramite */
  .container-companies {
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    padding: 0 10%;
    .companies-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-right: 0%;
      .companies-title {
        font-size: 1.7rem;
        font-weight: 500;
      }
      .companies-text {
        ul li {
          list-style: url("../img/check-circle.svg");
          line-height: 1rem;
          margin: 15px 15px;
          font-size: 0.8rem;
          font-weight: 400;
          color: #7e7e7e;
        }
      }
    }
    .companies-img {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      .companies-galery {
          display: flex;
          justify-content: center;
          width: clamp(50%, 10vw + 100%, 100%);
        height: auto; /* Para mantener la proporción de la imagen */
        img {
          
          width: clamp(200px, 100%, 70%);
        }
      }
    }
  }
  
  .container-choose {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 5% 12%;
    .choose-title {
      width: 100%;
      text-align: center;
      font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.5rem);
      font-weight: 500;
    }
    .choose-items{
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    }
    .choose-6 {
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 60%;
      }
    }
    .card-choose {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 10px;
      height: 150px;
      border: solid 1px #b2b2b2;
      background-color: #fff;
      border-radius: 7px;
      box-shadow: 15px 15px 0px 0px var(--color-secondary);
      .card-icon {
        color: #e58b8b7d;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 16px;
        border: solid 3px #e58b8b7d;
      }
      .card-title {
        width: 80%;
        font-size: 18px;
        color: #414141;
      }
      .card-info {
        font-size: 15px;
        font-weight: 300;
        color: #414141;
      }
    }
  }
  
  .container-benefits{
      height: 100vh;
      background: url("../img/bgbenefits.png") no-repeat;
      background-size: cover;
      background-position: center;
      display: grid;
      color: white;
      align-self: center;
      align-content: center;
      gap: 30px;
      grid-template-columns: 1fr;
      grid-template-areas:
      "title"
      "items";
      .benefits-title{
          grid-area: title;
          text-align: center;
          justify-items: center;
          font-size: clamp(1rem, -0.875rem + 8.333333vw, 2.8rem);
          font-weight: 500;
      }
      .benefits-items{
          grid-area: items;
          padding: 0 4%;
          display: grid;
          gap: 10px;
          /* grid-template-columns: repeat(4, 1fr); */
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          .item{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-items: center;
              margin: 0 15px;
              .item-icon{
                  display: grid;
                  align-items: center;
                  justify-items: center;
                  background-color: white;
                  margin-bottom: 15px;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
              }
              .item-title{
                  text-align: center;
                  margin-bottom: 15px;
                  font-size: 1rem;
                  font-weight: 500;
              }
              .item-info{
                  text-align: center;
                  font-size: 1rem;
                  font-weight: 300;
              }
          }
      }
  }
  
  .container-services{
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* align-items: center; */
      .carousel{
        width: 100%;
        text-align: center;
      }
      .services-title{
        font-size: 2.8rem;
        text-align: center;
        font-weight: 500;
      }
      .services-subtitle{
        font-size: 2rem;
        text-align: center;
        font-weight: 500;
        color: #3A4C59;
        margin: 20px 0;
      }
      .services-carusel{
        .carousel-container {
          width: 95%;
          margin: auto;
        }
        .carousel{
            height: auto;
        }
        .carousel-item{
          margin: 10px;
        }
        .carousel-item img {
            width: 100%;
            filter: grayscale(100%);
            transition: filter 1s ease;
        }
        .carousel-item.slick-center img {
            filter: none;
            scale: 1.2;
            z-index: 1;
        }
        .slick-prev, .slick-next {
            width: 20px;
            height: 20px;
            background-color: #000000;
            color: black;
            /* border: none; */
            border-radius: 50%;
            z-index: 1;
        }
        .title {
            color: black;
            text-align: center;
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
        }
      }
  }
  
  .container-get-started{
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      
      .get-started-text{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          padding: 0 5%;
          background: url("../img/bg_get.png") no-repeat;
          background-size: cover;
          background-position: center;
          .get-started-title{
            font-size: 2.3rem;
            font-weight: 500;
            color: var(--color-primary);
          }
          .get-started-info{
            font-size: 2.3rem;
            font-weight: 300;
            color: white;
            text-align: center;
            margin-top: 20px;
          }
          .btn {
              margin-top: 20px;
            }
      }
      
  }
  
  .container-questions{
      display: grid;
      height: auto;
      background-color: white;
      /* margin: 0 5%; */
      .questions-title{
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
      }
      .question-title-h1 {
          width: 100%;
          max-width: 800px;
          display: flex;
          justify-content: start;
          align-items: center;
        }
        
        .title-bg {
          width: 50%;
          object-fit: cover;
          border-radius: 10px;
        }
        
        .title-text {
          position: absolute;
          font-size: 2rem;
          mix-blend-mode: difference;
          color: white; /* Color blanco por defecto para el mix-blend-mode */
          text-align: start;
          padding-left: 65px;
        }
  
        .questions{
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .contenedor-acordeon {
            width: 100%;
        }
        
        .acordeon {
            background: #fff;
            position: relative;
        }
        
        .acordeon label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 10px;
            padding: 10px;
            font-size: 0.8rem;
            background: #D9D9D9;
            color: #667179;
            cursor: pointer;
            margin-bottom: 2px;
            transition: all 300ms ease;
            position: relative;
            user-select: none;
            p{
              width: 90%;
            }
        }
        
        .acordeon .bg-arrow{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 30px;
          height: 30px;
          background-color:#171F25;
          border-radius: 50%;
          margin-left: 10px;
        }
        
        .acordeon .arrow {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 10px;
            height: 10px;
            transform: rotate(180deg);
            transition: transform 500ms ease;
        }
        
        .acordeon .contenido-acordeon {
            padding: 0px;
            margin: 0px 20px;
            max-height: 0px;
            overflow: hidden;
            transition: all 300ms ease;
        }
        
        .btn-acordeon:checked ~ label .arrow {
            transform: rotate(360deg);
        }
        
        .btn-acordeon:checked ~ .contenido-acordeon {
            max-height: 600px;
            padding: 15px 0px;
        }
        
        .btn-acordeon {
            display: none;
        }
        }
      
  }

  .container-contact {
    height: auto;
    .contact-form {
      width: 100%;
      margin: 0 5%;
      form{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: 
        "first" 
        "last"
        "email"
        "message"
        "button"
        ;
      }
    }
  }
  
  .container-footer{
    background-color: #04080F;
    display: flex;
    flex-direction: column;
    color: white;
    .footer-infocontact{
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr;
      align-items: center;
      text-align: center;
      padding: 5% 0;
    }
    .footer-copy{
      text-align: center;
      font-weight: 200;
      color: #8C8484;
      padding: 1% 0;
    }
  }

}