/* ------------------------------------- Nav Menu Line Hover Effect (new) -------------------------------------- */
.nav-area ul li a {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  z-index: 1;
  font-size: var(--font-size-sm);
  letter-spacing: 0.25em;

  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5em 1em;
}

/* Pseudo-elements for top and bottom lines */
.nav-area ul li a::before,
.nav-area ul li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  background-color: var(--color-primary);
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.nav-area ul li a::before {
  top: 0;
  left: 0;
  transform-origin: left;
}

.nav-area ul li a::after {
  bottom: 0;
  right: 0;
  transform-origin: right;
}

/* Hover animation */
.nav-area ul li a:hover::before,
.nav-area ul li a:hover::after {
  width: 100%;
  opacity: 1;
}

/* ------------------------------------- Secondary Nav Styling (new) -------------------------------------- */
/* Base link style */
.nav-secondary a {
  position: relative;
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: #718E7D;
  text-decoration: none;
  padding: 0.35em 0.75em;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}

/* Pseudo-elements: animated lines */
.nav-secondary a::before,
.nav-secondary a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  background-color: #718E7D;
  opacity: 0;
  transition: width 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.nav-secondary a::before {
  top: 0;
  left: 0;
  transform-origin: left;
}

.nav-secondary a::after {
  bottom: 0;
  right: 0;
  transform-origin: right;
}

.nav-secondary a:hover::before,
.nav-secondary a:hover::after {
  width: 100%;
  opacity: 1;
}


/* ------------------------------------- Nav Menu Line Hover Effect -------------------------------------- */
 
 .nav-area .et_pb_menu__menu nav ul li a {
   position: relative;
   overflow: hidden;
   white-space: nowrap;
   display: inline-block;
   z-index: 1;
   font-size: var(--font-size-sm);
   letter-spacing: 0.25em;
 
   color: var(--color-primary);
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   padding: 0.85em 1em;
 }
 .secondary-menu .et_pb_menu__menu nav ul li a {
   color: #718e7d !important;
 }
 
 /* Pseudo-elements (lines) */
 .nav-area .et_pb_menu__menu nav ul li a::before,
 .nav-area .et_pb_menu__menu nav ul li a::after {
   content: '';
   position: absolute;
   width: 0;
   height: 1px;
   background-color: var(--color-primary); /* match text colour */
   opacity: 0;
   transition: width 0.3s ease, opacity 0.3s ease;
   z-index: 2;
   pointer-events: none;
 }
 
 .nav-area .et_pb_menu__menu nav ul li a::before {
   top: 0;
   left: 0;
   transform-origin: left;
 }
 
 .nav-area .et_pb_menu__menu nav ul li a::after {
   bottom: 0;
   right: 0;
   transform-origin: right;
 }
 
 .nav-area .et_pb_menu__menu nav ul li a:hover::before,
 .nav-area .et_pb_menu__menu nav ul li a:hover::after {
   width: 100%;
   opacity: 1;
 }
 
 /* ------------------------------------- Shared Nav Menu Styling -------------------------------------- */
 .et_pb_menu.nav-secondary nav ul li a,
 .et_pb_menu.nav-white nav ul li a {
     position: relative;
     overflow: visible;
     white-space: nowrap;
     display: inline-block;
     z-index: 1;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.25em;
     text-decoration: none;
     padding: 0.5em 0.75em;
 }
 
 /* Size and color variations */
 .et_pb_menu.nav-secondary nav ul li a {
     color: #718e7d;
     font-size: 0.875rem; /* 14px */
 }
 
 .et_pb_menu.nav-white nav ul li a {
     color: #ffffff !important;
     font-size: 0.8125rem; /* 13px */
 }
 
 /* Shared pseudo-elements: hover lines */
 .et_pb_menu.nav-secondary nav ul li a::before,
 .et_pb_menu.nav-secondary nav ul li a::after,
 .et_pb_menu.nav-white nav ul li a::before,
 .et_pb_menu.nav-white nav ul li a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 1px;
     opacity: 0;
     transition: width 0.3s ease, opacity 0.3s ease;
     pointer-events: none;
     z-index: 2;
 }
 
 /* Color variations for lines */
 .et_pb_menu.nav-secondary nav ul li a::before,
 .et_pb_menu.nav-secondary nav ul li a::after {
     background-color: #718e7d;
 }
 
 .et_pb_menu.nav-white nav ul li a::before,
 .et_pb_menu.nav-white nav ul li a::after {
     background-color: #ffffff;
 }
 
 /* Shared positioning for before elements */
 .et_pb_menu.nav-secondary nav ul li a::before,
 .et_pb_menu.nav-white nav ul li a::before {
     top: -6px;
     left: 0;
     transform-origin: left;
 }
 
 /* Shared positioning for after elements */
 .et_pb_menu.nav-secondary nav ul li a::after,
 .et_pb_menu.nav-white nav ul li a::after {
     bottom: -6px;
     right: 0;
     transform-origin: right;
 }
 
 /* Shared hover effects */
 .et_pb_menu.nav-secondary nav ul li a:hover::before,
 .et_pb_menu.nav-secondary nav ul li a:hover::after,
 .et_pb_menu.nav-white nav ul li a:hover::before,
 .et_pb_menu.nav-white nav ul li a:hover::after {
     width: 100%;
     opacity: 1;
 }


/* ------------------------------------- Button Pill Default -------------------------------------- */

/* Shared base style for Button Module and Text Module */
a.et_pb_button.button-pill-default,
a.button-pill-default {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 1.5rem !important;
  background-color: white !important;
  box-shadow: 0 0 0 2px var(--color-text) !important;
  border-radius: 50px !important;
  border: none !important;
  color: var(--color-text) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  transition: all 0.3s ease !important;
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
  box-sizing: border-box !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

/* Hover effect for both */
a.et_pb_button.button-pill-default:hover,
a.button-pill-default:hover,
a.et_pb_button.button-pill-default:focus,
a.button-pill-default:focus {
  display: inline-flex !important;
  padding: 1rem 1.5rem !important;
  background-color: #000 !important;
  box-shadow: 0 0 0 2px var(--color-gold) !important;
  color: white !important;
  transform: translateY(-1px) !important;
  border: none !important;
  text-decoration: none !important;
}