body {
        font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; 
            margin: 0;
            font-family: Arial, sans-serif;
            background: #e2e2e2;
            color: #222;
        }

        /* Header bar */
/* Header bar */
header {
    background: white;
    border-bottom: 2px solid #ddd; /* separates from body */
    padding: 15px 40px;
    /* make it stay on top */
    position: sticky;
    top: 0;
    z-index: 1000; /* ensures it stays above other content */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* A lil shadow to make it pop out more when scrolling*/
}

/* Flex container for logo + nav */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
}

/* Logo + brand name container */
.logo-text {
    display: flex;
    align-items: center;
    gap: 10px; /* space between logo and text */
}

/* Logo */
.logo {
    height: 50px; /* scale logo */
}

/* Brand name */
.brand-name {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #111; /* same colour as nav links */
}

/* Navigation links */
.nav-links {
    list-style: none;
    display: flex;
    gap: 30px; /* space between links */
    margin: 0;
    padding: 0;
}

.nav-links li a {
    text-decoration: none;
    color: #111;
    font-weight: 500;
    font-size: 1em;
    transition: color 0.2s;
}

.nav-links li a:hover {
    color: #0077ff; /* highlight on hover */
    position: relative; /* needed for absolute dropdown positioning */
}
.nav-links li {
    position: relative; 
}



.dropdown-content{
    
    display: none; /* hidden by default */
    list-style: none;
    margin: 0;        /* removes default ul margin */
    padding: 10px 15px;
    position: absolute;
    top: calc(100% + 5px);             /* below parent */
    left: 50%;               /* start at the horizontal center of parent li */
    transform: translateX(-50%); /* shift left by half of dropdown width */
    background: white;
    min-width: 150px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 1000;
}

/* Dropdown submenu items */
.dropdown-content li a {
    display: block;
    padding: 10px 15px;
    color: #111;
    text-decoration: none;
    font-size: 0.95em;
    transition: background 0.2s;
}

.dropdown-content li a:hover {
    background: #f0f0f0;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}




        header h1 {
            margin: 0;
            font-size: 2em;
        }

        header p {
            margin: 8px 0 0 0;
            color: #ccc;
            font-size: 1.1em;
        }

        .section {
            padding: 50px 20px;
            max-width: 900px;
            margin: auto;
        }

        .section h2 {
            margin-top: 0;
            font-size: 1.8em;
            color: #111;
        }

        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-top: 25px;
        }

        .card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #ddd;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }

        .card h3 {
            margin-top: 0;
            font-size: 1.3em;
            color: #111;
        }

        .contact-box {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #ddd;
            max-width: 500px;
            margin: auto;
        }

        .contact-box label {
            display: block;
            margin-bottom: 6px;
        }
.card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-5px);
}
button {
    background: #0077ff;
    color: white;
    transition: background 0.2s, transform 0.2s;
}
button:hover {
    background: #005fcc;
    transform: translateY(-2px);
}

.contact-box button:hover {
    background: #333;
}

        .contact-box input,
        .contact-box textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border-radius: 6px;
            border: 1px solid #aaa;
            font-size: 1em;
        }

        .contact-box button {
            width: 100%;
            padding: 12px;
            font-size: 1em;
            background: #111;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
        }

        footer {
            background: #111;
            color: #bbb;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            font-size: 0.9em;
        }


        @media(max-width: 480px){
    .section { padding: 30px 15px; }
}