/* General Body and Font Styles */
body {
    font-family: 'Inter', sans-serif;
    padding-top: 0px; /* Add padding equal to header height to prevent content from being hidden under sticky header */
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #4b5563; /* text-gray-800 */
}

/* Hero Section Styles */
.hero-section {
    background: linear-gradient(to right, #1e3a8a, #3b82f6); /* Example gradient */
    /* Or use a background image: */
    /* background-image: url('your-background-image.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
    color: #ffffff; /* text-white */
    padding-top: 2rem; /* py-24 */
    padding-bottom: 4rem; /* py-24 */
    text-align: center;
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-section {
        padding-top: 3rem; /* md:py-32 */
        padding-bottom: 4rem; /* md:py-32 */
    }
}

.hero-section h1 {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    margin-bottom: 1.5rem; /* mb-6 */
    filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); /* drop-shadow-lg */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-section h1 {
        font-size: 3.75rem; /* md:text-6xl */
    }
}

.hero-section p {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 1rem; /* mb-4 */
    opacity: 0.9; /* opacity-90 */
}

@media (min-width: 768px) { /* md breakpoint */
    .hero-section p {
         font-size: 1.5rem; /* md:text-2xl */
    }
}

.hero-section p.font-semibold {
     font-weight: 600; /* font-semibold */
     margin-bottom: 2.5rem; /* mb-10 */
}


.hero-section a {
    display: inline-block;
    background-color: #facc15; /* bg-yellow-400 */
    color: #1e3a8a; /* text-blue-900 */
    font-weight: 700; /* font-bold */
    padding: 1rem 2.5rem; /* py-4 px-10 */
    border-radius: 9999px; /* rounded-full */
    font-size: 1.125rem; /* text-lg */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
}

.hero-section a:hover {
    background-color: #eab308; /* hover:bg-yellow-500 */
    transform: scale(1.05); /* hover:scale-105 */
}


/* Feature Icon Style */
.feature-icon {
    color: #1e3a8a; /* Darker blue for icons */
}


/* Popup Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Ensure it's on top of other content */
    visibility: hidden; /* Initially hidden */
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
}

.modal-overlay.visible {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 90%;
    width: 400px; /* Max width for the modal */
    position: relative;
}

.modal-close-button {
    position: absolute;
    top: 0.75rem; /* px-3 */
    right: 0.75rem; /* py-3 */
    font-size: 1.5rem;
    cursor: pointer;
    color: #a0aec0; /* gray-400 */
    transition: color 0.2s ease-in-out;
}

.modal-close-button:hover {
    color: #718096; /* gray-600 */
}

.modal-message {
    margin-bottom: 1.5rem; /* mb-6 */
    font-size: 1.125rem; /* text-lg */
    color: #4a5568; /* gray-700 */
}

.modal-message.success {
    color: #10b981; /* green-500 */
}

.modal-message.failure {
    color: #ef4444; /* red-500 */
}

/* Floating Buttons Base Styles (Desktop Default) */
.whatsapp-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background-color: #25D366;
    color: white;
    padding: 10px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    font-weight: bold;
    font-family: 'Work Sans', sans-serif;
}

.whatsapp-button img {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}


/* Floating Buttons Base Styles (Desktop Default) */
.call-button {
    position: fixed;
    bottom: 80px;
    right: 20px;
    z-index: 1000;
    background-color: #ffffff;
    color: #3b82f6;
    padding: 10px 15px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    font-weight: bold;
    font-family: 'Work Sans', sans-serif;
}


/* Ensure the icon inside the buttons is centered */
.whatsapp-button i,
.call-button i {
    line-height: 1; /* Adjust line height for centering */
    margin-right: 8px; /* Space between icon and text */
}

.whatsapp-button:hover,
.call-button:hover {
    transform: scale(1.1); /* Scale effect on hover */
}

