body {
    overflow-x: hidden;
}

.bg_main {
    color: #F7F7F2;
    height: 110vh;
}

.row_main {
    margin-top: 60px;
    /* height: 150vh; */
}

.mt_main {
    margin-top: 90px;
}

.subtitle_main {
    color: #E8DEC8;
    margin-bottom: 1px;
}

.title_main {
    color: #BEB093;
}

.paragragh {
    color: #E9E5DD;
    margin-top: 15px;
}

.colors {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 13px;
}

.active_color {
    border-radius: 50%;
    border: 1px solid white;
    padding: 4px;
}

.first_color {
    background-color: #D6CEC1 !important;
}

.second_color {
    background-color: #906B48 !important;
}

.third_color {
    background-color: #7BA6BD !important;
}

.fourth_color {
    background-color: #9486B2 !important;
}

.price {
    color: #D6CEC1;
    font-size: 30px;
    font-family: 'Roboto'
}

.Dec_price {
    font-size: 18px;
}

.cart_main {
    background-color: transparent;
    color: #F7F7F2;
    border: 2px solid #F7F7F2;
    height: 42px;
}

/* right section */
.bg_main .swiper-slide {
    text-align: center;
    width: 100px !important;
    margin-top: 305px;
}

.bg_main .product_image_main_large{
    width: 50px !important;
    height: 90px !important;
}

.bg_main .swiper-slide-active {
    margin-top: 10px;
}

.bg_main .swiper-slide-next {
    margin-left: 210px;
    margin-top: 305px;
}

.bg_main .swiper-slide-next-ar {
    margin-right: 210px;
    margin-top: 305px;
}

.bg_main .swiper-slide-active .product {
    width: 200px !important;
    height: 420px !important;
    margin-left: 100px;
}

.bg_main .swiper-slide-active .product-ar {
    margin-left: 240px;
    margin-right: 100px;
}

.product2 {
    width: 50px !important;
}

.bg_main .swiper-slide-active .product2 {
    width: 200px !important;
    margin-top: 40px !important;
    margin-left: 40px !important;
}

.bg_main .swiper-slide-active .product3 {
    width: 300px !important;
    margin-top: 100px !important;
}

.bg_main .swiper-slide-next .product {
    width: 50px !important;
    height: 80px !important;
    height: 90px !important;
}

.bg_main .swiper-slide-prev .product {
    width: 50px !important;
    height: 90px !important;
}

.bg_main .swiper-slide-next .product3 {
    width: 95px !important;
}

.bg_main .swiper-slide.small {
    padding: 20px;
}

.bg_main .swiper-button-prev,
.bg_main .swiper-rtl .swiper-button-next {
    left: 50%;
}

.bg_main .swiper-button-prev-ar, .bg_main .swiper-rtl .swiper-button-next-ar {
    left: 5%;
}

.bg_main .swiper-horizontal>.swiper-pagination-bullets,
.bg_main .swiper-pagination-bullets.swiper-pagination-horizontal,
.bg_main .swiper-pagination-custom,
.bg_main .swiper-pagination-fraction {
    left: 43%;
    display: flex;
    align-items: center;
    top: 490px;
}

.bg_main .swiper-container-ar .swiper-horizontal>.swiper-pagination-bullets,
.bg_main .swiper-container-ar .swiper-pagination-bullets.swiper-pagination-horizontal,
.bg_main .swiper-container-ar .swiper-pagination-custom,
.bg_main .swiper-container-ar .swiper-pagination-fraction {
    right: 43%;
    left: 0px;
}

.bg_main .swiper-wrapper {
    transform: none !important;
    transition-delay: 0ms;
}

.number_product {
    position: absolute;
    top: 120px;
    left: 239px;
    color: #453c3277;
    font-size: 115px;
    font-weight: bolder;
}

.bg_main .swiper-pagination-bullet-active {
    background-color: #BEB093 !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
}

.bg_main .swiper-pagination-bullet {
    background-color: #6b5d4e;
    border-radius: 0px;
    width: 20px;
    height: 3px;
}

