/* ===== BUILT PAGE ===== */
:root {
  --card-width: 310px;
  --card-height: 500px;
  --card-gap: 20px;
  --text-float: 20px;
}

/* =========================
   Global Styles
========================= */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Playfair Display', serif;}
body {    background: linear-gradient(120deg, #e6ebef 0%, #ffffff 40%, #cfd6dc 60%, #e6ebef 100%); overflow-x:hidden; display:flex; flex-direction:column; align-items:center; padding:40px 20px; }

/* =========================
   Top Content
========================= */
.top-content { display:flex; flex-direction:column; align-items:center; }
.intro-text {
  font-size:35px;
  text-align:center;
  color:#222;
  animation: floatText 3s ease-in-out infinite alternate;
  margin-top: 50px;   /* ← متن پایین‌تر */
  margin-bottom:30px;
}
.dot-element img { width:200px; animation: rotateIcon 6s linear infinite; }

/* =========================
   Cards Container
========================= */
.cards-container {
  display: flex;
  gap: var(--card-gap);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 60px;
}

/* =========================
   Card Styles
========================= */
.card {
  width: var(--card-width);
  height: var(--card-height);
  border-radius:20px;
  padding:25px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition: transform 0.5s ease;
  font-weight:500;
  text-decoration:none;
}

.card img { width:70px; margin-bottom:15px; animation: iconPulse 2s ease-in-out infinite; }
.card h3 { font-size:20px; margin-bottom:10px; }
.card p { font-size:14px; line-height:1.5; }

/* Light & Dark */
.dark {
  background: rgba(50, 50, 50, 0.85);
  color: #fff;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.light {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Hover Effect */
.card.dark:hover {
  background: rgba(70, 70, 70, 0.9);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  color: #fff;
}

.card.light:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  color: #000;
}

/* افکت نرم و حرکت */
.card {
  transition: transform 0.5s ease, background 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
}

.card:hover { 
  transform: translateY(-10px) scale(1.05);
}
/* =========================
   Animations
========================= */
@keyframes rotateIcon { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
@keyframes floatText { 0% { transform: translateY(0px); } 100% { transform: translateY(calc(-1 * var(--text-float))); } }
@keyframes iconPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.1);} }

/* =========================
   Responsive
========================= */
@media (max-width:768px){
  .intro-text { font-size:22px; }
  .dot-element img { width:150px; }
  .cards-container { flex-direction:column; align-items:center; }
  .card { width:90%; height:auto; padding:20px; }
  .card img { width:50px; margin-bottom:10px; }
  .card h3 { font-size:18px; }
  .card p { font-size:14px; }
}



