/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jan 22 2026 | 11:05:19 */
/* ==========================================================================
   PARENT DASHBOARD FAQ - OPTIMIZED
   Dark Blue (#022342) | Gold Questions (#f0d397) | White Answers
   ========================================================================== */

:root {
  --faq-primary: #022342;
  --faq-primary-dark: #011a33;
  --faq-accent: #f0d397;
  --faq-accent-hover: #f5e0b3;
  --faq-border: rgba(240, 211, 151, 0.2);
  --faq-radius: 12px;
  --faq-transition: 0.3s ease;
}

/* ==========================================================================
   PAGE TITLE
   ========================================================================== */

.parent-faq-title {
  color: var(--faq-accent) !important;
  font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 30px !important;
  padding: 25px 30px !important;
  background: linear-gradient(135deg, var(--faq-primary), var(--faq-primary-dark)) !important;
  border: 2px solid var(--faq-accent) !important;
  border-radius: var(--faq-radius) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */

.faq-main-wrapper {
  background: linear-gradient(135deg, var(--faq-primary), var(--faq-primary-dark)) !important;
  border: 2px solid var(--faq-accent) !important;
  border-radius: var(--faq-radius) !important;
  padding: clamp(20px, 4vw, 40px) !important;
  margin: 30px 0 !important;
}

/* ==========================================================================
   SECTION HEADINGS - BEIGE (Tuition Questions, etc.)
   ========================================================================== */

h2.wp-block-heading.faq-section-heading,
.faq-section-heading {
  color: #f0d397 !important;
  font-size: clamp(1.1rem, 3vw, 1.75rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 35px 0 20px !important;
  padding: 12px 20px !important;
  background: transparent !important;
  border-left: 4px solid var(--faq-accent) !important;
}

.faq-section-heading:first-of-type {
  margin-top: 0 !important;
}

/* ==========================================================================
   UAGB FAQ BLOCK
   ========================================================================== */

.wp-block-uagb-faq {
  background: rgba(240, 211, 151, 0.05) !important;
  border: 1px solid var(--faq-border) !important;
  border-radius: var(--faq-radius) !important;
  padding: 20px !important;
  margin-bottom: 25px !important;
}

.wp-block-uagb-faq .uagb-faq-child__wrapper {
  background: transparent !important;
  border: none !important;
  margin-bottom: 12px !important;
}

.wp-block-uagb-faq .uagb-faq-questions-button {
  background: var(--faq-primary-dark) !important;
  border: 1px solid var(--faq-border) !important;
  padding: 16px 20px !important;
  border-radius: var(--faq-radius) !important;
  transition: var(--faq-transition) !important;
}

.wp-block-uagb-faq .uagb-faq-questions-button:hover {
  border-color: var(--faq-accent) !important;
}

.wp-block-uagb-faq .uagb-question {
  color: var(--faq-accent) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.wp-block-uagb-faq .uagb-faq-content {
  background: var(--faq-primary-dark) !important;
  padding: 20px !important;
  border-radius: 0 0 var(--faq-radius) var(--faq-radius) !important;
  border: 1px solid var(--faq-border) !important;
  border-top: 2px solid var(--faq-accent) !important;
}

.wp-block-uagb-faq .uagb-faq-content,
.wp-block-uagb-faq .uagb-faq-content p,
.wp-block-uagb-faq .uagb-faq-content li {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.wp-block-uagb-faq .uagb-faq-content strong {
  color: var(--faq-accent) !important;
}

.wp-block-uagb-faq .uagb-faq-icon-wrap svg {
  fill: var(--faq-accent) !important;
}

/* ==========================================================================
   CONTENT TOGGLE (UB) - QUESTIONS & ANSWERS
   ========================================================================== */

.wp-block-ub-content-toggle {
  margin: 20px 0 !important;
}

.wp-block-ub-content-toggle-panel {
  background: var(--faq-primary-dark) !important;
  border: 1px solid var(--faq-border) !important;
  border-radius: var(--faq-radius) !important;
  margin-bottom: 12px !important;
  overflow: hidden !important;
  transition: var(--faq-transition) !important;
}

.wp-block-ub-content-toggle-panel:hover {
  border-color: var(--faq-accent) !important;
  transform: translateY(-2px) !important;
}

.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion,
.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion-title-wrap {
  background: var(--faq-primary-dark) !important;
  padding: 16px 20px !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--faq-transition) !important;
}

.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion:hover {
  background: rgba(240, 211, 151, 0.05) !important;
}

.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion-title,
.wp-block-ub-content-toggle-panel h3 {
  color: var(--faq-accent) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.wp-block-ub-content-toggle-panel svg {
  fill: var(--faq-accent) !important;
  color: var(--faq-accent) !important;
}

.wp-block-ub-content-toggle-panel.open .wp-block-ub-content-toggle-accordion,
.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion[aria-expanded="true"] {
  background: rgba(240, 211, 151, 0.08) !important;
  border-bottom: 2px solid var(--faq-accent) !important;
}

.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion-content-wrap {
  background: var(--faq-primary-dark) !important;
  padding: 20px !important;
}

.wp-block-ub-content-toggle-accordion-content-wrap,
.wp-block-ub-content-toggle-accordion-content-wrap p,
.wp-block-ub-content-toggle-accordion-content-wrap li,
.wp-block-ub-content-toggle-accordion-content-wrap div,
.wp-block-ub-content-toggle-accordion-content-wrap span {
  color: #fff !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.wp-block-ub-content-toggle-accordion-content-wrap strong {
  color: var(--faq-accent) !important;
}

.wp-block-ub-content-toggle-accordion-content-wrap ul,
.wp-block-ub-content-toggle-accordion-content-wrap ol {
  margin: 12px 0 !important;
  padding-left: 22px !important;
}

.wp-block-ub-content-toggle-accordion-content-wrap li {
  margin-bottom: 8px !important;
}

.wp-block-ub-content-toggle-accordion-content-wrap li::marker {
  color: var(--faq-accent) !important;
}

/* ==========================================================================
   LINKS & BUTTONS
   ========================================================================== */

.faq-main-wrapper a,
.wp-block-uagb-faq a,
.wp-block-ub-content-toggle-accordion-content-wrap a {
  color: var(--faq-accent) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  transition: var(--faq-transition) !important;
}

.faq-main-wrapper a:hover,
.wp-block-uagb-faq a:hover,
.wp-block-ub-content-toggle-accordion-content-wrap a:hover {
  color: #fff !important;
}

.faq-main-wrapper .wp-block-button__link {
  background: linear-gradient(135deg, var(--faq-accent), var(--faq-accent-hover)) !important;
  color: var(--faq-primary) !important;
  padding: 12px 28px !important;
  border: none !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: var(--faq-transition) !important;
}

.faq-main-wrapper .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(240, 211, 151, 0.3) !important;
}

/* ==========================================================================
   CONTACT & MISC
   ========================================================================== */

.faq-contact-box {
  background: rgba(240, 211, 151, 0.08) !important;
  border: 1px solid var(--faq-border) !important;
  border-radius: var(--faq-radius) !important;
  padding: 25px !important;
  margin-top: 35px !important;
  text-align: center !important;
}

.faq-contact-box h3 {
  color: var(--faq-accent) !important;
  font-size: 1.4rem !important;
  margin-bottom: 12px !important;
}

.faq-contact-box p {
  color: #fff !important;
  font-size: 15px !important;
}

.faq-main-wrapper hr.wp-block-separator {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--faq-accent), transparent) !important;
  margin: 35px 0 !important;
  opacity: 0.5 !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
  h2.wp-block-heading.faq-section-heading,
  .faq-section-heading {
    font-size: 1.1rem !important;
    padding: 10px 15px !important;
  }

  .wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion,
  .wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion-content-wrap {
    padding: 14px 16px !important;
  }
  
  .wp-block-ub-content-toggle-panel h3,
  .wp-block-uagb-faq .uagb-question {
    font-size: 14px !important;
  }
  
  .wp-block-ub-content-toggle-accordion-content-wrap p,
  .wp-block-ub-content-toggle-accordion-content-wrap li,
  .wp-block-uagb-faq .uagb-faq-content p {
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  .faq-main-wrapper {
    margin: 15px 5px !important;
  }

  h2.wp-block-heading.faq-section-heading,
  .faq-section-heading {
    font-size: 1rem !important;
    padding: 8px 12px !important;
  }
  
  .wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion {
    padding: 12px 14px !important;
  }
  
  .wp-block-ub-content-toggle-panel h3 {
    font-size: 13px !important;
  }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

.wp-block-ub-content-toggle-panel {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.wp-block-ub-content-toggle-panel .wp-block-ub-content-toggle-accordion-content-wrap {
  transition: max-height 0.3s ease, padding 0.3s ease !important;
}

/* ==========================================================================
   HEADER & NAVIGATION
   Mishkan Shmuel - Premium Header Styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom Properties
   -------------------------------------------------------------------------- */
.site-header {
  --header-bg: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%);
  --header-bg-sticky: rgba(255, 255, 255, 0.98);
  --header-shadow: 0 2px 20px rgba(2, 35, 66, 0.08);
  --header-shadow-sticky: 0 4px 30px rgba(2, 35, 66, 0.12);
  
  --nav-color: #022342;
  --nav-color-hover: #f0d397;
  --nav-font-size: 15px;
  
  --gold: #f0d397;
  --gold-light: #f5e0b3;
  --gold-dark: #d4b577;
  --primary: #022342;
  --primary-rgb: 2, 35, 66;
  --gold-rgb: 240, 211, 151;
  
  --logo-size: 70px;
  --transition: 0.3s ease;
}

/* ==========================================================================
   HEADER CONTAINER
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.2);
  box-shadow: var(--header-shadow);
  transition: all var(--transition);
}

.site-header.is-sticky {
  background: var(--header-bg-sticky);
  box-shadow: var(--header-shadow-sticky);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header:hover {
  box-shadow: 0 4px 25px rgba(var(--gold-rgb), 0.15);
}

/* --------------------------------------------------------------------------
   Inner Container
   -------------------------------------------------------------------------- */
.inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  padding: 15px 30px;
}

.inside-header.grid-container {
  width: 100%;
}

/* ==========================================================================
   LOGO
   ========================================================================== */

.site-logo {
  flex-shrink: 0;
  transition: transform var(--transition);
}

.site-logo:hover {
  transform: translateY(-2px);
}

.site-logo a {
  display: block;
  line-height: 0;
}

.site-logo img,
.site-logo .header-image,
.site-logo img.is-logo-image,
.site-logo img[width],
.site-logo img[height] {
  width: var(--logo-size) !important;
  height: var(--logo-size) !important;
  max-width: var(--logo-size) !important;
  max-height: var(--logo-size) !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: drop-shadow(0 2px 10px rgba(var(--primary-rgb), 0.1));
  transition: all var(--transition);
}

.site-logo img:hover {
  filter: drop-shadow(0 4px 15px rgba(var(--gold-rgb), 0.3));
}

/* ==========================================================================
   MAIN NAVIGATION
   ========================================================================== */

.main-navigation,
#site-navigation {
  flex-grow: 1;
}

.main-navigation .inside-navigation,
#site-navigation .inside-navigation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.main-navigation .main-nav,
#site-navigation .main-nav {
  display: flex;
  justify-content: flex-end;
}

#site-navigation .menu-toggle {
  display: none;
}

/* --------------------------------------------------------------------------
   Menu List
   -------------------------------------------------------------------------- */
.main-nav ul {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav li {
  position: relative;
}

/* --------------------------------------------------------------------------
   Menu Links
   -------------------------------------------------------------------------- */
.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  overflow: hidden;
  border-radius: 8px;
  color: var(--nav-color) !important;
  font-size: var(--nav-font-size);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--transition);
}

.main-nav a:hover {
  color: var(--nav-color-hover) !important;
  background: rgba(var(--primary-rgb), 0.03);
}

/* Animated Underline */
.main-nav > ul > li > a::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width var(--transition);
}

.main-nav > ul > li > a:hover::before,
.main-nav > ul > li.current-menu-item > a::before {
  width: calc(100% - 36px);
}

/* Ripple Effect */
.main-nav a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.main-nav a:active::after {
  width: 300px;
  height: 300px;
}

/* Active States */
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a {
  color: var(--nav-color-hover) !important;
  background: rgba(var(--primary-rgb), 0.05);
}

/* ==========================================================================
   DROPDOWN MENUS
   ========================================================================== */

.dropdown-menu-toggle {
  padding-left: 8px;
  opacity: 0.6;
  transition: all var(--transition);
}

.dropdown-menu-toggle .gp-icon {
  font-size: 10px;
}

li:hover > a .dropdown-menu-toggle {
  opacity: 1;
  transform: rotate(180deg);
}

/* Dropdown Container */
.main-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  display: block;
  min-width: 250px;
  padding: 10px 0;
  background: #ffffff;
  border: 1px solid rgba(var(--primary-rgb), 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(var(--primary-rgb), 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition);
}

.main-nav li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  animation: dropdownReveal 0.3s ease forwards;
}

@keyframes dropdownReveal {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown Items */
.main-nav ul ul li {
  display: block;
  width: 100%;
}

.main-nav ul ul a {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
}

.main-nav ul ul a::before {
  display: none;
}

.main-nav ul ul a:hover {
  padding-left: 25px;
  color: var(--nav-color) !important;
  background: linear-gradient(
    90deg,
    rgba(var(--gold-rgb), 0.1) 0%,
    rgba(var(--gold-rgb), 0.05) 100%
  );
}

/* ==========================================================================
   SPECIAL MENU BUTTONS
   ========================================================================== */

/* Login Button */
#menu-item-490 > a {
  margin-left: 15px;
  padding: 10px 25px;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--primary) !important;
  font-weight: 700;
  box-shadow: 0 3px 15px rgba(var(--gold-rgb), 0.3);
}

#menu-item-490 > a::before {
  display: none;
}

#menu-item-490 > a:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold) 100%);
  box-shadow: 0 5px 20px rgba(var(--gold-rgb), 0.4);
}

/* Donate Button */
#menu-item-44 > a {
  color: var(--gold) !important;
  font-weight: 700;
}

#menu-item-44 > a::after {
  content: "♥";
  margin-left: 5px;
  font-size: 12px;
  opacity: 0.7;
}

#menu-item-44 > a:hover::after {
  opacity: 1;
}

/* ==========================================================================
   MOBILE TOGGLE
   ========================================================================== */

.mobile-menu-control-wrapper {
  display: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition);
}

.menu-toggle:hover {
  background: var(--primary);
  color: var(--gold);
}

.menu-toggle .gp-icon {
  display: flex;
  align-items: center;
  font-size: 20px;
}

/* ==========================================================================
   SCROLL STATE
   ========================================================================== */

.scrolled .site-header {
  padding: 10px 0;
}

.scrolled .site-logo img,
.scrolled .site-logo .header-image,
.scrolled .site-logo img.is-logo-image {
  width: 55px !important;
  height: 55px !important;
  max-width: 55px !important;
  max-height: 55px !important;
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .inside-header {
    padding: 15px 20px;
  }

  .site-logo img,
  .site-logo .header-image,
  .site-logo img.is-logo-image {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .main-nav a {
    padding: 10px 15px;
    font-size: 14px;
  }

  #menu-item-490 > a {
    margin-left: 10px;
    padding: 8px 20px;
  }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .mobile-menu-control-wrapper {
    display: block !important;
  }

  .menu-toggle {
    display: flex !important;
    margin-left: auto;
  }

  #site-navigation .main-nav {
    display: none !important;
  }

  .site-logo img,
  .site-logo .header-image,
  .site-logo img.is-logo-image {
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
  }

  /* Fullscreen Mobile Menu */
  #site-navigation.toggled {
    position: fixed;
    inset: 0;
    z-index: 99999;
    padding-top: 80px;
    overflow-y: auto;
    background: rgba(var(--primary-rgb), 0.97);
  }

  #site-navigation.toggled .main-nav {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    background: #ffffff;
  }

  #site-navigation.toggled .main-nav ul {
    flex-direction: column !important;
    gap: 0 !important;
    width: 100%;
  }

  #site-navigation.toggled .main-nav li {
    width: 100%;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
  }

  #site-navigation.toggled .main-nav a {
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
  }

  #site-navigation.toggled .main-nav ul ul {
    position: relative !important;
    inset: 0 !important;
    width: 100%;
    padding-left: 15px;
    border: none !important;
    border-radius: 0;
    background: rgba(var(--primary-rgb), 0.05);
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #site-navigation.toggled .main-nav ul ul a {
    padding: 14px 15px;
    font-size: 15px;
  }

  #menu-item-490 > a {
    margin: 10px 0;
    text-align: center;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .inside-header {
    padding: 12px 15px;
  }

  .site-logo img,
  .site-logo .header-image,
  .site-logo img.is-logo-image {
    width: 45px !important;
    height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
  }

  .menu-toggle {
    padding: 8px 12px !important;
  }

  #site-navigation.toggled .main-nav a {
    padding: 14px 15px;
    font-size: 15px;
  }
}

/* ==========================================================================
   ACCESSIBILITY & PRINT
   ========================================================================== */

.main-nav a:focus,
.menu-toggle:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-logo,
  .main-nav a,
  .main-nav ul ul,
  .dropdown-menu-toggle {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header {
    box-shadow: none;
    border-bottom: 1px solid #ddd;
  }

  .menu-toggle,
  .mobile-menu-control-wrapper {
    display: none !important;
  }
}
/* ================================================
   MISHKAN SHMUEL SCHEDULE PAGE - OPTIMIZED
   Theme: Dark Blue (#022342) & Gold (#f0d397)
   Performance-focused with reduced redundancy
   ================================================ */

/* ================================================
   CSS CUSTOM PROPERTIES - SINGLE SOURCE OF TRUTH
   ================================================ */
:root {
  /* ===== COLORS ===== */
  --ms-primary: #022342;
  --ms-primary-light: #0a3a5c;
  --ms-primary-dark: #011a33;
  --ms-gold: #f0d397;
  --ms-gold-light: #f5e0b3;
  --ms-gold-dark: #d4b577;
  --ms-white: #ffffff;
  --ms-cream: #faf8f5;
  
  /* Alpha Variants */
  --ms-gold-08: rgba(240, 211, 151, 0.08);
  --ms-gold-10: rgba(240, 211, 151, 0.1);
  --ms-gold-20: rgba(240, 211, 151, 0.2);
  --ms-gold-30: rgba(240, 211, 151, 0.3);
  --ms-gold-40: rgba(240, 211, 151, 0.4);
  --ms-gold-50: rgba(240, 211, 151, 0.5);
  --ms-primary-70: rgba(2, 35, 66, 0.7);
  --ms-primary-04: rgba(2, 35, 66, 0.04);

  /* ===== GRADIENTS ===== */
  --gradient-hero: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-light) 40%, var(--ms-primary) 100%);
  --gradient-gold: linear-gradient(135deg, var(--ms-gold) 0%, var(--ms-gold-light) 100%);
  --gradient-gold-line: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
  --gradient-decorative-line: linear-gradient(90deg, transparent 0%, var(--ms-gold) 20%, var(--ms-gold-light) 50%, var(--ms-gold) 80%, transparent 100%);
  --gradient-separator: linear-gradient(90deg, transparent 0%, var(--ms-gold) 15%, var(--ms-gold-light) 30%, var(--ms-primary) 50%, var(--ms-gold-light) 70%, var(--ms-gold) 85%, transparent 100%);
  --gradient-section: linear-gradient(180deg, var(--ms-cream) 0%, var(--ms-white) 20%, var(--ms-white) 80%, var(--ms-cream) 100%);

  /* ===== SHADOWS ===== */
  --shadow-title: 
    0 0 40px var(--ms-gold-50), 
    0 0 80px var(--ms-gold-30), 
    0 4px 20px rgba(0, 0, 0, 0.7);
  --shadow-title-glow: 
    0 0 50px rgba(240, 211, 151, 0.7), 
    0 0 100px var(--ms-gold-40), 
    0 4px 25px rgba(0, 0, 0, 0.8);
  --shadow-badge: 
    0 10px 40px var(--ms-gold-40), 
    0 5px 20px rgba(0, 0, 0, 0.2);
  --shadow-table: 
    0 25px 60px var(--ms-gold-30), 
    0 10px 30px rgba(0, 0, 0, 0.08);

  /* ===== TIMING ===== */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;

  /* ===== SPACING ===== */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 45px;
  --space-2xl: 60px;
  --space-3xl: 90px;

  /* ===== SIZING - HERO ===== */
  --hero-min-height: 50vh;
  --hero-padding: 70px 40px;
  --hero-max-width: 1000px;
  --badge-size: 80px;
  --line-width: 220px;

  /* ===== SIZING - CONTENT ===== */
  --section-padding: 90px 40px 110px;
  --content-width: 80%;
  --content-max-width: 1000px;
  --heading-line-width: 100px;
  --separator-max-width: 550px;

  /* ===== RADII ===== */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 50%;
}

/* ================================================
   CONSOLIDATED ANIMATIONS
   ================================================ */
@keyframes cosmic-rotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

@keyframes reveal-up {
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes reveal-scale {
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
    filter: blur(0); 
  }
}

@keyframes pulse-glow {
  0%, 100% { text-shadow: var(--shadow-title); }
  50% { text-shadow: var(--shadow-title-glow); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes line-grow {
  to { 
    width: var(--line-width); 
    opacity: 1; 
  }
}

@keyframes bubble-float {
  0%, 100% { 
    transform: translateY(0) scale(1); 
    opacity: 0.5; 
  }
  50% { 
    transform: translateY(-25px) scale(1.05); 
    opacity: 0.8; 
  }
}

@keyframes badge-reveal {
  to { 
    opacity: 1; 
    transform: scale(1) rotate(0deg); 
  }
}

@keyframes shimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* ================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================ */
.schedule-hero,
.schedule-section {
  contain: layout style paint;
}

.schedule-hero-badge,
.schedule-hero-title,
.schedule-hero-decoration::before,
.schedule-hero-decoration::after,
.schedule-table-wrapper::before {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ================================================
   SCHEDULE HERO SECTION
   ================================================ */
.schedule-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: var(--hero-min-height);
  overflow: hidden;
  background: var(--gradient-hero);
}

/* Multi-layer Background */
.schedule-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(240, 211, 151, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, var(--ms-gold-08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(10, 58, 92, 0.4) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

/* Animated Cosmic Overlay */
.schedule-hero::after {
  content: '';
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  background: 
    radial-gradient(circle at 30% 50%, rgba(240, 211, 151, 0.07) 0%, transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(240, 211, 151, 0.05) 0%, transparent 40%);
  animation: cosmic-rotate 35s linear infinite;
  z-index: 1;
  pointer-events: none;
}

/* ================================================
   HERO INNER CONTAINER
   ================================================ */
.schedule-hero-inner {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--hero-padding);
  max-width: var(--hero-max-width);
  width: 100%;
}

/* ================================================
   HERO BADGE
   ================================================ */
.schedule-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-size);
  height: var(--badge-size);
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-badge);
  
  /* Animation - starts hidden */
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  animation: 
    badge-reveal 1s var(--ease-spring) 0.3s forwards,
    float 3s ease-in-out 1.3s infinite;
}

.schedule-hero-badge svg {
  width: calc(var(--badge-size) * 0.5);
  height: calc(var(--badge-size) * 0.5);
  fill: var(--ms-primary);
}

/* ================================================
   HERO TITLE
   ================================================ */
.schedule-hero-title {
  color: var(--ms-gold);
  font-size: clamp(36px, 7vw, 68px);
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 25px;
  text-shadow: var(--shadow-title);
  
  /* Animation - starts hidden */
  opacity: 0;
  transform: scale(0.9) translateY(40px);
  filter: blur(10px);
  animation: 
    reveal-scale 1.2s var(--ease-out) forwards,
    pulse-glow 4s ease-in-out 1.2s infinite;
}

/* Decorative Line */
.schedule-hero-title::after {
  content: '';
  display: block;
  width: 0;
  height: 4px;
  background: var(--gradient-decorative-line);
  margin: 35px auto 0;
  border-radius: 2px;
  opacity: 0;
  animation: line-grow 1.5s var(--ease-out) 0.8s forwards;
}

/* ================================================
   HERO SUBTITLE
   ================================================ */
.schedule-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 400;
  line-height: 1.7;
  max-width: 750px;
  margin: 35px auto 0;
  
  /* Animation - starts hidden */
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-up 1s var(--ease-out) 0.5s forwards;
}

/* ================================================
   DECORATIVE FLOATING ELEMENTS
   ================================================ */
.schedule-hero-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.schedule-hero-decoration::before,
.schedule-hero-decoration::after {
  content: '';
  position: absolute;
  border: 2px solid var(--ms-gold-08);
  border-radius: var(--radius-full);
  animation: bubble-float 9s ease-in-out infinite;
}

.schedule-hero-decoration::before {
  top: 15%;
  left: 3%;
  width: 180px;
  height: 180px;
}

.schedule-hero-decoration::after {
  bottom: 10%;
  right: 5%;
  width: 120px;
  height: 120px;
  border-color: rgba(240, 211, 151, 0.06);
  animation-duration: 11s;
  animation-direction: reverse;
}

/* ================================================
   SCHEDULE CONTENT SECTION
   ================================================ */
