/* General styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header styles */
header {
    background-color: black;
    color: white;
    padding: 15px 0;
    position: relative;
}

#logo img {
    max-width: 190px;
    vertical-align: middle;
    height: 55px;
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
   height: 40px;
}
/* end*/


/** start car options div that contains all car as one container, Container for car options with vertical scrolling */


.car-option {
    flex-direction: column;                /* Arrange children in a column */
    display: flex;                         /* Use flexbox for layout */
    justify-content: flex-start;           /* Align children to the start (top) */
    align-items: center;                   /* Center children horizontally */
    margin: 2px 0;                         /* Margin around the container */
    padding: 2px;                          /* Padding inside the container */
    border: none;                          /* Remove border */
    box-shadow: none;                      /* Remove shadow */
    background-color: #f8f9fa;             /* Light grey background color */
    border-radius: 8px;                    /* Rounded corners */
    height: 660px;                         /* Height of the container */
    overflow-y: auto;                      /* Enable vertical scrolling if needed */
    overflow-x: hidden;                   /* Prevent horizontal scrolling */  
    border-color: black; 
}

/* Specific styles for the first car option to make it stand out */

.car-option .dvdistance-cars:first-child {
    
  
    box-sizing: border-box;                /* Include padding and border in the element's total width and height */
}

/* end */

/* Hamburger menu lines */

    .container {
        flex-direction: column;
        align-items: flex-start;
        position: relative; /* Ensure proper positioning of hamburger menu */
    }

    .hamburger {
        display: block; /* Show hamburger menu */
        margin-bottom: 10px;
        cursor: pointer; /* Change cursor to pointer for better UX */
        position: absolute; /* Position absolutely within the container */
        right: 20px; /* Adjust alignment for smaller screens */
        top: 15px; /* Align with header padding */
    }

    nav {
        display: none; /* Hide the menu by default */
        width: 20%;
        position: absolute; /* Ensure nav is positioned absolutely */
        top: 54px; /* Adjust based on header height */
        right: 0;
        background-color: black; /* Background color for visibility */
        z-index: 1000; /* Ensure it’s above other content */

    }

    nav ul {
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    nav ul li {
        margin: 10px 0;
    }

    nav ul li a {
        display: block; /* Ensure links fill the width */
        padding: 15px; /* Increase padding for touch targets */
        color: #fff;
        text-align: center; /* Center text */
        
        transition: background-color 0.3s ease;
        text-align: left;
    font-size: 1.3em;
    }

    nav ul li a:hover {
        background-color: #575757;
        border-radius: 6px;
    }

    .nav-active {
        display: flex; /* Show menu when active */
    }

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Rotate first line */
.hamburger.is-active div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

/* Hide the second line */
.hamburger.is-active div:nth-child(2) {
    opacity: 0;
}

/* Rotate third line */
.hamburger.is-active div:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Controls container styles 4 departure n arrival  search box */

/* Main layout styles */
.main-layout {
    display: flex;
    flex-direction: row; /* Arrange children in a row */
    padding: 20px; /* Padding around the main layout */
    gap: 20px; /* Space between map and controls */
}

/* Individual car option card styling */
.dvdistance-cars {
     
    flex-direction: column;
    align-items: center;
    margin: 6px;
   padding: 6px;
    background-color: #ffffff; /* White background for clarity */
    border-radius: 15px; /* Rounded corners for card elements */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border: none; /* Remove borders */

    text-align: center;
    align-items: auto;

    display: none; /* Hide by default */
    visibility: hidden; /* Hide by default */
}

/* Class to show elements */
.dvdistance-cars.show {
    display: flex; /* Or block, depending on layout */
    visibility: visible;
}

/* Styling for icons within the car option */
 .distance-info i, .estimationprice-fa-car i {
    margin-right: 7px; /* Space between icon and text */
    color: grey; /* Consistent color for icons */
}

/* Controls container styles 4 departure n arrival  search box */
.controls {
    flex: 1; /* Take up available space on the left */
    background-color: #fff; /* Background for visibility */
    padding: 20px; /* Padding around the controls */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    margin-top: -9px;
}

/* Controls content styling */
.controls-content {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: 1px; /* Space between inputs and button */
}

.Commander-une-course {
    font-size: 20px;
    font-weight: bold; /* Makes the text bold */
    color: #333; /* Text color */
    margin-bottom: 20px; /* Space below the heading */
}

/* Input group styling */
.input-group {
    display: flex;
    flex-direction: column; /* Stack input and icon vertically */
     gap: 10px; /* Space between elements */
}

/* Map container styles */
.map-container {
    flex: 2; /* Take up more space on the right */
    position: relative; /* Allow absolute positioning of map elements */
}

/* Map div styles */
#dvMap {
    width: 100%;
    height: 500px; /* Set a fixed height for the map */
}

