/*
Theme Name: Desinsect13000
Theme URI: https://desinsect13000.fr
Author: Proximity Agency
Author URI: https://proximity-agency.com
Description: Professional pest control theme for Desinsect13000 Marseille
Version: 2025.09.11.183104
License: GPL v2 or later
Text Domain: desinsect13000
*/

/* ============================================
   COMPLETE DESINSECT13000 THEME STYLES
   All fixes restored and applied
   ============================================ */

/* ===========================================
   1. GLOBAL STYLES & RESETS
   =========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===========================================
   INTERNAL LINKS - ORANGE WITH DARKER ORANGE HOVER
   =========================================== */
body article a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button),
body main p a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button),
body .page-container a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button),
body .container a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button),
body .service-card a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button),
body .services-grid a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button) {
    color: #ff8c00 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 140, 0, 0.4) !important;
    text-underline-offset: 2px !important;
    transition: color 0.3s ease !important;
    font-weight: 500 !important;
}

/* Hover state - turn darker orange */
body article a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button):hover,
body main p a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button):hover,
body .page-container a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button):hover,
body .container a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button):hover,
body .service-card a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button):hover,
body .services-grid a:not([href^="tel:"]):not([href^="mailto:"]):not(.cta-button):not(.button):hover {
    color: #ff6500 !important;
    text-decoration-color: #ff6500 !important;
}

/* Ensure emoji display properly everywhere */
@font-face {
    font-family: "EmojiFont";
    src: local("Apple Color Emoji"),
         local("Segoe UI Emoji"),
         local("Segoe UI Symbol"),
         local("Noto Color Emoji");
    unicode-range: U+1F000-1F9FF, U+2600-27FF, U+1F300-1F5FF, U+1F680-1F6FF, U+1F900-1F9FF;
}

/* Global emoji fix */
.site-header *,
.nav-menu *,
.main-navigation * {
    font-variant: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ===========================================
   PAGE & ARTICLE CONTENT - FULL WIDTH RESPONSIVE
   =========================================== */

/* Page content container - Full width backgrounds */
.page-content {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f8f9fa !important;
}

/* Entry content - Max width for readability */
.entry-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Direct children of entry-content get full width */
.entry-content > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* Article container - Full width */
.entry-content .article-container,
.entry-content article.article-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===========================================
   ARTICLE CONTENT - CENTERED & RESPONSIVE FLEXBOX
   =========================================== */

/* Main article container - centered with max-width */
.article-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
}

/* All article sections - flexbox centered */
.article-content-section {
    padding: 4rem 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.article-content-section.bg-light {
    background: #f8f9fa !important;
}

/* Section titles - centered */
.section-title {
    font-size: 2.5rem !important;
    color: #2c3e50 !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
    font-weight: 700 !important;
    width: 100% !important;
}

/* Card grids - responsive flexbox */
.card-grid-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
}

.card-grid-4 > * {
    flex: 1 1 calc(25% - 1.5rem) !important;
    min-width: 250px !important;
    max-width: 350px !important;
}

/* Feature cards - consistent styling */
.feature-card,
.feature-card-v2,
.feature-card-v3 {
    background: white !important;
    padding: 2rem !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
}

.feature-card:hover,
.feature-card-v2:hover,
.feature-card-v3:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

.feature-icon {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important;
    height: 80px !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-radius: 50% !important;
    color: white !important;
}

.feature-card h3,
.feature-card-v2 h3,
.feature-card-v3 h3 {
    font-size: 1.5rem !important;
    color: #2c3e50 !important;
    margin: 1rem 0 !important;
    text-align: center !important;
}

.feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 1rem 0 !important;
    text-align: left !important;
    width: 100% !important;
}

.feature-list li {
    padding: 0.5rem 0 !important;
    color: #666 !important;
}

.price-tag {
    margin-top: auto !important;
    padding: 0.75rem 1.5rem !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}

/* Process steps - flexbox centered */
.process-steps {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
}

.process-step {
    flex: 1 1 calc(16.666% - 1.5rem) !important;
    min-width: 150px !important;
    background: white !important;
    padding: 2rem 1rem !important;
    border-radius: 15px !important;
    text-align: center !important;
    position: relative !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.step-number {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
}

.process-step h3 {
    font-size: 1.2rem !important;
    color: #2c3e50 !important;
    margin-bottom: 0.5rem !important;
}

.process-step p {
    color: #666 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

/* Services grid - responsive flexbox */
.services-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
}

.service-card {
    flex: 1 1 calc(33.333% - 1.5rem) !important;
    min-width: 280px !important;
    max-width: 400px !important;
}

/* Pricing grid - flexbox */
.pricing-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1000px !important;
}

.pricing-card {
    flex: 1 1 calc(33.333% - 1.5rem) !important;
    min-width: 280px !important;
    background: white !important;
    padding: 2.5rem !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.pricing-card.featured {
    transform: scale(1.05) !important;
    box-shadow: 0 15px 40px rgba(102,126,234,0.2) !important;
    border: 2px solid #28a745 !important;
}

.pricing-card .badge {
    position: absolute !important;
    top: -15px !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    padding: 0.5rem 1.5rem !important;
    border-radius: 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

.pricing-card h3 {
    font-size: 1.5rem !important;
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
}

.pricing-card .price {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    color: #28a745 !important;
    margin: 1rem 0 !important;
}

.pricing-card ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
    width: 100% !important;
}

.pricing-card ul li {
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #666 !important;
}

/* CTA Buttons - centered */
.cta-button-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 3rem 0 !important;
    width: 100% !important;
}

.cta-button,
.cta-button-article,
.cta-button-green {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem 2.5rem !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    min-width: 200px !important;
    text-align: center !important;
}

.cta-button,
.cta-button-article {
    background: linear-gradient(135deg, #ff8c00 0%, #ff6500 100%) !important;
    color: white !important;
}

.cta-button-green {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}

.cta-button:hover,
.cta-button-article:hover,
.cta-button-green:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3) !important;
}

/* Hero sections - centered */
.article-hero,
.article-hero-v2,
.article-hero-v3 {
    padding: 5rem 0 !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 400px !important;
}

.article-hero-content {
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.article-hero-title {
    font-size: 3rem !important;
    color: white !important;
    margin-bottom: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.article-hero-subtitle {
    font-size: 1.3rem !important;
    color: rgba(255,255,255,0.9) !important;
    margin-bottom: 2rem !important;
    line-height: 1.5 !important;
}

.hero-cta {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

/* FAQ Container - centered */
.faq-container {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
}

.faq-item {
    background: white !important;
    border-radius: 15px !important;
    padding: 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

.faq-item:hover {
    box-shadow: 0 5px 20px rgba(0,0,0,0.12) !important;
}

.faq-question {
    font-size: 1.3rem !important;
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
}

.faq-answer {
    color: #666 !important;
    line-height: 1.6 !important;
}

.faq-answer p {
    margin: 0 !important;
}

/* Info boxes - centered */
.info-box-article,
.warning-box,
.alert-box {
    background: white !important;
    border-radius: 15px !important;
    padding: 2rem !important;
    margin: 2rem auto !important;
    max-width: 900px !important;
    width: 100% !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

.warning-box {
    border-left: 5px solid #e74c3c !important;
    background: #fff5f5 !important;
}

.alert-box {
    border-left: 5px solid #f39c12 !important;
    background: #fffbf0 !important;
}

/* Testimonials grid - flexbox */
.testimonials-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
}

.testimonial-card {
    flex: 1 1 calc(33.333% - 1.5rem) !important;
    min-width: 280px !important;
    background: white !important;
    padding: 2rem !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    text-align: center !important;
}

.testimonial-card .stars {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    color: #ffc107 !important;
}

.testimonial-card p {
    color: #666 !important;
    font-style: italic !important;
    margin-bottom: 1rem !important;
    line-height: 1.6 !important;
}

.testimonial-card cite {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    font-style: normal !important;
}

/* Final CTA section - centered */
.final-cta {
    text-align: center !important;
    padding: 4rem !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-radius: 20px !important;
    color: white !important;
    max-width: 900px !important;
    margin: 3rem auto !important;
}

.final-cta h2 {
    color: white !important;
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.final-cta p {
    font-size: 1.2rem !important;
    margin-bottom: 2rem !important;
    opacity: 0.95 !important;
}

.final-cta .cta-buttons {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.availability {
    margin-top: 1.5rem !important;
    font-size: 1rem !important;
    opacity: 0.9 !important;
}

/* Internal links section - flexbox */
.internal-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.link-category {
    flex: 1 1 calc(33.333% - 2rem) !important;
    min-width: 250px !important;
}

.link-category h3 {
    color: #28a745 !important;
    margin-bottom: 1rem !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
}

.link-category ul {
    list-style: none !important;
    padding: 0 !important;
}

.link-category li {
    margin-bottom: 0.75rem !important;
}

.link-category a {
    color: #2c3e50 !important;
    text-decoration: none !important;
    transition: color 0.3s !important;
    font-size: 1rem !important;
}

.link-category a:hover {
    color: #28a745 !important;
    text-decoration: underline !important;
}

/* Comparison table - responsive */
.comparison-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    margin: 2rem 0 !important;
}

.comparison-table {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    background: white !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
}

.comparison-table thead {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}

.comparison-table th,
.comparison-table td {
    padding: 1.25rem !important;
    text-align: center !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.comparison-table tbody tr:hover {
    background: #f8f9fa !important;
}

/* Benefits grid - flexbox */
.benefits-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
}

.benefit-item {
    flex: 1 1 calc(25% - 1.5rem) !important;
    min-width: 220px !important;
    text-align: center !important;
    padding: 1.5rem !important;
}

.benefit-icon {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
    display: block !important;
}

.benefit-item h3 {
    font-size: 1.3rem !important;
    color: #2c3e50 !important;
    margin-bottom: 0.75rem !important;
}

.benefit-item p {
    color: #666 !important;
    line-height: 1.5 !important;
}

/* Solutions grid - flexbox */
.solutions-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2rem !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.solution-box {
    flex: 1 1 calc(33.333% - 1.5rem) !important;
    min-width: 300px !important;
    background: white !important;
    padding: 2rem !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

.solution-box h3 {
    color: #28a745 !important;
    margin-bottom: 1rem !important;
    font-size: 1.4rem !important;
}

.solution-box ul {
    list-style: none !important;
    padding: 0 !important;
}

.solution-box li {
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #666 !important;
}

/* Dangers grid - flexbox */
.dangers-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
}

.danger-item {
    flex: 1 1 calc(50% - 1rem) !important;
    min-width: 250px !important;
    padding: 1.5rem !important;
    background: white !important;
    border-left: 4px solid #e74c3c !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08) !important;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .card-grid-4 > * {
        flex: 1 1 calc(33.333% - 1.5rem) !important;
    }
    
    .process-step {
        flex: 1 1 calc(33.333% - 1.5rem) !important;
    }
}

@media (max-width: 768px) {
    .article-hero-title {
        font-size: 2rem !important;
    }
    
    .article-hero-subtitle {
        font-size: 1.1rem !important;
    }
    
    .section-title {
        font-size: 2rem !important;
    }
    
    .card-grid-4 > * {
        flex: 1 1 calc(50% - 1rem) !important;
    }
    
    .process-step {
        flex: 1 1 calc(50% - 1rem) !important;
    }
    
    .services-grid .service-card {
        flex: 1 1 100% !important;
    }
    
    .pricing-grid .pricing-card {
        flex: 1 1 100% !important;
    }
    
    .testimonials-grid .testimonial-card {
        flex: 1 1 100% !important;
    }
    
    .internal-links .link-category {
        flex: 1 1 100% !important;
    }
    
    .solutions-grid .solution-box {
        flex: 1 1 100% !important;
    }
    
    .benefits-grid .benefit-item {
        flex: 1 1 calc(50% - 1rem) !important;
    }
    
    .danger-item {
        flex: 1 1 100% !important;
    }
}

@media (max-width: 480px) {
    .card-grid-4 > * {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    
    .process-step {
        flex: 1 1 100% !important;
    }
    
    .benefits-grid .benefit-item {
        flex: 1 1 100% !important;
    }
    
    .article-content-section {
        padding: 2rem 0 !important;
    }
    
    .cta-button,
    .cta-button-article,
    .cta-button-green {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
    }
}

/* ===========================================
   FORMINATOR FORM STYLES
   Centered, Responsive & Professional
   =========================================== */

/* Forminator form container - centered and responsive */
.forminator-ui,
.forminator-custom-form {
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* Form wrapper for centering */
div:has(> .forminator-ui) {
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Forminator form fields */
.forminator-ui .forminator-field {
    margin-bottom: 20px !important;
}

.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="tel"],
.forminator-ui input[type="number"],
.forminator-ui textarea,
.forminator-ui select {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    transition: all 0.3s !important;
    background: white !important;
}

.forminator-ui input:focus,
.forminator-ui textarea:focus,
.forminator-ui select:focus {
    border-color: #28a745 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Forminator labels */
.forminator-ui .forminator-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    text-align: left !important;
    font-size: 15px !important;
}

/* Forminator submit button */
.forminator-ui .forminator-button-submit {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    padding: 15px 40px !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3) !important;
    margin: 20px auto !important;
    display: inline-block !important;
}

.forminator-ui .forminator-button-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

/* Forminator error messages */
.forminator-ui .forminator-error-message {
    color: #e74c3c !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    text-align: left !important;
}

/* Forminator success message */
.forminator-ui .forminator-response-message {
    padding: 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    text-align: center !important;
    font-size: 16px !important;
}

.forminator-ui .forminator-success {
    background: #d4edda !important;
    color: #155724 !important;
    border: 1px solid #c3e6cb !important;
}

.forminator-ui .forminator-error {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 1px solid #f5c6cb !important;
}

/* Responsive design for Forminator forms */
@media (max-width: 768px) {
    .forminator-ui,
    .forminator-custom-form {
        padding: 15px !important;
    }
    
    .forminator-ui .forminator-button-submit {
        width: 100% !important;
        padding: 15px 20px !important;
    }
    
    .forminator-ui input[type="text"],
    .forminator-ui input[type="email"],
    .forminator-ui input[type="tel"],
    .forminator-ui input[type="number"],
    .forminator-ui textarea,
    .forminator-ui select {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* Forminator checkbox and radio styles */
.forminator-ui .forminator-checkbox,
.forminator-ui .forminator-radio {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 10px !important;
}

.forminator-ui input[type="checkbox"],
.forminator-ui input[type="radio"] {
    width: auto !important;
    margin-right: 10px !important;
}

/* Forminator file upload */
.forminator-ui .forminator-file-upload {
    border: 2px dashed #28a745 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    text-align: center !important;
    background: #f8f9fa !important;
    transition: all 0.3s !important;
}

.forminator-ui .forminator-file-upload:hover {
    background: white !important;
    border-color: #20c997 !important;
}

/* Forminator progress bar (multi-step forms) */
.forminator-ui .forminator-progress-bar {
    background: #e0e0e0 !important;
    height: 8px !important;
    border-radius: 4px !important;
    margin-bottom: 30px !important;
}

.forminator-ui .forminator-progress-bar-fill {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    height: 100% !important;
    border-radius: 4px !important;
    transition: width 0.3s !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    line-height: 1.6;
    color: #333;
    background: #f8f9fa;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Add padding to site-main to account for fixed header */
.site-main,
#main {
    padding-top: 120px !important;
    margin-top: 0 !important;
}

/* Mobile adjustments for fixed header */
@media (max-width: 768px) {
    .site-main,
    #main {
        padding-top: 80px !important;
    }
}

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

/* ===========================================
   2. HEADER STYLES - TWO LINE LAYOUT
   =========================================== */

/* Remove default link underlines and fix colors */
.site-header a {
    text-decoration: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

/* Fix header layout to be horizontal and fixed */
.site-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    padding: 0 !important;
    position: fixed !important;
    position: -webkit-fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    z-index: 999999 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    min-height: 80px !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* Header top - hidden as requested */
.header-top {
    display: none !important;
}

/* Header wrapper - two line layout */
.header-main,
.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    min-height: 100px !important;
}

/* First line: Logo and buttons with proper spacing */
.header-top-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 2rem 0.5rem 2rem !important; /* Add horizontal padding */
    width: 100% !important;
    gap: 2rem !important; /* Add gap between elements */
}

/* Logo area */
.site-branding {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-right: auto !important; /* Push other elements to the right */
}

.site-branding h1,
.site-title,
.site-title h1 {
    margin: 0 !important;
    font-size: 1.8rem !important;
    color: white !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
    display: inline !important;
}

.site-branding a,
.site-title a,
a.site-title {
    color: white !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.site-title .logo-icon {
    font-size: 1.5rem !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Fix emoji display in navigation */
.nav-menu span[class*="icon"],
.nav-menu a::before,
.site-header .contact-icon,
.logo-icon,
.hamburger-icon {
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-family: "EmojiFont", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

.site-description {
    color: rgba(255,255,255,0.9) !important;
    margin: 0.2rem 0 0 0 !important;
    font-size: 0.85rem !important;
}

/* Navigation on second line - centered with proper spacing */
.main-navigation {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.5rem 2rem 1rem 2rem !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    margin-top: 0.5rem !important;
}

.main-navigation > ul,
.nav-menu,
.menu-primary-container > ul,
#primary-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
}

.main-navigation li {
    display: inline-block !important;
    margin: 0 0.5rem !important; /* Add spacing between menu items */
    position: relative !important;
}

.main-navigation a {
    color: white !important;
    padding: 0.7rem 1.2rem !important; /* More padding for better spacing */
    display: block !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

/* Add dropdown arrow for parent menu items */
.main-navigation li.menu-item-has-children > a::after,
.main-navigation li.page_item_has_children > a::after {
    content: " ▼" !important;
    font-size: 0.7em !important;
    margin-left: 0.3rem !important;
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    font-family: "EmojiFont", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

/* Rotate arrow on hover */
.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.page_item_has_children:hover > a::after {
    transform: rotate(180deg) !important;
}

.main-navigation a:hover {
    background: rgba(255,255,255,0.2) !important;
    border-radius: 5px !important;
}

/* ============================================
   ENHANCED DROPDOWN WITH HOVER DELAY
   ============================================ */

/* Fix dropdown disappearing too quickly */
.main-navigation li.menu-item-has-children {
    position: relative;
}

/* Dropdown menu styles with transition delay */
.main-navigation li.menu-item-has-children > .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    min-width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px;
    z-index: 99999;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Show dropdown on hover - use display instead of visibility */
.main-navigation li.menu-item-has-children:hover > .sub-menu {
    display: block !important;
}

/* Keep submenu visible when hovering over it */
.main-navigation .sub-menu:hover {
    display: block !important;
}

/* Keep menu visible when hovering over submenu itself */
.main-navigation .sub-menu:hover {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Third level dropdown for subcategories - OPEN TO THE RIGHT */
.main-navigation .sub-menu .menu-item-has-children {
    position: relative;
}

.main-navigation .sub-menu .menu-item-has-children > .sub-menu {
    display: none;
    position: absolute !important;
    top: -5px !important;
    left: 100% !important;
    margin-left: 5px !important;
    min-width: 250px !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 100000 !important;
}

/* Show sub-submenu on hover */
.main-navigation .sub-menu .menu-item-has-children:hover > .sub-menu {
    display: block !important;
}

/* Add arrow indicator for items with sub-submenus */
.main-navigation .sub-menu .menu-item-has-children > a::after {
    content: " →" !important;
    float: right !important;
    font-size: 0.9em !important;
    color: #28a745 !important;
}

/* Style submenu items */
.main-navigation .sub-menu li {
    border-bottom: 1px solid #f0f0f0;
    margin: 0;
    padding: 0;
    display: block !important;
}

.main-navigation .sub-menu li:last-child {
    border-bottom: none;
}

/* IMPORTANT: Fix text color in dropdown menus */
.main-navigation .sub-menu a,
.main-navigation ul ul a {
    padding: 12px 20px !important;
    color: #ffffff !important; /* White color for visibility on green background */
    font-size: 0.95rem !important;
    display: block !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.main-navigation .sub-menu a:hover,
.main-navigation ul ul a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding-left: 25px !important;
}

/* Category parent items in dropdown */
.main-navigation .sub-menu .menu-item-has-children > a {
    font-weight: 600;
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important; /* White text for green background */
    position: relative;
}

.main-navigation .sub-menu .menu-item-has-children > a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Ensure proper z-index stacking for nested menus */
.main-navigation .sub-menu {
    z-index: 9999;
}

.main-navigation .sub-menu .sub-menu {
    z-index: 10000;
}

/* Prevent menu overflow and ensure proper positioning */
.main-navigation ul {
    position: relative;
}

/* Style for third-level menu items */
.main-navigation .sub-menu .sub-menu a {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    color: #ffffff !important; /* White text color */
    background: transparent !important;
}

.main-navigation .sub-menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    padding-left: 25px !important;
}

/* Global fix for ALL submenu text colors */
.main-navigation ul ul li a,
.main-navigation .sub-menu li a,
.main-navigation .sub-menu .sub-menu li a {
    color: #ffffff !important; /* White text for green background */
}

.main-navigation ul ul li a:hover,
.main-navigation .sub-menu li a:hover,
.main-navigation .sub-menu .sub-menu li a:hover {
    color: white !important; /* White text on hover */
}

/* Add delay for sub-submenu hiding */
.main-navigation .sub-menu .menu-item-has-children .sub-menu {
    transition: opacity 0.3s ease 0.5s, visibility 0s ease 0.5s, transform 0.3s ease 0s;
}

.main-navigation .sub-menu .menu-item-has-children:hover .sub-menu {
    transition: opacity 0.3s ease 0.1s, visibility 0s ease 0s, transform 0.3s ease 0.1s;
}

/* Create hover bridge for sub-submenus */
.main-navigation .sub-menu .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 0;
    left: 90%;
    right: -30px;
    bottom: 0;
    z-index: 9998;
}

/* Create invisible bridge area to maintain hover */
.main-navigation > ul > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 80%;
    left: -20px;
    right: -20px;
    height: 40px;
    z-index: 99998;
}

/* Remove ALL emoji icons from menu items */
.main-navigation .menu-item a::before {
    display: none !important;
}

/* Remove green checkmarks from dropdown menu items */
.main-navigation .sub-menu li::before,
.main-navigation ul ul li::before,
.sub-menu li::before,
.main-navigation .sub-menu li a::before,
.main-navigation ul ul li a::before,
nav .sub-menu li::before,
nav ul ul li::before,
.menu .sub-menu li::before,
.menu ul ul li::before,
header .sub-menu li::before,
header ul ul li::before {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Hide emoji icons if they're in the text */
.main-navigation span[role="img"] {
    display: none !important;
}

/* Remove emojis from menu text using font */
.main-navigation a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Hide emoji characters in navigation */
.main-navigation .menu-item {
    font-family: inherit !important;
}

/* Target and hide emoji spans specifically */
.main-navigation a > span:first-child {
    display: none !important;
}

/* Clean menu text - remove first 2 characters if they're emojis */
.menu-item-title {
    font-family: inherit !important;
}

/* Fix header buttons container */
.header-buttons,
.header-cta-container,
.header-phone {
    display: flex !important;
    gap: 1.5rem !important; /* More space between buttons */
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: 2rem !important; /* Add space from navigation/logo */
}

/* Style Devis Gratuit button ONLY */
a[href*="/devis"],
.devis-button {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: 2px solid white !important;
    white-space: nowrap !important;
}

a[href*="/devis"]:hover {
    background: white !important;
    color: #28a745 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
}

/* Style phone number button */
.header-phone a[href^="tel"],
.phone-button,
.cta-phone {
    background: white !important;
    color: #2c3e50 !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    white-space: nowrap !important;
}

.header-phone a[href^="tel"]:hover,
.cta-phone:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    background: #f0f0f0 !important;
    color: #2c3e50 !important;  /* Keep dark color on hover */
}

/* Remove blue underline from phone links but keep proper color */
a[href*="tel:"] {
    color: #2c3e50 !important;  /* Dark color for readability */
    text-decoration: none !important;
}

/* FORCE header phone button to ALWAYS have dark text */
.site-header a[href*="tel:"],
.site-header a[href*="0698354398"],
.header-buttons a[href*="tel:"],
.header-cta a[href*="tel:"],
.header-phone a {
    color: #2c3e50 !important;
    background: white !important;
}

/* Fix submenu dropdowns */
.main-navigation ul ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: white !important;
    min-width: 220px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
    border-radius: 5px !important;
    z-index: 999 !important;
    margin-top: 0.2rem !important;
}

.main-navigation li:hover > ul {
    display: block !important;
}

.main-navigation ul ul li {
    display: block !important;
    margin: 0 !important;
}

/* Arrow for sub-submenu items (pointing right) */
.main-navigation ul ul li.menu-item-has-children > a::after,
.main-navigation ul ul li.page_item_has_children > a::after {
    content: " ►" !important;
    float: right !important;
    margin-left: auto !important;
    font-family: "EmojiFont", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif !important;
}

.main-navigation ul ul a {
    color: #333 !important;
    padding: 0.7rem 1rem !important;
    border-bottom: 1px solid #eee !important;
}

.main-navigation ul ul li:last-child a {
    border-bottom: none !important;
}

.main-navigation ul ul a:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}

/* Mobile menu button (hidden on desktop) */
.mobile-menu-toggle {
    display: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid white !important;
    color: white !important;
    cursor: pointer !important;
    position: relative !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.mobile-menu-toggle:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: scale(1.05) !important;
}

/* When menu is open - hamburger becomes close button */
body.mobile-menu-active .mobile-menu-toggle,
body.menu-open .mobile-menu-toggle {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

body.mobile-menu-active .mobile-menu-toggle:hover,
body.menu-open .mobile-menu-toggle:hover {
    background: #20c997 !important;
    border-color: #20c997 !important;
}

/* Menu text styling */
.mobile-menu-toggle .menu-text {
    font-size: 0.7rem !important;
    color: white !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
    line-height: 1 !important;
}

/* Hamburger icon styling */
.mobile-menu-toggle .hamburger-icon {
    font-size: 1.5rem !important;
    color: white !important;
    display: block !important;
    line-height: 1 !important;
}

/* Remove pseudo element */
.mobile-menu-toggle::before {
    display: none !important;
}

/* Hide duplicate menu-toggle class */
.menu-toggle {
    display: none !important;
}

/* ===========================================
   3. HERO SECTIONS FOR SERVICE PAGES
   =========================================== */

.hero-section,
.service-hero,
.page-hero {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 4rem 0;
    color: white;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before,
.service-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,165.3C384,171,480,149,576,122.7C672,96,768,64,864,74.7C960,85,1056,139,1152,154.7C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
    background-size: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.hero-content p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.hero-cta {
    background: white;
    color: #28a745;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.hero-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* ===========================================
   4. MAIN CONTENT AREA
   =========================================== */

.site-main,
.main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 20px;
}

/* Fix for full-width content on pages */
.page .site-main article,
.single .site-main article {
    max-width: 100%;
    width: 100%;
}

.page .entry-content,
.single .entry-content {
    max-width: 100%;
}

/* Remove any container constraints for pest pages */
.page-template-default .site-main {
    max-width: 100%;
    padding: 0;
}

/* Service pages content */
.service-content,
.page-content {
    background: white;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

/* ===========================================
   5. CARDS AND GRIDS
   =========================================== */

.services-grid,
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.service-card,
.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.service-card:hover,
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ===========================================
   6. FOOTER STYLES - MODERN GRADIENT DESIGN
   =========================================== */

/* Footer styles have been moved to theme-system.css for the modern gradient design */
/* The new footer uses the same gradient as the header for consistency */
/* See theme-system.css lines 1993-2435 for complete footer implementation */

/* Override old styles to prevent conflicts */
.site-footer {
    /* Modern gradient design in theme-system.css */
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

.footer-content {
    /* Grid layout in theme-system.css */
}

.footer-widgets {
    /* Legacy - replaced by footer-content grid */
    display: none !important;
}

.footer-widget h3,
.footer-widget ul,
.footer-widget li,
.footer-widget a {
    /* Legacy - replaced by new footer structure */
}

.footer-bottom {
    /* Modern design in theme-system.css */
}

/* ===========================================
   7. RESPONSIVE DESIGN
   =========================================== */

/* Tablet view (768px - 1024px) */
@media (max-width: 1024px) {
    /* Header adjustments - TWO line layout on tablet */
    .header-main,
    .header-container {
        padding: 0.8rem 15px !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    
    /* Restructure header-top-line for two-row layout */
    .header-top-line {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* First row: Logo LEFT + Hamburger RIGHT (standard header layout) */
    .header-top-line::before {
        content: "" !important;
        width: 100% !important;
        height: 0 !important;
        order: 1 !important;
    }
    
    /* Logo positioning - TOP LEFT */
    .site-branding {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        order: 0 !important;
        flex: 0 0 auto !important;
        padding: 0.8rem 0 !important;
    }
    
    .site-branding .site-title {
        text-align: left !important;
        margin: 0 !important;
    }
    
    .site-title {
        font-size: 1.4rem !important;
        justify-content: flex-start !important;
    }
    
    .site-description {
        font-size: 0.8rem !important;
        text-align: left !important;
    }
    
    /* Hamburger menu positioning - TOP RIGHT */
    .mobile-menu-toggle {
        display: flex !important;
        position: absolute !important;
        right: 15px !important;
        top: 1rem !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        padding: 0.5rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid white !important;
        border-radius: 8px !important;
        order: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05) !important;
    }
    
    /* Second line: Buttons centered */
    .header-phone {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1.5rem !important;
        padding: 0.8rem 0 !important;
        order: 2 !important; /* Force to second row */
        flex-basis: 100% !important; /* Take full width to force new line */
    }
    
    /* Hide navigation completely */
    .main-navigation {
        display: none !important;
    }
    
    .menu-toggle {
        display: none !important;
    }
}

/* Mobile view (max-width: 768px) */
@media (max-width: 768px) {
    /* Header adjustments - TWO line layout on mobile */
    .header-main,
    .header-container {
        padding: 0.6rem 10px !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
    }
    
    /* Restructure header-top-line for two-row layout */
    .header-top-line {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    /* First row: Logo LEFT + Hamburger RIGHT (standard header layout) */
    .header-top-line::before {
        content: "" !important;
        width: 100% !important;
        height: 0 !important;
        order: 1 !important;
    }
    
    /* Logo positioning - TOP LEFT */
    .site-branding {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        order: 0 !important;
        flex: 0 0 auto !important;
        padding: 0.8rem 0 !important;
    }
    
    .site-branding .site-title {
        text-align: left !important;
        margin: 0 !important;
    }
    
    .site-title {
        font-size: 1.3rem !important;
        justify-content: flex-start !important;
    }
    
    .site-description {
        display: none !important; /* Hide tagline on mobile to save space */
    }
    
    /* Hamburger menu positioning - TOP RIGHT */
    .mobile-menu-toggle {
        display: flex !important;
        position: absolute !important;
        right: 10px !important;
        top: 0.8rem !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        padding: 0.4rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 2px solid white !important;
        border-radius: 8px !important;
        order: 0 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: rgba(255, 255, 255, 0.2) !important;
        transform: scale(1.05) !important;
        outline: none !important;
    }
    
    /* Second line on mobile: Buttons ONLY */
    .header-phone {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 0.7rem 0 !important;
        order: 2 !important; /* Force to second row */
        flex-basis: 100% !important; /* Take full width to force new line */
    }
    
    /* Hide navigation completely */
    .main-navigation {
        display: none !important;
    }
    
    .menu-toggle {
        display: none !important;
    }
    
    /* Mobile buttons smaller */
    .header-phone a,
    .cta-phone,
    a[href*="/devis"] {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Hide Devis button text, show only icon on very small screens */
    @media (max-width: 480px) {
        a[href*="/devis"] span {
            display: none !important;
        }
        
        a[href*="/devis"]::before {
            content: "💰" !important;
        }
    }
    
    /* Mobile Menu Overlay - Full Screen */
    .mobile-menu-active .main-navigation,
    .menu-open .main-navigation {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
        z-index: 9998 !important;
        padding: 2rem !important;
        overflow-y: auto !important;
        animation: slideDown 0.3s ease !important;
    }
    
    .mobile-menu-active .main-navigation ul,
    .menu-open .main-navigation ul {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
    }
    
    .mobile-menu-active .main-navigation a,
    .menu-open .main-navigation a {
        color: white !important;
        padding: 1rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.2) !important;
        text-align: center !important;
        font-size: 1.1rem !important;
    }
    
    .mobile-menu-active .main-navigation a:hover,
    .menu-open .main-navigation a:hover {
        background: rgba(255,255,255,0.1) !important;
    }
    
    /* Submenu in mobile */
    .mobile-menu-active .main-navigation ul ul,
    .menu-open .main-navigation ul ul {
        position: static !important;
        background: rgba(0,0,0,0.1) !important;
        margin: 0 !important;
        padding-left: 1rem !important;
    }
    
    /* Close button for mobile menu */
    .mobile-menu-active .mobile-menu-toggle::before,
    .menu-open .menu-toggle::before {
        content: "✕" !important;
        font-size: 1.5rem !important;
    }
    
    /* Content sections responsive */
    .hero-content h1 {
        font-size: 1.8rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
    }
    
    .service-content,
    .page-content {
        padding: 1.5rem !important;
    }
    
    .footer-widgets {
        grid-template-columns: 1fr !important;
    }
}

/* Animation for mobile menu */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===========================================
   SIMPLE MOBILE MENU OVERLAY STYLES
   =========================================== */

/* Mobile menu overlay container - DARK DESIGN */
.desinsect-mobile-menu-overlay,
#desinsect-simple-mobile-menu {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
}

/* Mobile menu close button (X) - MAXIMUM VISIBILITY */
/* Target ALL close buttons in the mobile menu */
.smm-close,
#desinsect-simple-mobile-menu .smm-close,
#desinsect-simple-mobile-menu button[onclick*="style.display='none'"],
#desinsect-simple-mobile-menu > div > button,
#desinsect-simple-mobile-menu button:first-of-type,
#desinsect-simple-mobile-menu > div:first-child > button {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important;
    width: 60px !important;
    height: 60px !important;
    background: #ff0000 !important;
    background-color: #ff0000 !important;
    border: 4px solid #ffffff !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    font-family: Arial, sans-serif !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.smm-close::before,
#desinsect-simple-mobile-menu .smm-close::before,
#desinsect-simple-mobile-menu button[onclick*="style.display='none'"]::before,
#desinsect-simple-mobile-menu > div > button::before,
#desinsect-simple-mobile-menu button:first-of-type::before {
    content: "✕" !important;
    display: block !important;
    color: #ffffff !important;
    font-size: 36px !important;
    font-weight: bold !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.smm-close:hover,
#desinsect-simple-mobile-menu .smm-close:hover,
#desinsect-simple-mobile-menu button[onclick*="style.display='none'"]:hover,
#desinsect-simple-mobile-menu > div > button:first-child:hover,
#desinsect-simple-mobile-menu button:first-of-type:hover {
    background: #ff6666 !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.7) !important;
    color: #ffffff !important;
}

.smm-close:active,
#desinsect-simple-mobile-menu .smm-close:active,
#desinsect-simple-mobile-menu button[onclick*="style.display='none'"]:active {
    transform: rotate(90deg) scale(0.95) !important;
}

/* Mobile menu header */
#desinsect-simple-mobile-menu > div {
    padding: 20px !important;
}

/* Mobile menu title section */
#desinsect-simple-mobile-menu h2 {
    margin: 0 !important;
    color: white !important;
    font-size: 1.5rem !important;
}

#desinsect-simple-mobile-menu p {
    margin: 5px 0 !important;
    color: #ecf0f1 !important;
    font-size: 14px !important;
}

/* Mobile menu close button */
#desinsect-simple-mobile-menu button[onclick*="style.display='none'"],
#desinsect-simple-mobile-menu button:first-child {
    background: #28a745 !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

#desinsect-simple-mobile-menu button[onclick*="style.display='none'"]:hover,
#desinsect-simple-mobile-menu button:first-child:hover {
    background: #20c997 !important;
    transform: translateY(-2px) !important;
}

/* Mobile menu navigation */
#desinsect-simple-mobile-menu nav {
    margin-top: 20px !important;
}

#desinsect-simple-mobile-menu nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#desinsect-simple-mobile-menu nav ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
}

/* Dropdown container in mobile menu */
#desinsect-simple-mobile-menu nav ul li > div {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Remove green checkmarks from mobile menu */
#desinsect-simple-mobile-menu nav ul li::before,
#desinsect-simple-mobile-menu nav ul li::after {
    display: none !important;
    content: none !important;
}

#desinsect-simple-mobile-menu nav ul li a {
    display: block !important;
    padding: 15px 0 !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

#desinsect-simple-mobile-menu nav ul li a:hover {
    color: #28a745 !important;
    padding-left: 10px !important;
}

