@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

.melitos-about-page,
.melitos-about-page *{
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

.melitos-about-page{
  margin:0;
  color:#3b3b3b;
  background:#fff;
  overflow:hidden;
}

.melitos-about-page img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* GLOBAL */
.ma-wrap{
  width:min(1180px,92%);
  margin:auto;
}

.ma-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:#ff5a1f;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.ma-pill.dark{
  background:#1d1d1d;
}

.ma-title{
  margin:14px 0 12px;
  font-size:clamp(34px,5vw,68px);
  line-height:1;
  letter-spacing:-2px;
  color:#565656;
  font-weight:800;
}

.ma-title span,
.ma-orange{
  color:#ff4b16;
}

.ma-subtitle{
  max-width:760px;
  margin:0 auto;
  font-size:15px;
  line-height:1.8;
  color:#666;
}

.ma-btns{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:28px;
}

.ma-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  transition:.25s ease;
}

.ma-btn.primary{
  background:linear-gradient(135deg,#ff3d16,#ff8a00);
  color:#fff;
  box-shadow:0 14px 30px rgba(255,80,20,.28);
}

.ma-btn.light{
  background:#fff;
  color:#333;
}

.ma-btn:hover{
  transform:translateY(-3px);
}

/* HERO FIXED IMAGE OVERLAY */
.ma-hero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  padding:80px 0;
  color:#fff;
  overflow:hidden;
  background:#111;
}

.ma-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  z-index:1;
}

.ma-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.36),rgba(0,0,0,.18));
  z-index:2;
}

.ma-hero .ma-wrap{
  position:relative;
  z-index:3;
}

.ma-hero-content{
  max-width:740px;
}

.ma-hero h1{
  margin:16px 0 16px;
  font-size:clamp(42px,6vw,82px);
  line-height:.96;
  letter-spacing:-2px;
  color:#fff;
  font-weight:850;
}

.ma-hero h1 span{
  color:#ff6a21;
}

.ma-hero p{
  max-width:650px;
  font-size:16px;
  line-height:1.8;
  color:rgba(255,255,255,.9);
}

/* INTRO */
.ma-intro{
  padding:95px 0;
  background:#fff1e4;
}

.ma-intro-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
}

.ma-intro-text p{
  max-width:640px;
  font-size:15px;
  line-height:1.9;
  color:#676767;
}

.ma-image-stack{
  position:relative;
  min-height:430px;
}

.ma-main-img{
  height:390px;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.ma-float-card{
  position:absolute;
  right:0;
  bottom:20px;
  width:270px;
  background:#fff;
  padding:18px;
  border-radius:20px;
  box-shadow:0 24px 55px rgba(0,0,0,.18);
}

.ma-float-card h4{
  margin:0 0 8px;
  font-size:15px;
  color:#333;
}

.ma-float-card p{
  margin:0;
  font-size:12px;
  line-height:1.7;
  color:#666;
}

.ma-small-img{
  position:absolute;
  left:20px;
  bottom:0;
  width:190px;
  height:130px;
  border:6px solid #fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 35px rgba(0,0,0,.18);
}

/* VISION AND MISSION */
.ma-mission{
  padding:95px 0;
  background:#fff;
}

.ma-mission-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:42px;
  align-items:center;
}

.ma-tall-img{
  height:520px;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 22px 55px rgba(0,0,0,.14);
}

.ma-info-cards{
  display:grid;
  gap:24px;
}

.ma-info-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:24px;
  padding:34px;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.ma-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#ff5a1f;
  color:#fff;
  font-weight:900;
  margin-bottom:18px;
}

.ma-info-card h3{
  margin:0 0 12px;
  font-size:26px;
  color:#4c4c4c;
  line-height:1.15;
}

.ma-info-card p{
  margin:0;
  color:#666;
  font-size:14px;
  line-height:1.8;
}

/* VALUE */
.ma-value{
  padding:95px 0;
  background:#fff;
  text-align:center;
}

.ma-section-head{
  text-align:center;
  margin-bottom:45px;
}

.ma-section-head h2{
  margin:14px auto 10px;
  max-width:760px;
  font-size:clamp(32px,4vw,54px);
  line-height:1.08;
  letter-spacing:-1.4px;
  color:#5a5a5a;
  font-weight:850;
}

.ma-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.ma-card{
  background:#fff;
  border:1px solid rgba(255,91,31,.16);
  border-radius:20px;
  padding:28px 22px;
  text-align:left;
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  transition:.25s ease;
}

.ma-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px rgba(0,0,0,.1);
}

.ma-card h4{
  margin:14px 0 8px;
  color:#3f3f3f;
  font-size:16px;
}

.ma-card p{
  margin:0;
  color:#686868;
  font-size:13px;
  line-height:1.75;
}

