/* River Tech Source - Elegant CSS Styles */

/* CSS Reset and Base Styles - Clean foundation */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root Variables - Defining our brand colors */
:root {
    --primary-red: #C1272D;        /* River Tech Source brand red */
    --white: #FFFFFF;              /* Pure white for text and contrast */
    --dark-gray: #333333;          /* Professional dark text */
    --light-gray: #F8F8F8;         /* Subtle background */
    --black: #000000;              /* Strong headlines */
    --shadow: rgba(193, 39, 45, 0.1); /* Subtle red shadow */
}

/* Base typography - Elegant font system */
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--white);
    overflow-x: hidden;            /* Prevent horizontal scroll */
}

/* Container class - Centering content with elegance */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section base styling - Consistent spacing */
section {
    padding: 80px 0;              /* Generous white space for elegance */
}

/* Responsive Design Strategy - Mobile First Approach */

/* 
EXPLANATION OF CSS CONCEPTS:

1. CSS RESET (* selector):
   - Removes browser default margins/padding
   - Makes styling consistent across all browsers

2. CSS VARIABLES (:root):
   - Store reusable values (colors, sizes)
   - Easy to change theme colors globally
   - Example: var(--primary-red) = #C1272D

3. BOX-SIZING:
   - border-box includes padding in element width
   - Prevents layout breaking when adding borders/padding

4. MOBILE-FIRST RESPONSIVE:
   - Design for mobile first, then scale up
   - Uses min-width media queries (not max-width)
   - This is modern best practice
*/

/* Mobile styling (default) */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;          /* Smaller side margins on mobile */
    }
    
    section {
        padding: 40px 0;         /* Less padding on mobile */
    }
}

/* Tablet styling */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 30px;          /* Medium margins for tablet */
    }
}

/* Desktop styling (1025px+) - No media query needed */

/* HEADER NAVIGATION STYLING */

/* 
CONCEPT 1: FLEXBOX LAYOUT
- Creates flexible, responsive layouts
- Automatically distributes space between elements
- Perfect for navigation bars
*/

.header {
    background-color: var(--white);        /* Clean white background */
    box-shadow: 0 2px 10px var(--shadow);    /* Elegant subtle shadow */
    position: sticky;                        /* Stays at top when scrolling */
    top: 0;
    z-index: 1000;                          /* Above other content */
}

/* 
CONCEPT 2: FLEXBOX PROPERTIES
- display: flex = enables flexbox
- justify-content: space-between = spreads elements apart
- align-items: center = vertically centers items
*/

.nav {
    padding: 15px 0;                       /* Top/bottom spacing only */
}

/* Nav container - flexbox layout for logo and links */
.nav .container {
    display: flex;                         /* Enable flexbox on container */
    justify-content: space-between;        /* Logo left, links right */
    align-items: center;                   /* Vertical centering */
}

/* Logo section styling */
.logo {
    display: flex;                         /* Logo + text side by side */
    align-items: center;                   /* Vertical center alignment */
    gap: 10px;                            /* Space between logo & text */
}

.logo-img {
    height: 40px;                          /* Controlled image size */
    width: auto;                           /* Maintains aspect ratio */
    border-radius: 5px;                    /* Subtle rounded corners */
}

.logo-text {
    font-weight: 700;                      /* Bold font weight */
    font-size: 1.5rem;                     /* Larger text size */
    color: var(--primary-red);             /* Brand red color */
}

/* Nav links and primary CTA */
.nav-links { list-style: none; display: flex; gap: 24px; }
.nav-links a { text-decoration: none; color: var(--dark-gray); font-weight: 600; transition: color .2s ease, transform .2s ease; }
.nav-links a:hover, .nav-links a:focus { color: var(--primary-red); transform: translateY(-1px); }
.nav-cta { padding: 10px 16px; background: var(--primary-red); color: var(--white) !important; border-radius: 6px; box-shadow: 0 6px 14px rgba(193, 39, 45, 0.18); }
.nav-cta:hover, .nav-cta:focus { background: #a91f25; box-shadow: 0 8px 18px rgba(193, 39, 45, 0.22); }

/* HAMBURGER MENU BUTTON STYLING */

/* Hide hamburger on desktop - only show on mobile */
.hamburger {
    display: none;                          /* Hidden by default (desktop) */
    flex-direction: column;                 /* Stack lines vertically */
    justify-content: space-between;         /* Space lines evenly */
    width: 30px;                            /* Button width */
    height: 24px;                           /* Button height */
    background: transparent;                /* No background */
    border: none;                           /* Remove default border */
    cursor: pointer;                        /* Show it's clickable */
    padding: 0;                             /* Remove default padding */
}

/* The 3 horizontal lines that make ☰ */
.hamburger .line {
    width: 100%;                            /* Full width of button (30px) */
    height: 3px;                            /* Thickness of each line */
    background-color: var(--dark-gray);     /* Dark gray color */
    border-radius: 2px;                     /* Slightly rounded ends */
    transition: all 0.3s ease;              /* Smooth animation for X transform */
}

/* Transform hamburger to X when menu is open */
.hamburger.active .line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);  /* Move down & rotate to \ */
}

.hamburger.active .line:nth-child(2) {
    opacity: 0;                             /* Hide middle line */
    transform: translateX(-20px);           /* Slide out for smooth effect */
}

.hamburger.active .line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg); /* Move up & rotate to / */
}

