@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Merienda:wght@300..900&display=swap');
/*
font-family: "Bona Nova SC", serif;
*/

/*
font-family: "Nunito", sans-serif;
*/

/*
  font-family: "Caveat", cursive;
*/

/*
  font-family: "Dancing Script", cursive;

  font-family: "EB Garamond", serif;

    font-family: "Merienda", cursive;

*/
                    
:root{
    --letras-claras: #e7ffee;
    --letra-dorada: #c29542;
    --header-background:#08424d;

    --global-barckground: #08424d;
    --footer-background: #065180;

    --social-media-color-icons:#333;
    --social-media-hover: #0ce6d4;


}



/* Define el cursor personalizado */

/* a, button{
}
  
  

body, h1, h2, h3, h4, p{
    cursor: default;
    cursor: url('/Assets/Img/Cursors/clicker-del-mouse.png') 16 16, auto;
} */

body, html {
    cursor: url('/Assets/svg/discord.svg') 16 16, auto;
    cursor: default;
}
/* Cursor tipo 'pointer' para elementos interactivos */
a, button, [role="button"], input[type="button"], input[type="submit"], .clickable {
    cursor: url('/Assets/svg/menuIcon.svg') 16 16, pointer;
    cursor: pointer;
}

.unidad .unidad-title {
    cursor: url('/Assets/svg/menuIcon.svg') 16 16, pointer;
    cursor: default;
}
.clases h3{
    cursor: url('/Assets/svg/menuIcon.svg') 16 16, pointer;
    cursor: default;
}


html {

    height: 100%;
}

body {
    /* font-family: "Nunito", sans-serif; */
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: auto;

    text-shadow:  2px 2px 5px rgba(0, 0, 0, 0.8),
    4px 4px 10px rgba(0, 0, 0, 0.5),
    6px 6px 15px rgba(0, 0, 0, 0.3);    
    /*-webkit-text-stroke: 0.8px black; /* Para navegadores basados en WebKit (Safari, Chrome, etc.) */

    background-image: url('/Assets/Img/backgrounds/Desktop/background1Comp406.webp'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen para que cubra toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; 
    /* Fija el fondo al hacer scroll */

}

main{
    flex: 1;
    /* position: relative; */
    min-height: auto;

}

#main-content{
    padding: 0px;
    margin: 0px;
}
#main-content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/*--------------------Header Global------------------*/
.header {
    padding: 1rem 0;
    text-align: center;
}

.header {
    background-image: url('/Assets/Img/backgrounds/Desktop/background1Comp399.webp'); /* Ruta de la imagen */
    background-size: cover; /* Ajusta la imagen para que cubra toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed; 
    /* Fija el fondo al hacer scroll */
}


/*-------Logo del Header -------*/
.logo {
    color: var(--letras-claras);
    text-decoration: none;
    font-family: "Merienda", cursive;;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 0 30px;
}

/*------------Menu-------------*/
.menu {
    display: flex; /* Usar flexbox para la alineación */
    align-items: center; /* Centrar verticalmente */
    justify-content: space-between; /* Distribuir espacio entre los extremos */
    padding: 10px; /* Espaciado interno */
    width: 100dvw;
}


.navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    width: 100%;
}

.navbar ul {
    list-style: none;
    display: flex;
    gap: 0.2rem;
    padding: 0px;
    margin-left: 40px;
}
.navbar-login ul{
    margin-left: 0px;
    margin-right: 33px;
}

.navbar ul li a {
    color: var(--letras-claras);
    text-decoration: none;
    font-family: "EB Garamond", serif;
    font-size: 2rem;
    margin: 5px;
}

.navbar ul li a:hover{
    color: var(--letra-dorada);
}


/* Estilos para el menú del navbar (pantallas grandes) */
.navbar-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    width: 100%;
}

.navbar-menu ul{
    gap: 2rem;
    padding: 0px;
    margin:  0px;
}