.schedule-section {
  position: relative;
  background: var(--gradient-section);
  padding: var(--section-padding);
}

/* Decorative Top Transition */
.schedule-section::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ms-primary) 0%, transparent 100%);
  opacity: 0.04;
  pointer-events: none;
}

/* ================================================
   SECTION SEPARATOR
   ================================================ */
.schedule-section hr.wp-block-separator {
  border: none;
  height: 3px;
  background: var(--gradient-separator);
  max-width: var(--separator-max-width);
  margin: 0 auto 55px;
  border-radius: 3px;
}

/* ================================================
   SECTION HEADINGS - SHARED STYLES
   ================================================ */
.schedule-heading {
  color: var(--ms-primary);
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.schedule-heading::after {
  content: '';
  display: block;
  width: var(--heading-line-width);
  height: 4px;
  background: var(--gradient-gold-line);
  margin: 25px auto 0;
  border-radius: 2px;
}

/* ================================================
   SECTION SUBHEADING
   ================================================ */
.schedule-subheading {
  color: var(--ms-primary-70);
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 400;
  text-align: center;
  max-width: 650px;
  margin: 0 auto 55px;
  line-height: 1.7;
}

/* ================================================
   SCHEDULE TABLE WRAPPER
   ================================================ */
.schedule-table-wrapper {
  width: var(--content-width);
  max-width: var(--content-max-width);
  margin: 0 auto var(--space-2xl);
  background: var(--gradient-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-xs);
  box-shadow: var(--shadow-table);
  position: relative;
  overflow: hidden;
}

/* Decorative Shimmer Effect */
.schedule-table-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

/* Inner Table Container */
.schedule-table-inner {
  background: var(--ms-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

/* ================================================
   TABLE STYLING (if using native tables)
   ================================================ */
.schedule-table-inner table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.schedule-table-inner th {
  background: var(--ms-primary);
  color: var(--ms-gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 18px 20px;
  text-align: left;
  font-size: 13px;
}

.schedule-table-inner td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(2, 35, 66, 0.08);
  color: var(--ms-primary);
  vertical-align: middle;
}

.schedule-table-inner tr:last-child td {
  border-bottom: none;
}

.schedule-table-inner tr:hover td {
  background: rgba(240, 211, 151, 0.08);
}

/* Time Column */
.schedule-table-inner td:first-child {
  font-weight: 700;
  color: var(--ms-primary);
  white-space: nowrap;
}

/* ================================================
   ADDITIONAL CONTENT CARDS (Optional)
   ================================================ */
.schedule-card {
  background: linear-gradient(135deg, var(--ms-white) 0%, var(--ms-cream) 100%);
  border: 2px solid var(--ms-gold-20);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: 
    transform var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal),
    box-shadow var(--duration-normal);
}

.schedule-card:hover {
  transform: translateY(-4px);
  border-color: var(--ms-gold);
  box-shadow: 0 15px 40px var(--ms-gold-20);
}

.schedule-card-title {
  color: var(--ms-primary);
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}

.schedule-card-text {
  color: var(--ms-primary-70);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

/* ================================================
   NOTES / INFO BOX
   ================================================ */
.schedule-note {
  width: var(--content-width);
  max-width: 800px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg);
  background: linear-gradient(135deg, rgba(2, 35, 66, 0.03) 0%, rgba(2, 35, 66, 0.06) 100%);
  border-left: 4px solid var(--ms-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.schedule-note-title {
  color: var(--ms-primary);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-xs);
}

.schedule-note-text {
  color: var(--ms-primary-70);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* ================================================
   CTA BUTTON (if needed)
   ================================================ */
.schedule-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 16px 40px;
  background: var(--gradient-gold);
  color: var(--ms-primary);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: 
    transform var(--duration-normal) var(--ease-spring),
    box-shadow var(--duration-normal);
  box-shadow: 0 10px 30px var(--ms-gold-30);
}

.schedule-cta:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 40px var(--ms-gold-40);
}

.schedule-cta:active {
  transform: translateY(-2px) scale(1.01);
}

/* ================================================
   RESPONSIVE - LARGE DESKTOP
   ================================================ */
@media (min-width: 1400px) {
  :root {
    --content-width: 70%;
    --content-max-width: 1100px;
  }
}

/* ================================================
   RESPONSIVE - TABLET
   ================================================ */
@media (max-width: 1024px) {
  :root {
    --hero-min-height: 45vh;
    --hero-padding: 55px 35px;
    --badge-size: 70px;
    --line-width: 180px;
    --section-padding: 70px 30px 90px;
    --content-width: 90%;
  }
  
  .schedule-hero-decoration::before { 
    width: 140px; 
    height: 140px; 
  }
  
  .schedule-hero-decoration::after { 
    width: 100px; 
    height: 100px; 
  }
  
  .schedule-table-inner th,
  .schedule-table-inner td {
    padding: 14px 16px;
  }
}

/* ================================================
   RESPONSIVE - MOBILE
   ================================================ */
@media (max-width: 768px) {
  :root {
    --hero-min-height: 40vh;
    --hero-padding: 45px 22px;
    --badge-size: 65px;
    --line-width: 150px;
    --section-padding: 55px 20px 70px;
    --content-width: 95%;
    --heading-line-width: 80px;
  }
  
  .schedule-hero-title {
    font-size: clamp(28px, 8vw, 42px);
    letter-spacing: 3px;
  }
  
  .schedule-hero-title::after {
    margin-top: 25px;
  }
  
  .schedule-hero-subtitle {
    font-size: 15px;
    margin-top: 25px;
  }
  
  /* Hide decorative bubbles on mobile */
  .schedule-hero-decoration::before,
  .schedule-hero-decoration::after {
    display: none;
  }
  
  .schedule-heading {
    font-size: clamp(22px, 6vw, 32px);
  }
  
  .schedule-subheading {
    font-size: 14px;
    margin-bottom: 40px;
  }
  
  .schedule-table-wrapper {
    padding: 6px;
    border-radius: var(--radius-md);
  }
  
  .schedule-table-inner {
    border-radius: var(--radius-sm);
  }
  
  /* Table responsive */
  .schedule-table-inner th,
  .schedule-table-inner td {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .schedule-table-inner th {
    font-size: 11px;
  }
  
  .schedule-note {
    width: 95%;
    padding: var(--space-md);
  }
}

/* ================================================
   RESPONSIVE - SMALL MOBILE
   ================================================ */
@media (max-width: 480px) {
  :root {
    --hero-min-height: 35vh;
    --hero-padding: 35px 18px;
    --badge-size: 55px;
    --line-width: 120px;
    --section-padding: 45px 15px 60px;
    --content-width: 98%;
  }
  
  .schedule-hero-title {
    font-size: clamp(24px, 9vw, 34px);
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  
  .schedule-hero-subtitle {
    font-size: 14px;
    margin-top: 20px;
  }
  
  .schedule-heading {
    font-size: clamp(20px, 7vw, 28px);
    letter-spacing: 1px;
  }
  
  .schedule-heading::after {
    width: 60px;
    margin-top: 18px;
  }
  
  .schedule-subheading {
    font-size: 13px;
    margin-bottom: 30px;
  }
  
  /* Stack table on very small screens */
  .schedule-table-inner table,
  .schedule-table-inner thead,
  .schedule-table-inner tbody,
  .schedule-table-inner th,
  .schedule-table-inner td,
  .schedule-table-inner tr {
    display: block;
  }
  
  .schedule-table-inner thead {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .schedule-table-inner tr {
    margin-bottom: 12px;
    border: 1px solid rgba(2, 35, 66, 0.1);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  
  .schedule-table-inner td {
    position: relative;
    padding: 12px 14px 12px 45%;
    text-align: right;
    border-bottom: 1px solid rgba(2, 35, 66, 0.05);
  }
  
  .schedule-table-inner td::before {
    content: attr(data-label);
    position: absolute;
    left: 14px;
    width: 40%;
    font-weight: 700;
    text-align: left;
    color: var(--ms-primary);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
  }
  
  .schedule-table-inner td:first-child {
    background: var(--ms-primary);
    color: var(--ms-gold);
    text-align: center;
    padding: 14px;
  }
  
  .schedule-table-inner td:first-child::before {
    display: none;
  }
  
  .schedule-cta {
    width: 100%;
    padding: 14px 30px;
    font-size: 14px;
  }
}

/* ================================================
   ACCESSIBILITY - REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .schedule-hero-badge,
  .schedule-hero-title,
  .schedule-hero-subtitle,
  .schedule-hero-title::after {
    opacity: 1;
    transform: none;
    filter: none;
  }
  
  .schedule-hero-title::after {
    width: var(--line-width);
  }
}

/* ================================================
   HIGH CONTRAST MODE
   ================================================ */
@media (prefers-contrast: high) {
  :root {
    --ms-gold: #ffd700;
    --ms-primary: #000033;
  }
  
  .schedule-table-inner td {
    border-bottom-width: 2px;
  }
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {
  .schedule-hero {
    min-height: auto;
    padding: 40px 20px;
    background: var(--ms-primary) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .schedule-hero::before,
  .schedule-hero::after,
  .schedule-hero-decoration,
  .schedule-hero-badge,
  .schedule-table-wrapper::before {
    display: none;
  }
  
  .schedule-hero-title,
  .schedule-hero-subtitle {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .schedule-section {
    padding: 30px 20px;
    background: var(--ms-white);
  }
  
  .schedule-table-wrapper {
    width: 100%;
    box-shadow: none;
    border: 2px solid var(--ms-gold);
  }
  
  .schedule-table-inner tr:hover td {
    background: none;
  }
}
/* ================================================
   MISHKAN SHMUEL CONTACT PAGE - PREMIUM OPTIMIZED
   Theme: Dark Blue (#022342) & Gold (#f0d397)
   Performance-focused with reduced redundancy
   ================================================ */

/* ================================================
   CSS CUSTOM PROPERTIES - SINGLE SOURCE OF TRUTH
   ================================================ */
:root {
  /* Colors */
  --ms-primary: #022342;
  --ms-primary-light: #0a3a5c;
  --ms-primary-dark: #011a33;
  --ms-gold: #f0d397;
  --ms-gold-light: #f5e0b3;
  --ms-gold-dark: #d4b577;
  --ms-white: #ffffff;
  --ms-cream: #faf8f5;
  --ms-error: #c53030;
  
  /* Alpha variants */
  --ms-gold-10: rgba(240, 211, 151, 0.1);
  --ms-gold-20: rgba(240, 211, 151, 0.2);
  --ms-gold-40: rgba(240, 211, 151, 0.4);
  --ms-primary-70: rgba(2, 35, 66, 0.7);
  --ms-primary-10: rgba(2, 35, 66, 0.1);
  --ms-primary-06: rgba(2, 35, 66, 0.06);
  
  /* Spacing Scale */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 30px;
  --space-xl: 45px;
  --space-2xl: 60px;
  --space-3xl: 80px;
  
  /* Typography */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 22px;
  --fs-2xl: clamp(24px, 4vw, 40px);
  --fs-3xl: clamp(26px, 4.5vw, 44px);
  --fs-hero: clamp(34px, 6.5vw, 65px);
  
  /* Radii */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 15px 40px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 25px 60px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 18px 45px var(--ms-gold-40);
  --shadow-gold-hover: 0 25px 55px rgba(240, 211, 151, 0.5);
  --shadow-inset: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  
  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.4s;
  
  /* Gradients */
  --gradient-gold: linear-gradient(135deg, var(--ms-gold) 0%, var(--ms-gold-light) 100%);
  --gradient-gold-shimmer: linear-gradient(135deg, var(--ms-gold) 0%, var(--ms-gold-light) 50%, var(--ms-gold) 100%);
  --gradient-primary: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-light) 100%);
  --gradient-card: linear-gradient(135deg, var(--ms-white) 0%, var(--ms-cream) 100%);
  --gradient-section: linear-gradient(180deg, var(--ms-cream) 0%, var(--ms-white) 20%, var(--ms-white) 80%, var(--ms-cream) 100%);
  --gradient-line: linear-gradient(90deg, transparent 0%, var(--ms-gold) 20%, var(--ms-gold-light) 50%, var(--ms-gold) 80%, transparent 100%);
}

/* ================================================
   BASE RESET & PERFORMANCE HINTS
   ================================================ */
.contact-hero,
.contact-section,
.directions-section {
  contain: layout style;
}

/* GPU-accelerated animations */
.contact-hero-badge,
.contact-hero-title,
.contact-info-card,
.contact-section .gform_button {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ================================================
   ANIMATIONS - CONSOLIDATED
   ================================================ */
@keyframes cosmic-rotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.9) translateY(20px); filter: blur(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-glow {
  0%, 100% { 
    text-shadow: 0 0 40px var(--ms-gold-40), 0 0 80px var(--ms-gold-20), 0 4px 20px rgba(0,0,0,0.7); 
  }
  50% { 
    text-shadow: 0 0 50px rgba(240,211,151,0.7), 0 0 100px var(--ms-gold-40), 0 4px 25px rgba(0,0,0,0.8); 
  }
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes line-grow {
  from { width: 0; opacity: 0; }
  to { width: 200px; opacity: 1; }
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50% { transform: translateY(-25px) scale(1.05); opacity: 0.8; }
}

/* ================================================
   CONTACT HERO SECTION
   ================================================ */
.contact-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ms-primary) 0%, var(--ms-primary-light) 40%, var(--ms-primary) 100%);
}

/* Unified pseudo-element backgrounds */
.contact-hero::before,
.contact-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-hero::before {
  background: 
    radial-gradient(ellipse at 20% 80%, var(--ms-gold-10) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(240,211,151,0.08) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(10,58,92,0.4) 0%, transparent 70%);
  z-index: 1;
}

.contact-hero::after {
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: 
    radial-gradient(circle at 30% 50%, rgba(240,211,151,0.07) 0%, transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(240,211,151,0.05) 0%, transparent 40%);
  animation: cosmic-rotate 35s linear infinite;
  z-index: 1;
}

/* Hero Inner */
.contact-hero-inner {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 70px 40px;
  max-width: 1000px;
  width: 100%;
}

/* Hero Title */
.contact-hero-title {
  color: var(--ms-gold);
  font-size: var(--fs-hero);
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 25px;
  animation: reveal-scale 1.2s var(--ease-out) forwards, pulse-glow 4s ease-in-out 1.2s infinite;
}

.contact-hero-title::after {
  content: '';
  display: block;
  width: 200px;
  height: 4px;
  background: var(--gradient-line);
  margin: 35px auto 0;
  border-radius: 2px;
  animation: line-grow 1.5s var(--ease-out) 0.8s both;
}

/* Hero Subtitle */
.contact-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 400;
  line-height: 1.7;
  max-width: 750px;
  margin: 35px auto 0;
  animation: reveal-up 1s var(--ease-out) 0.5s both;
}

/* Hero Badge */
.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--gradient-gold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
  box-shadow: 0 10px 40px var(--ms-gold-40), var(--shadow-sm);
  animation: reveal-scale 1s var(--ease-out) 0.3s both, float 3s ease-in-out 1.3s infinite;
}

.contact-hero-badge svg {
  width: 40px;
  height: 40px;
  fill: var(--ms-primary);
}

/* Decorative Elements */
.contact-hero-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.contact-hero-decoration::before,
.contact-hero-decoration::after {
  content: '';
  position: absolute;
  border: 2px solid rgba(240,211,151,0.08);
  border-radius: var(--radius-full);
  animation: bubble-float 9s ease-in-out infinite;
}

.contact-hero-decoration::before {
  top: 15%;
  left: 3%;
  width: 180px;
  height: 180px;
}

.contact-hero-decoration::after {
  bottom: 10%;
  right: 5%;
  width: 120px;
  height: 120px;
  border-color: rgba(240,211,151,0.06);
  animation-duration: 11s;
  animation-direction: reverse;
}

/* ================================================
   CONTACT SECTION - FORM AREA
   ================================================ */
.contact-section {
  position: relative;
  background: var(--gradient-section);
  padding: 90px 40px 100px;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ms-primary) 0%, transparent 100%);
  opacity: 0.04;
  pointer-events: none;
}

/* Section Separator */
.contact-section hr.wp-block-separator {
  border: none;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--ms-gold) 15%, var(--ms-gold-light) 30%, var(--ms-primary) 50%, var(--ms-gold-light) 70%, var(--ms-gold) 85%, transparent 100%);
  max-width: 550px;
  margin: 0 auto 55px;
  border-radius: 3px;
}

/* Headings - Shared Styles */
.contact-heading,
.directions-heading {
  color: var(--ms-primary);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}

.contact-heading {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-md);
}

.contact-heading::after,
.directions-heading::after {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
  margin: 25px auto 0;
  border-radius: 2px;
}

.contact-heading::after { width: 100px; }
.directions-heading::after { width: 80px; margin-top: 20px; }

/* Subheadings */
.contact-subheading,
.directions-subheading {
  color: var(--ms-primary-70);
  font-weight: 400;
  text-align: center;
  line-height: 1.7;
  margin: 0 auto;
}

.contact-subheading {
  font-size: clamp(14px, 2vw, 17px);
  max-width: 650px;
  margin-bottom: 55px;
}

.directions-subheading {
  font-size: var(--fs-base);
  max-width: 500px;
  margin-bottom: var(--space-xl);
}

/* ================================================
   CONTACT INFO CARDS
   ================================================ */
.contact-info-wrapper {
  --card-width: 80%;
  width: var(--card-width);
  max-width: 1100px;
  margin: 0 auto var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.contact-info-card {
  background: var(--gradient-card);
  padding: 40px 30px;
  border-radius: var(--radius-lg);
  text-align: center;
  border: 2px solid var(--ms-gold-20);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-slow) var(--ease-spring), 
              border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.contact-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-gold);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.contact-info-card:hover {
  transform: translateY(-8px);
  border-color: var(--ms-gold);
  box-shadow: 0 25px 60px var(--ms-gold-20);
}

.contact-info-card:hover::before { opacity: 1; }

/* Icon Circle - Shared Base */
.contact-info-icon,
.address-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-md);
}

.contact-info-icon {
  width: 70px;
  height: 70px;
  background: var(--gradient-gold);
  box-shadow: 0 10px 30px rgba(240,211,151,0.35);
}

.contact-info-icon svg {
  width: 32px;
  height: 32px;
  fill: var(--ms-primary);
}

.contact-info-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ms-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.contact-info-text {
  font-size: var(--fs-base);
  color: var(--ms-primary-70);
  line-height: 1.7;
  margin: 0;
}

.contact-info-text a {
  color: var(--ms-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-normal), border-color var(--duration-normal);
}

.contact-info-text a:hover {
  color: var(--ms-gold-dark);
  border-bottom-color: var(--ms-gold);
}

/* ================================================
   FORM WRAPPER
   ================================================ */
.contact-section .gform_wrapper {
  --form-width: 80%;
  width: var(--form-width);
  max-width: 900px;
  margin: 0 auto;
  background: var(--gradient-card);
  padding: 55px 50px;
  border-radius: var(--radius-2xl);
  box-shadow: 
    0 35px 70px rgba(0,0,0,0.1), 
    0 15px 35px rgba(2,35,66,0.05), 
    0 0 0 1px var(--ms-gold-10);
  border: 2px solid var(--ms-gold-20);
  position: relative;
  overflow: visible;
}

.contact-section .gform_wrapper::before,
.contact-section .gform_wrapper::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
}

.contact-section .gform_wrapper::before {
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, var(--ms-gold-10) 0%, transparent 70%);
}

.contact-section .gform_wrapper::after {
  bottom: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(2,35,66,0.04) 0%, transparent 70%);
}

.contact-section .gform_body {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* ================================================
   FORM FIELDS - GRID LAYOUT
   ================================================ */
.contact-section .gform_fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 30px;
  padding: 0;
  margin: 0;
  width: 100%;
}

.contact-section .gfield { margin: 0; padding: 0; }

/* Full Width Fields */
.contact-section .gfield--width-full,
.contact-section .gfield.gfield--type-html,
.contact-section .gfield.gfield--type-section,
.contact-section .gfield.gfield--type-textarea,
.contact-section .gfield.gfield--type-consent,
.contact-section .gfield.gfield--type-captcha {
  grid-column: 1 / -1;
}

/* Labels */
.contact-section .gfield_label,
.contact-section .gform-field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ms-primary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.contact-section .gfield_required { color: var(--ms-error); margin-left: 3px; }

.contact-section .gfield_description {
  font-size: var(--fs-xs);
  color: rgba(2,35,66,0.55);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

/* ================================================
   INPUT FIELDS - UNIFIED
   ================================================ */
.contact-section input:where([type="text"], [type="email"], [type="tel"], [type="number"], [type="url"]),
.contact-section textarea,
.contact-section select {
  width: 100%;
  padding: 16px 20px;
  font-size: var(--fs-base);
  font-family: inherit;
  border: 2px solid var(--ms-primary-10);
  border-radius: 14px;
  background: var(--ms-white);
  color: var(--ms-primary);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
  outline: none;
  box-sizing: border-box;
  appearance: none;
}

.contact-section input::placeholder,
.contact-section textarea::placeholder {
  color: rgba(2,35,66,0.4);
  font-size: var(--fs-sm);
}

/* Focus State */
.contact-section input:focus,
.contact-section textarea:focus,
.contact-section select:focus {
  border-color: var(--ms-gold);
  box-shadow: 0 0 0 4px var(--ms-gold-20), 0 4px 15px rgba(240,211,151,0.15);
}

/* Filled State */
.contact-section input:not(:placeholder-shown),
.contact-section textarea:not(:placeholder-shown) {
  border-color: rgba(2,35,66,0.2);
}

/* Textarea */
.contact-section textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.7;
}

/* Select */
.contact-section select {
  padding-right: 50px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23022342' d='M7 10L1 4h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
  cursor: pointer;
}

/* Name Fields */
.contact-section .ginput_complex.ginput_container_name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-section .ginput_complex.ginput_container_name span { width: 100%; }

.contact-section .ginput_complex.ginput_container_name label {
  font-size: 11px;
  color: rgba(2,35,66,0.5);
  margin-top: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ================================================
   RADIO & CHECKBOXES
   ================================================ */
.contact-section .gfield--type-radio .gfield_radio,
.contact-section .gfield--type-checkbox .gfield_checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.contact-section .gchoice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 16px 22px;
  background: rgba(2,35,66,0.025);
  border: 2px solid rgba(2,35,66,0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  flex: 1;
  min-width: 160px;
}

.contact-section .gchoice:hover {
  background: var(--ms-gold-10);
  border-color: var(--ms-gold-40);
  transform: translateY(-2px);
}

.contact-section .gchoice input[type="radio"],
.contact-section .gchoice input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--ms-gold);
}

.contact-section .gchoice label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ms-primary);
  cursor: pointer;
  margin: 0;
}

/* Selected State */
.contact-section .gchoice:has(input:checked) {
  background: var(--ms-gold-20);
  border-color: var(--ms-gold);
  box-shadow: 0 4px 15px var(--ms-gold-20);
}

/* ================================================
   CONSENT FIELD
   ================================================ */
.contact-section .gfield--type-consent {
  background: rgba(2,35,66,0.02);
  padding: 25px;
  border-radius: 14px;
  border: 1px solid var(--ms-primary-06);
}

.contact-section .gfield--type-consent .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.contact-section .gfield--type-consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--ms-gold);
}

.contact-section .gfield--type-consent .gfield_consent_label {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ms-primary);
}

/* ================================================
   SECTION BREAKS
   ================================================ */
.contact-section .gfield--type-section {
  background: var(--gradient-primary);
  padding: 25px 30px;
  border-radius: var(--radius-md);
  margin: 25px 0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(2,35,66,0.2);
}

.contact-section .gsection_title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--ms-white);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.contact-section .gsection_title::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ms-gold), transparent);
  margin: 15px auto 0;
  border-radius: 2px;
}

.contact-section .gsection_description {
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.85);
  margin-top: var(--space-sm);
  line-height: 1.6;
  text-align: center;
}

/* ================================================
   VALIDATION STATES
   ================================================ */
.contact-section .gfield_error :is(input, select, textarea) {
  border-color: var(--ms-error);
  background: #fff5f5;
}

.contact-section .gfield_error .gfield_label { color: var(--ms-error); }

.contact-section .validation_message {
  color: var(--ms-error);
  font-size: var(--fs-xs);
  margin-top: var(--space-xs);
  font-weight: 500;
  padding-left: 5px;
}

.contact-section .gform_validation_errors {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border: 2px solid var(--ms-error);
  border-radius: var(--radius-md);
  padding: 25px 30px;
  margin-bottom: 35px;
}

.contact-section .gform_validation_errors h2 {
  color: var(--ms-error);
  font-size: 18px;
  font-weight: 700;
}

/* ================================================
   SUBMIT BUTTON
   ================================================ */
.contact-section .gform_footer {
  grid-column: 1 / -1;
  margin-top: 25px;
  padding-top: 35px;
  text-align: center;
  border-top: 2px solid var(--ms-primary-06);
}

.contact-section .gform_button,
.contact-section input[type="submit"] {
  display: inline-block;
  min-width: 320px;
  padding: 22px 70px;
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ms-primary);
  background: var(--gradient-gold-shimmer);
  background-size: 200% 200%;
  animation: shimmer 3s ease infinite;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-spring), 
              box-shadow var(--duration-slow) var(--ease-out);
  box-shadow: var(--shadow-gold), var(--shadow-sm), var(--shadow-inset);
  position: relative;
  overflow: hidden;
}

