:root{
  --brand:#0a8f4e;--brandDark:#096c3c
}
html{
  scroll-behavior:smooth
}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#fff;
  color:#0b0b0b;
  margin:0
}

.logo{
  height: 3rem;
}

/* Glass Nav */
.nav-glass{
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid rgba(15,23,42,.06)
}
.btn{
  display:inline-flex;
  align-items:center;gap:.5rem;
  padding:.7rem 1rem;
  border-radius:.8rem;
  border:1px solid rgba(0,0,0,.08);
  background:var(--brand);
  color:#fff;
  text-decoration:none
}
.btn:hover{
  background:var(--brandDark)
}

/* Cards & hover */
.card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:1rem;
  padding:1.25rem;
  background:#fff;
  transition:transform .25s ease,box-shadow .25s ease
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(2,8,23,.06)
}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease,transform .6s ease
}
.reveal.visible{
  opacity:1;transform:none
}

/* Custom scrollbar */
*{
  scrollbar-width:thin;
  scrollbar-color:#9ae6b4 #f3f4f6
}
*::-webkit-scrollbar{
  height:8px;
  width:8px
}
*::-webkit-scrollbar-track{
  background:#f3f4f6
}
*::-webkit-scrollbar-thumb{
  background:#9ae6b4;
  border-radius:6px
}

/* Hero Carousel */
.hero{
  position:relative;
  min-height:72vh;
  display:grid;
  place-items:center;
  overflow:hidden
}
.hero .slides{
  position:absolute;
  inset:0
}
.hero .slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .7s ease;
  will-change:opacity
}
.hero .slide.active{
  opacity:1
}
.hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.55));
  mix-blend:normal
}
.hero .content{
  position:relative;
  z-index:2;
  color:#fff;
  text-align:left;
  padding:0 1.25rem;
  max-width:70rem
}
.hero h1{
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.15;
  margin:0 0 .5rem
}
.hero p{
  font-size:clamp(1rem,2vw,1.25rem);
  max-width:42rem;
  margin:0 0 1.25rem;
  color:#e6f6ee
}
.hero .controls{
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:.5rem;
  z-index:3
}
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.6);
  cursor:pointer
}
.dot.active{
  background:#fff
}

/* .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(255,255,255,.75);border:none;border-radius:999px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}
.arrow:hover{background:#fff}
.arrow.left{left:1rem}.arrow.right{right:1rem} */

/* Parallax wrapper */
.parallax{
  position:absolute;
  inset:0;
  transform:translateZ(0)
}

/* Services grid */
.grid{
  display:grid;
  gap:1rem
}
.grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

@media(max-width:1024px){
  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:640px){
  .grid-4{
    grid-template-columns:1fr
  }
}
.section{
  padding:3rem 1rem;
  max-width:1200px;
  margin:0 auto
}
.section h2{
  font-size:clamp(1.5rem,2.5vw,2rem);
  margin-bottom:0rem
}
.values{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(2,minmax(0,1fr))
}
@media(max-width:768px){
  .values{
    grid-template-columns:1fr
  }
}
.values li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.8rem;
  padding:.75rem
}
.icon{
  width:28px;
  height:28px;
  flex:0 0 28px
}
.icons{
  width:50px;
  height:28px;
  flex:0 0 28px
}
.footer{
  border-top:1px solid rgba(0,0,0,.08);
  padding:1rem
}
.hero .slide-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.02)
}

/* arrow-mark on slider - start */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.arrow:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.arrow.left {
  left: 20px;
}

.arrow.right {
  right: 20px;
}

.arrow svg {
  width: 24px;
  height: 24px;
  fill: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
/* arrow-mark on slider - end */

/*Count in About tab - start*/
.counter-container {
  font-size: 40px;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

#count {
  color: #000; /* black number */
}

.plus {
  color: #000; /* red '+' symbol */
  margin-left: 2px;
}
/*Count in About tab - end*/

/*logo on offshore - start */
.logo-offshore {
  width: 100%;
  overflow: hidden;
  background: #fff;
  padding: 20px 0;
}

.track {
  display: flex;
  gap: 40px;
  animation: scroll 12s linear infinite;
}

.track img {
  width: 100%;
  height: 90px;
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid #878787;
  background: white;
  padding: 5px;
  padding: 10px;
}


/* Infinite loop marquee */
/* @keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
} */


/*logo on offshore - end */

/*address - direction(link and logo) - start*/
.navigate-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1a73e8;
  text-decoration: none;
}

