/*
Theme Name:webyarthemepro159
Theme URI: https://www.webyar.net
Description: webyar theme beauty
Version: 1.0
Author: Mohamad_Mehdi_Hajati
design: Design By M_Hajati
Author URI: https://www.webyar.net
*/
@font-face {
    font-family: 'vazir';
    src: url(assets/font/vazir.woff2),url(assets/font/vazir.woff),url(assets/font/vazir.ttf),url(assets/font/vazir.eot);
}
*{
    margin: 0;
    padding: 0;
    font-family: 'vazir';
}
:root{
    --primary-color:rgb(0, 0, 119);
    --secondery-color:rgb(76,81,91);
    --text-color:#333;
    --button-blue: rgb(2,103,255);
    --box-background:rgb(243,243,243);
    --text-white:#fefefe;
    --header-bg-color:rgb(0,0,0,0.38);
    --index-title-color:rgb(0, 140, 255);
    --box-shadow-color:rgba(76,81,91,0.41);
    --product-background:rgb(243,243,243);
    --footer-bg:rgba(255,255,255,0.7);
}
html{
    overflow-x: hidden;
}
body{
    overflow: hidden;
    font-size: 20px;
    direction: rtl;
    text-align: justify;
}
.container-fluid{
    max-width: 1920px;
}
a:hover{
    text-decoration: none!important;
}
h2{
font-size: 40px;
}
h3{
 font-size: 30px;
}
.nopadding{
    padding: 0;
}
.container-90{
    margin: 0 auto;
    width: 90%;
}
.container-80{
    margin: 0 auto;
    width: 80%;
}
.nav-custom-tools{
    background: linear-gradient(0deg,transparent,#000);
}
.navbar-brand img{
    width: 64px;
}
.navbar-brand strong{
    color: var(--index-title-color);
}
#mainNavbar .nav-link{
color: var(--text-white);
}
#mainNavbar .nav-item:hover .nav-link{
    color:var(--index-title-color);
}
.dropdown-menu li{text-align:right;}
header{
    background:url(assets/img/slide2.jpg) no-repeat ;
    min-height: 80vh;
    background-size: cover;
}
.header-content{
    height: 60vh;
}
h1.index-title{
    color: var(--index-title-color);
    filter: drop-shadow(1px 1px 1px var(--text-white));
}
h3.index-title{
    color: var(--text-white);
    -webkit-text-stroke: 1px var(--text-color);
    text-align:center;
}
.header-button {
border: none;
box-shadow: 1px 1px 10px var(--header-bg-color),-1px -1px 10px var(--header-bg-color);
color: var(--text-white);
padding: 0.3rem 1.5rem;
border-radius: 30px;
font-size: 18px;
}

.header-button.orange{
    color: vat(--text-white);
    background-color: var(--primary-color);
    margin-left: 16px;
    transition: all .1s linear .09s;
}
.header-button.orange:hover{
    color: var(--primary-color);
    background-color:var(--text-white);

}
.header-button.gray{
    background-color: var(--secondery-color);
    margin-right: 16px;
    transition: all .1s linear .09s;
}
.header-button.gray:hover{
    background-color: var(--text-white);
    color: var(--secondery-color);
}
.header-button:active{
border: none;
outline: none;
}
.header-button:focus{
border: none;
outline: none;
}
.header-search{
background-color: var(--text-white);
border-radius: 25px;
display: flex;
flex-direction: row;
padding: 0;
width: 40%;
}
.header-search input[type="text"]{
background-color: transparent;
border: none;
border-radius: 25px ;
width: 100%;
padding: .1rem 1rem;
height: 50px!important;
}
.header-search input[type="text"]:focus{
    outline: none;
}
.header-search input[type="text"]:placeholder{
color: var(--secondery-color);
}
.header-search button {
    border: none;
    border-radius: 50%;
    padding: .7rem;
    background-color: var(--blue);
    color: var(--text-white);
    width: 50px;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
  }
