/* ==========================================================================
   Stakhr-Safar - Unified Stylesheet (About Us + Nav + Footer)
   ========================================================================== */

@font-face {
    font-family: 'Peyda';
    src: url('../font/peyda/Web Fonts/30fa25c99fe33691d39c95bf780bf7c1.eot');
    src: url('../font/peyda/Web Fonts/30fa25c99fe33691d39c95bf780bf7c1.woff2') format('woff2'),
    url('../font/peyda/Web Fonts/30fa25c99fe33691d39c95bf780bf7c1.woff') format('woff'),
    url('../font/peyda/Web Fonts/30fa25c99fe33691d39c95bf780bf7c1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --main-font: 'Peyda', system-ui, sans-serif;
    --main-font: 'Peyda', system-ui, -apple-system, sans-serif;
    --accent-purple: #7000ff;
    --navy-abyss: #01060f;
    --brand-glass-card: linear-gradient(135deg, rgba(3, 10, 23, 0.5) 0%, rgba(1, 4, 10, 0.8) 100%);
    --fluid-text-shadow: 0 20px 40px rgba(0, 0, 0, 0.85);
    --accent-blue: #00f2fe;
    --text-light: #e2e8f0;
    --text-white: #ffffff;
    --text-muted: #a0aec0;
    --aquatic-deep-abyss: #03142c6c;
    --glass-bg: rgba(10, 25, 47, 0.65);
    --glass-border: rgba(0, 242, 254, 0.15);
    --brand-glass-main: linear-gradient(135deg, rgba(16, 43, 81, 0.6) 0%, rgba(6, 32, 77, 0.7) 100%);
    --neon-aqua-cyan: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--main-font);
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: linear-gradient(135deg, #0a234a, #0a315b, #06204d);
    background-size: 400% 400%;
    animation: oceanFluid 15s ease infinite;
}

@keyframes oceanFluid {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ==================== Background Bubbles ==================== */
.bubble-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.bubble {
    position: absolute;
    bottom: -20px;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), inset 0 0 4px rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translateY(-110vh) scale(1.2);
        opacity: 0;
    }
}

.site-content {
    position: relative;
    z-index: 2;
    width: 100%;
}


/* ==========================================
   ULTRA-MINIMAL LUXURY HEADER (SIDE LOGO & BORDERED SHOP)
   ========================================== */
.ultra-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 22px 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ultra-header.is-scrolled {
    padding: 12px 0;
    background: rgba(6, 16, 33, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 242, 254, 0.12);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

.ultra-header-container {
    width: 92%;
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-side {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* --- Brand (Right Side) --- */
.ultra-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.brand-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 3px;
    color: #ffffff;
    line-height: 1;
}

.brand-sub {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00f2fe;
    margin-top: 4px;
    opacity: 0.85;
}

.ultra-brand:hover {
    transform: translateY(-1px);
}

/* --- Bordered Shop Link (استایل بوردر دار لوکس فروشگاه) --- */
.shop-bordered-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.shop-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00f2fe;
}

.shop-icon svg {
    width: 15px;
    height: 15px;
    transition: transform 0.3s ease;
}

.shop-bordered-link:hover {
    border-color: rgba(0, 242, 254, 0.5);
    background: rgba(0, 242, 254, 0.08);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.18), inset 0 0 10px rgba(0, 242, 254, 0.05);
}

.shop-bordered-link:hover .shop-icon svg {
    transform: translateY(-2px) scale(1.1);
}

/* --- Consultation Link --- */
.consultation-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    padding: 8px 18px;
    background: rgba(0, 242, 254, 0.05);
    border: 1px solid rgba(0, 242, 254, 0.22);
    border-radius: 30px;
    transition: all 0.3s ease;
}

.consultation-link:hover {
    background: rgba(0, 242, 254, 0.14);
    border-color: rgba(0, 242, 254, 0.55);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
}

.pulse-beacon {
    width: 6px;
    height: 6px;
    background-color: #00f2fe;
    border-radius: 50%;
    box-shadow: 0 0 10px #00f2fe;
    animation: beaconGlow 2s infinite ease-in-out;
}

