/* =========================================================
   MELAKI ACADEMY — CONTACT PAGE
   ========================================================= */


/* =========================================================
   1. GLOBAL RESET
   ========================================================= */

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


html {
  scroll-behavior: smooth;
}


body {
  font-family: Arial, Helvetica, sans-serif;

  color: #222;

  background-color: #fff;

  line-height: 1.6;
}


img {
  max-width: 100%;

  display: block;
}


a {
  text-decoration: none;

  color: inherit;
}


button,
input,
textarea,
select {
  font: inherit;
}


.container {
  width: min(1120px, 92%);

  margin: 0 auto;
}


/* =========================================================
   2. COLOUR VARIABLES
   ========================================================= */

:root {
  /* =========================================================
     MELAKI ACADEMY — APPROVED BRAND COLOURS
     ========================================================= */

  --jungle-green: #6B7A52;
  --jungle-green-dark: #4F5A3A;
  --jungle-green-light: #8FA070;

  --gold: #C9A24A;
  --gold-light: #E4C778;
  --gold-pale: #F5EAD0;

  --white: #FFFFFF;
  --cream: #FAF8F2;
  --cream-dark: #F3EEE2;

  --text-dark: #18251F;
  --text-light: #65706B;

  --border: #E5DCC9;

  --shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

  --container-width: 1120px;

  /* Existing Contact-page selector compatibility */
  --dark-green: var(--jungle-green-dark);
  --green: var(--jungle-green);
  --green-light: var(--jungle-green-light);

  --black: #222222;
  --grey: #666666;

  /* Footer remains intentionally dark */
  --footer-dark: #172016;
}


/* =========================================================
   3. TOP BAR
   ========================================================= */

.top-bar {
  background-color: var(--dark-green);

  color: var(--white);

  font-size: 13px;
}


.top-bar-content {
  min-height: 42px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.top-contact {
  display: flex;

  align-items: center;

  gap: 12px;
}


.top-contact a {
  display: flex;

  align-items: center;

  gap: 7px;

  transition: color 0.25s ease;
}


.top-contact a:hover {
  color: var(--gold);
}


.top-contact i {
  color: var(--gold-light);
}


.top-divider {
  opacity: 0.5;
}


.top-motto {
  font-size: 12px;

  letter-spacing: 0.8px;

  text-transform: uppercase;

  opacity: 0.9;
}


.top-socials {
  display: flex;

  align-items: center;

  gap: 14px;
}


.top-socials a {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}


.top-socials a:hover {
  color: var(--gold);

  transform: translateY(-2px);
}


/* =========================================================
   4. MAIN HEADER
   Matches Courses Page Header
   ========================================================= */

.main-header {
  background-color: white;

  border-bottom: 1px solid #eee9df;

  position: sticky;

  top: 0;

  z-index: 1000;
}


.header-content {
  min-height: 70px;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


/* =========================================================
   5. LOGO
   ========================================================= */

.site-logo {
  display: flex;

  align-items: center;

  flex-shrink: 0;
}


.site-logo img {
  width: 145px;

  height: auto;
}


/* =========================================================
   6. MAIN NAVIGATION
   ========================================================= */

.main-navigation {
  display: flex;

  align-items: center;

  gap: 34px;
}


.main-navigation > a {
  position: relative;

  color: #19362b;

  font-size: 14px;

  font-weight: 500;

  padding: 25px 0;

  transition: color 0.25s ease;
}


/* Hover */

.main-navigation > a:hover {
  color: var(--gold);
}


/* Active Contact page */

.main-navigation > a.active {
  color: var(--gold);
}


/* Active underline */

.main-navigation > a.active::after {
  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 15px;

  height: 2px;

  background-color: var(--gold);
}


/* =========================================================
   7. HEADER ACTIONS
   ========================================================= */

.header-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-shrink: 0;
}


.nav-apply-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  padding: 0 22px;

  border-radius: 25px;

  background-color: var(--dark-green);

  color: white !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  border: none;

  cursor: pointer;

  gap: 8px;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}


