/*Main color patern*/
:root {
    --main-color: #ff2b85;
    --second-color: #000000;

    --third-color: #0189c4;
    --fourth-color: #ffb400;
    --fifth-color: #da1a85;
}


/* roboto-100 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-100';
    font-style: normal;
    font-weight: 100;
    src: url('../HIPWEE/fonts/roboto-v32-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-regular';
    font-style: normal;
    font-weight: 400;
    src: url('../HIPWEE/fonts/roboto-v32-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-500';
    font-style: normal;
    font-weight: 500;
    src: url('../HIPWEE/fonts/roboto-v32-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-700';
    font-style: normal;
    font-weight: 700;
    src: url('../HIPWEE/fonts/roboto-v32-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-900';
    font-style: normal;
    font-weight: 900;
    src: url('../HIPWEE/fonts/roboto-v32-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* roboto-slab-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-Slab-regular';
    font-style: normal;
    font-weight: 400;
    src: url('../HIPWEE/fonts/roboto-slab-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-Slab-500';
    font-style: normal;
    font-weight: 500;
    src: url('../HIPWEE/fonts/roboto-slab-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto-Slab-700';
    font-style: normal;
    font-weight: 700;
    src: url('../HIPWEE/fonts/roboto-slab-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/*Font Roboto Customize*/
.font-roboto-100 {font-family: Roboto-100 !important;}
.font-roboto-regular {font-family: Roboto-regular !important;}
.font-roboto-500 {font-family: Roboto-500 !important;}
.font-roboto-700 {font-family: Roboto-700 !important;}
.font-roboto-900 {font-family: Roboto-900 !important;}

/*Font Roboto Slab Customize*/
.font-roboto-slab-regular {font-family: Roboto-Slab-regular !important;}
.font-roboto-slab-500 {font-family: Roboto-Slab-500 !important;}
.font-roboto-slab-700 {font-family: Roboto-Slab-700 !important;}


/*Background & color Customize*/
.bg-main {
    background-color: #ffffff !important;
}
.bg-secondary {
    background-color: var(--second-color) !important;
}
.text-main {
    color: var(--main-color) !important;
}


/*Button Custom*/
.btn-outline-custom {
    background-color: #fff!important;
    color: #f37417;
    background-color: transparent;
    background-image: none;
    border-color: #f37417;
}
.btn-outline-custom:hover {
    background-color: #f37417!important;
    color: #fff;
}
.btn-custom {
    background-color: var(--main-color) !important;
    color: #fff!important;
    border-color: var(--main-color) !important;
}
.bg-cus-2,
.button-peel {
    background: var(--main-color);
}
.bg-cus-1, .button {
    background-color: #00705e;
}
.read-mores {
    background: rgb(255,255,255);
    background: linear-gradient(4deg, rgb(224 224 224) 0%, rgb(255 255 255) 100%);
    font-family: roboto-700 !important;
}
.read-mores::before {
    background: rgb(255,255,255);
    background: linear-gradient(4deg, rgb(224 224 224) 0%, rgb(255 255 255) 100%);
}
.read-mores::after {
    background: rgb(255,255,255);
    background: linear-gradient(4deg, rgb(224 224 224) 0%, rgb(255 255 255) 100%);
}

.receipt-list span:first-child {
    background: linear-gradient(135deg, transparent 5.68px, var(--main-color) 5.69px) top left, linear-gradient(45deg, var(--main-color) 2.8px, transparent 2.81px) top left;
}
.receipt-list b,
.card-footer .btn {
    font-family: 'Roboto-Slab-700';
}
.receipt-list b,
.receipt-open span:last-child {
    background-color: var(--main-color);
}
.receipt-open span:first-child {
    background: linear-gradient(135deg, var(--main-color) 2.8px, transparent 2.81px) bottom left, linear-gradient(45deg, transparent 5.68px, var(--main-color) 5.69px) bottom left;
}
.receipt .cus-codes {
    background-color: var(--second-color);
    color: yellow;
}




/*ADDITIONAL CLASS*/
.sticky-offset2 {
    top: 3.6rem !important;
    padding-top: 0;
    z-index: 100;
}


