.hero {
 position: relative;
 width: 100%;
 background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
  url("../../assets/images/header.jpg");
 background-size: cover;
 background-position: center bottom;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
}

.hero-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 height: 100vh;
 color: #ffffff;
}

.logo-img {
 position: absolute;
 width: 100px;
 top: 22px;
 right: 20px;
}

.hero-content .subtitle {
 font-family: "Raleway", sans-serif;
 font-weight: 700;
 font-size: 16px;
 line-height: 1.3em;
 margin-bottom: 16px;
 color: #ffffff;
}

.hero-content h1 {
 font-family: "Playfair Display", serif;
 font-weight: 400;
 font-size: 40px;
 line-height: 1.33em;
 margin: 0;
}

/* About section styles */
.about {
 padding: 40px 0;
 background-color: #ffffff;
}

.about-content {
 display: flex;
 flex-direction: column;
 gap: 60px;
}

.text-block {
 display: flex;
 flex-direction: column;
 gap: 24px;
}

.text-block p {
 font-family: "Raleway", sans-serif;
 font-weight: 400;
 font-size: 16px;
 line-height: 1.5em;
 color: #292b33;
 margin: 0;
}

.highlight-text {
 text-align: center;
 display: flex;
 flex-direction: column;
 gap: 16px;
}

.highlight-text .question {
 font-family: "Raleway", sans-serif;
 font-weight: 400;
 font-size: 20px;
 line-height: 1.3em;
 color: #292b33;
 margin: 0;
 text-align: center;
}

.highlight-text .emphasis {
 font-family: "Playfair Display", serif;
 font-weight: 700;
 font-size: 28px;
 line-height: 1.33em;
 color: #292b33;
 margin: 0;
 text-align: center;
}

.stats-container {
 display: grid;
 grid-template-columns: 1fr;
 gap: 12px;
 width: 100%;
}

.stat-card {
 display: flex;
 flex-direction: column;
 gap: 38px;
 padding: 12px 24px;
 border-radius: 10px;
 width: 100%;
 box-sizing: border-box;
}

.stat-title {
 font-size: 36px;
 font-weight: 400;
 max-width: 1200px;
 margin: 0 auto;
}

.stat-card.pink {
 background-color: #476477;
}

.stat-card.blue {
 background-color: #7ab7d8;
}

.stat-card:nth-child(3) {
 background-color: #81c6b4;
}

.stat-card:nth-child(4) {
 background-color: #8d8cc4;
}

.stat-number {
 font-family: "Playfair Display", serif;
 font-weight: 700;
 font-size: 50px;
 line-height: 1.4em;
 color: #ffffff;
}

.stat-description {
 border-top: 2px solid #ffffff;
 padding: 12px 0;
}

.stat-description p {
 font-family: "Raleway", sans-serif;
 font-weight: 400;
 font-size: 16px;
 line-height: 1.5em;
 color: #ffffff;
 margin: 0;
}

.highlight-text .employees {
 max-width: 950px;
 margin: 0 auto;
 line-height: 32px;
}

/* Tablet styles */
@media (min-width: 768px) {
 .hero-content .subtitle {
  font-size: 35px;
 }

 .logo-img {
  top: 30px;
  right: 35px;
  cursor: pointer;
  width: 132px;
 }

 .hero-content h1 {
  font-size: 50px;
 }

 .about {
  padding: 80px 0;
 }

 .about-content {
  gap: 60px;
 }

 .text-block {
  gap: 40px;
 }

 .text-block p {
  font-size: 18px;
 }

 .highlight-text .question {
  font-size: 24px;
 }

 .highlight-text p {
  font-size: 26px !important;
 }

 .stat-title {
  text-align: center;
  font-size: 50px !important;
 }

 .highlight-text .emphasis {
  font-size: 35px !important;
 }

 .stats-container {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
 }

 .stat-card {
  min-height: 200px;
 }
}

/* Desktop styles */
@media (min-width: 1024px) {
 .hero-content h1 {
  font-size: 60px;
 }

 .about {
  padding: 180px 0;
 }

 .about-content {
  gap: 80px;
 }

 .text-block p {
  font-size: 20px;
  line-height: 1.3em;
 }

 .highlight-text .question {
  font-size: 26px;
  line-height: 1.23em;
 }

 .highlight-text .emphasis {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 35px;
  line-height: 1.17em;
 }

 .stats-container {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
 }

 .stat-card {
  min-height: 220px;
 }

 .stat-number {
  font-size: 60px;
 }
}

@media (min-width: 1200px) {
 .stats-container {
  gap: 32px;
 }

 .stat-card {
  min-height: 240px;
 }
}

/* Large desktop styles */
@media (min-width: 1440px) {
 .stat-number {
  font-size: 70px;
 }
}