﻿


a:hover {
    text-decoration: none
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    height: 100%;
    width: 100%;   
    text-align: justify;
   
    background: #fff;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    outline: none;
}

img {
    border: none;
}

a {
    text-decoration: none;
}

html {
    -webkit-text-size-adjust: 100%;
}

ul, p {
    margin: 0;
    padding: 0;
    list-style: none;
}

*, :before, :after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    outline: none;
}

* {
  
}

a:hover {
    text-decoration: none;
}

a {
    text-decoration: none;
    outline: none;
}
  
 
:root{
  --green:#44D62C; --green-dk:#2B9620; --green-lt:#e8f7e4; --green-md:#c8eabf;
  --txt:#111827;   --txt-dk:#0c1e14;   --muted:#6b7280;   --bdr:#e5e7eb;
  --bg-lt:#eff8cd; --sh:0 2px 12px rgba(0,0,0,.07);
  --ff-head:'Poppins',sans-serif;
  --ff-card:'Sora',sans-serif;
  --ff-body:'Inter',sans-serif;
  --ff-nav:'Plus Jakarta Sans',sans-serif;
}
html{ scroll-behavior:smooth }
body{ font-family:var(--ff-body); color:var(--txt); background:#fff; overflow-x:hidden }

/* =====================================================
   KEYFRAMES
===================================================== */
@keyframes floatBlob{
  0%,100%{ transform:translateY(0) scale(1) rotate(0deg) }
  33%    { transform:translateY(-18px) scale(1.03) rotate(4deg) }
  66%    { transform:translateY(10px) scale(.97) rotate(-3deg) }
}
@keyframes heroSlideL{
  from{ opacity:0; transform:translateX(-40px) }
  to  { opacity:1; transform:translateX(0) }
}
@keyframes heroSlideR{
  from{ opacity:0; transform:translateX(40px) }
  to  { opacity:1; transform:translateX(0) }
}
@keyframes marqueeScroll{ 0%{ transform:translateX(0) } 100%{ transform:translateX(-50%) } }
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(68,214,44,.4) }
  50%    { box-shadow:0 0 0 14px rgba(68,214,44,0) }
}
@keyframes shimmer{
  0%  { background-position:-200% center }
  100%{ background-position: 200% center }
}
@keyframes dotBlink{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }
@keyframes bounceIcon{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.2) } 70%{ transform:scale(.92) } }
@keyframes pathPulse{
  0%,100%{ box-shadow:0 0 0 2px var(--green) }
  50%    { box-shadow:0 0 0 7px rgba(68,214,44,.2) }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(30px) }
  to  { opacity:1; transform:translateY(0) }
}

/* =====================================================
   SCROLL REVEAL
===================================================== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .65s cubic-bezier(.25,.8,.25,1), transform .65s cubic-bezier(.25,.8,.25,1)
}
.reveal.from-l{ transform:translateX(-28px) }
.reveal.from-r{ transform:translateX(28px) }
.reveal.scale { transform:scale(.88) }
.reveal.visible{ opacity:1; transform:none !important }
.d1{ transition-delay:.1s } .d2{ transition-delay:.2s }
.d3{ transition-delay:.3s } .d4{ transition-delay:.4s } .d5{ transition-delay:.5s }

/* =====================================================
   NAVBAR — floating glass pill (matches Figma nav.glass)
   Pill is 1014px wide × 54px tall, centered over hero
===================================================== */

/* Outer nav: transparent, just for sticky + vertical padding */
.navbar{
  position:sticky; top:0; z-index:1000;
  background:transparent;
  border:none;
  padding:14px 16px;
  transition:padding .35s
}
/* When scrolled, tighten slightly */
.navbar.scrolled{ padding:10px 16px }

/* The pill — this is the actual visible nav bar */
.nav-pill{
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-radius:100px;
  box-shadow:0 4px 24px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.8) inset;
  border:1px solid rgba(255,255,255,.75);
  display:flex; align-items:center;
  height:54px; padding:0 10px 0 18px;
  max-width:1020px; margin:0 auto; width:100%;
  transition:box-shadow .3s
}
.navbar.scrolled .nav-pill{
  box-shadow:0 8px 32px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.8) inset
}

.navbar-brand{ padding:0; margin-right:4px }
.navbar-brand img{ height:42px; width:auto }

