/* FONTS & VARIABLES */
:root {
    /* Colors */
    --primary-color: #FFC0CB;
    --secondary-color: #40E0D0; 
    --maroon: #bf5e27;

    --complementary-color: #00FFFF;
    --purple: #DDA0DD;

    /* Transitions */
    --transition-fast: all .25s linear;
    --transition-medium: all .35s linear;
    --transition-slow: all .5s linear;

    /* Fonts */
    --light: 'Poppins-Light';
    --medium: 'Heading_2';
    --regular: 'Poppins-Medium';
    --bold: 'Poppins-Bold';
}

/* Font-Family */

@font-face {
    font-family: 'Heading_1';
    src: url(/frontend/web/css/fonts/BeautyMountainsPersonalUse.ttf);
}
/* @font-face {
    font-family: 'Heading_2';
    src: url(/frontend/web/css/fonts/MochiyPopPOne-Regular.ttf);
} */
@font-face {
    font-family: 'Heading_2';
    src: url(/frontend/web/css/fonts/Lobster-Regular.ttf);
}
@font-face {
    font-family: 'Poppins-Light';
    src: url(/frontend/web/css/fonts/Poppins/Poppins-Light.ttf);
}
@font-face {
    font-family: 'Poppins-Medium';
    src: url(/frontend/web/css/fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    font-family: 'Poppins-Bold';
    src: url(/frontend/web/css/fonts/Poppins/Poppins-Bold.ttf);
}


/* Typohraphy */
a {
    font-family: var(--regular);
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1900 - 300)));
    color: black;
}

a:hover {
    text-decoration: none;
    color: var(--primary-color);
}
h1 {
    font-family: var(--medium);
    font-size: calc(24px + (60 - 24) * ((100vw - 300px) / (1900 - 300)));
}
h2,
h2 span {
    font-family: var(--medium);
    font-size:  calc(30px + (54 - 30) * ((100vw - 300px) / (1600 - 300)));
    color: black;
}
h3 {
    font-family: var(--regular);
    font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));
    color: black;
}

h3 a {
    font-family: var(--medium);
    font-size:  calc(16px + (18 - 16) * ((100vw - 300px) / (1900 - 300)));
    color: black;
}


h4  {
    font-family: var(--regular);
    font-size:  calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
    color: black;
}

p {
    font-family: var(--light);
    font-size:  calc(16px + (18 - 16) * ((100vw - 300px) / (1900 - 300)));
    color: black;
    margin: 0;
    line-height: 1.8;
}
.subtitle > * {
    font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));
    color: black;
    
}
.font-light p {
    font-family: var(--light);
}

ul {
    padding-left: 0;
}

li {
    font-family: var(--light);
    font-size:  calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color: black;
    /* list-style: none; */
}
.br-1,
.br-1 img {
    border-radius: 10px;
}
.custom-list li {
    align-items: center;
}
.custom-list li::before {
    content: '';
    width: 13px;
    height: 13px;
    border: 4px solid var(--secondary-color);
    border-radius: 100%;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 10px;
}
span {
    font-family: var(--regular);
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
    color: black;
}
.product_subtitle {
    font-family: var(--bold);
    font-size:  calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
}

body.media {
    display: block;
}
label {
    position: relative;
}
.filters {
    background-color: #e4e4e4;
}
.filter_header {
    padding-bottom: 5px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #00000070;
}
.filters label {
    opacity: 1!important;
}
.filters .form-control {
    height: 40px;
    border: 1px solid #ced4da;
}
.close_fitler {
    padding: 5px 1rem;
}
.btn.btn-primary.filter_toggler {
    min-width: 150px;
    display: flex;
    justify-content: space-between;
}
/* Custom scrollbar  */
* {
    scrollbar-width:auto;
    scrollbar-color:var(--primary-color) ;
}
::-webkit-scrollbar{
    width:16px
}

::-webkit-scrollbar-track{
    background:#fff
}
::-webkit-scrollbar-thumb{
    background-color:var(--primary-color);
    border:3px solid #fff;
	border-radius: 10px;
}

/* Elements */
.card_fickle svg {
    height: 100%;
    width: 100%;
    max-width: 40px;
    max-height: 40px;
}
.card_fickle:hover {
    transition: var(--transition-fast);
    transform-origin: right;
    rotate: 10deg;
}
.card_fickle {
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column-reverse;
    gap: 1rem;
    /* background-color: var(--primary-color); */
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid black;
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D033 0%, #C850C033 46%, #FFCC7033 100%);   
}
.text-fadein {
    bottom: 0;
}
.text-div h2{
	width: 100%;
}

.text-div h2 > *{
	position: relative;
	display: inline-block;
	top: 0;
}

