   html,
   body {
       margin: 0;
       padding: 0;
       /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        */
       font-family: 'Poppins', sans-serif;
   }

   /* Topbar */
   .topbar {
       background-color: #e7e8e9;
       /* Primary blue */
       color: #212529;
       font-size: 0.9rem;
       padding: 6px 0;
   }

   .topbar a {
       color: #212529;
       text-decoration: none;
   }

   .topbar a:hover {
       color: #0d6efd;
   }

   .topbar i {
       margin-right: 4px;
   }

   .logo-text {
       font-weight: bold;
       font-size: 1.5rem;
       background: linear-gradient(90deg, #ff6600, #011c46);
       /* orange to blue */
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-transform: uppercase;
       letter-spacing: 1px;
   }


   /* Navbar */
   .navbar {
       padding: 12px 0;
   }

   .new-white {
       background-color: #fdfdfb !important;
   }

   .navbar-brand {
       font-weight: 700;
       font-size: 1.5rem;
       color: #011C46 !important;
   }

   .navbar-nav .nav-link {
       font-weight: 500;
       margin-left: 15px;
       color: #011C46;
   }

   .navbar-nav .nav-link:hover {
       color: #d92007;
   }

   .btn-quote {
       background-color: #011C46;
       color: #fff;
       font-weight: 600;
       border-radius: 3px;
       padding: 8px 20px;
   }

   .btn-quote:hover {
       background-color: #013891;
       border-color: #013891;
       color: #fff;
       font-weight: 600;
       border-radius: 3px;
       padding: 8px 20px;
   }

   /* Hero */
   .hero {
       position: relative;
       background: url('../images/hero-bg.jpg') center/cover no-repeat;
       color: #fff;
       padding: 140px 0;
   }

   .hero::before {
       content: "";
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.5);
       /* dark overlay */
       backdrop-filter: blur(4px);
       /* blur effect */
   }

   .hero .overlay {
       position: relative;
       z-index: 1;
   }

   .hero h1 {
       font-weight: 700;
       font-size: 3rem;
   }

   .hero p {
       font-size: 1.2rem;
   }

   /* Forms */
   form {
       background: #fff;
       border-radius: 8px;
   }

   form .btn {
       border-radius: 3px;
       font-weight: 600;
   }

   /* Center align service cards */
   .service-card {
       display: flex;
       justify-content: center;

   }

   /* Services */
   .service-card .card {
       border: none;
       transition: transform 0.3s;
       width: 100%;
       /* max-width: 300px;  */
       /* control card width */
       /* box-shadow: 0 4px 12px rgba(40, 40, 40, 0.1); */
   }



   .service-card .card:hover {
       transform: translateY(-5px);
       box-shadow: 0 4px 12px rgba(15, 15, 15, 0.1);
   }

   .service-card img {
       height: 160px;
       object-fit: cover;
   }

   /* Contact */
   .contact-info p {
       margin-bottom: 8px;
       font-size: 0.95rem;
   }

   /* Footer */
   .footer {
       background: #011c46;
       color: #fff;
       padding: 40px 0;
   }

   .footer h5 {
       font-weight: 600;
       margin-bottom: 15px;
   }

   .footer a {
       color: #fff;
       text-decoration: none;
   }

   .footer a:hover {
       text-decoration: underline;
   }

   .footer .social a {
       font-size: 1.2rem;
       margin-right: 10px;
   }


   .card-header {
       font-size: 1.2rem;
       background-color: #011C46;
       color: #fff;
   }

   .bg-primary {
       background-color: #011C46 !important;
   }

   .form-control,
   .form-select {
       border-radius: 6px;
   }

   .btn {
       border-radius: 3px;
   }

   .btn-primary {
       background-color: #011C46;
       border-color: #011C46;
   }

   .btn-primary:hover {
       background-color: #013891;
       border-color: #013891;
   }

   /* Sidebar active state should match primary color */
   .list-group-item-action.active,
   .list-group-item-action:active,
   .list-group-item-action.active:focus {
       background-color: #011C46 !important;
       border-color: #011C46 !important;
       color: #fff !important;

   }

   /* Ensure icons inside active items are visible */
   .list-group-item-action.active i {
       color: #fff;
   }

   /* Improve sidebar list items for better UX */
   .list-group-item-action {
       padding: 12px 16px !important;
       transition: all 0.2s ease-in-out;
       border-left: 4px solid #dd8615;
       /* Primary color for active state */
       cursor: pointer;
   }

   .list-group-item-action:hover {
       /* background-color: #f5f5f5 !important; */
       padding-left: 18px !important;
   }

   .list-group-item-action.active {
       border-left-color: #dd8615 !important;
       font-weight: 500;
   }

   /* Logout link styling */
   .list-group-item-action.text-danger {
       color: #dc3545 !important;
   }

   .list-group-item-action.text-danger:hover {
       background-color: #fff5f7 !important;
   }

   .list-group-item-action.text-danger i {
       color: #dc3545;
   }

   /* Dashboard content minimum height */
   .dashboard-content {
       min-height: 500px;
   }

   .btn-outline-primary {
       color: #011C46;
       border-color: #011C46;
   }

   .btn-outline-primary:hover {
       background-color: #011C46;
       border-color: #011C46;
   }

   h2 {
       font-size: 2rem;
       font-weight: 700;
       position: relative;
       display: inline-block;
   }

   h2.fw-bold.text-primary::after {
       content: "";
       display: block;
       width: 80px;
       height: 3px;
       background: #0d6efd;
       margin: 10px auto 0;
   }

   .text-primary {
       color: #011C46 !important;
   }

   .heading-small {
       font-size: 0.9rem;
       color: #0d6efd;
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .tracking {
       text-align: center;
   }

   .tracking img {
       max-width: 49%;
       height: auto;
   }

   .tracking .tracking-text {
       font-size: 1rem;
       color: #555;
       font-size: 1rem;
       width: 50%;
       text-align: center;
       line-break: break-word;
       margin: 20px auto 0;
   }

   .contact-bg {
       position: relative;
       background: url('../images/tracking-bg.jpg') center/cover no-repeat;
       min-height: 400px;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 60px;
       border-radius: 8px;
       overflow: hidden;
   }

   .contact-bg::before {
       content: "";
       position: absolute;
       inset: 0;
       background-color: rgba(0, 0, 0, 0.5);
       /* dark overlay with less opacity */
       backdrop-filter: blur(4px);
       /* blur effect */
       z-index: 0;
   }

   .contact-bg .overlay-content {
       position: relative;
       z-index: 1;
       /* ensures text stays above overlay */
       text-align: right;
   }

   section {
       scroll-margin-top: 130px !important;
       /* adjust to your header height */
   }

   .hero-section .overlay {
       pointer-events: none;
       /* allow clicks to pass through */
       z-index: 1;
       /* keep overlay behind text */
       background: none;
       /* remove opacity/light background */
   }

   .hero-section .position-relative {
       z-index: 2;
       /* ensure text stays above overlay */
   }


   /* .booking-phone {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 0 0 5px #ffcc00, 0 0 10px #ff9900, 0 0 20px #ff6600;
  animation: flicker 1.5s infinite alternate;
}

@keyframes flicker {
  0%   { opacity: 1; }
  40%  { opacity: 0.8; }
  60%  { opacity: 0.4; }
  80%  { opacity: 0.9; }
  100% { opacity: 1; }
} */
   /* .booking-phone {
  font-size: 2.5rem;
  font-weight: bold;
  background: linear-gradient(90deg, #ffcc00, #ff6600, #ffcc00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
} */

   .booking-phone {
       font-size: 2.5rem;
       font-weight: bold;
       color: #ffcc00;
       animation: bounce 1s infinite;
       text-shadow: 0 0 5px #ffcc00, 0 0 3px #ff9900, 0 0 2px #612700;
   }

   .gst-animate {
       font-weight: bold;
       color: #fdfdfb;
       /* Bootstrap danger red */
       animation: pulse 1.5s infinite;
   }

   .about-img img {
       width: 70%;
   }

   @keyframes pulse {
       0% {
           opacity: 1;
       }

       50% {
           opacity: 0.5;
       }

       100% {
           opacity: 1;
       }
   }

   @keyframes bounce {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-10px);
       }
   }

   .disclaimer {
       color: #ccc;
   }

   .disclaimer:hover {
       color: #fff;
   }

   .disclaimer a {
       color: #ccc;
       text-decoration: underline;
   }

   .disclaimer a:hover {
       color: #fff;
   }

   /* ==========================================================================
      Admin Dashboard & DataTables Core Custom Styles
      ========================================================================== */

   /* DataTables General Overrides */
   .datatable {
       font-size: 0.82rem !important;
   }

   .datatable th,
   .datatable td {
       padding: 0.5rem 0.6rem !important;
   }

   .datatable .btn-sm {
       font-size: 0.72rem !important;
       padding: 0.15rem 0.35rem !important;
   }

   .datatable .badge {
       font-size: 0.72rem !important;
   }

   .datatable code {
       font-size: 0.75rem !important;
   }

   .dataTables_wrapper .dataTables_length select {
       padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
       font-size: 0.82rem !important;
       border-radius: 0.375rem;
   }

   .dataTables_wrapper .dataTables_filter input {
       padding: 0.25rem 0.5rem !important;
       font-size: 0.82rem !important;
       border-radius: 0.375rem;
       border: 1px solid #dee2e6;
   }

   .dataTables_wrapper .dataTables_info {
       font-size: 0.8rem;
       color: #6c757d;
   }

   .dataTables_wrapper .dataTables_paginate .paginate_button {
       margin-left: 2px;
       font-size: 0.8rem !important;
   }

   /* Custom card padding adjustments for tables */
   .card.border-0.shadow-sm {
       padding: 1.25rem;
   }

   /* Statistics Analytics Cards */
   .stat-card {
       transition: transform 0.2s ease, box-shadow 0.2s ease;
       border: 1px solid rgba(0, 0, 0, 0.05) !important;
   }

   .stat-card:hover {
       transform: translateY(-3px);
       box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
   }

   /* Left Sidebar Navigation Menu styling */
   .custom-sidebar-nav .nav-link {
       font-size: 0.88rem;
       font-weight: 500;
       border-radius: 6px;
       transition: all 0.2s ease-in-out;
   }

   .custom-sidebar-nav .nav-link:hover:not(.active):not(.logout-btn) {
       background-color: rgba(1, 28, 70, 0.05);
       color: #011C46 !important;
       transform: translateX(3px);
   }

   .custom-sidebar-nav .nav-link.active {
       background-color: #011C46 !important;
       color: #ffffff !important;
       box-shadow: 0 4px 10px rgba(1, 28, 70, 0.15);
   }

   .custom-sidebar-nav .nav-link.logout-btn:hover {
       background-color: rgba(220, 53, 69, 0.08);
   }