@charset "utf-8";
/* CSS Document
// (^_^) فایل استایل صفحات عمومی سیستم
*/

  /* Custom styles for a more formal theme without gradients*/
        body {
            font-family: 'Inter', sans-serif; /* استفاده از فونت Inter */
            background-color: #f8f9fa; /* رنگ پس‌زمینه روشن و تمیز */
            direction: rtl; /* جهت راست به چپ برای زبان فارسی */
            text-align: right; /* تراز کردن متن به راست */
            padding-top: 80px; /* برای جلوگیری از پوشیده شدن محتوا توسط نوار ناوبری چسبنده */
        }
        .navbar {
            background-color: #673AB7; /* New header color */
            /* Adding soft shadow and thicker orange strip */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(251, 188, 5, 0.4);
            border-radius: 0 0 15px 15px; /* گوشه‌های گرد پایین نوار ناوبری */
            padding: 0 2rem; /* پدینگ بیشتر برای نوار ناوبری */
            position: fixed; /* تغییر به fixed برای رفتار چسبنده */
            top: 0;
            width: 100%;
            z-index: 998; /* اطمینان از قرار گرفتن بالای سایر عناصر */
            height: 80px; /* ارتفاع اولیه نوار ناوبری */
            transition: height 0.3s ease, background-color 0.3s ease; /* انیمیشن برای تغییر ارتفاع و رنگ */
            display: flex; /* استفاده از فلکس‌باکس برای تراز عمودی */
            align-items: center; /* تراز عمودی آیتم‌ها */
            border-bottom: 4px solid #FBBC05; /* Thicker orange strip */
        }
        .navbar-scrolled {
            height: 50px; /* Navbar height when scrolled */
            background-color: #512DA8; /* Slightly darker purple when scrolled */
        }
        .navbar-brand {
            color: #ffffff !important; /* White text color for brand */
            font-weight: 600; /* Bolder font weight */
            transition: opacity 0.3s ease, visibility 0.3s ease, font-size 0.3s ease; /* Animation for logo */
            display: flex; /* For icon alignment */
            align-items: center; /* Vertically align icon */
            font-size: 2.5rem; /* Initial logo icon size (approx 60x60) */
        }
        /* Reverting logo image specific styles */
        .navbar-brand img {
            display: none; /* Hide the image */
        }
        .navbar-brand .brand-text {
            font-size: 2.5rem; /* Revert to original font size for the text */
            color: inherit; /* Keep white color */
            font-weight: inherit; /* Keep bold weight */
        }
        /* Media query to hide logo and text on scroll ONLY for desktop */
        @media (min-width: 992px) {
            .navbar-scrolled .navbar-brand {
                opacity: 0; /* Hide logo */
                visibility: hidden;
                font-size: 0; /* Shrink font size to completely remove space */
            }
        }
        /* Styles for the hamburger icon (navbar-toggler-icon) */
        .navbar-toggler {
            border-color: rgba(255, 255, 255, 0.5) !important; /* White border for toggler */
        }
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        }
        .nav-link {
            color: #ffffff !important; /* White text color for links */
            font-weight: 600; /* Bolder font weight */
            font-size: 16px; /* Menu font size */
            line-height: 30px; /* Menu line height */
            padding-top: 0; /* Remove default Bootstrap padding */
            padding-bottom: 2px; /* Add padding for underline */
            display: flex; /* For vertical alignment of text inside link */
            align-items: center; /* Vertically align text inside link */
            height: 30px; /* Fixed height for menu item */
            position: relative; /* For links to be positioning reference for underline */
            z-index: 2; /* For links to be above underline */
        }
        .nav-link:hover {
            color: #E0F2F7 !important; /* Lighter blue on hover */
        }
        /* Add left margin to icons inside nav-link for spacing from text */
        .nav-link i {
            margin-left: 10px; /* 10px spacing from text */
            color: #ffffff; /* Menu icon color reverted to default white */
        }
        /* Remove border-bottom from nav-link.active */
        .nav-link.active {
            color: #ffffff !important;
            border-bottom: none;
        }
        .navbar-nav {
            height: 100%; /* Take full navbar height */
            display: flex; /* Use flexbox */
            align-items: flex-end; /* Align menu from bottom */
            margin-bottom: 0 !important; /* Remove default bottom margin */
            position: relative; /* For underline positioning */
            /* margin-right: 30px; This margin is removed */
        }
        .nav-item {
            display: flex; /* For vertical alignment of links */
            align-items: flex-end; /* Align item to bottom */
            height: 100%; /* Take full navbar height */
        }

        /* Style for moving underline below menus */
        .nav-underline {
            position: absolute;
            bottom: 0; /* Stick to bottom */
            height: 3px; /* Reduced thickness of underline */
            background-color: #FBBC05; /* Google yellow (initial color) */
            transition: right 0.3s ease, width 0.3s ease, background-color 0.3s ease; /* Animation for movement and color change */
            z-index: 1; /* Place below links */
        }

        /* Styles for other sections (unchanged) */
        .hero-section {
            background-color: #ffffff; /* White and clean background for main section */
            color: #333; /* Dark text color for contrast */
            padding: 50px 0; /* Reduced top and bottom padding */
            text-align: center; /* Center text alignment */
            border-radius: 20px; /* Rounded corners */
            margin: 30px auto; /* Margin and centering */
            max-width: 90%; /* Max width */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Larger shadow */
        }
        .hero-section h1 {
            font-size: 3.5rem; /* Larger font size for title */
            margin-bottom: 20px; /* Bottom margin */
            color: #4285F4; /* Google blue for main title */
            font-weight: 700; /* Bolder font weight */
        }
        .hero-section p {
            font-size: 1.5rem; /* Larger font size for paragraph */
            color: #555; /* Dark gray text color */
            line-height: 1.6; /* Line spacing */
        }
        .card {
            background-color: #ffffff; /* White background for cards */
            border-radius: 15px; /* Rounded corners for cards */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Shadow for cards */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover animation */
            border: none; /* Remove default border */
        }
        .card:hover {
            transform: translateY(-5px); /* Move up on hover */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
        }
        .card-header {
            background-color: #E0F2F7; /* Very light blue for card header */
            border-bottom: 1px solid #cce7f0; /* Bottom border of header */
            border-radius: 15px 15px 0 0; /* Rounded top corners */
            padding: 1rem 1.5rem; /* Header padding */
            font-weight: 600; /* Bolder font weight */
            color: #4285F4; /* Google blue for card header title */
        }
        .card-body {
            padding: 1.5rem; /* Card body padding */
        }
        .footer {
            background-color: #4285F4; /* Google blue for footer */
            color: #ffffff; /* White text color */
            padding: 10px 0; /* Reduced footer padding */
            text-align: center; /* Center text alignment */
            border-radius: 15px 15px 0 0; /* Rounded top corners */
            margin-top: 50px; /* Top margin */
        }
        /* New colors for card icons */
        .icon-blue {
            color: #4285F4 !important; /* Google blue */
        }
        .icon-red {
            color: #EA4335 !important; /* Google red */
        }
        .icon-yellow {
            color: #FBBC05 !important; /* Google yellow */
        }
        .icon-green {
            color: #34A853 !important; /* Google green */
        }
        .icon-large {
            font-size: 3rem; /* Large size for icons */
            margin-bottom: 15px; /* Bottom margin for icon */
        }

        /* Styles for submenus */
        .dropdown-menu {
            background-color: #4285F4; /* Menu background color */
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 5px; /* Spacing from parent item (for top-level dropdowns) */
            position: absolute;
            top: 100%; /* Position exactly below parent item */
            right: 0; /* Align to the right for RTL */
            left: auto; /* Ensure left is not overriding right for RTL */
            z-index: 1050; /* Higher than navbar's z-index to prevent overlap */

            /* Initial state for animation */
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px); /* Start slightly above for slide effect */
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
            pointer-events: none; /* Prevent clicks when hidden */
        }
        
        /* When Bootstrap adds 'show' class (via JS or our hover JS) */
        .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0); /* Slide down to normal position */
            pointer-events: auto; /* Allow clicks when visible */
        }

        .dropdown-item {
            color: #ffffff !important; /* Text color of menu items */
            padding: 10px 20px;
            transition: background-color 0.2s ease, color 0.2s ease;
            display: flex; /* For icon and text alignment */
            align-items: center; /* Vertically align icon and text */
        }
        .dropdown-item:hover {
            background-color: #3367D6; /* Background color on hover */
            color: #E0F2F7 !important;
            border-radius: 8px; /* Rounded corners on hover */
        }
        .dropdown-item i {
            margin-left: 5px;
            color: inherit;
        }

        /* Styles for nested submenus */
        .dropdown-submenu {
            position: relative; /* Make parent li relative for absolute positioning of nested dropdown */
        }

        .dropdown-submenu > .dropdown-menu {
            top: 0; /* Align with the top of the parent dropdown-item */
            right: 100%; /* Position to the left of the parent dropdown-item in RTL */
            margin-top: 0; /* Override margin-top for nested dropdowns */
            margin-right: 5px; /* Add a small gap between parent and child menu */
        }

        /* Show submenu on hover for desktop */
        @media (min-width: 992px) { /* Bootstrap 'lg' breakpoint */
            .navbar-expand-lg .navbar-nav .dropdown:hover > .dropdown-menu {
                display: block; /* Ensure it's always block on hover for transitions */
                opacity: 1;
                visibility: visible;
                transform: translateY(0); /* Slide down to normal position */
                pointer-events: auto; /* Allow clicks */
            }
            /* Ensure dropdown is display: block by default on desktop for transitions to work */
            .navbar-expand-lg .navbar-nav .dropdown .dropdown-menu:not(.show) {
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                pointer-events: none;
            }

            /* Nested dropdown hover behavior for desktop */
            .dropdown-submenu:hover > .dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
                pointer-events: auto;
            }
            .dropdown-submenu > .dropdown-menu:not(.show) {
                opacity: 0;
                visibility: hidden;
                transform: translateY(-10px);
                pointer-events: none;
            }
        }

        /* Custom Message Box Styles (Mobile Overlay) */
        .custom-message-box {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
            backdrop-filter: blur(5px); /* Blurred background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000; /* Higher than navbar */
            visibility: hidden; /* Hidden by default */
            opacity: 0;
            transition: visibility 0.3s, opacity 0.3s;
        }

        .custom-message-box.show {
            visibility: visible;
            opacity: 1;
        }

        .message-content {
            background-color: #ffffff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            text-align: right; /* Align text to the right for RTL */
            max-width: 90%; /* Wider for menu content */
            width: 400px; /* Fixed width for the mobile menu box */
            height: 90%; /* Take up most of the height */
            overflow-y: auto; /* Enable scrolling for long menus */
            position: relative; /* For close button positioning */
            transform: translateY(-20px);
            transition: transform 0.3s ease-out;
        }

        .custom-message-box.show .message-content {
            transform: translateY(0);
        }