/* Mobile Styles for Floating Buttons (Apply below 768px) */
@media (max-width: 767px) {
    .whatsapp-button {
        bottom: 20px; /* Keep same bottom as call button for alignment */
        right: 15px; /* Adjust right position for mobile */
        padding: 8px 12px; /* Smaller padding on mobile */
        font-size: 0.9rem; /* Smaller font size on mobile */
        /* margin-left: 8px; /* Removed as right positioning handles spacing */
    }

    .call-button {
        bottom: 20px; /* Keep same bottom as whatsapp button for alignment */
        right: 254px; /* Adjust position on mobile (approximate) */
        padding: 8px 12px; /* Smaller padding on mobile */
        font-size: 0.9rem; /* Smaller font size on mobile */
         /* Reset desktop specific styles if needed, though right overrides */
    }

     /* Adjust icon margin for smaller buttons on mobile */
    .whatsapp-button i,
    .call-button i {
         margin-right: 4px; /* Smaller margin next to icon on mobile */
    }
}


/* Mobile Menu Styles */
.mobile-menu {
    position: absolute; /* Position relative to the header */
    top: 100%; /* Position below the header */
    left: 0;
    width: 100%;
    background-color: #fff; /* White background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 40; /* Below sticky header but above content */
    overflow: hidden; /* Hide content outside the menu */
    max-height: 0; /* Initially hidden */
    transition: max-height 0.3s ease-in-out; /* Smooth transition */
}

.mobile-menu.open {
    max-height: 500px; /* Sufficient height to show all links */
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu li {
    border-bottom: 1px solid #e2e8f0; /* subtle gray border */
}

.mobile-menu a {
    display: block; /* Make the whole list item clickable */
    padding: 1rem 1.5rem; /* px-6, py-4 */
    color: #4a5568; /* gray-700 */
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.mobile-menu a:hover {
    background-color: #f7fafc; /* gray-100 */
}

/* Style for the close button within the mobile menu */
.mobile-menu-close {
    text-align: right;
    padding: 1rem 1.5rem;
    cursor: pointer;
    color: #4a5568;
    font-size: 1.5rem;
}

/* Specific styles for content sections (used on Pretoria page) */
.content-section {
    padding: 4rem 1rem; /* py-16, px-4 */
}

.content-section .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

.content-section h2 {
    color: #1a202c; /* Darker text for heading */
    margin-bottom: 3rem; /* More space below heading */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    text-align: center;
}

@media (min-width: 768px) { /* md breakpoint */
    .content-section h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

.content-section h3 {
    color: #2d3748; /* Slightly lighter dark text for subheadings */
    margin-top: 2rem; /* Space above subheadings */
    margin-bottom: 1rem; /* Space below subheadings */
    border-bottom: 2px solid #a0aec0; /* Subtle underline */
    padding-bottom: 0.5rem; /* Space between text and underline */
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
}

.content-section p {
    margin-bottom: 1.5rem; /* More space between paragraphs */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
}

.content-section ul {
    margin-bottom: 1.5rem; /* Space below lists */
    padding-left: 1.5rem; /* Indent lists */
    list-style: disc; /* Default list style */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
}

.content-section li {
    margin-bottom: 0.75rem; /* Space between list items */
    line-height: 1.6; /* Improve line spacing */
}


/* Specific styles for the Services section */
#services {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #e5e7eb; /* bg-gray-200 */
}

#services .container {
    max-width: 1280px; /* xl:max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#services h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #services h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#services .grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) { /* md breakpoint */
    #services .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    #services .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    }
}

#services .grid > div {
    background-color: #ffffff; /* bg-white */
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-lg */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#services .grid > div:hover {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.08); /* hover:shadow-xl */
    transform: translateY(-0.25rem); /* hover:-translate-y-1 */
}

#services .grid > div i {
    color: #2563eb; /* text-blue-600 */
    font-size: 2.25rem; /* text-4xl */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center;
    display: block; /* Ensure icon is centered */
}

#services .grid > div h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center;
    color: #1f2937; /* text-gray-800 */
}

#services .grid > div p {
    color: #374151; /* text-gray-700 */
    text-align: center;
    margin-bottom: 1rem; /* mb-4 */
}

#services .grid > div ul {
    list-style: disc;
    list-style-position: inside;
    color: #374151; /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
    padding-left: 0; /* Remove default padding */
}

#services .grid > div ul li {
    margin-bottom: 0.5rem; /* space-y-2 */
}

