/* ==========================================================================
   MAXUS TECHNOLOGIES — STYLESHEET
   Table of Contents:
   1. CSS Variables & Base
   2. Utilities & Buttons
   3. Top Bar
   4. Navbar
   5. Hero Section
   6. Client Logos
   7. Statistics Section
   8. Services Section
   9. Growth Strategy Section
   10. Testimonials Section
   11. FAQ Section
   12. Newsletter Section
   13. Footer
   14. Back to Top
   15. Media Queries
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. CSS VARIABLES & BASE                                                */
/* ---------------------------------------------------------------------- */
:root {

    --navy:#0b2653;
    --navy-2:#123a75;
    --blue:#1671d9;
    --blue-light:#e9f2ff;
    --orange:#f7941d;
    --orange-light:#fdece0;
    --cream:#fbf6ef;
    --text:#3b4658;
    --text-light:#6b7688;
    --white:#ffffff;
    --radius:14px;



  --color-primary: #1877C4;
  --color-primary-dark: #145E9C;
  --color-navy: #135FA0;
  --color-navy-deep: #0E4C82;
  --color-accent-orange: #F0924B;
  --color-accent-orange-light: #FBD9B9;
  --color-cream: #FBF4E7;
  --color-bg-light-blue: #EAF4FC;
  --color-bg-blue-tint: #EFF6FC;
  --color-text-dark: #17233D;
  --color-text-muted: #5B6B85;
  --color-text-light: #FFFFFF;
  --color-border: #E7ECF3;
  --color-white: #FFFFFF;
  --color-star: #F5B740;
  --color-success: #3CB878;
  --color-danger: #F0645E;

  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Spacing */
  --section-padding: 90px;
  --section-padding-sm: 56px;

  /* Radius & Shadow */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;
  --shadow-sm: 0 4px 14px rgba(23, 35, 61, 0.06);
  --shadow-md: 0 10px 30px rgba(23, 35, 61, 0.10);
  --shadow-lg: 0 20px 50px rgba(23, 35, 61, 0.14);

  /* Transitions */
  --transition-base: all 0.3s ease;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
   font-family: "Instrument Sans", sans-serif !important;
  color: var(--color-text-dark);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--color-white);
  /* overflow-x removed: html already has overflow-x: clip (custom.css) for
     horizontal-scroll prevention. Setting it on body too made body a
     "scroll ancestor" candidate with no real scrollport, which silently
     breaks position: sticky for descendants (e.g. the PayMax sidebar). */
}

h1{
     font-family: "Caudex", serif;
}
h2, h3, h4, h5, h6 {
   font-family: "Instrument Sans", sans-serif;
  color: var(--color-text-dark);
  margin: 0;
}

p {
  margin: 0;

  font-family: "Instrument Sans", sans-serif;

}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

img {
  max-width: 100%;
  display: block;
}

button {
      font-family: "Instrument Sans", sans-serif;
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-accent-orange);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------- */
/* 2. UTILITIES & BUTTONS                                                 */
/* ---------------------------------------------------------------------- */
.text-underline-accent {
  position: relative;
  display: inline-block;
}




#home .text-underline-accent::after {

    width: 120%;
    background-image: url(../wp-media/Line-78.svg) !important;
}


.text-underline-accent::after {
content: "";
    position: absolute;
    bottom: -12px;
    width: 121%;
       left: -3%;
    height: 20px;
    /* background-color: var(--color-primary); */
    background: url(../wp-media/nameshadow-home.svg);
    border-radius: 2px;
    background-repeat: no-repeat;
}

.btn-primary-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
    padding: 12px 24px;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.btn-primary-pill:hover,
.btn-primary-pill:focus-visible {
  background-color: var(--orange-btn);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.section-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
}

.section-heading-row--center {
  align-items: flex-start;
}

