/* static/css/style.css */

/* =================================== */
/* ===     Modern Color Scheme      === */
/* =================================== */
:root {
  /* مدرن و راحت برای چشم - برای کاربران آزمون */
  --primary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --secondary-gradient: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #0891b2 100%);
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
  --glass-bg: rgba(15, 23, 42, 0.12);
  --glass-border: rgba(148, 163, 184, 0.15);
  --shadow-light: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --border-radius: 16px;
  --transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --bg-main: #f8fafc;
}

* {
  transition: var(--transition);
}

body {
  font-family: 'Vazirmatn', sans-serif;
  /* پس‌زمینه آرامش‌بخش برای کاربران آزمون */
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%, #f8fafc 100%);
  background-size: 300% 300%;
  animation: gentleShift 30s ease infinite;
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  position: relative;
}

@keyframes gentleShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Glass morphism navbar - کاهش شدت رنگ */
.navbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.1);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.6rem;
  background: var(--secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.nav-link {
  color: var(--text-primary) !important;
  font-weight: 500;
  padding: 0.75rem 1rem !important;
  border-radius: 12px;
  margin: 0 0.25rem;
  position: relative;
  overflow: hidden;
  background: rgba(148, 163, 184, 0.05);
}

.nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.1), transparent);
  transition: left 0.5s;
}

.nav-link:hover::before {
  left: 100%;
}

.nav-link:hover {
  background: rgba(6, 182, 212, 0.08);
  color: var(--text-primary) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.15);
}

.btn {
  border-radius: var(--border-radius);
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: none;
  letter-spacing: 0.025em;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
  z-index: -1;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary { 
  background: var(--secondary-gradient); 
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25); 
  color: white; 
}
.btn-primary:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35); 
  color: white; 
}
.btn-success { 
  background: var(--success-gradient); 
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25); 
  color: white; 
}
.btn-success:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35); 
  color: white; 
}
.btn-warning { 
  background: var(--warning-gradient); 
  color: white; 
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); 
}
.btn-warning:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35); 
  color: white; 
}
.btn-danger { 
  background: var(--danger-gradient); 
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25); 
  color: white; 
}
.btn-danger:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35); 
  color: white; 
}

/* Glass morphism cards - نرمتر و راحت‌تر برای چشم */
.card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  transition: var(--transition);
  overflow: hidden;
  position: relative;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--secondary-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-hover);
  border-color: rgba(6, 182, 212, 0.2);
  background: rgba(255, 255, 255, 0.9);
}

.card:hover::before { transform: scaleX(1); }
.card-header { 
  background: rgba(248, 250, 252, 0.8); 
  border-bottom: 1px solid rgba(148, 163, 184, 0.1); 
  backdrop-filter: blur(10px); 
  font-weight: 600; 
  color: var(--text-primary); 
}
.card-body { 
  position: relative; 
  color: var(--text-primary); 
}

/* Alert improvements - رنگ‌های آرام */
.alert { 
  border-radius: var(--border-radius); 
  border: 1px solid; 
  backdrop-filter: blur(10px); 
  -webkit-backdrop-filter: blur(10px); 
  box-shadow: var(--shadow-light); 
  font-weight: 500; 
}
.alert-success { 
  background: rgba(16, 185, 129, 0.08); 
  border-color: rgba(16, 185, 129, 0.2); 
  color: #065f46; 
}
.alert-info { 
  background: rgba(6, 182, 212, 0.08); 
  border-color: rgba(6, 182, 212, 0.2); 
  color: #164e63; 
}
.alert-warning { 
  background: rgba(245, 158, 11, 0.08); 
  border-color: rgba(245, 158, 11, 0.2); 
  color: #92400e; 
}
.alert-danger { 
  background: rgba(239, 68, 68, 0.08); 
  border-color: rgba(239, 68, 68, 0.2); 
  color: #991b1b; 
}

/* Form improvements - کنتراست مناسب برای خواندن */
.form-control, .form-select { 
  background: rgba(255, 255, 255, 0.9); 
  border: 1px solid rgba(148, 163, 184, 0.2); 
  border-radius: 12px; 
  color: var(--text-primary); 
  padding: 0.75rem 1rem; 
  backdrop-filter: blur(10px); 
  font-weight: 400; 
}
.form-control:focus, .form-select:focus { 
  background: rgba(255, 255, 255, 1); 
  border-color: rgba(6, 182, 212, 0.5); 
  box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.1); 
  color: var(--text-primary); 
}
.form-control::placeholder { 
  color: var(--text-secondary); 
  font-weight: 400; 
}

