/* 
    34. About page css 
*/
@media only screen and (max-width: 991px) {
  .team__section.section--padding {
    padding-bottom: 6rem;
  }
}

@media only screen and (max-width: 767px) {
  .team__section.section--padding {
    padding-bottom: 4rem;
  }
}

@media only screen and (max-width: 991px) {
  .about__thumb {
    margin-bottom: 3rem;
  }
}

@media only screen and (max-width: 767px) {
  .about__thumb {
    margin-bottom: 2.5rem;
  }
}

.about__thumb--items {
  margin-right: 2rem;
}

.about__thumb--items:last-child {
  margin-right: 0;
}

.about__thumb--items:first-child {
  margin-top: 8rem;
}

@media only screen and (max-width: 991px) {
  .about__thumb--items:first-child {
    margin-top: 0;
  }
}

.about__thumb--play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translatey(-50%) translatex(-50%);
}

.about__thumb--play__icon {
  width: 4rem;
  height: 4rem;
  line-height: 3.5rem;
  text-align: center;
  background: var(--secondary-color);
  color: var(--text-white-color);
  border-radius: 50%;
}

.about__thumb--play__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
  transform: scale(1.1);
}

@media only screen and (max-width: 575px) {
  .about__content {
    text-align: center;
  }
}

.about__content--subtitle {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 2.2rem;
}

@media only screen and (min-width: 992px) {
  .about__content--subtitle {
    font-size: 2rem;
    line-height: 2.4rem;
  }
}

.about__content--maintitle {
  font-weight: 700;
}