.navigate-icon svg {
  width: 22px;
  height: 22px;
  color: #1a73e8;
}
/*address - direction(link and logo) - end*/

.eyebrow{
  margin:0 0 .55rem;
  color:var(--brandDark);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.erp-home-band{
  border-top:1px solid rgba(15,23,42,.08);
  border-bottom:1px solid rgba(15,23,42,.08)
}
.erp-home-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.85fr);
  gap:2rem;
  align-items:center
}
.erp-platform-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.25rem
}
.erp-platform-pills span{
  display:inline-flex;
  align-items:center;
  min-height:2rem;
  padding:.4rem .75rem;
  border:1px solid rgba(10,143,78,.25);
  border-radius:.5rem;
  background:#f8fafc;
  color:#14532d;
  font-size:.9rem;
  font-weight:600
}
.erp-proof-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem
}
.erp-proof-item{
  display:flex;
  align-items:center;
  gap:1rem;
  min-height:7rem;
  padding:1rem;
  border:1px solid rgba(15,23,42,.1);
  border-radius:.5rem;
  background:#fff;
  text-decoration:none;
  color:#0f172a
}
.erp-proof-item:hover{
  border-color:rgba(10,143,78,.35);
  box-shadow:0 10px 22px rgba(15,23,42,.06)
}
.logo-proof img{
  max-width:11rem;
  width:42%;
  height:auto;
  object-fit:contain
}
.icon-proof img{
  width:3rem;
  height:3rem;
  object-fit:contain;
  flex:0 0 3rem
}
.etendo-proof img{
  max-width:11rem;
  width:42%;
  height:auto;
  object-fit:contain
}
.erp-proof-item span{
  color:#475569;
  font-size:.92rem;
  line-height:1.45
}
.icon-proof{
  align-items:flex-start;
  flex-direction:column;
  gap:.45rem
}
.icon-proof strong{
  color:#0f172a
}
.etendo-proof{
  align-items:center;
  flex-direction:row
}
.erp-hero{
  overflow:hidden
}
.erp-hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1.5rem
}
.erp-hero-btn{
  background:#fff;
  color:var(--brandDark)
}
.erp-hero-btn:hover{
  background:#ecfdf5;
  color:var(--brandDark)
}
.commerce-primary-cta{
  position:relative;
  overflow:hidden;
  border:2px solid #fff;
  background:#fff;
  color:var(--brandDark);
  box-shadow:0 12px 28px rgba(2,8,23,.22),0 0 0 4px rgba(255,255,255,.18);
  font-weight:700;
  animation:commerceCtaPulse 3.8s ease-in-out infinite
}
.commerce-primary-cta span{
  display:inline-block;
  margin-left:.15rem;
  transition:transform .22s ease
}
.commerce-primary-cta:hover{
  background:#f0fdf4;
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(2,8,23,.26),0 0 0 5px rgba(255,255,255,.22)
}
.commerce-primary-cta:hover span{
  transform:translateX(4px)
}
.commerce-primary-cta::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -55%;
  width:45%;
  background:linear-gradient(90deg,transparent,rgba(10,143,78,.16),transparent);
  transform:skewX(-18deg);
  transition:left .55s ease
}
.commerce-primary-cta:hover::before{
  left:115%
}
@keyframes commerceCtaPulse{
  0%,100%{
    box-shadow:0 12px 28px rgba(2,8,23,.22),0 0 0 4px rgba(255,255,255,.18)
  }
  50%{
    box-shadow:0 14px 32px rgba(2,8,23,.24),0 0 0 7px rgba(255,255,255,.26)
  }
}
.erp-partner-link{
  color:#fff;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px
}
.erp-intro-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.75fr);
  gap:2rem;
  align-items:start
}
.erp-highlights{
  display:grid;
  gap:.75rem
}
.erp-highlights div{
  padding:1rem;
  border:1px solid rgba(15,23,42,.1);
  border-radius:.5rem;
  background:#f8fafc
}
.erp-highlights strong{
  display:block;
  color:#0f172a;
  font-size:1.1rem
}
.erp-highlights span{
  display:block;
  margin-top:.25rem;
  color:#64748b;
  font-size:.92rem
}
.erp-card-logo{
  width:72%;
  max-width:11rem;
  height:3.4rem;
  object-fit:contain
}
.erp-capability-band{
  max-width:1200px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
  border-radius:.5rem
}
.erp-capability-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(320px,1fr);
  gap:2rem;
  align-items:center
}
.erp-capability-list{
  display:grid;
  gap:.7rem;
  margin:0;
  padding:0;
  list-style:none
}
.erp-capability-list li{
  position:relative;
  padding-left:1.4rem;
  color:#334155;
  line-height:1.5
}
.erp-capability-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55rem;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--brand)
}
@media(max-width:900px){
  .erp-home-layout,
  .erp-intro-grid,
  .erp-capability-layout{
    grid-template-columns:1fr
  }
}
@media(max-width:640px){
  .erp-proof-item{
    align-items:flex-start;
    flex-direction:column
  }
  .logo-proof img{
    width:70%;
    max-width:10rem
  }
  .erp-hero-actions{
    align-items:flex-start;
    flex-direction:column
  }
}

