* {
	-webkit-user-select: none;
	user-select: none
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ===============================
   BRAND VARIABLES
================================ */

:root {
  --brand-green: #00b67a;
  --brand-green-soft: rgba(0,182,122,0.15);
  --text-main: #111827;
  --text-muted: #4b5563;
  --border: #e5e7eb;
}

/* ===============================
   BASE
================================ */

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: #ffffff;
  color: var(--text-main);
  line-height: 1.65;
}

/* ===============================
   HEADER / NAV
================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
}

.nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  height: 70px;
}

.navlinks {
  display: flex;
}

.navlinks a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  padding: 14px 18px;
  border-left: 1px solid var(--border);
  transition: background .2s ease, color .2s ease;
}

.navlinks a:last-child {
  border-right: 1px solid var(--border);
}

.navlinks a:hover {
  background: var(--brand-green-soft);
  color: var(--brand-green);
}

.navlinks a.active {
  background: var(--brand-green);
  color: #ffffff;
}

.hamburger {
  display: none;
  font-size: 22px;
  color: var(--text-main);
  cursor: pointer;
  z-index: 1002;
}

/* Mobile-specific styles (max-width: 768px) */
@media screen and (max-width: 768px) {
  .navlinks {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    width: 70%;
    max-width: 400px;
    height: 100%;
    background: #ffffff;
    color: var(--text-main);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    flex-direction: column;
    gap: 0;
    border-radius: 12px 12px 0 0;
    transition: transform 0.3s ease, opacity 0.25s ease;
    opacity: 0;
    z-index: 1001;
    padding-top: 20px;
  }

  .navlinks.active {
    display: flex;
    opacity: 1;
    transform: translateX(0);
  }

  .navlinks a {
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    background: 0 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    transition: background .25s ease, color .3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s ease forwards;
    animation-delay: calc(0.1s * var(--i));
  }

  .navlinks a:nth-child(1) { --i: 1; }
  .navlinks a:nth-child(2) { --i: 2; }
  .navlinks a:nth-child(3) { --i: 3; }

  .navlinks a:last-child {
    border-bottom: none;
  }

  .navlinks a:hover {
    background: var(--brand-green-soft);
    color: var(--brand-green);
  }

  .navlinks a.active {
    background: var(--brand-green);
    color: #fff;
  }

  .hamburger {
    display: block;
    font-size: 28px;
    color: var(--text-main);
    cursor: pointer;
    z-index: 1002;
  }
}

/* Keyframe for fade and slide-in effect */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===============================
   HERO
================================ */

.hero-alt {
  background: #ffffff;
  padding: 15px 10px 20px; /* Reduced padding to prevent excess space */
  margin-top: -20px;
  box-sizing: border-box; /* Ensure padding doesn't cause overflow */
  width: 100%; /* Ensure the section is contained within the screen */
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.hero-inner {
  width: 100%;
  max-width: 1200px; /* Max width for larger screens */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px; /* Reduced gap for mobile */
  padding: 0 15px; /* Padding to prevent overflow */
  box-sizing: border-box;
}

.hero-copy h1 {
  font-size: clamp(24px, 6vw, 34px); /* Adjusted heading size */
  line-height: 1.2;
  margin-bottom: 15px;
  word-wrap: break-word; /* Prevent long words from overflowing */
  text-align: center; /* Center the heading */
}

.hero-copy p {
  font-size: 16px; /* Adjusted paragraph font */
  color: var(--text-muted);
  max-width: 100%; /* Ensure text doesn’t overflow */
  margin-bottom: 20px;
  text-align: center; /* Center text for mobile */
}

.hero-points {
  list-style-type: none;
  padding-left: 0;
}

.hero-points li {
  font-size: 16px;
  margin-bottom: 10px;
}

.hero-disclaimer {
  font-size: 12px;
  color: var(--text-muted);
}

/* ===============================
   QUOTE CARD
================================ */

.quote-card {
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 15px; /* Reduced padding for mobile */
  width: 100%; /* Ensure quote card fills the container */
  box-sizing: border-box; /* Ensure padding is included in width calculation */
  margin-bottom: 20px;
}

.quote-card label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 14px;
}

.plate {
  display: flex;
  align-items: center;
  border: 2px solid #111;
  height: 50px;
  margin-bottom: 20px;
  box-sizing: border-box; /* Ensure padding and border don't cause overflow */
}

