.hero-section {
    position: relative;
}

.hero-section .hero-bg {
    position: relative;
    display: block;
    width: 100%;
    z-index: -1;
}

.hero-section .hero-bg-small {
    display: none;
}

.hero-section .hero-bg-wrapper .youtube-link-wrapper {
    display: none;
}

.hero-section .hero-content-container {
    position: absolute;
    left: clamp(20px, 5.73%, 5.73%);
    bottom: clamp(20px, 10.83%, 10.83%);
    right: clamp(20px, 5.68%, 5.68%);
    display: flex;
    gap: 20px;
}

.hero-section .hero-content-container h2 {
    font-size: var(--fs36);
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--fs75);
    text-transform: uppercase;
    width: 51%;
}

.hero-section .hero-content-container .desc {
    font-size: var(--fs20);
    font-weight: 500;
    color: var(--white);
    width: 38%;
    line-height: 1.3;

}

.hero-section .hero-content-container .right-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-section .hero-content-container .right-wrapper .youtube-link-wrapper {
    display: inline-flex;
}

.hero-section .hero-content-container .right-wrapper .youtube-link {
    display: inline-block;
    width: var(--fs90);
}

.hero-section .hero-content-container .right-wrapper .youtube-img {
    display: block;
    width: 100%;

}

.hero-section .hero-content-container .right-wrapper .btn-container {
    display: flex;
    gap: var(--fs20);
    align-items: center;
    margin-top: auto;
}

.hero-section .hero-content-container .right-wrapper .btn-container .request-demo-btn {
    font-weight: 400;
    font-size: var(--fs20);
    color: var(--white);
    border: 1px solid transparent;
    border-radius: 100px;
    width: var(--fs236);
    padding: var(--fs20);
    display: block;
    text-align: center;
    cursor: pointer;
}


.hero-section .hero-content-container .right-wrapper .btn-container .request-demo-btn {
    color: var(--white);
    background-color: var(--GeraniumLake);
}

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




/* challenges */

.challenges {
    padding: clamp(30px, 5.73%, 5.73%) clamp(20px, 6.3%, 6.3%);
    display: flex;
    gap: 11%;
    position: relative;
    align-items: center;
}

.challenges .content-wrapper h2 {
    font-size: var(--fs24);
    font-weight: 400;
    color: var(--black-11);
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--fs30);
}

.challenges .content-wrapper h2 span {
    display: inline-block;
    width: var(--fs21);
    height: var(--fs21);
    background-color: var(--black-11);
    border-radius: 50%;
    margin-right: var(--fs16);
}

.challenges .content-wrapper .subtitle {
    font-size: var(--fs36);
    font-weight: 400;
    color: var(--black-11);
    margin-bottom: var(--fs18);
    width: 70%;
}

.challenges .content-wrapper .desc {
    font-size: var(--fs20);
    font-weight: 400;
    color: var(--black-11);
    opacity: 0.7;
    margin-bottom: var(--fs40);

}

.challenges .challenges-card-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--fs37);
    grid-row-gap: var(--fs30);
}

.challenges .challenges-card-wrapper .card {
    width: var(--fs482);
    height: var(--fs301);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background-color: var(--white-f6);
    padding: var(--fs30) var(--fs30) var(--fs20);
}

.challenges .challenges-card-wrapper .card:hover {
    background-color: var(--black-11);
}

.challenges .challenges-card-wrapper .card .card-img {
    width: var(--fs85);
    display: inline-block;
}

.challenges .challenges-card-wrapper .card .card-img.img-white {
    display: none;
}

.challenges .challenges-card-wrapper .card:hover .card-img.img-black {
    display: none;
}

.challenges .challenges-card-wrapper .card:hover .card-img.img-white {
    display: inline-block;
}

.challenges .challenges-card-wrapper .card .card-content {
    margin-top: auto;
}

.challenges .challenges-card-wrapper .card .card-content h3 {
    font-size: var(--fs22);
    font-weight: 500;
    margin-bottom: 13px;
}

.challenges .challenges-card-wrapper .card:hover h3 {
    color: var(--white);
}

.challenges .challenges-card-wrapper .card .card-content .text {
    font-size: var(--fs18);
    font-weight: 400;
    color: var(--black-11);
    opacity: 0.7;
    width: 90%;
}

