:root {

    --primary: #635bff;
    --primary-dark: #4f46e5;

    --dark: #111827;
    --text: #4b5563;

    --light: #f8fafc;

    --border: #e5e7eb;

    --green: #10b981;
    --orange: #f59e0b;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


html,
body {
    max-width: 100%;
    overflow-x: hidden;
}


body {

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

    color: var(--dark);

    background: #fff;

    line-height: 1.9;

}


img {
    max-width: 100%;
}


a {
    text-decoration: none;
}



/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    min-height: 76px;

    transition: .3s;

    box-shadow:
            0 5px 25px rgba(0, 0, 0, .04);

}


.navbar-brand {

    font-weight: 800;

    color: var(--dark);

}


.brand-icon {

    width: 44px;

    height: 44px;

    border-radius: 13px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: white;

}


.brand-text {

    margin-right: 10px;

}


.nav-link {

    color: #4b5563;

    font-weight: 500;

    margin: 0 5px;

    transition: .2s;

}


.nav-link:hover,
.nav-link.active {

    color: var(--primary);

}


.btn-primary {

    background: var(--primary);

    border-color: var(--primary);

}


.btn-primary:hover {

    background: var(--primary-dark);

    border-color: var(--primary-dark);

}



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

.hero-section {

    position: relative;

    padding-top: 155px;

    padding-bottom: 110px;

    overflow: hidden;

    background:

            radial-gradient(
                    circle at 10% 20%,
                    rgba(99,91,255,.13),
                    transparent 30%
            ),

            radial-gradient(
                    circle at 90% 80%,
                    rgba(16,185,129,.10),
                    transparent 30%
            ),

            #f8fafc;

}


.hero-shape {

    position: absolute;

    border-radius: 50%;

    filter: blur(1px);

    pointer-events: none;

}


.shape-one {

    width: 350px;

    height: 350px;

    background: rgba(99,91,255,.05);

    top: -100px;

    right: -100px;

}


.shape-two {

    width: 250px;

    height: 250px;

    background: rgba(16,185,129,.05);

    bottom: -100px;

    left: -100px;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 17px;

    border-radius: 50px;

    background: rgba(99,91,255,.1);

    color: var(--primary);

    font-weight: 700;

    font-size: .85rem;

}


.hero-title {

    margin-top: 25px;

    font-size: clamp(2.5rem, 5vw, 4.7rem);

    line-height: 1.25;

    font-weight: 900;

    letter-spacing: -2px;

}


.hero-title span {

    display: block;

    color: var(--primary);

}


.hero-description {

    max-width: 650px;

    margin-top: 20px;

    color: var(--text);

    font-size: 1.12rem;

}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}


.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 22px;

    margin-top: 30px;

}


.hero-features span {

    font-size: .85rem;

    font-weight: 600;

}


.hero-features i {

    color: var(--green);

    margin-left: 5px;

}



/* HERO VISUAL */