.plate-prefix {
  width: 50px;
  background: #1f2937;
  color: #ffffff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plate input {
  flex: 1;
  border: none;
  outline: none;
  height: 100%;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cta-white {
  background: var(--brand-green);
  color: #ffffff;
  border: 2px solid var(--brand-green);
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  border-radius: 4px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.cta-white:hover {
  background: transparent;
  color: var(--brand-green);
  border-color: var(--brand-green);
}

.cta-white:active {
  transform: translateY(1px);
}

/* ===============================
   RESPONSIVE FIX (Mobile for iPhone)
================================ */

@media (max-width: 768px) {
  /* Ensuring the content doesn't overflow */
  .hero-alt,
  .hero-inner,
  .quote-card {
    width: 100%;  /* Ensure no overflow happens */
    padding: 0 10px; /* Reduced padding for mobile */
    box-sizing: border-box;
  }

  .hero-inner {
    grid-template-columns: 1fr; /* Stack columns on iPhone */
    gap: 10px; /* Adjust gap for smaller screens */
  }

  .hero-copy h1 {
    font-size: clamp(24px, 6vw, 30px); /* Adjust heading for iPhone screens */
    text-align: center; /* Center the heading */
  }

  .hero-copy p {
    font-size: 14px; /* Adjust paragraph text for mobile */
    text-align: center; /* Center paragraph text */
  }

  .quote-card {
    padding: 12px; /* Adjust padding for iPhone */
    width: 100%; /* Ensure quote card takes up full width */
  }

  .plate input {
    font-size: 16px; /* Smaller input font */
    text-align: left; /* Align text left for input */
  }

  .cta-white {
    font-size: 14px; /* Adjust button font size */
    padding: 12px 18px; /* Adjust button padding for mobile */
  }

  .hero-alt {
    padding-top: 30px; /* Adjusted padding for mobile */
  }

  body {
  overflow-x: hidden; /* Prevent horizontal scrolling */
  height: 100%; /* Ensure the body takes up the full height for vertical scrolling */
}

  /* Fix container and content overflow */
  body, html {
    width: 100%;
    box-sizing: border-box;
  }

  /* Ensure all content stays within the viewport on iPhone */
  .hero-copy, .quote-card {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ===============================
   Additional Fix for iPhone (Smaller Devices)
================================ */

@media (max-width: 480px) {
  .hero-copy h1 {
    font-size: clamp(22px, 6vw, 26px); /* Adjust heading for very small screens */
  }

  .cta-white {
    padding: 10px 18px; /* Adjust button padding for smaller screens */
    font-size: 12px; /* Smaller button font */
  }
}

/* ===============================
   TRUST BAR
================================ */

.trust {
  max-width: 1200px;
  margin: 30px auto 60px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* ===============================
   CARDS
================================ */

.cards {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.card {
  background: #ffffff;
  border: 1px solid var(--border);
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card .body {
  padding: 18px;
}

.card h3 {
  margin: 0 0 8px;
}

.card p {
  margin: 0;
  color: var(--text-muted);
}

/* ===============================
   SPLIT SECTION (MATCH QUOTE CARD)
================================ */

.split {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.textblock {
  background: #ffffff;
  border: 1px solid var(--border);
  padding: 32px;
}

.textblock h2,
.textblock h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.textblock p,
.textblock li {
  color: var(--text-muted);
}

.textblock ol {
  padding-left: 18px;
}

/* ===============================
   PARTNER ROW
================================ */

.partner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.partner-row img,
.partner-row .sticker {
  height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ===============================
   RESPONSIVE FIX
================================ */

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
  }

  .navlinks {
    display: none;
  }

  .hamburger {
    display: block;
    font-size: 24px;
    cursor: pointer;
  }

  .hero-alt {
    padding-top: 70px;
  }
}


.centerbox {
	max-width: 600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 28px 24px;
	background: var(--panel);
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, .04);
	box-sizing: border-box
}

@media (max-width:768px) {
	.centerbox {
		margin: 32px 16px;
		padding: 20px 16px
	}
}

.centerbox h2 {
	margin-top: 36px;
	margin-bottom: 10px;
	font-size: 1.4rem;
	line-height: 1.3
}

.centerbox h2:first-of-type {
	margin-top: 0
}

.centerbox p {
	margin: 0 0 14px;
	color: #00b67a;
	max-width: 70ch
  }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 28px;
  padding: 10px; /* Optional: padding to create space inside the grid */
}

.feature {
  background: rgba(255, 255, 255, .02);
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid black; /* Add black border around each feature */
}

/* ===============================
   FAQ
================================ */

.faq {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
}

details {
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 12px;
}

details summary {
  cursor: pointer;
  font-weight: 700;
}

.footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px 24px;
  padding: 24px 20px;
  background: #346b45;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}

.footer span {
  white-space: nowrap;
}

.footer strong {
  font-weight: 600;
  color: #ffffff;
}

.footer-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.footer-link:hover {
  text-decoration: underline;
}

.social-links {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.social-icon {
  color: #fff;
  font-size: 24px;
  transition: transform .3s ease;
}

.social-icon:first-child {
  color: #1da1f2;
}

.social-icon:nth-child(2) {
  color: #3b5998;
}

.social-icon:nth-child(3) {
  color: #e4405f;
}

.social-icon:active {
  transform: scale(.95);
}

@media (max-width: 768px) {
  .footer span {
    white-space: normal;
  }

  .social-links {
    gap: 12px;
  }
}

body,
html {
  overscroll-behavior: none;
}

@media (max-width: 768px) {
  .hero-img {
    transform: none !important;
  }
}

/* ===============================
   ACCESSIBILITY
================================ */

a:focus,
button:focus,
input:focus {
  outline: 3px solid var(--brand-green-soft);
  outline-offset: 2px;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .navlinks {
    display: none;
  }

  .hamburger {
    display: block;
    font-size: 24px;
    cursor: pointer;
  }

  .hero-alt {
    padding-top: 70px;
  }
}

/* ===============================
   ERROR POPUP STYLES
================================ */
/* Popup styles */
#errorPopup {
  display: none; /* Initially hide the popup */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #fff, #f1f1f1); /* Soft background */
  width: 340px;
  padding: 30px;
  border: 1px solid #111;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
  z-index: 9999;
  text-align: center;
  animation: fadeIn .4s ease-in-out;
}

#errorPopup .popup-content {
  color: var(--text-main); /* Matches your site's text color */
  font-family: Inter, system-ui, -apple-system, sans-serif; /* Matches your base font */
}

#errorPopup .error-message {
  font-size: 15px;
  font-weight: 600;
  color: #e11d48; /* Error-specific red color */
  margin-bottom: 15px;
  line-height: 1.4;
}

#errorPopup .close-btn {
  background-color: var(--brand-green); /* Brand green for the close button */
  color: #fff; /* White text for readability */
  border: 1px;
  padding: 15px 25px;
  width: 100%;
  cursor: pointer;
  font-size: 16px; /* Slightly smaller font size */
  border-radius: 8px;
  transition: transform .3s ease;
  margin-top: 20px;
}

#errorPopup .close-btn:hover {
  background-color: var(--brand-green); /* Keep the button the same color on hover */
  transform: scale(1.05);
}

#errorPopup .close-btn:active {
  transform: scale(.98);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ===============================
   SUPER SECTION (Main Content Box)
================================ */
.super {
  max-width: 1200px; /* Set a maximum width for the content */
  margin: 24px auto; /* Center the content with top margin and auto left-right margin */
  padding: 20px; /* Add some padding inside the box */
  background-color: var(--white); /* Set background color to white */
  display: flex;
  flex-wrap: wrap; /* Allows the content to wrap nicely */
  justify-content: space-between;
  gap: 20px; /* Space between elements */
  position: relative; /* Ensure overlay works correctly */
}

/* ===============================
   LEFT SIDE CONTENT (About Us Text)
================================ */
.super .left {
  flex: 1;
  max-width: 48%; /* Limit the width of the left text section */
}

.super .left h2 {
  font-size: 2rem;
  margin-bottom: 16px;
  color: var(--text-main); /* Set text color */
}

.super .left p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted); /* Muted text for readability */
}

