/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
@font-face {
  font-family: 'Montserrat';
  src: url('./font/static/Montserrat-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./font/static/Montserrat-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('./font/static/Montserrat-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: #555555;
}

a {
  text-decoration: none;
  color: #03826F;
}

a:hover {
  color: #03826F;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #03826F;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #fff;
  color: #000;
}

.back-to-top.active {
  visibility: none !important;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

#header{
  height: 72px !important;
}

.navbar li {
  position: relative;
}

.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 15px;
  color: #151515;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #111111;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #f0f0f0;;
  transition: 0.3s;
}


.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
  font-weight: 600;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #242424;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

/* efecto fondo blanco en viajes y turismo */
.vyt a {
  text-decoration: none;
  color: #000; /* Color del texto */
  transition: background-color 0.3s ease; /* Transición suave del color de fondo */
}

/* Estilo al pasar el mouse sobre el enlace (hover) */
.vyt a:hover {
border-radius: 8px;
  background-color: #fff; /* Fondo blanco al pasar el mouse */
 
}


/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #151515;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
  
}



@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}


.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  overflow-y: auto;
  transition: 0.3s;
  background-color: #f0f0f0 !important;
}

.navbar-mobile a {
  padding: 10px 20px;
  font-size: 15px;
  color: #151515;
}

.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #1b1b1b;
}

.navbar-mobile .getstarted {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #0e0d0d;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}


/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: whitesmoke;
}

.section-title {
  text-align: center;
  padding-bottom: 40px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 0;
  color: #151515;
}

.section-title p {
  margin-bottom: 0;
  color: #aeaeae;
}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: url("../img/footer-bg.jpg") center center no-repeat;
  color: #fff;
  font-size: 14px;
  position: relative;
}

#footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
}

#footer .footer-top {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 0;
}

#footer .footer-top .footer-logo img {
  height: 80px;
}

#footer .footer-top h3 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  position: relative;
  font-family: "Poppins", sans-serif;
  padding: 30px 0 0 0;
  margin-bottom: 0;
}

#footer .footer-top p {
  font-size: 15;
  font-style: italic;
  margin: 30px 0 0 0;
  padding: 0;
}

#footer .footer-top .footer-newsletter {
  text-align: center;
  font-size: 15px;
  margin-top: 30px;
}

#footer .footer-top .footer-newsletter form {
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  text-align: left;
}

#footer .footer-top .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

#footer .footer-top .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #7cc576;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
}

#footer .footer-top .footer-newsletter form input[type="submit"]:hover {
  background: #5ab652;
}

#footer .footer-top .social-links {
  margin-top: 30px;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #7cc576;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #5ab652;
  color: #fff;
  text-decoration: none;
}

#footer .footer-bottom {
  border-top: 1px solid #222222;
  z-index: 2;
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
}

#footer .copyright {
  text-align: center;
}

#footer .credits {
  text-align: center;
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# nuestro estilo
busqueda viajes
--------------------------------------------------------------*/

.btn-yellow {
  background-color: #FFCC00;
  color: rgb(255, 255, 255);
  padding: 12px 24px; /* Agrandar el botón */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s; /* Transición suave de color de fondo */
   position: absolute;
  width: 700px;
  margin-top: 15px;


}

/* Cambiar el color de fondo en hover */
.btn-yellow:hover {
  background-color: #FFCC00; /* Amarillo más claro en hover */
}

    
.input-con-imagen {
  background: url('../../img/autobus.png') no-repeat left center; /* La imagen estará a la izquierda del texto */
  background-size: 30px 30px; /* Tamaño de la imagen */
  padding-top: 40px; /* Espacio encima del texto (ajustar según sea necesario) */
  border: none; /* Elimina el borde */
  background-color: #f2f2f2; /* Establece el fondo gris */
  outline: none; /* Elimina el contorno al hacer clic en el input (enfoque) */
  width: 30%; /* Ancho del input al 100% del contenedor */
  padding: 10px 10px 10px 40px; /* Espacio en todos los lados del contenido con más espacio a la izquierda */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

#elementos {
  border: none;
  background-color: #f2f2f2;
  outline: none;
  width: 60%; /* Ancho del input al 60% del contenedor */
  padding: 10px 10px 10px 40px;
  box-sizing: border-box;
  direction: ltr;
  margin: 0 auto; /* Centra el elemento horizontalmente */
}

