/* font family */

@font-face {
    font-family: "DMSans-Light";
    src: url(../fonts/DMSans-Light.ttf);
}
@font-face {
    font-family: "DMSans-Regular";
    src: url(../fonts/DMSans-Regular.ttf);
}

@font-face {
    font-family: "DMSans-Medium";
    src: url(../fonts/DMSans-Medium.ttf);
}

@font-face {
    font-family: "DMSans-SemiBold";
    src: url(../fonts/DMSans-SemiBold.ttf);
}

 @font-face {
    font-family: "DMSans-Bold";
    src: url(../fonts/DMSans-Bold.ttf);
}

@font-face {
    font-family: "PlusJakartaSans-Regular";
    src: url(../fonts/PlusJakartaSans-Regular.ttf);
}

@font-face {
    font-family: "PlusJakartaSans-Medium";
    src: url(../fonts/PlusJakartaSans-Medium.ttf);
}
@font-face {
    font-family: "PlusJakartaSans-Regular";
    src: url(../fonts/PlusJakartaSans-Regular.ttf.otf);
}
@font-face {
    font-family: "PlusJakartaSans-Bold";
    src: url(../fonts/PlusJakartaSans-Bold.ttf);
}



/* color pallete 
dark gray : #1C1C1C text color;
soft white : #F5F8FA for bg content
orange  : #FF7B00 for hvr
light blue : #E8F0FA for cards */

/* font family end */

* {
    margin: 0;
    padding: 0;
}


html {
    overflow-x: clip;
}
body {
    font-size: 16px;
    font-family: "DMSans-Regular";
    background: #f7f7f2;
    overflow-x: clip;
    max-width: 100%;
    position: relative;
    background-image: url(../img/texture.png);
}



img {
    max-width: 100%;
}

ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.mb-100 {
    margin-bottom: 100px;
}
.mt-100{
    margin-top: 100px;
}
.mt-140{
    margin-top: 140px;
}

.pt-100{
    padding-top: 100px;
}
.pb-100{
    padding-bottom: 100px;
}

.mainheader {
    z-index: 9;
    width: 100%;
  transition: all 0.4s ease;
}
.mainheader .navbar-brand{
    width: 120px;
}

/* jab sticky lage */
.headermainwrapper{
        width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.headersticky {
     position: fixed;
    top: 0px;
    width: 100%;
    background: rgb(247 247 242);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #ddd;
}
.headersticky .navmenucustom .nav-item .nav-link{
    color: #000;
}
.bluelogo{
    display: none;
}
.headersticky .bluelogo{
    display: block;
}
.headersticky .whitelogo{
    display: none;
}

/* smooth entry animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.primarybtn{
        background-color: #022b63;
    padding: 8px 16px;
    border-radius: 7px;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: 0.5s;
    border: 1px solid #022b63;
    font-size: 15px;
}
.primarybtn:hover{
    background-color: #000;
    color: #fff;
     transition: 0.5s;
     border: 1px solid #000;
}
.secondarybtn{
        background-color: #ffffff;
    padding: 10px 18px;
    border-radius: 10px;
    color: #000000;
    transition: 0.5s;
}
.secondarybtn:hover{
    background-color: #000;
    color: #fff;
     transition: 0.5s;
}

.navmenucustom{
    justify-content: space-between;
}
.navmenucustom .nav-item .nav-link{
        color: #000;
    font-size: 14px;
    padding: 0 12px;
}
/* Jab kisi ek item pe hover ho — links apne rang me rahenge */
.mainheader .primarybtn{
    background: #fff;
    color: #000;
    border: 1px solid #fff;
}

.mainheader.headersticky .primarybtn{
    background: #022b63;
    color: #fff;
    border: 1px solid #022b63;
}
/* .hero_sectionbtnwrap .primarybtn{
    background: #fff;
    color: #000;
    border: 1px solid #fff;
} */
/* Jo actual hovered link hai wo black rahe */
/* .navmenucustom .navbar-nav .nav-link:hover {
  color: #fff;
} */
.navmenucustom .headerbtnwrap{
    display: flex;
    gap: 0 8px;
}
.navmenucustom .navbar-nav{
    margin: auto;
}

.hero_sectioncontent h1{
        font-family: "FoundersGrotesk-Medium";
    font-size: 45px;
}
.banner_content{
        padding-top: 30px;
}
.banner_content h5{
        font-size: 16px;
}
.banner_content h1{
        font-size: 37px;
    font-family: 'PlusJakartaSans-Medium';
    margin-bottom: 28px;
}
.rotator {
  display: inline-block;
  height: 1.2em;           /* ek line ki height */
  overflow: hidden;         /* baaki lines chhupi rahengi */
  vertical-align: top;
  font-style: italic;
}
.rotator-list {
  display: flex;
  flex-direction: column;
  animation: rotate 8s infinite;   /* 4 words = 8s, adjust as needed */
}
.rotator-list span {
  height: 1.2em;
  line-height: 1.2em;
}
@keyframes rotate {
  0%,   20%  { transform: translateY(0); }
  25%,  45%  { transform: translateY(-1.2em); }
  50%,  70%  { transform: translateY(-2.4em); }
  75%,  95%  { transform: translateY(-3.6em); }
  100%       { transform: translateY(0); }
}
.hero_sectioncontent ul li{
        gap: 0 8px;
    display: inline-flex;
    justify-content: start;
    align-items: center;
    font-size: 17px;
    color: #383838;
    margin-bottom: 7px;
    border-bottom: 2px dashed #d3d3d3;
    padding-bottom: 9px;
}
.hero_sectioncontent ul li:last-child{
    border-bottom: none;
}
.hero_sectioncontent ul li i{
        background: #d0ece5;
    padding: 4px;
    border-radius: 21px;
}
.hero_sectioncontent ul li:nth-child(2) i{
    background: #fff4d9;
}
.banner_client_wrap{
    margin-top: 20px;
}
.banner_client_wrap h6{
        font-size: 14px;
    font-style: italic;
    margin-top: 5px;
}

.herobtnwrapper{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 20px;
    margin-top: 40px;
}
.herobtnwrapper a:last-child{
        color: #000;
    font-size: 21px;
    display: inline-flex;
    justify-content: start;
    align-items: center;
    gap: 0 7px;
}

.herorightside{
    background-image: url(../img/herobg.avif);
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    padding: 20px;
}
.herorightsideinner{
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
}
.herorightsideinner .nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #000000;
    border-color: var(--bs-nav-tabs-link-active-border-color);
}
.herorightsideinner .nav-tabs {
    border-bottom: 1px solid #ddd;
    padding: 15px 15px;
    background: #f9f9f9;
}
.herorightsideinner .nav-tabs .nav-link{
        border-radius: 8px;
    font-size: 14px;
    padding: 8px 14px;
    color: #000;
    transition: 0.5s;
}
.herorightsideinner .nav-tabs .nav-link:hover {
    color: #ffffff;
    background-color: #000000;
    transition: 0.5s;
    border-color: var(--bs-nav-tabs-link-active-border-color);
}

.herotabinner{
        padding: 30px 20px;
    height: calc(100vh - 190px);
    overflow: auto;
}
.herotabinner h3{
        font-size: 32px;
    font-family: "PlusJakartaSans-Regular";
}
.insightcard{
        background: #f8f6f0;
    padding: 15px;
    border-radius: 10px;
    transition: 0.5s;
}
.insightcard1{
        background: #d0ece5;
}
.insightcard2{
    background: #fff4d9;
}
.insightcard h4{
        font-size: 18px;
    font-family: "PlusJakartaSans-Medium";
    margin-bottom: 0;
    margin-top: 0px;
}
.insightcard p{
    margin-bottom: 0px;
    font-size: 14px;
}
.herotabinner h4{
        font-size: 20px;
    font-family: 'DMSans-Medium';
    margin-top: 20px;
}
.herotabinner ul{
    list-style: circle;
    padding-left: 18px;
}
.herotabinner ul li{
    font-size: 14px;
}
.herotabinner h6{
        background: #eeffee;
    padding: 14px;
    margin-bottom: 0px;
    border-radius: 10px;
    margin-top: 20px;
    color: green;
    font-size: 15px;
    border: 1px solid green;
}
.mainsectionheading{
         width: 850px;
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
}
.mainsectionheading h2{
        font-size: 35px;
    line-height: 1.2;
    font-family: "PlusJakartaSans-Medium";
}
.mainsectionheading h3 {
    font-family: 'DMSans-Medium';
    font-size: 15px;
    position: relative;
    padding-left: 16px;
    display: inline-block;
}
.mainsectionheading h3::before{
    position: absolute;
    content: '';
    left: 0;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
}




