* {
  font-family: 'Roboto', sans-serif;
  margin: unset;
  padding: unset;
}
body {
background-image: url(https://images.unsplash.com/photo-1632341607222-ccdcd5904dae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80);
background-repeat: no-repeat;

}
section {
  background-color: rgba(7, 14, 119, 0.23);
  padding: 16px 208px;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  color: #F9FAF8;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.header ul {
  display: flex;
  list-style-type: none;
  gap: 24px;
}
.list a {
  font-size: 18px;
  color: #E5E7EB;
  text-decoration: none;
}
.subheader {
  gap: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 112px 0;
}
.subheader .subtitle {
  font-size: 18px;
  color: #E5E7EB;
  padding-bottom: 10px;
}
.subheader .right {
  width: 50%;
}
#title {
  color: #F9FAF8;
  font-weight: bolder;
  font-size: 48px;
  padding-bottom: 13px;
}
.subheader button {
  width: 120px;
  background-color: rgba(9, 29, 88, 0.67);
  border-radius: 8px;
  border: none;
  padding: 7px;
  color: #E5E7EB;
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
}
section1 h2 {
  text-align: center;
  font-size: 36px;
  padding: 40px;
  color: grey;
}
section1 .subtext {
display: flex;
justify-content: center;
align-items: baseline;
gap: 70px;
}
.subtext .photos {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 250px;
}
.subtext img {
padding: 30px 0 20px 0;
width: 300px;  
}
section1 a:link {
color: grey;
text-decoration: none;
font-size: 18px;
}
footer a:visited {
color: gray;
}
section2 {
display: flex;
flex-direction: column;
justify-content: center;
padding: 112px 208px;
background-color: rgba(215, 216, 219, 0.67);
margin: 120px 0 20px 0;
}
.quote {
font-style: italic;
font-size: 32px;
color: gray;
}
section2 .from p {
font-weight: bolder;
font-size: 24px;
color: black;
float: right;
padding: 5px;
}
section3 {
display: flex;
justify-content: center;
align-items: center;
padding: 80px 208px;
}
#container {
display: flex;
justify-content: space-around;
align-items: center;
background-color: rgba(15, 33, 88, 0.41);
padding: 48px;
width: 100%;
border-radius: 10px;
}
.sign {
width: 120px;
background-color: transparent;
border-radius: 8px;
border: 2px solid #E5E7EB;
padding: 7px;
color: #E5E7EB;
font-weight: bold;
font-size: 18px;
cursor: pointer;
}
.cta h3 {
font-weight: bolder;
font-size: 24px;
color: #F9FAF8;
}
.cta p { 
font-size: 18px;
color: #F9FAF8;
}
footer {
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(9, 29, 88, 0.67);
color: #F9FAF8;
padding: 40px 0;
gap: 24px;
}
footer a:link {
color: white;
}
footer a:visited {
color: gray;
}