* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body {
  font-family: page-lexend-regular;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
}

:root {
  --section-p: 120px;
  --section-m: 60px;
  --primary-color: #d2f5d6;
  --secondry-color: #295c29;
  --button-color: #93c805;
  --butt0n-text: #245b00;
  --font-regular: "page-lexend-regular";
  --font-light: "page-lexend-light";
  --font-semibold: "page-lexend-semibold";
  --font-bold: "page-lexend-bold";
  --font-medium: "page-lexend-medium";
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

p {
  line-height: 1.6;
  font-family: var(--font-light);
  font-size: 17px;
  margin-bottom: 15px;
}

a {
  text-decoration: none;
  font-family: var(--font-regular);
  color: rgb(0, 0, 0);
  display: inline-block;
}

li {
  list-style: none;
}

@font-face {
  font-family: page-lexend-black;
  src: url("../fonts/Lexend-Black.ttf");
}

@font-face {
  font-family: page-lexend-bold;
  src: url("../fonts/Lexend-Bold.ttf");
}

@font-face {
  font-family: page-lexend-semibold;
  src: url("../fonts/Lexend-SemiBold.ttf");
}

@font-face {
  font-family: page-lexend-medium;
  src: url("../fonts/Lexend-Medium.ttf");
}

@font-face {
  font-family: page-lexend-regular;
  src: url("../fonts/Lexend-Regular.ttf");
}

@font-face {
  font-family: page-lexend-light;
  src: url("../fonts/Lexend-Light.ttf");
}

.container {
  width: 100%;
  max-width: 1280px;
  margin: 0px auto;
}

.page-main-sec img {
  width: 100%;
  display: block;
}

.page-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.page-flx-col {
  flex: 1 0 0px;
}

.page-flx-col-ctn {
  max-width: 600px;
}

.page-flx-grid {
  border-radius: 16px;
  padding: 50px 40px;
  flex: 1 1 32%;
  color: rgb(0, 0, 0);
  background: var(--primary-color);
}

.header-wrap {
  justify-content: space-between;
  padding: 13px 0px;
}

header {
  position: sticky;
  top: 0px;
  background: rgb(255, 255, 255);
  z-index: 3;
}

.logo {
  max-width: 180px;
}
.menu-bar {
  display: none;
}
.menu-bar span {
  width: 25px;
  height: 3px;
  display: block;
  margin-bottom: 3px;
  background: #000;
}
.page-menu {
  transition: all 0.3s ease-in-out;
}
.main-menu {
  gap: 10px;
}
.menu-overley {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  inset: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  visibility: hidden;
}
.menu-overley.active {
  opacity: 1;
  visibility: visible;
}
.page-menu.active {
  right: 0;
}
.main-menu > li > a {
  padding: 10px 25px;
  border-radius: 5px;
  font-size: 16px;
}

.main-menu > li > a:hover,
.main-menu > li > a.active {
  color: rgb(0, 0, 0);
  background: var(--button-color);
}

.main-menu > li {
  position: relative;
}

.main-menu .sub-menu {
  position: absolute;
  top: 120%;
  left: 0px;
  background: rgb(255, 255, 255);
  border-radius:  0;
  visibility: hidden;
  max-width: 280px;
  opacity: 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  z-index: 2;
}
.sub-menu-2 {
  position: absolute;
  left: 100%;
  top: 0;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
/* .drop-menu2 {
  position: relative;
} */
.drop-menu2:hover .sub-menu-2 {
  visibility: visible;
  opacity: 1;
}
li.drop-menu > a {
  padding-right: 36px;
  position: relative;
}

li.drop-menu > a::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid rgb(0, 0, 0);
  border-left: 1px solid rgb(0, 0, 0);
  transform: rotate(-135deg) translate(100%, 0%);
}

.main-menu > li:hover .sub-menu {
  top: 100%;
  visibility: visible;
  opacity: 1;
  transition: 0.3s ease-in-out;
}

.main-menu .sub-menu li a {
  padding: 10px 20px;
  display: block;
  border-radius: 5px;
  white-space: nowrap;
  font-family: var(--font-light);
  font-size: 16px;
}

.main-menu .sub-menu li a:hover {
  color: var(--button-color);
}

.grid-lines {
  position: absolute;
  inset: 0px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1300px;
  margin: 0px auto;
  z-index: 0;
}

.grid-line-6,
.grid-line-5,
.grid-line-4,
.grid-line-3,
.grid-line-2,
.grid-line-1 {
  position: relative;
  height: 100%;
}

.grid-line-6::before,
.grid-line-5::before,
.grid-line-4::before,
.grid-line-3::before,
.grid-line-2::before,
.grid-line-1::before {
  content: "";
  position: absolute;
  top: 0px;
  height: 100%;
  right: -1px;
  background: rgb(3, 59, 4);
  width: 1px;
  opacity: 0.1;
}

.grid-line-6::after,
.grid-line-5::after,
.grid-line-4::after,
.grid-line-3::after,
.grid-line-2::after,
.grid-line-1::after {
  content: "";
  position: absolute;
  top: -80px;
  right: -1px;
  background: linear-gradient(
    254deg,
    transparent 0%,
    rgb(0, 0, 0) 50%,
    rgb(0, 0, 0) 100%
  );
  border-radius: 0px;
  opacity: 0.5;
  width: 1px;
  height: 60px;
}

.grid-lines .grid-line-1::after {
  animation: 6s linear 0s infinite normal none running gridline;
}

.grid-lines .grid-line-2::after {
  animation: 10s linear 3s infinite normal none running gridline;
}

.grid-lines .grid-line-3::after {
  animation: 8s linear 6s infinite normal none running gridline;
}

.grid-lines .grid-line-4::after {
  animation: 12s linear 4s infinite normal none running gridline;
}

.grid-lines .grid-line-5::after {
  animation: 9s linear 7s infinite normal none running gridline;
}

.grid-lines .grid-line-6::after {
  animation: 7s linear 2s infinite normal none running gridline;
}

@keyframes gridline {
  0% {
    top: -50px;
  }

  100% {
    top: 100%;
  }
}

.banner {
  background: var(--primary-color);
  padding: var(--section-p) 0;
  min-height: 450px;
  position: relative;
  overflow: hidden;
  color: var(--secondry-color);
}

.page-main-sec h1 {
  font-size: clamp(32px, 6vw, 72px);
  font-family: var(--font-regular);
}

.page-main-sec h2 {
  margin-bottom: 15px;
  font-size: clamp(32px, 5vw, 52px);
  font-family: var(--font-medium);
}

.page-main-sec h3 {
  margin-bottom: 15px;
  font-size: clamp(18px, 3vw, 24px);
  font-family: var(--font-medium);
  line-height: 1.3;
}

.banner-ctn {
  text-align: center;
  position: relative;
  z-index: 2;
}

.banner-ctn p {
  max-width: 620px;
  margin: 0px auto;
  font-family: var(--font-light);
  color: #000;
}

.banner-ctn span {
  background: linear-gradient(
      90deg,
      rgb(0, 126, 229) -3.24%,
      rgb(112, 61, 253) 52.08%,
      rgb(219, 124, 0) 107.4%
    )
    text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  font-size: clamp(18px, 4vw, 28px);
}

.banner-ctn p.banner-sub-head {
  max-width: 1000px;
  padding: 10px 0px 15px;
  font-size: clamp(16px, 4vw, 24px);
  font-family: var(--font-regular);
  color: #000;
}

.trust-brand .sec-title h2 {
  font-size: clamp(20px, 4vw, 24px);
  font-family: var(--font-regular);
  text-align: center;
}
.trust-brand .container {
  overflow: hidden;
}
.our-brand {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
}
.our-brand ul {
  animation: scroll-logos 20s linear infinite;
}
.our-brand li {
  max-width: 150px;
  border: 1px solid #ddd;
  padding: 0 20px;
  border-radius: 5px;
  width: 100%;
}
@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  } /* 6 logos × (logo width + margin) */
}
.primary-btn, .primary-btn button {
  background: var(--secondry-color);
  border-radius: 4px;
  padding: 13px 25px;
  color: rgb(255, 255, 255);
  margin-top: 30px;
  border: 0;
  font-family: var(--font-regular);
  font-size: 15px;
  cursor: pointer;
}

