/*
 Theme Name:   Victoria Orthodontics
 Theme URI:    https://eoshealthcaremarketing.com/
 Description:  Victoria Orthodontics — EOS Divi 5 child theme.
 Author:       EOS Healthcare Marketing
 Author URI:   https://eoshealthcaremarketing.com/
 Template:     Divi
 Version:      1.0.0
 Text Domain:  victoria
*/


:root {

  /* Fonts — one --font-[slug] per project font */
  --font-gelica                : "gelica", serif;                             /* Typekit osp6xyo — replaces Forrest */
  --font-avenir-next           : "avenir-next-lt-pro", sans-serif;            /* Typekit osp6xyo */
  --font-avenir-next-condensed : "avenir-next-lt-pro-condensed", sans-serif;  /* Typekit osp6xyo */

  /* Display/body aliases */
  --font-display : var(--font-gelica);
  --font-body    : var(--font-avenir-next);

  /* Colors — from Figma (eos-colors) */
  --teal         : #597C6C;
  --forrest      : #3F5A54;
  --light-teal   : #A0BDB5;
  --med-teal     : rgba(89, 124, 108, 0.2);  /* Teal @ 20% */
  --green        : #B5B7A1;
  --cream        : #F9F3EB;
  --beige        : #DBD5CC;
  --light-brown  : #AA8F7A;
  --dark-brown   : #52352B;

}


@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }
  #menu-footer-menu {
    flex-direction: column !important;
    align-items: center;
  }
}


/* ── Button — Primary CTA (Forrest pill) ──────────────────────
   Apply class "btn-primary" to a Divi Button module's CSS Class
   field, OR to an <a> inside a Text/Code module:
     <a class="btn-primary" href="/contact/">Book Now</a>
   Tokens: --forrest (bg) · --cream (text) · --font-body (Avenir Next)
   ─────────────────────────────────────────────────────────── */
.btn-primary,
a.btn-primary {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : 0.625rem 2rem;
  background      : var(--forrest);
  color           : var(--cream);
  font-family     : var(--font-body);
  font-size       : 1rem;
  font-weight     : 500;
  line-height     : 1.2;
  letter-spacing  : 0.1rem;
  text-align      : center;
  text-transform  : uppercase;
  text-decoration : none;
  white-space     : nowrap;
  border          : 0;
  border-radius   : 12.5rem;
  cursor          : pointer;
  transition      : filter 0.25s ease;
}

.btn-primary:hover,
a.btn-primary:hover {
  color  : var(--cream);
  filter : brightness(1.1);
}

/* Divi Button module — override Divi's defaults + remove the arrow */
.et_pb_button.btn-primary {
  display         : inline-flex !important;
  align-items     : center;
  justify-content : center;
  padding         : 0.625rem 2rem !important;
  background      : var(--forrest) !important;
  color           : var(--cream) !important;
  font-family     : var(--font-body) !important;
  font-size       : 1rem !important;
  font-weight     : 500 !important;
  letter-spacing  : 0.1rem !important;
  text-transform  : uppercase !important;
  white-space     : nowrap !important;
  border          : 0 !important;
  border-radius   : 12.5rem !important;
  transition      : filter 0.25s ease;
}
.et_pb_button.btn-primary::after { display: none !important; }
.et_pb_button.btn-primary:hover  { background: var(--forrest) !important; color: var(--cream) !important; filter: brightness(1.1); }

/* Existing button styles */
@media (max-width: 767px) {
  .btn-primary,
  a.btn-primary,
  .et_pb_button.btn-primary {
    font-size      : 0.75rem !important;
    font-weight    : 400 !important;
    letter-spacing : 0.12rem !important;
    padding        : 0.5rem 1.5rem !important;
  }
}


/* ── Button — Hero variant (large CTA) ───────────────────────
   Same Forrest pill as .btn-primary, but bigger text + padding
   for hero sections. Text scales 16→24px via --text-sub-lg.
   Apply class "btn-primary-hero" to a Divi Button module, or:
     <a class="btn-primary-hero" href="...">Book Now</a>
   ─────────────────────────────────────────────────────────── */
