body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
      color: #f5f5f5;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto;
      text-align: center;
    }
    header {
      background-color: rgba(15, 32, 39, 0.9);
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    header img {
      height: 50px;
      position: absolute;
      left: 10px;
    }
    .menu-icon {
      background-color: #e74c3c;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.3s;
      margin-left: auto;
    }
    .menu-icon:hover {
      background-color: #c0392b;
    }
    .menu-icon i {
      font-size: 24px;
      color: white;
    }
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 80px;
      right: 20px;
      background-color: rgba(15, 32, 39, 0.9);
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
      width: 200px;
      text-align: left;
      padding: 10px;
    }
    .dropdown-menu a {
      color: #f5f5f5;
      text-decoration: none;
      display: block;
      padding: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: background 0.3s;
    }
    .dropdown-menu a:hover {
      background-color: rgba(231, 76, 60, 0.2);
    }
    .buttons {
      display: flex;
      justify-content: space-around;
      gap: 30px;
      margin-top: 40px;
      flex-wrap: wrap;
    }
    .button {
      background-color: #e74c3c;
      padding: 20px 40px;
      border-radius: 30px;
      border: none;
      color: #fff;
      font-size: 1.5em;
      font-weight: bold;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
      transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
      cursor: pointer;
    }
    .button:hover {
      background-color: #c0392b;
      transform: translateY(-5px);
      box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);
    }
    .content {
      padding: 10px;
      background-color: rgba(15, 32, 39, 0.8);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
      border-radius: 15px;
      margin: 10px;
    }
    h1 {
      color: #e74c3c;
      font-size: 2.8em;
    }
    h2, h3 {
      color: #e74c3c;
    }
    .features-section {
      margin-top: 40px;
      text-align: center;
      background: rgba(15, 32, 39, 0.7);
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
      border: 3px solid #e74c3c;
    }
    footer {
      padding: 20px;
      text-align: center;
      background-color: rgba(15, 32, 39, 0.9);
      color: #f5f5f5;
      box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.5);
    }
    ul {
      text-align: left;
      display: inline-block;
      margin: 20px auto;
      list-style-type: none;
      padding: 0;
    }
    ul li {
      background: rgba(255, 255, 255, 0.1);
      margin: 10px 0;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .features-section ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
      padding: 0;
    }

    .features-section ul li {
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid #e74c3c;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      padding: 15px;
      margin: 10px;
      width: calc(100% - 40px);
      max-width: 400px;
      text-align: center;
    }

    @media (min-width: 600px) {
      .features-section ul li {
        width: calc(50% - 40px);
      }
    }

    @media (min-width: 992px) {
      .features-section ul li {
        width: calc(33.333% - 40px);
      }
    }

    .features-section ul li strong {
      display: block;
      font-size: 1.2em;
      color: #e74c3c;
      margin-bottom: 10px;
    }

    .features-section {
      padding: 20px;
      background: rgba(15, 32, 39, 0.8);
      border-radius: 99px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }

  
  /* تعريف ألوان لكل مدينة ودولة بناءً على أسماء الفئات */
.city-button.aleppo {
  background-color: #E91E63;
}
.city-button.damascus {
  background-color: #33c1ff;
}
.city-button.homs {
  background-color: #f39c12;
}
.city-button.hama {
  background-color: #28a745;
}
.city-button.latakia {
  background-color: #8e44ad;
}
.city-button.deirezor {
  background-color: #e74c3c;
}
.city-button.suwayda {
  background-color: #3498db;
}
.city-button.raqqa {
  background-color: #5a2ecc;
}
.city-button.hasakeh {
  background-color: #9b59b6;
}
.city-button.daraa {
  background-color: #16a085;
}
.city-button.tartous {
  background-color: #4b4a99;
}
.city-button.qaniata {
  background-color: #34495e;
}
.city-button.jabla {
  background-color: #181819;
}
.city-button.idlib {
  background-color: #aaad44;
}

  .city-button.egypt {
    background-color: #E91E63;
  }
  .city-button.iraq {
    background-color: #FF9800;
  }
  .city-button.saudi-arabia {
    background-color: #4CAF50;
  }
  .city-button.sudan {
    background-color: #9C27B0;
  }
  .city-button.jordan {
    background-color: #00BCD4;
  }
  .city-button.kuwait {
    background-color: #FFEB3B;
  }
  .city-button.algeria {
    background-color: #673AB7;
  }
  .city-button.morocco {
    background-color: #3F51B5;
  }
  .city-button.united-arab-emirates {
    background-color: #CDDC39;
  }
  .city-button.syria {
    background-color: #F44336;
  }
  .city-button.yemen {
    background-color: #795548;
  }
  .city-button.somalia {
    background-color: #607D8B;
  }
  .city-button.lebanon {
    background-color: #2196F3;
  }
  .city-button.tunisia {
    background-color: #FF5722;
  }
  .city-button.qatar {
    background-color: #FFC107;
  }
  .city-button.palestine {
    background-color: #8BC34A;
  }
  .city-button.bahrain {
    background-color: #009688;
  }
  .city-button.oman {
    background-color: #673AB7;
  }
  .city-button.libya {
    background-color: #00E676;
  }
  .city-button.djibouti {
    background-color: #03A9F4;
  }
  .city-button.mauritania {
    background-color: #D32F2F;
  }
  .city-button.comoros {
    background-color: #7B1FA2;
  }
  
  
  
  
  
    .city-button {
    display: inline-block;
    padding: 10px 15px;
    margin: 10px;
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }


 .city-button {
      padding: 15px 30px;
      margin: 10px;
      border-radius: 15px;
      color: white;
      font-size: 1.2em;
      transition: background 0.3s, transform 0.3s;
      cursor: pointer;
    }








