* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body a {
  text-decoration: none !important;
}

body::-webkit-scrollbar {
  width: 5px; /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: #212529; /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: darkgray; /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 1px solid #2f3640; /* creates padding around scroll thumb */
}

* {
  scrollbar-width: thin;
  scrollbar-color: darkgray #2f3640;
}

body {
  scrollbar-width: thin; /* "auto" or "thin" */
  scrollbar-color: darkgray #212529; /* scroll thumb and track */
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: #2f3640;
}

*::-webkit-scrollbar-thumb {
  background-color: darkgray;
  border-radius: 20px;
  border: 1px solid #2f3640;
}

body h2, h4, h5 {
  font-family: "vazir";
  padding-bottom:15px;
  text-shadow: 2px 2px black;

}

body p {
  font-family: "tanha", 'Noto Sans JP', "sans-serif";
  text-align: justify;
  line-height: 36px;
}



@font-face {
  font-family: "yekan";
  src: url("../font/Yekan.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "parastoo";
  src: url("../font/Parastoo.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "sahel";
  src: url("../font/Sahel.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "samim";
  src: url("../font/Samim.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "tanha";
  src: url("../font/Tanha-FD.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "vazir";
  src: url("../font/Vazir.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@media (max-width: 768px) {

  body p {
    font-size: 16px !important;
    line-height: 28px !important;
  }
 
  .border-pic {
    width: 350px !important;
    height: 350px !important;
  }

  main #section-about .about-title article span:after {
    right: 25% !important;
  }

  main .border-pic .pic-png {
    width: 350px !important;
    height: 350px !important;

  }

  .custom-shape-divider-top-1622909557 svg {
    height: 100px !important;
  }

  main .next:before {
    width: 90vmin !important;
    height: 90vmin !important;
    left: auto;
    right: 45% !important;
    top: auto;
    bottom: 25% !important;

  }

  main .next {
    overflow: hidden !important;
  }

  .section-personal .sia .cardmain {
    position: static !important;

  }

  .section-web-design article p {
    width: 100% !important;
  }

  .section-web-design .section-web-design-body-pic {
    position: static !important;
  }

  .section-web-design .section-web-design-body-pic .section-web-design-pic {
    width: 300px !important;
    height: 300px !important;
  }

  .section-service article p {
    width: 100% !important;
  }

  .section-service:before {
    width: 600px !important;
    height: 600px !important;
    left: 0 !important;
    top: 35% !important;
  }

  .section-service::after {
    width: 590px !important;
    height: 590px !important;
    left: auto !important;
    right: 0 !important;
    top: auto !important;
    bottom: 20% !important;
  }

  .card-video .card-body:before {
    width: 20vmax !important;
    height: 20vmax !important;
    right: 0;
  }

  .section-blog article:before {

    content: "";
    position: absolute;
    width: 150px !important;
    height: 150px !important;
    border-radius: 61% 39% 75% 25% / 35% 42% 58% 65%;
    top: 10% !important;
    left: 0 !important;
    background-color: #ffc107;
  }

  .section-blog h4 {
    font-size: 1em !important;
  }

  .card-blog-one {
    height: 15rem !important;
  }

  .section-blog::before {
    top: 20% !important;
  }

  .section-blog::after {
    bottom: 50% !important;
  }

  .section-about .col-pic-about {
    width: 300px !important;
    height: 300px !important;
    transition: 1s;

  }
  .section-about .col-pic-about:before {
    width: 336px!important;
    height: 336px!important;
    left: -18px!important;
    top: -18px!important;
  }

  .section-about {
    padding-bottom: 80px !important;
  }

  .swal2-content {
    font-size: 16px !important;
  }

  .swal2-title {
    font-size: 16px !important;
  }

  .follow {
    text-align: center!important;
  }

  .followicon {
    justify-content: center !important;
  }

  .section-web-design-order h3 a {
    font-size: 1.5rem !important;
  }
  .section-personal:before {
    width: 80vmax!important;
    height: 80vmax!important;
  }
  .section-video:after {
    top:30% !important;
  }

  .section-video:before
  {
    width: 80vmax!important;
    height: 80vmax!important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
  .section-web-design .section-web-design-body-pic .section-web-design-pic {
    width: 450px !important;
    height: 450px !important;

  }

  .section-web-design p {
    font-size: 16px !important;
  }
}

@media (min-width: 1600px) {
  .section-web-design .numb1 {
    position: relative;
  }

  .section-web-design .numb1:before {
    position: absolute;
    content: "1";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design .numb2 {
    position: relative;
  }

  .section-web-design .numb2:before {
    position: absolute;
    content: "2";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design .numb3 {
    position: relative;
  }

  .section-web-design .numb3:before {
    position: absolute;
    content: "3";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design .numb4 {
    position: relative;
  }

  .section-web-design .numb4:before {
    position: absolute;
    content: "4";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design .numb5 {
    position: relative;
  }

  .section-web-design .numb5:before {
    position: absolute;
    content: "5";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design .numb6 {
    position: relative;
  }

  .section-web-design .numb6:before {
    position: absolute;
    content: "6";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design .numb7 {
    position: relative;
  }

  .section-web-design .numb7:before {
    position: absolute;
    content: "7";
    font-size: 360px;
    right: -15%;
    bottom: 5%;
    font-family: 'Caveat', cursive;
    color: #ffc107;
  }

  .section-web-design article p {
    font-size: 18px !important;
  }
}

/*----------menu-------------*/
#wrapper {
  cursor: pointer;
  padding: .25rem .75rem;
}

.circle {
  width: 30px;
  height: 30px;
  position: relative;
}

.line {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #9a9c9e;
  border-radius: 8px;
  transition: all cubic-bezier(.26, .1, .27, 1.55) .36s;
}

.top {
  top: 18%;
}

.middle {
  top: 48%;
}

.bottom {
  top: 78%;
}

.icon.close .top {
  transform: rotate(45deg);
  top: 48%;
}

.icon.close .bottom, .icon.close .middle {
  transform: rotate(-45deg);
  top: 48%;
}

body nav #navbarNavDropdown .navbar-nav a i {
  color: #909090;
}

body nav #navbarNavDropdown .navbar-nav a:hover i {
  color: rgba(255, 255, 255, 0.7);

}


nav {
  background-color: rgba(49, 53, 57, 0.76);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.navbar-nav a {
  font-family: "yekan";
}

/*----------menu-------------*/

/*----------header-------------*/
header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/header.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow:hidden;
  position: relative;

}
header .header-filter
{
  position: absolute;
  width: 100%;
  height: 100vh;
  
}
header .jumbotron article p {
  align-items: center !important;
  width: max-content;
  display: block;
}

.custom-shape-divider-bottom-1622030254 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-bottom-1622030254 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 180px;
}

.custom-shape-divider-bottom-1622030254 .shape-fill {
  fill: #212529;
}


header .next-section {
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: absolute;
  width: 100%;
  bottom: 55px;

}

header .next-section a {
  cursor: pointer;
  z-index: 2;
  animation-name: arrowdown;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  opacity: 1;
}

@keyframes arrowdown {
  0% {
    transform: translateY(0px);
    opacity: 1;
  }
  50% {
    transform: translateY(25px);
    opacity: 0.8;
  }
  100% {
    transform: translateY(25px);
    opacity: 0;
  }
}

header .next-section a i {
  font-size: 20px;
  color: #ffc107;
}

header .container .row .col article h1 {
  font-family: "vazir";
  color: #f1c40f;
  line-height: 3rem;
}

header .container .row .col article p {
  font-family: "vazir";
  font-size: 18px;

}

header .container .row .col article h6 {
  font-family: "tanha";

}

header .container .row .col a {
  font-family: "tanha";
}

/*----------header-------------*/
/*----------main-------------*/
main .next {
  position: relative;

}

main .next:before {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: -10vmin;
  top: auto;
  bottom: 0;
  animation: morph 5s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%;
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.07);
}

@keyframes morph {
  0% {
    border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
  }
  100% {
    border-radius: 40% 60%;
  }
}

main .border-pic {
  width: 550px;
  height: 500px;
 background-color: #383b3f;
  border-radius: 31% 69% 78% 22%/50% 65% 35% 50%;
 box-shadow: -10vmin 10vmin 0 rgba(255,193,7,0.8);
  animation-name: border-pic-anim;
  animation-duration: 30s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
}


@keyframes border-pic-anim {
  0% {
    border-radius: 31% 69% 78% 22%/50% 65% 35% 50%;
  }
  35% {
    border-radius: 67% 33% 25% 75% / 22% 68% 32% 78%;
  }
  75% {
    border-radius: 33% 67% 63% 37% / 75% 25% 75% 25%;
  }
  100% {
    border-radius: 31% 69% 78% 22%/50% 65% 35% 50%;
  }
}

main .border-pic .pic-png {
  background-image: url(../img/3.png);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  width: 600px;
  height: 500px;
  margin: auto;
  margin-bottom: auto;
  filter: brightness(90%);
  margin-bottom: 0 !important;
}
main .section-about-siasoft
{
  position: relative;
  overflow: hidden;
}

main .section-about-siasoft .container .row  .col-lg-6:nth-child(2) img
{
width: 250px;
height: 250px;
background-color: #313438;
border-radius: 31% 69% 78% 22%/50% 65% 35% 50%;
box-shadow: 4vmin 4vmin 0 #f8b603;
animation-name: border-pic-anim;
animation-duration: 45s;
animation-timing-function: ease;
animation-iteration-count: infinite;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
overflow: hidden;

}
main .section-about-siasoft .container .row  .col-lg-6 img
{
  border-radius: 50%;
  background-color: #383b3f;
}
main .section-about-siasoft .container .row  article {
  display: flex;
  flex-direction: column;


}
main .section-about-siasoft .container .row  article span
{
  font-family: "vazir", 'Noto Sans JP', "sans-serif";
  font-size: 2rem;
  color: #f8b603;
}
main .section-about-siasoft .container .row  .col-lg-6
{
  display: flex;
  justify-content: center;

  flex-direction: row;

}

#section-about {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  flex-wrap: nowrap;
  max-width: 450px;
}

main #section-about .about-title article span {
  font-family: "yekan";
  position: relative;
  padding-bottom: 25px;
  display : flex;
  font-size : 1.5rem;

}

main #section-about .about-title {
  position: relative;
}

main #section-about .about-title:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 230px;
  height: 1px;
  background: #999;
}

main #section-about .about-title article span:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 95px;
  height: 3px;
  background: #f8c000;

}

main #section-about .about-title article span:after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -7px;
  width: 15px;
  height: 15px;
  background: #f8c000;
  transform: rotate(45deg);
}

main section #section-about .about-content h3 {
  font-family: "vazir";
  color: #f8c000;
}

