/* rem and em do not depend on HTML fiont size, but on the root font size. This allows us to easily adjust the entire layout by changing the root font size. 1rem = 1em = 16px */

/********************************/
/***** below 1344px  ( smaller desktops) *****/
/********************************/

@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }

  .heading-primary {
    font-size: 4.4rem;
  }
}
/********************************/
/***** below 1200x  ( land scape tablet) *****/
/********************************/

@media (max-width: 75em) {
  html {
    /* 9px / 16 = 0.5625 */
    font-size: 56.25%;
  }

  .grid {
    column-gap: 4.8rem;
    row-gap: 6.4rem;
  }

  .heading-secondary {
    font-size: 3.6rem;
  }

  .heading-tertiary {
    font-size: 2.4rem;
  }

  .header {
    padding: 0 3.2rem;
  }

  .main-nav-list {
    gap: 3.2rem;
  }

  .hero {
    gap: 4.8rem;
  }
}

/********************************/
/***** below 1050 px  ( tablet) *****/
/********************************/

@media (max-width: 65em) {
  /* Show burger */
  .btn-mobile-nav {
    display: block;
    z-index: 1001;
  }

  /* Hide nav by default */
  .main-nav {
    position: absolute;
    top: 9.6rem;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #f5e2fa 0%, #faf0fc 100%);
    padding: 3.2rem;

    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 1000;
  }

  /* When menu is open */
  .nav-open .main-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Stack nav items */
  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3rem;
  }

  /* --- Blurry backdrop when nav is open --- */

  .header::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(245, 226, 250, 0.65); /* soft purple overlay */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
  }

  .header.nav-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* Keep header & nav above the blur */
  .header {
    position: relative;
  }

  /* Language selector sits next to burger */
  .lang-switch.lang-mobile-fixed {
    position: absolute;
    top: 50%;
    right: 8.8rem; /* leaves room for burger */
    transform: translateY(-50%);
    z-index: 1002;
    margin-right: 2.4rem;
  }

  /* Burger right edge */
  .btn-mobile-nav {
    position: absolute;
    right: 3.2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1003;
  }
}
/********************************/
/***** below 944 px  ( tablet) *****/
/********************************/

