@import url('https://fonts.googleapis.com/css?family=Courgette:100,300,400,400italic,500,700&display=swap');

:root{
   --main-color:#29d978;
   --primary:#f0fff7;
   --black:#141414;
   --white:#fff;
   --bg: #f2f2f2;
   --light-black:#666; 
   --light-bg:#eee;

   --prymary: #007bff; 
   --secondary: rgb(229, 233, 236); 
   --third: #130f40; 
   --fourth: rgb(195, 198, 201); 
   --fifth: rgb(216, 223, 231); 
   --black: #222;
   --white: #fff; 
   --border: rgb(94, 94, 94);
   --celete: rgb(0, 141, 248); 
   --celestedos: rgb(108, 174, 224);
}

*{
   font-family: 'Courgette',sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none; text-decoration: none;
  /* text-transform: capitalize; */
   transition: .2s linear;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 6rem;
}

html::-webkit-scrollbar{
   width: 1rem;
}

html::-webkit-scrollbar-track{
   background: var(--white);
}

html::-webkit-scrollbar-thumb{
   background: var(--celete);
}

section{
   padding: 3rem 9%;
}

.heading{
   text-align: center;
   color: var(--third);
   text-transform: uppercase;
   margin-bottom: 4rem;
   margin-top: 2rem;
   font-size: 4rem;
}


.btn{
   display: inline-block;
   margin-top: 1rem;
   padding: 1rem 3rem; 
   border-radius: .5rem;
   cursor: pointer;
   font-size: 1.7rem;
   color: var(--white); 
   background-color: var(--celete); 
   margin-right: 10px; 
   margin-left: 10px;
   /* border: .1rem solid var(--third); */
} 


.btn:hover{
   background: var(--white);
   color: var(--third);
}

/* header */ 

.header{
   position: fixed;
   top: 0; left: 0;
   right: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 2rem 9%;
   background: var(--primary);
   box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
}

.header .logo{
   font-size: 2.2rem;
   font-weight: bolder;
   color: var(--third);
}

.header .navbar a{
   font-size: 1.7rem;
   margin-left: 2rem;
   color: var(--third);
}

.header .navbar a:hover{
   color: var(--celete);
}

#menu{
   font-size: 2.5rem;
   cursor: pointer;
   color: var(--third); 
   display: none;
}

/* end */

/* home */

.home{
   min-height: 100vh; 
   display: flex;
   align-items: center;
   justify-content: center; 
   background: url(images/header.jpg) no-repeat; 
   /* background: url(images/home.jpg) no-repeat; */
   background-size: cover;
   /*background-attachment: fixed;*/ /* Hace efecto parallax */
}


.home .content{
   max-width: 60rem;
   text-align: center;
} 

.home .content h3{
   font-size: 4rem;
   text-transform: uppercase;
   color: var(--white);
   padding-bottom: 3.5rem;
}

/* end */

/* about */ 

.about {
   background-color: var(--light-bg);
}

.about .row{ 
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin-top: 50px;
   gap: 2rem;
}

.about .row .content{
   flex: 1 1 40rem; 
}

.about .row .content h3{
   font-size: 3.5rem;
   color: var(--black);
   text-transform: uppercase;
}

.about .row .content p{
   font-size: 1.7rem;
   color: var(--black);
   padding: 2rem 0;
   line-height: 2;
}


.about .row .image{ 
   /* margin-top: 50px; */
   flex: 1 1 40rem;
}

.about .row .image img{
   width: 100%;
}

/* end */

/* services */

.services{
   background: var(--primary);
}

.services .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap: 2rem;
   margin-top: 8rem;
}

.services .box-container .box{
   text-align: center;
   padding: 3rem;
   background: var(--bg);
   box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
   border-radius: 1rem;
   margin-bottom: 4rem;
}

/*
.services .box-container .box:hover,
.services .box-container .box:hover .icon{
   background: var(--primary);
} */

