/* Modified CSS (elementor-swiper-carousel.css) */  
.elementor-swiper-carousel {  
    position: relative;  
    overflow: hidden;  
    padding: 40px 0;  
     
}  

.carousel-background {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-size: 50%;  
    background-position: 130% 10%;  
    background-repeat: no-repeat;  
    opacity: 1;  
    transition: opacity 0.4s ease;  
   z-index:-1;  
}  

.elementor-swiper-carousel .swiper {  
    position: relative;  
    z-index: 2;  
    padding: 20px 0;  
}  

.elementor-swiper-carousel .swiper-slide {  
    width: 100%;  
    height: auto;  
    position: relative;  
    overflow: hidden;  
}  

.elementor-swiper-carousel .swiper-slide img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
}  



.elementor-swiper-carousel .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {  
    opacity: 1;  
} 

.graphical-element {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 50;
    opacity:0;
    transition: opacity 0.3s ease;
}

.graphical-element img {
	
	width:100%;
	max-width:120px !important;
    position:relative;
}

@media (min-width: 767px) and (max-width: 900px) {
 
    .swiper-slide-active .featured-image {
        margin-top:25% !important;
    }
    
}

@media (min-width: 901px) and (max-width: 1366px) {
 
    .swiper-slide-active .featured-image {
        margin-top:14% !important;
    }
    
}


@media (min-width: 767px) {  

.elementor-swiper-carousel .swiper-pagination {  
    position: relative;  
    margin: 40px 0;
	padding:40px 0;
	width:100%;
	float:left;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    gap:20px;
	

}  

/* Enhanced coverflow effect */  
.elementor-swiper-carousel .swiper-slide-active {  
    transform: scale(1.1) !important;  
    z-index: 2;  
}  

.elementor-swiper-carousel .swiper-slide-prev,  
.elementor-swiper-carousel .swiper-slide-next {  
    transform: scale(0.87) !important;  
    opacity:1;  
}  

.graphical-element img {
	
	width:100%;
	max-width:120px !important;
    position:relative !important;
}


}

.elementor-swiper-carousel .swiper-pagination-label {  
    width: 10px;  
    height: 10px;  
    background: rgba(0, 0, 0, 0.2);  
    opacity: 1;  
    transition: all 0.3s ease;  
}  

.elementor-swiper-carousel .swiper-pagination-label-active {  
    background: #000;  
    transform: scale(2.5);  
}  


.swiper-pagination-bullet.text-only {  
    background: none;  
    width: auto;  
    height: auto;  
    border-radius: 0;  
    opacity: 0.5;  
    color: #000;  
    margin: 0 5px;  
    font-size:22.5px;
    font-family:gesta;
    font-weight:400;
    text-transform:uppercase;
}  

.swiper-pagination-bullet.text-only.swiper-pagination-bullet-active {  
    opacity: 1;  
    color:#759A74;
    font-family:gesta;
    font-weight:600;
}  




.swiper-slide-active .graphical-element {  
    opacity: 1;  
}  

.note-box {
	
	float: left;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    top: 0%;
    margin:10px;
}



/* Responsive Styles */  
@media (max-width: 767px) {  

   

    .elementor-swiper-carousel .swiper-slide {  
        height: 300px;  
    }  

    .elementor-swiper-carousel .note-box {  
        max-width: 100%;  
        padding: 10px;  
    }  

    .elementor-swiper-carousel .swiper-button-next,  
    .elementor-swiper-carousel .swiper-button-prev {  
        width: 36px;  
        height: 36px;  
    }  

    .elementor-swiper-carousel .swiper-pagination {  
        /* Override desktop styles for mobile */  
        float: none;  
        justify-content: flex-start;  
        width: 100%;  
        display:inline-flex;
        position:relative;
        
        /* Enable horizontal scrolling */  
        overflow-x: auto;  
        overflow-y: hidden;  
        -webkit-overflow-scrolling: touch;  
        
        /* Remove scrollbar but keep functionality */  
        scrollbar-width: none;  
        -ms-overflow-style: none;  
        
        /* Add left padding and fade-out effect on right */  
        padding-left: 15px;  
        padding-right: 50px;  
        
        /* Create fade-out effect on the right */  
        mask-image: linear-gradient(to right, black 85%, transparent 100%);  
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);  
    }  
    
    /* Hide scrollbar for mobile */  
    .elementor-swiper-carousel .swiper-pagination::-webkit-scrollbar {  
        display: none;  
    }  
    
    /* Ensure pagination items don't wrap */  
    .elementor-swiper-carousel .swiper-pagination .swiper-pagination-bullet {  
        flex: 0 0 auto;  
    }  
    
    /* Add extra space at end for better UX */  
    .elementor-swiper-carousel .swiper-pagination::after {  
        content: '';  
        min-width: 20px;  
        height: 1px;  
        display: block;  
    }  


    .swiper-wrapper {

        margin-top:40px !important;
    }

    /* Enhanced coverflow effect */  
.elementor-swiper-carousel .swiper-slide-active {  
    transform: scale(1) !important;  
    z-index: 2;  
}  

.elementor-swiper-carousel .swiper-slide-prev,  
.elementor-swiper-carousel .swiper-slide-next {  
    transform: scale(0.87) !important;  
    opacity:1;  
}  

.graphical-element img {
    max-width: 110px !important;
    position: relative;
}

.note-box {
    top: -10% !important;
    
}

}  

/* Animation Classes */  
.elementor-swiper-carousel .swiper-slide-active {  
    z-index: 2;  
}  

.elementor-swiper-carousel .swiper-slide-prev,  
.elementor-swiper-carousel .swiper-slide-next {  
    z-index: 1;  
}