/* CSS reset */
* {
   margin: 0px;
   padding: 0px;
}

html {
   scroll-behavior: smooth;
}

/* CSS variables */
:root {
   --navbar-height: 59px
}

/* Navigation Bar */
#navbar {
   display: flex;
   align-items: center;
   position: sticky;
   top: 0px;
}

/* Navigation Bar: Logo and image */
#logo {
   margin: 0px 0px;
}

#logo img {
   height: 60px;
   margin: 8px 21px;
}

/* Navigation Bar: list styling */
#navbar ul {
   display: flex;
   font-family: 'Baloo Bhai 2', cursive;
}

#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: 1rem;
}

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

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

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

#home::before {
   content: "";
   background: url('img/bc3.jpg') no-repeat center center/cover;
   position: absolute;
   top: 0px;
   left: 0px;
   height: 59%;
   width: 100%;
   z-index: -1;
   opacity: 0.89;
}

#home h1 {
   color: white;
   text-align: center;
   font-family: 'Bree Serif', serif;
}

#home p {
   color: white;
   text-align: center;
   font-size: 1.5rem;
   font-weight: bold;
   font-family: 'Bree Serif', serif;
}
#home p:hover{
   background-color: black;
   cursor: pointer;
}

/* services section */
#services {
   margin: 34px;
   display: flex;
   /* background-color: rgb(125, 170, 125); */
}

#services .box {
   border: 2px solid brown;
   padding: 34px;
   margin: 3px 6px;
   border-radius: 28px;
   background-color: #dda1a1;
   margin-bottom: 20px;
}

#services .box img {
   height: 165px;
   display: block;
   margin: auto;
}

#services .box p {
   font-family: 'Bree Serif', serif;
}

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

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

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

.client-item {
   padding: 34px;
}

#clients img {
   height: 124px;
}

/* Contact section */
#contact {
   position: relative;
}

#contact::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: -1;
   opacity: 0.9;
   background: url('img/contact\ us.webp') no-repeat center center/cover;
}

#contact-box {
   display: flex;
   justify-content: center;
   align-items: center;
   padding-bottom: 34px;
}

#contact-box input,
#contact-box textarea {
   width: 100%;
   padding: 0.5rem;
   border-radius: 9px;
   font-size: 1.3rem;
}

#contact-box form {
   width: 40%;
}

#contact-box label {
   font-size: 1.3rem;
   font-family: 'Bree Serif', serif;

}


footer {
   background: black;
   color: white;
   padding: 9px 20px;
}


/* utlity class */
.h-primary {
   font-size: 2.8rem;
   padding: 12px;
   font-family: 'Bree Serif', serif;
}

.h-secondary {
   font-family: 'Bree Serif', serif;
   font-size: 2rem;
   padding: 12px;
}

.btn {
   padding: 6px 20px;
   border: 2px solid black;
   background-color: brown;
   color: white;
   margin: 17px;
   font-size: 1rem;
   border-radius: 15px;
   cursor: pointer;
}

.btn:hover {
   background-color: black;
}

.center {
   text-align: center;
}