/* Mobile tweaks for navigation */
@media (max-width: 768px) {
    .nav { 
        padding: 12px 0;
        position: relative;                 /* For absolute positioning of menu */
    }
    
    /* Hide nav links by default on mobile */
    .nav-links {
        display: none;                      /* Hidden by default */
        position: absolute;                 /* Overlay positioning */
        top: 100%;                          /* Below the nav bar */
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;             /* Stack links vertically */
        background: var(--white);           /* White background */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);  /* Shadow for depth */
        padding: 20px 0;                    /* Vertical spacing */
        gap: 0;                             /* Remove gap, use padding instead */
    }
    
    /* Show nav links when active (menu open) */
    .nav-links.active {
        display: flex;                      /* Show menu */
    }
    
    /* Style individual nav items for mobile */
    .nav-links li {
        width: 100%;                        /* Full width */
        text-align: center;                 /* Center text */
        padding: 15px 20px;                 /* Large tap area */
        border-bottom: 1px solid var(--light-gray);  /* Divider line */
    }
    
    .nav-links li:last-child {
        border-bottom: none;                /* No border on last item */
    }
    
    .nav-links a {
        display: block;                     /* Full clickable area */
        font-size: 1rem;                    /* Readable size */
    }
    
    .nav-cta { 
        padding: 12px 24px;                 /* Larger button on mobile */
        border-radius: 6px;
        display: inline-block;              /* Button stays inline */
    }
    
    /* Show hamburger on mobile */
    .hamburger {
        display: flex;                      /* Show hamburger button */
    }
}

/* HERO SECTION STYLING */

/* 
CONCEPT: LINEAR GRADIENT
- Creates smooth color transition from one color to another
- 135deg = diagonal direction (top-left to bottom-right)
- Adds depth and modern look to the hero section
*/
.hero {
    background: linear-gradient(135deg, var(--primary-red) 0%, #8B1A1F 100%);
    color: var(--white);                /* White text on red background */
    padding: 120px 0;                   /* Large vertical spacing for impact */
    text-align: center;                 /* Center all content */
}

/* Hero content container - limits width for readability */
.hero-content {
    max-width: 800px;                   /* Prevents text from being too wide */
    margin: 0 auto;                     /* Centers the content horizontally */
    padding: 0 20px;                    /* Side padding for mobile */
}

/* Main headline styling */
.hero-title {
    font-size: 3rem;                    /* 48px - Large, attention-grabbing */
    font-weight: 700;                   /* Bold weight for emphasis */
    margin-bottom: 20px;                /* Space below title */
    line-height: 1.2;                   /* Tighter line height for headlines */
}

/* Subtitle/tagline styling */
.hero-subtitle {
    font-size: 1.25rem;                 /* 20px - Readable but smaller than title */
    margin-bottom: 30px;                /* Space before buttons */
    opacity: 0.95;                      /* Slightly transparent for visual hierarchy */
}

/* Button container using Flexbox */
.hero-buttons {
    display: flex;                      /* Enables flexible layout */
    gap: 15px;                          /* Space between buttons */
    justify-content: center;            /* Centers buttons horizontally */
    flex-wrap: wrap;                    /* Allows buttons to wrap on small screens */
}

/* Button Styles - Reusable button classes */

/* 
CONCEPT: TRANSITIONS & TRANSFORMS
- transition: smooth animation when properties change
- transform: moves/scales elements without affecting layout
- Creates engaging hover effects
*/
.btn {
    display: inline-block;              /* Allows padding and centering */
    padding: 14px 28px;                 /* Comfortable click area */
    font-weight: 600;                   /* Semi-bold for readability */
    text-decoration: none;              /* Removes underline from links */
    border-radius: 6px;                 /* Rounded corners */
    transition: all 0.3s ease;          /* Smooth animation on hover */
}

/* Primary button - Main call to action */
.btn-primary {
    background: var(--white);           /* White stands out on red hero */
    color: var(--primary-red);          /* Red text for brand consistency */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  /* Subtle depth shadow */
}

/* Primary button hover effect - lifts up */
.btn-primary:hover {
    transform: translateY(-2px);        /* Moves button up 2px */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);   /* Larger shadow on hover */
}

/* Secondary button - Outlined style */
.btn-secondary {
    background: transparent;            /* No background fill */
    color: var(--white);                /* White text on red hero */
    border: 2px solid var(--white);     /* White outline border */
}

/* Secondary button hover - fills with white */
.btn-secondary:hover {
    background: var(--white);           /* Fills with white on hover */
    color: var(--primary-red);          /* Red text for contrast */
}

/* Outlined button - Transparent with border (for secondary CTAs) */
.btn-outline {
    background: transparent;            /* No background fill */
    color: var(--primary-red);          /* Red text */
    border: 2px solid var(--primary-red); /* Red border */
}

/* Outlined button hover - fills with color */
.btn-outline:hover {
    background: var(--primary-red);     /* Fills with red on hover */
    color: var(--white);                /* White text for contrast */
    transform: translateY(-2px);        /* Subtle lift effect */
}

/* Mobile hero adjustments - Optimized for small screens */
/* 
CONCEPT: MEDIA QUERIES
- @media = applies styles only at specific screen sizes
- max-width: 768px = targets phones and small tablets
- Makes text smaller and stacks buttons vertically
*/
@media (max-width: 768px) {
    .hero {
        padding: 80px 0;                /* Less vertical padding on mobile */
    }
    
    .hero-title {
        font-size: 2rem;                /* 32px - Smaller for mobile screens */
    }
    
    .hero-subtitle {
        font-size: 1.1rem;              /* 17.6px - Proportionally smaller */
    }
    
    .hero-buttons {
        flex-direction: column;         /* Stacks buttons vertically */
        align-items: center;            /* Centers stacked buttons */
    }
    
    .btn {
        width: 100%;                    /* Full width for easy tapping */
        max-width: 300px;               /* Prevents buttons from being too wide */
    }
}

/* SERVICES PREVIEW SECTION STYLING */

/* Section background - creates visual separation */
.services-preview {
    background-color: var(--light-gray);  /* Light gray background */
}

