:root {
  
  /**
     @Color Declaration
   */
  --tj-color-common-white: #ffffff;
  --tj-color-common-black: #000000;
  --tj-color-heading-primary: #0c1e21;
  --tj-color-text-body: #364e52;
  --tj-color-text-body-2: #a9b8b8;
  --tj-color-text-body-3: #67787a;
  --tj-color-text-body-4: #18292c;
  --tj-color-text-body-5: rgba(255, 255, 255, 0.8);
  --tj-color-theme-primary: #1e8a8a;
  --tj-color-theme-bg: #d8e5e5;
  --tj-color-theme-bg-2: #cee0e0;
  --tj-color-theme-bg-3: #202e30;
  --tj-color-theme-dark: #0c1e21;
  --tj-color-theme-dark-2: #18292c;
  --tj-color-theme-dark-3: #364e52;
  --tj-color-theme-dark-4: #67787a;
  --tj-color-theme-dark-5: #676e7a;
  --tj-color-red-1: #ff0000;
  --tj-color-grey-1: #ecf0f0;
  --tj-color-grey-2: #a9b8b8;
  --tj-color-grey-3: rgba(255, 255, 255, 0.1019607843);
  --tj-color-border-1: #c9d1d1;
  --tj-color-border-2: #313d3d;
  --tj-color-border-3: rgba(255, 255, 255, 0.1490196078);
  --tj-color-border-4: rgba(255, 255, 255, 0.2);
  --tj-color-border-5: rgba(30, 138, 138, 0.1490196078);
}


/* !END: Home 10 About CSS  */
/**----------------------------------------
START: Process CSS
----------------------------------------*/
.h10-process {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 0;
  border-radius: 12px;
  overflow: hidden;
}
@media only screen and (min-width: 1201px) and (max-width: 1399px) {
  .h10-process .bg-shape-3 {
    inset-inline-start: -16%;
  }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
  .h10-process .bg-shape-3 {
    inset-inline-start: -28%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process .bg-shape-3 {
    display: none;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process .pin-spacer:has(.sec-heading.style-3) {
    height: auto !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process .sec-heading.style-3.tj-sticky-panel-3 {
    position: relative !important;
    inset-inline-start: 0 !important;
    top: 0 !important;
    transform: none !important;
    height: auto !important;
    max-height: inherit !important;
  }
}
.h10-process .sec-heading.style-3 .sec-title {
  color: var(--tj-color-common-white);
}
.h10-process .sec-heading.style-3 .h10-process-more {
  margin-top: 24px;
}
.h10-process-wrapper {
  max-width: 644px;
  margin-inline-start: auto;
}
@media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process-wrapper {
    max-width: 100%;
  }
}
.h10-process-wrapper .h10-process-item {
  background-color: var(--tj-color-theme-bg-3);
  padding: 108px 30px 35px;
  position: relative;
  border-radius: 8px;
  z-index: 0;
}
.h10-process-wrapper .h10-process-item:not(:last-child) {
  margin-bottom: 30px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process-wrapper .h10-process-item {
    padding: 90px 20px 30px;
  }
}
.h10-process-wrapper .h10-process-item .title {
  max-width: 300px;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-common-white);
  margin-bottom: 20px;
  transition: none;
  font-family: 'Poppins';
  font-size: 28px;
}
.h10-process-wrapper .h10-process-item .desc {
  margin-bottom: 0;
  color: #A9B8B8;
  margin-bottom: 3em;
  font-family: 'Poppins';
  font-size: 18px;
  font-weight: 400;
}
.h10-process-wrapper .h10-process-icon {
  font-size: 48px;
  width: 80px;
  height: 80px;
  margin-bottom: 40px;
  background: #08406A;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
  transition: all 0.4s ease-in-out;
}
.h10-process-wrapper .h10-process-icon i {
  color: var(--tj-color-common-white);
  display: inline-flex;
  line-height: 1;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .h10-process-wrapper .h10-process-icon {
    font-size: 38px;
    width: 65px;
    height: 65px;
  }
}
.h10-process-wrapper .h10-process-sln {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  padding: 13px 21px 17px;
  margin-bottom: 0;
  background-color: var(--tj-color-theme-dark);
  border-bottom-right-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: var(--tj-fw-sbold);
  color: var(--tj-color-text-body-2);
  z-index: 1;
}
.h10-process-wrapper .h10-process-sln::before, .h10-process-wrapper .h10-process-sln::after {
  content: "";
  position: absolute;
  inset-inline-end: -8px;
  top: 0;
  width: 8px;
  height: 8px;
  background: url('data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%230c1e21"></path></svg>');
}
.h10-process-wrapper .h10-process-sln::after {
  inset-inline-end: auto;
  inset-inline-start: 0;
  top: auto;
  bottom: -8px;
}