/*--------------------------------------------------------------
# nuestro responsive

--------------------------------------------------------------*/

#clgo {
  opacity: 0;
  pointer-events: none; /* Evita interacciones */
  transition: none; /* Asegura que no haya animaciones */
}

  
/* media 25% zoom*/
@media (min-width: 6001px) and (max-width: 8000px) { 

  
  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 8000px !important;
  height: 350px !important;
  margin-left: -3800px !important;
  margin-top: 24px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 3150px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -250px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 8000px !important;
    height: 350px !important;
    margin-left: -3950px !important;
    margin-top: 24px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 3130px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 8000px !important;
    height: 350px !important;
    margin-left: -4080px !important;
    margin-top: 24px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 3130px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: -250px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 8000px !important;
    height: 350px !important;
    margin-left: -4180px !important;
    margin-top: 24px !important;
  }

  .ul5{
    width: 8000px !important;
    height: 350px !important;
    margin-left: -4400px !important;
    margin-top: 24px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 3130px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
.imgsection35{
  margin-top: 330px !important;
}

  .section15{
    height: 1100px !important;
    
  }
  .section35{
    height: 1100px !important;
  }
  .imgtarjeta{
    width: 1680px !important;
    height: 1100px !important;
  }
  .imgtarjeta1{
    width: 1680px !important;
    height: 1100px !important;
  }
  
  .logoup{
    width: 250px !important;
    height: 40px !important;
    margin-left: -270px !important;
   }
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 350px !important;
    margin-left: -3030px !important;
    border-radius: 20px;
  }


.section56 {
  width: 3400px !important;
  height: 600px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 2100px !important;
}



#scrollable-container {
  width: 100%; /* Puedes ajustar esto según tus necesidades */
  overflow-x: auto;
  white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
}


.swiper-slide {
  display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
}
.section10{
  margin-left: 2800px;
}
.cuandolle{
  width: 3300px !important;
  margin-left: -0px !important;

}
.card{
  height: 450px !important;
}
.containerdescuento{
  margin-left: 2150px !important;
}

h2{
  font-size: 39px !important;
}

.titulopagos{
  margin-left: 2500px !important;
}

.imgmediospagos{
  margin-left: -300px !important;
  margin-top: 40px !important;
}

.containerpagos{
  width: 4500px !important;
}


.container80 .card1:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
}

.container80 .card2:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card3:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 94px;
    left: 780px;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}
.sube{
  width: 180px !important;
  margin-top: -5px !important;
}

.imgpromo  {
margin-top: -32px !important;}



.btn-yellow2 {
  width: 220px;
}



}

/* media 33% zoom*/
@media (min-width: 3862px) and (max-width: 6000px) { 
  h2{
    font-size: 39px !important;
  }
  
  .titulopagos{
    margin-left: 1650px !important;
  }
  
  .imgmediospagos{
    margin-left: -100px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 3500px !important;
  }
  
  
  
  
  .containerdescuento{
    margin-left: 1600px !important;
  }
  

  .card{
    height: 450px !important;
  }
  
  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 6000px !important;
  height: 350px !important;
  margin-left: -2760px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 2100px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -300px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 6000px !important;
    height: 350px !important;
    margin-left: -2900px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 2080px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 6000px !important;
    height: 350px !important;
    margin-left: -3000px !important;
    margin-top: 1px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 2060px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
  .ul3 li:nth-child(7){
    margin-left: -300px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 6000px !important;
    height: 350px !important;
    margin-left: -3200px !important;
    margin-top: 15px !important;
  }

  .ul5{
    width: 6000px !important;
    height: 350px !important;
    margin-left: -3360px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 2080px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  .imgsection35{
    margin-top: 250px !important;
  }
  
  .section15{
    height: 900px !important;
    
  }
  .section35{
    height: 900px !important;
  }
  .imgtarjeta{
    width: 1250px !important;
    height: 900px !important;
  }
  .imgtarjeta1{
    width: 1250px !important;
    height: 900px !important;
  }
  
  .logoup{
    width: 250px !important;
    height: 70px !important;
    margin-left: -270px !important;
   }
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 350px !important;
    margin-left: -2070px !important;
    border-radius: 20px;
  }


.section56{
  width: 990px !important;
  margin-left: 2355px !important;
}


#scrollable-container {
  width: 100%; /* Puedes ajustar esto según tus necesidades */
  overflow-x: auto;
  white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
}


.swiper-slide {
  display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
}
.section10{
  margin-left: 1900px;
}
.cuandolle{
  width: 2500px !important;
  margin-left: -0px !important;

}

.section56 {
  width: 2500px !important;
  height: 500px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 1600px !important;
}
.container80 .card1:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
}
.container80 .card2:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card3:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 94px;
    left: 560px;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}

.sube{
  width: 180px !important;
  margin-top: -5px !important;
}

.imgpromo  {
margin-top: -32px !important;}



.btn-yellow2 {
  width: 220px;
}



}

/* media 50% zoom*/
@media (min-width: 3001px) and (max-width: 3861px) {

  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 565px !important;
  }
  .container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
  }
  .container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
  }
  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 0px;
      left: 285px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }
  
  .section56 {
    width: 1720px !important;
    height: 400px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 1050px !important;
  }
  

  #scrollable-container {
    width: 50%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: 150px;
  }

  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 4000px !important;
  height: 430px !important;
  margin-left: -1750px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 1030px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 4000px !important;
    height: 430px !important;
    margin-left: -1880px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 1030px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 4000px !important;
    height: 430px !important;
    margin-left: -2000px !important;
    margin-top: 15px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 1030px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 4000px !important;
    height: 430px !important;
    margin-left: -2100px !important;
    margin-top: 15px !important;
  }

  .ul5{
    width: 4000px !important;
    height: 430px !important;
    margin-left: -2330px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 1030px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  
  .imgsection35{
    margin-top: 220px !important;
  }
  
  .section15{
    height: 800px !important;
    
  }
  .section35{
    height: 800px !important;
  }
  .imgtarjeta{
    width: 830px !important;
    height: 600px !important;
  }
  .imgtarjeta1{
    width: 830px !important;
    height: 600px !important;
  }
  
  .logoup{
    width: 250px !important;
    height: 70px !important;
    margin-left: -940px !important;
   }
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 350px !important;
    margin-left: -1140px !important;
    border-radius: 20px;
  }

.cuandolle{
  width: 1720px !important;
  margin-left: -0px !important;

}
.containerdescuento{
  margin-left: 1080px !important;
}
h2{
  font-size: 39px !important;
}

.titulopagos{
  margin-left: 800px !important;
}

.imgmediospagos{
  margin-left: -900px !important;
  margin-top: 40px !important;
}

.containerpagos{
  width: 2900px !important;
}

.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 19%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}

.sube{
  width: 180px !important;
  margin-top: -5px !important;
}

.imgpromo  {
margin-top: -32px !important;}



.btn-yellow2 {
  width: 220px;
}



.col-xl-2:not(:last-child),
.col-lg-3:not(:last-child),
.col-sm-4:not(:last-child) {
margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
}


}
/* media 67% zoom*/
@media (min-width: 2851px) and (max-width: 3000px) { 
  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 2860px !important;
  height: 430px !important;
  margin-left: -1240px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 2890px !important;
    height: 430px !important;
    margin-left: -1410px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 2860px !important;
    height: 430px !important;
    margin-left: -1510px !important;
    margin-top: 15px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 370px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 2860px !important;
    height: 430px !important;
    margin-left: -1530px !important;
    margin-top: 15px !important;
  }

  .ul5{
    width: 2860px !important;
    height: 430px !important;
    margin-left: -1660px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 370px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  
  .imgtarjeta{
    width: 640px !important;
    height: 500px !important;
  }
  .imgtarjeta1{
    width: 640px !important;
    height: 500px !important;
  }
  
  .logoup{
    width: 250px !important;
    height: 50px !important;
    margin-left: -630px !important;
   }

   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 340px !important;
    margin-left: -660px !important;
    border-radius: 20px;
  }


