/*=============================
  5.8  onboarding CSS start
===============================*/
.onboarding-bg {
    background-color: rgba(var(--box-bg), 1);

    body.dark & {
        background-color: rgba(31, 31, 31, 1) !important;
    }
}

.onboarding-section {
    .main-slider {
        .poster-image {
            text-align: center;
            position: relative;

            .image {
                display: block;
                position: relative;
                width: 100%;
                height: 500px;
                object-fit: contain;

                @media (max-width: 600px) {
                    height: calc(400px + (500 - 400) * ((100vw - 320px) / (600 - 320)));
                }
            }

            .image-dark {
                display: none;
            }

            body.dark & {
                .image {
                    display: none;
                }

                .image-dark {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 500px;
                    object-fit: contain;

                    @media (max-width: 600px) {
                        height: calc(400px + (500 - 400) * ((100vw - 320px) / (600 - 320)));
                    }
                }
            }
        }

        .users {
            margin-top: -570px;
            position: relative;
            animation: mover1 1s infinite alternate;
            animation-delay: 2ms;
        }
    }

    .bottom-box {
        position: relative;
        text-align: center;
        margin-top: 40px;
        margin-bottom: 30px;
        padding: 20px 20px 60px 20px;
        border-radius: 15px;
        background-color: rgba(var(--white), 1);
        clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);

        @media (max-width: 600px) {
            padding: 20px calc(15px + (20 - 15) * ((100vw - 320px) / (600 - 320))) 60px
                calc(15px + (20 - 15) * ((100vw - 320px) / (600 - 320)));
        }

        // @media (min-width: 600px) {
        //     margin-top: 0;
        // }

        .poster-details {
            h2 {
                text-transform: uppercase;
                font-weight: 600;
                font-size: 20px;
                color: rgba(var(--title-color), 1);

                @media (max-width: 600px) {
                    font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (600 - 320)));
                }
            }

            p {
                width: 80%;
                margin-inline: auto;
                font-size: 15px;
                padding-top: 10px;
                font-weight: 400;
                color: rgba(var(--content-color), 1);

                @media (max-width: 425px) {
                    width: 100%;
                }
            }
        }

        &.driver-bottom-box {
            width: 100%;
            max-width: 600px;
            position: fixed;
            bottom: 0;
            left: 50%;
            z-index: 1;
            transform: translateX(-50%);
            margin-top: 0;
            margin-bottom: 0;
            padding: 40px 20px 30px 20px;
            background-color: rgba(var(--box-bg), 1);
            border-radius: 0px;
            clip-path: unset;

            .poster-image {
                .image {
                    display: block;
                    position: relative;
                }

                .image-dark {
                    display: none;
                }

                body.dark & {
                    .image {
                        display: none;
                    }

                    .image-dark {
                        display: block;
                        position: relative;
                    }
                }
            }
        }
    }

    .driver-main-slider {
        .poster-image {
            text-align: center;
            position: relative;
            width: 100%;

            .image {
                display: block;
                position: relative;
                height: 500px;
                width: 100%;
                object-fit: cover;
                object-position: bottom;

                @media (max-width: 600px) {
                    height: calc(400px + (500 - 400) * ((100vw - 320px) / (600 - 320)));
                }

                // @media (min-width: 600px) {
                //     height: 500px;
                //     width: 100%;
                //     object-fit: cover;
                // }
            }

            .image-dark {
                display: none;
            }

            body.dark & {
                .image {
                    display: none;
                }

                .image-dark {
                    display: block;
                    position: relative;
                    width: 100%;
                    height: 500px;
                    object-fit: cover;
                    object-position: bottom;

                    @media (max-width: 600px) {
                        height: calc(400px + (500 - 400) * ((100vw - 320px) / (600 - 320)));
                    }
                }
            }
        }

        .drivers {
            width: 180px;
            margin-top: -580px;
            position: relative;
            animation: mover1 1s infinite alternate;
            animation-delay: 2ms;

            @media (max-width: 600px) {
                margin-top: calc(-480px + (-580 - -480) * ((100vw - 320px) / (600 - 320)));
            }
        }
    }

    .onboarding-button {
        position: absolute;
        left: 50%;
        bottom: -20px;
        transform: translateX(-50%);
        --Iconsax-Color: rgba(255, 255, 255, 1);
        margin: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(var(--theme-color), 1);
        border-radius: 100%;
        z-index: 0;
    }

    .driver-onboarding-button {
        position: relative;
        width: 88px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 40px;
        float: right;
        background-color: rgba(var(--theme-color), 1);
        border-radius: 6px;
        z-index: 0;

        [dir="rtl"] & {
            float: left;
        }

        h5 {
            line-height: 1;
            font-weight: 400;
            font-size: 16px;
            color: rgba(255, 255, 255, 1);
        }

        i {
            --Iconsax-Color: rgba(var(--theme-color), 1);
            --Iconsax-Size: 12px;
            padding: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            background-color: rgba(255, 255, 255, 1);
        }

        &::after {
            content: none;
        }

        &.swiper-button-disabled {
            opacity: 1 !important;
            pointer-events: painted !important;
            cursor: pointer !important;
        }
    }
}