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

:root {
    --primary-color: #4CAF50;
    --secondary-color: #2c3e50;
    --text-color: #333;
    --light-gray: #f5f5f5;
    --dark-gray: #2d3436;
    --white: #ffffff;
}

/* Removed an overly aggressive rule that forced the hamburger visible on desktop. */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Prevent fixed header from covering anchored sections */
section[id] {
    /* default offset to avoid header overlap for anchored links */
    scroll-margin-top: 90px; /* offset equal or slightly larger than header height */
}

/* Larger offset specifically for the services section so the carousel dots remain visible
   when navigating via the header link. Adjust if you change header height. */
#services {
    scroll-margin-top: 140px; /* push section further down so carousel controls/dots are visible */
}

/* Top Bar */
.top-bar {
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 10px 0;
    font-size: 14px;
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left span {
    margin-right: 20px;
}

.slide-card h3 {
    font-size: 22px;
    margin-top: 20px;
    margin-bottom: 12px;
    letter-spacing: 0.6px;
}
.top-bar-right a {
    color: var(--white);
    margin-left: 15px;
    text-decoration: none;
    transition: color 0.3s;
}

.top-bar-right a:hover {
    color: var(--primary-color);
}

/* Header */
.header {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 100%);
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0);
    position: fixed; /* keep header fixed across pages for consistent placement */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}

/* Ensure header has consistent height across pages */
.header,
.header.scrolled,
.light-header .header {
    padding: 8px 0; /* equal top/bottom padding to visually center content */
    min-height: 56px; /* slightly smaller consistent visual height */
}

/* Ensure header content is vertically centered */
.header .header-content {
    display: flex;
    align-items: center; /* vertically center logo and controls within header height */
    height: 56px; /* ensure vertical centering reference equals header min-height */
}

/* Explicit header layout to avoid page-specific shifts */
.header .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px; /* ensure same horizontal padding on all pages */
}

.header .logo {
    display: flex;
    align-items: center;
    margin-right: 16px; /* consistent gap between logo and nav */
}

.header .nav {
    margin-left: auto; /* push nav to the right of logo */
    display: flex;
    align-items: center;
}

.nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 22px;
    align-items: center;
}

.language-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 28px;
}

/* Mobile language selector dropdown - hidden by default */
.language-selector-mobile {
    display: none;
}

.language-selector .lang-option {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
}

.language-selector .lang-option:hover,
.language-selector .lang-option:focus {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--primary-color);
    outline: none;
}

.language-selector .lang-option.lang-active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}



/* Header text colors with smooth transitions */
.header .nav a {
    color: var(--white);
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

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

.header .nav a.active {
    color: var(--primary-color);
}

.header .header-icons a {
    color: var(--white);
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.header .header-icons a:hover {
    color: var(--primary-color);
}

.header .mobile-menu-toggle {
    color: var(--white);
    transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.header .logo-img {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    height: 48px; /* smaller logo to match reduced header height */
}

/* Header styles when scrolled (for contact page and after scroll) */
.header.scrolled .nav a {
    color: var(--text-color) !important;
}

.header.scrolled .language-selector .lang-option {
    color: var(--text-color);
    border-color: rgba(0, 0, 0, 0.08);
}

.header.scrolled .language-selector .lang-option:hover,
.header.scrolled .language-selector .lang-option:focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.header.scrolled .language-selector .lang-option.lang-active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Language selector styling for light header (projects, about pages) */
.light-header .language-selector .lang-option {
    color: var(--text-color);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-header .language-selector .lang-option:hover,
.light-header .language-selector .lang-option:focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.light-header .language-selector .lang-option.lang-active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* Redirect stubs displayed on root-level HTML files */
body.redirect-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fb 0%, #eef2f8 100%);
    color: #0a2342;
    padding: 24px;
    text-align: center;
}

.redirect-card {
    max-width: 520px;
    width: 100%;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(10, 35, 66, 0.12);
    padding: 40px 32px;
}

.redirect-card h1 {
    font-size: 1.9rem;
    margin-bottom: 12px;
    color: inherit;
}

.redirect-card p {
    margin-bottom: 16px;
    line-height: 1.6;
}

.redirect-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.redirect-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid rgba(10, 35, 66, 0.16);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.redirect-link:hover,
.redirect-link:focus {
    border-color: #0a2342;
    outline: none;
}

.redirect-link.primary {
    background: #0a2342;
    color: var(--white);
    border-color: #0a2342;
}

/* Ensure scrolled header is fixed at top on pages like Contact where .scrolled is present on load */
.header.scrolled {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    /* make header clearly visible when scrolled or present on pages like Contact */
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,1) 100%);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 240ms ease, box-shadow 240ms ease, backdrop-filter 240ms ease;
}

.header.scrolled .nav a:hover {
    color: var(--primary-color) !important;
}

.header.scrolled .nav a.active {
    color: var(--primary-color) !important;
}

.header.scrolled .header-icons a {
    color: var(--text-color) !important;
}

.header.scrolled .header-icons a:hover {
    color: var(--primary-color) !important;
}

.header.scrolled .mobile-menu-toggle {
    color: var(--text-color) !important;
}

.header.scrolled .logo-img {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.header-content {
    display: flex;
    align-items: center;
    gap: 20px; /* spacing between logo and nav */
}

/* Force header-content to have the same height as header so children center vertically */
.header {
    display: block; /* keep default but ensure children can reference height */
}
.header .header-content {
    height: 56px; /* match header min-height */
    align-items: center;
}

/* push navigation to the right (logo stays left). icons/menu follow the nav */
.header-content {
    display: flex;
    align-items: center;
    gap: 20px; /* spacing between logo and nav */
}

/* push navigation to the right (logo stays left). icons/menu follow the nav */
.header-content .nav {
    margin-left: auto; /* restore nav pushing to the right */
}

/* ensure icons/menu keep natural flow to the right of nav */
.header-content .header-icons,
.header-content .mobile-menu-toggle {
    margin-left: 0;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: var(--secondary-color);
}

.header .logo {
    margin: 0; /* remove extra top/bottom margins that could offset centering */
}

.logo-img {
    height: 48px;
    width: auto;
    max-width: 250px;
    object-fit: contain;
    display: block;
    margin: 0; /* remove any default image margins */
}

/* Responsivo para o logo */
@media (max-width: 768px) {
    /* reduzir padding lateral da secção para ganhar alguns px no mobile */
    #services .container { padding-left: 12px; padding-right: 12px; }
    .logo-img {
        height: 50px;
        max-width: 180px;
    }
}

/* Keep mobile menu toggle flush to right on small screens */
@media (max-width: 768px) {
    .header-content {
        display: flex;
        align-items: center;
        justify-content: space-between; /* logo left, controls right */
        gap: 8px; /* add gap to prevent overlap */
    }

    .header-content .nav {
        margin-left: 0; /* ensure nav doesn't push toggle off-screen when hidden */
    }

    .header-content .mobile-menu-toggle {
        margin-left: 0;
        margin-right: 0;
        order: 3; /* menu button always last */
        flex-shrink: 0; /* never shrink the menu button */
    }

    .header .mobile-menu-toggle {
        align-self: center; /* ensure button remains centered inside header-content */
    }

    /* Hide horizontal language selector on mobile */
    .language-selector {
        display: none !important;
    }

    /* Show mobile language dropdown */
    .language-selector-mobile {
        display: block !important;
        margin-left: auto;
        margin-right: 0;
        order: 2; /* language selector before menu button */
        flex-shrink: 1; /* allow to shrink if needed */
    }

    .language-selector-mobile select {
        padding: 8px 12px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0.1);
        color: var(--white);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 70px;
        text-align: center;
    }

    .header.scrolled .language-selector-mobile select,
    .light-header .language-selector-mobile select {
        color: var(--text-color);
        border-color: rgba(0, 0, 0, 0.3);
        background-color: rgba(0, 0, 0, 0.05);
    }

    .language-selector-mobile select:hover {
        border-color: var(--primary-color);
        background-color: rgba(76, 175, 80, 0.1);
    }

    .language-selector-mobile select option {
        background-color: var(--white);
        color: var(--text-color);
    }
}

/* Extra small screens - ensure menu button always visible */
@media (max-width: 400px) {
    .header-content {
        gap: 6px; /* reduce gap on very small screens */
    }

    .logo-img {
        height: 40px !important;
        max-width: 140px !important;
    }

    .language-selector-mobile select {
        min-width: 60px;
        padding: 6px 8px;
        font-size: 13px;
    }

    .mobile-menu-toggle {
        padding: 0 6px;
        font-size: 22px;
    }
}

.logo i {
    color: var(--primary-color);
    margin-right: 10px;
    font-size: 32px;
}

.nav ul {
    display: flex;
    list-style: none;
    gap: 22px; /* slightly reduced gap to align menu items across pages */
}

.nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 400; /* normal (não bold) */
    transition: color 0.3s;
    padding: 6px 8px; /* consistent clickable padding so positioning matches */
}

