/* ===================================================================
   O2Z WhatsApp - Landing Page CSS v3.0
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  --o2z-navy: #0A1F3E;
  --o2z-navy-light: #1a3258;
  --o2z-navy-dark: #061227;
  --o2z-gold: #FFC72C;
  --o2z-gold-hover: #e6b324;
  --o2z-whatsapp: #25D366;
  --o2z-white: #FFFFFF;
  --o2z-gray-50: #F8FAFC;
  --o2z-gray-100: #F1F5F9;
  --o2z-gray-200: #E2E8F0;
  --o2z-gray-500: #64748B;
  --o2z-gray-700: #334155;
  --o2z-shadow: 0 4px 20px rgba(10, 31, 62, 0.08);
  --o2z-shadow-lg: 0 10px 40px rgba(10, 31, 62, 0.12);
  --o2z-radius: 12px;
}

body, html, body *, html * {
  font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
  color: var(--o2z-gray-700);
  line-height: 1.7;
  font-size: 16px;
  background: var(--o2z-white);
}

.ud-header, .navbar-area, header.header {
  background: var(--o2z-white) !important;
  box-shadow: 0 2px 10px rgba(10, 31, 62, 0.06) !important;
  padding: 12px 0 !important;
}

.navbar-nav .nav-item .ud-menu-scroll,
.navbar-nav .nav-item a,
.ud-header .ud-menu-wrapper a {
  color: var(--o2z-navy) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.navbar-nav .nav-item a:hover {
  color: var(--o2z-gold) !important;
}

.ud-header .ud-main-btn, .navbar-btn {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
}

.ud-hero, #home, .hero-area {
  background: linear-gradient(135deg, var(--o2z-navy) 0%, var(--o2z-navy-light) 100%) !important;
  padding: 100px 0 60px !important;
  position: relative;
  overflow: hidden;
}

.ud-hero h1, .ud-hero .ud-hero-title, #home h1, .hero-area h1,
.ud-hero .ud-hero-content h1 {
  color: #FFFFFF !important;
  font-size: clamp(28px, 5vw, 46px) !important;
  font-weight: 800 !important;
  margin-bottom: 20px !important;
  line-height: 1.3 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ud-hero h2, .ud-hero h3, .ud-hero h4, .ud-hero .ud-hero-subtitle, #home h4 {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.ud-hero p, #home p, .hero-area p {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}

.ud-hero .ud-main-btn, .ud-hero a.btn, #home .btn {
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  margin: 6px !important;
}

.ud-hero .ud-white-btn {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  border: 2px solid var(--o2z-gold) !important;
}

.ud-hero .ud-border-btn {
  background: transparent !important;
  color: var(--o2z-white) !important;
  border: 2px solid var(--o2z-white) !important;
}

.ud-hero .ud-border-btn:hover {
  background: var(--o2z-white) !important;
  color: var(--o2z-navy) !important;
}

.ud-hero img, #home img, .hero-area img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 500px !important;
  object-fit: contain;
  border-radius: 12px;
}

.ud-section-title span,
.ud-about .ud-section-title span,
.ud-about span.ud-section-subtitle,
section span.subtitle,
[class*="ud-section"] > span:first-child,
.section-title > span {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

.ud-section-title h2, section h2, .section-title h2 {
  color: var(--o2z-navy) !important;
  font-size: clamp(24px, 4vw, 36px) !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
}

.ud-section-title p, section .section-description {
  color: var(--o2z-gray-500) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

section img, .ud-about img, .about-area img,
[class*="ud-feature"] img, .feature-item img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 450px !important;
  object-fit: contain !important;
  border-radius: var(--o2z-radius);
  display: block;
  margin: 0 auto;
}

.ud-about .ud-about-image img, .ud-about-image img {
  max-height: 480px !important;
  width: auto !important;
  margin: 0 auto;
}

.ud-header img, header img, footer img, .navbar-brand img {
  max-height: 50px !important;
  width: auto !important;
}

.ud-features, .ud-single-feature,
.features-area .single-feature,
[class*="single-feature"] {
  background: var(--o2z-white) !important;
  border-radius: var(--o2z-radius) !important;
  padding: 32px 24px !important;
  box-shadow: var(--o2z-shadow) !important;
  border: 1px solid var(--o2z-gray-100) !important;
  transition: all 0.3s ease;
  margin-bottom: 24px;
}

.ud-single-feature:hover, [class*="single-feature"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--o2z-shadow-lg) !important;
  border-color: var(--o2z-gold) !important;
}

.ud-single-feature .ud-feature-icon, [class*="feature-icon"] {
  background: linear-gradient(135deg, var(--o2z-gold) 0%, var(--o2z-gold-hover) 100%) !important;
  color: var(--o2z-navy) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  margin-bottom: 18px !important;
}

.ud-single-feature h3, .ud-single-feature h4,
[class*="single-feature"] h3 {
  color: var(--o2z-navy) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
}

.ud-single-feature p, [class*="single-feature"] p {
  color: var(--o2z-gray-500) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

.ud-about, .about-area {
  padding: 70px 0 !important;
  background: var(--o2z-white);
}

.ud-about:nth-of-type(even), .about-area:nth-of-type(even) {
  background: var(--o2z-gray-50) !important;
}

.ud-about h2, .about-area h2 {
  color: var(--o2z-navy) !important;
  font-size: clamp(24px, 3.5vw, 32px) !important;
  margin-bottom: 18px !important;
  font-weight: 800 !important;
}

.ud-about p, .about-area p {
  color: var(--o2z-gray-500) !important;
  font-size: 15.5px !important;
  line-height: 1.8 !important;
}

.ud-faq, .faq-area {
  background: var(--o2z-gray-50) !important;
  padding: 70px 0 !important;
}

.ud-faq .ud-faq-wrapper, .ud-faq .accordion-item {
  background: var(--o2z-white) !important;
  border: 1px solid var(--o2z-gray-200) !important;
  border-radius: var(--o2z-radius) !important;
  margin-bottom: 12px !important;
  overflow: hidden;
}

.ud-faq .accordion-button {
  color: var(--o2z-navy) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 18px 24px !important;
  background: var(--o2z-white) !important;
  border: none !important;
}

.ud-faq .accordion-button:not(.collapsed) {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  box-shadow: none !important;
}

.ud-faq .accordion-body {
  padding: 16px 24px !important;
  color: var(--o2z-gray-700) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
}

.ud-contact, .contact-area {
  background: var(--o2z-white);
  padding: 70px 0 !important;
}

.ud-contact .ud-contact-info, .contact-area .contact-info {
  background: var(--o2z-navy) !important;
  color: var(--o2z-white) !important;
  padding: 32px !important;
  border-radius: var(--o2z-radius) !important;
}

.ud-contact .ud-contact-info h5,
.ud-contact .ud-contact-info h4,
.ud-contact .ud-contact-info h3 {
  color: var(--o2z-gold) !important;
  font-weight: 700 !important;
}

.ud-contact a {
  color: var(--o2z-gold) !important;
}

.ud-footer, footer, .footer-area {
  background: var(--o2z-navy-dark) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  padding: 60px 0 24px !important;
}

.ud-footer h5, .ud-footer h4, footer h5, footer h4 {
  color: var(--o2z-white) !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
  font-size: 16px !important;
}

.ud-footer a, footer a {
  color: rgba(255, 255, 255, 0.75) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.ud-footer a:hover, footer a:hover {
  color: var(--o2z-gold) !important;
}

.ud-footer p, footer p {
  color: rgba(255, 255, 255, 0.65) !important;
}

.ud-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 24px !important;
  margin-top: 40px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 14px !important;
}

.btn-primary, .ud-main-btn:not(.ud-border-btn) {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  border: none !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  border-radius: 8px !important;
}

.btn-primary:hover, .ud-main-btn:hover {
  background: var(--o2z-gold-hover) !important;
  color: var(--o2z-navy) !important;
}

.cookie-notice, #cookie-notice, .cookie-bar, [class*="cookie"] {
  background: var(--o2z-navy) !important;
  color: var(--o2z-white) !important;
  border-top: 3px solid var(--o2z-gold) !important;
  padding: 14px 20px !important;
  font-size: 14px !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  text-align: center;
}

.cookie-notice a {
  color: var(--o2z-gold) !important;
  text-decoration: underline !important;
}

.cookie-notice button, .cookie-notice .btn {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  border: none !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  margin-left: 12px;
}

.back-to-top, #back-to-top, [class*="back-to-top"] {
  background: var(--o2z-gold) !important;
  color: var(--o2z-navy) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
}

html[lang="ar"], html[dir="rtl"], body[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

::selection {
  background: var(--o2z-gold);
  color: var(--o2z-navy);
}

html { scroll-behavior: smooth; }

@media (max-width: 768px) {
  .ud-hero { padding: 60px 0 40px !important; text-align: center; }
  .ud-hero h1 { font-size: 26px !important; }
  .ud-hero p { font-size: 15px !important; }
  .ud-section-title h2, section h2 { font-size: 22px !important; }
  .ud-single-feature { padding: 22px 18px !important; }
  .ud-about { padding: 50px 0 !important; }
  section img, .ud-about img { max-height: 280px !important; }
}