.c-form-success {
    color: black;
    font-size: 24px;
}
img {
    width: 100%;
}
.btn {
    width: fit-content;
    padding: 10px 1.5rem;
    border: 1px solid transparent;
    font-family: var(--medium);
    border-radius: 50px;
}
.btn-primary {
    position: relative;
    color: black;
    font-family: var(--regular);
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1900 - 300)));
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    color: white;
    border: none;
}
.btn-primary:hover {
    background-image: linear-gradient(-43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.btn-primary::after {
    content: '\f105';
    font-family: 'FontAwesome';
    font-size: 20px;
    color: white;
}

.btn-primary:hover {
    background-color: black;
    color: var(--white);
    border-color: black;
}
.btn-primary:hover::after {
    color: var(--white);
} 
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}
.btn-primary:focus, .btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: black;
    border-color: black;
    box-shadow: initial;
}
.btn-gradient > .btn {
    background: linear-gradient(90deg, rgba(120, 94, 47, 0.5) 0%, #2F4978 100%, rgba(47, 73, 120, 0.5) 100%);
    color: var(--white);
}
.btn-gradient:hover > .btn {
    background-color: black;
}
.btn-gradient > .btn::after {
    color: var(--white);
}
.btn-secondary {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    background: transparent;
    font-family: var(--semi);
    padding: 10px 4rem;
    height: fit-content;
    transition: var(--transition-medium);
    border-radius: 50px;
}
.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transition: var(--transition-medium);
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle,
.btn-secondary.focus, .btn-secondary:focus {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
}
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
    background-color: black;
    border-color: black;
}
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: none;
}
.btn-success.focus, .btn-success:focus {
    background-color: black;
    border-color: black;
    box-shadow: none;
}
.cart-checkout-btn {
    padding: 1rem 0;
    font-size: 24px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    border-radius: 20px;
    border: none;
    font-family: var(--regular);
}
.cart-checkout-btn:hover {
    color: var(--white)!important;
}
.back-button {
    cursor: pointer;
    z-index: 999;
}
.text-white  * {
    color: var(--white)!important;
}
.text-green  * {
    color: var(--primary-color)!important;
}

.hover_image::before,
.hover_image::after {
    content: '';
    width: 100%;
    height: 100%;
    top: 15px;
    left: 15px;
    border: 1px solid var(--primary-color);
    position: absolute;
    z-index: 99;
    transition: var(--transition-medium);
}

.hover_image::after {
    bottom: 15px;
    right: 15px;
    transition: var(--transition-medium);
    top: auto;
    left: auto;
}

.hover_image:hover::before {
    top: -15px;
    left: -15px;
    transition: var(--transition-medium);
}

.hover_image:hover::after {
    bottom: -15px;
    right: -15px;
    transition: var(--transition-medium);
}

.border_light {
    border: 1px solid #00000030!important;
}

.border_y {
    border-bottom: 1px solid #00000020;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #00000020;
}
.mw-7 {
    max-width: 800px;
}
.border-right {
    border-right: 1px solid #1D2445!important;
}
.has_border {
    border: 1px solid #4978BC;
}
.has_border_bottom {
    border-bottom: 1px solid var(--purple);
}
.has_border_top {
    border-top: 1px solid #00000020;
}
.has_border_left {
    border-left: 1px solid var(--purple);
}
.border-right-light {
    border-right: 1px solid #00000020;
}
.box-shadow {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.hide {
    display: none;
}
ul {
    list-style: none;
}
.cart-heading {
    font-family: var(--medium);
    color: var(--purple);
}
/* Cookie */
#cookie_notice {
    background-color: var(--primary-color);
}

#cookie_notice .cookie_notice_container p {
    font-size: 16px;
    color: black;
}
#cookie_notice .cookie_notice_container a {
    font-family: var(--bold);
}
#cookie_notice .cookie_notice_container a:hover {
    color: black;
}
#cookie_notice .btn-cookie {
    background: black;
    padding: 5px 3rem!important;
}
/* Input & Forms */
.form-control {
    background: transparent;
    border: 1px solid gray;
    height: 50px;
}

.form-group {
    position: relative;
    height: fit-content;
}

.form-group:not(.agreement-radio) label {
    font-family: var(--regular);
}
.focus label,
.focus span {
    color: transparent;
}
#form-filter-products select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")!important;
    background-repeat: no-repeat!important;
    background-position-x: 95%;
    background-position-y: 50%;
    border: 1px solid #dfdfdf;
    border-radius: 2px;
    margin-right: 2rem;
    padding-right: 2rem;
}
textarea::placeholder,
input::placeholder {
    font-size: 18px;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + .checkbox-text:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    position: absolute;
    left: 0;
    top: 3px;
    transition: all 0.12s, border-color 0.08s;
}

