/* Google Fonts*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-padding-top:  2rem;
    text-decoration: none;
    scroll-behavior: smooth;
    list-style: none;
    font-family: "Poppins", sans-serif;



}

/*Variables Para CSS*/

:root{

--main-color:#008148;
--second-color:#1e392f;


}

section{

padding: 50px 10%;

}


*::selection{

  color: #fff;
  background: var(--main-color);

   
  
}



img{

    width: 100%;

}


/*Estilos para el Menu*/

header{

    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #fff;
    box-shadow: 0 4px 41px rgb(14, 55, 54 / 14%);
    transition: 0.2s; 

}

.navbar{

display: flex;


}

.navbar a{

font-size: 1rem;
padding: 11px 20px;
color: var(--second-color);
font-weight: 600;
text-transform: uppercase;

}

.navbar a:hover{

color: var(--main-color);

}

/*Icono Hamburger Menu*/

#menu-icon{

    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
    display: none;

}

/*Tamaño del Logo*/

.logo img{

    width: 115px;

}

/*Estilos para el Home*/

.home{

    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-image: url("img/parasol1.jpeg");
    gap: 1rem;


}

/*Posicion de las letras del home*/ /* Parte principal del inicio "Index"*/ 
.home-text{

    flex: 1 1 17rem;

}

.home-img{

    flex: 1 1 17rem;

}

/* Animacion de la imagen principal del home*/
.home-img img{

    animation:animate 3s linear infinite;


}

@keyframes animate{

    0%{
        transform: translate(-11px, 0);
    }
    50%{
        transform: translate(-0px, -11px);
    }
    100%{
        transform: translate(-11px, 0);
    }
}


/*Tipografia del apartado de la imagen de al lado*/

.home-text span{
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    

}

.home-text h1{

    font-size: 3.2rem;
    color: #fff;
    font-weight: bolder;


}


.home-text h2{
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    margin: 0.5rem 0 1.4rem;

}


.btn {
  display: inline-block; /* Asegura que se comporte como un botón */
  padding: 8px 15px; /* Mejora el tamaño para mayor equilibrio */
  border: 2px solid #000000; /* Mantiene el borde negro */
  border-radius: 20px; /* Esquinas redondeadas */
  color: #000000; /* Texto negro */
  font-weight: 500; /* Negrita para mayor legibilidad */
  text-align: center; /* Centra el texto dentro del botón */
  text-decoration: none; /* Quita subrayado */
  transition: background 0.3s ease, color 0.3s ease; /* Efecto suave al hover */
}

.btn:hover {
  color: #e4dddd; /* Texto claro al pasar el mouse */
  background: var(--second-color); /* Color de fondo del hover */
}


.btn1 {
  display: inline-block; /* Asegura que se comporte como un botón */
  padding: 8px 15px; /* Mejora el tamaño para mayor equilibrio */
  border: 2px solid #fff; /* Mantiene el borde negro */
  border-radius: 20px; /* Esquinas redondeadas */
  color: #fff; /* Texto negro */
  font-weight: 500; /* Negrita para mayor legibilidad */
  text-align: center; /* Centra el texto dentro del botón */
  text-decoration: none; /* Quita subrayado */
  transition: background 0.3s ease, color 0.3s ease; /* Efecto suave al hover */
}

.btn1:hover {
  color: #e4dddd; /* Texto claro al pasar el mouse */
  background: var(--second-color); /* Color de fondo del hover */
}

.btn2 {
  display: inline-block; /* Asegura que se comporte como un botón */
  padding: 8px 15px; /* Mejora el tamaño para mayor equilibrio */
  border: 2px solid #D1932E; /* Mantiene el borde negro */
  border-radius: 20px; /* Esquinas redondeadas */
  color: #D1932E; /* Texto negro */
  font-weight: 500; /* Negrita para mayor legibilidad */
  text-align: center; /* Centra el texto dentro del botón */
  text-decoration: none; /* Quita subrayado */
  transition: background 0.3s ease, color 0.3s ease; /* Efecto suave al hover */
}

.btn2:hover {
  color: #e5ff00; /* Texto claro al pasar el mouse */
  background: var(--second-color); /* Color de fondo del hover */
}

.btn3 {
  display: inline-block; /* Asegura que se comporte como un botón */
  padding: 8px 15px; /* Mejora el tamaño para mayor equilibrio */
  border: 2px solid #D1932E; /* Mantiene el borde negro */
  border-radius: 20px; /* Esquinas redondeadas */
  color: #D1932E; /* Texto negro */
  font-weight: 500; /* Negrita para mayor legibilidad */
  text-align: center; /* Centra el texto dentro del botón */
  text-decoration: none; /* Quita subrayado */
  transition: background 0.3s ease, color 0.3s ease; /* Efecto suave al hover */
}

.btn3:hover {
  color: #e5ff00; /* Texto claro al pasar el mouse */
  background: var(--second-color); /* Color de fondo del hover */
}



/*Segunda apartado de la pagina*/


/* Contenedor del slider */


