@import "reset.css";
@import "font.css";

/**
--------------------------------------------------------------------------------------
------------------------ ************ Public Css ************ ------------------------
--------------------------------------------------------------------------------------
**/

html {
  scroll-behavior: smooth;
}

.container {
  width: 1200px;
  margin: 0 auto;
}

.container-fluid {
  width: 100%;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

a {
  text-decoration: none;
  color: #000;
}

body {
  font-family: Yekan Bakh FaNum;
  background-color: #ffffff;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

/**
-------------------------------------------------------------------
--------------- ************ Main Page ************ ---------------
-------------------------------------------------------------------
**/
#header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 12px 0;
  z-index: 99999999;
}

.logo {
  width: 146px;
  float: right;
}

.cta_demo {
  float: left;
}

.cta_demo a {
  background-color: #1463ff;
  padding: 12px 32px;
  color: #ffffff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  display: block;
}

.main_menu {
  margin: 0 auto;
  display: table;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 24px 0;
}

.main_menu ul li {
  padding: 0 16px;
  display: inline-block;
}

.main_menu ul li a {
  font-size: 16px;
  font-weight: 500;
}

#hero {
  /* background-image: url(../images/hero.svg); */
  background-position: center -30px;
  background-size: cover;
  padding: 130px 0 785px 0;
  position: relative;
  background-repeat: no-repeat;
  overflow: hidden;
}

#hero_bg {
  background:
    radial-gradient(
      45.67% 44.03% at 66.07% 51.26%,
      rgba(83, 219, 250, 0.5) 0%,
      rgba(83, 219, 250, 0) 100%
    ),
    radial-gradient(
      41.96% 64.88% at 25.310000000000002% 50.99000000000001%,
      rgba(0, 84, 250, 0.3) 0%,
      rgba(0, 85, 255, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 100%
    );
  height: 1279px;
  position: absolute;
  width: 100%;
  opacity: 0.8;
  z-index: -1;
  transform: rotate(179.89deg);
  top: 0px;
}

#hero_logo {
  background: url(../images/hero-logo.svg) no-repeat center;
  height: 1279px;
  position: absolute;
  width: 100%;
  z-index: -1;
  top: -46px;
}

#hero_end {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 20.1923%,
    rgba(255, 255, 255, 0) 100%
  );
  height: 387px;
  position: absolute;
  width: 100%;
  z-index: -1;
  bottom: 0px;
}

#hero h1 {
  font-size: 20px;
  font-weight: 600;
  color: #0095c1;
  text-align: center;
}

#hero h2 {
  font-size: 48px;
  font-weight: 800;
  text-align: center;
}

.buttons {
  display: table;
  margin: 24px auto 0 auto;
}

.button {
  margin: 0 8px;
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
}

.button a {
  border-radius: 12px;
}

.demo_button a {
  background-color: #1463ff;
  padding: 15px 65px;
  color: #ffffff;
  font-weight: 600;
}

.erp_button a {
  background-color: #ffffff;
  padding: 15px 72px;
  color: #1463ff;
  font-weight: 600;
  border: solid 2px #1463ff;
}

.modules {
  position: absolute;
  bottom: 200px;
  right: 0;
  left: 0;
  z-index: 99999999;
  width: 100%;
  overflow: hidden;
}

.loop_slider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content; /* shrink-wrap so translate works cleanly */
  will-change: transform;
}

.module {
  background-color: #ffffff;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 600;
  color: #1463ff;
  padding: 16px 32px;
  display: inline-block;
  margin: 6px;
  white-space: nowrap;
}

#row1 {
  position: relative;
  right: -300%;
}

.module img {
  width: 30px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 0 4px;
}

#main_modules {
  padding: 0 0 80px 0;
  margin-top: -90px;
}

.nav-tabs-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.nav-tabs {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  width: 94%;
  margin: 0 auto;
}

.nav-tabs::-webkit-scrollbar {
  display: none;
}

.nav-item {
  padding: 10px 20px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
}