input[type="checkbox"]:checked + .checkbox-text:before {
    width: 10px;
    top: -5px;
    left: 5px;
    border-radius: 0;
    opacity: 1;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
}

input[type="checkbox"] + .checkbox-text {
    cursor: pointer;
    padding-left: 30px;
}

.c-error {
    position: absolute;
    bottom: -1rem;
    left: 0;
    font-size: 12px;
}

.checkbox-text {
    font-family: var(--light);
}

.checkbox-text a {
    font-size: var(--semi);
    font-weight: 600;
}

[type="radio"]:checked, [type="radio"]:not(:checked) {
    position: absolute;
    left: 15px;
    opacity: 0;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: black;
    z-index: 1;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--purple);
    position: absolute;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    top: 0;
    transition: all 0.2s ease;
    bottom: 0;
    margin: auto;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: none;
}

/* Spacing */
.my-6 {
    margin-top:calc(40px + (90 - 40) * ((100vw - 300px) / (1600 - 300)));
    margin-bottom: calc(40px + (90 - 40) * ((100vw - 300px) / (1600 - 300)));
}

.mt-6 {
    margin-top: calc(60px + (90 - 60) * ((100vw - 300px) / (1600 - 300)));
}

.mb-6 {
    margin-bottom: calc(60px + (90 - 60) * ((100vw - 300px) / (1600 - 300)));
}

.mt-7 {
    margin-top: 30px;
}

.mb-7 {
    margin-bottom: 30px;
}

.p-6 {
    padding:calc(40px + (90 - 40) * ((100vw - 300px) / (1600 - 300)));
}
.py-6 {
    padding-top:calc(40px + (90 - 40) * ((100vw - 300px) / (1600 - 300)));
    padding-bottom: calc(40px + (90 - 40) * ((100vw - 300px) / (1600 - 300)));
}

.pt-6 {
    padding-top: calc(60px + (90 - 60) * ((100vw - 300px) / (1600 - 300)));
}

.pb-6 {
    padding-bottom: calc(60px + (90 - 60) * ((100vw - 300px) / (1600 - 300)));
}
.gap-1 {
    gap: 10px;
}

.gap-2 {
    gap: 20px;
}

.gap-2-5 {
    gap: 30px;
}

.gap-3 {
    gap: 50px;
}

.gap-4 {
    gap: 3vw;
}
.min-height-70 {
    min-height: 70vh;
}
.ml_minus {
    margin-left: -10%;
}

.pl-6 {
    padding-left: 5vw;
}

.pl-w-1 {
    padding-left: calc((100vw - 90vw) / 2);
}
.container {
    max-width: 90vw;
    width:100%;
}
.z-1 {
    z-index: 1;
}

header {
   
    width: 100%;
    z-index: 99999;
    border-bottom: 1px solid #00000020;
    padding: 5pxx 0;
    position: fixed;
    top: 0;
}

header.fixed {
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);    position: fixed;
    backdrop-filter: blur(5px);
}
header.fixed .nav-item:hover a {
    color: white;
}
header.fixed .cart:hover path {
    stroke: white;
}
header.fixed .cart:hover span {
    color: white;
}

/* Header */
.main-nav-item .nav-link {
    font-family: var(--medium);
    color: black;
}
.main-nav-item .nav-link:hover {
    color: var(--primary-color);
}
.navbar-nav {
    gap: 1rem;
}
footer {
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);
    backdrop-filter: blur(5px);
}
footer a:hover {
    color: white;
}
.logo_footer {
    max-height: 60px;
    width: fit-content;
}
.logo_footer img {
    width: 100%;
    height: 100%;
}
footer .fa {
    font-size: 24px;
    border: 1px solid black;
    padding: 5px 10px;
    border-radius: 35px;
}
/* section-1-home*/
.section-1-home .right-side {
    padding-right: 5vw;
}
.fickle-hero {
    position: unset !important;
    display: grid;
    grid-template: auto / 1fr;
    border-radius: 50%;
}
.fickle-hero .fickle-image {
        margin-bottom: unset !important;
        position: relative;
        padding-top: 100%;
        overflow: hidden;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
}
.fickle-hero .fickle-image img {
    position: absolute;
    top: 0;
    height: 100%;
    max-width: 60%;
    margin: auto;
    transform: rotate(18deg);
    max-height: unset !important;
    object-fit: contain;
}

.coffee-slider::before {
    content: '';
    border: 5px solid var(--primary-color);
    width: 87%;
    height: 87%;
    position: absolute;
    border-radius: 50%;
    bottom: 10%;
    left: 7%;
}
.coffee-slider::after {
    content: '';
    position: absolute;
    width: 75%;
    height: 75%;
    z-index: -1;
    border-radius: 50%;
    left: 13%;
    bottom: 16%;
    opacity: 0.4;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}

