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

        body{
            background:#f5f5f5;
            overflow-x:hidden;
        }

        nav{
            width:100%;
            height:80px;
            background:white;
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:0 8%;
            position:sticky;
            top:0;
            z-index:1000;
            box-shadow:0 2px 10px rgba(0,0,0,0.1);
        }

        .logo{
            font-size:40px;
            font-weight:bold;
        }

        .logo span{
            color:#ff3c78;
        }

        nav ul{
            display:flex;
            list-style:none;
            gap:30px;
        }

        nav ul li a{
            text-decoration:none;
            color:black;
            font-weight:bold;
            transition:0.3s;
        }

        nav ul li a:hover{
            color:#ff3c78;
        }

        .icons{
            display:flex;
            gap:25px;
            font-size:24px;
            align-items:center;
        }

        .cart-icon,
        .user-icon{
            position:relative;
            cursor:pointer;
            transition:0.3s;
        }

        .cart-icon:hover,
        .user-icon:hover{
            color:#ff3c78;
        }

        .cart-icon::after{
            content:attr(data-count);
            position:absolute;
            top:-10px;
            right:-10px;
            width:18px;
            height:18px;
            background:red;
            color:white;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:11px;
        }

        .hero{
            width:100%;
            min-height:90vh;
            display:flex;
            justify-content:center;
            align-items:center;
            padding:60px 8%;
            gap:40px;
            flex-wrap:wrap;
        }

        .hero-text{
            flex:1;
            min-width:300px;
        }

        .hero-text h1{
            font-size:70px;
            margin-bottom:20px;
        }

        .hero-text span{
            color:#ff3c78;
        }

        .hero-text p{
            line-height:30px;
            color:#555;
            margin-bottom:30px;
        }

        .hero-text button,
        .about-text button,
        .checkout-btn{
            padding:15px 35px;
            border:none;
            background:#ff3c78;
            color:white;
            border-radius:30px;
            cursor:pointer;
            font-size:16px;
            transition:0.3s;
        }

        .hero-text button:hover,
        .about-text button:hover,
        .checkout-btn:hover,
        .btn:hover,
        .login-form button:hover{
            background:#e62968;
        }

        .hero-image{
            flex:1;
            text-align:center;
            min-width:300px;
        }

        .hero-image img{
            width:90%;
            max-width:500px;
        }

        .products{
            padding:70px 8%;
        }

        .products h1{
            text-align:center;
            font-size:55px;
            margin-bottom:50px;
        }

        .product-container{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:30px;
        }

        .card{
            background:white;
            border-radius:20px;
            padding:20px;
            text-align:center;
            box-shadow:0 5px 15px rgba(0,0,0,0.1);
            transition:0.3s;
        }

        .card:hover{
            transform:translateY(-10px);
        }

        .card img{
            width:100%;
            height:220px;
            object-fit:contain;
        }

        .card h2{
            margin:15px 0;
        }

        .card p{
            color:#666;
            margin-bottom:15px;
        }

        .price{
            font-size:22px;
            font-weight:bold;
            margin-bottom:15px;
        }

        .stars{
            color:orange;
            margin-bottom:15px;
        }

        .btn{
            display:inline-block;
            padding:12px 28px;
            background:#ff3c78;
            color:white;
            border-radius:30px;
            text-decoration:none;
            transition:0.3s;
        }

        .cart-box{
            position:fixed;
            top:90px;
            right:-400px;
            width:350px;
            height:500px;
            background:white;
            box-shadow:0 0 15px rgba(0,0,0,0.2);
            padding:20px;
            overflow-y:auto;
            transition:0.4s;
            z-index:1000;
            border-radius:20px;
        }

        .cart-box.active{
            right:20px;
        }

        .cart-box h2{
            text-align:center;
            margin-bottom:20px;
        }

        .cart-item{
            display:flex;
            justify-content:space-between;
            align-items:center;
            border-bottom:1px solid #ddd;
            padding:10px 0;
            margin-bottom:10px;
            gap:10px;
        }

        .cart-item img{
            width:60px;
            height:60px;
            object-fit:contain;
        }

        .cart-item button{
            border:none;
            background:red;
            color:white;
            padding:6px 10px;
            border-radius:5px;
            cursor:pointer;
        }

        .total{
            margin-top:20px;
            text-align:center;
        }

        .checkout-btn{
            width:100%;
            margin-top:15px;
        }

        .about{
            padding:80px 8%;
            background:white;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:50px;
            flex-wrap:wrap;
        }

        .about-image,
        .about-text{
            flex:1;
            min-width:300px;
        }

        .about-image{
            text-align:center;
        }

        .about-image img{
            width:80%;
        }

        .about-text h1{
            font-size:50px;
            margin-bottom:20px;
        }

        .about-text p{
            line-height:30px;
            color:#555;
            margin-bottom:20px;
        }

        .login{
            padding:80px 8%;
            background:#f9f9f9;
        }

        .login-box{
            max-width:1100px;
            margin:auto;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:50px;
            flex-wrap:wrap;
            background:white;
            padding:40px;
            border-radius:20px;
            box-shadow:0 5px 20px rgba(0,0,0,0.1);
        }

        .login-image,
        .login-form{
            flex:1;
            min-width:300px;
        }

        .login-image{
            text-align:center;
        }

        .login-image img{
            width:90%;
        }

        .login-form h1{
            margin-bottom:30px;
            font-size:40px;
        }

        .login-form input{
            width:100%;
            padding:15px;
            margin-bottom:20px;
            border:1px solid #ccc;
            border-radius:10px;
            font-size:16px;
        }

        .login-form button{
            width:100%;
            padding:15px;
            border:none;
            background:#ff3c78;
            color:white;
            border-radius:10px;
            font-size:18px;
            cursor:pointer;
            transition:0.3s;
        }

        .message{
            margin-top:15px;
            color:green;
            font-weight:bold;
        }

        footer{
            background:#111;
            color:white;
            padding:60px 8%;
        }

        .footer-container{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:40px;
        }

        footer h2{
            margin-bottom:20px;
        }

        footer p,
        footer a{
            color:#ccc;
            margin-bottom:10px;
            line-height:28px;
            text-decoration:none;
            display:block;
            transition:0.3s;
        }

        footer a:hover{
            color:#ff3c78;
        }

        .social-icons{
            display:flex;
            gap:20px;
            font-size:22px;
            margin-top:20px;
        }

        .social-icons i{
            cursor:pointer;
            transition:0.3s;
        }

        .social-icons i:hover{
            color:#ff3c78;
            transform:scale(1.1);
        }

        .copyright{
            text-align:center;
            margin-top:40px;
            color:#aaa;
        }

        @media(max-width:900px){

            nav{
                padding:0 5%;
            }

            nav ul{
                display:none;
            }

            .hero-text h1{
                font-size:50px;
            }

            .products h1{
                font-size:40px;
            }

            .cart-box{
                width:90%;
                right:-100%;
            }

            .cart-box.active{
                right:5%;
            }

        }