/* RESET */
* {margin: 00; padding: 03; box-sizing: border-box;}

/* BODY */
body {font-family: Arial, Helvetica, sans-serif; line-height: 1.6; background: #00FFFF; color: #446354;}

/* CONTAINER */
.container {width: 90%; max-width: 1100px; margin: auto; padding: 10px 0;}

/* HEADER */
header {background: #D12C5A; color: #fff; padding: 15px 0;}
header h1 {text-align: center; font-size: 28px;}
nav {text-align: center; position: relative;}
nav ul {list-style: none; display: flex; justify-content: center;}
nav ul li {margin: 0 15px;}
nav ul li a {color: #FF0000; text-decoration: none; font-weight: bold;}
nav ul li a:hover {color: #FF0000;}
.menu-toggle {display: none; cursor: pointer; font-size: 28px; color: #fff;}

/* HERO */
.hero {background: linear-gradient(to right, #111, #333); color: #fff; padding: 60px 20px; text-align: center;}
.hero h2 {font-size: 32px; margin-bottom: 15px;}
.hero p {font-size: 18px;}
.btn {display: inline-block; background: #f4b400; color: #111; padding: 12px 25px; text-decoration: none; border-radius: px; font-weight: bold; margin-top: 20px;}
.btn:hover {background: #e09e00;}

/* SECTION & CARDS */
section {padding: 40px 0;}
section h2 {text-align: center; font-size: 26px; margin-bottom: 20px;}
.card {background: #fff; padding: 20px; margin: 15px 0; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
form input, form textarea {width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px;}
form button {width: 100%;}

/* FOOTER */
footer {background: #111; color: #fff; text-align: center; padding: 20px 0;}

/* RESPONSIVE */
@media(max-width:768px){
  nav ul {flex-direction: column; display: none;}
  nav ul.active {display: block;}
  .menu-toggle {display: block;}
  .hero h2 {font-size: 24px;}
}