:root {
  /* Colors */
  --primary-blue: #1e3a8a;
  --secondary-red: #ef4444;
  --text-dark: #0f172a;
  --text-gray: #475569;
  --text-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --bg-blue-light: #eff6ff;

  /* Fonts */
  --font-main: "Cairo", sans-serif;

  /* Spacing */
  --container-width: 1200px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
}

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

body {
  font-family: var(--font-main);
  background-color: var(--bg-white);
  color: var(--text-dark);
  line-height: 1.6;
  direction: rtl;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Atomic/Utility Classes */
.btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-primary {
  background-color: var(--primary-blue);
  color: var(--text-white);
}

.btn-secondary {
  background-color: var(--secondary-red);
  color: var(--text-white);
}

.btn-outline-light {
  border: 2px solid var(--text-white);
  color: var(--text-white);
  background: transparent;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Top Bar */
.top-bar {
  background-color: var(--primary-blue);
  color: var(--text-white);
  padding: 8px 0;
  font-size: 14px;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-info {
  display: flex;
  gap: 20px;
}

.contact-info a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-info img {
  height: 20px;
  width: 20px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-links img {
  height: 16px;
  filter: brightness(0) invert(1);
}

/* Header */
.main-header {
  background-color: var(--bg-white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-blue);
}

.logo-icon {
  font-size: 32px;
}

.logo-text .text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.company-name {
  font-weight: 900;
  font-size: 20px;
}

.company-suffix {
  font-size: 14px;
  font-weight: 500;
}

.main-nav ul {
  display: flex;
  gap: 32px;
}

.main-nav a {
  color: var(--text-gray);
  font-weight: 600;
  font-size: 16px;
  transition: color 0.3s;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--primary-blue);
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 790px; /* Adjust based on design */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-white);
  overflow: hidden;
}

.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;
}

.hero-bg .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(30, 58, 138, 0.8) 0%,
    rgba(30, 58, 138, 0.4) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 60px;
}

.hero-subtitle {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 500;
}

.hero-title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 24px;
  line-height: 1.2;
}

.hero-description {
  font-size: 18px;
  margin-bottom: 32px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Sections Common */
.section-padding {
  padding: 80px 0;
}

.section-label {
  color: var(--secondary-red);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.section-label::before,
.section-label::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: var(--secondary-red);
  vertical-align: middle;
  margin: 0 10px;
}

.section-title {
  font-size: 36px;
  color: var(--primary-blue);
  margin-bottom: 20px;
}

.section-description {
  color: var(--text-gray);
  font-size: 16px;
  margin-bottom: 30px;
  max-width: 600px;
}

/* About Section */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
  color: var(--text-dark);
}

.about-features li img {
  width: 20px;
}

.btn-outline-primary {
  border: 1px solid var(--primary-blue);
  color: var(--primary-blue);
  margin-top: 20px;
}

.about-image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  border-radius: 20px;
}

.experience-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: var(--primary-blue);
  color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.experience-badge .years {
  display: block;
  font-size: 32px;
  font-weight: 900;
}

