* {
    margin: 0;
    padding: 0;
}

.slider-container {
    position: relative;
    height: 60vh; /* Reduce the height of the container */
    width: 100%;
    background-color: #85858515;
    overflow: hidden; /* Ensure no overflow */
}

.slider-container2 {
    position: relative;
    height: 60vh; /* Reduce the height of the container */
    width: 100%;
    background-color: #85858515;
    overflow: hidden; /* Ensure no overflow */
}

.slider-container3 {
    position: relative;
    height: 60vh; /* Reduce the height of the container */
    width: 100%;
    background-color: #85858515;
    overflow: hidden; /* Ensure no overflow */
}

.slider input {
    visibility: hidden;
    display: none;
}

.slider2 input {
    visibility: hidden;
    display: none;
}

.slider3 input {
    visibility: hidden;
    display: none;
}


.slider-buttons {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: 5px; /* Adjust the position of the buttons */
    gap: 10px;
}

.slider-buttons2 {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: 28px; /* Adjust the position of the buttons */
    gap: 10px;
}

.slider-buttons3 {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: 28px; /* Adjust the position of the buttons */
    gap: 10px;
}


.slider-buttons label {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 20px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1;
    transition: 300ms ease-in-out;
}

.slider-buttons2 label {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 20px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1;
    transition: 300ms ease-in-out;
}

.slider-buttons3 label {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 20px;
    opacity: 0.5;
    cursor: pointer;
    z-index: 1;
    transition: 300ms ease-in-out;
}

.slider-buttons label:hover {
    scale: 1.2;
    opacity: 1;
}

.slider-buttons2 label:hover {
    scale: 1.2;
    opacity: 1;
}

.slider-buttons3 label:hover {
    scale: 1.2;
    opacity: 1;
}


.slider input#SlideOne:checked ~ .slider-buttons label[for="SlideOne"],
.slider input#SlideTwo:checked ~ .slider-buttons label[for="SlideTwo"] {
    opacity: 1;
    scroll-margin: 1.2;
    width: 40px;
}

.slider2 input#SlideThree:checked ~ .slider-buttons2 label[for="SlideThree"],
.slider2 input#SlideThree:checked ~ .slider-buttons2 label[for="SlideFour"] {
    opacity: 1;
    scroll-margin: 1.2;
    width: 40px;
}

.slider3 input#SlideSixth:checked ~ .slider-buttons3 label[for="SlideSixth"],
.slider3 input#SlideSeventh:checked ~ .slider-buttons3 label[for="SlideSeventh"] {
    opacity: 1;
    scroll-margin: 1.2;
    width: 40px;
}

.slider-content {
    position: relative;
    width: 300%; /* Ensure it can hold 3 slides */
    display: flex;
    transition: 400ms ease-in-out;
}

.slider-content2 {
    position: relative;
    width: 300%; /* Ensure it can hold 3 slides */
    display: flex;
    transition: 400ms ease-in-out;
}

.slider-content3 {
    position: relative;
    width: 300%; /* Ensure it can hold 3 slides */
    display: flex;
    transition: 400ms ease-in-out;
}


.slide {
    position: relative;
    width: 100vw; /* Each slide takes 100% of the viewport width */
    height: 60vh; /* Adjust the height of the slides to match the container */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain; /* Ensure the image fits within the container */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the image */
}

.slide2 {
    position: relative;
    width: 100vw; /* Each slide takes 100% of the viewport width */
    height: 60vh; /* Adjust the height of the slides to match the container */
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain; /* Ensure the image fits within the container */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    background-position: center; /* Center the image */
}

.slide3 {
    position: relative;
    width: 20vw; /* Each slide takes 100% of the viewport width */
    height: 20vh; /* Adjust the height of the slides to match the container */
    display: flex;
    justify-content: center;
    align-items: center;
}


.firstslide {
    background-image: url('/img/nuevosmodelosblanco.jpeg');
}

.secondslide {
    background-image: url('/img/nuevosmodelosrosas.jpeg');
}

.thirdslide {
    background-image: url('/img/Recienllegados1.jpeg');
}

.fourthslide {
    background-image: url('/img/Recienllegados2.jpeg');
}

.fifthslide {
    background-image: url('/img/enviosatodoelpais.jpeg');
}

.sixthslide{
    background-image: url('/img/safetyboot.jpeg');
}


.slider input#SlideOne:checked ~ .slider-content {
    left: 0;
}

.slider input#SlideTwo:checked ~ .slider-content {
    left: -100vw;
}

.slider2 input#SlideThree:checked ~ .slider-content2 {
    left: 0;
}

.slider2 input#SlideFour:checked ~ .slider-content2 {
    left: -100vw;
}

.slider3 input#SlideSixth:checked ~ .slider-content3 {
    left: 0;
}

.slider3 input#SlideSeventh:checked ~ .slider-content3 {
    left: -100vw;
}