/* Responsive */
@media (max-width: 768px) {
    .carousel-container {
        padding: 0 60px;
        max-width: 100%;
    }

    .carousel-btn {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .project-card {
        min-height: 600px;
    }
    
    .project-image {
        height: 220px;
    }
    
    .project-content {
        padding: 2rem;
    }
    
    .project-title {
        font-size: 1.5rem;
    }
    
    .project-description {
        font-size: 1rem;
    }
    
    .tech-badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--bg-primary);
        border-bottom: 1px solid var(--border);
        padding: 1rem 0;
        gap: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: all 0.3s ease;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a {
        padding: 1rem 2rem;
        width: 100%;
    }

    .hamburger {
        display: flex;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .experience-subtitle {
        font-size: 1.3rem;
    }

    .experience-subtitle i {
        font-size: 1.4rem;
    }

    .fun-fact-item {
        grid-template-columns: 1fr !important;
    }

    .fun-fact-right .fact-image {
        order: 1;
    }

    .fun-fact-right .fact-content {
        order: 2;
        padding-right: 0;
        padding-left: 2.5rem;
    }

    .fact-image {
        height: 200px;
    }

    .container {
        padding: 0 1.5rem;
    }

    /* Make experience/academic/education cards stack vertically on small screens */
    .experience-item,
    .academic-item,
    .education-item {
        flex-direction: column;
        min-height: auto; /* allow height to grow with content */
        align-items: stretch;
    }

    .exp-image,
    .academic-image,
    .edu-image {
        width: 100%;
        flex: 0 0 auto;
        height: 220px; /* fixed visual band for images on mobile */
    }

    .exp-image img,
    .academic-image img,
    .edu-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .exp-content,
    .academic-content,
    .edu-content {
        width: 100%;
        padding: 1.25rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 0 1.5rem;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding: 0 50px;
    }
    
    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .project-card {
        min-height: 550px;
    }
    
    .project-image {
        height: 180px;
    }
    
    .project-content {
        padding: 1.5rem;
    }
    
    .project-title {
        font-size: 1.3rem;
    }
    
    .project-description {
        font-size: 0.95rem;
    }
    
    .project-impact {
        font-size: 0.85rem;
        padding: 0.6rem 1rem;
    }
    
    .tech-badge {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }
    
    .project-link {
        font-size: 0.95rem;
        padding: 0.75rem 1.5rem;
    }
}

/* Simplified: Always show 1 card at a time on all screens */