/* === 🌞 Light Mode (Default) === */
html, body {
  min-height: 100vh;
  scroll-behavior: smooth;
  background-color: #ffffff !important;
  color: #111 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body, #barba-container, #page-wrapper, .section, .container {
  background-color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #000 !important;
  font-weight: bold !important;
}

.intro,
ul,
.landing-wrapper,
.section,
.container,
.payment-page,
footer,
.footer,
footer * {
  color: #111 !important;
}

/* === Layout: Landing === */
.landing-wrapper {
  text-align: center;
  max-width: 800px;
  margin: auto;
  padding: 40px 20px;
  animation: fadeIn 1.2s ease-in-out;
}

.landing-wrapper h1 {
  font-size: 2.6rem;
  margin-bottom: 20px;
  color: #000 !important;
  font-weight: bold !important;
}

/* === Typography === */
ul {
  text-align: left;
  max-width: 680px;
  margin: 20px auto;
  line-height: 1.7;
  font-size: 1rem;
}

/* === Avatar === */
.avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  margin: 10px 0 25px 0;
  transition: transform 0.3s ease-in-out;
}
.avatar:hover {
  transform: scale(1.05);
}

/* === Links === */
.service-links a,
.social-links a {
  display: inline-block;
  margin: 10px;
  font-size: 1.1rem;
  color: #007bff !important;
  text-decoration: none;
  transition: color 0.3s ease;
}
.service-links a:hover,
.social-links a:hover {
  color: #000 !important;
}

/* === CTA Buttons (Green) === */
.contact-button,
.contact-button a {
  display: inline-block;
  margin-top: 20px;
  background-color: #28a745 !important;
  color: #fff !important;
  padding: 8px 18px;
  font-size: 1.05rem; /* Just slightly larger than body text */
  font-weight: 500;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-button:hover,
.contact-button a:hover {
  background-color: #218838 !important;
  color: #fff !important;
}


/* === Form Inputs === */
input, textarea, select {
  background-color: #fff !important;
  color: #111 !important;
  border: 1px solid #ccc !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.3) !important;
  outline: none !important;
}
::placeholder {
  color: #555 !important;
}
/* === 🧾 Forms Plugin: Global Styles === */
form {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
}

form label {
  display: block;
  margin: 15px 0 5px;
  font-weight: 600;
  color: inherit !important;
}

form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="url"],
form input[type="number"],
form select,
form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #ccc !important;
  background-color: #fff !important;
  color: #111 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input:focus,
form select:focus,
form textarea:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3) !important;
  outline: none !important;
}

form ::placeholder {
  color: #555 !important;
}

form button[type="submit"],
form .button {
  background-color: #28a745 !important;
  color: #fff !important;
  border: none;
  padding: 10px 22px;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 20px;
}

form button[type="submit"]:hover,
form .button:hover {
  background-color: #218838 !important;
}
/* === Navigation: Hamburger & Overlay === */
.mobile-menu {
  display: block !important;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
.desktop-menu {
  display: none !important;
}
.overlay-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  background-color: #111 !important;
  padding: 40px 20px;
  z-index: 999;
  display: none;
  transition: opacity 0.4s ease;
}
.overlay.open .overlay-menu {
  display: block !important;
}
nav.dropmenu a {
  font-size: 0 !important;
}
nav.dropmenu a i {
  font-size: 1.2rem !important;
  margin-right: 0 !important;
  color: #fff !important;
}
nav.dropmenu a:hover i {
  color: #fff !important;
}

/* === Animations === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === 🌙 Dark Mode === */
@media (prefers-color-scheme: dark) {
  html, body {
    background-color: #000 !important;
    color: #fff !important;
  }
.logo img,
.mobile-logo img {
  filter: invert(1) brightness(1.4) !important;
}
/* Target general form fields */
form input[type="text"],
  form input[type="email"],
  form input[type="password"],
  form input[type="tel"],
  form input[type="url"],
  form input[type="number"],
  form input[type="search"],
  form input[type="date"],
  form textarea,
  form select,
  .form-input,
  .form-textarea,
  .form-select {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #666 !important;
  }

  /* === Focus state === */
  form input:focus,
  form textarea:focus,
  form select:focus,
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    border-color: #6cf !important;
    box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.3) !important;
    outline: none !important;
  }

  /* === Placeholder text === */
  form ::placeholder,
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: #ccc !important;
  }

  /* === Labels === */
  form label,
  .form-label {
    color: #fff !important;
  }
	
	body, #barba-container, #page-wrapper, .section, .container {
    background-color: #000 !important;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
    font-weight: bold !important;
  }

  .intro,
  ul,
  .landing-wrapper,
  .payment-page,
  .thank-you,
  p,
  li,
  strong {
    color: #fff !important;
  }

  .landing-wrapper h1 {
    color: #fff !important;
  }

  .service-links a,
  .social-links a {
    color: #6cf !important;
  }

  .service-links a:hover,
  .social-links a:hover {
    color: #fff !important;
  }

  /* ✅ Green Button preserved in dark mode too */
  .contact-button,
  .contact-button a {
    background-color: #28a745 !important;
    color: #fff !important;
  }

  .contact-button:hover,
  .contact-button a:hover {
    background-color: #218838 !important;
    color: #fff !important;
  }

  input, textarea, select {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #888 !important;
  }

  input:focus, textarea:focus, select:focus {
    border-color: #6cf !important;
    box-shadow: 0 0 0 2px rgba(102, 204, 255, 0.3) !important;
    outline: none !important;
  }

  ::placeholder {
    color: #ccc !important;
  }

  nav.dropmenu a i {
    color: #fff !imp