/* ==========================================================================
   ICAI DOHA CHAPTER - UNIFIED GLOBAL STYLESHEET
   All individual CSS files have been bundled here safely.
   ========================================================================== */


/* ==================== SOURCE: style.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - PREMIUM STYLESHEET
   Exact pixel-perfect replica of Home Doha (1).png
   ========================================================================== */

/* --- CSS Variables / Design System --- */
:root {
  --primary-maroon: #5e0b2b;
  --primary-maroon-dark: #47061f;
  --primary-maroon-light: #7a123a;
  --card-dark-maroon: #4d0521;
  --accent-gold: #c5a059;
  --accent-gold-light: #e6ca85;
  --accent-gold-dark: #a8833e;
  --badge-gold-bg: #fdf5eb;
  --badge-gold-text: #ba8c46;
  --cream-card-bg: #fbf7f2;

  --text-dark: #1f1f1f;
  --text-body: #595959;
  --text-light: #8c8c8c;
  --text-white: #ffffff;
  --text-gold: #dfbe78;

  --bg-white: #ffffff;
  --bg-offwhite: #faf8f5;
  --border-light: #ebe6df;
  --border-maroon: rgba(94, 11, 43, 0.15);

  --font-serif: 'Marcellus', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading-alt: 'Cinzel', serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 16px 40px rgba(94, 11, 43, 0.12);

  --transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
}

/* --- Base & Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background-color: var(--bg-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
}

ul {
  list-style: none;
}

/* --- Container Utility --- */
.container {
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.text-center {
  text-align: center;
}

/* --- Section Headers & Tags --- */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 14px;
}

.section-tag.light {
  color: var(--accent-gold-light);
}

.section-tag.gold-tag {
  color: var(--accent-gold);
}

.section-tag .diamond {
  font-size: 0.7rem;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1.22;
  color: var(--primary-maroon);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* --- Interactive Card Hover Lift (GPU Optimized) --- */
.card-hover {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.card-hover:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--shadow-lg);
}

/* --- Hardware-Accelerated Scroll Reveal (60 FPS) --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.reveal-delay-1 {
  transition-delay: 0.08s;
}

.reveal-delay-2 {
  transition-delay: 0.16s;
}

.reveal-delay-3 {
  transition-delay: 0.24s;
}

.reveal-delay-4 {
  transition-delay: 0.32s;
}

/* ==========================================================================
   1. TOP UTILITY HEADER
   ========================================================================== */
.top-header {
  background-color: var(--bg-white);
  height: 64px;
  min-height: 64px;
  padding: 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 100;
}

.top-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

/* App badges (Figma: Group 2085666163, width: 86px, height: 40px, top: 12px) */
.header-apps {
  display: flex;
  align-items: center;
  width: 86px;
  height: 40px;
  gap: 6px;
}

.app-badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: transform 0.2s ease;
}

.app-badge-link:hover {
  transform: scale(1.08);
}

.app-badge-img {
  height: 40px;
  width: 40px;
  object-fit: contain;
}

/* Center Logo */
.header-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.main-logo-img {
  height: 48px;
  max-height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* Right Actions Group */
.header-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions {
  display: flex;
  align-items: center;
}

/* Sign In Button (Figma: Frame 72, width: 115px, height: 52px, background: #6D173A, border-radius: 40px) */
.btn-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 115px;
  height: 52px;
  background: #6D173A;
  color: var(--text-white);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 40px;
  box-shadow: 0 4px 14px rgba(109, 23, 58, 0.25);
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn-signin:hover {
  background-color: #550f2c;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 23, 58, 0.4);
}

.btn-signin .user-icon {
  font-size: 1rem;
}

/* ==========================================================================
   USER ACCOUNT DROPDOWN (LOGGED IN STATE)
   ========================================================================== */
.user-account-dropdown {
  position: relative;
  display: inline-block;
  z-index: 1050;
}

.btn-user-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 4px 14px 4px 6px;
  background: #ffffff;
  border: 1.5px solid rgba(109, 23, 58, 0.25);
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.25s ease;
  color: #1B0009;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.btn-user-account:hover,
.user-account-dropdown.is-open .btn-user-account {
  border-color: #6D173A;
  box-shadow: 0 4px 14px rgba(109, 23, 58, 0.18);
  background: #FFF8F9;
}

.user-avatar-mini {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0e6eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid #6D173A;
}

.user-avatar-mini img {
  width: 100% !important;
  height: 100% !important;
  max-width: 36px !important;
  max-height: 36px !important;
  object-fit: cover !important;
  display: block;
}

.user-name-text {
  font-weight: 600;
  color: #1B0009;
  font-size: 0.92rem;
  white-space: nowrap;
}

.user-chevron {
  font-size: 0.75rem;
  color: #6D173A;
  transition: transform 0.25s ease;
  margin-left: 2px;
}

.user-account-dropdown.is-open .user-chevron {
  transform: rotate(180deg);
}

.user-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(109, 23, 58, 0.1);
  padding: 8px 0;
  display: none;
  z-index: 1200;
  animation: dropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.user-account-dropdown.is-open .user-dropdown-menu {
  display: block;
}

@keyframes dropdownPop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-dropdown-header {
  padding: 12px 18px;
  background: #FFF8F9;
  border-bottom: 1px solid rgba(109, 23, 58, 0.08);
}

.user-dropdown-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1B0009;
  line-height: 1.2;
}

.user-dropdown-id {
  font-size: 0.78rem;
  color: #71717A;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.badge-status-active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  background: #EBF3FF;
  color: #2563EB;
  border-radius: 14px;
  letter-spacing: 0.01em;
}

.badge-status-active::before {
  content: '';
  display: inline-block;
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
  background-color: #2563EB;
}

/* Membership status colours for the header dropdown badge (soft tints) */
.badge-status-active.is-active { background: #ECFBF1; color: #22A94E; }
.badge-status-active.is-active::before { background-color: #22A94E; }

.badge-status-active.is-expired { background: #FFF6E9; color: #E0930A; }
.badge-status-active.is-expired::before { background-color: #E0930A; }

.badge-status-active.is-disabled,
.badge-status-active.is-inactive { background: #FDECEC; color: #E24C4C; }
.badge-status-active.is-disabled::before,
.badge-status-active.is-inactive::before { background-color: #E24C4C; }

.user-dropdown-divider {
  height: 1px;
  background: #F1F1F4;
  margin: 6px 0;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s ease;
}

.user-dropdown-item i {
  font-size: 0.95rem;
  color: #6D173A;
  width: 18px;
  text-align: center;
  transition: transform 0.2s ease;
}

.user-dropdown-item:hover {
  background: #FDF2F4;
  color: #6D173A;
}

.user-dropdown-item:hover i {
  transform: scale(1.15);
}

.user-dropdown-item.logout-item {
  color: #DC2626;
}

.user-dropdown-item.logout-item i {
  color: #DC2626;
}

.user-dropdown-item.logout-item:hover {
  background: #FEF2F2;
  color: #B91C1C;
}

/* Mobile Toggle Button */
.mobile-menu-toggle {
  display: none;
  font-size: 1.35rem;
  color: #6D173A;
  background: rgba(109, 23, 58, 0.07);
  border: 1px solid rgba(109, 23, 58, 0.15);
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: var(--transition);
}

.mobile-menu-toggle:hover {
  background: var(--primary-maroon);
  color: #ffffff;
  border-color: var(--primary-maroon);
}

/* ==========================================================================
   2. MAIN NAVIGATION BAR
   ========================================================================== */
.main-navbar {
  background-color: var(--primary-maroon);
  position: relative;
  z-index: 99;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  width: 100%;
}

.main-navbar .navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  max-width: 100%;
  width: 100%;
  padding-left: clamp(24px, 4vw, 64px);
  padding-right: clamp(24px, 4vw, 64px);
  box-sizing: border-box;
}

.nav-motif {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.95;
  flex-shrink: 0;
}

.motif-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.3s ease;
  will-change: transform, opacity;
}

.motif-icon-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.motif-item:hover {
  transform: translateY(-3px) scale(1.15);
  filter: drop-shadow(0 4px 10px rgba(235, 197, 150, 0.5));
}

/* Left Cultural Motif: Slide-in from Left one-by-one */
@keyframes motifSlideInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-32px, 0, 0) scale(0.75);
  }

  65% {
    opacity: 1;
    transform: translate3d(4px, 0, 0) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.motif-left .motif-item {
  opacity: 0;
  animation: motifSlideInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--motif-delay, 0s);
}

/* Right Cultural Motif: Slide-in from Right one-by-one */
@keyframes motifSlideInRight {
  0% {
    opacity: 0;
    transform: translate3d(32px, 0, 0) scale(0.75);
  }

  65% {
    opacity: 1;
    transform: translate3d(-4px, 0, 0) scale(1.06);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.motif-right .motif-item {
  opacity: 0;
  animation: motifSlideInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--motif-delay, 0s);
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 auto;
}

.nav-item {
  position: relative;
}

.nav-link {
  color: #f7e8ee;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
}

.nav-link .plus {
  font-size: 0.85rem;
  opacity: 0.8;
  font-weight: 400;
}

.nav-link:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--accent-gold-light);
  transition: all 0.25s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 100%;
}

/* --- Navigation Dropdown Menus --- */
.nav-item.dropdown {
  position: relative;
}

/* Invisible hover bridge spanning gap between nav link and dropdown menu so menu stays open on mouse move */
.nav-item.dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 25px;
  background: transparent;
  display: block;
  z-index: 999;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: linear-gradient(180deg, #4d0521 0%, #300113 100%);
  border: 1px solid rgba(230, 202, 133, 0.3);
  border-radius: 14px;
  padding: 10px 0;
  min-width: 220px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #4d0521;
  border-left: 1px solid rgba(230, 202, 133, 0.3);
  border-top: 1px solid rgba(230, 202, 133, 0.3);
}

.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: #f7e8ee;
  font-family: 'Albert Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.dropdown-item i {
  font-size: 11px;
  color: #E6CA85;
  transition: transform 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(230, 202, 133, 0.14);
  color: #ffffff;
  padding-left: 24px;
}

.dropdown-item:hover i {
  transform: translateX(3px);
}

.nav-mobile-extras {
  display: none;
}

.mobile-drawer-apps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 0 8px 0;
}

.mobile-apps-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-gold-light);
  font-weight: 600;
}

.mobile-apps-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.mobile-apps-badges .app-badge-img {
  height: 36px;
  width: auto;
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero-section {
  width: 100%;
  height: 964px;
  background-color: var(--bg-white);
  padding: 0;
  position: relative;
}

.hero-image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 964px;
  object-fit: cover;
  display: block;
}

/* Figma Group 1561301841: Carousel 72px Bars */
.hero-indicators {
  position: absolute;
  top: 916px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 232px;
  height: 4px;
  z-index: 10;
}

.hero-indicator-bar {
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 2px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hero-indicator-bar.active {
  background: #FFFFFF;
}

/* ==========================================================================
   4. ABOUT US SECTION
   ========================================================================== */
@media (min-width: 1320px) {

  .about-section .container,
  .mission-vision-section .container {
    padding-left: 0;
    padding-right: 0;
  }
}

.about-section {
  padding: 80px 0;
  background-color: var(--bg-white);
}

.about-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
}

.about-content {
  width: 536px;
  padding-right: 0;
  border-right: none;
}

.about-content .section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #DAB580 0%, #8E590C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.about-content .section-title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #580024;
  margin-top: 12px;
  margin-bottom: 24px;
}

.about-text {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D;
  margin-bottom: 28px;
  text-align: left;
}

.about-action {
  margin-top: 32px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 160px;
  height: 60px;
  background: #580024;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  border-radius: 40px;
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.2);
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

.btn-primary i {
  font-size: 0.85rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary:hover i {
  transform: translateX(6px);
}

/* About Gallery Mosaic (Figma Group 2085665618: 648px x 567px) */
.about-gallery {
  width: 648px;
  height: 567px;
  display: grid;
  grid-template-columns: 312px 312px;
  gap: 24px;
}

.about-gallery .gallery-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-gallery .col-left {
  margin-top: 55px;
}

.about-gallery .col-right {
  margin-top: 0px;
}

.about-card {
  width: 312px;
  height: 244px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--bg-white);
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.about-card:hover .about-img {
  transform: scale(1.04);
}

/* Vertical Divider Line 49 */
.about-gallery-divider {
  position: absolute;
  top: -80px;
  bottom: -80px;
  left: 560px;
  width: 1px;
  background-color: #E4E4E4;
  margin: 0;
}

/* ==========================================================================
   5. MISSION & VISION SECTION
   ========================================================================== */
.mission-vision-section {
  padding: 0;
  background-color: var(--bg-white);
  border-top: 1px solid #E4E4E4;
  border-bottom: 1px solid #E4E4E4;
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 405px 447px 420px;
  justify-content: space-between;
  align-items: flex-start;
}

.mv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 0;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-card:hover {
  transform: translateY(-4px);
}

.mv-icon-wrap {
  width: 60px;
  height: 60px;
  margin-bottom: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.35s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Mission Icon Hover: Rocket lift & tilt */
.mission-card:hover .mv-icon {
  transform: translateY(-6px) rotate(-5deg) scale(1.15);
  filter: drop-shadow(0 6px 14px rgba(132, 18, 56, 0.28));
}

/* Vision Icon Hover: Radiant eye pulse & scale */
.vision-card:hover .mv-icon {
  transform: translateY(-4px) scale(1.16);
  filter: drop-shadow(0 6px 14px rgba(132, 18, 56, 0.28));
}

.mv-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 28px;
  line-height: 34px;
  font-weight: 400;
  color: #1B0009;
  margin-bottom: 20px;
  transition: color 0.3s ease;
}

.mv-card:hover .mv-title {
  color: #841238;
}

.mv-description {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D;
  margin-bottom: 24px;
  text-align: left;
}

.mv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
  color: #841238;
  transition: var(--transition);
}

.mv-link i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mv-link:hover {
  color: var(--primary-maroon-light);
}

.mv-card:hover .mv-link i {
  transform: translateX(8px);
}

.mv-center-card {
  width: 447px;
  height: 376px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mv-center-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.mv-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateZ(0);
}

.mv-center-card:hover .mv-img {
  transform: scale(1.05);
}

/* ==========================================================================
   6. SPONSORS SECTION
   ========================================================================== */
.sponsors-section {
  padding: 120px 0 70px 0;
  background-color: var(--bg-white);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.sponsors-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sponsor-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px solid #E4E4E4;
  padding-bottom: 16px;
  width: 100%;
  max-width: fit-content;
  margin-bottom: 45px;
  /* Allow the active tab to auto-scroll into the center when tabs overflow */
  overflow-x: auto;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE/Edge */
}
.sponsor-tabs::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.sponsor-tab { flex: 0 0 auto; white-space: nowrap; }

.sponsor-tab {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1B0009;
  padding: 6px 0;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  transition: var(--transition);
}

.sponsor-tab:hover {
  color: #580024;
}

.sponsor-tab.active {
  color: #580024;
  font-weight: 600;
}

.sponsor-tab.active::after {
  content: '';
  position: absolute;
  bottom: -17px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #580024;
  border-radius: 4px;
}

.sponsors-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 24px;
  flex-wrap: wrap;
}

.sponsor-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  height: 90px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.sponsor-item:last-child {
  border-right: none;
}

.sponsor-item:hover {
  transform: translateY(-4px);
}

.sponsor-logo {
  /* max-height: 60px; */
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(10%) contrast(105%);
  transition: filter 0.3s ease;
}

.sponsor-item:hover .sponsor-logo {
  filter: grayscale(0%) contrast(110%);
}

/* Container Wide Utility for High-Fidelity 1920 Sections */
.container-wide {
  width: 100%;
  max-width: 1709px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ==========================================================================
   7. STATS & CHAIRPERSON SECTION
   Direct Render of Group 2085666136.svg (100% Exact Master Figma Vector Match)
   ========================================================================== */
.stats-chairperson-section {
  position: relative;
  background-color: #580025;
  color: var(--text-white);
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.stats-svg-container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: block;
}

.stats-master-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chairperson-readmore-link {
  position: absolute;
  left: 57.35%;
  top: 91.8%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(0.75rem, 1.1vw, 1.05rem);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  z-index: 10;
  transition: color 0.25s ease;
}

.chairperson-readmore-link i {
  font-size: clamp(0.65rem, 0.9vw, 0.85rem);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chairperson-readmore-link:hover {
  color: #EBC596;
}

.chairperson-readmore-link:hover i {
  transform: translateX(6px);
}

/* --- Interactive Stats Circles Overlay (Figma Group 1561299827: 1128px x 300px) --- */
.stats-overlay-grid {
  position: absolute;
  top: 25.23%;
  left: 20.625%;
  width: 58.75%;
  height: 19.48%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}

.stat-circle-card {
  position: relative;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    background-color 0.35s ease,
    box-shadow 0.35s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.stat-circle-card:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: #EBC596;
  background-color: rgba(235, 197, 150, 0.12);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.4), 0 0 25px rgba(235, 197, 150, 0.35);
}

.stat-circle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  width: 100%;
  height: 100%;
}

/* Original Figma Icon Size (68px x 68px) */
.stat-icon-img {
  width: clamp(48px, 3.54vw, 68px);
  height: clamp(48px, 3.54vw, 68px);
  object-fit: contain;
  margin-bottom: clamp(6px, 0.65vw, 14px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-circle-card:hover .stat-icon-img {
  transform: scale(1.1);
}

.stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.6rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: clamp(2px, 0.35vw, 6px);
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(0.72rem, 0.9vw, 0.95rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.25;
  text-align: center;
  max-width: 160px;
}

/* --- Mobile Stats & Chairperson Card Presentation Base Styles --- */
.stats-mobile-wrapper {
  display: none;
  padding: 60px 0 70px 0;
  background: linear-gradient(180deg, #580025 0%, #42001c 100%);
  position: relative;
  overflow: hidden;
}

.stats-mobile-header {
  margin-bottom: 32px;
}

.stats-mobile-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.25;
  margin-top: 8px;
}

.stats-mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.stat-mobile-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(235, 197, 150, 0.2);
  border-radius: 20px;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.stat-mobile-card:hover {
  transform: translateY(-4px);
  border-color: #EBC596;
}

.stat-mobile-icon-wrap {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-mobile-icon-wrap .stat-icon-img {
  width: 38px;
  height: 38px;
  margin-bottom: 0;
}

.chairperson-mobile-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(235, 197, 150, 0.3);
  border-radius: 24px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.chairperson-mobile-avatar-wrap {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid #EBC596;
  margin: 0 auto 16px auto;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.chairperson-mobile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chairperson-mobile-badge {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EBC596;
  margin-bottom: 8px;
}

.chairperson-mobile-name {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.chairperson-mobile-role {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

.chairperson-mobile-quote {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 22px;
  font-style: italic;
}

.chairperson-mobile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #EBC596;
  color: #580025;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: var(--transition);
}

.chairperson-mobile-btn:hover {
  background-color: #ffffff;
  transform: translateY(-2px);
}

/* ==========================================================================
   8. CHAPTER'S EVENTS SECTION
   ========================================================================== */
.events-section {
  padding: 90px 0 70px 0;
  background-color: var(--bg-white);
}

.events-header {
  margin-bottom: 50px;
}

.events-filter-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.events-pill-switch {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 40px;
  padding: 5px;
  height: 60px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  gap: 16px;
}

.event-pill-btn {
  height: 50px;
  padding: 0 26px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #666666;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-pill-btn:not(.active):hover {
  background-color: rgba(109, 23, 58, 0.08);
  color: #6D173A;
  transform: translateY(-1px);
}

.event-pill-btn.active {
  background-color: #580024;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.3);
  cursor: default;
}

.event-pill-btn.active:hover {
  background-color: #580024 !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.3) !important;
}

/* Events Grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-items: center;
}

.event-card {
  background-color: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  border: 1px solid #E4E4E4;
  padding: 16px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 424px;
  height: 494px;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.event-img-wrap {
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.5s ease;
}

.event-card:hover .event-img {
  transform: scale(1.04);
}

.event-body {
  padding: 14px 4px 0 4px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-date-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background-color: #FFF6EA;
  color: #8E590C;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.event-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  color: #1B0009;
  margin-bottom: 14px;
  min-height: 58px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #4D4D4D;
  flex-wrap: wrap;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.meta-item i {
  color: #4D4D4D;
  font-size: 16px;
}

/* Line 8: Divider above View Event button */
.event-divider {
  width: 100%;
  height: 1px;
  background-color: #E4E4E4;
  margin: 0 0 16px 0;
}

.btn-event {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #580025;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
  height: 60px;
  padding: 0 20px;
  border-radius: 40px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  text-decoration: none;
}

.btn-event:hover {
  background-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.btn-event i {
  font-size: 16px;
  transition: transform 0.2s ease;
}

.btn-event:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   9. MEET OUR TEAM MEMBERS SECTION
   Exact Match to Group 1561302296.png (1318x834)
   ========================================================================== */
.team-section {
  padding: 70px 0 90px 0;
  background-color: var(--bg-white);
}

.team-container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}

.team-header {
  margin-bottom: 50px;
}

.gold-tag-subtle {
  color: #c59b6d;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.gold-tag-subtle .diamond {
  font-size: 0.65rem;
  color: #c59b6d;
}

.team-main-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 3.8rem;
  font-weight: 500;
  color: #580025;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.1;
}

.team-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.team-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.row-five {
  gap: 24px;
}

.row-three {
  gap: 40px;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 240px;
}

.team-avatar-wrap {
  width: 232px;
  height: 232px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
  margin-bottom: 14px;
  transition: transform 0.3s ease;
}

.team-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: none;
  box-shadow: none;
}

.team-card .team-avatar-wrap img{
      transition: transform 0.5s ease;
}
.team-card:hover .team-avatar-wrap img{
  transform: scale(1.1);
}
.team-card:hover .team-avatar-wrap {
  transform: translateY(0px);
}

/* Floating social bubbles matching Figma layout - Revealed on Hover */
.social-bubbles {
  position: absolute;
  right: -10px;
  bottom: 12px;
  width: 80px;
  height: 80px;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.65) translateY(10px);
  transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    visibility 0.35s ease;
}

.team-card:hover .social-bubbles {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
}

.social-bubble {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: auto;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  text-decoration: none;
  padding: 0;
}

.social-bubble i {
  color: #FFFFFF;
}

.social-bubble.fb {
  top: 0px;
  right: 0px;
  z-index: 8;
  background: #1877F2;
}

.social-bubble.ln {
  bottom: 0px;
  right: 12px;
  z-index: 9;
  background: #0A66C2;
}

.social-icon-img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
  border-radius: 50%;
}

.social-bubble:hover {
  transform: scale(1.15);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.social-bubble.fb:hover,
.social-bubble.ln:hover {
  background: transparent;
}

.member-name {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: #181818;
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.member-role {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: #666666;
  font-weight: 400;
}

/* ==========================================================================
   10. VIDEO SHOWCASE SECTION
   ========================================================================== */
.video-showcase-section {
  padding: 40px 0 80px 0;
  background-color: var(--bg-white);
}

.video-showcase-card {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.video-bg-img {
  width: 100%;
  height: auto;
  max-height: 580px;
  object-fit: cover;
  display: block;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
}

.play-btn {
  position: relative;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-circle {
  width: 76px;
  height: 76px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.play-circle i {
  color: var(--primary-maroon);
  font-size: 1.6rem;
  margin-left: 4px;
  transition: color 0.3s ease;
}

.play-btn:hover .play-circle {
  transform: scale(1.1);
  background-color: var(--primary-maroon);
}

.play-btn:hover .play-circle i {
  color: #ffffff;
}

.play-ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  animation: playPulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
  z-index: 1;
}

@keyframes playPulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ==========================================================================
   11. OUR JOURNEY IN PICTURES (GALLERY)
   ========================================================================== */
.gallery-section {
  padding: 60px 0 80px 0;
  background-color: var(--bg-white);
}

.gallery-header {
  margin-bottom: 45px;
}

.gallery-subtitle {
  max-width: 680px;
  margin: 0 auto;
  font-size: 0.94rem;
  color: #666666;
  line-height: 1.6;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.35fr 1.75fr 1.15fr 0.95fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 40px;
}

.gallery-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  background-color: #f0f0f0;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-img {
  transform: scale(1.06);
}

.gallery-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(94, 11, 43, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-hover-overlay i {
  color: #ffffff;
  font-size: 1.5rem;
}

.gallery-item:hover .gallery-hover-overlay {
  opacity: 1;
}

/* Height tuning for fluid gallery layout */
.col-1 .gallery-item:first-child {
  height: 180px;
}

.col-1 .gallery-item:last-child {
  height: 180px;
}

.col-2 .gallery-item:first-child {
  height: 210px;
}

.col-2 .gallery-item:last-child {
  height: 180px;
}

.col-3 .gallery-item.featured {
  height: 406px;
}

.col-4 .gallery-item:first-child {
  height: 220px;
}

.col-4 .gallery-item:last-child {
  height: 170px;
}

.col-5 .gallery-item:first-child {
  height: 280px;
}

@media (min-width: 1500px) {
  .gallery-section .container {
    max-width: 1500px;
    padding-left: 0;
    padding-right: 0;
    width: 1500px;
  }

  .gallery-grid {
    width: 1500px;
    height: 600px;
    position: relative;
    margin-bottom: 40px;
  }

  .gallery-grid .gallery-col {
    position: absolute;
    display: flex;
    flex-direction: column;
  }

  /* Col 1 */
  .gallery-grid .col-1 {
    left: 0;
    top: 80px;
    width: 200px;
    height: 520px;
    gap: 20px;
  }

  .gallery-grid .col-1 .gallery-item:first-child {
    height: 250px;
  }

  .gallery-grid .col-1 .gallery-item:last-child {
    height: 250px;
  }

  /* Col 2 */
  .gallery-grid .col-2 {
    left: 218px;
    top: 0;
    width: 418px;
    height: 520px;
    gap: 20px;
  }

  .gallery-grid .col-2 .gallery-item:first-child {
    height: 250px;
  }

  .gallery-grid .col-2 .gallery-item:last-child {
    height: 250px;
  }

  /* Col 3 */
  .gallery-grid .col-3 {
    left: 650px;
    top: 80px;
    width: 416px;
    height: 313px;
  }

  .gallery-grid .col-3 .gallery-item.featured {
    height: 313px;
  }

  /* Col 4 */
  .gallery-grid .col-4 {
    left: 1082px;
    top: 0;
    width: 200px;
    height: 330px;
  }

  .gallery-grid .col-4 .gallery-item:first-child {
    height: 330px;
  }

  .gallery-grid .col-4 .gallery-item:last-child {
    position: absolute;
    left: 0;
    top: 350px;
    width: 418px;
    height: 250px;
    z-index: 10;
  }

  /* Col 5 */
  .gallery-grid .col-5 {
    left: 1300px;
    top: 80px;
    width: 200px;
    height: 250px;
  }

  .gallery-grid .col-5 .gallery-item:first-child {
    height: 250px;
  }
}

.btn-outline-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #ffffff;
  color: var(--text-dark);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 11px 30px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.btn-outline-pill i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-outline-pill:hover {
  background-color: var(--primary-maroon);
  color: var(--text-white);
  border-color: var(--primary-maroon);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(94, 11, 43, 0.25);
}

.btn-outline-pill:hover i {
  transform: translateX(6px);
}

/* ==========================================================================
   12. BENTO GRID / COMMUNITY & APP SECTION
   ========================================================================== */
.bento-section {
  padding: 60px 0 90px 0;
  background-color: var(--bg-white);
}

.bento-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 1320px) {
  .bento-section .container {
    padding-left: 0;
    padding-right: 0;
    width: 1320px;
  }

  .bento-grid-3col {
    grid-template-columns: 468px 380px 424px;
    gap: 20px 24px;
    width: 1320px;
    height: 914px;
  }

  .bento-grid-3col .col-left-bento {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 468px;
    height: 914px;
  }

  .bento-grid-3col .col-mid-bento {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 380px;
    height: 914px;
  }

  .bento-grid-3col .col-right-bento {
    width: 424px;
    height: 914px;
  }

  .bento-grid-3col .community-card {
    width: 468px;
    height: 670px;
    flex: none;
  }

  .bento-grid-3col .member-access-card {
    width: 468px;
    height: 224px;
    flex: none;
  }

  .bento-grid-3col .career-card {
    width: 380px;
    height: 409px;
    flex: none;
  }

  .bento-grid-3col .phone-app-card {
    width: 380px;
    height: 485px;
    flex: none;
    overflow: visible;
  }

  .bento-grid-3col .phone-mockup-img {
    position: absolute;
    left: -62px;
    top: -9px;
    width: 442px;
    height: 494px;
    max-width: none;
    z-index: 15;
    margin-bottom: 0;
  }

  .bento-grid-3col .skyscraper-card {
    width: 424px;
    height: 914px;
    flex: none;
  }
}

.bento-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}

.bento-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-md);
}

.bento-title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  margin-bottom: 14px;
  line-height: 1.25;
}

.bento-title.maroon {
  color: var(--primary-maroon);
}

.bento-title.gold {
  color: #fadcb0;
}

.bento-p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #555555;
  margin-bottom: 18px;
}

.bento-p.light-p {
  color: rgba(255, 255, 255, 0.85);
}

.bento-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  transition: var(--transition);
}

.bento-link i {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.maroon-link {
  color: var(--primary-maroon);
}

.gold-link {
  color: #fadcb0;
}

.bento-link:hover i {
  transform: translateX(6px);
}

/* Card 1: Community */
.community-card {
  background-image: url('../img/community-bg-clean.svg');
  background-size: 100% 100%;
  background-position: top left;
  background-repeat: no-repeat;
  width: 100%;
  height: auto;
  min-height: 500px;
  position: relative;
  overflow: hidden;
}

/* Avatar Nodes Overlay Layer */
.community-avatars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.community-avatar-node {
  position: absolute;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;

  /* Initial state: Scale 0 for staggered pop-in */
  opacity: 0;
  transform: scale(0) translate3d(0, 0, 0);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pop-delay, 0s),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--pop-delay, 0s),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  backface-visibility: hidden;
}

/* When the section or parent card is revealed into view */
.is-revealed .community-avatar-node,
.community-card.is-revealed .community-avatar-node,
.community-card:hover .community-avatar-node {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

/* Interactive Hover Lift on each Avatar */
.community-avatar-node:hover {
  transform: scale(1.18) translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(88, 0, 37, 0.35);
  z-index: 20;
  border-color: #fcecd7;
}

.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4k Badge Overlay */
.avatar-node-4k {
  position: absolute;
}

.avatar-node-4k::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  z-index: 2;
}

.avatar-4k-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.55rem);
  font-weight: 700;
  color: #ffffff;
  z-index: 3;
  pointer-events: none;
  letter-spacing: -0.01em;
}

/* Positions mapped to viewBox 468 x 670 */
.avatar-pos-1 {
  left: 53.419%;
  top: 30.597%;
  width: 16.667%;
}

.avatar-pos-2 {
  left: 77.137%;
  top: 43.731%;
  width: 12.393%;
}

.avatar-pos-3 {
  left: 38.462%;
  top: 51.642%;
  width: 12.393%;
}

.avatar-pos-4 {
  left: 10.684%;
  top: 50.149%;
  width: 12.393%;
}

.avatar-pos-5 {
  left: 64.103%;
  top: 58.358%;
  width: 12.393%;
}

.avatar-pos-6 {
  left: 37.393%;
  top: 71.642%;
  width: 12.393%;
}

.avatar-pos-7 {
  left: 12.821%;
  top: 80.597%;
  width: 12.393%;
}

.avatar-pos-8 {
  left: 66.026%;
  top: 76.269%;
  width: 25.214%;
}

.bento-card-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  cursor: pointer;
}

