/* =============================================
   TBMS LIVE — COMPLETE RESPONSIVE CSS v7
   ============================================= */

/* ---- Reset & Base ---- */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   color: #333;
   line-height: 1.65;
   overflow-x: hidden;
   font-size: 15px;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   text-decoration: none;
}

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

p {
   margin-bottom: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   line-height: 1.3;
}

/* =============================================
   GLOBAL PADDING — X-AXIS THROUGHOUT SITE
   ============================================= */
.container {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px !important;
   padding-right: 20px !important;
}

@media (min-width: 576px) {
   .container {
      max-width: 540px;
      padding-left: 24px !important;
      padding-right: 24px !important;
   }
}

@media (min-width: 768px) {
   .container {
      max-width: 720px;
      padding-left: 30px !important;
      padding-right: 30px !important;
   }
}

@media (min-width: 992px) {
   .container {
      max-width: 960px;
      padding-left: 36px !important;
      padding-right: 36px !important;
   }
}

@media (min-width: 1200px) {
   .container {
      max-width: 1140px;
      padding-left: 40px !important;
      padding-right: 40px !important;
   }
}

@media (min-width: 1400px) {
   .container {
      max-width: 1320px;
      padding-left: 48px !important;
      padding-right: 48px !important;
   }
}

/* =============================================
   UTILITIES
   ============================================= */
.color-bg {
   background: #f1f7ff;
}

.section-pad {
   padding: 64px 0;
}

.btn:focus,
.btn:active {
   box-shadow: none !important;
   outline: none;
}

.shadow {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07) !important;
}

.shadow-lg {
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.10) !important;
}

/* Button helpers */
.btn-gold {
   background: #E5BC00;
   color: #000 !important;
   border-radius: 25px;
   font-weight: 600;
   border: none;
   padding: 10px 28px;
   transition: background 0.2s;
}

.btn-gold:hover {
   background: #d4ab00;
   color: #000 !important;
}

.btn-dark-outline {
   border: 2px solid #272e48;
   color: #272e48;
   border-radius: 25px;
   font-weight: 600;
   background: transparent;
   padding: 10px 28px;
   transition: all 0.2s;
}

.btn-dark-outline:hover {
   background: #272e48;
   color: #fff !important;
}

