@charset "utf-8";
/* CSS Document */


    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }
.head{
	background-color: #ffb725;
	text-align: center;
	font-weight: bold;
	height: 30px;
	}

#header { width: 100%;  background: #fff;
    }

#header.sticky {
    position: fixed; top: 0; left: 0; z-index: 1000;
}

.whatsapp {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 30;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #25d366;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 23px;
  box-shadow: 0 5px 20px #0004;
}
.content { padding-top: 20px;
}
.container.margTop30 { margin-top: 30px;
}
.headbtn{ background-color:#032e50; color:#ffffff; padding: 5px 10px; border-radius: 20px; font-size: 12px; }
.bgimage{ position:relative; text-align: center; background-image: url(../IMAGES/newbg.png); background-position: center; height: 491px; }
.masklogo{  margin-top: 20px; margin-left: 0px; float: left;
}
.mainbox{  margin-top: 20px; float: right; background-color: #032e50; padding:0px 0px 0px 10px; color: white; border-radius: 25px; }
.mainheadbox{ float: left; margin-top: 350px; }
.mainheadbox p{ color: white; }

.mainbtn{ color: white; padding: 3px; }
.bannerhead{ color: #ffab0e;}
.explorebtn{ background-color: #032e50; padding: 6px 10px; color:white; border-radius: 20px; font-size: 14px; }
.margBottom { margin-bottom: 30px;}
.margtop { margin-top: 30px;}
.box {
  padding: 20px;
  text-align: left;
  border: 1px solid #ccc;
  border-radius: 0px;
  transition: all 0.3s ease;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.box:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-color: #ffab0e;
  transform: translateY(-5px);
}

.img{ margin-bottom: 20px; }
.bginfo{ background-image: url("../IMAGES/bgimg.png"); height:560px; margin:20px 0px }
.infotxt{ top:130px; font-size: 30px; color: white; font-weight: bold; }
.txtinfo{ top:60px; font-size: 16px; color: white;}
.txtinfo p{
text-align: justify;}

.text-color{ color: #063d50; }
.yellow{ background-color: #ffb725; border-radius: 0px 25px 25px 0px; color: white; padding: 10px 10px }
.toplink{ float: left;  }
.center{ text-align: center; }
.customers{ background-color: #fffae9; margin: 40px 0px; padding: 20px; }
.costheading{ color: #063d50; text-align: center;}
.float{ float: left; }
.img-border{ border-radius: 100px; box-shadow: 0px 3px 4px #ccc; }
.teamname{ font-size: 18px; color: #063d50; text-align: center; margin: 10px 0px; }

.content-box { opacity: 0; transform: translateY(30px);
    animation: fadeSlideUp 0.8s ease forwards; margin: 10px 0px;
}
.navbar { padding: 0px;   
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    position: relative; margin-top: 10px;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 0px 10px;
    display: block;
}

.nav-links li a:hover {
        color: #ffb752;
}

/* Dropdown */
.dropdown-content {
    display: none; position: absolute; top: 100%;left: 0; background: white; z-index: 999;
    min-width: 190px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.dropdown-content li a {
    color: black;
    padding: 8px;
}
/* Show dropdown on mouse hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Hover effects */
.nav-links li a:hover {
        color: #ffb752;
}
.dropdown-content li a:hover {
    background: #ff9f17; color: #fff;
}

.dropdown.show .dropdown-content {
    display: block;
}

/* Mobile */
.menu-toggle {
    display: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

@media(max-width:768px) {

    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: #333;
        position: absolute;
        top: 60px;
        left: 0;
    }

    .nav-links.active {
        display: flex;
    }

    .dropdown-content {
        position: static;
        background: #444;
    }

    .dropdown-content li a {
        color: white;
    }
}
@keyframes fadeSlideUp {
    from {
        opacity: 0; transform: translateY(30px);
    }
    to {
        opacity: 1; transform: translateY(0);
    }
}
.content-box:hover { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-radius: 15px;
    
}

.footerbox { padding: 20px; color: #fff; background-color:#032e50; margin-top:40px; font-size: 14px; }
.footerhead {color: #fff; border-bottom: 1px solid #0689ce; padding: 8px 0px; margin: 8px 0px; font-size: 18px; }

.site-footer a{
	color: #a7a7a7;
    font-size: 14px;
	display: contents;
    padding: inherit;
}

.widget_nav_menu ul li a:before {
    content: "\f105";
    position: absolute;
display: none;
    top: 4px;
    left: 0px;
    font-family: 'FontAwesome';
    font-size: 14px;
    color: #cacaca;
    transition: all ease-in-out 0.3s;
    -webkit-transition: all ease-in-out 0.3s;
    -moz-transition: all ease-in-out 0.3s;
    -ms-transition: all ease-in-out 0.3s;
    -o-transition: all ease-in-out 0.3s;
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.nav-link {
    display: block; color: #fff;
    padding: 0.5rem 1rem;
}
.widget_nav_menu ul li {
    padding: 4px 0 0 20px;
    position: relative; 
}
.slick-slide img { width: 100%; }

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}



.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.center{
 text-align: center;
}
.padding{ padding:10px 0px 0px 0px; }
.border{ border: thick solid #000000; }

.color{ color: #063d50; }
body .site-footer .widget-title:after{content:'';width:100%;height:1px;background:#fff;position:absolute;left:115%;top:10px;}
body .site-footer .border-top{border-top:1px solid #4a4a4a;}
body .site-footer .social-icon{padding:15px 0 15px 0;margin:0 auto;text-align:center;}
body .site-footer .social-icon ul{margin:0 auto;}
body .site-footer .social-icon ul li{display:inline-block;list-style:none;padding:0 20px;}
body .site-footer .social-icon ul li a{text-decoration:none;line-height:20px;}
body .site-footer .social-icon ul li a:hover span{color:#fff;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
body .site-footer .social-icon ul li a i{font-size:18px;padding-right:5px;color:#fff;}
body .site-footer .social-icon ul li.facebook a:hover span i{color:#3b5998;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
body .site-footer .social-icon ul li.twitter a:hover span i{color:#55acee;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
body .site-footer .social-icon ul li.instagram a:hover span i{color:#d62976;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;}
body .site-footer .social-icon ul li.youtube a:hover span i{
	color:#cd201f;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;
}
.site-footer .social-icon ul li.linkedin a:hover span i{
	color:#0077b5;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;
}
.site-footer .social-icon ul li.telegram a:hover span i{
	color:#0088cc;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease;
}
.facebook::before {
    margin-right: 8px;
    content: "";
    position: absolute;
    top: 57%;
    width: 12px;
    height: 12px;
    background: url(../images/fb.png) center / contain no-repeat;
}

i.fab.fa-facebook-f { padding-left: 17px;
}

.linkedin::before {
    margin-right: 8px;
    content: "";
    position: absolute;
    top: 57%;
    width: 12px;
    height: 12px;
    background: url(../images/linkdin.png) center / contain no-repeat;
}
i.fab.fa-linkedin-in {
    padding-left: 17px;
}

.instagram::before {
    margin-right: 8px;
    content: "";
    position: absolute;
     width: 12px;
    height: 12px;
    background: url(../images/insta.png) center / contain no-repeat;
top: 57%;
}

i.fab.fa-instagram { padding-left: 17px;
}

@media (max-width: 1024px){
body .site-footer .social-icon{margin:0 15%;}
body .site-footer .footer-contact{padding-right:0px;}
}

@media (max-width: 768px){
body .site-footer .social-icon {margin: 0 0%;}
.site-footer .left-pad-50{padding-left:15px;}
.site-footer .widget-title:after{width:50%;}
footer.site-footer .col-sm-6{height:40vh;}
.site-footer .social-icon{margin:0 5%;}
footer.site-footer .border-top .col-sm-6{height:auto;}
.n2-ss-slider .n2-ow, .n2-ss-slider .n2-ow-all h1 {
    font-size: 17px;
    line-height: 26px;
    font-weight: 400;
}
}

@media (max-width: 425px){
.site-footer .widget-title:after{width:100%;}
footer.site-footer .col-sm-6{height:auto;}
.site-footer .social-icon{margin:0 14%;}
.site-footer .social-icon ul li{padding:0 10px;}
.site-footer .social-icon ul li a span{font-size:0px;}
footer.site-footer .border-top .col-sm-6{text-align:center;}
.site-footer .copyright .border-top .designed-by{text-align:center;margin-top:10px;}
}
body .widget_nav_menu ul li:hover a{color:#fff;}
body .widget_nav_menu ul li a:before{content:"\f105";position:absolute;top:4px;left:0px;font-family:'FontAwesome';font-size:14px;color:#cacaca;transition:all ease-in-out 0.3s;-webkit-transition:all ease-in-out 0.3s;-moz-transition:all ease-in-out 0.3s;-ms-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;}
body .widget_nav_menu ul li:hover a:before{left:6px;color:#f58220;transition:all ease-in-out 0.3s;-webkit-transition:all ease-in-out 0.3s;-moz-transition:all ease-in-out 0.3s;-ms-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;}


/* Testimonials */
.testimonials {
  background-color: var(--light-bg);
  padding: 50px 0;
  margin: 40px 0;
  border-radius: 10px;
}

.testimonial-box {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  margin: 15px 0;
}

.testimonial-box:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transform: translateY(-5px);
}

.testimonial-text {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 15px;
}

.testimonial-author h5 {
  color: var(--primary-color);
  margin: 10px 0 5px 0;
  font-weight: 600;
}

.testimonial-position {
  color: var(--accent-color);
  font-size: 12px;
}
/******************* About us Section *******************/


    .tagline {
      display: block;
      color: #65717a;
      font-size: 11px;
      letter-spacing: .3px;
      font-weight: 700;
      margin-top: 3px
    }
 .abouthero {
      min-height: 455px;
      display: grid;
      place-items: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(106deg, rgba(5, 45, 71, .96), rgba(5, 62, 94, .7)), url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2000&q=85') center 54%/cover
    }

    .abouthero:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 26% 15%, rgba(253, 179, 33, .24), transparent 28%)
    }

    .hero-content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 72px 24px;
      color: #fff;
      max-width: 960px
    }

    .abouthero h1,
    .section-title,
    h2 {
      
    }

    .abouthero h1 {
      font-size: clamp(40px, 5vw, 66px);
      line-height: 1.05;
      letter-spacing: -1.9px;
      margin: 15px 0
    }

    .abouthero p {
      max-width: 730px;
      margin: 0 auto;
      font-size: 19px;
      color: #e8f3f9
    }

    .scroll-note {
      margin-top: 30px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
      color: #fff;
      text-decoration: none;
      font-size: 14px
    }

    .scroll-note span {
      font-size: 22px;
      color: var(--yellow)
    }

    .aboutintro {
      max-width: 1180px;
      margin: 0 auto;
      padding: 92px 28px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 78px;
      align-items: center
    }

    .section-title {
      font-size: 45px;
      line-height: 1.12;
      color: var(--ink);
      margin: 8px 0 22px;
      letter-spacing: -1px
    }

    .aboutintro p {
      font-size: 16px;
      margin: 0 0 18px
    }

    .accent {
      height: 4px;
      width: 64px;
      background: var(--yellow);
      margin: 22px 0
    }

    .value-card {
      background: linear-gradient(145deg, #f7fbfe, #e9f5fc);
      border-radius: 24px;
      padding: 42px;
      position: relative;
      overflow: hidden
    }

    .value-card:before {
      content: "";
      position: absolute;
      width: 210px;
      height: 210px;
      border: 30px solid rgba(8, 119, 202, .12);
      border-radius: 50%;
      right: -80px;
      top: -80px
    }

    .value-card h3 {
      position: relative;
      margin: 0 0 25px;
      font-family: Outfit, sans-serif;
      font-size: 28px;
      color: var(--ink)
    }

    .values {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px
    }

    .value {
      background: #fff;
      border-radius: 14px;
      padding: 17px 14px;
      box-shadow: 0 8px 22px rgba(13, 79, 120, .08);
      font-weight: 700;
      color: var(--ink)
    }

    .value b {
      display: block;
      color: var(--yellow);
      font-size: 22px;
      line-height: 1
    }
.abouteyebrow{ display: inline-flex; color: var(--yellow);
    background: #174e76;
    border-radius: 99px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;}
 .aboutmission {
      background: var(--navy);
      color: #fff;
      padding: 86px 28px;
      position: relative;
      overflow: hidden
    }

    .aboutmission:after {
      content: "";
      position: absolute;
      width: 530px;
      height: 530px;
      border: 65px solid rgba(255, 255, 255, .055);
      border-radius: 50%;
      right: -160px;
      top: -200px
    }

    .mission-inner {
      max-width: 1180px;
      margin: auto;
      text-align: center;
      position: relative;
      z-index: 1
    }

    .aboutmission .section-title {
      color: #fff;
      margin: 8px auto 38px
    }

    .aboutmission .eyebrow {
      color: var(--yellow)
    }

    .mission-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      text-align: left
    }

    .mission-card {
      background: rgba(255, 255, 255, .08);
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 18px;
      padding: 28px 25px;
      backdrop-filter: blur(5px)
    }

    .mission-card .number {
      color: var(--yellow);
      font-family: Outfit, sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 1.5px
    }

    .mission-card h3 {
      font-family: Outfit, sans-serif;
      font-size: 25px;
      line-height: 1.15;
      margin: 8px 0 18px;
      color: #fff
    }

    .mission-card ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 11px
    }

    .mission-card li {
      color: #e6f2f8;
      font-size: 14px;
      line-height: 1.45;
      padding-left: 17px;
      position: relative
    }

    .mission-card li:before {
      content: "";
      width: 6px;
      height: 6px;
      background: var(--yellow);
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 7px
    }

  

    .button {
      display: inline-block;
      text-decoration: none;
      background: var(--yellow);
      color: #fff;
      font-weight: 700;
      padding: 13px 24px;
      border-radius: 25px;
      box-shadow: 0 9px 20px rgba(253, 179, 33, .28)
    }

    
    @media(max-width:800px) {
      
      .brand-name {
        font-size: 15px
      }

      .tagline {
        font-size: 8px
      }

      .mark {
        transform: scale(.75);
        transform-origin: left center;
        width: 49px
      }

      .navlinks {
        display: none
      }

      .abouthero {
        min-height: 420px
      }

      .aboutintro {
        grid-template-columns: 1fr;
        gap: 38px;
        padding: 62px 24px
      }

      .section-title {
        font-size: 38px
      }

      .value-card {
        padding: 30px 22px
      }

     
      .mission {
        padding: 63px 24px
      }

      .mission-grid {
        grid-template-columns: 1fr;
      }

      .mission-card {
        padding: 24px 20px;
      }
    }

/******************** SAP Page ***************************/

.wrap {
      width: min(1160px, calc(100% - 40px));
      margin: auto
    }

    .saphero {
      padding: 78px 0;
      background: linear-gradient(125deg, #e6f4fd, #fff9e9)
    }

    .grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 55px;
      align-items: center
    }

    .tag {
      display: inline-block;
      background: #ddecf7;
      color: var(--blue);
      border-radius: 20px;
      padding: 7px 12px;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em
    }

    .saphero h1 {
      font-size: clamp(40px, 5vw, 61px);
      line-height: 1.05;
      letter-spacing: -2.5px;
      margin: 16px 0
    }

    .saphero h1 span {
      color: var(--blue)
    }

    .saphero p {
      max-width: 600px;
      font-size: 18px;
      color: var(--muted)
    }

    .btn {
      display: inline-block;
      margin-top: 12px;
    }

    .erp {
      height: 330px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 25px 52px #0a4e7429;
      padding: 23px;
      position: relative
    }

    .erp h3 {
      margin: 0;
      font-size: 16px
    }

    .erp .menu {
      display: flex;
      gap: 8px;
      margin: 17px 0
    }

    .erp .menu i {
      height: 20px;
      flex: 1;
      background: #e5f2f9;
      border-radius: 4px
    }

    .erp .rows {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px
    }

    .module {
      height: 86px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      font-size: 12px;
      font-weight: 800;
      color: var(--navy)
    }

    .module b {
      display: block;
      color: var(--blue);
      font-size: 20px;
      margin-bottom: 7px
    }

    .go {
      position: absolute;
      right: -19px;
      bottom: 18px;
      border-radius: 12px;
      background: var(--navy);
      color: #fff;
      padding: 14px 18px
    }

    .go b {
      display: block;
      color: var(--yellow);
      font-size: 23px
    }

    .sec {
      padding: 82px 0
    }

    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center
    }

    .about-art {
      height: 285px;
      border-radius: 17px;
      background: var(--navy);
      color: #fff;
      padding: 35px;
      position: relative;
      overflow: hidden
    }

    .about-art:after {
      content: '';
      position: absolute;
      width: 230px;
      height: 230px;
      border: 31px solid #25668f;
      border-radius: 50%;
      right: -85px;
      bottom: -94px
    }

    .about-art b {
      display: inline-block;
      background: var(--yellow);
      color: var(--navy);
      padding: 9px 13px;
      border-radius: 7px
    }

    .about-art h3 {
      font-size: 30px;
      line-height: 1.16;
      max-width: 320px;
      margin-top: 55px
    }

    .about h2,
    .copy h2 {
      font-size: 37px;
      line-height: 1.14;
      letter-spacing: -1.3px;
      margin: 11px 0
    }

    .about p,
    .copy p {
      color: var(--muted)
    }

    .sapservices {
      background: var(--pale)
    }

    .headsap {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 40px
    }

    .headsap h2 {
      font-size: 37px;
      letter-spacing: -1.3px;
      margin: 10px 0
    }

    .headsap p {
      color: var(--muted)
    }
    .sapservices .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px
    }

     .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 11px;
      min-height: 154px;
      padding: 21px
    }

    .icon {
      height: 38px;
      width: 38px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: #dff0fb;
      color: var(--blue);
      font-weight: 900;
      font-size: 19px
    }

    .card h3 {
      font-size: 16px;
      margin: 14px 0 6px
    }

    .card p {
      font-size: 13px;
      color: var(--muted);
      margin: 0
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .sapchecks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 24px
    }

    .sapcheck {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 700;
      font-size: 15px
    }

    .sapcheck i {
      display: grid;
      place-items: center;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 12px;
      font-style: normal
    }

    .why {
      background: var(--navy);
      color: #fff;
      border-radius: 17px;
      padding: 38px
    }

    .why .tag {
      background: #ffffff1e;
      color: #fff
    }

    .why h3 {
      font-size: 27px;
      line-height: 1.15;
      margin: 12px 0 20px
    }

    .why div {
      border-top: 1px solid #ffffff2b;
      padding: 14px 0;
      font-weight: 700
    }

    .why div span {
      color: #60b8e8;
      margin-right: 10px
    }

    .industries {
      background: var(--pale)
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 27px
    }

    .chips span {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 10px 14px;
      font-weight: 700;
      font-size: 14px
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 14px;
      margin-top: 33px
    }

    .step {
      border-top: 4px solid var(--yellow);
      background: #fff;
      padding: 18px 13px;
      box-shadow: 0 5px 15px #12345610;
      min-height: 125px
    }

    .step b {
      display: block;
      color: var(--blue);
      font-size: 12px;
      margin-bottom: 8px
    }

    .step span {
      font-size: 14px;
      font-weight: 800;
      line-height: 1.3;
      display: block
    }

    .cta {
      padding: 0 0 82px
    }

    .boxsap {
      background: linear-gradient(112deg, var(--navy), #075a8c);
      color: #fff;
      border-radius: 17px;
      padding: 51px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .boxsap h2 {
      font-size: 35px;
      line-height: 1.14;
      margin: 0 0 9px;
		color: #fff;
    text-align: left;
    }

    .boxsap p {
      margin: 0; color: #fff; text-align: left;
    }

    .boxsap .btn {
      white-space: nowrap;
		    background: var(--yellow);
    color: #fff;
    border-radius: 6px;
    padding: 11px 16px;
    }
    @media(max-width:800px) {
  
      .grid,
      .about,
      .split {
        grid-template-columns: 1fr
      }

      .cards {
        grid-template-columns: repeat(2, 1fr)
      }

      .steps {
        grid-template-columns: repeat(2, 1fr)
      }

      .foot {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .boxsap {
        display: block;
        padding: 38px 30px
      }

      .boxsap .btn {
        margin-top: 20px
      }
    }

    @media(max-width:440px) {

      .cards,
      .checks,
      .steps {
        grid-template-columns: 1fr
      }
    }

/******************** Tally Page ***************************/

    .mark {
      font-size: 38px;
      line-height: .7;
      color: #ed3339;
      letter-spacing: -8px;
      transform: skew(-13deg)
    }

    .logo small {
      display: block;
      color: #686868;
      font-size: 13px;
      letter-spacing: 0;
      margin-top: 8px
    }

    .links {
      display: flex;
      background: var(--navy);
      color: #fff;
      border-radius: 30px 0 0 30px;
      padding: 13px 20px;
      gap: 0;
      font-size: 17px
    }

    .links a+a:before {
      content: '|';
      margin-right: 10px
    }

    .demo {
      background: var(--yellow);
      color: #fff;
      border-radius: 0 30px 30px 0;
      padding: 13px 15px;
      font-size: 17px
    }

    .tallyhero {
      background: linear-gradient(122deg, #fff7f7, #f9e5e5);
      padding: 76px 0
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 55px;
      align-items: center
    }

    .tag {
      display: inline-block;
      background: #f9dfe0;
      color: var(--red);
      padding: 7px 12px;
      border-radius: 20px;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 12px;
      font-weight: 800
    }

    .tallyhero h1 {
      font-size: clamp(42px, 5vw, 65px);
      line-height: 1.04;
      letter-spacing: -2.8px;
      margin: 17px 0
    }

    .tallyhero h1 em {
      color: var(--red);
      font-style: normal
    }

    .tallyhero p {
      font-size: 18px;
      color: var(--muted);
      max-width: 600px
    }

    .btn {
      display: inline-block;
      background: var(--red);
      color: #fff;
      border-radius: 7px;
      font-size: 15px;
      padding: 13px 20px;
      margin-top: 12px
    }

    .account {
      height: 350px;
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 25px 52px #7e31312b;
      padding: 23px;
      position: relative;
      transform: rotate(2deg)
    }

    .account:before {
      content: 'TallyPrime';
      font-size: 18px;
      color: var(--red);
      font-weight: 900
    }

    .toolbar {
      height: 32px;
      border-radius: 6px;
      background: #f7f8fa;
      margin: 18px 0
    }

    .ledger {
      display: grid;
      grid-template-columns: 1.1fr .55fr .55fr;
      gap: 1px;
      background: #e8ecf0;
      border: 1px solid #e8ecf0
    }

    .ledger div {
      height: 31px;
      background: #fff;
      padding: 7px;
      font-size: 11px;
      color: #65727d
    }

    .ledger div:nth-child(3n) {
      color: var(--red);
      font-weight: 700
    }

    .ledger div:nth-child(-n+3) {
      background: #08395d;
      color: #fff;
      font-weight: 700
    }

    .report {
      position: absolute;
      right: -23px;
      bottom: 18px;
      background: var(--red);
      color: #fff;
      padding: 16px 20px;
      border-radius: 12px;
      box-shadow: 0 14px 28px #8d293b47
    }

    .report b {
      font-size: 23px;
      display: block
    }

    .sec {
      padding: 85px 0
    }

    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 75px;
      align-items: center
    }

    .art {
      height: 300px;
      background: var(--navy);
      border-radius: 18px;
      padding: 37px;
      color: #fff;
      position: relative;
      overflow: hidden
    }

    .art:after {
      content: '';
      position: absolute;
      border: 30px solid #20597e;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      right: -90px;
      bottom: -95px
    }

    .art .badge {
      background: var(--yellow);
      color: var(--navy);
      padding: 10px 13px;
      font-weight: 900;
      border-radius: 7px;
      display: inline-block
    }

    .art h3 {
      font-size: 31px;
      line-height: 1.17;
      max-width: 320px;
      margin-top: 56px
    }

    .about h2,
    .copy h2 {
      font-size: 37px;
      line-height: 1.12;
      letter-spacing: -1.3px;
      margin: 12px 0
    }

    .about p,
    .copy p {
      color: var(--muted)
    }


    .services {
      background: #f7fafc
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 22px;
      min-height: 134px
    }

    .ico {
      background: #fde5e6;
      color: var(--red);
      width: 39px;
      height: 39px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 20px;
      font-weight: 900
    }

    .card h3 {
      font-size: 17px;
      margin: 14px 0 0
    }

    .tallybenefit {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: 80px;
      align-items: center
    }

    .tallychecks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 25px
    }

    .tallycheck {
      font-weight: 700;
      font-size: 15px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .tallycheck i {
      font-style: normal;
      background: var(--red);
      color: #fff;
      border-radius: 50%;
      width: 21px;
      height: 21px;
      display: grid;
      place-items: center;
      font-size: 12px
    }

    .tallywhy {
      background: var(--navy);
      border-radius: 18px;
      color: #fff;
      padding: 38px
    }

    .tallywhy h3 {
      font-size: 28px;
      margin: 11px 0 20px
    }

    .tallywhy .tag {
      background: #ffffff20;
      color: #fff
    }

    .item {
      border-top: 1px solid #ffffff27;
      padding: 14px 0;
      font-weight: 700
    }

    .item span {
      color: #69b6e2;
      font-size: 13px;
      margin-right: 13px
    }

    .cta {
      padding: 0 0 85px
    }

    .cta-box {
      background: var(--navy);
      color: #fff;
      border-radius: 18px;
      padding: 53px 62px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      overflow: hidden
    }

    .cta-box:after {
      content: '';
      position: absolute;
      border: 32px solid #2e668c;
      border-radius: 50%;
      width: 210px;
      height: 210px;
      right: -100px;
      top: -100px
    }

    .cta h2 { font-size: 37px; line-height: 1.1; margin: 0 0 10px; letter-spacing: -1.4px; position: relative; z-index: 1
    }

    .cta p {
      margin: 0;  color: #d8e6ee; position: relative; z-index: 1
    }

    .cta .btn { background: var(--yellow); position: relative; z-index: 1; white-space: nowrap
    }
    @media(max-width:800px) {
    

      header {
        height: 90px
      }

      .links {
        display: none
      }

      .hero-grid,
      .about,
      .benefit {  grid-template-columns: 1fr;
      }

      .cards {
        grid-template-columns: repeat(2, 1fr; )
      }
      .foot {
        grid-template-columns: 1fr; gap: 32px;
      }

      .cta-box {
        padding: 38px 30px; display: block ;
      }

      .cta .btn {
        margin-top: 20px;
      }
    }

    @media(max-width:440px) {

      .cards,
      .checks { grid-template-columns: 1fr
      }
      .account {
        transform: scale(.9);  transform-origin: left top;  width: 111%
      }
      .tallyhero h1 { letter-spacing: -2px
      }
    }

/******************** oddo Page ***************************/

    .mark {
      font-weight: 900;
      font-size: 36px;
      color: #ee2f37;
      letter-spacing: -7px;
      transform: skew(-13deg);
      line-height: .8
    }

    .brand span {
      display: block;
      color: #646464;
      font-size: 13px;
      letter-spacing: 0;
      font-weight: 700;
      margin-top: 7px
    }

    .links {
      display: flex;
      gap: 0;
      color: #fff;
      font-size: 17px;
      font-weight: 500;
      background: var(--navy);
      border-radius: 28px 0 0 28px;
      padding: 13px 20px
    }

    .links a+a:before {
      content: '|';
      color: #fff;
      margin-right: 10px
    }

    .nav-btn,
    .btn {
     
      color: #fff;
      border-radius: 7px;
      padding: 12px 19px;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 9px
    }

    .nav-btn {
      padding: 13px 15px;
      background: var(--yellow);
      color: #fff;
      border-radius: 0 28px 28px 0;
      font-size: 17px
    }

    .oddohero {
      overflow: hidden;
      background: linear-gradient(115deg, #fbf7fa 0%, #f8eef5 60%, #f1e3ed 100%);
      padding: 50px 0 50px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 50px
    }

    .eyebrow {
      display: inline-flex;
      color: #fff;
      background: #6e4660;
      border-radius: 99px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .05em;
      text-transform: uppercase
    }

    .oddohero h1 {
      font-size: clamp(40px, 5vw, 64px);
      letter-spacing: -2.8px;
      line-height: 1.04;
      margin: 17px 0
    }

    .oddohero p {
      max-width: 590px;
      font-size: 18px;
      color: var(--muted);
      margin: 0 0 28px
    }

    .visual {
      height: 360px;
      position: relative
    }

    .dashboard {
      position: absolute;
      inset: 28px 0 0 40px;
      background: #fff;
      border-radius: 16px;
      padding: 19px;
      box-shadow: 0 22px 55px #4f294830;
      border: 1px solid #f0e5eb;
      transform: rotate(2deg)
    }

    .dash-top {
      height: 16px;
      display: flex;
      gap: 6px
    }

    .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #e6d8e0
    }

    .dash-nav {
      width: 37%;
      height: 9px;
      margin: 25px 0;
      background: #e9d5e2;
      border-radius: 20px
    }

    .chart {
      height: 105px;
      background: linear-gradient(160deg, #f8f1f5, #fbf8fa);
      border-radius: 10px;
      position: relative;
      overflow: hidden
    }

    .chart:after {
      content: "";
      position: absolute;
      left: 10%;
      bottom: 17%;
      width: 76%;
      height: 48%;
      border-left: 3px solid var(--odoo);
      border-top: 3px solid var(--odoo);
      transform: skewY(-17deg) rotate(-3deg);
      border-radius: 18px
    }

    .tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
      margin-top: 13px
    }

    .tile {
      height: 77px;
      background: #fbf7fa;
      border-radius: 9px;
      padding: 13px
    }

    .tile b {
      display: block;
      font-size: 16px;
      color: var(--odoo)
    }

    .tile small {
      font-size: 10px;
      color: #958b93
    }

    .float-card {
      position: absolute;
      background: var(--odoo);
      color: #fff;
      border-radius: 12px;
      padding: 15px 17px;
      right: -8px;
      bottom: 0;
      box-shadow: 0 18px 38px #643a5b54;
      font-size: 13px
    }

    .float-card b {
      font-size: 26px;
      display: block
    }

    .ring {
      position: absolute;
      width: 190px;
      height: 190px;
      border: 25px solid #e8cadb;
      border-radius: 50%;
      right: -50px;
      top: -28px;
      opacity: .7
    }


    .section-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 42px
    }

    .section-head h2 {
      font-size: 36px;
      letter-spacing: -1.4px;
      margin: 10px 0
    }

    .section-head p {
      color: var(--muted);
      margin: 0
    }

    .about {
      background: #fff
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    .oddoabout-art {
      height: 305px;  border-radius: 18px;
      position: relative;
      overflow: hidden;
      padding: 32px;
      color: #fff;
		background-color: #3b1b33;
		
    }

    .oddoabout-art:after {
      content: "";
      position: absolute;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      border: 32px solid #8e6c86;
      right: -70px;
      bottom: -90px
    }

    .oddoabout-art .mini {
      position: absolute;
      right: 26px;
      top: 26px;
      width: 115px;
      background: #fff;
      color: var(--odoo);
      padding: 13px;
      border-radius: 10px;
      box-shadow: 0 10px 22px #20101b59
    }

    .oddoabout-art .mini b {
      font-size: 21px
    }

    .oddoabout-art h3 {
      font-size: 29px;
      line-height: 1.15;
      margin: 93px 0 8px;
      max-width: 320px
    }

    .about-grid h2 {
      font-size: 35px;
      letter-spacing: -1px;
      margin: 0 0 15px
    }

    .about-grid p {
      color: var(--muted);
      margin: 0 0 16px
    }

    .solutions {
      background: var(--blush);
		    padding: 50px 0px;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 17px
    }

    .card {
      background: #fff;
      border: 1px solid #f0e5eb;
      border-radius: 12px;
      padding: 23px 19px;
      min-height: 164px
    }

    .icon {
      width: 38px;
      height: 38px;
      background: #f1e4ec;
      color: var(--odoo);
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 19px;
      font-weight: 800
    }

    .card h3 {
      margin: 15px 0 6px;
      font-size: 16px
    }

    .card p {
      font-size: 13px;
      color: var(--muted);
      margin: 0
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 80px;
      align-items: center;
		    padding: 50px 0px;
    }

    .benefits-copy h2 {
      font-size: 37px;
      line-height: 1.12;
      letter-spacing: -1.4px;
      margin: 10px 0 17px
    }

    .benefits-copy p {
      color: var(--muted)
    }

    .oddochecks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 25px
    }

    .oddocheck {
      font-size: 15px;
      font-weight: 650;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .oddocheck i {
      font-style: normal;
      color: #fff;
      background: var(--odoo);
      width: 21px;
      height: 21px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 12px
    }

    .why-panel {
      border-radius: 18px;
      background: linear-gradient(145deg, #79536e, #523049);
      padding: 40px;
      color: #fff
    }

    .why-panel h3 {
      font-size: 27px;
      margin: 0 0 23px
    }

    .oddowhy-item {
      border-top: 1px solid #ffffff2e;
      padding: 15px 0;
      display: flex;
      gap: 13px;
      align-items: center;
      font-weight: 650
    }

    .oddowhy-item span {
      color: #f3cadf;
      font-size: 13px
    }

    .cta {
      padding: 0 0 88px
    }

    .cta-box {
      border-radius: 18px;
      color: #fff;
      padding: 54px 64px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
      overflow: hidden;
      position: relative
    }

    .cta-box:after {
      content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      border: 36px solid #a17c97;
      border-radius: 50%;
      right: -105px;
      top: -93px;
      opacity: .45
    }

    .cta h2 {
      font-size: 37px;
      letter-spacing: -1.4px;
      margin: 0 0 9px;
      position: relative;
      z-index: 1;
		   color: #fff;
    }

    .cta p {
      margin: 0;
      color: #fff;
      position: relative;
      z-index: 1;
    }

    .cta .btn {
     
      
      white-space: nowrap;
      position: relative;
      z-index: 1
    }

    
    @media(max-width:800px) {
    

   


      .hero-grid,
      .about-grid,
      .benefits-grid {
        grid-template-columns: 1fr
      }

      .oddohero {
        padding: 56px 0
      }

      .visual {
        height: 290px
      }

      .card-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .about-grid {
        gap: 32px
      }

      .cta-box {
        padding: 38px 30px;
        display: block
      }

      .cta .btn {
        margin-top: 20px
      }

      .footer-top {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .section-head h2,
      .about-grid h2,
      .benefits-copy h2 {
        font-size: 31px
      }
    }

    @media(max-width:440px) {

      .card-grid,
      .checks {
        grid-template-columns: 1fr
      }

      .visual {
        transform: scale(.9);
        transform-origin: left top;
        width: 111%
      }

      .oddohero h1 {
        letter-spacing: -2px
      }

      .cta h2 {
        font-size: 31px
      }
    }

/******************** Digital marketing Page ***************************/


.btn {
      background: var(--yellow);
      color: #fff;
      border-radius: 6px;
      padding: 11px 16px
    }

    .digihero {
      padding: 78px 0;
      background: linear-gradient(125deg, #e6f4fd, #fff9e9)
    }

    .grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 55px;
      align-items: center
    }

    .tag {
      display: inline-block;
      background: #ddecf7;
      color: var(--blue);
      border-radius: 20px;
      padding: 7px 12px;
      text-transform: uppercase;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em
    }

    .digihero h1 {
      font-size: clamp(42px, 5vw, 62px);
      line-height: 1.04;
      letter-spacing: -2.5px;
      margin: 16px 0
    }

    .digihero h1 span {
      color: var(--blue)
    }

    .digihero p {
      max-width: 600px;
      font-size: 18px;
      color: var(--muted)
    }

    .btn {
      display: inline-block;
      margin-top: 12px;
    }

    .dash {
      height: 330px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 25px 52px #0a4e7429;
      padding: 24px;
      position: relative
    }

    .dash h3 {
      margin: 0;
      font-size: 16px
    }

    .kpis {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 20px 0
    }

    .kpi {
      background: #f3f9fd;
      padding: 10px;
      border-radius: 8px
    }

    .kpi b {
      display: block;
      color: var(--blue);
      font-size: 19px
    }

    .kpi small {
      font-size: 10px;
      color: var(--muted)
    }

    .trend {
      height: 130px;
      background: linear-gradient(180deg, #f7fbfd, #fff);
      border-bottom: 2px solid #dceaf2;
      position: relative
    }

    .trend:after {
      content: '';
      position: absolute;
      left: 8%;
      bottom: 17%;
      width: 78%;
      height: 54%;
      border-left: 4px solid var(--yellow);
      border-top: 4px solid var(--blue);
      transform: skewY(-17deg);
      border-radius: 20px
    }

    .up {
      position: absolute;
      right: -20px;
      bottom: 21px;
      background: var(--navy);
      color: #fff;
      padding: 14px 18px;
      border-radius: 12px
    }

    .up b {
      display: block;
      font-size: 26px;
      color: var(--yellow)
    }

    .sec {
      padding: 82px 0
    }

    .center {
      max-width: 820px;
      margin: auto;
      text-align: center
    }

    .center h2,
    .copy h2 {
      font-size: 37px;
      line-height: 1.14;
      letter-spacing: -1.3px;
      margin: 11px 0
    }

    .center p,
    .copy p {
      color: var(--muted)
    }

    .digiservices {
      background: var(--pale)
    }

    .digiservices .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 38px
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 11px;
      min-height: 150px;
      padding: 21px
    }

    .icon {
      height: 38px;
      width: 38px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: #dff0fb;
      color: var(--blue);
      font-weight: 900;
      font-size: 19px
    }

    .card h3 {
      font-size: 16px;
      line-height: 1.25;
      margin: 14px 0 0
    }

    .split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center
    }

    .digichecks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 24px
    }

    .digicheck {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 700;
      font-size: 15px
    }

    .digicheck i {
      display: grid;
      place-items: center;
      width: 21px;
      height: 21px;
      border-radius: 50%;
      background: var(--blue);
      color: #fff;
      font-size: 12px;
      font-style: normal
    }

    .digiwhy {
      background: var(--navy);
      color: #fff;
      border-radius: 17px;
      padding: 38px
    }

    .digiwhy .tag {
      background: #ffffff1e;
      color: #fff
    }

    .why h3 {
      font-size: 28px;
      margin: 12px 0 20px
    }

    .digiwhy div {
      border-top: 1px solid #ffffff2b;
      padding: 15px 0;
      font-weight: 700
    }

    .digiwhy div span {
      color: #60b8e8;
      margin-right: 10px
    }

    .cta {
      padding: 0 0 82px
    }

    .boxdigi {
      background: linear-gradient(112deg, var(--navy), #075a8c);
      color: #fff;
      border-radius: 17px;
      padding: 51px 60px;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .boxdigi h2 {
      font-size: 36px;
      line-height: 1.14;
      margin: 0 0 9px
    }

    .boxdigi p {
      margin: 0;
      color: #d9ebf6
    }

    .boxdigi .btn {
      white-space: nowrap
    }

    @media(max-width:800px) {
      .nav nav {
        display: none
      }

      .grid,
      .split {
        grid-template-columns: 1fr
      }

      .cards {
        grid-template-columns: repeat(2, 1fr)
      }

    

      .box {
        display: block;
        padding: 38px 30px
      }

      .box .btn {
        margin-top: 20px
      }
    }
    @media(max-width:440px) {

      .cards,
      .checks {
        grid-template-columns: 1fr
      }
    }

/******************** ATC Page ***************************/


    .tag {
      display: inline-block;
      background: #dceefa;
      color: var(--blue);
      border-radius: 20px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .06em
    }
.atchero {
    background: linear-gradient(125deg, #e9f5fc, #fff7df);
    padding: 78px 0;
}
    .atchero h1 {
      font-size: clamp(40px, 5vw, 61px);
      line-height: 1.06;
      letter-spacing: -2.5px;
      margin: 16px 0
    }

    .atchero h1 span {
      color: var(--blue)
    }

    .atchero p {
      font-size: 18px;
      color: var(--muted);
      max-width: 600px
    }

    .btn {
      display: inline-block;
      font-weight: 800;
      margin-top: 12px
    }

    .graphic {
      height: 330px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 25px 52px #0c46672b;
      padding: 26px;
      position: relative
    }

    .graphic h3 {
      margin: 0;
      color: var(--navy);
      font-size: 17px
    }

    .bars {
      display: flex;
      align-items: end;
      gap: 14px;
      height: 165px;
      border-bottom: 2px solid #e6eef4;
      margin-top: 22px;
      padding: 0 15px
    }

    .bar {
      width: 16%;
      background: var(--blue);
      border-radius: 7px 7px 0 0
    }

    .bar:nth-child(1) {
      height: 38%
    }

    .bar:nth-child(2) {
      height: 62%;
      background: #65b4e3
    }

    .bar:nth-child(3) {
      height: 48%;
      background: var(--yellow)
    }

    .bar:nth-child(4) {
      height: 80%;
      background: var(--blue)
    }

    .bar:nth-child(5) {
      height: 96%;
      background: var(--yellow)
    }

    .metric {
      position: absolute;
      right: -19px;
      bottom: 25px;
      background: var(--navy);
      color: #fff;
      border-radius: 12px;
      padding: 14px 18px;
      font-size: 13px
    }

    .metric b {
      display: block;
      font-size: 26px;
      color: var(--yellow)
    }

    .sec {
      padding: 82px 0
    }

    .atcintro {
      max-width: 875px;
      margin: auto;
      text-align: center
    }

    .atcintro h2,
    .copy h2 {
      font-size: 37px;
      letter-spacing: -1.4px;
      line-height: 1.14;
      margin: 11px 0 16px
    }

    .atcintro p,
    .copy p {
      color: var(--muted);
      font-size: 16px
    }

    .atcservices {
      background: var(--pale)
    }

    .headatc {
      text-align: center;
      max-width: 690px;
      margin: 0 auto 40px
    }

    .headatc h2 {
      font-size: 37px;
      letter-spacing: -1.3px;
      margin: 10px 0
    }

    .headatc p {
      color: var(--muted)
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px
    }

    .card {
      background: #fff;
      border: 1px solid var(--line);
      padding: 20px 17px;
      border-radius: 11px;
      min-height: 136px
    }

    .icon {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: #def0fb;
      color: var(--blue);
      font-size: 18px;
      font-weight: 900
    }

    .card h3 {
      font-size: 15px;
      line-height: 1.25;
      margin: 14px 0 6px
    }

    .card p {
      font-size: 12px;
      line-height: 1.4;
      color: var(--muted);
      margin: 0
    }

    .split {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      align-items: center;
      gap: 80px
    }

 .atcchecks {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 23px
    }

    .atccheck {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      gap: 9px;
      align-items: center
    }

    .atccheck i {
      width: 21px;
      height: 21px;
      background: var(--blue);
      color: #fff;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-style: normal;
      font-size: 12px
    }
    .atcwhy {
      background: var(--navy);
      color: #fff;
      border-radius: 17px;
      padding: 37px
    }

    .atcwhy h3 {
      font-size: 28px;
      margin: 12px 0 20px
    }

    .atcwhy .tag {
      background: #ffffff1e;
      color: #fff
    }

    .why-item {
      padding: 12px 0;
      font-weight: 700;
      font-size: 14px
    }

    .why-item span {
      color: #5db7e9;
      margin-right: 10px
    }

    .industries {
      background: var(--pale)
    }

    .industry-list {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 27px
    }

    .industry-list span {
      background: #fff;
      border: 1px solid #dbe9f1;
      padding: 11px 15px;
      border-radius: 24px;
      font-weight: 700;
      font-size: 14px
    }

    .atcprocess {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-top: 32px
    }

    
    @media(max-width:800px) {
  
      .hero-grid,
      .split {
        grid-template-columns: 1fr
      }

      .cards {
        grid-template-columns: repeat(2, 1fr)
      }

      .atcprocess {
        grid-template-columns: repeat(2, 1fr)
      }
     
    }

    @media(max-width:440px) {

      .cards,
      .checks,
      .atcprocess {
        grid-template-columns: 1fr
      }

      .hero {
        padding: 55px 0
      }
    }



/******************** websute Page ***************************/
   


    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--navy);
      text-decoration: none;
      min-width: 280px;
    }

    .brand-mark {
      width: 70px;
      height: 55px;
      position: relative;
      transform: skew(-10deg);
    }

    .brand-mark:before,
    .brand-mark:after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 11px;
      border-radius: 2px 2px 0 0;
      background: #0b5e9c;
    }

    .brand-mark:before {
      left: 17px;
      height: 42px;
      transform: rotate(-22deg);
    }

    .brand-mark:after {
      left: 36px;
      height: 53px;
      transform: rotate(17deg);
      background: #e94c3d;
    }

    .brand-mark i {
      position: absolute;
      width: 34px;
      height: 8px;
      left: 20px;
      top: 23px;
      background: #0b5e9c;
      transform: rotate(-30deg);
      display: block;
    }

    .brand b {
      font: 800 20px/1 Outfit, sans-serif;
      letter-spacing: .2px;
    }

    .brand span {
      display: block;
      font-size: 10px;
      color: #536575;
      font-weight: 700;
      margin-top: 5px;
    }

    .devhero {
      overflow: hidden;
      position: relative;
      color: #fff; padding: 0;
      background: linear-gradient(115deg, #042e4d 0%, #084d7b 62%, #0a709f 100%);
    }

    .devhero:before {
      content: "";
      position: absolute;
      width: 720px;
      height: 720px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 50%;
      right: -220px;
      top: -300px;
      box-shadow: 0 0 0 70px rgba(255, 255, 255, .045), 0 0 0 140px rgba(255, 255, 255, .025);
    }

    .devhero-grid {
      min-height: 504px;
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      align-items: center;
      gap: 50px;
      position: relative;
    }

    .deveyebrow {
      display: inline-flex;
    gap: 8px;
    align-items: center;
    color: #fff;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    background: #0e2d40;
    padding: 6px;
    border-radius: 30px;
    }

  

    .devhero h1 {
      color: #fff;
      font-size: clamp(39px, 5vw, 66px);
      letter-spacing: -1.6px;
      margin: 17px 0;
      max-width: 710px;
    }
 .devhero h3 {
     color: var(--navy-deep);
;
      
    }
    .devhero h1 em {
      color: var(--gold);
      font-style: normal;
    }

    .devhero p {
      max-width: 610px;
      color: #dbedf7;
      font-size: 17px;
    }

    .button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 13px 23px;
      border-radius: 6px;
      font-weight: 800;
      text-decoration: none;
      background: var(--gold);
      color: #fff;
      box-shadow: 0 12px 22px rgba(0, 0, 0, .16);
    }

    .button .arrow {
      font-size: 20px;
      line-height: 12px;
    }

    .button:hover {
      transform: translateY(-2px);
    }

    .browser {
      padding: 18px;
      background: #f8fcff;
      border: 8px solid rgba(255, 255, 255, .23);
      border-radius: 17px;
      transform: rotate(3deg);
      box-shadow: 0 27px 35px rgba(0, 0, 0, .24);
    }

    .browser-bar {
      display: flex;
      gap: 5px;
      margin-bottom: 13px;
    }

    .browser-bar i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffba2b;
    }

    .browser-bar i+i {
      background: #80c8ed
    }

    .browser-bar i+i+i {
      background: #e9edf0
    }

    .screen {
      min-height: 275px;
      padding: 25px;
      border-radius: 8px;
      background: linear-gradient(135deg, #d9f2ff, #fff);
      position: relative;
      overflow: hidden;
    }

    .screen:after {
      content: "";
      width: 190px;
      height: 190px;
      position: absolute;
      right: -60px;
      bottom: -65px;
      border-radius: 50%;
      background: #ffbe31;
    }

    .mini-logo {
      width: 75px;
      height: 10px;
      border-radius: 8px;
      background: #0a4f7c;
    }

    .screen h3 {
      font-size: 28px;
      margin: 35px 0 6px;
      max-width: 260px;
    }

    .screen p {
      color: #536a79;
      font-size: 12px;
      max-width: 260px;
    }

    .mini-button {
      display: inline-block;
      padding: 7px 13px;
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      background: #0a73b6;
      border-radius: 3px;
    }

    .code-card {
      position: absolute;
      z-index: 1;
      right: 21px;
      bottom: 28px;
      width: 145px;
      padding: 16px;
      background: #06395d;
      border-radius: 8px;
      box-shadow: 0 9px 18px rgba(4, 54, 85, .24);
    }

    .code-card span {
      height: 5px;
      background: #47bdf1;
      margin: 7px 0;
      display: block;
      border-radius: 5px;
    }

    .code-card span:nth-child(2) {
      width: 70%;
      background: #fff
    }

    .code-card span:nth-child(3) {
      width: 86%;
      background: #ffbd2a
    }

    .code-card span:nth-child(4) {
      width: 53%;
    }

 

    .section-label {
      color: #0876bd;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .section-title {
       font-size: 43px;
      margin: 11px 0 16px;
      letter-spacing: -.8px;
    }

    .lead {
      color: var(--muted);
      max-width: 620px;
      font-size: 16px;
    }

    .overview {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 98px;
      align-items: center;
    }

    .visual-block {
     
      position: relative;
      border-radius: 15px;
      background: #edf9ff;
     
    }

 

    .device {
      position: absolute;
      z-index: 1;
      width: 72%;
      height: 250px;
      left: 14%;
      bottom: 0;
      padding: 15px;
      background: #fff;
      border: 9px solid #06395d;
      border-bottom: 0;
      border-radius: 13px 13px 0 0;
      box-shadow: 0 15px 25px #6ba1ba66;
    }

    .device-head {
      height: 16px;
      border-radius: 3px;
      background: #d8edf7;
    }

    .device-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 14px;
    }

    .device-grid div {
      height: 77px;
      border-radius: 4px;
      background: #daf1fb;
    }

    .device-grid div:first-child {
      background: #0a6da9;
    }

    .device-grid div:nth-child(3) {
      grid-column: span 2;
      height: 78px;
      background: #ffbd2a;
    }

    .globe {
      position: absolute;
      width: 89px;
      height: 89px;
      border-radius: 50%;
      right: 20px;
      top: 25px;
      background: #0a72b1;
      border: 7px solid #fff;
      box-shadow: 0 6px 16px #145a7b44;
    }

    .globe:before,
    .globe:after {
      content: "";
      position: absolute;
      inset: 18px 6px;
      border: 1px solid #b5eaff;
      border-radius: 50%;
    }

    .globe:after {
      inset: 6px 18px;
    }
#overview { margin: 50px 0px; }
    .webservices {
      background: #f6fbfd;   margin: 50px 0px;
    padding: 25px 0px;
    }

    .center {
      text-align: center;
      margin: auto;
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 17px;
      margin-top: 42px;
    }

    .card {
      min-height: 185px;
      padding: 25px 20px;
      background: #fff;
      border: 1px solid #e4eef3;
      border-radius: 9px;
      transition: .25s;
    }

    .card:hover {
      border-color: #64bce8;
      transform: translateY(-6px);
      box-shadow: 0 16px 30px #123e5611;
    }

    .icon {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: #e8f6fd;
      color: #0876bd;
      font-size: 22px;
      font-weight: 800;
    }

    .card h3 {
      margin: 20px 0 0;
      font-size: 18px;
    }

    .benefits-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 86px;
      align-items: center;
    }

    .benefit-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 17px;
    }

    .benefit {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }

    .check {
      display: grid;
      place-items: center;
      flex: 0 0 25px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: var(--gold);
      color: #fff;
      font-size: 15px;
    }

    .stat-panel {
      padding: 43px 37px;
      background: var(--navy);
      color: white;
      border-radius: 13px;
      position: relative;
      overflow: hidden;
    }

    .stat-panel:after {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      right: -110px;
      top: -145px;
      border: 30px solid #0c5987;
      border-radius: 50%;
    }

    .stat-panel h2 {
      color: #fff;
      font-size: 37px;
      position: relative;
      z-index: 1;
    }

    .stat-panel p {
      color: #b9d8e9;
      position: relative;
      z-index: 1;
    }

    .stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      position: relative;
      z-index: 1;
      margin-top: 28px
    }

    .stat {
      padding: 18px;
      border: 1px solid #2d668c;
      border-radius: 7px
    }

    .stat strong {
      font: 800 31px/1 Outfit;
      color: var(--gold);
      display: block
    }

    .stat span {
      font-size: 12px;
      color: #d5e6f0
    }

    .devwhy {
      background: #f6fbfd; padding: 25px 0px;
    }

    .devwhy-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      margin-top: 42px;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 9px;
      overflow: hidden;
    }

    .devwhy-item {
      padding: 29px 22px;
      border-right: 1px solid var(--line)
    }

    .devwhy-item:last-child {
      border: 0
    }

    .devwhy-num {
      color: var(--gold);
      font: 800 32px/1 Outfit
    }

    .devwhy-item h3 {
      font-size: 18px;
      margin: 15px 0 6px
    }

    .devwhy-item p {
      color: var(--muted);
      font-size: 13px;
      margin: 0
    }

    .process {
      overflow: hidden;
    }

    .devtimeline {
      position: relative;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-top: 48px;
    }

    .devtimeline:before {
      content: "";
      position: absolute;
      left: 5%;
      right: 5%;
      top: 32px;
      height: 2px;
      background: #b6dbe9
    }

    .webstep {
      position: relative;
      text-align: center
    }

    .webstep b {
      width: 65px;
      height: 65px;
      margin: auto;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #71bde3;
      color: #0876bd;
      font: 800 22px Outfit
    }

    .webstep h3 {
      font-size: 16px;
      margin: 16px 0 6px
    }

    .webstep p {
      font-size: 12px;
      line-height: 1.5;
      color: var(--muted);
      padding: 0 8px
    }


    .cta-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
    }

    .cta h2 {
      color: #fff;
      font-size: 40px;
      margin: 0 0 9px
    }

    .cta p {
      color: #d0e8f5;
      margin: 0;
      font-size: 16px
    }

    .cta .button {
      white-space: nowrap
    }

   

    @media(max-width:900px) {
      header {
        height: 92px
      }

      .brand {
        min-width: auto
      }

      .brand b {
        font-size: 16px
      }

      .brand-mark {
        width: 49px;
        height: 42px;
        transform: scale(.75);
        transform-origin: left center
      }

      .brand span {
        font-size: 8px
      }

     
      .devhero-grid,
      .overview,
      .benefits-wrap {
        grid-template-columns: 1fr;
        gap: 45px
      }

      .devhero-grid {
        padding: 60px 0
      }

      .browser {
        max-width: 450px;
        margin: auto
      }

      .cards {
        grid-template-columns: repeat(2, 1fr)
      }

      .devwhy-grid {
        grid-template-columns: 1fr 1fr
      }

      .devwhy-item:nth-child(2) {
        border-right: 0
      }

      .devwhy-item:nth-child(-n+2) {
        border-bottom: 1px solid var(--line)
      }

      .devtimeline {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 26px
      }

      .devtimeline:before {
        display: none
      }

     

      .cta-box {
        display: block
      }

      .cta .button {
        margin-top: 22px
      }
    }

    @media(max-width:560px) {
      .container {
        width: min(100% - 32px, 1180px)
      }

      .top-strip {
        font-size: 12px
      }

      .top-strip a {
        font-size: 10px
      }

      .brand b {
        font-size: 13px
      }

      .brand span {
        display: none
      }

      section {
        padding: 64px 0
      }

      .section-title {
        font-size: 33px
      }

      .devhero h1 {
        font-size: 42px
      }

      .cards,
      .benefit-list,
      .devwhy-grid {
        grid-template-columns: 1fr
      }

      .devwhy-item,
      .why-item:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--line)
      }

      .devwhy-item:last-child {
        border-bottom: 0
      }

      .devtimeline {
        grid-template-columns: 1fr 1fr
      }

      .cta h2 {
        font-size: 31px
      }
    }

/******************** Contact Page ***************************/

    .contacthero {
      background: linear-gradient(120deg, rgba(5, 45, 75, .96), rgba(9, 89, 126, .84)), radial-gradient(circle at 84% 20%, rgba(255, 185, 35, .26), transparent 26%);
       text-align: center;
      color: #fff;
		    padding: 50px 0px;
    }

    .contacteyebrow {
      color: #ffc536;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 12px;
      font-weight: 700
    }

    .contacthero h1 {
      margin: 12px 0 10px;
      font-size: 45px
    }

    .contacthero p {
      max-width: 650px;
      margin: auto;
      color: #e3f1fa;
      font-size: 18px;
      line-height: 1.55
    }

    .contactmain {
      max-width: 1210px;
      margin: 0 auto;
      padding: 72px 28px;
      display: grid;
      grid-template-columns: 1.04fr .96fr;
      gap: 62px
    }

    .section-kicker {
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase
    }

    h2 {
      margin: 10px 0;
      font-size: 32px;
      color: var(--navy)
    }

    .contactintro {
      color: var(--muted);
      line-height: 1.6;
      margin: 0 0 27px
    }

    .form-card {
      border: 1px solid #dce8f0;
      border-radius: 14px;
      padding: 30px;
      box-shadow: 0 14px 35px rgba(12, 54, 85, .1);
      background: #fff
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 17px
    }

    label {
      font-size: 13px;
      font-weight: 700;
      color: #304b60;
      display: block;
      margin-bottom: 7px
    }

    input,
    select,
    textarea {
      width: 100%;
      font: inherit;
      font-size: 14px;
      padding: 13px 14px;
      border: 1px solid #ccdce7;
      border-radius: 7px;
      color: #31465a;
      outline: none
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(8, 124, 200, .12)
    }

    .wide {
      grid-column: 1/-1
    }

    textarea {
      resize: vertical;
      min-height: 110px
    }

    .submit {
      margin-top: 20px;
      padding: 14px 28px;
      border: 0;
      border-radius: 7px;
      background: linear-gradient(90deg, #ffbd2e, #ffa915);
      color: #fff;
      cursor: pointer;
      font-weight: 800;
      font-size: 15px
    }

    #thanks {
      display: none;
      margin: 13px 0 0;
      color: #087353;
      font-weight: 700
    }

    .contact-side {
      padding-top: 8px
    }

    .contact-list {
      margin-top: 30px;
      display: grid;
      gap: 20px
    }

    .contact-block {
      padding: 0 0 19px 22px;
      border-bottom: 1px solid #e3edf3;
      position: relative
    }

    .contact-block:before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 7px;
      background: var(--gold);
      box-shadow: 0 0 0 5px #fff3d9
    }

    .contact-block h3 {
      margin: 0 0 8px;
      font-size: 16px;
      color: var(--navy)
    }

    .contact-block p,
    .contact-block a {
      margin: 0;
      color: #52697c;
      line-height: 1.6;
      font-size: 15px;
      text-decoration: none
    }

    .contact-block a:hover {
      color: var(--blue)
    }

   
    @media(max-width:850px) {
   

      .contacthero {
        padding: 56px 22px
      }

      .contacthero h1 {
        font-size: 34px
      }

      .contactmain {
        grid-template-columns: 1fr;
        gap: 42px;
        padding: 50px 22px
      }
    }

    @media(max-width:500px) {
   
      .form-grid {
        grid-template-columns: 1fr
      }

      .wide {
        grid-column: auto
      }

      .form-card {
        padding: 21px
      }
    }