@media (max-width: 98em) {

    html {
        font-size: 58.5%;
    }
    .banner {
        height: 100rem;
        position: relative;
        background-position: center;
    
    }
}

@media (max-width: 82em) {

    html {
        font-size: 54.5%;
    }
    .banner {
        height: 85rem;
        position: relative;
        background-position: center;
    
    }

    .hero {
        max-width: 110rem;
        gap: 4.8rem;
    }  
}

@media (max-width: 74em) {

    .banner {
        height: 83rem;
    }

    .container {
        max-width: 105rem;
    }

    .services-heading {
        padding-left: 2.6rem;
    }
}

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

    .banner {
        height: 70rem;
    }

    .container {
        max-width: 90rem;
    }

    .hero {
        max-width: 95rem;
        gap: 4.8rem;
    }   

    .hero-heading {
        font-size: 4.2rem;
    }

    .hero-img-box {
        width: 50rem;
    }
    
    .services-container {
        max-width: 100rem;
    }

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

    .btn--full:link,
    .btn--full:visited {
        margin-right: 0rem;
    }
}

@media (max-width: 51em) {

    html {
        font-size: 50%;
    }
    
    .header {
        padding: 1.2rem;
    }

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

    .banner {
        height: 60rem;
    }

    .skills img {
        height: 7rem;
        margin-right: 3.2rem;
    }

    .container {
        max-width: 70rem;
    }

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

    .hero {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        max-width: 60rem;
        height: 50rem;
    }

    .hero-heading {
        font-size: 4.8rem;
    }

    .hero-description {
        margin-bottom: 2.2rem;
    }

    .btn--full:link,
    .btn--full:visited {
        margin-right: 2.8rem;
    }

    .hero-img-box {
        display: none;
    }

    .hero-img {
        height:34rem;
    }

    /* .hero-description {
        height: 13rem;
    } */

    /* .dots {
        bottom: 51%;
    } */

    .heading-skills {
        margin-bottom: 1.2rem;
    }

    .services-container {
        max-width: 65rem;
    }

    .section-services {
        padding: 3.2rem 0;
    }

    .services-heading {
        padding: 0 2.6rem;
    }

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

    .heading-secondary {
        margin-bottom: 3.2rem;
    }

    .cta-section {
        padding: 3.2rem 1.8rem;
    }

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

    .cta-img-box {
        height: 36rem;
        grid-row: 1;
        background-position:bottom;
    }    

    .footer {
        padding: 4.8rem 1.8rem 6.2rem 1.8rem;
    }

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

    .nav-footer {
        grid-column: 2;
    }

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

    .nav-footer li {
        padding-right: 2.8rem;
    }

    .dots {
        padding: 1.2rem 0;
    }
}

@media (max-width: 34em) {

    html {
        font-size: 46%;
    }
    
    .header {
        padding: 0 1.2rem;
    }

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

    .banner {
        height: 55rem;
    }

    .skills img {
        height: 5rem;
    }

    .container {
        max-width: 45rem;
    }

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

    .hero {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        max-width: 50rem;
    }

    .hero-heading {
        font-size: 4rem;
    }

    .hero-img-box {
        width: 49rem;
    }

    .hero-img {
        height:34rem;
    }

    .hero-description {
        height: 19rem;
    }


    /* .dots {
        bottom: 51%;
    } */

    .heading-skills {
        margin-bottom: 1.2rem;
    }

    .section-services {
        padding: 3.2rem 0;
    }

    .services-container {
        max-width: 55rem;
    }

    .services-heading {
        padding: 0 2.6rem;
    }

    .services-grid {
        row-gap: 2.8rem;
        column-gap: 3.8rem;
    }

    .heading-secondary {
        margin-bottom: 3.2rem;
    }

    .cta-section {
        padding: 3.2rem 0;
    }

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

    .cta-img-box {
        height: 36rem;
        grid-row: 1;
        background-position:bottom;
    }    

    .footer {
        padding: 4.8rem 0 6.2rem;
    }

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

    .nav-footer {
        grid-column: 2;
        grid-row: 2;
    }

    .contact-footer {
        grid-column: 1 / 3;
    }

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

    .nav-footer li {
        padding-right: 2.8rem;
    }
}

