@font-face {
    font-family: "SignPainter";
    src: url("../font/SignPainter.ttf");
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root
{
    --SignPainter: "SignPainter";
    --black1: #222;
    --color2: #818181;
    --color3: #55b63a;
    --cmn-bg1 : #F6F6F6;
    --cmn-bg2 : #272727;
    --cmn-bg3 : #1c1c1c;
    --cmn-bg4 : #1879B9;
}


/* menu */
.menu
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: all linear 0.2s;
}

.menu:hover,
.menu.active
{
    background-color: white;
    border-bottom: 1px solid #ddd;
}

.c_container
{
    padding: 0 5%;
}

@media(max-width : 575px)
{
    .c_container {
        padding: 0 4%;
    }
}

.menu_in
{
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo
{
    width: 200px;
}

.menu:hover .logo,
.menu.active .logo 
{
    filter: invert(1);
}

.menu_mid ul,
.menu_right ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu_mid ul li
{
    display: inline-block;
    margin: 0 20px;
} 

.menu_mid ul li a
{
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    text-transform: uppercase;
}

.menu:hover .menu_mid ul li a, 
.menu.menu.active .menu_mid ul li a
{
    color: var(--black1) !important;
}

.menu_mid ul li a
{
    position: relative;
}

.menu_mid ul li a::before
{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    height: 2px;
    width: 0%;
    background-color: var(--black1);
    transition: all 0.2s linear;
}

.menu_mid ul li a:hover::before
{
    width: 100%;
}

.menu_mid ul li a.active::before
{
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: white;
}
.menu.active .menu_mid ul li a.active::before
{
    background-color: var(--black1);
}

.menu:hover .menu_mid ul li a.active::before
{
    background-color: var(--black1);
}

.menu_right ul li
{
    display: inline-block;
    margin: 0 12px;
} 
.menu_right > ul > li > a 
{
    color: white !important;
    text-decoration: none !important;
}

.menu:hover .menu_right > ul > li > a,
.menu.menu.active .menu_right > ul > li > a
{
    color: var(--black1) !important;
}

.menu_lang_btn
{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
}

.menu_lang_btn i 
{
    font-size: 13px !important;
    transition: all 0.2s linear;
}

.menu_lang_btn i.rotate 
{
    transform: rotate(180deg);
}

.menu_lang_drop
{
    position: absolute;
    top: 30px;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 6px #1c1c1c0d;
    width: max-content;
    max-width: 300px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px 0;
    display: none;
}

.menu_lang_drop ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu_lang_drop ul > li 
{
    display: block;
}
.menu_lang_drop ul > li > a 
{
    display: block;
    font-size: 16px;
    font-weight: 400;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--black1) !important;
    opacity: 0.6;
}

.menu_lang_drop ul > li > a.active,
.menu_lang_drop ul > li > a:hover
{
    opacity: 1;
}

.shopping_bag
{
    position: relative;
}
.shopping_bag .cart_bag_dot 
{
    position: absolute;
    font-size: 6px;
    top: -1px;
    right: 1px;
}

.search_btn
{
    position: static;
}

.search_era
{
    position: absolute;
    width: 100%;
    top: 70px;
    left: 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: white;
    padding: 5px 0;
    display: none;
}

.search_era_in
{
    display: grid;
    grid-template-columns: 20px auto 20px;
    gap: 10px;
    align-items: baseline;
}

.search_era_in > i 
{
    font-size: 18px;
}

.search_era_in input
{
    height: 60px;
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 5px 10px;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.search_era_in button 
{
    background-color: transparent;
    color: var(--black1);
    font-size: 20px;
    border: none;
    outline: none;
    box-shadow: none;
}

.menu_open_btn
{
    color: white;
    font-size: 22px;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    border: none;
    background-color: transparent;
    display: none;
}

.menu:hover .menu_open_btn,
.menu.active .menu_open_btn 
{
    color: var(--black1);
}

@media(max-width : 991px)
{
    .menu_in {
        display: grid;
        grid-template-columns: 20% 1fr 20%;
        align-items: center;
    }

    .menu_mid
    {
        order: 1;
    }
    .menu_left
    {
        order: 2;
        text-align: center;
    }
    .menu_right
    {
        order: 3;
        text-align: right;
    }
    .menu_open_btn
    {
        display: block;
    }
    .menu_mid > ul
    {
        display: none;
    }
}

@media(max-width : 575px)
{
    
    .menu_lang_li,
    .menu_lang_profile
    {
        display: none !important;
    }
    .logo {
        width: 140px;
    }
    .menu_right ul li {
        margin: 0 2px;
    }
    .menu_right > ul > li > a > svg 
    {
        width: 22px;
    }
    .search_era_in input {
        height: 50px;
        font-size: 18px;
    }
    .search_era {
        top: 62px;
    }
    
}

@media(min-width : 576px) and (max-width : 767px)
{
    .menu_lang_li,
    .menu_lang_profile
    {
        display: none !important;
    }
}

@media(min-width : 768px) and (max-width : 991px)
{
    .menu_in {
        display: grid;
        grid-template-columns: 25% 1fr 25%;
        align-items: center;
    }
    .menu_right ul li {
        margin: 0 10px;
    }
    .menu_lang_li
    {
        display: none !important;
    }
}


/* mobile menu */
.mobile_menu
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 9999;
    background-color: rgba(0,0,0,0.4);
    display: none;
}


.mobile_menu_in
{
    height: 100%;
    max-width: 400px;
    width: 90%;
    background-color: #f6f6f6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
   
}
.mobile_menu_top
{
    padding: 50px 20px 20px 20px;
}

.mobile_menu_top > ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile_menu_top > ul > li 
{
    display: block;
}

