/* CARDS */

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

    .cards{
      display: flex;
      justify-content: center;
      gap: 1em;
      border: 1px solid rgb(110, 109, 109);
      padding: 22px;
      
    }

    .card1, .card2, .card3,.card4{
      background-color:rgb(40, 42, 42);
      padding: 22px;
      color: #fff;
      border-radius: 5px;
      text-align: center;
    
    }

    .card1 .fa, .card2 .fa, .card3 .fa,.card4 .fa{
      color:rgb(11, 75, 45 );
      font-size: 2rem;
      
    }

    .card1 h4, .card2 h4, .card3 h4, .card4 h4{
      color: rgb(11, 75, 45 );
      font-size: 1.2rem;
    }
        /*GOOGLE REVIEWS  */

      .fiveStars{
          display: flex;
        color:   rgb(11, 75, 45 );
      }

      .googleRating{
          font-size: 0.8rem;
      }

      .ratingText{
        color:   rgb(11, 75, 45 );
      }


    /* Welcome text */

    .companyName{
      font-size: 3rem;
      color: rgb(104, 104, 99);
    }

    .singoH1{
      color: rgb(37, 41, 40);
    }

    /* BOLDED */

    .bolded{
      font-size: 2rem;
      color: rgb(44, 44, 43);
      text-shadow: 2px 4px 5px var(--SHADOW-COLOR);
    }

    .boldee{
      font-size: 1.2rem;
      color: rgb(228, 230, 229);
      text-shadow: 2px 4px 5px var(--SHADOW-COLOR);
    }

        /* SERVICES WRAPPER */

            .serv-cont1{
              display: flex;
              align-items: center;
              justify-content: center;
              text-align: center;
              gap: 1rem;
            }


          .services-wrapper{
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;

          }

          /* SERVICE LIST */
            .serviceList ul{
                text-align: center;
                list-style-type: none;
                background-color:rgb(204, 210, 210);
                box-shadow: 1px 2px 4px var(--SHADOW-COLOR);
                margin-bottom: 22px;
                padding: 22px 0px;
                border-radius: 5px;
            }

            /* LIST OF SERVICES */

            .listOfServices{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 1rem;
                
            }

            .paiinting, .Waterrproofing, .forWho{
              background-color:rgb(186, 195, 190);
              border-radius: 5px;
              padding: 12px;
              margin: 22px 0px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              
            }

            .paiinting .fa, .Waterrproofing .fa, .forWho .fa{
              color: rgb(44, 44, 43);
            }

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

              .whatWeStandFor::before{
                position: absolute;
                content: "";
                background: url(/images/Torch-on-waterproofing-installation.jpg);
                background-size: cover;
                background-attachment: fixed;
                top: 0;
                right: 0;
                width: 100%;
                height: 100%;
                opacity: 46%;
                z-index: -1;

              }

              .whatWeStandFor > .quality, .time, .procedure{
                
                  color: rgb(42, 41, 41);
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  padding: 22px;
              }

              .whatWeStandFor > .quality .fa, h3, .time .fa, h3, .procedure .fa, h3{
                  color: rgb(44, 44, 43);
              }
              
                /* VID TEXT */
                .vidText{
                  display: flex;
                  flex-direction: row-reverse;
                  gap: 1rem;
                  align-items: center;
                  justify-content: center;
                  
                }

          /* ATTAINED PROJECTS  */

            .completed{
              display: flex;     
              justify-content: center;
              gap: 22px;
              margin: 22px 0px 22px 0px;
              line-height: 32px;
            }

              .completed h2{
                font-size: 2.8rem;
              }


              /* FAQS */

                #faks{
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  margin: 22px 0;
                }

                .headingDropdown{
                  cursor: pointer;
                }

                .fallContent{
                max-height: 0;
                overflow: hidden;
                color: rgb(9, 56, 15);
                transition: max-height  0.5s ease-in-out;
                }

                .fallContent.active{
                  max-height: 100px;
                  text-align: center;
                }

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

              /* TEAM EXMPLE */

              .teamexmple{
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1rem;
                margin-top: 22px;
              }
              .teamexmple img{
                margin: auto;
                /* margin-top: 22px; */
              }



    /* ABOUT */
    .aboutWrapper{
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 22px;
      margin-bottom: 22px;
    
    }

    .profilePic{
     
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 22px;
    }

    .ourTeamCard, .aboutCard{
      background-color: #d8dcd2;
      padding: 22px;
      box-shadow: 1px 2px 4px var(--SHADOW-COLOR);
    }

    .about{
      position: relative;
    }