@keyframes beaconGlow {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.5);
    }
}


/* ==========================================
   ELITE HOME BACK BUTTON (RTL OPTIMIZED)
   ========================================== */
.ultra-home-back-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* افکت نور نئونی پشت دکمه */
.ultra-home-back-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 100% 50%, rgba(0, 242, 254, 0.25), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* آیکون فلش (سمت راست برای بازگشت RTL) */
.home-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00f2fe;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.home-icon-box svg {
    width: 14px;
    height: 14px;
    transition: transform 0.4s ease;
}

/* متن دکمه */
.home-back-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s ease;
}

/* --- حالت هاور (Hover Effects) --- */
.ultra-home-back-btn:hover {
    border-color: rgba(0, 242, 254, 0.4);
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.12) 0%, rgba(6, 14, 30, 0.4) 100%);
    box-shadow: 0 8px 25px rgba(0, 242, 254, 0.2),
    inset 0 0 10px rgba(0, 242, 254, 0.1);
    transform: translateY(-2px);
}

.ultra-home-back-btn:hover::before {
    opacity: 1;
}

.ultra-home-back-btn:hover .home-icon-box {
    background: #00f2fe;
    color: #030812;
    border-color: #00f2fe;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}

/* حرکت تعاملی فلش به سمت راست */
.ultra-home-back-btn:hover .home-icon-box svg {
    transform: translateX(3px);
}

.ultra-home-back-btn:hover .home-back-text {
    color: #ffffff;
}


/* ==========================================
   RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================== */

@media (max-width: 992px) {
    .ultra-header-container {
        width: 95%;
        padding: 6px 16px;
    }

    .header-side {
        gap: 16px;
    }

}

@media (max-width: 768px) {
    .ultra-header {
        padding: 12px 0;
    }

    .ultra-header-container {
        width: 94%;
        padding: 6px 12px;
        border-radius: 50px; /* شکل بیضی ارگونومیک‌تر برای موبایل */
    }

    .header-side {
        gap: 8px;
    }

    /* --- Brand --- */
    .brand-title {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    /* --- Shop Link --- */
    .shop-bordered-link {
        padding: 6px 10px;
        font-size: 11px;
        border-radius: 20px;
        gap: 6px;
    }

    .shop-icon svg {
        width: 13px;
        height: 13px;
    }

    /* --- Consultation Link --- */
    .consultation-link {
        padding: 6px 10px;
        font-size: 11px;
        border-radius: 20px;
        gap: 6px;
    }

    .pulse-beacon {
        width: 5px;
        height: 5px;
    }

    /* --- Back Button --- */
    .ultra-back-btn {
        padding: 3px;
        border-radius: 50%;
        background: transparent;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .back-text {
        display: none; /* مخفی‌سازی متن در موبایل و نمایش آیکون به صورت دکمه دایره‌ای */
    }

    .back-icon {
        width: 28px;
        height: 28px;
    }

    .back-icon svg {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 480px) {

    .ultra-brand {
        display: none;
    }

    .ultra-header-container {
        padding: 5px 8px;
    }

    /* در صفحه‌های خیلی کوچک متن مشاوره خلاصه می‌شود تا چیدمان بهم نخورد */
    .consultation-link .nav-label {
        font-size: 10px;
    }

    .shop-bordered-link .nav-label {
        font-size: 10px;
    }

    .brand-title {
        font-size: 13px;
        letter-spacing: 1px;
    }
}

.ultra-header-container {
    background: rgba(255, 255, 255, 0.003);
    padding: 13px 24px;
    border-radius: 40px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==================== AWWWARDS About Us Content ==================== */
.site-content,
.about-page-wrapper {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.container-awwwards {
    width: min(90%, 1200px); /* جایگزین کامپکت‌تر width + max-width */
    margin-inline: auto;
}

.about-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(0, 242, 254, 0.12) 0%, var(--aquatic-deep-abyss) 85%);
}

#hero-water-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.85;
}

.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 20px;
    gap: 20px; /* کاهش فاصله بین تیتر و زیرتیتر */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-title-main {
    margin-top: 0 !important;
    font-size: clamp(45px, 7.5vw, 85px);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -1px;
}

.hero-line {
    display: inline-block;
    will-change: transform, opacity;
}

.text-gradient {
    background: linear-gradient(90deg, #00f2fe 0%, #4facfe 50%, #00f2fe 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineGlow 6s linear infinite;
}

@keyframes shineGlow {
    to {
        background-position: 200% center;
    }
}

.about-subtitle-main {
    font-size: clamp(16px, 1.5vw, 20px);
    color: #cbd5e1;
    font-weight: 300;
    line-height: 2.1;
    max-width: 780px;
    will-change: transform, opacity;
}

/* Scroll Indicator Enhancements */
.scroll-down-indicator {
    position: absolute;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    letter-spacing: 1.5px;
    will-change: transform, opacity;
    z-index: 2;
}

.mouse {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(0, 242, 254, 0.4);
    border-radius: 20px;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);
}

.mouse::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 6px;
    background: var(--accent-blue);
    border-radius: 4px;
    box-shadow: 0 0 8px var(--accent-blue);
    animation: scrollMouse 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes scrollMouse {
    0% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, 16px);
        opacity: 0;
    }
}


/* Heritage Section Improved */

.about-heritage-section {
    padding: 160px 0;
    background: var(--aquatic-deep-abyss);
    position: relative;
    overflow: hidden;
}

.heritage-ambient-glow {
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 241, 254, 0.095) 0%, rgba(3, 20, 44, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.heritage-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 90px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Badge Enhancements */
.elite-badge {
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--accent-blue);
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 242, 254, 0.06);
    border: 1px solid rgba(0, 242, 254, 0.18);
    padding: 6px 18px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-blue);
}