.section-1-home .coffee-slider {
    position: relative;
    padding-top: 50%;
}
.section-1-home .coffee-slider .slick-list {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.section-1-home .left-side .module-text {
    max-width: 700px;
}
.quality img {
    border-radius: 20px;
    max-height: 580px;
    object-fit: cover;
}
@keyframes float {
	0% {
		transform: translatey(0px);
        rotate: 18deg;
	}
	50% {
		transform: translatey(-20px);
        rotate: 24deg;
	}
	100% {
        transform: translatey(0px);
        rotate: 18deg;
	}
}

@keyframes floatStatic {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-15px);
	}
	100% {
        transform: translatey(0px);
	}
}


.fickle-hero img {
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(2px 12px 6px #00000050);
}
.slick-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    cursor: pointer;
    z-index: 1;
}
.slick-arrow svg {
    width: 40px;
    height: 40px;
}
.slick-arrow svg path {
    stroke: var(--primary-color)
}
.left-arrow {
    left: 0;
}
.right-arrow {
    right: 0;
}
.slick-disabled svg path {
    opacity: 0.3;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
.section-1-home::before {
    content: '';
    /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
    background: linear-gradient(280deg, #4158D033 0%, #C850C033 46%, #FFCC7033 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    animation: gradient 8s ease infinite;
    background-size: 200% 200%;
    left: -5vw;
    right: -5vw;
}

.section-1-home .left-side {
    display: grid;
    grid-template: auto / repeat(6, 1fr);
    row-gap: 2rem;
    column-gap: 1rem;
}
.section-1-home .left-side span {
    background-image: linear-gradient(-43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
/* .section-1-home .left-side .module-fickle:hover {
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D033 0%, #C850C033 46%, #FFCC7033 100%);   
    backdrop-filter: blur(5px);
} */
.hero_text {
    grid-column: 1/7;
}
.section-1-home .left-side .module-button {
    grid-row: 3;
    grid-column: 1/7;
}
.beans {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 15%;
    animation: floatStatic 4s ease-in-out infinite;
}
.beans.right {
    left: 75%;
}
/*  */
/* Product Loop */
.loop .breadcrumb {
    border-radius: 0;
    align-items: center;
}
.loop .breadcrumb-item.active {
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1900 - 300)));
}
.container-categories .row-subcategories {
    gap: 10px;
}
.col-subcategory a {
    padding: 5px 1rem;
    border: 1px solid;
    display: inline-block;
    border-radius: 10px;
}
.col-subcategory .active,
.col-subcategory a:hover {
    background-color: black;
    color: var(--white);
}
.loop_title {
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1600 - 300)));
    text-align: center;
    background-color: black;
    color: white;
    width: 100%;
    padding: 10px 0;
}
.pagination {
    margin-left: 15px;
    gap: 15px;
}
.pagination li a {
    width: 50px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    background-color: transparent;
    color: black;
}
.page-link:hover {
    z-index: 2;
    color: var(--white);
    text-decoration: none;
    background-color: black;
    border-color: black;
}
.pagination .prev,
.pagination .next {
    display: none;
}
.page-link:focus {
    box-shadow: none;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #000000;
    border-color: #000000;
}
.view_grid {
    display: grid;
    grid-template: 1fr / repeat(4,1fr);
    row-gap: 1rem;
}
.full_categ .view_grid {
    grid-template: 1fr / repeat(5,1fr);
}
.view_grid .categ-image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 1.5rem 1rem 3rem 1rem;
    background: linear-gradient(280deg, #4158D033 0%, #C850C033 46%, #FFCC7033 100%);
}
.price {
    color: var(--gray);
    font-size: 16px;
    text-decoration: line-through;
}
.price-online {
    font-family: var(--regular);
    color: var(--green);
}
.view_grid .add-to-cart {
    background: transparent;
    padding: 5px 5px;
}
.view_grid .add-to-cart:hover {
    border-color: transparent;
}
.view_grid .add-to-cart:hover svg path{
    stroke: #1e7e34;
}
.categ-title-loop {
    background: #fdf1d0;
    border-radius: 10px;
    max-width: 80%;
    margin: auto;
    position: relative;
    top: -30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 5px 0;
}
.view_grid .product-stock a {
    font-size: 13px;
    color: black;
    border: 1px solid black;
    padding: 5px;
    border-radius: 5px;
}
.onsale-discount span { 
    font-size: 16px;
    padding: 4px 1rem;
    background-color: black;
    color: var(--white);
    border-radius: 50px;
}
.product-stock {
    font-family: var(--regular);
    z-index: 1;
    display: flex;
    align-items: center;
    min-height: 31.5px;
    position: absolute;
    right: 0;
    background-color: var(--primary-color);
    padding: 5px 1rem;
    border-radius: 10px 0 0 10px;
    top: 20px;
}

