body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  background: #f2f2f2;
  font-size: 1.1rem;
}

.container {
  max-width: 1200px; /* You can adjust this for desired width */
  margin: 0 auto; /* Centers the container */
  padding: 0 20px; /* Adds side padding */
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #333;
  color: #fff;
  padding: 1rem;
}

header .logo img {
  height: 60px; /* Adjust logo size */
}

nav {
  display: flex;
}

nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
}

section {
  text-align: center;
  padding: 20px 60px;
  background-color: #f9f9f9;
}

.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.hero-text {
  flex: 2; /* 2 parts out of 3 */
  padding-right: 40px;
}

.hero-image {
  flex: 1; /* 1 part out of 3 */
  text-align: right;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.hero h1 {
  font-size: 2rem; /* Adjust this value as needed */
  font-weight: bold;
  margin-bottom: 20px;
}

.sidekick {
  padding: 20px 150px;
}

.sidekick h1 {
  font-size: 1.6rem; /* Adjust this value as needed */
  font-weight: bold;
  margin-bottom: 20px;
}

.sidekick-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.team {
  padding: 20px 150px;
}

.team-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.team-text {
  flex: 4; /* 2 parts out of 3 */
  padding-right: 40px;
}

.team-image {
  flex: 1; /* 1 part out of 3 */
  text-align: right;
}

.team-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.archive {
  text-align: left;
  padding: 20px 300px;
}

.post {
  text-align: left;
  padding: 20px 300px;
}

.post h1 {
  font-size: 2rem; /* Adjust this value as needed */
  font-weight: bold;
  margin-bottom: 20px;
}

.post h2 {
  font-size: 1.5rem; /* Adjust this value as needed */
  font-weight: bold;
  margin-bottom: 20px;
}

.course {
  padding: 20px 150px;
}

.course-content {
  /* display: flex; */
  font-size: 1rem;
  align-items: center;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.course-outline {
  font-size: .85rem;
}

.service {
  padding: 20px 150px;
}

a {
  text-decoration: none; /* Remove the underline */
  color: #3498db; /* Set a custom color */
}

a:hover {
    color: #00008b; /* Change text color */
}

.rec-reading a {
      font-size: 1.1rem;
      text-decoration: none; /* Remove the underline */
      color: #3498db; /* Set a custom color */
      font-weight: bold; /* Make it bold */
      padding: 5px 10px; /* Add some padding */
      border-radius: 5px; /* Rounded corners */
      transition: all 0.3s ease; /* Smooth transition */
    }

/* Hover effect */
.rec-reading a:hover {
      /* background-color: #3498db; /* Change background */
      color: #00008b; /* Change text color */
    }

/* Active state */
.rec-reading a:active {
      color: #2980b9; /* Darker background when clicked */
    }

.justified-p {
    text-align: justify;
}

header a:hover {
      /* background-color: #3498db; /* Change background */
      color: #aaaaaa; /* Change text color */
    }

footer {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 1rem 0;
  margin-top: 0; /* Removes space between content and footer */
}

hr { 
    height: 1px; 
    background-color: #bbb; 
    border: none; 
} 

@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    text-align: center;
  }

  .hero-text, .hero-image {
    flex: 100%;
    padding: 20px 0;
  }

  .hero-image {
    text-align: center;
  }
}