/* ===== RK Refresh color system (scoped) =====
How to use (per Container):
- White bg, #444 text, orange links, orange button (white text):
  add: rk-scope rk-light rk-links-orange rk-btn-orange
- Dark blue bg, white text, light blue links, light blue H2/H3:
  add: rk-scope rk-dark rk-head-blue rk-links-blue

Per element: rk-text-blue / rk-heading-orange / rk-btn-orange (Fusion Button), etc.
*/

body {font-weight:500 !important;}

.hero-img-fullwidth {margin-right: -60px;}

.getstarted-box {position: relative; z-index: 2; 
	margin: 20px 30px; border-radius: 0px 32px 25px 25px; 
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);transition: box-shadow 0.3s ease;
    overflow:hidden;}

/* Container to position the button relative to the image */
.pulsing-video-avad-container-centered {margin:0 auto;}
.pulsing-button-container {
    position: relative;
    display: inline-block; /* Behaves like an image but allows positioning context */
    line-height: 0; /* Removes extra space below the image */
	margin:0 auto;
	max-width:800px;
}

.end-quote-blue {
    color: #4097b5;
    font-family: Georgia;
    font-size: 4.4rem;
    position: relative;
    top: 32px;
    line-height: 0;
    padding: 1px 0 0 5px;
}

.pulsing-button-container img {
    box-shadow: 0px 9px 20px rgba(0, 0, 0, 0.3);
	margin:0  auto;
}

/* Make sure the image is responsive */
.pulsing-button-container img {
    max-width: 100%;
    height: auto;
}

/* The main play button style with animation */
.pulsing-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: ermPopvdPulse 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(229, 103, 45, 0.25);
}

/* The inner orange circle */
.pulsing-play-button::before {
    content: "";
    width: 78px;
    height: 78px;
    background-color: #e5672d;
    border-radius: 50%;
    display: block;
    position: relative;
    z-index: 1;
}

/* The white play triangle icon */
.pulsing-play-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 32px;
    border-color: transparent transparent transparent white;
    z-index: 2;
}

/* The pulsing animation keyframes */
@keyframes ermPopvdPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(229, 103, 45, 0.25);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
        box-shadow: 0 0 0 12px rgba(229, 103, 45, 0.12);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(229, 103, 45, 0.0);
    }
}

/* Responsive styles for smaller screens */
@media (max-width: 768px) {
    .pulsing-play-button {
        width: 90px;
        height: 90px;
    }
    .pulsing-play-button::before {
        width: 64px;
        height: 64px;
    }
    .pulsing-play-button::after {
        border-width: 16px 0 16px 26px;
    }
}


.refresh-b600 h1 {
	color: #5da4b8 !important; 
	font-weight: 600 !important; 
	font-size: 3.2rem !important;
	padding-bottom: .8rem !important;
}

.refresh-b400-spaced h2 {
	color: #737273 !important; 
	font-weight: 400 !important; 
	font-size: 1.5rem !important; 
	word-spacing: 0.1em;
}
/* Base styles for all color variants */
.refresh-b600, 
.refresh-b600-blue, 
.refresh-b600-white, 
.refresh-b600-orange {
	font-weight: 600 !important; 
	font-size: 2.7rem !important; 
	/* NOTE: A line-height of 2rem is smaller than your font-size, which will cause text to overlap. 
	   A value of at least 3.2rem is recommended for readability on desktop. */
	line-height: 3rem; 
	margin: 0px !important; 
	padding: 0px;
}

/* Heading inheritance rules */
.refresh-b600 :is(h2, h3, h4, p), 
.refresh-b600-blue :is(h2, h3, h4, p), 
.refresh-b600-white :is(h2, h3, h4, p), 
.refresh-b600-orange :is(h2, h3, h4, p) {
	font-weight: inherit;	
}

