:root {
  --main-color: #0b5da7;
  --second-color: #242122;
  --third-color: #b8b9bc;
  --fourth-color: #dbe2e2;
  --white-color: #ffffff !important;
  --black-color: #000000;
  --placeholder-color: #a1a1a1;
  --background: linear-gradient(135deg, var(--main-color), #0099ff);
  --background-hover: linear-gradient(90deg, var(--main-color), #0099ff);
  --shadow: 0 4px 10px rgba(11, 93, 167, 0.2);
}
@media (max-width: 992px) {
}
@media (max-width: 768px) {
  .section-title {
    position: relative;

    &::before {
      content: attr(data-text);
      position: absolute;
      top: 0px; /* نزول بسيط للأسفل عشان يبان خلف العنوان */
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: clamp(50px, 10vw, 100px); /* Responsive font-size */
      font-weight: 900;
      color: var(--main-color);
      opacity: 0.04; /* خفيف جدًا */
      white-space: nowrap;
      z-index: 1;
      pointer-events: none;
      text-transform: uppercase;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }
    &::after {
      content: "";
      width: 60px;
      height: 3px;
      background-color: var(--second-color);
      display: block;
      margin: 8px auto 0;
      border-radius: 2px;
    }
  }
  .hero .owl-nav {
    display: none;
  }
  .hero-content h1 {
    font-size: 2rem;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  }

  .hero-content p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: auto;
    line-height: 1.8;
  }
  .about img {
    height: 400px;
  }
  .about .section-title,
  .vision .section-title,
  .mission .section-title,
  .values .section-title {
    position: relative;
    &::before {
      content: attr(data-text);
      position: absolute;
      top: -10px;
      inset-inline-start: 0;
      margin-inline-start: -5px;
      transform: translateY(-50%);
      font-size: clamp(40px, 10vw, 100px);
      font-weight: 900;
      color: var(--main-color);
      opacity: 0.06;
      white-space: nowrap;
      z-index: 1;
      pointer-events: none;
      text-transform: uppercase;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }
  }
  .section-title {
    position: relative;
    &::before {

      top: -10px; 
  
    }
  }
}

@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}