html, body {
    overflow-x: hidden; /* Prevents side scrolling */
    width: 100%; /* Ensures full width */
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f5f5f5;
}

nav {position: fixed;
    width: 100%;
    z-index: 1000; 
    background-color: #93fbb0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px ;
}

logo {
    height: 50px;
    width: auto;
}

 a {
    color: rgb(36, 31, 31);
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
    transition: color 0.3s;
}

 a:hover {
    color: rgb(104, 207, 34);
}

.book-now, .location-button {
    background-color:#232724;
    padding: 8px 15px;
    border-radius: 5px;
    color: rgb(229, 248, 240);
    transition: background-color 0.3s, color 0.3s;
}

.book-now:hover {
    background-color: white;
    color: black;
}

header {
    text-align: center;
    padding-top: 80px;
}
.hero-image {
    position: relative;
    display: flex; 
    justify-content: center; 
    align-items: center;
    width: 100%; 
    max-width: 600px; 
    margin: 0 auto; 
    text-align: center; }



.location-button {
    position: absolute;
    top: 80%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    border: solid 1px #1ec44d;
    padding: 30px;
    border-radius: 10px;
    cursor: pointer;
    
}



h1{font-family: "Bona Nova SC", serif;
    font-weight: 700;
    font-style: normal;}
    h2{font-family: "Smooch Sans", serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;}

.hero {
    text-align: center;
    padding: 20px;
}

.hero-image {
    max-width: 500px;
    height: 300;
    border-radius: 5px;
}

.services, .why-choose-us, .contact {
    padding: 20px;
    background-color: white;
    margin: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}



.services li {
    padding: 5px 0;
}
.services-images{ display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px;}



footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px;
}

form {
    max-width: 500px;  /* Limits width on larger screens */
    width: 90%;
    margin: auto;
    background: white;
    padding: 35px;
    box-shadow: 0px 0px 10px gray;
}
To make your page responsive on smaller screens, you can use CSS media queries to adjust the layout and styles based on the screen size. Here are some steps to make your booking.html page responsive:

1. Open your style.css file.
2. Add media queries to adjust the styles for smaller screens.

Here's an example of how you can do it:

```css
/* General styles for larger screens */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}

form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

label {
    display: block;
    margin-bottom: 10px;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.buttons {
    display: flex;
    justify-content: space-between;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.email-btn {
    background-color: #007bff;
    color: #fff;
}

.whatsapp-btn {
    background-color: #25d366;
    color: #fff;
}

/* Media queries for smaller screens */
@media (max-width: 600px) {
    header {
        padding: 10px;
    }

    form {
        padding: 10px;
        max-width: 600px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    }

    .buttons {
        flex-direction: column;
    }

    .buttons button {
        width: 100%;
        margin-bottom: 10px;}
        label {
            display: block;
            margin-bottom: 10px;
        }
input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid gray;
    border-radius: 5px;
}
.buttons {
    display: flex;
    justify-content: space-between;
}
button { 
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}
.email-btn {
    background-color: green;
    color: white;
}
.whatsapp-btn {
    background-color: #25D366;
    color: white;
}
button:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    form {
        width: 100%;  /* Make form full-width on small screens */
        max-width: 100%;
    }

    .buttons {
        flex-direction: column; /* Stack buttons vertically */
    }

    button {
        width: 100%;  /* Make buttons full width */
    }
}