.services .box-container .box .icon{
   width: 13rem;
   height: 13rem;
   line-height: 13rem;
   background: var(--primary);
   border-radius: 50%;
   margin: -7rem auto 2rem; 
   border: 1.8rem solid var(--light-bg); 
   /* border: 1.8rem solid var(--bg); */
}

.services .box-container .box .icon img{
   width: 5rem;
   margin-top: 2rem; 
   rotate: 45deg;
}

.services .box-container .box .content h3{
   font-size: 2rem;
   padding: 1rem 0;
   color: var(--third);
}

/* 
.services .box-container .box .content .line{
   background: var(--third);
   width: 30%;
   height: .4rem;
   margin: 2rem auto;
   border-radius: 5rem;
} */

.services .box-container .box .content p{
   font-size: 1.7rem;
   color: var(--black);
   line-height: 2;
}

.services .box-container .box .content ul{
   margin: 2rem 0;
   list-style: none;
}

.services .box-container .box .content ul li{
   padding: .5rem;
   font-size: 1.4rem;
   color: var(--black);
}

.services .box-container .box .content ul li i{
   font-size: 1.4rem;
   columns: var(--white);
   padding: .5rem;
   margin-right: 1rem;
   background: var(--main-color);
   border-radius: 50%;
}

/* end */ 


/* pricing */

.pricing{
   background: var(--light-bg);
   padding-bottom: 8rem;
}

.pricing .box-container{
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 6rem;
}

.pricing .box-container .box{
   height: 56rem;
   width: 32rem;
   border-radius: 1rem;
   box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
   overflow: hidden;
   background: var(--primary);
}
/* 
.pricing .box-container .active{
   background: var(--primary);
   transform: scale(1.1);
} */

.pricing .box-container .title{
   margin: 3rem 0;
   font-size: 2.2rem;
   color: var(--third);
   text-transform: uppercase;
}

.pricing .box-container .box .price{
   color: var(--third);
   margin-bottom: 1rem;
   padding-top: 1rem; 
   text-align: center;
}

.pricing .box-container .box .price .currency{
   font-size: 4rem;
   line-height: 3.5rem;
   font-weight: 300;
}

.pricing .box-container .box .price .amount{
   font-size: 5rem;
   line-height: 4.5rem;
   font-weight: 700;
}

.pricing .box-container .box .price .duration{
   font-size: 2rem;
   font-weight: 400;
   letter-spacing: .2rem;
} 

.pricing .box-container .box .price p{
   font-size: 1.7rem;
   font-weight: 400;
   letter-spacing: 0.2rem; 
   text-align: center;
}

.pricing .box-container .box ul{
   margin: 0 auto 2.5rem;
}

.pricing .box-container .box ul li{
   text-align: left;
   font-size: 1.7rem;
   padding-left: 3rem;
   margin: 1rem auto;
   color: var(--black);
}

.pricing .box-container .box ul li i{
   color: var(--third);
   padding: 0 1rem;
}

.pricing .box-container .box p{
   font-size: 1.4rem;
   color: var(--light-black);
   margin: 2rem auto;
   text-align: left;
   padding-left: 3.8rem;
}

/* end */ 

/* preguntas frecuentes */ 




/* end */ 

/* contact */

.contact{
   background: var(--light-bg);
}
 
.contact .row{
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
}
 
.contact .row .image{
   flex: 1 1 30rem; 
   background-color: var(--bg);
}
 
.contact .row .image img{
   height: 100%;
   width: 100%;
   object-fit: cover;
}
 
.contact .row form{
   flex: 1 1 50rem;
   padding: 4rem;
   padding-top: 3rem;
}
 
.contact .row form .inputBox{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
} 

.contact .row form .inputBox input,
.contact .row form .message input,
.contact .row form .message select,
.contact .row form textarea{
   padding: 1rem;
   margin: 1rem 0;
   font-size: 1.7rem;
   color: var(--light-color);
   text-transform: none;
   border: .1rem solid rgba(0,0,0,.3);
   border-radius: .5rem;
   width: 49%;
} 
 
