/* ============================================================
   home.css — styles used only by index.php
   ============================================================ */

/* ===== Welcome (full-width card style) ===== */
.welcome{
  background:#edf1f6;
  padding:80px 40px 90px;
  text-align:center;
}
.welcome-eyebrow{
  font-size:1rem;
  font-weight:600;
  color:#7a8694;
  margin:0 0 12px;
}
.welcome-heading{
  font-size:clamp(2rem, 4vw, 3rem);
  font-weight:800;
  letter-spacing:.4px;
  margin:0 0 16px;
}
.welcome-heading .w-dark{color:#14181d;}
.welcome-heading .w-blue{color:#1a5fb4;}
.welcome .welcome-sub{
  color:#6d7885;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  margin:0 auto 56px;
}

/* Cards row — stretches across the full screen */
.welcome-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:36px;
  width:100%;
  max-width:1800px;
  margin:0 auto;
}
.welcome-card{
  background:#ffffff;
  border-radius:16px;
  padding:52px 36px 44px;
  box-shadow:0 6px 24px rgba(20,40,70,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.welcome-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(20,40,70,.10);
}
.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border-radius:50%;
  background:#1a5fb4;
  color:#fff;
  margin-bottom:30px;
}
.card-icon svg{width:34px;height:34px;}
.card-title{
  font-size:1.35rem;
  font-weight:800;
  color:#14181d;
  margin:0 0 16px;
}
.card-title span{color:#f5a623;}
.card-text{
  font-size:1.02rem;
  line-height:1.65;
  color:#6d7885;
  max-width:420px;
  margin:0 auto;
}
@media (max-width: 1024px){
  .welcome-cards{grid-template-columns:1fr;gap:24px;max-width:640px;}
  .welcome{padding:64px 24px 72px;}
  .welcome-heading{font-size:1.7rem;}
}

/* ===== Services (alternating rows) ===== */
.services{padding:72px 0 40px;background:#fff;}
.service-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:44px 0;
}
.service-row + .service-row{border-top:1px solid #eef1f5;}
.service-row.reverse .service-media{order:2;}
.service-row.reverse .service-copy{order:1;}
.service-media img{
  width:100%;
  height:380px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(15,35,60,.10);
  display:block;
}
.service-copy h3{
  font-size:1.45rem;
  font-weight:800;
  color:#101828;
  margin:0 0 12px;
}
.service-copy .rule{
  width:100%;
  height:1px;
  background:#e4e9ef;
  border:0;
  margin:0 0 18px;
}
.service-copy p{
  color:#5b6b7c;
  line-height:1.7;
  margin:0 0 14px;
}
.service-copy p:last-child{margin-bottom:0;}
.service-copy .link-arrow svg{width:18px;height:18px;}
@media (max-width: 860px){
  .service-row{grid-template-columns:1fr;gap:24px;padding:32px 0;}
  .service-row.reverse .service-media{order:1;}
  .service-row.reverse .service-copy{order:2;}
  .service-media img{height:260px;}
}

/* ===== Why Choose Us ===== */
.why-choose{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
}
.why-media{background:#f3f0ec;}
.why-media img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  object-position:top center;
  display:block;
}
.why-panel{
  background:#fdf3dc;
  padding:64px 8vw 64px 56px;
}
.why-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.6rem;
  font-weight:800;
  color:#2b3440;
  margin:0 0 18px;
}
.why-title span{color:#f5a623;}
.why-q{width:26px;height:26px;flex:0 0 auto;}
.why-sub{
  font-size:1.15rem;
  font-weight:600;
  color:#3a4552;
  margin:0 0 8px;
}
.why-underline{
  display:block;
  width:96px;
  height:3px;
  background:#f5a623;
  border-radius:2px;
  margin-bottom:28px;
}
.why-list{list-style:none;margin:0;padding:0;}
.why-list li{
  display:flex;
  align-items:center;
  gap:18px;
  font-size:1rem;
  color:#2b3440;
  padding:14px 0;
}
.why-list li svg{
  width:32px;
  height:32px;
  flex:0 0 auto;
  color:#f5a623;
}
@media (max-width: 860px){
  .why-choose{grid-template-columns:1fr;}
  .why-media img{min-height:300px;height:300px;}
  .why-panel{padding:40px 24px;}
  .why-list li{padding:12px 0;}
}