.navbar-menu li {
    list-style: none;
}

.navbar-menu li a {
    text-decoration: none;
    color: #800;
    padding: 8px;
}



.user-section {
    margin-left: 20px; /* Espaciado a la izquierda de la sección de usuario */
}




/*-----------------------Menu responsivo-----------------------*/

/* Estilos para el botón de menú */
.menu-icon {
    display: none;
    /* /*cursor: pointer*/; */
    /* flex-direction: column; */
    /* gap: 5px; */
}




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


/*------------------------ Menu de Navegacion ------------*/
#menu:checked ~ .navbar {
    display: block; /* Asegura que el menú se muestre al hacer click */

}

#menu-toggle {
    display: none;
    width: auto;
    padding: 0 18px;
}



/* Ícono del menú solo visible en pantallas pequeñas */
.menu-icon {
    display: none;
    /*cursor: pointer*/;
}

/* Estilos del menú desplegable */
.hidden{
    display: none;
}


/* Cuando el menú está activo */
.menu-active {
    left: 0; /* El menú desplegable aparece desde la izquierda */
}



/*--------------- Menu --- User Logind-----------------*/
.user-section{
    display: flex;
    align-items: center;
}

.drop-down-menu{
    display: none;
}
.drop-down-user-section  {
    display: none;
}

.login-link{
    color: var(--letras-claras);
    text-decoration: none;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    margin-left: auto;
    white-space: nowrap;
    margin-right: 50px;
}
.login-container{
    display: flex;
    /* align-items: left ; */
    gap: 8px; /* Espaciado entre texto e imagen */
}

.login-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Espacio entre texto e imagen */
    width: 80%; /* Hace que el enlace ocupe todo el ancho disponible */
    padding: 0px; /* Asegura que haya una zona de toque adecuada */
    margin: 0px;
    font-size: 1.7rem;
}

.login-link i{
    margin-right: 5px;
}

.login-link:hover{
    color: var(--letra-dorada);
}

.user-icon{
    width:  50px;
    height: 50px;
    margin-right: 5px;
}


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

.header-content {
    position: relative;
    text-align: center;
    padding: 0px 0; /* Reducir altura del header */
}

.header-txt h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.header-txt p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}


#carrito {
    width: 40px; /* Ajusta el ancho según tus necesidades */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-right: 20px; /* Espacio a la derecha si es necesario */
}





body{
    font-family: "Merienda", cursive;
    color: #e7ffee;
}

/*------------SECTION---------------*/

section {
    padding: 30px 0;
    width: 100%;
    margin: 0;
}


section h2 {
    text-align: center;
    font-size: 2rem;
}

section p {
    text-align: center;
    font-size: 1.2rem;
}


/* Contenedor de las imágenes */
.img-header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}


.img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* position: relative;
    margin-top: 70px; */

}

#logo {
    width: 50dvw; /* Ajusta el tamaño de la imagen de las cartas */
    min-width: 300px;
    max-width: 700px;
    /* height: auto; */
    border-radius: 30px;}
    

#img-book{
    /* position: relative; */
    max-height: 600px;
    max-width: 800px;
    width: 70%;
    border-radius: 50px;
    opacity: 0.9;
    /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
}


/*-------------- Header Cont / Escuela Estelar------------------*/
#Header-container {
    background: url('/Assets/Img/backgrounds/Desktop/background1Comp399.webp') no-repeat center center fixed;
    background-size: cover;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
}



.header-content {
    /* display: flex;
    flex-direction: column;
    align-items: center; */
    max-height: 1200px;
}

.header-txt{
    color: var(--academia-estelar-text);
    max-height: 700px;
    padding: 5px;
    /* width: 100dvw; */
}
.Title-txt{
    display: flex;
    justify-content: center;
    align-items: center;
}

#Header-container .Title-txt h1{
    font-size: 4.5rem;
    padding: 5px;
    margin:  5px;
}

