/* Global */

@font-face {
   font-family: "Vazir";
   src: url("/assets/Fonts/WOFF/Vazir-Light.woff") format("woff"),
      url("/assets/Fonts/TTF/Vazir-Light.ttf") format("ttf");
   font-weight: 300;
}
@font-face {
   font-family: "Vazir";
   src: url("/assets/Fonts/WOFF/Vazir-Regular.woff") format("woff"),
      url("/assets/Fonts/TTF/Vazir-Regular.ttf") format("ttf");
   font-weight: 400;
}
@font-face {
   font-family: "Vazir";
   src: url("/assets/Fonts/WOFF/Vazir-Medium.woff") format("woff"),
      url("/assets/Fonts/TTF/Vazir-Medium.ttf") format("ttf");
   font-weight: 500;
}

* {
   font-family: "Vazir";
   direction: rtl;
   transition: all 0.2s;
}

body {
   background-color: #f5f5f5;
   margin: 0px;
   color: #333533;
   overflow-x: clip;
}

a {
   text-decoration: none;
}

h2 {
   font-weight: 400;
}

h5 {
   margin-bottom: 5px;
   color: #a0a0a0;
   font-weight: 500;
   font-size: 18px;
}

h6 {
   margin: 0;
}

ul {
   list-style: none;
   padding: 0px;
}

/* Container */

.header {
   background-color: #333533;
   height: 376px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 45px 0px;
   /* need to be fix */
   background: linear-gradient(
      180deg,
      rgb(80, 15, 145) 0%,
      rgb(84, 78, 84) 100%
   );
}

.container {
   display: flex;
   justify-content: center;
   padding: 45px 0px;
}

nav {
   width: 250px;
   font-size: 24px;
}

nav li.active {
   font-weight: 500;
}

.sections {
   width: 700px;
   border-right: 1px solid #333533;
   padding-right: 50px;
}

nav ul li {
   cursor: pointer;
}

nav ul li .marker {
   width: 42px;
   height: 42px;
   line-height: 48px;
   border: 1px solid #333533;
   border-radius: 50%;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   margin-right: 12px;
}

nav ul li.active .marker,
nav ul li:hover .marker {
   background-color: #333533;
   color: #ffd100;
   font-size: 22px;
}

nav ul li:not(:last-child)::after {
   content: "";
   display: block;
   height: 48px;
   border-right: 1px dashed #333533;
   margin: 16px 33px 16px 21px;
}
/* Header */

@keyframes float {
   0% {
      box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
      transform: translatey(0px);
   }
   50% {
      box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
      transform: translatey(-20px);
   }
   100% {
      box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
      transform: translatey(0px);
   }
}

.header img {
   width: 290px;
   height: 290px;
   border-radius: 50%;
   border: 5px #ffd100 solid;
   box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
   transform: translatey(0px);
   animation: float 6s ease-in-out infinite;
   img {
      width: 100%;
      height: auto;
   }
}

.header .title {
   margin: 0px 50px;
}

@keyframes scaletitle {
   0% {
      font-size: 32px;
   }
}
@keyframes scaleposition {
   0% {
      font-size: 10px;
   }
}

.header .title h1 {
   color: #ffd100;
   font-size: 56px;
   margin: 0px;
   line-height: 1;
   animation: scaletitle 0.6s ease-in-out;
}

.header .position {
   color: #fafafa;
   font-size: 32px;
   margin: 40px 0px;
   animation: scaleposition 0.6s ease-in-out;
   transition: all 0.7s ease-in-out;
}

.header .button {
   color: #ffd100;
   border: 1px solid #ffd100;
   border-radius: 4px;
   padding: 8px 24px;
}

.header .button:hover,
.header .button:hover i {
   background-color: #ffd100;
   color: #333533;
}

.header .lang:hover,
.header .lang:hover i {
   opacity: 1;
}

.header .position i,
.header .button i {
   color: #ffd100;
   transition: none;
}