.section-heading {
    font-size: clamp(38px, 3.1vw, 43px);
    font-weight: 900;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 20px;
}

.heading-accent {
    background: linear-gradient(90deg, #ffffff 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), transparent);
    margin-bottom: 30px;
    border-radius: 2px;
}

.section-para {
    font-size: 17px;
    color: #cbd5e1;
    line-height: 2.2;
    font-weight: 300;
    margin-bottom: 22px;
    text-align: justify;
}

/* Image & Parallax Styling */
.parallax-img-wrap {
    width: 100%;
    height: 560px;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.img-inner-mask {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.parallax-img {
    width: 100%;
    height: 130%;
    object-fit: cover;
    will-change: transform;
    transform: translateY(-15%);
}

.glass-overlay-stamp {
    position: absolute;
    bottom: 35px;
    right: 35px;
    background: rgba(6, 25, 51, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-blue);
    padding: 16px 32px;
    border-radius: 100px;
    font-weight: 800;
    letter-spacing: 2.5px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
    inset 0 0 15px rgba(0, 242, 254, 0.15);
}

.stamp-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--accent-blue);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-blue);
    animation: stampPulseAnim 2s infinite ease-in-out;
}

@keyframes stampPulseAnim {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

@media (max-width: 992px) {
    .heritage-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .parallax-img-wrap {
        height: 450px;
    }
}

/* ۱. زنده کردن متن زیر تیتر با انیمیشن ملایم جریان نوری */
.reveal-para {
    position: relative;
    transition: color 0.8s ease;
}

.reveal-para::before {
    content: '';
    position: absolute;
    top: 0;
    right: -10px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--accent-blue), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.reveal-para:hover {
    color: #ffffff;
}

.reveal-para:hover::before {
    opacity: 1;
}

/* ۲. هاور مینیمال و شیک روی قاب عکس */
.parallax-img-wrap {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}

.parallax-img-wrap:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(0, 242, 254, 0.35);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(0, 242, 254, 0.2);
}

