/* 
 * Hemel Alterations & Ironing Service - Frontend Styles
 * Complete CSS matching React application design
 * Ruby Red (#9B1B30) | Pinyon Script | Albert Sans | Zero Border Radius
 * ALL STYLES WITH !important TO PREVENT THEME OVERRIDES
 */

/* ==================== CSS VARIABLES - SCOPED TO PLUGIN SECTIONS ==================== */
/* Define variables on each plugin section to avoid global theme conflicts */
.hemel-header,
.hemel-hero,
.hemel-services,
.hemel-projects,
.hemel-faqs,
.hemel-about,
.hemel-contact,
.hemel-footer,
.hemel-service-modal,
.hemel-faq-modal {
    /* Colors - Ruby Red Theme */
    --primary-color: #9B1B30 !important;
    --primary-dark: #7a1526 !important;
    --foreground: hsl(0, 0%, 10%) !important;
    --background: hsl(0, 0%, 100%) !important;
    --muted: hsl(0, 0%, 96%) !important;
    --muted-foreground: hsl(0, 0%, 40%) !important;
    --card: hsl(0, 0%, 100%) !important;
    --card-foreground: hsl(0, 0%, 10%) !important;
    --border: hsl(0, 0%, 88%) !important;
    
    /* Typography */
    --font-serif: 'Pinyon Script', cursive !important;
    --font-sans: 'Albert Sans', sans-serif !important;
    
    /* Shadows - matching React app shadow-md */
    --shadow-md: 0px 6px 12px -2px rgba(0, 0, 0, 0.10), 0px 3px 6px -3px rgba(0, 0, 0, 0.06) !important;
    --shadow-lg: 0px 10px 20px -4px rgba(0, 0, 0, 0.12), 0px 4px 8px -4px rgba(0, 0, 0, 0.08) !important;
    
    /* Transitions - all 500ms for consistency */
    --transition-duration: 500ms !important;
    
    /* Border Radius - ZERO (sharp, elegant edges) */
    --radius: 0 !important;
}

/* ==================== SCOPED RESET - PLUGIN SECTIONS ONLY ==================== */
/* Reset only within plugin sections to avoid breaking WordPress/theme */
.hemel-header *,
.hemel-hero *,
.hemel-services *,
.hemel-projects *,
.hemel-faqs *,
.hemel-about *,
.hemel-contact *,
.hemel-footer *,
.hemel-service-modal *,
.hemel-faq-modal * {
    box-sizing: border-box !important;
}

/* Apply resets only to direct plugin section elements */
.hemel-header,
.hemel-hero,
.hemel-services,
.hemel-projects,
.hemel-faqs,
.hemel-about,
.hemel-contact,
.hemel-footer {
    font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--foreground) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Typography scoped to plugin sections */
