html {
    scroll-behavior: smooth; /* Enable smooth scrolling for the entire page */
}

* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
}



.navbar {
    background-color: #735DA5; /* Background color for the navbar */
    padding: 15px 20px; /* Padding for the navbar */
    text-align: center; /* Center align the title */
}

.container {
    max-width: 1200px; /* Limit width for the container */
    margin: 0 auto; /* Center the container */
}

.logo {
    color: #ffffff; /* White color for the title */
    font-size: 2em; /* Font size for the title */
    margin: 0; /* Remove default margin */
}

/* Responsive styles */
@media (max-width: 768px) {
    .logo {
        font-size: 1.5em; /* Slightly smaller font size on mobile */
    }
}


.floating-menu-button {
    position: fixed; /* Fixed position */
    top: 30px; /* Distance from the top */
    right: 20px; /* Distance from the left */
    background-color: rgba(115, 93, 165, 0.9); /* Button color with opacity */
    border-radius: 50%; /* Circular button */
    width: 60px; /* Fixed width for round button */
    height: 60px; /* Fixed height for round button */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s; /* Transition for hover effects */
    z-index: 1000; /* High z-index to stay on top */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
}

.floating-menu-button a {
    color: #ffffff; /* Icon color */
    font-size: 1.5em; /* Icon size */
    width: 100%; /* Full width for clickable area */
    height: 100%; /* Full height for clickable area */
    display: flex; /* Flexbox for aligning icon */
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    text-decoration: none; /* Remove underline from link */
}

.floating-menu-button:hover {
    background-color: rgba(94, 75, 146, 0.9); /* Darker shade on hover */
    transform: scale(1.1); /* Slightly enlarge the button */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Increase shadow on hover */
}






.home-section {
    position: relative; /* Position for overlay */
    background-image: url('../images/m.jpg'); /* Background image */
    background-size: cover; /* Cover the entire section */
    background-position: center; /* Center the image */
    height: 60vh; /* Full height */
    display: flex; /* Flexbox for centering content */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    color: #ffffff; /* White text for contrast */
    text-align: center; /* Center align text */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}

.overlay {
    position: absolute; /* Absolute positioning to cover the section */
    top: 0; /* Cover from the top */
    left: 0; /* Cover from the left */
    right: 0; /* Cover from the right */
    bottom: 0; /* Cover from the bottom */
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    z-index: 0; /* Ensure overlay is on top */
}

.content {
    position: relative; /* Positioning for content */
    z-index: 1; /* Ensure content is above the overlay */
}

.book-now-button {
    display: inline-block;
    background-color: #735DA5; /* Primary color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s; /* Transition effect */
}

.book-now-button:hover {
    background-color: #D3C5E5; /* Lighter color on hover */
}





.fleet-section {
    padding: 60px 20px;
    background-color: #D3C5E5; /* Light background */
    text-align: center;
}

.fleet-cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
}

.fleet-card {
    background-color: #ffffff;
    margin: 20px; /* Increased margin for spacing */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex: 1 1 300px; /* Flexible width with a minimum width */
    text-align: left; /* Align text to the left */
    max-width: 300px; /* Max width for larger screens */
    transition: transform 0.2s; /* Smooth scaling on hover */
}

.fleet-card:hover {
    transform: scale(1.05); /* Slightly scale up on hover */
}

.fleet-image {
    width: 100%; /* Make image responsive */
    height: 200px; /* Set a fixed height */
    object-fit: contain; /* Ensure the entire image is visible */
    background-color: #f0f0f0; /* Optional: background color for empty space */
    border-radius: 10px; /* Rounded corners for images */
}

.fleet-card h3 {
    color: #735DA5; /* Darker purple for headings */
    margin: 10px 0;
}

.fleet-card p {
    color: #333; /* Dark text for descriptions */
}

.call-button {
    display: inline-block;
    background-color: #735DA5; /* Darker purple */
    color: white;
    border: none;
    text-align: center;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s; /* Smooth transition */
    font-size: 1em; /* Font size */
    margin-top: 10px; /* Space above the button */
    width: 100%; /* Full width button */
}

.call-button:hover {
    background-color: #5a4488; /* Darker shade on hover */
}

/* Media Queries for additional responsiveness */
@media (max-width: 600px) {
    .fleet-card {
        flex: 1 1 90%; /* Allow cards to take full width on small screens */
        max-width: none; /* Remove max-width on small screens */
    }
}

