@media (min-width: 320px) and (max-width: 575px) {
    .grid-contact-info {
        column-gap: var(--gap--gap-3);
        row-gap: var(--gap--gap-3);
        grid-template-columns: minmax(200px, 1fr);
    }

    .grid-wy-choose-top {
        grid-template-columns: 1fr;
    }

    .grid-form-input {
        grid-template-columns: 1fr;
        grid-row-gap: 0;
    }

    .grid-wy-choose-bottom {
        grid-template-columns: 1fr;
    }

    .about-hero-title {
        font-size: 32px !important;
    }
}

@media screen and (max-width: 479px) {
    .grid-form-input.contact-label {
        column-gap: var(--gap--gap-0) !important;
        row-gap: var(--gap--gap-0) !important;
        grid-template-columns: 1fr !important;
    }

    .contact-form {
        border-radius: var(--border-radius--lg);
        padding: 1rem;
    }

    .grid-contact-bottom {
        column-gap: var(--gap--gap-4);
        row-gap: var(--gap--gap-4);
        grid-template-columns: 1fr;
    }

    .accordion-heading .accordion-button {
        font-size: var(--_typography---h6--h6);
    }

    .about-right-title, .headingBar h2, .why-choose-title, .step-left-title {
        font-size: 36px !important;
    }
}

