/*
Theme Name: Key Maker Ankit & Car Key
Theme URI: https://mepremjagtap.com
Author: PRDS - MePremJagtap
Author URI: https://mepremjagtap.com
Description: Premium single-page WordPress theme for Key Maker Ankit & Car Key - responsive, accessible, SEO-ready.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: keymaker-ankit
Tags: one-column, custom-logo, responsive-layout, animated-background, seo-ready, accessibility
*/

:root{
  --primary:#0b61a8;       /* main brand blue */
  --accent:#ffcc00;        /* CTA yellow */
  --muted:#6b7280;
  --bg:#f6f8fb;
  --card-bg:#ffffff;
  --radius:10px;
  --max-width:1200px;
  --gap:20px;
  --shadow: 0 6px 24px rgba(11,97,168,0.08);
  --transition: 250ms ease;
  --font-sans: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* ---------------- Header / Hero ---------------- */
.skip-link{
  position: absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{ left:8px; top:8px; width:auto; height:auto; padding:8px 12px; background:#000; color:#fff; z-index:9999; }

.site-header{
  background: linear-gradient(180deg, rgba(11,97,168,0.95), rgba(4,56,99,0.95));
  color:#fff;
  padding:28px 20px;
  position:relative;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
}

.site-brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.site-brand img{ height:64px; width:auto; display:block; border-radius:8px; background:rgba(255,255,255,0.06); padding:6px; }
.site-title{ font-size:1.4rem; margin:0; font-weight:700; letter-spacing:0.2px; }
.site-tagline{ margin:0; font-size:0.9rem; opacity:0.95; }

/* CTA buttons in header */
.header-ctas{ display:flex; gap:10px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#062020; border-radius:8px; padding:10px 14px;
  text-decoration:none; font-weight:600; box-shadow: 0 6px 18px rgba(3,27,39,0.06);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn:hover{ transform:translateY(-3px); box-shadow: 0 12px 36px rgba(3,27,39,0.12); }
.btn.secondary{ background:transparent; color: #fff; border:1px solid rgba(255,255,255,0.12); padding:9px 12px; }

/* hero */
.hero{
  max-width:var(--max-width);
  margin: 28px auto;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:var(--gap);
  padding: 36px 20px;
  align-items:center;
}
.hero-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92));
  padding:28px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero h1{ margin:0 0 12px; font-size:1.8rem; color:var(--primary); }
.hero p.lead{ margin:0 0 18px; color:var(--muted); }

/* small info column */
.hero-info{ padding:18px; border-radius:var(--radius); background:var(--card-bg); box-shadow:var(--shadow); }
.contact-block{ display:flex; flex-direction:column; gap:10px; }
.contact-block a{ text-decoration:none; color:var(--primary); font-weight:700; }

/* ---------------- Sections ---------------- */
.container{ max-width:var(--max-width); margin: 34px auto; padding:0 20px; }

.section{ margin-bottom:36px; }
.section h2{ color:var(--primary); margin:0 0 12px; font-size:1.1rem; border-left:4px solid var(--primary); padding-left:12px; display:inline-block; }

/* services slider */
.services-wrap{ position:relative; }
.services-slider{ display:flex; gap:14px; overflow:hidden; padding:8px 0; }
.service{
  min-width:280px; max-width:320px; background:var(--card-bg); padding:18px; border-radius:12px;
  box-shadow: 0 8px 22px rgba(12,36,64,0.06); transition: transform var(--transition);
}
.service h3{ margin:0 0 8px; color:var(--primary); }
.service p{ margin:0; color:var(--muted); }

/* slider nav */
.slider-nav{ display:flex; gap:8px; margin-top:12px; align-items:center; }
.slider-btn{ background:transparent; border:1px solid #e6eef9; padding:8px 10px; border-radius:8px; cursor:pointer; }

/* contact card */
.card{ background:var(--card-bg); padding:20px; border-radius:12px; box-shadow:var(--shadow); }
.form-row{ display:flex; gap:12px; flex-wrap:wrap; }
.form-field{ flex:1 1 220px; display:flex; flex-direction:column; gap:6px; }
label{ font-size:0.9rem; color:#0b2540; }
input[type="text"], input[type="email"], textarea{
  padding:10px 12px; border-radius:8px; border:1px solid #e6eef9; outline:none;
  font-size:0.95rem; background:#fff;
}
textarea{ min-height:120px; resize:vertical; }

/* small utilities */
.row{ display:flex; gap:var(--gap); flex-wrap:wrap; }
.col{ flex:1; min-width:220px; }

/* ---------------- Footer ---------------- */
.site-footer{ background:#021c2f; color:#c6d4df; padding:24px 20px; }
.footer-inner{ max-width:var(--max-width); margin:0 auto; display:flex; justify-content:space-between; gap:20px; align-items:center; flex-wrap:wrap; }
.footer-inner a{ color: #fff; text-decoration:none; }

/* responsive */
@media (max-width:980px){
  .hero{ grid-template-columns: 1fr; }
  .hero-info{ order: -1; }
  .header-inner{ flex-direction:column; gap:12px; align-items:start; }
  .services-slider{ padding-bottom:8px; }
}