/* Scrollable Projects Container Styles */
.projects {
    max-height: 1300px;
    overflow-y: auto;
    padding-right: 8px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;
}

/* Custom Scrollbar Styling for Webkit Browsers */
.projects::-webkit-scrollbar {
    width: 8px;
}

.projects::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.projects::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.projects::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

/* Responsive Height Adjustments */
/* Desktop (≥768px) - Twice as large for better content visibility */
@media (min-width: 768px) {
    .projects {
        max-height: 1300px;
    }
}

/* Tablet (576px-767px) - Twice as large for tablet viewing */
@media (min-width: 576px) and (max-width: 767px) {
    .projects {
        max-height: 900px;
    }
}

/* Mobile (<576px) - Twice as large for mobile screens */
@media (max-width: 575px) {
    .projects {
        max-height: 700px;
        padding: 10px;
        padding-right: 6px;
    }

    .projects::-webkit-scrollbar {
        width: 6px;
    }
}

/* Ensure smooth scrolling behavior */
.projects {
    scroll-behavior: smooth;
}

/* Maintain proper spacing for project content */
.projects h4 {
    margin-top: 1rem;
}

.projects h4:first-of-type {
    margin-top: 0;
}