/* Basic styles */

:root {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box !important;
}

body {
  font-family: "Vazirmatn", sans-serif !important;
  direction: rtl;
  text-align: right;
  overflow: hidden;
  overflow-y: scroll;
  /* overflow: hidden; */
}

/* Header */
header {
  padding: 0px 0;
  color: #fcf7f7;
  direction: rtl;
}

.header__top {
  background-color: #4558d9;
  width: 100%;
  height: 50px;
}

.container__logo--list {
  width: 100%;
  margin: 30px auto;
  max-width: 100%;
  display: flex;
  flex-direction: row;
}

.btn__menu {
  background: none;
  border-radius: 10px;
  border: 2px solid #2f42bb;
  margin: 0 10px;
  cursor: pointer;
  position: relative;
  display: none;
  z-index: 199;
  height: 50px;
  padding: 2% 0;
}

.bar {
  width: 30px;
  padding: 2px;
  background: #5cab3f;
  margin: 5px;
}

.menu__res {
  width: 60%;
  margin: auto !important;
  display: block;
  position: absolute;
  top: 2%;
  transition: all 800ms;
  z-index: 198;
  height: 0;
  overflow: hidden;
}

.menu__active {
  position: absolute;
  transition: all 2500ms;
  height: 500px !important;
}

.menu__mobile {
  background: #fff;
  box-shadow: inset 0 0 10px #7b7b7b;
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  text-align: center;
  list-style: none;
  padding: 5%;
  border-radius: 15px;
}

.item__mobile {
  width: 80px;
  margin: 0 auto !important;
  border-bottom: 1px solid #fd8434;
  transition: all 500ms;
}

.link__mobile {
  text-decoration: none !important;
  color: #000;
  transition: all 500ms;
}

.item__mobile:hover {
  width: 100% !important;
  transition: all 500ms;
  border-bottom: 2px solid #2f42bb;
}

.link__mobile:hover {
  color: #2f42bb;
  font-size: 1.3rem;
}

.container__stats {
  width: 70%;
  margin: 150px 15% 0 15%;
  max-width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f6f6f6;
  box-shadow: 0 0 15px #4f4f4f;
  border-radius: 20px;
  padding: 20px 0 !important;
}

.container__services {
  width: 70%;
  height: 500px;
  margin: 0 15% 0 15%;
  max-width: 100%;
  align-items: center;
  border-radius: 20px;
  padding: 20px 0 !important;
}

.logo {
  height: fit-content;
  cursor: pointer;
  text-align: center;
  width: 25%;
  height: 100px;
}

.logo img {
  width: 120px;
  height: 100%;
  height: auto;
  cursor: pointer !important;
  margin: 0 auto;
}

.menu {
  width: 60%;
  height: 45px;
  margin: 0;
  display: block;
}

.list {
  list-style: none;
  display: flex;
  align-items: center;
}

.list__item {
  padding: 7px 35px;
  border-left: 3px solid #fd8434;
}

.list__item:last-of-type {
  border: 0 !important;
}

.link__item {
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  color: #646464;
  width: 100%;
  height: 100%;
  display: inline-block;
  transition: all 300ms;
}

.link__item:hover {
  font-size: 20px;
  font-weight: 800;
  color: #4558d9;
  border-bottom: 3px solid #4558d9;
}

.btn__demo {
  width: 20%;
  height: 40px;
}

.btn__demo--txt {
  font-size: 15px;
  font-weight: 900;
  background: #56a644;
  border: 0;
  outline: 0;
  cursor: pointer;
  width: 144px;
  height: 40px;
  color: #fff;
  font-family: "Vazirmatn", sans-serif !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  transition: all 400ms;
}

.btn__demo--txt:hover {
  background: #fd8434;
}

/* Hero Section */
.hero {
  display: flex;
  align-items: center;
  padding: 50px 0;
  background-color: #ffffff;
  height: 550px;
  width: 100%;
}

.hero-image {
  background: #e9f4ff;
  border-radius: 50%;
  padding: 2%;
  text-align: center;
  margin-right: 20%;
  width: 475px;
  height: 450px;
}

.hero-image img {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
}

.hero-text h1 {
  font-size: 50px;
  font-weight: 800;
  color: #1d3557;
  margin: 20px 15% 0 0;
  width: 550px;
}

.hero-text h1 .black-text {
  color: #1d3557;
  /* مشکی */
}