.message-content ul li a i {
  margin-left: 10px !important;
}
        /* Styles for the duplicated mobile menu inside the overlay */
        .mobile-navbar-nav {
            padding: 0;
            margin: 0;
            text-align: right; /* Ensure the whole list aligns right */
        }

        .mobile-navbar-nav .nav-item {
            display: block; /* Stack items vertically */
            width: 100%;
            margin-bottom: 10px; /* Spacing between main menu items */
        }

        .mobile-navbar-nav .nav-link {
            color: #4285F4 !important; /* Blue text for mobile menu main links */
            background-color: #E0F2F7; /* Light background for mobile menu links */
            border-radius: 8px;
            padding: 15px 20px;
            font-size: 18px;
            font-weight: 700;
            display: block; /* Changed to block for text-align to work on its content */
            text-align: right; /* Explicitly ensure right alignment of text */
            transition: background-color 0.2s ease, color 0.2s ease;
            height: auto; /* Allow height to adjust */
            width: 100%; /* Ensure it takes full width */
        }

        .mobile-navbar-nav .nav-link:hover {
            background-color: #cce7f0; /* Slightly darker on hover */
            color: #3367D6 !important;
        }

        .mobile-navbar-nav .nav-link i {
            margin-right: 10px; /* Icon to the right of text for RTL */
            margin-left: 0;
            color: #4285F4; /* Icon color for mobile menu */
            float: right; /* Float icon to the right to keep text right-aligned */
            line-height: inherit; /* Inherit line-height to align with text */
        }

        /* Ensure Bootstrap's dropdown caret is positioned correctly for RTL */
        .mobile-navbar-nav .nav-link.dropdown-toggle::after {
            margin-left: 0.5em; /* Caret to the left of text */
            margin-right: 0; /* No right margin */
            vertical-align: middle; /* Keep vertical alignment */
            float: left; /* Float caret to the left */
        }

        .mobile-navbar-nav .dropdown-menu {
            position: static; /* Make dropdowns flow naturally */
            float: none; /* Remove float */
            width: 100%;
            margin-top: 5px; /* Space below parent link */
            background-color: transparent; /* Transparent background for nested menus */
            border: none;
            box-shadow: none;
            opacity: 1; /* Always visible when toggled by JS */
            visibility: visible;
            transform: none;
            pointer-events: auto;
            border-radius: 0; /* Remove rounded corners for nested menu container */
            padding-right: 20px; /* Indent nested menu items */
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .mobile-navbar-nav .dropdown-item {
            color: #555 !important; /* Darker text for sub-items */
            background-color: transparent; /* Transparent background */
            padding: 8px 15px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 0; /* No rounded corners */
            text-align: right; /* Ensure sub-items are right-aligned */
            display: block; /* Changed to block for text-align to work on its content */
        }

        .mobile-navbar-nav .dropdown-item:hover {
            background-color: #f0f0f0; /* Light hover for sub-items */
            color: #4285F4 !important;
            border-radius: 0;
        }

        .mobile-navbar-nav .dropdown-item i {
            margin-right: 5px; /* Icon to the right of text for RTL */
            margin-left: 0;
            color: #555; /* Icon color for sub-items */
            float: right; /* Float icon to the right */
            line-height: inherit;
        }

        /* Adjust close button position and style for visibility */
        #closeMessageBox {
            background-color: #FBBC05 !important; /* Orange background */
            border: 2px solid #FFFFFF !important; /* Added white border */
            font-size: 1.8rem; /* Larger icon size */
            color: #ffffff !important; /* White icon color */
            cursor: pointer;
            position: absolute; /* Changed to absolute relative to custom-message-box */
            top: 0px; /* Changed to 0px from top */
            left: 15px; /* Position to the left for RTL */
            z-index: 2001; /* Keep high z-index */
            opacity: 1 !important;
            width: 50px; /* Larger width */
            height: 50px; /* Larger height */
            border-radius: 10px; /* Square with rounded corners */
            display: flex; /* Use flexbox to center the 'X' */
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
        }
        #closeMessageBox:hover {
            background-color: #e6a700 !important; /* Slightly darker orange on hover */
            color: #ffffff !important;
        }

        /* Hide desktop menu on small screens */
        @media (max-width: 991.98px) {
            #navbarNav {
                display: none !important; /* Hide the main navbar-collapse on mobile */
            }
            .navbar-toggler {
                display: block; /* Ensure toggler is visible on mobile */
            }
            /* Smaller font size for brand text on mobile */
            .navbar-brand .brand-text {
                font-size: 1.5rem; /* Smaller font size for mobile */
            }
            /* Ensure navbar height does not change on scroll for mobile */
            .navbar-scrolled {
                height: 80px; /* Keep initial height on mobile */
                background-color: #673AB7; /* Keep initial color on mobile */
            }
        }

        /* Ensure main navbar is visible on desktop */
        @media (min-width: 992px) {
            #navbarNav {
                display: flex !important; /* Ensure the main navbar-collapse is visible on desktop */
            }
            .navbar-toggler {
                display: none; /* Hide toggler on desktop */
            }
        } 


	.notify-overly{
		position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* پس زمینه نیمه‌شفاف */
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2003;
        backdrop-filter: blur(8px); /* اعمال افکت بلور */
	}
	
	.notify-box{
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
    color: #333;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 350px; /* یا یه ارتفاع مشخص بده */
		
	}
	
    .login-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7); /* پس زمینه نیمه‌شفاف */
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2002;
        backdrop-filter: blur(8px); /* اعمال افکت بلور */

    }
    .login-box {
        background: #fff; /* پس‌زمینه سفید */
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        width: 300px;
        text-align: center;
        color: #333; /* متن تیره */
    }
    .form-floating input {
        border: 1px solid #673AB7; /* بنفش */
        border-radius: 5px;
        padding: 10px;
    }
    .form-floating input:focus {
        border-color: #FF5722; /* رنگ نارنجی برای فوكوس */
        box-shadow: 0 0 5px rgba(255, 87, 34, 0.6);
    }
    .form-floating label {
        color: #673AB7; /* بنفش برای لیبل */
    }
    .form-floating input:focus + label,
    .form-floating input:not(:placeholder-shown) + label {
        transform: translateY(-1.5rem);
        font-size: 0.85rem;
        color: #FF5722; /* نارنجی برای وقتی فیلد پر میشه */
    }



