/* ============================================================
   contact_us.html — page-specific stylesheet
   Auto-extracted from inline <style> block(s) in this page so it
   can be edited/cached separately from the markup.
   Shared/global rules (navbar, footer, floating icons, animations,
   preloader) live in css/nav_bar.css. Package-detail-page rules
   live in css/package_detail.css.
   ============================================================ */
/* CSS custom properties (theme variables) */

    :root {
      --primary: #FF8C00;
      --primary-2: #FFC107;
      --dark: #14161a;
      --light: #f6f7fb;
    }

    * {
      box-sizing: border-box
    }

    body {
      font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
      color: #333;
      background: #fff;
      line-height: 1.7;
    }
/* Section Pad */


    .section-pad {
      padding: 70px 0
    }

    img {
      max-width: 100%;
      display: block
    }

    /* ===== HERO SECTION ===== */
    .hero-section {
      background: #444649 url('../../images/car_images/contact_us_hero.webp') center/contain no-repeat;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      position: relative;
    }
/* Hero Section (decorative pseudo-element) */


    .hero-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
/* Hero Section */


    .hero-section>div {
      background-color: rgba(0, 0, 0, 0.541);
      border-radius: 20px;
      padding: 1rem;
      position: absolute;
      font-family: 'Times New Roman', Times, serif;
      font-size: 3rem;
      bottom: 10px;
      z-index: 1;
    }

    /* Breadcrumb strip */
    .breadcrumb-strip {
      background: #f4f6fb;
      padding: 12px 0;
      border-top: 1px solid #edf0f7;
      border-bottom: 1px solid #edf0f7
    }
/* Breadcrumb A */


    .breadcrumb a {
      text-decoration: none
    }

    /* Cards + Form */
    .info-card {
      display: flex;
      gap: 14px;
      padding: 18px;
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 8px 26px rgba(17, 22, 30, .06);
      margin-bottom: 16px;
      align-items: flex-start;
    }
/* Info Card I */


    .info-card i {
      font-size: 26px;
      color: var(--primary);
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 140, 0, .12);
    }
/* Info Card H6 */


    .info-card h6 {
      margin: 0;
      font-weight: 700
    }
/* Info Card A */


    .info-card a {
      color: #333;
      text-decoration: none
    }
/* Info Card .link View */


    .info-card .link-view {
      display: inline-block;
      margin-top: 6px;
      color: var(--primary);
      font-weight: 600
    }
/* Contact Form Card */


    .contact-form-card {
      border: 0;
      border-radius: 16px
    }
/* Contact Form Card .form Control */


    .contact-form-card .form-control,
    .contact-form-card .form-select {
      border-radius: 12px
    }
/* Btn Primary */


    .btn-primary {
      background: linear-gradient(45deg, var(--primary), var(--primary-2));
      border: 0;
      color: #111;
      font-weight: 700;
    }
/* Btn Wa */


    .btn-wa {
      background: #25D366;
      color: #111;
      font-weight: 700;
      border: 0;
    }
/* Quick Cta */


    .quick-cta {
      display: block;
      text-align: center;
      background: #0f1115;
      color: #fff;
      padding: 12px;
      border-radius: 12px;
      text-decoration: none;
      font-weight: 700
    }
/* Quick Cta I */


    .quick-cta i {
      margin-right: 8px
    }
/* Quick Cta.wa */


    .quick-cta.wa {
      background: #25D366;
      color: #111
    }

    /* Map */
    .map-wrap {
      padding: 40px 0 70px
    }

    /* WhatsApp Float */
    .wa-float {
      position: fixed;
      bottom: 18px;
      right: 18px;
      background: #25D366;
      color: #111;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
      z-index: 999;
    }

    /* Small tweaks */
    .form-label {
      font-weight: 600
    }

    /* Responsive */
    @media (max-width: 575.98px) {
      .hero {
        min-height: 38vh
      }
    }