.nav-item.active {
  color: #1463ff;
  background: #ecf4ff;
  border-radius: 12px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.tabs-arrows {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.tabs-arrows div {
  pointer-events: auto;
  cursor: pointer;
}

.main_modules_body {
  background:
    url(../images/module-bg.svg),
    linear-gradient(90deg, #c4def8 0%, #edf4ff 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 40px 60px;
  border-radius: 24px;
  margin: 32px 0 0 0;
}

.main_modules_image {
  width: 60%;
  float: left;
}

.main_modules_details {
  width: 40%;
  float: right;
}

.main_modules_details_title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 24px 0;
}

.main_modules_details_content p {
  color: #484c5b;
}

.main_modules_details_content ul {
  margin: 32px 0;
}

.main_modules_details_content ul li {
  padding: 8px 0;
  color: #191b23;
}

.main_modules_details_content ul li:before {
  content: url(../images/check-circle.svg);
  vertical-align: middle;
  margin: 0 0 0 6px;
}

.read_more a {
  color: #1463ff;
  font-weight: 600;
}

.read_more a img {
  width: 6px;
  vertical-align: middle;
  display: inline-block;
  margin: 0 4px 0 0;
}

#support {
  padding: 80px 0;
  position: relative;
}

#support .line {
  width: 100%;
  height: 1px;
  background-color: #d4d5d9;
  position: absolute;
  top: 294px;
}

.row_support {
  margin: 42px 0 0 0;
}

.col_support {
  width: 25%;
  float: right;
  padding: 0 30px;
  position: relative;
}

.col_support .circle {
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #1463ff;
  border-radius: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 60px;
}

.icon_support {
  width: 50px;
  margin: 0 auto;
}

.title_support {
  color: #191b23;
  font-weight: 600;
  font-size: 20px;
  margin: 40px 0 16px 0;
  text-align: center;
}

.excerpt_support {
  color: #484c5b;
  font-size: 14px;
  text-align: center;
}

#demo {
  background:
    url(../images/demo-bg.svg),
    linear-gradient(90deg, rgba(71, 139, 255, 1) 0%, rgba(2, 54, 157, 1) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 60px 0;
}

.demo_title {
  color: #ffffff;
  font-size: 48px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 24px 0;
}

.demo_excerpt {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.demo_form {
  border-radius: 20px;
  background-color: #ffffff;
  padding: 16px;
  margin: 60px 0 0 0;
}

.col_demo_form {
  width: 25%;
  float: right;
  padding: 0 8px;
}

.demo_form input {
  font-family: Yekan Bakh FaNum;
  background-color: #f9f9f9;
  border: 1.5px solid #d4d5d9;
  border-radius: 12px;
  width: 100%;
  padding: 12px 16px;
  outline: none;
}

.demo_form button {
  font-family: Yekan Bakh FaNum;
  background-color: #ffac00;
  border: 1.5px solid #ffac00;
  border-radius: 12px;
  font-weight: 600;
  width: 100%;
  padding: 14px 16px;
  outline: none;
  transition: 0.3s ease;
}

.demo_form button:hover {
  background-color: #ebab26;
  border: 1.5px solid #ebab26;
}

.error_msg {
  color: red;
  font-size: 12px;
  margin: 4px 0 0 0;
}

.success_msg {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: #00841b;
}

.bottom_footer {
  border-top: 1px solid #b3b3b3;
  padding: 24px;
}

.address_footer {
  float: right;
}

.address_icon {
  width: 32px;
  float: right;
}

.address_content {
  float: right;
  font-size: 16px;
  font-weight: 600;
  color: #707489;
  padding: 5px 10px 0 0;
}

.contact_footer {
  float: right;
  margin: 0 45px 0 0;
}

.contact_icon {
  width: 32px;
  float: right;
}

.contact_content {
  float: right;
  font-size: 16px;
  font-weight: 600;
  color: #484c5b;
  padding: 5px 10px 0 0;
}

.body_footer {
  padding: 52px 0;
}

.col_footer_1 {
  width: 40%;
  float: right;
}

.col_footer_2 {
  float: right;
  width: 20%;
  /*padding: 0 128px;*/
}

.col_footer_3 {
  float: right;
  width: 20%;
  /*padding: 0 128px;*/
}

.col_footer_4 {
  width: 20%;
  float: right;
}

.col_footer_title {
  font-size: 18px;
  font-weight: 600;
  color: #1463ff;
  margin: 0 0 8px 0;
  min-height: 28px;
}

.body_footer ul li {
  padding: 8px 0;
}

.body_footer ul li a {
  font-size: 16px;
  font-weight: 600;
  color: #707489;
}

.col_footer_1 p {
  color: #484c5b;
  font-size: 16px;
  margin: 32px 0 0 0;
}

#public_facilities {
  padding: 20px 0;
}

.public_facilities_row {
  margin: 42px -12px 0 -12px;
}

.public_facilities_col2 {
  padding: 12px;
  width: 50%;
  float: right;
}

.public_facilities_col3 {
  padding: 12px;
  width: 33.33%;
  float: right;
}

.public_facilities_box {
  background-color: #edf4ff;
  border-radius: 24px;
}

.public_facilities_details {
  padding: 30px;
}

.public_facilities_title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.public_facilities_excerpt {
  color: #484c5b;
}