.mobile_menu_top > ul > li > a
{
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    color: var(--black1) !important;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

.mobile_menu_top ul li:last-child a
{
    border-bottom: none;
}

.mobile_menu_btm ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile_menu_btm ul li a 
{
    display: block;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
    text-decoration: none;
    color: var(--black1) !important;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

.mobile_menu_btm ul li:first-child a
{
    border-top: none;
}

.close_mobile_menu
{
    background-color: transparent;
    font-size: 25px;
    color: var(--black1);
    position: absolute;
    top: 10px;
    left: 20px;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

@media(min-width :768px)
{
    .mobile_menu_profile
    {
        display: none;
    }
}


/* mobile screen language */
.mobile_screen_lang
{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 9999;
    display: none;
    align-items: end;
    background-color: rgba(0,0,0,0.4);
}

.mobile_screen_lang_in
{
    width: 100%;
    background-color: white;
}

.mobile_screen_lang_top 
{
    position: relative;
    padding: 18px 10px;
    border-bottom: 1px solid #ddd;
}
.mobile_screen_lang_top h2 
{
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 2px;
}

.close_mobile_lang
{
    background-color: transparent;
    font-size: 22px;
    color: var(--black1);
    position: absolute;
    top: 10px;
    right: 20px;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}

.mobile_screen_lang_btm
{
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px 0;
}

.mobile_screen_lang_btm ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile_screen_lang_btm ul li 
{
    display: block;
}

.mobile_screen_lang_btm ul a 
{
    display: inline-block;
    padding: 8px 20px;
    color: var(--black1) !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    opacity: .8;
}
.mobile_screen_lang_btm ul li a.active,
.mobile_screen_lang_btm ul li a:hover
{
    opacity: 1;
}


/* banner */
.banner
{
    height: 76vh;
    position: relative;
}

.banner div 
{
    height: 100%;
}

.banner_item
{
    height: 100%;
    display: block;
    position: relative;
}
.banner_item::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(0deg, rgba(239, 239, 239, 0) 82%, rgba(4, 4, 4, 0.65) 100%, rgba(4, 4, 4, 0.65) 100%);
}
.banner_item img 
{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

@media(max-width : 699px)
{
    .banner 
    {
        height: auto;
    }
}

@media(min-width : 700px) and (max-width : 991px)
{
    .banner 
    {
        height: 50vh;
    }
}


@media(min-width : 992px) and (max-width : 1199px)
{
    .banner 
    {
        height: 60vh;
    }
}


/* packs */
.packs
{
    padding: 50px 0;
    background-color: var(--cmn-bg1);
}

.solo_perfume,
.lots
{
    padding: 50px 0;
}

@media(max-width : 767px)
{
    .packs,
    .solo_perfume,
    .lots
    {
        padding: 40px 0;
    }
}

.cmn_header
{
    text-align: center;
}

.cmn_header p 
{
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}
.cmn_header h1 
{
    font-size: 28px;
    font-weight: 600;
    color: var(--black1);
    margin: 5px 0;
}

.product_in
{
    margin-top: 40px;
}

.product_specific
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media(max-width : 479px)
{
    .product_specific
    {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media(min-width : 480px) and (max-width : 767px)
{
    .product_specific
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(min-width : 768px) and (max-width : 991px)
{
    .product_specific
    {
        grid-template-columns: repeat(3, 1fr);
    }
}


.product_in .slick-slide 
{
    padding: 0 10px;
}

.product_item img 
{
    width: 100%;
}

.discount_tag
{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--black1);
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
}

.solo_cart_button
{
    position: absolute;
    bottom: 30px;
    right: 30px;
    height: 30px;
    width: 30px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 20px;
    display: none;
    transition: all 0.2s linear;
}

.solo_product_item_top:hover .solo_cart_button
{
    display: block;
}


.product_item_bottom
{
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 5px 0;
}

.product_item_bottom a
{
    font-size: 14px;
    font-weight: 600;
    color: var(--black1) !important;
    text-decoration: none !important;
}

.product_item_bottom p 
{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--color2);
}

.product_rating
{
    display: flex;
    align-items: center;
    gap: 6px;
}

.product_rating_in
{
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.product_rating_in i 
{
    font-size: 13px;
    color: #00b67e;
}

.product_rating span
{
    font-size: 14px;
    font-weight: 400;
}

.product_price 
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.product_price b 
{
    font-size: 16px;
    font-weight: 600;
    color: #181818;
}

.product_price span 
{
    color: var(--color2);
    text-decoration: line-through;
}

.product_in .slick-prev,
.product_in .slick-next
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
    z-index: 9;
    font-size: 20px;
}

.product_in .slick-prev:hover i,
.product_in .slick-next:hover i
{
    animation-name: fa-fade;
    animation-duration: 1s; 
    animation-iteration-count: infinite; 
}


.product_in .slick-prev
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}

.product_in .slick-next
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
}

@media(max-width :425px)
{
    .product_in .slick-prev {
        left: 10px;
    } 
    .product_in .slick-next {
        right: 10px;
    } 
    .solo_cart_button {
        bottom: 30px;
        right: 50px;
    }
}

/* working process  */
.working_process
{
    background-color: var(--cmn-bg2);
    padding: 40px 0;
}

.working_process_in
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.working_process_item
{
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
}

.working_process_item img 
{
    min-width: 40px;
    width: 40px;
}

.working_process_content h2 
{
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.working_process_content p 
{
    margin: 10px 0 0 0; 
    font-size: 14px;
    font-weight: 400;
    opacity: .8;
}


@media(max-width : 575px)
{
    .working_process_in
    {
        grid-template-columns: repeat(1, 1fr);
        gap: 40px 20px;
    }
}


@media(min-width : 576px) and (max-width : 767px)
{
    .working_process_in
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }
}

/* footer */
.footer
{
    padding: 50px 0;
    background-color: var(--cmn-bg3);
}
.footer_item
{
    margin: 10px 0;
}

.footer_item h1 
{
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: white;
    margin-bottom: 25px;
}
.footer_item > ul 
{
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer_item > ul > li 
{
    display: block;
    margin: 10px 0;
}

.footer_item > ul > li > a 
{
    font-size: 13px;
    font-weight: 400;
    color: white;
    opacity: .6;
    text-decoration: none !important;
    transition: all 0.2s linear;
}

.footer_item > ul > li > a:hover 
{
    opacity: 1;
}


.footer_btm
{
    padding-top: 60px;
}

.footer_btm_item
{
    margin: 10px 0;
}

.social_link
{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.social_link a
{
    display: inline-block;
    color: white !important;
    opacity: .6;
    text-decoration: none !important;
    font-size: 18px;
    transition: all 0.2s linear;
}

.social_link a:hover 
{
    opacity: 1;
}

.footer_btm_item p 
{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: white;
    opacity: .6;
    text-align: center;
}

.payment_method
{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

@media(max-width: 767px)
{
    footer {
        padding: 30px 0;
    }
    .footer_item {
        margin: 20px 0;
    }
    .footer_btm {
        padding-top: 30px;
    }
    .social_link {
        justify-content: center;
    }
}


@media(min-width: 768px) and (max-width: 991px)
{
    .social_link 
    {
        gap: 20px;
    }

    .payment_method 
    {
        gap: 6px;
    }
}   


/* lots top */
.lots_top
{
    background-color: var(--cmn-bg3);
}

.lots_top_breadcrumb
{
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.lots_top_breadcrumb a 
{
    font-size: 11px;
    font-weight: 400;
    color: white !important;
    opacity: .6;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: all 0.2s linear;
}
.lots_top_breadcrumb a:hover 
{
    opacity: 1;
}

.lots_top_breadcrumb span 
{
    font-size: 11px;
    font-weight: 400;
    color: white;
    opacity: .6;
}

.lots_top_in
{
    padding: 50px 0;
}

.lots_top_in > p,
.lots_top_in > h3
{
    text-align: center;
    color: white;
}

.lots_top_in > p 
{
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}

.lots_top_in > h3 
{
    font-size: 30px;
    font-weight: 600;
    max-width: 550px;
    margin: 0 auto;
}

.lots_feature
{
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.lots_feature_item
{
    color: white;
}


.lot_feature_content h2 
{
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 30px;
}

.lot_feature_content p 
{
    font-size: 16px;
    font-weight: 400;
    color: white;
    opacity: .8;
}

.lots_separator
{
    height: 100px;
    width: 1px;
    background-color: var(--color2);
}

@media(max-width : 767px)
{
    .lots_top_breadcrumb
    {
        display: none;
    }
    .lots_top_in > h3 {
        font-size: 25px;
    }
    .lots_feature {
        margin-top: 50px;
        flex-wrap: wrap;
    }
    .lots_separator
    {
        display: none;
    }

    .lots_feature_item 
    {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .lots_feature_item img 
    {
        height: 60px;
    }
    .lot_feature_content h2 {
        font-size: 18px;
        margin-top: 0px;
    }
}


/* sign */
.sign_main
{
    min-height: 100vh;
    width: 100%;
    background-color: var(--cmn-bg1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sign_in
{
    max-width: 500px;
    width: 95%;
    padding: 20px;
    border-radius: 5px;
    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.sign_top
{
    padding: 40px 0;
}

.sign_top img 
{
    width: 180px;
    filter: invert(1);
}

.sign_mid > h2 
{
    font-weight: 600;
    font-size: 22px;
    margin: 0;
}

.sign_mid > p 
{
    font-size: 16px;
    font-weight: 400;
    margin: 8px 0 20px 0;
}

.sign_era label
{
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.sign_era input 
{
    height: 40px;
}

.cmn_btn1
{
    height: 45px;
    width: 100%;
    display: block;
    background-color: var(--cmn-bg2);
    color: white;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
}
.eye_btn
{
    cursor: pointer;
}

.sign_btm a 
{
    font-size: 16px;
    font-weight: 400;
    color: var(--cmn-bg4) !important;
    text-decoration: none !important;
}
.sign_btm a:hover 
{
    text-decoration: underline !important;
}

/* packs product */
.packs_product
{
    padding: 50px 0;
}
.packs_product_left,
.packs_product_right
{
    margin: 10px 0;
}
.pack_product_img
{
    position: relative;
}
.pack_product_img img 
{
    width: 100%;
}

.discount_tag2
{
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--black1);
    color: white;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
}

.pack_product_list
{
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.pack_product_list button
{
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
}

.pack_product_list button.active 
{
    border: 1px solid var(--black1);
}


.pack_product_list button img 
{
    height: 50px;
    width: 50px;
    object-fit: contain;
}

.packs_product_right > a,
.pack_info > a 
{
    font-size: 14px;
    font-weight: 400;
    color: var(--color2) !important;
    text-decoration: none !important;
    text-transform: uppercase;
}

.packs_product_title
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 15px 0;
}

.packs_product_title h2 
{
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.packs_product_info
{
    margin: 10px 0;
}
.packs_product_info p 
{
    margin: 2px 0;
    font-size: 14px;
    font-weight: 500;
}

.packs_product_info p span
{
    font-weight: 600;
}

.single_product_desc
{
    margin: 20px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.single_product_desc_left,
.single_product_desc_right
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.single_product_desc_left span
{
    background-color: var(--cmn-bg3);
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 400;
}

.single_product_desc_right span 
{
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    border: 1px solid #ddd;
    text-transform: uppercase;
}

.pack_select
{
    margin: 20px 0;
}

.pack_select > h2 
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0;
}

.pack_select > h2 > span:first-child
{
    height: 25px;
    width: 25px;
    background-color: var(--cmn-bg3);
    color: white;
    border-radius: 3px; 
    display: flex;
    align-items: center;
    justify-content: center;   
}

.pack_select > h2 span 
{
    font-size: 17px;
    font-weight: 500;
}

.pack_variant
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}



.variant_label > input 
{ 
    display: none;
}

.variant_content
{
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.variant_qty
{
    position: absolute;
    top: 45%;
    right: 16px;
    background-color: var(--black1);
    color: white;
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 2px;
}

.variant_tag
{
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #555;
    white-space: nowrap;
    border: 1px solid #ddd;
    padding: 2px 4px;
    border-radius: 2px;
    background-color: white;
}

.variant_label > input:checked ~ .variant_tag,
.variant_label.active .variant_tag
{
    border: 1px solid var(--black1);
    color: var(--black1);
}

.variant_label > input:checked + .variant_content,
.variant_label.active .variant_content
{ 
    border: 2px solid var(--black1);
}

.variant_img
{
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.variant_img > img 
{
    width: 30px;
}

@media(max-width : 425px)
{
    .pack_select > h2 {
        margin: 22px 0;
    }
    .packs_product_title {
        align-items: start;
        flex-direction: column;
    }
    .pack_variant
    {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 10px;
    }
}

@media(min-width : 426px) and (max-width : 575px)
{
    .pack_variant
    {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px 10px;
    }
}

@media(min-width : 992px) and (max-width : 1199px)
{
    .variant_img > img {
        width: 25px;
    }
    .variant_img {
        padding: 14px 32px;
    }

    .variant_qty {
        top: 39%;
        right: 11px;
        font-size: 10px;
    }
}

.variant_btm
{
    background-color: #ddd;
    padding: 10px;
    text-align: center;
}

.variant_label.active .variant_btm
{
    background-color: var(--black1);
    color: white;
}

.variant_label > input:checked + .variant_content .variant_btm 
{
    background-color: var(--black1);
    color: white;
}

.variant_btm p 
{
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}
.variant_btm p span:first-child
{
  font-size: 13px;
}
.variant_btm p span:last-child
{
  text-decoration: line-through;
}
.variant_btm small
{
    font-size: 13px;
    font-weight: 400;
    margin: 0;
    display: block;
}

.fragrance_era
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px 10px;
    align-items: baseline;
    justify-content: space-between;
}

@media(max-width : 575px)
{
    .fragrance_era
    {
        grid-template-columns: repeat(3, 1fr);
    }
}

.fragrance_label input
{
    display: none;
}

.fragrance_content
{
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.fragrance_img
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.fragrance_img img 
{
    width: 100%;
}

.fragrance_label > input:checked + .fragrance_content,
.fragrance_label.active .fragrance_content
{ 
    border: 2px solid var(--black1);
}

.fragrance_content > p
{
    margin: 0;
    color: var(--black1);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 600;
    background-color: #efefef;
    text-align: center;
    padding: 2px 0;
}

.fragrance_label > input:checked + .fragrance_content > p
{
    background-color: var(--black1);
    color: white;
}

.fragrance_btm
{
    background-color: white;
    padding: 8px 8px;
}

.fragrance_btm > button
{
    background-color: var(--black1);
    color: white;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    width: 100%;
    border-radius: 4px;
    padding: 5px;
}

.fragrance_add_btn.active
{
    background-color: var(--black1);
}


.fragrance_add_btn.deactivate
{
    background-color: var(--cmn-bg3);
}

.fragrance_qty_era
{
    border: 1px solid var(--black1);
    border-radius: 6px;
    padding: 2px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.fragrance_qty_era input
{
    display: block;
    width: 20px;
    text-align: center;
    outline: none;
    border: none;
    box-shadow: none;
    pointer-events: none;
    font-size: 12px;
}

.fragrance_qty_era input::-webkit-outer-spin-button,
.fragrance_qty_era input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fragrance_qty_era input[type=number] {
  -moz-appearance: textfield;
}

.fragrance_qty_era button
{
    background-color: transparent;
    outline: none;
    box-shadow: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
}


.order_era .order_btn 
{
    display: block;
    width: 100%;
    height: 55px;
    background-color: var(--black1);
    color: white;
    opacity: .3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 8px;   
    gap: 5px;
}

.order_era .order_btn.active 
{
    opacity: 1;
}

.pack_order_btn
{
    cursor: alias;
    pointer-events: none;  
}

.pack_order_btn.active 
{
    cursor: pointer;
    pointer-events: all;
}


.pack_order_era {
    transition: transform 0.3s ease;  
}

.pack_order_fixed 
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 15px;
    transform: translateY(0); 
}

.pack_order_original {
    position: relative;
    bottom: auto;
    transform: translateY(0);  
}


.order_era .order_btn span
{
    font-size: 15px;
    letter-spacing: 2px;
    font-weight: 600;
}

.order_era p 
{
    margin: 12px 0;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}
.order_era p span.complete
{
    color: var(--color3)
}


@media(max-width : 767px)
{
    .order_era.fixed-bottom 
    {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding: 15px 20px 10px 20px;
        z-index: 9;
    }
}

.trusted_info
{
    padding-top: 20px;
}

.trusted_info_top
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
}

.trusted_info_top p 
{
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12px;
    font-weight: 400;
}

.trusted_info_top p i 
{
    font-size: 18px;
}

.accordion-item
{
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #ddd !important;
}

.accordion-item:first-child
{
    border-top: 1px solid #ddd !important;
}

.accordion-item:first-of-type 
{
    border-top-left-radius: 0 !important; 
    border-top-right-radius: 0 !important; 
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed 
{
    border-bottom-right-radius: 0 !important; 
    border-bottom-left-radius: 0 !important; 
}

.accordion-item:last-of-type {
    border-bottom-right-radius: 0 !important; 
    border-bottom-left-radius: 0 !important; 
}

.accordion-button 
{
    padding: 18px 15px !important;
    font-size: 16px !important;
    font-weight: 400;
    color: var(--black1) !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    background-color: transparent !important;
}

.accordion-button:not(.collapsed) 
{
    color: var(--black1) !important;
    background-color: transparent !important;
}

.accordion-body 
{
    margin-top: -10px;
    padding: 0px 15px !important;
}

.accordion-header .accordion-button::after 
{
    background-image: url("../images/plus.svg");
}

.accordion-header .accordion-button:not(.collapsed)::after 
{
    background-image: url("../images/minus.svg");
}

.accordion-body p 
{
    margin: 15px 0;
    font-size: 14px;
    font-weight: 400;
}

.accordion-body a,
.accordion-body ul li a
{
    color: var(--black1) !important;
    font-size: 14px;
    font-weight: 600;
}

.accordion-body ul 
{
    margin: 0;
    padding: 0;
    padding-left: 15px;
}

.accordion-body ul li 
{
    margin: 15px 0;
    font-size: 14px;
    font-weight: 400;
}


/* scrolling tags */
.scrolling_tags
{
    overflow: hidden;
}

.scroll 
{
    padding: 15px 0;
    background-color: var(--cmn-bg3);
    color: white;
    white-space: nowrap;
    margin: 0;
}

.scroll.v2 
{
    background-color: transparent;
    color: black;
}
  
.scroll div 
{
    display: flex;
    justify-content: center;
    gap: 2em;
}

.scroll p 
{
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scroll.v2 p
{
    font-size: 18px;
}

.RightToLeft
{
  display: inline-block;
  animation: RightToLeft 15s infinite linear;
}

.RightToLeft:hover 
{
    animation-play-state: paused;
}

@keyframes  RightToLeft {
    0% {
        transform: translateX(0%);
    }
      100% {
        transform: translateX(-50%);
    }
}

/* best option  */
.best_option
{
    padding: 40px 0;
}

.best_option table {
    border-collapse: separate; 
  
}

.best_option table th, .best_option table td 
{
    padding: 20px;
    border: none;
}

.best_option table tr th:first-child h5
{
    font-size: 25px;
    font-weight: 600;
}

.best_option table tr th:first-child h5 span 
{
    font-size: 40px;
    font-weight: 600;
    font-family: var(--SignPainter);
}



.best_option table tr th:nth-child(2) 
{
    border-left: 2px solid #DCDCDC;
    border-right: 2px solid #DCDCDC;
    border-top: 2px solid #DCDCDC;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
}

.best_option table td:nth-child(2), .best_option table th:nth-child(2) {
    background-color: #fff;
}

.best_option table tr th img 
{
    margin: 5px 0;
    width: 150px;
}

.best_option table tr th img:nth-child(2)
{
    filter: invert(1);
}

.best_option table tr th:last-child h5
{
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.best_option table .info_row 
{
    border-top: 3px solid white;
    background-color: #f6f6f6;
}

.best_option table tr:nth-child(2) td:first-child 
{
    border-top-left-radius: 10px;
}

.best_option table td:nth-child(2) 
{
    border-left: 2px solid #DCDCDC;
    border-right: 2px solid #DCDCDC;
    text-align: center;
}

.best_option table tr:nth-child(2) td:last-child 
{
    border-top-right-radius: 10px;
}

.best_option table td:nth-child(3), 
.best_option table td:nth-child(4) {
    color: #818181;
    text-align: center;
}

.best_option table tr:last-child td:first-child 
{
    border-bottom-left-radius: 10px;
}

.best_option table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.best_option table tr:last-child td:nth-child(2) {
    border-bottom: 2px solid #DCDCDC;
}

.best_option table .info_row p 
{
    font-size: 15px;
    font-weight: 400;
    margin: 0;
}

.best_option table .info_row img 
{
    width: 28px;
}

@media(max-width : 425px)
{
    .best_option table tr th:first-child h5 {
        font-size: 20px;
    }
    .best_option table tr th:first-child h5 span {
        font-size: 30px;
    }
    .best_option table tr th img {
        width: 80px;
    }
    .best_option table th, .best_option table td {
        padding: 10px;
    }
    .best_option table .info_row p {
        font-size: 13px;
    }

    .best_option table tr th:last-child h5 {
        font-size: 13px;
    }
}

@media(min-width : 426px) and (max-width : 575px)
{
    .best_option table tr th img {
        width: 100px;
    }
    .best_option table tr th:first-child h5 {
        font-size: 20px;
    }
    .best_option table tr th:first-child h5 span {
        font-size: 30px;
    }
    .best_option table th, .best_option table td {
        padding: 15px;
    }
}   

/* faq */
.faq
{
    padding: 40px 0;
    background-color: #f6f6f6;
}

.faq_in
{
    max-width: 800px;
    margin: 30px auto 0 auto;
}

.faq_in > h4 
{
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 18px;
}


.faq_in .accordion-button 
{
    padding: 22px 15px !important;
}

/* pack top space */
.pack_top_space
{
    padding-top: 80px;
}

@media(max-width : 575px)
{
    .pack_top_space
    {
        padding-top: 40px;
    } 
}

@media(min-width : 576px) and (max-width : 767px)
{
    .pack_top_space
    {
        padding-top: 50px;
    } 
}

@media(min-width : 768px) and (max-width : 991px)
{
    .pack_top_space
    {
        padding-top: 60px;
    } 
}

/* cart */
.cart
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.4);
    display: none;
    justify-content: end;
    z-index: 999;
}

.cart.active
{
    display: flex;
}

.cart_in
{
    max-width: 460px;
    width: 92%;
    background-color: white;
    display: grid;
    grid-auto-rows: auto minmax(0, 1fr) auto;
    align-content: start;
}

.cart_header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: #f6f6f6;
    border-bottom: 1px solid #ddd;
    padding: 16px 20px;
}

.cart_header h1 
{
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart_header h1 span
{
    height: 20px;
    width: 20px;
    background-color: var(--cmn-bg3);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart_close_btn
{
    outline: none;
    box-shadow: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.cart_mid
{
    overflow: auto;
}


.cart_mid_empty
{
    padding: 20px 40px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.cart_mid_empty > h1 
{
    font-size: 22px;
    font-weight: 600;
}

.cart_mid_empty > p 
{
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0;
}

.cart_mid_empty_btn 
{
    width: 100%;
    padding: 0 40px;
}

.cart_mid_empty_btn a 
{
    font-size: 14px;
    font-weight: 600;
    padding: 16px 20px;
    border: 2px solid var(--cmn-bg3);
    background-color: var(--cmn-bg3);
    color: white !important;
    text-align: center;
    margin: 20px 0;
    text-decoration: none;
    display: block;
    width: 100%;
    border-radius: 6px;
    letter-spacing: 1px;
}

.cart_mid_empty_btn a:last-child
{
    background-color: white;
    color: var(--cmn-bg3) !important;
}

.cart_product
{
    padding: 30px;
}

.cart_product_item
{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 20px;
}

.cart_product_left
{
    display: flex;
    gap: 10px;
}

.cart_product_img img 
{
    width: 80px;
} 

.cart_product_info a  
{
    display: inline-block;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--black1) !important;
    margin: 0;
}

.cart_product_info p 
{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    opacity: .8;
}

.cart_product_info ul 
{
    margin: 0;
    padding: 0;
    padding-left: 15px;
}
.cart_product_info ul li 
{
    margin: 5px 0;
    font-size: 13px;
    font-weight: 400;
    opacity: .8;
}

.cart_product_right
{
    text-align: right;
}


.cart_product_right h5 
{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.cart_product_qty
{
    border: 2px solid #ddd;
    padding: 3px 5px;
    display: flex;
    align-items: center;
}

.cart_product_qty button
{
    font-size: 12px;
    font-weight: 600;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0px 4px;
    cursor: pointer;
}

.cart_product_qty > input
{
    width: 25px;
    text-align: center;
    border: none;
    outline: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    padding: 0px;
    pointer-events: none;
}

.cart_product_qty > input::-webkit-outer-spin-button,
.cart_product_qty > input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart_product_qty > input[type=number] {
  -moz-appearance: textfield;
}


.cart_footer
{
    background-color: #f6f6f6;
    border-top: 1px solid #ddd;
    padding: 16px 20px;
}

.cart_free_delivery h2 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin: 0;
}

.cart_free_delivery h2 span
{
    font-size: 14px;
    font-weight: 600;
}

.c_progress
{
    margin: 40px 0;
    width: 100%;
    background-color: #fff;
    height: 10px;
}

.progress_reached
{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background-color: var(--cmn-bg3);
}

.progress_target
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:  96%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress_target img 
{
    width: 20px;
}

.progress_target span
{
    font-size: 16px;
}

.progress_target p 
{
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.transport_insurance
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.transport_insurance_left h6 
{
    font-size: 13px;
    font-weight: 400;
    margin: 0;
}

.transport_insurance_left p 
{
    margin: 2px 0;
    font-size: 13px;
    font-weight: 400;
}

.transport_insurance_right
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.transport_insurance_right p 
{
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}


.switch {
   
    --switch-width: 46px;
    --switch-height: 24px;
    --switch-bg: rgb(131, 131, 131);
    --switch-checked-bg: rgb(0, 218, 80);
    --switch-offset: calc((var(--switch-height) - var(--circle-diameter)) / 2);
    --switch-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);

    --circle-diameter: 18px;
    --circle-bg: #fff;
    --circle-shadow: 1px 1px 2px rgba(146, 146, 146, 0.45);
    --circle-checked-shadow: -1px 1px 2px rgba(163, 163, 163, 0.45);
    --circle-transition: var(--switch-transition);

    --icon-transition: all .2s cubic-bezier(0.27, 0.2, 0.25, 1.51);
    --icon-cross-color: var(--switch-bg);
    --icon-cross-size: 6px;
    --icon-checkmark-color: var(--switch-checked-bg);
    --icon-checkmark-size: 10px;

    --effect-width: calc(var(--circle-diameter) / 2);
    --effect-height: calc(var(--effect-width) / 2 - 1px);
    --effect-bg: var(--circle-bg);
    --effect-border-radius: 1px;
    --effect-transition: all .2s ease-in-out;
  }
  
  .switch input {
    display: none;
  }
  
  .switch {
    display: inline-block;
  }
  
  .switch svg {
    -webkit-transition: var(--icon-transition);
    -o-transition: var(--icon-transition);
    transition: var(--icon-transition);
    position: absolute;
    height: auto;
  }
  
  .switch .checkmark {
    width: var(--icon-checkmark-size);
    color: var(--icon-checkmark-color);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  
  .switch .cross {
    width: var(--icon-cross-size);
    color: var(--icon-cross-color);
  }
  
  .slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: 999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transition: var(--switch-transition);
    -o-transition: var(--switch-transition);
    transition: var(--switch-transition);
    cursor: pointer;
  }
  
  .circle {
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    background: var(--circle-bg);
    border-radius: inherit;
    -webkit-box-shadow: var(--circle-shadow);
    box-shadow: var(--circle-shadow);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: var(--circle-transition);
    -o-transition: var(--circle-transition);
    transition: var(--circle-transition);
    z-index: 1;
    position: absolute;
    left: var(--switch-offset);
  }
  
  .slider::before {
    content: "";
    position: absolute;
    width: var(--effect-width);
    height: var(--effect-height);
    left: calc(var(--switch-offset) + (var(--effect-width) / 2));
    background: var(--effect-bg);
    border-radius: var(--effect-border-radius);
    -webkit-transition: var(--effect-transition);
    -o-transition: var(--effect-transition);
    transition: var(--effect-transition);
  }
  
  .switch input:checked+.slider {
    background: var(--switch-checked-bg);
  }
  
  .switch input:checked+.slider .checkmark {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  
  .switch input:checked+.slider .cross {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
  
  .switch input:checked+.slider::before {
    left: calc(100% - var(--effect-width) - (var(--effect-width) / 2) - var(--switch-offset));
  }
  
  .switch input:checked+.slider .circle {
    left: calc(100% - var(--circle-diameter) - var(--switch-offset));
    -webkit-box-shadow: var(--circle-checked-shadow);
    box-shadow: var(--circle-checked-shadow);
  }

  .cart_order_era img 
  {
    max-width: 250px;
    display: block;
    margin: 10px auto 0 auto;
  }

  /* checkout */

  .checkout
  {
    padding: 50px 0;
  }


  .checkout_left_item > h5 
  {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }

  .ship_address_list label
  {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
    background-color: #fff;
    padding: 15px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
  }

  .ship_address_list label.active 
  {
    background-color: #f6f6f6;
  }

  .ship_address_list label input
  {
    margin-top: 2px;
    height: 18px;
    width: 18px;
    accent-color: var(--black1);
    cursor: pointer;
  }

  .ship_address_list label div h5 
  {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
  }

  .ship_address_list label div p 
  {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
  }

  .ship_address_era input,
  .modal-body input
  {
    height: 50px;
  }

  .add_address_btn
  {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    font-size: 14px;
    font-weight: 600;
  }

  .payment_era
  {
    padding-top: 25px;
  }

  .payment_era h5 
  {
    font-size: 16px;
    font-weight: 600;
    margin: 5px 0;
  }
  .payment_era p 
  {
    font-size: 14px;
    font-weight: 400;
    margin: 5px 0;
  }

  .payment_era_in
  {
    display: none;
    margin-top: 10px;
    background-color: #F6F6F6;
    border-radius: 10px;
  }

  .payment_era_top
  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px;
    border-bottom: 1px solid #ccc;
  }

  .payment_era_top h5 
  {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
  }

  .payment_option
  {
    margin-top: 20px;
  }

  .payment_radio_box 
  {
      display: flex;
      align-items: center;
      gap: 10px;
  }

  .payment_radio_box .checkbox-input 
  {
      clip: rect(0 0 0 0);
      -webkit-clip-path: inset(100%);
              clip-path: inset(100%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
  }

  .payment_radio_box .checkbox-input:checked + .checkbox-tile:before {
      transform: scale(1);
      opacity: 1;
      background-color: #2260ff;
      border-color: #2260ff;
  }

  .payment_radio_box .checkbox-input:checked + .checkbox-tile .checkbox-icon,
  .payment_radio_box .checkbox-input:checked + .checkbox-tile .checkbox-label {
      color: #2260ff;
  }

  .payment_radio_box .checkbox-input:focus + .checkbox-tile {
      border-color: #2260ff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
  }
  
  .payment_radio_box .checkbox-input:focus + .checkbox-tile:before {
      transform: scale(1);
      opacity: 1;
  }

  .payment_radio_box .checkbox-tile {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 20px;
      border-radius: 0.5rem;
      border: 2px solid #b5bfd9;
      background-color: #fff;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      transition: 0.15s ease;
      cursor: pointer;
      position: relative;
  }

  
  .payment_radio_box .checkbox-tile:before {
      content: "";
      position: absolute;
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      border: 2px solid #b5bfd9;
      background-color: #fff;
      border-radius: 5px;
      top: 0.25rem;
      left: 0.25rem;
      opacity: 0;
      transform: scale(0);
      transition: 0.25s ease;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
      background-size: 15px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
  }

  .payment_radio_box .checkbox-tile:hover {
      border-color: #2260ff;
  }

  .payment_radio_box .checkbox-tile:hover:before {
      transform: scale(1);
      opacity: 1;
  }

  .payment_radio_box .checkbox-icon {
      transition: 0.375s ease;
      color: #494949;
  }
  .payment_radio_box .checkbox-icon svg {
      width: 40px;
      height: 40px;
  }

  .payment_radio_box .checkbox-label {
      color: #707070;
      transition: 0.375s ease;
      text-align: center;
  }


  .payment_era_method 
  {
    display: flex;
    gap: 2px;
  }

  .payment_era_method img
  {
    width: 35px;
  }

  .payment_era_mid
  {
    padding: 15px 15px 0 15px;
  }

  .payment_era_btm
  {
    padding: 0px 15px 20px 15px;
  }
  

  .payment_era_mid_input_era
  {
    position: relative;
  }

  .payment_era_mid_input_era i 
  {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20px;
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
  }

  .error_msg
  {
    display: none;
    font-size: 13px;
    font-weight: 400;
    color: red;
}

.order_btn
{
    background-color: var(--cmn-bg3);
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    display: block;
    width: 100%;
    height: 55px;
    border-radius: 5px;
}

#order_btn_stripe_bg
{
    background-color: #1A73E8;
}

.checkout_right .cart_product
{
    padding-left: 0;
    max-height: 400px;
    overflow: auto;
}

.custom_scroll_bar::-webkit-scrollbar {
  width: 3px;
}
 
.custom_scroll_bar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
 
.custom_scroll_bar::-webkit-scrollbar-thumb {
  background-color: darkgrey;
}

.checkout_cart_empty 
{
    font-size: 25px;
    font-weight: 600;
    margin: 10px 0;
}

.discount_era
{
    padding-top: 20px;
    display: grid;
    grid-template-columns: 70% auto;
    gap: 5px;
}

.discount_submit_btn
{
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    background-color: var(--cmn-bg3);
    color: white;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    display: block;
    border-radius: 5px;
}


.final_calculation
{
    padding-top: 20px;
}

.final_calculation p,
.final_calculation h5 
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0;
    font-size: 15px;
    font-weight: 400;
}

.final_calculation h5
{
    font-size: 16px;
    font-weight: 600;
}

@media(max-width : 575px)
{
    .checkout_right  .cart_product_img img {
        width: 58px;
    }
    .payment_era_method img {
        width: 30px;
    }
    .discount_submit_btn {
        font-size: 14px;
    }
}

/*  track order  */
.track_order
{
    padding: 50px 0;
}

@media(max-width : 575px)
{
    .track_order
    {
        padding: 50px 0 40px 0;
    }
}

.track_order_in
{
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.track_order_in h1 
{
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 40px;
}

.track_era 
{
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
}

.track_era input
{
    height: 55px;
}

.cmn_btn
{
  height: 50px;
  background-color: var(--cmn-bg3);
  color: white;
  font-size: 16px;
  font-weight: 500;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  padding: 14px 30px;
  border-radius: 5px;
  max-width: 160px;
  width: 100%;
}


/* contact */
.contact
{
    padding: 50px 0;
}

@media(max-width : 575px)
{
    .contact
    {
        padding: 50px 0 40px 0;
    }
}

.container_in
{
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

.container_in h1 
{
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.container_in p 
{
    margin: 20px 0;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.container_in p a 
{
    color: var(--black1) !important;
}

#contact_form button
{
    width: 100%;
    height: 55px;
    background-color: var(--cmn-bg3);
    color: white;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    outline: none;
    box-shadow: none;
}

/* documents info */
.documents_info
{
    padding: 50px 0;
}

@media(max-width : 575px)
{
    .documents_info
    {
        padding: 50px 0 40px 0;
    }
}

.documents_info_in > h1 
{
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 30px;
}

.documents_info_in > h2 
{
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 20px 0;
}

.doc_info_item
{
    margin: 20px 0;
}

.doc_info_item ul 
{
    margin: 0;
    padding: 0;
    padding-left: 15px;
}

.doc_info_item > p,
.doc_info_item ul li
{
    font-size: 14px;
    font-weight: 400;
    margin: 5px 0;
}

.doc_info_item > p > a,
.doc_info_item > ul li a 
{
    color: var(--black1) !important;
}

/* verification era */
.verification_era h2
{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin: 10px 0 20px 0;
}

.swal2-actions
{
    gap: 10px;
}


/* page loader */

.page_loader_era
{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100%;
    z-index: 999;
    background-color: rgba(0,0,0,0.4);
}

.page_loader_era.hide 
{
    display: none;
}

.page_loader {
    --uib-size: 35px;
    --uib-color: white;
    --uib-speed: 1s;
    --uib-stroke: 3.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--uib-size);
    height: calc(var(--uib-size) * 0.9);
}

.bar {
    width: var(--uib-stroke);
    height: 100%;
    background-color: var(--uib-color);
    transition: background-color 0.3s ease;
}

.bar:nth-child(1) {
    animation: grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.45)
    infinite;
}

.bar:nth-child(2) {
    animation: grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.3)
    infinite;
}

.bar:nth-child(3) {
    animation: grow var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.15)
    infinite;
}

.bar:nth-child(4) {
    animation: grow var(--uib-speed) ease-in-out infinite;
}

@keyframes grow {
    0%,
    100% {
        transform: scaleY(0.3);
    }

    50% {
        transform: scaleY(1);
    }
}


/* search product */
.searched_product_era
{
    text-align: left;
}
.searched_product
{
   height: calc(100vh - 135px);
   background-color: var(--black1);
}

.searched_product_bg_dark
{
    overflow: auto;
    height: 98%;
    background-color: white;
}

.searched_product_bg_dark::-webkit-scrollbar
{
    display: none;
}

.searched_product_bg_white
{
    height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: white;
}
.searched_product h2 
{
    font-size: 16px;
    font-weight: 500;
    position: relative;
}
.searched_product h2::before
{
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: #ccc;
}
.searched_product h2 span 
{
    position: relative;
}
.searched_product h2 span::before
{
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: var(--black1);
}

.searched_product_list
{
    grid-template-columns: repeat(6, 1fr);
    padding-top: 20px;
    padding-bottom: 20px;
}

@media(max-width : 575px)
{
    .searched_product {
        height: calc(100vh - 120px);
    }

    .searched_product_list
    {
        grid-template-columns: repeat(1, 1fr);
    }

    .searched_product_list .product_item {
        display: grid;
        gap: 10px;
        grid-template-columns: 80px auto;
        align-items: center;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 2px;
    }

    .searched_product_list .product_item_bottom
    {
        padding: 0;
    }

}

@media(min-width : 576px) and (max-width : 991px)
{
    .searched_product_list
    {
        grid-template-columns: repeat(2, 1fr);
    }

    .searched_product_list .product_item {
        display: grid;
        gap: 10px;
        grid-template-columns: 80px auto;
        align-items: center;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 2px;
    }

    .searched_product_list .product_item_bottom
    {
        padding: 0;
    }

}

@media(min-width : 992px) and (max-width : 1199px)
{
    .searched_product_list
    {
        grid-template-columns: repeat(4, 1fr);
    }
}