#dvPanel {
    display: none;
}

.distance-info {
    display: flex; /* Use flexbox for layout if needed */
    align-items: center; /* Vertically align items */
    gap: 10px; /* Space between the image and text */
    margin-bottom: 2px; /* Space below this block */
    margin-top: 5px;
    float: center;
    font-size: 20px;
}

/* departure and arrival add */

.distance-location {
    display: flex; /* Use flexbox for layout if needed */
    align-items: center; /* Vertically align items */
    gap: 10px; /* Space between the image and text */
    margin-bottom: 2px; /* Space below this block */
    margin-top: 5px;
    font-size: 22px;
    float: center;

}

/* estimated price */

.estimationprice {
    display: flex; /* Use flexbox for layout if needed */
    align-items: right; /* Vertically align items */
    gap: 1px; /* Space between the image and text */
    margin-bottom: 1px; /* Space below this block */
    font-size: 22px;
   float: right;
   color: green;
}


/* calculation price */
.estimationprice-fa-car {
     display: flex; /* Use flexbox for layout if needed */
    align-items: left; /* Vertically align items */
    gap: 10px; /* Space between the image and text */
    margin-bottom: 10px; /* Space below this block */
    float: left;
   color: black;
    font-size: 4em; /* Increase the font size to make the icon larger */
}

/* Font Awesome icon styling */
.fa-map-marker {
    font-size: 24px; /* Increase icon size */
    margin-right: 10px; /* Space between icon and input field */
    vertical-align: middle; /* Align with text input */
}

/* New addition: Input field with icon styling */
.input-icon-container {
    position: relative; /* Container for positioning icon and input */
    display: inline-block; /* Inline layout */
    width: 100%; /* Full width to align with other inputs */
}


/* Positioning and styling the icon */
.input-icon-container i {
    position: absolute; /* Positioned absolutely within container */
    left: 10px; /* Aligns icon inside input */
    top: 50%; /* Vertically center icon */
    transform: translateY(-50%); /* Adjust for vertical centering */
    font-size: 20px; /* Consistent icon size */
    z-index: 1; /* Layer above input field */
}

/* Adjust input padding to accommodate icon */
.input-icon-container input[type="text"] {
    padding-left: 35px; /* Space for icon */
    padding-right: 10px; /* Consistent padding */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
    font-size: 18px; /* Larger font size */
    height: 50px; /* Increased height */
}


/* Button styling */
.devisbutton {
   
    color: white;
    border: none;
    padding: 12px 24px; /* Increased padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; /* Increased font size */
    cursor: pointer;
    border-radius: 5px;
    height: 58px; /* Adjusted height to align with input fields */
    background-color: black;
    float: center;
}

.devisbutton:hover {
    background-color: grey;
}


.devisbuttontwo {
     color: white;
    border: none;
    padding: 12px 24px; /* Increased padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px; /* Increased font size */
    cursor: pointer;
    border-radius: 5px;
    height: 58px; /* Adjusted height to align with input fields */
    background-color: black;
    float: right;
    margin-top: -52%;

}

.devisbuttontwo:hover {
    background-color: grey;
}

.dvdistance-van{

     padding: 15px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    align-items: auto;

}



/* Begin Google Places Autocomplete custom styling */
.pac-container {
    max-height: 500px; /* Set a maximum height for the dropdown */
    overflow-y: auto;  /* Enable vertical scrolling if content overflows */
    z-index: 1000;     /* Ensure the dropdown appears above other elements */
}

/* Adjusting the individual autocomplete suggestion items */
.pac-container .pac-item {
    height: 60px;      /* Increase item height for better visibility */
    font-size: 1.3em;  /* Increase font size for better visibility */
    line-height: 50px; /* Vertically center the text */
    padding: 0 10px;   /* Add padding for spacing */
}