/* انیمیشن محو شدن و ظاهر شدن نرم (Cross-fade) برای اسلایدر عکس */
.parallax-img {
    transition: opacity 1.2s ease-in-out, transform 0.8s ease-out;
}

.parallax-img.fade-out {
    opacity: 0.2;
    transform: scale(1.05);
}


/* افکت تعویض عکس لوکس (Fluid Mask & Reveal Sweep) */
.img-inner-mask {
    position: relative;
    overflow: hidden;
}

/* لایه پوششی نوری موقع تعویض عکس */
.img-inner-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.4) 0%, rgba(3, 20, 44, 0.9) 100%);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.img-inner-mask.is-swapping::after {
    opacity: 1;
}

.parallax-img {
    transition: transform 0.9s cubic-bezier(0.7, 0, 0.3, 1), filter 0.8s ease, opacity 0.8s ease;
    will-change: transform, filter, opacity;
}

/* افکت موقع خروج عکس */
.parallax-img.slide-out {
    transform: translateY(-25%) scale(1.12);
    filter: blur(12px) brightness(1.3);
    opacity: 0.3;
}

/* افکت موقع ورود عکس جدید */
.parallax-img.slide-in-prep {
    transform: translateY(15%) scale(0.95);
    filter: blur(8px) brightness(0.7);
    opacity: 0;
    transition: none !important; /* آماده‌سازی سریع بدون ترنزیشن */
}


/* ==========================================================================
   استایل‌های سکشن پروژه‌ها (تراز راست کامل تایتل + تغییر متون کارت)
========================================================================== */
.projects-aquatic-section {
    width: 100%;
    min-height: 100vh;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    direction: rtl; /* جهت فارسی */
}

.projects-wrapper {
    max-width: 1140px;
    width: 100%;
    padding: 0 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.3fr;
    gap: 40px;
    align-items: end;
    width: 100%;
}

.projects-slider-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* تراز سمت راست در RTL */
    width: 100%;
}

/* تایتل اصلی سکشن: قفل شده در سمت راست بالا */
.projects-main-header {
    text-align: right !important;
    width: 100%;
    margin-bottom: 5px;
    direction: rtl;
}

.projects-badge {
    font-family: monospace, sans-serif;
    font-size: 0.75rem;
    color: #00f2fe;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 6px;
    text-align: right;
}

.projects-main-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff;
    text-align: right !important;
    line-height: 1.25;
    margin: 0;
}

.header-glow-line {
    width: 80px;
    height: 3px;
    background: linear-gradient(270deg, #00f2fe, transparent);
    margin-top: 10px;
    margin-right: 0; /* چسبیده به راست */
    margin-left: auto;
}

/* فریم اسلایدر */
.projects-slider-viewport {
    width: 100%;
    height: 460px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    position: relative;
    background: #010a1a;
}

.projects-slider-track {
    width: 100%;
    height: 100%;
    position: relative;
}

/* انیمیشن کارت‌ها */
.project-card-item {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scale(0.96) translateY(20px);
}

.project-card-item.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    z-index: 2;
}

.project-img-box {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(1, 10, 26, 0.1) 20%, rgba(1, 10, 26, 0.95) 100%);
}

/* جزئیات روی کارت */
.project-card-details {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 30px;
    text-align: right;
    direction: rtl;
    z-index: 3;
}

/* انیمیشن متون داینامیک هنگام فعال شدن اسلاید */
.proj-tag, .proj-title, .proj-subtitle, .proj-btn-action {
    opacity: 0;
    transform: translateY(15px);
    transition: all 0.5s ease;
}

