/* ========== CSS Variables ========== */
    :root {
      --primary-color: #2E7D32;
      --primary-light: #4CAF50;
      --primary-dark: #1B5E20;
      --secondary-color: #388E3C;
      --accent-color: #66BB6A;
      --gold-color: #FFD700;
      --text-dark: #1B5E20;
      --bg-light: #F8FFF8;
      --white: #ffffff;
      --gray-50: #fafafa;
      --gray-100: #f5f5f5;
      --gray-200: #eeeeee;
      --gray-300: #e0e0e0;
      --gray-400: #bdbdbd;
      --gray-500: #9e9e9e;
      --gray-600: #757575;
      --gray-700: #616161;
      --gray-800: #424242;
      --gray-900: #212121;
      --shadow-soft: 0 2px 20px rgba(46, 125, 50, 0.08);
      --shadow-medium: 0 8px 30px rgba(46, 125, 50, 0.12);
      --shadow-strong: 0 15px 40px rgba(46, 125, 50, 0.15);
    }

    /* ========== Dark Mode Support ========== */
    @media (prefers-color-scheme: dark) {
      :root {
        --white: #121212;
        --bg-light: #1a1a1a;
        --gray-50: #212121;
        --gray-100: #2a2a2a;
        --gray-200: #3a3a3a;
        --gray-300: #4a4a4a;
        --gray-400: #6a6a6a;
        --gray-500: #8a8a8a;
        --gray-600: #aaaaaa;
        --gray-700: #cccccc;
        --gray-800: #eeeeee;
        --gray-900: #ffffff;
        --text-dark: #4CAF50;
        --shadow-soft: 0 2px 20px rgba(0, 0, 0, 0.3);
        --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.4);
        --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.5);
      }
    }

    /* ========== Base Styles ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Tajawal', 'Cairo', sans-serif;
      line-height: 1.7;
      color: var(--gray-800);
      background: linear-gradient(135deg, var(--bg-light) 0%, var(--white) 100%);
      overflow-x: hidden;
    }

    /* ========== Header Styles ========== */
    .header {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow-soft);
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      border-bottom: 1px solid rgba(46, 125, 50, 0.1);
    }

    .header.scrolled {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: var(--shadow-medium);
    }

    .navbar-brand {
      font-family: 'Cairo', sans-serif;
      font-weight: 800;
      font-size: 1.6rem;
      color: var(--primary-color) !important;
      transition: all 0.3s ease;
    }

    .navbar-brand:hover {
      transform: scale(1.05);
    }

    .navbar-nav .nav-link {
      font-weight: 500;
      font-size: 1.1rem;
      margin: 0 15px;
      color: var(--gray-700) !important;
      transition: all 0.3s ease;
      position: relative;
      padding: 10px 0 !important;
    }

    .navbar-nav .nav-link::before {
      content: '';
      position: absolute;
      width: 0;
      height: 3px;
      bottom: 0;
      right: 50%;
      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
      transition: all 0.4s ease;
      border-radius: 3px;
    }

    .navbar-nav .nav-link:hover::before,
    .navbar-nav .nav-link.active::before {
      width: 100%;
      right: 0;
    }

    .navbar-nav .nav-link:hover {
      color: var(--primary-color) !important;
      transform: translateY(-2px);
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .logo-img {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      border-radius: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 1.8rem;
      box-shadow: 0 8px 25px rgba(46, 125, 50, 0.3);
    }

    /* ========== Button Styles ========== */
    .btn-primary-custom {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--secondary-color) 100%);
      border: none;
      padding: 14px 35px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1rem;
      color: var(--white);
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 25px rgba(46, 125, 50, 0.3);
      position: relative;
      overflow: hidden;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .btn-primary-custom i {
      margin-left: 8px;
    }

    .btn-primary-custom::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.6s ease;
    }

    .btn-primary-custom:hover::before {
      left: 100%;
    }

    .btn-primary-custom:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 15px 35px rgba(46, 125, 50, 0.4);
      color: var(--white);
    }

    .btn-secondary-custom {
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.3);
      padding: 14px 35px;
      border-radius: 50px;
      font-weight: 600;
      color: var(--white);
      text-decoration: none;
      transition: all 0.4s ease;
      backdrop-filter: blur(10px);
      display: inline-flex;
      align-items: center;
    }

    .btn-secondary-custom:hover {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.5);
      color: var(--white);
      transform: translateY(-3px);
    }

    .btn-cta {
      background: var(--white);
      color: var(--primary-color);
      padding: 18px 50px;
      border-radius: 50px;
      font-weight: 700;
      font-size: 1.1rem;
      text-decoration: none;
      transition: all 0.4s ease;
      box-shadow: 0 10px 30px rgba(255,255,255,0.3);
      position: relative;
      z-index: 3;
      border: 3px solid transparent;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
    }

    .btn-cta i {
      margin-left: 8px;
    }

    .btn-cta:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 20px 40px rgba(255,255,255,0.4);
      color: var(--primary-color);
      border-color: rgba(255,255,255,0.3);
    }

    /* ========== Hero Section ========== */
    .hero {
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--secondary-color) 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding-top: 80px;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    }

    .hero::after {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 120%;
      height: 120%;
      background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
      animation: float 20s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(180deg); }
    }

    .hero-content {
      position: relative;
      z-index: 3;
      color: var(--white);
    }

    .hero h1 {
      font-family: 'Cairo', sans-serif;
      font-size: 4rem;
      font-weight: 900;
      margin-bottom: 25px;
      text-shadow: 0 4px 20px rgba(0,0,0,0.3);
      background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1.2;
    }

    .hero p {
      font-size: 1.4rem;
      margin-bottom: 35px;
      opacity: 0.95;
      text-shadow: 0 2px 10px rgba(0,0,0,0.2);
      line-height: 1.8;
    }

    .hero-stats {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(20px);
      border-radius: 25px;
      padding: 40px 30px;
      margin-top: 60px;
      border: 1px solid rgba(255,255,255,0.2);
      box-shadow: var(--shadow-strong);
    }

    .stat-item {
      text-align: center;
      color: var(--white);
      position: relative;
    }

    .stat-number {
      font-size: 3.5rem;
      font-weight: 900;
      display: block;
      margin-bottom: 15px;
      background: linear-gradient(135deg, #ffffff 0%, var(--gold-color) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .stat-label {
      font-size: 1.2rem;
      opacity: 0.9;
      font-weight: 500;
    }

    .btn-group-hero {
      display: flex;
      gap: 20px;
      margin-top: 35px;
      flex-wrap: wrap;
    }

    /* ========== Services Section ========== */
    .services {
      padding: 120px 0;
      background: linear-gradient(180deg, var(--bg-light) 0%, var(--white) 100%);
      position: relative;
    }

    .services::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent 0%, var(--primary-color) 50%, transparent 100%);
    }

    .section-title {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
    }

    .section-title h2 {
      font-family: 'Cairo', sans-serif;
      font-size: 3.2rem;
      font-weight: 800;
      color: var(--text-dark);
      margin-bottom: 25px;
      position: relative;
      display: inline-block;
    }

    .section-title h2::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 5px;
      background: linear-gradient(90deg, var(--primary-color), var(--gold-color), var(--primary-light));
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 3px;
    }

    .section-title p {
      font-size: 1.3rem;
      color: var(--gray-600);
      max-width: 700px;
      margin: 50px auto 0;
      line-height: 1.8;
    }

    .service-card {
      background: var(--white);
      padding: 50px 35px;
      border-radius: 25px;
      box-shadow: var(--shadow-soft);
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      height: 100%;
      border: 1px solid var(--gray-100);
      position: relative;
      overflow: hidden;
    }

    .service-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 6px;
      background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
      transform: scaleX(0);
      transition: transform 0.4s ease;
    }

    .service-card:hover::before {
      transform: scaleX(1);
    }

    .service-card:hover {
      transform: translateY(-15px) scale(1.02);
      box-shadow: var(--shadow-strong);
      border-color: var(--primary-color);
    }

    .service-icon {
      width: 85px;
      height: 85px;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 35px;
      font-size: 2.2rem;
      color: var(--white);
      box-shadow: 0 10px 30px rgba(46, 125, 50, 0.3);
      transition: all 0.4s ease;
    }

    .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 15px 40px rgba(46, 125, 50, 0.4);
    }

    .service-card h4 {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 25px;
      text-align: center;
    }

    .service-card p {
      color: var(--gray-600);
      text-align: center;
      line-height: 1.9;
      font-size: 1.1rem;
    }

    /* ========== Process Section ========== */
    .process {
      padding: 120px 0;
      background: linear-gradient(135deg, var(--white) 0%, var(--bg-light) 100%);
      position: relative;
    }

    .process-timeline {
      position: relative;
      margin-top: 60px;
    }

    .process-timeline::before {
      content: '';
      position: absolute;
      top: 60px;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--secondary-color));
      border-radius: 2px;
      z-index: 1;
    }

    .process-step {
      text-align: center;
      margin-bottom: 50px;
      position: relative;
      z-index: 2;
    }

    .process-number {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: var(--white);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      font-weight: 800;
      margin: 0 auto 25px;
      box-shadow: 0 10px 30px rgba(46, 125, 50, 0.3);
      border: 5px solid var(--white);
      transition: all 0.4s ease;
    }

    .process-step:hover .process-number {
      transform: scale(1.2);
      box-shadow: 0 15px 40px rgba(46, 125, 50, 0.4);
    }

    .process-step h4 {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 20px;
    }

    .process-step p {
      color: var(--gray-600);
      max-width: 300px;
      margin: 0 auto;
      line-height: 1.8;
      font-size: 1.1rem;
    }

    /* ========== CTA Section ========== */
    .cta {
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 50%, var(--secondary-color) 100%);
      padding: 100px 0;
      color: var(--white);
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .cta::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
      animation: rotate 30s linear infinite;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .cta-content {
      position: relative;
      z-index: 2;
    }

    .cta h2 {
      font-size: 2.8rem;
      font-weight: 800;
      margin-bottom: 25px;
      text-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }

    .cta p {
      font-size: 1.3rem;
      margin-bottom: 45px;
      opacity: 0.95;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.8;
    }

    /* ========== Footer ========== */
    .footer {
      background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
      color: var(--white);
      padding: 80px 0 40px;
      position: relative;
    }

    .footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--gold-color), var(--primary-light));
    }

    .footer h5 {
      font-weight: 700;
      font-size: 1.3rem;
      margin-bottom: 25px;
      position: relative;
      padding-bottom: 15px;
    }

    .footer h5::after {
      content: "";
      position: absolute;
      width: 60px;
      height: 3px;
      background: var(--primary-color);
      bottom: 0;
      right: 0;
      border-radius: 2px;
    }

    .footer p, .footer a {
      color: var(--gray-300);
      text-decoration: none;
      transition: all 0.3s ease;
      line-height: 2;
    }

    .footer a:hover {
      color: var(--primary-light);
      transform: translateX(-5px);
    }

    /* ========== Floating Action Button ========== */
    .floating-report-btn {
      position: fixed;
      bottom: 30px;
      left: 30px;
      z-index: 1000;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
      color: white;
      font-size: 2rem;
      box-shadow: 0 8px 25px rgba(46, 125, 50, 0.4);
      transition: all 0.4s ease;
      text-decoration: none;
      border: 4px solid var(--white);
      cursor: pointer;
    }

    .floating-report-btn:hover {
      transform: scale(1.15) translateY(-5px);
      box-shadow: 0 15px 35px rgba(46, 125, 50, 0.5);
      color: white;
    }

    .floating-report-btn::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border-radius: 50%;
      border: 2px solid var(--primary-color);
      animation: pulse-ring 2s infinite;
    }

    @keyframes pulse-ring {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      100% {
        transform: scale(1.5);
        opacity: 0;
      }
    }

    /* ========== Page Transitions ========== */
    .page-section {
      opacity: 1;
      transition: opacity 0.5s ease;
    }

    .page-section.hidden {
      opacity: 0;
      pointer-events: none;
      position: absolute;
      width: 100%;
      height: 100%;
    }

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

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

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .fade-in-up {
      animation: fadeInUp 0.8s ease forwards;
    }

    .fade-in-left {
      animation: fadeInLeft 0.8s ease forwards;
    }

    .fade-in-right {
      animation: fadeInRight 0.8s ease forwards;
    }

    .stagger-1 { animation-delay: 0.1s; }
    .stagger-2 { animation-delay: 0.2s; }
    .stagger-3 { animation-delay: 0.3s; }
    .stagger-4 { animation-delay: 0.4s; }

    /* ========== Responsive Design ========== */
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2.8rem;
      }
      
      .hero p {
        font-size: 1.2rem;
      }
      
      .section-title h2 {
        font-size: 2.5rem;
      }
      
      .navbar-nav {
        margin-top: 20px;
      }
      
      .hero-stats {
        margin-top: 40px;
        padding: 30px 20px;
      }

      .floating-report-btn {
        bottom: 20px;
        left: 20px;
        width: 70px;
        height: 70px;
        font-size: 1.7rem;
      }

      .btn-group-hero {
        flex-direction: column;
        align-items: center;
      }

      .process-timeline::before {
        display: none;
      }
    }