body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0 8% 0 8%;
  background-color: #f4f4f4;
}

header {
  /*background-color: #333;*/
  /*color: #fff;*/
  padding: 0;
  text-align: center;
}

header h1 {
  margin: 0;
}

header p {
  margin: 0;
}

.intro, .training-topics, .contact, .testimonial, .contact-advisor {
  padding: 20px;
  margin: 20px;
  background-color: #fff;
}

h2 {
  color: #333;
}

.green {
    color: #90b228; /* Green color for the heading */
}

h3 {
  color: #666;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5px;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 10px;
  text-align: left;
}

.th {
  background-color:#333;
  color: white;
}

.table-header {
    background-color: #50545f; /* Green background for the header */
    color: white; /* White text color for the header */
}

.header-width1 {
    width: 40%;
}

.header-width2 {
    width: 10%;
}

.testimonial {
  background-color: #eee;
}

.bar {
    width: 1920px;
    max-width: 100%;
    padding-bottom:40px;
    margin:0;
}

.logo {
    max-width: 350px;
    height: auto;
}

/* Add styles for the inline images */
.inline-image {
  width: 29%; /* Adjust the width as needed */
  height: auto;
  padding-top: 10px;
  margin: 0 1%; /* Margin to space out the images */
  display: inline-block; /* Display images inline */
  vertical-align: middle; /* Align images vertically */
}

.contact-advisor {
  display: flex;
  justify-content: center;
}

.advisor-container {
  display: flex;
  flex-direction: column; /* Default: Stack elements vertically on mobile */
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.advisor-photo {
  width: 100%; /* Ensures full width on mobile */
  display: flex;
  justify-content: center; /* Center the image */
  margin-bottom: 15px; /* Space between image and text */
}

.photo {
  max-width: 260px; /* Adjust the size as needed */
  height: auto;
  border-radius: 50%; /* Optional: Makes the image circular */
}

.advisor-info {
  width: 100%; /* Ensures full width on mobile */
  padding: 0 20px;
}

/* For desktop and larger screens */
@media (min-width: 768px) {
  .advisor-container {
    flex-direction: row; /* Arrange items horizontally */
    text-align: left;
  }

  .advisor-photo {
    width: auto; /* Let the image maintain its natural width */
    margin-right: 30px;
    margin-bottom: 0;
  }

  .advisor-info {
    text-align: left;
  }
}


/*.contact-advisor {*/
/*  display: flex;*/
/*  align-items: center;*/
/*}*/

/*.advisor-container {*/
 /* display: flex; /* Use Flexbox to align items horizontally */
 /*/* align-items: center; /* Align items vertically in the center */
 /* margin-bottom: 20px; /* Add some space below the container */
/*}*/

/*.advisor-photo {*/
 /* flex: 0 0 auto; /* Do not grow or shrink the photo, keep its original size */
 /* margin-right: 30px; /* Add some space between the photo and the text */
/*  margin-left: 20px;*/
/*}*/

/*.photo {*/
 /* max-width: 200px; /* Adjust the size as needed */
/*  height: auto;*/
  /*border-radius: 50%; /* Optional: Makes the image circular */
/*}*/

/*.advisor-info {*/
  /*flex: 1; /* Allow the text to grow and take available space */
/*  margin-right: 20px;*/
/*}*/

.button {
  background-color:#333;
  color: white;
  font-size:24px;
  padding: 5px 20px;
}

.advisor-info p {
  font-size: 16px; /* Adjust the font size as needed */
  line-height: 1.6;
}

.fade-in-up {
    display: inline-block; /* Make images inline */
    opacity: 0; /* Start with the images invisible */
    transform: translateY(20px); /* Start 20px below their final position */
    animation: fadeUp 1.5s ease-out forwards; /* Apply the animation */
    animation-delay: var(--delay); /* Delay the animation for each image */
}

/* Keyframes for the fade-in-up animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Set different delays for each image */
img:nth-child(1) {
    --delay: 0s;
}

img:nth-child(2) {
    --delay: 0.5s;
}

img:nth-child(3) {
    --delay: 1s;
}