/* Highlight for Local and Cross-Border Transport */
.highlighted-service {
    background-color: #bfdbfe; /* Light blue background */
    border: 2px solid #3b82f6; /* Blue border */
}


/* Specific styles for the Location Sections (Pretoria, Johannesburg, Mpumalanga, Gauteng) */
#pretoria,
#johannesburg,
#mpumalanga,
#gauteng {
     padding: 4rem 1rem; /* py-16, px-4 */
}

#pretoria {
    background-color: #ffffff; /* bg-white */
}

#johannesburg {
    background-color: #e5e7eb; /* bg-gray-200 */
}

#mpumalanga {
    background-color: #ffffff; /* bg-white */
}

#gauteng {
     background-color: #e5e7eb; /* bg-gray-200 */
}

#pretoria .container,
#johannesburg .container,
#mpumalanga .container,
#gauteng .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#pretoria h2,
#johannesburg h2,
#mpumalanga h2,
#gauteng h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #pretoria h2,
    #johannesburg h2,
    #mpumalanga h2,
    #gauteng h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#pretoria p,
#johannesburg p,
#mpumalanga p,
#gauteng p {
    margin-bottom: 1.5rem; /* mb-6 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
    color: #374151; /* text-gray-700 */
}

#pretoria h3,
#johannesburg h3,
#mpumalanga h3,
#gauteng h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    color: #1f2937; /* text-gray-800 */
    border-bottom: 2px solid #a0aec0; /* Subtle underline */
    padding-bottom: 0.5rem; /* Space between text and underline */
}

#pretoria ul,
#johannesburg ul,
#mpumalanga ul,
#gauteng ul {
    list-style: disc;
    list-style-position: inside;
    margin-bottom: 1.5rem; /* mb-6 */
    padding-left: 0; /* Remove default padding */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
}

#pretoria ul li,
#johannesburg ul li,
#mpumalanga ul li,
#gauteng ul li {
     margin-bottom: 0.5rem; /* space-y-2 */
}

#pretoria .text-center.mt-8,
#johannesburg .text-center.mt-8,
#mpumalanga .text-center.mt-8,
#gauteng .text-center.mt-8 {
    margin-top: 2rem; /* mt-8 */
    text-align: center;
}


/* Specific styles for the Trailer Hire section */
#trailer-hire {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #ffffff; /* bg-white */
}

#trailer-hire .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#trailer-hire h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #trailer-hire h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#trailer-hire p {
    margin-bottom: 1.5rem; /* mb-6 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
    color: #374151; /* text-gray-700 */
}

#trailer-hire h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    color: #1f2937; /* text-gray-800 */
    border-bottom: 2px solid #a0aec0; /* Subtle underline */
    padding-bottom: 0.5rem; /* Space between text and underline */
}

#trailer-hire ul {
    list-style: disc;
    list-style-position: inside;
    margin-bottom: 1.5rem; /* mb-6 */
    padding-left: 0; /* Remove default padding */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
}

#trailer-hire ul li {
     margin-bottom: 0.5rem; /* space-y-2 */
}

#trailer-hire .text-center.mt-8 {
    margin-top: 2rem; /* mt-8 */
    text-align: center;
}


/* Specific styles for the Why Choose Us section */
#why-choose-us {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #e5e7eb; /* bg-gray-200 */
}

#why-choose-us .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#why-choose-us h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #why-choose-us h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#why-choose-us .grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
    color: #374151; /* text-gray-700 */
    font-size: 1.125rem; /* text-lg */
}

@media (min-width: 768px) { /* md breakpoint */
    #why-choose-us .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

#why-choose-us .grid > div {
    display: flex;
    align-items: flex-start;
    column-gap: 1rem; /* space-x-4 */
}

#why-choose-us .grid > div .flex-shrink-0 {
    flex-shrink: 0;
    font-size: 1.875rem; /* text-3xl */
}

#why-choose-us .grid > div h3 {
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #1f2937; /* text-gray-800 */
    margin-top: 0; /* Remove default margin-top from h3 */
    border-bottom: none; /* Remove underline from h3 */
    padding-bottom: 0; /* Remove padding-bottom from h3 */
}

