@font-face {
  font-family: vazir;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Vazir-Regular.eot");
  src: url("../fonts/Vazir-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Vazir-Regular.woff") format("woff"), url("../fonts/Vazir-Regular.woff2") format("woff2");
}
.articles-page{
 font-family:vazir !important;
 font-size:18px;
 line-height: 2.1rem;
}

/*.bg{*/
/*    background-image: url(../images/back2-min.jpg);*/
/*    background-size: contain;*/
/*    background-repeat: repeat-y;*/

/*}*/
h3{
    color:black;
}
.articles-page{
    display: flex;
    flex-wrap: wrap;
}
.nocomments{
     color:black;
}

.article-last{
  position:fixed;
  right:0;
  height: 100vh;
  margin-top:-40px;
}
.article-last::after{
    content: "";
    width: 1px;
    height: 90%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(0deg, transparent 0%, rgb(162, 130, 94) 20%, rgb(162, 130, 94) 80%, transparent 100%);
    display: flex;
}
.article-last .title{
  color:#fff;
  font-size:24px;
  font-weight:bold;
   position: absolute;
    top: 3%;
    right:15%;
}
.article-last .article-last-inner{
   height: 100vh;
    position: absolute;
    top: 10%;
    right:15%;
}
.article-last .article-last-inner .article-item {
   height:130px;
   border-radius:10px;
   position:relative;
   
 }
 .article-last .article-last-inner .article-item .article-item-title {
  position: absolute;
    bottom: 5px;
    left: 10px;
    color: #fff;
    z-index: 5;
    font-size: 15px;
    right:10px;
   
 }
 .article-last .article-last-inner .article-item::after {
    content: "";
    position: absolute;
    border-radius:10px;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color:rgb(0 0 0 / 51%);
 }
 .article-last .article-last-inner .article-item img {
    height: 100%;
   border-radius:10px;
   border:3px solid #b6916f;
  width: 100%;

  }
  .content-article{
     margin:auto;
  }
  .content-article .article-big-image{
   padding: 20px;
   border-radius:10px;
   
  
}
  .content-article .article-big-image img{
      height: 300px;
     border-radius:10px;
     border:3px solid #b6916f;
     width: 100%;
  }
  .content-article .title-article{
    color: black;
    padding: 10px;
    font-weight:bold;
    
    
}
 .content-article .title-article h4{
    font-weight:bold;
}
.content-article .article-description{
    color: black;
    text-align: justify;
    padding: 10px;
}
.ms-header .ms-nav {
    display: flex;
    width: 100%;
    background-color: #000000;
       
}
.smarloux-services {
    position: fixed;
}
.ms-main-container .ms-container {
    padding-top:10.5em;
}
@media (max-width: 767px) {
    .article-last .title {
    position: inherit !important;
}
.ms-main-container .ms-container {
    padding-top:8em !important;
}

  .article-last{
  background-color: rgba(0, 0, 0, 0.426);
 position: inherit;
    top: 0;
     height: auto;
}
.back {
    display: none;
}
.article-last .article-last-inner {
     height: auto; 
     position: inherit;
}
.articles-page {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    padding-bottom: 80px;
}
}

.article-last .back{
   /*background-image: url(../images/back2-min.jpg);*/
    background-size:cover;
 background-repeat: no-repeat;
  height: 100%;
  filter: blur(10px);
  width: 100%;
 
}

/*STYLE FORMS*/
.comment-respond{
    color:black;
}
.comment-respond form .comment-form-comment{
   display: flex;
   flex-direction: column;
}
.comment-respond #comment {
  border-radius: 8px;
    padding: 10px;
    color: #fff;
    background-color: #937653b0;
    border: 1px solid #eaddb3;
}
.comment-form-author #author {
    margin-right: 34px;
    border-radius: 8px;
    padding: 5px;
    color: #fff;
    background-color: #937653b0;
    border: 1px solid #eaddb3;
}
#submit {
            border-radius: 8px;
            padding: 5px;
            color: #fff;
            background-color: #937653;
            border: 1px solid #eaddb3
        }

        #comment {
            border-radius: 8px;
            padding: 5px;
            color: #fff;
            background-color: #937653b0;
            border: 1px solid #eaddb3;
        }

        #email {
            margin-right: 17px;
            border-radius: 8px;
            padding: 5px;
            color: #fff;
            background-color: #937653b0;
            border: 1px solid #eaddb3;
        }

        #url {
            border-radius: 8px;
            padding: 5px;
            color: #fff;
            background-color: #937653b0;
            border: 1px solid #eaddb3;
        }
        #commentform{
            padding:20px;
        }


/*STYLE FORMS*/

.smarloux-services-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  top: 90px;
  height: 80px;
  width: 100%;
  z-index: 20;
  background-color:#353535;
  padding: 10px 0;
  z-index: 10;
}
.smarloux-services-pages .services {
  display: flex;
  justify-content: center;

}
.smarloux-services-pages .services .services-item{
  display: flex;
  justify-content: center;
  align-items: center;
}

.smarloux-services-pages .services .services-item .image-services {
  display: flex;
  justify-content: start;
  align-items: flex-end;
}
.smarloux-services-pages .services .services-item .image-services img {
  width: 23px;
}
.smarloux-services-pages .services .services-item .name {
  display: flex;
  padding:1px;
  flex-direction: row-reverse;
  justify-content: center;
}
.smarloux-services .services .services-item .name .name-sevices {
  color: #fff;
  text-align:center;
}
.smarloux-services-pages .services .services-item .name .title-1 {
  font-size: 16px;
    color: rgb(202, 202, 202);
}

@media (max-width: 767px) {
    
  .smarloux-services-pages {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  bottom: 0 !important;
  top:inherit;
} 
  .smarloux-services-pages .services .services-item .name .title-1 {
  font-size: 14px;
    color: rgb(202, 202, 202);
}  

    .smarloux-services-pages .services .services-item .name .title {
        font-size: 13px !important;
        color: #b6916f;
        text-align:center;
    }
    .smarloux-services-pages .services .services-item .name{
        padding:0;
       line-height:1.2;
    }
}

.smarloux-services-pages .services .services-item .name .title {
  font-size: 17px;
  color: #b6916f;
}