/* STORY */
.ma-story{
  padding:95px 0;
  background:#fff6ed;
}

.ma-story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:58px;
  align-items:center;
}

.ma-story-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.ma-story-images .big{
  grid-row:span 2;
  height:420px;
  border-radius:26px;
  overflow:hidden;
}

.ma-story-images .small{
  height:200px;
  border-radius:22px;
  overflow:hidden;
}

.ma-story-text p{
  font-size:15px;
  line-height:1.9;
  color:#666;
}

/* JOURNEY */
.ma-journey{
  padding:95px 0;
  background:#fff1e4;
}

.ma-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.ma-step{
  background:#fff;
  border-radius:22px;
  padding:28px 22px;
  box-shadow:0 18px 40px rgba(0,0,0,.07);
}

.ma-step span{
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#1f1f1f;
  color:#fff;
  font-weight:900;
  margin-bottom:16px;
}

.ma-step h4{
  margin:0 0 9px;
  color:#444;
  font-size:17px;
}

.ma-step p{
  margin:0;
  font-size:13px;
  color:#666;
  line-height:1.75;
}

/* ANIMATED ADVENTURE STATS */
.ma-stats{
  position:relative;
  padding:90px 0;
  background:linear-gradient(135deg,#ff3d16,#ff8500);
  color:#fff;
  overflow:hidden;
}

.ma-stats:before{
  content:"ADVENTURE";
  position:absolute;
  top:-18px;
  left:-4%;
  font-size:clamp(90px,18vw,230px);
  line-height:.8;
  font-weight:900;
  color:rgba(255,255,255,.12);
  letter-spacing:-8px;
  white-space:nowrap;
  animation:maAdventureMove 12s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes maAdventureMove{
  from{
    transform:translateX(-40px);
    opacity:.08;
  }
  to{
    transform:translateX(70px);
    opacity:.16;
  }
}

.ma-stats-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:center;
}

.ma-stats-img{
  height:320px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.22);
}

.ma-stats h2{
  margin:0 0 14px;
  font-size:clamp(32px,4vw,52px);
  line-height:1.05;
  letter-spacing:-1.4px;
  color:#fff;
}

.ma-stats p{
  font-size:15px;
  line-height:1.85;
  color:rgba(255,255,255,.92);
}

.ma-number-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}

.ma-number{
  border:1px solid rgba(255,255,255,.45);
  border-radius:16px;
  padding:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}

.ma-number strong{
  display:block;
  font-size:28px;
  line-height:1;
}

.ma-number span{
  font-size:12px;
  opacity:.94;
}

/* GALLERY */
.ma-gallery{
  padding:95px 0;
  background:#fff;
  text-align:center;
}

.ma-gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:42px;
}

.ma-gallery-img{
  height:300px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.13);
}

/* PARTNER - LAST SECTION */
.ma-partner{
  padding:95px 0;
  background:linear-gradient(135deg,#ff4b16,#ff8500);
  color:#fff;
}

.ma-partner-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:55px;
  align-items:center;
}

.ma-partner-img{
  height:360px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 55px rgba(0,0,0,.2);
}

.ma-partner h2{
  margin:0 0 14px;
  font-size:clamp(32px,4vw,50px);
  line-height:1.08;
  letter-spacing:-1.2px;
  color:#fff;
}

.ma-partner p{
  color:rgba(255,255,255,.92);
  line-height:1.85;
  font-size:15px;
}

/* RESPONSIVE */
@media(max-width:950px){
  .ma-intro-grid,
  .ma-mission-grid,
  .ma-story-grid,
  .ma-stats-grid,
  .ma-partner-grid{
    grid-template-columns:1fr;
  }

  .ma-cards,
  .ma-steps{
    grid-template-columns:repeat(2,1fr);
  }

  .ma-gallery-grid{
    grid-template-columns:1fr;
  }

  .ma-gallery-img{
    height:360px;
  }
}

@media(max-width:620px){
  .ma-hero{
    min-height:620px;
    padding:60px 0;
  }

  .ma-title,
  .ma-hero h1{
    letter-spacing:-1px;
  }

  .ma-cards,
  .ma-steps,
  .ma-number-row,
  .ma-story-images{
    grid-template-columns:1fr;
  }

  .ma-story-images .big,
  .ma-story-images .small,
  .ma-tall-img,
  .ma-main-img,
  .ma-stats-img,
  .ma-partner-img{
    height:320px;
  }

  .ma-image-stack{
    min-height:auto;
  }

  .ma-float-card,
  .ma-small-img{
    position:relative;
    width:100%;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:16px;
  }

  .ma-small-img{
    height:210px;
  }

  .ma-stats:before{
    top:18px;
    left:-18%;
    letter-spacing:-4px;
  }
}