.bg_main .swiper-button-next,
.bg_main .swiper-button-prev {
    color: #E9E5DD;
    /* top: 490px;
    right: 216px; */
}

.bg_product,
.bg_product3 {
    background-color: #453c3277;
    width: 100px;
    height: 87px;
    border-radius: 50%;
}

.bg_product3 {
    background-color: #453c3234;
    width: 70px;
    height: 62px;
}

.bg_main .swiper-slide-next .bg_product3 {
    background-color: #453c3277 !important;
    width: 91px !important;
    height: 88px !important;
    margin-top: 15px !important;
}

.bg_main .swiper-slide-active .bg_product,
.bg_main .swiper-slide-active .bg_product3 {
    background-color: transparent !important;
}

.des1,
.des2 {
    position: absolute;
    display: none;
}

.des1 {
    top: -15px;
    left: 56px;
    position: relative;
    animation: fade-left 1s;
    animation-iteration-count: 1;
}

.des1_ar {
    left: 188px;
    animation: none;
}

@keyframes fade-left {
    0% {
        left: 0px;
        opacity: 0;
    }

    100% {
        left: 56px;
        opacity: 1;
    }
}

.des1_slide2 {
    top: -10px;
    left: 0px;
    position: relative;
    animation: fade-left-slide2 1s;
    animation-iteration-count: 1;
}

@keyframes fade-left-slide2 {
    0% {
        left: -10px;
        opacity: 0;
    }

    100% {
        left: 4px;
        opacity: 1;
    }
}

.des1_slide3 {
    top: 54px;
    left: 0px;
    position: relative;
    animation: fade-left-slide2 1s;
    animation-iteration-count: 1;
}

.des2 {
    top: 0px;
    left: 221px;
    position: relative;
    animation: fade-right 1s;
    animation-iteration-count: 1;
}

.des2_ar {
    top: 0px;
    right: 0px;
    left: 360px;
    animation: none;
}

@keyframes fade-right {
    0% {
        left: 400px;
        opacity: 0;
    }

    100% {
        left: 221px;
        opacity: 1;
    }
}

.des2_slide2 {
    top: 2px;
    left: 170px;
    position: relative;
    animation: fade-right-slide2 1s;
    animation-iteration-count: 1;
}

@keyframes fade-right-slide2 {
    0% {
        left: 250px;
        opacity: 0;
    }

    100% {
        left: 170px;
        opacity: 1;
    }
}

.des2_slide3 {
    top: 78px;
    left: 186px;
    position: relative;
    animation: fade-des2-slide3 1s;
    animation-iteration-count: 1;
}

@keyframes fade-des2-slide3 {
    0% {
        left: 230px;
        opacity: 0;
    }

    100% {
        left: 186px;
        opacity: 1;
    }
}


.des3 {
    top: 32px;
    left: 21px;
    display: none;
    position: relative;
    animation: fade-two-left 1s;
    animation-iteration-count: 1;
}

.des3_ar{
    top: 32px;
    left: 119px;
    right: 220px;
    animation: none;
}

@keyframes fade-two-left {
    0% {
        left: -20px;
        opacity: 0;
    }

    100% {
        left: 21px;
        opacity: 1;
    }
}

.des3_slide2 {
    top: 259px;
    left: 88px;
}

.des3_2 {
    position: absolute;
    top: 240px;
    left: 10px;
    display: none;
}

.des3_2_slide2 {
    top: 17px;
    left: -96px;
    position: relative;
    animation: fade-des3-slide2 1s;
    animation-iteration-count: 1;
}

@keyframes fade-des3-slide2 {
    0% {
        left: -150px;
        opacity: 0;
    }

    100% {
        left: -96px;
        opacity: 1;
    }
}

.des_all,
.des_all2,
.des_all3 {
    position: absolute;
    display: none;
}

.bg_main .details_in_small_screen {
    display: none;
    left: -14px;
}

.bg_main .details_in_small_screen_2 {
    left: -134px;
}

.bg_main .details_in_small_screen_3 {
    left: -254px;
}