/* Nav links */
.navbar-nav .nav-item .nav-link{
  font-family:var(--ff-nav); font-size:14px; font-weight:500;
  color:rgba(0,34,27,.7); padding:6px 10px;
  transition:color .2s; white-space:nowrap
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus{ color:var(--green-dk) }

/* Dropdown toggle caret */
.navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle::after{
  display:inline-block; margin-left:4px; vertical-align:.18em;
  border-top:.36em solid currentColor; border-right:.28em solid transparent;
  border-left:.28em solid transparent; border-bottom:0;
  transition:transform .25s; opacity:.7
}
.navbar-nav .nav-item.dropdown:hover .nav-link.dropdown-toggle::after{
  transform:rotate(180deg); opacity:1
}

/* Dropdown menu */
.navbar-nav .dropdown-menu{
  border:1px solid var(--bdr); border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.13);
  padding:10px 8px; min-width:220px;
  animation:fadeUp .2s ease both; margin-top:6px
}
.navbar-nav .dropdown-menu li .dropdown-item{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-nav); font-size:13px; font-weight:500;
  color:var(--txt); padding:9px 14px; border-radius:8px;
  transition:background .18s, color .18s, padding-left .18s
}
.navbar-nav .dropdown-menu li .dropdown-item:hover{
  background:var(--green-lt); color:var(--green-dk); padding-left:18px
}
.navbar-nav .dropdown-menu li .dropdown-item .di{
  width:28px; height:28px; background:var(--green-lt); border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background .18s
}
.navbar-nav .dropdown-menu li .dropdown-item:hover .di{ background:var(--green) }
.navbar-nav .dropdown-menu li .dropdown-item .di svg{
  width:14px; height:14px; stroke:var(--green-dk); fill:none;
  stroke-width:2; transition:stroke .18s
}
.navbar-nav .dropdown-menu li .dropdown-item:hover .di svg{ stroke:#fff }
.dropdown-divider{ border-color:var(--bdr); margin:4px 8px }

/* "Get in touch" button */
.btn-enroll{
  font-family:var(--ff-body); font-size:13px; font-weight:600;
  background:var(--green); color:#fff;
  padding:8px 20px; border-radius:50px; border:none;
  transition:background .25s, transform .2s, box-shadow .2s;
  white-space:nowrap; flex-shrink:0; margin-left:8px
}
.btn-enroll:hover{
  background:var(--green-dk); color:#fff;
  transform:translateY(-1px); box-shadow:0 6px 18px rgba(68,214,44,.4)
}

/* Toggler custom */
.navbar-toggler{ border:none; padding:6px; box-shadow:none !important; margin-left:auto }
.navbar-toggler:focus{ outline:none }
.navbar-toggler .bar{
  display:block; width:22px; height:2px;
  background:var(--txt-dk); border-radius:2px;
  transition:transform .3s, opacity .3s; margin:4px 0
}
.navbar-toggler[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.navbar-toggler[aria-expanded="true"] .bar:nth-child(2){ opacity:0; transform:scaleX(0) }
.navbar-toggler[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ── Mobile (≤991px): full-screen slide-in panel ── */
@media(max-width:991.98px){
  .nav-pill{ border-radius:16px; height:auto; min-height:54px; padding:10px 14px; flex-wrap:wrap }
  .navbar-collapse{
    position:fixed; inset:0; background:rgba(255,255,255,.98);
    z-index:1050; display:flex !important; flex-direction:column;
    align-items:stretch; padding:80px 24px 40px;
    overflow-y:auto; transform:translateX(100%); opacity:0;
    transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s;
    pointer-events:none; display: none!important;
  }
  .navbar-collapse.show{ transform:translateX(0); opacity:1; pointer-events:all;        margin-top: 66px;
        min-height: 97vh; display: block!important;}
  .navbar-nav{ flex-direction:column }
  .navbar-nav .nav-item .nav-link{
    font-size:18px; font-weight:600; padding:14px 4px;
    border-bottom:1px solid var(--bdr)
  }
  .navbar-nav .dropdown-menu{
    border:none; box-shadow:none; padding:0 0 8px 16px;
    animation:none; background:transparent
  }
  .navbar-nav .dropdown-menu li .dropdown-item{
    font-size:14px; padding:10px 12px; border-radius:8px
  }
  .btn-enroll{
    margin:28px 0 0; padding:14px 32px; border-radius:50px;
    text-align:center; width:100%; font-size:15px
  }
}

/* =====================================================
   BADGE CHIP
===================================================== */
.badge-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--bdr);
  border-radius:50px; padding:9px 40px;
  font-family:var(--ff-nav); font-size:12px; font-weight:600;
  color:var(--muted); margin-bottom:14px;
  color: #000;
font-family: Inter, serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 20px;
  
}

.badge-chip::before{
  content:''; display:inline-block; width:6px; height:6px;
  background:var(--green); border-radius:50%;
  animation:dotBlink 2s ease-in-out infinite
}

/* =====================================================
   SECTION HEADINGS
===================================================== */
.sec-title{
  font-family:var(--ff-head); font-size:40px; font-weight:700;
  color:var(--txt-dk); line-height:1.25
}
.sec-title .hl{ color:var(--green) }
.sec-title em{ color:var(--green); font-style:normal;background-image: linear-gradient(to bottom, #52d148, #4ca645);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(2px 3px 4px rgba(76, 166, 69, 0.25)); }
.sec-desc{
  font-family:var(--ff-head); font-weight:500; color:#2f2e2e;
  font-size:17px; line-height:1.65; max-width:700px; margin:0 auto 44px
}

/* =====================================================
   HERO SLIDER
===================================================== */
.hero-sec{
  position:relative; overflow:hidden;
  margin-top:-82px;
  background-color:#e8f5e0;
  height:100vh; min-height:580px; max-height:820px
}

/* Each slide */
.hero-slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding-top:96px;
  opacity:0; z-index:0;
  transition:opacity .9s cubic-bezier(.4,0,.2,1)
}
.hero-slide.active{ opacity:1; z-index:2 }
.hero-slide.prev{ opacity:0; z-index:1 }

/* Background with Ken-Burns zoom */
.hs-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  transition:transform 7.5s linear
}
.hero-slide.active .hs-bg{ transform:scale(1) }
.hs-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,rgba(12,30,10,.22) 0%,transparent 60%)
}

/* Slide content */
.hs-body{
  position:relative; z-index:3; padding:40px 0 60px;
  transform:translateY(28px); opacity:0;
  transition:transform .75s .35s cubic-bezier(.25,.8,.25,1), opacity .75s .35s
}
.hero-slide.active .hs-body{ transform:translateY(0); opacity:1 }

.hs-eyebrow{
  display:inline-block; font-family:var(--ff-nav); font-size:13px;
  font-weight:600; color:var(--green); letter-spacing:.08em;
  text-transform:uppercase; margin-bottom:14px;
  background:rgba(68,214,44,.1); padding:5px 16px; border-radius:50px;
  border:1px solid rgba(68,214,44,.3)
}
.hs-title{
  font-family:var(--ff-head); font-size:clamp(30px,4.6vw,60px);
  font-weight:700; line-height:1.14; color:var(--txt-dk); margin-bottom:16px
}
.hs-title .hl2{
  background:linear-gradient(135deg,#1a6b18 0%,#44D62C 60%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text
}
.hs-title .hl3{ color:#004957; background-color: #004d5a;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: url(#fine-texture) drop-shadow(4px 5px 6px rgba(0, 0, 0, 0.35)); }
 
.hs-sub{
  font-family:var(--ff-body); font-size:clamp(14px,1.4vw,16px);
  font-weight:400; color:#2f2e2e; max-width:460px; margin-bottom:32px; line-height:1.7
}
.text-3{    background-image: linear-gradient(to right, #2f5d2b, #3b7436, #4ba345, #56b94e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;}
.btn-counsel{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:#fff;
  font-family:var(--ff-body); font-size:15px; font-weight:600;
  padding:13px 13px 13px 28px; border-radius:50px; text-decoration:none; border:none;
  transition:background .25s, transform .2s, box-shadow .25s;
  animation:pulse 2.8s ease-in-out 1.8s infinite
}
.btn-counsel:hover{
  background:var(--green-dk); color:#fff;
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(68,214,44,.4); animation:none
}
.btn-counsel .arr-circle{
  width:32px; height:32px; background:rgba(255,255,255,.28);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s
}
.btn-counsel:hover .arr-circle{ background:rgba(255,255,255,.42); transform:translateX(3px) }

/* Right student image per slide */
.hs-img{
  position:absolute; right:0; bottom:0;
  height:88%; max-width:48%;
  object-fit:contain; object-position:right bottom; z-index:3;
  transform:translateX(32px); opacity:0;
  transition:transform .85s .5s cubic-bezier(.25,.8,.25,1), opacity .85s .5s
}
.hero-slide.active .hs-img{ transform:translateX(0); opacity:1 }

/* Dot nav */
.hero-dots{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:10; display:flex; gap:8px; align-items:center
}
.hero-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.5); border:2px solid rgba(255,255,255,.4);
  cursor:pointer; padding:0;
  transition:background .3s, width .35s cubic-bezier(.4,0,.2,1), border-radius .35s
}
.hero-dot.active{
  width:28px; border-radius:4px;
  background:var(--green); border-color:var(--green)
}

/* Prev/Next arrows */
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:10; width:46px; height:46px;
  background:rgba(255,255,255,.8); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.65); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 14px rgba(0,0,0,.12);
  transition:background .2s, transform .2s, box-shadow .2s; color:var(--txt-dk)
}
.hero-arrow:hover{
  background:#fff; box-shadow:0 4px 22px rgba(0,0,0,.18);
  transform:translateY(-50%) scale(1.1)
}
.hero-arrow.prev{ left:22px }
.hero-arrow.next{ right:22px }
.hero-arrow svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.5 }