.contact-section .gform_button::before,
.contact-section input[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s ease;
}

.contact-section .gform_button:hover::before,
.contact-section input[type="submit"]:hover::before {
  left: 100%;
}

.contact-section .gform_button:hover,
.contact-section input[type="submit"]:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-gold-hover), 0 10px 30px rgba(0,0,0,0.15), var(--shadow-inset);
}

.contact-section .gform_button:active,
.contact-section input[type="submit"]:active {
  transform: translateY(-3px) scale(1.01);
}

.contact-section .gform_required_legend {
  font-size: var(--fs-xs);
  color: rgba(2,35,66,0.5);
  text-align: center;
  margin-bottom: 25px;
}

/* ================================================
   CONFIRMATION MESSAGE
   ================================================ */
.contact-section .gform_confirmation_message {
  text-align: center;
  padding: 60px 40px;
  background: linear-gradient(135deg, rgba(240,211,151,0.15) 0%, rgba(240,211,151,0.05) 100%);
  border-radius: var(--radius-lg);
  border: 2px solid var(--ms-gold);
}

.contact-section .gform_confirmation_message h3 {
  color: var(--ms-primary);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 15px;
}

.contact-section .gform_confirmation_message p {
  color: var(--ms-primary-70);
  font-size: 16px;
  line-height: 1.7;
}

/* ================================================
   DIRECTIONS / MAP SECTION
   ================================================ */
.directions-section {
  position: relative;
  background: linear-gradient(180deg, var(--ms-white) 0%, var(--ms-cream) 50%, #f5f2ed 100%);
  padding: var(--space-3xl) 40px 100px;
}

.directions-heading {
  font-size: var(--fs-2xl);
  margin-bottom: 15px;
  text-decoration: none;
}

/* Map Wrapper */
.map-wrapper {
  --map-width: 80%;
  width: var(--map-width);
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 15px 35px rgba(2,35,66,0.08);
  border: 4px solid var(--ms-gold);
  position: relative;
}

.map-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 2px rgba(240,211,151,0.3);
  pointer-events: none;
  z-index: 10;
}

/* Google Map Iframe */
.directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map, [class*="google-map"]) {
  width: 100%;
  height: 450px;
  border: none;
  display: block;
}

.directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map) iframe {
  width: 100%;
  height: 450px;
  border: none;
}

/* Address Card */
.address-card {
  width: 80%;
  max-width: 600px;
  margin: -50px auto 0;
  background: var(--gradient-card);
  padding: 35px 40px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 10px 25px rgba(2,35,66,0.05);
  border: 2px solid rgba(240,211,151,0.3);
  position: relative;
  z-index: 20;
}

.address-card-icon {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  box-shadow: 0 8px 25px rgba(2,35,66,0.2);
}

.address-card-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--ms-gold);
}

.address-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ms-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-sm);
}

.address-card-text {
  font-size: 16px;
  color: var(--ms-primary-70);
  line-height: 1.7;
  margin: 0;
}

.address-card-link {
  display: inline-block;
  margin-top: var(--space-md);
  padding: 12px 30px;
  background: var(--gradient-gold);
  color: var(--ms-primary);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: transform var(--duration-normal), box-shadow var(--duration-normal);
  box-shadow: 0 8px 25px rgba(240,211,151,0.3);
}

.address-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px var(--ms-gold-40);
}

/* Footer CTA */
.footer-cta-section .wp-block-button__link {
  opacity: 1;
  filter: none;
}

/* ================================================
   RESPONSIVE - CONSOLIDATED
   ================================================ */
@media (min-width: 1400px) {
  .contact-section .gform_wrapper { --form-width: 70%; max-width: 950px; }
  .contact-info-wrapper { --card-width: 75%; max-width: 1200px; }
  .map-wrapper { --map-width: 75%; }
  .address-card { width: 60%; }
}

@media (max-width: 1024px) {
  .contact-hero { min-height: 45vh; }
  .contact-hero-inner { padding: 55px 35px; }
  .contact-section { padding: 70px 25px 80px; }
  
  .contact-section .gform_wrapper { 
    --form-width: 90%; 
    max-width: 800px; 
    padding: 45px 35px; 
  }
  
  .contact-section .gform_fields { gap: 22px 25px; }
  
  .contact-info-wrapper { 
    --card-width: 90%; 
    gap: var(--space-md); 
  }
  
  .contact-info-card { padding: 30px 20px; }
  .contact-info-icon { width: 60px; height: 60px; }
  .contact-info-icon svg { width: 28px; height: 28px; }
  .contact-info-title { font-size: 16px; }
  
  .directions-section { padding: 60px 25px 80px; }
  .map-wrapper { --map-width: 90%; }
  
  .directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map, [class*="google-map"]),
  .directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map) iframe {
    height: 380px;
  }
  
  .address-card { width: 85%; margin-top: -40px; }
}

@media (max-width: 768px) {
  :root {
    --space-lg: 25px;
    --space-xl: 35px;
    --space-2xl: 50px;
  }
  
  .contact-hero { min-height: 40vh; }
  .contact-hero-inner { padding: 45px 22px; }
  
  .contact-hero-title {
    font-size: clamp(26px, 7vw, 38px);
    letter-spacing: 2px;
  }
  
  .contact-hero-title::after { width: 150px; margin-top: 25px; }
  .contact-hero-subtitle { font-size: var(--fs-base); margin-top: 25px; }
  .contact-hero-badge { width: 65px; height: 65px; }
  .contact-hero-badge svg { width: 32px; height: 32px; }
  
  .contact-hero-decoration::before,
  .contact-hero-decoration::after { display: none; }
  
  .contact-section { padding: 55px 15px 70px; }
  .contact-heading { font-size: clamp(22px, 6vw, 32px); }
  .contact-subheading { font-size: var(--fs-sm); margin-bottom: 40px; }
  
  .contact-info-wrapper {
    --card-width: 95%;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
  }
  
  .contact-info-card { padding: 30px 25px; }
  
  .contact-section .gform_wrapper {
    --form-width: 95%;
    padding: 35px 22px;
    border-radius: var(--radius-xl);
  }
  
  .contact-section .gform_fields { grid-template-columns: 1fr; gap: var(--space-md); }
  .contact-section .ginput_complex.ginput_container_name { grid-template-columns: 1fr; }
  .contact-section .gchoice { min-width: 100%; }
  
  .contact-section .gform_button,
  .contact-section input[type="submit"] {
    width: 100%;
    min-width: unset;
    padding: 20px 45px;
    font-size: var(--fs-base);
    letter-spacing: 2px;
  }
  
  .directions-section { padding: 50px 15px 70px; }
  .directions-heading { font-size: clamp(20px, 5vw, 28px); }
  .map-wrapper { --map-width: 95%; border-radius: 18px; border-width: 3px; }
  
  .directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map, [class*="google-map"]),
  .directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map) iframe {
    height: 320px;
  }
  
  .address-card { width: 90%; margin-top: -35px; padding: 30px 25px; }
}

@media (max-width: 480px) {
  .contact-hero { min-height: 35vh; }
  .contact-hero-title { font-size: 24px; letter-spacing: 1.5px; }
  .contact-hero-subtitle { font-size: var(--fs-sm); }
  .contact-hero-badge { width: 55px; height: 55px; }
  
  .contact-section { padding: 45px 10px 60px; }
  .contact-info-wrapper { --card-width: 98%; }
  .contact-info-card { padding: 25px 20px; }
  .contact-info-icon { width: 55px; height: 55px; }
  .contact-info-icon svg { width: 26px; height: 26px; }
  .contact-info-title { font-size: 16px; }
  
  .contact-section .gform_wrapper { --form-width: 98%; padding: 28px 18px; }
  .contact-section .gfield_label { font-size: var(--fs-xs); }
  
  .contact-section input:where([type="text"], [type="email"], [type="tel"]),
  .contact-section textarea,
  .contact-section select {
    padding: 14px 16px;
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
  }
  
  .contact-section textarea { min-height: 140px; }
  
  .contact-section .gform_button,
  .contact-section input[type="submit"] {
    padding: 18px 35px;
    font-size: var(--fs-sm);
    border-radius: 50px;
  }
  
  .contact-section .gform_confirmation_message { padding: 40px 25px; }
  .contact-section .gform_confirmation_message h3 { font-size: var(--fs-xl); }
  
  .directions-section { padding: 40px 10px 60px; }
  .map-wrapper { --map-width: 98%; border-radius: 14px; }
  
  .directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map, [class*="google-map"]),
  .directions-section :is(.uagb-google-map__iframe, .wp-block-uagb-google-map) iframe {
    height: 280px;
  }
  
  .address-card {
    width: 95%;
    margin-top: -30px;
    padding: 25px 20px;
    border-radius: var(--radius-md);
  }
  
  .address-card-icon { width: 50px; height: 50px; }
  .address-card-icon svg { width: 24px; height: 24px; }
  .address-card-title { font-size: 16px; }
  .address-card-text { font-size: var(--fs-sm); }
  .address-card-link { padding: 10px 25px; font-size: 13px; }
}

/* ================================================
   ACCESSIBILITY & REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================
   PRINT STYLES
   ================================================ */
@media print {
  .contact-hero {
    min-height: auto;
    background: var(--ms-primary);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .contact-section .gform_wrapper {
    box-shadow: none;
    border: 1px solid #ccc;
    width: 100%;
  }
  
  .contact-info-wrapper,
  .map-wrapper,
  .contact-hero-decoration,
  .contact-hero::before,
  .contact-hero::after { display: none; }
}
/* ==========================================================================
   MISHKAN SHMUEL NEWSLETTER PAGE - PREMIUM
   Theme: Dark Blue (#022342) & Gold (#f0d397)
   Updated Hero Section matching Homepage Cover Block
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --ms-primary: #022342;
  --ms-primary-light: #0a3a5c;
  --ms-primary-dark: #011a33;
  --ms-primary-rgb: 2, 35, 66;
  
  --ms-gold: #f0d397;
  --ms-gold-light: #f5e0b3;
  --ms-gold-dark: #d4b577;
  --ms-gold-rgb: 240, 211, 151;
  --ms-gold-glow: rgba(240, 211, 151, 0.4);
  
  --ms-white: #ffffff;
  --ms-cream: #faf8f5;
  
  --hero-primary-dark: rgba(2, 35, 66, 0.92);
  --hero-primary-mid: rgba(10, 58, 92, 0.85);
  
  --transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: 0.3s ease;
}

/* ==========================================================================
   NEWSLETTER HERO SECTION - PREMIUM COVER BLOCK STYLE
   ========================================================================== */

.newsletter-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Background Image
   -------------------------------------------------------------------------- */
.newsletter-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.05);
  filter: brightness(0.9) contrast(1.1) saturate(1.2) !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   Dark Blue Gradient Overlay
   -------------------------------------------------------------------------- */
.newsletter-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: 
    linear-gradient(135deg,
      var(--hero-primary-dark) 0%,
      var(--hero-primary-mid) 50%,
      rgba(2, 35, 66, 0.9) 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   Animated Glow Overlay
   -------------------------------------------------------------------------- */
.newsletter-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(var(--ms-gold-rgb), 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(var(--ms-gold-rgb), 0.1) 0%,
      transparent 50%
    );
  animation: newsletterHeroGlowPulse 6s ease-in-out infinite;
}

@keyframes newsletterHeroGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Floating Particles/Decorations
   -------------------------------------------------------------------------- */
.newsletter-hero::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--ms-gold-rgb), 0.05) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(var(--ms-gold-rgb), 0.04) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(var(--ms-gold-rgb), 0.03) 0%, transparent 35%);
  animation: newsletterCosmicRotate 45s linear infinite;
}

@keyframes newsletterCosmicRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* --------------------------------------------------------------------------
   Decorative Floating Bubbles
   -------------------------------------------------------------------------- */
.newsletter-hero-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.newsletter-hero-decoration::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 5%;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.1);
  border-radius: 50%;
  animation: newsletterFloatBubble 10s ease-in-out infinite;
}

.newsletter-hero-decoration::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 8%;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.08);
  border-radius: 50%;
  animation: newsletterFloatBubble 12s ease-in-out infinite reverse;
}

@keyframes newsletterFloatBubble {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-30px) scale(1.05);
    opacity: 0.7;
  }
}

/* Additional decorative elements */
.newsletter-hero-decoration .bubble-3 {
  position: absolute;
  top: 60%;
  left: 15%;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(var(--ms-gold-rgb), 0.06);
  border-radius: 50%;
  animation: newsletterFloatBubble 8s ease-in-out infinite 2s;
}

.newsletter-hero-decoration .bubble-4 {
  position: absolute;
  top: 25%;
  right: 20%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(var(--ms-gold-rgb), 0.05);
  border-radius: 50%;
  animation: newsletterFloatBubble 9s ease-in-out infinite 1s reverse;
}

/* --------------------------------------------------------------------------
   Hero Inner Container
   -------------------------------------------------------------------------- */
.newsletter-hero-inner {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1200px !important;
  padding: 80px 40px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Hero Badge/Icon with Glow
   -------------------------------------------------------------------------- */
.newsletter-hero-badge {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 90px !important;
  height: 90px !important;
  margin-bottom: 35px !important;
  border: 3px solid rgba(var(--ms-gold-rgb), 0.6) !important;
  border-radius: 50% !important;
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 0 40px rgba(var(--ms-gold-rgb), 0.4),
    0 0 80px rgba(var(--ms-gold-rgb), 0.2),
    inset 0 0 30px rgba(var(--ms-gold-rgb), 0.1) !important;
  animation: newsletterBadgeReveal 1s ease-out 0.3s both, newsletterBadgePulse 4s ease-in-out infinite !important;
}

@keyframes newsletterBadgeReveal {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes newsletterBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.4),
      0 0 80px rgba(var(--ms-gold-rgb), 0.2),
      inset 0 0 30px rgba(var(--ms-gold-rgb), 0.1);
    transform: translateY(0);
  }
  50% {
    box-shadow:
      0 0 60px rgba(var(--ms-gold-rgb), 0.5),
      0 0 100px rgba(var(--ms-gold-rgb), 0.3),
      inset 0 0 40px rgba(var(--ms-gold-rgb), 0.15);
    transform: translateY(-10px);
  }
}

.newsletter-hero-badge svg,
.newsletter-hero-badge img {
  width: 45px !important;
  height: 45px !important;
  color: var(--ms-gold) !important;
  fill: var(--ms-gold) !important;
  filter: drop-shadow(0 0 15px rgba(var(--ms-gold-rgb), 0.7)) !important;
}

/* --------------------------------------------------------------------------
   Hero Title - Gold with Premium Glow Animation
   -------------------------------------------------------------------------- */
.newsletter-hero-title {
  margin-bottom: 0 !important;
  color: var(--ms-gold) !important;
  font-size: clamp(2.25rem, 8vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.6),
    0 0 60px rgba(var(--ms-gold-rgb), 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5) !important;
  animation: newsletterTitleReveal 1.2s ease-out forwards, newsletterTitleGlow 3s ease-in-out infinite 1.2s !important;
}

@keyframes newsletterTitleReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes newsletterTitleGlow {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(var(--ms-gold-rgb), 0.6),
      0 0 60px rgba(var(--ms-gold-rgb), 0.4),
      0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.8),
      0 0 80px rgba(var(--ms-gold-rgb), 0.5),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   Decorative Line Under Title
   -------------------------------------------------------------------------- */
.newsletter-hero-title::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin: 30px auto 0;
  border-radius: 2px;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 20%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 80%,
      transparent 100%
    );
  animation: newsletterLineReveal 1s ease-out 0.8s forwards;
}

@keyframes newsletterLineReveal {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Hero Subtitle
   -------------------------------------------------------------------------- */
.newsletter-hero-subtitle {
  max-width: 700px !important;
  margin: 40px auto 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
  animation: newsletterSubtitleReveal 1s ease-out 0.6s both !important;
}

@keyframes newsletterSubtitleReveal {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero CTA Buttons Container
   -------------------------------------------------------------------------- */
.newsletter-hero-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 50px !important;
  animation: newsletterButtonsReveal 1s ease-out 1s both !important;
}

@keyframes newsletterButtonsReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero Button Base Styles
   -------------------------------------------------------------------------- */
.newsletter-hero-btn {
  display: inline-block !important;
  min-width: 260px !important;
  padding: 22px 50px !important;
  border-radius: 50px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --------------------------------------------------------------------------
   Primary Button - Gold Filled with Shimmer
   -------------------------------------------------------------------------- */
.newsletter-hero-btn-primary {
  background: 
    linear-gradient(135deg,
      var(--ms-gold) 0%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  color: var(--ms-primary) !important;
  border: 3px solid var(--ms-gold) !important;
  box-shadow:
    0 0 25px rgba(var(--ms-gold-rgb), 0.4),
    0 10px 30px rgba(var(--ms-gold-rgb), 0.3) !important;
  animation: newsletterGoldShimmer 3s ease infinite !important;
}

@keyframes newsletterGoldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.newsletter-hero-btn-primary:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 35px rgba(var(--ms-gold-rgb), 0.6),
    0 15px 40px rgba(var(--ms-gold-rgb), 0.4) !important;
}

/* --------------------------------------------------------------------------
   Secondary Button - Glass/Outline Style
   -------------------------------------------------------------------------- */
.newsletter-hero-btn-secondary {
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--ms-gold) !important;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.newsletter-hero-btn-secondary:hover {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
  border-color: var(--ms-gold) !important;
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.5),
    0 15px 35px rgba(var(--ms-gold-rgb), 0.3) !important;
}

/* --------------------------------------------------------------------------
   Scroll Indicator
   -------------------------------------------------------------------------- */
.newsletter-hero-scroll {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  animation: newsletterScrollReveal 1s ease-out 1.5s both !important;
}

@keyframes newsletterScrollReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.newsletter-hero-scroll-icon {
  width: 30px !important;
  height: 50px !important;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.4) !important;
  border-radius: 25px !important;
  position: relative !important;
}

.newsletter-hero-scroll-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 6px !important;
  height: 10px !important;
  background: var(--ms-gold) !important;
  border-radius: 3px !important;
  animation: newsletterScrollBounce 2s ease-in-out infinite !important;
}

@keyframes newsletterScrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(15px);
    opacity: 0.3;
  }
}

/* ==========================================================================
   NEWSLETTER CONTENT SECTION
   ========================================================================== */

.newsletter-section {
  position: relative;
  background: 
    linear-gradient(180deg,
      #faf8f5 0%,
      #ffffff 20%,
      #ffffff 80%,
      #faf8f5 100%
    ) !important;
  padding: 90px 40px 110px !important;
}

/* Decorative Top Transition */
.newsletter-section::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ms-primary) 0%, transparent 100%);
  opacity: 0.04;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section Separator
   -------------------------------------------------------------------------- */
.newsletter-section hr.wp-block-separator {
  border: none !important;
  height: 3px !important;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 15%,
      var(--ms-gold-light) 30%,
      var(--ms-primary) 50%,
      var(--ms-gold-light) 70%,
      var(--ms-gold) 85%,
      transparent 100%
    ) !important;
  max-width: 550px !important;
  margin: 0 auto 55px !important;
  opacity: 1 !important;
  border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   Newsletter Section Heading
   -------------------------------------------------------------------------- */
.newsletter-heading {
  color: var(--ms-primary) !important;
  font-size: clamp(26px, 4.5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.newsletter-heading::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
  margin: 25px auto 0;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Newsletter Subheading
   -------------------------------------------------------------------------- */
.newsletter-subheading {
  color: rgba(2, 35, 66, 0.7) !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 600px !important;
  margin: 0 auto 55px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   NEWSLETTER BENEFITS CARDS
   ========================================================================== */

.newsletter-benefits-wrapper {
  width: 80% !important;
  max-width: 1000px !important;
  margin: 0 auto 60px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}

.newsletter-benefit-card {
  background: 
    linear-gradient(135deg, 
      #ffffff 0%, 
      #faf8f5 100%
    ) !important;
  padding: 35px 25px !important;
  border-radius: 20px !important;
  text-align: center !important;
  border: 2px solid rgba(240, 211, 151, 0.2) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.4s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.newsletter-benefit-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-light));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.newsletter-benefit-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--ms-gold) !important;
  box-shadow: 0 25px 60px rgba(240, 211, 151, 0.2) !important;
}

.newsletter-benefit-card:hover::before {
  opacity: 1;
}

.newsletter-benefit-icon {
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 100%
    ) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 25px rgba(240, 211, 151, 0.3) !important;
  transition: all 0.3s ease !important;
}

.newsletter-benefit-card:hover .newsletter-benefit-icon {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 35px rgba(240, 211, 151, 0.4) !important;
}

.newsletter-benefit-icon svg {
  width: 28px !important;
  height: 28px !important;
  fill: var(--ms-primary) !important;
}

.newsletter-benefit-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
  transition: color 0.3s ease !important;
}

.newsletter-benefit-card:hover .newsletter-benefit-title {
  color: var(--ms-gold-dark) !important;
}

