/* CSS RESET */
    
    * {
        margin: 0;
        padding: 0;
    }
    /* CSS VARIABLE */
    
     :root {
        --navbar-height: 59px;
    }
    /* NAVIGATION BAR */
    
    #navbar {
        display: flex;
        align-items: center;
        position: relative;
        top: 0px;
    }
    /* NAVIGATION BAR:LOGO AND IMAGE */
    
    #logo {
        margin: 10px 34px;
    }
    
    #logo img {
        height: 59px;
        margin: 3px 6px;
    }
    /*NAVIGATION BAR:LIST STYLING*/
    
    #navbar ul {
        display: flex;
        font-family: 'Baloo Bhaina 2', cursive;
    }
    
    #navbar::before {
        content: "";
        background-color: black;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.7;
    }
    
    #navbar li {
        /*color: black;*/
        list-style-type: none;
        font-size: 1.3rem;
    }
    
    #navbar li a {
        color: white;
        display: block;
        padding: 3px 22px;
        border-radius: 20px;
        text-decoration: none;
    }
    
    #navbar li a:hover {
        color: black;
        background-color: white;
    }
    /*Home Section*/
    
    #home {
        display: flex;
        flex-direction: column;
        padding: 40px 200px;
        margin-top: 10px;
        height: 500px;
        justify-content: center;
        align-items: center;
    }
    
    #home::before {
        content: "";
        background: url('../images/1.jpg') no-repeat center center/cover;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.89;
    }
    
    #home h1 {
        color: white;
        text-align: center;
    }
    
    #home p {
        color: white;
        text-align: center;
        font-size: 1.5rem;
        font-family: 'Bree Serif', serif;
    }
    /* Services Section */
    
    #services {
        margin: 4px;
        display: flex;
    }
    
    #services .box {
        border: 2px solid brown;
        padding: 10px;
        margin: 25px 6px;
        border-radius: 28px;
        background-color: #e6dede;
    }
    
    #services .box img {
        height: 170px;
        margin: auto;
        display: block;
    }
    
    #services .box {
        font-family: 'Bree Serif', serif;
    }
    /* Client Section */
    
    #client-section {
        height: 344px;
    }
    
    #client-section::before {
        content: "";
        position: absolute;
        background: url('../images/2.jpg')no-repeat center center/cover;
        width: 100%;
        height: 50%;
        z-index: -1;
        opacity: 0.4;
    }
    
    #clients {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    #clients img {
        height: 124;
        width: 130px;
        padding: 34px;
        border-radius: 48px;
    }
    /* Contact Section */
    
    #contact {
        position: relative;
    }
    
    #contact::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.7;
        background: url('../images/9.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.1rem;
    }
    
    #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;
    }
    /* Utility Classes*/
    
    .h-primary {
        font-family: 'Bree Serif', serif;
        font-size: 3.8rem;
        padding: 12px;
    }
    
    .h-secondary {
        font-family: 'Bree Serif', serif;
        font-size: 2.3rem;
        padding: 12px;
    }
    
    .btn {
        padding: 6px 20px;
        border: 2px solid white;
        background-color: brown;
        color: white;
        margin: 17px;
        font-size: 1.5rem;
        border-radius: 10px;
        cursor: pointer;
    }
    
    .center {
        text-align: center;
    }