/* animation */
@-webkit-keyframes fading {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fading {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.slide-bottom {
  -webkit-animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
}
/* animation */

.support--service {
  background-color: var(--background-color-white);
  padding: 5rem 0;
	margin-top: 3rem;
}

.support--text {
  text-align: center;
}

.support--text h3 {
  margin-bottom: 1rem;
}
.support--text > span {
  display: block;
  font-size: 0.9rem;
}

/* support--items */
.support--items {
  padding: 2rem 0 1rem 0;
  width: 100%;
}

.support--items__cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(125px, auto);
  grid-gap: 0.5rem;
}

.support--items__card {
  background-color: var(--background-color-gray);
  text-align: center;
  cursor: pointer;
  position: relative;
}

.support--items__card img {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translate(-50%);
  width: 2rem;
}

.tab--btn {
  padding: 1rem 0;
  cursor: pointer;
  color: var(--color-navy-blue);
}

.tab--btn__img__active {
  display: none;
}

.tab--btn.active .tab--btn__img__active {
  display: block;
}

.tab--btn.active .tab--btn__img__noneactive {
  display: none;
}
.active {
  background-color: var(--background-color-navy-blue);
  color: var(--color-orange);
}

.content {
  background-color: var(--background-color-navy-blue);
  text-align: justify;
  position: relative;
}

.tab--content__close {
  font-size: 2rem;
  color: var(--color-gray);
  position: absolute;
  left: 3%;
  top: 1%;
  cursor: pointer;
}
.tab--content {
  animation: fading 2s;
  padding: 2.5rem 0 5rem 0;
	width: 40% !important; 
	margin: 0 auto !important;
}

.tab--content input, .tab--content select, .tab--content textarea{
	width:100%!important;
}

.img-track {
  width: 3.5rem !important;
}

.register-goods_wrapper {
/*   width: 50%; */
/* 	width: 60%; */
  margin: 0 auto;
}

.register-goods_wrapper .field_sublabel_below {
  text-align: center;
  margin-top: 0.5rem;
  position: relative;
}

.form--necessary__img {
  content: url(icons/lozenge-orange.svg);
  width: 0.5rem;
  position: absolute;
  top: 50%;
  right: 16%;
  transform: translateY(-50%);
}

/******custom select input******/
.register-goods_wrapper .field_sublabel_below input , .register-goods_wrapper .field_sublabel_below select ,select#input_7_1 {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: IRANSans;
/*   width: 60%; */
  margin: 0.5rem auto 0 auto;
  border-bottom: var(--border-bottom-orange);
  background-color: var(--background-color-gray);
  padding: 0.75rem;
  font-size: 0.85rem;
}
.register-goods_wrapper .field_sublabel_below textarea {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: IRANSans;
/*   width: 60% ; */
  margin: 0.5rem auto 0 auto;
  border-bottom: var(--border-bottom-orange);
  background-color: var(--background-color-gray);
  padding: 0.75rem;
  font-size: 0.85rem;
  color: black;
}
.custom-select__trigger ::after {
  content: "";
  background: url(icons/chevron-down-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  height: 100%;
  width: 17px;
  top: 45%;
  transition: all 0.4s;
  left: 3%;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--background-color-gray);
  border: 2px solid var(--color-orange);
  border-top: 0;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  text-align: right;
}
.custom-select select ,.slide-bottom select ,.slide-bottom input {
  border: none;
  background-color: var(--background-color-gray);
  border-bottom: var(--border-bottom-orange);
/*   width: 100%; */
  padding: 0.75rem;
  cursor: pointer;
  font-family: IRANSans;
}
/*  .slide-bottom input {
  width: 60% !important;
  margin: 0 auto;
  display: block;
} */
/******custom select input****/

.form--group__robat {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 7rem;
}
.form--group__robat > label {
  color: var(--color-gray);
  margin-left: 0.5rem;
  font-size: 0.8rem;
}
.form--group__input {
  border: none;
  background-color: var(--background-color-gray);
  border-bottom: var(--border-bottom-orange);
/*   width: 60%; */
  padding: 0.75rem;
  cursor: pointer;
  font-family: IRANSans;
}

.form--group__input,
.form--group__input::placeholder,
.form--group__input:focus {
  color: var(--color-black);
}
	#main-cat::placeholder{
		color: black;
	}
.form--group__input:focus {
  outline: none;
}
input[type=submit] {
/*   width: 60%; */
  margin: 0 auto;
  position: relative;
  padding: 0.5rem;
  margin-top: 0.5rem;
  background-color: var(--background-color-orange);
  color: var(--color-black);
  font-size: 0.75rem;
  margin: 0 auto;
  display: block;
  font-family: 'IRANSans';
  border: none;
}

