style.css

/* css reset */
*{
    margin:0px;
    padding: 0px;
}
/* css variables */
:root{
    --navbar-height:39px;

}
/* navbar  */
#navbar{
    display:flex;
   align-items: center;
   position: absolute;
   position: sticky;
   top: 0px;
}
/* Navigation bar:  logo or img */
#logo{
margin: 10px 34px;
}
#logo img{
    height: 59px;

    margin: 3px 6px;


}
/*Navigation bar: list styling */
/* #navbar{
    position: absolute;
} */
#navbar::before{
    content: "";
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.4;
}
#navbar ul{
    display: flex;
}
#navbar ul li{
list-style: none;
font-size: 1.3rem;
}
#navbar ul li a{
    display: block;
    padding:5px 22px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    }
    #navbar ul li a:hover{
        color: black;
        background-color: white;


    }
    /* home section */
    #home{
        display: flex;
        /* position: relative; */
        flex-direction: column;
        
        padding: 3px 200px;
        height: 550px;
        /* color: white; */
        justify-content: center;
        align-items: center;
        /* text-decoration: none;
        list-style: none;
    } */
}
    #home::before{
        content: "";
        
    background:url('bg.jpg') no-repeat center center;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
        left: 0;
    z-index: -1;
    opacity: 0.89;
    }
    #home h1{
        color: white;
        text-align: center;
    }
    #home p{
        color: white;
        text-align: center;
        font-size: 1.5rem;
        /* text-decoration: none; */
        font-style: italic;
        /* text-decoration: none;
        list-style: none; */
    }
    /* services section */
      #services{
          margin: 14px;
          display: flex;

      }
     
      #services .box{
          /* display: flex; */
          border: 2px solid brown;
          margin: 3px 6px;
          padding: 34px;
          border-radius: 28px;
          background-color: rgb(240, 233, 233);
          /* margin-bottom: 20px; */



      }
      #services .box p{
          font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
      }
      #services .box img{
          display: block;
height: 234px; 
margin: auto;       


    }

/* cleint section */
#client-section::before{
    content: "";
    position: absolute;
    background: url('bg.jpg');
    width: 100%;
    height: 54%;
    z-index: -1;
    opacity: 0.4;
   
}
 #client{
     justify-content: center;
     align-items: center;

    display: flex;
}

#client img{
    height: 124px;
}
/* contact section */
#contact{
    position: relative;
    /* margin-top: 22px; */
}
#contact::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.7;
    background: url('contact.jpg') no-repeat center center/cover;
}
#contact-box{
    display: flex;
    /* text-align: center; */
    justify-content: center;
    /* margin: 3px 4px; */
    height: 100%;
    padding-bottom: 54px;
    /* font-size: x-large; */

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

#contact-boc label{
    font-size: 1.3rem;
}

/* utility class */
.h-primary{
    font-size: 3.8rem;
    padding: 12px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    
}
.h-secondary{
    font-size: 2.8rem;
    padding: 12px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    
}
.btn{
    padding: 6px 20px;
    border: 2px solid white;
    background-color: brown;
    color: white;
    border-radius: 20px;
    margin: 17px;
    font-size: 1.5rem;
    cursor: pointer;
    
    
}
footer{
    background: black;
  


}
    .center{
        text-align: center;
        /* color: white; */
    }