/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
body {
    direction: rtl;
    margin: 0;
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    scroll-behavior: smooth;
}

/* برای قرار دادن محتوا در وسط صفحه */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* استایل کلی هدر */
.site-header {
    background-color: transparent;
    /* START: ADDED FOR STICKY NAV */
    position: relative;
    z-index: 1000;
    transition: all 0.4s ease-in-out;
    /* END: ADDED FOR STICKY NAV */
}

/* --- نوار بالایی --- */
.top-bar {
    border-bottom: 4px solid #D4A017;
    border-radius: 3px;
    padding: 8px 0;
    font-size: 13px;
    color: #fff;
}

.top-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.top-nav ul li a {
    text-decoration: none;
    color: #fff;
    padding: 5px 15px;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.top-nav ul li a:hover {
    color: #D4A017;
}

.top-bar-nav, .top-bar-static-text {
    flex-shrink: 0;
}

.top-bar-scrolling {
    display: flex;
    align-items: center;

    flex-grow: 1;
    min-width: 0;
    padding: 0 20px;
}

.top-bar-scrolling i {
    margin-left: 10px;
    color: #D4A017; /* رنگ بنفش */
}

.top-bar-static-text {
    white-space: nowrap;
    padding-right: 10px;
}

/* --- استایل متن چرخان --- */
.scrolling-text-container {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    height: 20px; /* ارتفاع متناسب با نوار بالا */
}

.scrolling-text {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    line-height: 20px; /* برای وسط چین عمودی */
    white-space: nowrap; /* جلوگیری از شکستن متن */
    animation: marquee 25s linear infinite; /* اعمال انیمیشن */
}

/* تعریف انیمیشن حرکت متن */
@keyframes marquee {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}


/* --- بخش اصلی هدر --- */
.main-header {
    padding: 15px 0;
    transition: padding 0.4s ease-in-out; /* Add transition for smooth resizing */
}

/* سمت راست هدر (لوگو و منوی اصلی) */
.header-right {
    display: flex;
    align-items: center;
    /* خاصیت justify-content در کلاس container فاصله را ایجاد می‌کند */
}

.logo-area {
    display: flex;
    align-items: center;
    margin-left: 40px; /* فاصله لوگو از منو */
}

.logo-icon {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    padding: 4px;
    object-fit: cover;
    transition: all 0.4s ease-in-out; /* Add transition for smooth resizing */
}

.logo-text {
    margin-right: 15px;
}

.logo-text h1 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #FFFFFF;
    transition: font-size 0.4s ease-in-out; /* Add transition for smooth resizing */
}

.logo-text p {
    font-size: 12px;
    margin: 0;
    color: #f0f0f0;
    letter-spacing: 0.5px;
    transition: opacity 0.4s ease-in-out; /* Add transition for smooth fade */
}

/* منوی اصلی - تغییرات در این بخش اعمال شده */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: flex-start; /* آیتم‌ها از بالا تراز می‌شوند */
}

.main-nav ul li {
    position: relative; /* برای جای‌گیری جداکننده */
}

.main-nav ul li a {
    display: flex;
    flex-direction: column; /* چیدمان عمودی آیکون و متن */
    align-items: center;    /* وسط‌چین کردن افقی */
    padding: 10px 20px;     /* افزایش پدینگ برای ایجاد فاصله */
    text-decoration: none;
    color: #fff;
    font-size: 13px;        /* کمی کوچکتر کردن فونت برای جایگیری بهتر */
    font-weight: 500;
    transition: all 0.4s ease-in-out;
}
.main-nav ul .dropdown-content a {
    color: #212922;
    align-items: flex-start;
}
.main-nav ul .dropdown-content a:hover {

    color: #fff;
    background: #0D2A4B;
}


/* استایل آیکون اصلی منو */
.main-nav ul li a > i:first-child {
    font-size: 22px;      /* بزرگتر کردن آیکون */
    margin-bottom: 8px;   /* فاصله بین آیکون و متن */
    color: #fff;
    transition: all 0.4s ease-in-out;
}

/* تغییر رنگ آیکون و متن با هاور شدن */
.main-nav ul li a:hover,
.main-nav ul li a:hover span {
    color: #ddd8c4;
}

.main-nav ul li a:hover > i:first-child {
    color: #ddd8c4;
}

/* استایل منوی بازشو (Dropdown) */
.dropdown {
    position: relative;
}

.dropdown-arrow {
    font-size: 9px !important;
    margin-right: 5px; /* فاصله متن از فلش */
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #ffffff;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1000;
    padding: 8px 0;
    border: 1px solid #f0f0f0;
}

