@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  list-style: none;
}

p{
font-size: 13pt ;
}
.texto-blanco {
  color: #fcf2f1;
  align-items: center;
  text-align: center;
  justify-content: center;
  }
    
/* Nav */

.navbar-scrolled {
  background-color: #ffffff; /* Cambia el color aquí según tu preferencia */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Añade una sombra sutil */
}

.navbar-collapse{
  align-items: center;
  justify-content: space-between;
  text-align: center;
}
.nav-item a {
  font-size: 20px;
  color: rgb(83, 83, 83) !important;
}

/* Estilo de la barra debajo del elemento cuando se hace hover */
.navbar-nav .nav-item .nav-link {
  position: relative;
}
.navbar-nav .nav-item {
  margin-right: 30px; /* Ajusta la cantidad de espacio entre los elementos */
}
.navbar-nav .nav-item .nav-link::after {
  content: "";
  display: block;
  height: 2px; /* Altura de la barra */
  width: 0; /* Inicialmente, la barra tiene un ancho de 0 */
  background-color: #1f27a5; /* Color de la barra */
  position: absolute;
  bottom: 5px; /* Ajusta la posición de la barra según tu preferencia */
  left: 0;
  transition: width 0.3s ease; /* Transición suave */
}

.navbar-nav .nav-item .nav-link:hover::after {
  width: 100%; /* Ancho de la barra al hacer hover */
}

/*----- banner --------*/
.container-video {
  position: relative;
  padding-bottom: 44%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
  padding-top: 30px;
  overflow: hidden;
  max-width: 100%;
}

.container-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container-video .contenido {
  position: absolute;
  top: 72%; 
  left: 50%;
  transform: translate(-50%, -50%); /* Center the button */
  z-index: 1; /* Ensure the button is above the video */
}

.container-video .boton-video {
  background-color: #ffffff;
  border-radius: 30px; 
  height: 40px;
  width: 150px;
  text-align: center;
  font-size: 20px;
  line-height: 40px;
  
}
.container-video .boton-video a {
  text-decoration: none; /* Remove underline from link */
  color: #00043e !important;
  font-weight: 700;
}
.container-video .boton-video:hover {
  background-color: rgba(255, 255, 255, 0.6);
  color: white;
}



/*---- 4 marcas lideres ----*/
.container-cajas {
 display: flex;
 justify-content: space-between !important;
}
.image-row:hover {
  transform: scale(1.1);
  cursor: pointer;
  transition: transform 0.3s ease; 
  object-fit: cover;
  flex-shrink: 0;
}

.container-row {
  margin-left: 50px; /* Margen de 50px en el lado izquierdo */
  margin-right: 50px; /* Margen de 50px en el lado derecho */
  max-width: none; /* Ancho máximo automático para deshabilitar el ancho máximo Bootstrap */
}
/* Estilo para las imágenes */
.img-fluid {
  max-width: 307px; /* Tamaño máximo de 307px */
  height: auto; /* Mantener la relación de aspecto y hacerlas responsive */
}

/* Estilo para la separación entre imágenes */
.my-2 {
  padding: 13px; /* Relleno de 13px para la separación */
}


/* Row - carrousel  */


.carousel{
  margin-top: 65px;
  
}

.carousel-inner {
  height: 380px; /* Ajusta la altura del carrusel según tus necesidades */
}

.carousel-inner img {
  width: 100%; /* Asegura que la imagen ocupe todo el ancho del contenedor */
  height: 100%; /* Asegura que la imagen ocupe toda la altura del contenedor */
  object-fit: cover; /* Ajusta la imagen para que cubra el contenedor sin distorsionarse */
}



/* Estilo para centrar las imágenes en el medio del contenedor */
.title {
  color: #28324B;
  display: flex;
  margin-bottom: 12px;
  font-weight: bold;
}
.text-center {
  text-align: center;
}

.content{
  text-align: start;
  display: flex;
  flex-direction: column;
  text-align: justify;
}

.content p {
  font-size: 18px;
  line-height: 1.8;
}

/* gradient-container plan ahorro*/
.gradient-container {
  margin-top: 70px;
  height: 500px;
  background-color: #20315C;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 70px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgb(92, 92, 92);
}

.p-plan {
  margin-top: 50px;
}

.p-plan p {
  margin-bottom: 5px;
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
}

.white-container {
  background-color: #f1f5ff;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  height: 230px;
  width: 100%;
  max-width: 80%;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgb(92, 92, 92);
  
}
 