.nav a:hover,
.nav a.active {
    color: var(--primary-color);
}

.header-icons a {
    color: var(--text-color);
    margin-left: 20px;
    font-size: 18px;
    text-decoration: none;
    transition: color 0.3s;
}

.header-icons a:hover {
    color: var(--primary-color);
}

.mobile-menu-toggle {
    display: none; /* hidden by default; will show on mobile via media query */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--white);
    padding: 0 10px; /* horizontal padding only; vertical centering handled by height */
    align-items: center;
    justify-content: center;
    height: 56px; /* match the new header min-height so the icon centers vertically */
}

/* Hamburger fallback: draw three bars using the <i> element + ::before/::after.
   Middle bar is the element; top/bottom are pseudo-elements positioned via
   translateY so we can control spacing precisely. */
.mobile-menu-toggle i {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 2px; /* middle bar thickness */
    background: currentColor;
    border-radius: 2px;
}

.mobile-menu-toggle i::before,
.mobile-menu-toggle i::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 180ms ease, opacity 140ms ease;
    transform-origin: center;
}

.mobile-menu-toggle i::before { transform: translateY(-8px); }
.mobile-menu-toggle i::after  { transform: translateY(8px); }

/* When menu is active, transform hamburger to X. We target via .nav.active on the nav.
   Use a selector that matches when the nav is active anywhere before/after the button.
   Since the markup places the .mobile-menu-toggle inside the header near nav, we
   prefer a general sibling selector from the header: when .nav has .active class,
   add an .open class to the button via JS would be ideal, but since JS toggles
   .nav.active only, we style based on the header state using a parent selector.
   If markup doesn't allow a pure-CSS sibling selection, the JS can add an
   "open" class to the button — fallback handled below.
*/

/* Preferred: if JS adds .open to the button (we'll make CSS handle both cases) */
/* Ensure X transform is centered and reliable across DOM/order variations */
.mobile-menu-toggle.open i { background: transparent !important; }
.mobile-menu-toggle.open i::before { transform: translateY(0) rotate(45deg) !important; }
.mobile-menu-toggle.open i::after  { transform: translateY(0) rotate(-45deg) !important; }

/* Fallback pure-CSS when nav is a sibling and appears after the button: in many
   header markups .mobile-menu-toggle appears before #primary-nav, so we attempt
   a sibling selector too. */
/* Note: pure-CSS sibling selectors for transforming the toggle are unreliable
    with different DOM orders. The JS will add/remove an `.open` class on the
    button so the X animation is deterministic. */

/* Remove the global green outline for mobile toggle and provide subtle focus-visible */
.mobile-menu-toggle:focus,
.mobile-menu-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}


/* Hero Section */
.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1600') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    position: relative;

    /* make space for the fixed header so hero content aligns visually like before */
    padding-top: 110px;
}