.hero-visual {

    position: relative;

    min-height: 480px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.code-window {

    position: relative;

    z-index: 2;

    width: min(100%, 530px);

    border-radius: 24px;

    overflow: hidden;

    background: #111827;

    box-shadow:
            0 35px 90px rgba(15,23,42,.25);

    transform: rotate(-2deg);

}


.window-header {

    height: 48px;

    background: #1f2937;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 0 18px;

}


.window-header span {

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #6b7280;

}


.code-content {

    padding: 35px;

    direction: ltr;

    text-align: left;

}


.code-content pre {

    margin: 0;

    color: #e5e7eb;

    font-family: monospace;

    font-size: 15px;

    line-height: 2;

}


.purple {

    color: #c084fc;

}


.blue {

    color: #60a5fa;

}


.floating-learning-card {

    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 18px;

    background: white;

    border-radius: 17px;

    box-shadow:
            0 20px 50px rgba(0,0,0,.13);

    animation: floatingCard 4s ease-in-out infinite;

}


.card-top {

    top: 40px;

    right: -5px;

}


.card-bottom {

    bottom: 40px;

    left: -5px;

    animation-delay: 1s;

}


.floating-icon {

    width: 45px;

    height: 45px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    background: rgba(99,91,255,.1);

}


.floating-icon.green {

    color: var(--green);

    background: rgba(16,185,129,.1);

}


.floating-learning-card strong {

    display: block;

    font-size: .85rem;

}


.floating-learning-card small {

    color: #6b7280;

    font-size: .7rem;

}


.hero-circle {

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: rgba(99,91,255,.07);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 7rem;

    color: rgba(99,91,255,.12);

    animation: pulseCircle 4s infinite;

}



/* =====================================================
   TRUST
===================================================== */

.trust-section {

    padding: 38px 0;

    border-bottom: 1px solid var(--border);

}


.trust-item {

    display: flex;

    flex-direction: column;

    align-items: center;

}


.trust-item i {

    font-size: 1.7rem;

    color: var(--primary);

}


.trust-item strong {

    margin-top: 5px;

}


.trust-item span {

    color: #6b7280;

    font-size: .78rem;

}



/* =====================================================
   COMMON
===================================================== */

.section-padding {

    padding: 105px 0;

}


.section-heading {

    max-width: 780px;

    margin: auto;

}


.section-label {

    color: var(--primary);

    font-weight: 800;

    font-size: .85rem;

}


.section-heading h2 {

    font-size: clamp(2rem,4vw,3rem);

    font-weight: 900;

    margin-top: 10px;

}


.section-heading p {

    color: var(--text);

    margin-top: 15px;

}



/* =====================================================
   FEATURES
===================================================== */

.feature-card {

    position: relative;

    height: 100%;

    padding: 35px 27px;

    border: 1px solid var(--border);

    border-radius: 24px;

    overflow: hidden;

    transition: .4s;

}


.feature-card:hover {

    transform:
            translateY(-10px)
            rotate(-1deg);

    box-shadow:
            0 25px 60px rgba(0,0,0,.09);

    border-color: transparent;

}


.feature-icon {

    width: 62px;

    height: 62px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(99,91,255,.1);

    color: var(--primary);

    font-size: 1.6rem;

    transition: .4s;

}


.feature-card:hover .feature-icon {

    transform:
            rotate(12deg)
            scale(1.1);

}


.feature-card h3 {

    font-size: 1.15rem;

    font-weight: 800;

    margin-top: 20px;

}


.feature-card p {

    color: var(--text);

    font-size: .9rem;

}


.feature-glow {

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: rgba(99,91,255,.1);

    filter: blur(30px);

    bottom: -50px;

    left: -30px;

    transition: .4s;

}


.feature-card:hover .feature-glow {

    transform: scale(2);

}



/* =====================================================
   LEARNING PATH
===================================================== */

.learning-section {

    background: #f8fafc;

}


.level-section {

    margin-top: 70px;

}


.level-header {

    margin-bottom: 30px;

}


.level-header h3 {

    margin-top: 15px;

    font-weight: 900;

}


.level-header p {

    color: var(--text);

}


.level-badge {

    display: inline-block;

    padding: 7px 17px;

    border-radius: 50px;

    font-size: .75rem;

    font-weight: 800;

}


.beginner-badge {

    background: #dcfce7;

    color: #15803d;

}


.intermediate-badge {

    background: #dbeafe;

    color: #1d4ed8;

}


.advanced-badge {

    background: #fef3c7;

    color: #b45309;

}


.path-card {

    position: relative;

    height: 100%;

    padding: 35px 27px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 24px;

    transition: .4s;

}


.path-card:hover {

    transform: translateY(-8px);

    box-shadow:
            0 25px 55px rgba(0,0,0,.08);

}


.path-card > i {

    display: block;

    font-size: 2.2rem;

    color: var(--primary);

    margin: 20px 0;

}


.path-card h4 {

    font-weight: 800;

}


.path-card p {

    color: var(--text);

    font-size: .9rem;

}


.step-number {

    position: absolute;

    top: 18px;

    left: 18px;

    color: #9ca3af;

    font-size: .7rem;

    font-weight: 800;

}


.hours {

    display: inline-block;

    margin-top: 15px;

    padding: 5px 12px;

    border-radius: 50px;

    background: #f3f4f6;

    font-size: .7rem;

    font-weight: 700;

}



/* =====================================================
   COURSE
===================================================== */

.course-card {

    position: relative;

    height: 100%;

    padding: 35px 28px;

    border: 1px solid var(--border);

    border-radius: 25px;

    transition: .4s;

}


.course-card:hover {

    transform: translateY(-8px);

    box-shadow:
            0 25px 55px rgba(0,0,0,.08);

}


.course-card.popular {

    border: 2px solid var(--primary);

}


.popular-label {

    position: absolute;

    top: 18px;

    left: 18px;

    padding: 5px 12px;

    border-radius: 50px;

    background: var(--primary);

    color: white;

    font-size: .7rem;

}


.course-icon {

    width: 65px;

    height: 65px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.6rem;

    margin-bottom: 20px;

}


.beginner {

    background: #ecfdf5;

    color: #059669;

}


.intermediate {

    background: #eff6ff;

    color: #2563eb;

}


.advanced {

    background: #fef3c7;

    color: #d97706;

}


.course-level {

    color: var(--primary);

    font-size: .8rem;

    font-weight: 800;

}


.course-card h3 {

    font-weight: 900;

    margin-top: 10px;

}


.course-card p {

    color: var(--text);

    font-size: .9rem;

}



/* =====================================================
   ONLINE
===================================================== */

.online-section {

    background: var(--primary);

    color: white;

}


.online-section .section-label {

    color: #ddd6fe;

}


.online-section p {

    color: #ede9fe;

}


.online-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 30px;

}


