/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
  .explore__section {
    padding-top: 0;
  }

  .blockcolour_section__content {
    padding-left: var(--padding-md);
    padding-right: var(--padding-md);
  }

  .homepage-header {
    width: 60%;
  }
  /* html { */
  /* 9px / 16px  */
  /* font-size: 56.25%;
  } */

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 1;
  }

  .main-nav {
    background-color: var(--lightgreen);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

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

  .introduction__col-02 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .explore__col-01,
  .explore__col-04,
  .explore__col-05 {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .retreat__content {
    padding: 0 var(--padding-md);
  }

  .about__introduction_col-01 {
    width: 100%;
  }

  .header-content {
    width: 90%;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  .full-header {
    background-image: url(/img/nurture-breath-homepage-header-mobile-sm.jpg);
    background-position: top right;
  }

  .homepage-header {
    width: 70%;
  }
  /* html {
    /* 8px / 16px = 0.5 = 50% */
  /* font-size: 55%;
  } */

  .about__content {
    padding: 2rem 0;
  }

  .img_social {
    border-radius: 20%;
  }

  .five-col {
    column-gap: 1.2rem;
  }

  .explore__col-01,
  .explore__col-04,
  .explore__col-05,
  .explore__col-08 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .introduction__col-02 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .two-col {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 4rem;
    column-gap: 5rem;
  }

  .introduction__description {
    width: 100%;
  }

  .margin-top-lg {
    padding-top: var(--padding-md);
  }

  .margin-top-md {
    margin-top: var(--margin-sm);
  }

  .margin-top-sm {
    margin-top: var(--margin-xs);
  }

  .margin-top-xs {
    margin-top: var(--margin-2xs);
  }

  .four-col {
    column-gap: 4rem;
  }

  .grid--footer {
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
    row-gap: 10rem;
    margin-top: var(--margin-md);
  }
  .footer__col-03 {
    width: 80%;
    grid-column: 1 / span 2;
  }

  .cta__email--footer {
    width: 100%;
  }

  .explore__section {
    padding-top: var(--padding-lg);
  }

  .quote__section {
    padding-top: var(--padding-lg);
  }

  .attributes__section {
    padding-top: var(--padding-sm);
  }

  .attributes__content {
    margin-top: var(--margin-sm);
  }

  .cta__section {
    padding-top: var(--padding-lg);
  }

  .logo-small_box {
    margin-top: var(--margin-sm);
  }

  .three-col {
    grid-template-columns: 1fr;
    column-gap: 3rem;
    row-gap: 7rem;
  }

  .what-we-offer__img {
    width: 60%;
  }

  .what-we-offer__description {
    width: 90%;
  }

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

  .about__introduction_col-02 {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: var(--margin-sm); */
  }

  /* .supporting-img--about {
    width: 60%;
  } */

  .quote {
    line-height: 1.1;
  }

  .heading-title-container {
    padding-top: var(--margin-xs);
  }

  .subpages-heading {
    width: 80%;
  }

  .header-content {
    width: 90%;
  }
}

@media (max-width: 50em) {
  .blockcolour_section__content {
    padding: var(--padding-sm) 0;
  }

  .subpage__introduction_col-02 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .supporting-img {
    width: 80%;
  }

  .introduction__section {
    padding-bottom: var(--padding-xs);
  }

  .two-col {
    grid-template-columns: 1fr;
    row-gap: 5rem;
  }

  .two-col--about {
    row-gap: 3rem;
  }

  .introduction__description {
    width: 90%;
  }

  .img_introduction {
    width: 70%;
  }

  .img_explore--01,
  .img_explore--02,
  .img_explore--03,
  .img_explore--04 {
    width: 60%;
  }

  .explore__col-02,
  .explore__col-03,
  .explore__col-06,
  .explore__col-07 {
    width: 90%;
  }

  .explore__col-01 {
    /* Breathwork img */
    order: 1;
  }

  .explore__col-02 {
    /* Breathwork text */
    order: 2;
  }

  .explore__col-03 {
    /* Yoga text */
    order: 4;
  }

  .explore__col-04 {
    /* Yoga img */
    order: 3;
    margin-top: var(--margin-sm);
  }

  .explore__col-05 {
    /* Reiki img */
    order: 5;
    margin-top: var(--margin-sm);
  }

  .explore__col-06 {
    /* Reiki text */
    order: 6;
  }

  .explore__col-07 {
    /* Ascension text */
    order: 8;
  }

  .explore__col-08 {
    /* Ascension img */
    order: 7;
    margin-top: var(--margin-sm);
  }

  .quote__section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--padding-lg);
  }

  .quote__content {
    padding: var(--margin-xs) 6rem;
  }

  .retreat__content {
    padding: 0;
  }

  .retreat__col-01 {
    width: 90%;
  }

  .header-content {
    width: 90%;
  }

  .h1 {
    width: 90%;
  }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
  .what-we-offer__description {
    width: 100%;
  }

  .introduction__section {
    padding-bottom: var(--padding-sm);
  }

  /* html {
    font-size: 55%;
  } */

  .five-col {
    grid-template-columns: repeat(4, 1fr);
    row-gap: 0;
    column-gap: 1.8rem;
  }

  .four-col {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 5rem;
  }

  .attributes__content {
    padding: 0 4rem;
  }

  .footer__col-03 {
    width: 100%;
  }

  .img_social--05 {
    display: none;
  }

  .header__content {
    margin-top: var(--margin-md);
  }

  /* .two-col--subpages {
    grid-template-columns: 1fr;
  } */

  .cta__section {
    padding-top: var(--padding-md);
  }

  .three-col {
    grid-template-columns: 1fr;
    row-gap: 5rem;
  }

  .what-we-offer__img {
    border-radius: 20px;
    width: 60%;
  }

  .subpages-heading {
    line-height: 1.1;
    width: 80%;
  }

  .retreat__col-02 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .supporting-img--retreat {
    border-radius: 20px;
    width: 60%;
  }

  .what-we-offer__img--02,
  .what-we-offer__img--03 {
    margin-top: var(--margin-sm);
  }

  .cta__form {
    grid-template-columns: 1fr;
    display: block;
  }

  .cta__firstname,
  .cta__lastname,
  .cta__message {
    margin-top: 2.4rem;
  }

  .cta__message textarea {
    height: 20rem;
  }

  .link--cta {
    margin-top: 3rem;
  }

  .background-colour {
    clip-path: ellipse(400% 100% at 50% 100%);
  }

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

  .supporting-img--about {
    width: 80%;
  }

  .supporting-img--connect {
    width: 80%;
  }

  .about__introduction_col-01 {
    width: 100%;
  }

  .social__section {
    padding-top: var(--padding-lg);
  }

  .quote__section {
    padding-top: var(--padding-md);
  }

  .about__description {
    margin-bottom: var(--margin-xs);
  }
  .link-header {
    margin-top: var(--margin-md);
  }
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  /* .link_box {
    padding-top: var(--padding-2xs);
  } */

  .link-header {
    visibility: hidden;
  }

  .supporting-img {
    width: 100%;
  }

  .full-header {
    min-height: 100vh;
  }

  .five-col {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1rem;
    column-gap: 1rem;
  }

  .img_social--05 {
    display: none;
  }

  .subpages-heading {
    width: 100%;
  }

  .background-colour {
    clip-path: ellipse(500% 100% at 50% 100%);
  }

  .what-we-offer__img--02,
  .what-we-offer__img--03 {
    margin-top: var(--margin-xs);
  }

  .grid--footer {
    display: block;
    margin-top: var(--margin-xs);
  }

  .footer__col-02 {
    margin-top: var(--margin-sm);
  }

  .footer__col-03 {
    margin-top: var(--margin-md);
  }

  .subheading {
    width: 100%;
  }

  .introduction__description {
    width: 100%;
  }

  .quote__section {
    padding-top: var(--padding-lg);
  }

  .quote__section--about {
    padding-top: var(--padding-md);
  }

  .about__introdution-part2 {
    padding-top: var(--padding-sm);
  }

  .header-content {
    width: 90%;
  }

  .img_introduction {
    width: 100%;
  }

  .img_explore--01,
  .img_explore--02,
  .img_explore--03,
  .img_explore--04 {
    width: 90%;
  }

  .four-col {
    grid-template-columns: 1fr;
    row-gap: 5rem;
  }

  .attributes__content {
    padding: 0;
  }

  .explore__col-02,
  .explore__col-03,
  .explore__col-06,
  .explore__col-07 {
    width: 100%;
  }

  .explore__section {
    padding-top: var(--padding-md);
  }

  .quote__content {
    padding: var(--margin-2xs) 2rem;
  }

  .attributes__section {
    padding-top: var(--padding-md);
  }

  .attributes__description {
    width: 80%;
  }

  .social__section {
    padding-top: var(--padding-md);
  }

  .social__title {
    text-align: center;
  }

  .h2 {
    text-align: center;
  }

  .two-col--introduction {
    gap: 7rem;
  }

  .explore__col-04,
  .explore__col-05 {
    margin-top: var(--margin-sm);
  }

  .heading-title-container {
    padding-top: var(--margin-xs);
  }

  .supporting-img--retreat {
    width: 100%;
  }

  .what-we-offer__img {
    width: 90%;
  }

  .what-we-offer__description {
    width: 100%;
  }

  .supporting-img--about {
    width: 100%;
  }

  .about__introduction_col-02 {
    margin-top: 0;
  }

  .quote__section--about {
    margin-top: 0;
  }

  .supporting-img--connect {
    width: 100%;
  }

  .explore__description {
    margin-bottom: var(--margin-2xs);
  }

  .cta__form {
    margin-top: var(--margin-sm);
  }

  .what-we-offer__section {
    padding: var(--padding-xs) 0 var(--padding-md) 0;
  }

  .cta__section {
    padding-top: var(--padding-lg);
  }

  .full-img {
    background-attachment: scroll;
  }
}