.form--respons {
/*   width: 50%; */
  background-color: var(--background-color-navy-blue);
  padding: 5rem 0;
  margin: 0 auto;
  text-align: center;
}

.form--respons__download > span {
  color: var(--color-gray);
}

.form--respons__download__inner {
  background-color: var(--background-color-orange);
/*   width: 60%; */
  margin: 0 auto;

  padding: 1.5rem;
  margin-bottom: 2rem;
}
.form--respons__download__inner a {
  display: flex;
  justify-content: space-between;
  align-items: center;
/*   width: 100%; */
}
.form--respons__download__inner img {
  width: 2.5rem;
}

.form--respons__download__inner span {
  display: block;
}
.form--respons > img {
  width: 7rem;
  margin-bottom: 2rem;
}

.form--respons > span {
  display: block;
  font-size: 1.15rem;
}

.form--respons__variable {
  color: var(--color-orange);
}

.form--respons__fix {
  color: var(--color-gray);
}

/* support--items */

/* service--contact */
.service--contact {
    background-color: var(--background-color-gray);
    padding: 1rem 0 2rem 0;
	margin-top:1rem;
  }
  
  .service--email > img {
    width: 2.5rem;
  }
  
  .service--phone img {
    width: 2rem;
  }
  
  .service--address > img {
    width: 1.5rem;
  }
  
  .service--contact span {
    display: block;
  }
  
  .service--title {
    text-align: center;
  }
  
  .service--contact__content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
/* 	padding: .5rem ; */
  }
  
  .service--contact__content > div {
    margin-top: 1.5rem;
    text-align: center;
    width: 33.33%;
  }
  /* service--contact */

/******custom select input******/
.form--group {
/*   width: 50%; */
  margin: 0 auto;
}
.form--group__button {
/*   width: 60%; */
  margin: 0 auto;
  position: relative;
  padding: 0.5rem;
  margin-top: 0.5rem;
  background-color: var(--background-color-orange);
  color: var(--color-black);
  font-size: 0.75rem;
}
.form--group__item {
  text-align: center;
  margin-top: 0.5rem;
  position: relative;
/* 	width:60%; */
	margin: .5rem auto 0 auto;
}

/* .form--group__item inpute, .form--group__item select{
	width: 60% !important;
} */

.form--necessary__img {
  content: url(icons/lozenge-orange.svg);
  width: 0.5rem;
  position: absolute;
  top: 50%;
  right: 16%;
  transform: translateY(-50%);
}

.custom-select {
  position: relative;
  display: flex;
  flex-direction: column;

/*   width: 60%; */
  margin: 0.5rem auto 0 auto;
}
.custom-select__trigger {
  border-bottom: var(--border-bottom-orange);
  background-color: var(--background-color-gray);
  padding: 0.75rem;
  font-size: 0.85rem;
  font-family: IRANSans;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.custom-select__trigger ::after {
  content: "";
  background: url(icons/chevron-down-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  height: 100%;
  width: 17px;
  top: 45%;
  transition: all 0.4s;
  left: 3%;
}

.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--background-color-gray);
  border: 2px solid var(--color-orange);
  border-top: 0;
  transition: all 0.5s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  text-align: right;
}
.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  text-align: right;
}

.custom-select.open .custom-select__trigger ::after {
  transform: rotateX(180deg);
  top: -45%;
}

.custom-option {
  position: relative;
  display: block;
  padding: 0.75rem;
  cursor: pointer;
  font-family: IRANSans;
  font-size: 0.85rem;
  transition: all 0.5s;
}
.custom-option:hover {
  cursor: pointer;
  background-color: #b2b2b2;
}
.custom-option.selected {
  color: var(--color-gray);
  background-color: var(--background-color-navy-blue);
}

/******custom select input****/

/* recycle */
/* #recycle .form--group{
	width:60%;
} */
/* #recycle .form--group .ginput_container.ginput_container_text{
	width: 60%;
	margin: 0 auto;
}
 */
#recycle .form--group .ginput_container.ginput_container_text input{
	padding: .75rem;
}

#recycle .form--group .gform_footer.top_label input{
	padding: .75rem;
}
/* recycle */

/* online-support */
#online-support> div{
	-webkit-animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
	margin-top: 1rem;
    margin-bottom: -1.5rem;
}
/* online-support */
/****************************************************media query****************************************************/

