/* -------------------------------------------------
   MOBILE & TABLET VIEW (max-width: 768px)
-------------------------------------------------- */
@media (max-width: 768px) {
    .test-card {
        width: auto;
    }

    .carousel-inner .carousel-item {
        height: fit-content;
    }

    .tools-style {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        grid-template-rows: auto;
    }

    .carousel-background {
        background: unset;
    }

    .carousel-indicators {
        bottom: -4%;
    }

    .mt-6 {
        margin-top: 3rem !important;
    }

    .fs-80 {
        font-size: 46px;
    }
}

/* -------------------------------------------------
   TABLET VIEW ONLY (768px – 991.98px)
-------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .fs-80 {
        font-size: 46px;
    }

    .swiper-wrapper-style {
        height: 530px;
    }

    .w-52 {
        width: 90%;
    }
    .cont-height {
        height: 580px !important;
    }
    .custome-padding_2 {
        padding-top: 6rem;
        padding-bottom: 0rem;
    }
    .costom-container {
        padding: 0px 2rem;
    }
}

/* -------------------------------------------------
   SMALL TABLETS (425px – 768px)
-------------------------------------------------- */
/* Responsive Behavior */
@media (max-width: 768px) {
}

/* Tab View STARTS*/
@media (min-width: 425px) and (max-width: 768px) {
    .py-10 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .swiper-wrapper-style {
        height: 530px;
    }

    .fs-24 {
        font-size: 22px;
    }

    .styled-heading {
        font-weight: 800;
        font-size: 76px;
        top: 40px;
    }
}

/* Tab View ENDS*/

/* -------------------------------------------------
   MOBILE ONLY (320px – 480px)
-------------------------------------------------- */
@media (min-width: 320px) and (max-width: 480px) {
    .fs-60 {
        font-size: 36px;
    }

    .fs-18 {
        font-size: 16px;
    }

    .fs-20 {
        font-size: 16px;
    }

    .fs-28 {
        font-size: 18px;
    }

    .fs-40 {
        font-size: 24px;
    }

    .w-52 {
        width: 97%;
    }

    .fs-24 {
        font-size: 18px;
    }

    .fs-80 {
        font-size: 36px;
    }

    .py-10 {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }

    .swiper-wrapper-style {
        height: 450px;
    }

    .fs-50 {
        font-size: 24px;
    }

    .fs-36 {
        font-size: 24px;
    }

    .w-11 {
        width: unset;
    }

    .fs-36 {
        font-size: 24px;
    }

    .w-11 {
        width: unset;
    }

    .styled-heading {
        font-weight: 800;
        font-size: 38px;
        top: 17px;
    }

    .fs-16 {
        font-size: 15px;
    }

    .styled-heading {
        font-weight: 800;
        font-size: 38px;
        top: 17px;
    }

    .carousel-indicators {
        bottom: -6%;
    }

    .fs-16 {
        font-size: 15px;
    }

    .custome-padding_1 {
        padding-top: 4rem;
        padding-bottom: 3rem;
    }

    .custome-padding_2 {
        padding-top: 15rem;
        padding-bottom: 0rem;
    }

    .custome-padding_3 {
        padding-top: 6rem;
        padding-bottom: 0rem;
    }

    .custome-padding_4 {
        padding-top: 0rem !important;
        padding-bottom: 1rem !important;
    }

    .fs-65 {
        font-size: 30px;
    }

    .fs-48 {
        font-size: 30px;
    }

    .service_img_cont {
        top: -9rem;
        left: 0px;
    }

    .slider_height {
        height: 1400px !important;
    }

    .fs-65 {
        font-size: 30px;
    }

    .test-card {
        width: 18rem;
    }

    .lh-28 {
        line-height: 24px;
    }

    .carousel-box {
        background: #fff;
        box-shadow: 0px 0px 3.8px 5px #00000008;
    }

    .tools-style {
        grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
        grid-template-rows: auto;
    }

    .design-tool {
        width: 45px;
        height: auto;
    }

    .carousel-box {
        display: grid;
    }

    .design_idea {
        border-radius: 0px;
    }

    /* Keep cards visible on mobile */
    .cards {
        height: 300px;
        /* or adjust to your image height */
        position: relative;
    }
    .cont-height {
        height: 420px !important;
    }
    .item-wrap img {
        height: 50px;
    }
    .infinite-scroll-wrapper .infinite-scroll-items {
        gap: 3rem;
    }
    /* Optional for mobile */
    @media (max-width: 768px) {
        .carousel-box .cards {
            height: 250px;
        }
    }

    .logo-size {
        width: 9rem;
        height: auto;
    }
    .lh-57 {
        line-height: 30px;
    }
    .service-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem; /* g-3 equivalent */
    }
    .stacking-slide {
        scroll-snap-align: none;
        height: fit-content;
        padding: 7rem 1rem 1rem 1rem;
    }
    .pagination-dots {
        top: 20%;
    }
    .footer-de {
        width: 9rem;
        height: auto;
    }
    .costom-container {
        padding: 1rem;
    }
    .stacking-slide {
        scroll-margin-top: 80px;
    }
    .let-talk {
        padding-bottom: 0.5rem !important;
        padding-top: 0.5rem !important;
    }
}

@media (max-width: 375px) {
    .fs-60 {
        font-size: 32px;
    }

    .swiper-wrapper-style {
        height: 480px;
    }
}

@media (max-width: 360px) {
    .fs-60 {
        font-size: 28px;
    }

    .swiper-wrapper-style {
        height: 540px;
    }
    .styled-heading {
        font-size: 30px;
        top: 12px;
    }
}