body {
          font-family: 'Poppins', sans-serif;
      }


      p,
      li {
          font-size: 18px;
          margin-bottom: 0;
          color: #333333;
      }

      /*************** button******************/
      .btn-danger {
          background: #D62B2B !important;
          color: #fff;
          border: none;
          padding: 10px 22px;
          font-size: .8rem;
          font-weight: 600;
          border-radius: 2px;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          transition: background .2s;
          text-decoration: none;
      }

      .btn-danger:hover {
          background: #b32020 !important;
          color: #fff;
      }

      .btn-dark {
          background: #000 !important;
          color: #fff;
          border: none;
          padding: 10px 22px;
          font-size: .8rem;
          font-weight: 600;
          border-radius: 2px;
          display: inline-flex;
          align-items: center;
          gap: 5px;
          cursor: pointer;
          transition: background .2s;
          text-decoration: none;
      }

      .btn-dark:hover {
          background: #333 !important;
          color: #fff;
      }




      /*************image animation**************/


      .img-hover {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
      }

      .img-hover-parent {
          position: relative;
          overflow: hidden;
      }

      .img-hover-parent::before {
          content: "";
          position: absolute;
          top: 0;
          left: -75%;
          width: 50%;
          height: 100%;
          background: linear-gradient(120deg,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(255, 255, 255, 0.6) 50%,
                  rgba(255, 255, 255, 0) 100%);
          transform: skewX(-25deg);
          z-index: 2;
      }

      .img-hover-parent:hover::before {
          animation: shine 0.8s;
      }


      .img-hover-parent::after {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0);
          transition: 0.4s ease;
      }



      @keyframes shine {
          100% {
              left: 125%;
          }
      }


  

      .navbar {
          background: #fff;
          padding: 0;
          box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
          position: sticky;
          top: 0;
          z-index: 1000;
      }

      .navbar-brand {
          padding: 10px 0;
          display: flex;
          align-items: center;
          gap: 8px;
          text-decoration: none;
      }

      .brand-icon {
          background: #D62B2B;
          width: 42px;
          height: 42px;
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .brand-icon i {
          color: #fff;
          font-size: 1.1rem;
      }

      .brand-name {
          font-size: 1rem;
          font-weight: 700;
          color: #222;
          line-height: 1.1;
      }

      .brand-sub {
          font-size: .5rem;
          color: #888;
          letter-spacing: 1.5px;
          display: block;
      }

      .nav-link {
          font-size: 16px;
          font-weight: 600;
          color: #333 !important;
          letter-spacing: 1px;
          padding: 18px 12px !important;
          transition: color .2s;
      }

  


      /*************** Hero Section *************/


      .hero-animate {
          opacity: 0;
          transform: translateY(30px);
      }


      .hero-animate.show {
          animation: fadeSlideUp 0.6s ease forwards;
      }

      .hero-btn {
          opacity: 0;
          transform: translateY(30px);
      }

      .hero-btn.show {
          animation: fadeSlideUp 0.6s ease forwards;
          animation-delay: 0.2s;
      }

      /* Keyframes */
      @keyframes fadeSlideUp {
          from {
              opacity: 0;
              transform: translateY(30px);
          }

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

      #heroTitle {
          transition: 0.5s ease;
      }

      .hero h1 {
          font-size: 48px;
          font-weight: 700;
          line-height: 1.3;
      }

      .hero .text-danger {
          color: #e30613 !important;
      }


      .hero .owl-nav {
          position: absolute;
          bottom: 0;
      }

      .btn-red {
          background: #e30613;
          color: #fff;
          border: none;
          padding: 10px 25px;
      }

      .btn-red:hover {
          background: #c4000f;
      }


      .hero-arrows {
          position: absolute;
          bottom: 10px;
          left: 10px;
      }

      .hero-arrows button {
          border: none;
          background: #fff;
          padding: 8px 12px;
          margin-right: 5px;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }


      .hero {
          padding: 0px 0 0 0;
          background: #f9f9f9;
      }

      .hero-img {
          position: relative;
          height: 100%;
      }

      .hero-img img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 0;
          /* remove rounded */
      }

      .hero_heading {
          padding: 0 0 0 100px;
      }


      /************** Strip *****************/
      .strip {
          background: #eee;
          padding: 10px;
          text-align: center;
          font-weight: 500;
      }

      .strip span {
          margin: 0 15px;
      }

      /****************** Welcome **************/
      .section-title {
          font-weight: 700;
      }


      .welcome-section ul {
          list-style: none;
          padding: 0;
          margin: 10px 0 22px;
      }

      .welcome-section ul li {
          color: #444;
          padding: 4px 0;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .welcome-section ul li::before {
          content: '✔';
          color: #D62B2B;
          flex-shrink: 0;
      }



      /************ Red icons section ***********/

      .section-red {
          background: #e30613;
          color: #fff;
          padding: 50px 0;
      }

      .section-red i {
          font-size: 40px;
          margin-bottom: 10px;
      }

      /* Cards */
      .service-card img {
          border-radius: 8px;
      }

      .service-card {
          transition: 0.3s;
      }

      .service-card:hover {
          transform: translateY(-8px);
      }




      /************ Gallery ******************/
      .gallery_section {
          overflow: hidden;
          cursor: pointer;
          position: relative;
      }

      .gallery_section img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          transition: transform 0.5s ease;
      }

      .gallery_section:hover img {
          transform: scale(1.08);
      }

      .gallery_section::before {
          content: "";
          position: absolute;
          top: 0;
          left: -75%;
          width: 50%;
          height: 100%;
          background: linear-gradient(120deg,
                  rgba(255, 255, 255, 0) 0%,
                  rgba(255, 255, 255, 0.6) 50%,
                  rgba(255, 255, 255, 0) 100%);
          transform: skewX(-25deg);
          z-index: 2;
      }

      .gallery_section:hover::before {
          animation: shine 0.8s;
      }

      @keyframes shine {
          100% {
              left: 125%;
          }
      }

      .gallery_section::after {
          content: "";
          position: absolute;
          inset: 0;
          background: rgba(0, 0, 0, 0);
          transition: background 0.4s ease;
      }

      .gallery_section:hover::after {
          background: rgba(0, 0, 0, 0.25);
      }


      /* ===== Center Icon/Text ===== */
      .gallery_section .overlay-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) scale(0.8);
          color: #fff;
          font-size: 20px;
          font-weight: 600;
          opacity: 0;
          transition: 0.4s ease;
          z-index: 3;
      }

      .gallery_section:hover .overlay-content {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
      }




      /* CTA */
      .cta {
          background: #e30613;
          color: #fff;
          text-align: center;
          padding: 60px 0;
      }



      /***********TICKER *************/
      .ticker-strip {
          color: #000;
          background: #E5E2E2;
          padding: 30px 0;
          overflow: hidden;
      }

      .ticker-inner {
          display: flex;
          white-space: nowrap;
          animation: ticker 24s linear infinite;
          font-size: .75rem;
          font-weight: 600;
          letter-spacing: 2px;
      }

      .ticker-item {
          padding: 0 18px;
          font-size: 25px;
      }


      @keyframes ticker {
          from {
              transform: translateX(0);
          }

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



      /* FOOTER */
      footer {
          background: #111;
          color: rgba(255, 255, 255, .65);
          padding: 55px 0 0;
      }

      .f-logo-wrap {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 14px;
      }

      .f-logo-icon {
          background: #D62B2B;
          width: 44px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 2px;
      }

      .f-logo-icon i {
          color: #fff;
          font-size: 1.2rem;
      }

      .f-brand {
          font-size: .95rem;
          font-weight: 700;
          color: #fff;
          line-height: 1.1;
      }

      .f-brand-sub {
          font-size: .5rem;
          letter-spacing: 2px;
          color: #999;
      }

      footer p {
          font-size: .8rem;
          line-height: 1.8;
      }

      footer h6 {
          color: #fff;
          font-size: .8rem;
          font-weight: 700;
          margin-bottom: 14px;
          letter-spacing: .5px;
      }

      .f-nav {
          list-style: none;
          padding: 0;
      }

     

      .f-nav a {
          color: #dcdcdc;
          font-size: .8rem;
          text-decoration: none;
          transition: color .2s;
      }

      .f-nav a:hover {
          color: #D62B2B;
      }

      .f-info {
          display: flex;
          gap: 8px;
          align-items: flex-start;
          margin-bottom: 9px;
          font-size: .78rem;
      }

      .f-info i {
          color: #D62B2B;
          margin-top: 2px;
          flex-shrink: 0;
          font-size: .8rem;
      }

      .f-bottom {
          background: #0a0a0a;
          padding: 13px 0;
          margin-top: 40px;
          font-size: .72rem;
          color: rgba(255, 255, 255, .3);
      }

      .f-bottom a {
          color: #D62B2B;
          text-decoration: none;
      }

      /* BACK TOP */
      #backTop {
          position: fixed;
          bottom: 22px;
          right: 22px;
          width: 40px;
          height: 40px;
          background: #D62B2B;
          color: #fff;
          border: none;
          cursor: pointer;
          display: none;
          align-items: center;
          justify-content: center;
          font-size: 1rem;
          z-index: 9999;
      }

      #backTop.show {
          display: flex;
      }



      #overlayer {
          width: 100%;
          height: 100%;
          position: fixed;
          z-index: 7100;
          background: #fff;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
      }

      .loader {
          z-index: 7700;
          position: fixed;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
      }


      @-webkit-keyframes spinner-border {
          to {
              -webkit-transform: rotate(360deg)
                  /* rtl:ignore */
              ;
              transform: rotate(360deg)
                  /* rtl:ignore */
              ;
          }
      }

      @keyframes spinner-border {
          to {
              -webkit-transform: rotate(360deg)
                  /* rtl:ignore */
              ;
              transform: rotate(360deg)
                  /* rtl:ignore */
              ;
          }
      }

      .spinner-border {
          display: inline-block;
          width: 40px;
          height: 40px;
          vertical-align: -0.125em;
          border: 0.25em solid #d70000;
          border-right-color: transparent;
          border-radius: 50%;
          -webkit-animation: 0.75s linear infinite spinner-border;
          animation: 0.75s linear infinite spinner-border;
      }

      .spinner-border-sm {
          width: 1rem;
          height: 1rem;
          border-width: 0.2em;
      }

      @-webkit-keyframes spinner-grow {
          0% {
              -webkit-transform: scale(0);
              transform: scale(0);
          }

          50% {
              opacity: 1;
              -webkit-transform: none;
              transform: none;
          }
      }

      @keyframes spinner-grow {
          0% {
              -webkit-transform: scale(0);
              transform: scale(0);
          }

          50% {
              opacity: 1;
              -webkit-transform: none;
              transform: none;
          }
      }

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

      /* Tablet (≤ 992px) */
      @media (max-width: 992px) {

          /* Hero */
          .hero h1 {
              font-size: 36px;
          }

          .hero_heading {
              padding: 0 20px;
          }

          /* Navbar */
          .nav-link {
              padding: 12px 10px !important;
              font-size: 14px;
          }

          /* Buttons */
          .btn-danger,
          .btn-dark {
              padding: 8px 16px;
              font-size: 0.75rem;
          }

          /* Gallery spacing fix */
          .col-md-7,
          .col-md-5,
          .col-md-4,
          .col-md-6 {
              margin-bottom: 10px;
          }
      }


      /* Mobile (≤ 768px) */
      @media (max-width: 768px) {

          /* Hero Section */
          .hero {
              text-align: center;
          }

          .hero h1 {
              font-size: 28px;
          }

          .hero_heading {
              padding: 20px;
          }

          /* Navbar */
          .navbar {
              padding: 5px 0;
          }

          .brand-name {
              font-size: 0.9rem;
          }

          .brand-sub {
              font-size: 0.45rem;
          }

          /* Strip */
          .strip {
              font-size: 14px;
          }

          /* Gallery Images */
          .gallery-img {
              height: auto;
          }

          /* Service cards */
          .service-card {
              margin-bottom: 20px;
          }

          /* Footer */
          footer {
              text-align: center;
          }

          .f-info {
              justify-content: center;
          }
      }


      /* Small Mobile (≤ 576px) */
      @media (max-width: 576px) {

          /* Hero */
          .hero h1 {
              font-size: 22px;
              line-height: 1.4;
          }

          /* Buttons full width */
          .btn-danger,
          .btn-dark {
              width: 100%;
              justify-content: center;
          }

          /* Gallery Fix */
          .col-md-4,
          .col-md-5,
          .col-md-6,
          .col-md-7 {
              width: 100%;
          }

          /* Ticker */
          .ticker-item {
              font-size: 16px;
          }

          /* Footer text */
          footer p {
              font-size: 0.7rem;
          }
      }