/* Garden Responsiveness */

@media (max-width: 992px) {
    .hero-section {
        height: auto;
    }

    .hero-section img {
        object-fit: cover;
    }

    .hero-section .hero-content-container {
        position: unset;
        padding: 30px;
    }

    .hero-section .hero-content-container .top-wrapper,
    .hero-section .hero-content-container .bottom-wrapper {
        gap: 0px;
    }

    .hero-section .hero-content-container .top-wrapper h2,
    .hero-section .hero-content-container .top-wrapper .desc,
    .hero-section .hero-content-container .bottom-wrapper .text {
        color: var(--black) !important;
    }


    .hero-section .hero-content-container .top-wrapper {
        flex-direction: column;
        padding-bottom: var(--fs36-m);
        border-bottom: 1px solid var(--black-05);
    }

    .hero-section .hero-content-container .top-wrapper .download-btn {
        font-size: var(--fs20-m);
        width: fit-content;
    }

    .hero-section .hero-content-container .top-wrapper .download-btn:hover {
        background-color: var(--GeraniumLake);
        border: 1px solid transparent;
    }

    .hero-section .hero-content-container .bottom-wrapper {
        flex-direction: column;
        align-items: start;
        padding-top: var(--fs36-m);
    }

    .hero-section .hero-content-container .top-wrapper h2 {
        font-size: var(--fs36-m);
    }

    .hero-section .hero-content-container .top-wrapper .desc {
        font-size: var(--fs32-m);
        margin-bottom: var(--fs18-m);
    }

    .hero-section .hero-content-container .bottom-wrapper .text-1 {
        font-size: var(--fs20-m);
        width: 100%;
        margin-bottom: var(--fs15-m);
    }

    .hero-section .hero-content-container .bottom-wrapper .text-2 {
        font-size: var(--fs24-m);
        width: 100%;
    }

    .what-section {
        width: 100%;
        flex-direction: column;
        gap: 30px;
    }
    .what-section .left-wrapper h2 span,.who-section h2 span  {
        width: 15px;
        height: 15px;
    }

    .what-section .left-wrapper {
        width: 100%;
    }

    .what-section .right-wrapper {
        width: 100%;
    }

    .what-section .left-wrapper h2 {
        font-size: var(--fs36-m);
        margin-bottom: 20px;
    }

    .what-section .left-wrapper .content .desc {
        font-size: var(--fs20-m);
    }

    .what-section .right-wrapper h3 {
        font-size: var(--fs24-m);
    }

    .what-section .right-wrapper .desc {
        font-size: var(--fs20-m);
    }

    .works-section h2 {
        font-size: var(--fs36-m);
    }

    .works-list .item .number {
        font-size: var(--fs30-m);
    }

    .works-list .item .text {
        padding-left: var(--fs30-m);
        padding-right: var(--fs30-m);
    }

    .works-list .item .text h3 {
        font-size: var(--fs25-m);
    }

    .works-list .item .text .desc {
        font-size: var(--fs20-m);
    }

    .features-section {
        padding: 50px;
    }

    .digital-section .content-container {
        flex-direction: column;
        gap: 20px;
    }

    .digital-section .content-container .left-wrapper h3 {
        font-size: var(--fs36-m);
    }

    .digital-section .content-container .left-wrapper .text {
        font-size: var(--fs20-m);
    }

    .digital-section .content-container .right-wrapper .text {
        font-size: var(--fs20-m);
    }

    .who-section {
        padding: 50px;
    }

    .who-section h2 {
        font-size: var(--fs36-m);
    }

    .who-section .desc {
        font-size: var(--fs20-m);
    }

    .desktop-view {
        display: none;
    }

    .mobile-view {
        display: block;
    }

    .xr-section {
        padding: 0px 50px;
    }




    /* Powered by */

    .powered-section {
        padding: var(--fs60-m) 0;

    }

    .powered-section .powered-wrapper {
        flex-direction: column;
        width: 87%;
        margin: 0 auto;
        gap: var(--fs30-m);
    }

    .powered-section .powered-wrapper .p-left h1 {
        font-size: var(--fs40-m);
    }
    .powered-section .powered-wrapper .p-left h1 br{
       display: none;
    }

    .powered-section .powered-wrapper .p-right {
        width: 100%;
    }

    .powered-section .powered-wrapper .p-right p {
        font-size: var(--fs26-m);
        margin-bottom: var(--fs29-m);
    }

    .powered-section .powered-wrapper .p-right .pill-container {
        gap: var(--fs12-m);
    }

    .powered-section .powered-wrapper .p-right .pill-container .pill {
        padding: var(--fs10-m) var(--fs18-m);
        border-radius: var(--fs60-m);
        font-size: var(--fs24-m);
    }

    /* How it works */

    .work-section {
        padding: var(--fs60-m) 0;
    }

    .work-section .work-wrapper h2.work-title {
        font-size: var(--fs40-m);
        margin-bottom: var(--fs80-m);

    }

    .work-section .work-wrapper .timeline {
        gap: var(--fs30-m);
    }

    .work-section .work-wrapper .timeline .step svg.arrow {
        display: none;
    }

    .work-section .work-wrapper .timeline .step .card {
        gap: var(--fs30-m);
        width: 80%;
        padding: var(--fs30-m);
    }

    .work-section .work-wrapper .timeline .step .card .badge p {
        font-size: var(--fs24-m);
    }

    .work-section .work-wrapper .timeline .step .card .card-header {
        gap: var(--fs12-m);
    }

    .work-section .work-wrapper .timeline .step .card .card-header .icon-container {
        width: var(--fs60-m);
        height: var(--fs60-m);
        flex-shrink: 0;
    }

    .work-section .work-wrapper .timeline .step .card .card-header h3 {
        font-size: var(--fs26-m);

    }

    .work-section .work-wrapper .timeline .step .card p,
    .work-section .work-wrapper .timeline .step .card ul.t-list li {
        font-size: var(--fs22-m);
            width: 100%;

    }

    .work-section .work-wrapper .timeline .step .card ul.t-list {
        padding-left: var(--fs22-m);
    }

    .work-section .work-wrapper .timeline .step.right .card {
        margin-top: unset;
    }

    .work-section .work-wrapper .timeline .step .card {
        aspect-ratio: 700 / 400;
        margin: 0 auto;
    }

    .work-section .work-wrapper .timeline .step .card .card-header h3 {
        width: 100%;
    }
    .xr-section .xr-content .left-wrapper {
        width: 48%;
    }
    .xr-section .xr-content {
        padding-inline: 50px;
    }
    .xr-section .xr-content .left-wrapper h3 {
        font-size: 17px;
        margin-bottom: 10px;
    }
    .xr-section .xr-content .left-wrapper .desc {
        font-size: 14px;
    }
}