.section-heading {
  font-size: 1.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.heading-bar {
  display: inline-block;
  width: 5px;
  align-self: stretch;
  min-height: 30px;
  background-color: var(--color-accent-orange);
  border-radius: 3px;
  flex-shrink: 0;
}

.section-subtext {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-left: 17px;
}

.section-nav-arrows {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.arrow-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-white);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.arrow-btn:hover,
.arrow-btn:focus-visible {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------- */
/* 3. TOP BAR                                                             */
/* ---------------------------------------------------------------------- */

.top-bar1 {
  background-color: var(--color-primary);

}
.top-bar1 {
/*  background-color: var(--color-primary);*/
  color: var(--color-white);
  font-size: 0.85rem;
  padding: 8px 0;
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.top-bar__tagline {
  font-weight: 500;
  letter-spacing: 0.2px;
  font-size: 14px;
}

.top-bar__contact {
  display: flex;
  align-items: center;
  gap: 26px;
}

.top-bar__contact a {
  color: var(--color-white);
  opacity: 0.95;
}

.top-bar__contact a:hover {
  opacity: 1;
  text-decoration: underline;
}

.top-bar__contact i {
  margin-right: 4px;
}


/* Sits in normal flow right under .top-bar1 until scrolled past, then
   sticks to the top of the viewport — no fixed-position overlap, no
   padding-top hacks needed on the content below. */
.top-bar {
  position: sticky;
  top: 0;
    z-index: 1;

  background: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* After scrolling */
.top-bar.scrolled {
  background: #fff;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------------------- */
/* 4. NAVBAR                                                              */
/* ---------------------------------------------------------------------- */
.site-navbar {
  background-color: var(--color-white);
  padding: 16px 0;
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 100;
}

.brand-logo {
  height: 44px;
  width: auto;
}

.main-nav {
  gap: 6px;
}

.main-nav .nav-link {
  color: var(--color-text-dark);
  font-weight: 500;
  font-size: 0.98rem;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
}

.main-nav .nav-link:hover,
.main-nav .nav-link.active,
.main-nav .nav-link:focus-visible {
  color: var(--color-primary);
}

.main-nav .dropdown-menu {
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-sm);
  padding: 10px 0;
  margin-top: 10px;
}

.main-nav .dropdown-item {
  padding: 10px 20px;
  font-size: 0.92rem;
  color: var(--color-text-dark);
}

.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus {
  background-color: var(--color-bg-light-blue);
  color: var(--color-primary);
}

.login-btn {
  margin-left: 12px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* 5. HERO SECTION                                                        */
/* ---------------------------------------------------------------------- */
#home1 {
  background-image: url(../wp-media/hero-bg.png);
  background-repeat:no-repeat;
/*  background-position: bottom;*/
/*  background: linear-gradient(180deg, var(--color-cream) 0%, #F7EFE1 55%, var(--color-white) 100%);*/
    padding: 70px 0 0px;
/*  text-align: center;*/
/*  position: relative;
  overflow: hidden;    */
  background-size: cover;
}

.hero-content {
  max-width: 900px;
  margin: 0 auto;    
/*  margin-top: 5%;*/
}

.hero-title {
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1.25;
  position: relative;
}

.hero-title__decor {
  position: relative;
  display: inline-block;
  padding-top: 14px;
}

.decor-swirl {
  position: absolute;
  top: -20px;
  right: -46px;
  width: 40px;
  height: auto;
}

.hero-desc {
/*  max-width: 620px;*/
  color: #353535;
  font-size: 1.05rem;
  margin-top: 12px;
}

/*.hero-cta {
  margin-top: 30px;
}*/

.hero-dashboard-wrap {
  position: relative;
  margin-top: 56px;
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.hero-dashboard-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
/*  box-shadow: var(--shadow-lg);*/
}

.hero-callout {
position: absolute;
        left: -19%;
    top: 21%;
    background-color: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 16px 20px;
    max-width: 220px;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    z-index: 5;
    font-size: 30px;
}

.hero-callout p{
   
    font-size: 12px;

}

.hero-callout::after {
  content: "";
  position: absolute;
  bottom: -121%;
  left: 30px;
    width: 119px;
  height: 114px;
background: url(https://maxus.co.in/wp-media/banarrow.svg);
}

/* ---------------------------------------------------------------------- */
/* 6. CLIENT LOGOS                                                        */
/* ---------------------------------------------------------------------- */
.client-logos {
    padding: 4% 0%;
  background-color: var(--color-white);
}

.client-logos__track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.client-logo-box {
  flex: 1 1 150px;
  max-width: 190px;
  height: 76px;
  background-color: #F2F4F7;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
}

.client-logo-box img {
/*  max-height: 34px;
  width: auto;
  object-fit: contain;*/
  filter: grayscale(0%);
}

/* ---------------------------------------------------------------------- */
/* 7. STATISTICS SECTION                                                  */
/* ---------------------------------------------------------------------- */
.stats-section {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: var(--color-white);
  padding: var(--section-padding) 0;
}

.stat-item {
  position: relative;
}

.stat-number {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.stat-sub {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}

.stat-avatars {
  display: flex;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

.avatar-img {
/*  width: 34px;
  height: 34px;
  border-radius: 50%;*/
  border: 2px solid var(--color-navy);
  object-fit: cover;
  margin-left: -10px;
}

.avatar-img:first-child {
  margin-left: 0;
}

.stat-dotted-line {
  flex: 1;
  min-width: 40px;
  height: 0;
  border-top: 2px dotted rgba(255, 255, 255, 0.4);
  margin: 0 10px;
}

.thumb-img {
  width: 60px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

/* ---------------------------------------------------------------------- */
/* 8. SERVICES SECTION                                                    */
/* ---------------------------------------------------------------------- */
.services-section {
  padding: var(--section-padding) 0;
  background-color: var(--color-white);
}

.services-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.services-track::-webkit-scrollbar {
  height: 6px;
}

.services-track::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 4px;
}

.service-card {
  scroll-snap-align: start;
  flex: 0 0 320px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-light-blue);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 20px;
  transition: var(--transition-base);
}

.service-card:hover .service-icon {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.service-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.service-desc {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 18px;
}

.learn-more-link {
  color: var(--color-accent-orange);
  font-weight: 500;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.learn-more-link:hover {
  color: var(--color-primary);
  gap: 8px;
}

/* ---------------------------------------------------------------------- */
/* 9. GROWTH STRATEGY SECTION                                             */
/* ---------------------------------------------------------------------- */
.growth-section {
  padding: var(--section-padding) 0;
  background-color: var(--color-bg-blue-tint);
}

.growth-accordion {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.growth-item {
  border-bottom: 1px solid var(--color-border);
}

.growth-item:last-child {
  border-bottom: none;
}

.growth-item__header {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 26px 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: var(--transition-base);
}

.growth-item__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-dark);
}

.growth-item.is-active .growth-item__header {
  background-color: var(--color-bg-light-blue);
}

.growth-item.is-active .growth-item__title {
  color: var(--color-primary);
  position: relative;
}

.growth-item.is-active .growth-item__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 46px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.growth-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.growth-item.is-active .growth-item__body {
  max-height: 600px;
}

.growth-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 0 34px 30px;
}

.growth-item__desc {
  color: var(--color-text-muted);
  font-size: 0.96rem;
  flex: 1 1 60%;
}

.growth-item__img {
  flex: 0 0 260px;
  width: 260px;
  height: 90px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.growth-item__row--active {
  align-items: flex-start;
}

.growth-item__img--large {
  flex: 0 0 320px;
  width: 320px;
  height: 320px;
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------- */
/* 10. TESTIMONIALS SECTION                                               */
/* ---------------------------------------------------------------------- */
.testimonials-section {
  padding: var(--section-padding) 0;
  background-color: var(--color-bg-light-blue);
}

.testimonial-card {
  position: relative;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 34px 32px;
  height: 100%;
/*  box-shadow: var(--shadow-sm);*/
  transition: var(--transition-base);
}

.testimonial-card:hover {
/*  box-shadow: var(--shadow-md);*/
  transform: translateY(-4px);
}

.testimonial-quote-icon {
  position: absolute;
  top: 26px;
  right: 30px;
  font-size: 2rem;
  color: var(--color-accent-orange-light);
}

.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-name {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 2px;
}

.testimonial-role {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.testimonial-text {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
}

.testimonial-stars {
  color: var(--color-star);
  font-size: 0.95rem;
  letter-spacing: 2px;
}

/* ---------------------------------------------------------------------- */
/* 11. FAQ SECTION                                                        */
/* ---------------------------------------------------------------------- */
.faq-section {
  padding: var(--section-padding) 0;
  background-color: var(--color-white);
}

.faq-intro {
  color: var(--color-text-muted);
  margin: 20px 0 28px;
  max-width: 480px;
}

.faq-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
}

.faq-accordion .accordion-item:first-of-type,
.faq-accordion .accordion-item:last-of-type {
  border-radius: 0;
}

.faq-accordion .accordion-button {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text-dark);
  background-color: transparent;
  box-shadow: none;
  padding: 22px 4px;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--color-primary);
  background-color: transparent;
  box-shadow: none;
}

.faq-accordion .accordion-button:focus {
  box-shadow: none;
/*  outline: 3px solid var(--color-accent-orange);*/
  outline-offset: -3px;
}

.faq-accordion .accordion-button::after {
  background-image: none;
  font-family: "bootstrap-icons";
  content: "\F64D"; /* plus icon */
  font-size: 1.1rem;
  color: var(--color-primary);
  transition: var(--transition-base);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
/*  content: "\F2ea";*/
   /* dash icon */
  transform: none;
}

.faq-accordion .accordion-body {
  padding: 0 4px 22px;
  color: var(--color-text-muted);
  font-size: 0.94rem;
}

/* ---------------------------------------------------------------------- */
/* 12. NEWSLETTER SECTION                                                 */
/* ---------------------------------------------------------------------- */
.newsletter-section {
  padding: 0 0 var(--section-padding);
  background-color: var(--color-white);
}

.newsletter-box {
  background: linear-gradient(135deg, var(--color-accent-orange-light) 0%, #FCE3C7 100%);
  border-radius: var(--radius-lg);
  padding: 50px 60px;
/*  display: flex;*/
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.newsletter-heading {
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 480px;
}

.newsletter-form {
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 6px;
  box-shadow: var(--shadow-sm);
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
}

.newsletter-input {
  border: none;
  background: transparent;
  padding: 12px 20px;
  flex: 1;
  font-size: 0.92rem;
  outline: none;
  min-width: 0;
}

.newsletter-btn {
  background-color: var(--color-accent-orange);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  font-weight: 500;
  white-space: nowrap;
  transition: var(--transition-base);
}

.newsletter-btn:hover {
  background-color: #DB7E36;
}

/* ---------------------------------------------------------------------- */
/* 13. FOOTER                                                             */
/* ---------------------------------------------------------------------- */
.site-footer {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
  color: rgba(255, 255, 255, 0.85);
  padding-top: 60px;
}

.footer-top {
  padding-bottom: 40px;
}

.footer-brand img {
  height: 44px;
  width: auto;
  margin-bottom: 16px;
}

.footer-about {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 18px;
  max-width: 260px;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-base);
}

.footer-socials a:hover {
  background-color: var(--color-accent-orange);
}

.footer-heading {
  color: var(--color-white);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links a i {
  font-size: 0.75rem;
  color: var(--color-accent-orange);
}

.footer-links a:hover {
  color: var(--color-white);
  padding-left: 4px;
}

.footer-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.footer-contact-list a {
  color: rgba(255, 255, 255, 0.75);
}

.footer-contact-list a:hover {
  color: var(--color-white);
}

.footer-contact-list i {
  color: var(--color-accent-orange);
  margin-top: 3px;
  flex-shrink: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 0;
  margin-top: 20px;
}

.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom__inner a {
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom__inner a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* 14. BACK TO TOP                                                        */
/* ---------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition-base);
  z-index: 999;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------- */
/* 15. MEDIA QUERIES                                                      */
/* ---------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  :root {
    --section-padding: var(--section-padding-sm);
  }

  .top-bar__inner {
    justify-content: center;
    text-align: center;
  }

  .main-nav {
    margin: 16px 0;
    gap: 0;
  }

  .main-nav .nav-link {
    padding: 10px 4px;
  }

  .login-btn {
    margin-left: 0;
    align-self: flex-start;
  }

  .hero-title {
    font-size: 2.3rem;
  }

  .hero-callout {
    display: none;
  }

  .section-heading-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-nav-arrows {
    align-self: flex-end;
  }

  .growth-item__row {
    flex-direction: column;
    align-items: flex-start;
  }

  .growth-item__img,
  .growth-item__img--large {
    width: 100%;
    flex: none;
  }

  .newsletter-box {
    padding: 40px 30px;
    text-align: center;
    justify-content: center;
  }

  .newsletter-heading {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .hero-title {
    font-size: 1.9rem;
  }

  .decor-swirl {
    display: none;
  }

  .hero-desc {
    font-size: 0.95rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .stats-row {
    row-gap: 34px !important;
  }

  .service-card {
    flex: 0 0 82vw;
  }

  .footer-bottom__inner {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  .top-bar__contact {
    gap: 14px;
    font-size: 0.78rem;
  }

  .hero-section {
    padding: 50px 0 40px;
  }

  .hero-title {
    font-size: 1.55rem;
  }

  .section-heading {
    font-size: 1.5rem;
  }

  .newsletter-form {
    flex-direction: column;
    border-radius: var(--radius-md);
    padding: 10px;
  }

  .newsletter-input {
    width: 100%;
    padding: 10px 12px;
    text-align: center;
  }

  .newsletter-btn {
    width: 100%;
    margin-top: 8px;
  }
}
/*counter*/
 :root{
    --blue-deep:#0a4f8c;
    --blue-mid:#0f6fb8;
    --blue-light:#2f93d6;
    --line:rgba(255,255,255,0.55);
    --white:#ffffff;
    --white-70:rgba(255,255,255,0.75);
  }


  .stats-section{
    background:linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-mid) 55%, var(--blue-light) 100%);
    padding: 55px 51px 60px;
    position:relative;
    overflow:hidden;
  }

  .stats-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:40px;
    max-width:1200px;
    margin:0 auto;
  }

  .stat-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .stat-number{
    font-size:3.2rem;
    font-weight:700;
    color:var(--white);
    line-height:1;
    margin-bottom:14px;
    letter-spacing:-1px;
    font-variant-numeric:tabular-nums;
  }

  .stat-title{
    color:var(--white);
    font-size:1.05rem;
    font-weight:600;
    margin-bottom:4px;
  }

  .stat-desc{
    color:var(--white-70);
    font-size:0.8rem;
    margin-bottom:22px;
  }

  .stat-visual{
    display:flex;
    align-items:center;
    width:100%;
    min-height:44px;
  }

  /* people avatars (overlapping circles) */
  .avatars{
    display:flex;
    align-items:center;
    flex-shrink:0;    width: 100%;
  }

  .avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.85);
    background-size:cover;
    background-position:center;
    margin-left:-14px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .avatar:first-child{ margin-left:0; }

  /* project thumbnails (rounded rectangles, slight overlap) */
  .thumbs{
    display:flex;
    align-items:center;
    flex-shrink:0;
        width: 100%;
  }

  .thumb{
    width:42px;
    height:34px;
    border-radius:6px;
    border:2px solid rgba(255,255,255,0.85);
    background-size:cover;
    background-position:center;
    margin-left:-10px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .thumb:first-child{ margin-left:0; }

  /* connecting line with arrow tip */
  .connector{
    flex:1;
    height:1px;
    background:var(--line);
    margin-left:12px;
    position:relative;
  }

/*  .connector::after{
    content:'';
    position:absolute;
    right:0;
    top:50%;
    width:8px;
    height:8px;
    border-top:1px solid var(--line);
    border-right:1px solid var(--line);
    transform:translateY(-50%) rotate(45deg);
  }*/

  @media (max-width: 900px){
    .stats-grid{
      grid-template-columns:repeat(2, 1fr);
      gap:44px 24px;
    }
    .stats-section{ padding:50px 24px; }
  }

  @media (max-width: 520px){
    .stats-grid{ grid-template-columns:1fr; }
    .stat-number{ font-size:2.6rem; }
  }

  .pt-spl{padding-top: 39%;}

.erp-card{
  background:#fff;
  transition: background .45s ease, color .45s ease, transform .35s ease;
  transform: translateZ(0); /* forces Safari to use GPU compositing consistently */
  -webkit-transform: translateZ(0);
}

.erp-card h3,
.erp-card p,
.erp-card .erp-learn-more{
  transition: color .45s ease;
}

.erp-card.is-active{
  background: linear-gradient(135deg, #f2884b 0%, #ef7b38 100%);
  border-color: #ef7b38;
}

/*.erp-card.is-active h3,
.erp-card.is-active p{
  color:#ffffff;
}
*/
.erp-card.is-active .erp-learn-more{
/*  color:#ffffff;*/
  text-decoration: underline;
}

.erp-card.is-active .erp-card-icon{
  background:#ffffff;
}



/*  service box*/
  .erp-slider-section{
    --accent:#f2884b;
    --accent-light:#fbe3d1;
    --text-dark:#1c1c1c;
    --text-body:#5c5c66;
/*    font-family:'Segoe UI', Arial, sans-serif;*/
    background:#f6f7f9;
/*    padding:60px 60px 70px;*/
    position:relative;
  }

  .erp-slider-section *{ box-sizing:border-box; }

  .erp-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
     max-width: 88%;
        margin: 0 auto 20px;
  }

  .erp-heading-wrap{
    border-left:4px solid var(--accent);
    padding-left:16px;
    max-width:640px;
  }

  .erp-heading-wrap h2{
    margin:0 0 10px;
    font-size:1.9rem;
    font-weight:700;
    color:var(--text-dark);
  }

  .erp-heading-wrap p{
    margin:0;
    color:var(--text-body);
    font-size:1rem;
  }

  .erp-nav-btns{
    display:flex;
    gap:12px;
    flex-shrink:0;
  }

  .erp-nav-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--accent);
    font-size: 2rem;
    transition:background .2s ease, color .2s ease, transform .15s ease;
  }

  .erp-nav-btn:hover{
    background: #ffdac4;
    color:#fff;
    transform:translateY(-2px);
  }

  .erp-slider-viewport{
/*    max-width:1300px;*/
    margin:0 auto;
    overflow:hidden;
    position:relative;
  }

  .erp-slider-track{
    display:flex;
    gap:24px;
    will-change:transform;
    transition:transform .55s cubic-bezier(.4,.0,.2,1);
  }

  .erp-card{
    flex:0 0 auto;
    width: 510px;
    background:#fff;
    border:1.5px solid #f0c9a8;
    border-radius:14px;
    padding:32px 28px 28px;
  }

  .erp-card-icon{
    width:58px;
    height:58px;
    border-radius:12px;
    background:var(--accent-light);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
/*    float: left;*/
  }
.erp-card::after{
  content:"";
  display:table;
  clear:both;
}

  .erp-card-icon svg{
    width:28px;
    height:28px;
  }

  .erp-card h3{
margin: 0 0 14px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-dark);

    display: grid;
    padding-top: 4%;
    font-family: 'Instrument Sans';
  }

  .erp-card p{
    margin:0 0 22px;
    font-size:0.92rem;
    line-height:1.55;
    color: #000000;
        display: inline-flex;
            min-height: 99px;
  }

  .erp-learn-more{
    display:inline-block;
    color:var(--accent);
    font-weight:600;
    font-size:0.9rem;
    text-decoration:none;
  }

  .erp-learn-more:hover{ text-decoration:underline;    font-weight: 600;

    font-size: 1rem; }

  @media (max-width:768px){
    .erp-slider-section{ padding:40px 20px 50px; }
    .erp-header{ flex-direction:column; gap:20px; }
    .erp-card{ width:280px; }
  }


/* Service Box */
.erp-card,
.erp-card.conic {
 border: 1.5px solid #f6dcc8 !important;
    outline: none !important;
    box-shadow: none;
        text-align: left;
}

/* Remove extra border from conic class if applied */
.erp-card.conic::before,
.erp-card.conic::after {
    border: none !important;
}
.conic::after {
   content: '';
    position: absolute;
    z-index: -1;
    left: 1.5px;
    top: 1.5px;
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    background: #ffffff;
    border-radius: 8px;
}

  body {
/*  background: linear-gradient(120deg, #5c2fa6 13.57%, #5a36c0 98.38%);*/
  scroll-behavior: none;
}

.title {
  font-size: max(2vw, 24px);
  line-height: 1.1;
  padding-bottom: .4em;
  color: rgb(255, 255, 255);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
}

.text {
  font-size: max(1vw, 15px);
  line-height: 1.4;
  overflow: hidden;
  padding-bottom: 20px;
  color: rgba(255, 255, 255, 0.7);
}

.accordions {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20vh;
}

.accordion {
  background: linear-gradient(200deg, rgb(29, 145, 252) 13.57%, rgb(90, 54, 192) 98.38%);
  width: max(50vw, 280px);
  padding: 25px 30px 10px;
  border-radius: 15px;
  margin-bottom: 40px;
  box-shadow: 0 30px 30px -10px rgba(0, 0, 0, .3);
  
  &:nth-child(2) {
    background: linear-gradient(200deg, rgb(242, 136, 133) 13.57%, rgb(233, 79, 102) 98.38%);
  }
  
  &:nth-child(3) {
    background: linear-gradient(200deg, rgb(101, 187, 118) 13.57%, rgb(70, 111, 171) 98.38%);
  }
  
  &:nth-child(4) {
    background: linear-gradient(200deg, #c215d1 13.57%, #9813a1 98.38%);
  }
}

.spacer {
  height: 20vh;
}

@media (max-width: 480px) {
  .accordion {
    padding: 15px 20px 8px;
  }
  .title {
    font-size: 20px;
  }
}

/*accordin*/
  .body1 {/*  background-color: #0e100f;*/
  
/*  font-family: Avenir, sans-serif;

  color: #fffce1;*/
/*  display: flex;*/
/*  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;*/
}

/*p {
  max-width: 70ch;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.3;
}*/

/*.section {
  padding: 10rem 0;
}*/

.cards-section {
  position: relative;
  display: grid;
  gap: 3rem;
  grid-template-columns: 200px auto;
}

/*.cards {
  display: grid;
  margin-top: 3.5rem;
  > * {
    grid-area: 1 / 1 / 2 / 2;
  }
}
*/
.card {
     width: 682%;
    margin-left: 0%;
    /* background-color: red; */
    border-radius: 17px;
    /* border: 2px solid red; */
    box-shadow: 31px 17px 34px rgba(23, 35, 61, 0.06);
    /* border: 1px solid green; */
    padding: 27px;
    border: unset;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.to-stay-card {
  background-color: red;
  border-radius: 8px;
  width: auto;
  height: 400px;
}
.customer-card {
    background: #fff;
    border-radius: 8px;
    align-items: center;
}

.customer-content {
    padding-right: 20px;
}

.customer-title {
font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.title-line {
    display: block;
    width: 70px;
    height: 4px;
    background: #1e88e5;
    border-radius: 5px;
    margin-bottom: 22px;
}

.customer-content p {
color: #000000;
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 0;
    text-align: left;
}

.customer-image img {
    width: 100%;
    border-radius: 8px;
    display: block;    height: 321px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .customer-content {
        padding-right: 0;
    }

    .customer-title {
        font-size: 26px;
    }

    .customer-content p {
        font-size: 16px;
    }
}


/*testimoansl*/

/*.testimonial {
  padding: 80px 0;
}
.sec-heading {
  margin-bottom: 60px;
}
.sec-heading h6 {
  font-family: allura;
  font-weight: 900;
  font-size: 80px;
}
.single-box {
  border: 3px solid #e6f0fa;
  padding: 50px 30px 40px;
  border-radius: 20px;
  background: #fff;
}
.img-area {
  margin: 45px 0 20px;
}
.single-box img {
  max-width: 100px;
  border-radius: 50%;
  margin: 0 auto
}
.single-box h4 {
  font-weight: 600;
  margin: 0;
  font-family: 'Allura', cursive;
  font-size: 35px;
}
.single-box {
  overflow: hidden
}
.single-box .img-area {
  width: 30%;
  float: left;
  margin: 0
}
.single-box .content {
  width: 70%;
  float: left;
  padding-left: 10px
}
.single-box p {
  margin: 10px 0 25px;
  line-height: 2.3;
}
.testi-carousel-three .single-box {
  border: 0;
  padding: 0 50px;
}
.testi-carousel .owl-dots, .clients-carousel .owl-dots, .testi-carousel-three .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -60px;
  text-align: center;
  width: 100%;
}
.testi-carousel .owl-dot, .clients-carousel .owl-dot, .testi-carousel-three .owl-dot {
  width: 16px;
  height: 16px;
  background-color: #ddd;
  display: inline-block;
  margin: 0 6px;
  text-align: center;
  border-radius: 50%;
}
.testi-carousel .owl-dot.active, .clients-carousel .owl-dot.active, .testi-carousel-three .owl-dot.active {
  background-color: blueviolet;
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
  .testimonial {
    padding: 70px 0 130px;
  }
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
  .testimonial {
    padding: 70px 0 130px;
  }
  .single-box {
    padding: 50px 0 40px;
  }
  .single-box .img-area {
    width: 100%;
    float: none;
  }
  .single-box .content {
    width: 100%;
    float: none;
  }
}
*/

/*testimoanls section*/
.testimonial-card{
    background:#fff;
    border-radius: 12px;
    padding:38px 42px;
/*    box-shadow:0 15px 45px rgba(0,0,0,.08);*/
    position:relative;
    transition:.3s ease;    margin: 8px;
}

.testimonial-card:hover{
    transform:translateY(-3px);
/*    box-shadow:0 22px 55px rgba(0,0,0,.12);*/
}

/*.testimonial-img{
    width:82px;
    height:82px;
    border-radius:50%;
    object-fit:cover;
}*/

.testimonial-name{
    font-size: 1.2rem;
    font-weight:700;
    color:#2b2b2b;
    margin:0;
}

.testimonial-designation{
    font-size:1.35rem;
    color:#444;
    font-weight:500;
}

.quote-icon{
    font-size: 68px;
    color:#f28c1b;
    line-height:1;
    font-weight:700;
}

.testimonial-text{
/*    font-size:2rem;*/
    line-height:1.65;
    color:#111;
    font-style:italic;
    margin-bottom:28px;
}

.testimonial-rating{
    color:#f5b301;
    font-size:2rem;
       letter-spacing: 0px;
}

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

    .testimonial-card{
        padding:25px;
    }

  /*  .testimonial-img{
        width:65px;
        height:65px;
    }
*/
    .testimonial-name{
               font-size: 1rem;
        margin-top: 10px;
    }

    .testimonial-designation{
        font-size:1rem;
    }

  /*  .testimonial-text{
        font-size:1.15rem;
    }
*/
    .testimonial-rating{
        font-size:1.4rem;
    }

    .quote-icon{
        font-size:60px;
    }
}
.testimonial-card img{


/*
    border-radius: 50%;
    width: 68px;
    height: 56px;
    object-fit: scale-down;
    border: 1px solid;*/

  }
.testimonial-card .testimonial-designation {

      font-size: 13px;
    margin-top: 7px;

 }
.testimonial-card .testimonial-text{
    margin-bottom: 5px;
     text-align: left;
    line-height: 27px;


}
.testimonial-card{

    padding: 15px 14px; min-height: 261px;
    }
    .testimonial-card .testimonial-rating{

  
        color: #F2C201;
    font-size: 23px; 

     }

.testimonial-card .quote-icon{

color: #E2852E;
}
   
/*heading spl*/
.business-heading{
    position: relative;
    max-width: 700px;
}

.business-heading h2{
    margin: 0;
      font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
    color: #111;
        margin-top: 14px;
/*    font-family: "Poppins", sans-serif;*/
      padding-left: 11px;
            line-height: 33px;
    margin-bottom: 14px;
}

.heading-top{
    display: flex;
    align-items: center;
    position: relative;
}

.left-line{
    width: 4px;
    height: 62px;
    background: #f26b21;
    margin-right: 18px;
    border-radius: 2px;
    flex-shrink: 0;
}

.highlight-box{
/*    background: #fff2eb;*/
 /*   padding: 16px 22px 16px 18px;
    display: inline-flex;
    align-items: center;
        border-left: 5px solid #f26b21;
        position: relative;*/
            margin-bottom: 10px;
}
.grp-heading p{
color: black;  font-size: 16px ;
/*padding-top: 10px;*/
}
.grp-heading h2{
font-size: 22px;
/*    font-family: "Caudex", serif;*/
    font-weight: 700;

}
.highlight-box2:before{
 width: 80%;
}
@media screen and (min-width: 1000px) and (max-width: 200000000px)  {



.highlight-box:before{
  content: '';
  position: absolute;
/*  width: 80%;*/

   height: 60px;
    background: linear-gradient(45deg, #F97D3040, transparent);
        border-left: 4px solid #f26b21;
display: block;
}
}

.highlight-box1 h2{
      position: relative;
  
  /*  border-left: 4px solid #f26b21;
    display: block;
      left: 26%;*/
}


.highlight-box1 h2:before{

    content: '';
    position: absolute;
    width: 35%;
    height: 60px;
    background: linear-gradient(45deg, #F97D3040, transparent);
    text-align: center;
    justify-content: center;
    display: flex;
/*    left: 30%;*/
    border-left: 4px solid #f26b21;
    display: inline;

  }
.second-line{
    margin-left: 22px;
    margin-top: 10px;
}

/* Orange Decorative Lines */

.spark{
    position: absolute;
      right: 33%;
    top: -14%;
    width: 35px;
    height: 37px;
    background: url(../wp-media/simplification.svg);
    background-repeat: no-repeat;
}

.hero-section .spark {
    position: absolute;
    right: 18%;
    top: -7%;
}





/*.spark span{
    position: absolute;
    width: 4px;
    height: 18px;
    background: #f26b21;
    border-radius: 10px;
}

.spark span:nth-child(1){
    transform: rotate(-35deg);
    left: 6px;
    top: 8px;
}

.spark span:nth-child(2){
    transform: rotate(12deg);
    left: 18px;
    top: 0;
}

.spark span:nth-child(3){
    transform: rotate(50deg);
    left: 30px;
    top: 8px;
}*/

/* Responsive */

@media(max-width:768px){

   /* .business-heading h2{
        font-size: 34px;
    }*/

    .left-line{
        height: 46px;
    }

  /*  .highlight-box{
        padding: 12px 16px;
    }*/


    .spark{
        right: -25px;
        top: -5px;
        transform: scale(.8);
    }
}

@media(max-width:576px){

   /* .business-heading h2{
        font-size: 28px;
    }*/

    .second-line{
        margin-left: 14px;
    }
}

/*footer*/
.footer-section{

    background:#0b6cae !important;
    padding-top:120px;
    color:#fff;
/*    position:relative;*/
/*    overflow:hidden;*/

}

/* Newsletter */

.newsletter-box{

    background:linear-gradient(90deg,#ffe8d5,#ffc58d,#ffe8d5);
    border-radius:18px;
    padding:40px 35px;
    margin-top:-80px;
    margin-bottom:70px;

    box-shadow:0 20px 40px rgba(0,0,0,.12);
    margin-top: -14%;

}
.highlight-box1 h2{

margin: 0;
/*       font-size: 32px;*/
/*    font-weight: 500;*/
/*    line-height: 1.15;*/
/*    color: #111;*/
    margin-top: 14px;
/*    font-family: "Poppins", sans-serif;*/
    padding-left: 11px;
    line-height: 58px;
    margin-bottom: 14px;
text-align: center;

}

.newsletter-box h2{
    font-size: 30px;
    line-height: 1.4;
    color: #000;
    /* font-family: Georgia, serif; */
    font-family: "Caudex", serif;
    font-weight: 700;

}

/*.newsletter-box span{

    display:block;

}
*/
.subscribe-form{

    background:#fff;
    border-radius:50px;
    padding:8px;
    display:flex;
    align-items:center;

}

.subscribe-form input{

    flex:1;
    border:none;
    outline:none;
    padding:14px 22px;
    border-radius:50px;
    font-size:15px;

}

.subscribe-form button{

    background:#ff7a21;
    color:#fff;
    border:none;
    padding:13px 32px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;

}

.subscribe-form button:hover{

    background:#ff6300;

}

/* Footer */

.footer-logo{

    max-width:140px;

}

.footer-section p{

    color:#e6eef8;
    line-height:1.8;
    font-size: 16px;
}

.footer-section h5{

    font-size:22px;
    margin-bottom:25px;
    font-weight:600;
    color: white;

}

.footer-section ul{

    list-style:none;
    padding:0;
    margin:0;

}

.footer-section ul li{

    margin-bottom:14px;
    font-size: 16px;
}

.footer-section ul li a{

    color:#fff;
    text-decoration:none;
    transition:.3s;
    font-size: 16.43px;
}

.footer-section ul li a:hover{

    color:#ffb26a;
/*    padding-left:5px;*/

}

.footer-section ul li::before{

    content:"»";
    margin-right:10px;
    color:#fff;

}

.contact-info li{

    display:flex;
    gap:12px;
    color:#fff;
    line-height:1.8;

}

.contact-info li::before{

    display:none;

}

.contact-info i{

    color:#fff;
    margin-top:4px;

}

/* Social */

.social-icons{

    margin-top:25px;

}

.social-icons a{

    /* width: 38px; */
    /* height: 38px; */
    /* border: 1px solid rgba(255, 255, 255, .4); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* color: #fff; */
    /* border-radius: 50%; */
    margin-right: 5px;
    text-decoration: none;
    transition: .3s;

}

.social-icons a:hover{

/*    background:#fff;*/
    color:#0b6cae;

}

/* Bottom */

.footer-section hr{

    border-color:rgba(255,255,255,.18);
    margin: 24px 0px 25px;

}

.copyright{

    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#fff;
/*    padding-bottom:25px;*/
    font-size:15px;

}

@media(max-width:991px){

.newsletter-box{

margin-top:0;

}

.newsletter-box h2{

font-size:28px;
margin-bottom:25px;

}

.copyright{

flex-direction:column;
gap:15px;
text-align:center;

}

}

@media(max-width:767px){

.subscribe-form{

flex-direction:column;
background:transparent;
padding:0;
gap:15px;

}

.subscribe-form input{

width:100%;
background:#fff;

}

.subscribe-form button{

width:100%;

}

}

.testimonial{
/*      margin-bottom: 9%;*/
      background: url(../wp-media/testibg.png);    padding: 33px 0px;
}


.left-heading  h2{
text-align: left;
    line-height: 60px;
    padding-left: 15px;

}

.left-heading:before {

    width: 27%;

    }

.testi{


/*        position: relative;*/
/*    width: 76%;*/
    /* height: 60px; */
/*    background: linear-gradient(45deg, #F97D3040, transparent);
    border-left: 4px solid #f26b21;*/
    /* display: block; */
/*    left: 28%;
    text-align: center;
    justify-content: center;
    left: 13%;*/

   }

   .maxus-mt-mb{
    margin-top: 4%;
    margin-bottom: 4%;
   }

      .maxus-pt-pb{
   padding-top: 5%;
    padding-bottom: 5%;
   }

   .maxus-pt{
   padding-top: 5%;
   }


/*.testi{    left: 28%;}*/
/*.testi:before{
    width: 46%;
}*/


.footer-underline-accent {
    position: relative;
    display: inline-block;
}

.footer-underline-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 81%;
    height: 20px;
    /* background-color: var(--color-primary); */
    background: url(https://maxus.co.in/wp-media/footerarrow.svg);
    border-radius: 2px;
    background-repeat: no-repeat;
}

.clients-carousel {
/*  margin-top: 2%;*/
  margin-bottom: 2%;
}

.testimonial-img{
width: unset !important;
margin-left: 1rem!important;
display: none !important;
}
#abotus .spark {
    position: absolute;
    right: 16%;
    top: -2%;
}

.subheadline { 
  color: var(--color-primary);

    font-weight: 700;

  }

  /* ===== FEATURE GRID ===== */
  .feature-grid{
/*    max-width:1000px;*/
/*    margin: 14px auto 0;*/
    display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:0;
/*    background:#fff;*/
/*    border-radius:var(--radius);*/
/*    box-shadow:0 20px 50px rgba(20,40,80,.08);   */
    overflow:hidden;position:relative;z-index:2;    
/*    padding: 25px;*/
  }
  .feature-col{display:flex;flex-direction:column;}
  .feature-item{padding: 12px 18px;border-bottom:1px solid #eef1f6;}
  .feature-col:first-child .feature-item{
background: white;
        border-right: 1px solid #eef1f6;
    padding-bottom: 38px;
    border-top: 1px solid #eef1f6;


  }
 .feature-item:hover{
/*  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/

  }

  .feature-col:last-child .feature-item{border-left:1px solid #eef1f6; background: white; padding-bottom: 38px;}
  .feature-item:last-child{border-bottom:none;}
  .feature-icon{
    width:44px;height:44px;border-radius:10px;
/*    background:var(--blue-light);*/
    display:flex;align-items:center;justify-content:center;color:var(--blue);
    font-size:20px;margin-bottom:14px;
  }
  .feature-item h3{font-size: 20px;color:var(--navy);margin-bottom:8px;     font-weight: 700;}
  .feature-item p{font-size: 15px;color:var(--text-light);}
  .feature-image{
    background-image: url(../wp-media/about-us/about-us.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    width: 80% !important;
    
    border-radius: 17px;
    overflow: hidden;
text-align: center;
margin: auto;


  }

.second-section{
/*  background: url(../wp-media/about-us/second-bg.png);*/
background: #eff4fa;
    overflow: hidden;

}
.feature-col .feature-item{
     min-height: 190px;    border-radius: 17px;
}

/* ===== WHO WE ARE ===== */
  .who{background: linear-gradient(120deg, var(--blue-deep) 0%, var(--blue-mid) 55%, var(--blue-light) 100%);
    padding: 70px 0px 60px;
   }
  .who .container{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center;}
  .who-img{position:relative;border-radius:var(--radius);
/*    overflow:hidden;*/
  }
  .who-img img{border-radius:var(--radius);}
  .badge-circle{
    position:absolute;bottom:-20px;right:-20px;
       width: 149px;
    height: 137px;
    border-radius:50%;
/*    background:var(--orange);*/
    color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;font-weight:800;font-size:13px;line-height:1.2;
/*    border:5px solid var(--navy);*/
  }
  .badge-circle span{font-size:24px;}
  .who h4.eyebrow-line{color:var(--orange);font-weight:700;font-size:13px;letter-spacing:1px;margin-bottom:10px;}
  .who h2{font-size:30px;margin-bottom:16px;     color: white;}
  .who p{font-size:14.5px;margin-bottom:26px;     color: white;}
  .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .who-card{
       background: white;border:1px solid rgba(255,255,255,.1);
    border-radius:10px;padding:18px;
  }
.who-card:hover{
    box-shadow: rgba(0, 0, 0, 0.16) 8px 4px 10px;
  }


  .who-card h5{font-size:14.5px;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
  .who-card img {
        width: 24px;
    height: 24px;
  }
  .who-card p{    font-size: 15px;
    color: #000000;
    margin: 0;}


/* ===== TIMELINE ===== */
  .timeline-section{padding:80px 0 40px;text-align:center;}
  .timeline-section .eyebrow{margin-bottom:14px;}
  .timeline-section h2{font-size:28px;color:var(--navy);margin-bottom:6px;}
  .timeline-section > p{color:var(--text-light);font-size:14px;margin-bottom:50px;}
  .timeline-row{
    display:grid;grid-template-columns:repeat(4,1fr);
    max-width:1000px;margin:0 auto;
  }
  .tl-block{
    min-height:200px;padding:24px;color:#fff;position:relative;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  .tl-block h4{font-size:13px;font-weight:600;margin-bottom:8px;}
  .tl-block .year{font-size:34px;font-weight:800;}
  .tl-block.orange{background:var(--orange);}
  .tl-block.blue{background:var(--blue);}
  .tl-block.tan{background:#cfc2ae;color:#3b3428;}
  .tl-block.img{background-size:cover;background-position:center;}
  .tl-block.badge18{
    background:var(--cream);color:var(--navy);align-items:flex-start;justify-content:center;
    font-weight:800;font-size:15px;
  }

/* ===== TABS / WHAT WE DO ===== */
  .tabsection{background:var(--orange-light);padding:70px 0;text-align:center;   
}
  .tabsection h2{margin-bottom:8px;}
  .tabsection > .container > p{color:var(--text-light);font-size:14px;margin-bottom:34px;}
  .tabs{

        display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
/*    margin-top: 25px;*/
    background: white;
    display: inline-block;
    padding: 10px 23px;
    border-radius: 25px;
    border-radius: 30px;    border: unset;


  }
  .tab-btn{
padding: 8px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 16px;
    background:#fff;color:var(--navy);cursor:pointer;border:1px solid #f0dcc8;
    transition:.2s;
    border: unset;
  }
  .tab-btn.active{background: #0880C4;color:#fff;border-color: #0880C4;}
  .tab-panel{display:none;text-align:left;}
  .tab-panel.active{display:grid;}
  .tab-card{
    max-width: 84%;
    margin: 0 auto;
    background: #fff;
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(20, 40, 80, .06);
    padding: 25px;    
     height: 354px;

  }
.tab-card .img-side{
/*  background-size:cover;*/
background-size: cover;
  background-position:center;
/*  min-height:260px;   */
   background-repeat: no-repeat;
       border-radius: 19px;
}
  .tab-card .text-side{padding:36px 40px;text-align:left;}
  .tab-card .text-side h4{color:var(--orange);font-weight:700;font-size:13px;margin-bottom:8px;}
  .tab-card .text-side h3{font-size:22px;margin-bottom:14px;}
  .tab-card .text-side p{

          font-size: 15px;

    color: black;
    margin-top: 10px;


  }

.tab-card .text-side ul li{
       font-size: 15px;
    color: black;
}
  #do .img-side{
  background-image:url('../wp-media/about-us/what-we-do.png');
}
#vision .img-side{
  background-image:url('../wp-media/about-us/ourvision.png');
}
#mission .img-side{
  background-image:url('../wp-media/about-us/ourmission.png');
}
#values .img-side{
  background-image:url('../wp-media/about-us/ourvalues.png');
}




.wrapper{
/*  width: 90%;*/
/*  margin: 0 auto;*/
/*  max-width: 80rem;*/
 margin-bottom: 14%;
}

.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.card-container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.front,
.back{
  background-size: cover;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.25);
  border-radius: 10px;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  min-height: 280px;
  height: auto;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;               min-height: 500px;
}

.back{
/*  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);*/

  background: url(../wp-media/team/bg.webp);background-size: cover;


}

.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .9;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 6%, rgba(0, 0, 0, 0.75) 12%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 100%);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}

.back .inner{
    top:45% !important; 
        text-align: left;
    color: black;
}
.card-container:hover .front,
.card-container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#leadership-team .inner{
           top: 78%;

}
.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
    transform: translateY(-50%) translateZ(60px) scale(0.94);
 
           top: 88%;

    position: absolute;
    left: 0;
    /* width: 100%; */
     padding: 1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* outline: 1px solid transparent; */
    -webkit-perspective: inherit;
    perspective: inherit;
    z-index: 2;
    left: 0%;
}

.card-container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.card-container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.card-container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.card-container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
font-size: 22px;
    /* margin-bottom: -1rem; */
    position: relative;
/*    border: 1px solid;*/
    border-radius: 23px;
    padding: 0px 15px;   
/*     margin-bottom: 10px;*/
        text-align: left;
    text-transform: uppercase;
}

/*.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}
*/
.front .inner span{
  color: rgba(255,255,255,0.7);
    padding-top: 4px;
    padding-left: 16px;
  font-weight: 300;    font-size: 18px;
    text-align: left;
    float: inline-start;
    padding-right: 11px;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}

.badge-circle img {
    animation: rotateCircle 8s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.other-hero-p{
  padding-bottom: 2% !important;
}


/*service page*/
.mx-services{
background: #F0F6FF;
}
.mx-service-card{
  background:#fff;
  border-radius: var(--mx-radius);
    padding: 0rem 0rem 2rem;
  height:100%;
      min-height: 301px;
  box-shadow: 0 10px 30px rgba(11,59,102,.06);    border-radius: 16px;
}
.mx-service-card h3{
  color:  #0880C4;
  font-size: 1.4rem;
  margin-bottom: .75rem;
}
.mx-service-card p{ font-size: 16px; padding-bottom:25px }
.mx-service-card img{
  border-radius: 10px;
  width:100%;
  height:auto;
  object-fit: cover;    font-size: 18px;

}
.mx-learn-more{
  color: #F97D30;
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.mx-learn-more:hover{ color: var(--mx-blue); }

/* ---------- Facility mgmt inner-page service cards (image based) ---------- */
.mx-fm-card{
  background:#fff;
  border-radius: var(--mx-radius);
  overflow:hidden;
  height:100%;
/*  box-shadow: 0 10px 30px rgba(11,59,102,.06);*/
    border-radius: 14px;
}
.mx-fm-card img{
  width:100%;
  height:220px;
  object-fit:cover;
}
.mx-fm-card .mx-fm-body{ padding: 1.5rem; }
.mx-fm-card h3{
  color: var(--mx-blue);
  font-size: 1.25rem;
  margin-bottom:.6rem;
}
.mx-fm-card p{ color: var(--mx-muted); font-size:.95rem; }

.mx-carousel-arrow{
  width:44px; height:44px;
  border-radius:50%;
  background:#fff;
  border:1px solid #E3E9EF;
  display:flex; align-items:center; justify-content:center;
  color: var(--mx-orange);
  flex-shrink:0;
}
.mx-carousel-arrow:hover{ background: var(--mx-orange); color:#fff; }

/* ---------- Banner (image overlay) ---------- */
.mx-banner{
    position: relative;
    padding: 123px 0;
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
       margin-bottom: 59px;
}
.mx-banner::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(9,30,54,.6);
      opacity: 0.4;
}
.mx-banner .mx-banner-inner{ position:relative; z-index:1; }
.mx-banner h2{ 
    font-size: 2.1rem;
    margin-bottom: .5rem;
    color: white;

     }

/* ---------- Why Choose Us ---------- */
.mx-why{ padding: 70px 0; }
.mx-why-feature{
  display:flex; gap: 1rem; margin-bottom: 2rem;
}
.mx-why-feature .icon{
  width:52px; height:52px;
  background: var(--mx-bg-soft);
  color: var(--mx-blue);
  border-radius: 12px;
  display:flex;     align-items: flex-start;justify-content:center;
  flex-shrink:0;
  font-size:1.4rem;
}
.mx-why-feature h4{ font-size: 1.05rem; margin-bottom:.35rem; }
.mx-why-feature p{ color: var(--mx-muted); font-size:.92rem; margin:0; }
.mx-btn-outline-blue{
  border: 1.5px solid var(--mx-blue);
  color: var(--mx-blue);
  border-radius: 50px;
  padding: .6rem 1.5rem;
  font-weight: 500;
}
.mx-btn-outline-blue:hover{ background: #006AAC; color:#fff; }
.mx-btn-solid-orange{
  background: var(--mx-orange);
  color:#fff;
  border-radius: 50px;
  padding: .6rem 1.5rem;
  font-weight: 500;
  display:inline-flex; align-items:center; gap:.5rem;
}
.mx-btn-solid-orange:hover{ background:#d96e0f; color:#fff; }

.mx-why{ padding: 70px 0; }
.mx-why-feature{
  display:flex; gap: 1rem; margin-bottom: 2rem;
}
/*.mx-why-feature .icon{
  width:52px; height:52px;
  background: var(--mx-bg-soft);
  color: var(--mx-blue);
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:1.4rem;
}*/
.mx-why-feature h4{        font-size: 20px; margin-bottom:.35rem; }
.mx-why-feature p{ color: var(--mx-muted); font-size: 18px; margin:0; }
.mx-btn-outline-blue{
    border: 1.5px solid #006AAC;
    color: #006AAC;
    border-radius: 50px;
    padding: .6rem 1.5rem;
    font-weight: 500;
}
.mx-btn-outline-blue:hover{ background:  #006AAC; color:#fff; }
.mx-btn-solid-orange{
 background: #F97D30;
  color:#fff;
  border-radius: 50px;
  padding: .6rem 1.5rem;
  font-weight: 500;
  display:inline-flex; align-items:center; gap:.5rem;
}
.mx-btn-solid-orange:hover{ background:#d96e0f; color:#fff; }

.grp-heading p{
      margin-bottom: 28px;
}

.mx-services .highlight-box1 h2:before{
    width: 12%;
  }


#erp .spark {
    position: absolute;
    right: 25%;  
  }

/*  erp page*/

.feature-slider-section {
    --feature-accent: #f2884b;
    --feature-accent-light: #fbe3d1;
    --feature-text-dark: #1c1c1c;
    --feature-text-body: #5c5c66;
    position: relative;
        background: #F0F6FF;
}

.feature-slider-section * {
    box-sizing: border-box;
}


/* HEADER */

.feature-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
/*    max-width: 88%;*/
    margin: 0 auto 40px;
}

.feature-heading-wrap {
    border-left: 4px solid var(--feature-accent);
    padding-left: 16px;
    max-width: 640px;
}

.feature-heading-wrap h2 {
    margin: 0 0 10px;
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--feature-text-dark);
}

.feature-heading-wrap p {
    margin: 0;
    color: var(--feature-text-body);
    font-size: 1rem;
}


/* NAVIGATION */

.feature-nav-btns {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.feature-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    color: var(--feature-accent);
    font-size: 2rem;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}

.feature-nav-btn:hover {
    background: #f2884b1f;
    color: #fff;
    transform: translateY(-2px);
}


/* VIEWPORT */

.feature-slider-viewport {
    overflow: hidden;
    position: relative;
}


/* TRACK */

.feature-slider-track {
    display: flex;
    gap: 24px;
    will-change: transform;
}


/* CARD */

.feature-card {
    flex: 0 0 447px;
    width: 447px;
    /* background: #fff; */
    /* border: 1.5px solid #f0c9a8; */
    /* border-radius: 14px; */
/*    padding: 32px 28px 28px;*/
    padding-right: 10px;
    
}


/* ICON */

.feature-card-icon {
    width: 58px;
    height: 58px;

    border-radius: 12px;
    background: var(--feature-accent-light);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 20px;
    float: left;
    margin-right: 15px;
}

.feature-card-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.feature-card-icon svg {
    width: 28px;
    height: 28px;
}


/* TITLE */

.feature-card h3 {
    margin: 0 0 14px;

    font-size: 1.15rem;
    font-weight: 700;

    color: #006AAC;

  
    padding-top: 4%;

    font-family: 'Instrument Sans', sans-serif;
}


/* DESCRIPTION */

.feature-card p {
margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.55;
    color: #000000;    min-height: 130px;
        padding-right: 15px;
}


/* LINK */

.feature-learn-more {
    display: inline-block;

    color: var(--feature-accent);

    font-weight: 600;
    font-size: 0.9rem;

    text-decoration: none;
}

.feature-learn-more:hover {
    text-decoration: underline;
}


/* MOBILE */

@media (max-width: 767px) {

    .feature-header {
        max-width: 100%;
        gap: 15px;
        align-items: center;
    }

    .feature-heading-wrap {
        max-width: 100%;
    }

    .feature-heading-wrap h2 {
        font-size: 1.5rem;
    }

    .feature-heading-wrap p {
        font-size: 0.9rem;
    }

    .feature-nav-btns {
        gap: 7px;
    }

    .feature-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1.7rem;
    }

    .feature-card {
        flex: 0 0 calc(100vw - 40px);
        width: calc(100vw - 40px);
    }
}

/* ===== Contact Card ===== */
  .contact-card{
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:0 25px 60px rgba(11,46,79,.12);
    margin-top:-40px;
    position:relative;
    z-index:2;
    overflow:hidden;
  }
  .contact-left{
    background: linear-gradient(160deg, #0681C7, #043D5E);
    color:#fff;
    border-radius:16px;
     padding: 30px 30px 0px;
    height:100%;
    display:flex;
    flex-direction:column;
  }
  .contact-left .info-block{ margin-bottom:22px; }
  .contact-left .info-block h6{
      font-size: 19px;
    font-weight: 400;
    opacity: 0.85;
    margin-bottom: 6px;
    color: white;
  }
  .contact-left .info-block p{
    font-weight:700;
    font-size: 18px;
    margin:0;
  }
  .contact-left img{
    border-radius:14px;
    margin-top:auto;
    width:100%;
    object-fit:cover;
/*    max-height:340px;*/
  }
  .form-label{
    font-weight:500;
    font-size:.9rem;
    margin-bottom:6px;
  }
  .form-control, .form-select{
    background:#f4f6f8;
    border:1px solid #eef1f4;
    border-radius:8px;
    padding:12px 14px;
  }
  .form-control:focus{
    box-shadow:0 0 0 3px rgba(21,101,192,.15);
    border-color:var(--blue);
  }
  .captcha-option{
    width:56px;
    height:56px;
    border:1px solid #e2e6ea;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    cursor:pointer;
    background:#fafbfc;
    color:var(--text-muted);
  }
  .captcha-option.active{
    border-color:var(--blue);
    color:var(--blue);
    box-shadow:0 0 0 3px rgba(21,101,192,.12);
  }
  .btn-submit{
    background:var(--blue);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px 32px;
    font-weight:600;
  }
  .btn-submit:hover{ background:var(--blue-dark); color:#fff; }

  /* ===== Branch Section ===== */
  .branch-section{ padding:80px 0 60px; background:#f6f9fc; }
  .section-eyebrow{
    border-left:4px solid var(--orange);
    padding-left:16px;
    font-weight:700;
    font-size:1.4rem;
    color:var(--text-dark);
  }
  .we-are-located{
    text-align:center;
    font-weight:600;
    color:var(--text-dark);
    margin:30px 0 25px;
  }
  .city-card{
    text-align:center;
  }
 /* .city-icon{
    width:110px;
    height:130px;
    margin:0 auto 16px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    color:var(--navy);
  }*/
  .city-icon svg{ width:100%; height:100%; }
  .btn-city{
    border-radius:30px;
    padding:6px 26px;
    font-weight:600;
    font-size:.9rem;
    border:1px solid var(--blue);
    color:var(--blue);
    background:#fff;
  }
  .btn-city.active{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
  }

  .map-card{
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(11,46,79,.08);
    height:100%;
    min-height:340px;
  }
  .map-card iframe{
    width:100%;
    height:100%;
    min-height:340px;
    border:0;
  }
  .info-tile{
    background:#fff;
    border-radius:14px;
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    box-shadow:0 8px 24px rgba(11,46,79,.06);
    margin-bottom:20px;
  }
  .info-tile .icon-circle{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fdeedc;
    color:var(--orange-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    flex-shrink:0;
  }
  .info-tile h6{
    font-weight:700;
    margin-bottom:6px;
  }
  .info-tile p{
    margin:0;
    color:var(--text-muted);
    font-size:.92rem;
  }


 /* ===== Branch Section ===== */
  .branch-section{  background:#f6f9fc;     margin-bottom: 10%;}
  .section-eyebrow{
    border-left:4px solid var(--orange);
    padding-left:16px;
    font-weight:700;
    font-size:1.4rem;
    color:var(--text-dark);
  }
  .we-are-located{
    text-align:center;
    font-weight:600;
    color:var(--text-dark);
    margin:30px 0 25px;    display: flex;

  }
  .city-card{
    text-align:center;
    cursor:pointer;
  }
  .city-icon{
  /*  width:110px;
    height:130px;*/
    margin:0 auto 16px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    color:var(--navy);
    transition:transform .25s ease, opacity .25s ease;
  }
  .city-card:hover .city-icon{
    transform:translateY(-4px);
  }
  .city-card.active-city .city-icon{
    opacity:1;
  }
 /* .city-card:not(.active-city) .city-icon{
    opacity:.55;
  }*/
  #branchMap{
    transition:opacity .2s ease;
  }
  .city-icon svg{ width:100%; height:100%; }
  .btn-city{
    border-radius:30px;
    padding:6px 26px;
    font-weight:600;
    font-size:.9rem;
    border:1px solid var(--blue);
    color:var(--blue);
    background:#fff;
  }
  .btn-city.active{
    background:#006AAC;
    color:#fff;
    border-color:#006AAC;
  }

  .map-card{
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(11,46,79,.08);
    height:100%;
    min-height:340px;
  }
  .map-card iframe{
    width:100%;
    height:100%;
    min-height:340px;
    border:0;
  }
  .info-tile{
    background:#fff;
    border-radius:14px;
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    box-shadow:0 8px 24px rgba(11,46,79,.06);
    margin-bottom:20px;
  }
  .info-tile .icon-circle{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#fdeedc;
    color:var(--orange-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    flex-shrink:0;
      color: #DB791E;
  }
  .info-tile h6{
    font-weight:700;
    margin-bottom:6px;
  }
  .info-tile p{
    margin:0;
    color:var(--text-muted);
    font-size:.92rem;
  }

  /* ===== Subscribe ===== */
  .subscribe-section{ padding:20px 0 0; }
  .subscribe-box{
    background:linear-gradient(135deg,#fdeedc,#fbdcc0);
    border-radius:18px;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:24px;
  }
  .subscribe-box h3{
    font-weight:700;
    font-size:1.6rem;
    margin:0;
    max-width:500px;
  }
  .subscribe-box h3 .underline{
    text-decoration:underline;
    text-decoration-color:var(--orange-dark);
    text-underline-offset:6px;
  }
  .subscribe-input-group{
    display:flex;
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    min-width:380px;
    box-shadow:0 10px 25px rgba(11,46,79,.08);
  }
  .subscribe-input-group input{
    border:none;
    flex:1;
    padding:14px 20px;
    outline:none;
    background:transparent;
  }
  .subscribe-input-group button{
    background:var(--orange-dark);
    color:#fff;
    border:none;
    padding:0 28px;
    font-weight:600;
  }

  /* ===== Footer ===== */
  .footer-section{
    background:var(--navy);
    color:#dbe6f0;
    padding:60px 0 20px;
    margin-top:50px;margin-top: 10%;
  }
  .footer-section h6{
    color:#fff;
    font-weight:700;
    margin-bottom:18px;
  }
  .footer-section ul{ list-style:none; padding:0; margin:0; }
  .footer-section ul li{ margin-bottom:10px; }
  .footer-section ul li a{
    color:#c4d3e0;
    text-decoration:none;
    font-size:.92rem;
  }
  .footer-section ul li a:hover{ color:var(--orange); }
  .footer-social a{
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-right:8px;
    text-decoration:none;
  }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:40px;
    padding-top:18px;
    font-size:.85rem;
    color:#b7c6d4;
  }
  .footer-bottom a{ color:#b7c6d4; text-decoration:none; }

  @media (max-width: 767px){
    .hero-title{ font-size:1.9rem; }
    .subscribe-box{ flex-direction:column; text-align:center; }
    .subscribe-input-group{ min-width:100%; }
    .contact-left{ margin-bottom:20px; }
  }


.grpcop{   justify-content: center;
    display: grid;
    margin-bottom: 25px;
}


.sidebar-box{ margin-bottom: 20px;
    background:#eef2f6; border-radius:16px; padding:16px;
    /*   position: sticky;
    top: 20px;*/
   

  }


/*.sidebar-box {
  position: sticky;
  top: 100px;
  z-index: 10;
}*/



  .sidebar-link{
    display:flex; align-items:center; gap:10px;
    background:#fff; border-radius:30px; padding:12px 18px;
    font-weight:600; color:var(--text-dark); text-decoration:none;
    margin-bottom:12px;     font-size: 14px;
  }
  .sidebar-link i.bi-chevron{ margin-left:auto; }
  .sidebar-link.active{
    background:var(--blue); color:#fff;
  }
  .sidebar-link:last-child{ margin-bottom:0; }

  .promo-box{
    background:linear-gradient(160deg,#fdeedc,#fbdcc0);
    border-radius:16px; padding:26px; 
  }
  .promo-box h5{ font-weight:700; margin-bottom:12px; }
  .promo-box p{ color:var(--text-muted); font-size:.92rem; }
  .btn-quote{
    background: #0880C4; color:#fff; border:none; border-radius:8px;
    padding:10px 22px; font-weight:600; font-size:.9rem;
  }
  .btn-quote:hover{ background:var(--blue-dark); color:#fff; }

  .mini-form-box{
    background:#eef2f6; border-radius:16px; padding:24px;

  }
  .mini-form-box h5{ color: #006AAC; font-weight:700; margin-bottom:18px; }
  .mini-form-box .form-label{ font-weight:500; font-size:.88rem; margin-bottom:6px; }
  .mini-form-box .form-control, .mini-form-box .form-select{
    background:#fff; border:1px solid #e2e6ea; border-radius:8px; padding:10px 12px; font-size:.9rem;
  }
  .captcha-option{
    width:50px; height:50px; border:1px solid #e2e6ea; border-radius:10px;
    display:flex; align-items:center; justify-content:center; font-size:1.15rem;
    cursor:pointer; background:#fff; color:var(--text-muted);
  }
  .captcha-option.active{ border-color:var(--blue); color:var(--blue); box-shadow:0 0 0 3px rgba(21,101,192,.12); }
  .btn-submit{
    background:var(--blue); color:#fff; border:none; border-radius:8px; padding:10px 28px; font-weight:600;
  }
  .btn-submit:hover{ background:var(--blue-dark); color:#fff; }


  .benefit-card{
    background: #FBF3EF; border-radius:16px; padding:24px; margin-top:30px;
  }
  .benefit-card img{ border-radius:12px; width:100%;  object-fit:cover; }
  .benefit-card h5{ font-weight:700;  }
  .benefit-card ul{ list-style:none; padding:0; margin:10px 0 0; }
    .benefit-card p{  font-size:.95rem; margin-top: 10px}


  .benefit-card ul li{ display:flex; align-items:flex-start; gap:10px;     margin-bottom: 1px; font-size:.95rem; color:var(--text-dark); }
  .benefit-card ul li i{
   color:var(--orange-dark); background:#fff; border-radius:50%; 
   padding:3px; font-size:.85rem; margin-top:2px; 
}
    .benefit-card .iconwithtext li img{
   width: 16px !important;
    margin-top: 4px;
    height: 16px !important;
    }

.feature-list li{
    list-style: square;}

.content-lead{
        margin-top: 16px;
}

/* ===== Empowering banner ===== */
  .banner-image-section{
    position:relative;
    margin-top:40px;
  }
  .banner-image-section img{
    width:100%; height:460px; object-fit:cover;
  }
  .banner-overlay-card{
    background:#fff; border-radius:16px; padding:36px 40px;
   max-width: 92%; margin:-90px auto 0; position:relative; z-index:2;
    box-shadow:0 20px 50px rgba(11,46,79,.12); text-align:center;
  }
  .banner-overlay-card h3{
    display:inline-block; background:linear-gradient(90deg,#fdeedc,#fff);
    padding:8px 24px; font-weight:700; font-size:1.5rem; margin-bottom:16px;
  }
  .banner-overlay-card p{ color:var(--text-muted); margin:0; }

.our-faqs{
/*    background: white;*/
    padding-top: 2%;
  }

/*  * ===== Our Products ===== */*/
  .products-section{ padding:70px 0 30px; }
  .product-card{ text-align:center;     margin-top: 23px; margin-bottom: 23px;}
  .product-card .img-wrap{
    border-radius: 5px; overflow:hidden; margin-bottom:16px;
  }
  .product-card .img-wrap img{ width:100%; height:100%; object-fit:cover; }
  .product-card h6{ font-weight:600; font-size:1.1rem; }

#career .spark {
    right: 22%;
}

/* ===== Open Roles section ===== */
  .roles-section{ padding:37px 0; }
  .section-eyebrow{
    border-left:4px solid var(--orange); padding-left:16px; font-weight:700; font-size:1.5rem; color:var(--text-dark);
    margin-bottom:6px;
  }
  .section-sub{ color:var(--text-muted); margin-bottom:36px; }

  .roles-photo{
    border-radius:14px; overflow:hidden; 
  }
  .roles-photo img{ width:100%; height:100%; object-fit:cover; height: 363px;}

  .role-card{
    border-bottom:1px solid #eceff2;
    padding:22px 4px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
  }
  .role-card:first-child{ padding-top:0; }
  .role-card .open-role-tag{
    color: #0880C4; font-weight:600; font-size:.78rem; letter-spacing:.5px; text-transform:uppercase;
    margin-bottom:4px; display:block;
  }
  .role-card h5{ font-weight:700; margin-bottom:6px; }
  .role-card .meta{ color:var(--text-muted); font-size:.88rem; }
  .role-card .meta i{ margin-right:4px; }
  .role-card .meta .sep{ margin:0 8px; }

  .btn-toggle-role{
    width:38px; height:38px; border-radius:50%; border:1px solid #e2e6ea;
    display:flex; align-items:center; justify-content:center; background:#fff; color:var(--text-dark);
  }
  .btn-apply{
    background: #ef8c3a; color:#fff; border:none; border-radius:30px;
    padding:10px 22px; font-weight:600; font-size:.88rem; white-space:nowrap;
  }
  .btn-apply:hover{ background:var(--orange); color:#fff; }

  .role-details{
    display:none;
    padding:0 4px 10px;
    color:var(--text-muted);
    font-size:.92rem;
    line-height:1.7;
  }
  .role-card.open + .role-details{ display:block; }

  /* ===== CTA strip ===== */
  .cta-strip{
    background:#f6f9fc;
    border-radius:18px;
    padding: 40px 0px;
    margin-top:40px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:24px;   
        margin-bottom: 10%;

/*     margin-bottom: 5%;*/
  }
  .cta-strip h4{ font-weight:700; margin-bottom:6px; }
  .cta-strip p{ color:var(--text-muted); margin:0; }
  .cta-form{
    display:flex; background:#fff; border-radius:30px; overflow:hidden; min-width:360px;
    box-shadow:0 10px 25px rgba(11,46,79,.06); position:relative; z-index:2;
  }
  .cta-form input{ border:none; flex:1; padding:14px 20px; outline:none; background:transparent; }
  .cta-form button{ background: #0880C4; color:#fff; border:none; padding:0 26px; font-weight:600; }
  .cta-plane{
    position:absolute; right:40px;     top: -16px; font-size:3.5rem; color:var(--text-muted); opacity:.25; transform:rotate(15deg);
  }
  .dashed-circle{
    position:absolute; border:1.5px dashed #cfd8e0; border-radius:50%;
  }
  .dc1{ width:60px; height:60px; left:5%; top:20%; }
  .dc2{ width:30px; height:30px; left:8%; bottom:15%; }
#corporate .spark{

  right: 13%;
    top: 38%;}

    .content-lead strong{
      color: #006AAC;

    }

.products-section .highlight-box1 h2:before {
 
    width: 11%;

}

.bg-headline{
     background: #F97D301A;
    display: inline-flex !important;
    padding: 10px 24px;
    border: 1px solid #F97D30;
    border-radius: 50px;

}

.bg-headline{
    color: #F97D30;
}

/* ===== Policy sections ===== */
  .policy-section{ padding:60px 0 20px; }
  .policy-item{ margin-bottom:34px; }
  .policy-item h4{
    border-left:4px solid var(--orange);
    padding-left:14px;
    font-weight:700;
    font-size:1.3rem;
    margin-bottom:14px;
    color: #1C4DA1;
  }
  .policy-item p{
    color:var(--text-muted);
    line-height:1.8;
    font-size:.98rem;
    margin:0;
  }
  .policy-item p a{ color:var(--blue); text-decoration:none; font-weight:500; }

  /* ===== Contact callout ===== */
  .contact-box{
    background:linear-gradient(90deg, #FEF8F1, #F0F9FC);
    border-left:4px solid var(--orange);
    border-radius:10px;
    padding:30px 34px;
    margin:30px 0 0px;
  }
  .contact-box h4{
    border-left:4px solid var(--orange);
    padding-left:14px;
    font-weight:700;
    font-size:1.3rem;
    margin-bottom:16px;
  }
  .contact-box p{ color:var(--text-muted); line-height:1.8; margin-bottom:8px; }
  .contact-box a{ color:var(--blue); text-decoration:none; font-weight:500; }

  /* ===== Subscribe ===== */
  .subscribe-section{ padding:20px 0 0; }
  .subscribe-box{
    background:linear-gradient(135deg,#fdeedc,#fbdcc0); border-radius:18px; padding:40px;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  }
  .subscribe-box h3{ font-weight:700; font-size:1.6rem; margin:0; max-width:500px; }
  .subscribe-box h3 .underline{ text-decoration:underline; text-decoration-color:var(--orange-dark); text-underline-offset:6px; }
  .subscribe-input-group{
    display:flex; background:#fff; border-radius:30px; overflow:hidden; min-width:380px;
    box-shadow:0 10px 25px rgba(11,46,79,.08);
  }
  .subscribe-input-group input{ border:none; flex:1; padding:14px 20px; outline:none; background:transparent; }
  .subscribe-input-group button{ background:var(--orange-dark); color:#fff; border:none; padding:0 28px; font-weight:600; }

  /* ===== Footer ===== */
  .footer-section{ background:var(--navy); color:#dbe6f0; padding:60px 0 20px; margin-top: 7%;}
  .footer-section h6{ color:#fff; font-weight:700; margin-bottom:18px; }
  .footer-section ul{ list-style:none; padding:0; margin:0; }
  .footer-section ul li{ margin-bottom:10px; }
  .footer-section ul li a{ color:#fff; text-decoration:none;    font-size: 16px; }
  .footer-section ul li a:hover{ color:var(--orange); }
  .footer-social a{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.1);
    display:inline-flex; align-items:center; justify-content:center; color:#fff; margin-right:8px; text-decoration:none;
  }
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:18px; font-size:.85rem; color:#b7c6d4;
  }
  .footer-bottom a{ color:#b7c6d4; text-decoration:none; }

  @media (max-width: 767px){
    .subscribe-box{ flex-direction:column; text-align:center; }
    .subscribe-input-group{ min-width:100%; }
    .intro-box, .contact-box{ padding:22px; }
  }


    .hero-section{
    padding: 0px 0 0px;
/*    text-align:center;*/

  }
  .badge-pill{
    background:#fff; border:1px solid var(--orange); color:var(--orange-dark);
    border-radius:30px; padding:8px 22px; font-weight:600; font-size:.9rem; display:inline-block;
  }
  .last-updated{
    color:var(--text-muted); font-size:.9rem; margin-top:18px;    text-align: center;
  }
  .last-updated i{ font-size:.4rem; vertical-align:middle; margin:0 10px; color:var(--text-muted); }

  /* ===== Intro callout ===== */
  .intro-box{
    background:linear-gradient(90deg, #FEF8F1, #F0F9FC);
    border-left:4px solid var(--orange);
    border-radius:10px;
    padding:24px 30px;
 
    position:relative;
    z-index:2;
    font-size:1.02rem;
    line-height:1.7;
  }

#contact .spark{
    position: absolute;
    right: 5%;
    top: -7%;
  }

.linkedin-icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;
    margin-bottom: 15px;

    border-radius: 4px;
    background: #0077b5;

    color: #fff;
    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.linkedin-icon:hover {
    background: #005f91;
    color: #fff;
}

.back .inner h3{
    color: #0880C4;font-size: 24px;
}

.designation{font-size: 19px;
    margin: 5px 0px;
}    

.back .inner p{
     font-size: 18px;
}
.front .inner .linkedin-icon{

      margin-top: 5px;
    margin-left: 16px;}

.erp-card {
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #eee; /* faint base border so the card still looks complete */
}

.erp-card-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.erp-card-border-rect {
  fill: none;
  stroke: var(orange, #f7941d);
  stroke-width: 2;
  stroke-linecap: round;
  /* dash + gap: dash = the visible "comet", gap = the rest of the rectangle */
  stroke-dasharray: 90 500; 
  stroke-dashoffset: 0;
  animation: erp-border-travel 3s linear infinite;
}

@keyframes erp-border-travel {
  to {
    stroke-dashoffset: -590; /* should equal dash + gap so it loops seamlessly */
  }
}

 .glow-card{
    position:relative;
    width:360px;
    background:#fff;
    border-radius:16px;
    padding:32px 28px;
  }
 
  /* faint base border, matches your static screenshot */
  .glow-card-base-border{
    position:absolute;
    inset:0;
    border-radius:16px;
    border:1.5px solid rgba(247,148,29,.35);
    pointer-events:none;
  }
 
  .glow-card-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
  }
 
  .glow-card-rect{
    fill:none;
    stroke:var(--mx-orange);
    stroke-width:2.5;
    stroke-linecap:round;
    animation:glow-travel linear infinite;
  }
 
  @keyframes glow-travel{
    to{ stroke-dashoffset: var(--dash-end); }
  }
 
  .glow-card-icon{
    width:56px;height:56px;
    border-radius:12px;
    background:#fdece0;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:18px;
  }
  .glow-card h3{
    margin:0 0 12px;
    font-size:19px;
    font-weight:600;
    color:var(--mx-navy);
  }
  .glow-card p{
    margin:0 0 20px;
    font-size:14.5px;
    line-height:1.7;
    color:#666;
  }
  .glow-card-link{
    color:var(--mx-orange);
    text-decoration:none;
    font-weight:600;
    font-size:14.5px;
  }

  
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}

.conic {
  position: relative;
  z-index: 0;
  width: 400px;
  height: 343px;
        border-radius: 20px;
  overflow: hidden;
  padding: 2rem;
  
  &::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #F97D30;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, #f8f8f8, transparent 30%);
    animation: rotate 5s linear infinite;
  }
  
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: #ffffff;
          border-radius: 20px;
  }
}

.conic-demo::after {
  animation: opacityChange 5s infinite linear;
}

@keyframes opacityChange {
  50% {
    opacity:.5;
  }
  100% {
    opacity: 1;
  }
}

#home-c .spark {
    position: absolute;
    right: 5%;
}

/*whatsapp btn*/
.wa-fab{
    position: absolute;
    right: 20px;
    bottom: 10px;
     width: 50px;
    height: 46px;
    border-radius: 50%;
    /* background: #25D366; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #fff; */
    font-size: 28px;
    text-decoration: none;
    /* box-shadow: 0 6px 16px rgba(0, 0, 0, .2); */
    animation: wa-bounce 2.2s ease-in-out infinite;
    z-index: 2;
    padding: 1px;
  }

  @keyframes wa-bounce{
    0%, 100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }

  .wa-tooltip{
    position:absolute;
    right:84px;
    bottom: 5px;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:24px;
    padding:10px 18px 10px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
    font-size:.85rem;
    color:#333;
    opacity:0;
    transform:translateY(6px);
    animation:wa-tooltip-cycle 4s ease-in-out infinite;
  }

  .wa-tooltip .bot-icon{
    width:22px;
    height:22px;
    border-radius:50%;
/*    background:#eaf4ff;*/
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2e9bf0;
    font-size:13px;
    flex-shrink:0;
  }

  @keyframes wa-tooltip-cycle{
    0%   { opacity:0; transform:translateY(6px); }
    15%  { opacity:1; transform:translateY(0); }
    70%  { opacity:1; transform:translateY(0); }
    85%  { opacity:0; transform:translateY(6px); }
    100% { opacity:0; transform:translateY(6px); }
  }

  .wa-wrapper{

      position: fixed;
    bottom: 2rem;
    width: 50px;
    height: 50px;
    z-index: 11;
    right: 2%;
    top: unset !important;


  }
@.logo-slider {
    width: 100%;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.logo-track {
    display: flex;
    width: max-content;
    gap: 0;
    margin: 0;
    padding: 0;

    --scroll-distance: 1000px;
    --scroll-duration: 20s;

    animation: logo-scroll var(--scroll-duration) linear infinite;
    will-change: transform;
}

.logo-slide {
    width: 250px;
    min-width: 250px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin: 0 !important;
    padding: 0 !important;
}

.logo-slide img {
    display: block;

    width: 250px;
    height: 100px;

    object-fit: contain;

    margin: 0 !important;
    padding: 0 !important;
}

@keyframes logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--scroll-distance)));
    }
}


/* Left fade */
.logo-slider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;

    width: 100px;
    height: 100%;

    z-index: 2;
    pointer-events: none;

 /*   background: linear-gradient(
        to right,
        #fff 0%,
        rgba(255, 255, 255, 0) 100%
    );*/
}


/* Right fade */
.logo-slider::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;

    width: 100px;
    height: 100%;

    z-index: 2;
    pointer-events: none;

   /* background: linear-gradient(
        to left,
        #fff 0%,
        rgba(255, 255, 255, 0) 100%
    );*/
}
#home1 {
    padding: 0px 0 0px;

}

.journey-wrap .highlight-box1 h2:before {
    width: 13%;

}

.our-clients .highlight-box1 h2:before {
    width: 11%;

}

.our-team .highlight-box1 h2:before {
  
    width: 18%;
 

}

.our-team .card-container{
margin-top: 25px;
}
/*2744*/
/* =========================================
   OTHER TEAM - DISABLE FLIP ANIMATION
   ========================================= */

/* Prevent hover rotation */
.other-team .card-container:hover .front {
    transform: rotateY(0deg) !important;
    -webkit-transform: rotateY(0deg) !important;
}

/* Disable transition */
.other-team .card-container .front {
    transform: rotateY(0deg) !important;
    -webkit-transform: rotateY(0deg) !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Remove 3D behavior */
.other-team .card-container,
.other-team .card-container .front {
    transform-style: flat;
    -webkit-transform-style: flat;
    perspective: none;
    -webkit-perspective: none;
}

.promo-box .hero-cta{
    margin-top: 10px;
}

.select-wrapper {
    position: relative;
}

.select-wrapper .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 45px;
}

.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: #555;
}
.box-img{
    width: 100px;
    float: left;
    padding-right: 25px;
}

/* ===== Sticky Sidebar (PayMax page) =====
   .col-lg-4 must stay full row height (Bootstrap default align-items: stretch)
   so the sticky box has room to travel — do NOT set align-items/align-self: flex-start here. */
.page-service-single .sidebar-box {
 /*   position: -webkit-sticky;
    position: sticky;
    top: 100px;   /* adjust this to match your fixed header height */
    z-index: 10;*/
}


.erp-slider-section .grp-heading p {
    color: black;
    font-size: 16px;
    padding-top: 10px;
}


.service-sidebar {
    position: sticky;
    top: 100px; /* adjust to sit just below your fixed navbar height */
    align-self: flex-start; /* important: prevents it from stretching full column height */
}

@media (max-width: 991.98px) {
    .service-sidebar {
        position: static;
    }
}



#employee-onboarding .spark {
    position: absolute;
    right: 14%;
}


#paymax-payroll .spark {
  position: absolute;
    right: 3%;
}

#time-attendance .spark {
    right: 6%;
}


#faq-timeattan .highlight-box1 h2:before {
    content: '';
    position: absolute;
    width: 14%;
    }

  #auto-timeattan  .highlight-box1 h2:before {
    content: '';
    position: absolute;
    width: 17%;
 }

 #auto-billing .spark {
    right: 11%;
    }

 #maxfinancial .spark {
  right: 7%;
    }


#onlinefaq .highlight-box1 h2:before {
    content: '';
    position: absolute;
    width: 14%;
       }

 #labour-compliance .spark {
   right: -3%;
       }

  

 #pf-ecr-highlighter .spark {
    right: 13%;
       }

  
 #online-material .spark {
      right: -3%;
       }