.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    display: block;
    text-align: right;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: #f5f5f5;
    color: #D4A017;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* سمت چپ هدر (دکمه و جستجو) */
.header-left {
    display: flex;
    align-items: center;
}

.cta-button {
    background-color: #D4A017;
    color: #0D2A4B;
    border: none;
    padding: 12px 28px;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
    white-space: nowrap; /* جلوگیری از شکستن متن دکمه */
}

.cta-button:hover {
    background-color: #FFFFFF;
    color: #0D2A4B;
}

/* START: ADDED FOR STICKY NAV */
/* --- Styles for Scrolled Header --- */
.site-header.scrolled {
    position: fixed;
    top: 5px;
    right: 5px;
    left: 5px;
    border-radius: 5px;
    /*width: 100%;*/
    background-color: rgba(13, 42, 75, 0.85); /* A slightly transparent version of the header color */
    backdrop-filter: blur(10px); /* Frosted glass effect */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 0 10px;
}

/* Hide the top bar when scrolled */
.site-header.scrolled .top-bar {
    display: none;
}

/* Adjust padding on the main header when scrolled */
.site-header.scrolled .main-header {
    padding: 5px 0;
}

/* Make the logo smaller when scrolled */
.site-header.scrolled .logo-icon {
    width: 50px;
    height: 50px;
}

.site-header.scrolled .logo-text h1 {
    font-size: 16px;
}

/* Hide the logo subtitle when scrolled */
.site-header.scrolled .logo-text p {
    display: none;
}

/* Adjust the main navigation menu items to be horizontal and smaller */
.site-header.scrolled .main-nav ul li a {
    padding: 15px;
    flex-direction: row; /* Change layout to horizontal */
    align-items: center;
}

.site-header.scrolled .main-nav ul li a > i:first-child {
    font-size: 16px;      /* Smaller icon */
    margin-bottom: 0;     /* Remove bottom margin */
    margin-left: 8px;     /* Add space between icon and text */
}
.site-header.scrolled .main-nav ul li a > span {
    font-size: 12px;
}

/* Make the CTA button slightly smaller */
.site-header.scrolled .cta-button {
    padding: 8px 20px;
    font-size: 14px;
}
/* END: ADDED FOR STICKY NAV */


.search-box {
    background-color: #f5f5f5;
    padding: 12px 14px;
    border-radius: 3px;
    margin-right: 12px;
    cursor: pointer;
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-section {
    background: transparent;
    padding: 80px 0;
    overflow: hidden;
}

.hero-section .container {
    align-items: center;
}

.hero-content {
    flex-basis: 50%;
    padding-left: 40px;
}

.hero-content h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.4;
    color: #ffffff;
}

.hero-content .highlight {
    position: relative;
    display: inline-block;
}

.hero-content .highlight::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 30px;
    background-color: #00BFA5;
    border-radius: 5px;
}

.hero-content p {
    font-size: 18px;
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: 30px;
}