.project-card-item.active .proj-tag {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.project-card-item.active .proj-title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

.project-card-item.active .proj-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.project-card-item.active .proj-btn-action {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

.proj-tag {
    font-size: 0.75rem;
    color: #00f2fe;
    background: rgba(0, 242, 254, 0.1);
    border: 1px solid rgba(0, 242, 254, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}

.proj-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 6px;
}

.proj-subtitle {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 16px;
    border-right: 2px solid #00f2fe;
    padding-right: 10px;
}

/* اصلاح هاور دکمه روی کارت */
.proj-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 10px;
    background: rgba(1, 10, 26, 0.6);
    border: 1px solid rgba(0, 242, 254, 0.4);
    color: #00f2fe;
    font-size: 0.8rem;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.proj-btn-action svg {
    width: 14px;
    height: 14px;
    stroke: #00f2fe;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.proj-btn-action:hover {
    background: rgba(0, 242, 254, 0.2);
    border-color: #00f2fe;
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

.proj-btn-action:hover svg {
    transform: rotate(180deg) translateX(4px);
}

/* ناوبری */
.projects-nav-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.proj-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(1, 10, 26, 0.8);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: #00f2fe;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.proj-nav-btn:hover {
    background: #00f2fe;
    color: #010a1a;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.5);
}

.proj-dots-indicator {
    display: flex;
    gap: 6px;
}

.proj-dots-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.proj-dots-indicator .dot.active {
    width: 20px;
    border-radius: 10px;
    background: #00f2fe;
}

/* استایل اسلایدر متن سمت راست */
.info-text-container {
    position: relative;
    min-height: 160px; /* جلوگیری از پرش ارتفاع */
    margin-bottom: 10px;
}

.info-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.info-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.projects-nav-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 242, 254, 0.12);
    width: 100%;
}

/* بخش شمارنده و پروگرس بار */
.proj-counter-tracker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
}

.counter-numbers {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: monospace, sans-serif;
}

.counter-numbers .curr-num {
    font-size: 1.2rem;
    font-weight: 800;
    color: #00f2fe;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

.counter-numbers .divider {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
}

.counter-numbers .total-num {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* نوار پیشرفت هیدرولیک */
.progress-bar-bg {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    width: 25%; /* درصد اولیه برای اسلاید اول از چهارتا */
    background: linear-gradient(90deg, #00f2fe, #4facfe);
    box-shadow: 0 0 8px #00f2fe;
    border-radius: 10px;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* دکمه‌های ناوبری */
.nav-btn-group {
    display: flex;
    gap: 10px;
}

.proj-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(1, 10, 26, 0.6);
    border: 1px solid rgba(0, 242, 254, 0.25);
    color: #00f2fe;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.proj-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke: #00f2fe;
    transition: transform 0.3s ease;
}

.proj-nav-btn:hover {
    background: #00f2fe;
    border-color: #00f2fe;
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
}

.proj-nav-btn:hover svg {
    stroke: #010a1a;
}

@media (min-width: 1200px) {
    .projects-wrapper {
        max-width: 1200px;
    }

    .projects-slider-viewport {
        height: 500px;
    }
}

/* 2. لپ‌تاپ‌ها و تبلت‌های افقی (دسکتاپ معمولی) */
@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: 1fr 1.1fr;
        gap: 30px;
    }

    .projects-slider-viewport {
        height: 420px;
    }

    .projects-main-title {
        font-size: 1.65rem;
    }
}

/* 3. تبلت‌ها در حالت عمودی (تغییر چیدمان به تک ستونی) */
@media (max-width: 768px) {
    .projects-aquatic-section {
        padding: 60px 0;
        min-height: auto;
    }

    .projects-grid {
        grid-template-columns: 1fr; /* تبدیل به حالت تک ستونی */
        gap: 35px;
        align-items: stretch;
    }

    .projects-slider-viewport {
        height: 380px;
    }

    .project-card-details {
        padding: 20px;
    }

    .proj-title {
        font-size: 1.25rem;
    }

    .proj-subtitle {
        font-size: 0.8rem;
    }

    .info-text-container {
        min-height: auto; /* لغو ارتفاع ثابت در موبایل برای جلوگیری از فضای خالی اضافی */
    }

    .info-slide {
        position: relative; /* خروج از حالت مطلق در حالت تک‌ستونی جهت جریان طبیعی متن */
        display: none;
        inset: auto;
    }

    .info-slide.active {
        display: block;
    }
}

/* 4. موبایل‌های بزرگ و متوسط */
@media (max-width: 576px) {
    .projects-aquatic-section {
        padding: 40px 0;
    }

    .projects-wrapper {
        padding: 0 15px;
    }

    .projects-main-title {
        font-size: 1.4rem;
    }

    .projects-slider-viewport {
        height: 320px;
        border-radius: 16px;
    }

    .project-card-details {
        padding: 15px;
    }

    .proj-tag {
        font-size: 0.7rem;
        padding: 3px 10px;
    }

    .proj-btn-action {
        padding: 6px 14px;
        font-size: 0.75rem;
        width: 100%; /* پهن‌تر شدن دکمه اکشن در موبایل جهت راحتی تاچ */
        justify-content: center;
    }

    .projects-nav-controls {
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
        margin-top: 20px;
    }

    .proj-counter-tracker {
        min-width: 100px;
    }

    .proj-nav-btn {
        width: 38px;
        height: 38px;
    }
}

/* 5. موبایل‌های بسیار کوچک (زیر 380 پیکسل) */
@media (max-width: 380px) {
    .projects-slider-viewport {
        height: 280px;
    }

    .projects-main-title {
        font-size: 1.25rem;
    }

    .proj-subtitle {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* محدود کردن خطوط توضیحات در صفحه خیلی کوچک */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.projects-info-col {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* افزایش ارتفاع و پدینگ کارت */
    min-height: 470px;
    padding: 30px 35px;

    /* بک‌گراند مدرن با گریدینت شعاعی و افکت شیشه‌ای عمیق */
    background: radial-gradient(circle at top right, rgba(0, 241, 254, 0.041), transparent 60%),
    radial-gradient(circle at bottom left, rgba(111, 0, 255, 0.051), transparent 70%),
    rgba(2, 12, 27, 0.256);

    border: 1px solid rgba(0, 241, 254, 0.193);
    border-radius: 24px;
    backdrop-filter: blur(16px);
    overflow: hidden;

    /* سایه گرانشی و درخشش نئونی ملایم */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.366),
    inset 0 0 20px rgba(0, 242, 254, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* افکت اورلی خطوط درخشان نئونی در گوشه کارت */
.projects-info-col::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 100% 0%, rgba(0, 241, 254, 0.193), transparent 70%);
    pointer-events: none;
}

.projects-info-col::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00f1fe87, transparent);
    opacity: 0.6;
}