.our-clients{
      overflow: hidden;
}

.faqs-content .spark {
    position: absolute;
      right: 5%;
}
.content-hero-img img{
  width: 100%;
}
.max-site-faq img{

    height: 350px;
    width: 100%;
    object-fit: cover;


}

.max-site-faq .highlight-box1 h2:before {
    content: '';
    position: absolute;
    width: 16%;
}

#max-site .spark{
right: -3%;
}
  


#max-edge .spark{
right: -3%;
}
.home-slider .grp-heading{

display: none;
}

.content-box-product{
      padding-left: 5%;
}

.max-site-card img {
     height: 149px;   

    }

.contact-info li img{
        align-self: self-start;
    padding-top: 6px;

}
.icon_logo>a>img {
    width: 100%;
    padding: unset;
    border: none;
}


.circle_waves {
    border-radius: 50%;
    background-color: #3cc04e;
    width: 50px;
    height: 50px;
    position: absolute;
    opacity: 0;
    bottom: 1px;
    left: 0;
    z-index: 99;

    animation: waves 4s infinite cubic-bezier(.36,.11,.89,.32);    z-index: 0;
}

@keyframes waves{
0% {
    transform: scale(.55, .55);
    opacity: .6;
}
100% {
    transform: scale(1.8, 1.8);
    opacity: 0;
}

}  
 .icon_logo {
    position: relative;
    z-index: 100;
    padding: 5px;
}