main section #section-about .about-content p {
  font-family: "tanha";
  font-size: 18px;
  line-height: 36px;

}

main section #section-about .about-content a {
  font-family: san-sarif ;
  text-decoration: none !important;
}

main section #section-about .resume {
  background: rgba(255, 255, 255, .2);
  box-shadow: 20px 20px 50px rgba(0, 0, 0, .5);
}

main section #section-about .resume p {
  font-family: "sahel";
}

main section #section-about .resume a {

  display: block;
  width: max-content;
}
main section #section-about .resume .a2
{
  font-family:"Yekan";
}

.section-personal article h2 {
  position: relative;


}

.section-personal article h2:before {
  position: absolute;
  content: "";
  width: 50%;
  height:2px;
left: 25%;
background-color: #ffc107;

  bottom: 0;


}

.section-personal {
  background-color: #2f3640;
  position: relative;
  overflow: hidden;
}
.section-personal:before
{
  width: 30vmax;
  height: 30vmax;
  right: 0vmin;
  bottom: 0vmin;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%;
  content: "";
  position: absolute;
  background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
  opacity: 0.8;

  will-change: border-radius, transform;
  pointer-events: none;
}
.section-personal:after
{
  content: "";
  width: 70vmax;
  height: 70vmax;
  position: absolute;
  background: rgba(0, 0, 34, 0.5);
  left: 0vmin;
  top: 20%;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 0;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none;
}