.challenges .challenges-card-wrapper .card:hover .card-content .text {
    color: var(--white);
    opacity: 0.9;
}

.challenges .pattern-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(80px, 9.4%, 9.4%);
    z-index: -1;
}

/*auto service section */

.auto-service-section {
    padding: clamp(20px, 6.3%, 6.3%) clamp(20px, 6.78%, 6.78%);
    display: flex;
    justify-content: space-between;
    background-color: var(--GhostWhite);
}

.auto-service-section .img-wrapper {
    width: 50%;
    overflow: hidden;
    border-radius: var(--fs20);
    height: fit-content;
}

.auto-service-section .img-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
}

.auto-service-section .img-wrapper img {
    width: 100%;
    transition: transform 0.6s ease-in;
}

.auto-service-section .img-wrapper img:hover {
    transform: scale(1.05);
}

.auto-service-section .content-container {
    width: 42.92%;
}

.auto-service-section .content-container h2 {
    font-size: var(--fs36);
    font-weight: 600;
    margin-bottom: var(--fs25);
}

.auto-service-section .content-container .subtitle {
    font-size: var(--fs38);
    font-weight: 400;
    margin-bottom: var(--fs20);
    color: var(--black-11);
}

.auto-service-section .content-container .desc {
    font-size: var(--fs22);
    font-weight: 400;
    margin-bottom: var(--fs20);
    color: var(--black-11);
    opacity: 0.7;
}

.auto-service-section .content-container p.result {
    font-weight: 400;
    font-size: var(--fs20);
}

.auto-service-section .content-container p.result span {
    font-weight: 600;
}

.auto-service-section .content-container .service-list {
    padding-left: 20px;
    margin-bottom: var(--fs30);
}

.auto-service-section .content-container .service-list li {
    font-size: var(--fs20);
    font-weight: 400;
    padding: var(--fs20) 0;
    list-style-type: decimal;
    padding-right: 7px;
    width: fit-content;
    border-bottom: 1px solid var(--black-133);

}

.auto-service-section .content-container .service-list li:nth-of-type(2) {
    border-bottom: 1px solid var(--black-133);
}

.auto-service-section .content-container .service-list li:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.auto-service-section .content-container .service-list li .accordion-header {
    margin-bottom: var(--fs10);
}

.auto-service-section .content-container .service-list li .accordion-content {
    font-size: var(--fs18);
}

.auto-service-section .content-container .btn-container {
    display: flex;
    gap: var(--fs20);
    align-items: center;
    margin-top: var(--fs50);

}

.auto-service-section .content-container .btn-container button,
.auto-service-section .content-container .btn-container a {
    width: var(--fs277);
    font-size: var(--fs22);
    font-weight: 400;
    border-radius: 94px;
    padding: var(--fs17) 10px;
    text-align: center;
}

.auto-service-section .content-container .btn-container .see-live-btn {
    display: flex;
    align-items: center;
    gap: var(--fs22);
    justify-content: center;
    border: 1px solid var(--GeraniumLake);
    color: var(--GeraniumLake);
}

.auto-service-section .content-container .btn-container .see-live-btn img {
    width: var(--fs24);
}

.auto-service-section .content-container .btn-container .see-live-btn:hover {
    background-color: var(--DarkCharcol);
    color: #fff;
    border: 1px solid transparent;
}

.auto-service-section .content-container .btn-container .see-live-btn:hover img {
    filter: invert(0.5);
}

.auto-service-section .content-container .btn-container .ask-demo-btn {
    background-color: var(--GeraniumLake);
    color: var(--white);
    display: inline-block;
}

.auto-service-section .content-container .btn-container .ask-demo-btn:hover {
    background-color: #dd0b0b;
}

/*execute */
.execute {
    background-color: var(--black-11);
    padding: clamp(30px, 3.65%, 3.65%) 20px;
    position: relative;
}


.execute .pattern-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(80px, 9.4%, 9.4%);
}

.execute .content h2 {
    font-size: var(--fs36);
    font-weight: 600;
    color: var(--white);
    text-align: center;
    margin-bottom: var(--fs30);
}

