/* ==== فونت ها ==== */

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Peyda";
  src: url("./font/WebFonts/woff2/PeydaWeb-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- استفاده پیش فرض---*/

body {
  font-family: "Peyda", Tahoma, sans-serif;
  font-weight: 400;
}

/* ----------------------------------------------------------
   کلاس‌های کمکی برای دسترسی سریع به هر وزن
   ---------------------------------------------------------- */
.font-thinp        { font-weight: 100; }
.font-extralightp  { font-weight: 200; }
.font-lightp       { font-weight: 300; }
.font-regularp     { font-weight: 400; }
.font-mediump      { font-weight: 500; }
.font-semiboldp    { font-weight: 600; }
.font-boldp        { font-weight: 700; }
.font-extraboldp   { font-weight: 800; }
.font-blackp       { font-weight: 900; }

/* =========================
   BASE
========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #f7f9fc;
    color: #172530;

    font-family: "Peyda", sans-serif;
    line-height: 2;
}

.business-magazine {
    width: min(1180px, 92%);
    margin: auto;
}


/*HERO*/

.business-hero {
    padding: 90px 0 0;
}

.business-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 55px;

    font-size: 13px;
}

.business-category {
    color: #118ed1;
    letter-spacing: 2px;
    direction: ltr;
}

.business-reading {
    color: #7e8a93;
}


.business-hero-content {
    max-width: 900px;
    margin-bottom: 55px;
}

.business-hero h1 {
    margin: 0;

    font-size: clamp(42px, 6vw, 78px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -1.5px;
}

.business-hero h1 span {
    color: #119ce5;
}

.business-lead {
    max-width: 650px;

    margin-top: 30px;

    font-size: 20px;
    color: #64717b;
}


/*HERO IMAGE*/

.business-hero-image {
    position: relative;

    width: 100%;
    height: 560px;

    overflow: hidden;

    background: #e7edf4;

    box-shadow:
        0 25px 60px rgba(8, 25, 38, .13),
        0 50px 100px rgba(8, 25, 38, .06);
}

.business-hero-image::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(17, 168, 253, .07),
            transparent 45%,
            rgba(4, 30, 48, .08)
        );
}

.business-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .8s ease;
}

.business-hero-image:hover img {
    transform: scale(1.02);
}


/*META*/

.business-meta {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 22px;

    color: #7d8991;
    font-size: 13px;
}

.meta-line {
    width: 35px;
    height: 1px;

    background: #b9c5ce;
}


/*ARTICLE*/

.business-article {
    max-width: 850px;

    margin: 100px auto;

    font-size: 17px;
}

.business-article p {
    margin: 0 0 28px;
}


/*QUOTE*/

.business-article blockquote {
    margin: 45px 0;

    padding: 5px 30px;

    border-right: 3px solid #11a8fd;

    font-size: 25px;
    font-weight: 700;

    color: #182b38;
}


/*HIGHLIGHT*/

.business-highlight {
    display: flex;
    align-items: center;
    gap: 22px;

    margin: 55px 0;
    padding: 28px 30px;

    background: #edf7fd;

    border-right: 3px solid #11a8fd;
}

.business-highlight span {
    font-family: Arial, sans-serif;

    font-size: 30px;
    font-weight: 700;

    color: #119ee7;
}

.business-highlight p {
    margin: 0;

    font-size: 19px;
    font-weight: 700;
}

.business-final-line {
    font-size: 21px;
    font-weight: 700;
}


/*SECTIONS*/

.business-section {
    position: relative;

    margin-top: 130px;
}

.section-number {
    display: block;

    margin-bottom: 12px;

    font-family: Arial, sans-serif;
    font-size: 12px;

    color: #11a8fd;
    letter-spacing: 3px;
}

.business-section h2 {
    margin: 0 0 40px;

    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.4;
}

.business-statement {
    margin: 55px 0;
    display: flex;
    gap: 18px;
}

.business-statement span {
    width: 4px;
    min-width: 4px;

    background: #11a8fd;
}

.business-statement p {
    margin: 0;

    font-size: 22px;
    font-weight: 700;
}


/*COMPARISON*/

.comparison-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 55px;
}

.comparison-card {
    padding: 42px;

    min-height: 450px;

    background: #fff;

    border: 1px solid #e5ebef;

    box-shadow:
        0 20px 50px rgba(8, 25, 38, .06);
}

.comparison-card.after {
    border-top: 3px solid #11a8fd;
}

.comparison-label {
    font-family: Arial, sans-serif;

    font-size: 11px;
    letter-spacing: 2px;

    color: #8a969e;
}

.comparison-card.after .comparison-label {
    color: #11a8fd;
}

.comparison-card h3 {
    margin: 25px 0;

    font-size: 25px;
    line-height: 1.6;
}

.comparison-question {
    margin: 30px 0;
    padding: 20px;

    background: #f5f8fa;

    font-weight: 700;
}

.comparison-card small {
    color: #7c8891;
}


/*TABLE*/

.comparison-table {
    margin-top: 55px;

    border-top: 1px solid #dbe3e8;
}

.table-head,
.table-row {
    display: grid;

    grid-template-columns: 1fr 1fr;
}

.table-head {
    background: #122b3a;

    color: white;

    font-weight: 700;
}

.table-head span,
.table-row span {
    padding: 20px 25px;
}

.table-head span:first-child {
    color: #51c5ff;
}

.table-row {
    border-bottom: 1px solid #dbe3e8;
}

.table-row span:first-child {
    background: #f0f9fe;
}

.table-row span:last-child {
    background: #fff;
}

.table-conclusion {
    margin-top: 35px;

    font-size: 18px;
}


/*FINAL*/

.final-question {
    margin: 60px 0;
    padding: 45px;

    background: #122b3a;

    color: white;
}

.final-question span {
    display: block;

    margin-bottom: 18px;

    color: #51c5ff;

    font-size: 12px;
    letter-spacing: 2px;
}

.final-question p {
    margin: 0;

    font-size: 25px;
    font-weight: 700;
}

.final-message {
    margin-top: 70px;
    padding-top: 40px;

    border-top: 1px solid #dbe3e8;

    font-size: 22px;
    line-height: 2;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

    .business-hero {
        padding-top: 50px;
    }

    .business-hero-top {
        margin-bottom: 35px;

        font-size: 11px;
    }

    .business-hero h1 {
        font-size: 42px;
        letter-spacing: -.5px;
    }

    .business-lead {
        font-size: 16px;
    }

    .business-hero-image {
        height: 330px;
    }

    .business-article {
        margin: 70px auto;

        font-size: 16px;
    }

    .business-article blockquote {
        font-size: 20px;
        padding-right: 20px;
    }

    .business-section {
        margin-top: 90px;
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-card {
        padding: 28px;
        min-height: auto;
    }

    .table-head span,
    .table-row span {
        padding: 15px 12px;

        font-size: 12px;
        line-height: 1.9;
    }

    .final-question {
        padding: 30px 25px;
    }

    .final-question p {
        font-size: 20px;
    }

    .final-message {
        font-size: 18px;
    }
}