/* Set the background color, font, and basic layout */
html, body {
    height: 100%;
    margin: 0;
    background-color: #0b273a;
    color: white;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Main content styling */
body .content {
    flex: 1; /* Expands content area and pushes footer to the bottom */
    max-width: 60%; /* Limits width on larger screens */
    margin: 0 auto;
    padding: 20px;
    text-align: left;
}

/* Title styling */
h1 {
    font-size: 2.5em;
    margin: 0.2em 0 20px;
    white-space: normal; /* Allows line breaks on smaller screens */
}

/* Style for the highlighted dot in title */
.secondary-dot {
    color: #3af;
}

/* Subtitle styling */
h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.1em 0 20px;
}

/* Button styling */
.outlined-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    color: white;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
}

/* Button hover effect */
.outlined-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Footer styling */
.footer {
    display: flex;
    gap: 20px;
    padding-bottom: 35px;
}

.footer a {
    color: lightgrey;
    text-decoration: none;
    font-size: 0.9em;
}

/* Icon styling for footer links */
.footer a .icon {
    margin-right: 8px;
    font-size: 1em;
}

/* Hover effect for footer links */
.footer a:hover {
    text-decoration: underline;
}

/* Text styling for paragraphs and address */
p, address {
    margin-bottom: 20px;
    line-height: 1.6; /* Improves readability */
}

/* Mobile styling */
@media (max-width: 600px) {
    body .content {
        max-width: 80%; /* Increases width for mobile */
    }

    h1 {
        font-size: 2em; /* Smaller font size for mobile */
    }

    h2 {
        font-size: 1.2em; /* Adjusted subtitle font size */
    }
}