/* Styling for road names and secondary text (often appear under the main address) */
.pac-container .pac-item .pac-item-query,
.pac-container .pac-item .pac-item-subtitle {
    font-size: 1.1em; /* Set a larger font size for road names and secondary text */
    color: #555;      /* Optional: Darker shade for the secondary text */
}

/* Styling for hover effect on suggestion items */
.pac-container .pac-item:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
    cursor: pointer;           /* Change cursor to pointer on hover */
}

/* Optional: Customize the text color of the suggestion items */
.pac-container .pac-item .pac-item-query {
    color: #000; /* Set text color for matched text (if different from default) */
}

/* Optional: Adjust icon appearance within suggestion items */
.pac-container .pac-icon {
    display: none;
}
/* End Google Places Autocomplete custom styling */



/* body and inboxhtml starts */


/* Main container styling */
.main-container { /* Style for the main container */
    font-family: Arial, sans-serif; /* Set font family */
    margin: 20px; /* Set margin */
    padding-bottom: 20px; /* Add padding to the bottom */
}

/* Slideshow container styling */
.slideshow-container { /* Style for the slideshow container */
    position: relative; /* Set position to relative */
    max-width: 55%; /* Set maximum width */
    margin: auto; /* Center align the container */
}

.mySlides { /* Style for each slide */
    display: none; /* Hide all slides by default */
}

.mySlides img { /* Style for images inside slides */
    width: 100%; /* Set image width to 100% */
}

.text { /* Style for the text overlay */
    color: #f2f2f2; /* Set text color */
    font-size: 15px; /* Set font size */
  
    position: absolute; /* Set position to absolute */
    bottom: 8px; /* Position text at the bottom */
    width: 100%; /* Set width to 100% */
    text-align: center; /* Center align the text */
    background: rgba(0, 0, 0, 0.5); /* Set background with opacity */
}

/* Slideshow fade animation */
.fade { /* Style for the fade effect */
    animation-name: fade; /* Set animation name */
    animation-duration: 1.5s; /* Set animation duration */
}

@keyframes fade { /* Define keyframes for fade effect */
    from {opacity: .4} /* Start with 40% opacity */
    to {opacity: 1} /* End with full opacity */
}

/* Section content styling */
.main-container h2 { /* Style for headers inside main container */
    color: #333; /* Set text color */
    font-size: 24px; /* Set font size */
    margin-top: 20px; /* Set top margin */
    text-align: center;
}

.main-container p { /* Style for paragraphs inside main container */
    color: black; /* Set text color */
    font-size: 16px; /* Set font size */
    line-height: 1.6; /* Set line height */
    text-align: center;
}

/* Image gallery styling */
#photos { /* Style for the photos container */
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping of items */
    gap: 10px; /* Set gap between items */
    margin-top: 20px; /* Set top margin */
}

#photos img { /* Style for images inside the photos container */
    width: calc(25% - 10px); /* Set width for each image */
    height: auto; /* Set height to auto */
    border-radius: 5px; /* Set border radius */
}

/* Copyright text styling */
.main-container p:last-child { /* Style for the last paragraph inside main container */
    margin-top: 20px; /* Set top margin */
    font-size: 14px; /* Set font size */
    color: black; /* Set text color */
    text-align: center; /* Center align the text */
}

/* END */

/* Basic styles for the popup overlay for reservation.php*/



/* Centering the form in the popup */
#div_container_55_fr {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay */
    overflow: hidden; /* Removed scroll bars on the main viewport */
}
/* reserverbyestimationform */
#popupestimationform {
    position: relative;
    background: #e0e0e0; /* Simple white background */
    padding: 15px; /* Adjusted padding */
    border-radius: 8px;
    width: 56%; /* Adjusted width */
    max-height: 80%; /* Adjusted height */
    height: auto; /* Auto height for better content fitting */
    overflow: hidden; /* Ensure no scroll bars */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Added shadow for better visibility */
    border: 4px solid #A9A9A9; /* Increased border size and changed color to Dark-Grey */
    padding-left: 40px; /* Added padding to push elements away from left border */
    padding-right: 40px; /* Added padding to push elements away from right border */
      border: 4px solid darkgrey;
}

.popup-content {
    max-height: 100%; /* Ensure popup-content takes full height */
    overflow-y: auto; /* Enable vertical scrolling if content overflows */
}

/* General form styles */
.form-group {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Adjusted margin */
    font-weight: normal;
}


.input-icon-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack label and input vertically */
}

