@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #101010;
    font-family: "DM Sans", sans-serif !important;
    overflow: auto !important;
}

.fix-top{
    transition: 1s;
}



a {
    text-decoration: none;
}

section,
header {
    margin: 0 30px;
}
header {
    background-color: #101010;
}
header .nav-link {
    color: #fff;
}

.nav-item .nav-link h6 {
    color: var(--Labels-Primary, #000);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    border-radius: 10px;
    background: var(--Backgrounds-Primary, #FFF);
    padding: 5px 16px;

}

.bar,
.bars {
    width: 30px;
    height: 1.5px;
    background: #fff;
    margin-top: 8px;
}

.bars {
    margin-top: 10px;
}

.profile {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: end;
    margin-right: 6px;
}

.profile h3 {
    text-align: end;
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 600;
}

.profile p {
    line-height: 1;
    font-size: 14px;
    opacity: .6;
}

.profile .img-box {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
}

.profile .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* menu (the right one) */

.menu {
    position: absolute;
    top: calc(100% + 24px);
    right: 16px;
    width: 200px;
    min-height: 100px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: 300ms;
    z-index: 2;
}

.menu::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 14px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}

.menu.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* menu links */

.menu ul {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 10;
    background: #fff;
    padding: 0;
}

.menu ul li {
    list-style: none;
}

.menu ul li:hover {
    background: #eee;
}

.menu ul li a {
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 6px;
}

.menu ul li a i {
    font-size: 1.2em;
}

.shoping-bag {
    position: relative;
}

.count {
    position: absolute;
    top: 9px;
    right: 3px;
    width: 15px;
    height: 15px;
    background: red;
    text-align: center;
    border-radius: 12px;
    font-size: 11px;
    line-height: 15px;
}

header form .search-box {
    position: relative;
    width: 500px;
}

header form input {
    background: #1C1B1D;
    padding: 10px 30px 10px 57px;
    width: 100%;
    border-radius: 20px;
    border: 0;
    color: white;

}

header form .search-icon {
    position: absolute;
    top: 10px;
    left: 25px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    width: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.swiper-slide {
    background: transparent;
}

.mySwiper .swiper-wrapper {
    height: 320px;
}

.swiper-pagination {
    left: 20px !important;
    text-align: left !important;
    margin-top: 20px;
}

.swiper-pagination-bullet {
    background: #fff !important;
}

.banner-sec,
.article-sec-main,
.ruffle-winner-bg,
footer {
    margin-top: 45px;
}

.raffle-container {
    text-align: center;
}

/* .ruffle-winner {
    background: url('../images/ticket.png');
    background-size: cover;
  height: 320px;
    padding: 57px 34px;
    position: relative;
    border-radius: 10px;
} */

.counter,
.counter-two,
.counter-three {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.ruffle-winner h2 {
    color: #fff;
    padding-top: 0;
    font-size: 28px;
    text-align: left;
    font-weight: 700;
    padding-bottom: 20px;
}

.number-container {
    width: 20%;
    aspect-ratio: 1;
    background-color: #333;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid #626262;
    padding-top: 8px;
}

.number {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: 6000px;
    /* To make room for all numbers (100 numbers * 60px height) */
}

.number div {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    font-size: 25px;
    color: #fff;
}

/* Animation for scrolling */
@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-6000px);
        /* Total height of 100 numbers (100 * 60px) */
    }
}

.article-sec {
    text-align: left;
    color: #fff;
    border: 1px solid #5C5C5C;
    padding: 8px;
    border-radius: 10px;
    width: 100%;
    min-height: 408px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.rate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 5px;
}

.small-arrow img {
    width: 100% !important;
}

.article-img img {
    height: 250px;
    object-fit: contain;
    background-color: #1B1B1B;
    width: 100%;
}

.mySwiper2 .swiper-pagination,
.mySwiper3 .swiper-pagination {
    position: unset;
}

.article-sec p {
    font-size: 16px;
    font-weight: 400;
}

.article-sec p {
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    margin: 10px 0;
}

.article-sec h6 {
    color: #A1A1A1;
    font-size: 14px;
    font-weight: 400;
}