.hero-content {
    max-width: 800px;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* Buttons: use the same system UI stack as your reference and size/spacing */
.btn {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    padding: 0.75rem 1.5rem; /* matches reference sizing */
    border: none;
    border-radius: 0.5rem; /* ~8px, matches reference */
    font-size: 1rem; /* 16px */
    font-weight: 600; /* match reference weight */
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* spacing between icon and text */
    min-width: 140px;
    justify-content: center;
}

/* WhatsApp CTA consolidated styles (single source of truth) */
.btn-whatsapp,
.btn-whatsapp:link,
.btn-whatsapp:visited,
.btn-whatsapp:active,
.btn-whatsapp:focus {
    padding: 12px 24px; /* match base .btn */
    font-size: 16px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* match base .btn spacing */
    color: var(--white);
    background-color: var(--primary-color);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}

.btn-whatsapp i,
.btn-whatsapp .btn-text {
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: var(--white);
}

.btn-whatsapp i {
    margin-right: 8px; /* match .btn icon spacing so total width aligns */
}

.btn-whatsapp:hover {
    background-color: #45a049;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.12);
}

.btn-whatsapp:focus {
    outline: 3px solid rgba(76,175,80,0.12);
    outline-offset: 2px;
}

/* Contact info whatsapp block: separate item and align button to right */
.contact-info-item.whatsapp-item {
    display: flex;
    align-items: center;
    justify-content: center; /* center the button horizontally */
    gap: 20px;
    padding: 18px 0; /* provide some vertical spacing inside the card */
}
.contact-info-item.whatsapp-item .contact-details {
    display: none; /* hide text details for the whatsapp-only card (keeps layout compact) */
}
.contact-info-item.whatsapp-item .contact-icon {
    display: none; /* hide icon for whatsapp-only row to avoid offset */
}
.contact-info-item.whatsapp-item .btn-whatsapp {
    margin-left: 0;
    width: 100%;
    max-width: 260px; /* keep a reasonable maximum width */
    justify-content: center; /* center icon+text inside button */
}

@media (max-width: 768px) {
    .contact-info-item.whatsapp-item {
        flex-direction: column;
        align-items: center;
    }
    .contact-info-item.whatsapp-item .btn-whatsapp {
        max-width: 100%;
    }
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.btn-secondary:hover {
    background-color: var(--white);
    color: var(--text-color);
}

/* Hero Contact button styled as outlined pill with inner text like the provided image */

.btn-contact-hero,
.btn-contact-hero:link,
.btn-contact-hero:visited {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
    padding: 0.75rem 1rem; /* less wide: reduce horizontal padding */
    border-radius: 0.5rem;
    font-weight: 600; /* match reference */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.2px;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background-color 180ms ease, color 180ms ease, transform 120ms ease, border-color 120ms ease;
    max-width: none;
    white-space: nowrap;
}

/* Hover: contact becomes fully white with dark text */
.btn-contact-hero:hover,
.btn-contact-hero:focus {
    background: #ffffff;
    color: #111111;
    border-color: transparent;
    transform: translateY(-2px);
}

/* make sure hero buttons look balanced: whatsapp filled, contact outlined */

.hero .hero-buttons .btn-whatsapp {
    background-color: var(--primary-color); /* keep site primary color */
    color: var(--white);
    border: none;
    padding: 0.75rem 1rem; /* less wide horizontally */
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 160px;
    min-width: 120px;
}

.hero .hero-buttons .btn-whatsapp svg,
.hero .hero-buttons .btn-whatsapp i {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

/* If a primary button also uses the contact-hero style, keep primary background but use contact typography/height */
.btn-primary.btn-contact-hero {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border: 2px solid var(--primary-color);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* High-specificity override to ensure both hero buttons are identical in typography and height */
.hero .hero-buttons a.btn-contact-hero,
.hero .hero-buttons a.btn-primary.btn-contact-hero {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    line-height: 1 !important;
    min-height: 52px !important; /* increased visual height */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure the icon doesn't change button height and is vertically centered */
.hero .hero-buttons a.btn-contact-hero svg,
.hero .hero-buttons a.btn-primary.btn-contact-hero svg {
    width: 20px !important;
    height: 20px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Ensure WhatsApp button text uses the same (thin) font-weight as Contact Us */
.hero .hero-buttons a.btn-primary.btn-whatsapp,
.hero .hero-buttons a.btn-primary.btn-whatsapp .btn-text {
    font-weight: 600 !important; /* same as Contact Us */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
}

/* Ensure equalization script still works — allow explicit min-width but keep inline width when JS runs */
.hero .hero-buttons .btn-contact-hero,
.hero .hero-buttons .btn-whatsapp {
    min-width: 120px; /* reduce min width so buttons are less wide */
}

/* 
WhatsApp Button Styles - TEMPORARILY COMMENTED
.*/

.hero-buttons {
    display: flex;
    align-items: center; /* center vertically */
    gap: 16px;
    justify-content: center; /* center the button group horizontally */
}

.hero-buttons .btn {
    /* allow intrinsic width so hero buttons match contact page sizing */
    min-width: 0;
    text-align: center;
    justify-content: center;
    gap: 0; /* control spacing with svg margin-right (8px) */
}

/* center only the hero button text (icon + label) */
.hero .hero-buttons .btn .btn-text,
.hero .hero-buttons .btn i {
    text-align: center;
}

/* Force hero button label typography to be identical */
.hero .hero-buttons .btn .btn-text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

.btn .btn-text {
    display: inline-block;
    text-align: center;
}

.btn i {
    margin-right: 0; /* rely on gap for spacing; whatsapp-specific margin is applied where needed */
    display: inline-block;
}

/* Larger WhatsApp icon in hero context */
.hero .hero-buttons .btn i.fab.fa-whatsapp,
.hero .hero-buttons .btn i.fa-whatsapp {
    font-size: 24px;
}

.whatsapp-item .contact-icon {
    background-color: var(--primary-color);
}

.whatsapp-item .contact-icon i {
    color: var(--white);
}

.whatsapp-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.whatsapp-link:hover {
    color: #45a049;
    text-decoration: underline;
}

/* Section Title */
.section-title {
    text-align: center !important;
    font-size: 36px;
    margin-bottom: 50px;
    color: var(--secondary-color);
    position: relative;
    padding-bottom: 20px;
}

/* Why Choose Us */
.why-choose-us {
    padding: 80px 0;
    background-color: var(--light-gray);
    text-align: center;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.feature-card {
    background-color: var(--white);
    padding: 40px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.feature-card:hover {
    transform: translateY(-10px);
}

.feature-icon {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

/* Add extra spacing below the WHY CHOOSE US section title so cards sit lower */
.why-choose-us .section-title {
    margin-bottom: 70px;
}

/* Make OUR SERVICES title spacing match WHY CHOOSE US */
.services .section-title {
    margin-bottom: 70px;
}

/* Center the Our Values section title */
.our-values .section-title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Services */
.services {
    padding: 80px 0;
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: var(--light-gray);
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    transition: all 0.3s;
}

.service-card:hover {
    background-color: var(--primary-color);
    color: var(--white);
    transform: translateY(-5px);
}

.service-icon {
    font-size: 40px;
    color: var(--primary-color);
    margin-bottom: 20px;
    transition: color 0.3s;
}

.service-card:hover .service-icon {
    color: var(--white);
}

.service-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.service-card p {
    font-size: 14px;
    color: #666;
}

.service-card:hover p {
    color: var(--white);
}

/* FAQ Section */
.faq-section {
    padding: 90px 0;
    background: var(--white);
}

.faq-header {
    max-width: 760px;
    margin-bottom: 48px;
}

.faq-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    align-items: stretch;
}

.faq-left {
    flex: 0 1 320px;
    max-width: 320px;
    display: flex;
    align-items: flex-start;
}

.faq-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(44, 62, 80, 0.65);
    margin-bottom: 16px;
}

.faq-header h2 {
    font-size: 36px;
    margin-bottom: 12px;
    color: var(--secondary-color);
}

.faq-header p {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
}

.faq-contact-card {
    margin-top: 0;
    padding: 28px;
    background: var(--light-gray);
    border-radius: 16px;
    width: 100%;
}

.faq-card-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(44, 62, 80, 0.6);
    margin-bottom: 10px;
}

.faq-contact-card h3 {
    font-size: 22px;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.faq-contact-card p {
    color: rgba(0, 0, 0, 0.68);
    margin-bottom: 18px;
}

.faq-contact-card .btn-primary {
    white-space: nowrap;
}

.faq-right {
    flex: 1 1 460px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--white);
    border: 1px solid rgba(44, 62, 80, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    padding: 20px 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--secondary-color);
    text-align: left;
    transition: background 0.2s ease;
}

.faq-question:focus {
    outline: 3px solid rgba(76,175,80,0.25);
    outline-offset: 2px;
}

.faq-question:hover {
    background: rgba(76, 175, 80, 0.05);
}

.faq-icon {
    color: var(--primary-color);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-question-text {
    flex: 1;
}

.faq-arrow {
    color: rgba(44, 62, 80, 0.5);
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
}

.faq-question[aria-expanded="true"] .faq-arrow {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 20px 24px 20px 24px;
    background: rgba(76, 175, 80, 0.05);
    border-top: 1px solid rgba(44, 62, 80, 0.08);
    color: rgba(0, 0, 0, 0.72);
    font-size: 15px;
}

.faq-answer[hidden] {
    display: none;
}

/* Interior pages */
.page-hero {
    padding: 130px 0 70px;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.92), rgba(33, 47, 62, 0.92));
    color: var(--white);
    text-align: center;
}

.page-hero h1 {
    font-size: 40px;
    margin-bottom: 12px;
}

.page-hero p {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.82);
}

.projects-hero {
    padding: 12px 0 45px;
    background: var(--white);
    color: var(--secondary-color);
    text-align: center;
    border-bottom: 1px solid rgba(44, 62, 80, 0.08);
}

.projects-hero p {
    color: rgba(0, 0, 0, 0.68);
}

.page-placeholder {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(236, 241, 246, 0.95), rgba(223, 232, 241, 0.95));
}

.placeholder-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--white);
    padding: 48px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(25, 42, 62, 0.12);
    border: 1px solid rgba(44, 62, 80, 0.08);
}

.placeholder-card h2 {
    font-size: 30px;
    margin-bottom: 12px;
    color: var(--secondary-color);
}

.placeholder-card p {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: 20px;
}

.placeholder-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.page-placeholder .btn.btn-secondary {
    color: var(--secondary-color);
    border: 2px solid rgba(44, 62, 80, 0.65);
    background: transparent;
}

.page-placeholder .btn.btn-secondary:hover {
    background: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
}

/* 404 page */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-gray);
    padding: 60px 0;
}

