:root {
          /* --bg: #071023; */
          --bg: #1E88E5;
          --muted: #6b7280;
          --accent: #ffb703;
          --accent-2: #ff6b2d;
          --card: #0b1220;
          --glass: rgba(255, 255, 255, 0.04);
      }

      * {
          box-sizing: border-box
      }

      body {
          font-family: 'Barlow', sans-serif;
          background: #f6f7fb;
          color: #111827;
      }

      a {
          text-decoration: none
      }

      .axm-top-strip {
          background: var(--bg);
          color: #fff;
          font-size: .95rem
      }

      .axm-top-strip a {
          color: #e6e6e6;
          text-decoration: none
      }

      .axm-top-strip a:hover {
          color: var(--accent)
      }

      .navbar-ax {
          background: transparent
      }

      .navbar-brand img {
          height: 48px
      }

      .nav-link {
          color: #111827;
          font-weight: 600
      }

      .nav-link:hover {
          color: var(--accent-2);
          transition: .22s
      }

      /* .nav-ax .btn-contact {
          
          font-weight: 700;
         
          border: 1px solid #ff5f13;
          color: #ff5f13;
      }

      .nav-ax .btn-contact:hover {
          
          border: 1px solid #ff5f13;
          color: #111827;
          background: #ff5f13 ;
      } */

      .btn-contact {
          position: relative;
          overflow: hidden;
          font-weight: 700;
          border: 1px solid #ff5f13;
          color: #ff5f13;
          background: transparent;
          transition: color 0.3s ease;
          z-index: 1;
      }

      .btn-contact::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          /* start empty */
          height: 100%;
          background: #ff5f13;
          /* fill color */
          z-index: -1;
          transition: width 0.4s ease;
      }

      .btn-contact:hover::before {
          width: 100%;
      }

      .btn-contact:hover {
          color: #111827;
      }

      .btn-getintouch {
  position: relative;
  overflow: hidden;
  display: inline-block;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.9rem 1.3rem;

  /* ✅ default state (white bg + blue text) */
  background: #fff;
  color: #3A8DDE;

  /* ✅ keep border so it looks premium */
  border: 1.5px solid #3A8DDE;

  cursor: pointer;
  z-index: 1;
  transition: color 0.3s ease;
}

/* ✅ hover fill color (blue) */
.btn-getintouch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: #3A8DDE;
  z-index: -1;
  transition: width 0.4s ease;
}

.btn-getintouch:hover::before {
  width: 100%;
}

