#skills_container {
    display: flex;
    flex-wrap: wrap;
  }

  .courses {
    margin: 10px 10px;
    padding: 10px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    color: white;
  }

  #bg-red {
    background-color: rgb(219, 6, 70);
  }

  #bg-primary {
    background-color: rgb(4, 157, 184);
  }
  .Desplay_data {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  #modal {
    z-index: 9999;
  }
  .Modal_Hidden {
    display: none;
  }

/* ---------------school style------------------ */

  .services_main:hover {
    background-color: #198754;
    color: white;
  }
  .services_main:hover .icon {
    color: white;
  }
  .icon {
    color: #198754;
  }




  /* ---------------allama iqbal open university style---------------------- */


  .main_container {
    padding: 5px;

  }

  .noto-nastaliq {
    font-family: "Noto Nastaliq Urdu", serif;
    /* font-optical-sizing: auto; */
    font-weight: 500;
    font-style: normal;
  }
  #marquee_container {
    background-color: orangered;
    color: white;
    font-size: larger;
    text-align: center;
    height: 60px;
    font-weight: 500;
    margin-top: 3px;
  }

  .marque {
    height: 100%;
    margin-top: 7px;
  }
  h1 {
    text-align: center;
  }

  .courses {
    background-color: rgb(4, 157, 184) !important;
    color: white;
  }

  .services_main {
    cursor: pointer;
  }

  .services_main:hover {
    background-color: #198754;
    color: white;
  }

  .services_main:hover .icon {
    color: white;
  }

  .icon {
    color: #198754;
  }

  .heading {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .card-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
  }

  #channel_container {
    margin-top: 20px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .channel_info {
    height: 100px;
    border: 1px solid rgb(164, 164, 164);
    width: 400px;
    font-size: 20px;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }

  #services_portal {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: auto;
    font-size: 25px;
    color: white;
    text-align: center;
    width: 50%;
  }

  #services_portal a {
    color: white;
  }
  #services_portal tr {
        background-color: orangered; 

  }

  table tr {
    border: none;
    border-bottom: 1px solid white;
    line-height: 40px;
    line-height: 50px;
  }

  #OnlineServicesContainer,#typing_Comp_services {
    align-items: center;
    font-size: 25px;
  }

  .img_container {
    width: 170px;
  }
  #input_field {
        width: 300px;
        height: 50px;
        font-size: large;
      }
      #res_table tr,
      #res_table td {
        border: 1px solid black;
      }
      #res_table tr {
        height: 50px;
      }
      #certificate_img {
        height: 100%;
        width: 100%;
      }
      #img_container{
          padding: 5px;
      }
      #course_selection, #Session{
        width: 300px;
        height: 50px;
        font-size: large;
      }
      .rollNo_detailContainer{
        display: flex;
        justify-content: center;
      }
    

#typing_Comp_services{
background-color: orangered;
color: white;
padding: 5px;

}
#Services_Container{
margin-top: 3px;
background-color: orangered;
color: white;
padding: 5px;
font-size: 25px;
text-align: center ;
}
  #OnlineServicesContainer a {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    display: block;
    text-align: center;
  }

  #services_main_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: 20px; */
    margin-top: 10px;
  }
  .services_Detaile{
    background-color: white;
    color: orangered;
    font-weight: 600;
    padding: 3px;
    border-radius: 5px;
  }

  #fb {
    color: rgb(0, 110, 255);
  }

  #yt {
    color: red;
  }

  #tiktok {
    color: black;
  }

  #twtr {
    color: rgb(0, 38, 255);
  }

  #insta {
    color: rgb(208, 41, 41);
  }

  @media (max-width:768px) {
    #channel_container {
      flex-direction: column;
    }

    .channel_info {
      height: 100px;
      border: 1px solid rgb(164, 164, 164);
      width: 300px;
    }

    #services_portal {
      width: 100%;
    }

    #OnlineServicesContainer {
      align-items: center;
      font-size: 15px;
    }
    .rollNo_detailContainer{
      display: block;
      
    }
  }



  /* ---------------academy style------------------ */


  .main_container {
    padding: 5px;
  }

  h1 {
    text-align: center;
  }

  .courses {
    background-color: rgb(4, 157, 184) !important;
    color: white;
  }

  .services_main {
    cursor: pointer;
  }

  .services_main:hover {
    background-color: #198754;
    color: white;
  }

  .services_main:hover .icon {
    color: white;
  }

  .icon {
    color: #198754;
  }

  .heading {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .card-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
  }

  #channel_container {
    margin-top: 20px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
  }

  .channel_info {
    height: 100px;
    border: 1px solid rgb(164, 164, 164);
    width: 400px;
    font-size: 20px;
    /* display: inline-block; */
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }

  #services_portal {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: auto;
    font-size: 20px;
    /* color: black; */
    text-align: center;
    width: 50%;
  }

  #services_portal tr {
    border: 1px solid rgb(0, 0, 0);
    line-height: 40px;
  }

  #OnlineServicesContainer {
    align-items: center;
    font-size: 25px;
  }

  #OnlineServicesContainer a {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    display: block;
    text-align: center;
  }

  #services_main_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
  }

  #fb {
    color: rgb(0, 110, 255);
  }

  #yt {
    color: red;
  }

  #tiktok {
    color: black;
  }

  #twtr {
    color: rgb(0, 38, 255);
  }

  #insta {
    color: rgb(208, 41, 41);
  }

  @media (max-width:768px) {
    #channel_container {
      flex-direction: column;
    }

    .channel_info {
      height: 100px;
      border: 1px solid rgb(164, 164, 164);
      width: 300px;
    }
    #services_portal {
    width: 100%;
  }
    #OnlineServicesContainer {
      align-items: center;
      font-size: 15px;
    }
  }