@media (max-width: 59em) {
  html {
    font-size: 50%;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 0 8rem;
    gap: 6.4rem;
  }
  .hero-text-box,
  .hero-img-box {
    text-align: center;
  }

  .hero-img {
    width: 60%;
  }

  .testimonial {
    justify-content: center;
    margin-top: 3.2rem;
  }

  .step-number {
    font-size: 7.4rem;
  }

  .service-content {
    padding: 1.6rem;
  }

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

  .cta-text-box {
    order: 2;
  }

  .cta-image-box {
    order: 1;
    min-height: 32rem;
  }

  .cta-form {
    grid-template-columns: 1fr;
  }
  .btn--form {
    margin-top: 1.2rem;
  }

  .cta-image-box {
    background-image:
      linear-gradient(
        to right bottom,
        rgba(234, 196, 244, 0.3),
        rgba(219, 152, 236, 0.3)
      ),
      url("../Images/MachedFertility_couple_with_baby_horizontal.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

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

  .nav-col {
    grid-row: 1;
  }

  .logo-col {
    grid-row: 2;
  }

  .address-col {
    grid-row: 2;
  }

  .pricing-plan--highlighted::after {
    top: 6%;
    right: -19%;
  }

  .legal-page {
    padding: 4.8rem 2.4rem;
  }

  .heading-legal {
    font-size: 2.8rem;
  }
}

/********************************/
/***** below 736 px  ( small ablet) *****/
/********************************/

@media (max-width: 46em) {
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-plan--highlighted::after {
    top: 6%;
    right: -25%;
  }
  .cta-text-box {
    padding: 3.2rem;
    order: 2;
  }

  .cta-image-box {
    order: 1;
    min-height: 32rem;
  }

  .legal-page {
    padding: 4.8rem 2.4rem;
  }

  .heading-legal {
    font-size: 2.4rem;
    margin-bottom: 1.2rem;
  }

  .legal-page p,
  .legal-page li {
    font-size: 1.6rem;
    margin-bottom: 2rem;
  }

  .back-home-container {
    margin-bottom: 6.4rem;
  }

  .btn-home {
    font-size: 1.8rem;
    padding: 1.4rem 2.8rem;
  }
}

/********************************/
/***** below 660 px  ( Phone) *****/
/********************************/
@media (max-width: 42em) {
  .container-plan {
    grid-template-columns: 1fr;
  }

  .pricing-plan--highlighted::after {
    top: 6%;
    right: -13%;
  }

  .cta-text-box {
    padding: 3.2rem;
    order: 2;
  }

  .cta-image-box {
    order: 1;
    min-height: 32rem;
  }
}
/********************************/
/***** below 550 px  ( Phone) *****/
/********************************/

@media (max-width: 35em) {
  .grid {
    row-gap: 4.8rem;
  }

  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  .section-hero {
    padding: 2.4rem 0 6.4rem 0;
  }

  .hero {
    padding: 0 3.2rem;
  }

  .hero-img {
    width: 80%;
  }

  .step-img-box:nth-child(2) {
    grid-row: 1;
  }

  .step-img-box:nth-child(6) {
    grid-row: 5;
  }

  .step-img-box {
    transform: translateY(3.2rem);
  }

  .service-img {
    width: 80%;
    display: block;
    margin: 0 auto;
  }

  .cta-text-box {
    padding: 3.2rem;
    order: 2;
  }

  .cta-image-box {
    order: 1;
    min-height: 32rem;
  }

  .pricing-plan--highlighted::after {
    top: 6%;
    right: -17%;
  }
  .footer {
    padding: 4.8rem 2.4rem;
  }

  .grid--footer {
    grid-template-columns: 1fr 1fr;
    row-gap: 3.2rem;
  }

  .logo-col {
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .legal-page {
    padding: 3.2rem 1.6rem;
  }

  .heading-legal {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .legal-page p,
  .legal-page li {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    line-height: 1.5;
  }

  .legal-page ul {
    padding-left: 1.6rem;
  }

  .back-home-container {
    margin-bottom: 4.8rem;
  }

  .btn-home {
    font-size: 1.6rem;
    padding: 1.2rem 2.4rem;
    width: 100%;
    max-width: 30rem;
  }
}

/********************************/
/***** below 380 px  ( small Phone) *****/
/********************************/
@media (max-width: 24em) {
  .pricing-plan--highlighted::after {
    top: 6%;
    right: -22%;
  }

  .cta-image-box {
    background-image:
      linear-gradient(
        to right bottom,
        rgba(234, 196, 244, 0.3),
        rgba(219, 152, 236, 0.3)
      ),
      url("/assets/Images/MatchedFertility_couple_with_baby_horizontal.png");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
  }

  .grid--footer {
    grid-template-columns: 1fr;
    row-gap: 3.2rem;
  }

  .legal-page {
    padding: 2.4rem 1.2rem;
  }

  .heading-legal {
    font-size: 1.8rem;
  }

  .legal-page p,
  .legal-page li {
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
  }

  .back-home-container {
    margin-bottom: 3.2rem;
  }

  .btn-home {
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }
}

/********************************/
/***** below 285px (very small mobile) *****/
/********************************/

@media (max-width: 24.5em) {
  /* Reduce overall font size */
  html {
    font-size: 44%;
  }

  /* Footer adjustments for tiny screens */
  .footer {
    padding: 3.2rem 1.6rem;
  }

  .footer-heading {
    font-size: 1.3rem;
    margin-bottom: 2.4rem;
  }

  .contacts {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .footer-link:link,
  .footer-link:visited {
    font-size: 1.2rem;
    word-break: break-all;
    line-height: 1.4;
  }

  .copyright {
    font-size: 0.9rem;
  }

  .grid--footer {
    row-gap: 1.8rem;
  }

  .pricing-plan--highlighted::after {
    top: 6%;
    right: -19%;
  }

  .legal-page {
    padding: 2.4rem 1rem;
  }

  .heading-legal {
    font-size: 1.8rem;
  }

  .legal-page p,
  .legal-page li {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
  }

  .btn-home {
    font-size: 1.4rem;
    padding: 1rem 1.6rem;
  }
}
/*
-Font sizes (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 48 / 52 / 62 / 64 / 74 / 80 / 96 / 128

-Spacing system (px):

2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/