@import url(main.css);

:root{
    /*Academia Estelar Section*/
    --academia-estelar-background:#085160;
    --academia-estelar-text: #e8fff4;
    --top-escuelaEstelar-h1: -25px;
    --top-escuelaEstelar-p: -30px;

    /*Mision*/
    --mision-background:#0b7289;
    --mision-text:#e7ffee;
    --top-mision-h2: -20px;
    --top-mision-p:-25px;


    /*Pilares 108ba7*/
    --pilares-background: #108ba7 ;
    --pilares-text:#e7ffee;
    --top-pilares-h2: -25px;
    --top-pilares-Container: -60px;

    /*Cursos Principales*/
    --cursosPrincipales-background:#108ba7;
    --cursosPrincipales-text: #e7ffee;
    --top-principales-h2: -110px;
    --top-container-cursos: -50px;
}



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

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

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


section h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 2rem;
}

section p {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.images {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*-------------- Header Cont / Escuela Estelar------------------*/
#Header-container {
    background-image: url('/Assets/Img/backgrounds/Desktop/background1Comp406.webp'); /* Ruta de la imagen */
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    background-position: center;
    background-repeat: no-repeat;
}



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

.header-txt{
    color: var(--academia-estelar-text);
    max-height: 700px;
    /* padding: 20px; */
    position: relative;
    top: -40px;
    /* z-index: 1; */
}
.Title-txt{
    display: flex;
    justify-content: center;
    align-items: center;
}

#Header-container .Title-txt h1{
    /* font-family: "Merienda", cursive; */
    position: relative;
    padding: 20px;
    padding-top: 25px;
    margin:  0px 10px;
}


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


/* Estilos para la imagen de las cartas de tarot */
.img-tarot-cards {
    /* padding: 50px; */
    /* position: absolute;
    left: 50%;
    top: -70px; */
    /* transform: translateX(-50%); */
    margin-top: 0px; /* Ajusta el espacio entre el texto y la imagen */
    padding-right: 0px;
    padding-left: 0px;
}

#tarot-cards {
    width: 63dvw;
    max-width: 1300px;
    /* height: auto; */
}


#moonContainer{
    /* position: relative; */
    /* top: 365px; */
}
#wolf-moon{
    width: 100px;
    position: relative;
    top: -6.5rem;
}


/*------------------------Mision----------------------*/
#mision-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* max-height: 700px; */
    overflow: hidden;
    text-align: center;
    background-image: url('/Assets/Img/backgrounds/Desktop/background\ 1.2Comp400.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 */
}


#mision h2{
    /* font-family: "Merienda", cursive; */
    /* color: var(--mision-text); */
    margin-bottom: 0px;
    font-size: 3.6rem;
    position: relative;
    top: var(--top-mision-h2);
}

#mision p{
    /* color: var(--mision-text); */
    font-size: 1.7rem;
    /* font-family: "Merienda", cursive; */
    position:relative;
    top: var(--top-mision-p);
}

.img-mision{
    width:  250px;
    position: relative;
    /* top: 0px;
    margin:  0px;
    padding: 0px; */
}


/* Filosofia Popup */
.filosofia-data{
    max-width: 100dvw;
    padding-top: 1rem;
    padding-bottom: 5rem;
}

/* boton trasfer data */

.filosofia-data a {
    color: var(--letras-claras);
    position: relative;
    display: inline-block;
    font-size: 1.7rem;
    text-decoration: none;
    border: 1.5px solid #4f04ff;;
    background-image: url(/Assets/Img/backgrounds/Buttons/background7Comp65.webp);
    background-size: cover;
    background-position: center;
    padding: 1rem 1.3rem;
    margin: 10px;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}

.filosofia-data a::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url(/Assets/Img/backgrounds/Buttons/goldBackgroundComp154.webp);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: -1; /* Para que no tape el contenido */
}

.filosofia-data a:hover::before {
    opacity: 1;
}

