/* ---__MODIFIER CLASSES__-- */
.container {max-width: var(--container-size-2xl); margin-inline: auto; padding-inline: var(--container-padding);}
.btn__primary {font-size: var(--fs-base); font-weight: 400; letter-spacing: .3px; display: flex; align-items: center; justify-content: center; color: #fff; background-color: var(--c-primary); padding: 5px 20px; border-radius: 4px; position: relative; overflow: hidden; z-index: 1; transition: var(--transition);} 
.btn__primary::before {content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: #011f2d; transition: left 0.4s ease-in-out; z-index: -1;}
.btn__primary:hover::before {left: 0;}
.scrollbar {overflow: auto; padding-right: 5px;}
.scrollbar::-webkit-scrollbar {width: 3px;}
.scrollbar::-webkit-scrollbar-thumb {background-color: #000;}
.scrollbar::-webkit-scrollbar-track {width: 5px; background-color: transparent;}


@font-face {
    font-family: "Cabin";
    src: url("../fonts/Cabin-VariableFont_wdth\,wght.ttf");
    font-weight: 400 800;
    font-display: swap;
}


:root{
    /* CONTAINER MAX-WIDTH */
    --container-size-2xl : 1400px;
    --container-size-xl : 1280px;
    --container-size-lg : 1110px;
    --container-size-md : 900px;
    --container-padding : 15px;
    /* COLORS */
    --c-primary : #0062ee; 
    --c-secondary : #e71d36;
    --c-third : #dd1d1d;
    --c-light-bg : #f5f5f5;
    /* FONT */
    --ff-primary : "Cabin", system-ui, sans-serif;
    --fs-xl : clamp(1.75rem, 1.4286rem + 1.4286vw, 2.5rem);  /* 28px - (360px/1200px) - 40px  */
    --fs-lg : clamp(1.375rem, 0.9471rem + 1.9017vw, 2.125rem);  /* 22px - (360px/991px) - 34px  */
    --fs-md : clamp(1rem, 0.7147rem + 1.2678vw, 1.5rem); /* 16px - (360px/991px) - 24px  */
    --fs-base : clamp(0.875rem, 0.8037rem + 0.317vw, 1rem);   /* 14px - (360px/991px) - 16px  */
    --fs-xs : clamp(0.8125rem, 0.7768rem + 0.1585vw, 0.875rem);  /* 13px - (360px/991px) - 14px  */
    /* SHADOW */
    --box-shadow : 0 6px 12px -12px rgba(18, 18, 18, 0.6);
    /* Extra */
    --transition: all 0.3s ease;
}

@media only screen and (max-width: 1400px) {
    .container {max-width: var(--container-size-xl);}
}
@media only screen and (max-width: 1200px) {
    .container {max-width: var(--container-size-lg);}
}
@media only screen and (max-width: 991px) {
    .container {max-width: var(--container-size-md);}
}


/* DARK COLOR FOR FOOTER */

header {
    --_c-light-green : #00d964;
}

header, footer, .blog, .faq-qna, .filter, .cartPage, .address, .contact-form, .forgot-Password, .customerReview, .contact-form {
    --_c-border : #00000012;
    --_c-shadow : 0 0 0 1px #0000000d;
    --_c-primary-filter : brightness(0) saturate(100%) invert(24%) sepia(38%) saturate(5477%) hue-rotate(207deg) brightness(101%) contrast(106%);
    --_c-secondary-filter : brightness(0) saturate(100%) invert(20%) sepia(84%) saturate(4523%) hue-rotate(343deg) brightness(93%) contrast(95%);
    --_c-secondary-shadow : 0 0 0 2px #0000000d;
    --_c-third-shadow : 2px 2px 5px rgba(18, 18, 18, 0.1), -2px -2px 5px rgba(18, 18, 18, 0.1);
}

footer, .time, .cartBox {
    --_c-bg : #011f2d;
    --_c-primary : #ffffffBF;
    --_c-footer-border : #ffffff1a;
}

.testimonial {
    --_c-light-filter : brightness(0) saturate(100%) invert(73%) sepia(47%) saturate(698%) hue-rotate(341deg) brightness(103%) contrast(101%);
}

.blog {
    --_c-blog-border : #00000033;
}

.sale, .cartPage {
    --_c-bg-green : #22750e; 
    --_c-bg-red : #dd1d1d;
}

.faq-qna {
    --_c-faq-border : #ecedec;
    --_c-faq-bg : #f4f4f4;
}
.filter {
    --_c-fire-brick : #b22222;
    --_c-box-shadow :  0 0 0 3px rgb(255, 255, 255) inset;
    --_c-dark-box-shadow : 0 0 0 3px rgb(0,0,0,.2) inset;
}

.carousel, .cartPage, .address, .contact-banner, .contact-form, .forgot-Password, .register {
    --_c-font-color :  #757575;
    --_c-dark : #0b1613;
    --_c-product-border : #0000001A;
    --_c-dark-red: #f11b1b;
    --_c-bar-bg: #e2dfdf;
    --_c-dark-color : #191919;
    --_c-btn-shadow : 0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);
}
.cartPage {
    --_c-yellow-bg : #ffe23c;
    --_c-light-filter : brightness(0) saturate(100%) invert(45%) sepia(0%) saturate(0%) hue-rotate(338deg) brightness(101%) contrast(93%);
    --_c-hover-dark : #dbdbdb;
}
.contact-banner, .contact-form {
    --_c-secondary-gradient : #fafafa;
    --_c-gradient-bg : linear-gradient(120deg, rgba(244, 244, 244, 1), rgba(239, 179, 76, 0.51) 100%);
    --_c-third-gradient : linear-gradient(320deg, rgba(232, 74, 147, 1) 4%, rgba(239, 179, 76, 1) 100%);
    --_c-contact-border : #ecedec;
    --_c-red-filter : brightness(0) saturate(100%) invert(22%) sepia(51%) saturate(6768%) hue-rotate(350deg) brightness(93%) contrast(103%);
}