/* -------------------------------------------------------------------------- */
/* -------------------- Services & Partners Hero Section -------------------- */
/* -------------------------------------------------------------------------- */

.section-hero {
    padding-bottom: var(--Spacings-12, 40px);
    border-bottom: 1px solid #E8E8E8;
    background-color: #FFF;
}

.hero-container-main {
    display: grid;
    grid-template-areas:
        "hero-image-area"
        "hero-content-area";
    grid-template-columns: 1fr;
    gap: var(--Spacings-10, 32px);
    background: none;
}

.hero-container-main .hero-image-area {
    grid-area: hero-image-area
}

.hero-container-main .hero-content-area {
    grid-area: hero-content-area;
    display: flex;
    padding: 0 var(--Spacings-7, 20px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacings-10, 32px);
    align-self: stretch;
}

.hero-container-main .main--title>* {
    color: var(--Colors-C-Grey-Grey-100, #1A1A1A);
    align-self: stretch;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 0;
}

.hero-container-main .cta-buttons-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: var(--Spacings-6, 16px);
    align-self: stretch;
}

.hero-container-main .cta-buttons-group a {
    width: 100%;
}

/* -------------------------------------------------------------------------- */
/* -------------- Vehicle Services & Partners Benefits Section -------------- */
/* -------------------------------------------------------------------------- */

.info-cards-section {
    display: flex;
    padding: var(--Spacings-12, 40px) 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--Spacings-10, 32px);
    border-bottom: 1px solid var(--Colors-C-Grey-Grey-30, #E8E8E8);
}

