/*========================
  5.2  category CSS start
==========================*/
.main-categories-list {
    display: grid;
    gap: 15px;

    li {
        .main-categories-box {
            padding: 15px 20px;
            background-color: rgba(var(--box-bg), 1);
            border-radius: 6px;
            display: flex;
            align-items: center;
            width: 100%;

            [dir="rtl"] & {
                transform: scaleX(-1);
            }

            &.ride {
                background-image: url(../../assets/images/categories/1.png);
                background-position: bottom right;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
            }

            &.outstation {
                background-image: url(../../assets/images/categories/2.png);
                background-position: bottom right;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
            }

            &.rental {
                background-image: url(../../assets/images/categories/3.png);
                background-position: bottom right;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
            }

            .main-categories-content {
                width: 100%;

                [dir="rtl"] & {
                    transform: scaleX(-1);
                }

                h5 {
                    font-weight: 500;
                    color: rgba(255, 255, 255, 1);
                }

                h6 {
                    margin-top: 5px;
                    line-height: 1.3;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 0.6);
                }

                .arrow-icon {
                    margin-top: 20px;
                    --Iconsax-Color: rgba(255, 255, 255, 1);
                    --Iconsax-Size: 16px;

                    [dir="rtl"] & {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
}

.category-place-section {
    padding-top: 12px;
}