#Header-container .sub-tittle p{
    font-size: 1.7rem;
    margin-top: 0px;
    margin-bottom: 0px;
    /* font-family: "Merienda", cursive; */
    /* position: relative; */
    /* top: var(--top-escuelaEstelar-p); */

}

/* Contenedor de las imágenes */
.img-header-container {
    justify-content: center;
    align-items: center;
    /* position: relative; */
}

.img-container{
    justify-content: center;
    align-items: center;
}


.life-seed {
    /* position: relative; */
    width: 140px; /* Ajusta el tamaño de las imágenes según sea necesario */
    /* height: auto; */
}


.img-life-seed {
    margin: 0 3dvw; /* Espacio entre las semillas de la vida y el texto */
}



/*-----------------Redes Sociales--------------------*/

#social-media, footer{
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: 1.8rem;
    padding: 0.6rem 0px;
}
#social-media {
    background-image: url(/Assets/Img/backgrounds/Desktop/backgroundSocialMediaComp200.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#social-media .icons {
    display: flex;
    justify-content: center; /* Alinear al centro horizontalmente */
    align-items: center;
}


#social-media .icons i {
    color: var(--social-media-color-icons); /* Color de los íconos */
    font-size: 1.5rem; /* Tamaño de fuente */
    margin: 0 10px; /* Espacio entre los íconos */
    /*cursor: pointer*/;
}

#social-media .icons img {
    color: var(--social-media-color-icons); /* Color de los íconos */
    width: 30px;
    /*cursor: pointer*/;
}

#social-media .icons i:hover{
    color: var(--social-media-hover);
}

#social-media .icons img:hover{
    color: var(--social-media-hover);
}

/*--------------------------------------FOOTER------------------------------------*/


footer {
    background-image: url('/Assets/Img/backgrounds/Desktop/backgroundb3Comp266.webp'); /* Ruta de la imagen */
    /* position: relative; */
    width: 100%;
    bottom: 0;
    margin: 0;
}

.footer-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* Centrar el contenido */
}

footer p {
    margin: 0;
    text-align: center; /* Asegurar que el texto esté centrado */
    color: var(--letra-dorada); /* Color del texto */
    font-family: "Merienda", cursive;;
    font-size: 0.9rem; /* Tamaño de fuente */
}



/*-----------------Pagina de carga----------------*/
#loading-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
    z-index: 9999; /* Asegura que esté sobre todo el contenido */
    display: flex;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    font-family: "Nunito", sans-serif;
}

/* Ocultar el spinner cuando la página carga */
.loaded #loading-screen {
    display: none;
}

.loaded #main-content {
    opacity: 1;
}



/* From Uiverse.io by xXJollyHAKERXx */ 
.spinner {
    background-image: linear-gradient(rgb(206, 29, 255) 35%,rgb(0, 225, 255));
    width: 100px;
    height: 100px;
    animation: spinning82341 1.7s linear infinite;
    text-align: center;
    border-radius: 50px;
    filter: blur(1px);
    box-shadow: 0px -5px 20px 0px rgb(206, 29, 255), 0px 5px 20px 0px rgb(0, 225, 255);
  }
  
  .spinner1 {
    background-color: rgb(36, 36, 36);
    width: 100px;
    height: 100px;
    border-radius: 50px;
    filter: blur(10px);
  }
  
  @keyframes spinning82341 {
    to {
      transform: rotate(360deg);
    }
  }

  @media (min-width:1450px) and (max-height:920px) {
    .life-seed{width: 111px;}
  #Header-container .Title-txt h1 {
    font-size: 4rem;
    }
    .header {
        padding: 0.1rem;
    }
}

@media (min-width:1900) and (max-height:1100px) {
    main{
        min-height: 75dvh;
    }
}

