header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#f3b9b9;
    width:100%;
    height:100px;
    padding: 0;
    position: relative;
    border: 1px solid #660792;
    border-radius: 0.5rem;
}
body {
    background: #b47777;
}
.logo img {
\    padding-]left:0;
    width: 275px; /* Adjust the logo width */
    height: 100px;
}
header .container {
    display:flex;
    justify-content:flex-start;
    align-items: center;
    height: 10%;
}

/* ===========================
   MENUS STYLES
   =========================== */

/* Container for the top-level menu */
header .top-menu {
    list-style-type: none;       /* Remove default bullet points */
    margin: 0;
    padding: 0;
    display: flex;               /* Arrange menu items horizontally */
    position: absolute;          /* Position relative to header */
    bottom: 0;                  /* Align menu to bottom of header */
   /*  border-top-left-radius: 0.5rem; /* Optional rounded corner for smooth integration */
}

/* Top-level menu links */
header .top-menu li a {
    display: block;               /* Make links fill the list item */
    padding: 1rem;                /* Space inside tabs */
    color: #eb1010;               /* Text color */
    background: #e6e2e2;          /* Background color for tabs */
    text-decoration: none;        /* Remove underline */
    font-weight: bold;
    border: 1px solid transparent; /* Transparent border for consistent sizing */
    border-radius: 0.5rem;        /* Rounded corners for main tabs */
    margin-right: 0px;            /* Space between tabs */
    transition: background 0.3s, color 0.3s; /* Smooth hover transitions */
}

/* Each top-level menu item */
header .top-menu li {
    position: relative;           /* Needed for absolute positioning of submenus */
}

/* Submenu container */
header .top-menu li .sub-menu {
    display: none;                /* Hide submenus by default */
    position: absolute;           /* Position relative to parent li */
    z-index: 999;                 /* Ensure submenus appear on top */
    top: 100%;                   /* Position below the parent menu item */
    left: 50%;                   /* Start at horizontal center of parent */
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
    margin: 0;
    padding: 0;
    list-style-type: none;        /* Remove default bullet points */
    width: 200px;                 /* Fixed width for submenu */
    border-radius: 0.3rem;        /* Smaller rounded corners for submenus */
    background-color: white;      /* White background for submenu */
}

/* Links inside submenus */
header .top-menu li .sub-menu a {
    color: green;
    padding: 0.25rem;
    text-align: center;
    display: block;               /* Fill the submenu width */
    text-decoration: none;
}

/* Hover effect on submenu links */
header .top-menu li .sub-menu a:hover {
    background-color: aqua;
    color: beige;
    /* padding left commented out intentionally */
}

/* Nested submenu positioning */
header .top-menu .sub-menu li .sub-menu {
    top: 0;                      /* Align top edges */
    left: 100%;                  /* Position to the right of parent submenu */
}

/* Show first-level submenu on hover of parent */
header .top-menu > .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Show nested submenu on hover of submenu parent */
header .top-menu .sub-menu .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Optional reset for nested lists */
header .top-menu > ul, 
header .top-menu > ul > li {
    list-style: none;
    padding: 0;
    margin: 0;
}