/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html, body {
    font-family: 'Noto Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #d5f5f2;
    color: #333;
    width: 100%;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #1d506a;
    color: white;
    font-family: 'Lexend', sans-serif;
}

.logo {
  font-size: 24px;
  text-decoration: none;
  color: white;
}

/* The actual timeline (the vertical ruler) */
#timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: none;
}

/* The actual timeline (the vertical ruler) */
#timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 6px solid #1d506a;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
  border-color: #1d506a;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  #timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .container::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

/* Make sure all circles are at the same spot */
  #left::after, #right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  #right {
    left: 0%;
  }
}


.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

banner-img {
  overflow: hidden;
  width: 100%;
  height: auto;
}

#main-body {
          background: radial-gradient(circle,rgba(109, 179, 207, 1) 0%, rgba(213, 245, 235, 1) 100%);
          text-align: center;
          height: 100vh;
}

      nav {
            display: flex;
            gap: 20px;
        }

        nav a {
            color: white;
            text-decoration: none;
            font-size: 18px;
        }

        nav active {
            font-weight: bold;
        }

        .hero {
            background: url('https://via.placeholder.com/1200x400') center/cover no-repeat;
            height: 33vh;
        }

        main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px 10%;
        }

        
        #central {
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center; 
          height: 100%;
          flex-grow: 1;
        }
        
        #central h1 {
          font-size: 96px;
        }

        .text-section {
            max-width: 60%;
        }

        h1 {
            font-size: 64px;
            font-family: 'Lexend', sans-serif;
            margin-bottom: 20px;
        }

        p {
            font-size: 24px;
            line-height: 1.6;
            font-family: 'Noto Sans', sans-serif;
        }

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

        .image-section img {
            width: 300px;
            height: auto;
            padding: 20px ;
        }

        .caption {
            font-size: 8px;
            font-family: 'Noto Sans', sans-serif;
            margin-top: 5px;
            color: #666;
        }
        
        .cta-button {
            background-color: #a7cecb;
            color: black;
            font-weight: bold;
            font-size: 28px;
            padding: 20px 40px;
            text-decoration: none;
            border-radius: 40px;
            display: inline-block;
            margin-top: 50px;
            font-family: 'Noto Sans', sans-serif;
        }
        .cta-button:hover {
          background-color: #0056b3;
        }
        .nav-button {
            background-color: #102836;
            color: white;
            font-weight: bold;
            font-size: 18px;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 40px;
            display: inline-block;
            margin-top: 50px;
            font-family: 'Noto Sans', sans-serif;
        }
        .nav-button:hover {
          background-color: #d5f5f2
        }
        footer {
            text-align: center;
            background-color: #1d506a;
            color: white;
            padding: 20px;
            margin-top: 100px;
            font-family: 'Noto Sans', sans-serif;
        }
        footer .about {
            font-size: 10px;
        }