/* Simple Carousel Fix CSS - Clean styles to remove conflicts */

/* Reset any conflicting styles */
.projects-container * {
    box-sizing: border-box;
}

/* Remove borders and outlines that might appear as white lines */
.projects-container,
.projects-carousel,
.projects-page,
.project-card,
.carousel-nav,
.carousel-button,
.carousel-dots,
.carousel-dot {
    border: none !important;
    outline: none !important;
}

/* Ensure proper visibility */
.project-card {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Clean navigation styling */
.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    padding: 10px 0;
}

/* Hover effects for navigation */
.carousel-button:hover {
    background: rgba(0, 243, 255, 0.2) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.view-project-btn:hover {
    background: rgba(0, 243, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.3) !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .projects-container {
        padding: 0 60px !important;
    }
    
    .projects-page {
        gap: 15px !important;
        padding: 15px !important;
    }
    
    .project-card {
        height: 350px !important;
    }
}