/* General body styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: white;
    color: #333;
    margin: 0;
    padding: 0;
}

.page-content {
    margin-top: 50px; /* Adjust the value as needed */
}

.header-title {
    text-align: center;
    margin-bottom: 20px;
}

/* Paragraph text */
.p-text {
    text-align: center;
    font-size: 20px;
    color: #333;
}

.card h3 {
    font-weight: 600;
}

.card p {
    font-size: 18px;
    text-align: center;
}

.card img {
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 10px auto;
}

/* Link styling */
.link-style {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.additional-links a:hover {
    background-color: #f3f3f3;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card, .additional-links a {
        min-width: auto;
        max-width: 100%;
    }
}

.Select-placeholder {
    color: black; /* Placeholder text color */
}


/* Customizes the dropdown control */
.Select-control {
    background-color: white; /* Outside color */
    border: 1px solid #ced4da; /* Adds a subtle border */
    border-radius: 0.25rem; /* Rounds the corners for a modern look */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Adds a light shadow for depth */
    height: 38px; /* Standardizes the height */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Smooth transition for interactions */
}

/* Customizes the focus state of the dropdown for better visibility */
.Select-control:focus-within {
    border-color: #80bdff; /* Highlight color for focus */
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* Adds a glow effect on focus */
}

/* Customizes the dropdown menu/options list */
.Select-menu-outer {
    background-color: white; /* Inside color */
    border: 1px solid #ced4da; /* Adds a consistent border */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds a shadow for depth */
    border-radius: 0.25rem; /* Rounds the corners to match the control */
}