@media (max-width: 767px) {
    .section-gap {
        padding: 70px 0;
    }

    .section-gap-bottom {
        padding-bottom: 70px
    }

    p {
        font-size: 17px;
    }

    .hero-counter-info {
        flex-wrap: wrap;
        justify-content: center;
        grid-row-gap: 25px;
    }

        .hero-counter-info p {
            text-align: center;
        }

    .counter-info {
        align-items: center;
    }

    .review-item {
        grid-template-columns: 1fr !important;
    }

    .review-bg-image {
        inset: 0 10px 0%;
    }

    .FooterSection .row {
        gap: 25px;
        flex-direction: column;
    }

    .grid-contact-info {
        grid-template-columns: 1fr !important;
    }

    .grid-contact-info {
        grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr);
    }


    .contact-hero-botom {
        height: auto;
        margin: auto;
        border-radius: var(--border-radius--xxl);
    }

    .contact-info {
        padding-bottom: 10.625px;
    }

    .contact-badge {
        inset: 0% 0% auto auto;
    }

    .contact-item {
        grid-area: span 1 / span 2 / span 1 / span 2;
    }

    .contact-title {
        font-size: 42px;
        margin-bottom: 15px;
    }

    .FAQSections .faq-title {
        font-size: 42px;
        margin-top: 15px;
    }

    .about-right-title, .headingBar h2, .why-choose-title, .step-left-title {
        font-size: 42px;
    }

    .container-small {
        max-width: var(--_layout---container-small-max-width) !important;
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .grid-service-step {
        grid-template-columns: 1fr !important;
    }

    .jogiNavbar {
        width: 92%;
        margin-top: 10px;
        border-radius: 20px;
    }

    .nav-shape {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .sliderInnerSection img {
        max-height: 650px;
    }

    .about-right-title {
        font-size: 52px;
    }
}

@media (max-width: 991px) {
    .hero-right {
        margin-left: 0px;
        margin-top: 50px;
    }

    #navbarSupportedContent {
        position: absolute !important;
        top: 70px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 15px 0;
        border-radius: 20px;
        /* 🔥 Animation setup */
        opacity: 0;
        transform: translateY(-15px) scale(0.98);
        pointer-events: none;
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    }

        /* ACTIVE STATE */
        #navbarSupportedContent.show {
            top: 90px;
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

    .jogiNavbar.fixed #navbarSupportedContent {
        background: rgb(255 255 255 / 86%);
        backdrop-filter: blur(3px);
    }

    .navbar-toggler {
        background: #f46c2b;
        backdrop-filter: blur(8px);
        color: #fff;
        height: 40px;
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-toggler {
        transition: all 0.3s ease;
    }

        .navbar-toggler:hover {
            background: #374151;
        }

    .about-right {
        margin-top: 50px;
    }

    .step-left {
        width: 100%;
    }

    .hero-bottom-content {
        display: none;
    }

    .hero-title {
        font-size: 40px;
        text-align: center;
    }

    .hero-top-title {
        align-items: center;
    }

    .hero-description {
        text-align: center;
    }

    .about-left-image {
        width: 100%;
    }

    .about-left-info {
        width: 90%;
        justify-content: space-between;
        transform: translateX(-50%);
        left: 50%;
    }

    .grid-why-choose {
        grid-template-columns: 1fr 0fr;
        grid-column-gap: 00px;
    }

    .why-right-info {
        width: 350px;
    }

    .ourProjectSection {
        padding-bottom: 100px;
    }

    #ProjectNavbar {
        position: absolute;
        bottom: 25px;
        z-index: 111;
        right: auto;
        left: 50%;
        justify-content: center !important;
        transform: translateX(-50%);
    }

    .review-client-info {
        margin: auto;
        border-radius: 1.25rem;
    }

    review-content {
        max-width: 100%;
        text-align: center;
    }

    .review-info {
        align-self: center;
    }

    .about-hero-shape, .contact-hero-shape {
        display: none;
    }

    .bento-badge {
        inset: -1% auto auto -1%;
    }

    .bento-left-image {
        max-height: 550px;
    }

    .review-right {
        margin-top: 50px;
    }
    /*.review-bg-image {
        inset: 0 10px 0%;
    }
    .review-overlay{
        inset: 0;
    }*/

    .review-content {
        max-width: 100%;
        text-align: center;
        grid-row-gap: 25px;
    }

    .review-item {
        grid-template-columns: 0.9fr 0fr;
    }

    .review-shape {
        inset: 248px -29px auto auto;
    }

        .review-shape.left {
            inset: 250px auto auto -29px;
        }

    .grid-contact-form {
        grid-template-columns: auto;
    }

    .contact-top-info {
        width: 100%;
        position: inherit;
    }

    .contact-left-info {
        width: 100%;
    }

    .contact-form-left {
        padding: 15px;
        order: 2;
    }

    contact-form-right {
        order: 0;
    }

    .sub-left p, .sub-right p {
        text-align: center;
    }

    #subFooterBox {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .contact-form-shape, hero-shape, .hero-shape.right, .review-shape, .hero-shape {
        display: none;
    }

    .why-right-shape._02 {
        left: 350px;
    }

    .ctaButton a {
        display: none;
    }



    .about-simple-left {
        position: relative;
        top: auto;
    }


    .grid-about-info {
        grid-template-columns: 1fr;
    }

    .about-hero-title {
        font-size: 42px;
    }

    .about-simple-info {
        inset: initial;
        left: 50%;
        bottom: 30px;
        width: max-content;
        transform: translateX(-50%);
    }

    .container-small.contact-top {
        margin-bottom: 2rem;
    }

    .grid-bento {
        grid-template-columns: 1fr auto;
        grid-column-gap: 0;
    }

    #w-node-_050c9900-145d-fae4-fb31-e3ce1fff4e41-c7944594 {
        order: -1;
    }

    #w-node-_6fc766f4-01bf-e5ce-dd72-b4fb6e9c8f73-ec728169 {
        grid-area: span 1 / span 2 / span 1 / span 2;
    }

    .grid-contact-info {
        grid-template-columns: 1fr 1fr;
    }

    .grid-form-input.contact-label {
        column-gap: var(--gap--gap-8);
        row-gap: var(--gap--gap-8);
        grid-template-columns: 1fr 1fr;
    }

    .bento-03 {
        height: auto;
    }

    .bento-03-top {
        grid-column-gap: 25px;
        grid-row-gap: 25px;
        flex-wrap: wrap;
    }

    .bento-01-info {
        margin-top: 50px;
    }

    .bento-bottom-image {
        width: auto;
        height: 200px;
    }

    .why-choose-bottom {
        inset: auto 0% 0px 130px;
    }

    .grid-service-step {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .section-gap {
        padding: 70px 0;
    }

    .contact-hero-botom {
        padding-bottom: 200px;
    }
}

@media (min-width: 992px) {


    #navbarSupportedContent {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 50%;
        width: fit-content;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .WrapperContainer {
        max-width: 1250px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .jogiNavbar {
        width: 90%
    }
}

@media (max-width: 1399px) {
}

@media (min-width: 1400px) and (max-width: 1500px) {
}