.section56 {
  width: 1310px !important;
  height: 300px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 780px !important;
}


#scrollable-container {
  width: 58%; /* Puedes ajustar esto según tus necesidades */
  overflow-x: auto;
  white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
}


.swiper-slide {
  display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
}
.section10{
  margin-left: 200px;
}

.cuandolle{
  width: 1310px !important;
  margin-left: -0px !important;

}
.containerdescuento{
  margin-left: 800px !important;
}

h2{
  font-size: 39px !important;
}

.titulopagos{
  margin-left: 500px !important;
}


.imgmediospagos{
  margin-left: 30px !important;
  margin-top: 40px !important;
}

.containerpagos{
  width: 2000px !important;
}



.container80 .card1:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
}
.container80 .card2:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card3:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 94px;
    left: 285px;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}
.sube{
  width: 180px !important;
  margin-top: -5px !important;
}

.imgpromo  {
margin-top: -32px !important;}



.btn-yellow2 {
  width: 220px;
}


.col-xl-2:not(:last-child),
.col-lg-3:not(:last-child),
.col-sm-4:not(:last-child) {
margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
}



}

/* media 75% zoom*/
@media (min-width: 2401px) and (max-width: 2850px) { 
  h2{
    font-size: 39px !important;
  }
  
  .titulopagos{
    margin-left: 400px !important;
  }
  
  
  .imgmediospagos{
    margin-left: 30px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 1800px !important;
  }
  
  
  




  #scrollable-container {
    width: 58%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: 100px;
  }
  

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 2560px !important;
  height: 430px !important;
  margin-left: -1090px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 360px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 2560px !important;
    height: 430px !important;
    margin-left: -1250px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 365px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 2560px !important;
    height: 430px !important;
    margin-left: -1360px !important;
    margin-top: 15px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 365px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6) {
    margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 2560px !important;
    height: 350px !important;
    margin-left: -1330px !important;
    margin-top: 24px !important;
  }

  .ul5{
    width: 2560px !important;
    height: 430px !important;
    margin-left: -1510px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 375px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  
  .imgtarjeta{
    width: 555px !important;
    height: 400px !important;
  }
  .imgtarjeta1{
    width: 555px !important;
    height: 400px !important;
  }
  
  .logoup{
    width: 250px !important;
    height: 50px !important;
    margin-left: -550px !important;
   }
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 340px !important;
    margin-left: -510px !important;
    border-radius: 20px;
  }


.section56 {
  width: 1140px !important;
  height: 300px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 700px !important;
}



.cuandolle{
  width: 1140px !important;
  margin-left: -0px !important;

}

.containerdescuento{
  margin-left: 720px !important;
}

.container80 .card1:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
}
.container80 .card2:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card3:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 94px;
    left: 255px;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}

.sube{
  width: 180px !important;
  margin-top: -5px !important;
}

.imgpromo  {
margin-top: -32px !important;}



.btn-yellow2 {
  width: 220px;
}


.col-xl-2:not(:last-child),
.col-lg-3:not(:last-child),
.col-sm-4:not(:last-child) {
margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
}


}



/* media 80% zoom*/
@media (min-width: 2301px) and (max-width: 2400px) { 

  .sube{
    width: 180px !important;
    margin-top: -5px !important;
  }

  .imgpromo  {
  margin-top: -32px !important;}
  
  

  .btn-yellow2 {
    width: 220px;
  }

  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 2400px !important;
  height: 430px !important;
  margin-left: -1020px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 260px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 2450px !important;
    height: 430px !important;
    margin-left: -1200px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 265px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 2400px !important;
    height: 430px !important;
    margin-left: -1280px !important;
    margin-top: 15px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 230px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 2400px !important;
    height: 350px !important;
    margin-left: -1330px !important;
    margin-top: 24px !important;
  }

  .ul5{
    width: 2400px !important;
    height: 430px !important;
    margin-left: -1430px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 230px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  

  .imgtarjeta{
    width: 540px !important;
    height: 400px !important;
  }
  .imgtarjeta1{
    width: 540px !important;
    height: 400px !important;
  }
  

  .logoup{
    width: 250px !important;
    height: 60px !important;
    margin-left: -400px !important;
   }

   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 340px !important;
    margin-left: -420px !important;
    border-radius: 20px;
  }

.section56 {
  width: 1100px !important;
  height: 300px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 635px !important;
}

  
#scrollable-container {
  width: 62%; /* Puedes ajustar esto según tus necesidades */
  overflow-x: auto;
  white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
}


.swiper-slide {
  display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
}

.section10{
  margin-left: 100px !important;
}

.cuandolle{
  width: 1120px !important;
  margin-left: -0px !important;

}
.containerdescuento{
  margin-left: 680px !important;
}

h2{
  font-size: 39px !important;
}

.titulopagos{
  margin-left: 350px !important;
}


.imgmediospagos{
  margin-left: 30px !important;
  margin-top: 40px !important;
}

.containerpagos{
  width: 1700px !important;
}

.container80 .card1:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
}
.container80 .card2:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card3:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 94px;
    left: 240px;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}

.col-xl-2:not(:last-child),
.col-lg-3:not(:last-child),
.col-sm-4:not(:last-child) {
margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
}


}
/* media 90% zoom*/
@media (min-width: 2001px) and (max-width: 2300px) { 

  .containerpaginaprincipal{
    margin-left: 310px !important;
  }


  .containerpaginaprincipal{
    width: 1272px !important;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-left: 15px;
  }

  .card {
      border-radius: 20px;
      padding: 20px;
      width: 320px;
      margin: 8px;
      box-sizing: border-box;
      height: 372px;
  }


  .btn-yellow2 {
    width: 250px;
  }


  h2{
    font-size: 39px !important;
  }
  
  .titulopagos{
    margin-left: 300px !important;
  }
  
  
  .imgmediospagos{
    margin-left: 30px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 1500px !important;
  }
  
  


  .containerdescuento{
    margin-left: 600px !important;
  }
  
  
  #scrollable-container {
    width: 73%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }

.section10{
  margin-left: 140px !important;
}
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 2180px !important;
  height: 430px !important;
  margin-left: -920px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 200px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 2182px !important;
    height: 430px !important;
    margin-left: -1050px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 200px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 2182px !important;
    height: 430px !important;
    margin-left: -1160px !important;
    margin-top: 15px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 195px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 2182px !important;
    height: 350px !important;
    margin-left: -1230px !important;
    margin-top: 24px !important;
  }

  .ul5{
    width: 2182px !important;
    height: 430px !important;
    margin-left: -1310px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 170px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: 10px; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  



  .imgtarjeta{
    width: 460px !important;
    height: 350px !important;
  }
  .imgtarjeta1{
    width: 460px !important;
    height: 350px !important;
  }
  

  .logoup{
    width: 250px !important;
    height: 50px !important;
    margin-left: -400px !important;
   }
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 340px !important;
    margin-left: -290px !important;
    border-radius: 20px;
  }
  
.section56 {
  width: 940px !important;
  height: 300px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 590px !important;
}
.cuandolle{
  width: 940px !important;
  margin-left: -0px !important;

}


.container80 .card1:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
}
.container80 .card2:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card3:hover {
background-color: #fceb08 !important;
background-blend-mode: multiply !important;
height: 565px !important;

}
.container80 .card1::after,
.container80 .card2::after,
.container80 .card3::after {
    content: "";
    position: absolute;
    top: 94px;
    left: 210px;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: none !important; /* Inicialmente, oculta todas las imágenes */
}