@media (min-width:2000px) and (min-height:1100px){

    .navbar ul li a {
        font-size: 2.2rem;
    }
    
    #Header-container .Title-txt h1{
    font-size: 5.5rem;
    }
    .life-seed{width: 155px;}
 
    #Header-container .sub-tittle p{
        font-size: 2rem;
    }
    

    footer{
        height: 27px;
    }
    #social-media{
        height: 27px;
    }
    #social-media .icons i{
        font-size: 2.2rem;
    }
    footer p{
        font-size: 1.5rem;
    }


}

@media (max-width:1600px) and (min-width: 1100px) and (max-height:800px){
    #Header-container .Title-txt h1 {
        font-size: 4rem;
    }
    .life-seed{width: 120px}

    #Header-container{
        padding-top: 0px;
    }
}

@media (min-width:1700px){
    #Header-container .Title-txt h1 {
        font-size: 4.5rem;
    }
}
    
@media (max-width:1360px) {

    #tittle h1{
        font-size: calc(4.5rem * 0.8);
    }

    .life-seed{
        width: 120px;
        font-size: 3.5rem;
    }
}

/* Mostrar el ícono de menú en pantallas pequeñas */
@media (max-width: 1366px) {
    .user-section{
        display: none;
    }
     #menu-toggle{
        display: flex;
     }
    .menu{
        position: relative;
    }
    .menu-icon {
        display: flex;
        align-items: center;
    }
    .menu-icon img{
        width: 40px;
        padding: 0 30px;
    }
    
    .navbar-menu{
        display: none;
    }
    .navbar{
        display: none;
    }


    .drop-down-menu {
        display: block;
        position: fixed; /* Posicionamiento absoluto */
        top: 0; /* Alineado en la parte superior */
        left : 0; /* Alineado a la derecha */
        width: 75dvw; /* Ancho del menú */
        height: 100dvh; /* Altura del menú igual a la altura de la ventana */
        background-image: url('/Assets/Img/backgrounds/Desktop/background2Comp320.webp'); /* Ruta de la imagen de fondo */
        background-size: cover; /* Asegura que la imagen cubra todo el div */
        background-position: center; /* Centra la imagen de fondo */
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2); /* Sombra para dar efecto de profundidad */
        transform: translateX(-100%); /* Comienza fuera de la vista (desplazado a la derecha) */
        transition: transform 1.8s ease, opacity 1s ease; /* Transición suave */
        z-index: 1000; /* Asegúrate de que esté por encima de otros elementos */
    }
    
    /* Mostrar el menú cuando no está oculto */
    .drop-down-menu:not(.hidden) {
        transform: translateX(0); /* Mueve el menú a su posición original */
    }


        /* Estilos para el menú desplegable */
    .drop-down-menu li {
        list-style: none; /* Elimina los puntos de la lista */
        padding: 0; /* Elimina el padding por defecto */
        margin: 0; /* Elimina el margen por defecto */
    }

    /* Estilos para los elementos de la lista */
    .drop-down-menu li {
        padding: 15px 20px; /* Espaciado interno para cada item del menú */
        text-align: left; /* Alineación del texto a la izquierda */
        border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea divisoria entre items */
        transition: background-color 0.3s; /* Transición suave para el hover */
    }

    .drop-down-menu li:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Cambia el color de fondo al pasar el ratón */
    }

    /* Estilo para los enlaces dentro de li */
    .drop-down-menu li a {
        text-decoration: none; /* Elimina el subrayado del texto */
        color: #fff; /* Color del texto (puedes cambiarlo según tu diseño) */
        display: block; /* Hace que el área clickeable cubra todo el li */
        font-size: 1.2rem;
        margin: 0px;
    }


    .drop-down-user-section img {
        margin-right: 10px; /* Espaciado entre el icono y el texto */
        height: 20px; /* Ajusta el tamaño del icono según lo necesites */
        width: 20px; /* Ajusta el tamaño del icono según lo necesites */
    }

    .drop-down-menu  #logoDrop {
        font-size: 1.8rem;
        font-family: "Merienda", cursive;;
        font-weight: bold;
        margin-left: 0px;
    }


