*{
    padding: 0;
    margin: 0;
}
html{
    scroll-behavior: smooth;
}
/* css variables */
:root{
    --navbar-height:59px;
}
 #navbar{
    display: flex;
    align-items: center;
    position: relative;
    top: 0px;

}
     




/* logo and image styling */
#logo{
    margin: 10px 34px;

}
#logo img{
    margin: 3px 6px;
    height: 60px;
    border-radius: 43px;
}

/* #navbar{
    position: relative;
} */


#navbar ul{
    display: flex;
}
#navbar::before{
    content:"";
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.4;}
#navbar ul li{
    list-style: none;
    font-size: 1.3rem;


}
#navbar ul li a{
 display: block;
 padding: 3px 22px;
 border-radius: 20px;
 text-decoration: none;
 color: white;


    }
    #navbar ul li a:hover{
        color: black;
        background-color: white;
        font-weight: bold;
    }    

    /* home section */
    #home{
        display: flex;
        flex-direction: column;
        padding: 3px 200px;
        justify-content: center;
        align-items: center;
        height: 540px;
    }

    #home::before{
        content:"";
        background: url('../img/back7.jpg') no-repeat center center/cover;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        height: 642px;
        width: 100%;
        z-index: -1;
        opacity: 0.89;
        
    }
     #home h1{
        color: rgb(163, 150, 165);
        text-align: center;
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
     }
     #home p{
        color: rgb(198, 166, 25);
        text-align: center;
        font-size: 1.5rem;
        font-family: 'Times New Roman', Times, serif;
     }
     
     /* .services-container{
        margin-top: 20px; */
     
    /* utility classes */
    /* service container */
     #services{
        margin: 34px;
        display: flex;
     }
     #services .box{
        border: 2px solid brown;
        padding: 34px;
        margin: 25px 6px;
        border-radius: 28px;
        background-color: white;
        margin-bottom: 20px;
     }
     #services .box img{
        height: 115px;
        margin: auto;
        display: block;

     }
     #services .box p{
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

     }

    /* clints section */
    #client-section{
        /* height: 344px; */
        position: relative;


    }
    #client-section::before{
        content: "";
        position: absolute;
        background-image:url('../img/back7.jpg');
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.5;
    


    }
    #clients{
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .client-item{
        padding-left: 34px;
    }
    #clients img{
        height: 124px;
        border-radius: 12px;
        
    }
    /* contact section */
    #contact{
        position: relative;
    }

    #contact::before{
        content: "";
        position: absolute;
        background-image: url('../img/contact\ us.jpg');
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.5;
        
    }
    #contact-box{
        justify-content: center;
        display: flex;
        align-items: center;
        padding-bottom: 34px;
    }
    #contact-box textarea{
        width: 100%;
        padding: 0.5rem;
        border-radius: 9px;

    }
    #contact-box{
        width: 100%;
        padding: 0.5rem;
        border-radius: 9px;
    }
    #contact-box form{
        width: 50%;}
    #contact-box label{
        font-size: 1.3rem;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    footer{
        background: black;
        color: white;
        padding: 9px 3px;

    }

    .h-primery{
        font-size: 3.8rem;
        padding: 12px;
        color: #2e1e1e;
    }
    .h-secondary{
        font-size: 2.3rem;
        padding: 12px;
    }
    .btn{
        padding: 6px 20px;
        border: 2px solid white;
        background-color: #894444;
        color: rgb(165, 152, 152);
        margin:  17px;
        font-size: 1.5rem;
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;
    }
    .btn:hover{
        font-weight: bold;
        color: white;
        cursor: pointer;
        background-color: rgb(234, 161, 161);
    }
    .center{
        text-align: center;
    }
   /* service container */
   .submit{
              padding: 6px 20px;
           border: 2px solid black;
          /* background-color: #894444;
        color: rgb(165, 152, 152); */
        margin:  17px;
        font-size: 1.5rem;
        border-radius: 10px;
        cursor: pointer;
        text-decoration: none;

   }
   .submit:hover{
    color: green;
    font-weight: bold;
    text-decoration: none;
   }