/* Page hero */
.page-hero {
   padding: 64px 0 56px;
   background: linear-gradient(135deg, #272e48 0%, #000 100%);
}

.page-hero h1 {
   font-size: clamp(1.6rem, 4vw, 2.6rem);
   font-weight: 700;
   color: #fff;
}

.page-hero p {
   color: rgba(255, 255, 255, 0.85);
   font-size: 1rem;
   margin-bottom: 0;
}

@media (max-width: 767px) {
   .section-pad {
      padding: 44px 0;
   }

   .page-hero {
      padding: 44px 0 38px;
   }
}

/* =============================================
   IMAGES — RESPONSIVE SIZING THROUGHOUT SITE
   ============================================= */
/* All images are naturally responsive */
img {
   max-width: 100%;
   height: auto;
}

/* Hero main image */
.hero-main-img {
   width: 100%;
   max-height: 420px;
   object-fit: contain;
   border-radius: 12px;
}

@media (max-width: 767px) {
   .hero-main-img {
      max-height: 260px;
      margin-top: 24px;
   }
}

/* Section feature images */
.feature-img {
   width: 100%;
   max-height: 380px;
   object-fit: contain;
   border-radius: 12px;
   padding: 12px;
}

@media (max-width: 991px) {
   .feature-img {
      max-height: 300px;
      padding: 8px;
   }
}

@media (max-width: 767px) {
   .feature-img {
      max-height: 240px;
      padding: 4px;
      margin-top: 16px;
   }
}

/* App screenshot images */
.app-img {
   width: 100%;
   max-height: 300px;
   object-fit: contain;
}

@media (max-width: 767px) {
   .app-img {
      max-height: 220px;
   }
}

/* Operator app (has border) */
.operator-img {
   max-height: 300px;
   object-fit: contain;
   border: 4px solid #000;
   border-radius: 22px;
   display: block;
   margin: 0 auto;
}

@media (max-width: 767px) {
   .operator-img {
      max-height: 220px;
   }
}

/* Blog card images */
.blog-card-img {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

@media (max-width: 575px) {
   .blog-card-img {
      height: 180px;
   }
}

/* Logo images */
.footer-logo-img {
   max-width: 150px;
   height: auto;
}

.navbar-logo-img {
   height: 48px;
   width: auto;
}

@media (max-width: 767px) {
   .navbar-logo-img {
      height: 40px;
   }
}

/* Ticker partner logos */
.ticker-logo {
   max-width: 160px;
   max-height: 56px;
   object-fit: contain;
}

/* App store buttons */
.store-btn {
   height: 42px;
   width: auto;
}

@media (max-width: 575px) {
   .store-btn {
      height: 36px;
   }
}

/* =============================================
   TICKER
   ============================================= */
.logo-ticker-area {
   background: #fff;
   overflow: hidden;
   border-bottom: 1px solid #eee;
   padding: 8px 0;
}

.logo-slider-wrapper {
   overflow: hidden;
   width: 100%;
}

.logo-slide-track {
   display: flex;
   width: max-content;
   animation: ticker-scroll 32s linear infinite;
}

.slide-item {
   width: 200px;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 16px;
}

.logo-slider-wrapper:hover .logo-slide-track {
   animation-play-state: paused;
}

@keyframes ticker-scroll {
   0% {
      transform: translateX(0);
   }

   100% {
      transform: translateX(-50%);
   }
}

/* =============================================
   TOP HEADER BAR
   ============================================= */
.top-header {
   background: #272e48;
   padding: 8px 0;
}

ul.center-side {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 4px 16px;
   padding: 0;
   margin: 0;
}

ul.left-side {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
   padding: 0;
   margin: 0;
}

ul.center-side li a {
   color: #ccc;
   font-size: 12.5px;
   display: flex;
   align-items: center;
   gap: 5px;
   transition: color 0.2s;
}

ul.center-side li a:hover {
   color: #E5BC00;
}

ul.left-side li a {
   width: 30px;
   height: 30px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 13px;
   color: #ccc;
   transition: background 0.2s, color 0.2s;
}

ul.left-side li a:hover {
   background: #E5BC00;
   color: #000 !important;
}

/* =============================================
   NAVBAR
   ============================================= */
#logo-area {
   background: #fff;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
   position: sticky;
   top: 0;
   z-index: 1030;
}

.navbar {
   padding: 8px 0;
}

.navbar-nav .nav-link {
   font-size: 13.5px;
   font-weight: 500;
   color: #333 !important;
   padding: 8px 10px !important;
   transition: color 0.2s;
   white-space: nowrap;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
   color: #E5BC00 !important;
}

.dropdown-menu {
   border: none;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
   border-radius: 10px;
   min-width: 220px;
}

.dropdown-menu .dropdown-item {
   font-size: 13.5px;
   padding: 9px 18px;
   color: #333;
   transition: background 0.2s;
}

.dropdown-menu .dropdown-item:hover {
   background: #E5BC00;
   color: #000;
   border-radius: 6px;
}

@media (min-width: 992px) {
   .navbar-nav .dropdown:hover .dropdown-menu {
      display: block;
   }
}

@media (max-width: 991px) {
   .navbar-collapse {
      border-top: 3px solid #E5BC00;
      padding: 12px 0 18px;
      background: #fff;
   }

   .navbar-nav .nav-link {
      border-bottom: 1px solid #f5f5f5;
      padding: 11px 4px !important;
   }

   .navbar-nav .nav-link.btn-gold {
      margin: 12px 0 0 !important;
      width: 100%;
      text-align: center;
      border-radius: 10px !important;
      padding: 12px !important;
      display: block;
   }

   .top-header,
   .logo-ticker-area {
      display: none;
   }
}

/* =============================================
   HERO SECTION
   ============================================= */
section#slider-area {
   background: url('../images/bg-1.webp') center/cover no-repeat;
   min-height: 520px;
   display: flex;
   align-items: center;
   padding: 60px 0;
}

section#slider-area h1 {
   font-size: clamp(1.5rem, 3.5vw, 2.4rem);
   line-height: 1.2;
}

section#slider-area li {
   font-size: 14.5px;
   margin-bottom: 8px;
   display: flex;
   align-items: flex-start;
   gap: 8px;
}

section#slider-area .fa-check-circle {
   color: #E5BC00;
   margin-top: 2px;
   flex-shrink: 0;
}

@media (max-width: 767px) {
   section#slider-area {
      min-height: auto;
      padding: 40px 0;
   }

   section#slider-area .top-content {
      text-align: center;
   }
}

/* =============================================
   WHO IS TBMS
   Append this at the bottom of style.css
   ============================================= */

.who-is-tbms-section {
   background: #f1f7ff;
}