.primary-btn:hover {
  background: var(--button-color);
  color: rgb(0, 0, 0);
}

.trust-brand {
  padding: var(--section-p) 0 0 0;
}

.trust-brand ul {
  margin-top: 30px;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-right: 20px;
}

.trust-brand li img {
  height: 80px;
  object-fit: contain;
}

.service-sec {
  padding: var(--section-p) 0;
  position: relative;
  overflow: hidden;
}

.service-sec .sec-title {
  max-width: 700px;
  margin: 0px auto;
  text-align: center;
}

.service-sec::before {
  content: "";
  display: none;
  position: absolute;
  right: -100px;
  top: -100px;
  background: url("../images/global-pattern.png") left center / cover no-repeat;
  width: 240px;
  height: 240px;
  animation: 12s linear 0s infinite alternate none running roundrotate;
  z-index: 0;
}

@keyframes roundrotate {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  100% {
    transform: translateY(150px) rotate(360deg);
  }
}

.why-choose::before {
  content: "";
  display: none;
  position: absolute;
  left: -100px;
  bottom: 18%;
  background: url("../images/square-pattern.png") left center / cover no-repeat;
  width: 240px;
  height: 240px;
  animation: 12s linear 0s infinite alternate none running roundrotate;
  z-index: 0;
}