/*تنظیمات css برای صفحه تماس با ما */
.contact-menu {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.contact-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}

.contact-logo {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.contact-title {
    font-size: 16px;
    font-weight: bold;
    color: #A40002;
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.contact-item {
    display: block;
    padding: 12px;
    background: #673AB7;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    border-radius: 8px;
    margin: 5px 0;
    transition: 0.3s;
}

.contact-item:hover {
    background: #5a2ea6;
}

.contact-map {
    margin-top: 20px;
}
/* تماس */
.contact-item.phone {
    background: #ff5722; /* رنگ نارنجی مخصوص تماس */
}

.contact-item.phone:hover {
    background: #e64a19;
}

/* موقعیت مکانی */
.contact-item.location {
    background: #3f51b5; /* رنگ آبی مخصوص لوکیشن */
}

.contact-item.location:hover {
    background: #303f9f;
}

/* واتس‌اپ */
.contact-item.whatsapp {
    background: #25D366; /* رنگ سبز واتس‌اپ */
}

.contact-item.whatsapp:hover {
    background: #1ebe5d;
}

/* اینستاگرام */
.contact-item.instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.contact-item.instagram:hover {
    opacity: 0.9;
}

.contact-map {
    margin-top: 20px;
}


        /* کی‌فریم‌های انیمیشن شناور */
        @keyframes floatAnimation {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        /* استایل پاپ‌آپ تماس */
        .contact-popup {
            position: fixed;
            bottom: 20px; /* تغییر یافته: هم‌راستا با لوگو در پایین */
            left: 100px; /* تغییر یافته: سمت راست لوگو (20px لوگو + 70px عرض لوگو + 10px فاصله) */
            width: 320px; /* کمی پهن‌تر */
            background-color: white;
            border-radius: 12px; /* گردی بیشتر لبه‌ها */
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
            padding: 20px;
            z-index: 1001; /* بالاتر از لوگو و Overlay */
            opacity: 0; /* در ابتدا پنهان */
            visibility: hidden; /* در ابتدا پنهان */
            transform: translateX(-30px); /* تغییر یافته: برای افکت باز شدن از چپ به راست */
            transition: opacity 0.4s ease-out, visibility 0.4s ease-out, transform 0.4s ease-out;
            direction: rtl; /* برای راست به چپ */
            text-align: right;
        }

        .contact-popup.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }



@media (max-width: 768px) {
    .contact-popup {
        /*
        * این استایل ها جایگزین استایل های قبلی مربوط به موقعیت می شوند
        */
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        right: auto !important; /* لغو استایل های قبلی */
        bottom: auto !important; /* لغو استایل های قبلی */
        transform: translate(-50%, -50%) !important;
        /*
        * سایر استایل های موجود
        */
        width: 90% !important; /* عرض 90% برای نمایش بهتر در موبایل */
        max-width: 320px; /* حداکثر عرض 320 پیکسل */
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        padding: 20px;
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease-out, visibility 0.4s ease-out, transform 0.4s ease-out;
        direction: rtl;
        text-align: right;
    }

    .contact-popup.show {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) !important; /* مهم: این خط هم باید اصلاح شود */
    }
}


        .contact-popup h3 {
            margin-top: 0;
            margin-bottom: 18px;
            color: #343a40; /* رنگ تیره‌تر */
            font-size: 1.2em;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 12px;
        }

        .contact-popup p {
            margin-bottom: 12px;
            color: #495057; /* رنگ متن */
            display: flex;
            align-items: flex-start;
            gap: 10px; /* فاصله بیشتر بین آیکون و متن */
        }

        .contact-popup p i {
            font-size: 1.2em;
            color: #0d6efd; /* رنگ آبی بوتسترپ */
            flex-shrink: 0; /* جلوگیری از کوچک شدن آیکون */
        }

        .contact-popup .map-container {
            width: 100%;
            height: 220px; /* ارتفاع بیشتر نقشه */
            border-radius: 8px;
            overflow: hidden;
            margin-top: 20px;
            border: 1px solid #ced4da;
        }

        .contact-popup .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* استایل Overlay برای بلر کردن پس‌زمینه */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1); /* شفافیت کم */
            backdrop-filter: blur(5px); /* بلر کردن پس‌زمینه */
            z-index: 998; /* بین پاپ‌آپ و بادی */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
        }

        .overlay.show {
            opacity: 1;
            visibility: visible;
        }

