/*
 * Styling for the Vantage Docs website.
 *
 * The colour palette uses calming blues and greens to reflect our focus on
 * wellness and natural health. The layout is responsive and designed to
 * present information clearly on both desktop and mobile devices.
 */

:root { --primary-color: #05456E; /* dark blue */ --secondary-color: #2CA581; /* teal green */ --light-bg: #F8FAFB; /* light background */ --accent-color: #0A8FA5; /* accent colour for hover states */ }

body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background-color: var(--light-bg); color: #333; line-height: 1.6; }

/* Header and navigation */
header { background-color: var(--primary-color); color: white; padding: 15px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

    header .container { width: 90%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }

    header img.logo { height: 80px; width: auto; }

nav a { color: white; margin-left: 20px; text-decoration: none; font-weight: 500; transition: opacity 0.2s ease; }

    nav a:hover { opacity: 0.8; }

/* Hero section */
.hero { background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color: white; padding: 100px 0; text-align: center; }

    .hero h1 { font-size: 2.5rem; margin-bottom: 15px; }

    .hero p { font-size: 1.2rem; max-width: 700px; margin: 0 auto 30px auto; }

    .hero .cta-button { background-color: white; color: var(--primary-color); padding: 12px 25px; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease; }

        .hero .cta-button:hover { background-color: #e5f1f2; }

/* Generic section styling */
.section { padding: 60px 0; width: 90%; max-width: 1200px; margin: 0 auto; }

    .section h2 { color: var(--primary-color); margin-bottom: 20px; font-size: 2rem; }

    .section p { margin-bottom: 20px; }

/* Services cards */
.services { display: flex; flex-wrap: wrap; justify-content: space-between; }

.service-card { flex: 1 1 calc(50% - 20px); background-color: white; border-radius: 8px; margin: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

    .service-card h3 { color: var(--secondary-color); margin-top: 0; }

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

    .contact-form label { display: block; margin-top: 15px; font-weight: 600; }

    .contact-form input,
    .contact-form textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; box-sizing: border-box; }

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

    .contact-form .consent { margin-top: 15px; display: flex; align-items: flex-start; }

        .contact-form .consent input[type="checkbox"] { margin-right: 10px; margin-top: 3px; }

        .contact-form .consent label { font-weight: normal; }

    .contact-form button { margin-top: 25px; background-color: var(--secondary-color); color: white; border: none; padding: 12px 25px; border-radius: 4px; cursor: pointer; font-size: 1rem; transition: background-color 0.2s ease; }

        .contact-form button:hover { background-color: var(--accent-color); }

/* Footer styling */
footer { background-color: var(--primary-color); color: white; padding: 30px 0; text-align: center; }

    footer p { margin: 5px 0; }

    footer a { color: white; text-decoration: none; margin: 0 8px; font-weight: 500; }

        footer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    nav a { margin-left: 10px; }
    .services { flex-direction: column; }
    .service-card { flex: 1 1 100%; margin: 10px 0; }
    .hero h1 { font-size: 2rem; }
    .hero p { font-size: 1rem; }
}