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

   .contact-details{
    display: none;
    
  }

  .mobile-menu{
    position: fixed;
    background-color: rgba(237, 235, 205, 0.813); 
    padding: 22px;
    top: 10%;
    left: -100%;
    width: 30%;
    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;
           width: 100%;
           padding: 0px 11px;
           transition: max-height 0.6s ease-in-out;
        }

        .sub-menu.wake{
          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;       
      }

     

      /* ROOF REPAIRS STYLES */

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

          .torchOnContainer img{
              width: 270px;

          }

          /* ROOF TILE */

          .tileRoofrepairs{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            justify-content: center;
            align-items: center;
            text-align: center;
            row-gap: 1rem;
            margin-top: 22px;
            padding: 22px;
            background-color: rgb(223, 224, 193);
            box-shadow: 0px 1px 3px var(--SHADOW-COLOR); 
          }

          .interior-painting img, 
          .exterior-painting img, 
          .roof-painting img{
            width: 290px;
          }

          /* ROOF COATINGS */
          
          .roofCoatings{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            justify-content: center;
            align-items: center;
            text-align: center;
            row-gap: 1rem;
            margin-top: 22px;
            padding: 22px;
           
          }
          
          /* ROOF COATINGS */
          
          .roofCoatings{
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            justify-content: center;
            align-items: center;
            text-align: center;
            row-gap: 1rem;
            margin-top: 22px;
            padding: 22px;
            background-color: rgb(223, 224, 193);
            box-shadow: 0px 1px 3px var(--SHADOW-COLOR); 
          }
          

            .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;
      
  }


            /* 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;
          gap: 1rem;
           
        }

        /* GET STARTED POP UP */

        .getStartedPopup{
            width: auto;
            color: rgb(36, 111, 169);
        }

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

       /* EXTERIOR PAINTING */

       .interior-painting{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: center;
        text-align: center;
        row-gap: 1rem;
        margin-top: 22px;
        padding: 22px;
        background-color: rgb(223, 224, 193);
        box-shadow: 0px 1px 3px var(--SHADOW-COLOR); 
      }

      /* EXTERIOR PAINTING */
      
      .exterior-painting{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: center;
        text-align: center;
        row-gap: 1rem;
        margin-top: 22px;
        padding: 22px;
       
      }
      
      /* ROOF PAINTING */
      
      .roof-painting{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: center;
        text-align: center;
        row-gap: 1rem;
        margin-top: 22px;
        padding: 22px;
        background-color: rgb(223, 224, 193);
        box-shadow: 0px 1px 3px var(--SHADOW-COLOR); 
      }
      


  }


  /* 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;
    }.torchOnContainer{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 22px;
  border-radius: 5px;
  background-color: rgb(216, 221, 184);
  box-shadow: 1px 2px 3px var(--SHADOW-COLOR);
}

.torchText{
background-color: rgb(224, 234, 195);
width: 50%;
padding: 22px;
box-shadow: 5px 8px 12px var(--SHADOW-COLOR);
}

/* INTERIOR PAINTING */

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

    /* EXTERIOR PAINTING */
.exterior-painting{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  row-gap: 1rem;
  margin-top: 22px; 
}

    /* ROOF PAINTING */
.roof-painting{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  row-gap: 1rem;
  margin-top: 22px; 
}


  /* GOOGLE REVIEWS */

      .googleReviews{
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
      }

      .fiveStars{
        display: flex;
        color: rgb(194, 118, 17);
      }

        .numbes{
          text-align: center;
          color: rgb(66, 69, 68);
          font-size: 1.3rem;
          font-weight:200;
        }


      .scroll-container {
        width: 100%;
         /* Hide overflow */
        position: relative;
      }
      
      .googleNextText {
        
        display:flex;
        padding: 15px;
        justify-content: space-between;
        white-space: nowrap;
        animation:scrollleft 20s linear infinite;
        overflow: hidden;
        
       
      }
      
      @keyframes scrollleft {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%);
        }
      }
    
  }


  /*PORTRAIT VIEW */