/* Card 2: Member Access */
.member-access-card {
  background-color: #580025;
  background-image: url('../img/Group 2085666117.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 32px 28px 28px 28px;
  color: #ffffff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.access-subtext {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #FFFFFF;
  margin-bottom: 22px;
}

.access-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.access-heading {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: #EBC596;
}

.access-circle-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.access-circle-btn .access-btn-icon {
  width: 40px;
  height: 40px;
  display: block;
}

.access-circle-btn:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Card 3: Career Development (Figma Group 2085666113: 380px x 409px) */
.career-card {
  background-color: #580025;
  background-image: url('../img/Group 2085666117.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 36px 28px 30px 28px;
  color: #ffffff;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(77, 5, 33, 0.25);
}

.career-card .bento-title.gold {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  background: linear-gradient(90deg, #DAB580 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.career-card .bento-p.light-p {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #FFFFFF;
  margin-bottom: 24px;
  width: 324px;
  max-width: 100%;
}

/* Frame 73: Explore Opportunities Button (width 324px, height 60px, border-radius 40px) */
.btn-white-pill {
  width: 324px;
  max-width: 100%;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  color: #6D173A;
  font-family: 'Albert Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 40px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-decoration: none;
  cursor: pointer;
}

.btn-white-pill:hover {
  background-color: #FDF5EB;
  color: #550f2c;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

.btn-white-pill i {
  font-size: 0.9rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-white-pill:hover i {
  transform: translateX(4px);
}

/* Card 4: Phone App Mockup */
.phone-app-card {
  background-color: #F5EFEB;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.phone-mockup-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  object-fit: contain;
  margin-bottom: -8px;
  display: block;
}

@media (max-width: 992px) {
  .phone-mockup-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: -20px;
  }
}

/* Card 5: Skyscraper Card */
.skyscraper-card {
  height: 100%;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 30px;
}

.skyscraper-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.skyscraper-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(30, 2, 13, 0) 40%, rgba(55, 5, 25, 0.85) 75%, rgba(65, 5, 29, 0.98) 100%);
  z-index: 2;
}

.skyscraper-content {
  position: relative;
  z-index: 3;
  color: #ffffff;
}

/* ==========================================================================
   13. FOOTER SECTION (Figma: Rectangle 42701, 1920px x 975px, #580025)
   ========================================================================== */
.main-footer {
  background-color: #580025;
  color: #ffffff;
  padding: 80px 0 0 0;
  position: relative;
  overflow: hidden;
  min-height: 975px;
}

.main-footer .container {
  position: relative;
  z-index: 5;
}

/* Group 2085666152 & Group 2085666150: Top Row */
.footer-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  width: 1320px;
  max-width: 100%;
  margin: 0 auto 36px auto;
}

.footer-about-block {
  width: 536px;
  max-width: 100%;
}

.footer-newsletter-block {
  width: 410px;
  max-width: 100%;
}

.footer-block-heading {
  font-family: 'Albert Sans', sans-serif;
  font-size: 24px;
  line-height: 29px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

.footer-about-text {
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  line-height: 23px;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}

.footer-newsletter-text {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 16px;
}

/* Newsletter Form (width: 410px, height: 52px) */
.newsletter-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 40px;
  padding: 4px 6px 4px 18px;
  width: 410px;
  max-width: 100%;
  height: 52px;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.newsletter-form:focus-within {
  border-color: #EBC596;
  background-color: rgba(255, 255, 255, 0.18);
}

.newsletter-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  font-family: 'Albert Sans', sans-serif;
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.btn-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #ffffff;
  color: #580025;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 44px;
  padding: 0 22px;
  border-radius: 30px;
  box-shadow: none;
  transition: var(--transition);
  cursor: pointer;
}

.btn-subscribe i {
  font-size: 0.82rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-subscribe:hover {
  background-color: #FDF5EB;
  color: #47001e;
  transform: translateY(-1px);
}

.btn-subscribe:hover i {
  transform: translateX(4px);
}

.subscribe-msg {
  font-size: 0.85rem;
  margin-top: 8px;
  color: #fadcb0;
  min-height: 20px;
}

/* Group 2085666137 & Line 7: Divider Lines (width 1500px, border 1px solid rgba(255, 255, 255, 0.2)) */
.footer-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  width: 100%;
  max-width: 1500px;
  margin: 38px auto;
  border: none;
}

/* Group 2085666156: Footer Link Columns (width: 1320px, height: 221px) */
.footer-links-row {
  display: grid;
  grid-template-columns: 175px 175px 175px 250px 280px;
  justify-content: space-between;
  gap: 24px;
  width: 1320px;
  max-width: 100%;
  margin: 0 auto 38px auto;
}

.footer-col-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 18px;
}

.footer-nav-list li {
  margin-bottom: 10px;
}

.footer-nav-list a {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.72);
  transition: var(--transition);
}

.footer-nav-list a:hover {
  color: #ffffff;
  padding-left: 4px;
}

.footer-contact-list li {
  margin-bottom: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact-list strong {
  color: #ffffff;
  font-weight: 600;
}

.footer-contact-list a {
  color: rgba(255, 255, 255, 0.72);
  transition: var(--transition);
}

.footer-contact-list a:hover {
  color: #ffffff;
}

/* Social icons (Follow Us On) */
.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.social-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.05rem;
  transition: var(--transition);
}

.social-icon-btn:hover {
  background-color: #ffffff;
  color: #580025;
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Group 1561302342: Copyright line (width 1315px, height 23px) */
.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.7);
  width: 1315px;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: 140px;
  /* Space above skyline silhouette */
  position: relative;
  z-index: 6;
}

.footer-credit-link {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  position: relative;
}

.footer-credit-link:hover {
  color: #EBC596;
  text-shadow: 0 0 10px rgba(235, 197, 150, 0.4);
}

/* _Group_ (35) 1, 2, 3: Bottom Doha Skyline Silhouette (width: 822px x 281px, bottom: 0px) */
.footer-skyline-bar {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 281px;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
  opacity: 0.9;
}

.footer-skyline-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
  display: block;
}

/* ==========================================================================
   14. MODAL DIALOGS
   ========================================================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.active {
  display: flex;
  opacity: 1;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 2, 7, 0.85);
  backdrop-filter: blur(8px);
}

.modal-dialog {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 860px;
  background: #000000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  animation: modalScaleIn 0.3s ease forwards;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 18px;
  color: #ffffff;
  font-size: 2.2rem;
  line-height: 1;
  z-index: 10;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
}

.modal-close:hover {
  color: var(--accent-gold);
  transform: scale(1.15);
}

.video-responsive-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-responsive-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Lightbox Modal */
.lightbox-dialog {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: modalScaleIn 0.3s ease forwards;
}

@keyframes modalScaleIn {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   15. COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Mobile, Tablet, Laptop & Touchscreen Optimization
   ========================================================================== */

/* --- 1. Large Tablets & Small Laptops (max-width: 1280px) --- */
@media (max-width: 1280px) {
  .container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Nav */
  .nav-menu {
    gap: 16px;
  }

  .nav-link {
    font-size: 0.88rem;
    padding: 6px 2px;
  }

  .nav-motif {
    gap: 6px;
  }

  .motif-icon-img {
    height: 22px;
  }

  /* About */
  .about-container {
    gap: 30px;
  }

  .about-content {
    width: 48%;
  }

  .about-gallery {
    width: 50%;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .about-card {
    width: 100%;
    height: 210px;
  }

  /* Mission & Vision */
  .mission-vision-grid {
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 24px;
  }

  .mv-center-card {
    width: 100%;
    height: 340px;
  }

  /* Team */
  .row-five {
    gap: 16px;
  }

  .team-card {
    width: 200px;
  }

  .team-avatar-wrap {
    width: 190px;
    height: 190px;
  }

  /* Bento */
  .bento-grid-3col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    height: auto;
  }

  .bento-grid-3col .col-left-bento,
  .bento-grid-3col .col-mid-bento,
  .bento-grid-3col .col-right-bento {
    width: 100%;
    height: auto;
  }

  .bento-grid-3col .community-card {
    width: 100%;
    height: 580px;
  }

  .bento-grid-3col .member-access-card {
    width: 100%;
    height: auto;
  }

  .bento-grid-3col .career-card {
    width: 100%;
    height: auto;
  }

  .bento-grid-3col .phone-app-card {
    width: 100%;
    height: 400px;
    overflow: hidden;
  }

  .bento-grid-3col .phone-mockup-img {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
  }

  .bento-grid-3col .skyscraper-card {
    width: 100%;
    height: 100%;
    min-height: 580px;
  }

  /* Footer */
  .footer-links-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .footer-social-col {
    grid-column: span 4;
    margin-top: 10px;
  }
}

/* --- 2. Tablets & Medium Screens (max-width: 1024px) --- */
@media (max-width: 1024px) {

  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    height: 100vh !important;
    max-height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
    touch-action: none !important;
  }

  .section-title {
    font-size: 2.3rem;
  }

  /* Main Navigation: Switch to mobile/drawer mode */
  .nav-motif {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Compact Circular Sign In Icon Button on Mobile & Tablets */
  .btn-signin {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50% !important;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(94, 11, 43, 0.2);
  }

  .btn-signin span {
    display: none !important;
  }

  .btn-signin .user-icon {
    font-size: 1.05rem;
    margin: 0;
  }

  .main-navbar {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }

  .navbar-container {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    justify-content: center;
  }

  .nav-motif {
    display: none !important;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(180deg, #4d0521 0%, #290010 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(230, 202, 133, 0.3);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    padding: 0 24px;
    gap: 0;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.3s ease,
      visibility 0.3s ease,
      padding 0.3s ease;
    z-index: 99999;
  }

  .nav-menu.active {
    max-height: calc(100vh - 64px);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    padding: 16px 24px 36px 24px;
    overflow-y: auto;
  }

  .nav-item {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-link {
    width: 100% !important;
    padding: 14px 4px !important;
    font-size: 1rem !important;
    color: #f7e8ee !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
  }

  .nav-link span.plus {
    display: inline-block !important;
    margin-right: 4px !important;
    margin-left: 0 !important;
  }

  .nav-link::after {
    display: none !important;
  }

  .nav-item.dropdown {
    width: 100% !important;
  }

  .nav-item.dropdown .dropdown-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(230, 202, 133, 0.25) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 6px 0 !important;
    margin: 8px 0 12px 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    display: none !important;
  }

  .nav-item.dropdown.open .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .nav-item.dropdown .dropdown-menu::before {
    display: none !important;
  }

  .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: transparent !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .dropdown-item:last-child {
    border-bottom: none !important;
  }

  .dropdown-item i {
    color: #E6CA85 !important;
    font-size: 11px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .dropdown-item:hover {
    background-color: rgba(230, 202, 133, 0.15);
    color: #ffffff;
  }

  .nav-mobile-extras {
    display: block;
    border-bottom: none;
    padding-top: 10px;
  }

  /* About Us */
  .about-section {
    padding: 40px 0;
  }

  .about-container {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .about-content {
    width: 100%;
    max-width: 100%;
  }

  .about-gallery-divider {
    display: none;
  }

  .about-gallery {
    width: 100%;
    height: auto;
    max-width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .about-gallery .col-left,
  .about-gallery .col-right {
    margin-top: 0;
    gap: 16px;
  }

  .about-card {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 180px;
  }

  /* Mission & Vision */
  .mission-vision-section {
    padding: 20px 0;
  }

  .mission-vision-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 600px;
    margin: 0 auto;
  }

  .mv-card {
    padding: 0;
  }

  .mission-card {
    order: 1;
  }

  .mv-center-card {
    order: 2;
    width: 100%;
    height: 300px;
    margin: 0 auto;
  }

  .vision-card {
    order: 3;
  }

  /* Sponsors */
  .sponsor-tabs {
    gap: 20px;
  }

  .sponsors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }

 

  /* Events Grid */
  .events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* Team */
  .team-main-title {
    font-size: 3rem;
  }

  .team-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 28px 16px;
  }

  .team-row {
    display: contents;
  }

  .team-card {
    width: calc(33.333% - 16px);
    min-width: 160px;
    max-width: 220px;
  }

  .team-avatar-wrap {
    width: 165px;
    height: 165px;
  }

  /* Gallery Grid */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100% !important;
    height: auto !important;
    position: static;
    margin-bottom: 30px;
  }

  .gallery-col {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    gap: 14px;
  }

  .gallery-item {
    height: 170px !important;
    width: 100%;
  }

  .gallery-item.featured {
    height: 240px !important;
    grid-column: span 2;
  }

  /* Bento Grid */
  .bento-section {
    padding: 50px 0 70px 0;
    overflow: hidden;
  }

  .bento-grid-3col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100% !important;
    height: auto !important;
  }

  .bento-grid-3col .bento-col {
    width: 100% !important;
    height: auto !important;
    gap: 20px;
  }

  .bento-grid-3col .community-card {
    width: 100% !important;
    height: auto !important;
    min-height: auto;
    aspect-ratio: 468 / 560;
    max-height: 520px;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-size: cover;
    background-position: top center;
  }

  .bento-grid-3col .member-access-card {
    width: 100% !important;
    height: auto !important;
    padding: 24px 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .bento-grid-3col .career-card {
    width: 100% !important;
    height: auto !important;
    padding: 26px 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .bento-grid-3col .phone-app-card {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    padding: 0 !important;
    display: block;
    overflow: visible !important;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #F5EFEB;
  }

  .bento-grid-3col .phone-mockup-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto;
  }

  .bento-grid-3col .skyscraper-card {
    width: 100% !important;
    height: auto !important;
    min-height: 420px;
    padding: 32px 24px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Footer */
  .footer-top-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-links-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 20px;
  }

  .footer-contact-col {
    grid-column: span 2;
  }

  .footer-social-col {
    grid-column: span 3;
    margin-top: 0;
  }
}

/* --- 3. Stats Mobile Breakpoint (max-width: 850px) --- */
@media (max-width: 850px) {
  .stats-svg-container {
    display: none !important;
  }

  .stats-mobile-wrapper {
    display: block !important;
  }
}

/* --- 4. Smartphones & Small Tablets (max-width: 768px) --- */
@media (max-width: 768px) {

  /* Container Padding */
  .container {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Header */
  .top-header {
    padding: 10px 0;
  }

  .top-header-inner {
    position: relative;
    gap: 12px;
  }

  .header-apps {
    display: none;
  }

  .main-logo-img {
    height: 42px;
  }

  .btn-signin {
    padding: 8px 16px;
    font-size: 0.85rem;
    gap: 6px;
  }

  .btn-signin .user-icon {
    font-size: 0.95rem;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  /* Hero */
  .hero-section {
    height: auto;
  }

  .hero-indicators {
    top: auto;
    bottom: 20px;
    justify-content: center;
  }

  .hero-image {
    height: 220;
    min-height: 200px;
    max-height: 380px;
  }
  .hero-indicator-bar {
    width: 30px;
  }

  /* Titles */
  .section-title {
    font-size: 1.95rem;
    line-height: 1.25;
    margin-bottom: 16px;
  }

  .about-content .section-title {
    font-size: 2.1rem;
    line-height: 1.25;
    margin-top: 8px;
    margin-bottom: 18px;
  }

  /* Sponsors Tabs: Horizontal swipeable bar */
  .sponsor-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0 4px 10px 4px;
    margin-bottom: 24px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .sponsor-tabs::-webkit-scrollbar {
    display: none;
  }

  .sponsor-tab {
    white-space: nowrap;
    font-size: 0.9rem;
    padding: 6px 14px;
    flex-shrink: 0;
    background: rgba(94, 11, 43, 0.04);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(94, 11, 43, 0.08);
  }

  .sponsor-tab.active {
    background-color: var(--primary-maroon);
    color: #ffffff;
    border-color: var(--primary-maroon);
  }

  .sponsor-tab.active::after {
    display: none;
  }

  /* Events */
  .events-section {
    padding: 60px 0 50px 0;
  }

  .events-header {
    margin-bottom: 35px;
  }

  .events-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin: 0 auto;
    gap: 20px;
  }

  .event-card {
    border-radius: var(--radius-md);
  }

  .event-img-wrap {
    height: 190px;
  }

  .event-body {
    padding: 20px;
  }

  .event-title {
    font-size: 1.1rem;
    min-height: auto;
    margin-bottom: 12px;
  }

  .event-meta {
    margin-bottom: 18px;
    font-size: 0.84rem;
  }

  /* Team Section */
  .team-section {
    padding: 50px 0 60px 0;
  }

  .team-header {
    margin-bottom: 35px;
  }

  .team-main-title {
    font-size: clamp(2.2rem, 6.5vw, 3rem);
  }

  .team-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 24px 12px;
    width: 100%;
  }

  .team-row {
    display: contents;
  }

  .team-card {
    width: calc(50% - 12px);
    min-width: auto;
    max-width: 175px;
  }

  .team-avatar-wrap {
    width: 135px;
    height: 135px;
    margin-bottom: 10px;
  }

  .member-name {
    font-size: 0.98rem;
    line-height: 1.25;
    margin-bottom: 2px;
  }

  .member-role {
    font-size: 0.82rem;
  }

  .social-bubbles {
    width: 54px;
    height: 54px;
    right: -4px;
    bottom: 2px;
  }

  .social-bubble {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .social-bubble.fb {
    top: 0;
    right: 0;
  }

  .social-bubble.ln {
    bottom: 0;
    right: 22px;
  }

  /* Video */
  .video-showcase-section {
    padding: 30px 0 50px 0;
  }

  .video-bg-img {
    min-height: 220px;
    max-height: 320px;
  }

  .play-btn {
    width: 64px;
    height: 64px;
  }

  .play-circle {
    width: 56px;
    height: 56px;
  }

  .play-circle i {
    font-size: 1.2rem;
  }

  /* Gallery */
  .gallery-section {
    padding: 50px 0 60px 0;
  }

  .gallery-header {
    margin-bottom: 30px;
  }

  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .gallery-grid .gallery-col {
    display: contents !important;
  }

  .gallery-grid .gallery-item {
    height: 165px !important;
    width: 100% !important;
    border-radius: var(--radius-sm) !important;
  }

  .gallery-grid .gallery-item.featured {
    height: 165px !important;
    grid-column: span 1 !important;
  }

  /* Footer */
  .main-footer {
    padding: 50px 0 0 0;
  }

  .footer-top-row {
    gap: 28px;
    margin-bottom: 35px;
  }

  .footer-block-heading {
    font-size: 1.2rem;
  }

  .footer-links-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
    margin-bottom: 30px;
  }

  .footer-contact-col {
    grid-column: span 2;
  }

  .footer-social-col {
    grid-column: span 2;
  }

  .footer-social-icons {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .footer-bottom-row {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding-bottom: 90px;
    font-size: 0.88rem;
  }

  .footer-skyline-bar {
    left: 0;
    width: 100%;
    height: 150px;
  }
}

/* --- 5. Compact Mobile Phones & Tablets (max-width: 768px) --- */
@media (max-width: 768px) {

  /* Header Logo & Compact Circular Sign In Icon Button */
  .main-logo-img {
    height: 38px;
  }

  .btn-signin {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(94, 11, 43, 0.2);
  }

  .btn-signin span {
    display: none !important;
  }

  .btn-signin .user-icon {
    font-size: 1.05rem;
    margin: 0;
  }

  /* Logged In User Account Pill: Show icon only on mobile */
  .btn-user-account {
    height: 40px;
    padding: 0 8px 0 2px;
    gap: 4px;
    border-radius: 40px;
  }

  .btn-user-account .user-name-text {
    display: none !important;
  }

  .btn-user-account .user-avatar-mini {
    width: 36px;
    height: 36px;
  }

  .btn-user-account .user-chevron {
    font-size: 0.7rem;
    margin-left: 2px;
  }

  .user-dropdown-menu {
    right: 0 !important;
    left: auto !important;
    width: 275px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 8px 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22) !important;
  }

  .user-dropdown-header {
    padding: 12px 16px !important;
  }

  .user-dropdown-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .user-dropdown-id {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
    font-size: 11px !important;
  }

  .user-dropdown-id .badge-status-active {
    white-space: nowrap !important;
  }

  .user-dropdown-item {
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }

  .mobile-menu-toggle {
    width: 38px;
    height: 38px;
  }

  /* About */
  .about-content .section-title {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .about-text {
    font-size: 14.5px;
    line-height: 22px;
  }

  .btn-primary {
    /* width: 100%; */
    max-width: 200px;
    height: 50px;
    font-size: 15px;
  }

  .about-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .about-card {
    border-radius: 14px;
    min-height: 130px;
  }

  /* Mission & Vision */
  .mv-center-card {
    height: 220px;
    border-radius: 0;
  }

  .mv-title {
    font-size: 22px;
    line-height: 28px;
  }

  .mv-description {
    font-size: 14.5px;
    line-height: 22px;
  }

  /* Sponsors */
  .sponsors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
 
 

  /* Stats Mobile */
  .stats-mobile-grid {
    gap: 10px;
  }

  .stat-mobile-card {
    padding: 16px 8px;
    border-radius: 16px;
  }

  .stat-mobile-card .stat-number {
    font-size: 1.5rem;
  }

  .stat-mobile-card .stat-label {
    font-size: 0.78rem;
  }

  .chairperson-mobile-card {
    padding: 22px 14px;
    border-radius: 20px;
  }

  .chairperson-mobile-avatar-wrap {
    width: 80px;
    height: 80px;
  }

  .chairperson-mobile-name {
    font-size: 1.15rem;
  }

  .chairperson-mobile-quote {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  /* Events Pill Filter */
  .events-pill-switch {
    width: 100%;
    max-width: 320px;
  }

  .event-pill-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 0.82rem;
    text-align: center;
  }

  /* Bento Community */
  .community-card {
    min-height: 340px;
    aspect-ratio: 468 / 580;
  }

  .bento-title {
    font-size: 1.45rem;
  }

  .access-heading {
    font-size: 1.35rem;
  }

  .access-circle-btn {
    width: 40px;
    height: 40px;
  }

  /* Newsletter Form (single sleek horizontal pill matching Image 2) */
  .newsletter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 4px 6px 4px 18px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 410px;
    box-sizing: border-box;
  }

  .newsletter-input {
    flex: 1;
    width: auto;
    height: 100%;
    text-align: left;
    font-size: 14px;
    padding: 0 10px 0 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #ffffff;
    box-sizing: border-box;
    outline: none;
  }

  .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }

  .btn-subscribe {
    width: auto;
    height: 44px;
    padding: 0 20px;
    justify-content: center;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
  }

  @media (max-width: 380px) {
    .newsletter-form {
      padding: 4px 4px 4px 12px;
      height: 48px;
    }
    .newsletter-input {
      font-size: 12px;
    }
    .btn-subscribe {
      height: 40px;
      padding: 0 14px;
      font-size: 12px;
    }
  }

  /* Modals */
  .modal-dialog {
    width: 96%;
    margin: 10px;
  }

  .modal-close {
    top: 6px;
    right: 10px;
    font-size: 1.8rem;
  }
}

/* --- 6. Extra Small Screens (max-width: 400px) --- */
@media (max-width: 400px) {
  .header-right-group {
    gap: 8px;
  }

  .btn-signin {
    padding: 6px 10px;
    font-size: 0.76rem;
  }

  .main-logo-img {
    height: 32px;
  }

  .team-card {
    width: calc(50% - 8px);
    max-width: 150px;
  }

  .team-avatar-wrap {
    width: 120px;
    height: 120px;
  }

  .member-name {
    font-size: 0.9rem;
  }

  .social-bubbles {
    width: 48px;
    height: 48px;
    right: -2px;
    bottom: 2px;
  }

  .social-bubble {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .social-bubble.fb {
    top: 0;
    right: 0;
  }

  .social-bubble.ln {
    bottom: 0;
    right: 18px;
  }

  .footer-links-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-contact-col,
  .footer-social-col {
    grid-column: span 1;
  }
}

/* ==========================================================================
   ACCESSIBILITY: PREFERS-REDUCED-MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   GLOBAL AUTH MODALS & TOAST NOTIFICATIONS
   ========================================================================== */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 2, 11, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.custom-modal-dialog {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  padding: 36px 32px;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid #E8DFD5;
  transform: scale(0.92) translateY(15px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-modal-dialog.modal-dialog-lg {
  max-width: 580px;
  text-align: left;
}

.custom-modal-overlay.is-open .custom-modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  background: #F5EFE9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #777777;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: #5E0B2B;
  color: #ffffff;
}

.modal-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.modal-icon-danger {
  background: #FDE8E8;
  color: #C92A2A;
  border: 4px solid #FBD5D5;
}

.modal-icon-primary {
  background: #FAF2E8;
  color: #5E0B2B;
  border: 4px solid #F5E8D8;
}

.modal-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 24px;
  color: #222222;
  margin: 0 0 10px 0;
}

.modal-subtitle {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
}

.modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.modal-form-group label {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #444444;
}

.modal-input {
  width: 100%;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #222222;
  background-color: #FCFBF9;
  border: 1.5px solid #DDD3C7;
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.modal-input:focus {
  border-color: #5E0B2B;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(94, 11, 43, 0.1);
}

.modal-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn-modal-secondary {
  padding: 12px 26px;
  border-radius: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555555;
  background: #F5EFE9;
  border: 1px solid #DDD3C7;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-modal-secondary:hover {
  background: #E8DFD5;
  color: #222222;
}

.btn-modal-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: #C92A2A;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 42, 42, 0.25);
  transition: all 0.25s ease;
}

.btn-modal-danger:hover {
  background: #B02525;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 42, 42, 0.35);
}

.btn-modal-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #5E0B2B 0%, #7B113A 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(94, 11, 43, 0.25);
  transition: all 0.25s ease;
}

.btn-modal-primary:hover {
  background: linear-gradient(135deg, #7B113A 0%, #941344 100%);
  transform: translateY(-2px);
}

/* Toast Alerts */
.toast-notification-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  min-width: 300px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #1B020B;
  color: #ffffff;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border-left: 4px solid #DAB580;
  animation: slideToast 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.toast-item.toast-success {
  border-left-color: #10B981;
}

.toast-item.toast-danger {
  border-left-color: #EF4444;
}

.toast-item i {
  font-size: 18px;
}

@keyframes slideToast {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   GLOBAL PRIVACY POLICY & TERMS MODAL
   ========================================================================== */
.policy-modal-dialog {
  background: #FFFFFF !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 680px !important;
  max-height: 85vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #E8DFD5 !important;
  overflow: hidden !important;
  transform: scale(0.94) translateY(15px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
}

.custom-modal-overlay.is-open .policy-modal-dialog {
  transform: scale(1) translateY(0);
}

.policy-modal-header {
  padding: 24px 30px 16px 30px;
  border-bottom: 1px solid #F0ECE6;
  background: #FAF7F2;
  position: relative;
}

.policy-modal-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #580024;
  margin: 0 0 4px 0;
}

.policy-modal-meta {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  color: #8C7B75;
  font-weight: 500;
}

.policy-modal-body {
  padding: 24px 30px;
  overflow-y: auto;
  flex: 1;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: #4D4D4D;
  max-height: 52vh;
}

.policy-modal-body h4 {
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1B0009;
  margin: 18px 0 6px 0;
}

.policy-modal-body p {
  margin: 0 0 12px 0;
}

.policy-modal-body strong {
  color: #1B0009;
}

.policy-modal-footer {
  padding: 16px 30px 20px 30px;
  border-top: 1px solid #F0ECE6;
  display: flex;
  justify-content: flex-end;
  background: #FAF7F2;
}

.btn-policy-accept {
  background: linear-gradient(135deg, #6D173A 0%, #580024 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 40px;
  padding: 12px 28px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(109, 23, 58, 0.25);
  transition: all 0.25s ease;
}

.btn-policy-accept:hover {
  background: linear-gradient(135deg, #841238 0%, #6D173A 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(109, 23, 58, 0.35);
}

.policy-modal-dialog .modal-close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 10;
}

/* ==========================================================================
   SPLIT SCREEN MEMBER LOGIN MODAL (EXACT FIGMA REPLICA: Group 2085665567.svg)
   ========================================================================== */
.split-login-modal {
  max-width: 1096px !important;
  width: 1096px !important;
  min-height: 663px !important;
  height: 663px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  text-align: left !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.login-modal-visual {
  flex: 0 0 528px !important;
  width: 528px !important;
  height: 647px !important;
  min-height: 647px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  background: #1a1a1a !important;
  margin: 0 !important;
}

.login-modal-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 16px !important;
}

.login-modal-form-wrap {
  flex: 1 !important;
  width: 552px !important;
  padding: 46px 40px 40px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.login-modal-close-btn {
  position: absolute !important;
  top: 32px !important;
  right: 34px !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  z-index: 20 !important;
}

.login-modal-close-btn:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

.login-modal-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  line-height: 75px;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%), #1B0009;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 10px 0;
  letter-spacing: -0.01em;
}

.login-modal-subtitle {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #4D4D4D;
  margin: 0 0 34px 0;
  line-height: 1.4;
}

.login-form-group {
  margin-bottom: 22px;
  width: 480px;
  max-width: 100%;
}

.login-field-label {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #4D4D4D;
  margin-bottom: 8px;
  display: block;
}

.login-input-wrapper {
  position: relative;
  width: 480px;
  max-width: 100%;
}

.login-form-control {
  width: 480px;
  max-width: 100%;
  height: 60px;
  padding: 12px 54px 12px 24px;
  border: 1px solid #E4E4E4;
  border-radius: 30px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1B0009;
  outline: none;
  background: #ffffff;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.login-form-control::placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #8C8C8C;
  letter-spacing: normal;
  opacity: 1;
}

.login-form-control:focus {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.08);
}

.login-input-icon {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.login-user-icon {
  pointer-events: none;
}

.login-eye-btn {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  outline: none;
}

.login-eye-btn:hover svg path {
  stroke: #6D173A;
}

.login-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 480px;
  max-width: 100%;
  margin-top: 14px;
  margin-bottom: 28px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.login-remember-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4D4D4D;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  font-weight: 400;
}

.login-remember-label input[type="checkbox"] {
  accent-color: #000000;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-radius: 4px;
}

.login-forgot-link {
  color: #4D4D4D;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: color 0.2s ease;
}

.login-forgot-link:hover {
  color: #6D173A;
  text-decoration: underline;
}

.btn-login-submit {
  width: 480px;
  max-width: 100%;
  height: 60px;
  border-radius: 30px;
  background: #1B0009;
  color: #ffffff;
  border: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.2);
}

.btn-login-submit:hover {
  background: #6D173A;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(109, 23, 58, 0.35);
}

.login-register-prompt {
  width: 480px;
  max-width: 100%;
  text-align: center;
  margin-top: 26px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1B0009;
}

.login-register-link {
  color: #D43E7B;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  margin-left: 4px;
  transition: color 0.2s ease;
}

.login-register-link:hover {
  color: #6D173A;
  text-decoration: underline;
}

