/* ---------- Diagnostic - START ---------- */
.diagnostic-section {
    position: relative;
    padding: 50px 50px 56px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--gradient-radial);
    border-radius: 4px;
}
.diagnostic-image {
    width: 100%;
    max-width: 684px;
    display: flex;
}
.diagnostic-image img {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    max-width: 684px;
    height: 494px;
}
.diagnostic-title {
    margin: 20px 0px 0px;
}
.diagnostic-content {
    max-width: 475px;
    width: 100%;
}
.diagnostic-text {
    margin: 14px 0px 0px;
}
.diagnostic-button {
    margin: 50px 0px 0px;
}
/* ---------- Diagnostic - END ---------- */

/* ---------- Why us - START ---------- */

.why-us-content-container {
    margin: 32px 0px 0px;
    display: grid;
    grid-template-columns: 475px 1fr;
    gap: 40px;
}
.why-us__animated-bicycle-container {
    display: flex;
    justify-content: flex-end;
}

.why-us__animated-bicycle .why-us-trace {
    stroke: var(--red);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    pointer-events: none;
}

.why-us__section.is-in-view .why-us__animated-bicycle .why-us-trace {
    animation: why-us-trace-draw 28s linear forwards;
}

@keyframes why-us-trace-draw {
    to {
        stroke-dashoffset: 0;
    }
}
.why-us-content {
    max-width: 475px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.why-us-content__item  {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.why-us-content__item strong {
    color: var(--blue-dark);
}

.why-us-content__item p,
.why-us-content__item ul {
    color: var(--gray-dark);
}
/* ---------- Why us - END ---------- */

/* ---------- About us - START ---------- */

.about-us-section {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
}

.about-us-subtitle {
    text-align: center;
}

.about-us-section .about-us-content {
    max-width: 762px;
    width: 100%;
    margin: 24px auto 0px;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
}

.about-us-logo-list {
    margin: 50px 0px 0px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 30px;
}

.about-us-logo-item {
    padding: 0px 8px;
    width: 142px;
    height: 88px;
}

.about-us-logo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: var(--transition);
}

.about-us-logo-item img:hover {
    filter: grayscale(0%);
}

/* ---------- About us - END ---------- */

/* ---------- FAQ - START ---------- */

.faq-content-container {
    margin: 32px 0px 0px;
    display: grid;
    grid-template-columns: 1fr 475px;
    gap: 80px;
}

.faq-content {
    margin-left: auto;
    width: 100%;
    max-width: 475px;
}

.faq-items-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item + .faq-item {
    padding: 14px 0px 0px;
    border-top: 1px solid var(--gray);
}

.faq-item__title,
.faq-item__content {
    padding-right: 30px;
}

.faq-item__text {
    padding: 4px 0px 0px;
}

.faq-button-container {
    position: relative;
    padding: 27px 0px 0px;
    display: grid;
    grid-template-columns: 1fr 475px;
    gap: 20px;
    border-bottom: 1px solid var(--gray);
}

.faq-wheel-icon-container {
    width: 100%;
    position: relative;
}

.faq-wheel-icon {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 227px;
    height: 227px;
    --faq-wheel-rotate-hit: 680deg;
    --faq-wheel-rotate-back: 668deg;
    transform-origin: center;
    will-change: left, transform;
}

.faq-section.is-in-view .faq-wheel-icon {
    animation: faq-wheel-drive 4.8s cubic-bezier(0.35, 0.05, 0.2, 1) 1 forwards;
}

@keyframes faq-wheel-drive {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    68% {
        left: calc(100% - 227px);
        transform: rotate(var(--faq-wheel-rotate-hit));
    }
    100% {
        left: calc(100% - 251px);
        transform: rotate(var(--faq-wheel-rotate-back));
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-us__animated-bicycle .why-us-trace {
        transition: none;
        stroke-dashoffset: 0 !important;
    }

    .faq-wheel-icon {
        animation: none;
    }
}

/* ---------- FAQ - END ---------- */

@media (max-width: 1440px) {
    .why-us__animated-bicycle {
        width: 100%;
    }
}

@media (max-width: 1279px) {
    /* ---------- Diagnostic - START ---------- */
    .diagnostic-image img {
        left: -130px;
    }
    /* ---------- Diagnostic - END ---------- */
}

@media (max-width: 1023px) {
    /* ---------- Diagnostic - START ---------- */
    .diagnostic-section {
        grid-template-columns: 1fr 393px;
    }
    .diagnostic-image img {
        left: -300px;
    }
    .diagnostic-button {
        margin: 30px 0px 0px;
    }
    /* ---------- Diagnostic - END ---------- */

    /* ---------- Why us - START ---------- */
    .why-us-content-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .why-us-content {
        max-width: 100%;
        gap: 30px;
    }
    /* ---------- Why us - END ---------- */

    /* ---------- About us - START ---------- */
    .about-us-logo-list {
        gap: 10px 20px;
    }
    /* ---------- About us - END ---------- */

    /* ---------- FAQ - START ---------- */
    .faq-content-container {
        margin: 24px 0px 0px;
    }
    .faq-content {
        max-width: 100%;
        margin-left: 0px;
    }
    .faq-content-container {
        grid-template-columns: 1fr;
        gap: 27px;
    }
    .faq-button-container {
        overflow: hidden;
        grid-template-columns: 1fr;
        gap: 0px;
    }
    .faq-wheel-icon-container {
        min-height: 227px;
    }
    .faq-wheel-icon {
        --faq-wheel-rotate-hit: 500deg;
        --faq-wheel-rotate-back: 492deg;
    }
    /* ---------- FAQ - END ---------- */
}

@media (max-width: 767px) {
    /* ---------- Diagnostic - START ---------- */
    .diagnostic-section {
        padding: 30px 20px 0px;
        display: flex;
        flex-direction: column-reverse;
        gap: 16px;
    }
    .diagnostic-image img {
        position: initial;
        width: 100%;
        height: 100%;
    }
    .diagnostic-content {
        max-width: 100%;
    }
    .diagnostic-title {
        margin: 14px 0px 0px;
    }
    /* ---------- Diagnostic - END ---------- */

    /* ---------- Why us - START ---------- */
    
    .why-us__animated-bicycle {
        height: 100%;
    }
    

    /* ---------- About us - START ---------- */
    .about-us-logo-list {
        margin: 24px 0px 0px;
        gap: 4px 20px;
    }

    .about-us-section .about-us-content {
        font-weight: 400;
        font-size: 16px;
        line-height: 26px;
    }

    .about-us-logo-item {
        padding: 0px;
        width: 88px;
        height: 66px;
    }
    /* ---------- About us - END ---------- */

    /* ---------- FAQ - START ---------- */
    .faq-button-container {
        padding: 24px 0px 0px;
    }
    .faq-wheel-icon {
        --faq-wheel-rotate-hit: 380deg;
        --faq-wheel-rotate-back: 374deg;
    }
    /* ---------- FAQ - END ---------- */
}