@import url(./fonts.css);
:root {
   --blue-bg: #0F6FFF;
   --white: white;
}

html,
body {
   scroll-behavior: smooth;
   overscroll-behavior: none;
}

body {
   line-height: 1.6;
   background: #ffffff;
   overflow-x: hidden;
   font-size: 16px;
   color: #939393;
   font-family: var(--zf-regular);
}

body:before {
   content: "";
   position: fixed;
   top: 0;
   left: 0;
   z-index: 99;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.2);
   opacity: 0;
   visibility: hidden;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

body.offcanvas-menu:before {
   opacity: 1;
   visibility: visible;
}

.text-black {
   color: #000000 !important;
}

a {
   color: #0172F5;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

a:hover {
   color: #0172F5;
   text-decoration: none;
}

::selection {
   background: #000000;
   color: #ffffff;
}

.text-primary {
   color: #0172F5 !important;
}

a.text-primary {
   color: #0172F5 !important;
}

a.text-primary:hover {
   color: #0172F5 !important;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-family: "Zoho Puvi", sans-serif;
   color: #000000;
}

.btn {
   padding: 15px 20px;
   border-radius: 1px;
   font-size: 14px;
   /* text-transform: uppercase; */
   font-weight: 700;
   letter-spacing: .05rem;
}

.btn:active,
.btn:focus {
   outline: none;
   -webkit-box-shadow: none;
   box-shadow: none;
}

.btn.btn-primary {
   background: #0172F5;
   border-color: #0172F5;
}

.btn.btn-primary:hover {
   border-color: #5489ff;
   background: #5489ff;
}

.btn.btn-outline-primary {
   border-color: #0172F5;
   color: #0172F5;
}

.btn.btn-outline-primary:hover {
   background-color: #0172F5;
   color: #ffffff;
}

.form-control {
   border: none;
   font-size: 16px;
   height: 45px;
   padding-left: 0;
   padding-right: 0;
   background: transparent;
   border-bottom: 1px solid #43434d;
   border-radius: 0;
   color: #000000;
}

.form-control:active,
.form-control:focus {
   color: #000000;
   border-color: #0172F5;
   -webkit-box-shadow: none;
   box-shadow: none;
   background: transparent;
}

.spinner-border {
   color: #0172F5;
}

/*PRELOADING------------ */
#overlayer {
   width: 100%;
   height: 100%;
   position: fixed;
   z-index: 7100;
   background: #ffffff;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
}

.loader {
   z-index: 7700;
   position: fixed;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.logo {
   font-size: 24px;
   color: #ffffff;
   font-weight: 700;
}

.logo img {
   width: 140px;
   height: auto;
}

.badge {
   display: inline-block;
   padding: 8px 15px;
   font-size: 14px;
   font-weight: 700;
   line-height: 1;
   color: #000000;
   background: #ffffff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 25px;
   margin-bottom: 10px;
}

.zohoMea-section .sub-heading {
   font-size: 38px;
   line-height: normal;
   margin: 0;
   font-family: var(--zf-medium);
   font-weight: 700;
}

.info-para p {
   font-size: 16px;
   font-family: var(--zf-regular);
   color: #4E647A;
   line-height: 1.7;
}

.project-head {
   font-size: 45px;
   color: white;
   font-weight: 700;
   margin-bottom: 30px;
}

.project-p {
   color: white;
}

.project-p p {
   font-size: 20px;
}

.project-head span {
   color: #CD8AFE;
   position: relative;
}

.project-head span::after {
   content: '';
   position: absolute;
   background: url(../assets/img/projects/line.svg)no-repeat;
   background-position: center;
   background-size: contain;
   height: 20px;
   width: 100%;
   left: 0;
   bottom: -15px;
}

.logo:hover {
   color: #ffffff;
}

.site-nav {
   position: absolute;
   width: 100%;
   background: white;
   z-index: 10;
   box-shadow: 0px 6px 14px -6px rgba(24, 39, 75, 0.06), 0px 10px 32px -4px rgba(24, 39, 75, 0.06);
}

.site-nav a {
   position: relative;
   z-index: 9;
   cursor: pointer;
}

.site-nav {
   padding-top: 15px;
   padding-bottom: 15px;
}

.site-nav h1 {
   margin: 0;
   padding: 0;
   font-size: 24px;
}

.site-nav .site-navigation .site-menu {
   margin-bottom: 0;
}

.site-nav .site-navigation .site-menu>li {
   display: inline-block;
}

.site-nav .site-navigation .site-menu>li>a {
   font-size: 15px;
   padding: 10px 15px;
   display: inline-block;
   text-decoration: none !important;
   color: rgba(255, 255, 255, 0.5);
   position: relative;
}

.site-nav .site-navigation .site-menu>li>a:hover {
   color: #ffffff;
}

.site-nav .site-navigation .site-menu>li>a.active {
   color: #0172F5;
}

#features-section {
   padding-bottom: 0;
   padding-top: 0px;
}

.mea-pattern {
   /* background: linear-gradient(180deg, var(--White, rgba(255, 255, 255, 0.09)) -3.3%, var(--Zoho-Blue-1, rgba(34, 109, 180, 0.09)) 143.93%); */
   background: linear-gradient(0deg, var(--White, rgba(255, 255, 255, 0.09)) -56.67%, var(--Blue-cool, rgba(1, 114, 245, 0.09)) 110.55%);
   background-clip: text;
   -webkit-background-clip: text;
   font-size: 460px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-weight: 800;
   font-family: var(--zf-bold);
   -webkit-text-fill-color: transparent;
}

#home-section,
#features-section {
   position: relative;
   overflow: hidden;
}

#features-section .video-pattern1 {
   position: absolute;
   right: -0;
   transform: scaleX(-1);
}

#features-section .video-pattern2 {
   position: absolute;
   right: 20px;
   top: 0;
}

#features-section .video-pattern {
   content: "";
   position: absolute;
   bottom: 40px;
   left: 0;
   width: 100%;
   height: 50%;
   background: url(../assets/img/pattern2.svg)no-repeat;
   background-position: bottom;
   background-size: 100%;
   z-index: -1;
   /* opacity: 0; */
}

#features-section::before {
   content: "";
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 100%;
   height: 40%;
   background: url(../assets/img/overlay.svg)no-repeat;
   background-position: bottom center;
   background-size: 101%;
   z-index: 1;
}

#home-section::after,
#home-section::before {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 200px;
   height: 200px;
   background: url(../assets/img/index/Square1.svg)no-repeat;
   background-position: center;
   background-size: 100%;
   z-index: 1;
}

#home-section::after {
   animation: fadeLeft 2s ease-in-out 0.5s forwards;
}

#home-section::before {
   top: 0;
   left: inherit;
   opacity: 0;
   right: 0;
   transform: scaleX(-1);
   animation: fadeRight 1s ease-in-out 0.2s forwards;
}

.credential {
   position: relative;
   display: flex;
   gap: 15px;
}

.credential li a i {
   font-size: 20px;
}

.site-nav .site-navigation .site-menu>li.cta-button-outline a {
   padding: 5px 10px;
   /* border: 1px solid rgba(0, 0, 0, 0.1); */
   color: #000000;
   border-radius: 30px;
}

.site-nav .site-navigation .site-menu>li.cta-button-outline a:hover {
   color: #000000;
   background: #ffffff;
   border-color: #000000;
}

.site-nav .site-navigation .site-menu>li.cta-button-outline.active a {
   color: #000000;
   background: #ffffff;
   border-color: #ffffff;
}