.public_facilities_col2 .public_facilities_img {
  width: 50%;
  float: left;
  padding: 16px 16px 0 16px;
}

.public_facilities_col2 .public_facilities_details {
  width: 50%;
  float: right;
}

.main_top_title {
  font-size: 18px;
  font-weight: 600;
  color: #0095c1;
  text-align: center;
}

.main_title {
  font-size: 32px;
  font-weight: 700;
  color: #191b23;
  margin: 4px 0 24px 0;
  text-align: center;
}

.main_excerpt {
  font-size: 16px;
  color: #484c5b;
  text-align: center;
  width: 840px;
  margin: 0 auto;
}

#customization {
  margin: 180px 0 0 0;
  padding: 270px 0 60px 0;
  background: linear-gradient(90deg, #c8e1fa 0%, #edf4ff 100%);
}

#customization > .container {
  position: relative;
}

#pricing_section {
  background:
    url(../images/pricing.svg), linear-gradient(90deg, #478bff 0%, #02369d 100%);
  padding: 40px 64px;
  position: absolute;
  right: 0;
  left: 0;
  top: -437px;
  border-radius: 24px;
}

.pricing_title {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.pricing_excerpt {
  color: #ffffff;
  font-size: 16px;
}

.pricing_row {
  width: 70%;
  margin: 40px 0;
}

.pricing_col {
  float: right;
  width: 33.33%;
}

.pricing_col_title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px 0;
  border-right: 2px solid #53dbfa;
  color: #ffffff;
  padding: 0 10px;
}

.pricing_col_excerpt {
  color: #dcecfc;
  font-weight: 300;
}

.pricing_cta a {
  color: #1463ff;
  padding: 12px 48px;
  border-radius: 12px;
  background: #ffffff;
  display: inline-block;
  font-weight: 600;
}

.customization_body {
  margin: 42px 0 0 0;
}

.customization_image {
  width: 760px;
  float: left;
}

.customization_list {
  width: calc(100% - 760px);
  padding: 0 0 0 60px;
  float: right;
}

.customization_list_item {
  color: #484c5b;
  padding: 20px 32px;
  border-radius: 16px;
  background-color: #f7fafd;
  margin: 0 0 16px 0;
  cursor: pointer;
}

.customization_list_item:last-child {
  margin: 0;
}

.customization_list_item > div {
  font-size: 18px;
  font-weight: 600;
}

.customization_list_item > p {
  font-size: 16px;
  text-align: justify;
  color: #484c5b;
  margin: 24px 0 0 0;
}

.customization_list_item.active {
  background-color: #ffffff;
}

.customization_list_item.active > div {
  color: #1463ff;
}

.customization_list_item p,
.customization_list_item .line {
  display: none;
}

.customization_list_item.active p,
.customization_list_item.active .line {
  display: block;
}

.customization_list_item {
  cursor: pointer;
}

.line {
  width: 100%;
  height: 4px;
  background: #f7fafd;
  position: relative;
  margin: 24px 0 0;
  border-radius: 20px;
  overflow: hidden;
}

.line span {
  position: absolute;
  top: 0;
  right: 0;
  /* anchor to the right */
  left: auto;
  height: 100%;
  width: 0;
  background: #8db2fb;
  border-radius: 20px;
  animation: fill-rtl 5s linear forwards;
}

@keyframes fill-rtl {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.darsad {
  position: absolute;
  left: 0;
  bottom: 0;
}

.darsad_mobile {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
}

.socials {
  float: left;
  margin: 0 0 0 -18px;
}

.social {
  display: inline-block;
  padding: 0 18px;
}

/* ----------- ERP Page ----------- */
#hero_erp {
  background:
    radial-gradient(
      50.02% 54.24% at 90.72% 46.25%,
      rgba(0, 34, 250, 0.4) 0%,
      rgba(83, 219, 250, 0) 100%
    ),
    radial-gradient(
      47.38% 54.87% at 11.33% 50.09%,
      rgba(83, 219, 250, 0.9) 0%,
      rgba(0, 136, 255, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.6) 100%
    );
  padding: 100px 0 240px 0;
  position: relative;
  overflow: hidden;
  z-index: -1;
}

#hero_erp h1 {
  font-size: 48px;
  font-weight: 800;
  color: #191b23;
  text-align: center;
}

#hero_erp p {
  font-size: 18px;
  text-align: center;
  width: 900px;
  margin: 24px auto 0 auto;
  color: #191b23;
}

#history {
  margin: -170px 0 0 0;
  z-index: 999999;
}

#features {
  padding: 50px 0;
}

.features_row {
  margin: 42px -12px 0 -12px;
}

.feature_col3 {
  padding: 12px;
  width: 33.33%;
  float: right;
}

