/* شروع از صفحات با عرض 320 پیکسل */

body {
  display: block;
  background-color: #F5F5F5;
  font-family: 'ravi';
  color: #424242;
  ;
}

p,
h1 {
  margin: 0;
}

a {
  text-decoration: none;
}

.list-title h1 {
  font-size: 14px;
  font-weight: 400;
}

main {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-holder {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 35px;
}

main section {
  width: 100%;
  display: block;
}

main section>div {
  margin: 0 auto;
  width: 280px;
  max-width: 1920px;
}

.intro {
  display: flex;
  flex-direction: column;
  width: 272px;
  text-align: justify;
  gap: 14px;
}

.intro-head {
  margin-top: 30px;
  width: 148px;
  height: 47px;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.intro-head::after {
  content: '';
  display: block;
  width: calc(100% - 5px);
  height: 4px;
  background-color: #229799;
  margin-top: 10px;
}

.intro-head h1 {
  font-size: 20px;
  font-family: 'gofte';
  font-weight: 900;
}

.intro-text {
  font-size: 14px;
}

.video-about-us {
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: 25px;
}

.video-head {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 2px;
}

.video-head p,
.video-head span {
  display: inline-block;
  font-size: 16px;
}

.span-underline {
  font-weight: bold;
  position: relative;
  padding-bottom: 2px;
}

.span-underline::after {
  position: absolute;
  content: '';
  bottom: 0;
  right: 0;
  width: 0;
  max-width: 100%;
  height: 2px;
  background-color: var(--hamyarcolor);
  animation-name: var(--animname);
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes animline {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

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

.video-holder video {
  object-fit: cover;
  border-radius: 14px;
}

.about-ceo-holder {
  display: flex;
  flex-direction: column;
  gap: 39px;
}


.ceo-picture {
  display: flex;
  justify-content: center;
}

.ceo-picture img {
  width: 122px;
  border: 8px solid #229799;
  border-radius: 132px;
}

.ceo-content {
  display: flex;
  gap: 15px;
  align-items: center;
}

.quote-icon {
  color: #229799;
}

.ceo-content-info {
  display: flex;
  flex-direction: column;
  width: 174px;
  gap: 6px;
}

.ceo-content-info h2 {
  font-size: 25px;
  font-family: 'ravi';
  font-weight: 700;
}

.line-in-between::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background-color: #d9d9d9;
}

.ceo-content-info p {
  font-size: 20px;
}

.about-ceo p {
  font-size: 14px;
  text-align: justify;
  font-weight: 400;
  line-height: 28px;
}

.fourth-section{
  background-color: #229799;
}

.why-us-holder {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px 0 41px 0;
  justify-content: center;
  align-items: center;
  gap: 25px;
}

.why-us-head h2 {
  display: flex;
  width: 260px;
  height: 61px;
  align-items: center;
  justify-content: center;
  font-family: 'ravi';
  font-size: 25px;
  font-weight: 700;
  color: #F5F5F5;
}

.why-us-card-holder {
  display: flex;
  width: 100%;
  max-width: 320px;
}

.why-us-card {
  display: flex;
  flex-direction: column;
  width: 290px !important;
  padding: 31px 20px;
  margin: 0 auto;
  height: 369px;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
  gap: 4px;
}

/* .why-us-card {
  margin-right: 15px;
} */

.card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 4px;
}

.card-head h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  font-size: 12px;
  font-weight: 700;
}

.card-text {
  font-size: 14px;
  text-align: justify;
}

.our-team-holder {
  width: 100%;
  gap: 35px;
}

.our-team-head,
.our-projects-head {
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.our-team-head h2 {
  font-family: 'ravi';
  font-size: 22px;
  font-weight: 700;
}

.team-member-holder {
  width: 100%;
  margin: 0 auto;
  gap: 35px;
}

.our-team {
  display: flex;
  width: 100%;
  padding: 0 15px;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 35px;
}

.our-team::-webkit-scrollbar {
  display: none;
}

.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.team-member-picture img {
  width: 155px;
  height: 155px;
  object-fit: cover;
  border: 7px solid #229799;
  border-radius: 1000px;
}

.team-member-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  gap: 3px;
}

.sixth-section{
  background-color: #e3e3e3;
}

.our-projects-holder {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 45px 0;
  gap: 49px;
}

.our-projects-head h2 {
  font-family: 'ravi';
  font-size: 22px;
  font-weight: 700;
}

.our-projects-card-holder {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 115px;
}

.our-projects-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  white-space: nowrap;
}

.project-logo {
  padding: 19px;
  background-color: #fff;
  border-radius: 12px;
}

.project-info {
  display: flex;
  flex-direction: column;
  height: 83px;
  align-items: center;
  justify-content: center;
}

.swiper {
  width: 100%;
  max-width: 1300px;
}

.project-name h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 150%;
}