.who-tbms-label {
   font-size: 1.6rem;
   font-weight: 300;
   letter-spacing: 1px;
   color: #1a1a1a;
   text-transform: uppercase;
}

@media (max-width: 991px) {
   .who-tbms-label {
      font-size: 1.3rem;
   }
}

@media (max-width: 767px) {
   .who-is-tbms-section .col-lg-7 {
      margin-top: 8px;
   }
}

/* =============================================
   TAXI BOOKING SOFTWARE FOR UK
   Append this at the bottom of style.css
   ============================================= */

.tbs-uk-section {
   background: #f4f5f7;
}

.tbs-top-icon {
   width: 90px;
   height: 90px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.tbs-top-icon svg {
   width: 72px;
   height: 72px;
}

.tbs-bottom-card {
   border: 1px solid #e9ebef;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
   transition: transform 0.25s, box-shadow 0.25s;
}

.tbs-bottom-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
}

.tbs-learn-more {
   display: inline-block;
   color: #1d6fd8;
   font-weight: 600;
   font-size: 0.88rem;
   text-decoration: none;
   border-bottom: 1px solid transparent;
   transition: border-color 0.2s;
}

.tbs-learn-more:hover {
   border-color: #1d6fd8;
}

@media (max-width: 767px) {
   .tbs-top-icon {
      width: 72px;
      height: 72px;
   }

   .tbs-top-icon svg {
      width: 56px;
      height: 56px;
   }

   .tbs-bottom-card {
      padding: 24px !important;
   }
}

/* =============================================
   FEATURE TABS (APPS PAGE / HOME PAGE)
   ============================================= */
.tabsection {
   background: #f8f8f8;
   overflow: hidden;
}

.tabs {
   background: #272e48;
   display: flex;
   justify-content: center;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scroll-snap-type: x mandatory;
}

.tabs::-webkit-scrollbar {
   height: 3px;
}

.tabs::-webkit-scrollbar-thumb {
   background: #E5BC00;
}

.tab {
   padding: 15px 22px;
   cursor: pointer;
   color: #aaa;
   font-size: 13.5px;
   font-weight: 500;
   white-space: nowrap;
   border-bottom: 3px solid transparent;
   transition: all 0.25s;
   scroll-snap-align: start;
}

.tab.active,
.tab:hover {
   color: #fff;
   border-bottom-color: #E5BC00;
   background: rgba(255, 255, 255, 0.05);
}

.slide {
   display: none;
   padding: 48px 0;
}

/* =============================================
   FEATURE/BENEFIT CARDS
   ============================================= */
.card-fea {
   border-radius: 14px;
   background: #fff;
   transition: transform 0.25s, box-shadow 0.25s;
   height: 100%;
}

.card-fea:hover {
   transform: translateY(-5px);
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10) !important;
}

/* =============================================
   TAGLINE POINTS SECTION
   ============================================= */

/* =============================================
   TESTIMONIALS
   ============================================= */

/* =============================================
   ACCORDION / FAQ
   ============================================= */
.faq-main .accordion-item {
   margin-bottom: 10px;
   border: 1px solid #e5e5e5;
   border-radius: 10px;
   overflow: hidden;
}

.accordion-item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
   cursor: pointer;
   background: #fff;
   font-weight: 500;
   font-size: 0.95rem;
   transition: background 0.2s;
   gap: 12px;
}

.accordion-item-header:hover {
   background: #fafafa;
}

.accordion-item-header.active {
   background: #E5BC00;
   color: #000;
}

.accordion-icon {
   font-size: 1.4rem;
   font-weight: 700;
   color: #E5BC00;
   transition: transform 0.3s;
   flex-shrink: 0;
}

.accordion-item-header.active .accordion-icon {
   transform: rotate(45deg);
   color: #000;
}

.accordion-item-body {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.35s ease;
}

.accordion-item-body-content {
   padding: 16px 20px;
   background: #fafafa;
   font-size: 0.9rem;
   color: #555;
   line-height: 1.75;
}

/* =============================================
   PRICING CARDS
   ============================================= */
.pricing-card {
   border-radius: 18px;
   transition: transform 0.25s;
}

.pricing-card:hover {
   transform: translateY(-6px);
}

/* =============================================
   BLOG
   ============================================= */
.blog-card {
   transition: transform 0.2s, box-shadow 0.2s;
}

.blog-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important;
}

.blog-card .card-img-top {
   overflow: hidden;
}

.blog-card .card-img-top img,
.blog-card>img {
   transition: transform 0.3s;
}