.price {
    font-size: 23px;
    font-weight: 600;
}

.mySwiper3,
.mySwiper2 {
    width: 94%;
    margin-left: inherit !important;
}

.first-price {
    background: li;
}

.first-price {
    background: linear-gradient(90deg, rgba(140, 94, 28, 0.80) 0%, rgba(254, 219, 107, 0.80) 100%);
    display: flex;
    padding: 13px;
    justify-content: space-between;
    align-items: center;
    border-radius: 14px;
}

.first-price div {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
}

.second-price p,
.third-price p {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
}

.second-price,
.third-price {
    margin-top: 20px;
}

.mySwiper2 .swiper-slide,
.mySwiper3 .swiper-slide {
    position: relative;
}

.swiper-slide {
    position: relative;
}

/* .swiper-slide:hover {
    opacity: 0;
    transition: .5s;
} */

/* .swiper-slide:hover .hover-content {
    opacity: 1;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    transition: 1s;
} */

.hover-content {
    display: block;
    transition: 1s;

}

.article-sec {
    position: relative;
    overflow: hidden;
}

.article-sec:hover .hover-content {
    top: 0px;
    transition: 1s;
    opacity: 1;

}

.article-sec:hover .article-img {
    opacity: 0.5;
    transition: 1s;
}

.hover-content {
    position: absolute;
    z-index: 9;
    background: #2B2B2B;
    top: 120%;
    left: 0;
    transition: 0.5s;

    opacity: 0;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #6F6F6F;
    color: #fff;
    text-align: left;
    height: 100%;
    transition: 1s;
    opacity: 0.3;
    width: 100%;


}

section.article-sec-main h3 {
    color: #fff;
    font-size: 28.131px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 23px;
}

@keyframes movedown {
    100% {
        opacity: 1;
        transform: translateY(10px);
    }
}

