*{ box-sizing:border-box; }
body{ margin:0; font-family: Arial, Helvetica, sans-serif; color:#111; }

/* HEADER */
.site-header{ background:#000; position:sticky; top:0; z-index:50; }
.nav-wrap{
  max-width:1200px; margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; gap:18px;
}
.brand{ color:#fff; text-decoration:none; font-weight:800; letter-spacing:1px; margin-right:auto; }
.site-nav{ display:flex; gap:18px; }
.site-nav a{ color:#fff; text-decoration:none; font-weight:700; opacity:.9; }
.site-nav a.active{ color:#63cbd6; opacity:1; }
.cta-btn{
  background:#63cbd6; color:#000; text-decoration:none; font-weight:900;
  padding:12px 16px; border-radius:2px;
}

/* HERO */
.hero{
  position: relative;
  min-height: 80vh;              /* height of hero */
  background-image: url("../images/main-img-43.JPG");
 /* 👈 CHANGE IMAGE NAME */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.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 */
.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 */
.why-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:40px;
  align-items:start;
}
.why-text h2{ font-size:54px; line-height:1.05; margin:0 0 18px; }
.why-lead{ color:#63cbd6; font-size:24px; margin:0 0 18px; }
.why-body{ line-height:1.8; opacity:.9; }
.why-img img{
  width:105%;
  height: auto;
  object-fit:cover;
  border-radius:6px;
}
.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; }
.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 */
.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 */
.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); }
}

  
.colors .color-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:30px;
  justify-items:center;
}