.whatsap-logo{
      z-index: 1;
    position: absolute;
}



/* ==============================
   MOBILE - NORMAL CARD LAYOUT
   ============================== */
@media (max-width: 767px) {

    .body1 .pin-spacer {
        height: auto !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    .body1 .cards-section {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        translate: none !important;
    }

    .body1 .cards {
        position: relative !important;
        height: auto !important;
    }

    .body1 .card {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        transform: none !important;
        translate: none !important;
        margin-bottom: 25px !important;
    }

    .body1 .customer-card {
        padding: 25px 15px;
    }

    .body1 .customer-content {
        margin-bottom: 20px;
    }

    .body1 .customer-image img {
        width: 100%;
        height: auto;
    }
}

   #home1 .hero-content {

    margin-top: 3%;
}

.products-section{
     padding-bottom: 4%;
}

#patners-growth .cards {
 
    margin-top: 0rem;
}

#patners-growth {
  margin-bottom: 7%;
}

/*#carouselExampleAutoplaying .carousel-item {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;

}*/

.mx-services .row>* {
    padding-right: 0px;

}
.our-faqs img{

        border-radius: 22px;
}


.hero-dashboard-wrap {
  position: relative;
}

.hero-callout {
  position: absolute;
  top: 21%;
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 16px 20px;
  max-width: 220px;
  font-weight: 500;
  text-align: left;
  z-index: 5;
  font-size: 30px;
  transition: opacity 0.25s ease;
}

