:root{
  --bg:#0b1220;
  --bg-2:#0f172a;
  --surface:#0d1b2a;
  --muted:#e5e7eb;
  --text:#0f172a;
  --text-2:#475569;
  --brand:#1e90ff;
  --brand-2:#0ea5e9;
  --white:#fff;
  --card:#ffffff;
  --max:1200px;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,8,23,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:#ffffff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.muted{color:var(--text-2)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:999px;padding:.9rem 1.25rem;background:var(--brand);color:#fff;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
.btn.outline{background:transparent;border:2px solid rgba(15,23,42,.15);color:var(--text)}
.btn.pill{border-radius:9999px}
.tag{display:inline-block;font-size:.75rem;padding:.25rem .6rem;border-radius:999px;background:rgba(14,165,233,.12);color:#0369a1}
header.topbar{background:var(--bg);color:#cbd5e1;font-size:.9rem}
header.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.searchbar{display:flex;align-items:center;gap:.5rem;background:rgba(148,163,184,.15);padding:.55rem .75rem;border-radius:999px;width:min(420px,100%)}
.searchbar input{flex:1;border:0;outline:none;background:transparent;color:#e2e8f0}
.searchbar svg{opacity:.8}

/* NAV */
nav.main{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid #eef2f7}
nav .row{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand .logo{background:#111827;color:#fff;border-radius:8px;padding:.35rem .5rem;font-weight:800;letter-spacing:.5px}
.brand small{color:#64748b}
.menu{display:flex;gap:1rem;flex-wrap:wrap}
.menu a{padding:.5rem .8rem;border-radius:10px;color:#334155;font-weight:600}
.menu a.active, .menu a:hover{background:#eef2f7}
.actions{display:flex;align-items:center;gap:.75rem}



/* CATEGORY STRIP */
.categories{margin:40px auto}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.cat{position:relative;border-radius:16px;overflow:hidden;background:#0b1220;color:#fff}
.ph{aspect-ratio:16/10;background:linear-gradient(135deg,#1f2937,#0b1220)}
.cat span{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.9);color:#0f172a;padding:.4rem .6rem;border-radius:8px;font-weight:700}
.ph {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #1f2937, #0b1220);
  overflow: hidden; /* make sure image doesn’t spill out */
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop to fit */
  display: block;
}

/* INTRO HEADING */
.intro{margin:36px auto 10px;text-align:center}
.intro .eyebrow{letter-spacing:.2em;font-size:.75rem;color:#64748b;margin-bottom:10px}
.intro h2{font-size:clamp(1.2rem,2.8vw,2rem);margin:.2rem 0 1rem}
.intro p{max-width:680px;margin:0 auto;color:#64748b}

/* FEATURED ROW */
.featured{margin:26px auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid #eef2f7;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.card .ph{aspect-ratio:16/11;background:#e5e7eb}
.card .body{padding:14px}
.title{font-weight:700;margin:6px 0}
.price{font-weight:700}

/* SPLIT CTA */
.split{margin:60px auto;background:#f8fafc;border-radius:24px;overflow:hidden}
.split .wrap{display:grid;grid-template-columns:1.2fr 1fr}
.split .media{display:grid;grid-template-columns:1fr 1fr}
.split .tile{min-height:180px}
.split .tile .ph{height:100%;background:#e5e7eb}
.split .content{padding:38px}
.list{display:grid;gap:.5rem;margin:1rem 0 1.2rem;color:#475569}
.list li{display:flex;align-items:center;gap:.6rem}
.check{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(14,165,233,.15)}


/* Highlighted products list */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
margin-bottom: 60px;

  /* Center the grid content */
  justify-content: center;
}

.product {
  background: #f0f9ff;                /* light highlight */
  border-left: 4px solid #1e90ff;     /* left accent */
  border-right: 4px solid #1e90ff;    /* right accent */
  border-radius: 12px;
  padding: 16px 20px;
  cursor: default;
  /* Add a more visible blue shadow on the right */
  box-shadow: 6px 0 20px rgba(30,144,255,0.3); 
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Hover effect: lift + stronger blue shadow */
.product:hover {
  transform: translateY(-3px);
  box-shadow: 8px 4px 25px rgba(30,144,255,0.35);
}



/* Hide placeholder box */
.product .ph {
  display: none;
}

/* Muted category text */
.product .muted {
  font-size: 0.85rem;
  color: #475569;
  margin-bottom: 6px;
}

/* Service title */
.product .title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: #0f172a;
}

/* Price */
.product .price {
  font-weight: 600;
  color: #1e90ff;
}

/* Responsive: stack on smaller screens */
@media (max-width: 600px) {
  .products {
    grid-template-columns: 1fr;
  }
}


/* ABOUT US / TESTIMONIALS */
.testimonials{background:#f8fafc;padding:50px 0;border-top:1px solid #eef2f7;border-bottom:1px solid #eef2f7}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}
.quote{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:20px}
.quote h4{margin:0 0 10px;color:var(--text);font-size:1.1rem}
.profile{display:flex;align-items:center;gap:10px;margin-top:14px}
.avatar{width:40px;height:40px;border-radius:50%;background:#e2e8f0}

/* IMAGE STRIP */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:40px 0}
.strip .ph{aspect-ratio:4/3;background:#e5e7eb;border-radius:12px}

/* FEATURES ROW */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;margin:30px auto;width:100%;max-width:var(--max);padding:0 20px}
.feat{padding:18px}

/* CONTACT FORM */
.contact-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:800px;margin:0 auto}
.form-group{display:flex;flex-direction:column}
.form-group.full-width{grid-column:1/-1}
.form-group label{margin-bottom:5px;font-weight:600;color:var(--text)}
.form-group input, .form-group select, .form-group textarea{padding:12px 16px;border:1px solid #e2e8f0;border-radius:8px;font-size:16px;background:#fff}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none;border-color:var(--brand)}
.form-group textarea{resize:vertical;min-height:100px}

/* NEWSLETTER */
.newsletter{margin:60px auto;background:#f8fafc;border-radius:20px;padding:36px;border:1px solid #e5e7eb}
.nl-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.nl-input{display:flex;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:6px}
.nl-input input{border:0;outline:none;padding:.75rem 1rem;width:min(340px,70vw)}

/* FOOTER */
footer{background:#0b1220;color:#cbd5e1;margin-top:60px;width:100%}
.footer-top{padding:40px 0;border-bottom:1px solid rgba(148,163,184,.2)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:22px;width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.footer-grid h4{margin:0 0 10px;color:#e2e8f0}
.social{display:flex;gap:.6rem;margin-top:8px}
.social .dot{width:34px;height:34px;border-radius:50%;background:#111827}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 0;color:#94a3b8;font-size:.9rem;width:100%;max-width:var(--max);margin:0 auto;padding:12px 20px}

/* RESPONSIVE */
@media (max-width: 1100px){
  .products{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .split .wrap{grid-template-columns:1fr}
}
@media (max-width: 860px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .quotes{grid-template-columns:1fr}
  .features{grid-template-columns:1fr;padding:0 20px}
  .products{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .menu{display:none}
  .hero .arrow{display:none}
  .cards{grid-template-columns:1fr}
  .products{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .features{padding:0 20px}
  .contact-form-grid{grid-template-columns:1fr}
}