.about-us{
    line-height: 2.5;
    font-size: 18px;
}
.about-us_title{
    color: var(--primary-color);
    text-align: right;
    font-size: 22px;
}
.about-us_img img{
width: 88%;
height: 100%;
border-radius: 50%;
box-shadow: 2px 2px 20px var(--secondery-color);
}
/* services style */
.serv{max-width: 87px;max-height: 87px;width: 87px;height: 87px;background-repeat: no-repeat !important;}
.ser-img1{ background: url(assets/img/serv-sprites.png) -80px 0px;}.ser-img2{ background: url(assets/img/serv-sprites.png) 6px 1px;}.ser-img3{ background: url(assets/img/serv-sprites.png) -289px 0px;}.ser-img4{  background: url(assets/img/serv-sprites.png) -179px 0px;}
.video-wrapper{
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.video-wrapper video{
    width: 76%;
    border: solid 22px #222;
    border-radius: 10px 10px 0 0;
    margin: 0 auto;
}
.laptop-body img{
    width: 100%;
    margin-top: -30px;
}
.products{
    width: 100%;
    background: var(--product-background);
    position: relative;
}
.product-section-title{
color:var(--primary-color) ;
display: flex;
justify-content: center;
width: 100%;
padding: 1rem .3rem;
}
.product-carousel{
    max-width: 90vw;
}
.product-box{
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 5px 5px 10px var(--box-shadow-color), -5px -5px 10px var(--box-shadow-color);
    position: relative;
    transition: all .3s linear 0.1s;
    border-radius: 10px;
}
.product-box_img img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    min-height:350px;
}
.product-box:hover .product-box_body {
    top: 0;
}
.product-box_body{
    position: absolute;
    background: linear-gradient(var(--header-bg-color),var(--box-shadow-color));
    top:303px;
    height: 100%;
    width: 100%;
    color: var(--text-white);
    padding: 1rem;
    text-align: justify;
    transition: all .3s linear 0.1s;
}
.product-box_body h3 {
    font-size: 17px;
    line-height: 20px;
  }
.product-box_body p{
    font-size: 14px;
}
.swiper-wrapper{padding:1rem;}
.swiper-slide{
    max-width: 350px;
    max-height: 350px;
    width: 100% !important;
    height: 100%;
    min-height: 350px;
}
.more-button {
    border: solid 1px var(--blue);
    background: var(--blue);
    padding: 1rem 2rem;
    border-radius: 2rem;
    color: var(--text-white);
    font-size: 1rem;
    transition: all .5s linear .2s;
}
.more-button:hover, .more-button:focus, .more-button:focus-visible{
    background-color: var(--text-white);
    color: var(--primary-color);
    outline: none;
}
.swiper-button-next, .swiper-button-prev{
    padding: 1rem;
    background: var(--blue);
    width: 32px;
    height: 32px;
    font-size: 19px;
    color: var(--text-white);
    border-radius: 50%;
  }
.swiper-button-next::after, .swiper-button-prev::after {
	font-size:18px!important;
}
  .about-slabs h3{
      color: var(--primary-color);
      margin: 30px  5px;
  }
  .about-slabs p{
    line-height: 3;
    font-size: 18px;
  }
  .about-slabs2{
      background-color: var(--product-background);
  }
  .blog{
      position: relative;
  }
  .webyar-circle-left, .webyar-circle-right {
    position: absolute;
    top: 50%;
    font-size: 2rem;
    color: var(--primary-color);
    z-index: 6;
  }
  .webyar-circle-left{
    left: 10px;
  }
  .webyar-circle-right{
   right: 10px;
  }
  .blog-title{
      color: var(--primary-color);
      font-size: 30px;
  }
  .blog-carousel{
      max-width: 92vw;
      height: 85vh;
  }
  .blog-post{
      width: 100%;
      background: var(--text-white);
      box-shadow: 5px 5px 5px var(--box-shadow-color),-5px -5px 5px var(--box-shadow-color); 
	  height: 149%;
  }
  .blog-post-wrapper{
      width: 100%;
      height: 100%;
  }
  .blog-post img{
      width: 100%;
      height: 100%;
      max-height: 350px;
      max-width: 350px;
  }
  .blog-post_body{
      padding: 1rem;
  }
   .blog-carousel .swiper-slide{
    height: 100%;
  } 
  .blog-post:hover, .blog-post_body:hover{
      text-decoration: none;
  }
  .blog-post_body-title, .blog-post_body p{
    color: var(--text-color);
    text-decoration: none;
    font-size: 14px;
  }
