:root {
          /* --bg: #071023; */
          --bg: #011d3a;
          --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;
          background: var(--accent);
          color: var(--bg);
          border: none;
          cursor: pointer;
          z-index: 1;
          transition: color 0.3s ease;
      }

      .btn-getintouch::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 0%;
          height: 100%;
          background: var(--bg);
          /* hover fill color */
          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);
          }
      }