*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Arial,Helvetica,sans-serif;

}

body{

background:#f4f6f9;

}

/* HEADER */

.top-header{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 7%;

background:#111827;

}

.logo h2{

color:#00d4ff;

font-size:34px;

}

.search-box{

display:flex;

width:40%;

}

.search-box input{

width:100%;

padding:13px;

border:none;

outline:none;

font-size:16px;

}

.search-box button{

width:60px;

background:#00d4ff;

border:none;

cursor:pointer;

font-size:18px;

}

.top-icons{

display:flex;

gap:25px;

}

.top-icons a{

color:white;

text-decoration:none;

display:flex;

flex-direction:column;

align-items:center;

font-size:14px;

transition:.3s;

}

.top-icons i{

font-size:22px;

margin-bottom:5px;

}

.top-icons a:hover{

color:#00d4ff;

}

/* NAVBAR */

nav{

background:#1f2937;

}

nav ul{

display:flex;

justify-content:center;

list-style:none;

}

nav ul li{

padding:18px 30px;

}

nav ul li a{

color:white;

text-decoration:none;

font-size:17px;

transition:.3s;

}

nav ul li a:hover{

color:#00d4ff;

}

/* HERO */

.hero{

height:500px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

background:linear-gradient(135deg,#2563eb,#0ea5e9,#06b6d4);

color:white;

}

.hero h1{

font-size:55px;

margin-bottom:20px;

}

.hero p{

font-size:20px;

margin-bottom:30px;

width:60%;

}

.hero button{

padding:15px 40px;

border:none;

background:white;

color:#2563eb;

font-size:18px;

cursor:pointer;

border-radius:8px;

transition:.3s;

}

.hero button:hover{

background:#111827;

color:white;

}

/* MOBILE */

@media(max-width:900px){

.top-header{

flex-direction:column;

gap:20px;

}

.search-box{

width:100%;

}

.top-icons{

flex-wrap:wrap;

justify-content:center;

}

nav ul{

flex-wrap:wrap;

}

.hero h1{

font-size:35px;

}

.hero p{

width:90%;

}

}


/*==================================================
LOGIN PAGE START
==================================================*/

.login-body{

    margin:0;
    padding:0;
    font-family:Arial,Helvetica,sans-serif;

    background:linear-gradient(135deg,#0f172a,#1e3a8a,#06b6d4);

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

}

.login-section{

    width:100%;
    padding:50px;

}

.login-card{

    max-width:1100px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:20px;

    background:white;

    box-shadow:0 20px 50px rgba(0,0,0,.25);

}

/* LEFT */

.login-left{

    background:linear-gradient(135deg,#2563eb,#0ea5e9);

    color:white;

    padding:60px;

}

.login-left h1{

    font-size:42px;

    margin-bottom:25px;

}

.login-left h2{

    font-size:32px;

    margin-bottom:20px;

}

.login-left p{

    line-height:28px;

    margin-bottom:35px;

    color:#eef2ff;

}

.login-left ul{

    list-style:none;

}

.login-left li{

    margin-bottom:18px;

    font-size:18px;

}

.login-left i{

    color:#22c55e;

    margin-right:10px;

}

/* RIGHT */

.login-right{

    padding:60px;

}

.login-right h2{

    font-size:34px;

    color:#111827;

    margin-bottom:10px;

}

.small-text{

    color:#6b7280;

    margin-bottom:30px;

}

/* INPUT */

.input-group{

    margin-bottom:25px;

}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-weight:bold;

    color:#374151;

}

.input-box{

    display:flex;

    align-items:center;

    border:1px solid #ddd;

    border-radius:8px;

    overflow:hidden;

}

.input-box i{

    width:55px;

    text-align:center;

    color:#6b7280;

}

.input-box input{

    flex:1;

    border:none;

    outline:none;

    padding:16px;

    font-size:16px;

}

#togglePassword{

    cursor:pointer;

    margin-right:15px;

}

/* OPTIONS */

.login-options{

    display:flex;

    justify-content:space-between;

    margin-bottom:30px;

    font-size:15px;

}

.login-options a{

    color:#2563eb;

    text-decoration:none;

}

/* LOGIN BUTTON */

.login-btn{

    width:100%;

    border:none;

    background:#2563eb;

    color:white;

    padding:16px;

    font-size:18px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.login-btn:hover{

    background:#1d4ed8;

}

/* OR */

.or{

    text-align:center;

    margin:30px 0;

    color:#888;

    position:relative;

}

.or::before{

    content:"";

    position:absolute;

    width:40%;

    height:1px;

    background:#ddd;

    left:0;

    top:50%;

}

.or::after{

    content:"";

    position:absolute;

    width:40%;

    height:1px;

    background:#ddd;

    right:0;

    top:50%;

}

/* GOOGLE */

.google-btn{

    width:100%;

    border:none;

    padding:15px;

    margin-bottom:15px;

    background:#db4437;

    color:white;

    font-size:16px;

    border-radius:8px;

    cursor:pointer;

}

.google-btn:hover{

    opacity:.9;

}

/* FACEBOOK */

.facebook-btn{

    width:100%;

    border:none;

    padding:15px;

    background:#1877f2;

    color:white;

    font-size:16px;

    border-radius:8px;

    cursor:pointer;

}

.facebook-btn:hover{

    opacity:.9;

}

/* BOTTOM */

.bottom-text{

    text-align:center;

    margin-top:30px;

    font-size:16px;

}

.bottom-text a{

    text-decoration:none;

    color:#2563eb;

    font-weight:bold;

}

/* MOBILE */

@media(max-width:900px){

.login-card{

grid-template-columns:1fr;

}

.login-left{

padding:40px;

text-align:center;

}

.login-right{

padding:35px;

}

}

@media(max-width:600px){

.login-section{

padding:15px;

}

.login-left h1{

font-size:30px;

}

.login-left h2{

font-size:24px;

}

.login-right h2{

font-size:28px;

}

.login-options{

flex-direction:column;

gap:10px;

}

}

/*==================================================
LOGIN PAGE END
==================================================*/


/*==================================================
SIGNUP PAGE START
==================================================*/


.signup-body{

    margin:0;

    padding:0;

    font-family:Arial,Helvetica,sans-serif;

    background:linear-gradient(135deg,#0f172a,#1e40af,#06b6d4);

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


.signup-section{

    width:100%;

    padding:40px;

}


.signup-card{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.3fr;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.3);

}



/* LEFT SIDE */


.signup-left{

    background:linear-gradient(135deg,#2563eb,#06b6d4);

    color:white;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}


.signup-left h1{

    font-size:45px;

    margin-bottom:20px;

}


.signup-left h2{

    font-size:30px;

    margin-bottom:20px;

}


.signup-left p{

    line-height:28px;

    color:#e0f2fe;

    margin-bottom:35px;

}


.features div{

    margin-bottom:22px;

    font-size:18px;

}


.features i{

    color:#22c55e;

    margin-right:12px;

}



/* RIGHT SIDE */


.signup-right{

    padding:50px;

}


.signup-right h2{

    font-size:34px;

    color:#111827;

    margin-bottom:10px;

}


.small-text{

    color:#6b7280;

    margin-bottom:30px;

}



/* TWO COLUMN FORM */


.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



/* INPUT */


.input-group{

    margin-bottom:20px;

}


.input-group label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

    color:#374151;

}


.input-box{

    display:flex;

    align-items:center;

    border:1px solid #d1d5db;

    border-radius:8px;

    overflow:hidden;

    background:white;

}


.input-box i{

    width:50px;

    text-align:center;

    color:#6b7280;

}


.input-box input{

    width:100%;

    padding:15px;

    border:none;

    outline:none;

    font-size:15px;

}


#signupEye{

    cursor:pointer;

}



/* TERMS */


.terms{

    margin:15px 0 25px;

    font-size:14px;

}



/* BUTTON */


.signup-btn{

    width:100%;

    padding:16px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

}


.signup-btn:hover{

    background:#1d4ed8;

}



/* BOTTOM */


.bottom-text{

    text-align:center;

    margin-top:25px;

    color:#374151;

}


.bottom-text a{

    color:#2563eb;

    text-decoration:none;

    font-weight:bold;

}



/* MOBILE */


@media(max-width:950px){


.signup-card{

grid-template-columns:1fr;

}


.signup-left{

text-align:center;

padding:40px;

}


.signup-right{

padding:30px;

}


}



@media(max-width:600px){


.signup-section{

padding:15px;

}


.form-row{

grid-template-columns:1fr;

}


.signup-left h1{

font-size:35px;

}


}


/*==================================================
SIGNUP PAGE END
==================================================*/



/*==================================================
STORE PAGE START
==================================================*/


.store-header{

    background:#111827;

    color:white;

    padding:20px 7%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.store-header h1{

    color:#00d4ff;

}


.store-header a{

    color:white;

    text-decoration:none;

    font-size:17px;

}


.store-header a:hover{

    color:#00d4ff;

}



/* STORE BANNER */


.store-banner{

    height:350px;

    background:

    linear-gradient(
        rgba(0,0,0,.5),
        rgba(0,0,0,.5)
    ),

    url("https://images.unsplash.com/photo-1518770660439-4636190af475");


    background-size:cover;

    background-position:center;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    color:white;

    text-align:center;

}


.store-banner h1{

    font-size:45px;

    margin-bottom:15px;

}


.store-banner p{

    font-size:20px;

}





/* PRODUCTS SECTION */


.products-section{

    padding:50px 7%;

}


.products-section h2{

    text-align:center;

    font-size:35px;

    margin-bottom:40px;

    color:#111827;

}





.products-container{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}





/* PRODUCT CARD */


.product-card{

    background:white;

    border-radius:15px;

    padding:20px;

    position:relative;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

    transition:.3s;

}


.product-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.2);

}




.product-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:10px;

}




