/* =================== 1. العناوين والأقسام الأساسية =================== */
.art-card #article1-title {
    font-size: 30px;
    font-weight: 600;
  }
  
  /* =================== 2. الحاويات الرئيسية للمحتوى =================== */
  .contanier {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .content {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
  }
  
  .content1 img {
    width: 100%;
    max-width: 500px;
    margin: auto;
  }
  
  /* =================== 3. قائمة محتويات المقال (الجانب الأيمن) =================== */
  .side-list {
    padding: 1em;
    border-radius: 10px;
    line-height: 3;
  }
  
  /* =================== 4. مقالات .article2 =================== */
  .article2 {
    background-color: rgb(169, 172, 191);
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
  }
  
  .article2 .article2-content1 {
    width: 80%;
    background-color: aliceblue;
    padding: 3em;
  }
  
  .article2 .article2-content1 h1 {
    font-size: 2em;
    color: blue;
  }
  
  .article2 .article2-content1 img {
    border-radius: 10px;
    max-height: 400px;
    object-fit: cover;
    float: left;
    margin: 20px;
  }
  
  .article2 .article2-content1 table,
  .article2 .article2-content1 th,
  .article2 .article2-content1 td {
    border: 2px solid rgb(70, 11, 195);
    border-collapse: collapse;
  }
  
  .article2 .article2-content1 th,
  .article2 .article2-content1 td {
    padding: 8px;
  }
  
  .article2 .article2-content1 th {
    background-color: rgb(66, 123, 248);
    color: aliceblue;
    text-align: center;
  }
  
  .article2 .article2-content1 th:first-child,
  .article2 .article2-content1 td:first-child {
    background-color: rgb(66, 123, 248);
    color: aliceblue;
  }
  
  .article2 .article2-content1 h2 {
    font-size: 1.2em;
    color: blue;
  }
  
  /* =================== 5. أزرار المشاركة =================== */
  .share-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
  }
  
  .share-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    font-size: 22px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  
  .share-buttons a:hover {
    transform: scale(1.1);
  }
  
  .fb i {
    color: #0f0feb;
  }
  
  .wa i {
    color: #25D366;
  }
  
  .tw i {
    color: #1DA1F2;
  }
  
  /* =================== 6. الأسئلة الشائعة =================== */
  .faq-container {
    max-width: 800px;
    margin: auto;
  }
  
  /* =================== 7. نموذج التواصل =================== */
  .contact .tow {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  /* =================== 8. زر المشاركة المستقل =================== */
  .share-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgb(36, 12, 218);
    padding: 10px 10px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    
    
    
  }
  
  .share-button i {
    font-size: 14px;
    color: rgb(41, 7, 232);
  }
  
  .share-button:hover {
    background-color: #bccfe4;
  }
  
  /* =================== 9. الفوتر =================== */
  .footer-container {
    display: flex;
    flex-direction: column;
    gap: 2em;
    text-align: center;
  }
  
  /* =================== 10. الميديا كويري =================== */
  @media(min-width: 768px) {
    .contanier {
      flex-direction: row;
    }
  
    .content {
      flex-direction: row;
      flex: 3;
    }
  
    .side-list {
      flex: 1;
    }
  
    .footer-container {
      flex-direction: row;
      text-align: right;
    }
  }
  
  /* =================== 11. حركة الشريط =================== */
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
  
    100% {
      transform: translateX(-100%);
    }
  }
  .article2 .article2-content1 h3 {
    font-size: 1.2em;
    color:#0f0feb}

    /* زر المشاركة التلقائية  */
    #shareBtn {
      /* padding: 15px 30px; */
      /* background-color: #007BFF; */
      color: rgb(136, 128, 158);
      font-size: 18px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      margin-right: 40px;
    }

    #shareBtn:hover {
      /* background-color: #939aa1; */
    /* border: solid blue; */
    scale: 1.1;
  
  }