/*
Theme Name: EnerGrouP

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

*/


*{padding: 0; margin: 0;}
body{--color1: #f9cd2f; --color2: #ea5501; --color3: #fff; --font1: "Space Grotesk", sans-serif; --font2: "Space Grotesk", sans-serif;}
.container{width: 1165px; margin: 0 auto;}
.row{display: flex; justify-content: space-between;}

.direction{flex-direction: row-reverse;}
.padded{padding: 100px 0px;}
.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: 30px; grid-row-gap: 30px;}
.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(--color2); width: 61px; height: 61px; border-radius: 50%; display: none;}
.movil{display: none;}
#icoNav_movil ul li {width: 100%;height: 2px;background: var(--color1);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: #616161; font-weight: 500;}


.modal-open{overflow-x: hidden;overflow-y: auto;}
.modal {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 122299;display: none;overflow: hidden;-webkit-overflow-scrolling: touch; outline: 0; background: rgba(0,0,0,.2); width: 100vw;}
.modal{ opacity: 0; transition: all 0.9s;}.modal.in{  opacity: 1;}
.menu-responsive{width: 70%; background: #fff; height: 100vh; padding: 30px 5%; box-sizing: border-box; overflow: scroll}
.menu-responsive .menu ul{list-style: none; padding-left: 20px;}
.menu-responsive .menu li {display: block;}
.menu-responsive .menu li a{display: block; width: 100%; padding: 12px 0px; border-top: 1px solid #f1f1f1;     font: 600 13px var(--font2);color: #375168; text-transform: uppercase;}
.close{position: absolute; right: 0; top: 0; background: #fff; border-radius: 0px; color: #000; border: none;}

.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); width: 195%; margin-top: 20px; 5px; box-sizing: border-box; border-radius: 12px; z-index: 22222222;}
.nav-menu li ul.sub-menu{}
.nav-menu li ul.sub-menu li a{width: 100%; display: block; color: #fff; font: 500 14px var(--font2);}
.nav-menu li ul.sub-menu li{display: block; padding: 5px 10px; box-sizing: border-box;}
.nav-menu li:hover > ul.sub-menu{max-height: 500px; padding: 10px; box-sizing: border-box;}
.page-template .cabecera{background: #090909e8;}
.nav-menu li ul.sub-menu li a{font-size: 13px; padding: 6px 0px;}

.btn-wp{background: transparent; color: #fff; padding: 10px 21px; border: 1px solid #fff;}
.nav-menu li ul.sub-menu li a:hover{color: var(--color1);}


.phone-btn{
    position: relative;
    padding: 5px;border-radius: 50%;
    margin-right: 12px; font-size: 24px;
    box-shadow: 0 0 0 2px rgba(101, 181, 48, 0.5);
    width: 40px;height: 40px; line-height: 40px;color: #65b530;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 rgba(101, 181, 48, 0.5);
}
@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 .row-center .row{width: 68%; justify-content: start; align-items: center;}
.cabecera a.btn{margin-right: 3%;}

.logo{display: block; width: 120px; background: #1f1f1f12; padding: 13px 5% ;}
.logo img{width: 100%;}

.redes{padding: 0px 25px; border-right: 1px solid #1f1f1f12; height: 93px; display: flex; align-items: center; margin-right: 10px;}
.redes a{color: #616161; display: inline-block; padding: 0px 8px;}.redes a i{ font-size: 18px;}

a.btn{border-radius: 10px; padding: 18px 25px; background: var(--color2); color: #fff; display: inline-block; font-weight: 600;}

.slider{position: relative; background: url(img/banner.jpg); padding: 170px 3%; background-size: cover; background-position: right;}
.txt-slider{left: 3%; top: 30%; max-width: 67%;}
.txt-slider span{display: inline-block; border: 1px solid #fff3; padding: 7px 12px; border-radius: 20px; color: #fff;}
.txt-slider h4{font: 700 49px var(--font1); color: #fff;}
.txt-slider p{color: #fff; padding: 25px 0px 50px; font-size: 20px; line-height: 27px;}

.txt-nos h5, h5{    -webkit-text-stroke-color: rgba(234, 85, 1, 0.65);
stroke: rgba(234, 85, 1, 0.65);letter-spacing: 4.6px;color: rgba(2, 1, 1, 0);-webkit-text-stroke-width: 1px;stroke-width: 1px;
text-transform: uppercase;}
.txt-nos h2, h3.title{font-size: 45px; color: #1f1f1f; font-weight: 800; padding-top: 10px; padding-bottom: 15px;}
.txt-nos p{font-size: 20px; color: #1f1f1f; margin: 15px 0px 30px; color: #616161;}
h3.title{padding-top: 0px; padding-bottom: 35px;}
h3.title strong{color: var(--color2);}

.thumb-nos{width: 40%; position: relative;}
.person{position: absolute; padding: 20px; background: var(--color2); border-radius: 20px; right: 0px; bottom: 20px; color: #fff; max-width: 220px;}
.person i{font-size: 50px;} .person p{font-size: 19px; color: #fff; padding-top: 15px; margin-top: 15px; border-top: 1px solid #cbcccdbf;}
.person span{font-size: 40px;}
.txt-nos{width: 49%;} 

.nosotros{padding: 70px 0px;}

.tabs_links{ width: 100%; margin: 0 auto; max-width: 100%; margin-bottom: 30px;}
.tabs_item{ width:100%;     background: #f2f2f2; 
    color: #353535;
    cursor: pointer;
    display: inline-block;
    transition: all 0.8s;
    padding: 5px 5px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;border-radius: 9px;
   
 border-right: 1px solid #fff;}
.tabs_item img{width: 80px; filter: opacity(66%);}
.tabs_item h2{font: 700 16px var(--font1); color: #616161;}.tabs_item.active img{filter: opacity(100%);}
.panels{position: relative; width: 100%;min-height: auto;margin: 0 auto; transition: all 0.5s ease-in-out;}
.tabs-container{margin-top: 30px; height: auto !important;}
.panel-item{position: absolute; top: 0;left: 0; width: 100%; height: 100%;opacity: 0.0; transition: all 0.8s; }
.active{z-index: 100;  opacity: 1; position:static;}
a.active{ background: #f2f2f2;  color: var(--color2); position: relative; box-shadow: 0px 0px 0px transparent;}
.tabs_item::before{ content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 2px; background: var(--color2); transition: all 0.4s ease-in-out;}
.tabs_item.active:before{width: 100%;}
.panel-item p{font-size: 16px; color: #616161;}
.thumb-nos .loc{position: sticky; top: 5px;}


.mascarado {
    width: 100%;
    height: 84%;
    -webkit-mask-image: url('img/mask.png'); /* Para Safari y Chrome */
    mask-image: url('img/mask.png');         /* Para Firefox */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    mask-size: cover;
}
.mascarado img{    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;}

.servicios{background: #f2f2f2; padding: 70px 0px;}

.txt-serv{padding: 15px; border-radius: 15px; background:  #fff; box-sizing: border-box; width: 82%; transform: translate(84px, -66px); transition: all 0.4s ease-in-out;}
article:hover .txt-serv{transform: translate(84px, -76px); box-shadow: 0px 0px 19px -8px #616161}
article:hover .txt-serv h2{color: var(--color2);}

.txt-indic{background: url(img/fondo1.jpg); background-size: cover; width: 50%; box-sizing: border-box; padding: 80px 5%;}
.thumb-indic{width: 50%;}
.txt-indic h5{-webkit-text-stroke-color: rgba(218, 218, 218, 0.65);
    stroke: rgba(244, 244, 244, 0.65);}
.txt-indic h3, .txt-indic p, .txt-indic h3 strong{color: #fff;}
.txt-indic .row-center{justify-content: start; padding-bottom: 40px;}
.txt-indic span{padding-left: 20px; display: inline-block;}
.txt-indic .row-center h3{font-size: 20px;}.txt-indic p{font-size: 17px;}


.indic{text-align: center; padding: 50px 0px;}
.indic h6{
-webkit-text-stroke-color: rgba(41, 41, 41, 0.65);
stroke: rgba(234, 85, 1, 0.65);
letter-spacing: 1px;
color: rgba(2, 1, 1, 0);
-webkit-text-stroke-width: 2px;
stroke-width: 2px; font-size: 88px;
text-transform: uppercase;}
.indic p{font-size: 20px; font-weight: 400;}
.thumb-indic{background: url(img/banner1.jpg); background-size: cover; width: 50%; background-position: right;}

.clientes{padding: 70px 0px 0px;}
.cl{background: #f7f7f7; border-radius: 20px; padding: 60px 20px; box-sizing: border-box; height: 180px;}

.breadcrum{display: flex; justify-content: space-between; overflow: hidden;}
.txt-bread{border-radius: 20px; background: url(img/fondo1.jpg); background-size: cover; transform: skewX(-20deg);  width: 56%;}
.thumb-bread{border-radius: 20px; background: url(img/serv.jpg); background-size: cover !important; background-position: center !important; transform: skewX(-20deg);  width: 43%; border-left: 5px solid #fff;}
.lo2{transform: skewX(20deg); padding: 90px 18%;}
.txt-bread h2{color: #fff; font-size: 50px;}
.txt-bread span a, .txt-bread span{color: #fff; font-size: 20px;}

footer{background: url(img/foot.webp); background-size: cover; background-position: top; padding: 90px 0px 0px;}
footer .grid_4 h4{padding-bottom: 25px; font-size: 24px; font-weight: 700; color: #fff; padding-top: 25px;}
footer p, footer a{font: 17px var(--font1); color: #cbcccd; line-height: 30px;}
footer ul{list-style: none;}
footer .grid_2{    gap: 20px;}
.redes-f a{color: rgba(255, 255, 255, 0.54);display: flex;align-items: center;justify-content: center;
width: 40px;height: 40px;font-size: 16px;background-color: rgba(255, 255, 255, 0.09);transition: 0.3s; margin-right: 10px;}
.redes-f{display: flex;}
.copy{    padding: 20px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: 90px;}
.copy p{font-size: 17px; line-height: 30px; color: #cbcccd; text-align: center;}
.copy a{color: var(--color2);}

#icoNav_movil{display: none;}
.blog{padding: 80px 0px;}
.thumb-img img{display: block; width: 100%;}.blog .grid_3 h2{padding: 10px 0px;}

.thumb-img{width: 100%; height: 300px;} .thumb-img img{width: 100%; height: 100%; object-fit: cover;}
p.subtitle{
    font: 15px var(--font2);
    max-width: 60%;
    color: #7b7b7b;
}

.page-serv{padding: 70px 0px;}aside{width: 330px;}aside .cnt{background: url(img/fondo1.jpg); padding: 30px; border-radius: 9px; margin-top: 30px;}
aside .cnt h3.title{width: 100%; color: #fff; font-size: 30px; padding-bottom: 10px;}
aside .cnt p{color: #f7f7f7; font-size: 13px;}
aside .cnt a{color: #fff; font-size: 22px; padding-top: 15px; display: block;}
aside .cnt a i{color: #fff;}

.page-serv{padding: 80px 0px;}
.page-serv article{width: 750px; max-width: 100%;}
.page-serv aside{width: 346px;}
.page-serv h1{font-size: 30px; color: #616161;}
.page-serv .content{color: #616161; font-size: 17px; line-height: 26px;}
.content p{padding: 15px 0px 5px;}
.content li{margin-left: 22px; color: var(--color2);}
.image1{width: 100%; height: 350px; border-radius: 20px; display: block; margin-bottom: 30px; background-size: cover !important;}
.page-serv aside h4{font-size: 24px; color: #616161; font-weight: 700;  margin-bottom: 15px;}

.list-serv{background: #f7f7f7; padding: 40px 30px 40px 30px;}.list-serv ul{list-style: none;}
.list-serv li{display: block;}.list-serv li a{    border: 1px solid rgba(2, 1, 1, 0.09);
    padding: 10px 20px;
    background: #ffffff;
    font-weight: 500;
    border-radius: 2px;
    font-size: 17px; display: block; margin-bottom: 10px; color: #616161;}


@media only screen and (max-width: 1200px){
    .container{max-width: 97%;}
    .grid_3{grid-template-columns: repeat(2, 3fr);}
}
@media only screen and (max-width: 910px){
    .nav-menu{display: none;}
    .slider{padding: 90px 3%;}
    .nosotros .row, .indicadores .row{display: block;}
    .thumb-nos, .txt-nos{margin: 0 auto; width: 500px; max-width: 100%;}
    .txt-indic, .thumb-indic{width: 100%; min-height: 300px;}
    .indic .grid_4,footer .grid_4{grid-template-columns: repeat(2, 3fr);}
    #icoNav_movil{display: flex; align-items: center; justify-content: center; margin-right: 10px;}
    .breadcrum{display: block;}
    .txt-bread{width: 100%; text-align: center;}.lo2{ padding: 69px 5%;}
    .breadcrum .thumb-bread{display: none;}
    .page-serv .row{display: block;}
    .page-serv article, .page-serv aside{margin: 0 auto;}.page-serv aside{margin-top: 40px;}
}
@media only screen and (max-width: 610px){
    .txt-slider h4{font-size: 30px;}
    .txt-slider p{font-size: 16px;}.txt-slider{max-width: 100%;}
    .txt-serv{transform: translate(156px, -78px); width: 69%;}
    .mascarado{width: 80%; margin: 0 auto;}
    .grid_3 {
        grid-template-columns: repeat(1, 3fr);grid-row-gap: 0px;
    }
    .indic h6{font-size: 74px;}
}
@media only screen and (max-width: 520px){    
    .indic .grid_4, footer .grid_4{ grid-template-columns: repeat(1, 3fr)}
    .txt-serv{transform: translate(72px, -78px);}.mascarado{width: 100%;}
    h3.title{font-size: 32px;}
    .txt-nos h2{font-size: 21px;}
    .cabecera a.btn{display: none;}
  
}