.btn-primary-hero,
a.btn-primary-hero {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : 0.875rem 3.5rem;
  background      : var(--forrest);
  color           : var(--cream);
  font-family     : var(--font-body);
  font-size       : var(--text-sub-lg);
  font-weight     : 600;
  line-height     : 1.2;
  letter-spacing  : 0.15rem;
  text-align      : center;
  text-transform  : uppercase;
  text-decoration : none;
  white-space     : nowrap;
  border          : 0;
  border-radius   : 12.5rem;
  cursor          : pointer;
  transition      : filter 0.25s ease;
}

.btn-primary-hero:hover,
a.btn-primary-hero:hover {
  color  : var(--cream);
  filter : brightness(1.1);
}

/* Divi Button module override */
.et_pb_button.btn-primary-hero {
  display         : inline-flex !important;
  align-items     : center;
  justify-content : center;
  padding         : 0.875rem 3.5rem !important;
  background      : var(--forrest) !important;
  color           : var(--cream) !important;
  font-family     : var(--font-body) !important;
  font-size       : var(--text-sub-lg) !important;
  font-weight     : 600 !important;
  letter-spacing  : 0.15rem !important;
  text-transform  : uppercase !important;
  white-space     : nowrap !important;
  border          : 0 !important;
  border-radius   : 12.5rem !important;
  transition      : filter 0.25s ease;
}
.et_pb_button.btn-primary-hero::after { display: none !important; }
.et_pb_button.btn-primary-hero:hover  { background: var(--forrest) !important; color: var(--cream) !important; filter: brightness(1.1); }

/* Phone — bigger hero button (font + padding bumped up) */
@media (max-width: 767px) {
  .btn-primary-hero,
  a.btn-primary-hero,
  .et_pb_button.btn-primary-hero {
    font-size      : 1.25rem !important;
    letter-spacing : 0.15rem !important;
    padding        : 0.875rem 3rem !important;
  }
}


/* ── Button — Secondary (Cream pill, Dark Brown text) ────────
   Title-case (not uppercase). Same pill radius as .btn-primary.
   Text scales 14→20px via --text-body-md (matches Figma exactly).
   Apply class "btn-secondary" to a Divi Button module, OR:
     <a class="btn-secondary" href="...">About Us</a>
   ─────────────────────────────────────────────────────────── */
.btn-secondary,
a.btn-secondary {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : 0.75rem 3rem;
  background      : var(--cream);
  color           : var(--dark-brown);
  font-family     : var(--font-body);
  font-size       : var(--text-body-md);
  font-weight     : 600;
  line-height     : 1.2;
  letter-spacing  : 0.125rem;
  text-align      : center;
  text-decoration : none;
  white-space     : nowrap;
  border          : 0;
  border-radius   : 12.5rem;
  cursor          : pointer;
  transition      : background-color 0.25s ease, color 0.25s ease;
}

.btn-secondary:hover,
a.btn-secondary:hover {
  background : var(--dark-brown);
  color      : var(--cream);
}

/* Divi Button module override */
.et_pb_button.btn-secondary {
  display         : inline-flex !important;
  align-items     : center;
  justify-content : center;
  padding         : 0.75rem 3rem !important;
  background      : var(--cream) !important;
  color           : var(--dark-brown) !important;
  font-family     : var(--font-body) !important;
  font-size       : var(--text-body-md) !important;
  font-weight     : 600 !important;
  letter-spacing  : 0.125rem !important;
  white-space     : nowrap !important;
  border          : 0 !important;
  border-radius   : 12.5rem !important;
  transition      : filter 0.25s ease;
}
.et_pb_button.btn-secondary::after { display: none !important; }
.et_pb_button.btn-secondary:hover  { background: var(--dark-brown) !important; color: var(--cream) !important; }

/* Phone — tighter padding + slightly tighter tracking per Figma */
@media (max-width: 767px) {
  .btn-secondary,
  a.btn-secondary,
  .et_pb_button.btn-secondary {
    padding        : 0.5rem 1.75rem !important;
    letter-spacing : 0.0875rem !important;
  }
}


