@charset "utf-8";

/* font loader */
@font-face {
    font-family: vazir;
    src: url(/assets/fonts/Vazir.eot) format('eot');
    src: url(/assets/fonts/Vazir.ttf) format('ttf');
    src: url(/assets/fonts/Vazir.woff) format('woff');
    src: url(/assets/fonts/Vazir.woff2) format('woff2');
}
/*color variable*/
:root{
    --primary: #771777ea;
    --secondary: #f5f5f5;
}
/* css Reset */
*,body{
    margin: 0;
    padding: 0;
    direction: rtl;
    font-family: vazir;
    z-index: 2;
}
ul,li,a{
    text-decoration: none;
    /* list-style: none; */
}
#body-img{
    background: url('../assets/images/bg.png') ;
}
/* copy HERE */

  #particles-js {
    /* position: absolute; */
    background-color: #151019;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    /************************************ if want Change Main BackGround opacity will change to 0 */
    opacity: 1;
    z-index: 1;
    height: 100%;
    top: 0;
    bottom: 0;
  }
  .bg-prim{
    background-color: var(--primary);
  }
  .border-prim{
    border: 1px solid var(--primary);
  }
  #topImage{
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    max-height: 200%;
  }
  #art1{
    background: url(../assets/images/bgArticle.jpg);
  }
  .image-container{
    position: relative;
    text-align: center;
    width: 100%;
    height: 300px;
    overflow: hidden;

  }
  .text-shadow{
    box-shadow: 0px 1px 3px 1px purple;
  }
  .z-index-2{
    z-index: 2!important;
  }
  .fs-7{
    font-size: .8rem;
  }
  #footer{
    background: url(../assets/images/bgArticle.jpg);

  }
  .bg-freeLanser{
    background-image: url('images/bg-freeLanser.jpg');
    /* filter: opacity(.5); */
  }
  /* aboutMe Page */




  .infopage-nav{
    z-index: 1;
}
.info-me{
 /* height: 100vh;    */
padding-top: 4.5rem;
}
.info-name{
text-shadow: 0 1px 1px rgb(53, 40, 53);
}
/* .img-sajad{
    background: url(../img/sajad.png);
    background-position:right;
    background-repeat: no-repeat;
    background-attachment:fixed;

} */
.info-header-title{
    right: -1.8rem;
    z-index: 1;
}
.custom-fa-map-marked-alt{
    vertical-align: -.3rem;
}
.info-header-title-left{
    left: -1.8rem;
    z-index: 1;
}
.custom-lh{
  line-height: 1.9rem;
}

.custom-height{
    height: 78px;
}
.info-social div{
    width: 80px;
    height: 80px;
    /* background: linear-gradient(to right , #2193b0, #6dd5ed );  */
    border-radius: 100%;
    font-size: xx-large;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s ease;
}
.info-social a{
  border-radius: 50%;
}
.info-social a:nth-child(1){
    color: #25D366;
    box-shadow: 0 0 5px 0;
}
.info-social a:nth-child(2){
    color: #8a3ab9;
    box-shadow: 0 0 5px 0;
}
.info-social a:nth-child(3){
    color: #2AABee;
    box-shadow: 0 0 5px 0;
}
.info-social div:hover{
    box-shadow: 0 0 5px 2px;
}
.custom-contactUs{
  width: 150px;
  height: 150px;
}
.custom-contactUs:hover{
  transition: all .4s ease;
  box-shadow: 0px 0px 10px 0px  rgb(238, 207, 207)!important;
}
.justify-self-end{
  justify-self: end !important;
}
.login-img{
    max-width: 150px;
}
.navbar-toggler:focus{
    box-shadow: 0 0 1px 1px gray;
}
.custom-z{
	z-index: 999999!important;
}
.customVisible{
	visibility: hidden!important;
}

@media screen and (max-width:650px) {
  .customVisible{
    visibility: visible!important;
  }
}
.bg-custom-bio{
  background: linear-gradient(#000,#fff,#000);
  /* background: radial-gradient(#000,#ffff); */


}



.boxer {
  --border-size: 3px;
  --border-angle: 0turn;

  background-image: conic-gradient(
      from var(--border-angle),
      #213,
      #112 50%,
      #213
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;

  animation: bg-spin 3s linear infinite;
}

.boxer2 {
  --border-size: 3px;
  --border-angle: 0turn;

  background-image: conic-gradient(
      from var(--border-angle),
      #213,
      #112 50%,
      #213
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;

  animation: bg-spin 10s linear infinite;
}

.boxer3 {
  --border-size: 3px;
  --border-angle: 0turn;

  background-image: conic-gradient(
      from var(--border-angle),
      rgb(255, 255, 255),
      rgb(255, 255, 255) 50%,
      rgb(255, 255, 255)
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;
z-index: -1;
  animation: bg-spin 8s linear infinite;
  background-color: white!important;
}











  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }


@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.custom-mt-skill{
  margin-top: 5rem;
}