/*
    Theme Name: Yurani Sandoval
    Theme URI: 
    Author: Coding
    Author URI: 
    Description: Theme Diseñado para Yurani Sandoval
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: code, theme, flexbox, css grid, mobile first
    Text Domain: code
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@keyframes card_left{
	0%{
		opacity: 0;
		transform: rotate(-18deg) translate(-30%);
		
	}
	100%{
		transform: rotate(0deg) translate(0%);
		opacity: 1;
		
	
	}
}

@keyframes card_right{
	0%{
		opacity: 0;
		transform: rotate(18deg) translate(30%);
		
	}
	100%{
		transform: rotate(0deg) translate(0%);
		opacity: 1;
		
	
	}
}

@keyframes card_center{
	0%{
		opacity: 0;
		transform: translateY(30%);
		
	}
	100%{
		transform: translateY(0%);
		opacity: 1;
		
	
	}
}

@keyframes bg_text{
	0%{
		background-position: 101% 100%;
		
	}
	100%{
		background-position: 0% 100%;
	
	}
}

@keyframes entry_left{
	0%{
		opacity: 0;
		transform: translateX(-100%);
		
	}
	100%{
		opacity: 1;
		transform: translateX(0%);
	
	}
}

@keyframes entry_right{
	0%{
		opacity: 0;
		transform: translateX(100%);
		
	}
	100%{
		opacity: 1;
		transform: translateX(0%);
	
	}
}

@keyframes message{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 1;
		transform: scale(1.2);
	}
	75%{
		opacity: 1;
		transform: scale(0.8);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}


@media screen and (min-width:0px){
    :root{
        /** Fuentes **/
        --fuente-principal: 'Roboto', sans-serif;
        --fuente-headings: 'Roboto', cursive;
    
        /** Colores **/
        --azul-primario:#283562;
        --azul-verde:#42A59F;
        --verde: #A4D0A8;
        --blanco:#FFF;
        --negro:#000;
    
    }

    /** Estilos Globales **/
    
    html{box-sizing: border-box; font-size: 62.5% /* 10px en 1 rem */}
    *, *::before, *::after{box-sizing: inherit;}
    body{font-family: var(--fuente-principal); font-size: 1.8rem; line-height: 2rem;}
    h1, h2, h3{font-family: var(--fuente-principal); margin: 0rem 0rem 1rem 0rem; line-height: 5rem;}
    h1{font-size: 4.2rem;}
    h2{font-size: 3.2rem;}
    h3{font-size: 2.5rem;}
    p{margin: 0rem;}
    a{text-decoration: none;}
    button{border: unset; padding: 0rem; background: transparent; cursor: pointer;}
    ul{list-style: none; margin: 0rem; padding: 0rem;}
    img{display: block; max-width: 100%; height: auto;}
    body.menu_active{overflow: hidden;}
    main{overflow: hidden;}
    main .slick-track{transition:unset;}
	main .slick-list{width: 100%; order: 1;}
	main .slick-dots{ width: 100%; display: flex; justify-content: center; list-style: none; order: 2;}
	main .slick-track{display: flex;}
	main .tpgb-plus-button a > span{display: flex; align-items: center;}

    [id] {
  scroll-margin-top: 100px; /* ajusta el valor a la altura de tu header */
}

