.elementor-710 .elementor-element.elementor-element-2c6308d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:-6em;--margin-bottom:3em;--margin-left:0em;--margin-right:0em;--z-index:5;}.elementor-710 .elementor-element.elementor-element-50b19e9d{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );box-shadow:0px 0px 30px 5px rgba(0,0,0,0.5);--padding-top:3em;--padding-bottom:3em;--padding-left:2em;--padding-right:2em;}.elementor-710 .elementor-element.elementor-element-50b19e9d:not(.elementor-motion-effects-element-type-background), .elementor-710 .elementor-element.elementor-element-50b19e9d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-95716bf );}@media(min-width:768px){.elementor-710 .elementor-element.elementor-element-2c6308d{--width:100%;}.elementor-710 .elementor-element.elementor-element-50b19e9d{--width:1200px;}}/* Start custom CSS for html, class: .elementor-element-6dae29f1 *//* Base Styles for Desktop and Larger Screens */
.booking-form {
    display: flex;
    align-items: center;
    gap: 100px;
    justify-content: center;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

label {
    font-size: 12px;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

input[type="text"],
input[type="number"] {
    padding: 5px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0px;
    font-size: 14px;
    width: 250px; /* Fixed width for larger screens */
}

.number-input {
    display: flex;
    align-items: center;
}

.number-input button {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 14px;
}

.number-input input {
    width: 50px;
    text-align: center;
    border: none;
    font-size: 16px;
    margin: 0 5px;
}

.check-availability-btn {
    background-color: #000;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

.check-availability-btn:hover {
    background-color: #808080;
}

/* Desktop and Mobile Compact Row */
.compact-row {
    display: flex;
    gap: 20px; /* Control the gap between Adults and Children */
    justify-content: flex-start; /* Keep it left-aligned */
    align-items: center;
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .booking-form {
        flex-direction: column; /* Stack form elements vertically */
        gap: 20px; /* Reduce gap between sections on smaller screens */
        width: 100%; /* Make form full width */
        align-items: center; /* Center align form on mobile */
    }

    .form-group {
        width: 100%; /* Full width for form groups */
        max-width: 400px; /* Limit max width for better appearance */
        margin-bottom: 15px;
    }

    input[type="text"],
    input[type="number"] {
        width: 100%; /* Make inputs take full width */
    }

    .compact-row {
        flex-direction: row; /* Keep adults and children side by side */
        width: 100%; /* Ensure full width on mobile */
        justify-content: space-between; /* Distribute adults and children evenly */
        gap: 10px; /* Reduce gap between adults and children */
    }

    .compact-row .form-group {
        width: 45%; /* Make the input sections smaller for a compact look */
        max-width: none;
        margin-bottom: 0;
    }

    .check-availability-btn {
        width: 100%; /* Full width button on mobile */
        max-width: 400px; /* Limit the width for better appearance */
    }
}/* End custom CSS */