/*
================================================================================
PALMER INSURANCE AGENCY - MASTER STYLESHEET
================================================================================
Description: Main stylesheet for Palmer Insurance Agency website
Author: Palmer Insurance Agency
Last Updated: November 2025
Browser Support: Modern browsers (Chrome, Firefox, Safari, Edge)

TABLE OF CONTENTS:
1. CSS Variables & Design Tokens
2. Base Styles & Reset
3. Layout Components
4. Header & Navigation
5. Hero Sections & Sliders
6. Content Sections
6.5. Quote CTA Section (ADDED)
7. About Page Styles
8. UI Components (Buttons, Cards, Forms)
9. Animations
10. Responsive Design & Media Queries

NOTES:
- Uses flexbox for layouts (IE11+ support)
- Sticky positioning (IE not supported, graceful degradation)
- CSS animations for sliders and state carousel
- Mobile-first responsive approach with breakpoints at 768px and 968px
- Hero overlay positioned within each slide for per-slide text customization
- Dual CTA buttons on hero slider for commercial and personal coverage
- Hero slider transitions every 3.5 seconds via JavaScript
- Quote CTA buttons match hero button styling (glass-morphism effect)
================================================================================
*/


/* ============================================================================
   1. CSS VARIABLES & DESIGN TOKENS
   ============================================================================
   Central color and spacing definitions for easy theme management
   To change brand colors, update these variables
   ========================================================================= */

:root {
  /* Brand Colors */
  --color-primary: #0077cc;
  --color-primary-dark: #005fa3;
  --color-secondary: #3b82f6;
  --color-dark: #0f172a;
  --color-accent: #fbbf24;
  --color-notice: #ffcc00;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-gray-light: #f4f4f4;
  --color-gray-medium: #ddd;
  --color-gray-dark: #333;
  --color-border: #eee;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 2.5rem;
  
  /* Typography */
  --font-family: Arial, sans-serif;
  --font-family-bold: 'Arial Black', 'Arial Bold', sans-serif;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.8rem;
  --font-size-xxl: 2.5rem;
  
  /* Layout */
  --max-width: 1200px;
  --border-radius: 8px;
  --border-radius-sm: 5px;
  --border-radius-xs: 6px;
  
  /* Z-index Scale */
  --z-index-dropdown: 999;
  --z-index-sticky: 1000;
  --z-index-top-bar: 1001;
  --z-index-hero-overlay: 10;
  
  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.4s ease;
  --transition-slow: 1s ease-in-out;
}


/* ============================================================================
   2. BASE STYLES & RESET
   ============================================================================
   Foundation styles applied to all pages
   ========================================================================= */

body {
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  background-color: var(--color-gray-light);
  line-height: 1.6;
  color: var(--color-gray-dark);
}

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


/* ============================================================================
   3. LAYOUT COMPONENTS
   ============================================================================
   Reusable layout patterns used throughout the site
   ========================================================================= */

.section {
  background: var(--color-white);
  margin: 20px 0;
  padding: 40px 20px;
  border-radius: var(--border-radius);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.section h2 {
  font-size: var(--font-size-xl);
  margin-bottom: 20px;
  color: var(--color-gray-dark);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1;
  min-width: 280px;
  background: var(--color-white);
  padding: 20px;
  border-radius: var(--border-radius);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}

.card h3 {
  margin-top: 0;
  color: var(--color-gray-dark);
}


/* ============================================================================
   4. HEADER & NAVIGATION
   ============================================================================
   Top bar, main header, and navigation menu
   ========================================================================= */

.top-bar {
  background: linear-gradient(to right, var(--color-secondary), var(--color-dark));
  color: var(--color-white);
  padding: 0.8rem 0;
  font-size: var(--font-size-base);
  position: sticky;
  top: 0;
  z-index: var(--z-index-top-bar);
}

.top-bar-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.top-bar-left {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
}

.top-bar-phone,
.top-bar-email {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color var(--transition-fast);
}

.top-bar-phone:hover,
.top-bar-email:hover {
  color: var(--color-accent);
}

.top-bar-states {
  font-size: var(--font-size-base);
  font-weight: 500;
  opacity: 0.95;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.states-label {
  white-space: nowrap;
  flex-shrink: 0;
}

.states-carousel-wrapper {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
}

.states-carousel {
  display: flex;
  animation: scrollStates 25s linear infinite;
  width: fit-content;
}

.state-name {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 1.5rem;
  color: var(--color-white) !important;
}

.main-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-medium);
  padding: 10px 0;
}

