/* Basic Reset & Body Styles */
:root \{ 
\
--primary-color: #0056b3
; /* A shade of blue, avoiding indigo/purple */
\
--secondary-color: #007bff
;
\
--text-color: #333
;
\
--light-gray:#f8f9fa 
;
\
--dark-gray: #6c757d
;
\
--border-color:#dee2e6 
;
\} * \{ 
\
box-sizing:border-box 
;
\
margin: 0
;
\
padding: 
0
;
\} body \{ font-family: 
'Arial\', sans-serif;\
    line-height: 1.6;\
    color: var(--text-color);\
    background-color: #fff; /* White background as per instructions */\
    display: flex;\
    flex-direction: column;\
    min-height: 100vh;
\} .container \{ 
\
max-width: 1200px
;
\
margin: 0 auto
;
\
padding: 0 15px
;
\}
  /* Header & Navigation */
  .sticky-header
  \{ 
\
background-color: var(--primary-color)
;
\
color:#fff 
;
\
padding: 1rem 0
;
\
position:sticky 
;
\
top: 0
;
\
z-index: 1000
;
\
box-shadow: 0 2px 5px rgba(0,0,0,0.1
)
;
\} .sticky-header .container \{ 
\
display:flex 
;
\
justify-content:space-between 
;
\
align-items:center 
;
\} .logo \{ 
\
color:#fff 
;
text-decoration:none 
;
font-size: 1.5rem
;
font-weight:bold 
;
\} .nav-menu \{ list-style:none 
;
display:flex 
;
gap: 20px
;
\} .nav-menu li a \{ color:#fff 
;
text-decoration:none 
;
padding: 5px 10px
;
transition: background-color 0.3s ease
;
border-radius: 4px
;
\}

.nav-menu li a:hover,
.nav-menu li a.active \{
    background-color: rgba(255, 255, 255, 0.2
)
;
\} .menu-toggle \{ display:none 
; /* Hidden on desktop */
background:none 
;
border:none 
;
color:#fff 
;
font-size: 1.8rem
;
cursor:pointer 
;
padding: 5px
;
\} .hamburger \{ display:block 
;
width: 25px
;
height: 3px
;
background-color:#fff 
;
position:relative 
;
transition: background-color 0.3s ease
;
\} .hamburger::before,
.hamburger::after \{ content: 
''
;
display:block 
;
width: 25px
;
height: 3px
;
background-color:#fff 
;
position:absolute 
;
transition: transform 0.3s ease
;
\}

.hamburger::before \{
    top: -8px
;
\}

.hamburger::after \{
    top: 8px
;
\}
  /* Mobile menu open state */
  .menu-toggle.open
  .hamburger
  \{
  background-color:transparent 
;
\}

.menu-toggle.open .hamburger::before \{
    transform: translateY(8px) rotate(45deg
)
;
\}

.menu-toggle.open .hamburger::after \{
    transform: translateY(-8px) rotate(-45deg
)
;
\}
  /* Main Content Sections */
  main
  \{
  flex: 
1
;
padding: 2rem 
0
;
\}

section \{
    padding: 2rem 
0
;
margin-bottom: 2rem
;
\}

section:nth-of-type(even) \{
    background-color: var(--light-gray
)
;
\}

h1, h2, h3 \{
    color: var(--primary-color
)
;
margin-bottom: 1rem
;
text-align:center 
;
\}

h1 \{
    font-size: 2.5rem
;
\}

h2 \{
    font-size: 2rem
;
\}

h3 \{
    font-size: 1.75rem
;
\}

p \{
    margin-bottom: 1rem
;
\} .text-center \{ text-align:center 
;
\}

.subheading \{
    font-size: 1.2rem
;
color: var(--dark-gray
)
;
margin-bottom: 1.5rem
;
text-align:center 
;
\}
  /* CTA Buttons */
  .cta-buttons
  \{
  display:flex 
;
flex-wrap:wrap 
;
justify-content:center 
;
gap: 15px
;
margin-top: 2rem
;
margin-bottom: 3rem
;
\} .btn \{ display:inline-block 
;
padding: 12px 25px
;
border-radius: 5px
;
text-decoration:none 
;
font-weight:bold 
;
transition: background-color 0.3s ease, color 0.3s ease
;
text-align:center 
;
white-space:nowrap 
;
\}

.btn-primary \{
    background-color: var(--primary-color
)
;
color:#fff 
;
border: 2px solid var(--primary-color
)
;
\}

.btn-primary:hover \{
    background-color: #
004085
;
border-color: #
004085
;
\} .btn-secondary \{ background-color:transparent 
;
color: var(--primary-color
)
;
border: 2px solid var(--primary-color
)
;
\}

.btn-secondary:hover \{
    background-color: var(--primary-color
)
;
color:#fff 
;
\}
  /* Services Overview */
  .services-overview
  ul
  \{
  list-style:none 
;
padding: 
0
;
display:grid 
;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)
)
;
gap: 20px
;
margin-top: 2rem
;
\} .services-overview li \{ background-color:#fff 
;
padding: 20px
;
border-radius: 8px
;
box-shadow: 0 2px 10px rgba(0,0,0,0.05
)
;
text-align:center 
;
font-weight:bold 
;
color: var(--primary-color
)
;
\}
  /* Fleet Section */
  .fleet-grid
  \{
  display:grid 
;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)
)
;
gap: 30px
;
margin-top: 2rem
;
\} .fleet-item \{ background-color:#fff 
;
border-radius: 8px
;
box-shadow: 0 4px 15px rgba(0,0,0,0.1
)
;
overflow:hidden 
;
text-align:center 
;
\}