/* تنظیم فاصله محتوای داخل کارت برای پر کردن ارتفاع جدید */
.projects-info-col .panel-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px 0;
}

/* هدر پانل و رادار ردیاب */
.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.radar-indicator {
    position: relative;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-core {
    width: 6px;
    height: 6px;
    background-color: #00f2fe;
    border-radius: 50%;
    box-shadow: 0 0 8px #00f2fe;
}

.radar-pulse {
    position: absolute;
    inset: 0;
    border: 1px solid #00f2fe;
    border-radius: 50%;
    animation: radarPulse 2s infinite ease-out;
}

@keyframes radarPulse {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}

.node-index {
    font-family: monospace, sans-serif;
    font-size: 0.8rem;
    color: #00f2fe;
    letter-spacing: 1.5px;
    opacity: 0.85;
}

/* متون داخل اسلایدهای اطلاعات */
.title-glow {
    font-size: 1.35rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    margin-bottom: 55px;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.2);
}

.panel-narrative {
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.8;
    margin: 0;
    text-align: justify;
}

/* واکنش‌گرایی تکمیلی پانل اطلاعات */
@media (max-width: 768px) {
    .projects-info-col {
        padding: 20px;
    }

    .title-glow {
        font-size: 1.15rem;
    }

    .panel-narrative {
        font-size: 0.85rem;
        line-height: 1.7;
    }
}

/* ==========================================
   Engineering Section (Compact & Static Hover)
   ========================================== */
.about-engineering-section {
    padding: 120px 0;
    background: var(--brand-glass-main, rgba(3, 20, 44, 0.6));
    border-top: 1px solid var(--glass-border, rgba(0, 242, 254, 0.15));
    position: relative;
    overflow: hidden;
}