/*BORDER CUSTOMIZE*/
.border-bottom-custom .dotted,
.border-bottom-custom .dotted::before,
.border-bottom-custom .dotted::after {
    background-color: #355fab;
    -webkit-box-shadow: 1px 1px 1px 5px #e9eff4;
    -moz-box-shadow: 1px 1px 1px 5px #e9eff4;
    box-shadow: 1px 1px 1px 5px #e9eff4;
}



/*body {
font-size: 14px;
}*/
/*body, .modal#wishlistModal .modal-body {*/
/*    background-color: #E9EFF4!important;*/
/*}*/





/*NAVBAR*/
.navbar .navbar-brand {
    min-width: 10rem;
    max-width: 10rem;
}
.navbar .navbar-collapse .menu-mobile {
    width: 100%;
}
.navbar .sdc-form .bi-search,
#searchShow .sdc-form .bi-search {
    color: var(--main-color) !important;
}
.navbar .sdc-form button {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #FFFFFF !important;
}
#searchShow .sdc-form button {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: #FFFFFF !important;
}


/*SECONDARY MENU*/
.secondary-menu {
    background-color: #fff;
    /*height: 60px;*/
}
.secondary-menu.fixed-top {
    box-shadow: 0 1px 5px rgba(190,190,190,.46);
    -webkit-box-shadow: 0 1px 5px rgba(190,190,190,.46);
    -moz-box-shadow: 0 1px 5px rgba(190,190,190,.46);
    border-color: transparent !important;
}
.secondary-menu .nav-item {
    padding: 0 .3rem;
    text-align: center;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    display: table-cell;
}
.secondary-menu .nav-item a {
    color: #000;
    font-size: 1.1rem;
    text-decoration: none !important;
    /*font-weight: 500;*/
    /*padding: .5rem 1.2rem!important;*/
    /*text-transform: uppercase;*/
    position: relative;
    /*-webkit-transition: all 0.1s linear;*/
    /*-o-transition: all 0.1s linear;*/
    /*transition: all 0.1s linear;*/
    /*border-radius: 3rem;*/
    display: block;
}
.secondary-menu .nav-item a::before {
    font-family: FontAwesome;
    content: '';
    font-size: 1.1rem;
    position: absolute;
    left: 0;
    display: none;
}
.secondary-menu .nav-item:first-child a::before {
    content: "\f015";
}
.secondary-menu .nav-item:nth-of-type(2) a::before {
    content: "\f005";
}
.secondary-menu .nav-item:nth-of-type(3) a::before {
    content: "\f0ac";
}
.secondary-menu .nav-item:nth-of-type(4) a::before {
    content: "\f1b3";
}
.secondary-menu .nav-item.active a:not(.dropdown-item),
.secondary-menu .nav-item:hover a:not(.dropdown-item) {
    color: var(--main-color) !important;
    /*color: #FFFFFF !important;*/
}
.secondary-menu a.dropdown-item:active,
.secondary-menu a.dropdown-item:hover {
    /*color: var(--main-color) !important;*/
    color: #FFFFFF !important;
}



/*MAIN CONTENT*/
.main-content {
    background-color: #f4f4f4 !important;
}




/*HEADING*/
.heading,
.text-detail h1,
.text-detail h2,
.text-detail h3,
.text-detail h4,
.text-detail h5,
.text-detail h6 {
    font-family: Roboto-Slab-700 !important;
}
/*BRANDS*/
.brands {
    /*background: #ffffff !important;*/
}

/*TOP BANNER*/
.top-banner .slider-title {
    background-color: var(--second-color) !important;
    font-family: Roboto-Slab-700 !important;
    color: white;
}
.top-banner .slick-dots {
    bottom: initial !important;
/*    width: auto !important;*/
/*    left: initial !important;*/
/*    right: 1.5rem !important;*/
/*    bottom: 1.5rem !important;*/
/*    -webkit-transform: none !important;*/
/*    -moz-transform: none !important;*/
/*    -ms-transform: none !important;*/
/*    -o-transform: none !important;*/
/*    transform: none !important;*/
}

.voucherBtnCont .btn:not(button) {
    background-color: var(--main-color) !important;
}