.contact .row form .message input,
.contact .row form .message select{
   width: 100%;
}
 
.contact .row form textarea{
   width: 100%;
   height: 15rem;
   resize: none;
}
 
/* contact end */ 

/* footer */

.footer{
   background: var(--primary);
   text-align: center;
}
 
.footer .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 2rem;
}
 
.footer .box-container .box h3{
   text-transform: capitalize;
   font-size: 2.2rem;
   color: var(--third);
   padding: 1rem 0;
}
 
.footer .box-container .box p{
   font-size: 1.7rem;
   line-height: 2;
   color: var(--black);
   padding: .5rem 0;
}
 
.footer .box-container .box .share{
   margin-top: 1rem;
}
 
.footer .box-container .box .share a{
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.5rem;
   border-radius: 10%;
   font-size: 1.7rem;
   background: var(--primary-color);
   color: var(--white);
   margin-right: .3rem;
}
 
.footer .box-container .box .share a:hover{
   background: var(--secondary);
} 
 
.footer .credit{
   text-align: center;
   margin-top: 3rem;
   padding-top: 3rem;
   font-size: 2rem;
   text-transform: capitalize;
   color: var(--primary-color);
   border-top: .1rem solid var(--secondary);
}
 
.footer .credit span{
   color: var(--secondary);
}
 
/* footer */

/* media query */

@media(max-width:991px){

   html{
      font-size: 55%;
   }

   .header{
      padding: 2rem 3rem;
   }

   section{
      padding: 3rem 3rem;
   }

}

@media(max-width:768px){

   #menu{
      display: inline-block;
   }

   .header .navbar{
      position: absolute;
      top: 99%; left: 0; right: 0;
      background: var(--primary);
      border-top: .1rem solid #aaa;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

   .header .navbar a{
      display: block;
      margin: 2rem;
      color: var(--light-black);
   } 

   .about .row .content{
      text-align: center; 
   } 

   .contact .row form{
      flex: 1 1 50rem;
      padding: 2rem;
      padding-top: 1rem;
   }

}

@media(max-width:500px){

   /*
   html{
      font-size: 50%;
   } */

   .home {
      min-height: 60vh;
   } 

} 

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

.containerfp {
   padding: 3rem 7%; 
   background-color: var(--primary);
}

.containerfp .heading{
   font-size: 4rem;
   padding: 1.2rem;
   text-align: center;
   margin-bottom: 1.2rem;
}

.containerfp .accordion-containerfp{
   padding: 0 1.2rem;
}

.containerfp .accordion-containerfp .accordion{
   margin-bottom: 1.2rem;
   cursor: pointer;
}

.containerfp .accordion-containerfp .accordion.active .accordion-heading{
   background: var(--light-bg);
}

.containerfp .accordion-containerfp .accordion.active .accordion-heading h3{
   color: var(--third);
}

.containerfp .accordion-containerfp .accordion.active .accordion-heading i{
   color: var(--third);
   transform: rotate(90deg);
   transition: transform .2s .1s;
}

.containerfp .accordion-containerfp .accordion.active .accordion-content{
   display: block;
}

.containerfp .accordion-containerfp .accordion .accordion-heading{
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: var(--light-bg);
   padding: 1rem 1.2rem;
}

.containerfp .accordion-containerfp .accordion .accordion-heading h3{
   font-size: 2rem;
   text-align: center; 
   color: var(--third);
}

.containerfp .accordion-containerfp .accordion .accordion-heading i{
   font-size: 1.5rem;
}

.containerfp .accordion-containerfp .accordion .accordion-content{
   padding: 1rem 1.2rem;
   font-size: 1.8rem;
   background: var(--primary);
   border-top: 0;
   display: none;
   line-height: 2;
   animation: animate .2s linear backwards;
   transform-origin: top;
   text-align: center;
}

@keyframes animate{
   0%{
       transform: scaleY(0);
   }
}