/* Color definitions */
.refresh-b600, .refresh-b600 :is(h2, h3, h4, p) {
	color: #000000 !important;
}
.refresh-b600-blue, .refresh-b600-blue :is(h2, h3, h4, p) {
	color: #4097b5 !important;
}
.refresh-b600-white, .refresh-b600-white :is(h2, h3, h4, p) {
	color: #ffffff !important;
}
.refresh-b600-orange, .refresh-b600-orange :is(h2, h3, h4, p) {
	color: #e5672d !important;
}

/* NEW: Helper class for applying blue color to text inside other elements */
.text-blue {
	color: #4097b5 !important;
}


@media only screen and (max-width: 800px) {
	.refresh-b600,
	.refresh-b600-blue,
	.refresh-b600-white,
	.refresh-b600-orange {
		/* ADDED: Smaller font-size for mobile. The !important tag is required to override the desktop style. */
		font-size: 2rem !important; 
		
		/* FIXED: Adjusted line-height to match the new font size for better readability on mobile. */
		line-height: 2rem !important; 
		margin:0 0 10px 0 !important;
	}
}





/* --- Snake Line Global Styles --- */

/* Anchor for positioning. Apply this class to the Avada Column 
   that contains the content and its corresponding snake line code. */
.line-anchor {
  position: relative;
}

/* Common styles for all snake paths (color, thickness, animation) */
.snake-path1, .snake-path2, .snake-path3, .snake-path4, .snake-path5 {
	fill: none;
	stroke: #df6b2b;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 3000;
	stroke-dashoffset: 3000;
	transition: stroke-dashoffset 1.2s ease-out;
}

/* NEW: Common positioning styles for ALL snake areas */
.snake-area1, .snake-area2, .snake-area3, .snake-area4, .snake-area5 {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}


/* --- Snake Line 1 --- */
@media (min-width: 1820px) {
  .snake-area1 {
    top: -290px;
    left: 10%;
    width: 60%;
    max-width: 3400px;
  }
}
@media (min-width: 1025px) and (max-width: 1819px) {
  .snake-area1 {
    top: -225px !important;
    left: 250px !important;
    width: 900px !important;
  }
}


/* --- Snake Line 2 --- */
@media (min-width: 1820px) {
  .snake-area2 {
    top: -60px;
    left: 50%;
    width: 60%;
  }
}
@media (min-width: 1025px) and (max-width: 1819px) {
  .snake-area2 {
    top: -50px !important;
    left: 52% !important;
    width: 900px !important;
  }
}


/* --- Snake Line 3 --- */
@media (min-width: 1820px) {
  .snake-area3 {
    top: -100px;
    left: 15%;
    width: 50%;
  }
}
@media (min-width: 1673px) and (max-width: 1819px) {
  .snake-area3 {
    top: -90px;
    left: 15%;
    width: 50%;
  }
}
@media (min-width: 1485px) and (max-width: 1672px) {
  .snake-area3 {
    top: -110px;
    left: 15%;
    width: 60%;
  }
}
@media (min-width: 500px) and (max-width: 1454px) {
  .snake-area3 {
    top: -80px;
    left: 15%;
    width: 60%;
  }
}


/* --- Snake Line 4 --- */
@media (min-width: 1820px) {
  .snake-area4 {
    top: 400px;
    left: 50%;
    width: 50%;
  }
}
@media (min-width: 1025px) and (max-width: 1819px) {
  .snake-area4 {
    top: 440px !important;
    left: 50% !important;
    width: 50% !important;
  }
}


/* --- Snake Line 5 --- */
@media (min-width: 1820px) {
  .snake-area5 {
    top: -110px;
    left: -15%;
    width: 57%;
  }
}
@media (min-width: 1775px) and (max-width: 1819px) {
  .snake-area5 {
    top: -110px !important;
    left: -15% !important;
    width: 57% !important;
  }
}
@media (min-width: 1355px) and (max-width: 1774px) {
  .snake-area5 {
    top: -70px !important;
    left: -15% !important;
    width: 50% !important;
  }
}
@media (min-width: 1025px) and (max-width: 1354px) {
  .snake-area5 {
    top: -10px !important;
    left: -15% !important;
    width: 40% !important;
  }
}