.sube{
  width: 180px !important;
  margin-top: -11px;
}


.col-xl-2:not(:last-child),
.col-lg-3:not(:last-child),
.col-sm-4:not(:last-child) {
margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
}


}

/* media 100 zoom*/
@media screen and (min-width: 1801px) and (max-width: 2000px) {


  .col-xl-2:not(:last-child),
  .col-lg-3:not(:last-child),
  .col-sm-4:not(:last-child) {
  margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
  }
  


  .upfooter{
    margin-left: -150px !important;
  }

  .socialfooter{
    margin-left: -160px !important;
  }
  .footerspo{
    margin-left: -60px !important;
  }

  .copyfooter{
    margin-left: 30px !important;
  }


  .containerpaginaprincipal{
    margin-left: 310px !important;
  }


  .containerpaginaprincipal{
    width: 1272px !important;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-left: 15px;
  }

  .card {
      border-radius: 20px;
      padding: 20px;
      width: 408px;
      margin: 8px;
      box-sizing: border-box;
      height: 372px;
  }

  .card img {
      max-width: 100%;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
  }

  .card p {
      text-align: center;
  }




  .containerdescuento{
    width: 1560px !important;
    margin-left: 15px;

  }

 .container25{
  margin-left: 200px !important;
width: 1500px !important;
 }

 .section200{
  width: 1500px !important;
  margin-left: 200px !important;
 }

 .container80{
  width: 1500px !important;
  margin-left: 200px !important;
}




h2{
  font-size: 39px !important;
}


.titulopagos{
  margin-left: 20px !important;
}


.imgmediospagos{
  margin-left: -30px !important;
  margin-top: 40px !important;
}

.containerpagos{
  width: 1500px !important;
}



  .estacionimg{
    height: 430px !important;
  }
  
  

  .cuandolle{
    width: 1270px !important;
    height: 268px !important;
    margin-left: -0px !important;

  }


  #scrollable-container {
    width: 95%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: 260px !important;
  }

  .section35{
    width: 624px !important;
    height: 490px !important;
    
  }
.section15{
width: 624px !important;
height: 490px !important;
}


  .imgtarjeta{
    width: 624px!important;
    height: 571px !important;
  }

  .imgtarjeta1{
    width:  624px !important;
    height: 571px !important;
  }
  


  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  
.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 2000px !important;
  height: 358px !important;
  margin-left: -840px !important;
  margin-top: 15px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 120px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}



  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 2000px !important;
    height: 358px !important;
    margin-left: -980px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 105px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 2000px !important;
    height: 358px !important;
    margin-left: -1100px !important;
    margin-top: 15px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 100px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 

  .ul4{
    width: 2000px !important;
    height: 350px !important;
    margin-left: -1010px !important;
    margin-top: 24px !important;
  }

  .ul5{
    width: 2000px !important;
    height: 358px !important;
    margin-left: -1250px !important;
    margin-top: 15px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 100px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }

.logoup{
 width: 250px !important;
 height: 50px !important;
 margin-left: -430px !important;
}

.search {
  position: relative;
  z-index: 1;
  width: 200px;
  background: rgba(255, 255, 255, 0.911);
  overflow-x: hidden;
  display: none;
  margin-top: 340px !important;
  margin-left: -180px !important;
  border-radius: 20px;
}

.section56 {
  width: 1270px !important;
  height: 268px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 320px !important;

}


ul img.common-image {
  max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
  float: right;
  margin-left: 10px; /* Espacio entre la imagen y la lista */
  margin-top: 45px !important;
}
.textopromociona{
  font-size: 20px !important;
}
  
.imgpromo  {
  width: 108px;
height: 124px;
margin-top: -40px !important;}

.sube{
  width: 218px;
  margin-top: -20px !important;
}
.img63 {
margin-left: 310px !important;
}


}

/* media 110 zoom*/
@media screen and (min-width: 1600px) and (max-width: 1800px) {

  


  .col-xl-2:not(:last-child),
  .col-lg-3:not(:last-child),
  .col-sm-4:not(:last-child) {
  margin-right: 55px !important    ; /* Ajusta el valor según tus preferencias */
  }
  
  .upfooter{
    margin-left: -200px !important;
  }

  .socialfooter{
    margin-left: -200px !important;
  }
  .footerspo{
    margin-left: -60px !important;
  }

  .copyfooter{
    margin-left: 30px !important;
  }



.containerpaginaprincipal{
  margin-left: 230px !important;
}

.card {
  margin: 15px !important;
}



  .containerdescuento{
    width: 1465px !important;
    margin-left: 10px;
  
  }
  
  .container25{
  margin-left: 135px !important;
  width: 1465px !important;
  }
  
  .section200{
  width: 1465px !important;
  margin-left: 135px !important;
  }
  
  .container80{
  width: 1465px !important;
  margin-left: 135px !important;
  }


  h2{
    font-size: 39px !important;
  }
  
  
.titulopagos{
  margin-left: -30px !important;
}


.imgmediospagos{
  margin-left: -30px !important;
  margin-top: 40px !important;
}

.containerpagos{
  width: 1400px !important;
}




  .img63 {
    margin-left: 250px !important;
    }
    
    
  .estacionimg{
    height: 430px !important;
  }
  


  .textopromociona{
    font-size: 19px !important;

  }

  .cuandolle{
    width: 1020px !important;
    margin-left: -0px !important;

  }

  #scrollable-container {
    width: 95%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: 160px;
  }

  .section35{
    width: 600px !important;
    height: 490px !important;
    
  }
