/*========== Fonts Import ==================*/
@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');
@import "compass/css3";


/*========== Root Variables ==================*/
:root {
    --first-color: rgba(6, 46, 56, 0.753);
    --second-color: rgba(5, 97, 89, 0.58);
    --btn-color: #ca1010cb; /* Red color for the button */
    --overlay-color: rgba(235, 124, 170, 0.5); /* Overlay color */
    --width: 220px;
    --pink:rgba(230,0,98,.75);

}

/*========== Global Styles ==================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}




body, html {
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif;
}

/*========== Hero Section ==================*/
.botox-hero {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh;
   background: url('../img/belleza/portada00.jpg') no-repeat center center/cover;
}


.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--overlay-color);
    z-index: 1;
}

.hero-content {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around; /* This aligns the text and image side by side */
    z-index: 2;
   /* background: ;*/
}

.hero-content h1{
    font-size:2.5em;
    font-family: 'Poppins',sans-serif;
}


.hero-content h2{
    font-family: 'Dancing Script';
    font-size:1.3em;
}

.hero-content p{
    font-size:1em;
    font-weight: lighter;
}



.text-content {
    width: 50%;
    color: white;
    text-align: center;
    z-index: 2;
    padding: 20px;
}

.image-content {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.image-content img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/*========== Button Styling ==================*/
.hero-button {
    padding: 10px 20px;
    background-color: var(--btn-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: .9em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hero-button:hover {
    background-color: darkred;
}


.products-slider{
   
    margin: 200px 40px;
}
/* Estilos para hacer el slider responsivo */
.swiper-container {
    width: 100%; /* Utiliza todo el ancho del contenedor */
    max-width: 100%; /* Asegura que no se desborde en pantallas pequeñas */
}

.swiper-slide img {
    width: 300px; /* Ajusta el tamaño de las imágenes para que se ajusten al contenedor */
    height: 300px;     /* Mantiene la proporción de aspecto */
    object-fit: cover;
}

/*========== GALERY ==================*/

.gallery-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px;
   /* padding: 20px;
    grid-gap:10px;*/
}

.gallery__item{
    position:relative;    
}
.gallery__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.gallery__title{
    position: absolute;
    bottom: 0;
    color: rgba(0, 0, 0, 0.74);
    background: linear-gradient(rgba(255,255,255,0),rgba(255, 255, 255, 0.8));
    width: 100%;
    margin: 0;
    padding: 10px;
}

.gallery__item:nth-chlid(3){
    grid-column-start: span 2;
}

.gallery__item:nth-chlid(5){
    grid-column-start: span 2;
}

.gallery__item:nth-chlid(7){
    grid-column-start: span 2;
}

@media(min-width:768px){
    .gallery-container{
       grid-template-columns: repeat(4, 1fr);
    }

    .gallery__item:nth-chlid(3){
        grid-column-start: span 4;
    }
    
    .gallery__item:nth-chlid(5){
        grid-column-start: span 2;
    }
    
    .gallery__item:nth-chlid(7){
        grid-column-start: span 3;
    
    }
}


/*========== Responsive Adjustments ==================*/
@media (max-width: 768px) {
    .hero-content{
        flex-direction: column;
    }

    .text-content, .image-content {
        width: 100%;
        padding: 10px;
    }

    .image-content img {
        height: 30%; /* Fixed height for smaller devices */
    }

}


/*-------------slider------------*/

.slider{
    margin-top: 50px;
    display: flex;
    height: auto;
    width: auto;
    overflow: hidden;
    align-items: center;
}

.slider:before{
    display:absolute;
    z-index: 1;
    left: 0;
    content: "";
    width: 24%;
    height: 110px;
    background: linear-gradient(-90deg,hsla(0,0%,97%,0),#f7f7f7);
}

.slider:after{
    display:absolute;
    right: 0;
    content: "";
    width: 24%;
    height: 110px;
    background: linear-gradient(-90deg,hsla(0,0%,97%,0),#f7f7f7);

}

.slider .slide-track{
    display: flex;
    animation: scroll 35s linear infinite;
    -webkit-animation:scroll 35s linear infinite;
    width: calc(240px * 10);
}

.slider .slide{
    display: flex;
}

.slider .slide img{

    padding: 5px;
    background-color: #f7f7f7;
    cursor: pointer;
    margin: 20px;
    border-radius: 8px;
    box-shadow:rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px ;
}

@keyframes scroll{
    0%{
        -webkit-transform: translateX(0);
        transform: translate(0);
    }
    100%{
        -webkit-transform: translateX(calc(-240px*5));
        transform: translate(calc(-240px*5)0);
    }
}