@media(max-width: 1274px) {
    .showcase-img::before {
        background-size: 64rem;

    }
    
    .showcase-img::after {
        background-size: 45rem;
    }
    

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


@media(max-width: 1150px) {
    .showcase-img::before {
        background-size: 50rem;

    }

    .showcase-h1 {
        font-size: 37px;
    }
    
    .showcase-img::after {
        background-size: 30rem;
    }

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

@media(max-width: 768px) {
    .container {
        margin: 0 auto;
        padding: 0 40px;
        overflow: hidden;
    }

    .btn {
        top: -20px;
    }

    .hide-desktop {
        display: flex;
    }

    .hide-mobile {
        display: none;
    }

    .page-links-mobile.show {
        display: block;
        text-align: center;
        font-weight: bold;
    }

    .page-links-mobile a:hover {
        border-bottom: 3px #31d35c solid;
        font-family: "Public Sans", sans-serif;
        color: #2a2a2c;
        font-weight: 800;
    }

    .page-links {
        display: none;
    }

    .hamburger {
        display: block;
        border: none;
        cursor: pointer;
        background-color: transparent;
    }

    .hamburger.show .open{
        display: none;
    }
    .hamburger.show .close{
        display: block;
    }

    .nav-menu-links {
        display: none;
    }

    .nav-menu-links {
        flex-direction: column;
    }
    
    body {
        max-width: 768px;
      }

    .grid,
    .showcase .grid {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }

    .showcase {
        height: auto;
    }


    .showcase-form {
        justify-self: center;
        margin: auto;
    }

    .showcase-text {
        margin-top: 290px;
    }

    .showcase-img-desktop {
        display: none;
    }

    .card-img {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .showcase-hero {
        text-align: center;
    }

    .services-text {
        text-align: center;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

}
/* Mobile */
@media(max-width: 500px) {

    .container {
        margin: 0 auto;
        padding: 0 40px;
        overflow: hidden;
    }

    .hide-desktop {
        display: flex;
    }

    .hide-mobile {
        display: none;
    }

    .btn {
        display: none;
    }

    .btn-outline {
        display: block;
        text-align: center;
    }

    .page-links-mobile.show {
        display: block;
        text-align: center;
        font-weight: bold;
    }

    .page-links-mobile a:hover {
        border-bottom: 3px #31d35c solid;
        font-family: "Public Sans", sans-serif;
        color: #2a2a2c;
        font-weight: 800;
    }

    .page-links {
        display: none;
    }

    .hamburger {
        display: block;
        border: none;
        cursor: pointer;
        background-color: transparent;
    }

    .hamburger.show .open{
        display: none;
    }
    .hamburger.show .close{
        display: block;
    }

    .nav-menu-links {
        display: none;
    }

    .nav-menu-links {
        flex-direction: column;
    }

    .nav-link{
        color: var(--primary-dark-blue);
    }
    
    body {
        max-width: 500px;
    }

      .card-img {
        width: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .services-text {
        text-align: center;
    }

    .showcase-text {
        height: 35rem;
        margin-top: 270px;
    }

    .showcase {
        padding: 8rem 2rem;
    }

    .showcase h1 {
        font-size: 30px;
    }

    .showcase-img::before {
            background: url(bg-intro-desktop.svg) top -15rem right -19rem no-repeat;
            background-size: 51rem;
            content: "";
            position: absolute;
            right: 0px;
            top: 0;
            width: 100%;
    }

    .showcase-img::after {
        content: "";
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 117vw;
        background: url(image-mockups.png) top -5rem right 0rem no-repeat;
        background-size: 22rem;
    }

    .showcase-hero {
        text-align: center;
    }
    
    .grid-4 {
        grid-template-columns: 1fr;
    }


    .social {
        padding: 15px
    }

    .footer-grid {
        display: inline-block;
        max-width: 260px;
    }

    .copyright p {
        font-size: 12px;
        color: #9698a6;
        margin-top: 2rem;
    }
}