/*
 * HMD for All - Main Styles
 * Version: 1.0.1
 * Based on headacheMD.org theme
 * v5.0.0 - CLEAN START: Removed all complex slider CSS, using simple flexbox for 400px green box with centered text
 * v5.1.0 - FORCED VERTICAL CENTERING: Added flexbox vertical centering to all slider elements (slider, container, row, owl-carousel, owl-item, caption, hero-content) to ensure all text is perfectly centered vertically
 * v5.1.1 - FIXED OWL-CAROUSEL CONFLICTS: Overrode owl-stage-outer overflow and owl-item float to fix clipped dots and ensure proper vertical centering with !important flags
 * v5.1.2 - BUTTON VERTICAL CENTERING: Changed button display to inline-flex with align-items: center to properly center text vertically within button
 * v5.1.3 - TEXT CONTENT POSITIONING: Added padding and overflow protection to ensure all text (h3, h1, button) stays within the green slider box and is properly centered together
 * v5.1.4 - CAROUSEL VISIBILITY FIX: Ensured Owl Carousel items remain visible by overriding default hiding behavior and ensuring active items are always displayed
 * v5.1.5 - TEXT VISIBILITY FIX: Removed fadeOut animation causing items to disappear, added comprehensive visibility rules for all text elements and carousel items
 * v5.1.6 - HERO BAR VERTICAL CENTERING FIX: Changed all flex-end alignments to center for proper vertical centering of text in hero bar. Also fixed .owl-item.active, .owl-item.center, and .owl-item.animated to use flex display with center alignment.
 * v5.1.7 - HERO BAR NAVBAR PADDING FIX: Added padding-top: 120px to slider to account for fixed navbar and prevent text from being cropped at the top.
 * v5.1.8 - HERO BAR NAVBAR MARGIN FIX: Changed padding-top to margin-top so slider section starts completely below fixed navbar, preventing any text overlap.
 * v5.1.9 - HERO BAR TEXT BOTTOM POSITIONING: Changed all vertical alignments from center to flex-end to position text at the bottom of the green hero bar.
 * v5.2.0 - HERO BAR TEXT CENTER POSITIONING: Positioned text at vertical center (200px) of 400px green box using padding-top to prevent text cropping at top.
 * v5.2.1 - HERO BAR BOTTOM CROP AND DOTS FIX: Added padding-bottom to caption to prevent text cropping at bottom, moved dots lower and reduced z-index so they appear below text.
 * v5.2.2 - HERO BAR OVERFLOW FIX: Changed caption height from 100% to auto to prevent overflow, added !important flags to ensure styles aren't overridden, increased padding-bottom to 60px for better spacing.
 * v5.2.3 - HERO BAR SIMPLIFIED APPROACH: Reverted to flexbox vertical centering (align-items: center) like v2.7, removed manual padding-top positioning, added padding-bottom to slider for bottom spacing.
 * v5.2.4 - HERO BAR HEIGHT REDUCTION: Reduced height from 400px to 300px, adjusted padding to prevent text cropping, reduced hero-content vertical padding.
 * v5.2.5 - HERO BAR PADDING FIX: Increased top padding from 20px to 40px to prevent text cropping at top.
 * v5.2.6 - HERO BAR PADDING ADJUSTMENT: Increased top padding to 60px, reduced bottom padding to 10px.
 * v5.2.7 - DEVICE-SPECIFIC PADDING: Added iPad-specific padding (80px top) and iPhone-specific padding (40px top) without affecting desktop.
 * v5.2.8 - DEVICE-SPECIFIC PADDING ADJUSTMENT: Increased iPad top padding to 100px, reduced iPhone top padding to 30px.
 * v5.2.9 - IPAD PADDING INCREASE: Increased iPad top padding from 100px to 120px, desktop unchanged.
 * v5.3.0 - IPAD PADDING INCREASE: Increased iPad top padding from 120px to 200px.
 * v5.3.1 - IPAD BOTTOM PADDING INCREASE: Increased iPad bottom padding from 10px to 40px.
 * v5.3.2 - IPAD HEIGHT INCREASE: Increased iPad hero bar height from 300px to 400px.
 * v5.3.3 - IPAD DOTS POSITIONING: Moved dots lower (bottom: 5px) below button on iPad only.
 * v5.3.4 - IPAD DOTS POSITIONING ADJUSTMENT: Moved iPad dots down 30px more (bottom: -25px).
 * v5.3.5 - IPAD TOP PADDING REDUCTION: Reduced iPad top padding from 200px to 160px (40px less).
 * v5.3.6 - IPHONE HERO BAR FIX: Reduced iPhone top padding by 40px (from 30px to 0px) to prevent text overlap, adjusted carousel alignment, increased bottom padding for dots.
 * v5.3.7 - IPHONE CAROUSEL FADE FIX: Enabled fadeOut animation on iPhone only, allowing old text to fade away like PC and iPad.
 * v5.3.8 - IPHONE DOTS AND PADDING ADJUSTMENT: Moved dots down by 80px and reduced bottom padding by 60px on iPhone only.
 * v5.3.9 - TOP RIGHT BUTTONS POSITIONING: Moved Donate and Apply for Assistance buttons to top right, aligned with logo, visible on PC and iPad only.
 * v5.4.0 - IPAD LANDSCAPE FIX: Fixed hero bar top cropping and text overlap on iPad landscape orientation.
 * v5.4.1 - IPAD LANDSCAPE NAVIGATION FIX: Fixed navigation font sizing and wrapping in landscape, further reduced hero bar top spacing.
 * v5.4.2 - IPAD LANDSCAPE IMPROVED DETECTION: Enhanced media query to catch all iPad landscape sizes with multiple query conditions.
 * v5.4.3 - IPAD CAROUSEL FADE FIX: Enabled fadeOut/fadeIn animations on iPad to prevent text overlap during carousel transitions.
 * v5.4.4 - PC BUTTONS REMOVAL: Removed hero section carousel buttons on PC/desktop version only (1200px+), kept top-right buttons visible.
 * v5.4.5 - PC FIXES: Fixed second set of navbar buttons still showing on PC, and fixed hero bar top content visibility on desktop.
 * v5.4.6 - PC CAROUSEL ALL ITEMS: Modified carousel to show all 3 messages simultaneously on desktop/PC (side-by-side).
 * v5.4.7 - PC CAROUSEL ROTATION: Fixed carousel to rotate through all 3 messages on desktop while ensuring each is visible when active.
 * v5.3.10 - TOP RIGHT BUTTONS ADJUSTMENT: Moved buttons up by 60px.
 * v5.3.11 - IPAD NAVIGATION NO WRAP: Added dynamic font sizing to prevent navigation wrapping on iPad only.
 * v5.3.12 - IPAD PRO BUTTON REMOVAL: Hide top-right buttons on iPad Pro only.
 * v5.3.13 - IPAD PRO HERO PADDING: Reduced hero bar top padding by 100px for iPad Pro only.
 * v5.3.14 - IPAD PRO HERO PADDING FURTHER REDUCTION: Reduced hero bar top padding by another 100px for iPad Pro only (now 0px).
 * v5.3.15 - IPAD PRO HERO PADDING ADDITIONAL REDUCTION: Reduced hero bar margin-top by 100px for iPad Pro only (from 120px to 20px).
 * v5.3.16 - IPAD MINI STYLING: Hide mobile buttons and bold navigation options for iPad Mini (768px-1024px).
 * v5.3.17 - IPAD STYLING: Hide mobile buttons and bold navigation options for iPad (768px-1024px) - same as iPad Mini.
 * v5.3.18 - IPAD/IPAD MINI TOP BUTTONS: Hide top-right buttons (Donate and Apply for Assistance) for iPad and iPad Mini only.
 * v5.3.19 - HEADACHEMD FOR ALL STYLING: Ensure all instances of "headacheMD for all" text are bold and italic.
 * v5.4.8 - PC CAROUSEL VISIBILITY FIX: Added specific rules for .owl-item.active to ensure carousel messages are visible on desktop PC. Increased navigation font size to 16px on desktop without wrapping.
 * v5.4.9 - PC CAROUSEL MATCH IPAD: Added rule to hide inactive carousel items on PC and enabled fade animations to match iPad behavior - only active item shows content with smooth transitions.
 * v5.4.10 - PC CAROUSEL ROTATION FIX: Removed CSS rules that were forcing ALL items to be visible, now only active items are visible. Updated JavaScript to only show active items, allowing carousel to properly rotate through all 3 messages.
 * v5.4.11 - EDGE BROWSER COMPATIBILITY FIX: Added Edge-specific fixes for carousel visibility. Inactive items now use absolute positioning off-screen for better Edge compatibility. Active items explicitly set to relative positioning.
 * v5.4.12 - SIMPLIFIED PC CAROUSEL: Removed all complex CSS and JavaScript formatting for PC. Let Owl Carousel handle rotation naturally with minimal interference. Only keep essential text visibility rules.
 * v5.4.13 - RESTORE PC TEXT DISPLAY: Restored essential display rules for active carousel items on PC. Added display: flex, opacity: 1, and visibility: visible for .owl-item.active and its children to ensure text is visible.
 * v5.4.14 - PC CAROUSEL ROTATION FIX: Added CSS rules to hide inactive carousel items on desktop (PC) to ensure all 3 messages rotate properly. Only active items are visible, allowing proper carousel rotation through all messages.
 * v5.4.15 - SIMPLIFIED PC CAROUSEL: Removed all complex CSS rules, letting Owl Carousel handle rotation naturally. Simple, working version that displays all 3 messages properly.
 * v5.4.16 - REVERTED PC TO V1.0.0: Reverted PC carousel to original version 1.0.0 - simple Owl Carousel with minimal CSS, no complex rules or JavaScript manipulation.
 * v5.4.17 - PC CAROUSEL TEXT VISIBILITY FIX: Added explicit CSS rules to ensure all text (h1, h3) is visible when carousel items become active on PC desktop. Fixed issue where text was missing in rotating carousel items. Added rules for .center and .animated classes to ensure text is visible during transitions.
 * v5.4.18 - PC CAROUSEL COMPREHENSIVE TEXT FIX: Enhanced CSS rules to ensure entire item structure (.item, .caption, .hero-content) is visible for active/transitioning items. Added animation: none to prevent fadeOut from hiding text elements directly.
 * v5.4.19 - PC CAROUSEL ALL ITEMS TEXT FIX: CRITICAL FIX - Added CSS rules to prepare ALL carousel items (not just active ones) so text is ready when items become active. This ensures all 3 messages show text during rotation. Also prevented refreshHeroCarousel from interfering with PC carousel.
 * v5.5.0 - PC CAROUSEL SIMPLIFICATION: Simplified PC carousel CSS - removed all complex visibility rules, added simple rule to hide inactive items using opacity/visibility (not display:none) so Owl Carousel can rotate properly through all 3 messages.
 * v5.5.1 - PC CAROUSEL TEXT VISIBILITY FIX: Added explicit rules to ensure text (h1, h3) is visible in active/transitioning items. Ensured entire structure (.item, .caption, .hero-content) is visible when items become active. Prevented fadeOut animation from affecting active items.
 * v5.5.2 - PC CAROUSEL COMPREHENSIVE FIX: Simplified approach - removed absolute positioning. Using universal selector (*) to force all descendants of active items to inherit visibility. Added direct h1/h3 selectors to catch text regardless of nesting. Updated CSS version to 1.0.4 to force cache refresh.
 * v6.0.0 - HERO BAR COMPLETE REBUILD: Removed ALL existing slider CSS and rebuilt from scratch with minimal, clean CSS. Simple opacity/visibility rules for PC. Let Owl Carousel handle rotation naturally.
 * v6.0.1 - PC TEXT VERTICAL CENTERING: Added flexbox centering to slider, container, and row on PC to center text vertically in herobar. Removed top padding that was pushing text down.
 * v6.0.2 - PC TEXT LAYOUT AND DOTS FIX: Added flex-direction: column to hero-content to ensure h3 and h1 display on separate lines. Made h3 and h1 display: block with width: 100%. Ensured carousel dots are visible on PC with explicit display, visibility, and opacity rules.
 * v6.0.3 - HERO BAR HEIGHT REDUCTION: Reduced herobar height from 300px to 250px and removed all padding to create equal green space above and below the text. Flexbox centering ensures text is perfectly centered.
 * v6.0.4 - PC PADDING ADJUSTMENT: Added 40px padding above text and removed bottom padding (0px) in PC herobar to position text higher with more green space above.
 * v6.0.5 - PC PADDING FINE-TUNE: Added additional 20px padding above text (now 60px total) and removed 20px below (stays at 0px) to further adjust text positioning in PC herobar.
 * v6.0.6 - PC PADDING ADJUSTMENT: Added another 20px padding above text (now 80px total) and removed 20px below (stays at 0px) to position text even higher in PC herobar.
 */