.tab-section {
  gap: 30px;
  align-items: flex-start;
}

.tab-content.active {
  background: #49AB3C;
  box-shadow: rgba(0, 0, 0, 0.1) -10px -10px 30px;
}

.tab-content h3 {
  margin-bottom: 0px;
}

.accordion-item {
  border: 1px solid rgb(221, 221, 221);
  margin-bottom: 8px;
  border-radius: 4px;
}

.tab-btn {
  width: 100%;
  background: transparent;
  padding: 20px 40px;
  text-align: left;
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  cursor: pointer;
  font-family: var(--font-regular);
  font-size: clamp(18px, 4vw, 24px);
  border-bottom: 1px solid rgb(234 234 234);
  position: relative;
}
.tab-btn::before{
  content:'\eb33';
  font-family: 'boxicons';
  right: 20px;
  position:absolute;
  transform:rotate(180deg);
  top: 24px;
}

.tab-btn.active {
  color: var(--button-color);
}

.tab-content.active .tab-btn {
  border: 0px;
  color: #fff;
}

.tab-panel {
  padding: 0px 0px 30px;
  display: none;
  border-bottom: burlywood;
}

.tab-panel p {
  margin-bottom: 0px;
  font-family: var(--font-light);
  padding: 0px 40px;
  color: rgb(255, 255, 255);
}

.accordion {
  max-width: 550px;
  width: 100%;
}

.accordion > div {
  border-radius: 4px;
}

.accordion-right {
  overflow: hidden;
}

.accordion-ss {
  visibility: hidden;
  opacity: 0;
  height: 0px;
  transform: translateY(10px);
}

.accordion-ss img {
  border-radius: 13px;
}

.accordion-ss.active {
  visibility: visible;
  opacity: 1;
  height: auto;
  transform: translateY(0px);
  transition: 0.3s ease-in-out;
}