.filosofia-data a:hover {
    background-color: transparent; /* lo mantenemos transparente para ver el hover */
    color: #fff;
}


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

/* trasnfer pop pup */
/* .filosofia-section {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
} */

/* Estado inicial oculto */
.filosofia-section {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    display: flex; /* Siempre en flex, controlamos visibilidad con opacidad */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Clase para mostrar el popup */
.filosofia-section.active {
    opacity: 1;
    pointer-events: auto;
}


/* Estilo para la sección de transferencia */

.filosofia-div{
    position: relative;
    width: 80dvw;
    max-width: 85dvw;
    max-height: 80dvh;
    padding: 1rem 1rem;
    padding-bottom: 4rem;
    background-image: url(/Assets/Img/backgrounds/Desktop/background8Comp250.webp);
    background-size: cover;
    opacity: 1;
    border-radius: 35px; /* Bordes redondeados */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
    text-align: center;
    color: #fff;
}


/* Estilo para el título */
.filosofia-div h2 {
    font-size: 2.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 1.5rem;
}

.filosofia-container {
    max-height: 70dvh;
    overflow-y: auto;
    padding: 0 2rem;
}

.filosofia-container p{
    margin: 1rem 0rem;
    font-size: 1.28rem;
}

/* Estilo para el botón de cerrar */
button.closePopupBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    color: white;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    /* /*cursor: pointer*/; */
}

button.closePopupBtn:hover {
    color: #0c7bd6; /* Cambiar color al pasar el ratón */
}

.filosofia-container::-webkit-scrollbar {
    width: 8px;
  }

.filosofia-container::-webkit-scrollbar-track {
background: transparent;
}

.filosofia-container::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.4);
border-radius: 10px;
border: 2px solid transparent;
background-clip: content-box;
}

.filosofia-container::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.6);
}



/*-------------------- Pilares----------------------------*/
/* Estilos para la sección de pilares */
/* Estilos para la sección de pilares */
#pilares {
    background-image: url('/Assets/Img/backgrounds/Desktop/background2Comp320.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 */
    
    position: relative; /* Añadir posición relativa para poder posicionar el h2 */
    z-index: 1; /* Añadir un z-index para asegurar que esté por encima del contenido */
    
    /* height: auto; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
}

#pilares h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 0px;
    /* color: var(--pilares-text); */
    /* font-family: "Merienda", cursive; */

    position: relative; /* Añadir posición relativa para alinear correctamente */
    z-index: 1; /* Asegurar que esté por encima del contenido */

    top: var(--top-pilares-h2);   
}

.img-pilares{
    width:  222px;
    position: relative;
    top: -20px;
    margin-bottom: 30px;
}

#pilares .container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    justify-content: center; /* Cambiado a 'center' para centrar los pilares */
    position: relative;
    top: var(--top-pilares-Container);
}

.pillar {
    /* position: relative; 
    text-align: center; */
    margin: 25px;
}
    
#pilares .pillar .image-container {
    position: relative;
    width: 400px;
}

.pillar img {
    width: 100%;
    height: auto;
    transition: opacity 0.5s ease;
    border-radius: 200px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.pillar h3 {
    /* font-family: "Merienda", cursive; */
    font-size: 2.2rem;
    margin-bottom: 20px;
    /* color: var(--pilares-text); */
}


.pillar p {
    position: absolute;
    /* font-family: "Merienda", cursive; */
    cursor: default;
    font-size: 1.05rem;
    top: 0;
    left: 0;
    width:  400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: white; */
    /* background: rgba(9, 167, 179, 0.342); */
    background-image: url('/Assets/Img/backgrounds/Desktop/background2Comp320.webp'); /* Ruta de la imagen */
    opacity: 0;
    transition: opacity 1.5s ease;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border-radius: 200px; /*Esferico*/
}

#pilares .image-container:hover img {
    opacity: 0.8;
}

#pilares .image-container:hover p {
    opacity: 1;
}