.hero-text h1 .orange-text {
  color: #ff5722;
  /* نارنجی */
}

.hero-text p {
  color: #6c757d;
  margin: 10px 15%;
  width: 550px;
  color: #03577b;
  font-size: 22px;
  font-weight: 700;
}

.key__word {
  color: #ff5722;
  font-weight: 900;
  font-size: 28px;
}

.btn-primary {
  background-color: #4558d9;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  margin: 15px 15% 0 0;
  width: 500px;
  height: 47px;
  font-family: "Vazirmatn", sans-serif;
  transition: all 300ms;
  border: 0;
  outline: 0;
}

.btn-primary:hover {
  background-color: #ff5722;
}

/* Stats Section */
.stats {
  background-color: #fff;
  text-align: center;
}

.stat-item {
  display: flex;
  margin: 0 20px;
  align-items: center;
}

.stat-item h2 {
  font-size: 20px;
  color: #1d1d1e;
}

.stat-item p {
  font-size: 15px;
  color: #6c757d;
  margin-top: 10px;
}

/* Services Section */
.services {
  padding: 30px 0;
  text-align: center;
  height: fit-content;
  height: 700px;
}

.container__services span {
  border-right: 3px solid #4558d9;
  border-radius: 25px;
  width: 7px;
  height: 48px;
  margin: 2% 10% 0 0;
  position: relative;
  z-index: 99;
}

.container__services h2 {
  width: fit-content;
  margin: 0% 0 0 0%;
  margin: 15px 40px 0 0;
  position: relative;
  z-index: 99;
}

.image__services {
  width: 271px;
}

.image__services img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.image__services img:hover {
  cursor: pointer;
  transform: scale(1.2);
  filter: drop-shadow(0 -80px 10px rgba(131, 131, 131, 0.5));
  /* سایه دقیقاً به شکل تصویر اعمال می‌شود */
}

.image__service1 {
  padding: 80px 0 0 0;
  width: 20%;
}

.image__service2 {
  padding: 58px 0 0 0;
}

/* .image__service2 img{
  width:100%;
} */

.image__service3 {
  padding: 105px 0 0 0;
}

.image__service3 img {
  width: 80%;
}

.road__map {
  text-align: center;
  margin: 50px 0 0 0;
  position: relative;
  width: 100%;
  height: 340px;
}

.road__map img {
  height: 620px;
  position: relative;
  left: 1% !important;
}

.service__us {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service__btn {
  width: 234.62px;
  height: 42.02px;
}

.lable__group-114 {
  width: 100%;
  margin: 80px auto !important;
  display: flex;
  /* position: absolute;
  top: 50% !important; */
  justify-content: center;
  align-items: center;
}

.label__img--services {
  width: 100%;
  display: flex;
  position: relative;
}

.service__title {
  display: flex;
  border-right: 7px solid #4558d9;
}

.content__text--service {
  display: block !important;
  text-align: justify !important;
  line-height: 30px;
}

.h4__services {
  display: inline;
}

.all__services {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0.7%;
  border: 0.4px solid #458ff6;
  border-radius: 55px;
  text-decoration: none;
  color: #2f42bb;
  transition: all 300ms;
}

.all__services img {
  transition: all 300ms;
  transform: rotate(180deg) translateX(-10px);
}

.all__services:hover {
  background: #fd8434;
  color: #fff;
  border: 0;
}

.all__services:hover img {
  transform: translateX(-5px) rotate(360deg);
}

/* enterprise customers start*/
.customers__container {
  display: flex;
  justify-content: center;
  margin: 100px 0 100px 0;
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
  /* برای مخفی کردن آیکون‌های خارج از مدار */
  margin-top: 200px;
  text-align: center;
  transition: all 500ms !important;
}

.vezarat {
  mix-blend-mode: color-burn !important;
}

.icons {
  width: 12%;
  /* اندازه مناسب برای آیکون‌ها */
  height: 100%;
  padding: 1%;
  position: absolute;
  top: 40%;
  left: 30%;
  transform-origin: center;
  transition: all 400ms;
}

.icons:hover {
  transition: all 400ms;
  filter: drop-shadow(10px 15px 5px #33333380) !important;
}

.icons img {
  width: 250px;
  height: 250px;
}

.image__icons {
  width: 50%;
  height: 50%;
  margin: 0 auto !important;
  cursor: pointer;
}

.image__icons img {
  width: 100%;
  height: 100%;
  transition: all 500ms;
}

/* .active{
  filter:grayscale(1);
}

.unactive{
  filter:grayscale(0);
} */

.nav-button {
  position: absolute;
  top: 50%;
  border: none;
  padding: 10px 13px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  background: #4558d9;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  transition: all 200ms;
}

#prevButton {
  top: 65%;
  left: 10%;
  transform: rotate(-90deg);
}

#nextButton {
  top: 65%;
  right: 10%;
  transform: rotate(90deg);
}

