* {
    margin: 0;
    padding: 0;
    }
    
    /* CSS Varibles */
    :root
    {
        --navbar-height: 59px;
    }

    /* Navigation Bar  */
    #navbar {
        display: flex;
        position: relative;
        top: 0;
        text-decoration: none;
        align-items: center;
    }

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

    #logo img {
        margin: 4px 2px;
        height: 55px;
    }

    /*Navigation bar: List styling */

    #navbar::before {
        content: "";
        background-color: black;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: -1;
        opacity: 0.4;
    }

    #navbar ul {
        display: flex;
        font-family: 'Baloo Bhai 2', cursive, bold;
    }


    #navbar ul li {
        list-style-type: none;
        font-size: 1.3rem;

    }

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

    }

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

    }

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

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

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

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

    /* Services container  */
    #services {
        margin: 34px;
        display: flex;
    }

    #services .box {
        border: 2px solid brown;
        padding: 34px;
        margin: 3px 6px;
        border-radius: 24px;
        background-color: #f8e5e5;
    }

    #services .box:hover {
        background-color: #ffdbdb;
    }

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

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


    /* Clients section  */
    #client-section {
        position: relative;

    }

    #client-section::before {
        content: "";
        position: absolute;
        background: url('bg.jpg');
        width: 100%;
        height: 95%;
        z-index: -1;
        opacity: 0.4;
    }

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

    }

    .client-item {
        padding: 40px;
    }

    #clients img {
        height: 114px;
    }


    /* Conatct Section  */
    #contact {
        position: relative;
    }
    #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;
        align-items: center;
        justify-content: center;
        padding-bottom: 34px;
    }

    #contact-box input,
    #contact-box textarea {
        width: 100%;
        padding: 0.5rem;
        border-radius: 6px;
        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: 5px 20px;
    }


    /* Utility Class */
    .h-primary {
        font-family: 'Bree Serif', serif;
        font-size: 3.8rem;
        padding: 12px;
    }

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

    .btn {
        padding: 6px 20px;
        border: 2px solid white;
        background-color: #b95a5a;
        color: white;
        margin: 17px;
        font-size: 1.5rem;
        cursor: pointer;
        border-radius: 12px;
    }

    .btn:hover {
        background-color: #ac4040;
    }

    .center {
        text-align: center;
    }