@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700&display=swap');

body,
html{
    margin: 0;
    padding: 0;
    font-family: 'Red Hat Display', sans-serif;
}

a{
    text-decoration: none;
    color: #4368C7;
}

.ticker-container {
    width: 100%;
    overflow: hidden;
    background: #000;
    height: 40px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    z-index: 9999;
}

.ticker-content {
    display: flex;
    gap: 60px; /* Space between texts */
    position: absolute;
    white-space: nowrap;
}

.ticker-item {
    color: #fff;
    text-decoration: none;
    display: inline-block;
    transition: all ease-in .2s;
}

.ticker-item:hover,
.ticker-item:focus {
    color: #CDA13D;
}

@media (max-width: 768px) {
    .ticker-item {
        font-size: 14px;
    }
}

section#header-wrapper{
    position: fixed;
    z-index: 9;
    background: #fff;
    margin-bottom: 0;
    top: 0;
    width: 100%;
    left: 0;
}

#header-space{
    height: 140px;
}

header.desktop ul:first-child,
ul.dropdown-menu,
header.mobile ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

header ul:first-child > li,
header.mobile ul > li{
    float: right;
    padding: 10px 10px;
}

header ul:first-child > li a,
header.mobile ul > li a{
    text-decoration: none;
    color: #1B1B1B;
}

header ul.boon-dropdown-menu{
    margin-top: 10px;
    display: none;
    left: 0;
    position: absolute;
    background-color: #fff;
    width: 100%;
    z-index: 999;
    padding: 25px 10px 20px 10px;
    border-bottom: 1px solid #aaa;
    list-style: none;
}

header ul.boon-dropdown-menu > li{
    float: left;
    padding: 0 20px;
    text-align: left;
    font-weight: bold;
}

header ul.boon-dropdown-menu li > ul{
    columns: 2;
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
}

header ul.boon-dropdown-menu li > ul > li{
    float: none;
    padding: 0;
    font-weight: normal;
    padding-right: 20px;
}

header ul:first-child > li:hover > a{
    color: #CDA13D;
}

header ul:first-child > li:hover ul.boon-dropdown-menu{
    display: block;
}

header > .large-menu{
    position: relative;
    height: 80px;
}

header > .large-menu > div.logo{
    position: absolute;
    z-index: 10;
    text-align: center;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100px;
}

header > .large-menu > div.navigation-menu-block{
    position: absolute;
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

header .mobile-header{
    padding-top: 30px;
    width: 100%;
    position: absolute;
    height: 100vh;
    background: #fff !important;
    z-index: 99;
    left: 0;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    transform: translateX(-100%);
    transition: all ease .2s;
}

header .mobile-header.is-active{
    transform: translateX(0%);
}

header .mobile-header ul{
    width: 100%;
}

header .mobile-header ul li{
    float: unset !important;
    padding-bottom: 10px;
}

header .mobile-header ul li.spacer{
    background: #eee;
    height: 1px !important;
    padding: 0px !important;
    margin-bottom: 10px;
}

/* ==========SECTION========== */
.banner-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 12/5;
}
.brand-title{
    font-size: 2em;
}
.brand-subtitle{
    font-size: 1em;
    color: #787878;
}
.brand-image{
    width: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 100%;
    aspect-ratio: 1/1;
}
.brand-introduction{
    background: #fafafa;
}
.section-latest-collection{
    background: #000;
    padding: 50px 0px;
}
.latest-collection-title{
    font-size: 2em;
    color: #fff;
}
.latest-collection-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 6/7;
}
.latest-collection-title{
    font-weight: 2em;
}
.latest-collection-desc{
    margin-top: auto;
    color: #fff;
}
.article-image-1{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 16/6;
}
.article-title-1{
    font-size: 1.4em;
}
.article-image-2{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 4/3;
}
.article-category-2{
    font-size: 1.4em;
}
.article-title-2{
    font-size: 2.6em;
    max-width: 60%;
    text-transform: uppercase;
}
.section-highlight-product{
    border-bottom: 1px solid #CFCFCF;
    padding-bottom: 50px;
}
.product-block{
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: all ease-in .2s;
}
.product-block:hover{
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25)
}
.product-block .image-box{
    position: relative;
}
.product-block .label{
    z-index: 5;
    position: absolute;
    right: -30px;
    padding: 5px;
    top: 20px;
    background: #eee;
    text-align: center;
    width: 50%;
    transform: rotate(40deg);
    color: #fff;
}
.product-block .label.label-sold-out{
    background: #1B1B1B;
}
.product-block .label.label-sale{
    background: #e62d2d;
}
.product-block .label.label-surprise-sale{
    background: #CDA13D;
}
.product-category{
    font-size: .8em;
}
.product-name{
    font-weight: 500;
}
.product-price{
    color: #583F0E;
    font-weight: 500;
}
.section-article-detail{
    line-height: 2;
}
.article-detail-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 16/7;
}
.article-detail-title{
    font-size: 2em;
}
.profile-section .greeting{
    font-size: 2em;
}
ul.profile-sidebar{
    list-style: none;
    padding: 0;
}