.nav-button:hover {
  background: #fd8434;
}

/* کلاس‌های رنگ برای آیکون‌ها */
/* .image__icons img {
  filter: grayscale(1); 
  transition: filter 0.5s ease;
}

.active .image__icons img {
  filter: grayscale(0);
} */

/*enterprise customers end*/

.we__are--here {
  width: 100%;
  height: fit-content;
  margin-top: 400px;
}

.we__are--part {
  width: 76%;
  height: 500px;
  margin: 100px 13%;
  display: flex;
}

.part__section {
  width: 50%;
  height: 100%;
  padding: 0;
  align-items: center;
}

.part__section img {
  margin: 10% 0 0 0 !important;
}

.title__we--here {
  display: inline-block;
  font-size: 25px;
  font-weight: 700;
  margin: 100px 25px 0 0;
  line-height: 25px;
}

.text__we--here {
  font-size: 20px;
  font-weight: 400;
  color: #646464;
  line-height: 40px;
  text-align: justify;
  width: 55%;
  margin: 40px 30px;
}

.part1 {
  width: 40%;
  text-align: center;
}

.part2 {
  width: 60%;
}

.part3 {
  width: 50%;
}

.part3 p {
  width: 72%;
}

.part4 {
  width: 28%;
  text-align: right;
}

.part5 {
  width: 40%;
  text-align: center;
}

.part6 {
  width: 60%;
}

.part7 {
  width: 50%;
}

.part7 p {
  width: 100%;
}

.part8 {
  width: 50%;
}

.img__we {
  margin: 0 30px 0 0;
}

.gradient__line {
  display: flex;
}

.one__color {
  width: 14px;
  height: 7px;
  border-radius: 10px;
  background-color: #03577b;
}