.input-icon-container {
    position: relative;
}

.input-icon-container i {
    position: absolute;
    left: 10px; /* Adjusted position */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Center vertically */
    color: grey; /* Changed icon color to grey */
}

.input-icon-container input,
.input-icon-container select,
.input-icon-container textarea {
    width: 72%; /* Full width */
    padding: 10px 10px 10px 30px; /* Adjusted padding for icon space */
    box-sizing: border-box;
    text-align: left; /* Align placeholder text to the left */
}

/* Custom dropdown arrow positioned to the left */





.input-icon-container select {
    width: 100%;
    padding-left: 40px; /* Increase padding to move text further from the arrow */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;

    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    -moz-appearance: none; /* Firefox */
    position: relative; /* Ensure pseudo-element positions relative to this */

    /* Custom dropdown arrow positioned to the left */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"%3E%3Cpath d="M7 10l5 5 5-5z" fill="%23666" /%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 4px center; /* Position arrow to the left */
    background-size: 27px 27px; /* Make the arrow bigger */
}



/* Specific styling for email input */
#email{
    padding-left: 40px; /* Add more padding to the left */
    padding-bottom: 12.3px;
}

/* Specific styling for Nombre de Place */
#place, {
    padding-left: 40px; /* Add more padding to the left */
       padding-bottom: 21px;
}

/* Specific styling for message textarea */
#description {
    padding-left: 46%; /* Add more padding to the left */
    width: 100%; /* Set width to 100% minus padding to meet the other elements */
    padding-top: 4%;
    
}

#message {
   padding-top: 10%;
    width: 100%; /* Set width to 100% minus padding to meet the other elements */
    
}

/* Specific styling for date and time inputs */
.datetime-wrapper {
    display: flex;
    justify-content: space-between;
}

.datetime-wrapper .input-icon-wrapper {
    width: 48%;
}

.datetime-wrapper .input-icon-container i {
    left: 10px;
}

/* Button styling */
.styled-button-5 {
    background-color: black; /* Button background */
    color: white;
    border: none;
    padding: 10px 20px; /* Adjusted padding */
    text-align: center;
    text-decoration: none;
    display: block; /* Block-level for proper alignment */
    font-size: 16.8px; /* Increased font size */
    margin: 10px auto; /* Centered horizontally */
    cursor: pointer;
    border-radius: 4px;
}

.styled-button-5:hover {
    background-color: #333; /* Darker on hover */
}

/* Success and error message styles */
.seconddyes {
    background-color: green;
    color: white;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-size: 12px; /* Reduced font size */
}

.seconddno {
    background-color: red;
    color: white;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    font-size: 12px; /* Reduced font size */
}

/* Close button styles */
.close-btn {
    cursor: pointer;
    font-size: 36px; /* Further increased font size */
    position: absolute;
    top: 1px; /* Position */
    left: 10px; /* Position */
    color: white; /* Color */
    z-index: 2; /* Ensure on top */


  
}

/* Centering the header */
.popup-content h2 {
    text-align: center; /* Center align the header */
}

/* Footer styling */
footer {
    width: 100%; /* Ensure full width */
    background-color: #e0e0e0; /* Light grey background */
    text-align: center; /* Center aligned text */
    padding: 10px 0; /* Adjusted padding */
    position: fixed; /* Fixed at the bottom */
    bottom: 0;
    left: 0;
}
/* end */ 

/* reservationdirect box styling */
/* Body Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f8f9fa; /* Light background color for better contrast */
}

/* Basic Form Styling */
.containerreservation {
    max-width: 600px;
    margin: 0 auto;
    width: 500px;
}

/* Form Group Styling */
.form-group {
    position: relative;
    margin-bottom: 6px; /* Reduced margin between input fields */
}

.form-group i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.form-group input,
.form-group textarea,
.form-group select
 {
    width: 100%;
    padding: 10px 12px 10px 40px; /* Reduced padding to save space */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* Reduced font size */
    box-sizing: border-box;
    background: white; /* Keep inputs white */
}




/* Style for the form group container for time in reservationdirect form */
.formgroupfiveform {
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: center; /* Horizontally center items */
      margin-bottom: 5px;
    margin-top: -9px;  /* Space between form groups */
    gap: 10px; /* Space between icon and select */
}

