/* Sectors Grid Styles */
#sectors {
    background-color: #f8fafc;
}

#sectors-grid {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Styles */
#sector-modal {
    backdrop-filter: blur(5px);
    padding: 16px;
}

.prose {
    font-size: 14px;
}

@media (min-width: 640px) {
    .prose {
        font-size: 16px;
    }
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: #374151;
}

@media (min-width: 640px) {
    .prose p {
        margin-bottom: 1.25rem;
    }
}

.prose ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

@media (min-width: 640px) {
    .prose ul {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        padding-left: 1.625rem;
    }
}

.prose li {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    line-height: 1.75;
    color: #374151;
}

@media (min-width: 640px) {
    .prose li {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* Smooth image loading */
#modal-image {
    opacity: 1;
}

#modal-image.loaded {
    opacity: 1;
}

/* Projects Section Styles */
.project-content {
    opacity: 0;
    animation: fadeIn 0.8s ease-out forwards;
}

.tab-btn {
    position: relative;
    transition: all 0.3s ease;
    font-size: 14px;
}

@media (min-width: 640px) {
    .tab-btn {
        font-size: 16px;
    }
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #B79140;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tab-btn.active::after {
    transform: scaleX(1);
}

.project-content .group:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Smooth image loading for project cards */
.project-content img {
    transition: transform 0.5s ease;
}

.project-content .group:hover img {
    transform: scale(1.05);
}