/* ========================================
   URBAN WEAR CO.
   STYLE.CSS
======================================== */


/* RESET */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:#f7f7f7;

    color:#111;

    line-height:1.6;

}



/* ========================================
   NAVIGATION
======================================== */


nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 8%;

    background:rgba(0,0,0,.9);

    backdrop-filter:blur(10px);

    z-index:1000;

}


.logo{

    color:white;

    font-size:1.7rem;

    font-weight:900;

    letter-spacing:2px;

}



.nav-links{

    display:flex;

    gap:35px;

}



.nav-links a{

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.nav-links a:hover{

    color:#aaa;

}





/* ========================================
   HERO
======================================== */


.hero{


    height:100vh;


    background:

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

    url("Images/hero.jpg");


    background-size:cover;


    background-position:center;


    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;


    color:white;


    padding:30px;


}



.hero-content{

    max-width:850px;

}



.hero h1{

    font-size:4rem;

    line-height:1.1;

    margin-bottom:25px;

    text-transform:uppercase;

}



.hero p{

    font-size:1.2rem;

    color:#ddd;

    margin-bottom:40px;

}




/* ========================================
   BUTTONS
======================================== */


.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}



.btn{


    display:inline-block;


    padding:15px 35px;


    background:white;


    color:black;


    text-decoration:none;


    border-radius:40px;


    font-weight:bold;


    border:none;


    cursor:pointer;


    transition:.3s;


}



.btn:hover{


    transform:translateY(-5px);


    background:#ccc;


}



.btn.secondary{


    background:transparent;


    color:white;


    border:2px solid white;


}



.btn.secondary:hover{


    background:white;


    color:black;


}




/* ========================================
   SECTIONS
======================================== */


.section{


    padding:100px 8%;


}



.section.dark{


    background:#111;


    color:white;


}




.section-header{


    text-align:center;


    max-width:800px;


    margin:auto;


    margin-bottom:60px;


}



.section-header h2{


    font-size:2.8rem;


    margin-bottom:20px;


}



.section-header p{


    color:#666;


}



.dark .section-header p{


    color:#bbb;


}





/* ========================================
   PRODUCTS
======================================== */


.products-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:35px;


}



.product-card{


    background:white;


    border-radius:15px;


    overflow:hidden;


    padding-bottom:25px;


    box-shadow:0 10px 30px rgba(0,0,0,.08);


    transition:.35s;


}



.product-card:hover{


    transform:translateY(-10px);


}



.product-card img{


    width:100%;


    height:320px;


    object-fit:cover;


}



.product-card h3{


    padding:20px 20px 10px;


    font-size:1.3rem;


}



.product-card p{


    padding:0 20px;


    color:#666;


}



.product-card span{


    display:block;


    padding:20px;


    font-weight:bold;


    font-size:1.2rem;


}





/* ========================================
   BRAND SECTION
======================================== */


.brand-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:60px;


    align-items:center;


}



.brand-image img{


    width:100%;


    border-radius:20px;


}



.brand-content h2{


    font-size:3rem;


    margin-bottom:25px;


}



.brand-content p{


    margin-bottom:20px;


    color:#ccc;


}




/* ========================================
   FEATURES
======================================== */


.features-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));


    gap:30px;


}



.feature-box{


    background:white;


    padding:35px;


    border-radius:15px;


    text-align:center;


    box-shadow:0 10px 25px rgba(0,0,0,.08);


    transition:.3s;


}



.feature-box:hover{


    transform:translateY(-8px);


}



.feature-box h3{


    margin-bottom:15px;


}





/* ========================================
   NEWSLETTER
======================================== */


.newsletter{


    display:flex;


    justify-content:center;


    gap:15px;


    flex-wrap:wrap;


}



.newsletter input{


    padding:15px 25px;


    border-radius:30px;


    border:none;


    width:300px;


}





/* ========================================
   CONTACT
======================================== */


.contact-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:30px;


}



.contact-card{


    background:white;


    padding:35px;


    text-align:center;


    border-radius:15px;


}





/* ========================================
   FOOTER
======================================== */


footer{


    background:#000;


    color:white;


    text-align:center;


    padding:50px 20px;


}




/* ========================================
   RESPONSIVE
======================================== */


@media(max-width:800px){



nav{

    flex-direction:column;

    gap:15px;

}



.nav-links{

    gap:15px;

}



.hero h1{

    font-size:2.5rem;

}



.brand-grid{

    grid-template-columns:1fr;

}



}