/* Header Layout Styles */
.header-flex {
    display: flex;
    flex-direction: column;
}

.header-content {
    display: flex;
    justify-content: space-between; /* This ensures the space between the three segments */
    width: 100%;
    align-items: center; /* This will vertically center align the content of the header */
}

.header-logo {
    text-align: left; /* Aligns the logo (and/or text) to the left */
    flex: 0 1 25%;
}

.header-menu {
    justify-content: center;
    flex: 0 1 50%;
}

.header-dropdown {
    justify-content: flex-end;
    flex: 0 1 25%;
}

/* General Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn, .office-dropdown-btn {
    cursor: pointer;
    height: 50px; /* Fixed height */
    width: 250px; /* Adjusted width to accommodate office name */
    background-color: rgb(27, 41, 80);
    display: flex;
    align-items: center;
    justify-content: center; /* Center the content */
    overflow: hidden; /* Hide overflow */
    white-space: nowrap; /* Prevent wrapping */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}

.flag-icon {
    width: 38px; /* Adjusted width for consistency */
    height: 28px; /* Height specified for flag icons */
    margin-right: 8px;
}

/* Office Dropdown Specific Styles */
.office-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: rgb(27, 41, 80);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    padding: 2px;
    overflow: visible;
    width: auto; /* Adjusted for content */
    min-width: 400px; /* Minimum width to accommodate photo and address */
}

.office-dropdown-content .office-entry {
    color: white;
    padding: 4px;
    text-decoration: none;
    display: flex;
    flex-direction: column; /* Layout elements vertically */
    align-items: flex-start; /* Center-align the items */
    text-align: left;
    width: 100%; /* Full width of the dropdown */
    cursor: pointer;
}

.office-dropdown-content .office-entry:hover {
    background-color: #0473f1;
}

.office-header {
    display: flex;
    flex-direction: column; /* Layout flag and office name vertically */
    align-items: flex-start;
    width: 100%;
}

.office-header .flag-icon {
    margin-bottom: 1px; /* Space between flag and office name */
}

.office-header span {
    font-weight: bold; /* Office title */
    margin-bottom: 1px; /* Space between office name and photo/address */
}

.office-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.office-photo {
    width: 200px; /* Updated width for office photos */
    height: auto; /* Maintain aspect ratio */
    margin-right: 20px; /* Space between photo and info */
}

.office-info {
    text-align: left;
    display: flex;
    flex-direction: column; /* Layout address details vertically */
    width: 400px;
    font-size:15px ;
}

.office-info strong, .office-info span {
    display: block; /* Ensure each info piece is on a new line */
    margin-bottom: 4px; /* Space between info lines */
}

/* Toggle Visibility Class */
.show {
    display: block;
}

/* Label for Current Office */
.current-office-label {
    font-size: 1rem;
    color: #ffffff;
    margin-bottom: 0.5rem; /* Space above the dropdown */
}

.office-name {
    font-size: 0.9rem; /* Adjust font size as needed */
    max-width: 80%; /* Limit the text width to prevent overflow */
}

.region-manager {
    font-weight: normal; /* Adjust the font weight as needed */
    font-size: 0.9rem; /* Adjust the font size as needed */
    margin-bottom: 5px; /* Space below the region manager's name, above the photo/address */
}

/* About Us Dropdown Styles */
.about-dropdown-btn {
    cursor: pointer;
    display: inline-block;
}

.about-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

.about-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.about-dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Display the dropdown on hover */
.about-dropdown-btn:hover + .about-dropdown-content, .about-dropdown-content:hover {
    display: block;
}

/* Services Dropdown Styles */
.services-dropdown-btn {
    cursor: pointer;
    display: inline-block;
}

.services-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 300px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

/* Enhanced Dropdown Panel Layout */
.services-dropdown-content a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white; /* Text color */
    padding: 12px;
    border-bottom: 1px solid #eee; /* Separator between dropdown items */
}

/* Text Container within Each Panel */
.services-dropdown-content a .panel-text {
    width: 30%; /* Text occupies 30% of the panel */
}

/* Background Image Container */
.services-dropdown-content a .panel-bg {
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Dark Overlay on Background Image */
.services-dropdown-content a .panel-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1; /* Ensures overlay is above the image but below the text */
}

/* Ensures text is above the dark overlay */
.services-dropdown-content a .panel-text, 
.services-dropdown-content a span, 
.services-dropdown-content a p {
    position: relative;
    z-index: 2;
    color: white; /* Text color */
    margin: 0; /* Reset margins for span and p */
}

/* Display the dropdown on hover */
.services-dropdown-btn:hover + .services-dropdown-content, 
.services-dropdown-content:hover {
    display: block;
}

/* Hover effect for each dropdown panel */
.services-dropdown-content a:hover .panel-bg::before {
    background-color: rgba(0, 0, 0, 0.7); /* Darker overlay on hover */
}

.services-dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Display the dropdown on hover */
.services-dropdown-btn:hover + .services-dropdown-content, .services-dropdown-content:hover {
    display: block;
    width: 400px;
}

/* Enhanced Dropdown Item Layout */
.about-dropdown-content div, .services-dropdown-content div {
    display: flex;
    padding: 4px;
}

.about-dropdown-content a, .services-dropdown-content a {
    display: block;
    color: inherit; /* Ensures anchor tags inherit the color from the parent div */
    padding: 0; /* Resets padding for direct child anchor tags */
    text-decoration: none;
}

.about-dropdown-content div span, .services-dropdown-content div span {
    display: block;
    width: 100%;
    font-weight: bold;
    margin-bottom: 8px; /* Space between title and image/text */
}

.about-dropdown-content img, .services-dropdown-content img {
    height: 100px; /* Adjust based on your design */
    width: auto;
    margin-right: 15px;
}

.about-dropdown-content p, .services-dropdown-content p {
    flex-grow: 1;
    margin: 0; /* Resets default paragraph margins */
}

.about-dropdown-content div:hover, .services-dropdown-content div:hover {
    cursor: pointer;
}

/* Enhanced Dropdown Panel Layout */
.dropdown-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: white; /* Text color */
    padding: 12px;
    border-bottom: 1px solid #eee; /* Separator between dropdown items */
}

/* Background Image Container */
.dropdown-panel .panel-bg {
    flex-grow: 1;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    justify-content: flex-end; /* Adjust based on text alignment */
    align-items: center;
    padding: 10px;
}

/* Dark Overlay on Background Image */
.dropdown-panel .panel-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 1; /* Ensures overlay is above the image but below the text */
}

/* Ensures text is above the dark overlay */
.dropdown-panel .panel-bg .panel-text {
    position: relative;
    z-index: 2;
    text-align: right; /* Adjust based on text alignment */
    margin: 0; /* Reset margins for span and p */
}



/* Services Dropdown Styles */
.services-dropdown-content a.dropdown-panel {
    display: block;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #eee; /* Separator between dropdown items */
}

.panel-bg {
    display: flex;
    background-size: cover;
    background-position: center;
    min-height: 200px; /* Adjust based on your design */
    align-items: center;
    justify-content: center;
}

.panel-text-container {
    display: flex;
    width: 100%;
    padding: 10px;
}

.panel-text-left,
.panel-text-right {
    flex: 1;
    padding: 10px;
}

.panel-text-left {
    flex-basis: 35%;
    text-align: left;
}

.panel-text-right {
    flex-basis: 65%;
    text-align: right;
}

.panel-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
}

.panel-text-container > div {
    position: relative;
    z-index: 1;
    font-size: 15px;
}