.site-nav .site-navigation .site-menu>li.cta-primary a {
   padding: 5px 22px;
   border: 1px solid transparent;
   color: #ffffff !important;
   background: #0172F5;
   border-radius: 30px;
}

.site-nav .site-navigation .site-menu>li.active>a {
   color: #ffffff;
}

.site-nav .site-navigation .site-menu .has-children {
   position: relative;
}

.site-nav .site-navigation .site-menu .has-children>a {
   position: relative;
   padding-right: 20px;
}

.site-nav .site-navigation .site-menu .has-children>a:before {
   position: absolute;
   content: "\e313";
   font-size: 14px;
   top: 50%;
   right: 0;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   font-family: 'icomoon';
}

.site-nav .site-navigation .site-menu .has-children .dropdown {
   visibility: hidden;
   opacity: 0;
   top: 100%;
   z-index: 999;
   position: absolute;
   text-align: left;
   -webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
   box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
   padding: 20px 0;
   margin-top: 20px;
   margin-left: 0px;
   background: #ffffff;
   -webkit-transition: 0.2s 0s;
   -o-transition: 0.2s 0s;
   transition: 0.2s 0s;
}

.site-nav .site-navigation .site-menu .has-children .dropdown a {
   font-size: 14px;
   text-transform: none;
   letter-spacing: normal;
   -webkit-transition: 0s all;
   -o-transition: 0s all;
   transition: 0s all;
   color: #000000;
}

