.y-c-page-hero {
    background-image: url('../../assets/achives-banner.png');
}

/* =========================================
   Projects Grid Section
   ========================================= */
.y-l-projects-grid-section {
    padding: var(--y-spacing-80) 0;
}

.y-l-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--y-spacing-40);
}

/* Project Card */
.y-c-project-card {
    background-color: transparent;
    transition: var(--y-transition-03s);
    cursor: pointer;
}

.y-c-project-image {
    width: 100%;
    height: var(--y-size-300);
    position: relative;
}

.y-c-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--y-radius-16);
}

.y-c-project-card:hover .y-c-project-image img {
    outline: 2px solid var(--y-color-primary-text2);
}

.y-c-project-info {
    padding: var(--y-spacing-30);
    text-align: center;
}

.y-c-project-title {
    font-family: var(--y-font-family-Cairo);
    font-size: var(--y-font-size-16);
    font-weight: var(--y-font-weight-700);
    color: var(--y-color-primary-text);
    line-height: var(--y-line-height-160);
    margin: 0;
}

/* =========================================
   Responsive Design
   ========================================= */

/* Large Tablets & Small Desktops (1024px and below) */
@media (max-width: 1024px) {
    .y-l-projects-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--y-spacing-30);
        padding: 0 var(--y-spacing-20);
    }

    .y-c-project-title {
        font-size: var(--y-font-size-18);
    }
}

/* Tablets (768px and below) */
@media (max-width: 768px) {
    .y-l-projects-grid-section {
        padding: var(--y-spacing-50) 0;
    }

    .y-l-projects-grid {
        grid-template-columns: 1fr;
        gap: var(--y-spacing-30);
        max-width: var(--y-size-500);
        margin: 0 auto;
    }

    .y-c-project-image {
        height: var(--y-size-300);
    }

    .y-c-project-info {
        padding: var(--y-spacing-20);
    }

    .y-c-project-title {
        font-size: var(--y-font-size-18);
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    .y-l-projects-grid-section {
        padding: var(--y-spacing-40) 0;
    }

    .y-l-projects-grid {
        gap: var(--y-spacing-20);
    }


    .y-c-project-info {
        padding: var(--y-spacing-15);
    }

    .y-c-project-title {
        font-size: var(--y-font-size-16);
    }
}