.online-features span {

    display: flex;

    align-items: center;

    gap: 10px;

}


.online-box {

    padding: 60px 40px;

    border-radius: 30px;

    background: rgba(255,255,255,.12);

    border: 1px solid rgba(255,255,255,.2);

    text-align: center;

}


.online-box > i {

    font-size: 4rem;

}



/* =====================================================
   PROJECTS
===================================================== */

.project-card {

    text-align: center;

}


.project-image {

    height: 190px;

    border-radius: 24px;

    background: #f8fafc;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 4rem;

    color: var(--primary);

    transition: .4s;

}


.project-card:hover .project-image {

    transform:
            translateY(-8px)
            scale(1.03);

    box-shadow:
            0 20px 45px rgba(0,0,0,.08);

}


.project-card h3 {

    font-size: 1.1rem;

    font-weight: 800;

    margin-top: 18px;

}


.project-card p {

    color: var(--text);

    font-size: .85rem;

}



/* =====================================================
   TEACHER
===================================================== */

.teacher-section {

    background: #f8fafc;

}


.teacher-placeholder {

    height: 500px;

    border-radius: 30px;

    background:
            linear-gradient(
                    145deg,
                    #e0e7ff,
                    #f8fafc
            );

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 9rem;

}

.teacher-placeholder img {

    height: 500px;

    border-radius: 30px;

    background:
            linear-gradient(
                    145deg,
                    #e0e7ff,
                    #f8fafc
            );

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 9rem;

}


.teacher-section h2 {

    font-size: 3rem;

    font-weight: 900;

}


.teacher-section h4 {

    color: var(--primary);

    font-weight: 800;

}


.teacher-section p {

    color: var(--text);

}


.teacher-stats {

    display: flex;

    gap: 50px;

    margin-top: 35px;

}


.counter-box {

    display: flex;

    flex-direction: column;

}


.counter {

    font-size: 2.5rem;

    color: var(--primary);

    font-weight: 900;

}


.counter::after {

    content: "+";

}



/* =====================================================
   VIDEO
===================================================== */

.video-card {

    overflow: hidden;

    border-radius: 25px;

    border: 1px solid var(--border);

    box-shadow:
            0 20px 55px rgba(0,0,0,.07);

}


/*.video-placeholder {*/

/*    height: 430px;*/

/*    background: #111827;*/

/*    display: flex;*/

/*    align-items: center;*/

/*    justify-content: center;*/

/*}*/


.play-button {

    width: 82px;

    height: 82px;

    border: 0;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    font-size: 2rem;

    transition: .3s;

}


.play-button:hover {

    transform: scale(1.15);

}


.video-info {

    padding: 28px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}


.video-info span {

    color: var(--primary);

    font-size: .75rem;

}


.video-info h3 {

    font-weight: 900;

    margin: 5px 0 0;

}



/* =====================================================
   TESTIMONIAL
===================================================== */

.testimonial-section {

    background: #f8fafc;

}


.testimonial-slider-wrapper {

    overflow: hidden;

    margin-top: 50px;

    cursor: grab;

    direction: ltr;

}


.testimonial-slider-wrapper:active {

    cursor: grabbing;

}


.testimonial-track {

    display: flex;

    gap: 20px;

    width: max-content;

    animation: testimonialMove 30s linear infinite;

}


.testimonial-slider-wrapper:hover
.testimonial-track {

    animation-play-state: paused;

}


.testimonial-card {

    width: 360px;

    min-height: 250px;

    padding: 30px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 24px;

    direction: rtl;

    flex-shrink: 0;

}


.quote {

    color: var(--primary);

    font-size: 2rem;

}


.testimonial-card p {

    color: var(--text);

}


.testimonial-card strong {

    font-size: .8rem;

}


.slider-hint {

    text-align: center;

    margin-top: 20px;

    color: #9ca3af;

    font-size: .75rem;

}


