.custom-container {
  border: 1px solid #ccc;
  padding: 1rem;
  position: relative;
  margin: 2rem auto; /* Center the container with top/bottom margin */
  max-width: 90%; /* Set a maximum width for the container */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for elevation */
  border-radius: 8px; /* Optional: add rounded corners */
  margin-bottom: 5rem;
}
.custom-container .header {
	position: absolute;
  top: -1rem;
	padding: 0.2rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	color: white;
	background: #0C356A;
	border-radius: 50rem;
	box-shadow: 7px 11px 15px 0px rgba(0, 0, 0, 0.25);
}
.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem; /* Padding for left and right */
  margin-right: 2rem;
}
.content .text {
  margin-right: 2rem;
  text-align: justify; /* Justify the text */
  margin-left: auto; /* Push the text content towards the right */
  
  flex: 0 0 65%;
}
.content .image {
  flex: 0 0 32%;
  padding-right: 4rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.content img {
  
  max-width: 100%;
  height: auto;
  border: 4px solid #f0f0f0; /* Add a light frame around the image */
  border-radius: 8px; /* Smooth the corners of the frame */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add shadow for a nice elevation effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}
.content img:hover {
  transform: scale(1.05); /* Slightly enlarge the image on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Add a more pronounced shadow on hover */
}
/* Media query for smaller screens */
@media (max-width: 768px)

{
  .custom-container{
    margin-left: 1rem;
    margin-right: 1rem;
  } 
  .content {
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align items to the left */
  }
  .content .text {
    flex: 0 0 auto;
    width: 100%; /* Take full width */
    margin-top: 2rem;
    margin-bottom: 1rem; /* Add space between text and image */
  }
  .content .image {
    flex: 0 0 auto;
    width: 100%; /* Take full width */
  }
  .content img {
    margin: 0 auto; /* Center the image horizontally */
  }
}
   table {
      width: 100%; /* Ensure the table uses full width of the container */
      border-collapse: collapse; /* Remove gaps between table cells */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for a polished look */
    }
    th, td {
      border: 1px solid #ccc; /* Add border to cells */
      padding: 1rem; /* Add padding for spacing */
      text-align: center; /* Center-align the text in table cells */
    }
    th {
      background-color: #2185d0; /* Blue background for table headers */
      color: white; /* White text color */
    }
    tr:nth-child(even) {
      background-color: #f9f9f9; /* Light background for even rows */
    }
    tr:hover {
      background-color: #f1f1f1; /* Highlight row on hover */
    }
/* old css */
table {
  width: 100%; /* Ensure the table uses full width of the container */
  border-collapse: collapse; /* Remove gaps between table cells */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for a polished look */
}
th, td {
  border: 1px solid #ccc; /* Add border to cells */
  padding: 1rem; /* Add padding for spacing */
  text-align: center; /* Center-align the text in table cells */
}
th {
  background-color: #2185d0; /* Blue background for table headers */
  color: white; /* White text color */
}
tr:nth-child(even) {
  background-color: #f9f9f9; /* Light background for even rows */
}
tr:hover {
  background-color: #f1f1f1; /* Highlight row on hover */
}

.part p {
  font-size: 0.95rem;
  justify-content: left;
  width: 50%;
  display: flex;
  color: #3a3a3a;
  font-weight: 400;
  line-height: 1.5;
}
.part {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 3rem;
}
.heading{
  position: relative;
  top: -150px;
}

.wrap-fix {
  margin-top: 3rem;
    /* margin: auto; */
}

/* .wrap-fix img {
  height: 300px;
  padding-top: 2rem;
  padding-bottom: 2rem;
} */

@media (max-width: 990px) {
    .part {
        flex-direction: column;
    }
    .part p {
        width: auto;
    }
    #small-screen-reverse-col {
        flex-direction: column-reverse;
    }
    .wrap-fix {
        /* width: 80vw; */
    }

}