/* Badge improvements */
.badge { 
  border-radius: 8px; 
  padding: 0.5rem 1rem; 
  font-weight: 600; 
  font-size: 0.8rem; 
}
.badge.bg-primary { 
  background: var(--secondary-gradient) !important; 
  color: white; 
}
.badge.bg-success { 
  background: var(--success-gradient) !important; 
  color: white; 
}

/* List group improvements */
.list-group-item { 
  background: rgba(255, 255, 255, 0.8); 
  border: 1px solid rgba(148, 163, 184, 0.1); 
  color: var(--text-primary); 
  backdrop-filter: blur(10px); 
  border-radius: 8px !important; 
  margin-bottom: 0.5rem; 
  font-weight: 400; 
}
.list-group-item:hover { 
  background: rgba(255, 255, 255, 1); 
  transform: translateX(-4px); 
  border-color: rgba(6, 182, 212, 0.2); 
}

/* Container & Footer improvements */
.main-container { min-height: 85vh; position: relative; z-index: 1; }
.footer { 
  background: rgba(255, 255, 255, 0.8); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  border-top: 1px solid rgba(148, 163, 184, 0.1); 
  margin-top: 4rem; 
}
.footer a { 
  background: var(--secondary-gradient); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  text-decoration: none; 
  font-weight: 600; 
}
.footer a:hover { filter: brightness(1.1); }

/* Dropdown improvements */
.dropdown-menu { 
  background: rgba(255, 255, 255, 0.95); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  border: 1px solid rgba(148, 163, 184, 0.1); 
  border-radius: var(--border-radius); 
  box-shadow: var(--shadow-hover); 
}
.dropdown-item { 
  color: var(--text-primary); 
  border-radius: 8px; 
  margin: 0.25rem; 
  padding: 0.6rem 1rem; 
  font-weight: 500; 
}
.dropdown-item:hover { 
  background: rgba(6, 182, 212, 0.08); 
  color: var(--text-primary); 
}

/* Modal z-index fix */
.modal-backdrop { z-index: 1040 !important; }
.modal { z-index: 1050 !important; }

