*,
*::before,
*::after{
    padding: 0;
    margin: 0;
}

html{
    scroll-behavior: smooth;
}


/* BODDY */
body{
    
    font-family: 'poppins' , sans-serif;
    background-color: rgb(237, 235, 205);
    
   

    
}

/* BLUR EFFECT */

.blur-effect main, 
.blur-effect h2, 
.blur-effect h1, 
.blur-effect p, 
.blur-effect button, 
.blur-effect section,
.blur-effect footer{
    filter: blur(0.2rem);
    pointer-events: none;
   
}



    /* UTILITY CLASS */
    .error{
        font-size: 0.8rem;
        color: red;
        
        
      }

    /* VARIABLES */

    :root{

    /*FONTS*/

    --FF:"poppins", sans-serif;
    --FF-HEADINGS: 'poppins', sans-serif;
    --FS: clamp(1rem, 2.2vh, 1.5rem);
    --BOLDED: (font-size 800);
    
    /*COLOR*/

    --BGCOLOR: rgb(245, 244, 219);
    --FOOTER-BGCOLOR: rgb(17, 17, 16);
    --FONT-COLOR:rgb(27, 27, 27);
    --HEADING-COLOR:rgb(39, 44, 45);
    --POPUP-FONT-COLOR:rgb(229, 238, 243);
    --HERO-FONT-COLOR:rgb(229, 238, 243);
    --BUTTON-BG-COLOR:rgb(31, 30, 26);
    --BUTTON-F-COLOR: rgb(94, 159, 234);
    --SHADOW-COLOR: rgb(0, 0, 0, 0.3);
    --SPAN-COLOR:rgb(243, 243, 237);
    --SPAN-COLOR2:rgb(27, 92, 167);
    --P-COLOR:rgb(247, 246, 243);

    /*LINK COLOR*/
    --LINK-COLOR: rgb(230, 238, 237);
    --ANCHOR-COLOR: rgb(44, 47, 46);
    --LINK-HOVER:rgb(138, 144, 144);
    --NAV-LINK-HOVER:rgb(51, 167, 169);
    --LINK-ACTIVE:rgb(211, 189, 19);
    --LINK-FOCUS:rgb(7, 157, 171);
    --HEADER-BACKGROUND: rgb(140, 140, 147);
    --NAV-BACKGROUND:rgb(27, 92, 167);

        /*STNDARD PADDING*/

        --PADDING-SIDE: 2.5%;
        --PADDING-TB: 0,25em;

        /*STANDARD MARGIN*/
        --MARGIN: clamp(1em, 2.5vh, 1em)0;
        
    }

    a{
        color: var(--ANCHOR-COLOR);
        text-decoration: none;
        font-weight: 300;
    }

    a:hover{
        color: var(--LINK-HOVER);
    }

    a:active{
        color: var(--LINK-ACTIVE);
    }
    a:focus{
        color: var(--LINK-FOCUS);
    }

    /* h1{
        color: var(--FF-HEADINGS);
    } */



    h2{
        color: var(--HEADING-COLOR);
        text-shadow: 1px 1px 3px var(--SHADOW-COLOR);
        text-align: center;
        font-size: 2rem;
    }

    h5{
        color: rgb(76, 83, 79);
        font-size: 1.3rem; 
    }

    h6{
        color: #6b6c6c;
        font-size: 1rem;
    }
    .pCentered{
        text-align: center;
    }

    p{
        transform: translateY(40px);
        opacity: 0;
        transition: 1s ease;
        font-weight: 500;
      }

      span{
        font-weight: 500;
      }
      
      .p--visible{
        transform: translateY(0);
        opacity: 1;
      }
      

    .green{
        color: rgb(48, 46, 42);
    }


    /* HEADER 0b4b33 */

    header{
      position: relative;  /* background-color: rgb(11, 75, 45); */
    }

     header::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/images/tiler-working-renovation.jpg);
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
        opacity: 80%;
        z-index: -1;
    }

    /* HEADER 1 SHOW ANIMATIONS */

    header h1{
        color: #242424;
        text-shadow: 1px 1px 3px var(--SHADOW-COLOR);
        font-size: 2.7rem;
        transform: rotate(90deg);
        transition: ease-in 1s, transform 1s ease-in-out;
        opacity: 0;
    }

    .show{
        transform: rotate(0deg);
        opacity: 1;
    }

    header h1 .headingExtension{
        color: #303029;
        font-weight: 400;
        text-shadow: 1px 6px 9px var(--SHADOW-COLOR);
    }

            /* HEADING COLOR EXTENSTION */

    .newColor2{
        color: var(--SPAN-COLOR2);
        }

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

    .header-content{
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        margin: 32px 32px 0px 0px;
        padding: var(--PADDING-SIDE);
    }

    .header-content img{
        border-radius: 5px;
        margin-bottom: 22px;

    }
       
    .hero{ 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background-color: #515151;
        align-items: center;
        
    }

    .header-content{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }


         /* SITE ICON */

         .siteIcon{
            position: absolute;
            top: 0%;
            left: 1%;
            
               
        
           }

           .siteIcon img{
                width: 220px;
                cursor: pointer;
                
           }

    .hero{
        background-color: var(--NAV-BACKGROUND);
        flex-direction: row-reverse;
        justify-content: space-between;
        padding: 12px;
        top: 0;
        left: 0;
        position: sticky;        
        box-shadow:2px 3px 5px var(--SHADOW-COLOR);
        z-index: 1;
    }

    .companName{
        color: rgb(194, 208, 201);   
        font-weight: normal;
        cursor: pointer;
        font-size: 0.9rem;
    }

    .hero nav ul{
        display: flex;
        gap: 12px;
        font-size: 1.1rem;
        margin-left: 12px;
          
    }
   
    .hero nav ul li{
      list-style: none;
      
      
    }
    
    .hero nav ul a{
        color: orange;
        text-decoration: none;
        font-weight: 600;
        
    }
    
    .hero nav ul a:hover{
        color: var(--NAV-LINK-HOVER);
        text-decoration: underline;
    }

    .hero nav ul a:active{
        color: var(--LINK-ACTIVE);
    }
    
    .hero nav ul a:focus{
        color: var(--LINK-ACTIVE);
    }

    .contact-details ul li.social-links{
        display: flex;
        gap: 22px;
        color: blanchedalmond;
        font-size: 1.2rem;
    }

    .hero-text{
        display: flex;
        gap: 2rem;
        justify-content: center;
        text-align: center;
        position: relative;
                
    }

            /* HAMBURGER MENU */
            .hamburger-menu{
                display:none;
                color: antiquewhite;
              }

    .trustedBy{
        color: #fff;
        font-size: 0.8rem;
        font-weight: normal;
        text-decoration: underline;
        position: absolute;
        
        text-wrap: nowrap;
    }

    .contact-details ul li :hover{
        display: flex;
        gap: 22px;
        color: rgb(224, 224, 230);
        
        cursor: pointer;
        
    }

    .contact-details ul {
        display: flex;
        justify-content: space-between;
        padding: 12px;
        
    }
    .contact-details ul li {
       list-style: none;
    }

                /*SUB MENU  */

                   .subMenuDesk{
                        position: absolute;
                        display: none;
                        margin: 0;
                        box-shadow: 0px 3px 6px var(--SHADOW-COLOR);
                        padding: 12px;
                        flex-direction: column;
                        background-color: rgb(32, 32, 32);
                        border-radius:25px 0px 25px 0px;
                        opacity: 0;
                        transform: translateX(30px);
                        transition: opacity 1s ease, transform 1s ease;
                    }

                    li#servicesMenu:hover .subMenuDesk{
                        display: block;
                        opacity: 1;
                        transform: translateY(0);
                    }


        /* MAIN */

    main{
        padding: var(--PADDING-SIDE);
    }

    /* SECTION */
        section{
            padding: var(--PADDING-SIDE);
        }



    /*BUTTONS*/

    button{
        background-color: var(--BUTTON-BG-COLOR);
        padding: 12px 22px;
        font-family: "poppins", sans-serif;
        color: var(--BUTTON-F-COLOR) ;
        font-size: 1rem;
        text-wrap: nowrap;
        outline: 0;
        border: 0;
        border-radius: 50px;
        margin-top: 18px;
        transition: 1s ease-in;
      }

      button:hover{
        cursor: pointer;
        opacity: 85%;
        transform: scale(0.94);
        background: transparent;
        border: 1px solid rgb(43, 95, 102) ;
        color: var(--FONT-COLOR);
        
      }

      button .fa{
        color: rgb(51, 132, 224);
      }



    /*GET STARTED BUTTON*/
          
    .btn{
        background: rgb(42, 142, 196);
        padding: 12px 22px;
        font-family: "poppins", sans-serif;
        color: #fbfbfb ;
        font-size: 1.1rem;
        /* margin: 5px; */
        outline: 0;
        border: 0;
        border-radius: 50px;
        margin-top: 12px;
        margin-bottom: 22px;
        transition: 1s ease-in;
      }

      .btn:hover{
        cursor: pointer;
        opacity: 85%;
        transform: scale(0.94);
        background-color: rgb(231, 233, 224);
        border: 1px solid rgb(224, 239, 241) ;
        color: var(--FONT-COLOR);
        box-shadow: 1px 2px 4px var(--SHADOW-COLOR);
        
      }

      .btn .fa{
        color: #fff;
      }

      /*POP UP BUTTON*/
          
      .bttn{
        background: transparent;
        padding: 12px 22px;
        font-family: "poppins", sans-serif;
        color: var(--FONT-COLOR) ;
        font-size: 0.8rem;
        /* margin: 5px; */
        outline: 0;
        border: 1px solid rgb(63, 62, 62);
        border-radius: 50px;
        margin-bottom: 12px;
        transition: 1s ease-in;
      }

      .bttn:hover{
        cursor: pointer;
        opacity: 85%;
        transform: scale(0.94);
        background: #fff;
        box-shadow: 1px 2px 4px var(--SHADOW-COLOR);
        border: 1px solid rgb(224, 239, 241) ;
        color: var(--FONT-COLOR);
        
      }

      .bttn .fa{
        color: rgb(51, 132, 224);
      }

      .btnCenter{
          display: block;
          margin: 10px auto;
            
      }


      /*FORM BUTTON*/
          
      .form-btn{
        background: rgb(23, 23, 23);
        padding: 8px 22px;
        font-family: "poppins", sans-serif;
        color:#fff ;
        font-size: 0.8rem;
        /* margin: 5px; */
        outline: 0;
        border: 0;
        border-radius: 3px;
        margin-bottom: 6px;
        transition: 1s ease-in;
      }

      .form-btn:hover{
        cursor: pointer;
        opacity: 85%;
        transform: scale(0.94);
        background: #1a1919;
        box-shadow: 1px 2px 4px var(--SHADOW-COLOR);
        border: 0 ;
        color: #fff;
        
      }

      /* BACK TO TOP */

      .back-to-top .fa-arrow-up{
            position: fixed;
            background-color: rgb(27, 92, 167);
            color: #fff;
            padding: 12px;
            box-shadow: 1px 2px 5px var(--SHADOW-COLOR);
            border-radius: 3px;
            top: 90%;
            right: 3%;
            cursor: pointer;
            transform: translateY(-50%);
            z-index: 1;

      }

            /* ADDRESS */

      address{
        text-align: center;
      }

      .google-map-wrapper{
          display: flex;
          align-items: center;
          justify-content: space-around;
          gap: 1rem;
      }

      .google-map{
        display: flex;
        align-items: center;
        justify-content: left;
        margin-top: 22px;
    }

    .ext-map{
        margin: auto;
    }


      /* FOOTER */

      footer a{
        color: rgb(199, 202, 204);
        list-style: none;
      }
      footer li{
       
        list-style: none;
      }

      footer a:hover{
        color: rgb(88, 90, 91);
      }


      .footer-menu{
            display: flex;
            justify-content: space-between;
            padding: var(--PADDING-SIDE);
      }

      .footer-submenu a{
        color: rgb(36, 97, 147);
        margin-left: 5px;
      }

      /* SOCIALS */
        .socials ul{
            display: flex;
            flex-direction: column;
        }

      .gvt{
        font-size: 0.8rem;
        color: #797c7e;
        padding: 8px 0px 22px 8px;
    }

    .copyright{
        color: #979494;
        padding: 22px 0px 0px 12px;
    }


    /* FOOTER SUB MENU DROP DOWN */

        .footer-submenu{
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.6s ease-in-out;
        }

        .footer-submenu.active{
            max-height: 200px;
        }

        .arrow{
            transform: rotate(190deg);
        }

        
            footer{
                background-color: var(--FOOTER-BGCOLOR);
            }