.note {
    margin-top: 20px; /* Space above the note */
    font-size: 0.9em; /* Slightly smaller font */
    color: #555; /* Gray color for the text */
    text-align: center; /* Center the text */
}






.about-section {
    padding: 80px 20px; /* Increased padding for better spacing */
    background: linear-gradient(to right, #D3C5E5, #EDEAFB); /* Elegant gradient background */
    color: #333; /* Dark text for readability */
    text-align: center; /* Center align text */
    border-radius: 20px; /* Rounded corners for the section */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Softer shadow for the section */
}

.about-section h2 {
    color: #735DA5; /* Darker purple for headings */
    margin-bottom: 20px; /* Space below the heading */
    font-size: 2.5em; /* Larger font size for emphasis */
    letter-spacing: 1.5px; /* Slightly increased letter spacing */
}

.about-section p {
    margin-bottom: 40px; /* Space below the introductory paragraph */
    font-size: 1.2em; /* Slightly larger font for readability */
    max-width: 800px; /* Limit width for better readability */
    margin-left: auto; /* Center align text */
    margin-right: auto; /* Center align text */
}

.about-details {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center align the items */
    gap: 30px; /* Space between items */
}

.about-item {
    background-color: #ffffff; /* White background for items */
    border-radius: 15px; /* Rounded corners */
    padding: 30px; /* Padding inside the item */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15); /* Softer shadow for elegance */
    flex: 1 1 250px; /* Flexible width with a minimum */
    max-width: 350px; /* Maximum width for each item */
    text-align: left; /* Align text to the left */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    position: relative; /* For decorative elements */
}

.about-item:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.about-item h3 {
    color: #735DA5; /* Darker purple for subheadings */
    margin-bottom: 15px; /* Space below subheadings */
    font-size: 1.8em; /* Increased font size for subheadings */
    font-weight: 600; /* Bold font for headings */
    text-transform: uppercase; /* Uppercase for emphasis */
}

.about-item p, .about-item ul {
    color: #555; /* Slightly lighter text color for descriptions */
    line-height: 1.6; /* Increased line height for readability */
}

.about-item ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
}

.about-item ul li {
    margin: 10px 0; /* Space between list items */
    position: relative; /* Position for decorative element */
}

.about-item ul li::before {
    content: "✔"; /* Decorative checkmark */
    position: absolute; /* Positioning for the checkmark */
    left: -20px; /* Adjust position */
    color: #735DA5; /* Match with the section theme */
}

.about-summary {
    margin-top: 40px; /* Space above the summary */
    font-size: 1.3em; /* Larger font size for summary */
    font-style: italic; /* Italicize the summary for emphasis */
    color: #735DA5; /* Match the theme color */
}



.services-section {
    padding: 60px 20px;
    background-color: #f8f9fa; /* Light gray background */
    text-align: center; /* Center align text */
}

.services-section h2 {
    color: #735DA5; /* Darker purple for headings */
    margin-bottom: 40px; /* Space below the heading */
    font-size: 2em; /* Larger font size for emphasis */
}

.services-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow cards to wrap on smaller screens */
    gap: 20px 0; /* Space between the cards */
}

.service-card {
    background-color: #ffffff; /* White background for cards */
    padding: 20px; /* Increased padding for cards */
    border-radius: 15px; /* Rounded corners for cards */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow for elegance */
    flex: 1 1 250px; /* Flexible width with a minimum width */
    width: 100%;
    max-width: 300px; /* Set maximum width for cards */
    text-align: left; /* Align text to the left */
    transition: transform 0.2s; /* Smooth scaling on hover */
    margin: 20px; /* Space around each card */
}

.service-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.service-card h3 {
    color: #735DA5; /* Darker purple for headings */
    margin-bottom: 10px; /* Space below the heading */
    font-size: 1.5em; /* Increased font size for service titles */
}

.service-card p {
    color: #333; /* Dark text for descriptions */
    line-height: 1.6; /* Increased line height for readability */
    text-align: left;
}

.service-card i {
    width: 100%;
    color: #735DA5; /* Default icon color */
    margin-bottom: 10px; /* Space below the icon */
    font-size: 3em; /* Increase icon size */
    transition: color 0.3s; /* Smooth color transition */
    text-align: center;
}
@media (max-width: 600px) {
    .service-card {
            width: 90%; /* Adjust width to be smaller on mobile */
            max-width: 200px; /* Set a smaller max-width for mobile */
            margin: 5px; /* Reduce margin for better spacing */
            padding: 15px; /* Reduce padding for smaller cards */
    }

    .service-card i {
        font-size: 2.5em; /* Slightly smaller icon on mobile */
    }
}