/* Thin progress bar */
.hero-progress{
  position:absolute; bottom:0; left:0; height:3px;
  background:var(--green); z-index:10; width:0; transition:width linear
}

/* Mobile */
@media(max-width:767.98px){
  .hero-sec{ height:auto; min-height:auto; max-height:none }
  .hero-slide{ position:relative; flex-direction:column; padding-top:82px }
  .hero-slide:not(.active){ display:none }
  .hs-bg{ position:absolute }
  .hs-body{ padding:28px 0 0; text-align:center }
  .hs-sub{ margin:0 auto 24px }
  .btn-counsel{ margin:0 auto }
  .hs-img{
    position:relative; height:auto; max-width:80%;
    display:block; margin:12px auto 0;
    transform:none !important; opacity:1 !important
  }
  .hero-arrow{ display:none }
  .hero-dots{ bottom:12px }
}
@media(min-width:768px) and (max-width:991.98px){
  .hs-img{ max-width:44% }
}

/* =====================================================
   ABOUT
===================================================== */
.about-sec{
  background:var(--bg-lt); padding:90px 0;
  position:relative; overflow:hidden; text-align:center
}
.about-blob{
  position:absolute; top:-120px; right:-180px;
  width:560px; height:560px; background:#c5e8b8;
  border-radius:60% 40% 50% 50% / 50% 60% 40% 50%;
  z-index:0; opacity:.48; pointer-events:none;
  animation:floatBlob 9s ease-in-out infinite
}
.about-sec .container{ position:relative; z-index:1 }
.acard{
  background:#fff; border:1px solid var(--bdr);
  border-radius:18px; padding:28px; text-align:left;
  box-shadow:var(--sh); position:relative; height:100%;
  transition:transform .3s, box-shadow .3s, border-color .3s
}
.acard:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(68,214,44,.12);
  border-color:var(--green-md)
}
.acard .exp-arrow{
  position:absolute; top:16px; right:16px; width:26px; height:26px;
  background:var(--green-lt); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--green-dk);
  transition:background .2s, transform .2s
}
.acard:hover .exp-arrow{ background:var(--green); color:#fff; transform:translate(2px,-2px) }
.acard-icon{
  width:48px; height:48px; background:var(--green); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; color:#fff;
  transition:transform .3s, box-shadow .3s; 
box-shadow: 0 0 40px -8px rgba(168, 85, 247, 0.55);    background: linear-gradient(135deg, #4EA64D 0%, #A2F231 100%);
}
.acard:hover .acard-icon{ transform:scale(1.12) rotate(-6deg); box-shadow:0 6px 18px rgba(68,214,44,.35) }
.acard-icon svg{ width:22px; height:22px }
.acard h3{
  font-family:var(--ff-card); font-size:26px; font-weight:700;
  letter-spacing:-.5px; margin-bottom:8px; color:var(--txt-dk)
}
.acard p{ font-family:var(--ff-body); font-size:15px; color:#111; line-height:1.65 }
.atags{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px }
.atag{
  font-family:var(--ff-body); font-size:13px; color:var(--txt);
  display:flex; align-items:center; gap:5px
}
.atag::before{ content:'✓'; color:var(--green); font-weight:700 }

/* =====================================================
   HOW IT WORKS
===================================================== */
.steps-sec{
  background:#fff; padding:90px 0;
  text-align:center; position:relative; overflow:hidden;
  background: var(--bg-lt);
}
.steps-blob{
  position:absolute; top:0px; left:00px;
  /* width:511px; height:1178px; background:#c5e8b8; */
  /* border-radius:50% 40% 60% 40% / 40% 50% 50% 60%; */
  /* z-index:0; opacity:.33; pointer-events:none; */
  /* animation:floatBlob 10s ease-in-out 2s infinite reverse; */
  /* background: url(/images/transparent-bg.png) top center no-repeat; */
}
.steps-sec .container{ position:relative; z-index:1 }
.steps-sec h2{ font-size:clamp(24px,3.5vw,38px) }

/* Connector lines via CSS */
.steps-row-top{ position:relative }
.steps-row-top::before,
.steps-row-top::after{
  content:''; position:absolute; top:40px; height:1.5px;
  background:linear-gradient(90deg,#44D62C,#a8e063); z-index:0
}
.steps-row-top::before{ left:calc(16.6% + 96px); right:calc(66.6% + 16px); min-width: 183px; }
.steps-row-top::after { left: calc(50% + 96px);
    right: calc(16.6% + 56px);
    min-width: 184px;
    width: 184px; }
/* Diagonal lines */
.diag-l,.diag-r{
  position:absolute; width:148px; height:2px; background:#44D62C;
  top:155px; opacity:.65; z-index:0
}
.diag-l{ left:calc(16.6% + 16px); transform-origin:left center; transform:rotate(45deg) }
.diag-r{ right:calc(16.6% + 16px); transform-origin:right center; transform:rotate(-45deg) }
.steps-row-bot{ position:relative; justify-content:center;margin-top: 120px;   }
.steps-row-top {padding: 0px 33px;}
.steps-row-bot::before{
  content:''; position:absolute; top:40px; height:1.5px;
  background:linear-gradient(90deg,#44D62C,#a8e063);
  left:calc(25% + 56px); right:calc(25% + 56px); z-index:0; display: none;
}
.scard{
  text-align:center; position:relative; z-index:1;
  padding:0 8px
}
.sicon-wrap{ position:relative; width:80px; height:80px; margin:0 auto 14px }
.sicon{
  width:80px; height:80px; background:#f4f4f4; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:background .3s, transform .3s, box-shadow .3s
}
.scard:hover .sicon{
  background:var(--green-lt); transform:scale(1.1) translateY(-4px);
  box-shadow:0 10px 28px rgba(68,214,44,.25)
}
.sicon svg{ width:30px; height:30px; stroke:var(--green); stroke-width:1.5; fill:none }
.scard:hover .sicon svg{ animation:bounceIcon .5s ease-in-out }
.step-num{
  position:absolute; top:-10px; right:-10px; width:26px; height:26px;
  background:linear-gradient(135deg,#44D62C 0%,#a2f231 63%);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-body); font-size:11px; font-weight:700; color:#fff;
  box-shadow:0 2px 8px rgba(68,214,44,.5); transition:transform .3s
}
.scard:hover .step-num{ transform:scale(1.2) }
.scard h3{
  font-family:var(--ff-card); font-size:15px; font-weight:700;
  letter-spacing:-.3px; margin-bottom:6px; color:#0d1b2a
}
.scard p{ font-family:var(--ff-body); font-size:12px; color:#5b6375; line-height:1.5 }

/* Mobile steps: hide connectors, stack vertically */
@media(max-width:767.98px){
  .steps-row-top::before,.steps-row-top::after,
  .steps-row-bot::before,.diag-l,.diag-r{ display:none }
  .steps-row-top,.steps-row-bot{ flex-direction:column !important; align-items:center; gap:28px }
}

/* =====================================================
   BENEFITS
===================================================== */
.benefits-sec{ background:#fff; padding:70px 0; text-align:center;background: var(--bg-lt); }
.benefits-sec h2{ font-family:var(--ff-head); font-size:clamp(24px,3vw,36px); font-weight:700; color:var(--green);    background-image: linear-gradient(to bottom, #52d148, #4ca645);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(2px 3px 4px rgba(76, 166, 69, 0.25)); }
    .sec-title .hl {  background-image: linear-gradient(to bottom, #52d148, #4ca645);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(2px 3px 4px rgba(76, 166, 69, 0.25));}
.b-pill{
  background:var(--green-lt); border:1.5px solid var(--green-md);
  border-radius:50px; padding:12px 28px;
  font-family:var(--ff-body); font-size:14px; font-weight:600; color:var(--txt-dk);
  transition:background .25s, border-color .25s, transform .2s, box-shadow .2s;
  cursor:default; display:inline-block; margin:6px;
}
.b-pill:hover{
  background:var(--green); color:#fff; border-color:var(--green);
  transform:translateY(-2px); box-shadow:0 6px 18px rgba(68,214,44,.3)
}

/* =====================================================
   TESTIMONIALS
===================================================== */
.testi-sec{
  background:var(--bg-lt); padding:90px 0;
  text-align:center; position:relative; overflow:hidden
}
.testi-blob{
  position:absolute; top:-100px; right:-100px; width:400px; height:400px;
  background:#c5e8b8; border-radius:40% 60% 50% 50%/50% 50% 60% 40%;
  z-index:0; opacity:.38; pointer-events:none;
  animation:floatBlob 11s ease-in-out 1s infinite
}
.testi-sec .container{ position:relative; z-index:1 }
.tcard{
  background:#fff; border-radius:18px; padding:26px;
  box-shadow:var(--sh); border:1px solid var(--bdr); height:100%;
  transition:transform .3s, box-shadow .3s, border-color .3s
}
.tcard:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 50px rgba(0,0,0,.1);
  border-color:var(--green-md)
}
.stars{ color:var(--green); font-size:16px; margin-bottom:12px; letter-spacing:2px }
.ttext{ font-family:var(--ff-body); font-size:13px; color:var(--muted); line-height:1.65; font-style:italic }
.tavatar{
  width:40px; height:40px; border-radius:50%; background:var(--green-md);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:var(--green-dk); flex-shrink:0;
  transition:background .2s, color .2s
}
.tcard:hover .tavatar{ background:var(--green); color:#fff }
.t-name{ font-family:var(--ff-body); font-size:13px; font-weight:700 }
.t-role{ font-family:var(--ff-body); font-size:11px; color:var(--muted) }

/* =====================================================
   MARQUEE
===================================================== */
.marquee-sec{
  background:#fff; padding:36px 0; overflow:hidden;
  border-top:1px solid var(--bdr); border-bottom:1px solid var(--bdr);
  position:relative
}
.marquee-sec::before,.marquee-sec::after{
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none
}
.marquee-sec::before{ left:0; background:linear-gradient(to right,#fff,transparent) }
.marquee-sec::after { right:0; background:linear-gradient(to left,#fff,transparent) }
.m-label{
  text-align:center; font-size:11px; font-weight:700;
  letter-spacing:2px; color:var(--muted); text-transform:uppercase; margin-bottom:20px
}
.m-track{
  display:flex; gap:60px; animation:marqueeScroll 24s linear infinite;
  width:max-content; align-items:center
}
.m-track:hover{ animation-play-state:paused }
.m-item{
  font-family:var(--ff-body); font-size:16px; font-weight:700;
  color:var(--txt); white-space:nowrap; opacity:.65;
  transition:opacity .2s, color .2s; cursor:default
}
.m-item:hover{ opacity:1; color:var(--green-dk) }

/* =====================================================
   CAREER PATH
===================================================== */
.path-sec{
  background:var(--bg-lt); padding:90px 0;
  text-align:center; position:relative; overflow:hidden
}
.path-blob{
  position:absolute; top:-80px; left:-120px; width:450px; height:450px;
  background:#c5e8b8; border-radius:55% 45% 40% 60%/50% 50% 50% 50%;
  z-index:0; opacity:.42; pointer-events:none;
  animation:floatBlob 8s ease-in-out 3s infinite
}
.path-sec .container{ position:relative; z-index:1 }
.path-timeline{ position:relative; max-width:700px; margin:0 auto; padding:8px 0 }
.path-timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0;
  width:2px; background:var(--green-md); transform:translateX(-50%); z-index:0;    background: #62b24f;
}
.p-row{ display:flex; align-items:center; position:relative; min-height:128px }
.p-row.left{ justify-content:flex-start }
.p-row.right{ justify-content:flex-end }
.p-node{
  background:#fff; border:1.5px solid var(--bdr); border-radius:10px;
     padding: 20px 20px 10px 20px; font-family:var(--ff-card); font-size:15px; font-weight:700;
  box-shadow:var(--sh); white-space:nowrap; width: 100%; max-width:236px;     height: 88px;
    text-align: left;position:relative; z-index:1;
  transition:transform .3s, box-shadow .3s, border-color .3s, background .3s
}
.p-node:hover{
  transform:scale(1.06); box-shadow:0 8px 24px rgba(68,214,44,.15);
  border-color:var(--green); background:var(--green-lt)
}
.p-node .stg{
  display:block; font-size:10px; font-weight:500; color:var(--muted);
  margin-bottom:2px; text-transform:uppercase; letter-spacing:.5px
}
.p-dot{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; background:var(--green); border-radius:50%;
  border:3px solid #fff; box-shadow:0 0 0 2px var(--green); z-index:2;
  animation:pathPulse 2.5s ease-in-out infinite;border-radius: 33554400px;
background: linear-gradient(135deg, #45D044 0%, #A2F231 100%);    display: flex;justify-content: center;      padding-top: 10px;
    color: #ffff;
    font-size: 14px;
    font-weight: bold;
}

/* =====================================================
   WEBSITE OVERVIEW
===================================================== */
.ov-sec{
  background:#fff; padding:90px 0;
  text-align:center; position:relative; overflow:hidden;    background: var(--bg-lt);
}
.ov-blob{
  position:absolute; bottom:-100px; right:-100px; width:400px; height:400px;
  background:#c5e8b8; border-radius:40% 60% 55% 45%/50% 40% 60% 50%;
  z-index:0; opacity:.38; pointer-events:none;
  animation:floatBlob 12s ease-in-out infinite
}
.ov-sec .container{ position:relative; z-index:1 }
.ov-card{
  background:#fff; border:1px solid var(--bdr); border-radius:18px;
  padding:28px 22px; text-align:left; box-shadow:var(--sh); height:100%;
  position:relative; overflow:hidden;
  transition:transform .3s, box-shadow .3s, border-color .3s
}
.ov-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--green-lt) 0%,transparent 60%);
  opacity:0; transition:opacity .35s
}
.ov-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 44px rgba(68,214,44,.13);
  border-color:var(--green-md)
}
.ov-card:hover::before{ opacity:1 }
.ov-icon{
  width:48px; height:48px; background:var(--green); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; color:#fff; position:relative; z-index:1;
  transition:transform .35s, box-shadow .35s
}
.ov-card:hover .ov-icon{ transform:rotate(12deg) scale(1.1); box-shadow:0 6px 16px rgba(68,214,44,.35) }
.ov-icon svg{ width:22px; height:22px }
.ov-card h3{
  font-family:var(--ff-card); font-size:16px; font-weight:700;
  color:#091123; margin:0; position:relative; z-index:1
}

/* =====================================================
   CTA BANNER
===================================================== */
.cta-sec{ padding:60px 0; background:#fff }
.cta-banner{
  background:linear-gradient(135deg,#44D62C 0%,#28a010 60%,#1e7a0c 100%);
  border-radius:28px; padding:72px 48px; text-align:center;
  position:relative; overflow:hidden;    background: url(/images/image15.png) top center no-repeat;    background-size: cover;min-height: 514px;
}
.cta-banner::before,.cta-banner::after{
  content:''; position:absolute; border-radius:50%; pointer-events:none
}
.cta-banner::before{
  top:-80px; left:-80px; width:300px; height:300px;
  background:rgba(255,255,255,.1); animation:floatBlob 8s ease-in-out infinite
}
.cta-banner::after{
  bottom:-60px; right:-60px; width:250px; height:250px;
  background:rgba(255,255,255,.08); animation:floatBlob 11s ease-in-out 2s infinite reverse
}
.cta-banner h2{
  font-family:var(--ff-head); font-size:clamp(26px,4vw,48px); font-weight:700;
  color:#fff; line-height:1.2; margin-bottom:16px; position:relative; z-index:1;    background-image: linear-gradient(to bottom, #0a8b00, #4ca645);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(2px 3px 4px rgba(76, 166, 69, 0.25));

}
.cta-banner .cta-sub{
  color:#000; font-size:15px; margin-bottom:32px;
  max-width:480px; margin-left:auto; margin-right:auto; position:relative; z-index:1
}
.btn-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:#fff;
  font-family:var(--ff-body); font-size:15px; font-weight:700;
  padding:14px 30px; border-radius:50px; text-decoration:none; border:none;
  position:relative; z-index:1; overflow:hidden;
  transition:transform .25s, box-shadow .25s;    background: linear-gradient(135deg, #45D044 0%, #A2F231 100%);
}
.btn-cta::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(68,214,44,.18),transparent);
  background-size:200%; animation:shimmer 2.5s linear infinite
}
.btn-cta:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(0,0,0,.2); color:var(--green-dk) }
.btn-cta .arr-sm{
       font-size: 20px;
    display:flex; align-items:center; justify-content:center;
  transition:transform .2s, background .2s; position:relative; z-index:1;
}
/* .btn-cta:hover .arr-sm{ transform:translateX(3px); background:var(--green-md) } */

/* =====================================================
   FOOTER
===================================================== */
.site-footer{
  background:#fff; border-top:1px solid var(--bdr); padding:64px 0 28px;background: #fbfaff;
}
.flogo{   width:auto; margin-bottom:14px; display:block }
.f-about p{ font-size:15px; font-weight:500; color:var(--muted); line-height:1.75;  }
.socials{ display:flex; gap:10px; margin-top:20px }
.social-btn{
  width:34px; height:34px; background:var(--green-lt); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--green-dk);
  transition:background .25s, transform .2s, box-shadow .2s
}
.social-btn:hover{
  background:var(--green); color:#fff;
  transform:translateY(-2px); box-shadow:0 4px 12px rgba(68,214,44,.3)
}
.f-col h4{
  font-family:var(--ff-head); font-size:16px; font-weight:700; margin-bottom:16px
}
.f-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.f-links a{
  font-size:15px; font-weight:500; color:var(--muted); text-decoration:none;
  transition:color .2s, padding-left .2s
}
.f-links a:hover{ color:var(--green-dk); padding-left:4px }
.c-item{ display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:500; color:var(--muted); margin-bottom:10px }
.c-item svg{ width:16px; height:16px; flex-shrink:0; color:var(--green-dk); margin-top:1px }
.nl-form{ display:flex; gap:8px; margin-top:10px }
.nl-in{
  flex:1; padding:10px 14px; border:1px solid var(--bdr); border-radius:8px;
  font-size:13px; font-family:var(--ff-body); outline:none;
  transition:border-color .2s, box-shadow .2s
}
.nl-in:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(68,214,44,.15) }
.nl-btn{
  background:var(--green); color:#fff; border:none; border-radius:8px;
  padding:10px 18px; font-size:13px; font-weight:600;
  font-family:var(--ff-body); cursor:pointer; transition:background .2s, transform .2s
}
.nl-btn:hover{ background:var(--green-dk); transform:scale(1.04) }
.f-bottom{ border-top:1px solid var(--bdr); padding-top:20px; margin-top:40px }
.f-copy{ font-size:12px; color:var(--muted) }
 

.master-hdr {
    width: 100%;
    float: left;
    text-align: left;
    font-size: 30px;
    font-weight: bold;
    color: #146632;
    padding: 10px 0px;
}

.masterIn {
    width: 100%;
    max-width: 1170px;
    margin: 0px auto;
}

.master-text {
    margin: 10px 0;
    min-height: 380px;
    float: left;
    width: 100%;
    color: #6b6b6b;
    padding: 0px 0px;
    line-height: 26px;
    font-size: 18px; text-align: justify;
}

    .master-text p {
        margin-bottom: 10px; text-align: justify;
    }

    .master-text img {
        max-width: 100%;
    }


.accordionHeader_Y {
    color: #fff;
    background: #146632 url(/images/ajax-arrow1.png) 99% center no-repeat;
    padding: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 10px;
}

.accordionHeaderSelected {
    color: #ffffff;
    background: #bba13c url(/images/ajax-arrow.png) 99% center no-repeat;
    padding: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 10px;
}

.accordionContent_Y {
    background-color: #fff;
    padding: 25px;
    padding-top: 22px;
    border: 1px solid #bba13c;
}

.ipibdr {
    border: 2px solid #2962b0;
}

.innerH2 {
    text-align: left;
    margin-bottom: 15px;
}

.innerImg {
    float: right;
    margin-left: 25px;
    max-width: 450px;
}

ul.innerUl li {
    padding-left: 40px;
    background: url(/images/ulbg.png) 0px 4px no-repeat;
    margin-bottom: 12px;
}


.innerTbl {
    width: 100%;
    border-collapse: collapse;
}

    .innerTbl tr:first-child {
        font-weight: bold;
    }

.innerTbl {
    width: 100%;
}

    .innerTbl tr td {
        padding: 5px;
    }

.tpr tr td {
    text-align: center;
    vertical-align: top;
    padding: 0 5px 20px 5px;
}

.innerTbl1 {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 10px;
}

    .innerTbl1 tr td, .innerTbl1 tr th {
        border: 1px solid #b5bacc;
        padding: 4px 5px;
    }

    .innerTbl1 tr th {
        background: #d1d5e3;
    }

    .innerTbl1 tr:nth-child(even) {
        background-color: #b4ffb6;
    }

.innerTbl tr th, .innerTbl tr td {
    border: 1px solid #dee2e6;
    padding: 5px;
}

.back-to-top {
    position: absolute;
    bottom: 12px;
    right: 10px;
    z-index: 999;
}

.innerH3 {
    color: #146632;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.innerH4 {
    color: #146632;
    font-size: 18px;
    font-weight: bold;
}

.todContaner {
    color: #242221;
    font: normal normal bold 23px/28px Helvetica;
    color: #242221;
}

.topperName {
    font-weight: bold;
}

.todImg {
    font-style: normal;
    display: none
}

.founder {
    max-height: 350px;
}

.tbgBg {
    background: #8a2f1b;
    color: #fff;
}

.font-20 {
    font-size: 18px;
}

.tbltd3 tr td {
    width: 33%;
}

.gray {
    background: #e8e8e8;
    color: #146632;
    font-weight: bold;
    font-size: 18px;
}

.contentAccordion table tr td, .contentAccordion table tr th {
    padding: 5px;
}

#app_scroll {
    text-align: center;
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.custom-controls {
    float: left;
    text-align: center;
    height: 40px;
    width: 100%;
    position: relative;
}

#app_scroll .slides li p {
    color: #3B3735;
   
    font-size: 26px;
    font-weight: 300;
}

.custom-controls .flex-control-paging li a {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid #146632;
}

    .custom-controls .flex-control-paging li a:hover {
        background: #146632;
    }

.custom-controls .flex-control-nav li {
    margin: 0px 6px;
}

.escode {
    color: #146632;
    font-size: 26px;
    font-weight: 600;
}

.scode {
    color: #000;
    font-size: 26px;
}

.ftext h2 {
    font: normal normal bold 36px/71px Times New Roman;
    color: #146632;
    text-transform: uppercase;
    margin: 0;
}

.ftext h3 {
    font: normal normal bold 21px/1px Times New Roman;
    color: #146632;
    margin: 0;
    margin-bottom: 25px;
}

.ftext p {
    font: normal normal normal 20px/32px Helvetica;
    color: #000;
    margin: 0;
    text-align: left;
    text-shadow: 0px 1px 2px rgb(226 226 233);
}


.t20 {
    font-size: 18px;
    text-align: left;
    color: #fff;
    font-weight: 300;
}

    .t20 b {
        color: #3B3735
    }

.f14b {
    font-size: 38px;
    color: #D6B75C;
}

.usefullink li {
    display: block;
    background: url(/images/foooter_arrow.png) no-repeat left 3px;
    padding-left: 29px;
    margin-bottom: 10px;
    text-align: left;
}

    .usefullink li a {
        font-size: 18px;
        color: #fff;
        text-align: left;
        font-weight: 300;
    }

        .usefullink li a:hover {
            color: #a91f21;
        }


/*----------------------------------------*/
/*  04 - Service
/*----------------------------------------*/
/** Style 1 **/
.pbmit-ele-service.pbmit-service-style-1 {
    margin-bottom: 30px;
}

.pbmit-service-style-1 .pbminfotech-post-item {
    position: relative;
}

.pbmit-service-style-1 .pbmit-featured-wrapper img {
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.pbmit-service-style-1 .pbmit-featured-img-wrapper {
    position: relative;
    overflow: hidden;
}

.pbmit-service-style-1 .pbmit-featured-wrapper img {
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -o-transform: scale(1.01);
    transform: scale(1.01);
}

.pbmit-service-style-1:hover .pbmit-featured-wrapper img {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.pbmit-service-style-1 .pbmit-featured-wrapper::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: -moz-linear-gradient(bottom, rgba(33, 44, 64,0.7) 0%, rgba(33, 44, 64,0.7) 5%, rgba(33, 44, 64, 0) 59%, rgba(33, 44, 64,0) 100%);
    background: -webkit-linear-gradient(bottom, rgba(33, 44, 64,0.7) 0%, rgba(33, 44, 64,0.7) 5%, rgba(33, 44, 64, 0) 59%, rgba(33, 44, 64,0) 100%);
    background: linear-gradient(to top, rgba(33, 44, 64,0.7) 0%, rgba(33, 44, 64,0.7) 5%, rgba(33, 44, 64, 0) 59%, rgba(33, 44, 64,0) 100%);
}

.pbmit-service-style-1 .pbminfotech-service-content {
    position: relative;
}

.pbmit-service-style-1 .pbminfotech-box-content {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 35px;
}

.pbmit-service-style-1 .pbmit-service-icon-wrapper {
    font-size: 50px;
    line-height: 50px;
}

    .pbmit-service-style-1 .pbmit-service-icon-wrapper img {
        width: 60px;
        height: 60px;
    }

.pbmit-service-style-1 .pbmit-service-icon-wrapper {
    display: none;
}

.pbmit-service-style-1 .pbmit-serv-cat {
    font-family: var(--pbmit-heading-typography-font-family);
    font-weight: 500;
    font-style: normal;
}

    .pbmit-service-style-1 .pbmit-serv-cat a {
        font-size: 12px;
        line-height: 24px;
        padding-left: 15px;
        letter-spacing: 1px;
        text-transform: uppercase;
        position: relative;
        color: rgba(255, 255, 255,0.8);
    }

        .pbmit-service-style-1 .pbmit-serv-cat a::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 7px;
            height: 7px;
            border-radius: 50px;
            background-color: var(--pbmit-white-color);
            -khtml-transform: translateX(0%) translateY(-50%);
            -moz-transform: translateX(0%) translateY(-50%);
            -ms-transform: translateX(0%) translateY(-50%);
            -o-transform: translateX(0%) translateY(-50%);
            transform: translateX(0%) translateY(-50%);
        }

.pbmit-service-style-1 .pbmit-service-title {
    font-size: 26px;
    line-height: 32px;
    margin: 0;
    color: var(--pbmit-white-color);
}

    .pbmit-service-style-1 .pbmit-service-title a {
        color: var(--pbmit-white-color);
    }

        .pbmit-service-style-1 .pbmit-service-title a:hover {
            color: rgba(var(--pbmit-white-color-rgb),0.8);
        }

.pbmit-service-style-1 .pbmit-link,
.pbmit-service-style-2 .pbmit-link,
.pbmit-team-style-3 .pbmit-link,
.pbmit-portfolio-style-2 .pbmit-link,
.pbmit-blog-style-1 .pbmit-link,
.pbmit-blog-style-3 .pbmit-link,
.pbmit-team-style-2 .pbmit-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/** Style 2 **/
.pbmit-service-style-2 .pbminfotech-post-item {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.pbmit-service-style-2:hover .pbminfotech-post-item {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.pbmit-service-style-2 .pbmit-service-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.pbmit-service-style-2 .pbmit-svg-btn {
    position: absolute;
    right: 0;
    bottom: 0;
}

    .pbmit-service-style-2 .pbmit-svg-btn a {
        padding: 0;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-radius: inherit;
        display: inline-block;
        background: var(--pbmit-white-color);
    }

        .pbmit-service-style-2 .pbmit-svg-btn a svg {
            height: 15px !important;
            width: 15px !important;
        }

.pbmit-service-style-2 .pbmit-service-icon-wrapper {
    font-size: 50px;
    line-height: 50px;
}

    .pbmit-service-style-2 .pbmit-service-icon-wrapper i {
        color: var(--pbmit-global-color);
    }

    .pbmit-service-style-2 .pbmit-service-icon-wrapper img {
        width: 60px;
        height: 60px;
    }

.pbmit-service-style-2 .pbmit-service-icon-wrapper {
    display: none;
}

.pbmit-service-style-2 .pbmit-serv-cat a {
    font-size: 12px;
    line-height: 24px;
    padding-left: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
}

    .pbmit-service-style-2 .pbmit-serv-cat a::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 7px;
        height: 7px;
        border-radius: 50px;
        background-color: var(--pbmit-global-color);
        -khtml-transform: translateX(0%) translateY(-50%);
        -moz-transform: translateX(0%) translateY(-50%);
        -ms-transform: translateX(0%) translateY(-50%);
        -o-transform: translateX(0%) translateY(-50%);
        transform: translateX(0%) translateY(-50%);
    }

.pbmit-service-style-2 .pbmit-service-title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
}

.pbmit-svg-btn a svg line {
    fill: none;
    stroke: var(--pbmit-global-color);
    stroke-width: 2;
    stroke-miterlimit: 10;
}

    .pbmit-svg-btn a svg line:nth-child(1) {
        stroke-dasharray: 25px;
        stroke-dashoffset: 50px;
        transition: stroke-dashoffset .5s cubic-bezier(.61,1,.88,1);
    }

    .pbmit-svg-btn a svg line:nth-child(2),
    .pbmit-svg-btn a svg line:nth-child(3) {
        stroke-dasharray: 20px;
        stroke-dashoffset: 40px;
        transition: stroke-dashoffset .6s cubic-bezier(.61,1,.88,1) .3s;
    }

.pbmit-service-style-2:hover .pbmit-svg-btn a svg line {
    stroke-dashoffset: 0;
    stroke: var(--pbmit-global-color);
}
/** Style 3 **/
.pbmit-service-style-3 {
    position: relative;
    margin-bottom: 30px;
}

    .pbmit-service-style-3 .pbminfotech-post-item {
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(33, 44, 64, 0.2);
    }

    .pbmit-service-style-3 .pbminfotech-box-content {
        position: relative;
        justify-content: space-between;
    }

    .pbmit-service-style-3 .pbmit-service-icon-wrapper {
        font-size: 50px;
        line-height: 50px;
    }

        .pbmit-service-style-3 .pbmit-service-icon-wrapper i {
            color: var(--pbmit-global-color);
        }

        .pbmit-service-style-3 .pbmit-service-icon-wrapper img {
            width: 80px;
            height: 80px;
            margin-right: 45px;
        }

    .pbmit-service-style-3 .pbminfotech-icon-box i {
        font-size: 80px;
        line-height: 80px;
        padding-right: 45px;
        color: var(--pbmit-global-color);
    }

    .pbmit-service-style-3 .pbmit-serv-cat a {
        font-size: 12px;
        line-height: 24px;
        padding-left: 15px;
        letter-spacing: 1px;
        font-weight: 500;
        text-transform: uppercase;
        position: relative;
        font-family: var(--pbmit-heading-typography-font-family);
    }

    .pbmit-service-style-3 .pbminfotech-content-wrapper {
        padding-right: 10px;
    }

    .pbmit-service-style-3 .pbmit-serv-cat a::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 7px;
        height: 7px;
        border-radius: 50px;
        background-color: var(--pbmit-global-color);
        -khtml-transform: translateX(0%) translateY(-50%);
        -moz-transform: translateX(0%) translateY(-50%);
        -ms-transform: translateX(0%) translateY(-50%);
        -o-transform: translateX(0%) translateY(-50%);
        transform: translateX(0%) translateY(-50%);
    }

    .pbmit-service-style-3 .pbmit-service-title {
        font-size: 26px;
        line-height: 32px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .pbmit-service-style-3 .pbmit-svg-btn a {
        padding: 0;
        background-color: transparent;
    }

        .pbmit-service-style-3 .pbmit-svg-btn a svg {
            height: 20px !important;
            width: 20px !important;
        }

    .pbmit-service-style-3 .pbmit-featured-wrapper {
        opacity: 0;
        visibility: hidden;
        transition: all 500ms ease;
        position: absolute;
        transform: scale(0);
        top: -100px;
        right: 5%;
        z-index: 10;
    }

        .pbmit-service-style-3 .pbmit-featured-wrapper img {
            transform: rotate(5deg);
        }

    .pbmit-service-style-3:hover .pbmit-featured-wrapper {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .pbmit-service-style-3:hover .pbmit-svg-btn a svg line {
        stroke-dashoffset: 0;
        stroke: var(--pbmit-global-color);
    }
/** Style 4 **/
.pbmit-service-style-4 {
    position: relative;
}

    .pbmit-service-style-4 .pbminfotech-box-content {
        position: absolute;
        top: auto;
        left: 0;
        bottom: 0;
        padding: 40px;
        text-align: left;
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        transition: .5s;
    }

    .pbmit-service-style-4:not(.pbmit-active) .pbminfotech-box-content {
        padding-left: 90px;
        transition: .5s;
    }

    .pbmit-service-style-4 .pbmit-content-inner {
        display: flex;
        align-items: center;
    }

    .pbmit-service-style-4 .pbmit-serv-cat a {
        position: relative;
        padding-left: 15px;
        color: var(--pbmit-light-color);
    }

        .pbmit-service-style-4 .pbmit-serv-cat a::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 7px;
            height: 7px;
            border-radius: 50px;
            background-color: var(--pbmit-light-color);
            -khtml-transform: translateX(0%) translateY(-50%);
            -moz-transform: translateX(0%) translateY(-50%);
            -ms-transform: translateX(0%) translateY(-50%);
            -o-transform: translateX(0%) translateY(-50%);
            transform: translateX(0%) translateY(-50%);
        }

    .pbmit-service-style-4 .pbmit-service-title {
        font-size: 26px;
        line-height: 32px;
        transition: .5s;
        margin: 0;
        z-index: 1;
        width: 450px;
        color: var(--pbmit-white-color);
    }

        .pbmit-service-style-4 .pbmit-service-title a {
            color: var(--pbmit-white-color);
        }

    .pbmit-service-style-4 .pbmit-cat-wrap {
        opacity: 0;
        transition: .5s;
    }

    .pbmit-service-style-4.pbmit-active .pbmit-svg-btn,
    .pbmit-service-style-4.pbmit-active .pbmit-cat-wrap {
        opacity: 1;
    }

    .pbmit-service-style-4 .pbmit-service-img-wrapper {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        transition: 0.5s;
        z-index: 0;
        position: absolute;
        background-position: center center;
        background-size: auto;
        object-fit: cover;
    }

        .pbmit-service-style-4 .pbmit-service-img-wrapper::after {
            position: absolute;
            content: "";
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: -moz-linear-gradient(bottom, rgba(33, 44, 64,0.7) 0%, rgba(33, 44, 64,0.7) 5%, rgba(33, 44, 64, 0) 59%, rgba(33, 44, 64,0) 100%);
            background: -webkit-linear-gradient(bottom, rgba(33, 44, 64,0.7) 0%, rgba(33, 44, 64,0.7) 5%,rgba(33, 44, 64,0) 59%, rgba(33, 44, 64,0) 100%);
            background: linear-gradient(to top, rgba(33, 44, 64,0.7) 0%, rgba(33, 44, 64,0.7) 5%,rgba(33, 44, 64,0) 59%, rgba(33, 44, 64,0) 100%);
        }

.pbmit-element-service-style-4 .pbmit-service-style-4 {
    flex: 1;
    height: 100%;
    transition: 0.7s;
    position: relative;
    overflow: hidden;
    padding: 0;
    height: 700px;
}

    .pbmit-element-service-style-4 .pbmit-service-style-4.pbmit-active {
        flex: 6;
    }

.pbmit-service-style-4 .pbminfotech-box-number {
    font-size: 80px;
    line-height: 80px;
    display: inline-block;
    position: relative;
    padding-right: 20px;
    z-index: 0;
    font-weight: 700;
    color: var(--pbmit-white-color);
    font-family: var(--pbmit-heading-typography-font-family);
}

.pbmit-service-style-4:not(.pbmit-active) .pbminfotech-box-number {
    transform: rotate(-90deg);
    transition: 0.5s;
}

.pbmit-service-style-4.pbmit-active .pbminfotech-box-number {
    transition: 0s;
}

.pbmit-service-style-4 .pbmit-svg-btn a {
    padding: 0;
    background-color: transparent;
}

.pbmit-service-style-4 .pbmit-svg-btn {
    opacity: 0;
    transition: 0.9s;
}

    .pbmit-service-style-4 .pbmit-svg-btn a svg {
        height: 30px !important;
        width: 30px !important;
    }

        .pbmit-service-style-4 .pbmit-svg-btn a svg line {
            stroke: var(--pbmit-white-color);
        }

.pbmit-service-style-4:hover .pbmit-svg-btn a svg line {
    stroke-dashoffset: 0;
}

.pbmit-service-style-4 .pbmit-svg-btn i {
    font-size: 30px;
    line-height: 80px;
    color: var(--pbmit-white-color);
}

.pbmit-service-style-4 .pbmit-featured-wrapper {
    display: none;
}

.pbmit-service-style-4 .pbmit-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
/** Style 5 **/
.pbmit-service-style-5 .pbminfotech-post-item {
    position: relative;
}

.pbmit-service-style-5 .pbmit-content-inner,
.pbmit-service-style-5 .pbminfotech-box-content {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pbmit-service-style-5 .pbminfotech-box-content {
    padding-bottom: 10px;
}

.pbmit-service-style-5 .pbmit-content-inner::after {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -10px;
    left: 0;
    background-color: var(--pbmit-white-color);
    -webkit-transition: all .800s ease-in-out;
    transition: all .800s ease-in-out;
}

.pbmit-service-style-5:hover .pbmit-content-inner::after {
    width: 100%;
}

.pbmit-service-style-5 .pbmit-service-icon-wrapper img {
    width: 80px;
    height: 80px;
    margin-right: 45px;
}

.pbmit-service-style-5 .pbminfotech-icon-box i {
    font-size: 80px;
    line-height: 80px;
    padding-right: 45px;
    color: var(--pbmit-global-color);
}

.pbmit-service-style-5 .pbminfotech-box-number {
    font-size: 14px;
    line-height: 14px;
    position: relative;
    font-weight: 300;
    color: rgba(255, 255, 255,0.4);
    font-family: var(--pbmit-heading-typography-font-family);
}

    .pbmit-service-style-5 .pbminfotech-box-number::after {
        content: ".";
        position: absolute;
        bottom: 0;
        right: -3px;
    }

.pbmit-service-style-5 .pbmit-service-title {
    font-size: 20px;
    line-height: 26px;
    margin: 0;
    padding-left: 10px;
    font-weight: 500;
}

    .pbmit-service-style-5 .pbmit-service-title,
    .pbmit-service-style-5 .pbmit-service-title a {
        color: var(--pbmit-white-color);
    }

.pbmit-service-style-5 .pbmit-svg-btn a {
    padding: 0;
    background-color: transparent;
}

    .pbmit-service-style-5 .pbmit-svg-btn a svg {
        height: 12px !important;
        width: 12px !important;
        opacity: 0;
        visibility: hidden;
    }

.pbmit-service-style-5:hover .pbmit-svg-btn a svg {
    opacity: 1;
    visibility: visible;
}

    .pbmit-service-style-5:hover .pbmit-svg-btn a svg line {
        stroke-dashoffset: 0;
        stroke: var(--pbmit-white-color);
    }

.pbmit-service-style-5 .pbmit-hover-img {
    position: absolute;
    z-index: 1;
    opacity: 0;
    margin-top: -100px;
    margin-left: 50px;
    transform: scale(0.4);
    transform-origin: 50% 50%;
}
