/* BALANS schilderwerken - Complete Marketing Optimized Styles */
:root {
    --primary: #1e4d3a;
    --primary-light: #2a6b4f;
    --primary-dark: #14362a;
    --secondary: #f4a261;
    --accent: #e76f51;
    --success: #2d8f3f;
    --warning: #f4a261;
    --danger: #e76f51;
    --white: #ffffff;
    --light: #f8f9fa;
    --bg: #f8f9fa;
    --text: #2c3e50;
    --text-light: #6c757d;
    --border: #dee2e6;
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.2);
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --transition: all 0.3s ease;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden !important;
}

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text);
}

h1 {
    font-size: clamp(1.5rem, 5vw, 1.5rem);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.lead {
    font-size: 1.2rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    line-height: 1.5;
}

/* Header - VERBETERD MET FIXES */
.header {
    background: var(--white);
    box-shadow: 0 2px 10px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 15px 0 !important;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

/* Logo groter maken en BALANS tekst verbergen */
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 2.0rem;
    color: var(--primary);
}

.brand img {
    height: 100px !important;
    /* of groter naar smaak */
    width: auto !important;
    max-width: none !important;
    /* voorkomt afkappen */
}

/* Verberg BALANS tekst naast logo */
.brand span,
.brand-text,
.company-name,
.nav h1:not(.sr-only) {
    display: none !important;
}

/* Mobile menu toggle - VERBETERD */
.menu-toggle {
    display: none;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: var(--border-radius);
    z-index: 9999 !important;
    position: relative !important;
}

.links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.links a {
    text-decoration: none;
    color: var(--text);
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

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

.links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: var(--primary);
    transition: var(--transition);
}

.links a:hover::after {
    width: 100%;
}

/* Buttons */
.btn,
.btn-outline,
.btn-primary {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    font-size: 1rem;
    line-height: 1.4;
}

.btn {
    background: var(--gradient-primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(30, 77, 58, 0.3);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 77, 58, 0.4);
}

.btn-primary {
    background: var(--gradient-secondary);
    color: var(--white);
    border-color: var(--secondary);
    box-shadow: 0 4px 15px rgba(244, 162, 97, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 162, 97, 0.4);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

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

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.btn-urgent {
    background: var(--danger);
    color: var(--white);
    padding: 8px 16px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}

.whatsapp-float a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    transition: var(--transition);
}

.whatsapp-float a:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--light) 0%, var(--white) 100%);
    padding: 4rem 0;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.badge {
    display: inline-block;
    background: var(--gradient-secondary);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 2rem 0;
}

.trust-indicators span {
    background: var(--success);
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
    font-weight: 500;
}

.actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.hero-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px var(--shadow);
    border: 1px solid var(--border);
}

.row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--primary);
}

.small {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Urgency Banner */
.urgency-banner {
    background: var(--gradient-secondary);
    color: var(--white);
    padding: 1rem 0;
    text-align: center;
}

.urgency-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.urgency-icon {
    font-size: 1.5rem;
}

/* Cards & Grid - VERBETERD VOOR MOBIEL */
.cards,
.services-grid,
.projects-grid,
.reviews-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
}

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

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

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

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

.card,
.service-card,
.project-card,
.review-card {
    background: var(--white);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
    transition: var(--transition);
    width: 100%;
    box-sizing: border-box;
}

.card:hover,
.service-card:hover,
.project-card:hover,
.review-card:hover {
    box-shadow: 0 8px 25px var(--shadow-hover);
    transform: translateY(-2px);
}

.service-card.featured {
    border: 2px solid var(--secondary);
    transform: scale(1.02);
}

