/* ========================================================= */
/* RESET                                                       */
/* ========================================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family: "Vazirmatn", sans-serif;

    color: #111827;

    background:

        radial-gradient(
            circle at top right,
            #dbeafe 0%,
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #f8fafc,
            #eef2ff
        );

}


/* ========================================================= */
/* MAIN BLOG                                                   */
/* ========================================================= */

.blog-page {

    width: min(1050px, calc(100% - 40px));

    margin: 50px auto;

}


.blog-article {

    overflow: hidden;

    background: #ffffff;

    border-radius: 28px;

    box-shadow:

        0 25px 60px rgba(15, 23, 42, 0.12),

        0 5px 20px rgba(15, 23, 42, 0.05);

}


/* ========================================================= */
/* HERO IMAGE                                                   */
/* ========================================================= */

.blog-hero {

    position: relative;

    width: 100%;

    height: 460px;

    overflow: hidden;

}


.blog-hero img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.6s ease;

}


.blog-article:hover
.blog-hero img {

    transform: scale(1.03);

}


.blog-hero-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 40px;

    background:

        linear-gradient(

            to top,

            rgba(15, 23, 42, 0.92),

            rgba(15, 23, 42, 0.20),

            transparent

        );

}


.blog-hero-content {

    max-width: 800px;

    color: #ffffff;

}


.blog-label {

    display: inline-block;

    padding: 8px 18px;

    margin-bottom: 15px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    background: #2563eb;

    border-radius: 30px;

}


.blog-hero h1 {

    margin: 0;

    color: #ffffff;

    font-size: 38px;

    font-weight: 800;

    line-height: 1.8;

}


/* ========================================================= */
/* CONTENT                                                     */
/* ========================================================= */

.blog-content {

    padding: 50px;

}


.blog-content p {

    margin: 0 0 22px;

    color: #4b5563;

    font-size: 18px;

    font-weight: 400;

    line-height: 2.3;

    text-align: justify;

}


.blog-content h2 {

    position: relative;

    margin: 55px 0 22px;

    padding-right: 18px;

    color: #111827;

    font-size: 27px;

    font-weight: 800;

    line-height: 1.8;

}


.blog-content h2::before {

    content: "";

    position: absolute;

    top: 8px;

    right: 0;

    width: 5px;

    height: 32px;

    background:

        linear-gradient(

            to bottom,

            #2563eb,

            #60a5fa

        );

    border-radius: 10px;

}


.blog-content h3 {

    margin: 35px 0 12px;

    color: #1e3a8a;

    font-size: 21px;

    font-weight: 700;

}


/* ========================================================= */
/* HIGHLIGHT                                                   */
/* ========================================================= */

.blog-highlight {

    padding: 25px 30px;

    margin: 0 0 30px;

    color: #1e40af;

    font-size: 18px;

    font-weight: 500;

    line-height: 2.2;

    background:

        linear-gradient(

            135deg,

            #eff6ff,

            #dbeafe

        );

    border-right: 5px solid #2563eb;

    border-radius: 18px;

    box-shadow:

        0 10px 25px rgba(37, 99, 235, 0.08);

}


/* ========================================================= */
/* LIST                                                        */
/* ========================================================= */

.blog-list {

    padding: 0;

    margin: 25px 0;

    list-style: none;

}


.blog-list li {

    position: relative;

    padding: 14px 45px 14px 15px;

    margin-bottom: 10px;

    color: #374151;

    font-size: 17px;

    background: #f8fafc;

    border-radius: 12px;

    transition:

        transform 0.25s ease,

        background 0.25s ease;

}


.blog-list li::before {

    content: "✓";

    position: absolute;

    top: 13px;

    right: 15px;

    color: #2563eb;

    font-size: 18px;

    font-weight: 800;

}


.blog-list li:hover {

    background: #eff6ff;

    transform: translateX(-5px);

}


/* ========================================================= */
/* FAQ                                                         */
/* ========================================================= */

.blog-faq {

    margin-top: 60px;

}


.blog-faq-item {

    padding: 25px;

    margin-top: 15px;

    background: #f8fafc;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease;

}


.blog-faq-item:hover {

    transform: translateY(-3px);

    box-shadow:

        0 10px 25px rgba(37, 99, 235, 0.08);

}


.blog-faq-item h3 {

    margin: 0 0 12px;

    color: #111827;

    font-size: 19px;

    font-weight: 700;

}


.blog-faq-item p {

    margin: 0;

    font-size: 16px;

}


/* ========================================================= */
/* RESPONSIVE                                                  */
/* ========================================================= */

@media (max-width: 768px) {


    .blog-page {

        width: calc(100% - 24px);

        margin: 20px auto;

    }


    .blog-article {

        border-radius: 20px;

    }


    .blog-hero {

        height: 300px;

    }


    .blog-hero-overlay {

        padding: 25px;

    }


    .blog-hero h1 {

        font-size: 24px;

        line-height: 1.8;

    }


    .blog-content {

        padding: 25px 20px;

    }


    .blog-content h2 {

        margin-top: 40px;

        font-size: 23px;

    }


    .blog-content p {

        font-size: 16px;

        line-height: 2.2;

        text-align: right;

    }


    .blog-highlight {

        padding: 20px;

        font-size: 16px;

    }


    .blog-list li {

        font-size: 15px;

    }


}