/* Small devices (phones) */
@media (min-width: 320px) and (max-width: 480px) {
    h1 {
        font-size: 1.8rem;
    }

    .post-content h2 {
        font-size: 1.3rem;
    }

    .project-image {
        height: 180px;
    }

    .section {
        padding: 1.5rem;
    }

    .blog-categories {
        flex-wrap: wrap;
    }

    .post-header-image img {
        height: 200px;
    }
}

@media (max-width: 576px) {    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .post-card.featured {
        grid-template-columns: 1fr;
    }
}

/* Medium devices (tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    header nav {
        position: relative;
    }

    header nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--secondary-color);
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        box-shadow: var(--card-shadow);
        z-index: 99;
    }

    header nav.menu-open ul {
        display: flex;
    }

    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .project-image {
        height: 200px;
    }

    h1 {
        font-size: 2rem;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .companies-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large devices (desktops) */
@media (min-width: 769px) and (max-width: 1024px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .project-container {
        padding: 3rem 2rem;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .companies-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* Extra large devices (large desktops) */
@media (min-width: 1025px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .project-container {
        padding: 4rem 2rem;
    }
}

/* Common mobile menu styles for both phones and tablets */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

    header nav ul {
        display: none;
        position: absolute;
        width: 100%;
        background: var(--secondary-color);
        flex-direction: column;
        box-shadow: var(--card-shadow);
    }

    .language-switcher {
        margin-left: auto;
    }

    .container {
        padding: 1rem;
    }
}

.benefits-grid {
    grid-template-columns: repeat(4, 1fr);
}

.posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.companies-grid {
    grid-template-columns: repeat(8, 200px);
}

.skills-container {
    grid-template-columns: repeat(2, 1fr);
}

.contact-grid {
    grid-template-columns: 1.5fr 1fr;
}

/* Base mobile styles - apply to all mobile devices */
@media screen and (max-width: 768px) {
    /* Force mobile layout */
    body {
        min-width: 100%;
        width: 100%;
        overflow-x: hidden;
    }

    /* Split container fix */
    .split-container {
        flex-direction: column !important;
        gap: 2rem;
    }

    .split-left,
    .split-right {
        width: 100% !important;
        padding: 0 !important;
    }

    /* Skills grid fix */
    .skills-grid,
    .hard-skills {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Recent projects fix */
    .recent-projects {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Other existing mobile styles */
    .container,
    .project-container,
    .post-container {
        padding: 1rem;
        width: 100%;
    }

    .posts-grid,
    .benefits-grid,
    .contact-grid,
    .companies-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 1rem;
    }

    /* Card components */
    .project-card,
    .post-card,
    .company-card,
    .skill-card {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Section spacing */
    .section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* Typography */
    h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.4rem;
    }

    .subtitle {
        font-size: 1.1rem;
    }

    /* Container adjustments */
    .container,
    .project-container,
    .post-container {
        padding: 1rem;
        width: 100%;
    }

    /* Card layouts */
    .posts-grid,
    .benefits-grid,
    .contact-grid,
    .companies-grid,
    .skills-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 1rem;
    }

    /* Card components */
    .project-card,
    .post-card,
    .company-card {
        width: 100%;
        margin-bottom: 1rem;
    }

    .post-card.featured {
        grid-template-columns: 1fr;
    }

    /* Images */
    .project-image,
    .post-image {
        height: 30vh; /* Instead of 200px */
        width: 100%;
    }

    .post-header-image img {
        height: 30vh;
        width: 100%;
        object-fit: cover;
    }

    /* Typography */
    h1 {
        font-size: 1.8rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.4rem;
    }

    .subtitle {
        font-size: 1.1rem;
    }

    /* Navigation spacing */
    header nav {
        padding: 1rem;
    }

    /* Blog specific */
    .blog-categories {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .category-btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    /* Section spacing */
    .section {
        padding: 5%;
        margin-bottom: 5%;
    }

    /* Hard Skills Grid Layout */
    .hard-skills-container {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .hard-skill-card {
        flex: 1 1 100% !important;
        width: 100%;
        margin: 4rem auto;
    }

    /* Adjust spacing and typography */
    .hard-skill-category {
        margin-bottom: 2rem;
    }

    .hard-skill-category h2 {
        font-size: 1.1rem;
    }

    .hard-skill-item {
        margin-bottom: 2rem;
    }

    .progress-bar-container {
        height: 0.75rem;
        border-radius: 0.375rem;
    }

    /* Hard Skills Grid Layout */
    .skills-section {
        flex-direction: column !important;
    }

    .skills-column {
        width: 100% !important;
        margin: 0 !important;
    }

    .hard-skills-container,
    .soft-skills-container {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 1rem !important;
    }

    .hard-skill-card {
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
    }

    .skill-category {
        margin-bottom: 1.5rem !important;
    }

    /* Remove any margin/padding that might affect layout */
    .skills-section > div {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Skills Section Layout */
    .skills-section {
        display: block !important;  /* Override any flex display */
    }

    .development-skills,
    .management-skills {
        width: 100% !important;
        float: none !important;
        margin: 0 0 2rem 0 !important;
    }

    .skills-container {
        display: block !important;
        width: 100% !important;
    }

    .skill-group {
        margin-bottom: 5%;
    }

    /* Ensure proper spacing */
    .skill-category:not(:last-child) {
        margin-bottom: 2rem !important;
    }

    /* Reset any existing columns/grid */
    .hard-skills,
    .soft-skills {
        display: block !important;
        column-count: 1 !important;
        column-gap: 0 !important;
    }

    .skill-item {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 1rem !important;
    }

    /* Skills Container Layout */
    .skills-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* Individual Skill Lists */
    .skill-list {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Skill Items */
    .skill-item {
        margin-bottom: 1rem !important;
    }

    /* Headers */
    .skill-list h3 {
        margin-bottom: 1.5rem !important;
        font-size: 1.2rem !important;
    }

    /* Progress Bars */
    .progress-bar-container {
        height: 12px !important;
    }

    /* Skills Container Layout */
    .skills-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
        padding: 1.5rem !important;
    }

    /* Individual Skill Lists */
    .skill-list {
        width: 100% !important;
        background: var(--secondary-color) !important;
        padding: 5%;
        border-radius: 0.75rem;
        box-shadow: var(--card-shadow) !important;
    }

    /* Skill List Headers */
    .skill-list h3 {
        color: var(--text-color);
        font-size: 1.3rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Individual Skill Items */
    .skill-item {
        margin-bottom: 1.2rem !important;
        padding: 0.8rem !important;
    }

    .skill-item:last-child {
        margin-bottom: 0 !important;
    }

    /* Progress Bar Adjustments */
    .progress-bar-container {
        height: 12px !important;
        margin-top: 0.5rem !important;
        border-radius: 6px !important;
    }

    .progress-bar {
        border-radius: 6px !important;
    }

    /* Split section image adjustment */
    .split-right img {
        width: 85% !important; /* Reduced by 15% */
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Maintain existing split container styles */
    .split-container {
        flex-direction: column !important;
        gap: 2rem;
    }

    .split-left,
    .split-right {
        width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Project Grid Layout */
    .recent-projects {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 1rem !important;
    }

    /* Project Cards */
    .project-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* Project Images */
    .project-image {
        height: 30vh !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Project Info */
    .project-info {
        padding: 5%;
    }

    /* Recent Projects Section */
    .recent-projects {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    /* Override any other grid settings */
    .projects-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Project Cards */
    .project-card {
        width: 100% !important;
        margin: 0 !important;
        max-width: none !important;
    }

    /* Projects Content Section */
    .projects-content.card-section {
        padding: 1rem !important;
    }

    /* Projects Grid */
    .projects-content .projects-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Project Cards */
    .project-card {
        width: 100% !important;
        margin: 0 !important;
        max-width: none !important;
    }

    /* Project Images */
    .project-image {
        height: 30vh !important;
    }

    .project-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Project Info */
    .project-info {
        padding: 1.5rem !important;
    }

    /* Hard Skills Card Layout */
    .skill-list {
        width: 100% !important;
        background: var(--secondary-color) !important;
        padding: 1.5rem !important;  /* Increased from 5% to 1.5rem */
        border-radius: 0.75rem;
        box-shadow: var(--card-shadow) !important;
        margin-bottom: 1.5rem !important;
    }

    /* Skill Headers */
    .skill-list h3 {
        color: var(--text-color);
        font-size: 1.3rem !important;
        margin-bottom: 2rem !important;  /* Increased from 1.5rem */
        padding: 0 0.5rem !important;  /* Added padding */
    }

    /* Individual Skill Items */
    .skill-item {
        margin-bottom: 1.5rem !important;  /* Increased from 1.2rem */
        padding: 0.8rem 1rem !important;  /* Added horizontal padding */
    }

    /* Skill Header (icon + name) */
    .skill-header {
        margin-bottom: 0.75rem !important;  /* Added space before progress bar */
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
    }

    /* Progress Bar Container */
    .progress-bar-container {
        height: 12px !important;
        margin-top: 0.75rem !important;  /* Increased from 0.5rem */
        border-radius: 6px !important;
    }

    /* Last item in list */
    .skill-item:last-child {
        margin-bottom: 0 !important;
    }

    /* Container adjustments */
    .post-container {
        width: 92% !important; /* Increased from default */
        padding: 1rem !important;
        margin: 0 auto !important;
    }

    /* Content spacing */
    .section.content {
        padding: 0 1rem !important;
    }

    /* Typography adjustments */
    .project-content h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        padding: 0 0.5rem !important;
    }

    .project-content h2 {
        font-size: 1.4rem !important;
        margin-top: 2rem !important;
        padding: 0 0.5rem !important;
    }

    .project-content p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin: 1.2rem 0 !important;
        padding: 0 0.5rem !important;
    }

    .subtitle {
        font-size: 1.2rem !important;
        line-height: 1.5 !important;
        margin: 1.5rem 0 !important;
        padding: 0 0.5rem !important;
    }

    /* Image container */
    .post-header-image {
        margin: 1.5rem -1rem !important; /* Negative margin to extend full width */
    }

    .post-header-image img {
        border-radius: 0 !important; /* Remove border radius on mobile */
    }

    /* Date styling */
    .post-date {
        padding: 0 0.5rem !important;
        margin: 1rem 0 !important;
    }
}

/* Base mobile styles */
@media screen and (max-width: 768px) {
    html {
        -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
    }

    body {
        min-width: 320px; /* Minimum width for very small devices */
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    /* Container adjustments */
    .container {
        width: 95%;
        padding: 0 1rem;
    }

    .container {
        width: 95%;
        padding: 1rem;
    }

    /* Stack all grid items */
    .projects-grid,
    .benefits-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    /* Adjust typography */
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
}

/* Mobile Menu - Only show on mobile */
.mobile-menu-btn {
    display: none;  /* Hidden by default */
}

/* Desktop Navigation */
@media screen and (min-width: 769px) {
    header nav {
        display: flex;
        justify-content: left;
        align-items: left;
        padding: 0.5rem 1rem;  /* Reduced from 1rem */
        height: 3rem;  /* Fixed header height */
    }

    header nav ul {
        display: flex !important;
        gap: 2rem;
        align-items: left;
        height: 100%;  /* Match header height */
    }

    .mobile-menu-btn {
        display: none !important;  /* Ensure it's hidden on desktop */
    }
}

/* Mobile Navigation */
@media screen and (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
        position: absolute;
        left: 5%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        font-size: 1.2rem;  /* Slightly smaller icon */
    }

    header nav {
        position: relative;
        padding: 0.5rem 5%;  /* Reduced from 1rem */
        height: 3rem;  /* Fixed header height */
    }

    header nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--secondary-color);
        flex-direction: column;
        padding: 1rem;
        gap: 1rem;
        box-shadow: var(--card-shadow);
        z-index: 99;
    }

    header nav.menu-open ul {
        display: flex;
    }

    .language-switcher {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.9rem;  /* Slightly smaller text */
    }
}

/* Typography scale */
@media screen and (max-width: 576px) {
    h1 {
        font-size: calc(1.2rem + 2vw);
    }

    h2 {
        font-size: calc(1rem + 1.5vw);
    }

    h3 {
        font-size: calc(0.9rem + 1vw);
    }

    p {
        font-size: calc(0.9rem + 0.5vw);
    }
}

/* For tablets and small desktops */
@media screen and (min-width: 769px) and (max-width: 992px) {
    .projects-grid,
    .posts-grid,
    .recent-projects .projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .skills-grid,
    .hard-skills {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* For larger screens */
@media screen and (min-width: 993px) {
    .projects-grid,
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}