.hover-content p {
    font-family: "DM Sans";
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

.hover-content h6 {
    color: #A1A1A1;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.hover-content h5 {
    font-size: 13px;
    font-weight: 300;
    line-height: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 10; /* number of lines to show */
            line-clamp: 10; 
    -webkit-box-orient: vertical;
}

.hover-content .rate {
    margin: 5px 0 10px;
    position: absolute;
    bottom: 0;
    width: 90%;
}

.slider {
    display: flex;
    align-items: center;
}

.big-arrow img {
    width: 100%;
}

.big-arrow {
    width: 60px;
    height: 60px;

    transition: .5s;
}

.big-arrow:hover img {
    transform: rotate(-30deg);
    transition: 2s;
}

.big-arrow:hover {
    background: #a2a2a2;
    border-radius: 50px;
    transform: rotate(-30deg);
    transition: 2s;
    width: 60px;
    height: 60px;
    animation: zoom-in 2s ease-out infinite;
    cursor: pointer;
}

@keyframes zoom-in {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

.small-arrow {
    transition: .5s;
}

.small-arrow:hover {
    background: #a2a2a2;
    border-radius: 50px;
    transform: rotate(-30deg);
    transition: 2s;
    width: 30px;
    height: 30px;
    animation: zoom-in 2s ease-out infinite;

}

.small-arrow:hover img {
    transform: rotate(-30deg);
    transition: 2s;
    width: 100%;
    cursor: pointer;
}

.ruffle-winner-bg {
    border-radius: 13px;
    background: #191919;
    width: 100%;
    height: 100%;
    padding: 20px;
    position: relative;

}

.step-sec {
    width: 80%;
}

.step-box {
    color: #fff;
    border: 1px solid #eee;
    padding: 20px 15px;
    min-height: 334px;
    border-radius: 10px;
    border: 1px solid #3F3F3F;
    background: #191919;
    max-height: 382px;
    overflow: hidden;

}

.step-box img {
    width: 100%;
    height: 250px;
    padding-bottom: 20px;
    object-fit: cover;
    margin-top: 25px;
}

.step-box h3 {
    color: #D7D7D7;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 0 20px;
}

.ruffle-winner-bg h1 {
    color: #D7D7D7;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

section.ruffle-winner-bg p {
    color: #A1A1A1;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 30px;
}

footer {
    border-top: 0.5px solid #3F3F3F;
    background: #1B1B1B;
    padding: 20px;
}

footer p {
    color: #A1A1A1;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    white-space: nowrap;
    display: flex;
}

footer p a {
    color: #A1A1A1;

}

footer p span {
    padding-right: 5px;
    white-space: nowrap;
    padding-left: 5px;
}

.modal-body,
.modal-header {
    background: #000;
    border: 0;
}

.modal-body li {
    list-style: none;
    color: #fff;
    font-size: 48px;
}

.btn-close {
    filter: invert(1);
}

.navbar-toggler-icon {
    filter: invert(1);
}

#navbarTogglerDemo01 {
    max-width: 68%;
    justify-content: space-between;
}

.navbar-nav {
    flex-direction: inherit;
    justify-content: end;
}

.navbar-nav li {
    margin: 0 11px;
}

header {
    border-bottom: 1px solid;
    padding: 16px 0 10px;
}

.questions {
    width: 20px;
    height: 20px;
    border: 1px solid #a9a5a5;
    color: #a9a5a5;
    text-align: center;
    border-radius: 15px;
    line-height: 20px;
    position: absolute;
    margin-right: 5%;
    right: 0;
    bottom: 2%;
    padding: 0;
}

.social-media {
  display: flex;
    position: fixed;
    bottom: 160px;
    right: 0;

    color: #fff;
    border: 1px solid #888;
    padding: 10px;
    z-index: 5;
    background: #000000;
}

.social-media p {
    margin: 0;
    padding-left: 10px;
}

footer ul {
    display: flex;
    justify-content: end;
    margin-bottom: 0;
}

footer li {
    padding: 0 10px;
}


.ticket_Dots .dot-1 {
    position: absolute;
    top: 11px;
    left: 0px;
    height: 95%;
}



.ticket_Dots .dot-2 {
    position: absolute;
    top: 11px;
    right: 0px;
    height: 95%;
}

.ruffle-winner-bg .head p {
    color: #A1A1A1;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.ruffle-winner-bg h1 {
    font-size: 37px;
}

.ruffle-winner-bg .head {
    padding-top: 10px;
    padding-bottom: 20px;
}

.step-box h4 {
    color: #D7D7D7;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    opacity: 0;
}

.step-box:hover h4 {
    opacity: 1;
}

.step-box:hover img {
    margin-top: 0px;
    transition: 1s;
}

.step_ab img {

    position: absolute;
    right: 27px;
    top: 95px;
    width: 18%;

}

.social_links li {
    list-style: none;
}


.login_sec {
    border-radius: 16px;
    border: 1px solid #2A2A2A;
    background: #1B1B1B;
    padding: 30px;
    width: 50%;
    margin: auto;
    margin-top: 50px;
    position: relative;
}

.login_submit_btn{
    position: absolute;
    bottom: 30px;
    right: 30px;
}
.privacy_terms_a{
    padding-top: 20px;
}
.privacy_terms_a a{
    text-decoration: underline;
    color: white !important;
}

.login_slider_box h6 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 17px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    text-align: left;
}

.login_cont h4 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: left;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.login_slider {
    border-right: 1px solid #414141;
    padding-right: 50px;
}

.login_inputs {
    padding-top: 30px;
}

.login_inputs label {
    color: #A1A1A1;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 10px;

}

.login_inputs .main_input {
    border-radius: 12px;
    border: 1px solid #2A2A2A;
    background: #1B1B1B;
    padding: 10px;
    width: 100%;
    color: white;
    margin-bottom: 15px;

}

.login_inputs p {
    color: #A1A1A1;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    /* padding-top: 30px; */
}

.login_inputs p a {

    color: #A1A1A1;
}

.inputs_btn {
    color: #A1A1A1;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 12px;
    border: 1px solid #A1A1A1;
    background: #1B1B1B;
    padding: 10px 20px;
    /* margin-top: 100px; */
}

.otp-inputs {
    display: flex;
    justify-content: left;
    gap: 10px;
}

.otp-input {
    width: 50px;
    height: 50px;
    border: 2px solid #333;
    background-color: #222;
    color: #fff;
    text-align: center;
    font-size: 24px;
    border-radius: 10px;
    outline: none;
}

.otp-input:focus {
    border-color: #fff;
    background-color: #444;
}

.breadcrumbs {
    border-radius: 10px;
    background: #1B1B1B;
    padding: 15px 20px;
    width: 100%;
    margin-top: 20px;
}

.breadcrumbs h6 {
    color: #A1A1A1;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.lisitng_filter {
    border-radius: 10px;
    background: #1B1B1B;
    padding: 20px;
    margin-top: 70px;
}

.filter_head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #414141;
}