@media (max-width: 26em) {

    html {
        font-size: 43%;
    }

    .container {
        max-width: 50rem;
    }

    .banner {
        height: 50rem;
    }

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


    /* .skills img {
        height: 6rem;
    } */

    .section-hero {
        padding: 2.4rem 1.3rem;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        max-width: 45rem;
    }


    /* .dots {
        bottom: 48%;
    } */

    .hero-description {
        height: 23rem;
        margin-bottom: 1rem;
    }

    .btn,
    .btn:link,
    .btn:visited {
    display: inline-block;
    font-size: 1.8rem;
    padding: 1.6rem 1.8rem;
    }

    .services-container {
        max-width: 45rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
        row-gap: 5.6rem;
    }

    .services-item {
        padding: 0.8rem 1.2rem;
    }

    .cta-section {
        padding: 3.2rem 1.2rem;
    }

    .cta h2 {
        margin-bottom: 1.2rem;
    }
    
    .cta-text-box {
        color: #0a2a45;
        padding: 1.6rem 3.2rem;
    }
    
    .cta-text {
        font-size: 1.6rem;
        line-height: 1.3;
        margin-bottom: 2.8rem;
    }

    .footer {
        padding: 4.8rem 0rem 6.2rem 1.2rem;
    }
}

@media (max-width: 22em) {

    html {
        font-size: 36%;
    }

    .container {
        padding: 0 1.2rem;
    }

    .skills img {
        height: 3rem;
    }
    
    .section-hero {
        padding: 0 1.2rem;
    }
    .hero {
        height: 65rem;
        max-width: 40rem;
    }

    /* .hero-text-box {
        height: 75rem;
        margin-top: 10rem;
    } */

    .hero-description {
        height: 30rem;
    }
    
/*
    .hero-text-box {
        height: 5rem;
    }

    .hero-heading {
        font-size: 3rem;
    }

    .hero-description {
        margin-bottom: 0rem;
    } */
    /* .dots {
        bottom: 10%;
    } */

    .hero-img-box {
        display: none;
    }

    .btn,
    .btn:link,
    .btn:visited {
    display: inline-block;
    font-size: 1.8rem;
    padding: 1.6rem 1.8rem;
    margin-bottom: 0.4rem;
    }

    .services-container {
        max-width: 35rem;
    }

    .services-grid {
        row-gap: 5.8rem;
    }

    .footer-grid {

        column-gap: 0;
    }

    .nav-foot-one {
        margin: 0;
        padding: 0;
        grid-row: 2;
    }

}



.no-flexbox-gap .main-nav-list li:not(:last-child) {
    margin-right: 4.8rem;
  }
  
  .no-flexbox-gap .dot:not(:last-child) {
    margin-right: 1.6rem;
  }
  
  .no-flexbox-gap .list-icon:not(:last-child) {
    margin-right: 1.6rem;
  }
  
  .no-flexbox-gap .delivered-faces {
    margin-right: 1.6rem;
  }
  
  .no-flexbox-gap .meal-attribute:not(:last-child) {
    margin-bottom: 2rem;
  }
  
  .no-flexbox-gap .meal-icon {
    margin-right: 1.6rem;
  }
  
  .no-flexbox-gap .footer-row div:not(:last-child) {
    margin-right: 6.4rem;
  }
  
  .no-flexbox-gap .social-links li:not(:last-child) {
    margin-right: 2.4rem;
  }
  
  .no-flexbox-gap .footer-nav li:not(:last-child) {
    margin-bottom: 2.4rem;
  }
  
  @media (max-width: 75em) {
    .no-flexbox-gap .main-nav-list li:not(:last-child) {
      margin-right: 3.2rem;
    }
  }
  
  @media (max-width: 59em) {
    .no-flexbox-gap .main-nav-list li:not(:last-child) {
      margin-right: 0;
      margin-bottom: 4.8rem;
    }
  }

  @media (max-width: 34em) {
    .no-flexbox-gap .main-nav-list li:not(:last-child) {
      margin-right: 0;
      margin-bottom: 2.8rem;
    }
  }