@media (max-width: 991px) {
  .split-login-modal {
    flex-direction: column !important;
    max-width: 440px !important;
    min-height: auto !important;
    padding: 24px 20px !important;
  }

  .login-modal-visual {
    display: none !important;
  }

  .login-modal-form-wrap {
    padding: 10px 0 0 0 !important;
  }

  .login-modal-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    text-align: center;
  }

  .login-modal-subtitle {
    text-align: center;
    margin-bottom: 22px !important;
  }

  .login-modal-close-btn {
    top: 16px !important;
    right: 16px !important;
  }

  .policy-modal-dialog {
    max-width: 95% !important;
    max-height: 90vh !important;
  }

  .policy-modal-header {
    padding: 18px 20px 14px 20px !important;
  }

  .policy-modal-title {
    font-size: 20px !important;
  }

  .policy-modal-body {
    padding: 18px 20px !important;
    font-size: 13.5px !important;
  }

  .policy-modal-footer {
    padding: 14px 20px 18px 20px !important;
  }

  .btn-policy-accept {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   HERO INNER BANNER WITH CURVED BOTTOM ARC & PRISTINE SKYLINE BACKGROUND
   ========================================================================== */
.hero-inner-section {
  position: relative;
  width: 100%;
  min-height: 220px;
  background: linear-gradient(180deg, rgba(88, 0, 37, 0.78) 0%, rgba(56, 0, 23, 0.92) 100%),
    url('../img/about/hero-skyline.jpg') center/cover no-repeat !important;
  padding: 60px 0 85px 0;
  text-align: center;
  overflow: hidden;
}

.hero-inner-container {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-inner-section .breadcrumb {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #DAB580;
  margin-bottom: 12px;
}

.hero-inner-section .hero-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 42px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.hero-curve {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 4;
  pointer-events: none;
}

.hero-curve svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   4 NEW AUTH & ACCOUNT MODALS (FIGMA REPLICAS)
   - Profile Log Out Modal (Group 2085666450.svg)
   - Forgot Password Modal (Group 2085666471.svg)
   - OTP Verification Modal (Group 2085666471 (1).svg)
   - Set New Password Modal (Group 2085666471 (2).svg)
   ========================================================================== */

/* 1. Profile Log Out Modal Card */
.auth-logout-dialog {
  width: 646px !important;
  max-width: 95vw !important;
  min-height: 245px !important;
  background: #FFFFFF !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
  padding: 40px 48px 36px 48px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  position: relative !important;
  margin: auto !important;
  animation: authModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.auth-logout-title {
  font-family: 'Albert Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  line-height: 29px !important;
  color: #1B0009 !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.01em !important;
}

.auth-logout-desc {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 18px !important;
  color: #4D4D4D !important;
  margin: 0 0 34px 0 !important;
}

.auth-logout-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
}

.auth-logout-btn-cancel {
  width: 227px !important;
  height: 59px !important;
  border-radius: 29.5px !important;
  border: 1px solid #E4E4E4 !important;
  background: #FFFFFF !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #4D4D4D !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-logout-btn-cancel:hover {
  background: #F9F9F9 !important;
  border-color: #D0D0D0 !important;
  transform: translateY(-2px) !important;
}

.auth-logout-btn-confirm {
  width: 228px !important;
  height: 60px !important;
  border-radius: 30px !important;
  background: #841238 !important;
  border: none !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 20px rgba(132, 18, 56, 0.28) !important;
}

.auth-logout-btn-confirm:hover {
  background: #6D0E2D !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(132, 18, 56, 0.38) !important;
}

/* 2, 3, 4: Common Step Modals Base Styling */
.auth-step-dialog {
  width: 560px !important;
  max-width: 95vw !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E4E4 !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
  padding: 40px 40px 44px 40px !important;
  box-sizing: border-box !important;
  position: relative !important;
  margin: auto !important;
  text-align: left !important;
  animation: authModalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Specific SVG Dimensions */
/* 1. Forgot Password Modal (Group 2085666471.svg: exact 560px x 491px) */
#forgotPasswordModal .auth-step-dialog {
  width: 560px !important;
  height: 491px !important;
  min-height: 491px !important;
  max-height: 491px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  padding: 40px 40px 32px 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 2. OTP Verification Modal (Group 2085666471 (1).svg: exact 560px x 496px) */
#otpVerificationModal .auth-step-dialog {
  width: 560px !important;
  height: 496px !important;
  min-height: 496px !important;
  max-height: 496px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  padding: 40px 40px 40px 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* 3. Set New Password Modal (Group 2085666471 (2).svg: exact 560px x 597px) */
#changePasswordModal .auth-step-dialog,
#newPasswordModal .auth-step-dialog {
  width: 560px !important;
  height: 597px !important;
  min-height: 597px !important;
  max-height: 597px !important;
  padding: 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

@keyframes authModalPop {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Top Header Bar inside Step Modals (SVG y: 40px to 68px, height 28px) */
.auth-step-topbar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 50px !important;
  min-height: 28px !important;
}

.auth-step-back-btn {
  position: absolute !important;
  left: -2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1B0009 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.auth-step-back-btn:hover {
  transform: translateY(-50%) scale(1.1) !important;
  color: #6D173A !important;
}

.auth-step-header-title {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #1B0009 !important;
  margin: 0 !important;
  text-align: center !important;
}

.auth-step-close-btn {
  display: none !important;
}

/* Big Display Titles (SVG y: 118px to 148px) */
.auth-step-hero-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: 40px !important;
  line-height: 48px !important;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%), #1B0009 !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  margin: 0 0 54px 0 !important;
  letter-spacing: -0.01em !important;
}

#otpVerificationModal .auth-step-hero-title {
  margin: 0 0 24px 0 !important;
}

.auth-step-hero-desc {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #4D4D4D !important;
  margin: 0 0 24px 0 !important;
}

.auth-step-hero-desc strong {
  color: #1B0009 !important;
  font-weight: 600 !important;
}

/* Form Groups & Inputs (Exact SVG: Label y: 202px/308px, Input y: 224px/330px, 24px gap between rows) */
.auth-step-form-group {
  margin-bottom: 24px !important;
  width: 100% !important;
}

.auth-step-label {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #4D4D4D !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.auth-step-input-wrap {
  position: relative !important;
  width: 100% !important;
}

.auth-step-input {
  width: 100% !important;
  height: 60px !important;
  padding: 12px 54px 12px 26px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E4E4 !important;
  border-radius: 30px !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  color: #1B0009 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.auth-step-input:hover {
  border-color: #6D173A !important;
}

.auth-step-input:focus {
  border-color: #6D173A !important;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.15) !important;
}

.auth-step-input.is-valid {
  border-color: rgba(70, 199, 0, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(70, 199, 0, 0.2) !important;
}

.auth-step-input.is-invalid {
  border: 2px solid #FF0000 !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.18) !important;
}

.auth-step-icon-btn {
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #4D4D4D !important;
  padding: 0 !important;
}

.auth-step-icon-static {
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.auth-step-error-msg {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 13px !important;
  color: #FF0000 !important;
  margin-top: 6px !important;
  display: none;
  font-weight: 500 !important;
}

.auth-step-error-msg.is-visible {
  display: block !important;
}

/* Submit Action Button (Width 480px, Height 60px, Pill rx: 30) */
.auth-step-submit-btn {
  width: 100% !important;
  height: 60px !important;
  background: #1B0009 !important;
  border-radius: 30px !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  margin-top: 60px !important;
  box-shadow: 0 8px 24px rgba(27, 0, 9, 0.28) !important;
  transition: all 0.25s ease !important;
}

/* Modal-specific Exact SVG Button Gaps */
#forgotPasswordModal .auth-step-submit-btn {
  margin-top: 60px !important; /* Input y:284px to Button y:344px = 60px */
}

#otpVerificationModal .auth-step-submit-btn {
  margin-top: 64px !important; /* Resend row y:332px to Button y:396px = 64px */
}

#changePasswordModal .auth-step-dialog,
#newPasswordModal .auth-step-dialog {
  width: 560px !important;
  height: 597px !important;
  min-height: 597px !important;
  max-height: 597px !important;
  border-radius: 20px !important;
  background: #FFFFFF !important;
  padding: 40px 40px 48px 40px !important; /* Top: 40px, Left/Right: 40px, Bottom: 48px */
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

#changePasswordModal .auth-step-topbar,
#newPasswordModal .auth-step-topbar {
  margin-bottom: 41px !important; /* Topbar bottom y:68px to Hero Title top y:309px = 41px */
  height: 28px !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

#changePasswordModal .auth-step-header-title,
#newPasswordModal .auth-step-header-title {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #1B0009 !important;
  text-align: center !important;
  margin: 0 !important;
}

#changePasswordModal .auth-step-back-btn,
#newPasswordModal .auth-step-back-btn {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #1B0009 !important;
}

#changePasswordModal .auth-step-back-btn svg,
#newPasswordModal .auth-step-back-btn svg {
  width: 14px !important;
  height: 28px !important;
}

#changePasswordModal .auth-step-hero-title,
#newPasswordModal .auth-step-hero-title {
  font-family: 'Marcellus', serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 50px !important;
  height: 50px !important;
  margin: 0 0 41px 0 !important; /* Hero Title bottom y:359px to Label 1 top y:400px = 41px */
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  text-align: left !important;
}

#changePasswordModal .auth-step-form-group,
#newPasswordModal .auth-step-form-group {
  margin-bottom: 20px !important; /* Field 1 bottom y:486px to Field 2 label top y:506px = 20px */
  position: relative !important;
}

#changePasswordModal .auth-step-label,
#newPasswordModal .auth-step-label {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 17px !important;
  color: #4D4D4D !important;
  margin-bottom: 9px !important; /* Label bottom to Input top = 9px */
  display: block !important;
  font-weight: 400 !important;
  text-align: left !important;
}

#changePasswordModal .auth-step-input,
#newPasswordModal .auth-step-input {
  width: 480px !important;
  height: 60px !important;
  border-radius: 30px !important;
  background: #FFFFFF !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #1B0009 !important;
  padding: 0 54px 0 24px !important;
  box-sizing: border-box !important;
  border: 1px solid #E4E4E4 !important;
}

#changePasswordModal .auth-step-input:focus,
#newPasswordModal .auth-step-input:focus {
  border: 2px solid rgba(70, 199, 0, 0.6) !important;
  outline: none !important;
}

#changePasswordModal .auth-step-icon-btn,
#newPasswordModal .auth-step-icon-btn {
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

#changePasswordModal .auth-step-icon-btn svg,
#newPasswordModal .auth-step-icon-btn svg {
  width: 24px !important;
  height: 24px !important;
}

#changePasswordModal .auth-step-error-msg,
#newPasswordModal .auth-step-error-msg {
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #FF0000 !important;
  margin-top: 20px !important; /* Confirm Password box bottom y:592px to Error y:612px = 20px */
  text-align: left !important;
  display: none;
}

#changePasswordModal .auth-step-error-msg.is-visible,
#newPasswordModal .auth-step-error-msg.is-visible {
  display: block !important;
}

#changePasswordModal form,
#newPasswordModal form {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

#changePasswordModal .auth-step-submit-btn,
#newPasswordModal .auth-step-submit-btn {
  width: 480px !important;
  height: 60px !important;
  border-radius: 30px !important;
  background: #1B0009 !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 16px !important;
  line-height: 19px !important;
  color: #FFFFFF !important;
  margin-top: auto !important; /* Locks button cleanly at exact 48px from bottom */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

#changePasswordModal .auth-step-submit-btn svg,
#newPasswordModal .auth-step-submit-btn svg {
  width: 10px !important;
  height: 20px !important;
  color: #FFFFFF !important;
}

.auth-step-submit-btn:hover {
  background: #6D173A !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(109, 23, 58, 0.4) !important;
}

/* Bottom Footer Links (Forgot Password Modal: SVG y:404px to y:436px = 32px gap) */
.auth-step-footer-prompt {
  margin-top: 32px !important;
  text-align: center !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  color: #1B0009 !important;
}

.auth-step-highlight-link {
  color: #D43E7B !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-left: 4px !important;
  transition: color 0.2s ease !important;
}

.auth-step-highlight-link:hover {
  color: #B0205D !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   EXACT SVG REPLICAS: FORGOT PASSWORD & OTP VERIFICATION MODALS
   ========================================================================== */

/* --- 1. Forgot Password Modal (Group 2085666471.svg: 560px x 491px) --- */
#forgotPasswordModal .auth-step-topbar {
  margin-bottom: 41px !important;
  height: 28px !important;
}

#forgotPasswordModal .auth-step-hero-title {
  margin: 0 0 41px 0 !important;
  height: 50px !important;
  line-height: 50px !important;
}

#forgotPasswordModal .auth-step-form-group {
  margin-bottom: 0 !important;
}

#forgotPasswordModal .auth-step-label {
  margin-bottom: 9px !important;
}

#forgotPasswordModal .auth-step-input {
  width: 480px !important;
  height: 60px !important;
  border-radius: 30px !important;
}

#forgotPasswordModal .auth-step-submit-btn {
  width: 480px !important;
  height: 60px !important;
  margin-top: 60px !important;
}

#forgotPasswordModal .auth-step-footer-prompt {
  margin-top: 32px !important;
}

/* --- 2. OTP Verification Modal (Group 2085666471 (1).svg: 560px x 496px) --- */
#otpVerificationModal .auth-step-topbar {
  margin-bottom: 41px !important;
  height: 28px !important;
}

#otpVerificationModal .auth-step-hero-title {
  margin: 0 0 16px 0 !important;
  height: 50px !important;
  line-height: 50px !important;
}

#otpVerificationModal .auth-step-hero-desc {
  margin: 0 0 32px 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
}

#otpVerificationModal .auth-otp-grid {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 480px !important;
  margin: 0 auto !important;
}

#otpVerificationModal .auth-otp-cell {
  width: 70px !important;
  height: 60px !important;
  border-radius: 30px !important;
  border: 1px solid #E4E4E4 !important;
  background: #FFFFFF !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;
  color: #1B0009 !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#otpVerificationModal .auth-otp-cell:focus,
#otpVerificationModal .auth-otp-cell.is-active {
  border: 2px solid rgba(212, 62, 123, 0.6) !important;
}

#otpVerificationModal .auth-otp-resend-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 480px !important;
  margin: 24px auto 0 auto !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
}

#otpVerificationModal .auth-otp-timer {
  color: #D43E7B !important;
  font-weight: 600 !important;
}

#otpVerificationModal .auth-step-submit-btn {
  width: 480px !important;
  height: 60px !important;
  margin-top: 64px !important;
}

/* OTP 6-Digit Grid & Resend Row (Exact SVG: Grid y: 228px to 288px, Resend row y: 320px) */
.auth-otp-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 30px !important;
  width: 100% !important;
}

.auth-otp-cell {
  width: 70px !important;
  height: 60px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E4E4 !important;
  border-radius: 30px !important;
  text-align: center !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #1B0009 !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: all 0.25s ease !important;
}

.auth-otp-cell:focus,
.auth-otp-cell.is-active,
.auth-otp-cell.has-value {
  border: 2px solid #6D173A !important;
  box-shadow: 0 0 0 2px rgba(109, 23, 58, 0.15) !important;
}

.auth-otp-resend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  color: #1B0009 !important;
}

.auth-otp-timer {
  color: #D43E7B !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.auth-otp-resend-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-family: 'Albert Sans', sans-serif !important;
  font-size: 14px !important;
  color: #170600 !important;
  margin-bottom: 12px !important;
}

.auth-otp-timer {
  color: #D43E7B !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
  .auth-logout-dialog {
    padding: 30px 20px !important;
  }
  .auth-logout-actions {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .auth-logout-btn-cancel,
  .auth-logout-btn-confirm {
    width: 100% !important;
  }
  .auth-step-dialog {
    padding: 24px 20px 28px 20px !important;
  }
  .auth-step-hero-title {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  .auth-otp-grid {
    gap: 6px !important;
  }
  .auth-otp-cell {
    height: 52px !important;
    font-size: 18px !important;
  }
}

/* ==========================================================================
   STATUS FEEDBACK MODALS (6 Figma SVG Replicas)
   Group 2085666449 (0, 1, 2, 3, 4, 5)
   ========================================================================== */
.status-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 2, 7, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.status-modal-overlay.is-active,
.status-modal-overlay.active {
  display: flex !important;
  animation: statusFadeIn 0.18s ease-out forwards;
}

@keyframes statusFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes statusScaleUp {
  from { transform: scale(0.96) translateY(12px); }
  to { transform: scale(1) translateY(0); }
}

.status-dialog-card {
  position: relative;
  width: 100%;
  max-width: 646px;
  background: #FFFFFF;
  border-radius: 28px;
  padding: 12px 12px 36px 12px;
  box-sizing: border-box;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.28);
  animation: statusScaleUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Top Visual Banner (622px x 407px in SVG) */
.status-dialog-banner {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

/* Green Success Radial Shine Banner */
.status-dialog-banner.banner-green {
  background: radial-gradient(circle at 50% 50%, rgba(226, 255, 219, 0.95) 0%, rgba(103, 222, 74, 0.82) 48%, rgba(63, 181, 34, 0.95) 100%),
              url('../img/events/event-poster-1.jpg') center/cover no-repeat;
}

/* Orange Activation/Pending Radial Shine Banner */
.status-dialog-banner.banner-orange {
  background: radial-gradient(circle at 50% 50%, rgba(255, 237, 217, 0.95) 0%, rgba(254, 130, 41, 0.85) 55%, rgba(229, 90, 10, 0.95) 100%),
              url('../img/events/event-poster-1.jpg') center/cover no-repeat;
}

/* Red Failed / Error Radial Shine Banner */
.status-dialog-banner.banner-red {
  background: radial-gradient(circle at 50% 50%, rgba(255, 224, 224, 0.95) 0%, rgba(244, 67, 54, 0.85) 55%, rgba(211, 47, 47, 0.95) 100%),
              url('../img/events/event-poster-1.jpg') center/cover no-repeat;
}

/* Central Glowing Status Badge (151px x 151px) */
.status-dialog-badge {
  width: 151px;
  height: 151px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.badge-green {
  background: linear-gradient(135deg, #67DE4A 0%, #E2FFDB 100%);
  border: 8px solid #E2FFDB;
  color: #FFFFFF;
}

.badge-orange {
  background: linear-gradient(135deg, #FE8229 0%, #FFE0B2 100%);
  border: 8px solid #FFE0B2;
  color: #FFFFFF;
}

.badge-red {
  background: linear-gradient(135deg, #F44336 0%, #FFCDD2 100%);
  border: 8px solid #FFCDD2;
  color: #FFFFFF;
}

.status-badge-icon-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
}

.status-badge-icon-svg {
  width: 64px;
  height: 64px;
}

/* Text Content Area */
.status-dialog-body {
  width: 100%;
  padding: 32px 30px 0 30px;
  text-align: center;
  box-sizing: border-box;
}

.status-dialog-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  margin: 0 0 12px 0;
  letter-spacing: -0.01em;
}

.title-green {
  color: #3FB522;
}

.title-orange {
  color: #FE8229;
}

.title-red {
  color: #F44336;
}

.status-dialog-desc {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D;
  margin: 0 auto 30px auto;
  max-width: 480px;
}

/* Pill Button: Go To Home Page (221px x 59px) */
.btn-status-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 221px;
  height: 59px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 29.5px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #1B0009;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.btn-status-home:hover {
  border-color: #580024;
  background: #FAF6F0;
  color: #580024;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(88, 0, 36, 0.12);
}

.btn-status-home svg {
  flex-shrink: 0;
}

/* Optional Close X Button at Top Right */
.status-dialog-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #1B0009;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.status-dialog-close-btn:hover {
  background: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

@media (max-width: 640px) {
  .status-dialog-card {
    border-radius: 20px;
    padding: 10px 10px 26px 10px;
  }
  .status-dialog-banner {
    height: 260px;
    border-radius: 16px;
  }
  .status-dialog-badge {
    width: 110px;
    height: 110px;
    border-width: 6px;
  }
  .status-dialog-title {
    font-size: 24px;
    line-height: 30px;
  }
  .status-dialog-desc {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
  }
  .btn-status-home {
    width: 100%;
    max-width: 260px;
    height: 52px;
  }
}

/* Exact SVG Presentation Container */
/* Group 2085666449 - Figma dimensions: 646px x 690px (events/member/sahayta) & 646px x 604px (login) */
.status-svg-card-container {
  position: relative;
  width: 100%;
  max-width: 646px;
  height: auto;
  max-height: 94vh;
  aspect-ratio: 646 / 690;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: statusScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  margin: auto;
  box-sizing: border-box;
  background: #ffffff !important;
  border-radius: clamp(16px, 4vw, 28px);
  isolation: isolate;
}

.status-svg-card-container.modal-type-event-success,
.status-svg-card-container.modal-type-activation-process,
.status-svg-card-container.modal-type-member-success,
.status-svg-card-container.modal-type-sahayta-success {
  max-width: 646px;
  aspect-ratio: 646 / 690;
  height: auto;
}

.status-svg-card-container.modal-type-login-success,
.status-svg-card-container.modal-type-login-failed {
  max-width: 646px;
  aspect-ratio: 646 / 604;
  height: auto;
}

.status-svg-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  background: #ffffff;
  border-radius: clamp(16px, 4vw, 28px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
}

/* Clickable overlay hotspot for 'Go To Page' button in SVG (only for modals with page buttons) */
.status-svg-home-btn {
  position: absolute;
  bottom: 5.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 34.2%;
  height: 8.55%;
  border-radius: 29.5px;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.status-svg-home-btn:hover {
  background: rgba(88, 0, 36, 0.08);
  box-shadow: 0 0 0 2px #580024;
}

/* For login-success & login-failed: there is no button in the SVG, hide the invisible button hotspot */
.status-svg-card-container.modal-type-login-success .status-svg-home-btn,
.status-svg-card-container.modal-type-login-failed .status-svg-home-btn {
  display: none !important;
}

/* Status modal close button hidden as per design specification */
.status-svg-close-btn {
  display: none !important;
}

@media (max-width: 640px) {
  .status-svg-card-container {
    width: 100%;
    max-width: calc(100vw - 32px);
    height: auto;
  }

  /* ==========================================================================
     MOBILE-ONLY MODAL FIXES (DESKTOP REMAINS UNTOUCHED 100%)
     ========================================================================== */

  /* 1. Member Login Modal on Mobile */
  .split-login-modal {
    width: 92vw !important;
    max-width: 390px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 24px 20px 24px 20px !important;
    margin: auto !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .login-modal-visual {
    display: none !important;
  }

  .login-modal-form-wrap {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .login-modal-title {
    font-size: 28px !important;
    line-height: 34px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  .login-modal-subtitle {
    font-size: 13px !important;
    line-height: 18px !important;
    margin-bottom: 18px !important;
    text-align: center !important;
  }

  .login-form-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }

  .login-field-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .login-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }

  .login-form-control {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    font-size: 14px !important;
    padding: 0 46px 0 18px !important;
    border-radius: 26px !important;
    box-sizing: border-box !important;
  }

  /* Fix Remember me & Forgot password overlap on small screens */
  .login-options-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
  }

  .login-remember-label {
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .login-forgot-link {
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .btn-login-submit {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
    border-radius: 26px !important;
    box-sizing: border-box !important;
  }

  .login-register-prompt {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13.5px !important;
    margin-top: 16px !important;
    text-align: center !important;
  }

  /* 2. Step Modals Base on Mobile (Forgot Password, OTP, Set Password) */
  .auth-step-dialog,
  #forgotPasswordModal .auth-step-dialog,
  #otpVerificationModal .auth-step-dialog,
  #changePasswordModal .auth-step-dialog,
  #newPasswordModal .auth-step-dialog {
    width: 92vw !important;
    max-width: 400px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    padding: 24px 18px 24px 18px !important;
    border-radius: 20px !important;
    margin: auto !important;
    box-sizing: border-box !important;
  }

  .auth-step-topbar,
  #forgotPasswordModal .auth-step-topbar,
  #otpVerificationModal .auth-step-topbar,
  #changePasswordModal .auth-step-topbar,
  #newPasswordModal .auth-step-topbar {
    margin-bottom: 20px !important;
    height: 24px !important;
    min-height: 24px !important;
  }

  .auth-step-header-title,
  #changePasswordModal .auth-step-header-title,
  #newPasswordModal .auth-step-header-title {
    font-size: 17px !important;
    line-height: 22px !important;
  }

  .auth-step-back-btn,
  #changePasswordModal .auth-step-back-btn,
  #newPasswordModal .auth-step-back-btn {
    width: 24px !important;
    height: 24px !important;
  }

  .auth-step-hero-title,
  #forgotPasswordModal .auth-step-hero-title,
  #otpVerificationModal .auth-step-hero-title,
  #changePasswordModal .auth-step-hero-title,
  #newPasswordModal .auth-step-hero-title {
    font-size: 26px !important;
    line-height: 32px !important;
    height: auto !important;
    margin: 0 0 18px 0 !important;
    word-break: normal !important;
  }

  .auth-step-hero-desc,
  #otpVerificationModal .auth-step-hero-desc {
    font-size: 13px !important;
    line-height: 18px !important;
    margin: 0 0 18px 0 !important;
  }

  .auth-step-input,
  #forgotPasswordModal .auth-step-input,
  #changePasswordModal .auth-step-input,
  #newPasswordModal .auth-step-input {
    width: 100% !important;
    height: 52px !important;
    font-size: 14px !important;
    padding: 0 46px 0 18px !important;
    border-radius: 26px !important;
  }

  .auth-step-label,
  #forgotPasswordModal .auth-step-label,
  #changePasswordModal .auth-step-label,
  #newPasswordModal .auth-step-label {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }

  .auth-step-form-group,
  #changePasswordModal .auth-step-form-group,
  #newPasswordModal .auth-step-form-group {
    margin-bottom: 14px !important;
  }

  .auth-step-submit-btn,
  #forgotPasswordModal .auth-step-submit-btn,
  #otpVerificationModal .auth-step-submit-btn,
  #changePasswordModal .auth-step-submit-btn,
  #newPasswordModal .auth-step-submit-btn {
    width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
    margin-top: 24px !important;
    border-radius: 26px !important;
  }

  .auth-step-footer-prompt,
  #forgotPasswordModal .auth-step-footer-prompt {
    font-size: 13px !important;
    margin-top: 18px !important;
  }

  /* 3. OTP 6-Digit Grid on Mobile */
  #otpVerificationModal .auth-otp-grid {
    width: 100% !important;
    gap: 6px !important;
    justify-content: center !important;
  }

  #otpVerificationModal .auth-otp-cell {
    width: calc((100% - 30px) / 6) !important;
    max-width: 48px !important;
    height: 50px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
    padding: 0 !important;
  }

  #otpVerificationModal .auth-otp-resend-row {
    width: 100% !important;
    font-size: 12.5px !important;
    margin: 16px auto 0 auto !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ==================== SOURCE: events.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - PAST EVENTS PAGE STYLES
   Exact pixel-perfect replica of Group 2085666243.svg
   ========================================================================== */

/* --- Hero Banner with Exact Curved Arch PNG --- */
.events-hero-section {
  position: relative;
  width: 100%;
  min-height: 290px;
  background: url('../img/hero-banner.png?v=4.0.0') center top / 100% 100% no-repeat;
  background-color: transparent !important;
  padding: 60px 0 100px 0;
  text-align: center;
  overflow: hidden;
}

.events-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.events-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Albert Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #DAB580;
  margin-bottom: 8px;
}

.events-breadcrumb a {
  color: #DAB580;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.events-breadcrumb a:hover {
  color: #ffffff;
}

.events-breadcrumb .breadcrumb-separator {
  color: rgba(218, 181, 128, 0.6);
  font-size: 11px;
}

.events-breadcrumb .breadcrumb-current {
  color: #DAB580;
  opacity: 0.95;
}

.events-hero-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 46px;
  font-weight: 400;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: 0.01em;
  margin: 0;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* Redundant SVG curve hidden as hero-banner.png contains the exact curved arch and gold stroke */
.events-hero-curve {
  display: none !important;
}

/* --- Events Main Content Section --- */
.events-main-section {
  padding: 50px 0 100px 0;
  background-color: #ffffff;
  min-height: 800px;
}

/* --- Filter & Search Controls Header --- */
.events-controls-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 45px;
}

/* 1. Toggle Pill Switch (Upcoming / Past Events: 338px x 60px) */
.events-type-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  padding: 4px;
  width: 338px;
  height: 60px;
  max-width: 100%;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 32px;
  position: relative;
  box-sizing: border-box;
}

.toggle-option-btn {
  flex: 1 1 50%;
  padding: 0 16px;
  height: 50px;
  border-radius: 50px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 15.5px;
  line-height: 19px;
  font-weight: 500;
  color: #1B0009;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  border: none;
  background: transparent;
  user-select: none;
  text-transform: capitalize;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
}

.toggle-option-btn.active {
  background: #580024;
  color: #ffffff;
  font-weight: 600;
  border: none;
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.25);
  cursor: default;
}

.toggle-option-btn.active:hover {
  background: #580024 !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.25) !important;
  border: none !important;
}

.toggle-option-btn:not(.active):hover {
  background-color: rgba(94, 11, 43, 0.08);
  border: none;
  color: #5E0B2B;
  transform: translateY(-1px);
  box-shadow: none;
}

/* 2. Search Bar (Figma Frame 73: width 872px, height 60px, border-radius 40px) */
.events-search-form {
  width: 100%;
  max-width: 872px;
  height: 60px;
  background: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 40px;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  margin-bottom: 32px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.events-search-form:focus-within {
  border-color: #1B0009;
  box-shadow: 0 4px 18px rgba(27, 0, 9, 0.08);
}

.search-icon-wrap {
  color: #4D4D4D;
  font-size: 18px;
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.events-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1B0009;
  padding: 0 8px;
}

.events-search-input::placeholder {
  color: #4D4D4D;
  font-weight: 400;
}

.events-search-btn {
  width: 109px;
  height: 52px;
  background: #1B0009;
  color: #ffffff;
  border-radius: 60px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.events-search-btn:hover {
  background: #580024;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(88, 0, 36, 0.3);
}

/* 3. Year Filter Chips (Figma Group 2085666190 / Group 2085666188: Single line nowrap) */
.events-year-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 10px;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.year-filter-chip {
  flex-shrink: 0;
  white-space: nowrap;
  height: 51px;
  padding: 0 22px;
  background: #ffffff;
  border: none;
  outline: none;
  border-radius: 60px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1B0009;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-sizing: border-box;
}

.year-filter-chip.active {
  background: #1B0009;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 12px rgba(27, 0, 9, 0.2);
}

.year-filter-chip:hover:not(.active) {
  background-color: rgba(94, 11, 43, 0.08);
  border: none;
  color: #5e0b2b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(94, 11, 43, 0.1);
}

/* --- Events Grid (3 Columns: Figma 1320px width) --- */
.events-grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 40px auto 50px auto;
}

/* Individual Event Card (Exact Figma: width 424px, height 494px, border-radius 20px, border 1px solid #E4E4E4) */
.event-item-card {
  background: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 424px;
  max-width: 100%;
  min-height: 494px;
  height: auto;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease;
  position: relative;
  will-change: transform, box-shadow;
}

.event-item-card:hover {
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.09);
  border-color: #E2D5C3;
}

.event-item-card:hover .event-card-title {
  color: #580024;
}

.event-item-card:hover .event-card-btn {
  background: #580024;
  color: #ffffff;
  border-color: #580024;
  box-shadow: 0 6px 18px rgba(88, 0, 36, 0.35);
  transform: translateY(-2px);
}

/* Card Poster Image Wrapper */
.event-card-poster-wrap {
  width: 100%;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;
  cursor: pointer;
  flex-shrink: 0;
}

.event-card-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 16px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.event-item-card:hover .event-card-poster-img {
  transform: scale(1.04);
}

/* Hover overlay zoom badge */
.event-card-poster-wrap::after {
  content: '\f00e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(27, 0, 9, 0.7);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
  pointer-events: none;
}

.event-card-poster-wrap:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* Card Content Area */
.event-card-content {
  padding: 14px 12px 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
}

/* Date Badge (Image 2: Albert Sans 14 Regular, height 32px, background #FFF6EA, color #8E590C) */
.event-date-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  height: 32px;
  padding: 0 14px;
  box-sizing: border-box;
  background-color: #FFF6EA;
  color: #8E590C;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 20px;
  margin-bottom: 8px;
  transition: background-color 0.2s ease;
}

/* Event Title (Image 2: Heading 24px, Albert Sans, line-height 30px, color #1B0009) */
.event-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: #1B0009;
  margin-bottom: 8px;
  white-space: normal;
  overflow: visible;
  transition: color 0.2s ease;
}

.event-item-card:hover .event-card-title {
  color: #580024;
}

/* Meta Information (Image 3: Albert Sans 16, color #4D4D4D) */
.event-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: #4D4D4D;
  margin-bottom: 0;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
}

.meta-item i {
  color: #4D4D4D;
  font-size: 16px;
}

.meta-item-svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
}

.meta-item.meta-location {
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  word-break: break-word;
}

/* Card Divider with 40px spacing between details and button */
.event-card-divider {
  height: 1px;
  background-color: #E4E4E4;
  width: 100%;
  margin: 16px 0 16px 0;
}

/* Card Action Button (Image 4: 384px x 60px, 16px Regular, Spacing 40px) */
.event-card-btn {
  width: 384px;
  max-width: 100%;
  height: 60px;
  border-radius: 40px;
  border: 1px solid #E4E4E4;
  background: #ffffff;
  color: #1B0009;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  margin: 0 auto;
}

/* Specific styling for Upcoming Events buttons to match SVG */
#upcomingEventsGrid .event-card-btn {
  background: #1B0009;
  color: #ffffff;
  border: none;
}
#upcomingEventsGrid .event-item-card:hover .event-card-btn {
  background: #580024;
  color: #ffffff;
  border-color: #580024;
  box-shadow: 0 6px 18px rgba(88, 0, 36, 0.35);
  transform: translateY(-2px);
}
#upcomingEventsGrid .event-card-btn:hover {
  background: #580024;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.2);
}

.event-card-btn i {
  font-size: 14px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.event-card-btn:hover {
  background: #1B0009;
  color: #ffffff;
  border-color: #1B0009;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.2);
}

.event-card-btn:hover i {
  transform: translateX(4px);
}



/* --- Load More Section (Figma Group 1561299988: width 157px, height 48px, border-radius 40px) --- */
.events-load-more-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.btn-load-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 157px;
  height: 48px;
  border-radius: 40px;
  border: 1px solid #E4E4E4;
  background: #ffffff;
  color: #1B0009;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

.btn-load-more:hover {
  background: #1B0009;
  color: #ffffff;
  border-color: #1B0009;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.2);
}

.btn-load-more i {
  font-size: 14px;
  transition: transform 0.25s ease;
}

.btn-load-more:hover i {
  transform: translateX(4px);
}

.btn-load-more i {
  font-size: 13px;
  transition: transform 0.25s ease;
}

.btn-load-more:hover {
  background: #1B0009;
  color: #ffffff;
  border-color: #1B0009;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(27, 0, 9, 0.18);
}

.btn-load-more:hover i {
  transform: translateX(4px);
}

.btn-load-more.loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn-load-more.loading i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* Empty State / No Results */
.events-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 70px 20px;
  width: 100%;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #FFF6EA;
  color: #8E590C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 20px;
}

