/* ====================================================
   CSS VARIABLES
   ==================================================== */
:root {
    --color-primary:       #0C127A;
    --color-primary-light: #1A2AFF;
    --color-secondary:     #ED1C24;
    --color-white:         #ffffff;
    --color-black:         #000000;
    --color-text:          #41464b;
    --color-text-light:    #64707b;
    --color-border:        #e0e0e0;
    --color-bg-light:      #f0f0f0;
    --color-bg-lighter:    #f9f9f9;

    --font-body:    "Dana", sans-serif;
    --font-heading: "Modam", sans-serif;

    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* مقیاس تایپوگرافی — استانداردتر و نزدیک‌تر به سایز خوانش راحت در مقاله */
    --fs-xs:   0.75rem;    /* 12px */
    --fs-sm:   0.8125rem;  /* 13px */
    --fs-base: 0.9375rem;  /* 15px — سایز پایه پاراگراف، استانداردتر از 16px برای متن فارسی فشرده */
    --fs-md:   1.0625rem;  /* 17px */
    --fs-lg:   1.1875rem;  /* 19px */
    --fs-xl:   1.375rem;   /* 22px */
    --fs-2xl:  1.625rem;   /* 26px */
    --fs-3xl:  1.875rem;   /* 30px */
    --fs-4xl:  2.375rem;   /* 38px */
    --fs-hero: clamp(1.75rem, 3.2vw, 2.375rem);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;

    --shadow-sm: 0 0.125rem 0.5rem rgba(0,0,0,.08);
    --shadow-md: 0 0.25rem 1rem rgba(0,0,0,.12);
    --shadow-lg: 0 0.5rem 2rem rgba(0,0,0,.18);

    --transition-fast:   .2s ease;
    --transition-normal: .3s ease;
    --transition-slow:   .5s ease;
}

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

/* ── body ────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: var(--fs-base);        /* 15px — خواناتر و فشرده‌تر برای متن فارسی */
    font-weight: var(--fw-normal);
    line-height: 1.75;
    color: var(--color-text-light);
}

/* ── پاراگراف ────────────────────────────────────── */
p {
    font-size: var(--fs-base);        /* 15px */
    font-weight: var(--fw-normal);
    line-height: 1.85;
    color: var(--color-text-light);
    text-align: justify;
    margin-bottom: 1rem;
}

/* ── لینک ────────────────────────────────────────── */
a {
    color: var(--color-primary);
    transition: var(--transition-normal);
}

/* =====================================================
   تیترها — دسکتاپ (پیش‌فرض)
   ===================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text);
    line-height: 1.35;
    margin-bottom: 0.875rem;
}

h1 {
    font-size: clamp(1.5rem, 3.6vw, 2.375rem);    /* 24px → 38px */
    font-weight: var(--fw-bold);
    margin-bottom: 1.25rem;
    line-height: 1.3;
}

h2 {
    font-size: clamp(1.25rem, 2.8vw, 1.75rem);    /* 20px → 28px */
    font-weight: var(--fw-bold);
    margin-bottom: 1rem;
    line-height: 1.35;
}

