/* CSS for styling the labels and dropdowns with a shadow effect on hover */
.pincode-dropdown {
    display: flex;
    flex-direction: column;
    align-items: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 5px;
}

.dropdown {
    margin-bottom: 10px;
    text-align: center;
    transition: box-shadow 0.1s; /* Add transition for smooth shadow effect */
}

.dropdown:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow effect on hover */
    border-radius: 6px;
}

label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 16px;
    color: #333; /* Label text color */
}

select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc; /* Dropdown border color */
    border-radius: 5px;
    background-color: #f9f9f9; /* Dropdown background color */
    color: #333; /* Dropdown text color */
}

#pincode_result {
    margin-top: 20px; /* Add margin between pincode and selected info div */
    background-color: aqua;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    font-style: underline;
    font-size: 25px;
}

#selected_info {
    margin-top: 20px; /* Add margin between pincode and selected info div */
    background-color: rgb(153, 199, 187);
    padding: 20px;
    border-radius: 10px;
}

#selected_state{
    color: rgb(83, 83, 56);
    font-size: 18px;
    font-weight: normal;
    font-weight: bold;
}

#selected_district{
    color: rgb(83, 83, 56);
    font-size: 18px;
    font-weight: normal;
    font-weight: bold;
}

#selected_office{
    color: rgb(83, 83, 56);
    font-size: 18px;
    font-weight: normal;
    font-weight: bold;
}

p{
    font-size: 20px;
    font-weight: bold;
    color: rgb(19, 45, 53);
}