/* ===============================
   RIGHT SIDE CONTENT (Image)
================================ */
.super .right {
  flex: 1;
  max-width: 48%; /* Limit the width of the image section */
  border-radius: 12px;
  overflow: hidden; /* Ensure the image doesn't overflow */
}

.super .right img {
  width: 100%;
  height: auto; /* Ensure the image scales properly */
  border-radius: 12px; /* Optional: rounded corners for the image */
}

/* ===============================
   OVERLAY EFFECT (Dark Background Behind)
================================ */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* Send the overlay behind the content */
}

/* ===============================
   RESPONSIVE STYLES FOR MAIN CONTENT
================================ */
@media (max-width: 768px) {
  .super {
    flex-direction: column;
    align-items: center;
  }

  .left,
  .right {
    width: 100%;
    padding: 0;
    text-align: center;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .centerbox {
    padding: 20px;
  }

  .super .left,
  .super .right {
    max-width: 100%; /* Ensure the sections take full width */
  }

  .super h2 {
    font-size: 1.8rem; /* Adjust font size for smaller screens */
  }
}

.faq {
  text-align: center;
  margin-top: 50px;
}

.faq h3 {
  font-size: 22px;
  color: var(--text-main);
}

.faq p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ===============================
   RESPONSIVE STYLES FOR MAIN CONTENT
================================ */
@media (max-width: 768px) {
  .super {
    flex-direction: column;
    align-items: center;
  }

  .left,
  .right {
    width: 100%;
    padding: 0;
    text-align: center;
  }
}


input[type=date],
input[type=time] {
	width: 100%;
	height: 40px;
	padding: 10px;
	font-size: 16px;
	border-radius: 8px;
	box-sizing: border-box
}

input[type=date],
input[type=time] {
	-webkit-appearance: none;
	appearance: none
}

@media screen and (max-width:768px) {

	input[type=date],
	input[type=time] {
		height: 40px;
		font-size: 16px
	}
}

body,
html {
	overscroll-behavior: none
}

.specialist {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: relative;
	z-index: 2;
}

.specialist-inner {
	max-width: 1180px;
	margin: 0 auto;
}

.specialist h2 {
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 700;
	color: #000; /* Black text */
	margin-bottom: 14px;
	letter-spacing: -.5px;
}

.specialist-intro {
	max-width: 820px;
	font-size: 16.5px;
	line-height: 1.7;
	color: #302f2f; /* Darker text color */
	margin-bottom: 42px;
}

.offence-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}