.header .button i {
   margin-left: 6px;
}

.header .lang {
   color: #fafafa;
   border: 1px solid #fafafa;
   border-radius: 4px;
   padding: 4px 12px;
   font-size: 12px;
   opacity: 0.7;
   align-self: flex-start;
}

.header .lang i {
   margin-left: 4px;
}

.contact {
   display: flex;
}

.contact div {
   width: 50%;
}

.contact p {
   margin-top: 0;
}

.contact p i {
   margin-right: 10px;
   font-size: 16px;
   color: #a0a0a0;
   cursor: pointer;
}

.contact p i:hover {
   color: #333533;
}

.socials li a span,
.socials li {
   display: inline-block;
   margin-left: 32px;
   width: 56px;
   height: 56px;
}

.socials li span.linkedin {
   background-image: url("../Icons/Social/linkedin.png");
}

.socials li:hover span.linkedin {
   background-image: url("../Icons/Social/linkedin-hover.png");
}

.socials li span.twitter {
   background-image: url("../Icons/Social/twitter.png");
}

.socials li:hover span.twitter {
   background-image: url("../Icons/Social/twitter-hover.png");
}

.socials li span.stackoverflow {
   background-image: url("../Icons/Social/stackoverflow.png");
}

.socials li:hover span.stackoverflow {
   background-image: url("../Icons/Social/stackoverflow-hover.png");
}

.socials li span.whatsapp {
   background-image: url("../Icons/Social/whatsapp.png");
}

.socials li:hover span.whatsapp {
   background-image: url("../Icons/Social/whatsapp-hover.png");
}

.socials li span.telegram {
   background-image: url("../Icons/Social/telegram.png");
}

.socials li:hover span.telegram {
   background-image: url("../Icons/Social/telegram-hover.png");
}

.socials li span.github {
   background-image: url("../Icons/Social/github.png");
}

.socials li:hover span.github {
   background-image: url("../Icons/Social/github-hover.png");
}

.skills li {
   border: 1px solid #333533;
   border-radius: 8px;
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 12px;
}

.skills li img {
   vertical-align: middle;
   margin-left: 8px;
}

.skills .title {
   font-weight: 500;
}

.skills li i {
   padding: 10px 12px;
   border-right: 1px solid #a0a0a0;
}

.skills .tech {
   width: 100px;
   height: 36px;
}

.other-skills li {
   border: 1px solid #a0a0a0;
   border-radius: 24px;
   display: inline-block;
   padding: 8px 24px;
   margin: 0px 16px 18px 16px;
}

.project {
   border: 1px solid #333533;
   border-radius: 8px;
   padding: 10px;
   width: 25%;
   display: flex;
   flex-direction: column;
   margin-bottom: 36px;
}

.project .h6title {
   font-weight: 500;
   font-size: 20px;
   margin-top: 12px;
}

.project .description {
   font-size: 13px;
   line-height: 20px;
}

.width-section {
   width: 880px;
}

/* check later */
.project .techused {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
}

.project .techused ul li {
   display: inline-block;
}

.project .techused ul li img {
   width: 25px;
}

.project .buttons {
   display: flex;
}

.project .buttons a {
   width: 50%;
   padding: 4px 8px;
   /* padding: 8px 16px; */
   border: 1px solid transparent;
   text-align: center;
}

.project .buttons a:first-child,
.project .buttons a:last-child:hover {
   border: 1px solid #333533;
   border-radius: 4px;
} 
.project .buttons a:last-child {
   margin-right: 4px;
 }

.project .buttons a:first-child:hover {
   color: #fafafa;
   background-color: #333533;
}

.box-button {
   color: #333533;
   font-size: 13px;
   font-weight: 500;
}

.box-button i {
   margin-left: 5px;
}

.projects {
   display: flex;
   flex-wrap: wrap;
}

.project:not(:last-child){
   margin-left: 20px;
 }