body{
   background: #fff;
}

.banner{
   margin-top: 90px;
}

.banner img{
   width: 100%;
   max-height: 500px;
   object-fit: cover;
   object-position: 50% 10%;
}

/*---------Estilos botones banner---------*/

.accesos{
   position: relative;
   display: flex;
   margin-top: -7%;
   float: right;   
}

.ac1{
   padding: 15px;
   background: #66d9d9;
   color: #0d0e12;
   border-radius: 10px;
   text-decoration: none;
   font-size: 20px;
   margin-right: 10px;
   cursor: pointer;
}

.ac1:hover{
   background: #fff;
   color: #084d4d;
}

.ac1 i{
   margin-right: 10px;
}

/*---------Fin Estilos botones banner---------*/

/*------------estilos logo negocio----------*/

.logo2{
   display: flex;
   align-items: center;
   margin-top: -9.5%;
   margin-left: 20px;
}

.logo2 img{
   border-radius: 50%;
   min-width: 17%;
   min-height: 17%;
   max-width: 17%;
   max-height: 17%;
}

.logo2 h1{
   font-size: 50px;
   margin-left: 10px;
   margin-right: 10px;
   color: #fff;
   background: #38059d;
   padding: 10px;
   border-radius: 10px;
}

.logo2 i{
   font-size: 20px;
   color: #66d9d9; 
}


/*------------Fin estilos logo negocio----------*/

.container-all{
   display: flex;
   width: 95%;
   margin: auto;
   justify-content: center;
   
}
.container1{
   width: 60%;
   
}

.container2{
   width: 35%;
   margin-left: 40px;

}

/*------Estilos Categoria-------------*/
.categorias{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   margin-top: 30px;
   padding-bottom: 5px;
   
}

.title-category, .item1{
   display: flex;
   align-items: center;
}

.title-category{
   margin-left: 4%;
   padding-top: 5px;
   margin-bottom: -20px;
}

.categorias i{
   margin-right: 10px;
   background: #66d9d9;
   padding: 10px;
   border-radius: 50%;
   font-size: 15px;
   color: #fff;
}

.categorias h1{
   font-size: 20px;
}

.items-category{
   display: flex;
   margin-top: 20px;
   justify-content: center;
}

.item1{
   margin: auto;
}

.title-category i{
   background: #084d4d;
}


/*------Fin Estilos Catgoria-------------*/


/*------Estilos tarjeta whatsapp-------------*/
.chatwpp{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding-left: 20px;
   padding-bottom: 20px;
   margin-top: 30px;
   margin-bottom: 30px;
}

.title-chatwpp i{
   font-size: 30px;
   margin-right: 10px;
   color: #2db742;
}

.container-tarjeta, .title-chatwpp{
   display: flex;
   align-items: center;
}

.container-tarjeta{
   background: #2db742;
   padding: 0px;
   color: #fff;
   border-top-left-radius: 6em 6em;
   border-bottom-left-radius: 6.0em 6em;
   border-top-right-radius: 1em 1em;
   border-bottom-right-radius: 1em 1em;
   width: 90%;
   text-decoration: none;
}

.container-tarjeta img{
   width: 15%;
   border-radius: 50%;
   position: relative;
   left: -5px;
   z-index: 999;
}

.info-online{
   display: flex;
   align-items: center;
   height: 30px;
   position: relative;
   top: 20px;
}

.container-tarjeta .info h3{
   position: relative;
   top: 5px;
}

.container-tarjeta i{
   font-size: 25px;
   background: #fff;
   color: #2db742;
   border-radius: 50%;
   padding: 5px;
   margin-left: -4%;
   z-index: 9999;
}

.container-tarjeta .info{
   margin-left: 10px;
   display: flex;
   flex-direction: column;
   align-items: center; 
}

.online{
   position: relative;
   top: 0px;
   margin-left: 10px;
   font-size: 20px;
   background: rgba(255, 255, 255, 0.5);
   padding: 3px;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 5px;
}

.container-tarjeta .info h3{
   position: relative; 
   left: 0px;
}

/*------Fin Estilos tarjeta whatsapp-------------*/


/*---------Estilos texto descriptivo---------*/

.descripcion{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   padding: 30px;
}

.title-Descripcion{
   display: flex;
   align-items: center;
}

.title-descripcion h1{ 
   font-size: 50px;
   color: black;
}

.title-Descripcion i{
   font-size: 30px;
   margin-right: 10px;
}

.descripcion p{
   font-size: 15px;
   text-align: justify;
}

/*---------Fin Estilos texto descriptivo---------*/



/*------Estilos destacado--------*/

.destacado{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   padding: 20px;
   margin-top: 30px;
}

.title-destacado{
   display: flex;
   align-items: center;
}

.title-destacado i{
   font-size: 35px;
   margin-right: 10px;
   color: #66d9d9;
}

/*------Fin Estilos destacado--------*/


/*------Estilos mapa--------*/

.mapa{
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   padding: 20px;
   margin-top: 30px;
}

.title-mapa{
   display: flex;
   align-items: center;
}

