@media screen and (max-width: 900px){
    #desktop-nav{
        display: none;
    }
    #hamburger-nav{
        display: flex;
    }
}

/* Responsive header on homescreen */
@media (max-width: 768px) {
    .custom-text {
        font-size: 1.5rem; /* Smaller font size for mobile */
        line-height: 1.2; /* Slightly tighter line height to match the smaller font */
    }
}

/* Responsive layout for smaller screens in About section */
@media (max-width: 768px) {
    .about-container {
        gap: 50px; /* Keep the vertical spacing */
    }

    .about-heading {
        padding-right: 20px; /* Add some padding to balance the right alignment */
    }

    .about-content {
        max-width: 100%; /* Take up full width on mobile */
    }

    .about-heading h1 {
        font-size: 2rem; /* Smaller heading on mobile */
        line-height: 1.2;
    }

    .description {
        font-size: 1rem; /* Smaller paragraph text on mobile */
        line-height: 1.5;
    }
}

/* Responsive Design for cards in feature proejct*/
@media (max-width: 768px) {
    .featured-projects {
        max-width: 100%;
        margin: 40px 0 30px;
        padding: 0;
    }

    .section-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
        padding: 0 14px;
    }

    .section-header-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .work-heading h1 {
        font-size: 2rem; /* Smaller heading on mobile */
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .cards_container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 14px; /* Slightly smaller gap */
        margin: 30px 0; /* Reduce vertical margin */
        padding: 0 14px;
    }

    .card-text {
        bottom: 15px;
        right: 15px;
    }

    .card-label {
        font-size: 1.25rem;
    }

    .card-year {
        font-size: 1.25rem;
    }

    .card-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .cards_container {
        grid-template-columns: 1fr;
    }

    .section-header-container {
        flex-direction: column;
        /* text-align: center; */
    }

    .button_color_gold {
        margin-top: 10px;
    }

    .project-card {
        aspect-ratio: 1 / 1;
        max-height: none;
        width: 100%;
    }

    .card-overlay {
        background-color: rgba(0, 0, 0, 0.6); /* Lighter overlay for better text contrast */
    }

    .card-text {
        bottom: 10px;
        right: 10px;
        left: 10px;
    }

    .card-label {
        font-size: 1rem;
    }

    .card-year {
        font-size: 1rem;
    }

    .card-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 320px) {
    .card-text {
        bottom: 8px;
        right: 8px;
        left: 8px;
    }

    .card-label {
        font-size: 1rem;
    }

    .card-year {
        font-size: 1rem;
    }

    .card-title {
        font-size: 1.75rem;
    }
}

/* Responsive Design for service */
/* Media query for mobile adjustments in Service section*/
@media (max-width: 768px) {
    .item-header {
        padding: 20px 0;
    }
    
    .item-description {
        padding: 0 15px 0 30px;
    }
    
    .plus-icon {
        font-size: 1.25rem;
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .item-description {
        padding: 0 15px 0 45px;
    }

    .item-header {
        gap: 14px;
    }
}

/* Responsive Design for notes */
@media (max-width: 768px) {
    .notes {
        padding: 60px 0; /* Reduce padding on mobile */
    }

    .notes-header-container {
        flex-direction: column; /* Stack vertically */
        align-items: flex-start; /* Align items to the left */
        gap: 0; /* Space between heading and button */
        margin-bottom: 8px;
    }

    .btn-container {
        text-align: left; /* Align button to the left */
        width: 100%; /* Ensure button takes full width */
    }

   
    .cards_3_array {
        flex-direction: column; /* Stack cards vertically */
        gap: 30px; /* More vertical space between cards */
    }


    .notes_container {
        max-width: 100%; /* Full width on mobile */
    }

    .work-heading h1 {
        font-size: 2rem; /* Smaller heading on mobile */
        line-height: 1.2;
    }


    .notes_container h3 {
        font-size: 0.8rem; /* Smaller category on mobile */
        margin: 0;
    }
}

/* footer responsive */

@media (max-width: 1024px) {
    .footer-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
    .back-to-top {
        position: static;
        margin-top: 10px;
        margin-bottom: 24px;
    }
}