h3 {
    font-size: clamp(1.0625rem, 2.2vw, 1.4375rem); /* 17px → 23px */
    font-weight: var(--fw-semibold);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

h4 {
    font-size: clamp(0.9375rem, 1.8vw, 1.1875rem); /* 15px → 19px */
    font-weight: var(--fw-semibold);
    margin-bottom: 0.625rem;
    line-height: 1.45;
}

h5 {
    font-size: clamp(0.875rem, 1.4vw, 1.0625rem);  /* 14px → 17px */
    font-weight: var(--fw-semibold);
    margin-bottom: 0.625rem;
    line-height: 1.5;
}

h6 {
    font-family: var(--font-body);
    font-size: clamp(0.8125rem, 1.1vw, 0.9375rem); /* 13px → 15px */
    font-weight: var(--fw-medium);
    margin-bottom: 0.625rem;
    line-height: 1.5;
}

/* =====================================================
   موبایل — کاهش بیشتر برای صفحات باریک
   ===================================================== */
@media (max-width: 480px) {
    body, p { font-size: 0.875rem; }   /* 14px روی موبایل خیلی کوچیک */
    h1 { font-size: 1.375rem; }        /* 22px */
    h2 { font-size: 1.1875rem; }       /* 19px */
    h3 { font-size: 1.0625rem; }       /* 17px */
    h4 { font-size: 0.9375rem; }       /* 15px */
    h5, h6 { font-size: 0.875rem; }    /* 14px */
}
/* =====================================================
   تبلت  ≤ 991px
   ===================================================== */
@media (max-width: 991px) {
    h1 { line-height: 1.3; margin-bottom: 1.25rem; }
    h2 { margin-bottom: 1rem; }
    p  { line-height: 1.85; }
}

/* =====================================================
   موبایل  ≤ 575px
   ===================================================== */
@media (max-width: 575px) {
    body { line-height: 1.75; }
    p    { line-height: 1.8; text-align: right; } /* justify روی موبایل ناخوانا می‌شه */

    h1 { line-height: 1.35; margin-bottom: 1rem; }
    h2 { line-height: 1.35; margin-bottom: 0.875rem; }
    h3 { margin-bottom: 0.75rem; }
    h4, h5, h6 { margin-bottom: 0.625rem; }
}

/* ====================================================
   BUTTON
   ==================================================== */
.btn-general {
    background-color: transparent;
    text-align: center;
    border-width: 1px;
    border-radius: 0;
    font-size: var(--fs-base);
    padding: 0.625rem 0.9375rem;
    font-weight: var(--fw-normal);
    text-transform: uppercase;
}

.btn-white {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-white:hover,
.btn-white:focus {
    background-color: transparent;
    color: var(--color-primary);
    cursor: pointer;
}

.btn-green { border-color: var(--color-primary); color: var(--color-primary); }
.btn-green:hover,
.btn-green:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
}

/* ====================================================
   COLOR UTILITIES
   ==================================================== */
.cl-white    { color: var(--color-white); }
.cl-atlantis { color: var(--color-white); }
.cl-sub-title { color: var(--color-white); }
.bg-white      { background: var(--color-white); }
.bg-atlantis   { background: var(--color-primary); }
.bg-gray       { background: var(--color-bg-light); }
.bg-light-gray { background: var(--color-bg-lighter); }
.bg-starship   { background: #cdd613; }
.bg-matisse    { background: #0b385d; }
.bg-chathams   { background: #0aa1b9; }
.bg-gradiant {
    background: linear-gradient(45deg,
        rgba(34,155,242,1) 0%,
        rgba(0,128,129,1) 99%,
        rgba(0,128,128,1) 100%
    );
}

/* ====================================================
   HOME — HERO
   ==================================================== */
.carousel-fade {
    position: relative;
    height: 100vh;          /* یکپارچه با item */
    min-height: 28rem;      /* برای موبایل‌های کوچک */
    background: url(../img/hero-banner-01.webp) no-repeat center / cover;
}

.carousel-fade .carousel-inner .carousel-item {
    transition-property: opacity;
    height: 100vh;
    min-height: 28rem;
}

.carousel-fade .carousel-control { z-index: 2; }

.overlay {
    position: absolute;
    inset: 0;               /* جایگزین width/height 100% */
    z-index: 2;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.60) 0%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

.hero {
    position: absolute;
    top: 50%;
    right: 8%;
    left: auto;
    transform: translateY(-50%);
    padding: 2rem;
    z-index: 3;
    color: var(--color-white);
    text-align: right;
    max-width: 36rem;
}

.hero h1 {

    font-size: var(--fs-hero);
    color: var(--color-white);
    line-height: 1.4;
    margin: 0 0 1.25rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    white-space: nowrap;
}

.hero h1 span a { color: var(--color-primary); text-decoration: none; }

.hero h3 {
    font-size: var(--fs-md);  
    color: rgba(255,255,255,0.88);
    margin-bottom: 2rem;
    font-weight: var(--fw-normal);
    line-height: 1.8;
}

/* دکمه CTA در Hero */
.hero .hero-cta {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: var(--transition-normal);
}
.hero .hero-cta:hover {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}


.carousel-fade .carousel-inner .carousel-item .hero {
    opacity: 0;
    transition: 2s all ease-in-out .1s;
}
.carousel-fade .carousel-inner .carousel-item.active .hero {
    opacity: 1;
    transition: 2s all ease-in-out .1s;
}

@media (max-width: 991px) {
    .hero {
        right: 5%;
        max-width: 30rem;
    }
}

@media (max-width: 767px) {
    .carousel-fade,
    .carousel-fade .carousel-inner .carousel-item {
        height: 75vh;
        min-height: 26rem;
    }
    .hero {
        right: 0; left: 0;
        top: 50%;
        padding: 1.5rem;
        max-width: 100%;
        text-align: center;
    }
    .hero h1 { font-size: clamp(1.6rem, 5vw, 2.25rem); }
    .hero h3 { font-size: var(--fs-base); }
}

@media (max-width: 480px) {
    .carousel-fade,
    .carousel-fade .carousel-inner .carousel-item {
        height: 65vh;
        min-height: 22rem;
    }
    .hero h1 { font-size: 1.5rem; }
    .hero h3 { font-size: var(--fs-sm); }
    .hero .hero-cta { padding: 0.6rem 1.5rem; font-size: var(--fs-sm); }
}
/* ====================================================
   PAGE BANNER
   ==================================================== */
.home-p {
    z-index: 1;
    padding: 6.25rem 0;
    position: relative;
}

.home-p.breadcrumbs-lg { padding: 12.5rem 0; }

.home-p.pages-head1 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    padding: 3.75rem 0;
    color: var(--color-white);
}

.home-p.pages-head2 { background: url(../img/img/banner-2.jpg) no-repeat center / cover; }
.home-p.pages-head3 { background: url(../img/img/banner-3.jpg) no-repeat center / cover; }
.home-p.pages-head4 { background: url(../img/img/banner-4.jpg) no-repeat center / cover; }

.home-p::after {
    top: 0; left: 0;
    z-index: -1;
    width: 100%; height: 100%;
    content: " ";
    position: absolute;
    background: rgba(0,0,0,0.2);
}

.home-p h1 {
    color: var(--color-white);
    font-size: var(--fs-hero);
    line-height: 3.125rem;
    text-transform: uppercase;
}

.home-p p {
    color: var(--color-white);
    font-size: var(--fs-xl);
    margin-bottom: 0;
    text-transform: uppercase;
}

@media (max-width: 992px) { .home-p.breadcrumbs-lg { padding: 6.25rem 0; } }

@media (max-width: 768px) {
    .home-p,
    .home-p.breadcrumbs-lg { padding: 3.125rem 0; }
    .home-p h1 { font-size: 1.875rem; line-height: 2.5rem; }
    .home-p p  { font-size: var(--fs-md); }
}

/* ====================================================
   TITLE BAR
   ==================================================== */

.title-bar {
    padding: 4rem 0 2.5rem;   /* از 6.25rem/3.125rem کم‌تر */
}
.title-bar h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl); 
    color: var(--color-text);
    text-align: center;
    margin: 0 auto 0.5rem;
}


.heading-border {
    width: 3rem;               /* از 3.75rem کوچک‌تر */
    height: 0.375rem;          /* از 0.625rem ظریف‌تر */
    background-color: var(--color-primary);
    margin: 0 auto 1rem;       /* از 1.25rem کمتر */
}

.title-bar p {
    text-align: center;
    color: #717171;
    font-size: var(--fs-sm);
    line-height: 1.8;
    padding-bottom: 1.5rem;    /* از 2.5rem کمتر */
    margin: 0 auto;
    max-width: 43.75rem;
}


.title-bar .title-but {
    margin: 0;
    background-color: transparent;
    text-align: center;
}
@media (max-width: 575px) {
    .title-bar         { padding: 2.5rem 0 1.5rem; }
    .title-bar h1      { font-size: var(--fs-xl); }   /* 24px موبایل */
}

@media (min-width: 1600px) { .title-bar p { font-size: var(--fs-base); } }

/* ====================================================
   ARTICLES SCROLL
   ==================================================== */
.articles-wrapper { position: relative; }

.articles-horizontal-scroll {
    display: flex;
    gap: 1.5625rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.625rem 2.5rem 1.25rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.articles-horizontal-scroll::-webkit-scrollbar { display: none; }

.article-card {
    flex: 0 0 18.75rem;
    max-width: 18.75rem;
    background: var(--color-white);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}


.scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: none;
    cursor: pointer;
    z-index: 10;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
}
.scroll-btn i { font-size: 1.375rem; color: #333; }
.scroll-btn:hover { background: var(--color-primary); }
.scroll-btn:hover i { color: var(--color-white); }
.scroll-left  { right: -0.625rem; }
.scroll-right { left:  -0.625rem; }

.desc-comp-offer-cont {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.thumbnail-blogs {
    width: 100%;
    height: 12.5rem;
    overflow: hidden;
    position: relative;
}
.thumbnail-blogs img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.article-date {
    font-size: var(--fs-xs);
    color: #888;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ====================================================
   LOGIN OR REGISTER
   ==================================================== */
#login-modal .modal-dialog { margin-top: 10.625rem; width: 25rem; }
#login-modal label { color: #888; margin-bottom: 0; }
#login-modal input[type=text],
input[type=password] { margin-bottom: 0.9375rem; border-radius: 0; }
.modal-backdrop.in { opacity: .8; }
.modal-content { border: 3px solid var(--color-primary); border-radius: 0; outline: 0; }
.modal-header { min-height: 1rem; padding: 0.9375rem; border-bottom: 0; }
.modal-body { padding: 1.5625rem 2.8125rem; }
.modal-footer {
    display: flex;
    padding: 0.9375rem 2.8125rem;
    border-top: 1px solid #e9ecef;
    justify-content: center;
    align-items: center;
}
.btn-link { padding: 0.3125rem 0.625rem 0 0; color: #95a5a6; }
.btn-link:hover,
.btn-link:focus { color: #2c3e50; text-decoration: none; }

@media (max-width: 575px) {
    #login-modal .modal-dialog { width: 18.75rem; margin: 6.25rem auto; }
}

/* ====================================================
   ABOUT (section در index)
   ==================================================== */

.about .about-content-box { padding: 3rem 1.5rem;  text-align: center; }
.about-content-box > i { color: var(--color-white); height: 9.375rem; line-height: 9.375rem; font-size: 6.25rem; }
.about-content-box > h5 {color: var(--color-white);
    font-size: var(--fs-base);     
    padding: 0.75rem 0 0.375rem;
    text-transform: none; }
.about-content-box > p {
    color: rgba(255,255,255,0.88);
    font-size: var(--fs-sm);       /* 14px */
    line-height: 1.7;
}

.about-content-box > img.icon-s1 {
     width: 5rem !important; 
     height: 5rem !important;
    margin: 0 auto 1rem;
    display: block;
}

@media (max-width: 767px) {
    .about .about-content-box { padding: 2rem 1rem; }
    .about-content-box > img.icon-s1 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
}

@media (max-width: 585px) { .about .container-fluid { width: 80%; } }
@media (max-width: 420px) {
    .about .container-fluid { width: 100%; }
    .about .container-fluid .col-md-4 { margin: 0; }
}

/* ====================================================
   STORY
   ==================================================== */
   #story { padding-bottom: 3rem; }

.story-desc {
    padding: 1.5rem 2rem 2rem 0.625rem;
}
.story-desc > h6 { color: var(--color-primary); font-weight: var(--fw-bold); }
.story-desc > h3 { font-weight: var(--fw-bold); }
.story-desc > p {
    font-size: var(--fs-base);
    line-height: 1.9;
    text-align: right;             /* به جای justify — فارسی بهتر می‌خونه */
    color: var(--color-text-light);
}

.story-descb {
    padding: 1.25rem 0.625rem 1.5rem;
    margin: 2rem 0;                /* از 3.75rem به 2rem */
    background: #f7f7f7;
    text-align: center;
    transition: color var(--transition-normal),
                background-color var(--transition-normal),
                box-shadow var(--transition-normal);
    border-bottom: 5px solid transparent;  /* از قبل رزرو بشه */
}

.story-descb:hover {
    box-shadow: 2px 2px 6px 1px rgba(158,158,158,0.55);
    border-bottom-color: var(--color-primary);
    /* حذف margin-top — layout نمی‌پره */
    cursor: pointer;
}

.story-descb > i {
    font-size: 2.25rem;
    height: 3.25rem;
    line-height: 3.25rem;
    color: #999;
}

.story-descb h6 {
    color: #555;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: 1rem 0 0.25rem;
}

.story-descb p {
    color: #777;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .story-descb { margin: 1rem 0; }
    .story-desc { padding: 1.5rem 0.625rem; }
}

@media (max-width: 585px) {
    .story-descb { margin: 1rem 8%; }
}

@media (max-width: 420px) {
    .story-descb { margin: 1rem 0; }
}




/* ====================================================
   WHAT WE DO
   ==================================================== */

.what-we-do {
    position: relative;
    padding: 4.5rem 0;           
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}
.what-we-do::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/banner-blue.svg") no-repeat center / cover;
    opacity: 0.1;
    z-index: 1;
}
.what-we-do > * { position: relative; z-index: 2; }
.what-we-do h3 {
    padding-top: 0;             
    color: var(--color-white);
    font-size: var(--fs-xl);       
    font-weight: var(--fw-bold);
    margin-bottom: 0.5rem;
}


/*.what-we-do h3 { padding-top: 1.25rem; color: var(--color-white); font-weight: var(--fw-bold); }*/

.what-we-do .heading-border-light {
    background-color: var(--color-white);
    margin-bottom: 1rem;
}
.what-we-do p {
    color: rgba(255,255,255,0.85);
    font-size: var(--fs-sm);
    line-height: 1.7;
    text-align: right;            
}

.service-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;  
    gap: 0.625rem;
    padding-bottom: 0.75rem;
    direction: rtl;
}

.service-header i{
    font-size: 1.75rem;
    margin-left: 0.75rem;
    color: rgba(255, 255, 255);
    flex-shrink: 0;
}
.service-header img {
    width: 2.25rem;             
    height: 2.25rem;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}
.service-header i:hover {
    transform: scale(1.08);
    flex-shrink: 0;
    transition:  var(--transition-normal);
    }

.what-we-desc {
    padding: 1.25rem 1rem;
    color: var(--color-white);
    border-right: 2px solid rgba(255,255,255,0.12);  
    margin-bottom: 1.5rem;
}


.what-we-desc h6 {
    height: auto;               
    line-height: 1.5;
    color: var(--color-white);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.5rem;
}

.what-we-desc p {
    font-size: var(--fs-sm);      
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    text-align: right;
    margin-bottom: 0;
}

@media (max-width: 991px) and (min-width: 768px) {
    .what-we-do { padding: 4rem 2rem; }
    .what-we-do .col-md-4 {
        flex: 0 0 50%;
        max-width: 50% !important;
    }
    .what-we-desc { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
}

@media (max-width: 767px) {
    .what-we-do { padding: 3rem 0; }
    .what-we-desc {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding: 1rem 0.75rem;
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .what-we-do .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100% !important;
    }
}


/* ====================================================
   Service Cards Animation
   ==================================================== */
.service-card-animated {
    transform: translateY(0.75rem);
    transition: transform var(--transition-normal),
                box-shadow var(--transition-normal),
                border-color var(--transition-normal);
                 animation-fill-mode: both;
    will-change: transform;
}

.service-card-animated.is-visible {
    animation: fadeSlideUp 0.25s ease-out both;
    animation-delay: calc(var(--i, 0) * 0.06s);
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card-animated:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    border-bottom-color: var(--color-secondary) !important;
}

/* آیکون با انیمیشن چرخش */
.service-card-animated .service-header i {
    transition: transform var(--transition-normal),
                color var(--transition-normal);
}
.service-card-animated:hover .service-header i {
    transform: rotate(-12deg) scale(1.15);
    color: var(--color-secondary);
}

/* لینک بیشتر بخوانید */
.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(255,255,255,0.7);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: color var(--transition-fast), gap var(--transition-fast);
    font-family: var(--font-body);
}
.service-link:hover {
    color: var(--color-white);
    gap: 0.625rem;
}
.service-link i { font-size: 0.625rem; }

/* خط جداکننده ستون عنوان */
.heading-border-light {
    width: 3rem;
    height: 3px;
    background: rgba(255,255,255,0.5);
    margin: 0.75rem 0 1rem;
    border-radius: 2px;
}

/* ====================================================
   NEWS / OFFER CARDS (بهینه‌شده)
   ==================================================== */
#comp-offer { padding: 4rem 0; }   /* از 100px به 64px */

.desc-comp-offer h2 {
    font-size: var(--fs-xl);       /* 24px — از h2 global (36px) کوچک‌تر */
    margin-left: 1.25rem;
    margin-bottom: 0.75rem;
}
.desc-comp-offer > .heading-border-light { margin-left: 1.25rem; }

/* کارت مقاله */
.desc-comp-offer-cont {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);  /* از shadow-md سبک‌تر */
    border: 1px solid var(--color-border);
    border-bottom: 3px solid transparent;   /* رزرو border hover */
    transition: border-color var(--transition-normal),
                box-shadow var(--transition-normal),
                transform var(--transition-normal);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.desc-comp-offer-cont:hover {
    border-bottom-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);   
    cursor: pointer;
}

/* عنوان کارت — باید از متن متمایز باشه */
.desc-comp-offer-cont h3 {
    padding: 1rem 0.75rem 0.375rem;
    font-size: var(--fs-sm);       /* 14px */
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    line-height: 1.5;
    text-transform: none;
    margin-bottom: 0;
}
.desc-comp-offer-cont h3 a { color: var(--color-text); text-decoration: none; }
.desc-comp-offer-cont h3 a:hover { color: var(--color-primary); }

.desc-comp-offer-cont p {
    padding: 0.25rem 0.75rem 0;
    font-size: var(--fs-xs);       /* 12px */
    color: var(--color-text-light);
    line-height: 1.6;
    flex: 1;                       /* فضای خالی رو پر می‌کنه */
}

.content-blog {
    padding: 0.5rem 0.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-date {
    font-size: var(--fs-xs);
    color: #999;
    margin: 0.5rem 0.75rem 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}



.desc-comp-offer-cont > .content-blog > a {
    color: var(--color-primary);
    padding: 0.25rem 0.75rem 0.75rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: auto;              /* همیشه پایین کارت */
}
.desc-comp-offer-cont > .content-blog > a:hover {
    color: var(--color-secondary);
    gap: 0.625rem;
}

/* تصویر کارت */
.thumbnail-blogs {
    width: 100%;
    height: 10.5rem;               /* از 200px به 168px */
    overflow: hidden;
    position: relative;
}
.thumbnail-blogs img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transition-slow);
}
.desc-comp-offer-cont:hover .thumbnail-blogs img {
    transform: scale(1.04);        /* zoom ظریف روی hover */
}

/* دکمه‌های ستون چپ */
.desc-comp-offer .btn-green {
    margin: 0.75rem 1.25rem;
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
}

@media (max-width: 767px) {
    #comp-offer { padding: 2.5rem 0; }
    .desc-comp-offer { margin-top: 1rem; }
}

@media (max-width: 575px) {
    #comp-offer .col-sm-6 {
        flex: 0 0 80%;
        max-width: 80% !important;
        margin: auto;
    }
}

@media (max-width: 420px) {
    #comp-offer .col-sm-6 {
        flex: 0 0 95%;
        max-width: 95% !important;
    }
}