.empty-state-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1B0009;
  margin-bottom: 8px;
}

.empty-state-text {
  font-size: 15px;
  color: #666666;
  max-width: 420px;
  margin-bottom: 24px;
}

.btn-reset-filters {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  border-radius: 23px;
  background: #1B0009;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-reset-filters:hover {
  background: #580024;
  transform: translateY(-1px);
}

/* --- Event Detail Modal Styles --- */
.event-modal-dialog {
  max-width: 780px;
  background: #ffffff;
  color: #1B0009;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.event-modal-body {
  padding: 30px;
  max-height: 85vh;
  overflow-y: auto;
}

.event-modal-header-img {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  background-color: #f5f5f5;
}

.event-modal-header-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-modal-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-modal-badge-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.event-modal-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #1B0009;
  line-height: 1.3;
}

.event-modal-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background: #FAF8F5;
  padding: 18px 20px;
  border-radius: 14px;
  margin: 10px 0;
}

.modal-meta-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-meta-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FFF6EA;
  color: #8E590C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.modal-meta-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777777;
  font-weight: 600;
}

.modal-meta-value {
  font-size: 14.5px;
  font-weight: 600;
  color: #1B0009;
}

.event-modal-desc {
  font-size: 15px;
  line-height: 1.65;
  color: #4D4D4D;
}

.event-modal-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn-modal-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-modal-action.primary {
  background: #1B0009;
  color: #ffffff;
}

.btn-modal-action.primary:hover {
  background: #580024;
  transform: translateY(-2px);
}

.btn-modal-action.secondary {
  background: #ffffff;
  color: #1B0009;
  border: 1px solid #E4E4E4;
}

.btn-modal-action.secondary:hover {
  background: #FAF8F5;
  border-color: #1B0009;
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR EVENTS PAGE
   ========================================================================== */
@media (max-width: 1280px) {
  .events-grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .event-card-poster-wrap {
    height: 220px;
  }
}

@media (max-width: 1024px) {
  .events-hero-title {
    font-size: 42px;
  }
  .events-grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .events-search-form {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .events-hero-section {
    padding: 35px 16px 65px 16px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .events-hero-content {
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
  .events-hero-title {
    font-size: 32px;
    text-align: center;
    width: 100%;
  }
  .events-breadcrumb {
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .events-grid-container {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .events-type-toggle {
    display: flex !important;
    width: 100% !important;
    max-width: 340px !important;
    min-width: unset !important;
    height: 52px !important;
    padding: 4px !important;
    gap: 4px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .toggle-option-btn {
    flex: 1 1 50% !important;
    width: 50% !important;
    height: 44px !important;
    padding: 0 10px !important;
    font-size: 13.5px !important;
    border-radius: 30px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .events-search-form {
    height: 50px;
    padding: 3px 4px 3px 14px;
    gap: 4px;
  }
  .search-icon-wrap {
    font-size: 16px;
    margin-right: 6px;
    flex-shrink: 0;
  }
  .events-search-input {
    min-width: 0;
    font-size: 13.5px;
    padding: 0 4px;
  }
  .events-search-input::placeholder {
    font-size: 13.5px;
  }
  .events-search-btn {
    height: 42px;
    width: auto;
    min-width: 76px;
    padding: 0 14px;
    font-size: 13.5px;
    flex-shrink: 0;
  }
  .events-year-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 0 10px 8px 10px;
    max-width: 100%;
  }
  .events-year-filters::-webkit-scrollbar {
    display: none;
  }
  .year-filter-chip {
    height: 38px;
    padding: 0 16px;
    font-size: 13.5px;
  }
  .event-modal-meta-grid {
    grid-template-columns: 1fr;
  }
  .event-modal-header-img {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .events-main-section {
    padding: 30px 0 60px 0;
  }
  .events-controls-wrap {
    padding: 0 16px;
    margin-bottom: 30px;
  }
  .events-grid-container {
    padding: 0 16px !important;
    gap: 20px !important;
    margin-top: 24px !important;
    margin-bottom: 40px !important;
  }
  .events-hero-title {
    font-size: 28px;
  }
  .events-breadcrumb {
    font-size: 11px;
    letter-spacing: 0.16em;
  }
  .events-type-toggle {
    max-width: 310px !important;
    height: 48px !important;
    padding: 3px !important;
  }
  .toggle-option-btn {
    height: 42px !important;
    font-size: 12.5px !important;
    padding: 0 6px !important;
  }
  .events-search-form {
    height: 46px;
    padding: 2px 3px 2px 12px;
    gap: 2px;
  }
  .search-icon-wrap {
    font-size: 14px;
    margin-right: 4px;
  }
  .events-search-input {
    font-size: 12.5px;
    padding: 0 2px;
  }
  .events-search-input::placeholder {
    font-size: 12.5px;
  }
  .events-search-btn {
    height: 38px;
    min-width: 68px;
    padding: 0 12px;
    font-size: 12.5px;
  }
  .event-card-poster-wrap {
    height: 190px;
  }
  .event-item-card {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 18px !important;
    padding: 8px !important;
  }
  .event-card-content {
    padding: 12px 8px 8px 8px !important;
  }
  .event-date-badge {
    height: 28px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .event-card-title {
    font-size: 18px !important;
    line-height: 24px !important;
    white-space: normal !important;
    margin-bottom: 8px !important;
    min-height: auto;
  }
  .event-card-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 13.5px !important;
  }
  .meta-item {
    font-size: 13.5px !important;
    gap: 6px;
  }
  .meta-item i {
    font-size: 14px;
  }
  .meta-item.meta-location {
    max-width: 100%;
    white-space: normal;
  }
  .event-card-divider {
    margin: 12px 0 !important;
  }
  .event-card-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 30px !important;
    font-size: 14.5px !important;
  }
}

/* ==========================================================================
   EMPTY STATE STYLING (Frame 122.svg / Group 2085665726.svg)
   ========================================================================== */
.events-empty-state-wrap {
  width: 100%;
  padding: 60px 20px 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.events-empty-img {
  width: 100%;
  max-width: 322px;
  height: auto;
  margin-bottom: 24px;
  display: block;
}

.events-empty-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #4D4D4D;
  margin: 0;
  letter-spacing: -0.01em;
}



/* ==================== SOURCE: about-us.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - ABOUT US PAGE STYLES
   Exact pixel-perfect replica matching Figma design specifications
   ========================================================================== */

/* --- General Layout --- */
.about-page-main {
  width: 100%;
  background-color: #FFFFFF;
  overflow: hidden;
}

/* ==========================================================================
   FIGMA SECTION GOLD TAG (Group 2085666166)
   Albert Sans 16px/19px, letter-spacing 0.2em, uppercase
   Gradient: 90deg, #DAB580 0%, #8E590C 100%
   Vector diamonds: 8px x 8px, background: #EBC596
   ========================================================================== */
.section-gold-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #DAB580 0%, #8E590C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}

.section-gold-tag::before,
.section-gold-tag::after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #EBC596;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* Big Royal Section Headings */
.about-heading-lg {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #580024;
  margin: 0 0 20px 0;
}

.about-body-p {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D;
  margin-bottom: 18px;
}

.about-body-p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   SECTION 1: WELCOME TO ICAI DOHA CHAPTER (Group 2085666308: 1320px x 476px)
   ========================================================================== */
.about-welcome-section {
  background-color: #FFFFFF;
  padding: 80px 0;
  position: relative;
}

.about-welcome-grid {
  display: grid;
  grid-template-columns: 536px 648px;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}

.about-welcome-text {
  width: 536px;
  max-width: 100%;
}

.about-welcome-text .about-heading-lg {
  margin-bottom: 22px;
}

/* Staggered 2-Image Gallery (Group 2085666307: width 648px, height 476px) */
.welcome-images-staggered {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  width: 648px;
  height: 476px;
  position: relative;
}

/* Rectangle 544495: 312px x 476px, border-radius 20px */
.welcome-img-vertical-wrap {
  width: 312px;
  height: 476px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.welcome-img-vertical-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(94, 11, 43, 0.12);
}

.welcome-img-vertical {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rectangle 544496: 312px x 311px, border-radius 20px */
.welcome-img-square-wrap {
  width: 312px;
  height: 311px;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.welcome-img-square-wrap:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(94, 11, 43, 0.12);
}

.welcome-img-square {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   SECTION 2: MORE THAN A PROFESSIONAL NETWORK (OUR PURPOSE - Group 2085666321)
   ========================================================================== */
.about-mv-section {
  background-color: #FFFFFF;
  padding: 90px 0 100px 0;
  position: relative;
  text-align: center;
}

.about-mv-header {
  max-width: 1096px;
  margin: 0 auto 50px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-mv-header .about-heading-lg {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #1B0009;
  margin: 0 0 16px 0;
}

/* Subtitle: Albert Sans 16px/24px #4D4D4D, width 873px */
.about-mv-subtitle {
  width: 873px;
  max-width: 100%;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #4D4D4D;
  margin: 0 auto;
}

/* 3 Cards Grid (Group 2085666316: width 1016px) */
.about-mv-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 312px);
  justify-content: center;
  gap: 40px;
  max-width: 1016px;
  margin: 0 auto;
}

/* Rectangle 544497/544498/544499: 312px x 312px, border: 1px solid #E4E4E4, border-radius 20px */
.about-mv-card {
  width: 312px;
  height: 312px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 32px 20px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.about-mv-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  border-color: #E2D5C3;
  box-shadow: 0 16px 40px rgba(94, 11, 43, 0.08);
}

.about-mv-card:hover .about-mv-card-title {
  color: #6D173A;
}

/* Icons: 80px x 80px */
.about-mv-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-mv-figma-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.about-mv-card:hover .about-mv-figma-icon {
  transform: scale(1.08);
}

/* Card Title: Albert Sans 24px/29px #1B0009 */
.about-mv-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 29px;
  text-align: center;
  color: #1B0009;
  margin: 0 0 12px 0;
  transition: color 0.3s ease;
}

/* Card Text: Albert Sans 16px/20px #4D4D4D, width 272px */
.about-mv-card-text {
  width: 272px;
  max-width: 100%;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #4D4D4D;
  margin: 0 auto;
}

/* ==========================================================================
   SECTION 3: COMMUNITY HIGHLIGHT & STATS (Group 2085666322 - #F8F8F8 BACKGROUND)
   ========================================================================== */
.about-stats-highlight-section {
  background-color: #F8F8F8;
  padding: 100px 0 90px 0;
  position: relative;
  text-align: center;
  width: 100%;
}

/* Big Quote (Group 2085666309): Marcellus 48px/60px, max-width 1320px */
.about-quote-box {
  max-width: 1320px;
  margin: 0 auto 55px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-quote-text {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  text-align: center;
  color: #1B0009;
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 1320px;
}

.about-quote-text .highlight-maroon {
  color: #580024;
}

/* Stats Row (Group 2085666313: width 932px, height 87px) */
.about-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 932px;
  margin: 0 auto;
  position: relative;
}

.about-stat-item {
  flex: 1;
  padding: 0 24px;
  text-align: center;
  position: relative;
}

/* Dividers: Line 198, 199, 200: height 28px, border 1px solid #BEBEBE */
.about-stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: calc(50% - 14px);
  height: 28px;
  width: 1px;
  background: #BEBEBE;
}

/* Stat Number: Albert Sans 48px/58px #1B0009 */
.about-stat-num {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 58px;
  text-align: center;
  color: #1B0009;
  margin-bottom: 8px;
}

/* Stat Label: Albert Sans 16px/19px #4D4D4D */
.about-stat-label {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #4D4D4D;
}

/* ==========================================================================
   SECTION 4: TIMELINE - OUR JOURNEY THROUGH THE YEARS (Group 2085666325)
   ========================================================================== */
.about-timeline-section {
  background-color: #FFFFFF;
  padding: 90px 0 110px 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.about-timeline-header {
  margin-bottom: 50px;
  text-align: left;
}

.about-timeline-header .about-heading-lg {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #580024;
  margin: 0;
}

.about-timeline-horizontal-wrap {
  position: relative;
  width: 100%;
}

/* Dashed Line 201: border: 1px dashed #BEBEBE */
.about-timeline-horizontal-wrap::before {
  content: '';
  position: absolute;
  top: 59px;
  left: 0;
  width: 100%;
  height: 0px;
  border-top: 1px dashed #BEBEBE;
  z-index: 1;
  pointer-events: none;
}

.about-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  width: 1320px;
  max-width: 100%;
  position: relative;
  z-index: 2;
}

.timeline-step-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
}

/* Year Pill: Frame 103/104/105/106: padding: 6px 12px, border-radius: 20px, background: #FFFFFF */
.timeline-year-text {
  display: inline-block;
  padding: 5px 14px;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #EBEBEB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #1B0009;
  margin-bottom: 16px;
  white-space: nowrap;
}

/* Concentric Rings: Ellipse 4169 & 4170 (17px outer, 11px inner with 3px white border) */
.timeline-dot {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  border-radius: 50% !important;
  border: 1.5px solid #580024 !important;
  background-color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
  align-self: flex-start !important;
  transition: transform 0.25s ease;
}

.timeline-dot-inner {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  border-radius: 50% !important;
  background-color: #580024 !important;
  border: none !important;
  box-sizing: border-box !important;
  display: block !important;
}

.timeline-step-item:hover .timeline-dot {
  transform: scale(1.25);
}

/* Title: Albert Sans 20px/24px #1B0009 */
.timeline-step-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #1B0009;
  margin: 0 0 10px 0;
}

/* Description: Albert Sans 16px/19px #4D4D4D, width 272px */
.timeline-step-desc {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #4D4D4D;
  margin: 0;
  width: 272px;
  max-width: 100%;
}

/* ==========================================================================
   SECTION 5: GROW YOUR CAREER (Group 2085666332 - #F8F8F8 BACKGROUND)
   ========================================================================== */
.about-career-section {
  background-color: #F8F8F8;
  padding: 90px 0 110px 0;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.about-career-grid {
  display: grid;
  grid-template-columns: 648px 536px;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}

/* Left 2-Column Staggered Mosaic Grid (Group 2085666331: width 648px, height 784px) */
.career-mosaic-grid {
  flex: 0 0 648px;
  width: 648px;
  height: 784px;
  display: flex;
  gap: 24px;
  position: relative;
}

.mosaic-col {
  flex: 0 0 312px;
  width: 312px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Rectangle 544501: 312px x 380px, Rectangle 544504: 312px x 312px */
.mosaic-col-1 .mosaic-img-card:nth-child(1) {
  height: 380px;
}

.mosaic-col-1 .mosaic-img-card:nth-child(2) {
  height: 312px;
}

/* Rectangle 544502: 312px x 312px, Rectangle 544503: 312px x 380px */
.mosaic-col-2 {
  padding-top: 68px;
}

.mosaic-col-2 .mosaic-img-card:nth-child(1) {
  height: 312px;
}

.mosaic-col-2 .mosaic-img-card:nth-child(2) {
  height: 380px;
}

.mosaic-img-card {
  width: 312px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mosaic-img-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(94, 11, 43, 0.12);
}

.mosaic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Career Features Content (Group 2085666333: width 536px) */
.about-career-text {
  width: 536px;
  max-width: 100%;
  text-align: left;
}

.about-career-text .about-heading-lg {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #580024;
  margin: 0 0 18px 0;
}

.career-benefits-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.career-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* fi_15219750: width 20px, height 20px, fill: #580024 */
.career-check-icon-wrap {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.career-check-icon-wrap i {
  color: #580024;
  font-size: 16px;
}

.career-check-svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Benefit Title: Albert Sans 20px/24px #1B0009 */
.career-benefit-content h4 {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: #1B0009;
  margin: 0 0 6px 0;
}

/* Benefit Description: Albert Sans 16px/19px #4D4D4D, width 508px */
.career-benefit-content p {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  color: #4D4D4D;
  margin: 0;
  max-width: 508px;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1400px) {
  .about-welcome-grid,
  .about-career-grid,
  .about-timeline-section,
  .about-timeline-grid,
  .about-quote-box {
    width: 100%;
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .about-welcome-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .welcome-images-staggered {
    width: 100%;
  }

  .welcome-img-vertical-wrap {
    width: 50%;
  }

  .welcome-img-square-wrap {
    width: 50%;
  }

  .about-career-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .career-mosaic-grid {
    width: 100%;
    flex: 1;
  }

  .mosaic-col {
    width: 50%;
    flex: 1;
  }

  .mosaic-img-card {
    width: 100%;
  }
}

@media (max-width: 1024px) {
  .about-heading-lg,
  .about-quote-text {
    font-size: 38px;
    line-height: 48px;
  }

  .about-welcome-grid,
  .about-career-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-welcome-text,
  .about-career-text {
    width: 100%;
  }

  .about-mv-cards-grid {
    grid-template-columns: repeat(2, 312px);
  }

  .about-timeline-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .about-timeline-horizontal-wrap::before {
    display: none;
  }
}

@media (max-width: 992px) {
  .about-career-grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .career-mosaic-grid {
    width: 100% !important;
    max-width: 540px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    flex: none !important;
  }

  .mosaic-col {
    width: 100% !important;
    flex: none !important;
    gap: 16px !important;
  }

  .mosaic-col-2 {
    padding-top: 28px !important;
  }

  .mosaic-img-card {
    width: 100% !important;
    border-radius: 16px !important;
  }

  .mosaic-col-1 .mosaic-img-card:nth-child(1) {
    height: 220px !important;
  }

  .mosaic-col-1 .mosaic-img-card:nth-child(2) {
    height: 170px !important;
  }

  .mosaic-col-2 .mosaic-img-card:nth-child(1) {
    height: 170px !important;
  }

  .mosaic-col-2 .mosaic-img-card:nth-child(2) {
    height: 220px !important;
  }

  .about-career-text {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  .section-gold-tag {
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .section-gold-tag::before,
  .section-gold-tag::after {
    width: 6px !important;
    height: 6px !important;
  }

  .about-heading-lg {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .about-quote-text {
    font-size: 22px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
  }

  .welcome-images-staggered {
    flex-direction: column !important;
    height: auto !important;
  }

  .welcome-img-vertical-wrap {
    width: 100% !important;
    height: 260px !important;
  }

  .welcome-img-square-wrap {
    width: 100% !important;
    height: 200px !important;
  }

  .about-mv-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .about-mv-card {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }

  .about-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 16px !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .about-stat-item {
    flex: none !important;
    width: 100% !important;
    padding: 0 8px !important;
    text-align: center !important;
  }

  .about-stat-item:not(:last-child)::after {
    display: none !important;
  }

  .about-stat-num {
    font-size: 38px !important;
    line-height: 1.15 !important;
  }

  .about-stat-label {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    margin-top: 6px !important;
  }

  /* Vertical Timeline on Mobile */
  .about-timeline-horizontal-wrap::before {
    display: none !important;
  }

  .about-timeline-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    position: relative !important;
    padding-left: 32px !important;
    width: 100% !important;
  }

  .about-timeline-grid::before {
    content: '' !important;
    position: absolute !important;
    left: 8px !important;
    top: 14px !important;
    bottom: 24px !important;
    width: 0px !important;
    border-left: 2px dashed #BEBEBE !important;
  }

  .timeline-step-item {
    position: relative !important;
    padding-left: 0 !important;
    width: 100% !important;
  }

  .timeline-dot {
    position: absolute !important;
    left: -32px !important;
    top: 6px !important;
    margin-bottom: 0 !important;
  }

  .timeline-year-text {
    margin-bottom: 8px !important;
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
  }

  .timeline-step-desc {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Career Mosaic on Mobile */
  .about-career-section {
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .about-career-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    overflow: hidden !important;
  }

  .career-mosaic-grid {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex: none !important;
  }

  .mosaic-col {
    width: 100% !important;
    flex: none !important;
    gap: 12px !important;
  }

  .mosaic-col-2 {
    padding-top: 20px !important;
  }

  .mosaic-img-card {
    width: 100% !important;
    border-radius: 14px !important;
  }

  .mosaic-col-1 .mosaic-img-card:nth-child(1) {
    height: 180px !important;
  }

  .mosaic-col-1 .mosaic-img-card:nth-child(2) {
    height: 140px !important;
  }

  .mosaic-col-2 .mosaic-img-card:nth-child(1) {
    height: 140px !important;
  }

  .mosaic-col-2 .mosaic-img-card:nth-child(2) {
    height: 180px !important;
  }

  .about-career-text {
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-career-text .about-heading-lg {
    font-size: 30px !important;
    line-height: 38px !important;
  }

  .career-benefits-list {
    width: 100% !important;
    gap: 16px !important;
  }

  .career-benefit-item {
    width: 100% !important;
    gap: 14px !important;
  }

  .career-benefit-content {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .about-quote-box {
    margin-bottom: 35px !important;
    padding: 0 12px !important;
  }

  .section-gold-tag {
    font-size: 11.5px !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 10px !important;
  }

  .about-quote-text {
    font-size: 19px !important;
    line-height: 28px !important;
    padding: 0 4px !important;
  }
}


/* ==================== SOURCE: careers.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - CAREERS PAGE STYLES
   Exact replica matching Figma designs
   ========================================================================== */

/* --- General Layout --- */
.careers-main-section {
  width: 100%;
  background: #FFFFFF;
  padding: 80px 0 100px 0;
  overflow: hidden;
}

/* ==========================================================================
   COMBINED CONTAINER: GROUP 2085666427
   width: 1320px; height: 1109px; top: 492px
   ========================================================================== */
.careers-group-2085666427 {
  max-width: 1320px;
  width: 100%;
  height: 1109px;
  margin: 0 auto 100px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 1: SHAPE YOUR CAREER. GROW WITH OUR COMMUNITY.
   ========================================================================== */
.careers-shape-section {
  width: 100%;
  height: 360px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.careers-shape-left {
  width: 100%;
}

.careers-img-frame {
  width: 100%;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(94, 11, 43, 0.06);
  border: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.careers-img-frame:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.12);
}

.careers-shape-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.careers-img-frame:hover .careers-shape-img {
  transform: scale(1.05);
}

.careers-shape-right {
  text-align: left;
}

.careers-tag {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #DAB580;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 12px;
  display: block;
}

.careers-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 36px;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  width: fit-content;
  margin: 0 0 16px 0;
  font-weight: 500;
  line-height: 1.25;
}

.careers-desc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.68;
  color: #555555;
  margin: 0;
}

/* ==========================================================================
   SECTION 2: BUILD YOUR FUTURE WITH THE RIGHT OPPORTUNITIES
   ========================================================================== */
.careers-build-section {
  width: 100%;
  height: 628px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

.careers-build-left {
  text-align: left;
}

.careers-subheading {
  font-family: 'Albert Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111111;
  margin: 28px 0 20px 0;
}

.careers-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 24px;
}

.careers-benefit-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s ease;
  padding: 6px;
  border-radius: 12px;
}

.careers-benefit-item:hover {
  transform: translateX(4px);
}

.careers-benefit-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 4px;
}

.careers-benefit-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.careers-benefit-item:hover .careers-benefit-img {
  transform: scale(1.18) rotate(-4deg);
}

.careers-benefit-item h4 {
  font-family: 'Albert Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #111111;
  margin: 0;
  transition: color 0.3s ease;
}

.careers-benefit-item:hover h4 {
  color: #5E0B2B;
}

.careers-benefit-item p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

/* Right Column 3-Image Grid */
.careers-build-right-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  height: 628px;
}

.careers-grid-top {
  width: 100%;
  height: 270px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(94, 11, 43, 0.05);
  border: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.careers-grid-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.careers-grid-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  height: 338px;
}

.careers-grid-img-wrap {
  width: 100%;
  height: 338px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(94, 11, 43, 0.05);
  border: none;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.careers-grid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Specific position alignment for Souq Waqif tower photo to avoid bottom cutoff */
.careers-grid-img-wrap img[src*="careers-tower.png"] {
  object-position: center bottom;
}

/* Image Frame Hover Animations: Smooth Lift + Image Zoom (No Yellow Border) */
.careers-grid-top:hover,
.careers-grid-img-wrap:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.12);
}

.careers-grid-top:hover img,
.careers-grid-img-wrap:hover img {
  transform: scale(1.06);
}

/* ==========================================================================
   SECTION 3: VALUES THAT DRIVE OUR PURPOSE
   ========================================================================== */
.careers-values-section {
  max-width: 1320px;
  margin: 0 auto 90px auto;
  text-align: center;
}

.careers-values-header {
  max-width: 800px;
  margin: 0 auto 36px auto;
}

.careers-values-subdesc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.68;
  color: #666666;
  margin: 12px 0 0 0;
}

.careers-values-banner-container {
  width: 100%;
  max-width: 1320px;
  height: 540px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #0d1b2a;
}

/* Full-card Background Layers */
.values-banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Default state: full skyline image */
.values-banner-bg.bg-default {
  z-index: 1;
  opacity: 1;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%), url('../img/careers/banner-raw-clean.png');
}

/* Hover state layers: each covers the full card */
.values-banner-bg.bg-hover-1 {
  z-index: 2;
  opacity: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.68) 100%), url('../img/careers/val-hover-1.png');
  transform: scale(1.02);
}

.values-banner-bg.bg-hover-2 {
  z-index: 2;
  opacity: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.68) 100%), url('../img/careers/val-hover-2.png');
  transform: scale(1.02);
}

.values-banner-bg.bg-hover-3 {
  z-index: 2;
  opacity: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.68) 100%), url('../img/careers/val-hover-3.png');
  transform: scale(1.02);
}

.values-banner-bg.bg-hover-4 {
  z-index: 2;
  opacity: 0;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.68) 100%), url('../img/careers/val-hover-4.png');
  transform: scale(1.02);
}

/* Full-card hover triggers: CSS :has() + JS class fallback */
.careers-values-banner-container:has(.careers-value-col[data-col="1"]:hover) .bg-hover-1,
.careers-values-banner-container.is-hover-1 .bg-hover-1 {
  opacity: 1;
  transform: scale(1);
}

.careers-values-banner-container:has(.careers-value-col[data-col="2"]:hover) .bg-hover-2,
.careers-values-banner-container.is-hover-2 .bg-hover-2 {
  opacity: 1;
  transform: scale(1);
}

.careers-values-banner-container:has(.careers-value-col[data-col="3"]:hover) .bg-hover-3,
.careers-values-banner-container.is-hover-3 .bg-hover-3 {
  opacity: 1;
  transform: scale(1);
}

.careers-values-banner-container:has(.careers-value-col[data-col="4"]:hover) .bg-hover-4,
.careers-values-banner-container.is-hover-4 .bg-hover-4 {
  opacity: 1;
  transform: scale(1);
}

.careers-values-banner-container:has(.careers-value-col:hover) .bg-default,
.careers-values-banner-container[class*="is-hover-"] .bg-default {
  opacity: 0;
}

.careers-value-col {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 0 16px 45px 16px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  z-index: 5;
  background: transparent;
  transition: background-color 0.3s ease;
}

.careers-value-col[data-col="1"] { grid-column: 1; }
.careers-value-col[data-col="2"] { grid-column: 2; }
.careers-value-col[data-col="3"] { grid-column: 3; }
.careers-value-col[data-col="4"] { grid-column: 4; }

.careers-value-col:hover,
.careers-values-banner-container.is-hover-1 .careers-value-col[data-col="1"],
.careers-values-banner-container.is-hover-2 .careers-value-col[data-col="2"],
.careers-values-banner-container.is-hover-3 .careers-value-col[data-col="3"],
.careers-values-banner-container.is-hover-4 .careers-value-col[data-col="4"] {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Vertical divider line: white with 20% opacity */
.careers-value-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.20);
  z-index: 10;
  pointer-events: none;
}

.careers-value-content {
  width: 100%;
  max-width: 272px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 5;
  opacity: 1;
  user-select: text;
  transition: transform 0.3s ease;
}

.careers-value-col:hover .careers-value-content {
  transform: translateY(-4px);
}

/* Group 1561305142-1561305145: Albert Sans, 400, 20px, line-height: 24px, #FFFFFF */
.careers-value-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #FFFFFF;
  margin: 0;
}

/* Group 1561305142-1561305145: Albert Sans, 400, 16px, line-height: 19px, rgba(255, 255, 255, 0.6) */
.careers-value-desc {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ==========================================================================
   SECTION 4: OPEN POSITIONS AVAILABLE
   ========================================================================== */
.careers-jobs-section {
  max-width: 1320px;
  margin: 0 auto;
  text-align: center;
}

.careers-jobs-header {
  max-width: 800px;
  margin: 0 auto 28px auto;
}

.careers-jobs-subdesc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.68;
  color: #666666;
  margin: 12px 0 0 0;
}

.careers-jobs-section {
  padding: 0 0 100px 0;
  max-width: 1320px;
  margin: 0 auto;
}

.careers-jobs-header {
  text-align: center;
  margin-bottom: 48px;
}

.careers-jobs-subdesc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  max-width: 780px;
  margin: 12px auto 0 auto;
  line-height: 1.5;
}

.careers-jobs-grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.careers-job-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #EAEAEA;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  padding: 30px 28px;
  text-align: left;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: all 0.3s ease;
  position: relative;
}

.careers-job-card:hover {
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  border-color: #EAEAEA;
  box-shadow: 0 10px 25px rgba(112, 19, 50, 0.06);
  transform: translateY(-4px);
}

.job-pill-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.job-pill {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #4D4D4D;
  background: #F5F5F5;
  border: 1px solid #EBEBEB;
  padding: 5px 14px;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.careers-job-card:hover .job-pill {
  background: #FFFFFF;
  border-color: #EBEBEB;
  color: #333333;
}

.job-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 16px 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.careers-job-card:hover .job-title {
  color: #6B1135;
}

.job-divider-line {
  width: 100%;
  height: 1px;
  background-color: #EAEAEA;
  margin-bottom: 18px;
}

.job-desc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #555555;
  margin: 0 0 28px 0;
  flex-grow: 1;
}

.job-desc strong {
  color: #1A1A1A;
  font-weight: 600;
}

.btn-job-apply {
  height: 44px;
  padding: 0 24px;
  border-radius: 30px;
  border: 1px solid #E2E2E2;
  background: #ffffff;
  color: #333333;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-job-apply i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.careers-job-card:hover .btn-job-apply,
.btn-job-apply:hover {
  background: #6B1135;
  color: #ffffff;
  border-color: #6B1135;
  box-shadow: 0 4px 14px rgba(107, 17, 53, 0.25);
}

.btn-job-apply:hover i {
  transform: translateX(3px);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .careers-group-2085666427 {
    height: auto;
    gap: 60px;
  }

  .careers-shape-section,
  .careers-build-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
    height: auto;
  }

  .careers-build-right-grid {
    height: auto;
  }

  .careers-img-frame {
    height: auto;
    aspect-ratio: 16/9;
  }

  .careers-values-section,
  .careers-jobs-section {
    padding: 0 24px;
  }

  .careers-values-banner-container {
    height: auto;
    min-height: 480px;
    grid-template-columns: repeat(2, 1fr);
    background-color: #0d1b2a;
    gap: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  .careers-value-col {
    padding: 36px 20px;
    height: auto;
    min-height: 220px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .careers-value-col[data-col="1"] { grid-column: 1; grid-row: 1; }
  .careers-value-col[data-col="2"] { grid-column: 2; grid-row: 1; }
  .careers-value-col[data-col="3"] { grid-column: 1; grid-row: 2; }
  .careers-value-col[data-col="4"] { grid-column: 2; grid-row: 2; }

  .careers-value-col[data-col="3"],
  .careers-value-col[data-col="4"] {
    border-bottom: none;
  }

  .careers-value-col:nth-child(even)::after {
    display: none;
  }

  .careers-jobs-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .careers-title {
    font-size: 28px;
    text-align: center;
  }

  .careers-tag {
    text-align: center;
    display: block;
    margin: 0 auto 10px auto;
  }

  .careers-desc {
    text-align: center;
  }

  .careers-shape-right,
  .careers-build-left {
    text-align: center;
    align-items: center;
  }

  .careers-subheading {
    text-align: center;
    margin: 24px 0 20px 0;
  }

  .careers-benefit-list {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 440px;
    margin: 0 auto;
  }

  .careers-benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 16px;
    gap: 8px;
  }

  .careers-benefit-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 6px auto;
  }

  .careers-benefit-item h4 {
    text-align: center;
  }

  .careers-benefit-item p {
    text-align: center;
    max-width: 320px;
    margin: 0 auto;
  }

  .careers-grid-top {
    height: auto;
    aspect-ratio: 16/9;
  }

  .careers-grid-bottom {
    grid-template-columns: 1fr;
    height: auto;
  }

  .careers-grid-img-wrap {
    height: auto;
    aspect-ratio: 16/9;
  }

  .careers-jobs-grid-6 {
    grid-template-columns: 1fr;
  }

  .careers-values-banner-container {
    grid-template-columns: 1fr;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    height: auto;
    border-radius: 20px;
    gap: 0;
    overflow: hidden;
    position: relative;
    background-color: #0d1b2a;
  }

  /* Default image visible across the entire mobile card */
  .careers-values-banner-container .values-banner-bg.bg-default {
    opacity: 1 !important;
    display: block !important;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.70) 100%), url('../img/careers/val-mob-1.png');
    background-size: cover;
    background-position: center;
  }

  /* Mobile-specific vertical hover/touch images */
  .values-banner-bg.bg-hover-1 {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.70) 100%), url('../img/careers/val-mob-1.png');
  }

  .values-banner-bg.bg-hover-2 {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.70) 100%), url('../img/careers/val-mob-2.png');
  }

  .values-banner-bg.bg-hover-3 {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.70) 100%), url('../img/careers/val-mob-3.png');
  }

  .values-banner-bg.bg-hover-4 {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.70) 100%), url('../img/careers/val-mob-4.png');
  }

  .careers-value-col {
    grid-column: 1 !important;
    grid-row: auto !important;
    border: none;
    border-radius: 0;
    background: transparent;
    min-height: 140px;
    padding: 24px 18px;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .careers-value-col::after {
    display: none;
  }

  .careers-value-col:last-child {
    border-bottom: none;
  }

  .careers-value-col:hover,
  .careers-value-col:active,
  .careers-values-banner-container.is-hover-1 .careers-value-col[data-col="1"],
  .careers-values-banner-container.is-hover-2 .careers-value-col[data-col="2"],
  .careers-values-banner-container.is-hover-3 .careers-value-col[data-col="3"],
  .careers-values-banner-container.is-hover-4 .careers-value-col[data-col="4"] {
    background: rgba(255, 255, 255, 0.10);
  }

  .careers-value-title {
    font-size: 18px;
    line-height: 22px;
  }

  .careers-value-desc {
    font-size: 13.5px;
    line-height: 17px;
    max-width: 250px;
  }
}


