body {
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 20px;
  margin: 0;
}
.navy {
  background-color: #000080;
  height: 30%;
  flex-direction: row;
  flex-basis: 100%;
  padding: 20px;
  color: white;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
h1 {
  font-size: 80px;
}
h2 {
  font-size: 55px;
}
h3{
  font-size: 40px;
}
h4 {
  font-size: 28px;
  font-weight: normal;
}

.light {
  background-color: lightblue;
  height: 20%;
  flex-direction: row;
  flex-basis: 100%;
  color: black;
  text-align: center;
  padding: 20px;
}
.foundersection {
  background-color: lightblue;
  padding: 20px;
  align-items: center;
}
#founders {
  height: 20%;
  display: flex;
  background-color: lightblue;
}
.foundersection h3 {
  text-align: center;
}
#metrics {
  background-color: lightblue;
  text-align: center;
}
.white{
  background-color: white;
  height: 20%;
  flex-direction: row;
  flex-basis: 100%;
  margin: 0 auto;
  color: black;
  text-align: center;
  padding: 20px;
}
.gold {
  background-color: gold;
  height: 20%;
  flex-direction: row;
  flex-basis: 100%;
  margin: 0 auto;
  color: black;
  text-align: center;
  padding: 20px;
}

.tab {
    text-align: center;  /* Centers the text inside the tab */
    padding: 0 20px;  /* Adds space inside each tab */
}

.tab.container {
	display:flex;
	justify-content:center;
}

.tab.container .tab {
    flex: 0 0 auto;  /* you can still use flex:1 also */
    text-align: center;  /* Centers the text inside the tab */
    padding: 14px 20px;  /* Adds space inside each tab */
    text-decoration: none;  /* Removes the underline from links */
    color: black;
    font-size: 20px;
    transition: 0.2s;  /* Smooth transition for hover effects */
}

/* Change background color when hovering over a tab */
.tab.container .tab:not(.active):hover {
    background-color: #000080;  /* Darker color when hovered */
    color: white;
}

/* Style the active tab */
.active {
    background-color: gold;
}

/* Style the tab content sections */
.tab-content {
    display: none;  /* Initially hides all tab content */
    padding: 30px;  /* Adds space inside the content area */
    border-top: 2px solid gold;
}

/* Show the first tab content by default */
.tab-content:first-child {
    display: block;
}
.text {
  width: 700px;
  margin: auto;
  display: flex;
  flex-direction: row;
}
.logo {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
}
.pic {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10%;
  flex-shrink: 0;
}

#finalButton {
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 20px;
  margin: 0;
  flex-basis: 100%;
  padding: 20px;
  border-radius: 15%;
  border: 2px solid gold;
  color: gold;
  background-color: navy;
}
.Btn {
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 20px;
  margin: 0;
  flex-basis: 100%;
  padding: 20px;
  border-radius: 15%;
  border: 2px solid gold;
  color: gold;
  background-color: navy;
}
#finalButton:hover {
  cursor:pointer;
}
#nextBtn:hover {
  cursor:pointer;
}
#nextBtn {
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 20px;
  margin: 0;
  flex-basis: 100%;
  padding: 20px;
  border: 2px solid gold;
  color: gold;
  background-color: navy;
  border-radius: 15%;
}
#myName, #myEmail, #myMessage {
  min-width: 310px;
}
#myName {
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 15px;
  margin: 0;
  color: gold;
  flex-basis: 100%;
  padding: 20px;
  border: 2px solid gold;
  background-color: navy;
  border-radius: 15%;
}
#myName::placeholder{
  color: gold;
}
#myEmail::placeholder {
  color:gold;
}
#myMessage::placeholder {
  color:gold;
}
#myEmail{
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 15px;
  margin: 0;
  flex-basis: 100%;
  padding: 20px;
  border: 2px solid gold;
  background-color: navy;
  border-radius: 15%;
  color: gold;
}
#myMessage {
  font-family: 'Playfair Display', serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 15px;
  margin: 0;
  flex-basis: 100%;
  padding: 20px;
  border: 2px solid gold;
  background-color: navy;
  border-radius: 15%;
  color: gold;
  height: 5lh;
}

.square {
  height: 5.5%;
  width: 5.5%;
}

@media screen and (max-width: 850px) {
  .text {
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
  }
  .tab-content {
    flex-wrap: wrap;
    flex-direction: column;
    width: 100%;
  }
  p {
    font-size: 34px;
  }
  h1 {
    font-size: 60px;
  }
  h2 {
    font-size: 45px;
  }
  h3 {
    font-size: 35px;
  }
  h4 {
    font-size: 34px;
  }
  #myName, #myEmail, #myMessage {
    font-size: 18px;
  }
  #finalButton, #nextBtn {
    font-size: 22px;
    padding: 25px;
  }
}

button, a {
  cursor: pointer;
}