@font-face {
    font-family: 'IRANYekanXFaNum Light';
    src: url('assets/fonts/IRANYekanXFaNum-Light.woff') format('woff');
}

@font-face {
    font-family: 'IRANYekanXFaNum Medium';
    src: url('assets/fonts/IRANYekanXFaNum-Medium.woff') format('woff');
}

@font-face {
    font-family: 'IRANYekanXFaNum Light';
    src: url('assets/fonts/IRANYekanXFaNum-Light.woff') format('woff');
}

@font-face {
    font-family: 'IRANYekanXFaNum Bold';
    src: url('assets/fonts/IRANYekanXFaNum-Bold.woff') format('woff');
}

@font-face {
    font-family: 'IRANYekanXFaNum Heavy';
    src: url('assets/fonts/IRANYekanXFaNum-Heavy.woff') format('woff');
}

.font-Light {
    font-family: 'IRANYekanXFaNum Light', serif;
}

.font-Medium {
    font-family: 'IRANYekanXFaNum Medium', serif;
}

.font-Bold {
    font-family: 'IRANYekanXFaNum Bold', serif;
}


.font-ExtraBlack {
    font-family: 'IRANYekanXFaNum Bold', serif;
}

.font-Heavy {
    font-family: 'IRANYekanXFaNum Heavy', serif;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}

body {
    direction: rtl;
    font-size: 20px;
    background: #f3f2f7;
    position: relative;
}

.body-top-pattern {
    position: absolute;
    top: 0;
    z-index: -1;
    left: 50%;
    opacity: .1;
    transform: translate(-50%, -50%);
}

.body-right-smooth {
    position: absolute;
    right: 0;
}


.body-left-smooth {
    position: absolute;
    left: 0;
    top: 15%;
}

.container {
    width: 1024px;
    margin: 0 auto 100px auto;
}

.plugin-info {
    text-align: center;
    margin-top: 50px;
}

.plugin-info .plugin-name {
    font-size: 7em;
    color: #001ea4;
}

.plugin-info .plugin-des {
    font-size: 2em;
}

.swiper {
    margin-top: 50px;
    width: 1024px;
    height: auto;
}

.swiper-slide {
    border-radius: 18px;
}

.option-box {
    display: flex;
    margin-top: 50px;
    flex-wrap: wrap;
}

.option-box .option {
    margin: 10px;
    padding: 20px;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #242424;
    justify-content: center;
    flex: 1 1 calc(33.33% - 20px);
}

.option-box .option:only-child {
    flex-basis: 100%;
}

.option-box .option .option-des {
    margin-top: 20px;
    line-height: 1.8em;
    text-align: center;
    font-size: .8em;
}

.last-option-title {
    font-size: 2em;
}

.last-option-des {
    font-size: 1.2em !important;
    text-align: justify-all;
    padding: 0 20px;
}

.demo {
    margin-top: 50px;
    text-align: center;
    background: white;
    padding: 20px;
    position: relative;
    border-radius: 20px;
}

.demo-username, .demo-password {
    font-size: .8em;
    margin-bottom: 20px;
}

.demo-title {
    margin: 10px 0 30px 0;
}

.demo-title .plugin-name {
    color: #001ea4;
    margin: 0 5px;
}

.demo-link {
    border: 3px solid #001ea4;
    color: #001ea4;
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
}

.demo-link:hover {
    background: #001ea4;
    color: white;
}


.demo-left-smooth {
    position: absolute;
    left: 0;
    bottom: -5px;
}

.demo-right-smooth {
    position: absolute;
    right: 0;
    top: 0;
}

@media only screen and (max-width: 1024px) {

  .container{
   		width:90%;
  }
  
  body{
   	max-width: 100%;
  	overflow-x: hidden; 
  }
  
  .swiper{
    	width:90%;
  }	
  
  .option-box .option{
   		flex: 1 1 calc(50% - 20px); 
  }
  
  .plugin-info .plugin-name{
   		font-size:5em; 
  }
  
    .plugin-info .plugin-des{
   		font-size:1.5em; 
  }
}

@media only screen and (max-width: 768px) {
    .swiper{
		display:none
  	}	
	  .option-box .option{
   		flex: 1 1 calc(100% - 20px); 
  }
  .body-right-smooth{
   	display:none 
  }
  .last-option-title{
   	text-align:center; 
    font-size:1.5em
  }
}