.projects-section {
     padding: 3rem 0 5rem;
     max-width: 1200px;
     margin: 0 auto;
 }

 .page-intro {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 4rem;
     padding: 0 1rem;
 }

 .page-intro h2 {
     color: #4F5A5E;
     margin-bottom: 1rem;
     font-size: 2.5rem;
 }

 .page-intro p {
     color: #6B787D;
     line-height: 1.6;
     font-size: 1.1rem;
 }

 .project-case {
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     padding: 2.5rem;
     margin-bottom: 3rem;
     border: 1px solid #D7E2E8;
 }

 .project-header {
     display: flex;
     align-items: flex-start;
     gap: 2rem;
     margin-bottom: 2rem;
 }

 .project-image {
     flex-shrink: 0;
     width: 300px;
     height: 200px;
     border-radius: 8px;
     overflow: hidden;
 }

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

 .project-title h3 {
     color: #4F5A5E;
     font-size: 1.8rem;
     margin-bottom: 0.5rem;
 }

 .project-title p {
     color: #6B787D;
     font-size: 1.1rem;
     line-height: 1.6;
 }

 /* Tabs styling */
 .tabs-container {
     margin-top: 2rem;
 }

 .tabs-buttons {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1rem;
     border-bottom: 1px solid #D7E2E8;
     padding-bottom: 0.5rem;
 }

 .tab-btn {
     padding: 0.8rem 1.5rem;
     background: #F8FAFB;
     border: 1px solid #D7E2E8;
     border-radius: 6px 6px 0 0;
     color: #6B787D;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 1rem;
 }

 .tab-btn:hover {
     background: #E8EDF0;
 }

 .tab-btn.active {
     background: white;
     border-bottom: 2px solid #B8CCCD;
     color: #4F5A5E;
     font-weight: 600;
 }

 .tab-content {
     background: white;
     padding: 1.5rem;
     border-radius: 0 0 8px 8px;
     display: none;
 }

 .tab-content.active {
     display: block;
     animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .tab-content h4 {
     color: #4F5A5E;
     margin-bottom: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
     font-size: 1.2rem;
 }

 .tab-content p {
     color: #6B787D;
     line-height: 1.6;
 }

 .challenge h4 i {
     color: #D7E2E8;
 }

 .solution h4 i {
     color: #C4D0B8;
 }

 .learned h4 i {
     color: #B8CCCD;
 }

 @media (max-width: 768px) {
     .project-header {
         flex-direction: column;
     }

     .project-image {
         width: 100%;
         height: 200px;
     }

     .project-case {
         padding: 1.5rem;
     }

     .page-intro h2 {
         font-size: 2rem;
     }

     .tabs-buttons {
         flex-direction: column;
         gap: 0.25rem;
     }

     .tab-btn {
         border-radius: 6px;
         text-align: left;
     }
 }

 @media (max-width: 480px) {
     .projects-section {
         padding: 2rem 1rem 4rem;
     }

     .tabs-buttons {
         flex-direction: column;
     }
 }.projects-section {
    padding: 3rem 0 5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 0 1rem;
}

.page-intro h2 {
    color: #4F5A5E;
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.page-intro p {
    color: #6B787D;
    line-height: 1.6;
    font-size: 1.1rem;
}

.project-case {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 2.5rem;
    margin-bottom: 3rem;
    border: 1px solid #D7E2E8;
}

.project-header {
    margin-bottom: 2rem;
}

.project-title h3 {
    color: #4F5A5E;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.project-title p {
    color: #6B787D;
    font-size: 1.1rem;
    line-height: 1.6;
}

.project-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 6.5rem;
    margin: 2rem 0;
}

.project-image {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.project-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.project-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.detail-card {
    background: #F8FAFB;
    padding: 1.5rem;
    border-radius: 8px;
}

.detail-card h4 {
    color: #4F5A5E;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.detail-card p {
    color: #6B787D;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .project-case {
        padding: 1.5rem;
    }

    .page-intro h2 {
        font-size: 2rem;
    }

    .project-images {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .project-image img {
        height: 150px;
    }
}

@media (max-width: 480px) {
    .projects-section {
        padding: 2rem 1rem 4rem;
    }

    .project-details {
        grid-template-columns: 1fr;
    }

    .project-images {
        grid-template-columns: 1fr;
    }
}