.mainsectionheadingcustom{
    margin-bottom: 30px;
}
.mainsectionheadingcustom h2{
        font-size: 35px;
    line-height: 1.2;
    font-family: "PlusJakartaSans-Regular";
}
.mainsectionheadingcustom h3 {
    font-family: 'DMSans-Medium';
    font-size: 15px;
    position: relative;
    padding-left: 16px;
    display: inline-block;
}
.mainsectionheadingcustom h3::before{
    position: absolute;
    content: '';
    left: 0;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
}
.topheader{
        background: #000;
    padding: 10px 0;
}
.topbarcontent{
        color: #fff;
    text-align: center;
    font-size: 15px;
}
.topbarcontent span{
        background: #ffffff45;
    padding: 0 5px;
    border-radius: 4px;
}
.aboutbreakdown{
        grid-column-gap: 8px;
    grid-row-gap: 0px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    display: grid;
}
.companynmbrs{
        background: #fff;
    padding: 10px;
    position: relative;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    border-radius: 20px;
    flex-flow: column;
    width: 100%;
    display: flex;
}
.companycardinner{
        background: #f7f7f7;
    position: relative;
    padding: 12px 15px;
    border-radius: 16px;
    height: -webkit-fill-available;
}
.companycardinner h2{
        font-size: 32px;
    font-family: "PlusJakartaSans-Medium";
}
.companycardinner p{
    margin-bottom: 0px;
}
.testicard{
        background: #f7f7f7;
    position: relative;
    padding: 12px 15px;
    border-radius: 16px;
}
.testicard ul{
        display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 5px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #f9a825;

}
.testiimg{
    position: relative;
}
.testiimg img{
    width: 100px;
}
.testiimg h2{
        font-size: 30px;
    font-family: "PlusJakartaSans-Medium";
    margin-top: 13px;
}
.testiprofile{
        display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 8px;
}
.testiprofile img{
        width: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 10px;
    background: #fff;
}
.testiprofile div h5{
        font-family: "PlusJakartaSans-Medium";
    font-size: 17px;
    margin-bottom: 0px;
}
.testiprofile div p{
        margin-bottom: 0px;
    font-size: 14px;
    color: gray;
}
.starrating{
        display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: column;
    height: 100%;
}
.abttestimonial{
        background: #fff;
    border-radius: 10px;
    padding: 10px;
    position: relative;
}
.producthighlightcard{
        background: #fff;
    border-radius: 16px;
    position: relative;
    margin-top: 30px;
    padding: 10px 20px;
    transition: 0.5s;
    border: 1px solid #e7e3e4;
    height: -webkit-fill-available;
}
.productcontent h4{
        font-size: 20px;
    font-family: "PlusJakartaSans-Medium";
    margin-bottom: 0px;
    margin-top: 30px;
}
.productcontent p{
    margin-bottom: 0px;
}
footer {
        background: #011a43;
    border-radius: 15px;
    padding: 50px 0px 15px 0px;
    position: relative;
    margin: 0 12px 12px 12px;
    border: 1px solid #ebebeb;
}
.footersubscribe{
        display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    border-bottom: 1px dashed #fff;
    padding-bottom: 20px;
}
.footersubscribe h3{
    font-size: 32px;
    color: #fff;
    font-family: "PlusJakartaSans-Medium";
    width: 640px;
}

.footerabout h4{
        font-size: 20px;
    color: #fff;
    margin-top: 20px;
}

.footerabout ul.footercontactdetail li a{
    display: flex;
    justify-content: start;
    align-items: baseline;
    gap: 0 8px;
    color: #fff;
}
.footerabout ul.footercontactdetail{
        display: flex;
    flex-direction: column;
    gap: 10px 0;
}
.footerabout ul.footersocialicon{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 10px;
}
.footerabout ul.footersocialicon li a{
    color: #fff;
}
.footerlinks{
        display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 20px;
}
.footerlinks div h4{
        font-family: "PlusJakartaSans-Medium";
    font-size: 25px;
    margin-bottom: 10px;
    color: #fff;
}
.footerlinks div ul li a{
    color: #ffffff;
    font-size: 13px;
    font-family: 'DMSans-Medium';
    margin-bottom: 8px;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}