.service-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.price-indicator {
    color: var(--secondary);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.service-list {
    list-style: none;
    margin: 1rem 0;
}

.service-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.service-list li:last-child {
    border-bottom: none;
}

.service-cta {
    margin-top: 1.5rem;
}

/* Project Cards */
.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

.project-info h4 {
    margin-bottom: 0.5rem;
}

.project-tag {
    background: var(--primary);
    color: var(--white);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: 500;
}

.project-cta {
    text-align: center;
    margin-top: 2rem;
}

/* Reviews */
.stars {
    color: #ffc107;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.reviewer {
    margin-top: 1rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}

.reviewer strong {
    display: block;
    color: var(--primary);
}

.google-reviews-cta {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.google-reviews-cta a {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

/* Testimonial Highlight */
.testimonial-highlight {
    background: var(--gradient-primary);
    color: var(--white);
    padding: 3rem 0;
    text-align: center;
}

.testimonial-card {
    max-width: 800px;
    margin: 0 auto;
}

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

.testimonial-card blockquote {
    font-size: 1.5rem;
    font-style: italic;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.testimonial-card cite {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Service Area */
.service-area {
    background: var(--bg);
}

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

.area-card {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border);
}

.area-card.primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--white) 0%, #f0f7f5 100%);
}

.area-card ul {
    list-style: none;
    margin-top: 1rem;
}

.area-card li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

/* CTA Banner */
.cta-banner {
    background: var(--gradient-secondary);
    color: var(--white);
    padding: 3rem 0;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    text-align: center;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Contact Form */
.contact {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: start;
}

.enhanced-form {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 25px var(--shadow);
    border: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.input,
.form select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 1rem;
    transition: var(--transition);
    margin-bottom: 1rem;
    font-family: inherit;
}

.input:focus,
.form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30, 77, 58, 0.1);
}

.form-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
}

.checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
}