/* Hacer que el logo ocupe el 60dvw */
.drop-down-menu li:first-child {
    width: 60dvw; /* Ocupa el 60% del ancho del menú */
}

/* Ajustar el enlace del logo para que ocupe todo el 60dvw */
.drop-down-menu li:first-child a {
    display: block; /* Hace que el área clickeable ocupe todo el li */
    width: 100%; /* Asegura que el enlace ocupe todo el ancho del li */
}

/* El resto de los elementos del menú ocuparán el espacio restante */
.drop-down-menu li {
    padding: 15px 20px; /* Ajustes de padding para los demás elementos */
    text-align: left; /* Alineación de texto de los otros elementos */
}


    #social-media{
        padding-top: 15px;
        padding-bottom: 15px;
        height: 25px;
    }

    #social-media .icons i{
        font-size: 1.5rem;
    }

    footer p {
        font-size: 13px;
    }
}


@media (max-width:1000px) {

    /* body{
        background-attachment: scroll; 
    }
    .header{
        background-attachment: scroll; 

    }
    footer{
        background-attachment: scroll; 

    } */

}

/* Mostrar el menú desplegable cuando está abierto */
.small-screen-menu.open {
    transform: translateX(20);
}

@media (max-width:1100px) and (min-height: 700px) {
    footer p {
        font-size: 17px;
    }
}



/* Verticales */
/* Ipad Pro */
@media (max-width:1100px) and (max-height: 1400px) and (min-width:900px) and (min-height:1200px){
    main{
        min-height: 77.8dvh;
    }
    .menu{
        padding: 20px;
    }
    #Header-container {
        margin-top: 45px;
    }

    #Header-container .Title-txt h1{
        font-size: 4.4rem;
        padding: 5px;
        margin:  5px 20px;
    }
    #Header-container .sub-tittle p{
        font-size: 2rem;
    }

    .life-seed{
        width: 140px;
    }

    .menu-icon{
        width: 85px;
    }
    .logo{
        font-size: 3.4rem;
    }

    .drop-down-menu #logoDrop{
        font-size: 2.5rem;
    }
    .drop-down-menu li a{
        font-size: 1.8rem;
    }

    footer p {
        font-size: 18px;
    }

    #social-media .icons i{
        font-size: 2rem;
    }


    footer p {
        font-size: 25px;
    }
}

/* Ipad Mini */
@media (max-width: 800px) and (max-height: 1100px) and (min-width: 600px) and (min-height: 750px){
    main{
        min-height: 68.6dvh;
    }
    #Header-container .Title-txt h1{
        font-size: 3.2rem;
    }
    #Header-container .Title-txt p{
        font-size: 1.5rem;
    }
    footer p{
        font-size: 20px;
    }
    .life-seed{
        width: 85px;
    }
    .img-life-seed {
        margin: 0dvw 3dvw;
    }

    .form-container h1{
        font-size: 2.2rem;
    }
    .form-container p{
        font-size: 1.1rem;
    }
    .form-container a{
        font-size: 1.1rem;
    }
    .form-container button{
        font-size: 1rem;
    }
}


/* Ipad Air */
@media (max-width: 850px) and (max-height: 1250px) and (min-width: 600px) and (min-height: 1000px){
    main{
        min-height: 79.5dvh;
    }
    .menu{
        padding: 20px;
    }
    #Header-container .Title-txt h1{
        font-size: 3.6rem;
        padding: 5px;
        margin:  5px 20px;
    }
    #Header-container .sub-tittle p{
        font-size: 1.4rem;
    }
    .life-seed {
        width: 100px;
    }


    .drop-down-menu #logoDrop{
        font-size: 2.4rem;
    }
    .drop-down-menu li a{
        font-size: 1.5rem;
    }
    .user-icon {
        width: 50px;
        height: 56px;
        position: fixed;
        left: 200px;
        top: 520px;
    }


    .menu-icon{
        width: 70px;
    }
    .logo{
        font-size: 2.5rem;
    }


    #social-media .icons i{
        font-size: 1.7rem;
    }
    footer p {
        font-size: 1.2rem;
    }
}