.categories-item-wrapper figure {
    position: relative;
    padding-top: 80%;
}
.categories-item-wrapper img {
    transition: var(--transition-medium);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.categories-item-wrapper:hover img {
    scale: 1.05;
    transition: var(--transition-medium);
}
.divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: auto;
    width: 100%;
    height: calc(100% - 150px);
    bottom: 0;
    /* background: linear-gradient(180deg, rgba(120, 94, 47, 0.5) 0%, rgba(47, 120, 94, 0.5) 100%); */
    background: #C1BFB1;
}
.divider .text {
    grid-row: 2/3;
    grid-column: 1/2;
    align-self: center;
}
.divider_wrapper {
    display: grid;
    grid-template: 150px 1fr / 1fr 1fr;
    gap: 1rem;
}
.divider_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

.divider_wrapper.reverse .text {
    grid-column: 2/3;
}
.divider_wrapper.reverse .module-image {
    grid-column: 1/2;
    grid-row: 1/3;
}
.divider_wrapper .module-image {
    grid-column: 2/3;
    grid-row: 1/3;
    justify-self: center;
}
.divider_wrapper .module-image {
    max-width: 400px;
}
/* Cart box */
#cart-message-box {
    border-radius: 10px 0 0 0;
    z-index: 1000099;
    position: fixed;
    /* background-color: #C1BFB199; */
    background: #C1BFB1;
    backdrop-filter: blur(25px);
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);
}
#cart-message-box span {
    color: black;
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1600 - 300)));
}
#cart-message-box b {
    color: black;
}
.btn-cart-box {
    padding: 10px 1rem;
    background-color: black;
    color: white;
    border-radius: 10px;
    border: 1px solid black;
}
.btn-cart-box:hover {
    color: var(--white);
}
.btn-cart-box.btn-cart-box-secondary {
    background: transparent;
    border: 1px solid black;
    color: black;
}
.btn-cart-box.btn-cart-box-secondary:hover {
    background-color: black;
    color: var(--white);
}
/* Single product */
.image-container {
    display: grid;
    grid-template: auto / 1fr 9fr;
    gap: 10px;
}
.gallery-wrapper {
    max-height: 100%;
    overflow: auto;
    gap: 10px;
}
.product-gallery-main-image {
    position: relative;
    padding-top: 100%;
    border-radius: 10px;
}
.product-gallery-main-image img {
    position: absolute;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
    inset: 0;
    padding: 10%;
}
.gallery-img {
    padding-top: 120%;
    position: relative;
    border-radius: 10px;
}
.gallery-img img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 0 10%;
    object-fit: contain;
    width: 100%;
    height: 100%;
}
.image-container .onsale-discount {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 1;
}
.image-container .product-stock {
    position: absolute;
    top: 25px;
    right: 25px;
}
.breadcrumb {
    padding: 0;
    background-color: transparent;
}
.product-summary h1 {
    font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));
    margin: 0;
}
ul .variation-item {
    flex-direction: column;
    border: none;
}
ul .variation-item .img_wrapper {
    padding-top: 120%;
    position: relative;
    background-color: #00000009;
}
.product-variations {
    gap: 10px;
    flex-wrap: wrap;
}