.custom-shape-divider-top-1622909557 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  overflow: hidden;
  line-height: 0;

}

.custom-shape-divider-top-1622909557 svg {
  position: relative;
  display: block;
  width: calc(128% + 1.3px);
  height: 149px;
}

.custom-shape-divider-top-1622909557 .shape-fill {
  fill: #212529;
}

.section-personal .card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 10;
}

.section-personal .sia {
  position: relative;
}

.section-personal .sia .cardmain {
  position: absolute;
  top: -50px;
}

.section-personal .card .img-box {
  width: 150px;
  height: 150px;
  display: flex;
  margin: auto;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0.9;
  margin-top: 1rem;
}

.section-personal .card h5 {
  margin: auto;
  text-align: center;
}

.section-personal .card p {
  text-align: center;
}

.section-personal .card .list-group-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

}

.section-personal .card .list-group-item {
  font-family: "yekan", 'Noto Sans JP', sans-serif;
  font-size: 16px;

}

.section-personal .card .lastul {
  direction: ltr !important;
}

.custom-shape-divider-bottom-1622928164 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 1;
}

.custom-shape-divider-bottom-1622928164 svg {
  position: relative;
  display: block;
  width: calc(120% + 1.3px);
  height: 85px;
}

.custom-shape-divider-bottom-1622928164 .shape-fill {
  fill: #212529;
}

.section-web-design article h2 {
  position: relative;

}