.container1{


    background-color: #fff;



}
.slider-wrapper {
    position: relative;
    max-width: 1000px; /* Ancho máximo del slider */
    margin: 0 auto;
    aspect-ratio: 16 / 9; /* Proporción 16:9 */
    overflow: hidden; /* Oculta las partes que se salen del contenedor */
    border-radius: 0.5rem; /* Bordes redondeados */
    box-shadow: 0.25rem 0.5rem #21212126; /* Sombra para darle estilo */
  }
  
  /* Slider interno */
  .slider {
    display: flex;
    width: 100%; /* Ocupa el ancho del contenedor */
    height: 100%; /* Asegura que mantenga la proporción 16:9 */
    animation: slideAnimation 12s infinite; /* Animación automática */
  }
  
  /* Imágenes dentro del slider */
  .slider img {
    flex: 1 0 100%; /* Cada imagen ocupa el 100% del contenedor */
    object-fit: cover; /* Ajusta las imágenes sin distorsión */
    scroll-snap-align: start; /* Alinea las imágenes en cada slide */
  }
  
  /* Navegación de puntos */
  .slider-nav {
    display: flex;
    column-gap: 1rem;
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1; /* Coloca los puntos encima del slider */
  }
  
  /* Estilos para cada punto */
  .slider-nav a {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.75;
    transition: opacity ease 250ms;
  }
  
  .slider-nav a:hover {
    opacity: 1; /* Cambia la opacidad al pasar el cursor */
  }

/* Estilo para el título del slider */
.slider-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1rem;
  }
  
  
  
  
  /* Animación para el slider */
  @keyframes slideAnimation {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(-200%);
    }
    75% {
      transform: translateX(-300%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  /* Responsividad */
  @media (max-width: 1024px) {
    .slider-wrapper {
      max-width: 90%; /* Reduce el ancho en tablets */
    }
  }
  
  @media (max-width: 768px) {
    .slider-wrapper {
      max-width: 100%; /* Ocupa todo el ancho en dispositivos móviles */
      border-radius: 0.25rem; /* Bordes más pequeños */
    }
  }
  
  @media (max-width: 480px) {
    .slider-wrapper {
      aspect-ratio: 4 / 3; /* Cambia a proporción 4:3 en pantallas muy pequeñas */
    }
    .slider img {
      object-fit: contain; /* Evita cortes en pantallas pequeñas */
    }
  }
  


/*Final de la seccion 2 "Shop" Slider*/



/*Cuarto apartado de la pagina*/

.heading{

text-align: center;


}

.heading span{

    font-size: 1rem;
    font-weight: 600;
    color: #D1932E;
  
}

.heading h1{

    font-size: 2rem;
    color: #D1932E;


}


.container{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
    
}

.delivery{

background-color: #2c2028;

}


.delivery-img, 
.app-img{

    flex: 1 1 21rem;
}

.delivery-text,
 .app-text{

    flex: 1 1 21rem;

}

.delivery-text h2,
.app-text h2{

    font-size: 1.8rem;
    color: #D1932E;
}

.delivery-text h2{

    font-size: 1.8rem;
    color: #D1932E;
}

.app-text p{

  color: #000000;
}


.delivery-text p{
    margin: 0.5rem 0 1rem;
    text-align: justify;
    color: #fff;

}

/*Final de la seccion 4 "Delivery" Slider*/

/*Comienzo de la seccion 5 "About" Slider*/

.about{

  display: flex;
  flex-wrap: wrap;
  background:#8BA99A;
  gap: 1.5rem;

}



.about-img{

flex: 1 1 17rem;


}


.about-text{

    flex: 1 1 17rem;
 
  
}

.about-text h2{

  font-size: 1.2rem;
  color: #fff;

}

.about-text p{

  margin: 0.5rem 0 1rem;
  text-align: justify;
  color: #000000;
  


}

/*Comienzo de la seccion 6 "About" Slider*/

.contact{

  display: flex;
  flex-direction: column;
  align-items: center;
 
  
}

.social a{

font-size: 27px;
margin: 0.5rem;


}

.social a .bx{

padding: 5px;
color: #fff;
background: #000000;
border-radius: 50%;

}

.social a .bx:hover{

background-color: var(--main-color);


}

.links{


  margin: 1rem 0 1rem;

}

.links a{

  font-size: 1rem;
  font-weight: 500;
  color: var(--second-color);
  padding: 1rem;

}

.links a:hover{

  color: var(--main-color);


}

.contact p{

  text-align: center;

}

/*Boton wpp*/

.btn-wsp{
  position:fixed;
  width:60px;
  height:60px;
  line-height: 63px;
  bottom:25px;
  right:25px;
  background:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-wsp:hover{
  background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-wsp{
      width:63px;
      height:63px;
      line-height: 66px;
}
}



@media (max-width: 1150px) {

  header{

    padding: 18px 7%;
  }

  section{
    padding: 50px 7%;

  }
  .home-text h1{

    font-size: 3rem;
   
  }

   .home-text h2{

    font-size: 1.5rem;

   }


}

@media (max-width: 991px) {

  header{

    padding: 18px 4%;
  }

  section{
    padding: 50px 4%;

  }
  
}

@media (max-width: 768px) {

  header{

    padding: 11px 4%;
  }

  #menu-icon{

    display: initial;
  }
 
  header .navbar{

    position: absolute;
    top: -500px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 4px 41px rgb(14, 55, 54 / 14%);
    border-radius: 2px solid var(--main-color);
    transition: 0.2s;
    text-align: left;
    

  }
  .navbar.active{

    top: 100%;
  }

  .navbar a{

    padding: 1.5rem;
    display: block;
    color: var(--second-color);
  }
  
  .home-text span{

    font-size: 0.9rem;
  }
  
  .home-text h1{

    font-size: 2.4rem;

  }

   .home-text h2{

    font-size: 1.2rem;

   }
}



@media (max-width: 768px) {

  .home-text{

    padding-top: inherit;

  }

 

  .shop-container .box{

    margin-top: 6rem;


  }
  .heading h1{

    font-size: 1.5rem;

  }

  .heading span{

    font-size: 0.9rem;


  }

  .about{

    flex-direction: column-reverse;
  }

  .links{

    display: flex;
    flex-direction: column;
  }


}

@media (max-width: 364px) {

  .links{

    display: flex;
    flex-direction: column;
  }

}