/* ? Color-list
Letras: #fff
bg de fondo sobre imagenes: rgba(255, 255, 255, 0.20)
verde (btn-whatsapp): #25d366   
Azul1 claro: rgb(7, 86, 130) = #075682 (footer)
Azul2 oscuro: rgb(2, 16, 23) = #021017 (fondo)
  background: linear-gradient(0deg,  rgb(2, 16, 23,.4),rgb(2, 16, 23,.4));  (fondo Blur)
  backdrop-filter: blur(10px);
azul3 brillante: #007bfe (logo)
azul4 bajo: #38bdf8 (logo)
azul shark (logo): #201a3d
azul5: #0466a2
azul6: #023289
azul7: #057cc6
amarillo (border-color): #b99b62;
                      .    
/*! - - - - - - - - - - - - - - - - - - - - - - - - -Estilos CSS- - - - - - - - - - - - - - - - - - - - - - -*/

.main{
  max-width:1200px ;
  width:100%;
    margin: 0 auto;
}



.new-header {
  background-color: rgba(2, 16, 23, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  z-index: 20;
  margin: 0;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row-reverse;
  max-width: 100%;
  width: 98%;
  height: auto;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  border-radius: 0 0 10px 10px;
  transition: transform .3s ease-in-out;
}
.new-header.ocultar {
  transform: translateY(-100%); /** Oculta el header desplazándolo hacia arriba */
}
.mirkodiving-logo a img{
  max-width: 111px;
  aspect-ratio: 15/7;
}
.new-up-arrow{
  width: 30px;
}
.menu-button{
  top: 4px;
}
.caja-vacia{
  width: 23px;
  height: auto;
}

/*scroll horizontal*/
.contenedor-detalles {
  display: flex;
  overflow-x: auto; /** Hace posible el scroll horizontal */
  max-width: 1200px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
}

.detalle {
  margin: 0 auto;
  padding: 5px;
}
.detalle img{
  height:auto;
  max-width:-webkit-fill-available !important; /** CON ESTO HACEMOS LAS IMAGENES AL TAMAÑO DEL CONTENEDOR*/
	width:150px;	
  border-radius: 8px;
}/*END scroll Horizontal*/

.txt{
  width: 80%;
  margin-inline: auto;
  font-size: 23px;
}

.contenedor-detalles::-webkit-scrollbar{
  width: 15px;
  height: 2vh;
  
}
.contenedor-detalles::-webkit-scrollbar-track{
  background-color: #021017;
}
.contenedor-detalles::-webkit-scrollbar-thumb{
  background-color: #E1E2E3;
  border-radius: 15px;
}
/*! - - - - - - - - - - - - - - - - - - - - - - - - A B O U T   U S - - - - - - - - - - - - - - - - - - - - - */
.about-mirko{
  display: flex;
  width: 90%;
  justify-content: space-between;
  -webkit-flex-derection:column;
  flex-direction: column;
  margin: 0;
  margin-inline: auto;
  -webkit-box-align: center; /**esto alinea las cajas en el centro?*/
  padding: 0;
  margin-top: 15px;
}
.present-mirko{
  width: 100%;
  display: flex;
  height: auto;
  align-items: center;
}
.img-about-mirko{
  width: 50%;
  margin: 0 auto ;
}
.img-about-mirko img{
  border-radius: 8px;
}
.desc-about-mirko{
  width: 70%;
  margin: 0;
  padding: 10px;
}
.desc-about-mirko h2{
  margin: 0;
}
.desc-about-mirko p{
  font-size: 16px;
  line-height:22px;
}

/* FRASE DE ABOUT */
.phrase{
  width: 60%;
  font-family: 'Georgia', serif;
  font-size: 1.2em;
  text-align: center;
  margin: 2em auto;
  position: relative;
  padding: 1em;
  border-left: 4px solid #38bdf8;
}
.phrase p:first-child {
  font-style: italic;
  position: relative;
  padding: 0 1em;
}
.phrase p:first-child::before {
  content: open-quote;
  font-size: 3em;
  position: absolute;
  left: -0.2em;
  top: -0.5em;
  color: #38bdf8; /* Color opcional */
}
/* .phrase p:first-child::after {
  content: close-quote;
  font-size: 3em;
  position: absolute;
  right: .1em;
  bottom: -0.5em;
  color: #38bdf8;
} */
.phrase p:last-child {
  margin-right:1.5rem;
  text-align: end;
  font-size: 0.9em;
  font-style: normal;
  opacity: .8;
}

/*! - - - - - - - - - - - - - - - - - - - - - - - - L O G O   A S O S I A T I O N - - - - - - - - - - - - - - - - - - - - - */
.logo-association{
  display: flex;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: space-around;
  background-color:rgba(2, 16, 23, 0.3);
  border-radius: 8px;
}
.logo-of{
  width: auto;
  margin: 0;
  padding: 10px;
}
.logo-of img{
  width: fit-content;
} 

/*! - - - - - - - - - - - - - - - - - - - - - - - - T O U R   S E C T I O N - - - - - - - - - - - - - - - - - - - - - */





.ban_work_description h2{
  font-style:bold;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

.ban_work_description h2{
  font-style:bold;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}

.ban_work_description h1{
  font-style: italic;
  font-size: 3.5rem;
  margin: 0;
  padding: 0;
}
.ban_work_description p{
  font-style: italic;
  font-size: 1rem;
}
.photo-description {
  max-width: 1200px;
  width: 80%;
  margin:0 auto;
  margin-top:0;
}
.line-ban{
  margin-top:7% ; 
  background-color: #07568260;
  height: 1px;
  margin-bottom:0;
}
.txt-top{
  color:#07568260;
  margin-right:5px;
  font-weight: 900;
}

.gallery{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  display: flex;
  justify-content:space-between;
  
}

.gallery-img{
  width: 30%;
  display: block;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  margin: 10px;
  border-radius: 8px ;
  /*? box-shadow: hsla(0, 0%, 100%, 0.55)  0px 0px 1px 1px; */
  color: #fff;
  height: fit-content;
  aspect-ratio: 	3/4;
  position: relative;
}
.gallery-img img{
  width: auto;
  height: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 8px;
}

.gallery-img img:hover{
  transform: scale(1.01);
  box-shadow: #075682  0px 0px 1px .6px;
}
.section-out{
  width: 80%;
  margin-inline: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
.section-out ul{
    list-style-type:circle; /* Viñetas cuadradas */
}
.section-out ul li::marker{
  color: #075682;
}
.section-out ul li:hover{
  list-style-type:disc;
}

.hd{ /**!- - - - - - - - - - - - - - - - - - - - - - - Boton hacia foto en hd*/
  background-color: #38bdf8;
  text-decoration: none;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  font-weight: bold;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 5px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 1;
}
.hd:hover{
  -webkit-transition: color 200ms ease;
  transition: color 200ms ease;
  box-shadow: #38bdf8  0px 0px 1px 1px;
  background-color: transparent;
  color:#021017;
  text-decoration: none;
  transform: scale(1.02);
}

@media (max-width:767px) { /* todo - - - - - - - - - - - - - - - - - - - - Media Query: 7 6 7 p - - - - - - - - - - - - - - - - - - - - */

  .photo-description{
    width: 85%;
  }

  .line-ban{
    margin-top: 13%;
  }
  .hd{
  font-size: 0.7rem;
  font-weight:700;
  padding: 0;
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  }
  .section-out ul li{
    font-size: .8rem;
    line-height: 1rem;
  }

/*! - - - - - - - - - - - - - - - - - - - - - - - - A B O U T   U S - - - - - - - - - - - - - - - - - - - - - */

.present-mirko{
  -webkit-flex-derection:column;
  flex-direction: column;
}
.img-about-mirko{
  width: 100%;
}

.desc-about-mirko{
  width: 100%;
  margin: 0;
  padding: 0;
  padding-top: 10px;

}
.desc-about-mirko p{
  font-size: 14px;
  line-height:18px;
  
}
.phrase{
  width: 100%;
}
.logo-association{
  -webkit-flex-derection:column;
  flex-direction: column;
}
.logo-of{
  margin-top: 50px;
  width: 35%;
}

      .mirkodiving-logo a img{
        max-width: 90px;
      }
      .menu-button{
        top: -2px;
      }
      
  .contenedor-detalles {
    display: flex;
    overflow-x: auto; /* Hace posible el scroll horizontal */
    width: 60%;
  }
  .detalle {
    margin-right:auto; 
    margin-left: auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
  }
  .detalle img{
    width:120px;	
    height:auto;
    max-width:-webkit-fill-available !important;
  }
  .txt{
    width: 90%;
  }

 

  .images_wrapper{
    margin-top: -6vh;
  }

  .contenedor-detalles::-webkit-scrollbar{
    width: 0px;
    height: 2vh;
    
  }
  .contenedor-detalles::-webkit-scrollbar-track{
    background-color: #021017;
  }
  .contenedor-detalles::-webkit-scrollbar-thumb{
    background-color: #E1E2E3;
    border-radius: 15px;
  }
}

    @media (max-width:425px) { /*todo - - - - - - - - - - - M e d i a   Q u e r y :  4 2 5 p - - - - - - - - */
      .menu-button{
        top: 5px;
      }
    .contenedor-detalles {
      display: block;
      overflow-y: auto; /* Hace posible el scroll horizontal */
      width: 33%;
      height: 200px;
    }

    .detalle {
      margin-right:auto; 
      margin-left: auto;
    }
    .txt{
      text-align: center;
      font-size: 4vh;
    }
  }



.modal {       /*! - - - -  - - - - - - - - - - - - - - - - - -Estilos para la ventana modal  - - - - - - - - - -*/
  display: none;
  position: fixed;
  z-index: 20;
  padding-top: 50px;
  left:0;
  top: 10%;
  width: 100%;
  height: 90%;
  overflow: auto;
  background: linear-gradient(0deg,  rgb(2, 16, 23,.4),rgb(2, 16, 23,.5));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 8px;
}
.modal::-webkit-scrollbar{
  display: none;
}

.modal-contenido {
  margin-inline: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  transition: transform 0.3s ease-out;
  transform-origin: center;
}

#caption { /*texto descripcion*/
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}
.modal .cerrar {
  position: absolute;
  top: 20px;
  right: 15px;
  color: #fff;
  font-size: 50px;
  font-weight: bold;
  transition: 0.3s;
  
}
.cerrar:hover,
.cerrar:focus {
  color: #bbb;
  border-radius: 10px;
  padding: 2px;
  box-shadow: #075682  0px 0px 1px 1px;
  text-decoration: none;
  cursor: pointer;
}


/* - - - -  - - - - - - - - - - - - - - - - - -Estilos para la ventana modal  - - - - - - - - - -*/