body {
    background-color: white;
    color: #333;
    font-family: "Montserrat", sans-serif;
    font-style: normal;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
ul,
li,
a {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

.menu-btn {
    display: none; /* Ocultar el botón por defecto */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 20001;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}

.sidebar {
    display: none; /* Ocultar la barra lateral por defecto */
}
.navbar2{
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 1px;
    background-color: white; /*Cambia según el diseño */
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 20000;
}
.Logo2{
    margin-left: 20px;
    margin-right: 50px;
}

.logo-img2{
    width: 150px;
}

.donar-btn2{
    flex-grow: 1;  /* Hace que el botón ocupe espacio disponible */
    display: flex;
    justify-content: center; /* Alinea el botón a la izquierda */
    margin-left: 20px;
}
.donar-btn2 a.btn {
    background-color: #0049ac;
    color: white;
    font-weight: bold;
    padding: 10px 5vw; /* Hace que el botón se adapte al ancho de la pantalla */
    border-radius: 20px;
    transition: background-color 0.3s ease;
    text-align: center;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

.donar-btn2 a.btn:hover{
    
    background-color: #0c65e0;
}

/*Estilos de la barra de navegación*/
.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 1px;
    background-color: white; /*Cambia según el diseño */
    position: fixed;
    width: 100%;
    height: 50px;
    z-index: 20000;
}

.Logo{
    margin-left: 20px;
}
.nav-links {
    margin-left: 30px;
    display: flex;
    gap: 40px;
}
.nav-links li a {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
    padding: 10px 20px;
    transition: color 0.3s ease;
}
.nav-links li a:hover {
    color: #0049ac;
    border-bottom: 4px solid #0049ac;
}

.logo-img{
    width: 150px;
}
.donar-btn a.btn {
    background-color: #0049ac;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    margin-left: 40px;
}

.donar-btn a.btn:hover{
    transform: scale(0.2);
    background-color: #0c65e0;
}

/*Estilos del hero*/

.hero {
    background-color: #0049ac;
    grid-area: hero;
    color: white;
    text-align: center;
    padding: 60px 20px;
}

.hero-content h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    margin-top: 70px;
    
}

.hero-content p {
    font-size: 1.2em;
}



/*Estilos de la seccion main*/

body main {
    grid-area: main;
    margin: 60px 40px;
    margin-right: 800px;
}

/*Estilos de la seccion mision*/

.mision {
    grid-area: mision;
    text-align: center;
    margin: 0px 20px;
}

.mision p {
    margin: 20px 80px;
}

/*Estilos de la seccion vision*/

.vision {
    grid-area: vision;
    text-align: center;
    margin: 20px 20px;
}

/*Nuestro propósito es brindar motivación y confianza a jóvenes que enfrentan dificultades, ayudándolos a descubrir su valía y potencial. Queremos ser el apoyo que necesitan para superar obstáculos, alcanzar sus metas y convertirse en líderes que transformen positivamente su entorno.
*/
/*Estilos de la seccion valores*/

.valores {
    grid-area: valores;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    max-width: 1200px;
}

.valores h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

.contenedor-valores ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.valor {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.valor:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.valor h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 10px;
}

.valor p {
    font-size: 1em;
    color: #666;
    line-height: 1.5;
}

/*Estilos de seccion equipo*/
.equipo {
    grid-area: equipo;
}

.equipo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    text-align: center;
}

.equipo-grid img {
    width: 100%;
    max-width: 150px;
    border-radius: 50%;
}

.equipo-grid h3 {
    margin: 10px 0 5px;
}




/*Estilos del footer*/

footer {
    grid-area: footer;
    height: 460px;
    background-color: #051d40;
    color: white;
}

.footer-contenedor {
    padding: 30px 40px;
}

.footer-cuadricula {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    align-items: center;
    align-content: center;
}

.footer-cuadricula div {
    /*border: 3px solid red;*/
    align-items: center;
    align-content: center;
    color: white;
    text-align: center;
}

.footer-cuadricula-item3 a {
    color: white;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    letter-spacing: 0.8px;
}

.enlaces-footer {
    text-decoration: none;
    color: white;
}

.footer-cuadricula-item4 {
    text-align: center;
    color: white;
}

.footer-cuadricula-item4 {
    margin-bottom: 10px;
}

.social-icons {
    display: flex;
    gap: 15px;
    /* Espacio entre los íconos */
    padding-left: 80px;
}

.social-icons .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    color: #333;
    font-size: 24px;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.social-icons .icon:hover {
    transform: translateY(-10px);
    /* Hace que "salte" hacia arriba */
    background-color: #004aac;
    /* Cambia el color de fondo a rojo */
    color: #fff;
    /* Cambia el color del ícono a blanco */
}

hr {
    border: 1px solid white;
    margin: 20px 10px;
}

footer p {
    margin-left: 10px;
}

@media (min-width: 769px) and (max-width: 1024px) {
    .menu-btn{
     display: block;
    }

     .sidebar {
         display: block; 
     }

     .navbar{
         display: none;
     }

    .navbar2{
     display: flex;
    }

    .sidebar {
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 250px;
     height: 100%;
     background-color: white;
     z-index: 20000;
     padding: 20px;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
     transform: translateX(-100%);
     transition: transform 0.3s ease;
 }

 .menu-btn.active{
     color: #333;
 }
 .sidebar.active {
     transform: translateX(0);
 }

 .sidebar .close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 24px;
     cursor: pointer;
 }

 .sidebar ul {
     margin-top: 50px;
     list-style: none;
     padding: 0;
 }

 .sidebar ul li {
     margin: 20px 0;
 }

 .sidebar ul li a {
     color: #333;
     text-decoration: none;
     font-size: 18px;
     font-weight: 500;
 }
 }

 @media (max-width: 768px) {
    body{
        grid-template-areas: none;
        display: flex;
        flex-direction: column;
    }
     .navbar {
         display: none;
     }

        .navbar2{
            display: flex;
        }

     .menu-btn {
         display: block; /* Mostrar el botón en pantallas pequeñas */
     }



     .sidebar {
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         width: 250px;
         height: 100%;
         background-color: white;
         z-index: 20000;
         padding: 20px;
         box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
         transform: translateX(-100%);
         transition: transform 0.3s ease;
     }

     .menu-btn.active{
         color: #333;
     }
     .sidebar.active {
         transform: translateX(0);
     }

     .sidebar .close-btn {
         position: absolute;
         top: 10px;
         right: 10px;
         font-size: 24px;
         cursor: pointer;
     }

     .sidebar ul {
         margin-top: 50px;
         list-style: none;
         padding: 0;
     }

     .sidebar ul li {
         margin: 20px 0;
     }

     .sidebar ul li a {
         color: #333;
         text-decoration: none;
         font-size: 18px;
         font-weight: 500;
     }

     .contenedor-texto{
         margin-bottom: 50px
     }
     /*Estilos de la seccion impacto*/

     .impacto{
         height: 1000px;
     }
     .contenedor-impacto{
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         margin-top: 60px;
         margin-bottom: 200px;
     }

     /*Estilos del footer*/

     footer{
         height: 700px;
     }
     .footer-cuadricula{
         display: flex;
         flex-direction: column;
         
     }

     .social-icons{
         display: flex;
         justify-content: center;
         align-items: center;
         margin-top: 20px;
         text-align: center;
         padding-left: 0px;

     }
     
 }