/* Header Styles */
.header {
    /* Sets the display to flex, enabling flexbox layout */
    display: flex;
    /* Vertically aligns items in the center */
    align-items: center;
    /* Distributes space between items, pushing them to the edges */
    justify-content: space-between;
    /* Sets the width to 100% */
    width: 100%;
    /* Adds padding of 1rem (10px) on top/bottom and 2rem (20px) on left/right */
    padding: 1rem 2rem;
    /* Fixes the header to the top of the viewport */
    position: fixed;
    /* Positions the header at the top */
    top: 0;
    /* Positions the header at the left */
    left: 0;
    /* Sets the stacking order to ensure it stays on top */
    z-index: 100;
    /* Keeps the header fixed during scrolling */
    position: fixed;
    /* Sets the text direction to left-to-right */
    direction: ltr;
}

/* Logo Styles */
.header .custom-logo {
    /* Hides overflowing content */
    overflow: hidden;
    /* Sets the height to 5rem (50px) */
    height: 5rem;
    width: auto;
    object-fit: contain;
}
.header .logo img{
    /* Adjusts the image size to fit within the logo container */
    /* width: 130%; */
    /* Adjusts the image's top margin */
    margin-top: -6.5rem;
    /* Adjusts the image's left margin */
    margin-left: -2rem;
    /* Sets the height to 18rem (180px) */
    height: 18rem;
    /* Positions the element at the top */
    top: 0;
    /* Positions the element at the left */
    left: 0;
}

/* Navbar Styles */
.header .navbar ul{
    /* Removes default list styling */
    list-style-type: none;
    /* Sets the display to flex, enabling flexbox layout */
    display: flex;
    /* Vertically aligns items in the center */
    align-items: center;
    /* Distributes space evenly between items */
    justify-content: space-around;
}

.header .navbar ul li{
    /* Adds a margin of 0 on top/bottom and 1.5rem (15px) on left/right */
    margin: 0 1.5rem;
}

.header .navbar ul li a{
    /* Sets the font size to 2rem (20px) */
    font-size: 2rem;
    /* Sets the text color to white */
    color: var(--white);
}

.header .navbar ul li a:hover{
    /* Changes the text color to #00bfff on hover */
    color: var(--primary-color-light);
    /* Adds an underline on hover */
    text-decoration: underline;
}

.header .logo i{
    /* Adds padding of 0.5rem (5px) */
    padding: 0.5rem;
}

.header .fa-bars{
    /* Sets the text color to white */
    color: var(--white);
    /* Changes the cursor to a pointer */
    cursor: pointer;
    /* Sets the font size to 3rem (30px) */
    font-size: 3rem;
    /* Hides the element by default */
    display: none;
}