.error-card {
    background: var(--white);
    padding: 48px;
    border-radius: 18px;
    text-align: center;
    max-width: 560px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

.error-code {
    font-size: 72px;
    font-weight: 800;
    color: var(--primary-color);
    display: block;
    margin-bottom: 12px;
}

.error-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

@media (max-width: 960px) {
    .faq-wrapper {
        flex-direction: column;
    }

    .faq-left,
    .faq-right {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .faq-section {
        padding: 70px 0;
    }

    .faq-contact-card {
        padding: 24px;
    }

    .faq-question {
        padding: 18px 20px;
    }

    .placeholder-card {
        padding: 36px 24px;
    }

    .page-hero {
        padding: 110px 0 60px;
    }
}

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

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-bottom: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-section .btn {
    align-self: flex-start;
}


.footer-section h3 {
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-section ul {
    list-style: none;
    padding-left: 0;
}

.footer-section p {
    margin-bottom: 15px;
    line-height: 1.8;
    color: #ccc;
}

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

.footer-section a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--primary-color);
}

.footer-section i {
    margin-right: 10px;
    color: var(--primary-color);
}

.footer-bottom {
    border-top: 1px solid #444;
    padding-top: 20px;
    text-align: center;
}

.footer-note {
    color: #aaa;
    font-size: 14px;
}

.social-links {
    margin-bottom: 20px;
}

.social-links a {
    color: var(--white);
    margin: 0 10px;
    font-size: 20px;
    text-decoration: none;
    transition: color 0.3s;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .top-bar-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .top-bar-left span {
        display: block;
        margin: 5px 0;
    }

    .header .nav {
        display: none;
    }

    /* when menu is active (toggled), show nav as block and full width */
    .header .nav.active {
        display: block;
        background: var(--white);
        position: absolute;
        left: 0;
        right: 0;
        top: 70px; /* below header */
        padding: 20px 20px 30px;
        box-shadow: 0 8px 30px rgba(0,0,0,0.1);
        z-index: 1500;
    }

    /* Make menu links dark and legible when the mobile menu overlays the hero */
    .nav.active a,
    .nav.active ul li a {
        color: var(--secondary-color) !important;
    }

    .nav.active ul {
        flex-direction: column;
        gap: 14px;
    }

    .mobile-menu-toggle {
        display: inline-flex; /* show hamburger only on mobile */
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    /* Mobile-specific adjustments for WhatsApp CTA: rely on consolidated .btn-whatsapp above */
    .btn-whatsapp {
        padding: 12px 20px;
        border-radius: 6px;
    }

    .btn-whatsapp i {
        color: var(--white);
    }

    .features-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Hero background opacity only on mobile */
    .hero {
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3));
    }
    
    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1600') center/cover;
        opacity: 0.7;
        z-index: -1;
        pointer-events: none;
    }

    /* Make each button fill the flex cross-axis so both buttons have equal height
       while preserving their intrinsic width. We limit this rule to hero buttons. */
    .hero .hero-buttons .btn {
        align-self: stretch;
        display: inline-flex; /* ensure inner content still centers */
        align-items: center;
        justify-content: center; /* center content inside each hero button */
    }
}

