/* ================ font ================ */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

/* ================ all style ================ */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  font-family: "Vazirmatn", sans-serif;
}



/* ================ style html and body projects ================ */



html, body {
  scroll-behavior: smooth;
  font-size: 62.5%;
  color: #fff;
  min-height: 100vh;
  line-height: 1.6;
  background-color: var(--bgBackground);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* ================  loader ================ */
/* position loader in page */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bgBackground);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: all 0.6s ease;
}

.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}
/* spinner loader  */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid rgb(155, 53, 251);
  border-top: 5px solid rgb(241, 205, 250);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/* animation for rotate loader */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}
/* ================  navbar ================ */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1.5rem 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bgNavbar);
  backdrop-filter: blur(10px);
  z-index: 1000;
  border-bottom: 1px solid var(--borderBottmBgNavbar);
  transition: var(--trasition);
}

/* navbar scrolled */
.navbar.scrolled {
  background-color: var(--bgScrollNavbar);
  padding: 1rem 5%;
}
/* logo */
.logo {
  font-size: 2.2rem;
  font-weight: 700;
  background: var(--colorLogo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  padding-right: 2.5rem;
}

/* list navber */
.nav_links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
/* link list navbar */
.nav_links a {
  font-size: 18px;
  color: var(--textColor);
  font-weight: 500;
  transition: var(--trasition);
  position: relative;
}
/* after hover links */
.nav_links a::after {
  content: " ";
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 0;
  height: 1px;
  background-color: var(--bgUnderlineLinks);
  transition: var(--trasition);
}
/* hover links */
.nav_links a:hover::after {
  width: 100%;
}

/* mobile menu navbar */
.mobile_menu {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--iconMobileMenuNavbar);
  z-index: 1001;
  padding: 0 2rem;
}

/* ================ content introduction project ================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 12% 5%;
  position: relative;
  overflow: hidden;
}
/* content introduction */
.hero-content {
  flex: 1;
  padding-left: 5rem;
  z-index: 2;
}
/* image introduction */
.hero-image {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* profile image  */
.profile-img img {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid purple;
  box-shadow: 0 0 50px purple;
  animation: float 3s ease-in-out infinite;
  filter: grayscale(0.2) contrast(1.1);
}
/* animation profile image */
@keyframes float {
  0% , 100% {
    transform: translateY(0);
  }
  
  50% {
    transform: translateY(-20px);
  }
}

/* content text introduction */
.hero h1 {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(to left, #92487A 20%,#ffffff 82%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* paragraph text introduction */
.hero p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  max-width: 600px;
}

.highLight {
  color: #fadb42f2;
  font-weight: 600;
}
/* btn introduction */
.cta-button {
  display: inline-block;
  width: 15rem;
  text-align: center;
  padding: 1rem 2rem;
  background: var(--bgCtaBtn);
  color: black;
  border-radius: 10px 40px;
  transition: var(--trasition);
  position: relative;
  overflow: hidden;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-size: 1.7rem;
  margin-top: 20px;
}
/* hover button */
.cta-button:hover {
  transform: translateY(-10px);
  box-shadow: 0 0px 30px rgb(232, 228, 0);
}
/* ================ section aboat ================ */
.about {
  padding: 5rem 0 5%;
  background-color: var(--bgBackground);
}
/* section tittle */
.section-tittle {
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 2rem;
  position: relative;
}
/* after section tittle */
.section-tittle::after {
  content: " ";
  position: absolute;
  bottom: -10px;
  right: 50%;
  transform: translateX(50%);
  width: 80px;
  height: 3px;
  background-color: var(--colorBorderBottmTittleAbout);
}

/* span section tittle */
.section-tittle span {
  color: var(--colorTextSpanAbout);
}
/* contents about  */
.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  padding: 2rem 5%;
}
/* about texts */
.about-text {
  font-size: 1.7rem;
  line-height: 1.8;
}
/* about stats */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2rem;
  margin-top: 2rem;
}
/* stats */
.stat {
  text-align: center;
  padding: 1.5rem;
  background-color: #92487b2f;
  border-radius: 5px 30px;
  transition: var(--trasition);
}
/* hover states */
.stat:hover {
  transform: translateY(-5px);
  background-color: #8305e372;
  box-shadow: 0 0 20px rgb(6, 0, 10);
}
/* stat number */
.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  display: block;
  color: var(--colorTxtStatNumber);
}
/* stat text */
.stat-text {
  font-size: 1rem;
  opacity: 0.9;
}
/* container about image  */
.about-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* about image  */
.about-image img {
  width: 60%;
  height: auto;
  box-shadow: 0 10px 25px black;
  border-radius: 20px;
  transition: var(--trasition);
  align-items: center;
}