ul.profile-sidebar li a{
    display: inline-block;
    padding: 20px 0px;
    font-size: 1.5em;
    width: 100%;
    transition: all .2s ease;
    color: #0D0D0D;
}
.profile-info-data{
    font-size: 1em;
    font-weight: 600;
}
.section-product .breadcrumb{
    display: flex;
    align-items: center;
    color: #A9A9A9;
}
.section-product .breadcrumb div.breadcrumb-spacer{
    margin: 0 10px;
}
.section-product .breadcrumb div:last-child{
    color: #0D0D0D;
}
.section-product .product-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
}

.section-product .product-image-detail{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 3/4;
}
.section-product .product-name{
    color: #0D0D0D;
    font-size: .9em;
}
.section-product .product-price{
    color: #585656;
    font-size: .9em;
}
.section-product .section-title{
    color: #0D0D0D;
    font-size: 2em;
    font-weight: 500;
}
.section-product .product-block:hover{
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
}
.section-product ul.product-category{
    list-style: none;
    font-size: 1.4em;
    padding: 0;
}
.section-product ul.product-category li{
    line-height: 2;
}
.section-product ul.product-category li a{
    transition: all ease .2s;
    display: inline-block;
    color: #000;
}
.section-product ul.product-category li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .2s;
}
.section-product ul.product-category li a.active::after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    transition: width .2s;
}
.section-product ul.product-category li a:hover::after {
    width: 100%;
}
.product-block .image-box > img:last-child,
.section-product .product-block .image-box > div.product-image:last-child{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all ease-in .2s;
}
.product-block .image-box:hover > img:last-child,
.section-product .product-block .image-box:hover > div.product-image:last-child{
    opacity: 1;
}
#product-loader .skeleton-product,
#delivery-service-loader .skeleton-product{
    aspect-ratio: 1/1;
    transition: all 200ms ease-in-out;
    position: relative;
    background-color: #eaeaea;
}

#delivery-service-loader .skeleton-product{
    aspect-ratio: 4/1;
}

#product-loader .skeleton-product::after,
#delivery-service-loader .skeleton-product::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    animation: load 1s infinite;
}

.product-detail > div{
    margin-bottom: 15px;
}

.product-detail > .title{
    font-size: 1.8em;
    font-weight: 600;
    color: #1B1B1B;
}

.product-detail > .price{
    gap: 10px;
    display: flex;
    align-items: baseline;
}

.product-detail > .price > .final{
    font-size: 1.3em;
    font-weight: 600;
    color: #1B1B1B;
}

.product-detail > .price > .promo{
    font-size: 1em;
    color: #A9A9A9;
    text-decoration: line-through;
}

.product-detail > .size{
    color: #1B1B1B;
    font-weight: 600;
}

.product-detail > .description{
    color: #A9A9A9;
}

.cart-section{
    position: relative;
}

.cart-box{
    position: fixed;
    top: 0;
    right: -100%;
    width: 50%;
    height: 100vh;
    background: #fff;
    z-index: 10;
    box-shadow: 0 0 15px 0px rgba(0, 0, 0, 0.25);;
    clip-path: inset(0px -15px 0px -15px);
    transition: all ease-in-out .2s;
}

.cart-box.show{
    right: 0;
}