.main-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  height: 60px;
  display: block;
}

.main-nav {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-medium);
  position: sticky;
  top: 0;
  z-index: var(--z-index-sticky);
}

.nav-container {
  max-width: var(--max-width);
  margin: auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nav-toggle {
  display: none;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  color: var(--color-gray-dark);
}

.nav-links {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 0;
  padding: 0;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.nav-links li {
  display: inline-block;
}

.nav-links li a {
  color: var(--color-gray-dark);
  text-decoration: none;
  font-weight: bold;
  transition: color var(--transition-fast);
  white-space: nowrap;
  padding: 10px 15px;
  display: block;
}

.nav-links li a:hover {
  color: var(--color-primary);
}

.cta-mobile {
  display: none;
}

.notice-bar {
  background: linear-gradient(to right, var(--color-secondary), var(--color-dark));
  color: var(--color-white);
  text-align: center;
  padding: 10px 0;
  font-weight: 500;
  font-size: var(--font-size-base);
}

/* Carrier Logos Carousel */
.carrier-logos {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
  overflow: hidden;
}

.carrier-logos h4 {
  font-size: 1.75rem;
  margin-bottom: 2rem;
  color: #004080;
}

.logo-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.logo-track {
  display: flex;
  gap: 60px;
  animation: scrollLogos 80s linear infinite;
  width: max-content;
  align-items: center;
  padding: 20px 0;
}

.logo-track img {
  height: 50px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.logo-track:hover {
  animation-play-state: paused;
}


/* ============================================================================
   5. HERO SECTIONS & SLIDERS
   ============================================================================
   Hero banners, image sliders, and overlay content
   ========================================================================= */

.hero-slider {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.slider-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  transition: transform 0.1s ease-out;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-white);
  padding: 0 20px;
  z-index: var(--z-index-hero-overlay);
}

.hero-overlay h1 {
  font-size: 4.5em;
  margin-bottom: 20px;
  font-weight: 900;
  font-family: 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.1;
  text-shadow: 
    0px 1px 0px rgba(0, 0, 0, 0.5),
    0px 2px 0px rgba(0, 0, 0, 0.5),
    0px 3px 0px rgba(0, 0, 0, 0.4),
    0px 4px 0px rgba(0, 0, 0, 0.4),
    0px 5px 0px rgba(0, 0, 0, 0.3),
    0px 6px 0px rgba(0, 0, 0, 0.3),
    0px 7px 0px rgba(0, 0, 0, 0.2),
    0px 8px 0px rgba(0, 0, 0, 0.2),
    0px 9px 10px rgba(0, 0, 0, 0.6),
    0px 12px 20px rgba(0, 0, 0, 0.4);
}

.hero-overlay p {
  font-size: 1.5em;
  margin-bottom: 35px;
  max-width: 800px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.hero-cta-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.cta-hero {
  font-size: 1em;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 4px solid var(--color-white);
  text-decoration: none;
  font-weight: 700;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.4);
}

.cta-hero:hover {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.5);
}

.hero-overlay h1,
.hero-overlay p,
.hero-overlay a {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.5s;
}


/* ============================================================================
   6. CONTENT SECTIONS
   ============================================================================
   Standard content blocks and typography
   ========================================================================= */

.uniform-image {
  width: 100%;
  max-width: 600px;
  height: 400px;
  object-fit: cover;
  border-radius: var(--border-radius-xs);
  margin-bottom: 10px;
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin-bottom: 10px;
}

ul li a {
  color: var(--color-primary);
  text-decoration: none;
  transition: text-decoration var(--transition-fast);
}

ul li a:hover {
  text-decoration: underline;
}

/* Service Intro Section */
.service-intro {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
}

.service-intro p {
  max-width: 900px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.7;
  color: #555;
  padding: 0 2rem;
}

/* Service Blocks */
.services {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.service-block {
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  transition: background 0.3s ease;
  z-index: 0;
}

.service-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.service-block:hover::before {
  background: rgba(0, 0, 0, 0.75);
}

.service-block h3,
.service-block p,
.service-block a {
  position: relative;
  z-index: 1;
}

.service-block h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
}

.service-block p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

/* Homepage Service Block Backgrounds */
.service-block.business {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/business.jpg');
}

.service-block.professional {
  background-image: url('/images/insurance-type/commercial-lines/professional-liability-insurance/professional.jpg');
}

.service-block.faith {
  background-image: url('/images/insurance-type/commercial-lines/religious-organizations/church.jpg');
}

.service-block.farm {
  background-image: url('/images/insurance-type/commercial-lines/farm-insurance/farm.jpg');
}

.service-block.life {
  background-image: url('/images/insurance-type/personal-lines/life-insurance/life.jpg');
}

.service-block.personal {
  background-image: url('/images/insurance-type/personal-lines/homeowners-insurance/homeowners-insurance.jpg');
}

/* Coverage Blocks Section */
.coverage-blocks {
  padding: 60px 20px;
  background-color: #f9f9f9;
}

.block-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* Business Insurance Coverage Backgrounds */
.coverage-general-liability {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/general-liability-insurance/general-liability.jpg');
}

.coverage-commercial-auto {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/commercial-auto-insurance/commercial-auto.jpg');
}

.coverage-commercial-property {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/commercial-property-insurance/commercial-property.jpg');
}

.coverage-workers-comp {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/workers-compensation-insurance/workers-comp.jpg');
}

.coverage-professional-liability {
  background-image: url('/images/insurance-type/commercial-lines/professional-liability-insurance/professional-liability.jpg');
}

.coverage-cyber-liability {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/cyber-liability-insurance/cyber-liability.jpg');
}

.coverage-business-interruption {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/business-interruption-insurance/business-interruption.jpg');
}

.coverage-commercial-umbrella {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/commercial-umbrella-insurance/commercial-umbrella.jpg');
}

/* Personal Lines Coverage Backgrounds */
.coverage-life-insurance {
  background-image: url('/images/insurance-type/personal-lines/life-insurance/life-insurance.jpg');
}

.coverage-health-insurance {
  background-image: url('/images/insurance-type/personal-lines/health-insurance/health-insurance.jpg');
}

.coverage-homeowners-insurance {
  background-image: url('/images/insurance-type/personal-lines/homeowners-insurance/homeowners-insurance.jpg');
}

.coverage-auto-insurance {
  background-image: url('/images/insurance-type/personal-lines/auto-insurance/auto-insurance.jpg');
}

.coverage-renters-insurance {
  background-image: url('/images/insurance-type/personal-lines/renters-insurance/renters-insurance.jpg');
}

.coverage-umbrella-insurance {
  background-image: url('/images/insurance-type/personal-lines/umbrella-insurance/umbrella-insurance.jpg');
}

.coverage-disability-insurance {
  background-image: url('/images/insurance-type/personal-lines/disability-insurance/disability-insurance.jpg');
}

.coverage-medicare-supplement {
  background-image: url('/images/insurance-type/personal-lines/health-insurance/medicare-supplemental-insurance/medicare-supplement.jpg');
}

/* Start Where You Are Section */
.start-where-you-are {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}

.start-where-you-are .section-intro {
  max-width: 800px;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  color: #555;
}

.decision-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-block.path-block {
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-block.path-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  transition: background 0.3s ease;
}

.service-block.path-block:hover::before {
  background: rgba(0,0,0,0.5);
}

.service-block.path-block p {
  background: rgba(0,0,0,0.5);
  padding: 0.5rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  width: 100%;
}

.service-block.path-block p,
.service-block.path-block .btn-secondary {
  position: relative;
  z-index: 1;
}

.service-block.new-coverage {
  background-image: url('/images/backgrounds/new-coverage.jpg');
}

.service-block.improve-coverage {
  background-image: url('/images/backgrounds/improve-coverage.jpg');
}

/* Choose Path Bridge */
.choose-path-bridge {
  background-color: #f0f4f8;
  padding: 3rem 1rem;
  text-align: center;
}

.choose-path-inner {
  max-width: 960px;
  margin: 0 auto;
}

.path-bridge-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.path-bridge-card {
  background: #fff;
  border-radius: 8px;
  padding: 1.5rem 2rem;
  text-decoration: none;
  color: #004080;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease;
}

.path-bridge-card:hover {
  transform: translateY(-4px);
}

.path-bridge-card img {
  max-width: 60px;
  margin-bottom: 0.75rem;
}

.path-bridge-card span {
  font-size: 1.1rem;
  font-weight: 600;
}

/* State Cards */
.state-cards {
  background-color: #f9f9f9;
  padding: 3rem 1rem;
  text-align: center;
}

.state-cards h2 {
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.state-cards p {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #555;
}

.state-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.state-card {
  background-color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: #004080;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Section Title */
.section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #004080;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-align: center;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #ffd700;
  margin: 0.5rem auto 0;
}

/* Footer Section */
.site-footer {
  background-color: #004080;
  color: #fff;
  padding: 2.5rem 1rem;
  font-size: 0.95rem;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-column {
  flex: 1 1 250px;
}

.footer-column h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #fff;
}

.footer-column p,
.footer-column li,
.footer-column a {
  color: #f0f0f0;
  line-height: 1.6;
}

.footer-column a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-column a:hover {
  color: #ffd700;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.5rem;
}

.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #ccc;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1rem;
}


/* ============================================================================
   6.5. QUOTE CTA SECTION (NEW)
   ============================================================================
   Quote request section with hero-matching button styles
   ========================================================================= */

/* Quote CTA Section */
.quote-cta-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  margin: 3rem 0;
}

