.white {
    color: #FBFBFF;
}

.red {
    color: #000000;
}

.bold {
    font-weight: 700;
}

.h1 {
    width: 100%;
    background-color: #B80C09;
    font-size: clamp(24px, 5vw, 52px);
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 10px 10px 10px 10px; /* Smooth rounded edges */
}

.h2 {
    width: 100%;
    background-color: #01BAEF;
    font-size: clamp(20px, 4vw, 40px);
    text-align: center;
    color:#000000;
    margin: 0;
    padding: 0;
    border-radius: 10px 10px 0px 0px; /* Smooth rounded edges */
}

.h3 {
    width: 100%;
    font-size: clamp(16px, 2vw, 24px);
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 10px 10px 10px 10px; /* Smooth rounded edges */
}

.p {
    width: 100%;
    background-color: #0B4F6C;
    font-size: clamp(16px, 2vw, 24px);
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 0px 0px 10px 10px; /* Smooth rounded edges */
}

.body {
    font-family: 'Allan', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow-x: hidden;
    background-color: #040F16;
}

.box {
    width: 100%;
    padding: 1vw 5%; /* Adjust padding for top/bottom and sides */
    margin: 1vw auto; /* Adjust margins as needed */

    box-sizing: border-box;
}

.filled {
    width: 100vw;
    margin-bottom: 0;
}

.centered {
    align-self: center;
}

.rounded {
    border-radius: 15px; /* Rounded corners */
}


.menu {
    position: fixed;
    top: 0;
    left: -250px; /* Piilotettu aluksi */
    width: 250px;
    height: 100%;
    background: #B80C09;
    color: #FBFBFF;
    padding-top: 20px;
    transition: left 0.3s ease-in-out;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu ul li {
    padding: 15px;
    text-align: center;
}

.menu ul li a {
    color: #000000;
    background-color: #01BAEF;
    font-size: clamp(16px, 2vw, 24px);
    text-decoration: none;
    display: block;
}

.menu ul li a:hover {
    background: #0B4F6C;
}

.open-btn {
    position: fixed;
    top: 50%;
    left: 20px;
    transform: translateX(-50%);
    background: #B80C09;
    color: #FBFBFF;
    border: none;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    transition: left 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.container {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center items horizontally */
    padding: 20px;
}

.container2 {
    display: flex; /* Enable Flexbox */
    justify-content: center; /* Center items horizontally */
    padding: 20px;
}

.image {
    max-width: 50%; /* Adjust image size as needed */
    margin-right: 20px; /* Space between image and div */
}

.content {
    max-width: 50%; /* Adjust div size as needed */
}

/* Optional: Responsive styles for smaller screens */
@media (max-width: 768px) {
    .container {
        flex-direction: column-reverse; /* Stack vertically on smaller screens */
        align-items: flex-start; /* Align items to the start */
    }

    .container2 {
        flex-direction: column; /* Stack vertically on smaller screens */
        align-items: flex-start; /* Align items to the start */
    }
    
    .image, .content {
        max-width: 100%; /* Full width on smaller screens */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Space between stacked elements */
    }
}