/* plugins/generic/sliderContent/swiper/css/sliderHome.css */
 .swiper {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top:20px;
     border-radius:0.5em;
}
/* Center the text in the middle of each slide */
 .swiper-wrapper p {
     margin: 0;
     text-align: center;
}
/* Update the styling for the slider text */
 .slider-text {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     transform: translateY(-50%);
     padding: 10px;
     z-index: 1000;
     background-color: rgba(255, 255, 255, 0.6);
     text-align: center;
}
/* Disable pointer events for slider text */
 .noclick {
     pointer-events: none;
}
/* Center the text within the slider text element */
 .slider-text p {
     margin: 10px 0;
}
/* Update styling for swiper slide */
 .swiper-slide {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
}
/* Ensure images maintain 100% width */
 .swiper-slide img {
     width: 100%;
     height: auto;
     max-width: none;
}
/* Minimum height for mobile devices (e.g., smartphones) */
 @media (max-width: 480px) {
     .swiper-slide img {
         min-height: 150px;
    }
}
/* Minimum height for small tablets (e.g., portrait orientation) */
 @media (min-width: 481px) and (max-width: 767px) {
     .swiper-slide img {
         min-height: 250px;
    }
}
/* Minimum height for large tablets (e.g., landscape orientation) */
 @media (min-width: 768px) and (max-width: 1023px) {
     .swiper-slide img {
         min-height: 300px;
    }
}
/* Minimum height for large desktop screens */
 @media (min-width: 1024px) {
     .swiper-slide img {
         min-height: auto;
    }
}
/* Optional: Limit the maximum height of the slider images */
 .swiper-slide img {
     max-height: 80vh;
    /* You can adjust the value as needed */
}
/* Center the slider images within their containers */
 .swiper-slide {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
 .swiper-pagination {
     position: sticky;
     --swiper-theme-color: #35afe5;
     display: flex;
     justify-content: center;
     margin: 20px 0;
}
 .swiper-button-prev {
     top: 0;
     height: 100%;
     width: 5rem;
     transition: all 0.3s ease;
     margin: 0px;
     left: 0;
}
 .swiper-button-next {
     top: 0 ;
     height: 100%;
     width: 5rem ;
     transition: all 0.3s ease;
     margin: 0px ;
     right: 0 ;
}
/* For screens up to 480px wide */
 @media (max-width: 480px) {
     .swiper-button-prev, .swiper-button-next {
         width: 2.5rem;
    }
     .swiper-button-prev:after, .swiper-button-next:after {
         font-size: 25px;
    }
}
/* For screens up to 768px wide */
 @media (min-width: 481px) and (max-width: 768px) {
     .swiper-button-prev, .swiper-button-next {
         width: 3.25rem;
    }
     .swiper-button-prev:after, .swiper-button-next:after {
         font-size: 30px;
    }
}
/* For screens up to 1024px wide */
 @media (min-width: 769px) and (max-width: 1024px) {
     .swiper-button-prev, .swiper-button-next {
         width: 4rem;
    }
     .swiper-button-prev:after, .swiper-button-next:after {
         font-size: 40px;
    }
}
/* Update styling for swiper navigation buttons */
 .swiper-button-prev, .swiper-button-next {
     --swiper-theme-color: rgb(255 255 255 / 50%);
     transition: 0.3s;
    /* Add a transition for the filter property */
}
 .swiper-button-next:after {
     content: '\276F';
}
 .swiper-button-prev:after {
     content: '\276E';
}
 .swiper-button-prev:hover, .swiper-button-next:hover {
     --swiper-theme-color: rgb(255 255 255 / 100%);
     transition: 0.3s;
    /* Add the same transition for hover state */
     background: rgba(0, 0, 0, 0.25);
}
/* Update styling for slider copyright and link */
 .slider-copyright {
     display: block;
     text-align: right;
     font-size: xx-small;
     line-height: 0;
}
 .slider-link {
     display: block;
}
 html.dark .swiper-button-prev, html.dark .swiper-button-next{
     color: #35afe542;
}
 html .swiper-pagination-bullet {
     background: #35afe5;
}
html.dark .swiper-pagination-bullet { background: black; }
 html .swiper-pagination-bullet.swiper-pagination-bullet-active {
     background: black;
}
html.dark .swiper-pagination-bullet.swiper-pagination-bullet-active { background: black; }
 html .swiper-pagination-bullet.swiper-pagination-bullet-active, html.dark .swiper-pagination-bullet.swiper-pagination-bullet-active {
     opacity: 1;
}
 html .swiper-pagination-bullet {
     opacity: 0.3;
     margin: 0 7px;
     height: 10px ;
     width: 25px ;
     border-radius: 5px;
}