.feature_col2 {
  padding: 12px;
  width: 50%;
  float: right;
}

.feature_box {
  background-color: #edf4ff;
  border-radius: 24px;
}

.feature_img {
  height: 210px;
  display: flex;
}

.feature_col3 .feature_box {
  height: 443px;
}

.feature_details {
  padding: 24px;
}

.feature_title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.feature_excerpt {
  color: #484c5b;
  min-height: 100px;
}

#benefits {
  margin: 180px 0 0 0;
  padding: 270px 0 60px 0;
  background-color: #f4f5f7;
}

#benefits > .container {
  position: relative;
}

.benefits_row {
  margin: 50px -12px 0 -12px;
}

.benefits_col {
  width: 33.33%;
  float: right;
  padding: 24px;
}

.benefits_icon {
  width: 49px;
}

.benefits_title {
  font-size: 20px;
  font-weight: 700;
  margin: 12px 0;
  color: #191b23;
}

.benefits_excerpt {
  font-size: 16px;
  color: #484c5b;
}

#growth_section {
  background:
    url(../images/pricing.svg), linear-gradient(90deg, #478bff 0%, #02369d 100%);
  padding: 40px 64px;
  position: absolute;
  right: 0;
  left: 0;
  top: -440px;
  border-radius: 24px;
}

.growth_title {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 16px 0;
}

.growth_excerpt {
  color: #ffffff;
  font-size: 16px;
}

.growth_row {
  margin: 40px -30px 0 -30px;
}

.growth_col {
  float: right;
  width: 33.33%;
  padding: 0 30px;
}

.percentage {
  float: right;
  margin: -24px 0 0 0;
}

.percentage_n {
  font-weight: 800;
  font-size: 60px;
  color: #ffffff;
}

.percentage_d {
  font-weight: 600;
  font-size: 32px;
  color: #ffffff;
  margin: -30px 0 0 0;
  text-align: center;
}

.percentage_details {
  float: right;
  margin: 0 16px 8px 0;
  padding: 0 16px 0 0;
  border-right: 3px solid #53dbfa;
  width: calc(100% - 98px);
}

.percentage_title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.percentage_excerpt {
  font-size: 14px;
  margin: 6px 0 0 0;
  color: #ffffff;
}

#articles {
  padding: 80px 0;
}

.row_articles {
  margin: 50px -12px 0 -12px;
}

.col_article {
  width: 33.33%;
  padding: 12px;
  float: right;
}

.box_article {
  background-color: #edf4ff;
  padding: 16px;
  border-radius: 24px;
}

.img_article {
  height: 234px;
}

.img_article img {
  border-radius: 16px;
}

.title_article {
  margin: 8px 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.title_article a {
  color: #191b23;
  font-size: 16px;
  font-weight: 600;
}

.excerpt_article {
  color: #484c5b;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  font-size: 16px;
  font-weight: 400;
}

.date_article {
  font-size: 14px;
  font-weight: 400;
  margin-top: 16px;
  background: url(../images/date.svg) no-repeat right 1px;
  padding-right: 25px;
}

.date_article a {
  color: #707489;
}

#solutions {
  padding: 80px 0;
}

/* wrapper */
.solutions_scroller {
  position: relative;
  margin-top: 42px;
}

/* the scrolling row */
.solutions_row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0px;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  padding: 0 16px; /* replaces negative margins */
  margin: 0; /* reset old margins */
}

/* hide scrollbar (optional) */
.solutions_row::-webkit-scrollbar {
  height: 0;
}
.solutions_row {
  scrollbar-width: none;
}

/* items: fixed width so they stay in one row */
.solutions_col {
  flex: 0 0 auto;
  width: 320px; /* mobile default */
  scroll-snap-align: start;

  padding: 0; /* gap handles spacing */
  float: none; /* disable old float */
}

/* desktop: show ~3 cards at once (still scrollable) */
@media (min-width: 992px) {
  .solutions_col {
    width: 28.33%;
    min-width: 320px;
  }
}

.solutions_box {
  border-radius: 16px;
  padding: 24px;
  background-color: #f4f5f7;
}

.solutions_title {
  font-size: 20px;
  font-weight: 700;
  margin: 16px 0;
  color: #191b23;
}
.solutions_excerpt {
  font-size: 14px;
  color: #484c5b;
}

/* fades */
.solutions_fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2;
}
.solutions_fade--start {
  inset-inline-start: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}
.solutions_fade--end {
  inset-inline-end: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), #fff);
}
.solutions_scroller.is-start-hidden .solutions_fade--start {
  opacity: 1;
}
.solutions_scroller.is-end-hidden .solutions_fade--end {
  opacity: 1;
}

