/*
Theme Name: Hyundai Test Drive
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: Hyundai "Book a Test Drive" landing page ko WordPress theme me convert kiya gaya hai. Menu, Logo aur Favicon Customizer se set karein.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hyundai-testdrive
*/

:root{
    --honda-red:#002c5f;
    --honda-red-dark:#001c3d;
    --ink:#101214;
    --paper:#f7f6f4;
    --card:#ffffff;
    --muted:#6b6f76;
    --line:#e6e4e0;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
   font-family: "Poppins", sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
  }
  a{text-decoration:none;color:#fff;}

  /* Header */
  header{
    background:#fff;
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
  }
  .header-inner{
    max-width:1180px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:.3px;}
  .logo span.red{color:var(--honda-red);}
  .cta-btn{
    background:var(--honda-red);color:#fff;padding:10px 22px;border-radius:6px;
    font-weight:700;font-size:14px;border:none;cursor:pointer;transition:.2s;
  }
  .cta-btn:hover{background:var(--honda-red-dark);}
.banner img{
  width: 100%;
}
  /* Hero / Offers */
  .hero{
    background:linear-gradient(135deg,var(--ink) 0%,#062544 60%,var(--honda-red-dark) 130%);
    color:#fff;padding:60px 20px 50px;
  }
  .hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start;}
  .eyebrow{
    display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    padding:5px 14px;border-radius:30px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px;
  }
  h1.headline{font-size:38px;font-weight:800;line-height:1.15;margin-bottom:10px;}
  h1.headline .accent{color:#5b9bd8;}
  .sub-benefit{font-size:17px;color:#f1d9d9;margin-bottom:26px;}
  .benefit-list{display:flex;flex-direction:column;gap:14px;margin-bottom:30px;}
  .benefit-item{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#efe9e9;}
  .benefit-item .tick{
    flex:0 0 20px;height:20px;width:20px;border-radius:50%;background:var(--honda-red);
    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;margin-top:2px;
  }
  .hero-cta{
    display:inline-block;background:var(--honda-red);color:#fff;font-weight:700;padding:14px 34px;
    border-radius:6px;font-size:16px;box-shadow:0 8px 20px rgba(0,44,95,.35);
  }

  /* Form Card */
  .form-card{
    background:var(--card);color:var(--ink);border-radius:14px;padding:28px 26px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .form-card h3{font-size:21px;font-weight:800;margin-bottom:4px;}
  .form-card .form-sub{color:var(--muted);font-size:13.5px;margin-bottom:20px;}
  .form-group{margin-bottom:14px;}
  .form-group label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
  .form-group input, .form-group select{
    width:100% !important;padding:11px 13px !important;border:1.5px solid var(--line) !important;border-radius:7px !important;font-size:12.5px !important;background:#fbfbfa !important;text-transform: uppercase !important;
  }
.form-group p br{display:none;}
  .form-group input:focus, .form-group select:focus{outline:2px solid var(--honda-red);border-color:var(--honda-red);}
  .submit-btn{
    width:100%;background:var(--honda-red);color:#fff;border:none;padding:13px;border-radius:7px;
    font-weight:800;font-size:15px;cursor:pointer;margin-top:6px;transition:.2s;
  }
  .submit-btn:hover{background:var(--honda-red-dark);}
  .secure-note{text-align:center;font-size:12px;color:var(--muted);margin-top:12px;}

  /* Lineup section */
  .lineup{max-width:1180px;margin:0 auto;padding:60px 20px;}
  .lineup-head{text-align:center;margin-bottom:36px;}
  .lineup-eyebrow{color:var(--honda-red);font-weight:800;letter-spacing:2px;font-size:12.5px;text-transform:uppercase;}
  .lineup h2{font-size:32px;font-weight:800;margin:8px 0 10px;}
  .lineup p.desc{color:var(--muted);font-size:15.5px;max-width:560px;margin:0 auto;}

  .car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .car-card{
    background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;
    display:flex;flex-direction:column;transition:.25s;position:relative;
  }
  .car-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.08);}
  .offer-tag, .offer-call{
    position: relative;
    background: var(--honda-red);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .4px;
    z-index: 2;
    cursor: pointer;
    text-wrap: nowrap;
}
.offer-tag.offer-tag-top {
    position: absolute;
    top: 10px;
    left: 10px;
}
.main_box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    grid-gap: 10px;
    align-items: center;
    align-content: center;
}
.tag_offer {
    position: relative;
    display: flex;
    align-items: center;
    grid-gap: 10px;
}
  .car-img{
    background:#f1efec;height:180px;display:flex;align-items:center;justify-content:center;padding:10px;
  }
  .car-img img{max-height:100%;max-width:100%;object-fit:contain;}
  .car-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;}
  .car-body h3{font-size:20px;font-weight:800;margin-bottom:2px;}
  .car-price{color:var(--honda-red);font-weight:700;font-size:14.5px;margin-bottom:14px;}
  .spec-row{display:flex;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px;}
  .spec{flex:1;text-align:center;padding:10px 4px;border-right:1px solid var(--line);}
  .spec:last-child{border-right:none;}
.spec .val {
    font-weight: 600;
    font-size: 13px;
}
  .spec .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;}
  .book-link{
    margin-top:auto;text-align:center;border:1.5px solid var(--honda-red);color:var(--honda-red);
    font-weight:700;padding:10px;border-radius:7px;font-size:14px;cursor:pointer;transition:.2s;
  }
  .book-link:hover{background:var(--honda-red);color:#fff;}

  /* Sticky mobile CTA */
  .sticky-cta{
    display:none;position:fixed;bottom:0;left:0;right:0;
    z-index: 99;
  }
.sticky-cta p {
    background: var(--honda-red);
    color: #fff;
    text-align: center;
    padding: 10px;
    font-weight: 600;
    z-index: 60;
    font-size: 13px;
    width: 50%;
}
  /* Modal Popup */
  .modal-overlay{
    display:none;position:fixed;inset:0;background:rgba(10,10,12,.6);
    z-index:100;align-items:center;justify-content:center;padding:20px;
  }
  .modal-overlay.active{display:flex;}
  .modal-box{
    background:#fff;border-radius:14px;max-width:420px;width:100%;
    padding:30px 26px 26px;position:relative;box-shadow:0 30px 70px rgba(0,0,0,.4);
    animation:popIn .25s ease;
  }
  @keyframes popIn{from{opacity:0;transform:scale(.94) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
  .modal-close{
    position:absolute;top:14px;right:16px;background:none;border:none;font-size:20px;
    color:var(--muted);cursor:pointer;line-height:1;
  }
  .modal-close:hover{color:var(--honda-red);}
  .modal-eyebrow{color:var(--honda-red);font-weight:800;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px;}
  .modal-box h3{font-size:22px;font-weight:800;margin-bottom:4px;}
  .modal-box .form-sub{color:var(--muted);font-size:13.5px;margin-bottom:20px;}

  /* Footer */
  footer{background:var(--honda-red);color:#c9c9c9;text-align:center;padding:26px 20px;font-size:13px;}
  footer a{color:#fff;text-decoration:none !important;}
  footer a:hover{text-decoration:underline;}

  /* ===== Responsive ===== */
  @media (max-width:1024px){
    .hero-inner{grid-template-columns:1fr;gap:32px;}
    .form-card{max-width:480px;}
    .car-grid{grid-template-columns:repeat(2,1fr);}
  }

  @media (max-width:768px){
    .header-inner{padding:12px 16px;}
    .logo{font-size:16px;gap:8px;}
    .logo img{height:22px;}
    .cta-btn{padding:9px 16px;font-size:13px;}
    .hero{padding:36px 16px 40px;}
    h1.headline{font-size:26px;}
    .sub-benefit{font-size:15px;}
    .benefit-item{font-size:13.5px;}
    .hero-cta{width:100%;text-align:center;padding:14px 20px;}
    .form-card{max-width:100%;padding:24px 20px;}
    .lineup{padding:44px 16px;}
    .lineup h2{font-size:26px;}
    .lineup p.desc{font-size:14px;padding:0 6px;}
    .car-grid{grid-template-columns:1fr 1fr;gap:14px;}
    .car-body{padding:14px 14px 16px;}
    .car-body h3{font-size:17px;}
    .spec .val{font-size:13px;}
    .spec .lbl{font-size:9.5px;}
    .modal-box{padding:26px 20px 22px;}
  }

  @media (max-width:600px){
    .car-grid{grid-template-columns:1fr;}
    .sticky-cta {
    display: flex;
    width: 100%;
    justify-content: space-between;
    grid-gap: 1px;
}
    body{padding-bottom:64px;}
    .car-img{height:160px;}
  }

  @media (max-width:400px){
    .logo{font-size:14px;}
    .logo span:not(.red){display:none;}
    h1.headline{font-size:22px;}
    .eyebrow{font-size:10.5px;padding:4px 10px;}
    .form-card h3, .modal-box h3{font-size:19px;}
    .cta-btn{padding:8px 12px;font-size:12px;}
  }
/* ===== Primary Menu (WordPress wp_nav_menu) ===== */
.main-nav{
  flex:1;display:flex;justify-content:center;
}
.main-nav ul{
  list-style:none;display:flex;gap:26px;align-items:center;
}
.main-nav ul ul{
  position:absolute;background:#fff;flex-direction:column;gap:0;
  box-shadow:0 12px 24px rgba(0,0,0,.12);border-radius:8px;padding:8px 0;
  min-width:180px;top:100%;left:0;display:none;
}
.main-nav ul li{position:relative;}
.main-nav ul li:hover > ul{display:flex;}
.main-nav ul li a{
  font-weight:600;font-size:14px;color:var(--ink);padding:8px 4px;display:block;
}
.main-nav ul ul li a{padding:8px 16px;}
.main-nav ul li a:hover{color:var(--honda-red);}
.header-inner{gap:20px;}
.menu-toggle{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--honda-red);}

@media (max-width:900px){
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;padding:10px 20px;box-shadow:0 12px 20px rgba(0,0,0,.08);
  }
  .main-nav.active{display:flex;}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:2px;width:100%;}
  .main-nav ul ul{position:static;box-shadow:none;padding-left:14px;}
  .menu-toggle{display:block;}
}

/* ===== Custom Logo ===== */
.logo img, .custom-logo{max-height:44px;width:auto;}
.logo a{font-weight:800;font-size:19px;color:var(--honda-red);}