.footerlinks div ul li a:hover{
    color: #f9a825;
    margin-left: 3px;
}
.footerabout img{
        width: 150px;
    margin-bottom: 18px;
}
.footercopyright{
        border-top: 2px dashed #606060;
    margin-top: 40px;
    text-align: center;
    color: #ffff;
    padding-top: 12px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footercopyright p{
        margin-bottom: 0px;
}
.footercopyright p a{
        font-family: 'DMSans-bold';
    color: #ffffff;
    padding: 0px 0px;
    display: inline-block;
    text-decoration: underline;
}
.footercopyright ul{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 0 12px;
}
.footercopyright ul li a{
        color: #ffffff;
    font-size: 14px;
    font-family: 'DMSans-Medium';
}
.footercompliance{
        color: #c5c5c5;
    margin-top: 38px;
    font-size: 14px;
}
.footercompliance p{
    margin-bottom: 6px;
}
/* .swiper-slide { width: auto !important; } key line */
.integratedslider{
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.intergratedmodule{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 30px;
}
.intergratedmodule div h4{
        font-size: 20px;
    font-family: "PlusJakartaSans-Medium";
    margin-bottom: 0px;
}
.intergratedmodule div p{
    margin-bottom: 0px;
}
.integratedinnercard{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 10px;
    font-size: 15px;
    padding: 8px;
    background: #f7f7f7;
    border-radius: 50px;
    display: inline-block;
}
.integratedinnercard img{
    width: 30px;
}   

.testimonialcard{
        background: #f7f7f7;
    padding: 20px;
    border-radius: 16px;
    transition: 0.5s;
    height: -webkit-fill-available;
    margin: 10px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.testimonialcard p{
    font-size: 14px;
}
.testimonialcard p span{
        color: #022b63;
    background: #022b630f;
    padding: 0 2px;
}
.testimonialuser{
        display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 12px;
        border-top: 1px solid #ddd;
    padding-top: 12px;
    margin-top: 10px;
}
.testimonialuser img{
    width: 40px;
}
.testimonialuserinfo h4{
        font-size: 15px;
    font-family: 'DMSans-Regular';
    margin-bottom: 2px;
}
.testimonialuserinfo p{
    margin-bottom: 0px;
    color: gray;
    font-size: 13px;
}
.testimonialvideo video{
    width: 100%;
    height: 100%;
    border-radius: 15px;
}
.testimonialcardbiggercontent{
        display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.erpsection{
    background-size: cover;
    background-position: center;
    border-radius: 40px;
}
/* .erpsection .mainsectionheading{
    color: #fff;
}
.erpsection .mainsectionheading h3::before{
    background: #fff;
} */
/* Horizontal section */
.horizontal-section {
      position: relative;
    height: 400vh;
    margin-top: 20px;
}

/* Tabs */
.horizontal-section .tabs-wrapper {
  position: sticky;
    top: 72px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    z-index: 1;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 15px;
    padding-top: 15px;
    background: #f9f4f2;
}

.horizontal-section .tabs-wrapper::-webkit-scrollbar {
  display: none;
}

.horizontal-section .nav-link {
      display: inline-block;
    margin: 0px;
    border-radius: 8px;
    white-space: nowrap;
  color: #000;
}

.horizontal-section .nav-link.active {
  background: #fff4d9 !important;
    color: #000;
    transition: 0.5s;
}

/* Scroll area */
.horizontal-section .horizontal-scroll {
  position: sticky;
  top: 80px;
  height: 100vh;
  overflow: hidden;
  padding-top: 70px; /* space for tabs */
}

/* Horizontal movement */
.horizontal-section .scroll-content {
    width: 400%;
    transition: transform 0.1s linear;
    display: flex;
    gap: 0 20px;
}

/* Panels */
.horizontal-section .panel {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
}

.horizontal-section .panel:nth-child(1) { background: #fff4d9; border: 1px solid #ffde8f; }
.horizontal-section .panel:nth-child(2) { background: #f3ecf7; border: 1px solid #e9c1ff;}
.horizontal-section .panel:nth-child(3) { background: #ededed; border: 1px solid #cbcbcb;}
.horizontal-section .panel:nth-child(4) { background: #cbe6e0; border: 1px solid #87c3b6;}
.horizontal-section .panel:nth-child(5) { background: #e9f2ff; border: 1px solid #afc9ef;}

.panelcontent{
        padding: 30px 30px;
}
.panelcontent h4{
        font-size: 30px;
    font-family: "PlusJakartaSans-Regular";
    margin-bottom: 4px;
}
.panelcontent ul {
    list-style: circle;
    padding-left: 18px;
}
.panelcontent a{
        display: inline-block;
    margin-top: 30px;
    background: #fff;
    border-radius: 10px;
}
.securitysection .mainsectionheading{
    width: auto;
}
.securitycard{
        position: relative;
    background: #fff;
    border-radius: 15px 15px 0px 0px;
    padding: 20px;
    overflow: hidden;
    padding-right: 200px;
    padding-bottom: 40px;
    border: 1px solid #ddd;
}
.securitycardmiddle{
    border-radius: 0px;
    border-top: 0px;
    border-bottom: 0px;
}
.securitycardlast{
    border-radius: 0px 0px 15px 15px;
}
.securitycard h4{
        font-size: 25px;
    font-family: 'PlusJakartaSans-Medium';
    margin-bottom: 10px;
}
.securitycard img{
       position: absolute;
    right: 0;
    bottom: -50px;
    width: 170px;
}

.trustedimgcard img {
        width: 120px;
    height: 80px;
    object-fit: contain;
    background: #fff;
    padding: 13px 20px;
    border-radius: 10px;
}
.trustedsliderwrapper {
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.trustedstarwrapper ul{
        display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 60px;
    margin-bottom: 30px;
}
.trustedstarwrapper ul li{
        display: flex;
    justify-content: start;
    gap: 0 15px;
}
.trustedstarwrapper ul li h3{
        font-size: 39px;
    font-family: "PlusJakartaSans-Medium";
    margin-bottom: 0px;
}
.starflex{
        display: flex;
    justify-content: start;
    gap: 0 4px;
    font-size: 13px;
    margin-bottom: 5px;
    color: #FFD700;
}
.startrusted p{
    margin-bottom: 0px;
    font-size: 15px;
    color: gray;
}
.trustedclientsecton .mainsectionheading{
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}
.subsribefield{
        width: 400px;
    position: relative;
}
.subsribefield input{
        background: #fff;
    border: 1px solid #fff;
    padding: 11px 15px;
    width: 100%;
    border-radius: 10px;
}
.subsribefield button{
        position: absolute;
    right: 0;
    top: 0;
    border: none;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 0 8px;
    border-radius: 0px 10px 10px 0px;
    padding: 12px 12px;
    height: 48px;
}
.subsribefield button:hover{
    border:none;
    background: #022b63;
}
.securitysectionfix{
        position: sticky;
    z-index: 1;
    top: 90px;
}

 /* ── Scene ── */
    .scene {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── Icons row ── */
    .icons-row {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 28px;
      padding: 0 0 0 0;
      position: relative;
      z-index: 2;
    }

    /* ── Single icon ── */
    .icon-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .icon {
      width: 130px;
      height: 130px;
      border-radius: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      /* 3D-ish gloss */
      box-shadow:
        0 20px 60px rgba(0,0,0,.18),
        0 8px 20px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.15);
      transition: transform .3s ease, box-shadow .3s ease;
      cursor: pointer;
    }
    .icon:hover {
      transform: translateY(-6px) scale(1.04);
      box-shadow:
        0 30px 80px rgba(0,0,0,.22),
        0 12px 28px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.4),
        inset 0 -1px 0 rgba(0,0,0,.15);
    }

    /* Gloss overlay */
    .icon::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 55%;
      background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 100%);
      border-radius: 30px 30px 0 0;
      z-index: 1;
      pointer-events: none;
    }

    .icon svg, .icon .logo {
      position: relative;
      z-index: 2;
      width: 62px;
      height: 62px;
    }

    /* ── Icon colours ── */
    .ic-orange  { background: linear-gradient(145deg, #ff7043, #e8460a); }
    .ic-blue    { background: linear-gradient(145deg, #42a5f5, #1976d2); }
    .ic-green   { background: linear-gradient(145deg, #66bb6a, #2e7d32); }
    .ic-indigo  { background: linear-gradient(145deg, #5c6bc0, #3949ab); }
    .ic-teal    { background: linear-gradient(145deg, #26c6da, #00838f); }
    .ic-yellow  { background: linear-gradient(145deg, #ffca28, #f9a825); }

    /* ── Partial crop for first & last (like the reference image) ── */
    .icon-wrap.crop-left .icon  { margin-left: -48px; }
    .icon-wrap.crop-right .icon { margin-right: -48px; }

    /* ── Reflection ── */
    .reflection-row {
      display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    position: relative;
    z-index: 1;
    transform: scaleY(-1);
    overflow: hidden;
    margin-top: 4px;
    }

    .reflection {
      width: 130px;
    height: 130px;
    border-radius: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .18) 40%, transparent 75%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .18) 40%, #00000000 75%);
    }
    .reflection svg, .reflection .logo {
      width: 62px;
      height: 62px;
      filter: blur(.5px);
      opacity: .75;
    }

    

    /* ── SVG logos ── */

    /* 1. Orange – speech bubble Q / bookmark */
    .logo-orange { fill: white; }

    /* 2. Blue – Merge / Notchpay style */
    .logo-blue { fill: white; }

    /* 3. Green – snowflake/asterisk */
    .logo-green { fill: white; }

    /* 4. Indigo – bold N slash */
    .logo-indigo { fill: white; }

    /* 5. Teal – puzzle / building blocks */
    .logo-teal { fill: white; }

    /* 6. Yellow – bookmark/lightning */
    .logo-yellow { fill: white; }

    /* Responsive */
    @media (max-width: 900px) {
      .icon       { width: 100px; height: 100px; border-radius: 24px; }
      .reflection { width: 100px; height: 100px; border-radius: 24px; }
      .icon svg, .icon .logo,
      .reflection svg, .reflection .logo { width: 48px; height: 48px; }
      .icons-row, .reflection-row { gap: 18px; }
      .icon-wrap.crop-left .icon  { margin-left: -36px; }
      .icon-wrap.crop-right .icon { margin-right: -36px; }
    }
    @media (max-width: 600px) {
      .icon       { width: 72px; height: 72px; border-radius: 18px; }
      .reflection { width: 72px; height: 72px; border-radius: 18px; }
      .icon svg, .icon .logo,
      .reflection svg, .reflection .logo { width: 34px; height: 34px; }
      .icons-row, .reflection-row { gap: 10px; }
      .icon-wrap.crop-left .icon  { margin-left: -26px; }
      .icon-wrap.crop-right .icon { margin-right: -26px; }
      .reflection-row { height: 60px; }
    }
.erpglow{
        text-align: center;
    position: sticky;
    top: 70px;
    padding-top: 30px;
}
    .erpglow h4{
            font-size: 30px;
    font-family: "PlusJakartaSans-Regular";
    margin-bottom: 0px;
    }
    .erpglow img:last-child{
        width: 80%;
    }
    .modulesimg{
        text-align: center;
    }

    .contactsectionwrapperbg{
            background: url(../img/newsbg.jpg);
    background-size: cover;
    background-position: center;
    padding: 60px 250px;
    border-radius: 15px;
    color: #ffff;
    }
    .contactsectionwrapper{
        text-align: center;
    }
    .contactsectionwrapper h4{
        font-family: 'DMSans-Medium';
    font-size: 15px;
    position: relative;
    padding-left: 16px;
    display: inline-block;
    }
    .contactsectionwrapper h4::before {
    position: absolute;
    content: '';
    left: 0;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
}
.contactsectionwrapper h2{
    font-size: 35px;
    line-height: 1.2;
    font-family: "PlusJakartaSans-Regular";
}
.contactsectionwrapper p{
        margin-bottom: 0;
    margin-top: 30px;
    font-size: 15px;
}
.contactsectionwrapper a{
    background: #fff;
    padding: 8px 16px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 20px;
    color: #000;
    font-size: 15px;
}

.securitycontent h5{
        font-size: 16px;
    line-height: 1.4;
}
.securitycontent img{
    margin-top: 20px;
}
.blogcard{
        padding: 20px 30px;
    border-radius: 15px;
    background: #fff;
    position: relative;
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.latestblogflex{
        display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.latestblogimg{
        max-width: 202px;
        overflow: hidden;
        border-radius: 10px;
        transition: 0.5s;
        height: 300px;
}
.latestblogimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.latestblogheading h4{
        font-family: 'DMSans-Medium';
    font-size: 15px;
    position: relative;
    padding-left: 16px;
    display: inline-block;
}
.latestblogheading h4:before{
        position: absolute;
    content: '';
    left: 0;
    top: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #022b63;
}
.latestblogheading h2{
    font-size: 22px;
}
.latestblogheading ul{
        display: flex;
    gap: 15px;
    font-size: 13px;
    color: #5e5e5e;
}
.latestbloguser{
    display: flex;
        justify-content: start;
    align-items: center;
    gap: 0 10px;
    border-top: 1px solid #ddd;
    padding-top: 16px;
}
.latestbloguser img{
    width: 40px;
    border-radius: 50%;
}
.latestbloguser div h5{
        font-size: 16px;
    margin-bottom: 0px;
    font-family: 'DMSans-Medium';
}
.latestbloguser div p{
    color: #5e5e5e;
    margin-bottom: 0px;
    font-size: 14px;
}
.userimg video{
        height: 100%;
    object-fit: cover;
    border-radius: 20px;
}


/* new css */
.heroimg{
        position: absolute;
    opacity: 0.3;
    left: 0;
    z-index: -1;
}
.herobgwrapper{
        background-image: url(../img/herobg.avif);
    background-size: cover;
    padding: 100px;
    background-position: bottom;
    background-attachment: fixed;
    border-radius: 15px;
}   
.creative_hero_banner{
        text-align: center;
    width: 800px;
    margin: auto;
    margin-top: 30px;
}
.creative_hero_banner h5{
        font-size: 18px;
    padding: 4px 10px;
    color: #fff;
    font-family: 'DMSans-Medium';
}
.creative_hero_banner h1{
    font-size: 45px;
    color: #fff;
    font-family: "PlusJakartaSans-Medium";
}
.creative_hero_banner h1 span{
    opacity: 0.6;
}
.creative_hero_banner p{
    color: #fff;
}
.bannerimgwrapper{
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
        margin-top: 50px;
}
.bannerimgwrapper ul{
        display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 50px;
}
/* .creative_hero_banner h1 span{
        background: linear-gradient(90deg, #00489a, #f8a125 80%);
    -webkit-text-fill-color: #00000000;
    background-clip: text;
} */
.hero_sectionbtnwrap{
        margin-top: 60px;
}
.hero_sectionbtnwrap a:last-child{
        /* color: #fff; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: 0.5s;
    margin-left: 15px;
}
.banner_img_wrapper{
        justify-content: start;
    /* align-items: center;
    gap: 10px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 2fr;
    grid-auto-columns: 1fr;
    display: grid; */
    position: relative;
}
.banner_img_wrapper div{
        display: flex;
    flex-direction: column;
    gap: 10px;
}
.banner_img_wrapper img{
    border-radius: 10px;
}
.banner_img_wrapper img.bannermainimg{
    width: 100%;
}
.services-stack-section {
  position: relative;
}

.services-stack-section .col-lg-12 {
  position: relative;
}

.servicecardwrapper {
    position: sticky;
    top: 100px;
    margin-bottom: 40px;
    border-radius: 28px;
    overflow: hidden;
    z-index: 1;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 -12px 40px rgba(2,43,99,.13);
    border: 1px solid #ececec;
}
.services-stack-section .servicecardwrapper:last-of-type{ margin-bottom: 0; }

/* stacked-card effect: each card sticks slightly lower and above the previous,
   so earlier cards' top edges peek out behind (like the reference) */
/* proper stack: all cards stick at the same top, later cards sit above earlier */
.services-stack-section .servicecardwrapper:nth-of-type(1){ z-index: 1; }
.services-stack-section .servicecardwrapper:nth-of-type(2){ z-index: 2; }
.services-stack-section .servicecardwrapper:nth-of-type(3){ z-index: 3; }
.services-stack-section .servicecardwrapper:nth-of-type(4){ z-index: 4; }
.services-stack-section .servicecardwrapper:nth-of-type(5){ z-index: 5; }
.services-stack-section .servicecardwrapper:nth-of-type(6){ z-index: 6; }
.services-stack-section .servicecardwrapper:nth-of-type(7){ z-index: 7; }
.services-stack-section .servicecardwrapper:last-of-type{ margin-bottom: 0; }
.servicecardwrapper .serviceheader{
        display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.servicecardwrapper .serviceheader h6{
       font-size: 22px;
    font-family: 'PlusJakartaSans-Medium';
    margin-bottom: 12px;
    color: rgb(0, 0, 0);
}
.servicelistwrapper{
        display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.servicelistleft{
        position: sticky;
    height: max-content;
    top: 100px;
}
.servicelistleft h2{
        font-size: 26px;
    font-family: "PlusJakartaSans-Bold";
    margin-bottom: 12px;
    color: #000;
}
.servicelistleft h4{
        font-size: 20px;
    margin-top: 7px;
}
.servicelistleft p{
    font-size: 14px;
}
.servicelistleft ul{
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}
.servicelistleft img{
        border-radius: 15px;
}
.servicelistleft ul li{
       font-size: 13px;
    padding: 4px 9px;
    background: #f8f7f7;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 1px 1px 6px 0px #d5d5d5;
    color: #022b63;
}
.servicelistright ul li {
        display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f7f7;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 10px;
    box-shadow: 1px 1px 6px 0px #d5d5d5;
}
.servicelistrightimg{
        display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
}
.servicelistrightimg img{
        max-width: 90px;
    border-radius: 10px;
}
.servicelistrightimg div h4{
        font-size: 17px;
    font-family: "PlusJakartaSans-Medium";
    margin-bottom: 4px;
    color: #000;
}
.servicelistrightimg div p{
        margin-bottom: 0px;
    color: #0c0c0c;
    font-size: 14px;
}

.software-solutions{
    padding:80px 0;
    background:#fff;
}

.solution-card{
        height: -webkit-fill-available;
    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 12px;
    padding: 15px;
    transition: .4s;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
    transition: 0.1s;
}

.solution-card:hover{
    transform:translateY(-8px);
    transition: 0.1s;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    background-image: url(../img/hoverbg.png);
    background-size: cover;
}

.card-top{
        position: relative;
    margin-bottom: 15px;
}
.card-top img{
    width: 50px;
}

.icon-box{
    width: 70px;
    min-width: 70px;
    height: 70px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: #c084fc;
}

.icon-box svg{
    width:40px;
    height:40px;
}

.purple{
    background:#c084fc24;
}

.yellow{
    background:#facc150d;
}

.green{
    background:#4add801c;
}

.orange{
    background:#fb923c14;
}

.blue{
    background:#60a5fa1c;
}

.red{
    background:#fa71841c;
}


.solution-card h3 {
    font-size: 20px;
    margin-bottom: 7px;
    color: #000;
    font-family: "PlusJakartaSans-Medium";
}

.solution-card p{
    font-size: 14px;
    color: #262626;
    margin: 0;
}




.metric-card {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  padding: 26px;
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.35s ease;
}

.metric-card::before {
      position: relative;
    overflow: hidden;
    min-height: 180px;
    padding: 25px;
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.35s ease;
}

.metric-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.12);
}

.metric-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #111;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
}

.metric-card h3 {
      position: absolute;
    top: 24px;
    right: 24px;
    margin: 0;
    font-size: 43px;
    line-height: 1;
    color: #252525;
    letter-spacing: -2px;
    font-family: "PlusJakartaSans-Medium";
}

.metric-card p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #161616;
}

.metric-blue {
  background: linear-gradient(135deg, #d7f1ff, #bfe8ff);
}

.metric-green {
  background: linear-gradient(135deg, #e8f9d8, #d7efbf);
}

.metric-mint {
  background: linear-gradient(135deg, #d3ffef, #bdf3df);
}

.metric-purple {
  background: linear-gradient(135deg, #eeeeff, #dddff7);
}

@media (max-width: 575px) {
  .metric-card {
    min-height: 180px;
    padding: 22px;
  }

  .metric-card h3 {
    font-size: 44px;
  }

  .metric-card p {
    font-size: 16px;
  }
}


.accordioncustom .card{
        border: none;
    border-radius: 10px;
    margin: 6px 0;
}
.accordioncustom .card-header{
        background: transparent;
    border: none;
    padding: 0;
    border-radius: 15px;
}
.accordioncustom .card-header .btn{
        display: block;
    padding: 15px;
    text-align: start;
    background: transparent;
    border-bottom: none;
}
.accordioncustom .card-body{
    background: transparent;
}
.accordioncustom .collapse.show{
        background: #e6f5f1;
}



/* Active Accordion */
.accordioncustom .card-header .btn:not(.collapsed){
    background: #e6f5f1;
}


.processimg{
        overflow: hidden;
    border-radius: 15px;
    position: sticky;
    top: 90px;
}

.integrationcard{
       background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: 0.5s;
    display: flex;
    width: max-content;
    padding: 15px 20px;
    text-align: center;
    flex-direction: column;
}
.integrationcard ul{
    display: flex;
    gap: 10px;
}
.integrationcard ul li{
        box-shadow: 1px 1px 7px 0px #dddddd;
    border-radius: 10px;
    padding: 3px;
    width: 50px;
    height: 50px;
}
.integrationcard h4{
    font-size: 16px;
    font-family: 'PlusJakartaSans-Medium';
    margin-top: 15px;
    margin-bottom: 0px;

}
.integratedslider{
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.awardcard{
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #eeeeee;
    transition: 0.5s;
    height: -webkit-fill-available;
    margin: 10px 0;
    text-align: center;
}
.awardcard h4{
        font-size: 16px;
    font-family: 'PlusJakartaSans-Medium';
    margin-bottom: 0px;
}
.awardcard p{
        font-size: 14px;
    margin-bottom: 0px;
    color: #606060;
}
.awardcard .awarddate{
        position: absolute;
    background: #014ff5;
    padding: 2px 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    right: 15px;
    top: 15px;
}
.awardcard img{
        border-radius: 15px;
    margin-bottom: 15px;
}

.service-mini-section {
  padding: 10px 0;
}

.service-mini-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: #e9e9e9;
  border-radius: 18px;
  padding: 8px;
}

.service-mini-card {
  background: #fff;
  border-radius: 14px;
  padding: 28px 20px 22px;
  min-height: 295px;
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-top p {
  margin: 0;
  font-size: 16px;
  color: #555;
}

.dots {
  display: flex;
  gap: 5px;
}

.dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c7c7c7;
}

.service-mini-card:nth-child(1) .dots span:nth-child(1),
.service-mini-card:nth-child(2) .dots span:nth-child(1),
.service-mini-card:nth-child(2) .dots span:nth-child(2),
.service-mini-card:nth-child(3) .dots span:nth-child(1),
.service-mini-card:nth-child(3) .dots span:nth-child(2),
.service-mini-card:nth-child(3) .dots span:nth-child(3),
.dots.active-all span {
  background: #000;
}

.card-icon {
  width: 42px;
  height: 42px;
  color: #07122e;
  margin-top: 52px;
  margin-bottom: 24px;
}

.card-icon svg {
  width: 100%;
  height: 100%;
}

.service-mini-card h3 {
    font-size: 25px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 14px;
    color: #000;
    font-family: 'PlusJakartaSans-Medium';
}

.service-mini-card > p {
  font-size: 16px;
  line-height: 1.55;
  color: #555;
  margin: 0;
  max-width: 260px;
}

@media (max-width: 991px) {
  .service-mini-wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .service-mini-wrap {
    grid-template-columns: 1fr;
  }

  .service-mini-card {
    min-height: auto;
  }
}

.security-features{
    padding:0;
    margin:0;
    list-style:none;
}

.security-features li{
    display:flex;
    align-items:center;
    gap:15px;
    padding:16px;
    margin-bottom:12px;
    border:1px solid #e9ecef;
    border-radius:14px;
    background:#fff;
    transition:.3s;
}

.security-features li:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.feature-icon{
    width:50px;
    height:50px;
    min-width:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#f4f8ff;
    color:#0d6efd;
    font-size:20px;
}

.security-features h5{
    margin:0 0 4px;
    font-size:16px;
    font-weight:600;
}

.security-features p{
    margin:0;
    font-size:14px;
    color:#6c757d;
}
.awardslider{
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}



/* tablet */
@media(max-width:1199px){

  .navmenucustom .navbar-nav{
    gap: 14px;
  }

}

/* mobile */
@media(max-width:991px){
  .mainheader .navbar{
    padding: 12px 0;
  }

  .navbar-collapse{
    margin-top: 14px;
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    max-height: 80vh;
    overflow-y: auto;
  }

  .navmenucustom{
    justify-content: flex-start;
  }

  .navmenucustom .navbar-nav{
    gap: 0;
    align-items: stretch;
  }

  .navmenucustom .nav-link{
    color: #111;
    padding: 13px 0;
    border-bottom: 1px solid #eef1f5;
  }

  .headerbtnwrap{
    margin: 16px 0 0;
  }

  .headerbtnwrap .primarybtn{
    width: 100%;
    justify-content: center;
  }

}

@media(max-width:575px){
  .navbar-brand img{
    max-width: 120px;
  }

  .navbar-collapse{
    padding: 15px;
    border-radius: 14px;
  }
}

.servicecardbox{
        position: relative;
    background: #efede7;
    padding: 30px;
    border: 1px solid #d6d6d6;
    overflow: hidden;
    transition: all 0.3s ease-in;
    height: -webkit-fill-available;
        display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px 0;
}
.servicecardbox:hover{
    transform: translateY(-10px);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.servicecardbox:hover a{
    text-decoration: underline;
}
.servicecardbox h2{
     font-size: 24px;
    font-family: 'PlusJakartaSans-Medium';
    margin-bottom: 0px;
}
.servicecardbox h4{
        font-size: 18px;
    margin: 8px 0;
}
.servicecardbox p{
        font-size: 14px;
}
.servicecardbox ul{
        list-style: circle;
    padding-left: 18px;
    border-top: 1px solid #ddd;
    padding-top: 16px;
}
.servicecardbox ul li{
    font-size: 15px;
}
.servicecardbox a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ddd;
    margin-top: 15px;
    padding-top: 15px;
    color: #000;
}
.servicecardbox .nmbrcount{
        font-size: 130px;
    position: absolute;
    right: -12px;
    bottom: -57px;
    font-weight: 700;
    opacity: 0.1;
    color: #0000004d;
}


.aibg{
    
    border-radius: 20px;
    overflow: hidden;
}
.ai_section .mainsectionheading{
    width: auto;
}

/* ============================================================
   MEGA MENU — FULL WIDTH, hover-open, smooth slide (bg #efede7)
   ============================================================ */
.megamenuitem{ position: static; }

.megamenu{
    position: absolute !important;
    left: 0;
    right: 0;
    top: 58px;
    width: max-content;
    max-width: 100%;
    margin: 0;
    transform: translateY(14px);
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 14px;
    padding: 15px 15px;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .34s ease, transform .34s ease, visibility .34s ease;
    z-index: 100;
        left: 50% !important;
    transform: translate(-50%, 10px);
}
/* invisible hover-bridge so mouse can travel from menu link to panel */
.megamenu::before{
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  width: 100%;
  height: 26px;
  background: transparent;
}
.megamenuitem:hover .megamenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.smallmega{ }

/* grid of product links — full width, starts from left */
.megagrid{
  display: grid;
  gap: 15px 50px;
  width: 100%;
  margin: 0;
}
.megagrid.twocol{ grid-template-columns: repeat(2, 1fr); }
.megagrid.grid2{
    grid-template-columns: repeat(2, 1fr);
}
.megagrid.grid3{
    grid-template-columns: repeat(3, 1fr);
}
.megagridwrapper{
        display: grid;
    grid-template-columns: 70% 28%;
    gap: 20px;
    position: relative;
}
.megagridimgwrapper img{
    border-radius: 20px;
}
/* each product = icon + (title + desc) */
.megalink{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 14px;
  border-radius: 14px;
  transition: background .25s ease, transform .25s ease;
}
.megalink:hover{ background: #f7f7f2; transform: translateY(-2px); }
.megalink .megaicon{
    flex: 0 0 38px;
    width: 26px;
    height: 38px;
    border-radius: 9px;
    background: #fff;
    color: #3b3320;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background .25s ease, color .25s ease;
    box-shadow: 1px 1px 9px 0px #dedede;
    padding: 6px;
}
.megalink h5{
      margin: 0 0 4px;
    font-family: 'DMSans-Medium';
    font-size: 14px;
    line-height: 1.3;
    color: #000000;
    transition: color .25s ease;
}
.megalink p{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #020202;
}

/* section tag (optional, used by other menus) */
.megatag{
  display: inline-block;
  font-family: 'DMSans-Medium', sans-serif;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8272;
  background: #e5e0d4;
  padding: 5px 11px;
  border-radius: 30px;
  margin-bottom: 12px;
  width: max-content;
}
.megacol{ display: flex; flex-direction: column; gap: 2px; }

/* tablet */
@media(max-width:1199px){
  .megamenu{ padding: 34px 30px; }
  .megagrid{ grid-template-columns: repeat(2, 1fr); gap: 20px 34px; }
  .megagrid.twocol{ grid-template-columns: repeat(2,1fr); }
}

/* mobile — inline flow */
@media(max-width:991px){
  .megamenu{
    position: static; width: 100%; max-width: 100%;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; padding: 12px; margin-top: 6px; border-radius: 12px;
    display: none;
  }
  .megamenuitem.show .megamenu,
  .megamenuitem:hover .megamenu{ display: block; transform: none; }
  .megagrid,.megagrid.twocol{ grid-template-columns: 1fr; gap: 8px; max-width: 100%; }
}

/* ============================================================
   INNER PAGE COMMON CONTROLS (shared across all inner pages)
   ============================================================ */
/* description line under a section heading */
.sectionsub{
  max-width: 820px;
  margin: -14px auto 30px;
  text-align: center;
  color: #5b6472;
  font-size: 16px;
  line-height: 1.7;
}
.mainsectionheading.text-start .sectionsub,
.mainsectionheading.text-start + .sectionsub{ text-align:left; margin-left:0; }

/* in-column heading (used inside two-col rows) — width auto, left */
.mainsectionheading.smp-inhead{ width:auto; margin:0 0 18px; }

/* inner page breadcrumb banner (shared) */
.innerbanner{
      background-image: url(../img/innerhero.avif);
    background-size: cover;
    padding: 45px 0 70px;
    position: relative;
    overflow: hidden;
    background-position: center;
}
.innerbanner::before{ content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px; background:radial-gradient(circle,rgba(2,43,99,.06),transparent 70%); border-radius:50%; }
.innerbanner > .container{ position:relative; z-index:2; }
.innerbanner .crumb{ font-size:14px; color:#8a8272; margin-bottom:16px; }
.innerbanner .crumb a{ color:#022b63; }
.innerbanner h5{ font-family:'DMSans-Medium'; font-size:15px; color:#022b63; position:relative; padding-left:16px; display:inline-block; margin-bottom:6px; }
.innerbanner h5::before{ content:''; position:absolute; left:0; top:5px; width:6px; height:6px; border-radius:50%; background:#000; }
.innerbanner h1{ font-family:"PlusJakartaSans-Medium"; font-size:35px; line-height:1.15; color:#111827; margin-bottom:18px; }
.innerbanner p{ color:#000000; font-size:15px; line-height:1.7; max-width:680px; margin-bottom:26px; }

/* ============================================================
   MOBILE / TABLET SIDEBAR MENU (<= 991px)  — full-functionality drawer
   ============================================================ */
.msb-head{ display:none; }


.vaanipoints{
    margin-top: 30px;
}
.vaanipoints li{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    margin-bottom: 15px;
}
.vaanipoints li i{
        margin-top: 4px;
}
.vaanipoints li div h5{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
}
.vaanipoints li div p{
    font-size: 14px;
    margin-bottom: 0px
}
/* ============================================================
   PRODUCT IMAGE MEDIA FIX
   Any *-media placeholder that actually contains an <img> should
   drop its border/background/min-height and just show the image.
   Empty placeholders (no img) keep their styling.
   ============================================================ */
.smp-media:has(img), .adm-media:has(img), .cbse-media:has(img),
.cms-media:has(img), .ims-media:has(img), .lib-media:has(img),
.lms-media:has(img), .oas-media:has(img), .vms-media:has(img),
.svc-media:has(img), .ab-media:has(img), .cmp-media:has(img),
.cms-media.tall:has(img), .smp-media.tall:has(img),
.lib-media:has(img), .lms-media:has(img){
  background: transparent !important;
  border: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.smp-media:has(img) img, .adm-media:has(img) img, .cbse-media:has(img) img,
.cms-media:has(img) img, .ims-media:has(img) img, .lib-media:has(img) img,
.lms-media:has(img) img, .oas-media:has(img) img, .vms-media:has(img) img,
.svc-media:has(img) img, .ab-media:has(img) img, .cmp-media:has(img) img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  display: block;
}

/* ============================================================
   FOOTER CONTACT STRIP (Sales / Parent / Technical)
   ============================================================ */
.footercontactstrip{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  background:#ffffff10; border:1px solid #ffffff1f; border-radius:16px;
  padding:26px 30px; margin-top:30px;
}
.footercontactstrip .fcs-col{ }
.footercontactstrip .fcs-col h5{
  font-family:'DMSans-SemiBold'; font-size:16px; color:#fff; margin:0 0 12px;
}
.footercontactstrip .fcs-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.footercontactstrip .fcs-col ul li{ display:flex; align-items:center; gap:8px; color:#ffffffc4; font-size:13.5px; }
.footercontactstrip .fcs-col ul li i{ color:#f9a825; font-size:16px; flex:0 0 auto; }
.footercontactstrip .fcs-col ul li a{ color:#fff; }
.footercontactstrip .fcs-col ul li a:hover{ color:#f9a825; }
@media(max-width:991px){ .footercontactstrip{ grid-template-columns:1fr; gap:22px; } }


#demo_popup .modal-body{
    padding: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
#demo_popup .modal-body .btn-close{
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 14px;
    opacity: 1;
    z-index: 9;
}
#job_apply_popup .modal-body{
    padding: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
#job_apply_popup .modal-body .btn-close{
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 14px;
    opacity: 1;
    z-index: 9;
}
.demo_popupcontent{
        background: #f7f7f3;
    padding: 30px 40px;
    position: relative;
}
.demo_popupcontent img.demopopuplogo{
        width: 120px;
    margin-bottom: 12px;
}
.demo_popupcontent h4{
        font-size: 26px;
    font-family: 'PlusJakartaSans-Medium';
}
.demo_popupcontent ul li{
        display: flex;
    justify-content: start;
    align-items: center;
    gap: 12px;
}
.demo_popupcontent ul li i{
        height: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 9px;
    color: #013488;
    font-size: 22px;
}
.demo_popupcontent ul li div h5{
        font-size: 20px;
    font-family: 'DMSans-Medium';
    margin-bottom: 4px;
}
.demo_popupcontent ul li div p{
        margin-bottom: 0px;
    font-size: 14px;
    color: #585858;
}
.demo_popupcontent img.demosupportingimg{
        mask-image: linear-gradient(to top, transparent, black 15%, black 85%, transparent);
    margin-top: 20px;
}

.formwrapper{
        position: relative;
    padding: 20px 20px;
}
.formwrapper h4{
        font-size: 18px;
    font-family: 'PlusJakartaSans-Medium';
    text-transform: capitalize;
}
.formwrapper p{
    font-size: 14px;
}
.formwrapper .form-group{
    margin: 4px 0px;
}
.formwrapper .form-group label{
        font-size: 14px;
    margin-bottom: 3px;
}
.formwrapper .form-group .redmark{
        color: red;
}
.formwrapper .form-group .input-icon{
    position: relative;
}

.formwrapper .form-group .input-icon .form-control{
        padding: 10px 15px 10px 49px;
    font-size: 13px;
}
.formwrapper .form-group .input-icon textarea.form-control{
        padding: 10px 15px 10px 15px;
    font-size: 13px;
}
.formwrapper .form-group .input-icon i{
        position: absolute;
    left: 15px;
    top: 12px;
    border-right: 1px solid #ddd;
    padding-right: 8px;
    color: gray;
}
.ja-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    width: 100%;
    min-height: 96px;
    padding: 18px;
    border: 1.5px dashed #cfd6e2;
    border-radius: 12px;
    background: #f7f8fa;
    cursor: pointer;
    transition: .25s;
}
.ja-upload{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:6px; width:100%; min-height:96px; padding:18px;
  border:1.5px dashed #cfd6e2; border-radius:12px; background:#f7f8fa;
  cursor:pointer; transition:.25s;
}
.ja-upload:hover, .ja-upload.dragover{ border-color:#022b63; background:#eef2f8; }
.ja-upload i{ font-size:26px; color:#022b63; }
.ja-upload .ja-upload-text{ font-size:14px; color:#374151; }
.ja-upload .ja-upload-text strong{ color:#022b63; }
.ja-upload .ja-upload-hint{ font-size:12px; color:#8a8f99; }
.ja-upload.has-file{ border-style:solid; border-color:#16a34a; background:#f0faf3; }
.ja-upload.has-file i{ color:#16a34a; }

.ja-submitrow{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content: center; }
.ja-note{ font-size:13px; color:#8a8f99; }




/* ============================================================
   FLOATING ELEMENTS: WhatsApp chat + Google Rating badge
   ============================================================ */
.wa-float{
  position: fixed;
  left: 22px;
  bottom: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 8px 24px rgba(37,211,102,.4); */
  z-index: 1030;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover{ transform: scale(1.08); box-shadow: 0 10px 30px rgba(37,211,102,.55); }
.wa-float img{ width: 50px; height: 50px; }
.wa-float i{ color:#fff; font-size:32px; line-height:1; }

.grating-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: #fff;
  border: 1px solid #e7e4dc;
  border-radius: 12px;
  padding: 7px 12px;
  box-shadow: 0 8px 24px rgba(2,43,99,.14);
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  transition: transform .25s ease;
}
.grating-float:hover{ transform: translateY(-3px); }
.grating-float img{ height: 34px; width: auto; display:block; }

@media (max-width: 575px){
  .wa-float{ width: 50px; height: 50px; left: 16px; bottom: 16px; }
  .wa-float img{ width: 28px; height: 28px; }
  .grating-float{ right: 14px; bottom: 14px; padding: 5px 9px; }
  .grating-float img{ height: 28px; }
}
.smfbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/schoolmanagementsoftwarebg.jpg);
}
.oasbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/onlineassessmentbg.jpg    );
}
.lmsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/lmsbg.jpg    );
}
.librarymanagementsystembg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/librarymanagementsystembg.jpg    );
}
.aimsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/aimsbg.jpg    );
}
.vmsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/visitorbg.jpg    );
}
.imsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/institutebg.jpg    );
}
.emsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/exammanagementbg.jpg    );
}
.smabg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/schoolmobileappbg.jpg    );
}
.cmsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/collegemanagementbg.jpg    );
}
.cbsebg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/cbseresultbg.jpg    );
}
.amsbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/admissioncrm.jpg    );
}
.aboutbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/aboutcompanybg.jpg    );
}
.careerbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/careerbg.jpg    );
}
.developmentprocessbg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/developmentprocessbg.jpg);
}
.communicationstrategybg{
        background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/communicationstrategybg.jpg);
}
.supportbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/supportbg.jpg);
}
.partnershipbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/partnersbg.jpg);
}
.awardsachievementsbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/awardrecognisebg.jpg);
}
.contactbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/contactbg.jpg);
}
.webdesignbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/websitedesignbg.jpg);
}
.whatsappapibg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/whatsappapibg.jpg);
}
.mobileappdevelopmentbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/mobileappbg.jpg);
}
.digitalmarketingbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/digitalmarketingbg.jpg);
}
.virtualtourbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/virtualtourbg.jpg);
}
.termsbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/termsbg.jpg);
background-position-y: 30%;
}
.sitemapbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/sitemap.jpg);
}
.locationbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/locationbg.jpg);
}
.paymentbg{
background-image: linear-gradient(89deg, #f7f7f3, #f7f7f340, transparent), url(../img/innerbg/paymentbg.jpg);
}



/* ============================================================
   HEADER LOGIN + SIGNUP BUTTONS
   ============================================================ */
.headerbtnwrap{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; }
.loginbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:10px;
  border:1px solid #022b63; background:#fff; color:#022b63;
  font-family:'DMSans-SemiBold'; font-size:14px; transition:.25s;
}
.loginbtn:hover{ background:#022b63; color:#fff; }
.signupbtn{ padding:11px 22px; }


/* HEADER BUTTON TOGGLE */
.hdr-login{ display:none !important; }
.hdr-contact{ display:inline-flex !important; }
body.is-product .hdr-contact{ display:none !important; }
body.is-product .hdr-login{ display:inline-flex !important; }



/* ============================================================
   JOB APPLY — 2-STEP FORM
   ============================================================ */
.ja-steps{ display:flex; align-items:center; gap:10px; margin:4px 0 22px;    width: 360px;
    margin-top: 30px; }
.ja-step-dot{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:#8a8f99; font-family:'DMSans-Medium'; }
.ja-step-dot b{ width:26px; height:26px; border-radius:50%; background:#eceef2; color:#8a8f99; display:inline-flex; align-items:center; justify-content:center; font-size:13px; transition:.25s; }
.ja-step-dot.active{ color:#022b63; }
.ja-step-dot.active b{ background:#022b63; color:#fff; }
.ja-step-dot.done b{ background:#16a34a; color:#fff; }
.ja-step-line{ flex:1; height:2px; background:#eceef2; border-radius:2px; }
.ja-navrow{ display:flex; justify-content:center; }
.ja-navrow button{ width: 100%; }
.ja-backbtn{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid #cfd6e2; color:#022b63; border-radius:10px; padding:11px 20px; font-family:'DMSans-SemiBold'; font-size:14px; cursor:pointer; transition:.25s; margin-top:8px; }
.ja-backbtn:hover{ background:#022b63; color:#fff; border-color:#022b63; }

/* ============================================================
   ZOHO FORM IN DEMO POPUP — captcha + design blend
   ============================================================ */
.jupsoft-zohoform .wf-field-mandatory .wf-field-inner::before{ display:none; }  /* hide zoho red bar, we use our design */
.jupsoft-zohoform .form-control{ width:100%; }
.ja-captcha-row{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
.ja-captcha-row .form-control{ flex:1; min-width:140px; }
.ja-captcha-row .wf-field-captcha-img-wrap{ border:1px solid #e7e4dc; border-radius:8px; overflow:hidden; min-width:120px; height:auto; display:flex; align-items:center; }
.ja-captcha-row .wf-field-captcha-img{ height:42px; width:100%; object-fit:cover; }
.ja-captcha-row .reload-captcha{ display:inline-flex; align-items:center; gap:4px; cursor:pointer; color:#022b63; font-size:13px; }
.ja-captcha-row .reload-img{ font-size:20px; }
.ja-captcha-row .link{ color:#022b63; }
/* zoho error styling within our fields */
.jupsoft-zohoform .wf-field-error{ color:#e11d48; font-size:12px; margin-top:4px; text-align:left; display:none; }
.jupsoft-zohoform .wf-field-error-active .wf-field-error{ display:block; }
.jupsoft-zohoform .wf-error-parent-ele{ width:100%; }
@media(max-width:575px){
  .ja-captcha-row{ flex-direction:column; align-items:stretch; }
  .ja-captcha-row .wf-field-captcha-img-wrap{ min-width:0; }
}


.service-card {
  position: relative;
  width: 100%;
  height: 430px;

  border: 1px solid #111;
  border-radius: 18px;

  overflow: hidden;
  background: #fff;
}


/* =========================
   IMAGE
========================= */

.service-card-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;
}

.service-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center;
}


/* =========================
   CONTENT
========================= */

.service-card-content {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;

  height: 115px;

  padding: 18px 20px;

  background: rgba(255, 255, 255, 0.97);

  border-radius: 18px 18px 0 0;

  z-index: 2;

  overflow: hidden;

  transition:
    height 0.45s cubic-bezier(.4, 0, .2, 1),
    padding 0.45s ease,
    box-shadow 0.45s ease;
}


/* =========================
   TITLE
========================= */

.service-card-basic h4 {
  margin: 0 0 8px;

  font-size: 21px;
  line-height: 1.2;
  font-weight: 500;

  color: #001f54;
}


/* =========================
   DESCRIPTION
========================= */

.service-card-basic p {
  margin: 0;

  max-width: 95%;

  font-size: 14px;
  line-height: 1.5;

  color: #666;
}


/* =========================
   EXTRA CONTENT
========================= */

.service-card-more {
  margin-top: 16px;

  opacity: 0;
  transform: translateY(15px);

  transition:
    opacity 0.25s ease,
    transform 0.3s ease;
}


/* divider */

.service-card-more ul {
  margin: 0;
  padding: 14px 0 0 18px;

  border-top: 1px solid #e5e5e5;
}

.service-card-more li {
  margin-bottom: 5px;

  font-size: 13px;
  line-height: 1.45;

  color: #444;
}


/* =========================
   LEARN MORE
========================= */

.service-card-more a {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  margin-top: 8px;

  color: #001f54;

  font-size: 14px;
  font-weight: 500;

  text-decoration: none;
}

.service-card-more a i {
  font-size: 18px;
}


/* =========================
   HOVER
========================= */

.service-card:hover {
  z-index: 10;
}


/*
  IMPORTANT:

  Card ki height SAME rahegi.

  Sirf bottom content panel
  upar ki taraf expand hoga.
*/

.service-card:hover .service-card-content {
  height: 335px;

  padding: 20px;

  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.10);
}


/* show extra content */

.service-card:hover .service-card-more {
  opacity: 1;

  transform: translateY(0);

  transition-delay: 0.12s;
}
.service-card-image img {
  object-position: center 20%;
}


.service-card1{
    background: #fff;
    padding: 20px;
    border-radius: 20px;
    height: 375px;
    position: relative;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    margin-bottom: 15px;
}
.service-card-image1 {
    border-radius: 20px;
    overflow: hidden;
    filter: brightness(0.8);
}
.service-card-content1 {
    height: auto;
    position: absolute;
    bottom: -186px;
    background: #fff;
    padding: 12px 20px;
    width: 100%;
    transition: all 0.3s ease-in-out;
    left: 0;
}
.service-card1:hover .service-card-content1{
        height: auto;
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 12px 20px;
    width: 100%;
    left: 0;
}
.service-card-basic1 h4{
        font-size: 18px;
    font-family: 'PlusJakartaSans-Medium';
    margin-bottom: 6px;
}
.service-card-basic1 p{
        font-size: 14px;
    color: gray;
    margin-bottom: 0px;
}
.service-card-more1 ul{
        list-style: circle;
    padding-left: 18px;
    font-size: 13px;
    margin-top: 15px;
    margin-bottom: 15px;
}
.service_card_main_wrapper a{
    color: #000;
}
.service_card_main_wrapper a.primarybtn{
    color: #fff;
}


/* sidebar fix: when drawer open, bring header context above everything */
body.msb-lock .mainheader{ z-index: 1060; }

/* ============================================================
   BLOG-STYLE CONTENT PAGES (school-erp, best-erp, junior-school)
   ============================================================ */
.erp-intro{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.erp-intro-img{ border-radius:20px; overflow:hidden; border:1px solid #e7e4dc; }
.erp-intro-img img{ width:100%; display:block; }

.erp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.erp-card{ background:#fff; border:1px solid #e7e4dc; border-radius:18px; padding:28px 24px; transition:.3s; }
.erp-card:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(2,43,99,.08); border-color:#cfd6e2; }
.erp-card .ic{ width:54px; height:54px; border-radius:13px; background:#efede7; color:#022b63; display:flex; align-items:center; justify-content:center; font-size:25px; margin-bottom:16px; transition:.3s; }
.erp-card:hover .ic{ background:#022b63; color:#fff; }
.erp-card h4{ font-family:'DMSans-SemiBold'; font-size:17px; color:#111827; margin:0 0 8px; }
.erp-card p{ color:#5b6472; font-size:14px; line-height:1.7; margin:0; }

.erp-list{ list-style:none; padding:0; margin:0 0 20px; display:flex; flex-direction:column; gap:12px; }
.erp-list li{ display:flex; align-items:flex-start; gap:12px; color:#111827; font-size:15px; line-height:1.7; }
.erp-list li i{ color:#f9a825; font-size:20px; flex:0 0 auto; margin-top:2px; }

.erp-highlights{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.erp-hl{ background:#f7f6f2; border-radius:14px; padding:24px; display:flex; align-items:flex-start; gap:14px; }
.erp-hl i{ font-size:26px; color:#022b63; flex:0 0 auto; }
.erp-hl h4{ font-family:'DMSans-SemiBold'; font-size:16px; color:#111827; margin:0 0 6px; }
.erp-hl p{ color:#5b6472; font-size:13.5px; line-height:1.65; margin:0; }

.erp-cta{ background:#022b63; border-radius:24px; padding:50px 48px; text-align:center; }
.erp-cta h2{ font-family:'PlusJakartaSans-Medium'; font-size:30px; color:#fff; margin:0 0 14px; }
.erp-cta p{ color:#ffffffd0; font-size:16px; max-width:580px; margin:0 auto 26px; line-height:1.7; }
.erp-cta .primarybtn{ background:#fff; color:#022b63; border-color:#fff; }