/* nav buttons */
.solutions_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  cursor: pointer;

  display: grid;
  place-items: center;
  font-size: 26px;
}
.solutions_nav--prev {
  inset-inline-start: 8px;
}
.solutions_nav--next {
  inset-inline-end: 8px;
}

/* hide nav buttons at ends */
.solutions_scroller.is-at-start .solutions_nav--prev,
.solutions_scroller.is-at-end .solutions_nav--next {
  display: none;
}

#who {
  padding: 80px 0;
  background:
    url(../images/erp/who.svg), linear-gradient(90deg, #122346 0%, #1d325d 100%);
}

#who .main_title,
#who .main_excerpt {
  color: #ffffff;
}

.who_row {
  margin: 62px 0 0 0;
}

.who_col {
  width: 50%;
  float: right;
  padding: 0 0 62px 0;
  height: 249px;
}

.who_col:nth-child(1),
.who_col:nth-child(3) {
  padding: 0 0 62px 62px;
}

.who_icon {
  width: 56px;
  background-color: #ebab26;
  border-radius: 8px;
}

.who_title {
  font-size: 25px;
  font-weight: 700;
  color: #ffffff;
  margin: 24px 0;
}

.who_excerpt {
  font-size: 16px;
  color: #ffffff;
}

/* ----------- ERP Page ----------- */

/* ------------- Blog ------------- */
#archive {
  padding: 100px 0;
}

#main_page {
  padding: 100px 0;
}

.page_image_thumbnail img {
  border-radius: 12px;
}

.page_title {
  padding: 20px 0 0 0;
  font-size: 25px;
  font-weight: 600;
}

.page_title a {
  font-size: 25px;
  font-weight: 600;
}

.page_content {
  line-height: 28px;
  margin: 20px 0;
  font-weight: 300;
  font-size: 17px;
  color: #515151;
  text-align: justify;
}

.page_content h1 {
  font-size: 22px;
}

.page_content h2 {
  font-size: 20px;
}

.page_content h3 {
  font-size: 18px;
}

.page_content h4 {
  font-size: 16px;
}

.page_content h5 {
  font-size: 14px;
}

.page_content h6 {
  font-size: 12px;
}

.page_content a {
  color: #3030ff;
}

.page_content p {
  font-weight: 300;
  margin-bottom: 10px;
}

.page_content ul li {
  list-style: disc;
  list-style-position: inside;
}

.page_content ol li {
  list-style-position: inside;
}

.page_content img {
  width: auto !important;
  margin: 20px 0;
  border-radius: 5px;
}

.page_content a img {
  display: block;
  margin: 20px auto;
  border-radius: 5px;
}