@media (min-width: 1600px) {
    .desc-comp-offer-cont p { font-size: var(--fs-sm); }
    .what-we-desc p { font-size: var(--fs-base); }
}

/* ====================================================
   SERVICE HOME
   ==================================================== */
#service-h { padding: 7.5rem 0 3.125rem; }
.service-h-desc { padding: 3.125rem 0.625rem 5.625rem 3.75rem; }
.service-h-desc > h6 { color: var(--color-primary); font-weight: var(--fw-bold); }

.service-himg { background: var(--color-bg-light); height: 29.6875rem; margin-top: 1.875rem; width: 70%; }
.service-himg iframe {
    height: 23.125rem; width: 130%;
    margin: 3.125rem -3.75rem 4.375rem 4.0625rem;
    box-shadow: 3px 3px 8px 1px #505050;
    border: 1px solid var(--color-primary);
}

.service-h-tab { position: relative; margin: 1.25rem 0; }
.service-h-tab .nav-tabs > a {
    border-radius: 0; width: 11.875rem;
    text-align: center; height: 3.4375rem;
    line-height: 2.5rem; border: 1px solid #ddd;
}
.service-h-tab .nav-tabs > a.active {
    color: var(--color-white);
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.service-h-tab .tab-content .tab-pane { padding: 1.25rem 1.25rem 0 0.625rem; }

@media (min-width: 768px) and (max-width: 1199px) {
    .service-himg { background: var(--color-white); margin: auto; }
    #service-h .col-md-6 { flex: 0 0 100%; max-width: 100% !important; }
    .service-himg iframe { width: 100%; margin: 3.125rem auto 4.375rem; }
}
@media (max-width: 767px) {
    #service-h { padding: 1.875rem 0 0; }
    .service-himg { background: var(--color-white); height: 19.6875rem; width: 100%; }
    .service-himg iframe { height: 16.875rem; width: 100%; margin: 3.125rem auto 4.375rem; }
    .service-h-tab .nav-tabs > a { width: 100%; }
}
@media (max-width: 420px) {
    .service-himg iframe { height: 12.5rem; }
    .service-h-desc { padding: 3.125rem 0.625rem 5.625rem; }
}

/* ====================================================
   CLIENT / LOGO SCROLL
   ==================================================== */
   
 
#client {
    padding-top: 0;               
    padding-bottom: 3.5rem;      
    background: var(--color-bg-light);
}