/* Section title - centered and prominent */
.section-title {
    text-align: center;                   /* Centers the heading */
    font-size: 2.5rem;                    /* 40px - Large but not as big as hero */
    font-weight: 700;                     /* Bold for emphasis */
    color: var(--black);                  /* Strong black color */
    margin-bottom: 50px;                  /* Space before cards */
}

/* Section subtitle - supporting text below section title */
.section-subtitle {
    text-align: center;                   /* Centers the subtitle */
    font-size: 1.125rem;                  /* 18px - Readable but smaller than title */
    color: #666;                          /* Medium gray - less prominent than title */
    max-width: 600px;                     /* Constrain width for readability */
    margin: -35px auto 0;                 /* Negative margin pulls it closer to title, auto centers it */
    line-height: 1.6;                     /* Comfortable line spacing */
}

/* 
CONCEPT: CSS GRID
- display: grid = enables grid layout system
- grid-template-columns = defines column structure
- gap = spacing between grid items
- More powerful than flexbox for 2D layouts
*/
.services-grid {
    display: grid;                        /* Enables grid layout */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns (1fr = 1 fraction) */
    gap: 30px;                            /* 30px space between cards */
}

/* Individual service card styling */
.service-card {
    background: var(--white);             /* White card on gray background */
    padding: 30px;                        /* Internal spacing for content */
    border-radius: 8px;                   /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);  /* Subtle shadow for depth */
    text-align: center;                   /* Centers card content */
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth animations */
}

/* Card hover effect - lifts up */
.service-card:hover {
    transform: translateY(-5px);          /* Lifts card 5px up */
    box-shadow: 0 8px 20px rgba(193, 39, 45, 0.15);  /* Red-tinted shadow */
}

/* Card title styling */
.service-card h3 {
    font-size: 1.5rem;                    /* 24px - Bold and readable */
    font-weight: 600;                     /* Semi-bold */
    color: var(--primary-red);            /* Brand red for titles */
    margin-bottom: 15px;                  /* Space before description */
}

/* Card description text */
.service-card p {
    font-size: 1rem;                      /* 16px - Standard readable size */
    color: var(--dark-gray);              /* Gray for secondary text */
    line-height: 1.6;                     /* Comfortable reading spacing */
}

/* Mobile adjustments for services section */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;                  /* 32px - Smaller on mobile */
        margin-bottom: 30px;              /* Less space on small screens */
    }

    .section-subtitle {
        font-size: 1rem;                  /* 16px - Smaller on mobile */
        margin-top: -20px;                /* Less negative margin on mobile */
    }
    
    .services-grid {
        grid-template-columns: 1fr;       /* 1 column - stacks cards vertically */
        gap: 20px;                        /* Smaller gap between stacked cards */
    }
    
    .service-card {
        padding: 25px;                    /* Slightly less padding on mobile */
    }
}

/* WHY CHOOSE US SECTION STYLING */

/* White background contrasts with previous gray section */
.why-choose-us {
    background-color: var(--white);       /* Clean white background */
}

/* 4-column grid for trust factors */
.features-grid {
    display: grid;                        /* Enable grid layout */
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 40px;                            /* Space between feature items */
}

/* Individual feature item styling */
.feature-item {
    text-align: center;                   /* Center-align content */
    padding: 20px;                        /* Internal spacing */
}

/* Feature title styling */
.feature-item h3 {
    font-size: 1.25rem;                   /* 20px - Prominent but not too large */
    font-weight: 600;                     /* Semi-bold */
    color: var(--black);                  /* Strong black for emphasis */
    margin-bottom: 10px;                  /* Space before description */
}

/* Feature description text */
.feature-item p {
    font-size: 0.95rem;                   /* 15.2px - Slightly smaller */
    color: var(--dark-gray);              /* Gray for readability */
    line-height: 1.6;                     /* Comfortable reading */
}

/* Tablet adjustment - 2 columns for better readability */
@media (max-width: 1024px) and (min-width: 769px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 30px;                            /* Slightly tighter spacing */
    }
}

/* Mobile adjustment - stack vertically */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;           /* 1 column on mobile */
        gap: 25px;                            /* Compact spacing */
    }
    
    .feature-item {
        padding: 15px 10px;                   /* Less padding on small screens */
    }
}

/* ABOUT PREVIEW SECTION STYLING */

/* About section background - creates visual separation */
.about-preview {
    background-color: var(--light-gray);      /* Light gray background */
}

/* About content container - centered and max-width for readability */
.about-content {
    max-width: 800px;                         /* Limits width for comfortable reading */
    margin: 0 auto;                           /* Centers the content horizontally */
    text-align: center;                       /* Centers all text inside */
}

/* About text styling - slightly larger for emphasis */
.about-text {
    font-size: 1.125rem;                      /* 18px - larger than normal for emphasis */
    line-height: 1.8;                         /* Generous line spacing for readability */
    color: var(--dark-gray);                  /* Professional gray color */
    margin-bottom: 30px;                      /* Space between text and button */
}

/* Mobile adjustments for About section */
@media (max-width: 768px) {
    .about-content {
        max-width: 100%;                      /* Full width on mobile */
        padding: 0 20px;                      /* Side padding for spacing */
    }
    
    .about-text {
        font-size: 1rem;                      /* 16px - normal size on mobile */
        line-height: 1.7;                     /* Slightly tighter spacing */
        margin-bottom: 25px;                  /* Less space before button */
    }
    
    .btn-outline {
        width: 100%;                          /* Full width for easy tapping */
        max-width: 300px;                     /* But not too wide */
    }
}

/* CONTACT INFO SECTION STYLING */

/* Contact section background - white for contrast */
.contact-info {
    background-color: var(--white);           /* White background */
}