.alignleft {
  float: left;
  margin: 0 15px 15px 0 !important;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.alignright {
  float: right;
  margin: 0 0 15px 15px !important;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.pagination {
  display: table;
  margin: 30px auto 0 auto;
}

.pagination .page-numbers {
  background: #edf4ff;
  padding: 8px 15px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  margin: 0 3px;
}

.page-numbers.current {
  background: #1463ff;
  color: #ffffff;
}

/* ------------- Blog ------------- */
@media only screen and (max-width: 599px) {
  body {
    /* 		overflow: hidden;	 */
  }

  .container {
    width: 100%;
    padding: 0 32px;
  }

  #hero h1 {
    font-size: 14px;
  }

  #hero h2 {
    font-size: 22px;
  }

  .col_footer_2 ul {
    display: flex;
    flex-flow: wrap;
  }

  .col_footer_2 ul li {
    width: 50%;
  }

  .buttons {
    display: block;
    width: 322px;
  }

  .button {
    margin: 0;
    width: 100%;
    text-align: center;
  }

  .button a {
    display: block;
  }

  .demo_button {
    margin: 0 0 10px 0;
  }

  .public_facilities_row {
    margin: 42px 0 0 0;
  }

  .public_facilities_col2 .public_facilities_details,
  .public_facilities_col2 .public_facilities_img,
  .public_facilities_col3,
  .public_facilities_col2 {
    width: 100%;
  }

  .demo_title {
    font-size: 20px;
    margin: 0 0 8px 0;
  }

  .demo_excerpt {
    font-size: 14px;
  }

  .col_demo_form {
    width: 100%;
    padding: 8px 0;
  }

  .col_footer_1 {
    width: 100%;
  }

  .col_footer_2,
  .col_footer_3,
  .col_footer_4 {
    width: 100%;
  }

  .col_footer_3,
  .col_footer_4 {
    width: 50%;
  }

  .contact_footer {
    margin: 0;
  }

  .address_content {
    width: calc(100% - 40px);
    margin-bottom: 20px;
  }

  .main_modules_details {
    width: 100%;
  }

  .main_modules_image {
    width: 100%;
    margin: 0 0 12px 0;
  }

  .main_modules_details_content ul li {
    font-size: 13px;
  }

  .main_modules_body {
    padding: 30px 20px;
  }

  .main_modules_details_title {
    font-size: 18px;
    margin: 0 0 8px 0;
  }

  #public_facilities .container {
    padding: 16px 0;
  }

  .benefits_row {
    margin: 50px 0px 0 0px;
  }

  .public_facilities_col2 .public_facilities_box {
    display: flex;
    flex-direction: column-reverse;
  }

  #main_modules {
    padding: 0 0 21px 0;
  }

  #pricing_section {
    padding: 42px 24px;
    top: -417px;
    border-radius: 0;
  }

  .pricing_title {
    font-size: 20px;
  }

  .pricing_excerpt {
    font-size: 14px;
  }

  .pricing_col_title {
    font-size: 16px;
  }

  .pricing_col_excerpt {
    font-size: 12px;
  }

  .pricing_cta {
    display: none;
  }

  .pricing_row {
    margin: 24px 0 0 0;
  }

  .pricing_row,
  .main_excerpt {
    width: 100%;
  }

  .customization_image {
    width: 100%;
    margin: 0 0 16px 0;
  }

  .customization_list {
    width: 100%;
    padding: 0;
  }

  .who_title {
    font-size: 18px;
    border-right: 3px solid #ebab26;
    padding-right: 16px;
    padding-top: 6px;
  }

  #benefits > .container {
    padding: 0;
  }

  .pricing_col {
    width: 100%;
    margin: 8px 0;
  }

  #customization {
    margin: 350px 0 0 0;
    padding: 60px 0 42px 0;
  }

  .main_title {
    font-size: 20px;
    text-align: right;
    margin: 4px 0 16px 0;
    padding: 0 16px;
  }

  .main_excerpt {
    font-size: 16px;
    text-align: right;
    padding: 0 16px;
  }

  .col_support {
    width: 100%;
    padding: 0 30px 30px 0;
  }

  .icon_support {
    margin: unset;
  }

  .excerpt_support,
  .title_support {
    text-align: right;
  }

  .col_support .circle {
    left: unset;
    top: 20px;
  }

  .title_support {
    margin: 8px 0;
  }

  .social {
    padding: 0 6px;
  }

  #support .line {
    width: 1px;
    height: 580px;
    top: 272px;
    right: 37.5px;
  }

  #main_modules .container {
    background:
      url(../images/module-bg.svg),
      linear-gradient(90deg, #c4def8 0%, #edf4ff 100%);
    padding: 32px 16px;
  }

  .main_modules_body {
    background: none;
  }

  .nav-tabs {
    width: 85%;
  }

  .col_article {
    width: 100%;
  }

  .img_article {
    height: auto;
  }

  #hero {
    background-image: url(../images/hero-mobile.jpg);
    background-size: cover;
    background-position: center 0px;
    padding: 90px 0 100% 0;
  }

  .growth_row .growth_col {
    width: 100%;
    padding: 0 30px 42px 30px;
  }

  #benefits {
    margin: 0px 0 0 0;
    padding: 0px 0 0px 0;
  }

  .percentage {
    width: 77px;
  }

  #growth_section {
    position: relative;
    padding: 40px 34px;
    top: 0px;
    margin-bottom: 40px;
    border-radius: 0;
  }

  #hero_bg,
  #hero_logo {
    display: none;
  }

  #main_modules {
    margin-top: 0;
  }

  #hero_erp p,
  .feature_col2,
  .feature_col3,
  .benefits_col {
    width: 100%;
  }

  .solutions_box {
    height: 353px;
  }

  .solutions_col {
    width: 90%;
    padding: 0 8px;
  }

  .who_col {
    width: 100%;
    padding: 0 0 62px 0 !important;
    height: 268px;
  }

  #history .container {
    padding: 0;
  }

  .feature_details {
    padding: 0 24px 24px 24px;
  }

  .feature_box {
    height: auto !important;
  }

  .main_top_title {
    font-size: 14px;
    text-align: right;
    padding: 0 16px;
  }

  .customization_list_item > p {
    font-size: 14px;
    margin: 8px 0 0 0;
  }

  .customization_list_item {
    padding: 12px 24px;
  }

  .darsad_mobile {
    display: block;
  }

  .main_menu,
  .cta_demo,
  .modules,
  .darsad {
    display: none;
  }
}

.customization_image {
  position: relative;
}

