/*hero-banner-section-start*/
.hero-banner img {
    border-radius: 20px;
    height: 100%;
    max-height: 400px;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 20px;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 20px;
}

@media (max-width: 576px) {
    .hero-banner img {
        border-radius: 10px;
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: 15px;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: 15px;
    }

    .swiper-button-prev svg,
    .swiper-button-next svg {
        width: 20px;
        height: 20px;
    }

}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: '' !important;
}

.swiper-pagination-bullet-active {
    background-color: white;
}

/*hero-banner-section-end*/

/*order-steps-section-start*/
.order-steps-section .row {
    row-gap: 10px;
}

@media(min-width:768px) {
    .order-steps-section {
        background-image: url("../../images/order-steps/line-shape.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        /* background-color: #F0F0F0; */
    }
}

.order-steps-section .step-title {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    transition: 0.3s all;
}

.order-steps-section .step-title:hover {
    color: #f48335;
}

.order-steps-section .step-caption {
    font-size: 14px;
    font-weight: 400;
    color: #565656;
}

/*order-steps-section-end*/


/*design-guide-section-start*/
.design-guide-section .swiperProducts {
    margin-inline: auto;
    width: calc(100% - 50px);
}

.design-guide-section .card-guide {
    background-color: #F0F0F0;
    border: 1px solid #565656;
    border-radius: 16px;
    padding: 20px;
    transition: 0.2s all;
    row-gap: 10px;
}

.design-guide-section .card-guide:hover {
    border-color: #f48335;
}

.design-guide-section .card-guide .sub-title-guide {
    font-size: 18px;
    font-weight: 400;
    color: #565656;
}

.design-guide-section .card-guide .title-guide {
    font-size: 18px;
    font-weight: 600;
    color: #262626;
}

.design-guide-section .card-guide .label-guide {
    font-size: 15px;
    font-weight: 400;
    background-color: #fff;
    color: #262626;
    box-shadow: 0 0 7px -3px rgb(0 0 0 / .5);
    border-radius: 0 8px 8px 0;
    padding-inline: 10px 5px;
    left: -30px;
}

.design-guide-section .swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: 0;
}

.design-guide-section .swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: 0;
}

/*design-guide-section-end*/