/* Mobile menu submenu toggle buttons */
#desinsect-simple-mobile-menu button[onclick*="submenu"],
#desinsect-simple-mobile-menu li button,
#desinsect-simple-mobile-menu nav button {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 2px solid #28a745 !important;
    padding: 15px !important;
    font-size: 24px !important;
    color: #28a745 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-weight: bold !important;
}

#desinsect-simple-mobile-menu button[onclick*="submenu"]:hover,
#desinsect-simple-mobile-menu button[onclick*="submenu"]:focus,
#desinsect-simple-mobile-menu li button:hover,
#desinsect-simple-mobile-menu li button:focus,
#desinsect-simple-mobile-menu nav button:hover,
#desinsect-simple-mobile-menu nav button:focus {
    transform: scale(1.1) !important;
    background: #28a745 !important;
    color: white !important;
    border-color: #28a745 !important;
}

/* Mobile menu submenus */
#desinsect-simple-mobile-menu nav ul ul {
    display: none;
    list-style: none !important;
    padding: 0 0 0 30px !important;
    margin: 10px 0 0 0 !important;
    background: transparent !important;
    border-left: 3px solid #28a745 !important;
    transition: all 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
}

/* When submenu is shown - override inline styles */
#desinsect-simple-mobile-menu nav ul ul[style*="display: block"],
#desinsect-simple-mobile-menu nav ul ul[style*="display:block"] {
    display: block !important;
    animation: slideInDown 0.3s ease !important;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#desinsect-simple-mobile-menu nav ul ul li {
    border-bottom: none !important;
    margin: 5px 0 !important;
}

#desinsect-simple-mobile-menu nav ul ul li a {
    font-size: 15px !important;
    padding: 10px 15px !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 5px !important;
    display: block !important;
    transition: all 0.3s ease !important;
}

#desinsect-simple-mobile-menu nav ul ul li a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    padding-left: 20px !important;
}

/* Mobile menu CTA buttons */
#desinsect-simple-mobile-menu > div > div:last-child {
    margin-top: 30px !important;
}

#desinsect-simple-mobile-menu a[href*="/devis/"] {
    display: block !important;
    background: #27ae60 !important;
    color: white !important;
    text-align: center !important;
    padding: 15px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

#desinsect-simple-mobile-menu a[href*="/devis/"]:hover {
    background: #229954 !important;
    transform: translateY(-2px) !important;
}

#desinsect-simple-mobile-menu a[href^="tel:"] {
    display: block !important;
    background: #e74c3c !important;
    color: white !important;
    text-align: center !important;
    padding: 15px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

#desinsect-simple-mobile-menu a[href^="tel:"]:hover {
    background: #c0392b !important;
    transform: translateY(-2px) !important;
}

/* Urgent link styling */
#desinsect-simple-mobile-menu a[href*="/urgences/"] {
    color: #ff6b6b !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5) !important;
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }
    
    .site-main {
        padding: 2rem 15px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ===========================================
   8. SPECIAL STYLES FOR PEST PAGES
   =========================================== */

/* Ensure pest page content uses full width */
.moustiques-page,
.rats-page,
.cafards-page,
.punaises-page,
.guepes-page,
.fourmis-page,
.araignees-page,
.puces-page,
.acariens-page,
.fouines-page,
.loirs-page,
.pigeon-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero sections for pest pages */
.moustiques-hero,
.rats-hero,
.cafards-hero,
.punaises-hero,
.guepes-hero,
.fourmis-hero,
.araignees-hero,
.puces-hero,
.acariens-hero,
.fouines-hero,
.loirs-hero,
.pigeon-hero,
.hero-section.gradient-bg {
    padding: 4rem 2rem;
    text-align: center;
    margin-bottom: 3rem;
    border-radius: 10px;
    color: white;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    position: relative;
    overflow: hidden;
}

/* Hero section buttons - FIXED FOR VISIBILITY */
.hero-section .cta-button,
.hero-section a.cta-button,
.gradient-bg .cta-button,
.gradient-bg a.cta-button {
    background: white !important;
    color: #28a745 !important;
    padding: 1rem 2.5rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    display: inline-block !important;
    border: 2px solid white !important;
    opacity: 1 !important;
}

.hero-section .cta-button:hover,
.hero-section a.cta-button:hover,
.gradient-bg .cta-button:hover,
.gradient-bg a.cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
    background: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

.hero-section .cta-button.cta-secondary,
.hero-section a.cta-button.cta-secondary,
.gradient-bg .cta-button.cta-secondary,
.gradient-bg a.cta-button.cta-secondary {
    background: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

.hero-section .cta-button.cta-secondary:hover,
.hero-section a.cta-button.cta-secondary:hover,
.gradient-bg .cta-button.cta-secondary:hover,
.gradient-bg a.cta-button.cta-secondary:hover {
    background: white !important;
    color: #28a745 !important;
    border: 2px solid white !important;
}

/* Special styling for cafards-hero if it exists */
.cafards-hero {
    background: linear-gradient(135deg, #8b4513 0%, #d2691e 100%);
    padding: 5rem 2rem;
    box-shadow: 0 10px 40px rgba(139, 69, 19, 0.3);
}

.cafards-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='white' stroke-width='0.5' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='100' fill='url(%23grid)'/%3E%3C/svg%3E");
    opacity: 0.1;
}

.cafards-hero .hero-content {
    position: relative;
    z-index: 2;
}

.cafards-hero h1 {
    color: white !important;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.cafards-hero p {
    color: white !important;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.cafards-hero .hero-buttons,
.cafards-hero .hero-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Cafards specific button styling */
.cafards-hero .cta-button,
.cafards-hero a.cta-button {
    background: white !important;
    color: #8b4513 !important;
    padding: 1rem 2.5rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2) !important;
    display: inline-block !important;
    border: 2px solid transparent !important;
}

.cafards-hero .cta-button:hover,
.cafards-hero a.cta-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3) !important;
    background: #8b4513 !important;
    color: white !important;
    border: 2px solid white !important;
}

.cafards-hero .cta-secondary {
    background: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

.cafards-hero .cta-secondary:hover {
    background: white !important;
    color: #8b4513 !important;
}

/* Phone icon for CTA buttons */
.hero-section .cta-button i,
.gradient-bg .cta-button i,
.cafards-hero .cta-button i {
    margin-right: 0.5rem;
}

/* Page Container for proper structure */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.page-container .container {
    max-width: 100%;
    padding: 0 20px;
}

/* Sections for pest pages */
.moustiques-section,
.rats-section,
.cafards-section,
.punaises-section,
.guepes-section,
.fourmis-section,
.araignees-section,
.puces-section,
.acariens-section,
.fouines-section,
.loirs-section,
.pigeon-section {
    background: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

/* Grids for pest pages */
.moustiques-grid,
.rats-grid,
.cafards-grid,
.punaises-grid,
.guepes-grid,
.fourmis-grid,
.araignees-grid,
.puces-grid,
.acariens-grid,
.fouines-grid,
.loirs-grid,
.pigeon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

/* Cards for pest pages */
.moustiques-card,
.rats-card,
.cafards-card,
.punaises-card,
.guepes-card,
.fourmis-card,
.araignees-card,
.puces-card,
.acariens-card,
.fouines-card,
.loirs-card,
.pigeon-card {
    padding: 1.5rem;
    border-radius: 8px;
}

/* CTA buttons for pest pages */
.moustiques-cta,
.rats-cta,
.cafards-cta,
.punaises-cta,
.guepes-cta,
.fourmis-cta,
.araignees-cta,
.puces-cta,
.acariens-cta,
.fouines-cta,
.loirs-cta,
.pigeon-cta {
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

/* ===========================================
   9. HOMEPAGE SPECIFIC STYLES
   =========================================== */

/* Enhanced Hero Section for Homepage */
.home-hero {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 5rem 0 6rem;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 550px;
}

.home-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: moveBackground 30s linear infinite;
}

@keyframes moveBackground {
    0% { transform: translateX(0); }
    100% { transform: translateX(40px); }
}

.home-hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.2);
    animation: fadeInUp 0.8s ease;
}

.home-hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s ease 0.2s both;
}

/* Hero Stats Grid */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    backdrop-filter: blur(10px);
}

.stat-item {
    text-align: center;
    animation: fadeInUp 0.8s ease 0.4s both;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

/* Hero CTA Buttons */
.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    animation: fadeInUp 0.8s ease 0.6s both;
}

.hero-buttons a {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-buttons a:first-child {
    background: white;
    color: #2c3e50 !important; /* Dark text for better readability */
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.hero-buttons a:first-child:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    color: #28a745 !important; /* Purple on hover */
}

.hero-buttons a:nth-child(2) {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.hero-buttons a:nth-child(2):hover {
    background: white;
    color: #28a745;
    transform: translateY(-3px);
}

/* Services Section */
.services-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 700;
}

.section-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.service-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.service-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.service-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.service-card ul {
    list-style: none;
    padding: 0;
}

.service-card ul li {
    padding: 0.5rem 0;
    color: #666;
    padding-left: 1.5rem;
    position: relative;
}

.service-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

/* Nuisibles (Pests) Section - ENHANCED DESIGN */
.nuisibles-section,
.pests-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

.nuisibles-section::before,
.pests-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.03) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-30px) rotate(5deg); }
}

.nuisibles-categories,
.pests-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.nuisible-category,
.pest-category {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 25px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.nuisible-category::before,
.pest-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #28a745 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.nuisible-category:hover,
.pest-category:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
}

.category-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 3px solid transparent;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    background-clip: text;
    -webkit-background-clip: text;
    position: relative;
}

.category-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    border-radius: 2px;
}

.category-icon {
    font-size: 3rem;
    animation: bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.category-header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: -0.5px;
}

.nuisibles-grid,
.pests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.2rem;
}

