body {
     margin: 0;
     font-family: 'Inter', sans-serif;
 }

 .navbar {
     padding: 0;
     align-items: stretch;
 }

 .custom-navbar {
     background: #000;
     padding: 0px 0px 0px 25px;
 }

 .navbar-brand {
     padding: 0px;
 }

 .navbar-brand img {
     width: 140px;
     height: 40px;
 }

 .navbar-nav {
     padding-right: 30px;
 }

 .nav-link {
     color: #fff;
     font-weight: 500;
     margin-left: 30px;
     font-size: 16px;
     font-family: 'Inter', sans-serif;
 }

 .nav-link:hover {
     color: #fff;
 }

 .get-btn1 {
     background: #081a3e;
     display: flex;
     align-items: center;
     padding: 0 25px;
 }

 .get-btn {
     background: transparent;
     color: #fff;
     padding: 20px 0;
     font-weight: 800;
     border: none;
     border-radius: 0;
 }

 .get-btn:hover {
     color: #fff;
 }

 .hero {
     background-image: url('images/hreobg.png');
     height: 90vh;
     background-position: center;
     background-size: cover;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .hero-head h1 {
     color: white;
     font-size: 60px;
     text-align: center;
     max-width: 56rem;
     font-weight: 800;
     margin-bottom: 1.5rem;
 }

 .hero-head p {
     color: white;
     font-size: 18px;
     font-weight: 100 !important;
     max-width: 48rem;
     text-align: center;
 }

 .hero-head p b {
     color: white;
     font-weight: 500;
 }

 .scroll {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .fa-chevron-down {
     color: white;
     position: absolute;
     bottom: 77px;
     cursor: pointer;
 }

 .client-slider {
     background: #fff;
     padding: 40px 0;
 }

 .slick-track {
     display: flex !important;
     align-items: center;
 }

 .logo-item {
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .logo-item img {
     color: transparent;
     width: 8rem;
     margin: auto;
     opacity: .9;
     transition: .3s;
     vertical-align: center;
 }

 .products {
     background-color: #000;
     padding: 24px 10px 10px 10px;

 }

 .product-head {
     padding: 32px 0 0 0;
     color: white;
     max-width: 100%;
 }

 .product-head h2 {
     font-size: 48px;
     line-height: 1.5;
     font-weight: 800;
     padding-bottom: 32px;
     color: #fff;
 }

 .product-head h2 span {
     font-style: italic;
 }

 .product-head p {
     color: #fff;
     font-size: 16px;
     line-height: 1.5;
     padding-bottom: 48px;
 }

 .bg-pro {
     padding-left: 4rem;
     padding-right: 4rem;
     gap: 4rem;
     /* display: flex; */
     align-items: flex-end;
     margin: auto;
     position: relative;
     background-color: #ebf2fc;
 }

 .shape {
     background-color: black;
     width: 2.5rem;
     height: 2.5rem;
     margin: auto;
     top: -20px;
     right: 0;
     left: -61%;
     position: absolute;
     transform: rotate(45deg);
 }

 .shape1 {
     background-color: black;
     width: 2.5rem;
     height: 2.5rem;
     margin: auto;
     top: -20px;
     right: 0;
     left: 60%;
     position: absolute;
     transform: rotate(45deg);
 }

 .bg-pro img.mobile {

     width: 100%;
     height: 100%;
     color: transparent;
     padding-top: 4rem;
     max-width: 100%;
     display: block;
     vertical-align: middle;
 }

 .pro-text {
     padding-left: 48px;
 }

 .pro-logo {
     padding-bottom: 3rem;
     display: flex;
     align-items: center;

     gap: 1.25rem;
     padding-top: 4rem;

 }

 .pro-logo img {
     width: 4%;
 }

 .pro-logo p {
     font-size: 48px;
     margin-bottom: 0px;
     font-weight: 800;
     text-transform: uppercase;
     color: black;
 }

 .pro-desc p {
     color: rgba(0, 0, 0, .8);
     padding-bottom: 44px;
     margin: 0px;

 }

 .pdf {
     padding-bottom: 40px;
 }

 .pdf button {
     text-decoration-line: underline;
     font-weight: 800;
     font-size: 1rem;
     line-height: 1.5rem;
     cursor: pointer;
     border: none;
     background-color: transparent;
     background-image: none;
 }

 .demo {
     padding-bottom: 2.5rem;
 }

 .demo button {
     color: white;
     padding-top: .5rem;
     padding-bottom: .5rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
     background-color: black;
     gap: .5rem;
     display: flex;
     align-items: center;
     cursor: pointer;
     border: none;

 }

 .demo button img {
     max-width: 100%;
     height: auto;
     display: block;
     vertical-align: middle;
 }

 .demo button span {
     font-size: 1rem;
     line-height: 1.5rem;

 }

 .demo p {
     color: rgba(0, 0, 0, .5);
     font-style: italic;
     font-size: .875rem;
     line-height: 1.25rem;
     text-align: start;
     padding-top: .5rem;
     margin: 0;
 }

 .app {
     padding-bottom: 4rem;
     gap: 1rem;
     display: flex;
 }

 .app img {
     max-width: 100%;
     height: auto;
     display: block;
     vertical-align: middle;
 }

 .Bizgrab {
     padding-top: 64px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .Bizgrab h2 {
     line-height: 1.5;
     font-size: 1.875rem;
     color: #fff;
     padding-bottom: 1.5rem;
     max-width: 70rem;
     color: #fff;
     font-weight: 800;
 }

 .Bizgrab p {
     color: #fff;
     font-size: 1rem;
     line-height: 1.5rem;
     padding-bottom: 4rem;
 }

 .pro-text1 {
     text-align: end;
     padding-right: 48px;
     padding-left: 0px;
     display: flex;
     flex-direction: column;
     align-items: end;
 }

 .pro-text1 img.big {
     background-color: rgb(0, 146, 69);
     border-radius: .375rem;
     width: 4rem;
     height: 4rem;
 }

 .demo1 {
     display: flex;
     flex-direction: column;
     align-items: end;
 }

 .demo1 button {
     background-color: rgb(0, 146, 69);
 }

 .services {
     padding-top: 4rem;
     padding-bottom: 4rem;
 }

 .serv-head h2 {
     font-size: 36px;
     line-height: 1;
     margin-bottom: 40px;
     color: #081a3e;
     text-align: center;
     font-weight: 800;
 }

 .serv {
     padding: 16px;
     cursor: pointer;
     border: 4px solid #081a3e;
 }

 .serv h3 {
     font-weight: 800;
     font-size: 1.25rem;
     line-height: 1.75rem;
     margin-top: .5rem;
     margin-bottom: .5rem;
     color: rgb(23, 25, 26);
 }

 .serv p {
     color: rgb(102, 102, 102);
 }

 .serv span {
     color: #0f7dc0;
     cursor: pointer;
 }

 .serv {
     transition: all 0.5s ease;
 }

 .serv:hover {
     background-color: #efefef;
     transform: scale(1.05);
 }

 .why-us {
     background-color: #081a3e;
     padding-top: 4rem;
     padding-bottom: 4rem;
 }

 .why-head {
     color: white;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .why-head h2 {
     font-size: 36px;
     line-height: 1;
     font-weight: 800;
     margin-bottom: 1.25rem;
     color: #fff;
 }

 .why-head p {
     max-width: 36rem;
 }

 .choose {
     background-color: white;

     padding: 1rem;

 }

 .choose h3 {
     font-size: 1.25rem;
     line-height: 1.75rem;
     margin-top: .5rem;
     margin-bottom: .5rem;
     font-weight: 800;
 }

 .choose p {
     margin: 0px;
     color: black;
 }

 .testim {
     width: 100%;
     position: relative;

 }

 .testim .wrap {
     position: relative;
     width: 100%;
     max-width: 1020px;
     padding: 40px 20px;
     margin: auto;
 }

 .testim .arrow {
     display: block;
     position: absolute;
     color: #333;
     cursor: pointer;
     font-size: 2em;
     top: 50%;
     transform: translateY(-50%);
     transition: all .3s ease-in-out;
     padding: 5px;
     z-index: 22;
 }

 .testim .arrow:before {
     cursor: pointer;
 }

 .testim .arrow:hover {
     color: black;
 }

 .testim .arrow.left {
     left: 70px;
 }

 .testim .arrow.right {
     right: 70px;
 }

 .testim .dots {
     text-align: center;
     position: absolute;
     width: 100%;
     bottom: 60px;
     left: 0;
     display: block;
     z-index: 33;
     height: 12px;
 }

 .testim .dots .dot {
     list-style-type: none;
     display: inline-block;
     width: 12px;
     height: 12px;
     border-radius: 50%;
     border: 1px solid black;
     margin: 0 10px;
     cursor: pointer;
     transition: all .5s ease-in-out;
     position: relative;
 }

 .testim .dots .dot.active,
 .testim .dots .dot:hover {
     background: black;
     border-color: black;
 }

 .testim .dots .dot.active {
     animation: testim-scale .5s ease-in-out forwards;
 }

 .testim .cont {
     position: relative;
     overflow: hidden;
     min-height: 260px;
 }

 .testim .cont>div {
     text-align: center;
     position: absolute;
     top: 0;
     left: 0;
     padding: 0 0 70px 0;
     opacity: 0;
     width: 100%;
 }

 .testim .cont>div.inactive {
     opacity: 1;
 }

 .testim .cont>div.active {
     position: relative;
     opacity: 1;
 }

 .testim .cont div .img img {
     display: block;
     width: 100px;
     height: 100px;
     margin: auto;
     border-radius: 50%;
     object-fit: cover;
 }

 .testim .cont div h2 {
     color: #081a3e;
     font-size: 1em;
     margin: 15px 0;
     font-weight: 800;
 }

 .testim .cont div p {
     font-size: 1.15em;
     color: #333;
     width: 70%;
     margin: auto;
     line-height: 28px;
 }

 .testim .cont div.active .img img {
     animation: testim-show .5s ease-in-out forwards;
 }

 .testim .cont div.active h2 {
     animation: testim-content-in .4s ease-in-out forwards;
 }

 .testim .cont div.active p {
     animation: testim-content-in .5s ease-in-out forwards;
 }

 .testim .cont div.inactive .img img {
     animation: testim-hide .5s ease-in-out forwards;
 }

 .testim .cont div.inactive h2 {
     animation: testim-content-out .4s ease-in-out forwards;
 }

 .testim .cont div.inactive p {
     animation: testim-content-out .5s ease-in-out forwards;
 }

 .testimonial {
     padding-top: 4rem;
     padding-bottom: 0rem;
 }

 .testihead h2 {
     color: #081a3e;
     font-size: 36px;
     line-height: 1;
     text-align: center;
     margin-bottom: 1.5rem;
     font-weight: 800;
 }

 .about {
     background-color: #f1f1f1;
     padding-top: 4rem;
     padding-bottom: 4rem;
 }

 .about img {
     border-radius: 20px;
     box-shadow: 1px 1px 10px rgb(188, 188, 188);
 }

 .bout-txt {
     padding: 0px 20px;

 }

 .about h2 {
     color: #081a3e;
     line-height: 1.5;
     font-size: 36px;
     margin-bottom: 0.5rem;
     font-weight: 800;
 }

 .about p {
     color: rgba(0, 0, 0, .8);
     font-size: 1rem;
     line-height: 1.5rem;
     margin-bottom: 1rem;
 }

 .team {
     padding-top: 4rem;
     padding-bottom: 4rem;
 }

 .team-head {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .team-head h2 {
     width: 75%;
     line-height: 1.5;
     font-size: 36px;
     padding-bottom: 1.5rem;
     color: #081a3e;
     font-weight: 800;
 }

 .team-head h2 span {
     text-decoration-line: underline;
     font-style: italic;
 }

 .team-head p {
     width: 50%;
     font-size: 1rem;
     line-height: 1.5rem;
     text-transform: lowercase;

 }

 .owl-carousel .owl-item .single-staff-item img {
     width: 100%;
 }

 .single-staff-item {
     border: 1px solid #0000000c;
     padding: 15px;
     border-radius: 10px;
 }

 .staff-meta {
     font-size: 12px;
     margin-top: 20px;
     text-align: center;
 }

 .staff-meta h3 {
     font-size: 20px;
     color: black;
 }

 .single-staff-item p {
     text-align: center;
 }

 .staff-list .owl-nav button {
     display: inline-block;
     width: 50px;
     height: 40px;
     background-color: #f3f3f3 !important;
     margin-left: 10px;
     transition: .3s;
 }

 .staff-list .owl-nav button:hover {
     background: #081a3e !important;
     color: white !important;
 }

 .staff-list .owl-nav {
     position: absolute;
     right: 0;
     top: -46px;
 }

 .staff-desc {
     margin-top: 20px;
 }

 .footer {
     background-color: #081a3e;
     padding: 3rem 0 1rem 0;
     color: white;
 }

 .footer-about h3,
 .footer-services h3,
 .footer-contact h3 {
     color: white;
     font-weight: 800;
     position: relative;
     padding-bottom: 10px;
     margin-bottom: 20px;
 }

 .footer-about p {
     color: white;
 }

 .serv-list {
     display: flex;
     justify-content: space-between;
 }

 .serv-list ul {
     padding-left: 1.2rem;
 }

 .footer-about h3::after,
 .footer-services h3::after,
 .footer-contact h3::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 50px;
     height: 3px;
     background: #fff;
 }

 .footer-contact a {
     color: white;
     text-decoration: none;
 }

 .footer-bottom {
     text-align: center;
     padding-top: 20PX;
     font-size: 13px;
 }

 #backToTop {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 45px;
     height: 45px;
     border: none;
     border-radius: 50%;
     background: #1f7db6;
     color: #fff;
     font-size: 18px;
     cursor: pointer;
     display: none;
     z-index: 999;
     transition: 0.3s;
 }

 #backToTop:hover {
     background: #176a99;
 }

 @keyframes testim-scale {
     0% {
         box-shadow: 0 0 0 0 #eee;
     }

     35% {
         box-shadow: 0 0 10px 5px #eee;
     }

     70% {
         box-shadow: 0 0 10px 5px #ea830e;
     }

     100% {
         box-shadow: 0 0 0 0 #ea830e;
     }
 }

 @keyframes testim-content-in {
     from {
         opacity: 0;
         transform: translateY(100%);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes testim-content-out {
     from {
         opacity: 1;
         transform: translateY(0);
     }

     to {
         opacity: 0;
         transform: translateY(-100%);
     }
 }

 @keyframes testim-show {
     from {
         opacity: 0;
         transform: scale(0);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes testim-hide {
     from {
         opacity: 1;
         transform: scale(1);
     }

     to {
         opacity: 0;
         transform: scale(0);
     }
 }

 @media all and (max-width:500px) {
     .testim .arrow {
         font-size: 1.5em;
     }

     .testim .cont div p {
         width: 92%;
     }

     .testim .arrow.left {
         left: 10px;
     }

     .testim .arrow.right {
         right: 10px;
     }
 }



 @media (max-width:991px) {

     .navbar {
         position: relative;
     }

     .center-btn {
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
     }

     .navbar-collapse {
         background: #1f7db6;
         margin-top: 10px;
     }

     .navbar-collapse .nav-link {
         padding: 18px 20px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }

     .product-head {
         max-width: 100%;
         padding: 0px !important;
     }

     .product-head h2 {
         font-size: 32px;
         line-height: 1.2;
     }

     .shape {
         background-color: black;
         width: 2.5rem;
         height: 2.5rem;
         margin: auto;
         top: -20px;
         right: 0;
         left: 0%;
         position: absolute;
         transform: rotate(45deg);
     }

     .bg-pro {
         padding-left: 2rem;
     }

     .pro-text {
         padding-left: 0px;
         text-align: center;
     }

     .pro-logo p {
         font-size: 32px;
     }

     .pro-logo {
         padding-bottom: 3rem;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 1.25rem;
         padding-top: 4rem;
     }

     .pro-logo img {
         width: 6%;
     }

     .demo {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
     }

     .demo p {
         text-align: center;
     }

     .app {
         padding-bottom: 4rem;
         gap: 1rem;
         display: flex;
         justify-content: center;
     }

     .shape1 {
         background-color: black;
         width: 2.5rem;
         height: 2.5rem;
         margin: auto;
         top: -20px;
         right: 0;
         left: 0%;
         position: absolute;
         transform: rotate(45deg);
     }

     .pro-text1 {
         padding-right: 0px;
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .bg-pro {
         padding-right: 2rem;
     }

     .services {
         padding: 10px;
     }

     .testihead h2 {
         font-size: 32px;
     }

     .testim .cont div p {
         width: 100%;
     }

     .testim .arrow.right {
         right: -10px;
     }

     .testim .arrow.left {
         left: -10px;
     }

     .team-head h2 {
         width: 100%;
         font-size: 32px;
         line-height: 1.2;
     }

     .team-head p {
         width: 100%;
         margin-bottom: 70px;
     }

     .d-lg-none {
         display: none;
     }

     .navbar-toggler {
         position: absolute;
         right: 0px;
         top: 16px;
         border: none;
         font-size: 30px;
     }

     .custom-navbar {
         padding: 0px;
         position: relative;
     }

     .navbar-brand img {
         padding-left: 25px;
     }

     .hero-head h1 {
         color: white;
         font-size: 36px;
         text-align: center;
         max-width: 56rem;
         font-weight: 800;
         margin-bottom: 1.5rem;
     }

     .custom-navbar {
         padding: 15px 10px;
         position: relative;
     }
     .Bizgrab {
     /* padding-top: 32px; */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 32px 0px 20px !important;
 }
 .services{
    padding: 40px 10px;
 }
 }

 @media (min-width: 992px) {
     .navbar-expand-lg .navbar-collapse {
         display: flex !important;
         flex-basis: auto;
         justify-content: end;
     }
 }