#trp-floater-ls.trp-top-right{bottom : 0% !important; left: 0% !important; top: unset; right: unset;}
   /** SCROLL TOP **/
   #scroll_top{position: fixed; bottom: 3rem; right: 3rem; z-index: 999; opacity: 0; visibility: hidden; transition: opacity .2s ease;}
   #scroll_top.active{opacity: 1; visibility: visible;}
   #scroll_top a{width: 5rem; height: 5rem; display: flex; justify-content: center; align-items: center; border-radius: 10rem; background: var(--azul-verde);}
   
   /** ANIMATIONS **/
   .card_left-animation{opacity: 0; transform: rotate(-18deg) translate(-30%); transition: opacity 0.4s, transform 0.4s;}
   .card_left-animation.active-animation{animation-name: card_left; animation-duration: .8s; animation-fill-mode: forwards;}
   .card_right-animation{opacity: 0; transform: rotate(18deg) translate(30%); transition: opacity 0.4s, transform 0.4s;}
   .card_right-animation.active-animation{animation-name: card_right; animation-duration: .8s; animation-fill-mode: forwards;}
   .card_center-animation{opacity: 0; transform: translateY(30%); transition: opacity 0.4s, transform 0.4s;}
   .card_center-animation.active-animation{animation-name: card_center; animation-duration: .8s; animation-fill-mode: forwards;}

   .entry_left-animation{opacity: 0;transition: opacity 0.5s, transform 0.5s;}
   .entry_left-animation.active-animation{animation-name: entry_left; animation-duration: 1s; animation-fill-mode: forwards;}
   .entry_right-animation{opacity: 0; transition: opacity 0.5s, transform 0.5s;}
   .entry_right-animation.active-animation{animation-name: entry_right; animation-duration: 1s; animation-fill-mode: forwards;}

   .message_entry-animation{opacity: 0; transition: opacity 0.5s, transform 0.5s;}
   .message_entry-animation.active-animation{animation-name: message; animation-duration: 1s; animation-fill-mode: forwards;}

    /** BURGUER MENU **/
    #burguer_menu-content{background:#fff; position:fixed; width:100vw; height:100vh; top:0rem; right:-200%; padding:2rem; z-index:9999999999; transition: right .5s ease;}
    #burguer_menu-content a{font-family: var(--fuente-principal); font-size: 1.6rem; font-weight: 600; line-height: normal; color: var(--azul-primario);}
    #burguer_menu-content li.contact{display: flex;}
    #burguer_menu-content li.contact a{width: 100%; display: flex; justify-content: center; align-items: center; padding: 1rem .5rem; border-radius: 10rem; color: #FFF; background: var(--azul-verde);}
    #burguer_menu-content .burguer_menu-close{width: fit-content; display: flex; justify-content: center; align-items: center; position: absolute; top: 2rem; right: 2rem;}
    #burguer_menu-content .burguer_menu-nav{display: flex; flex-direction: column; row-gap: 5rem;}
    #burguer_menu-content .burguer_menu-nav .burguer_logo-menu a{display: flex; width: fit-content;}
    #burguer_menu-content .burguer_menu-nav .burguer_logo-menu a img{width: 100%; max-width: 18rem;}
    #burguer_menu-content .burguer_menu-nav ul.menu{display: flex; flex-direction: column; row-gap: 2rem;}
    
    #burguer_menu-content.active{right: 0%;}

    /** HEADER **/
    #header{width:100%; position: sticky; top:0; left:0;  z-index:999; transition: padding .5s, background-color .5s; background-color: var(--blanco);}
    #header .nav_menu-container{width: min(95%,120rem); display: flex; justify-content: space-between; margin: 0rem auto; padding: 1rem 0rem;}
    #header .nav_menu-container .logo img{width: 100%; max-width: 12.8rem;}
    #header .nav_menu-container .menu-principal{display: none;}
    #header .nav_menu-container .burger_menu-btn{display: flex; align-items: center;}
    #header .nav_menu-container .burger_menu-btn button{height: fit-content;}

    #header.active .nav_menu-container{padding: 1rem 0rem;}
    #header.active .nav_menu-container .logo img{max-width: 11.5rem;}

    /** HOME **/
    #about_me ul{padding-left: 4rem; list-style: disc;}
    #about_me #text_plus{display: none;}
    #about_me #text_plus.active{display: block;}
    #about_me .about_img{order: 1;}

    #services .services_list{display: flex; flex-wrap: wrap;}
    #services .services_list .slick-arrow{display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; padding: 0rem !important; border-radius: 10rem; font-size: 3rem; color: var(--blanco); background: var(--verde);}
	#services .services_list .slick-prev{margin-right: .8rem;}
	#services .services_list .slick-dots{margin-top: 2.9rem; column-gap: .8rem;}
	#services .services_list .slick-dots li button{width: .8rem; height: .8rem; padding: 0rem; border-radius: 10rem; background: var(--verde); transition: all .3s ease;}
	#services .services_list .slick-dots li.slick-active button{width: 3.6rem; height: .8rem; border-radius: 2.4rem;}
	#services .services_list .slick-list{margin-top: 1.8rem; overflow: hidden;}
    #services .services_list .service_item{width: 100%; min-height: 28.5rem;}
    #services .services_list .service_item .service_card{width: 100%; height: 100%; padding: 2.5rem 1rem; border-radius: 2rem; background: var(--blanco);}
    #services .services_list .service_item .service_card .service_info{width: 100%; display: flex; flex-direction: column; align-items: center; row-gap: 1rem;}
    #services .services_list .service_item .service_card .service_info ul{padding-left: 3.2rem; list-style: disc;}
    #services .services_list .service_item .service_card .service_info > div{width: 100%;}
    #services .services_list .service_item .service_card .service_info h3{width: 100%; max-width: 20rem; font-family: var(--fuente-headings); font-size: 2rem; font-weight: 600; line-height: 2.5rem; color: var(--azul-verde); text-align: center; margin: 0rem;}
    #services .services_list .service_item .service_card .service_info div *{font-family: var(--fuente-principal); font-size: 1.6rem; font-weight: 400; line-height: 2.5rem; color: var(--azul-primario); margin: 0rem;}

    #testimony .testimony_list{display: flex; flex-wrap: wrap;}
    #testimony .testimony_list .slick-arrow{display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; padding: 0rem !important; border-radius: 10rem; font-size: 3rem; color: var(--blanco); background: var(--verde);}
	#testimony .testimony_list .slick-prev{margin-right: .8rem;}
	#testimony .testimony_list .slick-dots{margin-top: 2.9rem; column-gap: .8rem;}
	#testimony .testimony_list .slick-dots li button{width: .8rem; height: .8rem; padding: 0rem; border-radius: 10rem; background: var(--verde); transition: all .3s ease;}
	#testimony .testimony_list .slick-dots li.slick-active button{width: 3.6rem; height: .8rem; border-radius: 2.4rem; background: var(--azul-verde);}
	#testimony .testimony_list .slick-list{margin-top: 1.8rem; overflow: hidden;}
	#testimony .testimony_list .testimony_item{width: 100%; display: flex; min-height: 31.4rem;}
	#testimony .testimony_list .testimony_item .testimony_card{width: 100%; display: flex; flex-direction: column; align-items: center; row-gap: 3rem; padding: 3rem 1rem; border-radius: 2rem; background: var(--azul-verde);}
	#testimony .testimony_list .testimony_item .testimony_card > *{width: 100%; max-width: 49rem;}
	#testimony .testimony_list .testimony_item .testimony_card .testimony_img{width: 100%;}
	#testimony .testimony_list .testimony_item .testimony_card .testimony_img figure{width: 9rem; height: 9rem; display: flex; justify-content: center; align-items: center; padding: 1rem;  border-radius: 100%; background: var(--blanco);}
	#testimony .testimony_list .testimony_item .testimony_card .testimony_info{height: 100%; display: flex; flex-direction: column; justify-content: space-between; row-gap: 3rem;}
	#testimony .testimony_list .testimony_item .testimony_card .testimony_info p{font-family: var(--fuente-principal); font-size: 1.6rem; font-weight: 400; line-height: 2.5rem; color: var(--blanco); margin: 0rem;}
	#testimony .testimony_list .testimony_item .testimony_card .testimony_info h3{font-family: var(--fuente-principal); font-size: 2rem; font-weight: 600; line-height: 2.5rem; color: var(--blanco); margin: 0rem;}
    
    #ebook .ebook_img{order: 1;}
	#ebook .elementor-widget-container .frm_forms{width: 100%; max-width: 43.7rem;}
	#ebook .elementor-widget-container .frm_forms .frm_fields_container .frm_primary_label{padding: 0rem; font-family: var(--fuente-principal); font-size: 1.6rem; font-weight: 600; line-height: 2.5rem; color: var(--blanco);}
	#ebook .elementor-widget-container .frm_forms .frm_fields_container .frm_form_field:has(.frm_submit){display: flex; align-items: flex-end;}
	#ebook .elementor-widget-container .frm_forms .frm_fields_container .frm_form_field .frm_button_submit{margin: 0rem; padding: .75rem 1.5rem; border: unset; border-radius: 20px; font-family: var(--fuente-principal); font-size: 1.6rem; font-weight: 600; line-height: 2rem; color: var(--blanco); background: var(--verde); box-shadow: unset;}

    
    
    /** FOOTER **/
    #footer{width:100%; background: var(--azul-verde);}
    #footer .footer_container{width: min(95%,120rem); display: flex; flex-direction: column; row-gap: 2.5rem; margin: 0rem auto; padding: 4.2rem 0rem 1rem; }
    #footer .footer_container h3,
    #footer .footer_container a{font-family: var(--fuente-principal); line-height: 2.6rem; color: var(--blanco);}
    #footer .footer_container .footer_container-top .nav_menu-container{display: grid; grid-template-columns: 1fr; row-gap: 3rem;}
    #footer .footer_container .footer_container-top .nav_menu-container .logo{grid-column: 1; display: flex; align-items: center; justify-content: center;}
    #footer .footer_container .footer_container-top .nav_menu-container .logo a{display: flex; width: fit-content;}
    #footer .footer_container .footer_container-top .nav_menu-container .logo img{width: 100%; max-width: 17.5rem;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal{display: flex; align-items: center; justify-content: center;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu{display: flex; flex-direction: column; align-items: center; column-gap: 1rem; row-gap: 1rem; flex-wrap: wrap;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li{display: flex; align-items: center;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li.contact a{padding: .75rem 1.5rem; border-radius: 2rem; background: var(--verde); transition: all .3s ease;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li.contact a:hover{background: var(--azul-primario);}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li > a{font-size: 1.6rem; font-weight: 600;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li ul.sub-menu{padding-top: .5rem;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li ul.sub-menu a{font-size: 1.6rem; font-weight: 600;}
    
    #footer .footer_container .footer_container-bottom ul.policy{display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 1rem;}
    #footer .footer_container .footer_container-bottom ul.policy li a{display: flex; text-align: center; position: relative; font-size: 1.6rem; font-weight: 600;}
    
}
@media screen and (min-width:768px){
    
    /** HEADER **/
    #header .nav_menu-container .logo img{max-width: 17.5rem;}
    #header.active .nav_menu-container .logo img{max-width: 15.5rem;}

    
    /** HOME **/
    #about_me .about_img{order: 0;}

    #services .services_list{column-gap: 1rem; row-gap: 3rem; justify-content: space-evenly;}
    /* #services .services_list .service_item{max-width: 29.4rem;} */
    #services .services_list .service_item{max-width: 49%; min-height: auto;}
    /* #services .services_list .service_item .service_card .service_info > div{max-width: 25.6rem;} */
    #services .services_list .service_item .service_card .service_info > div{max-width: 37.6rem;}

	#testimony .testimony_list .testimony_item .testimony_card{margin-right: 3rem;}

    #ebook .ebook_img{order: 0;}
	#ebook .elementor-widget-container .frm_forms .frm_fields_container{column-gap: 3.3rem;}


    
    /** FOOTER **/
    #footer .footer_container .footer_container-top .nav_menu-container{grid-template-columns: repeat(12, 1fr); row-gap: 3rem;}
    #footer .footer_container .footer_container-top .nav_menu-container .logo{grid-column: span 4; display: flex; justify-content: start;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal{justify-content: flex-end; grid-column: span 8;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu{width: 100%; flex-direction: row; justify-content: space-between; row-gap: unset; flex-wrap: nowrap;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu > li ul.sub-menu{padding-top: 1rem;}


    #footer .footer_container{row-gap: 5rem; padding: 3.2rem 0rem;}
    #footer .footer_container .footer_container-bottom ul.policy{flex-direction: row; justify-content: start; column-gap: 2rem;}
    #footer .footer_container .footer_container-bottom ul.policy li:not(:first-child) a:before{content: ''; width: .7rem; height: .2rem; display: block; position: absolute; top: 1rem; left: -1.25rem; background: var(--verde);}
    #footer .footer_container .footer_container-bottom ul.policy li a{display: flex; text-align: start; position: relative; font-size: 1.6rem; font-weight: 600;}





    

    
}
@media screen and (min-width: 1024px){

    /** HEADER **/
    #header .nav_menu-container{padding: 2rem 0rem;}
    #header .nav_menu-container .menu-principal{display: flex; justify-content: center; align-items: center;}
    #header .nav_menu-container .menu-principal ul.menu{display: flex; column-gap: 3rem;}
    #header .nav_menu-container .menu-principal ul.menu a{font-family: var(--fuente-principal); font-size: 1.6rem; font-weight: 600; line-height: 2.6rem; color: var(--azul-primario);}
    #header .nav_menu-container .menu-principal ul.menu li{display: flex; align-items: center;}
    #header .nav_menu-container .menu-principal ul.menu li:not(.contact) a:hover{border-bottom: .1rem solid var(--azul-verde);}
    #header .nav_menu-container .menu-principal ul.menu li.contact a{padding: .75rem 1.5rem; border-radius: 2rem; color: var(--blanco); background: var(--azul-verde); transition: all .3s ease;}
    #header .nav_menu-container .menu-principal ul.menu li.contact a:hover{background: var(--verde);}
    #header .nav_menu-container .burger_menu-btn{display: none;}

    /** HOME **/
    #services .services_list{justify-content: space-between;}

    /** CONOCENOS **/
    #docentes_container-conocenos .docentes_bottom .docentes_list{grid-template-columns: repeat(3, 1fr);}



    /** FOOTER **/
    #footer .footer_container .footer_container-top .nav_menu-container{row-gap: unset;}
    #footer .footer_container .footer_container-top .nav_menu-container .logo{grid-column: span 3;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal{grid-column: span 9;}
    #footer .footer_container .footer_container-top .nav_menu-container nav.menu-principal ul.menu{width: fit-content; justify-content: flex-start; column-gap: 3rem;}




    
}