/* ── Accordion — Victoria (.va-accordion) ────────────────────
   Add CSS class "va-accordion" to the parent Accordion module
   (Module → Advanced → CSS ID & Classes → CSS Class).
   Mirrors .heading-sm / .body-md via tokens so any type-scale
   or color update flows through automatically.
   Custom +/− icon = thin Forrest outlined circle (replaces
   Divi's default font-icon).
   ─────────────────────────────────────────────────────────── */

/* Transparent background regardless of open/closed state */
.va-accordion .et_pb_toggle,
.va-accordion .et_pb_toggle_open,
.va-accordion .et_pb_toggle_close {
  background-color: transparent !important;
}

/* Kill Divi's default gray border (the Forrest underline now lives
   on the title, so it stays put when the toggle opens).
   position:relative makes the toggle the positioning context for
   the icon (::after on title), so the icon lands at the toggle's
   right edge — sidesteps Divi's mobile title-width quirks. */
.va-accordion .et_pb_toggle {
  border        : none !important;
  border-radius : 0 !important;
  position      : relative !important;
}

/* Title — mirrors .heading-sm (Forrest, 16→32px fluid).
   No position:relative here on purpose — the icon (title::after)
   resolves up to .et_pb_toggle for its positioning context, which
   guarantees it lands at the toggle's true right edge.
   padding-right reserves space so the title text doesn't run under
   the overlapping icon. */
.va-accordion .et_pb_toggle_title {
  font-family    : var(--font-display);
  font-size      : var(--text-sm);
  font-style     : italic !important;
  font-weight    : 400 !important;
  line-height    : 1.26;
  color          : var(--forrest) !important;
  display        : block !important;
  width          : 100% !important;
  padding-right  : 3.5rem !important;
  padding-bottom : 0.75rem !important;     /* desktop reduced to 0.75rem below */
  border-bottom  : 1px solid var(--forrest) !important;
}

/* Hide Divi's built-in font-icon (+/−) so we can draw our own */
.va-accordion .et_pb_toggle_title::before {
  display: none !important;
}

/* Custom circle on the right — fluid 23→39px, Forrest outline.
   The +/− symbol is drawn as background-gradient bars (pixel-exact
   thickness — a text "+"/"−" is too thin no matter the font weight).
   Positioned absolute, but resolves to .et_pb_toggle (not the title)
   so right:0 = the toggle's true right edge.
   top is computed from the title's font-size so the icon's center
   tracks the title text's vertical center across breakpoints;
   the 0.625rem accounts for Divi's default ~10px toggle padding-top. */
.va-accordion .et_pb_toggle_title::after {
  content       : "";
  position      : absolute;
  top           : calc(0.625rem + var(--text-sm) * 0.63);
  right         : 0;
  width         : clamp(1.438rem, 1.160rem + 1.183vw, 2.438rem);  /* 23 → 39px */
  height        : clamp(1.438rem, 1.160rem + 1.183vw, 2.438rem);
  border        : 2px solid var(--forrest);
  border-radius : 50%;
  transform     : translateY(-50%);
  background    :
    linear-gradient(var(--forrest), var(--forrest)) center / 50% 2px no-repeat,
    linear-gradient(var(--forrest), var(--forrest)) center / 2px 50% no-repeat;
}

/* Open state — hide vertical bar, leaving just the minus */
.va-accordion .et_pb_toggle_open .et_pb_toggle_title::after {
  background : linear-gradient(var(--forrest), var(--forrest)) center / 50% 2px no-repeat;
}

/* Desktop — 2px border + 2px bars (matches Figma, dialed down 1px).
   Also bump the title's padding-bottom so the underline sits 1rem
   lower beneath the title text. */
@media (min-width: 768px) {
  .va-accordion .et_pb_toggle_title       { padding-bottom: 1rem !important; }
  .va-accordion .et_pb_toggle_title::after {
    top: 1rem !important;   /* nudged higher than the text-center calc */
  }
}