.section15{
width: 600px !important;
height: 490px !important;
}

  .imgtarjeta{
    width: 600px !important;
    height: 550px !important;
    
  }

  .imgtarjeta1{
    width: 600px !important;
    height: 550px !important;
    
  }
  
  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  ul img.common-image {
    max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
    float: right;
    margin-left: -400px !important; /* Espacio entre la imagen y la lista */
    margin-top: 60px !important;
  }
  


  .ul1 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 1900px !important;
    height: 358px !important;
    margin-left: -750px !important;
    margin-top: 15px !important;
  }
  
  .ul1 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul1 li:nth-child(6) {
    break-after: column;
  }
    
  .ul1 li:nth-child(1),
  .ul1 li:nth-child(2),
  .ul1 li:nth-child(3),
  .ul1 li:nth-child(4),
  .ul1 li:nth-child(5),
  .ul1 li:nth-child(6) {
    margin-left: 220px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul1 li:nth-child(10),
  .ul1 li:nth-child(11),
  .ul1 li:nth-child(8) {
    margin-left: -330px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  

  
  
    .list-text {
      flex: 1; /* Hace que el texto ocupe todo el espacio restante */
    }
    
  
    .ul2{
      width: 1900px !important;
      height: 358px !important;
      margin-left: -990px !important;
      margin-top: 15px !important;
      columns: 1;
    }
    
    .ul2 li {
      break-inside: avoid-column !important;
      margin-bottom: 5px !important;
    }
  
  
    .ul2 li:nth-child(1),
    .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
    .ul2 li:nth-child(3) {
      margin-left: 210px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
  
  
  
    .ul3 {
      columns: 2;
      column-gap: -20px;
      column-width: 10px;
      width: 1900px !important;
      height: 358px !important;
      margin-left: -1110px !important;
      margin-top: 15px !important;
    }
    
    .ul3 li {
      break-inside: avoid-column !important;
      margin-bottom: 5px !important;
    }
    
    .ul3 li:nth-child(3) {
      break-after: column;
    }
      
    .ul3 li:nth-child(1),
    .ul3 li:nth-child(2),
    .ul3 li:nth-child(4),
    .ul3 li:nth-child(3) {
      margin-left: 210px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
    
    
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
      margin-left: -400px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
   
      
    .ul4{
      width: 1900px !important;
      height: 358px !important;
      margin-left: -1060px !important;
      margin-top: 15px !important;
    }
  
    .ul5{
      width: 1900px !important;
      height: 358px !important;
      margin-left: -1260px !important;
      margin-top: 15px !important;
      columns: 1;
    }
    
    .ul5 li {
      break-inside: avoid-column !important;
      margin-bottom: 5px !important;
    }
  
  
    .ul5 li:nth-child(1),
    .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
    .ul5 li:nth-child(3) {
      margin-left: 212px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
  


  .card {
    border-radius: 20px;
    padding: 20px;
    width: 385px !important;
    margin: 20px;
    box-sizing: border-box;
    height: 295px;

}


  .logoup{
    width: 230px !important;
    height: 45px !important;
    margin-left: -425px !important;
   }

   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 340px !important;
    margin-left: -105px !important;
    border-radius: 20px;
  }

  .section56 {
    width: 1210px !important;
    height: 268px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 260px !important;
  
  }
  
  .cuandolle{
    width: 1210px !important;
    height: 268px !important;
    margin-left: -0px !important;

  }
  
  .imgpromo  {
    width: 95px;
  }
  
    .sube{
      width: 218px;
      margin-top: -23px !important;
    }
  
  
   }

   

   
/* media 125 zoom*/
@media screen and (min-width: 1343px) and (max-width: 1599px) {

  .col-xl-2:not(:last-child),
  .col-lg-3:not(:last-child),
  .col-sm-4:not(:last-child) {
  margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
  }
  



  .upfooter{
    margin-left: -110px !important;
  }

  .socialfooter{
    margin-left: -200px !important;
  }
  .footerspo{
    margin-left: -80px !important;
  }

  .copyfooter{
    margin-left: 30px !important;
  }




  .containerpaginaprincipal{
    margin-left: 130px !important;
  }
  
  .card {
    margin: 15px !important;
  }
  



  .containerdescuento{
    width: 90% !important;
    margin-left: 0px;
  
  }
  
  .container25{
  margin-left: 45px !important;
  width: 95% !important;
  }
  
  .section200{
  width: 80% !important;
  margin-left: 170px !important;
  }
  
  .container80{
  width: 89% !important;
  margin-left: 105px !important;
  }

  .cuandolle{
    width: 100% !important;
    height: 268px !important;

  }

  .btn-yellow2{
    width: 80%;
  }

  h2{
    font-size: 39px !important;
  }
  


  .titulopagos{
    margin-left: -100px !important;
  }
  
  
  .imgmediospagos{
    margin-left: -30px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 1300px !important;
  }
  
    
  .img63 {
    margin-left: 170px !important;
    }
    


  .estacionimg{
    height: 430px !important;
  }
  
  .textopromociona{
    font-size: 19px !important;
  }

  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: 85px;
  }

  .section35{
    width: 41% !important;
    height: 490px !important;
    
  }
.section15{
width: 41% !important;
height: 490px !important;
}

  .navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  

  .ul1 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
   max-width: 1600px !important;
   width: 1600px !important;
    height: 358px !important;
    margin-left: -580px !important;
    margin-top: 15px !important;
  }
  
  .ul1 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul1 li:nth-child(6) {
    break-after: column;
  }
    
  .ul1 li:nth-child(1),
  .ul1 li:nth-child(2),
  .ul1 li:nth-child(3),
  .ul1 li:nth-child(4),
  .ul1 li:nth-child(5),
  .ul1 li:nth-child(6) {
    margin-left: 90px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul1 li:nth-child(10),
  .ul1 li:nth-child(11),
  .ul1 li:nth-child(8) {
    margin-left: -330px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
    ul img.common-image {
        max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
        float: right;
        margin-left: 100px !important; /* Espacio entre la imagen y la lista */
        margin-top: 60px !important;
      }
  
  
  
    .list-text {
      flex: 1; /* Hace que el texto ocupe todo el espacio restante */
    }
    
  
    .ul2{
      width: 1800px !important;
      height: 358px !important;
      margin-left: -980px !important;
      margin-top: 15px !important;
      columns: 1;
    }
    
    .ul2 li {
      break-inside: avoid-column !important;
      margin-bottom: 5px !important;
    }
  
  
    .ul2 li:nth-child(1),
    .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
    .ul2 li:nth-child(3) {
      margin-left: 300px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
  
  
  
    .ul3 {
      columns: 2;
      column-gap: -20px;
      column-width: 10px;
      width: 1800px !important;
      height: 358px !important;
      margin-left: -1100px !important;
      margin-top: 15px !important;
    }
    
    .ul3 li {
      break-inside: avoid-column !important;
      margin-bottom: 5px !important;
    }
    
    .ul3 li:nth-child(3) {
      break-after: column;
    }
      
    .ul3 li:nth-child(1),
    .ul3 li:nth-child(2),
    .ul3 li:nth-child(4),
    .ul3 li:nth-child(3) {
      margin-left: 300px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
    
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
      margin-left: -260px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
   
      
    .ul4{
      width: 1800px !important;
      height: 358px !important;
      margin-left: -1060px !important;
      margin-top: 15px !important;
    }
  
    .ul5{
      width: 1800px !important;
      height: 358px !important;
      margin-left: -1250px !important;
      margin-top: 15px !important;
      columns: 1;
    }
    
    .ul5 li {
      break-inside: avoid-column !important;
      margin-bottom: 5px !important;
    }
  
  
    .ul5 li:nth-child(1),
    .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
    .ul5 li:nth-child(3) {
      margin-left: 300px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
    }
  

  .card {
    border-radius: 20px;
    padding: 20px;
    width: 29% !important;
    margin: 12px !important;
    box-sizing: border-box;
    height: 372px;
}

.imgtarjeta{
  width: 580px !important;
  height: 530px !important;
}

.imgtarjeta1{
  width: 580px !important;
  height: 530px !important;
}


.logoup{
  width: 210px !important;
  height: 40px !important;
  position: relative;
  left: -145px !important;
 }

   
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 330px !important;
    margin-left: 5px !important;
    border-radius: 20px;
  }

  .section56 {
    width: 1170px !important;
    height: 268px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 180px !important;
  
  }



  .imgpromo  {
    width: 95px;}
  
    .sube{
      width: 218px;
      margin-top: -23px !important;
    }
  
}



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


  .col-xl-2:not(:last-child),
  .col-lg-3:not(:last-child),
  .col-sm-4:not(:last-child) {
  margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
  }
  


  .upfooter{
    margin-left: -100px !important;
  }

  .socialfooter{
    margin-left: -170px !important;
  }
  .footerspo{
    margin-left: -80px !important;
  }

  .copyfooter{
    margin-left: 30px !important;
  }



  .containerpaginaprincipal{
    margin-left: 5px !important;
  }
  



  .containerdescuento{
    width: 89% !important;
    margin-left: 15px;
  
  }
  
  .container25{
  margin-left: 8px !important;
  width: 95% !important;
  }
  
  .section200{
  width: 89% !important;
  margin-left: 80px !important;
  }
  
  .container80{
  width: 89% !important;
  margin-left: 50px !important;
  }

  .cuandolle{
    width: 95% !important;
    height: 250px !important;

  }

  .btn-yellow2{
    width: 80%;
  }

  h2{
    font-size: 39px !important;
  }
  


  .titulopagos{
    margin-left: -200px !important;
  }
  
  
  .imgmediospagos{
    margin-left: -30px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 1200px !important;
  }
  


  .estacionimg{
    height: 460px !important;
  }
  
  .img63 {
    margin-left: 70px !important;
    }
    
    .imgpromo{
      margin-top: -40px !important;
    }

  .textopromociona{
    font-size: 20px !important;
    margin-top: -40px !important;
  }

  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: 0px !important;
  }




  .section35{
    width: 43% !important;
    height: 490px !important;
    
  }
.section15{
width: 43%!important;
height: 490px !important;
}

  .imgtarjeta{
    width: 550px !important;
    height: 500px !important;
  }
  .imgtarjeta1{
    width: 550px !important;
    height: 500px !important;
  }
  
.logoup{
  width: 160px !important;
  height: 30px !important;
  margin-left: -370px !important;
  margin-top: -10px;
 }



.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  margin-top: -5px;
}


.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 1670px !important;
  height: 360px !important;
  margin-left: -610px !important;
  margin-top: -1px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 610px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: 80px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


  ul img.common-image {
      max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
      float: right;
      margin-left: 50px; /* Espacio entre la imagen y la lista */
      margin-top: 60px !important;
    }
  

  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 1670px !important;
    height: 360px !important;
    margin-left: -970px !important;
    margin-top: -1px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 440px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 1670px !important;
    height: 360px !important;
    margin-left: -1090px !important;
    margin-top: -1px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 440px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: 65px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 1670px !important;
    height: 360px !important;
    margin-left: -1060px !important;
    margin-top: -1px !important;
  }

  .ul5{
    width: 1670px !important;
    height: 360px !important;
    margin-left: -1240px !important;
    margin-top: -1px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 440px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }




  .card {
    border-radius: 20px;
    padding: 20px;
    width: 30% !important;
    margin: 15px  !important;
    box-sizing: border-box;
    height: 372px;
}

.btn-yellow2 {
  width: 250px;

}



.imgtarjeta{
  width: 530px !important;
  height: 480px !important;
}
.imgtarjeta1{
  width: 530px !important;
  height: 480px !important;
}


  .spoty{
    margin-left: -15px !important;

    }

   .header-top{
    margin-left: 5px !important;
    margin-top: -25px !important;
   width: 150px !important;
   height: 50px !important;
   }
   
 .search {
  position: relative;
  z-index: 1;
  width: 200px;
  background: rgba(255, 255, 255, 0.911);
  overflow-x: hidden;
  display: none;
  margin-top: 335px !important;
  margin-left: 240px !important;
  border-radius: 20px;
}


.section56 {
  width: 1110px !important;
  height: 268px !important;
    padding: 40px;
    border-radius: 20px;
    margin-left: 85px !important;

}




.imgpromo  {
  width: 112px;}

  .sube{
    width: 218px;
    margin-top: -23px !important;
  }


}