.bg_main .swiper-slide-active .des_all,
.bg_main .swiper-slide-active .des_all2,
.bg_main .swiper-slide-active .des_all3,
.bg_main .swiper-slide-active .des_all,
.bg_main .swiper-slide-active .des1,
.bg_main .swiper-slide-active .des2,
.bg_main .swiper-slide-active .des3,
.bg_main .swiper-slide-active .des3_2 {
    display: block;
}

.des_all p,
.des_all2 p,
.des_all3 p {
    margin-bottom: 2px;
}

.des_all {
    top: 44px;
    left: 20px;
    display: none;
}

.des_all_ar {
    top: 44px;
    left: 144px;
}

.des_all_slide2 {
    top: 48px;
    left: -36px;
}

.des_all_slide3 {
    top: 86px;
    left: -32px;
}

.des_all2 {
    top: 273px;
    left: -42px;
}

.des_all2_ar {
    top: 255px;
    left: -13px;
    right: 0px;
    text-wrap: nowrap;
}

.des_all2_slide2 {
    top: 258px;
    left: -172px;
}

.des_all3 {
    top: 176px;
    left: 313px;
}

.des_all3_slide2 {
    top: 188px;
    left: 250px;
}

.des_all3_ar {
    top: 186px;
    left: 489px;
}

.des_all2_slide3 {
    top: 237px;
    left: -167px;
}

.des_all3_slide3 {
    top: 235px;
    left: 259px;
}

.des_title {
    color: #BFB8AD;
}

.des {
    color: #E8DEC8;
    font-family: 'Roboto'
}

/* bottom texts */
.bottom_texts {
    text-align: center;
    position: absolute;
    left: 44%;
    transform: translate(-35%, 0%);
}

.bottom_texts p {
    font-size: 80px;
    font-weight: bolder;
}

.bottom_texts .first {
    color: #453c3257;
    position: relative;
    bottom: -40px;
}

.bottom_texts .last {
    color: #e2ddd36e;
    position: relative;
    bottom: 60px;
    overflow: hidden;
}

.toTopButton {
    background-color: #E9E5DD;
    color: #78694B;
    border: 2px solid #78694B;
    border-radius: 50%;
    padding: 9px 11px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .bg_main {
        height: auto;
        padding: 0px 20px;
    }

    .des_title {
        font-size: 12px !important;
        margin-bottom: 5px;
    }

    .des {
        font-size: 15px !important;
    }

    .mt_main {
        margin-top: 80px;
        margin-bottom: 30px;
    }

    .bg_main .swiper-slide-active .product {
        width: 413px !important;
    }

    .bg_main .swiper-slide-active .product2 {
        width: 200px !important;
        margin-top: 55px !important;
        margin-left: -28px !important;
    }

    .bg_main .swiper-slide-active .product3 {
        width: 250px !important;
        margin-top: 185px !important;
        margin-left: -49px !important;
    }

    .left_section {
        padding-left: 40px;
        padding-top: 40px;
        padding-right: 40px;
    }

    .d_none {
        display: none !important;
    }

    .bg_main .details_in_small_screen {
        text-align: start;
    }

    .bg_main .swiper-slide-active .details_in_small_screen {
        display: block;
    }

    .bg_main .swiper-slide-next {
        margin-left: 177px;
    }

    .bottom_texts p {
        font-size: 22px;
    }

    .bottom_texts .first {
        bottom: 35px;
    }

    .bottom_texts .last {
        bottom: 72px;
    }

    .shadow_1 {
        position: absolute;
        top: 133px;
        left: 27px;
    }

    .bg_main .carousel-indicators {
        margin-right: 15%;
        bottom: 425px;
        top: 200px;
    }

    .bg_main .carousel-indicators [data-bs-target] {
        background-color: #BEB093;
        margin-top: 2px;
        width: 23px;
    }

    .bg_main .carousel-indicators .active {
        background-color: #BEB093;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        margin-top: 0px;
    }

    .bg_main .carousel-control-next,
    .bg_main .carousel-control-prev {
        height: 26px;
        top: 200px;
    }
    .title_main {
        font-size: 23px;
    }
    .price {
        font-size: 23px;
    }
}