.form-pers {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle shadow for raised effect */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover animations */
    background: white;
    border-radius: 6px;
    margin-top: 200px;
    margin-bottom: 50px;
    padding: 20px;
    color: black;
    text-align: center;
}

.form-pers:hover {
        cursor: pointer; /* Changes cursor to hand */
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08); /* Deeper shadow on hover */
}

/* For devices with a max width of 768px (e.g., tablets and phones in landscape) */
@media (max-width: 768px) {
    .form-pers {
        margin-top: 150px; /* Reduce top margin for smaller screens */
        border-radius: 5px; /* Slightly reduce border-radius */
    }
}

/* For devices with a max width of 576px (e.g., phones in portrait) */
@media (max-width: 576px) {
    .form-pers {
        margin-top: 120px; /* Further reduce top margin for small screens */
        border-radius: 4px; /* Further reduce border-radius */
    }
}





.form-pers-profile {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Subtle shadow for raised effect */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover animations */
    background: white;
    border-radius: 6px;
    margin-top: 200px;
    margin-bottom: 50px;
    padding: 20px;
    color: black;
    text-align: center;
}
/* Remove shadow from floating labels */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    box-shadow: none !important;
}