* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: var(--font-family);
 }

 :root {
   --font-heading-1-size: 24px;
   --font-heading-2-size: 22px;
   --font-heading-3-size: 20px;
   --font-heading-4-size: 18px;
   --font-heading-5-size: 16px;
   --font-heading-6-size: 14px;
   --font-paragraph-size: 16px;
   --text-primary: #3f89f6;
   --text-red: #e8482e;
   --text-yellow: #fcc34f;
   --text-green: #33a765;
   --text-primary-hover: #2f6fd1;
   --text-white: #fff;
   --text-dark: #000;
 }

 body {
   --font-family: Nunito sans;
   --heading-font-family: Merriweather;
 }

 h1 {
   font-size: var(--font-heading-1-size);
 }

 h2 {
   font-size: var(--font-heading-2-size);
 }

 h3 {
   font-size: var(--font-heading-3-size);
 }

 h4 {
   font-size: var(--font-heading-4-size);
 }

 h5 {
   font-size: var(--font-heading-5-size);
 }

 h6 {
   font-size: var(--font-heading-6-size);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: var(--heading-font-family);
 }

 p {
   font-size: var(--font-paragraph-size);
 }


 /*underline*/
 .blue-underline,
 .red-underline,
 .white-underline,
 .yellow-underline,
 .green-underline {
   position: relative;
   display: inline-block;
   font-size: 2rem;
   color: #1e1e2f;
   padding-bottom: 12px;
   font-family: var(--heading-font-family);
   background-color: transparent;
   z-index: 1;
 }

 .blue-underline::after,
 .red-underline::after,
 .white-underline::after,
 .yellow-underline::after,
 .green-underline::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 4px;
   height: 20px;
   width: 100%;
   border-radius: 8px;
   transform: skewX(15deg);
   clip-path: polygon(0 82%, 5% 80%, 20% 85%, 40% 80%,
       60% 86%, 80% 77%, 100% 80%,
       100% 100%, 0% 100%);
   transition: all 0.3s ease-in-out;
   z-index: -1;
 }

 .blue-underline::after {
   background-color: var(--text-primary);
 }

 .red-underline::after {
   background-color: #e8482e;
 }

 .yellow-underline::after {
   background-color: #fcc34f;
 }

 .green-underline::after {
   background-color: #33a765;
 }

 .white-underline::after {
   background-color: #fff;
 }


 @media (max-width: 992px) {

   .blue-underline,
   .red-underline,
   .white-underline,
   .yellow-underline,
   .green-underline {
     font-size: 1.6rem;
     padding-bottom: 8px;
   }

   .blue-underline::after,
   .red-underline::after,
   .white-underline::after,
   .yellow-underline::after,
   .green-underline::after {
     height: 14px;
     bottom: 2px;
   }
 }

 @media (max-width: 576px) {

   .blue-underline,
   .red-underline,
   .white-underline,
   .yellow-underline,
   .green-underline {
     font-size: 1.3rem;
     padding-bottom: 6px;
   }

   .blue-underline::after,
   .red-underline::after,
   .white-underline::after,
   .yellow-underline::after,
   .green-underline::after {
     height: 10px;
     bottom: 2px;
   }
 }


 /* header */
 .logo-img {
   height: 50px;
 }

 @media (max-width: 991px) {
   .logo-img {
     height: 40px;
     margin-right: 34px;
   }
 }

 .navbar-nav .nav-link {
   margin-right: 20px;
 }

 .navbar .d-flex {
   margin-left: 20px;
 }

 .drawer-toggle {
   position: absolute;
   left: -9999px;
 }

 .drawer {
   position: fixed;
   top: 55px;
   padding-top: 24px;
   left: -100%;
   width: 100%;
   height: 100%;
   background-color: #fff;
   padding: 0px 24px;
   transition: left 0.28s cubic-bezier(.2, .9, .2, 1);
   z-index: 1050;
   overflow-y: auto;
 }

 .drawer-toggle:checked~.drawer {
   left: 0;
 }

 .drawer-backdrop {
   display: none;
 }

 .drawer-toggle:checked~.drawer-backdrop {
   display: block;
   position: fixed;
   inset: 0;
   z-index: 1040;
   cursor: pointer;
 }

 .drawer-header {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-bottom: 2rem;
 }

 .drawer-close {
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
 }

 .drawer-nav {
   margin-top: 0;
 }

 .drawer-list,
 .drawer-submenu {
   list-style: none;
   padding: 0;
   margin: 0 0 1rem 0;
 }

 .drawer-list li,
 .drawer-submenu li {
   margin-bottom: 0.3rem;
 }

 .drawer-link {
   display: block;
   padding: 0.6rem 0;
   text-decoration: none;
   color: #111;
   font-size: 18px;
 }

 .drawer-details {
   margin-bottom: 0.5rem;
   font-size: 18px;
 }

 .drawer-summary {
   list-style: none;
   cursor: pointer;
   padding: 0.6rem 0;
   justify-content: space-between;
   align-items: center;
   border: none;
   outline: none;
 }

 .drawer-summary svg {
   transition: transform 0.5s ease;
   margin-top: -7px;
 }

 .drawer-details[open] .drawer-summary svg {
   transform: rotate(180deg);
   margin-top: 5px;
 }

 .menu-icon,
 .close-icon {
   cursor: pointer;
 }

 .close-icon {
   display: none;
 }

 .drawer-toggle:checked+label .menu-icon {
   display: none;
 }

 .drawer-toggle:checked+label .close-icon {
   display: inline-block;
 }

 @media (min-width: 992px) {

   .drawer,
   .drawer-backdrop,
   .drawer-close,
   label[for="drawerToggle"] {
     display: none !important;
   }

   .navbar-toggler {
     display: none !important;
   }

   .drawer-submenu {
     margin-left: 10px;
   }
 }

 @media (max-width: 991px) {
   .collapse.navbar-collapse {
     display: none;
   }

   .navbar-toggler {
     border: none;
     background: transparent;
     padding: .25rem .5rem;
   }

   .navbar .container-fluid {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }

   .navbar-brand {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
   }

   .mobile-login {
     margin-left: auto;
   }

   .drawer-submenu {
     margin-left: 12px;
   }
 }


 /*main part*/
 .platform-container {
   width: 1200px;
   margin: 0 auto;
   padding: 2rem;
   display: flex;
   text-align: center;
   flex-direction: column;
   justify-content: center;
   min-height: 50vh;
 }

 .platform-container h1 {
   font-style: italic;
   font-family: var(--heading-font-family);
 }


 .platform-container p {
   font-size: 2.8rem;
   font-family: var(--heading-font-family);
   font-style: italic;
   color: #2c3e50;
   margin-bottom: 1.5rem;
 }

 .highlight-red {
   background: url(../image/highliter/red.svg) no-repeat center bottom;
   background-size: 100% 110%;
   display: inline-block;
   font-family: var(--heading-font-family);
   font-size: 2.8rem;
 }


 .circle-highlight {
   position: relative;
   left: 0.5em;
 }

 .circle-highlight:before {
   content: "";
   z-index: -1;
   left: -13px;
   top: 9px;
   border-width: 3px;
   border-style: solid;
   border-color: #33a756;
   position: absolute;
   border-right-color: transparent;
   width: 100%;
   height: 1em;
   transform: rotate(2deg);
   opacity: 0.7;
   border-radius: 50%;
   padding: 0.1em 0.25em;
 }

 .circle-highlight:after {
   content: "";
   z-index: -1;
   left: -10px;
   top: 17px;
   padding: 0.1em 0.25em;
   border-width: 3px;
   border-style: solid;
   border-color: #33a756;
   border-left-color: transparent;
   border-top-color: transparent;
   position: absolute;
   width: 100%;
   height: 1em;
   transform: rotate(-1deg);
   opacity: 0.7;
   border-radius: 50%;
 }

 @media (max-width: 479px) {
   .platform-container {
     width: 100%;
     padding: 1rem 0.5rem;
     min-height: auto;
   }

   .platform-container p,
   .highlight-red {
     font-size: 1.6rem;
     margin-bottom: 0.6rem;
   }

   .circle-highlight {
     display: inline-block;
     position: relative;
     left: 0;
   }

   .circle-highlight::before,
   .circle-highlight::after {
     left: 50%;
     transform: translateX(-50%);
     width: 110%;
     height: 0.9em;
     padding: 0.05em 0.2em;
     border-width: 2px;
   }

   .circle-highlight::after {
     top: 13px;
   }
 }

 @media (min-width: 480px) and (max-width: 767px) {
   .platform-container {
     width: 100%;
     padding: 1.2rem 1rem;
     min-height: auto;
   }

   .platform-container p,
   .highlight-red {
     font-size: 1.8rem;
     margin-bottom: 0.8rem;
   }

   .circle-highlight::before,
   .circle-highlight::after {
     top: 4px;
     left: -8px;
     height: 0.8em;
     border-width: 2.5px;
   }

   .circle-highlight::after {
     top: 10px;
   }
 }

 @media (min-width: 768px) and (max-width: 991px) {
   .platform-container {
     width: 95%;
     padding: 1.5rem 1rem;
     min-height: auto;
   }

   .platform-container p,
   .highlight-red {
     font-size: 2.2rem;
     margin-bottom: 1rem;
   }

   .circle-highlight::before,
   .circle-highlight::after {
     top: 6px;
     height: 0.9em;
     left: -10px;
     border-width: 3px;
   }

   .circle-highlight::after {
     top: 17px;
   }
 }



 /* why use */

 .why-choose-us {
   background: radial-gradient(circle,
       rgba(252, 195, 79, 0.8) 0%,
       rgba(252, 195, 79, 0.2) 100%);
 }

 .why-header .highlight {
   color: #e8482e;
   text-decoration: underline;
 }

 .step-wrapper::before {
   content: "";
   position: absolute;
   top: 70px;
   left: 50px;
   right: 50px;
   height: 2px;
   background-color: #f26b52;
   z-index: 0;
 }

 .step-item {
   position: relative;
   z-index: 1;
   transition: 0.3s ease;
 }

 .step-circle {
   width: 50px;
   height: 50px;
   background: white;
   border: 3px solid #f26b52;
   border-radius: 50%;
   color: #111;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 0.3s ease;
 }

 .step-item:hover .step-circle {
   background-color: #e8482e;
   color: white;
   border-color: #e8482e;
 }

 .step-card {
   background: #fff;
   border: 1px solid #eaeaea;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
 }

 .step-card h4 {
   margin-bottom: 8px;
   font-weight: 700;
   font-size: 1.1rem;
   color: #212529;
 }

 .step-card p {
   color: #6c757d;
   margin: 0;
 }

 @media (max-width: 768px) {
   .step-wrapper::before {
     display: none;
   }
 }

 /* our product */
 .industry-erp-section {
   position: relative;
 }

 .industry-erp-section h2 {
   font-size: 2rem;
   color: var(--text-dark);
 }

 .industry-card,
 .industry-right-card {
   border-radius: 15px;
 }

 .image-clip-box {
   min-height: 220px;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
 }

 .image-clip-box img {
   width: 100%;
   height: auto;
 }

 .info-text-box {
   padding: 40px;
 }

 .info-text-box h3 {
   font-size: 1.8rem;
   margin-bottom: 15px;
   color: var(--text-dark);
 }

 .info-text-box p {
   line-height: 1.6;
   margin-bottom: 20px;
   color: #333;
 }

 /* why choose us */
 .about-us {
   background: linear-gradient(135deg, #e6f7f0, #ffffff);
 }

 .service-icon {
   color: #33a765;
   font-size: 40px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
 }

 .service-icon i {
   font-size: 30px;
 }

 .quote-box {
   background-color: #eaf4f4;
   padding: 20px;
   border-radius: 12px;
   position: relative;
   font-size: 15px;

 }

 .img-1 {
   width: 450px;
   height: 400px;
   border-radius: 70px 70px 0 70px;
 }

 .img-2 {
   width: 250px;
   height: 250px;
   border: 2px dashed #33a765;
   padding: 8px;
 }

 .img-3 {
   width: 250px;
   height: 300px;
   border-radius: 0 70px 70px 70px;
 }

 .about-experience {
   background-color: #33a765;
   padding: 15px 25px;
   color: #fff;
   border-radius: 50px 50px 50px 0;
   box-shadow: 0 0 40px 5px rgb(0 0 0 / 10%);
   text-align: center;
 }

 .about-experience-icon {
   font-size: 24px;
 }


 @media (max-width: 991px) {
   .img-1 {
     width: 400px;
     height: 320px;
   }

   .img-2,
   .img-3 {
     width: 200px;
     height: 200px;
   }

   .service-icon {
     font-size: 35px;
   }

   .service-icon i {
     font-size: 25px;
   }

   .about-experience {
     padding: 12px 20px;
     font-size: 14px;
   }

   .btn.ms-5 {
     margin-left: 0 !important;
   }
 }

 @media (max-width: 767px) {
   .img-1 {
     width: 100%;
     height: auto;
     border-radius: 50px 50px 0 50px;
   }

   .img-2,
   .img-3 {
     width: 150px;
     height: 150px;
   }

   .service-icon {
     font-size: 30px;
   }

   .service-icon i {
     font-size: 20px;
   }

   .quote-box {
     font-size: 13px;
     padding: 15px;
   }

   .about-experience {
     padding: 10px 15px;
     font-size: 12px;
   }

   .btn.ms-5 {
     margin-left: 0 !important;
   }
 }
/* Tablet view fix (992px – 768px) */
@media (max-width: 991px) and (min-width: 768px) {

  /* Image smaller for tablet */
  .img-1 {
    width: 320px;   /* <-- Reduced width */
    height: 260px;  /* <-- Reduced height */
    border-radius: 50px;
    object-fit: cover;
  }

  /* Ensure image column becomes smaller */
  .col-lg-5 {
    flex: 0 0 auto;
    max-width: max-content;
  }

  /* Content column gets more space */
  .col-lg-7 {
    padding-left: 25px;  /* Left space */
    margin-top: 0;
  }
}



 /* modules */
 .apps-section {
   position: relative;
   padding: 3rem 0;
   margin: 50px auto;
 }

 .apps-section h2 {
   font-family: var(--heading-font-family);
 }

 .apps-section a {
   text-decoration: none;
   color: inherit;
 }

 .app-card {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 110px;
 }

 .app-card img {
   height: 70px;
   object-fit: contain;
   transition: 0.3s ease;
 }

 .app-card img:hover {
   background: radial-gradient(circle,
       rgba(252, 195, 79, 0.8) 0%,
       rgba(252, 195, 79, 0.2) 100%);
   border-radius: 100%;
   width: 100px;
   height: 100px;
 }

 .apps-section p {
   color: #2c2c2c;
   margin-top: 0.75rem;
   font-weight: 700;
   text-align: center;
 }

 .module-icon-circle {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   background-color: #fde0dc;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
 }

 /* client */
 .slider-section {
   background: radial-gradient(circle, rgba(252, 195, 79, 0.8) 0%, rgba(252, 195, 79, 0.2) 100%);
   color: var(--text-dark);
 }

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

 .slider {
   display: flex;
   transition: transform 0.5s ease-in-out;
 }

 .slide {
   flex: 0 0 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .slide img {
   width: 100%;
   height: auto;
   display: block;
   border-radius: 10px;
   object-fit: cover;
 }

 .slider-btn {
   width: 50px;
   height: 50px;
   font-size: 1.2rem;
 }


 @media (max-width: 575.98px) {
   .slider-wrapper {
     width: 100%;
   }

   .slide {
     flex: 0 0 100%;
   }

   .slide img {
     height: 220px;
   }

   .slider-btn {
     width: 40px;
     height: 40px;
     font-size: 1rem;
   }
 }


 @media (min-width: 576px) and (max-width: 991.98px) {
   .slider-wrapper {
     width: 100%;
   }

   .slide {
     flex: 0 0 100%;
   }

   .slide img {
     height: 280px;
   }
 }


 @media (min-width: 992px) {
   .slider-wrapper {
     width: 100%;
     max-width: 620px;
   }

   .slide {
     flex: 0 0 100%;
   }

   .slide img {
     height: 320px;
   }
 }



 /* last part */
 .custom-cta-section {
   background: #fff;
   padding: 80px 0;
 }

 .custom-cta-container h3 {
   font-size: 64px;
   font-weight: 400;
   margin-bottom: 30px;
   color: #1e1e2f;
   position: relative;
 }

 .custom-cta-highlight-main {
   color: #1e1e2f;
   font-weight: bold;
   position: relative;
   display: inline-block;
 }

 .custom-cta-highlight-main::before {
   content: "";
   position: absolute;
   top: -105px;
   left: 10%;
   transform: translateX(-50%);
   width: 600px;
   height: 200px;
   background: url('../image/highliter/fireworks_01a.svg') no-repeat center;
   background-size: contain;
 }

 .custom-cta-highlight-main::after {
   content: "";
   position: absolute;
   top: -30px;
   left: 145%;
   transform: translateX(-50%);
   width: 150px;
   height: 100px;
   background: url('../image/highliter/fireworks_01b.svg') no-repeat center;
   background-size: contain;
 }

 .red-highlite {
   position: relative;
   display: inline-block;
   color: #1e1e2f;
   padding-bottom: 12px;
   font-family: var(--heading-font-family);
   background-color: transparent;
   z-index: 1;
 }

 .red-highlite::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 4px;
   height: 20px;
   width: 100%;
   border-radius: 8px;
   transform: skewX(15deg);
   clip-path: polygon(0 82%, 5% 80%, 20% 85%, 40% 80%,
       60% 86%, 80% 77%, 100% 80%,
       100% 100%, 0% 100%);
   transition: all 0.3s ease-in-out;
   z-index: -1;
   background-color: #e8482e;
 }

 @media (max-width: 992px) {
   .custom-cta-section {
     padding: 60px 0;
   }

   .custom-cta-container h3 {
     font-size: 48px;
     text-align: center;
   }

   .custom-cta-highlight-main::before {
     width: 450px;
     height: 160px;
     top: -60px;
     left: 50%;
     transform: translateX(-50%);
   }

   .custom-cta-highlight-main::after {
     width: 120px;
     height: 80px;
     top: -10px;
     left: 135%;
     transform: translateX(-50%);
   }
 }

 @media (max-width: 576px) {
   .custom-cta-section {
     padding: 40px 0;
   }

   .custom-cta-container h3 {
     font-size: 36px;
     line-height: 1.3;
     text-align: center;
   }

   .custom-cta-highlight-main::before {
     width: 300px;
     height: 120px;
     top: -65px;
     left: 25%;
     transform: translateX(-50%);
   }

   .custom-cta-highlight-main::after {
     width: 90px;
     height: 60px;
     top: -5px;
     left: 125%;
     transform: translateX(-50%);
   }
 }


 /* divice */
 .platform-section {
   padding: 30px 0;
 }

 .platform-icon {
   height: 130px;
   width: 130px;
   margin: 0 auto;
   border-radius: 6px;
   background: rgba(255, 255, 255, 0.15);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 2px solid rgba(255, 255, 255, 0.4);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.4s ease;
   position: relative;
   overflow: hidden;
 }

 .platform-icon::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 6px;
   padding: 2px;
   background: linear-gradient(45deg, #33a765, #0d6efd, #ffc107, #dc3545);
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   -webkit-mask-composite: destination-out;
   mask-composite: exclude;
 }

 .platform-icon img,
 .platform-icon i {
   z-index: 2;
   max-width: 70px;
   font-size: 42px;
   transition: transform 0.3s ease;
 }

 .platform-box h6 {
   margin-top: 18px;
   font-weight: 600;
   color: #222;
 }


 /* footer */
 .social-icon {
   color: #ccc;
   text-decoration: none;
   border: 2px solid #ccc;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
 }

 .social-icon i {
   font-size: 16px;
 }

 .social-icon:hover {
   color: var(--text-primary-hover);
   border-color: var(--text-primary-hover);
 }

 /*product page*/
 .hero-box {
   display: flex;
   align-items: center;
   justify-content: center;
   max-width: 1300px;
   margin: 40px auto;
   padding: 30px;
   gap: 30px;
   flex-wrap: wrap;
 }


 .hero-image-wrapper {
   position: relative;
   width: 250px;
   height: 250px;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .hero-image-wrapper::before,
 .hero-image-wrapper::after {
   content: "";
   position: absolute;
   border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
   z-index: 0;
 }


 .hero-image-wrapper img {
   width: 300px;
   height: auto;
   border-radius: 20px;
   object-fit: cover;
   position: relative;
   z-index: 1;
 }

 .hero-content {
   flex: 1;
   margin-top: 10px;
 }

 .hero-content h1 {

   color: var(--text-dark);
   margin-bottom: 10px;
   text-align: center;
 }

 .hero-content p {
   line-height: 1.6;
   color: #555;
   text-align: center;
 }

 @media (max-width: 992px) {
   .hero-box {
     flex-direction: column;
     padding: 20px;
     gap: 20px;
   }

   .hero-image-wrapper {
     width: 220px;
     height: 220px;
   }

   .hero-image-wrapper::before {
     width: 250px;
     height: 250px;
   }

   .hero-image-wrapper::after {
     width: 210px;
     height: 210px;
   }

   .hero-image-wrapper img {
     width: 180px;
   }
 }

 @media (max-width: 768px) {
   .hero-box {
     margin: 20px auto;
   }

   .hero-image-wrapper {
     width: 200px;
     height: 200px;
   }

   .hero-image-wrapper::before {
     width: 230px;
     height: 230px;
   }

   .hero-image-wrapper::after {
     width: 190px;
     height: 190px;
   }

   .hero-image-wrapper img {
     width: 160px;
   }
 }

 @media (max-width: 480px) {
   .hero-box {
     padding: 15px;
   }

   .hero-image-wrapper {
     width: 180px;
     height: 180px;
   }

   .hero-image-wrapper::before {
     width: 210px;
     height: 210px;
   }

   .hero-image-wrapper::after {
     width: 170px;
     height: 170px;
   }

   .hero-image-wrapper img {
     width: 140px;
   }
 }

 .bg-image {
   background-image: url('../image/background-image/choose-shape.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 70%;
   padding: 40px 20px;
 }

 .content-box {
   background-color: #fff;
   padding: 60px 40px;
   border-radius: 20px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
   text-align: center;
   max-width: 900px;
   margin: 50px auto;
 }

 .content-box h1 {
   font-weight: 500;
   line-height: 1.2;
 }

 .content-box p {
   margin-top: 20px;
   color: #555;
 }

 .content-box a {
   color: #fff;
   margin: 0 5px;
 }

 @media (max-width: 768px) {
   .content-box {
     padding: 40px 20px;
     margin: 30px 15px;
   }

   .content-box h1 {
     font-size: 2.2rem;
   }

   .content-box p {
     font-size: 1rem;
   }

   .bg-image {
     padding: 30px 15px;
     height: auto;
   }
 }

 @media (max-width: 480px) {
   .content-box {
     padding: 30px 15px;
     margin: 20px 10px;
   }

   .content-box h1 {
     font-size: 1.8rem;
   }

   .content-box p {
     font-size: 0.95rem;
   }

   .bg-image {
     padding: 20px 10px;
     height: auto;
   }
 }

 /* 2 */


 .benifit-img {
   width: 500px;
   height: 300px;
 }

 @media (max-width: 991px) {
   .benifit-img {
     width: 100%;
     height: auto;
   }
 }

 @media (max-width: 576px) {
   .benifit-img {
     width: 100%;
     height: auto;
   }
 }

 /* 3 */

 .rotate-180 {
   transform: rotate(180deg);
 }

 .feature-box {
   padding: 30px;
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease-in-out;
   height: 100%;
 }

 .feature-box:hover {
   box-shadow: 0 15px 35px rgba(0, 128, 0, 0.2);
 }

 .icon-circle {
   font-size: 40px;
   color: #28a745;
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background-color: #e9f8f0;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
 }

 /* 4 */

 .erp-section {
   padding: 70px 20px;
   background: linear-gradient(135deg, #eef7ff, #ffffff);
 }

 .erp-title {
   font-weight: 600;
   color: #1d2e4a;
   margin-bottom: 20px;
 }

 .erp-text {
   font-size: 1.05rem;
   color: #34495e;
   line-height: 1.7;
   margin-bottom: 20px;
 }

 .erp-image {
   width: 500px;
   height: 350px;
   border-radius: 20px;
   transition: transform 0.4s ease;
 }

 @media (max-width: 767px) {
   .erp-title {
     font-size: 2rem;
     text-align: center;
   }

   .erp-text {
     text-align: center;
   }

   .erp-image {
     margin-top: 20px;
   }
 }

 @media (max-width: 991px) {
   .erp-image {
     width: 100%;
     height: auto;
   }
 }

 @media (max-width: 576px) {
   .erp-image {
     width: 100%;
     height: auto;
   }
 }

 /* modules */
 .module-section {
   padding: 40px 0;
   background-color: #fff;
 }

 .img-stack {
   position: relative;
   text-align: center;
 }

 .img-stack img:first-child {
   width: 80%;
   height: auto;
 }


 /* 2 */
 .section-heading {
   text-align: center;
   margin-bottom: 2rem;
 }

 .section-heading p {
   margin: 0 auto;
   color: #555;
 }

 .nav-tabs .nav-link {
   border: none;
   font-weight: 500;
   color: #333;
   padding: 0.6rem 1.2rem;
   border-radius: 10px 10px 0 0;
   margin: 0 5px;
   cursor: pointer;
 }

 .service-card {
   position: relative;
   height: 300px;
   border: 1px solid #ccc;
   overflow: hidden;
   background-color: white;
   transition: all 0.3s ease-in-out;
   border-radius: 6px;
 }

 .service-title {
   font-weight: 400;
   padding: 2rem;
   z-index: 2;
   position: relative;
   transition: all 0.3s ease-in-out;
 }

 .blue-panel {
   position: absolute;
   top: 0;
   right: -100%;
   width: 96%;
   height: 97%;
   color: white;
   padding: 20px;
   transition: all 0.4s ease;
   z-index: 3;
   border-radius: 6px;
   margin: 4px 5px 4px 4px;
 }

 .service-card:hover .blue-panel {
   right: 0;
 }

 .service-card:hover .service-title {
   opacity: 0;
 }

 .blue-panel p {
   font-size: 0.95rem;
   margin-bottom: 1rem;
 }

 .blue-panel ul {
   padding-left: 1rem;
 }

 .blue-panel ul li {
   font-size: 0.9rem;
   margin-bottom: 0.4rem;
 }

 .transactions-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1rem;
 }

 .master-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
 }

 .diagram-container {
   position: relative;
   width: 500px;
   margin: auto;
   height: 180px;
 }

 .top-node {
   position: absolute;
   top: 0;
   left: 50%;
   width: 14px;
   height: 14px;
   background: #33a765;
   border-radius: 50%;
   transform: translateX(-50%);
   box-shadow: 0 0 8px rgba(51, 167, 101, 0.6);
 }

 .connector {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 80px;
 }

 .diagram-box {
   position: absolute;
   top: 90px;
   width: 180px;
   padding: 10px;
   border: 2px solid #33a765;
   background: #fff;
   text-align: center;
   font-weight: 600;
   border-radius: 6px;
 }

 .diagram-box.active {
   background: #33a765;
   border-color: #007a40;
   color: #fff;
 }


 .left-box {
   left: -40px;
 }

 .right-box {
   right: -40px;
 }


 @media (max-width: 768px) {

   .diagram-container .top-node,
   .diagram-container .connector {
     display: none;
   }

   .diagram-container {
     width: 100%;
     height: auto;
   }

   .diagram-box {
     position: static;
     width: 180px;
     margin: 10px auto;
   }
 }

 @media (max-width: 992px) {
   .master-grid {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     gap: 20px;
   }

   .master-grid .service-card {
     flex: 0 0 80%;
     scroll-snap-align: start;
   }
 }



 @media (max-width: 768px) {

   .diagram-container .top-node,
   .diagram-container .connector {
     display: none;
   }

   .diagram-container {
     width: 100%;
     height: auto;
     display: flex;
     justify-content: center;
     background: #f5f5f5;
     border-radius: 50px;
     padding: 5px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .diagram-box {
     position: static;
     flex: 1;
     margin: 0;
     width: auto;
     padding: 12px 20px;
     text-align: center;
     border-radius: 50px;
     border: none;
     background: transparent;
     font-weight: 600;
     color: #444;
     transition: all 0.3s ease;
     cursor: pointer;
   }

   .diagram-box.active {
     background: #33a765;
     color: #fff;
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
   }
 }


 @media (max-width: 768px) {

   .diagram-container {
     margin-bottom: 2rem;
   }

   .master-grid,
   .transactions-grid {
     margin-top: 1rem;
     gap: 1rem;
   }
 }

 /* slider */

 @media (max-width: 992px) {

   .master-grid,
   .transactions-grid {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     gap: 20px;
     padding-bottom: 20px;
   }

   .master-grid .service-card,
   .transactions-grid .service-card {
     flex: 0 0 85%;
     scroll-snap-align: center;
     margin-right: 10px;
     position: relative;
   }

   .service-card .blue-panel {
     right: 0 !important;
     opacity: 1 !important;
   }

   .service-card .service-title {
     display: none;
   }
 }


 @media (max-width: 992px) {

   .master-grid,
   .transactions-grid {
     display: flex;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     gap: 20px;
     padding: 0 10px 20px;
   }

   .master-grid .service-card,
   .transactions-grid .service-card {
     flex: 0 0 80%;
     scroll-snap-align: start;
     margin-right: 10px;
   }
 }

 @media (max-width: 768px) {
   .d-flex.justify-content-center.align-items-center.mb-2 {
     flex-direction: column;
     text-align: center;
   }

   .d-flex.justify-content-center.align-items-center.mb-2 i {
     margin-right: 0 !important;
     margin-bottom: 8px;
   }
 }


 /* 3 */

 .vendor-card {
   position: relative;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
   padding: 1.2rem;
   transition: 0.3s;
   overflow: hidden;
   background: white;
 }

 .vendor-title {
   z-index: 2;
   position: relative;
   transition: all 0.3s ease-in-out;
 }

 .vendor-card:hover .vendor-title {
   opacity: 0;
 }

 .red-panel {
   position: absolute;
   top: -100%;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 1.2rem;
   color: white;
   border-radius: 6px;
   z-index: 3;
   transition: all 0.4s ease;

   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1.4;
 }

 .vendor-card:hover .red-panel {
   top: 0;
 }

 .red-panel h5 {
   font-size: 1.2rem;
   margin-bottom: 1rem;
 }

 .red-panel p {
   font-size: 0.95rem;
   margin-bottom: 1rem;
 }

 .vendor-img {
   border-radius: 20px;
   object-fit: cover;
   height: auto;
   width: 80%;
 }


 .subtext {
   color: #666;
   font-size: 0.95rem;
 }


 @media (max-width: 768px) {
   .vendor-card .vendor-title {
     opacity: 0;
   }

   .vendor-card .red-panel {
     top: 0;
   }
 }

 @media (max-width: 992px) {
   .vendor-img {
     width: 90%;
   }
 }

 @media (max-width: 768px) {
   .vendor-img {
     width: 100%;
     border-radius: 15px;
   }
 }

 @media (max-width: 480px) {
   .vendor-img {
     width: 100%;
     border-radius: 10px;
   }
 }

 /* 4 */
 .custom-list {
   padding-left: 1.2rem;
   margin-bottom: 1.5rem;
 }

 .custom-list li {
   position: relative;
   padding-left: 1.5rem;
   margin-bottom: 12px;
   list-style: none;
 }

 .custom-list li::before {
   content: '•';
   position: absolute;
   left: 0;
   top: 3px;
   color: #000;
   font-size: 1.2rem;
   line-height: 1;
 }

 .choose-area {
   position: relative;
   z-index: 1;
 }


 .choose-area::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   background-image: url(../image/highliter/shape-4.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   width: 100%;
   height: 100%;
   opacity: 0.08;
   z-index: -1;
 }

 /* 5 */
 .report-item {
   background: linear-gradient(135deg, #ffffff, #f9fafc);
   border: 1px solid #e5e9f0;
   border-radius: 6px;
   padding: 20px;
   display: flex;
   align-items: center;
   gap: 15px;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
   height: 100%;
 }

 .report-item:hover {
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
 }

 .report-icon {
   flex-shrink: 0;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   color: #fff;
 }

 .bg-daybook {
   background: linear-gradient(135deg, #4facfe, #00f2fe);
 }

 .bg-ledger {
   background: linear-gradient(135deg, #667eea, #764ba2);
 }

 .bg-purchase {
   background: linear-gradient(135deg, #43cea2, #185a9d);
 }

 .bg-sales {
   background: linear-gradient(135deg, #ff9966, #ff5e62);
 }

 .bg-receivable {
   background: linear-gradient(135deg, #f7971e, #ffd200);
 }

 .bg-stock {
   background: linear-gradient(135deg, #11998e, #38ef7d);
 }

 .bg-trial {
   background: linear-gradient(135deg, #b24592, #f15f79);
 }

 .bg-trading {
   background: linear-gradient(135deg, #f83600, #f9d423);
 }

 .bg-pl {
   background: linear-gradient(135deg, #1e3c72, #2a5298);
 }

 .bg-balance {
   background: linear-gradient(135deg, #36d1dc, #5b86e5);
 }

 .report-title {
   font-weight: 600;
   margin: 0 0 4px;
 }

 .report-desc {
   color: #555;
   margin: 0;
 }

 .section-title {
   font-weight: bold;
   margin-bottom: 10px;
 }

 .section-subtitle {
   color: #777;
   margin-bottom: 35px;
 }

 /* 6 */
 .pm-timeline {
   max-width: 1024px;
   position: relative;
 }

 .pm-step {
   position: relative;
   margin-bottom: 3rem;
 }

 .pm-step:last-child {
   margin-bottom: 0;
 }


 .pm-node-wrap {
   position: relative;
   height: 100%;
   min-height: 120px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .pm-node {
   width: 18px;
   height: 18px;
   border-radius: 50%;
   display: inline-block;
   background: #111827;
   box-shadow: 0 0 0 6px rgba(17, 24, 39, .08), 0 8px 20px rgba(0, 0, 0, .12);
 }

 .pm-connector {
   position: absolute;
   width: 2px;
   height: 80%;
   background: repeating-linear-gradient(to bottom,
       rgba(17, 24, 39, .25) 0 10px,
       rgba(17, 24, 39, .05) 10px 20px);
   top: calc(50% + 16px);
 }

 .gradient-primary {
   background: linear-gradient(to top, #3f89f6, #9bc4fb);
 }

 .gradient-red {
   background: linear-gradient(to top, #e8482e, #f59a88);
 }

 .gradient-yellow {
   background: linear-gradient(to top, #fcc34f, #ffeaa3);
 }

 .gradient-green {
   background: linear-gradient(to top, #33a765, #8ddbb0);
 }

 .gradient-dark {
   background: linear-gradient(to top, #1a1a1a, #2d2d2d, #4a4a4a);
 }


 .pm-card {
   border: 1px solid rgba(17, 24, 39, .05);
   border-radius: 1.25rem;
   padding: 1.5rem;
   box-shadow: 0 6px 30px rgba(17, 24, 39, .06);
   transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
 }

 .pm-step-head {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-bottom: .5rem;
 }

 .pm-step-index {
   --size: 42px;
   width: var(--size);
   height: var(--size);
   display: inline-grid;
   place-items: center;
   border-radius: 12px;
   background: #111827;
   color: #fff;
   font-weight: 700;
   letter-spacing: .03em;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .18);
 }


 .pm-bullets {
   padding-left: 0;
   list-style: none;
   margin: 0;
 }

 .pm-bullets li {
   position: relative;
   padding-left: 28px;
   margin: .4rem 0;
 }

 .pm-bullets li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .45rem;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #111827;
   box-shadow: 0 0 0 6px rgba(17, 24, 39, .08);
 }


 @media (max-width: 991.98px) {

   .pm-node-wrap {
     padding: 1rem 0;
   }

   .pm-card {
     margin-bottom: 1rem;
   }
 }

 @media (max-width: 991.98px) {
   .pm-connector {
     display: block;
     position: absolute;
     top: calc(50% + 16px);
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: calc(100% - 40px);
     background: repeating-linear-gradient(to bottom,
         rgba(17, 24, 39, .25) 0 10px,
         rgba(17, 24, 39, .05) 10px 20px);
   }

   .pm-node-wrap {
     padding: 1rem 0;
     position: relative;
   }
 }


 .feature-icon {
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: linear-gradient(135deg, #e6f0ff, #f9fbff);
   font-size: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
   flex-shrink: 0;
 }

 .microcopy {
   color: #555;
 }

 .feature-card {
   transition: all 0.3s ease;
   padding: 12px;
   border-radius: 12px;
   height: 100%;
   background: #fff;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .feature-card:hover {
   transform: translateY(-4px);
   background: #fdfdfd;
 }

 .dashed-line {
   border-top: 1px dashed rgba(0, 0, 0, 0.25);
   margin: 1.5rem 0 1rem;
 }

 .sub-title {
   font-weight: 600;
   margin-bottom: 0.5rem;
   color: #555555;
   position: relative;
   display: inline-block;
 }

 section {
   overflow-x: hidden;
 }




 /* hr module */

 .feature {
   display: flex;
   gap: 1rem;
   padding: .5rem 0;
   border-bottom: 1px dashed #e5e7eb;
 }

 .feature:last-child {
   border-bottom: 0;
 }

 .icon-bubble {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #fff;
 }


 @media (max-width: 576px) {
   .icon-bubble {
     width: 36px;
     height: 36px;
     font-size: 14px;
     line-height: 1;
     flex-shrink: 0;
   }

   .icon-bubble i {
     font-size: 14px;
     line-height: 1;
   }
 }


 /* 2 */
 .master-hero {
   padding: 20px;
 }

 .master-card {
   border: 1px solid #e7eef6;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 6px 18px rgba(20, 40, 80, 0.04);
   transition: transform .18s ease, box-shadow .18s ease;
 }

 .master-icon {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #eef6ff;
   color: #0b63d6;
   font-size: 1.4rem;
 }

 .feature-list li {
   margin-bottom: .45rem;
 }

 /* about-us */
 /* 1 */
 .core-feature {
   padding: 30px;
   background: #fff;
   border-radius: 20px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease-in-out;
   height: 100%;
 }

 .core-feature:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 35px rgba(232, 72, 46, 0.2);
 }

 .core-icon-circle {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background-color: #fde0dc;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
 }

 /* 2 */
 .timeline {
   position: relative;
   margin-left: 30px;
   border-left: 3px solid transparent;
   padding-left: 30px;
 }

 .timeline-step {
   position: relative;
   margin-bottom: 60px;
   padding-left: 20px;
 }

 .timeline-step::before {
   content: "";
   position: absolute;
   left: -33px;
   top: 0;
   width: 3px;
   height: 100%;
   background-color: #ccc;
   z-index: 0;
 }

 .timeline-step:first-child::before {
   background-color: var(--text-red);
 }

 .timeline-step:nth-child(2)::before {
   background-color: var(--text-yellow);
 }

 .timeline-step:nth-child(3)::before {
   background-color: var(--text-primary);
 }

 .timeline-step:nth-child(4)::before {
   background-color: var(--text-green);
 }
 .timeline-step:nth-child(5)::before {
   background-color: var(--text-red);
 }

 .timeline-step:nth-child(6)::before {
   background-color: var(--text-yellow);
 }

 .timeline-icon {
   position: absolute;
   left: -5px;
   top: 0;
   width: 40px;
   height: 40px;
   font-weight: bold;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .timeline-content {
   background: #fff;
   padding: 15px 20px;
   border-radius: 8px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
 }

 @media (max-width: 768px) {
   .timeline {
     margin-left: 0;
     padding-left: 0;
     border-left: none;
   }

   .timeline-step {
     margin-bottom: 40px;
     padding-left: 0;
     text-align: center;
   }

   .timeline-step::before {
     display: none;
   }

   .timeline-icon {
     position: static;
     margin: 0 auto 15px;
   }

   .timeline-content {
     margin: 0 auto;
     max-width: 500px;
     text-align: center;
   }
 }

 /* faq */

 .faq-section {
   background: linear-gradient(135deg, #eef7ff, #ffffff);
 }

 .faq-contact-section {
   background-color: #fff;
 }

 .section-subtitle {
   position: relative;
   display: inline-block;
 }

 .section-subtitle .red-line {
   content: '';
   display: inline-block;
   width: 40px;
   height: 2px;
   background: red;
   position: relative;
   top: -4px;
   margin-right: 8px;
 }

 .custom-input {
   border: none;
   border-radius: 10px;
   padding: 15px 20px;
   background: #fff;
 }

 .custom-input::placeholder {
   color: #888;
 }

 textarea.custom-input {
   resize: none;
 }

 /* error page */

 .error-container {
   text-align: center;
 }

 .error-container img {
   width: 300px;
 }


 /* contact us */

 .contact-wrapper {
   padding: 0px 20px 50px 20px;
 }

 .contact-section {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
 }

 .info-card {
   background: #fff;
   border-radius: 6px;
   padding: 30px 20px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
   text-align: center;
   width: 310px;
   transition: 0.3s;
 }

 .icon-circle {
   width: 80px;
   height: 80px;
   background-color: #28a745;
   border-radius: 50%;
   display: flex;
   align-items: center;
   margin: 0 auto 15px;
   color: #fff;
 }

 .info-title {
   font-weight: 600;
   font-size: 1.1rem;
   margin-bottom: 8px;
   color: #222;
 }

 .info-desc {
   color: #555;
   font-size: 0.95rem;
 }


 .location-wrapper {
   display: flex;
   gap: 30px;
   flex-wrap: wrap;
   align-items: stretch;
   justify-content: center;
   padding: 0px 20px 50px 20px;
   max-width: 1350px;
   margin: 0 auto;
 }

 .location-details {
   flex: 1;
   min-width: 300px;
   text-align: center;
   background: #fff;
   border-radius: 6px;
   padding: 70px 25px;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
 }

 .location-details p {
   margin: 5px 0;
   color: #444;
 }

 .location-map {
   flex: 2;
   min-width: 350px;
   border-radius: 6px;
   overflow: hidden;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
 }

 .location-map iframe {
   width: 100%;
   height: 100%;
   min-height: 300px;
   border: none;
 }

 /* blog */

 .blog-card {
   border: 0;
   transform: translateY(-6px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
 }

 .blog-img {
   object-fit: cover;
   height: 220px;
   width: 100%;
   border-radius: .5rem .5rem 0 0;
 }

 .meta-row {
   color: #6c757d;
 }

 .date-badge {
   font-size: .8rem;
 }

 .card-body {
   padding: 1.25rem;
 }

 @media (min-width: 992px) {
   .blog-img {
     height: 200px;
   }
 }

 .card-text {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 /* blog-detail */
 .content-heading::after {
   content: "";
   display: block;
   width: 50px;
   height: 3px;
   background: #0d6efd;
   margin-top: 6px;
   border-radius: 2px;
 }

 blockquote {
   font-style: italic;
   background: #f1f7ff;
   border-left: 5px solid #0d6efd;
   padding: 15px 20px;
   margin: 2rem 0;
   border-radius: 10px;
 }

 /* icons */
 .share-toggle {
   display: none;
 }


 .share-bar {
   position: fixed;
   top: 40%;
   left: 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 100;
 }


 .main-btn {
   width: 15px;
   height: 100px;
   background-color: var(--text-primary);
   cursor: pointer;
   border-radius: 8px;
   position: absolute;
   margin-left: -73px;
   transform: translateX(-80px);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
   top: 20%;
 }

 .main-btn::before {
   content: "";
   position: absolute;
   top: 8px;
   bottom: 8px;
   left: 65%;
   width: 1px;
   background-color: #fff;
   border-radius: 2px;
   transform: translateX(-50%);
 }


 .close-btn {
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 6px 0;
   color: var(--text-red);
   font-size: 20px;
   background-color: #fff;
   cursor: pointer;
   opacity: 0;
   pointer-events: none;
   transform: translateX(-80px);
   transition: transform 0.3s ease, opacity 0.3s ease;
   text-decoration: none;
   border: 2px solid #000;
   border-radius: 6px;
 }


 .share-bar a:not(.main-btn):not(.close-btn) {
   width: 48px;
   height: 48px;
   border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 6px 0;
   color: #fff;
   font-size: 20px;
   transition: transform 0.3s ease, opacity 0.3s ease;
   text-decoration: none;
   transform: translateX(-80px);
   opacity: 0;
   pointer-events: none;
 }


 .share-toggle:checked~.close-btn,
 .share-toggle:checked~a:not(.main-btn):not(.close-btn) {
   transform: translateX(0);
   opacity: 1;
   pointer-events: auto;
   transition-delay: 0s;
 }

 .share-toggle:checked~.main-btn {
   transform: translateX(-80px);
   opacity: 0;
   transition: transform 0.3s ease, opacity 0.3s ease;
   transition-delay: 0s;
 }


 .share-toggle:not(:checked)~.main-btn {
   transform: translateX(0);
   opacity: 1;
   transition: transform 0.3s ease, opacity 0.3s ease;
   transition-delay: 0.3s;
 }


 @media (min-width: 769px) {

   .share-bar .main-btn,
   .share-bar .close-btn {
     display: none;
   }

   .share-bar a:not(.main-btn):not(.close-btn) {
     display: flex;
     transform: translateX(0);
     opacity: 1;
     pointer-events: auto;
   }
 }



 html {
   scroll-behavior: smooth;
 }

 .back-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   text-decoration: none;
   border-radius: 6px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
   z-index: 1000;
 }

 /* tabination */

 #industryTabs {
   gap: 0.5rem;
 }

 /* @media (max-width: 768px) {
   #industryTabs {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
     justify-content: center;
   }

   #industryTabs .nav-item {
     flex: 1 1 auto;
   }

   #industryTabs .nav-link {
     width: 100%;
     text-align: center;
     background: #f8f9fa;
     border-radius: 10px;
     padding: 1rem;
     font-size: 12px;
     font-weight: 600;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
   }

   #industryTabs .nav-link i {
     display: block;
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
   }

   #industryTabs .nav-link.active {
     background-color: var(--text-primary);
     color: #fff;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     transform: scale(1.05);
   }
 } */


 /* tabination */
 #retail-tab.active,
 #electronics-tab.active,
 #wholesalers-tab.active,
 #pharma-fmcg-tab.active,
 #production-tab.active,
 #card-management-tab.active,
 #hospitals-tab.active {
   background-color: rgba(232, 72, 46, 0.66) !important;
   --bs-bg-opacity: 1;
 }

 #manufacturing-tab.active,
 #autoparts-tab.active,
 #manufacturers-tab.active,
 #electricals-tab.active,
 #consumption-tab.active,
 #Education-tab.active {
   background-color: rgba(252, 195, 79, 0.66) !important;
   --bs-bg-opacity: 1;
 }

 #construction-tab.active,
 #retailers-tab.active,
 #bom-tab.active,
 #Manufacturing-tab.active,
 #retailchains-tab.active {
   background-color: rgba(63, 137, 246, 0.66) !important;
   --bs-bg-opacity: 1;
 }

 #pharma-tab.active,
 #service-tab.active,
 #production-planning-tab.active,
 #realestate-tab.active {
   background-color: rgba(51, 167, 101, 0.66) !important;
   --bs-bg-opacity: 1;
 }

 .policy-container {
   max-width: 850px;
   margin: 0 auto;
   padding: 40px 20px;
   line-height: 1.6;
 }

  @media screen and (max-width:992px) {
   #industryTabs {
     flex-wrap: nowrap !important;
     justify-content: start !important;
     white-space: nowrap !important;
   }

   #industryTabs::-webkit-scrollbar {
     display: contents;
   }

   .scroll {
     overflow-x: auto;
   }
 }