/* media 175 zoom*/
@media (min-width: 992px) and (max-width: 1199px) {

  
.col-xl-2:not(:last-child),
.col-lg-3:not(:last-child),
.col-sm-4:not(:last-child) {
margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
}


  .upfooter{
    margin-left: -100px !important;
  }

  .socialfooter{
  margin-top: -5px !important;
    margin-left: -160px !important;
  }
  .footerspo{
    margin-top: -5px !important;
    margin-left: -80px !important;
  }

  .copyfooter{
    margin-top: 25px !important;
    margin-left: 30px !important;
  }




  .containerpaginaprincipal{
    margin-left: -95px !important;
  }
  

  h2{
    font-size: 35px !important;
  }
  

  .titulopagos{
    margin-left: -270px !important;
  }
  
  
  .imgmediospagos{
    margin-left: -30px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 1050px !important;
  }
  



  .img63 {
    margin-left: 10px !important;
    }
    
  .textopromociona{
    font-size: 20px !important;
    margin-top: -8px !important;
  }



  #scrollable-container {
    width: 95%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -40px !important;
  }



  .section35{
    width: 530px !important;
    height: 480px !important;
    
  }
.section15{
width: 530px !important;
height: 480px !important;
}


.dropdown{
  height: 35px !important;
  margin-top: -0px !important;
}

.logoup{
  width: 140px !important;
  margin-left: -170px !important;
 }


.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  margin-top: -5px;
}


.ul1 {
  columns: 2;
  column-gap: -20px;
  column-width: 10px;
  width: 1670px !important;
  height: 360px !important;
  margin-left: -610px !important;
  margin-top: -1px !important;
}

.ul1 li {
  break-inside: avoid-column !important;
  margin-bottom: 5px !important;
}

.ul1 li:nth-child(6) {
  break-after: column;
}
  
.ul1 li:nth-child(1),
.ul1 li:nth-child(2),
.ul1 li:nth-child(3),
.ul1 li:nth-child(4),
.ul1 li:nth-child(5),
.ul1 li:nth-child(6) {
  margin-left: 610px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}


.ul1 li:nth-child(10),
.ul1 li:nth-child(11),
.ul1 li:nth-child(8) {
  margin-left: 80px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
}

  ul img.common-image {
      max-width: 400px; /* Ajusta el tamaño de la imagen común según tus necesidades */
      float: right;
      margin-left: 50px; /* Espacio entre la imagen y la lista */
      margin-top: 60px !important;
    }
  

  .list-text {
    flex: 1; /* Hace que el texto ocupe todo el espacio restante */
  }
  

  .ul2{
    width: 1670px !important;
    height: 360px !important;
    margin-left: -950px !important;
    margin-top: -1px !important;
    columns: 1;
  }
  
  .ul2 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul2 li:nth-child(1),
  .ul2 li:nth-child(2),  .ul2 li:nth-child(4),
  .ul2 li:nth-child(3) {
    margin-left: 600px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }



  .ul3 {
    columns: 2;
    column-gap: -20px;
    column-width: 10px;
    width: 1670px !important;
    height: 360px !important;
    margin-left: -1070px !important;
    margin-top: -1px !important;
  }
  
  .ul3 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }
  
  .ul3 li:nth-child(3) {
    break-after: column;
  }
    
  .ul3 li:nth-child(1),
  .ul3 li:nth-child(2),
  .ul3 li:nth-child(4),
  .ul3 li:nth-child(3) {
    margin-left: 600px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
  
  
  .ul3 li:nth-child(5),
  .ul3 li:nth-child(6),
   .ul3 li:nth-child(7){
    margin-left: 65px; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }
 
    
  .ul4{
    width: 1670px !important;
    height: 360px !important;
    margin-left: -1060px !important;
    margin-top: -1px !important;
  }

  .ul5{
    width: 1670px !important;
    height: 360px !important;
    margin-left: -1220px !important;
    margin-top: -1px !important;
    columns: 1;
  }
  
  .ul5 li {
    break-inside: avoid-column !important;
    margin-bottom: 5px !important;
  }


  .ul5 li:nth-child(1),
  .ul5 li:nth-child(2),  .ul5 li:nth-child(4),
  .ul5 li:nth-child(3) {
    margin-left: 600px !important; /* Ajusta este valor según tus necesidades para mover la columna 2 */
  }




  .card {
    border-radius: 20px;
    padding: 20px;
    width: 30% !important;
    margin: 15px  !important;
    box-sizing: border-box;
    height: 372px;
}

.btn-yellow2 {
  width: 250px;

}



.imgtarjeta{
  width: 530px !important;
  height: 480px !important;
}
.imgtarjeta1{
  width: 530px !important;
  height: 480px !important;
}


  .spoty{
    margin-left: -15px !important;

    }

   .header-top{
    margin-left: 5px !important;
    margin-top: -25px !important;
   width: 150px !important;
   height: 50px !important;
   }
   
 .search {
  position: relative;
  z-index: 1;
  width: 200px;
  background: rgba(255, 255, 255, 0.911);
  overflow-x: hidden;
  display: none;
  margin-top: 335px !important;
  margin-left: 240px !important;
  border-radius: 20px;
}


  .section56 {
    width: 1060px !important;
    height: 268px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 15px !important;
  
  }

  
.cuandolle{
  width: 98% !important;
  height: 268px !important;
  margin-left: 10px !important;

}

  .imgpromo  {
    width: 100px;}

    .sube{
      width: 200px;
      margin-top: -15px !important;
    }

  .swiper-wrapper{
    margin-top: 10px !important;
  }

  .imgestacion{
    height: 370px !important;
  }

}


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


  .col-xl-2:not(:last-child),
  .col-lg-3:not(:last-child),
  .col-sm-4:not(:last-child) {
  margin-right: 50px !important    ; /* Ajusta el valor según tus preferencias */
  }
  

  .upfooter{
    margin-left: -100px !important;
  }

  .socialfooter{
  margin-top: -5px !important;
    margin-left: -160px !important;
  }

  .copyfooter{
    margin-top: 25px !important;
    margin-left: 30px !important;
  }


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


  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 565px !important;
}
.container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}
.container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}
  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 94px;
      left: 138px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }
  
  
  h2{
    font-size: 33px !important;
  }
  


  .titulopagos{
    margin-left: -250px !important;
  }
  
  
  .imgmediospagos{
    margin-left: 10px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 950px !important;

  }
  


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


  .estacionimg{
    height: 350px !important;
  }
  
  .imgestacion{
    height: 350px !important;
  }
 
  .textobenefi{
    font-size: 17px !important;
  }

  .textopromociona{
    font-size: 17px !important;
    margin-top: -17px !important;
  }

  .imgpromo  {
    width: 95px;
    height: 121px;
  }

    .sube{
      width: 195px;
      margin-top: -16px !important;
    }


  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -20px !important;
  }



  .section35{
    width: 43% !important;
    height: 450px !important;
    
  }
