/**Index Page css***/

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@keyframes scroll-products {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.carousel-track {
    display: flex;
    gap: 1.5rem;
    width: max-content;
    animation: scroll-products 40s linear infinite;
    will-change: transform;
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes rotateLogo {

    0%,
    15% {
        transform: rotateY(0deg);
    }

    25%,
    40% {
        transform: rotateY(360deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes scroll-brands-row {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.brands-scroller {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.brands-track-inner {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: scroll-brands-row 35s linear infinite;
    padding-block: 1rem;
}

.brands-track-inner:hover {
    animation-play-state: paused;
}

.brand-box {
    perspective: 1000px;
    width: 180px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    opacity: 0.6;
    transition: all 0.4s ease;
    font-size: 1.125rem;
    filter: grayscale(100%);
    transform-style: preserve-3d;
}

.brand-box:hover .brand-logo-content {
    opacity: 1;
    color: #FFD700;
    filter: grayscale(0%);
    transform: scale(1.05);
}

.brand-logo-content .material-icons {
    font-size: 2rem;
}

html {
    scroll-behavior: smooth;
}


.material-icons.arrow {
    transition: transform 0.3s ease;
}

.tab-content {
    display: none;
}

#tab-all:checked~.tabs-container #content-all,
#tab-new:checked~.tabs-container #content-new,
#tab-best:checked~.tabs-container #content-best,
#tab-sale:checked~.tabs-container #content-sale {
    display: block;
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#tab-all:checked~.tabs-header label[for="tab-all"],
#tab-new:checked~.tabs-header label[for="tab-new"],
#tab-best:checked~.tabs-header label[for="tab-best"],
#tab-sale:checked~.tabs-header label[for="tab-sale"] {
    background-color: white;
    color: #1a1a1a;
    font-weight: 700;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dark #tab-all:checked~.tabs-header label[for="tab-all"],
.dark #tab-new:checked~.tabs-header label[for="tab-new"],
.dark #tab-best:checked~.tabs-header label[for="tab-best"],
.dark #tab-sale:checked~.tabs-header label[for="tab-sale"] {
    background-color: #374151;
    color: white;
}

/****productlisting*****/

input[type="checkbox"] {
    cursor: pointer;
    transition: all 0.2s ease-in-out
}

input[type="checkbox"]:hover {
    border-color: #FFD700;
    background-color: #fefce8;
}

input[type="checkbox"]:checked {
    background-color: #FFD700;
    border-color: #FFD700;
    color: black;
    background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuBLxqkRrMOSRz4NcuJAAIhufhDQduHwXfRlCAzRUk8S-E9JjFlDZ__vNAX-CGZ6RoC0X-1TUlN2MGE5OYTmMXGlrmRb6QJ2e0vdiqLnBgu0SPr12_kMUyW_EgkbWL63bTH3963D_YoVSa0LWsgjCNKU00Ar3D5-vd2JdIq8M8M2jQuRMdFsVLH0wH3PS2BuMn6QSlwsnVIZ0M3WVkAKQmPYbKg4FA4gxj2GZ4qO0AC7ht94VM-jHRjfrZjef_uOIXxCfqVUisl9Tv5-)
}

input[type="checkbox"]:focus {
    --tw-ring-color: #FFD700;
    --tw-ring-opacity: 0.5
}

.range-thumb {
    cursor: grab
}

.range-thumb:active {
    cursor: grabbing
}

/****About us*****/

:root {
    --wattkart-yellow: #ffc107;
    --charcoal-black: #111827;
    --dark-gray: #374151;
    --soft-gray: #f3f4f6;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-272px * 7));
    }
}

.slider {
    display: flex;
    width: calc(272px * 14);
    animation: scroll 40s linear infinite;
}

.slider-container:hover .slider {
    animation-play-state: paused;
}

/****Services css*****/

.industrial-bg {
    background-image: linear-gradient(rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.8)), url(https://lh3.googleusercontent.com/aida-public/AB6AXuDRxUPQ_QS_loAYKqHBaCTx8elMQG0gW40Xtp5E4lUuz6DprR7hlQLFnSvJOsl_GwGhhCBFV8rpU0P0d3qlPN3e76jkIYOOQNkl2z-9O3HQ_ItFt0cAM1wx_6hCaEps3r7DgLj3Mt41rwfVt4Ufh7D1x_Kr00QIIsWh30sr67Pyn-JW9Xxi8zeqawjOu6Zq4FVd9o-LvnX88Pwxfhrn9hDrApwK1faWCri4CfnzLcb16kFv1CZCwhWcfGNvIBo7LMky5Ds4HhmdtzuU);
    background-size: cover;
    background-position: center;
}

/****Support css*****/


.hero-grid {
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 2rem 2rem;
}

.icon-circle-bg {
    background: radial-gradient(circle at 70% 30%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 25%), radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 30%);
    background-color: #FFD200;
}

/****Category css*****/



.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/****shopping info css*****/

.form-input:focus {
    box-shadow: 0 0 0 2px #FFC700;
    border-color: #FFC700;
}

/****payment info css*****/
.payment-radio:checked+div {
    border-color: #FFC700;
    background-color: #fffbeb;
}

.payment-radio:checked+div .radio-indicator {
    background-color: #FFC700;
    border-color: #FFC700;
}

.payment-radio:checked+div .radio-indicator:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #111827;
}