/* Body — mirrors .body-md (Avenir Next, 14→20px fluid).
   padding-top creates breathing room between the title's underline
   and the start of the body copy when the toggle is open. */
.va-accordion .et_pb_toggle_content {
  padding-top : 2rem !important;
}
.va-accordion .et_pb_toggle_content,
.va-accordion .et_pb_toggle_content p,
.va-accordion .et_pb_toggle_content li {
  font-family    : var(--font-body);
  font-size      : var(--text-body-md);
  font-weight    : 400 !important;
  line-height    : 1.5;
  letter-spacing : 0.125rem;
  color          : var(--dark-brown) !important;
}

/* Mobile — underline moves from the title to the toggle wrapper
   so it sits below the whole open box (desktop keeps it on title) */
@media (max-width: 767px) {
  /* Underline moves from title to the toggle wrapper.
     Tightened padding on both so the underline sits closer to the
     title when closed. */
  .va-accordion .et_pb_toggle_title {
    border-bottom  : none !important;
    padding-bottom : 0.25rem !important;
  }
  .va-accordion .et_pb_toggle {
    border-bottom  : 2px solid var(--forrest) !important;
    padding-bottom : 0.5rem !important;   /* reduce Divi's default */
  }

  /* Icon nudged up so it visually aligns with the title text */
  .va-accordion .et_pb_toggle_title::after {
    top: 0.75rem !important;
  }

  /* Tighter title→body gap when the toggle is open */
  .va-accordion .et_pb_toggle_content {
    padding-top: 0.75rem !important;
  }
}


/* ── Mobile: accordion toggle inside .va-card-row ────────────
   Row stacking + responsive padding now live in Theme Options
   on .va-card-row / .va-card-padded (stable named classes).
   What remains here: zero out Divi's default horizontal padding
   on the toggle so the accordion fills the card row's width on
   phone (otherwise it shrinks the title/icon by ~20px each side).
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .va-accordion .et_pb_toggle {
    padding-left : 0 !important;
    padding-right: 0 !important;
  }
}


/* ── Defensive mobile row stacking ────────────────────────────
   Catches both the named class (.va-card-row) and the legacy
   numeric classes (.et_pb_row_2 / .et_pb_row_4) so any row
   matching either stacks its columns to 100% on phone.
   Belt-and-suspenders for the case where Theme Options or the
   row-level class hasn't been updated yet — without this, columns
   stay side-by-side, the carousel collapses to ~184px wide, slides
   stretch absurdly tall, and centered arrows float in dead space
   below the visible content (the exact symptom seen on Built on
   Values). Safe to keep even after the refactor is fully in.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .va-card-row,
  .et_pb_row_2,
  .et_pb_row_4 {
    flex-wrap: wrap !important;
  }
  .va-card-row  > .et_pb_column,
  .et_pb_row_2  > .et_pb_column,
  .et_pb_row_4  > .et_pb_column {
    width    : 100% !important;
    max-width: 100% !important;
    flex     : 0 0 100% !important;
  }
}


/* ── Toggle — Victoria (.va-toggle) ──────────────────────────
   Transparent Divi Toggle with a Forrest underline and a chevron
   icon (down when closed, up when open) aligned to the title.
   Title typography mirrors .subheading-md, colored Dark Brown.
   Body typography mirrors .body-xl, colored Forrest.
   Apply class "va-toggle" to a Divi Toggle module
   (Module → Advanced → CSS ID & Classes → CSS Class).
   ─────────────────────────────────────────────────────────── */

/* Transparent background regardless of open/closed state */
.va-toggle.et_pb_toggle,
.va-toggle.et_pb_toggle_open,
.va-toggle.et_pb_toggle_close {
  background-color: transparent !important;
}

/* No default border — keep only a Forrest underline.
   position:relative makes the toggle wrapper the positioning
   context for the chevron, which guarantees the chevron lands at
   the wrapper's full-width right edge (not the title's narrower
   right edge that Divi's internal markup tends to enforce). */