.engineering-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(0, 242, 254, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(0, 102, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.engineering-glow-orb {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.04) 0%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.text-center {
    text-align: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.engineering-cards-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 60px;
}

@media (max-width: 992px) {
    .engineering-cards-wrap {
        grid-template-columns: 1fr;
    }
}

.section-heading.reveal-text {
    font-size: clamp(2rem, 4vw, 3.2rem); /* فونت ریسپانسیو و متناسب */
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    position: relative;
    display: inline-block;

    /* گرادینت متنی براق و آبگون */
    background: linear-gradient(135deg, #ffffff 30%, var(--accent-blue, #00f2fe) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* سایه نرم جهت تفکیک از پس‌زمینه تاریک */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}

/* لاین نئونی تزئینی ذیل تیتر */
.section-heading.reveal-text::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: 20px auto 0 auto;
    background: linear-gradient(90deg, transparent, var(--accent-blue, #00f2fe), transparent);
    border-radius: 2px;
    box-shadow: 0 0 12px var(--accent-blue, #00f2fe);
}

.awwwards-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 242, 254, 0.01) 100%);
    border: 1px solid rgba(0, 242, 254, 0.12);
    border-radius: 20px;
    padding: 30px 25px; /* ابعاد فشرده‌تر و مینی‌مال */
    text-align: right;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(15px);
    transition: border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
    /* بدون حرکت و ترنسفورم */
}

/* افکت رد شدن جریان نور زنده موقع هاور */
.card-glass-shine {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.12), transparent);
    transition: right 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.awwwards-card:hover .card-glass-shine {
    right: 100%;
}

.awwwards-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.5), transparent 50%, rgba(0, 242, 254, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.2;
    transition: opacity 0.5s ease;
}

/* هاور فقط روی رنگ و نور کار می‌کنه (بدون هیچ حرکتی) */
.awwwards-card:hover {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.06) 0%, rgba(3, 20, 44, 0.4) 100%);
    border-color: rgba(0, 242, 254, 0.45);
    box-shadow: inset 0 0 25px rgba(0, 242, 254, 0.05),
    0 10px 30px rgba(0, 242, 254, 0.1);
}

.awwwards-card:hover::before {
    opacity: 1;
}