.formgroupsix {
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: center; /* Horizontally center items */
    margin-bottom: 10px; /* Space between form groups */
    gap: 10px; /* Space between icon and select */

}



/* Style for the icon */
.formgroupsix i {
    font-size: 22px; /* Adjust icon size if needed */
    margin-right: 10px; /* Space between icon and select */
     color: #888;
}



/* Style for the select element */
.formgroupfiveform select {
    padding: 10px; /* Padding inside the select element */
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    text-align: center; /* Center text within the select */
    box-sizing: border-box; /* Include padding in total width/height */
    /* Remove default arrow */
   
    background-position: right 10px center;
    background-size: 10px 10px;
    color: grey; /* Set text color to grey */
   width: 244px;
}
.formgroupfive select {
   
    padding-left: 40px; /* Increase padding to move text further from the arrow */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;

    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    -moz-appearance: none; /* Firefox */
    position: relative; /* Ensure pseudo-element positions relative to this */

    /* Custom dropdown arrow positioned to the left */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"%3E%3Cpath d="M7 10l5 5 5-5z" fill="%23666" /%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 4px center; /* Position arrow to the left */
    background-size: 27px 27px; /* Make the arrow bigger */
}




.formgroupsix input {
    width: 245px;
    font-size: 14px;
}
/* Optional: Remove the default select arrow */
.formgroupfiveform select::-ms-expand {
    display: none;
}

/* end */


/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
    color: #888;
    font-size: 14px; /* Reduced font size for placeholders */
}

/* Placeholder Color on Focus */
input:focus::placeholder,
textarea:focus::placeholder {
    color: grey; /* Hide placeholder text on focus */
}

/* Submit Button Styling */
input[type="submit"] {
    background-color: black;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px; /* Reduced padding */
    font-size: 14px; /* Reduced font size */
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: grey;
}

/* reservationdirectform  Form Popup Styling*/
.form-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ededed; /* Changed background to grey */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Reduced box-shadow */
    z-index: 1001;
    display: none; /* Hidden by default */
    
    padding-top: 13px;  /* Reduced padding inside the form */
    padding-right: 15px;  /* Reduced padding inside the form */
    padding-bottom: 20px;  /* Reduced padding inside the form */
    padding-left: 15px;  /* Reduced padding inside the form */
      border: 4px solid darkgrey;
}
/* end */
/* the popup reservation button control */
.containerreservationbutton{
    display: flex;
    justify-content: center;
    /* Optional: align items vertically if the container has height */
    align-items: center;

}

.Heurededepart{
        padding-left: 22%;
    position: absolute;
    padding-top: 14px;
    color: grey;
}
/* Form Header Styling */
.form-header {
    margin-bottom: 16px; /* Reduced margin */
    text-align: center; /* Center text horizontally */
}

.form-header h2 {
  
    font-size: 20px; /* Adjust font size as needed */
        margin-right: 6%;
}

/* Back Button Styling */
.back-btn-popup {
    font-size: 30px; /* Increased font size */
    font-weight: bold; /* Increased font weight */
    cursor: pointer;
    float: left;
   margin-top: -30px;
   padding-left: 9px;

}

/* Form Backdrop Styling */
.form-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none; /* Hidden by default */
}

/* Google Places Autocomplete Container */
.pac-container {
    z-index: 10000 !important; /* Ensure it appears above other elements */
    visibility: visible !important; /* Force visibility */
}

/* Adjusted Floating Labels */
.floating-label-container {
    position: relative;
    margin-bottom: 4px; /* Further reduced margin between input fields */
}

.floating-label-container input,
.floating-label-container textarea {
    width: 100%;
    padding: 6px 12px 6px 36px; /* Further reduced padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* Reduced font size */
    box-sizing: border-box;
    background: white; /* Keep inputs white */
    position: relative;
    z-index: 2;
}

.floating-label-container .labels {
    position: absolute;
    top: 6px; /* Further adjusted label position */
    left: 36px; /* Adjusted to fit reduced padding */
    font-size: 12px; /* Reduced font size */
    color: #888;
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
}

/* Float label when input is focused or has content */
.floating-label-container input:focus + .labels,
.floating-label-container textarea:focus + .labels,
.floating-label-container input:not(:placeholder-shown) + .labels,
.floating-label-container textarea:not(:placeholder-shown) + .labels {
    top: -6px; /* Adjusted top position for floating effect */
    left: 36px; /* Maintain label alignment */
    font-size: 10px; /* Further reduced font size */
    color: #333;
}