@media (max-width: 756px) {
    .work-section .work-wrapper .timeline .step .card {
        aspect-ratio: 700 / 480;
    }
}

@media (max-width: 576px) {

    .hero-section .hero-content-container {
        padding: 20px;
    }

    .hero-section .hero-content-container .top-wrapper {
        padding-bottom: var(--fs25-m);

    }

    .hero-section .hero-content-container .bottom-wrapper {
        padding-top: var(--fs25-m);
    }

    .hero-section .hero-content-container .top-wrapper h2 {
        font-size: var(--fs24-m);
    }

    .hero-section .hero-content-container .top-wrapper .desc {
        font-size: var(--fs20-m);
    }

    .hero-section .hero-content-container .bottom-wrapper .text-1 {
        font-size: var(--fs20-m);
        margin-bottom: var(--fs15-m);
    }

    .hero-section .hero-content-container .bottom-wrapper .text-2 {
        font-size: var(--fs20-m);
    }

    .works-list .item img {
        width: var(--fs100-m);
    }

    .features-section {
        padding: 30px 20px;
    }

    .features-section .card-wrapper {
        width: 100%;
    }

    .features-section .card-wrapper .card-container {
        flex-direction: column;
    }

    .features-section .card-wrapper .card-container .card-1,
    .features-section .card-wrapper .card-container .card-2,
    .features-section .card-wrapper .card-container .card-3,
    .features-section .card-wrapper .card-container .card-4,
    .features-section .card-wrapper .card-5 {
        width: 100%;
    }

    .features-section .card-wrapper .card-container .card-3,
    .features-section .card-wrapper .card-container .card-4,
    .features-section .card-wrapper .card-5 {
        margin-left: 0;
    }
    .digital-section {
        padding-inline: 20px;
    }
    .who-section {
        padding: 30px 20px;
    }

    .whoSwiper img {
        width: 100%;
    }

    .xr-section .xr-content .left-wrapper h3 {
        font-size: var(--fs20-m);
    }

    .xr-section .xr-content .left-wrapper .text {
        font-size: var(--fs15-m);
    }


    .xr-section {
        margin-top: 30px;
        padding: 0px 20px;
    }

    .xr-section .xr-img {
        position: relative;
        border-radius: 0;
    }

    .xr-section .xr-img img {
        width: 100%;
        height: auto;
        transform: none;
    }

    .xr-section .xr-content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        padding-inline: var(--fs70-m);
        padding-bottom: var(--fs20-m);
    }

    .xr-section .xr-content .left-wrapper {
        width: 100%;
    }

    .xr-section .xr-content .left-wrapper h3 {
        font-size: var(--fs24-m);
        color: #fff;
    }

    .xr-section .xr-content .left-wrapper .desc {
        font-size: var(--fs15-m);

    }

    .xr-section .xr-content .right-wrapper {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .xr-section .xr-content .right-wrapper .qr-img-wrapper {
        width: var(--fs100-m);
    }

    .xr-section .btn-container .download-btn {
        font-size: var(--fs15-m);
        border-bottom: 1px solid #fff;
    }

    .xr-section .btn-container .download-btn img {
        width: 16px;
    }

    .work-section .work-wrapper .timeline .step .card {
        aspect-ratio: 700 / 480;

    }

    .work-section .work-wrapper .timeline .step .card,
    .work-section .work-wrapper .timeline .step .card .card-header h3 {
        width: 100%;
    }

    .work-section .work-wrapper .timeline .step .card {
        aspect-ratio: 720 / 500;
        padding: var(--fs20-m);
    }
     .xr-section .xr-content .left-wrapper h3 {
        margin-bottom: 5px;
    }
   

}


@media (max-width: 390px) {
    .work-section .work-wrapper .timeline .step .card {
        aspect-ratio: 750 / 600;
    }
  

      
}