.quote-cta-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.quote-cta-title {
  color: var(--color-white);
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

.quote-cta-subtitle {
  color: var(--color-white);
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  opacity: 0.95;
  line-height: 1.6;
}

.quote-cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

/* Enhanced Hero-Style CTA Buttons for Quote Section */
.cta-hero.cta-quick,
.cta-hero.cta-detailed {
  font-size: 1.15rem;
  padding: 1.25rem 2.5rem;
  min-width: 280px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  justify-content: center;
}

.cta-icon {
  font-size: 1.5rem;
  display: inline-block;
  margin-right: 0;
}

.cta-subtext {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.9;
  text-transform: none;
  letter-spacing: 0.5px;
  text-align: center;
}

.quote-cta-footer {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.quote-cta-phone,
.quote-cta-features {
  color: var(--color-white);
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

.quote-phone-link {
  color: #fbbf24;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #fbbf24;
  transition: all 0.3s ease;
}

.quote-phone-link:hover {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}


/* ============================================================================
   7. ABOUT PAGE STYLES
   ============================================================================
   Custom hero and content sections for About page
   ========================================================================= */

.about-hero {
  position: relative;
  min-height: calc(100vh - 7.2rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #1e3a8a;
}

.about-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.about-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.about-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, 
    transparent 0%, 
    transparent 25%, 
    rgba(30, 58, 138, 0.7) 40%,
    rgba(30, 58, 138, 0.95) 55%,
    #1e3a8a 70%);
  z-index: 2;
}

.about-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  padding: 1rem 1rem 2rem 1rem;
  display: flex;
  align-items: flex-start;
}

.about-hero-spacer {
  flex: 0 0 22%;
}

.about-hero-text {
  color: white;
  padding: 0rem 1rem 0rem 6rem;
  flex: 1;
  max-width: 100%;
}

.about-hero-text h1 {
  font-size: 2.2rem;
  margin-bottom: 0.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.about-hero-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
  font-size: 1rem;
  line-height: 1.55;
  position: relative;
  align-items: start;
}

.about-hero-columns > div {
  padding: 0.85rem;
  border-radius: 12px;
  transition: all 0.4s ease;
  cursor: pointer;
}

.about-hero-columns > div:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.about-hero-columns h3 {
  font-size: 1.3rem;
  color: #fbbf24;
  margin-bottom: 0.3rem;
  margin-top: 0.4rem;
  font-weight: 600;
}

.about-hero-columns h3:first-child {
  margin-top: 0;
}

.about-hero-columns p {
  margin-bottom: 0.5rem;
}

.hero-cta {
  text-align: center;
  margin-top: 0.25rem;
}

.hero-cta .btn-primary {
  /* Inherits hero-style from .btn-primary */
  /* Override colors for About page context */
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 4px solid var(--color-white);
  padding: 18px 40px;
  font-size: 1em;
}

.hero-cta .btn-primary:hover {
  background: var(--color-white);
  color: #1e3a8a;
  border-color: var(--color-white);
}

.about-content {
  padding: 5rem 0;
  background: white;
}

.about-intro {
  max-width: 900px;
  margin: 0 auto 4rem;
  text-align: center;
}

.about-intro p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 1.5rem;
}

.about-section {
  max-width: 900px;
  margin: 0 auto 3rem;
}

.about-section h2 {
  font-size: 2rem;
  color: #1e3a8a;
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.about-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #fbbf24);
  border-radius: 2px;
}

.about-section p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 1.2rem;
}