/* استایل کارت‌های جدید */
    .menu-card {
      background-color: #ffffff; /* رنگ پس‌زمینه سفید */
      border-radius: 15px; /* گوشه‌های گرد */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* انیمیشن نرم برای هاور */
      height: 100%; /* اطمینان از هم‌اندازه بودن کارت‌ها */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 1.5rem;
    }

    .menu-card:hover {
      transform: translateY(-5px); /* حرکت به بالا در حالت هاور */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* سایه بزرگ‌تر در هاور */
    }

    .menu-card-icon {
      font-size: 3rem; /* اندازه بزرگ آیکون‌ها */
      color: #4285F4; /* رنگ آبی گوگل برای آیکون */
      margin-bottom: 1rem;
    }

    .menu-card-title {
      font-size: 1.25rem; /* اندازه عنوان اصلی */
      font-weight: 600;
      color: #333; /* رنگ خاکستری تیره */
    }

    .gallery img {
      width: 100%;
      border-radius: 10px;
      cursor: pointer;
      margin-bottom: 15px;
      transition: transform 0.3s;
    }

    .gallery img:hover {
      transform: scale(1.05);
    }

  .floating-logo {
    position: fixed;
    bottom: 30px;
    left: 20px;
    width: 80px; /* قطر دایره */
    height: 80px;
    background: #fff;
    color: #673AB7;
    font-size: 36px; /* اندازه آیکن */
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center; /* وسط عمودی */
    justify-content: center; /* وسط افقی */
    overflow: hidden;
    z-index: 1000;
    cursor: pointer;
    transition: opacity 0.5s ease-in-out;
    animation: floatAnimation 2s ease-in-out infinite; /* انیمیشن شناور */
  }

  .floating-logo img {
    width: 65px;
    height: 65px;
    object-fit: contain;
  }

  @keyframes floatAnimation {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }