/* Overlapping image  */
 .hero-image{
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin-top: 22px;
 
}

.hero-image img{
  box-shadow: 3px 4px 8px var(--SHADOW-COLOR);
  margin-top: -80px; 
     
}

.roofRepairContainer{
  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 */

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


.whyChooseUs{
  background-color: antiquewhite;
  padding: 22px;
  box-shadow: 0px 3px 5px var(--SHADOW-COLOR);
  
}

.membraneText{
  background-color: antiquewhite;
  padding: 22px;
  box-shadow: 0px 3px 5px var(--SHADOW-COLOR);
  
}


    /* ROOF COATINGS */

.roofCoatings{
  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%);
        }
      }