.site-nav .site-navigation .site-menu .has-children .dropdown .active {
   color: #0172F5 !important;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li {
   list-style: none;
   padding: 0;
   margin: 0;
   min-width: 180px;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li>a {
   padding: 5px 20px;
   display: block;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li>a:hover {
   color: #0172F5;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li.active>a {
   color: #0172F5;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>a:before {
   content: "\e315";
   right: 20px;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown,
.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>ul {
   left: 100%;
   top: 0;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>.dropdown li a:hover,
.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children>ul li a:hover {
   color: #0172F5;
}

.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children:hover>a,
.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children:active>a,
.site-nav .site-navigation .site-menu .has-children .dropdown>li.has-children:focus>a {
   color: #0172F5;
}

.site-nav .site-navigation .site-menu .has-children:hover>a,
.site-nav .site-navigation .site-menu .has-children:focus>a,
.site-nav .site-navigation .site-menu .has-children:active>a {
   color: #ffffff;
}

.site-nav .site-navigation .site-menu .has-children:hover,
.site-nav .site-navigation .site-menu .has-children:focus,
.site-nav .site-navigation .site-menu .has-children:active {
   cursor: pointer;
}

.site-nav .site-navigation .site-menu .has-children:hover>.dropdown,
.site-nav .site-navigation .site-menu .has-children:focus>.dropdown,
.site-nav .site-navigation .site-menu .has-children:active>.dropdown {
   -webkit-transition-delay: 0s;
   -o-transition-delay: 0s;
   transition-delay: 0s;
   margin-top: 0px;
   visibility: visible;
   opacity: 1;
}

.site-nav.dark a {
   color: #000000;
}

.site-nav.dark .site-navigation .site-menu>li>a {
   color: rgba(0, 0, 0, 0.5);
}

.site-nav.dark .site-navigation .site-menu>li>a:hover {
   color: #000000;
}

.site-nav.dark .site-navigation .site-menu>li.active>a {
   color: #000000;
}

.site-nav.dark .site-navigation .site-menu>li.has-children.dropdown:hover>a,
.site-nav.dark .site-navigation .site-menu>li.has-children.dropdown:focus>a,
.site-nav.dark .site-navigation .site-menu>li.has-children.dropdown:active>a {
   color: #0172F5;
}

.site-nav.dark .site-navigation .site-menu>li.has-children:hover>a,
.site-nav.dark .site-navigation .site-menu>li.has-children:focus>a,
.site-nav.dark .site-navigation .site-menu>li.has-children:active>a {
   color: #000000;
}

.site-nav.scrolled {
   background-color: #ffffff;
   position: fixed;
   width: 100%;
   left: 0;
   right: 0;
   top: 0;
   margin-top: -130px;
   padding: 12px 0 !important;
   -webkit-box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.1);
   box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.1);
}

.site-nav.scrolled.awake {
   margin-top: 0px;
   -webkit-transition: .3s all ease-out;
   -o-transition: .3s all ease-out;
   transition: .3s all ease-out;
}

.site-nav.scrolled.sleep {
   -webkit-transition: .3s all ease-out;
   -o-transition: .3s all ease-out;
   transition: .3s all ease-out;
}

.site-nav.scrolled .site-navigation .site-menu li a {
   color: #000000;
}

.site-nav.scrolled .site-navigation .site-menu li a.active {
   color: #0172F5;
}

.site-mobile-menu-close {
   display: block;
   position: relative;
   height: 30px;
   width: 30px;
   z-index: 99;
   cursor: pointer;
   top: -20px;
}

.site-mobile-menu-close>span {
   cursor: pointer;
   display: block;
   position: absolute;
   height: 30px;
   width: 30px;
}

.site-mobile-menu-close>span:before,
.site-mobile-menu-close>span:after {
   position: absolute;
   content: "";
   width: 2px;
   height: 30px;
   background: #000000;
}

.site-mobile-menu-close>span:before {
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

.site-mobile-menu-close>span:after {
   -webkit-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
}

.site-mobile-menu {
   width: 300px;
   position: fixed;
   right: 0;
   z-index: 2000;
   padding-top: 20px;
   background: #ffffff;
   height: calc(100vh);
   -webkit-transform: translateX(100%);
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: 0.8s all cubic-bezier(0.23, 1, 0.32, 1);
   -o-transition: 0.8s all cubic-bezier(0.23, 1, 0.32, 1);
   transition: 0.8s all cubic-bezier(0.23, 1, 0.32, 1);
}

.offcanvas-menu .site-mobile-menu {
   -webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
   box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
   -webkit-transform: translateX(0%);
   -ms-transform: translateX(0%);
   transform: translateX(0%);
}

.site-mobile-menu .site-mobile-menu-header {
   width: 100%;
   float: left;
   padding-left: 20px;
   padding-right: 20px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
   float: right;
   margin-top: 8px;
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
   font-size: 30px;
   display: inline-block;
   padding-left: 10px;
   padding-right: 0px;
   line-height: 1;
   cursor: pointer;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.site-mobile-menu .site-mobile-menu-body {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   position: relative;
   padding: 0 20px 20px 20px;
   height: calc(100vh - 52px);
   padding-bottom: 150px;
}

.site-mobile-menu .site-nav-wrap {
   padding: 0;
   margin: 0;
   list-style: none;
   position: relative;
}

.site-mobile-menu .site-nav-wrap a {
   padding: 5px 20px;
   display: block;
   position: relative;
   color: #000000;
}

.site-mobile-menu .site-nav-wrap a:hover {
   color: #0172F5;
}

.site-mobile-menu .site-nav-wrap li {
   position: relative;
   display: block;
}

.site-mobile-menu .site-nav-wrap li>a.active {
   color: #0172F5;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
   position: absolute;
   right: 0px;
   top: 0px;
   z-index: 20;
   width: 36px;
   height: 36px;
   text-align: center;
   cursor: pointer;
   border-radius: 50%;
   border: 1px solid #f8f9fa;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
   font-size: 14px;
   z-index: 20;
   font-family: "icomoon";
   content: "\e313";
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%) rotate(-180deg);
   -ms-transform: translate(-50%, -50%) rotate(-180deg);
   transform: translate(-50%, -50%) rotate(-180deg);
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.site-mobile-menu .site-nav-wrap>li {
   display: block;
   position: relative;
   float: left;
   width: 100%;
}

.site-mobile-menu .site-nav-wrap>li>a {
   padding-left: 20px;
   font-size: 14px;
}

.site-mobile-menu .site-nav-wrap>li>ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

.site-mobile-menu .site-nav-wrap>li>ul>li {
   display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
   padding-left: 40px;
   font-size: 14px;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
   padding: 0;
   margin: 0;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li {
   display: block;
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
   font-size: 14px;
   padding-left: 60px;
}

/* Burger */
.burger {
   width: 28px;
   height: 32px;
   cursor: pointer;
   position: relative;
}

.burger:before,
.burger span,
.burger:after {
   width: 100%;
   height: 2px;
   display: block;
   background: #000;
   border-radius: 2px;
   position: absolute;
   opacity: 1;
}

.burger:before,
.burger:after {
   -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
   transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
   -o-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
   transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
   transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
   -webkit-transition: top 0.35s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.35s cubic-bezier(0.23, 1, 0.32, 1), background-color 1.15s cubic-bezier(0.86, 0, 0.07, 1);
   content: "";
}

.burger:before {
   top: 4px;
}

.burger span {
   top: 15px;
}

.burger:after {
   top: 26px;
}

/* Hover */
.burger:hover:before {
   top: 7px;
}

.burger:hover:after {
   top: 23px;
}

/* Click */
.burger.active span {
   opacity: 0;
}

.burger.active:before,
.burger.active:after {
   top: 40%;
}

.burger.active:before {
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5);
   /*for IE*/
}

.burger.active:after {
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-5);
   /*for IE*/
}

.burger:focus {
   outline: none;
}

.zohoMea-hero,
.zohoMea-hero>.container>.row {
   padding: 4rem 0;
}

@media (max-width: 991.98px) {
   .zohoMea-hero {
      text-align: center;
   }
}

.zohoMea-hero .hero-head {
   font-size: 65px;
   line-height: 1.1;
   font-weight: 800;
   color: #000000;
   font-family: var(--zf-semibold);
   margin-bottom: 25px;
}

.hero-head-title {
   font-weight: 800;
   color: #202020;
   font-family: var(--zf-semibold);
   margin-bottom: 25px;
}

/* @media (max-width: 991.98px) {
   .zohoMea-hero .hero-head {
      font-size: 50px;
   }
} */


.zohoMea-section {
   padding: 46px 0;
   position: relative;
}

@media (max-width: 991.98px) {
   .zohoMea-section {
      padding: 50px 0;
   }
}

.zohoMea-section .heading {
   font-size: 35px;
   color: #ffffff;
}

.zohoMea-section .heading strong {
   font-weight: 700;
}

@media (max-width: 991.98px) {
   .zohoMea-section .heading {
      font-size: 28px;
   }
}

.img-shadow {
   border: 10px solid #ffffff;
   -webkit-box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
   box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
}

.zohoMea-testimonial .pic {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 50px;
   flex: 0 0 50px;
}

.zohoMea-testimonial .pic img {
   border-radius: 50%;
}

.zohoMea-testimonial blockquote {
   font-style: italic;
   color: #000000;
}

.zohoMea-testimonial .highlight {
   display: inline;
   background: rgba(64, 123, 255, 0.07);
}

.zohoMea-testimonial .author {
   font-size: 14px;
}

.zohoMea-testimonial .author strong {
   font-weight: 400;
   color: #000000;
}

.highlight {
   display: inline;
   background: rgba(64, 123, 255, 0.07);
}

.service {
   margin-bottom: 20px;
}

.service .service-icon {
   font-size: 20px;
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 30%;
   position: relative;
   color: #ffffff;
}

.service .service-icon.color-1 {
   background-color: #ffffff;
   -webkit-box-shadow: 0 2px 10px 0 rgba(171, 171, 171, 0.3);
   box-shadow: 0 2px 10px 0 rgba(171, 171, 171, 0.3);
}

.service.slider-new-card .service-contents p {
   color: #4E647A !important;
}

.service .service-contents p {
   font-weight: normal;
   font-size: 16px;
   color: #c3c9d4b0;
   line-height: 1.7;
   font-family: var(--zf-regular);
   margin-bottom: 7.5px;
}

.service .service-contents.active p {
   color: white !important;
}

.service.slider-new-card .service-contents h3 {
   color: #000;
   font-size: 22px;
   font-weight: 550;
   margin-bottom: 10px;
   height: inherit;
   padding: 0;
   line-height: 1.4;
   position: relative;
}

.excerpt {
   position: relative;
}

.excerpt p {
   font-size: 18px;
   font-family: var(--zf-regular);
   line-height: 1.7;
}



.service .service-contents h3 {
   font-size: 25px;
   font-weight: 550;
   color: white;
   margin-bottom: 15px;
   padding: 15px 0px;
   font-family: var(--zf-semibold);
   position: relative;
   transition: ease all 0.5s;
}

.service .service-contents.active h3.active {
   width: 100%;
   padding: 15px 10px;

   border-left: 3.5px solid var(--Zoho-Red, #E42527);
   background: linear-gradient(90deg, rgba(228, 37, 39, 0.65) -14.85%, rgba(0, 0, 0, 0.00) 94.37%);
}

.bg-dark-blue {
   background-color: #01182D;
   color: white;
   position: relative;
   z-index: 0;
   overflow: hidden;
}

.map-pattern {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
   height: 100%;
   background-image: url(../assets/img/map-dot.svg);
   background-size: 85%;
   opacity: 0.75;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;
}

.bg-dark-blue::after {
   border-radius: 100%;
   content: '';
   position: absolute;
   height: 30%;
   width: 30%;
   right: -8%;
   top: 30%;
   opacity: 0.4;
   background: #0172F5;
   filter: blur(200px);
   z-index: -1;
}

.service.horizontal.slider-new-card .service-icon {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 50px;
   flex: 0 0 50px;
   margin-right: 30px;
   width: 50px;
   height: 50px;
   font-size: 16px;
   color: #2E2E2E;
   font-weight: 600;
   line-height: 50px;
   text-align: center;
   font-family: var(--zf-bold);
   box-shadow: 0px 8.292px 22.802px -6.219px rgba(46, 46, 46, 0.12), 0px 14.51px 66.333px -4.146px rgba(46, 46, 46, 0.12);
}

.service.horizontal .service-icon {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 60px;
   flex: 0 0 60px;
   margin-right: 30px;
   width: 60px;
   height: 60px;
   font-size: 20px;
   background-position: center !important;
   background-size: 50px !important;
   background-repeat: no-repeat !important;
}

.service.horizontal .service-icon.discovery {
   background: url(../assets/img/client/discovery.svg);
}

.service.horizontal .service-icon.develop {
   background: url(../assets/img/client/develop.svg);
}

.service.horizontal .service-icon.deliver {
   background: url(../assets/img/client/deliver.svg);
}

.service.link {
   padding: 20px;
   margin-bottom: 10px;
   border-radius: 7px;
   border: 3px solid transparent;
}

/* .service.link { */

.service.link .service-contents {
   color: #939393;
}

.service.project-slide-info {
   border-left: 3px solid white;
   padding: 0px 20px;
   margin-bottom: 50px;
   vertical-align: top;
}

.service.link .service-contents *:last-child {
   margin-bottom: 0;
}

.caption {
   border-radius: 50px;
   background: #0172F5;
   padding: 7.5px 15px 7.5px 33px;
   color: white;
   position: relative;
   margin-bottom: 15px;
   display: inline-block;
   font-size: 14px;
}

.caption::before {
   position: absolute;
   content: '';
   width: 20px;
   height: 20px;
   background: url(../assets/img/projects/power.svg) no-repeat;
   background-position: center;
   background-size: 15px;
   left: 8px;
   top: 8px;
}

.service.link:hover,
.service.link.active {
   background: #ffffff;
   border-radius: 15px;
   border: 3px solid var(--Stroke, #E9E9F7);
   background: linear-gradient(108deg, #E4F1FF -21.42%, var(--BG-Color---Sec-White, #F8F9FB) 72%);
   box-shadow: 0px 8.292px 22.802px -6.219px rgba(24, 39, 75, 0.06), 0px 14.51px 66.333px -4.146px rgba(24, 39, 75, 0.06);
}

.service.project-slide-info.active {
   border-left: 3px solid var(--Stroke, #CD8AFE);
}

.service.project-slide-info.active .service-contents h3 {
   color: #CD8AFE;
}

.service.project-slide-info .service-contents h3 {
   font-size: 28px;
   font-weight: 600;
   color: #4E647A;
   line-height: normal;
   height: inherit;
   margin: 0;
   padding: 0 !important;
   /* margin-bottom: 15px; */
}

.service.project-slide-info .service-contents p {
   font-size: 16px;
   line-height: 1.7;
   overflow: hidden;
   max-height: 0;
   margin-top: 15px;
   opacity: 0;
   padding: 0;
   visibility: hidden;
   font-family: var(--zf-regular);
   margin: 0;
   transition: max-height 0.4s ease, opacity 0.4s ease;
}

.service.project-slide-info.active .service-contents p {
   color: white;
   opacity: 1;
   margin-top: 20px;
   max-height: 200px;
   visibility: visible;
}

.service.link.active {
   position: relative;
   overflow: hidden;
   transform: scale(1.02);
}

.dis-dev-del {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.main-header {
   position: relative;
   display: block;
   margin: auto;
   text-align: center;
   margin-bottom: 50px;
   padding-top: 50px;
}

.main-header h2.heading {
   background: #01182D;
}

.main-header p {
   font-size: 35px;
}

.main-header h2 {
   font-size: 35px;
   font-weight: 700;
   display: inline-block;
   background: white;
   margin: 0;
   line-height: 1.5;
   font-family: var(--zf-regular);
   padding: 2px 10px;
}

.main-header h2 span {
   color: #0172F5;
   font-family: var(--zf-bold);
}

.main-header h2 span.yellow {
   color: #CD8AFE;
}

.main-header h2 span.highlight {
   color: #089949 !important;
   background: transparent;
}

.pattern-dark {
   z-index: 1;
   position: relative;
}

.pattern-dark::before {
   content: '';
   position: absolute;
   height: 20%;
   width: 100%;
   left: 0;
   top: 0%;
   background: url(../assets/img/top-pattern.svg)no-repeat;
   background-size: 102%;
   z-index: -1;
   background-position: top;
}

.pattern-dark::after {
   border-radius: 100%;
   content: '';
   position: absolute;
   height: 30%;
   width: 30%;
   left: -5%;
   top: 30%;
   opacity: 0.4;
   background: #089949;
   filter: blur(130px);
   z-index: -1;
}

.main-header::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) -1.52%, rgb(130 135 140 / 50%) 49.24%, rgba(255, 255, 255, 0) 100%);
   z-index: -1;
   opacity: 0;
   animation: fade 3s ease-in-out 4s forwards;
}

/* .service.link.active:after {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   top: 0;
   width: 4px;
   background: #0172F5;
} */

.news-item {
   background: #ffffff;
   /* padding: 30px; */
   position: relative;
   top: 0;
   -webkit-transition: .2s all ease;
   -o-transition: .2s all ease;
   transition: .2s all ease;
   border-radius: 14px;
   background: #ffffff;
   overflow: hidden;
   border: 2px solid #E9E9F7;
   background: #F8F9FB;
   box-shadow: 0px 8px 22px -6px rgba(1, 115, 245, 0.054), 0px 14px 64px -4px rgba(1, 115, 245, 0.085);
}

.news-item:hover,
.news-item:active,
.news-item:focus {
   top: -10px;
   /* -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.05);
   box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.05); */

   border-radius: 14px;
   border: 2px solid var(--Stroke-2, #E9E9F7);
   background: var(--BG-Color---Sec-White, #F8F9FB);
   box-shadow: 0px 8px 22px -6px rgba(1, 114, 245, 0.12), 0px 14px 64px -4px rgba(1, 114, 245, 0.12);
}

.project-sec-header.faq {
   color: #000 !important;
   margin-bottom: 50px;
}

.project-sec-header.faq h2 {
   color: #000 !important;

}

.green {
   color: #089949;
}

@media (max-width: 991.98px) {

   .news-item:hover,
   .news-item:active,
   .news-item:focus {
      top: 0px;
   }
}

.news-item .news-contents {
   padding: 20px;
}

.news-item .vcard .img-wrap {
   -webkit-box-flex: 0;
   -ms-flex: 0 0 50px;
   flex: 0 0 100%;
   margin-right: 0;
}

.news-item .vcard .img-wrap img {
   /* border-radius: 50%; */
}

.news-item .vcard .post-meta {
   line-height: 1.4;
}

.news-item .vcard .post-meta strong {
   font-weight: 400;
   display: block;
   font-weight: 700;
   color: #000000;
}

.news-item .vcard .post-meta span {
   color: #c6c6c6;
}

.news-item .news-contents .post-meta-2 {
   font-size: 13px;
   color: #c6c6c6;
   display: block;
   margin-bottom: 20px;
}

.news-item .news-contents h3 {
   line-height: 1.2;
}

.news-item .news-contents p {
   font-family: var(--zf-regular);
   font-size: 16px;
}

.news-item .news-contents h3 a {
   color: #000000;
   font-size: 20px;
   font-family: var(--zf-bold);
}

.news-item .news-contents h3 a .bx {
   margin-right: 10px;
   color: var(--blue-bg);
}

.news-item .news-contents h3 a:hover {
   color: #0172F5;
}



.read-more-arrow {
   position: relative;
   z-index: 2;
}

.read-more-arrow:after {
   position: absolute;
   right: -10px;
   top: 52%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   z-index: 1;
   width: 25px;
   height: 25px;
   content: "";
   background: #f8f9fa;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.read-more-arrow svg {
   color: #000000;
   font-size: 30px;
   z-index: 2;
   position: relative;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
   left: 0;
}

.read-more-arrow:hover:after {
   background: #0172F5;
}

.read-more-arrow:hover svg {
   left: 30px;
}

.owl-2-slider .owl-nav {
   display: none;
}

.owl-2-slider .owl-dots {
   position: absolute;
   margin-top: 20px;
}

@media (max-width: 991.98px) {
   .owl-2-slider .owl-dots {
      margin-top: 0px;
   }
}

.owl-single {
   position: relative;
}

.owl-single .number {
   border-radius: 50%;
   width: 50px;
   height: 50px;
   bottom: 20px;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
   line-height: 50px;
   text-align: center;
   display: inline-block;
   position: absolute;
   background: #0172F5;
   color: #ffffff;
   font-size: 12px;
   -webkit-box-shadow: 0 10px 20px -5px rgba(64, 123, 255, 0.4);
   box-shadow: 0 10px 20px -5px rgba(64, 123, 255, 0.4);
}

.owl-single.no-dots .owl-dots {
   display: none;
}

.cusotm-slider-nav {
   font-size: 24px;
   display: inline-block;
   position: relative;
   width: 40px;
   height: 40px;
   background: #ccc;
   color: #ffffff;
   border-radius: 4px;
}

.cusotm-slider-nav>span {
   position: absolute;
   top: 45%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.cusotm-slider-nav:hover {
   color: #ffffff;
   background: #0172F5;
}

.ul-links li {
   margin-bottom: 10px;
}

.ul-links li a {
   color: #000000;
}

.ul-links li a:hover {
   color: #0172F5;
}

.video-panel {
   display: block;
   position: relative;
}

.video-panel img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 99;
}

.video-panel:before {
   content: "";
   position: absolute;
   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;
   /* background: rgba(0, 0, 0, 0.1); */
   opacity: 0;
   visibility: hidden;
   -webkit-transition: .3s all ease;
   -o-transition: .3s all ease;
   transition: .3s all ease;
}

.video-panel .wrap-icon-play {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 55px;
   height: 55px;
   background: #ffffff;
   border-radius: 50%;
   animation: shadow-pulse 2s infinite;
   -webkit-transform: translate(-50%, -50%) !important;
   -ms-transform: translate(-50%, -50%) !important;
   transform: translate(-50%, -50%) !important;
   -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
   box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.5);
}

@keyframes shadow-pulse {
   0% {
      box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);
   }

   100% {
      box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
   }
}

.video-panel .wrap-icon-play>i {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   font-size: 40px;
}

.video-panel:hover:before {
   opacity: 1;
   visibility: visible;
}

.count-numbers .counter {
   color: #000000;
   font-size: 40px;
}

.count-numbers .caption-2 {
   text-transform: uppercase;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: .1rem;
}

.owl-single .owl-dots,
.owl-carousel .owl-dots {
   text-align: center;
   position: absolute;
   width: 100%;
   left: 50%;
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}

.owl-carousel .owl-dots {
   position: absolute;
   bottom: 5%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
}

.owl-single .owl-dots .owl-dot,
.owl-carousel .owl-dots .owl-dot {
   display: inline-block;
   margin: 5px;
}

.owl-single .owl-dots .owl-dot span,
.owl-carousel .owl-dots .owl-dot span {
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #D9D9D9;
   transition: ease 0.5s all;
}


.owl-single .owl-dots .owl-dot.active span,
.owl-carousel .owl-dots .owl-dot.active span {
   background: #CD8AFE;
   border-radius: 5px;
   width: 25px;
}

.owl-single.no-dots .owl-dots,
.owl-carousel.no-dots .owl-dots {
   display: none;
}

.owl-single .owl-nav {
   position: absolute;
   top: 50%;
   width: 100%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}

@media (max-width: 767.98px) {
   .owl-single .owl-nav {
      display: none;
   }
}

.owl-single .owl-nav .owl-prev,
.owl-single .owl-nav .owl-next {
   position: absolute;
   top: 0;
}

.owl-single .owl-nav .owl-prev span,
.owl-single .owl-nav .owl-next span {
   display: block;
   background: #ffffff;
   padding: 15px;
}

.owl-single .owl-nav .owl-prev {
   left: -30px;
}

.owl-single .owl-nav .owl-next {
   right: -30px;
}

.owl-single .owl-nav .owl-next>span {
   position: relative;
   -webkit-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
}

.ul-check li {
   position: relative;
   padding-left: 30px;
   margin-bottom: 10px;
}

.ul-check li:before {
   position: absolute;
   left: 0;
   top: -.2rem;
   content: "\e5ca";
   font-size: 20px;
   font-family: 'icomoon';
}

.slider-client {
   text-align: center;
}

.slider-client .client-head {
   margin-bottom: 12px;
   position: relative;
   font-family: var(--zf-bold);
}

.slider-client .client-head::after {
   content: '';
   position: absolute;
   top: 46%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: 2px;
   background: linear-gradient(90deg, rgb(255 255 255 / 0%) -1.52%, var(--Dark-Blue, rgb(1 24 45 / 25%)) 49.24%, rgb(255 255 255 / 0%) 100%);
   z-index: -1;
   opacity: 0;
   animation: fade 3s ease-in-out 4s forwards;
}

.slider-client .client-head h2 {
   font-size: 35px;
   font-weight: 600;
   display: inline-block;
   background: white;
   padding: 2px 10px;
   font-family: var(--zf-regular);
}

.slider-client h2 span {
   color: #E42527;
   font-family: var(--zf-semibold);

}

.ul-check.primary li:before {
   color: #0172F5;
}

.ul-check.white li:before {
   color: #ffffff;
}

.site-footer {
   background: linear-gradient(180deg, var(--Dark-Blue, #01182D) 55.66%, var(--Blue-cool, #0172F5) 241.93%);
   font-size: 14px;
   color: #ffffff;
   padding: 70px 0 10px;
   position: relative;
   margin-top: 250px;
}

.site-footer::after {
   content: '';
   position: absolute;
   height: 100%;
   width: 244px;
   background: url(../assets/img/index/MEA_Dotted_map.svg)no-repeat;
   background-size: 100% 100%;
   background-position: center;
   z-index: 0;
   top: 0;
   right: -100px;
}

.site-footer a {
   color: #0172F5;
   position: relative;
   display: inline-block;
}

.site-footer .btn:before {
   display: none;
}

.site-footer .widget {
   margin-bottom: 25px;
   display: block;
   position: relative;
   z-index: 1;
}

.site-footer .widget a.footer-logo {
   margin-bottom: 15px;

}

.site-footer .widget a img {
   width: 200px;
   height: auto;
   margin: auto;
   margin-bottom: -20px;
}

.site-footer .widget h3 {
   font-size: 16px;
   color: #ffffff;
   margin-bottom: 30px;
}

.list-unstyled.social {
   display: flex;
   flex-direction: row;
   gap: 10px;
}

.site-footer .widget .links.number p {
   margin-bottom: 5px;
}

.site-footer .widget .links.number a {
   display: block;
   width: 100%;
   text-decoration: underline;
}

.site-footer .widget .links li {
   margin-bottom: 10px;
}

.site-footer .widget .links li a {
   color: #bfbfbf;
}

.site-footer .social li {
   display: inline-block;
}

.site-footer .social li a {
   display: inline-block;
   width: 45px;
   height: 45px;
   position: relative;
   background: #022f5c;
   border-radius: 50%;
   color: #ffffff;
   font-size: 25px;
}

.site-footer .social li a span.twitter {
   background: url(../assets/img/twitter.svg) no-repeat;
   height: 22px;
   width: 22px;
   background-size: contain;
   background-position: center;
}

.site-footer .social li a:before {
   display: none;
}

.site-footer .social li a>span {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.site-footer .social li a:hover {
   background: #023b74;
   color: #ffffff;
}

.getstart-card {
   background: #0172F5;
   padding: 50px;
   border-radius: 20px;
   text-align: center;
   color: white;
   display: flex;
   flex-direction: column;
   gap: 15px;
   justify-content: center;
   margin-top: -215px;
   align-items: center;
   position: relative;
   overflow: hidden;
   z-index: 1;
}

.imge-card {
   position: relative;
   height: auto;
   width: 100%;
}

.getstart-card::before,
.getstart-card::after {
   content: '';
   position: absolute;
   height: 100%;
   width: 30%;
   left: -5px;
   background: url(../assets/img/dotted.svg)no-repeat;
   background-position: center;
   background-size: cover;
   top: -5px;
   z-index: -1;
}

.getstart-card::after {
   transform: rotate(180deg);
   z-index: -1;
   right: -5px;
   bottom: -5px;
   top: inherit;
   left: inherit;
}

.getstart-card h2 {
   font-size: 35px;
   font-weight: bold;
   font-family: var(--zf-semibold);
   color: white;
}

.getstart-card p {
   font-size: 16px;
   width: 80%;
   text-align: center;
   font-family: var(--zf-regular);
   margin: auto;
   line-height: 1.7;
}

.cta-btn {
   background: #f31e2b;
   color: white !important;
   padding: 12px 25px;
   /* width: fit-content; */
   font-size: 16px;
   border-radius: 1px;
   gap: 10px;
   vertical-align: middle;
   display: inline-flex !important;
   align-items: center;
   text-transform: capitalize;
}

.cta-btn .bx {
   font-size: 22px;
}

.slider-bg {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 70.46%, #B2CBFF 109.31%);
}

.slider-bg2 {
   background: #01182D;
   z-index: 0;
   position: relative;
}

/* .slider-bg2::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   opacity: 0.75;
   background: url(../assets/img/projects/slider-pattern.png)no-repeat;
   background-size: 105%;
   background-position: center;
} */


.project-slider-bg {
   background: #01182D;
   position: relative;
   padding-bottom: 150px;
   margin-bottom: 300px;
   z-index: 0;
   /* overflow: hidden; */
}

.project-slider-bg::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50%;
   z-index: -1;
   background: url(../assets/img/projects/dotted-double.svg)no-repeat;
   background-size: 100%;
   background-position: right bottom;

}

.project-sec-header {
   /* position: relative;
   text-align: center;
   margin: auto;
   display: block; */
    position: relative;
    text-align: center;
    margin: auto;
    display: block;
    margin-top: 20px !important;
    margin-bottom: -30px !important;
}

.project-sec-header p {
   color: #E9E9F7;
   font-size: 16px;
   margin: auto;
   display: block;
   width: 75%;
   line-height: 1.6;
   font-family: var(--zf-regular);
   margin-bottom: 50px;
}

.project-sec-header h2 {
   font-size: 35px;
   margin-bottom: -35px;
   font-weight: 600;
   color: white;
   font-family: var(--zf-bold);
}

.project-sec-header h2 .yellow {
   color: #CD8AFE;
}

.header-notification {
   background: #0172F5 url(../assets/img/half-circle.svg)no-repeat;
   padding: 15px;
   text-align: center;
   width: 100%;
   color: white;
   display: block;
   margin: auto;
   background-position: 0 50px;
   background-size: 100%;
   position: relative;
   overflow: hidden;
}

.header-notification::after,
.header-notification::before {
   content: '';
   position: absolute;
   background: url(../assets/img/header-pattern.svg) no-repeat;
   height: 160px;
   width: 50px;
   background-position: center;
   top: -54px;
   left: 55px;
   transform: rotate(50deg);
}

.header-notification::after {
   left: inherit;
   right: 55px;
   transform: rotate(-50deg);
}

.header-notification a {
   color: white;
}




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

.steps-list li {
   border-bottom: 1px solid #1c3149;
   padding: 25px 0;
}

.step-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 25px;
   position: relative;
}

.step-content .infos {
   flex: 1;
}

.btn-white {
   background: white;
   color: black;
   font-family: var(--zf-semibold);
   margin-top: 20px;
}

.btn-white:hover {
   background: white !important;
   color: black;
}

.step-content h3 {
   font-size: 20px;
   font-weight: 700;
   margin: 0 0 8px;
   color: white;
   font-family: var(--zf-bold);
}

.step-content p {
   font-size: 15px;
   color: #ccc;
   margin: 0;
   font-family: var(--zf-regular);
}

.step-icon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   font-size: 20px;
   background-color: white;
   position: relative;
}

/* Slider */

.slick-slide {
   margin: 0px 15px;
   background: rgb(241, 241, 241);
   border: 1px solid rgb(243, 243, 243);
   border-radius: 5px;
   overflow: hidden;
}

.slick-slide img {
   width: 100%;
   height: 100px;
   border: 0px;
   object-fit: cover;
}

.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;
}

/* slider close  */
/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-carousel,
.owl-carousel .owl-item {
   -webkit-tap-highlight-color: transparent;
   position: relative
}

.owl-carousel {
   display: none;
   width: 100%;
   z-index: 1
}

.owl-carousel .owl-stage {
   position: relative;
   -ms-touch-action: pan-Y;
   -moz-backface-visibility: hidden
}

.owl-carousel .owl-stage:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0
}

.owl-carousel .owl-stage-outer {
   position: relative;
   overflow: hidden;
   /* overflow-x: hidden;
    overflow-y: visible; */
   -webkit-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0)
}

.owl-carousel .owl-item {
   min-height: 1px;
   float: left;
   -webkit-backface-visibility: hidden;
   -webkit-touch-callout: none
}

.owl-carousel .owl-item img {
   display: block;
   width: 100%
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
   display: none
}

.owl-carousel.owl-loaded {
   display: block
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
   cursor: pointer;
   cursor: hand;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

.owl-carousel.owl-loading {
   opacity: 0;
   display: block
}

.owl-carousel.owl-hidden {
   opacity: 0
}

.owl-carousel.owl-refresh .owl-item {
   visibility: hidden
}

.owl-carousel.owl-drag .owl-item {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none
}

.owl-carousel.owl-grab {
   cursor: move;
   cursor: grab
}

.owl-carousel.owl-rtl {
   direction: rtl
}

.owl-carousel.owl-rtl .owl-item {
   float: right
}

.owl-carousel .animated {
   animation-duration: 1s;
   animation-fill-mode: both
}

.owl-carousel .owl-animated-in {
   z-index: 0
}

.owl-carousel .owl-animated-out {
   z-index: 1
}

.owl-carousel .fadeOut {
   animation-name: fadeOut
}

@keyframes fadeOut {
   0% {
      opacity: 1
   }

   100% {
      opacity: 0
   }
}

.owl-height {
   transition: height .5s ease-in-out
}

.owl-carousel .owl-item .owl-lazy {
   opacity: 0;
   transition: opacity .4s ease
}

.owl-carousel .owl-item img.owl-lazy {
   transform-style: preserve-3d
}

.owl-carousel .owl-video-wrapper {
   position: relative;
   height: 100%;
   background: #000
}

.owl-carousel .owl-video-play-icon {
   position: absolute;
   height: 80px;
   width: 80px;
   left: 50%;
   top: 50%;
   margin-left: -40px;
   margin-top: -40px;
   background: url(owl.video.play.png) no-repeat;
   cursor: pointer;
   z-index: 1;
   -webkit-backface-visibility: hidden;
   transition: transform .1s ease
}

.owl-carousel .owl-video-play-icon:hover {
   -ms-transform: scale(1.3, 1.3);
   transform: scale(1.3, 1.3)
}

.owl-carousel .owl-video-playing .owl-video-play-icon,
.owl-carousel .owl-video-playing .owl-video-tn {
   display: none
}

.owl-carousel .owl-video-tn {
   opacity: 0;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: contain;
   transition: opacity .4s ease
}

.owl-carousel .owl-video-frame {
   position: relative;
   z-index: 1;
   height: 100%;
   width: 100%
}

/* carousel close */
.step-icon.white {
   background-color: white;
   color: #005bdb;
}

.cta-button-group {
   display: flex !important;
   gap: 10px;
}

.cta-button-group button.cta-login {
   background-color: #005bdb;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 1px;
   cursor: pointer;
   font-size: 16px;
   transition: background-color 0.3s ease;

}

.cta-button-group button {
   outline: none;
   border: none;
   background: white;
   padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
}

.cta-button-group button .bx {
   font-size: 25px;
}

header {
   background: white;
   width: 100%;
   position: relative;
   box-sizing: border-box;
}




.custom-accordion {
   max-width: 100%;
   margin: 0 auto;
}

.custom-accordion .accordion-item {
   background: #fff;
   border-radius: 16px;
   margin: 12px 0;
   overflow: hidden;
   transition: all 0.3s ease;

   border-radius: 15px;
   border: 1px solid var(--Stroke-2, #E9E9F7);
   background: var(--Colors-Neutrals-White, #FFF);
   transition: all 0.3s ease;
}

.custom-accordion .accordion-header {
   width: 100%;
   background: transparent;
   border: none;
   outline: none;
   display: flex;
   justify-content: space-between;
   padding: 24px;
   font-size: 18px;
   font-weight: 550;
   color: #2E2E2E;
   cursor: pointer;
   font-family: var(--zf-semibold);
   text-align: left;
}

.custom-accordion .accordion-header:focus {
   border: none;
   outline: none;

}

.custom-accordion .accordion-item .accordion-header .icon {
   transform: rotate(0deg);
   transition: transform 0.3s ease;
   background: url(../assets/img/projects/icon.svg)no-repeat;
   height: 25px;
   width: 25px;
   background-size: 25px;
   background-position: center;
   border-radius: 50%;
   transform-origin: center;
}

.custom-accordion .accordion-item.active {
   border: 1px solid var(--Colors-Neutrals-Neutral-400, #D9DBE9);
   background: var(--Colors-Neutrals-White, #FFF);
   box-shadow: 0px 5px 15px 0px rgba(8, 153, 73, 0.15);

}

.custom-accordion .accordion-item.active .accordion-header .icon {
   transform: rotate(360deg);
   transition: transform 0.5s ease;
   background: url(../assets/img/projects/icon-active.svg)no-repeat;
   height: 25px;
   width: 25px;
   background-size: 25px;
   background-position: center;
   border-radius: 50%;
   transform-origin: center;
}

.custom-accordion .accordion-body p {
   font-size: 16px;
   font-family: var(--zf-regular);
   color: #4E647A;
   width: 80%;
}

.custom-accordion .accordion-body {
   padding: 0 24px 20px;
   display: none;
   font-size: 16px;
   color: #4a4a4a;

   max-height: 0;
   overflow: hidden;
   transition: max-height 0.4s ease, padding 0.4s ease;
}

.custom-accordion .accordion-item.active .accordion-body {
   display: block;
   max-height: 500px;
   padding: 0 24px 20px;
}

.project-hero {
   background: #0172F5;
   z-index: 0;
   position: relative;
   /* padding: 125px 0 100px; */
}

.project-hero::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(../assets/img/projects/patter-dot.svg)no-repeat;
   background-size: 100%;
   background-position: center;
   z-index: -1;
}

.project-hero::before {
   content: "";
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: 70%;
   background: url(../assets/img/projects/hero-pattern.svg)no-repeat;
   background-size: 100%;
   background-position: bottom;
   z-index: -1;
}

.project-banners {
   z-index: 0;
   position: relative;
}

.project-banners::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(../assets/img/projects/line-pattern.svg)no-repeat;
   background-size: 100%;
   background-position: center;
   z-index: -1;
}



.grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
   gap: 20px;
   max-width: 100%;
   margin: auto;
}

.feature-card {
   /* background: #F8F9FB; */
   background: #ffffff;
   border-radius: 15px;
   padding: 24px;
   transition: transform 0.3s ease;
   margin-bottom: 20px;

   border: 2px solid var(--Stroke-2, #E9E9F7);
}

.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
   border: 2px solid #0070f3;

}

.feature-card h3 {
   margin-top: 0;
   font-size: 18px;
   font-weight: 600;
   color: #2E2E2E;
}

.feature-card.bg-primary h3,
.feature-card.bg-primary p {
   color: #fff;
}

.feature-card p {
   margin: 10px 0 0;
   font-size: 14px;
   color: #4E647A;
   line-height: 1.7;

}

.feature-card img {
   max-width: 100%;
   height: auto;
   display: block;
   margin-top: 16px;
   border-radius: 8px;
}

.feature-card .tags {
   display: flex;
   gap: 10px;
   margin-top: 16px;
}

.feature-card .tag {
   background: #eef2f8;
   color: #333;
   padding: 6px 10px;
   border-radius: 6px;
   font-size: 13px;
}

.feature-card .progress-bar {
   background: #eef2f8;
   border-radius: 10px;
   height: 8px;
   margin-top: 8px;
   overflow: hidden;
}

.feature-card .progress-fill {
   background: #0070f3;
   height: 100%;
   width: 75%;
}

.feature-card.blue {
   background: linear-gradient(to right, #0070f3, #0099ff);
   color: #fff;
}

.feature-card.blue h3,
.feature-card.blue p {
   color: #fff;
}

/* slider animation css */

.section {
   position: relative;
   width: calc(min(90rem, 90%));
   margin: 0 auto;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.swiper-container {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: fit-content;
}

.swiper {
   width: 100%;
   padding: 60px 0 95px 0;
}

.swiper-slide {
   width: 10rem;
   height: 22rem;
   display: flex;
   flex-direction: column;
   align-items: self-start;
   background: #0575e6;
   position: relative;
   border-radius: 12px;
   box-shadow: -1px 5px 15px #0000001f;
}

.swiper-button-prev,
.swiper-button-next {
   width: 50px;
   height: 50px;
}


.swiper-button-group {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translate(-50%, 30px);
}


.project-slider-bg::before {
   content: '';
   position: absolute;
   height: 20%;
   width: 100%;
   left: 0;
   top: 0%;
   background: url(../assets/img/top-pattern.svg)no-repeat;
   background-size: cover;
   z-index: -1;
   background-position: top;
}

.slider-bg2::before {
   content: '';
   position: absolute;
   height: 20%;
   width: 100%;
   left: 0;
   top: 0%;
   background: url(../assets/img/top-pattern.svg)no-repeat;
   background-size: 105%;
   z-index: -1;
   background-position: top;
}

.project-slider-bg .circle {
   position: absolute;
   height: 80%;
   width: 80%;
   opacity: 0.25;
   border-radius: 0 0 100% 100%;
   border: 50px solid #2388FF;
   border-top: none;
   top: -0%;
   left: 50%;
   transform: translate(-50%, 0%);
   box-sizing: border-box;
   mix-blend-mode: plus-lighter;
   filter: blur(85px);
}

.cta-primary {
   background-color: var(--blue-bg);
   color: var(--white);
   border-radius: 1px;
   gap: 10px;
   vertical-align: middle;
   display: inline-flex;
   align-items: center;
}

.cta-primary:hover {
   color: white !important;
   background: #005bdb;
}

.cta-primary .bx {
   font-size: 22px;
}

/* slider vertical  */
@-webkit-keyframes shrink {
   0% {
      transform: scale(0.9);
   }

   100% {
      transform: scale(0.9);
      color: grey;

   }
}

@keyframes shrink {
   0% {
      transform: scale(0.9);


   }

   100% {
      transform: scale(0.9);
   }
}

@-webkit-keyframes grow {
   0% {
      transform: scale(0.9);
      filter: blur(0px);
   }

   100% {
      transform: scale(1);
      filter: blur(0px);
   }
}

@keyframes grow {
   0% {
      transform: scale(0.9);
      filter: blur(0px);
   }

   100% {
      transform: scale(1);
      filter: blur(0px);
   }
}

.animate-slide {
   transform: translate3d(0, 0, 0);
   perspective: 1000;
   filter: blur(0);
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   transform-origin: center left;
   filter: blur(1.5px);

}

.animate--shrink,
.hero__title .slick-current>div {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-name: shrink;
   animation-name: shrink;
   -webkit-animation-timing-function: "linear";
   animation-timing-function: "linear";

}

.animate--expand,
.no-js .hero__title .slick-dupe:nth-child(2)>div,
.hero__title .slick-current+.slick-slide>div {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-timing-function: "linear";
   animation-timing-function: "linear";
   -webkit-animation-name: grow;
   animation-name: grow;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

   /* box-shadow: 0 8.292px 22.802px -6.219px rgba(24, 39, 75, 0.06), 0 14.51px 66.333px -4.146px rgba(24, 39, 75, 0.06); */
}

/* Slider */
.slick-slider {
   position: relative;
   display: block;
   box-sizing: border-box;
   touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   touch-action: pan-y;
   tap-highlight-color: transparent;
   padding-top: 40px;
}

.slick-list {
   position: relative;
   overflow: hidden;
   display: block;
   margin: 0;
   padding: 0;
}


.slick-slide {
   float: left;
   height: 100%;
   min-height: 1px;
   display: none;
}

[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: 0;
   outline: none;
}

.slick-vertical .slick-slide::-moz-selection {
   outline: none !important;
   border: 0 !important;
   box-shadow: none;
}

.slick-vertical .slick-slide:focus,
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide::selection {
   outline: none !important;
   border: 0 !important;
   box-shadow: none;
}

.slick-arrow.slick-hidden {
   display: none;
}

.slick-current {
   position: relative;
}

.hero__title {
   padding: 50px 0;
}

.hero__title .slick-slide {
   padding: 10px 0;
}

.hero__title [aria-hidden] {
   transition: 1s;
}

.hero__title .slick-current>span {
   box-sizing: border-box;
   display: block;
}

.no-js .hero__title .slick-dupe:nth-child(2)>div {
   padding: 1em;
}

.hero__title-misc {
   display: block;
   font-size: 24px;
   font-weight: bold;
   color: grey;
}

.slider-card {
   border-radius: 15px;
   border: 2.5px solid #E9E9F7;
   transform: scale(0.9);
   padding: 25px;
   margin-left: 25px;
   background: linear-gradient(108deg, #E4F1FF -21.42%, var(--BG-Color---Sec-White, #F8F9FB) 72%);
}


.slider-card .service-icon {
   font-size: 20px;
   display: inline-block;
   width: 50px;
   height: 50px;
   border-radius: 30%;
   background: rgb(255, 255, 255);
   text-align: center;
   line-height: 50px;
   border: 2.5px solid rgba(233, 233, 247, 1);
   position: relative;
   color: #000000;
   box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
}



.slider-card .slider-head {
   display: flex;
   gap: 20px;
   margin-bottom: 15px;
   align-items: center;
   font-family: 'Zoho_Puvi_Bold' !important;
}

.slider-card p {
   color: #4E647A !important;
   font-family: 'Zoho_Puvi_Regular' !important;
}

.slider-card p {
   font-weight: normal;
   font-size: 16px;
   color: #c3c9d4b0;
   line-height: 1.6;
   margin: 0;
}

.slider-card h3 {
   color: rgb(0, 0, 0);
   font-size: 22px;
   font-weight: 550;
   margin: 0;
   margin-bottom: 10px;
   height: inherit;
   padding: 0;
   line-height: 1.4;
   position: relative;
}

.custom-nav {
   display: flex;
   flex-direction: column;
   position: absolute;
   gap: 25px;
   top: 50%;
   right: -20%;
   transform: translate(-50%, -50%);
}

.circle-wrapper::before,
.circle-wrapper::after {
   border: 2.5px solid #e9e9f7 !important
}

.center-circle::before {
   border: 1.5px solid #e9e9f7;
}

.prev-btn,
.next-btn {
   background: rgb(255, 255, 255) !important;
   height: 50px;
   width: 50px;
   line-height: 45px;
   border-radius: 50%;
   justify-content: center;
   display: flex;
   cursor: pointer;
   align-items: center;
   text-align: center;
   transition: ease 0.65s all;
   border: 1.5px solid rgba(233, 233, 247, 1);
}

.prev-btn:hover,
.next-btn:hover {
   box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
   border: 1.5px solid #d2d2e1;

}

.prev-btn svg,
.next-btn svg {
   height: 25px;
   width: 25px;
   object-fit: contain;
}

.vertical-slider-contianer {
   position: relative;
}





.site-footer {
   background: linear-gradient(180deg, var(--Dark-Blue, #01182D) 55.66%, var(--Blue-cool, #0172F5) 241.93%);
   font-size: 14px;
   color: #ffffff;
   padding: 70px 0 100px !important;
   position: relative;
   margin-top: 0px;
   overflow: hidden;
}

.site-footer::after {
   content: '';
   position: absolute;
   height: 100%;
   width: 300px;
   background: url(../assets/img/index/MEA_Dotted_map.svg)no-repeat;
   background-size: 100% 100%;
   background-position: center;
   z-index: 0;
   top: -30px;
   right: -100px;
}
.site-footer a {
   color: #0172F5;
   position: relative;
   display: inline-block;
}

.site-footer .btn:before {
   display: none;
}

.site-footer .widget {
   margin-bottom: 25px;
   display: block;
   position: relative;
   z-index: 1;
}
.site-footer .widget h2{
   color:white;
   font-family: var(--zf-bold);
}
.site-footer .widget p{
   font-size: 17px;
   color: #ffffff;
   line-height: 1.8;
   opacity: 0.8;
   font-family: var(--zf-regular);
   width: 90%;
}
.site-footer .footer-bottom{
width: 100%;
position: absolute;
display: block;
padding: 10px;
background: #0172f5;
text-align: center;
bottom: 0;
left: 0;
z-index: 9;
}
.site-footer .footer-bottom p{
   margin: 0;
   padding: 0;
   line-height: normal;
   }

.site-footer .widget a.footer-logo {
   margin-bottom: 15px;

}

.site-footer .widget a img {
   width: 200px;
   height: auto;
   margin: auto;
   margin-bottom: -20px;
}

.site-footer .widget h3 {
   font-size: 16px;
   color: #ffffff;
   margin-bottom: 30px;
}

.list-unstyled.social {
   display: flex;
   flex-direction: row;
   gap: 10px;
}

.site-footer .widget .links.number p {
   margin-bottom: 5px;
}

.site-footer .widget .links.number a {
   display: block;
   width: 100%;
   text-decoration: underline;
}

.site-footer .widget .links li {
   margin-bottom: 10px;
}

.site-footer .widget .links li a {
   color: #bfbfbf;
}

.site-footer .social li {
   display: inline-block;
}

.site-footer .social li a {
   display: inline-block;
   width: 45px;
   height: 45px;
   position: relative;
   background: #022f5c;
   border-radius: 50%;
   color: #ffffff;
   font-size: 25px;
}

.site-footer .social li a span.twitter {
   background: url(../img/twitter.svg) no-repeat;
   height: 22px;
   width: 22px;
   background-size: contain;
   background-position: center;
}

.site-footer .social li a:before {
   display: none;
}

.site-footer .social li a>span {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.site-footer .social li a:hover {
   background: #023b74;
   color: #ffffff;
}


.slick-slide {
 margin: 0px 15px;
/* background: rgb(241, 241, 241); */
background:transparent !important;
/* border: 1px solid rgb(243, 243, 243); */
border-radius: 5px;
overflow: hidden;
}