/* Contact grid - 3-column layout for contact items */
.contact-grid {
    display: grid;                            /* Enable grid layout */
    grid-template-columns: repeat(3, 1fr);    /* 3 equal columns */
    gap: 40px;                                /* Space between contact cards */
}

/* Individual contact card styling */
.contact-item {
    background: var(--white);                 /* White card background */
    padding: 30px;                            /* Internal spacing */
    border-radius: 8px;                       /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
    text-align: center;                       /* Center all content */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animations */
}

/* Card hover effect - subtle lift */
.contact-item:hover {
    transform: translateY(-5px);              /* Lifts card 5px up */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); /* Larger shadow on hover */
}

/* Contact icon styling - makes emojis large and prominent */
.contact-icon {
    font-size: 3rem;                          /* 48px - large and eye-catching */
    display: block;                           /* Icon on its own line */
    margin-bottom: 15px;                      /* Space between icon and title */
}

/* Contact item title styling */
.contact-item h3 {
    font-size: 1.25rem;                       /* 20px - prominent but not too large */
    font-weight: 600;                         /* Semi-bold for emphasis */
    color: var(--primary-red);                /* Brand red for consistency */
    margin-bottom: 10px;                      /* Space before content */
}

/* Contact item text styling */
.contact-item p {
    font-size: 1rem;                          /* 16px - standard readable size */
    color: var(--dark-gray);                  /* Professional gray */
    line-height: 1.6;                         /* Comfortable line spacing */
    margin: 5px 0;                            /* Small vertical spacing */
}

/* Holiday notice - special styling for disclaimer */
.holiday-notice {
    font-size: 0.875rem;                      /* 14px - smaller for secondary info */
    font-style: italic;                       /* Italicized for distinction */
    color: var(--dark-gray);                  /* Same gray but smaller */
    margin-top: 10px;                         /* Extra space above notice */
    opacity: 0.8;                             /* Slightly faded for hierarchy */
}

/* Mobile adjustments for Contact section */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;           /* 1 column - stack vertically */
        gap: 25px;                            /* Smaller gap between cards */
    }
    
    .contact-item {
        padding: 25px;                        /* Slightly less padding */
    }
    
    .contact-icon {
        font-size: 2.5rem;                    /* 40px - slightly smaller on mobile */
    }
}

/* FOOTER SECTION STYLING */

/* Footer background and base styling - dark professional footer */
.footer {
    background-color: #2C2C2C;                /* Dark charcoal background */
    color: #B0B0B0;                           /* Light gray text (default) */
    padding: 60px 0 30px;                     /* 60px top, 30px bottom spacing */
}

/* Footer grid layout - 3 columns for footer sections */
.footer-content {
    display: grid;                            /* Enable grid layout */
    grid-template-columns: repeat(3, 1fr);    /* 3 equal columns */
    gap: 40px;                                /* Space between sections */
}

/* Footer section headings - white for emphasis */
.footer-section h4 {
    font-size: 1.125rem;                      /* 18px - prominent but not too large */
    font-weight: 600;                         /* Semi-bold */
    color: #FFFFFF;                           /* White for clear hierarchy */
    margin-bottom: 15px;                      /* Space before content */
}

/* Footer section text - light gray for readability */
.footer-section p {
    font-size: 0.95rem;                       /* 15.2px - slightly smaller */
    line-height: 1.6;                         /* Comfortable reading */
    margin: 0;                                /* Remove default margins */
}

/* Footer list styling - remove default bullets */
.footer-section ul {
    list-style: none;                         /* No bullet points */
    padding: 0;                               /* Remove default padding */
    margin: 0;                                /* Remove default margin */
}

/* Footer list items - spacing between links */
.footer-section li {
    margin-bottom: 10px;                      /* Space between each link */
}

/* Footer links - light gray, no underline */
.footer-section a {
    color: #B0B0B0;                           /* Light gray to match text */
    text-decoration: none;                    /* No underline */
    font-size: 0.95rem;                       /* 15.2px - consistent size */
    transition: color 0.3s ease;              /* Smooth color change on hover */
}

/* Footer links hover - brand red */
.footer-section a:hover {
    color: #C1272D;                           /* Brand red for emphasis */
}

/* Social links container - vertical stacking */
.social-links {
    display: flex;                            /* Flexbox layout */
    flex-direction: column;                   /* Stack vertically */
    gap: 10px;                                /* Space between social links */
}

/* Individual social link - icon + text alignment */
.social-link {
    display: flex;                            /* Flexbox for icon + text */
    align-items: center;                      /* Vertically center icon with text */
    gap: 8px;                                 /* Space between icon and text */
}

/* Social media icon styling */
.social-icon {
    width: 20px;                              /* Icon width */
    height: 20px;                             /* Icon height */
    flex-shrink: 0;                           /* Prevent icon from shrinking */
}

/* Footer copyright section - bottom area */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider line */
    margin-top: 40px;                         /* Space above copyright */
    padding-top: 20px;                        /* Space below divider */
    text-align: center;                       /* Center copyright text */
}

/* Copyright text styling - smaller and dimmer */
.footer-bottom p {
    font-size: 0.875rem;                      /* 14px - smaller than other text */
    color: #8C8C8C;                           /* Dimmer gray, less prominent */
    margin: 0;                                /* Remove default margins */
}

/* Mobile adjustments for Footer section */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 20px;                 /* Less padding on mobile */
    }
    
    .footer-content {
        grid-template-columns: 1fr;           /* 1 column - stack vertically */
        gap: 30px;                            /* Tighter spacing */
        text-align: center;                   /* Center all content */
    }
    
    .footer-section ul {
        text-align: center;                   /* Center links */
    }
    
    .social-links {
        align-items: center;                  /* Center social icons */
    }
    
    .footer-bottom {
        margin-top: 30px;                     /* Less space on mobile */
        padding-top: 15px;                    /* Tighter padding */
    }
}