/* end */


/* footer start */

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 27px;
}

footer a, footer i {
    color: white;
    text-decoration: none;
}

footer a:hover i {
    color: gray;
}

footer .phone-icon {
    font-size: 22px;
    color: white;
}

footer .messenger-icon {
    font-size: 22px;
    color: white;
}

footer .gmail-icon {
    font-size: 22px;
    color: white;
}

footer .whatsapp-icon {
    font-size: 22px;
    color: white;
}

.copyright {
            margin-top: 5px;
            font-size: 12px;
        }

/* end*/

/* popup registration form  Basic styling for the form container */


#maincontainerregistrationform {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ededed;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    z-index: 1000;
    width: 100%;
    max-width: 400px;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
      border: 4px solid darkgrey;
}

/* Center the form inside the main wrapper */
#mainwrapperregistrationform {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Back arrow styling */
.back-arrow {
    position: absolute;
    top: 10px;
    left: 10px;
    text-decoration: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

.back-arrow i {
    margin-right: 5px;
}

/* Style for the input group to contain icons and inputs */
.input-group {
    position: relative;
    width: 100%;
    margin-bottom: 15px;
}

/* Position the icon inside the input field */
.input-group i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #888;
    font-size: 16px;
}

/* Style for the input fields */
.signup-form input {
    width: 100%;
    padding: 10px 10px 10px 35px; /* Ensure padding accounts for icon */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 8px; /* Rounded corners */
    font-size: 16px;
    box-sizing: border-box;
    background-color: #f9f9f9; /* Light background for input fields */
    margin: -3px;
}

/* Style for the submit button (centered) */
.submit-button {
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.submit-button:hover {
    background-color: grey;
}

/* Hide form when it's not visible */
#maincontainerregistrationform.hidden,
#overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* start login form */ 



/* Basic styling for the pop-up container */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 400px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pop-up form styling */
.popup-form {
    background-color: #ededed; /* Grey background */
    padding: 30px 20px 20px; /* Increase top padding for more height */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid black; /* Black border */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center contents horizontally */
     border: 4px solid darkgrey;
}


 .backarrowfour{ 
 position: absolute;
 top: 10px;
  left: 10px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}

/* Style for the input fields */
.input-wrapper {
    position: relative;
    width: 100%; /* Ensure input takes full width of the form */
    max-width: 350px; /* Adjust if needed for better alignment */
    margin-bottom: 15px;
}

.input-wrapper i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #333; /* Icon color */
}

.input-wrapper input {
    width: 100%; /* Full width of the wrapper */
    padding: 10px 10px 10px 30px; /* Add padding to account for icon */
    border: 1px solid black; /* Black border */
    border-radius: 5px; /* Rounded corners */
    background-color: #fff; /* White background for inputs */
    font-size: 16px;
    box-sizing: border-box;
}

/* Style for the submit button */
.popup-form button {
    display: block;
    width: fit-content;
    margin: 0 auto; /* Center align */
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}

.popup-form button:hover {
    background-color: grey;
}



/* Overlay style */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 999; /* Ensure it's on top of everything */
    display: none; /* Initially hidden */
}

/* Show the overlay when the popup is displayed */
.popup-container.active ~ .overlay {
    display: block;
}

/* Prevent scrolling when the overlay is active */
body.overlay-active {
    overflow: hidden;
}


/* end */


/* recaptcha start */




.recaptcha-container .rc-anchor {
    width: 100% !important; /* Set the width to 100% to match parent */
}

.recaptcha-container {
    display: flex;
    justify-content: center; /* Center it horizontally */
   
    width: 100%; /* Ensure the container takes up full width */
margin-bottom: -1%;
    
}




/* end*/ 

/* Responsive design ***************************************************************************************************************************************************/
@media (max-width: 768px) {




.recaptcha-container .rc-anchor {
    width: 100% !important; /* Set the width to 100% to match parent */
}

.recaptcha-container {


      transform: scale(0.8); /* Scale down the widget */
            
           width: 100%;/* Original width * scale factor (e.g., 304px * 0.77 ≈ 234px) */
            height: 78px; /* Adjust height accordingly */
           
                    margin-bottom: -3%;
        margin-top: -8px;
}








header {
    background-color: black;
    color: white;
    padding: 15px 0;
    position: relative;
    height: 18px;
}

    #logo img {
    max-width: 190px;
    vertical-align: middle;
    height: 43px;
    margin-top: -14px;
    margin-left: 2px;
}
    .main-layout {
        flex-direction: column; /* Stack controls and map vertically on smaller screens */
    }

    .controls {
        margin-bottom: 20px; /* Space between controls and map */
    }

    .map-container {
        height: 300px; /* Adjust map height for smaller screens */
    }

    .main-layout {
    
    padding: 20px;
    gap: 20px;
    padding-bottom: 50px;
}