.customization_image .img_loader {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(255, 255, 255, 0.6);
  z-index: 2;
  border-radius: 34px;
}

.customization_image.is-loading .img_loader {
  display: grid;
}

.customization_image .img_loader::after {
  content: "";
  width: 34px;
  height: 34px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

body {
  background: white !important;
}

/* ERP Page */

:root {
  --blue: #2f6bff;
  --card: #fff;
  --shadow: 0 10px 24px rgba(20, 60, 160, 0.12);
  --line: rgba(47, 107, 255, 0.28);
}

* {
  box-sizing: border-box;
}

.erp-sec {
  padding: 42px 0px;
  display: flex;
  justify-content: center;
}

.erp-stage {
  width: min(1200px, 100%);
  aspect-ratio: 2.55 / 1;
  margin: 0 auto;
  position: relative;
  border-radius: 18px;
  min-width: 700px;
}

.erp-card {
  position: absolute;
  transform: translate(-50%, 0);
  /* treat left as center like the mock */
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  text-align: center;
  z-index: 2;
  aspect-ratio: 1 / 1;
  width: 8.4%;
  transition: all 0.3s;
}

.erp-stage:not(.erp-off) .erp-card {
  color: #4382ff !important;
  fill: #4382ff !important;
  transform: translate(-50%, 0) !important;
  filter: none !important;
}

.erp-card .ico {
  font-size: 26px;
  line-height: 1;
  height: 26px;
}

.erp-card .txt {
  font-weight: 500;
  font-size: 1.05vw;
  line-height: 1.2;
  font-family: "Yekan Bakh FaNum";
  font-size: 16px;
  white-space: nowrap;
}

.erp-center {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  border-radius: 22px;
  background: #6ca2ff;
  box-shadow: 0 18px 40px rgba(47, 107, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 10%;
  transition: all 0.3s;
  cursor: pointer;
}

@media (max-width: 800px) {
  .erp-card {
    width: 11.6%;
  }

  .erp-center {
    top: 54.1%;
    width: 12.5%;
  }
}

@media (max-width: 1100px) {
  .erp-card .txt {
    font-size: 12px;
  }
}

.erp-title {
  font-size: 32px;
  letter-spacing: 0.5px;
  font-weight: 300;
}

.erp-card .ico svg {
  height: 100%;
  width: auto;
}

@media (max-width: 1100px) {
  .erp-title {
    font-size: 22px;
  }
}

.erp-toggle {
  width: 66%;
  height: 30%;
  border-radius: 999px;
  background: #4382ff;
  position: relative;
  transition: all 0.3s;
}

.erp-toggle .knob {
  position: absolute;
  top: 50%;
  left: 76%;
  transform: translate(-50%, -50%);
  width: 31%;
  height: 70%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: all 0.3s;
}

.erp-off .erp-center {
  background: #e9eaec;
  color: #979aaa;
}

.erp-off .erp-toggle {
  background: #e9eaec;
  border: solid 1px #484c5b;
}

.erp-off .erp-toggle .knob {
  background: #b7b9c0;
  box-shadow: none;
  left: 22%;
}

.erp-off .erp-lines {
  opacity: 0;
}

.erp-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s;
}

@media (max-width: 800px) {
  .erp-lines {
    transform: translate(0px, 12px);
  }
}

.erp-lines line {
  stroke: #53dbfa;
  stroke-width: 0.5px;
  /* in viewBox units; tweak */
}

.erp-lines line.ver {
  stroke-width: 0.15%;
  /* in viewBox units; tweak */
}

.erp-card,
.erp-center {
  position: absolute;
  z-index: 2;
}

:root {
  --erp-bg: #ffffff;
  --erp-card: #eef5ff;
  --erp-primary: #165dff;
  --erp-text: #1f2a44;
  --erp-muted: #5b6b86;
  --erp-line: rgba(22, 93, 255, 0.55);
  --erp-shadow: 0 10px 24px rgba(20, 40, 90, 0.08);
  --erp-radius: 18px;
}

/* ====== Component wrapper (use these class names) ====== */
.erp-timeline {
  padding: 34px 28px 44px !important;
  position: relative;
}

.erp-timeline__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Grid: 3 columns, 3 rows (top cards / pills / bottom cards) */
.erp-timeline__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* grid-template-rows: auto 120px auto;
    gap: 26px 26px; */
  align-items: start;
  position: relative;
  padding: 277px 55px;
}

/* Main horizontal line behind pills */
.erp-timeline__rail {
  align-self: center;
  height: 2px;
  background: var(--erp-line);
  position: absolute;
  z-index: 0;
  top: 50%;
  width: calc(100% - 380px);
  transform: translateY(-5px);
  left: 200px;
}