.hero-cta-button {
    background-color: #212922;
    color: #84B59F;
    font-weight: bold;
    padding: 15px 35px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.hero-cta-button:hover {
    transform: translateY(-2px);
    background-color: #FFEDE1;
}

.hero-animation {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.animated-logo {
    width: 80%;
    max-width: 450px;
    height: auto;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

#cube1 { animation: float 6s ease-in-out infinite; }
#cube2 { animation: float 6s ease-in-out infinite 0.5s; }
#cube3 { animation: float 6s ease-in-out infinite 1s; }
#cube4 { animation: float 6s ease-in-out infinite 1.5s; }
#cube5 { animation: float 6s ease-in-out infinite 2s; }
.header-hero-wrapper {
    background: linear-gradient(110deg, #005A9C 0%, #0D2A4B 100%); /* گرادینت از آبی لوگو به سرمه‌ای */
    color: #e0f7fa;
}


.animated-logo {
    --loom-color: #d4a017;       /* Wooden loom color */
    --warp-color: #bd9324;       /* Cream color for vertical threads */
    --weft-color-1: #eee;      /* Deep red */
    --weft-color-2: #2980b9;      /* Strong blue */
    --weft-color-3: #093537;      /* Gold/Yellow */
    --comb-color: #cff2f2;
}

/* --- SVG Element Styling --- */

.loom-frame {
    fill: var(--loom-color);
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.4));
}

.warp-thread {
    stroke: var(--warp-color);
    stroke-width: 1.5;
}

.weft-thread {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: weave-row 8s ease-out infinite;
}

.comb {
    fill: var(--comb-color);
    animation: beat-comb 8s ease-in-out infinite;
}

/* --- Animation Staggering --- */

/* Each row is animated with a delay to appear sequentially */
.row-1 { animation-delay: -7s; }
.row-2 { animation-delay: -6s; }
.row-3 { animation-delay: -5s; }
.row-4 { animation-delay: -4s; }
.row-5 { animation-delay: -3s; }
.row-6 { animation-delay: -2s; }
.row-7 { animation-delay: -1s; }
.row-8 { animation-delay: 0s; } /* Reference animation */

/* The comb's animation is also staggered to follow the last woven row */
.comb-1 { animation-delay: -7s; }
.comb-2 { animation-delay: -6s; }
.comb-3 { animation-delay: -5s; }
.comb-4 { animation-delay: -4s; }
.comb-5 { animation-delay: -3s; }
.comb-6 { animation-delay: -2s; }
.comb-7 { animation-delay: -1s; }
.comb-8 { animation-delay: 0s; }


/* --- Keyframes --- */

@keyframes weave-row {
    0% { stroke-dashoffset: 160; } /* Start hidden */
    15% { stroke-dashoffset: 0; }  /* Weaving complete */
    90% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; } /* Fade out to restart cycle */
}

@keyframes beat-comb {
    0% { transform: translateY(0); opacity: 0; }
    15% { transform: translateY(0); opacity: 1; } /* Appears after row is woven */
    25% { transform: translateY(10px); } /* Beats down */
    35% { transform: translateY(0); }    /* Returns up */
    90% { opacity: 1; }
    100% { opacity: 0; }
}








/* --- Hamburger Menu and Responsive Styles --- */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    font-size: 28px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Initially hidden off-screen */
    width: 300px;
    height: 100%;
    background-color: #0D2A4B;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: right 0.4s ease;
    padding: 60px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.mobile-nav.open {
    right: 0; /* Slides in */
}

.mobile-nav .close-btn {
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 28px;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 15px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
}

/* --- Hero Section Styles --- */
.hero-section { background: transparent; padding: 60px 0; overflow: hidden; }
.hero-section .container { align-items: center; }
.hero-content { flex-basis: 50%; padding-left: 40px; }
.hero-content h1 { font-size: 42px; font-weight: 800; margin-bottom: 20px; line-height: 1.4; color: #ffffff; }
.hero-cta-button { background-color: #212922; color: #84B59F; font-weight: bold; padding: 15px 35px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }
.hero-animation { flex-basis: 50%; display: flex; justify-content: center; align-items: center; }
.animated-svg { width: 80%; max-width: 450px; height: auto; }


/* --- Media Query for Responsive Design --- */
@media (max-width: 1024px) {
    /* Hide desktop navigation elements */
    .top-bar, .main-nav, .header-left {
        display: none;
    }
    /* START: ADDED FOR STICKY NAV */
    /* Make sure the scrolled nav also hides on mobile */
    .site-header.scrolled .main-nav, .site-header.scrolled .header-left {
        display: none;
    }
    .site-header.scrolled .hamburger-menu {
        display: block;
    }
    /* END: ADDED FOR STICKY NAV */
    .hamburger-menu {
        display: block; /* Show hamburger icon */
    }
    .main-header .container, .top-bar .container {
        justify-content: space-between;
    }
    .header-hero-wrapper {
        padding: 0 10px;
    }
    .logo-area {
        margin-left: 0;
    }
    .logo-icon {
        width: 60px; height: 60px;
    }
    .logo-text h1 { font-size: 16px; }

    /* Hero Section Mobile Layout */
    .hero-section .container {
        flex-direction: column; /* Stack items vertically */
    }
    .hero-content {
        padding-left: 0;
        flex-basis: 100%;
        text-align: center;
    }
    .hero-content h1 {
        font-size: 32px;
    }
    .hero-animation {
        display: flex; /* Ensure animation is visible */
        flex-basis: 100%;
        margin-top: 40px; /* Add space above the animation */
    }
    .animated-svg {
        width: 70%; /* Adjust SVG size for mobile */
        max-width: 200px;
    }
}


/* --- Main Container --- */
.contact-section {
    padding: 50px;
    background: #0D2A4B;
    display: flex;
    align-items: center;
    flex-flow: column;
}

.contact-section h2 {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #ffffff;
}

/* --- Layout Container --- */
.contact-container {
    max-width: 1300px;
    display: flex;
    gap: 40px;
}

/* --- Form Side --- */
.form-wrapper {
    flex: 1;
    display: flex;
    flex-flow: wrap;
}

.form-wrapper form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group input {
    background-color: rgba(255, 255, 255, 0.1); /* پس‌زمینه ورودی‌ها */
    border: 1px solid #2a4a53;
    color: #e0f7fa;
    border-radius: 12px;
    padding: 15px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}


/* Container for Textarea and Button */
.textarea-container {
    position: relative;
    flex-grow: 1; /* Allows this container to take up remaining vertical space */
    margin-top: 20px;
}

.textarea-container textarea {
    width: 100%;
    height: 100%;
    min-height: 180px;
    background-color: rgba(255, 255, 255, 0.1); /* پس‌زمینه ورودی‌ها */
    border: 1px solid #2a4a53;
    color: #e0f7fa;
    border-radius: 12px;
    padding: 15px;
    padding-bottom: 80px; /* Space for the button */
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
    resize: none;
    box-sizing: border-box;
}

.textarea-container textarea::placeholder, .form-group input::placeholder {
    color: #bdc3c7;
}

.textarea-container textarea:focus, .form-group input:focus {
    outline: none;
    border-color: #D4A017;
}

.textarea-container .submit-button {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: auto;
    padding: 15px 40px;
    background-color: #D4A017;
    color: #0D2A4B;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.textarea-container .submit-button:hover {
    background-color: #eac645;
    transform: translateY(-2px);
}


/* --- Map Side --- */
.map-wrapper {
    flex-basis: 40%; /* عرض ستون نقشه */
    display: flex;
    flex-direction: column;
}

.map-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    background-color:  rgba(26, 50, 56, 0.7);
}

.map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.map-actions {
    background-color: rgba(26, 50, 56, 0.8);
    backdrop-filter: blur(5px);
    padding: 10px;
    border-radius: 12px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 30px);
}

.map-actions-left a {
    color: #e0f7fa;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.map-actions-left a:hover {
    color: #38c1a1;
}

.map-icons {
    display: flex;
    gap: 10px;
}

.map-icons a {
    color: #e0f7fa;
    font-size: 20px;
}


/* --- Responsive Styles --- */
@media (max-width: 992px) {
    .contact-container {
        flex-direction: column;
    }
    .contact-container-wrapper {
        order: -1; /* نقشه بالای فرم قرار گیرد */
        height: 300px; /* یک ارتفاع ثابت برای نقشه در موبایل */
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 30px 20px;
    }
    .form-grid {
        grid-template-columns: 1fr;
    }
}


footer section:last-child {
    background-color: #0D2A4B; /* رنگ سرمه‌ای */
    border-top: 8px solid #D4A017; /* نوار زرد بالای فوتر */
}
.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    color: #bdc3c7;
}

