/* =========================================================
   THE GAS MAN — MASTER STYLE (CLEAN MASTER)
   ========================================================= */

/* ---------- Brand ---------- */
:root{
  --navy:#0C2340;
  --red:#C1272D;
  --vanilla:#FFF8E7;
  --white:#FFFFFF;
  --gray:#f5f5f5;
  --shadow:0 6px 20px rgba(0,0,0,.18);
  --shadow-hover:0 10px 28px rgba(0,0,0,.24);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.25s}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:12px 28px;border-radius:10px;font-weight:700;transition:.25s;margin:8px}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{filter:brightness(.95);transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(.92);transform:translateY(-2px)}

/* =========================================================
   NAVBAR
   ========================================================= */
.main-nav{
  background:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 40px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  position:sticky;top:0;z-index:999;
}
.nav-logo{height:55px;transition:transform .3s}
.nav-logo:hover{transform:scale(1.05)}
.nav-right{display:flex;gap:28px;align-items:center}
.nav-right a{font-weight:600;position:relative}
.nav-right a::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;
  background:var(--red);transition:width .3s;
}
.nav-right a:hover{color:var(--red)}
.nav-right a:hover::after{width:100%}
.hamburger{display:none;font-size:28px;color:var(--navy);cursor:pointer}

/* Mobile Nav */
@media(max-width:768px){
  .hamburger{display:block}
  .nav-right{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:70px;
    right:0;
    background:#fff;
    width:230px;
    text-align:right;
    padding:20px;
    box-shadow:var(--shadow);
    align-items:flex-end;
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    transition:all .25s ease-in-out;
  }
  .nav-right.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero-section{
  background:var(--vanilla);
  text-align:center;
  padding:80px 20px;
  border-bottom:1px solid #eee;
}
.hero-logo{max-width:300px;margin:0 auto 20px}
.hero-section h1{
  font-size:2.2rem;
  font-weight:800;
  color:var(--navy);
  margin-bottom:10px;
}

/* Hero Buttons */
.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:20px;
}
.hero-buttons .btn{
  min-width:220px;
  text-align:center;
}

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.how-section{
  background:var(--gray);
  padding:80px 20px;
}
.section-title{
  font-size:2.1rem;
  text-align:center;
  margin-bottom:40px;
  color:var(--navy);
  font-weight:800;
}
.how-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.how-card{
  background:#fff;
  border-radius:16px;
  padding:30px 22px;
  min-width:260px;
  max-width:320px;
  box-shadow:var(--shadow);
  transition:.3s;
  text-align:left;
}
.how-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.how-card i{font-size:2rem;color:var(--red);margin-bottom:10px}
.how-card h3{font-size:1.1rem;margin-bottom:6px;color:var(--navy)}

/* =========================================================
   PRICING & SERVICE (CARDS MASTER)
   Replaces old centered paragraph pricing rules
   ========================================================= */
.pricing-section{
  background: var(--vanilla);
  padding: 90px 20px;
  border-top: 1px solid #e8e2d4;
  border-bottom: 1px solid #e8e2d4;
}

.pricing-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
}

/* Header (centered) */
.pricing-header{
  text-align: center;
  margin-bottom: 18px;
}

.pricing-header h2{
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}

/* underline */
.pricing-header h2::after{
  content:"";
  display:block;
  width: 64px;
  height: 3px;
  background: var(--red);
  margin: 14px auto 0;
  border-radius: 2px;
}

.pricing-subtitle{
  margin: 0;
  color: rgba(12,35,64,.75);
  font-size: 1.05rem;
}

/* Grid */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

/* Cards */
.pricing-card{
  background: #fff;
  border: 1px solid rgba(12,35,64,.14);
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 10px 24px rgba(12,35,64,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-align: left;
}

.pricing-card:hover{
  transform: translateY(-2px);
  border-color: rgba(193,39,45,.28);
  box-shadow: 0 16px 34px rgba(12,35,64,.16);
}

.pricing-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(12,35,64,.08);
  color: var(--navy);
  font-size: 18px;
  margin-bottom: 12px;
}

.pricing-card h3{
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.pricing-card p{
  margin: 0;
  color: rgba(12,35,64,.75);
  line-height: 1.55;
  font-size: .98rem;
}

.pricing-card strong{
  color: var(--navy);
  font-weight: 800;
}

/* Footer tag */
.pricing-footer{
  margin-top: 16px;
  text-align: center;
}

.pricing-tag{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(193,39,45,.10);
  color: var(--navy);
  border: 1px solid rgba(193,39,45,.18);
  font-weight: 700;
  font-size: .95rem;
}

/* Responsive */
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-section{ padding: 60px 18px; }
  .pricing-header h2{ font-size: 1.7rem; }
}
.pricing-section{ outline: 6px solid lime; }
/* =========================================================
   DAILY FUEL PRICES (kept for other pages)
   ========================================================= */