.section-web-design {
  position: relative;
  overflow: hidden;
}

.section-web-design article h2:before {
  content: "";
  position: absolute;

  bottom: -2px;
  width: 50%;
  height:2px;
  left: 25%;
  background-color: #ffc107;
}




.section-web-design .section-web-design-body-pic .section-web-design-pic {

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 500px;
  height: 500px;
  background-color: #2f3640;

}

.section-web-design article h3 {
  padding-bottom: 10px !important;
  font-family: 'Caveat', cursive, "tanha";
  color: #ffc107;
}

.custom-shape-divider-bottom-1623243360 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1623243360 svg {
  position: relative;
  display: block;
  width: calc(115% + 1.3px);
  height: 90px;
}

.custom-shape-divider-bottom-1623243360 .shape-fill {
  fill: #2f3640;
}

.section-service {
  background-color: #2f3640;
  overflow: hidden;
}

.section-service .first-article h2 {
  position: relative;

}

.section-service .first-article h2:before {
  content: "";
  position: absolute;

  bottom: -2px;
  width: 50%;
  height:2px;
  left: 25%;
  background-color: #ffc107;


}



.section-service .card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 10;
}

.section-service .card .card-header article h2 {
  font-family: 'Caveat', cursive;
}

.section-service .card .card-header article p {
  font-family: 'Caveat', cursive !important;
}

.section-service .card .card-body a {
  font-family: "tanha";
}

.section-service .card .list-group-item {
  font-family: "tanha" !important;
}

.section-service .card h5 {
  margin: auto;
  text-align: center;
}

.section-service .card p {
  text-align: center;
}

.section-service .card .list-group-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

}

.section-service .card .list-group-item {
  font-family: "yekan", 'Noto Sans JP', sans-serif;
  font-size: 16px;

}

.section-service {
  position: relative;
}

.section-service:before {
  content: "";
  width: 40vmax;
  height: 40vmax;
  position: absolute;
  background: rgba(0, 0, 34, 0.5);
  left: 0vmin;
  top: 5vmin;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 0;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none;
}

.section-service:after {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: +6vmin;
  top: auto;
  bottom: 0;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%;
  content: "";
  position: absolute;
  background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
  opacity: 0.8;
  z-index: 0;
  will-change: border-radius, transform;
  pointer-events: none;
}

.custom-shape-divider-bottom-1623364277 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1623364277 svg {
  position: relative;
  display: block;
  width: calc(135% + 1.3px);
  height: 81px;
}

.custom-shape-divider-bottom-1623364277 .shape-fill {
  fill: #212529;
}

.section-works .container:last-child .row a {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden !important;

}

.section-works .container:last-child .row a .hover-for-img p {
  font-family: 'Caveat', cursive;
  margin: auto;
  font-size: 1.5rem;
  color: #ffc107;

}

.section-works .container:last-child .row a .hover-for-img {
  left: 50%;
  bottom: 50%;
  background-color: rgba(49, 53, 57, 0.76);
  backdrop-filter: blur(5px);
  width: 0%;
  height: 0%;
  position: absolute;
  transition: 500ms;
  display: flex;
  justify-content: center;
  flex-direction: column;
overflow: hidden;
}

.section-works .container:last-child .row a:hover .hover-for-img {
  width: 100%;
  height: 100%;
  transition: 500ms;
  border: 1px solid #ffc107;
  left: 0%;
  bottom: 0%;

}

.section-works article h2 {
  position: relative;
  width: max-content;
  margin: auto;
}

.section-works article h2:before {
  content: "";
  position: absolute;

  bottom: -2px;
  width: 50%;
  height:2px;
  left: 25%;
  background-color: #ffc107;


}




/*------------card-video-----------*/


.section-video {
  position: relative;
  background: #2f3640;
  overflow: hidden;
}

.section-video .btn {
  font-family: "yekan", 'Caveat', cursive;
}

.section-video:before {
  content: "";
  position: absolute;
  width: 30vmax;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  height: 30vmax;
  bottom: 15%;
  right: 5%;
  border-radius: 60% 40% 9% 91% / 32% 63% 37% 68%;
  background: #f09;
  background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);

  z-index: 0;
}

.section-video:after {
  content: "";
  position: absolute;
  width: 55vmax;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  height: 55vmax;
  top: 30%;
  left: 0%;
  border-radius: 34% 66% 32% 68% / 56% 73% 27% 44%;
  background: #f09;
  background: rgba(0, 0, 34, 0.5);

  z-index: 0;

}

.section-video article {
  width: max-content;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-direction: row;
  position: relative;
}