/* ============================================ */
/* BOOKING PAGE STYLES (book.html)             */
/* ============================================ */

/* Hero Inner - Banner for inner pages */
.hero-inner {
    background: linear-gradient(135deg, #C1272D 0%, #8B1F23 100%); /* Red gradient matching brand */
    color: var(--white);
    padding: 60px 0 40px;                     /* Less padding than landing hero */
    text-align: center;
}

/* Breadcrumb navigation - shows page hierarchy */
.breadcrumb {
    font-size: 0.875rem;                      /* 14px - small, subtle */
    margin-bottom: 20px;                      /* Space below breadcrumb */
    opacity: 0.9;                             /* Slightly transparent */
}

.breadcrumb a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.breadcrumb a:hover {
    opacity: 0.7;                             /* Dim on hover */
}

.breadcrumb .separator {
    margin: 0 8px;                            /* Space around › character */
}

.breadcrumb .current {
    opacity: 0.7;                             /* Current page is dimmer (not clickable) */
}

.hero-inner h1 {
    font-size: 2.5rem;                        /* 40px - large but not overwhelming */
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero-inner .hero-subtitle {
    font-size: 1.125rem;                      /* 18px - readable subtitle */
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;                           /* Center subtitle in inner hero */
}

/* Booking Section - Calendly widget area */
.booking-section {
    background-color: var(--white);
    padding: 80px 0;
}

.booking-intro {
    text-align: center;
    margin-bottom: 40px;                      /* Space before widget */
}

.booking-intro h2 {
    font-size: 2rem;                          /* 32px */
    color: var(--black);
    margin-bottom: 15px;
}

.booking-intro p {
    color: var(--dark-gray);
    font-size: 1.125rem;
}

.booking-fallback {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background-color: var(--light-gray);
    border-radius: 8px;
}

.booking-fallback p {
    color: var(--dark-gray);
    margin: 0;
}

.booking-fallback a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
}

.booking-fallback a:hover {
    text-decoration: underline;
}

/* What to Expect Section - 3-step process */
.what-to-expect {
    background-color: var(--light-gray);
    padding: 80px 0;
    text-align: center;
}

.what-to-expect h2 {
    font-size: 2rem;
    color: var(--black);
    margin-bottom: 10px;
}

.section-intro {
    color: var(--dark-gray);
    font-size: 1.125rem;
    margin-bottom: 50px;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);    /* 3 equal columns */
    gap: 40px;
    margin-top: 40px;
}

.step-card {
    background-color: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);              /* Lift on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.step-icon {
    font-size: 3rem;                          /* 48px - large emoji */
    margin-bottom: 20px;
}

.step-card h3 {
    font-size: 1.25rem;                       /* 20px */
    color: var(--black);
    margin-bottom: 15px;
}

.step-card p {
    color: var(--dark-gray);
    line-height: 1.6;
}

/* Important Information Box - Alert-style section */
.info-box {
    background: linear-gradient(135deg, #E8F4F8 0%, #D6EAF8 100%); /* Soft blue gradient */
    padding: 60px 0;
    text-align: center;
}

.info-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.info-box h2 {
    font-size: 1.75rem;
    color: var(--black);
    margin-bottom: 30px;
}

.info-list {
    list-style: none;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.info-list li {
    background-color: var(--white);
    padding: 20px 25px;
    margin-bottom: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-red); /* Red accent bar */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    color: var(--dark-gray);
    line-height: 1.6;
}

.info-list li:last-child {
    margin-bottom: 0;
}

.info-list a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
}

.info-list a:hover {
    text-decoration: underline;
}

/* Contact Alternative Section - Phone/walk-in option */
.contact-alternative {
    background-color: var(--white);
    padding: 60px 0;
    text-align: center;
}

.contact-alternative h2 {
    font-size: 1.75rem;
    color: var(--black);
    margin-bottom: 20px;
}

.contact-alternative p {
    font-size: 1.125rem;
    color: var(--dark-gray);
    margin-bottom: 15px;
}

.contact-alternative a {
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
}

.contact-alternative a:hover {
    text-decoration: underline;
}