.bg__gradient {
  width: 59px;
  height: 7px;
  border-radius: 10px;
  background: linear-gradient(90deg, #389bb8 0%, #03577b 100%);
  margin-left: 100%;
}

.gradient__line p {
  width: fit-content;
  line-height: 45px;
}

.bg__gradient,
.one__color {
  margin: 55px 0 0 5px;
  position: relative;
  left: 13%;
}

.border__left {
  width: 7px;
  height: 48px;
  background: #4558d9;
  border-radius: 10px;
}

.title__ {
  display: flex;
  width: 1330px;
  margin: 0px auto !important;
  gap: 20px;
}

.title__ h2 {
  color: #4558d9;
  font-size: 25px;
  font-weight: 700;
}

/* Footer Styles */
.footer {
  color: #000;
  font-family: "Vazirmatn", sans-serif;
  border-top: 2px solid #fd8434;
  height: 50px;
  margin-top: 400px;
}

.concat__footer {
  padding: 2%;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.double__colum {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 40%;
}

.phone__concat,
.email__concat {
  height: 200px !important;
  padding: 7% 0 !important;
  display: block;
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.concat {
  width: 40%;
  align-items: center;
  padding-top: 5%;
  gap: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 15px #fd8434;
  border-radius: 15px;
  float: right;
  text-shadow: 0 0 10px #444444;
}

.address__concat {
  text-align: center;
  padding: 0 !important;
}

.map {
  width: 450px;
  height: 250px;
}

.icon__footer {
  font-size: 1.5rem;
  padding: 10px;
}

.Accordion__list {
  height: auto;
  margin-block: 0rem;
  display: flex;
  justify-content: space-between;
}

.detales {
  width: 70%;
  margin: 300px auto;
  margin-block: 5rem;
  height: auto;
  border-radius: 10px;
  align-items: center;
}

.container__img {
  display: flex;
  justify-content: center;
  margin: 0 auto !important;
}

.image__summery {
  width: 200px;
  height: 200px;
  margin-top: 47px;
}

.image__summery2 {
  width: 400px;
  height: 250px;
}

.summeryimg {
  transition: all 400ms;
  cursor: pointer;
}

.summeryimg:hover {
  filter: drop-shadow(0 -50px 10px #83838380);
  transform: scale(1.2);
}

.colume__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content__view {
  width: 70%;
  border: 1px solid #ffffff;
  border-radius: 10px;
  margin: 50px auto !important;
  overflow: hidden;
  height: 0px;
  opacity: 0;
  transition: height 0.9s ease, opacity 0.9s ease;
  background: #eaeaea98;
}

.content__view--active {
  height: 680px !important;
  width: 70% !important;
  opacity: 1;
  transition: height 0.9s ease, opacity 0.9s ease;
  box-shadow: 0 0 30px #525151;
  position: relative;
}

.content__cra {
  padding: 1%;
}

.insert {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 15px;
}

.insert__concat {
  display: flex;
  flex-direction: column;
  width: 30%;
  box-shadow: 0 0 15px #fd8434;
  border-radius: 15px;
  margin: 30px 0 0 0;
}

.insert__phone {
  width: 38% !important;
}

.darbare__txt {
  text-align: justify !important;
  padding: 0%;
  font-size: 1.2rem;
  line-height: 45px;
  width: 100% !important;
}

.btn__close--acc2 {
  background: #fd8434;
  padding: 0 0.5%;
  font-size: 1.7rem;
  color: #fff;
  outline: 0;
  border: 0;
  border-radius: 50%;
  position: absolute;
  top: 90%;
  cursor: pointer !important;
}

.btn__close--acc3 {
  background: #fd8434;
  padding: 0 0.5%;
  font-size: 1.7rem;
  margin: auto !important;
  color: #fff;
  outline: 0;
  border: 0;
  border-radius: 50%;
  display: block;
  cursor: pointer !important;
}

.btn__close--acc4 {
  background: #fd8434;
  padding: 0 0.5%;
  font-size: 1.7rem;
  margin: auto !important;
  color: #fff;
  outline: 0;
  border: 0;
  border-radius: 50%;
  display: block;
  cursor: pointer !important;
}

.image__detales--icon {
  width: 70px;
  height: 100px;
}

.content__cra p {
  display: inline;
}

#map2 {
  width: 800px;
  height: 150px;
  margin: 30px auto !important;
  /* background: #03577b; */
}

#map {
  margin: 30px 0 0 0;
}

/*accordion service :*/
.container__content--services {
  margin: 100px auto !important;
  width: 70%;
  height: 0;
  background: #eaeaea98;
  border-radius: 10px;
  transition: height 0.7s ease, border 0.7s ease;
  overflow: scroll;
  position: relative;
  z-index: 195;
  scrollbar-width: none;
}

.text__content--services {
  padding: 1%;
  opacity: 0;
  /* شروع با حالت پنهان */
  /* height: 0; شروع با ارتفاع صفر */
  transition: opacity 1500e9F4FFms ease, height 5000ms ease;
  /* تغییرات انیمیشن */
  overflow: hidden;
}

.services__txt {
  text-align: justify;
}

.btn__close--acc {
  background: #fd8434;
  padding: 0 0.5%;
  font-size: 1.7rem;
  color: #fff;
  outline: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer !important;
  position: relative;
  top: 10%;
}

.container__content--services.active {
  height: 600px;
  /* ارتفاع فعال کانتینر */
}

.text__content--services.active {
  height: auto;
  /* ارتفاع متن به صورت خودکار */
  opacity: 1;
  /* متن به حالت قابل مشاهده */
}

.img__services--icon {
  width: 100px;
  height: 70px;
}

/*
///////////////////////////////////////////////////////////////////////
*/
.overlay {
  position: absolute;
  width: 100%;
  height: 9000px !important;
  background: #1d1d1e40;
  display: none;
  z-index: 198;
}

.form__popup {
  width: 600px;
  position: absolute;
  top: 4%;
  right: 35%;
  z-index: 200;
  background: #fff;
  border-radius: 15px;
  display: none;
  padding: 1%;
}

.active {
  display: block !important;
}

#contact-form {
  text-align: center;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 2s ease, height 2s ease, transform 1s ease;
}

.active_form {
  height: 530px !important;
  opacity: 1 !important;
  transition: opacity 2s ease, height 2s ease !important;
}

.closing_form {
  height: 0 !important;
  opacity: 0 !important;
  transition: opacity 0.9s ease, height 0.9s ease !important;
}

.active_of--error {
  height: auto !important;
  opacity: 1 !important;
}

input {
  display: block;
  margin: 20px auto;
  width: 500px;
  height: 70px;
  /* background: #e9f4ff; */
  font-size: 1.2rem;
  font-family: "Vazirmatn", sans-serif !important;
  border: 2px solid #79d15a;
  outline: 0;
  border-radius: 7px;
  color: #050505;
}

.btnSub {
  border: 0;
  outline: 0;
  background: #79d15a;
  color: #fff;
  padding: 1% 2%;
  width: 200px;
  border-radius: 5px;
  font-size: 1.1rem;
  font-family: "Vazirmatn", sans-serif !important;
  transition: all 500ms;
}

.btnSub:hover {
  background: #5cab3f;
}

::placeholder {
  color: #000000;
  font-size: 1.2rem;
  font-family: "Vazirmatn", sans-serif !important;
  padding: 5px;
}

.error__message {
  display: none;
  color: #f00;
}

.error__show {
  display: block !important;
  font-size: 0.9rem;
}

.state_error {
  border: 1px solid #f00 !important;
  display: block !important;
}

.capcha {
  margin: 10px auto !important;
  width: 90px;
  border: 0.5px solid #79d15a;
}

/*&&&&&&&&&&&&&&&&&&&&&&&*/
.flex__colum {
  display: flex;
}

.grecaptcha-badge {
  visibility: hidden;
}

.active__index {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #2f42bb !important;
  border-bottom: 2px solid #4558d9 !important;
}

/*********************************************/

.products__container--halfI {
  width: 100%;
  height: auto !important;
  /* border:2px solid #fc0; */
  padding: 0.5%;
  margin: 200px 0 0px 0 !important;
}

.products__container--halfII {
  margin: 0px 0 200px 0 !important;
}

.container__products {
  width: 100%;
  height: 100%;
  /* border:2px solid purple; */
}

.products__dis {
  width: 200px;
  height: 200px;
  margin: 1%;
  /* border:1px solid #e06d0f; */
  transition: all 300ms;
  cursor: pointer;
}

.dis1,
.dis6 {
  margin: 120px 20px !important;
}

.dis2,
.dis5 {
  margin: 60px 20px !important;
}

.pro3,
.pro4 {
  margin: 80px 15px !important;
}

.pro2,
.pro5 {
  margin: 30px 15px !important;
}

.pro1,
.pro6 {
  margin: -30px 15px !important;
}

.products__dis:hover {
  transform: scale(1.2);
  filter: drop-shadow(30px 10px 25px #626262);
}

.show__products {
  width: 100%;
  height: auto;
  /* border: 2px solid #fcaa00; */
  /* display: none; */
  opacity: 0;
  transition: all 700ms;
  margin: 70px 0 !important;
  /* overflow: hidden !important; */
  transform: scaleY(-1);
}

.container__show {
  width: 100%;
  height: 300px;
  /* border: 2px solid purple; */
  /* overflow: hidden !important; */
  transform: scaleY(-1);
}

.show {
  width: 80%;
  height: 0;
  box-shadow: 0 0 35px #000;
  margin: 0 auto !important;
  text-align: center;
  position: absolute;
  right: 10%;
  visibility: hidden;
  opacity: 0;
  transition: all 700ms;
  overflow: scroll; /* مخفی کردن قسمت اضافی */
  scrollbar-width: none;
  border-radius: 10px;
  transform-origin: top; /* تغییر نقطه شروع انیمیشن به پایین */
  transform: scaleY(0); /* شروع با ارتفاع صفر */
  /* حالت اولیه */
}

.active__product {
  opacity: 1 !important;
  display: block !important;
  height: 300px;
  transition: all 700ms;
  visibility: visible;
  transform: scaleY(1); /* افزایش ارتفاع به 100% */
  /* حالت نهایی */
}

/*********************************************************************************************************************/

.is__active--service {
  margin: 400px 0 !important;
  transition: all 800ms;
}

.is__unactive--service {
  margin: 0 0 !important;
}

/***************************product tab ::*********************************/

.products_tab {
  text-align: center;
}

#container_product_title {
  display: flex;
  gap: 50px;
  justify-content: center;
  margin: auto;
  width: 60%;
}

#products_visible {
  /* background: red; */
  width: 60%;
  margin: 0px auto !important;
  padding: 10px;
}

