/* Import Advanced Gradient System */
@import url('gradients.css');
:root {
--primary-dark: #4A154B;
--primary: #6A1B9A;
--primary-light: #9C27B0;
--secondary: #000000;
--accent: #E1BEE7;
--text-light: #FFFFFF;
--text-dark: #333333;
--gradient: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
/* Fallback for white mode */
--primary-color: #6A1B9A;
}
/* Dual date utility (FA + EN) */
.dual-date {
display: inline-flex;
gap: 6px;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
.dual-date .date-fa {
font-weight: 700;
direction: rtl;
unicode-bidi: plaintext;
order: 1 !important;
}
.dual-date .date-en {
opacity: 0.8;
font-size: 0.9em;
direction: ltr;
unicode-bidi: plaintext;
order: 2 !important;
}
/* Blog meta alignment */
.blog .blog-meta {
display: flex;
align-items: center;
gap: 70px;
}
.blog .blog-meta .dual-date {
direction: ltr !important;
text-align: left !important;
flex-direction: row !important;
}
.blog .blog-meta span:has(.dual-date) {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
flex-direction: row !important;
direction: ltr !important;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Vazirmatn', sans-serif;
}
body {
background-color: #f9f9f9;
color: var(--text-dark);
line-height: 1.6;
overflow-x: hidden;
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 30px;
overflow: visible;
}
/* Header Styles */
header {
background: var(--gradient);
color: var(--text-light);
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.header-top {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 1rem;
gap: 2rem;
overflow: visible;
flex-wrap: nowrap;
}
.logo {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.logo h1 {
font-size: 1.6rem;
margin-bottom: 0;
line-height: 1.2;
white-space: nowrap;
font-weight: 700;
}
.logo span:first-of-type {
font-size: 1.1rem;
opacity: 0.9;
display: block;
white-space: nowrap;
font-weight: 600;
line-height: 1.2;
}
.logo span:not(:first-of-type) {
font-size: 1.1rem;
opacity: 0.9;
display: block;
white-space: nowrap;
font-weight: 600;
line-height: 1.2;
}
.nav-menu {
display: flex;
list-style: none;
justify-content: flex-start;
margin-right: auto;
overflow: visible;
flex-wrap: wrap;
}
.nav-menu li {
margin: 0 10px;
overflow: visible;
}
.nav-menu a {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
padding: 8px 12px;
border-radius: 4px;
transition: background 0.3s;
}
.nav-menu a:hover {
background: rgba(255, 255, 255, 0.1);
}
/* استایل مخصوص گزینه اول منو (دکتر ساغر عنبری) با گرادیان */
.nav-menu a.gradient-text {
position: relative;
overflow: visible !important;
padding: 8px 12px;
border-radius: 4px;
display: inline-block;
}
.nav-menu a.gradient-text::before {
content: '';
position: absolute;
top: -8px;
left: -2px;
right: -2px;
bottom: -8px;
background: linear-gradient(135deg,
rgba(255, 107, 157, 0.2) 0%,
rgba(196, 69, 105, 0.2) 8%,
rgba(248, 181, 0, 0.2) 16%,
rgba(255, 159, 243, 0.2) 24%,
rgba(84, 160, 255, 0.2) 32%,
rgba(95, 39, 205, 0.2) 40%,
rgba(165, 94, 234, 0.2) 48%,
rgba(139, 92, 246, 0.2) 56%,
rgba(124, 58, 237, 0.2) 64%,
rgba(109, 40, 217, 0.2) 72%,
rgba(91, 33, 182, 0.2) 80%,
rgba(76, 29, 149, 0.2) 88%,
rgba(55, 48, 163, 0.2) 96%,
rgba(30, 27, 75, 0.2) 100%
);
border-radius: inherit;
z-index: -1;
animation: gradientShift 6s ease-in-out infinite reverse;
filter: blur(1px);
}
/* ---------- Nav specific override for دکمه دکتر ساغر عنبری ---------- */
.nav-menu a.gradient-text {
position: relative !important;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px; /* کمی کوچکتر شدن عرض و ارتفاع */
border-radius: 6px;
z-index: 9999 !important; /* متن همیشه در بالاترین لایه */
isolation: isolate; /* ایجاد stacking context جدید */
}
.nav-menu a.gradient-text::before {
content: '';
position: absolute;
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
background: linear-gradient(135deg,
rgba(255, 107, 157, 0.25) 0%,
rgba(196, 69, 105, 0.25) 12%,
rgba(248, 181, 0, 0.25) 24%,
rgba(255, 159, 243, 0.25) 36%,
rgba(84, 160, 255, 0.25) 48%,
rgba(95, 39, 205, 0.25) 60%,
rgba(165, 94, 234, 0.25) 72%,
rgba(124, 58, 237, 0.25) 84%,
rgba(30, 27, 75, 0.25) 100%
);
border-radius: inherit;
z-index: -1 !important; /* پشت متن - همیشه پشت */
animation: gradientShift 6s ease-in-out infinite;
filter: blur(0.5px);
}
.nav-menu a.gradient-text::after {
content: '';
position: absolute;
top: -2px;
bottom: -2px;
left: -2px;
right: -2px;
background: linear-gradient(135deg,
rgba(255, 107, 157, 0.1) 0%,
rgba(196, 69, 105, 0.1) 20%,
rgba(248, 181, 0, 0.1) 40%,
rgba(255, 159, 243, 0.1) 60%,
rgba(84, 160, 255, 0.1) 80%,
rgba(30, 27, 75, 0.1) 100%
);
border-radius: inherit;
z-index: -2 !important; /* پشت همه چیز */
animation: pulse 3s ease-in-out infinite;
}
/* Hover state برای دکمه دکتر ساغر عنبری - بهبود خوانایی متن */
.nav-menu a.gradient-text:hover {
background: rgba(255, 255, 255, 0.3) !important; /* لایه سفید نیمهشفاف قویتر برای خوانایی */
z-index: 9999 !important; /* متن همیشه در بالاترین لایه - حتی در hover */
position: relative !important;
filter: brightness(1.6) contrast(1.5) saturate(1.35);
box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.6),
inset 0 0 40px rgba(255, 255, 255, 0.4),
0 0 45px rgba(139, 92, 246, 0.5),
inset 0 0 25px rgba(139, 92, 246, 0.3);
transition: background 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(5px) brightness(1.2) contrast(1.15); /* blur و brightness قویتر برای خوانایی بهتر */
isolation: isolate !important; /* ایجاد stacking context جدید */
}
/* اطمینان از اینکه محتوای داخل (متن و آیکون) همیشه روی همه چیز باشد */
.nav-menu a.gradient-text:hover *,
.nav-menu a.gradient-text * {
position: relative !important;
z-index: 10000 !important; /* محتوای داخل کاملاً روی همه چیز */
}
/* اطمینان از اینکه لینک قابل کلیک باشد */
.nav-menu a.gradient-text {
pointer-events: auto !important;
}
/* کاهش شدت انیمیشن در hover برای خوانایی بهتر */
.nav-menu a.gradient-text:hover::before {
opacity: 0.15 !important; /* کاهش شدت انیمیشن به حداقل */
filter: blur(4px);
z-index: -1 !important; /* همیشه پشت متن */
transition: opacity 0.3s ease, filter 0.3s ease;
}
.nav-menu a.gradient-text:hover::after {
opacity: 0.08 !important; /* کاهش شدت انیمیشن به حداقل */
background: rgba(255, 255, 255, 0.2); /* تغییر به سفید برای خوانایی بهتر */
z-index: -2 !important; /* همیشه پشت همه چیز */
transition: opacity 0.3s ease, background 0.3s ease;
}
/* اطمینان از خوانایی متن در hover */
.nav-menu a.gradient-text:hover {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
/* اطمینان از اینکه ::before و ::after همیشه پشت متن هستند - حتی در حالت عادی */
.nav-menu a.gradient-text::before {
z-index: -1 !important;
}
.nav-menu a.gradient-text::after {
z-index: -2 !important;
}
.gradient-text {
background: linear-gradient(135deg,
#ff6b9d 0%,
#c44569 8%,
#f8b500 16%,
#ff9ff3 24%,
#54a0ff 32%,
#5f27cd 40%,
#a55eea 48%,
#8b5cf6 56%,
#7c3aed 64%,
#6d28d9 72%,
#5b21b6 80%,
#4c1d95 88%,
#3730a3 96%,
#1e1b4b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
background-size: 400% 400%;
animation: gradientShift 6s ease-in-out infinite;
position: relative !important;
z-index: 10000 !important; /* متن همیشه در بالاترین لایه */
text-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
word-spacing: 0.2em; /* اضافه شده برای حل مشکل spacing - فاصله بیشتر بین کلمات */
white-space: normal; /* اضافه شده برای حل مشکل spacing */
font-family: 'Vazirmatn', sans-serif; /* اضافه شده برای حل مشکل spacing */
letter-spacing: 0.05em; /* اضافه شده برای حل مشکل spacing - فاصله بیشتر بین حروف */
line-height: 1.4; /* اضافه شده برای حل مشکل spacing */
isolation: isolate; /* ایجاد stacking context جدید */
}
/* اطمینان از اینکه gradient-text در nav-menu همیشه بالاترین لایه باشد */
.nav-menu a.gradient-text.gradient-text,
.nav-menu .gradient-text {
z-index: 10000 !important;
position: relative !important;
}
.gradient-text::before {
content: '';
position: absolute;
top: -8px;
left: -10px;
right: -10px;
bottom: -8px;
background: linear-gradient(135deg,
rgba(255, 107, 157, 0.2) 0%,
rgba(196, 69, 105, 0.2) 8%,
rgba(248, 181, 0, 0.2) 16%,
rgba(255, 159, 243, 0.2) 24%,
rgba(84, 160, 255, 0.2) 32%,
rgba(95, 39, 205, 0.2) 40%,
rgba(165, 94, 234, 0.2) 48%,
rgba(139, 92, 246, 0.2) 56%,
rgba(124, 58, 237, 0.2) 64%,
rgba(109, 40, 217, 0.2) 72%,
rgba(91, 33, 182, 0.2) 80%,
rgba(76, 29, 149, 0.2) 88%,
rgba(55, 48, 163, 0.2) 96%,
rgba(30, 27, 75, 0.2) 100%
);
border-radius: 0;
z-index: -1;
animation: gradientShift 6s ease-in-out infinite reverse;
filter: blur(1px);
}
.gradient-text::after {
content: '';
position: absolute;
top: -5px;
left: -8px;
right: -8px;
bottom: -5px;
background: linear-gradient(135deg,
rgba(255, 107, 157, 0.1) 0%,
rgba(196, 69, 105, 0.1) 20%,
rgba(248, 181, 0, 0.1) 40%,
rgba(255, 159, 243, 0.1) 60%,
rgba(84, 160, 255, 0.1) 80%,
rgba(30, 27, 75, 0.1) 100%
);
border-radius: 0;
z-index: -2;
animation: pulse 3s ease-in-out infinite;
}
.gradient-text:hover {
animation-play-state: paused;
transform: scale(1.05);
text-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}
.gradient-text:hover::before {
filter: blur(0.5px);
opacity: 0.8;
}
.gradient-text:hover::after {
opacity: 0.6;
}
@keyframes gradientShift {
0% {
background-position: 0% 0%;
transform: scale(1);
}
25% {
background-position: 100% 0%;
transform: scale(1.02);
}
50% {
background-position: 100% 100%;
transform: scale(1.05);
}
75% {
background-position: 0% 100%;
transform: scale(1.02);
}
100% {
background-position: 0% 0%;
transform: scale(1);
}
}
@keyframes gradientTextShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes pulse {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
25% {
opacity: 0.5;
transform: scale(1.01);
}
50% {
opacity: 0.7;
transform: scale(1.03);
}
75% {
opacity: 0.5;
transform: scale(1.01);
}
}
/* Authentication Section */
.auth-section {
display: flex;
align-items: center;
gap: 1rem;
margin-left: 1rem;
}
.auth-buttons {
display: flex;
gap: 0.5rem;
align-items: center;
}
.auth-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 25px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.auth-btn::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.auth-btn:hover::before {
transform: translateX(100%);
}
.login-btn {
background: rgba(255, 255, 255, 0.1);
color: var(--text-light);
border-color: rgba(255, 255, 255, 0.3);
}
.login-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}
.register-btn {
background: var(--accent);
color: var(--primary-dark);
border-color: var(--accent);
}
.register-btn:hover {
background: var(--text-light);
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(225, 190, 231, 0.4);
}
.unified-auth-btn {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: white;
border: none;
padding: 10px 20px;
font-size: 15px;
font-weight: 700;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}
.unified-auth-btn:hover {
background: linear-gradient(135deg, #7c3aed, #6d28d9);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
color: white;
}
.unified-auth-btn i {
font-size: 16px;
}
/* Mobile Auth Button - Next to Logo */
.mobile-auth-button {
display: none !important;
}
.mobile-auth-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #10b981, #059669);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.mobile-auth-btn:hover {
background: linear-gradient(135deg, #059669, #047857);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
color: white;
}
.mobile-auth-btn i {
font-size: 1rem;
}
/* Mobile Action Buttons */
.mobile-action-buttons {
display: none;
flex-direction: row;
gap: 8px;
margin-top: 20px;
padding: 0 20px;
flex-wrap: wrap;
justify-content: center;
}
.mobile-action-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
text-align: center;
justify-content: center;
font-size: 14px;
flex: 1;
min-width: 120px;
}
.consultation-mobile-btn {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.appointment-mobile-btn {
background: linear-gradient(135deg, #6a1b9a, #4a148c);
}
.auth-mobile-btn {
background: linear-gradient(135deg, #10b981, #059669);
}
.mobile-action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.mobile-action-btn i {
font-size: 16px;
}
/* User Profile Dropdown */
.user-profile-dropdown {
position: relative;
cursor: pointer;
z-index: 99999;
}
.user-info {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 25px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.user-info:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}
.user-avatar {
font-size: 1.5rem;
color: var(--accent);
}
.user-details {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.user-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-light);
}
.user-role {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
}
.dropdown-arrow {
font-size: 0.8rem;
color: var(--accent);
transition: transform 0.3s ease;
}
.user-profile-dropdown:hover .dropdown-arrow,
.user-profile-dropdown.active .dropdown-arrow {
transform: rotate(180deg);
}
.user-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: var(--text-light);
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 99999 !important;
pointer-events: none;
}
.user-profile-dropdown:hover .user-dropdown-menu,
.user-profile-dropdown.active .user-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
/* Ensure dropdown is visible when active class is present */
.user-profile-dropdown.active .user-dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.dropdown-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: var(--text-dark);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
border-bottom: 1px solid #f0f0f0;
white-space: nowrap;
}
.dropdown-item:last-child {
border-bottom: none;
}
.dropdown-item:hover {
background: #f8f9fa;
color: var(--primary);
transform: translateX(-5px);
}
.dropdown-item i {
font-size: 1rem;
width: 16px;
text-align: center;
}
.dropdown-item.logout {
color: #dc3545;
}
.dropdown-item.logout:hover {
background: #f8d7da;
color: #721c24;
}
.dropdown-divider {
height: 1px;
background: #e9ecef;
margin: 0.5rem 0;
}
/* Mobile dropdown improvements */
@media (max-width: 768px) {
.user-dropdown-menu {
min-width: 180px;
right: 0;
left: auto;
max-width: calc(100vw - 20px);
z-index: 99999;
}
.dropdown-item {
padding: 0.6rem 0.8rem;
font-size: 0.85rem;
}
.dropdown-item i {
font-size: 0.9rem;
width: 14px;
}
/* Mobile User Dropdown Styles */
.mobile-user-dropdown {
position: relative;
cursor: pointer;
z-index: 99999;
}
.mobile-user-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.6rem;
background: var(--primary);
border-radius: 8px;
transition: all 0.3s ease;
min-width: 120px;
max-width: 160px;
}
.mobile-user-info:hover {
background: var(--primary-dark);
transform: translateY(-1px);
}
.mobile-user-avatar {
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
flex-shrink: 0;
}
.mobile-user-details {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
min-width: 0;
}
.mobile-user-name {
font-size: 0.75rem;
font-weight: 600;
color: white;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.mobile-user-role {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.mobile-dropdown-arrow {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.8);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.mobile-user-dropdown:hover .mobile-dropdown-arrow,
.mobile-user-dropdown.active .mobile-dropdown-arrow {
transform: rotate(180deg);
}
.mobile-user-dropdown-menu {
position: absolute;
top: 100%;
right: 0;
background: var(--text-light);
border-radius: 8px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
min-width: 160px;
max-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 99999 !important;
pointer-events: none;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.mobile-user-dropdown:hover .mobile-user-dropdown-menu,
.mobile-user-dropdown.active .mobile-user-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.mobile-user-dropdown-menu .dropdown-item {
padding: 0.5rem 0.7rem;
font-size: 0.75rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.mobile-user-dropdown-menu .dropdown-item:last-child {
border-bottom: none;
}
.mobile-user-dropdown-menu .dropdown-item i {
font-size: 0.7rem;
width: 16px;
}
.mobile-user-dropdown-menu .dropdown-divider {
height: 1px;
background: rgba(0, 0, 0, 0.1);
margin: 0.3rem 0;
}
.mobile-user-dropdown-menu .dropdown-item.logout {
color: var(--danger);
font-weight: 600;
}
.mobile-user-dropdown-menu .dropdown-item.logout:hover {
background: rgba(220, 53, 69, 0.1);
}
}
/* Navigation Actions */
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-left: auto;
}
.nav-action-btn {
display: inline-block;
padding: 12px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
text-align: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
min-width: 140px;
}
.consultation-nav-btn {
background: linear-gradient(135deg, #25d366, #128c7e);
color: white;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.consultation-nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.appointment-nav-btn {
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
color: white;
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.3);
}
.appointment-nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(106, 27, 154, 0.4);
}
.mobile-menu-btn {
display: none !important;
background: none;
border: none;
cursor: pointer;
padding: 8px;
border-radius: 4px;
transition: all 0.3s ease;
z-index: 1001;
width: 30px;
height: 30px;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
/* Tablet styles */
@media (max-width: 992px) and (min-width: 769px) {
.mobile-auth-button {
display: flex !important;
}
.mobile-menu-btn {
display: flex !important;
}
.nav-actions {
display: none !important;
}
/* Hide mobile action buttons in tablet */
.mobile-action-buttons {
display: none !important;
}
/* Ensure buttons work in tablet */
.btn, .action-btn, .status-btn, .info-btn {
cursor: pointer !important;
pointer-events: auto !important;
}
}
/* Force display in mobile */
@media (max-width: 768px) {
.mobile-menu-btn {
display: flex !important;
}
.mobile-auth-button {
display: flex !important;
}
/* Show mobile action buttons only in mobile */
.mobile-action-buttons {
display: flex !important;
}
}
/* Desktop styles */
@media (min-width: 769px) {
.mobile-menu-btn {
display: none !important;
}
.nav-actions {
display: flex !important;
}
/* Hide mobile action buttons in desktop and tablet */
.mobile-action-buttons {
display: none !important;
}
.nav-menu {
display: flex !important;
position: static !important;
background: none !important;
width: auto !important;
height: auto !important;
flex-direction: row !important;
padding: 0 !important;
transform: none !important;
opacity: 1 !important;
box-shadow: none !important;
z-index: auto !important;
}
.nav-menu li {
margin: 0 10px !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Ensure nav-action-btn works in desktop */
.nav-action-btn {
display: inline-block !important;
cursor: pointer !important;
pointer-events: auto !important;
position: relative !important;
z-index: 10 !important;
}
.nav-action-btn:hover {
transform: translateY(-2px) !important;
}
/* Ensure all buttons work in desktop */
.btn, .action-btn, .status-btn, .info-btn {
cursor: pointer !important;
pointer-events: auto !important;
position: relative !important;
z-index: 10 !important;
}
.btn:hover, .action-btn:hover, .status-btn:hover, .info-btn:hover {
transform: translateY(-2px) !important;
}
/* Hide mobile menu elements in desktop */
.mobile-menu-header,
.mobile-menu-title,
.mobile-close-btn,
.mobile-auth-section,
.mobile-auth-button {
display: none !important;
}
/* Disable mobile menu overlay in desktop */
.nav-menu::before {
display: none !important;
}
}
/* Large Desktop styles */
@media (min-width: 993px) {
.nav-menu {
display: flex !important;
position: static !important;
background: none !important;
width: auto !important;
height: auto !important;
flex-direction: row !important;
padding: 0 !important;
transform: none !important;
opacity: 1 !important;
box-shadow: none !important;
z-index: auto !important;
}
.nav-menu li {
margin: 0 10px !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* Ensure nav-action-btn works in large desktop */
.nav-action-btn {
display: inline-block !important;
cursor: pointer !important;
pointer-events: auto !important;
position: relative !important;
z-index: 10 !important;
}
.nav-action-btn:hover {
transform: translateY(-2px) !important;
}
/* Ensure all buttons work in large desktop */
.btn, .action-btn, .status-btn, .info-btn {
cursor: pointer !important;
pointer-events: auto !important;
position: relative !important;
z-index: 10 !important;
}
.btn:hover, .action-btn:hover, .status-btn:hover, .info-btn:hover {
transform: translateY(-2px) !important;
}
/* Hide mobile menu elements in large desktop */
.mobile-menu-header,
.mobile-menu-title,
.mobile-close-btn,
.mobile-auth-section,
.mobile-auth-button {
display: none !important;
}
/* Disable mobile menu overlay in large desktop */
.nav-menu::before {
display: none !important;
}
}
.mobile-menu-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}
.hamburger-line {
width: 20px;
height: 3px;
background: #fff;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: center;
display: block;
}
/* Hamburger Animation */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-btn.active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.mobile-menu-btn.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Hover Effects */
.mobile-menu-btn:hover .hamburger-line {
background: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
/* Mobile Menu Overlay - حذف شده */
/* مشکل overlay سیاه حل شد */
/* Menu Items Animation */
.nav-menu li {
opacity: 0;
transform: translateX(30px);
transition: all 0.3s ease;
}
.nav-menu.active li {
opacity: 1;
transform: translateX(0);
}
.nav-menu.active li:nth-child(1) { transition-delay: 0.1s; }
.nav-menu.active li:nth-child(2) { transition-delay: 0.2s; }
.nav-menu.active li:nth-child(3) { transition-delay: 0.3s; }
.nav-menu.active li:nth-child(4) { transition-delay: 0.4s; }
.nav-menu.active li:nth-child(5) { transition-delay: 0.5s; }
.nav-menu.active li:nth-child(6) { transition-delay: 0.6s; }
/* ---------- Medium Desktop Header Layout (keep menu horizontal but give it its own row) ---------- */
@media (min-width: 993px) and (max-width: 1200px) {
.header-top {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
width: 100%;
}
.header-top .logo {
order: 1;
flex: 0 1 auto;
text-align: right;
}
.header-top .nav-actions {
order: 2;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: 0;
}
.header-top .nav-menu {
order: 3;
width: 100%;
justify-content: center;
margin-right: 0;
margin-top: 0.25rem;
flex-wrap: wrap;
}
.header-top .nav-menu li {
margin: 0 8px;
}
}
/* Hero Slider */
.hero-slider {
position: relative;
height: 650px; /* افزایش از 500px به 650px */
overflow: hidden;
margin-bottom: 3rem;
width: 100%;
}
.hero-slider.gradient-bg-extended {
animation: none;
background-size: 100% 100%;
}
.hero-slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slider .slide.active {
opacity: 1;
}
.hero-slider .slide-content {
text-align: center;
padding: 20px;
max-width: 800px;
width: 90%;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
background: rgba(74, 21, 75, 0.8);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-slider .slide-content h2 {
font-size: 2.5rem;
margin-bottom: 15px;
font-weight: 700;
background: linear-gradient(
45deg,
#4A148C, #6A1B9A, #7B1FA2, #9C27B0,
#AB47BC, #BA68C8, #CE93D8, #E1BEE7,
#CE93D8, #BA68C8, #AB47BC, #9C27B0,
#7B1FA2, #6A1B9A, #4A148C
);
background-size: 400% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
animation: gradient-shift 5s ease infinite;
}
@keyframes gradient-shift {
0% {
background-position: 0% 0%;
}
25% {
background-position: 100% 0%;
}
50% {
background-position: 100% 100%;
}
75% {
background-position: 0% 100%;
}
100% {
background-position: 0% 0%;
}
}
.hero-slider .slide-content p {
font-size: 1.2rem;
margin-bottom: 25px;
line-height: 1.6;
color: #C0C0C0;
position: relative;
}
.hero-slider .slide-content p {
font-size: 1.2rem;
margin-bottom: 25px;
line-height: 1.6;
color: #B0B0B0;
position: relative;
display: inline-block;
}
.hero-slider .slide-content p {
font-size: 1.2rem;
margin-bottom: 25px;
line-height: 1.6;
width: 100%;
text-align: center;
color: #B8B8B8;
text-shadow:
0 0 2px rgba(255, 255, 255, 0.8),
0 0 4px rgba(200, 200, 200, 0.6),
0 0 6px rgba(180, 180, 180, 0.4),
0 1px 1px rgba(0, 0, 0, 0.3);
}
/* ============================================ */
/* Hero Buttons Styling - Purple Gradient */
/* ============================================ */
.hero-btn.consultation-btn,
.hero-btn.appointment-btn {
/* گرادیانت اصلی */
background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 15%, #7B1FA2 30%, #9C27B0 45%, #AB47BC 60%, #BA68C8 75%, #CE93D8 90%, #E1BEE7 100%);
/* رنگ متن - سفید روشن برای خوانایی */
color: #FFFFFF;
/* سایه اولیه */
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.4);
/* گوشههای گرد */
border-radius: 50px;
/* فونت */
font-weight: 600;
font-size: 16px;
/* فاصله داخلی */
padding: 14px 32px;
/* حذف استایلهای پیشفرض */
border: none;
outline: none;
text-decoration: none !important;
cursor: pointer;
/* انتقال نرم */
transition: all 0.3s ease;
/* جلوگیری از انتخاب متن */
user-select: none;
/* موقعیت و اندازه */
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
min-height: 50px;
/* موقعیت بالای عناصر دیگر */
position: relative;
z-index: 20;
/* overflow برای جلوگیری از مشکل گوشهها */
overflow: hidden;
}
/* افکت درخشش روی دکمه */
.hero-btn.consultation-btn::before,
.hero-btn.appointment-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s ease;
z-index: 1;
}
/* Hover - وقتی موس روی دکمه میره */
.hero-btn.consultation-btn:hover,
.hero-btn.appointment-btn:hover {
/* گرادیانت تیرهتر برای hover */
background: linear-gradient(135deg, #38006b 0%, #4A148C 15%, #6A1B9A 30%, #7B1FA2 45%, #9C27B0 60%, #AB47BC 75%, #BA68C8 90%, #CE93D8 100%);
/* سایه بزرگتر */
box-shadow: 0 8px 25px rgba(106, 27, 154, 0.5);
/* کمی بزرگتر شدن */
transform: translateY(-3px) scale(1.02);
/* روشنتر شدن متن */
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* افکت درخشش هنگام hover */
.hero-btn.consultation-btn:hover::before,
.hero-btn.appointment-btn:hover::before {
left: 100%;
}
/* Active - وقتی دکمه کلیک میشه */
.hero-btn.consultation-btn:active,
.hero-btn.appointment-btn:active {
/* گرادیانت معکوس و تیرهتر */
background: linear-gradient(135deg, #E1BEE7 0%, #CE93D8 15%, #BA68C8 30%, #AB47BC 45%, #9C27B0 60%, #7B1FA2 75%, #6A1B9A 90%, #4A148C 100%);
/* سایه کوچکتر (فشار خوردن) */
box-shadow: 0 2px 8px rgba(106, 27, 154, 0.3);
/* کوچکتر شدن */
transform: translateY(1px) scale(0.98);
/* رنگ متن تیرهتر */
color: #4A148C;
text-shadow: none;
}
/* Focus - برای دسترسیپذیری */
.hero-btn.consultation-btn:focus-visible,
.hero-btn.appointment-btn:focus-visible {
outline: 3px solid #E1BEE7;
outline-offset: 3px;
}
/* ============================================ */
/* Responsive - موبایل */
/* ============================================ */
@media (max-width: 768px) {
.hero-btn.consultation-btn,
.hero-btn.appointment-btn {
width: 100%;
max-width: 280px;
padding: 16px 24px;
font-size: 15px;
min-height: 54px;
/* جلوگیری از zoom شدن در iOS */
-webkit-appearance: none;
appearance: none;
font-size: 16px; /* حداقل ۱۶px */
}
.hero-btn.consultation-btn:hover,
.hero-btn.appointment-btn:hover {
transform: translateY(-2px) scale(1.01);
}
.hero-btn.consultation-btn:active,
.hero-btn.appointment-btn:active {
transform: translateY(1px) scale(0.99);
}
}
/* ============================================ */
/* دکمه خدمات - استایل متفاوت */
/* ============================================ */
.hero-btn.services-btn {
background: transparent;
color: #FFFFFF;
border: 2px solid rgba(255, 255, 255, 0.8);
border-radius: 50px;
padding: 12px 30px;
font-weight: 600;
font-size: 16px;
min-width: 200px;
min-height: 50px;
transition: all 0.3s ease;
position: relative;
z-index: 20;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
cursor: pointer;
user-select: none;
}
.hero-btn.services-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #FFFFFF;
color: #FFFFFF;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}
.hero-btn.services-btn:active {
background: rgba(255, 255, 255, 0.25);
transform: translateY(1px);
}
.hero-btn.services-btn:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.5);
outline-offset: 3px;
}
.hero-slider .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(106, 27, 154, 0.5);
background: linear-gradient(135deg, #38006b 0%, #4A148C 15%, #6A1B9A 30%, #7B1FA2 45%, #9C27B0 60%, #AB47BC 75%, #BA68C8 90%, #CE93D8 100%);
}
/* Slider Controls */
.hero-slider .slider-controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 15px;
z-index: 10;
}
.hero-slider .slider-controls button {
background: rgba(255, 255, 255, 0.3);
border: none;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
transition: all 0.3s ease;
}
.hero-slider .slider-controls button:hover {
background: rgba(255, 255, 255, 0.6);
}
/* Slider Dots - موقعیت وسط بالا */
.hero-slider .slider-dots {
display: flex !important;
justify-content: center !important;
gap: 12px !important;
position: absolute !important;
top: 20px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 100 !important;
padding: 10px 20px !important;
background: rgba(106, 27, 154, 0.15) !important;
backdrop-filter: blur(10px) !important;
border-radius: 25px !important;
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.2) !important;
}
.hero-slider .dot {
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
background: rgba(255, 255, 255, 0.3) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
padding: 0 !important;
outline: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}
.hero-slider .dot.active {
width: 40px !important;
height: 14px !important;
border-radius: 7px !important;
border: none !important;
background: linear-gradient(135deg, #4A148C 0%, #6A1B9A 15%, #7B1FA2 30%, #9C27B0 45%, #AB47BC 60%, #BA68C8 75%, #CE93D8 90%, #E1BEE7 100%) !important;
cursor: pointer !important;
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.5) !important;
transform: scale(1.1) !important;
}
.hero-slider .dot:hover {
transform: scale(1.2) !important;
border-color: rgba(255, 255, 255, 0.9) !important;
background: rgba(255, 255, 255, 0.5) !important;
}
/* ریسپانسیو - موبایل */
@media (max-width: 768px) {
.hero-slider {
height: 500px;
}
.hero-slider .slider-dots {
top: 15px !important;
padding: 8px 15px !important;
gap: 10px !important;
}
.hero-slider .dot {
width: 12px !important;
height: 12px !important;
}
.hero-slider .dot.active {
width: 35px !important;
height: 12px !important;
}
.hero-slider .slide-content h2 {
font-size: 1.8rem;
}
.hero-slider .slide-content p {
font-size: 1rem;
}
.hero-slider .btn {
padding: 10px 25px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.hero-slider {
height: 400px;
}
.hero-slider .slider-dots {
top: 10px !important;
padding: 6px 12px !important;
gap: 8px !important;
}
.hero-slider .dot {
width: 10px !important;
height: 10px !important;
}
.hero-slider .dot.active {
width: 30px !important;
height: 10px !important;
}
.hero-slider .slide-content h2 {
font-size: 1.4rem;
}
.hero-slider .slide-content p {
font-size: 0.9rem;
}
.hero-slider .btn {
padding: 8px 20px;
font-size: 0.85rem;
}
}
/* ============================================ */
/* Hero Slider Mobile Fixes */
/* ============================================ */
/* اطمینان از اینکه دکمهها قابل کلیک هستند */
.hero-popup-trigger {
cursor: pointer;
touch-action: manipulation; /* مهم برای موبایل */
-webkit-tap-highlight-color: transparent; /* حذف highlight آبی در موبایل */
user-select: none;
pointer-events: auto !important;
}
/* بهبود touch target */
.hero-popup-trigger,
.slider-prev,
.slider-next,
.slider-dots .dot {
touch-action: manipulation;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* اطمینان از اینکه نقاط اسلایدر قابل کلیک هستند */
.slider-dots .dot {
cursor: pointer;
min-width: 12px;
min-height: 12px;
padding: 8px; /* افزایش area قابل کلیک */
}
/* جلوگیری از zoom شدن در موبایل هنگام دابل کلیک */
.hero-slider {
touch-action: pan-y pinch-zoom;
}
.slide-content .btn {
touch-action: manipulation;
}
/* About Doctor Section */
.about-doctor {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.about-content {
display: flex;
align-items: center;
gap: 60px;
position: relative;
z-index: 2;
}
.about-image {
flex: 1;
max-width: 600px;
position: relative;
z-index: 100;
}
.doctor-slider-container {
position: relative;
width: 100%;
z-index: 100;
}
.doctor-slider-wrapper {
position: relative;
width: 100%;
overflow: visible;
border-radius: 20px;
z-index: 100;
min-height: 800px;
}
.doctor-slider-track {
position: relative;
width: 100%;
height: 800px;
z-index: 100;
}
.doctor-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.8s ease-in-out;
pointer-events: none;
z-index: 100;
}
.doctor-slide.active {
opacity: 1;
pointer-events: auto;
z-index: 101;
}
.image-frame {
width: 100% !important;
height: 100% !important;
position: relative !important;
overflow: hidden !important;
border-radius: 30px !important;
box-shadow: 0 20px 40px rgba(0,0,0,0.15) !important;
background: rgba(128, 128, 128, 0.25) !important;
border: 2px solid rgba(150, 150, 150, 0.4) !important;
backdrop-filter: blur(10px) !important;
padding: 0 !important;
z-index: 101 !important;
}
.doctor-image {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
transition: transform 0.3s ease;
z-index: 102;
position: relative;
border-radius: 28px;
background: transparent;
}
.doctor-image.doctor-image-first {
object-position: center;
}
.doctor-image.doctor-image-second {
object-position: center;
}
.doctor-image.doctor-image-third {
object-position: center;
}
.image-frame:hover .doctor-image {
transform: scale(1.01);
}
.doctor-slider-dots {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
position: absolute !important;
bottom: 0px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 103 !important;
padding: 8px 15px !important;
background: rgba(128, 128, 128, 0.25) !important;
backdrop-filter: blur(10px) !important;
border-radius: 20px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}
@media (min-width: 769px) {
.doctor-slider-dots {
bottom: 150px !important;
}
}
@media (min-width: 1024px) {
.doctor-slider-dots {
bottom: 150px !important;
}
}
@media (min-width: 1440px) {
.doctor-slider-dots {
bottom: 150px !important;
}
}
.doctor-slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(139, 92, 246, 0.5);
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
outline: none;
}
.doctor-slider-dot:hover {
border-color: rgba(139, 92, 246, 0.8);
background: rgba(139, 92, 246, 0.3);
transform: scale(1.2);
}
.doctor-slider-dot.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
width: 32px;
border-radius: 6px;
}
.about-text {
flex: 1;
padding-right: 40px;
position: relative;
z-index: 2;
background: #f9f9f9;
border-radius: 20px;
padding: 30px 30px 30px 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-frame:hover .image-overlay {
opacity: 1;
}
.overlay-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: white;
text-align: center;
}
.overlay-content i {
font-size: 3rem;
margin-bottom: 10px;
}
.overlay-content span {
font-size: 1.1rem;
font-weight: 600;
}
.image-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 10px 15px;
border-radius: 25px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.image-decoration {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: -1;
}
.decoration-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
animation: float 6s ease-in-out infinite;
}
.circle-1 {
width: 100px;
height: 100px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.circle-2 {
width: 150px;
height: 150px;
top: 60%;
right: 10%;
animation-delay: 2s;
}
.circle-3 {
width: 80px;
height: 80px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
/* Responsive Design for About Doctor */
@media (max-width: 768px) {
.about-doctor {
padding-top: 70px !important;
padding-bottom: 30px !important;
margin-top: 0 !important;
}
.about-content {
flex-direction: column;
gap: 0px !important;
margin-top: 0 !important;
}
.about-image {
max-width: 100%;
order: 1;
margin-top: 40px !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}
.doctor-slider-container {
margin-top: 0 !important;
}
.image-frame {
height: 700px;
}
.about-text {
padding-right: 0;
padding-top: 0 !important;
margin-top: 0 !important;
order: 2;
}
.decoration-circle {
display: none;
}
}
@media (max-width: 480px) {
.image-frame {
height: 620px;
}
.doctor-image {
object-fit: contain !important;
object-position: center !important;
}
.doctor-image.doctor-image-first {
object-position: center !important;
}
.doctor-image.doctor-image-second {
object-position: center !important;
}
.doctor-image.doctor-image-third {
object-position: center !important;
}
.doctor-slider-dots {
bottom: 300px !important;
}
.overlay-content i {
font-size: 2rem;
}
.overlay-content span {
font-size: 1rem;
}
.image-badge {
top: 15px;
right: 15px;
padding: 8px 12px;
font-size: 0.9rem;
}
}
/* عنوانهای صفحات - رنگ نقرهای قشنگ */
.blog-hero h1,
.contact-hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #fff, #f0f0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* عنوان مقالات در وبلاگ - رنگ سفید */
.blog-post-card h3,
.blog-post-card .post-title,
.blog-post-card h2,
.blog-post-card h4 {
color: white !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: unset !important;
background-clip: unset !important;
text-shadow: none !important;
}
/* صفحه تماس - وایت مود */
body.white-mode .contact-card h3,
body.white-mode .contact-card p,
body.white-mode .contact-card span,
body.white-mode .contact-card .contact-item,
body.white-mode .contact-card .contact-item span,
body.white-mode .contact-card .contact-details span,
body.white-mode .contact-card .contact-actions span,
body.white-mode .emergency-content h2,
body.white-mode .emergency-content p,
body.white-mode .emergency-content span,
body.white-mode .emergency-content .btn span,
body.white-mode .form-group label,
body.white-mode .form-group input,
body.white-mode .form-group textarea,
body.white-mode .form-group select {
color: white !important;
}
/* فرم تماس - وایت مود */
body.white-mode .contact-form-section h2,
body.white-mode .contact-form-section p,
body.white-mode .contact-form label,
body.white-mode .contact-form input,
body.white-mode .contact-form textarea,
body.white-mode .contact-form select {
color: white !important;
}
body.white-mode .contact-form input,
body.white-mode .contact-form textarea,
body.white-mode .contact-form select {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: white !important;
}
body.white-mode .contact-form input::placeholder,
body.white-mode .contact-form textarea::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
/* فرم تماس - متن تایپ شده */
body.white-mode .contact-form input:focus,
body.white-mode .contact-form textarea:focus,
body.white-mode .contact-form select:focus {
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
color: white !important;
outline: none !important;
}
body.white-mode .contact-form input:not(:placeholder-shown),
body.white-mode .contact-form textarea:not(:placeholder-shown) {
background: rgba(255, 255, 255, 0.2) !important;
color: white !important;
}
/* اعتبارسنجی فرم - رنگهای درست */
body.white-mode .contact-form input:invalid:not(:placeholder-shown) {
border: 1px solid #dc3545 !important;
background: rgba(220, 53, 69, 0.1) !important;
}
body.white-mode .contact-form input:valid:not(:placeholder-shown) {
border: 1px solid #28a745 !important;
background: rgba(40, 167, 69, 0.1) !important;
}
body.white-mode .contact-form textarea:invalid:not(:placeholder-shown) {
border: 1px solid #dc3545 !important;
background: rgba(220, 53, 69, 0.1) !important;
}
body.white-mode .contact-form textarea:valid:not(:placeholder-shown) {
border: 1px solid #28a745 !important;
background: rgba(40, 167, 69, 0.1) !important;
}
/* ایمیل - اعتبارسنجی درست */
body.white-mode .contact-form input[type="email"]:invalid:not(:placeholder-shown) {
border: 1px solid #28a745 !important;
background: rgba(220, 53, 69, 0.1) !important;
}
body.white-mode .contact-form input[type="email"]:valid:not(:placeholder-shown) {
border: 1px solid #dc3545 !important;
background: rgba(40, 167, 69, 0.1) !important;
}
body.white-mode .contact-card,
body.white-mode .emergency-content,
body.white-mode .contact-form {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(10px) !important;
}
body.white-mode .form-group input,
body.white-mode .form-group textarea,
body.white-mode .form-group select {
background: rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: white !important;
}
body.white-mode .form-group input::placeholder,
body.white-mode .form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.7) !important;
}
/* سایر عناصر صفحه تماس - وایت مود */
body.white-mode .contact-methods h2,
body.white-mode .contact-form-section h2,
body.white-mode .emergency-contact h2,
body.white-mode .contact-methods p,
body.white-mode .contact-form-section p,
body.white-mode .emergency-contact p {
color: white !important;
}
body.white-mode .contact-methods,
body.white-mode .contact-form-section,
body.white-mode .emergency-contact {
background: rgba(255, 255, 255, 0.05) !important;
}
/* آیکونهای تماس - وایت مود */
body.white-mode .contact-card .contact-icon i,
body.white-mode .emergency-content .emergency-icon i,
body.white-mode .contact-card .contact-item i,
body.white-mode .contact-card .contact-actions i,
body.white-mode .emergency-content .btn i {
color: white !important;
font-size: 1.5rem !important;
}
/* CSS قوی برای تمام عناصر تماس */
body.white-mode .contact-card * {
color: white !important;
}
body.white-mode .contact-card .btn {
background: rgba(255, 255, 255, 0.2) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
color: white !important;
}
/* استایل جدید برای بخش اورژانسی */
.contact-card.emergency-card {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.contact-card.emergency-card .contact-icon {
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.contact-card.emergency-card .contact-icon i {
font-size: 1.5rem;
color: white;
}
.contact-card.emergency-card .contact-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.contact-card.emergency-card .btn {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.5);
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.contact-card.emergency-card .btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.instagram-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(255, 255, 255, 0.2);
color: white !important; /* اجبار رنگ سفید */
text-decoration: none;
padding: 12px 20px;
border-radius: 25px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
position: relative;
z-index: 2;
}
.instagram-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
color: white !important; /* اجبار رنگ سفید */
text-decoration: none;
}
.instagram-btn i {
font-size: 16px;
color: white !important; /* اجبار رنگ سفید */
}
/* Instagram Box Responsive */
@media (max-width: 768px) {
.instagram-box {
padding: 20px;
margin-bottom: 20px;
max-width: 380px; /* عرض هم اندازه عکس در موبایل - افزایش از 280px به 380px */
}
.instagram-header {
gap: 12px;
margin-bottom: 15px;
}
.instagram-icon {
width: 40px;
height: 40px;
font-size: 20px;
}
.instagram-info h4 {
font-size: 16px;
}
.instagram-info p {
font-size: 12px;
}
.instagram-stats {
margin-bottom: 15px;
}
.stat-number {
font-size: 18px;
}
.stat-label {
font-size: 11px;
}
.instagram-btn {
padding: 10px 16px;
font-size: 13px;
}
.instagram-btn i {
font-size: 14px;
}
}
@media (max-width: 480px) {
.instagram-box {
padding: 15px;
margin-bottom: 15px;
max-width: 300px; /* عرض هم اندازه عکس در موبایل کوچک - افزایش از 220px به 300px */
}
.instagram-header {
gap: 10px;
margin-bottom: 12px;
}
.instagram-icon {
width: 35px;
height: 35px;
font-size: 18px;
}
.instagram-info h4 {
font-size: 14px;
}
.instagram-info p {
font-size: 11px;
}
.instagram-stats {
margin-bottom: 12px;
}
.stat-number {
font-size: 16px;
}
.stat-label {
font-size: 10px;
}
.instagram-btn {
padding: 8px 14px;
font-size: 12px;
}
.instagram-btn i {
font-size: 12px;
}
}
.about-doctor::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start; /* تغییر به start برای قرارگیری باکس بالای عکس */
position: relative;
z-index: 2;
}
.about-text h2 {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
line-height: 1.2;
}
.about-text h3 {
font-size: 1.3rem;
color: #6A1B9A;
font-weight: 600;
margin-bottom: 30px;
line-height: 1.4;
}
.about-description {
margin-bottom: 40px;
}
.about-description p {
font-size: 16px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
text-align: justify;
direction: rtl;
}
/* Responsive design for about description */
@media (max-width: 768px) {
.about-description p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
text-align: right;
}
}
@media (max-width: 480px) {
.about-description p {
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
}
}
/* بخش جراحی های انجام شده */
.surgery-expertise {
margin: 50px 0 40px;
padding: 40px;
background: linear-gradient(135deg, rgba(106, 27, 154, 0.03) 0%, rgba(156, 39, 176, 0.05) 100%);
border-radius: 20px;
border: 2px solid rgba(106, 27, 154, 0.1);
}
.expertise-header {
text-align: center;
margin-bottom: 40px;
}
.expertise-header h3 {
font-size: 28px;
font-weight: 700;
color: var(--primary);
position: relative;
display: inline-block;
padding-bottom: 15px;
}
.expertise-header h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary), transparent);
}
.expertise-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.expertise-card {
background: white;
padding: 30px;
border-radius: 15px;
border: 2px solid rgba(106, 27, 154, 0.1);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.expertise-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(106, 27, 154, 0.03) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.expertise-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(106, 27, 154, 0.2);
border-color: var(--primary);
}
.expertise-card:hover::before {
opacity: 1;
}
.expertise-card.highlight {
background: linear-gradient(135deg, rgba(106, 27, 154, 0.08) 0%, rgba(156, 39, 176, 0.05) 100%);
border-color: var(--primary);
}
.expertise-card.highlight::after {
content: '★';
position: absolute;
top: 15px;
left: 15px;
font-size: 24px;
color: var(--primary);
opacity: 0.3;
}
.expertise-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-dark), var(--primary));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(106, 27, 154, 0.3);
transition: all 0.3s ease;
}
.expertise-card:hover .expertise-icon {
transform: rotate(-5deg) scale(1.1);
box-shadow: 0 12px 30px rgba(106, 27, 154, 0.4);
}
.expertise-icon i {
font-size: 32px;
color: white;
}
.expertise-content h4 {
font-size: 20px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 15px;
position: relative;
padding-right: 15px;
}
.expertise-content h4::before {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 70%;
background: linear-gradient(180deg, var(--primary), var(--primary-light));
border-radius: 2px;
}
.expertise-content p {
font-size: 15px;
line-height: 1.8;
color: #555;
text-align: justify;
margin: 0;
}
.expertise-card.highlight .expertise-content h4 {
color: var(--primary);
}
.expertise-card.highlight .expertise-content p {
color: #333;
font-weight: 500;
}
.doctor-credentials {
margin-bottom: 40px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
.credential-item {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 25px;
background: linear-gradient(135deg, #ffffff 0%, #f8f4fb 100%);
border-radius: 15px;
box-shadow: 0 4px 20px rgba(106, 27, 154, 0.1);
border: 1px solid rgba(106, 27, 154, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.credential-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, #6A1B9A, #9C27B0);
opacity: 0;
transition: opacity 0.3s ease;
}
.credential-item:hover::before {
opacity: 1;
}
.credential-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(106, 27, 154, 0.2);
border-color: rgba(106, 27, 154, 0.3);
}
.credential-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.3);
}
.credential-content {
flex: 1;
}
.credential-content h4 {
font-size: 1.1rem;
color: var(--primary-dark);
margin: 0 0 10px 0;
font-weight: 700;
}
.credential-content p {
font-size: 0.95rem;
color: #555;
line-height: 1.7;
margin: 0;
}
/* Responsive design for doctor credentials */
@media (max-width: 992px) {
.about-content {
grid-template-columns: 1fr;
gap: 30px;
}
.about-image .doctor-slider-track {
height: 640px;
}
.about-image .image-frame {
height: 100%;
}
.about-text {
padding: 0px !important;
padding-top: 0px !important;
margin-top: 0px !important;
}
.about-actions {
justify-content: center;
}
.about-actions .btn {
flex: 1 1 45%;
justify-content: center;
}
.surgery-expertise {
padding: 30px 20px;
margin: 40px 0 30px;
}
.expertise-header h3 {
font-size: 24px;
}
.expertise-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.expertise-card {
padding: 25px;
}
.expertise-icon {
width: 60px;
height: 60px;
}
.expertise-icon i {
font-size: 28px;
}
.expertise-content h4 {
font-size: 18px;
}
.expertise-content p {
font-size: 14px;
}
.doctor-credentials {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 768px) {
.about-image {
margin-top: 40px !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}
.about-image .doctor-slider-track {
height: 500px;
}
.about-image .image-frame {
height: 100%;
}
.doctor-image {
object-fit: contain !important;
object-position: center !important;
}
.doctor-image.doctor-image-first {
object-position: center !important;
}
.doctor-image.doctor-image-second {
object-position: center !important;
}
.doctor-image.doctor-image-third {
object-position: center !important;
}
.doctor-slider-dots {
bottom: 250px !important;
}
}
@media (max-width: 480px) {
.doctor-slider-dots {
bottom: 300px !important;
}
.about-actions {
gap: 12px;
}
.about-actions .btn {
flex: 1 1 100%;
justify-content: center;
padding: 12px 16px;
}
.surgery-expertise {
padding: 25px 15px;
margin: 30px 0 25px;
}
.expertise-header h3 {
font-size: 20px;
}
.expertise-grid {
gap: 15px;
}
.expertise-card {
padding: 20px;
}
.expertise-icon {
width: 55px;
height: 55px;
}
.expertise-icon i {
font-size: 24px;
}
.expertise-content h4 {
font-size: 16px;
margin-bottom: 12px;
}
.expertise-content p {
font-size: 13px;
line-height: 1.7;
}
.doctor-credentials {
grid-template-columns: 1fr;
gap: 18px;
}
.credential-item {
padding: 20px;
gap: 15px;
}
.credential-icon {
width: 55px;
height: 55px;
font-size: 22px;
}
.credential-content h4 {
font-size: 1rem;
}
.credential-content p {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.surgery-expertise {
padding: 20px 12px;
margin: 25px 0 20px;
border-radius: 15px;
}
.expertise-header h3 {
font-size: 18px;
padding-bottom: 12px;
}
.expertise-grid {
gap: 12px;
}
.expertise-card {
padding: 18px;
}
.expertise-card.highlight::after {
font-size: 20px;
top: 12px;
left: 12px;
}
.expertise-icon {
width: 50px;
height: 50px;
border-radius: 12px;
margin-bottom: 15px;
}
.expertise-icon i {
font-size: 22px;
}
.expertise-content h4 {
font-size: 15px;
margin-bottom: 10px;
padding-right: 12px;
}
.expertise-content h4::before {
width: 3px;
}
.expertise-content p {
font-size: 12px;
line-height: 1.6;
}
.doctor-credentials {
gap: 15px;
}
.credential-item {
padding: 18px;
gap: 12px;
}
.credential-icon {
width: 50px;
height: 50px;
font-size: 20px;
border-radius: 12px;
}
.credential-content h4 {
font-size: 0.95rem;
margin-bottom: 8px;
}
.credential-content p {
font-size: 0.85rem;
line-height: 1.6;
}
}
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.about-stats .stat-item {
text-align: center;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
color: #333 !important; /* اجبار رنگ تیره برای وایت مود */
}
.about-stats .stat-item:hover {
transform: translateY(-5px);
}
.about-stats .stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: #6A1B9A !important; /* اجبار رنگ بنفش */
margin-bottom: 5px;
}
.about-stats .stat-label {
font-size: 14px;
color: #666 !important; /* اجبار رنگ تیره */
font-weight: 500;
}
.about-actions {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: flex-start;
}
.about-actions .btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
font-size: 14px;
}
.about-actions .btn-primary {
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
color: white;
border: none;
}
.about-actions .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(106, 27, 154, 0.4);
}
.about-actions .btn-outline {
background: transparent;
color: #6A1B9A;
border: 2px solid #6A1B9A;
}
.about-actions .btn-outline:hover {
background: #6A1B9A;
color: white;
transform: translateY(-3px);
}
.overlay-content {
text-align: center;
color: white;
}
.overlay-content i {
font-size: 3rem;
margin-bottom: 10px;
display: block;
}
.overlay-content span {
font-size: 16px;
font-weight: 600;
}
.image-badge {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
padding: 8px 15px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 5px;
font-size: 12px;
z-index: 15; /* روی همه چیز */
font-weight: 600;
color: #6A1B9A;
backdrop-filter: blur(10px);
}
.image-decoration {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1; /* زیر باکس اینستاگرام و عکس */
}
.decoration-circle {
position: absolute;
border: 2px solid rgba(106, 27, 154, 0.2);
border-radius: 50%;
animation: rotate 20s linear infinite;
z-index: 1; /* زیر باکس اینستاگرام و عکس */
}
.circle-1 {
width: 200px;
height: 200px;
top: -50px;
right: -50px;
animation-delay: 0s;
}
.circle-2 {
width: 150px;
height: 150px;
bottom: -30px;
left: -30px;
animation-delay: -7s;
}
.circle-3 {
width: 100px;
height: 100px;
top: 50%;
left: -20px;
animation-delay: -14s;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Medical Articles in Footer */
.medical-articles {
margin-bottom: 20px;
}
.article-item {
display: flex;
gap: 20px;
margin-bottom: 20px;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.article-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(-5px);
}
.article-image {
position: relative;
width: 80px;
height: 60px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.article-item:hover .article-image img {
transform: scale(1.1);
}
.article-category {
position: absolute;
top: 5px;
right: 5px;
background: rgba(106, 27, 154, 0.9);
color: white;
padding: 2px 6px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
gap: 3px;
}
.article-content {
flex: 1;
}
.article-content h4 {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.4;
}
.article-content h4 a {
color: var(--text-light);
text-decoration: none;
transition: color 0.3s ease;
}
.article-content h4 a:hover {
color: var(--accent);
}
.article-meta {
display: flex;
gap: 20px;
margin-bottom: 8px;
font-size: 11px;
color: #aaa;
}
.article-meta span {
display: flex;
align-items: center;
gap: 3px;
}
.article-excerpt {
font-size: 12px;
color: #ccc;
line-height: 1.4;
margin: 0;
}
.view-all-articles {
text-align: center;
margin-top: 20px;
}
.view-all-articles .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: transparent;
color: var(--text-light);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.view-all-articles .btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
}
/* Consultation Section */
.consultation-section {
padding: 100px 0;
background: linear-gradient(135deg, #6A1B9A 0%, #9C27B0 100%);
color: white;
position: relative;
overflow: hidden;
}
/* Consultation Logged In */
.consultation-logged-in {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.consultation-info h4 {
color: #fff;
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.consultation-info p {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.consultation-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.consultation-actions .btn {
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.consultation-actions .btn-primary {
background: linear-gradient(135deg, #25d366, #128c7e);
color: white;
box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}
.consultation-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
.consultation-actions .btn-secondary {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.consultation-actions .btn-secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* Consultation Login Required */
.consultation-login-required {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.login-info h4 {
color: #fff;
font-size: 1.5rem;
margin-bottom: 1rem;
font-weight: 600;
}
.login-info p {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.6;
}
.login-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.login-actions .btn {
padding: 12px 24px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.login-actions .btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.login-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.login-actions .btn-secondary {
background: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.login-actions .btn-secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* Responsive Design for Consultation */
@media (max-width: 768px) {
.consultation-actions,
.login-actions {
flex-direction: column;
align-items: center;
}
.consultation-actions .btn,
.login-actions .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.consultation-logged-in,
.consultation-login-required {
padding: 1.5rem;
margin: 0 1rem;
}
}
.consultation-section::before {
display: none;
}
.consultation-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 2;
}
.consultation-text h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
}
.consultation-text p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
line-height: 1.6;
}
.consultation-features {
display: flex;
flex-direction: column;
gap: 30px;
}
.feature-item {
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.feature-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(-5px);
}
.feature-icon {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.feature-content h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.feature-content p {
font-size: 14px;
opacity: 0.8;
margin: 0;
}
.consultation-form {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.form-container h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 30px;
text-align: center;
}
.consultation-form-element {
display: flex;
flex-direction: column;
gap: 30px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-size: 14px;
font-weight: 600;
opacity: 0.9;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 16px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 14px;
transition: all 0.3s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.15);
}
.form-actions {
display: flex;
gap: 20px;
margin-top: 20px;
}
.form-actions .btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 14px;
}
.form-actions .btn-primary {
background: white;
color: #6A1B9A;
}
.form-actions .btn-primary:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
.form-actions .btn-outline {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.form-actions .btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
}
/* Review Actions */
.review-actions {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
margin-top: 30px;
}
.review-actions .btn {
display: flex;
align-items: center;
gap: 8px;
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
font-size: 16px;
}
.review-actions .btn-primary {
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
color: white;
border: none;
}
.review-actions .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(106, 27, 154, 0.4);
}
.review-actions .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.review-actions .btn-secondary:hover {
background: white;
color: #6A1B9A;
transform: translateY(-3px);
}
/* Services Section */
.section-title {
text-align: center;
margin: 3rem 0 2rem;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.section-title h2 {
font-size: 2.2rem;
background-image: linear-gradient(135deg,
#8b5cf6 0%,
#7c3aed 15%,
#a855f7 30%,
#9333ea 45%,
#6d28d9 60%,
#5b21b6 75%,
#4c1d95 90%,
#6A1B9A 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
animation: gradientTextShift 4s ease infinite;
display: inline-block;
padding: 4px 16px;
background-color: #f9f9f9;
border-radius: 8px;
z-index: 1;
position: relative;
font-weight: 700;
line-height: 1.3;
}
.section-title::before,
.section-title::after {
content: '';
height: 2px;
background: var(--gradient);
flex: 1;
border-radius: 2px;
}
@media (max-width: 768px) {
.section-title {
gap: 10px;
}
}
.services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.services .service-card.gradient-card {
padding: 0; /* remove default card padding so image/content align flush */
}
.service-card {
background: var(--text-light);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
transition: transform 0.26s ease, box-shadow 0.26s ease;
position: relative;
display: flex;
flex-direction: column;
min-height: 100%;
}
.service-card::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(124, 58, 237, 0.12), transparent 45%),
radial-gradient(circle at 80% 20%, rgba(106, 27, 154, 0.10), transparent 40%);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.15);
}
.service-card:hover::after {
opacity: 1;
transform: translateY(0);
}
.service-image {
position: relative;
height: 140px;
overflow: hidden;
}
.service-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.service-card:hover .service-img {
transform: scale(1.03);
}
.service-icon-circle {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--text-light);
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.3);
border: 3px solid var(--text-light);
z-index: 10;
}
.service-content {
padding: 1.85rem 1.75rem 1.9rem;
text-align: center;
position: relative;
margin-top: -26px; /* bring box up to reduce visible image */
background: #fff;
border-radius: 20px 20px 14px 14px;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
flex: 1;
}
.service-content h3 {
color: var(--primary);
margin-bottom: 1rem;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.45;
}
.service-content p {
color: #444;
line-height: 1.75;
font-size: 1rem;
}
/* Portfolio Section */
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.portfolio-item {
position: relative;
height: 250px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
.portfolio-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.portfolio-item:hover .portfolio-img {
transform: scale(1.1);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(106, 27, 154, 0.8);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
color: var(--text-light);
text-align: center;
padding: 1rem;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
/* Reviews Section */
.reviews {
background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
padding: 3.5rem 0;
color: #1e293b;
text-align: center;
margin-bottom: 3rem;
}
.reviews h2 {
font-size: 2.2rem;
margin-bottom: 1rem;
}
.reviews .section-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.reviews .section-title .soon-gradient {
margin-top: 6px;
}
.coming-soon {
font-size: 1.1rem;
margin-bottom: 2rem;
color: #475569;
}
.soon-gradient {
background: linear-gradient(135deg, #22d3ee 0%, #a855f7 35%, #f97316 70%, #22c55e 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
.reviews-slider {
margin: 24px 0 32px;
}
.reviews-track {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 10px 6px 20px;
scrollbar-width: none;
cursor: grab;
direction: ltr;
user-select: none;
}
.reviews-track::-webkit-scrollbar {
display: none;
}
.reviews-track.dragging {
cursor: grabbing;
}
.review-slide {
flex: 0 0 min(320px, 85%);
scroll-snap-align: center;
text-align: right;
direction: rtl;
user-select: none;
}
.review-slide * {
user-select: none;
}
.review-slide-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.review-slide-header i {
font-size: 2rem;
color: #6366f1;
}
.review-slide-header h4 {
margin: 0;
font-size: 1rem;
}
.review-slide-header span {
display: block;
font-size: 0.85rem;
color: #64748b;
}
.review-badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.12);
color: #4f46e5;
font-size: 0.8rem;
font-weight: 600;
}
.reviews-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.review-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(99, 102, 241, 0.3);
transition: all 0.2s ease;
}
.review-dot.active {
width: 20px;
background: var(--gradient-main);
}
/* Blog Section */
.blog {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.blog-card {
background: var(--text-light);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.blog-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.blog-content {
padding: 1.5rem;
}
.blog-content h3 {
color: var(--primary);
margin-bottom: 1.5rem;
}
.blog-meta {
color: #777;
font-size: 0.9rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 70px;
}
.read-more {
display: inline-block;
color: var(--primary);
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
}
.read-more:hover {
color: var(--primary-dark);
transform: translateX(-5px);
}
/* Portfolio overlay button */
.portfolio-overlay .btn {
background: rgba(255, 255, 255, 0.9);
color: var(--primary);
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.portfolio-overlay .btn:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.3);
}
/* Responsive Design */
@media (max-width: 992px) {
.header-top {
flex-wrap: nowrap;
gap: 1rem;
overflow: visible;
justify-content: space-between;
}
.nav-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-dark);
width: 100vw;
height: 100vh;
flex-direction: column;
padding: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(100%);
opacity: 0;
z-index: 9999;
box-shadow: none;
overflow-y: auto;
overflow-x: hidden; /* اضافه شده برای حل horizontal scroll */
pointer-events: none; /* اضافه شده برای حل مشکل کلیک */
}
/* Mobile Menu Overlay - حذف شده */
/* مشکل overlay سیاه حل شد */
.nav-menu.active {
transform: translateX(0);
opacity: 1;
pointer-events: auto; /* فعال کردن کلیک در حالت active */
}
.nav-menu li {
margin: 0;
width: 100%;
pointer-events: auto; /* فعال کردن کلیک روی لینکها */
}
.nav-menu a {
pointer-events: auto; /* فعال کردن کلیک روی لینکها */
display: block;
width: 100%;
max-width: 100%; /* اضافه شده برای حل horizontal scroll */
padding: 1.2rem 1.5rem; /* اضافه شده برای حل مشکل spacing - padding بیشتر */
color: #fff;
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
white-space: normal; /* تغییر شده برای حل مشکل spacing */
overflow: visible; /* تغییر شده برای حل مشکل spacing */
word-spacing: 0.2em; /* اضافه شده برای حل مشکل spacing - فاصله بیشتر بین کلمات */
font-family: 'Vazirmatn', sans-serif; /* اضافه شده برای حل مشکل spacing */
letter-spacing: 0.05em; /* اضافه شده برای حل مشکل spacing - فاصله بیشتر بین حروف */
line-height: 1.4; /* اضافه شده برای حل مشکل spacing */
}
.nav-menu a:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
/* Mobile Action Buttons */
.mobile-action-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem 1.5rem;
margin-top: 1rem;
width: 100%; /* اضافه شده برای حل horizontal scroll */
max-width: 100%; /* اضافه شده برای حل horizontal scroll */
box-sizing: border-box; /* اضافه شده برای حل horizontal scroll */
}
.mobile-action-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1.2rem; /* اضافه شده برای حل مشکل spacing - padding بیشتر */
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
color: #fff;
text-decoration: none;
transition: all 0.3s ease;
pointer-events: auto; /* فعال کردن کلیک */
width: 100%; /* اضافه شده برای حل horizontal scroll */
max-width: 100%; /* اضافه شده برای حل horizontal scroll */
box-sizing: border-box; /* اضافه شده برای حل horizontal scroll */
}
.mobile-action-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* Mobile Menu Header */
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 1.5rem; /* اضافه شده برای حل مشکل spacing - padding بیشتر */
background: rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1rem;
width: 100%; /* اضافه شده برای حل horizontal scroll */
max-width: 100%; /* اضافه شده برای حل horizontal scroll */
box-sizing: border-box; /* اضافه شده برای حل horizontal scroll */
}
.mobile-menu-title h3 {
color: #fff;
font-size: 1.2rem;
font-weight: 600;
margin: 0;
white-space: normal; /* تغییر شده برای حل مشکل spacing */
overflow: visible; /* تغییر شده برای حل مشکل spacing */
word-spacing: 0.2em; /* اضافه شده برای حل مشکل spacing - فاصله بیشتر بین کلمات */
font-family: 'Vazirmatn', sans-serif; /* اضافه شده برای حل مشکل spacing */
letter-spacing: 0.05em; /* اضافه شده برای حل مشکل spacing - فاصله بیشتر بین حروف */
line-height: 1.4; /* اضافه شده برای حل مشکل spacing */
}
/* Mobile Auth Section styles moved to general CSS */
.mobile-close-btn {
background: none;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0; /* اضافه شده برای حل horizontal scroll */
}
.mobile-close-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}
/* Mobile Menu Links */
.nav-menu a {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
color: #fff;
text-decoration: none;
font-size: 1.1rem;
font-weight: 500;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.nav-menu a.active {
color: #ffffff;
background: rgba(255, 255, 255, 0.18);
border-radius: 12px;
padding: 1rem 1.5rem;
}
.nav-menu a:hover {
background: rgba(255, 255, 255, 0.1);
padding-right: 2rem;
}
.nav-menu a i {
font-size: 1.2rem;
width: 20px;
text-align: center;
}
.mobile-menu-btn {
display: flex;
}
.nav-actions {
display: none;
}
.mobile-action-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
margin-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
padding: 1rem 1.5rem;
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
text-align: center;
width: 100%;
}
.consultation-mobile-btn {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.appointment-mobile-btn {
background: linear-gradient(135deg, #6a1b9a, #4a148c);
}
.auth-mobile-btn {
background: linear-gradient(135deg, #10b981, #059669);
}
.mobile-action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}
.mobile-action-btn i {
font-size: 1.2rem;
}
.auth-section {
margin-left: 0;
margin-top: 1rem;
}
.hero-slider {
height: 500px; /* افزایش از 400px به 500px */
}
.slide-content h2 {
font-size: 2rem;
}
}
/* ====== BLOG STYLES ====== */
/* Breadcrumb */
.breadcrumb {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 20px 0;
border-bottom: 1px solid #dee2e6;
}
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
}
.breadcrumb-nav a {
color: #6A1B9A;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-nav a:hover {
color: #4A154B;
}
.breadcrumb-nav .separator {
color: #6c757d;
font-weight: bold;
}
.breadcrumb-nav .current {
color: #495057;
font-weight: 500;
}
/* Blog Post Main Layout */
.blog-post-main {
padding: 40px 0;
background: #ffffff;
}
.blog-post-layout {
display: grid;
grid-template-columns: 1fr 300px;
gap: 40px;
align-items: start;
}
/* Blog Post Content */
.blog-post-content {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow: hidden;
position: relative;
z-index: 1;
}
/* Post Header */
.post-header {
padding: 40px 40px 20px;
border-bottom: 1px solid #f1f3f4;
}
.post-meta {
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-bottom: 20px;
font-size: 14px;
color: #6c757d;
}
.post-meta > div {
display: flex;
align-items: center;
gap: 8px;
}
.post-meta i {
color: #6A1B9A;
font-size: 16px;
}
.post-title {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
line-height: 1.3;
margin-bottom: 20px;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: transform 0.3s ease;
}
.tag:hover {
transform: translateY(-2px);
}
/* Featured Image */
.post-featured-image {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
.post-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.post-featured-image:hover img {
transform: scale(1.05);
}
/* Post Content */
.post-content {
padding: 40px;
font-size: 16px;
line-height: 1.8;
color: #2c3e50;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
color: #2c3e50;
margin: 30px 0 15px;
font-weight: 600;
}
.post-content h2 {
font-size: 1.8rem;
border-bottom: 2px solid #6A1B9A;
padding-bottom: 10px;
}
.post-content h3 {
font-size: 1.5rem;
color: #6A1B9A;
}
.post-content p {
margin-bottom: 20px;
}
.post-content ul,
.post-content ol {
margin: 20px 0;
padding-right: 20px;
}
.post-content li {
margin-bottom: 8px;
}
.post-content blockquote {
background: #f8f9fa;
border-right: 4px solid #6A1B9A;
padding: 20px;
margin: 30px 0;
border-radius: 0 8px 8px 0;
font-style: italic;
color: #495057;
}
.post-content img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 20px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.post-content code {
background: #f1f3f4;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 14px;
color: #e83e8c;
}
.post-content pre {
background: #2d3748;
color: #e2e8f0;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
margin: 20px 0;
}
.post-content pre code {
background: none;
padding: 0;
color: inherit;
}
/* Post Footer */
.post-footer {
padding: 20px 40px 40px;
border-top: 1px solid #f1f3f4;
background: #f8f9fa;
}
/* Share buttons removed */
/* Sidebar */
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 30px;
position: sticky;
top: 100px;
z-index: 1;
}
/* Ensure dropdown menus in sidebar are visible */
.blog-sidebar .user-dropdown-menu {
z-index: 99999 !important;
position: absolute !important;
}
/* Ensure all dropdown menus are visible above everything */
.user-dropdown-menu {
z-index: 99999 !important;
}
/* Make sure dropdown container has proper stacking context */
.sidebar-widget {
background: #ffffff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid #f1f3f4;
}
.sidebar-widget h3 {
color: #2c3e50;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #6A1B9A;
}
/* Author Widget */
.author-info {
text-align: center;
}
.author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 15px;
border: 3px solid #6A1B9A;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-details h4 {
color: #2c3e50;
font-size: 1.2rem;
margin-bottom: 10px;
}
.author-details p {
color: #6c757d;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
/* Related Posts */
.related-posts-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.related-post-item {
display: flex;
gap: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
}
.related-post-item:hover {
background: #e9ecef;
transform: translateX(-5px);
}
.related-post-image {
width: 80px;
height: 60px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.related-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.related-post-content h4 {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.4;
}
.related-post-content a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.related-post-content a:hover {
color: #6A1B9A;
}
.related-post-meta {
font-size: 12px;
color: #6c757d;
}
/* Categories */
.categories-list {
list-style: none;
padding: 0;
margin: 0;
}
.categories-list li {
margin-bottom: 10px;
}
.categories-list a {
display: block;
padding: 10px 15px;
background: #f8f9fa;
color: #2c3e50;
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
font-size: 14px;
}
.categories-list a:hover {
background: #6A1B9A;
color: white;
transform: translateX(-5px);
}
/* Latest Articles Sidebar */
.latest-articles-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.latest-article-item {
display: flex;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.latest-article-item:hover {
background: #e9ecef;
transform: translateX(-5px);
}
.latest-article-item .article-image {
width: 80px;
height: 60px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.latest-article-item .article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.latest-article-item:hover .article-image img {
transform: scale(1.1);
}
.latest-article-item .article-content {
flex: 1;
}
.latest-article-item .article-content h4 {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.4;
}
.latest-article-item .article-content a {
color: #2c3e50;
text-decoration: none;
transition: color 0.3s ease;
}
.latest-article-item .article-content a:hover {
color: #6A1B9A;
}
.latest-article-item .article-meta {
font-size: 12px;
color: #6c757d;
}
.latest-article-item .article-meta i {
margin-left: 5px;
}
.view-all-articles {
text-align: center;
margin-top: 20px;
}
.view-all-articles .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: transparent;
color: #6A1B9A;
border: 2px solid #6A1B9A;
border-radius: 25px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.view-all-articles .btn:hover {
background: #6A1B9A;
color: white;
transform: translateY(-2px);
}
/* Portfolio Gallery Sidebar */
.portfolio-gallery {
margin-top: 30px;
}
.portfolio-preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.portfolio-preview .portfolio-item {
position: relative;
height: 80px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
.portfolio-preview .portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.portfolio-preview .portfolio-item:hover img {
transform: scale(1.1);
}
.portfolio-preview .portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(106, 27, 154, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.portfolio-preview .portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-preview .view-btn {
color: white;
font-size: 18px;
text-decoration: none;
transition: transform 0.3s ease;
}
.portfolio-preview .view-btn:hover {
transform: scale(1.2);
}
.view-all-portfolio {
text-align: center;
}
.view-all-portfolio .btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: transparent;
color: #6A1B9A;
border: 2px solid #6A1B9A;
border-radius: 25px;
text-decoration: none;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.view-all-portfolio .btn:hover {
background: #6A1B9A;
color: white;
transform: translateY(-2px);
}
/* CTA Widget */
.cta-widget {
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
color: white;
text-align: center;
}
.cta-widget h3 {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.cta-widget p {
margin-bottom: 20px;
opacity: 0.9;
}
.cta-widget .btn {
background: white;
color: #6A1B9A;
border: none;
}
.cta-widget .btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
/* ====== PORTFOLIO STYLES ====== */
/* Portfolio Hero */
.portfolio-hero {
background: linear-gradient(135deg, #6A1B9A 0%, #9C27B0 50%, #E1BEE7 100%);
padding: 100px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.portfolio-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.2);
padding: 8px 20px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.portfolio-hero h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
background: linear-gradient(45deg, #fff, #f0f0f0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.portfolio-hero p {
font-size: 1.4rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto 40px;
line-height: 1.6;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 40px;
flex-wrap: wrap;
}
.hero-stats .stat {
text-align: center;
}
.hero-stats .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-stats .stat-label {
font-size: 14px;
opacity: 0.8;
font-weight: 500;
}
.hero-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.hero-shapes .shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 8s ease-in-out infinite;
}
.hero-shapes .shape-1 {
width: 100px;
height: 100px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.hero-shapes .shape-2 {
width: 150px;
height: 150px;
top: 60%;
right: 15%;
animation-delay: 3s;
}
.hero-shapes .shape-3 {
width: 80px;
height: 80px;
top: 30%;
right: 30%;
animation-delay: 6s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-30px) rotate(180deg);
}
}
/* Portfolio Filter */
.portfolio-filter {
background: #f8f9fa;
padding: 30px 0;
border-bottom: 1px solid #dee2e6;
}
.filter-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.filter-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: white;
border: 2px solid #e9ecef;
border-radius: 25px;
color: #6c757d;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
font-size: 14px;
}
.filter-btn:hover {
border-color: #6A1B9A;
color: #6A1B9A;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.2);
}
.filter-btn.active {
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
border-color: #6A1B9A;
color: white;
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.3);
}
.filter-btn i {
font-size: 16px;
}
/* Portfolio Grid Section */
.portfolio-grid-section {
padding: 80px 0;
background: #ffffff;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.portfolio-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.portfolio-image-container {
position: relative;
height: 300px;
overflow: hidden;
}
.portfolio-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.portfolio-item:hover .portfolio-image {
transform: scale(1.1);
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(106, 27, 154, 0.9), rgba(156, 39, 176, 0.8));
opacity: 0;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.overlay-content {
text-align: center;
color: white;
padding: 20px;
transform: translateY(20px);
transition: transform 0.4s ease;
}
.portfolio-item:hover .overlay-content {
transform: translateY(0);
}
.overlay-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 10px;
}
.overlay-content p {
font-size: 14px;
opacity: 0.9;
margin-bottom: 15px;
line-height: 1.6;
}
.portfolio-meta {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.category-badge {
background: rgba(255, 255, 255, 0.2);
padding: 4px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(10px);
}
.before-after-badge {
background: rgba(255, 255, 255, 0.2);
padding: 4px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 500;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 5px;
}
.portfolio-actions {
display: flex;
gap: 10px;
justify-content: center;
}
.view-btn, .info-btn {
display: flex;
align-items: center;
gap: 5px;
padding: 8px 16px;
border-radius: 20px;
text-decoration: none;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.view-btn {
background: rgba(255, 255, 255, 0.2);
color: white;
backdrop-filter: blur(10px);
}
.info-btn {
background: rgba(255, 255, 255, 0.1);
color: white;
backdrop-filter: blur(10px);
}
.view-btn:hover, .info-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
/* No Results */
.no-results {
text-align: center;
padding: 80px 20px;
color: #6c757d;
}
.no-results i {
font-size: 4rem;
margin-bottom: 20px;
color: #dee2e6;
}
.no-results h3 {
font-size: 1.5rem;
margin-bottom: 10px;
color: #495057;
}
.no-results p {
font-size: 1.1rem;
}
/* Portfolio Stats */
.portfolio-stats {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: white;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 2rem;
}
.stat-content h3 {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.stat-content p {
color: #6c757d;
font-size: 1.1rem;
font-weight: 500;
}
/* Portfolio CTA */
.portfolio-cta {
background: linear-gradient(135deg, #6A1B9A 0%, #9C27B0 100%);
padding: 100px 0;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.portfolio-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.cta-content {
position: relative;
z-index: 2;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
}
.cta-content p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
}
.cta-buttons .btn {
display: flex;
align-items: center;
gap: 8px;
padding: 15px 30px;
font-size: 16px;
font-weight: 600;
border-radius: 30px;
text-decoration: none;
transition: all 0.3s ease;
}
.cta-buttons .btn-primary {
background: white;
color: #6A1B9A;
border: 2px solid white;
}
.cta-buttons .btn-primary:hover {
background: transparent;
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
.cta-buttons .btn-outline {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-buttons .btn-outline:hover {
background: white;
color: #6A1B9A;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.modal-content {
background-color: white;
margin: 5% auto;
padding: 0;
border-radius: 15px;
width: 90%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.close {
position: absolute;
top: 15px;
left: 20px;
color: #aaa;
font-size: 28px;
font-weight: bold;
cursor: pointer;
z-index: 1001;
background: rgba(255, 255, 255, 0.9);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.close:hover {
color: #6A1B9A;
background: white;
transform: scale(1.1);
}
/* ========================================
✅ استایلهای موبایل - رسپانسیو
======================================== */
@media (max-width: 768px) {
.portfolio-grid-section {
padding: 40px 15px;
}
.portfolio-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 30px;
}
.portfolio-item {
border-radius: 12px;
}
.portfolio-image-container {
height: 220px;
}
.overlay-content {
padding: 15px;
}
.overlay-content h3 {
font-size: 1.2rem;
margin-bottom: 8px;
}
.overlay-content p {
font-size: 12px;
margin-bottom: 12px;
line-height: 1.5;
}
.portfolio-meta {
gap: 6px;
margin-bottom: 15px;
}
.category-badge,
.before-after-badge {
padding: 3px 8px;
font-size: 10px;
}
.portfolio-actions {
gap: 8px;
}
.view-btn,
.info-btn {
padding: 6px 10px;
font-size: 11px;
border-radius: 15px;
}
.view-btn i,
.info-btn i {
font-size: 10px;
}
/* Stats Section */
.portfolio-stats {
padding: 40px 15px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.stat-item {
padding: 20px 15px;
border-radius: 12px;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
margin-bottom: 15px;
}
.stat-content h3 {
font-size: 1.8rem;
margin-bottom: 5px;
}
.stat-content p {
font-size: 0.85rem;
}
/* CTA Section */
.portfolio-cta {
padding: 60px 15px;
}
.cta-content h2 {
font-size: 1.6rem;
margin-bottom: 15px;
}
.cta-content p {
font-size: 1rem;
margin-bottom: 25px;
}
.cta-buttons {
flex-direction: column;
gap: 15px;
align-items: center;
}
.cta-buttons .btn {
padding: 12px 25px;
font-size: 14px;
width: 100%;
max-width: 280px;
justify-content: center;
}
/* Modal */
.modal-content {
margin: 10% auto;
width: 95%;
border-radius: 12px;
}
.close {
top: 10px;
left: 10px;
width: 35px;
height: 35px;
font-size: 22px;
}
/* No Results */
.no-results {
padding: 50px 15px;
}
.no-results i {
font-size: 3rem;
}
.no-results h3 {
font-size: 1.3rem;
}
.no-results p {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.portfolio-grid-section {
padding: 30px 10px;
}
.portfolio-grid {
gap: 15px;
}
.portfolio-image-container {
height: 180px;
}
.overlay-content h3 {
font-size: 1.1rem;
}
.overlay-content p {
font-size: 11px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.portfolio-meta {
flex-direction: column;
align-items: center;
}
.category-badge,
.before-after-badge {
font-size: 9px;
padding: 2px 6px;
}
.portfolio-actions {
flex-direction: column;
gap: 6px;
}
.view-btn,
.info-btn {
padding: 5px 8px;
font-size: 10px;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.stat-item {
padding: 15px 10px;
}
.stat-icon {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
.stat-content h3 {
font-size: 1.5rem;
}
.stat-content p {
font-size: 0.8rem;
}
.cta-content h2 {
font-size: 1.4rem;
}
.cta-content p {
font-size: 0.9rem;
}
}
/* Table of Contents */
.table-of-contents {
background: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.table-of-contents h4 {
color: #2c3e50;
margin-bottom: 15px;
font-size: 1.2rem;
}
.toc-list {
list-style: none;
padding: 0;
margin: 0;
}
.toc-list li {
margin-bottom: 8px;
}
.toc-list a {
color: #6A1B9A;
text-decoration: none;
transition: color 0.3s ease;
display: block;
padding: 5px 0;
}
.toc-list a:hover {
color: #4A154B;
}
.toc-h2 { padding-right: 0; }
.toc-h3 { padding-right: 15px; }
.toc-h4 { padding-right: 30px; }
.toc-h5 { padding-right: 45px; }
.toc-h6 { padding-right: 60px; }
/* Reading Progress */
.reading-progress {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(106, 27, 154, 0.2);
z-index: 1001;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #6A1B9A, #9C27B0);
width: 0%;
transition: width 0.3s ease;
}
/* Print Button */
.print-btn {
background: #6A1B9A;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.print-btn:hover {
background: #4A154B;
transform: translateY(-2px);
}
/* Copy Code Button */
.copy-code-btn {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
border: none;
padding: 5px 10px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
pre:hover .copy-code-btn {
opacity: 1;
}
.copy-code-btn:hover {
background: rgba(0, 0, 0, 0.9);
}
/* Notification */
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
border-radius: 5px;
z-index: 10000;
font-weight: 500;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
transform: translateX(100%);
transition: transform 0.3s ease;
}
.notification-success {
background: #28a745;
color: white;
}
.notification-error {
background: #dc3545;
color: white;
}
.notification-info {
background: #17a2b8;
color: white;
}
/* Responsive Design - Mobile Header Fix */
@media (max-width: 768px) {
/* Force container to full width */
header .container {
width: 100% !important;
max-width: 100% !important;
}
.header-top {
flex-direction: row !important;
justify-content: center !important;
align-items: center !important;
padding: 0.5rem 0 !important;
flex-wrap: nowrap !important;
gap: 0 !important;
position: relative !important;
width: 100% !important;
}
.mobile-menu-btn {
order: 1 !important;
display: flex !important;
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
flex-shrink: 0 !important;
padding: 6px !important;
margin: 0 !important;
z-index: 10 !important;
}
.logo {
margin-bottom: 0 !important;
order: 2 !important;
flex: 0 1 auto !important;
text-align: center !important;
min-width: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
padding: 0 50px !important;
}
.logo h1 {
font-size: 1.1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
line-height: 1.2;
font-weight: 700;
max-width: 100%;
}
.logo span:first-of-type {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
opacity: 0.9;
font-weight: 600;
line-height: 1.2;
max-width: 100%;
}
.logo span:not(:first-of-type) {
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
opacity: 0.9;
font-weight: 600;
line-height: 1.2;
max-width: 100%;
}
.nav-actions {
order: 3;
display: none;
}
.mobile-action-buttons {
display: flex;
}
.mobile-auth-button {
order: 3 !important;
display: flex !important;
flex-shrink: 0 !important;
position: absolute !important;
left: 0 !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
z-index: 10 !important;
}
.mobile-auth-btn {
font-size: 0.8rem !important;
padding: 0.4rem 0.6rem !important;
}
.mobile-auth-btn span {
display: none !important;
}
.mobile-action-btn {
flex: 1;
min-width: 100px;
font-size: 13px;
padding: 8px 12px;
}
}
/* Extra Small Devices (Mobile phones, less than 480px) */
@media (max-width: 480px) {
.container {
padding: 0 10px !important;
}
header .container {
padding: 0 !important;
}
.header-top {
padding: 0.4rem 0 !important;
}
.mobile-menu-btn {
padding: 4px !important;
width: 36px !important;
height: 36px !important;
right: 5px !important;
left: auto !important;
}
.hamburger-line {
width: 20px !important;
height: 2px !important;
}
.logo {
gap: 2px !important;
padding: 0 45px !important;
}
.logo h1 {
font-size: 0.95rem !important;
font-weight: 700 !important;
}
.logo span:first-of-type,
.logo span:not(:first-of-type) {
font-size: 0.75rem !important;
font-weight: 500 !important;
}
.mobile-auth-button {
left: 5px !important;
right: auto !important;
}
.mobile-auth-btn {
padding: 0.3rem 0.4rem !important;
font-size: 0.7rem !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mobile-auth-btn i {
font-size: 1rem !important;
}
}
/* Very Small Devices (Mobile phones, less than 375px) */
@media (max-width: 375px) {
header .container {
padding: 0 !important;
}
.header-top {
padding: 0.3rem 0 !important;
}
.mobile-menu-btn {
padding: 3px !important;
width: 32px !important;
height: 32px !important;
right: 2px !important;
left: auto !important;
}
.hamburger-line {
width: 18px !important;
}
.logo {
padding: 0 38px !important;
}
.logo h1 {
font-size: 0.85rem !important;
}
.logo span:first-of-type,
.logo span:not(:first-of-type) {
font-size: 0.7rem !important;
}
.mobile-auth-button {
left: 2px !important;
right: auto !important;
}
.mobile-auth-btn {
width: 32px !important;
height: 32px !important;
padding: 0.2rem 0.3rem !important;
}
.mobile-auth-btn i {
font-size: 0.9rem !important;
}
}
.hero-slider {
height: 400px; /* افزایش از 300px به 400px */
}
.slide-content {
padding: 1rem;
}
.slide-content h2 {
font-size: 1.5rem;
}
.slide-content p {
font-size: 1rem;
}
.section-title h2 {
font-size: 1.8rem;
}
/* Consultation Responsive */
.consultation-content {
grid-template-columns: 1fr;
gap: 40px;
}
.consultation-form {
padding: 30px 20px;
}
.form-actions {
flex-direction: column;
}
.review-actions {
flex-direction: column;
align-items: center;
}
.review-actions .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
/* Blog Responsive */
.blog-post-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.post-header {
padding: 20px;
}
.post-title {
font-size: 2rem;
}
.post-content {
padding: 20px;
}
.post-footer {
padding: 20px;
}
.post-meta {
flex-direction: column;
gap: 10px;
}
.blog-meta .dual-date {
flex-wrap: nowrap !important;
}
/* Share buttons removed */
.related-post-item {
flex-direction: column;
text-align: center;
}
.related-post-image {
width: 100%;
height: 120px;
}
/* Portfolio Responsive */
.portfolio-hero h1 {
font-size: 2.5rem;
}
.portfolio-hero p {
font-size: 1.1rem;
}
.portfolio-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.filter-tabs {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 10px;
}
.filter-btn {
white-space: nowrap;
flex-shrink: 0;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.cta-content h2 {
font-size: 2rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
.modal-content {
width: 95%;
margin: 10% auto;
}
@media (max-width: 480px) {
.portfolio-hero {
padding: 80px 0;
}
.portfolio-hero h1 {
font-size: 2rem;
}
.portfolio-image-container {
height: 250px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item {
padding: 20px;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.stat-content h3 {
font-size: 2rem;
}
.post-title {
font-size: 1.5rem;
}
.post-featured-image {
height: 250px;
}
.sidebar-widget {
padding: 20px;
}
.about-stats {
grid-template-columns: 1fr;
gap: 10px;
}
.about-stats .stat-number {
font-size: 1.5rem;
}
/* Consultation Mobile */
.consultation-text h2 {
font-size: 2rem;
}
.consultation-text p {
font-size: 1rem;
}
.consultation-form {
padding: 20px 15px;
}
.form-container h3 {
font-size: 1.2rem;
}
.feature-item {
padding: 15px;
}
.feature-icon {
width: 40px;
height: 40px;
font-size: 16px;
}
.feature-content h4 {
font-size: 16px;
}
.feature-content p {
font-size: 12px;
}
}
/* Animation for content loading */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.blog-post-content,
.portfolio-item {
animation: fadeInUp 0.6s ease-out;
}
.portfolio-item:nth-child(1) { animation-delay: 0.1s; }
.portfolio-item:nth-child(2) { animation-delay: 0.2s; }
.portfolio-item:nth-child(3) { animation-delay: 0.3s; }
.portfolio-item:nth-child(4) { animation-delay: 0.4s; }
.portfolio-item:nth-child(5) { animation-delay: 0.5s; }
.portfolio-item:nth-child(6) { animation-delay: 0.6s; }
/* Blog Page Styles */
.blog-hero {
background: var(--gradient-main);
padding: 120px 0 80px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.blog-hero.gradient-bg-extended {
animation: none;
background-size: 100% 100%;
}
.blog-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.blog-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.25), transparent 55%);
pointer-events: none;
}
.blog-hero-content {
position: relative;
z-index: 2;
}
.blog-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.22);
padding: 8px 16px;
border-radius: 25px;
margin-bottom: 20px;
font-size: 0.9rem;
font-weight: 500;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.25);
}
.blog-hero h1 {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
}
.blog-hero p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
}
.blog-hero .hero-actions {
display: flex;
justify-content: center;
margin: 10px 0 35px;
}
.blog-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 40px;
}
.blog-stats .stat {
text-align: center;
}
.blog-stats .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
background: var(--gradient-extended);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.blog-stats .stat-label {
font-size: 1rem;
opacity: 0.8;
}
.blog-main {
padding: 80px 0;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.blog-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start;
}
.blog-filters {
margin-bottom: 30px;
padding: 20px;
}
.filter-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.filter-label {
font-weight: 600;
color: #334155;
}
.filter-buttons,
.filter-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.filter-btn,
.tag-filter {
border: 1px solid rgba(99, 102, 241, 0.2);
background: rgba(255, 255, 255, 0.95);
color: #475569;
padding: 8px 14px;
border-radius: 999px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-btn .count {
margin-right: 6px;
background: rgba(99, 102, 241, 0.12);
padding: 2px 8px;
border-radius: 999px;
font-size: 0.75rem;
}
.filter-btn.active,
.tag-filter.active {
background: var(--gradient-main);
color: #fff;
border-color: transparent;
}
.categories-list .count {
margin-right: 6px;
color: #64748b;
font-size: 0.85rem;
}
.blog-posts {
display: flex;
flex-direction: column;
gap: 30px;
}
.blog-post-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(99, 102, 241, 0.12);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.blog-post-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
border-color: rgba(99, 102, 241, 0.3);
}
.post-image {
position: relative;
height: 250px;
overflow: hidden;
}
.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.blog-post-card:hover .post-image img {
transform: scale(1.05);
}
.post-category {
position: absolute;
top: 15px;
right: 15px;
background: var(--gradient-main);
color: white;
padding: 5px 12px;
border-radius: 15px;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 5px;
box-shadow: 0 6px 18px rgba(99, 102, 241, 0.3);
}
.post-content {
padding: 25px;
}
.post-meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
font-size: 0.9rem;
color: #666;
}
.post-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.post-title {
font-size: 1.5rem;
margin-bottom: 15px;
line-height: 1.4;
}
.post-title a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.post-title a:hover {
color: #6366f1;
}
.post-excerpt {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.related-posts {
margin-top: 30px;
padding: 24px;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
margin-top: 18px;
}
.related-post-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 14px;
overflow: hidden;
border: 1px solid rgba(99, 102, 241, 0.1);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}
.related-post-card img {
width: 100%;
height: 150px;
object-fit: cover;
}
.related-post-content {
padding: 12px 14px 16px;
}
.related-post-content h4 {
font-size: 0.95rem;
margin: 0 0 10px;
line-height: 1.5;
}
.related-post-content a {
color: #1f2937;
text-decoration: none;
}
.related-post-date {
font-size: 0.8rem;
color: #64748b;
display: inline-flex;
align-items: center;
gap: 6px;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.tag {
background: rgba(99, 102, 241, 0.1);
color: #4f46e5;
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8rem;
transition: background 0.3s ease, color 0.3s ease;
}
.tag:hover {
background: #e0e0e0;
}
.read-more-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 10px 20px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: transform 0.3s ease;
}
.read-more-btn:hover {
transform: translateX(-5px);
}
.blog-sidebar {
display: flex;
flex-direction: column;
gap: 30px;
}
.sidebar-widget {
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.sidebar-widget h3 {
font-size: 1.3rem;
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}
.author-info {
text-align: center;
}
.author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 15px;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-details h4 {
font-size: 1.1rem;
margin-bottom: 10px;
color: #333;
}
.author-details p {
color: #666;
font-size: 0.9rem;
line-height: 1.5;
}
.categories-list {
list-style: none;
padding: 0;
}
.categories-list li {
margin-bottom: 10px;
}
.categories-list a {
display: flex;
align-items: center;
gap: 10px;
color: #666;
text-decoration: none;
padding: 8px 0;
transition: color 0.3s ease;
}
.categories-list a:hover {
color: #667eea;
}
.recent-posts {
display: flex;
flex-direction: column;
gap: 15px;
}
.recent-post-item {
display: flex;
gap: 15px;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.recent-post-item:last-child {
border-bottom: none;
}
.recent-post-image {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
}
.recent-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.recent-post-content h4 {
font-size: 0.9rem;
margin-bottom: 5px;
line-height: 1.4;
}
.recent-post-content a {
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.recent-post-content a:hover {
color: #667eea;
}
.recent-post-meta {
font-size: 0.8rem;
color: #666;
}
.cta-widget {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
text-align: center;
}
.cta-widget h3 {
color: white;
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}
.cta-widget p {
margin-bottom: 20px;
opacity: 0.9;
}
.cta-widget .btn {
background: white;
color: #667eea;
border: none;
}
.cta-widget .btn:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.blog-hero h1 {
font-size: 2rem;
}
.blog-hero p {
font-size: 1rem;
}
.blog-stats {
flex-direction: column;
gap: 20px;
}
.blog-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.post-meta {
flex-direction: column;
gap: 10px;
}
.recent-post-item {
flex-direction: column;
text-align: center;
}
.recent-post-image {
width: 100%;
height: 120px;
}
}
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Prevent horizontal scroll for specific elements */
img, video, iframe, object, embed {
max-width: 100%;
height: auto;
}
/* Focus styles for accessibility */
.post-content a:focus,
.categories-list a:focus,
.filter-btn:focus {
outline: 2px solid #6A1B9A;
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.post-content {
color: #000000;
}
.post-title {
color: #000000;
}
.sidebar-widget {
border: 2px solid #000000;
}
}
/* Portfolio Page Styles */
.portfolio-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: white;
padding: 100px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.portfolio-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.portfolio-hero .hero-content {
position: relative;
z-index: 2;
}
.portfolio-hero h1 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.portfolio-hero p {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* Portfolio Filter */
.portfolio-filter {
background: var(--bg-light);
padding: 40px 0;
border-bottom: 1px solid var(--border);
}
.filter-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.filter-btn {
background: white;
border: 2px solid var(--border);
color: var(--text-dark);
padding: 12px 24px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.filter-btn:hover {
border-color: var(--primary);
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.filter-btn.active {
background: var(--primary);
border-color: var(--primary);
color: white;
}
.filter-btn i {
font-size: 1.1rem;
}
/* Portfolio Grid */
.portfolio-grid-section {
padding: 80px 0;
background: white;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 40px;
}
.portfolio-item {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
position: relative;
}
.portfolio-item:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}
.portfolio-image {
position: relative;
height: 300px;
overflow: hidden;
}
.portfolio-image img,
.portfolio-image video {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
cursor: pointer;
}
.portfolio-item:hover .portfolio-image img,
.portfolio-item:hover .portfolio-image video {
transform: scale(1.1);
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.7);
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
transition: all 0.3s ease;
cursor: pointer;
}
.play-button:hover {
background: var(--primary);
transform: translate(-50%, -50%) scale(1.1);
}
.portfolio-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: white;
padding: 30px 20px 20px;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.portfolio-item:hover .portfolio-overlay {
transform: translateY(0);
}
.portfolio-info h3 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
}
.portfolio-info p {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 15px;
line-height: 1.5;
}
.portfolio-meta {
display: flex;
gap: 20px;
font-size: 0.8rem;
opacity: 0.8;
}
.portfolio-meta span {
display: flex;
align-items: center;
gap: 5px;
}
.portfolio-meta i {
font-size: 0.9rem;
}
/* Portfolio Stats */
.portfolio-stats {
background: var(--bg-light);
padding: 80px 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
}
.stat-item {
text-align: center;
padding: 30px 20px;
background: white;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
}
.stat-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 2rem;
}
.stat-content h3 {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 10px;
}
.stat-content p {
color: var(--text-dark);
font-weight: 500;
}
/* Portfolio Modal */
.portfolio-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9);
backdrop-filter: blur(5px);
}
.modal-content {
position: relative;
margin: 5% auto;
width: 90%;
max-width: 1000px;
height: 80vh;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.close-modal {
position: absolute;
top: 20px;
right: 30px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 1001;
background: rgba(0,0,0,0.5);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.close-modal:hover {
background: var(--primary);
transform: scale(1.1);
}
.modal-body {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.modal-body img,
.modal-body video {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 10px;
}
/* Active Navigation */
.nav-menu a.active {
color: #ffffff;
background: rgba(255, 255, 255, 0.18);
border-radius: 16px;
padding: 8px 18px;
}
/* Portfolio Responsive Design */
@media (max-width: 768px) {
.portfolio-hero h1 {
font-size: 2rem;
}
.portfolio-hero p {
font-size: 1rem;
}
.filter-buttons {
flex-direction: column;
align-items: center;
}
.filter-btn {
width: 200px;
justify-content: center;
}
.portfolio-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.portfolio-image {
height: 250px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.stat-item {
padding: 20px 15px;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.stat-content h3 {
font-size: 2rem;
}
.modal-content {
width: 95%;
height: 70vh;
margin: 10% auto;
}
.close-modal {
top: 10px;
right: 15px;
font-size: 30px;
width: 40px;
height: 40px;
}
}
@media (max-width: 480px) {
.portfolio-hero {
padding: 80px 0 60px;
}
.portfolio-grid-section {
padding: 60px 0;
}
.portfolio-stats {
padding: 60px 0;
}
.stats-grid {
grid-template-columns: 1fr;
}
.portfolio-meta {
flex-direction: column;
gap: 10px;
}
}
/* Quick Actions Section */
.quick-actions-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
margin: 2rem 0;
}
.quick-actions-container {
text-align: center;
}
.quick-actions-header {
margin-bottom: 3rem;
}
.quick-actions-header h2 {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
font-weight: 700;
}
.quick-actions-header p {
font-size: 1.1rem;
color: var(--text-dark);
opacity: 0.8;
}
.quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.quick-action-card {
background: var(--text-light);
border-radius: 20px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
position: relative;
overflow: hidden;
}
.quick-action-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 4px;
background: var(--gradient);
transform: scaleX(0);
transition: transform 0.3s ease;
}
/* گرادیان اختصاصی برای کارت مشاوره (بنفش چندمرحلهای) */
.consultation-card::before {
background: linear-gradient(135deg,
#4b3fa6 0%,
#5a4fbd 16%,
#6c62d6 32%,
#f2f3ff 42%,
#ffffff 46%,
#f2f3ff 50%,
#b0b8ff 70%,
#847cea 84%,
#5a4fbd 92%,
#4b3fa6 100%
);
}
.quick-action-card:hover::before {
transform: scaleX(1);
}
.quick-action-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* گرادیان اختصاصی برای کارت نوبت (سبز) و اورژانسی (قرمز) */
.appointment-card::before {
background: linear-gradient(135deg,
#15803d 0%,
#16a34a 16%,
#22c55e 32%,
#e9ffe9 42%,
#ffffff 46%,
#e9ffe9 50%,
#4ade80 70%,
#22c55e 84%,
#16a34a 92%,
#15803d 100%
);
}
.emergency-card::before {
background: linear-gradient(135deg,
#b91c1c 0%,
#dc2626 16%,
#ef4444 32%,
#ffecec 42%,
#ffffff 46%,
#ffecec 50%,
#f97373 70%,
#ef4444 84%,
#dc2626 92%,
#b91c1c 100%
);
}
.consultation-card:hover {
border-color: var(--primary);
}
.appointment-card:hover {
border-color: #28a745;
}
.emergency-card:hover {
border-color: #dc3545;
}
.action-icon {
font-size: 2.5rem;
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
.consultation-card .action-icon {
color: var(--primary);
background: linear-gradient(135deg, rgba(106, 27, 154, 0.1), rgba(156, 39, 176, 0.1));
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.consultation-card:hover .action-icon {
background: linear-gradient(135deg, rgba(106, 27, 154, 0.2), rgba(156, 39, 176, 0.2));
transform: scale(1.1);
}
.appointment-card .action-icon {
color: #28a745;
background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(33, 136, 56, 0.1));
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.appointment-card:hover .action-icon {
background: linear-gradient(135deg, rgba(40, 167, 69, 0.2), rgba(33, 136, 56, 0.2));
transform: scale(1.1);
}
.emergency-card .action-icon {
color: #dc3545;
background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(200, 35, 51, 0.1));
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: all 0.3s ease;
}
.emergency-card:hover .action-icon {
background: linear-gradient(135deg, rgba(220, 53, 69, 0.2), rgba(200, 35, 51, 0.2));
transform: scale(1.1);
}
.action-content {
text-align: center;
margin-bottom: 2rem;
}
.action-content h3 {
font-size: 1.5rem;
color: var(--text-dark);
margin-bottom: 1rem;
font-weight: 600;
}
.action-content p {
color: #666;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.action-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1rem;
}
.feature-tag {
display: flex;
align-items: center;
gap: 0.25rem;
background: #f8f9fa;
padding: 0.4rem 0.8rem;
border-radius: 15px;
font-size: 0.75rem;
color: #666;
border: 1px solid #e9ecef;
font-weight: 500;
transition: all 0.3s ease;
}
.feature-tag:hover {
background: #e9ecef;
transform: translateY(-1px);
}
.feature-tag i {
font-size: 0.7rem;
color: var(--primary);
}
.action-footer {
text-align: center;
}
.action-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.action-btn.primary {
background: var(--gradient);
color: var(--text-light);
border-color: var(--primary);
}
.action-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(106, 27, 154, 0.3);
}
.action-btn.secondary {
background: #28a745;
color: var(--text-light);
border-color: #28a745;
}
.action-btn.secondary:hover {
background: #218838;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
}
.action-btn.emergency {
background: #dc3545;
color: var(--text-light);
border-color: #dc3545;
}
.action-btn.emergency:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(220, 53, 69, 0.3);
}
/* User Status Info */
.user-status-info, .guest-info {
margin-top: 2rem;
}
.status-card, .info-card {
background: var(--text-light);
border-radius: 15px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 1.5rem;
max-width: 600px;
margin: 0 auto;
}
.status-icon, .info-icon {
font-size: 2.5rem;
color: var(--primary);
}
.status-content, .info-content {
flex: 1;
}
.status-content h4, .info-content h4 {
font-size: 1.3rem;
color: var(--text-dark);
margin-bottom: 0.5rem;
font-weight: 600;
}
.status-content p, .info-content p {
color: #666;
line-height: 1.6;
}
.status-actions, .info-actions {
display: flex;
gap: 1rem;
}
.status-btn, .info-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.status-btn {
background: var(--gradient);
color: var(--text-light);
}
.status-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(106, 27, 154, 0.3);
}
.info-btn.primary {
background: var(--gradient);
color: var(--text-light);
}
.info-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(106, 27, 154, 0.3);
}
.info-btn.secondary {
background: #6c757d;
color: var(--text-light);
}
.info-btn.secondary:hover {
background: #5a6268;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(108, 117, 125, 0.3);
}
/* ========================================
MOBILE SLIDERS - SERVICES SLIDER
======================================== */
@media (max-width: 768px) {
/* Services Slider Container */
.services {
position: relative;
display: flex !important;
overflow: hidden !important;
grid-template-columns: none !important;
gap: 0 !important;
padding: 20px 0;
}
.services-slider-wrapper {
display: flex;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
}
.service-card {
flex: 0 0 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 15px;
box-sizing: border-box;
transform: none !important;
}
.service-card:hover {
transform: none !important;
}
.service-image {
height: 130px;
}
.service-content {
margin-top: -18px;
padding: 1.5rem 1.35rem 1.65rem;
}
/* Services Slider Arrows - 3D Circular Style */
.services-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: linear-gradient(135deg, #6A1B9A, #9C27B0);
border: 3px solid white;
border-radius: 50%;
color: white;
font-size: 18px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(106, 27, 154, 0.4);
transition: all 0.3s ease;
}
.services-slider-arrow:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(106, 27, 154, 0.6);
}
.services-slider-arrow.prev {
right: 5px;
}
.services-slider-arrow.next {
left: 5px;
}
/* Services Slider Dots */
.services-slider-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.services-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all 0.3s ease;
}
.services-dot.active {
background: var(--primary);
width: 25px;
border-radius: 5px;
}
/* ========================================
PORTFOLIO SLIDER - Full Width Style
======================================== */
.portfolio {
position: relative;
display: flex !important;
overflow: hidden !important;
grid-template-columns: none !important;
gap: 0 !important;
padding: 0;
margin-bottom: 2rem;
}
.portfolio-slider-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
.portfolio-item {
flex: 0 0 100%;
max-width: 100%;
margin: 0;
height: 300px;
}
/* Portfolio Slider Arrows - Square Modern Style */
.portfolio-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
color: white;
font-size: 20px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.portfolio-slider-arrow:hover {
background: rgba(106, 27, 154, 0.8);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-50%) scale(1.05);
}
.portfolio-slider-arrow.prev {
right: 10px;
}
.portfolio-slider-arrow.next {
left: 10px;
}
/* Portfolio Progress Bar */
.portfolio-progress-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.2);
z-index: 5;
}
.portfolio-progress {
height: 100%;
background: linear-gradient(90deg, #6A1B9A, #9C27B0);
transition: width 0.3s ease;
}
/* ========================================
BLOG SLIDER - Card Stack Style
======================================== */
.blog {
position: relative;
display: flex !important;
overflow: visible !important;
grid-template-columns: none !important;
gap: 0 !important;
padding: 30px 0;
}
.blog-slider-wrapper {
display: flex;
transition: transform 0.4s ease;
width: 100%;
}
.blog-card {
flex: 0 0 100%;
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
/* Blog Slider Arrows - Minimal Line Style */
.blog-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: white;
border: 2px solid var(--primary);
border-radius: 8px;
color: var(--primary);
font-size: 16px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.blog-slider-arrow:hover {
background: var(--primary);
color: white;
transform: translateY(-50%) translateX(-2px);
}
.blog-slider-arrow.next:hover {
transform: translateY(-50%) translateX(2px);
}
.blog-slider-arrow.prev {
right: -5px;
}
.blog-slider-arrow.next {
left: -5px;
}
/* Blog Slider Page Numbers */
.blog-slider-counter {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
font-weight: 600;
}
.blog-slider-counter .current {
color: var(--primary);
font-size: 18px;
}
}
/* Responsive Design for Services */
@media (max-width: 768px) {
.service-card {
margin-bottom: 1rem;
}
.service-image {
height: 180px;
}
.service-icon-circle {
width: 50px;
height: 50px;
font-size: 1.2rem;
top: -25px;
left: 50%;
transform: translateX(-50%);
}
.service-content {
padding: 1.5rem 1rem 1rem;
}
.service-content h3 {
font-size: 1.2rem;
}
.service-content p {
font-size: 0.9rem;
}
}
/* Responsive Design for Quick Actions */
@media (max-width: 768px) {
.quick-actions-header h2 {
font-size: 2rem;
}
.quick-actions-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.quick-action-card {
padding: 1.5rem;
}
.action-icon {
font-size: 2.5rem;
}
.action-content h3 {
font-size: 1.3rem;
}
.status-card, .info-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.status-actions, .info-actions {
flex-direction: column;
width: 100%;
}
.status-btn, .info-btn {
justify-content: center;
}
}
@media (max-width: 480px) {
.quick-actions-section {
padding: 2rem 0;
}
.quick-actions-header h2 {
font-size: 1.8rem;
}
.quick-actions-header p {
font-size: 1rem;
}
.quick-action-card {
padding: 1rem;
}
.action-features {
flex-direction: column;
align-items: center;
}
}
/* قویترین استایلها برای موبایل - About Doctor Section */
@media (max-width: 768px) {
section.about-doctor#about {
padding-top: 70px !important;
padding-bottom: 20px !important;
margin-top: 0 !important;
}
section.about-doctor#about .about-content {
gap: 0px !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
section.about-doctor#about .about-image {
margin-top: 40px !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
}
section.about-doctor#about .about-text {
margin-top: 0 !important;
padding-top: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
section.about-doctor#about .doctor-slider-container {
margin-top: 0 !important;
padding-top: 0 !important;
}
section.about-doctor#about .about-image {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* استایل نهایی قوی برای حذف کامل فاصله بین عکس و متن در موبایل */
@media (max-width: 768px) {
.about-content .about-image + .about-text,
.about-content .about-text {
margin-top: -10px !important;
padding-top: 0 !important;
}
.about-content {
gap: 0px !important;
row-gap: 0px !important;
}
}