.hours-text {
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

/* CTA Section - Call-to-action banner */
.cta-section {
    background: linear-gradient(135deg, #C1272D 0%, #8B1F23 100%); /* Red gradient */
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.cta-section p {
    font-size: 1.125rem;
    margin-bottom: 40px;
    opacity: 0.95;
}

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

/* Mobile Responsive Adjustments for Booking Page */
@media (max-width: 768px) {
    .hero-inner {
        padding: 40px 0 30px;                 /* Less padding on mobile */
    }
    
    .hero-inner h1 {
        font-size: 1.75rem;                   /* 28px - smaller on mobile */
    }
    
    .hero-subtitle {
        font-size: 1rem;                      /* 16px */
    }
    
    .steps-grid {
        grid-template-columns: 1fr;           /* Stack vertically */
        gap: 30px;
    }
    
    .info-list {
        text-align: left;
    }
    
    .cta-buttons {
        flex-direction: column;               /* Stack buttons */
        align-items: center;
    }
    
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* ============================================
   SERVICES PAGE STYLES
   ============================================ */

/* Background color utility classes */
.bg-light {
    background-color: #F8F8F8; /* Light gray background for alternating sections */
}

/* Service Category Base Styles */
.service-category {
    text-align: center; /* Center all content by default */
}

.service-category h2 {
    font-size: 2rem; /* 32px - Section heading size */
    margin-bottom: 40px; /* Space below heading before content */
    color: #333333; /* Dark gray for readability */
    display: flex; /* Flexbox to align icon + text */
    align-items: center; /* Vertically center icon with text */
    justify-content: center; /* Horizontally center the heading */
    gap: 15px; /* Space between emoji icon and text */
}

.section-icon {
    font-size: 2.5rem; /* 40px - Larger than heading for emphasis */
    line-height: 1; /* Remove extra space around emoji */
}

/* Service Checklists - 2-column grid with checkmarks */
.service-checklist {
    display: grid; /* CSS Grid for 2-column layout */
    grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
    gap: 20px 40px; /* 20px row gap, 40px column gap */
    max-width: 900px; /* Constrain width for readability */
    margin: 0 auto; /* Center the grid */
}

.service-checklist ul {
    list-style: none; /* Remove default bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    text-align: left; /* Left-align text within centered container */
}

.service-checklist li {
    font-size: 1.125rem; /* 18px - Body text size */
    color: #333333; /* Dark gray */
    margin-bottom: 15px; /* Space between items */
    padding-left: 30px; /* Space for checkmark */
    position: relative; /* For positioning checkmark */
}

.service-checklist li::before {
    content: "✓"; /* Checkmark character */
    position: absolute; /* Position relative to li */
    left: 0; /* Align to left edge */
    color: #C1272D; /* Brand red for checkmark */
    font-weight: bold; /* Make checkmark stand out */
    font-size: 1.25rem; /* 20px - Slightly larger */
}

/* Service Cards - 2-column grid with cards (SIM & Device Sales) */
.service-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 equal columns */
    gap: 40px; /* Space between cards */
    max-width: 900px;
    margin: 0 auto;
}

.service-card {
    background: #FFFFFF; /* White background */
    padding: 40px 30px; /* Generous padding inside */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Subtle shadow */
    text-align: center; /* Center content */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
}

.service-card:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Deeper shadow on hover */
}

.card-icon {
    font-size: 3rem; /* 48px - Large emoji icon */
    line-height: 1;
    margin-bottom: 20px; /* Space below icon */
}

.service-card h3 {
    font-size: 1.25rem; /* 20px - Card heading */
    color: #333333;
    margin-bottom: 20px; /* Space below heading */
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left; /* Left-align list items */
}

.card-list li {
    font-size: 1rem; /* 16px - Slightly smaller in cards */
    color: #666666; /* Medium gray */
    margin-bottom: 12px; /* Space between items */
    padding-left: 25px; /* Space for bullet */
    position: relative;
}

.card-list li::before {
    content: "•"; /* Bullet point */
    position: absolute;
    left: 0;
    color: #C1272D; /* Brand red bullet */
    font-weight: bold;
}

/* Service Icon Grid - 3-column grid with icons (Digital Services & Accessories) */
.service-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; /* Space between items */
    max-width: 900px;
    margin: 0 auto;
}

.service-item {
    text-align: center; /* Center content */
    padding: 20px; /* Padding around content */
    transition: transform 0.3s ease; /* Smooth hover animation */
}

.service-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

.service-item-icon {
    font-size: 3rem; /* 48px - Large emoji icon */
    line-height: 1;
    margin-bottom: 15px; /* Space below icon */
}

.service-item h3 {
    font-size: 1.125rem; /* 18px */
    color: #333333;
    margin: 0;
    line-height: 1.4;
    font-weight: 600; /* Semi-bold */
}

/* Info Grid - 3-column grid of info cards */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 30px; /* Space between cards */
    max-width: 1000px;
    margin: 0 auto;
}

.info-card {
    background: #FFFFFF; /* White cards */
    padding: 30px 20px; /* Padding inside cards */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
}

.info-card:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Deeper shadow on hover */
}

.info-icon {
    font-size: 3rem; /* 48px - Large icon */
    line-height: 1;
    margin-bottom: 15px;
}

.info-card h3 {
    font-size: 1.25rem; /* 20px */
    color: #333333;
    margin-bottom: 10px;
}

.info-card p {
    font-size: 1rem; /* 16px */
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* Mobile Responsive Adjustments for Services Page */
@media (max-width: 768px) {
    /* Service checklists: Stack to 1 column on mobile */
    .service-checklist {
        grid-template-columns: 1fr; /* Single column */
        gap: 15px; /* Tighter gap */
    }
    
    /* Service cards: Stack to 1 column on mobile */
    .service-cards {
        grid-template-columns: 1fr; /* Single column */
        gap: 30px;
    }
    
    .service-card {
        padding: 30px 20px; /* Less padding on mobile */
    }
    
    /* Service icon grid: Stack to 1 column on mobile */
    .service-icon-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }
    
    .service-item {
        padding: 15px; /* Less padding on mobile */
    }
    
    /* Info grid: Stack to 1 column on mobile */
    .info-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 20px;
    }
    
    /* Section headings: Smaller on mobile */
    .service-category h2 {
        font-size: 1.75rem; /* 28px - Smaller on mobile */
        gap: 10px; /* Less gap between icon and text */
    }
    
    .section-icon {
        font-size: 2rem; /* 32px - Smaller icon */
    }
}

/* ============================================
   ABOUT PAGE STYLES
   ============================================ */

/* Our Story Section - Text-focused content */
.about-story {
    background-color: #FFFFFF;
}

.story-content {
    max-width: 800px; /* Constrain width for readability */
    margin: 0 auto; /* Center the content */
    text-align: left; /* Left-align text */
}

.story-content h2 {
    font-size: 2rem; /* 32px */
    color: #333333;
    margin-bottom: 30px;
    text-align: center; /* Center the heading */
}

.story-content p {
    font-size: 1.125rem; /* 18px - Comfortable reading size */
    line-height: 1.8; /* Generous line height for readability */
    color: #555555; /* Slightly lighter than black */
    margin-bottom: 20px; /* Space between paragraphs */
}

