/*
Theme Name: Fire

Theme URI: Seoconsultingperu.com
Author: Seo Consulting 
Author URI: 
Description: Plantilla Básica Seo Consulting

*/


*{padding: 0; margin: 0;}
body{--color1: #2C698D; --color2: #A7D7C5; --color3: #21c7b0; --font1: "Playfair Display", serif; --font2:  "Lato", sans-serif; }
.container{width: 1165px; margin: 0 auto; overflow: hidden;}
.page-serv .container{overflow: inherit;}
.psico, .serv{overflow: hidden;}
.row{display: flex; justify-content: space-between;} .direction{flex-direction: row-reverse;}
.padded{padding: 100px 0px;}

.fix-btn{position: fixed; right: 10px; bottom: 10px; display: block; z-index: 2222;}
.fix-btn::before{ content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 30px;
-webkit-animation: ripple 3s infinite;animation: ripple 3s infinite;box-shadow: 0 0 0 2px rgba(101, 181, 48, 0.5);}

.grid_5{display: grid; grid-template-columns: repeat(5, 3fr); grid-column-gap: 0px;}
.grid_4{display: grid; grid-template-columns: repeat(4, 3fr); grid-column-gap: 10px; grid-row-gap: 10px;}
.grid_3{display: grid; grid-template-columns: repeat(3, 3fr); grid-column-gap: 30px; grid-row-gap: 30px;}
.grid_2{display: grid; grid-template-columns: repeat(2, 3fr);}
.row-center{display: flex; align-items: center; justify-content: space-between;}
#icoNav_movil{background: var(--color3); width: 51px; height: 51px; border-radius: 50%; padding: 18px 15px;  box-sizing: border-box; margin-left: 10px; display: none;}
.movil{display: none;}
#icoNav_movil ul li {width: 100%;height: 2px;background: #fff;display: block;margin-bottom: 4px;transition: all 0.5s ease-in-out;}
.closeNav ul li:nth-child(1){opacity:0;}
.closeNav ul li:nth-child(2){transform:rotate(45deg);margin-bottom:-2px !important;}
.closeNav ul li:nth-child(3){transform:rotate(-45deg);}
a{text-decoration: none;}
h1,h2,h3,h4,h5,h6{font-family: var(--font1);}
a,p,span,li,div{font-family: var(--font2);}

.nav-menu ul{list-style: none;}
.nav-menu ul li{display: inline-block;}
.nav-menu ul li a{display: block; padding: 0px 15px; line-height: 50px; color: #666;}


#info{background: var(--color1); color: #fff !important; padding: 20px; border-radius: 10px;}
#info p{color: #fff; margin-left: 10px;}
#info p img{color: #fff; margin-right: 10px !important; display: inline-block !important;}

h3.wp-block-heading{font: 27px var(--font1); padding: 20px 0px 14px;}
.wp-block-image{border-radius: 10px; overflow: hidden; margin-top: 10px;}
.cabecera .container{overflow: inherit;}
ul.sub-menu{
    display: block !important;
}
.nav-menu li{
    position: relative;
}
.nav-menu li ul.sub-menu{
    position: absolute;
	max-height: 0px;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    background: var(--color2);
    min-width: 350px;
	z-index: 2222;
}
.nav-menu li ul.sub-menu li::before{
	display: none;
}
.nav-menu li ul.sub-menu li{display: block;}

.nav-menu li ul.sub-menu li a{
    width: 100%; color: #fff;
	line-height: 43px; display: block;
	padding: 0px 30px !important;
}
.nav-menu li ul.sub-menu li a:hover{
	background: var(--color1); color: #fff;
}
.nav-menu li:hover > ul.sub-menu{
    max-height: 500px;
}
.current-menu-item a{background: var(--color1); color: #fff !important; border-radius: 20px;}



.phone-btn{
    position: relative;
    padding: 5px;border-radius: 50%;
    margin-right: 12px; font-size: 24px;
    box-shadow: 0 0 0 2px var(--color2);
    width: 40px;height: 40px; line-height: 40px;color: var(--color2);text-align: center;
}
.phone-btn::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: ripple 3s infinite;
    animation: ripple 3s infinite;
    box-shadow: 0 0 0 2px var(--color1);
}
@keyframes ripple{
    70% {
        box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}
.cabecera{background: #fff; padding: 20px 0px; margin-bottom: -20px; position: relative; z-index: 22222;}
.cabecera .btn{font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
.btn{line-height: 50px; padding: 0px 30px; background: var(--color2); color: #fff; border-radius: 30px;}
.phone-btn + div p{font-size: 21px; font-weight: 700; color: var(--color1);}
.phone-btn + div span{font-size: 15px; font-weight: 400; color: var(--color1);}
.entry{background: #fff; color: var(--color1); padding: 12px 0px; border-bottom: 1px solid var(--color2);}
.entry a{color: var(--color1); padding: 0px 10px; font-size: 15px;}

.servicios{padding: 90px 0px;}
.servicios article{ border:1px solid #EFE6E1;}
.servicios article h2{color: var(--color2); font: 20px var(--font2); padding-bottom: 10px;}
.servicios article p{color: var(--color1); font: 15px var(--font2); padding-bottom: 15px;}
.servicios article .row-center a{padding: 10px 30px; background: #f2f2f2; color: #666;}
.servicios article .row-center a:nth-child(2){background: var(--color1); color: #fff;}
.servicios article .txt-serv{padding: 30px;}

.thumb-serv{max-height: 205px; width: 100%; overflow: hidden;}
.thumb-nos{width: 440px; text-align: center;}.thumb-nos img{width: 100%;}
.thumb-nos a.btn{line-height: 40px; display: inline-block; background: var(--color1); margin: 0 auto;}

.txt-nos h4{font-size: 14px;}
.txt-nos h4 img{margin-top: -3px; margin-right: 7px; display: inline-block;vertical-align: middle;}
.txt-nos h3{font-size: 40px; padding: 10px 0px 20px 0px;}.txt-nos p{font-size: 19px; line-height: 1.8; color: var(--color1);}
.txt-nos ul{margin-left: 26px;}.txt-nos ul li{ font-size: 18px; line-height: 1.9; color: var(--color1);}
.txt-nos a.btn{display: inline-block; margin-top: 10px;}

.txt-nos{width: 50%;}
.calidad{width: 100%;border-radius: 14px; overflow: hidden; box-sizing: border-box;}
.services{height: 350px; border-radius: 10px; overflow: hidden; transition: all 0.4s ease-in-out; background-position: center !important;}
.txt-servicios{ padding: 20px; color: #fff; box-sizing: border-box; width: 100%; height: 100%;  display: flex;align-items: end; transition: all 0.4s ease-in; background:  linear-gradient(0deg,rgba(44, 105, 141, 1) 0%, rgba(255, 255, 255, 0) 46%);;}

.serv{padding: 90px 0px; background: #E9F1F7;}
.txt-servicios a{background: #fff; color: var(--color1); padding:7px 30px; display: inline-block; letter-spacing: 1px; margin-top:0px;opacity: 0;
max-height: 0px; transition: all 0.4s ease-in-out; border-radius: 30px;}
.txt-servicios:hover  a{opacity: 1; max-height: 100px; margin-top: 20px;}
.title h3 img{margin-top: -3px; margin-right: 7px; display: inline-block;vertical-align: middle;}
.title h4{color: var(--color1); font-size: 40px;}
.title{padding-bottom: 30px;}
.txt-servicios p{max-height: 0px; overflow: hidden; transition: all 0.4s ease-in-out;}
.txt-servicios:hover p{max-height: 400px;}
.txt-servicios:hover{ background: #2c698dbd;}

.services:hover{background-size: auto 120% !important; background-position: right !important; cursor: pointer;}

.sticky{position: sticky; top: 30px;}


.banner1{background: url(img/slider01.jpg); padding: 60px 0px 80px; position: relative; background-size: cover;     background-attachment: fixed;}
.banner1::before{ content: ""; display: block;background: var(--color2); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
opacity: 0.7; z-index: 0;}
.px{ width: 40%;  position: relative; height: 250px;}
.p1::before{ content: ""; display: block;background: var(--color1); position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.7; z-index: -1; border-radius: 30px;}
.p2{position: relative; z-index: 2;}
.banner1 .p1{ background: url(img/px.jpg); background-size: cover;padding: 100px 70px; width: 100%; box-sizing: border-box; position: absolute; top: -100px;
color: #fff; text-align: center; z-index: 3; border-radius: 30px;}
.telf{display: flex; align-items: center; width: 120px; margin: 15px auto; font-size: 30px; color: #fff;}
.telf::before, .telf::after{    display: block;
    content: "";
    border-bottom: 0;
    flex-grow: 1;
    border-top: 1px dashed  #fff;
}
.banner1 .svg{position: absolute; bottom: -1px; fill: #fff;}

.banner1 .p1 p{font-size: 21px;}.banner1 .p1 h5{font-size: 42px; margin-bottom: 20px;}
.banner1 .p2{width: 45%; color: #fff;}
.banner1 .p2 h4{font-size: 14px; color:var(--color1);}
.banner1 .p2 h3{font-size: 42px; padding: 20px 0px;}
.banner1 .p2 p{font-size: 16px;}
.loc{background: #fff; padding: 10px; border-radius: 20px; margin-top: 30px;}

.nosotros{padding: 80px 0px; background: linear-gradient(90deg,rgba(167, 215, 197, 0.87) 14%, rgba(255, 255, 255, 1) 57%);}

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.parent div{background-size: auto 100% !important; background-position: center !important; border: 1px solid #fff; transition: all 0.4s ease-in-out;}
.parent div:hover{background-size: auto 110% !important;}
.calidad{padding-bottom: 40px;}

.div1 { grid-area: 1 / 1 / 3 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 2 / 3 / 3; }
.div4 { grid-area: 1 / 3 / 3 / 4; }
.div5 { grid-area: 1 / 4 / 2 / 5; }
.div6 { grid-area: 2 / 4 / 3 / 5; }

.txt-proy{padding: 60px 40px; background: var(--color1); color: #fff;}
.txt-proy h3{border-bottom: 1px solid #fff; padding-bottom: 5px; margin-bottom: 15px;}
.txt-proy p{line-height: 25px;}


.txt-psico{width: 100%; padding: 40px 0px 40px 15%; box-sizing: border-box;}
.txt-psico p{padding: 20px; background: var(--color2); border-radius: 20px; color: var(--color1); display: inline-block;}
.txt-psico li{font: 20px var(--font1); color: var(--color1);}
.txt-psico ul{margin-left: 30px; padding: 20px 0px;}
.txt-psico ul li{line-height: 37px;}
.faq{background: #E9F1F7; padding: 80px 0px;}
.psico{padding: 80px 0px 0px;}

h4.btn-item{
	display: block;
	padding: 18px 30px;
    box-sizing: border-box;
    font-family: var(--font1);
    font-size: 17px !important;
    display: flex;
    line-height: 33px;
    border-bottom: 1px solid var(--color1);
    justify-content: space-between;
    font-weight: 800;
    margin-bottom: 0px !important;
    color: #666; cursor: pointer; text-transform: uppercase;
}
.btn-item::after{
    content: '+';
    color: var(--color2);
    line-height: 33px;
	width: 33px;
    font-weight: 300;
    font-size: 24px;
    box-sizing: border-box;
    text-align: center;
}
.btn-item.active::after{
    content: '-';
    color: #fff;
	background: var(--color2); border-radius: 50%;
}
.item-content{
	overflow: hidden;
	max-height: 0px;
	transition: all 0.3s;
}
.item-content p{
	font-size: 23px;
	font-weight: 300; line-height: 32px;
	color: var(--color1);font-family: var(--font2);
    padding: 20px 20px;
}
.item{
	margin-bottom: 14px;
}
.active + .item-content{
	max-height: 10em;
	transition: all 0.3s;
}
.btn-item.active{
	transition: all 0.3s;
	color: var(--color1);
}
.txt-faq{
    width: 570px;
	max-width: 100%;
}

.calidad{padding: 120px 0px; background: url(img/calidad.jpg); background-size: cover; padding: 100px 0px;}.title h3 strong{color: var(--color1);}
.title{padding-bottom: 40px;}.title p{font-size: 14px; font-weight: 400; color: #8889ac;}.title h3{font-size: 28px; font-weight: 900; color: #343c5c;}
.calidad article{padding:35px 25px 20px 40px; box-shadow: 0 0 9px 0 rgba(75,77,117,.1); background: #f2f2f2; position: relative; transition: all 0.4s; overflow: hidden; border-radius: 30px;}
.calidad article img{opacity: 0.7; height: 50px}
.calidad article h2{color: var(--color2); font-weight: 600; font-size: 23px;}
.calidad article p::before{content: "";display: block;position: absolute;height: 1px;top: 0;left: -40px;right: -40px;background-color: #e6e8eb;left: -50px;right: 0;width: calc(100% + 100px);}
.calidad article p{padding-top: 23px; margin-top: 25px; display: block; color: #8889ac; font-size: 16px; margin-bottom: 15px; position: relative;}
a.btn2{padding: 12px 15px 9px; margin-left: -15px; color: var(--color2); font-size: 13px; transition: all 0.4s; border-radius: 5px; font-weight: 600;}
a.btn2:hover{background: var(--color1); color: #fff; margin-left: 0px;}.calidad a.btn2:hover i{color: #fff;}.calidad a.btn2 i{color: var(--color1);}
.calidad article:hover{margin-top: -10px;}.owl-carousel .owl-stage-outer{padding: 20px 0px;}
.owl-calidad .owl-item img{width: 70px !important;}a.btn.drk{background: var(--color2);}


footer{
    background: var(--color2);
    background-size: cover;
    padding: 80px 0px 0px;
}
.f1{
    width: 87%;  
	margin-right: 42px; 
}
.f1 p{
	text-align: justify;
}
.f2{
    width: 250px;
}
.f3{
    width: 250px;
}
.f1 a{
    color: #ccc;
    padding: 8px 20px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-top: 20px;
}
footer h4{
    font-size: 18px;
    font-weight: bold;
    color: var(--color1);
    margin-bottom: 18px;
}
footer p, footer a, footer li{
    color: var(--color1);
    display: block;
    font-size: 16px;
}


footer a{
    margin-bottom: 10px;
}
.f3 img{ 
    opacity: 0.7;
}
.redes{
    display: flex;
}
footer .redes a{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 50%;
    padding: 0px !important;
    margin: 5px;
}
.copy{width: 1200px; margin: 0 auto; text-align: center; color: var(--color1); max-width: 100%;}
.copy a{display: inline-block;}
.copy{
    padding: 22px 0px 26px;
    border-top: 1px solid var(--color1);
    margin-top: 60px;
}


.box-f {
    padding: 0px 43px 22px 43px;
    border-right:1px solid #373737;

}
.box-f i{
    color: var(--color3);
    font-size: 20px;
    padding-right: 15px;
}
.box-f a{
    line-height: 20px;
    font-size: 16px;
    margin-bottom: 0px;
}
.boxs{
    border-bottom:  1px solid #373737;
    margin-bottom: 60px;
}


.box-contact{
    padding: 40px;
    width: 70%;
    box-sizing: border-box;
}
.box-contact h3.title{
    font-size: 30px;
}
.formulario h3.title{
    margin-bottom: 38px;
}
.box-form{
    box-shadow: 0 0 30px 0 rgb(27 68 163 / 7%);
    margin-top: -140px;
    background: #fff;
    z-index: 100;
    position: sticky;
}
.box-form .grid_2{
	margin-top: 27px;
}
.box-contact input, .box-contact select, .box-contact textarea{
    width: 100%;
    height: 48px;
    border: 1px solid #e4e4e4;
    padding: 12px 15px 11px;
    box-sizing: border-box;
    font: 14px var(--font2);
    color: #666;
    outline: none;
    background-color: #fdfdfd;
}
.box-contact textarea{
    margin-top: 29px;
    height: 90px;
}
.txt-contact{
    width: 30%;
    box-sizing: border-box;
    padding: 40px;
}
.txt-contact i{
    font-size: 25px;
    color: var(--color2);
    text-align: left;
    padding-right: 10px;
}
.txt-contact h4{
    font-size: 20px;
    color: var(--color1);
}
.txt-contact a{
    font-size: 16px;
    color: var(--color1);
}
.txt-contact .row{
    justify-content: flex-start;
}
.box-form .redes{
    margin-top: 40px;
}
.txt-contact .row{
    margin-bottom: 15px;
}

.slingle{padding: 60px 0px; background: url(https://psicologomiraflores.pe/wp-content/uploads/2024/04/icon.jpg); background-size: cover; background-position: top; text-align: center; color: #fff; background-attachment: fixed;
border-radius: 0px 0px 20px 20px; overflow: hidden;}
.slingle a{color: #08be08;}.slingle h1{font-size: 40px;}

aside{width: 282px;}
.page-serv article{width: 71%;}.page-serv {padding: 30px 0px;}
.wp-block-list{margin-left: 30px; padding: 10px 0px;}
.content h2{font-weight: 400; padding: 10px 0px 5px;}
.asd{padding: 20px; box-shadow: 0 5px 83px 0 rgba(27,26,26,0.12); border-radius: 30px;}
.content{color: #666; font-size: 15px; margin: 10px 0px; line-height: 28px;}
.content p, .content li{padding: 5px 0px; color: #2c698d;line-height: 35px; font-size: 19px; font-weight: 300;}
.direction{flex-direction: row-reverse;}
.asd ul{list-style: none;}
.asd h4{font-size: 20px; padding-bottom: 10px;}
.asd li a{display: block; background: var(--color1); padding: 10px 15px; width: 100%; color: #fff; margin-bottom: 10px; box-sizing: border-box; border-radius: 10px; font-size: 13px;}


hr.wp-block-separator{margin: 30px 0px 40px; border: 1px solid var(--color2);}
.asd.dark{margin-top: 20px; background: url(img/slider1.jpg); background-size: cover; position: relative; padding: 40px 20px; background-position: center;}
.asd.dark::before{content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background: var(--color2); opacity: 0.6; border-radius: 20px;}
.asd.dark h4{font-size: 20px; color: var(--color1);}.asd.dark span{position: relative; z-index: 2;}
.asd.dark p{font-size: 13px; color: var(--color1); padding: 15px 0px;}
.asd.dark a{background: #fff; color: var(--color1); padding: 10px 20px; display: inline-block; font-size: 20px; width: 100%; text-align: center; border-radius: 20px;
box-sizing: border-box;}




@media only screen and (max-width: 1165px){
    .container{width: 900px;}
    .logo img{height: 70px;}
    .nav-menu ul li a{font-size: 14px;}
    a.btn span{padding: 0px 20px;}
    .ph{display: none;} .cabecera .btn{margin-right: 0px;}
    .px{width: 48%;}
    .servicios .grid_3, footer .grid_4, .boxs{grid-template-columns: repeat(2, 3fr); display: grid;}
    .box-f .row-center{justify-content: start;}
    .parent {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    }
    
    .div1 { grid-area: 1 / 1 / 3 / 2; }
    .div2 { grid-area: 1 / 2 / 2 / 3; }
    .div3 { grid-area: 2 / 2 / 3 / 3; }
    .div4 { grid-area: 3 / 2 / 5 / 3; }
    .div5 { grid-area: 3 / 1 / 4 / 2; }
    .div6 { grid-area: 4 / 1 / 5 / 2; }
}


@media only screen and (max-width: 910px){
    .container{width: 600px;}
    #icoNav_movil{display: block;margin-right: 10px;}
    .nav-menu{position: fixed; left: -100%; width: 79vw; height: 100vh; background: var(--color3); padding: 30px 0px;top: 0; transition: all 0.4s; overflow: scroll; z-index: 999;}
    .nav-menu ul li{display: block;}
    .nav-menu ul li a{color: #000 !important; display: block; padding: 17px 40px !important; 
    border-bottom: 1px solid #ffffff2b; font-size: 14px !important; line-height: 27px; width: auto !important;}

    .nosotros .container>.row-center{display: block;}.txt-nos{width: 100%;}
    .banner1 .row-center{display: block;}
    .px, .banner1 .p2, .banner1 .p1{width: 100%; position: relative;}
    .banner1{padding-bottom: 100px;}
	.calidad .row-center img{width: 100%;}
    .servicios .grid_3{grid-template-columns: repeat(1, 3fr);}
    .page-serv .direction{display: block;}
    .page-serv article, .page-serv aside{width: 100%; display: block; margin-bottom: 20px;}
    .grid_4{    grid-template-columns: repeat(2, 3fr);}
    footer .row{display: block;}
    .copy{text-align: center; font-size: 13px;}.txt-psico{padding: 40px 5%;}.thumb-nos{width: 95%; margin: 0 auto;}
    .nosotros{background: linear-gradient(180deg, rgb(35 198 177 / 35%) 0%, rgba(255, 255, 255, 0) 46%)}
    .thumb-nos{margin-top: 50px;}.entry{text-align: center;}
	.nav-menu li ul.sub-menu{position: static;}
	.active + .item-content{max-height: 20em;}
	.list-container{padding: 0px 2%;}
	h4.btn-item{text-transform: inherit;}h4.btn-item::first-letter{text-transform: uppercase;}
	.item-content p{font-size: 16px;}
    
}
@media only screen and (max-width: 610px){
    .container{width: 400px; max-width: 95%;} 
     .entry .redes{display: none;}
	.form-page{
        padding-left: 0px;
    }
    .box-form .row-center{
        display: block;
    }
    .box-contact, .txt-contact{
        width: 100%;
    }
    .tabs_links{grid-template-columns: repeat(2, 3fr);}.title h3{display: inline;}
    .grid_3, .grid_2{grid-template-columns: repeat(1, 3fr);}
    .txt-nos .row-center{display: block;}
    .parent {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, 1fr);
    }
		.txt-proy{padding: 100px 10% !important;}
	.txt-proy br{display: none;}
    .div1 { grid-area: 1 / 1 / 2 / 2; }
    .div2 { grid-area: 2 / 1 / 3 / 2; }
    .div3 { grid-area: 3 / 1 / 4 / 2; }
    .div4 { grid-area: 5 / 1 / 6 / 2; }
    .div5 { grid-area: 4 / 1 / 5 / 2; }
    .div6 { grid-area: 6 / 1 / 7 / 2; }
    .txt-proy{padding: 180px 40px;}
    .servicios .grid_3, footer .grid_4, .boxs{grid-template-columns: repeat(1, 3fr);}
    .box-f{padding: 20px 0px;}.boxs{background: var(--color2); padding: 10px;}
    .calidad .row-center{grid-template-columns: repeat(2, 3fr); display: grid;}
    .banner1 .p1{padding: 80px 40px;}
    .txt-nos .row-center div img{width: 100%; margin-top: 10px; height: auto;}
    .banner1 .svg{bottom: -2px;}.cabecera .btn{display: none;}
    .title h4{font-size: 28px;}
    .logo img{height: 59px;}
    .psico{padding: 40px 0px 0px;}
    h4.btn-item{padding: 18px 0px;}.item-content p{padding: 20px 0px;}
}
@media only screen and (max-width: 470px){
    .cabecera .btn{display: none;}
    .grid_4{    grid-template-columns: repeat(1, 3fr);}
    
}