.about-section strong {
  color: #1e3a8a;
}

/* ============================================================================
   LICENSE BLOCKS - 3x3 GRID WITH IMAGE BACKGROUNDS
   ============================================================================ */

.licenses-grid-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.license-item {
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  border-left: none;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: all 0.3s ease;
  overflow: hidden;
}

.license-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 58, 138, 0.75);
  border-radius: 12px;
  transition: background 0.3s ease;
  z-index: 0;
}

.license-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.license-item:hover::before {
  background: rgba(30, 58, 138, 0.85);
}

.license-item h4,
.license-item p {
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.license-item h4 {
  color: #fbbf24;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.license-item p {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.license-authority {
  font-size: 0.85rem !important;
  color: #e2e8f0 !important;
  font-style: italic;
}

/* Individual state license backgrounds */
.license-iowa {
  background-image: url('/images/states/iowa/iowa-capitol.jpg');
}

.license-kansas {
  background-image: url('/images/states/kansas/kansas-capitol.jpg');
}

.license-maryland {
  background-image: url('/images/states/maryland/maryland-capitol.jpg');
}

.license-michigan {
  background-image: url('/images/states/michigan/michigan-capitol.jpg');
}

.license-ohio {
  background-image: url('/images/states/ohio/ohio-capitol.jpg');
}

.license-south-carolina {
  background-image: url('/images/states/south-carolina/south-carolina-capitol.jpg');
}

.license-south-dakota {
  background-image: url('/images/states/south-dakota/south-dakota-capitol.jpg');
}

.license-virginia {
  background-image: url('/images/states/virginia/virginia-capitol.jpg');
}

.license-west-virginia {
  background-image: url('/images/states/west-virginia/west-virginia-capitol.jpg');
}

/* ============================================================================
   SERVICES OVERVIEW - WHO WE SERVE
   ============================================================================ */

.services-overview {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 4rem 0;
}

/* ============================================================================
   WHO WE SERVE BLOCKS - 3x3 GRID WITH IMAGE BACKGROUNDS
   ============================================================================ */

.services-list-3x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.service-item {
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  padding: 1.5rem;
  border-radius: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 58, 138, 0.75);
  border-radius: 10px;
  transition: background 0.3s ease;
  z-index: 0;
}

