body {
     font-family: 'Inter', sans-serif;
     margin: 0;
     padding: 0;
 }

 /* ======= الهيرو ======= */
 .hero-section {
     background: linear-gradient(to right, #1e3a5c, #2a4b6c, #2dd4bf);
     padding: 6rem 1rem;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
 }

 .hero-content {
     max-width: 800px;
     opacity: 0;
     transform: translateY(-50px);
     animation: heroFadeIn 0.8s ease-out forwards;
 }

 .hero-title {
     font-size: 3rem;
     font-weight: bold;
     color: white;
     margin-bottom: 1rem;
 }      body {
    font-family: 'Tajawal', sans-serif !important;
}

/* Exclude icons from font changes */
.fas, .far, .fab {
    font-family: "Font Awesome 6 Free" !important;
}

 .hero-subtitle {
     font-size: 1.25rem;
     color: rgba(255, 255, 255, 0.9);
 }

 @keyframes heroFadeIn {
     from {
         opacity: 0;
         transform: translateY(-50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ======= قسم عن الشركة ======= */
 h1 {
     margin-top: 30px;
     color: #18bba4;
     text-align: center;
 }

 .about-content {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 20px;
     margin-top: 50px;
 }

 .about-content img {
     width: 250px;
     max-width: 100%;
     border-radius: 10px;
 }

 .about-content p {
     width: 100%;
     max-width: 800px;
     text-align: center;
 }

 .card {
     background-color: #f7f7f7;
     width: 90%;
     max-width: 1000px;
     border-radius: 20px;
     padding: 30px 20px;
     margin: 0 auto 50px;
 }

 /* ======= البطاقات المزدوجة ======= */
 .double-cards {
     display: flex;
     flex-direction: row;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
     max-width: 1150px;
     margin: 0 auto;
 }

 .card1,
 .card2 {
     flex: 1;
     min-width: 300px;
     padding: 25px;
     border-radius: 20px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     gap: 15px;
     color: white;
 }

 .card1 {
     background-color: #18bba4;
 }

 .card2 {
     background-color: #284052;
 }

 .image-text {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .image-text img {
     width: 60px;
     transition: 0.3s ease;
 }

 .image-text h2 {
     font-size: 1.5rem;
     margin: 0;
 }

 /* ======= الخريطة ======= */
 #map {
     width: 100%;
     height: 300px;
     margin: 50px 0;
 }

 /* ======= Responsive ======= */
 @media (max-width: 1024px) {
     .hero-title {
         font-size: 2.5rem;
     }

     .hero-subtitle {
         font-size: 1.125rem;
     }

     .card {
         width: 95%;
     }
 }

 @media (max-width: 600px) {
     .hero-section {
         padding: 4rem 1rem;
     }

     .hero-title {
         font-size: 2rem;
     }

     .hero-subtitle {
         font-size: 1rem;
     }

     .image-text img {
         width: 50px;
     }

     .image-text h2 {
         font-size: 1.3rem;
     }

     .about-content img {
         width: 200px;
     }

     .card1,
     .card2 {
         width: 95%;
         padding: 20px;
     }
 }

 .about-section {
     padding: 60px 20px;
     background-color: #f7f7f7;
 }

 .about-title {
     text-align: right;
     color: #18bba4;
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 40px;
 }

 .about-card {
     background: #ffffff;
     border-radius: 20px;
     padding: 40px 30px;
     max-width: 1100px;
     margin: 0 auto 50px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 25px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .about-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .about-card img {
     width: 200px;
     border-radius: 15px;
 }

 .about-card p {
     font-size: 1.125rem;
     color: #333;
     text-align: center;
     line-height: 1.7;
 }

 .double-cards {
     display: flex;
     justify-content: center;
     align-items: stretch;
     gap: 20px;
     flex-wrap: wrap;
     max-width: 1150px;
     margin: 0 auto;
 }

 .card1,
 .card2 {
     flex: 1;
     min-width: 300px;
     border-radius: 20px;
     padding: 25px;
     color: white;
     display: flex;
     flex-direction: column;
     gap: 15px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .card1 {
     background-color: #18bba4;
 }

 .card2 {
     background-color: #284052;
 }

 .card1:hover,
 .card2:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }

 .image-text {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .image-text img {
     width: 60px;
     transition: 0.3s ease;
 }

 .image-text h2 {
     font-size: 1.5rem;
     font-weight: 600;
 }

 .card1 p,
 .card2 p {
     font-size: 1rem;
     line-height: 1.6;
 }

 /* Responsive */
 @media (max-width: 1024px) {
     .about-title {
         text-align: center;
         font-size: 2rem;
     }

     .about-card {
         padding: 30px 20px;
     }

     .double-cards {
         flex-direction: column;
         align-items: center;
     }

     .card1,
     .card2 {
         width: 95%;
     }
 }

 @media (max-width: 600px) {
     .about-card img {
         width: 150px;
     }

     .image-text img {
         width: 50px;
     }

     .image-text h2 {
         font-size: 1.3rem;
     }

     .card1,
     .card2 {
         padding: 20px;
         font-size: 0.95rem;
     }
 }