*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    scroll-behavior: smooth;
}
body{
    font-family: 'Open Sans', sans-serif;
}

.contenedor{
    width: 90%;
    max-width: 1200px;
    overflow: hidden;
    margin: auto;
    padding: 50px 0;
}

header{
    height: 100vh;
    background-image: linear-gradient(-225deg, rgba(255, 255, 255, 0.39) 0%, rgba(215, 255, 254, 0.39) 100%), url(../img/cheo.jpeg);  
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.head{
   text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
}
 .hamburguer{
    position: fixed;
    z-index: 10;
    top: 30px;
    right: 30px;
    background: #fff;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
 }

 .menu-navegacion{
    position: fixed;
    top: 0;
    right: 0;
    width: 30vw;
    height: 100%;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    transition: transform .3s ease-in-out; 
    transform: translate(110%);
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
 }

 .spread{
    transform: translate(0);
 }

 .menu-navegacion a{
    color: #fff;
    text-decoration: none;
 }

 .titulo{
    font-size: 60px;
    margin-bottom: 15px;
 }

 .copy{
    font-weight: 300;
    font-size: 25px;
 }

 /* Nuestro Servicio */

 .subtitulo{
    text-align: center;
    font-weight: 300;
    color: #000;
    margin-bottom: 40px;
    font-size: 40px;
 }

 .contenedor-servicio{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
 }

 .contenedor-servicio img{
    width: 45%;
 }

 .conet-servicio{
    width: 45%;
 }

 .service{
    margin-bottom: 20%;
 }

 .n-service{
    margin-bottom: 7px;
    color: #000;
 }

 .number{
    display: inline-block;
    background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
    width: 30px;
    height: 30px;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-weight: 700;
    line-height: 30px;
    margin-right: 5px;
 }

 .gallery{
   background: #f2f2f2;
 }

 .contenedor-galeria{
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
 }

 .img-galeria{
   object-fit: cover;
   width: 30%;
   display: block;
   margin-bottom: 3%;
   box-shadow: 0 0 6px rgba(0, 0, 0, .5);
   cursor: pointer;
 }

 .imagen-light{
   position: fixed;
   background: rgba(0, 0, 0, .6);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: translate(100%);
   transition: transform .2s ease-in-out;
 }

 .show{
   transform: translate(0);
 }

 .agregar-imagen{
   object-fit: cover;
   width: 60%;
   border-radius: 10px;
   transform: scale(0);
   transition: transform .3s .2s;
 }

 .showImage{
   transform: scale(1);

 }

 .close{
   position: absolute;
   top: 15px;
   left: 15px;
   width: 40px;
   cursor: pointer;
 }

 .experts{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
 }

 .cont-expert{
   width: 10%;
   text-align: center;
   margin-bottom: 20px;
 }

 .cont-expert img{
   width: 80%;
   display: block;
   margin: 0 auto;
 }

 .n-expert{
   display: inline-block;
   margin-top: 20px;
   width: 100%;
   font-weight: 400;
 }

 /* Footer */

 footer{
   background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
   padding-bottom: 0.1%;
 }

 .footer-content{
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding-top: 60px;
   padding-bottom: 40px;   
 }

 .contact-us{
   width: 45%;
   color: #010307;
 }

 .brand{
   font-weight: 500;
   font-size: 40px;
 }

 .brand+p{
   font-weight: 500;
 }

 .social-media{
   width: 50%;
   display: flex;
   justify-content: flex-end;
 }

 .social-media-icon{
   display: inline-block;
   margin-left: 20%;
   width: 60px;
   height: 60px;
   border: 1px solid #fff;
   border-radius: 50%;
   text-align: center;
   color: #fff;
 }

 .social-media-icon:hover{
   background: #fff;
   color: #764ba2;
 }

 .social-media-icon i{
   font-size: 30px;
   line-height: 60px;
 }

 .line{
   width: 90%;
   max-width: 1200px;
   margin: 0 auto;
   height: 2px;
   background: #fff;
   margin-bottom: 60px;
 }

 @media screen and (max-width:800px){
   .menu-navegacion{
      width: 50vw;

   }

   .titulo{
      font-size: 40px;
   }

   .contenedor-servicio img{
      width: 80%;
      margin-bottom: 40px;
   }

   .conet-servicio{
      width: 80%;
   }

   .service{
      margin-bottom: 30px;
   }

   .agregar-imagen{
      width: 80px;
   }

   .img-galeria{
      width: 45%;
   }

   .cont-expert{
      width: 80%;
   }

   .footer-content{
      justify-content: center;
   }

   .social-media{
      width: 80%;
      justify-content: space-evenly;
   }

   .social-media-icon{
      margin-left: 0;
   }

   .social-media i{
      margin-left: 0;
   }

   .contact-us{
      text-align: center;
      width: 80%;
      margin-bottom: 40%;
   }
 }

 @media screen and (max-width:500px){
   .menu-navegacion{
      width: 65vw;
   }

   .hamburguer{
      top: 20px;
      right: 20px;
   }

   .titulo{
      font-size: 30px;
   }

   .subtitulo{
      font-size: 30px;
   }

   .agregar-imagen{
      width: 95%;
   }

   .img-galeria{
      width: 95%;
   }

   .social-media{
      width: 100%;
   }

   .contact-us{
      width: 90%;
   }

 }
 .btn-wsp{
   position: fixed;
   width: 55px;
   height: 55px;
   line-height: 55px;
   bottom: 30px;
   right: 30px;
   background: #0df053;
   color: #fff;
   border-radius: 50px;
   text-align: center;
   font-size: 30px;
   box-shadow: 0px 1px 10px rgba(0, 0, 0, .3);
   z-index: 100;
 }

 .btn-wsp:hover{
   text-decoration: none;
   color: #0df053;
   background: #fff;
 }

 .en{
   color: #333;  
 }
 .es{
   color: #00a1ff;   
 }
.check{
   position: relative;
   width: 50px; 
}
.check:before{
   content: '';
   position: absolute;
   width: 50px;
   height: 25px;
   background: #333;
   border-radius: 25px;
}
.check:after{
   content: '';
   position: absolute;
   width: 25px;
   height: 25px;
   background: #fff;
   border-radius: 25px;
   transition: 0.25s;
   border: 2px solid #333;
   box-sizing: border-box;
}
.check:checked:after{
   left: 25px;
   border: 2px solid #00a1ff;
}
.check:checked:before{
   background: #00a1ff;
}