.nuisible-item,
.pest-item {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    padding: 1.5rem 1rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

.nuisible-item::before,
.pest-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.nuisible-item:hover::before,
.pest-item:hover::before {
    width: 200%;
    height: 200%;
}

.nuisible-item:hover,
.pest-item:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: #28a745;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25);
    background: linear-gradient(145deg, #ffffff 0%, #f0f3ff 100%);
}

.nuisible-emoji,
.pest-emoji {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    display: block;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.nuisible-item:hover .nuisible-emoji,
.pest-item:hover .pest-emoji {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

.nuisible-name,
.pest-name {
    font-weight: 700;
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: -0.3px;
}

.nuisible-danger,
.pest-danger {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

.nuisible-item p,
.pest-item p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Target the pests section container structure */
.pests-section .container > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

/* Style each category container */
.pests-section .container > div:last-child > div {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 25px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.pests-section .container > div:last-child > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #28a745 100%);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

.pests-section .container > div:last-child > div:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.15);
}

/* Style category headers */
.pests-section .container > div:last-child > div > div:first-child {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    position: relative;
}

.pests-section .container > div:last-child > div > div:first-child::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    border-radius: 2px;
}

/* Style category icons */
.pests-section .container > div:last-child > div > div:first-child > div:first-child {
    font-size: 3rem;
    animation: bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Style category titles */
.pests-section .container > div:last-child > div > div:first-child h3 {
    font-size: 1.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Style the pest items grid */
.pests-section .container > div:last-child > div > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.2rem;
}

/* Style individual pest items */
.pests-section .container > div:last-child > div > div:last-child > div {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    padding: 1.5rem 1rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid rgba(102, 126, 234, 0.1);
    position: relative;
    overflow: hidden;
}

.pests-section .container > div:last-child > div > div:last-child > div::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
}

.pests-section .container > div:last-child > div > div:last-child > div:hover::before {
    width: 200%;
    height: 200%;
}

.pests-section .container > div:last-child > div > div:last-child > div:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: #28a745;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.25);
    background: linear-gradient(145deg, #ffffff 0%, #f0f3ff 100%);
}

/* Style pest emojis */
.pests-section .container > div:last-child > div > div:last-child > div > div:first-child {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    display: block;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.pests-section .container > div:last-child > div > div:last-child > div:hover > div:first-child {
    transform: scale(1.2) rotate(10deg);
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

/* Style pest names */
.pests-section .container > div:last-child > div > div:last-child > div > div:nth-child(2) {
    font-weight: 700;
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: -0.3px;
}

/* Style danger badges */
.pests-section .container > div:last-child > div > div:last-child > div > div:nth-child(3) {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 0.6rem;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.3);
}

/* Style pest descriptions */
.pests-section .container > div:last-child > div > div:last-child > div > p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .nuisibles-categories,
    .pests-categories,
    .pests-section .container > div:last-child {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .nuisibles-grid,
    .pests-grid,
    .pests-section .container > div:last-child > div > div:last-child {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Zones/Locations Section */
.zones-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.zones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.zone-item {
    background: white;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.zone-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.zone-name {
    font-weight: 600;
}

.zone-desc {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Testimonials Section */
.testimonials-section {
    padding: 4rem 0;
    background: white;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.testimonial-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.12);
}

.testimonial-card::before {
    content: """;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 4rem;
    color: #28a745;
    opacity: 0.2;
    font-family: Georgia, serif;
}

.testimonial-rating {
    color: #ffc107;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.testimonial-text {
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.testimonial-author {
    font-weight: 600;
    color: #2c3e50;
    text-align: right;
}

.testimonial-location {
    font-size: 0.9rem;
    color: #999;
    text-align: right;
}

/* Tarifs Hero Section */
.tarifs-hero {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 4rem 0;
    text-align: center;
    color: white;
    position: relative;
}

.tarifs-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.tarifs-hero p {
    font-size: 1.2rem;
    opacity: 0.95;
}

/* Pricing Section */
.pricing-section,
.pricing-preview-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.pricing-grid,
.pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.pricing-card {
    background: white;
    border-radius: 15px;
    padding: 2.5rem;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-color: #28a745;
}

.pricing-card.featured {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white !important;
    transform: scale(1.05);
    border: 2px solid #20c997;
    overflow: visible !important;
}

.pricing-card.featured *,
.pricing-card.featured h3,
.pricing-card.featured p,
.pricing-card.featured span,
.pricing-card.featured div,
.pricing-card.featured li {
    color: white !important;
    opacity: 1 !important;
}

.pricing-card.featured::before {
    content: "POPULAIRE";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffc107;
    color: #333 !important;
    padding: 0.4rem 1.2rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
    white-space: nowrap;
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.pricing-card.featured h3 {
    color: white !important;
}

.pricing-price,
.pricing-card > div:nth-child(2) {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #28a745;
}

.pricing-card.featured .pricing-price,
.pricing-card.featured .price-amount,
.pricing-card.featured .price-period,
.pricing-card.featured > div:nth-child(2) {
    color: white !important;
}

.pricing-period,
.pricing-card > div:nth-child(3) {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.pricing-features,
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: left;
}

.pricing-features li,
.pricing-card ul li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    padding-left: 1.5rem;
}

.pricing-card.featured ul li {
    border-bottom-color: rgba(255,255,255,0.2);
    color: white !important;
}

.pricing-features li:last-child,
.pricing-card ul li:last-child {
    border-bottom: none;
}

.pricing-features li::before,
.pricing-card ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.pricing-card.featured ul li::before {
    color: #ffc107 !important;
}

.pricing-cta,
.pricing-card a {
    display: inline-block;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.pricing-card.featured .pricing-cta,
.pricing-card.featured a {
    background: white;
    color: #28a745 !important;
}

.pricing-cta:hover,
.pricing-card a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* Detailed Pricing Tables */
.detailed-pricing-section {
    padding: 4rem 0;
    background: white;
}

.pricing-table-wrapper {
    margin-bottom: 3rem;
}

.table-title {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px 12px 0 0;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.table-title.pro {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
}

.table-wrapper {
    overflow-x: auto;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.pricing-table thead {
    background: #f8f9fa;
}

.pricing-table th {
    padding: 1.2rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #dee2e6;
}

.pricing-table th:not(:first-child) {
    text-align: center;
}

.pricing-table tbody tr {
    transition: background 0.2s ease;
}

.pricing-table tbody tr:hover {
    background: #f8f9fa;
}

.pricing-table td {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.pricing-table td:first-child {
    font-weight: 600;
    color: #2c3e50;
}

.pricing-table td:not(:first-child) {
    text-align: center;
}

.price-highlight {
    color: #28a745;
    font-weight: 700;
}

.price-special {
    color: #e74c3c;
    font-weight: 700;
    font-size: 1.1rem;
}

.price-pro {
    color: #20c997;
    font-weight: 700;
}

.devis-note {
    text-align: center;
    color: #666;
    font-style: italic;
    background: #f8f9fa;
}

.pricing-note {
    text-align: center;
    color: #666;
    font-size: 0.9rem;
    margin-top: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

/* FAQ Section - Modern Design */
.faq-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    position: relative;
}

.faq-section .section-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.faq-section .section-subtitle {
    text-align: center;
    color: #666;
    max-width: 600px;
    margin: 0 auto 3rem;
    font-size: 1.1rem;
}

/* FAQ Section Header - ADDED */
.faq-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-section .section-header h2 {
    color: #2c3e50;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.faq-section .section-header p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.faq-section h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 3rem;
    font-size: 2rem;
}

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

.faq-item {
    background: white;
    border-radius: 15px;
    margin-bottom: 1.2rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid transparent;
    position: relative;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.2);
}

.faq-item.active {
    border-color: #28a745;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}

.faq-question {
    padding: 1.5rem 2rem;
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1.15rem;
    position: relative;
    transition: color 0.3s ease;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2c3e50;
    flex: 1;
}

/* FAQ Arrow - Style pour la flèche */
.faq-arrow {
    color: #28a745;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    margin-left: 1rem;
    display: inline-block;
    flex-shrink: 0;
}

.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}

.faq-item.active .faq-question {
    color: #28a745 !important;
}

.faq-item.active .faq-question h3 {
    color: #28a745 !important;
}

.faq-question:hover {
    color: #28a745 !important;
}

.faq-question:hover h3 {
    color: #28a745 !important;
}

.faq-question::after {
    content: "";
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-question::before {
    content: "+";
    position: absolute;
    right: 2rem;
    color: white !important;
    font-size: 1.3rem;
    font-weight: 400;
    z-index: 1;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.faq-item.active .faq-question::before {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: #666;
    line-height: 1.7;
    font-size: 1rem;
}

.faq-item.active .faq-answer {
    padding: 0 2rem 1.8rem;
    max-height: 500px;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    margin-top: -0.5rem;
    padding-top: 1.5rem;
}

/* Override pour FAQ avec display inline */
.faq-answer[style*="display: none"] {
    display: none !important;
}

.faq-item.active .faq-answer[style*="display: none"] {
    display: block !important;
}

/* FAQ Mobile Responsive */
@media (max-width: 768px) {
    .faq-section {
        padding: 3rem 0;
    }
    
    .faq-container {
        padding: 0 15px;
    }
    
    .faq-item {
        margin-bottom: 0.8rem;
        border-radius: 12px;
    }
    
    .faq-question {
        padding: 1.2rem 1.5rem;
        font-size: 1rem;
    }
    
    .faq-question::after {
        width: 26px;
        height: 26px;
    }
    
    .faq-question::before {
        right: 1.5rem;
        font-size: 1.1rem;
    }
    
    .faq-answer {
        padding: 0 1.5rem;
        font-size: 0.95rem;
    }
    
    .faq-item.active .faq-answer {
        padding: 0 1.5rem 1.5rem;
    }
}

/* Guarantee Section */
.guarantee-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.guarantee-section .section-title {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 3rem;
    font-size: 2rem;
}

.guarantees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.guarantee-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guarantee-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.guarantee-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.guarantee-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.guarantee-card p {
    color: #666;
    line-height: 1.6;
}

.guarantee-box {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 2rem;
    border-radius: 10px;
    margin-top: 3rem;
    text-align: center;
}

.guarantee-box h3 {
    color: white;
    margin-bottom: 1rem;
}

.guarantee-box p {
    color: white;
    font-size: 1.1rem;
}

/* CTA Section */
.cta-section {
    padding: 4rem 0;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    text-align: center;
}

/* Force blue/black text on CTA section buttons and links */
.cta-section a {
    color: #2c3e50 !important;  /* Dark text for all links */
}

.cta-section .cta-button,
.cta-section a.cta-button {
    background: white !important;
    color: #28a745 !important;  /* Blue text */
    border: none !important;
}

.cta-section .cta-button:hover,
.cta-section a.cta-button:hover {
    background: #f8f9fa !important;
    color: #20c997 !important;  /* Darker purple on hover */
}

.cta-section .cta-button.cta-white,
.cta-section a.cta-white {
    background: white !important;
    color: #28a745 !important;  /* Blue text */
}

.cta-section .cta-button.cta-white:hover,
.cta-section a.cta-white:hover {
    background: #f8f9fa !important;
    color: #20c997 !important;
}

.cta-section .cta-button.cta-secondary,
.cta-section a.cta-secondary {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
}

.cta-section .cta-button.cta-secondary:hover,
.cta-section a.cta-secondary:hover {
    background: white !important;
    color: #28a745 !important;  /* Blue text on hover */
    border-color: white !important;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.cta-phone {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    display: block;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons a {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-buttons a:first-child {
    background: white;
    color: #28a745;
}

.cta-buttons a:first-child:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.cta-buttons a:last-child {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.cta-buttons a:last-child:hover {
    background: white;
    color: #28a745;
}

/* Individual CTA Button Classes */
.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    background: white;
    color: #28a745 !important;
    margin: 0.5rem;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    color: #20c997 !important;
}

.cta-button.cta-white {
    background: white;
    color: #28a745 !important;
}

.cta-button.cta-white:hover {
    background: #f8f9fa;
    color: #20c997 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.cta-button.cta-secondary {
    background: transparent;
    border: 2px solid white;
    color: white !important;
}

.cta-button.cta-secondary:hover {
    background: white;
    color: #28a745 !important;
    border-color: white;
}

/* ============================================
   MISSING STYLES FOR ALL PAGE SECTIONS
   ============================================ */

/* Problems Section */
.problems-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.problems-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.problem-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.problem-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.problem-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.problem-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.problem-card ul {
    list-style: none;
    padding: 0;
}

.problem-card ul li {
    padding: 0.5rem 0;
    color: #666;
    padding-left: 1.5rem;
    position: relative;
}

.problem-card ul li:before {
    content: "•";
    color: #28a745;
    position: absolute;
    left: 0;
}

.alert-text {
    background: #fee;
    color: #c00;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    font-weight: 600;
    text-align: center;
}

/* Solutions Section */
.solutions-section {
    padding: 4rem 0;
    background: white;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.solution-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.solution-card.featured {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.solution-card.featured h3,
.solution-card.featured p,
.solution-card.featured .solution-features li {
    color: white !important;
}

.solution-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.solution-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.solution-card p {
    color: #666;
    margin-bottom: 1rem;
}

.solution-features {
    list-style: none;
    padding: 0;
}

.solution-features li {
    padding: 0.5rem 0;
    color: #666;
    padding-left: 1.5rem;
    position: relative;
}

.solution-features li:before {
    content: "✓";
    color: #28a745;
    position: absolute;
    left: 0;
}

.price-tag {
    background: #28a745;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
}

/* Buildings Section */
.buildings-section {
    padding: 4rem 0;
    background: white;
}

.buildings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.building-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.building-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.building-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.building-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.building-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.building-card ul li {
    padding: 0.5rem 0;
    color: #666;
    border-bottom: 1px solid #eee;
}

.building-solution {
    background: #28a745;
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    margin-top: 1rem;
    font-weight: 600;
}

/* History Section */
.history-section {
    padding: 4rem 0;
    background: white;
}

.history-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.history-text h2 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.history-text p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    color: #28a745;
    font-weight: bold;
    display: block;
}

.stat-label {
    color: #666;
    font-size: 0.9rem;
}

.history-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Values Section */
.values-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.value-card p {
    color: #666;
    line-height: 1.6;
}

/* Team Section */
.team-section {
    padding: 4rem 0;
    background: white;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.team-card {
    text-align: center;
    padding: 1.5rem;
}

.team-image img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

.team-card h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.team-role {
    color: #28a745;
    font-weight: 600;
    margin-bottom: 1rem;
}

.team-bio {
    color: #666;
    font-size: 0.95rem;
}

.team-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.team-stat {
    text-align: center;
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.stat-value {
    font-size: 1.8rem;
    color: #28a745;
    font-weight: bold;
    display: block;
}

/* Commitments Section */
.commitments-section {
    padding: 4rem 0;
    background: white;
}

.commitments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.commitment-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.commitment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.commitment-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.commitment-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.commitment-card p {
    color: #666;
    line-height: 1.6;
}

/* Partners Section */
.partners-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.partner-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.partner-card h4 {
    color: #28a745;
    margin-bottom: 1rem;
}

.partner-card ul {
    list-style: none;
    padding: 0;
}

.partner-card ul li {
    padding: 0.5rem 0;
    color: #666;
    border-bottom: 1px solid #eee;
}

/* Timeline Section */
.timeline-section {
    padding: 4rem 0;
    background: white;
}

.timeline {
    position: relative;
    max-width: 1200px;
    margin: 3rem auto;
}

.timeline:before {
    content: '';
    position: absolute;
    width: 2px;
    background: #28a745;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
}

.timeline-item:nth-child(even) {
    left: 50%;
}

.timeline-year {
    background: #28a745;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 1rem;
}

.timeline-content {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.timeline-content h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.timeline-content p {
    color: #666;
}

/* Emergency Section - IMPROVED */
.emergency-section {
    padding: 3rem 0;
    background: white;
}

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

.emergency-box {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    padding: 3rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}

.emergency-box h2 {
    color: white !important;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
}

.emergency-box p {
    color: white !important;
    margin-bottom: 1.5rem;
    opacity: 0.95;
    font-size: 1.1rem;
    line-height: 1.6;
}

.emergency-box p strong {
    color: white !important;
    font-weight: 700;
}

.emergency-contacts {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

.emergency-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 1.5rem;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.emergency-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.emergency-item h4 {
    color: white !important;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.emergency-item a {
    color: white !important;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.emergency-item a:hover {
    transform: scale(1.05);
}

.emergency-item span {
    color: white !important;
    opacity: 0.9;
    font-size: 0.95rem;
    margin-top: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .emergency-box {
        padding: 2rem 1.5rem;
    }
    
    .emergency-box h2 {
        font-size: 1.5rem;
    }
    
    .emergency-item a {
        font-size: 1.2rem;
    }
}

/* Contact Cards Section */
.contact-cards-section {
    padding: 4rem 0;
    background: white;
}

.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.contact-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.contact-card.featured {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.contact-card.featured h3,
.contact-card.featured p,
.contact-card.featured .contact-features li {
    color: white !important;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.contact-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #4a5fc1; /* Darker blue for better contrast */
}

.contact-card.featured .contact-icon {
    color: white !important;
}

.contact-card p {
    color: #4a5568; /* Darker gray for better contrast */
    line-height: 1.6;
}

.contact-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.contact-number {
    font-size: 1.5rem;
    color: #4a5fc1; /* Darker blue for better contrast (WCAG AA) */
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.contact-email {
    font-size: 1.2rem;
    color: #4a5fc1; /* Darker blue for better contrast (WCAG AA) */
    margin-bottom: 0.5rem;
}

.contact-address {
    font-size: 1.1rem;
    color: #4a5fc1; /* Darker blue for better contrast (WCAG AA) */
    margin-bottom: 0.5rem;
}

.contact-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
}

.contact-features li {
    padding: 0.5rem 0;
    color: #4a5568; /* Darker gray for better contrast (WCAG AA) */
}

.contact-button {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: #5569d0; /* Darker blue for better contrast */
    color: white !important;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 600;
}

.contact-button:hover {
    background: #1e7e34; /* Darker purple for better contrast */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

.contact-card.featured .contact-button {
    background: white;
    color: #4a5fc1 !important; /* Darker blue for better contrast on white */
}

.contact-card.featured .contact-button:hover {
    background: #f8f9fa;
    color: #1e7e34 !important; /* Darker purple for better contrast */
}

/* Forms */
.contact-form-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.form-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-weight: 600;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #28a745;
}

.radio-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.form-submit {
    text-align: center;
    margin-top: 2rem;
}

.submit-button {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 1rem 3rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}

.form-note {
    color: #666;
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* Hours Section */
.hours-section {
    padding: 4rem 0;
    background: white;
}

.hours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.hours-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
}

.hours-card.featured {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.hours-card h3 {
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.hours-card.featured h3 {
    color: white;
}

.hours-list {
    list-style: none;
    padding: 0;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.hours-card.featured .hours-item {
    border-bottom-color: rgba(255,255,255,0.2);
}

.hours-item .day {
    color: #666;
    font-weight: 600;
}

.hours-item .time {
    color: #28a745;
}

.hours-card.featured .hours-item .day,
.hours-card.featured .hours-item .time {
    color: white;
}

.hours-note {
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.hours-card.featured .hours-note {
    color: white;
    opacity: 0.9;
}

/* Payment Section */
.payment-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.payment-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.payment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.payment-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.payment-card h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.payment-card p {
    color: #666;
    margin-bottom: 0.5rem;
}

.payment-note {
    color: #999;
    font-size: 0.85rem;
}

/* Social Section */
.social-section {
    padding: 4rem 0;
    background: white;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.social-card {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.social-card:hover h3,
.social-card:hover p,
.social-card:hover span {
    color: white !important;
}

.social-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.social-card h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.social-card p {
    color: #28a745;
    margin-bottom: 0.5rem;
}

.social-card span {
    color: #666;
    font-size: 0.9rem;
}

/* Zones-specific Sections */
.main-cities-section,
.arrondissements-section,
.other-cities-section,
.services-zones-section,
.response-times-section,
.coverage-stats-section {
    padding: 4rem 0;
}

.main-cities-section,
.arrondissements-section:nth-child(even),
.other-cities-section:nth-child(even) {
    background: #f8f9fa;
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.city-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.city-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.city-card.featured {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.city-card.featured h3,
.city-card.featured p,
.city-card.featured .city-features li {
    color: white !important;
}

.city-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.city-card h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.city-subtitle {
    color: #666;
    margin-bottom: 1rem;
}

.city-features {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.city-features li {
    padding: 0.5rem 0;
    color: #666;
}

.city-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.city-areas span {
    background: #28a745;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
}

.city-card.featured .city-areas span {
    background: rgba(255,255,255,0.2);
}

/* Arrondissements Grid */
.arrondissements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.arrondissement-card {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.arrondissement-card h4 {
    color: #28a745;
    margin-bottom: 0.5rem;
}

.arrondissement-card p {
    color: #999;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.arrondissement-card ul {
    list-style: none;
    padding: 0;
}

.arrondissement-card ul li {
    padding: 0.25rem 0;
    color: #666;
    font-size: 0.9rem;
}

.response-time {
    background: #28a745;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
    display: inline-block;
    margin-top: 1rem;
}

/* Cities List Sections */
.cities-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.cities-list-column h3 {
    color: #28a745;
    margin-bottom: 1rem;
}

.cities-list {
    list-style: none;
    padding: 0;
}

.cities-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.city-name {
    color: #2c3e50;
    font-weight: 500;
}

.time {
    color: #28a745;
    font-size: 0.9rem;
}

/* Services Zones Grid */
.services-zones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-zone-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.service-zone-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.service-zone-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.service-zone-card ul li {
    padding: 0.5rem 0;
    color: #666;
    padding-left: 1.5rem;
    position: relative;
}

.service-zone-card ul li:before {
    content: "✓";
    color: #28a745;
    position: absolute;
    left: 0;
}

.zone-note {
    background: #f8f9fa;
    color: #28a745;
    padding: 0.5rem;
    border-radius: 5px;
    text-align: center;
    font-size: 0.9rem;
}

/* Response Times Grid */
.response-times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.response-time-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.response-time-card.urgent {
    border-top: 3px solid #dc3545;
}

.response-time-card.fast {
    border-top: 3px solid #ffc107;
}

.response-time-card.standard {
    border-top: 3px solid #28a745;
}

.response-time-card.scheduled {
    border-top: 3px solid #28a745;
}

.time-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.response-time-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.time-value {
    font-size: 1.8rem;
    color: #28a745;
    font-weight: bold;
    margin-bottom: 1rem;
}

.response-time-card ul {
    list-style: none;
    padding: 0;
}

.response-time-card ul li {
    padding: 0.25rem 0;
    color: #666;
}

/* Coverage Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

/* Additional Sections Styles */
.sectors-section,
.certifications-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.sector-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.sector-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.sector-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.sector-card ul {
    list-style: none;
    padding: 0;
}

.sector-card ul li {
    padding: 0.5rem 0;
    color: #666;
    border-bottom: 1px solid #eee;
}

.sector-note {
    background: #28a745;
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.cert-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.certification-card h3 {
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.certification-card p {
    color: #666;
    margin-bottom: 0.5rem;
}

.cert-number {
    color: #28a745;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Process Grid */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.process-card {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.process-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}

.process-card h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
}

.process-card p {
    color: #666;
    margin-bottom: 1rem;
}

.process-details {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.badge {
    background: #28a745;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
}

.badge-featured {
    position: absolute;
    top: -10px;
    right: 20px;
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-weight: 600;
}

/* Hero CTAs */
.hero-cta {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: white;
    opacity: 0.95;
}

/* Gradient Backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Section Title and Subtitle Styles */
.section-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 700;
    text-align: center;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 3rem;
    text-align: center;
}

/* ===========================================
   10. GENERIC HOMEPAGE STRUCTURE STYLES
   =========================================== */

/* Target homepage sections by structure */
.site-main > div {
    padding: 3rem 0;
}

/* Hero section (first div in main) */
.site-main > div:first-child {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 4rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.site-main > div:first-child h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.site-main > div:first-child p {
    font-size: 1.2rem;
    opacity: 0.95;
    margin-bottom: 2rem;
}

/* Stats grid in hero */
.site-main > div:first-child > div:nth-child(3) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    max-width: 800px;
    margin: 3rem auto;
    padding: 2rem;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
}

.site-main > div:first-child > div:nth-child(3) > div {
    text-align: center;
}

.site-main > div:first-child > div:nth-child(3) > div > div:first-child {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Hero buttons */
.site-main > div:first-child > div:last-child {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.site-main > div:first-child > div:last-child a {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.site-main > div:first-child > div:last-child a:first-child {
    background: white;
    color: #2c3e50 !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.site-main > div:first-child > div:last-child a:first-child:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

.site-main > div:first-child > div:last-child a:last-child {
    background: transparent;
    border: 2px solid white;
    color: white;
}

/* Services section (second div) */
.site-main > div:nth-child(2) {
    background: #f8f9fa;
    padding: 4rem 0;
}

.site-main > div:nth-child(2) > div:first-child {
    text-align: center;
    margin-bottom: 3rem;
}

.site-main > div:nth-child(2) h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.site-main > div:nth-child(2) > div:first-child p {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Services grid */
.site-main > div:nth-child(2) > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-main > div:nth-child(2) > div:last-child > div {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.site-main > div:nth-child(2) > div:last-child > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.site-main > div:nth-child(2) > div:last-child > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.site-main > div:nth-child(2) > div:last-child > div > div:first-child {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.site-main > div:nth-child(2) > div:last-child > div h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.site-main > div:nth-child(2) > div:last-child > div p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.site-main > div:nth-child(2) > div:last-child > div ul {
    list-style: none;
    padding: 0;
}

.site-main > div:nth-child(2) > div:last-child > div ul li {
    padding: 0.5rem 0;
    color: #666;
    padding-left: 1.5rem;
    position: relative;
}

.site-main > div:nth-child(2) > div:last-child > div ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

/* Nuisibles section (third div) - COMPLETE REBUILD */
.site-main > div:nth-child(3) {
    background: #f8f9fa !important;
    padding: 5rem 0 !important;
}

.site-main > div:nth-child(3) > div:first-child {
    text-align: center !important;
    margin-bottom: 3rem !important;
}

.site-main > div:nth-child(3) h2 {
    font-size: 2.5rem !important;
    color: #2c3e50 !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
}

.site-main > div:nth-child(3) > div:first-child p {
    font-size: 1.1rem !important;
    color: #666 !important;
}

/* Force grid layout for categories */
.site-main > div:nth-child(3) > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Each category card with forced styling */
.site-main > div:nth-child(3) > div:last-child > div {
    background: white !important;
    border-radius: 15px !important;
    padding: 2rem !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: 2px solid #e9ecef !important;
}

/* Category header with icon and title */
.site-main > div:nth-child(3) > div:last-child > div > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid #28a745 !important;
}

/* Category emoji/icon */
.site-main > div:nth-child(3) > div:last-child > div > div:first-child > div:first-child {
    font-size: 2.5rem !important;
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Category title styling */
.site-main > div:nth-child(3) > div:last-child > div h3 {
    font-size: 1.5rem !important;
    color: #2c3e50 !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

/* Grid for individual pests within category */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
}

/* Individual pest card */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div {
    background: #f8f9fa !important;
    padding: 1rem !important;
    border-radius: 10px !important;
    border: 1px solid #e9ecef !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 0.8rem !important;
    align-items: start !important;
    transition: all 0.3s ease !important;
}

.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div:hover {
    background: white !important;
    border-color: #28a745 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2) !important;
}

/* Pest icon */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div > div:first-child {
    font-size: 1.5rem !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
}

/* Pest content wrapper */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div > div:nth-child(2),
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div > div:nth-child(3),
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div > p {
    grid-column: 2 !important;
}

/* Pest name */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div > div:nth-child(2) {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
}

/* Warning badge */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div > div:nth-child(3) {
    background: #ffc107 !important;
    color: #856404 !important;
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 8px !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

/* Description */
.site-main > div:nth-child(3) > div:last-child > div > div:last-child > div p {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Responsive design */
@media (max-width: 992px) {
    .site-main > div:nth-child(3) > div:last-child {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 576px) {
    .site-main > div:nth-child(3) > div:last-child > div > div:last-child {
        grid-template-columns: 1fr !important;
    }
}

/* Zones section (fourth div) - COMPLETE REDESIGN */
.site-main > div:nth-child(4) {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    padding: 5rem 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.site-main > div:nth-child(4)::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
}

.site-main > div:nth-child(4) > div:first-child {
    text-align: center !important;
    margin-bottom: 3rem !important;
    position: relative !important;
    z-index: 1 !important;
}

.site-main > div:nth-child(4) h2 {
    font-size: 3rem !important;
    color: white !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
}

.site-main > div:nth-child(4) > div:first-child p {
    font-size: 1.2rem !important;
    color: white !important;
    opacity: 0.95 !important;
}

/* Zones grid - Card layout */
.site-main > div:nth-child(4) > div:last-child {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: 1.5rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Zone card styling */
.site-main > div:nth-child(4) > div:last-child > div {
    background: white !important;
    padding: 1.5rem !important;
    border-radius: 15px !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Add location pin icon before each zone */
.site-main > div:nth-child(4) > div:last-child > div::before {
    content: "📍" !important;
    position: absolute !important;
    left: 1rem !important;
    font-size: 1.5rem !important;
    opacity: 0.8 !important;
}

/* Zone content wrapper */
.site-main > div:nth-child(4) > div:last-child > div > div:first-child {
    font-weight: 700 !important;
    color: #2c3e50 !important;
    font-size: 1.1rem !important;
    padding-left: 2rem !important;
}

.site-main > div:nth-child(4) > div:last-child > div > div:last-child {
    font-size: 0.9rem !important;
    color: #666 !important;
    opacity: 0.8 !important;
}

/* Hover effect */
.site-main > div:nth-child(4) > div:last-child > div:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3) !important;
    border-color: #28a745 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, white 100%) !important;
}

.site-main > div:nth-child(4) > div:last-child > div:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%) !important;
}

/* Special styling for major cities */
.site-main > div:nth-child(4) > div:last-child > div:nth-child(n+17) {
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%) !important;
    border: 2px solid #28a745 !important;
}

.site-main > div:nth-child(4) > div:last-child > div:nth-child(n+17) > div:first-child {
    color: #28a745 !important;
}

/* Responsive design */
@media (max-width: 768px) {
    .site-main > div:nth-child(4) > div:last-child {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
        gap: 1rem !important;
    }
    
    .site-main > div:nth-child(4) > div:last-child > div {
        padding: 1rem !important;
    }
    
    .site-main > div:nth-child(4) h2 {
        font-size: 2rem !important;
    }
}

/* Testimonials section (fifth div) */
.site-main > div:nth-child(5) {
    background: white;
    padding: 4rem 0;
}

.site-main > div:nth-child(5) > div:first-child {
    text-align: center;
    margin-bottom: 3rem;
}

.site-main > div:nth-child(5) h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Testimonials grid */
.site-main > div:nth-child(5) > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-main > div:nth-child(5) > div:last-child > div {
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.site-main > div:nth-child(5) > div:last-child > div:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 25px rgba(0,0,0,0.12);
}

.site-main > div:nth-child(5) > div:last-child > div::before {
    content: """;
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 4rem;
    color: #28a745;
    opacity: 0.2;
    font-family: Georgia, serif;
}

.site-main > div:nth-child(5) > div:last-child > div > div:first-child {
    color: #ffc107;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.site-main > div:nth-child(5) > div:last-child > div p {
    font-style: italic;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

/* Pricing section (sixth div) */
.site-main > div:nth-child(6) {
    background: #f8f9fa;
    padding: 4rem 0;
}

.site-main > div:nth-child(6) > div:first-child {
    text-align: center;
    margin-bottom: 3rem;
}

.site-main > div:nth-child(6) h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* Pricing grid */
.site-main > div:nth-child(6) > div:last-child {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-main > div:nth-child(6) > div:last-child > div {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.site-main > div:nth-child(6) > div:last-child > div:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.site-main > div:nth-child(6) > div:last-child > div h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #2c3e50;
}

.site-main > div:nth-child(6) > div:last-child > div > div:nth-child(2) {
    font-size: 3rem;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 0.5rem;
}

.site-main > div:nth-child(6) > div:last-child > div > div:nth-child(3) {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.site-main > div:nth-child(6) > div:last-child > div ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
    text-align: left;
}

.site-main > div:nth-child(6) > div:last-child > div ul li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    padding-left: 1.5rem;
}

.site-main > div:nth-child(6) > div:last-child > div ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

.site-main > div:nth-child(6) > div:last-child > div a {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.site-main > div:nth-child(6) > div:last-child > div a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

/* FAQ section (seventh div) */
.site-main > div:nth-child(7) {
    background: white;
    padding: 4rem 0;
}

.site-main > div:nth-child(7) > div:first-child {
    text-align: center;
    margin-bottom: 3rem;
}

.site-main > div:nth-child(7) h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
}

/* FAQ container */
.site-main > div:nth-child(7) > div:last-child {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-main > div:nth-child(7) > div:last-child > div {
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.site-main > div:nth-child(7) > div:last-child > div:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.site-main > div:nth-child(7) > div:last-child > div button {
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: #2c3e50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1.1rem;
}

.site-main > div:nth-child(7) > div:last-child > div button::after {
    content: "+";
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.site-main > div:nth-child(7) > div:last-child > div.active button::after {
    transform: rotate(45deg);
}

.site-main > div:nth-child(7) > div:last-child > div > div:last-child {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.site-main > div:nth-child(7) > div:last-child > div.active > div:last-child {
    padding: 0 1.5rem 1.5rem;
    max-height: 500px;
}

/* CTA section (eighth div) */
.site-main > div:nth-child(8) {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
}

.site-main > div:nth-child(8) h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.site-main > div:nth-child(8) p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.site-main > div:nth-child(8) > div:nth-child(3) {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 2rem;
    display: block;
}

.site-main > div:nth-child(8) > div:last-child {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.site-main > div:nth-child(8) > div:last-child a {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

.site-main > div:nth-child(8) > div:last-child a:first-child {
    background: white;
    color: #28a745;
}

.site-main > div:nth-child(8) > div:last-child a:first-child:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.site-main > div:nth-child(8) > div:last-child a:last-child {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.site-main > div:nth-child(8) > div:last-child a:last-child:hover {
    background: white;
    color: #28a745;
}

/* ===========================================
   11. UTILITIES
   =========================================== */

.text-center { text-align: center; }
.text-white { color: white; }
.bg-primary { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); }
.bg-white { background: white; }
.rounded { border-radius: 10px; }
.shadow { box-shadow: 0 5px 20px rgba(0,0,0,0.1); }

.mt-3 { margin-top: 3rem; }
.mb-3 { margin-bottom: 3rem; }
.py-3 { padding-top: 3rem; padding-bottom: 3rem; }
.px-2 { padding-left: 2rem; padding-right: 2rem; }

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

/* ============================================
   CLEAN MINIMAL TABLE DESIGN
   ============================================ */
.page-container table,
.entry-content table,
article table,
main table,
table {
    width: 100%;
    margin: 3rem 0;
    border-collapse: collapse;
    background: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

/* Clean Table Headers */
thead tr {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.page-container th,
.entry-content th,
article th,
main th,
th {
    padding: 1.25rem 1.5rem !important;
    background: #f9fafb !important;
    color: #374151 !important;
    font-weight: 600;
    text-transform: none;
    font-size: 0.875rem;
    letter-spacing: 0;
    border: none;
    text-align: left;
}

/* Simple Table Rows */
tbody tr {
    background: white;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

tbody tr:hover {
    background: #f9fafb;
}

/* Clean Table Cells */
.page-container td,
.entry-content td,
article td,
main td,
td {
    padding: 1rem 1.5rem !important;
    color: #4b5563 !important;
    font-size: 0.875rem;
    font-weight: 400;
    border: none !important;
}

td:first-child {
    font-weight: 500;
    color: #111827 !important;
}

/* Subtle alternating rows */
tbody tr:nth-child(even) {
    background: #fafafa;
}

/* ============================================
   GLOBAL LIST STYLES - Beautiful Lists Everywhere
   ============================================ */

/* Unordered Lists - Exclude dropdown menus */
.page-container ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu),
.entry-content ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu),
article ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu),
main ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.page-container ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li,
.entry-content ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li,
article ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li,
main ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.7;
    color: #4b5563;
    font-size: 0.9375rem;
}

/* Simple Bullet Points - Exclude dropdown menus */
.page-container ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:before,
.entry-content ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:before,
article ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:before,
main ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 6px;
    height: 6px;
    background: #28a745;
    border-radius: 50%;
}

/* Subtle Hover */
.page-container ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover,
.entry-content ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover,
article ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover,
main ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover {
    color: #28a745;
}

.page-container ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover:before,
.entry-content ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover:before,
article ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover:before,
main ul:not(.wp-block-navigation__submenu-container):not(.menu):not(.sub-menu) li:hover:before {
    background: #20c997;
}

/* Ordered Lists */
.page-container ol,
.entry-content ol,
article ol,
main ol {
    counter-reset: custom-counter;
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.page-container ol li,
.entry-content ol li,
article ol li,
main ol li {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 1rem;
    line-height: 1.8;
    color: #4a5568;
    counter-increment: custom-counter;
    transition: all 0.3s ease;
}

/* Custom Numbers with Gradient Background */
.page-container ol li:before,
.entry-content ol li:before,
article ol li:before,
main ol li:before {
    content: counter(custom-counter);
    position: absolute;
    left: 0;
    top: 2px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(118,75,162,0.3);
    animation: float 3s ease-in-out infinite;
}

/* Nested Lists */
ul ul,
ol ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
}

ul ul li:before {
    content: "▸";
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
}

/* Special List Styles */
.feature-list li:before {
    content: "★";
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.service-list li:before {
    content: "⚡";
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.pricing-list li:before {
    content: "€";
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* Definition Lists */
dl {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%);
    border-radius: 15px;
}

dt {
    font-weight: 600;
    color: #28a745;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

dd {
    margin-left: 2rem;
    margin-bottom: 1rem;
    color: #4a5568;
    line-height: 1.6;
}

/* Animations */
@keyframes pulse {
    0% {
        box-shadow: 0 3px 10px rgba(102,126,234,0.3);
    }
    50% {
        box-shadow: 0 3px 20px rgba(102,126,234,0.5);
    }
    100% {
        box-shadow: 0 3px 10px rgba(102,126,234,0.3);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

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

/* Responsive Tables */
@media (max-width: 768px) {
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 0.8rem;
    }
    
    /* Make tables scrollable on mobile */
    .table-wrapper,
    .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   PROCESS STEPS - Modern Hexagon Timeline Design
   ============================================ */
.process-steps,
.steps-container,
.timeline-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin: 4rem 0;
    padding: 2rem 0;
    position: relative;
    overflow: visible !important;
}

/* Connecting line */
.process-steps::after {
    content: '';
    position: absolute;
    top: 60px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #28a745 20%, 
        #20c997 50%, 
        #28a745 80%, 
        transparent 100%);
    z-index: 0;
}

.process-step,
.step-item,
.timeline-item {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    position: relative;
    padding: 4.5rem 1.5rem 2rem;
    background: white;
    border-radius: 0;
    clip-path: polygon(30px 0%, 100% 0%, calc(100% - 30px) 100%, 0% 100%);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    z-index: 1;
    margin-top: 10px;
}

/* Gradient accent bar at top */
.process-step::after,
.step-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.process-step:hover,
.step-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(102,126,234,0.2);
    background: linear-gradient(145deg, #ffffff 0%, #f5f7ff 100%);
}

/* Responsive for process steps */
@media (max-width: 768px) {
    .process-steps {
        flex-direction: column;
        align-items: center;
    }
    
    .process-steps::after {
        display: none;
    }
    
    .process-step,
    .step-item {
        min-width: 90%;
        max-width: 90%;
        clip-path: none;
        border-radius: 16px;
        margin-bottom: 2rem;
    }
}

/* Modern Floating Step Numbers */
.step-number,
.process-number,
.step-count,
.step-icon {
    position: absolute !important;
    top: 10px !important;
    left: 30px !important;
    transform: none !important;
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    border: 3px solid white !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    box-shadow: 0 5px 15px rgba(102,126,234,0.3) !important;
    z-index: 10 !important;
    overflow: visible !important;
}

/* Ensure process section doesn't clip numbers */
.process-section,
section:has(.process-steps),
div:has(.process-steps) {
    overflow: visible !important;
}

.page-container .process-steps {
    overflow: visible !important;
}

/* If it contains emoji or icon */
.step-icon img,
.step-number img,
.process-number img {
    width: 40px;
    height: 40px;
    filter: brightness(0) invert(1); /* Make images white */
}

/* Beautiful step titles */
.step-title,
.process-title,
.process-step h1,
.process-step h2,
.process-step h3,
.process-step h4,
.process-step h5,
.step-item h1,
.step-item h2,
.step-item h3,
.step-item h4,
.step-item h5 {
    color: #1a202c !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    margin-bottom: 1.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.5px;
    background: none !important;
    padding: 0 !important;
    transition: color 0.3s ease;
}

/* Elegant descriptions */
.step-description,
.process-description,
.process-step p,
.process-step span,
.process-step div:not(.step-icon):not(.step-number),
.step-item p,
.step-item span,
.step-item div:not(.step-icon):not(.step-number) {
    color: #4a5568 !important;
    line-height: 1.9 !important;
    font-size: 1.05rem !important;
    background: transparent !important;
    transition: color 0.3s ease;
}

/* Hover state colors */
.process-step:hover h1,
.process-step:hover h2,
.process-step:hover h3,
.process-step:hover h4,
.process-step:hover h5,
.step-item:hover h1,
.step-item:hover h2,
.step-item:hover h3,
.step-item:hover h4,
.step-item:hover h5 {
    color: #28a745 !important;
}

.process-step:hover p,
.process-step:hover span,
.step-item:hover p,
.step-item:hover span {
    color: #2d3748 !important;
}

/* Force all text inside to be dark */
.process-step *:not(.step-icon):not(.step-number),
.step-item *:not(.step-icon):not(.step-number) {
    color: #2d3748 !important;
    background: transparent !important;
}

/* Only white text in icon circles */
.step-icon *,
.step-number *,
.process-number * {
    color: #FFFFFF !important;
}

/* Add step numbers automatically if empty */
.process-steps .process-step:nth-child(1) .step-icon:empty::before,
.process-steps .process-step:nth-child(1) .step-number:empty::before {
    content: "1";
    color: #FFFFFF !important;
}

.process-steps .process-step:nth-child(2) .step-icon:empty::before,
.process-steps .process-step:nth-child(2) .step-number:empty::before {
    content: "2";
    color: #FFFFFF !important;
}

.process-steps .process-step:nth-child(3) .step-icon:empty::before,
.process-steps .process-step:nth-child(3) .step-number:empty::before {
    content: "3";
    color: #FFFFFF !important;
}

.process-steps .process-step:nth-child(4) .step-icon:empty::before,
.process-steps .process-step:nth-child(4) .step-number:empty::before {
    content: "4";
    color: #FFFFFF !important;
}

/* Add emoji support */
.step-emoji,
.process-emoji {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

/* Modern connecting line between steps */
@media (min-width: 768px) {
    .process-step:not(:last-child)::after,
    .step-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 35px;
        right: -2.5rem;
        width: 2.5rem;
        height: 2px;
        background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
        z-index: -1;
    }
}

/* Alternative card style with top gradient */
.process-step.card-style,
.step-item.card-style {
    padding-top: 4rem;
}

.process-step.card-style::before,
.step-item.card-style::before {
    height: 60px;
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 15px 15px 0 0;
}

/* Ensure contrast for different backgrounds */
.bg-dark .process-step,
.bg-dark .step-item,
.dark-mode .process-step,
.dark-mode .step-item {
    background: #FFFFFF !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .process-steps,
    div[class*="process"],
    div[class*="steps"] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .process-step::after,
    .step-item::after {
        display: none;
    }
}

/* ============================================
   FORMS - Beautiful Forms Everywhere
   ============================================ */
form,
.wpcf7-form,
.contact-form,
.wp-block-search__inside-wrapper {
    margin: 2rem 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 1rem 1.5rem;
    border: 2px solid transparent;
    border-radius: 50px;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #28a745 0%, #20c997 100%) border-box;
    font-size: 1rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

textarea {
    border-radius: 20px;
    min-height: 120px;
    resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
    transform: translateY(-2px);
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ============================================
   BUTTONS - Beautiful Buttons Everywhere
   ============================================ */
button,
input[type="submit"],
input[type="button"],
.button,
.btn,
.wp-block-button__link,
.wpcf7-submit {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white !important;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(102,126,234,0.3);
    position: relative;
    overflow: hidden;
}

button:before,
.button:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

button:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(102,126,234,0.4);
}

button:hover:before,
.button:hover:before {
    width: 300px;
    height: 300px;
}

/* Secondary Button Style */
.button-secondary,
.btn-secondary {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

/* Outline Button Style */
.button-outline,
.btn-outline {
    background: white !important;
    color: #000000 !important;
    border: 2px solid #28a745 !important;
    box-shadow: none;
}

.button-outline:hover,
.btn-outline:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    border-color: transparent !important;
}

/* ============================================
   CARDS - Beautiful Cards Everywhere
   ============================================ */
.card,
.wp-block-group,
.entry-card,
article.type-post,
article.type-page,
div[class*="card"] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover,
div[class*="card"]:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(102,126,234,0.2);
}

.card-header,
.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.card-body,
.card-content {
    color: #666;
    line-height: 1.6;
}

.card-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

/* ============================================
   BADGES & TAGS - Beautiful Labels Everywhere
   ============================================ */
.badge,
.tag,
.label,
span[class*="badge"],
span[class*="tag"] {
    display: inline-block;
    padding: 0.3rem 1rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.2rem;
    transition: all 0.3s ease;
}

.badge:hover,
.tag:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(102,126,234,0.4);
}

.badge-success,
.tag-success {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

.badge-warning,
.tag-warning {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.badge-danger,
.tag-danger {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
}

/* ============================================
   ALERTS & NOTICES - Beautiful Notifications
   ============================================ */
.alert,
.notice,
.message,
.wp-block-quote,
div[class*="alert"],
div[class*="notice"] {
    padding: 1.5rem;
    border-radius: 15px;
    margin: 2rem 0;
    position: relative;
    border-left: 5px solid;
    animation: slideInLeft 0.5s ease;
}

.alert-info,
.notice-info {
    background: linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(118,75,162,0.1) 100%);
    border-left-color: #28a745;
}

.alert-success,
.notice-success {
    background: linear-gradient(135deg, rgba(72,187,120,0.1) 0%, rgba(56,161,105,0.1) 100%);
    border-left-color: #48bb78;
}

.alert-warning,
.notice-warning {
    background: linear-gradient(135deg, rgba(246,211,101,0.1) 0%, rgba(253,160,133,0.1) 100%);
    border-left-color: #f6d365;
}

.alert-danger,
.notice-danger {
    background: linear-gradient(135deg, rgba(245,101,101,0.1) 0%, rgba(229,62,62,0.1) 100%);
    border-left-color: #f56565;
}

/* ============================================
   BLOCKQUOTES - Beautiful Quotes
   ============================================ */
blockquote,
.wp-block-quote {
    position: relative;
    padding: 2rem 2rem 2rem 3.5rem;
    background: linear-gradient(135deg, rgba(102,126,234,0.05) 0%, rgba(118,75,162,0.05) 100%);
    border-left: 4px solid #28a745;
    border-radius: 10px;
    font-style: italic;
    color: #4a5568;
    margin: 2rem 0;
}

blockquote:before {
    content: """;
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 3rem;
    color: #28a745;
    font-weight: bold;
    line-height: 1;
}

/* ============================================
   ANIMATIONS - Reusable Animations
   ============================================ */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   HERO BUTTONS TEXT COLOR FIX - ALL PAGES
   ============================================ */

/* Fix ALL white buttons in hero sections to have blue text */
.hero-gradient a[style*="background: white"],
.hero-gradient a[style*="background:#fff"],
.hero-gradient a[style*="background:#ffffff"],
.hero-gradient a[style*="background: #fff"],
.hero-gradient a[style*="background: #ffffff"],
.hero-section a[style*="background: white"],
.hero-section a[style*="background:#fff"],
.hero-section a[style*="background:#ffffff"],
.hero-section a[style*="background: #fff"],
.hero-section a[style*="background: #ffffff"],
.hero-gradient .hero-buttons a[style*="background: white"],
.hero-section .hero-buttons a[style*="background: white"] {
    color: #28a745 !important;
}

/* All CTA buttons with white background should have blue text */
.hero-gradient .cta-button:not([style*="background: transparent"]),
.hero-section .cta-button:not([style*="background: transparent"]),
.hero-gradient a.cta-button:not([style*="background: transparent"]),
.hero-section a.cta-button:not([style*="background: transparent"]),
.hero-gradient .btn-white,
.hero-section .btn-white {
    background: white !important;
    color: #28a745 !important;
}

/* Phone and devis links in hero */
.hero-gradient a[href*="tel"],
.hero-section a[href*="tel"],
.hero-gradient a[href*="devis"],
.hero-section a[href*="devis"],
.hero-gradient a[href*="contact"],
.hero-section a[href*="contact"] {
    color: #28a745 !important;
}

/* Only transparent buttons keep white text */
.hero-gradient a[style*="background: transparent"],
.hero-section a[style*="background: transparent"],
.hero-gradient .btn-outline[style*="background: transparent"],
.hero-section .btn-outline[style*="background: transparent"] {
    background: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

/* ============================================
   RESPONSIVE - Mobile Adjustments
   ============================================ */
@media (max-width: 768px) {
    .process-steps {
        flex-direction: column;
    }
    
    .process-step {
        min-width: 100%;
    }
    
    .process-steps-connected:before {
        display: none;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    button,
    .button {
        padding: 0.8rem 2rem;
        font-size: 0.95rem;
    }
}

/* FINAL OVERRIDE: Ensure btn-outline has black text */
.btn-outline,
a.btn-outline,
.button-outline,
a.button-outline,
button.btn-outline,
input.btn-outline {
    color: #000000 !important;
    background: #ffffff !important;
    border: 2px solid #28a745 !important;
}

.btn-outline:hover,
a.btn-outline:hover,
.button-outline:hover,
a.button-outline:hover,
button.btn-outline:hover,
input.btn-outline:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border-color: transparent !important;
}

/* Ensure black text in all contexts */
.hero-section .btn-outline,
.page-content .btn-outline,
.cta-section .btn-outline,
.hero-cta .btn-outline,
.entry-content .btn-outline {
    color: #000000 !important;
}


/* CRITICAL FIX: Force black text on btn-outline in ALL contexts */
.btn.btn-outline,
a.btn.btn-outline,
.btn-outline,
a.btn-outline,
button.btn-outline,
.hero-section .btn-outline,
.hero-gradient .btn-outline,
.hero-cta .btn-outline,
.hero-section a.btn-outline,
.hero-gradient a.btn-outline,
.hero-cta a.btn-outline {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
    text-decoration: none !important;
}

.btn.btn-outline:hover,
a.btn.btn-outline:hover,
.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover,
.hero-section .btn-outline:hover,
.hero-gradient .btn-outline:hover,
.hero-cta .btn-outline:hover,
.hero-section a.btn-outline:hover,
.hero-gradient a.btn-outline:hover,
.hero-cta a.btn-outline:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}


/* ============================================
   CRITICAL BUTTON VISIBILITY FIXES
   Ensure all button text is visible
   ============================================ */

/* AGGRESSIVE FIX: Force ALL anchor texts containing phone numbers to be white on gradient backgrounds */
a[href^="tel"],
a[href*="tel:"],
a:contains("06-98-35-43-98"),
a:contains("Appel"),
*[style*="background: linear-gradient"] a,
*[style*="background-image: linear-gradient"] a,
*[style*="gradient"] a {
    color: white !important;
}

/* UNIVERSAL FIX: All buttons on gradient/colored backgrounds need white text */
.hero-section a,
.hero-gradient a,
.hero-section .cta-button,
.hero-gradient .cta-button,
.gradient-bg a,
.gradient-bg .cta-button,
.cta-section a,
.cta-section .cta-button,
[style*="background: linear-gradient"] a,
[style*="background: linear-gradient"] .cta-button,
[style*="background-image: linear-gradient"] a,
[style*="background-image: linear-gradient"] .cta-button,
.services-section a,
.services-section .cta-button {
    color: white !important;
}

/* Buttons with inline style white background need blue text */
a[style*="background: white"],
a[style*="background:#fff"],
a[style*="background:#ffffff"],
a[style*="background: #fff"],
a[style*="background: #ffffff"],
.cta-button[style*="background: white"],
.cta-button[style*="background:#fff"],
.cta-button[style*="background:#ffffff"] {
    color: #28a745 !important;
}

/* Specific button classes on gradient backgrounds */
.hero-section .cta-phone,
.hero-gradient .cta-phone,
.hero-section .cta-emergency,
.hero-gradient .cta-emergency,
.gradient-bg .cta-phone,
.gradient-bg .cta-emergency,
.services-section .cta-phone,
.services-section .cta-emergency {
    background: white !important;
    color: #2c3e50 !important;
}

/* Secondary/transparent buttons on gradient backgrounds */
.hero-section .cta-secondary,
.hero-gradient .cta-secondary,
.gradient-bg .cta-secondary,
.services-section .cta-secondary {
    background: transparent !important;
    color: white !important;
    border: 2px solid white !important;
}

/* ULTIMATE FIX: All links/buttons in sections with gradient backgrounds */
section[style*="background: linear-gradient"] a,
section[style*="background-image: linear-gradient"] a,
div[style*="background: linear-gradient"] a,
div[style*="background-image: linear-gradient"] a,
.gradient-section a,
.colored-section a,
.services-section[style*="gradient"] a,
.cta-section[style*="gradient"] a {
    color: white !important;
}

/* Ensure buttons in service cards are visible */
.services-section a.cta-button,
.services-section .service-card a,
.service-card .cta-button,
.service-card a[href^="tel"],
.service-card a[href*="devis"] {
    color: white !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Hover states for better visibility */
section[style*="gradient"] a:hover,
.services-section a:hover,
.gradient-section a:hover {
    color: white !important;
    opacity: 0.95;
    text-decoration: underline;
}

/* White buttons must have dark text */
.btn-white,
a.btn-white,
button.btn-white,
.hero-section .btn-white,
.hero-gradient .btn-white,
.hero-cta .btn-white {
    background: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #28a745 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.btn-white:hover,
a.btn-white:hover,
button.btn-white:hover,
.hero-section .btn-white:hover,
.hero-gradient .btn-white:hover,
.hero-cta .btn-white:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Secondary buttons on colored backgrounds */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #ffffff !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Ensure all buttons have readable text */
.btn,
a.btn,
button.btn,
[class*='btn-'] {
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Fix any button with white background to have dark text */
a[style*='background: white'],
a[style*='background:#fff'],
a[style*='background:#ffffff'],
a[style*='background: #fff'],
a[style*='background: #ffffff'],
.btn[style*='background: white'],
.btn[style*='background:#fff'],
.btn[style*='background:#ffffff'] {
    color: #333333 !important;
}

/* Specific fix for buttons that might have inline styles */
.hero-section a[href*='tel'],
.hero-gradient a[href*='tel'] {
    color: #ffffff !important;
}

.hero-section a:not([href*='tel']),
.hero-gradient a:not([href*='tel']) {
    /* Ensure non-phone buttons have proper contrast */
}

/* Make sure button text is never the same color as background */
.btn-primary {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
}

/* Override any problematic inline styles */
[class*='btn-'][style*='color: white'][style*='background: white'],
[class*='btn-'][style*='color:#fff'][style*='background:#fff'],
[class*='btn-'][style*='color: #fff'][style*='background: #fff'] {
    color: #333333 !important;
}
/* ============================================
   EMERGENCY FIX FOR BROKEN BUTTONS
   ============================================ */

/* Fix ALL button styles - OVERRIDE EVERYTHING */
.btn,
a.btn,
button.btn,
.btn-primary,
.btn-secondary,
.btn-white,
.btn-outline,
[class*='btn-'],
a[class*='btn-'],
.hero-section a[class*='btn'],
.hero-gradient a[class*='btn'],
.hero-cta a[class*='btn'] {
    /* Reset all button styles */
    display: inline-block !important;
    padding: 15px 35px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

/* Primary button - gradient background */
.btn-primary,
a.btn-primary,
.hero-section .btn-primary,
.hero-gradient .btn-primary {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border: 2px solid transparent !important;
}

.btn-primary:hover,
a.btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important;
    color: #ffffff !important;
}

/* White/Secondary buttons - MUST have dark text */
.btn-white,
a.btn-white,
.btn-secondary,
a.btn-secondary,
.hero-section .btn-white,
.hero-gradient .btn-white,
.hero-section .btn-secondary,
.hero-gradient .btn-secondary {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #28a745 !important;
}

.btn-white:hover,
a.btn-white:hover,
.btn-secondary:hover,
a.btn-secondary:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
}

/* Outline buttons - white bg with black text */
.btn-outline,
a.btn-outline,
.hero-section .btn-outline,
.hero-gradient .btn-outline {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
}

.btn-outline:hover,
a.btn-outline:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* Fix phone buttons specifically */
a[href^="tel:"],
.btn[href^="tel:"],
.btn-primary[href^="tel:"] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

/* Ensure button text is ALWAYS visible */
.hero-section a,
.hero-gradient a,
.hero-cta a {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force text color for any white background button */
*[style*="background: white"] a,
*[style*="background:#fff"] a,
*[style*="background:#ffffff"] a,
*[style*="background: #fff"] a,
*[style*="background: #ffffff"] a {
    color: #000000 !important;
}

/* Emergency override for invisible text */
a[style*="color: white"][style*="background: white"],
a[style*="color:#fff"][style*="background:#fff"],
a[style*="color: #fff"][style*="background: #fff"],
a[style*="color:#ffffff"][style*="background:#ffffff"] {
    color: #000000 !important;
}

/* Fix button containers */
.hero-buttons,
.hero-cta,
.cta-buttons {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-top: 30px !important;
}

/* Ensure emojis in buttons display properly */
.btn .emoji,
.btn span,
a[class*='btn'] .emoji,
a[class*='btn'] span {
    display: inline !important;
    vertical-align: middle !important;
}

/* Fix specific button issues on Zones page */
.zones-hero .btn,
.zones-hero a[class*='btn'] {
    min-width: 200px !important;
    padding: 15px 30px !important;
}

/* CRITICAL: Ensure text is never hidden */
.btn:not(:empty),
a[class*='btn']:not(:empty) {
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix any button that only shows an icon */
a[class*='btn']:has(span):has(img),
a[class*='btn']:has(.emoji):not(:has(text)) {
    &::after {
        content: " Appeler";
        color: inherit;
    }
}
/* ============================================
   ZONES INTERVENTION PAGE STYLES
   ============================================ */

/* Zone Page Specific Styles */
.zones-map-container {
    background: #f8f9fa;
    padding: 60px 0;
    margin: 40px 0;
}

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

.map-wrapper {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

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

/* Statistics Section - Flexbox 2 per row */
.coverage-stats {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.stat-box {
    background: #f8f9fa !important;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    flex: 0 1 calc(50% - 15px);
    min-width: 250px;
}

/* Responsive - Stack on mobile */
@media (max-width: 600px) {
    .stat-box {
        flex: 0 1 100%;
    }
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.stat-number,
.stat-box .stat-number,
.coverage-stats .stat-number,
div.stat-number {
    font-size: 3rem !important;
    font-weight: bold !important;
    color: #28a745 !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.stat-label,
.stat-box .stat-label,
.coverage-stats .stat-label,
div.stat-label {
    color: #2c3e50 !important;
    font-size: 1.1rem !important;
    display: block !important;
    font-weight: 600 !important;
}

/* Autres Communes Desservies Section */
.communes-section {
    padding: 60px 0;
    background: #f8f9fa;
}

.communes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.commune-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.commune-box h4,
section h4[style*="color"] {
    color: #1a1a1a !important;
    margin-bottom: 15px;
    font-weight: 700 !important;
    font-size: 1.3rem !important;
}

.commune-box p,
section p[style*="color"] {
    color: #2c2c2c !important;
    line-height: 1.8 !important;
    font-weight: 500 !important;
    font-size: 1.05rem !important;
}

/* Force dark text in Autres Communes section */
section:has(h2:contains("Autres Communes")) h4,
[style*="background: #f8f9fa"] h4 {
    color: #1a1a1a !important;
}

section:has(h2:contains("Autres Communes")) p,
[style*="background: #f8f9fa"] p {
    color: #2c2c2c !important;
}

.zone-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 2px solid #e0e0e0;
    cursor: pointer;
}

.zone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border-color: #28a745;
}

.zone-card h3 {
    color: #2c3e50;
    font-size: 1.4rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zone-card .zone-icon {
    font-size: 1.8rem;
}

.zone-card p {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.zone-card .zone-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.zone-card .zone-features li {
    padding: 8px 0;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.zone-card .zone-features li:before {
    content: "✓";
    color: #27ae60;
    font-weight: bold;
}

.zone-card .zone-btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 12px 25px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
}

.zone-card .zone-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102,126,234,0.4);
    color: white !important;
}

.map-visual {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 15px;
    padding: 40px;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
}

.map-visual::before {
    content: "🗺️";
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.1;
}

.coverage-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

.stat-box {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.stat-box .stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: #28a745;
    margin-bottom: 10px;
}

.stat-box .stat-label {
    color: #666;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .zones-grid {
        grid-template-columns: 1fr;
    }
    
    .coverage-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .map-wrapper {
        padding: 20px;
    }
}

/* ============================================
   ULTIMATE AGGRESSIVE FIX FOR ANCHOR TEXT COLOR
   This MUST be at the END of the file for highest priority
   ============================================ */

/* SPECIFIC FIX FOR HERO-SECTION CLASS - ONLY WITH GRADIENTS */
.hero-gradient,
.hero-gradient span,
.hero-gradient p,
.hero-gradient div,
.hero-gradient h1,
.hero-gradient h2,
.hero-gradient h3,
.hero-section[style*="gradient"],
.hero-section[style*="gradient"] span,
.hero-section[style*="gradient"] p,
.hero-section[style*="gradient"] div,
.hero-section[style*="gradient"] h1,
.hero-section[style*="gradient"] h2,
.hero-section[style*="gradient"] h3 {
    color: white !important;
}

/* Hero sections WITHOUT gradients should have dark text */
.hero-section:not(.hero-gradient):not([style*="gradient"]) p,
.hero-section:not(.hero-gradient):not([style*="gradient"]) span {
    color: #666 !important;
}
.hero-section:not(.hero-gradient):not([style*="gradient"]) h1,
.hero-section:not(.hero-gradient):not([style*="gradient"]) h2,
.hero-section:not(.hero-gradient):not([style*="gradient"]) h3 {
    color: #2c3e50 !important;
}

/* Hero section links should be white by default (except white background buttons) */
.hero-section a:not([style*="background: white"]):not(.cta-phone):not(.cta-emergency),
.hero-content a:not([style*="background: white"]):not(.cta-phone):not(.cta-emergency) {
    color: white !important;
}

/* BUT buttons with white background need blue/dark text */
.hero-section a[style*="background: white"],
.hero-section a[style*="background:#fff"],
.hero-section a[style*="background:#ffffff"],
.hero-section a[style*="background: #fff"],
.hero-section a[style*="background: #ffffff"],
.hero-section a[style*="background: rgb(255"],
.hero-content a[style*="background: white"],
.hero-content a[style*="background:#fff"],
.hero-content a[style*="background:#ffffff"],
.hero-content .cta-button[style*="background: white"],
.hero-content .cta-phone,
.hero-section .cta-phone,
.hero-section .cta-emergency[style*="background: white"],
.hero-content .cta-emergency[style*="background: white"] {
    color: #2c3e50 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Keep white buttons with blue text - NO HOVER EFFECTS */
.hero-section a[style*="background: white"]:hover,
.hero-section a[style*="background:#fff"]:hover,
.hero-section a[style*="background:#ffffff"]:hover,
.hero-content a[style*="background: white"]:hover,
.hero-content a[style*="background:#fff"]:hover,
.hero-content .cta-phone:hover,
.hero-section .cta-phone:hover {
    background: white !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
}

/* Even more specific for hero-section links */
.hero-section a[href],
.hero-section a[href^="tel"],
.hero-section a[href*="tel:"],
.hero-section a[href*="0698354398"],
.hero-section a[href*="06-98-35-43-98"] {
    color: white !important;
    text-decoration: none !important;
}

/* Force ALL links with phone numbers to be white on gradient backgrounds */
body * a[href^="tel"],
body * a[href*="tel:"],
body * a[href*="0698354398"],
body * a[href*="06-98-35-43-98"] {
    color: white !important;
}

/* Any link inside an element with gradient background MUST be white (except white buttons) */
*[style*="gradient"] a:not([style*="background: white"]),
*[style*="gradient"] * a:not([style*="background: white"]),
*[class*="gradient"] a:not([style*="background: white"]),
*[class*="gradient"] * a:not([style*="background: white"]),
.hero-section * a:not([style*="background: white"]):not(.cta-phone),
.hero-gradient * a:not([style*="background: white"]):not(.cta-phone),
.services-section * a:not([style*="background: white"]),
.cta-section * a:not([style*="background: white"]) {
    color: white !important;
}

/* Specific fix for the exact anchor text you mentioned */
a:contains("Appel Immédiat"),
a:contains("Appel Direct"),
a:contains("Contact Direct"),
a:contains("06-98-35-43-98"),
a:contains("📱"),
a:contains("📞") {
    color: white !important;
}

/* Nuclear option: ANY anchor inside sections with backgrounds */
section[style*="background"] a,
div[style*="background"] a,
section[class*="hero"] a,
section[class*="service"] a,
section[class*="cta"] a {
    color: white !important;
}

/* Except for white background buttons which need blue text */
a[style*="background: white"],
a[style*="background:#fff"],
a[style*="background:#ffffff"],
a[style*="background: rgb(255"],
.btn-white,
.cta-white,
.hero-section .cta-phone,
.hero-content .cta-phone,
.hero-section .cta-emergency,
.hero-content .cta-emergency {
    color: #2c3e50 !important;
    transition: all 0.3s ease !important;
}

/* Force blue text on white buttons even in hero sections */
.hero-section a[style*="background: white"]:not(:hover),
.hero-content a[style*="background: white"]:not(:hover),
.hero-section .cta-phone:not(:hover),
.hero-content .cta-phone:not(:hover) {
    color: #2c3e50 !important;
    background: white !important;
}

/* NO HOVER EFFECTS for white background buttons - keep them simple */
/* FORCE white buttons to ALWAYS have blue text, both normal and hover */
.hero-section a[style*="background: white"],
.hero-section a[style*="background: white"]:hover,
.hero-content a[style*="background: white"],
.hero-content a[style*="background: white"]:hover,
.hero-section .cta-phone,
.hero-section .cta-phone:hover,
.hero-content .cta-phone,
.hero-content .cta-phone:hover,
a[style*="background: white"],
a[style*="background: white"]:hover,
a[style*="background:#fff"],
a[style*="background:#fff"]:hover,
a[style*="background:#ffffff"],
a[style*="background:#ffffff"]:hover,
.btn-white,
.btn-white:hover,
.cta-white,
.cta-white:hover,
.cta-phone,
.cta-phone:hover,
.cta-emergency,
.cta-emergency:hover {
    background: white !important;
    color: #2c3e50 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ============================================
   FINAL OVERRIDE - NO HOVER EFFECTS ON WHITE BUTTONS
   This MUST be the LAST rule in the file!
   ============================================ */

/* Override ALL possible hover rules for white buttons */
body .hero-section a[style*="background: white"]:hover,
body .hero-section a[style*="background:#fff"]:hover,
body .hero-section a[style*="background:#ffffff"]:hover,
body .hero-content a[style*="background: white"]:hover,
body .hero-content a[style*="background:#fff"]:hover,
body .hero-section .cta-button:hover,
body .hero-content .cta-button:hover,
body .hero-section .cta-phone:hover,
body .hero-content .cta-phone:hover,
body .hero-section .cta-emergency:hover,
body .hero-content .cta-emergency:hover,
body .hero-buttons a:hover,
body .hero-buttons a:first-child:hover,
body .hero-buttons a:nth-child(2):hover,
body a.cta-button:hover,
body .cta-button:hover,
body .cta-button.cta-white:hover,
body .btn-white:hover,
body .cta-white:hover,
body * .hero-section a:hover,
body * .hero-content a:hover {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    color: #28a745 !important;
    transform: none !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

/* Specifically for buttons with white inline styles */
body a[style*="background: white"]:hover,
body a[style*="background:#fff"]:hover,
body a[style*="background:#ffffff"]:hover,
body a[style*="background: rgb(255"]:hover,
body *[style*="background: white"] a:hover {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    color: #28a745 !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}


/* ULTIMATE FIX: Force ALL phone buttons to have dark text on white background */
.header-phone a[href*="tel"],
.header-phone a[href*="0698354398"],
.site-header a[href*="tel"],
.site-header a[href*="0698354398"],
a[href="tel:0698354398"] {
    background: white !important;
    color: #2c3e50 !important;
    font-weight: bold !important;
}

.header-phone a[href*="tel"]:hover,
.header-phone a[href*="0698354398"]:hover,
.site-header a[href*="tel"]:hover,
.site-header a[href*="0698354398"]:hover,
a[href="tel:0698354398"]:hover {
    background: #f0f0f0 !important;
    color: #000 !important;
}

/* ULTIMATE HERO BUTTON FIX - Force dark text on white background buttons in hero sections */
.services-hero-section .cta-button-primary,
.services-hero-section a[href*="tel"],
.hero-section .cta-button-primary,
.hero-section a[href*="tel"],
.hero-gradient .cta-button-primary,
.hero-gradient a[href*="tel"],
.article-hero .cta-button-primary,
.article-hero a[href*="tel"],
.article-hero-v2 .cta-button-primary,
.article-hero-v2 a[href*="tel"],
.article-hero-v3 .cta-button-primary,
.article-hero-v3 a[href*="tel"],
.tarifs-hero .cta-button-primary,
.tarifs-hero a[href*="tel"],
.urgence-hero .cta-button-primary,
.urgence-hero a[href*="tel"],
a.cta-button-primary[href*="tel"] {
    background: white !important;
    color: #2c3e50 !important;
    font-weight: bold !important;
}

/* Hover states */
.services-hero-section .cta-button-primary:hover,
.services-hero-section a[href*="tel"]:hover,
.hero-section .cta-button-primary:hover,
.hero-section a[href*="tel"]:hover,
.hero-gradient .cta-button-primary:hover,
.hero-gradient a[href*="tel"]:hover,
.article-hero .cta-button-primary:hover,
.article-hero a[href*="tel"]:hover,
.article-hero-v2 .cta-button-primary:hover,
.article-hero-v2 a[href*="tel"]:hover,
.article-hero-v3 .cta-button-primary:hover,
.article-hero-v3 a[href*="tel"]:hover,
.tarifs-hero .cta-button-primary:hover,
.tarifs-hero a[href*="tel"]:hover,
.urgence-hero .cta-button-primary:hover,
.urgence-hero a[href*="tel"]:hover,
a.cta-button-primary[href*="tel"]:hover {
    background: #f0f0f0 !important;
    color: #000 !important;
    font-weight: bold !important;
}


/* ===========================================
   CONTACT PAGE STYLES
   Professional & Centered Design
   =========================================== */

/* Contact Hero Section */
.contact-hero-section {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 100px 0;
    text-align: center;
    color: white;
}

.contact-hero-section h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.contact-hero-section .hero-subtitle {
    font-size: 1.3rem;
    opacity: 0.95;
}

/* Contact Info Section - Centered Cards */
.contact-info-section {
    padding: 80px 20px;
    background: #f8f9fa;
}

.contact-info-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin: 0 auto;
}

.contact-card {
    background: white;
    padding: 35px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    flex: 1 1 280px;
    max-width: 320px;
    min-width: 260px;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.contact-card.urgent {
    border: 2px solid #ff6b6b;
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
}

.contact-card .contact-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.contact-card h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.contact-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
}

.contact-card .phone-primary a {
    font-size: 1.8rem;
    color: #ff6b6b !important;
    font-weight: bold;
    text-decoration: none;
}

.contact-card .phone-primary a:hover {
    color: #ff4444 !important;
}

.contact-card .map-link {
    color: #28a745;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
    transition: color 0.3s;
}

.contact-card .map-link:hover {
    color: #20c997;
}

.contact-card .availability {
    color: #28a745;
    font-weight: 600;
    margin-top: 10px;
}

.contact-card .urgent-badge {
    display: inline-block;
    background: #ff6b6b;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    margin-top: 10px;
}

.contact-card .hours-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.contact-card .hours-list li {
    padding: 5px 0;
    color: #666;
}

.contact-card .urgent-hours {
    color: #ff6b6b !important;
    font-weight: bold;
    margin-top: 10px;
}

.contact-card .response-time {
    font-size: 0.9rem;
    color: #28a745;
    margin-top: 5px;
}

/* Contact Form Section */
.contact-form-section {
    padding: 80px 20px;
    background: white;
}

.contact-form-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-form-section h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 15px;
}

.contact-form-section .form-subtitle {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.contact-form-section .form-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Map Section */
.map-section {
    padding: 80px 20px;
    background: #f8f9fa;
}

.map-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.map-section h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 15px;
}

.map-section .section-subtitle {
    text-align: center;
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 50px;
}

.intervention-zones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 50px auto 0;
}

.zone-list,
.zone-features {
    background: white;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    flex: 1 1 400px;
    max-width: 480px;
    min-width: 350px;
}

.zone-list h3,
.zone-features h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 20px;
}

.zone-list ul,
.zone-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zone-list li,
.zone-features li {
    padding: 8px 0;
    color: #666;
    position: relative;
    padding-left: 25px;
}

.zone-list li:before,
.zone-features li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: bold;
}

/* Contact CTA Section */
.contact-cta-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    text-align: center;
}

.contact-cta-section .container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-cta-section h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}

.contact-cta-section p {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.9);
    margin-bottom: 40px;
}

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

.contact-cta-section .cta-phone {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: white;
    color: #2c3e50 !important;
    padding: 20px 40px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.3s;
}

.contact-cta-section .cta-phone:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.contact-cta-section .cta-phone .phone-icon {
    font-size: 2rem;
}

.contact-cta-section .cta-phone strong {
    display: block;
    font-size: 1.5rem;
    color: #2c3e50;
}

.contact-cta-section .cta-phone span {
    font-size: 0.9rem;
    opacity: 0.8;
    color: #2c3e50;
}

/* Responsive Design for Contact Page */
@media (max-width: 768px) {
    .contact-hero-section h1 {
        font-size: 2rem;
    }
    
    .contact-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .intervention-zones {
        gap: 30px;
    }
    
    .zone-list,
    .zone-features {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .contact-cta-section h2 {
        font-size: 1.8rem;
    }
    
    .contact-cta-section .cta-phone {
        padding: 15px 30px;
    }
}

/* ============================================
   CONSOLIDATED THEME STYLES FROM INDIVIDUAL FILES
   Moved from separate CSS files for better organization
   ============================================ */



/* ============================================
   HOMEPAGE HERO SECTION (from homepage-hero.css)
   ============================================ */

/* Homepage Hero Section Spacing */

/* Hero cover section spacing */
.wp-block-cover .wp-block-cover__inner-container {
    padding: 60px 20px !important;
}

/* Hero title spacing */
.wp-block-cover h1,
.wp-block-cover .has-text-align-center {
    margin-bottom: 30px !important;
    line-height: 1.4 !important;
}

/* Hero subtitle/paragraph spacing */
.wp-block-cover p {
    margin-bottom: 40px !important;
    line-height: 1.6 !important;
}

/* Space between buttons */
.wp-block-cover .wp-block-buttons {
    gap: 20px !important;
    margin-top: 40px !important;
}

/* Individual button spacing */
.wp-block-cover .wp-block-button {
    margin: 10px !important;
}

/* Responsive spacing for tablets */
@media (max-width: 991px) {
    .wp-block-cover .wp-block-cover__inner-container {
        padding: 40px 20px !important;
    }
    
    .wp-block-cover h1 {
        font-size: 42px !important;
        margin-bottom: 25px !important;
    }
    
    .wp-block-cover p {
        font-size: 20px !important;
        margin-bottom: 30px !important;
    }
    
    .wp-block-cover .wp-block-buttons {
        margin-top: 30px !important;
    }
}

/* Responsive spacing for mobile */
@media (max-width: 576px) {
    .wp-block-cover .wp-block-cover__inner-container {
        padding: 30px 15px !important;
    }
    
    .wp-block-cover h1 {
        font-size: 32px !important;
        margin-bottom: 20px !important;
        line-height: 1.3 !important;
    }
    
    .wp-block-cover p {
        font-size: 18px !important;
        margin-bottom: 25px !important;
        line-height: 1.5 !important;
    }
    
    .wp-block-cover .wp-block-buttons {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 25px !important;
    }
    
    .wp-block-cover .wp-block-button {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    .wp-block-cover .wp-block-button__link {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================
   HOMEPAGE SPECTACULAR LAYOUT (from homepage-spectacular.css)
   ============================================ */

/* ================================================
   HOMEPAGE SPECTACULAR DESIGN - WOW EFFECTS
================================================ */

/* Hero Section - Animated Gradient Background */
.hero-section-wow {
    position: relative;
    overflow: hidden;
    min-height: 100vh !important;
}

.hero-section-wow::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.3), transparent 50%),
                radial-gradient(circle at 40% 20%, rgba(255, 206, 84, 0.3), transparent 50%);
    animation: rotateGradient 30s linear infinite;
}

@keyframes rotateGradient {
    0% { transform: rotate(0deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1.5); }
}

/* Floating Particles Animation */
.hero-section-wow::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px, 100px 100px, 25px 25px;
    background-position: 0 0, 25px 25px, 12px 12px;
    animation: floatParticles 60s linear infinite;
}

@keyframes floatParticles {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-100vh) translateX(100px); }
}

/* Statistics Cards - Glassmorphism Effect */
.wp-block-group:has(.stat-number) {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.37),
        inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.wp-block-group:has(.stat-number):hover {
    transform: translateY(-10px) scale(1.05) !important;
    box-shadow: 
        0 15px 60px 0 rgba(31, 38, 135, 0.5),
        inset 0 0 30px rgba(255, 255, 255, 0.2) !important;
}

/* Service Cards - 3D Transform & Gradient Borders */
.service-card-wow {
    position: relative !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.1),
        0 2px 10px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform-style: preserve-3d !important;
    cursor: pointer !important;
}

.service-card-wow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #f093fb, #f5576c, #4facfe, #00f2fe, #f093fb);
    background-size: 400% 400%;
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: gradientShift 4s ease infinite;
}

.service-card-wow:hover::before {
    opacity: 1;
}

.service-card-wow:hover {
    transform: perspective(1000px) rotateY(10deg) translateZ(50px) !important;
    box-shadow: 
        -50px 50px 100px rgba(0, 0, 0, 0.2),
        0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Cards Layout - 2 per row */
.wp-block-columns:has(.service-card-wow) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

@media (max-width: 768px) {
    .wp-block-columns:has(.service-card-wow) {
        grid-template-columns: 1fr !important;
    }
}

/* Animated Gradient Text */
h1, h2 {
    background: linear-gradient(
        90deg,
        #28a745 0%,
        #20c997 20%,
        #f093fb 40%,
        #f5576c 60%,
        #28a745 80%,
        #20c997 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerText 3s linear infinite;
}

@keyframes shimmerText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Table Design - Modern & Interactive */
.nuisibles-comparison-table table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    background: transparent !important;
}

.nuisibles-comparison-table thead {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
}

.nuisibles-comparison-table thead th {
    padding: 20px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
}

.nuisibles-comparison-table tbody tr {
    background: white !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.nuisibles-comparison-table tbody tr:hover {
    transform: scale(1.02) translateX(10px) !important;
    box-shadow: 
        0 10px 40px rgba(102, 126, 234, 0.2),
        -5px 0 20px rgba(102, 126, 234, 0.1) !important;
    background: linear-gradient(90deg, #ffffff 0%, #f0f4ff 100%) !important;
}

.nuisibles-comparison-table tbody td {
    padding: 15px 20px !important;
    border: none !important;
    position: relative !important;
}

.nuisibles-comparison-table tbody td:first-child {
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* FAQ Accordion - Neumorphism Style */
.wp-block-details {
    background: #f0f4f8 !important;
    border-radius: 15px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: 
        8px 8px 15px rgba(174, 174, 192, 0.4),
        -8px -8px 15px rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
}

.wp-block-details:hover {
    box-shadow: 
        12px 12px 20px rgba(174, 174, 192, 0.5),
        -12px -12px 20px rgba(255, 255, 255, 0.8) !important;
}

.wp-block-details summary {
    padding: 20px 30px !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
    list-style: none !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.wp-block-details summary::before {
    content: '➕';
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    transition: transform 0.3s ease;
}

.wp-block-details[open] summary::before {
    content: '➖';
    transform: translateY(-50%) rotate(180deg);
}

.wp-block-details summary:hover {
    color: #28a745 !important;
    padding-left: 35px !important;
}

.wp-block-details[open] {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%) !important;
    box-shadow: 
        inset 5px 5px 10px rgba(174, 174, 192, 0.2),
        inset -5px -5px 10px rgba(255, 255, 255, 0.5) !important;
}

/* Process Timeline - Animated Steps */
.wp-block-group:has(h3:contains("Étape")) {
    position: relative !important;
    padding-left: 60px !important;
    margin-bottom: 40px !important;
}

.wp-block-group:has(h3:contains("Étape"))::before {
    content: attr(data-step);
    position: absolute;
    left: 0;
    top: 30px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 18px;
    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6); }
}

/* Testimonial Cards - Floating Effect */
.wp-block-group:has(.wp-block-quote) {
    animation: float 6s ease-in-out infinite !important;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* CTA Buttons - Neon Glow Effect */
.wp-block-button__link {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    transition: all 0.4s ease !important;
}

.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: -1;
}

.wp-block-button__link:hover::before {
    width: 300px;
    height: 300px;
}

.wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(102, 126, 234, 0.5) !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

/* Zone Cards - Map Pin Animation */
.wp-block-group:has(h3:contains("Marseille")) {
    position: relative !important;
    overflow: hidden !important;
}

.wp-block-group:has(h3:contains("Marseille"))::after {
    content: '📍';
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    animation: bounce 2s ease-in-out infinite;
}

/* Hover Lift Effect for All Cards */
.wp-block-group[style*="border-radius"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}

.wp-block-group[style*="border-radius"]:hover {
    transform: translateY(-8px) rotate(1deg) !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.15),
        0 10px 30px rgba(102, 126, 234, 0.2) !important;
}

/* Parallax Scrolling Effect */
.wp-block-cover {
    background-attachment: fixed !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Loading Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-block-group {
    animation: fadeInUp 0.8s ease-out;
}

/* Mobile Responsive Enhancements */
@media (max-width: 768px) {
    h1 { font-size: 36px !important; }
    h2 { font-size: 28px !important; }
    
    .wp-block-columns {
        display: block !important;
    }
    
    .wp-block-column {
        margin-bottom: 30px !important;
    }
    
    .service-card-wow:hover {
        transform: none !important;
    }
    
    .nuisibles-comparison-table {
        overflow-x: auto !important;
    }
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
}

/* Glow Effect for Important Elements */
.has-luminous-vivid-orange-background-color {
    animation: glow 2s ease-in-out infinite alternate !important;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px #ff6b35, 0 0 20px #ff6b35, 0 0 30px #ff6b35;
    }
    to {
        box-shadow: 0 0 20px #ff6b35, 0 0 30px #ff6b35, 0 0 40px #ff6b35;
    }
}

/* ============================================
   HOMEPAGE WOW EFFECTS (from homepage-wow.css)
   ============================================ */

/* Homepage WOW Effects - Animations Spectaculaires */

/* Animation Keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(5deg); }
    75% { transform: translateY(20px) rotate(-5deg); }
}

@keyframes pulse-glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(39, 174, 96, 0.3),
                    0 0 40px rgba(39, 174, 96, 0.2),
                    0 0 60px rgba(39, 174, 96, 0.1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(39, 174, 96, 0.5),
                    0 0 60px rgba(39, 174, 96, 0.3),
                    0 0 90px rgba(39, 174, 96, 0.2);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotate-in {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* Hero Section Enhanced */
.hero-section {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    /* Gradient removed - use .hero-gradient class for gradient backgrounds */
    background: transparent;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    background: linear-gradient(45deg, #fff, #f0f0f0, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer 3s ease-in-out infinite;
    text-shadow: 0 0 80px rgba(255,255,255,0.5);
}

@keyframes text-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Particle Effects */
.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: particle-float 20s infinite linear;
}

@keyframes particle-float {
    from {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateY(-100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Service Cards 3D */
.service-card {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    position: relative;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 20px;
    z-index: -1;
}

.service-card:hover {
    transform: rotateY(10deg) rotateX(10deg) scale(1.05);
}

.service-card:hover::before {
    opacity: 0.1;
}

.service-icon {
    font-size: 4rem;
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Stats Section Animations */
.stats-section {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.stat-number {
    font-size: 4rem;
    font-weight: 900;
    background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(240, 147, 251, 0.5));
}

/* Testimonials Carousel */
.testimonial-card {
    animation: fade-in-up 0.8s ease-out;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* CTA Section Effects */
.cta-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.cta-section::before {
    content: '';
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="white" opacity="0.3"/></svg>');
    background-size: 100px 100px;
    animation: pattern-drift 30s linear infinite;
}

@keyframes pattern-drift {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(360deg) scale(1.1); }
}

.cta-button {
    position: relative;
    padding: 20px 50px;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(45deg, #f093fb, #f5576c);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(240, 147, 251, 0.4);
}

/* Scroll Animations */
.wow-element {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wow-element.active {
    opacity: 1;
}

.wow-element.slide-left {
    transform: translateX(-100px);
}

.wow-element.slide-left.active {
    transform: translateX(0);
}

.wow-element.slide-right {
    transform: translateX(100px);
}

.wow-element.slide-right.active {
    transform: translateX(0);
}

.wow-element.zoom {
    transform: scale(0.5);
}

.wow-element.zoom.active {
    transform: scale(1);
}

.wow-element.rotate {
    transform: rotate(-180deg) scale(0.5);
}

.wow-element.rotate.active {
    transform: rotate(0) scale(1);
}

/* Mobile Responsive Animations */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .service-card:hover {
        transform: scale(1.02);
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .wow-element.slide-left,
    .wow-element.slide-right {
        transform: translateY(30px);
    }
    
    .wow-element.slide-left.active,
    .wow-element.slide-right.active {
        transform: translateY(0);
    }
}

/* Loading Animation */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s, visibility 0.5s;
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Section Transitions */
section {
    transition: all 0.3s ease;
}

/* Hover Effects for Links */
a {
    position: relative;
    transition: all 0.3s ease;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}

/* Background Patterns */
.pattern-dots {
    background-image: radial-gradient(circle, #27ae60 1px, transparent 1px);
    background-size: 20px 20px;
}

.pattern-grid {
    background-image: 
        linear-gradient(rgba(39, 174, 96, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39, 174, 96, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

.pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(39, 174, 96, 0.05) 10px,
        rgba(39, 174, 96, 0.05) 20px
    );
}

/* ============================================
   HOMEPAGE PERFECT LAYOUT (from homepage-perfect-layout.css)
   ============================================ */

/* ================================================
   PERFECT LAYOUT - 90% WIDTH + EQUAL HEIGHT CARDS
================================================ */

/* Global Container - 90% Width on Desktop */
.wp-block-group.alignfull > .wp-block-group__inner-container,
.wp-block-group.alignwide,
.wp-block-columns.alignwide,
.alignfull > *:not(.alignfull),
.container {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 1200px) {
    .wp-block-group.alignfull > .wp-block-group__inner-container,
    .wp-block-group.alignwide,
    .wp-block-columns.alignwide {
        max-width: 90% !important;
        width: 90% !important;
    }
}

/* Service Cards Grid - Equal Height + Smart Layout */
.wp-block-columns:has(.service-card-wow) {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
    align-items: stretch !important;
}

/* Make last card full width if alone */
.wp-block-columns:has(.service-card-wow) > .wp-block-column:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
}

/* Equal Height Cards */
.service-card-wow,
.wp-block-group[style*="border-radius"][style*="padding"] {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Move Reviews Outside Cards */
.service-card-wow + .wp-block-group[style*="background-color"],
.service-card-wow ~ .wp-block-group:has(p[style*="font-size:14px"]) {
    position: relative !important;
    margin-top: 20px !important;
    margin-bottom: 30px !important;
    width: calc(100% + 40px) !important;
    margin-left: -20px !important;
    padding: 20px 30px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-left: 4px solid #27ae60 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* Color Contrast Fixes for Readability */

/* Dark Backgrounds - White Text */
.has-background[style*="gradient"]:not([style*="rgb(255"]),
.has-background[style*="rgb(46"],
.has-background[style*="rgb(37"],
.has-background[style*="#1a1a1a"],
.has-background[style*="#2c3e50"] {
    color: #ffffff !important;
}

.has-background[style*="gradient"]:not([style*="rgb(255"]) h1,
.has-background[style*="gradient"]:not([style*="rgb(255"]) h2,
.has-background[style*="gradient"]:not([style*="rgb(255"]) h3,
.has-background[style*="gradient"]:not([style*="rgb(255"]) p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Light Backgrounds - Dark Text */
.has-background[style*="#f8f9fa"],
.has-background[style*="#ffffff"],
.has-background[style*="rgb(255"],
.has-background[style*="rgb(248"],
.has-background[style*="rgb(241"] {
    color: #2c3e50 !important;
}

.has-background[style*="#f8f9fa"] h2,
.has-background[style*="#f8f9fa"] h3,
.has-background[style*="#ffffff"] h2,
.has-background[style*="#ffffff"] h3 {
    color: #2c3e50 !important;
    text-shadow: none !important;
}

/* Fix Statistics Text Contrast */
.wp-block-group:has(.stat-number) p {
    color: #333333 !important;
    font-weight: 600 !important;
}

/* Fix Table Readability */
.nuisibles-comparison-table thead th {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}

.nuisibles-comparison-table tbody td {
    color: #2c3e50 !important;
    background: rgba(255,255,255,0.95) !important;
}

.nuisibles-comparison-table tbody tr:hover td {
    background: rgba(248,249,250,1) !important;
    color: #1a1a1a !important;
}

/* FAQ Text Contrast */
.wp-block-details summary {
    color: #2c3e50 !important;
    background: rgba(255,255,255,0.8) !important;
    font-weight: 600 !important;
}

.wp-block-details[open] {
    background: #ffffff !important;
}

.wp-block-details p {
    color: #495057 !important;
    line-height: 1.8 !important;
}

/* Button Contrast Enhancement */
.wp-block-button__link {
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.wp-block-button__link[style*="background-color:white"] {
    color: #2c3e50 !important;
    border: 2px solid #2c3e50 !important;
}

.wp-block-button__link[style*="background-color:white"]:hover {
    background-color: #2c3e50 !important;
    color: #ffffff !important;
}

/* Reviews Section Styling (Outside Cards) */
.testimonial-review-section {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    margin-top: 60px !important;
    padding-top: 40px !important;
    border-top: 2px solid #e9ecef !important;
}

.testimonial-review-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    padding: 25px !important;
    border-radius: 15px !important;
    border-left: 5px solid !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    position: relative !important;
}

.testimonial-review-box:nth-child(odd) {
    border-left-color: #27ae60 !important;
}

.testimonial-review-box:nth-child(even) {
    border-left-color: #ff6b35 !important;
}

.testimonial-review-box::before {
    content: '"' !important;
    position: absolute !important;
    top: -10px !important;
    left: 20px !important;
    font-size: 60px !important;
    color: rgba(39, 174, 96, 0.2) !important;
    font-weight: 900 !important;
}

/* Process Steps - Better Contrast */
.wp-block-group[style*="border-width:3px"] {
    background: #ffffff !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1) !important;
}

.wp-block-group[style*="border-width:3px"] h3 {
    color: #2c3e50 !important;
    font-weight: 700 !important;
}

.wp-block-group[style*="border-width:3px"] p {
    color: #495057 !important;
}

/* Zone Cards - Better Visibility */
.wp-block-group[style*="border-radius:15px"][style*="background-color:white"] {
    box-shadow: 0 15px 50px rgba(0,0,0,0.15) !important;
    border: 1px solid #e9ecef !important;
}

.wp-block-group[style*="border-radius:15px"] h3 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
}

/* Mobile Responsive - Full Width */
@media (max-width: 768px) {
    .wp-block-columns:has(.service-card-wow) {
        grid-template-columns: 1fr !important;
    }
    
    .wp-block-columns:has(.service-card-wow) > .wp-block-column:last-child:nth-child(odd) {
        grid-column: auto !important;
    }
    
    .wp-block-group.alignfull > .wp-block-group__inner-container,
    .wp-block-group.alignwide,
    .wp-block-columns.alignwide {
        max-width: 95% !important;
        width: 95% !important;
    }
    
    .testimonial-review-section {
        grid-template-columns: 1fr !important;
    }
}

/* Ensure Proper Text Hierarchy */
h1 { 
    font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
    line-height: 1.2 !important;
}

h2 { 
    font-size: clamp(2rem, 4vw, 3.5rem) !important;
    line-height: 1.3 !important;
    margin-top: 60px !important;
    margin-bottom: 30px !important;
}

h3 { 
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
}

p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

/* Accessibility - Focus States */
a:focus,
button:focus,
.wp-block-button__link:focus {
    outline: 3px solid #28a745 !important;
    outline-offset: 2px !important;
}

/* Print Styles */
@media print {
    .wp-block-group[style*="gradient"] {
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    * {
        color: #000000 !important;
        background: transparent !important;
    }
}

/* ============================================
   MODERN STYLES (from modern-style.css)
   ============================================ */

/**
 * Modern Professional CSS for Desinsect13000
 * Expert Anti-Nuisibles Marseille
 * Version: 2.0.0
 */

/* ============================================
   1. CSS VARIABLES & DESIGN TOKENS
   ============================================ */
:root {
    /* Brand Colors - Professional Pest Control */
    --color-primary: #27AE60;        /* Trust Green */
    --color-secondary: #2C3E50;      /* Professional Blue */
    --color-accent: #28a745;         /* Urgency Green */
    --color-white: #FFFFFF;
    --color-black: #1a1a1a;
    
    /* Semantic Colors */
    --color-success: #27AE60;
    --color-danger: #dc3545;
    --color-warning: #F39C12;
    --color-info: #3498DB;
    
    /* Gray Scale */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Poppins', var(--font-primary);
    
    /* Font Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    
    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* Z-Index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================
   2. RESET & BASE STYLES
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--gray-800);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-4);
    color: var(--color-secondary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--space-4);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   3. BUTTON SYSTEM
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    min-height: 48px;
    position: relative;
    overflow: hidden;
}

/* Button Ripple Effect */
.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

/* Primary Button - Call to Action */
.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, #229954 100%);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #229954 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
}

/* Danger Button - Urgency */
.btn-danger {
    background: linear-gradient(135deg, var(--color-accent) 0%, #20c997 100%);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5); }
    100% { box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3); }
}

.btn-danger:hover {
    background: linear-gradient(135deg, #20c997 0%, var(--color-accent) 100%);
    transform: translateY(-2px);
    animation: none;
}

/* Secondary Button */
.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.3);
}

.btn-secondary:hover {
    background: var(--gray-800);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
}

/* Outline Button */
.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
}

/* Ghost Button */
.btn-ghost {
    background: transparent;
    color: var(--gray-700);
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* Button Sizes */
.btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    min-height: 36px;
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-lg);
    min-height: 56px;
}

/* Button States */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

/* ============================================
   4. CARD SYSTEM
   ============================================ */
.card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-base);
    position: relative;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.card-header {
    padding: var(--space-6);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    border-bottom: 1px solid var(--gray-200);
}

.card-body {
    padding: var(--space-6);
}

.card-footer {
    padding: var(--space-4) var(--space-6);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

/* Service Card */
.service-card {
    text-align: center;
    padding: var(--space-8);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.service-card:hover {
    border-color: var(--color-primary);
}

.service-card:hover::before {
    height: 100%;
    opacity: 0.05;
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-3xl);
    color: var(--color-white);
    transition: all var(--transition-base);
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Pricing Card */
.pricing-card {
    position: relative;
    padding: var(--space-8);
    text-align: center;
    border: 2px solid var(--gray-200);
}

.pricing-card.featured {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.pricing-card.featured::before {
    content: 'POPULAIRE';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
}

.pricing-price {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--space-6) 0;
}

.pricing-price small {
    font-size: var(--text-lg);
    color: var(--gray-600);
    font-weight: 400;
}

/* Testimonial Card */
.testimonial-card {
    padding: var(--space-6);
    background: var(--gray-50);
    border-left: 4px solid var(--color-primary);
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    font-size: var(--text-6xl);
    color: var(--color-primary);
    opacity: 0.2;
    font-family: Georgia, serif;
}

.testimonial-content {
    font-style: italic;
    margin-bottom: var(--space-4);
    padding-left: var(--space-8);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-left: var(--space-8);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

/* ============================================
   5. FORM STYLES
   ============================================ */
.form-group {
    margin-bottom: var(--space-6);
}

.form-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--gray-700);
}

.form-label.required::after {
    content: ' *';
    color: var(--color-danger);
}

.form-control {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--gray-900);
    background-color: var(--color-white);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    min-height: 48px;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.form-control:hover {
    border-color: var(--gray-400);
}

.form-control::placeholder {
    color: var(--gray-500);
}

/* Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Select */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--space-3) center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: var(--space-10);
}

/* Checkbox & Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.form-check-input {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.form-check-input[type="radio"] {
    border-radius: var(--radius-full);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Form Validation */
.form-control.is-invalid {
    border-color: var(--color-danger);
}

.form-control.is-valid {
    border-color: var(--color-success);
}

.invalid-feedback {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-danger);
}

.valid-feedback {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-success);
}

/* ============================================
   6. NAVIGATION STYLES
   ============================================ */
.navbar {
    background: var(--color-white);
    box-shadow: var(--shadow-md);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.navbar-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-secondary);
}

.navbar-logo {
    width: 40px;
    height: 40px;
}

.navbar-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.navbar-nav {
    display: flex;
    gap: var(--space-6);
    list-style: none;
}

.nav-link {
    color: var(--gray-700);
    font-weight: 500;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

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

.nav-link:hover::after {
    width: 100%;
}

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

.nav-link.active::after {
    width: 100%;
}

/* Mobile Menu */
.navbar-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-2);
    background: transparent;
    border: none;
    cursor: pointer;
}

.navbar-toggle span {
    width: 24px;
    height: 2px;
    background: var(--gray-700);
    transition: all var(--transition-base);
}

.navbar-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggle.active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   7. HERO SECTION
   ============================================ */
.hero {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-100) 100%);
    padding: var(--space-20) 0;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    opacity: 0.05;
    animation: float 20s infinite ease-in-out;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
}

.hero-content {
    z-index: 1;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--text-xl);
    color: var(--gray-600);
    margin-bottom: var(--space-8);
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
}

.hero-image img {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
}

/* ============================================
   8. SECTIONS & LAYOUT
   ============================================ */
.section {
    padding: var(--space-20) 0;
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-12);
}

.section-title h2 {
    margin-bottom: var(--space-4);
}

.section-title p {
    font-size: var(--text-lg);
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-fluid {
    padding: 0 var(--space-4);
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   9. UTILITIES
   ============================================ */
/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }

/* Spacing */
.m-0 { margin: 0; }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }

/* Background Colors */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-accent { background-color: var(--color-accent); }
.bg-white { background-color: var(--color-white); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }

/* Text Colors */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-white); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }

/* ============================================
   10. ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInDown {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
    from { transform: translateX(30px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-fadeIn { animation: fadeIn 0.5s ease-out; }
.animate-slideInUp { animation: slideInUp 0.5s ease-out; }
.animate-slideInDown { animation: slideInDown 0.5s ease-out; }
.animate-slideInLeft { animation: slideInLeft 0.5s ease-out; }
.animate-slideInRight { animation: slideInRight 0.5s ease-out; }
.animate-bounce { animation: bounce 2s infinite; }

/* ============================================
   11. RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Typography */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    
    /* Navigation */
    .navbar-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: var(--color-white);
        flex-direction: column;
        padding: var(--space-8);
        transition: left var(--transition-base);
    }
    
    .navbar-menu.active {
        left: 0;
    }
    
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-toggle {
        display: flex;
    }
    
    /* Hero */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    /* Grid */
    .grid-cols-2 { grid-template-columns: 1fr; }
    .grid-cols-3 { grid-template-columns: 1fr; }
    .grid-cols-4 { grid-template-columns: 1fr; }
    
    /* Sections */
    .section {
        padding: var(--space-12) 0;
    }
}

@media (max-width: 480px) {
    /* Buttons */
    .btn {
        width: 100%;
    }
    
    .hero-actions {
        flex-direction: column;
    }
}

/* ============================================
   12. ACCESSIBILITY
   ============================================ */
/* Focus Styles */
*:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* Skip to Content */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    z-index: var(--z-tooltip);
}

.skip-to-content:focus {
    top: 0;
}

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

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-primary,
    .btn-danger,
    .btn-secondary {
        border: 2px solid currentColor;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --color-white: #1a1a1a;
        --color-black: #ffffff;
        --gray-50: #111827;
        --gray-100: #1f2937;
        --gray-200: #374151;
        --gray-300: #4b5563;
        --gray-400: #6b7280;
        --gray-500: #9ca3af;
        --gray-600: #d1d5db;
        --gray-700: #e5e7eb;
        --gray-800: #f3f4f6;
        --gray-900: #f9fafb;
    }
}

/* ============================================
   13. PRINT STYLES
   ============================================ */
@media print {
    .navbar,
    .hero-actions,
    .btn,
    .navbar-toggle {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    h1 { font-size: 24pt; }
    h2 { font-size: 18pt; }
    h3 { font-size: 14pt; }
    
    a {
        color: inherit;
        text-decoration: underline;
    }
}

/* ============================================
   HEADER STYLES (from header.css and header-fixed.css)
   ============================================ */

/* =====================================================
   Header Styles - Desinsect13000
   ===================================================== */

/* Top Header Bar */
.top-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 2px solid #ff6b00;
}

.top-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.top-header .contact-info {
    display: flex;
    gap: 25px;
    color: #ffffff;
}

.top-header .contact-info a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.top-header .contact-info a:hover {
    color: #ff6b00;
}

/* Main Header */
.site-header {
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 80px;
}

/* Logo Section */
.site-branding {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.site-branding:hover {
    transform: translateY(-2px);
}

.site-logo {
    font-size: 32px;
    margin-right: 10px;
}

.site-name-wrapper h1 {
    font-size: 24px;
    margin: 0;
    color: #ff6b00;
    font-weight: 800;
}

.site-tagline {
    font-size: 12px;
    color: #666;
    margin: 2px 0 0 0;
    font-weight: normal;
}

/* Main Navigation */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation > ul > li {
    position: relative;
    margin: 0 15px;
}

.main-navigation a {
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.main-navigation > ul > li > a:hover {
    color: #ff6b00;
    transform: translateY(-2px);
}

/* Dropdown Menus */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 250px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border-top: 3px solid #ff6b00;
    z-index: 999;
}

.main-navigation li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation ul ul li {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.main-navigation ul ul li:last-child {
    border-bottom: none;
}

.main-navigation ul ul a {
    padding: 12px 20px;
    font-weight: 500;
    font-size: 14px;
}

.main-navigation ul ul a:hover {
    background: #ff6b00;
    color: #ffffff;
    padding-left: 25px;
}

/* Third Level Dropdown */
.main-navigation ul ul ul {
    left: 100%;
    top: 0;
}

/* CTA Buttons */
.header-cta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-cta a {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cta-secondary {
    background: transparent;
    color: #ff6b00;
    border: 2px solid #ff6b00;
}

.cta-secondary:hover {
    background: #ff6b00;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
}

.cta-primary {
    background: #ff6b00;
    color: #ffffff;
    border: 2px solid #ff6b00;
}

.cta-primary:hover {
    background: #e55a00;
    border-color: #e55a00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    transition: 0.3s;
}

/* Sticky Header Effect */
.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.site-header.scrolled .header-container {
    min-height: 70px;
}

/* Mobile Styles */
@media (max-width: 991px) {
    .menu-toggle {
        display: block;
    }
    
    .main-navigation {
        display: none;
    }
    
    .header-cta {
        display: none;
    }
    
    .mobile-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        overflow-y: auto;
    }
    
    .mobile-menu.active {
        display: block;
    }
    
    .mobile-menu-content {
        background: #ffffff;
        width: 90%;
        max-width: 400px;
        height: 100%;
        margin-left: auto;
        padding: 20px;
        overflow-y: auto;
    }
    
    .mobile-menu nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-menu nav li {
        border-bottom: 1px solid #f0f0f0;
    }
    
    .mobile-menu nav a {
        display: block;
        padding: 15px 10px;
        color: #333;
        text-decoration: none;
        font-weight: 600;
    }
    
    .mobile-menu nav a:hover {
        color: #ff6b00;
        background: #f9f9f9;
    }
    
    .mobile-menu .sub-menu {
        padding-left: 20px;
        background: #f9f9f9;
    }
}

@media (max-width: 768px) {
    .top-header .contact-info {
        flex-direction: column;
        gap: 5px;
        font-size: 12px;
    }
    
    .site-branding h1 {
        font-size: 20px;
    }
    
    .site-tagline {
        display: none;
    }
}/* =====================================================
   Fixed Header Styles - Desinsect13000
   Complete responsive header with proper class matching
   ===================================================== */

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

/* Prevent horizontal overflow on mobile */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

body {
    position: relative;
    width: 100%;
}

/* Top Contact Bar */
.header-top {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 0.5rem 0;
    font-size: 0.8125rem;
    border-bottom: 0.125rem solid #ff6b00;
}

.header-top-content {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    flex-wrap: wrap;
}

.contact-item {
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.3s ease;
}

.contact-item:hover {
    color: #ff6b00;
}

.contact-icon {
    font-size: 0.875rem;
}

/* Main Header Container */
.site-header {
    background: #ffffff;
    box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    max-width: 100vw; /* Never exceed viewport width */
    overflow: visible; /* Allow dropdowns to show */
}

.header-main {
    max-width: 95%;
    margin: 0 auto;
    padding: 0;
}

/* Two-row layout for desktop */
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2%;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
}

.header-bottom-row {
    padding: 0.75rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa; /* Light background for navigation row */
    width: 100%;
    min-height: 50px; /* Ensure minimum height for navigation */
    position: relative; /* Establish positioning context */
    overflow: visible; /* Ensure dropdowns are not cut off */
}

/* Logo Styles */
.site-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    transition: transform 0.3s ease;
}

.logo-link:hover {
    transform: translateY(-2px);
}

.logo-icon {
    font-size: clamp(1.5rem, 3vw, 2.5rem); /* Responsive icon size */
    margin-right: clamp(0.3rem, 1vw, 0.75rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo h1 {
    font-size: clamp(1rem, 2vw, 1.5rem); /* Responsive font size */
    margin: 0;
    color: #ff6b00;
    font-weight: 800;
    line-height: 1.2;
}

.site-logo .tagline {
    font-size: 0.75rem;
    color: #28a745;
    margin: 0.3rem 0 0 3.25rem; /* Align with logo text */
    font-weight: normal;
    line-height: 1.2;
    max-width: 100%;
}

/* Main Navigation */
.main-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 2%;
}

.main-navigation .nav-menu,
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Adjusted gap for better fit */
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    justify-content: center;
    width: 100%;
    max-width: 1200px; /* Limit max width for better layout */
}

.main-navigation .nav-menu > li {
    position: relative;
}

/* Ensure menu items with children are positioned */
.main-navigation .menu-item-has-children {
    position: relative;
}

.main-navigation .nav-menu > li > a,
.main-navigation ul > li > a {
    color: #333;
    text-decoration: none;
    padding: 0.75rem 1.25rem; /* Fixed padding for consistent look */
    display: block;
    font-weight: 600;
    font-size: 0.95rem; /* Slightly larger for better readability */
    transition: all 0.3s ease;
    white-space: nowrap;
    border-radius: 0.25rem;
    letter-spacing: 0.3px;
}

.main-navigation .nav-menu > li > a:hover,
.main-navigation ul > li > a:hover,
.main-navigation .nav-menu > li.current-menu-item > a,
.main-navigation ul > li.current-menu-item > a {
    color: #ff6b00;
    background: rgba(255, 107, 0, 0.05);
}

/* Add dropdown arrow indicator */
.menu-item-has-children > a::after {
    content: " ▼";
    font-size: 0.6rem;
    margin-left: 0.25rem;
    opacity: 0.7;
}

/* Dropdown Menus */
.main-navigation .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 13.75rem;
    box-shadow: 0 0.3125rem 1.25rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition: all 0.3s ease;
    border-top: 0.1875rem solid #ff6b00;
    z-index: 99999 !important; /* Increased z-index */
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
    pointer-events: none; /* Prevent interaction when hidden */
    display: none; /* Initially hidden */
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation li:hover > .sub-menu {
    display: block !important; /* Show on hover */
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important; /* Allow interaction when visible */
}

.main-navigation .sub-menu li {
    margin: 0;
    border-bottom: 0.0625rem solid #f0f0f0;
}

.main-navigation .sub-menu li:last-child {
    border-bottom: none;
}

.main-navigation .sub-menu a {
    padding: 0.75rem 1.25rem;
    display: block;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.main-navigation .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding-left: 1.5625rem;
}

/* Third Level Dropdown */
.main-navigation .sub-menu .sub-menu {
    left: 100%;
    top: -0.1875rem;
}

/* CTA Buttons */
.header-cta {
    display: flex;
    gap: 0.5rem; /* Smaller gap between buttons */
    align-items: center;
    flex-shrink: 0;
}

.header-cta .btn {
    padding: 0.4rem 0.9rem; /* Smaller padding */
    border-radius: 0.25rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem; /* Smaller font */
    transition: all 0.3s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    line-height: 1.2;
}

.btn-primary {
    background: #ff6b00;
    color: #ffffff !important;
    border: 0.125rem solid #ff6b00;
}

.btn-primary:hover {
    background: #e55a00;
    border-color: #e55a00;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.3125rem 0.9375rem rgba(255, 107, 0, 0.3);
}

.btn-secondary {
    background: #27ae60;
    color: #ffffff !important;
    border: 0.125rem solid #27ae60;
}

.btn-secondary:hover {
    background: #229954;
    color: #ffffff !important;
    border-color: #229954;
    transform: translateY(-0.125rem);
    box-shadow: 0 0.3125rem 0.9375rem rgba(39, 174, 96, 0.3);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.625rem;
    font-size: 1.5rem;
    color: #333;
}

/* Mobile Menu Overlay */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 18.75rem;
    height: 100vh;
    background: #ffffff;
    box-shadow: -0.3125rem 0 1.25rem rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: right 0.3s ease;
    overflow-y: auto;
}

.mobile-menu.active {
    right: 0;
}

.mobile-menu-header {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-menu-header .site-logo {
    color: #ffffff;
}

.mobile-menu-header .logo-text h1 {
    color: #ffffff;
    font-size: 1.25rem;
}

.mobile-menu-header .tagline {
    color: rgba(255, 255, 255, 0.9);
}

.mobile-menu-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.75rem;
    cursor: pointer;
    padding: 0.3125rem;
}

.mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-menu li {
    border-bottom: 0.0625rem solid #f0f0f0;
}

.mobile-nav-menu a {
    display: block;
    padding: 0.9375rem 1.25rem;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.mobile-nav-menu a:hover {
    background: #f9f9f9;
    color: #ff6b00;
    padding-left: 1.5625rem;
}

.mobile-nav-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f9f9f9;
}

.mobile-nav-menu .sub-menu a {
    padding-left: 2.5rem;
    font-size: 0.875rem;
}

.mobile-cta {
    padding: 1.25rem;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.mobile-cta .btn {
    width: 100%;
    text-align: center;
    padding: 0.75rem 1.25rem;
}

/* Responsive Styles */

/* Desktop-specific styles for two-row layout */
@media (min-width: 992px) {
    /* Ensure two-row layout is visible on desktop */
    .header-top-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2%;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .header-bottom-row {
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0.75rem 0;
        background: #f8f9fa;
        width: 100%;
    }
    
    .main-navigation {
        display: flex !important;
        width: 100%;
    }
    
    .main-navigation .nav-menu {
        display: flex !important;
        visibility: visible !important;
    }
    
    .header-cta {
        display: flex !important;
    }
    
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* Responsive adjustments for preventing overflow */
@media (min-width: 992px) and (max-width: 1100px) {
    /* Reduce spacing even more on very tight desktop screens */
    .header-main {
        gap: 1%;
    }
    
    .main-navigation {
        margin: 0;
    }
    
    .header-cta {
        gap: 0.4rem;
    }
    
    /* Consider hiding secondary CTA button if space is too tight */
    .header-cta .btn-secondary {
        display: none;
    }
}

/* Hide navigation menu items that are just the site description */
/* This CSS targets and hides any menu item containing the tagline */
.main-navigation li a[title*="Expert Désinsectisation"],
.main-navigation li a[title*="Intervention Rapide"] {
    display: none !important;
}

/* Hide the first menu item if it contains the tagline text */
.main-navigation .nav-menu > li:first-child:has(a:contains("Expert Désinsectisation")),
.main-navigation .nav-menu > li#menu-item-305,
.main-navigation .nav-menu > li:first-child a[href="http://localhost/"]:not(:has(img)),
.main-navigation .nav-menu > li:first-child:not(:has(a img)) {
    display: none !important;
}

/* Show dropdown menus properly */
.main-navigation .sub-menu,
.main-navigation .children,
.main-navigation ul ul {
    display: block !important; /* Ensure submenus can be displayed */
}

/* Only show top-level menu items */
.main-navigation .nav-menu {
    display: flex !important;
}

.main-navigation .nav-menu > li {
    display: block !important;
}

/* Show submenu items when parent is hovered */
.main-navigation .nav-menu li li {
    display: block !important;
}

/* Hide the parent li that contains tagline link */
.main-navigation li:has(a[title*="Expert Désinsectisation"]) {
    display: none !important;
}

/* Fallback: Target by text length - tagline is much longer than menu items */
.main-navigation ul > li > a {
    /* Normal menu items shouldn't exceed this */
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ensure all valid menu items are displayed */
.main-navigation ul > li {
    display: block;
}

/* Special case: Hide if it matches exact tagline text pattern */
.main-navigation a[href="http://localhost/"]:not([title^="🏠"]) {
    /* Home link should have house emoji, if not it's the tagline */
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Tablet (768px to 991px) */
@media (max-width: 991px) {
    .header-top {
        display: none !important;
    }
    
    /* Revert to single row on tablet/mobile */
    .header-main {
        padding: 2%;
    }
    
    .header-top-row {
        border-bottom: none;
        padding: 1rem 2%;
    }
    
    .header-bottom-row {
        display: none !important; /* Hide navigation row on mobile */
    }
    
    .main-navigation {
        display: none !important;
    }
    
    .header-cta {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: block !important;
        background: #ff6b00;
        color: #fff;
        border: none;
        padding: 0.625rem 0.9375rem;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        cursor: pointer;
    }
    
    .mobile-menu {
        display: block;
    }
    
    .site-logo h1 {
        font-size: 1.25rem;
    }
    
    .logo-icon {
        font-size: 2rem;
    }
    
    .site-logo .tagline {
        display: none !important; /* Hide tagline on tablet */
    }
}

/* Mobile (576px to 767px) */
@media (max-width: 767px) {
    .header-top {
        display: none !important;
    }
    
    .site-header {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .header-main {
        padding: 3%;
        gap: 2%;
        justify-content: space-between;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .main-navigation {
        display: none !important;
    }
    
    .header-cta {
        display: none !important;
    }
    
    .site-logo {
        max-width: 75% !important; /* 75% width for logo area */
        overflow: hidden !important;
    }
    
    .site-logo h1 {
        font-size: 1.125rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .site-logo .tagline {
        display: none !important;
    }
    
    .mobile-menu {
        width: 100%;
    }
    
    .mobile-menu-toggle {
        display: block !important;
        background: #ff6b00;
        color: #fff;
        border: none;
        padding: 0.5rem 0.75rem;
        border-radius: 0.3125rem;
        font-size: 1.125rem;
        flex-shrink: 0;
        width: 20%; /* 20% width for hamburger button area */
        max-width: 3.5rem;
    }
}

/* Small Mobile (up to 575px) */
@media (max-width: 575px) {
    .site-header {
        position: relative;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    .header-top {
        display: none !important;
    }
    
    .header-main {
        padding: 3% 2.5%;
        justify-content: space-between;
        align-items: center;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .main-navigation {
        display: none !important;
    }
    
    .header-cta {
        display: none !important;
    }
    
    .site-logo {
        max-width: 70% !important; /* 70% width for logo area */
        overflow: hidden !important;
        flex: 1;
    }
    
    .logo-icon {
        font-size: 1.5rem;
        margin-right: 0.375rem;
        flex-shrink: 0;
    }
    
    .site-logo h1 {
        font-size: 0.875rem;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    .site-logo .tagline {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: block !important;
        font-size: 1.125rem;
        padding: 0.5rem 0.625rem;
        background: #ff6b00;
        color: #fff;
        border: none;
        border-radius: 0.3125rem;
        flex-shrink: 0;
        width: 25%; /* 25% width for hamburger button area */
        max-width: 3rem;
        text-align: center;
    }
}

/* Ultra Small (up to 400px) */
@media (max-width: 400px) {
    .header-top {
        display: none !important;
    }
    
    .header-main {
        padding: 3% 2%;
    }
    
    .main-navigation {
        display: none !important;
    }
    
    .header-cta {
        display: none !important;
    }
    
    .site-logo {
        max-width: 65% !important; /* 65% width for logo on very small screens */
    }
    
    .site-logo h1 {
        font-size: 0.875rem;
    }
    
    .logo-icon {
        font-size: 1.5rem;
    }
    
    .site-logo .tagline {
        display: none !important;
    }
    
    .mobile-menu-toggle {
        display: block !important;
        width: 30%; /* 30% width for hamburger on very small screens */
        max-width: 2.5rem;
    }
}

/* Medium Desktop (992px to 1199px) - NEW */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-navigation .nav-menu,
    .main-navigation ul {
        gap: 0.3rem;
    }
    
    .main-navigation .nav-menu > li > a,
    .main-navigation ul > li > a {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .header-cta .btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.8rem;
    }
    
    .site-logo h1 {
        font-size: 1.3rem;
    }
    
    .logo-icon {
        font-size: 2rem;
    }
}

/* Large Desktop (1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .header-main {
        max-width: 95%;
        padding: 1% 2.5%;
    }
    
    .main-navigation .nav-menu > li > a {
        padding: 0.5rem 0.8rem;
        font-size: 0.9rem;
    }
    
    .header-cta .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

/* Extra Large Desktop (1400px and up) */
@media (min-width: 1400px) {
    .header-main {
        max-width: 90%;
        padding: 1.25% 5%;
    }
    
    .header-top-content {
        max-width: 90%;
        padding: 0 5%;
    }
    
    .main-navigation .nav-menu > li > a {
        padding: 0.75rem 1.125rem;
        font-size: 1rem;
    }
    
    .header-cta .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* Print Styles */
@media print {
    .header-top,
    .mobile-menu-toggle,
    .mobile-menu,
    .header-cta {
        display: none !important;
    }
    
    .site-header {
        position: static;
        box-shadow: none;
    }
}

/* ============================================
   HEADER DROPDOWN FIX (from header-dropdown-fix.css)
   ============================================ */

/* ============================================
   HEADER DROPDOWN MENU FIX
   Make sub-menus hidden by default and show on hover
   ============================================ */

/* Main navigation styling */
.main-navigation {
    position: relative;
    z-index: 1000;
}

.main-navigation .nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 5px;
}

/* First level menu items */
.main-navigation .nav-menu > li {
    position: relative;
    padding: 0;
    margin: 0;
}

.main-navigation .nav-menu > li > a {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    color: #2c3e50;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: all 0.3s ease;
    border-radius: 8px;
    white-space: nowrap;
}

.main-navigation .nav-menu > li > a:hover {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

/* Style sub-menus - WordPress specific classes */
.main-navigation .nav-menu .sub-menu,
.main-navigation .nav-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    min-width: 250px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 10px 0;
    margin-top: 5px;
    list-style: none;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Show sub-menu on hover - WordPress specific */
.main-navigation .nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation .nav-menu > li:hover > ul.sub-menu {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* Second level menu items */
.main-navigation .nav-menu ul li {
    position: relative;
    margin: 0;
    padding: 0;
}

.main-navigation .nav-menu ul li a {
    display: block;
    padding: 10px 20px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.main-navigation .nav-menu ul li a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding-left: 25px;
}

/* Third level menu (for Marseille arrondissements) - WordPress specific */
.main-navigation .nav-menu .sub-menu .sub-menu,
.main-navigation .nav-menu ul.sub-menu ul.sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 5px;
    margin-top: 0;
}

/* Show third level on hover - WordPress specific */
.main-navigation .nav-menu .sub-menu li.menu-item-has-children:hover > ul.sub-menu,
.main-navigation .nav-menu ul.sub-menu li:hover > ul.sub-menu {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

/* Add arrow indicators for items with sub-menus */
.main-navigation .nav-menu li.menu-item-has-children > a::after {
    content: "▼";
    font-size: 10px;
    margin-left: 5px;
    opacity: 0.5;
    transition: transform 0.3s ease;
}

.main-navigation .nav-menu ul li.menu-item-has-children > a::after {
    content: "▶";
    float: right;
}

/* Rotate arrow on hover */
.main-navigation .nav-menu li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Mega menu styling for Nuisibles and Zones */
.main-navigation .nav-menu > li.menu-item-has-children > ul.mega-menu {
    min-width: 350px;
    padding: 20px;
    display: none;
}

.main-navigation .nav-menu > li.menu-item-has-children:hover > ul.mega-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Special styling for Zones with many items */
.main-navigation .nav-menu > li:has(> a:contains("Zones")) > ul {
    min-width: 300px;
}

/* Mobile menu should not be affected */
@media (max-width: 1024px) {
    .main-navigation .nav-menu {
        display: none;
    }
}

/* Active/current page styling */
.main-navigation .nav-menu > li.current-menu-item > a,
.main-navigation .nav-menu > li.current-page-ancestor > a {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    font-weight: 600;
}

/* Prevent menu cutoff at screen edges */
.main-navigation .nav-menu > li:last-child > ul {
    left: auto;
    right: 0;
}

/* Add smooth animation for better UX */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main-navigation .nav-menu li:hover > ul {
    animation: slideDown 0.3s ease forwards;
}

/* Ensure z-index hierarchy */
.site-header {
    position: relative;
    z-index: 9999;
}

.header-main {
    position: relative;
    z-index: 100;
}

/* ============================================
   FOOTER STYLES (from footer.css, footer-styles.css, footer-white.css)
   ============================================ */

/* =====================================================
   Footer Styles - Desinsect13000
   ===================================================== */

/* Main Footer */
.site-footer {
    background: #ecf0f1; /* Light gray background */
    color: #2c3e50; /* Dark text for contrast */
    padding: 60px 0 20px;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

/* Footer Branding */
.footer-branding {
    grid-column: span 2;
}

.footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #2c3e50; /* Dark text */
    margin-bottom: 20px;
}

.footer-logo-icon {
    font-size: 36px;
    margin-right: 10px;
}

.footer-logo-text .footer-title {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b00;
    margin: 0;
}

.footer-logo-text .footer-tagline {
    font-size: 12px;
    color: #7f8c8d; /* Medium gray */
    margin: 5px 0 0 0;
}

.footer-description {
    color: #34495e; /* Dark gray text */
    line-height: 1.8;
    margin-bottom: 20px;
}

.footer-certifications {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.certification-badge {
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid #ff6b00;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    color: #ff6b00;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Footer Columns */
.footer-column h4 {
    color: #2c3e50; /* Dark text */
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #ff6b00;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 12px;
}

.footer-column a {
    color: #34495e; /* Dark gray text */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-column a:hover {
    color: #ff6b00;
    transform: translateX(5px);
}

/* Footer Menu Styling */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu li a {
    color: #34495e;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-menu li a:hover {
    color: #ff6b00;
    transform: translateX(5px);
}

/* Contact Column */
.footer-contact-item {
    display: flex;
    align-items: start;
    margin-bottom: 15px;
    color: #34495e; /* Dark gray text */
}

.footer-contact-item .contact-label {
    color: #2c3e50; /* Dark text */
    font-weight: 600;
    margin-right: 8px; /* Add space after label */
}

.footer-contact-item strong {
    color: #2c3e50; /* Dark text */
    display: block;
    margin-bottom: 5px;
}

.footer-contact-item a {
    color: #ff6b00;
    text-decoration: none;
}

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


/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(44, 62, 80, 0.1);
    padding: 20px 0;
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright {
    color: #000000; /* Black text as requested */
    font-size: 14px;
}

.footer-security {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #999;
    font-size: 14px;
}

.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: #999;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #ff6b00;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #ff6b00;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top:hover {
    background: #e55a00;
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.back-to-top.visible {
    display: flex;
}

/* Responsive Design */
@media (max-width: 991px) {
    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 30px;
    }
    
    .footer-branding {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .footer-logo-icon {
        font-size: 28px;
    }
    
    .footer-logo-text .footer-title {
        font-size: 20px;
    }
    
    .footer-certifications {
        justify-content: center;
    }
    
    .certification-badge {
        font-size: 12px;
        padding: 6px 12px;
    }
}/**
 * Footer Styles - Desinsect13000
 * Design professionnel et moderne
 */

/* ========================================
   FOOTER PRINCIPAL
   ======================================== */

.site-footer {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #ffffff;
    padding: 0;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

/* Effet de vague décorative */
.site-footer::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    height: 100px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="%23ffffff" d="M0,50 C360,100 720,0 1440,50 L1440,0 L0,0 Z"></path></svg>') no-repeat;
    background-size: cover;
}

/* ========================================
   NEWSLETTER SECTION
   ======================================== */

.footer-newsletter {
    background: linear-gradient(90deg, #27AE60 0%, #2ECC71 100%);
    padding: 50px 0;
    text-align: center;
    position: relative;
    margin-bottom: -1px;
}

.footer-newsletter::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
}

.newsletter-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.newsletter-content p {
    font-size: 16px;
    margin: 0 0 25px 0;
    color: rgba(255, 255, 255, 0.95);
}

.newsletter-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.newsletter-form input[type="email"] {
    flex: 1;
    padding: 15px 25px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    outline: none;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form button {
    padding: 15px 30px;
    background: #ffffff;
    color: #27AE60;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.newsletter-form button:hover {
    background: #f8f9fa;
    transform: translateX(2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ========================================
   FOOTER MAIN CONTENT
   ======================================== */

.footer-main {
    padding: 60px 0 40px;
    background: transparent;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}

/* Logo & Description Column */
.footer-brand {
    padding-right: 30px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-decoration: none;
    color: #ffffff;
}

.footer-logo-icon {
    font-size: 40px;
    margin-right: 15px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.footer-logo-text .company-name {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(90deg, #ffffff 0%, #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.footer-logo-text .company-tagline {
    font-size: 12px;
    color: #27AE60;
    margin-top: 5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
    margin: 0 0 20px 0;
    font-size: 15px;
}

.footer-certifications {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.certification-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    font-size: 13px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.certification-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Footer Columns */
.footer-column h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 25px 0;
    color: #ffffff;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #27AE60 0%, transparent 100%);
    border-radius: 2px;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    padding-left: 0;
}

.footer-column ul li a::before {
    content: '';
    position: absolute;
    left: -20px;
    width: 0;
    height: 2px;
    background: #27AE60;
    transition: width 0.3s ease;
}

.footer-column ul li a:hover {
    color: #27AE60;
    padding-left: 10px;
}

.footer-column ul li a:hover::before {
    width: 15px;
    left: -10px;
}

/* Contact Column */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.footer-contact-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

.footer-contact-item a:hover {
    color: #27AE60;
}

.footer-contact-item .contact-label {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 5px;
}

/* Social Links */
.footer-social {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    transition: all 0.3s ease;
    font-size: 18px;
}

.footer-social a:hover {
    background: #27AE60;
    border-color: #27AE60;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
}

/* ========================================
   FOOTER BOTTOM
   ======================================== */

.footer-bottom {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0;
}

.footer-legal-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: #27AE60;
}

.footer-legal-links .separator {
    color: rgba(255, 255, 255, 0.3);
}

.footer-badge {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ========================================
   SCROLL TO TOP BUTTON
   ======================================== */

/* DISABLED - Scroll to top button now in header.php
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.3);
    border: none;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(39, 174, 96, 0.4);
}
*/

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-brand {
        grid-column: 1 / -1;
        padding-right: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .site-footer {
        margin-top: 50px;
    }
    
    .footer-newsletter {
        padding: 40px 20px;
    }
    
    .newsletter-content h3 {
        font-size: 24px;
    }
    
    .newsletter-form {
        flex-direction: column;
        background: transparent;
        padding: 0;
    }
    
    .newsletter-form input[type="email"] {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50px;
        margin-bottom: 15px;
    }
    
    .newsletter-form button {
        width: 100%;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-legal-links {
        order: 2;
    }
    
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

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

.footer-column {
    animation: fadeInUp 0.6s ease-out;
}

.footer-column:nth-child(2) { animation-delay: 0.1s; }
.footer-column:nth-child(3) { animation-delay: 0.2s; }
.footer-column:nth-child(4) { animation-delay: 0.3s; }/* Footer White Background with Black Text and Green Links */

/* Main footer styles */
.site-footer {
    background: linear-gradient(135deg, #5cb85c 0%, #52d3aa 100%) !important;
    color: #ffffff !important;
    border-top: none;
}

.site-footer::before {
    display: none; /* Remove since we have gradient background */
}

/* Footer text colors */
.footer-content,
.footer-column,
.footer-column p,
.footer-column span,
.footer-contact-item span,
.footer-copyright,
.contact-label,
.company-tagline,
.footer-badge span {
    color: #ffffff !important;
}

/* Footer headings */
.footer-column h4,
.company-name {
    color: #ffffff !important;
    font-weight: 700;
}

/* Footer links - Green */
.footer-menu a,
.footer-column a,
.footer-contact-item a,
.footer-logo,
.legal-menu a,
.footer-legal-links a {
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Footer links hover effect */
.footer-menu a:hover,
.footer-column a:hover,
.footer-contact-item a:hover,
.footer-logo:hover,
.legal-menu a:hover,
.footer-legal-links a:hover {
    color: #ffffff !important;
    text-decoration: underline;
    opacity: 0.8;
}

/* Footer logo */
.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    text-decoration: none;
}

.footer-logo:hover {
    text-decoration: none !important;
}

.footer-logo-icon {
    font-size: 2rem;
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
}

.company-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.company-tagline {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Certification badge */
.certification-badge {
    display: inline-block;
    background: #f8f9fa;
    color: #ffffff !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 2px solid #ff6b00;
    margin-top: 10px;
}

/* Footer bottom section */
.footer-bottom {
    background: rgba(0,0,0,0.2) !important;
    border-top: 1px solid rgba(255,255,255,0.2) !important;
    color: #ffffff !important;
}

.footer-bottom-content {
    color: #ffffff !important;
}

.footer-copyright {
    color: #ffffff !important;
    margin: 0;
}

/* Footer menu styling */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-menu a {
    display: inline-block;
    padding: 5px 0;
}

/* Legal menu */
.legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.legal-menu li {
    display: inline;
}

/* Footer badge */
.footer-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #000000 !important;
}

/* DISABLED - Scroll to top button now in header.php
.scroll-to-top {
    background: #ff6b00 !important;
    color: #ffffff !important;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top:hover {
    background: #20c997 !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}

.scroll-to-top i::before {
    content: "↑";
    font-size: 24px;
    font-weight: bold;
}
*/

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .legal-menu {
        justify-content: center;
    }
}

/* ============================================
   SERVICES STYLES (from services.css)
   ============================================ */

/* =====================================================
   Services Styles - Desinsect13000
   ===================================================== */

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

/* Service Card */
.service-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b00 0%, #e55a00 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.service-card:hover::before {
    transform: scaleX(1);
}

/* Service Icon */
.service-icon {
    width: 80px;
    height: 80px;
    margin: 30px auto 20px;
    background: linear-gradient(135deg, #ff6b00 0%, #e55a00 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #ffffff;
    position: relative;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3);
}

.service-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #ff6b00;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Service Content */
.service-content {
    padding: 0 30px 30px;
    text-align: center;
}

.service-card h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 700;
}

.service-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Service Features */
.service-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: left;
}

.service-features li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    color: #555;
    font-size: 14px;
}

.service-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff6b00;
    font-weight: bold;
}

/* Service CTA */
.service-cta {
    margin-top: 20px;
}

.service-cta a {
    display: inline-block;
    padding: 12px 30px;
    background: #ff6b00;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-cta a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.service-cta a:hover::before {
    left: 100%;
}

.service-cta a:hover {
    background: #e55a00;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 107, 0, 0.3);
}

/* Service Badges */
.service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff6b00;
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.service-badge.popular {
    background: #4caf50;
}

.service-badge.new {
    background: #2196f3;
}

/* Featured Service */
.service-card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, #ff6b00 0%, #e55a00 100%);
    color: #ffffff;
}

.service-card.featured h3,
.service-card.featured p,
.service-card.featured .service-features li {
    color: #ffffff;
}

.service-card.featured .service-icon {
    background: #ffffff;
    color: #ff6b00;
}

.service-card.featured .service-features li::before {
    color: #ffffff;
}

.service-card.featured .service-cta a {
    background: #ffffff;
    color: #ff6b00;
}

.service-card.featured .service-cta a:hover {
    background: #f0f0f0;
}

/* Service Process */
.service-process {
    padding: 60px 0;
    background: #f9f9f9;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.process-step {
    text-align: center;
    position: relative;
}

.process-step::after {
    content: '→';
    position: absolute;
    top: 40px;
    right: -30px;
    font-size: 24px;
    color: #ff6b00;
    display: none;
}

@media (min-width: 768px) {
    .process-step:not(:last-child)::after {
        display: block;
    }
}

.step-number {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: #ff6b00;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.process-step h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.process-step p {
    color: #666;
    font-size: 14px;
}

/* Service Pricing */
.service-pricing {
    background: #f0f0f0;
    padding: 30px;
    border-radius: 10px;
    margin: 30px 0;
}

.pricing-header {
    text-align: center;
    margin-bottom: 30px;
}

.pricing-header h3 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.price-tag {
    font-size: 36px;
    color: #ff6b00;
    font-weight: bold;
}

.price-tag span {
    font-size: 16px;
    color: #666;
    font-weight: normal;
}

/* Service Gallery */
.service-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 30px 0;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 107, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay span {
    color: #ffffff;
    font-size: 24px;
}

/* Responsive Design */
@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .service-card.featured {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .process-steps {
        grid-template-columns: 1fr;
    }
    
    .process-step::after {
        display: none;
    }
    
    .service-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .service-content {
        padding: 0 20px 20px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    
    .price-tag {
        font-size: 28px;
    }
}

/* ============================================
   ANIMATIONS (from animations.css)
   ============================================ */

/* =====================================================
   Animations & Transitions - Desinsect13000
   ===================================================== */

/* Keyframe Animations */

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

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

/* Pulse */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Rotate */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Shake */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Float */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Shimmer */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Gradient Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Loading Spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Wave */
@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(20deg);
    }
    75% {
        transform: rotate(-20deg);
    }
}

/* Blink */
@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

/* Animation Classes */

.animate-fadeIn {
    animation: fadeIn 1s ease-in-out;
}

.animate-fadeInUp {
    animation: fadeInUp 1s ease-in-out;
}

.animate-fadeInDown {
    animation: fadeInDown 1s ease-in-out;
}

.animate-fadeInLeft {
    animation: fadeInLeft 1s ease-in-out;
}

.animate-fadeInRight {
    animation: fadeInRight 1s ease-in-out;
}

.animate-scaleIn {
    animation: scaleIn 0.5s ease-in-out;
}

.animate-bounce {
    animation: bounce 2s infinite;
}

.animate-pulse {
    animation: pulse 2s infinite;
}

.animate-rotate {
    animation: rotate 2s linear infinite;
}

.animate-shake {
    animation: shake 0.5s;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Delay Classes */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

.delay-600 {
    animation-delay: 0.6s;
}

.delay-700 {
    animation-delay: 0.7s;
}

.delay-800 {
    animation-delay: 0.8s;
}

.delay-900 {
    animation-delay: 0.9s;
}

.delay-1000 {
    animation-delay: 1s;
}

/* Transition Classes */
.transition-all {
    transition: all 0.3s ease;
}

.transition-fast {
    transition: all 0.15s ease;
}

.transition-slow {
    transition: all 0.5s ease;
}

.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.transition-transform {
    transition: transform 0.3s ease;
}

.transition-opacity {
    transition: opacity 0.3s ease;
}

/* Hover Effects */
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-shrink:hover {
    transform: scale(0.95);
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

.hover-shadow:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
}

/* Loading Animation */
.loading {
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 107, 0, 0.3);
    border-top-color: #ff6b00;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Text Animation */
.text-gradient {
    background: linear-gradient(135deg, #ff6b00 0%, #e55a00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-animated {
    background: linear-gradient(270deg, #ff6b00, #e55a00, #ff6b00);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

/* Parallax Effect */
.parallax {
    transform: translateZ(0);
    will-change: transform;
}

.parallax-slow {
    transform: translateY(calc(var(--scroll) * 0.5px));
}

.parallax-fast {
    transform: translateY(calc(var(--scroll) * 1.5px));
}

/* Reveal on Scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Card Flip */
.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Typewriter Effect */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #ff6b00;
    animation: typing 3.5s steps(40, end), blinkCursor 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blinkCursor {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #ff6b00;
    }
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Disable animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mobile-specific animations */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .animate-bounce,
    .animate-float,
    .animate-pulse {
        animation: none;
    }
    
    /* Simplify transitions */
    .transition-all,
    .transition-slow {
        transition-duration: 0.2s;
    }
}

/* Performance optimizations */
.will-animate {
    will-change: transform, opacity;
}

.hardware-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ============================================
   RESPONSIVE STYLES (from responsive.css)
   ============================================ */

/* =====================================================
   Responsive Styles - Desinsect13000
   ===================================================== */

/* Extra Large Screens (1400px and up) */
@media (min-width: 1400px) {
    .container,
    .header-container,
    .footer-content,
    .footer-bottom-content {
        max-width: 1320px;
    }
    
    .hero-section {
        min-height: 700px;
    }
    
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large Screens (1200px to 1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
    .container,
    .header-container,
    .footer-content,
    .footer-bottom-content {
        max-width: 1140px;
    }
}

/* Medium Screens (992px to 1199px) */
@media (max-width: 1199px) and (min-width: 992px) {
    .container,
    .header-container,
    .footer-content,
    .footer-bottom-content {
        max-width: 960px;
    }
    
    .main-navigation > ul > li {
        margin: 0 10px;
    }
    
    .main-navigation a {
        padding: 8px 12px;
        font-size: 15px;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablets (768px to 991px) */
@media (max-width: 991px) {
    /* Container adjustments */
    .container,
    .header-container,
    .footer-content,
    .footer-bottom-content {
        max-width: 720px;
    }
    
    /* Header adjustments */
    .top-header {
        display: none;
    }
    
    .site-header {
        position: relative;
    }
    
    .header-container {
        min-height: 60px;
    }
    
    .main-navigation,
    .header-cta {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    /* Mobile menu styles */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100%;
        background: #ffffff;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
    }
    
    .mobile-menu.active {
        right: 0;
    }
    
    /* Content adjustments */
    .hero-section {
        min-height: 400px;
        padding: 60px 20px;
    }
    
    .hero-content h1 {
        font-size: 32px;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    /* Footer adjustments */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-branding {
        grid-column: span 2;
    }
}

/* Mobile Landscape (576px to 767px) */
@media (max-width: 767px) and (min-width: 576px) {
    .container,
    .header-container,
    .footer-content,
    .footer-bottom-content {
        max-width: 540px;
    }
    
    .hero-content h1 {
        font-size: 28px;
    }
    
    .hero-content p {
        font-size: 16px;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
    /* Container adjustments */
    .container,
    .header-container,
    .footer-content,
    .footer-bottom-content {
        max-width: 100%;
        padding: 0 15px;
    }
    
    /* Typography adjustments */
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    h3 {
        font-size: 18px;
    }
    
    /* Header adjustments */
    .site-branding h1 {
        font-size: 18px;
    }
    
    .site-tagline {
        display: none;
    }
    
    .mobile-menu {
        width: 100%;
    }
    
    /* Hero section */
    .hero-section {
        min-height: 350px;
        padding: 40px 15px;
    }
    
    .hero-content h1 {
        font-size: 24px;
        line-height: 1.3;
    }
    
    .hero-content p {
        font-size: 14px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .hero-buttons a {
        width: 100%;
        text-align: center;
    }
    
    /* Services */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .service-card {
        margin: 0;
    }
    
    /* Forms */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 30px;
    }
    
    .footer-column h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .newsletter-form {
        flex-direction: column;
    }
    
    .newsletter-form input[type="email"],
    .newsletter-form button {
        width: 100%;
    }
}

/* Extra Small Screens (up to 400px) */
@media (max-width: 400px) {
    .site-logo {
        font-size: 24px;
    }
    
    .site-branding h1 {
        font-size: 16px;
    }
    
    .hero-content h1 {
        font-size: 20px;
    }
    
    .cta-primary,
    .cta-secondary {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .service-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Touch Device Adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .service-card:hover {
        transform: none;
    }
    
    .main-navigation a:hover {
        color: inherit;
    }
    
    /* Increase tap target sizes */
    a,
    button,
    input,
    textarea,
    select {
        min-height: 44px;
    }
    
    .mobile-menu nav a {
        padding: 15px;
    }
}

/* Print Styles */
@media print {
    /* Hide unnecessary elements */
    .top-header,
    .menu-toggle,
    .mobile-menu,
    .header-cta,
    .newsletter-section,
    .footer-social,
    .back-to-top {
        display: none !important;
    }
    
    /* Adjust layout for print */
    .site-header {
        position: static;
        box-shadow: none;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Ensure text is readable */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    /* Break pages appropriately */
    .service-card {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #ffffff;
        --border-color: #333;
    }
    
    body {
        background: var(--bg-color);
        color: var(--text-color);
    }
    
    .site-header {
        background: #2c2c2c;
    }
    
    .service-card {
        background: #2c2c2c;
        color: #ffffff;
    }
    
    .service-card h3,
    .service-card p {
        color: #ffffff;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .service-card {
        border: 2px solid currentColor;
    }
    
    a {
        text-decoration: underline;
    }
    
    button {
        border: 2px solid currentColor;
    }
}

/* ============================================
   CUSTOMIZER STYLES (from customizer-styles.css and customizer-loader.css)
   ============================================ */

/* Customizer Styles - Applied to Live Preview */

/* Primary Color */
a,
.site-title a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--primary-color, #e74c3c);
}

/* Secondary Color */
.page-content h1, 
h1.wp-block-heading,
.entry-title {
    color: var(--secondary-color, #3498db);
}

/* Dark Color */
.dark-text,
.footer-bottom {
    color: var(--dark-color, #2c3e50);
}

/* Body Background */
body {
    background-color: var(--body-bg, #f5f5f5);
    font-size: var(--body-font-size, 16px);
}

/* Header Styles */
.site-header {
    background-color: var(--header-bg, #ffffff);
}

.header-main {
    min-height: var(--header-height, 80px);
}

.header-top {
    background-color: var(--top-bar-bg, #1a1a1a);
    color: var(--top-bar-text, #ffffff);
}

.header-top a,
.header-top span {
    color: var(--top-bar-text, #ffffff);
}

/* Navigation Menu */
.main-navigation a {
    font-size: var(--menu-font-size, 16px);
    color: var(--menu-text-color, #333333);
}

.main-navigation a:hover,
.main-navigation li:hover > a {
    color: var(--menu-hover-color, #e74c3c) !important;
}

/* Typography */
h1, .h1,
.page-title,
.entry-title {
    font-size: var(--h1-font-size, 48px);
}

h2, .h2 {
    font-size: var(--h2-font-size, 36px);
}

/* Container Widths */
.container, 
.site-main, 
.main-content, 
article,
.site-content {
    max-width: var(--container-width-desktop, 95%);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .container, 
    .site-main, 
    .main-content, 
    article,
    .site-content {
        max-width: var(--container-width-mobile, 90%);
    }
}

/* Buttons */
.btn-primary,
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
input[type="submit"] {
    background-color: var(--btn-primary-bg, #e74c3c) !important;
    border-radius: var(--btn-border-radius, 5px);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg, #27ae60) !important;
    border-radius: var(--btn-border-radius, 5px);
}

/* Footer */
.site-footer {
    background-color: var(--footer-bg, #2c3e50);
    color: var(--footer-text-color, #ffffff);
}

.site-footer,
.site-footer p,
.site-footer span,
.footer-content {
    color: var(--footer-text-color, #ffffff);
}

.site-footer a {
    color: var(--footer-link-color, #ffffff);
}

.site-footer a:hover {
    color: var(--footer-link-color, #ffffff);
    opacity: 0.8;
}

/* Additional Elements */
.page-header {
    background-color: transparent;
}

.breadcrumb {
    font-size: 12px;
}

/* Service Cards */
.service-card {
    background: #ffffff;
    border-radius: var(--btn-border-radius, 5px);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border-radius: var(--btn-border-radius, 5px);
}

/* Ensure CSS Variables are Applied */
* {
    transition: color 0.3s ease, background-color 0.3s ease;
}/* Customizer Preview Loader - Ensures all styles load in preview */

/* Import all theme styles for customizer preview */
@import url('header-fixed.css');
@import url('footer.css');
@import url('services.css');
@import url('responsive.css');
@import url('animations.css');
@import url('homepage-hero.css');
@import url('customizer-styles.css');

/* Override any preview-specific issues */
body.customize-preview {
    background-color: #f5f5f5 !important;
}

/* Ensure visibility in preview */
.customize-preview * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix container widths in preview */
.customize-preview .container,
.customize-preview .site-main,
.customize-preview .main-content,
.customize-preview article {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Ensure header is visible */
.customize-preview .site-header {
    display: block !important;
    background: #ffffff;
    position: relative;
}

/* Ensure footer is visible */
.customize-preview .site-footer {
    display: block !important;
    background: #2c3e50;
    color: #ffffff;
}

/* Fix navigation in preview */
.customize-preview .main-navigation {
    display: block !important;
}

.customize-preview .main-navigation ul {
    display: flex !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.customize-preview .main-navigation li {
    position: relative;
}

.customize-preview .main-navigation a {
    display: block;
    padding: 10px 15px;
    color: #333333;
    text-decoration: none;
}

/* Fix mobile menu in preview */
.customize-preview .mobile-menu-toggle {
    display: none;
}

@media (max-width: 991px) {
    .customize-preview .mobile-menu-toggle {
        display: block;
    }
    
    .customize-preview .main-navigation {
        display: none;
    }
}

/* Ensure proper spacing */
.customize-preview .site-main {
    padding: 40px 0;
    min-height: 400px;
}

/* Fix buttons in preview */
.customize-preview .btn-primary,
.customize-preview .btn-secondary,
.customize-preview .wp-block-button__link {
    display: inline-block !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
}

/* Ensure text is visible */
.customize-preview p,
.customize-preview h1,
.customize-preview h2,
.customize-preview h3,
.customize-preview h4,
.customize-preview h5,
.customize-preview h6,
.customize-preview span,
.customize-preview a {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== DROPDOWN MENU FIX - GREEN BACKGROUND WITH WHITE TEXT ===== */
/* FINAL OVERRIDE: Ensure all dropdown menus have green background and white text */
.main-navigation .sub-menu,
.main-navigation ul.sub-menu,
.main-navigation .nav-menu .sub-menu,
.main-navigation .nav-menu ul.sub-menu,
.nav-menu .sub-menu,
ul.sub-menu,
.menu .sub-menu {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    z-index: 99999 !important;
}

/* Ensure ALL dropdown menu text is white */
.main-navigation .sub-menu a,
.main-navigation ul.sub-menu a,
.main-navigation .nav-menu .sub-menu a,
.main-navigation .nav-menu ul.sub-menu a,
.nav-menu .sub-menu a,
ul.sub-menu a,
.menu .sub-menu a,
.main-navigation .sub-menu li a,
.main-navigation ul ul li a {
    color: #ffffff !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Hover states for dropdown menu links */
.main-navigation .sub-menu a:hover,
.main-navigation ul.sub-menu a:hover,
.main-navigation .nav-menu .sub-menu a:hover,
.main-navigation .nav-menu ul.sub-menu a:hover,
.nav-menu .sub-menu a:hover,
ul.sub-menu a:hover,
.menu .sub-menu a:hover,
.main-navigation .sub-menu li a:hover,
.main-navigation ul ul li a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Third-level dropdown menus */
.main-navigation .sub-menu .sub-menu,
.main-navigation .nav-menu .sub-menu .sub-menu {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Parent menu items with children in dropdowns */
.main-navigation .sub-menu .menu-item-has-children > a,
.main-navigation .nav-menu .sub-menu .menu-item-has-children > a {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-left: 3px solid rgba(255, 255, 255, 0.5) !important;
}

.main-navigation .sub-menu .menu-item-has-children > a:hover,
.main-navigation .nav-menu .sub-menu .menu-item-has-children > a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}