.discount{

    position:absolute;

    top:15px;

    left:15px;

    background:#ef4444;

    color:white;

    padding:7px 12px;

    border-radius:20px;

    font-size:13px;

}




.product-card h3{

    margin-top:20px;

    color:#1f2937;

    font-size:20px;

}





.rating{

    color:#facc15;

    margin:10px 0;

}





.price{

    font-size:25px;

    color:#2563eb;

    font-weight:bold;

}





.product-card button{

    width:100%;

    margin-top:20px;

    padding:13px;

    border:none;

    border-radius:8px;

    background:#111827;

    color:white;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}



.product-card button:hover{

    background:#2563eb;

}





/* RESPONSIVE */


@media(max-width:1100px){


.products-container{

grid-template-columns:

repeat(3,1fr);

}


}



@media(max-width:800px){


.products-container{

grid-template-columns:

repeat(2,1fr);

}


.store-banner h1{

font-size:32px;

}


}



@media(max-width:550px){


.products-container{

grid-template-columns:

1fr;

}


.store-header{

flex-direction:column;

gap:15px;

}


}



/*==================================================
STORE PAGE END
==================================================*/


/*=================================
HOME PRODUCTS SECTION
=================================*/


.home-products{

    padding:60px 7%;

    background:#f8fafc;

}


.home-products h2{

    text-align:center;

    font-size:38px;

    color:#111827;

    margin-bottom:10px;

}


.section-text{

    text-align:center;

    color:#6b7280;

    margin-bottom:40px;

    font-size:18px;

}


/* Product container already exists */

.home-products .product-card{

    background:white;

}



/* Smooth animation */

.home-products .product-card img{

    transition:.4s;

}


.home-products .product-card:hover img{

    transform:scale(1.05);

}