.blog-card:hover img {
   transform: scale(1.04);
}

/* Blog pagination */
.blog-page-btn {
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 8px !important;
   border: 2px solid #e0e0e0;
   color: #333;
   font-weight: 600;
   font-size: 0.9rem;
   transition: all 0.2s;
   background: #fff;
}

.blog-page-btn:hover {
   background: #E5BC00;
   border-color: #E5BC00;
   color: #000;
}

.page-item.active .blog-page-btn {
   background: #E5BC00;
   border-color: #E5BC00;
   color: #000;
}

.page-item.disabled .blog-page-btn {
   background: #f5f5f5;
   border-color: #e0e0e0;
   color: #bbb;
   pointer-events: none;
}

/* Blog post feature image — full viewport width, reduced height */
.blog-feature-img {
   display: block;
   width: 100vw;
   max-width: 100vw;
   height: clamp(140px, 18vw, 280px);
   object-fit: cover;
   margin-left: calc(50% - 50vw);
   margin-right: calc(50% - 50vw);
}

/* Blog post content */
.blog-content h2 {
   font-size: 1.4rem;
   font-weight: 700;
   margin: 2rem 0 0.75rem;
   border-left: 4px solid #E5BC00;
   padding-left: 12px;
}

.blog-content h3 {
   font-size: 1.15rem;
   font-weight: 600;
   margin: 1.5rem 0 0.5rem;
   color: #272e48;
}

.blog-content p {
   color: #444;
   line-height: 1.8;
   margin-bottom: 1rem;
}

.blog-content ul {
   padding-left: 1.2rem;
   margin-bottom: 1rem;
}

.blog-content ul li {
   margin-bottom: 0.5rem;
   color: #444;
   line-height: 1.7;
}

.blog-content strong {
   color: #000;
}

/* =============================================
   CONTACT PAGE
   ============================================= */
.contact-box {
   transition: transform 0.2s, box-shadow 0.2s;
}

.contact-box:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10) !important;
}

.contact-icon {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 1.1rem;
}

.contact-label {
   font-size: 0.72rem;
   color: #888;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

/* =============================================
   FOOTER — DARK THEME (matching screenshot)
   ============================================= */
#main-footer-area-start {}

.new-footer-main {
   background: #0d1117;
   padding: 60px 0 40px;
   border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Brand text logo */
.footer-brand-text {
   font-size: 1.5rem;
   font-weight: 800;
   color: #fff;
   letter-spacing: -0.5px;
}

.footer-brand-text span {
   color: #4d9fff;
}

/* Description */
.new-footer-desc {
   color: rgba(255, 255, 255, 0.5);
   font-size: 0.88rem;
   line-height: 1.75;
}

/* Contact list */
.new-footer-contact-list {
   padding: 0;
   margin: 0;
   list-style: none;
}

.new-footer-contact-list li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 12px;
}

.nfc-icon {
   font-size: 0.95rem;
   flex-shrink: 0;
   margin-top: 1px;
}

.new-footer-contact-list li a {
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.87rem;
   line-height: 1.5;
   transition: color 0.2s;
   text-decoration: none;
}

.new-footer-contact-list li a:hover {
   color: #4d9fff;
}

/* Column headings */
.new-footer-heading {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.35);
   margin-bottom: 18px;
}

/* Nav links */
.new-footer-nav {
   padding: 0;
   margin: 0;
   list-style: none;
}

.new-footer-nav li {
   margin-bottom: 11px;
}

.new-footer-nav li a {
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.9rem;
   transition: color 0.2s;
   text-decoration: none;
}

.new-footer-nav li a:hover {
   color: #fff;
}

/* Bottom bar */
.new-footer-bottom {
   background: #080c12;
   padding: 16px 0;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.new-footer-copy {
   color: rgba(255, 255, 255, 0.35);
   font-size: 0.78rem;
   line-height: 1.6;
}

/* Social icons */
.new-footer-social {
   width: 34px;
   height: 34px;
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, 0.6);
   font-size: 0.85rem;
   transition: background 0.2s, color 0.2s;
   text-decoration: none;
}

.new-footer-social:hover {
   background: #4d9fff;
   color: #fff;
}

/* Responsive */
@media (max-width: 767px) {
   .new-footer-main {
      padding: 44px 0 32px;
   }

   .new-footer-copy {
      font-size: 0.72rem;
   }
}

@media (max-width: 575px) {
   .new-footer-bottom .d-flex {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px !important;
   }
}

/* =============================================
   RESPONSIVE GLOBAL HELPERS
   ============================================= */