.title-mapa i{
   font-size: 35px;
   margin-right: 10px;
   color: #66d9d9;
}

.info-mapa{
   display: flex;
   align-items: center;
}

.info-mapa a{
   margin-left: 20px;
   text-decoration: none;
   background: #66d9d9;
   padding: 10px;
   border-radius: 8px;
   color: #000;
}

.info-mapa a:hover{
  background: #084d4d;
   color: #fff;
   cursor: pointer;
}

.mapa iframe{
   max-width: 100%;
}


/*------Fin Estilos mapa--------*/

#caracteristicas{
   margin-bottom: 50px;
}

#caracteristicas .items-category{
  display: grid;
  grid-template-columns: repeat(2, 1fr);  
}

#caracteristicas #car1 .fa-bookmark{
   background: red;
}

#caracteristicas #car2 .fa-bookmark{
   background: #6b418c;
}

#caracteristicas .fa-store{
   background: #2db742;
}

#caracteristicas .fa-truck-fast{
   background: #f5a623;
}

#pago{
   margin-bottom: 50px;
   background: #f5a623;
}

#pago .fa-money-bill-wave{
   background: #2db742;
}

#wpp2 .container-tarjeta img{
   width: 30%;
}

#wpp2 .container-tarjeta h1{
   font-size: 20px;
   margin-top: 0px;
}

#wpp2 .container-tarjeta h2{
   font-size: 15px;
   margin-top: 0px;
}

#wpp2 .container-tarjeta h3{
   font-size: 15px;
   margin-top: 10px;
}





@media only screen and (max-width: 1000px) {

.banner img{
   min-height: 1300px;
   max-height: 1300px;
   object-position: 15% 50%;
}

.accesos{
   flex-direction: column;
   margin-top: 30%;
   width: 100%;
}

.logo2 h1{
   background: none;
   padding: 0;
}

.ac1{
   font-size: 50px;
   margin-bottom: 20px;
   padding: 30px;
   padding-left: 50px;
   padding-right: 50px;
   border-radius: 50px;
   text-align: center;
   width: 80%;
   margin: auto;
   margin-bottom: 20px;
}

.ac1 i{
   margin-right: 30px;
}

.logo2{
   position: relative;
   top: -680px;
   width: 100%;
   background: rgba(0, 0, 0, 0.7); 
   justify-content: center;
   margin-left: 0px;
   padding-top: 0px;
   padding-bottom: 0px;
   position: relative; 
   top: -738px;
}

.logo2 img{
   margin-right: 20px;
}

.logo2 h1{
   font-size: 100px;
}

.logo2 i{
   font-size: 50px;
   margin-left: 10px;
}

.container-all{
   flex-direction: column;
}

.container1{
   min-width: 100%;
}

.categorias h1{
   font-size: 50px;
}

.categorias i{
   font-size: 25px;
   padding: 30px;
}

.chatwpp{
   margin-top: 50px;
}

.title-chatwpp h1, .title-chatwpp i{
   font-size: 50px;
}

.container-tarjeta img{
   width: 25%;
}

.container-tarjeta i{
   font-size: 55px;
   padding: 10px;
}


.container-tarjeta h1
{
   font-size: 70px;
   margin-top: 120px;
   margin-left: 10px;
}

.container-tarjeta h2{
   font-size: 50px;
   margin-top: 120px;
}

.container-tarjeta h3{
   font-size: 40px;
   margin-top: 70px;
   margin-left: 10px;
}

.descripcion{
   margin-top: 50px;
}

.descripcion p{
   font-size: 20px;
   text-align: justify;
}

.title-Descripcion h1{
   font-size: 60px;
}

.title-Descripcion i{
   font-size: 60px;
}

.container2{
   width: 100%;
   margin-left: 0;
}

.destacado{
   margin-bottom: 50px;
   margin-top: 50px;
}
   
.title-destacado h1,
.title-destacado i,
.title-mapa h1,
.title-mapa i  
{
   font-size: 70px;
}

.title-destacado i{
   margin-right: 20px;
}

.mapa{
   margin-bottom: 50px;
   padding-bottom: 50px;
}

.mapa iframe{
   width: 100%;
   height: 600px;
}

.info-mapa{
   flex-direction: column;
}
   
.info-mapa h2{
   font-size: 60px;
}

.info-mapa a{
   font-size: 50px;
   padding: 20px;
   padding-left: 80px;
   padding-right: 80px;
   font-weight: bolder;
}

#wpp2{
   margin-bottom: 50px;
}
   
#wpp2 .container-tarjeta img{
   width: 25%;
}

#wpp2 .container-tarjeta h1{
   font-size: 60px;
   margin-top: 60px;
}

#wpp2 .container-tarjeta h2{
   font-size: 40px;
   margin-top: 60px;
}

#wpp2 .container-tarjeta h3{
   font-size: 25px;
   margin-top: 50px;
}

}

@media only screen and (min-width: 1000px) and  (max-width: 1290px){
.container-tarjeta img{
   width: 20%;
}

.logo2{
   margin-top: -10.6%;
}
}