/* ===== RESUME PAGE ===== */
/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Playfair Display', serif; }
body {
  background: linear-gradient(120deg, #e6ebef 0%, #ffffff 40%, #cfd6dc 60%, #e6ebef 100%);
  color:#000000;
  line-height:1.6;
  transition: background 0.3s, color 0.3s;
}
a { color:#000000; text-decoration:none; transition: color 0.3s; }
a:hover { color:#000000; }
h1,h2,h3 { margin-bottom:0.5em; }

/* Container */
.container { max-width:1000px; margin:0 auto; padding:20px; }

/* Header */
header { text-align:center; margin-bottom:40px; }
header h1 { font-size:3em; color:#000000; font-weight:700; font-family: 'Playfair Display', serif; margin-bottom: 3px;}
header h2 { font-size:2em; color:#000000; font-weight:400;   margin-top: 0;   margin-bottom:15px; }
header .links a { margin:0 10px; position:relative; font-weight:500; }
header .links a::after { content:""; display:block; height:2px; background:#09cf3b; width:0; transition: width 0.3s; }
header .links a:hover::after { width:100%; }

/* Summary */
.summary { 
  text-align:center; 
  margin-bottom:40px; 
  font-size:1.05em; 
  
  padding:20px; 
  border-radius:10px; 
  box-shadow:0 4px 12px rgba(0,0,0,0.05); 
  border: 1px solid #000;  /* این خط اضافه شد */
}

/* Skills */
.skills { display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
.skill-block { flex:1 1 200px; margin:10px; padding:15px; border:1px solid #000000; border-radius:25px; text-align:center; ; transition:transform 0.3s, box-shadow 0.3s, background 0.3s; }


/* Projects */
.projects { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-bottom:40px; }
.project-card { border:5px solid #000000; border-radius:30px; padding:20px; ; transition: transform 0.3s, box-shadow 0.3s, background 0.3s; cursor:pointer; }
.project-card:hover { transform:translateY(-7px); box-shadow:0 8px 20px rgba(255, 255, 255, 0.15); background:#2e2d2d;color: #ffffff;; }
.project-card a { text-decoration:none; color:inherit; display:block; height:100%; }

/* Buttons */
.btn { display:inline-block; margin:20px auto; padding:12px 25px; border:5px solid #000000; border-radius:30px; font-weight:bold; cursor:pointer; text-align:center; transition:background 0.3s,color 0.3s,transform 0.2s; }
.btn:hover { background:#000000; color:#fff; transform:translateY(-2px); }

/* Footer */
footer { text-align:center; padding:20px 0; border-top:1px solid #000000; font-size:0.9em; color:#000000; }
.links {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.links a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid #000;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.links a:hover {
  background-color: #000;
  color: #fff;
}
/* Responsive */
@media(max-width:600px){
    header h1{font-size:2em;}
    .skill-block{flex:1 1 100%;}
}
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .container {
    width: 100%;
    padding: 0;
  }

  .projects, .skills, header {
    page-break-inside: avoid; /* جلوگیری از شکستن بخش‌ها */
  }

  .project-card, .skill-block {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .links, .work-pref, footer {
    page-break-inside: avoid;
  }

  img {
    max-width: 100%;
    height: auto;
  }
}
@media (max-width: 600px) {
  .links {
    flex-wrap: wrap;     /* اجازه می‌دهیم لینک‌ها به خط بعد بروند */
    justify-content: center;
    gap: 10px;
  }
  .links a {
    flex: 1 1 45%;       /* هر لینک تقریبا نصف عرض می‌گیرد */
    text-align: center;
  }
}

.project-card {
  display: block;
  position: relative;
  z-index: 1;
}

.project-card * {
  pointer-events: none;
}

.project-card {
  pointer-events: auto;
}
.btn {
  position: relative;
  z-index: 10;
  display: inline-block;
  pointer-events: auto;
}

.btn * {
  pointer-events: none;
}

/* ===== CONTACT PAGE ===== */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Playfair Display', serif; }

body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  background: linear-gradient(120deg, #e6ebef 0%, #ffffff 40%, #cfd6dc 60%, #e6ebef 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  position: relative;
  overflow-x: hidden; /* جلوگیری از اسکرول افقی */
  overflow-y: auto;   /* فقط اگر محتوا بلند بود، عمودی اسکرول داشته باشه */
}

/* خطوط هندسی سبک پشت صفحه */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(0,0,0,0.05), transparent 50%);
  z-index: 0;
}

form {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 50px; /* فاصله از بالای صفحه */
}

h1 {
  font-family: 'Aboreto', cursive;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
  color: #5c5b5b;
}

label {
  font-size: 14px;
  font-weight: 500;
  color: #000000;
}

.required::after {
  content: " *";
  color: red;
}

input, select {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(5px);
  transition: 0.2s;
}

input:focus, select:focus {
  outline: none;
  border-color: #333;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

button {
  padding: 14px;
  border: none;
  border-radius: 10px;
  
  color: #000000;
  font-size: 15px;
  cursor: pointer;
  transition: 0.2s;
   border: 1px solid #000;
}

button:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-1px);
}

/* ریسپانسیو */
@media (max-width: 768px) {
  form { max-width: 100%; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  input, select, button { font-size: 14px; padding: 10px; }
}