.section-video article h2 {
  position: relative;
  width: max-content;
}

.section-video article i {
  font-size: 45px;
  color: #ff0000;


}
.section-video .card-body h5
{
  margin-bottom: 0!important;
}

.section-video .card-body p
{
  margin: 0!important;
  font-family: "tanha", 'Bebas Neue', cursive;
  font-size: 1rem;

}

.section-video .container {
  max-width: 960px;

}

.custom-shape-divider-top-1623624460 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  line-height: 0;
}

.custom-shape-divider-top-1623624460 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 150px;
}

.custom-shape-divider-top-1623624460 .shape-fill {
  fill: #212529;
}

.card-special-video
{
  width:18rem;
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
  position:relative;
  z-index: 5;
  box-shadow: 20px 20px 50px rgba(0,0,0,.5);
  backdrop-filter: blur(10px);


}
.card-special-video .card-video-main-img
{
  height:200px;
  position: relative;
  overflow: hidden;

}
.card-special-video .card-video-main-img img
{
  position: absolute;
}
.card-special-video .card-video-main-img .card-video-img-icon
{
  width: 100%;
  bottom: 30%;
  bottom: 35%;
  display: flex;
  position: absolute;
  margin: auto;
  flex-direction: row;
  justify-content: center;
}
.card-special-video .card-video-main-img .card-video-img-icon i
{
  font-size: 3.5rem;
  color: #ff0000;
  z-index: 2;
}
.card-special-video .card-video-main-img .card-video-img-filter
{
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0px);
  z-index: 1;
  transition: 0.3s;



}
.card-special-video .card-video-main-img:hover .card-video-img-filter
{
  backdrop-filter: blur(3px);
  transition: 0.3s;
}
.card-special-video .card-video-caption article
{
  padding: 5px;

}
.card-special-video .card-video-caption article h2 a
{
  font-family: "tanha", 'Caveat', cursive;
  font-size: 1rem;
  color: #ffc107;
  text-align: justify;
}
.card-special-video .card-avatar .avatar
{
  width:40px;
  height:40px;
  border-radius: 50%;

  position: relative;

}
.card-special-video .card-avatar .avatar:before
{
  position: absolute;
  content: "";
  width: 50px;
  height: 50px;
  background: rgba( 255, 255, 255, 0.25 );
  backdrop-filter: blur( 3.0px );
  -webkit-backdrop-filter: blur( 3.0px );
  border-radius: 50%;
  top: -5px;
  left:-5px;

  border: 1px solid rgba( 255, 255, 255, 0.18 );
  z-index: 0;
}
.card-special-video .card-avatar .avatar img
{
  width: 100%;
  height: 100%;
  z-index:1;
  position: absolute;
  border-radius: 50%;
}
.card-special-footer {
  background-color: #3d3d3d;
  opacity: 0.6;
}

/*------------card-video-----------*/