.nav-apply-button:hover {
  background-color: var(--jungle-green-dark) !important;

  color: white !important;

  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(79, 90, 58, 0.20);
}


.nav-apply-button::after {
  display: none !important;
}


/* =========================================================
   8. MOBILE MENU BUTTON
   ========================================================= */

.menu-toggle {
  display: none;

  width: 42px;

  height: 42px;

  border: 1px solid var(--border);

  border-radius: 5px;

  background-color: white;

  cursor: pointer;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;
}


.menu-toggle span {
  width: 21px;

  height: 2px;

  background-color: var(--dark-green);
}


/* =========================================================
   9. CONTACT HERO
   ========================================================= */

.contact-hero {
  min-height: 470px;

  position: relative;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(79, 90, 58, 0.94),
      rgba(79, 90, 58, 0.78),
      rgba(79, 90, 58, 0.35)
    ),
    url("../images/contact/contact-hero.png");

  background-size: cover;

  background-position: center;
}


.contact-hero-overlay {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 80% 50%,
      rgba(201, 162, 74, 0.15),
      transparent 40%
    );
}


.contact-hero-content {
  position: relative;

  z-index: 2;
}


.contact-hero-text {
  max-width: 650px;

  color: var(--white);
}


.section-label {
  display: inline-block;

  color: var(--gold-light);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 13px;
}


.contact-hero h1 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(46px, 6vw, 72px);

  line-height: 1.05;

  margin-bottom: 22px;
}


.contact-hero p {
  max-width: 590px;

  font-size: 18px;

  line-height: 1.8;

  color: rgba(255, 255, 255, 0.9);
}


/* =========================================================
   10. SECTION HEADINGS
   ========================================================= */

.section-heading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  margin-bottom: 45px;
}


.section-heading h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 34px;

  color: var(--dark-green);

  text-align: center;
}


.heading-line {
  width: 55px;

  height: 1px;

  background-color: var(--gold);
}


/* =========================================================
   11. CONTACT INFORMATION
   ========================================================= */

.contact-information {
  padding: 85px 0;

  background-color: var(--white);
}


.contact-cards {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}


.contact-card {
  text-align: center;

  padding: 38px 25px;

  background-color: var(--cream);

  border: 1px solid #eee5d0;

  border-radius: 8px;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}


.contact-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.08);
}


.contact-icon {
  width: 64px;

  height: 64px;

  margin: 0 auto 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background-color: var(--green-light);

  color: var(--green);

  font-size: 23px;
}


.contact-card h3 {
  color: var(--dark-green);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 22px;

  margin-bottom: 8px;
}


.contact-card a,
.contact-value {
  display: block;

  color: var(--green);

  font-weight: 700;

  font-size: 17px;

  margin-bottom: 6px;
}


.contact-card a:hover {
  color: var(--gold);
}


.contact-card p {
  color: var(--grey);

  font-size: 14px;
}


/* =========================================================
   12. ENQUIRY SECTION
   ========================================================= */

.enquiry-section {
  padding: 90px 0;

  background-color: var(--cream);
}


.enquiry-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, 0.75fr);

  gap: 55px;

  align-items: start;
}


/* =========================================================
   13. FORM CONTAINER
   ========================================================= */

.enquiry-form-container {
  background-color: var(--white);

  padding: 42px;

  border-radius: 10px;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.06);
}


.form-heading {
  display: flex;

  align-items: center;

  gap: 17px;

  margin-bottom: 32px;
}


.form-heading-icon {
  width: 52px;

  height: 52px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: var(--green-light);

  color: var(--green);

  border-radius: 50%;
}


.form-heading h2 {
  color: var(--dark-green);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 29px;

  line-height: 1.2;
}


.form-heading p {
  color: var(--grey);

  font-size: 14px;

  margin-top: 4px;
}


/* =========================================================
   14. FORM
   ========================================================= */

.contact-form {
  display: flex;

  flex-direction: column;

  gap: 20px;
}


.form-row {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 18px;
}


.form-group {
  display: flex;

  flex-direction: column;

  gap: 8px;
}


.form-group label {
  color: var(--dark-green);

  font-size: 14px;

  font-weight: 700;
}