.section15{
width: 43% !important;
height: 450px !important;
}
.textocomp{
  font-size: 13px !important;
}
.btn-yellow1{
  width: 80% !important;
}

  .ul1 li {
    display: flex;
    align-items: center;
  }
  
  .ul1 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul1 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  
  .ul2 li {
    display: flex;
    align-items: center;
  }
  
  .ul2 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul2 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul3 li {
    display: flex;
    align-items: center;
  }
  
  .ul3 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul3 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul4 li {
    display: flex;
    align-items: center;
  }
  
  .ul4 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul4 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul5 li {
    display: flex;
    align-items: center;
  }
  
  .ul5 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul5 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }




  .card {
    border-radius: 20px;
    padding: 20px;
    width: 30% !important;
    margin: 2px  !important;
    box-sizing: border-box;
    height: 372px;
}

.btn-yellow2 {
  width: 180px;

}

.container80{
  margin-left: -5px !important;
}

.imgtarjeta{
  width: 500px !important;
  height: 450px !important;
}

.imgtarjeta1{
  width: 500px !important;
  height: 450px !important;
}




  .spoty{
    margin-left: -15px !important;

    }
  .logoup{
    width: 160px !important;
    margin-left: -650px !important;
   }

   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top:300px !important;
    margin-left: 330px !important;
    border-radius: 20px;
  }
  
  
  .header-top{
   width: 230px !important;
   height: 50px !important;
   margin-left: 15px !important;
   }


  .section56 {
    width: 940px !important;
    height: 268px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 10px !important;
  
  }

    
.cuandolle{
  width: 90% !important;
  height: 250px !important;
  margin-left: 40px !important;

}
.swiper-wrapper{
  margin-top: 10px !important;
}

   
  }

/* media 250 zoom*/
@media (min-width: 700px) and (max-width: 799px) { 

 

  .containerpaginaprincipal{
    margin-left: -254px !important;
  }
  
  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 650px !important;
}
.container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 650px !important;
  
}
.container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 650px !important;
  
}

  
.container80 .card1 {
  height: 650px !important;
}
.container80 .card2 {
height: 650px !important;

}
.container80 .card3 {
height: 650px !important;

}



  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 84px !important;
      left: 115px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }
  
  h2{
    font-size: 30px !important;
  }
  


  .titulopagos{
    margin-left: -280px !important;
  }
  
  
  .imgmediospagos{
    margin-left: 0px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 950px !important;

  }
  


  .img63 {
    margin-left: 0px !important;
    }

  .estacionimg{
    height: 320px !important;
  }
  
  .imgestacion{
    height: 300px !important;
  }
 
  .textopromociona{
    font-size: 15px !important; 
    margin-top: -25px !important;
  }

  .textobenefi{
    font-size: 15px !important;
  }

  
  .imgpromo  {
    width: 94px !important;
  height: 118px;}
  

    .sube{
      width: 182px;
      margin-top: -21px !important;
    }


  
  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -50px !important;
  }


  .section35{
    width: 500px !important;
    
  }
.section15{
width: 505px !important;
}

  
  .ul1 li {
    display: flex;
    align-items: center;
  }
  
  .ul1 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul1 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  
  .ul2 li {
    display: flex;
    align-items: center;
  }
  
  .ul2 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul2 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul3 li {
    display: flex;
    align-items: center;
  }
  
  .ul3 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul3 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul4 li {
    display: flex;
    align-items: center;
  }
  
  .ul4 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul4 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul5 li {
    display: flex;
    align-items: center;
  }
  
  .ul5 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul5 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }




  .card {
    border-radius: 20px;
    padding: 10px !important;
    width: 30% !important;
    margin: 10px !important;
    box-sizing: border-box;
    height: 372px !important;
}

  
.btn-yellow2 {
  width: 180px;

}


  .img63{
    margin-left: -55px !important;
  }

  .imgtarjeta{
    width: 360px!important;
    height: 460px !important;
  }
  .imgtarjeta1{
    width:  375px !important;
    height:460px !important;
    margin-left: 4px !important;
  }


  .img63 {
margin-left: -2px !important;
}


  .spoty{
    margin-left: -15px !important;
  
    }
  .logoup{
    width: 130px !important;
    margin-left: -250% !important;
   }

   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top:300px !important;
    margin-left: 330px !important;
    border-radius: 20px;
  }
  
  .header-top{
   width: 230px !important;
   height: 50px !important;
   margin-left: 15px !important;
   }



  .section56 {
    width: 745px !important;
    height: 268px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 10px !important;
  
  }

  .cuandolle{
    width: 97% !important;
    height: 268px !important;
    margin-left: 10px !important;
  
  }
  .swiper-wrapper{
    margin-top: 10px !important;
  }
.container80{
  margin-left: -5px !important;
}
   
}