.offence-card {
	background: rgba(255, 255, 255, .04);
	border-radius: 18px;
	padding: 26px 24px;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, .2); /* Black border */
	transition: transform .35s ease, box-shadow .35s ease, border .35s ease;
}

.offence-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
	border: 1px solid rgba(0, 128, 0, .5); /* Green border on hover */
}

.offence-card h3 {
	font-size: 17.5px;
	font-weight: 600;
	color: #000; /* Black text */
	margin-bottom: 10px;
}

.offence-card p {
	font-size: 15px;
	line-height: 1.65;
	color: #444; /* Darker text color */
}

.offence-card strong {
	color: #00b67a; /* Green for important text */
	font-weight: 600;
}

.specialist-footnote {
	max-width: 900px;
	margin-top: 38px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #8f9bad;
	border-left: 3px solid #00b67a; /* Green border */
	padding-left: 16px;
}.review-rotator {
	max-width: 1100px;
	margin: 70px auto;
	padding: 0 20px;
	text-align: center;
}
.review-rotator {
	max-width: 1100px;
	margin: 70px auto;
	padding: 0 20px;
	text-align: center;
}

.review-rotator h3 {
	margin-bottom: 12px;
	font-size: 24px;
	font-weight: 600;
	color: #333; /* Slightly darker for a clean look */
}

.trust-counter {
	font-size: 18px;
	font-weight: 700;
	color: #333; /* Darker text for better readability */
	margin-bottom: 28px;
}

.trust-counter span {
	color: #4caf50; /* Green for trust-related info */
}

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

.review-card {
	background: rgba(255, 255, 255, .04);
	border-radius: 16px;
	padding: 18px;
	text-align: left;
	border: 1px solid #000; /* Solid black border for a clean look */
	box-shadow: 0 2px 5px rgba(0, 0, 0, .1); /* Subtle shadow for depth */
	transition: transform .3s ease, box-shadow .3s ease;
}

.review-card:hover {
	transform: translateY(-5px); /* Slight lift on hover */
	box-shadow: 0 5px 15px rgba(0, 0, 0, .2); /* Subtle hover shadow */
}

.review-card strong {
	display: block;
	font-size: 15px;
	color: #1c1e21; /* Darker color for stronger emphasis */
}

.review-meta {
	font-size: 13px;
	color: #9aa6b2;
}

.review-stars {
	margin-top: 6px;
}

.star {
	display: inline-block;
	font-size: 16px;
	color: #fc0;
	opacity: 1; /* Fully visible stars */
	transform: scale(1); /* Normal scale */
	animation: starPop .4s ease forwards;
}

.review-card p {
	margin-top: 10px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #d5deea; /* Soft text color for readability */
}

@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(8px)
	}

	to {
		opacity: 1;
		transform: translateY(0)
	}
}

@keyframes starPop {
	to {
		opacity: 1;
		transform: scale(1)
	}
}

@media (max-width:768px) {
	.review-grid {
		grid-template-columns: 1fr
	}
}

@media (max-width:768px) {
	.specialist {
		padding: 48px 18px
	}

	.specialist h2 {
		font-size: 26px
	}

	.specialist-intro {
		font-size: 15.5px
	}

	.offence-card {
		padding: 22px 20px
	}
}

@media (min-width:769px) {

	.specialist,
	[data-reveal],
	section.specialist {
		opacity: 1 !important;
		transform: none !important;
		visibility: visible !important
	}
}