/* Color Palette for HMD for All */
:root {
    --primary-color: #a5c422;      /* Fern green - matches logo */
    --secondary-color: #c5dc5f;    /* Light fern green */
    --accent-color: #8ba61d;       /* Medium fern green */
    --dark-color: #6b8116;         /* Dark fern green */
    --light-bg: #f7fafc;           /* Light gray background */
    --text-dark: #2d3748;          /* Dark gray text */
    --text-light: #718096;         /* Light gray text */
    --white: #ffffff;
}

/* General Styles */
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-dark);
    background-color: var(--white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: var(--dark-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--accent-color);
    text-decoration: none;
}

/* Navigation */
.custom-navbar {
    background: var(--white);
    border-bottom: 1px solid #e2e8f0;
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-navbar .navbar-brand {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    padding: 5px 15px;
    height: auto;
}

.custom-navbar .navbar-brand .logo-image {
    height: 90px !important;
    max-height: 90px !important;
    width: auto;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.3s ease;
}

.custom-navbar .navbar-brand:hover .logo-image {
    opacity: 0.8;
}

/* Top Right Buttons - PC and iPad Only */
.custom-navbar .container {
    position: relative;
}

.top-right-buttons {
    position: absolute;
    right: 15px;
    top: calc(50% - 60px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    justify-content: center;
}

.top-right-buttons .section-btn {
    margin: 0;
    white-space: nowrap;
    padding: 10px 20px;
}

/* Hide top-right buttons on mobile */
@media (max-width: 767px) {
    .top-right-buttons {
        display: none !important;
    }
    
    /* Show mobile buttons in navbar on mobile */
    .mobile-buttons {
        display: block;
    }
}

/* Show top-right buttons on tablet (iPad) and desktop (PC) */
@media (min-width: 768px) {
    .top-right-buttons {
        display: flex;
    }
    
    /* Hide mobile buttons in navbar on tablet/desktop */
    .mobile-buttons {
        display: none !important;
    }
}

/* Keep top-right buttons visible on PC - they should remain visible */

/* Hide hero section carousel buttons AND navbar mobile buttons on desktop/PC only (1200px+) */
@media (min-width: 1200px) {
    .slider .section-btn {
        display: none !important;
    }
    
    /* Hide the second set of buttons in navbar on PC */
    .mobile-buttons,
    .navbar-nav.navbar-right.mobile-buttons,
    .navbar-nav.navbar-right.mobile-buttons li,
    .navbar-nav.navbar-right.mobile-buttons li a {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Hide top-right buttons on iPad Pro only */
/* iPad Pro 11": 834px-1194px (landscape: 1194px), iPad Pro 12.9": 1024px-1366px */
/* Target iPad Pro specifically: 1024px-1366px covers both models in landscape/portrait */
@media (min-width: 1024px) and (max-width: 1366px) {
    .top-right-buttons {
        display: none !important;
    }
    
    /* Reduce hero bar top padding by 100px for iPad Pro only */
    /* Reduced by 100px from 160px to 60px, then reduced by another 100px to 0px, then another 100px using negative margin */
    .slider {
        padding: 0px 0 10px 0 !important; /* Top padding already at 0px */
        margin-top: calc(120px - 100px) !important; /* Reduce margin-top by 100px to move hero bar up further */
    }
}

/* Adjust navbar-header to accommodate top-right buttons */
.custom-navbar .navbar-header {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 90px;
}

.custom-navbar .navbar-nav li a {
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-navbar .navbar-nav li a:hover,
.custom-navbar .navbar-nav li.active a {
    color: var(--primary-color);
    background-color: transparent;
}

/* Prevent navigation wrapping */
.custom-navbar .navbar-collapse {
    flex-wrap: nowrap;
}

.custom-navbar .navbar-nav {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Hamburger Menu Button */
.custom-navbar .navbar-toggle {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    padding: 8px 12px;
    margin-top: 20px;
    margin-right: 15px;
    display: none;
    position: relative;
    z-index: 1000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.custom-navbar .navbar-toggle .icon-bar {
    background-color: var(--white);
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    margin: 4px 0;
}

.custom-navbar .navbar-toggle:hover,
.custom-navbar .navbar-toggle:focus {
    background: var(--dark-color);
    border-color: var(--dark-color);
}

.section-btn {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: var(--white);
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.section-btn:hover {
    background: transparent;
    color: var(--primary-color);
}

/* Spacing between navbar buttons */
.custom-navbar .navbar-nav.navbar-right li {
    margin-left: 10px;
}

.custom-navbar .navbar-nav.navbar-right li:first-child {
    margin-left: 0;
}

/* Style for "headacheMD for all" text - always bold and italic */
.headachemd-for-all {
    font-weight: 700 !important;
    font-style: italic !important;
}

/* Ensure all instances of "headacheMD for all" in strong/em combinations are bold and italic */
strong em,
em strong {
    font-weight: 700 !important;
    font-style: italic !important;
}

/* ============================================
   HERO BAR / SLIDER - CLEAN REBUILD v6.0.0
   ============================================ */

/* Basic slider container */
.slider {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);
    height: 250px;
    min-height: 250px;
    margin-top: 120px;
    padding: 20px 0;
    position: relative;
    overflow: hidden;
}

/* Carousel container */
.slider .owl-carousel {
    height: 100%;
}

.slider .owl-stage-outer {
    height: 100%;
}

.slider .owl-stage {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Carousel items */
.slider .owl-item {
    height: 100%;
}

.slider .owl-item .item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider .owl-item .caption {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider .owl-item .hero-content {
    text-align: center;
    color: #ffffff;
    max-width: 900px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Text styling */
.slider .hero-content h3 {
    font-size: clamp(11px, 1.6vw, 13px);
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0 0 8px 0;
    display: block;
    width: 100%;
}

.slider .hero-content h1 {
    font-size: clamp(20px, 3.2vw, 28px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    margin: 0 0 12px 0;
    display: block;
    width: 100%;
}

/* Buttons */
.slider .section-btn {
    padding: 10px 28px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Dots navigation */
.slider .owl-dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    z-index: 10;
    display: block;
}

/* Section Styles */
section {
    padding: 80px 0;
}


/* Scroll offset for fixed navbar */
section[id] {
    scroll-margin-top: 120px;
}

#home {
    scroll-margin-top: 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

/* Lead paragraph styling */
p.lead {
    font-size: clamp(16px, 2.2vw, 20px);
    font-weight: 400;
    line-height: 1.8;
    color: var(--dark-color);
    margin-bottom: 25px;
}

/* Purpose section text - normal dark color, no green */
p.purpose-text {
    font-size: clamp(16px, 2.2vw, 18px);
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.section-title h2 {
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 15px;
}

.section-title h2 span {
    color: var(--primary-color);
}

.section-title p {
    font-size: clamp(15px, 2vw, 18px);
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

.section-background {
    background-color: var(--light-bg);
}

/* About Section */
#about .about-info h2 {
    font-size: clamp(24px, 3.5vw, 32px);
    margin-bottom: 25px;
}

#about .about-info p {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.8;
    color: var(--text-dark);
    margin-bottom: 20px;
}

#about .about-list {
    list-style: none;
    padding: 0;
}

#about .about-list li {
    padding: 10px 0;
    font-size: 16px;
    color: var(--text-dark);
}

#about .about-list li i {
    color: var(--primary-color);
    margin-right: 10px;
    font-size: 18px;
}

#about .profile img {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#about .profile figcaption {
    background: var(--primary-color);
    color: var(--white);
    padding: 20px;
    text-align: center;
    border-radius: 0 0 10px 10px;
}

/* Services Section */
.service-thumb {
    background: var(--white);
    border-radius: 10px;
    padding: 40px 30px;
    margin-bottom: 30px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.service-thumb:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.service-thumb i {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-thumb h4 {
    font-size: clamp(17px, 2.2vw, 20px);
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 15px;
}

.service-thumb p {
    font-size: clamp(14px, 1.6vw, 15px);
    color: var(--text-light);
    line-height: 1.6;
}

/* Mission Section */
#mission {
    background: linear-gradient(135deg, rgba(44,122,123,0.05) 0%, rgba(56,178,172,0.05) 100%);
}

.mission-info {
    margin-bottom: 30px;
}

.mission-info h3 {
    font-size: clamp(20px, 2.8vw, 24px);
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.mission-info p {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: 1.8;
    color: var(--text-dark);
}

/* Appointment Section */
#appointment {
    background: var(--dark-color);
    padding: 80px 0;
}

#appointment .section-title h2,
#appointment .section-title p {
    color: var(--white);
}

#appointment-form {
    background: var(--primary-color);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

#appointment-form .section-title {
    margin-bottom: 30px;
}

#appointment-form .section-title h2 {
    color: var(--white);
    margin-bottom: 10px;
}

#appointment-form .section-title p {
    color: var(--white);
}

#appointment-form label {
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
    display: block;
}

#appointment-form .form-control {
    border: 2px solid var(--white);
    border-radius: 5px;
    padding: 12px 15px;
    font-size: 15px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    background: var(--white);
}

#appointment-form .form-control:focus {
    border-color: var(--white);
    box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
    outline: none;
}

#appointment-form button[type="submit"] {
    background: var(--white);
    color: var(--primary-color);
    border: 2px solid var(--white);
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px;
    margin: 20px auto 0;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#appointment-form button[type="submit"]:hover {
    background: var(--dark-color);
    color: var(--white);
    border-color: var(--dark-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

#appointment-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Form Messages */
#form-messages {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-weight: 500;
}

#form-messages.alert-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

#form-messages.alert-danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

/* Success Popup Modal */
.success-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.3s ease-in-out;
}