.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;

  border: 1px solid var(--border);

  border-radius: 5px;

  background-color: var(--white);

  color: var(--black);

  padding: 13px 14px;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.form-group input,
.form-group select {
  height: 48px;
}


.form-group textarea {
  min-height: 145px;

  resize: vertical;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #999;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);

  box-shadow:
    0 0 0 3px rgba(107, 122, 82, 0.12);
}


/* =========================================================
   15. SUBMIT BUTTON
   ========================================================= */

.submit-button {
  border: none;

  background-color: var(--dark-green);

  color: var(--white);

  min-height: 51px;

  padding: 0 23px;

  border-radius: 5px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  font-weight: 700;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}


.submit-button:hover {
  background-color: var(--jungle-green-dark);

  transform: translateY(-2px);
}


.form-note {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  color: #888;

  font-size: 12px;

  text-align: center;
}


.form-note i {
  color: var(--green);
}


/* =========================================================
   16. WHATSAPP CARD
   ========================================================= */

.whatsapp-card {
  min-height: 500px;

  border-radius: 10px;

  overflow: hidden;

  position: relative;

  background:
    linear-gradient(
      145deg,
      var(--dark-green),
      var(--green)
    );

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 45px 35px;

  text-align: center;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.1);
}


.whatsapp-card::before {
  content: "";

  position: absolute;

  width: 230px;

  height: 230px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  top: -70px;

  right: -70px;
}


.whatsapp-card::after {
  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  border: 1px solid rgba(201, 162, 74, 0.2);

  bottom: -70px;

  left: -60px;
}


.whatsapp-content {
  position: relative;

  z-index: 2;
}


.whatsapp-icon {
  width: 76px;

  height: 76px;

  margin: 0 auto 25px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: rgba(255, 255, 255, 0.12);

  color: var(--gold-light);

  font-size: 38px;
}


.whatsapp-card .section-label {
  margin-bottom: 12px;
}


.whatsapp-card h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 34px;

  line-height: 1.2;

  margin-bottom: 20px;
}


.whatsapp-card p {
  color: rgba(255, 255, 255, 0.86);

  font-size: 15px;

  line-height: 1.8;

  margin-bottom: 28px;
}


.whatsapp-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 13px 22px;

  border-radius: 5px;

  background-color: var(--white);

  color: var(--dark-green);

  font-weight: 700;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}


.whatsapp-button:hover {
  background-color: var(--gold-light);

  transform: translateY(-2px);
}


.whatsapp-number {
  display: block;

  margin-top: 16px;

  color: rgba(255, 255, 255, 0.75);

  font-size: 13px;
}


/* =========================================================
   17. FOOTER
   ========================================================= */

.site-footer {
  background-color: var(--footer-dark);

  color: var(--white);
}


.footer-grid {
  padding: 65px 0;

  display: grid;

  grid-template-columns:
    1.5fr
    1fr
    1fr
    1.2fr;

  gap: 40px;
}


/* =========================================================
   FOOTER LOGO — GOLD
   ========================================================= */

.footer-brand img {
  width: 130px;
  height: auto;
  margin-bottom: 18px;

  /* Approved Melaki gold */
  filter:
    brightness(0)
    saturate(100%)
    invert(72%)
    sepia(34%)
    saturate(750%)
    hue-rotate(2deg)
    brightness(90%)
    contrast(88%);
}


.footer-brand p {
  color: rgba(255, 255, 255, 0.7);

  max-width: 220px;

  font-size: 14px;
}


.footer-socials {
  display: flex;

  gap: 12px;

  margin-top: 22px;
}


.footer-socials a {
  width: 34px;

  height: 34px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}


.footer-socials a:hover {
  background-color: var(--gold);

  color: var(--dark-green);
}


