.collapsible-card {
    background: rgba(255, 255, 255, 0.1); /* Slightly transparent background for the card itself */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px; /* More rounded corners */
    margin-bottom: 25px;
    overflow: hidden;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Subtle shadow */
    backdrop-filter: blur(5px); /* Light blur for the card base */
    -webkit-backdrop-filter: blur(5px);
}

.collapsible-card-header {
    padding: 20px 25px; /* Increased padding */
    background: rgba(255, 255, 255, 0.15); /* Slightly more opaque header */
    cursor: pointer;
    font-weight: 700; /* Bolder font */
    font-size: 1.1em; /* Slightly larger text */
    color: #333; /* Darker text for contrast */
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* Lighter border */
    transition: background 0.3s ease;
}

.collapsible-card-header:hover {
    background: rgba(255, 255, 255, 0.25); /* More opaque on hover */
}

.collapsible-card-header .arrow {
    transition: transform 0.3s ease;
    font-size: 1.2em; /* Larger arrow */
    color: #555;
}

.collapsible-card-header.active .arrow {
    transform: rotate(90deg);
}

.collapsible-card-content {
    padding: 0 25px; /* Match header padding */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out, padding 0.7s ease-in-out; /* Slower transition for smoother slide */
    background: rgba(255, 255, 255, 0.05); /* Very light background for content area */
}

.collapsible-card-content.show {
    max-height: 1000px; /* Increased max-height for more content */
    padding: 25px; /* Padding when shown */
    background: rgba(255, 255, 255, 0.15); /* Glassmorphism background for the sliding content */
    backdrop-filter: blur(15px); /* Stronger blur for the sliding content */
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Border to separate from header */
}

/* Basic form styling for elements inside cards - adjusted for glassmorphism */
.collapsible-card-content .form-group {
    margin-bottom: 20px; /* Increased margin */
}

.collapsible-card-content label {
    display: block;
    margin-bottom: 8px; /* Increased margin */
    font-weight: 600; /* Slightly less bold than header */
    color: #444; /* Darker text */
}

.collapsible-card-content input[type="text"],
.collapsible-card-content input[type="email"],
.collapsible-card-content input[type="tel"],
.collapsible-card-content select,
.collapsible-card-content textarea {
    width: 100%;
    padding: 12px 15px; /* Increased padding */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Lighter border */
    border-radius: 8px; /* More rounded inputs */
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.1); /* Transparent input background */
    color: #333; /* Input text color */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.collapsible-card-content input[type="text"]:focus,
.collapsible-card-content input[type="email"]:focus,
.collapsible-card-content input[type="tel"]:focus,
.collapsible-card-content select:focus,
.collapsible-card-content textarea:focus {
    border-color: rgba(212, 175, 55, 0.5); /* Highlight on focus */
    background: rgba(255, 255, 255, 0.2);
    outline: none;
}

.collapsible-card-content textarea {
    resize: vertical;
}

/* Placeholder color for inputs */
.collapsible-card-content input::placeholder,
.collapsible-card-content textarea::placeholder {
    color: #888;
}