/*
 * Shabnam font (SIL OFL 1.1 — free, self-hosted, no CDN).
 * Source: https://github.com/rastikerdar/shabnam-font
 * Files must exist at: frontend/public/fonts/shabnam/*.woff2
 */
@font-face {
  font-family: "Shabnam";
  src: url("/fonts/shabnam/Shabnam-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shabnam";
  src: url("/fonts/shabnam/Shabnam.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shabnam";
  src: url("/fonts/shabnam/Shabnam-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shabnam";
  src: url("/fonts/shabnam/Shabnam-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Global font-size override.
 * Redefines the CSS variables the original style.css uses for every
 * heading/body font size — without touching style.css itself.
 * Sizes trimmed down slightly further from the previous pass.
 */
:root {
  --h1: 38px;
  --h2: 24px;
  --h3: 19px;
  --h4: 17px;
  --h5: 14px;
  --h6: 13px;
  --font-size-b1: 13px;
  --font-size-b2: 14px;
  --font-size-b3: 16px;
}

/*
 * Apply Shabnam to Persian/Arabic pages only, so the Latin/English
 * page keeps the template's original font untouched.
 */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] span,
[dir="rtl"] div,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] textarea {
  font-family: "Rajdhani", "Shabnam", Tahoma, sans-serif !important;
}

.portrait-placeholder,
.portfolio-img-placeholder,
.client-img-placeholder,
.blog-img-placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f7f7f7 10px, #f7f7f7 20px);
  border-radius: 8px;
  width: 100%;
  min-height: 220px;
}

.collaborators-img-placeholder {
  background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f7f7f7 10px, #f7f7f7 20px);
  width: 300px;
  height: 300px;
  margin-bottom: 5px;
}

.client-img-placeholder {
  min-height: 60px;
  width: 60px;
  border-radius: 50%;
}

[lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-1 {
  font-size: 138px;
}

@media (min-width: 400px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-1 {
    font-size: 140px;
  }
}

@media (min-width: 576px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-1 {
    font-size: 210px;
  }
}

@media (min-width: 992px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-1 {
    font-size: 192px;
  }
}

@media (min-width: 1200px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-1 {
    font-size: 230px;
  }
}

[lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-2 {
  font-size: 65px;
}

@media (min-width: 400px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-2 {
    font-size: 70px;
  }
}

@media (min-width: 576px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-2 {
    font-size: 160px;
  }
}

@media (min-width: 992px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-2 {
    font-size: 170px;
  }
}

@media (min-width: 1200px) {
  [lang="ar"] .banner-two-main-wrapper .banner-right-content .main-img .banner-big-text-2 {
    font-size: 200px;
  }
}