@media only screen and (min-width: 992px) {
  .about__content--maintitle {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about__content--maintitle {
    font-size: 3rem;
    line-height: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .about__content--maintitle {
    font-size: 3.5rem;
    line-height: 4.4rem;
  }
}

.about__content--desc {
  font-size: 1.6rem;
  line-height: 2.8rem;
  color: var(--text-gray-color);
}

.about__author--name {
  font-weight: 600;
  line-height: 2.6rem;
}

.about__author--rank {
  color: var(--light-color);
}

.about__author--signature {
  position: absolute;
  top: 50%;
  left: 105px;
  transform: translatey(-50%);
}

/*
    team member css
*/
.team__items:hover .team__thumb {
  border-color: var(--secondary-color);
}

.team__thumb {
  position: relative;
  line-height: 1;
  display: inline-block;
  border: 2px solid var(--border-color);
  padding: 0.3rem;
  transition: var(--transition);
  border-radius: 10px;
}

.team__thumb--img {
  border-radius: 10px;
}

.team__social {
  gap: 1rem;
}

@media only screen and (min-width: 1200px) {
  .team__social {
    gap: 1.2rem;
  }
}

.team__social--icon {
  width: 2.8rem;
  height: 2.8rem;
  text-align: center;
  background: var(--bg-offwhite-color);
  color: var(--body-text-color);
  line-height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team__social--icon:hover {
  background: var(--secondary-color);
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .team__social--icon {
    width: 3rem;
    height: 3rem;
    line-height: 3.2rem;
  }
}

.team__content {
  padding: 1rem 0 0;
}

@media only screen and (max-width: 991px) {
  .team__content {
    padding: 0.8rem 0 0;
  }
}

.team__content--subtitle {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
  line-height: 2rem;
  margin-bottom: 1.3rem;
}

@media only screen and (min-width: 767px) {
  .team__content--subtitle {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}

.team__content--title {
  font-weight: 700;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  line-height: 2rem;
}

@media only screen and (min-width: 992px) {
  .team__content--title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .team__content--title {
    font-size: 2rem;
    line-height: 2.2rem;
  }
}



/* 
    27. Counterup css here
*/
.counterup__banner__bg2 {
  background: var(--bg-offwhite-color);
}

.counterup__banner--inner {
  padding: 6rem 0;
  gap: 2.5rem;
}

@media only screen and (max-width: 767px) {
  .counterup__banner--inner {
    flex-wrap: wrap;
  }
}

.counterup__title {
  color: var(--foreground-sub-color);
  font-size: 1.5rem;
  line-height: 2.4rem;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

@media only screen and (min-width: 992px) {
  .counterup__title {
    font-size: 1.6rem;
    line-height: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .counterup__title {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-bottom: 2rem;
  }
}

.counterup__number {
  font-size: 2.5rem;
  line-height: 2.5rem;
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .counterup__number {
    font-size: 3rem;
    line-height: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .counterup__number {
    font-size: 4rem;
    line-height: 4rem;
  }
}





/* 
    28. Contact page css 
*/
.contact__section--heading__maintitle {
  font-size: 2.8rem;
  line-height: 3rem;
  color: var(--secondary-color);
  margin-bottom: 1.5rem;
}

.contact__section--heading__desc {
  color: var(--foreground-sub-color);
  width: 90%;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .contact__section--heading__desc {
    width: 75%;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__section--heading__desc {
    font-size: 1.6rem;
    line-height: 2.8rem;
    width: 55%;
  }
}

.contact__form {
  background: var(--body-background-color);
  border-radius: 10px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16);
  padding: 2rem;
}

@media only screen and (min-width: 576px) {
  .contact__form {
    padding: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .contact__form {
    padding: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .contact__form {
   margin-inline-start: 36rem;
    padding: 5.5rem 3.5rem 5.5rem 10rem;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__form {
    margin-inline-start: 46rem;
  }
}

.contact__form--title {
  font-weight: 600;
  font-size: 1.8rem;
}

@media only screen and (min-width: 1200px) {
  .contact__form--title {
    font-size: 2.2rem;
  }
}

@media only screen and (max-width: 1199px) {
  .contact__form--title.mb-30 {
    margin-bottom: 2rem;
  }
}

.contact__form--label {
  display: block;
  margin-bottom: 8px;
}

.contact__form--label__star {
  color: var(--secondary-color);
}

.contact__form--input {
  width: 100%;
  height: 50px;
  padding: 5px 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.contact__form--input:focus {
  border-color: var(--secondary-color) !important;
}

.contact__form--textarea {
  width: 100%;
  height: 100px;
  padding: 12px 15px;
  border-radius: 8px;
  resize: none;
  border: 1px solid var(--border-color);
}

.contact__form--textarea:focus {
  border-color: var(--secondary-color) !important;
}

@media only screen and (min-width: 992px) {
  .contact__form--textarea {
    height: 120px;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__form--textarea {
    height: 160px;
  }
}

.contact__info {
  background: var(--secondary-color);
  width: 46rem;
  padding: 2rem;
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  transform: translatey(-50%);
  
}

@media only screen and (max-width: 575px) {
  .contact__info {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) {
  .contact__info {
    padding: 3rem;
  }
}

@media only screen and (min-width: 768px) {
  .contact__info {
    padding: 4rem;
  }
}

@media only screen and (min-width: 992px) {
  .contact__info {
    width: 42rem;
    padding: 4rem 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__info {
    width: 46rem;
    padding: 5rem 6rem;
  }
}

@media only screen and (max-width: 991px) {
  .contact__info {
    position: inherit;
    top: inherit;
    transform: inherit;
    margin: 3rem auto 0;
    width: 100%;
  }
}

.contact__info--items {
  margin-bottom: 2.7rem;
}

.contact__info--items:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 575px) {
  .contact__info--items {
    margin-bottom: 2rem;
  }
}

.contact__info--icon {
  margin-inline-end: 1.2rem;
  color: var(--text-white-color);
  padding-top: 0.8rem;
}

@media only screen and (min-width: 1200px) {
  .contact__info--icon {
    margin-inline-end: 2rem;
  }
}

@media only screen and (max-width: 575px) {
  .contact__info--icon svg {
    width: 2.5rem;
  }
}

.contact__info--content__title {
  font-weight: 600;
}

@media only screen and (min-width: 992px) {
  .contact__info--content__title {
    font-size: 2rem;
    line-height: 2.8rem;
  }
}

.contact__info--content__desc {
  font-size: 1.5rem;
  line-height: 2.6rem;
  color: var(--text-white-color);
}

@media only screen and (min-width: 1200px) {
  .contact__info--content__desc {
    font-size: 1.6rem;
    line-height: 2.7rem;
  }
}

.contact__info--content__desc a {
  color: var(--text-white-color);
}

.contact__info--content__desc a:hover {
  color: var(--primary-color);
}

.contact__info--social__list {
  margin-right: 11px;
}

.contact__info--social__list:last-child {
  margin-right: 0;
}

.contact__info--social__icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--body-background-color);
  color: var(--secondary-color);
  border-radius: 50%;
}

.contact__info--social__icon:hover {
  background: var(--primary-color);
  color: var(--text-white-color);
}

.contact__map--iframe {
  width: 100%;
  height: 250px;
  margin-bottom: -7px;
}

@media only screen and (min-width: 768px) {
  .contact__map--iframe {
    height: 320px;
  }
}

@media only screen and (min-width: 992px) {
  .contact__map--iframe {
    height: 400px;
  }
}

@media only screen and (min-width: 1200px) {
  .contact__map--iframe {
    height: 500px;
  }
}



/* فقط برای باکس متنی که جای فرم آمده */
.contact__text-box{
  min-height: 420px;  /* این عدد را می‌توانی کم/زیاد کنی */
}

.contact__rules-box {
  width: 100%;
  flex: 0 0 100%;
  margin-inline-start: 0 !important;
}