:root {
      --navy: #1A3837;
      --gold: #F3C993;
      --sand: #C49A6C;
      --darkGreen: #184C49;
      --offWhite: #F2F9F9;
      --darkGray: #1A1C1C;
    }

    body {
      background-color: var(--offWhite);
  /* font-family: 'Cairo', sans-serif; */
      color: var(--darkGray);
        font-family: 'Tajawal', sans-serif;

    }
.animate-fadeIn {
      animation: fadeIn 1s ease forwards;
    }
    .animate-fadeInDown {
      animation: fadeInDown 1s ease forwards;
    }
    .animate-fadeInUp {
      animation: fadeInUp 1s ease forwards;
    }
    .delay-200 {
      animation-delay: 0.2s;
    }
    .delay-400 {
      animation-delay: 0.4s;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

#btn-whatsapp{
   box-shadow: 5px 10px 18px #888888;
    border: 1px solid lightgray;
    padding: 15px;
    border-radius: 15px;

}
     .active {
  background-color: var(--darkGreen);
  color: var(--gold);
  font-weight: bold;
}
.nav-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    display: block;
    transition: background 0.2s;
}
.nav-item:hover {
    background: var(--darkGreen);
}
.active {
    background: var(--darkGreen);
}