.story-content strong {
    color: #C1272D; /* Brand red for emphasis */
    font-weight: 600;
}

/* What We Offer Section - 3-column card grid */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.offer-card {
    text-align: center;
    padding: 30px 20px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.offer-icon {
    font-size: 3rem; /* 48px */
    line-height: 1;
    margin-bottom: 20px;
}

.offer-card h3 {
    font-size: 1.25rem; /* 20px */
    color: #333333;
    margin-bottom: 15px;
}

.offer-card p {
    font-size: 1rem; /* 16px */
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* Why Choose Us / Values Section - 4-column grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.value-card {
    text-align: center;
    padding: 30px 20px;
}

.value-icon {
    font-size: 3rem; /* 48px */
    line-height: 1;
    margin-bottom: 15px;
}

.value-card h3 {
    font-size: 1.125rem; /* 18px */
    color: #333333;
    margin-bottom: 10px;
    font-weight: 600;
}

.value-card p {
    font-size: 1rem; /* 16px */
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* Mobile Responsive Adjustments for About Page */
@media (max-width: 768px) {
    /* Story content: Full width on mobile */
    .story-content {
        max-width: 100%;
    }
    
    .story-content h2 {
        font-size: 1.75rem; /* 28px - Smaller on mobile */
    }
    
    .story-content p {
        font-size: 1rem; /* 16px - Slightly smaller */
    }
    
    /* Offers grid: Stack to 1 column on mobile */
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    /* Values grid: Stack to 1 column on mobile */
    .values-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* Contact Methods Section */
.contact-methods {
    display: grid;                              /* Grid layout for cards */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid: min 200px, grows to fill space */
    gap: 24px;                                  /* Spacing between cards (8pt grid: 3 × 8px) */
    margin-top: 40px;                           /* Space below subtitle (8pt grid: 5 × 8px) */
}

/* Individual Contact Method Card */
.contact-method-card {
    background: white;                          /* White background for cards */
    padding: 32px 24px;                         /* Vertical: 32px, Horizontal: 24px (8pt grid) */
    border-radius: 12px;                        /* Rounded corners */
    text-align: center;                         /* Center all content */
    text-decoration: none;                      /* Remove link underline */
    color: inherit;                             /* Inherit text color (not blue link) */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);    /* Subtle shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
    display: flex;                              /* Flexbox for vertical layout */
    flex-direction: column;                     /* Stack items vertically */
    gap: 12px;                                  /* Space between elements */
}

.contact-method-card:hover {
    transform: translateY(-8px);                /* Lift card on hover */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);   /* Deeper shadow on hover */
}

/* Method Icon (Emoji) */
.method-icon {
    font-size: 3rem;                            /* 48px - large emoji size */
    line-height: 1;                             /* Tight line-height for emoji */
    margin-bottom: 8px;                         /* Space below icon */
}

/* Method Card Heading */
.contact-method-card h3 {
    font-size: 1.25rem;                         /* 20px - prominent heading */
    font-family: 'Montserrat', sans-serif;      /* Brand font */
    color: #333;                                /* Dark gray text */
    margin: 0;                                  /* Remove default margin */
}

/* Method Card Description */
.contact-method-card p {
    font-size: 0.9375rem;                       /* 15px - readable description */
    color: #666;                                /* Medium gray text */
    margin: 0;                                  /* Remove default margin */
}

/* Method Action Text (Arrow link) */
.method-action {
    font-size: 0.875rem;                        /* 14px - small action text */
    color: var(--primary-color);                /* Brand red */
    font-weight: 600;                           /* Semi-bold */
    margin-top: 4px;                            /* Small space above */
}

/* Contact Form Section */
.contact-form-wrapper {
    max-width: 600px;                           /* Constrain form width for readability */
    margin: 40px auto 0;                        /* Center form, add top margin */
}

.contact-form {
    background: white;                          /* White background for form */
    padding: 40px;                              /* Internal spacing (8pt grid: 5 × 8px) */
    border-radius: 12px;                        /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);    /* Subtle shadow for depth */
}

/* Form Group (Field wrapper) */
.form-group {
    margin-bottom: 24px;                        /* Space between fields (8pt grid: 3 × 8px) */
}

/* Form Labels */
.form-group label {
    display: block;                             /* Full width for label */
    font-size: 0.9375rem;                       /* 15px - readable label */
    font-weight: 600;                           /* Semi-bold */
    color: #333;                                /* Dark gray text */
    margin-bottom: 8px;                         /* Space below label */
}

/* Input Fields (Text, Email, Tel) */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;                                /* Full width of container */
    padding: 12px 16px;                         /* Internal spacing (8pt grid) */
    font-size: 1rem;                            /* 16px - standard input size (prevents iOS zoom) */
    font-family: 'Open Sans', sans-serif;       /* Match body font */
    color: #333;                                /* Dark gray text */
    border: 2px solid #DDD;                     /* Light gray border */
    border-radius: 8px;                         /* Rounded corners */
    background: #FAFAFA;                        /* Very light gray background */
    transition: border-color 0.3s ease, background 0.3s ease; /* Smooth focus animation */
    box-sizing: border-box;                     /* Include padding in width */
}

/* Input Focus State */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;                              /* Remove default browser outline */
    border-color: var(--primary-color);         /* Brand red border on focus */
    background: white;                          /* White background on focus */
}

/* Textarea Specific Styling */
.form-group textarea {
    resize: vertical;                           /* Allow vertical resize only */
    min-height: 120px;                          /* Minimum height for message area */
    line-height: 1.6;                           /* Comfortable line spacing */
}

/* Select Dropdown */
.form-group select {
    cursor: pointer;                            /* Pointer cursor for dropdown */
    appearance: none;                           /* Remove default dropdown arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E"); /* Custom dropdown arrow */
    background-repeat: no-repeat;               /* Don't repeat arrow */
    background-position: right 16px center;     /* Position arrow on right */
    padding-right: 40px;                        /* Space for arrow */
}

