/* ABOUT page only */
.page-about{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* pushes footer to bottom */
.page-about .about-main{
  flex: 1;
  display: flex;
}

/* Hero section */
.about-hero{
  position: relative;
  width: 100%;
  flex: 1;
  padding: 56px 0 64px;
  overflow: hidden;
}

/* Soft faded background image */
.about-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,.90)),
    url("https://olympus-thea.gr/wp-content/uploads/2024/09/458601217_2262898854059897_1684404015735385737_n.jpg");
  background-size: cover;
  background-position: center;
}

/* Content above background */
.about-hero .container{
  position: relative;
  z-index: 1;
}

/* Title — NORMAL SIZE, LEFT ALIGNED */
.about-title{
  margin: 0 0 18px;
  font-size: 30px;          /* sane size */
  line-height: 1.25;
  font-weight: 600;
  color: var(--accent);
  text-align: left;         /* IMPORTANT */
}

/* Text block — NORMAL READING STYLE */
.about-text{
  max-width: 880px;
  margin: 0;                /* no auto-centering */
  text-align: left;         /* IMPORTANT */
  color: #111827;
}

/* Paragraphs — HUMAN EYES FRIENDLY */
.about-text p{
  margin: 0 0 14px;
  font-size: 15.5px;        /* normal website size */
  line-height: 1.65;        /* readable, not airy */
  font-weight: 400;
}

/* Mobile tweaks */
@media (max-width: 900px){
  .about-hero{
    padding: 40px 0 48px;
  }

  .about-title{
    font-size: 24px;
  }

  .about-text p{
    font-size: 15px;
    line-height: 1.6;
  }
}