/* Values Section - Gradient Cards */
.values-section {
  background-color: #f6f7f9;
  padding-top: 100px; /* Extra space for popping icons */
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.value-card {
  background: white;
  padding: 60px 30px 40px; /* Top padding for icon space */
  border-radius: 0; /* Square/sharp corners as per image? Or slight radius? Image looks square-ish but clean. Let's stick to slight radius or none. Image has shadow. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  transition: all 0.4s ease;
  border: 1px solid transparent;
  margin-top: 30px; /* Space for the icon popping out */
}

.value-card:hover {
  background: linear-gradient(
    135deg,
    #ff7e5f 0%,
    #feb47b 100%
  ); /* Placeholder Gradient */
  /* User image: Orange to Dark Blue/Purple */
  background: linear-gradient(135deg, #ff6b6b 0%, #2d3450 100%);
  /* Wait, the image shows distinct styles. Left one is active gradient. Middle/Right are white.
     Let's make hover effect mimic the active state. */
  transform: translateY(-10px);
  color: white;
}

.icon-box {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -40px; /* Pop out half height */
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
  z-index: 2;
  border: 4px solid white; /* thick border to separate from card content if needed, or matches bg */
}

.icon-box img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* Specific Icon Colors - Before Hover */
.icon-box.red {
  background-color: #ff6b6b;
}
.icon-box.blue {
  background-color: #ff6b6b; /* Image shows all orange icons? Or varied? Image has Orange icons for all. Let's standardize to Orange. */
  background-color: #ff7e5f;
}
.icon-box.blue-dark {
  background-color: #ff7e5f;
}

/* Let's follow the image colors more closely. All icons seem to be in orange circles. */
.icon-box {
  background-color: #ff7e5f; /* Coral Orange */
  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
  /* Actually image icons are Orange Background with White Icon? Or White Background with Orange Icon? 
     Image: Orange Circle background, White Icon.
  */
  background: #ff6b6b;
}

.icon-box img {
  filter: brightness(0) invert(1); /* White icons */
}

/* Hover Effects on Icon */
.value-card:hover .icon-box {
  background: white;
  transform: translateX(-50%) scale(1.1);
}

.value-card:hover .icon-box img {
  filter: none; /* Return to original color? OR make it colored? 
     If icon is white SVG, filter:none might make it black if original was black.
     Let's assume original icons are colored? 
     In previous steps, icons were pngs. 
     Let's try to filter them to the primary dark color on hover.
  */
  filter: brightness(0); /* Black? */
  /* Let's keep it simple: Icon stays white on hover, but box circle might change? 
     Actually, usually the icon circle turns white and icon turns colored.
  */
  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%)
    hue-rotate(346deg) brightness(104%) contrast(97%); /* Approximation of #ff6b6b */
}

.value-card h3 {
  margin-top: 20px; /* Space from top edge (icon is above) */
  margin-bottom: 15px;
  color: var(--primary-blue);
  font-size: 24px;
  font-weight: 800;
  transition: color 0.4s;
}

.value-card:hover h3 {
  color: white;
}

.value-card p {
  color: #64748b;
  font-size: 16px;
  line-height: 1.8;
  transition: color 0.4s;
}

.value-card:hover p {
  color: rgba(255, 255, 255, 0.9);
}

.values-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.values-list li {
  font-weight: 600;
  color: var(--text-gray);
  transition: color 0.4s;
}

.value-card:hover .values-list li {
  color: white;
}

/* Services Section */
.text-center {
  text-align: center;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 50px;
}

.service-card {
  height: 400px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.service-card:hover img {
  transform: scale(1.1);
}

.service-card .content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 24px;
  background: linear-gradient(
    0deg,
    rgba(30, 58, 138, 0.9) 0%,
    rgba(30, 58, 138, 0) 100%
  );
  color: white;
}

.service-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.details-link {
  font-size: 14px;
  color: #fca5a5; /* Lighter red for visibility on dark */
  font-weight: 700;
}

/* Stats Section */
.stats-section {
  background-color: var(--primary-blue);
  padding: 80px 0;
  color: white;
  margin-top: 60px;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.9), rgba(30, 58, 138, 0.9)),
    url("../assets/header-bg.png");
  background-size: cover;
  background-attachment: fixed;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}

.stat-item .number {
  display: block;
  font-size: 56px;
  font-weight: 900;
  margin-bottom: 5px;
  color: #fca5a5;
}

.stat-item .label {
  font-size: 18px;
  opacity: 0.9;
  font-weight: 600;
}

/* Certifications Section */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 40px;
  align-items: stretch;
}

.cert-item {
  background: white;
  padding: 40px 30px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.cert-item img {
  height: 100px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 24px;
}

.cert-name {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary-blue);
  margin-bottom: 8px;
}

.cert-desc {
  color: var(--text-gray);
  font-size: 14px;
}

/* Contact/Locations */
.locations-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin: 40px auto 0;
}

