#empname {
    display: flex; /* Align children in a row */
    align-items: center; /* Vertically center-align children */
  }
  
  #empname h3 {
    margin-right: 10px; /* Margin to the right of the h3 element */
  }
  
  #empname h5 {
    border: 1px solid lightgrey; /* Light grey border around h4 */
    padding: 2px 4px; /* Padding inside h4 */
    margin: 10; /* Remove default margin */
  }
  
/* Basic reset for list items */
.navsimple {
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    align-items: center; /* Center items vertically */
    padding: 10px 0; /* Vertical padding */
    border-bottom: 2px solid #ecebeb; /* Bottom border for the navbar */
    font-size: 16px; /* Increased font size */
}

.navsimple list {
    list-style: none; /* Remove default list styling */
    padding: 10px;
    margin: 0;
    margin-right: 1vw; /* Space between items */
    font-size: 18px; /* Increased font size */
    background-color: #eeeded;
    border-radius: 5px;
}

.navsimple list:last-child {
    margin-right: 0; /* Remove right margin for the last item */
}

.navsimple list:hover {
    background-color: #418f43; /* Background color on hover */
    color: white;
}

.navbelow {
    margin-top: 40px;
    display: flex;
    justify-content: flex-start; /* Align items to the start */
    align-items: center; /* Center items vertically */
    padding: 10px 0; /* Vertical padding */
    border-top: 2px solid #ecebeb; /* Bottom border for the navbar */;
    font-size: 16px; /* Increased font size */
}


.navbelow list {
    list-style: none; /* Remove default list styling */
    padding: 10px;
    margin: 0;
    font-size: 14px; /* Font size */
    background-color: #eeeded;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
}

.navbelow list:last-child {
    margin-right: 0; /* Remove right margin for the last item */
}

.navbelow list:hover {
    background-color: #418f43; /* Background color on hover */
    color: white; /* Text color on hover */
}


/* Main container */
.main {
    display: flex; /* Use Flexbox for layout */
    height: 100vh; /* Full viewport height, adjust as needed */
}

/* Vertical box on the left */
.vertical-box {
    width: 30%; /* Adjust width as needed */
    background-color: #f0f0f0; /* Light background color */
    border-right: 1px solid #ccc; /* Border to separate from the right side */
    height: 100%; /* Full height of the main container */
}

/* Container for horizontal boxes on the right */
.horizontal-container {
    display: flex; /* Use Flexbox for horizontal layout */
    flex-direction: column; /* Stack boxes vertically */
    width: 70%; /* Adjust width as needed */
}

/* Horizontal boxes on the right */
.horizontal-box {
    flex: 1; /* Allow boxes to grow and fill available space */
    background-color: #e0e0e0; /* Slightly darker background */
    border-bottom: 1px solid #ccc; /* Border to separate the boxes */
}

/* Remove border for the last horizontal box */
.horizontal-box:last-child {
    border-bottom: none;
}


.main {
    display: flex;
    justify-content: space-between;
    margin-left: 1%;
    margin-top: 2%;
    height: 100%;
}

.employee-card {
    width: 50%;
    height: 70%;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 50px;
    text-align: center;
    margin-right: 3%;
}

.additional-info {
    width: 50%;
    display: flex;
    flex-direction: column;
    margin-bottom: 3%;
    gap: 20px;
}

.info-section {
    margin: 10px 0; /* Adds space between lines if needed */
}

.info {
    display: flex;
    align-items: center;
    text-align: left; /* Aligns text inside the flex container to the left */
    margin: 5px 0; /* Adds space between each line */
}

.spacer {
    flex-grow: 1; /* Takes up the remaining space between the items */
}

.personal-info, .payment-details {
    background-color: #fff;
    
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.payment-details {
    margin-top: 1vw;
    border-color: #007bff;
    border: 1px solid #ddd;

}

.profile-image-container {
    display: flex;
    justify-content: center;
    width: 100%; /* Adjust as needed */
    position: relative;
}

.profile-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #007bff;
    position: relative;
    margin-bottom: 10px;
}

.employee-id {
    background-color: #f0f0f0;
    padding: 2px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 5px;
}

.employee-id span {
    font-size: 12px;
    color: #666;
}

.employee-name h2 {
    font-size: 24px;
    margin: 2px 0;
}

.employee-name p {
    font-size: 16px;
    color: #777;
    margin-bottom: 20px;
}
/* Clearfix for floating elements */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.section-title {
    font-weight: bold;
    margin: 20px 0 10px 0;
    font-size: 14px;
    color: #333;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    text-align: left;
}

.basicinformation {
    border-top: 1px solid #ccc; /* Simple line at the top */
    padding: 10px;
    margin: 10px 0;
    text-align: left;
}

.basicinformation p {
    margin: 5px 0;
}

.basicinformation > p {
    font-weight: bold;
    margin-bottom: 10px; /* Spacing between title and info sections */
}

.info-section1,
.info-section2 {
    display: inline-block;
    width: 45%; /* Adjust width as needed */
    vertical-align: top;
    text-align: left;
}

.info-section1 {
    float: left; /* Align to the left */
}

.info-section2 {
    float: right; /* Align to the right */
}

/* Ensure the clearfix is applied to the container */
.basicinformation::after {
    content: "";
    display: table;
    clear: both;
}

.officialinformation {
    border-top: 1px solid #ccc; /* Simple line at the top */
    padding: 10px;
    margin: 10px 0;
    text-align: left;
}

.officialinformation p {
    margin: 5px 0;
}

.officialinformation > p {
    font-weight: bold;
    margin-bottom: 10px; /* Spacing between title and info section */
}

.info-section3 {
    width: 100%; /* Full width for the single section */
    display: block; /* Ensure it takes the full width */
    text-align: left;
}