.va-toggle {
  border        : none !important;
  border-bottom : 1px solid var(--forrest) !important;
  border-radius : 0 !important;
  position      : relative !important;
}

/* Title — mirrors .subheading-md (Avenir Next 600, fluid 13→18px,
   uppercase, tracking 0.2475rem) with Dark Brown color.
   No position:relative here on purpose — the chevron (title::after)
   resolves up to .va-toggle for its positioning context. */
.va-toggle .et_pb_toggle_title {
  font-family    : var(--font-body) !important;
  font-size      : var(--text-sub-md) !important;
  font-weight    : 600 !important;
  line-height    : 1.444 !important;
  letter-spacing : 0.2475rem !important;
  text-transform : uppercase !important;
  color          : var(--dark-brown) !important;
  padding-right  : 2rem !important;          /* reserve text space so it doesn't run under the chevron */
}

/* Hide Divi's default font-icon (+/− glyph) */
.va-toggle .et_pb_toggle_title::before {
  display: none !important;
}

/* Forrest chevron — absolute-positioned, lands at the toggle
   wrapper's right edge (because title is not positioned). top is a
   fixed offset so the chevron stays anchored to the title and
   doesn't drift when the toggle opens. */
.va-toggle .et_pb_toggle_title::after {
  content          : "";
  position         : absolute;
  right            : 0;
  top              : .75rem;
  width            : 0.625rem;
  height           : 0.625rem;
  border-right     : 2px solid var(--forrest);
  border-bottom    : 2px solid var(--forrest);
  transform        : translateY(-50%) rotate(45deg);    /* chevron down */
  transform-origin : center;
  transition       : transform 0.3s ease;
}

/* Open state — flip chevron up */
.va-toggle.et_pb_toggle_open .et_pb_toggle_title::after {
  transform : translateY(-50%) rotate(225deg);
}

/* Body — mirrors .body-xl (Avenir Next, fluid 20→26px) with Forrest color */
.va-toggle .et_pb_toggle_content,
.va-toggle .et_pb_toggle_content p,
.va-toggle .et_pb_toggle_content li {
  font-family : var(--font-body) !important;
  font-size   : var(--text-body-xl) !important;
  line-height : normal !important;
  color       : var(--forrest) !important;
}


