body {
            font-family: 'Avenir Next Condensed', 'Tahoma', 'Poppins', sans-serif;
            margin: 0;
            background-image: url("herbs.jpg");
            background-attachment: fixed;
        }
        h2 {
            text-align: center;
            color: #32885b;
        }
        .searchInput {
            flex: 1 1 50%; /* Flex grow, shrink and basis set to fill half the container's width */
            padding: 10px;
            min-width: 250px; /* Minimum width for smaller screens */
            max-width: 300px; /* Maximum width to ensure they don't get too large */
        }
        .graphic-container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
        }
        .herb-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }
        .circle {
            background: #fff;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px;
            width: 150px; /* Adjust size as needed */
            height: 150px; /* Adjust size as needed */
            text-align: center; /* Center text horizontally */
            transition: transform 0.3s ease;
        }

        .circle:hover {
            transform: scale(1.05); /* Slightly increase size on hover */
        }

        .circle .latin,
        .circle .herb,
        .circle .problem {
            margin: 5px 0;
            width: 100%; /* Ensure the width spans the entire circle for proper centering */
        }
        .latin {
            font-style: italic;
        }
        .circle.Monogrāfija { background: #A6C99A; }
        .circle.Vecmātes { background: #F9DE60; }
        .circle.Sievietes { background: #FCF5C4; }
        .circle.Ticējumi { background: #F2D8A0; }

        .category-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }

        .category-header {
            margin-bottom: 20px;
            text-align: center;
            color: #32885b;
            font-size: 20px; /* Makes the text larger */
            font-weight: bold; /* Makes the text bold */
        }
        .inputs-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px; /* Adjust the space between inputs as necessary */
            margin-bottom: 20px; /* Space below the input container */
        }