/* RESET STYLING */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-secondary); font-weight: 400; line-height: var(--lh-base, 24px); overflow: hidden; overflow-y: auto; -webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6 {margin: 0; font-family: var(--ff-primary); font-weight: 700; color: var(--c-heading); text-transform: uppercase; transition: var(--trans-4);}
ul, ol {margin: 0; padding: 0;}
li {list-style: none; font-size: var(--fs-base, 16px);}
p {margin: 0; font-size: var(--fs-base, 16px); color: var(--c-text); transition: var(--trans-4);}
a {width: fit-content; display: block; font-size: var(--fs-base, 16px); font-weight: 500; text-decoration: none; color: var(--c-heading);}
p a {display: inline; font-weight: 500;}
button {font-size: var(--fs-base, 16px); background-color: transparent; color: #fff; border: none; cursor: pointer;}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic; font-size: var(--fs-2xs, 14px);}
picture {display: block;}
svg {vertical-align: middle;}

input, textarea, select {width: 100%; font-size: var(--fs-base, 16px); line-height: var(--lh-lg, 50px); color: var(--c-text); padding-inline: 10px; border: 1px solid var(--_c-br); border-radius: 25px;}
select {color: #000; appearance: none;}
input::placeholder, textarea::placeholder {color: var(--c-text);} 
input:focus, textarea:focus, select:focus {outline: none;}
input[type="number"]::-webkit-inner-spin-button, 
input[type="search"]::-webkit-search-cancel-button {appearance: none;}
textarea {resize: none;}

/* MODIFIER CLASES */
.container {max-width: var(--container-size); margin-inline: auto; padding-inline: var(--container-padding);}
.btn__primary {display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-secondary); font-weight: 500; line-height: var(--lh-md, 34px); text-transform: capitalize; color: var(--c-heading); background-color: var(--c-primary); padding: 13px 30px 13px; border-radius: var(--br-base, 10px);    transition: var(--trans-5); overflow: hidden; z-index: 2; text-align: center; position: relative;}
.btn__primary:hover {color: #fff;}
.btn__primary img {transition: var(--trans-5); filter: var(--c-filter-primary);}
.btn__primary:hover img {filter: invert(1);}
.btn__primary::before {width: 100%; background-color: var(--c-heading); position: absolute; top: 0; left: 0; right: 0; bottom: 0; clip-path: circle(0% at 50% 50%); transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 0.8s; z-index: -1; content: "";}
.btn__primary:hover::before {clip-path: circle(100% at 50% 50%); transition: all cubic-bezier(0, 0.96, 0.58, 1.1) 4s;}

@media only screen and (max-width: 576px) {
    .btn__primary {gap: 5px; padding: 8px 22px 8px;}
}

/* Scrollbar */

 
/* FONT FAMILIES */
@font-face {
    font-family: 'InterTight';
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/InterTight.woff2'), 
        url('../fonts/InterTight.ttf'); 
}
@font-face {
    font-family: "Roboto";
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/Roboto.woff2"),
        url("../fonts/Roboto.ttf");
}

 
/* VARIABLES */
:root {
    /* Container Max-Width */
    --container-size: 1320px;
    --container-size-lg: 1140px;
    --container-size-md: 960px;
    --container-padding: 15px; /* Container Left-Right Padding */
    /* Font Families */
    --ff-primary: 'InterTight', system-ui, sans-serif; 
    --ff-secondary: 'Roboto', system-ui, sans-serif;
    /* Font-Sizes */
    --fs-2xl: clamp(4.0625rem, 3.0889rem + 4.3269vw, 6.875rem);           /* 65px - (360/1400) - 110px */
    --fs-xl: clamp(3.4375rem, 3.2212rem + 0.9615vw, 4.0625rem);           /* 55px - (360/1400) - 65px */
    --fs-lg: clamp(2.8125rem, 2.5446rem + 1.1905vw, 3.4375rem);           /* 45px - (360/1200) - 55px */
    --fs-md: clamp(1.875rem, 1.4732rem + 1.7857vw, 2.8125rem);            /* 30px - (360/1200) - 45px  */
    --fs-sm: clamp(1.5rem, 1.2861rem + 0.9509vw, 1.875rem);               /* 24px -  (360/991) - 30px */
    --fs-xs: clamp(1rem, 0.7147rem + 1.2678vw, 1.5rem);                   /* 16px -  (360/991) - 24px */
    --fs-base: clamp(0.875rem, 0.7644rem + 0.4914vw, 1rem);               /* 14px -  (360/991) - 16px */
    --fs-2xs: clamp(0.8125rem, 0.7078rem + 0.4651vw, 0.875rem);           /* 13px -  (360/991) - 14px */
    /* Line Heights  */         
    --lh-xl: 55px;  
    --lh-lg: 50px;   
    --lh-md: 34px;      
    --lh-sm: 28px;       
    --lh-base: 24px;   
    --lh-none: 1;           /* 18px */
    /* Colors */
    --c-primary : #FFB51D;
    --c-text : #868689;
    --c-heading : #131222;
    --c-filter-primary : brightness(0) saturate(100%) invert(6%) sepia(8%) saturate(4151%) hue-rotate(205deg) brightness(98%) contrast(96%); /* --c-heading */
    --c-filter-secondary:  brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(2442%) hue-rotate(342deg) brightness(104%) contrast(101%); /* --c-primary */
    /* Transitions */
    --trans-5: 0.5s ease-in-out;
    --trans-4: 0.4s ease-in;
    --trans-3: 0.3s ease-in; 
    /* Border */
    --br-base: 10px;
}

/* Responsive Variable */

@media only screen and (max-width: 1200px) {
    :root {
        --container-size: var(--container-size-lg);
        --lh-xl: 50px;
        --lh-lg: 34px;
        --lh-md: 28px;
    }
}

@media only screen and (max-width: 991px) {
    :root {
        --container-size: var(--container-size-md);
        --lh-xl: 34px;
        --lh-sm: 24px;
        --lh-base : 20px;
    }
}

@media only screen and (max-width: 576px) {
    :root {
        --container-padding: 10px;
    }
 
}

/* PRIVATE VARIABLES */
input, textarea, select, .premium, .blog, .brand, .reviews, .categories, .version, .overview, .easy, .cart, .blog-page, .testimonial {
    --_c-br : #D9D9D9;
}
header, .checkout, .categories, .overview, .check, .checkout-page, .cart {
    --_c-shadow : 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
    --_c-a-br : #1312221a;
}
.service, .faq, .premium, .choose, .blog, .blog-page {
    --_c-bg : #ffb51d61;
}
.about, .blog, .overview, .blog-page {
    --_c-bar : #E3E3E3;
}
.process, .choose, .blog-detail {
    --_c-icon-br : #ffb51d33;
}
.blog, .checkout, .categories, .blog-page {
    --_c-shadow : 0px 10px 20px 0px rgb(0 0 0 / 7%);
    --_c-blog-after :#13122299;
}
.checkout, .categories, .blog-detail {
    --_c-filter-img : brightness(0) saturate(100%) invert(57%) sepia(2%) saturate(358%) hue-rotate(202deg) brightness(92%) contrast(95%); /* --c-text */
}
.categories, .cart, .contact-info {
    --_c-category-bg : #eeeff2b3;
    --_c-filter-star : brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(54%) hue-rotate(314deg) brightness(100%) contrast(92%);
}
.version {
    --_c-bg-li : #ffb51d26;
}
.car-detail {
    --_c-dots-after : #13122266;
}
.overview {
    --_c-reveal : #e3e3e380;
    --_c-reveal-phara : #636A80;
    --_c-kevin : #767E94;
    --_c-filter-gr : brightness(0) saturate(100%) invert(46%) sepia(84%) saturate(1016%) hue-rotate(72deg) brightness(101%) contrast(104%);
}
.cart {
    --_c-table : #dee2e6;
}


/* BANNER CSS */
.category-banner {background-color: var(--c-heading); overflow: hidden; position: relative; z-index: 1;} 
.category-banner .banner-img {width: 100%; background: no-repeat center / cover url("../images/home-slider1.webp"); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.2;}
.category-banner .moving-car {height: 87px; position: absolute; bottom: 0; left: 0; right: 0; background-image: url("../images/banner-car.webp"); background-repeat: no-repeat; animation: slider 50s linear infinite; -webkit-animation: slide 50s linear infinite;}
.category-banner .content {padding-block: 158px 167px; position: relative; z-index: 10;}
.category-banner .content > :first-child {font-size: calc(var(--fs-xl, 65px) - 5px); font-weight: 700; text-transform: uppercase; line-height: 1.3em; color: #fff; margin-bottom: 18px;}
.category-banner .content ul {display: flex; align-items: center; justify-content: start; gap: 8px;}
.category-banner .content li > :first-child {font-size: calc(var(--fs-base, 16px) - 1px); font-weight: 600; line-height: 18px; text-transform: uppercase; font-family: var(--ff-primary); color: #fff; transition: var(--trans-5);}
.category-banner .content li a:hover {color: var(--c-primary);}
.category-banner .content ul > :not(:first-child) {position: relative; padding-left: 15px;}
.category-banner .content ul > :not(:first-child)::after {width: 7px; height: 12px; background: no-repeat center / cover url("../images/icons/chevron-right.svg"); filter: var(--c-filter-secondary); position: absolute; inset: 0; margin-right: auto; margin-block: auto; content: "";}

@keyframes slide {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 1920px 0;
    }
}

@media only screen and (max-width: 576px) {
    .category-banner .content {padding-block: 123px;}
    .category-banner .content > :first-child {font-size: 45px; margin-bottom: 10px;}
}

@media only screen and (max-width: 360px) {
    .category-banner .content > :first-child {font-size: 32px; margin-bottom: 3px;}
}