@media (max-width: 480px) {
    .hero {
        height: 400px;
    }

    .hero-title {
        font-size: 24px;
        min-height: 0; /* reduzir altura do bloco de texto no mobile */
    }


    /* Stack hero buttons on small screens and restore normal spacing */
    .hero .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .hero .hero-buttons .btn {
        width: auto;
        justify-content: center;
        margin: 0 auto;
    }
    .section-title {
        font-size: 28px;
    }
}

/* Center Contact Us button on About page for small screens */
@media (max-width: 768px) {
    .about-content .about-layout {
        display: block;
    }

    .about-text {
        text-align: center;
    }

    .about-text .btn {
        display: inline-block;
        margin: 16px auto 0;
    }
}

/* Contact Page Styles */
.contact-page {
    padding: 120px 0 80px;
    background-color: var(--light-gray);
}

.contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-header h1 {
    font-size: 42px;
    margin-bottom: 20px;
    color: var(--text-color);
}

.contact-header p {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.contact-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Contact Form */
.contact-form {
    background-color: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 25px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background-color: #fff;
}

.honeypot-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Default arrow only for generic selects (overridden by more specific selectors like #service) */
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; /* Remove native arrow */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 45px; /* Space for arrow */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-status {
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
}

.form-status--error {
    color: #c0392b;
}

.form-status--success {
    color: var(--primary-color);
}

/* Contact Info Section */
.contact-info-section {
    display: flex;
    flex-direction: column; /* stack card and CTA vertically */
    align-items: stretch;
    gap: 16px;
}

.contact-info-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    width: 100%;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

/* Force the Contact page WhatsApp CTA to match the home hero CTA exactly */
.contact-page .contact-info-item.whatsapp-item a.btn,
.contact-page .contact-info-item.whatsapp-item a.btn.btn-primary {
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important; /* match homepage spacing */
    border-radius: 5px !important;
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    font-size: 16px !important;
}

.contact-page .contact-info-item.whatsapp-item a.btn i,
.contact-page .contact-info-item.whatsapp-item a.btn .fab.fa-whatsapp {
    margin-right: 4px !important;
    font-size: 24px !important;
    color: var(--white) !important;
}

.contact-page .contact-info-item.whatsapp-item a.btn .btn-text {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Button that sits under the contact info card, full-width like the card */
.contact-card-btn {
    display: flex; /* use flex so icon + text can be aligned horizontally */
    align-items: center; /* vertical center */
    justify-content: center;
    gap: 8px; /* 8px gap between icon and text as requested */
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
    padding: 12px 20px;
    border-radius: 8px;
}

.contact-card-btn svg,
.contact-card-btn i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Strong enforcement: make the CTA fill the contact-info-section width and remove any accidental max-width */
.contact-info-section > a.contact-card-btn {
    display: flex !important; /* use flex so contents can be centered */
    align-items: center !important;
    justify-content: center !important; /* center icon + text horizontally */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}


.contact-icon i {
    color: var(--white);
    font-size: 18px;
}

.contact-details h3 {
    margin-bottom: 5px;
    color: var(--text-color);
    font-size: 16px;
}

.contact-details p {
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* Responsive Contact Page */
@media (max-width: 968px) {
    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contact-header h1 {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .contact-page {
        padding: 100px 0 60px;
    }
    
    .contact-form,
    .contact-info-card {
        padding: 30px;
    }
    
    .contact-header h1 {
        font-size: 32px;
    }
    
    .contact-header p {
        font-size: 16px;
    }
}

/* ------------------------- */
/* Services Carousel Styles  */
/* ------------------------- */
.services-carousel {
    position: relative;
    overflow: hidden;
    margin: 20px 0 0;
}

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

/* Focus styles for accessibility (exclude mobile-menu-toggle here; it is styled separately) */
.carousel-control:focus,
.carousel-dots button:focus {
    outline: 3px solid rgba(76,175,80,0.25);
    outline-offset: 2px;
}

.services-carousel.dragging {
    cursor: grabbing;
}

.carousel-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
    align-items: stretch; /* ensure slides stretch to same height */
}

.carousel-track {
    /* prevent visible overflow while dragging */
    backface-visibility: hidden;
}

/* Compensate inner slide padding so each page aligns perfectly to container width */
.services-carousel .carousel-track {
    margin-left: -12px;
    margin-right: -12px;
}

.carousel-slide {
    flex: 0 0 100%;
    box-sizing: border-box;
    position: relative;
    background: transparent;
    display: flex;
    flex-direction: column; /* stack media + card vertically */
    padding: 0 12px;
    height: 100%;
}

.carousel-slide .slide-media {
    /* fix media height so all slides align visually; image will cover */
    height: 220px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.carousel-slide .slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Babysitting slide image: fill the media area (like other slide images) and show slightly less top */
.babysitter-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* show a little less of the very top — shift image slightly down */
    object-position: center 15%;
}

/* On small screens keep the same object-position but no special transforms */
@media (max-width: 768px) {
    .babysitter-img { object-position: center 15%; }
}

/* Make the babysitter image slightly larger than the container so more of the image is visible
   (gives the effect of less zoom without using transform that created gaps). */
.carousel-slide .slide-media { position: relative; }

/* Position babysitter image absolutely so it always covers the media area without gaps */
.babysitter-img {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: auto;
    height: 120%; /* slightly taller so more of the image is visible */
    min-width: 100%;
    object-fit: cover;
    object-position: center 15%;
}

@media (max-width: 768px) {
    /* On mobile keep image static to avoid positioning issues */
    .babysitter-img {
        position: static;
        transform: none;
        width: 100%;
        height: 100%;
        min-width: 0;
        object-position: center 15%;
    }
}

.slide-caption {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 18px 24px;
    border-radius: 8px;
    max-width: 90%;
    text-align: center;
}

/* New card-style layout for slides */
.carousel-slide {
    /* keep slides as flex columns so media and card share height predictably */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    box-sizing: border-box;
}
.slide-media {
    width: 100%;
    overflow: hidden;
}

.slide-card {
    background: #fff;
    padding: 20px 24px; /* revert to more compact */
    margin: 0 auto 12px; /* reduced bottom gap so dots sit closer */
    width: 100%;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering of text block */
    flex: 1 1 auto; /* grow to fill remaining space so cards match height */
    min-height: 160px; /* revert to previous */
}

/* ensure consistent card heights on larger screens */
@media (min-width: 768px) {
    /* slightly reduce min-height to avoid clipping when jumping to anchors */
    .slide-card { min-height: 170px; }
}

@media (min-width: 1024px) {
    .slide-card { min-height: 190px; }
}

.slide-card h3 {
    font-size: 22px;
    margin-top: 12px; /* menos topo para melhor centragem visual */
    margin-bottom: 10px;
    letter-spacing: 0.6px;
}

.small-bar {
    /* Removed visual small green bar under slide titles per request */
    display: none;
}

.slide-card p {
    color: #666;
    line-height: 1.7;
    margin: 0;
}

.carousel-track {
    align-items: flex-start;
}

.slide-caption h3 {
    margin-bottom: 8px;
    font-size: 20px;
}

.slide-caption p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    z-index: 20;
}

.carousel-control.prev {
    left: 12px;
}

.carousel-control.next {
    right: 12px;
}

.carousel-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px; /* bring dots closer to cards */
}

.carousel-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ddd;
    cursor: pointer;
}

.carousel-dots button.active {
    background: var(--primary-color);
}

@media (max-width: 768px) {
    /* Evitar scroll horizontal no mobile, mas permitir sombras verticalmente */
    .services-carousel { overflow-x: hidden; overflow-y: visible; }
    #services { overflow-x: hidden; }

    /* Reduzir padding lateral do slide no mobile para caber melhor */
    .services-carousel .carousel-slide { padding: 0 8px; flex: 0 0 100%; max-width: 100%; }

    /* Compensar o padding 0 8px dos slides para alinhar flush e evitar overflow */
    .services-carousel .carousel-track {
        margin-left: -8px;
        margin-right: -8px;
    }

    .carousel-slide .slide-media {
        height: 140px; /* smaller media on mobile */
    }

    .carousel-control {
        width: 40px;
        height: 40px;
        font-size: 20px;
        background: rgba(0,0,0,0.35);
    }

    /* increase hit area without changing visual size */
    .carousel-control::before {
        content: '';
        position: absolute;
        left: -8px;
        right: -8px;
        top: -8px;
        bottom: -8px;
    }

    .slide-caption h3 {
        font-size: 18px;
    }

    .slide-caption p {
        font-size: 13px;
    }

    /* Mobile carousel - ensure consistent heights (mais compacto e sem espaços extra) */
    .carousel-slide {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto; /* allow slide to size itself */
        min-height: 0; /* não forçar altura extra no slide */
        padding: 0 12px;
        align-items: stretch;
    }
    /* Make mobile carousel cards uniform with larger minimums so content does not overlap */
    .carousel-slide .slide-media {
        flex: 0 0 140px; /* reduzir altura da imagem para dar mais espaço */
        height: 140px;
        min-height: 140px;
    }
    /* Allow slide cards to grow; add more padding and ensure vertical centering */
    .carousel-slide .slide-card {
        flex: 0 1 auto; /* permite que o cartão ocupe o espaço necessário */
        min-height: 110px;
        width: 100%;
        padding: 18px 16px;
        margin: 6px 0 10px;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
        border-radius: 0 0 6px 6px;
    }

    /* Ensure images always fill the media area */
    .carousel-slide .slide-media img,
    .carousel-slide .slide-media .babysitter-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* Reduce spacing inside mobile carousel cards */
    .carousel-slide .slide-card h3 {
        margin: 0 0 6px;
        font-size: 18px;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .carousel-slide .small-bar { margin: 0 auto 6px; }
    .carousel-slide .slide-card p {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        display: block;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }
}

/* Reduce spacing under the OUR SERVICES title on small screens to bring it closer to the cards */
@media (max-width: 768px) {
    .services .section-title {
        margin-bottom: 8px; /* reduzir para ganhar espaço vertical para o slide */
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    /* remove gap between slides so translateX by container width aligns perfectly on mobile */
    .carousel-track { gap: 0; }
}

/* Multi-column responsive behavior */
@media (min-width: 768px) {
    .carousel-slide {
        flex: 0 0 50%;
    }
}

@media (min-width: 1024px) {
    .carousel-slide {
        flex: 0 0 33.3333%;
    }
}

/* ------------------------- */
/* About page and light header */
/* ------------------------- */
.light-header .header {
    background: var(--white) !important;
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    -webkit-backdrop-filter: blur(0px) !important;
    backdrop-filter: blur(0px) !important;
}
.light-header .header .nav a {
    color: var(--secondary-color) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px !important;
}
.light-header .header .header-icons a,
.light-header .header .mobile-menu-toggle {
    color: var(--secondary-color) !important;
}

/* Prevent header overlap when header is positioned fixed on light pages */
.light-header main {
    /* header total height ~= logo (65px) + vertical padding (20px top + 20px bottom) = 105px
       use slightly larger value to be safe on desktop */
    padding-top: 110px;
}

@media (max-width: 768px) {
    /* smaller header on mobile; keep enough space so fixed header doesn't cover content */
    .light-header main { padding-top: 90px; }
    /* hide the (obsolete) search icon area on small screens */
    .header .header-icons { display: none !important; }
}

.about-hero {
    background: linear-gradient(180deg, rgba(76,175,80,0.06), rgba(76,175,80,0.02)), url('https://images.unsplash.com/photo-1503602642458-232111445657?w=1600') center/cover no-repeat;
    padding: 20px 0;
    color: var(--secondary-color);
}

/*
 * Ensure header navigation typography is consistent site-wide.
 * This conservative rule is placed after other header rules so it wins the cascade
 * without using !important. It matches the home header styles (font, size, weight).
 */
.header .nav a,
.light-header .header .nav a,
.header.scrolled .nav a {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1;
}
.about-hero .hero-inner {
    text-align: left;
    max-width: 1000px;
}
.about-title {
    font-size: 42px;
    margin-bottom: 12px;
}
.about-subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    color: #3b3b3b;
    max-width: 800px;
}
.hero-cta .btn {
    margin-top: 12px;
}

.about-content {
    padding: 40px 0 50px;
    background: var(--white);
}

/* About Layout */
.about-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px !important;
    align-items: center !important;
}

.about-text h1 {
    font-size: 36px !important;
    color: var(--secondary-color) !important;
    margin-bottom: 24px !important;
}

.about-text p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #555 !important;
    margin-bottom: 16px !important;
}