.custom-shape-divider-bottom-1624276940 {
  position: absolute;
  bottom: 0;
  z-index: 1;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1624276940 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.custom-shape-divider-bottom-1624276940 .shape-fill {
  fill: #212529;
}

/*------------card-blog-----------*/


.section-blog {
  position: relative;

}

.section-blog .container {
  max-width: 960px;

}

.section-blog::before {
  content: "";
  width: 40vmax;
  height: 40vmax;
  position: absolute;
  background: rgba(0, 0, 34, 0.5);
  left: 0vmin;
  top: 5vmin;
  animation: morph 15s linear infinite alternate, spin 20s linear infinite;
  z-index: 0;
  will-change: border-radius, transform;
  transform-origin: 55% 55%;
  pointer-events: none;
}

.section-blog::after {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: +6vmin;
  top: auto;
  bottom: 0;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%;
  content: "";
  position: absolute;
  background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
  opacity: 0.8;
  z-index: -1;
  will-change: border-radius, transform;
  pointer-events: none;
}

#about-us h3
{
  font-family: "Yekan";
}

.section-blog h4, h5 {
  font-family: "Yekan";
  line-height: 30px;
  transition: 500ms;


}

.section-blog h5:hover {
  opacity: 0.7;
  transition: 500ms;

}

.section-blog h4:hover {
  opacity: 0.7;
  transition: 500ms;

}

.section-blog h4 {
  font-size: 1.5em;
}

.section-blog article {
  background-color: #2f3640;
  border-radius: 25px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  position: relative;
  overflow: hidden;

}

.section-blog article:before {

  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 61% 39% 75% 25% / 35% 42% 58% 65%;
  top: 10%;
  left: 10%;
  animation: morph 5s linear infinite alternate, spin 26s linear infinite reverse;
  background-color: #ffc107;
}

.section-blog article h2 {
  font-family: "Yekan";
  text-shadow: 2px 2px black;
  z-index: 1;
  line-height: 30px;
}



 .card-special-new {
  max-width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background-color: #3d3d3d;
  padding: 5px;
  width: auto;
  box-shadow: 6px 10px 20px 0px rgba(0, 0, 0, 0.74);
  -webkit-box-shadow: 6px 10px 20px 0px rgba(0, 0, 0, 0.74);
  -moz-box-shadow: 6px 10px 20px 0px rgba(0, 0, 0, 0.74);

}

 .card-special-new .tag {
  width: 100%;
  top: 2%;
  right: 2%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  position: absolute;
}

 .card-special-new .badge  {

  margin: 2px;
  font-family: "yekan";
  font-size: 0.8rem;
  padding: 5px;
}

 .card-special-new .card-special-body {
  max-width: 100%;
  height: 25rem;
  background-color: #535c68;
  overflow: hidden;


}

 .card-special-new .card-special-back-gradient {
  width: 100%;
  height: 25rem;
  background-color: rgba(49, 53, 57, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  position: absolute;
  top: 0;


}

 .card-special-new .card-special-caption {
  width: 100%;
  position: absolute;
  top: 30%;
  padding: 15px;
}
.card-special-new .card-special-body img {
  height: 100% !important;
  width: 100% !important;
}
.card-special-new .card-special-caption h3 a {
  font-family: "vazir";
  font-size: 1.3rem;
  color: #ffc107;
  text-decoration: none;
}

 .card-special-new .card-special-caption p {
  font-family: "tanha";
  font-size: 1rem;
  color: ghostwhite;
}

 .card-special-new .card-avatar {
  width: 100%;
  position: absolute;
  top: 70%;
  padding: 15px;
}

 .card-special-new .card-special-footer {
  width: 100%;
  position: absolute;
  bottom: 0%;
}

 .card-special-new .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;

  overflow: hidden;
  border: 1px solid #ffc107;
}

 .card-special-new .avatar-caption small {
  color: #8395a7;
}

 .card-special-new .card-avatar .avatar-caption small {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;

}

 .card-special-new .card-special-footer {
  background-color: #3d3d3d;
  opacity: 0.6;
}

 .card-special-new .card-special-footer small {
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8rem;
}


 .card-main-blog {
  max-width: 100%;
  height: 25rem;
  margin: auto;
  background-color: #3d3d3d;
  overflow: hidden;
  padding: 5px;
  width: auto;
  box-shadow: 6px 10px 20px 0px rgba(0, 0, 0, 0.74);
  -webkit-box-shadow: 6px 10px 20px 0px rgba(0, 0, 0, 0.74);
  -moz-box-shadow: 6px 10px 20px 0px rgba(0, 0, 0, 0.74);
  border-radius: 5px;
}

 .card-main-blog .card-main-body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #535c68;
  border-radius: 5px;


}

 .card-main-body .tag {
  width: 100%;
  top: 2%;
  right: 2%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: nowrap;
  position: absolute;
  z-index: 1;
}

 .card-main-body .badge  {

  margin: 2px;
  font-family: "yekan";
  font-size: 0.8rem;
  padding: 5px;
}

 .card-main-blog .card-main-body .card-main-img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
 .card-main-blog .card-main-body .card-main-img:hover .card-img-hover
{
  left: 0%;
  transition: 0.5s;
}

 .card-main-blog .card-main-body .card-main-img .card-img-filter {

}

 .card-main-blog .card-main-body .card-main-img .card-img-hover {
  width: 80%;
  position: absolute;
  top: 40%;
  left: -100%;
  opacity: 0.8;
  background-color: #ffc107;
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
  transition: 0.5s;
}

 .card-main-blog .card-main-body .card-main-img .card-img-hover p {
  font-family: 'Caveat', cursive;
  font-size: 1.3rem;
  text-align: center;
  padding: 10px;
  margin: 0;
  color: black;
}

 .card-main-blog .card-main-body .card-main-img img {
  height: 100% !important;
  width: 100% !important;
}


 .card-main-blog .card-main-body .card-main-caption {
  position: absolute;
  top: 52%;
  padding: 10px;
}

 .card-main-blog .card-main-body .card-main-caption  h3 a {
  font-family: "vazir";
  font-size: 1rem;
  color: #ffc107;
  text-decoration: none;
}

 .card-main-blog .card-main-body .card-main-caption  p {
  font-family: "tanha";
  font-size: 0.8rem;
  color: ghostwhite;
   line-height:normal;
}

 .card-main-blog .card-avatar {
  width: 100%;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  bottom: 10%;
}

 .card-main-blog .card-special-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}

 .card-main-blog .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;

  overflow: hidden;
  border: 1px solid #ffc107;
}

 .card-main-blog .avatar-caption small {
  color: #8395a7;
  font-size: 0.8rem !important;
}

 .card-main-blog .card-avatar .avatar-caption small {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;

}

 .card-main-blog .card-special-footer {
  background-color: #3d3d3d;
  opacity: 0.6;
}