.logo-strip {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0.75rem 0;
    direction: ltr;
    margin-top: 1rem;
    background: var(--color-bg-light);
}

.logo-strip::before,
.logo-strip::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 8rem;
    z-index: 2;
    pointer-events: none;
}
.logo-strip::before {
    left: 0;
    background: linear-gradient(to right,
        var(--color-bg-light) 0%,
        transparent 100%
    );
}
.logo-strip::after {
    right: 0;
    background: linear-gradient(to left,
        var(--color-bg-light) 0%,
        transparent 100%
    );
}

.logo-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;                 
    width: max-content;
    animation: scrollLeft 45s linear infinite;
}
.logo-track.reverse {
    animation: scrollRight 45s linear infinite;
}

.logo-strip:hover .logo-track {
    animation-play-state: paused;
}

.logo-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
}

.logo {
    flex-shrink: 0;
    background: var(--color-white);
    padding: 0.375rem 0.625rem;  
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow var(--transition-fast);
}
.logo:hover {
    box-shadow: var(--shadow-sm);
}

.logo img {
    width: auto;
    height: auto;
    max-height: 3.75rem;           
    max-width: 7.5rem;            
    object-fit: contain;
    display: block;
    filter: grayscale(50%);
    transition: filter var(--transition-normal),
                transform var(--transition-normal);
}
.logo img:hover {
    filter: grayscale(0%);
    transform: scale(1.06);
}

