/*------------------------------------
  BASIC PAGE SETUP SECTION
-------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f4f7fa 0%, #e8f4f8 100%);
}


/*------------------------------------
  OUR STORY SECTION
-------------------------------------- */
.our-story {
  text-align: left;
  margin: 0 auto;
  max-width: 100%;
  padding-top: 8rem;
  padding-bottom: 4rem;
  margin-left: 3vw;
  margin-right: 3vw;
}
.story-header {
  letter-spacing: var(--header-letter-spacing);
  color: var(--alt-text-color);
  font-size: var(--header-size);
  font-style: var(--header-font-weight);
  font-family: var(--header-font);
  text-align: center;
  padding-top: 1rem;
  margin-bottom: 4vh;
}
.story-text {
  font-size: var(--body-size);
  padding-top: 1vh;
  line-height: 1.6;
}


/*------------------------------------
  MEET OUR CAPTAIN SECTION
-------------------------------------- */
.meet-our-captain {
  background: var(--secondary-grey-bg);
  box-shadow: 
  0 2px 10px rgba(0,0,0,0.1),
  0 8px 40px rgba(0,0,0,0.05);
  margin-top: 3rem;
  padding-bottom: 4rem;
  text-align: center;
}
.content-wrapper {
  display: flex;
  gap: clamp(20px, 4vw, 40px);
  text-align: left;
}
.heading {
  font-size: var(--header-size);
  letter-spacing: var(--header-letter-spacing);
  color: var(--alt-text-color);
  font-weight: var(--header-font-weight);
  font-family: var(--header-font);
  padding-top: 2rem;
  margin-bottom: 4vh;
}
.captain-name {
  font-family: var(--subheader-font);
  font-size: var(--subheader-size);
  padding-left: 2rem;
  margin-bottom: 0.3rem;
}
.captain-title {
  font-style: var(--subheader-font-style);
  font-size: var(--body-size);
  margin-bottom: 4vh;
  margin-left: 2rem;
}
.captain-description {
  font-size: var(--body-size);
  padding-left: 2rem;
  line-height: 1.6;
}
.credentials-list {
  padding-left: 3rem;
  font-size: var(--body-size);
  line-height: 1.9rem;
}
.captain-image {
  width: auto;
  height: 55vh;
  border-radius: 12%;
  object-fit: cover;
  border: 4px solid #d0d0d0;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  margin-left: 3rem;
}


/*------------------------------------
  MISSION STATEMENT SECTION
-------------------------------------- */
.mission-statement {
  text-align: left;
  margin: 0 auto;
  max-width: 1100px;
  padding-bottom: 4rem;
  padding-top: 4rem;
}
.mission-header {
  letter-spacing: var(--header-letter-spacing);
  font-size: var(--header-size);
  color: var(--alt-text-color);
  font-weight: var(--header-font-weight);
  font-family: var(--header-font);
  text-align: center;
  margin-bottom: 4vh;
}
.mission-text {
  font-size: var(--body-size);
  line-height: 1.6;
  margin-bottom: 5.5vh;
}
.pillar h3,
.pillar p {
  text-align: center;
}
.pillar h3 {
  font-size: var(--subheader-size);
}
.pillar p {
  font-size: var(--body-size);
}


/*------------------------------------
 NOTABLE ACHIEVEMENTS SECTION
-------------------------------------- */
.achievements {
  background-color: var(--secondary-grey-bg);
  box-shadow: 
  0 2px 10px rgba(0,0,0,0.1),
  0 8px 40px rgba(0,0,0,0.05);
  text-align: left;
  margin: 0 auto;
  padding-bottom: 5vh;

}
.achievements-header {
  font-size: var(--header-size);
  color: var(--alt-text-color);
  font-weight: var(--header-font-weight);
  font-family: var(--header-font);
  text-align: center;
  margin-bottom: 4vh;
  padding-top: 2vh;
}
.achievements-container {
  background-color: var(--secondary-grey-bg);
  display: flex;
  justify-content: center;
  margin-left: 2vw;
  margin-right: 2vw;
}
.achievements-list {
  font-size: var(--body-size);
  line-height: 2.1rem;
}


/*------------------------------------
  NEXT STEPS SECTION
-------------------------------------- */
.next-step {
  text-align: left;
  margin: 0 auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.next-step-header {
  letter-spacing: var(--header-letter-spacing);
  font-size: var(--header-size);
  color: var(--alt-text-color);
  font-weight: var(--header-font-weight);
  font-family: var(--header-font);
  text-align: center;
  padding-bottom: 3vh;
  padding-top: 4vh;
}
.next-step-container {
  background-color: var(--secondary-grey-bg);
  max-width: 950px;
  min-height: 15vh;
  height: auto;  
  margin: 0 auto;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 3vh;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.button-txt-content {
  flex-direction: column;
  text-align: center;
  gap: 20px;
  display: flex;
  padding-top: 3rem;
  justify-content: space-evenly;
}
.button-txt-content p {
  color: var(--alt-text-color);
  font-weight: var(--body-font-weight);
  font-size: var(--body-size);
  padding-left: 1rem;
  padding-right: 1rem;
}
.button-txt-content a {
  display: inline-block;
  padding: 20px 34px;
  background-color: var(--primary-button-bg);
  color: var(--text-color);
  text-decoration: none;
  border-radius: 15px;
  font-weight: var(--button-font-weight);
  font-size: var(--body-size);
  transition: var(--button-hover-time);
  border: none;
  cursor: pointer;
}
.left:hover {
  color: var(--text-hover-orange);
  background-color: var(--button-hover-bg);
  transform: translateY(-2px);

}
.right:hover {
  color: var(--text-hover-orange);
  background-color: var(--button-hover-bg);
  transform: translateY(-2px);
}