.products_title_tap {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 500ms;
  padding: 0.5% 2%;
}

/* .products_title_tap::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  top: -100%; 
  right:0;
  bottom: 0; 
  background-color: orange; 
  transition: all 500ms; 
}

.products_title_tap:hover::after {
  top: 90%;
  right: 0;
} */

.product_visible {
  background: #e9f4ff;
  border-radius: 10px;
  box-shadow: 0 0 10px #03577b;
  overflow-y: auto;
  overflow-x: hidden;
  height: 650px;
}

.product_active_tab {
  background: #e9f4ff;
  box-shadow: 0 10 10px #03577b;
  border-radius: 7px;
  border-top: 8px solid #fd8434;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.products_discription {
  /* border:2px solid #03577b; */
  width: 96%;
  height: 150px;
  margin: 20px auto !important;
  border-radius: 10px;
  box-shadow: 0 0 10px #03577b;
  overflow: hidden;
  transition: all 400ms;
  background: #4558d9;
  display: flex;
  align-items: center;
  color: #fff;
}

.products_discription:hover {
  transform: scale(1.04);
}

.products {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none !important;
}

.product {
  width: 23%;
  height: 150px;
  margin: 3% 1%;
  border: 2px solid #fd8434;
  box-shadow: 0 0 10px gray;
  background: #ffd1b3a7;
  transition: all 400ms;
  border-radius: 10px;
}