/* ------------------- Swiper Cursos Principales -------------*/

#Cursos-Principales {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 750px;
}

#Cursos-Principales {
    background-image: url('/Assets/Img/backgrounds/Desktop/background8Comp250.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 */
}

#Cursos-Principales h2 {
    /* font-family: "Merienda", cursive; */
    font-size: 3rem;
    /* color: var(--cursosPrincipales-text); */
    margin-bottom: 0px;
    position: relative;
    top: -30px;
}

.cursos-principales-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 200px;
    max-width: 800px;
    margin-top: 20px;
}

.curso-container{
    display: flex;
    flex-direction: column; /* Apila la imagen y el texto */
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */   
     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    box-sizing: border-box;
    margin-left: 10px;
    margin-right: 10px;
}


.curso-container img{
    width: 600px; /* 625 x 0.96 */
    height: 384px;
    border-radius: 30px;

    text-align: center;

}

.curso-container a{
    text-decoration: none;
}

.curso-container h3{

    /* font-family: "Merienda", cursive; */
    text-align: center;
    color: var(--cursosPrincipales-text);
    font-size: 1.5rem;
    position: relative;
    top: -10px;
}


/* Delll xps V2 */
@media (min-width:1500px) and (max-height:830px){

}

/* matebook x pro alfa */
@media (min-width:1450px) and (max-height:920px) {

    #Header-container .Title-txt h1 {
        font-size: 4.5rem;
    }
    .life-seed{width: 130px;}

    #Header-container {
        padding-top: 25px;
    }
    #moonContainer {
        top: 244px;
    }

    #mision h2{
        font-size: 3.2rem;
    }
    #pilares h2{
        font-size: 3.2rem;
    }


    #pilares .pillar .image-container
    {
        width: 355px;
    }
    .pillar p{
        width: 355px;
        height: 355px;
        font-size: 1rem;
    }
    .pillar{
        margin: 25px 33px;
    }

    .img-pilares {
        width: 205px;
    }

    #Cursos-Principales{
        padding-top: 0px;
    }
    #Cursos-Principales h2{
        top: -15px;
    }

}

@media (min-width:1700px){
    #Header-container .Title-txt h1 {
        font-size: 5rem;
    }
    #Header-container{
        padding-top: 30px;
    }

    #Cursos-Principales h2{
        top: 0px;
        margin: 0px;
    }
    #Cursos-Principales{
        height: 40vw;
        padding: 20px 0px;
        padding-bottom: 40px;
    }
}



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

    .img-tarot-cards {
        /* top: -70px; */
    }
    #moonContainer{
        /* top: 350px; */
    }
    #wolf-moon{
        width: 110px;
    }

    #mision h2{
        font-size: 4rem;
    }
    #pilares h2{
        font-size: 4rem;
    }

    #Cursos-Principales h2{
        font-size: 3.8rem;
    }

    .pillar h3{
        font-size: 2.7rem;
    }
    #pilares .pillar .image-container {
        margin: 0px 15px;
        width: 440px;
    }

    .pillar p{
        width: 440px;
        height: 440px;
        font-size: 1.2rem;
    }

    .curso-container img {
        width: 700px;
        height: 433px;
    }

    .curso-container h3 {
        font-size: 2rem;
    }

    #Cursos-Principales{
        height: 900px;
    }

}


@media (max-width:1600px) and (min-width: 1100px) and (max-height:800px){

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

    .img-header-container {
        margin-top: -2rem;
    }

    #wolf-moon {
        top: -19.5rem;
    } */
    #wolf-moon {
        width: 80px;
    }
    #Header-container .sub-tittle p{
        font-size: 1.5rem;
    }

    #mision h2 {
        font-size: 3rem;
    }
    #mision p{
        font-size: 1.5rem;
    }
    #pilares h2{
        font-size: 3rem;
    }

    #pilares p{
        font-size: 1rem;
    }
    .img-pilares {
        width: 180px;
    }
    .pillar h3 {
        font-size: 2.1rem;
    }
    #pilares .pillar .image-container {
        width: 350px;
    }
    .pillar p{
        width: 350px;
        height: 350px;
    }

    #Cursos-Principales h2{
        font: 2.8rem;
    }

    .curso-container img {
        width: 550px;
        height: 340px;
    }

}


