.id-card {
    width: 400px;
    height: 240px;
    background: linear-gradient(90deg, rgba(20,74,146,1) 0%, rgba(0,217,200,1) 100%); /* Dark blue background color */
    color: #ffffff; /* White text color */
    border: 2px solid #144a92; /* Darker blue border */
    border-radius: 10px 10px 10px 10px;
    padding: 15px 20px 25px 20px;
    margin: 1rem auto;
    display: grid;
    grid-template-columns: 120px 1fr; /* Divide into 120px and the rest of the available space */
    align-items: center; /* Center items vertically */
  }

  .avatar {
    width: 108px;
    /* height: 110px; */
    /* border-radius: 50%; */
  }
  .details00 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 20px;
    align-items: flex-start; /* Align items to the top */
  }

  .details {
    /* background-color: #ffffff; */
    border-radius: 10px;
    line-height:23px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 23rem;
    border: 1px solid #f9fafb ; 
    color: rgb(254, 253, 253);
    padding: 1rem;
  }

  .name {
    font-size: 24px;
    font-weight: bold;
  }

  .job-title {
    font-size: 18px;
    font-weight: bold;
  }

  .id-number {
    font-size: 14px;
    color: #bdc3c7; /* Light gray ID number color */
  }

  .horizontal-line {
    width: 100%;
    height: 2px;
    background-color: #1b263b; /* Dark blue color */
    margin: 10px 0;
  }

  .content{
    display: flex;
  /* justify-content: space-evenly; */
  }
  .head{
    width: 39%;
    }
  .col{
    width: 5%;
  }
  .data{
    width: 65%;
    max-width: 200px; /* Adjust the width as needed */
    overflow: hidden; /* To handle text overflow */
    white-space: pre-wrap; /* To preserve line breaks */
  }
  table{
    color: #ffffff;
  }
  @media screen and (min-width: 980px) {
    .avatar {
      width: 6.8rem !important;
      height: 6.8rem !important;
      margin-top: 1.8rem !important;
      margin-left: 0.75rem !important;
    }
    .details1 tbody{
      font-size: 0.8rem !important;
      font-weight: 600;
      line-height: 0.8rem !important;
    }
    .details2{
      margin-top: 8rem !important;
      margin-left: 1rem !important;
    }
    .details3{
      margin-top: 1.3rem !important;
      margin-left: 0.6rem !important;
    }
    .details1 tbody{
      font-size: 1rem !important;
      font-weight: 600;
      line-height: 1.3rem !important;
    }
  }

  @media screen and (max-width: 980px) {
    .vector_div{
      height: 28rem !important;
    }
    .vector{
      width: 18rem !important;
    }
    .id-card{
      width: 320px !important;
      height: 205px !important;
    }
    .name {
      font-size: 16px !important;
    }
    .details1 tbody{
      font-size: 0.8rem !important;
      font-weight: 600;
      line-height: 0.8rem !important;
    }
    .details1 {
      /* background-color: #ffffff; */
      width: 15rem !important;
      padding: 0.5rem 1rem 0.5rem 1rem !important;
    }
    /* .avatar1 {
      width: 3rem !important;
      height: 3rem !important;
    } */
    .details00 {
      line-height: 25px !important;
    }
    /* .data {
      width: 46%;
    }*/
    .head1 {
      height: 1.5rem !important;
    } 
    .img1{
      width: 21rem !important;
    }

  }

  .img1{
    width: 30rem;
  }
  .heading{
    font-size: 2rem;
    font-weight: 600;
    color: #0146a3;
  }