.service-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.service-item:hover::before {
  background: rgba(30, 58, 138, 0.85);
}

.service-item h3,
.service-item p {
  position: relative;
  z-index: 1;
  color: white;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.service-item h3 {
  color: #fbbf24;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.service-item p {
  color: #e2e8f0;
  font-size: 0.95rem;
}

/* Individual service backgrounds */
.service-business {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/slide3b-business-owner.jpg');
}

.service-professionals {
  background-image: url('/images/insurance-type/commercial-lines/professional-liability-insurance/professional-liability.jpg');
}

.service-churches {
  background-image: url('/images/insurance-type/commercial-lines/religious-organizations/church.jpg');
}

.service-restaurants {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/restaurant.jpg');
}

.service-manufacturing {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/manufacturing.jpg');
}

.service-families {
  background-image: url('/images/insurance-type/personal-lines/family.jpg');
}

.service-farming {
  background-image: url('/images/insurance-type/commercial-lines/farm-insurance/farm.jpg');
}

.service-marine {
  background-image: url('/images/insurance-type/commercial-lines/business-insurance/marine-and-aviation/plane.jpg');
}

.service-recreational {
  background-image: url('/images/insurance-type/personal-lines/leisure-and-recreation/rv.jpg');
}

/* ============================================================================
   CONTACT CTA SECTION
   ============================================================================ */

.contact-cta {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.contact-cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-cta p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}


/* ============================================================================
   8. UI COMPONENTS (BUTTONS, CARDS, FORMS)
   ============================================================================
   Interactive elements and form controls
   All buttons now use hero-style glass-morphism design
   ========================================================================= */

.btn-primary {
  font-size: 1em;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 4px solid var(--color-white);
  text-decoration: none;
  font-weight: 700;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.4);
  border-radius: 0;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.5);
}

