body,
 html {
     margin: 0;
     padding: 0;
     background-color: white;
 }

 section {
     margin: 0;
     padding: 0;
     background-color: white;
 }

 /* Estilo del header */
 header {
     background: rgb(218,218,216);
     height: 120vh;
     position: relative;
     overflow: hidden;
     box-shadow: 0px 3px gray;
 }

 /*Estilos del top header y del menu*/
#topheader{
    position: fixed;
    width: 100%;
    height: auto;
    background-color: rgba(218,218,216, 0.9);
    top: 0px;
    left: 0px;
    z-index: 1;
}

header .content {
     position: relative;
     color: black;
     text-align: center;
     top: 40%;
     transform: translateY(-50%);
 }

 header h1 {
     font-size: calc(2.5rem + 3vw); /* Escala dinámica */
 }

 header h2 {
     font-size: calc(1rem + 1.5vw);
 }

 header p {
     font-size: calc(0.7rem + 1.2vw);
 }

 /* Logo */
 header .logo {
     width: calc(50% + 5vw); /* Escala dinámica para el ancho */
     height: auto; /* Ajusta la altura automáticamente según el ancho */
     max-width: 600px; /* Tamaño máximo para mantener proporción */
     object-fit: contain; /* Asegurar que el logo mantenga proporción */
     border-radius: 40%; /*Mejorar el borde del logo*/
 }


 /*Estilos para el cambio de imagenes*/
 #photoSlider .carousel-inner img {
     height: 80vh; /* Ajustar la altura de las imágenes del slider */
     object-fit: cover; /* Asegurar que las imágenes conserven proporciones */
 }

 #photoSlider .carousel-control-prev,
 #photoSlider .carousel-control-next {
     background-color: rgba(255, 255, 255, 0.2); /* Fondo semi-transparente */
     border: none; /* Sin borde */
     transition: background-color 0.3s ease; /* Transición suave para el fondo */
 }
 
 #photoSlider .carousel-control-prev-icon,
 #photoSlider .carousel-control-next-icon {
     background-color: transparent; /* Sin fondo para el icono */
     width: 40px; /* Aumentar el tamaño del icono */
     height: 40px; /* Aumentar el tamaño del icono */
     background-size: 40px 40px; /* Asegurar que el icono se ajuste */
 }
 
 #photoSlider .carousel-control-prev:hover,
 #photoSlider .carousel-control-next:hover {
     background-color: rgba(255, 255, 255, 0.5); /* Fondo más claro al pasar el mouse */
     backdrop-filter: blur(5px); /* Efecto de desenfoque en el fondo */
 }

 
 
 /*Seccion de organizaciones*/
