.splide {
    width: 100% !important;
    height: 80vh;
  }

  .splide__slide img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
  }

  .slider-content {
    position: relative;
    text-align: center;
    color: white;
  }

  .slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .slide-text h2 {
    font-size: 70px;
    font-weight: 700;
  }

  .slide-text p {
    font-size: 18px;
  }

  .btn-primary {
    padding: 10px 30px;
    font-size: 18px;
    background-color: #386cdb;
  }
  
/* Style the Splide arrows */
.splide__arrow {
border-radius: 50%;
color: white !important; /* Arrow color */
font-size: 18px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
opacity: 0; /* Initially hide the arrows */
transition: opacity 0.3s ease; /* Smooth transition for hover effect */
}

.splide__arrow--prev {
top: 300px;
left: 40px;
}

.splide__arrow--next {
top: 300px;
right: 40px;
}

/* Show arrows on hover over the Splide container */
.splide-deals:hover .splide__arrow {
opacity: 1;
}
.mob{
display: none !important;
}

@media (max-width: 992px) {
.mob{
display: block !important;
padding: 12px;
}
.prod1{
width: 100% !important;
}
.desktop-view{
display: none;
}
}
.owl-nav button {
position: absolute;
top: 35%;
background: none;
border: none;
font-size: 40px; /* Increase the size of the buttons */
color: #007bff; /* Set button color */
font-weight: bold;
transition: color 0.3s ease;
}

.owl-nav button:hover {
color: #0056b3; /* Darker blue on hover */
}

.owl-prev {
left: -40px; /* Adjust the positioning of the previous button */
}

.owl-next {
right: -40px; /* Adjust the positioning of the next button */
}

/* Optional: Customize the icons for the buttons */
.owl-prev::before, .owl-next::before {
content: '\f104'; /* Font Awesome left icon */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}

.owl-next::before {
content: '\f105'; /* Font Awesome right icon */
}
.mobilee{
display:none;
}
@media(max-width: 500px){
.mobilee{
display: block;
}
}
.prod12{
width: 260px !important;
border: 2px solid red;
}
.prod12 img {
width: 100%; /* Maintain responsive width */
height: 150px; /* Fixed height for all images */
object-fit: cover; /* Ensure images are cropped to fit the container */
}