.form-info {
    background: var(--bg);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-card h3 {
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
    border: 1px solid var(--border);
}

.contact-method:hover {
    background: var(--white);
    box-shadow: 0 4px 15px var(--shadow);
    transform: translateY(-1px);
}

.contact-method.whatsapp:hover {
    background: #25d366;
    color: var(--white);
}

.method-icon {
    font-size: 1.5rem;
}

.business-info p {
    margin-bottom: 0.5rem;
}

/* Footer */
.footer {
    background: var(--primary);
    color: var(--white);
    padding: 3rem 0 1rem;
}

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

.footer-section h4 {
    color: var(--white);
    margin-bottom: 1rem;
}

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

.footer-section li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: var(--transition);
}

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

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Sections */
.section {
    padding: 4rem 0;
    overflow: visible !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Features section specifiek voor mobiel fix */
.features-section,
section:nth-of-type(2) {
    overflow: visible !important;
    padding: 20px 15px 40px !important;
}

/* Main content overflow fix */
main,
.main-content {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* MOBILE RESPONSIVE - COMPLEET VERBETERD */
@media (max-width: 768px) {

    /* Container aanpassingen */
    .container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }

    /* Header mobile fixes */
    .header {
        padding: 10px 0 !important;
    }

    .nav {
        padding: 0.5rem 0;
    }

    .brand img {
        height: 80px !important;
    }

    /* Menu toggle zichtbaar maken */
    .menu-toggle {
        display: block !important;
        z-index: 9999 !important;
        position: relative !important;
    }

    /* Mobile menu - VERBETERD */
    .links,
    .nav-menu,
    .mobile-menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--white) !important;
        flex-direction: column !important;
        padding: 2rem !important;
        box-shadow: 0 4px 15px var(--shadow) !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        transition: var(--transition) !important;
        pointer-events: none !important;
        z-index: 9998 !important;
        border-top: 1px solid var(--border) !important;
    }

    .links.active,
    .links.open,
    .nav-menu.active,
    .nav-menu.open,
    .mobile-menu.active,
    .mobile-menu.open {
        transform: translateY(0) !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }

    .links a {
        padding: 1rem 0;
        border-bottom: 1px solid var(--border);
        text-align: center;
        font-size: 1.1rem;
        width: 100%;
    }

    /* Hero section mobile */
    .hero {
        padding: 2rem 0;
        overflow: visible !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: center;
    }

    .hero-card {
        order: -1;
        margin-bottom: 2rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-card .cards {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .badge {
        display: block;
        margin: 0 auto 1.5rem;
        text-align: center;
    }

    h1 {
        font-size: 2rem !important;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .actions {
        justify-content: center;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
    }

    .actions .btn,
    .actions .btn-outline {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 14px 20px;
    }

    .trust-indicators {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .trust-indicators span {
        text-align: center;
        font-size: 0.85rem;
        padding: 8px 12px;
        width: 100%;
    }

    /* Urgency banner mobile */
    .urgency-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding: 0 1rem;
    }

    .urgency-content>div {
        margin-bottom: 0.5rem;
    }

    .btn-urgent {
        font-size: 0.9rem;
        padding: 10px 16px;
    }

    /* Services Grid Mobile - VERBETERD */
    .services-grid,
    .features-section,
    section:nth-of-type(2) {
        overflow: visible !important;
        padding: 20px 0 40px !important;
    }

    .services-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .service-card,
    .feature-card,
    .grid-item {
        margin-bottom: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .service-card.featured {
        transform: none !important;
        order: -1;
    }

    /* Projects Grid Mobile */
    .projects-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .project-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .project-card img {
        height: 180px;
    }

    /* Reviews Grid Mobile */
    .reviews-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    .review-card {
        padding: 1.25rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* CTA mobile */
    .cta-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .cta-actions {
        justify-content: center;
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .cta-actions .btn,
    .cta-actions .btn-outline {
        width: 100%;
    }

    /* Contact Section Mobile */
    .contact {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .enhanced-form {
        padding: 1.5rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-method {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .method-icon {
        font-size: 2rem;
    }

    /* Area Grid Mobile */
    .area-grid {
        grid-template-columns: 1fr !important;
    }

    /* Footer Mobile */
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .footer-links {
        justify-content: center;
    }

    /* WhatsApp Button Mobile */
    .whatsapp-float {
        bottom: 20px;
        right: 15px;
    }

    .whatsapp-float a {
        width: 55px;
        height: 55px;
    }

    /* Typography Mobile */
    h2 {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .lead {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    /* Cards Mobile */
    .card {
        padding: 1.25rem;
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-list li {
        padding: 0.75rem 0;
        font-size: 0.95rem;
    }

    /* Form Mobile Improvements */
    .input,
    .form select {
        padding: 14px 16px;
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    .btn-large {
        padding: 16px 24px;
        font-size: 1rem;
        width: 100%;
    }

    /* Section Spacing Mobile */
    .section {
        padding: 2.5rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    /* Grid container algemene fix */
    .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Testimonial Mobile */
    .testimonial-card blockquote {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }

    .testimonial-card cite {
        font-size: 1rem;
    }
}

/* Extra kleine schermen */
@media (max-width: 480px) {
    .container {
        padding: 0 12px !important;
    }

    .hero {
        padding: 1.5rem 0;
    }

    .section {
        padding: 2rem 0 !important;
    }

    .enhanced-form {
        padding: 1rem;
    }

    .btn-large {
        padding: 14px 20px;
        font-size: 0.95rem;
    }

    h1 {
        font-size: 1.9rem !important;
    }

    h2 {
        font-size: 1.6rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .lead {
        font-size: 1rem;
    }

    .urgency-content {
        padding: 0 0.5rem;
        font-size: 0.9rem;
    }

    .whatsapp-float {
        bottom: 15px;
        right: 10px;
    }

    .whatsapp-float a {
        width: 50px;
        height: 50px;
    }

    /* Very small screens - stack everything */
    .trust-indicators {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }

    .trust-indicators span {
        text-align: center;
        width: 100%;
    }

    .actions {
        align-items: stretch;
    }

    .hero-card .cards {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Brand logo kleinere schermen */
    .brand img {
        height: 45px !important;
    }
}

/* Animation utilities */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -30%);
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Print styles */
@media print {

    .whatsapp-float,
    .urgency-banner,
    .cta-banner,
    .menu-toggle {
        display: none !important;
    }
}

/* Algemene overflow preventie */
body {
    overflow-x: hidden !important;
}

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Alle secties volledige breedte */
section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}


/* ========================================
   BALANS CSS FIXES - Voeg toe aan bestaande CSS
   ======================================== */

/* 1. DESKTOP LOGO GROTER */
@media (min-width: 769px) {
    .brand img {
        height: 70px !important;
        /* Groter op desktop */
        width: auto !important;
        max-width: 140px !important;
    }

    .header {
        padding: 20px 0 !important;
        /* Meer ruimte voor groter logo */
    }
}

/* 2. HEADER STICKY MAKEN */
.header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* 3. LOGO KLIKBAAR VOOR SCROLL NAAR BOVEN */
.brand {
    cursor: pointer;
}

/* 4. WERKGEBIED SECTIE DESKTOP FIX */
.service-area .area-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem !important;
    max-width: 800px;
    margin: 0 auto;
}

.area-card {
    background: var(--white);
    padding: 2rem !important;
    border-radius: 12px;
    border: 2px solid var(--border);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.area-card.primary {
    border-color: var(--primary);
    background: linear-gradient(135deg, #ffffff 0%, #f0f7f5 100%);
}

.area-card h4 {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.area-card li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text);
    font-size: 1rem;
}

.area-card li:last-child {
    border-bottom: none;
}

/* 5. MOBILE MENU FIX - JAVASCRIPT AANVULLING NODIG */
@media (max-width: 768px) {

    /* Menu button styling */
    .menu-toggle {
        display: block !important;
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        position: relative !important;
        transition: all 0.3s ease !important;
    }

    .menu-toggle:hover {
        background: var(--primary-light) !important;
        transform: scale(1.05);
    }

    /* Menu container */
    .links {
        display: none !important;
        /* Verborgen by default */
    }

    .links.active,
    .links.show {
        display: flex !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: white !important;
        flex-direction: column !important;
        padding: 1rem !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
        animation: slideDown 0.3s ease-out !important;
        z-index: 9999 !important;
    }

    .links a {
        padding: 1rem !important;
        text-align: center !important;
        border-bottom: 1px solid var(--border) !important;
        font-size: 1.1rem !important;
        color: var(--text) !important;
        text-decoration: none !important;
        transition: background 0.3s ease !important;
    }

    .links a:hover {
        background: var(--light) !important;
        color: var(--primary) !important;
    }

    .links a:last-child {
        border-bottom: none !important;
    }

    /* Hide CTA in mobile menu */
    .nav .cta {
        display: none !important;
    }
}

/* 6. ANIMATIE VOOR MENU */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7. DESKTOP VERBETERINGEN */
@media (min-width: 769px) {

    /* Services grid spacing */
    .services-grid {
        gap: 2rem !important;
    }

    /* Projects grid spacing */
    .projects-grid {
        gap: 2rem !important;
    }

    /* Better hover effects */
    .service-card:hover,
    .project-card:hover,
    .area-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    /* CTA section spacing */
    .cta-content {
        padding: 0 2rem;
    }

    /* Contact form max width */
    .contact {
        max-width: 1100px;
        margin: 0 auto;
    }
}

/* 8. ALGEMENE VERBETERINGEN */
.section {
    padding: 4rem 0 !important;
}

@media (max-width: 768px) {
    .section {
        padding: 3rem 0 !important;
    }
}

/* ========================================
   URGENTE FIXES - Sticky Header & Logo
   Voeg dit ONDERAAN je styles.css toe
   ======================================== */

/* 1. FORCEER STICKY HEADER - Werkt op alle browsers */
.header {
    position: fixed !important;  /* Fixed ipv sticky voor betere support */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    z-index: 10000 !important;  /* Extra hoog */
}

/* Compenseer voor fixed header */
body {
    padding-top: 80px !important;  /* Desktop */
}

@media (max-width: 768px) {
    body {
        padding-top: 70px !important;  /* Mobiel */
    }
}

/* 2. LOGO VEEL GROTER MAKEN */
/* Desktop logo */
@media (min-width: 769px) {
    .header {
        padding: 15px 0 !important;
    }
    
    .brand img,
    .nav .brand img,
    .header .brand img {
        height: 80px !important;  /* Extra groot op desktop */
        min-height: 80px !important;
        width: auto !important;
        max-width: 160px !important;
        object-fit: contain !important;
    }
    
    .nav {
        min-height: 80px;  /* Zorg voor genoeg ruimte */
        align-items: center;
    }
}

/* Mobiel logo */
@media (max-width: 768px) {
    .header {
        padding: 10px 0 !important;
    }
    
    .brand img,
    .nav .brand img,
    .header .brand img {
        height: 60px !important;  /* Groter op mobiel */
        min-height: 60px !important;
        width: auto !important;
        max-width: 120px !important;
        object-fit: contain !important;
    }
    
    .nav {
        min-height: 60px;
        align-items: center;
    }
}

/* 3. FORCEER LOGO GROOTTE - Override alles */
img[src*="logo"] {
    height: 80px !important;  /* Desktop */
    min-height: 80px !important;
}

@media (max-width: 768px) {
    img[src*="logo"] {
        height: 60px !important;  /* Mobiel */
        min-height: 60px !important;
    }
}

/* 4. ZORG DAT HERO NIET ONDER HEADER SCHUIFT */
.hero {
    margin-top: 0 !important;
}

/* 5. FIX VOOR SCROLL ANCHORS MET FIXED HEADER */
section[id]:target::before {
    content: "";
    display: block;
    height: 100px;  /* Hoogte van header + extra ruimte */
    margin-top: -100px;
    visibility: hidden;
    pointer-events: none;
}

/* 6. EXTRA SPECIFIEK VOOR JOUW LOGO */
.brand {
    display: flex !important;
    align-items: center !important;
}

.brand img {
    display: block !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* 7. DEBUG - Als logo nog steeds klein is */
* img[alt*="BALANS"],
* img[alt*="logo"],
.brand > img:first-child {
    height: 80px !important;
    min-height: 80px !important;
    width: auto !important;
}

@media (max-width: 768px) {
    * img[alt*="BALANS"],
    * img[alt*="logo"],
    .brand > img:first-child {
        height: 60px !important;
        min-height: 60px !important;
    }
}

/* ========================================
   SPECIFIEKE LOGO FIXES
   Voeg dit ONDERAAN je styles.css toe
   ======================================== */

/* 1. HEADER LOGO - GROTER MAKEN */
.header .brand img,
.nav .brand img {
    height: 80px !important;  /* Groot op desktop */
    min-height: 80px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

@media (max-width: 768px) {
    .header .brand img,
    .nav .brand img {
        height: 60px !important;  /* Iets kleiner op mobiel */
        min-height: 60px !important;
        max-width: 120px !important;
    }
}

/* 2. HERO CARD CIRCLE LOGO - ORIGINELE GROOTTE BEHOUDEN */
.hero-card .circle img,
.hero-card .row .circle img {
    height: 100% !important;  /* Vul de cirkel */
    width: 100% !important;   /* Vul de cirkel */
    min-height: unset !important;  /* Reset min-height */
    max-width: unset !important;   /* Reset max-width */
    object-fit: cover !important;  /* Of 'contain' als je het hele logo wilt zien */
    border-radius: 50% !important; /* Blijf rond */
    box-shadow: none !important;   /* Geen schaduw in cirkel */
}

/* Circle zelf op originele grootte houden */
.hero-card .circle {
    width: 60px !important;  /* Originele grootte */
    height: 60px !important; /* Originele grootte */
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 3px solid var(--primary) !important;
}

/* 3. STICKY HEADER FIX */
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    z-index: 10000 !important;
}

/* Compenseer voor fixed header */
body {
    padding-top: 120px !important;  /* Desktop - groter voor groter logo */
}

@media (max-width: 768px) {
    body {
        padding-top: 80px !important;  /* Mobiel */
    }
}

/* 4. NAV AANPASSEN VOOR GROTER LOGO */
.nav {
    min-height: 80px !important;
    align-items: center !important;
    padding: 10px 0 !important;
}

@media (max-width: 768px) {
    .nav {
        min-height: 60px !important;
    }
}

/* 5. ANDERE LOGO'S IN DE SITE - NIET AANRAKEN */
/* Voorkom dat andere logo's worden beïnvloed */
.card img[src*="logo"]:not(.header img):not(.nav img),
.service-card img[src*="logo"],
.footer img[src*="logo"] {
    height: auto !important;  /* Behoud originele grootte */
    min-height: unset !important;
}

/* ULTIEME LOGO FIX */
.header .brand img {
    height: 120px !important;
    min-height: 120px !important;
    width: auto !important;
    max-width: 200px !important;
}

@media (max-width: 768px) {
    .header .brand img {
        height: 80px !important;
        min-height: 80px !important;
        max-width: 150px !important;
    }
}

/* Body padding voor fixed header */
body {
    padding-top: 120px !important;
}

@media (max-width: 768px) {
    body {
        padding-top: 90px !important;
    }
}

/* ================================
   LOGO FIX - GROTER & RESPONSIEF
   ================================ */

/* Standaard desktop logo */
.brand img {
    height: 180px !important;
    /* groot logo */
    width: auto !important;
    max-width: none !important;
    /* geen beperking */
}

/* Desktop extra breed (vanaf 1200px) */
@media (min-width: 1200px) {
    .brand img {
        height: 180px !important;
    }
}

/* Tablets (769px – 1199px) */
@media (max-width: 1199px) and (min-width: 769px) {
    .brand img {
        height: 120px !important;
    }
}

/* Mobiel */
@media (max-width: 768px) {
    .brand img {
        height: 80px !important;
    }
}

/* Extra kleine schermen */
@media (max-width: 480px) {
    .brand img {
        height: 70px !important;
    }
}

/* Extra ruimte in header zodat groot logo past */
.header {
    padding: 5px 0 !important;
}
.brand img,
.logo img {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 50% !important;
    /* maakt het rond */
    display: inline-block;
}

.logo {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* WERKGEBIED MOBIEL FIX */
@media (max-width: 768px) {
    .service-area .area-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .area-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }
    
    .area-card h4 {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .area-card ul {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .area-card li {
        padding: 0.5rem 0 !important;
        font-size: 0.9rem !important;
        border-bottom: 1px solid var(--border) !important;
    }
    
    .area-card li:last-child {
        border-bottom: none !important;
    }
}

/* EXTRA MOBIEL MENU STYLING */
@media (max-width: 768px) {
    .menu-toggle {
        display: block !important;
        background: var(--primary) !important;
        color: white !important;
        border: none !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
    }
    
    .links {
        display: none !important;
        position: fixed !important;
        top: 100px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: white !important;
        flex-direction: column !important;
        padding: 1rem 0 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
        z-index: 10000 !important;
        border-top: 1px solid var(--border) !important;
    }
    
    .links.active {
        display: flex !important;
        animation: slideDown 0.3s ease-out !important;
    }
    
    .links a {
        padding: 1rem 2rem !important;
        text-align: left !important;
        border-bottom: 1px solid var(--border) !important;
        color: var(--text) !important;
        text-decoration: none !important;
        transition: background 0.3s ease !important;
    }
    
    .links a:hover {
        background: var(--light) !important;
        color: var(--primary) !important;
    }
    
    .links a:last-child {
        border-bottom: none !important;
    }
    
    .nav .cta {
        display: none !important;
    }
}

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

/* Social icons in header */
.nav-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link.instagram {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(131, 58, 180, 0.4);
}

@media (max-width: 768px) {
    .nav-social {
        gap: 8px;
    }
    
    .social-link {
        width: 34px;
        height: 34px;
    }
}

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Instagram Header - Mobiel Fix</title>
    <style>
        /* VERVANG je huidige .nav-social CSS met deze: */
        
        .nav-social {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: 15px; /* Ruimte voor CTA button */
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            flex-shrink: 0; /* Voorkom dat het verkleint */
        }

        .social-link.instagram {
            background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
        }

        .social-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(131, 58, 180, 0.4);
        }

        /* MOBIEL - Zorg dat het ALTIJD zichtbaar is */
        @media (max-width: 768px) {
            .nav-social {
                display: flex !important; /* Force display op mobiel */
                gap: 8px;
                margin-right: 10px;
            }
            
            .social-link {
                width: 36px;
                height: 36px;
            }

            /* Als je nav een andere layout heeft op mobiel */
            .nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            /* Zorg dat social icons naast menu button blijven */
            .brand {
                order: 1;
            }

            .menu-toggle {
                order: 3;
            }

            .nav-social {
                order: 2;
                margin-left: auto;
                margin-right: 10px;
            }

            .links {
                order: 4;
                width: 100%;
            }

            .cta {
                order: 5;
            }
        }

        /* Extra kleine schermen */
        @media (max-width: 480px) {
            .social-link {
                width: 34px;
                height: 34px;
            }

            .social-link svg {
                width: 18px;
                height: 18px;
            }
        }
    </style>
</head>
<body>

<!-- OPTIE 1: Instagram naast menu (BESTE voor mobiel) -->
<header class="header">
    <div class="container">
        <nav class="nav">
            <a class="brand" href="#" aria-label="BALANS schilderwerken Homepage">
                <img src="assets/img/logo.png" alt="BALANS schilderwerken logo"/>
                <span>BALANS</span>
            </a>
            
            <!-- Instagram VOOR menu button -->
            <div class="nav-social">
                <a href="https://www.instagram.com/balansonderhoud/" 
                   target="_blank" 
                   rel="noopener" 
                   class="social-link instagram" 
                   aria-label="Volg ons op Instagram">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                    </svg>
                </a>
            </div>
            
            <button class="menu-toggle" aria-label="Menu openen">Menu</button>
            
            <div class="links">
                <a href="#diensten">Diensten</a>
                <a href="#projecten">Projecten</a>
                <a href="#reviews">Reviews</a>
                <a href="#contact">Contact</a>
            </div>
            
            <div class="cta">
                <a class="btn" href="#contact">🎯 Gratis Offerte</a>
            </div>
        </nav>
    </div>
</header>

<div style="padding: 100px 20px; background: #f5f5f5; text-align: center;">
    <h2>📱 Nu ook zichtbaar op mobiel!</h2>
    <p style="margin-top: 10px; color: #666;">Test het door je scherm kleiner te maken</p>
    <p style="margin-top: 20px; font-size: 14px; color: #999;">
        Layout op mobiel:<br>
        [Logo] [Instagram] [Menu]
    </p>
</div>

<!-- OPTIE 2: Als het nog steeds niet werkt, voeg dit toe in je mobiele menu -->
<style>
    /* Voeg Instagram ook TOE aan het uitklapmenu op mobiel */
    @media (max-width: 768px) {
        .links.active::before {
            content: '';
            display: block;
            padding: 15px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .links.active .instagram-menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 20px;
            background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
            border-radius: 8px;
            margin: 10px 0;
            color: white;
            text-decoration: none;
            font-weight: 600;
        }
    }
</style>

<!-- Voeg dit TOE IN je .links div (in het uitklapmenu) -->
<div class="links">
    <a href="https://www.instagram.com/balansonderhoud/" 
       target="_blank" 
       rel="noopener" 
       class="instagram-menu-item">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
        </svg>
        Volg ons op Instagram
    </a>
    <a href="#diensten">Diensten</a>
    <a href="#projecten">Projecten</a>
    <a href="#reviews">Reviews</a>
    <a href="#contact">Contact</a>
</div>

</body>
</html>