/* Submit Button */
.contact-form button[type="submit"] {
    width: 100%;                                /* Full width button */
    margin-top: 8px;                            /* Space above button */
}

/* Form Note (Privacy text) */
.form-note {
    font-size: 0.875rem;                        /* 14px - small note text */
    color: #666;                                /* Medium gray text */
    text-align: center;                         /* Center text */
    margin-top: 16px;                           /* Space above note */
    line-height: 1.6;                           /* Comfortable line spacing */
}

/* Map + Hours Section */
.map-hours-grid {
    display: grid;                              /* Grid layout for side-by-side */
    grid-template-columns: 1.5fr 1fr;           /* Map takes 60%, Hours card takes 40% */
    gap: 32px;                                  /* Space between map and card (8pt grid: 4 × 8px) */
    margin-top: 40px;                           /* Space below subtitle */
}

/* Map Container */
.map-container {
    overflow: hidden;                           /* Ensures border-radius clips iframe */
    border-radius: 12px;                        /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);    /* Subtle shadow */
}

.map-container iframe {
    display: block;                             /* Removes bottom spacing under iframe */
    width: 100%;                                /* Full width of container */
    height: 400px;                              /* Fixed height */
}

/* Business Hours Card */
.hours-card {
    background: white;                          /* White background */
    padding: 32px;                              /* Internal spacing (8pt grid: 4 × 8px) */
    border-radius: 12px;                        /* Rounded corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);    /* Subtle shadow */
    display: flex;                              /* Flexbox for vertical stacking */
    flex-direction: column;                     /* Stack elements vertically */
    gap: 16px;                                  /* Space between sections */
}

/* Hours Card Headings */
.hours-card h3 {
    font-size: 1.125rem;                        /* 18px - section heading */
    font-family: 'Montserrat', sans-serif;      /* Brand font */
    color: #333;                                /* Dark gray */
    margin: 0;                                  /* Remove default margin */
}

/* Address Text */
.hours-card .address {
    font-size: 0.9375rem;                       /* 15px - readable */
    color: #666;                                /* Medium gray */
    line-height: 1.6;                           /* Comfortable spacing */
    margin: 8px 0 0 0;                          /* Space above, none below */
}

/* Get Directions Link */
.directions-link {
    display: inline-block;                      /* Allows padding */
    color: var(--primary-color);                /* Brand red */
    font-size: 0.875rem;                        /* 14px - small link */
    font-weight: 600;                           /* Semi-bold */
    text-decoration: none;                      /* Remove underline */
    margin-top: 8px;                            /* Space above */
    transition: opacity 0.3s ease;              /* Smooth hover */
}

.directions-link:hover {
    opacity: 0.7;                               /* Fade on hover */
}

/* Divider Line */
.divider {
    border: none;                               /* Remove default border */
    border-top: 1px solid #E0E0E0;             /* Light gray line */
    margin: 8px 0;                              /* Vertical spacing */
}

/* Hours List */
.hours-list {
    display: flex;                              /* Flexbox for vertical stacking */
    flex-direction: column;                     /* Stack rows vertically */
    gap: 12px;                                  /* Space between rows */
}

/* Individual Hours Row */
.hours-row {
    display: flex;                              /* Flexbox for horizontal layout */
    justify-content: space-between;             /* Push day and time to opposite ends */
    align-items: center;                        /* Vertical center alignment */
    font-size: 0.9375rem;                       /* 15px - readable */
}

.hours-row .day {
    color: #333;                                /* Dark gray */
    font-weight: 600;                           /* Semi-bold */
}

.hours-row .time {
    color: #666;                                /* Medium gray */
}

/* Quick Contact Section */
.quick-contact {
    display: flex;                              /* Flexbox for vertical stacking */
    flex-direction: column;                     /* Stack links vertically */
    gap: 12px;                                  /* Space between links */
}

/* Contact Links */
.contact-link {
    color: #333;                                /* Dark gray text */
    font-size: 0.9375rem;                       /* 15px - readable */
    text-decoration: none;                      /* Remove underline */
    transition: color 0.3s ease;                /* Smooth hover */
}

.contact-link strong {
    color: var(--primary-color);                /* Brand red for labels */
}

.contact-link:hover {
    color: var(--primary-color);                /* Turn red on hover */
}

/* ============================================
   CONTACT PAGE - RESPONSIVE (Mobile)
   ============================================ */

@media (max-width: 768px) {
    /* Contact methods: Stack to 2 columns on tablet, 1 on small mobile */
    .contact-methods {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Smaller min-width */
        gap: 16px;                              /* Tighter spacing on mobile */
    }

    /* Smaller icons on mobile */
    .method-icon {
        font-size: 2.5rem;                      /* 40px - smaller emoji */
    }

    /* Reduce card padding on mobile */
    .contact-method-card {
        padding: 24px 16px;                     /* Less padding on mobile */
    }

    /* Reduce form padding on mobile */
    .contact-form {
        padding: 24px;                          /* Less padding on mobile */
    }

    /* Smaller form field spacing on mobile */
    .form-group {
        margin-bottom: 20px;                    /* Tighter spacing on mobile */
    }

    /* Map + Hours: Stack vertically on mobile */
    .map-hours-grid {
        grid-template-columns: 1fr;             /* Single column on mobile */
        gap: 24px;                              /* Tighter spacing */
    }

    /* Smaller map height on mobile */
    .map-container iframe {
        height: 300px;                          /* Shorter map on mobile */
    }

    /* Reduce hours card padding on mobile */
    .hours-card {
        padding: 24px;                          /* Less padding on mobile */
    }
}