/* 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;
    box-shadow: 5px 8px 12px var(--SHADOW-COLOR); 
    transition: left 0.6s ease-in;
    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;
          transition: max-height 0.6s ease-in-out;         
          padding: 0px 11px;
          width: 100%;
        }

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

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

  .mobileconame{
    font-size: 0.6rem;
    
  }

      /* HREO HEADING TEXT */

      header h1{
        font-size: 2rem;
        margin-left: 16px;
      }

            /*WATERPROOFING  */
            .waterproofing{
              display: grid;
              grid-template-columns: repeat(1, 1fr);
              gap: 1rem;
              
            }

            .waterproofing img{
              width: 300px;
            }

            /*  BOLDED COMPANY NAME */

            .companyName{
                font-size: 2rem;
            }
        

      /* SERVICES CONT 1 */

        .serv-cont1{
          display: flex;
          flex-direction: column;
              gap: 1rem;
        }

        .serv-cont1 img{
          width: 300px;
        }

        /* SERVICES WRAPPER */

        .services-wrapper{
          display: flex;
          flex-direction: column;
          

       }

       .services-wrapper img{
          width: 300px;
       }



    /* LIST OF SERVICES */

    .listOfServices{
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      column-gap: 8px;
      
  }

        /* WHAT WE STAND FOR */
  .whatWeStandFor{
      position: relative;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      row-gap: 1rem;
  }

      /* VIDEO INFO */

      .vidText{
          display: flex;
          flex-direction: column-reverse;
      }

      .vidText video{
          width: 300px;
      }

      /* PRIDE */

      .completed{
          display: flex;
          flex-direction: column;
          column-gap: 1rem;
          text-align: center;
      }

            /*TEAM EXAMPLE */
            .teamexmple{
              display: flex;
              flex-direction: column;

            }
            .teamexmple img{
                width: 300px;
            }

            /* ABOUT */
            .aboutWrapper{
              display: flex;
              flex-direction: column;
              gap: 1rem;
              margin-bottom: 22px;
            
            }

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

        /* SOCIAL LINKS */

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

        /* GET STARTED POP UP */

        .getStartedPopup{
            width: aut;
            color: rgb(11, 75, 45 );
        }

        /* SITE ICON */

        .siteIcon{
          display: none;
        }
  
}

  /* MEDIUM DEVICES */

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

  }

  /*LARGE DEVICES */

  @media (min-width:1024px){


    .serv-cont1{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 1rem;
    }


    
        /* SERVICES WRAPPER */

        .services-wrapper{
          display: flex;
          

       }

       .services-wrapper img{
          width: 300px;
       }



   
   
  }


  /*PORTRAIT VIEW */