/* Horizontales */

/* Ipad Pro Horizontal */
@media (min-width:1300px) and (max-width:1400px) and (min-height: 1000px) and (max-height:1300px){
    main{
        min-height: 68.9dvh;
    }
    .drop-down-menu{
        width: 57dvw;
    }

    .menu-icon{
        width: 85px;
    }
    .logo{
        font-size: 3.4rem;
    }

    .drop-down-menu #logoDrop{
        font-size: 2.5rem;
    }
    .drop-down-menu li a{
        font-size: 1.6rem;
    }


    #Header-container .Title-txt h1{
        font-size: 4.2rem;
    }

    .life-seed{
        width: 150px;
    }
    .img-life-seed{
        margin: 0px 4dvw;
    }

    #user-profile a{
        font-size: 2.2rem;
    }

    .user-icon{
        width: 40px;
        height: 40px;
    }

    .navbar ul li a {
        font-size: 2.2rem;
    }

    footer p {
        font-size: 1.3rem;
    }

    #social-media .icons i{
        font-size: 2.2rem;
    }

    #Header-container .header-txt p{
        font-size: 2rem;
    }




}

/* Ipad Air Horinztal */
@media (max-width:1200px) and (max-height: 850px) and (min-width:600px){
    main{min-height: 68.1dvh;}
    .drop-down-menu{
        width: 57dvw;
    }


    .menu-icon{
        width: 70px;
    }
    .logo{
        font-size: 2.4rem;
    }

    .drop-down-menu #logoDrop{
        font-size: 2.2rem;
    }
    .drop-down-menu li a{
        font-size: 1.7rem;
    }


    footer p{
        font-size: 20px;
    }


}

/* Ipad Mini Horzinontal */
@media (max-width:1100px) and (max-height: 800px) and (min-width:600px){
    main{min-height: 71.1dvh;}
    .drop-down-menu{
        width: 57dvw;
    }


       #Header-container {
        margin-top: 0px;
    } 

    .form-container h1{
        margin-top: 20px;
        margin-bottom: 30px;
    }   
}



/* Mostrar el ícono de menú en pantallas pequeñas */
@media (max-width: 530px) {

    .spinner {
    width:  66px;
    height: 66px;

  }
  
  .spinner1 {
    width: 66px;
    height:66px;

  }

    .logo{
        font-size: calc(2rem*0.7);
        margin-left: 30px;
    }

    .login-link{
        font-size: 1.1rem;
        margin-right: 30px;
        }

    .user-icon{
        width: 25px;
        height:25px;
        margin-right: 5px;
    }

    .menu-icon {
        display: flex;
        align-items: center;
        width: 55px;
    }
    
    .navbar ul{
        display: none;
    }

    #social-media{
        padding-top: 12px;
        padding-bottom: 12px;
        height: 20px;
    }

    #social-media .icons i{
        font-size: 1.4rem;
    }

    footer p {
        font-size: 0.95rem;
    }
}


/* Apple device */
@media screen and (min-device-width: 320px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    .header{
        padding: 0rem;
    }
    body{
    background-image: url(/Assets/Img/backgrounds/Movil/background1Comp390.webp);
    background-attachment: scroll !important; /* o 'unset' o lo que necesites */
    background-size: cover;
    height: auto;
    }
    .header{
    background-image: none;
    background-attachment: scroll !important; /* o 'unset' o lo que necesites */
    background-size: cover;
    }

    #social-media{
        background-image: url('/Assets/Img/backgrounds/Movil/backgroundSocialMediaComp105.webp');
    }
    footer{
    background-image: url('/Assets/Img/backgrounds/Movil/backgroundb3Comp150.webp');
    background-attachment: scroll !important;
    background-size: cover;
    }

}