.execute .content .desc {
    width: 51%;
    color: var(--white);
    font-size: var(--fs28);
    font-weight: 500;
    margin: 0 auto;
    text-align: center;
    opacity: 0.9;
}

.execute .content .desc-2 {
    margin-top: 10px;
}


/*faq*/

.faq {
    padding: clamp(30px, 4.5%, 4.5%) clamp(20px, 11.62%, 11.62%);
}

.faq .container .faq-title {
    font-size: var(--fs48);
    font-weight: 500;
    text-align: center;
    /* margin-bottom: var(--fs10); */
    color: var(--black);
}

.faq .container .faq-subtitle {
    font-size: var(--fs24);
    font-weight: 400;
    text-align: center;
    color: var(--black);
    line-height: 1.42;
}

.faq .container .accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--fs60);
    padding-top: var(--fs80);
}

.faq .container .accordion .accordion-col {
    display: flex;
    flex-direction: column;
    gap: var(--fs40);
}

.faq .container .accordion .accordion-item {
    background: #fff;
    border-radius: 20px;
    /* margin-bottom: var(--fs40); */
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.3);
    break-inside: avoid;
    transition: height 0.4s ease;
}

.faq .container .accordion .accordion-item .accordion-header {
    width: 100%;
    padding: var(--fs34) var(--fs30) var(--fs34) var(--fs40);
    font-size: var(--fs22);
    font-weight: 500;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: var(--fs44);
    font-family: Onest;
}

.faq .container .accordion .accordion-item-5 .accordion-header .header-text {
    width: 80%;
}

.faq .container .accordion .accordion-item .accordion-header .icon img {
    width: var(--fs36);
    height: auto;
    display: block;
}

.faq .container .accordion .accordion-item .accordion-content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    transition: max-height 0.4s ease;
    padding: 0 var(--fs35) 0 var(--fs40);
}

.faq .container .accordion .accordion-item .accordion-content p {
    font-size: var(--fs20);
    font-weight: 400;
    padding-bottom: var(--fs34);
    margin: 0;
    width: 96%;
    line-height: 1.4;
    opacity: 0.89;
}

.faq .container .accordion .accordion-item.active {
    background: #e92827;
    border-color: #e92827;
}

.faq .container .accordion .accordion-item.active .accordion-header {
    color: var(--white);
    padding-bottom: clamp(10px, 2.15%, 2.15%);
}

.faq .container .accordion .accordion-item.active .accordion-content p {
    color: var(--white);
}

/*business impact */
.business-impact {
    padding: 0 clamp(20px, 4.5%, 4.5%);
}