/* LEFT side variant (default position from your original CSS) */
.hero-callout.side-left {
  left: -19%;
  right: auto;
}
.hero-callout.side-left::after {
  content: "";
  position: absolute;
  bottom: -121%;
  left: 30px;
  right: auto;
      width: 121px;

  height: 114px;
  background: url(../wp-media/banarrow.svg) no-repeat;
  transform: scaleX(1);
}

/* RIGHT side variant — mirrored */
.hero-callout.side-right {
  left: auto;
  right: -19%;
}
.hero-callout.side-right::after {
  content: "";
  position: absolute;
  bottom: -121%;
  right: 30px;
  left: auto;
  width: 114px;
  height: 114px;
  background: url(../wp-media/banarrow.svg) no-repeat;
  transform: scaleX(-1); /* flips the arrow to point the other way */
}

/* Optional fade while text swaps */
.hero-callout.is-swapping {
  opacity: 0;
}

.clients-carousel .owl-dots{
  display: none;

}

/*    .subheadline span {
      
        padding-right: 15px;
    }
*/
.head-center{
display: flex;
    justify-content: center;
}

#contact .text-underline-accent::after {
  
    left: 4%;
}

.hero-title {

    margin: 25px 0px;
}

#contact .subheadline {

    margin-bottom: 25px;
}
.req{
  color: red;
}
.we-are-located img{
width: 23%;
}

