@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url('../fonts/webfonts/baloo-bhaijaan-2-arabic-500-normal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baloo Bhaijaan 2';
  src: url('../fonts/webfonts/baloo-bhaijaan-2-latin-500-normal.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::selection {
  background-color: #20478a;
  color: #dae0e2;
}

body {
  background-color: #dae0e261 !important;
  font-family: "Baloo Bhaijaan 2", tahoma, sans-serif;
  font-size: 8px;
  filter: none !important;
}

.main-container {
  display: flex;
}

.main-content {
  flex-grow: 1;
  padding: clamp(0.5rem, 0.031rem + 1.5vw, 1.25rem);
  width: 100%;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* بخش ماشین‌حساب و توضیحات */
.calculator, .description, .description2 {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0px 10px rgb(51 63 99 / 28%);
}

.calculator {
  padding: clamp(0.75rem, 0.438rem + 1vw, 1.25rem);
  margin-bottom: 20px;
  text-align: center;
  font-size: 19px;
  color: #20478a;
  width: 100%;
}

.description, .description2 {
  padding: 10px;
  text-align: right;
}

.description2 {
  margin-top: 20px;
}

/* آیتم‌های لیست ابزارها */
.calculator-item {
  width: clamp(6rem, 4.625rem + 6vw, 10.625rem);
  height: clamp(6rem, 4.625rem + 6vw, 10.625rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  box-shadow: 0 0px 10px rgb(51 63 99 / 28%);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  color: #0d1d35;
  margin-bottom: 10px;
  text-align: center;
}

.calculator-item:hover {
  background-color: #fff;
  box-shadow: 0 5px 20px #222e5247;
  transform: translateY(-5px);
}

.calculator-item a, .calculator-item span {
  text-decoration: none;
  font-size: clamp(10px, 0.525rem + 1vw, 18px);
  font-weight: 500;
  padding: clamp(0.75rem, 0.438rem + 1vw, 1.25rem);
  text-align: center;
  display: block;
}

.calculator-item a { color: #20478a; }
.calculator-item span { color: #20478a; }

.calculator-item:hover img {
  transform: scale(1.3) rotate(-5deg);
}

/* گرید و ستون‌ها */
.grid-container {
  display: grid;
  gap: 30px;
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.1rem,1fr));
  grid-template-rows: repeat(auto-fit , minmax(2rem, 1fr));
  gap: clamp(0.375rem, -1.391rem + 5.65vw, 3.2rem);
  justify-items: center;
}

.column {
  display: grid;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0px 10px rgb(51 63 99 / 28%);
  align-items: center;
}

/* تایپوگرافی */
.column h3, h1, h2 { color: #20478a; }

.column h3 {
  margin-bottom: 15px;
  font-size: clamp(1.25rem, 1.146rem + 0.463vw, 1.563rem);
  text-align: center;
}

h1 {
  margin-bottom: 15px;
  font-size: clamp(1.438rem, 1.243rem + 0.778vw, 1.875rem);
  text-align: center;
}

h2 { font-size: clamp(0.938rem, 0.799rem + 0.556vw, 1.25rem); }

p {
  font-size: clamp(0.875rem, 0.731rem + 0.638vw, 1.25rem);
  color: #20478a;
  direction: rtl;
}

/* استایل تصاویر (آیکون‌ها) */
img { transition: all 0.3s; }

#simplecalc { margin-top: clamp(1.25rem, 0.938rem + 1vw, 1.75rem); width: clamp(1.875rem, 0.982rem + 2.381vw, 3.125rem); height: auto; }
#average { width: clamp(1.5rem, 0.602rem + 2.875vw, 2.938rem); height: auto; margin-top: 16px; }
#scalc { width: clamp(2.5rem, 1.83rem + 1.786vw, 3.438rem); height: auto; margin-top: 25px; }
#convert { width: clamp(1.75rem, 0.891rem + 2.75vw, 3.125rem); height: auto; }
#percentage { width: clamp(1.563rem, 0.742rem + 2.625vw, 2.875rem); height: auto; }
#bmi { width: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); height: auto; }
#calories { width: clamp(1.563rem, 0.446rem + 2.976vw, 3.125rem); height: auto; margin-left: 5px; }
#crypto { margin-top: 25px; width: clamp(1.875rem, 0.625rem + 3.333vw, 3.438rem); height: auto; }
#qr { margin-top: 25px; width: clamp(1.563rem, 0.67rem + 2.381vw, 2.813rem); height: auto; }
#water, #breath { margin-top: 20px; width: clamp(1.875rem, 1.298rem + 2.308vw, 3.375rem); height: auto; }
#ip { margin-top: 20px; width: clamp(2.475rem, 1.298rem + 2.308vw, 4.375rem); height: auto; }

/* بخش بازی‌ها */
div.game {
  background-color: #112548;
  color: white;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(2,1fr);
  width: 100%;
  justify-content: center;
}

div.game a { color: white; border-radius: 10px; align-content: center; height: 45px; margin: 0 clamp(0.625rem, 0.505rem + 0.481vw, 0.938rem); }

div.game .game2 {
  grid-row: 1/2; grid-column: 1/5; margin-bottom: 15px; background-color: #20478a;
  font-weight: bold; height: 50px; font-size: 23px;
}

div.game .game3 { background-color: #770000; box-shadow: 0 0px 15px #770000; }
div.game .game4 { background-color: #00770a; box-shadow: 0 0px 15px #00770a; }
div.game .game5 { background-color: #550077; box-shadow: 0 0px 15px #550077; }
div.game .game6 { background-color: #6b7700; box-shadow: 0 0px 15px #6b7700; }

/* کلاس‌های کمکی */
.calculator-item2 {
  display: flex; justify-content: center; align-items: center; border-radius: 20px;
  box-shadow: 0 0px 10px rgb(51 63 99 / 28%); transition: transform 0.3s ease, background-color 0.3s ease;
  color: #0d1d35; text-align: center;
}

.calculator-item2:hover { background-color: #fff; box-shadow: 0 5px 30px #00000098; transform: translateY(-5px); }
.calculator-item2 span { text-decoration: none; color: #20478a; font-size: clamp(12px, 0.525rem + 1vw, 22px); font-weight: 600; padding: clamp(0.75rem, 0.438rem + 1vw, 1.25rem); display: block; }

.calculator-link { text-decoration: none; color: inherit; display: inline-block; }
a { -webkit-tap-highlight-color: transparent; text-decoration: none; }
.nopadding { padding: 0; }
.blog { text-align: center; color: #0d1d35; font-size: 30px; }

/* مدیا کوئری‌ها */
@media (max-width: 600px) {
  div.game { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3,1fr); }
  div.game .game2 { grid-column: 1/3; }
  div.game .game3, div.game .game4 { grid-row: 2/3; }
  div.game .game5, div.game .game6 { grid-row: 3/4; }
}

@media (max-width: 518px) {
  .grid-row { grid-template-columns: repeat(auto-fit, minmax(6.9rem,1fr)); grid-template-rows: repeat(auto-fit, minmax(7rem,1fr)); }
  .calculator-item { margin-bottom: 20px; }
}

@media (max-width: 422px) {
  .calculator-item {
    width: clamp(7rem, 4.625rem + 6vw, 10.625rem);
    height: clamp(7rem, 4.625rem + 6vw, 10.625rem);
  }
}





/* پیشنهاد برای جایگزینی بخشی از CSS */

:root {
  --primary-color: #2563eb;
  --bg-color: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #1e293b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05);
}

body {
  background-color: var(--bg-color) !important;
  font-family: "Baloo Bhaijaan 2", sans-serif;
  font-size: 16px; /* اصلاح سایز فونت */
  color: var(--text-main);
}

.calculator-item {
  background: var(--card-bg);
  border: 1px solid #e2e8f0; /* اضافه کردن Border ظریف */
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.calculator-item:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-8px);
}

/* استایل مدرن برای بخش بازی‌ها */
div.game {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 30px;
  border-radius: 24px;
}

div.game a {
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}