.fleet-item img \{
    width: 100
%
;
height: 200px
;
object-fit:cover 
;
display:block 
;
\}

.fleet-item h3 \{
    margin-top: 15px
;
margin-bottom: 10px
;
font-size: 1.4rem
;
color: var(--primary-color
)
;
\}

.fleet-item p \{
    padding: 0 15px 20px
;
font-size: 0.95rem
;
color: var(--dark-gray
)
;
\}

/* Nearby Areas */
.nearby-areas \{
    margin-top: 2rem
;
padding: 1.5rem
;
background-color: var(--light-gray
)
;
border-radius: 8px
;
\} .nearby-areas h3 \{ text-align:left 
;
margin-bottom: 1rem
;
\} .nearby-areas ul \{ list-style:none 
;
display:flex 
;
flex-wrap:wrap 
;
gap: 10px 20px
;
padding: 
0
;
\}

.nearby-areas li \{
    font-size: 0.95rem
;
color: var(--dark-gray
)
;
\}

/* Contact Form */
.contact-form-container \{
    max-width: 600px
;
margin: 0 auto
;
background-color:#fff 
;
padding: 30px
;
border-radius: 8px
;
box-shadow: 0 4px 15px rgba(0,0,0,0.1
)
;
\} .contact-form label \{ display:block 
;
margin-bottom: 8px
;
font-weight:bold 
;
color: var(--text-color
)
;
\}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea \{
    width: 100
%
;
padding: 12px
;
margin-bottom: 20px
;
border: 1px solid var(--border-color
)
;
border-radius: 5px
;
font-size: 1rem
;
\}

.contact-form textarea \{
    min-height: 120px
;
resize:vertical 
;
\}

.contact-form button \{
    background-color: var(--primary-color
)
;
color:#fff 
;
border:none 
;
padding: 15px 30px
;
border-radius: 5px
;
cursor:pointer 
;
font-size: 1.1rem
;
font-weight:bold 
;
transition: background-color 0.3s ease
;
width: 100
%
;
\}

.contact-form button:hover \{
    background-color: #
004085
;
\}

.contact-info-details \{
    margin-top: 2rem
;
text-align:center 
;
\}

.contact-info-details p \{
    margin-bottom: 0.5rem
;
\}

.contact-info-details a \{
    color: var(--primary-color
)
;
text-decoration:none 
;
\} .contact-info-details a:hover \{ text-decoration:underline 
;
\} .booking-steps ol \{ list-style:decimal 
;
padding-left: 20px
;
margin-top: 1rem
;
\}

.booking-steps li \{
    margin-bottom: 10px
;
\}

.map-illustration \{
    margin-top: 2rem
;
text-align:center 
;
\}

.map-illustration img \{
    max-width: 100
%
;
height:auto 
;
border-radius: 8px
;
box-shadow: 0 4px 15px rgba(0,0,0,0.1
)
;
\}

/* Footer */
footer \{
    background-color: #
333
;
color:#fff 
;
padding: 2rem 
0
;
margin-top: 3rem
;
\} footer .container \{ display:flex 
;
flex-wrap:wrap 
;
justify-content:space-between 
;
gap: 30px
;
\} .footer-nav,
.footer-contact,
.footer-hours \{ flex: 
1
;
min-width: 250px
;
\} footer h3 \{ color:#fff 
;
margin-bottom: 1rem
;
font-size: 1.2rem
;
text-align:left 
;
\} footer ul \{ list-style:none 
;
padding: 
0
;
\} footer ul li a \{ color:#fff 
;
text-decoration:none 
;
display:block 
;
padding: 5px 
0
;
transition: color 0.3s ease
;
\}

footer ul li a:hover \{
    color: var(--secondary-color
)
;
\}

footer p \{
    font-size: 0.9rem
;
margin-bottom: 0.5rem
;
color:#ccc 
;
\}

footer a \{
    color: var(--secondary-color
)
;
text-decoration:none 
;
\} footer a:hover \{ text-decoration:underline 
;
\} .copyright \{ text-align:center 
;
margin-top: 2rem
;
padding-top: 1rem
;
border-top: 1px solid #
555
;
font-size: 0.85rem
;
color:#ccc 
;
\}

/* Responsive Design */
@media (max-width: 768px) \{
    .sticky-header .container \{
        flex-wrap: wrap
;
\} .logo \{ flex-grow: 
1
;
\} .menu-toggle \{ display:block 
; /* Show on mobile */
\} .nav-menu \{ flex-direction:column 
;
width: 100
%
;
display:none 
; /* Hidden by default on mobile */
background-color: var(--primary-color
)
;
padding: 1rem 
0
;
margin-top: 1rem
;
border-top: 1px solid rgba(255,255,255,0.2
)
;
\} .nav-menu.open \{ display:flex 
; /* Show when open */
\} .nav-menu li \{ text-align:center 
;
margin: 0.5rem 
0
;
\}

    .nav-menu li a \{
        padding: 10px 
0
;
width: 100
%
;
display:block 
;
\}

    h1 \{
        font-size: 2rem
;
\}

    .subheading \{
        font-size: 1rem
;
\}

    .btn \{
        width: 100
%
;
max-width: 300px
;
\}

    .fleet-grid \{
        grid-template-columns: 1fr
;
\} footer .container \{ flex-direction:column 
;
align-items:center 
;
text-align:center 
;
\} .footer-nav,
.footer-contact,
.footer-hours \{ min-width:unset 
;
width: 100
%
;
margin-bottom: 20px
;
\} footer h3 \{ text-align:center 
;
\} .nearby-areas ul \{ justify-content:center 
;
\} \}