.location-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 24px 30px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
  gap: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.location-card .icon {
  width: 64px;
  height: 64px;
  background: var(--bg-blue-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.location-card .icon img {
  width: 32px;
  height: 32px;
}

.location-card .details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.location-card .city {
  font-weight: 800;
  color: var(--primary-blue);
  font-size: 20px;
}

.contact-row span {
  margin-left: 24px;
  color: var(--text-gray);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.contact-row span img {
  width: 18px;
  height: 18px;
}

/* New Contact Card Design */
.contact-card-v2 {
  background: #fdfdfd;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 40px;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.header-text {
  text-align: right;
}

.header-text .subtitle {
  display: block;
  font-size: 14px;
  color: #fca5a5; /* Light red/orange */
  font-weight: 700;
  margin-bottom: 5px;
}

.header-text .title {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary-blue);
  margin: 0;
}

.header-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: white;
  border: 1px solid #fee2e2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.card-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-gray);
  font-weight: 600;
  font-size: 15px;
}

.detail-item img {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.phone-list {
  direction: ltr; /* To keep numbers and hyphens ordered correctly */
  font-family: sans-serif; /* Better number rendering */
}

.separator {
  margin: 0 5px;
  color: #cbd5e1;
}

@media (max-width: 768px) {
  .contact-card-v2 {
    padding: 20px;
  }

  .card-details {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-header {
    flex-direction: row-reverse; /* Icon on right, text on left naturally in RTL, but flex row-reverse puts icon left? No. RTL: Start is Right. justify-between puts them at edges. */
    /* Let's keep it simple. */
  }
}

/* Footer */
.main-footer {
  background-color: #0f172a; /* Ebony */
  color: #cbd5e1; /* Geyser */
  padding: 80px 0 20px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 60px;
  border-bottom: 1px solid #334155;
  padding-bottom: 60px;
  margin-bottom: 30px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  margin-bottom: 24px;
}

.footer-logo .icon {
  font-size: 32px;
}
.footer-logo .text {
  display: flex;
  flex-direction: column;
}
.footer-logo .text strong {
  font-size: 20px;
}

.footer-col h4 {
  color: white;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 700;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a:hover {
  color: var(--secondary-red);
}

.footer-social {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.footer-social img {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.footer-social img:hover {
  opacity: 1;
}

.newsletter-form {
  display: flex;
  margin-top: 15px;
}

.newsletter-form input {
  flex: 1;
  padding: 10px;
  border-radius: 4px 0 0 4px;
  border: none;
  outline: none;
}

.newsletter-form button {
  background: var(--secondary-red);
  color: white;
  border: none;
  padding: 0 15px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

/* Responsive */
/* Responsive */
@media (max-width: 992px) {
  .about-grid,
  .values-grid,
  .services-grid,
  .stats-grid,
  .certs-grid,
  .footer-grid {
    /* grid-template-columns: repeat(2, 1fr);  -- Already existing */
    grid-template-columns: 1fr; /* Changing 992px breakpoint to 1fr for these grids might be too aggressive, but let's stick to the existing plan or improve it. Wait, the existing code had a 992px block and a 768px block. I should merge/append correctly. */
    /* Let's respect the existing 992px block and just append my new styles or modify the 768px block appropriately. */
  }

  /* The existing code had:
  @media (max-width: 992px) {
    .about-grid, ... { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) { ... }
  */
}

/* Mobile Menu Styles */
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 1001;
}

.mobile-menu-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--primary-blue);
  margin: 5px 0;
  transition: 0.3s;
}

/* Active state for hamburger */
.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  .about-grid,
  .values-grid,
  .services-grid,
  .stats-grid,
  .certs-grid,
  .footer-grid,
  .contact-info, /* Stack contact info on mobile */
  .stats-grid {
    /* Fix stats grid on mobile */
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .contact-info {
    align-items: center;
  }

  .top-bar .container {
    flex-direction: column;
    gap: 10px;
  }

  .mobile-menu-btn {
    display: block;
  }

  .main-nav {
    display: block; /* Override none from original code if it was none, but it wasn't. */
    position: fixed;
    top: 70px; /* Below header */
    left: 0;
    width: 100%;
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transform: translateY(-150%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
  }

  .main-nav.active {
    transform: translateY(0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .hero-title {
    font-size: 32px;
  }

  .d-none-mobile {
    display: none;
  }
}

/* Override Icon Colors for Uniformity & Gradient Hover Design */
.icon-box,
.icon-box.red,
.icon-box.blue,
.icon-box.blue-dark {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%) !important;
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3) !important;
  border: 4px solid white !important;
}

.icon-box img {
  filter: brightness(0) invert(1);
  transition: all 0.4s ease;
}

.value-card:hover .icon-box {
  background: white !important;
  transform: translateX(-50%) scale(1.1) translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}

.value-card:hover .icon-box img {
  filter: brightness(0) saturate(100%) invert(56%) sepia(68%) saturate(2788%)
    hue-rotate(326deg) brightness(101%) contrast(104%);
}