/* hover about image  */
.about-image:hover img {
  transform: scale(1.05);
}
/* ================ section skills ================ */
.skills {
  padding: 5rem 5%;
}

.skillsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 2rem;
  margin-top: 4rem;
}
/* card skills */
.skillsCard {
  padding: 2rem;
  border-radius: 15px;
  background-color: var(--bgSkillsCard);
  transition: var(--trasition);
  border: 1.5px solid rgba(255, 255, 255, 0.278);
  backdrop-filter: blur(6px);
  text-align: center;
  transition: var(--trasition);
}
/* hover card */
.skillsCard:hover {
  transform: translateY(-10px);
  border-color: var(--borderHoverSkillCard);
  box-shadow: 0 0px 10px rgba(17, 1, 17, 0.371);
}
/* icon skills */
.skillsCard i {
  font-size: 2.5rem;
  color: var(--iconSkillsCard);
  margin-bottom: 1rem;
}
/* head text */
.skillsCard h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
/* ================ section my projects ================ */
.projects {
  padding: 5rem 5%;
  background-color: var(--bgBackground);
}

.projectGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 2rem;
  margin-top: 3rem;
}
/* card projects */
.projectCard {
  background-color: var(--bgProjectCards);
  border-radius: 15px;
  overflow: hidden;
  transition: var(--trasition);
  border: 1px solid var(--borderProjectCarts);
}
/* hover card project */
.projectCard:hover {
  transform: translateY(-10px);
  border-color: var(--borderHoverSkillCard);
  box-shadow: 0 0 35px black;
}
/* image project */
.projectImage {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}

.projectImage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--trasition);
}
/* hover card and image */
.projectCard:hover .projectImage img {
  transform: scale(1.1);
}
/* content text project */
.projectContent {
  padding: 1.5rem;
}
/* parageraph content */
.projectContent p {
  font-size: 1.3rem;
}
/* tittle content project */
.projectTittle {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: var(--colorTxtTittleProject);
}
/* links project */
.project-Links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
/* link  */
.projectLink {
  padding: 0.5rem 1.7rem;
  background-color: var(--bgLinkProject);
  border-radius: 3px;
  text-decoration: none;
  color: white;
  transition: var(--trasition);
  font-size: 1.3rem;
}
/* hover links */
.projectLink:hover {
  background-color: #e3a8057d;
  color: white;
}
/* ================ section contacts ================ */
.contact {
  padding: 5rem 5%;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 3rem;
}
/* content info */
.contactInfo {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* item contents */
.contactItem {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 5px;
  padding: 1.5rem;
  background-color: var(--bgContactItem);
  transition: var(--trasition);
}

/* hover item content */
.contactItem:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 14px 2px rgb(0, 0, 0);
}
/* icon item content */
.contactItem i {
  font-size: 2rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.153);
  justify-content: center;
  color: var(--colorIconContact);
  transition: var(--trasition);
}
/* icon hover item content */
.contactItem:hover i {
  background-color: var(--bgIconHoverContacts);
  color: black;
  backdrop-filter: blur(10px);
  transform: scale(1.1);
}

/* head 3 content item */
.contactItem div h3 {
  font-size: 1.4rem;
  color: var(--colorTxtTittleContact);
}

