/* GOOGLE FONTS */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

/* RTL SUPPORT & FONTS */
[lang="ar"] body,
.rtl-mode {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
}

[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, 
[lang="ar"] .nav__logo, [lang="ar"] .button, [lang="ar"] .nav__link {
    font-family: 'Tajawal', sans-serif;
}

/* RTL Layout Helpers */
[lang="ar"] .text-start {
    text-align: right !important;
}

/* Row direction is a DESKTOP concern only. These rules used to be unscoped,
   and because [lang="ar"] .nav__list outweighs the plain .nav__list column
   rule, the Arabic mobile menu was forced into a single horizontal row: items
   overlapped and Volunteer was pushed off-screen. Both languages now share the
   same vertical mobile panel. */
@media screen and (min-width: 992px) {
    [lang="ar"] .nav__list {
        flex-direction: row-reverse;
    }

    [lang="en"] .nav__list {
        justify-content: center;
    }
}

[lang="ar"] .home__content.grid {
    direction: rtl;
}

/* Conference Page RTL Fixes */
[lang="ar"] .conference-hero,
[lang="ar"] .summit__info {
    text-align: right !important;
}

/* VARIABLES CSS */
:root {
  --header-height: 3.5rem;

  /* Colors – Red / Orange / White Theme (HSL syntax) */
  --hue: 4; /* Red–Orange base hue */

  --first-color: hsl(var(--hue), 65%, 50%);       /* Softer orange */
  --first-color-alt: #e8592d;          /* #ea580c */
  --first-color-light: hsl(24, 80%, 55%);         /* Softer light orange */
  --first-color-dark: hsl(25, 60%, 63%);           /* #b91c1c */
  
  /* Purple accent colors */
  --accent-purple: hsl(280, 60%, 50%);            /* Primary purple */
  --accent-purple-light: hsl(280, 50%, 60%);      /* Light purple */
  --accent-purple-dark: hsl(280, 65%, 40%);       /* Dark purple */

  --title-color: hsl(0, 0%, 100%);                /* white */
  --text-color: hsl(210, 20%, 98%);               /* #f8fafc */
  --text-color-light: hsl(210, 16%, 90%);         /* #e2e8f0 */
  --text-color-dark: hsl(215, 28%, 17%);          /* #1a202c */

  /* Backgrounds */
  --body-color: linear-gradient(
    135deg,
    #FF4005,
    hsl(19, 67%, 49%) 50%,
    #FF4005 100%
  );

  --container-color: hsla(0, 0%, 0%, 0.4);
  --container-color-alt: hsl(24, 86%, 97%);

  --sub: hsl(0, 0%, 100%);

  /* Accent colors */
  --accent-orange: hsl(24, 94%, 61%);             /* #fb923c */
  --accent-red: hsl(0, 84%, 60%);                 /* #ef4444 */

  --dark-text: hsl(348, 28%, 17%);
  --light-text: hsl(214, 15%, 53%);               /* #4a5568 */
  --border-color: hsl(210, 16%, 90%);

  --shadow-color: hsla(3, 37%, 19%, 0.1);

  /* Font and typography */
  --body-font: "Poppins", sans-serif;
  --biggest-font-size: 3rem;
  --h1-font-size: 2.5rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.5rem;
  --normal-font-size: 1.25rem;
  --small-font-size: 1rem;
  --smaller-font-size: 0.875rem;

  /* Font weight */
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-black: 900;

  /* Margins Bottom */
  --mb-0-25: 0.25rem;
  --mb-0-5: 0.5rem;
  --mb-0-75: 0.75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;

  /* z index */
  --z-tooltip: 10;
  --z-fixed: 100;

  /* Card shadow */
  --card-shadow:
    0 4px 6px hsla(4, 73%, 53%, 0.1),
    0 1px 3px hsla(0, 0%, 0%, 0.08);
}

/* Responsive typography */
@media screen and (min-width: 992px) {
  :root {
    --biggest-font-size: 4rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.813rem;
  }
}

/* Laptop (>=1200px) - Bigger text for span/a/p in home section */
@media screen and (min-width: 1200px) {
  .home__data .home__description {
    font-size: 1.35rem !important;
    line-height: 1.6;
  }
  
  .home__data .home__buttons .button--link {
    font-size: 1.2rem !important;
  }
  
  .home__data .home__buttons .button--link span {
    font-size: 1.2rem !important;
  }
  
  .home__buttons {
    gap: 1rem;
  }
}
/* BASE */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: var(--header-height) 0 0 0;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  transition: 0.3s;
}
h1,
h2,
h3,
h4 {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
button,
input {
  border: none;
  outline: none;
  
}
button {
  cursor: pointer;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}
 .btn-action {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 0.75rem 1.75rem;
            border-radius: 9999px; /* Full rounded corners */
            font-weight: 700;
            font-size: 1rem;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
            /* Added margin-top to separate buttons from the title */
            margin-top: 1.5rem; 
        }
        /* Red color scheme for Patient button */
        .btn-patient {
            background-color: #dc2626; /* Red 600 */
            color: white;
        }
        .btn-patient:hover {
            background-color: #b91c1c; /* Red 700 */
            transform: translateY(-1px);
        }
        /* Slightly darker red for Healthcare Provider button */
        .btn-healthcare {
            background-color: #b91c1c; /* Red 700 */
            color: white;
        }
        .btn-healthcare:hover {
            background-color: #991b1b; /* Red 800 */
            transform: translateY(-1px);
        }


        
/* REUSABLE CSS CLASSES */
.section {
  padding: 6rem 0 3rem;
}
.section__title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-2);
  text-align: center;
}
/* LAYOUT */
.container {
  max-width: 968px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}
.grid {
  display: grid;
}
.main {
  overflow: hidden; /*For animation*/
}
/* HEADER */
.header {
  width: 100%;
  background: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
}
/* NAV */
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  font-weight: var(--font-medium);
  margin-right: 1rem; /* Reduced spacing between logo and menu in LTR */
}

[lang="ar"] .nav__logo {
    margin-right: 0;
    margin-left: 2rem; /* Add spacing in RTL */
}

.nav__logo-img {
  width: 1.25rem;
}
.nav__link,
.nav__logo,
.nav__toggle,
.nav__close {
  color: var(--sub);
}
.nav__toggle {
  font-size: 1.25rem;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    width: 100%;
    background: var(--container-color);
    top: -150%;
    left: 0;
    color: #ff5b79;
    padding: 3.5rem 0;
    transition: 0.4s;
    z-index: var(--z-fixed);
    border-radius: 0 0 1.5rem 1.5rem;
  }
  .nav__toggle {
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}
.nav__img {
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  
}
.nav__close {
  font-size: 1.8rem;
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  cursor: pointer;
}
.nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.5rem;
}
.nav__link {
  text-transform: uppercase;
  font-weight: var(--font-black);
  transition: 0.4s;
}
.nav__link:hover {
  color: var(--text-color);
}
/* Show menu */
.show-menu {
  top: 0;
}
/* Change background header */
.scroll-header {
  background: var(--container-color);
}
/* Active link */
.active-link {
  position: relative;
}
.active-link::before {
  content: "";
  position: absolute;
  bottom: -0.75rem;
  left: 45%;
  width: 5px;
  height: 5px;
  background-color: var(--sub);
  border-radius: 50%;
}

/* Current page indicator
   Driven entirely by aria-current="page", which js/nav-active.js sets on the
   one navbar link pointing at the page being viewed. Because the hook is the
   href-derived attribute and not a language-specific class, EN and AR share
   these rules unchanged.

   The underline is drawn by ::after on an absolutely positioned box, so it
   costs no layout and cannot shift the navbar or change its height. ::before
   is left alone — the scroll-spy .active-link dot already uses it. The colour
   is currentColor, so the indicator inherits whatever colour the navbar text
   has on that page rather than introducing one of its own. */
.nav__logo[aria-current="page"],
.nav__link[aria-current="page"] {
  position: relative;
}
.nav__logo[aria-current="page"]::after,
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  /* Pinned to both edges, so the same rule spans the item in LTR and RTL. */
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

/* The Volunteer item is already a ghost pill, so its current-page state fills
   that existing pill softly instead of underlining it. Border width, radius
   and padding are untouched, so the button does not resize. Kept at the same
   specificity as .button--ghost:hover, which is declared later in this file,
   so hovering the current page still gives the usual hover feedback. */
.button--ghost[aria-current="page"] {
  background-color: hsla(0, 0%, 100%, 0.16);
  border-color: currentColor;
}

/* Temporary "new" marker on a navbar destination.
   The label and the badge are separate spans on purpose: changeLanguage()
   assigns textContent, so a badge nested in an element that itself carries
   data-i18n would be erased on the first language switch.

   The badge is inside the link rather than beside it, so it adds no second tab
   stop and no second hit target - a pointer landing on it still follows the
   link. inline-flex with a gap lays the two out in reading order, which makes
   it follow RTL without a mirrored rule. */
.nav__link--new {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* A light pill carrying deep brand orange, rather than orange-on-orange: the
   navbar is itself orange, so a tinted badge sat at 1.06:1 against it and read
   as loose text instead of a chip, and its white label was 3.56:1 - under the
   4.5:1 this size needs. */
.nav__badge {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: 999px;
  background-color: hsl(0, 0%, 100%);
  color: hsl(14, 88%, 32%);
  font-size: 0.68em;
  font-weight: var(--font-black);
  line-height: 1.5;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: middle;
  pointer-events: none;
}
/* HOME */
/* Hero Slider Layout */
/* --- HERO SECTION FIXES --- */
.home {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
}

/* --- SWIPER SPECIFIC FIXES --- */
.home-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
}

.swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}


.hero-slide {
    width: 100% !important;
    height: 100%;
}

/* --- BACKGROUND IMAGE --- */
.hero__bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    
}

/* --- CONTENT CONTAINER FIX --- */
.home__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0; /* Remove any padding that might cause spacing */
}

/* Remove the container class constraints */
.home__data {
    width: 100%;
    max-width: 1600px; /* Keep max width for content */
    padding: 2rem;
    height: 100%;
    max-height: 100%;
    padding-bottom: 10rem;
    padding-top: 10rem;
    margin-left: auto;
      margin-right: 0;
      margin-top: 10rem;
      margin-bottom: 10rem;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.2);
    /* backdrop-filter: blur(2px); */
    border-radius: 20px;
    color: #fff;
    z-index: 10;
    position: relative;
    box-sizing: border-box; /* Ensure padding is included in width calculation */
}


/* Remove any container styles that might be causing issues */
.home__data.container {
    max-width: 1200px;
    margin: 0 auto;
    /* Remove any width: 100% that might be in .container class */
    padding-left: 0;
    padding-right: 0;
}

/* --- REVEAL GRID FIX --- */
#reveal-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--cols), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
    pointer-events: none;
    z-index: 20;
    gap: 0;
}


/* Make sure your container class doesn't have problematic styles */
.container {
    max-width: 1200px; /* This is fine */
    margin-left: auto; /* These margins are fine */
    margin-right: auto; /* These margins are fine */
    padding-left: 1rem; /* Check if this padding is causing issues */
    padding-right: 1rem; /* Check if this padding is causing issues */
}

/* For hero section specifically, you might want to override container padding */
.home .container {
    padding-left: 0;
    padding-right: 0;
}
/* Hero section styles cleaned up */

/* --- SWIPER PAGINATION FIX --- */
.swiper-pagination {
    bottom: 20px !important;
    z-index: 20;
}

/* Staggered Grid Reveal Animation */
.tile {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    box-sizing: border-box;
    opacity: 1;
    transform: scale(1);
}

/* Smooth "Reveal" Animation - tiles fade out progressively */
.tile.animate {
    animation: fadeOutTile 0.6s forwards cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes fadeOutTile {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

@keyframes professionalReveal {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02); /* Subtle expansion for a "dissolve" feel */
    visibility: hidden;
  }
}

/* Swiper Pagination Styling (Modern & Subtle) */
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--title-color);
  opacity: 0.3;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  width: 30px; /* Stretched pill shape for the active slide */
  border-radius: 5px;
  transition: width 0.3s ease;
}



/* Ensure content stays readable */
.home__data {
    z-index: 5;
    background: rgba(0, 0, 0, 0.2); /* Optional: subtle overlay for text legibility */
    padding: 2rem;
    border-radius: 1rem;
    color: white;
}
/* Wider container only for the home section */
.home.container {
  max-width: 1400px; /* try 1600px if you want more width */
}


/* Content column (text) - 16-column grid layout */
.home__data {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr;
  gap: 2rem;
  text-align: left;
  color: var(--title-color);
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: auto 1fr;

  text-align: left;
  padding: 8rem 2rem 4rem; /* Top padding to clear header, bottom for spacing */
  width: 100%;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

.text-top-left {
  grid-column: 1 / 9; /* Span columns 1 to 8 (wider for 16-column grid) */
  max-width: none; /* Remove max-width since grid handles width */
}

.text-bottom-left {
  grid-column: 1 / 8; /* Span columns 1 to 7 (wider for 16-column grid) */
  max-width: none; /* Remove max-width since grid handles width */
}

.hover-button {
  transition: transform 0.3s ease, color 0.3s ease;
}

.hover-button:hover {
  transform: translateX(10px);
  color: var(--first-color); /* Optional: change color on hover */
}

.hover-button .button__icon {
    transition: transform 0.3s ease;
}

.hover-button:hover .button__icon {
    transform: translateX(5px);
}

/* small visual indicator */
.home__indicator {
  width: 8px;
  height: 8px;
  background-color: var(--title-color);
  border-radius: 50%;
  position: absolute;
  top: 2rem;
  right: 1.5rem;
}
.home__indicator::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 48px;
  background-color: var(--title-color);
  top: -3rem;
  right: 45%;
}

/* Titles and text: use responsive/clamped sizes so they look good on small screens */
.home__subtitle,
.pumpkin__subtitle {
  font-size: clamp(0.65rem, 2.2vw, 0.9rem);
  color: var(--sub);
  text-transform: uppercase;
  margin-bottom: var(--mb-1);
}

.home__title {
  font-size: clamp(2rem, 6vw, 4rem); /* Much bigger text */
  font-weight: var(--font-black);
  line-height: 1.05;
  margin-bottom: var(--mb-0-75);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

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

.home__description {
  font-size: clamp(0.8rem, 2.6vw, 1rem);
  color: var(--text-color-light);
  margin-bottom: var(--mb-1);
}

/* Buttons row */
.home__buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* .home__img {
  width: 100%;
  max-width: 650px;
  height: auto;
  object-fit: contain;
} */
/* Details area on the right (small decorative image/text) */
.home__details-img {
  position: absolute;
  right: 0.5rem;
}

.home__details-title,
.home__details-subtitle {
  display: block;
  font-size: var(--small-font-size);
  text-align: right;
}

/* 📱 Mobile adjustments: Force Stacking (Image on top, Text below) */
@media (max-width: 576px) {
  .home__content.grid {
    /* *** التعديل الرئيسي: إجبار المحتوى على التراص في عمود واحد *** */
    grid-template-columns: 1fr;
    gap: 1.5rem; /* زيادة المسافة بين الصورة والنص */
    align-items: center; /* تمركز كل المحتوى (الصورة والنص) أفقياً */
  }

  .home__img {
    max-width: 95%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    margin: 0 auto; /* تمركز الصورة أفقياً */
    border-radius: 0.4rem;
  }

  .home__data {
    /* تمركز كتلة النص بالكامل لزيادة القراءة */
    padding: 0 1.5rem;
    text-align: center;
    align-items: center; /* تمركز العناصر الداخلية (العناوين والأزرار) */
    /* For mobile, stack grid items vertically */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
  }

  .text-top-left {
    grid-column: 1; /* Full width on mobile */
  }

  .text-bottom-left {
    grid-column: 1; /* Full width on mobile */
  }

  .home__title {
    font-size: 1.5rem; /* زيادة حجم الخط ليكون أوضح */
  }

  .home__description {
    font-size: 0.9rem;
  }

  .home__buttons {
    /* تمركز مجموعة الأزرار */
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* Very small devices: The settings here are already correct for stacking and centering, but you might want to adjust sizes. */
@media (max-width: 360px) {
  .home__content.grid {
    grid-template-columns: 1fr;
    gap: 1rem; /* تقليل المسافة مجدداً إذا كانت الشاشة ضيقة جداً */
  }
  .home__img {
    max-height: 50vh;
  }
  .home__data {
    padding-top: 0.75rem;
    text-align: center;
    align-items: center;
  }
  .home__details-img {
    display: none;
  }
}
/* Swiper Class */
.swiper-pagination {
  position: initial;
  margin-top: var(--mb-1);
}
.swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background-color: var(--title-color);
  opacity: 1;
}
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 0.5rem;
}
.swiper-pagination-bullet-active {
  width: 1.5rem;
  height: 5px;
  border-radius: 0.5rem;
}
/* BUTTONS */
.button {
  display: inline-block;
  background-color: var(--first-color);
  color: var(--sub);
  padding: 1rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
  transition: 0.3s;
}
.button:hover {
  background-color: var(--first-color-alt);
}

.button__icon {
  font-size: 1.25rem;
}
.book--now {
  display: inline-block;
  transition: 0.3s;
}
.book--now:hover {
  transform: scale(1.2);
}
.button--ghost {
  border: 2px solid;
  background-color: transparent;
  border-radius: 3rem;
  padding: 0.75rem 1.5rem;
  text-align: center;
}
.button--ghost:hover {
  background: none;
}
.button--link {
  color: var(--title-color);
}
.button--flex {
  display: inline-flex;
  align-items: center;
  column-gap: 0.5rem;
}
/* info */
/* Styles for the little-info section and the card */

/* .little-info {
    padding: 4rem 0;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.75rem;
    justify-items: center;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(70, 1, 67, 0.08) 100%);
    position: relative;
  } */
 
.little-info {
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 3vw, 2.5rem);
    width: 100%;
    max-width: none; /* remove cap */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); /* wider cards */
    gap: 1.25rem; /* same loose gap feel as initiatives */
    justify-items: stretch;
    text-align: center;
    background: transparent;
    position: relative;
  }

.info-card {
    background: linear-gradient(145deg, #0dff00 0%, #f4761c 45%, #cc4a07 100%);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    width: 100%;
    /* max-width: none;  */
    max-width:1200px;
    margin: 0 auto;
    transition: all 0.3s ease;
    border: 1px solid rgba(229, 90, 21, 0.32); /* warm accent that matches brand orange */
  
}

.info-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(120, 10, 136, 0.15);
}

.info-icon {
    font-size: 3rem;
    color: rgb(206, 180, 180); /* Uses your primary color */
    margin-bottom: 0.75rem;
    display: inline-flex;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: var(--body-color); /* Background for the icon */
}

.info-title {
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: var(--mb-0-5);
}

.info-description {
    font-size: var(--normal-font-size);
    color: white;
    margin-bottom: var(--mb-1);
}

.card-link {
    display: inline-flex;
    align-items: center;
    column-gap: 0.25rem;
    color: rgb(200, 180, 200);
    font-weight: var(--font-medium);
    transition: color 0.3s;
}

.card-link:hover {
    color: var(--accent-purple-light);
}
@media screen and (max-width: 768px) {
    .little-info {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2rem 0;
    }
    .info-card {
        max-width: 90%;
        padding: 1.5rem 1rem;
    }
    .info-icon {
        font-size: 2rem;
    }
    .info-title {
        font-size: 1.2rem;
    }
    .info-description {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 360px) {
    .info-card {
        /* On very narrow screens, reduce padding to save space */
        padding: 1.5rem 1rem;
    }
}



/* CATEGORY */
.section.category {
  background: linear-gradient(180deg, rgba(70, 1, 67, 0.08) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(70, 1, 67, 0.08) 100%);
  position: relative;
}

.category__container {
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1rem;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 3.75rem;
  row-gap: 3.75rem;
  margin-top: 5rem;
  margin-bottom: 5rem;

}

.category__data {
  /* background: var(--container-color); */
  padding: 3rem 2rem;
  border-radius: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  max-width: 400px;
  margin: 0 auto;
  color: var(--text-color);
}


.category__icon {
    font-size: 3rem;
    color: rgb(206, 180, 180);
    margin-bottom: 0.75rem;
    display: inline-flex;
    padding: 0.5rem;
    border-radius: 50%;
    background-color: var(--body-color);
}



.category__data:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(210, 0, 168, 0.045);
}

/* الكرت */
.category__data {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1rem;
  height: 100%;
  margin: 0 auto
  
}

/* دائرة الأيقونة */
.category__icon.circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 1rem;
  overflow: hidden;
}

/* الـ GIF */
.category__img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;

  /* تصحيح ميلان الـ GIF */
  transform: translateX(1px);
}


/* العناوين */
.category__title {
  font-size: var(--h3-font-size);
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  margin-bottom: var(--mb-0-5);
}

.category__description {
  font-size: var(--normal-font-size);
  color: white;
}
 






/* ABOUT */
.about__container {
  display: grid;
  grid-template-columns: 1fr;
}
/* Make the about section container wider so the image can grow */
.about .container {
  max-width: 1200px;
  
}
.about__title {
  margin-bottom: var(--mb-1-5);
  text-align: center;
}
@media screen and (min-width: 768px) {
  .about__container {
    grid-template-columns: 1fr 1.8fr; /* image column wider */
    align-items: center;
  }
}

.about__data {
  text-align: center;
}
.about__description {
  margin-bottom: var(--mb-2);
}
.about__img {
  display: block;
  width: 100%;
  height: auto;

  max-width: 1800px;
  max-height: clamp(600px, 100vh, 1800px);
  object-fit: contain;
  margin: 30px auto;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
  border-radius: 20px;
  transform: scale(1.1);
}

/* Layout: image left, text right (two columns). */

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

.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  position: relative;
  overflow: hidden;
  padding-bottom: 40%;


}

.holographic-card {
  width: 200px;
  height: 50px;
 background: linear-gradient(45deg, rgb(49, 16, 66), rgb(213, 96, 24));
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
}

.holographic-card h2 {
  color: rgba(255, 255, 255, 0.729);
  font-size: 2rem;
  position: relative;
  z-index: 2;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(200, 24, 188, 0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(142, 0, 0, 0.5);
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}
/* TRICK OR TREAT */

.trick__container {
  grid-template-columns: repeat(2, 1fr);
  
  gap: 1.5rem;
  padding-top: 1rem;
}
.trick__content {
  position: relative;
  background: var(--container-color);
  border-radius: 1rem;
  padding: 1.5rem 0 1rem 0;
  text-align: center;
  overflow: hidden;
}
.trick__img {
  width: 90px;
  transition: 0.3s;
}
.trick__subtitle,
.trick__price {
  display: block;
}
.trick__subtitle {
  font-size: var(--smaller-font-size);
  margin-bottom: var(--mb-0-5);
}
.trick__title,
.trick__price {
  color: var(--title-color);
  font-weight: var(--font-medium);
  font-size: var(--normal-font-size);
}
.trick__button {
  display: inline-flex;
  padding: 0.5rem;
  border-radius: 0.25rem 0.25rem 0.75rem 0.25rem;
  position: absolute;
  right: -3rem;
  bottom: 0;
}
.trick__icon {
  font-size: 1.25rem;
  color: var(--title-color);
}
.trick__content:hover .trick__img {
  transform: translateY(-0.5rem);
}
.trick__content:hover .trick__button {
  right: 0;
}
/* DISCOUNT */
.discount__container {
  background: var(--container-color);
  border-radius: 1rem;
  padding: 2.5rem 0 1.5rem;
  row-gap: 0.75rem;
}
.discount__data {
  text-align: center;
}
.discount__title {
  font-size: 1.5rem;
  margin-bottom: var(--mb-2);
}
.discount__img {
  width: 200px;
  justify-self: center;
}
/* TEAM SECTION */
.section.new {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(70, 1, 67, 0.06) 100%);
  position: relative;
}

.team__container {
  padding: 4rem 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.75rem;
  justify-items: stretch;
  align-items: start;
}

.team__card {
  position: relative;
  background: var(--container-color);
  width: 100%;
  max-width: 340px;
  min-height: 480px;
  height: auto;
  padding: 2.5rem 2rem;
  border-radius: 1.5rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  margin: 0 auto;
}

.team__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--first-color), var(--first-color-alt));
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.team__img-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.team__img {
  width: 220px;
  height: 220px;
  border-radius: 1rem;
  object-fit: cover;
  border: 3px solid rgba(120, 10, 136, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.team__title {
  font-size: var(--h3-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: 0.5rem;
  color: var(--title-color);
}

.team__subtitle {
  display: block;
  font-size: var(--normal-font-size);
  color: rgb(85, 2, 108);
  font-weight: var(--font-medium);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.team__bio {
  font-size: var(--small-font-size);
  color: var(--text-color-light);
  line-height: 1.6;
  margin: 0;
  max-height: none;
  overflow: visible;
  transition: none;
}

/* Hover Effect - Card Style */
.team__card {
  cursor: pointer;
}

.team__card:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(120, 10, 136, 0.15);
  border-color: rgba(120, 10, 136, 0.2);
}

.team__card:hover .team__img {
  border-color: rgba(120, 10, 136, 0.6);
  box-shadow: 0 12px 32px rgba(120, 10, 136, 0.3);
}

.team__card:hover::before {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-purple-light));
}

/* Bio is always visible */
.team__card:hover .team__bio {
  max-height: none;
}

/* BREAKPOINTS: Making it look good on all screens */

/* Mobile: 1 per row */
@media screen and (max-width: 575px) {
  .team__container {
    padding: 3rem 1rem;
  }

  .team__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .team__card {
    max-width: 100%;
    padding: 1.5rem;
    min-height: 400px;
  }

  .team__img {
    width: 180px;
    height: 180px;
  }
}

/* Tablet: 2 per row */
@media screen and (min-width: 576px) and (max-width: 967px) {
  .team__container {
    padding: 3.5rem 2rem;
  }

  .team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .team__card {
    max-width: 100%;
    min-height: 420px;
  }
}

/* Desktop: 4 per row */
@media screen and (min-width: 968px) {
  .team__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .team__card {
    max-width: 300px;
  }
}
/* NEWSLETTER */
.newsletter__description {
  text-align: center;
  margin-bottom: var(--mb-1-5);
}
.newsletter__form {
  background: var(--container-color);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  border-radius: 0.75rem;
}
.newsletter__input {
  width: 70%;
  padding: 0 0.5rem;
  background: none;
  color: var(--title-color);
}
.newsletter__input::placeholder {
  color: var(--text-color);
}
/* FOOTER */
.footer {
  position: relative;
  overflow: hidden;
}
.footer__img-one,
.footer__img-two {
  position: absolute;
  transition: 0.3s;
}
.footer__img-one {
  width: 100px;
  top: 6rem;
  right: -2rem;
}
.footer__img-two {
  width: 150px;
  bottom: 4rem;
  right: 4rem;
}
.footer__img-one:hover,
.footer__img-two:hover {
  transform: translateY(-0.5rem);
}
.footer__container {
  row-gap: 2rem;
}
.footer__logo {
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-medium);
  color: var(--title-color);
}
.footer__logo-img {
  width: 20px;
}
.footer__description {
  margin-bottom: var(--mb-2-5);
}
.footer__social {
  display: flex;
  column-gap: 0.75rem;
}
.footer__social-link {
  display: inline-flex;
  background: var(--container-color);
  padding: 0.25rem;
  border-radius: 0.25rem;
  color: var(--title-color);
  font-size: 1rem;
}
.footer__social-link:hover {
  background: var(--body-color);
}
.footer__title {
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-1);
}
.footer__links {
  display: grid;
  row-gap: 0.35rem;
}
.footer__link {
  font-size: var(--small-font-size);
  color: var(--text-color);
  transition: 0.3s;
}
.footer__link:hover {
  color: var(--title-color);
}
.footer__copy {
  display: block;
  text-align: center;
  font-size: var(--smaller-font-size);
  margin-top: 4.5rem;
}
/* SCROLL UP */
.scrollup {
  position: fixed;
  background: var(--container-color);
  right: 1rem;
  bottom: -20%;
  display: inline-flex;
  padding: 0.3rem;
  border-radius: 0.25rem;
  z-index: var(--z-tooltip);
  opacity: 0.8;
  transition: 0.4s;
}
.scrollup__icon {
  font-size: 1.25rem;
  color: var(--title-color);
}
.scrollup:hover {
  background: var(--container-color);
  opacity: 1;
}
/* Show Scroll Up*/
.show-scroll {
  bottom: 3rem;
}
/* SCROLL BAR */
::-webkit-scrollbar {
  width: 0.6rem;
  background: #413e3e;
}
::-webkit-scrollbar-thumb {
  background: #272525;
  border-radius: 0.5rem;
}
/*  BREAKPOINTS */
/* For small devices */
@media screen and (max-width: 320px) {
  .container {
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  .home__img {
    height: auto;
    max-height: 50vh;
  }
  .home__buttons {
    flex-direction: column;
    width: max-content;
    row-gap: 1rem;
  }
  .category__container,
  .trick__container {
    grid-template-columns: 0.8fr;
    justify-content: center;
  }
}
/* For medium devices */
@media screen and (min-width: 576px) {
  .about__container {
    grid-template-columns: 0.8fr;
    justify-content: center;
  }
  .newsletter__container {
    display: grid;
    grid-template-columns: 0.7fr;
    justify-content: center;
  }
  .newsletter__description {
    padding: 0 3rem;
  }
}
@media screen and (min-width: 767px) {
  body {
    margin: 0;
  }

  .section {
    padding: 7rem 0 2rem;
  }
  .nav {
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav__img,
  .nav__close,
  .nav__toggle {
    display: none;
  }
  .nav__list {
    flex-direction: row;
    column-gap: 3rem;
  }
  .nav__link {
    text-transform: initial;
    font-weight: initial;
  }
  .home__content {
    padding: 8rem 0 2rem;
    /* Give more width to image column than text */
    grid-template-columns: 2fr 1fr; /* was repeat(2, 1fr) */
    gap: 3rem;
    align-items: center;
  }

  .home__img {
    height: auto;
    max-height: clamp(480px, 65vh, 1000px); /* was clamp(320px, 55vh, 700px) */
    object-fit: contain;
  }
  .swiper-pagination {
    margin-top: var(--mb-2);
  }

  .category__container {
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
  }

  .about__container {
    grid-template-columns: 1fr 1.8fr;
    align-items: center;
  }
  .about__title,
  .about__data {
    text-align: initial;
  }
  .about__img {
    width: 100%;
    max-width: 1600px;
  }
  .trick__container {
    grid-template-columns: repeat(3, 200px);
    justify-content: center;
    gap: 2rem;
  }
  .discount__container {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-items: center;
    column-gap: 3rem;
    padding: 3rem 0;
    border-radius: 3rem;
  }
  .discount__img {
    width: 350px;
    order: -1;
  }
  .discount__data {
    padding-right: 6rem;
  }
  .newsletter__container {
    grid-template-columns: 0.5fr;
  }
  .footer__container {
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    column-gap: 1rem;
  }
  .footer__img-two {
    right: initial;
    bottom: 0;
    left: 15%;
  }
}
/* For large devices */
@media screen and (min-width: 992px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  .section__title {
    font-size: var(--h1-font-size);
    margin-bottom: 3rem;
  }
  .home__content {
    padding-top: 9rem;
    gap: 3rem;
  }
   .home__group {
    padding-top: 0;
  }

  .home__img {
    width: min(100%, 1400px);                /* was 1100px */
    height: auto;
    max-height: clamp(560px, 70vh, 1200px);  /* was clamp(420px, 65vh, 820px) */
    object-fit: contain;
    margin: 0 auto;
    transform: none;
  }

  .home__indicator {
    top: initial;
    right: initial;
    bottom: 15%;
    left: 45%;
  }
  .home__indicator::after {
    top: 0;
    height: 75px;
  }
  .home__details-img {
    bottom: 0;
    right: 58%;
  }
  .home__title {
    margin-bottom: var(--mb-1-5);
  }
  .home__description {
    margin-bottom: var(--mb-2-5);
    padding-right: 2rem;
  }
  .category__container {
    column-gap: 8rem;
  }
  .category__img {
    width: 200px;
  }
  .about__container {
    column-gap: 3rem;
  }
  .about__img {
    width: 100%;
    max-width: 1600px;
  }
  .about__description {
    padding-right: 2rem;
  }
  .trick__container {
    gap: 3.5rem;
  }
  .trick__content {
    border-radius: 1.5rem;
  }
  .trick__img {
    width: 110px;
  }
  .trick__title {
    font-size: var(--h3-font-size);
  }
  .discount__container {
    column-gap: 7rem;
  }
  .new__content {
    width: 310px;
    border-radius: 1rem;
    padding: 2rem 0;
  }
  .new__img {
    width: 150px;
  }
  .new__img,
  .new__subtitle {
    margin-bottom: var(--mb-1);
  }
  .new__title {
    font-size: var(--h3-font-size);
  }
  .footer__copy {
    margin-top: 6rem;
  }
}
@media screen and (min-width: 1200px) {
   .home__img {
    height: auto;
    max-height: clamp(640px, 75vh, 1400px); /* was clamp(480px, 70vh, 900px) */
  }
  .swiper-pagination {
    margin-top: var(--mb-2-5);
  }
  .footer__img-one {
    width: 120px;
  }
  .footer__img-two {
    width: 180px;
    top: 30%;
    left: -3%;
  }
}
/* Enhanced Visual Styles */
.achievements__card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.achievements__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.kpi {
  transition: transform 0.3s ease;
}

.kpi:hover {
  transform: scale(1.05);
}

.about__item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.about__item i {
  font-size: 1.5rem;
  color: var(--sub);
  margin-top: 0.25rem;
}

.about__item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.cta__btn {
  transition: all 0.3s ease;
}

.cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.new__content {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.new__content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.button {
  transition: all 0.3s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* KEYFRAMES */
@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}
.skull-blur {
  position: absolute;
  width: 680px;
  height: 632px;
  left: -79px;
  top: 75%;
  background: linear-gradient(
    142.97deg,
    rgba(0, 255, 133, 0.3) 17.43%,
    rgba(63, 239, 60, 0.22) 73.23%
  );
  filter: blur(20px);
}

/* COLLABORATIONS SECTION STYLES */
.logo-slider {
    overflow: hidden;
    padding: 60px 0;
    position: relative;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0;
    
    margin-top: 2rem;
    box-shadow: 0 4px 20px rgba(206, 109, 12, 0.221);
}

.logo-slider::before,
.logo-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}

.logo-slider::before {
    left: 0;
}

.logo-slider::after {
    right: 0;
  }

.logo-track {
    display: flex;
    width: calc(240px * 20); /* 10 logos * 2 for seamless loop */
    animation: scroll 50s linear infinite;
}

.logo-item {
    flex: 0 0 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

 .logo-track img {
     height: 140px;
     width: 140px;
    
    object-fit: contain;
     /* filter: grayscale(100%); */
     transition: transform 0.3s ease;
     opacity: 1;
    background: white;
     border-radius: 50%;
    padding: 20px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
 }
 
 .logo-track img:hover {
     transform: scale(1.15);
 }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-240px * 10)); } /* 10 logos */
}

[lang="ar"] .logo-track {
    animation: scroll-rtl 50s linear infinite;
}

@keyframes scroll-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(240px * 13)); } /* 13 logos for RTL */
}

/* STOP RUMOR PAGE RESPONSIVE STYLES */
@media (max-width: 768px) {
    .stop-rumor-container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 2rem 1.5rem !important;
        margin: 0 1rem !important;
    }
    
    .stop-rumor-image {
        order: -1;
    }
    
    .stop-rumor-image img {
        max-width: 200px !important;
    }
    
    .report-options {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .option-card {
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .stop-rumor-container {
        padding: 1.5rem 1rem !important;
        margin: 0 0.5rem !important;
        border-radius: 1rem !important;
    }
    
    .stop-rumor-image img {
        max-width: 150px !important;
    }
    
    .option-card {
        padding: 1rem !important;
    }
}

/* CONFERENCE PAGE CREATIVE STYLES */
.conference-hero {
    animation: fadeInUp 1s ease-out;
}

.stat-card {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }

.speaker-card {
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.speaker-card:nth-child(1) { animation-delay: 0.1s; }
.speaker-card:nth-child(2) { animation-delay: 0.3s; }
.speaker-card:nth-child(3) { animation-delay: 0.5s; }

.agenda-day {
    animation: slideInLeft 0.8s ease-out;
}

.agenda-item {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.agenda-item:hover {
    border-left-color: var(--first-color);
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(46, 139, 87, 0.1);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive adjustments for conference page */
@media (max-width: 768px) {
    .conference-hero {
        padding: 0 1rem;
    }
    
    .stat-card {
        padding: 1.5rem 1rem !important;
    }
    
    .speaker-card {
        padding: 1.5rem 1rem !important;
    }
    
    .agenda-item {
        grid-template-columns: 80px 1fr !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
    }
    
    #register .container > div {
        padding: 2rem 1.5rem !important;
        margin: 0 1rem !important;
    }
}

/* REPORT ADMIN PANEL STYLES */
.report-card {
    transition: all 0.3s ease;
    animation: fadeInUp 0.5s ease-out;
}

.report-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

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

/* Responsive adjustments for report admin panel */
@media (max-width: 768px) {
    .report-card {
        padding: 1rem !important;
    }
    
    .report-card > div:first-child {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    .report-card > div:first-child > div:last-child {
        align-self: stretch !important;
        display: flex !important;
        justify-content: space-between !important;
    }
}

/* TEAM PAGE CREATIVE STYLES */

/* Team Grid Layout for Static Team Members */
.team-static-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
    max-width: 350px;
    margin-left: auto;
    margin-right: 5vw;
    justify-items: center;
}

/* Team Card Styling */
.team-static-card {
    background: var(--container-color);
    padding: 2rem;
    border-radius: 1.5rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 350px;
}

.team-static-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(46, 139, 87, 0.15);
}

.team-static-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--first-color);
}

.team-static-card h3 {
    color: var(--first-color);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.team-static-card .title {
    color: var(--text-color-light);
    margin-bottom: 1rem;
    font-weight: 600;
}

.team-static-card .description {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 0.9rem;
}

.team-static-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--first-color), var(--first-color-alt));
}

/* Responsive adjustments for team grid */
@media (max-width: 768px) {
    .team-static-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        gap: 1.5rem;
    }
    
    .team-static-card {
        max-width: 100%;
        padding: 1.5rem;
    }
    
    .team-static-card img {
        width: 100px;
        height: 100px;
    }
    
    .team-static-card h3 {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .team-static-grid {
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .team-static-card {
        padding: 1rem;
    }
    
    .team-static-card img {
        width: 80px;
        height: 80px;
    }
}
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.team-hero {
    animation: fadeInUp 1s ease-out;
}

.team-stat {
    animation: fadeInUp 0.6s ease-out;
    animation-fill-mode: both;
}

.team-stat:nth-child(1) { animation-delay: 0.1s; }
.team-stat:nth-child(2) { animation-delay: 0.2s; }
.team-stat:nth-child(3) { animation-delay: 0.3s; }
.team-stat:nth-child(4) { animation-delay: 0.4s; }

.value-card {
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

.value-card:nth-child(1) { animation-delay: 0.1s; }
.value-card:nth-child(2) { animation-delay: 0.3s; }
.value-card:nth-child(3) { animation-delay: 0.5s; }

/* Team card hover effects */
.team__card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.team__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: none;
    transition: none;
}

.team__card:hover::before {
    left: -100%;
}

/* Responsive adjustments for team page */
@media (max-width: 768px) {
    .team-stat {
        padding: 1.5rem 1rem !important;
    }
    
    .value-card {
        padding: 1.5rem 1rem !important;
    }
    
    .team__card {
        padding: 1.5rem 1rem !important;
    }
}

/* Enhanced button hover effects */
.button {
    position: relative;
    overflow: hidden;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.button:hover::before {
    left: 100%;
}

/* RTL Mode Overrides */
.rtl-mode .home__data {
    text-align: right;
}

.rtl-mode .button__icon {
    transform: rotate(180deg);
}

/* Improve Arabic typography */
.rtl-mode body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Fix text wrapping issues in RTL for the home slider */
@media screen and (min-width: 992px) {
    .rtl-mode .home__content.grid {
        /* Optimize grid for Arabic text density */
        grid-template-columns: 1.5fr 1fr; /* Give text more space (was 5fr 2fr) */
    }
    
    .rtl-mode .home__img {
        /* Ensure image fits well */
        max-width: 100%;
    }
}

/* JOIN US SECTION */
.join__container {
  grid-template-columns: 1fr;
  gap: 2rem;
  background-color: var(--container-color);
  padding: 3rem 2rem;
  border-radius: 1rem;
  text-align: center;
}

.join__data {
  max-width: 600px;
  margin: 0 auto;
}

.join__title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-1-5);
  color: var(--title-color);
}

.join__description {
  margin-bottom: var(--mb-2-5);
  color: var(--text-color-light);
  line-height: 1.7;
}

.join__image img {
  width: 100%;
  max-width: 400px;
  border-radius: 1rem;
  margin: 0 auto;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

@media screen and (min-width: 768px) {
  .join__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    text-align: left;
    gap: 3rem;
  }
  .join__data {
    margin: 0;
  }
  .join__image {
    order: -1;
  }
}