/* media 300 zoom*/
@media  (min-width: 600px) and (max-width: 699px) {
  
  .section700{
    margin-left: -98px !important;
  }


  .containerpaginaprincipal {
    flex-direction: column;
    align-items: center;
    margin-left: -320px !important;
}
.card {
  border-radius: 20px;
  padding: 10px !important;
  width: 40% !important;
  margin: 15px !important;
  box-sizing: border-box;
  height: 372px !important;
}

.btn-yellow2 {
  width: 180px;

}

  
  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 565px !important;
}
.container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}
.container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}


  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 84px !important;
      left: 128px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }
  
  .containerdescuento{
    margin-left: -200px !important;
  }
  
  .img63 {
    margin-left: 200px!important;
    }



  h2{
    font-size: 30px !important;
  }
  

  .titulopagos{
    margin-left: -280px !important;
  }
  
  
  .imgmediospagos{
    margin-left: 10px !important;
    margin-top: 40px !important;
  }
  
  .containerpagos{
    width: 950px !important;

  }
  

  .img63 {
    margin-left: 200px!important;
    }


  .estacionimg{
    height: 280px !important;
  }
  
  .imgestacion{
    height: 280px !important;
  }

    
  .imgpromo  {
    width: 95px;}
  
  .sube{
    width: 170px;
    margin-top: -12px !important;

  }
 
  
  .cuandolle{
    width: 500px !important;
    height: 140px !important;
    margin-left: 0px;
  }


  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -30px !important;
  }

  
  .ul1 li {
    display: flex;
    align-items: center;
  }
  
  .ul1 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul1 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  
  .ul2 li {
    display: flex;
    align-items: center;
  }
  
  .ul2 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul2 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul3 li {
    display: flex;
    align-items: center;
  }
  
  .ul3 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul3 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul4 li {
    display: flex;
    align-items: center;
  }
  
  .ul4 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul4 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul5 li {
    display: flex;
    align-items: center;
  }
  
  .ul5 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul5 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  .section35{
    width: 490px !important;
    
  }
.section15{
width: 490px !important;
margin-left: 10px !important;
}


    

  .imgtarjeta{
    width: 500px!important;
    height: 460px !important;

  }

  .imgtarjeta1{
    display: none !important;
  }

  .spoty{
  margin-left: -15px !important;

  }

   
   .search {
    position: relative;
    z-index: 1;
    width: 200px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top:300px !important;
    margin-left: 330px !important;
    border-radius: 20px;
  }
  
  
  .header-top{
   width: 230px !important;
   height: 50px !important;
   margin-left: 15px !important;
   }
   

   .section56 {
    width: 500px !important;
    height: 268px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 65px !important;
  
  }
  .swiper-wrapper{
    margin-top: 10px !important;
  }
  .logoup{
    width: 150px !important;
    margin-left: -75% !important;
  
   }  


}
/* media 400 zoom*/
@media  (min-width: 480px) and (max-width: 599px) {

 
  .hrfooter{
    width: 150% !important;
      }
    
    


  .container80 {
    flex-direction: column;
    align-items: center;
}


.card {
  border-radius: 20px;
  padding: 10px !important;
  width: 50% !important;
  margin: 15px !important;
  box-sizing: border-box;
  height: 372px !important;
}


.btn-yellow2 {
  width: 180px;

}


  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 565px !important;
}
.container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 620px !important;
  
}
.container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}

.container80 .card2 {
height: 620px !important;

}





  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 84px !important;
      left: 223px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }

  
  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 19%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }
  
  h2{
    font-size: 25px !important;
  }
  

  .titulopagos{
    margin-left: -275px !important;
  }
  
  
  .imgmediospagos{
    margin-left: -30px !important;
    margin-top: 30px !important;
  }
  
  .containerpagos{
    width: 950px !important;

  }
  


  .img63 {
    margin-left: 0px !important;
    }


  .estacionimg{
    height: 200px !important;
  }
  
  .imgestacion{
    height: 200px !important;
    margin-top: -15px !important;
  }



  .imgpromo  {
    width: 95px;}
  
  .sube{
    width: 200px;
    height: 75px;

  }
  .textopromociona{
    font-size: 19px !important;
  }
  
  .cuandolle{
    width: 450px !important;
    height: 140px !important;
    margin-left: 0px;
  }



  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -20px !important;
  }


  
  .ul1 li {
    display: flex;
    align-items: center;
  }
  
  .ul1 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul1 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  
  .ul2 li {
    display: flex;
    align-items: center;
  }
  
  .ul2 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul2 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul3 li {
    display: flex;
    align-items: center;
  }
  
  .ul3 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul3 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul4 li {
    display: flex;
    align-items: center;
  }
  
  .ul4 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul4 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul5 li {
    display: flex;
    align-items: center;
  }
  
  .ul5 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul5 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }



  .img63 {
    margin-left: 0px !important;
    }
    

  .imgtarjeta{
    width: 450px!important;
    height: 460px !important;

  }

  .section35{
    width: 450px !important;
    margin-left: 10px  !important;
    
  }
.section15{
width: 450px !important;
margin-left: 1px  !important;
}


  .imgtarjeta1{
    display: none !important;
  }

  .spoty{
    margin-top: -15px !important;
  margin-left: -15px !important;
  width: 200px !important;
  height: 35px !important;
  }
  
  .logoup{
    width: 160px !important;
    margin-left: -75% !important;
  
   }  
      
   .search {
    position: relative;
    z-index: 1;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 320px !important;
    margin-left: 330px !important;
    border-radius: 20px;
  }
  
  
  .header-top{
   width: 230px !important;
   height: 50px !important;
   margin-left: 15px !important;
   }

   .section56 {
    width: 450px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 15px !important;
  
  }
  .swiper-wrapper{
    margin-top: 10px !important;
  }
  .navegacion{
    width: 150px !important;
    margin-left: -8px !important;
  }

  .upfooter{
    width: 45% !important;
     }
   

}      
/* media 500 zoom*/
@media (min-width: 380px) and (max-width: 479px) {


  .upfooter{
 width: 55% !important;
  }

 
  .navegacion{
    width: 150px !important;
    margin-left: -8px !important;
  }

  .hrfooter{
width: 150% !important;
  }




  .container80 {
    flex-direction: column;
    align-items: center;
}


.card {
  border-radius: 20px;
  padding: 10px !important;
  width: 70% !important;
  margin: 15px !important;
  box-sizing: border-box;
  height: 372px !important;
}


.btn-yellow2 {
  width: 180px;

}

  
  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 565px !important;
}
.container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}
.container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}


  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 84px !important;
      left: 134px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }

  .containerdescuento{
    margin-left: 20px !important;
  }




  .swiper-wrapper{
    margin-top: 10px !important;
  }


  h2{
    font-size: 20px !important;
    width: 150px !important;
  }
  

  .titulopagos{
    margin-left: -275px !important;
  }
  
  
  .imgmediospagos{
    margin-left: -300px !important;
    margin-top: 30px !important;
  }
  
  .containerpagos{
    width: 950px !important;

  }
  
  .sube{
    width: 180px;
    height: 70px !important;
  }


  .img63 {
    margin-left: 0px !important;
    }


  .estacionimg{
    height: 300px !important;
  }
  
  .imgestacion{
    height: 300px !important;
    margin-top: -15px !important;
  }


  
  .textopromociona{
    font-size: 18px;
  }
  .textobenefi{
    font-size: 18px;
  }
  
  .imgpromo  {
    width: 95px;}
  


  .cuandolle{
    width: 346px !important;
    margin-left: 0px !important;
    height: 120px !important;
  }



  #scrollable-container {
    width: 90%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -25px !important;
  }


  
  .ul1 li {
    display: flex;
    align-items: center;
  }
  
  .ul1 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul1 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  
  .ul2 li {
    display: flex;
    align-items: center;
  }
  
  .ul2 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul2 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul3 li {
    display: flex;
    align-items: center;
  }
  
  .ul3 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul3 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul4 li {
    display: flex;
    align-items: center;
  }
  
  .ul4 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul4 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul5 li {
    display: flex;
    align-items: center;
  }
  
  .ul5 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul5 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  

  .img63 {
    margin-left: 0px !important;
    }
    

  .imgtarjeta{
    width: 350px!important;
    height: 460px !important;

  }




  .section35{
    width: 350px !important;
    margin-left: 8px  !important;
    
  }
