.hero {
  display: flex;
  background-image: url("../assets/images/hero-home.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: center;
  width: 100%;
  min-height: 100vh;
}
.heros {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
}
.footer {
  position: relative;
  background-image: url('../assets/images/footer.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 30px 0 10px;
  border-top: 1.5px solid rgba(0,0,0,0.15);
}
.heros-overlay {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.42);
}
.footer-overlay {
  position: absolute;
  inset:0;
  background:rgba(0,0,0,.42);
}
.faq-hero {
  background-image: url('../assets/images/faq.webp');
  background-size: cover;
  background-position: center;
}
.thehouse-hero {
  background-image: url('../assets/images/vagusta-house-aourir-mountain-view.webp');
  background-size: cover;
  background-position: center;
}
.theweek-hero {
  background-image: url('../assets/images/theweek.webp');
  background-size: cover;
  background-position: center;
}
.datesapply-hero {
  background-image: url('../assets/images/datesapply.webp');
  background-size: cover;
  background-position: center;
}
.about-hero {
  background-image: url('../assets/images/vagusta-founder-atlantic-coast-morocco.webp');
  background-size: cover;
  background-position: center;
}
.journal-hero {
  background-image: url('../assets/images/journal.webp');
  background-size: cover;
  background-position: center;
}
.post-travel-hero {
  background-image: url('../assets/images/hero-post-travel-depression.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.most-holidays-hero {
  background-image: url('../assets/images/hero-why-most-holidays.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.different-rhythm-hero {
  background-image: url('../assets/images/hero-a-different-rhythm.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.feels-different-hero {
  background-image: url('../assets/images/hero-why-surfing-feels-different.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.simple-structure-hero {
  background-image: url('../assets/images/hero-simple-structure.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.faq-intro{
  background-color: var(--bg-light);
  padding:120px 0 90px;
}
.section-faq {
  display: grid;
  background-color: var(--bg-light);
  grid-template-columns: 2fr 1fr;
  gap: 80px;
  min-height: 100vh;
}
.faq-question-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.faq-content-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.faq-section{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:30px;
  border-top:1px solid var(--line);
  align-items: center;
  text-align: left;
}
.faq-intro p{
  max-width:720px;
  margin:auto;
  text-align:center;
  font-size:1.15rem;
  color:var(--text-light);
  line-height:2;
}
.faq-image {
  position: relative;
  justify-items: center;
}
.faq-image img {
  position: relative;
  width: 40%;
  height: auto;
  object-fit: cover;
  display: block;
}
.section-dark {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--bg-dark);
  border-top: 1.5px solid rgba(0,0,0,0.15);
  padding: 40px 0;
}
.section-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--bg-light);
  border-top: 1.5px solid rgba(0,0,0,0.15);
  padding: 40px 0;
}
.apply-section{
  min-height: 100vh;
  display: flex;
  padding: 40px 0;
}
.apply-grid{
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  width: 70%;
  margin: 0 auto;
}
.apply-left{
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.apply-right{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.apply-fields {
  display: flex;
  text-align: left;
  gap: 12px;
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}