.btn-getintouch:hover {
  color: #fff;
}

      .btn-ghost {
          position: relative;
          overflow: hidden;
          display: inline-block;
          font-weight: 700;
          padding: 0.9rem 1.5rem;
          /* font-size: 1.1rem; */
          border: 1px solid var(--accent);
          background: transparent;
          color: var(--accent);
          border-radius: 10px;
          cursor: pointer;
          z-index: 1;
          transition: color 0.3s ease, border-color 0.3s ease;
      }

      .btn-ghost::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          background: var(--accent);
          z-index: -1;
          transition: width 0.4s ease;
      }

      /* Hover state */
      .btn-ghost:hover::before {
          width: 100%;
      }

      .btn-ghost:hover {
          color: #fff;
          /* text becomes white on hover */
          border-color: var(--accent);
      }

      .btn-training {
          position: relative;
          overflow: hidden;
          display: inline-block;
          font-weight: 700;
          padding: 0.7rem 1.5rem;
          /* font-size: 1.1rem; */
          border: 1px solid var(--bg);
          background: transparent;
          color: var(--bg);
          border-radius: 10px;
          cursor: pointer;
          z-index: 1;
          transition: color 0.3s ease, border-color 0.3s ease;
      }

      .btn-training::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          background: var(--bg);
          z-index: -1;
          transition: width 0.4s ease;
      }

      /* Hover state */
      .btn-training:hover::before {
          width: 100%;
      }

      .btn-training:hover {
          color: #fff;
          /* text becomes white on hover */
          border-color: var(--bg);
      }

      .dropdown-menu {
          border-radius: .6rem;
          border: 0;
          padding: .25rem;
          min-width: 200px;
          transform-origin: top center;
          transition: all .22s ease;
          box-shadow: 0 8px 30px rgba(15, 20, 36, 0.12)
      }

      .nav-item.dropdown:hover>.dropdown-menu {
          display: block;
          transform: translateY(6px) scale(.98);
          opacity: 1
      }

      .dropdown-item {
          color: var(--bg)
      }

      .dropdown-item:hover {
          background: var(--glass)
      }

      .axm-hero {
          min-height: 76vh;
          display: flex;
          align-items: center;
          background: linear-gradient(0deg, rgba(15, 20, 36, .6), rgba(15, 20, 36, .3)), url("/assets/img/axiom/img04.png") center/cover no-repeat;
          color: #fff
      }

      .axm-hero h1 {
          font-family: 'Teko', sans-serif;
          font-size: 3.5rem;
          letter-spacing: 1px
      }

      .axm-hero p {
          max-width: 720px;
          font-size: 1.05rem;
          color: rgba(255, 255, 255, 0.9)
      }

      /* .btn-ghost {
          background: transparent;
          border: 2px solid rgba(255, 255, 255, 0.15);
          color: #fff
      } */

      /* Cards */
      /* .axm-card-modern {
          background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
          border: 0;
          border-radius: .8rem;
          box-shadow: 0 8px 30px rgba(2, 6, 23, 0.08);
          transition: transform .22s ease, box-shadow .22s ease
      }

      .axm-card-modern:hover {
          transform: translateY(-8px);
          box-shadow: 0 18px 50px rgba(2, 6, 23, 0.12)
      } */

      .service-icon {
          font-size: 28px;
          color: var(--accent-2);
          width: 56px;
          height: 56px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: rgb(255 173 45 / 23%);
          border-radius: 12px
      }

      .section-title {
          font-weight: 700;
          font-size: 1.9rem
      }

      .section-sub {
          color: var(--muted);
          margin-top: .35rem
      }

      .site-footer {
          background: var(--bg);
          color: #cbd5e1
      }

      .site-footer a {
          color: #cbd5e1
      }

      .site-footer a:hover {
          color: var(--accent)
      }

      @media (max-width:767px) {
          .axm-hero h1 {
              font-size: 2.3rem;
              text-align: center
          }

          .summary_events {
              margin-top: 3px;
          }

          .axm-hero {
              min-height: 62vh
          }
      }

      .nav-link {
          position: relative
      }

      .nav-link::after {
          content: '';
          height: 3px;
          width: 0;
          background: var(--accent);
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: -6px;
          transition: width .22s
      }

      .nav-link:hover::after {
          width: 56%
      }

      .axm-card-modern {
          background: #fff;
          border: none;
          border-radius: 15px;
          box-shadow: 0 4px 12px rgb(0 0 0 / 23%);
          /* soft shadow */
          transition: all 0.3s ease;
          position: relative;
          z-index: 1;
      }

      .axm-card-modern:hover {
          transform: translateY(-8px);
          box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
      }

      .axm-card-modern .service-icon {
          font-size: 2rem;
          color: var(--accent);
      }


      .training-card {
          background: #fff;
          border: none;
          border-radius: 12px;
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
          transition: all 0.3s ease;
          position: relative;
          z-index: 1;
      }

      .training-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
          border: 1px solid var(--accent);
      }


      .training-card h6 {
          font-weight: 700;
          color: var(--accent);
          letter-spacing: 1px;
          margin-bottom: 0.5rem;
      }

      .training-card p {
          font-size: 0.9rem;
          color: #555;
      }

      #inspection {
          position: relative;
          background: #fff;
          border-radius: 20px;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
          overflow: hidden;
      }

      /* #inspection::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 5px;
          background: linear-gradient(90deg, var(--accent), #ffb84d);
      } */

      #inspection .section-title {
          font-size: 2rem;
          font-weight: 800;
          color: #111827;
          margin-bottom: 1rem;
          position: relative;
      }

      #inspection .lead {
          font-size: 1.1rem;
          color: #444;
          margin-bottom: 1.2rem;
          line-height: 1.6;
      }

      #inspection ul {
          padding-left: 0;
          list-style: none;
      }

      #inspection ul li {
          font-size: 1rem;
          margin-bottom: 0.7rem;
          display: flex;
          align-items: center;
          color: #333;
          transition: transform 0.2s ease, color 0.2s ease;
      }

      #inspection ul li:hover {
          transform: translateX(5px);
          color: var(--accent);
      }

      #inspection ul li i {
          font-size: 1rem;
          color: var(--accent);
          margin-right: 0.6rem;
      }

      #inspection img {
          border-radius: 15px;
          box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
          transition: transform 0.4s ease;
          max-height: 320px;
          object-fit: cover;
      }

      #inspection img:hover {
          transform: scale(1.05);
      }


      #contact {
          background: #f9fbfd;
      }


      .section-title {
          font-size: 2.2rem;
          color: var(--bg);
      }

      .section-sub {
          font-size: 1rem;
          margin-top: 0.5rem;
      }

      .title-underline {
          width: 60px;
          height: 3px;
          background: var(--accent, #00d1b2);
          margin-top: 10px;
          border-radius: 50px;
      }

      .contact-card {
          border-radius: 1rem;
          background: #ffffff;
      }

      .form-control-modern,
      .form-select.form-control-modern {
          border-radius: 8px;
          border: 1px solid #e3e6eb;
          padding: 0.8rem 1rem;
          transition: all 0.3s ease;
          font-size: 0.95rem;
      }

      .form-control-modern:focus,
      .form-select.form-control-modern:focus {
          border-color: var(--accent, #00d1b2);
          box-shadow: 0 0 0 0.2rem rgba(0, 209, 178, 0.15);
      }

      .contact-btn {
          background: var(--accent, --bg) !important;
          color: var(--bg) !important;
          font-weight: 600 !important;
          border-radius: 10px !important;
          transition: all 0.3s ease !important;
      }

      .contact-btn:hover {
          background: var(--bg) !important;
          color: #fff !important;
          transform: translateY(-2px) !important;
          box-shadow: 0 6px 20px rgba(9, 15, 32, 0.25) !important;
      }

      .service-card {
          transition: all 0.3s ease;
      }

      .service-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      }

      .service-icon {
          width: 55px;
          height: 55px;
          font-size: 1.5rem;
      }

      .footer_logo {
          width: 120px;
          height: 50px;

      }

      .company-logo {
          /* position: absolute;
          top: 10px;
          right: 10px; */
          width: 40px;
          /* Adjust the size as needed */
          height: 40px;
      }

      .summary_events h6 {
          font-weight: 700;
          color: var(--bg);
          letter-spacing: 1px;
          margin-bottom: 0.5rem;
          font-size: 17px;
      }

      /* #loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; 
  display: none; 
} */
      #sub-loader {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 9999;
          display: none;
      }

      #loader {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 9999;
          display: none;
      }

      .spinner-container {
          position: relative;
          display: inline-block;
      }

      .spinner-border {
          width: 3rem;
          height: 3rem;
          border-width: 0.3rem;
          animation: spin 1s linear infinite;
          border-top-color: var(--accent);
          border-bottom-color: var(--accent);
          border-left-color: var(--bg);
          border-right-color: var(--bg);
      }

      .logo-loader {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          /* Keep the logo in the center */
          pointer-events: none;
          /* This ensures the logo doesn't block interaction with the spinner */
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      .map-container {
          position: relative;
          width: 100%;
          padding-bottom: 56.25%;
          /* Aspect ratio 16:9 */
          height: 0;
          overflow: hidden;
          max-width: 100%;
          border-radius: 10px;
          /* Round corners */
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          /* Soft shadow */
          margin: 20px 0;
          /* Space around the map */
      }

      /* Style for the iframe itself */
      .map-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: none;
          border-radius: 10px;
          /* Round corners */
      }

      .hero-animate {
          animation: slow-zoom 15s infinite alternate ease-in-out;
          background-size: 105%;
      }

      @keyframes slow-zoom {
          from {
              background-size: 105%;
              background-position: center;
          }

          to {
              background-size: 110%;
              background-position: bottom;
          }
      }

/* ============================
   ADMIN SIDEBAR ONLY (NO GREEN)
   ============================ */

/* default */
.admin-sidebar .nav-link{
  background: transparent !important;
  color: rgba(255,255,255,0.92) !important;
  border-radius: 10px;
  margin: 4px 10px;
  padding: 10px 12px;
  transition: background .2s ease, color .2s ease;
}

/* hover = light blue (like your screenshot) */
.admin-sidebar .nav-link:hover{
  background: rgba(58,141,222,0.28) !important;  /* #3A8DDE */
  color: #fff !important;
}

/* active = stronger blue */
.admin-sidebar .nav-link.active{
  background: rgba(58,141,222,0.42) !important;  /* #3A8DDE */
  color: #fff !important;
}

/* icons follow text color */
.admin-sidebar .nav-link i{
  color: inherit !important;
}

/* remove any green coming from bootstrap "success" classes etc. */
.admin-sidebar .nav-link:focus,
.admin-sidebar .nav-link:active{
  box-shadow: none !important;
  outline: none !important;
}