/*REVIEW HOMEPAGE*/
.home .slick-slider .slick-arrow {
    opacity: 0 !important;
}
.home .slick-slider:hover .slick-arrow:not(.slick-disabled) {
    opacity: 1 !important;
}
.home .slick-slider .slick-prev {
    left: -1rem !important;
}
.home .slick-slider:hover .slick-prev {
    left: -.3rem !important;
}
.home .slick-slider .slick-next {
    right: -1rem !important;
}
.home .slick-slider:hover .slick-next {
    right: -.3rem !important;
}

/*BANNER HOMEPAGE*/
.banner.home {
    /*background: linear-gradient(to bottom, #ffffff 0%, #4D4D4D33 100%);*/
}
.banner.home .all-slider::before,
.banner.home .all-slider::after {
    content: '';
    background: #4D4D4D33;
    background: linear-gradient(90deg, #dbdbdb 0%, #ffffff00 100%);
    width: 5rem;
    position: absolute;
    top: 0;
    left: 0;
    right: initial;
    bottom: 0;
    z-index: 5;
}
.banner.home .all-slider::after {
    background: #ffffff;
    background: linear-gradient(90deg, #ffffff00 0%, #dbdbdb 100%);
    left: initial;
    right: 0;
}



/*VOUCHER HOMEPAGE*/
.cat-list-voucher,
.cat-list-voucher #v-pills-tab {
    /*background-color: #dbdbdb;*/
}
.cat-list-voucher #v-pills-tab button:hover {
    background-color: var(--second-color) !important;
    border-color: var(--second-color) !important;
    color: #ffffff !important;
}
.cat-list-voucher #v-pills-tab button.active {
    background-color: var(--main-color) !important;
    color: #ffffff !important;
}

/*PAGINATION*/
.pagination {}
.pagination .page-item .page-link {
    color: var(--second-color) !important;
}
.pagination .page-item.active .page-link {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}
.pagination .page-item.active .page-link {
    color: #ffffff !important;
}



/*ARTICLES LIST*/
.articles-list .card-title {
    font-family: Roboto-Slab-700 !important;
}
.articles-list .btn-shop {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
}
.articles-list .btn-shop:hover {
    background-color: var(--fourth-color) !important;
    border-color: var(--fourth-color) !important;
    color: var(--second-color) !important;
}
.articles-list .btn-review {
    /*background-color: var(--fourth-color) !important;*/
    /*border-color: var(--third-color) !important;*/
    font-family: Roboto-700 !important;
    color: var(--third-color) !important;
}


/*ARTICLES DETAIL*/
.articles-detail .list-mini .imgCont {
    width: 5rem;
    height: 5rem;
}
.articles-detail .list-mini .imgCont img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    object-position: center top;
    display: block;
}
.articles-detail .product-link h3 {
    margin-top: 0 !important;
}


/*MENU BOTTOM MOBILE*/
.menuBottom {
    background-color: #ffffff;
    color: #000;
    -webkit-box-shadow: 0 0 17px 5px #5960615c;
    -moz-box-shadow: 0 0 17px 5px #5960615c;
    box-shadow: 0 0 17px 5px #5960615c;
}
.menuBottom .nav-item.active {
    background-color: var(--main-color) !important;
}
.menuBottom .nav-item a {
    color: #000;
}
.menuBottom .nav-item a i {
    color: var(--main-color) !important;
}
.menuBottom .nav-item.active a,
.menuBottom .nav-item.active a i {
    color: #fff!important;
}
.menuBottom .wishlist-icon .badge {
    background-color: green;
}
.mobOption .btn:active,
.navbar .wishlist-icon:active {
    background-color: var(--main-color) !important;
    color: #fff;
}
.mobOption .btn,
.mobOption form .bi-search {
    color: #333;
}


/*PLACEHOLDER SCROLLBAR*/
.searchCont form ::placeholder,
.mobOption form ::placeholder{
    color: #acacac !important;
}
.searchCont form :-ms-input-placeholder,
.mobOption form :-ms-input-placeholder {
    color: #acacac!important;
    opacity: .75;
}
.searchCont form :-ms-input-placeholder,
.mobOption form :-ms-input-placeholder {
    color: #acacac!important;
    opacity: .75;
}
.searchCont form ::-moz-placeholder,
.mobOption form ::-moz-placeholder {
    color: #acacac!important;
    opacity: .75;
}
.searchCont form ::-webkit-input-placeholder,
.mobOption form ::-webkit-input-placeholder {
    color: #acacac!important;
    opacity: .75;
}