/* آغاز بخش اسلایدر بینهایت */

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /* اندازه پیکسل را مشابه اندازه هر کارت قرار دهید */
    /*عدد دوم را را در صورت تغییر تعداد کارت ها عوض کنید*/
    transform: translateX(calc(250px * 7));
  }
}

.infinite-slider {
  height: fit-content;
  margin: auto;
  overflow: hidden;
  position: relative;
}

.infinite-slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.infinite-slider::before {
  left: 0;
  top: 0;
}

.infinite-slider .slide-track {
  animation: scroll 38s linear infinite;
  display: flex;
  /* اندازه پیکسل را مشابه اندازه هر کارت قرار دهید */
  /* به عدد دوم دست نزنید */
  width: calc(250px * 14);
}

.infinite-slider:hover .slide-track {
  animation-play-state: paused;
}

/* این کلاس اندازه هر کارت را مشخص میکند */
.infinite-slider .slide {
  height: fit-content;
  width: 250px;
}


/* پایان بخش اسلایدر بی نهایت */

.contact-us {
  width: 100%;
  padding: 0 0 28px 0;
  overflow: hidden;
  max-width: 100%;
}

.stay-connected-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0 20px;
}

.background-img img {
  position: absolute;
  left: -48px;
  bottom: -45px;
  width: 100px;
  opacity: 0.1;
  z-index: 0;
}

.stay-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.stay-connected h2 {
  font-family: 'ravi';
  font-size: 20px;
  font-weight: 700;
}

.contact-us p {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
}

.connect-btn a button {
  display: flex;
  width: 125px;
  height: 43px;
  align-items: center;
  justify-content: center;
  background-color: #229799;
  color: #fff;
  border: none;
  border-radius: 10px;
  gap: 6px;
}

@media only screen and (min-width: 402px) {
  .intro-head {
    width: 186px;
  }

  .intro {
    width: 342px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

@media only screen and (min-width: 412px) {
  .intro-head {
    width: 191px;
  }

  .intro {
    width: 352px;
  }

  .video-holder video {
    width: 348px;
    height: 216px;
  }

  .ceo-picture img {
    width: 155px;
    border-radius: 132px;
  }

  .about-ceo-holder {
    width: 349px;
  }

  .background-img img {
    width: 158px;
    left: -73px;
    bottom: -54px;
  }

  .stay-connected h2 {
    font-size: 25px;
  }

  .contact-us p {
    font-size: 16px;
  }
}

@media only screen and (min-width: 440px) {
  .video-holder video {
    width: 280px;
    height: 174px;
  }

  .ceo-picture img {
    width: 122px;
    border-radius: 132px;
  }

  .stay-connected h2 {
    font-size: 20px;
  }

  .contact-us p {
    width: 273px;
    font-size: 14px;
  }
}

@media only screen and (min-width: 700px) {
  .intro {
    width: 523px;
  }

  .video-holder video {
    width: 399px;
    height: 248px;
  }

  .about-ceo-holder {
    flex-direction: row;
    width: 523px;
    align-items: flex-start;
    gap: 10px;
  }

  .our-team-head h2 {
    font-size: 25px;
  }

  .our-team {
    gap: 65px;
  }

  .stay-connected h2 {
    font-size: 25px;
  }

  .contact-us p {
    width: 316px;
    font-size: 16px;
  }
}

@media only screen and (min-width: 834px) {
  .intro {
    width: 604px;
  }

  .video-holder video {
    width: 453px;
    height: 281px;
  }

  .about-ceo-holder {
    width: 606px;
    gap: 17px;
  }

  .our-team {
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    gap: 70px;
  }

  .team-member {
    width: 139px;
  }

  .team-member img {
    width: 135px;
    height: 135px;
  }
}

@media screen and (min-width:992px) {
  .our-team {
    gap: 35px;
  }

  .our-team>div {
    scale: 0.75;
  }
}

@media only screen and (min-width: 1024px) {
  .intro {
    width: 696px;
  }

  .about-ceo-holder {
    width: 696px;
    gap: 17px;
  }

  .contact-us p {
    width: 700px;
  }
}

@media only screen and (min-width: 1280px) {
  .intro {
    width: 929px;
  }

  .about-ceo-holder {
    width: 929px;
    gap: 10px;
  }

  .ceo-picture img {
    width: 125px;
  }

  .why-us-card {
    width: 302px !important;
  }

  .our-team {
    gap: 70px;
  }

  .our-team>div {
    scale: 1;
  }

  .contact-us {
    height: 250px;
  }

  .stay-connected {
    height: 250px;
    justify-content: center;
    gap: 15px;
  }

  .background-img img {
    width: 263px;
    left: -120px;
    bottom: -43px;
  }
}

@media only screen and (min-width: 1440px) {}

@media only screen and (min-width: 1512px) {}

@media only screen and (min-width: 1728px) {}

.project-year {
  display: none;
}