/* ==================== SOURCE: chairperson-message.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - CHAIRPERSON MESSAGE PAGE STYLES
   Exact pixel-perfect replica and responsive implementation of Chairperson Message.svg
   ========================================================================== */

/* --- Chairperson Page Main Container --- */
.chairperson-page-main {
  position: relative;
  width: 100%;
  padding: 55px 0 95px 0;
  background-color: #ffffff;
  overflow: hidden;
}

/* ==========================================================================
   SECTION 1: FEATURED CHAIRPERSON CARD (Figma Rectangle 544479 - #380017)
   ========================================================================== */
.chairperson-featured-card {
  position: relative;
  width: 100%;
  max-width: 1320px;
  min-height: 772px;
  margin: 0 auto 75px auto;
  background-color: #380017;
  border-radius: 20px;
  box-shadow: 0 16px 45px rgba(56, 0, 23, 0.18), 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Layer 1: Background Dotted Qatar Map Pattern */
.chairperson-bg-pattern {
  position: absolute;
  top: 20px;
  left: 30px;
  width: 640px;
  max-width: 55%;
  height: auto;
  pointer-events: none;
  z-index: 1;
  opacity: 0.95;
}

.chairperson-pattern-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Group 2085666115: Large Quote Mark in Top Right (width: 173.55px, height: 145px) */
.chairperson-quote-watermark {
  position: absolute;
  top: 0px;
  right: 25px;
  width: 174px;
  height: 145px;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

.chairperson-quote-watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Card Content Inner Container: 2-Column Grid (height: 772px) */
.chairperson-card-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 631px 1fr;
  align-items: end;
  gap: 0;
  padding: 0 40px 0 0;
  min-height: 772px;
}

/* Group 2085666183: Left Column (Chairperson Portrait - width: 630.96px, height: 731.72px) */
.chairperson-portrait-col {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  width: 631px;
  max-width: 631px;
  align-self: end;
}

.chairperson-portrait-wrap {
  position: relative;
  width: 631px;
  height: 731.72px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  line-height: 0;
  overflow: hidden;
}

.chairperson-portrait-img {
  width: 631px;
  height: 731.72px;
  object-fit: cover;
  object-position: top center;
  display: block;
  -webkit-mask-image: linear-gradient(178.93deg, #000000 72%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(178.93deg, #000000 72%, rgba(0, 0, 0, 0) 100%);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.35));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.chairperson-featured-card:hover .chairperson-portrait-img {
  transform: scale(1.015);
}

/* Group 2085666139: Right Column (Text Content - width: 521px, height: 558px, top: 112px) */
.chairperson-text-col {
  position: relative;
  color: #F7EFE7;
  padding-top: 112px;
  padding-bottom: 40px;
  width: 521px;
  max-width: 521px;
  min-height: 558px;
  z-index: 3;
  justify-self: end;
}

/* Tag / Badge */
.chairperson-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #DAB580;
  margin-bottom: 12px;
}

.chairperson-badge .diamond {
  font-size: 10px;
  color: #DAB580;
}

/* Chairperson Name */
.chairperson-name-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  color: #F0DCBE;
  margin: 0 0 20px 0;
  letter-spacing: 0.01em;
}

/* Salutation */
.chairperson-salutation {
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}

/* Paragraphs */
.chairperson-bio-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chairperson-bio-paragraphs p {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.68;
  color: rgba(247, 239, 231, 0.88);
  margin: 0;
  text-align: left;
}

/* ==========================================================================
/* ==========================================================================
   SECTION 2: OUR VISION FOR THE CHAPTER AHEAD
   Figma Exact Spec:
   - Left Column (Group 2085666412): 760px width, 781px height, top: 1344px, left: 300px
   - Right Column: 536px width, 378px height each (Rectangle 544518 & 544519), rx: 20px
   - Gap: 24px (760px + 24px + 536px = 1320px container)
   - Vertical Gap between images: 25px (378px + 25px + 378px = 781px total height)
   ========================================================================== */
.vision-section-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.vision-grid-layout {
  display: grid;
  grid-template-columns: 760px 536px;
  gap: 24px;
  align-items: start;
  justify-content: space-between;
  min-height: 781px;
}

/* Left Column: Vision Content (Group 2085666412 - 760px x 781px) */
.vision-content-col {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  min-height: 781px;
  justify-content: flex-start;
}

.vision-heading {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  width: fit-content;
  margin: 0 0 24px 0;
  letter-spacing: -0.01em;
}

.vision-text-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.vision-text-block p {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D;
  margin: 0;
  text-align: left;
}

.vision-focus-intro {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D !important;
}

/* Vision Bullet Checklist (Figma Group 2085666417) */
.vision-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vision-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: #4D4D4D;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
  cursor: default;
}

.vision-checklist li:hover {
  transform: translateX(4px);
  color: #1B0009;
}

.vision-checklist .check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vision-checklist li:hover .check-icon {
  transform: scale(1.2);
}

.vision-checklist .check-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Sign-off styling */
.vision-signoff {
  margin-top: 14px;
}

.vision-signoff .signoff-regards {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D;
  margin: 0;
}

/* Right Column: Stacked Image Gallery (Rectangle 544518 & Rectangle 544519: 536px x 378px) */
.vision-gallery-col {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
  max-width: 536px;
}

.vision-image-card {
  position: relative;
  width: 536px;
  height: 378px;
  border-radius: 20px;
  overflow: hidden;
  background: #D9D9D9;
  box-shadow: 0 4px 16px rgba(88, 0, 37, 0.06);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.vision-image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(88, 0, 37, 0.12);
}

.vision-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rectangle 544519 Horizontal Matrix Flip */
.vision-image-card.card-flipped .vision-card-img {
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1366px) {

  .chairperson-featured-card,
  .vision-section-container {
    max-width: 100%;
    margin-left: 20px;
    margin-right: 20px;
  }

  .vision-grid-layout {
    grid-template-columns: 1fr 500px;
    gap: 24px;
  }

  .vision-image-card {
    width: 100%;
    height: 350px;
  }
}

@media (max-width: 1200px) {
  .chairperson-card-inner {
    grid-template-columns: 440px 1fr;
    gap: 20px;
    padding-right: 35px;
  }

  .chairperson-portrait-col {
    width: 440px;
    max-width: 440px;
  }

  .chairperson-portrait-wrap {
    width: 440px;
  }

  .chairperson-portrait-img {
    width: 440px;
  }

  .chairperson-name-title {
    font-size: 38px;
  }

  .vision-grid-layout {
    grid-template-columns: 1fr 420px;
    gap: 24px;
  }

  .vision-image-card {
    width: 100%;
    height: 300px;
  }
}

@media (max-width: 992px) {
  .chairperson-featured-card {
    border-radius: 18px;
    margin: 0 auto 45px auto !important;
    background-size: cover;
    max-width: 100%;
  }

  .chairperson-bg-pattern {
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 90% !important;
    width: 100% !important;
    top: 10px !important;
    opacity: 0.6 !important;
  }

  .chairperson-card-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 24px 30px 24px;
    text-align: left;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .chairperson-portrait-col {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    padding-top: 30px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .chairperson-portrait-wrap {
    width: 100% !important;
    max-width: 360px !important;
    height: auto;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    margin: 0 auto !important;
  }

  .chairperson-portrait-img {
    width: 100%;
    height: auto;
    max-height: 440px;
    object-position: top center;
    margin: 0 auto !important;
  }

  .chairperson-text-col {
    padding: 25px 0 0 0;
    width: 100%;
    max-width: 100%;
  }

  .chairperson-name-title {
    font-size: 32px;
  }

  .chairperson-quote-watermark {
    font-size: 140px;
    top: 5px;
    right: 20px;
  }

  .vision-grid-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .vision-content-col {
    max-width: 100%;
  }

  .vision-gallery-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 100%;
  }

  .vision-image-card {
    width: 100%;
    height: 260px;
  }
}

@media (max-width: 768px) {
  .chairperson-page-main {
    padding: 35px 0 65px 0;
  }

  .chairperson-featured-card,
  .vision-section-container {
    margin: 0 auto 35px auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .chairperson-card-inner {
    padding: 0 16px 25px 16px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .chairperson-portrait-col {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .chairperson-portrait-wrap {
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  .chairperson-portrait-img {
    margin: 0 auto !important;
  }

  .chairperson-name-title {
    font-size: 27px;
    margin-bottom: 14px;
  }

  .chairperson-bio-paragraphs p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .vision-heading {
    font-size: 28px;
    margin-bottom: 18px;
  }

  .vision-text-block p {
    font-size: 13.5px;
    line-height: 1.65;
  }

  .vision-gallery-col {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vision-image-card {
    width: 100%;
    height: 240px;
  }
}

@media (max-width: 480px) {
  .chairperson-name-title {
    font-size: 23px;
  }

  .chairperson-badge {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .vision-checklist li {
    font-size: 13px;
  }
}

/* ==================== SOURCE: contact-us.css ==================== */

/* --- General Layout --- */
.contact-page-main {
  width: 100%;
  background-color: #FFFFFF;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

.contact-page-main .container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ==========================================================================
   SECTION 1: HELP GRID (LEFT INFO CARD & RIGHT FORM CARD) (GROUP 2085666379)
   width: 1320px; height: 628px; left: 300px; top: 492px
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 536px 760px;
  gap: 24px;
  width: 1320px;
  max-width: 1320px;
  margin: 0 auto 80px auto;
  align-items: stretch;
}

/* Common Card Style (Rectangle 544513: 536px x 628px & Rectangle 544512: 760px x 628px) */
.contact-card-wrap {
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid #E4E4E4;
  padding: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.contact-info-card {
  width: 536px;
  min-height: 628px;
  justify-content: flex-start;
}

.contact-form-card {
  width: 760px;
  min-height: 628px;
  justify-content: space-between;
}

/* Left Card: We're Here to Help You (Group 2085666376) */
.contact-card-header {
  margin-bottom: 0;
}

.contact-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: #6D173A;
  margin: 0 0 18px 0;
}

.contact-card-subtitle {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D;
  margin: 0;
}

/* Contact Info Details (Group 2085665879) */
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
}

/* Ellipse 3609: 60px x 60px, background: #FFFFFF, border: 1px solid #E4E4E4 */
.contact-info-icon-wrap {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.contact-info-inner-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.contact-info-inner-circle svg {
  width: 28px;
  height: 28px;
}

.contact-info-item:hover .contact-info-icon-wrap {
  border-color: #6D173A;
  background: rgba(109, 23, 58, 0.04);
}

.contact-info-item:hover .contact-info-inner-circle {
  transform: scale(1.1);
}

.contact-info-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info-content h4 {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #4D4D4D;
  margin: 0 0 5px 0;
}

.contact-info-content.address-content h4 {
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #4D4D4D;
  margin: 0 0 4px 0;
}

.contact-info-content p,
.contact-info-content a {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #1B0009;
  text-decoration: none;
  margin: 0;
}

.contact-info-content a:hover {
  color: #6D173A;
  text-decoration: underline;
}

/* Horizontal Divider Line 120 (488px width) */
.contact-divider-line {
  width: 100%;
  height: 1px;
  background-color: #E4E4E4;
  border: none;
  margin: 20px 0 16px 0;
}

/* Social Section: Follow Us On (Group 2085665862) */
.contact-social-section {
  margin-top: 0;
}

.contact-social-section h4 {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  color: #1B0009;
  margin: 0 0 14px 0;
}

.contact-social-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid #E4E4E4;
  background-color: #FFFFFF;
  font-size: 24px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.contact-social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.contact-social-btn svg {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform 0.25s ease;
}

.contact-social-btn:hover svg {
  transform: scale(1.1);
}

/* Right Side: How Can We Help Form Header (Group 2085665559) */
.contact-form-header {
  margin-bottom: 20px;
}

.contact-form-title {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  line-height: 75px;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%), #1B0009;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 12px 0;
}

.contact-form-subtitle {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #4D4D4D;
  margin: 0;
}

/* Form Inputs Grid (712px width: 344px + 344px + 24px gap) */
.contact-form-row {
  display: grid;
  grid-template-columns: 344px 344px;
  gap: 20px 24px;
}

.contact-form-group {
  margin-bottom: 0;
  text-align: left;
}

.contact-form-group.full-width {
  grid-column: span 2;
}

.contact-input-label {
  display: block;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #4D4D4D;
  margin-bottom: 9px;
}

/* Pill Form Controls (Rectangle 7: height 60px, border-radius 60px) */
.contact-form-control {
  width: 100%;
  height: 60px;
  padding: 0 24px;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #1B0009;
  outline: none;
  background: #FFFFFF;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  box-sizing: border-box;
}

.contact-form-control::placeholder {
  color: #888888;
  opacity: 1;
}

.contact-form-control:focus {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.08);
}

/* Phone input container with Qatar Flag and prefix */
.contact-phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-phone-wrap:focus-within {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.08);
}

.contact-phone-prefix-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.contact-phone-prefix-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #1B0009;
  height: 100%;
  outline: none;
  user-select: none;
}

.contact-phone-wrap.open {
  z-index: 1000 !important;
}

.contact-form-group:has(.contact-phone-wrap.open) {
  position: relative;
  z-index: 1000 !important;
}

.flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 15px;
}

.flag-selected-img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
}

.flag-qatar {
  display: block;
  border-radius: 2px;
}

.prefix-code {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #1B0009;
  font-weight: 400;
}

.prefix-arrow {
  font-size: 12px;
  color: #4D4D4D;
  margin-left: 2px;
  transition: transform 0.25s ease;
}

.contact-phone-prefix-dropdown.open .prefix-arrow,
.contact-phone-wrap.open .prefix-arrow {
  transform: rotate(180deg);
}

.prefix-divider {
  width: 1px;
  height: 20px;
  background-color: #E4E4E4;
  margin: 0 12px;
}

/* Dropdown Menu for Countries (Matching Member Registration Style) */
.country-dropdown-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 230px;
  max-height: 280px;
  overflow-y: auto;
  background: #FFFFFF !important;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 99999 !important;
  display: none;
  opacity: 1;
}

.country-dropdown-list::-webkit-scrollbar {
  width: 4px;
}
.country-dropdown-list::-webkit-scrollbar-track {
  background: #F9F9F9;
  border-radius: 4px;
}
.country-dropdown-list::-webkit-scrollbar-thumb {
  background: #E4E4E4;
  border-radius: 4px;
}

.contact-phone-prefix-dropdown.open .country-dropdown-list,
.contact-phone-wrap.open .country-dropdown-list {
  display: block;
  animation: fadeInDownPhone 0.2s ease forwards;
}

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

.country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  cursor: pointer;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #1B0009;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.country-option:hover,
.country-option.active {
  background-color: #FDF4F7;
  color: #6D173A;
}

.country-option:first-child {
  border-radius: 20px 20px 0 0;
  padding-top: 14px;
}

.country-option:last-child {
  border-radius: 0 0 20px 20px;
  padding-bottom: 14px;
}

.country-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  display: block;
}

.country-option .country-name {
  flex: 1;
  font-size: 14px;
  color: inherit;
}

.contact-phone-number-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #1B0009;
  padding: 0;
}

.contact-phone-number-input::placeholder {
  color: #888888;
  opacity: 1;
}

/* Dropdown select styling */
select.contact-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D4D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 15px;
  padding-right: 48px;
  cursor: pointer;
}

/* Terms Checkbox Row */
.contact-terms-row {
  display: flex;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 22px;
}

.contact-terms-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: #4D4D4D;
  cursor: pointer;
  user-select: none;
}

.contact-terms-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border: 1px solid #E4E4E4;
  border-radius: 3.5px;
  accent-color: #6D173A;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.contact-terms-label a {
  color: #6D173A;
  text-decoration: underline;
  font-weight: 500;
  transition: color 0.2s ease;
}

.contact-terms-label a:hover {
  color: #841238;
}

/* Form Submit Button (Group 2085665565: 260px x 60px) */
.btn-contact-submit {
  width: 260px;
  height: 60px;
  border-radius: 60px;
  background: #1B0009;
  color: #FFFFFF;
  border: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 16px rgba(27, 0, 9, 0.15);
}

.btn-contact-submit:hover {
  background: #5E0B2B;
  box-shadow: 0 8px 24px rgba(94, 11, 43, 0.25);
  transform: translateY(-2px);
}

.btn-contact-submit i {
  font-size: 14px;
  transition: transform 0.25s ease;
}

.btn-contact-submit:hover i {
  transform: translateX(4px);
}

/* ==========================================================================
   SECTION 2: CONTACT OUR EXPERTS (RECTANGLE 544512)
   width: 1320px; height: 382px; border-radius: 20px;
   background: #FFFFFF; border: 1px solid #E4E4E4;
   ========================================================================== */
.contact-experts-section {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto 60px auto;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 40px 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.experts-header {
  width: 878px;
  max-width: 100%;
  margin: 0 auto 36px auto;
}

/* Contact Our Experts: font-family Marcellus, 48px on Desktop, line-height 56px */
.experts-title {
  font-family: 'Marcellus', serif;
  font-size: 48px;
  line-height: 56px;
  font-weight: 400;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%), #0F022D;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 16px 0;
  text-align: center;
}

/* Subtitle: 16px/24px, #4D4D4D */
.experts-subtitle {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: #4D4D4D;
  margin: 0;
  text-align: center;
}

/* 2 Cards Grid */
.experts-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

/* Rectangle 544515: width 424px, height 208px, border-radius 20px */
.expert-card {
  width: 424px;
  height: 208px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  box-sizing: border-box;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.expert-card:hover {
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  border-color: #E2D5C3;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(109, 23, 58, 0.08);
}

.expert-card:hover .expert-name {
  color: #6D173A;
}

/* Rectangle 544516: width 176px, height 192px, border-radius 16px */
.expert-avatar-wrap {
  width: 176px;
  height: 192px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(203.02deg, #FDF4E9 11.56%, #B5A080 88.85%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.expert-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Group 2085665498: Info Box */
.expert-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
}

/* CA Dhaval Shah: 20px/24px, weight 500, #1B0009 */
.expert-name {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: #1B0009;
  margin: 0 0 12px 0;
}

/* Contact Rows: 14px/18px DM Sans */
.expert-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 18px;
  color: #4D4D4D;
  margin-bottom: 6px;
}

.expert-contact-row:last-child {
  margin-bottom: 0;
}

.expert-contact-row i {
  color: #6D173A;
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.expert-contact-row a {
  color: #4D4D4D;
  text-decoration: none;
  transition: color 0.2s ease;
}

.expert-contact-row a:hover {
  color: #6D173A;
  text-decoration: underline;
}

/* ==========================================================================
   SECTION 3: GOOGLE MAPS EMBED (RECTANGLE 544511)
   width: 1320px; height: 560px; left: calc(50% - 1320px/2); top: 1734px;
   ========================================================================== */
.contact-map-section {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid #E8DFD5;
  height: 560px;
  box-sizing: border-box;
}

.contact-map-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
    width: 100%;
    height: auto;
    padding: 0;
    gap: 30px;
  }

  .contact-info-card,
  .contact-form-card {
    width: 100%;
    max-width: 100%;
    min-height: auto;
  }

  .contact-experts-section {
    height: auto;
    min-height: auto;
    padding: 40px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .experts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .expert-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

  .contact-map-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 450px;
  }
}

@media (max-width: 768px) {
  .contact-page-main .container {
    padding: 0 10px;
  }

  .contact-card-wrap {
    padding: 24px 16px;
  }

  .contact-form-title {
    font-size: 36px;
    line-height: 44px;
  }

  .contact-form-row {
    grid-template-columns: 1fr;
  }

  .contact-form-group.full-width {
    grid-column: span 1;
  }

  .country-dropdown-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 230px;
    max-width: 85vw;
    max-height: 280px;
    border-radius: 20px;
  }

  .contact-experts-section {
    padding: 32px 16px !important;
    border-radius: 16px !important;
    height: auto !important;
    min-height: auto !important;
  }

  .experts-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 24px auto !important;
  }

  .experts-title {
    font-size: 32px !important;
    line-height: 40px !important;
    margin-bottom: 10px !important;
  }

  .experts-subtitle {
    font-size: 14.5px !important;
    line-height: 22px !important;
    max-width: 100% !important;
    padding: 0 4px !important;
  }

  .experts-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .expert-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 16px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }

  .expert-avatar-wrap {
    width: 90px !important;
    height: 98px !important;
    flex: 0 0 90px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  .expert-info {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .expert-name {
    font-size: 16px !important;
    line-height: 20px !important;
    margin-bottom: 8px !important;
  }

  .expert-contact-row {
    font-size: 14px !important;
    line-height: 18px !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    word-break: break-word !important;
  }

  .expert-contact-row i {
    font-size: 11px !important;
    width: 12px !important;
  }

  .expert-contact-row a {
    font-size: 11px !important;
    word-break: break-all !important;
  }

  .contact-map-section {
    height: 320px;
    margin: 0 auto;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .contact-page-main {
    padding: 30px 0 60px 0;
  }

  .contact-page-main .container {
    padding: 0 8px;
  }

  .contact-card-wrap {
    padding: 20px 14px;
    border-radius: 16px;
  }

  .contact-form-title {
    font-size: 28px;
    line-height: 34px;
  }

  .contact-experts-section {
    padding: 24px 12px !important;
    border-radius: 14px !important;
  }

  .experts-header {
    margin: 0 auto 16px auto !important;
  }

  .experts-title {
    font-size: 28px !important;
    line-height: 36px !important;
    margin-bottom: 8px !important;
  }

  .experts-subtitle {
    font-size: 13px !important;
    line-height: 20px !important;
  }

  .experts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  .expert-card {
    padding: 6px 14px 6px 6px !important;
    border-radius: 14px !important;
    gap: 12px !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
  }

  .expert-avatar-wrap {
    width: 72px !important;
    height: 78px !important;
    flex: 0 0 72px !important;
    border-radius: 12px !important;
    margin: 0 !important;
  }

  .expert-name {
    font-size: 15px !important;
    margin: 0 0 4px 0 !important;
  }

  .expert-contact-row {
    font-size: 14px !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
  }

  .expert-contact-row i {
    font-size: 12px !important;
  }

  .expert-contact-row a {
    font-size: 14px !important;
  }

  .contact-map-section {
    height: 280px;
    margin: 0 auto;
    border-radius: 12px;
  }

  /* Mobile Phone & Country Dropdown Optimization */
  .contact-phone-wrap {
    padding: 0 12px;
    height: 56px;
  }

  .contact-phone-prefix-btn {
    gap: 4px;
    font-size: 14px;
  }

  .prefix-code {
    font-size: 14px;
  }

  .prefix-divider {
    margin: 0 8px;
    height: 18px;
  }

  .contact-phone-number-input {
    font-size: 14px;
    min-width: 0;
  }

  .country-dropdown-list {
    left: 0;
    width: 230px;
    max-width: 85vw;
    max-height: 250px;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
  }

  .country-option {
    padding: 10px 16px;
    gap: 10px;
  }

  .country-option .country-name {
    font-size: 13.5px;
  }

  .btn-contact-submit {
    width: 100%;
    max-width: 280px;
    height: 54px;
    font-size: 15px;
  }

  .contact-card-title {
    font-size: 24px;
    line-height: 30px;
  }

  .contact-social-section h4 {
    font-size: 22px;
    line-height: 28px;
  }

  .contact-social-btn {
    width: 48px;
    height: 48px;
  }

  .contact-social-btn svg {
    width: 20px;
    height: 20px;
  }
}



/* ==================== SOURCE: event-detail.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - EVENT DETAIL & REGISTRATION STYLES
   Exact pixel-perfect replica of Event Detail & Event Registration Mockups
   ========================================================================== */

/* Main Layout Container */
.event-page-main {
  padding: 50px 0 100px 0;
  background-color: #ffffff;
}

/* Wide Event Hero Banner Image (Hall / Venue) */
.event-hero-banner-card {
  width: 100%;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
  background-color: #f5f5f5;
}

.event-hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Two Column Content Grid */
.event-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  gap: 36px;
  align-items: start;
}

/* --- Left Column Content --- */
.event-detail-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 36px;
}

.event-section-block {
  display: flex;
  flex-direction: column;
}

.event-section-heading {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 34px;
  letter-spacing: 0.01em;
  color: #1B0009;
  margin-bottom: 20px;
}

.event-desc-p {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4D4D4D;
  margin-bottom: 14px;
}

/* Feature / Learn Checkmark List (Figma Group 2085666186) */
.event-feature-list,
.session-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-feature-item,
.session-bullet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.01em;
  color: #4D4D4D;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
  cursor: default;
}

.event-feature-item:hover,
.session-bullet-item:hover {
  transform: translateX(4px);
  color: #1B0009;
}

.event-check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.event-feature-item:hover .event-check-icon,
.session-bullet-item:hover .event-check-icon {
  transform: scale(1.2);
}

/* Keynote Speakers 2-Col Cards */
.keynote-speakers-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.keynote-speaker-card {
  box-sizing: border-box;
  width: 368px;
  height: 120px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 4px 16px 4px 4px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.keynote-speaker-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(94, 11, 43, 0.08);
  border-color: rgba(94, 11, 43, 0.2);
}

.speaker-avatar-wrap {
  width: 108px;
  height: 112px;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
  background: #EDEDED;
}

.speaker-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.speaker-info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.speaker-title-name {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #1B0009;
  margin-bottom: 6px;
}

.speaker-designation {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 17px;
  color: #580024;
}

/* Embedded Event Poster Flyer */
.event-poster-flyer-wrap {
  width: 100%;
  max-width: 600px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #E4E4E4;
  margin-top: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.event-poster-flyer-wrap:hover {
  transform: scale(1.015);
}

.event-poster-flyer-img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Right Column: Sticky Event Information Card (Figma: width 424px, compact clean spacing) --- */
.event-info-sidebar-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 424px;
  background: linear-gradient(183.88deg, #F1E8D9 0.54%, #FFFBF3 99.17%), linear-gradient(160.01deg, #F0F0F0 0%, #FAFAFA 100%);
  border: 1px solid rgba(228, 228, 228, 0.85);
  border-radius: 28px;
  padding: 28px 24px 24px 24px;
  position: sticky;
  top: 30px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04);
}

.event-info-sidebar-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: #1B0009;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(228, 228, 228, 0.85);
}

.event-info-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

.event-info-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(228, 228, 228, 0.85);
}

.event-info-item:last-child {
  border-bottom: none;
}

.event-info-icon-box {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #C09F77;
  flex-shrink: 0;
}

.event-info-text-group {
  display: flex;
  flex-direction: column;
  font-family: 'Albert Sans', sans-serif;
}

.event-info-label {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  line-height: 16px;
  color: #4D4D4D;
  margin-bottom: 2px;
}

.event-info-val {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15.5px;
  line-height: 18px;
  color: #1B0009;
}

.event-info-val a {
  color: #1B0009;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.event-info-val a:hover {
  color: #580024;
}

/* Sidebar Actions Row (Group 2085666257: width 384px, height 60px) */
.event-sidebar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.btn-sidebar-register {
  flex: 1;
  height: 60px;
  background: #580025;
  color: #FFFFFF;
  border-radius: 40px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}

.btn-sidebar-register:hover {
  background: #000000;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

.btn-sidebar-share {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  color: #1B0009;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
}

.btn-sidebar-share-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.btn-sidebar-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  border-color: #580024;
}

.btn-sidebar-share:hover .btn-sidebar-share-img {
  transform: scale(1.05);
}

/* ==========================================================================
   EVENT REGISTRATION FORM & DETAIL PAGE STYLES (Figma Group 2085666284: 1320px)
   ========================================================================== */
.event-page-main .container {
  max-width: 1320px;
  margin: 0 auto;
}

/* Registration Success Toast / Dialog */
.reg-success-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 2, 7, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.reg-success-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  animation: modalScaleIn 0.3s ease forwards;
}

.reg-success-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #2E7D32;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 20px auto;
}

.event-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 424px;
  gap: 36px;
  align-items: start;
}

/* --- Left Column Content --- */
.event-detail-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Left Column: Registration Card (Figma Group 2085666244 / Rectangle 544487) */
.registration-form-card {
  width: 100%;
  max-width: 872px;
  min-height: 838px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 40px;
  padding: 36px 40px 40px 40px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.registration-card-title {
  display: block;
  width: fit-content;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 24px;
}

/* Member / Non-Member Pill Switch (Figma Group 1561302350: 338px x 52px) */
.reg-member-toggle {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 40px;
  padding: 4px;
  height: 52px;
  width: 338px;
  margin-bottom: 32px;
  box-sizing: border-box;
}

.reg-toggle-btn {
  flex: 1;
  height: 44px;
  border-radius: 40px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #1B0009;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  text-transform: capitalize;
  transition: all 0.25s ease;
}

.reg-toggle-btn.active {
  background: #1B0009;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.2);
}

/* 3-Column Form Grid (Figma: 256px wide inputs, 60px height, 60px radius) */
.reg-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 20px;
  margin-bottom: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.form-label {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #4D4D4D;
}

.form-input,
.form-select {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  box-sizing: border-box;
  padding: 0 20px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #1B0009;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234D4D4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px 16px;
  padding-right: 44px;
  cursor: pointer;
}

.form-input:focus,
.form-select:focus {
  border-color: #1B0009;
  box-shadow: 0 0 0 3px rgba(27, 0, 9, 0.08);
}

.form-input[readonly] {
  background-color: #FAF8F5;
  cursor: default;
}

/* Phone Input Group (Figma Group 2085666256) */
.phone-input-group {
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.phone-input-group:focus-within {
  border-color: #1B0009;
  box-shadow: 0 0 0 3px rgba(27, 0, 9, 0.08);
}

.phone-flag-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 10px;
  border-right: 1px solid #E4E4E4;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.phone-flag-img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.phone-code-text {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  color: #1B0009;
}

.phone-arrow-icon {
  font-size: 10px;
  color: #4D4D4D;
  transition: transform 0.25s ease;
}

.phone-number-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  line-height: 19px;
  color: #1B0009;
  padding: 0 0 0 12px;
}

/* Event Phone Country Dropdown */
.event-country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  min-width: 230px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(-6px);
  pointer-events: none;
}

.event-country-dropdown.open {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  overflow-y: auto;
}

.event-country-dropdown::-webkit-scrollbar {
  width: 4px;
}
.event-country-dropdown::-webkit-scrollbar-track {
  background: #F9F9F9;
  border-radius: 4px;
}
.event-country-dropdown::-webkit-scrollbar-thumb {
  background: #E4E4E4;
  border-radius: 4px;
}

.event-country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  cursor: pointer;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #1B0009;
  transition: background 0.15s ease;
}

.event-country-option:hover {
  background: #FDF4F7;
  color: #6D173A;
}

.event-country-option:first-child {
  border-radius: 20px 20px 0 0;
  padding-top: 14px;
}

