.home-page {
/* HOME HERO (image-based like About) */
.home-page .home-hero{
  width: 100%;
  overflow: hidden;
}

/* Desktop: looks like a hero banner */
@media (min-width: 769px){
  .home-page .home-hero{
    height: 550px;
  }
  .home-page .home-hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile: behave like About (no cropping, image scales naturally) */
@media (max-width: 768px){
  .home-page .home-hero{
    height: auto;
  }
  .home-page .home-hero-img{
    width: 100%;
    height: auto;      /* KEY */
    display: block;
  }
}


.home-page .hero-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
}
.hero-inner{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px;
  color:#fff;
}
.hero h1{
  margin:0 0 12px;
  font-size:72px;
  letter-spacing:1px;
}
.hero-sub{
  margin:0 0 22px;
  font-size:22px;
  letter-spacing:1px;
  opacity:.95;
}
.hero-btn{
  display:inline-block;
  background:#63cbd6;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  padding:14px 22px;
  border-radius:2px;
}

/* WRAP */
.home-page .wrap{ max-width:1200px; margin:0 auto; padding:70px 20px; }
.center{ text-align:center; margin:0 0 40px; font-size:52px; }
.sub{ margin-top:-20px; opacity:.75; }



/* WHY */
.home-page .split{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:40px;
  align-items:center;
}

.why-image img{
  width:100%;
  max-width:560px;
  height:auto;
  object-fit:cover;
  border-radius:6px;
  justify-self:end;
}

.btn{
  display:inline-block; margin-top:20px;
  background:#63cbd6; color:#fff; text-decoration:none;
  padding:14px 26px; font-weight:900; border-radius:2px;
}

/* ICON STRIP */
.icon-strip{ background:#fff; padding:30px 0; }
.icon-row{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:20px;
  align-items:start;
}
.icon-item{ text-align:center; font-weight:900; }
.home-page .icon-circle{
  width:120px; height:120px; border-radius:999px;
  background:#63cbd6;
  display:grid; place-items:center;
  margin:0 auto 16px;
  font-size:44px;
}
.icon-item p{ margin:0; line-height:1.15; }

/* DARK CARDS SECTION */
.cards-dark{ background:#000; color:#fff; }
.cards-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.dark-card{
  text-align:center;
  padding:0 10px;
}
.dark-card img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:2px;
  margin-bottom:18px;
}
.dark-card h3{ margin:0 0 10px; color:#63cbd6; font-size:34px; }
.dark-card p{ margin:0 0 20px; line-height:1.7; opacity:.9; }
.btn-outline{
  display:inline-block;
  border:2px solid #63cbd6;
  color:#63cbd6;
  text-decoration:none;
  font-weight:900;
  padding:12px 22px;
  border-radius:2px;
}







/* =========================
   MOBILE SWIPE for Our Services (2 cards visible)
========================= */
@media (max-width: 700px){
  .home-page .cards-dark .cards-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding: 8px 2px 12px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .home-page .cards-dark .dark-card{
    flex: 0 0 calc(50% - 7px); /* 2 cards visible */
    scroll-snap-align: start;
  }

  /* optional: hide scrollbar */
  .home-page .cards-dark .cards-grid::-webkit-scrollbar{
    height: 0;
  }

  /* images a bit shorter on mobile (optional) */
  .home-page .cards-dark .dark-card img{
    height: 160px;
  }

  /* smaller text on mobile (optional) */
  .home-page .cards-dark .dark-card h3{ font-size: 20px; }
  .home-page .cards-dark .dark-card p{ font-size: 12px; line-height: 1.4; }
  .home-page .cards-dark .btn-outline{ padding: 10px 12px; font-size: 12px; }
}











/* PROCESS */
.home-page .process{ background:#f6f7f8; }
.process-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:26px;
  align-items:start;
}
.p-card{
  background:#fff;
  border-radius:10px;
  padding:34px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  text-align:center;
}
.p-card.tall{ padding-bottom:60px; }
.p-icon{ font-size:46px; margin-bottom:18px; }
.p-card h3{
  color:#63cbd6;
  margin:0 0 12px;
  font-size:22px;
  font-weight:900;
}
.p-card p{ margin:0; line-height:1.7; opacity:.9; }


/* COLORS */
.home-page .colors{ background:#fff; }
.colors .color-grid{
  display:grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:30px;
  justify-items:center;
}
.swatch{ text-align:center; }
.swatch span{
  display:block;
  width:170px;
  height:170px;
  border-radius:999px;
  margin:0 auto 14px;
}
.swatch p{ margin:0; font-weight:900; }

/* RESPONSIVE FIX (only these 2 lines) */
@media (max-width: 1000px){
  .colors .color-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 650px){
  .colors .color-grid{ grid-template-columns: repeat(2, 1fr); }
}





/* ===== Arrows wrapper ===== */
.home-page .services-swiper{
  position: relative;
}