#elementos1 { border: none; /* Elimina el borde */
  visibility: hidden;
  background-color: #f2f2f2; /* Establece el fondo gris */
  outline: none; /* Elimina el contorno al hacer clic en el input (enfoque) */
  width: 60%; /* Ancho del input al 100% del contenedor */
  padding: 10px 10px 10px 40px; /* Espacio en todos los lados del contenido con más espacio a la izquierda */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
  direction: ltr; /* Establece la dirección del texto de izquierda a derecha */
  margin: 0 auto; /* Centra el elemento horizontalmente */
}



.btn-yellow1 {
  background-color: #FFCC00;
  color: rgb(255, 255, 255);
  padding: 12px 24px; /* Agrandar el botón */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s; /* Transición suave de color de fondo */
  width: 456px;
  height: 56px;
}



.container25 {
  display: flex;
  justify-content: center;
  gap: 0 !important;  /* Espacio de 20px entre los elementos hijos del contenedor */
  margin-left: 5px;
}

.section35, .section15 {
  width: 22%;
  border-radius: 20px;
}

.section35 {
  margin-right: 10px;
  text-align: center; /* Centra el contenido horizontalmente */
}

.section15 {
  margin-left: 10px;
}

.select-contenedor-flex {
        display: flex;
        flex-direction: column; /* Cambiar la dirección de flex a columna */
        align-items: center; /* Centrar horizontalmente los elementos */
    }

/* media 150 zoom*/
@media (min-width: 800px) and (max-width: 1342px) {

  
.section35, .section15 {
  width: 33% !important;
}

#elementos {
  width: 70% !important; /* Ancho del input al 60% del contenedor */
}


#elementos1 {
  width: 70% !important; /* Ancho del input al 60% del contenedor */
}

}


/* media 250 zoom*/
@media (min-width: 700px) and (max-width: 799px) {          
    
.section35, .section15 {
  width: 40% !important;
}

#elementos {
  width: 75% !important; /* Ancho del input al 60% del contenedor */
  margin-left: 0px !important;
}

#elementos1 {
  width: 75% !important; /* Ancho del input al 60% del contenedor */
  margin-left: 0px !important;
}

.btn-yellow1 {
  width: 75% !important;
}


}



@media (min-width: 400px) and (max-width: 699px) {

  .container25 {
    flex-direction: column;
    align-items: center !important; /* Centrar horizontalmente */
  }

  .section35, .section15 {
    width: 80% !important; /* Make sections take full width on mobile */
    margin-left: 20px !important;
  }


  .section15 {
  margin-top: 10px !important; 
margin-left: -10px !important;
}

  #elementos {
    width: 75% !important; /* Ancho del input al 60% del contenedor */
    margin-left: 0px !important;
  }
  
  #elementos1 {
    width: 75% !important; /* Ancho del input al 60% del contenedor */
    margin-left: 0px !important;
  }

  .btn-yellow1 {
    width: 50% !important;
  }
}


/* media 500 zoom*/
@media (min-width: 255px) and (max-width: 399px) {

  .container25 {
    flex-direction: column;
    align-items: center !important; /* Centrar horizontalmente */
  }

  .section35, .section15 {
    width: 80% !important; /* Make sections take full width on mobile */
    margin-left: 20px !important;
  }


  .section15 {
  margin-top: 10px !important; 
margin-left: -10px !important;
}

  #elementos {
    width: 75% !important; /* Ancho del input al 60% del contenedor */
    margin-left: 0px !important;
  }
  
  #elementos1 {
    width: 75% !important; /* Ancho del input al 60% del contenedor */
    margin-left: 0px !important;
  }

  .btn-yellow1 {
    width: 50% !important;
  }

  .imagencon{
    width: 50px !important;
    height: 50px !important;
  }
}



/*--------------------------------------------------------------
# nuestro estilo
<!--* cuadro con imagenes*-->
--------------------------------------------------------------*/

.overlay {
  position: absolute; /* Añade posición absoluta para superponer el texto */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFCC00; /* Establece el color de fondo amarillo */
  opacity: 0; /* Inicialmente, la capa es transparente */
  transition: opacity 0.3s ease; /* Agrega una transición suave para la opacidad */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px; /* Tamaño de fuente del texto */
  color: rgb(255, 255, 255); /* Color del texto */
  font-weight: bold; /* Peso de la fuente */
}

.recuadro:hover .overlay {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}

.recuadro2:hover .overlay {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}

.recuadro3:hover .overlay {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}

 /* Estilo predeterminado del texto dentro del elemento <p> */
 .overlay .text-container p {
  color: #f70505; /* Color de texto predeterminado */
}

/* Estilo cuando el mouse está sobre el elemento <p> */
.overlay .text-container p:hover {
 background-color:#FFCC00 ; /* Cambiar el color de texto a amarillo en hover */
}