.section-blog .btn {
  font-family: "yekan", 'Caveat', cursive;
}

.custom-shape-divider-bottom-1624539736 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1624539736 svg {
  position: relative;
  display: block;
  width: calc(104% + 1.3px);
  height: 100px;
}

.custom-shape-divider-bottom-1624539736 .shape-fill {
  fill: #2f3640;
}

/*------------card-blog-----------*/


.custom-shape-divider-top-1624543978 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 2;
}

.custom-shape-divider-top-1624543978 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 90px;
}

.custom-shape-divider-top-1624543978 .shape-fill {
  fill: #212529;
}

.section-about {
  position: relative;
  background-color: #2f3640;
  padding-bottom: 170px;


}
.section-about .container {
  z-index:5
}

.section-about article h2 {
  position: relative;
  color: #f1c40f;
  font-family : "yekan", 'Noto Sans JP', sans-serif;
}



.section-about .col-pic-about {
  width: 350px;
  height: 350px;
  position: relative;
  transition: 1s;
  z-index: 1;
  overflow: visible !important;
}
.section-about .col-pic-about img
{
}
.section-about .col-pic-about:before {
  position: absolute;
  content: "";
  width: 400px;
  background: url("../img/index/1.jpg") center/cover no-repeat fixed;
  height: 400px;
  left: -25px;
  top: -25px;
  z-index: -1;
  backdrop-filter: blur(5px);
}

.section-about article ul li {
  color: #ffc107;
  font-family: "yekan";

}

.section-about article ul p {
  font-size: 14px;
  line-height: 25px;
  padding-top: 10px;

}

.custom-shape-divider-bottom-1624743441 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);

}

.custom-shape-divider-bottom-1624743441 svg {
  position: relative;
  display: block;
  width: calc(140% + 1.3px);
  height: 160px;
}

.custom-shape-divider-bottom-1624743441 .shape-fill {
  fill: #212529;
}

.section-tech {
  position: relative;

}

.section-tech article h3 {
  font-family: "tanha";
}

.section-tech .owl-carousel .card i {
  font-size: 64px;
}

.section-question {
  position: relative;
  background-color: #2f3640;
  padding-top: 160px;
}

.custom-shape-divider-top-1624789842 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-top-1624789842 svg {
  position: relative;
  display: block;
  width: calc(145% + 1.3px);
  height: 160px;
}

.custom-shape-divider-top-1624789842 .shape-fill {
  fill: #212529;
}

.section-question article h3 {
  position: relative;
  width: max-content;
  padding-bottom: 20px;
  margin: auto;
  font-family:"vazir";

}

.section-question article h3:before {
  position: absolute;
  content: '';
  width: 50%;
  height:2px;
  left:25%;
  background-color:#ffc107;

  bottom: 0;

}


.section-question .accordion-item {
  border-color: #ffc107 !important;

  background-color: #212529;

}

.section-question .accordion-item h2 {
  padding-bottom: 0;
  padding: 10px;
}

.accordion-button::after {
  background-image: none !important;
  content: "\005E" !important;
  color: #ffc107;
  font-size: 25px;
}

.section-question .accordion-item h2 {
  font-family: "Yekan";
}

.section-question .accordion-item p {
  font-family: "tanha";

}

.section-stats {
  position: relative;
  background: url(../img/index/1.jpg) center/cover no-repeat fixed;
  overflow: hidden;
}

.section-stats .container-fluid {
  backdrop-filter: blur(5px);

}

.section-stats .container-fluid span {
  font-family: 'Caveat', cursive;
  font-size: 64px;
  color: #ffc107;
}

.section-stats .container-fluid i {
  color: #ffc107;
  font-size: 32px;
  margin-left: 20px
}

.section-stats .container-fluid h5 {
  font-family: "Yekan";
  color: #ffc107;
}

.section-stats h3 {
  font-family: "tanha";

}

.custom-shape-divider-top-7-1615503729 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  z-index: 1;
}