/*MODAL*/
.modal.right .modal-header {
    background: -webkit-linear-gradient(to right, rgb(219, 53, 69), rgb(255, 146, 0), rgb(219, 53, 69))!important;
    background: -moz-linear-gradient(to right, rgb(219, 53, 69), rgb(255, 146, 0), rgb(219, 53, 69))!important;
    background: -o-linear-gradient(to right, rgb(219, 53, 69), rgb(255, 146, 0), rgb(219, 53, 69))!important;
    background: linear-gradient(to right, rgb(219, 53, 69), rgb(255, 146, 0), rgb(219, 53, 69))!important;
    background: linear-gradient(to right, rgb(219, 53, 69), rgb(255, 146, 0), rgb(219, 53, 69))!important;
    color: #fff;
}


.box .h2 {
    font-family: "Open_Sans_semibold","Helvetica Neue",Arial,sans-serif;
    font-size: 24px;
    color: #1d8996;
}




/*SOSMED*/
.sosmed a {
    width: 21px;
    height: 21px;
    color: #000;
    margin-right: 3px;
    display: inline-block;
}
.sosmed a .fa {
    font-size: 1rem!important;
}
.sosmed a:hover .fa,
.collapseCustom .col-head[aria-expanded="true"] {
    color: #1d8996!important

}




/*STORE LIST*/
.store-list a:hover .overlay {
    color: #fff!important;
}
.store #filters button:hover,
.store #filters button.is-checked {
    background-color: var(--main-color) !important;
}


/*Top Banner*/
.voucher-list .card-title,
.cat-list-voucher.home .card-title {
    font-family: Roboto-Slab-700 !important;
}
.store-list .list:hover a,
.voucher-list .list:hover .card .card-title,
.category-list .list:hover .title {
    color: var(--main-color) !important;
}


/*FILTER LIST*/
.filters {
    border-bottom-color: #1d8996;
}
.filters {
    border-bottom-color: #1d8996;
}
.filters .fil {
    border-color: transparent!important;
}
.filters .fil.active {
    border-color: var(--main-color) !important;
    color: #250f04;
}
.filters .fil.disabled,
.filters .fil.disabled.active,
.filters .fil.disabled:hover {
    color: #949191!important;
    cursor: default;
}

.selection a:hover,
.about a:hover,
.bottom-nav a:hover {
    text-decoration: underline!important;
}

.cat-list-voucher .nav-tabs .nav-link.active {
    border-color: #f37417!important;
}
.cat-list-voucher .nav-tabs .nav-link.active {
    background-color: #f37417;
    color: #fff!important;
}
.cat-list-voucher .nav-tabs .nav-link:hover {
    color: #000;
}
.cat-list-voucher .nav-tabs .nav-link:active {
    color: #f37417!important;
}
.cat-list-voucher .all-slider .card-body {
    min-height: 110px;
}

.floatPanel .wishlist-icon {
    background-color: #1e8a97;
    color: #ffffff;
}
.floatPanel .wishlist-icon::before,
.floatPanel .wishlist-icon::after {
    color: #fff;
}

.btn#getCode {
    color: #212529;
    background-color: #ffffff;
    border-color: var(--main-color) !important;
}



/*BREADCRUMB*/
.breadcrumb a {
    color: var(--main-color) !important;
}

/*SLICK SLIDER*/
.slick-slider .slick-arrow {
    background-color: var(--main-color) !important;
    width: 2.3rem !important;
    height: 4rem !important;
    opacity: 1 !important;
    z-index: 10;
    display: block !important;
}
.top-voucher .slick-slider .slick-arrow {
    margin-top: 5px;
}
.slick-slider .slick-prev {
    left: .2rem !important;
}
.slick-slider .slick-next {
    right: .2rem !important;
}