@media (max-width: 991px) {
   h1 {
      font-size: clamp(1.5rem, 5vw, 2.2rem);
   }

   h2 {
      font-size: clamp(1.3rem, 4vw, 1.8rem);
   }

   h3 {
      font-size: clamp(1.1rem, 3vw, 1.4rem);
   }
}

@media (max-width: 767px) {
   .display-4 {
      font-size: 2rem !important;
   }

   .py-5 {
      padding-top: 2.5rem !important;
      padding-bottom: 2.5rem !important;
   }

   /* Stack rows on mobile */
   .row.align-items-center>[class*="col-"] {
      margin-bottom: 0;
   }

   /* Full-width buttons on mobile */
   .btn-mobile-full {
      width: 100% !important;
      margin-bottom: 8px;
   }
}

@media (max-width: 480px) {
   .blog-page-btn {
      width: 36px;
      height: 36px;
      font-size: 0.8rem;
   }

   .tab {
      padding: 12px 14px;
      font-size: 12.5px;
   }

   .store-btn {
      height: 32px;
   }
}

/* =============================================
   NEW SECTIONS — ADDED STYLES
   ============================================= */

/* ---- Section 1: Complete Taxi Business Management ---- */
.tbms-intro-box {
   background: #f0f4ff;
   border-left: 4px solid #1d4ed8;
}

.tbms-badge-bar {
   background: #fef3c7;
   border: 1px solid #fde68a;
   border-radius: 10px;
}

.transport-card {
   border: 1px solid #e5e7eb !important;
   transition: box-shadow 0.2s, transform 0.2s;
   cursor: default;
}

.transport-card:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
}

.platform-box {
   background: #eff6ff;
   border: 1px solid #bfdbfe;
   border-radius: 12px;
}

/* ---- Section 2: How It Works ---- */
.how-it-works-section {
   background: #0f172a;
}