@media (max-width: 1200px) {
/*   .support--items__cards {
    grid-template-columns: repeat(3, 1fr);
  } */

  .support--items__card label {
    padding-bottom: 40%;
  }

  .service--contact span {
    font-size: 0.8rem;
  }

  .tab--content {
	width: 50% !important; 
  }
  
/*   .form--group__button,
  .form--respons {
    width: 80%;
  }
	
	.form--group__item {
		 width: 80%;
	} */
	
/* 	.tab--content{
		width:80%!important;
	} */

	
/* 	#recycle .form--group{
		width:80%;
	} */

  .form--group__robat {
    margin-left: 3rem;
  }

  .form--necessary__img {
    right: 5%;
  }
	
/* 	.register-goods_wrapper{
		width:80%;
	} */
}

@media (max-width: 992px) {
/*   .support--items__cards {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(97px, auto);
  } */
  .support--items__card h4 {
    font-size: 0.75rem;
  }

  .support--items__card img {
    width: 1.75rem;
  }

  .service--contact span {
    font-size: 0.7rem;
  }
  .tab--content {
	width: 60% !important; 
  }
  .form--group__robat {
    margin-left: 0;
  }

  .form--necessary__img {
    right: -6%;
  }

  .form--respons > img {
    width: 5rem;
  }

}

@media (max-width: 768px) {

  .support--items__card h4 {
    font-size: 0.9rem;
  }

  .support--items__card img {
    width: 2rem;
  }

  .support--items__card label {
    padding-bottom: 35%;
  }
  .tab--content {
	width: 70% !important; 
  }
}

@media (max-width: 576px) {
	.support--items__cards {
    grid-auto-rows: minmax(87px, auto);
	}
  .support--items__card h4 {
    font-size: 0.6rem;
  }

  .support--items__card img {
    width: 1.5rem;
  }

  .support--items__card label {
    padding-bottom: 54%;
  }

/*   .service--contact__content {
    flex-direction: column;
  }

  
  .service--email img {
    width: 2rem;
  } */
	.service--contact__content > div {
    width: 100%;
  }
	.service--contact__content > div{
        margin-top: .75rem;
        display: flex;
		flex-direction:column;
		justify-content: center;
        align-items: center;
/* 		width:100%; */
    }

    .service--contact__content > div > img {
        margin-right: .5rem;
    }

    .service--email > img, .service--phone img{
        width: 1.25rem;
        margin-right: .5rem;
    }

    .service--phone img{
        vertical-align: sub;
    }

    .service--address> img{
        width: 1.25rem;
    }

    .service--phone .whatsapp{
        display: none;
    }
  .tab--content {
	width: 80% !important; 
  }
}

@media (max-width: 425px) {
  .tab--content {
	width: 90% !important; 
  }
/*   .support--items__cards {
    grid-template-columns: repeat(2, minmax(auto, 1fr));
    grid-auto-rows: minmax(97px, auto);
  } */

/*   .support--items__card h4 {
    font-size: 0.85rem;
    margin-bottom: 4rem;
  } */

  .support--items__card img {
    width: 1.5rem;
  }

  .support--items__card label {
    padding-bottom: 45%;
  }

  .form--respons > span {
    font-size: 1rem;
  }

  .form--group__item > textarea,
  .form--group__input::placeholder,
  .form--group__input:focus {
    font-size: 0.75rem;
  }

  .custom-select__trigger,
  .custom-option {
    font-size: 0.75rem;
  }
	
	.service{
        background-color: var(--background-color-gray);
    }

    .service--title {
        text-align: left;
		padding:0 1rem;
    }
	
	.service--contact__content{
		padding: 0 1rem;
	}

/*     .service--contact__content > div:first-child, .service--contact__content > div:nth-child(2){
        width: 50%;
    } */
/*     .service--contact__content > div:last-child{
        width: 100%;
    } */

    .service--contact__content > div{
        display: flex;
        align-items: center;
		flex-direction: row;
		justify-content:flex-start;
    }
}

@media (max-width: 375px) {
/*   .support--items__cards {
    grid-template-columns: repeat(1, minmax(auto, 1fr));
    grid-auto-rows: minmax(97px, auto);
  } */

/*   .support--items__card h4 {
    font-size: 1.25rem;
  } */
  .support--items__card label {
    padding-bottom: 25%;
  }
}

@media (max-width:320px) {
    .service--contact__content {
        flex-direction: column;
    }
    
/*     .service--contact__content > div {
        width: 100%;
    } */
}
/********************************media query*******************************/