@keyframes scrollLeft  { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

@media (max-width: 992px) {
    .logo img { max-height: 3rem; max-width: 6rem; }
    .logo-strip::before,
    .logo-strip::after { width: 4rem; }
}

@media (max-width: 768px) {
    .logo-track,
    .logo-track.reverse { gap: 1.125rem; animation-duration: 38s; }
    .logo-group { gap: 1.125rem; }
    .logo img { max-height: 2.5rem; max-width: 5rem; }
    .logo-strip::before,
    .logo-strip::after { width: 3rem; }
}

@media (max-width: 480px) {
    .logo-track,
    .logo-track.reverse { gap: 0.75rem; animation-duration: 32s; }
    .logo-group { gap: 0.75rem; }
    .logo img { max-height: 2rem; max-width: 4rem; }
    .logo-strip::before,
    .logo-strip::after { width: 2rem; }
}





/* ====================================================
   CONTACT HOME
   ==================================================== */
.contact-h-bg {
    background-image: url(../img/A1.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll; 
    filter: none;                  
    position: relative;
}
.contact-h-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
}
.contact-h-bg > .container {
    position: relative;
    z-index: 1;
}

.contact-h-cont {
    margin: 2.5rem 0;              
    padding: 2rem 2rem;            
    background: rgba(12, 17, 122, 0.65);  /* کمی شفاف‌تر */
    border-radius: var(--radius-md);
    backdrop-filter: blur(4px);    /* افکت شیشه‌ای ظریف */
}

.contact-h-cont h3 {
    font-size: var(--fs-xl);       /* 24px */
    color: var(--color-white);
    margin-bottom: 0.5rem;
}

.contact-h-cont p.cl-sub-title {
    font-size: var(--fs-sm);
    color: rgba(255,255,255,0.80);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.contact-h-cont .form-group label {
    color: rgba(255,255,255,0.90);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    margin-bottom: 0.3rem;
    display: block;
}

.contact-h-cont input.form-control,
.contact-h-cont textarea.form-control {
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--color-white);
    font-size: var(--fs-sm);
    padding: 0.6rem 0.875rem;
    transition: border-color var(--transition-fast),
                background var(--transition-fast);
}
.contact-h-cont input.form-control::placeholder,
.contact-h-cont textarea.form-control::placeholder {
    color: rgba(255,255,255,0.45);
    font-size: var(--fs-sm);
}
.contact-h-cont input.form-control:focus,
.contact-h-cont textarea.form-control:focus {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.55);
    color: var(--color-white);
    box-shadow: none;
    outline: none;
}

