/* 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.837);
    padding: 22px;
    top: 15;
    left: -100%;
    width: 40%;
    height: 100vh;
    box-shadow: 1px 2px 4px 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;
      }

      /* HERO IMAGE  */
      .hero-image{
        display: none;
      }

      /* TORCH ON CONTAINER */

          .torchOnContainer{
                  display: flex;
                  flex-direction: column;
          }

          .torchOnContainer img{
              width: 270px;

          }

          /* MEMBRANE WATERPROOFING */

            .membraneWaterproofing{
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                justify-content: center;
                align-items: center;
                text-align: center;
            }

            .membraneWaterproofing img{
              width: 270px;
            }

            /*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;
  }

        .membraneWaterstop {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          align-items: center;
          align-content: center;
          text-align: center;
          
        }

        .membraneWaterstop2 {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          align-items: center;
          align-content: center;
          text-align: center;
          
        }

        .membraneWaterstop3 {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          align-items: center;
          align-content: center;
          text-align: center;
          
        }

      /* 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:750px){
    .mobile-menu{
      display: none;
    }

      /* SERVICES CONT 1 */

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

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

  }


  /* med */

  @media screen , (min-width:844px){
    .membraneWaterproofing{
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      justify-content: center;
      align-items: center;
      row-gap: 1rem;
      margin-top: 22px;
    }

  }

  /*LARGE DEVICES */

  @media screen ,(min-width:1024px) {

    .membraneWaterproofing{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-content: center;
      align-items: center;
      row-gap: 1rem;
      margin-top: 22px;
    }
    
  }


  /*PORTRAIT VIEW */