/* SMALL DEVICES */

@media  (max-width:770px) {
  .cards{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    gap: 1em;
    border: 1px solid rgb(110, 109, 109);
    padding: 22px;
    
  }

        /*SERVICES IMAGES  */
        .services-wrapper{
          display: flex;
          flex-direction: column;
  
}

    .hamburger-menu{
      display: block;
      cursor: pointer;
      font-size: 2rem;
    }

    .hero nav ul{
      display: none;
      flex-direction: column;
      /* gap: 12px;
      font-size: 1.1rem;
      margin-left: 12px;
         */
  }

   .contact-details{
    display: none;
    
  }

  .mobile-menu{
    position: fixed;
    background-color: rgba(237, 235, 205, 0.813);
    padding: 22px;
    top: 16%;
    left: -100%;
    width: 40%;
    height: 100vh;
    transition: left 0.4s ease-in-out;
    box-shadow: 1px 2px 4px var(--SHADOW-COLOR);
    z-index: 1;

  }

  .mobile-menu.active{
      left: 0;
  }

  .mobile-menu ul{
        list-style-type: none;
  }

  .mobileX{
    position: absolute;
    color: rgb(82, 78, 78);
    padding: 5px;
    border-radius: 50%;
    top: 2%;
    right: 12px;
    cursor: pointer;
    
  }

    /* DROP DOWN MENU */
       
    .sub-menu{
      max-height: 0;
      overflow: hidden;
       width: 100%;
       padding: 0px 11px;
       transition: max-height 0.6s ease-in-out;
     }

     .sub-menu.active{
         max-height: 200px;
     }

        .rotate {
          transform: rotate(180deg);
        }

  .mobileconame{
    font-size: 0.6rem;
  }

    /* HEADINGS */

    .intro-text h2, .howTo h2{
      font-size: 1.5rem;
      color: rgb(79, 94, 70);
    }


  /* FOOTER MENU */
  .footer-menu{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    
}

/* SOCIAL LINKS */

.socials{
display: grid;
grid-template-columns: repeat(5, 1fr);
row-gap: 1rem;
margin-top: 12px;

}


  
}

  /* MEDIUM DEVICES */

  @media (min-width:770px){
    .mobile-menu{
      display: none;
    }

  }

  /*LARGE DEVICES */


  /*PORTRAIT VIEW */