.slider-hint i {

    margin-left: 5px;

}



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

.blog-card {

    height: 100%;

    border: 1px solid var(--border);

    border-radius: 22px;

    overflow: hidden;

    transition: .3s;

}


.blog-card:hover {

    transform: translateY(-7px);

    box-shadow:
            0 20px 45px rgba(0,0,0,.08);

}


.blog-image {

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #eef2ff;

    color: var(--primary);

    font-size: 4rem;

}


.blog-content {

    padding: 25px;

}


.blog-content > span {

    color: var(--primary);

    font-size: .75rem;

    font-weight: 800;

}


.blog-content h3 {

    font-size: 1.05rem;

    font-weight: 800;

}


.blog-content a {

    color: var(--primary);

    font-size: .85rem;

    font-weight: 700;

}



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

.faq-section {

    background: #f8fafc;

}


.accordion-item {

    border: 1px solid var(--border);

    margin-bottom: 10px;

    border-radius: 15px !important;

    overflow: hidden;

}


.accordion-button {

    padding: 22px;

    font-weight: 800;

}


.accordion-button:not(.collapsed) {

    background: rgba(99,91,255,.06);

    color: var(--primary);

    box-shadow: none;

}


.accordion-button:focus {

    box-shadow: none;

}



/* =====================================================
   CTA
===================================================== */

.cta-section {

    padding: 100px 0;

}


.cta-box {

    padding: 75px 30px;

    border-radius: 35px;

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

}


.cta-box h2 {

    font-weight: 900;

}


.cta-box p {

    max-width: 700px;

    margin: 20px auto;

    color: var(--text);

}



/* =====================================================
   SEO
===================================================== */

.seo-section {

    padding: 80px 0;

    background: #f8fafc;

}


.seo-content {

    max-width: 950px;

    margin: auto;

    position: relative;

}


.seo-content h2 {

    font-size: 1.5rem;

    font-weight: 900;

}


.seo-preview {

    position: relative;

    max-height: 105px;

    overflow: hidden;

}


.seo-preview::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 60px;

    background:
            linear-gradient(
                    transparent,
                    #f8fafc
            );

}


.seo-preview p {

    color: #6b7280;

}


.seo-full-content {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
            max-height .8s ease,
            opacity .5s ease;

}


.seo-content.open
.seo-full-content {

    max-height: 3000px;

    opacity: 1;

}


.seo-content.open
.seo-preview {

    display: none;

}


.seo-toggle {

    border: 0;

    background: transparent;

    color: var(--primary);

    font-weight: 800;

    margin-top: 15px;

}


.seo-toggle i {

    transition: .4s;

}


.seo-content.open
.seo-toggle i {

    transform: rotate(180deg);

}



/* =====================================================
   FOOTER
===================================================== */

.footer {

    background: #111827;

    color: #d1d5db;

    padding: 70px 0 25px;

}


.footer h4,
.footer h5 {

    color: white;

    font-weight: 900;

}


.footer p {

    color: #9ca3af;

}


.footer ul {

    list-style: none;

    padding: 0;

}


.footer li {

    margin-bottom: 10px;

}


.footer a {

    color: #9ca3af;

}


.footer a:hover {

    color: white;

}


.social-links {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}


.social-links a {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #1f2937;

}


.contact-list i {

    color: #a5b4fc;

    margin-left: 8px;

}


.footer hr {

    border-color: #374151;

    margin: 50px 0 25px;

}


.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: #6b7280;

    font-size: .8rem;

}



/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes floatingCard {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}


@keyframes pulseCircle {

    0%,
    100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.08);

    }

}


@keyframes testimonialMove {

    0% {

        transform: translateX(0);

    }

    100% {

        transform: translateX(-50%);

    }

}



/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .hero-section {

        padding-top: 125px;

    }


    .hero-visual {

        min-height: 420px;

    }


    .navbar .btn {

        margin-top: 12px;

    }

}



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