.about-image {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    /* ensure the rounded corners of the image are visible and anything overflowing is clipped */
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.about-img {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 16px;
}
.value-card {
    background: #f9f9f9;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}
.value-card h4 {
    margin-bottom: 8px;
    color: var(--secondary-color);
}
.link-primary { color: var(--primary-color); font-weight:600; }
.mt-30 { margin-top: 30px; }

@media (max-width: 900px) {
    .about-hero { padding: 15px 0; text-align: center; }
    .about-hero .hero-inner { text-align: center; }
    
    /* About Layout - Mobile */
    .about-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 0 6px; /* reduzir para evitar cortes laterais */
    }

    .about-text {
        order: 1 !important;
    }

    .about-image {
        order: 2 !important;
    }

    .about-text h1 {
        font-size: 28px !important;
        text-align: center !important;
    }
}

/* About page mobile spacing improvements */
@media (max-width: 768px) {
    .about-plain h1 { font-size: 28px; margin-bottom: 12px; }
    .about-plain p { font-size: 16px; margin-bottom: 12px; color: #444; }
    .about-plain .btn { padding: 12px 20px; }
    .about-content { padding: 30px 0 40px; }
    
    .about-layout {
        gap: 25px;
    }
    
    .about-text h1 {
        font-size: 26px;
    }
    
    .about-text p {
        font-size: 15px;
    }
}

/* Our Values Section for About Page */
.our-values {
    padding: 50px 0;
    background-color: var(--light-gray);
}

.values-grid-about {
    display: grid;
      
            
      
            
       grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 20px;
}

/* Tablet: show 2 per row */
@media (max-width: 1200px) {
    .values-grid-about {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

.value-card-about {
    background-color: var(--white);
    padding: 40px 30px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.value-card-about:hover {
    transform: translateY(-5px);
}

.value-icon {
    width: 80px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: background-color 0.3s ease;
}

.value-icon i {
    font-size: 36px;
    color: var(--white);
}

.value-card-about:hover .value-icon {
    background-color: var(--secondary-color);
}

.value-card-about h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.value-card-about p {
    color: #666;
    line-height: 1.7;
    font-size: 15px;
}

@media (max-width: 768px) {
    .our-values {
        padding: 60px 0;
    }
    
    .values-grid-about {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .value-card-about {
        padding: 30px 25px;
    }
    
    .value-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }
    
    .value-icon i {
        font-size: 32px;
    }
    
    .value-card-about h3 {
        font-size: 20px;
    }
}

/* ------------------------------------------------------------------ */

/* Booking Page Styles */
.booking-page {
    padding-top: 120px;
    padding-bottom: 60px;
    background: #f9f9f9;
    min-height: 100vh;
}

.booking-container {
    display: flex;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.booking-main {
    flex: 2;
}

.booking-sidebar {
    flex: 1;
    position: sticky;
    top: 100px;
    height: fit-content;
}

/* Progress Bar */
.progress-bar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    position: relative;
}

.progress-bar::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.progress-step-number {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #999;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.progress-step.active .progress-step-number {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.progress-step.completed .progress-step-number {
    background: var(--primary-color);
    color: white;
}

.progress-step-label {
    font-size: 13px;
    color: #999;
    text-align: center;
    font-weight: 500;
}

.progress-step.active .progress-step-label {
    color: var(--primary-color);
    font-weight: 600;
}

/* Form Section */
.form-section {
    background: white;
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.form-section h3 {
    font-size: 1.5em;
    margin-bottom: 30px;
    color: var(--text-color);
    font-weight: 600;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.form-section h4 {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: var(--text-color);
    font-weight: 600;
}

/* Option Cards */
.option-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.option-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    background: white;
}

.option-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
}

.option-card.selected {
    border-color: var(--primary-color);
    background: #f0f8f0;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

.option-card input[type="radio"],
.option-card input[type="checkbox"] {
    display: none;
}

.option-card label {
    display: block;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 8px;
}

.option-card .price {
    font-size: 0.9em;
    color: var(--primary-color);
    font-weight: 600;
}

.option-card .description {
    font-size: 0.85em;
    color: #999;
    margin-top: 5px;
}

/* Time Selector */
.time-selector {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.time-button {
    width: 45px;
    height: 45px;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    font-size: 1.2em;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--text-color);
}

.time-button:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.time-display {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--text-color);
    min-width: 100px;
}

.time-recommendation {
    font-size: 0.85em;
    color: #999;
    margin-top: 10px;
}

/* Extras Grid */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.extra-item {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    background: white;
}

.extra-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.1);
}

.extra-item.selected {
    border-color: var(--primary-color);
    background: #f0f8f0;
}

.extra-item input[type="checkbox"] {
    display: none;
}

.extra-icon {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.extra-item label {
    display: block;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9em;
    margin-bottom: 5px;
}

.extra-item .extra-time {
    font-size: 0.8em;
    color: var(--primary-color);
    font-weight: 600;
}

/* Date Time Picker */
.date-time-section {
    margin-bottom: 20px;
}

.date-time-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.date-time-inputs input {
    padding: 14px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-color);
    background-color: var(--white);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    width: 100%;
}

.date-time-inputs input:hover {
    border-color: #ccc;
    background-color: #fafafa;
}

.date-time-inputs input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--white);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

/* Style the calendar/clock icon */
.date-time-inputs input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
    padding: 4px;
    border-radius: 4px;
}

.date-time-inputs input:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
    background-color: rgba(0,0,0,0.05);
    color: var(--primary-color);
}