#why-choose-us .grid > div p {
    margin-bottom: 0; /* Remove default margin-bottom from p */
}


/* Specific styles for the Rental Info section */
#rental-info {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #ffffff; /* bg-white */
}

#rental-info .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#rental-info h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #rental-info h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#rental-info p {
    margin-bottom: 1.5rem; /* mb-6 */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
    color: #374151; /* text-gray-700 */
}

#rental-info h3 {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-top: 2rem; /* mt-8 */
    margin-bottom: 1rem; /* mb-4 */
    color: #1f2937; /* text-gray-800 */
    border-bottom: 2px solid #a0aec0; /* Subtle underline */
    padding-bottom: 0.5rem; /* Space between text and underline */
}

#rental-info ol,
#rental-info ul {
    margin-bottom: 1.5rem; /* mb-6 */
    padding-left: 1.5rem; /* Indent lists */
    font-size: 1.125rem; /* text-lg */
    line-height: 1.6; /* leading-relaxed */
    color: #374151; /* text-gray-700 */
}

#rental-info ol li,
#rental-info ul li {
     margin-bottom: 0.5rem; /* space-y-2 */
}

#rental-info .text-center.mt-8 {
    margin-top: 2rem; /* mt-8 */
    text-align: center;
}


/* Specific styles for the Fleet section */
#fleet {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #e5e7eb; /* bg-gray-200 */
}

#fleet .container {
    max-width: 1280px; /* xl:max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#fleet h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #fleet h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#fleet p.text-xl {
    font-size: 1.25rem; /* text-xl */
    color: #374151; /* text-gray-700 */
    text-align: center;
    margin-bottom: 2.5rem; /* mb-10 */
}

#fleet .grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) { /* md breakpoint */
    #fleet .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    #fleet .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* lg:grid-cols-3 */
    }
}

#fleet .grid > div {
    background-color: #ffffff; /* bg-white */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-lg */
    text-align: center;
}

#fleet .grid > div img {
    border-radius: 0.375rem; /* rounded-md */
    margin-bottom: 1rem; /* mb-4 */
    width: 100%;
    height: auto;
}

#fleet .grid > div h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #1f2937; /* text-gray-800 */
    margin-top: 0; /* Remove default margin-top from h3 */
    border-bottom: none; /* Remove underline from h3 */
    padding-bottom: 0; /* Remove padding-bottom from h3 */
}

#fleet .grid > div p {
    color: #374151; /* text-gray-700 */
    margin-bottom: 0; /* Remove default margin-bottom from p */
}


/* Specific styles for the Testimonials section */
#testimonials {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #ffffff; /* bg-white */
}

#testimonials .container {
    max-width: 1280px; /* xl:max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#testimonials h2 {
    text-align: center;
    margin-bottom: 3rem; /* mb-12 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
}

@media (min-width: 768px) { /* md breakpoint */
    #testimonials h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#testimonials .grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* grid-cols-1 */
    gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) { /* md breakpoint */
    #testimonials .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
    }
}

#testimonials .grid > div {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* shadow-lg */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#testimonials .grid > div:hover {
    transform: translateY(-0.3125rem); /* translateY(-5px) */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.15);
}

#testimonials .text-yellow-500 {
    color: #f59e0b; /* text-yellow-500 */
    margin-bottom: 1rem; /* mb-4 */
    text-align: center;
}

#testimonials p.italic {
    font-style: italic;
    margin-bottom: 1.5rem; /* mb-6 */
    flex-grow: 1;
    color: #374151; /* text-gray-700 */
    text-align: center;
}

#testimonials p.font-semibold {
    font-weight: 600; /* font-semibold */
    margin-top: auto;
    color: #1f2937; /* text-gray-800 */
    text-align: center;
}


/* Specific styles for the Quick Quote section */
#quick-quote {
    padding: 4rem 1rem; /* py-16, px-4 */
    background-color: #2563eb; /* bg-blue-600 */
    color: #ffffff; /* text-white */
    text-align: center;
}

#quick-quote .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}

#quick-quote h2 {
    margin-bottom: 2rem; /* mb-8 */
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
}