.filter_head h4 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.filter_Body p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 20px;
}


.filter_Body .form-check-input[type=radio]{
    background: transparent;
    border: 2px solid grey;
    cursor: pointer;
}
.filter_Body .form-check-input:checked{
    background-color: #ffffff;
    border: 2px solid #1b1b1b;

    box-shadow: 0px 0px 0px 2px #ffffff;

}

.filter_Body label {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 17px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}

.filter_Body .form-check {
    padding-bottom: 20px;

}

.registration_sec {
    width: 35%;
}

.registration_sec .inputs_btn {
    background-color: white;
    color: black;
}

.success_msg h4 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.success_msg p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 36px;
}

.success_msg img {
    width: 30%;
}

.breadcrumb li a {
    color: #A1A1A1;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.breadcrumb-item.active {
    color: #ffffff;

    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: rgb(255 255 255 / 75%);
}

.product_detail_row {
    padding-top: 30px;
}

.detail_img img {
    width: 100%;
    height: 530px;
    object-fit: contain;
}

.detail_cont h3 {
    color: var(--Backgrounds-Primary, #FFF);

    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.detail_cont p {
    color: #A1A1A1;
    font-size: 18px;
    font-style: italic;
    font-weight: 300;
    line-height: normal;
}

.summery h5 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.summery p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.summery {
    padding-top: 30px;
}

.author_Flex {
    display: flex;

}

.author_Flex span {
    padding-left: 15px;
    padding-right: 15px;
    color: #A1A1A1;
}

.detail_product_price {
    padding-top: 50px;
}

.detail_product_price h3 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;

}

.buy_btn {
    border-radius: 9px;
    background: var(--Backgrounds-Primary, #FFF);
    border: 0;
    padding: 9px 30px;
    font-size: 17px;
    font-weight: 400;
    margin-top: 30px;
    color: #000;
}

.cart-btn {
    border-radius: 9px;
    border: 1px solid var(--Backgrounds-Primary, #FFF);
    background: #1B1B1B;
    padding: 7px 24px;
    font-size: 17px;
    font-weight: 400;
    color: #FFF;
    margin-left: 20px;
    margin-top: 30px;

}

.pd-main_sec {
    padding-bottom: 30px;
    border-bottom: 1px solid #414141;
}










.raffle_dial_modal .modal-content {
    border-radius: 10px !important;
    border: 1px solid #3F3F3F !important;
    background: #0F0F0F !important;
}

.raffle_dial_modal .modal-content .modal-body {
    background: #0F0F0F !important;
    padding: 0;
    border-radius: 10px;
}

.raffle_dial_modal .modal-dialog {
    max-width: 440px;
}

.raffle_dial_modal {
    background: #000000ad;

}






.raffle-containers {
    text-align: center;

    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
}

.raffle-containers h6 {
    color: #D7D7D7;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.raffle-containers h2 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.raffle-containers p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
}

.selected-numbers {
    font-size: 1.5em;
    margin: 10px 0 0px 0px;
    color: #ffffff;
}

.selected-numbers-cart {
    font-size: 1.5em;
    margin: 10px 0 0px 0px;
    color: #ffffff;
}


.number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin: 20px 0;
    border-top: 1px solid #414141;
    padding-top: 20px;
}

.number-btn {
    background-color: #3F3F3F;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.2s;


    color: #A7A7A7;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.number-btn:hover {
    background-color: #A7A7A7;
    color: #3F3F3F;

}

.number-btn:hover .number-btn:hover {
    background-color: #444444;
}

.number-btn.active {
    background-color: #FFCC00;
    color: black;
}

.confirm-btn {
    background-color: #ffffff00;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.confirm-btn.active {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(80, 80, 80);
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.confirm-btn-cart {
    background-color: #ffffff00;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}

.confirm-btn-cart.active {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    border: 1px solid rgb(80, 80, 80);
    padding: 10px 20px;
    font-size: 1em;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 10px;
    margin-bottom: 20px;
}


.offcanvas {
    border: 1px solid #2A2A2A;
    background: #1B1B1B;
    width: 490px;
}

.cart_icon {
    text-align: center;
}

.cart_icon h3 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 20px;
}

.empty_product {
    text-align: center;
}

.empty_product h4 {
    color: #4E4E4E;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.empty_product button {
    color: #A1A1A1;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid #A1A1A1;
    background: #1B1B1B;
    margin-top: 20px;
}

.offcanvas_btn_close {
    border: 1px solid #2A2A2A;
    background: #1B1B1B;
    color: white !important;
    font-size: 40px;
    width: 50px;
    height: 50px;
    border-radius: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 100;


    position: absolute;
    left: -70px;
    top: 10px;

}

.cart_item-box {
    border-radius: 6px;
    border: 0.8px solid #414141;
    background: #2E2E2E;

    margin-top: 20px;
}

.cart_item-box .row {
    padding: 20px;
}

.cart-box_img img {
    width: 100%;
    height: 86px;
    object-fit: contain;
    aspect-ratio: 1;
}

.cart_items_desc h6 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cart_items_desc p {
    color: #A1A1A1;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cart_items_desc h4 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.cart_raffle {
    border-radius: 0px 0px 6px 6px;
    background: #3F3F3F;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.cart_raffle h5 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cart-raflle_Flex {
    display: flex;
}

.cart-raflle_Flex p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-left: 10px;
    margin-bottom: 0;
}

.cart_item-close {
    position: absolute;
    top: -6px;
    right: 5px;
}

.cart_item-close button {
    background-color: transparent;
    border: 0;
    font-size: 40px;
    color: white;
    font-weight: 100;
    line-height: 1;
}

.total_Flex {
    display: flex;
    justify-content: space-between;
}

.total_Flex h6 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.total_Flex p {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: right;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.cart_checkout_btn {
    border-radius: 6px;
    background: var(--Backgrounds-Primary, #FFF);
color: #000;
    border: 0;
    width: 100%;
    padding: 10px;
}

.cart_Box {
    display: flex;
    flex-direction: column;
}

.cart_total {
    padding-top: 180px;
}

.checkout_page h2 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
}

.confirm_email {
    padding: 20px;
    background: #1B1B1B;
    border-radius: 10px;
    margin-top: 30px;
}

.confirm_email h3 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.confirm_email input {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 16px;
    border: 0.8px solid #414141;
    padding: 10px;
    background-color: transparent;
    color: white;

}
.confirm_email p {
    color: #A1A1A1;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 20px;
}

.pay_now_btn {
    border-radius: 12px;
    background: var(--Backgrounds-Primary, #FFF);
    width: 100%;
    border: 0;
    padding: 10px;
    margin-top: 70px;
    color: #000;
}

.confirm_email .cart-raflle_Flex p {
    padding-top: 0px;
}

.paymnt-itms {
    border-top: 1px solid #414141;
    border-bottom: 1px solid #414141;
    padding-top: 15px;
    padding-bottom: 15px;



}

.paymnts_total {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

.paymnts_total h6 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.paymnts_total p {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: right;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 0;
}

.tot {
    font-size: 25px;
}

.profile_edt_Sec {
    border-radius: 10px;
    background: #1B1B1B;
    padding: 20px;
    margin-top: 20px;
}

.pofile-img img {
    width: 100px;

}

.edt_Div {
    border-radius: 10px;
    background: var(--Backgrounds-Primary, #FFF);
    padding: 4px 20px;
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

.edt_Div h6 {
    color: var(--Labels-Primary, #000);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.edt_Div button {
    border-radius: 10px;
    background: var(--Backgrounds-Primary, #FFF);
    padding: 4px 20px;
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
    border: 0;
    font-size: 19px;
    font-weight: 500;
    color: #000;
}


.main_profile_img {
    display: flex;
    justify-content: space-between;
}

.profile-details h3 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 27px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 20px;
}

.profile-details p {
    color: var(--Backgrounds-Primary, #FFF) !important;
    -webkit-appearance: none;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.logout_sec {
    border-radius: 10px;
    background: #1B1B1B;
    padding: 20px;
    margin-top: 20px;
}

.logout_sec a {
    display: flex;
    justify-content: space-between;
}

.logout_sec h5 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.logout_sec a {
    text-decoration: none;
}

.logout_confirmation h5 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.confrm_btns .dlte-btn {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 12px;
    border: 1px solid var(--Backgrounds-Primary, #FFF);
    background: #1B1B1B;
    padding: 9px 20px;
}

.confrm_btns .cancl-btn {
    color: var(--Backgrounds-Primary, #000000);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 12px;
    border: 1px solid var(--Backgrounds-Primary, #ffffff);
    background: #ffffff;
    padding: 9px 20px;
}

.edit-profile-row {
    padding-top: 40px;

}

.edit-input label {
    color: #A1A1A1;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin-bottom: 8px;
}

.edit-input input {
    border-radius: 12px;
    border: 1px solid #A1A1A1;
    background: #1B1B1B;
    width: 100%;
    padding: 7px;
    color: white;

}

.edit-input {
    margin-bottom: 20px;
}

.edit-profile-row p {
    color: #4E4E4E;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

















.profile-photo-container {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.profile-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* display: none; */
}

.profile-photo-container .default-icon {
    width: 50px;
    height: 50px;
    color: #fff;
}

.profile-photo-container input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.profile-photo-container:hover .overlay-text {
    display: flex;
}

.overlay-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    text-align: center;
}

.confirmation_modal h5 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.conf_delt-button {
    border-radius: 12px;
    border: 1px solid var(--Backgrounds-Primary, #FFF);
    background: #1B1B1B;
    padding: 6px 35px;
    font-size: 17px;
    color: var(--Backgrounds-Primary, #FFF);
    font-weight: 400;
}

.conf_cancel_btn {
    border-radius: 12px;
    background: var(--Backgrounds-Primary, #FFF);
    border: 0;
    padding: 6px 35px;
    font-size: 17px;
    color: var(--Backgrounds-Primary, #000000);
    font-weight: 400;
    margin-left: 15px;
}

.confirmation_modal {
    padding: 30px;
}

.menu_section {
    padding: 20px 15px;
    height: 100%;
    position: relative;
}

.menu_section h3 {
    color: var(--Backgrounds-Primary, #FFF);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 50px;
}

.menu_items {
    border-radius: 6px;
    border: 0.8px solid #414141;
    padding: 10px;
    margin-bottom: 25px;
}

.menu_items:hover {
    border: 0.8px solid #414141;
    background: #3F3F3F;
}

.menu_items:hover h5 {
    color: white;
}

.menu_items a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu_items a h5 {
    color: #A1A1A1;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
}

.Logout-menu button {
    color: var(--Labels-Primary, #000);
    font-size: 18px;
    border-radius: 6px;
    background: var(--Backgrounds-Primary, #FFF);
    width: 100%;
    padding: 9px;
    border: 0px;

    position: absolute;
    left: 0;
    bottom: 0;
}


.Privacy_Sec p {
    color: var(--Backgrounds-Primary, #FFF);

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.Privacy_Sec h1 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 20px;
    padding-bottom: 40px;
}

.Privacy_Sec h2 {
    color: var(--Backgrounds-Primary, #FFF);

    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.Privacy_Sec li {
    color: var(--Backgrounds-Primary, #FFF);

    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.abt_cont h2 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 30px 0px
}

.abt_cont p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.abt_cont h4 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-top: 20px;
}

.abt_cont ul li {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    padding-bottom: 10px;
}

.contact_cont h3 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.contact_cont {
    padding-top: 30px;
}

.contact_cont h3 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.contact_cont h6 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding-top: 20px;
    padding-bottom: 10px;
}

.contact_cont p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 17px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;

    margin-bottom: 0px;
}

.conatct_box {
    border-radius: 10px;
    background: #1B1B1B;
    padding: 30px;
    margin-top: 30px;
}

.conatct_box h3 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.edit-input textarea {
    border-radius: 12px;
    border: 1px solid #A1A1A1;
    background: #1B1B1B;
    width: 100%;
    padding: 10px;
    color: #ffffff;

}

.enqry_btn {
    border-radius: 12px;
    background: var(--Backgrounds-Primary, #FFF);
    padding: 7px 20px;
    border: 0px;
    font-size: 17px;
    color: #000;
}

.works_sec h2 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 30px 0px;
}

.how_cont p {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.how_cont h5 {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-top: 15px;
}

.how_cont li {
    color: var(--Backgrounds-Primary, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
}

.dektop_none {
    display: none;
}

.listing_tabs .nav-tabs {
    border-bottom: 0px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link {
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background-color: transparent;
    border: 0;
}

.confirm_email .border-top {
    border-top: 1px solid #414141 !important;
}















.raffle_boxx {
    border-radius: 10px;
    background: #1B1B1B;
    padding: 0px 20px;
    height: 100%;
    position: relative;
}

.line_dot {
    width: 100%;
    padding: 18px 0px;
}

.ticket_svg {
    position: absolute;
    top: 40px;
    left: 20px;
    width: 95%;
}



/* Tooltip container customization */
.tooltip {
    opacity: 1 !important;
    /* Ensure it fully displays */
    transition: opacity 0.1s ease-in-out;
    /* Quick appearance */
}

/* Tooltip background, text color, and padding */
.tooltip-inner {
    background-color: #333;
    color: #fff;
    /* Text color */
    padding: 10px 15px;
    /* Padding inside the tooltip */
    font-size: 14px;
    /* Font size */
    border-radius: 5px;
    /* Rounded corners */
    border-radius: 10px;
    border: 1px solid #626262;
}


/* Optional: Adjust width, max-width */
.tooltip-inner {
    max-width: 250px;
    /* Adjust maximum width */
    text-align: center;
    /* Center-align text */
}

.tooltip-arrow {
    display: none !important;
}

/* Chrome, Safari, Edge, and Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.Privacy_Sec table {
    color: white;
}

.Privacy_Sec tbody,
td,
tfoot,
th,
thead,
tr {
    border: 1px solid white;
    padding: 10px;
}

.order_id {
    font-size: 15px;
    color: white;
    margin-bottom: 0px;

}

.order_id span {
    font-weight: 700;
}

.account_confirm_popup .modal-backdrop.show {
    opacity: 0 !important;
}

.account_confirm_popup.fade:not(.show) {
    opacity: 2;
}



.ui-widget-content {
    background: #414141 !important;
    color: #ffffff !important;
    border: 1px solid white !important;
}

.ui-menu-item-wrapper:hover {
    background-color: black !important;
    border: 1px solid black !important;

}

.ui-menu-item:hover {
    background-color: black !important;
    border: 1px solid black !important;

}

.ui-menu-item:hover .ui-menu-item-wrapper {
    background-color: black !important;
    border: 1px solid black !important;
}

#email-error{
    color: red;
}
#name-error{
    color: red;
}
#phone-error{
    color: red;

}
#message-error{
    color: red;

}


.h-section {
    min-height: 80vh;
}
.h-section-vh{
    min-height: 90vh;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
justify-content: center;
    padding: 10px;
  }
  
  .page-btn {
    background-color: transparent;
    color: #fff;
    border: 1px solid #b6b6b6;
    border-radius: 4px;
    padding: 6px 13px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .page-btn.active {
    background-color: #fff;
    color: #000;
  }
  
  .page-btn:hover {
    background-color: #fff;
    color: #000;
  }
  
  .dots {
    color: #fff;
    font-size: 16px;
  }
  
  .next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }