:root {
      --bg-deep: #0f0a07;
      --bg-surface: #1a1410;
      --bg-card: rgba(26, 20, 16, 0.6);
      --gold-primary: #c9a961;
      --gold-light: #e8d5b7;
      --gold-dark: #8b7345;
      --text-primary: #f5f1eb;
      --text-secondary: #b8a99a;
      --text-muted: #7a6f63;
      --border-subtle: rgba(201, 169, 97, 0.15);
      --border-glow: rgba(201, 169, 97, 0.4);

      --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.4);
      --shadow-glow: 0 0 40px rgba(201, 169, 97, 0.15);
      --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-subtle);
      --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: all 0.3s ease;

      --font-main: 'Vazirmatn', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html {
      scroll-behavior: smooth;
      font-size: 16px;
      scroll-padding-top: 80px;
  }

  body {
      font-family: var(--font-main);
      background: var(--bg-deep);
      color: var(--text-primary);
      line-height: 1.8;
      overflow-x: hidden;
      position: relative;
  }

  body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
          radial-gradient(ellipse at 20% 80%, rgba(201, 169, 97, 0.03) 0%, transparent 50%),
          radial-gradient(ellipse at 80% 20%, rgba(201, 169, 97, 0.04) 0%, transparent 50%),
          radial-gradient(ellipse at 50% 50%, rgba(139, 115, 69, 0.02) 0%, transparent 70%);
      pointer-events: none;
      z-index: -2;
  }

  body::after {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      opacity: 0.03;
      pointer-events: none;
      z-index: -1;
  }

  ::-webkit-scrollbar {
      width: 5px;
  }

  ::-webkit-scrollbar-track {
      background: var(--bg-surface);
  }

  ::-webkit-scrollbar-thumb {
      background: var(--gold-primary);
      border-radius: 10px;
      transition: var(--transition-fast);
  }

  ::-webkit-scrollbar-thumb:hover {
      background: var(--gold-light);
  }

  .cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border: 1px solid var(--gold-primary);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: var(--transition-smooth);
      z-index: 10000;
      mix-blend-mode: difference;
  }

  .cursor-dot {
      position: fixed;
      width: 4px;
      height: 4px;
      background: var(--gold-primary);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 10001;
  }

  .cursor.hover {
      width: 45px;
      height: 45px;
      background: rgba(201, 169, 97, 0.1);
      border-color: transparent;
  }

  .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-dark), var(--gold-primary), var(--gold-light));
      z-index: 9999;
      transition: width 0.1s ease;
  }

  /* هدر جدید مطابق با کد مورد نظر - استیکی با بکدراپ فیلتر */
  .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      backdrop-filter: blur(16px);
      background: rgba(10, 10, 12, 0.75);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.6s cubic-bezier(0.2, 0.95, 0.4, 1);
  }

  .site-header.scrolled {
      background: rgba(8, 8, 10, 0.92);
      backdrop-filter: blur(20px);
      border-bottom-color: rgba(228, 192, 141, 0.3);
  }

  .header-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 0;
  }

  .container {
      max-width: 1300px;
      margin: 0 auto;
      padding: 0 32px;
      position: relative;
      z-index: 5;
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 14px;
      text-decoration: none;
  }

  .logo-icon {
      width: 48px;
      height: 48px;
      background: #1C1C22;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(228, 192, 141, 0.5);
      transition: all 0.6s cubic-bezier(0.2, 0.95, 0.4, 1);
  }

  .logo-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
  }

  .logo span {
      font-weight: 500;
      font-size: 0.85rem;
      letter-spacing: -0.2px;
      background: linear-gradient(135deg, #F5F0E8, var(--gold-primary));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }

  .nav-menu ul {
      display: flex;
      gap: 36px;
      list-style: none;
  }

  .nav-menu a {
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 450;
      color: #D4D4DC;
      transition: 0.3s;
      position: relative;
  }

  .nav-menu a:after {
      content: '';
      position: absolute;
      bottom: -8px;
      right: 0;
      width: 0%;
      height: 1px;
      background: var(--gold-primary);
      transition: 0.3s;
  }

  .nav-menu a:hover {
      color: white;
  }

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

  .hamburger {
      display: none;
      background: none;
      border: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
  }

  .hamburger .bar {
      width: 24px;
      height: 2px;
      background: var(--gold-primary);
      transition: 0.3s;
  }

  .hamburger.active .bar:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active .bar:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active .bar:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
  }

  .hero {
      min-height: 55vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6rem 5% 4rem;
      position: relative;
      overflow: hidden;
  }

  .hero::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 70%, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
          radial-gradient(circle at 70% 30%, rgba(139, 115, 69, 0.06) 0%, transparent 50%);
      animation: float 20s ease-in-out infinite;
      pointer-events: none;
  }

  @keyframes float {

      0%,
      100% {
          transform: translate(0, 0) rotate(0deg);
      }

      25% {
          transform: translate(2%, 2%) rotate(0.5deg);
      }

      50% {
          transform: translate(0, 4%) rotate(0deg);
      }

      75% {
          transform: translate(-2%, 2%) rotate(-0.5deg);
      }
  }

  .hero-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
  }

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 0.4rem 1.2rem;
      background: rgba(201, 169, 97, 0.1);
      border: 1px solid var(--border-subtle);
      border-radius: 50px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--gold-primary);
      margin-bottom: 2rem;
      animation: fadeInUp 0.8s ease;
  }

  .hero h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 900;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, var(--text-primary) 0%, #eb9917 50%, var(--text-primary) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: fadeInUp 0.8s ease 0.1s both;
  }

  .hero p {
      font-size: 1.1rem;
      color: var(--text-secondary);
      max-width: 650px;
      margin: 0 auto 2.5rem;
      animation: fadeInUp 0.8s ease 0.2s both;
  }

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

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

  .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0.9rem 2.2rem;
      background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
      color: var(--bg-deep);
      font-weight: 600;
      font-size: 0.9rem;
      text-decoration: none;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: var(--transition-smooth);
      position: relative;
      overflow: hidden;
      animation: fadeInUp 0.8s ease 0.3s both;
  }

  .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
      opacity: 0;
      transition: var(--transition-smooth);
  }

  .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(201, 169, 97, 0.3);
  }

  .btn:hover::before {
      opacity: 1;
  }

  .btn i {
      transition: var(--transition-fast);
  }

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

  .btn-outline {
      background: transparent;
      border: 1.5px solid var(--border-subtle);
      color: var(--text-primary);
  }

  .btn-outline:hover {
      border-color: var(--gold-primary);
      background: rgba(201, 169, 97, 0.1);
  }

  .section {
      padding: 8rem 7%;
      position: relative;
      margin-bottom: -160px;
  }

  .section-header {
      text-align: center;
      margin-bottom: 4rem;
      position: relative;
  }

  .section-label {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--gold-primary);
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 1rem;
      opacity: 0.8;
  }

  .section-title {
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 700;
      color: var(--text-primary);
      position: relative;
      display: inline-block;
  }

  .section-title::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
      border-radius: 2px;
  }

  .philosophy-block {
      max-width: 1200px;
      margin: 2rem auto 4rem;
      padding: 2rem 0;
      border-top: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
  }

  .philosophy-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 3rem;
      justify-content: space-between;
  }

  .philosophy-text {
      flex: 1.5;
  }

  .philosophy-text .label {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      letter-spacing: 2px;
      color: var(--gold-primary);
      text-transform: uppercase;
      margin-bottom: 1rem;
      display: block;
  }

  .philosophy-text h2 {
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 1.2rem;
  }

  .philosophy-text p {
      color: var(--text-secondary);
      font-size: 0.95rem;
  }

  .principle-stack {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 2rem;
  }

  .principle {
      border-right: 2px solid var(--gold-primary);
      padding-right: 1.5rem;
      transition: var(--transition-smooth);
  }

  .principle:hover {
      transform: translateX(-4px);
  }

  .principle .num {
      font-family: var(--font-mono);
      font-size: 1.8rem;
      font-weight: 600;
      color: rgba(201, 169, 97, 0.5);
      line-height: 1;
  }

  .principle h4 {
      font-size: 1.1rem;
      margin: 0.5rem 0 0.3rem;
  }

  .principle p {
      font-size: 0.85rem;
      color: var(--text-secondary);
  }

  .promo-banner {
      position: relative;
      background: linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
      border-radius: 32px;
      margin: 2rem auto 5rem;
      max-width: 1100px;
      overflow: hidden;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-card);
      transition: var(--transition-smooth);
      cursor: pointer;
      display: flex;
      align-items: center;
      min-height: 625px;
      margin-bottom: -2rem;
  }

  .promo-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(125deg, rgba(201, 169, 97, 0.08) 0%, transparent 50%),
          url('https://theology.isussa.ir/assets/images/promo-bg.jpg') center/cover no-repeat;
      opacity: 0.4;
      transition: var(--transition-smooth);
  }

  .promo-banner:hover {
      transform: translateY(-8px);
      border-color: var(--gold-primary);
      box-shadow: var(--shadow-glow), var(--shadow-card);
  }

  .promo-banner:hover::before {
      opacity: 0.7;
  }

  .promo-content {
      position: relative;
      z-index: 2;
      padding: 3rem;
      max-width: 600px;
  }

  .promo-content h3 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1rem;
      color: var(--text-primary);
  }

  .promo-content p {
      color: var(--text-secondary);
      margin-bottom: 2rem;
      font-size: 1rem;
      line-height: 1.7;
  }

  .promo-badge {
      display: inline-block;
      padding: 0.3rem 1rem;
      background: rgba(201, 169, 97, 0.15);
      border: 1px solid var(--border-subtle);
      border-radius: 20px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--gold-primary);
      margin-bottom: 1.5rem;
  }

  .promo-btn {
      background: var(--gold-primary);
      border: none;
      padding: 10px 32px;
      border-radius: 60px;
      color: #080808;
      font-weight: 600;
      transition: 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
  }

  .promo-btn:hover {
      gap: 14px;
      background: #F0D5A8;
  }

  .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 2rem;
      max-width: 1400px;
      margin: 0 -24px;
  }

  .course-card {
      background: var(--bg-card);
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid var(--border-subtle);
      transition: var(--transition-smooth);
      position: relative;
      backdrop-filter: blur(10px);
  }

  .course-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(201, 169, 97, 0.03) 100%);
      pointer-events: none;
      opacity: 0;
      transition: var(--transition-smooth);
  }

  .course-card:hover {
      transform: translateY(-8px);
      border-color: var(--gold-primary);
      box-shadow: var(--shadow-glow), var(--shadow-card);
  }

  .course-card:hover::before {
      opacity: 1;
  }

  .course-img {
      width: 100%;
      height: 530px;
      background: linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
      color: var(--gold-primary);
      position: relative;
      overflow: hidden;
  }

  .course-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(201, 169, 97, 0.1) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: var(--transition-smooth);
  }

  .course-card:hover .course-img::after {
      transform: translateX(100%);
      transition-duration: 0.8s;
  }

  .course-img-custom {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition-smooth);
  }

  .course-card:hover .course-img-custom {
      transform: scale(1.05);
  }

  .course-content {
      padding: 1.8rem;
  }

  .course-content h3 {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 0.8rem;
      color: var(--text-primary);
      line-height: 1.4;
  }

  .course-content p {
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.6;
      margin-bottom: 1.2rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .course-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 1rem;
      border-top: 1px solid var(--border-subtle);
  }

  .course-date {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--gold-primary);
  }

  .course-link {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: var(--transition-fast);
  }

  .course-link:hover {
      color: var(--gold-primary);
  }

  .course-link i {
      transition: var(--transition-fast);
  }

  .course-link:hover i {
      transform: translateX(-3px);
  }

  .about-section {
      background: linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
      border-radius: 40px;
      margin: 4rem auto;
      max-width: 1000px;
      padding: 4rem;
      text-align: center;
      border: 1px solid var(--border-subtle);
      position: relative;
      overflow: hidden;
  }

  .about-section::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 70%, rgba(201, 169, 97, 0.05) 0%, transparent 50%);
      pointer-events: none;
  }

  .about-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--gold-dark), var(--gold-primary));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 2rem;
      font-size: 1.8rem;
      color: var(--bg-deep);
  }

  .about-section h2 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1.2rem;
      color: var(--text-primary);
  }

  .about-section p {
      color: var(--text-secondary);
      max-width: 600px;
      margin: 0 auto 2rem;
      font-size: 1rem;
      line-height: 1.8;
  }

  .member-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
  }

  .member-card {
      background: var(--bg-card);
      border-radius: 20px;
      padding: 0.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      border: 1px solid var(--border-subtle);
      transition: var(--transition-smooth);
      backdrop-filter: blur(10px);
  }

  .member-card:hover {
      transform: translateX(-5px);
      border-color: var(--gold-primary);
      background: rgba(26, 20, 16, 0.8);
  }

  .member-avatar {
      width: 115px;
      height: 115px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--bg-surface), var(--bg-deep));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      color: var(--gold-primary);
      border: 2px solid var(--border-subtle);
      flex-shrink: 0;
      overflow: hidden;
      transition: var(--transition-smooth);
  }

  .member-card:hover .member-avatar {
      border-color: var(--gold-primary);
      transform: scale(1.05);
  }

  .member-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .member-info h4 {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 0.2rem;
  }

  .member-info p {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--gold-primary);
      margin-bottom: 0.3rem;
  }

  .member-info small {
      font-size: 0.7rem;
      color: var(--text-muted);
  }

  footer {
      background: var(--bg-surface);
      border-top: 1px solid var(--border-subtle);
      padding: 4rem 5% 2rem;
      margin-top: 4rem;
      text-align: center;
  }

  .footer-logo {
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
      display: block;
  }

  .footer-logo span {
      color: var(--gold-primary);
  }

  .social-links {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      margin: 2rem 0;
  }

  .social-links a {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 1.1rem;
      text-decoration: none;
      transition: var(--transition-smooth);
  }

  .social-links a:hover {
      background: var(--gold-primary);
      color: var(--bg-deep);
      transform: translateY(-4px);
      border-color: var(--gold-primary);
  }

  .footer-copy {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid var(--border-subtle);
  }

  .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: var(--transition-smooth);
  }

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

  .loader {
      position: fixed;
      inset: 0;
      background: var(--bg-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      transition: opacity 0.6s ease, visibility 0.6s;
  }

  .loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
  }

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

  .loader-spinner {
      width: 60px;
      height: 60px;
      border: 2px solid var(--border-subtle);
      border-top-color: var(--gold-primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 1.5rem;
  }

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

  .loader-text {
      font-family: var(--font-mono);
      font-size: 0.9rem;
      color: var(--text-secondary);
  }

  @media (max-width: 992px) {
      .hero h1 {
          font-size: 2.5rem;
      }

      .promo-banner {
          min-height: 350px;
      }

      .promo-content {
          padding: 2rem;
      }
  }

  @media (max-width: 768px) {
      .container {
          padding: 0 2px;
      }

      .hamburger {
          display: flex;
      }

      .nav-menu {
          position: fixed;
          top: 0;
          right: -100%;
          width: 85%;
          height: 100vh;
          background: rgba(15, 10, 7, 0.98);
          backdrop-filter: blur(20px);
          transition: 0.3s ease;
          padding: 100px 2rem 2rem;
          z-index: 999;
          border-left: 1px solid var(--border-subtle);
      }

      .nav-menu.active {
          right: 0;
      }

      .nav-menu ul {
          flex-direction: column;
          gap: 1.5rem;
      }

      .nav-menu a {
          font-size: 1.1rem;
          padding: 0.8rem 0;
      }

      .hero {
          min-height: 41vh;
          padding: 4rem 5% 2rem;
      }

      .hero h1 {
          font-size: 1.8rem;
      }

      .hero p {
          font-size: 1rem;
      }

      .philosophy-grid {
          flex-direction: column;
          gap: 2rem;
      }

      .principle {
          transform: none;
      }

      .promo-banner {
          flex-direction: column;
          text-align: center;
          min-height: auto;
          padding: 2rem;
      }

      .promo-content {
          max-width: 100%;
          padding: 1rem;
      }

      .promo-content h3 {
          font-size: 1.4rem;
      }

      .course-grid {
          grid-template-columns: 1fr;
      }

      .about-section {
          padding: 2.5rem 1.5rem;
          border-radius: 30px;
          margin: 2rem auto;
      }

      .about-section h2 {
          font-size: 1.4rem;
      }

      .member-grid {
          grid-template-columns: 1fr;
      }

      .member-card {
          padding: 1rem;
      }

      footer {
          padding: 3rem 5% 1.5rem;
      }

      .social-links {
          gap: 1rem;
      }

      .social-links a {
          width: 40px;
          height: 40px;
          font-size: 1rem;
      }

      .site-header {
          margin-top: 0;
      }

      .header-flex {
          padding: 12px 5px;
      }
  }

  html,
  body {
      overflow-x: hidden !important;
      width: 100% !important;
      max-width: 100% !important;
  }

  * {
      max-width: 100%;
  }