/* Form container */
.form-container {
    width: 60%;
    display: inline-block; /* To place side by side with score container */
    vertical-align: top; /* Align with score container */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
    transition: transform 0.3s ease; /* Smooth transition for hover */
    padding-top:30px;
}

/* Hover effect on form container */
.form-container:hover {
    transform: scale(1.02); /* Slight scale effect on hover */
}

/* Score container */
.score-container {
    width: 35%;
    display: inline-block; /* Place side by side with form */
    vertical-align: top; /* Align with form container */
    text-align: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 20px;
    transition: transform 0.3s ease; /* Smooth transition for hover */
}

/* Hover effect on score container */
.score-container:hover {
    transform: scale(1.02); /* Slight scale effect on hover */
}

/* Form labels */
.form-container label {
    font-weight: bold;
    color: #223A66; /* Match your site’s primary color */
    margin-bottom: 5px;
    display: block;
}

/* Form select dropdowns */
.form-container select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc; /* Light border */
    border-radius: 4px;
    background-color: #fff;
    font-size: 1em;
    color: #333; /* Text color */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
}

/* Focus effect on select dropdowns */
.form-container select:focus {
    border-color: #CB130B; /* Match primary color */
    box-shadow: 0 0 5px rgba(203, 19, 11, 0.5); /* Subtle shadow on focus */
}

/* Score heading */
.score-container h2 {
    font-size: 2em;
    color: #223A66; /* Match primary color */
    margin-bottom: 20px; /* Space between title and score */
}

/* Score display */
.score {
    font-size: 3em;
    color: #CB130B; /* Score in primary color */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 50%;
    border: 5px solid #CB130B; /* Circle with border */
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

/* Hover effect on score */
.score:hover {
    background-color: #223A66; /* Change background color on hover */
    color: white; /* Text changes to white on hover */
    transform: scale(1.1); /* Slight increase in size */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form-container, .score-container {
        width: 100%; /* Full width on mobile */
        display: block;
    }

    .score {
        font-size: 2.5em;
    }
}