@media (max-width: 575px) {
    .font-6xl {
        font-size: 2.5rem;
    }
    /* 40px */
    .font-5xl {
        font-size: 2rem;
    }
    /* 32px */
    .font-4-1xl, .font-4xl {
        font-size: 1.75rem;
    }
    /* 28px */
    .font-3xl {
        font-size: 1.5rem;
    }
    /* 24px */
    .font-2xl {
        font-size: 1.25rem;
    }
    /* 20px */
    .font-xl {
        font-size: 1.125rem;
    }
    /* 18px */
    .font-lg {
        font-size: 1rem;
    }
    /* 16px */
    .font-md {
        font-size: 0.9375rem;
    }
    /* 15px */
    .font-sm {
        font-size: 0.8125rem;
    }
    /* 13px */
    .font-xs {
        font-size: 0.75rem;
    }
    /* 12px */
    .font-xl-larger {
        font-size: 2.75rem;
    }
    .font-xxl-larger {
        font-size: 5rem;
    }
    /* 44px */
}


@media (min-width: 576px) and (max-width: 991px) {
    .font-6xl {
        font-size: 3.25rem;
    }
    /* 52px */
    .font-5xl {
        font-size: 2.5rem;
    }
    /* 40px */
    .font-4-1xl, .font-4xl {
        font-size: 2rem;
    }
    /* 32px */
    .font-3xl {
        font-size: 1.625rem;
    }
    /* 26px */
    .font-2xl {
        font-size: 1.375rem;
    }
    /* 22px */
    .font-xl {
        font-size: 1.2rem;
    }
    /* 19px */
    .font-lg {
        font-size: 1.0625rem;
    }
    /* 17px */
    .font-xl-larger {
        font-size: 3.5rem;
    }
    .font-xxl-larger {
        font-size: 5rem;
    }
}
/* ============================================================
   RESPONSIVE MEDIA QUERIES
   ============================================================ */

/* 📱 Small Devices (up to 576px) */
@media (max-width: 576px) {

    /* GRID VIEW: Stack columns full width */
    #projectContainer.grid-view .row {
        flex-wrap: wrap;
    }
    .banner-img {
        height: auto !important;
        object-fit: cover;
    }
    #projectContainer.grid-view .col-md-4,
    #projectContainer.grid-view .col-md-8,
    #projectContainer.grid-view .col-12 {
        width: 100%;
        padding: 5px 0;
    }

    #projectContainer.grid-view .project-box {
        height: auto;
        padding: 20px 15px;
    }

    .project-location {
        position: static;
        margin-top: 10px;
    }

    .category {
        position: static;
        margin-top: 5px;
    }

    .first-column {
        height: auto;
        padding: 20px 15px;
        text-align: center;
    }


    .logoHolder {
        top: 88%;
    }

    .list-view .list-project {
        min-height: 80px;
        padding: 15px;
    }

        .list-view .list-project::after {
            width: 70px;
            font-size: 1.6rem;
            border-left: 5px solid #fff;
        }

    .list-view .list-project-title,
    .list-view .list-project-tagline {
        padding-right: 70px;
        font-size: 1.3rem;
    }

    .list-project-location {
        font-size: 18px !important;
    }
    .logoHolderGrey {
        position: static;        
    }
    .carousel-card {
        width: 90vw;
        max-width: 320px;
        max-height: 80vh;
    }
    .contact-form .contact-btn {
        padding: 6px 13px;
        font-weight: 500;
        font-size: 16px;
    }
    .shortNote{
        position:static !important;
    }
}


@media (max-width: 480px) {
    .carousel-card {
        width: 95vw;
        max-width: 250px;
        max-height: 40vh;
    }

    .carousel-btn {
        font-size: 14px;
        padding: 6px 10px;
    }
    .custom-carousel {
        height: 40vh; /* 60% of viewport height */
        max-height: 420px;
    }
}

/*  Medium Devices (577px – 768px) */
@media (min-width: 577px) and (max-width: 768px) {

    /* GRID VIEW: Make 2 columns per row */
    #projectContainer.grid-view .row {
        flex-wrap: wrap;
    }

    #projectContainer.grid-view .col-md-4,
    #projectContainer.grid-view .col-md-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #projectContainer.grid-view .project-box {
        height: 280px;
        padding: 25px;
    }

    /* LIST VIEW: Adjust spacing */
    #projectContainer.list-view .project-box {
        padding: 18px 20px;
        min-height: 90px;
        gap: 25px;
    }

    #projectContainer.list-view .project-location {
        font-size: 1.5rem;
    }

    #projectContainer.list-view .category {
        font-size: 0.95rem;
        padding-right: 100px;
        max-width: 100%;
        font-size: 1rem;
    }

    #projectContainer.list-view .project-box::after {
        width: 80px;
        font-size: 3rem;
        line-height: 80px;
    }
}

@media (min-width: 1700px) {
    .custom-carousel {
        height: 600px;
    }

    .carousel-card {
        width: 500px;
        height: 500px;
    }

    .left {
        transform: scale(0.8) translateX(-700px);
    }

    .right {
        transform: scale(0.8) translateX(700px);
    }
}
@media (min-width: 2200px) {
    .custom-carousel {
        height: 800px;
    }
    .carousel-card {
        width: 800px;
        height: 800px;
    } 
    .left {
        transform: scale(0.8) translateX(-950px);
    }

    .right {
        transform: scale(0.8) translateX(950px);
    }
}