@import url("bootstrap.min.css");
@import url("bootstrap-responsive.min.css");
@import url("./sliderclient.css");
@import url("./header.css");
@import url("./nav.css");
@import url("./html.css");
@import url("./spbutton.css");
@import url("./footer.css");
@import url("./home.css");
@import url("./certification.css");
@import url("./login.css");


::-moz-selection { background: #999; color: #fff; text-shadow: none; }
::selection { background: #999; color: #fff; text-shadow: none; }
:focus { outline-color: transparent!important; outline-style: none!important; }
    
.slider1 {
  width:100%;
  border-bottom:0px;
  border-radius: 15px;
}

#content {
  position:relative;
}

/* --------------------------------------------------------	*/
/*  Forms  */
/* --------------------------------------------------------	*/

.form-main input, .form-main textarea {
  position:relative;
  height:20px;
  width:95%;
  padding:16px 12px 14px 12px; 
  margin-top:10px;
  background:#fff;
  border-radius:3px;
  border:0px;
}

.form-main textarea {
  height:100px;
  resize:none;
}

.error {
	color: white;
	display: none;
}

#ajaxsuccess {
	color: white;
  font-size:18px;
  font-weight:bold;
	width: 100%;
	display: none;
  clear:both;
}
.clear{
	clear:both;}

  /* --------------------------------------------------------	*/
  /*  Comments  */
  /* --------------------------------------------------------	*/
  
  /* .comment-title h2, .contact-form-title h2 {
    padding-bottom:5px;
  }

  .comment {
    margin-bottom:30px;
    padding-left:50px;
    background:url(../img/comment-img.png) left 4px no-repeat;
  }

  .comment-author {
    color:#fff;
    font-weight:bold;
  }
  
  .comment-date {
    color:#fff;
  }
  
  .c-margin-2 {
    margin-left:50px;
  }
  
  .c-margin-3 {
    margin-left:100px;
  }
  
  .thank {
    padding-top:12px;
  }   
   */
  .form-comment input, .form-comment textarea {
    width:93.4%;
    color:#fff;
    background:#3b3b3b;
    margin-top:10px;
    padding:8px 12px !important;
    border:0px;
    border-radius:0px;
  }    
  
  .form-comment textarea {
    width:96.9%;  
    height:150px;
    resize:none;
  }   

/* --------------------------------------------------------	*/
/*  Contact  */
/* --------------------------------------------------------	*/

#map {
  position:relative;
  width:100%;
  height:270px;
  padding:0px;
  border:0px;
}

.rowasthetic{
  margin-right:auto;
  height: 100%
}

.formu {
  display: flex;
  align-items: center; /* Centra verticalmente */
  justify-content: space-between; /* Alinea a la izquierda y derecha */
  gap: 20px;
  padding-left: 4%;
  padding-right: 4%;
}
.form-container {
  flex: 1; /* Esto asegura que el formulario ocupe el espacio disponible */
  max-width: 500px; /* Máximo tamaño del formulario */
}
.image-section img {
  width: 100%; /* La imagen ocupará todo el ancho del contenedor */
  border-radius: 8px;
  margin: 0 auto!important;
  background: rgb(11,4,138);
  background: linear-gradient(90deg, rgb(38, 94, 247) 0%, rgba(47,149,251,1) 60%, rgba(0,212,255,1) 100%); 
}

form input {
  height: 60px;
  outline: none;
  border: none;
  padding: 5 15px;
  font-size: 18px;
  font-weight: 400;
  color: #333;
  border-radius: 10px;
  background: #fff;
  margin-top: 10px;
}
.form.login input {
  border: 1px solid #aaa;
}

 .form.login form {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 6px; /* Reduced gap between columns and rows */
 
} 

/* Style for input fields */
.form.login form input[type="text"],
.form.login form input[type="email"],
.form.login form input[type="password"] {
  width: 95%; /* Makes inputs take full width of their grid cell */
}
.form.login input:focus {
  box-shadow: 0 1px 0 #ddd;
}

form .checkbox {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto; /* Centers the button horizontally */
  margin-right: auto; /* Centers the button horizontally */
  grid-column: span 2; /* Makes the checkbox span across both columns */
}

form .checkbox label{
  margin-bottom: -5px;
}
.checkbox input[type="checkbox"] {
  height: 16px;
  width: 16px;
  cursor: pointer;
}


form .checkbox label {
  cursor: pointer;
  color: #000;
}

form a {
  color: #333;
  text-decoration: none;
}

form a:hover {
  text-decoration: underline;
}

form input[type="submit"], .form.login input[type="submit"] {
  margin-bottom: 10px;
  margin-top: 15px;
  padding: none;
  background: #4070f4;
  color: #FFF;
  font-size: 18px;
  width: 220px;
  font-weight: 500;
  cursor: pointer;
}