.commerce-hero{
  overflow:hidden
}
.commerce-hero > div{
  grid-template-columns:minmax(0,1fr) minmax(280px,.68fr);
  padding-top:2rem;
  padding-bottom:2rem
}
.commerce-expertise-panel{
  justify-self:center;
  width:min(100%,420px);
  padding:1rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.6rem;
  background:rgba(255,255,255,.1);
  box-shadow:0 22px 50px rgba(2,8,23,.16)
}
.commerce-brand-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem
}
.commerce-brand-badge{
  display:grid;
  place-items:center;
  min-height:5.75rem;
  border:1px solid rgba(15,23,42,.08);
  border-radius:.5rem;
  background:#fff;
  padding:.85rem
}
.commerce-brand-badge img{
  display:block;
  width:100%;
  max-width:9.5rem;
  max-height:3.75rem;
  object-fit:contain
}
.orisha-brand-badge{
  background:#321c72
}
.orisha-brand-badge img{
  max-width:8.75rem;
  max-height:4.5rem
}
.commerce-panel-copy{
  display:grid;
  gap:.55rem;
  margin-top:.9rem
}
.commerce-panel-copy span{
  position:relative;
  display:block;
  min-height:2.25rem;
  padding:.5rem .7rem .5rem 1.7rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:.45rem;
  background:rgba(255,255,255,.1);
  color:#fff;
  font-size:.94rem;
  font-weight:600;
  line-height:1.3
}
.commerce-panel-copy span::before{
  content:"";
  position:absolute;
  left:.75rem;
  top:50%;
  width:.42rem;
  height:.42rem;
  border-radius:999px;
  background:#d1fae5;
  transform:translateY(-50%)
}
.commerce-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);
  gap:2rem;
  align-items:center
}
.commerce-intro-single{
  display:block;
  max-width:54rem
}
.commerce-logo-card{
  display:grid;
  gap:.8rem;
  padding:1.25rem;
  border:1px solid rgba(15,23,42,.1);
  border-radius:.5rem;
  background:#f8fafc
}
.commerce-logo-card img{
  width:100%;
  max-width:18rem;
  height:auto;
  object-fit:contain;
  border-radius:.35rem;
  background:#fff;
  padding:.75rem
}
.commerce-logo-card span{
  color:#475569;
  font-size:.94rem;
  line-height:1.5
}
.commerce-service-grid .card{
  text-align:left
}
.commerce-service-icon{
  width:3rem;
  height:3rem;
  object-fit:contain;
  margin-bottom:1rem
}
@media(max-width:900px){
  .commerce-intro{
    grid-template-columns:1fr
  }
  .commerce-hero > div{
    grid-template-columns:1fr
  }
  .commerce-expertise-panel{
    width:min(100%,390px)
  }
}
@media(max-width:640px){
  .commerce-hero > div{
    padding-top:1.5rem;
    padding-bottom:1.5rem
  }
  .commerce-expertise-panel{
    width:100%
  }
  .commerce-brand-row{
    grid-template-columns:1fr
  }
  .commerce-brand-badge{
    min-height:5rem
  }
  .commerce-panel-copy span{
    font-size:.9rem
  }
}