.contact-h-cont textarea.form-control {
    resize: vertical;
    min-height: 7rem;
}

/* دکمه ارسال */
.contact-h-cont button.btn-send {
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-white);
    padding: 0.6rem 1.75rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    margin-top: 0.75rem;
    transition: var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}
.contact-h-cont button.btn-send:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

/* پیام موفقیت */
#index-success-msg {
    background-color: rgba(52, 168, 83, 0.15) !important;
    border: 1px solid rgba(52, 168, 83, 0.5) !important;
    color: #a8f0bc !important;
    border-radius: var(--radius-sm) !important;
    font-size: var(--fs-sm) !important;
}

@media (max-width: 767px) {
    .contact-h-cont {
        margin: 1.5rem 0;
        padding: 1.5rem 1.25rem;
    }
    .contact-h-cont h3 { font-size: var(--fs-lg); }
}

@media (max-width: 480px) {
    .contact-h-cont { padding: 1.25rem 1rem; }
}

/* ====================================================
   FOOTER LINKS — استایل جذاب‌تر
   ==================================================== */



/* ====================================================
   BREADCRUMB
   ==================================================== */
.breadcrumb-rtl { direction: rtl; justify-content: flex-start; }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    background: transparent;
    padding: 0; margin: 0;
    font-size: var(--fs-sm);
}

.breadcrumb-item {
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    color: var(--color-bg-light);
}
.breadcrumb-item a { color: var(--color-bg-light); }

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    margin: 0 0.5rem;
    color: rgba(255,255,255,0.8);
}

.breadcrumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.breadcrumb-item.active { color: var(--color-white); font-weight: var(--fw-medium); }

.news_breadcrumb { margin-bottom: 1.25rem; }
.news_breadcrumb .breadcrumb-item a { color: #9a9a9a; }
.news_breadcrumb .breadcrumb-item.active { color: #717171; font-weight: var(--fw-medium); }

/* ====================================================
   MISC
   ==================================================== */
.icon-s1 { width: 9.375rem !important; height: 9.375rem !important; }