.section15{
width: 350px !important;
margin-left: 1px  !important;
}


  .imgtarjeta1{
    display: none !important;
  }

  .spoty{
    margin-top: -15px !important;
  margin-left: -15px !important;
  width: 200px !important;
  height: 35px !important;
  }




  .logoup{
    width: 170px !important;
    margin-left: -50% !important;
  
   }  
      
   
   .search {
    position: relative;
    z-index: 1;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top: 320px !important;
    margin-left: 330px !important;
    border-radius: 20px;
  }
  
  
  .header-top{
   width: 230px !important;
   height: 50px !important;
   margin-left: 15px !important;
   }

   .section56 {
    width: 346px !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 20px !important;
  
  }
}
/* media mobile*/
@media  (min-width: 250px) and (max-width: 379px) {

  .icon3 {
margin-left: 15px !important;
margin-top: 5px !important;
}





  .navegacion{
    width: 150px !important;
    margin-left: -8px !important;
  }



 
  .hrfooter{
    width: 150% !important;
      }
    
    

  .logoup {
    width: 170px !important;
  
  }
  
  .logoup {
    position: absolute;
    top: 50%; /* Ajusta la posición vertical */
    left: 50%; /* Ajusta la posición horizontal */
    transform: translate(-110%, -50%);
    margin-left: 50%;
  }



  .container80 {
    flex-direction: column;
    align-items: center;
}


.card {
  border-radius: 20px;
  padding: 10px !important;
  width: 70% !important;
  margin: 15px !important;
  box-sizing: border-box;
  height: 372px !important;
}


.btn-yellow2 {
  width: 80%;

}

  

  .container80 .card1:hover {
    background-color: #fceb08 !important;
    background-blend-mode: multiply !important;
    height: 565px !important;
}
.container80 .card2:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}
.container80 .card3:hover {
  background-color: #fceb08 !important;
  background-blend-mode: multiply !important;
  height: 565px !important;
  
}


  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 94px !important;
      left: 190px;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }

  
  .container80 .card1::after,
  .container80 .card2::after,
  .container80 .card3::after {
      content: "";
      position: absolute;
      top: 19%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-repeat: no-repeat !important;
      background-size: cover !important;
      display: none !important; /* Inicialmente, oculta todas las imágenes */
  }
  

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


  
  .swiper-wrapper{
    margin-top: 10px !important;
  }

  h2{
    font-size: 20px !important;
    width: 15% !important;
  }
  

  .titulopagos{
    margin-left: -275px !important;
  }
  
  
  .imgmediospagos{
    margin-left: -340px !important;
    margin-top: 15px !important;
  }
  
  .containerpagos{
    width: 950px !important;

  }
  


  .img63 {
    margin-left: 0px !important;
    }


  .estacionimg{
    height: 150px !important;
  }
  
  .imgestacion{
    height: 150px !important;
    margin-top: -15px !important;
  }

  
  .ul1 li {
    display: flex;
    align-items: center;
  }
  
  .ul1 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul1 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }

  
  .ul2 li {
    display: flex;
    align-items: center;
  }
  
  .ul2 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul2 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul3 li {
    display: flex;
    align-items: center;
  }
  
  .ul3 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul3 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul4 li {
    display: flex;
    align-items: center;
  }
  
  .ul4 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul4 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .ul5 li {
    display: flex;
    align-items: center;
  }
  
  .ul5 img {
    margin-right: 10px; /* Ajusta el espacio entre la imagen y el texto según sea necesario */
  }
  .ul5 img {
    width: 30px; /* Ajusta el tamaño de la imagen según sea necesario */
    margin-right: 5px; /* Puedes ajustar el espacio según sea necesario en pantallas más pequeñas */
  }


  .imgpromo  {
    width: 95px;}
  
  .sube{
    width: 140px !important;
    height: 70px;
  }
 

  #scrollable-container {
    width: 100%; /* Puedes ajustar esto según tus necesidades */
    overflow-x: auto;
    white-space: nowrap; /* Evita que las imágenes se rompan en múltiples líneas */
  }
  
  
  .swiper-slide {
    display: inline-block; /* Asegura que las imágenes estén en línea y no se rompan */
  }
  .section10{
    margin-left: -10px !important;
  }


  .img63 {
    margin-left: 0px !important;
    }
    

  .imgtarjeta{
    width: 98%!important;
    height: 460px !important;

  }

  .section35{
    width: 98% !important;
    margin-left: 8px  !important;
    
  }
.section15{
width:  98% !important;
margin-left: 1px  !important;
}

  .imgtarjeta1{
    display: none !important;
  }
.spoty{
  margin-top: -15px !important;
margin-left: -15px !important;
width: 200px !important;
height: 35px !important;
}




.estacionimg{
  height: 300px !important;
}

.imgestacion{
  height: 300px !important;
  margin-top: -15px !important;
}


      
   .search {
    position: relative;
    z-index: 1;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.911);
    overflow-x: hidden;
    display: none;
    margin-top:  321px !important;
    margin-left: 330px !important;
    border-radius: 20px;
  }
  
  
  .header-top{
   width: 230px !important;
   height: 50px !important;
   margin-left: 15px !important;
   }

   .section56 {
    width: 98% !important;
      padding: 40px;
      border-radius: 20px;
      margin-left: 0px !important;
  
  }
  .container80 {
    margin: 0 20%; /* Ajusta los márgenes como desees */
  }



.card img {
  max-width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card h3 {
  margin-top: 10px;
}

.card p {
  text-align: center;
}
    
}

.dropdown:hover {
  background-color: white; /* Cambia el color al que desees al pasar el ratón sobre el dropdown */
  border-radius: 10px;
}

/* Estilos adicionales para mejorar la apariencia del título del dropdown */
.dropdown {
  background-color: transparent; /* Fondo transparente por defecto */
  padding: 0px; /* Ajusta el relleno según sea necesario */
}

/* Otros estilos para el ícono y el texto del dropdown */
.dropdown a {
  text-decoration: none; /* Elimina el subrayado del enlace */
  color: black; /* Cambia el color del texto al que desees */
  display: flex;
  align-items: center;
}




@media (max-width: 700px) {

  .dropdown:hover{
    background-color: #f0f0f0 !important; 
  }
  .vyt a:hover {
    border-radius: 8px;
      background-color: #f0f0f0; /* Fondo blanco al pasar el mouse */
     
    }

  }

  @media (max-width: 992px) {

    .afipimg{
width: 150px;
height: 200px;
    }
  
  
    }





    
  @media screen and (max-width: 768px) {
    ul img.common-image {
   display: none;
    }
    .ul1{
    width: auto;
  }

  .ul2{
  margin-left: 0px !important;
  }
  
  .ul3{
    margin-left: 0px !important;
  }
  
  .ul3-1{
    margin-left: 0px !important;
  }
  .ul4{
    margin-left: 0px !important;
  }
  .ul5{
    margin-left: 0px !important;
  
  }
  .ul5-1{
    margin-left: 0px !important;
  }
    
    }
  
    
    @media (min-width: 769px) and (max-width: 990px) {
 
      

    ul img.common-image {
   display: none !important;
    }
    .ul1{
    width: auto;
 
  }
 
  .ul2{
  margin-left: 0px !important;
  }
  
  .ul3{
    margin-left: 0px !important;
  }
  
  .ul3-1{
    margin-left: 0px !important;
  }
  .ul4{
    margin-left: 0px !important;
  }

  .ul5{
    margin-left: 0px !important;
  
  }
  .ul5-1{
    margin-left: 0px !important;
  }
    }

    .recuadro {
  height: 592px !important; /* Establece la altura deseada para el primer recuadro */
}

.recuadro2{
height: 292px !important;
}

.recuadro3{
height: 292px !important ; 
margin-top: 320px;
margin-left: -320px;
}