/* ألوان كل مدينة */
.city-button.cairo { background-color: #FF6B6B; }
.city-button.alexandria { background-color: #4D96FF; }
.city-button.giza { background-color: #FFD166; }
.city-button.port-said { background-color: #06D6A0; }
.city-button.suez { background-color: #EF476F; }
.city-button.mansoura { background-color: #8338EC; }
.city-button.zagazig { background-color: #FFBE0B; }
.city-button.aswan { background-color: #3A86FF; }
.city-button.luxor { background-color: #FFD700; }
.city-button.tanta { background-color: #06B49A; }
.city-button.ismailia { background-color: #FF5733; }
.city-button.assiut { background-color: #5A20CB; }
.city-button.beni-suef { background-color: #8D99AE; }
.city-button.fayoum { background-color: #EF476F; }
.city-button.damietta { background-color: #00BBF9; }
.city-button.sharm-el-sheikh { background-color: #FF9F1C; }
.city-button.hurghada { background-color: #1A535C; }
.city-button.minya { background-color: #FFADAD; }
.city-button.qena { background-color: #9B5DE5; }
.city-button.damanhour { background-color: #FF8552; }
.city-button.el-mahalla { background-color: #00A676; }
.city-button.sohag { background-color: #C9CBA3; }
.city-button.kafr-el-sheikh { background-color: #3D5A80; }
.city-button.marsah-matruh { background-color: #F4A261; }
.city-button.arish { background-color: #2A9D8F; }


/* ألوان مريحة للعين  */

.city-button.soft-sky { background-color: #A2D5F2; color: #FFFFFF; }
.city-button.pale-rose { background-color: #F2A2B0; color: #FFFFFF; }
.city-button.mint-cream { background-color: #D5F2E3; color: #333333; }
.city-button.calm-beige { background-color: #F2E2C4; color: #333333; }
.city-button.pastel-violet { background-color: #B9A2F2; color: #FFFFFF; }
.city-button.mellow-yellow { background-color: #F2E09C; color: #333333; }
.city-button.iced-lavender { background-color: #D9C2F2; color: #333333; }
.city-button.seafoam { background-color: #A2F2C2; color: #333333; }
.city-button.soft-grey { background-color: #C4C4C4; color: #333333; }
.city-button.baby-blue { background-color: #A2CFF2; color: #333333; }
.city-button.soft-green { background-color: #A2F2A2; color: #333333; }
.city-button.soft-orange { background-color: #F2B28C; color: #333333; }
.city-button.light-purple { background-color: #C2A2F2; color: #FFFFFF; }
.city-button.sand-yellow { background-color: #F2D7A2; color: #333333; }
.city-button.rose-pink { background-color: #F2A2A2; color: #FFFFFF; }
.city-button.golden-yellow { background-color: #F2C94C; color: #333333; }
.city-button.cool-teal { background-color: #A2F2D0; color: #333333; }
.city-button.light-brown { background-color: #D5B2A2; color: #333333; }
.city-button.sky-purple { background-color: #B0A2F2; color: #FFFFFF; }
.city-button.soft-pink { background-color: #F2A2D0; color: #333333; }
.city-button.lavender { background-color: #D6A2F2; color: #FFFFFF; }
.city-button.coral-red { background-color: #F2786D; color: #FFFFFF; }
.city-button.grey-blue { background-color: #A2B8F2; color: #FFFFFF; }