#organizador{
     width: 100%;
     height: 85vh;
     max-height: 100%;
}

 /* Estilos para la sección de organizaciones */
 #organizaciones {
     background-color: white;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center; /* Centra horizontalmente */
     text-align: center; /* Centra el texto */
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
     height: 80vh;
 }

 #organizaciones img {
     max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
     height: auto; /* Mantiene la proporción de la imagen */
 }

 #organizaciones .calendario {
     max-width: 100%; /* Mantiene la proporción de la imagen */
     width: 80%; /* Tamaño cuadrado */
     height: 90%; /* Tamaño cuadrado */
     margin-bottom: 20px; /* Espacio entre las imágenes */
 }

 #organizaciones .org_texto{
     color: black;
     width: 50%;
     height: auto;
     line-height: 50%;
 }

 #organizaciones .org_texto img{
    width: 12vh;
    height: auto;
 }


 #organizaciones .org_calendario{
     width: 50%;
     height:50vh;
 }
 #organizaciones h1 {
     font-size: calc(1.5rem + 1.5vw); /* Tamaño de fuente para el título */
     margin-top: 20px;
     margin-bottom: 50px;
 }

 #organizaciones .patrocinadores {
     width: 80%; /* Ancho de la imagen de patrocinadores */
     max-width: 600px; /* Ancho máximo */
     height: auto; /* Mantiene la proporción */
 }

 #organizaciones .org_direccion{
    display: flex;
    flex-direction: row;
    align-items: center;
 }

 #organizaciones .org_direccion img{
    width: 12vh;
    height: auto;
 }

 #organizaciones .org_direccion h1{
    margin-top: 50px;
    font-size: calc(1.2rem + 1vw); /* Escala dinámica */
 }

 /* Footer */
 footer {
     background: #333;
     color: white;
     padding: 20px 0;
 }

 .container {
     display: flex;/* Utiliza flexbox para el layout */
     justify-content: space-around;/* Espacia los elementos a los lados */
     align-items: center;/* Alinea verticalmente los elementos */
     max-width: 1200px;/* Ancho máximo del contenedor */
     margin: 0 auto;/* Centra el contenedor */
     margin-bottom: 30px;
 }

 .social-media {
     text-align: center; /* Alinea el texto de las redes sociales a la izquierda */
 }

 .social-media h1 {
     margin-bottom: 30px;
 }

 .social-icons {
     display: flex; /* Utiliza flexbox para los iconos */
     justify-content: center;/* Alinea los iconos a la izquierda */
     flex-wrap: wrap;/* Permite que los iconos se envuelvan */
     margin-bottom: 20px;
 }

 .social-icons a {
     color: white;
     margin: 0 10px;
     font-size: 1.5rem;
 }

 .instagram-logo {
     width: 150px;/* Ajusta el tamaño de la imagen de Instagram */
     height: auto;
 }

 .map {
     text-align: center;
     display: flex;/* Asegura que el mapa se centre */
     justify-content: center;
     flex-direction: column;/* Alinea el mapa a la derecha */
     width: 100%;
     height: auto;/* Asegúrate de que el mapa ocupe el ancho completo */
 }

 .map-container {
     width: 100%;
     height: auto;
 }

 #ubicacion {
     background-color: #f5f5f5;
 }

 footer .copyrigth {
     width: 100%;
     height: 40px;
     padding-bottom: 0%;
     margin-bottom: 0%;
 }

 footer .copyrigth p {
     padding-top: 50px;
     text-align: center;
 }
 
 /* Media Queries para dispositivos móviles */
 @media (max-width: 900px) {
     

     /*header navigation*/
     header{
        max-height: 650px;
        border-bottom: 30px;
     }

     #topheader{
        display: none;
    }


     header nav {
     	display: none;
     }
     .container {
         flex-direction: column;
         /* Cambia a columna en pantallas pequeñas */
         align-items: center;
         /* Alinea los elementos al centro */
     }

     /*diseños de estilos para organizaciones*/
     #organizador{
        width: 100%;
        height: 85vh;
        max-height: 100%;
   }

     .social-media {
         margin-bottom: 20px;
         /* Espacio entre redes sociales y mapa */
         text-align: center;
         /* Centra el texto en móviles */
     }

     .social-icons {
         display: flex;
         /* Utiliza flexbox para los iconos */
         justify-content: center;
         /* Centra los iconos */
         flex-wrap: wrap;
         /* Permite que los iconos se envuelvan */
     }

     .social-icons a {
         color: white;
         margin: 0 10px;
         /* Espacio entre los iconos */
         font-size: 1.5rem;
         /* Tamaño de los iconos */
     }

     .instagram-logo {
         width: 100px;
         /* Ajusta el tamaño de la imagen de Instagram */
         height: auto;
     }

     .map {
         width: 100%;
         height: 400px;
         /* Asegura que el mapa ocupe el ancho completo */
     }

     .map-container {
         text-align: center;
         /* Centra el iframe dentro del contenedor */
         width: 100%;
         height: 400px;
         /* Asegura que el contenedor ocupe el ancho completo */
     }

     .map iframe {
         max-width: 100%;
         /* Asegura que el iframe no exceda el ancho del contenedor */
         height: 400px;
         /* Mantiene la proporción del iframe */
     }

     footer .copyrigth {
         width: 100%;
         height: 40px;
     }

     footer .copyrigth p {
         padding-top: 50px;
         text-align: center;
     }
 }