/* SPEAKERS SECTION */
.speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.speaker-card {
    background: var(--container-color);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
}

/* VOLUNTEER SECTION */
.section.volunteer {
  background: linear-gradient(180deg, rgba(70, 1, 67, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
  position: relative;
}

.volunteer-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 3.5rem;
  
  /* Creative - Glassmorphism Effect */
  background: hsla(0, 0%, 15%, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* For Safari */
  border: 1px solid hsla(0, 0%, 100%, 0.2);
  padding: 4rem 3.25rem;
  border-radius: 2rem; /* Slightly larger radius */
  box-shadow: 0 8px 20px hsla(0, 0%, 0%, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.volunteer-container:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 16px 40px hsla(0, 0%, 0%, 0.3), 0 8px 16px rgba(120, 10, 136, 0.15);
}

.volunteer-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.volunteer-title {
  font-size: clamp(2.35rem, 3vw, 3.1rem);
  margin-bottom: 0.25rem;
  letter-spacing: -0.03em;
}

.volunteer-description {
  color: var(--text-color-light);
  margin-bottom: 0.5rem;
  line-height: 1.7;
  font-size: 1.05rem;
  max-width: 42rem;
}

.volunteer-image img {
  border-radius: 1rem;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@media screen and (max-width: 767px) {
  .volunteer-container {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2.5rem 1.5rem;
  }
  .volunteer-content {
    text-align: center;
  }
  .volunteer-image {
    order: -1;
    margin-bottom: var(--mb-2);
  }
}

 

.speaker-card:hover {
    transform: translateY(-10px);
}

.speaker-card__image-container {
    width: 120px;
    height: 120px;
    border: 3px solid var(--first-color);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speaker-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.speaker-card:hover .speaker-card__image {
    filter: grayscale(0%);
}

.speaker-card__name {
    color: var(--first-color);
    margin-bottom: 0.5rem;
}

.speaker-card__role {
    color: var(--text-color-light);
    margin-bottom: 1rem;
}

.speaker-card__bio {
    color: var(--text-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ====================
   NEW HERO SECTION
   ==================== */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: var(--header-height); /* Account for fixed header */
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* filter: brightness(0.6); */
}

.hero__grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    z-index: 10;
    pointer-events: none;
}

.hero__tile {
    background-color: #1a1a1a; /* Dark background for initial state */
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease;
}

.hero__content {
    position: relative;
    z-index: 20;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
    max-width: 800px;
    padding: 0 1rem;
}

.hero__content.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero__title {
    font-size: 3.5rem; /* Larger title */
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
    font-weight: 700;
}

.hero__cta {
    display: inline-block;
    background-color: var(--first-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.hero__cta:hover {
    background-color: var(--first-color-alt);
}

@media screen and (max-width: 768px) {
    .hero__title {
        font-size: 2.2rem;
    }
    .hero__cta {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ====================
   NEW SECTIONS
   ==================== */
/* Programs/Services Preview */
.programs-preview {
    background-color: var(--container-color-alt);
    padding: 5rem 0;
}
.programs__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.program__card {
    background: #fff;
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.05);
}
.program__card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.program__gif {
    width: 80px;
    height: 80px;
    margin-bottom: 1.5rem;
    object-fit: contain;
}
.program__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #333;
}
.program__desc {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    color: #666;
    line-height: 1.6;
}
.program__btn {
    margin-top: auto;
    color: var(--first-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    column-gap: 0.25rem;
    text-decoration: none;
}
.program__btn:hover {
    color: var(--first-color-alt);
}

/* Impact/Stats */
.impact {
    background: linear-gradient(135deg, var(--first-color) 0%, var(--first-color-alt) 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
}
.impact__container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
}
.impact__stat {
    flex: 1;
    min-width: 200px;
}
.impact__number {
    font-size: 3rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
}
.impact__label {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Events & News */
.events-news {
    background-color: var(--container-color-alt);
    padding: 5rem 0;
}
.events__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.event__card {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid rgba(0,0,0,0.05);
}
.event__card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.event__date {
    color: var(--first-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.event__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #333;
}
.event__desc {
    color: #666;
    line-height: 1.6;
}

/* Success Stories */
.success {
    background-color: #f9f9f9;
    padding: 5rem 0;
}
.success__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.success__card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    height: 300px;
}
.success__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.success__card:hover .success__img {
    transform: scale(1.05);
}
.success__data {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 2rem 1.5rem 1.5rem;
    color: white;
}
.success__title {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.success__desc {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
}

/* Partners Grid */
.partners {
    background-color: var(--container-color-alt);
    padding: 5rem 0;
}
.partners__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2rem;
    align-items: center;
    justify-items: center;
    padding: 2rem 0;
}
.partners__logo {
    max-width: 120px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s;
}

/* ====================
   IMAGE REVEAL ANIMATION
   ==================== */

.image-reveal-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.home__img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease;
}

.home__img.hidden {
    opacity: 0;
}

.image-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    z-index: 5;
    pointer-events: none;
}

.grid-tile {
    background-color: #1a1a1a;
    width: 100%;
    height: 100%;
}

.grid-tile.revealed {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.grid-tile.merged {
    opacity: 1;
    transform: scale(1);
    transition: all 1.5s ease;
}

/* Animation keyframes for premium feel */
@keyframes tileAppear {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    60% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tileMerge {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

/* Apply animations */
.grid-tile.revealed {
    animation: tileAppear 0.8s ease forwards;
}

.grid-tile.merged {
    animation: tileMerge 1.5s ease 0.3s forwards;
}

/* ====================
   GLASSMORPHISM EFFECTS
   ==================== */

/* Glassmorphism base class */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Enhanced glass effect for cards */
.glass-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Glass overlay for hero sections */
.glass-overlay {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ====================
   ENHANCED TYPOGRAPHY
   ==================== */

.section__title {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.home__title {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.home__description {
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

.team__title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.team__bio {
    line-height: 1.5;
    font-weight: 400;
}

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

/* Fade in animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply fade in to sections */
.section {
    animation: fadeInUp 0.8s ease-out;
}

/* Staggered animation for cards */
.info-card:nth-child(1) { animation-delay: 0.1s; }
.info-card:nth-child(2) { animation-delay: 0.2s; }
.info-card:nth-child(3) { animation-delay: 0.3s; }

.category__card_color:nth-child(1) { animation-delay: 0.1s; }
.category__card_color:nth-child(2) { animation-delay: 0.2s; }
.category__card_color:nth-child(3) { animation-delay: 0.3s; }

.team__card:nth-child(1) { animation-delay: 0.1s; }
.team__card:nth-child(2) { animation-delay: 0.2s; }
.team__card:nth-child(3) { animation-delay: 0.3s; }
.team__card:nth-child(4) { animation-delay: 0.4s; }

/* Parallax effect for hero background */
.hero__bg-img {
    transform: translateZ(0);
    will-change: transform;
}


/* ====================
   IMPROVED SHADOWS & BORDERS
   ==================== */

.info-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.category__card_color {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.team__card {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.volunteer-container {
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

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

@media (max-width: 768px) {
    .glass-card {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .section__title {
        font-size: 1.8rem;
    }

    .home__title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .glass {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .section__title {
        font-size: 1.5rem;
    }

    .home__title {
        font-size: 2rem;
    }
}

/* ====================
   HERO BLOCKS (Stacked)
   ==================== */
.hero-blocks {
    display: flex;
    flex-direction: column;
}

.hero-block {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-block__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease-out;
}

.hero-block:hover .hero-block__bg {
    transform: scale(1.05);
}

.hero-block__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
}

.hero-block__content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    padding: 2rem;
    display: flex;
    justify-content: center;
}

.hero-block__text {
    text-align: center;
    max-width: 800px;
    animation: fadeInUp 1s ease forwards;
}

.hero-block__number {
    display: inline-block;
    font-size: 6rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

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

.hero-block:not(:first-child) {
    margin-top: -1px;
}

.hero-block__text .home__title {
    font-size: 3.5rem;
    margin: 1rem 0;
    line-height: 1.2;
}

.hero-block__text .home__description {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-block__number {
        font-size: 4rem;
    }
    .hero-block__text .home__title {
        font-size: 2.5rem;
    }
    .hero-block__text .home__description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-block__number {
        font-size: 3rem;
    }
    .hero-block__text .home__title {
        font-size: 1.8rem;
    }
}

/* ====================
   REVEAL ANIMATIONS
   ==================== */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animations */
.info-card:nth-child(1) { transition-delay: 0.1s; }
.info-card:nth-child(2) { transition-delay: 0.2s; }
.info-card:nth-child(3) { transition-delay: 0.3s; }

.team__card:nth-child(1) { transition-delay: 0.1s; }
.team__card:nth-child(2) { transition-delay: 0.2s; }
.team__card:nth-child(3) { transition-delay: 0.3s; }
.team__card:nth-child(4) { transition-delay: 0.4s; }

.category__card_color:nth-child(1) { transition-delay: 0.1s; }
.category__card_color:nth-child(2) { transition-delay: 0.2s; }
.category__card_color:nth-child(3) { transition-delay: 0.3s; }



.sidebar-lede { margin: 0 0 0.65rem; line-height: 1.6; color: rgba(255,255,255,0.92); }
.sidebar-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.sidebar-list li { display: flex; gap: 0.55rem; align-items: flex-start; margin-bottom: 0.55rem; line-height: 1.45; color: rgba(255,255,255,0.9); }
.sidebar-list i { color: #ffe5c0; font-size: 1.05rem; margin-top: 0.15rem; }

.sidebar-timeline { border-top: 1px solid rgba(255,255,255,0.18); padding-top: 1rem; margin-top: 0.5rem; display: grid; gap: 0.8rem; }
.timeline-item { display: grid; grid-template-columns: 14px 1fr; gap: 0.65rem; align-items: start; }
.timeline-item .dot { width: 10px; height: 10px; border-radius: 50%; background: #ffe5c0; margin-top: 0.18rem; }
.timeline-title { font-weight: 700; color: #fff2dd; font-size: 0.95rem; }
.timeline-text { color: rgba(255,255,255,0.88); font-size: 0.9rem; line-height: 1.45; }

.sidebar-impact { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0.9rem; background: rgba(255,255,255,0.12); border-radius: 12px; margin-top: 1.2rem; }
.impact-badge { display: flex; gap: 0.45rem; align-items: center; font-weight: 700; color: #fff2dd; }
.impact-link { color: #ffe5c0; font-weight: 600; text-decoration: none; }
.impact-link:hover { text-decoration: underline; }


/* ====================
   CARD ENHANCEMENTS
   ==================== */
.info-card {
    background: linear-gradient(145deg, #0dff00 0%, #f4761c 45%, #cc4a07 100%);
    border: 1px solid rgba(229, 90, 21, 0.32);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.info-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 107, 53, 0.3);
}

.team__card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.team__card:hover {
    transform: none;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 107, 53, 0.3);
}

.team__img-container {
    border-radius: 0.75rem;
    overflow: hidden;
}

.category__card_color {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category__card_color:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 107, 53, 0.3);
}

/* ====================
   BUTTON ENHANCEMENTS
   ==================== */
.button {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.35);
}

.button--ghost {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
}

.button--ghost:hover {
    background: rgba(255, 107, 53, 0.2);
    border-color: #ff6b35;
}

/* ====================
   FOOTER ENHANCEMENTS
   ==================== */
.footer__container {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
}

/* ====================
   SCROLLBAR STYLING
   ==================== */

/* ---------------------------------------------------------------------------
   Keyboard focus visibility (accessibility)
   Applies only to keyboard navigation via :focus-visible, so pointer users see
   no change from the existing design.
   --------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect users who ask for reduced motion: animations still exist, they just
   resolve immediately instead of being removed. */
@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;
  }
}

/* ===========================================================================
   NAVIGATION SYSTEM
   Typography, the mobile dropdown and the current-page indicator.

   This block sits at the end of the file on purpose: the navbar is also styled
   by the older `min-width: 767px` and `max-width: 767px` blocks above, and
   these rules need to win at equal specificity without resorting to
   !important. Nothing here changes body typography or any non-nav element.

   Nav-specific breakpoint: the bar switches to the dropdown below 992px, not
   at the site-wide 767px. "Pledge & Make an Impact" is a long label, and eight
   destinations plus the language switcher cannot sit on one line on a tablet.
   =========================================================================== */

/* --- Typography -----------------------------------------------------------
   The navbar read as thin because the desktop block reset .nav__link to
   `font-weight: initial` (400). Weight now carries the hierarchy instead of
   the shouty uppercase the mobile menu used to apply.

   Latin and Arabic are treated separately and deliberately: Poppins is loaded
   at 600 and Tajawal at 700, so each script gets the weight that actually
   reads as confident in that script. Latin gets a touch of tracking; Arabic
   gets none, because letter-spacing breaks the cursive joins between Arabic
   letterforms. Both weights are already in the existing @import - no new font
   dependency is introduced. */
.nav__logo,
.nav__link,
.nav__list .button--ghost {
  /* Pinned rather than inherited: section, conference, stop-rumor, report and
     volunteer each set `body { font-family: 'Segoe UI', ... }` in a page-level
     <style>, so the navbar silently rendered in a different face on those five
     pages. Scoped to the nav, so page body typography is left exactly as-is. */
  font-family: var(--body-font);
}
[lang="ar"] .nav__logo,
[lang="ar"] .nav__link,
[lang="ar"] .nav__list .button--ghost {
  font-family: "Tajawal", sans-serif;
}
/* The switcher is injected as <button>, which does not inherit a font family
   from the document by default.

   Pinned to the Latin face rather than inherited, in both languages. "EN" and
   "AR" are Latin language codes in the markup and are never translated, so
   they are Latin glyphs in every state - but `inherit` handed them to the
   document face, which [lang="ar"] body swaps to Tajawal. Measured with canvas
   TextMetrics at the switcher's own 13.6px/600, on the same two labels:

                     cap ascent   ink width "AR"
     Poppins             10            18.7
     Tajawal              8            16.0

   So in Arabic the labels lost a fifth of their cap height and the pill
   narrowed from 102px to 98px - the switcher read as smaller and lighter than
   the same control in English. Tajawal also has no 600 weight in the @import
   (400/500/700), so the requested 600 was being approximated, which cost the
   labels a little more weight again.

   Pinning the Latin face gives both labels identical metrics in both language
   states and restores the pill to one size. Nothing about the Latin rendering
   changes: in English this rule resolves to exactly what `inherit` already
   produced. */
.nav .lang-btn {
  font-family: var(--body-font);
}

/* The label that is NOT selected was set to opacity .8. Both labels are the
   same face, size and weight - measured ink height 10px for "EN" and for "AR",
   ink mass 90 against 91.3 - so the one that read as smaller and weaker was
   simply the dimmed one, and in English that is always "AR".

   Full opacity gives the two labels the same optical presence in both states.
   Which language is selected is still shown by the filled chip behind it, so
   nothing about the active state, the colours or the pill is changed, and
   because only alpha changes there is no layout effect at all: the pill stays
   102x36 and the labels keep their own metrics.

   Weight was the alternative and is the wrong tool here: the project's Poppins
   @import carries 400/500/600/900, so a 700 request resolves to 900 and the
   inactive label ends up visibly heavier than the selected one. */
.nav .lang-btn:not(.active) {
  opacity: 1;
}

/* Even at equal size, weight, face and opacity, the unselected label still read
   as the thinner of the two. Measured from the rendered pixels at DPR 6, both
   labels have an ink height of 9.50px - they are genuinely the same size - but
   their contrast against their own backdrop is not:

       selected    white on the red chip        background luminance 104, contrast 142
       unselected  white on the translucent pill background luminance 131, contrast 118

   The pill was tinted rgba(255,255,255,.15), which over the orange navbar sits
   lighter than the chip behind the selected label. White letters on the lighter
   backdrop carry ~20% less contrast, and simultaneous contrast makes them read
   smaller and weaker even though they are not.

   Tinting the pill very slightly dark instead of very slightly light gives both
   labels a comparable backdrop: contrast difference falls from 23.5 to 2.7.
   Measured alternatives were worse, not better - a text-shadow on the
   unselected label blurs its edges (delta 43.9) and a darker ink colour on the
   light pill loses more contrast than it gains (delta 75.3). Only the backdrop
   is touched: size, weight, face, opacity, colour, radius, border, shadow, the
   selected chip and the 102x36 pill are all unchanged. */
.nav .lang-switch-wrapper {
  background: rgba(0, 0, 0, 0.06);
}

.nav__logo,
.nav__link {
  font-weight: 600;
  letter-spacing: 0.01em;
}
[lang="ar"] .nav__logo,
[lang="ar"] .nav__link {
  font-weight: 700;
  letter-spacing: 0; /* never letter-space Arabic: it severs the joins */
}
.nav__logo {
  font-size: 1.0625rem;
}
.nav__link {
  transition: color 0.25s ease, background-color 0.25s ease;
}

/* --- Mobile / tablet: dropdown panel -------------------------------------- */
@media screen and (max-width: 991px) {
  /* The bar keeps only identity + trigger. */
  .nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    cursor: pointer;
  }
  /* The trigger sits right above the panel, so the panel's own X is redundant.
     It was also absolutely positioned and overlapped the first menu row. */
  .nav__close {
    display: none;
  }

  /* Anchored to the header rather than the viewport, so the panel follows the
     bar's real height instead of hard-coding it. */
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0 0.875rem;
    background: linear-gradient(180deg, hsl(14, 86%, 40%) 0%, hsl(14, 84%, 34%) 100%);
    border-top: 1px solid hsla(0, 0%, 100%, 0.18);
    border-radius: 0 0 1.25rem 1.25rem;
    box-shadow: 0 18px 38px hsla(0, 0%, 0%, 0.3);
    /* Opacity/transform rather than the old `top: -150%` slide, which animated
       the panel across the whole viewport. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  }
  .nav__menu.show-menu {
    top: 100%;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* One full-width row per destination. */
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    row-gap: 0.125rem;
    padding: 0 0.75rem;
  }
  .nav__item {
    width: 100%;
  }
  .nav__link {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px; /* comfortable touch target */
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    font-size: 1.0625rem;
    text-transform: none;
    position: relative;
  }
  .nav__link:hover {
    background-color: hsla(0, 0%, 100%, 0.1);
  }

  /* Volunteer keeps its pill, widened to the panel so it reads as the primary
     action rather than a stray button. */
  .nav__list .button--ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0.625rem 0 0.25rem;
    padding: 0.5rem 1.25rem;
  }

  /* Language switcher, separated from the destinations above it. */
  .lang-switch-item {
    margin-top: 0.625rem;
    padding-top: 0.75rem;
    border-top: 1px solid hsla(0, 0%, 100%, 0.16);
  }
}

/* --- Desktop -------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  /* Tightened from the old flat 3rem so eight destinations and the switcher
     fit on one line now that the Report label is much longer. */
  .nav__list {
    column-gap: clamp(1.25rem, 2.1vw, 2.25rem);
  }
  .nav__link {
    font-size: 0.9375rem;
    text-transform: none;
  }
}

/* --- Current page, inside the mobile panel --------------------------------
   A full-width underline would read as a divider in a stacked list, so in the
   panel the same aria-current hook becomes a leading accent bar plus a soft
   fill. Still a shape cue, not colour alone. The logo keeps its underline: it
   stays in the bar, not the panel. */
@media screen and (max-width: 991px) {
  .nav__link[aria-current="page"] {
    background-color: hsla(0, 0%, 100%, 0.16);
  }
  .nav__link[aria-current="page"]::after {
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
  }
  [dir="rtl"] .nav__link[aria-current="page"]::after {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
  }
}

/* ===========================================================================
   STOP THE RUMOR - THE TWO PAGE ACTIONS
   stop-rumor.html carries two separate actions that submit to two separate
   Google Forms. They must not read as the same function, so each card gets its
   own accent colour, icon treatment and verb while sharing one layout.
   Direction-agnostic: no physical left/right, so RTL needs no extra rules.
   =========================================================================== */
.sr-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.sr-action {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  /* The accent is what separates the two actions at a glance. */
  border-top: 3px solid var(--sr-accent);
  text-align: start;
}
.sr-action--rumor  { --sr-accent: var(--accent-orange); }
.sr-action--pledge { --sr-accent: var(--accent-purple-light); }

.sr-action__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.15rem;
  border-radius: 0.875rem;
  background: hsla(0, 0%, 100%, 0.12);
  color: var(--sr-accent);
  font-size: 1.6rem;
}
.sr-action__title {
  color: var(--title-color);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
}
.sr-action__desc {
  color: var(--text-color);
  opacity: 0.85;
  line-height: 1.7;
  font-size: 1rem;
  /* Push the button to the card foot so both buttons align across the row. */
  flex: 1 1 auto;
  margin-bottom: 1.5rem;
}
.sr-action__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: 3rem;
  background: var(--sr-accent);
  color: var(--text-color-dark);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.sr-action__button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
/* No form url configured yet. The CTA must not look or behave like a working
   link: js/google-forms.js adds this class and aria-disabled, and reveals the
   note below. Not colour alone - the cursor and the visible note both say so. */
.sr-action__button.cta-button--pending {
  background: hsla(0, 0%, 100%, 0.16);
  color: var(--text-color);
  cursor: not-allowed;
  opacity: 0.75;
}
.sr-action__button.cta-button--pending:hover {
  transform: none;
  filter: none;
}
.sr-action__pending {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-color);
  opacity: 0.7;
}
[lang="ar"] .sr-action__title,
[lang="ar"] .sr-action__desc,
[lang="ar"] .sr-action__button {
  font-family: "Tajawal", sans-serif;
}

/* ===========================================================================
   NAVBAR - ARABIC OPTICAL PARITY
   Scoped to the navbar and to [lang="ar"] only. The Latin navbar is not
   touched by any rule below.

   Why the two scripts did not feel equal at the same font-size. Measured from
   canvas TextMetrics with both webfonts loaded, at 15px:

                        ascent   descent   width("Programs"/"البرامج")
     Poppins 600          11        4              75.1
     Tajawal 700          10        6              46.6

   Three consequences, and one fix each:

   1. Arabic rides ~1px lower in ascent, so at an identical font-size it reads
      as the smaller of the two scripts. Corrected with a small size bump
      rather than by shrinking Latin.
   2. Arabic descends 50% deeper (6px vs 4px) because of the sub-baseline dots.
      The shared underline sat at a fixed -0.35rem, which is comfortable under
      Latin but crowds those dots. Arabic gets a deeper offset.
   3. Arabic sets ~38% narrower for the same word, so its ink is roughly 70%
      denser per horizontal pixel. Identical column gaps therefore read as
      tighter around Arabic. Arabic gets a wider gap, not Latin a narrower one.

   No letter-spacing is applied anywhere here: it severs the cursive joins
   between Arabic letterforms. Breathing room comes from size, leading and
   gap instead.
   =========================================================================== */

/* Leading: `normal` is tuned for Latin and is too tight for a script with
   both sub-baseline dots and superscript marks. */
[lang="ar"] .nav__link,
[lang="ar"] .nav__logo {
  line-height: 1.7;
}

/* The underline is drawn on an absolutely positioned ::after, so moving it
   costs no layout and cannot change the navbar's height. */
[lang="ar"] .nav__logo[aria-current="page"]::after,
[lang="ar"] .nav__link[aria-current="page"]::after {
  bottom: -0.55rem;
}

@media screen and (min-width: 992px) {
  /* 15px -> 16.5px. That lifts Tajawal's ascent from 10 to 11, matching
     Poppins at 15px, so the two scripts carry the same optical weight. */
  [lang="ar"] .nav__link {
    font-size: 1.03125rem;
  }

  /* Wider than the Latin clamp by roughly the density difference, so the
     Arabic navbar gets the same perceived breathing room. The Arabic list is
     the narrower of the two - measured 771px against 930px at 1920 - so the
     extra gap is absorbed by space the Latin navbar does not have.

     The lower bound stays at 1rem: a fixed wide gap pushed the last
     destination past the viewport edge at 1024, which is exactly the kind of
     per-breakpoint breakage this refinement is meant to remove. The gap now
     scales with the viewport and only reaches its full width where there is
     room for it. */
  [lang="ar"] .nav__list {
    column-gap: clamp(1rem, 2.4vw, 2.75rem);
  }

  /* Desktop destinations stay on one line, in BOTH scripts. The longer labels
     - "Stop the Rumor", the Report label, and their Arabic equivalents - were
     breaking onto a second line at 1920, 1440 and 1024, which doubled the row
     height and threw the underline off the baseline. Nowrap keeps every
     destination on one line; the gap clamp above is what yields the space. */
  .nav__link {
    white-space: nowrap;
  }
}

@media screen and (max-width: 991px) {
  /* The dropdown is vertical, so density is a leading problem rather than a
     gap problem. Size follows the same optical correction as desktop. */
  [lang="ar"] .nav__link {
    font-size: 1.0625rem;
    line-height: 1.8;
  }
}