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

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

      /* BORDER EFFECT */

      .card1::after, .card2::after, .card3::after,.card4::after{
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background-image: linear-gradient(blue, red, purple, rgb(19, 211, 115)) ;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 3px;
        z-index: -1;
        animation: spin 3s linear infinite; 

      }
    
    .card1 .fa, .card2 .fa, .card3 .fa,.card4 .fa{
      color:rgb(66, 146, 237);
      font-size: 2rem;
      
    }

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

      .fiveStars{
          display: flex;
        color: rgb(27, 92, 167);
      }

      .googleRating{
          font-size: 0.8rem;
      }

      .ratingText{
        color:   rgb(27, 92, 167);
      }


    /* Welcome text */

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

    .singoH1{
      color:rgb(27, 92, 167);
    }

    /* 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/2148908402.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(27, 92, 167);
                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;
    }