.footer-column {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.footer-column h3 {
  color: var(--gold-light);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 18px;

  margin-bottom: 20px;
}


.footer-column > a,
.footer-column > p {
  color: rgba(255, 255, 255, 0.72);

  font-size: 14px;

  margin-bottom: 11px;

  transition: color 0.2s ease;
}


.footer-column > a:hover {
  color: var(--gold-light);
}


.footer-contact a,
.footer-contact p {
  display: flex;

  align-items: center;

  gap: 9px;
}


.footer-contact i {
  width: 16px;

  color: var(--gold-light);
}


/* =========================================================
   18. FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}


.footer-bottom-content {
  min-height: 65px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


.footer-bottom p {
  color: rgba(255, 255, 255, 0.55);

  font-size: 12px;
}


.footer-bottom strong {
  color: var(--gold-light);
}


/* =========================================================
   19. TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .main-navigation {
    gap: 22px;
  }


  .header-content {
    gap: 20px;
  }


  .contact-cards {
    gap: 15px;
  }


  .enquiry-grid {
    grid-template-columns: 1fr;
  }


  .whatsapp-card {
    min-height: 380px;
  }


  .footer-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* =========================================================
   20. MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 800px) {

  .top-motto {
    display: none;
  }


  .top-socials {
    display: none;
  }


  .top-bar-content {
    justify-content: center;
  }


  .header-content {
    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;
  }


  .site-logo img {
    width: 110px;
  }


  .main-navigation {
    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background-color: white;

    border-top: 1px solid #eeeeee;

    box-shadow:
      0 12px 25px rgba(0, 0, 0, 0.08);

    padding: 15px 5%;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;
  }


  .main-navigation.is-open {
    display: flex;
  }


  .main-navigation > a {
    padding: 14px 0;

    border-bottom: 1px solid #eeeeee;
  }


  .main-navigation > a.active::after {
    display: none;
  }


  .header-actions {
    display: none;
  }


  .menu-toggle {
    display: flex;
  }

}


/* =========================================================
   21. MOBILE CONTACT HERO
   ========================================================= */

@media (max-width: 600px) {

  .contact-hero {
    min-height: 390px;

    background-position: center;
  }


  .contact-hero h1 {
    font-size: 46px;
  }


  .contact-hero p {
    font-size: 16px;

    line-height: 1.7;
  }


  .section-heading {
    gap: 10px;

    margin-bottom: 32px;
  }


  .section-heading h2 {
    font-size: 28px;
  }


  .heading-line {
    width: 30px;
  }


  .contact-information {
    padding: 65px 0;
  }


  .contact-cards {
    grid-template-columns: 1fr;
  }


  .enquiry-section {
    padding: 65px 0;
  }


  .enquiry-form-container {
    padding: 28px 20px;
  }


  .form-heading h2 {
    font-size: 24px;
  }


  .form-row {
    grid-template-columns: 1fr;
  }


  .whatsapp-card {
    min-height: 400px;

    padding: 35px 25px;
  }


  .whatsapp-card h2 {
    font-size: 30px;
  }


  .footer-grid {
    grid-template-columns: 1fr;

    gap: 35px;

    padding: 50px 0;
  }


  .footer-bottom-content {
    flex-direction: column;

    justify-content: center;

    text-align: center;

    padding: 20px 0;
  }

}


/* =========================================================
   22. SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

  .top-contact span {
    font-size: 12px;
  }


  .top-contact {
    gap: 8px;
  }


  .top-contact .top-divider {
    display: none;
  }


  .top-contact a:last-child span {
    display: none;
  }


  .contact-hero h1 {
    font-size: 39px;
  }


  .contact-hero p {
    font-size: 15px;
  }


  .form-heading {
    align-items: flex-start;
  }


  .form-heading-icon {
    width: 45px;

    height: 45px;
  }


  .form-heading h2 {
    font-size: 21px;
  }

}
/* =====================================================
   MOBILE APPLY LINK
   ===================================================== */

.mobile-apply-link {
  display: none;
}


@media (max-width: 800px) {

  .mobile-apply-link {
    display: block;

    width: 100%;

    margin-top: 5px;

    padding: 14px 15px !important;

    border-top: 1px solid var(--border);

    color: var(--green) !important;

    font-weight: 700 !important;

    text-align: center;
  }


  .mobile-apply-link:hover {
    color: var(--gold) !important;
  }

}