.hiw-badge {
   background: rgba(255, 255, 255, 0.1);
   color: #e2e8f0;
   border: 1px solid rgba(255, 255, 255, 0.2);
   padding: 6px 18px;
   border-radius: 20px;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.hiw-card {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   transition: background 0.25s, transform 0.25s;
}

.hiw-card:hover {
   background: rgba(255, 255, 255, 0.09);
   transform: translateY(-4px);
}

.hiw-number {
   font-size: 2.2rem;
   font-weight: 800;
   color: white;
   line-height: 1;
   letter-spacing: -1px;
}

.hiw-icon {
   font-size: 2rem;
}

/* =============================================
   APP & TOOLS FEATURE GRID
   Append this at the bottom of style.css
   ============================================= */

.app-tools-section {
   background: #f1f7ff;
}

.at-card {
   background: #fff;
   border: 1px solid #eef0f3;
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
   transition: transform 0.25s, box-shadow 0.25s;
}

.at-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.at-icon {
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.at-icon svg {
   width: 48px;
   height: 48px;
}

.at-learn-more {
   display: inline-block;
   color: #E5BC00;
   font-weight: 600;
   font-size: 0.88rem;
   text-decoration: none;
   border-bottom: 1px solid transparent;
   transition: border-color 0.2s;
}

.at-learn-more:hover {
   border-color: #E5BC00;
}

@media (max-width: 767px) {
   .at-card {
      padding: 24px !important;
   }

   .at-icon {
      width: 56px;
      height: 56px;
   }

   .at-icon svg {
      width: 40px;
      height: 40px;
   }
}

@media (max-width: 575px) {
   .at-card h6 {
      font-size: 0.95rem;
   }
}

/* =============================================
   WHY TBMS LIVE — CHECKLIST + CTA BANNER
   Append this at the bottom of style.css
   ============================================= */

.why-tbms-section {
   background: #f4f5f7;
}

.why-tbms-check {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   flex-shrink: 0;
   color: #E5BC00;
   font-size: 1.2rem;
   font-weight: 700;
   margin-top: 2px;
}

.why-tbms-item p {
   font-size: 0.95rem;
   color: #333;
   line-height: 1.6;
}

.why-tbms-item p strong {
   color: #000;
}

.why-tbms-cta-banner {
   background: #E5BC4F;
}

.why-tbms-demo-btn {
   display: inline-block;
   background: #1a1a1a;
   color: #fff;
   font-weight: 700;
   font-size: 0.82rem;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   text-decoration: none;
   padding: 16px 36px;
   border-radius: 10px;
   transition: background 0.2s, transform 0.2s;
}

.why-tbms-demo-btn:hover {
   background: #000;
   color: #fff;
   transform: translateY(-2px);
}

@media (max-width: 767px) {
   .why-tbms-cta-banner {
      padding: 28px !important;
      text-align: center;
   }

   .why-tbms-cta-banner .col-md-4 {
      text-align: center !important;
      margin-top: 16px;
   }

   .why-tbms-demo-btn {
      width: 100%;
   }

   .why-tbms-item {
      margin-bottom: 20px !important;
   }
}

/* ---- Section 4: GDPR & Integrations ---- */
.compliance-badge {
   background: #dcfce7;
   color: #166534;
   border: 1px solid #bbf7d0;
   padding: 6px 18px;
   border-radius: 20px;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.council-tag {
   display: inline-block;
   background: #f3f4f6;
   border: 1px solid #e5e7eb;
   color: #374151;
   padding: 4px 14px;
   border-radius: 20px;
   font-size: 0.82rem;
   font-weight: 500;
}

.integrations-box {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 16px;
}

.integ-item {
   border: 1px solid #e5e7eb;
   transition: box-shadow 0.2s;
}

.integ-item:hover {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.integ-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   display: inline-block;
   flex-shrink: 0;
}

.integ-info-box {
   background: #eff6ff;
   border: 1px solid #bfdbfe;
}

/* ---- Section 5: Trusted by Operators ---- */
.trusted-section {
   background: #0f172a;
}

.review-card {
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   transition: background 0.25s, transform 0.25s;
}

.review-card:hover {
   background: rgba(255, 255, 255, 0.11);
   transform: translateY(-4px);
}

.reviewer-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: #1d4ed8;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 0.88rem;
   flex-shrink: 0;
}

.review-platform-btn {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   transition: background 0.2s;
}

.review-platform-btn:hover {
   background: rgba(255, 255, 255, 0.14);
}

.rp-logo {
   width: 28px;
   height: 28px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 0.72rem;
   flex-shrink: 0;
}

/* ---- Section 6: About TBMS Live ---- */
.about-badge {
   background: #fef3c7;
   color: #92400e;
   border: 1px solid #fde68a;
   padding: 6px 18px;
   border-radius: 20px;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.about-card {
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 16px;
}

.btn-about-outline {
   border: 2px solid #1d4ed8;
   color: #1d4ed8;
   border-radius: 10px;
   font-weight: 600;
   background: transparent;
   transition: all 0.2s;
}

.btn-about-outline:hover {
   background: #1d4ed8;
   color: #fff !important;
}

/* ---- Section 7: Final CTA ---- */
.cta-final-section {
   background: #E5BC4F;
}

.cta-badge {
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.3);
   padding: 6px 18px;
   border-radius: 20px;
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.cta-btn-primary {
   background: #fff;
   color: #1d4ed8 !important;
   border-radius: 10px;
   font-size: 1rem;
   border: none;
   transition: background 0.2s, transform 0.2s;
}

.cta-btn-primary:hover {
   background: #f0f4ff;
   transform: translateY(-2px);
   color: #1d4ed8 !important;
}

.cta-btn-outline {
   background: transparent;
   color: #fff !important;
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 10px;
   font-size: 1rem;
   transition: border-color 0.2s, transform 0.2s;
}

.cta-btn-outline:hover {
   border-color: #fff;
   transform: translateY(-2px);
   color: #fff !important;
}

.cta-contact-link {
   color: rgba(255, 255, 255, 0.85);
   font-size: 0.92rem;
   font-weight: 500;
   transition: color 0.2s;
   text-decoration: none;
}

.cta-contact-link:hover {
   color: #fff;
}

/* ---- Responsive for new sections ---- */
@media (max-width: 767px) {
   .hiw-card {
      padding: 20px !important;
   }

   .hiw-number {
      font-size: 1.6rem;
   }

   .review-card {
      padding: 20px !important;
   }

   .about-card {
      padding: 24px !important;
   }

   .cta-btn-primary,
   .cta-btn-outline {
      width: 100%;
      text-align: center;
   }

   .cta-contact-link {
      font-size: 0.85rem;
   }

   .integrations-box {
      padding: 20px !important;
   }

   .tbms-intro-box {
      padding: 20px !important;
   }
}

@media (max-width: 575px) {
   .transport-card {
      padding: 12px !important;
   }

   .transport-card span:last-child {
      font-size: 0.82rem !important;
   }

   .council-tag {
      font-size: 0.76rem;
      padding: 3px 10px;
   }
}