.business-impact .header-wrapper {
    margin-bottom: var(--fs80);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.business-impact .header-wrapper h2 {
    font-size: var(--fs50);
    font-weight: 600;
    text-transform: capitalize;
}

.business-impact .header-wrapper .header-desc {
    font-size: var(--fs24);
    font-weight: 400;
    color: var(--black-07);
    width: 29.5%;
}

.business-impact .business-card-wrapper {
    display: grid;
    grid-template-columns: 1.09fr 1.09fr 0.72fr;
    gap: var(--fs24);
    height: var(--fs854);

}

.business-impact .business-card-wrapper .card-container {
    display: flex;
    flex-direction: column;
    gap: var(--fs25);
}

.business-impact .business-card-wrapper .card {
    border-radius: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.business-impact .business-card-wrapper .card:not(.card-2) .content {
    margin-top: auto;
}

.business-impact .business-card-wrapper .card-bg-img {
    position: absolute;
    right: 0;
    top: 0;
}

.business-impact .business-card-wrapper .disc-bg {
    width: clamp(65px, 19.5%, 19.5%);
    top: unset;
    bottom: 0;
}

.business-impact .business-card-wrapper .pattern-bg {
    width: clamp(75px, 24.7%, 24.7%);
}

.business-impact .business-card-wrapper .card h3 {
    font-size: var(--fs40);
    font-weight: 600;
    margin-bottom: 10px;
}

.business-impact .business-card-wrapper .card p {
    font-size: var(--fs24);
    font-weight: normal;
}

.business-impact .business-card-wrapper .card-1 {
    height: 100%;
    background-image: url("../images/xr-auto-service/business-impact.webp");
    background-repeat: no-repeat;
    background-size: cover;
}

.business-impact .business-card-wrapper .card-2,
.business-impact .business-card-wrapper .card-3 {
    padding-left: var(--fs50);
    padding-bottom: var(--fs40);
    color: var(--white);
}

.business-impact .business-card-wrapper .card.card-2 {
    background-color: var(--black-11);
    height: 50%;
    padding-top: var(--fs50);
    margin-top: unset;
}

.business-impact .business-card-wrapper .card-2 p {
    width: 67%;
}

.business-impact .business-card-wrapper .card-2 p,
.business-impact .business-card-wrapper .card-3 p {
    opacity: 0.8;
}

.business-impact .business-card-wrapper .card-3 p {
    width: 90%;
}

.business-impact .business-card-wrapper .card-3 {
    background-color: var(--GeraniumLake);
    height: 50%;
}

.business-impact .business-card-wrapper .card-4,
.business-impact .business-card-wrapper .card-5,
.business-impact .business-card-wrapper .card-6 {
    padding-inline: var(--fs30);
    padding-bottom: var(--fs30);
    background-color: var(--white-f1);
    height: 33%;
}

.business-impact .business-card-wrapper .card-4 p,
.business-impact .business-card-wrapper .card-5 p,
.business-impact .business-card-wrapper .card-6 p {
    color: var(--black-11);
    opacity: 0.8;
}

.business-impact .business-card-wrapper .card-5 p {
    width: 90%;
}

/*quote */

.quote-section {
    padding: clamp(25px, 2.61%, 2.61%) clamp(20px, 4.09%, 4.09%);

}

.quote-section .quote-content {
    padding: clamp(40px, 10.16%, 10.16%) 50px;
    text-align: center;
    position: relative;
}

.quote-section .quote-content .quote-bg {
    position: absolute;
    z-index: -1;
    width: clamp(180px, 29.64%, 569px);
}

.quote-section .quote-content .quote-front-bg {
    top: 0;
    left: 0;
}

.quote-section .quote-content .quote-bottom-bg {
    right: 0;
    bottom: 0;
}

.quote-section .quote-content h2 {
    margin-bottom: var(--fs80);
    font-size: var(--fs32);
    font-weight: normal;
    opacity: 0.67;
}

.quote-section .quote-content .desc {
    display: block;
    font-size: var(--fs48);
    font-weight: normal;
    width: 77%;
    margin: 0 auto var(--fs80);
    line-height: 1.417;
}

.quote-section .quote-content .expert-btn {
    padding: var(--fs17) var(--fs29);
    font-size: var(--fs23);
    background-color: var(--GeraniumLake);
    color: var(--white);
    border: 1px solid transparent;
    border-radius: 95px;
    cursor: pointer;
    display: inline-block;
    text-align: center;

}

.quote-section .quote-content .expert-btn:hover {
    border: 1px solid var(--GeraniumLake);
    background-color: var(--white);
    color: var(--GeraniumLake);
}

/*related */

.related {
    padding: 0 clamp(20px, 2.61%, 2.61%) clamp(20px, 4.09%, 4.09%);
    position: relative;
}

.related h2 {
    font-size: var(--fs64);
    font-weight: normal;
    margin-bottom: var(--fs80);
}

.related .related-card-wrapper .related-card {
    display: flex;
    gap: var(--fs38);
    padding: var(--fs21) var(--fs23);
    background-color: var(--black-23);
    border: 0.3px solid var(--grey-89);
    border-radius: 17px;
    width: clamp(400px, 43.34%, 43.34%);
}

.related .related-card-wrapper .related-card .card-img-wrapper {
    overflow: hidden;
    width: clamp(140px, 93.63%, 93.63%);
    border-radius: 16px;
}

.related .related-card-wrapper .related-card .card-img-wrapper img {
    display: block;
    width: 100%;
    transition: 0.6s ease-in;
}

.related .related-card-wrapper .related-card .card-img-wrapper img:hover {
    transform: scale(1.05);
}

.related .related-card-wrapper .related-card .card-content {
    display: flex;
    flex-direction: column;
}

.related .related-card-wrapper .related-card .card-content h3 {
    margin-bottom: var(--fs15);
    font-size: var(--fs32);
    font-weight: normal;
    color: var(--white);

}

.related .related-card-wrapper .related-card .card-content .card-text {
    font-size: var(--fs22);
    font-weight: normal;
    color: var(--white);
    opacity: 0.7;
    width: 91%;

}

.related .related-card-wrapper .related-card .card-content .card-btn-container {
    margin-top: auto;
}

.related .related-card-wrapper .related-card .card-content .card-btn-container .read-more-btn {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs22);
    font-weight: normal;
    color: var(--white-07);
    gap: var(--fs10);
}

.related .related-card-wrapper .related-card .card-content .card-btn-container .read-more-btn img {
    width: var(--fs20);
    transition: 0.3s ease;
}

.related .related-card-wrapper .related-card .card-content .card-btn-container .read-more-btn:hover img {
    transform: translateX(3px);
}

.connect-section {
    width: 100%;
    padding: clamp(30px, 4.69%, 4.69%) clamp(20px, 6.45%, 6.45%) clamp(30px, 3.23%, 3.23%);
    cursor: pointer;
}

.connect-section .connect-wrapper {
    width: 100%;
}

.connect-section .connect-wrapper a {
    display: inline-block;
}

.connect-section .connect-wrapper .connect-txt {
    display: block;
    width: 100%;
    height: auto;
}

/*responsive */
@media screen and (max-width:1366px) {
    .challenges .challenges-card-wrapper .card .card-content .text {
        font-size: 13px;
    }

    .auto-service-section .content-container .service-list li {
        padding-right: 5px;
    }
    .faq .container .accordion .accordion-item .accordion-header {
        padding: var(--fs32) var(--fs30) var(--fs32) var(--fs38);
    }
     .quote-section .quote-content {
        padding: clamp(40px, 8%, 8%) 50px;
    }
}

@media screen and (max-width:1280px) {

    .hero-section .hero-content-container .desc {
        width: 41%;
        font-size: 13.5px;
    }

    .challenges .challenges-card-wrapper .card .card-content h3 {
        font-size: 15px;
    }

    .challenges .challenges-card-wrapper .card .card-content .text {
        width: 95%;
    }

    .auto-service-section .content-container .btn-container button {
        padding: 12px 10px;
        font-size: 15px;
    }

    .auto-service-section .content-container .btn-container .see-live-btn img {
        width: 15px;
    }

    .quote-section .quote-content {
        padding: clamp(40px, 7%, 7%) 50px;
    }
    

    .quote-section .quote-content .expert-btn {
        padding: 12px 20px;
    }
    .auto-service-section .content-container p.result {
        font-size: 13px;
    }

}

@media screen and (max-width:1233px) {
    .hero-section .hero-content-container .desc {
        width: 42%;
        font-size: 13.5px;
    }

    .faq .container .accordion .accordion-item .accordion-header {
        font-size: 15px;
    }

    .quote-section .quote-content .expert-btn {
        font-size: 15px;
    }

}


@media screen and (max-width:1200px) {
    .hero-section .hero-content-container h2 {
        width: 52%;
    }

    .hero-section .hero-content-container .desc {
        width: 50.7%;
        font-size: 13.5px;
    }

    .hero-section .hero-content-container .right-wrapper .btn-container .request-demo-btn {
        font-size: 13px;
        padding: 12px;
    }

    .challenges {
        gap: 10%;
    }

    .challenges .content-wrapper .subtitle {
        width: 74%;
    }

    .challenges .content-wrapper .desc {
        font-size: 13px;
    }

    .auto-service-section {
        padding: clamp(20px, 6.3%, 6.3%) clamp(20px, 5.4%, 5.4%);
    }

    .auto-service-section .content-container .subtitle {
        font-size: var(--fs39);
    }

    .auto-service-section .content-container .desc {
        font-size: var(--fs23);
    }

    .auto-service-section .content-container .service-list li {
        font-size: var(--fs21);
    }

    .faq {
        padding: clamp(30px, 6.3%, 6.3%) clamp(20px, 9%, 9%);
    }

    .faq .container .accordion .accordion-item {
        border-radius: 16px;
    }

    .faq .container .accordion .accordion-item .accordion-header {
        font-size: 15px;
    }

    .faq .container .accordion .accordion-item .accordion-content p {
        font-size: 13px;
        width: 92%;
    }

    .business-impact .business-card-wrapper .card p {
        font-size: var(--fs25);
    }

    .quote-section .quote-content .desc {
        width: 80%;
    }

    .related .related-card-wrapper .related-card .card-content .card-text {
        font-size: var(--fs23);
    }

    .quote-section .quote-content .expert-btn {
        font-size: 15px;
    }

}

@media screen and (max-width:1024px) {
    .hero-section .hero-bg-wrapper .youtube-link-wrapper {
        display: block;
    }

    .hero-section .hero-bg-wrapper {
        position: relative;
    }

    .hero-section .hero-bg-wrapper .youtube-link-wrapper {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hero-section .hero-bg-wrapper .youtube-link-wrapper .youtube-link {
        display: inline-block;
        width: var(--fs124);
    }

    .hero-section .hero-bg-wrapper .youtube-link-wrapper .youtube-link .youtube-img {
        display: block;
        width: 100%;
    }

    .hero-section .hero-bg-large {
        display: none;
    }

    .hero-section .hero-bg-small {
        display: block;
        position: relative;
    }

    .hero-section .hero-content-container {
        left: unset;
        right: unset;
        position: static;
        padding: clamp(30px, 6%, 6%) clamp(20px, 6%, 6%);
        flex-direction: column;
        gap: 30px;
    }

    .hero-section .hero-content-container h2 {
        color: var(--black);
        width: 100%;
        margin-bottom: var(--fs60);
    }

    .hero-section .hero-content-container .desc {
        width: 100%;
        color: var(--black-11);
        font-weight: 400;
    }

    .hero-section .hero-content-container .right-wrapper .youtube-link-wrapper {
        display: none;
    }

    .hero-section .hero-content-container .right-wrapper .btn-container .request-demo-btn:hover {
        color: var(--GeraniumLake);
    }

    .challenges {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .challenges .content-wrapper h2 {
        font-size: var(--fs26);
    }

    .challenges .content-wrapper .desc {
        font-size: 14px;
    }

    .challenges .challenges-card-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .challenges .challenges-card-wrapper .card {
        width: auto;
        height: var(--fs306);
        padding: var(--fs30);
    }

    .auto-service-section {
        padding: clamp(30px, 5.6%, 5.6%) clamp(20px, 5%, 5%);
        flex-direction: column;
        gap: var(--fs80);
    }

    .auto-service-section .img-wrapper {
        width: 100%;
    }

    .auto-service-section .content-container {
        width: 100%;
    }

    .auto-service-section .content-container .subtitle {
        font-size: var(--fs38);
    }

    .auto-service-section .content-container .desc {
        font-size: 14px;
    }

    .auto-service-section .content-container .service-list {
        padding-top: 5px;
    }

    .auto-service-section .content-container .service-list li .accordion-content {
        font-size: 18px;
    }

    .auto-service-section .content-container .service-list li {
        font-size: 18px;
        padding: var(--fs25) 0;
    }

    .auto-service-section .content-container .btn-container button {
        width: 40%;
        padding: 14px;
    }

    .business-impact {
        padding: 0 clamp(20px, 4%, 4%);
    }

    .business-impact .header-wrapper .header-desc {
        font-size: 13.5px;
        width: 34%;
    }

    .execute .content .desc {
        width: 55%;
    }

    .faq .container {
        width: 95%;
        margin: 0 auto;
    }

    .faq .container .accordion .accordion-item {
        border-radius: 14px;
    }

    .faq .container .faq-subtitle {
        font-size: 14px;
    }

    .faq .container .accordion {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--fs50);
    }

    .faq .container .accordion .accordion-col {
        gap: var(--fs50);
    }

    .faq .container .accordion .accordion-item .accordion-header {
        font-size: 16px;
        padding: var(--fs40) var(--fs30) var(--fs42) var(--fs40);
    }

    .faq .container .accordion .accordion-item .accordion-content p {
        font-size: 14px;
    }

    .quote-section .quote-content {
        padding: clamp(40px, 6.5%, 6.5%) 50px;
    }

    .quote-section .quote-content .desc {
        width: 96%;
    }

    .related .related-card-wrapper .related-card .card-content .card-text {
        font-size: var(--fs25);
    }
}

@media screen and (max-width:992px) {}

@media screen and (max-width:890px) {
    .challenges .challenges-card-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .challenges .challenges-card-wrapper .card .card-content h3 {
        font-size: 16px;
    }
}

@media screen and (max-width:768px) {
    .hero-section .hero-content-container h2 {
        margin-bottom: var(--fs60);
    }

    .challenges {
        padding: clamp(30px, 5.73%, 5.73%) clamp(20px, 5.1%, 5.1%);
    }

    /* .hero-section .hero-bg {
        height: 600px;
    } */
    

    .auto-service-section .content-container .btn-container button {
        width: 50%;
        padding: 14px;
    }

    .execute .content .desc {
        width: 70%;
    }

    .faq {
        padding: clamp(30px, 6.3%, 6.3%) clamp(20px, 6%, 6%);
    }

    .faq .container {
        width: 100%;
    }

    .faq .container .accordion .accordion-item {
        border-radius: 10px;
    }

    .faq .container .accordion .accordion-item .accordion-header {
        padding: var(--fs34) var(--fs30) var(--fs34) var(--fs40);
    }

    .business-impact .header-wrapper .header-desc {
        width: 42%;
    }

    .business-impact .business-card-wrapper {
    grid-template-columns: 1fr;
    height: auto;
    gap: 15px;
  }

  .business-impact .business-card-wrapper .card-container {
    width: 100%;
    flex-wrap: wrap;
    flex-direction: row;
    margin: 0 auto;
    justify-content: space-between;
  }



  .business-impact .business-card-wrapper .card,
  .business-impact .business-card-wrapper .card.card-2 {
    height: 250px;
    width: 100%;
    flex-basis: 48%;
  }

  .business-impact .business-card-wrapper .card-1 {
    background-image: url("../images/xr-auto-service/business-impact.webp");
    flex-basis: 100%;
  }

  .business-impact .business-card-wrapper .card-2 .img-container,
  .business-impact .business-card-wrapper .card-3 .img-container {
    width: var(--fs120-m);
    height: var(--fs120-m);
  }


  .business-impact .business-card-wrapper .card-4,
  .business-impact .business-card-wrapper .card-5,
  .business-impact .business-card-wrapper .card-6 {
    height: 180px;
  }
   .business-impact .business-card-wrapper .card-1{
    height: 100%;
    aspect-ratio: 16/9;
   }


  .business-impact .business-card-wrapper .card-4 .img-container,
  .business-impact .business-card-wrapper .card-5 .img-container,
  .business-impact .business-card-wrapper .card-6 .img-container {
    margin-bottom: 15px;
    width: var(--fs80-m);
    height: var(--fs80-m);
  }

  .business-impact .business-card-wrapper .card-6 {
    flex-basis: 100%;
  }


    .quote-section .quote-content .desc {
        width: 91%;
        font-size: var(--fs45);
    }

    .quote-section .quote-content {
        padding: clamp(38px, 8%, 8%) 10px;
    }
}

@media screen and (max-width:600px) {
    .challenges .challenges-card-wrapper {
        grid-template-columns: 1fr;
        margin: 0 auto;
    }
}

@media screen and (max-width:576px) {
    .hero-section .hero-content-container h2 {
        margin-bottom: var(--fs60);
    }

    .challenges {
        gap: 25px;
    }

    .challenges .challenges-card-wrapper .card {
        border-radius: 16px;
    }

    .auto-service-section .img-wrapper {
        width: 100%;
    }

    .auto-service-section .content-container .subtitle {
        font-size: var(--fs36);
    }

    .auto-service-section .content-container .desc {
        font-size: 13px;
    }

    .execute .content .desc {
        width: 85%;
        font-size: 14px;
    }

    .faq .container .accordion .accordion-item .accordion-header {
        font-size: 15px;
        padding-inline: 15px;
    }

    .business-impact .header-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: var(--fs70);
    }

    .business-impact .header-wrapper .header-desc {
        width: 100%;
    }

   

    .business-impact .business-card-wrapper .card,
  .business-impact .business-card-wrapper .card.card-2 {
    height: 220px;
  }
   .business-impact .business-card-wrapper .card-1{
    height: 100%;
  }

  .business-impact .business-card-wrapper .card-4,
  .business-impact .business-card-wrapper .card-5,
  .business-impact .business-card-wrapper .card-6 {
    height: 170px;
  }

    .related h2 {
        font-size: var(--fs60);
    }

    .quote-section .quote-content .desc {
        width: 100%;
        font-size: var(--fs42);
    }

    .quote-section .quote-content {
        padding: clamp(38px, 8%, 8%) 0px;
    }

    .connect-section {
        padding: clamp(30px, 4.69%, 4.69%) clamp(20px, 6.7%, 6.7%) clamp(30px, 3.23%, 3.23%);
    }

    .auto-service-section .content-container .service-list li .accordion-content {
        font-size: 16px;
    }

    .auto-service-section .content-container .service-list li {
        font-size: 16px;
    }
}

@media screen and (max-width:480px) {

    .hero-section .hero-content-container .right-wrapper {
        display: block;
    }
    .hero-section .hero-content-container .right-wrapper .btn-container .request-demo-btn {
        width: 70%;
    }

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

 

    .challenges .content-wrapper .subtitle {
        width: 100%;
    }

    .auto-service-section .content-container .btn-container {
        flex-direction: column;
        gap: 15px;
    }

    .auto-service-section .content-container .btn-container button {
        width: 100%;
    }

    .execute .content h2 {
        font-size: var(--fs33);
    }

    .execute .content .desc {
        width: 97%;
        font-size: 13px;
    }


    .faq {
        padding-inline: 20px;
    }

    .faq .container .faq-title {
        font-size: 22px;
    }

    .business-impact .header-wrapper {
        gap: 15px;
    }

    .business-impact .header-wrapper h2 {
        font-size: 24px;
    }

    .business-impact .business-card-wrapper .card-container {
        width: 100%;
    }

    .quote-section .quote-content {
        padding: clamp(30px, 8%, 8%) 0px;
    }

    .quote-section .quote-content h2 {
        margin-bottom: var(--fs70);
    }

    .quote-section .quote-content .desc {
        font-size: var(--fs38);
        margin-bottom: var(--fs70);
    }

    .related h2 {
        font-size: var(--fs55);
        margin-bottom: var(--fs70);
    }

    .related .related-card-wrapper .related-card {
        width: 100%;
        flex-direction: column;
        gap: 16px;
        padding: var(--fs30);
    }

    .related .related-card-wrapper .related-card .card-img-wrapper {
        width: 100%;
        aspect-ratio: 3/2;
    }

    .related .related-card-wrapper .related-card .card-content .card-text {
        font-size: 13px;
        width: 100%;
    }

    .related .related-card-wrapper .related-card .card-content .card-btn-container {
        margin-top: 25px;
    }

    .connect-section {
        padding: clamp(20px, 4.69%, 4.69%) 20px clamp(20px, 3.23%, 3.23%) clamp(30px, 4.69%, 4.69%);
    }

}

@media screen and (max-width:390px) {
    .hero-section .hero-content-container .right-wrapper .btn-container .request-demo-btn {
        width: 100%;
    }

    .challenges .content-wrapper .subtitle {
        width: 100%;
        font-size: 17px;
    }

    .auto-service-section .img-wrapper {
        width: 100%;
    }

    .auto-service-section .content-container h2 {
        font-size: 17px;
    }

    .auto-service-section .content-container .subtitle {
        font-size: 15px;
    }

    .auto-service-section .content-container .desc {
        font-size: 13px;
    }
    .execute .content .desc {
        width: 100%;
    }
    .business-impact .business-card-wrapper .card,
  .business-impact .business-card-wrapper .card.card-2 {
    flex-basis: 100%;
  }

  .business-impact .business-card-wrapper .card.card-3 ,
  .business-impact .business-card-wrapper .card.card-2 {
    height: 170px;
  }

    .quote-section .quote-content h2,
    .quote-section .quote-content .desc {
        margin-bottom: var(--fs55);
    }

    .related h2 {
        font-size: 25px;
        margin-bottom: var(--fs60);
    }

    

    .quote-section .quote-content .desc {
        font-size: 16px;
    }
}