.texto {
  display: flex;
  justify-content: space-between; /* Alinea los elementos al inicio y al final del párrafo */
  align-items: center; /* Centra verticalmente los elementos */
  padding: 15px;
  margin-top: -10px !important;
}

.texto1 {
  display: flex;
  justify-content: space-between; /* Alinea los elementos al inicio y al final del párrafo */
  align-items: center; /* Centra verticalmente los elementos */
 margin-top: 10px;
 margin-left: 10px;
}


/* Estilo para la flecha */
.flecha {
  color:  #FFCC00; /* Color de la flecha (puedes ajustarlo) */
  font-weight: bold; /* Opcional: hacer la flecha negrita */
  font-family: Arial, sans-serif; /* Opcional: fuente de la flecha */
}

#section10 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60%;

}


.recuadro {
    width: 325px !important;
    height: 610px !important;
    margin: 20px;
    background-color: #f0f0f0;
    text-align: center;
    border: 2px solid #ccc;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.contenido-recuadro {
    width: 100%;
    height: 100%;
}



.recuadro2 {
  width: 300px;
  margin: 20px;
  background-color: #f0f0f0;
  text-align: center;
  border: 2px solid #ccc;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex: 0 0 auto;
  border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.contenido-recuadro2 {
  width: 100%;
  height: 100%;
}

.recuadro3 {
  width: 300px;
  margin: 20px;
  background-color: #f0f0f0;
  text-align: center;
  border: 2px solid #ccc;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex: 0 0 auto;
  border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.contenido-recuadro3 {
  width: 100%;
  height: 100%;
}



.imagen {
    width: 100%;
    height: 85%;
    object-fit: cover;
 
}

.imagen1 {
  width: 100%;
  height: 92% !important;
  object-fit: cover;

}




/* Agrega este código CSS al final de tu hoja de estilos existente */

.recuadro {
  position: relative; /* Añade posición relativa para que los elementos secundarios usen este como referencia */
}

.recuadro:hover::before {
  content: ""; /* Agrega un contenido pseudo antes para crear la capa amarilla */
  position: absolute; /* Añade posición absoluta para que la capa cubra todo el recuadro */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFCC00; /* Establece el color de fondo amarillo */
  opacity: 0; /* Inicialmente, la capa es transparente */
  transition: opacity 0.3s ease; /* Agrega una transición suave para la opacidad */
}

.recuadro2:hover::before {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}

.recuadro2 {
  position: relative; /* Añade posición relativa para que los elementos secundarios usen este como referencia */
}

.recuadro2:hover::before {
  content: ""; /* Agrega un contenido pseudo antes para crear la capa amarilla */
  position: absolute; /* Añade posición absoluta para que la capa cubra todo el recuadro */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFCC00; /* Establece el color de fondo amarillo */
  opacity: 0; /* Inicialmente, la capa es transparente */
  transition: opacity 0.3s ease; /* Agrega una transición suave para la opacidad */
}


.recuadro3 {
  position: relative; /* Añade posición relativa para que los elementos secundarios usen este como referencia */
}

.recuadro3:hover::before {
  content: ""; /* Agrega un contenido pseudo antes para crear la capa amarilla */
  position: absolute; /* Añade posición absoluta para que la capa cubra todo el recuadro */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFCC00; /* Establece el color de fondo amarillo */
  opacity: 0; /* Inicialmente, la capa es transparente */
  transition: opacity 0.3s ease; /* Agrega una transición suave para la opacidad */
}

.recuadro3:hover::before {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}


.recuadro:hover::before {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}

.recuadro2:hover::before {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}

.recuadro3:hover::before {
  opacity: 1; /* Cambia la opacidad a 0.5 cuando el mouse se coloca encima */
}



.overlay {
text-align: center; /* Centra el contenido horizontalmente */
}

.text-container {
display: inline-block; /* Hace que los elementos se muestren en línea */
}

.text-container b {
display: block; /* Coloca el texto "¿VAMOS?" en una nueva línea */
}

.text-container p {
border: solid; /* Estilo del borde para "Empeza tu viaje" */
border-radius: 10px; /* Agrega esquinas redondeadas al marco */
padding: 5px;
margin-top: 50px;

}


h5 {
position: absolute; /* Posiciona el título de manera absoluta */
top: 0px; /* Ajusta la distancia desde la parte superior según tu preferencia */
left: 30px; /* Ajusta la distancia desde la izquierda según tu preferencia */
margin: 0; /* Elimina el margen predeterminado del título */
}





@media (min-width: 1221px) and (max-width: 1400px) {

  .recuadro {
      width: 100%; /* Ocupa todo el ancho del contenedor */
      margin: 0 10px; /* Espacio entre recuadros */
  }
  .recuadro {
    width: 27% !important;
    margin: 20px;
    background-color: #f0f0f0;
    text-align: center;
    border: 2px solid #ccc;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}


}




@media (min-width: 769px) and (max-width: 1220px) {


.recuadro-container {
      display: flex;
      overflow-x: scroll; /* Permitir desplazamiento horizontal */
      -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos iOS */
  }

  .recuadro {
      width: 100%; /* Ocupa todo el ancho del contenedor */
      margin: 0 10px; /* Espacio entre recuadros */
  }
  .recuadro {
    width: 300px !important;
    margin: 20px;
    background-color: #f0f0f0;
    text-align: center;
    border: 2px solid #ccc;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}



}



@media (min-width: 512px) and (max-width: 768px) {



.recuadro-container {
      display: flex;
      overflow-x: scroll; /* Permitir desplazamiento horizontal */
      -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos iOS */
  }

  .recuadro {
      width: 100%; /* Ocupa todo el ancho del contenedor */
      margin: 0 10px; /* Espacio entre recuadros */
  }
  .recuadro {
    width: 300px !important;
    height: 370px;
    margin: 20px;
    background-color: #f0f0f0;
    text-align: center;
    border: 2px solid #ccc;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}



}




@media (min-width: 342px) and (max-width: 512px) {


  .recuadro-container {
      display: flex;
      overflow-x: scroll; /* Permitir desplazamiento horizontal */
      -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos iOS */
  }

  .recuadro {
      width: 95%; /* Ocupa todo el ancho del contenedor */
      height: 95%;
      margin: 0 10px; /* Espacio entre recuadros */
  }
  .recuadro {
    width: 275px !important;
    height: 380px;
    margin: 20px;
    background-color: #f0f0f0;
    text-align: center;
    border: 2px solid #ccc;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex: 0 0 auto;
    border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}


}



@media (min-width: 318px) and (max-width: 341px) {

.recuadro-container {
  display: flex;
  overflow-x: scroll; /* Permitir desplazamiento horizontal */
  -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos iOS */
}

.recuadro {
  width: 100%; /* Ocupa todo el ancho del contenedor */
  margin: 0 10px; /* Espacio entre recuadros */
}
.recuadro {
width: 80%!important;
height: 370px;
margin: 20px;
background-color: #f0f0f0;
text-align: center;
border: 2px solid #ccc;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease;
flex: 0 0 auto;
border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */

}

}


@media (min-width: 252px) and (max-width: 317px) {

  .recuadro-container {
    display: flex;
    overflow-x: scroll; /* Permitir desplazamiento horizontal */
    -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos iOS */
  }
  
  .recuadro {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    margin: 0 10px; /* Espacio entre recuadros */
  }
  .recuadro {
  width: 240px !important;
  height: 370px;
  margin: 20px;
  background-color: #f0f0f0;
  text-align: center;
  border: 2px solid #ccc;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex: 0 0 auto;
  border-radius: 20px; /* Agregado para hacer que los bordes sean redondos */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  }
  
  }


/*--------------------------------------------------------------
# nuestro estilo
  estilo footer 
--------------------------------------------------------------*/

footer {
  position: relative;
  bottom: 0;
  width: 100%;
  background-color: #1f1f1d;
  /* Otros estilos según sea necesario */
}

  .social-icon {
    filter: grayscale(100%); /* Convierte la imagen en blanco y negro */
    transition: filter 0.3s; /* Agrega una transición suave al efecto */
  }

  .social-icon:hover {
    filter: grayscale(0%); /* Restaura el color al pasar el mouse sobre la imagen */
  }

/*--------------------------------------------------------------
# nuestro estilo
 imagenes de movil y credito
--------------------------------------------------------------*/

  #section15 {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .btn-yellow1 {
    background-color: #FFCC00;
    color: rgb(255, 255, 255);
    padding: 12px 24px; /* Agrandar el botón */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s; /* Transición suave de color de fondo */
  }

  
  .btn-yellow2 {
    width: 326px;
    height: 46px !important;
    background-color: #FFCC00;
    color: rgb(255, 255, 255);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s; /* Transición suave de color de fondo */
    font-size: 20px ;
  font-weight: lighter;
  }


  .center {
    text-align: center;
  }

  /* Cambiar el color de fondo en hover */
  .btn-yellow1:hover {
    background-color: #f8dd71 /* Amarillo más claro en hover */
  }

  /* Cambiar el color de fondo en hover */
  .btn-yellow2:hover {
    background-color: #f8dd71; /* Amarillo más claro en hover */
  }