@keyframes slideIn {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }

        .main-header {
            background-color: #0b943a;
            padding: 0.8rem 2rem;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }

        .main-header .navbar .nav-link {
            color: #fff;
            font-size: 18px;
        }

        .main-header .navbar>.container-fluid {
            display: inline-block;
        }

        .navbar-brand img {
            width: 100px;
        }

        .nav-links {
            display: flex;
            list-style: none;
            margin: 0;
            padding-right: 180px;
        }

        .nav-links li {
            margin-left: 25px;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
        }

        .nav-links a:hover {
            color: #d4f1d7;
        }

        .mnav-links {
            display: flex;
            list-style: none;
            margin: 0;
            padding-right: 100px;
        }

        .mnav-links li {
            margin-left: 20px;
        }

        .mnav-links a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
            font-size: 1rem;
        }

        .mnav-links a:hover {
            color: #d4f1d7;
            transition: 0.2;
        }

        .background {
    background: url("../static/image_new.png") no-repeat center center;
    background-size: cover; 
    height: 55vh;
    width: auto; 
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 64px;
}

        .welcome-text {
            color: black;
            font-style: italic;
            font-size: clamp(1.5rem, 4vw, 3rem);
            font-weight: bold;
            animation: slideIn 3s ease-out forwards;
            padding-left: 10%;
        }

        .text {
            font-style: oblique;
            padding-left: 5%;
        }

        .box {
            max-width: 100%;
            height: auto;
            margin: 40px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            text-align: center;
        }

        .box h2 {
            font-style: inherit;
            margin-bottom: 15px;
            text-align: center;
        }

        .info-box p {
             text-align: justify;
        }

        .box img {
            width: 220px;
            height: 220px;
        }

@media only screen and (max-width: 700px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        position: static; 
        width: auto;
    }

    .main-header .row>* {
        width: auto;
    }

    .nav-links-container {
        position: static;
        display: flex; 
        justify-content: center;
        width: 100%;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        text-align: left;
    }

    .nav-links li {
        margin: 10px 0;
        width: 100%;
        text-align: center; 
    }

    .nav-links li a {
        display: block; 
        padding: 10px 0;
    }
}