:root {
  --bg: #0b0f1a;
  --card: #12162a;
  --primary: #5865f2;
  --text: #e5e7eb;
  --muted: #9ca3af;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--text); }
  body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
            color: #333;
        }
        header {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
        }
        main {
            max-width: 900px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        h1, h2, h3 {
            color: #2c3e50;
        }
        a {
            color: #2980b9;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        footer {
            text-align: center;
            padding: 20px;
            font-size: 0.9em;
            color: #555;
        }
        .section {
            margin-bottom: 40px;
        }
.hero {
  height: 250px; 
  background: url('image.png') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.hero .overlay { background: rgba(0,0,0,0.5); padding: 30px 20px; border-radius: 16px; }
.hero h1 { font-size: 3rem; margin: 0; }
.hero p { margin-top: 10px; font-size: 1rem; color: #ddd; }

section { max-width: 1100px; margin: auto; padding: 50px 20px; }
h2 { text-align: center; margin-bottom: 30px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card { background: var(--card); padding: 25px; border-radius: 16px; text-align: center; }
.banner-img { width: 100%; border-radius: 12px; margin-bottom: 12px; }

.btn, button {
  margin-top: 15px; padding: 12px 20px; border-radius: 10px; border: none;
  background: var(--primary); color: white; cursor: pointer; font-weight: 600;
}
button:hover, .btn:hover { opacity: 0.9; }

.video-container { position: relative; padding-bottom: 56.25%; height: 0; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; }

form { display: flex; flex-direction: column; max-width: 600px; margin: auto; gap: 15px; }
form label { font-weight: 500; margin-bottom: 5px; }
form input, form textarea, form select {
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: #020617;
  color: white;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}
form textarea { resize: vertical; min-height: 80px; max-height: 200px; }

#formMessage { text-align: center; margin-top: 12px; color: lightgreen; }

footer { text-align: center; padding: 30px; color: var(--muted); }