.hemel-header p, .hemel-header span, .hemel-header div, .hemel-header button, .hemel-header a, .hemel-header label,
.hemel-hero p, .hemel-hero span, .hemel-hero div, .hemel-hero input, .hemel-hero textarea, .hemel-hero select, .hemel-hero button, .hemel-hero a, .hemel-hero label,
.hemel-services p, .hemel-services span, .hemel-services div, .hemel-services input, .hemel-services textarea, .hemel-services select, .hemel-services button, .hemel-services a, .hemel-services label,
.hemel-projects p, .hemel-projects span, .hemel-projects div, .hemel-projects input, .hemel-projects textarea, .hemel-projects select, .hemel-projects button, .hemel-projects a, .hemel-projects label,
.hemel-faqs p, .hemel-faqs span, .hemel-faqs div, .hemel-faqs input, .hemel-faqs textarea, .hemel-faqs select, .hemel-faqs button, .hemel-faqs a, .hemel-faqs label,
.hemel-about p, .hemel-about span, .hemel-about div, .hemel-about input, .hemel-about textarea, .hemel-about select, .hemel-about button, .hemel-about a, .hemel-about label,
.hemel-contact p, .hemel-contact span, .hemel-contact div, .hemel-contact input, .hemel-contact textarea, .hemel-contact select, .hemel-contact button, .hemel-contact a, .hemel-contact label,
.hemel-footer p, .hemel-footer span, .hemel-footer div, .hemel-footer button, .hemel-footer a,
.hemel-service-modal p, .hemel-service-modal span, .hemel-service-modal div, .hemel-service-modal button, .hemel-service-modal a,
.hemel-faq-modal p, .hemel-faq-modal span, .hemel-faq-modal div, .hemel-faq-modal button, .hemel-faq-modal a {
    font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Headings scoped to plugin sections */
.hemel-hero h1, .hemel-hero h2, .hemel-hero h3, .hemel-hero h4, .hemel-hero h5, .hemel-hero h6,
.hemel-services h1, .hemel-services h2, .hemel-services h3, .hemel-services h4, .hemel-services h5, .hemel-services h6,
.hemel-projects h1, .hemel-projects h2, .hemel-projects h3, .hemel-projects h4, .hemel-projects h5, .hemel-projects h6,
.hemel-faqs h1, .hemel-faqs h2, .hemel-faqs h3, .hemel-faqs h4, .hemel-faqs h5, .hemel-faqs h6,
.hemel-about h1, .hemel-about h2, .hemel-about h3, .hemel-about h4, .hemel-about h5, .hemel-about h6,
.hemel-contact h1, .hemel-contact h2, .hemel-contact h3, .hemel-contact h4, .hemel-contact h5, .hemel-contact h6,
.hemel-service-modal h1, .hemel-service-modal h2, .hemel-service-modal h3, .hemel-service-modal h4, .hemel-service-modal h5, .hemel-service-modal h6,
.hemel-faq-modal h1, .hemel-faq-modal h2, .hemel-faq-modal h3, .hemel-faq-modal h4, .hemel-faq-modal h5, .hemel-faq-modal h6 {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==================== SMOOTH SCROLL ==================== */
html {
    scroll-behavior: smooth !important;
}

/* ==================== CONTAINER ==================== */
.hemel-container {
    max-width: 87.5rem !important;
    margin: 0 auto !important;
    padding: 0 1rem !important;
}

/* ==================== HEADER ==================== */
.hemel-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: background var(--transition-duration) ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-header__container {
    max-width: 87.5rem !important;
    margin: 0 auto !important;
    padding: 1rem 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.hemel-header__logo {
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-header__logo a {
    text-decoration: none !important;
    color: var(--primary-color) !important;
    font-family: var(--font-serif) !important;
    font-size: 1.5rem !important;
    transition: opacity var(--transition-duration) ease !important;
}

.hemel-header__logo a:hover {
    opacity: 0.8 !important;
}

.hemel-header__logo-placeholder {
    font-family: var(--font-serif) !important;
    font-size: 1.5rem !important;
    color: var(--primary-color) !important;
    font-weight: 400 !important;
}

/* Header Logo Image */
.hemel-header__logo-image {
    max-height: 50px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-header__nav {
    display: none !important;
    gap: 2rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .hemel-header__nav {
        display: flex !important;
    }
}

.hemel-header__nav-link {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--foreground) !important;
    text-decoration: none !important;
    transition: color var(--transition-duration) ease !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
}

.hemel-header__nav-link:hover {
    color: var(--primary-color) !important;
}

.hemel-header__cta {
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-header__cta-button {
    display: inline-block !important;
    padding: 0.75rem 1.5rem !important;
    background: var(--primary-color) !important;
    color: white !important;
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: var(--radius) !important;
    transition: background var(--transition-duration) ease !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.hemel-header__cta-button:hover {
    background: var(--primary-dark) !important;
}

/* ==================== HERO SECTION ==================== */
.hemel-hero {
    position: relative !important;
    height: 100vh !important;
    min-height: 600px !important;
    overflow: hidden !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-hero__video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-hero__video-container video,
.hemel-hero__video-container .hemel-hero__placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-hero__placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    color: var(--muted-foreground) !important;
    font-family: var(--font-sans) !important;
}

.hemel-hero__video-desktop {
    display: block !important;
}

.hemel-hero__video-mobile {
    display: none !important;
}

.hemel-hero__overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 60% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.hemel-hero__content {
    position: absolute !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: white !important;
    z-index: 2 !important;
    width: 90% !important;
    max-width: 1000px !important;
    animation: slideUp 1s ease-out !important;
    margin: 0 !important;
    padding: 0 1rem !important;
}

@keyframes slideUp {
    from {
        opacity: 0 !important;
        transform: translateX(-50%) translateY(30px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateX(-50%) translateY(0) !important;
    }
}

.hemel-hero__heading {
    font-family: var(--font-serif) !important;
    font-size: clamp(2rem, 6vw, 4rem) !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
        color: white !important;    
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

.hemel-hero__subheading {
    font-family: var(--font-sans) !important;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5) !important;
    color: white !important;
}

.hemel-hero__cta-button {
    display: inline-block !important;
    padding: 1rem 2.5rem !important;
    background: var(--primary-color) !important;
    color: white !important;
    font-family: var(--font-sans) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: var(--radius) !important;
    transition: all var(--transition-duration) ease !important;
    border: none !important;
    cursor: pointer !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(155, 27, 48, 0.3) !important;
}

.hemel-hero__cta-button:hover {
    background: var(--primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(155, 27, 48, 0.4) !important;
}

/* ==================== SERVICES SECTION ==================== */
.hemel-services {
    padding: 5rem 1rem !important;
    background: var(--background) !important;
    margin: 0 !important;
}

.hemel-services__heading {
    font-family: var(--font-serif) !important;
    font-size: clamp(3rem, 6vw, 4rem) !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.hemel-services__subtitle {
    text-align: center !important;
    color: var(--muted-foreground) !important;
    font-size: 1.125rem !important;
    margin: 0 auto 4rem !important;
    padding: 0 !important;
    max-width: 48rem !important;
    line-height: 1.8 !important;
    font-family: var(--font-sans) !important;
}

.hemel-services__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    max-width: 87.5rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.hemel-service-card {
    background: white !important;
    padding: 2rem !important;
    box-shadow: var(--shadow-md) !important;
    cursor: pointer !important;
    transition: transform var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    border: none !important;
    margin: 0 !important;
}

.hemel-service-card:hover {
    transform: translateY(-4px) !important;
}

.hemel-service-card__icon {
    color: var(--primary-color) !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    width: 48px !important;
    height: 48px !important;
}

.hemel-service-card__icon svg {
    width: 100% !important;
    height: 100% !important;
    stroke-width: 1.5 !important;
    color: var(--primary-color) !important;
}

.hemel-service-card__title {
    font-family: var(--font-sans) !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.hemel-service-card__description {
    color: var(--muted-foreground) !important;
    line-height: 1.75 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
}

.hemel-service-card__learn-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: gap var(--transition-duration) ease !important;
    font-family: var(--font-sans) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.hemel-service-card__learn-more:hover {
    gap: 0.75rem !important;
}

.hemel-service-card__learn-more .hemel-button-arrow {
    transition: transform var(--transition-duration) ease !important;
    display: inline-block !important;
}

.hemel-service-card__learn-more:hover .hemel-button-arrow {
    transform: translateX(0.25rem) !important;
}

/* Service Modal/Dialog */
.hemel-service-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 99999 !important;
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    transition: opacity var(--transition-duration) ease, visibility var(--transition-duration) ease !important;
}

.hemel-service-modal.hemel-modal-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

.hemel-service-modal.hemel-modal-open {
    display: flex !important;
    animation: fadeIn var(--transition-duration) ease !important;
}

@keyframes fadeIn {
    from { opacity: 0 !important; }
    to { opacity: 1 !important; }
}

.hemel-service-modal__content {
    background: white !important;
    padding: 3rem !important;
    max-width: 56rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    animation: slideInModal var(--transition-duration) ease !important;
    margin: 0 !important;
}

@keyframes slideInModal {
    from {
        opacity: 0 !important;
        transform: scale(0.95) !important;
    }
    to {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
}

.hemel-service-modal__close {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: var(--muted-foreground) !important;
    line-height: 1 !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color var(--transition-duration) ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hemel-service-modal__close:hover {
    color: var(--foreground) !important;
}

.hemel-service-modal__body h3 {
    color: var(--primary-color) !important;
    font-family: var(--font-sans) !important;
    font-size: 1.875rem !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
}

.hemel-service-modal__body h4 {
    color: var(--foreground) !important;
    font-family: var(--font-sans) !important;
    font-size: 1.25rem !important;
    margin: 2rem 0 1rem 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
}

.hemel-service-modal__body p {
    color: var(--foreground) !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
    line-height: 1.75 !important;
    font-family: var(--font-sans) !important;
}

.hemel-service-modal__body ul {
    padding: 0 0 0 1.5rem !important;
    margin: 1rem 0 !important;
    list-style-type: disc !important;
}

.hemel-service-modal__body li {
    margin: 0.75rem 0 !important;
    padding: 0 !important;
    line-height: 1.75 !important;
    color: var(--foreground) !important;
    font-family: var(--font-sans) !important;
}

.hemel-service-modal__body strong {
    color: var(--foreground) !important;
    font-weight: 600 !important;
}

/* ==================== BEFORE/AFTER PROJECTS SECTION ==================== */
.hemel-projects {
    padding: 5rem 1rem !important;
    background: var(--background) !important;
    margin: 0 !important;
}

.hemel-projects__heading {
    font-family: var(--font-serif) !important;
    font-size: clamp(3rem, 6vw, 4rem) !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    margin: 0 0 4rem 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.hemel-projects__slider-wrapper {
    max-width: 62.5rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.hemel-projects__slider {
    position: relative !important;
    min-height: 500px !important;
    border: 2px solid var(--foreground) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden !important;
    border-radius: var(--radius) !important;
    margin: 0 !important;
    padding: 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Dynamically generated slider container */
.project-container {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.project-container * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.hemel-projects__slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Pinyon Script', cursive !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    padding: 2rem !important;
    margin: 0 !important;
    transition: clip-path var(--transition-duration) ease !important;
}

/* Exception: Allow Pinyon Script on slider labels */
.project-label-before-wrapper span,
.project-label-after-wrapper span {
    font-family: 'Pinyon Script', cursive !important;
}

.hemel-projects__controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin: 2.5rem 0 0 0 !important;
    padding: 0 !important;
}

.hemel-projects__btn {
    width: 3rem !important;
    height: 3rem !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.25rem !important;
    transition: background var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-sans) !important;
}

.hemel-projects__btn:hover {
    background: var(--primary-dark) !important;
}

.hemel-projects__dots {
    display: flex !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-projects__dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    background: var(--muted-foreground) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hemel-projects__dot.active {
    background: var(--primary-color) !important;
    width: 2rem !important;
}

/* ==================== FAQ SECTION ==================== */
.hemel-faqs {
    padding: 5rem 1rem !important;
    background: var(--background) !important;
    margin: 0 !important;
}

.hemel-faqs__heading {
    font-family: var(--font-serif) !important;
    font-size: clamp(3rem, 6vw, 4rem) !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    margin: 0 0 4rem 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.hemel-faqs__carousel {
    max-width: 50rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.hemel-faqs__carousel-wrapper {
    position: relative !important;
    overflow: hidden !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-faq-card {
    background: white !important;
    padding: 2.5rem !important;
    box-shadow: var(--shadow-md) !important;
    transition: opacity var(--transition-duration) ease, transform var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    border: none !important;
    margin: 0 !important;
}

.hemel-faq-card.transitioning {
    opacity: 0 !important;
    transform: translateX(20px) !important;
}

.hemel-faq-card h3 {
    font-family: var(--font-sans) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

.hemel-faq-card p {
    color: var(--muted-foreground) !important;
    line-height: 1.75 !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
}

.hemel-faq-card__learn-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    transition: gap var(--transition-duration) ease !important;
    line-height: 1.5 !important;
}

.hemel-faq-card__learn-more:hover {
    gap: 0.75rem !important;
}

.hemel-faq-card__learn-more .hemel-button-arrow {
    transition: transform var(--transition-duration) ease !important;
    display: inline-block !important;
}

.hemel-faq-card__learn-more:hover .hemel-button-arrow {
    transform: translateX(0.25rem) !important;
}

.hemel-faqs__controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    margin: 2.5rem 0 0 0 !important;
    padding: 0 !important;
}

.hemel-faqs__btn {
    width: 3rem !important;
    height: 3rem !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1.25rem !important;
    transition: background var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hemel-faqs__btn:hover {
    background: var(--primary-dark) !important;
}

.hemel-faqs__dots {
    display: flex !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-faqs__dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    background: var(--muted-foreground) !important;
    border: none !important;
    cursor: pointer !important;
    transition: all var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hemel-faqs__dot.active {
    background: var(--primary-color) !important;
    width: 2rem !important;
}

/* FAQ Modal */
.hemel-faq-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 99999 !important;
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem !important;
    margin: 0 !important;
    transition: opacity var(--transition-duration) ease, visibility var(--transition-duration) ease !important;
}

.hemel-faq-modal.hemel-modal-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

.hemel-faq-modal.hemel-modal-open {
    display: flex !important;
    animation: fadeIn var(--transition-duration) ease !important;
}

.hemel-faq-modal__content {
    background: white !important;
    padding: 3rem !important;
    max-width: 56rem !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    position: relative !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    animation: slideInModal var(--transition-duration) ease !important;
    margin: 0 !important;
}

.hemel-faq-modal__close {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.25rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    color: var(--muted-foreground) !important;
    line-height: 1 !important;
    width: 2rem !important;
    height: 2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color var(--transition-duration) ease !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hemel-faq-modal__close:hover {
    color: var(--foreground) !important;
}

.hemel-faq-modal__body h3 {
    color: var(--primary-color) !important;
    font-family: var(--font-sans) !important;
    font-size: 1.875rem !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
}

.hemel-faq-modal__body p {
    color: var(--foreground) !important;
    margin: 1rem 0 !important;
    padding: 0 !important;
    line-height: 1.75 !important;
    font-family: var(--font-sans) !important;
}

.hemel-faq-modal__body ul {
    padding: 0 0 0 1.5rem !important;
    margin: 1rem 0 !important;
    list-style-type: disc !important;
}

.hemel-faq-modal__body li {
    margin: 0.75rem 0 !important;
    padding: 0 !important;
    line-height: 1.75 !important;
    color: var(--foreground) !important;
    font-family: var(--font-sans) !important;
}

.hemel-faq-modal__body strong {
    color: var(--foreground) !important;
    font-weight: 600 !important;
}

.hemel-faq-modal__body em {
    font-style: italic !important;
}

/* ==================== ABOUT SECTION ==================== */
.hemel-about {
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 600px !important;
}

.hemel-about__heading {
    font-family: var(--font-serif) !important;
    font-size: clamp(3rem, 6vw, 4rem) !important;
    color: var(--primary-color) !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    text-align: left !important;
}

.hemel-about__wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

.hemel-about__image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.hemel-about__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-about__image-placeholder {
    width: 100% !important;
    height: 100% !important;
    background: var(--muted) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px dashed rgba(0, 0, 0, 0.2) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-about__image-placeholder p {
    color: var(--muted-foreground) !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    padding: 1rem !important;
    margin: 0 !important;
    font-family: var(--font-sans) !important;
}

.hemel-about__text {
    position: relative !important;
    z-index: 2 !important;
    max-width: 600px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4rem 3rem !important;
    margin: 0 4rem 0 0 !important;
    box-shadow: var(--shadow-lg) !important;
}

@media (max-width: 1024px) {
    .hemel-about__wrapper {
        justify-content: center !important;
    }
    
    .hemel-about__text {
        margin: 2rem !important;
        padding: 3rem 2rem !important;
        max-width: 90% !important;
    }
}

@media (max-width: 768px) {
    .hemel-about__text {
        padding: 2rem 1.5rem !important;
    }
}

.hemel-about__text blockquote {
    font-family: var(--font-serif) !important;
    font-size: 2rem !important;
    color: var(--primary-color) !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
}

.hemel-about__text p {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    color: var(--foreground) !important;
    line-height: 1.75 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

/* NEW About Section Structure - Background Image with Right-Aligned Text */
.hemel-about__background {
    position: relative !important;
    width: 100% !important;
    min-height: 600px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 5rem 1rem !important;
    margin: 0 !important;
}

.hemel-about__content-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 87.5rem !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}

.hemel-about__text-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 600px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4rem 3rem !important;
    margin: 0 2rem 0 0 !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--radius) !important;
}

.hemel-about__quote {
    font-family: var(--font-serif) !important;
    font-size: 2rem !important;
    color: var(--primary-color) !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 0 0 1.5rem !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    border-left: 4px solid var(--primary-color) !important;
}

.hemel-about__body {
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-about__body p {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    color: var(--foreground) !important;
    line-height: 1.75 !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {
    .hemel-about__background {
        justify-content: center !important;
    }
    
    .hemel-about__content-wrapper {
        justify-content: center !important;
    }
    
    .hemel-about__text-content {
        margin: 0 !important;
        padding: 3rem 2rem !important;
        max-width: 90% !important;
    }
}

@media (max-width: 768px) {
    .hemel-about__text-content {
        padding: 2rem 1.5rem !important;
    }
    
    .hemel-about__quote {
        font-size: 1.5rem !important;
        padding-left: 1rem !important;
    }
}

/* ==================== CONTACT SECTION ==================== */
.hemel-contact {
    padding: 5rem 1rem !important;
    background: var(--background) !important;
    margin: 0 !important;
}

.hemel-contact__heading {
    font-family: var(--font-serif) !important;
    font-size: clamp(3rem, 6vw, 4rem) !important;
    color: var(--primary-color) !important;
    text-align: center !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

.hemel-contact__subheading {
    font-family: var(--font-sans) !important;
    font-size: 1.125rem !important;
    color: var(--foreground) !important;
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 3rem auto !important;
    padding: 0 1rem !important;
    line-height: 1.6 !important;
}

.hemel-contact a,
.hemel-contact a:link,
.hemel-contact a:visited {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: opacity var(--transition-duration) ease !important;
}

.hemel-contact a:hover,
.hemel-contact a:focus,
.hemel-contact a:active {
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    opacity: 0.8 !important;
}

.hemel-contact__wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    max-width: 87.5rem !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.hemel-contact__info {
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-contact__info h3 {
    font-family: var(--font-sans) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

.hemel-contact__info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-contact__item {
    display: flex !important;
    align-items: start !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-contact__item svg {
    color: var(--primary-color) !important;
    margin: 0.25rem 0 0 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.hemel-contact__item-content {
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-contact__item-content p {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
}

.hemel-contact__item-content p:first-child {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    color: var(--foreground) !important;
    margin: 0 0 0.25rem 0 !important;
    padding: 0 !important;
}

.hemel-contact__item-content p:last-child {
    color: var(--muted-foreground) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-contact__hours {
    margin: 2rem 0 0 0 !important;
    padding: 0 !important;
}

.hemel-contact__hours h3 {
    font-size: 1.25rem !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    color: var(--foreground) !important;
}

.hemel-contact__hours p {
    color: var(--muted-foreground) !important;
    margin: 0.5rem 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
}

.hemel-contact__form {
    background: var(--card) !important;
    border: 2px solid var(--foreground) !important;
    padding: 3rem !important;
    border-radius: var(--radius) !important;
    margin: 0 !important;
}

.hemel-form__field {
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
}

.hemel-form__field label {
    display: block !important;
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    font-family: var(--font-sans) !important;
    color: var(--foreground) !important;
    font-weight: 500 !important;
}

.hemel-form__field input,
.hemel-form__field textarea,
.hemel-form__field select {
    width: 100% !important;
    padding: 1rem 0 !important;
    border: none !important;
    border-bottom: 2px solid var(--foreground) !important;
    background: transparent !important;
    font-size: 1rem !important;
    font-family: var(--font-sans) !important;
    color: var(--foreground) !important;
    transition: border-color var(--transition-duration) ease !important;
    border-radius: var(--radius) !important;
    margin: 0 !important;
}

.hemel-form__field input:focus,
.hemel-form__field textarea:focus,
.hemel-form__field select:focus {
    outline: none !important;
    border-bottom-color: var(--primary-color) !important;
}

.hemel-form__field textarea {
    resize: none !important;
    min-height: 120px !important;
}

.hemel-form__field select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    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='%231a1a1a' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0 center !important;
    background-size: 24px !important;
    padding-right: 2rem !important;
    cursor: pointer !important;
}

.hemel-form__submit {
    width: 100% !important;
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    padding: 1.5rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--transition-duration) ease !important;
    font-family: 'Albert Sans', sans-serif !important;
    border-radius: var(--radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    margin: 0 !important;
}

.hemel-form__submit:hover {
    background: var(--primary-dark) !important;
}

.hemel-form__submit .hemel-form__arrow {
    transition: transform var(--transition-duration) ease !important;
    display: inline-block !important;
}

.hemel-form__submit:hover .hemel-form__arrow {
    transform: translateX(0.5rem) !important;
}


/* Removed old text arrow ::after - now using SVG arrow inline */

/* ==================== FOOTER ==================== */
.hemel-footer {
    background: var(--primary-color) !important;
    color: white !important;
    padding: 2rem 1rem !important;
    margin: 0 !important;
}

.hemel-footer__container {
    max-width: 87.5rem !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
}

.hemel-footer__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (min-width: 768px) {
    .hemel-footer__content {
        flex-direction: row !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
}

.hemel-footer__copyright {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-footer__links {
    display: flex !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-footer__link {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    color: white !important;
    text-decoration: none !important;
    transition: opacity var(--transition-duration) ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-footer__link:hover {
    opacity: 0.8 !important;
}

.hemel-footer__social {
    display: flex !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-footer__social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius) !important;
    color: white !important;
    text-decoration: none !important;
    transition: all var(--transition-duration) ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hemel-footer__social-link:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.hemel-footer__social-link svg {
    width: 20px !important;
    height: 20px !important;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (min-width: 768px) {
    .hemel-hero__video-mobile {
        display: none !important;
    }
    
    .hemel-hero__video-desktop {
        display: block !important;
    }
    
    .hemel-contact__wrapper {
        grid-template-columns: 2fr 3fr !important;
    }
}

@media (max-width: 768px) {
    .hemel-hero__video-desktop {
        display: none !important;
    }
    
    .hemel-hero__video-mobile {
        display: block !important;
    }
    
    .hemel-service-card,
    .hemel-faq-card,
    .hemel-service-modal__content,
    .hemel-faq-modal__content {
        padding: 1.5rem !important;
    }
    
    .hemel-contact__form {
        padding: 2rem !important;
    }
    
    .hemel-projects__slider {
        min-height: 400px !important;
    }
}

@media (max-width: 480px) {
    .hemel-projects__slider {
        min-height: 300px !important;
    }
    
    .hemel-service-modal__content,
    .hemel-faq-modal__content {
        padding: 1.25rem !important;
    }
}

/* ==================== UTILITY CLASSES ==================== */
.hemel-hidden {
    display: none !important;
}

.hemel-fade-in {
    animation: fadeIn var(--transition-duration) ease !important;
}

.hemel-fade-out {
    animation: fadeOut var(--transition-duration) ease !important;
}

@keyframes fadeOut {
    from { opacity: 1 !important; }
    to { opacity: 0 !important; }
}

/* ==================== ADDITIONAL ELEMENT COVERAGE ==================== */
/* Ensure ALL possible elements are styled */

.hemel-hero *,
.hemel-services *,
.hemel-projects *,
.hemel-faqs *,
.hemel-about *,
.hemel-contact * {
    box-sizing: border-box !important;
}

.hemel-hero a,
.hemel-services a,
.hemel-projects a,
.hemel-faqs a,
.hemel-about a,
.hemel-contact a {
    font-family: var(--font-sans) !important;
    text-decoration: none !important;
}

.hemel-hero img,
.hemel-services img,
.hemel-projects img,
.hemel-faqs img,
.hemel-about img,
.hemel-contact img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Typography overrides for all headings */
.hemel-hero h1, .hemel-hero h2, .hemel-hero h3, .hemel-hero h4, .hemel-hero h5, .hemel-hero h6,
.hemel-services h1, .hemel-services h2, .hemel-services h3, .hemel-services h4, .hemel-services h5, .hemel-services h6,
.hemel-projects h1, .hemel-projects h2, .hemel-projects h3, .hemel-projects h4, .hemel-projects h5, .hemel-projects h6,
.hemel-faqs h1, .hemel-faqs h2, .hemel-faqs h3, .hemel-faqs h4, .hemel-faqs h5, .hemel-faqs h6,
.hemel-about h1, .hemel-about h2, .hemel-about h3, .hemel-about h4, .hemel-about h5, .hemel-about h6,
.hemel-contact h1, .hemel-contact h2, .hemel-contact h3, .hemel-contact h4, .hemel-contact h5, .hemel-contact h6 {
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

/* Form elements across all sections */
.hemel-hero input, .hemel-hero textarea, .hemel-hero select, .hemel-hero button,
.hemel-services input, .hemel-services textarea, .hemel-services select, .hemel-services button,
.hemel-projects input, .hemel-projects textarea, .hemel-projects select, .hemel-projects button,
.hemel-faqs input, .hemel-faqs textarea, .hemel-faqs select, .hemel-faqs button,
.hemel-about input, .hemel-about textarea, .hemel-about select, .hemel-about button,
.hemel-contact input, .hemel-contact textarea, .hemel-contact select, .hemel-contact button {
    font-family: var(--font-sans) !important;
}

/* Lists */
.hemel-hero ul, .hemel-hero ol,
.hemel-services ul, .hemel-services ol,
.hemel-projects ul, .hemel-projects ol,
.hemel-faqs ul, .hemel-faqs ol,
.hemel-about ul, .hemel-about ol,
.hemel-contact ul, .hemel-contact ol {
    margin: 0 !important;
    padding: 0 !important;
    list-style-position: inside !important;
}

/* Strong and emphasis */
.hemel-hero strong, .hemel-hero b,
.hemel-services strong, .hemel-services b,
.hemel-projects strong, .hemel-projects b,
.hemel-faqs strong, .hemel-faqs b,
.hemel-about strong, .hemel-about b,
.hemel-contact strong, .hemel-contact b {
    font-weight: 600 !important;
}

.hemel-hero em, .hemel-hero i,
.hemel-services em, .hemel-services i,
.hemel-projects em, .hemel-projects i,
.hemel-faqs em, .hemel-faqs i,
.hemel-about em, .hemel-about i,
.hemel-contact em, .hemel-contact i {
    font-style: italic !important;
}

/* Nuclear option - Force Pinyon Script with maximum specificity */
body .hemel-projects .hemel-projects__slider .project-label-before-wrapper h2,
body .hemel-projects .hemel-projects__slider .project-label-after-wrapper h2 {
    font-family: 'Pinyon Script', cursive !important;
    font-weight: 400 !important;
}