/* General reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

/* Navbar styling */
.navbar {
    display: flex;               /* Use flexbox for layout */
    justify-content: center;     /* Center contents horizontally */
    align-items: center;         /* Center contents vertically */
    height: 80px;                /* Set navbar height */
    background-color: #f8f9fa;   /* Navbar background color */
}

/* Navbar brand styling */
.navbar-brand {
    display: flex;               /* Flexbox to align image and text */
    justify-content: center;     /* Center the logo horizontally */
    align-items: center;         /* Center items vertically */
    position: relative;          /* Allow relative positioning */
}

/* Image styling */
.navbar-brand img {
    max-width: 200px;           /* Set a maximum width for the logo */
    height: auto;                /* Maintain aspect ratio */
}

/* Media query for mobile screens */
@media (max-width: 767px) {
    .navbar-brand {
        left: -137px;             /* Move the logo slightly to the left on mobile */
    }
}

/* Media query for desktop and larger screens */
@media (min-width: 768px) {
    .navbar-brand {
        left: -605px;            /* Move the logo to the left for larger screens */
    }
}