.txt_plan {
  position: relative;
  color: #00043e;
  margin-top: 40px;
  font-family: 'Roboto', sans-serif;
  
}
.white-container .btn {
  font-family: 'Roboto', sans-serif;  
  font-size: 20px; /* Tamaño de fuente del botón */
  line-height: 100%;
  padding: 23px 5px;
  margin-top: 40px;/* Espaciado exterior del botón */
  width: 100%;
  max-width: 80%;
  background-color: #20315C; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  border: none; /* Borde del botón */
  border-radius: 10px; /* Borde redondeado del botón */
  transition: background-color 0.3s ease; /* Transición suave */
}
.white-container .btn:hover {
  background-color: #2c2f7d; /* Cambia el color de fondo al pasar el mouse */
  transform: scale(1.1); /* Escala el botón al 110% del tamaño original al hacer hover */
  transition: transform 0.2s ease; /* Agrega una transición suave */
}
 /* stock */
 .stock-container {
  margin-top: 90px;
  height: 300px;
  width: 100%;
 }

 .title-stock{
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #2c2f7d;
  font-weight: 700;
  font-size: 28px;
 }


.pos-container {
  margin-top: 120px;
  display: flex;
  justify-content: start;
  align-items: center;
  background-color: #20315C;
  height: 220px;
  width: 300px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  
}

.cont-anteojitos {
padding-top: 30px;
}

.anteojitos {
  
}

.txt-stock-title{
  color: white;
  font-size: 28px;
  padding-left: 40px;
  font-weight: 700;

}
.txt-stock-content{
  color: white;
  font-size: 18px;
  padding-left: 40px;  
}

.pos-container .botton-container {
  margin-left: 40px !important;
  font-weight: 700; 
}