@media (max-width:1000px) {
    /* #Header-container{
        background-attachment: scroll;
    } */

    /*
    #mision-section {
        background-attachment: scroll;
    }
    #pilares{
        background-attachment: scroll; 
    }
    #Cursos-Principales{
        background-attachment: scroll;
    } */


}



/* Ipad Pro */
@media (max-width:1100px) and (max-height: 1400px) and (min-width:900px) and (min-height:1200px){
    
    
    .img-life-seed{
        margin: 0px 2dvw;
    }
    .sub-tittle p{
        margin: 20px 0px;
    }
    #Header-container{
        padding-bottom: 120px;
    }
    #tarot-cards{width: 68dvh;}

    #moonContainer{
        /* top: 230px; */
    }
    #wolf-moon{
        width: 130px;
    }
    #mision{height: auto;}
    #mision-section{
        padding-bottom: 60px;
    }
    #mision h2{
        font-size: 3.8rem;
    }

    #pilares{
        padding-bottom: 40px;
        height: auto;
    }
    #pilares h2{
        font-size: 3.8rem;
    }

    #Cursos-Principales h2{
        font-size: 3.8rem;
    }

    .filosofia-div {
        width: 73dvw;
        padding: 2rem 3rem;
    }
}

/* Ipad air */
@media (max-width:850px) and (max-height:1200px) and (min-width:600px) and (min-height:1000px){


    .img-life-seed{
        margin: 0px 2dvw;
    }
    .sub-tittle p{
        margin: 20px 0px;
    }
    #Header-container{
        padding-bottom: 50px;
    }

    #tarot-cards{width: 85dvw;}


    #wolf-moon{
        width: 80px;
        top: -4.5rem;
    }

    #mision{height: 662px;}

    #mision-section{
        padding-bottom: 60px;
    }
    #mision h2{
        font-size: 3.3rem;
    }
    #mision p{font-size: 1.5rem; margin: 20px;}

    #pilares{
        padding-bottom: 40px;
        height: auto;
    }
    #pilares h2{
        font-size: 3.3rem;
    }

    #pilares .pillar .image-container {
        width: calc(400px* 0.75);
    }
    .pillar p {
        font-size: calc(1.2rem* 0.7);
        width: calc(400px* 0.75);
        height: calc(400px* 0.75);
    }

    #Cursos-Principales{
        height: auto;
        padding-top: 70px;
        padding-bottom: 90px;
    }
    #Cursos-Principales h2{
        font-size: 3.3rem;
    }

    .curso-container img {
        width:  calc(550px *0.75);
        height: calc(324px *0.75);

    }
    .filosofia-div {
        width: 75dvw;
        padding: 1rem 2rem;
    }
    .filosofia-container p {
        font-size: 1rem;
    }

}