.btn-secondary {
  font-size: 1em;
  padding: 18px 40px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 4px solid var(--color-white);
  text-decoration: none;
  font-weight: 700;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.4);
  border-radius: 0;
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.5);
}

.btn-secondary.btn-h3 {
  font-size: 1.25em;
  padding: 20px 45px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  border: 4px solid var(--color-white);
  text-decoration: none;
  font-weight: 700;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.4);
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.btn-secondary.btn-h3:hover {
  background: var(--color-white);
  color: var(--color-primary);
  border-color: var(--color-white);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.6),
    0 8px 20px rgba(0, 0, 0, 0.5);
}


/* ============================================================================
   9. ANIMATIONS
   ============================================================================
   Keyframe animations for sliders and effects
   ========================================================================= */

@keyframes scrollStates {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.states-carousel:hover {
  animation-play-state: paused;
}

@keyframes scrollLogos {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================================
   10. RESPONSIVE DESIGN & MEDIA QUERIES
   ============================================================================
   Mobile and tablet optimizations
   Breakpoints: 768px (tablet), 968px (mobile nav), 1024px (about page)
   ========================================================================= */

@media (max-width: 1024px) {
  .about-hero-columns {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    font-size: 1rem;
  }
  
  .about-hero-text h1 {
    font-size: 2rem;
  }
  
  .block-grid-4col {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* About Page 3x3 Grids */
  .licenses-grid-3x3,
  .services-list-3x3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 968px) {
  .nav-container {
    position: relative;
  }

  .nav-toggle {
    display: block;
    order: 2;
  }

  .nav-links {
    flex-direction: column;
    background: var(--color-white);
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-medium);
    order: 3;
    z-index: var(--z-index-dropdown);
    justify-content: flex-start;
  }

  .nav-links.show {
    max-height: 500px;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-links li a {
    padding: 15px 20px;
    width: 100%;
  }

  .cta-mobile {
    display: block;
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: bold;
    padding: 10px 20px;
    border-radius: var(--border-radius-sm);
    text-align: center;
    margin: 10px 0;
    text-decoration: none;
    order: 4;
    width: 100%;
  }

  .cta-mobile:hover {
    background: var(--color-primary-dark);
  }
  
  .services-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 969px) {
  .nav-links {
    display: flex !important;
    max-height: none !important;
    overflow: visible !important;
  }
  
  .cta-mobile {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* About Page */
  .about-hero {
    min-height: auto;
  }
  
  .about-hero-overlay {
    background: linear-gradient(to bottom,
      transparent 0%,
      rgba(30, 58, 138, 0.7) 30%,
      rgba(30, 58, 138, 0.95) 50%,
      #1e3a8a 70%);
  }
  
  .about-hero-content {
    flex-direction: column;
    padding: 2rem 1rem;
  }
  
  .about-hero-spacer {
    display: none;
  }
  
  .about-hero-text {
    padding: 1.5rem;
  }
  
  .about-hero-text h1 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  
  .about-hero-columns {
    grid-template-columns: 1fr;
    gap: 1rem;
    font-size: 0.95rem;
  }
  
  .about-section h2 {
    font-size: 1.6rem;
  }
  
  .services-list {
    grid-template-columns: 1fr;
  }

  /* About Page 3x3 Grids */
  .licenses-grid-3x3,
  .services-list-3x3 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .license-item,
  .service-item {
    min-height: 180px;
  }

  /* Top bar */
  .top-bar-container {
    padding: 0 1rem;
    gap: 0.75rem;
  }

  .top-bar-left {
    gap: var(--spacing-sm);
  }

  .top-bar-phone {
    font-size: 0.95rem;
  }

  .top-bar-email {
    display: none;
  }

  .top-bar-states {
    font-size: 0.85rem;
  }

  /* Hero slider */
  .hero-overlay h1 {
    font-size: 2.5em;
    letter-spacing: 1px;
  }

  .hero-overlay p {
    font-size: 1.1em;
  }

  .cta-hero {
    font-size: 1em;
    padding: 12px 24px;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
  }

  .cta-hero {
    width: 100%;
  }
  
  .hero-slider {
    background: url('/images/hero/mobile-fallback.jpg') center center / cover no-repeat;
  }

  .slider-images {
    display: none;
  }

  /* Layout */
  .grid {
    flex-direction: column;
  }

  .container {
    padding: 15px;
  }
  
  /* Service intro */
  .service-intro p {
    padding: 0 1rem;
    font-size: 1rem;
  }
  
  /* Decision paths */
  .decision-paths {
    grid-template-columns: 1fr;
  }
  
  .btn-secondary.btn-h3 {
    font-size: 1.1rem;
  }
  
  /* Footer */
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-column {
    flex: 1 1 100%;
  }
  
  /* Quote CTA Mobile Responsive */
  .quote-cta-title {
    font-size: 1.8rem;
  }

  .quote-cta-subtitle {
    font-size: 1rem;
  }

  .quote-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .cta-hero.cta-quick,
  .cta-hero.cta-detailed {
    width: 100%;
    max-width: 350px;
  }

  .quote-cta-footer {
    flex-direction: column;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .services-container {
    grid-template-columns: 1fr;
  }
  
  .block-grid-4col {
    grid-template-columns: 1fr;
  }
  
  .service-block h3 {
    font-size: 1.2rem;
  }
  
  .service-block p {
    font-size: 0.9rem;
  }
}


/* ============================================================================
   END OF STYLESHEET
   ============================================================================
   
   MAINTENANCE NOTES:
   ===================
   - Use CSS variables for colors and spacing to maintain consistency
   - Test navigation toggle functionality when modifying .nav-links styles
   - Mobile menu requires JavaScript to toggle .show class on .nav-links
   - Hero slider requires JavaScript to add/remove .active class on slides
   - Hero overlay is positioned WITHIN each slide for per-slide customization
   - States carousel requires duplicated content in HTML for seamless loop
   - Quote CTA buttons inherit from .cta-hero and extend with specific classes
   
   JAVASCRIPT DEPENDENCIES:
   ========================
   1. Navigation Toggle:
      - Toggle .show class on .nav-links when hamburger button clicked
   
   2. Hero Slider:
      - Add/remove .active class on slides every 3.5 seconds
      - Parallax effect on scroll
   
   BROWSER COMPATIBILITY:
   ======================
   - CSS Variables: IE11+ (consider fallbacks if IE11 support needed)
   - Flexbox: All modern browsers, IE10+ with prefixes
   - Sticky positioning: Not supported in IE (degrades gracefully to static)
   - CSS Animations: All modern browsers, IE10+
   - Object-fit: Not supported in IE (images may distort in IE)
   - CSS Grid: Modern browsers, IE11 with -ms- prefix
   
   FUTURE ENHANCEMENTS:
   ====================
   - Add form styling section for contact/quote forms
   - Create utility classes for common patterns (text-center, mt-20, etc.)
   - Consider adding print stylesheet
   - Add dark mode support using CSS variables
   
   PERFORMANCE NOTES:
   ==================
   - Hero slider images should be optimized (WebP format recommended)
   - Consider lazy loading for images below fold
   - CSS file should be minified in production
   - Consider critical CSS extraction for above-fold content
   
   ========================================================================= */