.productbpms {
  width: 23%;
  height: 150px;
  margin: 3% 1%;
  border: 2px solid #fd8434;
  box-shadow: 0 0 10px gray;
  background: #ffd1b3a7;
  transition: all 400ms;
  border-radius: 10px;
  display: flex;
  gap: 20px;
}

.customer_custom {
  width: 94%;
  height: 400px;
  margin: auto !important;
  text-align: right;
}

.product:hover {
  transform: scale(1.07);
}

.productbpms:hover {
  transform: scale(1.07);
}

.product_erp {
  width: 48%;
  height: 150px;
  margin: 4% 0.6%;
  border: 2px solid #fd8434;
  background: #ffd1b3a7;
  box-shadow: 0 0 10px gray;
  transition: all 400ms;
  border-radius: 10px;
}

.product_erp:hover {
  transform: scale(1.1);
}

.toggle_visible {
  display: none !important;
}

#contain_modules {
  width: 96%;
  margin: auto;
}

.modules_prodouct {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.modules_prodouct_active {
  display: flex !important;
}

.modules_prodouct_unActive {
  display: none !important;
}

.module {
  width: 10%;
  height: 100px;
  border: 1px solid #fd8434;
  margin: 5.5% 1% 0 1%;
  transition: all 400ms;
  border-radius: 8px;
}

.module:hover {
  transform: scale(1.1);
}

.icon_product {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.text_product {
  font-weight: 100;
  font-size: 0.9rem;
}

::selection {
  background: #53c551d8;
  color: #fff;
}

.icon_erp_product {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.image_bpms_customer_custom {
  width: 100%;
  height: 100%;
  transition: all 400ms;
}

.image_bpms_customer_custom:hover {
  filter: drop-shadow(40px 0px 10px #858585);
}

.why_bpms_us {
  width: 60%;
  margin-top: 4%;
}

.bpms_link {
  text-decoration: none;
  color: #f00;
}

.bpms_link:hover {
  text-decoration: underline;
  color: #700101;
}

.join_sucessfuly_customer {
  color: #389bb8;
  cursor: pointer;
  transition: all 300ms;
}

.join_sucessfuly_customer:hover {
  color: #5cab3f;
  text-decoration: overline;
}

.more_discription {
  font-size: 0.9rem;
  color: #f00;
  text-decoration: none;
}

.more_discription:hover {
  font-size: 0.9rem;
  color: #700101;
  text-decoration: underline;
}

/*erp section in tap 3 ::*/
.contain_erp_product {
  display: flex;
  justify-content: center;
  width: 100%;
}

.side_erp {
  width: 100%;
  margin: 1%;
  padding: 0 !important;
  height: auto;
}

.etc_erp {
  display: flex;
  flex-wrap: wrap;
}

.productivity_erp {
  padding: 2% !important;
}

.product_sub5 {
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
