@charset "utf-8";
/*
1.  Global Section CSS
2.  Header Section CSS
3.  Slider Section CSS
4.  Service Section CSS
5.  Intro Section CSS
6.  Products Section CSS
7.  Contact Section CSS
8.  Review Section CSS
9.  Brands Section CSS
10. Blog Section CSS
11. Map Section CSS
12. Footer Section CSS
13. Cover Section CSS
14. Product Section CSS
15. Related Section CSS
16. Page Section CSS
17. Widget Section CSS
18. Price Section CSS
19. Team Section CSS
20. 404 Section CSS
21. Responsive Section CSS
*/

/*-------------------------------------------------------------
 1.  Global CSS
--------------------------------------------------------------*/

@font-face {
  font-family: 'Kalameh-Bold';
  src: url('fonts/Kalameh-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Vazir-Light';
  src: url('fonts/Vazir-Light.woff2') format('woff');
}
@font-face {
  font-family: 'Vazir-Medium';
  src: url('fonts/Vazir-Medium.woff2') format('woff');
}
@font-face {
  font-family: 'Vazir-Bold';
  src: url('fonts/Vazir-Bold.woff2') format('woff');
}
body {
  direction: rtl;
  font-family: 'Vazir-Light';
  line-height: 2;
  background: #f9f9f9;
  color: #1c1a1f;
  text-align: right;
}
a {
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
a:hover {
  text-decoration: none;
}
ol,
ul {
  margin: 0;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Vazir-Bold';
}
b,
strong {
  font-family: 'Vazir-Bold';
  font-weight: normal;
}
img {
  max-width: 100%;
}
.web-section {
  margin: 0 0 15px;
  text-align: center;
}
.web-section h1,
.web-section h2 {
  display: inline-block;
  margin: 0 0 25px;
  padding: 0 0 15px;
  position: relative;
  font-family: 'Kalameh-Bold';
  font-size: 2rem;
}
.web-section h1:before,
.web-section h2:before {
  content: '';
  width: 50px;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 45%;
  background: #fc4557;
}
.web-section h1:after,
.web-section h2:after {
  content: '';
  width: 20px;
  height: 2px;
  margin: 0 0 0 -35px;
  position: absolute;
  bottom: 0;
  left: 45%;
  background: #1c1a1f;
}
.web-section h1 strong,
.web-section h2 strong {
  font-family: 'Kalameh-Bold';
}
.text-center {
  text-align: center;
}
/*-------------------------------------------------------------
 2. Header Section CSS
--------------------------------------------------------------*/

.web-canvas-section>div {
  background: #2e3d62
}
.web-canvas-section ul li {
  width: 100%;
  display: inline-block;
}
.web-canvas-section ul li a {
  display: block;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: #fff;
}
.web-canvas-section ul li:last-child a {
  border-bottom: 0;
}
.web-canvas-section ul li a:hover {
  color: #ffd74e
}
.web-canvas-section button {
  background-color: #fff;
  opacity: 1;
  border-radius: 0;
}
.web-header-section {
  width: 100%;
  padding: 15px 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  text-align: center;
}
.web-header-section .container-fluid {
  padding: 0 90px;
}
.web-header-section img {
  width: 100px;
}
.web-header-section button {
  display: none;
  margin: 5px 0 0;
  font-size: 1.5rem;
  background: transparent;
  border: 0;
  color: #fff
}
.web-header-section .menu ul li {
  display: inline-block;
  padding: 0 10px;
  position: relative;
}
.web-header-section .menu ul li a {
  font-size: 1.10rem;
  color: #fff;
}
.web-header-section .menu ul li a:hover {
  color: #fe4759
}
.web-header-section .menu ul li ul {
  min-width: 200px;
  margin: 15px 0;
  padding: 5px;
  position: absolute;
  top: 100%;
  right: 0;
  background: #fe4759;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  text-align: right;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.web-header-section .menu ul li ul li {
  width: 100%;
}
.web-header-section .menu ul li ul li a:hover {
  padding: 0 15px 0 0;
  color: #fff;
}
.web-header-section .menu ul li:hover ul {
  margin: 5px 0 0;
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 991px) {
  .web-header-section button {
    display: block;
  }
  .web-header-section .menu {
    display: none;
  }
}
.section {
  width: 100%;
  float: right;
  padding: 15px;
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
  z-index: 10
}
/*-------------------------------------------------------------
 3.  Slider Section CSS
--------------------------------------------------------------*/

.web-slider-section {
  position: relative;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.web-slider-section:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 10;
}
.web-slider-section img {
  width: 100%;
  height: 650px;
  object-fit: cover
}
.web-slider-section .web-content-section {
  position: absolute;
  top: 180px;
  right: 0;
  left: 0;
  z-index: 10;
}
.web-slider-section .web-content-section h1 {
  font-family: 'Kalameh-Bold';
  font-size: 3rem
}
.web-slider-section .web-content-section h1 span {
  color: #e0a414
}
.web-slider-section .web-content-section p {
  color: #fff;
  font-size: 1rem;
  line-height: 1.85;
}
.web-slider-section .web-content-section ul li {
  display: inline-block;
  margin: 5px;
}
.web-slider-section .web-content-section ul li a {
  width: 180px;
  display: block;
  padding: 5px;
  line-height: 1.85;
  background: #e0a414;
  color: #fff;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-slider-section .web-content-section ul li a.active {
  background: #e0a414;
  color: #fff
}
.web-slider-section ol {
  bottom: 60px;
}
/*-------------------------------------------------------------
 4.  Service Section CSS
--------------------------------------------------------------*/

.web-service-section {
  position: relative;
  background: #fff;
  z-index: 10
}
.web-service-section .web-background-section {
  width: 100%;
  display: inline-block;
  margin: -120px -15px 0;
}
.web-service-section ul li {
  display: inline-block;
}
.web-service-section ul li .item {
  margin: 45px 0;
  padding: 75px 30px;
  position: relative;
  background-color: #2e3d62;
  background-size: cover;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
  -webkit-box-shadow: 0 10px 15px 0 rgba(165, 165, 165, 0.1);
  box-shadow: 0 10px 15px 0 rgba(165, 165, 165, 0.1);
}
.web-service-section ul li .item .web-icon-section {
  margin: 0 0 30px;
  position: relative;
  font-size: 80px;
  line-height: 80px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #d29e21, #e0a414);
}
.web-service-section ul li .item h2 {
  margin: 0 0 15px;
  position: relative;
  font-size: 1.25rem;
  color: #fff;
}
.web-service-section ul li .item .web-content-section {
  position: relative;
  color: #c5c5c5;
  z-index: 2;
  max-width: 310px;
  margin: 0 auto 15px;
}
.web-service-section ul li:first-child .item {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.web-service-section ul li:nth-child(2) .item {
  box-shadow: 0 10px 15px 0 rgba(225, 185, 35, .5);
  padding: 120px 30px;
  margin: 0;
  color: #fff;
}
.web-service-section ul li:nth-child(2) .item:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .85;
  background-image: linear-gradient(90deg, #d29e21, #e0a414);
}
.web-service-section ul li:nth-child(2) .item .web-icon-section {
  color: #fff;
  -webkit-text-fill-color: inherit;
}
.web-service-section ul li:nth-child(2) .web-content-section {
  color: #fff;
}
.web-service-section ul li:nth-child(3) .item {
  background: #fff;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.web-service-section ul li:nth-child(3) .item h2,
.web-service-section ul li:nth-child(3) .web-content-section {
  color: #282828;
}
.web-service-section ul li .item:after {
  content: '۰۱';
  position: absolute;
  bottom: 0;
  right: 20px;
  font-family: 'Vazir-Bold';
  font-size: 190px;
  color: #9c9c9c;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: hsla(0, 0%, 61.2%, .2);
  line-height: 150px;
  letter-spacing: -15px;
}
.web-service-section ul li:nth-child(2) .item:after {
  content: '۰۲';
  -webkit-text-stroke-color: rgba(255, 255, 255, .25);
}
.web-service-section ul li:nth-child(3) .item:after {
  content: '۰۳';
}
@media screen and (max-width: 991px) {
  .web-service-section ul li .item {
    border-radius: 20px !important
  }
}
/*-------------------------------------------------------------
 5.  Intro Section CSS
--------------------------------------------------------------*/

.web-intro-section {
  width: 100%;
  float: right;
  padding: 0 0 60px;
  position: relative;
}
.web-intro-section .web-section {
  margin: 0;
  text-align: right;
}
.web-intro-section .web-section h2:before {
  left: auto;
  right: 5px;
}
.web-intro-section .web-section h2:after {
  left: auto;
  right: 70px;
}
.web-intro-section figure {
  margin: 0 0 30px;
  position: relative;
}
.web-intro-section figure img {
  position: relative;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
  z-index: 100;
}
.web-intro-section figure span {
  padding: 0 15px;
  line-height: 2.15;
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: .85rem;
  color: #fff;
  border-radius: 300px;
}
.web-intro-section p {
  line-height: 2;
  color: #333;
  text-align: justify;
}
/*-------------------------------------------------------------
 6.  Products Section CSS
--------------------------------------------------------------*/

.web-products-section {
  padding: 60px 0;
}
.web-products-section.background {
  background: #fff;
}
.web-products-section .web-tab-section ul {
  margin: 0 0 30px;
  float: left;
}
.web-products-section .web-tab-section ul li {
  display: inline-block;
}
.web-products-section .web-tab-section ul li a {
  display: inline-block;
  padding: 0 20px;
  line-height: 2.5;
  background: #95A5A6;
  color: #fff;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-products-section .web-tab-section ul li a:hover {
  opacity: .85
}
.web-tab-section ul li a.active {
  background: #2e3d62
}
.web-products-section .item {
  width: 100%;
  float: right;
  margin: 0 0 30px;
  position: relative;
  background: #fff;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-products-section .item figure {
  margin: 0;
  position: relative;
  border-bottom: 1px solid rgba(221, 221, 221, .35);
}
.web-products-section .item figure img {
  width: 100%;
  object-fit: cover;
}
.web-products-section .item.img figure img {
  height: 250px;
}
.web-products-section .item .web-content-section {
  width: 100%;
  display: inline-block;
  padding: 15px;
  box-shadow: none;
}
.web-products-section .item .web-content-section h2 {
  margin: 0 0 15px;
  font-size: 1rem;
  color: #3e3e3e
}
.web-products-section .item .web-content-section h2:hover,
.web-products-section .item .web-content-section h2 a:hover {
  color: #2C3E50
}
.web-products-section .item .web-content-section span {
  display: block;
  color: #666
}
.web-products-section .item .web-content-section .web-feature-section {
  display: block;
  margin: 0 0 15px;
  font-size: .90rem;
  color: #6c757d
}
.web-products-section .item .web-content-section .web-feature-section strong {
  display: none;
}
.web-products-section .item .web-content-section .web-feature-section ul {
  padding: 5px 0 20px;
}
.web-products-section .item .web-content-section .web-feature-section li {
  padding: 0 10px 0 0;
  position: relative;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.web-products-section .item .web-content-section .web-feature-section li:before {
  content: '';
  width: 7px;
  height: 7px;
  position: absolute;
  top: 10px;
  right: 0;
  background: #38d57a;
  border-radius: 50%;
}
.web-products-section .item .web-content-section .web-price-section {
  margin: 0 0 20px;
  font-family: 'Vazir-Bold';
  font-size: 1.25rem;
  color: #38d57a;
  text-align: left;
}
.web-products-section .item .web-content-section .web-price-section .price span span {
  font-family: 'Vazir-Light';
  font-size: .85rem;
}
.web-products-section .item .web-content-section .web-add-section {
  height: 45px;
  line-height: 45px;
  display: block;
  padding: 0 15px;
  font-size: .95rem;
  background: #2e3d62;
  color: #fff;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgb(30 25 30 / 15%);
  z-index: 10;
}
.web-products-section .item .web-content-section .web-rating-section {
  float: left;
  display: flex;
  gap: 2px;
  position: relative;
  top: 15px;
  left: 15px;
  font-size: .85rem;
  line-height: 1;
  color: #f9d71c;
}
.web-products-section .web-more-section {
  display: table;
  margin: 0 auto;
  padding: 5px 45px;
  line-height: 2;
  background: #2e3d62;
  border: 2px solid #2e3d62;
  color: #fff;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-products-section .web-more-section:hover {
  opacity: .9
}
/*-------------------------------------------------------------
 7.  Contact Section CSS
--------------------------------------------------------------*/

.web-contact-section {
  padding: 90px 0 0;
  position: relative;
  background: #fff;
}
.web-contact-section .web-background-section {
  width: 100%;
  height: 600px;
  float: right;
  padding: 60px 0;
  position: relative;
  background-size: cover;
  background-position: center;
}
.web-contact-section figure {
  margin: 0;
}
.web-contact-section figure img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 20px;
  outline: 1px solid rgba(255, 255, 255, .1);
  outline-offset: -10px;
}
.web-contact-section .section {
  margin: -100px 0 0;
  z-index: 100
}
.web-contact-section .web-text-section {
  width: 100%;
  float: right;
  margin: 0 0 10px;
  padding: 0 5px;
}
.web-contact-section .web-text-section .phone {
  width: 100%;
  float: right;
  padding: 0 0 5px;
  font-family: 'Vazir-Bold';
  font-size: 1.10rem;
}
.web-contact-section .web-text-section .phone span.name {
  float: right;
}
.web-contact-section .web-text-section .phone span.number {
  float: left;
}
.web-contact-section .web-section {
  margin: 0;
  text-align: right;
}
.web-contact-section .web-section h2 {
  margin: 0 0 15px;
}
.web-contact-section .web-section h2:before {
  left: auto;
  right: 5px;
}
.web-contact-section .web-section h2:after {
  left: auto;
  right: 60px;
}
.web-contact-section .web-content-section {
  padding: 0 0 0 15px;
}
.web-contact-section .web-content-section p {
  margin: 0 0 15px;
  position: relative;
  color: #555;
  text-align: justify
}
.web-contact-section .web-content-section br {
  display: none;
}
.web-contact-section .web-content-section p i {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.25rem;
  color: #818181;
  z-index: 10;
}
.web-contact-section .web-content-section input,
.web-contact-section .web-content-section textarea {
  width: 100%;
  height: 50px;
  line-height: 50px;
  padding: 0 45px 0 0;
  text-align: right;
  border: 1px solid #f4f4f4;
  background: #f4f4f4;
  border-radius: 300px;
}
.web-contact-section .web-content-section input:focus,
.web-contact-section .web-content-section textarea:focus {
  border-color: #ff5e14;
}
.web-contact-section .web-content-section textarea {
  height: 120px;
  padding: 10px 35px 10px 0;
  line-height: 25px;
  border-radius: 15px;
  resize: none;
}
.web-contact-section .web-content-section button {
  width: 130px;
  height: 45px;
  float: left;
  margin: -15px 0 0;
  line-height: 35px;
  text-align: center;
  background: #222;
  color: #fff;
  border: 2px solid #222;
  border-radius: 300px;
}
.web-contact-section .web-content-section button:hover {
  opacity: .85
}
.body .web-contact-section {
  padding: 60px 0 90px;
  background: #f9f9f9
}
.body .web-form-section {
  margin: 0;
}
/*-------------------------------------------------------------
 8.  Review Section CSS
--------------------------------------------------------------*/

.web-review-section {
  width: 100%;
  float: right;
  overflow: hidden;
  padding: 60px 0 250px;
  background-image: url(../img/Review.jpg);
  background-size: cover;
  background-position: center center;
}
.web-review-section .web-top-section {
  float: right;
  margin: 10px 0 0;
  transform: rotate(180deg);
}
.web-review-section .web-bottom-section {
  margin: 80px 0 0 15px;
  float: left;
}
.web-review-section .item {
  font-size: 1.20rem;
  color: #333;
}
.web-review-section ol li {
  display: inline-block;
  padding: 0 15px;
  opacity: .5;
}
.web-review-section ol li .web-avatar-section {
  width: 60px;
  height: 60px;
  float: right;
  margin: 0 0 0 15px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 50%;
}
.web-review-section ol li .web-avatar-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.web-review-section ol li .web-name-section {
  float: right;
  padding: 5px 0 0;
  line-height: 1.5;
}
.web-review-section ol li .web-name-section strong {
  display: block;
  font-weight: normal;
  text-align: right;
}
.web-review-section ol li .web-name-section span {
  font-size: .90rem;
  color: #666
}
.web-review-section ol li.active {
  opacity: 1
}
.web-review-section ol li.active .web-avatar-section {
  border-color: #ff5e14;
}
/*-------------------------------------------------------------
 9. Brands Section CSS
--------------------------------------------------------------*/

.web-brands-section {
  width: 100%;
  float: right;
  margin: -60px 0 0;
  padding: 25px 25px 0;
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-brands-section .item {
  width: 100%;
  float: right;
  margin: 0 0 30px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-brands-section .item figure {
  margin: 0;
  position: relative;
}
.web-brands-section .item figure figcaption {
  width: 100%;
  height: 100%;
  font-size: 2rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
}
.web-brands-section .item figure figcaption span {
  font-family: 'Kalameh-Bold';
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  line-height: 1.5;
}
.web-brands-section .item figure img {
  width: 100%;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
/*-------------------------------------------------------------
 10. Blog Section CSS
--------------------------------------------------------------*/

.web-blog-section {
  width: 100%;
  display: inline-block;
  padding: 100px 0;
}
.web-blog-section .item {
  margin: 0 0 30px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.web-blog-section .item:hover {
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.web-blog-section .item figure {
  margin: 0;
  position: relative;
}
.web-blog-section .item figure img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.web-blog-section .item figure span {
  padding: 0 15px;
  line-height: 2;
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: .85rem;
  background: #fd4658;
  color: #fff;
  border-radius: 300px;
}
.web-blog-section .item .web-author-section {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  padding: 0 25px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.web-blog-section .item .web-author-section .web-avatar-section {
  width: 45px;
  height: 45px;
  margin: 0 0 0 30px;
  position: relative;
  overflow: visible;
  z-index: 1;
}
.web-blog-section .item .web-author-section .web-avatar-section img {
  width: 45px;
  height: 45px;
}
.web-blog-section .item .web-author-section .web-avatar-section:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  height: calc(100% + 20px);
  width: calc(100% + 50px);
  background-image: url(../img/icons/icon-author.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.web-blog-section .item .web-author-section .web-avatar-section img {
  border-radius: 100%;
  margin: 10px 0 0 0;
}
.web-blog-section .item .web-content-section {
  width: 100%;
  display: inline-block;
  padding: 20px
}
.web-blog-section .item .web-content-section .web-date-section {
  display: inline-block;
  padding: 0 0 10px;
  font-size: .95rem;
  color: #fd4658;
  line-height: 1;
}
.web-blog-section .item .web-content-section h2 {
  height: 45px;
  font-size: 1rem;
  line-height: 1.5;
}
.web-blog-section .item .web-content-section h2 a {
  color: #2e3d62;
}
.web-blog-section .item .web-content-section h2 a:hover {
  color: #fd4658
}
.web-blog-section .item .web-meta-section {
  width: 100%;
  display: inline-block;
  padding: 15px 20px;
  font-size: .85rem;
  background: #fcfcfc;
  border-top: 1px solid #f3f3f3
}
.web-blog-section .item .web-meta-section span {
  display: inline-block;
  color: #999;
  line-height: 1;
}
.web-blog-section .item .web-meta-section span i {
  float: right;
  padding: 0 0 0 5px;
}
.web-blog-section .item .web-meta-section span a {
  color: #999;
  line-height: 1;
}
/*-------------------------------------------------------------
 11. Map Section CSS
--------------------------------------------------------------*/

.web-map-section {
  padding: 15px 15px 0;
  margin: 0 0 -60px;
}
.web-map-section .map {
  height: 325px;
  position: relative;
}
.web-map-section .map:before {
  content: '';
  width: 100%;
  height: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  background: #fff;
  z-index: 10000;
}
.web-map-section .map p {
  margin: 0;
}
.web-map-section .map ul {
  padding: 10px 0 0;
  line-height: 1;
}
.web-map-section .map ul li {
  width: 100%;
  display: inline-block;
}
.web-map-section .map ul li .label {
  display: inline-block;
  white-space: nowrap;
}
.web-map-section .map ul li .name {
  display: inline-block
}
/*-------------------------------------------------------------
 12. Footer Section CSS
--------------------------------------------------------------*/

.web-footer-section {
  padding: 120px 0 0;
  position: relative;
  background: #2e3d62;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  color: #fff;
  text-align: justify;
  overflow: hidden;
}
.web-footer-section strong {
  display: block;
  margin: 15px 0 30px;
  position: relative;
  color: #fff;
  font-family: 'Kalameh-Bold';
  font-size: 1.5rem;
  letter-spacing: -0.05rem
}
.web-footer-section strong:before {
  content: '';
  width: 30px;
  height: 2px;
  background: #fc4557;
  position: absolute;
  bottom: -10px;
  right: 0;
}
.web-footer-section p {
  margin: 0;
}
.web-footer-section .web-social-section {
  width: 320px;
  float: left;
  padding: 5px 0 0;
}
.web-footer-section .web-social-section p {
  margin: 0 0 10px;
}
.web-footer-section .web-social-section ul li {
  float: left;
  margin: 0 3px;
  list-style: none;
}
.web-footer-section .web-newsletter-section {
  width: 320px;
  float: left;
}
.web-footer-section .web-newsletter-section form {
  position: relative;
}
.web-footer-section .web-newsletter-section form input {
  width: 100%;
  padding: 5px;
  direction: rtl;
  border: 1px solid #fff;
  border-radius: .25rem;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-footer-section .web-newsletter-section form input[type='submit'] {
  width: auto;
  padding: 5px 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: #e0a414;
  color: #fff;
  border: 1px solid #e0a414;
  border-radius: 0;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
  cursor: pointer
}
.web-footer-section .web-newsletter-section form button {
  padding: 5px 20px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fc4557;
  color: #fff;
  border: 1px solid #fc4557;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-footer-section .wpcf7 .ajax-loader,
.web-content-section .wpcf7 .ajax-loader {
  width: 30px !important;
  height: 30px !important;
  position: absolute !important;
  top: 5px !important;
  left: -45px !important;
  background-color: #fff !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
}
@media screen and (max-width: 991px) {
  .web-footer-section .wpcf7 .ajax-loader,
  .web-content-section .wpcf7 .ajax-loader {
    display: none;
  }
}
.web-footer-section .wpcf7 .wpcf7-not-valid-tip,
.web-content-section .wpcf7 .wpcf7-not-valid-tip {
  color: #fc4557
}
.web-footer-section .wpcf7 form.invalid .wpcf7-response-output,
.web-footer-section .wpcf7 form.unaccepted .wpcf7-response-output,
.web-content-section .wpcf7 form.invalid .wpcf7-response-output,
.web-content-section .wpcf7 form.unaccepted .wpcf7-response-output {
  margin: 0;
  border-color: #ffb900;
  background: #ffb900;
  text-align: right;
}
.web-footer-section .wpcf7 form.sent .wpcf7-response-output,
.web-content-section .wpcf7 form.sent .wpcf7-response-output {
  margin: 15px 0 0;
  border-color: #38d57a;
  background: #38d57a;
  text-align: right;
}
.web-footer-section .web-menu-section li {
  position: relative;
  list-style: none;
}
.web-footer-section .web-menu-section li a {
  display: block;
  padding: 5px 0;
  line-height: 1.75;
  color: #fff;
  white-space: nowrap;
}
.web-footer-section .web-menu-section li a:hover {
  padding: 5px 15px 5px 5px;
  background: rgba(255, 255, 255, .10);
}
.web-footer-section .web-gallery-section ul li {
  width: 25%;
  float: right;
  display: inline-block;
  padding: 5px;
}
.web-footer-section .web-gallery-section ul li img {
  width: 100%;
  height: 75px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-footer-section .web-copyright-section {
  padding: 60px 0 15px;
  font-size: .95rem;
  text-align: center;
}
.web-footer-section .web-copyright-section p {
  margin: 0;
  color: #eaeaea
}
/*-------------------------------------------------------------
 13. Cover Section CSS
--------------------------------------------------------------*/

.web-cover-section {
  width: 100%;
  float: right;
  padding: 5px 0;
  position: relative;
  font-size: .95rem;
  background: #304068;
  color: #fff;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
  z-index: 100
}
.web-cover-section a {
  display: inline-block;
  padding: 0 5px 0 15px;
  position: relative;
  color: #fff;
}
.web-cover-section a:before {
  content: ' / ';
  position: absolute;
  top: 0;
  left: 5px;
}
.web-cover-section a:last-child:before {
  content: ''
}
.web-cover-section .web-cart-section {
  position: absolute;
  top: 0;
  left: 15px;
}
.web-cover-section .web-cart-section a {
  width: 45px;
  height: 45px;
  display: block;
  font-size: 1.5rem;
  line-height: 2;
  background: #fc4557;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
/*-------------------------------------------------------------
 14. Post Section CSS
--------------------------------------------------------------*/

.web-post-section {
  width: 100%;
  float: right;
  padding: 30px 0;
}
.web-post-section .web-content-section {
  width: 100%;
  display: inline-block;
  margin: 0 0 15px;
  padding: 15px;
  line-height: 2;
  background: #fff;
  color: #2f353b;
  text-align: justify;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-post-section .web-content-section form label {
  margin: 5px 0;
}
.web-post-section .web-content-section form label span {
  font-size: .85rem;
  color: #fc4557
}
.web-post-section .web-content-section form input,
.web-post-section .web-content-section form select,
.web-post-section .web-content-section form textarea {
  width: 100%;
  height: 40px;
  padding: 5px;
  background: #fcfcfc;
  border: 1px solid #ddd;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .05);
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.web-post-section .web-content-section form input:focus,
.web-post-section .web-content-section form select:focus,
.web-post-section .web-content-section form textarea:focus {
  background: #fff;
  border-color: #fc4557
}
.web-post-section .web-content-section form textarea {
  height: 150px;
  resize: none;
}
.web-post-section .web-content-section form input[type='submit'] {
  width: 145px;
  float: left;
  font-size: .90rem;
  background: #2e3d62;
  color: #fff;
  border-color: #2e3d62;
}
.web-post-section .web-content-section form input[type='submit']:hover {
  opacity: .9
}
.web-post-section .web-content-section h1 {
  margin: 5px 0 15px;
  font-size: 1.25rem
}
.web-post-section .web-content-section h2 {
  font-size: 1.20rem
}
.web-post-section .web-content-section h3 {
  font-size: 1.15rem
}
.web-post-section .web-content-section h4 {
  font-size: 1.10rem
}
.web-post-section .web-content-section h5 {
  font-size: 1.05rem
}
.web-post-section .web-content-section h6 {
  font-size: 1rem
}
.web-post-section .web-content-section img {
  width: 100%;
  margin: 0 0 5px;
  height: auto;
  border-radius: 20px;
}
.web-post-section .web-content-section .web-tags-section {
  width: 100%;
  display: inline-block;
}
.web-post-section .web-content-section .web-tags-section ul li {
  display: inline-block;
  margin: 1px;
}
.web-post-section .web-content-section .web-tags-section ul li a {
  display: block;
  padding: 0 10px;
  font-size: .90rem;
  line-height: 2;
  background: #ECF0F1;
  color: #95A5A6;
}
.web-post-section .web-content-section .web-tags-section ul li a:hover {
  background: #f91942;
  color: #fff;
}
.web-description-section h2 {
  font-size: 1.5rem;
}
.web-description-section h3 {
  font-size: 1.35rem;
}
.web-description-section h4 {
  font-size: 1.20rem;
}
.web-description-section h5 {
  font-size: 1.05rem;
}
/*-------------------------------------------------------------
 15. Related Section CSS
--------------------------------------------------------------*/

.web-related-section .web-products-section {
  margin: 0;
  padding: 0;
  background: transparent;
}
.web-related-section .web-section h2 {
  margin: 0 0 5px;
  padding: 0 0 5px;
  font-size: 1.85rem;
}
/*-------------------------------------------------------------
 16. Page Section CSS
--------------------------------------------------------------*/

.web-page-section {
  width: 100%;
  float: right;
  padding: 30px 0;
}
.web-page-section .web-products-section {
  padding: 0;
  background: transparent;
}
.web-page-section .web-gallery-section {
  padding: 5px 15px
}
.web-page-section .web-gallery-section ul li {
  display: inline-block;
}
.web-page-section .web-gallery-section ul li img {
  width: 100%;
  height: 185px;
  margin: 15px 0;
  border-radius: .25rem;
  object-fit: cover;
  box-shadow: 0 0 5px 0 rgb(30 25 30 / 15%);
}
.body .web-header-section {
  position: relative;
  background: #2e3d62;
  border-bottom: 1px solid rgb(63, 77, 111);
}
.body .web-intro-section .web-section h1:before {
  left: auto;
  right: 5px;
}
.body .web-intro-section .web-section h1:after {
  left: auto;
  right: 60px;
}
/*-------------------------------------------------------------
 17. Widget Section CSS
--------------------------------------------------------------*/

.web-widget-section {
  width: 100%;
  display: inline-block;
  margin: 0 0 15px;
  padding: 15px;
  background: #fff;
  color: #2f353b;
  line-height: 1.80;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-widget-section strong {
  display: block;
  padding: 0 0 5px;
  font-size: 1rem;
  border-bottom: 1px solid #f9f9f9
}
.web-widget-section form {
  margin: 15px 0 0;
  position: relative;
}
.web-widget-section form input {
  width: 100%;
  padding: 5px 15px;
  background: #fcfcfc;
  border: 1px solid #ddd;
  border-radius: 300px;
}
.web-widget-section form button {
  position: absolute;
  top: 5px;
  left: 5px;
  line-height: 2;
  background: transparent;
  color: #bfbfbf;
  border: 0;
}
.web-sidebar-section .web-telegram-section,
.web-sidebar-section .web-instagram-section {
  padding: 0;
}
.web-widget-section video {
  margin: 15px 0 0;
}
.web-about-section p {
  margin: 15px 0 0;
}
.web-news-section ul li {
  width: 100%;
  padding: 10px 0;
  float: right;
  display: inline-block;
  position: relative;
  line-height: 1;
  border-bottom: 1px solid #f9f9f9;
}
.web-news-section ul li:last-child {
  padding: 15px 0 0;
  border-bottom: 0;
}
.web-news-section ul li figure {
  width: 100%;
  float: right;
  margin: 0;
}
.web-news-section ul li img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}
.web-news-section ul li .web-news-content h2 {
  display: block;
  clear: both;
  margin: 0;
  padding: 10px 0 5px;
  font-size: 1rem;
  line-height: 25px;
}
.web-news-section ul li .web-news-content h2 a {
  color: #2f353b
}
.web-news-section ul li .web-news-content h2 a:hover {
  color: #f91942
}
.web-news-section ul li .web-news-content span {
  display: inline-block;
  font-size: .80rem;
}
.web-editor-section {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.web-editor-section .web-editor-content {
  width: 100%;
  height: 100px;
  display: block;
  margin: 0 0 15px;
  padding: 15px;
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
}
.web-editor-section .web-editor-content:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .35);
}
.web-editor-section ul li:last-child .web-editor-content {
  margin: 0;
}
.web-editor-section .web-editor-content h2 {
  position: relative;
  font-size: 1rem;
}
.web-editor-section .web-editor-content h2 a {
  color: #fff;
}
.web-editor-section .web-editor-content h2 a:hover {
  color: #ffb422
}
.web-editor-section .web-editor-content span {
  position: relative;
  font-size: .90rem;
  color: #e6e6e6
}
/*-------------------------------------------------------------
 18. Price Section CSS
--------------------------------------------------------------*/

.web-price-section .table {
  margin: 0;
  border: 1px solid #ddd;
  border-collapse: separate;
  border-radius: 10px;
}
.web-price-section .table thead tr {
  background: #fcfcfc;
}
.web-price-section .table thead tr th {
  font-weight: normal;
  border-width: 1px;
}
.web-price-section .table tbody tr:nth-child(odd) {
  background: rgba(252, 252, 252, .35);
}
.web-price-section .table thead tr th,
.web-price-section .table tbody tr td {
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: middle;
  text-align: center;
  border-radius: 10px;
}
.web-price-section .table tbody tr td span {
  font-size: .90rem
}
.web-price-section .table tbody tr td strong {
  font-size: 1.15rem;
}
.web-price-section .table tbody tr td .product {
  font-family: 'Vazir-Bold'
}
.web-price-section .table img {
  width: 65px;
  height: 65px;
  object-fit: cover;
  box-shadow: 0 0 5px 0 rgba(30, 25, 30, .15);
  border-radius: 50%;
}
@media screen and (max-width: 991px) {
  .web-price-section {
    margin: 30px 0 0;
  }
}
/*-------------------------------------------------------------
 19. Team Section CSS
--------------------------------------------------------------*/

.web-team-section {
  width: 100%;
  float: right;
  background: #fff;
  text-align: center;
}
.web-team-section .item {
  width: 100%;
  float: right;
  margin: 0 0 30px;
}
.web-team-section .item figure {
  margin: 0 auto;
}
.web-team-section .item figure img {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 50%;
}
.web-team-section .item h4 {
  margin: 15px 0 10px;
  font-family: 'Vazir-Medium';
  font-size: 1.15rem;
}
.web-team-section .item h6 {
  font-family: 'Vazir-Light'
}
/*-------------------------------------------------------------
 20. 404 Section CSS
--------------------------------------------------------------*/

.web-error-section {
  width: 100%;
  float: right;
  position: relative;
  background: #fff;
}
.web-error-section .web-content-section {
  width: 100%;
  float: right;
  margin: 0;
  font-family: 'Vazir-Light';
  font-size: 1.25rem
}
.web-error-section .web-content-section h1 {
  font-family: 'Kalameh-Bold';
  font-size: 3rem;
  color: #42495b
}
.web-error-section p {
  font-size: 1.25rem;
}
.web-error-section .web-form-section {
  width: 100%;
  float: right;
}
.web-error-section .web-form-section form {
  margin: 15px 0 0;
  position: relative;
}
.web-error-section .web-form-section input {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  font-size: 1rem;
  position: relative;
  border: 1px solid #ddd;
  border-radius: .25rem;
  color: #12141f;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.web-error-section .web-form-section button {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  background: #2e3d62;
  color: #fff;
  border: 1px solid #2e3d62;
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}
.web-error-section .web-form-section button i {
  line-height: 2;
}
.web-order-section {
  margin: 30px 0;
}
.web-order-section .result {
  width: 100%;
  float: right;
  margin: 15px 0 0;
  padding: 15px;
  background: #2e3d62;
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 5px 0 rgb(30 25 30 / 5%);
}
.web-order-section .result ul li {
  width: 100%;
  float: right;
  list-style: none;
}
.web-order-section .result ul li span {
  float: right;
}
.web-order-section .result .price {
  width: auto;
  height: auto;
  float: left;
  margin: 0;
}
.web-order-section .result ul li i {
  float: left;
  padding: 0 5px 0 0;
  font-size: .90rem;
  font-style: normal;
}
.web-order-section .result ul li strong {
  float: left;
}
.web-order-section form label {
  margin: 5px 0;
  color: #666
}
.web-order-section form label span {
  font-size: .85rem;
  color: #fc4557;
}
.web-order-section form input,
.web-order-section form select,
.web-order-section form textarea {
  width: 100%;
  height: 40px;
  padding: 5px;
  background: #fcfcfc;
  border: 1px solid #ddd;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgb(30 25 30 / 5%);
  -webkit-appearance: none;
  appearance: none;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}
.web-order-section form .price {
  width: 100%;
  height: 40px;
  margin: 15px 0;
  background: #2e3d62;
  color: #fff;
  border: 1px solid #2e3d62;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgb(30 25 30 / 5%);
}
.web-order-section form .final {
  width: 100%;
  height: 40px;
  margin: 15px 0 0;
  background: #1adc68;
  color: #fff;
  border: 1px solid #1adc68;
  border-radius: 300px;
  box-shadow: 0 0 5px 0 rgb(30 25 30 / 5%);
}
/*-------------------------------------------------------------
 21. Responsive Section CSS
--------------------------------------------------------------*/

@media screen and (max-width: 991px) {
  .web-header-section .container-fluid {
    padding: 0 30px;
  }
  .web-header-section img {
    float: right;
  }
  .web-header-section .order {
    order: 2;
  }
  .web-header-section .order button {
    float: left;
  }
  .web-header-section .hidden {
    display: none;
  }
  .web-header-section ul {
    background: #2e3d62;
    border-radius: .25rem;
  }
  .web-slider-section .web-content-section {
    padding: 0 15px;
    top: 130px;
  }
  .web-slider-section .web-content-section h1 {
    margin: 20px 0 10px;
  }
  .web-service-section .web-background-section {
    margin: -120px 0 0;
  }
  .web-service-section ul li .item {
    margin: 15px 0;
  }
  .web-contact-section .web-content-section {
    padding: 0;
  }
  .web-review-section {
    padding: 100px 0 150px
  }
  .web-sidebar-section .web-telegram-section img,
  .web-sidebar-section .web-instagram-section img {
    width: 100%;
  }
}
@media screen and (max-width: 766px) {
  .web-slider-section .web-content-section h1 {
    font-size: 2.5rem
  }
  .web-cover-section .web-cart-section {
    top: 25px;
    z-index: 10;
  }
  .web-footer-section {
    text-align: center
  }
  .web-footer-section strong:before {
    margin: 0 auto;
    left: 0;
  }
  .web-footer-section .web-newsletter-section,
  .web-footer-section .web-social-section {
    width: 100%;
  }
}
@media screen and (max-width: 576px) {
  .web-intro-section h2 {
    margin: 15px 0 0;
  }
  .web-intro-section figure {
    width: 100%;
    display: inline-block;
    text-align: center
  }
  .web-contact-section figure img {
    display: none
  }
}