/* Iphone 14 Pro Max */
@media (max-width: 500px) {
    .header{
        padding: 0rem;
    }
    main{
        min-height: 77.8dvh;
    }
    #Header-container .Title-txt h1{
        font-size: 2.5rem;
        margin: 0px;
        padding: 0px;
    }
    #Header-container .header-txt p{
        font-size: 1.1rem;
        margin: 10px 15px;
    }

    .img-life-seed {
        margin: 0 20px; /* Espacio entre las semillas de la vida y el texto */
    }
    .life-seed {
        width: 3.5rem;
    }


    .logo {
        font-size: 2rem;
        margin-left: 0px;
        padding: 10px;
    }
    .drop-down-menu #logoDrop {
        font-size: 1.5rem;
    }

    .drop-down-menu #logoDrop {
        font-size: 1.6rem;
    }
    .drop-down-menu li a {
        font-size: 1.1rem;
    }
}

/* Iphone XR */
@media (max-width: 414px) {
    main{
        min-height: 68.6dvh;
    }

    #Header-container{
        padding: 10px 0px;
    }

    #Header-container .Title-txt h1{
        font-size: 2.5rem;
        padding: 0px;
        margin: 0px;
    }
    .life-seed {
        width: 3.4rem; /* Ajusta el tamaño de las imágenes según sea necesario */
    }

    #Header-container .header-txt p{
        font-size: 1.1rem;
        margin: 5px 0px;
    }

    #menu-toggle{
        padding: 0px 15px;
    }

    .drop-down-menu #logoDrop {
        font-size: 1.5rem;
    }
    .drop-down-menu li a {
        font-size: 1rem;
    }
}

@media (max-width:412px) {
    .life-seed{
        width: 3.5rem;
    }
    
}


/* Iphone 12 Pro Max */
@media (max-width: 390px) {
    main{
        min-height: 68.3dvh;
    }
    #Header-container .Title-txt h1{
        font-size: 2.3rem;
        margin: 0px;
        padding: 0px;
    }
    #Header-container .header-txt p{font-size: 1.05rem;}

    .life-seed {
        width: 3.3rem;
    }

    #menu-toggle{
        padding: 0px 15px;
    }

}

/* Iphone SE */
@media (max-width: 375px) {

    .logo{
        font-size: 1.8rem;
    }
    main{
        min-height: 69dvh;
    }
    
    #Header-container{
        padding: 0px 0px;
    }

    #Header-container .Title-txt h1{
        font-size: 2.3rem;
        margin: 0px;
        padding: 0px;
    }
    #Header-container .header-txt p{
        font-size: 1.05rem;
        padding: 0px 10px;
    }
    .life-seed {
        width: 60px;
    }

    .menu-icon {
        width: 46px;
    }
    .drop-down-menu #logoDrop {
        font-size: 1.5rem;
    }
    .drop-down-menu li a {
        font-size: 1rem;
    }



    footer p {
        font-size: 0.85rem;
    }

}



@media (max-width: 360px) {

    #Header-container .Title-txt h1{
        font-size: 2.2rem;
    }
    .life-seed{
        width: 3rem;
    }

}

@media (max-width: 344px) {
    
    .header-content {
        max-height: 50dvh;
    }


    #Header-container .Title-txt h1{
        font-size: 1.7rem;
    }
    .life-seed {
        width: 48px; /* Ajusta el tamaño de las imágenes según sea necesario */
    }

    #Header-container .header-txt p{
        font-size: 1rem;
    }
}

/* Z Fold */
@media (max-width: 344px) and (min-height:870px){
    #Header-container{
        padding-top: 20px;
    }
    #Header-container .Title-txt h1{
        font-size: 2rem;
    }
    .life-seed {
        width: 55x;
    }

    footer p{
        font-size: 0.85rem;
    }
}