/* هدر بالای کارت */
.card-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.card-tag {
    font-size: 10.5px;
    letter-spacing: 1.2px;
    color: var(--accent-blue, #00f2fe);
    font-weight: 600;
    font-family: monospace;
    opacity: 0.8;
}

.card-status-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-blue, #00f2fe);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-blue, #00f2fe);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.awwwards-card:hover .card-status-dot {
    transform: scale(1.3);
    box-shadow: 0 0 14px var(--accent-blue, #00f2fe);
}

.card-icon {
    width: 50px;
    height: 50px;
    background: rgba(0, 242, 254, 0.06);
    border: 1px solid rgba(0, 242, 254, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue, #00f2fe);
    margin-bottom: 18px;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.awwwards-card:hover .card-icon {
    background: var(--accent-blue, #00f2fe);
    color: #03142c;
    border-color: var(--accent-blue, #00f2fe);
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.35);
}

.card-icon svg {
    width: 26px;
    height: 26px;
}

.awwwards-card h3 {
    font-size: 19px;
    color: #ffffff;
    margin-bottom: 12px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.awwwards-card:hover h3 {
    color: var(--accent-blue, #00f2fe);
}

.awwwards-card p {
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.9;
    font-weight: 300;
    margin-bottom: 18px;
}

.card-footer-accent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
    transition: color 0.4s ease;
}

.card-footer-accent svg {
    width: 15px;
    height: 15px;
    transition: stroke 0.4s ease;
}

.awwwards-card:hover .card-footer-accent {
    color: #ffffff;
}

.awwwards-card:hover .card-footer-accent svg {
    stroke: var(--accent-blue, #00f2fe);
}

/* Parallax Divider */
.about-divider-parallax {
    position: relative;
    width: 100vw;
    height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-divider-parallax .parallax-bg {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    background-size: cover;
    background-position: center;
    filter: brightness(0.4);
}

.divider-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.divider-content h2 {
    font-size: clamp(30px, 5vw, 65px);
    font-weight: 900;
    color: #fff;
    line-height: 1.4;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

@media (max-width: 1024px) {
    .heritage-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .parallax-img-wrap {
        height: 450px;
    }

    .engineering-cards-wrap {
        grid-template-columns: 1fr;
    }
}


/* ==========================================
   ULTRA-COMPACT LUXURY FOOTER (UPDATED FONT SIZES)
   ========================================== */
.ultra-footer {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, rgba(6, 14, 30, 0.45) 0%, rgba(3, 8, 18, 0.65) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 242, 254, 0.15);
    padding: 42px 0 22px 0;
    overflow: hidden;
}

.footer-glass-backdrop {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 0%, rgba(0, 242, 254, 0.08) 0%, rgba(0, 0, 0, 0) 65%);
    pointer-events: none;
}

.footer-wrapper {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.footer-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* --- Column 1: Brand & Social --- */
.col-brand-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-brand-logo {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.footer-brand-logo:hover {
    transform: translateY(-2px);
}

.footer-brand-logo .brand-title {
    font-size: 24px; /* بزرگ‌تر شد */
    font-weight: 900;
    letter-spacing: 3px;
    background: linear-gradient(135deg, #ffffff 20%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.footer-brand-logo .brand-tag {
    font-size: 9px; /* بزرگ‌تر شد */
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #00f2fe;
    margin-top: 6px;
    opacity: 0.9;
}

.brand-slogan {
    font-size: 14px; /* افزایش از ۱۲ به ۱۴ */
    color: rgba(255, 255, 255, 0.7);
    margin: 12px 0 20px 0;
    line-height: 1.6;
    max-width: 420px;
}

.social-grid {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-card {
    width: 42px; /* کمی بزرگ‌تر برای بالانس با فونت */
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(8px);
}

.social-card svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.social-card:hover {
    color: #081326;
    background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
    border-color: #00f2fe;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 242, 254, 0.35);
}

.social-card:hover svg {
    transform: scale(1.1);
}

/* --- Column 2: Contact Info --- */
.col-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact-icon {
    width: 36px; /* بزرگ‌تر شد */
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.1), rgba(0, 242, 254, 0.02));
    border: 1px solid rgba(0, 242, 254, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00f2fe;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-icon svg {
    width: 17px;
    height: 17px;
}

.contact-item:hover .contact-icon {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.25), rgba(0, 242, 254, 0.08));
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
}

.contact-text {
    font-size: 14px; /* افزایش از ۱۲ به ۱۴ */
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.phone-numbers {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
}

.phone-link {
    font-size: 15px; /* افزایش از ۱۳ به ۱۵ */
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 3px 8px;
    border-radius: 6px;
}

.phone-link.highlight {
    background: linear-gradient(135deg, rgba(0, 242, 254, 0.15), rgba(0, 242, 254, 0.05));
    border: 1px solid rgba(0, 242, 254, 0.25);
    color: #00f2fe;
}

.phone-link:hover {
    color: #ffffff;
    background: rgba(0, 242, 254, 0.2);
    border-color: rgba(0, 242, 254, 0.5);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.25);
}

.phone-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
}

/* --- Bottom Bar --- */
.footer-bottom-bar {
    padding-top: 18px;
    text-align: center;
}

.copyright-text {
    font-size: 12px; /* افزایش از ۱۱ به ۱۲ */
    font-weight: 600;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        text-align: center;
    }

    .col-brand-social,
    .col-contact {
        align-items: center;
    }

    .brand-slogan {
        max-width: 100%;
        font-size: 13px;
    }

    .contact-item {
        justify-content: center;
    }

    .contact-text {
        font-size: 13px;
    }

    .phone-link {
        font-size: 14px;
    }
}