ul .variation-item .img_wrapper:hover img {
    padding: 5%;
    transition: var(--transition-fast);
}
ul .variation-item img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    padding: 10%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition-fast);
}
.product-variations li a {
    padding: 0;
    text-transform: none;
}
.product-variations li.selected a {
    background-color: black;
    color: var(--white);
}
.culori li {
    max-width: 100px;
    width: 100%;
}
.product-summary label {
    font-size: 18px;
    font-family: var(--regular);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.marimi .img_wrapper {
    display: none;
}
.marimi li a {
    padding: 10px 1rem;
    border: 1px solid;
}
.marimi li a:hover {
    background-color: black;
    color: var(--white);
}
.product-summary .add-to-cart {
    width: 100%;
    border-radius: 10px;
    /* background-color: var(--purple); */
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    padding: 1rem 0;
    border: none;
}
.product-summary-main-title {
    border-top: 1px solid black;
    margin-top: 1rem;
}
.summary-main-title-right {
    border-bottom: 1px solid;
    padding-bottom: 1rem;
}
.product-details .fa-angle-down {
    font-size: 20px;
    rotate: 0deg;
    transition: var(--transition-medium);
}
.product-details .btn-link.active .fa-angle-down {
    rotate: 180deg;
    transition: var(--transition-medium);
}
.card-header {
    padding: 0;
    background-color: transparent;
    border: none;
}
.product-details .btn {
    padding: 1rem 0;
    font-size: 24px;
    font-family: var(--regular);
}
.product-details .card {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--purple);
    border-radius: 0;
}
.product-details .card-body {
    padding: 0 0 1rem 0;
}
.product-details .card-body p {
    font-family: var(--light);
}
.related-product h4 {
    font-size: calc(24px + (34 - 24) * ((100vw - 300px) / (1600 - 300)));
}
.sku {
    font-size: 16px;
}
.related-product .row-products-list {
    width: 100%;
}
.related-product .filters {
    display: none;
}
.related-product .products-grid {
    max-width: 100%;
    flex: 0 0 100%;
}
.single-product-row .price {
    font-size: 24px;
}
.single-product-row .price-online {
    font-size: 20px;
}
/* Cart box */
.cart-message-box-buttons {
    margin: 5px 0;
    display: flex;
    gap: 1rem;
}
.checkout_btn {
    padding: 7px 15px;
    background: black;
    border-radius: 50px;
}
.cart-message-box-buttons .checkout_btn {
    color: white;
}
.keep_shopping {
    color: black;
    border: 1px solid black;
    border-radius: 50px;
    padding: 6px 15px;
}
.checkout_btn:hover {
    background-color: var(--purple);
    color: black;
}
.keep_shopping:hover {
    background-color: black;
    color: white;
}
.cart {
    margin-left: 1rem;
    flex-shrink: 0;
}
.cart a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}
.cart span {
    font-family: var(--medium);
    font-size: calc(16px + (16 - 16) * ((100vw - 300px) / (1600 - 300)));
}

