body 
	 {
	  position: relative;
      font-family: Vazirmatn, sans-serif;
      background: #faf3f2;
      margin: 0;
      padding: 0;
      direction: rtl;
      height: 100vh;
	  
    }
	
	.bg-primary{
	 background-image : url('images/bg.jpg');
	 max-width: 100%; 
	 justify-content:center;
	 background-size: 100% 100%;
	 height: 150px;
		
	}

    .title 
	{
	  font-family: b titr;
	  font-size : 3rem;
      text-align: center;
      margin-bottom: 40px;
     	
    }

   
    .prof-wrapper {
      position: relative;
      width: 160px;
      margin: auto;
      text-align: center;
      cursor: default; /* کلیک فقط روی کارت اطلاعات */
    }

    .prof-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transition: transform 0.3s ease-in-out, border-radius 0.3s ease-in-out;
      position: relative;
      z-index: 2;
    }

    .prof-wrapper:hover .prof-avatar {
      border-radius: 12px;
      transform: scale(1.1);
      z-index: 5;
    }

    .prof-name 
	{
	  font-family : b titr;
      font-size: 1.1rem;
      font-weight: bold;
      color: #222;
      margin-top: 10px;
      user-select: none;
      cursor: default;
    }

    .prof-field 
	{
	  font-family : b nazanin;
	  font-weight : bold;
      font-size: 0.9rem;
      color: #666;
      margin-top: 4px;
      user-select: none;
      cursor: default;
    }

    .prof-edu 
	{
	  font-family : b koodak;
      font-size: 0.85rem;
      color: #888;
      margin-top: 2px;
      user-select: none;
      cursor: default;
    }

    .prof-card {
  position: absolute;
  top: 50%; /* حالا روی وسط عکس */
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9); /* وسط دقیق و کمی بالاتر */
  width: 220px;
  padding: 20px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
  z-index: 20; /* بالا برای روی عکس */
  cursor: pointer;
  user-select: none;
}