/*--Posventa---- */ 
.gradient-container-service {
  margin-top: 150px;
  height: 500px;
  background: linear-gradient(to bottom, #dddddd, #acacac);
  color: white;
  display: flex;
  padding-top: 70px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgb(158, 158, 158);
}

.content-service{
align-items: center;
justify-content: center;
max-width: 90%;
}

.p-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.title-service {
  margin: 0; /* Elimina el margen superior e inferior */
  padding: 20px 0; /* Ajusta el espacio arriba y abajo */
  text-align: center; /* Centra el texto horizontalmente */
  color: #20315C;
  font-size: 36px;
  font-weight: bold;
}
.p-service p {
  font-size: 19px;
  margin-left: 30px;
  text-align: start;
  color: #20315C;
  margin-left: 70px; /* Ajusta el espacio arriba y abajo de cada párrafo */
  margin-top: 10px;
}

.white-container-service {
  background-color: #f1f5ff71;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  justify-content: center;
  height: 230px;
  width: 100%;
  max-width: 80%;
  border-radius: 20px;
  box-shadow: 0px 0px 10px rgb(92, 92, 92);
  
}
 
.txt_service {
  position: relative;
  color: #20315C;
  margin-top: 40px;
  align-items: center;
  text-align: center;
  justify-content: center;
  
}
.white-container-service .btn {
  font-size: 20px; 
  line-height: 100%;
  padding: 23px 5px;
  margin-top: 40px;/* Espaciado exterior del botón */
  width: 100%;
  max-width: 80%;
  background-color: #20315C; /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  border: none; /* Borde del botón */
  border-radius: 10px; /* Borde redondeado del botón */
  transition: background-color 0.3s ease; /* Transición suave */
}
.white-container-service .btn:hover {
  background-color: rgb(30, 32, 87); /* Cambia el color de fondo al pasar el mouse */
  transform: scale(1.1); /* Escala el botón al 110% del tamaño original al hacer hover */
  transition: transform 0.2s ease; /* Agrega una transición suave */
}

 /* Por que elegirnos */

    .container-gradient-img
    {
      width: 100%;
      height: 300px;
      background: #20315C;
      color: white;
      margin-top: 200px;
      box-shadow: 0px 0px 10px rgb(92, 92, 92);
    }

    .row-elegirnos .logo {
      align-items: center;
      justify-content: center;
      align-items: center;
    }

    .title-logo-p{
      font-size: 30px;
      font-weight: 700;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-top: 30px;
    } 
    .columna-por {
      width: 100%; display: flex;
      justify-content: start !important;
      align-items: center !important;
    }
     i {
      font-size: 20px;
     }
     .text-porque p{
      font-size: 20px;
     }
     .row-grande {
      margin-left: 20%;
    }
     

     /* CV */
     .container-cv {
 
      width: 100%;
      height: 250px;
     }

     .texto-cv p{
      margin-top: 40px; 
     }
     .title-cv p{
      font-weight: 700;
      font-size: 30px;
      align-items: center;
      justify-content: center;
      text-align: start;
      color: #00043e;
      margin-left: 100px ;
     }
     .content-cv p{
      font-size: 20px;
      align-items: center;
      justify-content: center;
      text-align: start;
      font-family: 'Roboto', sans-serif;
      margin-top: 30px;
      margin-left: 100px;
     }
    .container-cv .second-cv {
      margin-top: 10px;
    }

  .btn-cv .btn-primary {
  font-family: 'Roboto', sans-serif;  
  font-size: 30px; /* Tamaño de fuente del botón */
  line-height: 100%;
  padding: 15px 1px;
  margin-top: 140px;/* Espaciado exterior del botón */
  width: 100%;
  max-width: 80%;
  background-color:#00043e;  /* Color de fondo del botón */
  color: white; /* Color del texto del botón */
  border: none; /* Borde del botón */
  border-radius: 10px; /* Borde redondeado del botón */
  transition: background-color 0.3s ease; /* Transición suave */
  margin-left: 60px;
   }
   .btn-cv button.btn-primary:hover {
    transform: scale(1.1); /* Aumenta el tamaño del botón en un 10% al pasar el cursor sobre él */
  }
  /*  Footer */

   .container-footer {
    height: 200px;
    width: 100%;
    background-color: #28324B;
    display: flex;
    flex-direction: column;
    align-items: center;
    
   }
   .pire-foo {
    height: 60px;
   }
   .title-footer  {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    padding-top: 10px;
    
   }
.row-footer {
  padding-top: 20px;
  max-width: 85%;
  width: 100%;
}

.img-btn {
  height: 80px;
}


.cont-marca p {
  margin-bottom: 0 !important;
  color: white;
  text-align: center;
}

.container-desplegable {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.redes {
  background-color: #28324B;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  cursor: pointer;
}
.redes i {
  font-size: 28px;
  color: #f1f5ff;
}
.redes i:hover {
  color: #c7cbd3;
}
/* Cuando se pasa el mouse sobre la imagen, aplique la transformación */
.image-zoom:hover img {
  transform: scale(1.2); /* Puedes ajustar el factor de escala según tu preferencia */
}

.terminos-footer {
  height: 80px;
  border: 2px solid #ffffff; 
  color: #f1f5ff;
  background-color: #7C7C7C;
  border-left: none;
  border-right: none;
}

.col-terminos {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.col-terminos p{
  margin-top: 25px;
}
.main-contacto {
  display: flex;
  height: 80vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.main-contacto .container-contacto {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  width: 1800px;

}
.main-contacto .container-contacto .box-info {
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}


.t-contact {
  text-align: center;
  font-weight: 700;
  color: #131e38;
  font-size: 40px;
  
}


.main-contacto .container-contacto form {
  
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 5px;
}
.main-contacto .container-contacto form .btn-form {
  width: 80%;
  margin: 0 auto;
  background-color: #20315C !important;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 10px;
}
.main-contacto .container-contacto form .btn-form:hover {
  background-color:  #131e38 !important;
}
.main-contacto .container-contacto form .input-box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.main-contacto .container-contacto form .input-box i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 100px;
  font-size: 40px;
}
.main-contacto .container-contacto form .input-box input {
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
  height: 50px;
  padding: 10px;
  outline: none;
  transition: 0.3s;
}

.main-contacto .container-contacto form .input-box input:focus::-moz-placeholder {
  color: transparent;
}
.main-contacto .container-contacto form .input-box input:focus::placeholder {
  color: transparent;
}
.main-contacto .container-contacto form .input-box textarea {
  font-size: 20px;
  margin: 0 auto;
  width: 80%;
  height: 130px;
  letter-spacing: 1px;
  transition: 0.3s;
  padding: 10px;
  outline: none;
}

.main-contacto .container-contacto form .input-box textarea:focus::-moz-placeholder {
  color: transparent;
}
.main-contacto .container-contacto form .input-box textarea:focus::placeholder {
  color: transparent;
}
.check-r {
  display: flex;
  padding-left: 100px;
  align-items: center;
}
.check-r label {
  padding-left: 10px;
}
.cont-check {
  font-size: 18px;
}
.iden-check2 {
  padding-left: 15%;
}
.contact-button {
  position: fixed;
  bottom: 20px; 
  right: 20px; 
  z-index: 999;
}
.contact-button a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px; 
  height: 60px; 
  border-radius: 50%; 
  background-color:#25D366; 
  color: white; 
  text-decoration: none; 
}
.contact-button i {
  font-size: 28px;
}
.links {
  padding-top: 30px;
  display: flex;
}
.links i {
  font-size: 30px;
  gap: 40px;
  margin-right: 20px;
  cursor: pointer;
  color: #ffffff;
}

.links i:hover {
  color: #cfcfcf;
}

.footer-2 {
  width: 100%;
  height: 500px;
  background-color: #20315C;
 
}

.boton-footer {
  background-color: #7C7C7C !important;
}
.my-confirm-button{
  background-color: #20315C;
}
.my-cancel-button {
  background-color: #20315C;
}
.my-title {
  color: black;
  font-weight: roboto;
}
/*-------------------MEDIA----------------------------------------------------------- */
  @media  (min-width:1965px) {
   .usados-class {
    margin-bottom: 400px;
   }
  }



 @media (max-width:1500px) {
 
  .navbar .navbar-brand img {
    height: 55px;
  }
  .nav-item a {
    font-size: 15px;
  }

  .container-video .boton-video {

  }
 }
 @media (min-width:1500px) {

  .gradient-container-service {
    margin-top: 250px;
  }

 }
  @media (max-width: 1400px)  {
    .pos-container {
      margin-top: 50px;
    }
    .box-info iframe {
      height: 400px;
      width: 500px;
    }
  }


 @media (max-width: 1188px) {
  .container-footer{
    height: 230px;
  }
 }
 
  @media (max-width: 1039px) {
    .row-botton-service {
        flex-direction: column;
        align-items: center;
    }

    .row-botton-service .col-12 {
        width: 100%;
    }
    .title-service {
      font-size: 30px;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-left: 40px;
    }
    .white-container-service{
      height: 660px;
    }
    .container-gradient-img {
      margin-top: 600px;
    }

    .row-footer {
      padding-right: 0px;
    }

   .social-media {
    margin-top: 50px;
   }
}

@media (max-width: 1100px) {
  .nav-item a {
    font-size: 16px;
    color: rgb(83, 83, 83) !important;
  }
  
  .navbar-nav .nav-item {
    margin-right: 10px;
  }
}
@media (max-width: 1038px) {
  .row-botton-service {
      flex-direction: column;
      align-items: center;
  }

  .row-botton-service .col-12 {
      width: 100%;
  }
  .title-service {
    font-size: 30px;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: 40px;
  }
}
@media (max-width: 1015px) {
  .social-media {
    margin-top: 80px;
  }
  .container-footer {
    height: 600px;
  }
}
@media (max-width: 1012px) {
  .social-media {
    margin-top: 100px;
    
  }
  .container-footer{
    height: 260px;
  }
  .pos-container {
    margin-top: 30px;
  }
}
@media (max-width: 965px) {
  .pos-container {
    
  }
}
@media (max-width: 842px) {
  .container-footer{
    margin-top: 100px;
  }
  }
@media (max-width: 808px) {
.title-service{
  margin-top: -50px;
}

}


@media screen and (max-width: 991px) {
  #contacto-form {
    margin-top: 250px;
  }
  .t-contact {
    margin-top: 120px;
  }
  .main-contacto .container-contacto {
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: -50px;
  }
  .box-info {
    order: 2;
    margin-top: 35px; 
  }

  .form-contacto {
    order: 1; 
  }
  .container-row-footer p {
    align-items: center;
    justify-content: center;
    text-align: center;
    
  }
  .container-footer {
    height: 820px;
    margin-top: 250px;
    align-items: center;
    justify-content: center;
    text-align: center;
   
  }
.container-row-footer {
  border: none;
  height: 200px;
}
.main-contacto .container-contacto {
  width: 95%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
}

@media screen and (max-width: 788px) {
.container-footer {
  height: 900px;
}
}
  @media screen and (max-width: 768px) {
    .image-container {
      margin-left: 25px;
      margin-right: 25px;
    }
    .carousel {
      margin-top: 30px;
    }
    .title {
      justify-content: center;
      align-items: center;
    }
    .content{ 
      justify-content: center;
      align-items: center;
      text-align: justify;
    }
    .navbar-nav .nav-item .nav-link::after {
      animation: none;
  }

  .white-container{
    height: 580px;
    
  }
  .stock-container{
    margin-top: 480px;
  }
  .service {
    margin-top: 500px;
  }
  .title-service{
    margin-top: -50px;
    font-size: 25px;

  }
.content-service .p-service{
  margin-top: 10px;
}
.container-gradient-img {
  height: 600px;
}

  .columna-por {
  justify-content: center !important;
  align-items: center;
}
  .container-porque {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .row-grande {
    margin-left: 20%;
  }
.btn-cv .btn-primary{
  margin-top: 40px;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.container-footer {
  height: 820px;
  margin-top: 200px;
  align-items: center;
  justify-content: center;
  text-align: center;
 
}


.row-footer{
  align-items: center;
  justify-content: center;
  text-align: center;
}

.container-social-media {
  height: 50px;
  border-top: 1px solid #7C7C7C;
  
  
}
.container-social-media img {
  height: 50%;
}
.title-row-footer {
 
  margin-left: 0 ;
}

.container-txt-footer p {
  
  margin-left:0 ;
  
}

  
}

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

    .box-info iframe {
      width: 300px;
      height: 300px;
    }
   
    .white-container {
    margin-top: 7%;
    height: 400px;

    }
    
    .p-plan p {
      margin-bottom: 15px;
      font-family: 'Roboto', sans-serif;
      font-size: 18px;
      font-weight: 500;
    }

    .title-plan {
      font-size: 24px;
    }

    .txt_plan { 
      font-size: 20px;
      margin-top: 10px;
    }

    .white-container {
      margin-top: 100px;
    }
    .white-container .btn {
      margin-top: 10px;
    }

    .stock-container{
      margin-top: 350px;
    }

    .gradient-container-service{
      margin-top: -150px;
    }
    .white-container-service{
      margin-top: 80px;
    }

    .relleno-service{
      text-align: justify;
      align-items: center;
      justify-content: center;
    }
    .container-gradient-img {
      margin-top: 700px;
    }

    .row-png {
      margin-bottom: -60px;

    }
    .container-social-media {
      height: 100px;
    }
 

  .terminos-footer {  
    height: 100px;
  }
  
  .col-terminos p{
    margin-bottom: -15px;
  }
}

  @media screen and (max-width:494px) {
    .container-social-media {
      height: 125px;
    }
   .image-zoom {
    margin-bottom: -35px;
    margin-top: 40px;
    height: 90%;
   }
  
  @media screen and (max-width:490px) {
    .content-cv p{
      margin-left: 50px;
     }
     .title-cv p{
      margin-left: 50px;
     }
     .row-grande {
      margin-left: none;
    }
  }
}
  @media screen and (max-width:456px) {
    
    .p-service p{
      font-size: 16px;
    }  
  }
  @media screen and (max-width:431px) {
    .gradient-container-service {
      height: 520px;
    }
  }
  @media screen and (max-width:427px) {

    .p-service p{
      font-size: 16px;
    }

    

  }

  
  @media screen and (max-width:410px) {
    .title-service{
      font-size: 20px;
      margin-top: -80px;
      align-items: center;
    }
    .check-r {
      padding-left: 50px;
    }
    .check-r label {
      padding-left: -20px;
    }
      container-porque {
      margin-left: 60px;
    }
    .img-pire {
      margin-top: -10px;
      height: 40%;
    }
    .row-grande {
      margin-left: 13%;
    }
  }
  @media screen and (max-width:386px) {

    .gradient-container-service {
      margin-top: -240px;
    }
  }
  @media screen and (max-width:363px) {
    .txt-stock-title {
      font-size: 16px;
    }  
    .txt-stock-content {
      font-size:15px ;
    }
    .white-container-service {
      height: 700px;
    }
    .v11 a {
      margin-left:-250px;
    }
    
    .v4 a {
      margin-left:-118px;
    }
     
    }
  
 @media screen and (max-width:335px) {
  .title-plan {
    font-size: 23px;
    margin-top: -30px;
  }
  .p-plan p {
    align-items: start;
    font-size: 17px;
    margin-top: 1px ;
  }
  .p-service p {
    margin-top: -15px;
  }
  .text-porque p {
    font-size: 18px;
    }
    .row-grande {
      margin-left: 3%;
    }
 }
 @media screen and (max-width:325px) {
  .title-logo p {
    font-size: 27px;
  }

  .content-cv p{
    margin-left: 20px;
   }
   .title-cv p{
    margin-left: 20px;
   }
  }
  @media screen and (max-width:311px) {
    .container-social-media {
      height: 200px;
    }
    .image-zoom {
      margin-top: 100px;
      margin-bottom: -100px;
      height: 90%;
    }
  }