body {
  font-family:sans-serif'
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

header {
  background-color: #333;
  color: white;
  padding: 1em;
  text-align: center;
}

nav a {
  margin: 0 15px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
  color: yellow;
}


main {
  padding: 2px;
}

section {
  margin-bottom: 2px;
}


footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.hero{height: 100vh;
background: url('https://img.freepik.com/free-photo/seductive-girl-wearing-distressed-jeans-denim-jacket-looking-camera-while-sitting-chair-fitting-room-clothing-store_613910-20033.jpg?semt=ais_hybrid&w=740')no-repeat
  center center/cover;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 20px;
position: relative;
}
.hero ::after{content:'';
position:absolute;
top:0;
left:0;
  width:100%;
height:100%;
background:rgba(0,0,0,0.0);
 z-index:1;
}
.hero-content{z-index:2;
color:white;
max-width:600px;
}
.hero h1{font-size:48px;
margin-bottom:20px;
}
.hero p{font-size:19px;
margin-bottom:50px;
}
.hero a {
  display: inline-block;
  padding: 12px 25px;
  background: pink;
  text-decoration: none;
  font-size: 16px;
  border-radius: 30px;
  transition: background 0.3s;
}

.hero a:hover {
  background: brown;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 32px;
  }
  .hero p {
    font-size: 16px;
  }
}
.about-section{display:flex;
flex-wrap:wrap;
padding:60px 20px;
max-width:1200px;
margin:auto;
gap:40px;
align-items:center;
}
.about-text, .about-image{flex:1 1 500px;
}
.about-text h2{font-size:40px;
margin-bottom:20px;
color:gold;
border-right:3px solid #ff4081;
white-space:no wrap;
width:0;
  overflow:hidden;
animation:typing 3s steps(10) forwards,blink 0.5s infinite;
}
@keyframes typing {
  from {width:0;}
  to {width:10ch;}
}
@keyframes blink{
  50% {border-color:transparent;}
}
.about-text p{font-size:16px;
line-height:1.6;
color:grey;
}
.about-image img{width:100%;
border-radius:15px;
box-shadow:0 8px 20px rgba(0,0,0,0,0.5);
}
@media(max-width:768px){.about-section{flex-direction:column;
  padding:40px 15px;
  }
.about-text h2:font-size:32px;}
.about-text p{font-size:16px;
}
}
.shop-section{padding:60px 20px;
max-width:1200px;
margin:auto;
}
.store-section h2{text-align:center;
font-size:32px;
margin-bottom:40px;
color:gold;
}
.card-grid{display:grid;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
gap:30px;
}
.card{background:#1e1e1e;
border-radius:15px;
overflow:hidden;
boax-shadow:0 8px 20px rgba(0, 0, 0, 0.4px;
)
opacity:0;
transform:translateY (20px);
}
.card .reveal{transform:translateY (0);
  opacity:1;
}
.card img{width:80%;
height:250px;
object-fit:contain;
}
.card:hover img{transform:scale (1.1);
}
.shop-content{padding:20px;
}
.shop-content h3{margin:0 0 10px;
font-size:32px;
color:white;
}
.shop-content p{margin 0;
color:silver;
font-size:16px;
}
@media (max-width:600px;
){.shop-section h2{font-size:32px;
  }
}
.contact-section{display:flex;
flex-wrap:wrap;
gap:40px;
padding:60px 20px;
max-width:1200px;
margin:auto;
align-items:flex-start;
}
.contact-info{flex:1 1 300px;
}
.contact-info h2{font-size:33px;
color:gold;
margin-bottom:20px;
text-align:center;
}
.contact-info p{font-size:16px;
color:silver;
line-height:1.6;
}
form{background-color:#1e1e1e;
padding:30px;
border-radius:15px;
}
form input, textarea{width:100%;
padding:12px;
margin-bottom:15px;
background:#222;
border:1px solid #333;
color:white;
border-radius:8px;
font-size:16px;
}
form button{padding:12px 25px;
background:orange;
border:none;
color:white;
font-size:16px;
border-radius:30px;
cursor:pointer;}
form button:hover{background:#e73370;
}
.error{color:#ff4d4d;
font-size:14px;
margin-top:-10px;
margin-bottom:10px;
}
.map-container iframe{width:100%;
height:300px;
border:none;
border-radius:15px;
}
.contact-form {flex:2 1 1000px;
display:flex;
flex-direction:column;
gap:30px;
}


@media(max-width:768px){
  .contact-section:flex-direction:column;}
  .contact-form{flex-direction:column;}
  .contact-info h2{font-size:32px;}
}
.footer{background-color:#1a1a1a;
color:#ccc;
padding:60px 20px 20px;
font-family:'segoe UI', sans-serif;
}
.footer-container{display:flex;
flex-wrap:wrap;
max-width:1200px;
margin:auto;
gap:40px;
justify-content:space-between;
}
.footer-col{flex:1 1 300px;
}
.footer-col h3{color:#ff4081;
font-size:22px;
margin-bottom:15px;
}
.footer-col p, .footer-col li{font-size:15px;
line-height:1.6;
}
.footer-col ul{list-style:none;
padding:0;
}
.footer-col ul li{margin-bottom:10px;
}
.footer-col ul li a{color:#000;
text-decoration:none;
}
.footer-col ul li a:hover{color:#ff4081;
}
.footer-col form{display:flex;
flex-direction:column;
}
.footer-col input{padding:10px;
margin-bottom:10px;
background:#2a2a2a;
border:none;
color:#fff;
border-radius:5px;
}
.footer-col button{padding:10px;
background:#ff4081;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer;
}
.footer-col button:hover{background:#e73370;
}
.footer-bottom{text-align:center;
padding-top:30px;
font-size:14px;
color:#000;
}
@media(max-width:768px){.footer-container{flex-direction:column;
  }
  .footer-col{margin-bottom:30px;
  }
}