/* =================================== */
/* ===    Styles from login.html     === */
/* =================================== */
.login-container { 
  min-height: 80vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.login-card { 
  background: rgba(255, 255, 255, 0.8); 
  backdrop-filter: blur(20px); 
  -webkit-backdrop-filter: blur(20px); 
  border: 1px solid rgba(148, 163, 184, 0.1); 
  border-radius: 20px; 
  box-shadow: var(--shadow-hover); 
  overflow: hidden; 
  max-width: 900px; 
  width: 100%; 
}
.login-hero { 
  background: var(--secondary-gradient); 
  position: relative; 
  overflow: hidden; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 500px; 
}
.login-hero::before { 
  content: ''; 
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%; 
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 4px); 
  animation: float 20s linear infinite; 
}
.login-hero-content { 
  position: relative; 
  z-index: 1; 
  text-align: center; 
  color: white; 
  padding: 2rem; 
}
.login-hero i { 
  font-size: 4rem; 
  margin-bottom: 1.5rem; 
  animation: gentlePulse 3s infinite; 
}
.login-form-section { 
  background: rgba(248, 250, 252, 0.9); 
  backdrop-filter: blur(10px); 
  padding: 3rem 2rem; 
}
.form-floating { 
  position: relative; 
  margin-bottom: 1.5rem; 
}
.form-floating .form-control { 
  height: 56px; 
  padding: 1.5rem 1rem 0.5rem; 
  background: rgba(255, 255, 255, 0.9); 
  border: 1px solid rgba(148, 163, 184, 0.2); 
  border-radius: 12px; 
  color: var(--text-primary); 
  font-size: 1rem; 
}
.form-floating .form-control:focus { 
  background: rgba(255, 255, 255, 1); 
  border-color: rgba(6, 182, 212, 0.5); 
  box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.1); 
  color: var(--text-primary); 
}
.form-floating .form-control::placeholder { 
  color: transparent; 
}
.form-floating label { 
  position: absolute; 
  top: 0; 
  left: 1rem; 
  height: 100%; 
  padding: 1.5rem 0; 
  pointer-events: none; 
  border: none; 
  transform-origin: 0 0; 
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out; 
  color: var(--text-secondary); 
  font-weight: 400; 
}
.form-floating .form-control:focus ~ label, 
.form-floating .form-control:not(:placeholder-shown) ~ label { 
  opacity: 0.75; 
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem); 
  color: #0891b2; 
}
.login-btn { 
  width: 100%; 
  height: 50px; 
  border-radius: 12px; 
  font-weight: 600; 
  font-size: 1rem; 
  background: var(--secondary-gradient); 
  border: none; 
  color: white; 
  transition: all 0.3s ease; 
  position: relative; 
  overflow: hidden; 
}
.login-btn::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: -100%; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); 
  transition: left 0.5s; 
}
.login-btn:hover::before { left: 100%; }
.login-btn:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3); 
}
.social-divider { 
  position: relative; 
  text-align: center; 
  margin: 2rem 0; 
}
.social-divider::before { 
  content: ''; 
  position: absolute; 
  top: 50%; 
  left: 0; 
  right: 0; 
  height: 1px; 
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3), transparent); 
}
.social-divider span { 
  background: rgba(248, 250, 252, 0.9); 
  padding: 0.5rem 1rem; 
  border-radius: 16px; 
  font-size: 0.85rem; 
  color: var(--text-secondary); 
}
.register-link { 
  text-align: center; 
  margin-top: 2rem; 
  padding-top: 2rem; 
  border-top: 1px solid rgba(148, 163, 184, 0.1); 
}
.register-link a { 
  color: #0891b2; 
  text-decoration: none; 
  font-weight: 600; 
  transition: all 0.3s ease; 
}
.register-link a:hover { 
  color: #0e7490; 
  text-shadow: 0 0 8px rgba(8, 145, 178, 0.3); 
}
.floating-elements { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  pointer-events: none; 
}
.floating-element { 
  position: absolute; 
  color: rgba(255, 255, 255, 0.1); 
  animation: gentleFloat 10s ease-in-out infinite; 
}
.floating-element:nth-child(1) { 
  top: 20%; 
  left: 10%; 
  font-size: 1.2rem; 
  animation-delay: 0s; 
}
.floating-element:nth-child(2) { 
  top: 60%; 
  right: 15%; 
  font-size: 1.5rem; 
  animation-delay: 3s; 
}
.floating-element:nth-child(3) { 
  bottom: 20%; 
  left: 20%; 
  font-size: 1rem; 
  animation-delay: 6s; 
}
@media (max-width: 768px) { 
  .login-hero { min-height: 300px; } 
  .login-form-section { padding: 2rem 1.5rem; } 
  .login-hero i { font-size: 3rem; } 
  .login-hero h2 { font-size: 1.5rem; } 
}