@media (min-width: 768px) { /* md breakpoint */
    #quick-quote h2 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

#quick-quote p.text-xl {
    font-size: 1.25rem; /* text-xl */
    margin-bottom: 2rem; /* mb-8 */
    opacity: 0.9;
}

#quick-quote .max-w-lg {
    max-width: 32rem; /* max-w-lg */
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff; /* bg-white */
    color: #1f2937; /* text-gray-800 */
    padding: 2rem; /* p-8 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.08); /* shadow-xl */
}

#quick-quote form .mb-5 {
    margin-bottom: 1.25rem; /* mb-5 */
    text-align: left;
}

#quick-quote form label {
    display: block;
    color: #374151; /* text-gray-700 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem; /* mb-2 */
}

#quick-quote form input[type="number"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* shadow */
    appearance: none;
    border: 1px solid #d1d5db; /* border */
    border-radius: 0.25rem; /* rounded */
    width: 100%;
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    color: #374151; /* text-gray-700 */
    line-height: 1.25; /* leading-tight */
    outline: none;
}

#quick-quote form input[type="number"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 */
}

#quick-quote form .mb-6 {
    margin-bottom: 1.5rem; /* mb-6 */
    text-align: center;
}

#quick-quote form h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
    margin-top: 0; /* Remove default margin-top from h3 */
    border-bottom: none; /* Remove underline from h3 */
    padding-bottom: 0; /* Remove padding-bottom from h3 */
}

#quick-quote form #estimatedTotal {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #2563eb; /* text-blue-700 */
}

#quick-quote form .text-sm {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    margin-top: 0.5rem; /* mt-2 */
}

#quick-quote form .flex.justify-center {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem; /* mb-4 */
}

#quick-quote form button[type="submit"] {
    background-color: #facc15; /* bg-yellow-400 */
    color: #1e3a8a; /* text-blue-900 */
    font-weight: 700; /* font-bold */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem; /* px-8 */
    border-radius: 9999px; /* rounded-full */
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* focus:shadow-outline */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#quick-quote form button[type="submit"]:hover {
    background-color: #eab308; /* hover:bg-yellow-500 */
    transform: scale(1.05); /* hover:scale-105 */
}


/* Specific styles for the Contact section */
#contact {
    padding: 5rem 1rem; /* Adjusted padding */
    /* Removed background gradient */
    background-color: #1d4ed8; /* bg-blue-700 - using a solid color instead */
    color: #ffffff; /* text-white */
    text-align: center;
    position: relative; /* Needed for pseudo-elements */
    overflow: hidden; /* Hide overflowing pseudo-elements */
}

/* Removed pseudo-elements for decorative background */
/*
#contact::before,
#contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.08;
    z-index: 1;
}

#contact::before {
    background-image: url('https://placehold.co/1200x800/ffffff/000000?text=Abstract+Pattern+Left');
    background-position: left top;
}

#contact::after {
    background-image: url('https://placehold.co/1200x800/ffffff/000000?text=Abstract+Pattern+Right');
    background-position: right bottom;
}
*/

#contact .container {
    max-width: 960px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    position: relative; /* Bring container content above pseudo-elements */
    z-index: 2;
}

#contact h2 {
    margin-bottom: 1.5rem; /* Adjusted margin below heading */
    font-size: 2.25rem; /* Adjusted heading size */
    font-weight: 700; /* font-bold */
    color: #facc15; /* Yellow heading for contrast */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Subtle text shadow */
}

@media (min-width: 768px) { /* md breakpoint */
    #contact h2 {
        font-size: 2.75rem; /* Adjusted md heading size */
    }
}

#contact p.text-xl {
    font-size: 1.125rem; /* Adjusted text size */
    margin-bottom: 2.5rem; /* Adjusted margin below intro text */
    opacity: 0.95; /* Slightly less transparent */
    color: #e5e7eb; /* Lighter text for readability on blue background */
}

#contact .max-w-lg {
    max-width: 30rem; /* Slightly smaller max width for form container */
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff; /* bg-white */
    color: #1f2937; /* text-gray-800 */
    padding: 2rem; /* Adjusted padding */
    border-radius: 0.75rem; /* More rounded corners */
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2), 0 8px 10px rgba(0, 0, 0, 0.1); /* Stronger shadow */
    border: 1px solid #d1d5db; /* Subtle border */
}