.event-country-option:last-child {
  border-radius: 0 0 20px 20px;
  padding-bottom: 14px;
}

.event-country-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Addons Members Section (Figma Group 2085666446) */
.reg-addon-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  margin-top: 10px;
  margin-bottom: 20px;
}

.addon-label-text {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #1B0009;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-add-member {
  width: 178px;
  height: 60px;
  background: #1B0009;
  border-radius: 60px;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-add-member:hover {
  background: #580024;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.25);
}

/* Line 125 */
.reg-form-divider {
  width: 100%;
  height: 1px;
  background: #E4E4E4;
  margin: 16px 0 24px 0;
}

/* Total & Submit Action Row */
.reg-bottom-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reg-total-box {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #4D4D4D;
  margin: 0;
}

.btn-submit-registration {
  width: 200px;
  height: 60px;
  background: #580025;
  border-radius: 40px;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-submit-registration:hover {
  background: #40001a;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(88, 0, 36, 0.3);
}

/* Embedded Poster Flyer (Figma image 1299: width 872px, border-radius 20px) */
.event-poster-flyer-wrap {
  width: 872px;
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #E4E4E4;
  margin-top: 36px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.event-poster-flyer-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}



/* Registration Success Toast / Dialog */
.reg-success-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 2, 7, 0.85);
  backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.reg-success-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  animation: modalScaleIn 0.3s ease forwards;
}

.reg-success-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #E8F5E9;
  color: #2E7D32;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 20px auto;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1320px) {
  .event-detail-grid {
    grid-template-columns: 1fr;
  }
  .event-detail-left,
  .registration-form-card,
  .event-poster-flyer-wrap,
  .event-info-sidebar-card {
    width: 100%;
  }
  .reg-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-group,
  .form-input,
  .form-select,
  .phone-input-group {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .reg-form-grid {
    grid-template-columns: 1fr;
  }
  .registration-form-card {
    padding: 24px 18px;
  }
  .reg-member-toggle {
    width: 100%;
  }
  .reg-addon-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }
  .addon-label-text {
    font-size: 16px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .btn-add-member {
    width: auto !important;
    min-width: 120px !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    border-radius: 44px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  .addon-member-grid {
    grid-template-columns: 1fr !important;
  }
  .reg-bottom-action-row {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .btn-submit-registration {
    width: 100%;
  }
}

/* Event Detail Hero Title Styles */
.event-detail-hero-title {
  font-size: 38px;
  max-width: 960px;
  margin: 0 auto;
  line-height: 1.25;
}

.desktop-br {
  display: inline;
}

@media (max-width: 1024px) {
  .event-detail-hero-title {
    font-size: 30px !important;
    max-width: 100% !important;
    padding: 0 16px !important;
  }
}

@media (max-width: 768px) {
  .events-hero-section {
    min-height: auto !important;
    padding: 35px 16px 65px 16px !important;
  }

  .event-detail-hero-title {
    font-size: 21px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    padding: 0 10px !important;
  }

  .desktop-br {
    display: none;
  }
}

@media (max-width: 480px) {
  .events-hero-section {
    min-height: auto !important;
    padding: 28px 12px 56px 12px !important;
  }

  .event-detail-hero-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
    padding: 0 6px !important;
  }

  .events-breadcrumb {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
}


/* ==================== SOURCE: managing-committee.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - MANAGEMENT COMMITTEE PAGE STYLES
   Pixel-perfect implementation of Managemnet communitee.svg
   ========================================================================== */

/* --- Committee Main Container Section --- */
.committee-main-section {
  position: relative;
  width: 100%;
  padding: 60px 0 100px 0;
  background-color: #ffffff;
}

/* 2-Column Grid matching Figma 1320px Frame */
.committee-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 648px));
  gap: 32px 24px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  justify-content: center;
  box-sizing: border-box;
}

/* Individual Committee Member Card (Figma Rectangle 544481: 648px x 552px) */
.committee-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 648px;
  min-height: 552px;
  height: auto;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 32px 30px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.committee-card:hover {
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  border-color: #E2D5C3;
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.08);
}

/* Card Header: Avatar on left, Info on right */
.committee-card-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}

/* Circular Avatar Wrap (160px x 160px) */
.committee-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.committee-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.committee-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.committee-card:hover .committee-avatar-img,
.committee-avatar-wrap:hover .committee-avatar-img {
  transform: scale(1.08);
}

/* Member Meta Information */
.committee-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.committee-name {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: #111111;
  margin: 0 0 6px 0;
  line-height: 1.25;
  transition: color 0.3s ease;
}

.committee-card:hover .committee-name {
  color: #5E0B2B;
}

.committee-role {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #6D173A;
  margin: 0 0 14px 0;
  text-transform: capitalize;
  line-height: 1.3;
}

/* Contact & Social Action Buttons */
.committee-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.committee-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #E2D9CF;
  background-color: #FFFFFF;
  text-decoration: none;
  transition: all 0.25s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.committee-action-btn img {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  display: block;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.committee-action-btn:hover {
  box-shadow: 0 0 0 1px #6D173A, 0 6px 14px rgba(109, 23, 58, 0.15);
  transform: translateY(-2px);
}

.committee-action-btn:hover img {
  transform: scale(1.05);
}

/* Card Body / Biography Text */
.committee-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(94, 11, 43, 0.15) transparent;
}

.committee-card-body::-webkit-scrollbar {
  width: 4px;
}

.committee-card-body::-webkit-scrollbar-thumb {
  background-color: rgba(94, 11, 43, 0.2);
  border-radius: 4px;
}

.committee-bio {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #555555;
  margin: 0;
  text-align: left;
}

.committee-bio p {
  margin: 0 0 10px 0;
}

.committee-bio p:last-child {
  margin-bottom: 0;
}

.committee-bio .contact-highlight {
  color: #8B1E4B;
  font-weight: 500;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */

/* Large Tablets & Small Laptops (max-width: 1200px) */
@media (max-width: 1200px) {
  .committee-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 20px;
    padding: 0 20px;
  }

  .committee-card {
    padding: 24px 22px;
    min-height: auto;
  }

  .committee-avatar-wrap {
    width: 140px;
    height: 140px;
  }

  .committee-name {
    font-size: 22px;
  }

  .committee-bio {
    font-size: 15px;
    line-height: 1.62;
  }
}

/* Tablets (max-width: 991px): Switch to 1 column for superior readability */
@media (max-width: 991px) {
  .committee-grid {
    grid-template-columns: 1fr !important;
    max-width: 600px !important;
    gap: 24px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .committee-main-section {
    padding: 40px 0 60px 0 !important;
  }

  .committee-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
  }
}

/* Mobile Devices (max-width: 576px) */
@media (max-width: 576px) {
  .committee-grid {
    padding: 0 12px !important;
    gap: 20px !important;
  }

  .committee-card {
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }

  .committee-card-header {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .committee-avatar-wrap {
    width: 100px !important;
    height: 100px !important;
    flex: 0 0 100px !important;
    border-radius: 50% !important;
  }

  .committee-avatar-inner {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
  }

  .committee-name {
    font-size: 20px !important;
    line-height: 24px !important;
    margin-bottom: 2px !important;
  }

  .committee-role {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .committee-actions {
    gap: 8px !important;
  }

  .committee-action-btn {
    width: 48px !important;
    height: 48px !important;
  }

  .committee-action-btn img {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .committee-bio {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}


/* ==================== SOURCE: media.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - MEDIA & GALLERY PAGES STYLES
   Exact replica matching Figma designs (Photo Gallery, Video Gallery, Media Coverage)
   ========================================================================== */

/* --- General Layout --- */
.media-main-section {
  width: 100%;
  background-color: #FFFFFF;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

/* ==========================================================================
   FILTER SECTION: SEARCH BAR & YEAR PILLS
   ========================================================================== */
.media-filter-section {
  max-width: 900px;
  margin: 0 auto 50px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* Search Bar Pill */
.media-search-wrap {
  width: 100%;
  max-width: 520px;
  height: 60px;
  background: #ffffff;
  border-radius: 60px;
  border: 1px solid #E4E4E4;
  padding: 4px 4px 4px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.media-search-wrap:focus-within {
  border-color: #1B0009;
}

.media-search-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.media-search-input-group i {
  color: #4D4D4D;
  font-size: 20px;
}

.media-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  color: #111111;
  text-overflow: ellipsis;
}

.media-search-input::placeholder {
  color: #4D4D4D;
}

.btn-media-search {
  height: 52px;
  width: 110px;
  flex-shrink: 0;
  border-radius: 60px;
  background: #1B0009;
  color: #ffffff;
  border: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-media-search:hover {
  background: #2D000F;
}

/* Year Filter Pills */
.media-year-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.year-pill-btn {
  height: 51px;
  padding: 0 28px;
  border-radius: 40px;
  border: 1px solid #E4E4E4;
  background: #ffffff;
  color: #4D4D4D;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.year-pill-btn.active {
  background: #1B0009;
  color: #ffffff;
  border-color: #1B0009;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.year-pill-btn:not(.active):hover {
  background: rgba(94, 11, 43, 0.08);
  color: #1B0009;
  border-color: rgba(94, 11, 43, 0.35);
  box-shadow: 0 4px 12px rgba(94, 11, 43, 0.1);
  transform: translateY(-1px);
}

.year-pill-btn.active:hover {
  background: #2D000F;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* ==========================================================================
   PAGE 1: PHOTO GALLERY GRID (4 COLUMNS)
   ========================================================================== */
.photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto 60px auto;
}

.photo-album-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #E4E4E4;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  height: 364px;
}

.photo-album-card:hover {
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  transform: translateY(-6px);
  border-color: #E2D5C3;
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.08);
}

.photo-thumb-wrap {
  position: relative;
  width: calc(100% - 16px);
  margin: 8px 8px 0 8px;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.photo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.photo-album-card:hover .photo-thumb-img {
  transform: scale(1.06);
}

/* Bottom Left Photo Count Badge */
.photo-count-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  color: #ffffff;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

/* Bottom Right Drive/Link Badge */
.photo-drive-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F8F8F8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5E0B2B;
  font-size: 20px;
  z-index: 2;
}

.photo-card-body {
  padding: 16px 16px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.photo-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #1B0009;
  margin: 0 0 12px 0;
  line-height: 24px;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-album-card:hover .photo-card-title {
  color: #6D173A;
}

.photo-card-date {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  line-height: 17px;
  color: #4D4D4D;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.photo-card-divider {
  width: 100%;
  height: 1px;
  background: #E4E4E4;
  margin-bottom: 12px;
}

.photo-card-link {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #6D173A;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
  margin-top: auto;
}

.photo-card-link i {
  transition: transform 0.3s ease;
}

.photo-album-card:hover .photo-card-link {
  gap: 8px;
}

/* ==========================================================================
   PAGE 2: VIDEO GALLERY GRID (3 COLUMNS WITH CATEGORY HEADINGS)
   ========================================================================== */
.video-gallery-container {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.video-category-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.video-category-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  background: linear-gradient(90deg, #6D173A 0%, #D43E7B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0;
  display: inline-block;
}

.video-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.video-card {
  background: #D9D9D9;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  height: 239px;
  width: 100%;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(109, 23, 58, 0.15);
}

.video-thumb-wrap {
  position: relative;
  width: 100%;
  height: 239px;
  overflow: hidden;
  border-radius: 16px;
  background: #D9D9D9;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-card:hover .video-thumb-img {
  transform: scale(1.06);
}

/* Play Button Overlay (Group 2085666464: 60px x 60px, Ellipse 4177: #FFFFFF, Icon: #841238, 20px) */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}

.video-play-btn i {
  font-size: 20px;
  color: #841238;
  padding-left: 3px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.video-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: #841238;
  box-shadow: 0 8px 24px rgba(132, 18, 56, 0.35);
}

.video-card:hover .video-play-btn i {
  color: #FFFFFF;
  transform: scale(1.05);
}

/* ==========================================================================
   PAGE 3: MEDIA COVERAGE GRID (3 COLUMNS)
   ========================================================================== */
.media-coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1320px;
  margin: 0 auto 60px auto;
}

.media-news-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #E4E4E4;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  height: 554px;
}

.media-news-card:hover {
  background: linear-gradient(180deg, #F8F1E7 0%, rgba(255, 255, 255, 0.5) 100%), #FFFFFF;
  transform: translateY(-6px);
  border-color: #E2D5C3;
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.08);
}

.media-news-thumb-wrap {
  width: calc(100% - 16px);
  height: 377px;
  margin: 8px 8px 0 8px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}

.media-news-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.media-news-card:hover .media-news-thumb-img {
  transform: scale(1.06);
}

.media-news-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.media-date-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  background: #FFE4ED;
  color: #B74369;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  padding: 6px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
  gap: 10px;
}

.media-news-title {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #1B0009;
  margin: 0 0 20px 0;
  line-height: 24px;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-news-card:hover .media-news-title {
  color: #6D173A;
}

.media-news-link {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: #6D173A;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.25s ease;
  margin-top: auto;
}

.media-news-card:hover .media-news-link {
  gap: 10px;
}

/* ==========================================================================
   PAGINATION CONTROL BAR
   ========================================================================== */
.media-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.page-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4D4D4D;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn.active {
  background: #1B0009;
  color: #ffffff;
}

.page-btn:not(.active):hover {
  background: #f0f0f0;
}

.page-btn:first-child,
.page-btn:last-child {
  height: 59px;
  width: auto;
  min-width: 89px;
  padding: 0 28px;
  border-radius: 60px;
  border: 1px solid #E4E4E4;
  background: #FFFFFF;
  color: #1B0009;
}

.page-btn:first-child:hover,
.page-btn:last-child:hover {
  background: #f8f8f8;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .photo-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;
  }

  .video-gallery-grid,
  .media-coverage-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;
  }

  .video-category-title {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .photo-gallery-grid,
  .video-gallery-grid,
  .media-coverage-grid {
    grid-template-columns: 1fr;
  }

  .media-filter-section {
    padding: 0 14px;
    margin-bottom: 30px;
    gap: 16px;
    width: 100%;
    overflow: hidden;
  }

  /* Search input bar on mobile */
  .media-search-wrap {
    height: 52px;
    padding: 3px 3px 3px 14px;
    max-width: 100%;
  }

  .media-search-input-group {
    gap: 8px;
    min-width: 0;
  }

  .media-search-input-group i {
    font-size: 16px;
    flex-shrink: 0;
  }

  .media-search-input {
    font-size: 14px;
    width: 100%;
    min-width: 0;
  }

  .btn-media-search {
    height: 44px;
    width: 88px;
    flex-shrink: 0;
    font-size: 14px;
    border-radius: 44px;
  }

  /* Year pills horizontal scroll slider */
  .media-year-pills {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 4px 6px 10px 6px;
    gap: 8px;
  }

  .media-year-pills::-webkit-scrollbar {
    display: none;
  }

  .year-pill-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
    border-radius: 30px;
    white-space: nowrap;
  }
}



/* ==================== SOURCE: member-list.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - MEMBER LIST & PROFILE MODAL STYLES
   Exact replica matching Figma designs
   ========================================================================== */

/* --- General Layout --- */
.member-list-main {
  width: 100%;
  background: #FFFFFF;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

/* ==========================================================================
   SEARCH BAR (Figma: 536x60, Left Aligned with Cards Grid, Button: 120x52, Font: 16px)
   ========================================================================== */
.member-search-section {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto 40px auto;
  display: flex;
  justify-content: flex-start;
}

.member-search-wrap {
  width: 100%;
  max-width: 536px;
  height: 60px;
  background: #ffffff;
  border-radius: 40px;
  border: 1px solid #E2D9CF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  padding: 4px 4px 4px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.member-search-wrap:focus-within {
  border-color: #5E0B2B;
  box-shadow: 0 6px 20px rgba(94, 11, 43, 0.1);
}

.member-search-input-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.member-search-input-group i {
  color: #555555;
  font-size: 18px;
  flex-shrink: 0;
}

.member-search-input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #222222;
  padding: 0 4px;
}

.member-search-input::placeholder {
  color: #555555;
  font-size: 16px;
}

.btn-member-search {
  width: 120px;
  height: 52px;
  border-radius: 30px;
  background: #111111;
  color: #ffffff;
  border: none;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.btn-member-search:hover {
  background: #5E0B2B;
  box-shadow: 0 4px 12px rgba(94, 11, 43, 0.2);
}

/* ==========================================================================
   12 MEMBER CARDS GRID (Figma: 312x309, Heading: 20px Albert Sans Medium,
   Sub-heading: 16px, Spacing: 12px, Button: 148x52, Text: 16px, Avatar: 120x120)
   ========================================================================== */
.member-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 312px);
  gap: 24px;
  max-width: 1320px;
  justify-content: flex-start;
  margin: 0 auto 50px auto;
}

.member-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #E4E4E4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
  padding: 20px 16px 16px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 312px;
  height: 309px;
  box-sizing: border-box;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.member-card:hover,
.member-card.active {
  background: linear-gradient(164.03deg, #F1E8D9 1.92%, #FFFFFF 49.38%);
  border-color: #E4E4E4;
  transform: translateY(-10px);
  box-shadow: 0 16px 36px rgba(94, 11, 43, 0.08);
}

.member-avatar-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.member-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.member-card-name {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: #111111;
  margin: 0 0 4px 0;
  transition: color 0.3s ease;
}

.member-card:hover .member-card-name,
.member-card.active .member-card-name {
  color: #5E0B2B;
}

.member-card-id {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 1.25;
  color: #777777;
  margin: 0 0 12px 0;
}

.btn-view-profile {
  width: 148px;
  height: 52px;
  padding: 0;
  border-radius: 26px;
  border: 1.5px solid #DDD3C7;
  background: #ffffff;
  color: #5E0B2B;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
}

.btn-view-profile:hover {
  background: #5E0B2B;
  color: #ffffff;
  border-color: #5E0B2B;
  box-shadow: 0 4px 14px rgba(94, 11, 43, 0.25);
  transform: translateY(-2px);
}

/* ==========================================================================
   PAGINATION BAR (Figma Image 3)
   ========================================================================== */
.member-pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
  margin-bottom: 24px;
}

.page-btn {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  background: transparent;
  user-select: none;
  box-sizing: border-box;
}

.page-btn-nav {
  height: 48px;
  padding: 0 28px;
  border-radius: 40px;
  border: 1px solid #E4E4E4;
  background: #FFFFFF;
  color: #1B0009;
}

.page-btn-nav:hover:not(:disabled) {
  background: #1B0009;
  color: #FFFFFF;
  border-color: #1B0009;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(27, 0, 9, 0.15);
}

.page-btn-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #E4E4E4;
}

.page-btn-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #1B0009;
  background: transparent;
  border: none;
}

.page-btn-num:hover:not(.active) {
  background: #F4EDE4;
  color: #580025;
  transform: translateY(-1px);
}

.page-btn-num.active {
  background: #1B0009;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.25);
  cursor: default;
}

/* ==========================================================================
   INTERACTIVE MEMBER DETAILS MODAL POPUP
   ========================================================================== */
.member-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(17, 11, 14, 0.65);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.member-modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.member-modal-dialog {
  width: 100%;
  max-width: 648px;
  max-height: 94vh;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow-y: auto;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.member-modal-backdrop.open .member-modal-dialog {
  transform: translateY(0) scale(1);
}

/* Modal Banner Header (Rectangle 544509: 648px x 200px) */
.member-modal-banner {
  width: 100%;
  height: 200px;
  background: url('../img/members/modal-banner-qatar.png') no-repeat center top / cover;
  position: relative;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.member-modal-banner::before {
  display: none;
}

/* Floating Close Button (Group 2085666374 / Ellipse 4175: 60px x 60px) */
.member-modal-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #000000;
  border: none;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
  z-index: 10;
}

.member-modal-close:hover {
  transform: scale(1.06) rotate(90deg);
  background: #580024;
  color: #FFFFFF;
}

/* Modal Body Content */
.member-modal-body {
  padding: 0 28px 28px 28px;
}

/* Profile Avatar & Header Row (Ellipse 4172: 160px x 160px) */
.member-modal-profile-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: -80px;
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
}

.member-modal-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 6px solid #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  object-fit: cover;
  background: #D9D9D9;
  flex-shrink: 0;
}

.member-modal-meta {
  flex: 1;
  margin-left: 16px;
  margin-bottom: 8px;
}

.member-modal-name {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 400;
  color: #1B0009;
  margin: 0 0 4px 0;
}

.member-modal-id {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #4D4D4D;
  margin: 0;
}

/* Circular Action Buttons (LinkedIn & Email: 60px x 60px each) */
.member-modal-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.btn-member-action {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(88, 0, 36, 0.25);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}

.btn-member-action:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(88, 0, 36, 0.35);
}

.btn-member-linkedin {
  background: transparent;
  border: none;
  padding: 0;
}

.btn-member-linkedin svg {
  width: 100%;
  height: 100%;
  display: block;
}

.btn-member-linkedin .member-action-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.btn-member-email {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #580024;
  color: #FFFFFF;
  border: 1px solid #E4E4E4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.btn-member-email:hover {
  background: #730030;
}

/* Section 1: Introduction (Group 2085666364 / Rectangle 544510: 592px x 167px) */
.member-info-card {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-sizing: border-box;
  box-shadow: none;
}

.member-info-card:last-child {
  margin-bottom: 0;
}

.member-info-heading {
  font-family: 'Albert Sans', sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 500;
  color: #1B0009;
  margin: 0 0 12px 0;
}

.member-info-desc {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #4D4D4D;
  margin: 0;
}

/* Section 2: Member Details Grid (Group 2085666365 / Rectangle 544510: 592px x 268px) */
.member-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-top: 4px;
}

.detail-item {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  color: #580024;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.detail-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.detail-label {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: #4D4D4D;
  margin-bottom: 2px;
}

.detail-value {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: #1B0009;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .member-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 20px;
  }
}

@media (max-width: 768px) {
  .member-search-section {
    padding: 0 16px;
    margin-bottom: 30px;
  }

  .member-search-wrap {
    height: 48px;
    padding: 4px 6px 4px 14px;
  }

  .member-search-input-group {
    gap: 8px;
    min-width: 0;
  }

  .member-search-input {
    font-size: 13.5px;
    min-width: 0;
    width: 100%;
  }

  .member-search-input::placeholder {
    font-size: 13px;
  }

  .btn-member-search {
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
    flex-shrink: 0;
  }

  .member-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding: 0 16px;
    max-width: 440px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 36px;
  }

  .member-card {
    width: 100% !important;
    min-height: auto;
    padding: 18px 16px 16px 16px;
    border-radius: 18px;
  }

  .member-avatar-wrap {
    width: 90px;
    height: 90px;
    margin-bottom: 3px;
  }

  .member-card-name {
    font-size: 20px;
    line-height: 1.15;
    margin-bottom: 0;
  }

  .member-card-id {
    font-size: 16px;
    line-height: 1.15;
    margin-bottom: 2px;
  }

  .btn-view-profile {
    height: 44px;
    padding: 0 22px;
    font-size: 15px;
    border-radius: 26px;
    gap: 6px;
    white-space: nowrap;
  }

  .member-modal-backdrop {
    padding: 10px;
  }

  .member-modal-dialog {
    max-width: 440px;
    max-height: 96vh;
    border-radius: 16px;
  }

  .member-modal-banner {
    height: 100px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .member-modal-close {
    width: 34px;
    height: 34px;
    top: 8px;
    right: 10px;
    font-size: 14px;
  }

  .member-modal-body {
    padding: 0 14px 14px 14px;
  }

  .member-modal-profile-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: -45px;
    margin-bottom: 14px;
    position: relative;
    z-index: 5;
  }

  .member-modal-avatar {
    width: 82px;
    height: 82px;
    border-width: 4px;
    flex-shrink: 0;
  }

  .member-modal-meta {
    flex: 1;
    min-width: 140px;
    margin-left: 12px;
    margin-bottom: 0;
    padding-top: 48px;
  }

  .member-modal-name {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 3px;
    color: #1B0009;
    word-break: break-word;
  }

  .member-modal-id {
    font-size: 13px;
    line-height: 16px;
  }

  .member-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-bottom: 0;
    padding-top: 48px;
    flex-shrink: 0;
  }

  .btn-member-action,
  .btn-member-email,
  .btn-member-linkedin {
    width: 42px !important;
    height: 42px !important;
    font-size: 16px !important;
    margin-bottom: 0 !important;
  }

  .member-info-card {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
  }

  .member-info-heading {
    font-size: 14px;
    line-height: 17px;
    margin: 0 0 5px 0;
  }

  .member-info-desc {
    font-size: 12px;
    line-height: 1.4;
  }

  .member-details-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    margin-top: 2px;
  }

  .detail-item {
    height: auto;
    gap: 8px;
  }

  .detail-icon-box {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .detail-label {
    font-size: 11px;
    line-height: 13px;
    margin-bottom: 1px;
  }

  .detail-value {
    font-size: 12px;
    line-height: 14px;
  }
}

@media (max-height: 650px) and (max-width: 768px) {
  .member-modal-banner {
    height: 90px;
  }

  .member-modal-avatar {
    width: 72px;
    height: 72px;
  }

  .member-modal-profile-row {
    margin-top: -36px;
    margin-bottom: 8px;
  }

  .member-modal-meta,
  .member-modal-actions {
    padding-top: 40px;
  }

  .member-info-card {
    padding: 7px 10px;
    margin-bottom: 6px;
  }

  .member-info-desc {
    font-size: 11px;
    line-height: 1.35;
  }
}

@media (max-width: 480px) {
  .member-list-main {
    padding: 30px 0 60px 0;
  }

  .member-search-section {
    padding: 0 16px;
    margin-bottom: 24px;
  }

  .member-search-wrap {
    height: 48px;
    padding: 4px 4px 4px 14px;
    gap: 8px;
  }

  .member-search-input-group {
    gap: 8px;
    min-width: 0;
    flex: 1;
  }

  .member-search-input-group i {
    font-size: 14px;
  }

  .member-search-input {
    font-size: 13.5px;
    min-width: 0;
    width: 100%;
    padding: 0;
  }

  .member-search-input::placeholder {
    font-size: 13.5px;
  }

  .btn-member-search {
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
  }

  .member-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 20px !important;
    max-width: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 30px !important;
  }

  .member-card {
    padding: 18px 16px 16px 16px !important;
    border-radius: 18px !important;
  }

  .member-avatar-wrap {
    width: 90px !important;
    height: 90px !important;
    margin-bottom: 3px !important;
  }

  .member-card-name {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }

  .member-card-id {
    font-size: 16px !important;
    line-height: 1.15 !important;
    margin-bottom: 2px !important;
  }

  .btn-view-profile {
    height: 44px !important;
    padding: 0 22px !important;
    font-size: 15px !important;
    border-radius: 26px !important;
    gap: 6px !important;
  }

  .page-btn-nav {
    height: 40px;
    padding: 0 14px;
    font-size: 13.5px;
  }

  .page-btn-num {
    width: 38px;
    height: 38px;
    font-size: 13.5px;
  }
}

/* ==================== SOURCE: member-registration.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - MEMBER REGISTRATION PAGE STYLES
   Exact 1:1 Pixel-Perfect Replica matching Frame 121.svg (1320px x 2541px)
   - Card 1: Membership Details (y=0.5, 1319px x 307px, rx=39.5)
   - Card 2: Personal Details (y=348.5, 1319px x 601px, rx=39.5)
   - Card 3: Professional Details (y=990.5, 1319px x 307px, rx=39.5)
   - Card 4: Residential Address & Communication Address (y=1338.5, 1319px x 389px, rx=39.5)
   - Card 5: Set Account Details & Captcha (y=1768.5, 1319px x 380px, rx=39.5)
   - Card 6: Terms, Declaration & Submission (y=2189.5, 1319px x 351px, rx=39.5)
   ========================================================================== */

/* Main Container Section */
.registration-main-section {
  position: relative;
  width: 100%;
  padding: 60px 0 100px 0;
  background-color: #FFFFFF;
}

.reg-page-container {
  max-width: 1368px;
  width: 100%;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.registration-container {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 41px;
}

/* ==========================================================================
   SECTION CARDS (Frame 121: 1319px x H, rx: 39.5px, stroke #E4E4E4)
   ========================================================================== */
.reg-section-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 1320px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 40px;
  padding: 36px 28.5px 38px 28.5px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: box-shadow 0.3s ease;
}

.reg-section-card:hover {
  box-shadow: 0 8px 30px rgba(94, 11, 43, 0.04);
}

/* Card Section Titles (Gradient #6D173A to #D43E7B, Albert Sans 24px/29px) */
.reg-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 29px;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: block;
  width: fit-content;
  margin: 0 0 28px 0;
}

.reg-card-subtitle {
  font-size: 24px;
  line-height: 29px;
  margin-top: 40px;
  margin-bottom: 28px;
}

/* ==========================================================================
   FORM GRIDS (4 columns: 297px each with 25px gap inside 1263px container)
   ========================================================================== */
.reg-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 25px;
  width: 100%;
  margin-bottom: 24px;
}

.reg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 25px;
  width: 100%;
  margin-bottom: 24px;
}

.reg-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 25px;
  width: 100%;
  margin-bottom: 24px;
}

.reg-grid-4:last-child,
.reg-grid-3:last-child,
.reg-grid-2:last-child {
  margin-bottom: 0;
}

.reg-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin-bottom: 0;
}

/* Communication Address: Address spans 2 columns (619px), City (297px), Country (297px) */
.reg-grid-comm-address {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 25px;
  width: 100%;
}

.reg-grid-comm-address .reg-form-group-address {
  grid-column: span 2;
}

/* ==========================================================================
   FORM GROUPS & LABELS
   ========================================================================== */
.reg-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.reg-form-label {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #333333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.req-star {
  color: #D43E7B;
  font-weight: 600;
  margin-left: 2px;
  font-size: 14px;
}

/* ==========================================================================
   FORM INPUTS, SELECTS & PILL CONTROLS (Professional Modern Finish)
   ========================================================================== */
.reg-form-input,
.reg-form-select {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 30px;
  padding: 0 22px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: #1A1A1A;
  outline: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.reg-form-input::placeholder {
  color: #9CA3AF;
  font-weight: 400;
}

.reg-form-input:hover,
.reg-form-select:hover {
  border-color: #B8BCC6;
}

.reg-form-input:focus,
.reg-form-select:focus {
  border-color: #6D173A;
  background-color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(109, 23, 58, 0.1);
}

/* Custom dropdown chevron for select */
.reg-form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234D4D4D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 22px center;
  padding-right: 48px;
  cursor: pointer;
}

/* Date Input with Calendar Icon */
.reg-input-with-icon {
  position: relative;
  width: 100%;
}

.reg-input-with-icon .reg-form-input {
  padding-right: 50px;
}

.reg-input-with-icon .input-cal-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #4D4D4D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.reg-input-with-icon .input-cal-icon:hover {
  color: #6D173A;
}

.reg-date-hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
  margin: 0;
}

.date-text-input {
  cursor: pointer;
}

/* ==========================================================================
   PHONE NUMBER INPUT (Professional Finish)
   ========================================================================== */
.reg-phone-group {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 30px;
  display: flex;
  align-items: center;
  padding: 0 18px 0 20px;
  transition: all 0.2s ease-in-out;
  position: relative;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.reg-phone-group:hover {
  border-color: #B8BCC6;
}

.reg-phone-group:focus-within {
  border-color: #6D173A;
  box-shadow: 0 0 0 4px rgba(109, 23, 58, 0.1);
}

.reg-phone-flag-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border-right: 1px solid #E5E7EB;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

.reg-phone-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.reg-phone-code {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #1A1A1A;
}

.reg-phone-arrow {
  width: 8px;
  height: 6px;
  color: #6B7280;
  transition: transform 0.25s ease;
}

.reg-phone-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding-left: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: #1A1A1A;
}

/* Phone Country Dropdown */
.reg-country-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 999;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  min-width: 230px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
  transform: translateY(-6px);
  pointer-events: none;
}

.reg-country-dropdown.open {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  overflow-y: auto;
}

.reg-country-dropdown::-webkit-scrollbar {
  width: 4px;
}
.reg-country-dropdown::-webkit-scrollbar-track {
  background: #F9F9F9;
  border-radius: 4px;
}
.reg-country-dropdown::-webkit-scrollbar-thumb {
  background: #E4E4E4;
  border-radius: 4px;
}

.reg-country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  cursor: pointer;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #1B0009;
  transition: background 0.15s ease;
}

.reg-country-option:hover {
  background: #FDF4F7;
  color: #6D173A;
}

.reg-country-option:first-child {
  border-radius: 20px 20px 0 0;
  padding-top: 14px;
}