.cart-box .content{
    overflow: scroll;
    height: 80vh;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.cart-box .content::-webkit-scrollbar {
    display: none;
}

.cart-box .title-section{
    font-size: 1.4em;
    font-weight: 600;
}

.checkout-order-item .product-image-box,
.cart-box .product-image-box{
    position: relative;
}

.checkout-order-item .product-qty,
.cart-box .product-qty{
    position: absolute;
    right: -10%;
    top: -10%;
    background: #fff;
    border: 1.5px solid #A9A9A9;
    box-shadow: 0px 4px 7px -1px rgba(0, 0, 0, 0.1);
    width: 40px;
    aspect-ratio: 1/1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color: #A9A9A9;
}

.checkout-order-item .product-image,
.cart-box .product-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    border-radius: 4px;
}

.checkout-order-item .product-detail-box .product-detail-title,
.cart-box .product-detail-box .product-detail-title,
.checkout-order-item .product-detail-price .product-price-main,
.cart-box .product-detail-price .product-price-main{
    font-weight: 600;
    font-size: 1em;
}

.checkout-order-item .product-detail-information,
.cart-box .product-detail-information{
    color: #6E7587;
}

.checkout-order-item .product-detail-price .product-price-discount,
.cart-box .product-detail-price .product-price-discount{
    font-size: .8em;
    color: #A9A9A9;
    text-decoration: line-through;
}

div .confirmation{
    display: flex;
    position: absolute;
    right: 0;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
    padding: 10px;
    border-radius: 10px;
    background: #fff;
}

div .confirmation > div{
    text-align: center;
    margin: 0 10px;
    cursor: pointer;
}

div .confirmation::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 80%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

.cart-section .footer{
    position: absolute;
    width: 100%;
    border-top: 1px solid #D2D4D8;
    bottom: 0;
    padding: 20px;
    background: #fff;
}

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

@keyframes load {
    100% {
      transform: translateX(100%);
    }
}
/* ==========END SECTION========== */

footer{
    background: #0D0D0D;
    padding: 100px 0px;
    color: #D0DAF5;
}

footer a{
    color: #D0DAF5;
}

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

footer ul li:first-child{
    margin-bottom: 20px;
    font-weight: 600;
}

footer ul li:not(:first-child) a{
    color: rgba(208, 218, 245, .5);
    opacity: ;
    line-height: 2;
}

footer .footer-sitelink{
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(208, 218, 245, .6);
}

.text-red{
    color: #E13535 !important;
}

.bg-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section-login .image-banner{
    aspect-ratio: 4 / 3;
}

.section-login .login-box{
    margin: 15% auto;
    width: 100%;
}

.section-login .login-box .title{
    font-weight: 700;
    font-size: 2em;
}

.boon-input{
    width: 100%;
    padding: 15px;
    border: 2px solid #D2D4D8;
    border-radius: 4px;
    outline: none;
    transition: all ease-in .2s;
}

.boon-input:focus,
.boon-input:focus-visible{
    border: 2px solid #1b1b1b;
}

.boon-input-label{
    font-weight: 600;
}

.boon-search-input{
    width: 100%;
    padding: 10px 5px;
    outline: none;
    border: none;
    border-bottom: 1px solid #A9A9A9;
}

.boon-invalid-input.bottom{
    transform: translateX(0%) !important;
    animation: boonInvalidInputBottom ease .2s !important;
    right: 0 !important;
    top: 100% !important
}

.boon-invalid-input.bottom::after{
    border-color: transparent transparent #F02542 transparent !important;
    right: 18px !important;
    left: unset;
    top: -5px !important;
}