/* Ipad mini */
@media (max-width: 800px) and (max-height: 1100px) and (min-width:600px) and (min-height:750px) {

    .header-txt {
        padding: 0px 0px;
    }
    #Header-container .Title-txt h1 {
        padding: 5px 0px;
        margin: 5px 0px;
    }

    #tarot-cards{
        width: 95dvw;
        min-width: 700px;
        margin-top: 30px;
    }

    #mision h2{
        font-size: 3rem;
    }
    .img-mision{
        width:  200px;
        margin: 20px ;
    }
    #mision p{
        font-size: 1.3rem;
        padding: 20px;
    }



    #pilares {
        height: auto;
        padding-top: 40px;
        padding-bottom: 60px;
    } 

    .img-pilares{
        width:  calc(200px *0.75);
        height: calc(200px *0.75);
        margin-bottom: 30px;
    }
    
    #pilares h2 {
        font-size: 3rem;
    }
    
    .pillar h3 {
        font-size: 2rem;
    }
    
    #pilares .pillar .image-container {
        width: calc(400px *0.65);
    }
    .pillar p {
        font-size: calc(1.2rem * 0.6);
        width: calc(400px * 0.65);
        height: calc(400px *0.65);
    }


    
    #Cursos-Principales h2 {
        font-size: 2.8rem;
    }


    .curso-container img {
        width: calc(600px* 0.75);
        height: calc(384px* 0.75);
    }

    .curso-container h3{
        font-size: 1.4rem;
    }

    .filosofia-div {
        max-width: 95dvw;
        width: 90dvw;
        padding: 1rem 1rem;
    }
    .filosofia-container p {
        font-size: 1rem;
    }


}

/* 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-container{
    background-image: none;
    background-attachment: scroll !important; 
    background-size: cover;
    overflow: auto;

    }
    .header-content {
        max-height: 100dvh;
        height: 60vh;
    }

    .filosofia-div{
        background-image: url('/Assets/Img/backgrounds/Movil/background6Comp155.webp');
    }


    #mision-section {
    background-image: url('/Assets/Img/backgrounds/Movil/background10Comp150.webp');
    background-attachment: scroll !important; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  #pilares, .pillar p{
    background-image: url('/Assets/Img/backgrounds/Movil/background2Comp130.webp');
    background-attachment: scroll !important; 
    background-size: cover;
  }
  #Cursos-Principales{
    background-image: url('/Assets/Img/backgrounds/Movil/background8Comp104.webp');
    background-attachment: scroll !important; 
    background-size: cover;
  }


}



/* Iphone 14 Pro Max */
@media (max-width: 500px) {
    .header-txt{
        width: 100dvw;
    }
    #Header-container .Title-txt h1{
        font-size: 2.25rem;
        padding: 0px;
        margin:  0px;
    }
    /* .life-seed {
        width: 65px; 
    } */

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

    .img-life-seed{
        margin: 0 1.5dvw;
    }

    #menu-toggle {
        padding: 0 10px;
    }
    .header-content {
        max-height: 50dvh;
        padding: 0px;
    }
    .Title-txt{
        margin:  15px 0px;
        margin-bottom: 0px;
        padding: 5px 0px;
    }

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

    .sub-tittle{
        margin: 0px;
        padding: 5px 0px;
    }

    #tarot-cards{
        width: 95dvw;
        min-width: 350px;
        margin-top: 0px;
    }
    #moonContainer{
        position: absolute;
        top: 90px;
    }
    #wolf-moon{
        width: 63px;
    }


    #mision-section{
        padding: 50px 0px;
        
        max-height: 100dvh;

    }
    #mision h2{
        font-size: 2rem;
        margin-top: 0px;
    }
    .img-mision{
        width:  169px;
    }
    #mision p{
        font-size: 1.05rem;
        padding: 0 35px;
        margin: 25px 0px;
    }
    #mision{
        height: 490px;
    }


    #pilares {
        height: auto;
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .img-pilares{
        width:  calc(200px *0.55);
        height: calc(200px *0.55);
        margin-bottom: 30px;
    }
    
    #pilares h2 {
        font-size: 2rem;
        top: var(--top-pilares-h2);
    }
    

    .pillar{
        margin: 4px;
    }

    .pillar h3 {
        font-size: 1.3rem;
    }

    
    #pilares .pillar .image-container {
        width: calc(400px *0.47);
    }
    .pillar p {
        font-size: calc(1.2rem * 0.44);
        width: calc(400px * 0.47);
        height: calc(400px *0.47);
    }

    #Cuestionamiento{
        margin-top: 30px;
    }
    #Espiritualidad{margin-top: 30px;}

    #Libertad h3{
        margin-top: 16px;
        margin-bottom: 20px;
    }


    #Cursos-Principales {
        max-height: calc(700px*0.7);
        height: auto;
        padding-bottom: 200px;
    }
    .curso-container img{
        width:  calc(600px*0.48); /* 625 x 0.96 */
        height: calc(384px*0.48);    
    }
    
    #Cursos-Principales h2 {
        font-size: 1.9rem;
    }
    .curso-container h3{
        font-size: 1rem;
    }



    .filosofia-data {
        padding-bottom: 3rem ;
    }
    .filosofia-data a {
        font-size: 1.05rem;
        padding: 0.7rem 0.9rem;
    }

    .filosofia-div {
        max-width: 98dvw;
        height: auto;
        width: 87dvw;
        padding: 0.5rem;
        padding-bottom: 2rem;
    }

    .filosofia-div h2 {
        font-size: 2rem;
        margin: 1.5rem;
        margin-bottom: 1rem;
    }

    .filosofia-container{
        max-height: 70dvh;
        overflow-y: auto;
        padding: 0 1.5rem;
    }
    .filosofia-container p {
        margin: 0.5rem 0.4rem;
        font-size: 0.9rem;
    }


}