/* Footer Top Section */
.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #D4A017;
}

.footer-about {
    flex-basis: 55%;
    line-height: 1.8;
    text-align: justify;
    align-content: center;
}

.footer-contact-info {
    flex-basis: 35%;
    display: flex;
    gap: 20px 20px;
    justify-content: space-between;
}
.footer-contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact-info ul li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    flex-flow: row-reverse;
    height: 48px;
}
.footer-contact-info ul li i {
    margin-left: 15px;
    font-size: 20px;
    width: 25px;
    text-align: center;
}

/* Footer Middle Section */
.footer-middle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 3px solid #D4A017;
}

.partner-logos { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.partner-logos span { font-weight: bold; }
.partner-logos img {
    height: 30px;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.partner-logos img:hover { opacity: 1; }

.newsletter-form { display: flex; }
.newsletter-form input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid #D4A017;
    color: #fff;
    padding: 12px;
    border-radius: 0 10px 10px 0;
    border-left: none;
    width: 300px;
}
.newsletter-form input:focus {
    outline: none;
}
.newsletter-form input::placeholder { color: #88aebc; }
.newsletter-form button {
    background-color: #D4A017;
    border: none;
    color: #0D2A4B;
    padding: 0 20px;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
}

/* Footer Bottom Section */
.footer-bottom {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin: 10px 0 30px 0;
}
.footer-logo{
    flex-basis:10%;
    align-content: center;
}
.footer-logo-area {
    text-align: center;
    align-content: center;
}
.footer-logo-area img.footer-logo {
    height: 40px;
    margin-bottom: 20px;
}
.social-icons a {
    color: #b0c4de;
    margin-left: 15px;
    font-size: 50px;
    transition: color 0.3s;
}
.social-icons a:hover { color: #D4A017; }

.footer-links h4 {
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
}
.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links ul li a {
    color: #b0c4de;
    text-decoration: none;
    line-height: 2.2;
    transition: color 0.3s;
}
.footer-links ul li a:hover { color: #38c1a1; }

.footer-certs { display: flex; gap: 15px; }
.cert-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cert-box img {
    max-width: 100%;
}

/* --- Responsive Styles --- */
@media (max-width: 992px) {
    .footer-top, .footer-middle {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom {
        grid-template-columns: 1fr 1fr;
    }
    .footer-logo-area, .footer-certs {
        grid-column: 1 / -1;
        text-align: center;
    }
    .footer-certs {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .footer-bottom { grid-template-columns: 1fr; }
    .footer-logo-area, .footer-links { text-align: center; }
    .newsletter-form input { width: 100%; }
    .partner-logos { justify-content: center; }
}
.icon-list-item span{
    display: flex;
    align-items: center;

    color: #eee;
}
.footer-contact-info div:nth-child(2) span{
    color: #b1cad3;
    font-weight: bold;
}






.counter-value { transition: all 1.5s ease-in-out; }
/* Styles for tabs */
.tab-button {
    transition: all 0.3s ease;
    padding: 0.75rem 1.5rem;
    border-bottom: 3px solid transparent;
}
.tab-button.active {
    color: #2563eb; /* brand-primary */
    border-bottom-color: #2563eb; /* brand-primary */
    font-weight: 700;
}
/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}






.event-section .swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
.event-section .swiper-slide {
    background-position: center;
    background-size: cover;
    /* width: 320px; */ /* این خط حذف می‌شود تا عرض اسلاید شناور باشد */
    height: 530px; /* ارتفاع ثابت به عنوان معیار اندازه باقی می‌ماند */
    aspect-ratio: 320 / 420; /* این خط نسبت ابعاد کارت را ثابت نگه می‌دارد */
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.event-section .swiper-slide .slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
}
.event-section .swiper-3d .swiper-slide-shadow-left,
.event-section .swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
}


.article-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #212922;
}
.article-content p {
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #4a5568;
}
.article-content ul {
    list-style-type: disc;
    padding-right: 2rem;
    margin-bottom: 1.5rem;
}
.article-content blockquote {
    border-right: 4px solid #69a297;
    padding-right: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #4a5568;
}

/* --- New Design Enhancements --- */
.widget {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border: 1px solid #e5e7eb;
}
.widget-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #212922;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #69a297;
    display: inline-block;
}
.share-btn {
    transition: all 0.2s ease;
}
.share-btn.telegram:hover { background-color: #2AABEE; color: white; }
.share-btn.whatsapp:hover { background-color: #25D366; color: white; }
.share-btn.linkedin:hover { background-color: #0A66C2; color: white; }
.share-btn.link:hover { background-color: #334155; color: white; }
.light-border {
    border:1px solid #e5e7eb;
}
#reading-progress-bar {
    position: fixed;
    top: 0px;
    /*right: 0.5rem;*/
    /*left: 0.5rem;*/
    height: 4px;
    background: #51818e;
    border-radius: 0 5px 5px 0;
    z-index: 9999;
    transition: width 0.1s ease-out;
}











/* A wrapper to give the blockquote some space */
.blockquote-wrapper {
    padding: 20px;
}

/* Main style for the blockquote */
.blockquote {
    position: relative;
    font-family: 'Montserrat', sans-serif !important;
    /* Font will be inherited from your site's body tag */
    font-weight: 800;
    color: #3d4f60; /* A dark color suitable for a light background */
    padding: 20px 0;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    margin: 20px auto;
    border-top: solid 1px #e0e0e0;
    border-bottom: solid 1px #e0e0e0;
}

/* Style for the main quote text */
.blockquote h4 {
    position: relative;
    font-size: 1.2rem; /* Adjusted for better fit in articles */
    font-weight: 800;
    line-height: 1.4;
    margin: 0;
}

.blockquote:after {
    content: '”';
    position: absolute;
    bottom: -4rem;
    left: 0.5rem;
    font-family: Georgia, serif; /* A classic, elegant font for quotes */
    font-size: 5rem;
    line-height: 1;
    color: #3d4f60; /* Your brand-secondary color for a subtle touch */
    z-index: 1;
}

/* Adjust font size on larger screens */
@media all and (min-width: 600px) {
    .blockquote h1 {
        font-size: 40px;
    }
}

/* Style for the caption/author text */
.blockquote h5 {
    position: relative;
    color: #69a297; /* Your brand-primary color */
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding-top: 20px;
    z-index: 1;
}