/* Navbar container */
.navbar {
  align-items: center;
  gap: 20px; /* spacing between main menu items */
  background-color: #ffffff;
  padding: 10px;
}


/* Dropdown container */
.dropdown {
  position: relative; /* required for positioning dropdown-content */
  display: inline-block;
}

/* Dropdown content (the submenu) */
.dropdown-content {
  display: none; /* hide by default */
  position: absolute;
  /*background-color: #c09c1b;*/
  min-width: 200px; /* width of submenu */
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  flex-direction: column; /* vertical stack */
}

/* Submenu links */
.dropdown-content a {
  display: block; /* vertical stacking */
  color: #333;
  padding: 10px 15px;
  text-decoration: none;
}

/* Hover effects 
.dropdown-content a:hover {
  background-color: #c09c1b;
}*/

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: flex; /* vertical layout via flex-column */
}


/* ===========================
   NAVBAR + DROPDOWN
   =========================== */
.navbar {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
}

.navbar a,
.navbar button {
  color: #004470;;
  text-decoration: none;
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  background: none;
  cursor: pointer;
}

.navbar a:hover,
.navbar button:hover {
  background: #ffffff; /* hover blue */
  border-radius: 6px;
  background-color: #004470;
  color:#ffffff;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%; /* appear below button */
  left: 0;
  background: #fff;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 6px;
  z-index: 99;
}

.dropdown-content a {
  display: block;
  padding: 10px 14px;
  color: #002b49;
  text-decoration: none;
  font-size: 15px;
}

.dropdown-content a:hover {
  background: #f1f5f9;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}


.navbar {
  position: relative;
  z-index: 1000; /* high enough to be on top */
}

.dropdown {
  position: relative; /* create positioning context for dropdown content */
  z-index: 1001; /* higher than navbar */
}

.dropdown-content {
  position: absolute; /* position dropdown */
  z-index: 2000; /* very high for dropdown */
  display: none; /* hidden by default */
  background-color: #fff; /* visible background */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  min-width: 160px; /* adjust width */
  /* additional styling */
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Style links inside dropdown */
.dropdown-content a {
  display: block;
  padding: 12px 16px;
  color: #333;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #413d8e;
}


.dropdown-content {
  min-width: 250px; /* increase width as needed */
  /* or use width: 300px; for fixed width */
}

.navbar {
  display: flex;
  justify-content: space-between; /* logo left, menu right */
  align-items: center;
}
.menu {
  display: flex;
  gap: 20px;
}


/* Hide menu on small screens */
@media (max-width: 768px) {
  .navbar .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #fff; /* optional, for visibility */
    position: absolute;
    top: 60px; /* adjust according to navbar height */
    left: 0;
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  .navbar .menu.show {
    display: flex;
  }

  
  .navbar .hamburger {
    display: block;
    cursor: pointer;
    font-size: 28px;
    padding: 10px;
  }
}

/* Hide hamburger on large screens */
@media (min-width: 769px) {
  .navbar .hamburger {
    display: none;
  }
}

body, html, .navbar, section, div {
  overflow: visible !important;
}

@media (max-width: 768px) {
  /* Let container span full width */
  .container-custom {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
    text-align: left !important;
  }

  /* Remove width restriction on text */
  .text-body-large {
    max-width: 100% !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
  }

  /* Fix columns so they actually expand */
  .why-global-brands-row > .et_pb_column,
  .why-global-brands-row > .et_pb_column .et_pb_column_inner {
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Ensure image is responsive */
  .why-global-brands-image img {
    width: 100% !important;
    height: auto !important;
  }
}