.boon-invalid-input{
    position: absolute;
    max-width: 400px;
    transform: translateX(-105%);
    z-index: 2;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
    animation: boonInvalidInput ease .2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.boon-invalid-input > .boon-invalid-input-content{
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.boon-invalid-input::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* To the right of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #F02542;
}

.boon-invalid-input > .boon-invalid-input-content > .message{
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 15px;
    color: #234057;
    font-family: Arial, Helvetica, sans-serif;
}

.boon-invalid-input > .boon-invalid-input-content > .icon{
    background: #F02542;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 5px 15px;
}

.boon-alert{
    width: 100%;
    position: relative;
    display: flex;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    overflow: hidden;
}

.boon-alert > .boon-alert-content{
    display: flex;
}

.boon-alert > .boon-alert-content > .message{
    display: flex;
    align-items: center;
    background: #fff;
    padding: 5px 15px;
    color: #234057;
    font-family: Arial, Helvetica, sans-serif;
}

.boon-alert > .boon-alert-content > .icon{
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 1.2em;
    padding: 5px 40px;
}

.boon-alert.boon-danger > .boon-alert-content > .icon{
    background: #F02542;
}

.boon-alert.boon-info > .boon-alert-content > .icon{
    background: #00708C;
}

.boon-alert.boon-success > .boon-alert-content > .icon{
    background: #008c2a;
}

.boon-button{
    width: 100%;
    padding: 15px;
    text-align: center;
    border: none;
    display: block;
    transition: all ease .2s;
}

.boon-button:disabled{
    opacity: .8;
}

.boon-button.btn-black{
    background-color: #1B1B1B;
    color: #fff;
}

.boon-button.btn-black:hover{
    background-color: #CDA13D;
}

.boon-button.btn-white-outline{
    border: 1px solid #D2D4D8;
    color: #1b1b1b;
    background: #fff;
}

.boon-button.btn-rounded{
    border-radius: 4px;
}

.boon-form-control{
    width: 100%;
}

.boon-form-group{
    position: relative;
    display: flex;
    align-items: center;
}

.boon-form-group > .icon{
    position: absolute;
    z-index: 2;
    right: 20px;
}

.boon-form-group > .icon.left{
    left: 20px;
}

.hide{
    display: none !important;
}

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

.step-checkout .step-detail{
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #A9A9A9;
}

.step-checkout .dash{
    width: 10%;
    border-top: 2px dashed #EBECF0;
    margin: 0px 20px;
}

.step-checkout .step-detail .icon{
    width: 25px;
    aspect-ratio: 1/1;
    background: #EBECF0;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 100%;
    margin-right: 10px;
}

.step-checkout .step-detail.active .icon{
    background: #F3FD54;
}

.step-checkout .step-detail.active .icon,
.step-checkout .step-detail.active .title{
    color: #1B1B1B;
}

.grouping-delivery-service-box{
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid #A9A9A9;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.edit-address-list-box,
.delivery-service-box {
    width: 100%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
/* Hide the browser's default radio button */
.edit-address-list-box input ,
.delivery-service-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.edit-address-list-box .service ,
.delivery-service-box .service {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 6px;
    padding: 10px;
    gap: 10px;
}

.edit-address-list-box .service{
    border: 1px solid #D2D4D8;
    border-radius: 4px;
}

.edit-address-list-box input ~ .service .logo,
.delivery-service-box input ~ .service .logo{
    background-color: #fff;
    padding: 10px;
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 6px;
}

.edit-address-list-box input ~ .service .logo .logo-image,
.delivery-service-box input ~ .service .logo .logo-image{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.edit-address-list-box input ~ .service .information .service-detail-name,
.delivery-service-box input ~ .service .information .service-detail-name{
    font-weight: 600;
    font-size: .8em;
}

.edit-address-list-box input ~ .service .information .service-detail-desc,
.delivery-service-box input ~ .service .information .service-detail-desc{
    color: #6E7587;
    font-size: .8em;
}

.edit-address-list-box input ~ .service .price,
.delivery-service-box input ~ .service .price{
    font-weight: 600;
    font-size: .8em;
}

.edit-address-list-box input ~ .service .check-dot > div,
.delivery-service-box input ~ .service .check-dot > div{
    width: 25px;
    aspect-ratio: 1/1;
    border: 1px solid #D2D4D8;
    border-radius: 100%;
    overflow: hidden;
    padding: 4px;
}

.edit-address-list-box input:checked ~ .service .check-dot > div,
.delivery-service-box input:checked ~ .service .check-dot > div{
    border: 1px solid #4970F3;
}

.edit-address-list-box input:checked ~ .service .check-dot > div > div,
.delivery-service-box input:checked ~ .service .check-dot > div > div{
    background: #4970F3;
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

/* On mouse-over, add a grey background color */
.delivery-service-box:hover input ~ .service {
    background-color: #F6F8FD;
}

/* When the radio button is checked, add a blue background */
.edit-address-list-box input:checked ~ .service ,
.delivery-service-box input:checked ~ .service {
    background-color: #F6F8FD;
    border: 1px solid #4970F3;
}

.order-box{
    background: #F9FBFC;
    padding: 30px 10px;
}

.btn{
    border-radius: 4px;
}

@keyframes boonInvalidInput {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(-105%);
     }
}

@keyframes boonInvalidInputBottom {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(-105%);
     }
}

.boon-label.label-ready-stock{
    width: fit-content;
    background: #EBF0FE;
    color: #3666A8;
    padding: 6px 8px;
}

.boon-label.label-out-of-stock{
    width: fit-content;
    background: #FEEBEE;
    color: #A83636;
    padding: 6px 8px;
}

.modal-content{
    border-radius: 4px;
}

.order-list-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1/1;
    border-radius: 4px;
}

.order-status {
    margin-bottom: 20px;
}

.order-status:last-child {
    margin-bottom: 0;
}

.order-status:last-child .description::after {
    display: none;
}

.order-status .description::after {
    content: "";
    position: absolute;
    left: -18px;
    bottom: -26px;
    width: 1px;
    height: calc(100% + 12px);
    border-left: thin dashed #E5E7E9;
    z-index: 1;
}

.order-status .description::before {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #838994;
    left: -22px;
    top: 4px;
    box-shadow: 0 0 0 4px #E5E7E9;
    z-index: 2;
}

.order-status.active .description::after {
    border-left: thin dashed #1B1B1B;
}

.order-status.active .description::before {
    background-color: #1B1B1B;
    box-shadow: 0 0 0 4px #1b1b1b25;
}

/* Bootstrap */
.pagination{
    --bs-pagination-border-width: 0px !important;
}

.page-item{
    margin: 0 5px;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.active > .page-link, 
.page-link.active{
    background-color: #000000;
    border-color: #000;
}

.page-link,
.page-link:hover{
    color: #000;
}

.page-item.active .page-link:hover{
    color: #fff;
}

.subscribe-box{
    margin-top: 30px;
    border-radius: 4px;
    padding: 50px;
    background: #cda23d0d;
}

.subscribe-box .desc{
    color: #aaa;
}

.subscribe-box input,
.subscribe-box input:focus{
    background: #0D0D0D;
    color: #D0DAF5;
    border: 2px solid #cda23d3b;
    outline: none;
    box-shadow: none;
}

.footer-title{
    cursor: text;
}

.footer-title:hover{
    color: unset;
}

.hamburger-box{
    width: 20px !important;
}

.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before{
    width: 20px !important;
    height: 2px !important;
}

.hamburger-inner{
    top: 70% !important;
}

.floating-whatsapp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.25);
    z-index:100;
    transition: all ease .2s;
}

.floating-whatsapp:hover{
	color:#FFF;
	background-color:#1eab52;
}

.floating-whatsapp i{
    margin-top: 15px;
}


/* // `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) { 
    .product-block .label{
        right: -50px;
        padding: 5px;
        top: 10px;
        text-align: center;
        width: 100%;
        font-size: 12px;
        transform: rotate(40deg);
    }
}

/* // `md` applies to small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
    .product-block .label{
        right: -50px;
        padding: 5px;
        top: 10px;
        text-align: center;
        width: 100%;
        font-size: 12px;
        transform: rotate(40deg);
    }
}

/* // `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .brand-title{
        font-size: 1.4em;
        text-align: center;
    }

    .brand-subtitle{
        font-size: 1em;
        text-align: center;
    }

    .product-name{
        font-size: 0.875em;
    }

    .product-price{
        font-size: 0.875em;
        font-weight: bold;
    }

    .subscribe-box{
        padding: 20px;
        margin-bottom: 30px;
    }
    
    .product-block:hover{
        box-shadow: unset;
    }

    .cart-box{
        width: 100%;
    }

    .section-product .section-title{
        font-size: 1.2em;
    }

    .section-product .breadcrumb{
        font-size: .875em;
    }
}

/* // `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 
    .article-title-2{
        font-size: 1.4em;
    }

    .article-category-2{
        font-size: 1em;
        margin-bottom: 10px;
    }
}

/* // `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
    /* ... */
}