* {
            padding: 0;
            box-sizing: border-box;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        :root {
            --wte: #fff;
            --blk: #111827;
            --primeryBlue: #2563EB;
            --secondWte: #f3f4f6;
            --lightRed: #fEF2F2;
            --skyBlue: #eff6ff;
            --heartRed: #ef4444;
            --blk6: rgba(0, 0, 0, 0.6);
            --navHeight: 75px;
            --grayText: #6b7280;
            --primaryDarkBlue: #1D4ED8;
        }

        nav {
            width: 100%;
            background-color: var(--wte);
            padding: 15px 25px;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            justify-content: space-between;
            z-index: 99;
            height: var(--navHeight);
        }

        nav .logo {
            display: flex;
            gap: 5px;
            align-items: center;

        }

        nav .logo .icon {
            width: 32px;
            height: 32px;
            background-color: var(--blk);
            color: var(--wte);
            text-align: center;
            align-content: center;
            border-radius: 10px;
            font-weight: 800;
            font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
        }

        nav .logo .name {
            display: flex;
            flex-direction: column;
            gap: 0;
            height: 100%;
            /* background: red; */
            align-self: center;
        }

        nav .logo .title {
            color: var(--blk);
            font-size: 14px;
            /* font-family: intel; */
            font-weight: 900;
            line-height: 15px;
        }

        nav .logo .subTitle {
            font-size: 8px;
            font-weight: 900;
            line-height: 9px;
            color: var(--primeryBlue);
        }

        nav .controls {
            display: flex;
            gap: 8px;
        }

        .cartBtn,
        .heartBtn,
        .menuIcon,
        nav .controls span {
            /* font-family: "Font Awesome 6 Free"; */
            font-size: 18px;
            font-weight: 900;
            line-height: 28px;
            color: var(--clr);
            height: 45px;
            width: 45px;
            /* color:  */
            background-color: var(--bgClr);
            border-radius: 10px;
            align-content: center;
            text-align: center;
            filter: grayscale(1);
            transition: 0.2s;
        }

        .cartBtn:hover,
        .heartBtn:hover,
        .cartBtn.active,
        .heartBtn.active,
        .menuIcon:hover,
        nav .controls span:hover {
            filter: grayscale(0);
        }

        nav .controls button {
            background-color: var(--blk);
            color: var(--wte);
            padding: 0 20px;
            height: 45px;
            border: none;
            font-size: 10px;
            border-radius: 10px;
            text-transform: uppercase;
            font-weight: 900;
            cursor: pointer;
        }
        nav .controls button.logOutBtn{
            background-color: var(--heartRed) !important;
            color: var(--wte) !important;
        }


        nav .searchBar {
            display: flex;
        }

        nav .searchBar .icon {
            height: 40px;
            align-content: center;
            text-align: center;
            width: 40px;
            background-color: var(--secondWte);
            color: gray;
            font-size: 13px;
            border-radius: 10px 0 0 10px;
        }

        nav .searchBar input {
            background-color: var(--secondWte);
            border: none;
            outline: none;
            border-radius: 0px 10px 10px 0px;
            /* width: 0px; */
            /* width: 400px; */
            color: black;
        }

        .loginBtn,
        .menuIcon {
            display: none;
        }

        .menuBar {
            display: flex;
            gap: 20px;
            list-style: none;
        }

        .menuBar li {
            font-size: 11px;
            text-transform: uppercase;
            color: var(--grayText);
            font-weight: 900;
            position: relative;
            text-align: center;
            transition: 0.2s;
            cursor: pointer;
        }

        .menuBar li .icon,
        .menuBar li .arrow {
            display: none;
        }

        .menuBar li.active,
        .menuBar li:hover {
            color: var(--primeryBlue);
        }

        .menuBar li::after {
            transition: inherit;
            position: absolute;
            content: '';
            width: 0;
            bottom: -5px;
            left: 0;
            height: 3px;
            background-color: var(--primeryBlue);
        }

        .menuBar li.active::after,
        .menuBar li:hover::after {
            width: 100%;
        }

        .menuBar li .dropDown {
            list-style: none;
            position: absolute;
            width: max-content;
            padding: 15px 0;
            background-color: var(--wte);
            border: 1px solid var(--secondWte);
            flex-direction: column;
            gap: 5px;
            top: 15px;
            border-radius: 10px;
            display: none;
        }

        .menuBar li:hover .dropDown {
            display: flex;

        }

        .menuBar li .dropDown li {
            padding: 10px 25px;
            border-radius: 20px;
            width: 100%;
        }

        .menuBar li .dropDown li::after {
            display: none;
        }

        .menuBar li .dropDown li:hover {
            background: var(--secondWte);
        }


        .banner {
            width: 100%;
            height: 450px;
            /* background: black; */
            background-image: linear-gradient(var(--blk6), var(--blk6)), url("../assets/banner.jpg");
            background-size: cover;
            background-position: bottom;
            color: var(--wte);
            align-content: center;
            text-align: center;
            gap: 10px;
        }

        .banner h1 {
            /* font-family: "Times New Roman"; */
            font-size: 60px;
            line-height: 60px;
            font-weight: 800;
            font-style: normal;
            margin: 15px;
        }

        .banner button {
            margin: 15px;
            width: max-content;
            padding: 15px 30px;
            background-color: var(--wte);
            color: var(--blk);
            font-weight: 700;
            border-radius: 10px;
        }

        .heading {
            width: 100%;
            text-align: center;
            padding: 30px 15px;
            font-size: 30px;
            font-weight: 600;
        }

        .subHeading {
            font-weight: 700;
            font-size: 24px;
            padding: 15px 15px;
        }

        .categoryList {
            display: flex;
            position: relative;
            gap: 10px;
            width: 100%;
            padding: 10px 50px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .categoryList .categoryBox {
            /* background: red; */
            color: var(--wte);
            font-size: 20px;
            line-height: 28px;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 275px;
            height: 175px;
            background-image: linear-gradient(var(--blk6), var(--blk6)), var(--bgImage);
            background-size: cover;
            background-position: center;
            border-radius: 20px;
        }

        .products {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            padding: 25px;
            justify-content: center;
            width: 100%;
        }

        .products .card {
            width: 275px;
            position: relative;
            /* background: red; */
            border: 1px solid var(--secondWte);
            border-radius: 20px;
            overflow: hidden;
        }

        .products .card:hover .imageBox img {
            scale: 1.1;
        }

        .products .card .imageBox {
            position: relative;
            width: 100%;
            overflow: hidden;

        }

        .products .card .imageBox img {
            width: 100%;
            object-fit: contain;
            transition: 0.3s;
        }

        .products .card .imageBox .tags {
            /* width: 30px; */
            width: max-content;
            height: max-content;
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: absolute;
            top: 10px;
            /* background: red; */
            align-items: center;
        }

        .products .card .imageBox .tags.rightTags {
            right: 10px;
        }

        .products .card .imageBox .tags.leftTags {
            left: 10px;
        }

        .products .card .imageBox .tags .new {
            background-color: var(--primeryBlue);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            text-transform: uppercase;
            font-family: 700;
            color: var(--wte);
        }

        /* .products .card .imageBox .tags span{
            color: var(--secondWte);
            background: var(--secondWte);
        } */
        .products .card .contentBox {
            padding: 10px 15px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .products .card .contentBox h4 {
            font-size: 14px;
            font-weight: 900;
            line-height: 17.5px;
            color: var(--blk);
        }

        .products .card .contentBox .price {
            display: flex;
            gap: 5px;
            align-items: last baseline;
        }

        .products .card .contentBox .price strike {
            font-size: medium;
            color: var(--blk);

        }

        .products .card .contentBox .price {
            font-size: x-large;
            color: var(--primeryBlue);
            font-weight: 900;
        }

        .products .card .contentBox .variations {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .products .card .contentBox .variations .size {
            display: flex;
            gap: 5px;
        }

        .products .card .contentBox .variations .size span {
            min-width: 30px;
            max-width: max-content;
            font-size: 14px;
            height: 30px;
            background-color: var(--secondWte);
            text-align: center;
            align-content: center;
            border-radius: 10px;
            font-weight: 800;
            transition: 0.2s;
            cursor: pointer;
            color: var(--blk);
        }

        .products .card .contentBox .variations .size span.active,
        .products .card .contentBox .variations .size span:hover {
            background-color: var(--primeryBlue);
            box-shadow: 0 0 10px var(--secondWte);
            color: var(--wte);
        }

        button {
            border: none;
            outline: none;
        }

        .primaryColoredBtn {
            background-color: var(--primeryBlue);
            color: var(--wte);
        }

        .secondaryColoredBtn {
            /* background-color: var(--secondWte); */
            background-color: var(--wte);
            border: 2px solid var(--secondWte);
            color: var(--blk);
        }

        .products .card .contentBox .buttons {
            display: flex;
            gap: 10px;
            width: 100%;
            justify-content: space-between;
        }

        .products .card .contentBox .buttons button {
            width: 100%;
            border-radius: 10px;
            font-size: 10px;
            line-height: 15px;
            font-weight: 900;
            text-transform: uppercase;
            padding: 10px 5px;
        }

        .logIn {
            display: none;
            flex-direction: column;
            padding: 25px 15px;
            align-items: center;
            gap: 10px;
            width: max-content;
            border-radius: 20px;
            border: 1px solid var(--secondWte);
            position: fixed;
            right: 10px;
            top: calc(var(--navHeight) + 10px);
            background-color: var(--wte);
            box-shadow: 0 0 10px var(--blk);
        }

        .logIn .crossIcon {
            position: absolute;
            right: 20px;
            top: 20px;
        }

        .logIn.active {
            display: flex;
        }

        .logIn .logo {
            width: 50px;
            height: 50px;
            font-size: 1.5rem;
            font-family: 900;
            background-color: var(--blk);
            color: var(--wte);
            text-align: center;
            align-content: center;
            border-radius: 10px;
        }

        .logIn h2 {
            font-size: 30px;
            color: var(--blk);
            line-height: 36px;
        }

        .logIn .text {
            font-size: 14px;
            line-height: 24px;
            color: var(--grayText);
        }

        .logIn fieldset {
            display: flex;
            flex-direction: column;
            border: none;
            width: 100%;
            gap: 5px;
        }

        .logIn fieldset label {
            color: var(--grayText);
            font-size: 12px;
            line-height: 15px;
            font-weight: 900;
        }

        .logIn fieldset input {
            width: 100%;
            padding: 13px 10px;
            background-color: var(--secondWte);
            border: none;
            border-radius: 15px;
        }

        .logIn button {
            border-radius: 15px;
            background: var(--blk);
            color: var(--wte);
            padding: 13px 10px;
            width: 100%;
        }



        aside.cart {
            display: flex;
            /* flex-direction: column; */
            flex-wrap: wrap;
            width: 450px;
            background: var(--secondWte);
            max-height: 100vh;
            height: 100vh;
            position: fixed;
            top: 0;
            right: -100%;
            box-shadow: 0 0 10px var(--blk);
            z-index: 9999;
            transition: 0.4s;
        }

        aside.cart.active {
            right: 0;
        }

        aside.cart header {
            padding: 20px 20px;
            display: flex;
            width: 100%;
            background-color: var(--wte);
            border: 1px solid var(--secondWte);
            align-items: center;
            gap: 10px;
            max-height: max-content;

        }

        aside.cart header h2 {
            font-size: 20px;
            line-height: 28px;
            text-transform: uppercase;
            color: var(--blk);
            font-weight: 900;
        }

        aside.cart header .cartCount {
            background-color: var(--secondWte);
            color: var(--grayText);
            padding: 5px 15px;
            border-radius: 10px;
        }

        aside.cart header .fa-times {
            position: absolute;
            right: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            align-content: center;
        }

        aside.cart .data {
            width: 100%;
            background-color: var(--wte);
            border-top: 1px solid var(--secondWte);
            flex-direction: column;
            align-self: flex-end;
            max-height: max-content;
        }

        aside.cart .data section {
            padding: 20px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            line-height: 20px;
            font-weight: 700;
            color: var(--grayText);
            text-transform: uppercase;
        }

        aside.cart .data section span:nth-child(2) {
            color: var(--blk);
            font-size: 18px;
            font-weight: 900;
            line-height: 28px;
        }

        aside.cart .data section button {
            padding: 15px;
            background-color: var(--primeryBlue);
            color: var(--wte);
            width: 100%;
            font-size: 12px;
            line-height: 16px;
            font-weight: 900;
            text-transform: uppercase;
            border-radius: 15px;
        }

        aside.cart .cartData {
            width: 100%;
            height: 50%;
            overflow-y: scroll;
            position: relative;
            background-color: var(--wte);
        }
        aside.cart .cartData .product{
            position: relative;
            padding: 15px 20px;
            width: 100%;
            display: flex;
            gap: 10px;

        }

        aside.cart .cartData img {
            width: 100px;
            border-radius: 15px;
        }

        aside.cart .cartData .itemContent {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        aside.cart .cartData .itemContent h3 {
            font-size: 14px;
            font-weight: 900;
            line-height: 20px;
            text-transform: uppercase;
            color: var(--blk);
            width: 90%;
        }

        aside.cart .cartData .itemContent .variationDetails {
            display: flex;
            gap: 5px;
        }

        aside.cart .cartData .itemContent .deleteBtn {
            position: absolute;
            right: 0;
            color: var(--grayText);
            /* opacity: 0.5; */
            font-size: 14px;

        }

        aside.cart .cartData .itemContent .variationDetails span {
            font-size: 10px;
            font-weight: 900;
            line-height: 15px;
            color: var(--grayText);
            padding: 3px 5px;
            border-radius: 5px;
            background-color: var(--secondWte);
            text-transform: uppercase;
        }

        aside.cart .cartData .controls {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        aside.cart .cartData .controls span,
        aside.cart .cartData .controls button {
            padding: 5px 15px;
            border: 1px solid var(--secondWte);
        }

        aside.cart .cartData .controls button {
            background-color: var(--wte);
            color: var(--grayText);
            border-radius: var(--borderRadius);
            font-size: 16px;
            font-weight: 900;
        }

        aside.cart .cartData .controls .price {
            color: var(--blk);
            font-size: 14px;
            font-weight: 900;
            line-height: 20px;
            color: var(--primeryBlue);
            text-transform: uppercase;
        }

        @media (max-width: 1000px) {

            nav .menuIcon,
            .loginBtn {
                display: block;
            }

            nav .menuBar {
                position: fixed;
                top: var(--navHeight);
                height: calc(100vh - var(--navHeight));
                left: -100%;
                width: 400px;
                background: var(--wte);
                flex-direction: column;
                gap: 15px;
                padding: 10px 30px;
                transition: 0.2s;
            }

            nav .menuBar.show {
                left: 0;
            }

            nav .menuBar li {
                width: 100%;
                background-color: var(--secondWte);
                border-radius: 20px;
                font-size: 16px;
                line-height: 16px;
                font-weight: 900;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 15px;
            }

            nav .menuBar li::after {
                display: none;
            }

            nav .menuBar li.active,
            nav .menuBar li:hover {
                background-color: var(--primeryBlue);
                color: var(--wte);
            }

            nav .menuBar li.active .icon,
            nav .menuBar li:hover .icon {
                background-color: var(--primaryDarkBlue);
                color: var(--wte);
            }

            .menuBar li .icon,
            .menuBar li .arrow {
                display: block;
            }

            .menuBar li .icon {
                width: 40px;
                height: 40px;
                border-radius: 10px;
                background: var(--wte);
                align-content: center;
                text-align: center;
                color: var(--blk);
                font-weight: 900;
            }

            nav .menuBar li .dropDown {
                top: 0;
                right: 0;
                transform: translateX(100%);
            }

            nav .menuBar li .dropDown li {
                padding: 20px;
            }

            .loginBtn {
                background-color: var(--blk);
                color: var(--wte);
                padding: 15px;
                width: 100%;
                align-self: flex-end;
                border-radius: 20px;

            }
        }