@media (max-width: 768px) {
  .logo{
   padding-top: -20px;
   padding-bottom: 20px;
  }
  .formu {
    flex-direction: column; /* Cambiar la dirección de los elementos a columna */
    align-items: center; /* Centra los elementos */
    gap: 1px; /* Espacio entre la imagen y el formulario */
  }

  .form-container{
    max-width: 100%; /* Que ambos ocupen el 100% del ancho */

  }
  .image-section {
    width: 68%; /* Asegura que no haya un desbordamiento */
    order: -1; /* La imagen se moverá arriba */
    margin: 0 auto;
  }

  .image-section img {
    
    max-width: 100%; /* Asegura que la imagen no se desborde */
  }
  
  form input[type="submit"] {
    margin-top: 1px;
    padding: none;
    width: 100%;
  }
  .form.login input[type="submit"] {
  margin-top: 3%;
  }
  
}
@media (min-width: 768px) and (max-width:975px) {
  .container {
    width: 99%;
  }
}
.cert{
  white-space: nowrap;
  align-items: center; /* Centra el icono y el texto verticalmente */
  padding: 3px 0px; /* Ajusta el espaciado interno (superior e inferior, izquierdo y derecho) */
  margin: 0; /* Elimina márgenes innecesarios */
  line-height: 1; /* Reduce el interlineado entre el texto y el icono */
}
a.linkardo {
  color: black !important; /* El uso de !important asegura que no se sobrescriba */
  text-decoration: none; /* Si también quieres quitar el subrayado */
}
.linkardo2 {
  color: #000 !important; /* El uso de !important asegura que no se sobrescriba */
  
}
#popupMessage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 5px;
  text-align: center; /* Centra el contenido dentro del popup */
}

#popupMessage button {
  background-color: #007bff; /* Fondo azul */
  color: white; /* Texto blanco */
  padding: 10px 20px; /* Relleno del botón */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar el cursor a mano */
  font-size: 16px; /* Tamaño de fuente */
  transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
  margin-top: 20px; /* Espacio superior al botón */
}

/* Efecto al pasar el ratón sobre el botón */
#popupMessage button:hover {
  background-color: #0056b3; /* Cambia el fondo cuando el mouse pasa por encima */
}
#error-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  text-align: center; /* Centra el contenido dentro del popup */
  display: none; /* Asegúrate de que el popup esté oculto por defecto */
}

#error-popup button {
  background-color: #007bff; /* Fondo azul */
  color: white; /* Texto blanco */
  padding: 10px 20px; /* Relleno del botón */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados */
  cursor: pointer; /* Cambiar el cursor a mano */
  font-size: 16px; /* Tamaño de fuente */
  transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
  margin-top: 20px; /* Espacio superior al botón */
}

/* Efecto al pasar el ratón sobre el botón */
#error-popup button:hover {
  background-color: #0056b3; /* Cambia el fondo cuando el mouse pasa por encima */
}
.listarda{
  text-align: left;
}
.video1{
  border-radius: 5px;
}
#btn-up {
    display: none; /* Inicialmente oculto */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    color: #666;
}

#btn-up.visible {
    opacity: 0.7;
    display: block; /* Mostrar cuando se activa */
}

#btn-up:hover {
    opacity: 1;
    color: #151717;
}
    .cards-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card-custom {
      background-color: #fff;
      border: none;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      text-align: center;
      width: 100%;
      max-width: 270px;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 500px;
    }

    .card-header2 {
      background-color: #0056b3;
      color: white;
      font-weight: bold;
      text-transform: uppercase;
      padding: 20px 10px;
      font-size: 1rem;
    }

    .card-body2 {
      flex: 1;
      background-color: white;
      color: #1d2238;
      padding: 30px 15px;
      font-size: 0.9rem;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

    .separator2 {
      border-bottom: 2px solid #f5b041;
      width: 60%;
      margin: 15px auto;
    }

    .card-body2 p {
      margin-bottom: 0;
      text-transform: uppercase;
    }

    .construccion{
      width: 500px;
    }
    /* Responsive: stack cards on small screens */
    @media (max-width: 1100px) {
      .card-custom {
        max-width: 45%;
      }
    }

    @media (max-width: 700px) {
      .card-custom {
        max-width: 100%;
      }
    }

@media (max-width: 767px) {
        .mobile-first {
            order: 1; /* Muestra primero */
        }
        .mobile-last {
            order: 2; /* Muestra después */
            padding-top: 10px;
        }
        .row {
            display: flex;
            flex-direction: column;
        }
    }
@media (max-width: 480px) {
.video1{
  height: 220px;
  border-radius: 5px;
}
.construccion{
  width: 80%;
}
}