/* Font face definition for Neue Kaine */
@font-face {
    font-family: 'Neue Kaine';
    src: url('neue-kaine-variable.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Neue Kaine', Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #F5F6F8;
    background-color: #0A0B1B;
}

.logo {
    width: 100%; /* Make logo responsive */
    max-width: 200px; /* Adjust max width for smaller screens */
    height: auto; /* Maintain aspect ratio */
}

.book-meeting {
    color: #00FFB3;
}

.book-meeting:hover {
    text-decoration: none;
}

header, footer {
    width: 100%;
}

main {
    max-width: 100%;
    width: 100%;
    margin: 0 auto; /* Centering main content */
    padding: 0 0.5rem; /* Reduce padding for smaller screens */
    box-sizing: border-box; /* Ensure padding is included in width */
}

.heading {
    font-weight: 900;
    font-size: 1.25rem; /* Adjust font size for smaller screens */
    line-height: 1.3;
}

.highlight {
    background-color: #00FFB3; /* Green background */
    color: #0A0B1B; /* Dark text color for contrast */
    padding: 0.25rem 0.5rem; /* Adjust padding for smaller screens */
    display: inline-block; /* Ensure the background is only as wide as the text */
    transform: rotate(-2.5deg); /* Use transform instead of rotate */
}

.highlight-text {
    display: inline-block; /* Ensure the text itself can be rotated */
    transform: rotate(2.5deg); /* Rotate the text by 2.5 degrees */
}

p {
    font-size: 0.875rem; /* Adjust font size for smaller screens */
    font-weight: 600;
    line-height: 1.4;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .heading {
        font-size: 1.25rem; /* Adjust font size for smaller screens */
    }

    p {
        font-size: 0.875rem; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 576px) {
    .heading {
        font-size: 1.125rem; /* Further adjust font size for very small screens */
    }

    p {
        font-size: 0.75rem; /* Further adjust font size for very small screens */
    }

    .highlight {
        padding: 0.25rem 0.5rem; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 375px) {
    .heading {
        font-size: 1rem; /* Further adjust font size for smaller screens */
    }

    p {
        font-size: 0.75rem; /* Further adjust font size for smaller screens */
    }

    .highlight {
        padding: 0.25rem 0.4rem; /* Adjust padding for very small screens */
    }
}

@media (max-width: 320px) {
    .heading {
        font-size: 0.875rem; /* Reduce font size for extremely small screens */
    }

    p {
        font-size: 0.625rem; /* Reduce font size for extremely small screens */
    }

    .highlight {
        padding: 0.2rem 0.4rem; /* Adjust padding for extremely small screens */
    }

    /* Ensure no overflow issues */
    body, html {
        overflow-x: hidden;
    }
}