.fuel-prices{
  background:#fff;
  padding:70px 20px;
  text-align:center;
}
.price-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.price-box{
  background:var(--navy);
  color:#fff;
  border-radius:14px;
  min-width:190px;
  padding:24px 28px;
  font-weight:800;
  box-shadow:var(--shadow);
}
.price-box.diesel{background:var(--red)}
.price-box h3{font-size:1.1rem}
.price-box p{font-size:1.8rem;margin-top:6px}

/* =========================================================
   WHY CHOOSE + LOCATIONS
   ========================================================= */
.why-map-section{
  background:var(--vanilla);
  padding:80px 20px;
}
.why-map-container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  max-width:1200px;
  margin:0 auto;
  align-items:flex-start;
}
.why-choose-left{flex:1;min-width:320px;max-width:480px}
.why-choose-left h2{
  font-size:2rem;
  color:var(--navy);
  margin-bottom:16px;
  text-align:left;
}
.why-boxes{display:flex;flex-direction:column;gap:16px}
.why-box{
  border-radius:14px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-shadow:var(--shadow);
  transition:.3s;
  color:#fff;
}
.why-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.why-box i{font-size:1.6rem;margin-top:2px}
.why-box.red{background:var(--red)}
.why-box.navy{background:var(--navy)}
.why-box.vanilla{background:var(--vanilla);color:var(--navy)}
.why-box.gray{background:#e9ecef;color:var(--navy)}
.map-side{flex:1.3;min-width:320px;text-align:center}
.map-side h2{font-size:2rem;margin-bottom:6px}
.map-side .service-text{color:var(--red);font-weight:700;margin-bottom:18px}
.map-wrap iframe{
  width:100%;
  height:400px;
  border:none;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}

/* =========================================================
   MEMBERSHIP / PIT STOP CARDS
   ========================================================= */
.plan-section{text-align:center;padding:80px 20px;background:#fff}
.plan-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.plan-card{
  border-radius:18px;
  padding:38px 26px;
  text-align:left;
  min-width:280px;
  max-width:340px;
  background:linear-gradient(135deg,#fff,#f9fafb);
  box-shadow:var(--shadow);
  transition:.35s;
}
.plan-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-hover)}
.plan-card.fastlane:hover{box-shadow:0 0 26px rgba(193,39,45,.55)}
.plan-card.cruise:hover{box-shadow:0 0 26px rgba(12,35,64,.45)}
.plan-card.pitstop:hover{box-shadow:0 0 26px rgba(255,248,231,.6)}
.plan-card h3{font-size:1.35rem;font-weight:800;color:var(--navy);margin-bottom:12px}
.plan-card > i{font-size:2.4rem;margin-bottom:12px;color:var(--red)}
.feature-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.feature-list li{display:flex;align-items:center;line-height:1.5;color:#1b2e4a}
.icon-bullet{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;color:#fff;font-size:.9rem;margin-right:10px;
}
.icon-red{background:var(--red)}
.icon-navy{background:var(--navy)}

/* =========================================================
   PAGE CONTENT
   ========================================================= */
.page-content{
  padding:70px 20px;
  max-width:1000px;
  margin:0 auto;
  text-align:left;
}
.page-content h2{
  font-size:1.9rem;
  color:var(--navy);
  margin-bottom:14px;
}
.page-content p{color:#263854;margin-bottom:12px;font-size:1.05rem}

/* =========================================================
   FAQ
   ========================================================= */
.faq-section{
  padding:80px 20px;
  background:#fff;
}
.faq-list{max-width:950px;margin:0 auto}
.faq-list details{
  background:var(--gray);
  border-radius:14px;
  padding:18px 20px;
  margin:14px 0;
  box-shadow:var(--shadow);
}
.faq-list summary{font-weight:800;color:var(--navy);cursor:pointer}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact-buttons{
  background:var(--vanilla);
  text-align:center;
  padding:60px 0;
}
.contact-buttons a{
  display:inline-block;
  padding:14px 40px;
  margin:0 12px;
  border-radius:8px;
  font-size:1rem;
  font-weight:700;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.contact-buttons .btn-red{background:var(--red)}
.contact-buttons .btn-navy{background:var(--navy)}

.site-footer{
  background:var(--navy);
  color:var(--vanilla);
  text-align:center;
  padding:20px 0;
  font-size:.95rem;
}
.site-footer a{color:var(--vanilla);font-weight:600}
.site-footer a:hover{color:var(--red)}