/* =====================
   Main Layout (Updated)
====================== */

main {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  background-color: inherit;
  padding-block: 4.8rem;
  max-width: 1300px;
  margin-inline: auto;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  padding: 4.8rem 3.2rem;
  background: var(--clr-bg-blur);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 768px) {
  main {
    padding-block: 3.2rem;
    gap: 3.2rem;
  }

  section {
    padding: 3.2rem 1.6rem;
    border-radius: var(--radius-md);
  }
}

/* ==========================
   Hero Section (Updated)
========================== */

.hero-section {
  font-family: var(--font-heading);
  background: var(--btn-bg-tertiary); /* magenta → coral gradient */
  color: var(--clr-surface);
  text-align: center;
  padding: 4.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.hero-section .headline {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-surface);
  margin-bottom: 0.8rem;
}

.hero-section .subheading {
  font-size: var(--fs-md);
  max-width: 800px;
  font-weight: 400;
  color: var(--clr-muted);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 3.2rem 1.2rem;
    border-radius: var(--radius-md);
    gap: 1.6rem;
  }

  .hero-section .headline {
    font-size: var(--fs-lg);
    padding-inline: 1.2rem;
  }

  .hero-section .subheading {
    font-size: var(--fs-base);
    padding-inline: 1.2rem;
  }
}

/* ===========================
   Contact Section (Updated)
=========================== */

.contact-section {
  color: var(--clr-dark);
  text-align: center;
  border: 2px solid var(--clr-surface);
  background: var(--clr-bg-blur);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 3.2rem 1.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 900px;
}

.contact-section .section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--clr-dark);
  margin-bottom: 2.4rem;
}

.btn-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* WhatsApp Button */
.btn-container .btn-whatsapp {
  background: var(--clr-secondary);
  color: var(--clr-dark);
  padding: 1.2rem 2.4rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-whatsapp:hover {
  background: var(--btn-bg-tertiary);
  color: var(--clr-surface);
  transform: scale(1.05);
}

.btn-whatsapp img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* Email Button */
.btn-container .btn-email {
  background: var(--clr-warning);
  color: var(--clr-dark);
  padding: 1.2rem 2.4rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.btn-email:hover {
  background: var(--btn-bg-optional);
  color: var(--clr-surface);
  transform: scale(1.05);
}

.btn-email img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0.6rem;
}

@media (max-width: 768px) {
  .contact-section .section-title {
    font-size: var(--fs-md);
  }

  .btn-container {
    flex-direction: column;
    align-items: center;
  }

  .btn-container .btn-whatsapp,
  .btn-container .btn-email {
    width: 100%;
    max-width: 320px;
  }
}


/* ============================
   Address Section (Updated)
============================= */

.address-section {
  background-color: var(--clr-bg-blur);
  color: var(--clr-dark);
  border: 2px solid var(--clr-surface);
  padding: 0;
  max-width: 900px;
}

.address-section .container {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
  padding: 3.2rem 1.6rem;
  max-width: 1200px;
  margin: auto;
}

/* Address Info */
.container .address-info {
  flex: 1;
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.address-info .section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--clr-dark);
  margin-bottom: 3.2rem;
}

.address-info p {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--clr-muted);
  margin: 0.6rem 0;
}

/* Map */
.container .map-box {
  flex: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width: 768px) {
  .address-section .container {
    flex-direction: column;
    padding: 2.4rem 1.6rem;
    gap: 2rem;
  }

  .container .address-info,
  .container .map-box {
    width: 100%;
    padding: 0;
  }

  .address-info .section-title {
    font-size: var(--fs-lg);
    text-align: center;
    margin-bottom: 2rem;
  }

  .address-info p {
    font-size: var(--fs-sm);
    text-align: center;
  }

  .map-box iframe {
    height: 250px;
  }
}

/* =======================
   Social Section (Updated)
=========================== */

.social-section {
  background: var(--clr-bg-blur);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--clr-dark);
  text-align: center;
  border-top: 1px solid var(--clr-border);
  padding: 3.2rem 1.6rem;
  box-shadow: var(--shadow-sm);
}

.social-section .section-title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-bottom: 2.4rem;
  color: var(--clr-dark);
}

.social-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.4rem;
}

.social-icons a {
  font-size: var(--fs-base);
  color: var(--clr-dark);
  text-decoration: none;
  transition: transform var(--transition-slow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-icons a img {
  width: 8rem;
  height: 8rem;
  vertical-align: middle;
  margin-right: 0.6rem;
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), filter var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.social-icons a:hover {
  transform: scale(1.1);
  filter: brightness(var(--hover-brightness));
}

@media (max-width: 768px) {
  .social-section .section-title {
    font-size: var(--fs-md);
    padding-inline: 1.2rem;
  }

  .social-icons {
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
  }

  .social-icons a {
    font-size: var(--fs-sm);
    width: 100%;
    max-width: 280px;
  }

  .social-icons a img {
    width: 6rem;
    height: 6rem;
    margin: 0 auto;
  }
}


/* ====================
   CTA Section (Updated)
==================== */

.cta-section {
  background: inherit;
  color: var(--clr-surface);
  text-align: center;
  font-family: var(--font-heading);
  padding: 4rem 1.6rem;
}

.cta-section .cta-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  margin-bottom: 1.2rem;
  color: var(--clr-surface);
}

.cta-section .cta-subtext {
  font-size: var(--fs-md);
  margin-bottom: 2.4rem;
  max-width: 700px;
  margin-inline: auto;
}

.cta-section .btn-primary {
  background: var(--btn-bg-optional);
  color: var(--clr-surface);
  padding: 1.2rem 2.4rem;
  border-radius: var(--radius-lg);
  border: 2px solid var(--clr-surface);
  font-size: var(--fs-lg);
  text-decoration: none;
  display: inline-block;
  font-weight: var(--fw-semibold);
  transition: transform var(--transition-fast),
              background-color var(--transition-fast);
}

.cta-section .btn-primary:hover {
  background: var(--btn-bg-tertiary);
  transform: scale(1.02);
}

@media (max-width: 768px) {
  .cta-section .cta-title {
    font-size: var(--fs-lg);
    padding-inline: 1.2rem;
  }

  .cta-section .cta-subtext {
    font-size: var(--fs-sm);
    padding-inline: 1.2rem;
  }

  .cta-section .btn-primary {
    width: 100%;
    max-width: 280px;
    font-size: var(--fs-base);
  }
}