/* Time Slots */
.time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.time-slot {
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    font-size: 0.9em;
}

.time-slot:hover {
    border-color: var(--primary-color);
}

.time-slot.selected {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Address Section */
.address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.full-width {
    grid-column: 1 / -1;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Checkbox Items */
.checkbox-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkbox-item:hover {
    border-color: var(--primary-color);
}

.checkbox-item.selected {
    border-color: var(--primary-color);
    background: #f0f8f0;
}

.checkbox-item input[type="checkbox"] {
    display: none;
}

.checkbox-item input[type="checkbox"]:checked + label::before {
    content: '\f00c';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: white;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex: 1;
    margin: 0;
}

.checkbox-item label::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    margin-right: 12px;
    transition: all 0.3s;
    font-size: 12px;
}

.checkbox-item.selected label::before {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

/* Summary Sidebar */
.summary-box {
    background: white;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-box h4 {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: var(--text-color);
    font-weight: 600;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.summary-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.95em;
    color: var(--text-color);
}

.summary-item i {
    width: 24px;
    color: var(--primary-color);
    margin-right: 12px;
    text-align: center;
}

.summary-item span {
    flex: 1;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f0f0f0;
    font-size: 1.3em;
    font-weight: 700;
    color: var(--text-color);
}

.summary-total .price {
    color: var(--primary-color);
}

/* Buttons */
.btn-continue {
    display: block;
    width: 100%;
    padding: 15px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    margin-top: 30px;
    transition: background 0.3s ease;
}

.btn-continue:hover {
    background: #45a049;
}

.btn-continue:active {
    transform: scale(0.98);
}

/* Services Page Styles */
/* Mais espaço no topo para afastar do header */
.services-hero {
    padding: 100px 0 45px;
    background: var(--white);
    color: var(--secondary-color);
    text-align: center;
    border-bottom: 1px solid rgba(44, 62, 80, 0.08);
}

.services-hero p {
    color: rgba(0, 0, 0, 0.68);
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.services-list {
    padding: 60px 0 90px;
    background-color: #f9f9f9;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-item {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.service-image {
    height: 220px;
    overflow: hidden;
    position: relative;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-item:hover .service-image img {
    transform: scale(1.05);
}

.service-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.service-content h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
    font-size: 1.35rem;
    font-weight: 600;
}

.service-content p {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
    flex-grow: 1;
}

.service-content .btn {
    margin-top: auto;
    min-width: 160px;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.service-link:hover {
    color: var(--secondary-color);
    gap: 12px;
}

.service-link i {
    font-size: 0.9em;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 480px;
    width: 90%;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-icon {
    width: 80px;
    height: 80px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.modal-icon i {
    font-size: 40px;
    color: var(--primary-color);
}

.modal-title {
    font-size: 24px;
    color: var(--secondary-color);
    margin-bottom: 12px;
    font-weight: 700;
}

.modal-text {
    color: #64748b;
    margin-bottom: 32px;
    line-height: 1.6;
    font-size: 16px;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: var(--primary-color);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
}

.modal-btn:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2);
}

/* Custom Date/Time Picker Styles (Shadcn-like) */
.picker-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.picker-wrapper {
    position: relative;
    width: 100%;
}

.custom-picker-input {
    width: 100%;
    padding: 0.6rem 1rem;
    padding-right: 2.5rem; /* Space for icon */
    border: 1px solid #e2e8f0; /* Slate-200 */
    border-radius: 0.375rem; /* Rounded-md */
    background-color: white;
    color: #0f172a; /* Slate-900 */
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none; /* Remove default browser styles */
}

.custom-picker-input:hover {
    background-color: #f8fafc; /* Slate-50 */
    border-color: #cbd5e1; /* Slate-300 */
}

.custom-picker-input:focus {
    outline: none;
    border-color: #0f172a; /* Ring color */
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

.picker-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b; /* Slate-500 */
    pointer-events: none;
    font-size: 0.875rem;
}

/* Layout for Side-by-Side Pickers */
.pickers-row {
    display: flex;
    gap: 1rem;
    width: 100%;
}

.pickers-row .picker-group {
    flex: 1;
}

/* Custom Select for Time Picker */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    padding: 0.6rem 1rem;
    padding-right: 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    background-color: white;
    color: #0f172a;
    font-size: 0.875rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.custom-select-trigger:hover {
    background-color: #f8fafc;
    border-color: #cbd5e1;
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.custom-select-options.open {
    display: block;
}

.custom-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #0f172a;
}

.custom-option:hover {
    background-color: #f1f5f9;
}

.custom-option.selected {
    background-color: #e2e8f0;
    font-weight: 500;
}

/* Shadcn-like Flatpickr Theme (Clean, White) */
.flatpickr-calendar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    font-family: inherit;
    width: auto;
    padding: 0.5rem;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
    display: none; /* Remove arrow for cleaner look */
}

.flatpickr-months {
    background: transparent;
    padding: 0.5rem 0;
    align-items: center;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    fill: #64748b;
    padding: 0.5rem;
    height: auto;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: #0f172a;
    background: #f1f5f9;
    border-radius: 0.375rem;
}

.flatpickr-current-month {
    font-size: 0.875rem;
    padding: 0;
}

.flatpickr-current-month span.cur-month {
    font-weight: 600;
    color: #0f172a;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600;
    color: #0f172a;
}

.flatpickr-weekdays {
    background: transparent;
    height: auto;
    margin-top: 0.5rem;
}

span.flatpickr-weekday {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 400;
}

.flatpickr-days {
    width: auto;
}

.dayContainer {
    width: auto;
    min-width: 240px;
    max-width: 300px;
    padding: 0;
}

.flatpickr-day {
    border-radius: 0.375rem;
    color: #0f172a;
    height: 36px;
    line-height: 36px;
    margin: 0;
    width: 36px;
    max-width: 36px;
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.flatpickr-day.today {
    background-color: #f1f5f9;
    border-color: transparent;
    color: #0f172a;
    font-weight: 600;
}

.flatpickr-day:hover {
    background-color: #f1f5f9;
    border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: none;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #cbd5e1;
    background: transparent;
    border-color: transparent;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #94a3b8;
}

/* Mobile responsiveness for pickers */
@media (max-width: 600px) {
    .pickers-row {
        flex-direction: column;
        gap: 0.5rem;
    }
}