:root {
    --primary: #0a5c9e;
    --secondary: #00b4d8;
    --accent: #f77f00;
    --dark: #1a1a2e;
    --light: #f0f8ff;
    --white: #ffffff;
    --gray: #6c757d;
    --light-gray: #f8f9fa;
    --shadow: 0 4px 20px rgba(0,0,0,0.12);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif; color:#333; background:#fff; }
  body.ar { font-family:'Segoe UI',Tahoma,Arial,sans-serif; direction:rtl; text-align:right; }

  /* NAV */
  nav {
    background: var(--dark);
    position: sticky; top:0; z-index:1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
  }
  .nav-inner {
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 20px; height:65px;
  }
  .logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
  .logo-icon { width:40px; height:40px; background:var(--secondary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; }
  .logo-text { color:#fff; font-size:1rem; font-weight:700; line-height:1.2; }
  .logo-sub { color:var(--secondary); font-size:0.72rem; font-weight:400; }
  .nav-links { display:flex; gap:5px; align-items:center; }
  .nav-links a {
    color:#ccc; text-decoration:none; padding:8px 14px;
    border-radius:6px; font-size:0.9rem; transition:all .3s;
  }
  .nav-links a:hover, .nav-links a.active { background:var(--primary); color:#fff; }
  .lang-btn {
    background:var(--accent); color:#fff; border:none;
    padding:7px 16px; border-radius:20px; cursor:pointer;
    font-size:0.85rem; font-weight:600; transition:all .3s; margin-left:10px;
  }
  .lang-btn:hover { background:#e06b00; transform:scale(1.05); }
  body.ar .lang-btn { margin-left:0; margin-right:10px; }

  /* PAGES */
  .page { display:none; }
  .page.active { display:block; }

  /* HERO */
  .hero {
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary) 60%, var(--secondary) 100%);
    min-height:92vh; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:60px 20px; position:relative; overflow:hidden;
  }
  .hero::before {
    content:''; position:absolute; inset:0;
    background:url('https://images.pexels.com/photos/257736/pexels-photo-257736.jpeg?auto=compress&cs=tinysrgb&w=1400') center/cover no-repeat;
    opacity:0.18;
  }
  .hero-content { position:relative; z-index:1; max-width:800px; }
  .hero-badge {
    display:inline-block; background:var(--accent); color:#fff;
    padding:6px 18px; border-radius:20px; font-size:0.85rem; font-weight:600; margin-bottom:20px;
  }
  .hero h1 { color:#fff; font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.2; margin-bottom:15px; }
  .hero h1 span { color:var(--secondary); }
  .hero p { color:#c9d6e3; font-size:1.1rem; margin-bottom:30px; line-height:1.7; }
  .hero-btns { display:flex; gap:15px; justify-content:center; flex-wrap:wrap; }
  .btn-primary {
    background:var(--accent); color:#fff; padding:14px 32px;
    border-radius:30px; text-decoration:none; font-weight:700; font-size:1rem;
    transition:all .3s; border:none; cursor:pointer;
  }
  .btn-primary:hover { background:#e06b00; transform:translateY(-2px); box-shadow:0 8px 25px rgba(247,127,0,0.4); }
  .btn-outline {
    background:transparent; color:#fff; padding:14px 32px;
    border-radius:30px; text-decoration:none; font-weight:700; font-size:1rem;
    border:2px solid #fff; transition:all .3s;
  }
  .btn-outline:hover { background:#fff; color:var(--dark); }

  /* WHATSAPP */
  .wa-float {
    position:fixed; bottom:25px; right:25px; z-index:9999;
    background:#25d366; color:#fff; width:60px; height:60px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:28px; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,0.5);
    transition:all .3s; animation: pulse 2s infinite;
  }
  body.ar .wa-float { right:auto; left:25px; }
  .wa-float:hover { transform:scale(1.15); }
  @keyframes pulse {
    0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.5);}
    50%{box-shadow:0 4px 35px rgba(37,211,102,0.8);}
  }
  .wa-banner {
    background:linear-gradient(135deg,#25d366,#128c7e);
    color:#fff; padding:18px 30px; border-radius:15px;
    display:flex; align-items:center; gap:15px;
    margin:30px auto; max-width:700px; box-shadow:var(--shadow);
    text-decoration:none; transition:transform .3s;
  }
  .wa-banner:hover { transform:translateY(-3px); }
  .wa-banner .wa-icon { font-size:36px; }
  .wa-banner .wa-text h3 { font-size:1.1rem; font-weight:700; }
  .wa-banner .wa-text p { font-size:0.88rem; opacity:0.9; }

  /* SECTION */
  section { padding:70px 20px; }
  .container { max-width:1200px; margin:0 auto; }
  .section-title {
    text-align:center; margin-bottom:50px;
  }
  .section-title h2 {
    font-size:clamp(1.6rem,3vw,2.4rem); color:var(--dark); font-weight:800; margin-bottom:10px;
  }
  .section-title h2 span { color:var(--primary); }
  .section-title p { color:var(--gray); font-size:1rem; max-width:600px; margin:0 auto; }
  .section-title .divider {
    width:60px; height:4px; background:var(--accent);
    border-radius:2px; margin:15px auto 0;
  }
  body.ar .section-title .divider { margin:15px auto 0; }

  /* STATS */
  .stats-bar {
    background:var(--primary); padding:35px 20px;
  }
  .stats-grid { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
  .stat-item h3 { color:#fff; font-size:2.2rem; font-weight:800; }
  .stat-item p { color:#c9d6e3; font-size:0.88rem; margin-top:4px; }
  @media(max-width:600px){ .stats-grid{grid-template-columns:repeat(2,1fr);} }

  /* SERVICE CARDS */
  .services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:25px; }
  .service-card {
    background:#fff; border-radius:16px; overflow:hidden;
    box-shadow:var(--shadow); transition:transform .3s, box-shadow .3s;
    border:1px solid #e8f4fd;
  }
  .service-card:hover { transform:translateY(-8px); box-shadow:0 15px 40px rgba(0,0,0,0.15); }
  .service-img { width:100%; height:190px; object-fit:cover; }
  .service-body { padding:22px; }
  .service-icon { font-size:2.2rem; margin-bottom:10px; }
  .service-body h3 { color:var(--dark); font-size:1.1rem; font-weight:700; margin-bottom:8px; }
  .service-body p { color:var(--gray); font-size:0.88rem; line-height:1.6; margin-bottom:15px; }
  .service-tag {
    display:inline-block; background:var(--light); color:var(--primary);
    padding:4px 12px; border-radius:20px; font-size:0.78rem; font-weight:600;
    border:1px solid var(--secondary);
  }

  /* FEATURES */
  .features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:25px; }
  .feature-card {
    background:linear-gradient(135deg,#f0f8ff,#e8f4fd);
    border-radius:16px; padding:30px 22px; text-align:center;
    border:1px solid #d0eafc; transition:all .3s;
  }
  .feature-card:hover { background:var(--primary); transform:translateY(-5px); }
  .feature-card:hover h3, .feature-card:hover p { color:#fff; }
  .feature-icon { font-size:2.8rem; margin-bottom:15px; }
  .feature-card h3 { color:var(--dark); font-size:1.05rem; font-weight:700; margin-bottom:8px; transition:color .3s; }
  .feature-card p { color:var(--gray); font-size:0.86rem; line-height:1.6; transition:color .3s; }

  /* INFOGRAPHIC */
  .infographic {
    background:linear-gradient(135deg,var(--dark),var(--primary));
    border-radius:20px; padding:40px; color:#fff; margin:40px 0;
  }
  .infographic h3 { font-size:1.5rem; font-weight:800; margin-bottom:25px; text-align:center; }
  .steps-row { display:flex; gap:15px; flex-wrap:wrap; justify-content:center; }
  .step {
    background:rgba(255,255,255,0.12); border-radius:12px;
    padding:20px 18px; flex:1; min-width:160px; text-align:center;
    border:1px solid rgba(255,255,255,0.2);
  }
  .step-num { background:var(--accent); color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; margin:0 auto 10px; }
  .step h4 { font-size:0.95rem; margin-bottom:6px; }
  .step p { font-size:0.8rem; opacity:0.85; }

  /* ABOUT */
  .about-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
  @media(max-width:768px){ .about-grid{grid-template-columns:1fr;} }
  .about-img-wrap { position:relative; }
  .about-img { width:100%; border-radius:20px; object-fit:cover; height:400px; box-shadow:var(--shadow); }
  .about-badge {
    position:absolute; bottom:-15px; right:-15px;
    background:var(--accent); color:#fff; padding:15px 20px;
    border-radius:12px; text-align:center; box-shadow:var(--shadow);
  }
  body.ar .about-badge { right:auto; left:-15px; }
  .about-badge .num { font-size:2rem; font-weight:800; display:block; }
  .about-badge .lbl { font-size:0.78rem; }
  .about-content h2 { font-size:2rem; font-weight:800; color:var(--dark); margin-bottom:15px; line-height:1.3; }
  .about-content h2 span { color:var(--primary); }
  .about-content p { color:var(--gray); line-height:1.8; margin-bottom:15px; }
  .about-list { list-style:none; margin:20px 0; }
  .about-list li { padding:8px 0; display:flex; align-items:flex-start; gap:10px; color:#555; font-size:0.95rem; }
  .about-list li::before { content:'✅'; font-size:1rem; flex-shrink:0; }
  body.ar .about-list li { flex-direction:row-reverse; }

  /* CONTACT */
  .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  @media(max-width:768px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-info { }
  .contact-info h3 { font-size:1.4rem; font-weight:700; color:var(--dark); margin-bottom:20px; }
  .contact-item { display:flex; gap:15px; margin-bottom:22px; align-items:flex-start; }
  body.ar .contact-item { flex-direction:row-reverse; }
  .contact-item .ci-icon {
    background:var(--light); color:var(--primary); width:50px; height:50px;
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; flex-shrink:0; border:2px solid var(--secondary);
  }
  .contact-item .ci-text h4 { font-size:0.95rem; font-weight:700; color:var(--dark); margin-bottom:3px; }
  .contact-item .ci-text p { color:var(--gray); font-size:0.88rem; line-height:1.5; }
  .map-frame {
    border-radius:16px; overflow:hidden; height:350px;
    box-shadow:var(--shadow); border:3px solid var(--secondary);
  }
  .map-frame iframe { width:100%; height:100%; border:none; }

  /* FOOTER */
  footer {
    background:var(--dark); color:#ccc; padding:50px 20px 20px;
  }
  .footer-grid { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:35px; margin-bottom:35px; }
  .footer-col h4 { color:#fff; font-size:1rem; font-weight:700; margin-bottom:15px; }
  .footer-col p { font-size:0.86rem; line-height:1.7; color:#aaa; }
  .footer-col ul { list-style:none; }
  .footer-col ul li { margin-bottom:8px; }
  .footer-col ul li a { color:#aaa; text-decoration:none; font-size:0.86rem; transition:color .3s; }
  .footer-col ul li a:hover { color:var(--secondary); }
  .footer-bottom { max-width:1200px; margin:0 auto; border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
  .footer-bottom p { font-size:0.82rem; color:#888; }
  .footer-logo { color:var(--secondary); font-weight:700; font-size:0.95rem; }

  /* MISC */
  .bg-light { background:var(--light-gray); }
  .text-center { text-align:center; }
  .mt-30 { margin-top:30px; }
  .img-full { width:100%; border-radius:16px; object-fit:cover; box-shadow:var(--shadow); }
  .testimonial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:25px; }
  .testimonial-card {
    background:#fff; border-radius:16px; padding:25px;
    box-shadow:var(--shadow); border-left:4px solid var(--accent);
    border-right:none;
  }
  body.ar .testimonial-card { border-left:none; border-right:4px solid var(--accent); }
  .stars { color:#f77f00; font-size:1.1rem; margin-bottom:10px; }
  .testimonial-card p { color:#555; font-size:0.9rem; line-height:1.7; font-style:italic; margin-bottom:12px; }
  .testimonial-card .author { font-weight:700; color:var(--dark); font-size:0.9rem; }
  .page-hero {
    background:linear-gradient(135deg,var(--dark),var(--primary));
    padding:70px 20px; text-align:center; color:#fff;
  }
  .page-hero h1 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:10px; }
  .page-hero p { color:#c9d6e3; font-size:1rem; }
  .breadcrumb { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:12px; }
  .breadcrumb span { color:#aaa; font-size:0.85rem; cursor:pointer; }
  .breadcrumb span:hover { color:#fff; }
  .breadcrumb .sep { color:#555; }


	  /* RESPONSIVE DESIGN */
	  @media (max-width: 991px) {
	    .nav-inner { height: auto; padding: 15px 20px; flex-wrap: wrap; }
	    .nav-links { 
	      width: 100%; order: 3; display: none; 
	      flex-direction: column; gap: 10px; padding: 20px 0;
	      border-top: 1px solid rgba(255,255,255,0.1); margin-top: 15px;
	    }
	    .nav-links.show { display: flex; }
	    .nav-links a { width: 100%; text-align: center; padding: 12px; }
	    .lang-btn { margin: 10px auto 0; display: block; }
	    
	    .menu-toggle { 
	      display: block; background: none; border: 1px solid #fff; 
	      color: #fff; padding: 5px 10px; border-radius: 4px; cursor: pointer;
	    }
	  }
	
	  @media (max-width: 768px) {
	    .hero { min-height: 70vh; padding: 40px 15px; }
	    .hero h1 { font-size: 2rem; }
	    .hero p { font-size: 0.95rem; }
	    .hero-btns { flex-direction: column; width: 100%; }
	    .btn-primary, .btn-outline { width: 100%; text-align: center; }
	    
	    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
	    .stat-item h3 { font-size: 1.8rem; }
	    
	    .services-grid { grid-template-columns: 1fr; }
	    .features-grid { grid-template-columns: 1fr; }
	    
	    .steps-row { flex-direction: column; }
	    .step { width: 100%; }
	    
	    .about-img { height: 300px; }
	    .about-content h2 { font-size: 1.6rem; }
	    
	    .contact-grid { grid-template-columns: 1fr; }
	    .map-frame { height: 250px; }
	    
	    .footer-grid { grid-template-columns: 1fr; text-align: center; }
	    .footer-bottom { flex-direction: column; text-align: center; }
	    
	    .wa-banner { flex-direction: column; text-align: center; padding: 20px; }
    .wa-banner .wa-icon { font-size: 40px; }
	  }
	
	  /* Hamburger Menu Button */
	  .menu-toggle { display: none; }
	  @media (max-width: 991px) {
	    .menu-toggle { display: block; }
	  }
	  /* Minimalist Footer for Mobile */
	  @media (max-width: 480px) {
	    footer { padding: 30px 15px 15px; }
	    .footer-col:not(:first-child) { display: none; }
	    .footer-col:first-child { margin-bottom: 0; }
	    .footer-bottom { border-top: none; padding-top: 10px; }
  }