.font-poppins {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.bg--header{
    background-color: #773DBD;
}
.text-color-purple{
    color: #773DBD;
}
.text-color-green{
    color: #00CE7C;
}
.smalls{
  font-size: small;
}
.bg-btns{
    background-color: #00CE7C;
}
.dnld{
  font-size: xx-small;
}
.section-portion{
    padding-left: 4.2rem;
    padding-right: 4.2rem;
}

  .download-banner {
    background-image: url('../images/hero/bg-mobile.svg');
    background-size: cover;          /* desktop / tablet */
    background-position: center;
    border-radius: 40px;
    min-height: 560px;
  }

  /* MOBILE: show full image */
  @media (max-width: 767.98px) {
    .download-banner {
      background-size: contain;      /* show whole image */
      background-repeat: no-repeat;
      background-position: center top;
      background-color: #3ac56b;     /* fallback green behind image (optional) */
    }
  }

  /* parent so we can position dropdown under "Services" nicely */
.services-dropdown {
  position: relative;
}

/* main dropdown container – rounded, white, no default BS blue hover */
.services-dropdown-menu {
  min-width: 230px;
  padding: 8px 0;
  border-radius: 18px;
  background: #ffffff;
  margin-top: 14px;              /* distance below nav link */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;              /* keeps the rounded shape clean */
}

/* purple strip at the top (like in your screenshot) */
.services-dropdown-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #6f2cff;          /* adjust to match your header purple */
}

/* individual items */
.services-dropdown-menu .dropdown-item {
  padding: 10px 18px;
  font-size: 14px;
  color: #000000;
  background-color: transparent;
}

/* hover / focus state (light purple) */
.services-dropdown-menu .dropdown-item:hover,
.services-dropdown-menu .dropdown-item:focus {
  background-color: #f3ecff;    /* light lavender like screenshot */
  color: #000000;
}

/* active item (the middle one in your screenshot) */
.services-dropdown-menu .dropdown-item.active {
  background-color: #f3ecff;
  color: #000000;
}

/* remove default BS caret color change on open */
.services-dropdown > .nav-link.dropdown-toggle::after {
  border-top-color: #ffffff;
}
/* So we can position the dropdown neatly under the trigger */
.language-dropdown {
  position: relative;
}

/* Main dropdown box */
.language-dropdown-menu {
  min-width: 190px;              /* adjust if you want wider/narrower */
  padding: 8px 0;
  border-radius: 18px;
  background: #ffffff;
  margin-top: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

/* Purple bar on top, like your screenshot */
.language-dropdown-menu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #6f2cff;          /* match your header purple */
}

/* Items */
.language-dropdown-menu .dropdown-item {
  padding: 10px 18px;
  font-size: 14px;
  color: #000000;
  background-color: transparent;
}

/* Hover state – light purple row */
.language-dropdown-menu .dropdown-item:hover,
.language-dropdown-menu .dropdown-item:focus {
  background-color: #f3ecff;
  color: #000000;
}

/* Optional: active/selected language */
.language-dropdown-menu .dropdown-item.active {
  background-color: #f3ecff;
  color: #000000;
}
/* wrapper so we can position the bubble & pointer */
.address-dropdown {
  position: relative;
}

/* main bubble */
.address-dropdown-menu {
  width: 320px;                 /* adjust to match your design */
  padding: 8px 0 0;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  margin-top: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* little white pointer touching the purple bar */
.address-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* each address row */
.address-row {
  border-bottom: 1px solid #e4e4e4;
}

.address-item {
  padding: 14px 20px;
  white-space: normal;
  background-color: transparent;
}

.address-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
}

.address-text {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  color: #555555;
}

/* remove default hover bg, keep flat white rows */
.address-dropdown-menu .dropdown-item:hover,
.address-dropdown-menu .dropdown-item:focus {
  background-color: #ffffff;
}

/* bottom "+Add New Address" row */
.add-address-row {
  border-top: 1px solid #e4e4e4;
}

.add-address {
  padding: 14px 20px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6f2cff;
  background-color: #ffffff;
}

/* keep button look flat */
.add-address:hover,
.add-address:focus {
  background-color: #ffffff;
  color: #6f2cff;
}
/* Make the dropdown position nicely under the avatar */
.profile-dropdown {
  position: relative;
}

/* White rounded bubble with shadow */
.profile-dropdown-menu {
  width: 260px;                 /* adjust if needed */
  padding: 8px 0 0;
  border-radius: 20px;
  border: none;
  background: #ffffff;
  margin-top: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Little white pointer at the top pointing to the avatar */
.profile-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  right: 26px;                  /* line this up with the avatar center */
  width: 20px;
  height: 20px;
  background: #ffffff;
  transform: rotate(45deg);
  border-radius: 4px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
}

/* Each row with horizontal separators */
.profile-dropdown-menu li + li {
  border-top: 1px solid #e4e4e4;
}

/* Menu items style */
.profile-dropdown-menu .dropdown-item {
  padding: 12px 20px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #000000;
  background-color: #ffffff;
  white-space: nowrap;
}

/* Keep them flat on hover (no grey highlight) */
.profile-dropdown-menu .dropdown-item:hover,
.profile-dropdown-menu .dropdown-item:focus {
  background-color: #ffffff;
  color: #000000;
}

/* Sign Out row – red text like in screenshot */
.profile-dropdown-menu .signout-item {
  color: #d6453d;
  font-weight: 500;
}

.profile-dropdown-menu .signout-item:hover,
.profile-dropdown-menu .signout-item:focus {
  background-color: #ffffff;
  color: #d6453d;
}
/* 🔥 FORCE SHOW FLAG (theme override fix) */
.iti__flag {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-position: center !important;
}

/* Fix collapsed flag container */
.iti__selected-flag {
    display: flex !important;
    align-items: center;
    padding-left: 14px !important;
}

/* Ensure space for flag */
.iti--separate-dial-code input {
    padding-left: 140px !important;
}

/* Prevent Bootstrap / reset CSS from hiding bg image */
.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png") !important;
}

/* Modal z-index fix */
.iti__country-list {
    z-index: 9999 !important;
}