body {
    font-family: 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8; /* Default background color for the body */
    color: #333;
}
header {
    background-color: #333; /* Dark gray background */
    padding: 10px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect */
}
.logo img {
    max-height: 75px; 
    padding: 15px; 
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin: 0 10px;
}
nav ul li a {
    color: white;
    background-color: #333;
    text-decoration: none;
    padding: 5px 10px;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 5px; /* Rounded corners */
}
nav ul li a:hover {
    background-color: #555;
    color: white;
}
nav ul li a.active {
    background-color: gray;
}
main {
    padding: 2px; 
    max-width: 60%; 
    margin: 0 auto;
}

/* ========= Footer Styling ========= */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0; 
}

.footerAlign {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Adjust spacing between items */
    flex-wrap: wrap;
}

footer h6 {
    margin-top: 10px;
    font-size: 0.6em;
}

footer img {
    max-height: 40px; /* Adjust the height as needed */
}

footer a {
    color: white;
}

footer a:hover {
    background-color: #555;
    color: white;
}

/* ======== image captions ======== */
.image-with-caption {
    text-align: center; 
    margin-bottom: 2px; 
}

.image-with-caption img {
    max-width: 100%; 
    border-radius: 2px; 
}

.image-with-caption figcaption {
    margin-top: 2px; 
    font-style: italic; 
    color: #666; 
    font-size: 12px; 
}

/* ==================== */

.trustpilot-widget {
    margin-top: 10px; /* Space above the Trustpilot widget */
}


/* ====== Mobile Display ============ */
@media (max-width: 768px) {
    .content-section {
        flex-direction: column; /* Stack the content vertically */
    }

    .content-section img {
        margin: 10px 0;
    }
	
	.history-content-section {
        flex-direction: column; 
    }

    .history-content-section img {
        margin: 10px 0; 
    }
}
.hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #333;
        position: absolute;
        top: 50px; 
        left: 0;
        z-index: 1;
    }

    nav ul li {
        display: block;
        margin: 0;
    }

    nav ul li a {
        display: block;
        padding: 10px;
        border-top: 1px solid #444;
    }

    nav ul.show {
        display: flex;
    }
}
/* ==================== */
/* ======= home page content =========== */
.home-content {
    padding: 10px; 
}

.content-section {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.content-section img {
    max-width: 200px; 
    margin: 5px;
    border-radius: 5px;
}

.text-content {
    flex: 1;
}

.special-text {
        font-size: 12px; /* Forced font size for elements with this class */
}

list-style {
    font-size: 8px; 
}

.text-content h2 {
    font-size: 24px; 
    margin-bottom: 10px; 
    color: #333;
}

/* ======= history page content =========== */
.history-content-section {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.history-content-section img {
    max-width: 300px; 
    margin: 5px;
    border-radius: 5px;
}

body.local-history {
    
}

.local-history-content img {
    max-width: 100%; 
    height: auto; 
    margin-bottom: 20px; 
}

.local-history-content img.large {
    width: 100%;
    max-width: none; 
    height: auto; 
    margin-bottom: 20px;
}

/* ======= image content =========== */
.left-image {
    order: -1; /* Place the image on the left for left-image class */
    margin-right: 5px; 
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.6);
}

.hitory-image {
    margin-right: 2px;
	width: 100%;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.6);
}

.right-image {
    margin-left: 5px;
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.6);
}

.plain-image {
    margin-left: 5px;
}

/* ============ Contact Form ============= */
input[type=text],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049;
}
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* ============ Sitemap ============= */
.sitemap {
	max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}
.sitemap h1 {
    text-align: center;
}
.sitemap ul {
	list-style-type: none;
	padding: 0;
}
.sitemap ul li {
	margin: 10px 0;
}
.sitemap ul li a {
	text-decoration: none;
	color: #007BFF;
}
.sitemap ul li a:hover {
	text-decoration: underline;
}
/* ====== Pricing Table Styling ====== */
/:root{
  --bg:#f6f8fb; --card:#ffffff; --accent:#0b5cff; --accent-2:#f5a623; --muted:#667085; --success:#10b981;
  --radius:12px; --shadow: 0 8px 24px rgba(18, 38, 63, 0.08);
}
/*{box-sizing:border-box}*/
.pricing-page{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:#0b1220; margin:24px}
.pricing-wrap{max-width:980px;margin:0 auto;padding:28px}
.Pricing{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.title{font-size:20px;font-weight:700}
.subtitle{color:var(--muted);font-size:13px}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;align-items:stretch;border:1px solid rgba(12,20,30,0.04)}
.card .label{font-size:13px;color:var(--muted);margin-bottom:8px}
.card .hours{font-weight:700;font-size:20px;margin-bottom:6px}
.price{font-size:20px;font-weight:700;margin:6px 0}
.perhour{color:var(--muted);font-size:13px}
.savings{margin-top:10px;font-size:13px;color:var(--success);font-weight:600}
.cta{margin-top:10px}
.btn{display:inline-block;padding:5px 14px;border-radius:5px;text-decoration:none;font-weight:700}
.btn-primary{border:1px solid rgba(11,92,255,0.12);color:var(--accent);background:transparent}
.btn-ghost{border:1px solid rgba(11,92,255,0.12);color:var(--accent);background:transparent}

/* Best value styling */
.best {
  position: relative; /* needed for absolute positioning of ribbon */
  border: 2px solid rgba(181,146,255,0.18);
}
.best .ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f5a623, #ff5500); /* darker gradient */
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2); /* stronger shadow */
  z-index: 100;
}
.best .price{font-size:30px}

.note{font-size:13px;color:var(--muted);margin-top:14px}

/* Responsive */
@media (max-width:820px){
  .cards{grid-template-columns:1fr}
  .best{transform:none}
}
/* Dark grey buttons by default */
.btn, .btn-primary, .btn-ghost {
  background-color: #333333;  /* dark grey */
  color: #ffffff;             /* white text */
  border: 1px solid #333333;  /* match border to button */
  transition: background-color 0.3s, color 0.3s; /* smooth hover */
}

/* Hover effect: light grey */
.btn:hover, .btn-primary:hover, .btn-ghost:hover {
  background-color: #cccccc;  /* light grey */
  color: #000000;             /* black text on hover */
  border-color: #cccccc;      /* match border to background */
}