.prof-wrapper:hover .prof-card {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.prof-card:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transform: translate(-50%, -50%) scale(1.05);
}

    .extra-info {
      font-size: 0.85rem;
      color: #444;
      text-align: center;
      margin-top: 10px;
      user-select: none;
    }

    /* رنگ‌ها و گرادیانت‌ها */
    .bg-color1 { background: #fef6e4; }
    .bg-color2 { background: #f3e5f5; }
    .bg-color3 { background: #e0f7fa; }
    .bg-grad1 { background: linear-gradient(135deg, #d9afd9 0%, #97d9e1 100%); }
    .bg-grad2 { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
    .bg-grad3 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
    .bg-anim1 {
      animation: bgPulse 6s infinite ease-in-out;
    }

    @keyframes bgPulse {
      0%   { background-color: #e0f7fa; }
      50%  { background-color: #ffe0f0; }
      100% { background-color: #e0f7fa; }
    }
	
	 
    .cv-container {
      max-width: 900px;
      margin: 40px auto;
      background: white;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
    }
    .cv-sidebar {
      width: 35%;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
      color: white;
      text-align: center;
      padding: 30px 20px;
    }
    .cv-sidebar img {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 4px solid white;
      object-fit: cover;
      margin-bottom: 15px;
    }
    .cv-name 
	{
	  font-family : b titr;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 5px;
    }
    .cv-position 
	{
	  font-family : b nazanin;
	  font-weight : bold;
      font-size: 1rem;
      opacity: 0.9;
    }
    .cv-main {
      width: 65%;
      padding: 30px;
    }
    .section 
	{
	  font-family : b titr;
      margin-bottom: 1px;
    }
	.sectiontext 
	{
	  font-family : b nazanin;
      margin-bottom: 30px;
    }
    .section h3 {
      font-size: 1.2rem;
      margin-bottom: 15px;
      border-bottom: 2px solid #1e3c72;
      display: inline-block;
      padding-bottom: 5px;
    }
    .section p, .section li {
      font-size: 0.95rem;
      line-height: 1.8;
      margin: 0 0 10px;
    }
    ul {
      padding-right: 20px;
    }
    .contact-box-Process 
	{
	  font-family : b nazanin;
      text-align: right;
      margin-top: 20px;
    }
    .contact-box-Process p {
      margin-bottom: 8px;
	  font-family : b titr;
	  
    }
    .section:last-child {
      margin-bottom: 0;
    }
    @media (max-width: 768px) {
      .cv-container {
        flex-direction: column;
      }
      .cv-sidebar, .cv-main {
        width: 100%;
      }
    }
	.footer 
	{
	  width : 100%;
	  background: linear-gradient(135deg, #1e3c72, #000000);
	  font-family : b nazanin;
	  font-weight : bold;
      text-align: center;
      margin-top: 10px;
      color: #888;
      font-size: 0.9rem;
	  color: slyblue;
    }
  
    .Top_Right_Corner 
	{
      position: absolute;
	  font-family : b Koodak;
	  font-size : 1.1rem;
      top: 0;
      right: 0;
      width: 65%;
      height: 16%;
      background-color: #0e3a5f;
      color: white;
      padding: 2.4%;
      -webkit-clip-path: url(#smooth-clip);
              clip-path: url(#smooth-clip);
      animation: slideIn 1s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
    }
	.Top_Right_Corner p 
	{
	  font-family : b Elham;
	  font-size : 1.6rem;
	  margin: 0;              /* حذف فاصله پیش‌فرض */
	  line-height: 1.2;       /* تنظیم فاصله بین خطوط */
	}
	.Top_Right_Corner h2 {
	  font-family : b Jadid;
	  font-size : 1.9rem;
	  margin: 0;              /* حذف فاصله پیش‌فرض */
	  line-height: 1.2;       /* تنظیم فاصله بین خطوط */
	  margin-bottom: 4px;     /* کمی فاصله بین h2 و p */
	}
	/*-------------------------*/
	
    .TopFrame 
	{
      position: absolute;
	  font-family : b titr;
	  font-size : 1.1rem;
      top: 0;
      right: 0;
      width: 74%;
      height: 45%;
      background-color: #0e3a5f;
      color: white;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end; /* قرار دادن محتوا در پایین */
      padding: 30px;
      -webkit-clip-path: url(#soft-clip);
              clip-path: url(#soft-clip);
      animation: slideIn 1s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
    }
	.TopFrame h2, .TopFrame p 
	{
	  margin: 0;              /* حذف فاصله پیش‌فرض */
	  line-height: 1.2;       /* تنظیم فاصله بین خطوط */
	}
	.TopFrame h2 {
	  margin-bottom: 4px;     /* کمی فاصله بین h2 و p */
	}
	/*-------------------------*/

	.MainFrame 
	{
	  position: relative;
	  font-family : b titr;
	  font-size : 1.1rem;
      top: 45%;
      right: 0;
      width: 62.75%;
     
      background-color: #0e3a5f;
      color: white;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-top; /* قرار دادن محتوا در پایین */
	  align-items: flex-start;    /* چسبیده به سمت راست والد */
	  gap: 10px;                /* فاصله بین بیضی‌ها (اختیاری) */

     // padding: 30px;
      -webkit-clip-path: url(#MainFrame-clip);
              clip-path: url(#MainFrame-clip);
      animation: slideIn 1s ease-out forwards;
      opacity: 0;
      transform: translateY(30px);
    }
	.MainFrame h2, .MainFrame p 
	{
	  margin: 0;              /* حذف فاصله پیش‌فرض */
	  line-height: 1.2;       /* تنظیم فاصله بین خطوط */
	}
	.MainFrame h2 {
	  margin-bottom: 4px;     /* کمی فاصله بین h2 و p */
	}
	.MainFrame, .MainFrame * {
  box-sizing: border-box;
}
	/*-------------------------*/

    @keyframes slideIn {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
	
	.social-icons {
      display: flex;
      gap: 20px;
      justify-content: left;
	  align-items: center;
      margin-top: 20px;
	  flex-wrap: wrap;
	  padding-left: 27%;
	  font-size: 0.8rem;
	  color : #ffddcc;
    }

	
    .social-icons a,
    .social-icons span {
      font-size: 2rem;
      color: #ddd;
      transition: color 0.3s;
    }

    .social-icons a:hover {
      color: #0077b5;  /* رنگ هنگام هاور */
    }


    .social-icons .disabled-icon {
      font-size: 2rem;
      color: #444; /* تیره‌تر برای آیکون‌های غیرفعال */
      opacity: 0.5;
      cursor: not-allowed;
    }
	
	.icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.85rem;
      color: #666;
      text-align: center;
    }
		
    .icon-item a {
      color: #ffddcc; /* رنگ آیکون‌های فعال */
      font-size: 1.7rem;
      margin-bottom: 2px;
      transition: color 0.3s;
    }

    .icon-item a:hover {
      color: #20ff1c;
    }

    .icon-item.disabled i {
      font-size: 1.7rem;
      color: #c9c2ad;
      opacity: 0.5;
      margin-bottom: 0px;
    }
	.icon-item span {
	  font-size: 1.7rem;
	  margin-bottom: 2px;
	  color: #444;
	  opacity: 0.5;
	  cursor: not-allowed;
	}

	.flip-horizontal {
	  transform: scaleX(-1); /* معکوس افقی */
	  display: inline-block;
	}

    .icon-label {
      margin-top: 4px;
    }



/* لوزی چرخیده */
.diamond-profile {
  position: absolute;
  width: 13vw;
  height: 13vw;
  top: 22%;
  left: 19vw;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 16%; /* گرد کردن لبه‌ها */
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* قاب تصویر داخل لوزی */
.image-wrapper {
  position: absolute;

  width: 140%;
  height: 150%;
  transform: rotate(-45deg); /* عکس صاف دیده بشه */
  overflow: hidden;
  top: -30%; /* کمتر از 50% یعنی بالاتر */
  left: -3vw; /* کمتر از -7.5vw یعنی به راست نزدیک‌تر */

}

/* تصویر پروفایل */
.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.half-oval-right {
  width: 45%;
  height: 5%;
  background-color: #ffffff;
  color: #000;
  border-top-left-radius: 100% 25%;
  border-bottom-left-radius: 100% 50%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-left: auto; /* این باعث می‌شه بچسبه به سمت راست والد */
  display: block;
}



.rectangle {
	  position: relative; 
	  right: 0%;
	  width: 89.5%;        /* 40% از عرض صفحه */
	  height: 3%;        /* 2% از ارتفاع صفحه */
	  background-color: #ffeeff; /* رنگ دلخواه */
	  color : #0e3a5f;
	  font-size: 1.5rem;
	  text-align: right;     /* چینش افقی متن از راست */
	  vertical-align: center;   /* فقط برای بعضی ورژن‌ها */
}

.circle{ 
	left: -2.4%;	
	width: 5%; 
	height:100%;	
	position: absolute;
	background-color:#ffeeff; 
	border-radius:45%; 
}


.titles{ 
padding-right : 10%;

}

.textbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height : clamp(100px, 40vh, 250px);
  width : 90%;
  padding-top : 3%;
  padding-bottom : 8%;
}

.contact-box {
  
  padding: 20px;
  left : 2%;
  width: 95%;
  border-radius: 12px;
 /*
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
 */
  font-family:  b nazanin; /* یا فونت دلخواه فارسی */
  font-weight : bolder;
  direction: rtl;
  text-align: right;
  color: #0e3a5f;
}

.contact-box h2 {
  font-size: 1.8rem;
   font-family:  b titr;
  font-weight: bold;
  margin-bottom: 20px;
  color: #0e3a5f;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-item {
  font-size: 1rem;
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon {
  width: 20px;
  text-align: center;
  color: #ff5e5e;
}

.custom-textbox {
  width: 100%;
  height: 100%;
  margin-right: 5%;
  direction: rtl;
  background-color: #0e3a5f;
  color: #fff;
  resize: none;
  overflow: auto;
  padding-right: 3%;              /* فاصله‌ی داخلی مناسب */
  font-size: 1rem;
  line-height: 1.4;          /* برای خوانایی بهتر و تنظیم عمودی */
  border: none;
  outline: none; 
  text-align: right;
  outline: none;             /* حذف حاشیه هنگام فوکوس */
  font-family : b nazanin;
  
}

.skills-container {
  position: absolute;       /* موقعیت‌دهی فعال می‌شه */
  left: 0%;                 /* چسبیده به چپ */
  top: 50%;                /* از بالا 40 درصد ارتفاع صفحه */
  width: 34.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1%;
  padding: 2%x;
  color: white;
}
.skill-Title {
  width: 88.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: right;
  color: #0e3a5f;
  font-family: b titr;
  font-size : 2rem;
}
.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1%;
  color: #0e3a5f;
  font-family: sans-serif;
}

.skill-ring {
  --size: clamp(105px, 8vw, 120px);
  --value: 0;
  --color: #0e3a5f;

  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--value) * 1%), #bbb 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* دایره داخلی */
.inner-circle {
  width: 70%;  /* کنترل ضخامت حلقه */
  height: 70%;
  background-color: #faf3f2; /* هم‌رنگ پس‌زمینه */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0e3a5f;
  font-size: 1rem;
  font-family: sans-serif;
}

/* متن وسط دایره */
.label {
  text-align: center;
}

.skills-section {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  font-family: sans-serif;
  direction: rtl; /* اگر فارسی می‌خوای */
}

.skills-section h2 {
  width: 88.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: right;
  color: #0e3a5f;
  font-family: b titr;
  font-size : 1.5rem;
  margin-bottom: 20px;
}

.skill-bar {
  margin-bottom: 15px;
}

.skill-name {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.bar {
  background-color: #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  height: 9px;
}

.progress {
  --percent: calc(var(--level) * 10%);
  width: var(--percent);
  height: 100%;
  background-color: #0e3a5f;
  transition: width 0.5s ease-in-out;
}

	/*-------------------------*/
	
	.BottomFrame {
	  width: 64.5%;
	  height: 14%;
	  background-color: #0e3a5f;
	  display: flex;
	  flex-direction: column;
	  justify-content: flex-end;
	  padding: 1%;
	  clip-path: url(#bottom-clip);
	  animation: slideIn 1s ease-out forwards;
	  opacity: 0;
	  margin-top :15%;
	}

	.BottomFrame h2, .BottomFrame p 
	{
	  margin: 0;              /* حذف فاصله پیش‌فرض */
	  line-height: 1.2;       /* تنظیم فاصله بین خطوط */
	}
	.BottomFrame h2 {
	  margin-bottom: 4px;     /* کمی فاصله بین h2 و p */
	}
	/*-------------------------*/