.contact-section {
    padding: 60px 20px; /* Padding for spacing */
    background-color: #f8f8f8; /* Light background color */
    color: #333; /* Dark text for readability */
    text-align: center; /* Center align text */
}

.contact-section h2 {
    color: #735DA5; /* Darker purple for headings */
    margin-bottom: 20px; /* Space below the heading */
    font-size: 2.5em; /* Larger font size for emphasis */
}

.contact-section p {
    margin-bottom: 40px; /* Space below the introductory paragraph */
    font-size: 1.1em; /* Font size for readability */
    max-width: 800px; /* Limit width for better readability */
    margin-left: auto; /* Center align text */
    margin-right: auto; /* Center align text */
}

.contact-container {
    display: flex;
    flex-direction: column; /* Stack elements on smaller screens */
    gap: 20px; /* Space between elements */
    max-width: 900px; /* Max width for the section */
    margin: 0 auto; /* Center the container */
}

.contact-info {
    background-color: #ffffff; /* White background */
    padding: 30px; /* Padding inside */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow */
    text-align: left; /* Align text to the left */
}

.contact-info h3 {
    color: #735DA5; /* Darker purple for subheadings */
    margin-bottom: 15px; /* Space below subheadings */
}

.contact-info p {
    margin-bottom: 10px; /* Space below paragraphs */
}

.contact-info p {
    margin-bottom: 10px; /* Space below paragraphs */
}

.contact-info i {
    margin-right: 10px; /* Space between icon and text */
    color: #735DA5; /* Icon color */
    font-size: 1.2em; /* Size of icons */
    vertical-align: middle; /* Align icons with text */
}

.contact-form {
    background-color: #ffffff; /* White background for the form */
    padding: 30px; /* Padding inside */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Light shadow */
}

.contact-form h3 {
    color: #735DA5; /* Darker purple for subheadings */
    margin-bottom: 15px; /* Space below subheadings */
    text-align: left;
}

.contact-form input, 
.contact-form textarea {
    padding: 12px; /* Padding for form fields */
    border: 1px solid #ccc; /* Light border */
    border-radius: 8px; /* Rounded corners */
    font-size: 1em; /* Font size for input fields */
    margin-bottom: 15px; /* Space below each input */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width */
    transition: border 0.2s; /* Transition for focus effect */
}

.contact-form input:focus, 
.contact-form textarea:focus {
    border: 1px solid #735DA5; /* Change border color on focus */
}

.contact-form button {
    padding: 12px; /* Padding for button */
    background-color: #735DA5; /* Button background color */
    color: #ffffff; /* White text for button */
    border: none; /* Remove border */
    border-radius: 8px; /* Rounded corners */
    font-size: 1.1em; /* Font size for button */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background 0.3s; /* Transition for hover effect */
    width: 100%; /* Full width for the button */
}

.contact-form button:hover {
    background-color: #5e4b92; /* Darker shade on hover */
}

@media (min-width: 768px) {
    .contact-container {
        flex-direction: row; /* Side by side on larger screens */
    }

    .contact-info, .contact-form {
        flex: 1; /* Equal width for both sections */
        margin: 0 10px; /* Margin between elements */
    }
}














.footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

.footer-content {
    max-width: 800px;
    margin: auto;
}

.footer-content a {
    color: white; /* Default link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make text bold */
}

.footer-content a:hover {
    color: #5e4b92; /* Darker color on hover */
}



.floating-button {
    position: fixed; /* Fixed position */
    bottom: 60px; /* Distance from the bottom */
    right: 20px; /* Distance from the right */
    display: flex; /* Flexbox for buttons alignment */
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px; /* Space between buttons */
    z-index: 1;
}

.floating-button a {
    background-color: #735DA5; /* Button color */
    color: #ffffff; /* Text color */
    padding: 15px; /* Padding for buttons */
    border-radius: 50%; /* Circular buttons */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow for depth */
    text-align: center; /* Center align text/icon */
    transition: background 0.3s; /* Transition for hover effect */
    font-size: 1.5em; /* Icon size */
}

.floating-button a:hover {
    background-color: #5e4b92; /* Darker shade on hover */
}

.floating-button .btn-whatsapp {
    background-color: #25D366; /* WhatsApp green color */
}

.floating-button .btn-whatsapp:hover {
    background-color: #20b359; /* Darker green on hover */
}