/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: #0e0e0e;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

/* Grid container */
.coming-soon-grid {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 25px;
  text-align: center;
  max-width: 500px;
  width: 100%;
}

/* Logo */
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.logo img {
  width: 400px;
  height: auto;
  margin: 0 auto;
  display: block;
  animation: popIn 1s ease;
}

/* Tagline */
.coming-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1.75rem;
  font-weight: 100;
  color: #a89479;
}

/* Form */
.notify-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.notify-form input {
  padding: 12px;
  border: none;
  border-radius: 6px;
  outline: none;
  font-size: 1rem;
}

.notify-form button {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  background: #69371e;
  color: #a89479;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

.notify-form button:hover {
  background: #211009;
}

/* Footer */
.footer {
  width: 100%;
  text-align: center;
  font-size: 0.9rem;
  color: #aaa;
  padding: 15px 10px;
  background: rgba(0, 0, 0, 0.4); /* Transparent overlay */
  position: relative; /* Normal footer at bottom of content */
  z-index: 1;
}

/* On small screens make text smaller */
@media (max-width: 768px) {
  .footer {
    font-size: 0.8rem;
    padding: 12px 8px;
  }
}

@media (max-width: 480px) {
  .footer {
    font-size: 0.75rem;
    padding: 10px 5px;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
}


/* Responsive */
@media (max-width: 768px) {
  .logo img { width: 200px; }
  .coming-text { font-size: 1.1rem; font-family: 'Poppins', sans-serif;
}
}

@media (max-width: 480px) {
  .logo img { width: 200px; }
  .coming-text { font-size: 1rem; font-family: 'Poppins', sans-serif;
}
  .notify-form {
    grid-template-columns: 1fr;
  }
  .notify-form button {
    width: 100%;
  }
}

/* Animation */
@keyframes popIn {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Hide success message by default */
.hidden {
  display: none;
}

/* Style of success message */
#success-message {
  color: #69371e;                /* White text (you can change this) */
  font-family: 'Poppins', sans-serif;

  font-size: 1.2rem;          /* Slightly bigger text */
  margin-top: 15px;           /* Space above it */
  text-align: center;         /* Center align */
  animation: fadeIn 0.8s ease-in-out;  /* Smooth fade-in effect */
}

/* Animation keyframes for fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;               /* Start invisible */
    transform: translateY(10px); /* Slightly down */
  }
  to {
    opacity: 1;               /* Fully visible */
    transform: translateY(0); /* In place */
  }
}