/* =================================== */
/* ===    Styles from index.html     === */
/* =================================== */
.hero-section { 
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(248, 250, 252, 0.8) 100%); 
  border-radius: 20px; 
  position: relative; 
  overflow: hidden; 
  margin-bottom: 4rem; 
  border: 1px solid rgba(148, 163, 184, 0.1);
}
.hero-section::before { 
  content: ''; 
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%; 
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(6, 182, 212, 0.02) 2px, rgba(6, 182, 212, 0.02) 4px); 
  animation: gentleFloat 25s linear infinite; 
}
.hero-image { 
  border-radius: 16px; 
  box-shadow: var(--shadow-light); 
  transition: all 0.4s ease; 
}
.hero-image:hover { 
  transform: translateY(-4px) scale(1.02); 
  box-shadow: var(--shadow-hover); 
}
.hero-title { 
  background: linear-gradient(135deg, #0f172a 0%, #0891b2 100%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  line-height: 1.2; 
}
.feature-card { 
  position: relative; 
  overflow: hidden; 
}
.feature-card::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 3px; 
  background: var(--secondary-gradient); 
  transform: scaleX(0); 
  transition: transform 0.3s ease; 
}
.feature-card:hover::before { transform: scaleX(1); }
.feature-icon { 
  width: 70px; 
  height: 70px; 
  border-radius: 16px; 
  background: var(--secondary-gradient); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto 1.5rem; 
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.2); 
  transition: all 0.3s ease; 
}
.feature-icon:hover { 
  transform: translateY(-3px) rotate(3deg); 
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.3); 
}
.feature-icon i { 
  color: white; 
  font-size: 1.5rem; 
  animation: none; 
}
.subject-card { 
  height: 100%; 
  position: relative; 
  overflow: hidden; 
}
.subject-card::after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: -100%; 
  width: 100%; 
  height: 100%; 
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.05), transparent); 
  transition: left 0.6s; 
}
.subject-card:hover::after { left: 100%; }
.subject-icon { 
  width: 50px; 
  height: 50px; 
  border-radius: 12px; 
  background: var(--success-gradient); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.2); 
}
.subject-icon i { 
  color: white; 
  font-size: 1.2rem; 
  animation: none; 
}
.stats-section { 
  background: rgba(255, 255, 255, 0.6); 
  border-radius: 16px; 
  backdrop-filter: blur(10px); 
  border: 1px solid rgba(148, 163, 184, 0.1); 
  margin: 4rem 0; 
}
.stat-item { 
  text-align: center; 
  padding: 2rem 1rem; 
}
.stat-number { 
  font-size: 2.5rem; 
  font-weight: 800; 
  background: var(--secondary-gradient); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text; 
  line-height: 1; 
}
.stat-label { 
  color: var(--text-secondary); 
  font-weight: 500; 
  margin-top: 0.5rem; 
}
.cta-section { 
  background: var(--secondary-gradient); 
  border-radius: 20px; 
  color: white; 
  text-align: center; 
  padding: 3rem 2rem; 
  margin: 4rem 0; 
  position: relative; 
  overflow: hidden; 
}
.cta-section::before { 
  content: ''; 
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%; 
  background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 4px); 
  animation: gentleFloat 20s linear infinite reverse; 
}
.cta-content { 
  position: relative; 
  z-index: 1; 
}
.floating-shapes { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
  z-index: 0; 
}
.shape { 
  position: absolute; 
  opacity: 0.05; 
  animation: gentleFloat 8s ease-in-out infinite; 
}
.shape:nth-child(1) { 
  top: 10%; 
  left: 10%; 
  animation-delay: 0s; 
}
.shape:nth-child(2) { 
  top: 20%; 
  right: 10%; 
  animation-delay: 2s; 
}
.shape:nth-child(3) { 
  bottom: 10%; 
  left: 20%; 
  animation-delay: 4s; 
}
@media (max-width: 768px) { 
  .hero-section { margin-bottom: 2rem; } 
  .stat-number { font-size: 2rem; } 
  .cta-section { padding: 2rem 1rem; } 
}

/* =================================== */
/* ===  Styles from dashboard.html   === */
/* =================================== */
.card:hover { transform: translateY(-3px) scale(1.01); }
.rounded-circle { transition: all 0.3s ease; }
.card:hover .rounded-circle { transform: scale(1.05) rotate(3deg); }
.table tbody tr { transition: all 0.3s ease; }
.table tbody tr:hover { 
  background: rgba(6, 182, 212, 0.05) !important; 
  transform: translateX(-3px); 
}

/* انیمیشن آرام برای آیکون‌ها */
@keyframes gentleBounce { 
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
  40% { transform: translateY(-3px); } 
  60% { transform: translateY(-1px); } 
}
.bi-emoji-smile { animation: gentleBounce 3s infinite; }

/* پولس نرم برای کارت ارتقاء */
@keyframes gentlePulse-glow { 
  0%, 100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.2); } 
  50% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.4), 0 0 25px rgba(6, 182, 212, 0.3); } 
}
.card:has(.bi-gem) { animation: gentlePulse-glow 4s ease-in-out infinite; }

/* =============================== */
/* ==== Modal layering fix ==== */
.modal-backdrop { z-index: 1050 !important; }
.modal { z-index: 1060 !important; }
*[style*="z-index"] { z-index: auto !important; }

/* =================================== */
/* ===     Floating Back Button    === */
/* =================================== */
.back-to-top {
  position: fixed;
  visibility: visible;
  opacity: 1;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--secondary-gradient);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.back-to-top i {
  font-size: 20px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: var(--primary-gradient);
  color: #fff;
  transform: scale(1.05);
}

/* انیمیشن‌های نرم برای آرامش بصری */
@keyframes gentleFloat {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes gentlePulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}