.reg-country-option:last-child {
  border-radius: 0 0 20px 20px;
  padding-bottom: 14px;
}

.reg-country-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* ==========================================================================
   GENDER SELECTOR (Frame 121: 131px x 52px each, rx: 26px)
   ========================================================================== */
.gender-selector-row {
  display: flex;
  gap: 12px;
  align-items: center;
  height: 52px;
  max-width: 100%;
}

.gender-radio-label {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  flex: 1;
}

.gender-radio-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.gender-pill-btn {
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  border-radius: 30px;
  padding: 0 16px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #374151;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.gender-pill-btn i {
  font-size: 16px;
}

.gender-pill-btn.male-btn i {
  color: #2563EB;
}

.gender-pill-btn.female-btn i {
  color: #DB2777;
}

/* Hover State */
.gender-radio-label:hover .gender-pill-btn {
  border-color: #B8BCC6;
  background: #F9FAFB;
}

/* Active/Checked State */
.gender-radio-label input[type="radio"]:checked + .gender-pill-btn {
  border-color: #6D173A;
  background-color: #FDF4F7;
  color: #6D173A;
  font-weight: 600;
  box-shadow: 0 0 0 4px rgba(109, 23, 58, 0.1);
}

/* Invalid State — after submit, if no gender is chosen, show the pills in red
   like the other required fields so the user sees it's mandatory. */
.was-validated .gender-radio-label input[type="radio"]:invalid + .gender-pill-btn {
  border-color: #dc3545;
  background-color: #fff5f5;
}

/* Date fields: the real <input type="date"> is hidden and a visible text input
   is shown instead. When the hidden required date is empty after submit, turn
   the visible text input red so the user sees it's mandatory.
   :has() covers the case where the visible input comes BEFORE the hidden one. */
.was-validated .reg-input-with-icon:has(.reg-date-hidden-input:invalid) .date-text-input,
.was-validated .reg-input-with-icon .reg-date-hidden-input:invalid ~ .date-text-input,
.was-validated .date-text-input:invalid {
  border-color: #dc3545 !important;
  background-color: #fff5f5;
}

/* ==========================================================================
   PHOTO UPLOAD BOX (Frame 121: 200px x 200px, rx: 24px, dashed #AB7C38)
   ========================================================================== */
.photo-upload-layout {
  display: flex;
  margin-top: 4px;
  width: 100%;
}

.photo-upload-dashed-card {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  background: linear-gradient(160.01deg, #F9F9F9 0%, #FFFFFF 100%);
  border: 1.5px dashed #AB7C38;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.photo-upload-dashed-card.photo-upload-img-card {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.photo-upload-dashed-card.photo-upload-img-card:hover {
  background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(171, 124, 56, 0.16);
}

.photo-upload-custom-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 24px;
}

.photo-upload-dashed-card:hover {
  background: #FFFBF5;
  border-color: #8E590C;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(171, 124, 56, 0.16);
}

.photo-upload-icon-svg {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
}

.photo-upload-main-text {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  color: #1B0009;
  margin-bottom: 6px;
}

.photo-upload-sub-text {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 15px;
  text-align: center;
  color: #666666;
}

.photo-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
  display: none;
}

/* ==========================================================================
   CAPTCHA BOX (Frame 121: 301px x 75px, rx: 15.5px, fill #F4F4F4)
   ========================================================================== */
.recaptcha-widget-card {
  box-sizing: border-box;
  width: 301px;
  height: 75px;
  background: #F4F4F4;
  border: 1px solid #E4E4E4;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 14px;
}

.recaptcha-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recaptcha-checkbox-box {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.recaptcha-checkbox-box input[type="checkbox"] {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: #FFFFFF;
  border: 1.5px solid #C4C8D0;
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 0;
}

.recaptcha-checkbox-box input[type="checkbox"]:hover {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.1);
}

.recaptcha-checkbox-box input[type="checkbox"]:checked {
  background-color: #6D173A;
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.12);
}

.recaptcha-checkbox-box input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.recaptcha-text-label {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #1B0009;
}

.recaptcha-brand-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.recaptcha-logo-img {
  width: 28px;
  height: 28px;
}

.recaptcha-brand-name {
  font-family: 'Albert Sans', sans-serif;
  font-size: 9px;
  color: #555555;
  margin-top: 2px;
}

.recaptcha-brand-links {
  font-family: 'Albert Sans', sans-serif;
  font-size: 8px;
  color: #555555;
}

/* ==========================================================================
   TERMS, DECLARATION & SUBMISSION CARD (Frame 121: 1319px x 351px)
   ========================================================================== */
.declaration-bullets-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.declaration-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #4D4D4D;
}

.bullet-maroon-arrow {
  width: 17px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bullet-right-svg {
  width: 17px;
  height: 16px;
  display: block;
}

.terms-card-divider {
  width: 100%;
  height: 1px;
  background-color: #E4E4E4;
  margin: 24px 0;
}

.terms-checkboxes-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}

.custom-terms-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #4D4D4D;
  cursor: pointer;
  user-select: none;
}

.custom-terms-checkbox {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  background: #FFFFFF;
  border: 1.5px solid #C4C8D0;
  border-radius: 6px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 0;
}

.custom-terms-checkbox:hover {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.1);
}

.custom-terms-checkbox:checked {
  background-color: #6D173A;
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.12);
}