.secrive-icn {
  width: 60px;
  height: 60px;
  display: block;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.web-saas-icn {
  background: url("../images/web-sass.png") 0px 0px / cover no-repeat;
}

.mobile-app-icn {
  background: url("../images/mobile-dev.png") 0px 0px / 33px no-repeat;
  width: 36px;
}

.cloud-icn {
  background: url("../images/cloud.png") 0px 0px / 59px no-repeat;
}

.service-2 {
  padding: 0 0 var(--section-p) 0;
  position: relative;
}

.service-2 .page-flx-grid {
  position: relative;
  overflow: hidden;
  transition: 0.4s ease-in-out;
}

.service-2 .page-flx-grid > div {
  position: relative;
  z-index: 2;
}

.service-2 .page-flx-grid::before {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: linear-gradient(0, #295c29 0.03%, #025b3e 100%);
  border-radius: 500px 500px 0px 0px;
  width: 100%;
  height: 0px;
  transition: 0.5s ease-in-out;
  z-index: 0;
}

.service-2 .page-flx-grid:hover::before {
  border-radius: 0px;
  height: 100%;
}


.service-2 .page-flx-grid:hover {
  color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 40px;
}

.sec-title + .page-flex {
  margin-top: var(--section-m);
}

.service-2 .sec-title {
  text-align: center;
  margin: 0px auto;
  max-width: 680px;
}

.why-choose {
  padding: var(--section-p) 0;
  position: relative;
  background: #edf6ec;
}

.why-choose .page-flex,
.why-choose-sec {
  align-items: flex-start;
}

.why-choose-sec .secrive-icn {
  background: #49ab3c;
  color: #fff;
  border-radius: 50%;
}
.why-choose-sec .secrive-icn i{
  font-size:30px
}
.why-choose-lft {
  max-width: 480px;
}

.why-choose-lft p {
  max-width: 420px;
}

.primary-btn2 {
  background: var(--button-color);
  color: rgb(0, 0, 0);
}

.primary-btn2:hover {
  background: var(--secondry-color);
  color: rgb(255, 255, 255);
}

.why-choose-sec .page-flx-grid {
  flex: 1 1 48%;
  background: transparent;
  border: 0px;
  padding: 0px 20px 35px 0px;
  \: rgb(255, 255, 255);
}

.why-choose-sec .page-flx-grid:nth-child(3),
.why-choose-sec .page-flx-grid:last-child {
  padding-bottom: 0px;
}

.why-choose-sec h3 {
  font-size: clamp(18px, 4vw, 22px);
  max-width: 530px;
}

.certificate-sec {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.certificate-sec li {
  background: rgb(255, 255, 255);
  border-radius: 4px;
  overflow: hidden;
}

.certificate-sec li img {
  width: 75px;
  height: 42px;
  object-fit: cover;
}

.support-icn {
  background: url("../images/support.png") 0px 0px / 44px no-repeat;
}

.ai-icn svg{
    fill: #fff;
    width: 30px;
}
.service-2 .secrive-icn{
  width: 70px;
  height: 70px;
  background: #49ab3c;
  border-radius: 50%;
}
.service-2 .secrive-icn i{
  font-size: 34px;
  color: #fff;
}
.merits {
  background: #49AB3C;
  padding: 90px 0px;
}

.merits .page-flex {
  align-items: flex-start;
}

.merits .page-flx-grid {
  background: transparent;
  border: 0px;
  flex: 1 1 20%;
  padding: 0px;
  text-align: center;
  color: rgb(255, 255, 255);
  border-right: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 0;
}
.merits .page-flx-grid:last-child {
  border: 0;
}

.merits .page-flx-grid span {
  font-size: clamp(36px, 5vw, 58px);
  font-family: var(--font-light);
  margin-bottom: 15px;
  display: inline-block;
}

.merits .page-flx-grid h3 {
  font-size: 20px;
}

.mission-sec {
  padding: var(--section-p) 0;
}
.mission-sec .secrive-icn{
  width: 50px;
  height: 50px;
  background: #49ab3c;
  border-radius: 50%;
}
.mission-sec .secrive-icn svg{
  fill: #fff;
  max-width: 23px;
}
.mission-sec .container > .page-flex {
  align-items: inherit;
}

.mission-sec .sec-title {
  text-align: center;
  margin: 0px auto;
  max-width: 600px;
}

.mission-lft {
  max-width: 480px;
  background: url("../images/countries.jpg") center 0px / cover no-repeat;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
}

.mission-lft::before {
  content: "";
  inset: 0px;
  position: absolute;
  background: linear-gradient(
    0,
    var(--butt0n-text) 0.03%,
    var(--button-color) 100%
  );
  opacity: 0.9;
  border-radius: 15px;
}

.mission-sec .page-flx-grid {
  border: 0px;
  padding: 40px;
}

.contries-serve {
  text-align: center;
  color: rgb(255, 255, 255);
}
.iner-page-link{
    width: 40px;
    height: 40px;
    background: var(--button-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: absolute;
    z-index: 2;
    right: -40px;
    bottom: -40px;
    transform: scale(1.5);
    transition: all 0.3s ease-in-out;
}
.service-2 .page-flx-grid:hover .iner-page-link{
    right: 0;
    bottom: 0;
}
.contries-serve p {
  max-width: 350px;
}

.contries-serve .primary-btn {
  margin-top: 20px;
}
.primary-btn i {
    margin-left: 3px;
    font-size: 20px;
    top: 4px;
    position: relative;
}
.contries-serve > div {
  position: relative;
  z-index: 2;
}

.contries-serve span {
  font-size: clamp(20px, 8vw, 110px);
  font-family: var(--font-regular);
}

.mission-sec .page-flx-grid p {
  max-width: 500px;
}

span.mission-icn {
  background-position: 0px -1px;
}

.vision-icn {
  background-position: -66px -1px;
}

.approch-icn {
  background-position: -125px 0px;
}

footer {
  padding: 100px 0px;
  background: #fbfbfb;
}
.footer-certificate-sec{
     display: flex;
    gap: 10px;
  
}
.footer-certificate-sec span{
  max-width: 90px;
  width: 100%;
  display: block;
}

.footer-col {
  flex: 1 1 22%;
}
.footer-col .page-flex{
    justify-content: flex-start;
}
.footer-col h3{
    color: var(--secondry-color);
}

.footer-col ul li {
  padding-bottom: 15px;
  line-height: 1.4;
  font-family: var(--font-light);
}

.footer-col li a {
  font-family: var(--font-light);
  padding: 3px 0px;
  font-size: 15px;
}

.footer-col li a:hover {
  color: var(--butt0n-text);
}

.foote-wrapper {
  align-items: flex-start;
  gap: 45px;
}

.footer-logo {
  max-width: 190px;
  margin-bottom: 30px;
}

ul.footer-contact-sec li {
  position: relative;
  padding-left: 37px;
  font-size: 15px;
  line-height: 1.6;
}

.footer-contact-sec li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0;
  width: 25px;
  height: 25px;
  font-family: 'boxicons';
  font-size: 20px;
}
.footer-contact-sec li:nth-child(1)::before {
  content: '\eac1';
}
.footer-contact-sec li:nth-child(2)::before {
  content: '\ebb2';
}

.footer-contact-sec li:nth-child(3)::before,.footer-contact-sec li:nth-child(4)::before {
 content: '\eb56';
},

.copy-rht {
  padding: 20px;
  text-align: center;
  background: var(--primary-color);
}

.copy-rht p {
  font-size: 15px;
  margin-bottom: 0;
}
.inner-top-banner {
  background: #49AB3C;
  color: #fff;
  font-family: var(--font-medium);
  text-align: center;
  padding: var(--section-p) 0;
  position: relative;
}
.inner-wrapper .page-flex .left-nav{
  flex: 1 1 0;
  max-width: 310px;
  border-right: 1px solid #e5e5e5;
  padding-right: 20px;
}
.inner-wrapper .page-flex .left-nav nav{
    position: sticky;
    top: 100px;
}
.inner-wrapper .page-flex {
    align-items: inherit;
    padding: var(--section-p) 0;
}
.inner-wrapper .page-flex .left-nav a{
    padding: 13px 15px;
    display: block;
}
.inner-wrapper .page-flex .left-nav ul li a:hover, .inner-wrapper .page-flex .left-nav ul li.active a{
  background:#fffbce;
}
.inner-wrapper .page-flex .right-ctn{
     flex: 1 1 0;
     padding-left: 30px;
     max-width: 1080px;
     margin: 0 auto;
}

.inner-page-ctn{
    margin-bottom: 40px;
}
.inner-page-ctn div.page-flex{
    gap: 20px;
    padding: 0;
}
.inner-page-ctn div.page-flex > div{
    background: #f3f9fd;
    flex: 1 1 40%;
    padding: 30px 40px;
    border-radius: 5px;
    border: 1px solid #ceebf9;
}
.inner-page-ctn:last-child{
    margin-bottom: 0;
}
.inner-page-ctn p {
    max-width: 760px;
}
.inner-page-ctn p + h3{
    margin-top: 20px;
}
.inner-page-ctn h2{
    background: #f0fdee;
    border-left: 5px solid #47a349;
    font-size: clamp(22px, 4vw, 26px);
    padding: 15px 30px;
    margin-bottom: 30px;
    color: var(--butt0n-text);
}
.inner-page-ctn h3{
      font-size: clamp(20px, 4vw, 22px);
}
.inner-page-ctn div.page-flex > div.inner-page-ctn-img{
    padding: 0;
    
    flex: 1 1 15%;
}
.inner-page-ctn-img img{
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.inner-page-ctn ul {
  margin-top:20px
}
.inner-page-ctn ul li{
    padding-left: 24px;
    position: relative;
    padding-bottom: 20px;
    font-family: var(--font-light);
}
.right-ctn-wrapper p + .inner-page-ctn{
    margin-top:40px;
} 
.inner-page-ctn li::before{
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    background: #47a349;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.right-ctn-wrapper{
    margin-bottom: 70px;
}
.right-ctn-wrapper:last-child{
    margin-bottom: 0;
}
.container.about-ctn {
    padding: 70px 20px;
    text-align: center;
    max-width: 930px;
}
/* .container .banner-ctn, .container .sec-title, .page-flx-col, .page-flx-grid{
    transform: translateY(40px);
} */
/* .container.visible .banner-ctn, .container.visible .sec-title, .container.visible .page-flx-col, .container.visible .page-flx-grid{
    animation: top-animation 0.5s ease-in-out forwards;
} */
/* .container.visible .page-flx-col:nth-child(2){
    animation-delay: 0.3s;
}
.container.visible .page-flx-grid:nth-child(2){
    animation-delay: 0.3s;
}
.container.visible .page-flx-grid:nth-child(3){
    animation-delay: 0.5s;
}
.container.visible .page-flx-grid:nth-child(4){
    animation-delay: 0.7s;
} */
/* @keyframes top-animation {
    0%{
        transform: translateY(40px);
    }
    100%{
        transform: translateY(0);
    }
} */
 .animation{
  opacity: 0;
 }
 .fadein{
    animation-name: fadein;
    animation-fill-mode: both;
}
@keyframes fadein {
    from {
        opacity: 0;
        transform:translateY(50px)
    }

    to {
        opacity: 1;
        transform: none
    }
}
.fadeinleft {
    animation-name: fadeinleft;
    animation-fill-mode: both;
}
@keyframes fadeinleft {
    from {
        opacity: 0;
        transform:translateX(-50px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.fadeinright {
    animation-name: fadeinright;
    animation-fill-mode: both;
}
@keyframes fadeinright {
    from {
        opacity: 0;
        transform:translateX(50px)
    }

    to {
        opacity: 1;
        transform: none
    }
}


.container.abt-wrap .page-flx-col {
    flex: 0 1 40%;
}
.abt-wrap img{
    border-radius: 10px;
}
.container.abt-wrap .page-flex{
    padding-bottom: var(--section-p);
}
.container.abt-wrap .page-flx-col h3{
    background: linear-gradient(0, #295c29 0.03%, #025b3e 100%);
    color: #fff;
    display: inline-block;
    padding: 10px 15px;
    font-size: 14px;
    font-family: var(--font-light);
    text-transform: uppercase;
    border-radius: 5px;
}
.abt-wrap .page-flex {
    justify-content: center;
    gap: 60px;
}
.abt-btm-cta{
    background: #49AB3C;
    padding: 90px 0px;
    color: #fff;
    text-align: center;
}
.abt-btm-cta .container p{
    max-width: 600px;
    margin: 0 auto;
}
.contact-wrapper{
    max-width: 800px;
    margin: 0 auto;
    padding: var(--section-p) 0;
}
.contact-form-modern {
    margin-top: 30px;
}
.contact-subtitle-modern {
    max-width: 600px;
}
.contact-lft .form-modern-group{
    width: 100%;
    flex: 1 1 48%;
    margin-bottom: 15px;
}
.contact-lft .form-modern-row label{
    padding-bottom: 15px;
    display: block;
}
.contact-lft .form-modern-checkbox label{
    display: inline-block;
}
.swal2-title{
    font-size: 22px;
}
.contact-lft .form-modern-row .form-modern-group input {
    border-radius: 5px;
    border: 1px solid #ddd;
    height: 50px;
    width: 100%;
    padding: 0 20px;
    font-size: 16px;
    font-family: var(--font-light);
}
.contact-lft textarea{
    border-radius: 5px;
    border: 1px solid #ddd;
    height: 150px;
    width: 100%;
    padding:20px;
    font-size: 16px;
    font-family: var(--font-light);
    resize: vertical;
}
.contact-lft ul li.single-col{
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.contact-lft .form-modern-checkbox label{
    width: auto;
    padding-bottom: 0;
    font-family: var(--font-light);
}
.contact-icon{
    width: 50px;
    height: 50px;
    background: #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.contact-info{
    padding-bottom: var(--section-p);
}
.contact-info li {
  display:flex;
  gap:20px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 22px 20px rgba(0,0,0,0.06);
}
.footer-social li a i{
    width: 30px;
    height: 30px;
    background: #ddd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.footer-social li a:hover i{
    background: var(--button-color);
    color: #000;
}
.top-baner-icon span{
  position: absolute;
}
.top-baner-icon span.abt-icn1{
  left: 10%;
  top: 21%;
  max-width: 6%;
  animation: floating 5s ease-in-out infinite;
}
.top-baner-icon span.abt-icn2{
  left: 26%;
  top: 51%;
  max-width: 4%;
  animation: floatingreverse 5s ease-in-out infinite;
}
.top-baner-icon span.abt-icn3{
  right: 27%;
  top: 27%;
  max-width: 3%;
  animation: floating 5s ease-in-out infinite;
}
.top-baner-icon span.abt-icn4{
  right: 10%;
  top: 51%;
  max-width: 5%;
  animation: floatingreverse 5s ease-in-out infinite;
}
.certi span{
  width: 70px;
}
@keyframes floating {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(-30px);
    }
    100%{
      transform: translateY(0);
    }
}
@keyframes floatingreverse {
    0%{
      transform: translateY(0);
    }
    50%{
      transform: translateY(30px);
    }
    100%{
      transform: translateY(0);
    }
}
@media only screen and (max-width: 1400px) {
  .accordion-right {
    min-height: auto;
  }
}

@media only screen and (max-width: 1200px) {
  .container {
    padding: 0 20px;
    max-width: 100%;
  }
  .mission-sec .page-flx-grid{
    flex: 1 1 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --section-p: 70px;
    --section-m: 40px;
  }
  .tab-section{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

  }
  .logo {
    max-width: 160px;
  }
  .accordion-right {
    display: none;
  }
  .accordion {
    margin: 0px auto;
    max-width: 700px;
  }
  .banner-ctn {
    max-width: 700px;
    margin: 0 auto;
  }
  .main-menu {
    gap: 5px;
  }
  .main-menu > li > a:not(li.drop-menu > a) {
    padding: 10px 15px;
    font-size: 15px;
  }
  .mission-sec .container > .page-flex{
    flex-direction: column;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  .mission-lft{
    overflow: inherit;
    max-width: 100%;
    padding: 50px;
  }
  .footer-col{
    flex: 1 1 46%;
  }
  .abt-wrap .page-flex{
    gap: 40px;
    max-width: 700px;
    margin: 0 auto;
  }
  .container.abt-wrap .page-flx-col{
    flex: 1 1 100%;
    text-align: center;
  }
  .inner-wrapper .page-flex .left-nav{
    display: none;
  }
  .inner-wrapper .page-flex .right-ctn{
    padding-left: 0;
  }
  .inner-page-ctn div.page-flex > div{
    flex: 1 1 100%;
  }
  .inner-wrapper .page-flex{
    max-width: 800px;
    margin: 0 auto;
  }
}

@media only screen and (max-width: 767px) {
    p{
        font-size: 15px;
    }
    .top-baner-icon{
      display: none;
    }
    .inner-top-banner{
      padding: 50px 0;
    }
  .grid-lines {
    display: none;
  }
  .page-menu {
    position: fixed;
    right: -380px;
    bottom: 0;
    top: 0;
    background: #fff;
    max-width: 260px;
    z-index: 2;
    width: 100%;
  }
  .main-menu {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .menu-bar {
    display: block;
  }
  .main-menu > li {
    width: 100%;
  }
  .main-menu > li > a {
    padding: 10px 15px;
    font-size: 15px;
    display: block;
    border-radius: 0;
  }
  .main-menu .sub-menu{
    background: #f5f5f5;
    box-shadow: none;
  }
  .sub-menu-2 li a {
    font-size: 14px !important;
    padding: 7px 10px !important;
    color: #555;
  }
  .main-menu .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .main-menu > li:hover .sub-menu {
    transition: inherit;
  }
  .sub-menu-2 {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    display: none;
    padding-left: 22px;
    }
    .sub-menu-2 li a{
      font-size: 14px;
    }
    .sub-menu-2.active{
      display: block;
    }
  .page-flx-grid{
    flex: 1 1 90%;
  }
  .service-sec::before, .why-choose::before{
    display: none;
  }
  .why-choose .page-flex{
    flex-direction: column;
    gap: 50px;
  }
  .why-choose-lft p, .why-choose-lft{
    max-width: 100%;
    width: 100%;
  }
  .page-flx-col{
    width: 100%;
  }
  .why-choose-lft{
    text-align: center;
  }
  .why-choose-sec .page-flx-grid{
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    align-items: center;
    padding: 0;
  }
  .merits .page-flx-grid{
    flex: 1 1 46%;
    padding: 0 20px;
  }
  .mission-lft, .mission-sec .page-flx-grid{
    padding: 30px 25px;
  }
}

@media only screen and (max-width: 480px) {
      .merits .page-flx-grid{
    flex: 1 1 100%;
    border: 0;
    }
}