/* 
.info-cards-container-main

.info-cards-title-area
*/
.info-cards-title {
    color: var(--Colors-C-Grey-Grey-100, #1A1A1A);
    text-align: center;
    margin-bottom: 0;
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.info-cards-list-container {
    display: flex;
    flex-direction: column;
    gap: var(--Spacings-8, 24px);
    align-self: stretch;
    align-items: stretch;
}

.info-cards-list-container a {
    text-decoration: none;
}

.info-cards-section .info-cards-list-container .info-cards-item .card {
    display: flex;
    padding: var(--Spacings-6, 16px);
    flex-direction: column;
    align-items: stretch;
    gap: var(--Spacings-5, 12px);
    align-self: stretch;
    border-radius: var(--Sizes-L, 16px);
    border: 1px solid var(--Colors-C-Grey-Grey-30, #E8E8E8);
    background: var(--Colors-Neutral-White, #FFF);
    height: 100%;
}

.info-cards-section .card-head-wrapper {
    display: flex;
    align-items: center;
    gap: var(--Spacings-6, 16px);
    align-self: stretch;
}

.info-cards-section .card-head-wrapper .card-image img,
.info-cards-section .card-badge img {
    width: 56px;
    height: 56px;
}

.info-cards-section.vehicle-services-section .info-cards-list-container .info-cards-item .card .card-head-wrapper .title--wrapper h4,
.info-cards-section.benefits-section .info-cards-list-container .info-cards-item .card .card-body h4.card-title {
    color: var(--Colors-C-Grey-Grey-100, #1A1A1A);
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    margin-bottom: 0;
    font-weight: 700;
    line-height: normal;
}

.info-cards-list-container .info-cards-item .card .card-body {
    width: 100%;
    height: 100%;
}

.info-cards-section.vehicle-services-section .info-cards-list-container .info-cards-item .card .card-body p,
.info-cards-section.benefits-section .info-cards-list-container .info-cards-item .card .card-body .card-text>* {
    color: var(--Colors-C-Grey-Grey-80, #595959);

    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.info-cards-section.benefits-section .info-cards-list-container .info-cards-item .card .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Spacings-4, 8px);
    align-self: stretch;
}


/* -------------------------------------------------------------------------- */
/* ------------------ Booking Step || How App Work Section ------------------ */
/* -------------------------------------------------------------------------- */
.booking-steps-section {
    display: flex;
    padding: var(--Spacings-12, 40px) 0;
    flex-direction: column;
    gap: var(--Spacings-10, 32px);
    align-self: stretch;
}

.booking-steps-section.customers-app-steps {
    align-items: flex-start;
    gap: 32px;
}

.booking-steps-section.partners-app-steps {
    align-items: center;
    gap: 40px;
    border-bottom: 1px solid var(--Colors-C-Grey-Grey-30, #E8E8E8);
}

.booking-steps-section .booking-steps-title {
    color: var(--Colors-C-Grey-Grey-100, #1A1A1A);
    text-align: center;
    align-self: stretch;
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.booking-steps-tabs-container {
    display: flex;
    flex-direction: column;
    gap: var(--Spacings-11, 36px);
}

.booking-steps-tabs-container .x--scroll {
    /* padding: var(--Spacings-6, 16px) 0; */
    gap: var(--Spacings-5, 12px);
}


.booking-steps-tabs-container .nav-pills .secondary-nav-link.active,
.booking-steps-tabs-container .nav-pills .secondary-nav-link.active:hover,
.booking-steps-tabs-container .nav-pills .show>.secondary-nav-link {
    overflow: hidden;
    color: var(--Colors-Green-Gozem-120, #0E5E24);
    text-align: center;
    text-overflow: ellipsis;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.carousel-how {
    display: flex;
    flex-direction: column;
    gap: 56px;
    width: 100%;
}


.carousel-how.u-grid--2cols .carousel-indicators {
    order: 2;
    overflow: scroll;
}

.carousel-how .carousel-indicators {
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    justify-content: flex-start;
}

.carousel-how .carousel-indicators [data-bs-target] {
    text-indent: 0px;
    width: auto;
    flex: 1 0 112%;
    height: auto;
    margin: 0;
}

.carousel-how .carousel-indicators button {
    position: relative;
    opacity: 1;
    border-radius: 20px;
    border: 1px solid #D8D8D8;
    display: flex;
    padding: 24px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}


.carousel-how .carousel-indicators button .order {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    background-color: #F2F2F2;
    border-radius: 99px;
    border: 1px solid #F2F2F2;
    color: #1A1A1A;
    text-align: center;
    place-content: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.carousel-how .carousel-indicators button .step-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    flex: 1 0 0;
}

.carousel-how .carousel-indicators button .step-content h3 {
    color: #1A1A1A;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.carousel-how .carousel-indicators button .step-content p {
    color: #6C6C6C;
    text-align: left;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.carousel-how .carousel-indicators button.active {
    background-color: #179138;
}

.carousel-how .carousel-indicators button.active .order {
    background-color: #0E5E24;
    border-color: #0E5E24;
    color: #fff !important
}

.carousel-how .carousel-indicators button.active h3,
.carousel-how .carousel-indicators button.active p {
    color: #fff
}

.carousel-how .carousel-wrapper {
    order: 1;

    background-color: #E8F4EB;

    background-image: url("../images/iphone-14-Pro-portrait-mockup-background.png");
    background-position: bottom center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    border-radius: 32px;
    background-size: 288px 462px;
    min-height: 540px;
}

.carousel-how .carousel-inner {
    border-radius: 2px;
    left: 50%;
    top: 48.75%;
    -webkit-transform: translate(-50%, 22%);
    transform: translate(-50%, -37.59%);
    width: 248.05px;
    height: auto;
    border-radius: 2.25rem 2.25rem 0 0;
    position: absolute;
}

.carousel-how .carousel-inner img {
    height: auto;
    max-width: 100%;
    border-radius: 2.25rem 2.25rem 0 0;
}




















@media (min-width: 744px) {
    .hero-container-main .hero-content-area {
        padding: 0 20px;
        gap: 48px;
    }


    .hero-container-main .hero-content-area .logo-area img {
        width: 220px;
    }

    .hero-container-main .main--title>* {
        font-size: 48px;
    }

    .hero-container-main .cta-buttons-group {
        flex-direction: row;
        gap: var(--Spacings-8, 24px);
        justify-content: flex-start;
    }

    .hero-container-main .cta-buttons-group a {
        width: fit-content;
    }

    .section-hero {
        padding-bottom: var(--Spacings-16, 64px);
    }

    .hero-container-main {
        gap: var(--Spacings-12, 40px);
    }

    /* -------------------------------------------------------------------------- */
    .info-cards-section {
        padding: var(--Spacings-16, 64px) 0;
        gap: var(--Spacings-12, 40px);
    }

    .info-cards-title {
        font-size: 38px;
    }

    .info-cards-section .info-cards-list-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .info-cards-section .info-cards-list-container .info-cards-item {
        flex: 1 1 30%;
    }

    .info-cards-section.benefits-section .info-cards-list-container {
        gap: 16px;
    }

    /* -------------------------------------------------------------------------- */

    .booking-steps-section {
        padding: var(--Spacings-16, 64px) 0;
    }

    .booking-steps-section .booking-steps-title {
        font-size: 38px;
    }

    .carousel-how .carousel-indicators [data-bs-target] {
        flex: 1 0 54%;
    }

    .booking-steps-tabs-container .x--scroll {
        padding: var(--Spacings-6, 16px);
        border-radius: var(--Spacings-18, 128px);
        border: 1px solid var(--Colors-C-Grey-Grey-40, #D8D8D8);
        width: fit-content;
        align-self: center;
    }
}


@media (min-width: 1024px) {
    .section-hero {
        padding-bottom: 0;
        height: 40vw;
    }

    .hero-container-main {
        grid-template-areas: "hero-content-area" "hero-image-area";
        grid-template-columns: 1fr;
        height: 100%;
    }


    .hero-container-main .hero-content-area {
        height: 100%;
        display: flex;
        padding-left: 20px;
        padding-right: 0;

        justify-content: center;
        gap: 48px;
        grid-row: 1 / 3 !important;
        height: 100%;
    }

    .hero-container-main .main--title {
        width: 48.2%;
    }

    .hero-image-area .image-area-container {
        height: 100%;
    }

    .hero-image-area {
        width: 40%;
        justify-self: flex-end;
        grid-row: 1 / 3 !important;
        height: 100%;
    }

    /* -------------------------------------------------------------------------- */
    .info-cards-section {
        padding: 124px 0 96px;
        gap: 80px;
        border: none;
    }

    .info-cards-title {
        font-size: 48px;
    }

    .info-cards-section.vehicle-services-section .info-cards-list-container {
        gap: 32px;
    }

    .info-cards-section.benefits-section .info-cards-list-container {
        gap: 56px;
    }

    .info-cards-section.benefits-section .info-cards-list-container .info-cards-item {
        flex: 1 1 29%;
    }

    .info-cards-section.vehicle-services-section .info-cards-list-container .info-cards-item .card {
        gap: 24px;
        padding: 24px;
    }

    .info-cards-section.vehicle-services-section .card-head-wrapper {
        gap: 24px;

    }

    .info-cards-section .card-head-wrapper .card-image img,
    .info-cards-section .card-badge img {
        width: 70px;
        height: 70px;
    }

    .info-cards-section.benefits-section .info-cards-list-container .info-cards-item .card {
        gap: 24px;
        padding: var(--Spacings-9, 28px) var(--Spacings-10, 32px);
    }

    .info-cards-section.vehicle-services-section .info-cards-list-container .info-cards-item .card .card-head-wrapper .title--wrapper h4,
    .info-cards-section.benefits-section .info-cards-list-container .info-cards-item .card .card-body h4.card-title {
        font-size: 24px;
    }


    .info-cards-section.vehicle-services-section .info-cards-list-container .info-cards-item .card .card-body p,
    .info-cards-section.benefits-section .info-cards-list-container .info-cards-item .card .card-body .card-text>* {
        font-size: 18px;
    }

    /* -------------------------------------------------------------------------- */

    .booking-steps-section.customers-app-steps .booking-steps-title {
        font-size: 48px;
        text-align: start;
    }

    .booking-steps-section.partners-app-steps .booking-steps-title {
        font-size: 48px;
    }

    .booking-steps-section.customers-app-steps {
        gap: 80px;
    }

    .booking-steps-section.partners-app-steps {
        gap: 48px;
        border: none;
    }

    .booking-steps-tabs-container {
        gap: 80px;
    }

    .carousel-how.u-grid--2cols {
        display: flex;
        flex-direction: row-reverse;
    }

    .carousel-how .carousel-indicators [data-bs-target] {
        flex: none;
    }

    .carousel-how.u-grid--2cols .carousel-indicators {
        overflow: hidden;
        flex-direction: column;
    }

    .carousel-how .carousel-wrapper {
        /* background-size: 450px; */

        background-size: 433px 693px;
        /*500px;*/

        min-height: 540px;
        background-position: bottom center;

        /* position: relative;
        width: 100%; */
    }

    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 48.75%;
        -webkit-transform: translate(-50%, -50%);
        width: 370px;

        transform: translate(-50%, -30%);
        /* transform: translate(-50%, -32%); */
        /* height: 70%; */
    }

    .booking-steps-section.partners-app-steps .carousel-how .carousel-inner {
        top: 49.95%;-webkit-transform: translate(-50%, -50%);
        width: 370px;

        transform: translate(-50%, -30%);
    }

    /* .carousel-how .carousel-inner .carousel-item{} */

    .carousel-how .carousel-inner img {
        width: 100%;
        border-radius: 3.25rem 3.25rem 0 0;
        height: auto;
        max-width: 100%
    }

    .booking-steps-section .nav-pills .primary-nav-link,
    .booking-steps-section .nav-pills .primary-nav-link:hover,
    .booking-steps-section .nav-pills .primary-nav-link.active,
    .booking-steps-section .nav-pills .primary-nav-link.active:hover,
    .booking-steps-section .nav-pills .show>.primary-nav-link,
    .booking-steps-section .nav-pills .secondary-nav-link,
    .booking-steps-section .nav-pills .secondary-nav-link:hover,
    .booking-steps-section .nav-pills .secondary-nav-link.active,
    .booking-steps-section .nav-pills .secondary-nav-link.active:hover,
    .booking-steps-section .nav-pills .show>.secondary-nav-link {
        font-size: 20px;
    }
    /*
    .carousel-how .carousel-inner {

        -webkit-transform: translate(-50%, -22%);
        transform: translate(-50%, -22%);
        width: 374px;
    }

    .carousel-how .carousel-inner img {
        width: 100%;
    } */


}


@media (min-width: 1034px) {

    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 47.75%;
    }

    .booking-steps-section.partners-app-steps .carousel-how .carousel-inner {
        top: 49.75%;
    }
}

@media (min-width: 1131px) {

    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 46.5%;
    }


}

@media (min-width: 1200px) {
    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 48.5%;
    }

    .booking-steps-section.partners-app-steps .carousel-how .carousel-inner {
        top: 49.75%;
    }
}

@media (min-width: 1260px) {

    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 47.75%;
    }


}

@media (min-width: 1280px) {
    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 47.5%;
    }
}

@media (min-width: 1346px) {

    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 46.5%;
    }


}

@media (min-width: 1481px) {
    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 45.25%;
    }
}

@media (min-width: 1660px) {
    .booking-steps-section.customers-app-steps .carousel-how .carousel-inner {
        top: 47.75%;
        transform: translate(-50%, -35%);
    }
}



@media (min-width: 1680px) {
        .booking-steps-section.partners-app-steps .carousel-how .carousel-inner {
        top: 43.75%;
    }
}