body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Light gray background */
    color: #1f2937; /* Dark gray text */
}

.detail-section {
    background-color: white;
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    margin-bottom: 2rem; /* mb-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}

@media (min-width: 768px) { /* md breakpoint */
    .detail-section {
        padding: 2rem; /* p-8 for larger screens */
    }
}

.project-header {
    background-color: #3b82f6; /* Blue-500 */
    color: white;
    padding: 2rem 1.5rem; /* py-8 px-6 */
    border-radius: 0.75rem; /* rounded-xl */
    margin-bottom: 2rem; /* mb-8 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}
 

@media (min-width: 768px) { /* md breakpoint */
    .project-header {
        padding: 3rem 1.5rem; /* py-12 px-6 */
    }
}

.tech-tag {
    padding: 0.25rem 0.75rem; /* py-1 px-3 */
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* medium */
    background-color: #dbeafe; /* Blue-100 for Flutter/Dart theme */
    color: #1e40af; /* Blue-800 */
}

 

/* Basic image gallery styling */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; /* gap-4 */
}

    .gallery-grid img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 0.5rem; /* rounded-lg */
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* shadow-md */
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .gallery-grid img:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); /* shadow-lg */
        }

/* Modal for image preview */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
    border-radius: 0.5rem;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

    .modal-close:hover,
    .modal-close:focus {
        color: #bbb;
        text-decoration: none;
    }