.custom-terms-checkbox:checked::after {
  content: "";
  display: block;
  width: 6px;
  height: 11px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Action Buttons (Frame 121: Cancel 199px x 59px rx:29.5, Submit 200px x 60px rx:30) */
.form-actions-buttons-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn-cancel-reg {
  box-sizing: border-box;
  width: 200px;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 30px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #0F022D;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-cancel-reg:hover {
  background-color: rgba(94, 11, 43, 0.08);
  border-color: transparent;
  color: #5E0B2B;
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-submit-reg {
  box-sizing: border-box;
  width: 200px;
  height: 60px;
  background: #1B0009;
  border: 1px solid #1B0009;
  border-radius: 30px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-submit-reg:hover {
  background: #580024;
  border-color: #580024;
  box-shadow: 0 6px 20px rgba(88, 0, 36, 0.35);
  transform: translateY(-2px);
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS (Mobile & Tablet)
   ========================================================================== */
@media (max-width: 1200px) {
  .reg-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .reg-grid-comm-address {
    grid-template-columns: repeat(2, 1fr);
  }

  .reg-grid-comm-address .reg-form-group-address {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .registration-main-section {
    padding: 40px 0 80px 0;
  }

  .reg-page-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .registration-container {
    gap: 28px;
  }

  .reg-section-card {
    border-radius: 28px;
    padding: 24px 18px 28px 18px;
  }

  .reg-card-title {
    font-size: 20px;
    line-height: 26px;
    margin-bottom: 20px;
  }

  .reg-card-subtitle {
    font-size: 20px;
    line-height: 26px;
    margin-top: 32px;
    margin-bottom: 20px;
  }

  .reg-grid-4,
  .reg-grid-comm-address {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 18px;
  }

  .reg-grid-comm-address .reg-form-group-address {
    grid-column: span 1;
  }

  .reg-form-input,
  .reg-form-select,
  .reg-phone-group {
    height: 52px;
    border-radius: 26px;
    padding: 0 18px;
    font-size: 13.5px;
  }

  .gender-selector-row {
    height: 52px;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
  }

  .gender-radio-label {
    flex: 1;
    display: flex;
  }

  .gender-pill-btn {
    flex: 1;
    width: 100%;
    min-width: 110px;
    height: 48px;
    border-radius: 24px;
    padding: 0 16px;
    font-size: 13.5px;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .photo-upload-dashed-card {
    width: 180px;
    height: 180px;
    border-radius: 20px;
  }

  .recaptcha-widget-card {
    width: 100%;
    max-width: 301px;
  }

  .form-actions-buttons-row {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .btn-cancel-reg,
  .btn-submit-reg {
    width: 100%;
    height: 52px;
    border-radius: 26px;
    font-size: 15px;
  }
}


/* ==================== SOURCE: my-profile.css ==================== */

body {
  background-color: #FFFFFF !important;
}

/* --- Main Page Container --- */
.profile-page-main {
  position: relative;
  width: 100%;
  padding-bottom: 60px;
  background: #FFFFFF !important;
  /* min-height: 800px; */
}

.profile-page-main .container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* ==========================================================================
   PROFILE HEADER SECTION
   Structure: cover image (300px) → white info bar (120px)
   Avatar overlaps bottom of cover and top of info bar by 50% each.
   ========================================================================== */

/* Outer wrapper — contains cover + bar stacked */
.profile-cover-section {
  position: relative;
  width: 100%;
}

/* Full-width cover / hero image — 300px tall */
.profile-cover-img {
  width: 100%;
  height: 260px;
  background: #fbf7f4 url('../img/doha-skyline-exact.jpg') center 20% / cover no-repeat;
  display: block;
}

/* White horizontal profile info bar — 120px tall (Clean no divider) */
.profile-info-bar {
  width: 100%;
  height: 120px;
  background: #FFFFFF;
  border-bottom: none;
  display: flex;
  align-items: center;
}

/* Inner centered content of the info bar — max-width 1320px */
.profile-info-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  box-sizing: border-box;
}

/* ==========================================================================
   PROFILE AVATAR — overlaps both cover (top 50%) and info bar (bottom 50%)
   Avatar center = boundary between cover and info bar
   Avatar height = 190px → 95px above bar top, 95px in bar
   margin-top = -(95px + bar half = 60) = -155px (from bar top)
   ========================================================================== */
.profile-avatar-wrap {
  position: relative;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 5px solid #FFFFFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  overflow: hidden;
  background: #D9D9D9;
  box-sizing: border-box;
  /* Pull avatar up so it overlaps the cover image */
  margin-top: -95px;
  /* Left indent matching reference ~100px from container edge */
  margin-left: 0;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Name + ID + Status pill — vertically centred in bar */
.profile-user-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* Pull up slightly to optically align with avatar centre */
  margin-top: 0;
}

/* CA Rahim Ahmed */
.profile-user-name {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #1B0009;
  margin: 0;
}

.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ID-448360 */
.profile-member-id {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  color: #4D4D4D;
}

/* Active badge */
.profile-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 3px 10px;
  background: #EFF5FF;
  border-radius: 20px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  color: #206CD9;
  box-sizing: border-box;
}

.profile-status-badge .status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #206CD9;
  box-shadow: 0px 0px 6px #1B79FF;
  flex-shrink: 0;
}

/* Membership status colours — soft/light tints (same style as the default blue badge) */
.profile-status-badge.is-active {
  background: #ECFBF1;
  color: #22A94E;
}
.profile-status-badge.is-active .status-dot {
  background: #22A94E;
  box-shadow: 0px 0px 6px #34D46B;
}

.profile-status-badge.is-expired {
  background: #FFF6E9;
  color: #E0930A;
}
.profile-status-badge.is-expired .status-dot {
  background: #E0930A;
  box-shadow: 0px 0px 6px #FFB63E;
}

/* Disabled and Inactive both use a soft red */
.profile-status-badge.is-disabled,
.profile-status-badge.is-inactive {
  background: #FDECEC;
  color: #E24C4C;
}
.profile-status-badge.is-disabled .status-dot,
.profile-status-badge.is-inactive .status-dot {
  background: #E24C4C;
  box-shadow: 0px 0px 6px #FF7A7A;
}

/* Action buttons — pushed to right */
.profile-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-profile-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  background: #FFFFFF;
  border: 1px solid #E0E0E0;
  border-radius: 21px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.btn-profile-pill svg {
  flex-shrink: 0;
}

.btn-profile-pill.btn-edit-profile {
  color: #1B0009;
}

.btn-profile-pill.btn-change-password {
  color: #1B0009;
}

.btn-profile-pill.btn-logout {
  color: #B74369;
}

.btn-profile-pill:hover {
  background: #FDFBF8;
  border-color: #6D173A;
  transform: translateY(-1px);
}

.btn-profile-pill.btn-logout:hover {
  background: #FFF5F7;
  border-color: #B74369;
}

/* --- Tab Selector Navigation --- */
.profile-tabs-nav {
  box-sizing: border-box;
  width: auto;
  display: inline-flex;
  height: 52px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 52px;
  padding: 4px;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0 20px 0;
  gap: 4px;
}

.tab-pill-btn {
  height: 44px;
  padding: 0 22px;
  border-radius: 44px;
  font-family: 'DM Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #4D4D4D;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}

.tab-pill-btn:hover:not(.active) {
  background-color: rgba(94, 11, 43, 0.08);
  border-color: rgba(94, 11, 43, 0.35);
  color: #5E0B2B;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(94, 11, 43, 0.1);
}

.tab-pill-btn:active:not(.active) {
  transform: scale(0.97);
}

/* Active Tab (Group 2085665602: background #1B0009, color #FFFFFF) */
.tab-pill-btn.active {
  background: #1B0009;
  color: #FFFFFF;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(27, 0, 9, 0.2);
}

/* --- Tab Content Panes --- */
.tab-content-pane {
  display: none;
  animation: fadeInPane 0.35s ease forwards;
}

.tab-content-pane.active {
  display: block;
}

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

/* ==========================================================================
   TAB 1: MY PROFILE INFO CARDS (Group 2085666106: 1320px)
   ========================================================================== */
.profile-cards-grid {
  display: flex;
  gap: 24px;
  width: 100%;
  max-width: 1320px;
  align-items: flex-start;
  box-sizing: border-box;
}

.profile-cards-col {
  flex: 1;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-sizing: border-box;
}

.profile-info-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Card Radii & Heights matching Figma */
.profile-info-card.card-membership {
  min-height: 298px;
  border-radius: 16px;
}

.profile-info-card.card-professional {
  min-height: 267px;
  border-radius: 24px;
}

.profile-info-card.card-personal {
  min-height: 391px;
  border-radius: 24px;
}

.profile-info-card.card-residential {
  min-height: 236px;
  border-radius: 24px;
}

.profile-info-card.card-communication {
  min-height: 223px;
  border-radius: 24px;
}

/* Card Header (Rectangle 22769: height 84px) */
.profile-card-header {
  box-sizing: border-box;
  height: 84px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #E4E4E4;
}

/* Circular Gold Icon (Ellipse 4112: 60px x 60px, background: #FFF7ED) */
.profile-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-card-icon svg {
  display: block;
}

.profile-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #1B0009;
  margin: 0;
}

/* Key-Value Pair Rows (Group 1261154269: width 608px) */
.profile-kv-list {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-kv-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: center;
  min-height: 24px;
  height: auto;
  gap: 16px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-size: 15px;
  line-height: 1.4;
}

.profile-kv-label {
  color: #4D4D4D;
  font-weight: 400;
  white-space: nowrap;
}

.profile-kv-value {
  color: #1B0009;
  font-weight: 500;
  text-align: left;
}

/* ==========================================================================
   TAB 2 & 3: TABLES (MY EVENTS & MY TRANSACTIONS)
   ========================================================================== */
.table-controls-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 24px;
}

.table-search-box {
  position: relative;
  width: 300px;
}

.table-search-box .search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #717171;
  font-size: 15px;
}

.table-search-input {
  width: 100%;
  height: 48px;
  padding: 0 20px 0 48px;
  border-radius: 50px;
  border: 1px solid #E4E4E4;
  background: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #1B0009;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.table-search-input::placeholder {
  color: #717171;
}

.table-search-input:focus {
  border-color: #1B0009;
}

/* Table Card Wrapper */
.table-card-wrapper {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #EAE3DA;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: none;
  margin-bottom: 30px;
  position: relative;
}

/* Custom Visible Scrollbar for Table */
.table-card-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-card-wrapper::-webkit-scrollbar-track {
  background: #F5EFE9;
  border-radius: 8px;
}
.table-card-wrapper::-webkit-scrollbar-thumb {
  background: #DAB580;
  border-radius: 8px;
}
.table-card-wrapper::-webkit-scrollbar-thumb:hover {
  background: #5E0B2B;
}

/* Mobile Scroll Hint Badge */
.table-scroll-hint {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 12px;
  color: #7B113A;
  font-weight: 500;
  margin-bottom: 8px;
  padding: 0 4px;
}
.table-scroll-hint i {
  font-size: 12px;
  animation: pulseSwipe 1.5s ease-in-out infinite;
}
@keyframes pulseSwipe {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.member-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: 'Albert Sans', sans-serif;
}

/* Dark Maroon Table Header */
.member-data-table thead tr {
  background: #1B0009;
  color: #FFFFFF;
  height: 56px;
}

.member-data-table th {
  padding: 16px 24px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  border: none;
  white-space: nowrap;
  color: #FFFFFF;
}

.member-data-table tbody tr {
  height: 54px;
  border-bottom: 1px solid #F0ECE6;
  background-color: #FFFFFF;
}

.member-data-table tbody tr:last-child {
  border-bottom: none;
}

/* Alternating Cream Rows */
.member-data-table tbody tr:nth-child(even) {
  background-color: #FFF7EE;
}

.member-data-table td {
  padding: 14px 24px;
  font-size: 14px;
  color: #1B0009;
  font-weight: 400;
  border: none;
}

/* Status Badges in Tab 2 (My events) */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 400;
}

.badge-due {
  color: #E5A83B;
}

.badge-paid {
  color: #4CAF50;
}

.badge-visited {
  color: #206CD9;
}

.badge-visited i {
  font-size: 14px;
  color: #206CD9;
}

.badge-cancelled {
  color: #E57373;
}

.badge-noshow {
  color: #E57373;
}

.badge-noshow i {
  font-size: 14px;
  color: #E57373;
}

/* Financial Numbers in Tab 3 (Transactions) */
.text-debit {
  color: #E57373;
  font-weight: 400;
}

.text-credit {
  color: #4CAF50;
  font-weight: 400;
}

.text-due {
  color: #E5A83B;
  font-weight: 400;
}

/* Balance Footer Row in Tab 3 */
.table-balance-row {
  background-color: #FFF7EE !important;
  height: 56px;
}

.table-balance-row td {
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 500;
  color: #1B0009;
  letter-spacing: 0.05em;
  border: none;
}

.table-balance-val {
  color: #4CAF50 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: right !important;
}

/* --- Pagination Bar --- */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  margin-bottom: 20px;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px;
  padding: 0 20px;
  border-radius: 30px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1B0009;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-btn.num-btn {
  padding: 0;
  width: 44px;
  border: none;
  background: transparent;
}

.page-btn.active {
  background: #1B0009;
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  width: 44px;
  padding: 0;
}

.page-btn:hover:not(.active) {
  background-color: rgba(94, 11, 43, 0.08);
  border-color: rgba(94, 11, 43, 0.35);
  color: #5E0B2B;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(94, 11, 43, 0.1);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 991px) {
  .profile-cover-img {
    height: 160px;
    background-position: center;
  }

  .profile-info-bar {
    height: auto;
    min-height: auto;
    padding: 0 16px 20px 16px;
  }

  .profile-info-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 0;
  }

  .profile-avatar-wrap {
    width: 110px;
    height: 110px;
    margin-top: -55px;
    margin-left: 0;
    border-width: 4px;
  }

  .profile-user-info {
    align-items: center;
    text-align: center;
    gap: 4px;
    width: 100%;
  }

  .profile-user-name {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }

  .profile-meta-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .profile-header-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
  }

  .btn-profile-pill {
    height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
    border-radius: 20px;
    gap: 5px;
  }

  .btn-profile-pill svg {
    width: 16px;
    height: 16px;
  }

  .profile-page-main {
    padding-bottom: 40px;
    min-height: auto;
  }

  .profile-page-main .container {
    padding: 0 14px;
  }

  .profile-tabs-nav {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 16px auto !important;
    border-radius: 40px !important;
    padding: 4px !important;
    gap: 4px !important;
    height: auto !important;
  }

  .profile-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-pill-btn {
    flex: 1 1 0 !important;
    padding: 0 10px !important;
    height: 38px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 38px !important;
  }

  .profile-cards-grid {
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .profile-cards-col {
    width: 100% !important;
    gap: 16px !important;
  }

  .profile-info-card {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 16px !important;
  }

  .profile-card-header {
    height: auto !important;
    min-height: 56px !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  .profile-card-icon {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
  }

  .profile-card-title {
    font-size: 16.5px !important;
  }

  .profile-kv-list {
    width: 100% !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .profile-kv-row {
    width: 100% !important;
    height: auto !important;
    min-height: 20px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .profile-kv-label {
    font-size: 12.5px !important;
    color: #666666 !important;
    flex-shrink: 0 !important;
    max-width: 48% !important;
    word-break: break-word !important;
  }

  .profile-kv-value {
    font-size: 13px !important;
    color: #1B0009 !important;
    font-weight: 500 !important;
    text-align: right !important;
    word-break: break-word !important;
    flex: 1 !important;
  }

  .table-card-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
  }

  .member-data-table {
    min-width: 680px !important;
    width: 100% !important;
    border-collapse: collapse;
  }

  .member-data-table th,
  .member-data-table td {
    padding: 12px 14px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
  }

  .member-data-table th:nth-child(4),
  .member-data-table td:nth-child(4) {
    text-align: center !important;
  }

  .table-scroll-hint {
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .profile-cover-img {
    height: 130px;
  }

  .profile-avatar-wrap {
    width: 96px;
    height: 96px;
    margin-top: -48px;
  }

  .profile-user-name {
    font-size: 18px;
  }

  .profile-member-id {
    font-size: 13px;
  }

  .btn-profile-pill {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }

  .profile-kv-list {
    padding: 12px 14px !important;
  }

  .profile-kv-label {
    font-size: 12px !important;
  }

  .profile-kv-value {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   MODAL DIALOGS & TOAST NOTIFICATIONS
   ========================================================================== */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 2, 11, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.custom-modal-dialog {
  background: #ffffff;
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  padding: 36px 32px;
  position: relative;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  border: 1px solid #E8DFD5;
  transform: scale(0.92) translateY(15px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.custom-modal-dialog.modal-dialog-lg {
  max-width: 580px;
  text-align: left;
}

.custom-modal-overlay.is-open .custom-modal-dialog {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  background: #F5EFE9;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #777777;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: #5E0B2B;
  color: #ffffff;
}

.modal-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  margin: 0 auto 18px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.modal-icon-danger {
  background: #FDE8E8;
  color: #C92A2A;
  border: 4px solid #FBD5D5;
}

.modal-icon-primary {
  background: #FAF2E8;
  color: #5E0B2B;
  border: 4px solid #F5E8D8;
}

.modal-title {
  font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
  font-size: 24px;
  color: #222222;
  margin: 0 0 10px 0;
}

.modal-subtitle {
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .modal-form-grid {
    grid-template-columns: 1fr;
  }
}

.modal-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.modal-form-group label {
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #444444;
}

.modal-input {
  width: 100%;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #222222;
  background-color: #FCFBF9;
  border: 1.5px solid #DDD3C7;
  border-radius: 10px;
  padding: 10px 14px;
  outline: none;
  transition: all 0.25s ease;
}

.modal-input:focus {
  border-color: #5E0B2B;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(94, 11, 43, 0.1);
}

.modal-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.btn-modal-secondary {
  padding: 12px 26px;
  border-radius: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #555555;
  background: #F5EFE9;
  border: 1px solid #DDD3C7;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-modal-secondary:hover {
  background: #E8DFD5;
  color: #222222;
}

.btn-modal-danger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: #C92A2A;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 42, 42, 0.25);
  transition: all 0.25s ease;
}

.btn-modal-danger:hover {
  background: #B02525;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 42, 42, 0.35);
}

.btn-modal-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 12px;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #5E0B2B 0%, #7B113A 100%);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(94, 11, 43, 0.25);
  transition: all 0.25s ease;
}

.btn-modal-primary:hover {
  background: linear-gradient(135deg, #7B113A 0%, #941344 100%);
  transform: translateY(-2px);
}

/* Toast Alerts */
.toast-notification-wrap {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast-item {
  pointer-events: auto;
  min-width: 300px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #1B020B;
  color: #ffffff;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  border-left: 4px solid #DAB580;
  animation: slideToast 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.toast-item.toast-success {
  border-left-color: #10B981;
}

.toast-item.toast-danger {
  border-left-color: #EF4444;
}

.toast-item i {
  font-size: 18px;
}

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

/* ==========================================================================
   PROFILE EMPTY STATE STYLING (Group 2085665726.svg)
   ========================================================================== */
.profile-empty-events-wrap {
  width: 100%;
  padding: 80px 20px 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.profile-empty-img {
  width: 100%;
  max-width: 287px;
  height: auto;
  margin-bottom: 24px;
  display: block;
}


/* ==================== SOURCE: past-chairpersons.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - PAST CHAIRPERSON PAGE STYLES
   Exact Figma Specification & Tokens:
   - Primary Burgundy Accent: #6D173A
   - Dark Name Color: #1B0009
   - Pill Year Badge: #4D4D4D, #FFFFFF bg, #E4E4E4 border
   - Title Font: 'Marcellus', 60px
   - Body/Meta Font: 'Albert Sans'
   - Separate, distinct hover reactions for:
     1) Chairperson Profile Image (Avatar)
     2) Year / Term Badge Pill
     3) Chairperson Name Text
   ========================================================================== */

/* --- Clean Hero Section --- */
.past-chair-hero {
  position: relative;
  width: 100%;
  background: #ffffff;
  padding: 50px 0 35px 0;
  text-align: center;
}

.past-chair-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* Breadcrumb: Home / past chairperson */
.past-chair-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4D4D4D;
  margin-bottom: 16px;
}

.past-chair-breadcrumb a {
  color: #4D4D4D;
  text-decoration: none;
  transition: color 0.25s ease;
}

.past-chair-breadcrumb a:hover {
  color: #6D173A;
}

.past-chair-breadcrumb .breadcrumb-sep {
  color: #8c8c8c;
}

.past-chair-breadcrumb .breadcrumb-active {
  color: #6D173A;
  font-weight: 500;
}

/* Hero Title: Past Chairperson */
.past-chair-hero-title {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  line-height: 75px;
  text-align: center;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  width: fit-content;
  margin: 0 auto;
  letter-spacing: 0.02em;
}

/* Main Container Section */
.chairpersons-main-section {
  position: relative;
  width: 100%;
  padding: 50px 0 100px 0;
  background-color: #ffffff;
}

/* 4-Column Chairpersons Grid (Frame 102 Width: 1320px) */
.chairpersons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 24px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  justify-items: center;
  align-items: start;
}

/* Individual Chairperson Card */
.chairperson-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 312px;
  margin: 0 auto;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   1. IMAGE CONTAINER & CARD-LEVEL SYNCHRONIZED HOVER REACTION
   ========================================================================== */
.chairperson-img-wrap {
  position: relative;
  width: 312px;
  height: 312px;
  border-radius: 600px;
  overflow: hidden;
  margin: 0 auto 18px auto;
  background: linear-gradient(180deg, #EDEDED 0%, #BABABA 100%);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}

.chairperson-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 600px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Chairperson Info Block */
.chairperson-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* ==========================================================================
   2. YEAR / TERM BADGE (Frame 101)
   ========================================================================== */
.chairperson-year {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px 14px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #4D4D4D;
  user-select: none;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   3. CHAIRPERSON NAME
   ========================================================================== */
.chairperson-name {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: #1B0009;
  margin: 0;
  transition: color 0.25s ease, transform 0.25s ease;
  text-wrap: balance;
}

/* ==========================================================================
   SYNCHRONIZED HOVER: Photo + Year Badge + Name all react together on Card Hover
   ========================================================================== */
.chairperson-card:hover .chairperson-img-wrap {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 36px rgba(109, 23, 58, 0.15);
}

.chairperson-card:hover .chairperson-card-img {
  transform: scale(1.08);
}

.chairperson-card:hover .chairperson-year {
  background: linear-gradient(135deg, #6D173A 0%, #8B1E4A 100%);
  color: #FFFFFF;
  border-color: #6D173A;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 18px rgba(109, 23, 58, 0.30);
}

.chairperson-card:hover .chairperson-name {
  color: #6D173A;
  transform: translateY(-2px);
}

/* Bottom Centered Row for Last 2 Chairpersons (Group 2085666286) */
.chairpersons-bottom-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 48px;
  width: 100%;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.chairpersons-bottom-row .chairperson-card {
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1366px) {
  .chairpersons-grid {
    max-width: 1200px;
    gap: 40px 20px;
  }
}

@media (max-width: 1024px) {
  .past-chair-hero-title {
    font-size: 48px;
    line-height: 60px;
  }
  .chairpersons-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 36px 20px;
  }
  .chairperson-img-wrap {
    width: 240px;
    height: 240px;
  }
  .chairperson-name {
    font-size: 18px;
    line-height: 22px;
  }
}

@media (max-width: 768px) {
  .past-chair-hero {
    padding: 35px 0 25px 0;
  }
  .past-chair-hero-title {
    font-size: 38px;
    line-height: 48px;
  }
  .past-chair-breadcrumb {
    font-size: 13px;
    letter-spacing: 0.15em;
  }
  .chairpersons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .chairperson-card {
    max-width: 240px;
  }
  .chairperson-img-wrap {
    width: 190px;
    height: 190px;
    margin-bottom: 12px;
  }
  .chairperson-year {
    font-size: 13px;
    padding: 5px 12px;
  }
  .chairperson-name {
    font-size: 16px;
    line-height: 20px;
  }
  .chairpersons-main-section {
    padding: 30px 0 60px 0;
  }
  .chairpersons-bottom-row {
    margin-top: 28px;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .past-chair-hero-title {
    font-size: 30px;
    line-height: 38px;
  }
  .chairpersons-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
  }
  .chairperson-card {
    max-width: 100%;
  }
  .chairperson-img-wrap {
    width: 145px;
    height: 145px;
    margin-bottom: 8px;
  }
  .chairperson-year {
    font-size: 11px;
    padding: 4px 8px;
    line-height: 14px;
  }
  .chairperson-name {
    font-size: 14px;
    line-height: 17px;
  }
  .chairpersons-bottom-row {
    gap: 12px;
    margin-top: 20px;
  }
}


/* ==================== SOURCE: sahayata.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - SAHAYATA PAGES STYLES
   Exact replica matching Figma designs
   ========================================================================== */

/* --- General Layout --- */
.sahayata-main {
  width: 100%;
  background-color: #FFFFFF;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

.sahayata-main .container {
  width: 1320px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
}

/* ==========================================================================
   SECTION 1: SUPPORT OVERVIEW & CORE GRAPHIC (Group 2085666338: 1320px x 676px)
   ========================================================================== */
.sahayata-overview-section {
  width: 1320px;
  max-width: 1320px;
  margin: 0 auto 80px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Group 2085666166: Tag */
.sahayata-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #DAB580 0%, #8E590C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

.sahayata-tag .tag-diamond {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

/* Support When You Need It Most (width 1096px, height 60px, color #1B0009) */
.sahayata-title {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  text-align: center;
  color: #1B0009;
  width: 1096px;
  max-width: 100%;
  margin: 0 auto 16px auto;
}

/* Subtitle (width 873px, color #4D4D4D) */
.sahayata-desc {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  color: #4D4D4D;
  width: 873px;
  max-width: 100%;
  margin: 0 auto 40px auto;
}

/* Rectangle 544505: 1320px x 460px, border-radius 20px */
.sahayata-graphic-wrap {
  width: 1320px;
  max-width: 1320px;
  height: 460px;
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: none;
  border: none;
}

.sahayata-graphic-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   SECTION 2 & 3: COMBINED SUPPORT CONTAINER (Group 2085666345: 1320px x 570px)
   ========================================================================== */
.sahayata-support-section {
  width: 1320px;
  max-width: 1320px;
  margin: 80px auto 100px auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.sahayata-helping-hand {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* Group 2085666324: Left (width 536px) */
.sahayata-hand-left {
  width: 536px;
  flex-shrink: 0;
  text-align: left;
}

.sahayata-hand-left .sahayata-tag {
  justify-content: flex-start;
  margin-bottom: 12px;
}

/* A Helping Hand for Our Professional Community (width 536px, color #580024) */
.sahayata-hand-left .careers-title {
  font-family: 'Marcellus', serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #580024;
  margin: 0;
  width: 536px;
}

/* Group 2085666346: Right (width 648px) */
.sahayata-hand-right {
  width: 648px;
  flex-shrink: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sahayata-hand-right p {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D;
  margin: 0 0 24px 0;
  width: 648px;
}

/* Frame 73: Register for Sahayata (220px x 60px, background #6D173A, border-radius 40px) */
.btn-register-sahayata {
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 220px;
  height: 60px;
  border-radius: 40px;
  background: #6D173A;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(109, 23, 58, 0.2);
}

.btn-register-sahayata:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(109, 23, 58, 0.35);
  background: #580024;
}

.btn-register-sahayata i {
  font-size: 12px;
  transition: transform 0.25s ease;
}

.btn-register-sahayata:hover i {
  transform: translateX(4px);
}

/* Four Support Cards Grid (Group 2085666343: width 1320px, height 314px) */
.sahayata-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 312px);
  gap: 24px;
  width: 1320px;
}

/* Card (Rectangle 544506: 312px x 314px, background #F8F8F8, border-radius 20px) */
.sahayata-card {
  width: 312px;
  height: 314px;
  background: #F8F8F8;
  border-radius: 20px;
  border: none;
  padding: 40px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sahayata-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

/* Icon (Figma: 60px x 60px) */
.sahayata-card-icon-wrap {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 80px;
}

.sahayata-icon-vector {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.sahayata-card-text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Heading (Albert Sans 20px, line-height 24px, color #1B0009) */
.sahayata-card-title {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  color: #1B0009;
  margin: 0 0 12px 0;
}

/* Description (Albert Sans 16px, line-height 19px, color #4D4D4D) */
.sahayata-card-desc {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D;
  margin: 0;
  width: 272px;
}

/* ==========================================================================
   REGISTRATION FORM STYLES (Group 2085666244 / Rectangle 544487: 1320px x 658px)
   ========================================================================== */
.sahayata-form-card {
  max-width: 1320px;
  width: 100%;
  /* min-height: 658px; */
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 40px;
  box-sizing: border-box;
  padding: 48px;
  box-shadow: none;
}

.sahayata-form-title {
  font-family: 'Albert Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%), #6D173A !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
  width: fit-content !important;
  margin: 0 0 32px 0 !important;
  text-align: left;
}

.sahayata-form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 24px;
}

.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.col-span-4 {
  grid-column: span 4;
}

.sahayata-field-empty {
  display: block;
}

.sahayata-field-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sahayata-label {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #4D4D4D;
  margin-bottom: 8px;
  display: block;
}
textarea.sahayata-input{
  padding-top:15px;
  padding-bottom:15px;
}
.sahayata-input {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  padding: 0 20px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #1B0009;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sahayata-input::placeholder {
  color: #1B0009;
  opacity: 0.85;
}

.sahayata-input:focus {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.08);
}

/* Phone input with Qatar flag */
/* Phone input with Qatar flag & Interactive Country Dropdown */
.sahayata-phone-wrap {
  position: relative;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sahayata-phone-wrap:focus-within {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109, 23, 58, 0.08);
}

.phone-flag-box,
.sahayata-phone-prefix-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sahayata-phone-prefix-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #1B0009;
}

.qatar-flag-icon {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  display: block;
}

.phone-code-val {
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #1B0009;
  font-weight: 400;
}

.phone-chevron-icon {
  font-size: 11px;
  color: #4D4D4D;
  transition: transform 0.25s ease;
}

.sahayata-phone-prefix-dropdown.open .phone-chevron-icon,
.sahayata-phone-wrap.open .phone-chevron-icon {
  transform: rotate(180deg);
}

.flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 15px;
}

.flag-selected-img {
  width: 22px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: block;
}

/* Country Dropdown Menu */
.sahayata-phone-wrap .country-dropdown-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 230px;
  max-height: 280px;
  overflow-y: auto;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  display: none;
  animation: fadeInDownPhone 0.2s ease;
}

.sahayata-phone-wrap .country-dropdown-list::-webkit-scrollbar {
  width: 4px;
}
.sahayata-phone-wrap .country-dropdown-list::-webkit-scrollbar-track {
  background: #F9F9F9;
  border-radius: 4px;
}
.sahayata-phone-wrap .country-dropdown-list::-webkit-scrollbar-thumb {
  background: #E4E4E4;
  border-radius: 4px;
}

.sahayata-phone-prefix-dropdown.open .country-dropdown-list,
.sahayata-phone-wrap.open .country-dropdown-list {
  display: block;
}

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

.sahayata-phone-wrap .country-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  cursor: pointer;
  font-family: 'Albert Sans', sans-serif;
  font-size: 14px;
  color: #1B0009;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sahayata-phone-wrap .country-option:hover,
.sahayata-phone-wrap .country-option.active {
  background-color: #FDF4F7;
  color: #6D173A;
}

.sahayata-phone-wrap .country-option:first-child {
  border-radius: 20px 20px 0 0;
  padding-top: 14px;
}

.sahayata-phone-wrap .country-option:last-child {
  border-radius: 0 0 20px 20px;
  padding-bottom: 14px;
}

.sahayata-phone-wrap .country-option .country-flag {
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sahayata-phone-wrap .country-flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  display: block;
}

.sahayata-phone-wrap .country-option .country-name {
  flex: 1;
  font-size: 14px;
  color: inherit;
  white-space: nowrap;
}

.sahayata-phone-wrap .country-option .country-code {
  display: none;
}

.phone-v-divider {
  width: 1px;
  height: 20px;
  background: #E4E4E4;
  margin: 0 12px;
  flex-shrink: 0;
}

.phone-number-field {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Albert Sans', sans-serif;
  font-size: 16px;
  color: #1B0009;
}

.phone-number-field::placeholder {
  color: #1B0009;
  opacity: 0.85;
}

/* Icon Wrap (Date & Select) */
.sahayata-icon-input-wrap {
  position: relative;
  width: 100%;
}

/* Fix for DOUBLE CALENDAR: Hide browser native calendar picker icon and overlay invisibly */
.sahayata-icon-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sahayata-icon-input-wrap input[type="date"]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
}

.input-field-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #4D4D4D;
  pointer-events: none;
}

.sahayata-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
}

/* Checkbox (Group 2085666289) */
.sahayata-checkbox-wrap {
  margin-top: 10px;
  margin-bottom: 8px;
}

.sahayata-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.sahayata-checkbox-input {
  display: none;
}

.checkbox-custom-box {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sahayata-checkbox-input:checked + .checkbox-custom-box {
  background: #6D173A;
  border-color: #6D173A;
}

.sahayata-checkbox-input:checked + .checkbox-custom-box::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  color: #FFFFFF;
}

.checkbox-text {
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #4D4D4D;
}

/* Action Buttons (Group 1261154246) */
.sahayata-form-btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.btn-sahayata-cancel-action {
  box-sizing: border-box;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #FFFFFF;
  border: 1px solid #E4E4E4;
  outline: none;
  color: #1B0009;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-sahayata-cancel-action:hover {
  background-color: rgba(94, 11, 43, 0.08);
  border-color: transparent;
  color: #5E0B2B;
  transform: translateY(-1px);
  box-shadow: none;
}

.btn-sahayata-submit-action {
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 200px;
  height: 60px;
  box-sizing: border-box;
  border-radius: 30px;
  background: #1B0009;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 14px rgba(27, 0, 9, 0.25);
}

.btn-sahayata-submit-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #6D173A;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s ease;
  transform: scale(1.05);
}

.btn-sahayata-submit-action:hover::before {
  opacity: 1;
  transform: scale(1);
}

.btn-sahayata-submit-action:hover {
  background: #6D173A;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(109, 23, 58, 0.4);
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .sahayata-main .container {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .sahayata-overview-section,
  .sahayata-graphic-wrap,
  .sahayata-support-section,
  .sahayata-cards-grid,
  .sahayata-title,
  .sahayata-desc,
  .sahayata-hand-left,
  .sahayata-hand-left .careers-title,
  .sahayata-hand-right,
  .sahayata-hand-right p,
  .sahayata-card,
  .sahayata-form-card {
    width: 100%;
    max-width: 100%;
  }

  .sahayata-title,
  .sahayata-hand-left .careers-title {
    line-height: 1.2;
  }

  .sahayata-overview-section {
    height: auto;
    margin-bottom: 50px;
  }

  .sahayata-graphic-wrap {
    height: auto;
    max-height: 380px;
  }

  .sahayata-support-section {
    height: auto;
  }

  .sahayata-helping-hand {
    flex-direction: column;
    gap: 36px;
  }

  .sahayata-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .sahayata-card {
    height: auto;
    min-height: 260px;
  }

  .sahayata-form-card {
    margin: 0;
    padding: 36px 28px;
    box-sizing: border-box;
  }

  .sahayata-form-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
  }

  .col-span-1,
  .col-span-2 {
    grid-column: span 2;
  }

  .col-span-4 {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .sahayata-title,
  .sahayata-hand-left .careers-title {
    font-size: 28px;
  }

  .sahayata-main .container {
    padding: 0 16px;
  }

  .sahayata-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .sahayata-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 20px 14px !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .sahayata-card-icon-wrap {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 24px !important;
  }

  .sahayata-icon-vector {
    width: 44px !important;
    height: 44px !important;
  }

  .sahayata-card-title {
    font-size: 15px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
  }

  .sahayata-card-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .sahayata-form-grid {
    grid-template-columns: 1fr;
  }

  .col-span-1,
  .col-span-2,
  .col-span-4 {
    grid-column: span 1;
  }

  .sahayata-form-btn-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 12px;
  }

  .btn-sahayata-submit-action,
  .btn-sahayata-cancel-action {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .sahayata-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .sahayata-card {
    padding: 20px 18px !important;
    border-radius: 16px !important;
    width: 100% !important;
  }

  .sahayata-card-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 16px !important;
  }

  .sahayata-icon-vector {
    width: 42px !important;
    height: 42px !important;
  }

  .sahayata-card-title {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }

  .sahayata-card-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Mobile Country Dropdown */
  .sahayata-phone-wrap .country-dropdown-list {
    left: 0 !important;
    width: 230px !important;
    max-width: 85vw !important;
    max-height: 250px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15) !important;
  }

  .sahayata-phone-wrap .country-option {
    padding: 10px 16px !important;
    gap: 10px !important;
  }

  .sahayata-phone-wrap .country-option .country-name {
    font-size: 13.5px !important;
  }
}


/* ==================== SOURCE: sponsors.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - SPONSORS PAGE STYLES
   ========================================================================== */

.sponsors-main-section {
  width: 100%;
  background-color: #FFFFFF;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

.sponsors-container,
.sponsors-container.container {
  max-width: 1380px !important;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* --- Sponsor Tier Sections --- */
.sponsor-tier-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Sponsor Header --- */
.sponsor-tier-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.sponsor-tier-title {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 60px;
  color: #580024;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.sponsor-line {
  width: 240px;
  height: 1.5px;
  position: relative;
}

.sponsor-line.left {
  background: linear-gradient(to right, transparent, #580024);
}

.sponsor-line.right {
  background: linear-gradient(to left, transparent, #580024);
}

.sponsor-line::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: #580024;
  transform: translateY(-50%) rotate(45deg);
  top: 50%;
}

.sponsor-line.left::after {
  right: -3px;
}

.sponsor-line.right::after {
  left: -3px;
}

/* --- Sponsor Grids --- */
.sponsor-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.sponsor-grid-1 { max-width: 536px; }
.sponsor-grid-gold {
  max-width: 1320px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 0 auto;
}
.sponsor-grid-6 { 
  max-width: 1320px; 
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px; 
}
.sponsor-grid-2 { 
  max-width: 424px; 
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 24px;
  margin: 0 auto; 
}
.sponsor-grid-4 { max-width: 872px; }

/* --- Sponsor Card --- */
.sponsor-card {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sponsor-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: none !important;
}

.sponsor-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Specific Card Sizes */
.title-sponsor-card {
  width: 536px;
  height: 200px;
  aspect-ratio: 536 / 200;
}

.sponsor-grid-gold .sponsor-card,
.sponsor-grid-6 .sponsor-card,
.sponsor-grid-4 .sponsor-card,
.sponsor-grid-2 .sponsor-card {
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1;
}

/* --- Partners Section --- */
.partner-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner-label {
  position: absolute;
  top: -8px;
  background: #FFFFFF;
  padding: 0 8px;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  color: #0F022D;
  text-align: center;
  z-index: 2;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1360px) {
  .sponsor-grid-6,
  .sponsor-grid-2 {
    flex-wrap: wrap !important;
  }
}

@media (max-width: 1024px) {
  .sponsor-tier-title { font-size: 36px; }
  .sponsor-line { width: 120px; }
  .title-sponsor-card { width: 400px; height: 160px; }
  .sponsor-grid-6 .sponsor-card,
  .sponsor-grid-4 .sponsor-card,
  .sponsor-grid-2 .sponsor-card {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 768px) {
  .sponsors-container { gap: 44px !important; }
  .sponsor-tier-title { font-size: 28px; }
  .sponsor-line { width: 60px; }
  .sponsor-tier-header { gap: 14px; margin-bottom: 20px; }
  
  .title-sponsor-card { 
    width: 100% !important; 
    max-width: 320px !important; 
    height: auto !important; 
    aspect-ratio: 536 / 200 !important;
    padding: 0 !important; 
  }
  
  .sponsor-grid-6 .sponsor-card,
  .sponsor-grid-4 .sponsor-card,
  .sponsor-grid-2 .sponsor-card,
  .sponsor-card {
    width: 140px !important;
    height: 140px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
  }
}


/* ==================== SOURCE: useful-links.css ==================== */

/* ==========================================================================
   ICAI DOHA CHAPTER - USEFUL LINKS PAGE STYLES
   Exact pixel-perfect replica matching Figma Group 2085665718
   ========================================================================== */

/* --- General Layout --- */
.useful-links-main {
  width: 100%;
  background-color: #FFFFFF;
  padding: 60px 0 100px 0;
  overflow: hidden;
}

/* Outer Bounding Container: Group 2085665718 (width: 1320px) */
.links-group-2085665720 {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 55px;
}

/* Category Block */
.links-category-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Category Title (Figma: Albert Sans 28px, Gradient #6D173A to #D43E7B) */
.category-title {
  font-family: 'Albert Sans', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  background: linear-gradient(90.26deg, #6D173A 0.23%, #D43E7B 99.9%), #0F022D !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 22px 0 !important;
}

/* Table Responsive Wrap (Figma Group 1561298924: 1320px, border-radius: 20px 20px 0 0) */
.table-responsive-wrap {
  width: 100%;
  border-radius: 20px 20px 0px 0px;
  overflow: auto;
  background: #FFFFFF;
  box-shadow: none;
  border: none;
}

/* Useful Links Table */
.useful-links-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: 'Albert Sans', sans-serif;
}

/* Table Header (Figma Group 1000000964 & Rectangle 116: height 60px, background: #1B0009, border-radius: 20px 20px 0 0) */
.useful-links-table thead {
  background: #1B0009;
}
.useful-links-table th:nth-child(3), .useful-links-table th:nth-child(2){
    
    min-width: 160px;
}
.useful-links-table th {
  height: 60px;
  white-space: nowrap;
  padding: 0 20px;
  color: #FFFFFF;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  border: none;
  vertical-align: middle;
}

.useful-links-table th:first-child {
  width: 120px;
  padding-left: 40px;
  text-align: left;
}

.useful-links-table th:nth-child(2) {
  width: 480px;
  text-align: left;
}

.useful-links-table th:nth-child(3) {
  padding-right: 40px;
  text-align: left;
}

/* Table Body Rows (Figma Rectangle 116: height 60px, alternate #FFFFFF with border #E4E4E4 & #FFF7ED) */
.useful-links-table tbody tr {
  height: 60px;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

.useful-links-table td {
  height: 60px;
  padding: 0 20px;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #1B0009;
  border: none;
  vertical-align: middle;
}

.useful-links-table td:first-child {
  width: 120px;
  padding-left: 40px;
  color: #1B0009;
  text-align: left;
}

.useful-links-table td.link-name {
  width: 480px;
  color: #1B0009;
  font-weight: 400;
}

.useful-links-table td:nth-child(3) {
  padding-right: 40px;
}

/* Link Styling (Figma: Albert Sans 16px, color: #1B0009) */
.useful-links-table td a.external-link {
  color: #1B0009;
  font-family: 'Albert Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-all;
}

.useful-links-table td a.external-link:hover {
  color: #6D173A;
  text-decoration: underline;
}

/* Odd rows (1, 3, 5, 7, 9, 11, 13): #FFFFFF with border #E4E4E4 */
.useful-links-table tbody tr:nth-child(odd) {
  background-color: #FFFFFF;
  box-shadow: inset 0 -1px 0 #E4E4E4, inset 0 1px 0 #E4E4E4;
}

/* Even rows (2, 4, 6, 8, 10, 12): #FFF7ED (warm soft cream) */
.useful-links-table tbody tr:nth-child(even) {
  background-color: #FFF7ED;
}

.useful-links-table tbody tr:hover {
  filter: brightness(0.98);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .links-group-2085665720 {
    padding: 0 24px;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .useful-links-table th, 
  .useful-links-table td {
    padding: 12px 14px;
    font-size: 14px;
  }

  .useful-links-table th:first-child,
  .useful-links-table td:first-child {
    width: 60px;
    padding-left: 14px;
  }

  .useful-links-table th:nth-child(2),
  .useful-links-table td.link-name {
    width: auto;
  }

  .useful-links-table th:nth-child(3),
  .useful-links-table td:nth-child(3) {
    padding-right: 14px;
  }

  .category-title {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 14px;
  }
}


/* ==================== SOURCE: responsive-patch.css ==================== */

/* ==========================================================================
   GLOBAL MOBILE RESPONSIVE PATCH
   Forces Figma-exported fixed-width absolute blocks to stack on mobile
   ========================================================================== */

@media (max-width: 1320px) {
  /* Prevent intermediate tablet overflow */
  .footer-links-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}

@media (max-width: 991px) {
  /* GLOBAL ROBUST OVERFLOW PREVENTION */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Force everything to wrap and not push the viewport */
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Core Width Resets */
  .container, 
  .main-footer,
  .footer-container,
  .footer-top-row,
  .footer-links-row,
  .footer-about-block,
  .footer-newsletter-block,
  .about-page-main {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Any container sized precisely to 1320px, 836px, etc. needs to shrink */
  [class*="Group"], 
  [class*="Rectangle"],
  [class*="Frame"],
  [class*="Grid"],
  [class*="Container"],
  [class*="-wrap"],
  [class*="-grid"],
  [class*="-section"],
  [class*="-card"],
  [class*="-content"],
  [class*="-img"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Exceptions: Timeline dots, year pills, and data tables must keep scrollable width */
  .timeline-dot,
  .timeline-dot-inner {
    max-width: unset !important;
    max-height: unset !important;
    width: 18px !important;
    height: 18px !important;
  }
  .timeline-dot-inner {
    width: 8px !important;
    height: 8px !important;
  }
  .timeline-year-text {
    max-width: fit-content !important;
    width: auto !important;
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .table-card-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: block !important;
  }

  .member-data-table {
    max-width: none !important;
    width: max-content !important;
    min-width: 660px !important;
    display: table !important;
  }

  .member-data-table th,
  .member-data-table td {
    max-width: none !important;
    white-space: nowrap !important;
  }

  /* ================== FOOTER REPAIRS ================== */
  .footer-top-row {
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
  }
  
  .footer-about-block, .footer-newsletter-block {
    width: 100% !important;
  }
  
  .newsletter-form {
    width: 100% !important;
    max-width: 410px !important;
  }

  .footer-links-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 30px !important;
  }

  .footer-col {
    width: 100% !important;
  }
  
  .footer-bottom-row {
    flex-direction: column !important;
    gap: 20px !important;
    text-align: center !important;
  }

  /* ================== ABOUT US & OTHER GRIDS ================== */
  .about-welcome-grid,
  .about-mv-cards-grid,
  .about-career-grid,
  .career-mosaic-grid,
  .media-grid,
  .video-gallery-grid,
  .events-grid,
  .gallery-grid,
  .contact-grid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 30px !important;
  }

  .sponsor-grid, 
  .sponsor-grid-gold,
  .sponsor-grid-6, 
  .sponsor-grid-4, 
  .sponsor-grid-2,
  [class*="sponsor-grid-"] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 22px !important;
    align-items: center !important;
    justify-items: center !important;
    max-width: 360px !important;
    margin: 0 auto 20px auto !important;
  }
  .sponsor-grid-1, .sponsor-grid.sponsor-grid-1 {
    grid-template-columns: 1fr !important;
    max-width: 330px !important;
  }
  .sponsor-grid-3 .sponsor-card:last-child {
    grid-column: span 2;
  }
  .sponsor-card {
    width: 100% !important;
    height: auto !important;
    max-width: 155px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .sponsor-card:hover {
    box-shadow: none !important;
    transform: translateY(-4px) scale(1.04) !important;
  }
  .title-sponsor-card {
    max-width: 330px !important;
    aspect-ratio: 536 / 200 !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .sponsor-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .about-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 16px !important;
    max-width: 440px !important;
    margin: 0 auto !important;
  }

  /* Fix Absolute Positioned Elements breaking screen */
  .hero-wrapper, .hero-section {
    overflow: hidden;
  }
  
  .hero-slide {
    width: 100% !important;
  }

  .sponsor-box {
    width: 100% !important;
  }
}

/* Mobile Login Nav Item (Hidden as requested) */
.mobile-only-nav {
  display: none !important;
}
@media (max-width: 1150px) {
  .mobile-only-nav {
    display: none !important;
  }
}

/* Force Login Modal Centering & Responsive on Mobile */
.custom-modal-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.split-login-modal {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: auto !important;
}

@media (max-width: 991px) {
  .split-login-modal {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 92vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 24px 20px 24px 20px !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }
  .login-modal-visual {
    display: none !important;
  }
  .login-modal-form-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .login-modal-title {
    width: 100% !important;
    height: auto !important;
    font-size: 32px !important;
    line-height: 38px !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }
  .login-modal-subtitle {
    width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 20px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
  }
  .login-form-group {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 14px !important;
  }
  .login-input-wrapper,
  .login-form-control,
  .login-options-row,
  .btn-login-submit,
  .login-register-prompt {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .login-options-row {
    height: auto !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
  }
  .login-modal-close-btn {
    top: 14px !important;
    right: 14px !important;
  }
}

/* ==========================================================================
   MOBILE ACCORDION DROPDOWN FIX
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-menu {
    top: 64px !important;
    padding-top: 16px !important;
    padding-bottom: 36px !important;
  }

  .nav-link {
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .nav-link span.plus {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #E6CA85 !important;
    margin-right: 6px !important;
    transition: color 0.2s ease !important;
    line-height: 1 !important;
  }

  .nav-item.dropdown.open > .nav-link span.plus {
    color: #ffffff !important;
  }

  .nav-item.dropdown:hover .dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .nav-item.dropdown .dropdown-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 100% !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(230, 202, 133, 0.25) !important;
    border-radius: 12px !important;
    padding: 6px 0 !important;
    margin: 8px 0 12px 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
    box-sizing: border-box !important;
  }

  .nav-item.dropdown .dropdown-menu::before {
    display: none !important;
  }

  .nav-item.dropdown.open > .dropdown-menu {
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    white-space: normal !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .dropdown-item:last-child {
    border-bottom: none !important;
  }

  .dropdown-item i {
    color: #E6CA85 !important;
    font-size: 12px !important;
  }

  .dropdown-item:hover,
  .dropdown-item:active {
    background-color: rgba(230, 202, 133, 0.15) !important;
    color: #ffffff !important;
  }
}

/* Management Committee Card Responsiveness Fix */
@media (max-width: 991px) {
  .committee-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .committee-card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 24px 18px !important;
    box-sizing: border-box !important;
  }
  .committee-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }
  .committee-avatar-wrap {
    width: 80px !important;
    height: 80px !important;
    flex: 0 0 80px !important;
    border-radius: 50% !important;
  }
  .committee-name {
    font-size: 26px !important;
    line-height: 32px !important;
  }
  .committee-role {
    font-size: 17px !important;
    line-height: 22px !important;
  }
  .committee-card-body {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  .committee-bio {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
}

/* Contact Us Page & Google Maps Mobile Responsiveness Fix */
@media (max-width: 991px) {
  .contact-page-main {
    padding: 30px 0 60px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .contact-page-main .container,
  .contact-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .contact-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: 36px !important;
    box-sizing: border-box !important;
  }
  .contact-card-wrap,
  .contact-info-card,
  .contact-form-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    box-sizing: border-box !important;
  }
  .contact-experts-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 16px !important;
    box-sizing: border-box !important;
  }
  .contact-experts-section .experts-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
  }
  .contact-experts-section .experts-title {
    font-size: 30px !important;
    line-height: 38px !important;
    margin-bottom: 10px !important;
  }
  .contact-experts-section .experts-subtitle {
    font-size: 14.5px !important;
    line-height: 22px !important;
    max-width: 100% !important;
  }
  .contact-map-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px auto 0 auto !important;
    padding: 0 !important;
    height: 320px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .contact-map-iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
  }
}

@media (max-width: 480px) {
  .contact-page-main .container,
  .contact-container {
    padding: 0 12px !important;
  }
  .contact-card-wrap {
    padding: 20px 14px !important;
  }
  .contact-map-section {
    height: 260px !important;
    border-radius: 12px !important;
  }
}

/* Global Hero Banner & Long Title Mobile Responsiveness Fix */
@media (max-width: 991px) {
  .events-hero-section {
    min-height: 180px !important;
    padding: 30px 16px 55px 16px !important;
    background: url('../img/hero-banner.png?v=4.0.0') center top / 100% 100% no-repeat !important;
    background-color: transparent !important;
  }
  .events-hero-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    word-break: break-word !important;
  }
}

@media (max-width: 480px) {
  .events-hero-section {
    min-height: 155px !important;
    padding: 24px 12px 48px 12px !important;
    background: url('../img/hero-banner.png?v=4.0.0') center top / 100% 100% no-repeat !important;
    background-color: transparent !important;
  }
  .events-hero-title {
    font-size: 20px !important;
    line-height: 1.35 !important;
    padding: 0 4px !important;
  }
  .events-breadcrumb {
    font-size: 11px !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 6px !important;
  }
}

/* Event Registration Addon Member & Gender Selector Mobile Fixes */
@media (max-width: 768px) {
  .reg-addon-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 0 !important;
    width: 100% !important;
  }
  .addon-label-text {
    font-size: 16px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .btn-add-member {
    width: auto !important;
    min-width: 120px !important;
    height: 44px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    border-radius: 44px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  .gender-selector-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
  }
  .gender-radio-label {
    flex: 1 !important;
    display: flex !important;
    min-width: 0 !important;
  }
  .gender-pill-btn {
    flex: 1 1 0% !important;
    width: 100% !important;
    min-width: 100px !important;
    max-width: none !important;
    height: 48px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    border-radius: 24px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}




/* =====================================================================
   SELECT2 OVERRIDES — match reg-form-input styling
   ===================================================================== */
.select2-container--default .select2-selection--multiple {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 46px;
  padding: 6px 12px;
  background: #FFFFFF;
  border: 1.5px solid #E2D9D2;
  border-radius: 10px;
  font-size: 14px;
  color: #1B0009;
  transition: border-color 0.2s ease;
  outline: none;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109,23,58,0.08);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #6D173A;
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: 12px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255,255,255,0.8);
  margin-right: 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
  color: #9CA3AF;
}

.select2-dropdown {
  border: 1.5px solid #E2D9D2;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #6D173A;
  color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #FAF0F4;
  color: #6D173A;
  font-weight: 500;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #E2D9D2;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
}

.select2-container { width: 100% !important; }


/* =====================================================================
   CUSTOM MULTI-SELECT DROPDOWN (Key Skills)
   ===================================================================== */
.custom-multiselect {
  position: relative;
  width: 100%;
}

.custom-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; 
  padding: 0 14px;
  background: #FFFFFF; 
      height: 52px;
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 30px;
  font-size: 14px;
  color: #1B0009;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  user-select: none;
}

.custom-multiselect-trigger:hover {
  border-color: #B8BCC6;
}

.custom-multiselect.is-open .custom-multiselect-trigger {
  border-color: #6D173A;
  box-shadow: 0 0 0 3px rgba(109,23,58,0.08);
}

.custom-multiselect-label {
  color: #1B0009;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-multiselect-label.is-placeholder {
  color: #9CA3AF;
}

.custom-multiselect-arrow {
  font-size: 12px;
  color: #6D173A;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.custom-multiselect.is-open .custom-multiselect-arrow {
  transform: rotate(180deg);
}

.custom-multiselect-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1.5px solid #E2D9D2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 9999;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 0;
}

.custom-multiselect.is-open .custom-multiselect-menu {
  display: block;
}

.custom-multiselect-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13.5px;
  color: #1B0009;
  cursor: pointer;
  transition: background 0.15s;
}

.custom-multiselect-item:hover {
  background: #FAF0F4;
}

.custom-multiselect-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6D173A;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 4px;
}

.custom-multiselect-item span {
  flex: 1;
  line-height: 1.4;
}


/* =====================================================================
   FORM VALIDATION — highlight invalid fields on submit (no scroll)
   ===================================================================== */
.was-validated .reg-form-input:invalid,
.was-validated .reg-form-select:invalid,
.was-validated .reg-phone-input:invalid {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
  background-color: #FFF5F5 !important;
}

.was-validated .reg-form-input:valid,
.was-validated .reg-form-select:valid,
.was-validated .reg-phone-input:valid {
  border-color: #16A34A !important;
}

/* ==========================================================================
   PHOTO GALLERY DETAIL — DYNAMIC GRID
   ========================================================================== */
.gallery-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
}

.gallery-detail-grid .gallery-item {
  height: 220px;
  width: 100%;
  cursor: pointer;
}

@media (max-width: 992px) {
  .gallery-detail-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .gallery-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-detail-grid .gallery-item {
    height: 170px !important;
  }
}

@media (max-width: 480px) {
  .gallery-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   VIDEO GALLERY — LIGHTBOX MODAL
   ========================================================================== */
.video-modal-dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

.video-modal-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: modalScaleIn 0.3s ease forwards;
}

.video-modal-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
#membershipPayBtn {
    background: #5e0b2b;
    color: #fff;
    border: 1px solid #5e0b2b;
}
.img-capction{
  padding-bottom: 15px;
}
.gallery-box {
    border: 1px solid #D7DDE8;
    padding: 10px;
    border-radius: 20px;
}
.magazines-box:hover .magazinesBook {
    cursor: pointer;
}
.magazines-box:hover .magazinesBook {
    transform: rotateZ(0deg);
}
.magazines-box:hover .magazinesBook .magazinesBook__cover {
    transform: rotateY(-30deg);
    z-index: 999;
    box-shadow: 9px 3px 20px rgba(0, 0, 0, 0.2);
}
.magazines-box:hover .magazinesBook .effect {
    width: 40px;
}
.magazines-box:hover .magazinesBook .light {
    opacity: 1;
    width: 70%;
}
 .magazinesWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.magazinesBook {
    height: 270px;
    width: 192px;
}
.uploadImgRemove{
      display: none;
    position: absolute;
    top: -8px;
    align-items: center;
    justify-content: center;
    right: -2px;
    width: 28px;
    height: 28px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    border-radius: 50%;
    background: rgb(220, 53, 69);
    color: rgb(255, 255, 255);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px;
    z-index: 2;
}
.magazinesBook {
    height: 320px;
    margin-bottom: 10px;
    position: relative;
    transition: 0.4s ease-in-out;
    border-radius: 5px 15px 15px 5px;
    transform-origin: left center 0px;
    perspective: 800px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.magazinesBook__cover {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    background: #111;
    background-size: cover;
    border-radius: 15px;
    box-shadow: inset 4px 1px 3px #ffffff60, inset 0 -1px 2px #00000080;
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
}
.effect {
    width: 20px;
    height: 100%;
    margin-left: 10px;
    border-left: 2px solid #00000010;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    transition: all .5s ease;
}
.light {
    width: 90%;
    height: 100%;
    position: absolute;
    border-radius: 3px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%);
    top: 0;
    right: 0;
    opacity: .1;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
}
.book-inside {
    width: calc(100% - 2px);
    height: 96%;
    position: relative;
    top: 2%;
    border: 1px solid #e9e9e9;
    border-radius: 3px;
    background: #e9e9e94f;
    /* box-shadow: 10px 40px 40px -10px #00000030, inset -2px 0 0 grey, inset -3px 0 0 #dbdbdb, inset -4px 0 0 white, inset -5px 0 0 #dbdbdb, inset -6px 0 0 white, inset -7px 0 0 #dbdbdb, inset -8px 0 0 white, inset -9px 0 0 #dbdbdb; */
}
.totle-image {
    display: flex;
    gap: 13px;
    margin-top: 12px;
    justify-content: space-between;
    align-items: center;
}

.img-capction {
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0F022D;
}
.dateBox {
    background: #EFEAFF;
    color: #4E2BCD;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    padding: 8px 8px;
    display: flex;
    align-items: center;
    border-radius: 30px;
}
.gallery-box img {
    height: 270px;
    transition: all 0.3s linear 0s;
    margin-bottom: 10px;
}
.gallery-box .imgCounter img{
  width: 20px;
    height: auto;
}