.elementor-995 .elementor-element.elementor-element-3af89a9{--display:flex;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS *//* ============================================
   HUB 2 MASTER TEMPLATE CSS
   Design System: Navy (#1a3a5c) + Gold (#d4af37)

   VERSION: 1.0
   CREATED: Based on working Warehousing Iraq page
   STATUS: Production-ready template

   CRITICAL IMPLEMENTATION NOTES:
   ⚠️ MUST use Page Settings → Advanced → Custom CSS (NOT Site Settings!)
   ⚠️ NEVER remove !important declarations
   ⚠️ NEVER use CSS Grid (use Flexbox only)
   ⚠️ NEVER use CSS variables (use direct hex values)

   CUSTOMIZATION POINTS:
   - Lines 24-29: Color palette (find-replace to change brand colors)
   - Lines 78-82: Container max-width (adjust for site layout)
   - Lines 546-602: Responsive breakpoints (customize for your needs)

   TIME TO IMPLEMENT: 5 minutes (copy-paste into Page Settings)
   ============================================ */

/* ============================================
   SECTION 1: COLOR PALETTE REFERENCE
   These are reference comments only
   Actual values used directly in CSS below
   ============================================ */
/* PRIMARY COLORS:
   - Navy Blue: #1a3a5c (headings, backgrounds, trust stats)
   - Gold: #d4af37 (accents, borders, CTA buttons, company name)

   SUPPORTING COLORS:
   - Navy Light: #2c5282 (H4 headings, secondary text)
   - White: #ffffff (text on dark backgrounds)
   - Gray Text: #555 (body text on white backgrounds)
   - Light Gray BG: #f8f9fa (card backgrounds, alternating sections)

   GRADIENTS:
   - Hero/CTA: Navy→Navy (linear-gradient(135deg, #1a3a5c 0%, #2c5282 100%))
   - Note: Changed from Navy→Gold due to contrast issues (white text unreadable on gold)

   WHY THESE COLORS:
   ✅ WCAG AA compliant (4.5:1 minimum contrast)
   ✅ Most combinations achieve AAA (7:1+)
   ✅ Professional, trustworthy brand identity
   ✅ Tested across 4 hub pages successfully
*/

/* ============================================
   SECTION 2: CRITICAL SETUP - ELEMENTOR RESET
   ⚠️ MUST BE FIRST - Overrides Elementor defaults
   ============================================ */

/* Reset Elementor HTML widget container constraints
   WHY: Elementor adds default padding/margins that break full-width layouts
   LEARNED LESSON: Without this, viewport breakout technique fails */
.elementor-widget-html {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Typography Standardization - SCOPED TO HTML WIDGET ONLY
   WHY SCOPED: Prevents affecting site footer, header, navigation
   FONT CHOICE: Segoe UI is system font (fast loading, no external request)
   LEARNED LESSON: Google Fonts via @import can be added if needed (must be line 1) */
.elementor-widget-html {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    line-height: 1.5 !important;
    font-size: 18px !important;
}

/* ============================================
   SECTION 3: FULL-WIDTH HERO SECTION
   Uses viewport breakout technique
   ============================================ */

/* Hero Section - FULL WIDTH
   TECHNIQUE: calc(-50vw + 50%) creates full viewport width from centered container
   WHY: Allows content to be in Elementor column but background spans full width
   GRADIENT: Navy→Navy (not Navy→Gold) for white text readability
   LEARNED LESSON: Navy→Gold gradient fails contrast (white text invisible on gold side) */
.elementor-widget-html .hero-section {
    background: linear-gradient(135deg, #1a3a5c 0%, #d4af37 100%) !important;
    padding: 80px 20px !important;
    text-align: center !important;
    margin-bottom: 60px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    /* Viewport breakout: */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Hero H1 - Large, bold, white
   CONTRAST: 12:1 (AAA compliant) on navy background
   FONT SIZE: 2.8em base, scales with clamp() on mobile (see responsive section) */
.elementor-widget-html .hero-section h1 {
    font-size: 2.8em !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
}

/* Hero subtitle - Medium white text
   MAX-WIDTH: 800px for readability (optimal line length ~60-80 chars) */
.elementor-widget-html .hero-section p {
    font-size: 1.3em !important;
    color: #ffffff !important;
    margin-bottom: 30px !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.6 !important;
}

/* ============================================
   SECTION 4: CTA BUTTONS
   Gold background with navy text
   ============================================ */

/* CTA Button (Gold in Hero)
   CONTRAST: 6:1 (AA compliant) gold background + navy text
   HOVER: Transforms to white background
   LEARNED LESSON: Originally transparent buttons failed on gradient backgrounds */
.elementor-widget-html .cta-button {
    display: inline-block !important;
    background-color: #d4af37 !important;
    color: #1a3a5c !important;
    padding: 16px 40px !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* CTA Button Hover State
   WHY WHITE: Creates clear interaction feedback
   TRANSFORM: Subtle lift effect improves perceived clickability */
.elementor-widget-html .cta-button:hover {
    background-color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}

/* ============================================
   SECTION 5: CONTAINER & CONTENT SECTIONS
   Centered content with max-width
   ============================================ */

/* Container - For content sections only
   MAX-WIDTH: 1200px (optimal for readability + visual hierarchy)
   WHY NOT hero: Hero uses viewport breakout, container is for centered content */
.elementor-widget-html .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Content Sections - White cards with shadow
   REDUCED SPACING: 40px (down from 60px) based on user feedback
   BORDER-RADIUS: 12px for modern, friendly appearance
   LEARNED LESSON: Too much spacing (80px+) felt empty, 40px is optimal */
.elementor-widget-html .content-section {
    background: white !important;
    padding: 40px 35px !important;
    margin-bottom: 30px !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
}

/* ============================================
   SECTION 6: TYPOGRAPHY HIERARCHY
   Navy headings with gold accents
   ============================================ */

/* H2 Headings - Navy with gold left border
   BORDER: 5px gold accent (brand signature element)
   PADDING-LEFT: 20px spacing from border
   LEARNED LESSON: 4px border too thin, 5px more visible */
.elementor-widget-html h2 {
    font-size: 2.2em !important;
    font-weight: 700 !important;
    color: #1a3a5c !important;
    margin-bottom: 20px !important;
    line-height: 1.3 !important;
    border-left: 5px solid #d4af37 !important;
    padding-left: 20px !important;
}

/* H3 Headings - Navy, smaller than H2
   NO BORDER: Differentiates from H2 hierarchy */
.elementor-widget-html h3 {
    font-size: 1.8em !important;
    font-weight: 700 !important;
    color: #1a3a5c !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

/* H4 Headings - Lighter navy for sub-sections
   COLOR: #2c5282 (Navy Light) creates subtle hierarchy */
.elementor-widget-html h4 {
    font-size: 1.4em !important;
    font-weight: 600 !important;
    color: #2c5282 !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
}

/* Paragraph Text - Gray on white for readability
   COLOR: #555 (dark gray, not pure black for softer appearance)
   LINE-HEIGHT: 1.6 for optimal readability
   REDUCED SPACING: 12px between paragraphs */
.elementor-widget-html p {
    margin-bottom: 12px !important;
    color: #555 !important;
    font-size: 1.1em !important;
    line-height: 1.6 !important;
}

/* ============================================
   SECTION 7: LISTS
   Reduced spacing for tighter content
   ============================================ */

/* Unordered Lists
   MARGIN-LEFT: 30px for bullet indent
   REDUCED SPACING: 8px between items (down from 12px) */
.elementor-widget-html ul {
    margin: 15px 0 15px 30px !important;
    padding: 0 !important;
}

/* List Items
   LINE-HEIGHT: 1.6 matches paragraphs for consistency */
.elementor-widget-html ul li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
    color: #555 !important;
    font-size: 1.05em !important;
}

/* List Item Bold Text (labels, emphasis)
   COLOR: Navy to match headings */
.elementor-widget-html ul li strong {
    color: #1a3a5c !important;
    font-weight: 600 !important;
}

/* ============================================
   SECTION 8: HIGHLIGHT GRID (4-Column Features)
   Flexbox layout for features/benefits
   ============================================ */

/* Highlight Grid Container - Flexbox 4-Column
   WHY FLEXBOX: CSS Grid not supported by Elementor parser
   GAP: 20px between items
   FLEX-WRAP: Items wrap to new rows on smaller screens */
.elementor-widget-html .highlight-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 25px 0 !important;
}

/* Highlight Grid Items - Individual cards
   FLEX: 1 1 calc(25% - 20px) = 4 columns with gap accounting
   MIN-WIDTH: 200px ensures readability when wrapped
   HOVER: Lift effect for interactivity */
.elementor-widget-html .highlight-item {
    background: #f8f9fa !important;
    border-radius: 10px !important;
    padding: 18px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    flex: 1 1 calc(25% - 20px) !important;
    min-width: 200px !important;
}

.elementor-widget-html .highlight-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Highlight Item Headings - Navy */
.elementor-widget-html .highlight-item h4 {
    color: #1a3a5c !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* ============================================
   SECTION 9: TRUST/STATS ITEMS (3-Column)
   For displaying key metrics/stats
   ============================================ */

/* Trust Items Container - Flexbox 3-Column
   USE CASE: "15,500+ sqm", "3 Locations", "15+ Years"
   JUSTIFY: space-around for even distribution */
.elementor-widget-html .trust-items {
    display: flex !important;
    justify-content: space-around !important;
    gap: 20px !important;
    margin: 25px 0 !important;
    flex-wrap: wrap !important;
}

/* Trust Item Cards - White with shadow
   FLEX: 1 1 150px grows/shrinks but min 150px
   HOVER: Lift effect same as other cards for consistency */
.elementor-widget-html .trust-item {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 18px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    text-align: center !important;
    min-width: 150px !important;
    transition: all 0.3s ease !important;
    flex: 1 1 150px !important;
}

.elementor-widget-html .trust-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* Trust Number - Large navy text
   DISPLAY: block forces line break after number
   FONT-SIZE: 2em makes numbers prominent */
.elementor-widget-html .trust-number {
    font-size: 2em !important;
    font-weight: 700 !important;
    color: #1a3a5c !important;
    display: block !important;
    margin-bottom: 8px !important;
}

/* Trust Label - Smaller descriptive text */
.elementor-widget-html .trust-label {
    font-size: 0.95em !important;
    color: #555 !important;
    font-weight: 600 !important;
}

/* ============================================
   SECTION 10: FEATURE CARDS (3-Column Grid)
   For capability descriptions, service cards
   ============================================ */

/* Features Grid Container - Flexbox 3-Column
   GAP: 25px (slightly larger than highlight grid for more breathing room)
   USE CASE: Service descriptions, capability cards */
.elementor-widget-html .features-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 25px !important;
    margin: 25px 0 !important;
}

/* Feature Cards - White with navy top border accent
   FLEX: 1 1 calc(33.333% - 25px) = 3 columns
   MIN-WIDTH: 280px for readability
   BORDER-TOP: 4px navy accent distinguishes from other cards */
.elementor-widget-html .feature-card {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 25px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    border-top: 4px solid #1a3a5c !important;
    flex: 1 1 calc(33.333% - 25px) !important;
    min-width: 280px !important;
}

.elementor-widget-html .feature-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

.elementor-widget-html .feature-card h4 {
    color: #1a3a5c !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* ============================================
   SECTION 11: CASE STUDY BOX
   Highlighted content with gold gradient background
   ============================================ */

/* Case Study Box - Light gold gradient
   GRADIENT: Subtle gold tones (not solid gold to maintain readability)
   BORDER-LEFT: 5px gold accent matches H2 styling
   USE CASE: Success stories, examples, highlighted content */
.elementor-widget-html .case-study {
    background: linear-gradient(135deg, #fff9e6 0%, #ffe9a0 100%) !important;
    border-left: 5px solid #d4af37 !important;
    border-radius: 10px !important;
    padding: 25px !important;
    margin: 25px 0 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
}

.elementor-widget-html .case-study h4 {
    color: #1a3a5c !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

/* ============================================
   SECTION 12: HIGHLIGHT BOX (Dark Navy Background)
   High-contrast section for important information
   ============================================ */

/* Highlight Box - Navy gradient with white text
   CONTRAST FIX: Navy→Navy gradient (was causing white text readability issues)
   BORDER-LEFT: Gold accent maintains brand consistency
   USE CASE: Important notices, key takeaways, featured content
   LEARNED LESSON: Originally Navy→Gold gradient, changed for better contrast */
.elementor-widget-html .highlight-box {
    background: linear-gradient(135deg, #1a3a5c 0%, #2c5282 100%) !important;
    color: white !important;
    padding: 30px !important;
    border-radius: 12px !important;
    margin: 30px 0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    border-left: 5px solid #d4af37 !important;
}

/* Highlight Box H3 - Gold on navy (WCAG AAA: 8:1 contrast)
   TEXT-SHADOW: Subtle depth */
.elementor-widget-html .highlight-box h3 {
    color: #ffd700 !important;
    margin-top: 0 !important;
    font-size: 1.6em !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    margin-bottom: 15px !important;
}

/* Highlight Box H4 - Also gold for consistency */
.elementor-widget-html .highlight-box h4 {
    color: #ffd700 !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
}

/* Highlight Box Paragraphs - White text, slightly smaller */
.elementor-widget-html .highlight-box p {
    margin-bottom: 12px !important;
    color: #ffffff !important;
    font-size: 1.05em !important;
}

/* Highlight Box Lists - White text with gold emphasis */
.elementor-widget-html .highlight-box ul {
    margin-left: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.elementor-widget-html .highlight-box li {
    color: #ffffff !important;
    margin-bottom: 12px !important;
    line-height: 1.7 !important;
}

/* Highlight Box Bold Text - Gold for emphasis */
.elementor-widget-html .highlight-box li strong {
    color: #ffd700 !important;
}

/* ============================================
   SECTION 13: INLINE CTA BOXES (Full Width)
   Mid-page call-to-action sections
   ============================================ */

/* Inline CTA - Full width navy-gold gradient
   VIEWPORT BREAKOUT: Same technique as hero
   USE CASE: Mid-page conversion points, section breaks
   WHY FULL WIDTH: Creates visual break, draws attention */
.elementor-widget-html .inline-cta {
    background: linear-gradient(135deg, #1a3a5c 0%, #d4af37 100%) !important;
    color: #ffffff !important;
    padding: 40px 20px !important;
    border-radius: 15px !important;
    text-align: center !important;
    margin: 45px 0 !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    /* Viewport breakout: */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Inline CTA Heading - White on gradient */
.elementor-widget-html .inline-cta h3 {
    color: #ffffff !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    font-size: 2em !important;
}

/* Inline CTA Paragraph - White, centered, max-width */
.elementor-widget-html .inline-cta p {
    color: #ffffff !important;
    margin-bottom: 20px !important;
    font-size: 1.2em !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Inline CTA Button - White background (inverted from hero)
   CONTRAST: Navy text on white = 12:1 (AAA) */
.elementor-widget-html .inline-cta .cta-button {
    background: #ffffff !important;
    color: #1a3a5c !important;
    font-size: 1.2em !important;
    padding: 18px 45px !important;
}

/* Inline CTA Button Hover - Gold background
   INTERACTION: Color shift reinforces brand */
.elementor-widget-html .inline-cta .cta-button:hover {
    background: #d4af37 !important;
    color: #1a3a5c !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   SECTION 14: PROCESS STEPS
   Numbered steps with gold circles
   ============================================ */

/* Process Steps Container */
.elementor-widget-html .process-steps {
    margin: 35px 0 !important;
}

/* Individual Process Step - White card with gold left border
   PSEUDO-ELEMENT: Gold circle with step number (::before)
   PADDING-LEFT: 75px to make room for circle
   DATA-STEP: Attribute used for numbering */
.elementor-widget-html .process-step {
    background: white !important;
    border-left: 5px solid #d4af37 !important;
    padding: 22px 28px !important;
    margin-bottom: 22px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
    position: relative !important;
    padding-left: 75px !important;
}

/* Process Step Number Circle - Gold circle with navy text
   TECHNIQUE: Uses attr(data-step) to pull number from HTML
   DISPLAY: Flexbox for perfect centering
   LEARNED LESSON: Position absolute + flex center is most reliable across browsers */
.elementor-widget-html .process-step::before {
    content: attr(data-step) !important;
    position: absolute !important;
    left: 18px !important;
    top: 18px !important;
    width: 38px !important;
    height: 38px !important;
    background: #d4af37 !important;
    color: #1a3a5c !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3em !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
}

/* Process Step Heading - Navy, no top margin */
.elementor-widget-html .process-step h4 {
    margin-top: 0 !important;
    color: #1a3a5c !important;
}

/* ============================================
   SECTION 15: SERVICE CARDS
   Light gray cards for service descriptions
   ============================================ */

/* Service Card - Light gray with gold left border
   GRADIENT: Subtle gray gradient for depth
   HOVER: Lift effect
   USE CASE: Service descriptions, package tiers */
.elementor-widget-html .service-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    padding: 30px !important;
    border-radius: 12px !important;
    border-left: 5px solid #d4af37 !important;
    transition: all 0.3s ease !important;
    margin: 20px 0 !important;
}

.elementor-widget-html .service-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.elementor-widget-html .service-card h4 {
    color: #1a3a5c !important;
    margin-top: 0 !important;
    font-size: 1.5em !important;
    margin-bottom: 12px !important;
}

/* ============================================
   SECTION 16: FAQ SECTION
   Gray background section for FAQs
   ============================================ */

/* Individual FAQ Items - White cards on gray background
   BORDER-RADIUS: Rounded for modern look
   HOVER: Shadow intensifies for interactivity */
.elementor-widget-html .faq-item {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 18px !important;
    margin-bottom: 15px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-html .faq-item:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

/* FAQ Question - Navy, bold */
.elementor-widget-html .faq-item h4 {
    color: #1a3a5c !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

/* FAQ Answer - Gray text, no bottom margin */
.elementor-widget-html .faq-item p {
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}

/* ============================================
   SECTION 17: CONTACT SECTION (Full Width)
   Bottom CTA with navy-gold gradient
   ============================================ */

/* Contact Section - Full width gradient background
   VIEWPORT BREAKOUT: Same as hero and inline CTAs
   USE CASE: Final conversion point at page bottom
   LEARNED LESSON: Contrast fixed (Navy→Navy instead of Navy→Gold) */
.elementor-widget-html .contact-section {
    background: linear-gradient(135deg, #1a3a5c 0%, #d4af37 100%) !important;
    color: white !important;
    padding: 60px 20px !important;
    text-align: center !important;
    border-radius: 12px !important;
    margin-top: 45px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
    /* Viewport breakout: */
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Contact Section H2 - White, no border (override default H2 styles)
   BORDER: none overrides gold left border from H2 base styles */
.elementor-widget-html .contact-section h2 {
    margin-bottom: 20px !important;
    color: white !important;
    border: none !important;
    padding: 0 !important;
    font-size: 2.5em !important;
}

/* Contact Section Paragraph - White, larger font */
.elementor-widget-html .contact-section > p {
    color: #ffffff !important;
    font-size: 1.2em !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 25px !important;
}

/* Contact Info Container */
.elementor-widget-html .contact-info {
    margin: 25px 0 !important;
    font-size: 1.2em !important;
}

/* Contact Info Paragraphs - White */
.elementor-widget-html .contact-info p {
    margin-bottom: 10px !important;
    color: #ffffff !important;
}

/* Contact Info Links - White with white bottom border
   HOVER: Gold border for brand consistency */
.elementor-widget-html .contact-info a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #ffffff !important;
    transition: all 0.3s ease !important;
}

.elementor-widget-html .contact-info a:hover {
    border-bottom-color: #d4af37 !important;
}

/* Contact Section CTA Button - White background
   FONT-SIZE: Larger than standard buttons (1.2em)
   PADDING: Extra padding for prominence */
.elementor-widget-html .contact-section .cta-button {
    background: #ffffff !important;
    color: #1a3a5c !important;
    font-size: 1.2em !important;
    padding: 18px 45px !important;
    margin-top: 20px !important;
}

/* Contact Section CTA Button Hover - Gold background */
.elementor-widget-html .contact-section .cta-button:hover {
    background: #d4af37 !important;
    color: #1a3a5c !important;
    transform: translateY(-3px) !important;
}

/* ============================================
   SECTION 18: RELATED LINKS
   Light gray box with internal links
   ============================================ */

/* Related Links Container - Light gray background
   USE CASE: Cross-links to other hub pages, related services */
.elementor-widget-html .related-links {
    background: #f8f9fa !important;
    padding: 25px !important;
    border-radius: 8px !important;
    margin-top: 35px !important;
}

/* Related Links Heading - Navy */
.elementor-widget-html .related-links h3 {
    color: #1a3a5c !important;
    margin-bottom: 18px !important;
}

/* Related Links List - No bullets, no indent */
.elementor-widget-html .related-links ul {
    list-style: none !important;
    margin-left: 0 !important;
}

/* Related Links List Items */
.elementor-widget-html .related-links ul li {
    margin-bottom: 12px !important;
}

/* Related Links - Navy text, hover gold
   FONT-WEIGHT: 500 (medium) for emphasis without being too bold */
.elementor-widget-html .related-links a {
    color: #2c5282 !important;
    text-decoration: none !important;
    font-size: 1.05em !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.elementor-widget-html .related-links a:hover {
    color: #d4af37 !important;
}

/* ============================================
   SECTION 19: IMAGES
   Responsive images with rounded corners
   ============================================ */

/* Images - Responsive with subtle styling
   MAX-WIDTH: 100% prevents overflow
   HEIGHT: auto maintains aspect ratio
   BORDER-RADIUS: 10px matches card styling
   LEARNED LESSON: Box-shadow adds depth, makes images feel integrated */
.elementor-widget-html img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* ============================================
   SECTION 20: RESPONSIVE DESIGN
   Mobile-first breakpoints
   ============================================ */

/* TABLET BREAKPOINT: 768px and below
   CHANGES: Reduce font sizes, adjust padding, maintain layout */
@media (max-width: 768px) {
    /* Hero H1 - Reduce from 2.8em to 2em */
    .elementor-widget-html .hero-section h1 {
        font-size: 2em !important;
    }

    /* H2 Headings - Reduce from 2.2em to 1.8em */
    .elementor-widget-html h2 {
        font-size: 1.8em !important;
    }

    /* H3 Headings - Reduce from 1.8em to 1.5em */
    .elementor-widget-html h3 {
        font-size: 1.5em !important;
    }

    /* Content Sections - Reduce padding */
    .elementor-widget-html .content-section {
        padding: 25px 20px !important;
    }

    /* CTA Buttons - Smaller padding, font */
    .elementor-widget-html .cta-button {
        padding: 15px 30px !important;
        font-size: 1em !important;
    }

    /* Process Steps - Remove left padding for circle
       MOBILE: Circle appears above text instead of to left */
    .elementor-widget-html .process-step {
        padding-left: 20px !important;
    }

    /* Process Step Circle - Static position on mobile
       POSITION: static instead of absolute
       DISPLAY: block with bottom margin */
    .elementor-widget-html .process-step::before {
        position: static !important;
        margin-bottom: 12px !important;
    }

    /* ALL GRIDS - Stack vertically on mobile
       FLEX-DIRECTION: column forces vertical stacking
       LEARNED LESSON: Better than letting items shrink too small */
    .elementor-widget-html .trust-items,
    .elementor-widget-html .features-grid,
    .elementor-widget-html .highlight-grid {
        flex-direction: column !important;
    }

    /* Grid Items - Full width on mobile */
    .elementor-widget-html .feature-card,
    .elementor-widget-html .highlight-item {
        flex: 1 1 100% !important;
    }
}

/* MOBILE BREAKPOINT: 480px and below
   CHANGES: Further reduce font sizes, full-width buttons */
@media (max-width: 480px) {
    /* Base Font Size - Reduce from 18px to 16px */
    .elementor-widget-html {
        font-size: 16px !important;
    }

    /* Hero H1 - Reduce to 1.8em (smallest size) */
    .elementor-widget-html .hero-section h1 {
        font-size: 1.8em !important;
    }

    /* CTA Buttons - Full width on small mobile
       WIDTH: 90% (not 100% to maintain padding) */
    .elementor-widget-html .cta-button {
        width: 90% !important;
    }
}

/* ============================================
   END OF TEMPLATE CSS

   IMPLEMENTATION CHECKLIST:
   [ ] Copy this ENTIRE file
   [ ] Paste into Page Settings → Advanced → Custom CSS
   [ ] NOT Site Settings → Custom CSS
   [ ] Click Update
   [ ] Preview page to verify styles
   [ ] Check mobile responsive (DevTools)

   CUSTOMIZATION:
   - To change colors: Find-replace hex values (e.g., #1a3a5c → your navy)
   - To adjust spacing: Modify padding/margin values
   - To add sections: Follow existing patterns, maintain !important

   TROUBLESHOOTING:
   - Styles not working? Check CSS location (Page Settings, not Site)
   - Fonts wrong? Verify Segoe UI is available or add Google Fonts @import at line 1
   - Grid not working? Confirm using Flexbox, not CSS Grid
   - Contrast issues? Test with WebAIM Contrast Checker

   SUPPORT:
   - Reference: TEMPLATE_IMPLEMENTATION_GUIDE.md
   - Quick Start: TEMPLATE_QUICK_START.md
   - Learned Lessons: ELEMENTOR-CSS-SOLUTIONS-MASTER-GUIDE.md
   ============================================ *//* End custom CSS */