/* ── Slider / Carousel — Victoria (.va-slider) ───────────────
   Mobile: pull the prev/next arrows off the sides and drop them
   below the slide as a centered horizontal pair.
   Divi 5 Group Carousel uses .et_pb_group_carousel_* classes
   (NOT Swiper, NOT the old .et-pb-arrow-* selectors). The arrows
   are <span>s positioned absolute against .et_pb_group_carousel
   itself, with a transform matrix used for vertical centering —
   `transform: none` is required so our bottom value actually wins.
   Apply class "va-slider" to the Group Carousel module
   (Module → Advanced → CSS ID & Classes → CSS Class).
   ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Collapse the dots container — opacity:0 still reserves height,
     which pushes the carousel's bottom edge below the cream card
     and lands the arrows in the (invisible) dots zone outside it. */
  .va-slider .et_pb_group_carousel_dots {
    display: none !important;
  }

  /* Slide outer wrapper — no extra padding, becomes a flex container
     so the inner nested row can stretch to fill the slide's height. */
  .va-slider .et_pb_group_carousel_slide {
    display        : flex !important;
    height         : auto !important;
    padding-bottom : 0 !important;
  }
  .va-slider .et_pb_group_carousel_slide > .et_pb_group {
    display : flex !important;
    width   : 100% !important;
    height  : 100% !important;
  }

  /* The nested inner row — paints the visible cream card. Stretched
     to fill the full slide height so the cream is consistent on all
     slides. padding-bottom gives breathing room above the arrow
     pill (the pill's top half sticks 1.5rem up into the card, so
     content-bottom to pill-top gap = padding-bottom − 1.5rem). */
  .va-slider .et_pb_group_carousel_slide .et_pb_row_nested {
    width           : 100% !important;
    height          : 100% !important;
    display         : flex !important;
    flex-direction  : column !important;
    padding-bottom  : 4rem !important;
  }

  /* Connected cream pill behind both arrows — one continuous shape
     instead of two separate circles. Sits at the carousel's bottom
     edge with 50% above (inside the card) and 50% below (hanging
     outside). pointer-events:none so the underlying arrow buttons
     still catch clicks on the chevrons. */
  .va-slider::after {
    content        : "";
    position       : absolute;
    left           : 50%;
    bottom         : 0;
    transform      : translate(-50%, 50%);
    width          : 8rem;
    height         : 3rem;
    background     : var(--cream);
    border-radius  : 9999px;
    z-index        : 1;
    pointer-events : none;
  }

  /* Track stretches all slides to the tallest slide's height */
  .va-slider .et_pb_group_carousel_track {
    align-items: stretch !important;
  }

  /* Both arrows — transparent (the cream pseudo-element pill behind
     them paints the shared cream). Same 50% overlap as the pill so
     the chevrons line up vertically with the pill. */
  .va-slider .et_pb_group_carousel_arrow_prev,
  .va-slider .et_pb_group_carousel_arrow_next {
    position        : absolute !important;
    top             : auto !important;
    bottom          : 0 !important;
    margin          : 0 !important;
    transform       : translateY(50%) !important;
    opacity         : 1 !important;
    width           : 3rem !important;
    height          : 3rem !important;
    border          : none !important;
    border-radius   : 50% !important;
    background      : transparent !important;
    color           : var(--forrest) !important;
    font-size       : 1.25rem !important;
    display         : flex !important;
    align-items     : center;
    justify-content : center;
    z-index         : 2 !important;
  }

  /* Spread — 3.5rem from center each side (≈ 7rem total apart) */
  .va-slider .et_pb_group_carousel_arrow_prev {
    left  : calc(50% - 3.5rem) !important;
    right : auto !important;
  }
  .va-slider .et_pb_group_carousel_arrow_next {
    left  : auto !important;
    right : calc(50% - 3.5rem) !important;
  }
}


/* DESKTOP: make the menu fill the full width of its container */
@media (min-width: 981px) {
  .pa-open-mobile-menu.et_pb_menu .et-menu,
  .pa-open-mobile-menu.et_pb_fullwidth_menu .et-menu {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 10px;
    column-gap: 10px;
  }
  .pa-open-mobile-menu.et_pb_menu .et_pb_menu__menu,
  .pa-open-mobile-menu.et_pb_menu .et-menu-nav,
  .pa-open-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu,
  .pa-open-mobile-menu.et_pb_fullwidth_menu .et-menu-nav {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto;
  }
  .pa-open-mobile-menu.et_pb_menu .et_pb_menu_inner_container,
  .pa-open-mobile-menu.et_pb_fullwidth_menu .et_pb_menu_inner_container {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .pa-open-mobile-menu.et_pb_menu .et-menu > li,
  .pa-open-mobile-menu.et_pb_fullwidth_menu .et-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }
}
/* MOBILE: column-centered menu (requires the module to have the
   CSS class "pa-open-mobile-menu" added in its Advanced tab) */
@media (max-width: 980px) {
  .pa-open-mobile-menu .et_pb_menu__menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .pa-open-mobile-menu .et_mobile_nav_menu {
    display: none !important;
  }
  .pa-open-mobile-menu .et_pb_menu_inner_container,
  .pa-open-mobile-menu .et_pb_menu__wrap,
  .pa-open-mobile-menu .et-menu-nav {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .pa-open-mobile-menu .et_pb_menu__menu .et-menu,
  .pa-open-mobile-menu ul.et-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pa-open-mobile-menu .et_pb_menu__menu .et-menu > li,
  .pa-open-mobile-menu ul.et-menu > li {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    text-align: center !important;
  }
  .pa-open-mobile-menu .et_pb_menu__menu .et-menu > li > a,
  .pa-open-mobile-menu ul.et-menu > li > a {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    white-space: nowrap !important;
    padding: 0 !important;
  }
}