@charset "UTF-8";
:root {
    /* رنگ اصلی لوگو - سبز */
    --teal: #50BB6B;

    /* سبز تیره برای هاور و بخش‌های تیره */
    --teal-dark: #2F9650;

    /* آبی روشن لوگو */
    --cyan: #289FD9;

    /* آبی تیره لوگو */
    --blue-dark: #3D54A4;

    /* رنگ متن اصلی */
    --ink: #263C59;

    /* متن‌های فرعی */
    --muted: #66727F;

    /* پس‌زمینه خیلی روشن */
    --soft: #F4FAF7;

    /* سفید */
    --white: #fff;

    /* سایه */
    --shadow: 0 12px 35px rgba(61, 84, 164, .12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Vazirmatn",Tahoma,sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
a{text-decoration:none}
.site-nav{height:82px;background:rgba(255,255,255,.96);box-shadow:0 5px 22px rgba(0,0,0,.05);z-index:1000}
.navbar-brand{color:var(--teal)!important;line-height:1}
.navbar-brand strong{display:block;font-size:15px}
.navbar-brand small{display:block;font-size:9px;color:#7d9293;margin-top:4px}
.brand-icon{width:38px;height:38px;border-radius:50%;background:#e9f8f8;display:grid;place-items:center;color:var(--teal);font-size:20px}
.nav-link{font-size:13px;color:#334f50!important;font-weight:500}
.nav-link:hover,.nav-link.active{color:var(--cyan)!important}
.btn-outline-teal{border:1px solid var(--teal);color:var(--teal);font-size:12px}
.btn-outline-teal:hover{background:var(--teal);color:#fff}
.hero{position:relative;background: linear-gradient(
    110deg,
    #2F9650 0%,
    #289FD9 52%,
    #3D54A4 100%
);color:#fff;min-height:570px;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.15)}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(25,190,192,.13);filter:blur(5px);top:-190px;right:-80px}
.min-vh-hero{min-height:570px}
.hero-copy{padding:50px 10px 70px 4%}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:#bfeeed;font-size:12px;margin-bottom:16px}
.hero h1{font-size:clamp(30px,4vw,48px);font-weight:800;line-height:1.45;margin-bottom:18px}
.hero h1 span{color:#25c0c2}
.hero p{font-size:14px;line-height:2.2;color:#e2f3f3;max-width:590px;margin-bottom:25px}
.btn-orange{background:var(--orange);color:#fff;border:0}
.btn-orange:hover{background:#d97805;color:#fff;transform:translateY(-2px)}
.btn-ghost{border:1px solid rgba(255,255,255,.8);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--teal)}
.doctor-wrap{position:relative;height:570px;display:flex;align-items:end;justify-content:center}
.doctor-halo{position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(36,185,185,.15);bottom:45px;left:50%;transform:translateX(-50%)}
.doctor-img{position:relative;z-index:2;height:535px;width:auto;object-fit:cover;object-position:50% 5%;filter:drop-shadow(0 25px 30px rgba(0,0,0,.18));mix-blend-mode:normal}
.floating-stats{position:relative;margin-top:-34px;z-index:10}
.stats-card{width:min(700px,92%);margin:auto;background:#3D54A4;color:#fff;border-radius:8px;box-shadow:0 15px 35px rgba(0,0,0,.14);display:flex;justify-content:center;gap:0;padding:0}
.stats-card div{padding:18px 40px;text-align:center;position:relative}
.stats-card div+div:before{content:"";position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.15)}
.stats-card strong{display:block;color:#fff;font-size:17px}
.stats-card span{font-size:10px;color:#bfe4e4}
.section{position:relative;padding:100px 0}
.section-soft{background:linear-gradient(180deg,#fff 0%,#f7fcfc 100%)}
.section-heading{margin-bottom:55px}
.section-heading>span{color:var(--cyan);font-size:13px;font-weight:700}
.section-heading h2{font-size:30px;font-weight:800;margin:8px 0 13px}
.section-heading.light h2,.section-heading.light>span{color:#fff}
.heading-line{height:3px;width:55px;background:var(--cyan);margin:0 auto;border-radius:5px}
.service-card{height:100%;background:#fff;border:1px solid #dce6e6;border-top:4px solid #4a9ea0;border-radius:7px;padding:30px 22px 24px;text-align:center;box-shadow:0 5px 17px rgba(0,0,0,.08);transition:.3s}
.service-card:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-top-color:var(--cyan)}
.service-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#299bd6;color:#fff;font-size:23px}
.service-card h3{font-size:16px;font-weight:700;margin-bottom:13px}
.service-card p{font-size:11px;line-height:2;color:#6e7e7f;min-height:68px}
.service-card a{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--cyan);border-radius:30px;padding:6px 15px;color:var(--teal);font-size:10px}
.service-card a:hover{background:var(--teal);color:#fff}
.decor-ring{position:absolute;border:35px solid rgba(25,169,176,.12);border-radius:50%;width:170px;height:170px}
.ring-right{right:-110px;top:30%}
.ring-left{left:-110px;bottom:10%}
.about-section{overflow:hidden}
.about-content{padding:20px 0}
.section-kicker{color:var(--cyan);font-size:13px;font-weight:700}
.about-content h2{font-size:32px;font-weight:800;margin:12px 0 20px}
.about-content h2 span{color:var(--cyan)}
.about-content p{font-size:13px;line-height:2.25;color:#6a7a7c}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-dark);color:#fff}
.gallery-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:20px}
.gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:5px}
.gallery-corner{position:absolute;width:40px;height:40px;border:8px solid #0fa9af}
.gallery-corner.top{right:2px;top:2px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.gallery-corner.bottom{left:2px;bottom:2px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.social-band{padding:48px 0;background: linear-gradient(
    110deg,
    #2F9650 0%,
    #289FD9 52%,
    #3D54A4 100%
);color:#fff}
.social-band h3{font-size:19px;font-weight:800}
.social-band p{font-size:12px;line-height:2;color:#d6f2f2}
.social-icons{display:flex;gap:25px}
.social-icons a{width:46px;height:46px;border:1px solid rgba(255,255,255,.5);border-radius:10px;color:#fff;display:grid;place-items:center;font-size:21px;transition:.25s}
.social-icons a:hover{background:#fff;color:var(--teal)}
.accordion-item{border:0!important;border-radius:6px!important;margin-bottom:12px;overflow:hidden;box-shadow:0 5px 18px rgba(0,0,0,.06)}
.accordion-button{font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);background:#fff;padding:18px 20px}
.accordion-button:not(.collapsed){color:var(--teal);background:#f3fbfb;box-shadow:none}
.accordion-button:focus{box-shadow:none}
.accordion-body{font-size:11px;line-height:2;color:#738486}
.contact-strip{padding:20px 0 90px;background:#f8fcfc}
.contact-box{background:#dff5f5;border:1px solid #bfe2e2;border-radius:10px;min-height:78px;padding:8px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 12px 30px rgba(0,0,0,.05)}
.contact-info{display:flex;align-items:center;gap:12px}
.contact-icon{width:42px;height:42px;background:var(--orange);color:#fff;border-radius:50%;display:grid;place-items:center}
.contact-info small{display:block;font-size:9px;color:#607677}
.contact-info strong{font-size:13px;direction:ltr;display:block;margin-top:3px}
.contact-message{background:var(--teal-dark);color:#fff;border-radius:35px;padding:13px 25px;font-size:12px;flex:1;text-align:center}
.testimonials{background: linear-gradient(
    110deg,
    #2F9650 0%,
    #289FD9 52%,
    #3D54A4 100%
);padding:85px 0}
.testimonials .section-heading{margin-bottom:35px}
.carousel-item{min-height:170px;padding:10px 20%}
.quote{font-size:26px;color:#6bd0d1}
.carousel-item h4{font-size:15px}
.carousel-item p{font-size:11px;line-height:2;color:#d8eeee}
.carousel-control-prev,.carousel-control-next{width:8%;color:#fff}
.carousel-control-prev:hover,.carousel-control-next:hover{color:#fff}
.carousel-indicators button{width:7px;height:7px;border-radius:50%;border:0}
.blog-section{background:linear-gradient(180deg,#fff,#f6fbfb)}
.blog-card{background:#fff;border:1px solid #dbe8e8;border-radius:8px;overflow:hidden;height:100%;box-shadow:0 7px 22px rgba(3,70,72,.07);transition:.3s}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.blog-image{height:145px;background:linear-gradient(135deg,#e9f7f7,#d3eeee);display:grid;place-items:center;color:#6caeaf;font-size:44px}
.blog-body{padding:17px}
.blog-body small{color:var(--cyan);font-size:9px}
.blog-body h3{font-size:14px;line-height:1.8;margin:8px 0 18px}
.blog-body a{color:var(--orange);font-size:10px}
.footer{background: linear-gradient(
    110deg,   
    #3D54A4 100%
);color:#d5efef;border-radius:28px 28px 0 0;padding:0 0 0;margin:0}
.footer-social{width:150px;margin:-25px auto 0;background:#299bd6;color:#fff;border-radius:12px;padding:12px 15px;display:flex;justify-content:space-around;position:relative;z-index:2}
.footer-social a{color:#fff;font-size:18px}
.footer h5{font-size:13px;color:#fff;margin-bottom:18px}
.footer p,.footer a{font-size:10px;line-height:2.2;color:#bce0e0}
.footer a{display:block;margin-bottom:3px}
.footer-brand{font-size:14px;font-weight:800;color:#fff;margin-bottom:14px}
.footer-brand i{color:#70d8da}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding:16px 0;text-align:center;font-size:9px;color:#a6d2d3}
.floating-call{background-color:#263C59 !important; position:fixed;left:22px;bottom:22px;width:54px;height:54px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-size:21px;box-shadow:0 10px 25px rgba(0,0,0,.18);z-index:999}
.floating-call:hover{color:#fff;transform:scale(1.06)}
@media(max-width:991.98px){
  .site-nav{height:auto;min-height:72px}
  .navbar-collapse{padding:15px 0}
  .hero{min-height:auto}
  .min-vh-hero{min-height:auto;padding:30px 0 0}
  .hero-copy{padding:40px 0 20px;text-align:center}
  .hero-copy .d-flex{justify-content:center}
  .doctor-wrap{height:390px}
  .doctor-img{height:370px}
  .doctor-halo{width:280px;height:280px;bottom:15px}
  .floating-stats{margin-top:0;padding:0 0 30px;background:#075d60}
  .stats-card{width:100%;border-radius:0}
  .stats-card div{padding:15px 20px}
  .section{padding:75px 0}
  .contact-box{flex-wrap:wrap}
  .contact-message{order:3;flex-basis:100%}
}
@media(max-width:575.98px){
  .hero h1{font-size:29px}
  .hero p{font-size:12px}
  .stats-card strong{font-size:14px}
  .stats-card span{font-size:8px}
  .stats-card div{padding:14px 11px}
  .section-heading h2{font-size:24px}
  .service-card{padding:24px 17px}
  .about-content h2{font-size:25px}
  .social-band{text-align:center}
  .social-icons{justify-content:center}
  .contact-box{padding:12px}
  .contact-message{font-size:10px}
  .carousel-item{padding:10px 13%}
  .footer{border-radius:20px 20px 0 0}
}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.reveal.is-visible{opacity:1;transform:none}

/* Accounting hero visual */
.accounting-visual{align-items:center!important;height:570px}
.accounting-card{position:relative;z-index:3;width:360px;min-height:300px;border-radius:22px;background:rgba(255,255,255,.97);box-shadow:0 30px 70px rgba(0,0,0,.25);padding:25px;color:#174c4e;text-align:right;transform:rotate(-2deg)}
.accounting-card-head{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5eeee;padding-bottom:18px}
.accounting-card-head span{width:42px;height:42px;border-radius:12px;background:#e8f7f7;color:#08777a;display:grid;place-items:center;font-size:20px}
.accounting-card-head b{font-size:15px;flex:1}
.accounting-card-head>i{color:#8aa0a1}
.chart-bars{height:115px;display:flex;align-items:end;justify-content:center;gap:14px;padding:18px 5px}
.chart-bars i{display:block;width:26px;border-radius:7px 7px 2px 2px;background:#1aa5aa}
.chart-bars i:nth-child(1){height:35%}.chart-bars i:nth-child(2){height:52%}.chart-bars i:nth-child(3){height:43%}.chart-bars i:nth-child(4){height:78%}.chart-bars i:nth-child(5){height:61%}.chart-bars i:nth-child(6){height:92%}
.accounting-total{background:#f2fafa;border-radius:12px;padding:14px 16px}
.accounting-total small{display:block;color:#789091;font-size:9px}
.accounting-total strong{display:block;margin-top:5px;color:#08777a;font-size:16px}
.accounting-icon{position:absolute;z-index:4;width:65px;height:65px;border-radius:18px;background:#fff;color:#08777a;display:grid;place-items:center;font-size:25px;box-shadow:0 15px 30px rgba(0,0,0,.18);animation:float 4s ease-in-out infinite}
.icon-1{right:25px;top:120px}.icon-2{left:30px;top:180px;animation-delay:1s}.icon-3{right:60px;bottom:110px;animation-delay:2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(max-width:991.98px){
  .accounting-visual{height:390px!important}
  .accounting-card{width:300px;min-height:250px}
  .accounting-icon{width:52px;height:52px;font-size:20px}
}
   /* =========================================
           BLOG PAGE
        ========================================= */
/* =========================================================
   GLOBAL PAGES STYLE
   Blog / Article / Contact / Courses
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
    --primary-green: #2F9650;
    --primary-blue: #299bd6;
    --primary-cyan: #289FD9;
    --primary-purple: #3D54A4;

    --gradient-main:
        linear-gradient(
            110deg,
            #2F9650 0%,
            #289FD9 52%,
            #3D54A4 100%
        );

    --gradient-card:
        linear-gradient(
            135deg,
            #299bd6,
            #50BB6B
        );

    --text-dark: #1c3032;
    --text-main: #263d3f;
    --text-muted: #718183;
    --text-light: #91a2a3;

    --border: #dce8e8;
    --border-light: #edf2f2;

    --page-bg: #f5fbfb;

    --shadow-sm:
        0 8px 25px rgba(3, 70, 72, .05);

    --shadow-md:
        0 10px 30px rgba(3, 70, 72, .06);

    --shadow-lg:
        0 18px 40px rgba(3, 70, 72, .11);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
}


/* =========================================================
   GLOBAL
========================================================= */

.blog-page,
.article-page,
.contact-page,
.courses-page,
.course-details-page {
    background: var(--page-bg);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    transition: .25s ease;
}

button,
input,
textarea,
select {
    font-family: inherit;
}

button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

.text-gradient {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   COMMON HERO SHAPES
========================================================= */

.blog-hero,
.contact-hero,
.courses-hero,
.course-detail-hero,
.article-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--gradient-main);
}

.blog-hero::before,
.contact-hero::before,
.courses-hero::before,
.course-detail-hero::before,
.article-hero::before {
    content: "";
    position: absolute;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    border: 70px solid rgba(255, 255, 255, .07);

    right: -180px;
    top: -220px;

    pointer-events: none;
}

.blog-hero::after,
.contact-hero::after,
.courses-hero::after,
.article-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

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

    left: -140px;
    bottom: -190px;

    pointer-events: none;
}


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

/* Hero */

.blog-hero {
    min-height: 350px;

    display: flex;
    align-items: center;
}

.blog-hero-content {
    position: relative;
    z-index: 2;

    width: 100%;

    text-align: center;
}

.blog-hero-content .badge-title {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #d9ffff;

    font-size: 13px;
    font-weight: 600;

    margin-bottom: 15px;
}

.blog-hero-content h1 {
    font-size: clamp(32px, 5vw, 48px);

    font-weight: 800;

    line-height: 1.5;

    margin-bottom: 15px;
}

.blog-hero-content h1 span {
    color: #72e0d9;
}

.blog-hero-content p {
    max-width: 700px;

    margin: auto;

    color: #e2f7f7;

    font-size: 13px;
    line-height: 2.2;
}


/* Blog Section */

.blog-section {
    padding: 90px 0;
}


/* Toolbar */

.blog-toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;
}

.blog-toolbar-title h2 {
    font-size: 25px;
    font-weight: 800;

    margin: 0 0 5px;

    color: var(--text-dark);
}

.blog-toolbar-title p {
    margin: 0;

    color: var(--text-muted);

    font-size: 11px;
}


/* Search */

.blog-search {
    position: relative;

    width: 300px;
}

.blog-search i {
    position: absolute;

    right: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #8aa0a1;

    pointer-events: none;
}

.blog-search input {
    width: 100%;
    height: 46px;

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

    border-radius: 50px;

    padding: 8px 45px 8px 18px;

    font-family: inherit;
    font-size: 11px;

    outline: none;

    background: #fff;

    transition: .2s;
}

.blog-search input:focus {
    border-color: #29a7ae;

    box-shadow:
        0 0 0 3px rgba(41, 167, 174, .08);
}


/* =========================================================
   BLOG ARTICLE CARD
========================================================= */

.article-card {
    height: 100%;

    overflow: hidden;

    background: #fff;

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

    border-radius: 18px;

    box-shadow: var(--shadow-sm);

    transition: .3s ease;
}

.article-card:hover {
    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);
}


/* Image */

.article-image {
    height: 205px;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: var(--gradient-card);
}

.article-image::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    border: 35px solid rgba(255, 255, 255, .08);

    right: -50px;
    top: -70px;
}

.article-image::after {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

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

    left: -40px;
    bottom: -60px;
}

.article-image i {
    position: relative;

    z-index: 2;

    font-size: 70px;

    color: rgba(255, 255, 255, .95);
}


/* مهم:
   قبلاً article-category با صفحه Article تداخل داشت.
   اینجا selector مخصوص کارت Blog ساخته شده.
*/

.article-card .article-category {
    position: absolute;

    z-index: 3;

    right: 15px;
    top: 15px;

    padding: 6px 13px;

    border-radius: 50px;

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

    color: #278c8d;

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


/* Body */

.article-card .article-body {
    padding: 24px;
}

.article-date {
    display: flex;
    align-items: center;

    gap: 6px;

    color: var(--text-light);

    font-size: 9px;

    margin-bottom: 10px;
}

.article-card .article-body h3 {
    font-size: 17px;

    font-weight: 800;

    line-height: 1.8;

    margin-bottom: 10px;
}

.article-card .article-body h3 a {
    color: #182b2d;

    text-decoration: none;
}

.article-card .article-body h3 a:hover {
    color: var(--primary-blue);
}

.article-card .article-body p {
    color: var(--text-muted);

    font-size: 11px;

    line-height: 2.1;

    margin-bottom: 18px;
}

.article-read-more {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: var(--primary-blue);

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

    text-decoration: none;

    transition: .2s;
}

.article-read-more:hover {
    color: var(--primary-green);

    gap: 10px;
}


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

.featured-article {
    margin-bottom: 45px;

    overflow: hidden;

    border-radius: 20px;

    background: #fff;

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

    box-shadow: var(--shadow-md);
}

.featured-image {
    min-height: 330px;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #3D54A4,
            #289FD9,
            #2F9650
        );
}

.featured-image::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    border: 45px solid rgba(255,255,255,.07);

    right: -80px;
    top: -110px;
}

.featured-image::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    border-radius: 50%;

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

    left: -70px;
    bottom: -90px;
}

.featured-image i {
    font-size: 110px;

    color: rgba(255,255,255,.9);

    position: relative;
    z-index: 2;
}

.featured-content {
    padding: 40px;
}

.featured-label {
    display: inline-block;

    padding: 6px 13px;

    border-radius: 50px;

    background: #dff5f5;

    color: #258c8d;

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

    margin-bottom: 15px;
}

.featured-content h2 {
    font-size: 27px;

    font-weight: 800;

    line-height: 1.7;

    margin-bottom: 15px;

    color: var(--text-dark);
}

.featured-content p {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 2.3;

    margin-bottom: 20px;
}

.featured-btn {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 22px;

    border-radius: 50px;

    background: var(--gradient-card);

    color: #fff;

    text-decoration: none;

    font-size: 11px;
    font-weight: 600;

    transition: .3s;
}

.featured-btn:hover {
    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(41,155,214,.2);
}


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

.blog-pagination {
    margin-top: 50px;
}

.blog-pagination .page-link {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

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

    color: #506567;

    font-size: 11px;

    margin: 0 3px;

    border-radius: 10px !important;

    transition: .2s;
}

.blog-pagination .page-link:hover,
.blog-pagination .active .page-link {
    background: var(--primary-blue);

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

    color: #fff;
}


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

.blog-cta {
    padding: 70px 0;

    background: #fff;
}

.blog-cta-box {
    position: relative;

    overflow: hidden;

    padding: 40px;

    border-radius: 20px;

    color: #fff;

    background: var(--gradient-main);

    box-shadow:
        0 20px 45px rgba(61,84,164,.15);
}

.blog-cta-box h3 {
    font-size: 22px;

    font-weight: 800;

    margin-bottom: 10px;
}

.blog-cta-box p {
    color: #e4f8f8;

    font-size: 12px;

    line-height: 2;

    margin: 0;
}


/* =========================================================
   ARTICLE PAGE
========================================================= */

.article-hero {
    padding: 75px 0 85px;
}

.article-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: auto;

    text-align: center;
}


/* این selector فقط Hero مقاله را هدف می‌گیرد */

.article-hero .article-category {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 15px;

    border-radius: 50px;

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

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

    color: #fff;

    font-size: 10px;
    font-weight: 600;

    margin-bottom: 18px;
}

.article-hero h1 {
    font-size: clamp(28px, 4vw, 44px);

    font-weight: 800;

    line-height: 1.8;

    margin-bottom: 18px;
}

.article-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 20px;

    color: #e0f7f7;

    font-size: 10px;
}

.article-meta span {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}


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

.article-section {
    padding: 75px 0;
}

.article-layout {
    max-width: 1150px;

    margin: auto;
}

.article-content-card {
    background: #fff;

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

    border-radius: 20px;

    overflow: hidden;

    box-shadow: var(--shadow-md);
}


/* Cover */

.article-cover {
    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    overflow: hidden;

    background: var(--gradient-card);
}

.article-cover::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    border: 50px solid rgba(255,255,255,.08);

    right: -80px;
    top: -110px;
}

.article-cover::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

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

    left: -80px;
    bottom: -110px;
}

.article-cover i {
    position: relative;

    z-index: 2;

    font-size: 115px;

    color: rgba(255,255,255,.95);
}


/* Article Body */

.article-content-card .article-body {
    padding: 45px;
}

.article-intro {
    padding: 20px 22px;

    margin-bottom: 30px;

    border-right: 4px solid var(--primary-blue);

    border-radius: 8px;

    background: #f1f9f9;

    color: #526b6d;

    font-size: 13px;

    font-weight: 500;

    line-height: 2.4;
}

.article-content-card .article-body h2 {
    font-size: 23px;

    font-weight: 800;

    color: #1c3032;

    margin-top: 35px;
    margin-bottom: 15px;
}

.article-content-card .article-body h3 {
    font-size: 18px;

    font-weight: 800;

    color: #263d3f;

    margin-top: 30px;
    margin-bottom: 12px;
}

.article-content-card .article-body p {
    color: #657879;

    font-size: 12px;

    line-height: 2.5;

    margin-bottom: 18px;
}

.article-content-card .article-body ul {
    padding-right: 22px;

    margin: 20px 0 25px;
}

.article-content-card .article-body li {
    color: #657879;

    font-size: 12px;

    line-height: 2.5;

    margin-bottom: 5px;
}

.article-content-card .article-body li::marker {
    color: var(--primary-blue);
}


/* =========================================================
   ARTICLE INFO BOX
========================================================= */

.article-info-box {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 20px;

    margin: 30px 0;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #eaf8f7,
            #edf7fc
        );

    border: 1px solid #d6eaea;
}

.article-info-box i {
    flex: 0 0 auto;

    font-size: 25px;

    color: var(--primary-blue);
}

.article-info-box p {
    margin: 0;

    font-size: 11px;

    line-height: 2.2;
}


/* =========================================================
   SHARE
========================================================= */

.article-share {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    padding-top: 30px;

    margin-top: 35px;

    border-top: 1px solid #e7eeee;
}

.article-share span {
    font-size: 11px;

    font-weight: 700;

    color: #526667;

    margin-left: 5px;
}

.share-btn {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 50%;

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

    color: #547071;

    background: #fff;

    text-decoration: none;

    transition: .25s;
}

.share-btn:hover {
    color: #fff;

    background: var(--primary-blue);

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

    transform: translateY(-2px);
}


/* =========================================================
   ARTICLE SIDEBAR
========================================================= */

.article-sidebar-card {
    background: #fff;

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

    border-radius: 18px;

    padding: 25px;

    margin-bottom: 20px;

    box-shadow: var(--shadow-sm);
}

.article-sidebar-card h4 {
    font-size: 15px;

    font-weight: 800;

    margin-bottom: 20px;

    padding-bottom: 12px;

    border-bottom: 1px solid #e8eeee;
}


/* Recent */

.recent-article {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 0;

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

.recent-article:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}

.recent-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #fff;

    background: var(--gradient-card);
}

.recent-article a {
    color: #273d3f;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.8;
}

.recent-article a:hover {
    color: var(--primary-blue);
}

.recent-article small {
    display: block;

    color: #93a3a4;

    font-size: 8px;

    margin-top: 3px;
}


/* Categories */

.article-category-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 11px 0;

    color: #667a7b;

    font-size: 11px;

    text-decoration: none;

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

.article-category-link:last-child {
    border-bottom: 0;
}

.article-category-link:hover {
    color: var(--primary-blue);
}

.article-category-link span {
    min-width: 25px;
    height: 23px;

    display: grid;
    place-items: center;

    border-radius: 50px;

    background: #edf8f8;

    color: #278f90;

    font-size: 8px;
}


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

.article-cta {
    margin-top: 30px;

    padding: 28px;

    border-radius: 18px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #2F9650,
            #289FD9,
            #3D54A4
        );
}

.article-cta h4 {
    font-size: 16px;

    font-weight: 800;

    margin-bottom: 8px;
}

.article-cta p {
    color: #e5f8f8;

    font-size: 10px;

    line-height: 2;

    margin-bottom: 18px;
}


/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-hero {
    min-height: 330px;

    display: flex;
    align-items: center;
}

.contact-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;

    text-align: center;
}

.contact-hero-content .badge-title {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #d9ffff;

    font-size: 13px;
    font-weight: 600;

    margin-bottom: 15px;
}

.contact-hero-content h1 {
    font-size: clamp(32px, 5vw, 48px);

    font-weight: 800;

    line-height: 1.5;

    margin-bottom: 15px;
}

.contact-hero-content h1 span {
    color: #72e0d9;
}

.contact-hero-content p {
    max-width: 650px;

    margin: auto;

    color: #e2f7f7;

    font-size: 13px;

    line-height: 2.2;
}


/* Contact Section */

.contact-section {
    padding: 90px 0;
}


/* Contact Info */

.contact-info-card {
    height: 100%;

    background: #fff;

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

    border-radius: 18px;

    padding: 32px;

    box-shadow: var(--shadow-sm);
}

.contact-info-card h2 {
    font-size: 24px;

    font-weight: 800;

    margin-bottom: 12px;
}

.contact-info-card > p {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 2.2;

    margin-bottom: 30px;
}

.contact-item {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px 0;

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

.contact-item:last-child {
    border-bottom: 0;
}

.contact-item-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    color: #fff;

    font-size: 21px;

    background: var(--gradient-card);
}

.contact-item h4 {
    font-size: 14px;

    font-weight: 800;

    margin: 0 0 5px;
}

.contact-item p,
.contact-item a {
    color: var(--text-muted);

    font-size: 11px;

    text-decoration: none;

    margin: 0;

    line-height: 1.9;
}

.contact-item a:hover {
    color: var(--primary-blue);
}


/* Contact Form */

.contact-form-card {
    background: #fff;

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

    border-radius: 18px;

    padding: 35px;

    box-shadow: var(--shadow-sm);
}

.contact-form-card h2 {
    font-size: 24px;

    font-weight: 800;

    margin-bottom: 8px;
}

.contact-form-card > p {
    color: var(--text-muted);

    font-size: 12px;

    line-height: 2;

    margin-bottom: 28px;
}

.contact-form-card .form-label {
    font-size: 12px;

    font-weight: 600;

    margin-bottom: 7px;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    border: 1px solid #dbe7e7;

    border-radius: 11px;

    min-height: 48px;

    font-family: inherit;

    font-size: 12px;

    padding: 10px 14px;

    box-shadow: none;

    transition: .2s;
}

.contact-form-card textarea.form-control {
    min-height: 145px;

    resize: vertical;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
    border-color: #29a7ae;

    box-shadow:
        0 0 0 3px rgba(41,167,174,.10);
}

.contact-submit {
    min-height: 50px;

    padding: 10px 28px;

    border: 0;

    border-radius: 50px;

    font-family: inherit;

    font-size: 12px;
    font-weight: 600;

    color: #fff;

    background: var(--gradient-card);

    transition: .3s;
}

.contact-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(41,155,214,.20);

    color: #fff;
}


/* Map */

.contact-map {
    margin-top: 30px;

    min-height: 210px;

    border-radius: 16px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e2f5f4,
            #dcebf5
        );

    border: 1px solid #cfe2e2;

    display: flex;

    align-items: center;
    justify-content: center;

    text-align: center;

    color: #557576;
}

.contact-map i {
    display: block;

    font-size: 48px;

    color: var(--primary-blue);

    margin-bottom: 10px;
}

.contact-map span {
    display: block;

    font-size: 12px;
}


/* Contact CTA */

.contact-cta {
    padding: 70px 0;

    background: #fff;
}

.contact-cta-box {
    position: relative;

    overflow: hidden;

    padding: 40px;

    border-radius: 20px;

    color: #fff;

    background: var(--gradient-main);

    box-shadow:
        0 20px 45px rgba(61,84,164,.15);
}

.contact-cta-box h3 {
    font-size: 22px;

    font-weight: 800;

    margin-bottom: 10px;
}

.contact-cta-box p {
    margin: 0;

    color: #e4f8f8;

    font-size: 12px;

    line-height: 2;
}


/* =========================================================
   COURSES PAGE
========================================================= */

.courses-hero {
    padding: 80px 0;
}

.courses-hero-content {
    position: relative;

    z-index: 2;

    max-width: 760px;

    margin: auto;

    text-align: center;
}

.courses-hero-icon {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    margin: 0 auto 18px;

    border-radius: 18px;

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

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

.courses-hero-icon i {
    font-size: 30px;
}

.courses-hero h1 {
    font-size: clamp(30px, 5vw, 45px);

    font-weight: 800;

    margin-bottom: 15px;
}

.courses-hero h1 span {
    color: #73e1d9;
}

.courses-hero p {
    color: #e4f7f7;

    font-size: 12px;

    line-height: 2.3;

    margin: 0;
}


/* Courses Section */

.courses-section {
    padding: 80px 0;
}

.courses-heading {
    margin-bottom: 35px;
}

.courses-heading h2 {
    font-size: 25px;

    font-weight: 800;

    color: var(--text-dark);
}

.courses-heading p {
    color: #7a8b8c;

    font-size: 11px;
}


/* Filter */

.course-filter {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 35px;
}

.course-filter a {
    padding: 9px 18px;

    border-radius: 50px;

    background: #fff;

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

    color: #607374;

    font-size: 10px;

    text-decoration: none;

    transition: .25s;
}

.course-filter a:hover,
.course-filter a.active {
    color: #fff;

    background: var(--primary-blue);

    border-color: var(--primary-blue);
}


/* Course Card */

.course-card {
    height: 100%;

    overflow: hidden;

    background: #fff;

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

    border-radius: 20px;

    box-shadow: var(--shadow-sm);

    transition: .3s ease;
}

.course-card:hover {
    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);
}

.course-image {
    height: 210px;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;

    color: #fff;

    background: var(--gradient-card);
}

.course-image::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    border: 40px solid rgba(255,255,255,.07);

    right: -90px;
    top: -110px;
}

.course-image::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    border-radius: 50%;

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

    left: -55px;
    bottom: -80px;
}

.course-image i {
    position: relative;

    z-index: 2;

    font-size: 72px;
}

.course-status {
    position: absolute;

    z-index: 3;

    right: 15px;
    top: 15px;

    padding: 6px 13px;

    border-radius: 50px;

    background: #fff;

    color: #268d8e;

    font-size: 9px;

    font-weight: 700;
}

.course-body {
    padding: 25px;
}

.course-category {
    color: var(--primary-blue);

    font-size: 9px;

    font-weight: 700;

    margin-bottom: 8px;
}

.course-body h3 {
    font-size: 17px;

    font-weight: 800;

    line-height: 1.8;

    margin-bottom: 10px;
}

.course-body h3 a {
    color: #1d3032;

    text-decoration: none;
}

.course-body h3 a:hover {
    color: var(--primary-blue);
}

.course-body p {
    color: #748384;

    font-size: 10px;

    line-height: 2.1;

    margin-bottom: 18px;
}

.course-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    padding-bottom: 17px;

    margin-bottom: 17px;

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

.course-meta span {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #819192;

    font-size: 9px;
}

.course-meta i {
    color: var(--primary-blue);
}

.course-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.course-price {
    color: #258c8d;

    font-size: 14px;

    font-weight: 800;
}

.course-price small {
    color: #91a0a1;

    font-size: 8px;

    font-weight: 400;
}

.course-btn {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 9px 17px;

    border-radius: 50px;

    color: #fff;

    background: var(--gradient-card);

    text-decoration: none;

    font-size: 9px;

    transition: .25s;
}

.course-btn:hover {
    color: #fff;

    transform: translateY(-2px);
}


/* Courses CTA */

.courses-cta {
    margin-top: 70px;

    padding: 45px;

    border-radius: 22px;

    color: #fff;

    background: var(--gradient-main);
}

.courses-cta h3 {
    font-size: 22px;

    font-weight: 800;
}

.courses-cta p {
    color: #e3f7f7;

    font-size: 11px;

    line-height: 2;
}


/* =========================================================
   COURSE DETAIL PAGE
========================================================= */

.course-detail-hero {
    padding: 65px 0;
}

.course-detail-content {
    position: relative;

    z-index: 2;
}

.course-detail-category {
    display: inline-block;

    padding: 7px 15px;

    border-radius: 50px;

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

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

    font-size: 9px;

    margin-bottom: 15px;
}

.course-detail-content h1 {
    font-size: clamp(28px,4vw,42px);

    font-weight: 800;

    line-height: 1.7;

    margin-bottom: 15px;
}

.course-detail-content > p {
    max-width: 700px;

    color: #e4f8f8;

    font-size: 12px;

    line-height: 2.3;
}

.detail-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 25px;
}

.detail-meta span {
    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 9px;

    color: #e4f8f8;
}


/* Detail Section */

.course-detail-section {
    padding: 70px 0;
}

.detail-card {
    background: #fff;

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

    border-radius: 20px;

    padding: 35px;

    margin-bottom: 25px;

    box-shadow: var(--shadow-sm);
}

.detail-card h2 {
    font-size: 21px;

    font-weight: 800;

    color: #1d3032;

    margin-bottom: 20px;
}

.detail-card h3 {
    font-size: 16px;

    font-weight: 800;

    margin-top: 25px;
}

.detail-card p {
    color: #6c7e7f;

    font-size: 11px;

    line-height: 2.5;
}


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

.course-video {
    height: 330px;

    position: relative;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 18px;

    color: #fff;

    background: var(--gradient-card);

    margin-bottom: 30px;
}

.course-video::before {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    border: 45px solid rgba(255,255,255,.07);

    right: -100px;
    top: -130px;
}

.play-button {
    position: relative;

    z-index: 2;

    width: 75px;
    height: 75px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: var(--primary-blue);

    background: #fff;

    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

    cursor: pointer;

    transition: .25s;
}

.play-button:hover {
    transform: scale(1.06);
}

.play-button i {
    font-size: 28px;

    margin-right: 3px;
}


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

.feature-item {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
}

.feature-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: grid;

    place-items: center;

    border-radius: 11px;

    color: var(--primary-blue);

    background: #edf8f8;
}

.feature-item span {
    color: #5e7172;

    font-size: 10px;
}


/* =========================================================
   CURRICULUM
========================================================= */

.lesson {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 17px 0;

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

.lesson:last-child {
    border-bottom: 0;
}

.lesson-info {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}

.lesson-number {
    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: var(--primary-blue);

    background: #edf8f8;

    font-size: 10px;

    font-weight: 700;
}

.lesson-title {
    color: #405455;

    font-size: 11px;

    font-weight: 600;
}

.lesson-time {
    color: #91a0a1;

    font-size: 9px;

    white-space: nowrap;
}


/* =========================================================
   ENROLL SIDEBAR
========================================================= */

.enroll-card {
    position: sticky;

    top: 100px;

    overflow: hidden;

    background: #fff;

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

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(3,70,72,.08);
}

.enroll-image {
    height: 190px;

    display: grid;

    place-items: center;

    color: #fff;

    background: var(--gradient-card);
}

.enroll-image i {
    font-size: 75px;
}

.enroll-body {
    padding: 25px;
}

.enroll-price-label {
    color: #89999a;

    font-size: 9px;
}

.enroll-price {
    color: #248b8c;

    font-size: 25px;

    font-weight: 800;

    margin-bottom: 20px;
}

.enroll-price small {
    font-size: 10px;

    font-weight: 400;
}

.enroll-btn {
    width: 100%;

    padding: 12px;

    border: 0;

    border-radius: 50px;

    color: #fff;

    background: var(--gradient-card);

    font-family: inherit;

    font-size: 11px;

    font-weight: 700;

    cursor: pointer;

    transition: .25s;
}

.enroll-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(41,155,214,.18);
}

.enroll-info {
    margin-top: 20px;
}

.enroll-info div {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 11px 0;

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

.enroll-info span {
    color: #718182;

    font-size: 9px;
}

.enroll-info strong {
    color: #394f50;

    font-size: 9px;
}


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

.teacher {
    display: flex;

    align-items: center;

    gap: 15px;
}

.teacher-avatar {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #fff;

    background: var(--gradient-card);
}

.teacher-avatar i {
    font-size: 28px;
}

.teacher h4 {
    font-size: 13px;

    font-weight: 800;

    margin-bottom: 5px;
}

.teacher span {
    color: #8b9b9c;

    font-size: 9px;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 991px) {

    .blog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .blog-search {
        width: 100%;
    }

    .featured-image {
        min-height: 260px;
    }

    .featured-content {
        padding: 30px;
    }

    .contact-hero {
        min-height: 300px;

        padding: 70px 0;
    }

    .contact-section {
        padding: 65px 0;
    }

    .contact-info-card {
        margin-bottom: 25px;
    }

    .article-sidebar {
        margin-top: 25px;
    }

    .enroll-card {
        position: static;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 575px) {

    /* Global */

    .blog-hero {
        min-height: 300px;

        padding: 70px 0;
    }

    .blog-hero-content h1 {
        font-size: 30px;
    }

    .blog-section {
        padding: 60px 0;
    }


    /* Blog */

    .featured-content h2 {
        font-size: 22px;
    }

    .featured-content {
        padding: 25px;
    }

    .featured-image {
        min-height: 220px;
    }

    .featured-image i {
        font-size: 80px;
    }


    /* Article */

    .article-hero {
        padding: 60px 0;
    }

    .article-hero h1 {
        font-size: 27px;
    }

    .article-body,
    .article-content-card .article-body {
        padding: 25px;
    }

    .article-cover {
        min-height: 240px;
    }

    .article-cover i {
        font-size: 80px;
    }

    .article-meta {
        gap: 10px;
    }

    .article-info-box {
        gap: 10px;
        padding: 16px;
    }


    /* Contact */

    .contact-hero-content h1 {
        font-size: 30px;
    }

    .contact-form-card,
    .contact-info-card {
        padding: 25px;
    }

    .contact-cta-box {
        padding: 28px;

        text-align: center;
    }

    .contact-item-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;

        font-size: 18px;
    }


    /* Courses */

    .courses-hero {
        padding: 60px 0;
    }

    .courses-section {
        padding: 55px 0;
    }

    .courses-cta {
        padding: 30px 22px;
    }

    .course-image {
        height: 190px;
    }

    .course-bottom {
        align-items: flex-start;
    }


    /* Course Detail */

    .detail-card {
        padding: 25px;
    }

    .course-video {
        height: 240px;
    }

    .lesson {
        align-items: flex-start;
    }

    .lesson-time {
        padding-top: 8px;
    }

}


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

@media (max-width: 400px) {

    .article-content-card .article-body {
        padding: 20px;
    }

    .detail-card {
        padding: 20px;
    }

    .contact-form-card,
    .contact-info-card {
        padding: 20px;
    }

    .course-body {
        padding: 20px;
    }

    .featured-content {
        padding: 20px;
    }

    .blog-cta-box,
    .contact-cta-box,
    .courses-cta {
        padding: 25px 18px;
    }

}
     
/* پایام کد های مقالات */
 
        .about-page-hero {
            position: relative;
            min-height: 430px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: #fff;

            background: linear-gradient(
                110deg,
                #2F9650 0%,
                #289FD9 52%,
                #3D54A4 100%
            );
        }

        .about-page-hero::before {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            border: 70px solid rgba(255,255,255,.07);
            right: -160px;
            top: -160px;
        }

        .about-page-hero::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: rgba(255,255,255,.05);
            left: -120px;
            bottom: -150px;
        }

        .about-hero-content {
            position: relative;
            z-index: 2;
        }

        .about-hero-content .badge-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #d9ffff;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 15px;
        }

        .about-hero-content h1 {
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 800;
            line-height: 1.5;
            margin-bottom: 18px;
        }

        .about-hero-content h1 span {
            color: #72e0d9;
        }

        .about-hero-content p {
            max-width: 650px;
            color: #e2f7f7;
            line-height: 2.2;
            font-size: 14px;
        }

        .about-hero-icon {
            position: relative;
            z-index: 2;
            width: 250px;
            height: 250px;
            margin: auto;
            border-radius: 50%;
            display: grid;
            place-items: center;

            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.25);
            box-shadow: 0 25px 70px rgba(0,0,0,.15);

            backdrop-filter: blur(8px);
        }

        .about-hero-icon i {
            font-size: 100px;
            color: #fff;
        }

        .about-content-section {
            padding: 100px 0;
            background: #fff;
        }

        .about-text h2 {
            font-size: 31px;
            font-weight: 800;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .about-text h2 span {
            color: var(--cyan);
        }

        .about-text p {
            color: #68797b;
            font-size: 13px;
            line-height: 2.4;
            margin-bottom: 15px;
        }

        .about-image-box {
            position: relative;
            padding: 20px;
        }

        .about-image-main {
            min-height: 390px;
            border-radius: 20px;

            background:
                linear-gradient(
                    135deg,
                    rgba(47,150,80,.92),
                    rgba(40,159,217,.88),
                    rgba(61,84,164,.95)
                );

            display: flex;
            align-items: center;
            justify-content: center;

            box-shadow: 0 25px 55px rgba(61,84,164,.16);
            overflow: hidden;
        }

        .about-image-main i {
            font-size: 125px;
            color: rgba(255,255,255,.95);
        }

        .about-image-decoration {
            position: absolute;
            width: 75px;
            height: 75px;
            border: 12px solid #29a7ae;
            border-radius: 10px;
        }

        .about-image-decoration.top {
            right: 0;
            top: 0;
            border-left: 0;
            border-bottom: 0;
        }

        .about-image-decoration.bottom {
            left: 0;
            bottom: 0;
            border-right: 0;
            border-top: 0;
        }

        .values-section {
            padding: 90px 0;
            background: linear-gradient(180deg,#fff,#f5fbfb);
        }

        .value-card {
            height: 100%;
            background: #fff;
            border: 1px solid #dce8e8;
            border-radius: 14px;
            padding: 32px 24px;
            text-align: center;

            box-shadow: 0 8px 25px rgba(3,70,72,.06);
            transition: .3s;
        }

        .value-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow);
        }

        .value-icon {
            width: 65px;
            height: 65px;
            margin: 0 auto 20px;

            border-radius: 18px;

            display: grid;
            place-items: center;

            background: linear-gradient(
                135deg,
                #299bd6,
                #50BB6B
            );

            color: #fff;
            font-size: 27px;
        }

        .value-card h3 {
            font-size: 17px;
            font-weight: 800;
            margin-bottom: 13px;
        }

        .value-card p {
            font-size: 11px;
            line-height: 2.1;
            color: #718183;
            margin-bottom: 0;
        }

        .mission-section {
            padding: 90px 0;
            background: linear-gradient(
                110deg,
                #2F9650 0%,
                #289FD9 52%,
                #3D54A4 100%
            );
            color: #fff;
        }

        .mission-box {
            padding: 35px;
            border-radius: 18px;
            background: rgba(255,255,255,.09);
            border: 1px solid rgba(255,255,255,.16);
            backdrop-filter: blur(8px);
        }

        .mission-box i {
            font-size: 45px;
            color: #72e0d9;
        }

        .mission-box h3 {
            font-size: 22px;
            font-weight: 800;
            margin: 18px 0;
        }

        .mission-box p {
            font-size: 13px;
            line-height: 2.4;
            color: #e1f6f6;
        }

        .about-stats {
            padding: 55px 0;
            background: #fff;
        }

        .about-stat {
            text-align: center;
            padding: 20px;
        }

        .about-stat strong {
            display: block;
            font-size: 30px;
            font-weight: 800;
            color: var(--cyan);
        }

        .about-stat span {
            display: block;
            margin-top: 7px;
            color: #738486;
            font-size: 11px;
        }

        .about-contact {
            padding: 75px 0;
            background: #f5fbfb;
        }

        .about-contact-box {
            padding: 35px;
            border-radius: 18px;
            background: #dff5f5;
            border: 1px solid #bfe2e2;

            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
        }

        .about-contact-box h3 {
            font-size: 21px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .about-contact-box p {
            margin: 0;
            color: #607677;
            font-size: 12px;
        }

        @media(max-width: 991px) {

            .about-page-hero {
                min-height: auto;
                padding: 80px 0;
                text-align: center;
            }

            .about-hero-content p {
                margin-left: auto;
                margin-right: auto;
            }

            .about-hero-icon {
                width: 190px;
                height: 190px;
                margin-top: 40px;
            }

            .about-hero-icon i {
                font-size: 75px;
            }

            .about-content-section {
                padding: 70px 0;
            }

            .about-image-box {
                margin-top: 30px;
            }

            .about-contact-box {
                flex-direction: column;
                text-align: center;
            }
        }

        @media(max-width: 575px) {

            .about-hero-content h1 {
                font-size: 30px;
            }

            .about-text h2 {
                font-size: 25px;
            }

            .about-image-main {
                min-height: 280px;
            }

            .about-image-main i {
                font-size: 90px;
            }

            .mission-box {
                padding: 25px;
            }

            .about-stat strong {
                font-size: 24px;
            }
        }