/* Slider Container */
.logo-slider {
    /* Responsive width */
    width: 90%; 
    margin: 50px auto;
    position: relative; /* Arrows ke liye */
}

/* Har Slide (logo-slide) ke liye styling */
.logo-slide {
    padding: 10px; 
    text-align: center;
    outline: none; 
}

/* Logo Image ke liye styling */
.logo-slide img {
    /* Base max-width for larger screens */
    width: 100%;
    max-width: 120px; 
    height: auto;
    opacity: 0.6; 
    transition: all 0.3s ease; 
    display: inline-block; /* Margin auto center ke liye */
}

/* Center Logo par Zoom Effect */
.slick-center img {
    opacity: 1; 
    transform: scale(1.3); 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

/* Hover Effect: Jab kisi logo par mouse le jaayen */
.logo-slide img:hover {
    transform: scale(1.1); 
    opacity: 1;
}

/* Center Logo par Hover Effect (Adhik Zoom) */
.slick-center img:hover {
    transform: scale(1.5); 
}

/* Navigation Arrows ki styling */
.slick-prev, .slick-next {
    z-index: 10;
}

.slick-prev:before, .slick-next:before {
    /* Arrow Icon ka rang badalkar #104fa3 karen */
    color: #104fa3 !important; 
    font-size: 30px !important;
}

/* Dots ko puri tarah se chhupane ke liye */
.slick-dots {
    display: none !important;
}

/* --- Responsive Changes --- */

/* Tablet aur Mobile Devices ke liye Media Query (Screen size 768px ya usse kam) */
@media (max-width: 768px) {
    /* Logo ko mobile par thoda bada rakhen */
    .logo-slide img {
        max-width: 100px; /* Thoda chota kiya */
    }

    /* Slick Arrows ko thoda andar karne ke liye */
    .slick-prev {
        left: -10px; /* Default -25px se badla */
    }
    .slick-next {
        right: -10px; /* Default -25px se badla */
    }
}

/* Chote Mobile Devices ke liye Media Query (Screen size 480px ya usse kam) */
@media (max-width: 480px) {
    .logo-slider {
        margin: 30px auto; /* Margin thoda kam kiya */
    }

    /* Logo ko mobile par thoda bada rakhen (kyunki slidesToShow: 1 hai) */
    .logo-slide img {
        max-width: 150px; /* Center Zoom ke liye zyada space */
    }
    
    /* Center Logo par zoom kam kiya */
    .slick-center img {
        transform: scale(1.2); 
    }
    
    /* Arrows ko aur zyada andar kiya */
    .slick-prev {
        left: 5px;
    }
    .slick-next {
        right: 5px;
    }
}