.success-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-modal-content {
    background: white;
    border-radius: 15px;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: slideUp 0.4s ease-out;
    position: relative;
}

.success-modal-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: scaleIn 0.5s ease-out 0.2s backwards;
}

.success-modal-icon i {
    font-size: 40px;
    color: white;
}

.success-modal-icon::before {
    content: "✓";
    font-size: 50px;
    font-weight: bold;
    color: white;
    line-height: 1;
}

.success-modal h2 {
    color: var(--primary-color);
    font-size: 28px;
    margin-bottom: 15px;
    font-weight: 700;
}

.success-modal p {
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.success-modal .email-note {
    background: #f8f9fa;
    border-left: 4px solid var(--primary-color);
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0;
    text-align: left;
}

.success-modal .email-note strong {
    color: var(--dark-color);
}

.success-modal-close {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: all 0.3s ease;
}

.success-modal-close:hover {
    background: var(--dark-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 767px) {
    .success-modal-content {
        padding: 30px 20px;
        width: 95%;
    }
    
    .success-modal h2 {
        font-size: 24px;
    }
    
    .success-modal p {
        font-size: 14px;
    }
}

/* Contact Section */
.contact-info {
    text-align: center;
    padding: 30px 20px;
    margin-bottom: 30px;
}

.contact-info i {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.contact-info h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 10px;
}

.contact-info p,
.contact-info a {
    font-size: 16px;
    color: var(--text-light);
}

.contact-info a:hover {
    color: var(--primary-color);
}

/* Footer */
footer {
    background: var(--dark-color);
    color: var(--white);
    padding: 60px 0 30px;
}

footer .section-title h2 {
    color: var(--white);
    font-size: 20px;
    margin-bottom: 20px;
}

footer p,
footer a {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    line-height: 1.8;
}

footer a:hover {
    color: var(--secondary-color);
}

footer .footer-links {
    list-style: none;
    padding: 0;
}

footer .footer-links li {
    margin-bottom: 10px;
}

footer .social-icon {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

footer .social-icon li {
    display: inline-block;
    margin-right: 10px;
}

footer .social-icon li a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    font-size: 18px;
    transition: all 0.3s ease;
}

footer .social-icon li a:hover {
    background: var(--primary-color);
    color: var(--white);
}

footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
    margin-top: 40px;
}

footer .copyright-text,
footer .related-sites {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

/* Responsive Design */

/* Desktop (992px+) - PC Carousel */
@media (min-width: 992px) {
    /* Center text vertically in herobar */
    .slider {
        height: 250px !important;
        min-height: 250px !important;
        display: flex;
        align-items: center;
        padding: 80px 0 0 0 !important;
    }
    
    .slider .container {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .slider .row {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    /* Hide inactive carousel items */
    .slider .owl-item:not(.active):not(.center):not(.animated) {
        opacity: 0;
        visibility: hidden;
    }
    
    /* Show active items */
    .slider .owl-item.active,
    .slider .owl-item.center,
    .slider .owl-item.animated {
        opacity: 1;
        visibility: visible;
    }
    
    /* Hide buttons on PC */
    .slider .hero-content a.section-btn {
        display: none;
    }
    
    /* Ensure dots are visible on PC - positioned below text */
    .slider .owl-dots {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        bottom: 15px !important;
        width: 100% !important;
        text-align: center !important;
        z-index: 10 !important;
    }
    
    /* Navigation styling */
    .custom-navbar .navbar-nav li a {
        font-size: 16px;
        white-space: nowrap;
        padding: 10px 12px;
    }
    
    .custom-navbar .navbar-nav {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    .custom-navbar .navbar-collapse {
        flex-wrap: nowrap;
        overflow: visible;
    }
}

/* iPad-specific (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .slider {
        height: 400px;
        min-height: 400px;
        padding: 160px 0 40px 0;
    }
    
    .slider .owl-dots {
        bottom: -25px;
    }
    
    .slider .owl-item:not(.active):not(.center) {
        opacity: 0;
        visibility: hidden;
    }
    
    /* Prevent navigation wrapping on iPad - dynamic font sizing */
    .custom-navbar .navbar-collapse {
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    
    .custom-navbar .navbar-nav {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
    }
    
    .custom-navbar .navbar-nav li {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    
    .custom-navbar .navbar-nav li a {
        font-size: clamp(9px, 1.15vw, 13px) !important;
        padding: 10px clamp(4px, 0.7vw, 10px) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        text-align: center !important;
        font-weight: 700 !important; /* Bold navigation options for iPad and iPad Mini */
    }
    
    /* Hide mobile buttons (Donate and Apply for Assistance) in navbar for iPad and iPad Mini */
    .mobile-buttons {
        display: none !important;
    }
    
    /* Hide top-right buttons (Donate and Apply for Assistance) for iPad and iPad Mini */
    .top-right-buttons {
        display: none !important;
    }
}

/* iPad Landscape-specific fixes - MUST come after general iPad query to override */
/* Targets: iPad (1024x768), iPad Pro 11" (1194x834), iPad Pro 12.9" (1366x1024) in landscape */
/* Use multiple media queries to catch all iPad landscape sizes */
@media screen and (min-width: 1024px) and (max-width: 1400px) and (min-height: 600px) and (max-height: 1024px),
       screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape),
       screen and (min-width: 1024px) and (orientation: landscape) and (max-height: 1024px) {
    
    .slider {
        margin-top: 60px;
        padding: 60px 0 40px 0;
        height: 300px;
        min-height: 300px;
    }
    
    .slider .owl-item:not(.active) {
        opacity: 0;
        visibility: hidden;
    }
    
    /* CRITICAL: Navigation font sizing in landscape - MUST override general iPad styles */
    .custom-navbar .navbar-collapse {
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }
    
    .custom-navbar .navbar-nav {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .custom-navbar .navbar-nav li {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: none !important;
        flex-shrink: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .custom-navbar .navbar-nav li a {
        font-size: clamp(7px, 0.7vw, 9px) !important; /* Smaller font in landscape to prevent wrapping */
        padding: 5px clamp(1px, 0.3vw, 3px) !important; /* Minimal padding */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        text-align: center !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
}

/* Additional iPad landscape fix using body class (JavaScript fallback) */
body.is-ipad-landscape .slider {
    margin-top: 60px;
    padding: 60px 0 40px 0;
    height: 300px;
    min-height: 300px;
}

body.is-ipad-landscape .custom-navbar .navbar-nav li a {
    font-size: clamp(7px, 0.7vw, 9px) !important;
    padding: 5px clamp(1px, 0.3vw, 3px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) and (min-width: 768px) {
    /* Only apply if not iPad (iPad uses dynamic font sizing) */
    .custom-navbar .navbar-nav li a {
        font-size: 12px;
        padding: 10px 10px;
    }
    
    .custom-navbar .navbar-brand .logo-image {
        height: 75px;
        max-height: 75px;
    }
    
    .custom-navbar .navbar-header {
        min-height: 75px;
    }
    
    .top-right-buttons .section-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .slider {
        margin-top: 100px;
    }
    
    .section-title h2 {
        font-size: 28px;
    }
    
    #appointment-form {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .slider {
        margin-top: 90px;
        padding: 0 0 0 0;
        height: auto;
        min-height: 250px;
    }
    
    .slider .owl-item .hero-content {
        padding: 20px 15px;
    }
    
    .slider .owl-dots {
        bottom: -70px;
        position: absolute;
    }
    
    .slider .owl-item:not(.active):not(.center) {
        opacity: 0;
    }
    
    .custom-navbar .navbar-toggle {
        display: block !important;
        position: relative;
        z-index: 1000 !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        pointer-events: auto !important;
    }
    
    .custom-navbar .navbar-collapse {
        border-top: 1px solid #e2e8f0;
        margin-top: 10px;
    }
    
    .custom-navbar .navbar-collapse.collapse {
        display: none !important;
    }
    
    .custom-navbar .navbar-collapse.collapse.in {
        display: block !important;
    }
    
    .custom-navbar .navbar-nav {
        margin: 0;
        flex-direction: column;
    }
    
    .custom-navbar .navbar-nav li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .custom-navbar .navbar-nav li a {
        display: block;
        padding: 15px 20px !important;
        font-size: 14px !important;
        text-align: left;
    }
    
    .custom-navbar .navbar-nav.navbar-right {
        margin-top: 10px;
    }
    
    .custom-navbar .navbar-nav.navbar-right li a {
        background: var(--primary-color);
        color: var(--white);
        border-radius: 5px;
        margin: 10px 15px;
    }
    
    
    section {
        padding: 60px 0;
    }
    
    .service-thumb {
        margin-bottom: 20px;
    }
    
    .custom-navbar .navbar-brand .logo-image {
        height: 68px !important;
        max-height: 68px !important;
        max-width: 350px;
    }
    
    .custom-navbar {
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .slider {
        margin-top: 80px;
        padding: 0 0 0 0;
        height: auto;
        min-height: 220px;
    }
    
    .slider .owl-item .hero-content {
        padding: 15px 10px;
    }
    
    .slider .owl-dots {
        bottom: -70px;
        position: absolute;
    }
    
    .slider .owl-item:not(.active):not(.center) {
        opacity: 0;
    }
    
    .custom-navbar .navbar-brand .logo-image {
        height: 60px;
        max-height: 60px;
        max-width: 280px;
    }
    
}


/* Animations */
.wow {
    visibility: hidden;
}

.animated {
    visibility: visible !important;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

/* Print Styles */
@media print {
    .navbar,
    footer,
    .section-btn {
        display: none;
    }
    
    body {
        font-size: 12pt;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 18pt;
    }
}