/* Add this new block to your CSS, ideally near the existing .logo styles */
.header-logo-img {
    height: 40px; /* Adjust size as needed, e.g., 30px, 50px */
    width: auto;
    vertical-align: middle; /* Ensures it sits nicely in the middle */
}

/* Remove or comment out the existing .logo styles if they conflict */
.logo {
    font-size: 1.5em; /* You can keep this block, but the font size won't affect the image */
    font-weight: 800;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.cta-secondary {
            background-color: transparent; /* Makes the background fully transparent */
            color: var(--light-text); /* White text */
            border: 2px solid var(--light-text); /* White border, 2 pixels thick */
            box-shadow: none; /* Removes any shadow, as it's transparent */
        }

        .cta-secondary:hover {
            background-color: var(--light-color); /* Changes background to white on hover */
            color: var(--secondary-color); /* Changes text to dark on hover */
            border-color: var(--light-text); /* Keeps border white on hover */
        }