/* Booking Form Styles */
 .booking-widget {
    background-color: #f0f1f7;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    transition: transform 0.2s ease;
}

.booking-widget:hover {
    transform: scale(1.02); /* Slightly enlarge on hover */
}

.booking-widget .widget-title {
    font-size: 22px; /* Larger title font size */
    font-weight: 700; /* Bold title for emphasis */
    margin-bottom: 30px; /* Spacing below the title */
    color: #333; /* Darker text color for better contrast */
    position: relative; /* Positioning for underline effect */
}

.booking-widget .widget-title .icon {
    color: #007bff; /* Icon color */
    margin-right: 10px; /* Space between icon and text */
}

.booking-content-box {
    margin-top: 10px; /* Spacing above the form */
}

.booking-widget .form-group {
    margin-bottom: 25px; /* Spacing between form groups */
}

.booking-widget label {
    display: block; /* Block display for labels */
    margin-bottom: 8px; /* Spacing below labels */
    font-weight: 500; /* Medium weight for readability */
    color: #555; /* Softer text color */
    font-size: 16px; /* Slightly larger font size for labels */
}

.booking-widget input[type="text"], .booking-widget input[type="email"], .booking-widget input[type="tel"], .booking-widget select, .booking-widget textarea {
    width: 100%;
    padding: 14px;
    border: 0px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.booking-widget input[type="text"]:focus,
.booking-widget input[type="email"]:focus,
.booking-widget input[type="tel"]:focus,
.booking-widget select:focus,
.booking-widget textarea:focus {
    border-color: #007bff; /* Change border color on focus */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5); /* Soft glow on focus */
}

.booking-widget textarea {
    resize: vertical; /* Allow vertical resizing only */
}

.booking-widget button.btn-submit {
    background: -webkit-linear-gradient(0deg, rgba(5, 14, 121, 0.9) 5%, #050e79ba) !important;
    color: #ffffff; /* Button text color */
    border: none; /* No border */
    padding: 14px 24px; /* Increased padding for the button */
    border-radius: 8px; /* Rounded corners for button */
    cursor: pointer; /* Pointer on hover */
    font-size: 16px; /* Font size for button text */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); /* Soft shadow */
    position: relative; /* Positioning for after effect */
}

.booking-widget button.btn-submit:hover {
    background-color: #0056b3; /* Darker color on hover */
    transform: translateY(-3px); /* Lift effect on hover */
}

.booking-widget button.btn-submit:active {
    transform: translateY(1px); /* Slightly lower on click */
}

.booking-widget button.btn-submit::after {
    content: ''; /* For after effect */
    position: absolute; /* Absolute positioning */
    top: 50%; /* Centering */
    left: 50%; /* Centering */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(255, 255, 255, 0.2); /* Light overlay effect */
    border-radius: 8px; /* Matching border radius */
    transform: translate(-50%, -50%) scale(0); /* Initially scale to 0 */
    transition: transform 0.3s ease; /* Smooth transition */
    z-index: 0; /* Behind the text */
}

.booking-widget button.btn-submit:hover::after {
    transform: translate(-50%, -50%) scale(1); /* Scale to full on hover */
    z-index: -1; /* Push behind the button text */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .booking-widget {
        padding: 25px; /* Reduced padding on smaller screens */
    }

    .booking-widget .widget-title {
        font-size: 20px; /* Adjusted title font size for smaller screens */
    }

    .booking-widget button.btn-submit {
        font-size: 15px; /* Smaller button font size */
    }
}