img {
  height: auto;
}

.container {
  padding-inline: 15px;
}





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

/* ---------------------------------------------------------
   GLOBAL NAVBAR / HEADER FIXED STYLE 
   Works With Bootstrap 5 
----------------------------------------------------------*/

.header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 20;
  padding: 12px 0;
}

/* When scrolling */
.header.active {
  position:fixed;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------
   NAVBAR BRAND (LOGO + TEXT)
----------------------------------------------------------*/
.navbar-brand .logo-text {
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.header.active .logo-text {
  color: #222;
}

/* Show brand on mobile */
@media(max-width: 767px) {
  .navbar-brand .logo-text {
    font-size: 18px;
    color: #222 !important;
    /* visible on white mobile bg */
  }

}

/* ---------------------------------------------------------
   NAV LINKS
----------------------------------------------------------*/



.navbar-nav .nav-link {
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 14px;
}

.header.active .nav-link {
  color: #222 !important;
}

.navbar-nav .nav-link:hover {
  color: #6c2bd9 !important;
}

.navbar-nav {
  margin-left: auto;
  margin-right: 40px !important;
  /* bring items away from border */
}

/* ---------------------------------------------------------
   DROPDOWN FIX — proper alignment
----------------------------------------------------------*/

.custom-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-dropdown .dropdown-arrow {
  padding: 0 4px;
  cursor: pointer;
  color: #ffffff;
}

.custom-dropdown .dropdown-menu {
  top: 100%;
  left: -50px !important;
  /* Adjust horizontally */
  margin-top: 10px;
}


/* Keep main text NON-dropdown */
.custom-dropdown .main-link {
  pointer-events: auto;
}

/* DROPDOWN MENU DESIGN */
.dropdown-menu {
  padding: 12px 0;
  min-width: 220px;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 8px 22px rgba(0, 0, 0, 0.12);
  background: #ffffff;
  margin-top: 10px !important;


}

/* Dropdown text */
.dropdown-item {
  padding: 10px 18px;
  font-size: 15px;
}

.dropdown-item:hover {
  background: #f5f5ff;
  color: #6c2bd9;
  padding-left: 22px;
  /* Slight animation */

}

/* ---------------------------------------------------------
   HOVER DROPDOWN ONLY ON ARROW (DESKTOP)
----------------------------------------------------------*/
@media (min-width: 992px) {
  .custom-dropdown .dropdown-toggle {
    pointer-events: none;
  }
  
  .custom-dropdown:hover .dropdown-menu,
  .custom-dropdown .dropdown-menu:hover {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (min-width: 992px) {
  .custom-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 12px;
  }
}



/* ---------------------------------------------------------
   MOBILE RESPONSIVE FIX
----------------------------------------------------------*/

@media (max-width: 991px) {

/* FIX MOBILE NAVBAR GAP */
  .header {
    position: fixed;   /* instead of absolute */
    top:0%;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 999;
    background: #ffffff;
  }

  .navbar-nav .nav-link {
    color: #222 !important;
    padding: 12px 10px;
  }

  .dropdown-menu {
    transform: translateX(0);
    position: static;
    margin: 5px 0;
    box-shadow: none;
  }

  .custom-dropdown {
    width: 100%;
    justify-content: space-between;
  }

  .custom-dropdown .dropdown-arrow {
    font-size: 18px;
    color:black;
  }

  
}

@media (min-width: 550px) {

    .header .btn {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
  }
}


@media (min-width: 992px) {
/**
   * HEADER
   */

  .header {
    padding-block: 20px;
  }

  .overlay,
  .nav-open-btn,
  .navbar-top {
    display: none;
  }

  .navbar,
  .navbar.active {
    all: unset;
    margin-inline-start: auto;
  }

  .header .btn {
    margin-inline-start: 0;
  }

  .navbar-list {
    display: flex;
    gap: 25px;
  }

  .navbar-item:not(:last-child) {
    border-bottom: none;
  }

  .navbar-link {
    color: var(--color);
  }
}