.slick-slider .slick-arrow::before {
    font-family: bootstrap-icons !important;
    color: #ffffff !important;
    font-size: 30px !important;
}
.slick-slider .slick-arrow:active::before {
    color: #1d8996 !important;
}
.slick-slider .slick-prev:before {
    /*content: '←'!important;*/
    content: "\f284";
}
.slick-slider .slick-next:before {
    /*content: '→'!important;*/
    content: "\f285";
}
.slick-slider .slick-arrow:hover::before {
    color: #7e8a9a;
}
.slick-dots li.slick-active {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.vStore,
.vCategories,
.searchResult {
    background-color: #f3f3f2 !important;
}

.filters .fil b,
.wishlist-icon .badge {
    background-color: #6d12ff !important;
    color: #ffffff !important;
}


.floatPanel {
    color: var(--main-color) !important;
}

footer {
    background-color: #ffffff !important;
}


/*------------------------------------*/
/*Responsive Desktop*/
/*------------------------------------*/
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1070px;
    }
}
@media (min-width: 992px) {
    .articles-detail .custom-grid.col-lg-4,
    .vCategories .custom-grid,
    .vStore .custom-grid {
        flex: 0 0 auto;
        width: 31.333333%;
    }
}
@media screen and (max-width: 1190px) {
    .container {
        max-width: 100%;
    }
}
@media screen and (max-width: 1024px) {
    .navbar-expand-lg .navbar-nav {
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .secondary-menu ul li a {
        padding: .8rem 1rem!important;
    }
}
@media screen and (max-width: 990px) {
    .navbar .navbar-brand {
        min-width: 7rem;
        max-width: 7rem;
    }
}
@media screen and (max-width: 1000px) {
    .navbar-collapse .navbar-brand {
        width: 12rem;
        height: initial;
        margin: 1.5rem auto;
        display: block!important;
    }
    .navbar-collapse .navbar-brand::after {
        content: '';
        width: 5rem;
        border-bottom: 1px solid orange;
        position: absolute;
        left: 50%;
        bottom: -.9rem;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }
    .secondary-menu .nav-item {
        padding: 0 .5rem;
    }

    .sosmedCustom {}
    .sosmedCustom a {
        font-size: .9rem;
        color: #333;
        margin-right: 0;
    }
    .sosmedCustom a i.fa {
        width: 1.5rem;
        height: 1.5rem;
        line-height: 2.2;
        margin-right: 0;
        border: none;
    }
    .sosmedCustom a:hover i.fa {
        background-color: transparent!important;
        border-color: transparent!important;
    }
    .searchResult .voucher-list .type2 .title {
        margin-bottom: 4rem;
    }
    .brand-header,
    footer {
        background-size: cover;
    }
    footer::after {
        display: none;
    }
}
@media screen and (max-width: 800px) {
    .brand-header {
        padding: .5rem 0!important;
    }
    .secondary-menu .nav-item {
        padding: 0 .4rem;
    }
}
@media screen and (max-width: 768px) {
    .cat-list-voucher .sticky-full-index.active ul.nav-tabs {
        background-color: #fff;
    }
    .cat-list-voucher .sticky-full-index.active .nav-link.active::after {
        border-bottom-color: #f37417 !important;
    }
    .cat-list-voucher .sticky-full-index.active .nav-link.active {
        color: #000!important;
    }
    .navbar .brand-header {
        height: 55px;
    }
}
@media screen and (max-width: 680px) {
    .navbar .navbar-collapse.show .close-sidebar-nav .fa {
        display: block;
    }
    .brand-header {
        padding: 0!important;
    }
    .navbar .navbar-brand {
        min-width: 8rem !important;
        max-width: 8rem !important;
    }
}

@media screen and (max-width: 580px) {
    .cat-list-voucher .sticky-full-index.active .nav-link {
        background-color: transparent;
        color: #1d8996;
    }
    /*.optionlMenu {*/
    /*    width: 100%;*/
    /*    max-width: 100%;*/
    /*}*/
    .navbar .sdc-form {
        max-width: 100%!important;
    }
}
@media screen and (max-width: 480px) {
    .AT-partner img {
        width: 10rem;
    }
    .cat-list-voucher .sticky-full-index.active .nav-link.active {
        border-bottom-color: #1d8996 !important;
    }
}