.subheadline  span {
  
    padding-right: 8px;
    }
    .box-img img{

    height: 101px;
    }

  .sidebar-box img{
    width: 8%; }
.sidebar-box .active img {
    filter: invert(1);
}

.select-wrap {
    position: relative;
}

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
}

.roles-photo{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 100px !important;
    z-index: 10 !important;
}
#apply-now .spark{
    right: 31%;
    top: 8%;
}


.select-wrap {
    position: relative;
}

.select-wrap .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}

.select-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: #555;
}

 .maxus-cta {
    position: relative;
/*    background: url(../wp-media/car-bg.jpeg);*/
background: #e8f0f3;
    border-radius: 16px;
    padding: 48px 24px 40px;
    overflow: hidden;
    text-align: center;
        background-size: contain;
        margin-bottom: 15%;background-repeat: no-repeat;
  }
 
  .maxus-cta h2 {
    font-weight: 700;
    font-size: 1.9rem;
    color: #17202a;
    margin-bottom: 14px;
  }
 
  .maxus-cta p.lead-text {
    color: #5b6b79;
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto 28px;
    line-height: 1.6;
  }
 
  .contact-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
 
  .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
 
  .contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
 
  .contact-item .label {
    font-size: 0.85rem;
    color: #5b6b79;
    margin-bottom: 2px;
  }
 
  .contact-item .value {
    font-weight: 700;
    color: #2563eb;
    font-size: 1rem;
  }
 
  .divider {
    width: 1px;
    height: 40px;
    background: #cbd8e3;
  }
 
  .maxus-cta .tagline {
    color: #17202a;
    font-weight: 500;
    margin: 0;
  }
 
  /* decorative dashed swirl - left */
  .swirl-left {
    position: absolute;
    left: -10px;
    top: 40%;
    width: 220px;
    height: 140px;
    pointer-events: none;
  }
 
  /* decorative dashed swirl + paper plane - right */
  .swirl-right {
    position: absolute;
    right: -10px;
    top: 10%;
    width: 260px;
    height: 180px;
    pointer-events: none;
  }
 
  @media (max-width: 767px) {
    .swirl-left, .swirl-right { display: none; }
    .divider { display: none; }
    .contact-row { gap: 18px; }
  }


  #corporate-faq .highlight-box1 h2:before {

    width: 15%;
      }


#corporate-benifit img {
    
    width: 100%;
    height: 292px;
  }
  .social-icons img{
    width: 24px;
    height: 24px;
  }

  .stiky-side{
     position: -webkit-sticky;
    position: sticky;
    top: 100px;   
    z-index: 10;
  }
.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label{
  color: unset !important;
}
#lf_privacy_consent.is-invalid { outline: 2px solid #dc3545; outline-offset: 2px; }