@media (max-width: 767px) {


    body {

        text-align: center;

    }


    .navbar-nav {

        text-align: center;

        padding-top: 15px;

    }


    .navbar .btn {

        width: 100%;

    }


    .hero-section {

        padding-top: 120px;

        padding-bottom: 70px;

    }


    .hero-title {

        font-size: 2.5rem;

        letter-spacing: -1px;

    }


    .hero-description {

        margin-left: auto;

        margin-right: auto;

        font-size: 1rem;

    }


    .hero-buttons {

        justify-content: center;

    }


    .hero-features {

        justify-content: center;

        flex-direction: column;

        gap: 8px;

    }


    .hero-visual {

        min-height: 330px;

    }


    .code-window {

        transform: none;

    }


    .code-content {

        padding: 22px;

    }


    .code-content pre {

        font-size: 10px;

    }


    .floating-learning-card {

        display: none;

    }


    .hero-circle {

        width: 200px;

        height: 200px;

        font-size: 5rem;

    }


    .section-padding {

        padding: 70px 0;

    }


    .section-heading {

        text-align: center;

    }


    .feature-card,
    .path-card,
    .course-card,
    .testimonial-card,
    .blog-card {

        text-align: center;

    }


    .feature-icon {

        margin-left: auto;

        margin-right: auto;

    }


    .level-header {

        text-align: center;

    }


    .online-features {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .online-features span {

        justify-content: center;

    }


    .teacher-placeholder {

        height: 350px;

        font-size: 7rem;

    }


    .teacher-section h2 {

        font-size: 2.3rem;

    }


    .teacher-stats {

        justify-content: center;

        gap: 30px;

    }


    /*.video-placeholder {*/

    /*    height: 280px;*/

    /*}*/


    .video-info {

        flex-direction: column;

        text-align: center;

    }


    .testimonial-slider-wrapper {

        margin-right: -15px;

        margin-left: -15px;

    }


    .testimonial-card {

        width: 300px;

    }


    .cta-box {

        padding: 55px 20px;

    }


    .footer {

        text-align: center;

    }


    .social-links {

        justify-content: center;

    }


    .footer-bottom {

        flex-direction: column;

    }

}



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

@media (max-width: 480px) {


    .hero-title {

        font-size: 2.2rem;

    }


    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }


    .hero-buttons .btn {

        width: 100%;

    }


    .teacher-stats {

        flex-direction: column;

        align-items: center;

    }


    .testimonial-card {

        width: 280px;

    }


    .path-card {

        padding: 30px 20px;

    }

}

.all-blogs-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 42px;
    text-align: center;
}

.all-blogs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 30px;
    color: #fff;
    background: linear-gradient(135deg, #7165f5, #5749df);
    border: 1px solid transparent;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(113, 101, 245, 0.20);
    transition: transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.all-blogs-btn i {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.all-blogs-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #5d50e7, #4739cc);
    box-shadow: 0 12px 28px rgba(113, 101, 245, 0.30);
    transform: translateY(-3px);
}

.all-blogs-btn:hover i {
    transform: translateX(-4px);
}

.all-blogs-action p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.9;
}

@media (max-width: 576px) {
    .all-blogs-action {
        margin-top: 30px;
        padding: 0 12px;
    }

    .all-blogs-btn {
        width: 100%;
        max-width: 320px;
        padding: 13px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .all-blogs-btn,
    .all-blogs-btn i {
        transition: none;
    }
}


.video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111827;
    overflow: hidden;
    position: relative;
}

.video-placeholder > div {
    width: 100%;
    height: 100%;
}

.video-placeholder iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.video-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
}

@media (max-width: 768px) {
    .video-info {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}

/* لینک اصلی کارت */
.blog-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* خود کارت */
.blog-card {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eee;
    box-shadow: 0 5px 25px rgba(30, 40, 100, 0.06);
    transition: all 0.3s ease;
}

/* افکت هاور کارت */
.blog-card-link:hover .blog-card {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(30, 40, 100, 0.13);
    border-color: #c9bcff;
}

/* تصویر */
.blog-image {
    height: 220px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card-link:hover .blog-image img {
    transform: scale(1.05);
}

.blog-image i {
    font-size: 55px;
    color: #7457f5;
}

/* محتوای کارت */
.blog-content {
    padding: 22px;
}

.blog-content h3 {
    color: #202b55;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.8;
    margin: 16px 0;
}

.blog-content p {
    color: #78839e;
    font-size: 14px;
    line-height: 2;
    margin-bottom: 20px;
}

/* دسته‌بندی */
.blog-category {
    display: inline-block;
    padding: 7px 14px;
    background: #f1edff;
    color: #7457f5;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
}

/* پایین کارت */
.blog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid #f0f0f5;
    color: #8992aa;
    font-size: 13px;
}

.blog-footer i {
    margin-left: 5px;
}

/* دکمه فلش */
.blog-arrow {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #7457f5;
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.blog-card-link:hover .blog-arrow {
    transform: translateX(-5px);
    background: #5639dc;
}

/* دسترسی با کیبورد */
.blog-card-link:focus-visible {
    outline: 3px solid #7457f5;
    outline-offset: 5px;
    border-radius: 20px;
}