/* Pills row container (over the rail) */
.erp-timeline__pills {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
  /* purely visual */
}

.erp-timeline__pillWrap {
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.erp-timeline__pill {
  background: var(--erp-primary);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(22, 93, 255, 0.22);
  letter-spacing: 0.2px;
  white-space: nowrap;
  min-width: 140px;
  text-align: center;
}

/* Cards */
.erp-timeline__card {
  background: var(--erp-card);
  border-radius: var(--erp-radius);
  /*     box-shadow: var(--erp-shadow); */
  padding: 22px 22px 18px;
  width: 320px;
  position: absolute;
  top: -273px;
  height: 200px;
}

.erp-timeline__pillWrap:nth-child(2n) .erp-timeline__card {
  top: 128px;
}

.erp-timeline__grid .erp-timeline__card h3.erp-timeline__title {
  margin: 0 0 10px;
  color: #0b3fbf;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.erp-timeline__text {
  margin: 0;
  color: var(--erp-muted);
  font-size: 14px;
  font-weight: 600;
}

/* Dots + dashed connectors */
.erp-timeline__connector {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(22, 93, 255, 0.55) 0 8px,
    transparent 8px 16px
  );
}

.erp-timeline__dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: var(--erp-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.12);
}

/* Connectors for top cards: dot near rail, dashed up to card */
.erp-timeline__card--top-1 .erp-timeline__dot,
.erp-timeline__card--top-3 .erp-timeline__dot,
.erp-timeline__card--top-5 .erp-timeline__dot {
  bottom: -22px;
  /* dot sits above the rail */
}

.erp-timeline__card--top-1 .erp-timeline__connector,
.erp-timeline__card--top-3 .erp-timeline__connector,
.erp-timeline__card--top-5 .erp-timeline__connector {
  bottom: -71px;
  height: 43px;
}

/* Connectors for bottom cards: dot near rail, dashed down to card */
.erp-timeline__card--bot-2 .erp-timeline__dot,
.erp-timeline__card--bot-4 .erp-timeline__dot {
  top: -22px;
  /* dot sits below the rail */
}

.erp-timeline__card--bot-2 .erp-timeline__connector,
.erp-timeline__card--bot-4 .erp-timeline__connector {
  top: -71px;
  height: 43px;
}

/* Responsive */
@media (max-width: 1100px) {
  .erp-timeline-container {
    width: 100%;
    overflow-x: auto;
  }

  .erp-timeline {
    width: 1657px;
  }

  .erp-timeline__pillWrap:nth-child(2n) .erp-timeline__card {
    top: -273px;
  }

  /* Connectors for bottom cards: dot near rail, dashed down to card */
  .erp-timeline__card--bot-2 .erp-timeline__dot,
  .erp-timeline__card--bot-4 .erp-timeline__dot {
    top: auto;
    bottom: -22px;
    /* dot sits below the rail */
  }

  .erp-timeline__card--bot-2 .erp-timeline__connector,
  .erp-timeline__card--bot-4 .erp-timeline__connector {
    top: auto;
    bottom: -71px;
    height: 43px;
  }

  .erp-timeline__grid {
    padding: 277px 0px 0px 0px;
  }

  .erp-timeline {
    padding: 34px 0px 0 !important;
  }

  .erp-timeline__inner {
    max-width: none;
  }

  .erp-timeline__rail {
    top: 340px;
  }
}

.tabs-arrows > div.is-disabled {
  opacity: 0.35;
  filter: grayscale(1);
  cursor: default;
}

/* Mobile */
@media (max-width: 768px) {
  /* Horizontal list on mobile with “peek” + centered active item */
  .customization_list {
    /* desktop can stay as-is; these are safe defaults */
    display: flex;
    gap: 16px;
    width: calc(100% + 32px);
    margin-right: -16px;
  }
  .customization_list {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px; /* matches JS peek */
    padding-inline: 16px; /* matches JS peek */
    gap: 16px;
  }

  .customization_list::-webkit-scrollbar {
    display: none;
  }
  .customization_list {
    scrollbar-width: none;
  }

  .customization_list_item {
    /* JS will set flex-basis/max-width to nearly full width */
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex: 0 0 auto;
  }

  .customization_list_item p {
    display: block;
  }

  #customization {
    background: linear-gradient(360deg, #c8e1fa -28.1%, #edf4ff 100%);
  }
}

/* Optional: make active item feel “focused” */
.customization_list_item {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}
.customization_list_item.active {
  transform: scale(1);
  opacity: 1;
}
@media (max-width: 768px) {
  .customization_list_item:not(.active) {
    opacity: 0.85;
  }
}