/* ================================ GLOBAL RESET ================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; overflow-x: hidden; background: transparent; min-height: 100vh; } /* ================================ BACKGROUND VIDEO ================================ */ #backgroundVideo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } /* ================================ GLASS PAGE (FULLSCREEN FRAME) ================================ */ .glass-page { min-height: 100vh; width: 100%; padding: 90px 20px 40px; display: flex; justify-content: center; align-items: flex-start; background: rgba(255, 230, 120, 0.18); border: 2px solid rgba(255, 230, 120, 0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ================================ LANDING CONTENT ================================ */ .landing { width: 100%; max-width: 900px; text-align: center; } .center-image { width: 65%; max-width: 300px; margin: 15px auto 25px; display: block; } .frame-content { padding: 10px; } /* ================================ HERO TEXT ================================ */ .hero-title { font-size: 40px; font-weight: 800; text-align: center; letter-spacing: 2px; color: white; cursor: pointer; text-shadow: 0 3px 0 #bfa200, 0 8px 18px rgba(255, 200, 0, 0.85), 0 18px 35px rgba(255, 170, 0, 0.75); transition: transform 0.15s ease, text-shadow 0.15s ease; } .hero-title:hover { transform: translateY(-4px); text-shadow: 0 5px 0 #d4b300, 0 12px 25px rgba(255, 210, 60, 0.95), 0 25px 45px rgba(255, 180, 40, 0.9); } .hero-title:active { transform: translateY(5px); } .hero-text { margin-top: 15px; font-size: 18px; color: white; line-height: 1.6; } /* ================================ BUTTON ================================ */ .btn { margin-top: 30px; padding: 14px 35px; background: #ffcc00; border-radius: 10px; border: none; font-size: 18px; cursor: pointer; font-weight: bold; } .btn:hover { opacity: 0.9; } /* ================================ SOCIAL MEDIA ================================ */ .social-media { display: flex; justify-content: center; align-items: center; gap: 25px; margin-top: 35px; } .social-media a { display: inline-flex; } .social-media img { width: 45px; height: 45px; border-radius: 50%; transition: transform 0.3s ease, box-shadow 0.3s ease; } .social-media a:hover img { transform: translateY(-6px) scale(1.1); box-shadow: 0 0 12px rgba(255, 215, 0, 0.9); } /* ================================ CONTACT FORM ================================ */ .contact-form { margin-top: 30px; display: flex; justify-content: center; } .contact-form form { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 15px; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px; border-radius: 10px; border: none; font-size: 16px; outline: none; } .contact-form button { padding: 12px; background: #ffcc00; border: none; border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; } .contact-form button:hover { opacity: 0.9; } .form-response { margin-top: 10px; font-weight: bold; text-align: center; min-height: 22px; } /* ================================ RADIO LIVE ================================ */ .radio-live { position: fixed; top: 15px; right: 20px; display: flex; align-items: center; gap: 6px; z-index: 50; text-decoration: none; } .radio-live img { width: 55px; height: 55px; border-radius: 50%; border: 3px solid yellow; padding: 3px; object-fit: cover; } .live-badge { background: red; color: white; font-size: 12px; padding: 2px 6px; border-radius: 4px; font-weight: bold; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* ================================ HAZARD BOX ================================ */ .hazard-box { position: fixed; top: 110px; left: -40px; transform: rotate(-45deg); padding: 12px 30px; background: red; border-radius: 6px; z-index: 50; font-weight: bold; animation: hazardBounce 2s ease-in-out infinite alternate; } .hazard-text { color: white; font-size: 16px; white-space: nowrap; } @keyframes hazardBounce { 0% { transform: rotate(-45deg) translateY(0px); } 50% { transform: rotate(-45deg) translateY(-10px); } 100% { transform: rotate(-45deg) translateY(0px); } } /* ================================ RESPONSIVE ================================ */ @media (max-width: 600px) { .hero-title { font-size: 30px; } .hero-text { font-size: 16px; } .center-image { width: 75%; } }
.hero-text {
  max-width: 600px;
  margin: 20px auto;
  text-align: center;
  line-height: 1.6;
  font-size: 1.1rem;
  color: #ffcc00;
}

.hero-title {
  max-width: 720px;
  margin: 0 auto 50px; /* 👈 space BELOW the title */
  text-align: center;
}

/* ================================ CONTACT INFO ================================ */ .contact-info { margin-top: 45px; color: #ffcc00; font-size: 16px; } .contact-info h2 { margin-bottom: 10px; color: #ffcc00; } .contact-info a { color: #ffcc00; font-weight: bold; text-decoration: none; } .contact-info a:hover { text-decoration: underline; }