/* New container for inlining Name and Phone fields on desktop */
@media (min-width: 768px) { /* md breakpoint */
    #contact form .name-phone-group {
        display: flex;
        gap: 1.25rem; /* space-x-5 - gap between fields */
    }

    #contact form .name-phone-group .mb-5 {
        flex: 1; /* Allow each field to take equal space */
        margin-bottom: 0; /* Remove bottom margin on flex items */
    }
}


#contact form .mb-5 {
    margin-bottom: 1.25rem; /* mb-5 */
    text-align: left;
}

#contact form label {
    display: block;
    color: #374151; /* text-gray-700 */
    font-size: 0.875rem; /* Adjusted label font size */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem; /* mb-2 */
}

#contact form input[type="text"],
#contact form input[type="email"],
#contact form input[type="tel"],
#contact form select,
#contact form textarea,
#contact form input[type="number"] { /* Added number input to styles */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* shadow */
    appearance: none;
    border: 1px solid #d1d5db; /* border */
    border-radius: 0.375rem; /* Slightly more rounded inputs */
    width: 100%;
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    color: #374151; /* text-gray-700 */
    line-height: 1.25; /* leading-tight */
    outline: none;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#contact form input[type="text"]:focus,
#contact form input[type="email"]:focus,
#contact form input[type="tel"]:focus,
#contact form select:focus,
#contact form textarea:focus,
#contact form input[type="number"]:focus { /* Added number input to focus styles */
    outline: none;
    border-color: #3b82f6; /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 */
}

#contact form textarea {
    resize: vertical; /* Allow vertical resizing */
}


#contact form .mb-6 {
    margin-bottom: 1.5rem; /* mb-6 */
    text-align: left;
}

#contact form .flex.justify-center {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem; /* mb-4 */
}

#contact form button[type="submit"] {
    background-color: #facc15; /* bg-yellow-400 */
    color: #1e3a8a; /* text-blue-900 */
    font-weight: 700; /* font-bold */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem; /* px-8 */
    border-radius: 9999px; /* rounded-full */
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* focus:shadow-outline */
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
    border: none; /* Remove default button border */
    cursor: pointer;
}

#contact form button[type="submit"]:hover {
    background-color: #eab308; /* hover:bg-yellow-500 */
    transform: scale(1.05); /* hover:scale-105 */
}

#contact .mt-12 {
    margin-top: 3rem; /* mt-12 */
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #facc15; /* Yellow text for contrast */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle text shadow */
}

#contact .mt-2 {
    margin-top: 0.5rem; /* mt-2 */
    font-size: 1.125rem; /* text-lg */
    color: #e5e7eb; /* Lighter text */
}

#contact .mt-4 {
     margin-top: 1rem; /* mt-4 */
}

#contact .text-md {
    font-size: 1rem; /* text-md */
    color: #e5e7eb; /* Lighter text */
}

#contact i {
    margin-right: 0.5rem; /* mr-2 */
    color: #facc15; /* Yellow icons for contrast */
}

/* Styles for the integrated Quote fields in Contact Form */
#contact form #quotationFields {
    border-top: 1px solid #d1d5db; /* Add a separator line */
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

#contact form #quotationFields h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 0.5rem; /* mb-2 */
    text-align: center; /* Center the heading */
    border-bottom: none; /* Remove underline */
    padding-bottom: 0; /* Remove padding */
}

#contact form #estimatedTotalContact {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: #2563eb; /* text-blue-700 */
    text-align: center; /* Center the total */
}

#contact form .text-sm {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* text-gray-600 */
    margin-top: 0.5rem; /* mt-2 */
    text-align: center; /* Center the note */
}

/* Footer Styles */
footer {
    background-color: #111827; /* bg-gray-900 */
    color: #9ca3af; /* text-gray-400 */
    padding-top: 2rem; /* py-8 */
    padding-bottom: 2rem; /* py-8 */
    text-align: center;
}

footer .container {
    max-width: 1280px; /* xl:max-w-screen-xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
}