/* Iphone XR - S20 ultra */ 
@media (max-width: 414px) {

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

    #Header-container .Title-txt h1{
        font-size: 2.1rem;        
    }
    .header-content{
        max-height: 51.5dvh;
    }

    #tarot-cards{
        width: 95dvw;
        min-width: 350px;
    }

    .img-mision{
        width:  160px;
    }

    #mision{
        height: auto;
    }
    #mision h2{
        font-size: 2rem;
    }
    #mision p{
        font-size: 1rem;
    }

    #pillar h2{
        font-size: 2rem;
    }
    .img-pilares{
        width:  calc(200px *0.55);
        height: calc(200px *0.55);
        margin-bottom: 30px;
    }
    

    
    #pilares .pillar .image-container {
        width: calc(400px *0.44);
    }
    .pillar p {
        font-size: calc(1.2rem * 0.42);
        width: calc(400px * 0.44);
        height: calc(400px *0.44);
    }

    #Cuestionamiento{
        margin-top: 30px;
    }

    #Libertad h3{
        margin-top: 16px;
        margin-bottom: 20px;
    }


    #Cursos-Principales h2{
        font-size: 1.9rem;
        top: -10px;
    }
    #Cursos-Principales{
        height: 415px;
    }

    .filosofia-data a {
        font-size: 1rem;

    }

}