/* --- Hides ALL lines on Tablet & Mobile screens --- */
@media (max-width: 1024px) {
  .snake-area1, .snake-area2, .snake-area3, .snake-area4, .snake-area5 {
    display: none !important;
  }
}

/*End snake line css*/










.erm-page-b600 h1{font-weight: 600;}
.erm-page-b400 h2{font-weight: 400;}

.erm-page-word-loose h2{ word-spacing: 0.1em; }

.page-full-width { margin: 0px -50px !important}



.erm-page-rk-orange {color: #e5672d}


.fusion-accordian .panel-title .fusion-toggle-heading{color: #444444;font-weight: 300;font-family: Lato, Arial, Helvetica, sans-serif;font-size: 18px;}

.fusion-accordian .panel-title a .fa-fusion-box{background-color: unset !important;color: #4444448c;}

.fusion-accordian .panel-title a .fa-fusion-box:before{font-size: 24px;}

.fusion-button-default.blu-out-btn:hover{border: 2px solid #4097b5;color: #4097b5 !important;}
.fusion-button-default.blu-out-btn:hover .fusion-button-text {color: #4097b5 !important;}

.fusion-button-default.green-out-btn:hover{border: 2px solid #4c9e45;color: #4c9e45 !important;}
.fusion-button-default.green-out-btn:hover .fusion-button-text {color: #4c9e45 !important;}

.page-text-block li{margin-bottom: 8px;}

.demo-sc-img{border-radius: 4px 4px 4px 4px;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);transition: box-shadow 0.3s ease;}

.erm-page-footer-hs-form{max-width: 680px !important; margin: 0px auto !important;}

.erm-page-footer-hs-form .hs-form-footer div input[type=submit]{background-color: #e26b2b !important;padding: 6px 25px;border-radius: 5px;color: #fff !important;text-align: center !important;margin-top: -35px;font-size: 16px;}

.erm-page-footer-hs-form .hs-form-footer div label{color:#fff}

.erm-page-footer-hs-form .hs-form-footer .legal-consent-container{color:#fff}

.erm-page-footer-hs-form .hs-form-footer .actions{text-align: center !important;}

.erm-page-footer-hs-form .hs-form-footer div input[type=email]{width: 100%;}

/*end page transfer */

body.rk-refresh{
  --rk-blue:   #5da4b8;
  --rk-orange: #e5672d;
  --rk-white:  #ffffff;
  --rk-black:  #444444;

  /* active variables (cascade through scopes) */
  --rk-bg:      var(--rk-white);
  --rk-body:    var(--rk-black);
  --rk-link:    var(--rk-blue);
  --rk-link-h:  var(--rk-link); /* fallback first */
  --rk-heading: var(--rk-blue);
  --rk-btn-bg:  var(--rk-orange);
  --rk-btn-tx:  var(--rk-white);
  /* nicer hover where supported */
  --rk-link-h:  color-mix(in oklab, var(--rk-link) 85%, black);
}

/* ---------- SECTION SCOPE ---------- */
body.rk-refresh .rk-scope{ background:var(--rk-bg); color:var(--rk-body); }
body.rk-refresh .rk-scope p,
body.rk-refresh .rk-scope li,
body.rk-refresh .rk-scope blockquote{ color:var(--rk-body); }

body.rk-refresh .rk-scope a:not(.fusion-button){ color:var(--rk-link); }
body.rk-refresh .rk-scope a:not(.fusion-button):hover,
body.rk-refresh .rk-scope a:not(.fusion-button):focus{ color:var(--rk-link-h); }

/* Headings (Fusion Title + plain h1/2/3) */
body.rk-refresh .rk-scope .fusion-title .title-heading-left,
body.rk-refresh .rk-scope .fusion-title .title-heading-center,
body.rk-refresh .rk-scope .fusion-title .title-heading-right,
body.rk-refresh .rk-scope h1,
body.rk-refresh .rk-scope h2,
body.rk-refresh .rk-scope h3{ color:var(--rk-heading); }

/* Buttons in scope (Fusion Button) */
body.rk-refresh .rk-scope .fusion-button{
  background:var(--rk-btn-bg);
  border-color:var(--rk-btn-bg);
  background-image:none; /* defeat Avada gradients */
}
body.rk-refresh .rk-scope .fusion-button .fusion-button-text{ color:var(--rk-btn-tx); }

/* ---------- SECTION PRESETS ---------- */
body.rk-refresh .rk-scope.rk-light{
  --rk-bg:      var(--rk-white);
  --rk-body:    var(--rk-black);
  --rk-link:    var(--rk-orange);
  --rk-link-h:  #c7561f;
  --rk-heading: var(--rk-blue);
  --rk-btn-bg:  var(--rk-orange);
  --rk-btn-tx:  var(--rk-white);
}
body.rk-refresh .rk-scope.rk-dark{
  --rk-bg:      #0e2a47;
  --rk-body:    #ffffff;
  --rk-link:    var(--rk-blue);
  --rk-link-h:  #8cc7d6;
  --rk-heading: var(--rk-blue);
  --rk-btn-bg:  var(--rk-blue);
  --rk-btn-tx:  #0e2a47;
}

/* ---------- MIX-AND-MATCH ADD-ONS (scoped) ---------- */
body.rk-refresh .rk-scope.rk-links-orange{ --rk-link:var(--rk-orange); --rk-link-h:#c7561f; }
body.rk-refresh .rk-scope.rk-links-blue  { --rk-link:var(--rk-blue);   --rk-link-h:#8cc7d6; }

body.rk-refresh .rk-scope.rk-head-blue,
body.rk-refresh .rk-scope.rk-headings-blue { --rk-heading:var(--rk-blue); }
body.rk-refresh .rk-scope.rk-head-white,
body.rk-refresh .rk-scope.rk-headings-white{ --rk-heading:var(--rk-white); }
body.rk-refresh .rk-scope.rk-head-orange,
body.rk-refresh .rk-scope.rk-headings-orange{ --rk-heading:var(--rk-orange); }

body.rk-refresh .rk-scope.rk-btn-orange{ --rk-btn-bg:var(--rk-orange); --rk-btn-tx:var(--rk-white); }
body.rk-refresh .rk-scope.rk-btn-blue  { --rk-btn-bg:var(--rk-blue);   --rk-btn-tx:#0e2a47; }
body.rk-refresh .rk-scope.rk-btn-white { --rk-btn-bg:var(--rk-white);  --rk-btn-tx:var(--rk-black); }

/* ---------- ELEMENT-LEVEL UTILITIES ---------- */
/* text */
body.rk-refresh .rk-text-blue{ color:var(--rk-blue); }
body.rk-refresh .rk-text-white{ color:var(--rk-white); }
body.rk-refresh .rk-text-orange{ color:var(--rk-orange); }
body.rk-refresh .rk-text-black{ color:var(--rk-black); }

/* links (non-buttons) */
body.rk-refresh .rk-link-blue:not(.fusion-button){ color:var(--rk-blue); }
body.rk-refresh .rk-link-orange:not(.fusion-button){ color:var(--rk-orange); }

/* one-off headings */
body.rk-refresh .rk-heading-blue   h1,
body.rk-refresh .rk-heading-blue   h2,
body.rk-refresh .rk-heading-blue   h3,
body.rk-refresh .rk-heading-blue   .title-heading-left,
body.rk-refresh .rk-heading-blue   .title-heading-center,
body.rk-refresh .rk-heading-blue   .title-heading-right{ color:var(--rk-blue); }

body.rk-refresh .rk-heading-white  h1,
body.rk-refresh .rk-heading-white  h2,
body.rk-refresh .rk-heading-white  h3,
body.rk-refresh .rk-heading-white  .title-heading-left,
body.rk-refresh .rk-heading-white  .title-heading-center,
body.rk-refresh .rk-heading-white  .title-heading-right{ color:var(--rk-white); }

body.rk-refresh .rk-heading-orange h1,
body.rk-refresh .rk-heading-orange h2,
body.rk-refresh .rk-heading-orange h3,
body.rk-refresh .rk-heading-orange .title-heading-left,
body.rk-refresh .rk-heading-orange .title-heading-center,
body.rk-refresh .rk-heading-orange .title-heading-right{ color:var(--rk-orange); }

/* button-only one-offs (Fusion Button element) */
body.rk-refresh .rk-btn-orange.fusion-button{ background:var(--rk-orange); border-color:var(--rk-orange); background-image:none; }
body.rk-refresh .rk-btn-orange.fusion-button .fusion-button-text{ color:var(--rk-white); }

body.rk-refresh .rk-btn-blue.fusion-button{ background:var(--rk-blue); border-color:var(--rk-blue); background-image:none; }
body.rk-refresh .rk-btn-blue.fusion-button .fusion-button-text{ color:#0e2a47; }

body.rk-refresh .rk-btn-white.fusion-button{ background:var(--rk-white); border-color:var(--rk-white); background-image:none; }
body.rk-refresh .rk-btn-white.fusion-button .fusion-button-text{ color:var(--rk-black); }

/* ---------- GUTTER / PADDING UTILITIES (Containers) ---------- */
body.rk-refresh .rk-gutters-default   > .fusion-row{ padding-left:30px!important; padding-right:30px!important; }
body.rk-refresh .rk-gutters-slim      > .fusion-row{ padding-left:15px!important; padding-right:15px!important; }
body.rk-refresh .rk-gutters-none      > .fusion-row{ padding-left:0!important;  padding-right:0!important; }
body.rk-refresh .rk-gutter-left-0     > .fusion-row{ padding-left:0!important; }
body.rk-refresh .rk-gutter-right-0    > .fusion-row{ padding-right:0!important; }
@media (max-width:767.98px){
  body.rk-refresh .rk-gutters-default > .fusion-row,
  body.rk-refresh .rk-gutters-slim    > .fusion-row{ padding-left:16px!important; padding-right:16px!important; }
  body.rk-refresh .rk-gutters-none    > .fusion-row,
  body.rk-refresh .rk-gutter-left-0   > .fusion-row,
  body.rk-refresh .rk-gutter-right-0  > .fusion-row{ padding-left:0!important; padding-right:0!important; }
}

/* ---------- EDGE BLEEDS (Container background to window edge) ---------- */
body.rk-refresh .rk-edge-left,
body.rk-refresh .rk-edge-right,
body.rk-refresh .rk-edge-both{ position:relative; width:100vw; }
body.rk-refresh .rk-edge-left { margin-left:calc(50% - 50vw); }
body.rk-refresh .rk-edge-right{ margin-right:calc(50% - 50vw); }
body.rk-refresh .rk-edge-both { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* ---------- COLUMN HELPERS ---------- */
body.rk-refresh .rk-col-pad-0 > .fusion-column-wrapper{ padding:0!important; }
body.rk-refresh .rk-img-fill{ display:block; width:100%; height:auto; }


/* === RK Refresh: unlock content width + slim base gutters (sitewide on RK pages) === */
body.rk-refresh{ overflow-x:hidden; }
body.rk-refresh #main .fusion-row{
  max-width:none !important;
  padding-left:15px !important;
  padding-right:15px !important;
}
@media (max-width:767.98px){
  body.rk-refresh #main .fusion-row{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* === Make Avada Fusion Title headings pick up our section heading color === */
/* Avada uses var(--awb-text-color) on its heading selector; set it per section. */
body.rk-refresh .rk-scope{
  /* keep your existing rules… */
  --awb-text-color: var(--rk-heading);
}


/* ===== Single-class helpers ===== */

/* 1) Full-bleed band: zero container gutters + hit both window edges */
body.rk-refresh .rk-band-zero {
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.rk-refresh .rk-band-zero > .fusion-row { /* remove container gutters */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Left column: slim left padding only */
body.rk-refresh .rk-col-left-slim > .fusion-column-wrapper { padding-left: 15px !important; }
@media (max-width: 767.98px){
  body.rk-refresh .rk-col-left-slim > .fusion-column-wrapper { padding-left: 16px !important; }
}

/* 3) Right column: zero right padding + zero margin on the column */
body.rk-refresh .rk-col-right-0 { margin-right: 0 !important; }
body.rk-refresh .rk-col-right-0 > .fusion-column-wrapper { padding-right: 0 !important; }

/* 4/5) Per-heading color on a Fusion Title (use ONE of these on the element) */
body.rk-refresh .rk-heading-blue   .title-heading-left,
body.rk-refresh .rk-heading-blue   .title-heading-center,
body.rk-refresh .rk-heading-blue   .title-heading-right { color: var(--rk-blue); }

body.rk-refresh .rk-heading-orange .title-heading-left,
body.rk-refresh .rk-heading-orange .title-heading-center,
body.rk-refresh .rk-heading-orange .title-heading-right { color: var(--rk-orange); }

body.rk-refresh .rk-heading-white  .title-heading-left,
body.rk-refresh .rk-heading-white  .title-heading-center,
body.rk-refresh .rk-heading-white  .title-heading-right { color: #fff; }

/* 6) Image should actually touch the column edge */
body.rk-refresh .rk-img-fill { display:block; width:100%; height:auto; }




/* =========================================================
   SINGLE-CLASS SHORTCUTS (containers, columns, image)
   ========================================================= */

/* 1) Whole container: zero padding + zero margins + edge-to-edge band */
body.rk-refresh .rk-band-zero {
  /* bleed the container band to both edges */
  position: relative;
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* kill the Avada row padding AND its negative side margins inside this band */
body.rk-refresh .rk-band-zero > .fusion-row {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;     /* override inline max-width */
}

/* 2) Left column: slim left “gutter” (15px), no extra margin */
body.rk-refresh .rk-col-left-slim > .fusion-column-wrapper { 
  padding-left: 15px !important;
}
body.rk-refresh .rk-col-left-slim {
  /* neutralize Avada’s column margins at all breakpoints */
  --awb-margin-left-large: 0 !important;
  --awb-margin-left-medium: 0 !important;
  --awb-margin-left-small: 0 !important;
}

/* 3) Right column: one class to force ZERO right padding & margin */
body.rk-refresh .rk-col-right-zero > .fusion-column-wrapper {
  padding-right: 0 !important;
}
body.rk-refresh .rk-col-right-zero {
  /* neutralize the inline AWB right margins on all breakpoints */
  --awb-margin-right-large: 0 !important;
  --awb-margin-right-medium: 0 !important;
  --awb-margin-right-small: 0 !important;
}

/* 4) Image helper: fill its column. Use with rk-col-right-zero. */
body.rk-refresh .rk-img-fill { display:block; width:100%; height:auto; }

/* (Optional) If a specific image still needs to kiss the viewport edge
   inside a non-zero band, add rk-touch-right to that image element. */
body.rk-refresh img.rk-touch-right { margin-right: calc(50% - 50vw) !important; }

/* ==================== Start ERP page css ==================== */


/* page Product Highlights Section */
  :root {
    --bg: #122644;
    --text: #ffffff;
    --text-muted: #b0dfff;
    --accent: #5da4b8;
  }


  .hvtabs-feature-bar {
    width: 90%;
    padding: 40px 0px 0px 0px;
    background-color: var(--bg);
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: var(--text);
	  margin: 0 auto;
  }

  .hvtabs-feature-tabs {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 40px;
  }

  .hvtabs-feature-list {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 95px;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
  }

  .hvtabs-feature-list li {
    cursor: pointer;
    font-weight: 300;
    position: relative;
    padding-bottom: 30px;
    white-space: nowrap;
    text-align: center;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 80px;
    color: var(--text);
    transition: color 0.25s ease;
	  margin-bottom: 120px;
  }

  .hvtabs-feature-list li.hovering,
  .hvtabs-feature-list li.default-active {
    color: var(--accent);
  }

  .hvtabs-feature-list li::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff;
    transition: opacity 0.2s ease;
    opacity: 1;
  }

  .hvtabs-feature-list li.hovering::after,
  .hvtabs-feature-list li.default-active::after {
    opacity: 0;
  }

  .hvtabs-feature-hover-line {
    position: absolute;
    bottom: 50px;
    height: 4px;
    background-color: var(--accent);
    left: 0;
    width: 0;
    border-radius: 2px;
    transition: left 0.25s ease, width 0.25s ease, opacity 0.2s ease;
    opacity: 0;
    z-index: 2;
	  display:none;
  }

  .hvtabs-feature-desc-inline {
    position: absolute;
    top: 100%;
    left: 100%;
    transform: translateX(-50%);
    background-color: transparent;
    color: #fff;
    font-size: 18px;
    padding: 20px 6px 12px 6px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: block;
    overflow: visible;
    width: 290px;
    max-width: none;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
	border-bottom: 4px #5da4b8 solid;
  }

  .hvtabs-feature-list li.hovering .hvtabs-feature-desc-inline,
  .hvtabs-feature-list li.default-active .hvtabs-feature-desc-inline {
    opacity: 1;
  }

  @media (max-width: 1024px) and (min-width: 769px) {
  .hvtabs-feature-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px 40px; /* vertical and horizontal spacing */
    max-width: 900px;
    margin: 0 auto;
  }

  .hvtabs-feature-list li {
    flex: 1 1 calc(50% - 40px); /* two items per row */
    font-size: 18px;
    height: auto;
    padding-bottom: 20px;
    white-space: normal;
    text-align: center;
    min-width: 200px;
    max-width: 300px;
    position: relative;
  }

  .hvtabs-feature-desc-inline {
    position: static;
    transform: none;
    font-size: 14px;
    padding-top: 12px;
    width: 100%;
    text-align: center;
    opacity: 1;
  }

  .hvtabs-feature-hover-line {
    display: none !important;
  }

  .hvtabs-feature-list li::after {
    display: none !important;
  }
    .hvtabs-last-li{text-align: center !important;}
    .hvtabs-feature-bar{padding-bottom:0px}
}

@media (max-width: 768px) {
	.hvtabs-last-li{text-align:center !important;}
	.hvtabs-feature-list {
		flex-direction: column;
		gap: 20px;
		align-items: center;
	}

	.hvtabs-feature-list li {
		font-size: 26px;
		height: auto;
		padding-bottom: 10px;
		text-align: center;
	}

	.hvtabs-feature-list li::after,
	.hvtabs-feature-hover-line {
		display: none !important;
	}

	.hvtabs-feature-desc-inline {
		position: static;
		transform: none;
		width: 100%;
		max-width: none;
		text-align: center;
		padding-top: 8px;
		opacity: 1;
		font-size: 18px;
	}
}

/*new testimonial section */
.testimonial-left {font-weight:400;
	padding-top:20px;
  position: relative;
  padding-left: 40px; align-content
	}

.logos {max-width:800px; margin:auto;}

.testimonial-left::before {
  position: absolute; 
  top: 10px; 
  left: 0;
  float: none;
  content: "“";
  font-size: 5rem;
  color: rgb(64, 151, 181);
  line-height: 1;
  font-family: Georgia, serif;
}

.logo-trigger {filter: grayscale(100%); transition: filter 0.3s ease-in-out; cursor: pointer; 
	opacity: 0.3;
	margin-left: auto;
    margin-right: auto;
}

.logo-trigger:hover,
.logo-trigger.active {
	filter: grayscale(0%);
	opacity: 1;
}

.testimonial-content {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.side-by-side-buttons {
  display: flex;
  flex-wrap: wrap; 
  gap: 15px; 
  align-items: center;
	margin:0 0 0 40px;
}
/*end new testimonial section */


/* ERP page Testimonial Section */
.erm-page-tml-testimonial-box {
	display: flex;
	gap: 2rem;
	align-items: center;
	min-height: 360px;
	overflow: hidden;
	position: relative;
	min-width: 1040px;
	margin: 0 auto;
	padding-top: 20px;
	padding-left: 20px;
    padding-right: 20px;
}

.erm-page-tml-testimonial-left {
	flex: 4;
	position: relative;
}

.erm-page-tml-testimonial-left h4 {
	margin: 0 0 0.5rem;
	font-size: 1.8rem;
	color: #333;
	display: inline-block;
	padding-bottom: 0.2rem;
	font-weight: 500;
}

.erm-page-tml-testimonial-left p {
	margin: 1rem 0 0.5rem;
	font-size: 1rem;
	color: #555;
	transition: opacity 0.3s ease;
	position: relative;
	padding-left: 2.5rem;
	width: 560px;
	padding-bottom: 20px;
	font-weight: 500;
}

.erm-page-tml-testimonial-left p::before {
	content: "“";
	font-size: 5rem;
	color: #4097b5;
	position: absolute;
	top: -15px;
	left: 0;
	line-height: 1;
	font-family: Georgia, serif;
}

.erm-page-tml-quote-author {
	margin-top: 0.5rem;
	font-size: 0.95rem;
	color: #858383;
	margin-left: 42px;
}

.erm-page-tml-quote-author strong {
	font-weight: bold;
}

.erm-page-tml-quote-author em {
	font-style: italic;
}

.erm-page-tml-buttons {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	margin-left: 42px;
}

.erm-page-tml-buttons a {
	padding: 0.5rem 1rem;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.9rem;
	background:#e5672d;
	border: 2px solid #e5672d;
	font-weight: 500;
}

.erm-page-tml-buttons a:hover {
	background: #fff;
	color: #e5672d;
}

.erm-page-tml-testimonial-right {
	flex: 2;
}

.erm-page-tml-testimonial-right img {
	width: 100%;
	height: auto;
	max-height: 290px;
	object-fit: contain;
}

.erm-page-tml-logos-cus {
	display: flex;
	justify-content: center;
	gap: 0;
	padding-bottom: 1rem;
	margin-top: 20px;
}

.erm-page-tml-logo-cus {
	width: 280px;
	height: 120px;
	object-fit: contain;
	filter: grayscale(100%);
	transition: filter 0.3s ease;
	cursor: pointer;
	padding: 0.5rem 0;
	border-right: 2px solid #d8d8d8;
	margin-right: 1rem;
	padding-right: 1rem;
	margin-top: -40px;
}

.erm-page-tml-logo-cus:last-child {
	border-right: none;
	margin-right: 0;
}

.erm-page-tml-logo-cus.active,
.erm-page-tml-logo-cus:hover {
	filter: grayscale(0%);
}

.erm-page-tml-h4-underline {
	border-bottom: 1px solid;
	display: block;
	width: 110px;
	margin-top: -10px;
	margin-bottom: 29px;
	padding-bottom: 5px;
}

@keyframes slideInLeft {
	from {
		transform: translateX(-30px);
		opacity: 0;
	}

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

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideFadeInLeft {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide {
  animation: slideFadeInLeft 0.5s ease forwards;
}

.animate-fade {
	animation: fadeIn 0.5s ease forwards;
}

.erm-page-tml-testimonial-box-des {
	min-height: 160px;
}

/* Mobile: */
@media (max-width: 767px) {
	.erm-page-tml-logos-cus {
		margin-top: 65px;
	}

	.erm-page-tml-logo-cus {
		width: 220px;
	}

	.erm-page-tml-testimonial-left p {
		width: 305px;
	}

	.erm-page-tml-buttons {
		margin-left: 8px;
	}

	.erm-page-tml-quote-author {
		margin-left: 4px;
		width: 305px;
	}
	.page-full-width {
		margin: 0px -70px !important;
		min-height:700px !important;
	}
}

/* Small mobile: */
@media (max-width: 480px) {
	.erm-page-tml-logos-cus {
		margin-top: 65px;
	}

	.erm-page-tml-logo-cus {
		width: 220px;
	}

	.erm-page-tml-testimonial-left p {
		width: 305px;
	}

	.erm-page-tml-buttons {
		margin-left: 8px;
	}

	.erm-page-tml-quote-author {
		margin-left: 4px;
		width: 305px;
	}

}

/* ==================== End ERP page css ==================== */