.blog-post-wrapper,.blog-post-wrapper:hover{
      text-decoration: none;
  }
.blog-post_body-title{
      font-size: 17px;
      text-align:right;
  }
  .blog-post_body-link{
      color: var(--primary-color);
      text-decoration: none;
      font-size: 14px;
  }
 .blog-post_body-link:hover{
    color: var(--primary-color);
    text-decoration: none;

}
.consulation{
    background: url(assets/img/isfahanbar-warehouse.jpg) no-repeat center center;
    background-attachment: fixed;
}
.consulation p{
    font-size: 36px;
    color: var(--text-white);
    align-self: center;
    display: flex;
    height: inherit;
  }
  /* .news-carousel{
    min-height: 80vh;
}
.news-carousel .swiper-slide{
    width: 50%;
}
.news-post{
    width: 100%;
    height: 100%;
} */
.news-post{
    width: 100%;
    height: 100%;
    box-shadow: 5px 5px 10px var(--box-shadow-color), -5px -5px 10px var(--box-shadow-color) ;
}
.news-post_body-title {
    margin: 18px auto;
    font-size: 1.2rem;
    padding-right: 1rem;
  }
  .news-post_body{
      width: 100%;
      height: 100%;
  }
  .news-post p {
    font-size: 0.9rem;
    line-height: 2;
    padding: 0 1rem;
  }
  .contanct-us_title {
    color: var(--primary-color);
    font-size: 24px;
  }
  footer{
      background: url(assets/img/footer-bg.jpg);
      width: 100%;
  }
  .footer-bg {
    background-color: var(--footer-bg);
    margin: 2rem auto;
    width: 90%;
  }
  .footer-bg span, .footer-bg p{
      font-size: 1rem;
  }
  .footer-bg span{
      font-size: 1.3rem;
      color: var(--primary-color);
  }
  .footer-bg iframe {
    width: 100%;
    height: 207px;
  }
  .webyar-instagram, .webyar-facebook, .webyar-youtube {
    padding: .5rem;
    font-size: 2rem;
    border-radius: 5px;
  }
  .webyar-instagram{
    color: #8134af!important;
    border: solid 1px #8134af;
  }
  .webyar-facebook{
    color: #3b5998!important;
    border: solid 1px #3b5998;  
  }
  .webyar-youtube{
    color: #ff0000!important;
    border: solid 1px #F00;  
  }
  .social:hover{
      text-decoration: none;
  }
    /* archive  */
    .archive-post{
        background: var(--primary-color);
        position: relative;
        float: right;
        overflow: hidden;
        margin: 10px 1%;
        max-height:  375px;
        max-width: 375px;
		width:100%;
		height:100%;
        text-align: center;
        cursor: pointer;
    }
    .archive-post_img{
        position: relative;
        display: block;
        max-height:  375px;
        max-width: 375px;
		width:100%;
		height:100%;
        opacity: 1;
        transform: scale3d(1.05,1.05,1);
        -webkit-transform: scale3d(1.05,1.05,1);
        transition: all 0.35s;
        -webkit-transition: all 0.35s;
    }
    .archive-post:hover .archive-post_img{
        opacity: 0.6;
        transform: scale3d(1,1,1);
        -webkit-transform: scale3d(1,1,1);
    }
    .archive-post_body{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1rem;
      color: var(--text-white);
      font-optical-sizing: 1.25rem;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .archive-post_body::before{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 510px;
        height: 475px;
        background: rgba(255,255,255,0.5);
        transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
        -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
        transition: all 0.6s;
        -webkit-transition: all 0.6s;
    }
    .archive-post:hover .archive-post_body::before{
      -webkit-transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,100%,0);
      transform: scale3d(1.9,1.4,1) rotate(45deg) translate3d(0,100%,0);
    }
    .archive-post_body h2{
        text-align: right;
        font-size: 26px;
    }
    .archive-post_body p{
        position: absolute;
        right: 5px;
        bottom: 0;
        padding: 0 1rem;
        width: 90%;
        border-right: solid 3px var(--text-white);
        opacity: 0;
        transition: all 0.35s;
        text-align: right;
        font-size: 18px;
    }
    .archive-post:hover  .archive-post_body p{
        opacity: 1;
    }
    .pagination li a {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 2px var(--text-color);
      color: var(--text-color);
      margin: 1rem .5rem;
      text-decoration: none;
      transition: all .3s linear .1s;
    }
    .pagination li a:hover , .pagination li.current{
        color: var(--text-white);
      background-color: var(--text-color);
    } 
 .pagination li.current{
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
      /* single and page*/
  .single-title {
    font-size: 28px;
    margin: 30px auto;
  }
  .content h1,.content h2, .content h3, .content h4, .content h5, .content h6{
      color: var(--primary-color);
  }
  .content h2{
      font-size: 24px;
  }
  .content h3{
      font-size: 22px;
  }
  .content h4{
      font-size: 20px;
  }
  .content h5, .content h6{
      font-size: 18px;
  }
  .content p{
      font-size: 18px;
      text-align: justify;
      direction: rtl;
      line-height: 2;
   
  }
.rank-math-breadcrumb p{
    margin-bottom: 0!important;
}
.gform_title{
    display: none;
}
.footernav ul{
	list-style-type:none;
}
.footernav ul li a,.footernav ul li a:hover{
    color: var(--text-color);
    font-size: 16px;
}
.aligncenter {
    clear: both!important;
}
label{
	font-weight:normal!important;
}
.height-news{min-height: 227.5px;}
.absoluteButton {position: fixed;top: 1rem;left: 1rem;background: #FFF;width: 40px;height: 40px;display: flex !important;justify-content: center;align-items: center;border-radius: 50%;filter: drop-shadow(0 0 1rem #fff);color: var(--primary-color);transition:all 0.1s linear .1s;}  
.absoluteButton:hover{background:var(--primary-color);color:#FFF;}
@media screen and (max-width:992px){
      .order-custom{
          order:-1;
      }
      .laptop-body{
          display: none;
      }
      .video-wrapper{
          width: 90%;
      }
      .video-wrapper video {
        width: 100%;
        border: solid 4px #222;
        border-radius: 10px;
      }
  }
  @media screen and (max-width:550px){
    .swiper-slide {
        max-width: 429px;
        max-height: 350px;
        width: 100%;
        height: 100%;
        margin-right: 2px;
      }
      h1.index-title{
        font-size: 2rem;
        -webkit-text-stroke: 0px;
        text-align: center;
      }
      h3.index-title{
          font-size: 1.5rem;
          text-align: center;
      }
      .blog-post img{
          max-width: 100%;
          max-height: 100%;
      }
      .product-carousel{
        max-width: 90vw;
        min-height: 60vh;
    }
      .product-box_body{
          top:87%;
      }
  }
  @media screen and (max-width:430px){
    .product-carousel{
        max-width: 90vw;
        min-height: 40vh;
    }
    .product-box_body{
        top:87%;
    }
  }