.cart:hover path {
    stroke: var(--primary-color);
}
.cart:hover span {
    color: var(--primary-color);
}
/*-------------------------------------------------- Cart --------------------------------------------------*/
.cart-page__container {
    border-bottom: 1px solid var(--purple);
    padding-bottom: 1rem;
  }
  .cart__container .btn-primary {
    width: 100%;
  }

  .cart-page__container .cart-title {
    font-family: var(--regular);
    text-align: center;
  }
  .cart-page__container .cart-content {
    border-right: 1px solid var(--purple);
  }

  .cart-content-heading ul {
    list-style: none;
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 50px;
    padding: 20px 0;
    border-bottom: 1px solid var(--purple);
  }

  .cart-content-heading ul #cart-content-product {
    width: 100%;
    font-family: var(--light);
    font-size: 16px;
  }

  .cart-content-heading ul #cart-content-price {
    max-width: 200px;
    width: 100%;
    font-family: var(--light);
    font-size: 16px;
  }

  .cart-content-heading ul #cart-content-quantity {
    max-width: 150px;
    width: 100%;
    font-family: var(--light);
    font-size: 16px;
  }

  .cart-item-inner {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr;
    gap: 1rem;
  }

  .cart-item-inner .cart-item-product-group {
    display: flex;
    flex-direction: row;
    width: 100%;
  }

  .cart-item-inner .cart-item-product-group figure {
    max-width: 100px;
    width: inherit;
    height: 100px;
    margin: 0;
    padding: 10px;
    border: 1px solid #cdd0d3;
    border-radius: 10px;
    position: relative;
    padding-top: 10%;
  }

  .cart-item-inner .cart-item-product-group figure img {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    object-fit: contain;
    height: 100%;
  }

  .cart-item-inner .cart-item-product-group .item-action {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
  }



  .cart-item-inner .cart-item-product-group .item-action a {
    font-family: var(--regular);
    color: black;
    height: auto;
    margin: auto 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }

  .cart-item-inner .cart-item-product-group .item-action span {
    color: black;
  }
  .cart-item-inner .cart-item-product-group .item-action button {
    height: fit-content;
    margin: auto 0;
    padding: 0;
    font-family: var(--regular);
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    border: none;
    outline: none !important;
    box-shadow: none !important;
    width: fit-content;
    color: var(--primary-color);
    background-color: transparent;
  }

  .cart-item-inner .cart-item-product-group .item-action button i {
    margin-right: 5px;
  }

  .cart-item-inner .cart-prod-price {
    max-width: 200px;
    width: 100%;
    font-family: var(--regular);
    color: black;
    margin: auto;
  }
  .quantity-input-group {
    gap: 10px;
  }
  .input-product-quantity {
    background: transparent;
    border: none;
    font-size: 20px;
    max-width: 40px;
    text-align: center;
  }
  .btn-qantity-change {
    border: none;
    display: flex;
    align-items: center;
    background-color: transparent;
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
    input[type=number] {
    -moz-appearance: textfield;
  }
  .cart-item-inner .item-qty {
    max-width: 150px;
    width: 100%;
    display: flex;
    margin: auto 0;
  }
  .cart-item-inner .item-qty input {
    font-family: var(--regular);
    font-size: 18px;
    border: 1px solid var(--primary-color);
    color: var(--gray);
    text-align: center;
    height: fit-content;
    width: 50px;
    margin: auto;
  }
  .builder-section .cart-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--purple);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    font-size: 24px;
    font-family: var(--medium);
    color: var(--purple);
  }
  .builder-section .cart-title span {
    font-size: 24px !important;
    color: var(--purple);
  }
  .cart-item {
    margin-bottom: 50px;
  }
  .cart__container .cart-heading {
    padding: 20px;
    font-size: 24px;
    font-family: var(--regular);
    line-height: 1.5;
    background-color: var(--purple);
    color: var(--white);
    border-radius: 20px;
  }
  .cart__container hr {
    display: none;
  }
  .cart__container .cart-sumar-details {
    display: flex;
    flex-direction: column;
    width: fit-content;
    width: 100%;
  }
  .cart__container .cart-sumar-details .cart-sumar-details__products,
  .cart__container .cart-sumar-details .cart-sumar-details__yellowucere,
  .cart__container .cart-sumar-details .cart-sumar-details__taxes,
  .cart__container .cart-sumar-details .cart-sumar-details__total {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--purple);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .cart__container
    .cart-sumar-details
    .cart-sumar-details__products
    span:first-of-type,
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__yellowucere
    span:first-of-type,
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__taxes
    span:first-of-type,
    .cart-sumar-details__reducere span:first-of-type {
    font-family: var(--regular);
    font-size: 16px;
    height: fit-content;
    margin: auto 0;
    color: var(--gray);
  }
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__products
    span:last-of-type,
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__yellowucere
    span:last-of-type,
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__taxes
    span:last-of-type {
    font-size: 18px;
    text-transform: unset;
  }
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__total
    span:first-of-type {
    text-transform: uppercase;
    font-family: var(--bold);
    font-size: 24px;
    letter-spacing: 2.8px;
    height: fit-content;
    margin: auto 0;
  }
  .cart__container
    .cart-sumar-details
    .cart-sumar-details__total
    span:last-of-type {
    font-family: var(--bold);
    font-size: 24px;
    color: black;
  }
  .empty-cart {
    margin-top: 5vh;
  }
  .empty-cart a {
    background-color: var(--primary-color) !important;
    border: none;
    padding: 10px 20px;
    font-family: var(--regular);
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 10px;
    letter-spacing: 1px;
    outline: none !important;
    box-shadow: none !important;
    margin-inline: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .summary-items span {
    color: gray;
    font-family: var(--light);
  }
  /* Contact */
.contact-form label { 
    display: none;
}
#gmap_canvas {
    width: 100%;
    min-height: 300px;
}
.map_sec {
    display: grid;
    grid-template: auto / repeat(2, 50%);
    height: fit-content;
    row-gap: 5px;
    padding-right: 5vw;
}
.maps {
    grid-column: 1/3;
}
.map_sec .module-fickle {
    grid-column: 1/2;
}
.map_sec .module-social {
    grid-row: 2/3;
    grid-column: 2/3;
    display: flex;
    justify-content: flex-end;
}
.contact_wrapper label:not(.item-acceptance label) {
    display: none;
}
.contact_wrapper,
.privacy-policy,
.terms-and-conditions {
    background: linear-gradient(280deg, #4158D033 0%, #C850C033 46%, #FFCC7033 100%);
    animation: gradient 8s ease infinite;
    background-size: 200% 200%;
}
.contact_form {
    border-right: 1px solid #00000040;
}
.map_sec .fa {
    font-size: 20px;
}
.map_sec a:hover {
    color: white;
}
.map_sec .module-fickle:hover path {
    fill: white;
}
.contact_form {
    padding-left: 5vw;
}
.quality_grid {
    display: grid;
    grid-template: auto / repeat(4,1fr);
    gap: 1rem;
}
.col_5 {
    grid-column: 1/5;
}
/* About us */
/* .about_us {
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);
    backdrop-filter: blur(5px);
} */
.about_us {
    border-bottom: 1px solid #00000020;
    background: rgb(255,192,203, .3);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);
    backdrop-filter: blur(5px);
}
.about_us .module-text {
    max-width: 700px;
}
.story_cards {
    display: grid;
    grid-template: 1fr / 1fr 1fr;
    gap: 2rem;
    position: relative;
}
.story_cards::before {
    content: '';
    position: absolute;
    left: -5vw;
    width: calc(100% + 10vw);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);
    height: 100%;
}
.story_cards .module-fickle {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-color: white;
    backdrop-filter: blur(5px);
    padding: 1.5rem;
    position: relative;
    max-width: 95%;
    text-align: center;
}
.timeline_wrapper {
    grid-column: 2/3;
    position: relative;
}
.story_cards .timeline_wrapper::before {
    content: '';
    width: 30px;
    background-color: black;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    z-index: 2;
    margin: auto;
} 
.story_cards .timeline_wrapper::after {
    content: '';
    width: 2px;
    background: white;
    height: calc(100% + 2rem);
    right: 0;
    position: absolute;
    z-index: 1;
    left: 15px;
}