.newsletter-benefit-text {
  font-size: 14px !important;
  color: rgba(2, 35, 66, 0.7) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ==========================================================================
   NEWSLETTER EMBED WRAPPER - 80% WIDTH PREMIUM STYLING
   ========================================================================== */

.newsletter-embed-wrapper {
  width: 80% !important;
  max-width: 800px !important;
  margin: 0 auto !important;
  background: 
    linear-gradient(135deg, 
      #ffffff 0%, 
      #faf8f5 100%
    ) !important;
  padding: 50px !important;
  border-radius: 30px !important;
  box-shadow: 
    0 35px 70px rgba(0, 0, 0, 0.1),
    0 15px 35px rgba(2, 35, 66, 0.05),
    0 0 0 1px rgba(240, 211, 151, 0.1) !important;
  border: 2px solid rgba(240, 211, 151, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Decorative Corners */
.newsletter-embed-wrapper::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(240, 211, 151, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.newsletter-embed-wrapper::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(2, 35, 66, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Embed Container
   -------------------------------------------------------------------------- */
.newsletter-embed-container {
  position: relative !important;
  z-index: 1 !important;
  text-align: center !important;
}

/* Style the embedded iframe wrapper */
.newsletter-section .ose-wrapper,
.newsletter-section .wp-block-embedpress-embedpress,
.newsletter-section [class*="embedpress"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

.newsletter-section .ose-wrapper iframe,
.newsletter-section .wp-block-embedpress-embedpress iframe,
.newsletter-section [class*="embedpress"] iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: none !important;
  border-radius: 16px !important;
}

/* ==========================================================================
   ALTERNATIVE: SIMPLE EMBED STYLING
   ========================================================================== */

.newsletter-section .ose-embedpress-responsive {
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto !important;
}

.newsletter-section .ose-embedpress-responsive iframe {
  border-radius: 12px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   NEWSLETTER SIGNUP FORM (Alternative to Embed)
   ========================================================================== */

.newsletter-form-container {
  position: relative !important;
  z-index: 1 !important;
}

.newsletter-form-container input[type="email"],
.newsletter-form-container input[type="text"] {
  width: 100% !important;
  padding: 18px 24px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  border: 2px solid rgba(2, 35, 66, 0.1) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--ms-primary) !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin-bottom: 15px !important;
}

.newsletter-form-container input:focus {
  border-color: var(--ms-gold) !important;
  box-shadow: 
    0 0 0 4px rgba(240, 211, 151, 0.2),
    0 4px 15px rgba(240, 211, 151, 0.15) !important;
}

.newsletter-form-container input::placeholder {
  color: rgba(2, 35, 66, 0.4) !important;
}

.newsletter-form-submit {
  display: inline-block !important;
  width: 100% !important;
  padding: 20px 40px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--ms-primary) !important;
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 50%, 
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  animation: newsletterSubmitShimmer 3s ease infinite !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 
    0 15px 40px rgba(240, 211, 151, 0.35),
    0 5px 15px rgba(0, 0, 0, 0.1) !important;
}

@keyframes newsletterSubmitShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.newsletter-form-submit:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 
    0 20px 50px rgba(240, 211, 151, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ==========================================================================
   NEWSLETTER PRIVACY NOTE
   ========================================================================== */

.newsletter-privacy {
  text-align: center !important;
  margin-top: 30px !important;
  padding: 20px !important;
  background: rgba(2, 35, 66, 0.03) !important;
  border-radius: 12px !important;
}

.newsletter-privacy-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: var(--ms-primary) !important;
  border-radius: 50% !important;
  margin-bottom: 12px !important;
}

.newsletter-privacy-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: var(--ms-gold) !important;
}

.newsletter-privacy-text {
  font-size: 13px !important;
  color: rgba(2, 35, 66, 0.6) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ==========================================================================
   NEWSLETTER TESTIMONIALS (Optional Section)
   ========================================================================== */

.newsletter-testimonials {
  width: 80% !important;
  max-width: 900px !important;
  margin: 60px auto 0 !important;
  text-align: center !important;
}

.newsletter-testimonials-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 30px !important;
}

.newsletter-testimonial-card {
  background: #ffffff !important;
  padding: 30px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(2, 35, 66, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 20px !important;
}

.newsletter-testimonial-quote {
  font-size: 16px !important;
  font-style: italic !important;
  color: rgba(2, 35, 66, 0.8) !important;
  line-height: 1.7 !important;
  margin-bottom: 15px !important;
}

.newsletter-testimonial-author {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ms-gold-dark) !important;
}

/* ==========================================================================
   RESPONSIVE - LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {
  .newsletter-hero-inner {
    padding: 100px 60px !important;
  }

  .newsletter-hero-badge {
    width: 100px !important;
    height: 100px !important;
  }

  .newsletter-hero-badge svg,
  .newsletter-hero-badge img {
    width: 50px !important;
    height: 50px !important;
  }

  .newsletter-embed-wrapper {
    width: 70% !important;
    max-width: 850px !important;
  }

  .newsletter-benefits-wrapper {
    width: 75% !important;
    max-width: 1100px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .newsletter-hero {
    min-height: 80vh !important;
  }

  .newsletter-hero-inner {
    padding: 60px 35px !important;
  }

  .newsletter-hero-badge {
    width: 75px !important;
    height: 75px !important;
    margin-bottom: 28px !important;
  }

  .newsletter-hero-badge svg,
  .newsletter-hero-badge img {
    width: 38px !important;
    height: 38px !important;
  }

  .newsletter-hero-title::after {
    margin-top: 25px !important;
  }

  @keyframes newsletterLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 180px;
      opacity: 1;
    }
  }

  .newsletter-hero-buttons {
    gap: 20px !important;
    margin-top: 40px !important;
  }

  .newsletter-hero-btn {
    min-width: 220px !important;
    padding: 18px 40px !important;
    font-size: 15px !important;
  }

  .newsletter-hero-decoration::before {
    width: 150px;
    height: 150px;
  }

  .newsletter-hero-decoration::after {
    width: 120px;
    height: 120px;
  }

  .newsletter-hero-scroll {
    bottom: 30px !important;
  }

  .newsletter-section {
    padding: 70px 25px 90px !important;
  }

  .newsletter-embed-wrapper {
    width: 90% !important;
    padding: 40px 35px !important;
  }

  .newsletter-benefits-wrapper {
    width: 90% !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }

  .newsletter-benefit-card {
    padding: 28px 20px !important;
  }

  .newsletter-benefit-icon {
    width: 50px !important;
    height: 50px !important;
  }

  .newsletter-benefit-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .newsletter-benefit-title {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .newsletter-hero {
    min-height: 70vh !important;
  }

  .newsletter-hero-inner {
    padding: 50px 22px !important;
  }

  .newsletter-hero-badge {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 25px !important;
  }

  .newsletter-hero-badge svg,
  .newsletter-hero-badge img {
    width: 32px !important;
    height: 32px !important;
  }

  .newsletter-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.625rem) !important;
    letter-spacing: 2px !important;
  }

  .newsletter-hero-title::after {
    margin-top: 22px !important;
  }

  @keyframes newsletterLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 140px;
      opacity: 1;
    }
  }

  .newsletter-hero-subtitle {
    font-size: 15px !important;
    margin-top: 30px !important;
  }

  .newsletter-hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 35px !important;
  }

  .newsletter-hero-btn {
    min-width: 280px !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 18px 35px !important;
    font-size: 14px !important;
  }

  .newsletter-hero-decoration::before,
  .newsletter-hero-decoration::after {
    display: none !important;
  }

  .newsletter-hero-scroll {
    display: none !important;
  }

  .newsletter-section {
    padding: 55px 15px 75px !important;
  }

  .newsletter-heading {
    font-size: clamp(22px, 6vw, 32px) !important;
  }

  .newsletter-subheading {
    font-size: 14px !important;
    margin-bottom: 40px !important;
  }

  .newsletter-benefits-wrapper {
    width: 95% !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 50px !important;
  }

  .newsletter-benefit-card {
    padding: 30px 25px !important;
  }

  .newsletter-embed-wrapper {
    width: 95% !important;
    padding: 30px 20px !important;
    border-radius: 24px !important;
  }

  .newsletter-section .ose-wrapper,
  .newsletter-section .wp-block-embedpress-embedpress,
  .newsletter-section [class*="embedpress"],
  .newsletter-section .ose-embedpress-responsive {
    max-width: 100% !important;
  }

  .newsletter-section .ose-wrapper iframe,
  .newsletter-section .wp-block-embedpress-embedpress iframe,
  .newsletter-section [class*="embedpress"] iframe,
  .newsletter-section .ose-embedpress-responsive iframe {
    height: 800px !important;
  }

  .newsletter-testimonials {
    width: 95% !important;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .newsletter-hero {
    min-height: 60vh !important;
  }

  .newsletter-hero-inner {
    padding: 40px 15px !important;
  }

  .newsletter-hero-badge {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 20px !important;
  }

  .newsletter-hero-badge svg,
  .newsletter-hero-badge img {
    width: 26px !important;
    height: 26px !important;
  }

  .newsletter-hero-title {
    font-size: 24px !important;
    letter-spacing: 1.5px !important;
  }

  .newsletter-hero-title::after {
    margin-top: 18px !important;
  }

  @keyframes newsletterLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 100px;
      opacity: 1;
    }
  }

  .newsletter-hero-subtitle {
    font-size: 14px !important;
    margin-top: 25px !important;
  }

  .newsletter-hero-buttons {
    margin-top: 30px !important;
  }

  .newsletter-hero-btn {
    min-width: unset !important;
    width: 100% !important;
    padding: 16px 30px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  .newsletter-section {
    padding: 45px 10px 65px !important;
  }

  .newsletter-benefits-wrapper {
    width: 98% !important;
  }

  .newsletter-benefit-card {
    padding: 25px 20px !important;
  }

  .newsletter-benefit-icon {
    width: 45px !important;
    height: 45px !important;
  }

  .newsletter-benefit-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .newsletter-benefit-title {
    font-size: 15px !important;
  }

  .newsletter-embed-wrapper {
    width: 98% !important;
    padding: 25px 15px !important;
  }

  .newsletter-section .ose-wrapper iframe,
  .newsletter-section .wp-block-embedpress-embedpress iframe,
  .newsletter-section [class*="embedpress"] iframe,
  .newsletter-section .ose-embedpress-responsive iframe {
    height: 750px !important;
  }

  .newsletter-privacy {
    padding: 15px !important;
  }

  .newsletter-privacy-text {
    font-size: 12px !important;
  }

  .newsletter-form-container input[type="email"],
  .newsletter-form-container input[type="text"] {
    padding: 15px 18px !important;
    font-size: 14px !important;
  }

  .newsletter-form-submit {
    padding: 18px 30px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.newsletter-section a:focus,
.newsletter-hero-btn:focus,
.newsletter-form-submit:focus {
  outline: 3px solid var(--ms-gold) !important;
  outline-offset: 3px !important;
}

.newsletter-form-container input:focus {
  outline: none !important;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .newsletter-hero::before,
  .newsletter-hero::after,
  .newsletter-hero-decoration::before,
  .newsletter-hero-decoration::after,
  .newsletter-hero-badge,
  .newsletter-hero-title,
  .newsletter-hero-title::after,
  .newsletter-hero-subtitle,
  .newsletter-hero-buttons,
  .newsletter-hero-scroll,
  .newsletter-hero-scroll-icon::before,
  .newsletter-hero-btn-primary,
  .newsletter-form-submit {
    animation: none !important;
  }

  .newsletter-hero-title {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .newsletter-hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }

  .newsletter-hero-title::after {
    width: 200px !important;
    opacity: 1 !important;
  }

  .newsletter-hero-badge {
    opacity: 1 !important;
    transform: none !important;
  }

  .newsletter-hero-buttons {
    opacity: 1 !important;
    transform: none !important;
  }

  .newsletter-benefit-card {
    transition: none !important;
  }

  .newsletter-benefit-icon {
    transition: none !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .newsletter-hero {
    min-height: auto !important;
    background: var(--ms-primary) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .newsletter-hero::before,
  .newsletter-hero::after,
  .newsletter-hero-overlay,
  .newsletter-hero-decoration,
  .newsletter-hero-scroll {
    display: none !important;
  }

  .newsletter-hero-badge {
    box-shadow: none !important;
  }

  .newsletter-hero-buttons {
    display: none !important;
  }

  .newsletter-embed-wrapper {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    width: 100% !important;
  }

  .newsletter-benefits-wrapper {
    display: none !important;
  }

  .newsletter-benefit-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}
/* ==========================================================================
   MISHKAN SHMUEL KOLLEL APPLICATION PAGE - PREMIUM
   Theme: Dark Blue (#022342) & Gold (#f0d397)
   Updated Hero Section matching Homepage Cover Block
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --ms-primary: #022342;
  --ms-primary-light: #0a3a5c;
  --ms-primary-dark: #011a33;
  --ms-primary-rgb: 2, 35, 66;
  
  --ms-gold: #f0d397;
  --ms-gold-light: #f5e0b3;
  --ms-gold-dark: #d4b577;
  --ms-gold-rgb: 240, 211, 151;
  --ms-gold-glow: rgba(240, 211, 151, 0.4);
  
  --ms-white: #ffffff;
  --ms-cream: #faf8f5;
  
  --hero-primary-dark: rgba(2, 35, 66, 0.92);
  --hero-primary-mid: rgba(10, 58, 92, 0.85);
  
  --transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: 0.3s ease;
}

/* ==========================================================================
   CONDITIONAL FORM DISPLAY - CORE LOGIC
   ========================================================================== */

/* Hide application form (Form 4) for non-logged-in users */
body:not(.logged-in) #gform_wrapper_4,
body:not(.logged-in) .kollel-application-form {
  display: none !important;
}

/* Hide registration form (Form 47) for logged-in users */
body.logged-in #gform_wrapper_47,
body.logged-in .kollel-registration-form {
  display: none !important;
}

/* Show application form for logged-in users */
body.logged-in #gform_wrapper_4,
body.logged-in .kollel-application-form {
  display: block !important;
}

/* Show registration form for non-logged-in users */
body:not(.logged-in) #gform_wrapper_47,
body:not(.logged-in) .kollel-registration-form {
  display: block !important;
}

/* Dynamic content based on login state */
body:not(.logged-in) .kollel-show-logged-in {
  display: none !important;
}

body.logged-in .kollel-show-logged-out {
  display: none !important;
}

body:not(.logged-in) .kollel-show-logged-out {
  display: block !important;
}

body.logged-in .kollel-show-logged-in {
  display: block !important;
}

/* --------------------------------------------------------------------------
   Welcome Message for Logged-in Users
   -------------------------------------------------------------------------- */
.kollel-welcome-message {
  display: none;
  text-align: center;
  padding: 25px 30px;
  margin: 0 auto 40px;
  max-width: 800px;
  background: linear-gradient(135deg, 
    rgba(240, 211, 151, 0.15) 0%, 
    rgba(240, 211, 151, 0.05) 100%
  );
  border-radius: 16px;
  border: 2px solid var(--ms-gold);
}

body.logged-in .kollel-welcome-message {
  display: block;
}

.kollel-welcome-message h3 {
  color: var(--ms-primary);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.kollel-welcome-message p {
  color: rgba(2, 35, 66, 0.7);
  font-size: 15px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Login Prompt for Non-logged-in Users
   -------------------------------------------------------------------------- */
.kollel-login-prompt {
  display: block;
  text-align: center;
  padding: 30px;
  margin: 0 auto 30px;
  max-width: 800px;
  background: linear-gradient(135deg, 
    rgba(2, 35, 66, 0.05) 0%, 
    rgba(2, 35, 66, 0.02) 100%
  );
  border-radius: 16px;
  border: 2px solid rgba(2, 35, 66, 0.1);
}

body.logged-in .kollel-login-prompt {
  display: none !important;
}

.kollel-login-prompt h3 {
  color: var(--ms-primary);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.kollel-login-prompt p {
  color: rgba(2, 35, 66, 0.6);
  font-size: 15px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Processing/Loading Overlay
   -------------------------------------------------------------------------- */
.kollel-processing-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 35, 66, 0.95);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.kollel-processing-overlay.active {
  display: flex !important;
}

.kollel-processing-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(240, 211, 151, 0.3);
  border-top-color: var(--ms-gold);
  border-radius: 50%;
  animation: kollelSpinner 1s linear infinite;
}

@keyframes kollelSpinner {
  to {
    transform: rotate(360deg);
  }
}

.kollel-processing-text {
  color: var(--ms-gold);
  font-size: 18px;
  font-weight: 600;
  margin-top: 25px;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   Success Message Styling
   -------------------------------------------------------------------------- */
.kollel-success-message {
  display: none;
  text-align: center;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto 30px;
  background: linear-gradient(135deg, 
    rgba(72, 187, 120, 0.1) 0%, 
    rgba(72, 187, 120, 0.05) 100%
  );
  border: 2px solid #48bb78;
  border-radius: 20px;
}

.kollel-success-message.show {
  display: block;
  animation: kollelSuccessFadeIn 0.5s ease;
}

@keyframes kollelSuccessFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kollel-success-message .success-icon {
  width: 70px;
  height: 70px;
  background: #48bb78;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.kollel-success-message .success-icon svg {
  width: 35px;
  height: 35px;
  fill: white;
}

.kollel-success-message h3 {
  color: var(--ms-primary);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
}

.kollel-success-message p {
  color: rgba(2, 35, 66, 0.7);
  font-size: 16px;
}

/* ==========================================================================
   KOLLEL HERO SECTION - PREMIUM COVER BLOCK STYLE
   ========================================================================== */

.kollel-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Background Image
   -------------------------------------------------------------------------- */
.kollel-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.05);
  filter: brightness(0.9) contrast(1.1) saturate(1.2) !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   Dark Blue Gradient Overlay
   -------------------------------------------------------------------------- */
.kollel-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: 
    linear-gradient(135deg,
      var(--hero-primary-dark) 0%,
      var(--hero-primary-mid) 50%,
      rgba(2, 35, 66, 0.9) 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   Animated Glow Overlay
   -------------------------------------------------------------------------- */
.kollel-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(var(--ms-gold-rgb), 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(var(--ms-gold-rgb), 0.1) 0%,
      transparent 50%
    );
  animation: kollelHeroGlowPulse 6s ease-in-out infinite;
}

@keyframes kollelHeroGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Floating Particles/Decorations
   -------------------------------------------------------------------------- */
.kollel-hero::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--ms-gold-rgb), 0.05) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(var(--ms-gold-rgb), 0.04) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(var(--ms-gold-rgb), 0.03) 0%, transparent 35%);
  animation: kollelCosmicRotate 45s linear infinite;
}

@keyframes kollelCosmicRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* --------------------------------------------------------------------------
   Decorative Floating Bubbles
   -------------------------------------------------------------------------- */
.kollel-hero-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.kollel-hero-decoration::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 5%;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.1);
  border-radius: 50%;
  animation: kollelFloatBubble 10s ease-in-out infinite;
}

.kollel-hero-decoration::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 8%;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.08);
  border-radius: 50%;
  animation: kollelFloatBubble 12s ease-in-out infinite reverse;
}

@keyframes kollelFloatBubble {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-30px) scale(1.05);
    opacity: 0.7;
  }
}

/* Additional decorative elements */
.kollel-hero-decoration .bubble-3 {
  position: absolute;
  top: 60%;
  left: 15%;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(var(--ms-gold-rgb), 0.06);
  border-radius: 50%;
  animation: kollelFloatBubble 8s ease-in-out infinite 2s;
}

.kollel-hero-decoration .bubble-4 {
  position: absolute;
  top: 25%;
  right: 20%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(var(--ms-gold-rgb), 0.05);
  border-radius: 50%;
  animation: kollelFloatBubble 9s ease-in-out infinite 1s reverse;
}

/* --------------------------------------------------------------------------
   Hero Inner Container
   -------------------------------------------------------------------------- */
.kollel-hero-inner {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1200px !important;
  padding: 80px 40px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Hero Badge/Icon with Glow
   -------------------------------------------------------------------------- */
.kollel-hero-badge {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 90px !important;
  height: 90px !important;
  margin-bottom: 35px !important;
  border: 3px solid rgba(var(--ms-gold-rgb), 0.6) !important;
  border-radius: 50% !important;
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 0 40px rgba(var(--ms-gold-rgb), 0.4),
    0 0 80px rgba(var(--ms-gold-rgb), 0.2),
    inset 0 0 30px rgba(var(--ms-gold-rgb), 0.1) !important;
  animation: kollelBadgeReveal 1s ease-out 0.3s both, kollelBadgePulse 4s ease-in-out infinite !important;
}

@keyframes kollelBadgeReveal {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes kollelBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.4),
      0 0 80px rgba(var(--ms-gold-rgb), 0.2),
      inset 0 0 30px rgba(var(--ms-gold-rgb), 0.1);
    transform: translateY(0);
  }
  50% {
    box-shadow:
      0 0 60px rgba(var(--ms-gold-rgb), 0.5),
      0 0 100px rgba(var(--ms-gold-rgb), 0.3),
      inset 0 0 40px rgba(var(--ms-gold-rgb), 0.15);
    transform: translateY(-10px);
  }
}

.kollel-hero-badge svg,
.kollel-hero-badge img {
  width: 45px !important;
  height: 45px !important;
  color: var(--ms-gold) !important;
  fill: var(--ms-gold) !important;
  filter: drop-shadow(0 0 15px rgba(var(--ms-gold-rgb), 0.7)) !important;
}

/* --------------------------------------------------------------------------
   Hero Title - Gold with Premium Glow Animation
   -------------------------------------------------------------------------- */
.kollel-hero-title {
  margin-bottom: 0 !important;
  color: var(--ms-gold) !important;
  font-size: clamp(2.25rem, 8vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.6),
    0 0 60px rgba(var(--ms-gold-rgb), 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5) !important;
  animation: kollelTitleReveal 1.2s ease-out forwards, kollelTitleGlow 3s ease-in-out infinite 1.2s !important;
}

@keyframes kollelTitleReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes kollelTitleGlow {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(var(--ms-gold-rgb), 0.6),
      0 0 60px rgba(var(--ms-gold-rgb), 0.4),
      0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.8),
      0 0 80px rgba(var(--ms-gold-rgb), 0.5),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   Decorative Line Under Title
   -------------------------------------------------------------------------- */
.kollel-hero-title::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin: 30px auto 0;
  border-radius: 2px;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 20%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 80%,
      transparent 100%
    );
  animation: kollelLineReveal 1s ease-out 0.8s forwards;
}

@keyframes kollelLineReveal {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Hero Subtitle
   -------------------------------------------------------------------------- */
.kollel-hero-subtitle {
  max-width: 700px !important;
  margin: 40px auto 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
  animation: kollelSubtitleReveal 1s ease-out 0.6s both !important;
}

@keyframes kollelSubtitleReveal {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero Spacer
   -------------------------------------------------------------------------- */
.kollel-hero-spacer {
  height: 60px !important;
}

/* --------------------------------------------------------------------------
   Hero CTA Buttons Container
   -------------------------------------------------------------------------- */
.kollel-hero-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 50px !important;
  animation: kollelButtonsReveal 1s ease-out 1s both !important;
}

@keyframes kollelButtonsReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero Button Base Styles
   -------------------------------------------------------------------------- */
.kollel-hero-btn {
  display: inline-block !important;
  min-width: 260px !important;
  padding: 22px 50px !important;
  border-radius: 50px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --------------------------------------------------------------------------
   Primary Button - Gold Filled with Shimmer
   -------------------------------------------------------------------------- */
.kollel-hero-btn-primary {
  background: 
    linear-gradient(135deg,
      var(--ms-gold) 0%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  color: var(--ms-primary) !important;
  border: 3px solid var(--ms-gold) !important;
  box-shadow:
    0 0 25px rgba(var(--ms-gold-rgb), 0.4),
    0 10px 30px rgba(var(--ms-gold-rgb), 0.3) !important;
  animation: kollelGoldShimmer 3s ease infinite !important;
}

@keyframes kollelGoldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.kollel-hero-btn-primary:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 35px rgba(var(--ms-gold-rgb), 0.6),
    0 15px 40px rgba(var(--ms-gold-rgb), 0.4) !important;
}

/* --------------------------------------------------------------------------
   Secondary Button - Glass/Outline Style
   -------------------------------------------------------------------------- */
.kollel-hero-btn-secondary {
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--ms-gold) !important;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.kollel-hero-btn-secondary:hover {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
  border-color: var(--ms-gold) !important;
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.5),
    0 15px 35px rgba(var(--ms-gold-rgb), 0.3) !important;
}

/* --------------------------------------------------------------------------
   Scroll Indicator
   -------------------------------------------------------------------------- */
.kollel-hero-scroll {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  animation: kollelScrollReveal 1s ease-out 1.5s both !important;
}

@keyframes kollelScrollReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.kollel-hero-scroll-icon {
  width: 30px !important;
  height: 50px !important;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.4) !important;
  border-radius: 25px !important;
  position: relative !important;
}

.kollel-hero-scroll-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 6px !important;
  height: 10px !important;
  background: var(--ms-gold) !important;
  border-radius: 3px !important;
  animation: kollelScrollBounce 2s ease-in-out infinite !important;
}

@keyframes kollelScrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(15px);
    opacity: 0.3;
  }
}

/* ==========================================================================
   KOLLEL FORM SECTION
   ========================================================================== */

.kollel-section {
  position: relative;
  background: 
    linear-gradient(180deg,
      #faf8f5 0%,
      #ffffff 20%,
      #ffffff 80%,
      #faf8f5 100%
    ) !important;
  padding: 90px 40px 110px !important;
}

/* Decorative Top Transition */
.kollel-section::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ms-primary) 0%, transparent 100%);
  opacity: 0.04;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section Separator
   -------------------------------------------------------------------------- */
.kollel-section hr.wp-block-separator {
  border: none !important;
  height: 3px !important;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 15%,
      var(--ms-gold-light) 30%,
      var(--ms-primary) 50%,
      var(--ms-gold-light) 70%,
      var(--ms-gold) 85%,
      transparent 100%
    ) !important;
  max-width: 550px !important;
  margin: 0 auto 55px !important;
  opacity: 1 !important;
  border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   Kollel Section Heading
   -------------------------------------------------------------------------- */