.custom-shape-divider-top-7-1615503729 svg {
  position: relative;
  display: block;
  width: calc(120% + 1.3px);
  height: 180px;
  animation-name: seeEnd;
  animation-iteration-count: infinite;
  animation-duration: 30s;
  animation-timing-function: linear;
}

.custom-shape-divider-top-7-1615503729 .shape-fill {
  fill: #2f3640;
}

.custom-shape-divider-top-6-1613924020 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-top-6-1613924020 svg {
  position: relative;
  display: block;
  width: calc(120% + 1.3px);
  height: 180px;
  transform: rotateY(180deg);
  animation-name: seeEnd;
  animation-iteration-count: infinite;
  animation-duration: 30s;
  animation-timing-function: linear;
}

.custom-shape-divider-top-6-1613924020 .shape-fill {
  fill: #212529;
}

@keyframes seeEnd {
  0% {
    width: calc(120% + 1.3px);
  }
  25% {
    width: calc(200% + 1.3px);
  }
  50% {
    width: calc(250% + 1.3px);
  }
  100% {
    width: calc(120% + 1.3px);
  }
}

.section-web-design-order {
  background-color: #2f3640;
}

.section-web-design-order h3 {
  text-align: center;
  background-color: #212529;
  border-radius: 25px;
  font-family: "tanha";
  position: relative;
  overflow: hidden;
  width: max-content;
  margin: auto;

}

.section-web-design-order h3:before {
  width: 70vmin;
  height: 70vmin;
  left: 0vmin;
  top: 5vmin;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%;
  content: "";
  position: absolute;
  background: rgba(0, 0, 34, 0.5);
  opacity: 0.8;
  z-index: 0;
  will-change: border-radius, transform;
  pointer-events: none;
}

.section-web-design-order h3:after {
  width: 70vmin;
  height: 70vmin;
  left: auto;
  right: +6vmin;
  top: auto;
  bottom: 0;
  animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
  transform-origin: 20% 20%;
  content: "";
  position: absolute;
  background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);
  opacity: 0.8;
  z-index: 0;
  will-change: border-radius, transform;
  pointer-events: none;
}

.section-web-design-order h3 a {
  color: #ffc107;
  z-index: 2;
  position: inherit;
}

/*----------main-------------*/

/*----------footer-------------*/

footer .section-contact {
  background-color: #212529;
  position: relative;

}

footer .section-contact .container {
  max-width: 900px;
}

footer .section-contact article h4 {
  width: max-content;
  font-family: "Yekan";
  border: 1px solid #ffc107;
  border-radius: 25px;

}

.swal2-title {
  text-shadow: none !important;
}

footer .section-contact .btn {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer .section-contact .btn2:hover {
  color: #212529 !important;
}

footer .section-contact .btn3:hover {
  color: #212529 !important;
}

footer .section-contact .gridSystem-2 {
  display: none;
}

.section-contact h6:nth-child(1) {
  font-family: 'Monoton', cursive;
}

.section-contact .container {
  max-width: 900px
}

.section-contact a {
  font-family: "tanha", 'Monoton', cursive;
}

.section-contact .lastinput {
  font-family: 'Caveat', cursive;
}

.section-contact .filterButton {
  font-family: 'Noto Sans JP', "sans-serif";
}

.section-contact .filterButton:hover {
  color: #212529 !important
}

.section-contact label {
  font-family: 'Caveat', cursive;
}

.section-contact .input-group-text {
  border-radius: 5px 0px 0px 5px !important
}

.section-contact input {
  border-radius: 0 5px 5px 0 !important
}

.section-contact .form-group .input-group #name {
  font-family: 'Noto Sans JP', sans-serif;
}

footer a {
  text-decoration: none
}

footer h5 {
  font-family: 'Caveat', cursive;
  color: #f8f9fa;
  padding-bottom: 0;
}

footer li {
  font-family: 'Montserrat', sans-serif;
}

.input-group .lastinput:nth-child(1) {
  border-radius: 0px !important;
  border-bottom-left-radius: 5px !important;
  border-top-left-radius: 5px !important;

}

.input-group .lastinput:nth-child(2) {
  border-radius: 0px !important;
  border-bottom-right-radius: 5px !important;
  border-top-right-radius: 5px !important;
  background-color: #2f3640;
  color: #ffc107;

}

body .up {
  font-family: 'Caveat', cursive;
  color: #ffc107;
  position: fixed;
  bottom: 17px;
  left: 20px;
  font-size: 36px;
  z-index: 10;
}

body .up:after {
  content: '\2191';
  position: absolute;
  left: 25%;
  bottom: 50%;
  transition: 500ms;
}

/*----------footer-------------*/