/* Iphone 12 Pro */
@media (max-width: 390px) {
    .Title-txt{
        margin-top: 0px;
    }
    .header-content {
        max-height: 50dvh;
    }
    #Header-container .Title-txt h1{
        font-size: 2rem;
        padding: 0px;
    }
    .life-seed {
        /* width: 60px;  */
    }

    #Header-container .header-txt p{
        font-size: 1.1rem;
    }
    #tarot-cards{
        width: 95dvw;
        min-width: 350px;
    }

    #mision-section{
        padding: 50px 0px;
        max-height: 100hv;

    }
    #mision h2{
        font-size: 2rem;
    }
    .img-mision{
        width:  160px;
    }
    #mision p{
        font-size: 1rem;
    }


    .img-pilares{
        width:  calc(200px *0.55);
        height: calc(200px *0.55);
        margin-bottom: 30px;
    }
    
    #pilares h2 {
        font-size: 2rem;
    }
    
    .pillar h3 {
        font-size: 1.2rem;
    }
    
    #pilares .pillar .image-container {
        width: calc(400px *0.41);
    }
    .pillar p {
        font-size: calc(1.2rem * 0.38);
        width: calc(400px * 0.41);
        height: calc(400px *0.41);
    }

    #Cuestionamiento{
        margin-top: 30px;
    }

    #Libertad h3{
        margin-top: 16px;
        margin-bottom: 20px;
    }

    
    #Cursos-Principales h2 {
        font-size: 1.8rem;
    }

}

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

    #tarot-cards{margin-top: 0px;}
    #moonContainer{top: 73px;}
    #wolf-moon {
        width: 60px;
    }
    #mision-section{
        max-height: 100hv;
    }
    #mision h2{
        font-size: 1.9rem;
    }
    .img-mision{
        width:  150px;
    }
    #mision p{
        font-size: 0.9rem;
    }

    .header-content {
        max-height: 74.5dvh;
    }


    #Header-container .Title-txt h1{
        font-size: 1.9rem;
    }
    .life-seed{
        /* width: 60px; */
    }


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

    

    .img-pilares{
        width:  calc(200px *0.55);
        height: calc(200px *0.55);
        margin-bottom: 30px;
    }
    
    #pilares h2 {
        font-size: 1.9rem;
    }
    
    .pillar h3 {
        font-size: 1.1rem;
    }
    
    #pilares .pillar .image-container {
        width: calc(400px *0.39);
    }
    .pillar p {
        font-size: calc(1.2rem * 0.38);
        width: calc(400px * 0.39);
        height: calc(400px *0.39);
    }

    #Libertad h3{
        margin-top: 10px;
    }


    #Cursos-Principales{
        padding-bottom: 135px;
    }
    #Cursos-Principales h2 {
        font-size: 1.7rem;
    }

}


/* Iphone S8+ */
@media (max-width: 360px) {



    .header-content {
        height: 46.5dvh;
    }

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

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


    /* #mision-section{
        max-height: 100hv;
    } */
    #mision h2{
        font-size: 1.7rem;
    }
    .img-mision{
        width:  140px;
    }
    #mision p{
        font-size: 0.9rem;
    }



    .filosofia-div h2{
        margin: 1.5rem 1.1rem;
        max-height: 50dvh;
    }
    .filosofia-container{
        padding: 0 1rem;
        padding-bottom: 0.3rem;
    }
    

    .img-pilares{
        width:  calc(200px *0.55);
        height: calc(200px *0.55);
        margin-bottom: 30px;
    }
    
    #pilares h2 {
        font-size: 1.7rem;
    }
    
    .pillar h3 {
        font-size: 1rem;
    }
    
    #pilares .pillar .image-container {
        width: calc(400px *0.42);
    }
    .pillar p {
        font-size: calc(1.2rem * 0.41);
        width: calc(400px * 0.42);
        height: calc(400px *0.42);
    }
    #pilares p{
        font-size: 0.47em;
    }


    #Cursos-Principales{
        padding-top: 5px;
    }
    
    #Cursos-Principales h2 {
        font-size: 1.55rem;
        margin-bottom: 0px;
    }


    .curso-container img{
        width:  calc(600px*0.45); /* 625 x 0.96 */
        height: calc(384px*0.45);    
    }
    

    .curso-container h3{
        font-size: 1rem;
    }

}

/* Samsung Z Fold */
@media (max-width: 344px) {

    #tarot-cards{
        min-width: 300px;
    }

    #mision-section{
        max-height: 100hv;
    }
    #mision{
        height: 60dvh;
    }
    #mision h2{
        font-size: 1.7rem;
    }
    .img-mision{
        width:  120px;
    }
    #mision p{
        font-size: 0.9rem;
    }



    

    .img-pilares{
        width:  calc(200px *0.5);
        height: calc(200px *0.5);
        margin-bottom: 30px;
    }
    
    #pilares h2 {
        font-size: 1.7rem;
    }
    
    .pillar h3 {
        font-size: 1rem;
    }
    
    #pilares .pillar .image-container {
        width: calc(400px *0.35);
    }
    .pillar p {
        /*cursor: pointer*/;
        font-size: calc(1.2rem * 0.34);
        width: calc(400px * 0.35);
        height: calc(400px *0.35);
    }

}