.story_cards .fickle-image {
    order: -1;
    position: relative;
    padding-top: 80%;
}
.story_cards img {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: 100%;
    width: fit-content;
    margin: auto;
    border-radius: 10px;
}
.story_cards > div:nth-last-of-type(odd) {
    grid-column: 1/2;
    padding: 0;
}
.story_cards > div:nth-of-type(even) {
    padding: 0;
    grid-column: 2/3;
}

.story_cards > div:nth-of-type(2) {
    grid-row: 2/3;
}

.story_cards > div:nth-of-type(3) {
    grid-row: 3/4;
}
.story_cards .reverse .timeline_wrapper::before {
    left: auto;
}
.story_cards .reverse .timeline_wrapper::after {
    left: -17px;
}
.story_cards .fickle-subtitle {
    background: black;
    width: fit-content;
    color: white;
    padding: 5px 6vw;
    border-radius: 170px;
    position: absolute;
    top: -20px;
    z-index: 2;
    right: 0;
    left: 0;
    margin: auto;
    font-family: var(--medium);
}

@media (min-width: 991px) {
    .right-padding {
        padding-right: 5vw;
    }
}


.s8_clients {
    padding: 10vw 0;
    position: relative;
  }
  
  
  .slick-arrow svg:hover {
    transform: scale(1.3);
    transition: all .2s linear;
  }
  
  .slick-arrow svg {
    transition: all .2s linear;
  }
  
  .clients_testimonials {
    padding-right: 0;
  }
  
  .text_testimonials {
    padding-left: 5vw;
  }
  
  .clients_testimonials .slick-track {
    display: flex;
  }
  .clients_testimonials .slick-slide {
    transition: .5s ease-in-out;
    height: inherit !important;
  }
  .clients_testimonials .slick-slide:not(.slick-center) {
    opacity: .2;
  }
  
  .clients_testimonials .slick-arrow {
    position: absolute;
    height: auto;
    bottom: -50px;
    cursor: pointer;
  }
  .clients_testimonials .slick-arrow-left {
    left: 0;
  }
  .clients_testimonials .slick-arrow-right {
      right: 0;
    }
    .clients_testimonials .slick-arrow-secondary {
        background-color: transparent;
        border: none;
        outline: none!important;
    }
  
  .fickle-testimoniale {
    display: grid !important;
    /* grid-template-columns: 30% 70%; */
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto auto;
    grid-column-gap: 20px;
    border-radius: 10px;
    padding: 40px;
    height: 100%;
    width: 100%;
    position: unset;
    margin: 0 10px;
    background-color: var(--complementary-color);
    background-image: linear-gradient(280deg, #4158D066 0%, #C850C066 46%, #FFCC7066 100%);
  }
  
  .fickle-testimoniale .fickle-image {
    grid-column: 1/2;
    margin-bottom: unset;
    grid-row: 1/3;
    height: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  
  .fickle-testimoniale .fickle-image img {
    position: absolute;
    top: 0;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
  }
  .fickle-testimoniale .fa-star {
    color: gold;
  }
  .fickle-testimoniale .fickle-text-content {
    grid-column: 1/3;
    grid-row: 3/4;
    height: 100%;
    width: 100%;
    margin-top: 20px;
  }
  .fickle-testimoniale .fickle-text-content p {
    margin-bottom: 0;
  }
  
  .fickle-testimoniale .fickle-additional-html-code {
    grid-column: 2/3;
    grid-row: 2/3;
    margin-top: 10px;
  }
  
  .fickle-testimoniale .fickle-additional-html-code .gap {
    gap: 10px;
    max-width: 100%;
  }
  
  .fickle-testimoniale .fickle-additional-html-code svg {
    max-height: 30px;
  }
  
  .fickle-testimoniale .fickle-item.fickle-title {
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: flex-end;
  }
  .fickle-testimoniale .fickle-title {
    margin-bottom: 0;
  }
  .anpc img {
    max-width: 250px;
  }