/* paragraph content item */
.contactItem div p {
  font-size: 1.2rem;
  color: var(--textColor);
}
/* contents form */
.contactForm {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
/* forms */
.formGroup {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* labal inputs */
.formGroup label {
  font-weight: 800;
  font-size: 1.3rem;
}
/* form inputs */
.formControl {
  padding: 1rem;
  background-color: var(--bgFormCotrol);
  border: 1px solid rgba(255, 239, 239, 0.239);
  border-radius: 8px;
  color: var(--textColor);
  transition: var(--trasition);
  font-size: 1.4rem;
  font-weight: 600;
}
/* input forms */
.formControl:focus {
  outline: none;
  color: var(--colorBlackTxt);
  background: rgb(230, 193, 255);
  border-color: rgb(0, 0, 0);
  box-shadow: 0 0 10px green;
}
/* textarea */
textarea.formControl {
  resize: vertical;
  min-height: 150px;
}
/* ================ section footer ================ */
footer {
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* section paragraph and links */
footer p , .social-links {
  position: relative;
  top: 49px;
}
/* paragraph footer */
footer p {
  font-size: 1rem;
}

/* social links */
.social-links {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 0.5rem;
}

/* social links tag link*/
.social-links a {
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(83, 29, 83, 0.7);
  backdrop-filter: blur(2px);
}
/* hover social links */
.social-links a:hover {
  color: rgb(214, 79, 255);
  transform: translateY(-5px);
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 20px yellow;
}


/* ================ responsive elements for all devices ================ */

/* low az 992px */
@media (max-width:992px) {
  /* section introduction */
  .hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 13rem 5% 3rem;
    background: radial-gradient(circle at 49% 69% , #531D53 , 0% , transparent 30%);
  }
  /* profile */
  .profile-img img {
    width: 200px;
    height: 200px;
  }
  /* content introduction */
  .hero-content {
    padding-left: 0;
    margin-bottom: 2rem;
  }
  /* image */
  .hero-image {
    margin-bottom: 2rem;
  }
  /* tittle */
  .hero h1 {
    font-size: 2.2rem;
    line-height: 1.3;
  }
  /* paragraph */
  .hero p {
    font-size: 1.1rem;
  }
  /* section about me */
  .about-content {
    grid-template-columns: 1fr;
  }
  
  .about-image {
    margin: 0 auto;
  }
  
  .about-image img {
    width: 200px;
    height: 200px;
  }
}

/* low az 760px */
@media (max-width:768px) {
  /* link navbar */
  .nav_links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: #360b61;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--trasition);
    z-index: 999;
    border-right: 40px solid rgb(156, 3, 251);
  }
  /* when link navbar actived */
  .nav_links.active {
    right: 0;
  }
  /* lists navbar link */
  .nav_links li {
    margin: 2.5rem 0;
  }
  /* menu links in size mobile  */
  .mobile_menu {
    display: block;
  }
  /* when menu in size mobile actived */
  .mobile_menu.active i::before {
    content: "\eb99";
  }
  /* content about and contact */
  .about-content , .contact-content {
    grid-template-columns: 1fr;
  }
  /* logo */
  .logo {
    font-size: 1.5rem;
    padding-right: 2rem;
  }
  /* tittle sections */
  .section-tittle {
    font-size: 2rem;
  }
  /* stat about */
  .about-stats {
    grid-template-columns: 1fr;
  }
}

/* ================ root color projects ================ */
:root {
  /* colors */
  --bgBackground: #2a013b;
  --bgNavbar: #5b325618;
  --bgScrollNavbar: #493D9E;
  --bgUnderlineLinks: #FFC400;
  --bgProjectCards: #92487b56;
  --bgCtaBtn: linear-gradient(to right, #efd402 0%,#f0b400 82%);
  --bgSkillsCard: #6d026f54;
  --bgLinkProject: #687fe584;
  --bgContactItem: #561f55f1;
  --borderHoverSkillCard: #ffee00;
  --borderBottmBgNavbar: #ffffff29;
  --bgFormCotrol: #531d53;
  --bgIconHoverContacts: #7e94ff;
  --borderProjectCarts: #f5cbe888;
  --iconMobileMenuNavbar: #F5F5F0;
  --iconSkillsCard: #ffee00;
  --textColor: #faf8fb;
  --colorIconContact: rgb(255, 255, 255);
  --colorBlackTxt: #000000;
  --colorTxtTittleContact: rgb(255, 255, 198);
  --colorTxtTittleProject: #ffee00;
  --colorLogo: linear-gradient(90deg, #cf96fd 0%, #d9e7ff 100%);
  --colorBorderBottmTittleAbout: #e3a805;
  --colorTextSpanAbout: #ffee00;
  --colorTxtStatNumber: hsl(60, 100%, 50%);
  /* tramsitions */
  --trasition: all 0.8s ease-in-out;
}