/* Hamburger menu lines */
.hamburger div {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
    transition: all 0.3s ease;
}

/* Rotate first line */
.hamburger.is-active div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

/* Hide the second line */
.hamburger.is-active div:nth-child(2) {
    opacity: 0;
}

/* Rotate third line */
.hamburger.is-active div:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

    .container {
        flex-direction: column;
        align-items: flex-start;
        position: relative; /* Ensure proper positioning of hamburger menu */
    }

     .hamburger {
        display: block; /* Show hamburger menu */
        margin-bottom: 10px;
        cursor: pointer; /* Change cursor to pointer for better UX */
        position: absolute; /* Position absolutely within the container */
        right: 20px; /* Adjust alignment for smaller screens */
        top: -5px; /* Align with header padding */
    }

    nav {
        display: none; /* Hide the menu by default */
        width: auto;
        position: absolute; /* Ensure nav is positioned absolutely */
        top: 32px; /* Adjust based on header height */
        right: 0;
        background-color: black; /* Background color for visibility */
        z-index: 1000; /* Ensure it’s above other content */

    }


    nav ul {
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    nav ul li {
        margin: 10px 0;
    }

    nav ul li a {
        display: block; /* Ensure links fill the width */
        padding: 15px; /* Increase padding for touch targets */
        color: #fff;
        text-align: left; /* Center text */
        font-size: 1em;
        transition: background-color 0.3s ease;
    }

    nav ul li a:hover {
        background-color: #575757;
        border-radius: 5px;
    }

    .nav-active {
        display: flex; /* Show menu when active */
    }



/** start car options div that contains all car as one container, Container for car options with vertical scrolling */



 .car-option {
        display: none;  /* Hide the car-option container on small screens */
    }

    /* Show the car-option container when it has child elements */
    .car-option:has(.dvdistance-cars) {
        display: flex;  /* Display the container when it has child elements */
        height: auto;   /* Adjust height automatically */
       margin-top: -33px;
    }


/* Specific styles for the first car option to make it stand out */
.car-option .dvdistance-cars:first-child {
    box-sizing: border-box;                /* Include padding and border in the element's total width and height */
}


/* end */


/* Slideshow container styling */
.slideshow-container { 
   
    max-width: 90%; /* Set maximum width */
    
}


/* start popup form layout for estimation_price */ 


 .form-container {
        width: 121%; /* Increased width by 21% */
        height: 115%; /* Increased height by 15% */
        margin: 0 auto; /* Centering the form horizontally */
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centering vertically */
    }

    #estimationconfirmationpopup {
        font-size: 77%; /* Reduced font size by 11% */
    }

    input, textarea, button {
         /* Set width to 100% of the parent element */
        box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }

    .back-arrow {
        padding-top: 3%; /* Padding the back arrow down by 3% */
        font-size: larger; /* Increase the font size of the back arrow */
    }

    .confirmation-text {
        font-size: 130%; /* Increased the text size by 30% */
    }

    /* Hide all labels */
    label {
        display: none;
    }

#popupestimationform  {

        width: 73%;
        max-height: 99%;
        height: 82%;
    }


/* Close button styles */
.close-btn {
   cursor: pointer;
    font-size: 36px; /* Further increased font size */
    top: 1px; /* Position */
    font-weight: bold;
    left: 2px;
    
  
}

/* reservation message text area */



/* estimationreservation inputs form */
.input-icon-container input,
.input-icon-container select,
.input-icon-container textarea {
    width: 100%; /* Full width */
    
}




.input-icon-wrapper{

    width:100%;
}


.input-icon-container input[type="text"] {
    
    font-family: auto;
    height: 40px;
}



/* Specific styling for message textarea */
 #description {
    padding-left: 39%; /* Add more padding to the left */
    width: 100%; /* Set width to 100% minus padding to meet the other elements */
    padding-top: 4%;
    
}

