/*
Theme Name: Broome Car Detailing
Theme URI: https://example.com/
Author: Custom Theme
Description: Premium one-page car detailing WordPress theme based on the supplied design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: broome-detailing
*/

:root {
      --blue: #0787ff;
      --blue-2: #005de9;
      --blue-soft: rgba(7, 135, 255, .18);
      --bg: #02060c;
      --bg-2: #06101b;
      --card: #08111d;
      --card-2: #0b1522;
      --line: rgba(255,255,255,.18);
      --line-blue: rgba(7,135,255,.72);
      --text: #ffffff;
      --muted: #c7d0dc;
      --shadow: 0 22px 60px rgba(0,0,0,.48);
      --radius: 14px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      font-family: Inter, Arial, sans-serif;
      background:
        radial-gradient(circle at 76% 7%, rgba(0,96,255,.18), transparent 25%),
        radial-gradient(circle at 20% 35%, rgba(0,110,255,.09), transparent 24%),
        linear-gradient(180deg, #030811 0%, #02050a 42%, #040811 100%);
      overflow-x: hidden;
    }

    img { display:block; max-width:100%; }
    a { color:inherit; text-decoration:none; }
    button, input, select { font:inherit; }

    .container {
      width: min(1180px, calc(100% - 42px));
      margin-inline: auto;
    }

    .topbar {
      position: absolute;
      inset: 0 0 auto;
      z-index: 20;
      padding: 18px 0;
    }

    .nav {
      display: grid;
      grid-template-columns: 190px 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .logo {
      display:flex;
      align-items:center;
      gap:10px;
      width:max-content;
    }
    .logo-badge {
      width: 118px;
      height: 92px;
      border: 2px solid #dbe9ff;
      border-radius: 26px 26px 18px 18px;
      background:
        linear-gradient(160deg, rgba(7,135,255,.95), rgba(1,10,20,.9) 60%),
        #071422;
      position:relative;
      display:grid;
      place-items:center;
      box-shadow:0 0 28px rgba(0,123,255,.36), inset 0 0 18px rgba(255,255,255,.12);
      transform: skewY(-2deg);
      overflow:hidden;
    }
    .logo-badge::before {
      content:"";
      position:absolute;
      width:80px;
      height:30px;
      top:14px;
      border:3px solid #88c5ff;
      border-radius:50% 50% 14px 14px;
      transform:skewX(-12deg);
      box-shadow:0 0 12px rgba(7,135,255,.7);
    }
    .logo-badge::after {
      content:"BROOME";
      position:absolute;
      bottom:20px;
      font-family:"Barlow Condensed", sans-serif;
      font-weight:900;
      letter-spacing:2px;
      font-size:24px;
      color:#0b8dff;
      text-shadow:0 2px 0 #fff, 0 0 12px #0787ff;
    }
    .logo-small {
      position:absolute;
      bottom:8px;
      font-size:8px;
      letter-spacing:2px;
      color:#fff;
    }

    .menu {
      display:flex;
      justify-content:center;
      align-items:center;
      gap:34px;
      font-size:13px;
      font-weight:700;
      text-transform:uppercase;
    }
    .menu a { position:relative; opacity:.92; }
    .menu a::after {
      content:"";
      position:absolute;
      left:0;
      right:100%;
      bottom:-11px;
      height:2px;
      background:var(--blue);
      transition:.25s ease;
    }
    .menu a:hover::after,
    .menu a.active::after { right:0; }
    .menu a.active { color:var(--blue); }

    .phone-btn,
    .btn {
      border:1.5px solid var(--blue);
      background:rgba(5,12,21,.75);
      color:#fff;
      border-radius:6px;
      min-height:48px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:11px;
      padding:0 22px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.3px;
      cursor:pointer;
      transition:.25s ease;
    }
    .phone-btn:hover,
    .btn:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(7,135,255,.22); }
    .btn-primary {
      border-color:#32a0ff;
      background:linear-gradient(180deg, #1598ff, #0059e7);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 10px 26px rgba(0,94,231,.28);
    }

    .mobile-toggle { display:none; }

    .hero {
      min-height: 720px;
      position: relative;
      padding: 148px 0 38px;
      overflow:hidden;
      background:
        linear-gradient(90deg, rgba(2,6,12,.98) 0%, rgba(2,6,12,.83) 30%, rgba(2,6,12,.2) 60%, rgba(2,6,12,.75) 100%),
        url('https://detailingn.kakatiyastudentresult.in/wp-content/uploads/2026/07/ChatGPT-Image-Jun-25-2026-04_22_45-PM.webp') center 36% / cover no-repeat;
    }
    .hero::before {
      content:"";
      position:absolute;
      inset:auto 0 0;
      height:42%;
      /*background:linear-gradient(180deg, transparent, rgba(2,6,12,.96));*/
    }
    .hero::after {
      content:"";
      position:absolute;
      width:620px;
      height:620px;
      right:80px;
      top:90px;
      background:radial-gradient(circle, rgba(0,117,255,.28), transparent 64%);
      filter:blur(18px);
      pointer-events:none;
    }

    .hero-grid {
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns: 1.03fr .92fr;
      min-height:490px;
      align-items:center;
      gap:40px;
    }

    .eyebrow {
      color:var(--blue);
      text-transform:uppercase;
      font-weight:800;
      letter-spacing:.6px;
      margin-bottom:10px;
    }

    .hero h1 {
      margin:0;
      font-family:"Barlow Condensed", sans-serif;
      font-size:clamp(62px, 6vw, 92px);
      line-height:.84;
      text-transform:uppercase;
      letter-spacing:1px;
      text-shadow:0 8px 28px rgba(0,0,0,.55);
    }
    .hero h1 span {
      display:block;
      color:var(--blue);
      text-shadow:0 0 30px rgba(7,135,255,.36);
    }
    .lead {
      max-width:470px;
      margin:20px 0 24px;
      color:#f0f3f7;
      font-size:16px;
      line-height:1.65;
    }

    .feature-row {
      display:flex;
      gap:0;
      margin:10px 0 26px;
    }
    .mini-feature {
      min-width:125px;
      padding:0 18px;
      text-align:center;
      position:relative;
    }
    .mini-feature:first-child { padding-left:0; }
    .mini-feature:not(:last-child)::after {
      content:"";
      position:absolute;
      right:0;
      top:8px;
      height:58px;
      width:1px;
      background:rgba(255,255,255,.22);
    }
    .mini-feature i {
      display:block;
      color:var(--blue);
      font-size:34px;
      margin-bottom:8px;
      text-shadow:0 0 20px rgba(7,135,255,.35);
    }
    .mini-feature span {
      display:block;
      font-size:12px;
      line-height:1.25;
      font-weight:800;
      text-transform:uppercase;
    }
    .hero-actions { display:flex; gap:18px; }

    .quote-card {
      width:min(330px, 100%);
      justify-self:end;
      align-self:end;
      margin-bottom:10px;
      border:1.5px solid var(--blue);
      border-radius:13px;
      padding:18px 17px 16px;
      background:linear-gradient(180deg, rgba(9,17,27,.93), rgba(4,8,14,.97));
      box-shadow:var(--shadow), 0 0 34px rgba(7,135,255,.12);
      backdrop-filter: blur(10px);
    }
    .quote-title {
      display:flex;
      gap:14px;
      align-items:center;
      font-family:"Barlow Condensed", sans-serif;
      text-transform:uppercase;
      font-size:26px;
      font-weight:800;
      margin-bottom:15px;
    }
    .quote-title i { color:var(--blue); font-size:27px; }
    .form-control {
      width:100%;
      height:42px;
      border:1px solid rgba(255,255,255,.16);
      background:#11161d;
      color:#fff;
      border-radius:5px;
      padding:0 13px;
      outline:none;
      margin-bottom:9px;
    }
    .form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(7,135,255,.12); }
    .quote-card .btn { width:100%; min-height:44px; }

    .stats {
      position:relative;
      z-index:4;
      margin-top:-8px;
      border:1px solid rgba(255,255,255,.34);
      border-radius:13px;
      background:linear-gradient(180deg, rgba(12,19,28,.92), rgba(6,10,16,.97));
      display:grid;
      grid-template-columns:repeat(4,1fr);
      box-shadow:0 18px 50px rgba(0,0,0,.28);
    }
    .stat {
      display:grid;
      grid-template-columns:62px 1fr;
      align-items:center;
      min-height:105px;
      padding:18px 25px;
      position:relative;
    }
    .stat:not(:last-child)::after {
      content:"";
      position:absolute;
      top:20px;
      right:0;
      width:1px;
      height:66px;
      background:rgba(255,255,255,.2);
    }
    .stat i { font-size:46px; color:var(--blue); }
    .stat strong { font-size:34px; line-height:1; }
    .stat small { display:block; margin-top:7px; font-size:11px; text-transform:uppercase; }
    .stars { color:var(--blue); letter-spacing:2px; font-size:12px; margin-top:5px; }

    section { position:relative; }
    .services { padding: 70px 0 50px; }
    .section-heading { text-align:center; margin-bottom:30px; }
    .section-heading .overline {
      color:var(--blue);
      font-size:14px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.7px;
    }
    .section-heading h2 {
      margin:4px 0 0;
      font-family:"Barlow Condensed", sans-serif;
      font-size:38px;
      line-height:1;
      text-transform:uppercase;
      letter-spacing:.8px;
    }
    .section-heading h2 span { color:var(--blue); }

    .service-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:14px;
    }
    .service-card {
      border:1px solid var(--blue);
      border-radius:10px;
      overflow:hidden;
      background:linear-gradient(180deg, #0b1522, #050a11);
      min-height:325px;
      display:flex;
      flex-direction:column;
      box-shadow:0 14px 35px rgba(0,0,0,.22);
      transition:.25s ease;
    }
    .service-card:hover { transform:translateY(-5px); box-shadow:0 20px 48px rgba(0,0,0,.45), 0 0 24px rgba(7,135,255,.14); }
    .service-img { height:158px; width:100%; object-fit:cover; filter:saturate(.9) contrast(1.07); }
    .service-body { padding:0 16px 14px; margin-top:-25px; position:relative; }
    .service-icon {
      width:54px;
      height:54px;
      border:1.5px solid var(--blue);
      border-radius:50%;
      background:#06101a;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:23px;
      margin-bottom:13px;
      box-shadow:0 0 18px rgba(7,135,255,.18);
    }
    .service-card h3 {
      margin:0 0 7px;
      font-size:17px;
      text-transform:uppercase;
    }
    .service-card p {
      margin:0;
      color:#d3d9e1;
      font-size:13px;
      line-height:1.5;
      min-height:62px;
    }
    .price { margin-top:12px; color:var(--blue); font-size:13px; font-weight:800; text-transform:uppercase; }
    .price strong { font-size:20px; }
    .center-action { text-align:center; margin: 30px 0 30px; }
    .center-action .btn { min-width:285px; min-height:42px; }

    .difference { padding:0 0 18px; }
    .difference h2 {
      text-align:center;
      margin:0 0 10px;
      font-family:"Barlow Condensed", sans-serif;
      font-size:34px;
      text-transform:uppercase;
      letter-spacing:.7px;
    }
    .difference h2 span { color:var(--blue); }
    .compare {
      position:relative;
      height:350px;
      border:1px solid rgba(255,255,255,.8);
      border-radius:10px;
      overflow:hidden;
      background:#111;
      box-shadow:0 16px 35px rgba(0,0,0,.36);
    }
    .compare img {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .after-wrap {
      position:absolute;
      inset:0 auto 0 0;
      width:50%;
      overflow:hidden;
      border-right:2px solid #fff;
    }
    .after-wrap img { width:100vw; max-width:none; filter:brightness(.65) saturate(.65); }
    .before-label, .after-label {
      position:absolute;
      top:14px;
      z-index:5;
      padding:6px 15px;
      border-radius:6px;
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
    }
    .before-label { left:18px; background:#05070a; }
    .after-label { right:18px; background:linear-gradient(180deg,#178eff,#004fe3); }
    .slider-handle {
      position:absolute;
      top:50%;
      left:50%;
      z-index:7;
      width:44px;
      height:44px;
      border-radius:50%;
      transform:translate(-50%,-50%);
      background:#fff;
      color:#0b1118;
      display:grid;
      place-items:center;
      font-weight:900;
      pointer-events:none;
    }
    .compare input[type="range"] {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      opacity:0;
      z-index:8;
      cursor:ew-resize;
    }

    .why { padding:0 0 20px; }
    .why-title {
      text-align:center;
      color:var(--blue);
      font-weight:800;
      text-transform:uppercase;
      margin-bottom:13px;
      letter-spacing:.7px;
    }
    .why-grid { display:grid; grid-template-columns:repeat(5,1fr); }
    .why-item { text-align:center; padding:0 22px; position:relative; }
    .why-item:not(:last-child)::after {
      content:"";
      position:absolute;
      right:0;
      top:2px;
      width:1px;
      height:92px;
      background:rgba(255,255,255,.35);
    }
    .why-item i { color:var(--blue); font-size:39px; margin-bottom:9px; }
    .why-item strong { display:block; text-transform:uppercase; font-size:12px; margin-bottom:5px; }
    .why-item span { color:#e0e5eb; font-size:12px; line-height:1.35; }

    footer {
      border-top:1px solid var(--blue-2);
      background:
        radial-gradient(circle at 50% 0, rgba(0,93,233,.22), transparent 42%),
        linear-gradient(180deg, #051226, #06101e);
      padding:11px 0 13px;
    }
    .footer-grid {
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      align-items:center;
      gap:30px;
    }
    .footer-block { min-height:70px; display:flex; justify-content:center; flex-direction:column; }
    .footer-block:not(:last-child) { border-right:1px solid rgba(255,255,255,.24); }
    .call-line { display:flex; align-items:center; gap:14px; }
    .call-line i { font-size:34px; }
    .call-line small { color:var(--blue); font-size:10px; font-weight:800; text-transform:uppercase; }
    .call-line strong { display:block; font-size:24px; letter-spacing:1px; }
    .home-service { margin-top:4px; font-size:14px; }
    .home-service i { color:var(--blue); margin-right:10px; }
    .quality { text-align:center; }
    .quality .script { color:var(--blue); font-family:cursive; font-size:29px; font-style:italic; line-height:1; }
    .quality strong { display:block; text-transform:uppercase; letter-spacing:6px; margin-top:-2px; }
    .quality .stars { font-size:18px; }
    .social { align-items:center; text-align:center; }
    .social small { text-transform:uppercase; margin-bottom:10px; }
    .socials { display:flex; gap:13px; justify-content:center; }
    .socials a {
      width:38px;
      height:38px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:linear-gradient(180deg,#1598ff,#0050da);
      font-size:19px;
      transition:.2s;
    }
    .socials a:hover { transform:translateY(-2px) scale(1.05); }

    @media (max-width: 1050px) {
      .menu { gap:18px; font-size:12px; }
      .hero-grid { grid-template-columns:1fr .72fr; }
      .service-grid { grid-template-columns:repeat(2,1fr); }
      .stats { grid-template-columns:repeat(2,1fr); }
      .stat:nth-child(2)::after { display:none; }
      .why-grid { grid-template-columns:repeat(3,1fr); gap:20px 0; }
      .why-item:nth-child(3)::after { display:none; }
    }

    @media (max-width: 820px) {
      .container { width:min(100% - 28px, 680px); }
      .topbar { position:fixed; padding:10px 0; background:rgba(2,6,12,.93); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08); }
      .nav { grid-template-columns:1fr auto; }
      .logo-badge { width:84px; height:64px; }
      .logo-badge::before { width:56px; height:20px; top:10px; }
      .logo-badge::after { font-size:17px; bottom:14px; }
      .logo-small { font-size:6px; bottom:5px; }
      .phone-btn { display:none; }
      .mobile-toggle {
        display:grid;
        place-items:center;
        width:44px;
        height:44px;
        border:1px solid var(--blue);
        border-radius:6px;
        background:#08111d;
        color:#fff;
      }
      .menu {
        position:absolute;
        top:84px;
        left:14px;
        right:14px;
        display:none;
        flex-direction:column;
        gap:0;
        padding:10px;
        border:1px solid var(--blue);
        border-radius:10px;
        background:#06101b;
        box-shadow:var(--shadow);
      }
      .menu.open { display:flex; }
      .menu a { width:100%; padding:13px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
      .menu a:last-child { border-bottom:0; }
      .menu a::after { display:none; }
      .hero { padding-top:120px; min-height:auto; background-position:61% center; }
      .hero-grid { grid-template-columns:1fr; }
      .hero-copy { padding-top:34px; }
      .hero h1 { font-size:64px; }
      .quote-card { justify-self:stretch; width:100%; margin:10px 0 0; }
      .stats { margin-top:22px; }
      .why-grid { grid-template-columns:repeat(2,1fr); }
      .why-item:nth-child(2)::after, .why-item:nth-child(4)::after { display:none; }
      .footer-grid { grid-template-columns:1fr; text-align:center; }
      .footer-block:not(:last-child) { border-right:0; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:15px; }
      .call-line { justify-content:center; }
    }

    @media (max-width: 560px) {
      .hero { background-position:66% center; }
      .hero h1 { font-size:52px; }
      .feature-row { flex-wrap:wrap; row-gap:18px; }
      .mini-feature { flex:1 1 33%; padding:0 8px; min-width:90px; }
      .hero-actions { flex-direction:column; }
      .hero-actions .btn { width:100%; }
      .stats { grid-template-columns:1fr; }
      .stat::after { display:none !important; }
      .stat { min-height:88px; }
      .service-grid { grid-template-columns:1fr; }
      .service-card { min-height:auto; }
      .service-img { height:180px; }
      .why-grid { grid-template-columns:1fr; }
      .why-item { padding:12px 0 18px; }
      .why-item::after { display:none !important; }
      .compare { height:180px; }
      .section-heading h2 { font-size:32px; }
      .center-action .btn { width:100%; min-width:0; }
    }

/* WordPress integration */
.custom-logo-link{display:block}.custom-logo{max-width:145px;height:auto}.quote-message{padding:10px 12px;border-radius:6px;font-size:13px}.quote-message.success{background:rgba(31,180,92,.16);border:1px solid rgba(31,180,92,.55)}.quote-message.error{background:rgba(220,53,69,.16);border:1px solid rgba(220,53,69,.55)}