.kollel-heading {
  color: var(--ms-primary) !important;
  font-size: clamp(26px, 4.5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.kollel-heading::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
  margin: 25px auto 0;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Kollel Subheading
   -------------------------------------------------------------------------- */
.kollel-subheading {
  color: rgba(2, 35, 66, 0.7) !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 650px !important;
  margin: 0 auto 55px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   FORM WRAPPER - 80% WIDTH PREMIUM STYLING
   ========================================================================== */

.kollel-section .gform_wrapper {
  width: 80% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: 
    linear-gradient(135deg, 
      #ffffff 0%, 
      #faf8f5 100%
    ) !important;
  padding: 60px 55px !important;
  border-radius: 30px !important;
  box-shadow: 
    0 35px 70px rgba(0, 0, 0, 0.1),
    0 15px 35px rgba(2, 35, 66, 0.05),
    0 0 0 1px rgba(240, 211, 151, 0.1) !important;
  border: 2px solid rgba(240, 211, 151, 0.2) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Override the inline style for form 4 */
.kollel-section #gform_wrapper_4 .gform-body {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Form Decorative Corners */
.kollel-section .gform_wrapper::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(240, 211, 151, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.kollel-section .gform_wrapper::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(2, 35, 66, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Form Body */
.kollel-section .gform_body {
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   PAGE STEPS - FIXED LAYOUT (NO CUTOFF)
   ========================================================================== */

.kollel-section .gf_page_steps,
.kollel-section #gf_page_steps_4,
.kollel-section #gf_page_steps_47 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-bottom: 45px !important;
  padding: 25px 20px !important;
  background: 
    linear-gradient(135deg, 
      rgba(2, 35, 66, 0.04) 0%, 
      rgba(2, 35, 66, 0.02) 100%
    ) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(2, 35, 66, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Individual Step */
.kollel-section .gf_step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(2, 35, 66, 0.5) !important;
  transition: all 0.3s ease !important;
  border: 2px solid rgba(2, 35, 66, 0.08) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.kollel-section .gf_step:hover {
  border-color: rgba(240, 211, 151, 0.4) !important;
  background: rgba(240, 211, 151, 0.05) !important;
}

/* Step Number */
.kollel-section .gf_step_number {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(2, 35, 66, 0.1) !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  transition: all 0.3s ease !important;
}

/* Step Label */
.kollel-section .gf_step_label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: inherit !important;
}

/* Active Step */
.kollel-section .gf_step_active {
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 100%
    ) !important;
  color: var(--ms-primary) !important;
  border-color: var(--ms-gold) !important;
  box-shadow: 
    0 8px 25px rgba(240, 211, 151, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.02) !important;
}

.kollel-section .gf_step_active .gf_step_number {
  background: var(--ms-primary) !important;
  color: var(--ms-gold) !important;
}

.kollel-section .gf_step_active .gf_step_label {
  color: var(--ms-primary) !important;
  font-weight: 700 !important;
}

/* Completed Step */
.kollel-section .gf_step_completed {
  background: var(--ms-primary) !important;
  color: #ffffff !important;
  border-color: var(--ms-primary) !important;
}

.kollel-section .gf_step_completed .gf_step_number {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
}

.kollel-section .gf_step_completed .gf_step_label {
  color: #ffffff !important;
}

/* Pending/Next Steps */
.kollel-section .gf_step_pending {
  opacity: 0.7 !important;
}

.kollel-section .gf_step_next {
  opacity: 0.85 !important;
  border-color: rgba(2, 35, 66, 0.15) !important;
}

/* ==========================================================================
   PROGRESS BAR STYLING
   ========================================================================== */

.kollel-section .gf_progressbar_wrapper {
  margin-bottom: 40px !important;
  padding: 0 10px !important;
}

.kollel-section .gf_progressbar_title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ms-primary) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.kollel-section .gf_progressbar {
  height: 14px !important;
  background: rgba(2, 35, 66, 0.1) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.kollel-section .gf_progressbar_percentage {
  height: 100% !important;
  background: 
    linear-gradient(90deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 50%, 
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 100% !important;
  animation: kollelProgressShimmer 2s ease infinite !important;
  border-radius: 10px !important;
  transition: width 0.5s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  min-width: 45px !important;
}

@keyframes kollelProgressShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==========================================================================
   FORM FIELDS GRID LAYOUT
   ========================================================================== */

.kollel-section .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px 35px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Individual Field Wrapper */
.kollel-section .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

/* Full Width Fields */
.kollel-section .gfield--width-full,
.kollel-section .gfield.gfield--type-html,
.kollel-section .gfield.gfield--type-section,
.kollel-section .gfield.gfield--type-textarea,
.kollel-section .gfield.gfield--type-fileupload,
.kollel-section .gfield.gfield--type-consent,
.kollel-section .gfield.gfield--type-captcha,
.kollel-section .gfield.gfield--type-page {
  grid-column: 1 / -1 !important;
}

/* Half Width Fields */
.kollel-section .gfield--width-half {
  grid-column: span 1 !important;
}

/* Third Width Fields */
.kollel-section .gfield--width-third {
  grid-column: span 1 !important;
}

/* Two-Thirds Width Fields */
.kollel-section .gfield--width-two-thirds {
  grid-column: span 2 !important;
}

/* --------------------------------------------------------------------------
   Field Labels
   -------------------------------------------------------------------------- */
.kollel-section .gfield_label,
.kollel-section .gform-field-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* Required Asterisk */
.kollel-section .gfield_required {
  color: #c53030 !important;
  margin-left: 3px !important;
}

/* Field Description */
.kollel-section .gfield_description {
  font-size: 12px !important;
  color: rgba(2, 35, 66, 0.55) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   INPUT FIELDS - UNIFIED STYLING
   ========================================================================== */

.kollel-section input[type="text"],
.kollel-section input[type="email"],
.kollel-section input[type="tel"],
.kollel-section input[type="number"],
.kollel-section input[type="password"],
.kollel-section input[type="url"],
.kollel-section input[type="date"],
.kollel-section textarea,
.kollel-section select {
  width: 100% !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  border: 2px solid rgba(2, 35, 66, 0.1) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--ms-primary) !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Placeholder */
.kollel-section input::placeholder,
.kollel-section textarea::placeholder {
  color: rgba(2, 35, 66, 0.4) !important;
  font-size: 14px !important;
}

/* Focus State */
.kollel-section input:focus,
.kollel-section textarea:focus,
.kollel-section select:focus {
  border-color: var(--ms-gold) !important;
  box-shadow: 
    0 0 0 4px rgba(240, 211, 151, 0.2),
    0 4px 15px rgba(240, 211, 151, 0.15) !important;
  background: #ffffff !important;
}

/* Filled State */
.kollel-section input:not(:placeholder-shown),
.kollel-section textarea:not(:placeholder-shown) {
  border-color: rgba(2, 35, 66, 0.2) !important;
}

/* Textarea */
.kollel-section textarea {
  min-height: 150px !important;
  resize: vertical !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   SELECT DROPDOWNS
   ========================================================================== */

.kollel-section select {
  padding-right: 50px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23022342' d='M7 10L1 4h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 14px !important;
  cursor: pointer !important;
}

.kollel-section select option {
  font-size: 14px !important;
  padding: 12px !important;
  color: var(--ms-primary) !important;
}

/* ==========================================================================
   NAME FIELDS (First/Last)
   ========================================================================== */

.kollel-section .ginput_complex.ginput_container_name {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.kollel-section .ginput_complex.ginput_container_name span {
  width: 100% !important;
}

.kollel-section .ginput_complex.ginput_container_name label {
  font-size: 11px !important;
  color: rgba(2, 35, 66, 0.5) !important;
  margin-top: 6px !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   ADDRESS FIELDS
   ========================================================================== */

.kollel-section .ginput_container_address {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
}

.kollel-section .ginput_container_address .address_line_1,
.kollel-section .ginput_container_address .address_line_2 {
  grid-column: 1 / -1 !important;
}

.kollel-section .ginput_container_address .address_city {
  grid-column: span 1 !important;
}

.kollel-section .ginput_container_address .address_state {
  grid-column: span 1 !important;
}

.kollel-section .ginput_container_address .address_zip {
  grid-column: span 1 !important;
}

.kollel-section .ginput_container_address .address_country {
  grid-column: 1 / -1 !important;
}

.kollel-section .ginput_container_address label {
  font-size: 11px !important;
  color: rgba(2, 35, 66, 0.5) !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   DATE PICKER FIELDS
   ========================================================================== */

.kollel-section .ginput_container_date {
  position: relative !important;
}

.kollel-section .datepicker {
  cursor: pointer !important;
}

/* Inline Datepicker Styling */
.kollel-section .ui-datepicker-inline,
.kollel-section .ui-datepicker {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  background: #ffffff !important;
  border: 2px solid rgba(2, 35, 66, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Datepicker Header */
.kollel-section .ui-datepicker-header {
  background: var(--ms-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 50px !important;
  margin: 0 !important;
  position: relative !important;
}

.kollel-section .ui-datepicker-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

.kollel-section .ui-datepicker-title select {
  font-size: 14px !important;
  padding: 8px 28px 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.kollel-section .ui-datepicker-title select option {
  color: var(--ms-primary) !important;
  background: #ffffff !important;
}

/* Navigation Arrows */
.kollel-section .ui-datepicker-prev,
.kollel-section .ui-datepicker-next {
  position: absolute !important;
  top: 50% !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.kollel-section .ui-datepicker-prev {
  left: 12px !important;
}

.kollel-section .ui-datepicker-next {
  right: 12px !important;
}

.kollel-section .ui-datepicker-prev:hover,
.kollel-section .ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.kollel-section .ui-datepicker-prev span,
.kollel-section .ui-datepicker-next span {
  display: block !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

.kollel-section .ui-datepicker-prev::after {
  content: '‹' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.kollel-section .ui-datepicker-next::after {
  content: '›' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Calendar Table */
.kollel-section .ui-datepicker-calendar {
  width: 100% !important;
  margin: 0 !important;
  padding: 15px !important;
}

.kollel-section .ui-datepicker-calendar th {
  padding: 10px 5px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.kollel-section .ui-datepicker-calendar td {
  padding: 3px !important;
  text-align: center !important;
}

.kollel-section .ui-datepicker-calendar .ui-state-default {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  color: var(--ms-primary) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.kollel-section .ui-datepicker-calendar .ui-state-default:hover {
  background: rgba(240, 211, 151, 0.35) !important;
}

.kollel-section .ui-datepicker-calendar .ui-state-active {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
  font-weight: 700 !important;
}

.kollel-section .ui-datepicker-today .ui-state-default {
  border: 2px solid var(--ms-primary) !important;
}

/* ==========================================================================
   FILE UPLOAD FIELDS
   ========================================================================== */

.kollel-section .gfield--type-fileupload {
  background: 
    linear-gradient(135deg, 
      rgba(2, 35, 66, 0.03) 0%, 
      rgba(2, 35, 66, 0.01) 100%
    ) !important;
  padding: 30px !important;
  border-radius: 16px !important;
  border: 2px dashed rgba(2, 35, 66, 0.15) !important;
  transition: all 0.3s ease !important;
}

.kollel-section .gfield--type-fileupload:hover {
  border-color: var(--ms-gold) !important;
  background: 
    linear-gradient(135deg, 
      rgba(240, 211, 151, 0.05) 0%, 
      rgba(240, 211, 151, 0.02) 100%
    ) !important;
}

.kollel-section .ginput_container_fileupload {
  text-align: center !important;
}

.kollel-section input[type="file"] {
  width: 100% !important;
  padding: 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.kollel-section .gform_drop_area {
  padding: 40px 30px !important;
  border: 2px dashed rgba(2, 35, 66, 0.2) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

.kollel-section .gform_drop_area:hover {
  border-color: var(--ms-gold) !important;
  background: rgba(240, 211, 151, 0.05) !important;
}

.kollel-section .gform_drop_instructions {
  color: rgba(2, 35, 66, 0.6) !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
}

.kollel-section .gform_button_select_files {
  display: inline-block !important;
  padding: 12px 30px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  background: var(--ms-gold) !important;
  border: none !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.kollel-section .gform_button_select_files:hover {
  background: var(--ms-gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 20px rgba(240, 211, 151, 0.4) !important;
}

/* ==========================================================================
   RADIO BUTTONS & CHECKBOXES
   ========================================================================== */

.kollel-section .gfield--type-radio .gfield_radio,
.kollel-section .gfield--type-checkbox .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.kollel-section .gchoice {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 22px !important;
  background: rgba(2, 35, 66, 0.025) !important;
  border: 2px solid rgba(2, 35, 66, 0.08) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  flex: 1 !important;
  min-width: 160px !important;
}

.kollel-section .gchoice:hover {
  background: rgba(240, 211, 151, 0.12) !important;
  border-color: rgba(240, 211, 151, 0.4) !important;
  transform: translateY(-2px) !important;
}

.kollel-section .gchoice input[type="radio"],
.kollel-section .gchoice input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--ms-gold) !important;
}

.kollel-section .gchoice label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ms-primary) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Selected State */
.kollel-section .gchoice:has(input:checked) {
  background: rgba(240, 211, 151, 0.2) !important;
  border-color: var(--ms-gold) !important;
  box-shadow: 0 4px 15px rgba(240, 211, 151, 0.2) !important;
}

/* ==========================================================================
   CONSENT FIELD
   ========================================================================== */

.kollel-section .gfield--type-consent {
  background: rgba(2, 35, 66, 0.02) !important;
  padding: 28px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(2, 35, 66, 0.06) !important;
}

.kollel-section .gfield--type-consent .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
}

.kollel-section .gfield--type-consent input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  accent-color: var(--ms-gold) !important;
}

.kollel-section .gfield--type-consent .gfield_consent_label {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ms-primary) !important;
}

/* ==========================================================================
   SECTION BREAKS
   ========================================================================== */

.kollel-section .gfield--type-section {
  border-bottom: 3px solid rgba(2, 35, 66, 0.08) !important;
  padding-bottom: 18px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

.kollel-section .gform-field-label--type-sub {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

.kollel-section .gsection_title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  position: relative !important;
  display: inline-block !important;
}

.kollel-section .gsection_title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--ms-gold);
  border-radius: 2px;
}

.kollel-section .gsection_description {
  font-size: 14px !important;
  color: rgba(2, 35, 66, 0.6) !important;
  margin-top: 12px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   HTML CONTENT FIELD
   ========================================================================== */

.kollel-section .gfield--type-html {
  background: 
    linear-gradient(135deg, 
      rgba(240, 211, 151, 0.1) 0%, 
      rgba(240, 211, 151, 0.05) 100%
    ) !important;
  padding: 25px 30px !important;
  border-radius: 14px !important;
  border-left: 5px solid var(--ms-gold) !important;
}

.kollel-section .gfield--type-html p {
  color: var(--ms-primary) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.kollel-section .gfield--type-html h3,
.kollel-section .gfield--type-html h4 {
  color: var(--ms-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.kollel-section .gfield--type-html ul,
.kollel-section .gfield--type-html ol {
  padding-left: 20px !important;
  margin: 10px 0 !important;
}

.kollel-section .gfield--type-html li {
  color: var(--ms-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 5px !important;
}

/* ==========================================================================
   PAGE BREAK (Multi-Page Forms)
   ========================================================================== */

.kollel-section .gform_page {
  width: 100% !important;
}

.kollel-section .gform_page_footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 40px !important;
  padding-top: 30px !important;
  border-top: 2px solid rgba(2, 35, 66, 0.08) !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.kollel-section .gform_previous_button,
.kollel-section .gform_next_button {
  display: inline-block !important;
  padding: 18px 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.kollel-section .gform_previous_button {
  color: var(--ms-primary) !important;
  background: transparent !important;
  border: 2px solid rgba(2, 35, 66, 0.2) !important;
}

.kollel-section .gform_previous_button:hover {
  background: rgba(2, 35, 66, 0.05) !important;
  border-color: var(--ms-primary) !important;
}

.kollel-section .gform_next_button {
  color: var(--ms-primary) !important;
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 100%
    ) !important;
  box-shadow: 0 10px 30px rgba(240, 211, 151, 0.35) !important;
}

.kollel-section .gform_next_button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(240, 211, 151, 0.45) !important;
}

/* ==========================================================================
   VALIDATION STATES
   ========================================================================== */

.kollel-section .gfield_error input,
.kollel-section .gfield_error select,
.kollel-section .gfield_error textarea {
  border-color: #c53030 !important;
  background: #fff5f5 !important;
}

.kollel-section .gfield_error .gfield_label {
  color: #c53030 !important;
}

.kollel-section .validation_message {
  color: #c53030 !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  display: block !important;
  font-weight: 500 !important;
  padding-left: 5px !important;
}

.kollel-section .gform_validation_errors {
  background: 
    linear-gradient(135deg, 
      #fff5f5 0%, 
      #ffe8e8 100%
    ) !important;
  border: 2px solid #c53030 !important;
  border-radius: 16px !important;
  padding: 25px 30px !important;
  margin-bottom: 35px !important;
}

.kollel-section .gform_validation_errors h2 {
  color: #c53030 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   FORM FOOTER & SUBMIT BUTTON
   ========================================================================== */

.kollel-section .gform_footer {
  grid-column: 1 / -1 !important;
  margin-top: 30px !important;
  padding-top: 40px !important;
  text-align: center !important;
  border-top: 2px solid rgba(2, 35, 66, 0.06) !important;
}

@keyframes kollelSubmitShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.kollel-section .gform_button,
.kollel-section input[type="submit"] {
  display: inline-block !important;
  min-width: 380px !important;
  padding: 24px 80px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--ms-primary) !important;
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 50%, 
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  animation: kollelSubmitShimmer 3s ease infinite !important;
  border: none !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 
    0 18px 45px rgba(240, 211, 151, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.kollel-section .gform_button::before,
.kollel-section input[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.kollel-section .gform_button:hover::before,
.kollel-section input[type="submit"]:hover::before {
  left: 100%;
}

.kollel-section .gform_button:hover,
.kollel-section input[type="submit"]:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 
    0 25px 55px rgba(240, 211, 151, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}

.kollel-section .gform_button:active,
.kollel-section input[type="submit"]:active {
  transform: translateY(-3px) scale(1.01) !important;
}

/* Required Legend */
.kollel-section .gform_required_legend {
  font-size: 12px !important;
  color: rgba(2, 35, 66, 0.5) !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* ==========================================================================
   CONFIRMATION MESSAGE
   ========================================================================== */

.kollel-section .gform_confirmation_message {
  text-align: center !important;
  padding: 60px 40px !important;
  background: 
    linear-gradient(135deg, 
      rgba(240, 211, 151, 0.15) 0%, 
      rgba(240, 211, 151, 0.05) 100%
    ) !important;
  border-radius: 20px !important;
  border: 2px solid var(--ms-gold) !important;
}

.kollel-section .gform_confirmation_message h3 {
  color: var(--ms-primary) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin-bottom: 15px !important;
}

.kollel-section .gform_confirmation_message p {
  color: rgba(2, 35, 66, 0.7) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   RESPONSIVE - LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {
  .kollel-hero-inner {
    padding: 100px 60px !important;
  }

  .kollel-hero-badge {
    width: 100px !important;
    height: 100px !important;
  }

  .kollel-hero-badge svg,
  .kollel-hero-badge img {
    width: 50px !important;
    height: 50px !important;
  }

  .kollel-section .gform_wrapper {
    width: 75% !important;
    max-width: 1300px !important;
  }

  .kollel-section .gf_page_steps,
  .kollel-section #gf_page_steps_4 {
    gap: 15px !important;
  }

  .kollel-section .gf_step {
    padding: 16px 24px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .kollel-hero {
    min-height: 80vh !important;
  }

  .kollel-hero-inner {
    padding: 60px 35px !important;
  }

  .kollel-hero-badge {
    width: 75px !important;
    height: 75px !important;
    margin-bottom: 28px !important;
  }

  .kollel-hero-badge svg,
  .kollel-hero-badge img {
    width: 38px !important;
    height: 38px !important;
  }

  .kollel-hero-title::after {
    margin-top: 25px !important;
  }

  @keyframes kollelLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 180px;
      opacity: 1;
    }
  }

  .kollel-hero-buttons {
    gap: 20px !important;
    margin-top: 40px !important;
  }

  .kollel-hero-btn {
    min-width: 220px !important;
    padding: 18px 40px !important;
    font-size: 15px !important;
  }

  .kollel-hero-decoration::before {
    width: 150px;
    height: 150px;
  }

  .kollel-hero-decoration::after {
    width: 120px;
    height: 120px;
  }

  .kollel-hero-scroll {
    bottom: 30px !important;
  }

  .kollel-section {
    padding: 70px 30px 90px !important;
  }

  .kollel-section .gform_wrapper {
    width: 90% !important;
    max-width: 900px !important;
    padding: 50px 40px !important;
  }

  .kollel-section .gform_fields {
    gap: 24px 28px !important;
  }

  .kollel-section .gfield--width-third {
    grid-column: span 1 !important;
  }

  /* Page Steps Tablet */
  .kollel-section .gf_page_steps,
  .kollel-section #gf_page_steps_4 {
    gap: 10px !important;
    padding: 20px 15px !important;
  }

  .kollel-section .gf_step {
    padding: 12px 16px !important;
    font-size: 12px !important;
  }

  .kollel-section .gf_step_number {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 12px !important;
  }

  .kollel-section .gf_step_label {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .kollel-hero {
    min-height: 70vh !important;
  }

  .kollel-hero-inner {
    padding: 50px 22px !important;
  }

  .kollel-hero-badge {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 25px !important;
  }

  .kollel-hero-badge svg,
  .kollel-hero-badge img {
    width: 32px !important;
    height: 32px !important;
  }

  .kollel-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.625rem) !important;
    letter-spacing: 2px !important;
  }

  .kollel-hero-title::after {
    margin-top: 22px !important;
  }

  @keyframes kollelLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 140px;
      opacity: 1;
    }
  }

  .kollel-hero-subtitle {
    font-size: 15px !important;
    margin-top: 30px !important;
  }

  .kollel-hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 35px !important;
  }

  .kollel-hero-btn {
    min-width: 280px !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 18px 35px !important;
    font-size: 14px !important;
  }

  .kollel-hero-decoration::before,
  .kollel-hero-decoration::after {
    display: none !important;
  }

  .kollel-hero-scroll {
    display: none !important;
  }

  .kollel-section {
    padding: 55px 15px 75px !important;
  }

  .kollel-heading {
    font-size: clamp(22px, 6vw, 34px) !important;
    letter-spacing: 1.5px !important;
  }

  .kollel-subheading {
    font-size: 14px !important;
    margin-bottom: 40px !important;
  }

  .kollel-section .gform_wrapper {
    width: 95% !important;
    padding: 35px 22px !important;
    border-radius: 24px !important;
  }

  /* Stack to 1 column on mobile */
  .kollel-section .gform_fields {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .kollel-section .gfield--width-half,
  .kollel-section .gfield--width-third,
  .kollel-section .gfield--width-two-thirds {
    grid-column: span 1 !important;
  }

  .kollel-section .ginput_complex.ginput_container_name,
  .kollel-section .ginput_container_address {
    grid-template-columns: 1fr !important;
  }

  /* Page Steps Mobile - Vertical Stack */
  .kollel-section .gf_page_steps,
  .kollel-section #gf_page_steps_4 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 18px 15px !important;
  }

  .kollel-section .gf_step {
    justify-content: flex-start !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    min-width: unset !important;
    width: 100% !important;
  }

  .kollel-section .gf_step_number {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 14px !important;
  }

  .kollel-section .gf_step_label {
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* Radio/Checkbox Mobile */
  .kollel-section .gchoice {
    min-width: 100% !important;
  }

  /* File Upload Mobile */
  .kollel-section .gfield--type-fileupload {
    padding: 25px 20px !important;
  }

  .kollel-section .gform_drop_area {
    padding: 30px 20px !important;
  }

  /* Page Break Mobile */
  .kollel-section .gform_page_footer {
    flex-direction: column !important;
  }

  .kollel-section .gform_previous_button,
  .kollel-section .gform_next_button {
    width: 100% !important;
    padding: 16px 40px !important;
  }

  .kollel-section .gform_button,
  .kollel-section input[type="submit"] {
    width: 100% !important;
    min-width: unset !important;
    padding: 22px 45px !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }

  .kollel-welcome-message,
  .kollel-login-prompt,
  .kollel-success-message {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .kollel-hero {
    min-height: 60vh !important;
  }

  .kollel-hero-inner {
    padding: 40px 15px !important;
  }

  .kollel-hero-badge {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 20px !important;
  }

  .kollel-hero-badge svg,
  .kollel-hero-badge img {
    width: 26px !important;
    height: 26px !important;
  }

  .kollel-hero-title {
    font-size: 26px !important;
    letter-spacing: 1.5px !important;
  }

  .kollel-hero-title::after {
    margin-top: 18px !important;
  }

  @keyframes kollelLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 100px;
      opacity: 1;
    }
  }

  .kollel-hero-subtitle {
    font-size: 14px !important;
    margin-top: 25px !important;
    line-height: 1.7 !important;
  }

  .kollel-hero-buttons {
    margin-top: 30px !important;
  }

  .kollel-hero-btn {
    min-width: unset !important;
    width: 100% !important;
    padding: 16px 30px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  .kollel-section {
    padding: 45px 10px 65px !important;
  }

  .kollel-section .gform_wrapper {
    width: 98% !important;
    padding: 28px 18px !important;
  }

  .kollel-section .gfield_label {
    font-size: 12px !important;
  }

  .kollel-section input[type="text"],
  .kollel-section input[type="email"],
  .kollel-section input[type="tel"],
  .kollel-section input[type="number"],
  .kollel-section textarea,
  .kollel-section select {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  .kollel-section .gchoice {
    padding: 14px 16px !important;
  }

  .kollel-section .gchoice label {
    font-size: 14px !important;
  }

  .kollel-section .gsection_title {
    font-size: 18px !important;
  }

  .kollel-section .gfield--type-html {
    padding: 20px !important;
  }

  /* Page Steps Small Mobile */
  .kollel-section .gf_page_steps,
  .kollel-section #gf_page_steps_4 {
    padding: 15px 12px !important;
    gap: 6px !important;
  }

  .kollel-section .gf_step {
    padding: 12px 15px !important;
  }

  .kollel-section .gf_step_number {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
  }

  .kollel-section .gf_step_label {
    font-size: 13px !important;
  }

  .kollel-section .gform_button,
  .kollel-section input[type="submit"] {
    padding: 20px 35px !important;
    font-size: 15px !important;
    border-radius: 50px !important;
  }

  .kollel-section .gform_previous_button,
  .kollel-section .gform_next_button {
    padding: 14px 35px !important;
    font-size: 14px !important;
  }

  .kollel-section .gform_confirmation_message {
    padding: 40px 25px !important;
  }

  .kollel-section .gform_confirmation_message h3 {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .kollel-hero::before,
  .kollel-hero::after,
  .kollel-hero-decoration::before,
  .kollel-hero-decoration::after,
  .kollel-hero-badge,
  .kollel-hero-title,
  .kollel-hero-title::after,
  .kollel-hero-subtitle,
  .kollel-hero-buttons,
  .kollel-hero-scroll,
  .kollel-hero-scroll-icon::before,
  .kollel-hero-btn-primary,
  .kollel-section .gf_progressbar_percentage,
  .kollel-section .gform_button,
  .kollel-section input[type="submit"],
  .kollel-processing-spinner,
  .kollel-success-message {
    animation: none !important;
  }

  .kollel-hero-title {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .kollel-hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }

  .kollel-hero-title::after {
    width: 200px !important;
    opacity: 1 !important;
  }

  .kollel-hero-badge {
    opacity: 1 !important;
    transform: none !important;
  }

  .kollel-hero-buttons {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .kollel-hero {
    min-height: auto !important;
    background: var(--ms-primary) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .kollel-hero::before,
  .kollel-hero::after,
  .kollel-hero-overlay,
  .kollel-hero-decoration,
  .kollel-hero-scroll {
    display: none !important;
  }

  .kollel-hero-badge {
    box-shadow: none !important;
  }

  .kollel-hero-buttons {
    display: none !important;
  }

  .kollel-section .gform_wrapper {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    width: 100% !important;
  }

  .kollel-section .gf_page_steps {
    display: none !important;
  }

  .kollel-section .gform_button,
  .kollel-section input[type="submit"] {
    box-shadow: none !important;
    background: #f0d397 !important;
  }
}
/* ==========================================================================
   MISHKAN SHMUEL APPLICATION PAGE - PREMIUM
   Theme: Dark Blue (#022342) & Gold (#f0d397)
   Updated Hero Section matching Homepage Cover Block
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --ms-primary: #022342;
  --ms-primary-light: #0a3a5c;
  --ms-primary-dark: #011a33;
  --ms-primary-rgb: 2, 35, 66;
  
  --ms-gold: #f0d397;
  --ms-gold-light: #f5e0b3;
  --ms-gold-dark: #d4b577;
  --ms-gold-rgb: 240, 211, 151;
  --ms-gold-glow: rgba(240, 211, 151, 0.4);
  
  --ms-white: #ffffff;
  --ms-cream: #faf8f5;
  
  --hero-primary-dark: rgba(2, 35, 66, 0.92);
  --hero-primary-mid: rgba(10, 58, 92, 0.85);
  
  --transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: 0.3s ease;
}

/* ==========================================================================
   CONDITIONAL FORM DISPLAY - CORE LOGIC
   ========================================================================== */

/* Hide application form (Form 1) for non-logged-in users */
body:not(.logged-in) #gform_wrapper_1,
body:not(.logged-in) .application-form-wrapper {
  display: none !important;
}

/* Hide registration form (Form 36 / block 911) for logged-in users */
body.logged-in #gform_wrapper_36,
body.logged-in .wp-block-block[data-ref="911"],
body.logged-in .login-form-wrapper {
  display: none !important;
}

/* Show application form for logged-in users */
body.logged-in #gform_wrapper_1,
body.logged-in .application-form-wrapper {
  display: block !important;
}

/* Show registration form for non-logged-in users */
body:not(.logged-in) #gform_wrapper_36,
body:not(.logged-in) .login-form-wrapper {
  display: block !important;
}

/* Dynamic content based on login state */
body:not(.logged-in) .show-logged-in {
  display: none !important;
}

body.logged-in .show-logged-out {
  display: none !important;
}

body:not(.logged-in) .show-logged-out {
  display: block !important;
}

body.logged-in .show-logged-in {
  display: block !important;
}

/* ==========================================================================
   HIDE "NEW? CREATE AN ACCOUNT" FOR LOGGED-IN USERS - COMPREHENSIVE FIX
   ========================================================================== */

/* Hide registration form wrapper completely for logged-in users */
body.logged-in #gform_wrapper_36,
body.logged-in .wp-block-block[data-ref="911"],
body.logged-in .login-form-wrapper,
body.logged-in .registration-form-wrapper {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide all "New Applicant" / "Create Account" messaging for logged-in users */
body.logged-in .login-prompt-message,
body.logged-in .create-account-prompt,
body.logged-in .new-user-prompt,
body.logged-in .registration-prompt,
body.logged-in .signup-prompt,
body.logged-in .new-applicant-message,
body.logged-in .new-applicant-prompt,
body.logged-in .new-applicant,
body.logged-in .create-account,
body.logged-in .new-user-message {
  display: none !important;
}

/* Hide any element with "new-applicant" in class or id */
body.logged-in [class*="new-applicant"],
body.logged-in [id*="new-applicant"],
body.logged-in [class*="new_applicant"],
body.logged-in [id*="new_applicant"],
body.logged-in [class*="newapplicant"],
body.logged-in [id*="newapplicant"] {
  display: none !important;
}

/* Hide elements with "create-account" variations */
body.logged-in [class*="create-account"],
body.logged-in [class*="create_account"],
body.logged-in [class*="createaccount"],
body.logged-in [id*="create-account"],
body.logged-in [id*="create_account"],
body.logged-in [class*="signup"],
body.logged-in [class*="sign-up"],
body.logged-in [class*="register-now"] {
  display: none !important;
}

/* Hide links to registration/signup pages */
body.logged-in a[href*="register"],
body.logged-in a[href*="signup"],
body.logged-in a[href*="sign-up"],
body.logged-in a[href*="create-account"],
body.logged-in a[href*="new-account"],
body.logged-in .gform_wrapper a[href*="register"] {
  display: none !important;
}

/* Hide parent containers that have registration links */
body.logged-in .application-section p:has(a[href*="register"]),
body.logged-in .application-section p:has(a[href*="signup"]),
body.logged-in .application-section div:has(a[href*="create-account"]) {
  display: none !important;
}

/* Hide WordPress default patterns */
body.logged-in .must-log-in,
body.logged-in .register-link,
body.logged-in .signup-link,
body.logged-in .wp-block-loginout a[href*="register"] {
  display: none !important;
}

/* Hide Gravity Forms specific registration prompts */
body.logged-in .gform_wrapper .gform_heading + p,
body.logged-in .gform_wrapper .gform_heading + div,
body.logged-in #gform_36 .gform_heading,
body.logged-in #gform_36 .gform_title,
body.logged-in #gform_36 .gform_description,
body.logged-in #gform_36,
body.logged-in #gform_fields_36 {
  display: none !important;
}

/* Hide any "show-logged-out" class elements (utility class approach) */
body.logged-in .show-logged-out,
body.logged-in .logged-out-only,
body.logged-in .guest-only,
body.logged-in .non-member-only,
body.logged-in .visitor-only {
  display: none !important;
}

/* Target specific text patterns using CSS selectors */
body.logged-in [data-text*="New"],
body.logged-in [data-content*="Create Account"],
body.logged-in [aria-label*="Create Account"],
body.logged-in [title*="Create Account"] {
  display: none !important;
}

/* Hide the entire registration section container if it exists */
body.logged-in .registration-section,
body.logged-in .register-section,
body.logged-in .signup-section,
body.logged-in .create-account-section,
body.logged-in #registration-section,
body.logged-in #register-section,
body.logged-in #signup-section {
  display: none !important;
}

/* Hide separator before/after registration sections for logged-in users */
body.logged-in .registration-separator,
body.logged-in .signup-separator,
body.logged-in hr.registration-divider {
  display: none !important;
}

/* Hide WordPress block patterns for registration */
body.logged-in .wp-block-group.is-style-register,
body.logged-in .wp-block-group[class*="register"],
body.logged-in .wp-block-group[class*="signup"],
body.logged-in .wp-block-group[class*="create-account"] {
  display: none !important;
}

/* Hide any paragraph containing "New" and "Create" text for logged-in users */
body.logged-in .application-section p[class*="new"],
body.logged-in .application-section p[class*="create"],
body.logged-in .application-section p[class*="register"] {
  display: none !important;
}

/* Hide heading elements with registration-related classes */
body.logged-in h1[class*="register"],
body.logged-in h2[class*="register"],
body.logged-in h3[class*="register"],
body.logged-in h4[class*="register"],
body.logged-in h1[class*="signup"],
body.logged-in h2[class*="signup"],
body.logged-in h3[class*="signup"],
body.logged-in h4[class*="signup"],
body.logged-in h1[class*="new-applicant"],
body.logged-in h2[class*="new-applicant"],
body.logged-in h3[class*="new-applicant"],
body.logged-in h4[class*="new-applicant"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Welcome Message for Logged-in Users
   -------------------------------------------------------------------------- */
.welcome-user-message {
  display: none;
  text-align: center;
  padding: 25px 30px;
  margin: 0 auto 40px;
  max-width: 800px;
  background: linear-gradient(135deg, 
    rgba(240, 211, 151, 0.15) 0%, 
    rgba(240, 211, 151, 0.05) 100%
  );
  border-radius: 16px;
  border: 2px solid var(--ms-gold);
}

body.logged-in .welcome-user-message {
  display: block;
}

.welcome-user-message h3 {
  color: var(--ms-primary);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.welcome-user-message p {
  color: rgba(2, 35, 66, 0.7);
  font-size: 15px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Login Prompt for Non-logged-in Users
   -------------------------------------------------------------------------- */
.login-prompt-message {
  display: block;
  text-align: center;
  padding: 30px;
  margin: 0 auto 30px;
  max-width: 800px;
  background: linear-gradient(135deg, 
    rgba(2, 35, 66, 0.05) 0%, 
    rgba(2, 35, 66, 0.02) 100%
  );
  border-radius: 16px;
  border: 2px solid rgba(2, 35, 66, 0.1);
}

body.logged-in .login-prompt-message {
  display: none !important;
}

.login-prompt-message h3 {
  color: var(--ms-primary);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.login-prompt-message p {
  color: rgba(2, 35, 66, 0.6);
  font-size: 15px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Processing/Loading Overlay
   -------------------------------------------------------------------------- */
.form-processing-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(2, 35, 66, 0.95);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.form-processing-overlay.active {
  display: flex !important;
}

.processing-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(240, 211, 151, 0.3);
  border-top-color: var(--ms-gold);
  border-radius: 50%;
  animation: processingSpinner 1s linear infinite;
}

@keyframes processingSpinner {
  to {
    transform: rotate(360deg);
  }
}

.processing-text {
  color: var(--ms-gold);
  font-size: 18px;
  font-weight: 600;
  margin-top: 25px;
  letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   Success Message Styling
   -------------------------------------------------------------------------- */
.registration-success-message {
  display: none;
  text-align: center;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto 30px;
  background: linear-gradient(135deg, 
    rgba(72, 187, 120, 0.1) 0%, 
    rgba(72, 187, 120, 0.05) 100%
  );
  border: 2px solid #48bb78;
  border-radius: 20px;
}

.registration-success-message.show {
  display: block;
  animation: successFadeInUp 0.5s ease;
}

@keyframes successFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.registration-success-message .success-icon {
  width: 70px;
  height: 70px;
  background: #48bb78;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.registration-success-message .success-icon svg {
  width: 35px;
  height: 35px;
  fill: white;
}

.registration-success-message h3 {
  color: var(--ms-primary);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 10px;
}

.registration-success-message p {
  color: rgba(2, 35, 66, 0.7);
  font-size: 16px;
}

/* ==========================================================================
   APPLICATION HERO SECTION - PREMIUM COVER BLOCK STYLE
   ========================================================================== */

.application-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Background Image
   -------------------------------------------------------------------------- */
.application-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.05);
  filter: brightness(0.9) contrast(1.1) saturate(1.2) !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   Dark Blue Gradient Overlay
   -------------------------------------------------------------------------- */
.application-hero-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: 
    linear-gradient(135deg,
      var(--hero-primary-dark) 0%,
      var(--hero-primary-mid) 50%,
      rgba(2, 35, 66, 0.9) 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   Animated Glow Overlay
   -------------------------------------------------------------------------- */
.application-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(var(--ms-gold-rgb), 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(var(--ms-gold-rgb), 0.1) 0%,
      transparent 50%
    );
  animation: heroGlowPulse 6s ease-in-out infinite;
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Floating Particles/Decorations
   -------------------------------------------------------------------------- */
.application-hero::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--ms-gold-rgb), 0.05) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(var(--ms-gold-rgb), 0.04) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(var(--ms-gold-rgb), 0.03) 0%, transparent 35%);
  animation: heroCosmicRotate 45s linear infinite;
}

@keyframes heroCosmicRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* --------------------------------------------------------------------------
   Decorative Floating Bubbles
   -------------------------------------------------------------------------- */
.application-hero-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.application-hero-decoration::before {
  content: '';
  position: absolute;
  top: 15%;
  left: 5%;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.1);
  border-radius: 50%;
  animation: heroFloatBubble 10s ease-in-out infinite;
}

.application-hero-decoration::after {
  content: '';
  position: absolute;
  bottom: 15%;
  right: 8%;
  width: 150px;
  height: 150px;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.08);
  border-radius: 50%;
  animation: heroFloatBubble 12s ease-in-out infinite reverse;
}

@keyframes heroFloatBubble {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-30px) scale(1.05);
    opacity: 0.7;
  }
}

/* Additional decorative element */
.application-hero-decoration .bubble-3 {
  position: absolute;
  top: 60%;
  left: 15%;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(var(--ms-gold-rgb), 0.06);
  border-radius: 50%;
  animation: heroFloatBubble 8s ease-in-out infinite 2s;
}

.application-hero-decoration .bubble-4 {
  position: absolute;
  top: 25%;
  right: 20%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(var(--ms-gold-rgb), 0.05);
  border-radius: 50%;
  animation: heroFloatBubble 9s ease-in-out infinite 1s reverse;
}

/* --------------------------------------------------------------------------
   Hero Inner Container
   -------------------------------------------------------------------------- */
.application-hero-inner {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1200px !important;
  padding: 80px 40px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Hero Badge/Icon with Glow
   -------------------------------------------------------------------------- */
.application-hero-badge {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 90px !important;
  height: 90px !important;
  margin-bottom: 35px !important;
  border: 3px solid rgba(var(--ms-gold-rgb), 0.6) !important;
  border-radius: 50% !important;
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 0 40px rgba(var(--ms-gold-rgb), 0.4),
    0 0 80px rgba(var(--ms-gold-rgb), 0.2),
    inset 0 0 30px rgba(var(--ms-gold-rgb), 0.1) !important;
  animation: heroBadgeReveal 1s ease-out 0.3s both, heroBadgePulse 4s ease-in-out infinite !important;
}

@keyframes heroBadgeReveal {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes heroBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.4),
      0 0 80px rgba(var(--ms-gold-rgb), 0.2),
      inset 0 0 30px rgba(var(--ms-gold-rgb), 0.1);
    transform: translateY(0);
  }
  50% {
    box-shadow:
      0 0 60px rgba(var(--ms-gold-rgb), 0.5),
      0 0 100px rgba(var(--ms-gold-rgb), 0.3),
      inset 0 0 40px rgba(var(--ms-gold-rgb), 0.15);
    transform: translateY(-10px);
  }
}

.application-hero-badge svg,
.application-hero-badge img {
  width: 45px !important;
  height: 45px !important;
  color: var(--ms-gold) !important;
  fill: var(--ms-gold) !important;
  filter: drop-shadow(0 0 15px rgba(var(--ms-gold-rgb), 0.7)) !important;
}

/* --------------------------------------------------------------------------
   Hero Title - Gold with Premium Glow Animation
   -------------------------------------------------------------------------- */
.application-hero-title {
  margin-bottom: 0 !important;
  color: var(--ms-gold) !important;
  font-size: clamp(2.25rem, 8vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.6),
    0 0 60px rgba(var(--ms-gold-rgb), 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5) !important;
  animation: heroTitleReveal 1.2s ease-out forwards, heroTitleGlow 3s ease-in-out infinite 1.2s !important;
}

@keyframes heroTitleReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroTitleGlow {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(var(--ms-gold-rgb), 0.6),
      0 0 60px rgba(var(--ms-gold-rgb), 0.4),
      0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.8),
      0 0 80px rgba(var(--ms-gold-rgb), 0.5),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
}

/* --------------------------------------------------------------------------
   Decorative Line Under Title
   -------------------------------------------------------------------------- */
.application-hero-title::after {
  content: "";
  display: block;
  width: 0;
  height: 3px;
  margin: 30px auto 0;
  border-radius: 2px;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 20%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 80%,
      transparent 100%
    );
  animation: heroLineReveal 1s ease-out 0.8s forwards;
}

@keyframes heroLineReveal {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 200px;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Hero Subtitle
   -------------------------------------------------------------------------- */
.application-hero-subtitle {
  max-width: 700px !important;
  margin: 40px auto 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
  animation: heroSubtitleReveal 1s ease-out 0.6s both !important;
}

@keyframes heroSubtitleReveal {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero Spacer
   -------------------------------------------------------------------------- */
.application-hero-spacer {
  height: 60px !important;
}

/* --------------------------------------------------------------------------
   Hero CTA Buttons Container
   -------------------------------------------------------------------------- */
.application-hero-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 50px !important;
  animation: heroButtonsReveal 1s ease-out 1s both !important;
}

@keyframes heroButtonsReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Hero Button Base Styles
   -------------------------------------------------------------------------- */
.application-hero-btn {
  display: inline-block !important;
  min-width: 260px !important;
  padding: 22px 50px !important;
  border-radius: 50px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --------------------------------------------------------------------------
   Primary Button - Gold Filled with Shimmer
   -------------------------------------------------------------------------- */
.application-hero-btn-primary {
  background: 
    linear-gradient(135deg,
      var(--ms-gold) 0%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  color: var(--ms-primary) !important;
  border: 3px solid var(--ms-gold) !important;
  box-shadow:
    0 0 25px rgba(var(--ms-gold-rgb), 0.4),
    0 10px 30px rgba(var(--ms-gold-rgb), 0.3) !important;
  animation: heroGoldShimmer 3s ease infinite !important;
}

@keyframes heroGoldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.application-hero-btn-primary:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 35px rgba(var(--ms-gold-rgb), 0.6),
    0 15px 40px rgba(var(--ms-gold-rgb), 0.4) !important;
}

/* --------------------------------------------------------------------------
   Secondary Button - Glass/Outline Style
   -------------------------------------------------------------------------- */
.application-hero-btn-secondary {
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--ms-gold) !important;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.application-hero-btn-secondary:hover {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
  border-color: var(--ms-gold) !important;
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.5),
    0 15px 35px rgba(var(--ms-gold-rgb), 0.3) !important;
}

/* --------------------------------------------------------------------------
   Scroll Indicator
   -------------------------------------------------------------------------- */
.application-hero-scroll {
  position: absolute !important;
  bottom: 40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  animation: heroScrollReveal 1s ease-out 1.5s both !important;
}

@keyframes heroScrollReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.application-hero-scroll-icon {
  width: 30px !important;
  height: 50px !important;
  border: 2px solid rgba(var(--ms-gold-rgb), 0.4) !important;
  border-radius: 25px !important;
  position: relative !important;
}

.application-hero-scroll-icon::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 6px !important;
  height: 10px !important;
  background: var(--ms-gold) !important;
  border-radius: 3px !important;
  animation: heroScrollBounce 2s ease-in-out infinite !important;
}

@keyframes heroScrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(15px);
    opacity: 0.3;
  }
}

/* ==========================================================================
   APPLICATION FORM SECTION
   ========================================================================== */

.application-section {
  position: relative;
  background: 
    linear-gradient(180deg,
      #faf8f5 0%,
      #ffffff 20%,
      #ffffff 80%,
      #faf8f5 100%
    ) !important;
  padding: 90px 40px 110px !important;
}

/* Decorative Top Transition */
.application-section::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ms-primary) 0%, transparent 100%);
  opacity: 0.04;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section Separator
   -------------------------------------------------------------------------- */
.application-section hr.wp-block-separator {
  border: none !important;
  height: 3px !important;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 15%,
      var(--ms-gold-light) 30%,
      var(--ms-primary) 50%,
      var(--ms-gold-light) 70%,
      var(--ms-gold) 85%,
      transparent 100%
    ) !important;
  max-width: 550px !important;
  margin: 0 auto 55px !important;
  opacity: 1 !important;
  border-radius: 3px !important;
}

/* --------------------------------------------------------------------------
   Application Section Heading
   -------------------------------------------------------------------------- */
.application-heading {
  color: var(--ms-primary) !important;
  font-size: clamp(26px, 4.5vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.application-heading::after {
  content: '';
  display: block;
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
  margin: 25px auto 0;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Application Subheading
   -------------------------------------------------------------------------- */
.application-subheading {
  color: rgba(2, 35, 66, 0.7) !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 650px !important;
  margin: 0 auto 55px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   FORM WRAPPER - 80% WIDTH PREMIUM STYLING
   ========================================================================== */

.application-section .gform_wrapper {
  width: 80% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: 
    linear-gradient(135deg, 
      #ffffff 0%, 
      #faf8f5 100%
    ) !important;
  padding: 60px 55px !important;
  border-radius: 30px !important;
  box-shadow: 
    0 35px 70px rgba(0, 0, 0, 0.1),
    0 15px 35px rgba(2, 35, 66, 0.05),
    0 0 0 1px rgba(240, 211, 151, 0.1) !important;
  border: 2px solid rgba(240, 211, 151, 0.2) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Override the inline style for form 1 */
.application-section #gform_wrapper_1 .gform-body {
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Form Decorative Corners */
.application-section .gform_wrapper::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(240, 211, 151, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.application-section .gform_wrapper::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(2, 35, 66, 0.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Form Body */
.application-section .gform_body {
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================================
   PAGE STEPS - FIXED LAYOUT (NO CUTOFF)
   ========================================================================== */

.application-section .gf_page_steps,
.application-section #gf_page_steps_1,
.application-section #gf_page_steps_36 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-bottom: 45px !important;
  padding: 25px 20px !important;
  background: 
    linear-gradient(135deg, 
      rgba(2, 35, 66, 0.04) 0%, 
      rgba(2, 35, 66, 0.02) 100%
    ) !important;
  border-radius: 20px !important;
  border: 1px solid rgba(2, 35, 66, 0.08) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Individual Step */
.application-section .gf_step {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  background: #ffffff !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(2, 35, 66, 0.5) !important;
  transition: all 0.3s ease !important;
  border: 2px solid rgba(2, 35, 66, 0.08) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.application-section .gf_step:hover {
  border-color: rgba(240, 211, 151, 0.4) !important;
  background: rgba(240, 211, 151, 0.05) !important;
}

/* Step Number */
.application-section .gf_step_number {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(2, 35, 66, 0.1) !important;
  border-radius: 50% !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  transition: all 0.3s ease !important;
}

/* Step Label */
.application-section .gf_step_label {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  color: inherit !important;
}

/* Active Step */
.application-section .gf_step_active {
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 100%
    ) !important;
  color: var(--ms-primary) !important;
  border-color: var(--ms-gold) !important;
  box-shadow: 
    0 8px 25px rgba(240, 211, 151, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.02) !important;
}

.application-section .gf_step_active .gf_step_number {
  background: var(--ms-primary) !important;
  color: var(--ms-gold) !important;
}

.application-section .gf_step_active .gf_step_label {
  color: var(--ms-primary) !important;
  font-weight: 700 !important;
}

/* Completed Step */
.application-section .gf_step_completed {
  background: var(--ms-primary) !important;
  color: #ffffff !important;
  border-color: var(--ms-primary) !important;
}

.application-section .gf_step_completed .gf_step_number {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
}

.application-section .gf_step_completed .gf_step_label {
  color: #ffffff !important;
}

/* Pending/Next Steps */
.application-section .gf_step_pending {
  opacity: 0.7 !important;
}

.application-section .gf_step_next {
  opacity: 0.85 !important;
  border-color: rgba(2, 35, 66, 0.15) !important;
}

/* ==========================================================================
   PROGRESS BAR STYLING
   ========================================================================== */

.application-section .gf_progressbar_wrapper {
  margin-bottom: 40px !important;
  padding: 0 10px !important;
}

.application-section .gf_progressbar_title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ms-primary) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.application-section .gf_progressbar {
  height: 14px !important;
  background: rgba(2, 35, 66, 0.1) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.application-section .gf_progressbar_percentage {
  height: 100% !important;
  background: 
    linear-gradient(90deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 50%, 
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 100% !important;
  animation: progressBarShimmer 2s ease infinite !important;
  border-radius: 10px !important;
  transition: width 0.5s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding-right: 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  min-width: 45px !important;
}

@keyframes progressBarShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==========================================================================
   FORM FIELDS GRID LAYOUT
   ========================================================================== */

.application-section .gform_fields {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px 35px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Individual Field Wrapper */
.application-section .gfield {
  margin: 0 !important;
  padding: 0 !important;
}

/* Full Width Fields */
.application-section .gfield--width-full,
.application-section .gfield.gfield--type-html,
.application-section .gfield.gfield--type-section,
.application-section .gfield.gfield--type-textarea,
.application-section .gfield.gfield--type-fileupload,
.application-section .gfield.gfield--type-consent,
.application-section .gfield.gfield--type-captcha,
.application-section .gfield.gfield--type-page {
  grid-column: 1 / -1 !important;
}

/* Half Width Fields */
.application-section .gfield--width-half {
  grid-column: span 1 !important;
}

/* Third Width Fields */
.application-section .gfield--width-third {
  grid-column: span 1 !important;
}

/* Two-Thirds Width Fields */
.application-section .gfield--width-two-thirds {
  grid-column: span 2 !important;
}

/* --------------------------------------------------------------------------
   Field Labels
   -------------------------------------------------------------------------- */
.application-section .gfield_label,
.application-section .gform-field-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

/* Required Asterisk */
.application-section .gfield_required {
  color: #c53030 !important;
  margin-left: 3px !important;
}

/* Field Description */
.application-section .gfield_description {
  font-size: 12px !important;
  color: rgba(2, 35, 66, 0.55) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   INPUT FIELDS - UNIFIED STYLING
   ========================================================================== */

.application-section input[type="text"],
.application-section input[type="email"],
.application-section input[type="tel"],
.application-section input[type="number"],
.application-section input[type="password"],
.application-section input[type="url"],
.application-section input[type="date"],
.application-section textarea,
.application-section select {
  width: 100% !important;
  padding: 16px 20px !important;
  font-size: 15px !important;
  font-family: inherit !important;
  border: 2px solid rgba(2, 35, 66, 0.1) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--ms-primary) !important;
  transition: all 0.3s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Placeholder */
.application-section input::placeholder,
.application-section textarea::placeholder {
  color: rgba(2, 35, 66, 0.4) !important;
  font-size: 14px !important;
}

/* Focus State */
.application-section input:focus,
.application-section textarea:focus,
.application-section select:focus {
  border-color: var(--ms-gold) !important;
  box-shadow: 
    0 0 0 4px rgba(240, 211, 151, 0.2),
    0 4px 15px rgba(240, 211, 151, 0.15) !important;
  background: #ffffff !important;
}

/* Filled State */
.application-section input:not(:placeholder-shown),
.application-section textarea:not(:placeholder-shown) {
  border-color: rgba(2, 35, 66, 0.2) !important;
}

/* Textarea */
.application-section textarea {
  min-height: 150px !important;
  resize: vertical !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   SELECT DROPDOWNS
   ========================================================================== */

.application-section select {
  padding-right: 50px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23022342' d='M7 10L1 4h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 14px !important;
  cursor: pointer !important;
}

.application-section select option {
  font-size: 14px !important;
  padding: 12px !important;
  color: var(--ms-primary) !important;
}

/* ==========================================================================
   NAME FIELDS (First/Last)
   ========================================================================== */

.application-section .ginput_complex.ginput_container_name {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.application-section .ginput_complex.ginput_container_name span {
  width: 100% !important;
}

.application-section .ginput_complex.ginput_container_name label {
  font-size: 11px !important;
  color: rgba(2, 35, 66, 0.5) !important;
  margin-top: 6px !important;
  display: block !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   ADDRESS FIELDS
   ========================================================================== */

.application-section .ginput_container_address {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
}

.application-section .ginput_container_address .address_line_1,
.application-section .ginput_container_address .address_line_2 {
  grid-column: 1 / -1 !important;
}

.application-section .ginput_container_address .address_city {
  grid-column: span 1 !important;
}

.application-section .ginput_container_address .address_state {
  grid-column: span 1 !important;
}

.application-section .ginput_container_address .address_zip {
  grid-column: span 1 !important;
}

.application-section .ginput_container_address .address_country {
  grid-column: 1 / -1 !important;
}

.application-section .ginput_container_address label {
  font-size: 11px !important;
  color: rgba(2, 35, 66, 0.5) !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   DATE PICKER FIELDS
   ========================================================================== */

.application-section .ginput_container_date {
  position: relative !important;
}

.application-section .datepicker {
  cursor: pointer !important;
}

/* Inline Datepicker Styling */
.application-section .ui-datepicker-inline,
.application-section .ui-datepicker {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  background: #ffffff !important;
  border: 2px solid rgba(2, 35, 66, 0.1) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Datepicker Header */
.application-section .ui-datepicker-header {
  background: var(--ms-primary) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 18px 50px !important;
  margin: 0 !important;
  position: relative !important;
}

.application-section .ui-datepicker-title {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

.application-section .ui-datepicker-title select {
  font-size: 14px !important;
  padding: 8px 28px 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.application-section .ui-datepicker-title select option {
  color: var(--ms-primary) !important;
  background: #ffffff !important;
}

/* Navigation Arrows */
.application-section .ui-datepicker-prev,
.application-section .ui-datepicker-next {
  position: absolute !important;
  top: 50% !important;
  width: 32px !important;
  height: 32px !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}

.application-section .ui-datepicker-prev {
  left: 12px !important;
}

.application-section .ui-datepicker-next {
  right: 12px !important;
}

.application-section .ui-datepicker-prev:hover,
.application-section .ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.35) !important;
}

.application-section .ui-datepicker-prev span,
.application-section .ui-datepicker-next span {
  display: block !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

.application-section .ui-datepicker-prev::after {
  content: '‹' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.application-section .ui-datepicker-next::after {
  content: '›' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Calendar Table */
.application-section .ui-datepicker-calendar {
  width: 100% !important;
  margin: 0 !important;
  padding: 15px !important;
}

.application-section .ui-datepicker-calendar th {
  padding: 10px 5px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.application-section .ui-datepicker-calendar td {
  padding: 3px !important;
  text-align: center !important;
}

.application-section .ui-datepicker-calendar .ui-state-default {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 auto !important;
  font-size: 14px !important;
  color: var(--ms-primary) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.application-section .ui-datepicker-calendar .ui-state-default:hover {
  background: rgba(240, 211, 151, 0.35) !important;
}

.application-section .ui-datepicker-calendar .ui-state-active {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
  font-weight: 700 !important;
}

.application-section .ui-datepicker-today .ui-state-default {
  border: 2px solid var(--ms-primary) !important;
}

/* ==========================================================================
   FILE UPLOAD FIELDS
   ========================================================================== */

.application-section .gfield--type-fileupload {
  background: 
    linear-gradient(135deg, 
      rgba(2, 35, 66, 0.03) 0%, 
      rgba(2, 35, 66, 0.01) 100%
    ) !important;
  padding: 30px !important;
  border-radius: 16px !important;
  border: 2px dashed rgba(2, 35, 66, 0.15) !important;
  transition: all 0.3s ease !important;
}

.application-section .gfield--type-fileupload:hover {
  border-color: var(--ms-gold) !important;
  background: 
    linear-gradient(135deg, 
      rgba(240, 211, 151, 0.05) 0%, 
      rgba(240, 211, 151, 0.02) 100%
    ) !important;
}

.application-section .ginput_container_fileupload {
  text-align: center !important;
}

.application-section input[type="file"] {
  width: 100% !important;
  padding: 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

.application-section .gform_drop_area {
  padding: 40px 30px !important;
  border: 2px dashed rgba(2, 35, 66, 0.2) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

.application-section .gform_drop_area:hover {
  border-color: var(--ms-gold) !important;
  background: rgba(240, 211, 151, 0.05) !important;
}

.application-section .gform_drop_instructions {
  color: rgba(2, 35, 66, 0.6) !important;
  font-size: 14px !important;
  margin-bottom: 15px !important;
}

.application-section .gform_button_select_files {
  display: inline-block !important;
  padding: 12px 30px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  background: var(--ms-gold) !important;
  border: none !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.application-section .gform_button_select_files:hover {
  background: var(--ms-gold-light) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 20px rgba(240, 211, 151, 0.4) !important;
}

/* ==========================================================================
   RADIO BUTTONS & CHECKBOXES
   ========================================================================== */

.application-section .gfield--type-radio .gfield_radio,
.application-section .gfield--type-checkbox .gfield_checkbox {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.application-section .gchoice {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 22px !important;
  background: rgba(2, 35, 66, 0.025) !important;
  border: 2px solid rgba(2, 35, 66, 0.08) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  flex: 1 !important;
  min-width: 160px !important;
}

.application-section .gchoice:hover {
  background: rgba(240, 211, 151, 0.12) !important;
  border-color: rgba(240, 211, 151, 0.4) !important;
  transform: translateY(-2px) !important;
}

.application-section .gchoice input[type="radio"],
.application-section .gchoice input[type="checkbox"] {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: var(--ms-gold) !important;
}

.application-section .gchoice label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--ms-primary) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* Selected State */
.application-section .gchoice:has(input:checked) {
  background: rgba(240, 211, 151, 0.2) !important;
  border-color: var(--ms-gold) !important;
  box-shadow: 0 4px 15px rgba(240, 211, 151, 0.2) !important;
}

/* ==========================================================================
   CONSENT FIELD
   ========================================================================== */

.application-section .gfield--type-consent {
  background: rgba(2, 35, 66, 0.02) !important;
  padding: 28px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(2, 35, 66, 0.06) !important;
}

.application-section .gfield--type-consent .ginput_container_consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
}

.application-section .gfield--type-consent input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  margin-top: 2px !important;
  flex-shrink: 0 !important;
  accent-color: var(--ms-gold) !important;
}

.application-section .gfield--type-consent .gfield_consent_label {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ms-primary) !important;
}

/* ==========================================================================
   SECTION BREAKS
   ========================================================================== */

.application-section .gfield--type-section {
  border-bottom: 3px solid rgba(2, 35, 66, 0.08) !important;
  padding-bottom: 18px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

.application-section .gform-field-label--type-sub {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--ms-primary) !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
}

.application-section .gsection_title {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--ms-primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  position: relative !important;
  display: inline-block !important;
}

.application-section .gsection_title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--ms-gold);
  border-radius: 2px;
}

.application-section .gsection_description {
  font-size: 14px !important;
  color: rgba(2, 35, 66, 0.6) !important;
  margin-top: 12px !important;
  line-height: 1.6 !important;
}

/* ==========================================================================
   HTML CONTENT FIELD
   ========================================================================== */

.application-section .gfield--type-html {
  background: 
    linear-gradient(135deg, 
      rgba(240, 211, 151, 0.1) 0%, 
      rgba(240, 211, 151, 0.05) 100%
    ) !important;
  padding: 25px 30px !important;
  border-radius: 14px !important;
  border-left: 5px solid var(--ms-gold) !important;
}

.application-section .gfield--type-html p {
  color: var(--ms-primary) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.application-section .gfield--type-html h3,
.application-section .gfield--type-html h4 {
  color: var(--ms-primary) !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.application-section .gfield--type-html ul,
.application-section .gfield--type-html ol {
  padding-left: 20px !important;
  margin: 10px 0 !important;
}

.application-section .gfield--type-html li {
  color: var(--ms-primary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 5px !important;
}

/* ==========================================================================
   PAGE BREAK (Multi-Page Forms)
   ========================================================================== */

.application-section .gform_page {
  width: 100% !important;
}

.application-section .gform_page_footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 40px !important;
  padding-top: 30px !important;
  border-top: 2px solid rgba(2, 35, 66, 0.08) !important;
  gap: 20px !important;
  flex-wrap: wrap !important;
}

.application-section .gform_previous_button,
.application-section .gform_next_button {
  display: inline-block !important;
  padding: 18px 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.application-section .gform_previous_button {
  color: var(--ms-primary) !important;
  background: transparent !important;
  border: 2px solid rgba(2, 35, 66, 0.2) !important;
}

.application-section .gform_previous_button:hover {
  background: rgba(2, 35, 66, 0.05) !important;
  border-color: var(--ms-primary) !important;
}

.application-section .gform_next_button {
  color: var(--ms-primary) !important;
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 100%
    ) !important;
  box-shadow: 0 10px 30px rgba(240, 211, 151, 0.35) !important;
}

.application-section .gform_next_button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 40px rgba(240, 211, 151, 0.45) !important;
}

/* ==========================================================================
   VALIDATION STATES
   ========================================================================== */

.application-section .gfield_error input,
.application-section .gfield_error select,
.application-section .gfield_error textarea {
  border-color: #c53030 !important;
  background: #fff5f5 !important;
}

.application-section .gfield_error .gfield_label {
  color: #c53030 !important;
}

.application-section .validation_message {
  color: #c53030 !important;
  font-size: 12px !important;
  margin-top: 8px !important;
  display: block !important;
  font-weight: 500 !important;
  padding-left: 5px !important;
}

.application-section .gform_validation_errors {
  background: 
    linear-gradient(135deg, 
      #fff5f5 0%, 
      #ffe8e8 100%
    ) !important;
  border: 2px solid #c53030 !important;
  border-radius: 16px !important;
  padding: 25px 30px !important;
  margin-bottom: 35px !important;
}

.application-section .gform_validation_errors h2 {
  color: #c53030 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   FORM FOOTER & SUBMIT BUTTON
   ========================================================================== */

.application-section .gform_footer {
  grid-column: 1 / -1 !important;
  margin-top: 30px !important;
  padding-top: 40px !important;
  text-align: center !important;
  border-top: 2px solid rgba(2, 35, 66, 0.06) !important;
}

@keyframes submitGoldShimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.application-section .gform_button,
.application-section input[type="submit"] {
  display: inline-block !important;
  min-width: 380px !important;
  padding: 24px 80px !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--ms-primary) !important;
  background: 
    linear-gradient(135deg, 
      var(--ms-gold) 0%, 
      var(--ms-gold-light) 50%, 
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  animation: submitGoldShimmer 3s ease infinite !important;
  border: none !important;
  border-radius: 60px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  box-shadow: 
    0 18px 45px rgba(240, 211, 151, 0.4),
    0 6px 20px rgba(0, 0, 0, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
}

.application-section .gform_button::before,
.application-section input[type="submit"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.application-section .gform_button:hover::before,
.application-section input[type="submit"]:hover::before {
  left: 100%;
}

.application-section .gform_button:hover,
.application-section input[type="submit"]:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 
    0 25px 55px rgba(240, 211, 151, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) !important;
}

.application-section .gform_button:active,
.application-section input[type="submit"]:active {
  transform: translateY(-3px) scale(1.01) !important;
}

/* Required Legend */
.application-section .gform_required_legend {
  font-size: 12px !important;
  color: rgba(2, 35, 66, 0.5) !important;
  text-align: center !important;
  margin-bottom: 30px !important;
}

/* ==========================================================================
   CONFIRMATION MESSAGE
   ========================================================================== */

.application-section .gform_confirmation_message {
  text-align: center !important;
  padding: 60px 40px !important;
  background: 
    linear-gradient(135deg, 
      rgba(240, 211, 151, 0.15) 0%, 
      rgba(240, 211, 151, 0.05) 100%
    ) !important;
  border-radius: 20px !important;
  border: 2px solid var(--ms-gold) !important;
}

.application-section .gform_confirmation_message h3 {
  color: var(--ms-primary) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  margin-bottom: 15px !important;
}

.application-section .gform_confirmation_message p {
  color: rgba(2, 35, 66, 0.7) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   RESPONSIVE - LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {
  .application-hero-inner {
    padding: 100px 60px !important;
  }

  .application-hero-badge {
    width: 100px !important;
    height: 100px !important;
  }

  .application-hero-badge svg,
  .application-hero-badge img {
    width: 50px !important;
    height: 50px !important;
  }

  .application-section .gform_wrapper {
    width: 75% !important;
    max-width: 1300px !important;
  }

  .application-section .gf_page_steps,
  .application-section #gf_page_steps_1 {
    gap: 15px !important;
  }

  .application-section .gf_step {
    padding: 16px 24px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .application-hero {
    min-height: 80vh !important;
  }

  .application-hero-inner {
    padding: 60px 35px !important;
  }

  .application-hero-badge {
    width: 75px !important;
    height: 75px !important;
    margin-bottom: 28px !important;
  }

  .application-hero-badge svg,
  .application-hero-badge img {
    width: 38px !important;
    height: 38px !important;
  }

  .application-hero-title::after {
    margin-top: 25px !important;
  }

  @keyframes heroLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 180px;
      opacity: 1;
    }
  }

  .application-hero-buttons {
    gap: 20px !important;
    margin-top: 40px !important;
  }

  .application-hero-btn {
    min-width: 220px !important;
    padding: 18px 40px !important;
    font-size: 15px !important;
  }

  .application-hero-decoration::before {
    width: 150px;
    height: 150px;
  }

  .application-hero-decoration::after {
    width: 120px;
    height: 120px;
  }

  .application-hero-scroll {
    bottom: 30px !important;
  }

  .application-section {
    padding: 70px 30px 90px !important;
  }

  .application-section .gform_wrapper {
    width: 90% !important;
    max-width: 900px !important;
    padding: 50px 40px !important;
  }

  .application-section .gform_fields {
    gap: 24px 28px !important;
  }

  .application-section .gfield--width-third {
    grid-column: span 1 !important;
  }

  /* Page Steps Tablet */
  .application-section .gf_page_steps,
  .application-section #gf_page_steps_1 {
    gap: 10px !important;
    padding: 20px 15px !important;
  }

  .application-section .gf_step {
    padding: 12px 16px !important;
    font-size: 12px !important;
  }

  .application-section .gf_step_number {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 12px !important;
  }

  .application-section .gf_step_label {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .application-hero {
    min-height: 70vh !important;
  }

  .application-hero-inner {
    padding: 50px 22px !important;
  }

  .application-hero-badge {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 25px !important;
  }

  .application-hero-badge svg,
  .application-hero-badge img {
    width: 32px !important;
    height: 32px !important;
  }

  .application-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.625rem) !important;
    letter-spacing: 2px !important;
  }

  .application-hero-title::after {
    margin-top: 22px !important;
  }

  @keyframes heroLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 140px;
      opacity: 1;
    }
  }

  .application-hero-subtitle {
    font-size: 15px !important;
    margin-top: 30px !important;
  }

  .application-hero-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 35px !important;
  }

  .application-hero-btn {
    min-width: 280px !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 18px 35px !important;
    font-size: 14px !important;
  }

  .application-hero-decoration::before,
  .application-hero-decoration::after {
    display: none !important;
  }

  .application-hero-scroll {
    display: none !important;
  }

  .application-section {
    padding: 55px 15px 75px !important;
  }

  .application-heading {
    font-size: clamp(22px, 6vw, 34px) !important;
    letter-spacing: 1.5px !important;
  }

  .application-subheading {
    font-size: 14px !important;
    margin-bottom: 40px !important;
  }

  .application-section .gform_wrapper {
    width: 95% !important;
    padding: 35px 22px !important;
    border-radius: 24px !important;
  }

  /* Stack to 1 column on mobile */
  .application-section .gform_fields {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .application-section .gfield--width-half,
  .application-section .gfield--width-third,
  .application-section .gfield--width-two-thirds {
    grid-column: span 1 !important;
  }

  .application-section .ginput_complex.ginput_container_name,
  .application-section .ginput_container_address {
    grid-template-columns: 1fr !important;
  }

  /* Page Steps Mobile - Vertical Stack */
  .application-section .gf_page_steps,
  .application-section #gf_page_steps_1 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 18px 15px !important;
  }

  .application-section .gf_step {
    justify-content: flex-start !important;
    padding: 14px 18px !important;
    border-radius: 12px !important;
    min-width: unset !important;
    width: 100% !important;
  }

  .application-section .gf_step_number {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 14px !important;
  }

  .application-section .gf_step_label {
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* Radio/Checkbox Mobile */
  .application-section .gchoice {
    min-width: 100% !important;
  }

  /* File Upload Mobile */
  .application-section .gfield--type-fileupload {
    padding: 25px 20px !important;
  }

  .application-section .gform_drop_area {
    padding: 30px 20px !important;
  }

  /* Page Break Mobile */
  .application-section .gform_page_footer {
    flex-direction: column !important;
  }

  .application-section .gform_previous_button,
  .application-section .gform_next_button {
    width: 100% !important;
    padding: 16px 40px !important;
  }

  .application-section .gform_button,
  .application-section input[type="submit"] {
    width: 100% !important;
    min-width: unset !important;
    padding: 22px 45px !important;
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }

  .welcome-user-message,
  .login-prompt-message,
  .registration-success-message {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .application-hero {
    min-height: 60vh !important;
  }

  .application-hero-inner {
    padding: 40px 15px !important;
  }

  .application-hero-badge {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 20px !important;
  }

  .application-hero-badge svg,
  .application-hero-badge img {
    width: 26px !important;
    height: 26px !important;
  }

  .application-hero-title {
    font-size: 26px !important;
    letter-spacing: 1.5px !important;
  }

  .application-hero-title::after {
    margin-top: 18px !important;
  }

  @keyframes heroLineReveal {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 100px;
      opacity: 1;
    }
  }

  .application-hero-subtitle {
    font-size: 14px !important;
    margin-top: 25px !important;
    line-height: 1.7 !important;
  }

  .application-hero-buttons {
    margin-top: 30px !important;
  }

  .application-hero-btn {
    min-width: unset !important;
    width: 100% !important;
    padding: 16px 30px !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
  }

  .application-section {
    padding: 45px 10px 65px !important;
  }

  .application-section .gform_wrapper {
    width: 98% !important;
    padding: 28px 18px !important;
  }

  .application-section .gfield_label {
    font-size: 12px !important;
  }

  .application-section input[type="text"],
  .application-section input[type="email"],
  .application-section input[type="tel"],
  .application-section input[type="number"],
  .application-section textarea,
  .application-section select {
    padding: 14px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  .application-section .gchoice {
    padding: 14px 16px !important;
  }

  .application-section .gchoice label {
    font-size: 14px !important;
  }

  .application-section .gsection_title {
    font-size: 18px !important;
  }

  .application-section .gfield--type-html {
    padding: 20px !important;
  }

  /* Page Steps Small Mobile */
  .application-section .gf_page_steps,
  .application-section #gf_page_steps_1 {
    padding: 15px 12px !important;
    gap: 6px !important;
  }

  .application-section .gf_step {
    padding: 12px 15px !important;
  }

  .application-section .gf_step_number {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 12px !important;
  }

  .application-section .gf_step_label {
    font-size: 13px !important;
  }

  .application-section .gform_button,
  .application-section input[type="submit"] {
    padding: 20px 35px !important;
    font-size: 15px !important;
    border-radius: 50px !important;
  }

  .application-section .gform_previous_button,
  .application-section .gform_next_button {
    padding: 14px 35px !important;
    font-size: 14px !important;
  }

  .application-section .gform_confirmation_message {
    padding: 40px 25px !important;
  }

  .application-section .gform_confirmation_message h3 {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .application-hero::before,
  .application-hero::after,
  .application-hero-decoration::before,
  .application-hero-decoration::after,
  .application-hero-badge,
  .application-hero-title,
  .application-hero-title::after,
  .application-hero-subtitle,
  .application-hero-buttons,
  .application-hero-scroll,
  .application-hero-scroll-icon::before,
  .application-hero-btn-primary,
  .application-section .gf_progressbar_percentage,
  .application-section .gform_button,
  .application-section input[type="submit"] {
    animation: none !important;
  }

  .application-hero-title {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .application-hero-subtitle {
    opacity: 1 !important;
    transform: none !important;
  }

  .application-hero-title::after {
    width: 200px !important;
    opacity: 1 !important;
  }

  .application-hero-badge {
    opacity: 1 !important;
    transform: none !important;
  }

  .application-hero-buttons {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .application-hero {
    min-height: auto !important;
    background: var(--ms-primary) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .application-hero::before,
  .application-hero::after,
  .application-hero-overlay,
  .application-hero-decoration,
  .application-hero-scroll {
    display: none !important;
  }

  .application-hero-badge {
    box-shadow: none !important;
  }

  .application-hero-buttons {
    display: none !important;
  }

  .application-section .gform_wrapper {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    width: 100% !important;
  }

  .application-section .gf_page_steps {
    display: none !important;
  }

  .application-section .gform_button,
  .application-section input[type="submit"] {
    box-shadow: none !important;
    background: #f0d397 !important;
  }
}
/* ==========================================================================
   STAFF DIRECTORY PAGE - Mishkan Shmuel
   Premium staff showcase with animated cards
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --ms-primary: #022342;
  --ms-primary-light: #0a3a5c;
  --ms-primary-dark: #011a33;
  --ms-primary-rgb: 2, 35, 66;
  
  --ms-gold: #f0d397;
  --ms-gold-light: #f5e0b3;
  --ms-gold-dark: #d4b577;
  --ms-gold-rgb: 240, 211, 151;
  --ms-gold-glow: rgba(240, 211, 151, 0.4);
  
  --ms-white: #ffffff;
  --ms-cream: #faf8f5;
  
  --transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-fast: 0.3s ease;
}

/* ==========================================================================
   STAFF CONTENT SECTION
   ========================================================================== */

.staff-section {
  position: relative;
  padding: 90px 40px 110px !important;
  background: 
    linear-gradient(180deg,
      var(--ms-cream) 0%,
      var(--ms-white) 20%,
      var(--ms-white) 80%,
      var(--ms-cream) 100%
    ) !important;
}

/* Decorative Top Transition */
.staff-section::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, var(--ms-primary) 0%, transparent 100%);
  opacity: 0.04;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Section Separator
   -------------------------------------------------------------------------- */
.staff-section hr.wp-block-separator {
  max-width: 550px !important;
  height: 3px !important;
  margin: 0 auto 55px !important;
  border: none !important;
  border-radius: 3px !important;
  opacity: 1 !important;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 15%,
      var(--ms-gold-light) 30%,
      var(--ms-primary) 50%,
      var(--ms-gold-light) 70%,
      var(--ms-gold) 85%,
      transparent 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   Staff Heading
   -------------------------------------------------------------------------- */
.staff-heading {
  margin-bottom: 20px !important;
  color: var(--ms-primary) !important;
  font-size: clamp(1.625rem, 4.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.staff-heading::after {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  margin: 25px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
}

/* --------------------------------------------------------------------------
   Staff Subheading
   -------------------------------------------------------------------------- */
.staff-subheading {
  max-width: 650px !important;
  margin: 0 auto 55px !important;
  color: rgba(var(--ms-primary-rgb), 0.7) !important;
  font-size: clamp(0.875rem, 2vw, 1.0625rem) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Content Wrapper - 80% Width
   -------------------------------------------------------------------------- */
.staff-content-wrapper {
  position: relative !important;
  width: 80% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* ==========================================================================
   ROSH YESHIVA SECTION
   ========================================================================== */

.rosh-yeshiva-section {
  position: relative !important;
  margin-bottom: 80px !important;
  padding: 50px 40px !important;
  border-radius: 30px !important;
  background: 
    radial-gradient(
      circle at center,
      rgba(var(--ms-gold-rgb), 0.08) 0%,
      transparent 60%
    ) !important;
  text-align: center !important;
}

/* Top Decorative Line */
.rosh-yeshiva-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ms-gold), transparent);
}

/* --------------------------------------------------------------------------
   Rosh Section Title
   -------------------------------------------------------------------------- */
.rosh-section-title {
  margin-bottom: 15px !important;
  color: var(--ms-primary) !important;
  font-size: clamp(1.5rem, 4vw, 2.375rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.rosh-section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
}

/* --------------------------------------------------------------------------
   Rosh Yeshiva Card
   -------------------------------------------------------------------------- */
.rosh-yeshiva-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-top: 40px !important;
  animation: fadeInUp 1s ease-out 0.3s both !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Star Decoration */
.rosh-yeshiva-card::before {
  content: "✡" !important;
  margin-bottom: 20px !important;
  color: var(--ms-gold) !important;
  font-size: 36px !important;
  text-shadow: 0 0 25px rgba(var(--ms-gold-rgb), 0.6) !important;
  animation: starFloat 3s ease-in-out infinite !important;
}

@keyframes starFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* --------------------------------------------------------------------------
   Rosh Yeshiva Photo
   -------------------------------------------------------------------------- */
.rosh-yeshiva-photo {
  position: relative !important;
  width: 320px !important;
  height: 320px !important;
  border: 10px solid var(--ms-gold) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ms-white) 0%, var(--ms-cream) 100%) !important;
  box-shadow:
    0 0 0 4px var(--ms-primary),
    0 0 60px rgba(var(--ms-gold-rgb), 0.4),
    0 25px 70px rgba(var(--ms-primary-rgb), 0.25),
    inset 0 0 40px rgba(var(--ms-gold-rgb), 0.1) !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: all 0.5s var(--transition) !important;
  animation: roshGlow 4s ease-in-out infinite !important;
}

@keyframes roshGlow {
  0%, 100% {
    box-shadow:
      0 0 0 4px var(--ms-primary),
      0 0 60px rgba(var(--ms-gold-rgb), 0.4),
      0 25px 70px rgba(var(--ms-primary-rgb), 0.25),
      inset 0 0 40px rgba(var(--ms-gold-rgb), 0.1);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--ms-primary),
      0 0 80px rgba(var(--ms-gold-rgb), 0.5),
      0 30px 80px rgba(var(--ms-primary-rgb), 0.3),
      inset 0 0 50px rgba(var(--ms-gold-rgb), 0.15);
  }
}

.rosh-yeshiva-photo:hover {
  transform: scale(1.05) !important;
  border-color: var(--ms-gold-dark) !important;
}

/* --------------------------------------------------------------------------
   Rosh Yeshiva Name & Title
   -------------------------------------------------------------------------- */
.rosh-yeshiva-name {
  position: relative !important;
  margin-top: 30px !important;
  color: var(--ms-primary) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.rosh-yeshiva-name::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ms-gold), transparent);
}

.rosh-yeshiva-title {
  margin-top: 20px !important;
  color: var(--ms-gold-dark) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   STAFF GRID SECTION
   ========================================================================== */

.staff-grid-section {
  margin-top: 60px !important;
}

.staff-grid-title {
  margin-bottom: 15px !important;
  color: var(--ms-primary) !important;
  font-size: clamp(1.5rem, 4vw, 2.375rem) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 2px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.staff-grid-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
}

.staff-grid-subtitle {
  max-width: 500px !important;
  margin: 0 auto 50px !important;
  color: rgba(var(--ms-primary-rgb), 0.6) !important;
  font-size: 15px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Staff Grid Layout
   -------------------------------------------------------------------------- */
.staff-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 50px 40px !important;
  justify-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* --------------------------------------------------------------------------
   Staff Divider
   -------------------------------------------------------------------------- */
.staff-divider {
  width: 60% !important;
  height: 1px !important;
  margin: 60px auto !important;
  border: none !important;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      rgba(var(--ms-gold-rgb), 0.5) 50%,
      transparent 100%
    ) !important;
}

/* ==========================================================================
   INDIVIDUAL STAFF CARDS
   ========================================================================== */

.staff-card {
  position: relative !important;
  text-align: center !important;
  transition: transform var(--transition-fast) !important;
  animation: staffCardReveal 0.7s ease-out backwards !important;
}

/* Staggered Animation Delays */
.staff-card:nth-child(1) { animation-delay: 0.1s !important; }
.staff-card:nth-child(2) { animation-delay: 0.2s !important; }
.staff-card:nth-child(3) { animation-delay: 0.3s !important; }
.staff-card:nth-child(4) { animation-delay: 0.4s !important; }
.staff-card:nth-child(5) { animation-delay: 0.5s !important; }
.staff-card:nth-child(6) { animation-delay: 0.6s !important; }

@keyframes staffCardReveal {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.staff-card:hover {
  transform: translateY(-10px) !important;
}

/* --------------------------------------------------------------------------
   Staff Photo
   -------------------------------------------------------------------------- */
.staff-photo {
  display: block !important;
  width: 220px !important;
  height: 220px !important;
  margin: 0 auto !important;
  border: 8px solid var(--ms-gold) !important;
  border-radius: 50% !important;
  background: var(--ms-white) !important;
  box-shadow:
    0 0 0 3px var(--ms-primary),
    0 15px 45px rgba(var(--ms-primary-rgb), 0.2),
    0 25px 65px rgba(var(--ms-gold-rgb), 0.15) !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: all var(--transition) !important;
}

.staff-photo:hover {
  transform: scale(1.08) rotate(3deg) !important;
  border-color: var(--ms-gold-dark) !important;
  box-shadow:
    0 0 0 4px var(--ms-primary),
    0 20px 55px rgba(var(--ms-primary-rgb), 0.25),
    0 30px 75px rgba(var(--ms-gold-rgb), 0.2) !important;
}

/* --------------------------------------------------------------------------
   Staff Name
   -------------------------------------------------------------------------- */
.staff-name {
  position: relative !important;
  margin-top: 25px !important;
  color: var(--ms-primary) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  transition: all var(--transition-fast) !important;
}

.staff-card:hover .staff-name {
  color: var(--ms-gold-dark) !important;
}

/* Animated Underline */
.staff-name::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
  transition: width var(--transition-fast);
}

.staff-card:hover .staff-name::after {
  width: 70%;
}

/* --------------------------------------------------------------------------
   Staff Role
   -------------------------------------------------------------------------- */
.staff-role {
  margin-top: 10px !important;
  color: rgba(var(--ms-primary-rgb), 0.6) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

/* ==========================================================================
   RESPONSIVE - LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1400px) {
  .staff-content-wrapper {
    width: 75% !important;
    max-width: 1300px !important;
  }

  .staff-grid {
    gap: 60px 50px !important;
  }

  .staff-photo {
    width: 240px !important;
    height: 240px !important;
  }

  .rosh-yeshiva-photo {
    width: 360px !important;
    height: 360px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .staff-hero {
    min-height: 45vh !important;
  }

  .staff-hero-inner {
    padding: 55px 35px !important;
  }

  .staff-section {
    padding: 70px 25px 90px !important;
  }

  .staff-content-wrapper {
    width: 90% !important;
  }

  .staff-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 45px 35px !important;
  }

  .staff-photo {
    width: 200px !important;
    height: 200px !important;
  }

  .rosh-yeshiva-photo {
    width: 280px !important;
    height: 280px !important;
  }

  .rosh-yeshiva-section {
    margin-bottom: 60px !important;
    padding: 40px 30px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .staff-hero {
    min-height: 40vh !important;
  }

  .staff-hero-inner {
    padding: 45px 22px !important;
  }

  .staff-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.625rem) !important;
    letter-spacing: 3px !important;
  }

  .staff-hero-title::after {
    width: 160px !important;
    margin-top: 25px !important;
  }

  .staff-hero-subtitle {
    margin-top: 25px !important;
    font-size: 15px !important;
  }

  .staff-hero-badge {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 25px !important;
  }

  .staff-hero-badge svg {
    width: 32px !important;
    height: 32px !important;
  }

  .staff-hero-decoration::before,
  .staff-hero-decoration::after {
    display: none !important;
  }

  .staff-section {
    padding: 55px 15px 75px !important;
  }

  .staff-heading {
    font-size: clamp(1.375rem, 6vw, 2rem) !important;
  }

  .staff-content-wrapper {
    width: 95% !important;
  }

  .staff-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .staff-photo {
    width: 220px !important;
    height: 220px !important;
    border-width: 6px !important;
  }

  .staff-photo:hover {
    transform: scale(1.05) rotate(0deg) !important;
  }

  .rosh-yeshiva-photo {
    width: 240px !important;
    height: 240px !important;
    border-width: 8px !important;
  }

  .rosh-yeshiva-section {
    margin-bottom: 50px !important;
    padding: 35px 20px !important;
    border-radius: 20px !important;
  }

  .rosh-section-title,
  .staff-grid-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
  }

  .rosh-yeshiva-name {
    font-size: 22px !important;
  }

  .staff-name {
    font-size: 16px !important;
  }

  .rosh-yeshiva-card::before {
    font-size: 28px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .staff-hero {
    min-height: 35vh !important;
  }

  .staff-hero-title {
    font-size: 26px !important;
    letter-spacing: 2px !important;
  }

  .staff-hero-subtitle {
    font-size: 14px !important;
  }

  .staff-hero-badge {
    width: 55px !important;
    height: 55px !important;
  }

  .staff-section {
    padding: 45px 10px 65px !important;
  }

  .staff-content-wrapper {
    width: 98% !important;
  }

  .staff-photo {
    width: 180px !important;
    height: 180px !important;
    border-width: 5px !important;
  }

  .rosh-yeshiva-photo {
    width: 200px !important;
    height: 200px !important;
    border-width: 6px !important;
  }

  .rosh-yeshiva-section {
    padding: 30px 15px !important;
  }

  .rosh-yeshiva-name {
    font-size: 20px !important;
  }

  .staff-name {
    margin-top: 20px !important;
    font-size: 15px !important;
  }

  .rosh-yeshiva-card::before {
    margin-bottom: 15px !important;
    font-size: 24px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.staff-photo:focus,
.rosh-yeshiva-photo:focus {
  outline: 4px solid var(--ms-gold) !important;
  outline-offset: 6px !important;
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .staff-hero::after,
  .staff-hero-badge,
  .staff-hero-title,
  .rosh-yeshiva-photo,
  .rosh-yeshiva-card::before,
  .staff-card,
  .staff-photo,
  .staff-name::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .staff-hero {
    min-height: auto !important;
    background: var(--ms-primary) !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .staff-hero::before,
  .staff-hero::after,
  .staff-hero-decoration {
    display: none !important;
  }

  .staff-photo,
  .rosh-yeshiva-photo {
    border: 2px solid #ccc !important;
    box-shadow: none !important;
  }

  .staff-card:hover,
  .staff-photo:hover,
  .rosh-yeshiva-photo:hover {
    transform: none !important;
  }
}
/* ==========================================================================
   STAFF PAGE HERO SECTION
   Premium hero styling adapted from Cover Block
   ========================================================================== */

/* --------------------------------------------------------------------------
   Main Hero Container
   -------------------------------------------------------------------------- */
.staff-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 55vh !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Background Image
   -------------------------------------------------------------------------- */
.staff-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.05);
  filter: brightness(0.9) contrast(1.1) saturate(1.2) !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* --------------------------------------------------------------------------
   Dark Blue Gradient Overlay
   -------------------------------------------------------------------------- */
.staff-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(135deg,
      rgba(2, 35, 66, 0.92) 0%,
      rgba(10, 58, 92, 0.85) 50%,
      rgba(2, 35, 66, 0.9) 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   Animated Glow Overlay
   -------------------------------------------------------------------------- */
.staff-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(var(--ms-gold-rgb), 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(var(--ms-gold-rgb), 0.1) 0%,
      transparent 50%
    );
  animation: staffHeroGlowPulse 6s ease-in-out infinite;
}

@keyframes staffHeroGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Hero Inner Container
   -------------------------------------------------------------------------- */
.staff-hero-inner {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1200px !important;
  padding: 70px 40px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Decorative Side Lines with Badge
   -------------------------------------------------------------------------- */
.staff-hero-decoration {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 30px !important;
}

.staff-hero-decoration::before,
.staff-hero-decoration::after {
  content: "";
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ms-gold-rgb), 0.7), transparent);
}

.staff-hero-decoration::before {
  margin-right: 25px;
}

.staff-hero-decoration::after {
  margin-left: 25px;
}

/* --------------------------------------------------------------------------
   Hero Badge/Icon
   -------------------------------------------------------------------------- */
.staff-hero-badge {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 80px !important;
  height: 80px !important;
  border: 3px solid rgba(var(--ms-gold-rgb), 0.6) !important;
  border-radius: 50% !important;
  background: rgba(var(--ms-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.3),
    inset 0 0 20px rgba(var(--ms-gold-rgb), 0.1) !important;
  animation: staffBadgePulse 3s ease-in-out infinite !important;
}

@keyframes staffBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(var(--ms-gold-rgb), 0.3),
      inset 0 0 20px rgba(var(--ms-gold-rgb), 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 50px rgba(var(--ms-gold-rgb), 0.45),
      inset 0 0 30px rgba(var(--ms-gold-rgb), 0.15);
    transform: scale(1.05);
  }
}

.staff-hero-badge svg,
.staff-hero-badge img {
  width: 40px !important;
  height: 40px !important;
  color: var(--ms-gold) !important;
  fill: var(--ms-gold) !important;
  filter: drop-shadow(0 0 12px rgba(var(--ms-gold-rgb), 0.6)) !important;
}

/* --------------------------------------------------------------------------
   Hero Title - Gold with Glow Animation
   -------------------------------------------------------------------------- */
.staff-hero-title {
  margin-bottom: 0 !important;
  color: var(--ms-gold) !important;
  font-size: clamp(2rem, 7vw, 4rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 30px rgba(var(--ms-gold-rgb), 0.6),
    0 0 60px rgba(var(--ms-gold-rgb), 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5) !important;
  animation: staffTitleGlow 3s ease-in-out infinite !important;
}

@keyframes staffTitleGlow {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(var(--ms-gold-rgb), 0.6),
      0 0 60px rgba(var(--ms-gold-rgb), 0.4),
      0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 40px rgba(var(--ms-gold-rgb), 0.8),
      0 0 80px rgba(var(--ms-gold-rgb), 0.5),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
}

/* Decorative line under title */
.staff-hero-title::after {
  content: "";
  display: block;
  width: 200px;
  height: 3px;
  margin: 30px auto 0;
  border-radius: 2px;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 20%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 80%,
      transparent 100%
    );
  animation: titleLineShimmer 3s ease-in-out infinite;
}

@keyframes titleLineShimmer {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Hero Subtitle
   -------------------------------------------------------------------------- */
.staff-hero-subtitle {
  max-width: 650px !important;
  margin: 35px auto 0 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: clamp(0.9375rem, 2.5vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4) !important;
}

/* --------------------------------------------------------------------------
   Bottom Transition/Wave
   -------------------------------------------------------------------------- */
.staff-hero-bottom {
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5 !important;
  height: 80px !important;
  background: 
    linear-gradient(180deg, 
      transparent 0%, 
      rgba(250, 248, 245, 0.3) 40%,
      var(--ms-cream) 100%
    ) !important;
}

/* ==========================================================================
   RESPONSIVE - TABLET
   ========================================================================== */

@media (max-width: 1024px) {
  .staff-hero {
    min-height: 45vh !important;
  }

  .staff-hero-inner {
    padding: 55px 35px !important;
  }

  .staff-hero-decoration::before,
  .staff-hero-decoration::after {
    width: 70px;
  }

  .staff-hero-badge {
    width: 70px !important;
    height: 70px !important;
  }

  .staff-hero-badge svg,
  .staff-hero-badge img {
    width: 35px !important;
    height: 35px !important;
  }

  .staff-hero-title::after {
    width: 160px;
    margin-top: 25px;
  }
}

/* ==========================================================================
   RESPONSIVE - MOBILE
   ========================================================================== */

@media (max-width: 768px) {
  .staff-hero {
    min-height: 40vh !important;
  }

  .staff-hero-inner {
    padding: 45px 22px !important;
  }

  .staff-hero-title {
    font-size: clamp(1.75rem, 8vw, 2.625rem) !important;
    letter-spacing: 3px !important;
  }

  .staff-hero-title::after {
    width: 140px !important;
    margin-top: 22px !important;
  }

  .staff-hero-subtitle {
    margin-top: 25px !important;
    font-size: 15px !important;
  }

  .staff-hero-badge {
    width: 65px !important;
    height: 65px !important;
    margin-bottom: 25px !important;
  }

  .staff-hero-badge svg,
  .staff-hero-badge img {
    width: 32px !important;
    height: 32px !important;
  }

  .staff-hero-decoration::before,
  .staff-hero-decoration::after {
    width: 50px;
  }

  .staff-hero-bottom {
    height: 60px !important;
  }
}

/* ==========================================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {
  .staff-hero {
    min-height: 35vh !important;
  }

  .staff-hero-inner {
    padding: 35px 15px !important;
  }

  .staff-hero-title {
    font-size: 26px !important;
    letter-spacing: 2px !important;
  }

  .staff-hero-title::after {
    width: 100px !important;
    margin-top: 18px !important;
  }

  .staff-hero-subtitle {
    font-size: 14px !important;
    margin-top: 20px !important;
  }

  .staff-hero-badge {
    width: 55px !important;
    height: 55px !important;
    margin-bottom: 20px !important;
  }

  .staff-hero-badge svg,
  .staff-hero-badge img {
    width: 26px !important;
    height: 26px !important;
  }

  .staff-hero-decoration::before,
  .staff-hero-decoration::after {
    display: none !important;
  }

  .staff-hero-bottom {
    height: 40px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .staff-hero::after,
  .staff-hero-badge,
  .staff-hero-title,
  .staff-hero-title::after {
    animation: none !important;
  }
}
/* ==========================================================================
   HERO SECTION - WordPress Cover Block
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Custom Properties
   -------------------------------------------------------------------------- */
:root {
  --hero-gold-rgb: 240, 211, 151;
  --hero-primary-dark: rgba(2, 35, 66, 0.92);
  --hero-primary-mid: rgba(10, 58, 92, 0.85);
}

/* --------------------------------------------------------------------------
   Main Cover Block Container
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Background Overlay - Dark Blue Gradient
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light > .wp-block-cover__background {
  background: 
    linear-gradient(135deg,
      var(--hero-primary-dark) 0%,
      var(--hero-primary-mid) 50%,
      rgba(2, 35, 66, 0.9) 100%
    ) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Animated Glow Overlay
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 30% 20%,
      rgba(var(--hero-gold-rgb), 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(var(--hero-gold-rgb), 0.1) 0%,
      transparent 50%
    );
  animation: heroGlowPulse 6s ease-in-out infinite;
}

@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Background Image Enhancement
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light > .wp-block-cover__image-background {
  transform: scale(1.05);
  filter: brightness(0.9) contrast(1.1) saturate(1.2) !important;
}

/* --------------------------------------------------------------------------
   Inner Content Container
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light > .wp-block-cover__inner-container {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1200px !important;
  padding: 40px 20px !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   Hero Title - Gold with Glow
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .has-022342-color {
  margin-bottom: 0 !important;
  color: var(--ms-gold) !important;
  font-size: clamp(2.25rem, 8vw, 5rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 0 30px rgba(var(--hero-gold-rgb), 0.6),
    0 0 60px rgba(var(--hero-gold-rgb), 0.4),
    0 4px 15px rgba(0, 0, 0, 0.5) !important;
  animation: heroTitleGlow 3s ease-in-out infinite !important;
}

@keyframes heroTitleGlow {
  0%, 100% {
    text-shadow:
      0 0 30px rgba(var(--hero-gold-rgb), 0.6),
      0 0 60px rgba(var(--hero-gold-rgb), 0.4),
      0 4px 15px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 40px rgba(var(--hero-gold-rgb), 0.8),
      0 0 80px rgba(var(--hero-gold-rgb), 0.5),
      0 4px 20px rgba(0, 0, 0, 0.6);
  }
}

/* Decorative line under title */
.wp-block-cover.is-light .has-022342-color::after {
  content: "";
  display: block;
  width: 180px;
  height: 3px;
  margin: 25px auto 0;
  border-radius: 2px;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 20%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 80%,
      transparent 100%
    );
}

/* --------------------------------------------------------------------------
   Spacer Adjustment
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .wp-block-spacer {
  height: 80px !important;
}

/* ==========================================================================
   HERO BUTTONS - Premium Styling
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button Container
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .wp-block-buttons {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  margin-top: 20px !important;
}

/* --------------------------------------------------------------------------
   Button Wrapper
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .wp-block-button {
  transition: transform 0.3s ease !important;
}

.wp-block-cover.is-light .wp-block-button:hover {
  transform: translateY(-5px) !important;
}

/* --------------------------------------------------------------------------
   All Buttons - Base Styling
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .wp-block-button__link {
  min-width: 260px !important;
  padding: 22px 50px !important;
  border-radius: 50px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* --------------------------------------------------------------------------
   Primary Button (Apply) - Gold Filled
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .wp-block-button:first-child .wp-block-button__link {
  background: 
    linear-gradient(135deg,
      var(--ms-gold) 0%,
      var(--ms-gold-light) 50%,
      var(--ms-gold) 100%
    ) !important;
  background-size: 200% 200% !important;
  color: var(--ms-primary) !important;
  border: 3px solid var(--ms-gold) !important;
  box-shadow:
    0 0 25px rgba(var(--hero-gold-rgb), 0.4),
    0 10px 30px rgba(var(--hero-gold-rgb), 0.3) !important;
  animation: goldShimmer 3s ease infinite !important;
}

@keyframes goldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.wp-block-cover.is-light .wp-block-button:first-child .wp-block-button__link:hover {
  transform: scale(1.05) !important;
  box-shadow:
    0 0 35px rgba(var(--hero-gold-rgb), 0.6),
    0 15px 40px rgba(var(--hero-gold-rgb), 0.4) !important;
}

/* --------------------------------------------------------------------------
   Secondary Button (Donate) - Glass/Outline Style
   -------------------------------------------------------------------------- */
.wp-block-cover.is-light .wp-block-button:last-child .wp-block-button__link {
  background: rgba(var(--hero-gold-rgb), 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: var(--ms-gold) !important;
  border: 2px solid rgba(var(--hero-gold-rgb), 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.wp-block-cover.is-light .wp-block-button:last-child .wp-block-button__link:hover {
  background: var(--ms-gold) !important;
  color: var(--ms-primary) !important;
  border-color: var(--ms-gold) !important;
  transform: scale(1.05) !important;
  box-shadow:
    0 0 30px rgba(var(--hero-gold-rgb), 0.5),
    0 15px 35px rgba(var(--hero-gold-rgb), 0.3) !important;
}

/* ==========================================================================
   PARNAS SECTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container Block
   -------------------------------------------------------------------------- */
.uagb-block-ca2249f0 {
  padding: 80px 30px 100px !important;
  background: 
    linear-gradient(180deg,
      #faf8f5 0%,
      #ffffff 30%,
      #ffffff 70%,
      #faf8f5 100%
    ) !important;
}

.uagb-block-ca2249f0 .uagb-container-inner-blocks-wrap {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   Premium Separator
   -------------------------------------------------------------------------- */
.uagb-block-ca2249f0 .wp-block-separator {
  max-width: 400px !important;
  height: 3px !important;
  margin: 0 auto 50px !important;
  border: none !important;
  opacity: 1 !important;
  background: 
    linear-gradient(90deg,
      transparent 0%,
      var(--ms-gold) 20%,
      var(--ms-primary) 50%,
      var(--ms-gold) 80%,
      transparent 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   Parnas Heading
   -------------------------------------------------------------------------- */
.uagb-block-ca2249f0 .wp-block-heading {
  position: relative !important;
  margin-bottom: 60px !important;
  padding-bottom: 25px !important;
  color: var(--ms-primary) !important;
  font-size: clamp(1.625rem, 5vw, 3rem) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

/* Decorative line under heading */
.uagb-block-ca2249f0 .wp-block-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ms-gold), var(--ms-gold-dark));
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  .wp-block-cover.is-light {
    min-height: 80vh !important;
  }

  .wp-block-cover.is-light > .wp-block-cover__inner-container {
    padding: 30px 15px !important;
  }

  .wp-block-cover.is-light .has-022342-color {
    letter-spacing: 2px !important;
  }

  .wp-block-cover.is-light .has-022342-color::after {
    width: 120px;
    margin-top: 20px;
  }

  .wp-block-cover.is-light .wp-block-buttons {
    gap: 20px !important;
  }

  .wp-block-cover.is-light .wp-block-button__link {
    min-width: 220px !important;
    padding: 18px 40px !important;
    font-size: 15px !important;
    letter-spacing: 2px !important;
  }

  .uagb-block-ca2249f0 {
    padding: 60px 20px 80px !important;
  }
}

@media (max-width: 480px) {
  .wp-block-cover.is-light {
    min-height: 70vh !important;
  }

  .wp-block-cover.is-light .has-022342-color {
    letter-spacing: 1px !important;
  }

  .wp-block-cover.is-light .wp-block-button__link {
    min-width: 200px !important;
    padding: 16px 30px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .wp-block-cover.is-light::before,
  .wp-block-cover.is-light .has-022342-color,
  .wp-block-cover.is-light .wp-block-button:first-child .wp-block-button__link {
    animation: none !important;
  }
}