#message {
   padding-top: 10%;
 
    width: 100%; /* Set width to 100% minus padding to meet the other elements */
    
}

/* Form Group Styling */
.form-group {
    position: relative;
    margin-bottom: 3px; /* Reduced margin between input fields */
}



.input-icon-container input, .input-icon-container select, .input-icon-container textarea {
  
   padding: 10px 10px 10px 30px;
}



#getestimation span {
    display: block;
    margin: -775px 0; /* Adjust this value as needed */
    line-height: 1; /* Adjust line height */
}



  /* end */ 


/* start signup form */


 /* Adjust padding for smaller screens */
    #maincontainerregistrationform {
        padding: 15px;
        max-width: 90%;
    }

    /* Adjust font size for smaller screens */
    .submit-button {
        font-size: 14px;
    }

    .input-group i {
        font-size: 14px;
    }

    .signup-form input {
        font-size: 14px;
    }
    
    /* Ensure the back arrow is not too large */
    .back-arrow {
        font-size: 16px;
        top: 5px;
        left: 5px;
    }

/* echo message */ 


.success-message, .error-message {
    text-align: center;
    font-size: 1.2em;
    margin-top: 20px;
}

.success-message {
    color: green;
}

.error-message {
    color: red;
}

.hidden {
    display: none;
}


/* back arrow for login form */
 .backarrowfour { 
 position: absolute;
 top: -6px;
  left: 10px;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
}




/* time wrapper in reservationdirectform */ 

/* Style for the select element */
.formgroupfiveform select {
   
    width: 153px;
    font-size: 14px;

}


/* Style for the select element */
.formgroupsix input {
   
    
    width: 100%;
    font-size: 14px;

}

/* Style for the icon */
.formgroupsix i {
    font-size: 16px; /* Adjust icon size if needed */
    margin-right: -1px; /* Space between icon and select */
     color: #888;
}



/* end */
    /* end */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 14px;
}

footer a, footer i {
    color: white;
    text-decoration: none;
}

footer a:hover i {
    color: gray;
}

footer .phone-icon {
    font-size: 20px;
    color: white;
}

footer .messenger-icon {
    font-size: 20px;
    color: white;
}
footer .gmail-icon {
    font-size: 20px;
    color: white;
}
footer .whatsapp-icon {
    font-size: 20px;
    color: white;
}


    /* Basic Form Styling */
    .containerreservation {
        width: 90%; /* Adjust form width */
        margin: 0 auto;
    }

    /* Form Popup Styling */
    .form-popup {
        width: 90%; /* Adjust form width */
        background: #e0e0e0; /* Ensure grey background is consistent */

        padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 8px;
    padding-left: 0px;
    }

    .Heurededepart{
            padding-left: 28%;
            padding-top: 10px;
    }

 /* Form Popup Styling reduce */
.formBackdrop{
height: 50%;

}
    /* Form Header Styling */
    .form-header {
        margin-bottom: 12px; /* Reduced margin */
        text-align: center; /* Center text horizontally */
    }

    .form-header h2 {
        font-size: 18px; /* Adjust font size for small screens */
    }

    /* Back Button Styling */
    .back-btn-popup {
        font-size: 24px; /* Adjusted font size for smaller screens */
        font-weight: bold; /* Ensure bold text */
        margin-top: -20px; /* Adjust margin */
        float: left;
        z-index: 1002; /* Ensure it stays above form header */
    }

    /* Floating Labels */
    .floating-label-container {
        margin-bottom: 8px; /* Adjusted margin between input fields */
    }

    .floating-label-container input,
    .floating-label-container textarea {
        padding: 8px 12px 8px 36px; /* Adjusted padding */
        font-size: 14px; /* Adjusted font size */
    }

    .floating-label-container .labels {
        top: 8px; /* Adjusted label position */
        font-size: 12px; /* Adjusted font size */
    }

    /* Submit Button Styling */
    input[type="submit"] {
        padding: 8px 14px; /* Adjusted padding */
        font-size: 14px; /* Adjusted font size */
    }
/* end*/

/* login start */ 

  
.popup-container {
        max-width: 90%;
    }

    .popup-form input,
    .popup-form button {
        font-size: 14px;
    }

    .input-wrapper i {
        font-size: 16px; /* Adjust icon size if needed */
    }
  /* end */

}