/* Responsive Design */
@media (max-width: 1200px) {
    .projects-layout {
        padding: 0 25px;
        gap: 30px;
    }
    
    .header-content {
        padding: 0 25px;
    }
}

@media (max-width: 768px) {
    .header-content {
        padding: 0 20px;
        height: 56px;
    }
    
    header h1 {
        font-size: 1.2rem;
    }
    
    .user-icon {
        width: 36px;
        height: 36px;
    }
    
    .user-icon svg {
        width: 18px;
        height: 18px;
    }
    
    .projects-layout {
        padding: 0 15px;
        gap: 25px;
    }
    
    .quick-links {
        padding: 20px 15px;
    }
    
    .quick-links h2 {
        font-size: 0.8rem;
        margin-bottom: 15px;
    }
    
    .quick-link {
        padding: 10px 16px;
    }
    
    .link-icon {
        font-size: 1.2rem;
    }
    
    .link-text {
        font-size: 0.85rem;
    }
    
    .carousel-nav {
        width: 42px;
    }
    
    .slide-overlay {
        padding: 30px 25px;
    }
    
    .slide-overlay h3 {
        font-size: 1.5rem;
    }
    
    .slide-subtitle {
        font-size: 0.95rem;
    }
    
    .slide-description {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }
    
    .slide-button {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
    
    .carousel-dots {
        margin-top: 20px;
    }
    
    #interactive-background{
        display: block !important;
    }
}