*, *::before, *::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
padding: 0;
font-display: swap;
line-height: 1.6;
overflow-x: hidden;
} img {
max-width: 100%;
height: auto;
loading: lazy;
decoding: async;
}
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s;
}
img[loading="lazy"].loaded {
opacity: 1;
} .unique-items-main {
padding: 60px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.unique-items-main .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.unique-items-main .section-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 20px;
font-weight: 700;
color: #2c3e50;
}
.unique-items-main .section-subtitle {
font-size: 1.2rem;
text-align: center;
margin-bottom: 50px;
color: #6c757d;
}
.unique-items-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.unique-item-card {
background: #ffffff;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e9ecef;
}
.unique-item-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.unique-item-image {
position: relative;
overflow: hidden;
height: 220px;
}
.unique-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.unique-item-card:hover .unique-item-image img {
transform: scale(1.05);
}
.unique-item-content {
padding: 25px;
}
.unique-item-title {
font-size: 1.4rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 15px;
line-height: 1.4;
}
.unique-item-description {
color: #6c757d;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
}
.unique-item-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
color: #ffffff;
text-decoration: none;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
border: none;
font-size: 0.95rem;
}
.unique-item-link:hover {
background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 123, 255, 0.4);
} @media (max-width: 768px) {
.unique-items-main {
padding: 40px 0;
}
.unique-items-main .section-title {
font-size: 2rem;
}
.unique-items-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.unique-item-content {
padding: 20px;
}
} @media print {
.unique-items-main {
background: none !important;
box-shadow: none !important;
}
.unique-item-card {
box-shadow: none !important;
border: 1px solid #ccc !important;
page-break-inside: avoid;
}
} @media (prefers-reduced-motion: reduce) {
.unique-item-card,
.unique-item-image img,
.unique-item-link {
transition: none;
}
html {
scroll-behavior: auto;
}
} @media (prefers-contrast: high) {
.unique-item-card {
border: 2px solid #000;
}
.unique-item-title {
color: #000;
}
.unique-item-link {
background: #000;
border: 2px solid #fff;
}
} [dir="rtl"] .unique-items-grid {
direction: rtl;
}
[dir="rtl"] .unique-item-link {
direction: rtl;
} .above-fold {
will-change: transform;
}
.below-fold {
content-visibility: auto;
contain-intrinsic-size: 300px;
} .unique-items-main {
contain: layout style paint;
}
.unique-item-card {
contain: layout style paint;
}  :root {
--primary-dark: #0a1c2d;
--primary-blue: #4d9cff;
--text-white: rgba(255, 255, 255, 0.95);
--text-muted: rgba(255, 255, 255, 0.7);
--transition-fast: all 0.2s ease;
--border-radius: 8px;
--box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
} @font-face {
font-family: 'Cairo';
font-display: swap;
src: url(https://fonts.gstatic.com/s/cairo/v2/SLXVc1nY6HkvalIkTp2mxdt0UX8.woff2) format('woff2');
} * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-display: swap;
background: var(--primary-dark);
color: var(--text-white);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--primary-dark);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(77, 156, 255, 0.2);
height: 80px;
display: flex;
align-items: center;
will-change: transform;
contain: layout style paint;
}
.topbar-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
} .logo {
display: flex;
align-items: center;
}
.logo img {
height: 50px;
width: auto;
max-width: 200px;
object-fit: contain;
will-change: transform;
} .main-nav ul {
display: flex;
list-style: none;
gap: 20px;
margin: 0;
padding: 0;
}
.main-nav a {
color: var(--text-white);
text-decoration: none;
font-weight: 500;
transition: var(--transition-fast);
position: relative;
}
.main-nav a:hover {
color: var(--primary-blue);
} .hero-section {
min-height: 100vh;
background: linear-gradient(135deg, var(--primary-dark) 0%, #0e2234 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
contain: layout style paint;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.hero-title {
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 700;
margin-bottom: 20px;
background: linear-gradient(135deg, #ffffff 0%, var(--primary-blue) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-muted);
margin-bottom: 30px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
} .btn-primary {
display: inline-block;
background: var(--primary-blue);
color: white;
padding: 15px 30px;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
transition: var(--transition-fast);
border: none;
cursor: pointer;
box-shadow: var(--box-shadow);
}
.btn-primary:hover {
background: #3a7fd9;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(77, 156, 255, 0.3);
} img {
max-width: 100%;
height: auto;
loading: lazy;
decoding: async;
}
img[src*="hero"], 
img[src*="logo"], 
.critical-image {
loading: eager;
} .card {
background: rgba(14, 34, 52, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(77, 156, 255, 0.2);
border-radius: var(--border-radius);
padding: 20px;
box-shadow: var(--box-shadow);
transition: var(--transition-fast);
will-change: transform;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
} .grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.flex {
display: flex;
align-items: center;
gap: 20px;
} @media (max-width: 768px) {
.topbar {
height: 70px;
}
.topbar-flex {
padding: 0 15px;
}
.main-nav ul {
gap: 10px;
}
.hero-content {
padding: 0 15px;
}
.grid {
grid-template-columns: 1fr;
gap: 15px;
}
.flex {
flex-direction: column;
gap: 15px;
}
} * {
-webkit-tap-highlight-color: transparent;
} a, button, [role="button"] {
touch-action: manipulation;
} .hero-section,
.topbar,
.main-content {
contain: layout;
} .smooth-transition {
transition: var(--transition-fast);
will-change: transform, opacity;
} html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
} :focus-visible {
outline: 2px solid var(--primary-blue);
outline-offset: 2px;
} .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} @media print {
.topbar,
.hero-section,
.btn-primary {
display: none;
}
body {
background: white;
color: black;
}
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
} @media (prefers-color-scheme: dark) {
:root {
--primary-dark: #000;
--text-white: #fff;
}
} @media (prefers-contrast: high) {
:root {
--primary-blue: #0066ff;
--text-white: #ffffff;
--border-radius: 0;
}
.card {
border: 2px solid var(--primary-blue);
}
}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap"); @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css); body {
font-family: 'Inter', 'Tajawal', sans-serif;
font-weight: 400;
}
body.rtl {
font-family: 'Tajawal', 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', 'Tajawal', sans-serif;
font-weight: 700;
}
body.rtl h1, 
body.rtl h2, 
body.rtl h3, 
body.rtl h4, 
body.rtl h5, 
body.rtl h6 {
font-family: 'Tajawal', 'Poppins', sans-serif;
} body {
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
font-size: 3.5rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
h2 {
font-size: 2.8rem;
line-height: 1.25;
letter-spacing: -0.015em;
}
h3 {
font-size: 2.2rem;
line-height: 1.3;
letter-spacing: -0.01em;
}
h4 {
font-size: 1.8rem;
line-height: 1.35;
}
h5 {
font-size: 1.4rem;
line-height: 1.4;
}
h6 {
font-size: 1.1rem;
line-height: 1.45;
}
p, ul, ol {
font-size: 1rem;
line-height: 1.7;
}
small {
font-size: 0.875rem;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.8;
} .hero-title {
font-weight: 800;
letter-spacing: -0.03em;
}
.section-title {
font-weight: 700;
margin-bottom: 1.5rem;
} button, .btn, input[type="submit"] {
font-weight: 600;
letter-spacing: 0.01em;
} @media (max-width: 992px) {
h1, .hero-title {
font-size: 2.5rem;
}
h2, .section-title {
font-size: 2.2rem;
}
h3 {
font-size: 1.8rem;
}
h4 {
font-size: 1.5rem;
}
}
@media (max-width: 768px) {
h1, .hero-title {
font-size: 2.2rem;
}
h2, .section-title {
font-size: 1.8rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.3rem;
}
body {
font-size: 15px;
}
}
@media (max-width: 576px) {
h1, .hero-title {
font-size: 2rem;
}
h2, .section-title {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
h4 {
font-size: 1.1rem;
}
} body.rtl {
letter-spacing: 0 !important;
}
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
letter-spacing: 0 !important;
}:root { --primary: #2d5cf6;
--primary-light: #5a7df8;
--primary-dark: #1b48e0;
--secondary: #ff4081;
--secondary-light: #ff6b9f;
--secondary-dark: #e62e74;
--accent: #22c55e; --dark: #0e1222;
--dark-800: #161b2e;
--dark-600: #1f263b;
--dark-400: #2e3649; --white: #ffffff;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--secondary-50: #ECFDF5;
--secondary-100: #D1FAE5;
--secondary-200: #A7F3D0;
--secondary-300: #6EE7B7;
--secondary-400: #34D399;
--secondary-500: #10B981;
--secondary-600: #059669;
--secondary-700: #047857;
--secondary-800: #065F46;
--secondary-900: #064E3B; --font-heading: 'Tajawal', 'Plus Jakarta Sans', sans-serif;
--font-body: 'Cairo', 'Inter', sans-serif;
--font-stylized: 'Almarai', 'Montserrat', sans-serif;
--font-mono: 'Fira Code', monospace; --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--text-2xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.875rem);
--text-3xl: clamp(1.875rem, 1.75rem + 0.625vw, 2.25rem);
--text-4xl: clamp(2.25rem, 2rem + 1.25vw, 3rem);
--text-5xl: clamp(3rem, 2.75rem + 1.25vw, 3.75rem);
--text-6xl: clamp(3.75rem, 3.5rem + 1.25vw, 4.5rem); --font-thin: 100;
--font-extralight: 200;
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
--font-black: 900; --spacing-0: 0;
--spacing-px: 1px;
--spacing-0-5: 0.125rem;
--spacing-1: 0.25rem;
--spacing-1-5: 0.375rem;
--spacing-2: 0.5rem;
--spacing-2-5: 0.625rem;
--spacing-3: 0.75rem;
--spacing-3-5: 0.875rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-7: 1.75rem;
--spacing-8: 2rem;
--spacing-9: 2.25rem;
--spacing-10: 2.5rem;
--spacing-11: 2.75rem;
--spacing-12: 3rem;
--spacing-14: 3.5rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-28: 7rem;
--spacing-32: 8rem;
--spacing-36: 9rem;
--spacing-40: 10rem;
--spacing-44: 11rem;
--spacing-48: 12rem;
--spacing-52: 13rem;
--spacing-56: 14rem;
--spacing-60: 15rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-96: 24rem; --radius-none: 0;
--radius-sm: 0.125rem;
--radius-md: 0.25rem;
--radius-lg: 0.375rem;
--radius-xl: 0.5rem;
--radius-2xl: 0.75rem;
--radius-3xl: 1rem;
--radius-sm: 5px;
--radius: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 30px;
--radius-full: 9999px;
} [data-theme="dark"] {
--bg-body: var(--dark);
--bg-card: var(--dark-800);
--bg-input: var(--dark-600);
--color-text: var(--gray-200);
--color-text-muted: var(--gray-400);
--border-color: var(--glass-border);
} body.rtl {
--body-font: 'Tajawal', 'Inter', sans-serif;
--heading-font: 'Tajawal', 'Poppins', sans-serif;
} body {
font-family: var(--body-font);
background: var(--dark);
color: var(--gray-200);
transition: background var(--transition-fast);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
} .btn,
button,
input[type="submit"],
input[type="button"] {
border-radius: var(--radius);
transition: all var(--transition-fast);
} input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
border-radius: var(--radius);
border: 1px solid var(--glass-border);
background: var(--glass-bg);
color: var(--white);
transition: all var(--transition-fast);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(45, 92, 246, 0.2);
} ::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--dark-400);
}
::-webkit-scrollbar-thumb {
background: var(--primary-dark);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary);
} img {
max-width: 100%;
height: auto;
} .container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
}
section {
position: relative;
padding: 100px 0;
} @media (max-width: 992px) {
section {
padding: 80px 0;
}
}
@media (max-width: 768px) {
section {
padding: 60px 0;
}
}
@media (max-width: 576px) {
.container {
padding: 0 15px;
}
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--body-font);
background: var(--dark);
color: var(--gray-200);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
}
a {
text-decoration: none;
color: var(--primary);
transition: color var(--transition-fast);
}
a:hover {
color: var(--primary-light);
} h1, h2, h3, h4, h5, h6 {
font-family: var(--heading-font);
color: var(--white);
font-weight: 700;
line-height: 1.3;
margin-bottom: 20px;
}
h1 {
font-size: 3.5rem;
}
h2 {
font-size: 2.8rem;
}
h3 {
font-size: 2.2rem;
}
h4 {
font-size: 1.8rem;
}
h5 {
font-size: 1.4rem;
}
h6 {
font-size: 1.1rem;
}
p {
margin-bottom: 20px;
color: var(--gray-300);
}
ul, ol {
margin-bottom: 20px;
padding-left: 20px;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-weight: 600;
border-radius: var(--radius-md);
transition: all var(--transition-fast);
border: none;
cursor: pointer;
font-size: 1rem;
text-align: center;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-primary {
background: var(--primary);
color: var(--white);
box-shadow: 0 10px 20px rgba(45, 92, 246, 0.3);
}
.btn-primary:hover {
background: var(--primary-light);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(45, 92, 246, 0.4);
}
.btn-secondary {
background: var(--secondary);
color: var(--white);
box-shadow: 0 10px 20px rgba(255, 64, 129, 0.3);
}
.btn-secondary:hover {
background: var(--secondary-light);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(255, 64, 129, 0.4);
}
.btn-outline {
background: transparent;
color: var(--white);
border: 2px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-5px);
}
.btn-glass {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
color: var(--white);
backdrop-filter: blur(10px);
}
.btn-glass:hover {
border-color: var(--glass-border-hover);
background: rgba(255, 255, 255, 0.1);
transform: translateY(-5px);
} .btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.6s ease;
z-index: -1;
}
.btn:hover::before {
left: 100%;
} .btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-icon i {
font-size: 1.2rem;
transition: transform var(--transition-fast);
}
.btn-icon:hover i {
transform: translateX(3px);
}
body.rtl .btn-icon:hover i {
transform: translateX(-3px);
} .row {
display: flex;
flex-wrap: wrap;
margin: -15px;
}
.col {
padding: 15px;
flex: 1;
} .card {
background: var(--dark-800);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--glass-border);
transition: all var(--transition-fast);
margin-bottom: 30px;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border-color: var(--glass-border-hover);
}
.card-img {
width: 100%;
position: relative;
overflow: hidden;
}
.card-img img {
width: 100%;
transition: transform var(--transition-medium);
}
.card:hover .card-img img {
transform: scale(1.05);
}
.card-body {
padding: 25px;
}
.card-title {
font-size: 1.4rem;
margin-bottom: 15px;
transition: color var(--transition-fast);
}
.card:hover .card-title {
color: var(--primary);
}
.card-text {
margin-bottom: 20px;
color: var(--gray-300);
}
.card-footer {
padding: 15px 25px;
border-top: 1px solid var(--glass-border);
display: flex;
justify-content: space-between;
align-items: center;
} .img-overlay {
position: relative;
overflow: hidden;
border-radius: var(--radius-lg);
}
.img-overlay::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, rgba(14, 18, 34, 0.7) 100%);
opacity: 0;
transition: opacity var(--transition-fast);
z-index: 1;
}
.img-overlay:hover::before {
opacity: 1;
}
.img-overlay img {
transition: transform var(--transition-medium);
}
.img-overlay:hover img {
transform: scale(1.1);
}
.img-overlay-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 25px;
z-index: 2;
transform: translateY(20px);
opacity: 0;
transition: all var(--transition-fast);
}
.img-overlay:hover .img-overlay-content {
transform: translateY(0);
opacity: 1;
} .progress {
height: 8px;
background: var(--dark-400);
border-radius: var(--radius-full);
overflow: hidden;
margin-bottom: 20px;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
border-radius: var(--radius-full);
position: relative;
overflow: hidden;
}
.progress-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: progress-shine 2s infinite;
}
@keyframes progress-shine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
} table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--glass-border);
}
th, td {
padding: 15px;
border-bottom: 1px solid var(--glass-border);
}
th {
background: var(--dark-600);
color: var(--white);
font-weight: 600;
text-align: left;
}
tr:last-child td {
border-bottom: none;
}
tr:nth-child(even) {
background: rgba(255, 255, 255, 0.02);
}
tr:hover {
background: rgba(45, 92, 246, 0.05);
} .form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
color: var(--white);
font-weight: 500;
}
.form-control {
display: block;
width: 100%;
padding: 12px 15px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
color: var(--white);
font-size: 1rem;
transition: all var(--transition-fast);
}
.form-control:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(45, 92, 246, 0.2);
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8.5L1 3.5h10l-5 5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
padding-right: 40px;
}
body.rtl .form-select {
background-position: left 15px center;
padding-right: 15px;
padding-left: 40px;
} @media (max-width: 1200px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.4rem;
}
h3 {
font-size: 2rem;
}
.btn {
padding: 10px 25px;
}
}
@media (max-width: 992px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 1.8rem;
}
.row {
flex-direction: column;
}
.col {
width: 100%;
}
}
@media (max-width: 768px) {
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 1.8rem;
}
h3 {
font-size: 1.5rem;
}
.card-body {
padding: 20px;
}
.card-footer {
padding: 15px 20px;
}
}
@media (max-width: 576px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.6rem;
}
h3 {
font-size: 1.3rem;
}
.btn {
padding: 10px 20px;
font-size: 0.95rem;
}
}:root {
--primary: #2d5cf6 !important;
--primary-light: #5a7df8 !important;
--primary-dark: #1b48e0 !important;
--secondary: #ff4081 !important;
--dark: #0e1222 !important;
--dark-800: #161b2e !important;
--dark-600: #1f263b !important;
--white: #ffffff !important;
--gray-200: #e5e7eb !important;
--gray-300: #d1d5db !important;
} body {
background: var(--dark) !important;
color: var(--gray-200) !important;
font-family: 'Inter', 'Tajawal', sans-serif !important;
}
body.rtl {
font-family: 'Tajawal', 'Inter', sans-serif !important;
} .topbar, 
header,
.site-header,
.navigation,
.main-navigation,
nav.navbar {
background: rgba(14, 18, 34, 0.9) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
position: fixed !important;
width: 100% !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
padding: 15px 0 !important;
} .hero,
.hero-section,
section.hero,
.banner,
.main-banner {
background: var(--dark) !important;
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
padding-top: 150px !important;
position: relative !important;
overflow: hidden !important;
}
.hero::before,
.hero-section::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(145deg, rgba(45, 92, 246, 0.05), transparent) !important;
z-index: 0 !important;
} h1, h2, h3, h4, h5, h6,
.hero h1, .hero h2, .hero h3,
.section-title {
color: var(--white) !important;
font-family: 'Poppins', 'Tajawal', sans-serif !important;
font-weight: 700 !important;
}
body.rtl h1, 
body.rtl h2, 
body.rtl h3, 
body.rtl h4, 
body.rtl h5, 
body.rtl h6 {
font-family: 'Tajawal', 'Poppins', sans-serif !important;
} .btn,
button,
a.button,
.wp-element-button,
.wp-block-button__link,
.woocommerce button.button,
.woocommerce a.button,
.add_to_cart_button {
background: var(--primary) !important;
color: var(--white) !important;
border-radius: 12px !important;
padding: 12px 25px !important;
font-weight: 600 !important;
border: none !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
display: inline-block !important;
box-shadow: 0 10px 20px rgba(45, 92, 246, 0.2) !important;
}
.btn:hover,
button:hover,
a.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.add_to_cart_button:hover {
transform: translateY(-5px) !important;
box-shadow: 0 15px 30px rgba(45, 92, 246, 0.3) !important;
background: var(--primary-light) !important;
} .card,
.product,
.service-box,
.feature-box,
article,
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
background: var(--dark-800) !important;
border-radius: 15px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.05) !important;
transition: all 0.3s ease !important;
margin-bottom: 25px !important;
}
.card:hover,
.product:hover,
.service-box:hover,
.feature-box:hover,
article:hover,
.woocommerce ul.products li.product:hover {
transform: translateY(-10px) !important;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
border-color: rgba(45, 92, 246, 0.3) !important;
} ul.menu,
nav ul,
.main-menu,
.menu-list {
display: flex !important;
list-style: none !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}
ul.menu a,
nav a,
.main-menu a,
.menu-list a {
color: var(--white) !important;
text-decoration: none !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
position: relative !important;
padding: 5px 0 !important;
}
ul.menu a:hover,
nav a:hover,
.main-menu a:hover,
.menu-list a:hover {
color: var(--primary) !important;
}
ul.menu a::after,
nav a::after,
.main-menu a::after,
.menu-list a::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 0 !important;
height: 2px !important;
background: var(--primary) !important;
transition: width 0.3s ease !important;
}
ul.menu a:hover::after,
nav a:hover::after,
.main-menu a:hover::after,
.menu-list a:hover::after {
width: 100% !important;
} input, 
textarea, 
select {
background: var(--dark-600) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
color: var(--white) !important;
padding: 12px 15px !important;
}
input:focus, 
textarea:focus, 
select:focus {
border-color: var(--primary) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(45, 92, 246, 0.2) !important;
} footer,
.site-footer,
.footer {
background: var(--dark-800) !important;
color: var(--gray-300) !important;
padding: 80px 0 30px !important;
position: relative !important;
}
footer h4, 
.site-footer h4,
.footer h4 {
color: var(--white) !important;
margin-bottom: 20px !important;
font-size: 1.3rem !important;
position: relative !important;
padding-bottom: 10px !important;
}
footer h4::after,
.site-footer h4::after,
.footer h4::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 40px !important;
height: 3px !important;
background: var(--primary) !important;
} body.rtl ul.menu a::after,
body.rtl nav a::after,
body.rtl .main-menu a::after,
body.rtl .menu-list a::after {
left: auto !important;
right: 0 !important;
}
body.rtl footer h4::after,
body.rtl .site-footer h4::after,
body.rtl .footer h4::after {
left: auto !important;
right: 0 !important;
} .card,
.product,
.service-box,
.about-box,
.feature-box,
.team-member,
.pricing-plan,
.testimonial {
position: relative !important;
z-index: 1 !important;
}
.card::before,
.product::before,
.service-box::before,
.about-box::before,
.feature-box::before,
.team-member::before,
.pricing-plan::before,
.testimonial::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(145deg, rgba(45, 92, 246, 0.03), transparent) !important;
z-index: -1 !important;
} .card img,
.product img,
.team-member img,
.service-box img,
.feature-box img,
.about-box img,
.woocommerce ul.products li.product img {
transition: transform 0.5s ease !important;
}
.card:hover img,
.product:hover img,
.team-member:hover img,
.service-box:hover img,
.feature-box:hover img,
.about-box:hover img,
.woocommerce ul.products li.product:hover img {
transform: scale(1.05) !important;
} @keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.float-element,
.hero-icon,
.about-icon,
.service-icon,
.feature-icon {
animation: float 3s infinite ease-in-out !important;
} .cart-contents,
.header-cart-link,
a.cart-contents {
display: inline-flex !important;
align-items: center !important;
color: var(--white) !important;
text-decoration: none !important;
font-weight: 500 !important;
position: relative !important;
}
.cart-count,
.count {
background: var(--primary) !important;
color: white !important;
border-radius: 50% !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.7rem !important;
position: absolute !important;
top: -8px !important;
right: -8px !important;
} .btn,
button,
.card,
.product,
a.button,
.service-box,
.feature-box,
.team-member,
img,
.woocommerce ul.products li.product {
will-change: transform !important;
} #ultra-modern-refresh {
position: fixed !important;
bottom: 30px !important;
right: 30px !important;
z-index: 99999 !important;
background: #25D366 !important;
color: white !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.2rem !important;
cursor: pointer !important;
box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
transition: all 0.3s ease !important;
}
#ultra-modern-refresh:hover {
transform: scale(1.1) !important;
background: #128C7E !important;
box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4) !important;
} .product-image img,
.product-thumbnail img,
.product_list_widget img,
.attachment-woocommerce_thumbnail {
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
border-radius: 10px !important;
overflow: hidden !important;
} .price, 
.amount, 
.woocommerce-Price-amount {
color: var(--primary) !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
}@media (min-width: 992px) {
.mobile-menu,
.mobile-menu-toggle,
.mobile-nav,
.mobile-navigation,
#mobile-toggle,
#mobile-menu,
.mobile-menu-container,
#mobile-menu-toggle,
.hamburger-menu,
.hamburger-icon,
[class*="mobile-menu"],
[id*="mobile-menu"],
[class*="mobile-nav"],
[id*="mobile-nav"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
} @media (max-width: 991px) {
.mobile-menu,
.mobile-menu-toggle,
.mobile-nav,
.mobile-navigation,
#mobile-toggle,
#mobile-menu,
.mobile-menu-container,
#mobile-menu-toggle,
.hamburger-menu,
.hamburger-icon {
display: block !important;
} .desktop-menu,
.main-menu:not(.mobile-menu),
.main-navigation:not(.mobile-navigation),
.primary-menu:not(.mobile-menu),
nav:not(.mobile-nav) > ul,
.menu-desktop,
.desktop-nav,
[class*="desktop-menu"],
[id*="desktop-menu"],
[class*="desktop-nav"],
[id*="desktop-nav"] {
display: none !important;
}
} .mobile-menu-toggle,
#mobile-toggle,
.hamburger-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 8px;
color: var(--white);
transition: all 0.3s ease;
}
.mobile-menu-toggle:hover,
#mobile-toggle:hover,
.hamburger-icon:hover {
background: var(--primary);
border-color: var(--primary);
} .mobile-menu,
#mobile-menu,
.mobile-nav,
.mobile-navigation,
.mobile-menu-container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 80%;
max-width: 350px;
background: var(--dark-800);
z-index: 1001;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
padding: 20px;
}
.mobile-menu.active,
#mobile-menu.active,
.mobile-nav.active,
.mobile-navigation.active,
.mobile-menu-container.active {
transform: translateX(0);
}@media (max-width: 991px) { .mobile-menu {
background-color: var(--navbar-bg-color, #1a1a1a);
border-radius: 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
width: 280px; max-width: 85vw; padding-top: 15px;
transform: translateX(-300px);
transition: transform 0.3s ease-in-out;
} .mobile-menu-header {
padding: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} .mobile-menu ul {
padding: 10px 0;
}
.mobile-menu ul li {
margin: 0;
padding: 0;
}
.mobile-menu ul li a {
color: var(--navbar-text-color, #ffffff);
padding: 12px 20px;
display: block;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
border-left: 3px solid transparent;
}
.mobile-menu ul li a:hover,
.mobile-menu ul li.current-menu-item a {
background-color: rgba(255, 255, 255, 0.05);
color: var(--accent-color, #e57200);
border-left-color: var(--accent-color, #e57200);
} .mobile-menu-toggle {
border: none;
background: transparent;
color: var(--navbar-text-color, #ffffff);
font-size: 22px;
cursor: pointer;
outline: none;
} .menu-icon {
transform: none !important;
box-shadow: none !important;
background: transparent !important;
} .mobile-menu.active {
transform: translateX(0);
} .mobile-menu-close {
position: absolute;
top: 15px;
right: 15px;
color: var(--navbar-text-color, #ffffff);
background: transparent;
border: none;
font-size: 20px;
cursor: pointer;
}
}  .projects-showcase-section {
background-color: var(--section-bg-light, #f5f5f5) !important;
padding: 70px 0;
transform: none !important; box-shadow: none !important; }
.projects-showcase-section .section-title {
color: var(--section-title-color, #222) !important;
transform: none !important; text-shadow: none !important; }
.projects-showcase-section .section-subtitle {
color: var(--section-subtitle-color, #555) !important;
transform: none !important; } .partners-section {
background-color: var(--section-bg-dark, #1a1a1a) !important;
padding: 70px 0;
transform: none !important; box-shadow: none !important; }
.partners-section .section-title {
color: #ffffff !important;
transform: none !important; text-shadow: none !important; }
.partners-section .partner-logo {
transform: none !important; box-shadow: none !important; transition: all 0.3s ease;
}
.partners-section .partner-logo:hover {
transform: scale(1.05) !important; } .testimonials-section {
background-color: var(--section-bg-light, #f5f5f5) !important;
padding: 70px 0;
transform: none !important; box-shadow: none !important; }
.testimonials-section .section-title {
color: var(--section-title-color, #222) !important;
transform: none !important; text-shadow: none !important; }
.testimonials-section .testimonial-card {
background-color: #ffffff;
border-radius: 8px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; transform: none !important; transition: all 0.3s ease;
}
.testimonials-section .testimonial-card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
transform: translateY(-5px) !important; }
.testimonials-section .testimonial-author {
color: var(--accent-color, #e57200) !important;
transform: none !important; } @media (max-width: 767px) { .section-title {
font-size: 28px !important;
margin-bottom: 15px !important;
}
.section-subtitle {
font-size: 16px !important;
margin-bottom: 25px !important;
} .container {
padding-left: 20px;
padding-right: 20px;
} .btn {
padding: 10px 20px !important;
font-size: 14px !important;
}
}:root {
--section-bg-light: #0e2234 !important; --section-title-color: #ffffff !important; --section-subtitle-color: #4d9cff !important; --text-color: rgba(255, 255, 255, 0.8) !important; } body.ultra-3d-theme,
.ultra-3d-theme .site-content,
.ultra-3d-theme .entry-content,
.ultra-3d-theme .content-area,
.ultra-3d-theme #page,
.ultra-3d-theme .site-wrapper,
.site-wrapper,
#page,
.transform-wrapper,
.unique-collection-3d-container,
.unique-collection-3d-item,
.collection-3d-card,
.counters-3d-wrapper,
.counter-3d-card,
.counter-3d-item,
.counter-3d-number,
.counter-title-3d,
.partners-section,
.projects-showcase-section,
.testimonials-section,
.section-3d,
.item-3d,
.card-3d {
transform: none !important;
transform-style: flat !important;
transition: none !important;
perspective: none !important;
-webkit-transform: none !important;
-webkit-transform-style: flat !important;
-webkit-perspective: none !important;
backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
text-shadow: none !important;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
animation: none !important;
-webkit-animation: none !important;
} .site-wrapper {
transform: none !important;
transform-style: flat !important;
} .counter-3d-card,
.collection-3d-card,
.testimonial-card,
.partner-logo,
.project-card {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
margin-bottom: 30px;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.counter-3d-card:hover,
.collection-3d-card:hover,
.testimonial-card:hover,
.partner-logo:hover,
.project-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
} @media (max-width: 991px) { .mobile-menu {
background-color: #0a1c2d !important; width: 280px !important;
max-width: 85vw !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
z-index: 9999 !important;
transform: translateX(-100%) !important;
transition: transform 0.3s ease !important;
padding: 0 !important;
overflow-y: auto !important;
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2) !important;
} .mobile-menu.active {
transform: translateX(0) !important;
} .mobile-menu-header {
padding: 20px 15px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
position: relative !important;
background-color: #061525 !important; } .mobile-menu ul {
padding: 10px 0 !important;
margin: 0 !important;
list-style: none !important;
}
.mobile-menu ul li {
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.mobile-menu ul li a {
color: #ffffff !important;
padding: 14px 20px !important;
display: block !important;
font-size: 15px !important;
font-weight: 500 !important;
border-left: 3px solid transparent !important;
transition: all 0.3s ease !important;
}
.mobile-menu ul li a:hover,
.mobile-menu ul li.current-menu-item a {
background-color: #0e2234 !important; color: #4d9cff !important; border-left-color: #4d9cff !important;
} .mobile-menu-toggle {
display: block !important;
background: transparent !important;
border: none !important;
font-size: 22px !important;
color: #ffffff !important;
cursor: pointer !important;
outline: none !important;
padding: 8px !important;
margin-right: 5px !important;
}
.mobile-menu-toggle:hover .menu-icon {
color: #4d9cff !important;
}
.menu-icon i {
transition: all 0.3s ease !important;
} body.mobile-menu-open {
overflow: hidden !important;
} .mobile-logo a {
display: block !important;
}
.mobile-logo-img {
max-width: 150px !important;
height: auto !important;
margin: 0 auto !important;
display: block !important;
} .mobile-menu-close {
position: absolute !important;
top: 20px !important;
right: 15px !important;
background: transparent !important;
border: none !important;
color: #ffffff !important;
font-size: 20px !important;
cursor: pointer !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
}
.mobile-menu-close:hover {
background-color: rgba(77, 156, 255, 0.1) !important;
color: #4d9cff !important;
} .mobile-menu-wrapper {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}#wpadminbar {
position: fixed !important;
}
body {
position: relative;
overflow-x: hidden;
font-family: 'Cairo', Arial, sans-serif !important;
} .topbar {
position: relative !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
background-color: rgba(1, 1, 0, 0.95) !important;
padding: 10px 0 !important;
border-top: 3px solid #3a6ea5 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
display: block !important;
width: 100% !important;
z-index: 100 !important;
}
.topbar.sticky {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
}
.admin-bar .topbar.sticky {
top: 32px;
}
.topbar-flex {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
height: auto !important;
}
.logo {
max-height: 60px !important;
max-width: 200px !important;
margin-right: 20px !important;
position: relative !important;
display: block !important;
}
.custom-logo {
max-height: 60px !important;
width: auto !important;
display: block !important;
} .main-nav {
display: flex !important;
align-items: center !important;
}
.main-nav ul {
display: flex !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 15px !important;
}
.main-nav ul li {
position: relative !important;
}
.main-nav ul li a {
color: #fff !important;
text-decoration: none !important;
padding: 8px 12px !important;
font-size: 15px !important;
font-weight: 500 !important;
display: block !important;
transition: color 0.3s ease !important;
}
.main-nav ul li a:hover,
.main-nav ul li a.active {
color: #3a6ea5 !important;
}
.main-nav .sub-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
background: #1a1a1a !important;
min-width: 200px !important;
border-radius: 4px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
transition: all 0.3s ease !important;
z-index: 10 !important;
display: block !important;
}
.main-nav .menu-item-has-children:hover > .sub-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.main-nav .sub-menu li {
width: 100% !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.main-nav .sub-menu li:last-child {
border-bottom: none !important;
}
.main-nav .sub-menu li a {
padding: 10px 15px !important;
display: block !important;
font-size: 14px !important;
} .mobile-menu-toggle {
display: none !important;
background: none !important;
border: none !important;
color: #fff !important;
font-size: 24px !important;
cursor: pointer !important;
margin-right: 15px !important;
}
.mobile-menu {
position: fixed !important;
top: 0 !important;
right: -300px !important;
width: 280px !important;
max-width: 90% !important;
height: 100vh !important;
background: #1a1a1a !important;
z-index: 9999 !important;
overflow-y: auto !important;
transition: right 0.3s ease !important;
padding: 0 !important;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2) !important;
}
.mobile-menu.active {
right: 0 !important;
}
body.rtl .mobile-menu {
right: auto !important;
left: -300px !important;
}
body.rtl .mobile-menu.active {
right: auto !important;
left: 0 !important;
}
.mobile-menu-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 9998 !important;
display: none !important;
}
.mobile-menu-overlay.active {
display: block !important;
}
.mobile-menu-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 15px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.mobile-logo {
max-width: 150px !important;
}
.mobile-logo img {
max-width: 100% !important;
height: auto !important;
}
.mobile-menu-close {
background: none !important;
border: none !important;
color: #fff !important;
font-size: 20px !important;
cursor: pointer !important;
}
.mobile-menu-items {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.mobile-menu-items li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.mobile-menu-items li a {
padding: 12px 15px !important;
display: block !important;
color: #fff !important;
text-decoration: none !important;
font-size: 15px !important;
}
.mobile-menu-item-has-children > a {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
}
.mobile-sub-menu {
display: none !important;
background: rgba(0, 0, 0, 0.2) !important;
padding-left: 0 !important;
list-style: none !important;
}
.mobile-menu-item-has-children.sub-menu-open .mobile-sub-menu {
display: block !important;
}
.sub-menu-toggle {
padding: 5px !important;
cursor: pointer !important;
}
.mobile-menu-item-has-children.sub-menu-open .sub-menu-toggle i {
transform: rotate(180deg) !important;
} .hero-section,
.hero {
position: relative !important;
padding: 80px 0 !important;
margin-top: 0 !important;
background: #121212 !important;
min-height: 550px !important;
display: flex !important;
align-items: center !important;
overflow: hidden !important;
z-index: 1 !important;
}
.hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: 
radial-gradient(circle at 20% 20%, rgba(58, 110, 165, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 107, 107, 0.1) 0%, transparent 50%) !important;
pointer-events: none !important;
z-index: -1 !important;
}
.hero-container {
position: relative !important;
z-index: 2 !important;
}
.hero-flex {
display: flex !important;
align-items: center !important;
gap: 30px !important;
flex-wrap: wrap !important;
}
.hero-content {
flex: 1 !important;
min-width: 300px !important;
}
.hero-title {
font-size: 2.5rem !important;
margin-bottom: 20px !important;
color: #fff !important;
font-weight: 700 !important;
}
.hero-main-image {
max-width: 100% !important;
height: auto !important;
border-radius: 8px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}
.hero-additional-images {
display: flex !important;
gap: 10px !important;
margin-top: 15px !important;
}
.hero-additional-image {
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 4px !important;
cursor: pointer !important;
border: 2px solid transparent !important;
transition: all 0.3s ease !important;
}
.hero-additional-image:hover {
border-color: #3a6ea5 !important;
transform: translateY(-3px) !important;
} .header-right {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
.contact {
color: #fff !important;
display: flex !important;
align-items: center !important;
font-size: 14px !important;
margin-right: 15px !important;
}
.contact i {
margin-right: 5px !important;
color: #3a6ea5 !important;
}
body.rtl .contact i {
margin-right: 0 !important;
margin-left: 5px !important;
}
.btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
border-radius: 4px !important;
text-decoration: none !important;
font-size: 14px !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
}
.btn-ghost {
background: rgba(58, 110, 165, 0.1) !important;
color: #3a6ea5 !important;
}
.btn-ghost:hover {
background: #3a6ea5 !important;
color: #fff !important;
}
.btn-outline {
border: 1px solid #3a6ea5 !important;
color: #3a6ea5 !important;
}
.btn-outline:hover {
background: #3a6ea5 !important;
color: #fff !important;
}
.cart-icon {
position: relative !important;
}
.cart-count {
position: absolute !important;
top: -8px !important;
right: -8px !important;
background: #ff6b6b !important;
color: #fff !important;
font-size: 10px !important;
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.account-text,
.cart-text,
.login-text {
margin-left: 5px !important;
}
body.rtl .account-text,
body.rtl .cart-text,
body.rtl .login-text {
margin-left: 0 !important;
margin-right: 5px !important;
}
.language-switcher {
position: relative !important;
margin-left: 10px !important;
}
body.rtl .language-switcher {
margin-left: 0 !important;
margin-right: 10px !important;
}
.lang-btn {
display: flex !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.1) !important;
color: #fff !important;
padding: 5px 10px !important;
border-radius: 4px !important;
cursor: pointer !important;
font-size: 14px !important;
}
.lang-btn i {
margin-left: 5px !important;
font-size: 12px !important;
}
body.rtl .lang-btn i {
margin-left: 0 !important;
margin-right: 5px !important;
}
.lang-dropdown {
position: absolute !important;
top: 100% !important;
right: 0 !important;
background: #1a1a1a !important;
min-width: 120px !important;
border-radius: 4px !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
z-index: 10 !important;
display: none !important;
}
body.rtl .lang-dropdown {
right: auto !important;
left: 0 !important;
}
.language-switcher:hover .lang-dropdown {
display: block !important;
}
.lang-option {
display: block !important;
padding: 8px 12px !important;
color: #fff !important;
text-decoration: none !important;
font-size: 14px !important;
transition: background 0.3s ease !important;
}
.lang-option:hover {
background: rgba(255, 255, 255, 0.1) !important;
} .container {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 15px !important;
}
.section {
padding: 60px 0 !important;
position: relative !important;
} @media (max-width: 992px) {
.desktop-nav {
display: none !important;
}
.mobile-menu-toggle {
display: block !important;
}
.header-right {
margin-left: auto !important;
}
body.rtl .header-right {
margin-left: 0 !important;
margin-right: auto !important;
}
.account-text,
.login-text,
.cart-text {
display: none !important;
}
.contact {
display: none !important;
}
.hero-title {
font-size: 2rem !important;
}
}
@media (max-width: 768px) {
.hero-flex {
flex-direction: column !important;
text-align: center !important;
}
.hero-content {
order: 2 !important;
}
.hero-image {
order: 1 !important;
margin-bottom: 30px !important;
}
.hero-additional-images {
justify-content: center !important;
}
.btn {
padding: 6px 10px !important;
font-size: 13px !important;
}
}
@media (max-width: 576px) {
.topbar {
padding: 8px 0 !important;
}
.logo {
max-width: 150px !important;
}
.hero-title {
font-size: 1.75rem !important;
}
.header-right {
gap: 5px !important;
}
} .footer {
background: #121212 !important;
padding: 60px 0 20px !important;
color: #fff !important;
position: relative !important;
}
.footer::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: radial-gradient(circle at 50% 0%, rgba(58, 110, 165, 0.1) 0%, transparent 70%) !important;
pointer-events: none !important;
} .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
gap: 20px !important;
}
.woocommerce ul.products li.product,
.wp-block-woocommerce-product {
width: 100% !important;
margin: 0 !important;
background: #1a1a1a !important;
border-radius: 8px !important;
overflow: hidden !important;
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
padding: 0 !important;
}
.woocommerce ul.products li.product:hover,
.wp-block-woocommerce-product:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wp-block-woocommerce-product-title {
padding: 15px 15px 5px !important;
font-size: 16px !important;
color: #fff !important;
font-weight: 500 !important;
}
.woocommerce ul.products li.product .price,
.wp-block-woocommerce-product-price {
color: #3a6ea5 !important;
font-size: 18px !important;
font-weight: 700 !important;
padding: 0 15px !important;
}
.woocommerce ul.products li.product .button,
.wp-block-woocommerce-product .wp-block-button__link,
.add_to_cart_button {
background: #3a6ea5 !important;
color: #fff !important;
border-radius: 4px !important;
font-weight: 500 !important;
margin: 10px 15px 15px !important;
text-align: center !important;
display: block !important;
transition: background 0.3s ease !important;
}
.woocommerce ul.products li.product .button:hover,
.wp-block-woocommerce-product .wp-block-button__link:hover,
.add_to_cart_button:hover {
background: #2a5080 !important;
}
@media (max-width: 768px) {
.woocommerce ul.products {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}
}
@media (max-width: 480px) {
.woocommerce ul.products {
grid-template-columns: 1fr !important;
}
}.hero-section,
.hero {
position: relative;
padding: 180px 0 100px;
min-height: 100vh;
display: flex;
align-items: center;
background: var(--dark);
overflow: hidden;
z-index: 1;
} .hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: 
radial-gradient(circle at 20% 20%, rgba(45, 92, 246, 0.08) 0%, transparent 30%),
radial-gradient(circle at 80% 80%, rgba(255, 64, 129, 0.08) 0%, transparent 30%);
z-index: -1;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232d5cf6' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
z-index: -1;
}
.hero-container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 3;
}
.hero-flex {
display: flex;
align-items: center;
gap: 60px;
}
.hero-content {
flex: 1;
max-width: 600px;
}
.hero-subtitle {
font-size: 1.1rem;
font-weight: 500;
color: var(--primary);
margin-bottom: 20px;
display: flex;
align-items: center;
letter-spacing: 1px;
}
.hero-subtitle::before {
content: '';
display: inline-block;
width: 30px;
height: 2px;
background: var(--primary);
margin-right: 15px;
}
.hero-title {
font-size: 3.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 25px;
line-height: 1.2;
background: linear-gradient(135deg, #fff 0%, #d1d5db 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.hero-title span {
color: var(--primary);
-webkit-text-fill-color: var(--primary);
}
.hero-description {
font-size: 1.1rem;
color: var(--gray-200);
margin-bottom: 35px;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 15px;
margin-bottom: 40px;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 30px;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
border: none;
position: relative;
overflow: hidden;
z-index: 1;
}
.hero-btn-primary {
background: var(--primary);
color: var(--white);
box-shadow: 0 10px 25px rgba(45, 92, 246, 0.3);
}
.hero-btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.6s ease;
z-index: -1;
}
.hero-btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(45, 92, 246, 0.4);
}
.hero-btn-primary:hover::before {
left: 100%;
}
.hero-btn-secondary {
background: transparent;
color: var(--white);
border: 1px solid var(--gray-600);
}
.hero-btn-secondary:hover {
background: var(--glass-bg);
border-color: var(--gray-400);
transform: translateY(-5px);
}
.hero-stats {
display: flex;
gap: 40px;
}
.hero-stat {
text-align: center;
}
.hero-stat-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 5px;
}
.hero-stat-label {
font-size: 0.9rem;
color: var(--gray-400);
text-transform: uppercase;
letter-spacing: 1px;
}
.hero-image-wrapper {
flex: 1;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.hero-main-image {
max-width: 100%;
height: auto;
position: relative;
border-radius: 20px;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.2);
transition: all 0.5s ease;
z-index: 2;
}
.hero-image-backdrop {
position: absolute;
width: 90%;
height: 90%;
border-radius: 20px;
background: linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
filter: blur(30px);
opacity: 0.25;
z-index: 1;
}
.hero-additional-images {
display: flex;
gap: 15px;
margin-top: 20px;
justify-content: center;
}
.hero-additional-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
filter: brightness(0.7);
}
.hero-additional-image:hover {
transform: translateY(-5px);
border-color: var(--primary);
filter: brightness(1);
}
.floating-shapes {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.shape {
position: absolute;
background: var(--primary);
border-radius: 50%;
filter: blur(60px);
opacity: 0.1;
}
.shape-1 {
width: 300px;
height: 300px;
top: -150px;
left: -150px;
animation: floating-1 15s infinite alternate ease-in-out;
}
.shape-2 {
width: 400px;
height: 400px;
bottom: -200px;
right: -200px;
background: var(--secondary);
animation: floating-2 20s infinite alternate ease-in-out;
}
.shape-3 {
width: 200px;
height: 200px;
top: 50%;
right: 15%;
background: var(--primary);
animation: floating-3 10s infinite alternate ease-in-out;
}
@keyframes floating-1 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(50px, 50px);
}
}
@keyframes floating-2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-70px, -50px);
}
}
@keyframes floating-3 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-30px, 30px);
}
} .scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
color: var(--gray-400);
font-size: 0.9rem;
text-decoration: none;
animation: bounce 2s infinite;
}
.scroll-down i {
font-size: 1.5rem;
margin-top: 8px;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0) translateX(-50%);
}
40% {
transform: translateY(-10px) translateX(-50%);
}
60% {
transform: translateY(-5px) translateX(-50%);
}
} @media (max-width: 1200px) {
.hero-title {
font-size: 3rem;
}
.hero-flex {
gap: 40px;
}
}
@media (max-width: 992px) {
.hero-section,
.hero {
padding: 140px 0 80px;
}
.hero-title {
font-size: 2.5rem;
}
.hero-flex {
flex-direction: column;
gap: 50px;
}
.hero-content {
max-width: 100%;
text-align: center;
}
.hero-subtitle {
justify-content: center;
}
.hero-subtitle::before {
display: none;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-section,
.hero {
padding: 120px 0 60px;
}
.hero-title {
font-size: 2rem;
}
.hero-description {
font-size: 1rem;
}
.hero-btn {
padding: 12px 25px;
font-size: 0.95rem;
}
.hero-stats {
flex-wrap: wrap;
gap: 30px;
}
.hero-stat {
flex: 1;
min-width: 120px;
}
.hero-stat-value {
font-size: 2rem;
}
}
@media (max-width: 576px) {
.hero-buttons {
flex-direction: column;
gap: 10px;
}
.hero-stats {
gap: 20px;
}
.hero-stat-value {
font-size: 1.8rem;
}
.hero-stat-label {
font-size: 0.8rem;
}
}:root { --primary: #0a1c2d;
--primary-dark: #051525;
--primary-gradient: linear-gradient(135deg, #0a1c2d 0%, #051525 100%);
--secondary: #4d9cff;
--secondary-dark: #3a89f1;
--secondary-light: #6cabff;
--secondary-gradient: linear-gradient(135deg, #4d9cff 0%, #3a89f1 100%);
--accent: #ff9d4d;
--accent-gradient: linear-gradient(135deg, #ff9d4d 0%, #ff7a1a 100%);
--success: #00c875;
--warning: #ffcb2d; --text-white: #ffffff;
--text-light: rgba(255, 255, 255, 0.9);
--text-muted: rgba(255, 255, 255, 0.7);
--glass-bg: rgba(10, 28, 45, 0.7);
--glass-bg-light: rgba(35, 61, 85, 0.65);
--glass-border: rgba(255, 255, 255, 0.1); --shadow-sm: 0 5px 15px rgba(0, 0, 0, 0.1);
--shadow-md: 0 10px 25px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.2);
--shadow-blue: 0 10px 35px rgba(77, 156, 255, 0.25);
--transition-fast: all 0.2s ease;
--transition-normal: all 0.3s ease;
--transition-smooth: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
--transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); --space-unit: 8px;
--space-xs: calc(var(--space-unit) * 1); --space-sm: calc(var(--space-unit) * 2); --space-md: calc(var(--space-unit) * 3); --space-lg: calc(var(--space-unit) * 5); --space-xl: calc(var(--space-unit) * 8);  --container-padding: calc(var(--space-unit) * 4); --section-spacing: calc(var(--space-unit) * 12); --content-spacing: calc(var(--space-unit) * 4);  --border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
--border-radius-xl: 32px;
--border-radius-pill: 9999px;
} .hero-section.simple-layout {
background: var(--primary-gradient);
padding: var(--section-spacing) 0; margin-top: 0; padding-top: 110px; min-height: auto; display: flex;
align-items: center;
color: var(--text-white);
overflow: visible; position: relative;
box-sizing: border-box;
} .hero-section.simple-layout::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 80%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(77, 156, 255, 0.07) 0%, transparent 70%);
z-index: 1;
animation: float-slow 20s infinite alternate ease-in-out;
}
.hero-section.simple-layout::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 60%;
height: 80%;
background: radial-gradient(ellipse at center, rgba(255, 157, 77, 0.05) 0%, transparent 70%);
z-index: 1;
animation: float-slow 15s infinite alternate-reverse ease-in-out;
}
@keyframes float-slow {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(2%, 2%) scale(1.03); }
100% { transform: translate(-2%, -1%) scale(0.97); }
} .hero-section.simple-layout .decorative-dot {
position: absolute;
width: 4px;
height: 4px;
background: var(--secondary);
border-radius: 50%;
opacity: 0.3;
z-index: 1;
}
.hero-section.simple-layout .decorative-dot:nth-child(1) { top: 20%; left: 15%; }
.hero-section.simple-layout .decorative-dot:nth-child(2) { top: 40%; left: 10%; }
.hero-section.simple-layout .decorative-dot:nth-child(3) { top: 60%; left: 20%; }
.hero-section.simple-layout .decorative-dot:nth-child(4) { top: 30%; right: 15%; }
.hero-section.simple-layout .decorative-dot:nth-child(5) { top: 70%; right: 10%; } .hero-top-content {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-lg);
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--container-padding);
} .hero-text-side {
flex: 1;
max-width: 550px;
position: relative;
z-index: 2;
} .hero-image-side {
flex: 1;
max-width: 550px;
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
} .hero-bottom-cards {
max-width: 1200px;
margin: var(--space-xl) auto 0;
padding: 0 var(--container-padding);
position: relative;
z-index: 2;
} .hero-subtitle {
color: var(--secondary);
font-size: clamp(14px, 3vw, 18px);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: var(--space-md);
position: relative;
padding-left: var(--space-lg);
display: inline-flex;
align-items: center;
height: 36px;
background: var(--glass-bg-light);
backdrop-filter: blur(8px);
border-radius: var(--border-radius-pill);
padding-right: var(--space-md);
box-shadow: var(--shadow-sm);
border: 1px solid var(--glass-border);
transition: var(--transition-normal);
}
.hero-subtitle::before {
content: '';
position: absolute;
left: 12px;
top: 50%;
width: 20px;
height: 2px;
background: var(--secondary);
transform: translateY(-50%);
box-shadow: 0 0 10px var(--secondary);
}
.hero-subtitle:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-blue);
} .hero-title {
font-size: clamp(32px, 6vw, 56px);
font-weight: 800;
line-height: 1.15;
margin-bottom: var(--space-lg);
color: var(--text-white);
position: relative;
letter-spacing: -0.02em;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.hero-title .highlight {
color: var(--secondary);
position: relative;
display: inline-block;
}
.hero-title .highlight::after {
content: '';
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
height: 8px;
background: var(--secondary-gradient);
opacity: 0.3;
z-index: -1;
border-radius: var(--border-radius-pill);
} .hero-simple-description {
font-size: clamp(16px, 2vw, 18px);
line-height: 1.8;
margin-bottom: var(--space-lg);
color: var(--text-light);
max-width: 85%;
position: relative;
padding-left: var(--space-sm);
}
.hero-simple-description::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 3px;
height: 100%;
background: var(--secondary-gradient);
border-radius: var(--border-radius-pill);
opacity: 0.7;
} .hero-buttons {
display: flex;
gap: var(--space-md);
margin-bottom: var(--space-xl);
flex-wrap: wrap;
position: relative;
}
.hero-buttons::before {
content: '';
position: absolute;
bottom: -var(--space-lg);
left: 0;
width: 100px;
height: 1px;
background: linear-gradient(90deg, var(--secondary) 0%, transparent 100%);
opacity: 0.5;
}
.hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 var(--space-lg);
border-radius: var(--border-radius-pill);
font-weight: 600;
font-size: clamp(14px, 1.5vw, 16px);
text-decoration: none;
transition: var(--transition-bounce);
position: relative;
overflow: hidden;
letter-spacing: 0.03em;
z-index: 1;
}
.hero-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
transition: var(--transition-normal);
opacity: 0;
transform: scale(0.5);
}
.hero-btn:hover::before {
transform: scale(1);
opacity: 1;
}
.btn-primary {
background: var(--secondary-gradient);
color: var(--text-white);
box-shadow: var(--shadow-blue);
}
.btn-primary::before {
background: linear-gradient(135deg, var(--secondary-light) 0%, var(--secondary-dark) 100%);
}
.btn-primary:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: 0 15px 30px rgba(77, 156, 255, 0.5);
}
.btn-secondary {
background: var(--glass-bg-light);
color: var(--text-white);
border: 1px solid var(--glass-border);
backdrop-filter: blur(8px);
}
.btn-secondary::before {
background: rgba(255, 255, 255, 0.15);
}
.btn-secondary:hover {
transform: translateY(-5px) scale(1.03);
box-shadow: var(--shadow-md);
border-color: rgba(255, 255, 255, 0.3);
} .hero-btn i {
margin-left: var(--space-xs);
font-size: 18px;
transition: var(--transition-normal);
}
.hero-btn:hover i {
transform: translateX(3px);
} .hero-features-row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
position: relative;
padding: var(--space-md);
gap: var(--space-md);
border-radius: var(--border-radius-lg);
z-index: 5;
} .feature-card {
flex: 1;
min-width: 200px;
padding: var(--space-lg);
border-radius: var(--border-radius-md);
background: var(--glass-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-md);
transition: var(--transition-bounce);
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 var(--space-xs);
z-index: 2;
}
.feature-card:first-child {
margin-left: 0;
}
.feature-card:last-child {
margin-right: 0;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: var(--secondary-gradient);
transition: var(--transition-normal);
opacity: 0.7;
}
.feature-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, 
rgba(77, 156, 255, 0.1) 0%, 
transparent 80%);
z-index: -1;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-blue);
background: var(--glass-bg-light);
}
.feature-card:hover::before {
opacity: 1;
box-shadow: 0 0 15px rgba(77, 156, 255, 0.5);
} .feature-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--secondary);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-md);
position: relative;
color: var(--text-white);
box-shadow: var(--shadow-blue);
overflow: hidden;
transition: var(--transition-normal);
}
.feature-icon i {
font-size: 24px;
position: relative;
z-index: 2;
transition: var(--transition-normal);
}
.feature-icon::before {
content: '';
position: absolute;
inset: 0;
background: var(--secondary-gradient);
z-index: 1;
transition: var(--transition-normal);
}
.feature-card:hover .feature-icon {
transform: scale(1.1) rotate(5deg);
}
.feature-card:hover .feature-icon i {
transform: scale(1.2);
} .feature-title {
font-size: 18px;
font-weight: 600;
margin-bottom: var(--space-sm);
color: var(--text-white);
transition: var(--transition-normal);
}
.feature-card:hover .feature-title {
color: var(--secondary);
} .feature-text {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
transition: var(--transition-normal);
} .counter-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: var(--transition-normal);
padding: var(--space-md);
border-radius: var(--border-radius-md);
flex: 1;
min-width: 150px;
text-align: center;
background: rgba(10, 28, 45, 0.3);
margin: 0 var(--space-xs);
backdrop-filter: blur(5px);
border: 1px solid var(--glass-border);
}
.counter-item:first-child {
margin-left: 0;
}
.counter-item:last-child {
margin-right: 0;
}
.counter-item:hover {
transform: translateY(-8px);
background: rgba(77, 156, 255, 0.1);
box-shadow: var(--shadow-blue);
}
.counter-item::before {
content: '';
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: var(--secondary-gradient);
border-radius: var(--border-radius-pill);
opacity: 0;
transition: var(--transition-normal);
}
.counter-item:hover::before {
opacity: 1;
width: 60px;
bottom: -3px;
}
.counter-number {
font-size: clamp(32px, 4vw, 44px);
font-weight: 800;
line-height: 1;
margin-bottom: var(--space-xs);
background: var(--secondary-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
position: relative;
}
.counter-number::after {
content: attr(data-suffix);
font-size: 40%;
position: absolute;
top: 0;
right: -15px;
-webkit-text-fill-color: var(--secondary);
opacity: 0.8;
}
.counter-text {
font-size: clamp(12px, 1.5vw, 14px);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
position: relative;
} .hero-image-side {
position: relative;
justify-content: center;
align-items: center;
min-height: 450px;
z-index: 2;
} .hero-image-column::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 450px;
height: 450px;
border-radius: 50%;
background: radial-gradient(circle, rgba(77, 156, 255, 0.05) 0%, transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
animation: pulse-slow 10s infinite alternate ease-in-out;
}
@keyframes pulse-slow {
0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; }
}
.hero-image-wrapper {
position: relative;
display: block;
max-width: 500px;
width: 100%;
height: auto;
box-shadow: var(--shadow-lg);
border-radius: var(--border-radius-lg);
overflow: hidden;
transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
transition: var(--transition-smooth);
z-index: 2;
margin: 0 auto;
}
.hero-image-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, 
rgba(77, 156, 255, 0.2) 0%, 
transparent 80%);
z-index: 3;
opacity: 0.7;
transition: var(--transition-normal);
}
.hero-image-wrapper::after {
content: '';
position: absolute;
inset: 0;
border: 1px solid rgba(77, 156, 255, 0.3);
border-radius: var(--border-radius-lg);
box-shadow: inset 0 0 30px rgba(77, 156, 255, 0.1);
z-index: 4;
pointer-events: none;
}
.hero-image-wrapper:hover {
transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.02);
box-shadow: var(--shadow-blue), 0 0 30px rgba(77, 156, 255, 0.2);
}
.hero-image-wrapper:hover::before {
opacity: 0.3;
}
.main-hero-image {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius-lg);
transition: var(--transition-normal);
transform: scale(1);
filter: contrast(1.05) saturate(1.1);
}
.hero-image-wrapper:hover .main-hero-image {
transform: scale(1.05);
} .old-price {
font-size: 14px;
color: var(--text-muted);
text-decoration: line-through;
margin-right: var(--space-xs);
position: relative;
display: inline-block;
} .simple-secondary-image, 
.simple-tertiary-image,
.hero-secondary-image,
.hero-tertiary-image {
position: absolute;
overflow: hidden;
transition: var(--transition-smooth);
cursor: pointer;
border-radius: var(--border-radius-md);
transform-origin: center;
display: block; opacity: 0.95;
} .simple-secondary-image,
.hero-secondary-image {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(77, 156, 255, 0.2);
z-index: 4;
border: 4px solid var(--primary-dark);
backdrop-filter: blur(5px);
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.simple-tertiary-image,
.hero-tertiary-image {
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(77, 156, 255, 0.2);
z-index: 3;
border: 4px solid var(--primary-dark);
backdrop-filter: blur(5px);
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
} .hero-section[data-images-position="left"] .simple-secondary-image,
.hero-section[data-images-position="left"] .hero-secondary-image {
bottom: 20px;
left: -20px;
display: block;
transform: rotate(-8deg);
width: 140px;
height: 140px;
border: 4px solid var(--primary-dark);
background-color: rgba(10, 28, 45, 0.3);
backdrop-filter: blur(5px);
}
.hero-section[data-images-position="left"] .simple-tertiary-image,
.hero-section[data-images-position="left"] .hero-tertiary-image {
top: 40px;
left: -40px;
display: block;
transform: rotate(6deg);
width: 160px;
height: 160px;
border: 4px solid var(--primary-dark);
background-color: rgba(10, 28, 45, 0.3);
backdrop-filter: blur(5px);
} .hero-section[data-images-position="left"][data-images-size="small"] .simple-secondary-image,
.hero-section[data-images-position="left"][data-images-size="small"] .simple-tertiary-image,
.hero-section[data-images-position="left"][data-images-size="small"] .hero-secondary-image,
.hero-section[data-images-position="left"][data-images-size="small"] .hero-tertiary-image {
width: 100px;
height: 100px;
border-radius: var(--border-radius-sm);
border-width: 3px;
}
.hero-section[data-images-position="left"][data-images-size="small"] .simple-secondary-image,
.hero-section[data-images-position="left"][data-images-size="small"] .hero-secondary-image {
bottom: -15px;
left: 50px;
}
.hero-section[data-images-position="left"][data-images-size="small"] .simple-tertiary-image,
.hero-section[data-images-position="left"][data-images-size="small"] .hero-tertiary-image {
top: 30px;
left: 0;
} .hero-section[data-images-position="right"] .simple-secondary-image,
.hero-section[data-images-position="right"] .hero-secondary-image {
bottom: 20px;
right: -20px;
display: block;
transform: rotate(8deg);
width: 140px;
height: 140px;
border: 4px solid var(--primary-dark);
z-index: 4;
background-color: rgba(10, 28, 45, 0.3);
backdrop-filter: blur(5px);
}
.hero-section[data-images-position="right"] .simple-tertiary-image,
.hero-section[data-images-position="right"] .hero-tertiary-image {
top: 40px;
right: -40px;
display: block;
transform: rotate(-6deg);
width: 160px;
height: 160px;
border: 4px solid var(--primary-dark);
z-index: 3;
background-color: rgba(10, 28, 45, 0.3);
backdrop-filter: blur(5px);
} .hero-section[data-images-position="right"][data-images-size="small"] .simple-secondary-image,
.hero-section[data-images-position="right"][data-images-size="small"] .simple-tertiary-image,
.hero-section[data-images-position="right"][data-images-size="small"] .hero-secondary-image,
.hero-section[data-images-position="right"][data-images-size="small"] .hero-tertiary-image {
width: 100px;
height: 100px;
border-radius: var(--border-radius-sm);
border-width: 3px;
}
.hero-section[data-images-position="right"][data-images-size="small"] .simple-secondary-image,
.hero-section[data-images-position="right"][data-images-size="small"] .hero-secondary-image {
bottom: -15px;
right: 50px;
}
.hero-section[data-images-position="right"][data-images-size="small"] .simple-tertiary-image,
.hero-section[data-images-position="right"][data-images-size="small"] .hero-tertiary-image {
top: 30px;
right: 0;
}  .hero-section[data-images-position="left"][data-images-size="medium"] .simple-secondary-image,
.hero-section[data-images-position="left"][data-images-size="medium"] .simple-tertiary-image,
.hero-section[data-images-position="left"][data-images-size="medium"] .hero-secondary-image,
.hero-section[data-images-position="left"][data-images-size="medium"] .hero-tertiary-image {
width: 150px;
height: 150px;
border-radius: var(--border-radius-md);
border: 4px solid var(--primary-dark);
box-shadow: var(--shadow-blue);
backdrop-filter: blur(5px);
}
.hero-section[data-images-position="left"][data-images-size="medium"] .simple-secondary-image,
.hero-section[data-images-position="left"][data-images-size="medium"] .hero-secondary-image {
bottom: -25px;
left: 30px;
transform: rotate(-5deg);
}
.hero-section[data-images-position="left"][data-images-size="medium"] .simple-tertiary-image,
.hero-section[data-images-position="left"][data-images-size="medium"] .hero-tertiary-image {
top: 40px;
left: 5px;
transform: rotate(5deg);
} .hero-section[data-images-position="right"][data-images-size="medium"] .simple-secondary-image,
.hero-section[data-images-position="right"][data-images-size="medium"] .simple-tertiary-image,
.hero-section[data-images-position="right"][data-images-size="medium"] .hero-secondary-image,
.hero-section[data-images-position="right"][data-images-size="medium"] .hero-tertiary-image {
width: 150px;
height: 150px;
border-radius: var(--border-radius-md);
border: 4px solid var(--primary-dark);
box-shadow: var(--shadow-blue);
backdrop-filter: blur(5px);
}
.hero-section[data-images-position="right"][data-images-size="medium"] .simple-secondary-image,
.hero-section[data-images-position="right"][data-images-size="medium"] .hero-secondary-image {
bottom: -25px;
right: 30px;
transform: rotate(5deg);
}
.hero-section[data-images-position="right"][data-images-size="medium"] .simple-tertiary-image,
.hero-section[data-images-position="right"][data-images-size="medium"] .hero-tertiary-image {
top: 40px;
right: 5px;
transform: rotate(-5deg);
}  .hero-section[data-images-position="left"][data-images-size="large"] .simple-secondary-image,
.hero-section[data-images-position="left"][data-images-size="large"] .simple-tertiary-image,
.hero-section[data-images-position="left"][data-images-size="large"] .hero-secondary-image,
.hero-section[data-images-position="left"][data-images-size="large"] .hero-tertiary-image {
width: 180px;
height: 180px;
border-radius: var(--border-radius-lg);
border: 5px solid var(--primary-dark);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(8px);
}
.hero-section[data-images-position="left"][data-images-size="large"] .simple-secondary-image,
.hero-section[data-images-position="left"][data-images-size="large"] .hero-secondary-image {
bottom: -25px;
left: 20px;
transform: rotate(-10deg);
}
.hero-section[data-images-position="left"][data-images-size="large"] .simple-tertiary-image,
.hero-section[data-images-position="left"][data-images-size="large"] .hero-tertiary-image {
top: 20px;
left: -10px;
transform: rotate(10deg);
} .hero-section[data-images-position="right"][data-images-size="large"] .simple-secondary-image,
.hero-section[data-images-position="right"][data-images-size="large"] .simple-tertiary-image,
.hero-section[data-images-position="right"][data-images-size="large"] .hero-secondary-image,
.hero-section[data-images-position="right"][data-images-size="large"] .hero-tertiary-image {
width: 180px;
height: 180px;
border-radius: var(--border-radius-lg);
border: 5px solid var(--primary-dark);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(8px);
}
.hero-section[data-images-position="right"][data-images-size="large"] .simple-secondary-image,
.hero-section[data-images-position="right"][data-images-size="large"] .hero-secondary-image {
bottom: -25px;
right: 20px;
transform: rotate(10deg);
}
.hero-section[data-images-position="right"][data-images-size="large"] .simple-tertiary-image,
.hero-section[data-images-position="right"][data-images-size="large"] .hero-tertiary-image {
top: 20px;
right: -10px;
transform: rotate(-10deg);
} .simple-secondary-image::before,
.simple-tertiary-image::before,
.hero-secondary-image::before,
.hero-tertiary-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(77, 156, 255, 0.15) 0%, rgba(10, 28, 45, 0.3) 70%);
z-index: 1;
transition: var(--transition-normal);
border-radius: inherit;
}
.simple-secondary-image::after,
.simple-tertiary-image::after,
.hero-secondary-image::after,
.hero-tertiary-image::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at 70% 70%, rgba(77, 156, 255, 0.2) 0%, transparent 60%);
z-index: 2;
transition: var(--transition-normal);
filter: blur(5px);
opacity: 0.5;
} .simple-secondary-image:hover,
.simple-tertiary-image:hover,
.hero-secondary-image:hover,
.hero-tertiary-image:hover {
transform: scale(1.05) rotate(0) !important;
z-index: 10 !important;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--secondary) !important;
border-color: var(--primary-dark) !important;
}
.simple-secondary-image:hover::after,
.simple-tertiary-image:hover::after,
.hero-secondary-image:hover::after,
.hero-tertiary-image:hover::after {
opacity: 0.8;
filter: blur(8px);
background: radial-gradient(circle at 70% 70%, rgba(77, 156, 255, 0.3) 0%, transparent 70%);
}
.simple-secondary-image img,
.simple-tertiary-image img,
.hero-secondary-image img,
.hero-tertiary-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-normal);
z-index: 0;
}
.simple-secondary-image:hover img,
.simple-tertiary-image:hover img,
.hero-secondary-image:hover img,
.hero-tertiary-image:hover img {
transform: scale(1.1);
}
.simple-secondary-image::before,
.simple-tertiary-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, 
rgba(10, 28, 45, 0.2) 0%, 
transparent 80%);
z-index: 2;
transition: var(--transition-normal);
}
.simple-secondary-image:hover,
.simple-tertiary-image:hover {
transform: rotate(0deg) scale(1.1) translateY(-10px);
z-index: 5;
box-shadow: var(--shadow-lg);
}
.simple-secondary-image img, 
.simple-tertiary-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-normal);
}
.simple-secondary-image:hover img, 
.simple-tertiary-image:hover img {
transform: scale(1.1);
} .vip-badge {
position: absolute;
top: -15px;
right: 20px;
background: var(--accent-gradient);
color: var(--text-white);
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--border-radius-pill);
box-shadow: var(--shadow-md);
text-transform: uppercase;
letter-spacing: 0.05em;
z-index: 10;
transform: rotate(3deg);
}
.vip-badge::before {
content: '★'; margin-right: 3px;
} @media (max-width: 1200px) {
.hero-section.simple-layout {
min-height: auto;
padding: calc(var(--section-spacing) * 0.8) 0;
}
.hero-top-content {
gap: var(--space-lg);
padding: 0 var(--space-lg);
}
.hero-image-wrapper {
max-width: 450px;
transform: perspective(800px) rotateY(-3deg) rotateX(3deg);
}
.simple-secondary-image, 
.simple-tertiary-image {
width: 150px;
height: 150px;
}
}
@media (max-width: 992px) {
.hero-text-side,
.hero-image-side {
flex: 0 0 100%;
max-width: 100%;
}
.hero-text-side {
margin-bottom: var(--space-lg);
}
.hero-image-side {
min-height: 400px;
}
.hero-image-wrapper {
transform: perspective(800px) rotateY(0) rotateX(0);
} .simple-secondary-image {
bottom: -20px;
left: -20px;
}
.simple-tertiary-image {
top: 30px;
right: -20px;
} .simple-counters-row {
flex-wrap: wrap;
gap: var(--space-md);
}
.counter-item {
flex: 0 0 calc(50% - var(--space-md));
margin: var(--space-xs);
}
}
@media (max-width: 768px) { .hero-section.simple-layout {
padding: calc(var(--section-spacing) * 0.6) 0;
text-align: center;
}
.hero-section.simple-layout::before,
.hero-section.simple-layout::after {
opacity: 0.5;
}
.hero-top-content {
flex-direction: column-reverse;
} .hero-text-side {
padding: 0 var(--space-md);
order: 2;
}
.hero-image-side {
order: 1;
min-height: 350px;
margin-bottom: var(--space-lg);
} .hero-subtitle {
padding-left: var(--space-md);
margin: 0 auto var(--space-md) auto;
font-size: 14px;
height: 32px;
} .hero-title {
font-size: 32px;
margin-bottom: var(--space-md);
} .hero-simple-description {
max-width: 100%;
padding-left: 0;
text-align: center;
font-size: 16px;
}
.hero-simple-description::before {
display: none;
} .hero-buttons {
justify-content: center;
margin-bottom: var(--space-lg);
}
.hero-buttons::before {
left: 50%;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent 0%, var(--secondary) 50%, transparent 100%);
}
.hero-btn {
height: 48px;
font-size: 14px;
} .hero-features-row {
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-sm);
}
.feature-card {
flex: 0 0 calc(50% - var(--space-sm));
margin-bottom: var(--space-md);
padding: var(--space-md);
min-height: 190px;
}
.feature-icon {
width: 50px;
height: 50px;
}
.feature-icon i {
font-size: 20px;
}
.feature-title {
font-size: 16px;
}
.feature-text {
font-size: 12px;
line-height: 1.4;
} .hero-image-wrapper {
max-width: 300px;
transform: none !important;
}
.simple-secondary-image,
.simple-tertiary-image {
width: 120px;
height: 120px;
}
.simple-secondary-image {
bottom: -15px;
left: -10px;
}
.simple-tertiary-image {
top: 20px;
right: -10px;
} }
@media (max-width: 576px) {
.hero-section.simple-layout {
padding: calc(var(--section-spacing) * 0.5) 0;
}
.hero-title {
font-size: 28px;
}
.hero-image-wrapper {
max-width: 260px;
}
.simple-secondary-image,
.simple-tertiary-image {
width: 100px;
height: 100px;
}
.counter-item {
flex: 0 0 100%;
margin: var(--space-xs) 0;
}
.counter-number {
font-size: 36px;
}
.hero-bottom-cards {
margin-top: var(--space-md);
}
}.about-section {
position: relative;
padding: 120px 0;
background: var(--dark-800);
overflow: hidden;
}
.about-container {
position: relative;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
z-index: 3;
}
.about-patterns {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%232d5cf6' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.about-patterns::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
top: 20%;
left: -150px;
background: radial-gradient(circle at center, rgba(45, 92, 246, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.about-patterns::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
bottom: 10%;
right: -200px;
background: radial-gradient(circle at center, rgba(255, 64, 129, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
.about-flex {
display: flex;
align-items: center;
gap: 60px;
}
.about-image-wrapper {
flex: 1;
position: relative;
}
.about-image-main {
position: relative;
z-index: 2;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.about-image {
width: 100%;
height: auto;
display: block;
transform: scale(1.01);
transition: transform 0.5s ease;
}
.about-image-wrapper:hover .about-image {
transform: scale(1.05);
}
.about-image-backdrop {
position: absolute;
width: 80%;
height: 80%;
bottom: -40px;
right: -40px;
border-radius: 20px;
background: var(--primary);
opacity: 0.1;
z-index: 1;
}
.about-image-floating {
position: absolute;
top: -30px;
left: -30px;
width: 120px;
height: 120px;
background: var(--dark);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
z-index: 3;
animation: float 3s infinite ease-in-out;
}
.about-image-floating img {
width: 60px;
height: 60px;
}
.about-experience {
position: absolute;
bottom: -30px;
right: 30px;
width: 150px;
height: 150px;
background: var(--primary);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 15px 30px rgba(45, 92, 246, 0.3);
z-index: 3;
}
.about-experience-number {
font-size: 3rem;
font-weight: 700;
color: var(--white);
line-height: 1;
}
.about-experience-text {
font-size: 1rem;
color: var(--white);
text-transform: uppercase;
margin-top: 5px;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.about-content {
flex: 1;
}
@media (max-width: 991px) {
.about-content {
order: 1;
}
}
.about-eyebrow {
color: var(--primary-400);
font-size: var(--text-sm);
text-transform: uppercase;
font-weight: var(--font-bold);
letter-spacing: 2px;
margin-bottom: var(--spacing-3);
display: flex;
align-items: center;
gap: var(--spacing-2);
}
.about-eyebrow::before {
content: '';
display: block;
width: 2em;
height: 2px;
background: var(--primary-gradient);
}
.section-title {
font-size: var(--text-4xl);
font-weight: var(--font-bold);
margin-bottom: var(--spacing-5);
line-height: 1.2;
color: var(--light-color);
position: relative;
}
.section-title strong {
color: var(--secondary-color);
font-weight: var(--font-extrabold);
}
.section-subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--spacing-6);
line-height: 1.6;
}
.about-text {
font-size: var(--text-base);
line-height: 1.8;
color: rgba(255, 255, 255, 0.7);
margin-bottom: var(--spacing-6);
} .about-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-5);
margin-top: var(--spacing-8);
}
.feature-item {
position: relative;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
padding: var(--spacing-5);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s var(--transition-type);
overflow: hidden;
z-index: 1;
}
.feature-item::before {
content: '';
position: absolute;
inset: 0;
background: var(--primary-gradient);
opacity: 0;
z-index: -1;
transition: opacity 0.4s var(--transition-type);
}
.feature-item:hover {
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: var(--shadow-lg);
}
.feature-item:hover::before {
opacity: 0.1;
}
.feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: var(--radius-full);
background: var(--primary-gradient);
color: white;
font-size: var(--text-xl);
margin-bottom: var(--spacing-4);
position: relative;
box-shadow: var(--shadow-md);
}
.feature-icon::after {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: var(--primary-gradient);
opacity: 0.3;
border-radius: var(--radius-full);
z-index: -1;
filter: blur(8px);
}
.feature-title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
margin-bottom: var(--spacing-2);
color: var(--light-color);
}
.feature-text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
} .about-cta {
margin-top: var(--spacing-8);
}
.about-btn {
display: inline-flex;
align-items: center;
gap: var(--spacing-2);
background: var(--secondary-gradient);
color: white;
border: none;
border-radius: var(--radius-md);
padding: var(--spacing-3) var(--spacing-6);
font-weight: var(--font-semibold);
font-size: var(--text-base);
cursor: pointer;
text-decoration: none;
transition: all 0.3s var(--transition-type);
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transform: translateX(-100%);
transition: transform 0.4s var(--transition-type);
}
.about-btn:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-xl);
}
.about-btn:hover::before {
transform: translateX(0);
}
.about-btn i {
font-size: var(--text-lg);
transition: transform 0.3s var(--transition-type);
}
.about-btn:hover i {
transform: translateX(4px);
}
.about-cta {
display: inline-block;
padding: 15px 30px;
background: var(--primary);
color: var(--white);
font-weight: 600;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 25px rgba(45, 92, 246, 0.3);
position: relative;
overflow: hidden;
z-index: 1;
}
.about-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: all 0.6s ease;
z-index: -1;
}
.about-cta:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(45, 92, 246, 0.4);
}
.about-cta:hover::before {
left: 100%;
} body.rtl .about-feature {
flex-direction: row-reverse;
}
body.rtl .section-subtitle::after {
left: auto;
right: 0;
} @media (max-width: 992px) {
.about-flex {
flex-direction: column;
gap: 60px;
}
.about-image-wrapper {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.about-experience {
width: 120px;
height: 120px;
}
.about-experience-number {
font-size: 2.5rem;
}
.about-experience-text {
font-size: 0.9rem;
}
.section-title {
font-size: 2.4rem;
}
}
@media (max-width: 768px) {
.about-section {
padding: 80px 0;
}
.about-features {
grid-template-columns: 1fr;
gap: 20px;
}
.section-title {
font-size: 2rem;
}
.about-cta {
padding: 12px 25px;
font-size: 0.95rem;
}
}
@media (max-width: 576px) {
.about-section {
padding: 60px 0;
}
.about-image-floating {
width: 90px;
height: 90px;
top: -20px;
left: -20px;
}
.about-image-floating img {
width: 45px;
height: 45px;
}
.about-experience {
width: 100px;
height: 100px;
right: 20px;
}
.about-experience-number {
font-size: 2rem;
}
.about-experience-text {
font-size: 0.8rem;
}
.section-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 20px;
}
.about-text {
font-size: 1rem;
}
}.services-section {
position: relative;
padding: var(--spacing-32) 0;
background: var(--dark-gradient);
overflow: hidden;
z-index: 1;
isolation: isolate;
}
.services-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 3;
} .services-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232d5cf6' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
z-index: 1;
pointer-events: none;
} .services-bg-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.services-bg-glow::before,
.services-bg-glow::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.15;
animation: pulseGlow 8s infinite alternate ease-in-out;
}
.services-bg-glow::before {
top: 10%;
left: 15%;
width: 40vw;
height: 40vw;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
animation-delay: 0s;
}
.services-bg-glow::after {
bottom: 20%;
right: 15%;
width: 35vw;
height: 35vw;
background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--primary) 100%);
animation-delay: 4s;
}
@keyframes pulseGlow {
0% {
opacity: 0.1;
transform: scale(1);
}
50% {
opacity: 0.17;
transform: scale(1.05);
}
100% {
opacity: 0.1;
transform: scale(1);
}
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 70px;
position: relative;
}
.services-subtitle {
font-size: 1.1rem;
font-weight: 500;
color: var(--primary);
margin-bottom: 15px;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
}
.services-title {
font-size: 2.8rem;
font-weight: 700;
color: var(--white);
margin-bottom: 25px;
line-height: 1.2;
}
.services-title span {
color: var(--primary);
}
.services-description {
color: var(--gray-300);
font-size: 1.05rem;
line-height: 1.8;
} .services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
} .service-card {
background: rgba(24, 26, 32, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: var(--radius-xl);
overflow: hidden;
transition: all 0.5s var(--transition-bounce);
position: relative;
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-lg);
height: 100%;
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 20px rgba(var(--primary-rgb), 0.2);
border-color: var(--primary-200);
background: rgba(30, 32, 40, 0.9);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary);
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.service-card:hover::before {
transform: scaleX(1);
transform-origin: left;
} .service-icon-wrapper {
width: 90px;
height: 90px;
border-radius: 50%;
background: rgba(var(--primary-rgb), 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: var(--spacing-8) auto var(--spacing-6);
position: relative;
transition: all 0.5s var(--transition-type);
border: 2px solid rgba(var(--primary-rgb), 0.2);
box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.15), 
inset 0 2px 8px rgba(255, 255, 255, 0.1);
overflow: hidden;
isolation: isolate;
z-index: 1;
} .service-icon-wrapper::before {
content: '';
position: absolute;
inset: 0;
background: conic-gradient(
from 0deg at 50% 50%,
var(--primary-200) 0%, 
var(--primary) 25%, 
var(--primary-600) 50%, 
var(--secondary) 75%, 
var(--primary-200) 100%
);
opacity: 0;
z-index: -1;
transition: opacity 0.5s var(--transition-type);
animation: rotate-gradient 8s linear infinite;
}
.service-card:hover .service-icon-wrapper::before {
opacity: 1;
}
@keyframes rotate-gradient {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.service-card:hover .service-icon-wrapper {
background: rgba(var(--primary-rgb), 0.15);
box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.3),
inset 0 3px 10px rgba(255, 255, 255, 0.2);
transform: scale(1.1) rotate(5deg);
} .service-icon {
font-size: 2.2rem;
color: var(--primary);
transition: all 0.5s var(--transition-type);
position: relative;
z-index: 2;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
transform: rotate(0);
}
.service-card:hover .service-icon {
color: var(--white);
transform: rotate(-5deg);
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)) brightness(1.2);
animation: icon-pulse 1.5s var(--transition-type) infinite alternate;
}
@keyframes icon-pulse {
0% {
transform: rotate(-5deg) scale(1);
}
100% {
transform: rotate(-5deg) scale(1.15);
}
} .service-content {
padding: 0 var(--spacing-6) var(--spacing-6);
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.service-title {
font-size: var(--text-xl);
font-weight: var(--font-bold);
color: var(--white);
margin-bottom: var(--spacing-4);
transition: all 0.4s var(--transition-type);
position: relative;
display: inline-block;
padding-bottom: 12px;
}
.service-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0.6);
width: 40px;
height: 3px;
background: var(--primary-gradient);
border-radius: var(--radius-full);
transition: all 0.4s var(--transition-type);
opacity: 0.7;
}
.service-card:hover .service-title {
color: var(--primary);
}
.service-card:hover .service-title::after {
transform: translateX(-50%) scaleX(1);
width: 60px;
opacity: 1;
}
.service-text {
color: var(--gray-300);
line-height: 1.7;
margin-bottom: var(--spacing-6);
font-size: var(--text-sm);
opacity: 0.85;
transition: all 0.3s var(--transition-type);
}
.service-card:hover .service-text {
opacity: 1;
color: var(--gray-200);
} .service-link {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: var(--font-semibold);
text-decoration: none;
font-size: var(--text-sm);
transition: all 0.4s var(--transition-type);
background: var(--primary-gradient);
padding: var(--spacing-2) var(--spacing-4);
border-radius: var(--radius-full);
position: relative;
overflow: hidden;
margin-top: auto;
width: fit-content;
align-self: center;
box-shadow: var(--shadow-md);
z-index: 1;
backdrop-filter: blur(8px);
border: 1px solid rgba(var(--primary-rgb), 0.2);
}
.service-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--secondary-gradient);
z-index: -1;
transition: opacity 0.4s var(--transition-type);
opacity: 0;
}
.service-link i {
margin-left: var(--spacing-2);
transition: transform 0.4s var(--transition-bounce);
font-size: var(--text-base);
}
.service-link:hover {
color: var(--white);
transform: translateY(-3px);
box-shadow: var(--shadow-lg), 0 8px 20px rgba(var(--primary-rgb), 0.25);
}
.service-link:hover::before {
opacity: 1;
}
.service-link:hover i {
transform: translateX(6px);
} body.rtl .service-link i {
margin-left: 0;
margin-right: var(--spacing-2);
transform: scaleX(-1);
}
body.rtl .service-link:hover i {
transform: translateX(-6px) scaleX(-1);
} .service-link:active {
transform: translateY(0);
box-shadow: var(--shadow-sm), 0 3px 10px rgba(var(--primary-rgb), 0.2);
} .featured-service {
margin-top: var(--spacing-16);
background: linear-gradient(145deg, rgba(24, 26, 32, 0.95), rgba(18, 20, 25, 0.98));
border-radius: var(--radius-2xl);
overflow: hidden;
display: flex;
position: relative;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-xl);
isolation: isolate;
z-index: 2;
}
.featured-service::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(145deg, rgba(45, 92, 246, 0.07), transparent);
z-index: 1;
pointer-events: none;
}
.featured-service-image {
flex: 1;
min-height: 400px;
position: relative;
overflow: hidden;
}
.featured-service-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.featured-service:hover .featured-service-image img {
transform: scale(1.1);
}
.featured-service-content {
flex: 1;
padding: 60px;
position: relative;
z-index: 2;
}
.featured-service-tag {
display: inline-block;
padding: 8px 16px;
background: var(--primary);
color: var(--white);
border-radius: 30px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.featured-service-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--white);
margin-bottom: 20px;
line-height: 1.3;
}
.featured-service-text {
color: var(--gray-200);
line-height: 1.8;
margin-bottom: 30px;
font-size: 1.05rem;
}
.featured-service-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.featured-service-feature {
display: flex;
align-items: center;
gap: 10px;
}
.featured-service-feature i {
color: var(--primary);
font-size: 1.2rem;
}
.featured-service-feature span {
color: var(--gray-200);
font-size: 0.95rem;
} .featured-service-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-3) var(--spacing-6);
background: var(--primary-gradient);
color: var(--white);
font-weight: var(--font-semibold);
border-radius: var(--radius-lg);
text-decoration: none;
transition: all 0.4s var(--transition-type);
border: none;
position: relative;
overflow: hidden;
z-index: 1;
box-shadow: var(--shadow-lg);
font-size: var(--text-base);
gap: var(--spacing-2);
width: fit-content;
}
.featured-service-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--secondary-gradient);
opacity: 0;
transition: opacity 0.4s var(--transition-type);
z-index: -1;
}
.featured-service-btn:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl), 0 15px 30px rgba(var(--primary-rgb), 0.3);
}
.featured-service-btn:hover::before {
opacity: 1;
}
.featured-service-btn i {
font-size: var(--text-lg);
transition: transform 0.4s var(--transition-bounce);
}
.featured-service-btn:hover i {
transform: translateX(6px);
} .featured-service-btn:active {
transform: translateY(0);
box-shadow: var(--shadow-md), 0 5px 10px rgba(var(--primary-rgb), 0.2);
} body.rtl .featured-service-btn i {
transform: scaleX(-1);
}
body.rtl .featured-service-btn:hover i {
transform: translateX(-6px) scaleX(-1);
} body.rtl .featured-service-feature {
flex-direction: row-reverse;
} @media (max-width: 1400px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-6);
}
.services-bg-glow::before {
width: 35vw;
height: 35vw;
}
.services-bg-glow::after {
width: 30vw;
height: 30vw;
}
}
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-5);
}
.services-container {
max-width: 90%;
}
.services-title {
font-size: var(--text-3xl);
}
.services-subtitle {
font-size: var(--text-lg);
}
}
@media (max-width: 992px) {
.services-section {
padding: var(--spacing-20) 0;
}
.section-header {
margin-bottom: var(--spacing-12);
}
.featured-service {
flex-direction: column;
margin-top: var(--spacing-12);
}
.featured-service-image {
min-height: 320px;
}
.featured-service-content {
padding: var(--spacing-8);
}
.featured-service-title {
font-size: var(--text-2xl);
}
.featured-service-text {
font-size: var(--text-base);
}
.featured-service-feature-title {
font-size: var(--text-base);
}
}
@media (max-width: 768px) {
.services-section {
padding: var(--spacing-16) 0;
}
.services-grid {
grid-template-columns: repeat(1, 1fr);
gap: var(--spacing-6);
}
.services-eyebrow {
font-size: var(--text-xs);
}
.services-title {
font-size: var(--text-2xl);
}
.services-subtitle {
font-size: var(--text-base);
margin-top: var(--spacing-6);
}
.section-header {
margin-bottom: var(--spacing-10);
}
.service-card:hover {
transform: translateY(-8px);
}
.service-icon-wrapper {
width: 80px;
height: 80px;
margin: var(--spacing-6) auto var(--spacing-4);
}
.service-icon {
font-size: var(--text-xl);
}
.featured-service-features {
grid-template-columns: 1fr;
gap: var(--spacing-4);
}
.featured-service-image {
min-height: 250px;
}
}
@media (max-width: 576px) {
.services-container {
padding: 0 var(--spacing-4);
}
.section-header {
margin-bottom: var(--spacing-8);
}
.services-title {
font-size: var(--text-xl);
}
.services-title::after {
width: 60px;
bottom: -8px;
}
.service-content {
padding: 0 var(--spacing-4) var(--spacing-4);
}
.service-title {
font-size: var(--text-lg);
}
.featured-service {
border-radius: var(--radius-xl);
}
.featured-service-content {
padding: var(--spacing-6);
}
.featured-service-title {
font-size: var(--text-xl);
margin-bottom: var(--spacing-3);
}
.featured-service-text {
margin-bottom: var(--spacing-4);
}
.featured-service-features {
gap: var(--spacing-3);
margin-bottom: var(--spacing-4);
}
.featured-service-btn {
padding: var(--spacing-2) var(--spacing-4);
font-size: var(--text-sm);
}
}.products-section {
position: relative;
padding: 120px 0;
background: var(--dark-800);
overflow: hidden;
}
.products-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 3;
}
.products-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%232d5cf6' fill-opacity='0.05'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 20v-1.41l2.83-2.83 1.41 1.41L1.41 20H0zm20 0v-1.41l2.83-2.83 1.41 1.41L21.41 20H20zM0 0v1.41l2.83 2.83-1.41 1.41L0 2.83V0h1.41l2.83 2.83-1.41 1.41L0 2.83V0h20v1.41l2.83 2.83-1.41 1.41L20 2.83V0h1.41l2.83 2.83-1.41 1.41L20 2.83V0H0z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.3;
z-index: 1;
}
.products-header {
text-align: center;
max-width: 700px;
margin: 0 auto 60px;
}
.products-subtitle {
font-size: 1.1rem;
font-weight: 500;
color: var(--primary);
margin-bottom: 15px;
display: inline-block;
letter-spacing: 1px;
}
.products-title {
font-size: 2.8rem;
font-weight: 700;
color: var(--white);
margin-bottom: 25px;
line-height: 1.2;
}
.products-title span {
color: var(--primary);
}
.products-description {
color: var(--gray-300);
font-size: 1.05rem;
line-height: 1.8;
} .product-categories {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
}
.product-category {
padding: 10px 20px;
border-radius: 30px;
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-8);
max-width: var(--container-xl);
margin: 0 auto;
padding: 0 var(--spacing-4);
}
@media (max-width: 768px) {
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-6);
}
} .product-card {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background-color: var(--white);
box-shadow: var(--shadow-lg);
transition: all 0.4s var(--transition-type);
transform: translateY(0);
height: 100%;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
} .product-image-container {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
background: var(--primary-50);
}
.product-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--transition-type);
}
.product-card:hover .product-image {
transform: scale(1.08);
} .product-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s var(--transition-type);
}
.product-card:hover .product-image-overlay {
opacity: 1;
}
.product-quick-actions {
position: absolute;
top: var(--spacing-4);
right: var(--spacing-4);
display: flex;
flex-direction: column;
gap: var(--spacing-2);
opacity: 0;
transform: translateX(20px);
transition: all 0.4s var(--transition-type);
}
.product-card:hover .product-quick-actions {
opacity: 1;
transform: translateX(0);
}
.product-action-btn {
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
color: var(--primary-700);
font-size: var(--text-xl);
transition: all 0.3s var(--transition-type);
box-shadow: var(--shadow-md);
}
.product-action-btn:hover {
background: var(--white);
color: var(--primary-600);
transform: scale(1.05);
} .product-badge {
position: absolute;
top: var(--spacing-4);
left: var(--spacing-4);
background: var(--primary-gradient);
color: white;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
padding: var(--spacing-1) var(--spacing-3);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
z-index: 2;
}
.product-badge.sale {
background: var(--danger-color);
}
.product-badge.new {
background: var(--primary-gradient);
}
.product-badge.featured {
background: var(--secondary-gradient);
}
.product-content {
padding: 20px;
}
.product-category-link {
font-size: 0.8rem;
color: var(--gray-400);
margin-bottom: 8px;
display: block;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s;
}
.product-card:hover .product-category-link {
color: var(--primary);
}
.product-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--white);
margin-bottom: 10px;
transition: color 0.3s;
line-height: 1.4;
}
.product-card:hover .product-title {
color: var(--primary);
}
.product-price {
display: flex;
align-items: center;
gap: 10px;
}
.product-current-price {
font-size: 1.2rem;
font-weight: 700;
color: var(--white);
}
.product-old-price {
font-size: 0.9rem;
color: var(--gray-500);
text-decoration: line-through;
}
.product-rating {
display: flex;
align-items: center;
gap: 5px;
margin-top: 10px;
}
.product-stars {
display: flex;
gap: 2px;
color: var(--warning);
font-size: 0.9rem;
}
.product-rating-count {
font-size: 0.85rem;
color: var(--gray-500);
} .load-more-container {
margin-top: 50px;
text-align: center;
}
.load-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 30px;
background: transparent;
color: var(--white);
border: 2px solid var(--primary);
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-btn:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-5px);
}
.load-more-btn i {
font-size: 1.1rem;
transition: transform 0.3s ease;
}
.load-more-btn:hover i {
transform: translateX(5px);
} .featured-products-section {
margin-top: 100px;
padding: 40px;
background: var(--dark);
border-radius: 30px;
border: 1px solid var(--glass-border);
position: relative;
overflow: hidden;
}
.featured-products-section::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(45, 92, 246, 0.1) 0%, transparent 70%);
top: -250px;
right: -250px;
border-radius: 50%;
z-index: 1;
}
.featured-products-section::after {
content: '';
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 64, 129, 0.08) 0%, transparent 70%);
bottom: -200px;
left: -200px;
border-radius: 50%;
z-index: 1;
}
.featured-products-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.featured-title {
font-size: 2rem;
font-weight: 700;
color: var(--white);
}
.featured-title span {
color: var(--primary);
}
.carousel-navigation {
display: flex;
gap: 15px;
}
.carousel-button {
width: 45px;
height: 45px;
border-radius: 50%;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-button:hover {
background: var(--primary);
border-color: var(--primary);
transform: translateY(-3px);
}
.carousel-button i {
font-size: 1.1rem;
}
.products-carousel {
position: relative;
z-index: 2;
} body.rtl .product-badge {
left: auto;
right: 15px;
}
body.rtl .product-actions {
right: auto;
left: 15px;
transform: translateX(-60px);
}
body.rtl .product-card:hover .product-actions {
transform: translateX(0);
}
body.rtl .load-more-btn i {
transform: scaleX(-1);
}
body.rtl .load-more-btn:hover i {
transform: translateX(-5px) scaleX(-1);
}
@keyframes float {
0% {
transform: translateY(0) scale(1);
}
100% {
transform: translateY(30px) scale(1.1);
}
} @media (max-width: 1200px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.products-section {
padding: 80px 0;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.products-title {
font-size: 2.4rem;
}
.featured-title {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.products-title {
font-size: 2rem;
}
.featured-products-section {
padding: 30px;
}
.featured-products-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.carousel-navigation {
align-self: flex-end;
}
}
@media (max-width: 576px) {
.products-section {
padding: 60px 0;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.products-title {
font-size: 1.8rem;
}
.product-category {
padding: 8px 15px;
font-size: 0.85rem;
}
.featured-title {
font-size: 1.5rem;
}
}.footer {
position: relative;
background: var(--dark);
overflow: hidden;
} .footer-top {
padding: 100px 0 70px;
position: relative;
z-index: 5;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.footer-container {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
position: relative;
}
.footer-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 40px;
}
.footer-col {
position: relative;
}
.footer-logo {
display: inline-block;
margin-bottom: 25px;
}
.footer-logo img {
height: 40px;
width: auto;
}
.footer-about-text {
color: var(--gray-300);
margin-bottom: 30px;
font-size: 0.95rem;
line-height: 1.8;
max-width: 400px;
}
.footer-social {
display: flex;
gap: 15px;
}
.footer-social-link {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50%;
color: var(--white);
font-size: 1rem;
transition: all 0.3s ease;
}
.footer-social-link:hover {
background: var(--primary);
border-color: var(--primary);
transform: translateY(-5px);
}
.footer-title {
font-size: 1.4rem;
font-weight: 600;
color: var(--white);
margin-bottom: 25px;
position: relative;
padding-bottom: 15px;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background: var(--primary);
border-radius: 10px;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
color: var(--gray-300);
text-decoration: none;
font-size: 0.95rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.footer-links a:hover {
color: var(--primary);
transform: translateX(5px);
}
.footer-links a i {
font-size: 0.85rem;
color: var(--primary);
}
.footer-contact-item {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.footer-contact-icon {
width: 40px;
height: 40px;
min-width: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50%;
color: var(--primary);
font-size: 1.1rem;
}
.footer-contact-content {
color: var(--gray-300);
font-size: 0.95rem;
line-height: 1.6;
}
.footer-contact-content a {
color: var(--gray-300);
text-decoration: none;
transition: color 0.3s;
}
.footer-contact-content a:hover {
color: var(--primary);
}
.footer-newsletter {
margin-top: 25px;
}
.footer-newsletter p {
color: var(--gray-300);
font-size: 0.95rem;
margin-bottom: 15px;
line-height: 1.7;
}
.newsletter-form {
position: relative;
}
.newsletter-input {
width: 100%;
padding: 15px 20px;
padding-right: 50px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: var(--white);
font-size: 0.95rem;
transition: all 0.3s ease;
}
.newsletter-input:focus {
border-color: var(--primary);
outline: none;
box-shadow: 0 0 0 3px rgba(45, 92, 246, 0.2);
}
.newsletter-button {
position: absolute;
top: 5px;
right: 5px;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--primary);
color: var(--white);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-button:hover {
background: var(--primary-dark);
} .footer-bottom {
padding: 25px 0;
position: relative;
z-index: 5;
}
.footer-bottom-flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copyright {
color: var(--gray-400);
font-size: 0.9rem;
}
.footer-copyright a {
color: var(--primary);
text-decoration: none;
}
.footer-copyright a:hover {
text-decoration: underline;
}
.footer-bottom-links {
display: flex;
gap: 20px;
}
.footer-bottom-links a {
color: var(--gray-400);
font-size: 0.9rem;
text-decoration: none;
transition: color 0.3s;
}
.footer-bottom-links a:hover {
color: var(--primary);
} .back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 99;
box-shadow: 0 10px 20px rgba(45, 92, 246, 0.3);
}
.back-to-top.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--primary-dark);
transform: translateY(-5px);
} .footer-products {
margin-top: 40px;
}
.footer-products-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--white);
margin-bottom: 20px;
}
.footer-products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.footer-product {
display: flex;
align-items: center;
gap: 12px;
padding: 10px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 10px;
transition: all 0.3s ease;
}
.footer-product:hover {
border-color: var(--primary);
transform: translateY(-3px);
}
.footer-product-image {
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
}
.footer-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.footer-product-content {
flex: 1;
}
.footer-product-title {
font-size: 0.9rem;
font-weight: 500;
color: var(--white);
margin-bottom: 5px;
transition: color 0.3s;
}
.footer-product:hover .footer-product-title {
color: var(--primary);
}
.footer-product-price {
font-size: 0.85rem;
color: var(--primary);
font-weight: 600;
} body.rtl .footer-title::after {
left: auto;
right: 0;
}
body.rtl .footer-links a:hover {
transform: translateX(-5px);
}
body.rtl .footer-contact-item {
flex-direction: row-reverse;
}
body.rtl .newsletter-input {
padding-right: 20px;
padding-left: 50px;
}
body.rtl .newsletter-button {
right: auto;
left: 5px;
}
body.rtl .back-to-top {
right: auto;
left: 30px;
} .footer-product-add-to-cart {
margin-top: 8px;
}
.footer-product-add-to-cart .button {
font-size: 0.8rem !important;
padding: 8px 12px !important;
background: var(--primary) !important;
color: white !important;
border: none !important;
border-radius: 6px !important;
font-weight: 500 !important;
cursor: pointer !important;
display: inline-block !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
line-height: 1 !important;
}
.footer-product-add-to-cart .button:hover {
background: var(--primary-dark) !important;
} .footer-product.product-error-fallback {
opacity: 0.6;
cursor: not-allowed;
}
.footer-product.product-error-fallback::after {
content: "Product unavailable";
position: absolute;
bottom: 5px;
right: 10px;
font-size: 0.7rem;
color: var(--gray-500);
} @media (max-width: 1200px) {
.footer-row {
grid-template-columns: 2fr 1fr 1fr 1.2fr;
gap: 30px;
}
}
@media (max-width: 992px) {
.footer-row {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-col:first-child {
grid-column: span 2;
}
.footer-about-text {
max-width: 100%;
}
}
@media (max-width: 768px) {
.footer-top {
padding: 70px 0 40px;
}
.footer-bottom-flex {
flex-direction: column;
gap: 15px;
text-align: center;
}
.footer-products-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.footer-row {
grid-template-columns: 1fr;
gap: 40px;
}
.footer-col:first-child {
grid-column: span 1;
}
.footer-title {
font-size: 1.3rem;
}
}.shop-product-card {
position: relative;
}
.shop-product-link-full {
position: absolute;
inset: 0;
z-index: 10;
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
background: transparent;
cursor: pointer;
}
.shop-product-card * {
position: relative;
z-index: 20;
}
.single-product-modern-page {
background: #010100;
color: #e3eaf2;
min-height: 100vh;
padding-bottom: 40px;
}
.single-product-hero {
background: #010100;
border-radius: 22px;
box-shadow: 0 6px 36px rgba(0,0,0,0.18);
margin: 40px 0 0 0;
padding: 38px 0 32px 0;
}
.single-product-flex {
display: flex;
gap: 42px;
flex-wrap: wrap;
}
.single-product-gallery {
flex: 1 1 350px;
max-width: 420px;
background: #1B1C17;
border-radius: 16px;
padding: 18px 12px;
box-shadow: 0 2px 18px rgba(0,0,0,0.13);
}
.single-product-gallery img {
border-radius: 12px;
width: 100%;
object-fit: cover;
background: #010100;
}
.swiper-pagination-bullet { background: #A9B187; }
.swiper-button-next, .swiper-button-prev { color: #fff; }
.single-product-summary {
flex: 2 1 400px;
background: #28291F;
border-radius: 18px;
padding: 36px 32px 30px 32px;
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
display: flex;
flex-direction: column;
gap: 16px;
}
.woocommerce-breadcrumb {
color: #b6c5d8;
font-size: 0.97rem;
margin-bottom: 16px;
}
.product_title.entry-title {
color: #fff;
font-size: 2.1rem;
font-weight: bold;
margin-bottom: 12px;
}
.single-product-short-desc {
color: #e3eaf2;
font-size: 1.13rem;
margin-bottom: 18px;
}
.single-product-price {
color: #A9B187;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 18px;
}
.single-product-meta { color: #a4b4c6; font-size: 1rem; margin-bottom: 18px; }
.single-product-cart {
margin-top: 18px;
}
.single-product-cart .single_add_to_cart_button,
.single-product-cart button[type=submit] {
background: linear-gradient(90deg,#A9B187 60%,#8A916D 100%);
color: #222;
font-size: 1.2rem;
font-weight: bold;
border: none;
border-radius: 10px;
padding: 18px 0;
width: 100%;
box-shadow: 0 2px 16px rgba(169,177,135,0.08);
transition: background 0.2s, color 0.2s;
}
.single-product-cart .single_add_to_cart_button:hover,
.single-product-cart button[type=submit]:hover {
background: #8A916D;
color: #0a1622;
}
.single-product-tabs-section {
background: #010100;
border-radius: 16px;
margin: 36px 0 0 0;
padding: 28px 0 18px 0;
}
.woocommerce-Tabs-panel {
color: #e3eaf2;
background: none;
padding: 18px 0 0 0;
}
.woocommerce-tabs .tabs li a {
color: #fff;
background: #28291F;
border-radius: 8px 8px 0 0;
padding: 10px 26px;
font-size: 1.08rem;
}
.woocommerce-tabs .tabs li.active a {
background: #A9B187;
color: #222;
}
.single-product-related-section {
background: #010100;
border-radius: 16px;
margin: 36px 0 0 0;
padding: 28px 0 18px 0;
}
.single-product-related-section .related {
color: #fff;
}
@media (max-width: 900px) {
.single-product-flex { flex-direction: column; gap: 24px; }
.single-product-summary { padding: 24px 12px; }
}
@media (max-width: 600px) {
.single-product-hero, .single-product-tabs-section, .single-product-related-section {
padding: 10px 0 8px 0;
margin: 16px 0 0 0;
}
.single-product-summary { padding: 10px 5px; }
}
.shop-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
background: #010100;
padding: 30px 0;
} .shop-products-grid,
.shop-product-card,
.shop-product-inner,
.shop-product-thumb,
.shop-product-fav,
.shop-product-details {
background: linear-gradient(135deg, #181f2a 60%, #0a1622 100%) !important;
color: #fff !important;
}
.shop-product-card {
background: linear-gradient(135deg, #1a2233 60%, #232b36 100%) !important;
border: 2.5px solid #A9B187 !important;
box-shadow: 0 12px 48px 0 rgba(169,177,135,0.16), 0 2px 12px rgba(255,255,255,0.08) inset !important;
border-radius: 24px;
overflow: hidden;
transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
min-width: 0;
list-style: none;
filter: brightness(1.07) contrast(1.12);
}
.shop-product-card:hover {
transform: translateY(-12px) scale(1.05) rotate(-0.5deg);
box-shadow: 0 24px 64px 0 rgba(169,177,135,0.28), 0 2px 12px rgba(255,255,255,0.12) inset !important;
border-color: #8A916D !important;
}
.shop-product-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 32px 22px 20px 22px;
gap: 0;
}
.shop-product-thumb {
background: linear-gradient(120deg,#232b36 70%,#1a2330 100%) !important;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 18px;
margin-bottom: 18px;
box-shadow: 0 4px 24px rgba(169,177,135,0.18);
min-width: 0;
min-height: 0;
width: 100%;
height: 220px;
max-height: 220px;
}
.shop-product-thumb img {
width: 100%;
height: 100%;
max-width: 200px;
max-height: 200px;
min-width: 140px;
min-height: 140px;
object-fit: cover;
border-radius: 18px;
background: #181f2a !important;
transition: filter 0.22s, box-shadow 0.22s;
box-shadow: 0 2px 18px rgba(169,177,135,0.16);
}
.shop-product-fav {
background: linear-gradient(120deg,#A9B187 60%,#8A916D 100%) !important;
border-radius: 50%;
padding: 7px;
color: #fff;
font-size: 1.22em;
position: absolute;
top: 18px;
right: 18px;
z-index: 2;
cursor: pointer;
box-shadow: 0 2px 10px rgba(169,177,135,0.18);
border: 2px solid #fff2;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.shop-product-fav:hover {
background: #010100 !important;
color: #181f2a !important;
box-shadow: 0 4px 18px rgba(1,1,0,0.22);
}
.shop-product-details {
padding: 24px 20px 18px 20px;
background: linear-gradient(120deg,#151f2a 80%,#1a2330 100%) !important;
border-radius: 0 0 24px 24px;
color: #fff !important;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 120px;
box-shadow: 0 2px 12px rgba(169,177,135,0.10);
}
.shop-product-title {
font-size: 1.36rem;
color: #fff !important;
margin: 0 0 14px 0;
font-weight: 900;
letter-spacing: 0.01em;
line-height: 1.2;
text-shadow: 0 2px 12px rgba(169,177,135,0.17);
}
.shop-product-title a {
color: inherit;
text-decoration: none;
transition: color 0.18s;
}
.shop-product-title a:hover {
color: #A9B187 !important;
}
.shop-product-price {
color: #A9B187;
font-size: 1.22rem;
font-weight: 800;
margin-bottom: 22px;
text-shadow: 0 2px 8px rgba(169,177,135,0.32);
}
.shop-product-cart-btn {
margin-top: 10px;
display: flex;
justify-content: center;
}
.shop-product-cart-btn .button, .shop-product-cart-btn .add_to_cart_button {
background: linear-gradient(90deg,#A9B187 60%,#8A916D 100%);
color: #fff;
font-size: 1.13rem;
font-weight: bold;
border: none;
border-radius: 16px;
padding: 16px 0;
width: 100%;
box-shadow: 0 4px 24px rgba(169,177,135,0.22);
transition: background 0.22s, color 0.18s, transform 0.18s, box-shadow 0.18s;
letter-spacing: 0.02em;
cursor: pointer;
outline: none;
position: relative;
text-shadow: 0 2px 8px rgba(255,255,255,0.8);
}
.shop-product-cart-btn .button:hover, .shop-product-cart-btn .add_to_cart_button:hover {
background: linear-gradient(90deg,#8A916D 60%,#A9B187 100%);
color: #222;
transform: scale(1.04);
box-shadow: 0 8px 32px rgba(169,177,135,0.25);
}
.shop-product-details-btn {
display: block;
width: 100%;
margin-top: 14px;
background: linear-gradient(90deg,#A9B187 60%,#8A916D 100%);
color: #222;
font-weight: 800;
font-size: 1.13rem;
border: none;
border-radius: 14px;
padding: 13px 0;
text-align: center;
box-shadow: 0 2px 10px rgba(34,197,94,0.11);
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
letter-spacing: 0.01em;
cursor: pointer;
outline: none;
position: relative;
text-shadow: 0 2px 8px rgba(255,184,0,0.09);
}
.shop-product-details-btn:hover {
background: linear-gradient(90deg,#A9B187 60%,#8A916D 100%);
color: #fff;
box-shadow: 0 4px 18px rgba(1,1,0,0.22);
}
.onsale {
position: absolute;
background: linear-gradient(90deg,#8A916D 60%,#A9B187 100%);
color: #fff;
font-weight: bold;
font-size: 1.0rem;
border-radius: 10px 0 10px 0;
padding: 8px 16px;
top: 24px;
left: 24px;
box-shadow: 0 2px 16px rgba(255,60,110,0.22);
} .shop-product-rating { display: none !important; }  @media (max-width: 991px) {
.shop-products-grid { grid-template-columns: repeat(2, 1fr); }
.shop-product-card { border-radius: 16px; }
.shop-product-details { border-radius: 0 0 16px 16px; }
}
@media (max-width: 600px) {
.shop-products-grid { grid-template-columns: 1fr; }
.shop-product-card { border-radius: 12px; }
.shop-product-details { border-radius: 0 0 12px 12px; padding: 12px 4px 8px 4px; }
}
.shop-products-grid {
display: grid;
grid-template-columns: repeat(4, minmax(260px, 1fr));
gap: 44px;
margin: 0 auto;
max-width: 1440px;
background: none;
}
@media (max-width: 1200px) {
.shop-products-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 24px; }
}
@media (max-width: 900px) {
.shop-products-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 16px; }
}
@media (max-width: 600px) {
.shop-products-grid { grid-template-columns: 1fr; gap: 10px; }
}
.shop-product-card,
.shop-product-card-dark,
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .shop-product-card,
.woocommerce ul.products li.product .shop-product-card-dark {
background: linear-gradient(135deg, #28291F 70%, #010100 100%) !important;
color: #fff !important;
border-radius: 18px !important;
border: 2.5px solid #A9B187 !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.32), 0 2px 12px rgba(255,255,255,0.05) inset !important;
min-height: 410px;
max-width: 340px;
width: 100%;
overflow: hidden;
position: relative;
transition: box-shadow 0.22s, border 0.18s, transform 0.22s;
min-width: 0;
z-index: 1;
}
.shop-product-thumb {
background: #010100 !important;
aspect-ratio: 1/1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 12px;
margin-bottom: 18px;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
min-width: 0;
min-height: 0;
width: 100%;
height: 220px;
max-height: 220px;
}
.shop-product-thumb img {
width: 100%;
height: 100%;
max-width: 200px;
max-height: 200px;
min-width: 140px;
min-height: 140px;
object-fit: cover;
border-radius: 12px;
background: #28291F !important;
transition: filter 0.2s, box-shadow 0.2s;
}
.shop-product-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: 38px 24px 24px 24px;
gap: 0;
}
.shop-product-title {
font-size: 1.32rem;
color: #fff;
margin: 0 0 14px 0;
font-weight: 800;
letter-spacing: 0.01em;
text-shadow: 0 2px 12px rgba(0,0,0,0.32);
line-height: 1.2;
}
.shop-product-title a {
color: inherit;
text-decoration: none;
transition: color 0.18s;
}
.shop-product-title a:hover {
color: #A9B187;
}
.shop-product-price {
color: #A9B187;
font-size: 1.22rem;
font-weight: 700;
margin-bottom: 22px;
text-shadow: 0 2px 8px rgba(0,0,0,0.32);
}
.shop-product-cart-btn {
margin-top: 10px;
display: flex;
justify-content: center;
}
.shop-product-cart-btn .button, .shop-product-cart-btn .add_to_cart_button {
background: linear-gradient(90deg,#A9B187 60%,#8A916D 100%);
color: #222;
font-size: 1.13rem;
font-weight: bold;
border: none;
border-radius: 14px;
padding: 16px 0;
width: 100%;
box-shadow: 0 4px 24px rgba(169,177,135,0.33);
transition: background 0.22s, color 0.18s, transform 0.18s, box-shadow 0.18s;
letter-spacing: 0.02em;
cursor: pointer;
outline: none;
position: relative;
text-shadow: 0 2px 8px rgba(255,255,255,0.8);
}
.shop-product-cart-btn .button:hover, .shop-product-cart-btn .add_to_cart_button:hover {
background: #8A916D;
color: #181f2a;
transform: scale(1.04);
box-shadow: 0 8px 32px rgba(169,177,135,0.55);
}
.shop-product-details-btn {
display: block;
width: 100%;
margin-top: 14px;
background: linear-gradient(90deg,#A9B187 60%,#8A916D 100%);
color: #fff;
font-weight: 700;
font-size: 1.08rem;
border: none;
border-radius: 12px;
padding: 13px 0;
text-align: center;
box-shadow: 0 2px 10px rgba(169,177,135,0.55);
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
letter-spacing: 0.01em;
cursor: pointer;
}
.shop-product-details-btn:hover {
background: linear-gradient(90deg,#28291F 60%,#A9B187 100%);
color: #fff;
box-shadow: 0 4px 18px rgba(169,177,135,0.99);
}
.onsale {
position: absolute;
background: linear-gradient(90deg,#28291F 60%,#A9B187 100%);
color: #fff;
font-weight: bold;
font-size: 1.0rem;
border-radius: 10px 0 10px 0;
padding: 8px 16px;
top: 24px;
left: 24px;
box-shadow: 0 2px 16px rgba(255,60,110,0.55);
} .woocommerce ul.products,
.woocommerce .products,
.woocommerce-page ul.products,
.woocommerce-page .products {
background: none !important;
}
.woocommerce .site-main,
.woocommerce-page .site-main,
.woocommerce .content-area,
.woocommerce-page .content-area,
.woocommerce .container,
.woocommerce-page .container,
.woocommerce .site,
.woocommerce-page .site {
background: none !important;
} @media (max-width: 900px) {
.shop-product-details { padding: 18px 8px 14px 8px; }
}
@media (max-width: 600px) {
.shop-product-card { border-radius: 14px; }
.shop-product-details { padding: 10px 4px 8px 4px; }
}  :root {
--navbar-bg: #010100;
--navbar-text: #A9B187;
--navbar-active: #A9B187;
--navbar-height: 80px;
--global-palette1: #A9B187;
--global-palette3: #010100;
--global-palette1-hover: #8a9369;
--global-palette3-hover: #000000;
--global-palette1-light: #c5d0a3;
--global-palette1-dark: #8a9369;
--global-palette3-light: #1a1a1a;
--global-palette3-dark: #000000;
--global-text-light: #ffffff;
--global-text-dark: #010100;
--global-bg-light: #f5f5f5;
--global-bg-dark: #010100;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
body {
font-family: 'Cairo', Arial, Tahoma, sans-serif !important;
font-family: 'Sora', Arial, sans-serif;
background: var(--global-bg-dark);
color: var(--global-text-light);
margin: 0;
padding: 0;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: 
radial-gradient(circle at 20% 20%, rgba(169, 177, 135, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(169, 177, 135, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: -1;
}
body.woocommerce-shop, .woocommerce-page {
font-family: 'Montserrat', 'Cairo', Arial, Tahoma, sans-serif !important;
}
.topbar {
background: var(--global-palette3) !important;
border-top: 4px solid var(--global-palette1) !important;
box-shadow: 0 2px 16px rgba(169, 177, 135, 0.1);
color: #ffffff !important;
height: var(--navbar-height);
width: 100%;
z-index: 1000;
transition: all 0.3s ease;
padding: 0;
}
.topbar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, 
rgba(169, 177, 135, 0.1) 0%, 
rgba(169, 177, 135, 0.05) 50%,
rgba(169, 177, 135, 0.1) 100%);
pointer-events: none;
}
.topbar-flex {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
height: 54px;
}
.logo a, .logo {
color: var(--global-palette1) !important;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: 0.18em;
text-decoration: none;
padding-left: 14px;
transition: color 0.3s ease;
}
.logo a:hover, .logo:hover {
color: var(--global-palette1);
}
.main-nav {
flex: 1;
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 32px;
}
.main-nav ul {
display: flex;
gap: 18px;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav ul li {
position: relative;
}
.main-nav ul li a {
color: var(--global-palette1) !important;
font-size: 1rem;
text-decoration: none;
font-weight: 500;
padding: 0 2px;
transition: all 0.3s ease;
position: relative;
}
.main-nav ul li a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--global-palette1);
transition: width 0.3s ease;
}
.main-nav ul li a:hover {
color: var(--global-palette1);
}
.main-nav ul li a:hover::after {
width: 100%;
}
.header-right {
display: flex;
align-items: center;
gap: 18px;
font-size: 1rem;
padding-right: 18px;
}
.contact {
color: var(--global-text-light);
opacity: 0.85;
transition: all 0.3s ease;
}
.contact:hover {
opacity: 1;
color: var(--global-palette1);
}
.contact b {
color: var(--global-palette3);
font-weight: 600;
margin-left: 4px;
}
.login-btn {
color: var(--global-text-light);
font-weight: 600;
text-decoration: none;
padding: 8px 16px;
transition: all 0.3s ease;
border: 1px solid var(--global-palette1);
border-radius: 4px;
}
.login-btn:hover {
background: var(--global-palette1);
color: var(--global-text-dark);
}
.cart-icon {
display: flex;
align-items: center;
margin-left: 6px;
border: 1.2px solid var(--global-palette1);
border-radius: 6px;
padding: 2px 6px 2px 6px;
height: 28px;
transition: all 0.3s ease;
background: rgba(169, 177, 135, 0.1);
}
.cart-icon:hover {
background: var(--global-palette1);
border-color: var(--global-palette1);
}
.cart-icon:hover svg {
fill: var(--global-text-dark);
}
@media (max-width: 900px) {
.topbar {
background: rgba(1, 1, 0, 0.98);
}
.main-nav ul li a {
color: var(--global-text-light);
}
.main-nav ul li a:hover {
color: var(--global-palette1);
}
}
.hero-custom {
background: var(--global-palette3);
padding: 0;
min-height: 450px;
border-top: 2px solid var(--global-palette1);
position: relative;
overflow: hidden;
}
.hero-custom::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(169, 177, 135, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.hero-flex.why-choose-flex {
display: flex;
flex-direction: column;
width: 100%;
padding: 40px 0;
}
.why-choose-img {
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
margin-bottom: 30px;
} .why-choose-content {
width: 100%;
padding: 30px;
background: var(--global-palette3);
color: #fff;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 10px;
}
.why-choose-content .section-title,
.why-choose-content .section-sub,
.why-choose-features {
text-shadow: 0 2px 16px rgba(0,0,0,0.22);
}
@media (max-width: 900px) {
.why-choose-flex {
display: flex;
flex-direction: column;
}
.why-choose-img {
margin-bottom: 20px;
}
.why-choose-content {
padding: 20px;
}
}
.hero-flex-custom {
display: flex;
align-items: stretch;
min-height: 448px;
}
.hero-img-cust.contact-flex {
display: flex;
gap: 36px;
align-items: stretch;
justify-content: space-between;
}
.contact-form-area {
flex: 1 1 20%;
background: transparent;
padding: 0 0 0 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-img {
flex: 1 1 80%;
display: flex;
align-items: center;
justify-content: center;
}
.contact-img img {
width: 100%;
height: 520px;
min-height: 420px;
object-fit: cover;
border-radius: 0;
border: none;
box-shadow: 0 4px 18px rgba(0,0,0,0.10);
max-height: 600px;
}
@media (max-width: 900px) {
.contact-flex {
flex-direction: column;
gap: 24px;
}
.contact-img, .contact-form-area {
flex: unset;
width: 100%;
max-width: 100%;
}
.contact-img img {
height: 220px;
min-height: 140px;
max-height: 300px;
}
}
.hero-img-custom {
flex: 1.2;
display: flex;
align-items: stretch;
justify-content: flex-start;
background: #fff;
min-width: 0;
}
.hero-img.why-choose-img {
flex: 1.9;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: #fff;
min-width: 0;
}
.why-choose-img img {
width: 100%;
height: 100%;
object-fit: cover;
border: none;
border-radius: 0;
min-height: 480px;
max-height: none;
display: block;
}
.hero-img-custom img {
width: 100%;
height: 100%;
object-fit: cover;
border: none;
border-radius: 0;
}
.hero-content-custom {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 44px 0 44px 40px;
position: relative;
background: transparent;
}
.collection-custom {
color: var(--global-text-light);
opacity: 0.9;
font-size: 1rem;
margin-bottom: 24px;
margin-left: 6px;
}
.hero-title-custom {
font-size: 4.5rem;
font-weight: 700;
color: var(--global-text-light);
margin: 0 0 28px 0;
line-height: 1.05;
}
.hero-small-img-custom {
position: absolute;
right: 30px;
top: 60%;
transform: translateY(-50%);
z-index: 2;
box-shadow: 0 6px 32px rgba(0,0,0,0.20);
}
.hero-small-img-custom img {
width: 270px;
height: 270px;
object-fit: cover;
border-radius: 0;
border: none;
}
.explore-btn-custom {
margin-top: 36px;
background: var(--global-palette1);
color: var(--global-text-dark);
padding: 16px 38px;
border: none;
border-radius: 2px;
font-size: 1.25rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
letter-spacing: 0.03em;
}
.explore-btn-custom:hover {
background: var(--global-palette1-hover);
}
@media (max-width: 900px) {
.hero-flex-custom {
flex-direction: column;
min-height: unset;
}
.hero-content-custom {
padding: 32px 10px;
align-items: flex-start;
}
.hero-small-img-custom {
position: static;
transform: none;
margin-top: 20px;
right: unset;
top: unset;
}
.hero-title-custom {
font-size: 2.2rem;
}
.explore-btn-custom {
padding: 12px 24px;
font-size: 1rem;
}
.hero-img-custom img, .hero-img-custom {
height: 220px;
min-height: 0;
}
}
.hero-flex {
display: flex;
gap: 40px;
align-items: center;
justify-content: flex-start;
}
.hero-img img {
width: 400px;
max-width: 100%;
border-radius: 5px;
font-size: 1rem;
background: #010100;
padding: 60px 0 60px 0;
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 20px;
}
.types-of-marble-section .section-title {
grid-column: 1 / 4;
color: #fff;
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 42px;
letter-spacing: 0.01em;
text-align: center;
}
.unique-items-section {
padding: 80px 0;
background: linear-gradient(135deg, #0a1622 60%, #050a12 100%);
position: relative;
overflow: hidden;
}
.unique-items-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(169, 177, 135, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.unique-items-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.unique-items-title {
font-size: 2.5rem;
font-weight: 800;
color: #A9B187;
text-align: center;
margin-bottom: 50px;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
position: relative;
}
.unique-items-title::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(90deg, #A9B187, #8A916D);
border-radius: 3px;
}
.unique-items-section .section-sub {
color: #fff;
opacity: 0.7;
font-size: 1.1rem;
margin-bottom: 8px;
}
.unique-items-section .section-sub {
color: #A9B187;
font-size: 1.1rem;
opacity: 0.85;
}
.unique-items-section .section-title {
font-size: 2.7rem;
margin: 10px 0 40px 0;
font-weight: bold;
} .unique-items-list {
-ms-overflow-style: none; scrollbar-width: none; }
.unique-items-list::-webkit-scrollbar {
display: none; } .unique-items-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 36px;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 12px;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.glass-box {
position: relative;
max-width: 800px;
margin: 0 auto;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: rgba(3, 10, 17, 0.75);
border: 1px solid rgba(77, 156, 255, 0.2);
border-radius: 20px;
padding: 30px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
inset 0 0 30px rgba(77, 156, 255, 0.08);
}
.glass-box::before,
.glass-box::after {
content: '';
position: absolute;
border-radius: 50%;
}
.glass-box::before {
top: -10px;
right: 30px;
width: 20px;
height: 20px;
background: rgba(77, 156, 255, 0.2);
filter: blur(5px);
}
.glass-box::after {
bottom: -5px;
left: 40px;
width: 15px;
height: 15px;
background: rgba(77, 156, 255, 0.15);
filter: blur(4px);
}
.glass-box-content {
font-size: 18px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.9);
position: relative;
}
.unique-item {
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
flex: 0 0 260px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 12px;
transition: none;
}
.unique-item img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 18px;
}
.unique-item h3 {
margin: 0 0 8px 0;
font-size: 1.2rem;
color: #fff;
}
.item-price {
color: var(--global-palette1);
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 12px;
display: block;
}
.add-to-cart {
background: var(--global-palette1);
color: var(--global-text-dark);
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: background 0.18s;
margin-top: 6px;
display: inline-block;
}
.add-to-cart:hover {
background: var(--global-palette1-hover);
}
@media (max-width: 900px) {
.unique-items-list {
gap: 18px;
}
.unique-item {
width: 46vw;
min-width: 160px;
max-width: 260px;
}
}
@media (max-width: 600px) {
.unique-items-list {
flex-direction: column;
gap: 14px;
}
.unique-item {
width: 100%;
max-width: 350px;
margin: 0 auto;
}
} .unique-items-section.second {
margin-top: 60px;
padding-top: 60px;
border-top: 1px solid rgba(169, 177, 135, 0.1);
}
.unique-items-section.second .section-sub {
color: #A9B187;
font-size: 1.1rem;
opacity: 0.85;
}
.unique-items-section.second .section-title {
font-size: 2.7rem;
margin: 10px 0 40px 0;
font-weight: bold;
}
.unique-items-section.second .unique-items-list {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 36px;
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 12px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.unique-items-section.second .unique-items-list::-webkit-scrollbar {
display: none;
}
.unique-items-section.second .unique-item {
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
flex: 0 0 260px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 12px;
transition: none;
}
.unique-items-section.second .unique-item img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 18px;
}
.unique-items-section.second .unique-item h3 {
margin: 0 0 8px 0;
font-size: 1.2rem;
color: #fff;
}
.unique-items-section.second .item-price {
color: var(--global-palette1);
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 12px;
display: block;
}
.unique-items-section.second .add-to-cart {
background: var(--global-palette1);
color: var(--global-text-dark);
padding: 8px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: background 0.18s;
margin-top: 6px;
display: inline-block;
}
.unique-items-section.second .add-to-cart:hover {
background: var(--global-palette1-hover);
}
@media (max-width: 900px) {
.unique-items-section.second .unique-items-list {
gap: 18px;
}
.unique-items-section.second .unique-item {
width: 46vw;
min-width: 160px;
max-width: 260px;
}
}
@media (max-width: 600px) {
.unique-items-section.second .unique-items-list {
flex-direction: column;
gap: 14px;
}
.unique-items-section.second .unique-item {
width: 100%;
max-width: 350px;
margin: 0 auto;
}
} .marble-section {
background: linear-gradient(135deg, #1a1a1a 60%, #0a0a0a 100%);
}
.marble-section .unique-items-title {
color: #A9B187;
} .granite-section {
background: linear-gradient(135deg, #0a0a0a 60%, #1a1a1a 100%);
}
.granite-section .unique-items-title {
color: #A9B187;
}
@media (max-width: 768px) {
.unique-items-section {
padding: 60px 0;
}
.unique-items-title {
font-size: 2rem;
margin-bottom: 40px;
}
.unique-items-grid {
gap: 20px;
}
.unique-item-card {
padding: 20px;
}
.unique-item-title {
font-size: 1.2rem;
}
.unique-item-price {
font-size: 1.1rem;
}
}
.types-of-marble-section .section-sub {
color: #A9B187;
font-size: 1.1rem;
opacity: 0.85;
}
.types-of-marble-section .section-title {
font-size: 2.4rem;
margin: 10px 0 40px 0;
font-weight: bold;
}
.marble-types-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 38px 0px;
justify-content: center;
align-items: start;
max-width: 1000px;
margin: 0 auto 30px auto;
padding: 0;
}
.marble-type {
width: 300px;
height: 300px;
aspect-ratio: 1 / 1;
}
.marble-type img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
@media (max-width: 900px) {
.marble-types-list {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
gap: 24px 14px;
}
}
@media (max-width: 600px) {
.marble-types-list {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 18px 0;
}
}
.marble-type {
background: #18293a;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(0,0,0,0.13);
padding: 18px 16px 18px 16px;
width: 220px;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
transition: transform 0.18s, box-shadow 0.18s;
}
.marble-type {
background: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
width: 300px;
height: 300px;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.marble-type img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 0 !important;
margin-bottom: 18px !important;
background: none !important;
box-shadow: none !important;
height: auto !important;
}
.marble-type h4 {
color: #fff !important;
background: #0c1a26;
padding: 70px 0 60px 0;
text-align: center;
}
.top-articles-section .section-title {
color: #fff;
font-size: 3.1rem;
font-weight: bold;
margin-bottom: 42px;
letter-spacing: 0;
text-align: center;
}
.top-articles-list {
display: flex;
gap: 32px;
overflow-x: auto;
margin-top: 0;
justify-content: flex-start;
scrollbar-width: thin;
scrollbar-color: #b2bfcf #0c1a26;
}
.top-articles-list::-webkit-scrollbar {
height: 10px;
}
.top-articles-list::-webkit-scrollbar-thumb {
background: #b2bfcf;
border-radius: 6px;
}
.top-articles-list::-webkit-scrollbar-track {
background: #0c1a26;
border-radius: 6px;
}
.top-articles-item {
background: rgba(20,32,45,0.7);
border-radius: 8px;
min-width: 290px;
max-width: 340px;
flex: 1 0 290px;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 4px 18px rgba(0,0,0,0.07);
padding: 0 18px 18px 18px;
transition: box-shadow 0.18s;
}
.top-articles-item img {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
}
.top-articles-meta {
color: #b2bfcf;
font-size: 0.95rem;
margin-bottom: 7px;
text-align: left;
}
.top-articles-title {
color: #fff;
font-size: 1.13rem;
font-weight: 700;
margin: 0 0 7px 0;
text-align: left;
line-height: 1.2;
}
.top-articles-desc {
color: #b2bfcf;
font-size: 0.98rem;
margin-bottom: 0;
text-align: left;
line-height: 1.4;
}
@media (max-width: 900px) {
.top-articles-list {
gap: 14px;
}
.top-articles-item {
min-width: 220px;
max-width: 100vw;
padding: 0 8px 14px 8px;
}
.top-articles-item img {
height: 130px;
}
} .blog-section {
background: var(--global-palette3-light);
padding: 70px 0 60px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.blog-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(169, 177, 135, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.blog-section .section-sub {
color: var(--global-palette1);
font-size: 1.1rem;
opacity: 0.85;
}
.blog-section .section-title {
font-size: 2.4rem;
margin: 10px 0 40px 0;
font-weight: bold;
}
.blog-list {
display: flex;
gap: 30px;
justify-content: center;
margin-top: 24px;
flex-wrap: wrap;
}
.blog-item {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
transition: all 0.3s ease;
border-radius: 14px;
box-shadow: 0 4px 18px rgba(0,0,0,0.13);
padding: 0 0 22px 0;
width: 320px;
display: flex;
flex-direction: column;
align-items: center;
}
.blog-item:hover {
transform: translateY(-7px) scale(1.03);
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
border-color: var(--global-palette1);
}
.blog-item img {
width: 100%;
height: 170px;
object-fit: cover;
border-radius: 14px 14px 0 0;
}
.blog-meta {
color: var(--global-palette1);
font-size: 0.99rem;
margin: 16px 0 6px 0;
}
.blog-title {
color: var(--global-text-light);
font-size: 1.13rem;
font-weight: bold;
margin: 0 0 0 0;
padding: 0 14px;
}
@media (max-width: 900px) {
.blog-list {
gap: 14px;
}
.blog-item {
width: 90vw;
max-width: 350px;
}
} .contact-section {
background: var(--global-palette3);
padding: 70px 0 60px 0;
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(169, 177, 135, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.contact-flex {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
.contact-form-area {
flex: 1.2;
}
.contact-form-area .section-sub {
color: var(--global-palette1);
font-size: 1.1rem;
opacity: 0.85;
}
.contact-title {
font-size: 2.2rem;
font-weight: bold;
margin: 18px 0 32px 0;
color: var(--global-text-light);
}
.contact-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-form input, .contact-form textarea {
padding: 12px 14px;
border-radius: 6px;
border: none;
font-size: 1rem;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--global-text-light);
outline: none;
resize: none;
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
transition: all 0.3s ease;
}
.contact-form textarea {
min-height: 90px;
}
.contact-form input:focus, .contact-form textarea:focus {
border-color: var(--global-palette1);
box-shadow: 0 0 0 2px rgba(169, 177, 135, 0.2);
}
.btn-contact {
background: var(--global-palette1);
color: var(--global-text-dark);
padding: 12px 38px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
border: none;
cursor: pointer;
transition: background 0.2s;
display: inline-block;
}
.btn-contact:hover {
background: var(--global-palette1-hover);
}
.contact-img {
flex: 1;
display: flex;
justify-content: flex-end;
}
.contact-img img {
max-width: 600px;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
@media (max-width: 900px) {
.contact-flex {
flex-direction: column;
gap: 24px;
text-align: center;
}
.contact-img {
justify-content: center;
}
.contact-title {
font-size: 1.5rem;
}
} .shop-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 36px 28px;
margin-top: 32px;
}
.shop-product-card {
list-style: none;
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
transition: all 0.3s ease;
overflow: hidden;
position: relative;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.shop-product-card:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
border-color: var(--global-palette1);
z-index: 2;
}
.shop-product-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.shop-product-thumb {
width: 100%;
aspect-ratio: 1/1;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.shop-product-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.22s;
}
.shop-product-card:hover .shop-product-thumb img {
transform: scale(1.07) rotate(-1deg);
}
.woocommerce span.onsale {
background: var(--global-palette1);
color: var(--global-text-dark);
border-radius: 0 0 14px 0;
font-size: 0.92em;
padding: 7px 18px;
left: 0;
top: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.shop-product-details {
padding: 20px 18px 16px 18px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: #fff;
}
.shop-product-title {
font-size: 1.18rem;
font-weight: 700;
color: var(--global-text-light);
margin: 0 0 8px 0;
text-align: right;
}
.shop-product-title a {
color: var(--global-text-light);
text-decoration: none;
transition: color 0.18s;
}
.shop-product-title a:hover {
color: var(--global-palette1);
}
.shop-product-rating {
margin-bottom: 6px;
text-align: right;
}
.shop-product-price {
font-size: 1.07rem;
font-weight: 600;
color: var(--global-palette1);
margin-bottom: 10px;
text-align: right;
}
.shop-product-cart-btn {
margin-top: auto;
text-align: right;
}
.shop-product-cart-btn .button {
background: var(--global-palette1);
color: var(--global-text-dark);
border: none;
border-radius: 8px;
padding: 10px 24px;
font-size: 1rem;
font-weight: 700;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: background 0.18s, box-shadow 0.18s, color 0.18s;
}
.shop-product-cart-btn .button:hover {
background: var(--global-palette1-hover);
color: var(--global-text-dark);
box-shadow: 0 4px 18px rgba(0,0,0,0.16);
}
@media (max-width: 900px) {
.shop-products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px 8px;
}
.shop-product-details {
padding: 13px 8px 10px 8px;
}
.shop-product-title {
font-size: 1.02rem;
}
}
@media (max-width: 600px) {
.shop-products-grid {
grid-template-columns: 1fr;
gap: 12px 0;
}
}    .woocommerce ul.products, .wp-block-woocommerce-products {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
gap: 36px 28px;
margin-top: 32px;
padding: 0;
}
.woocommerce ul.products li.product, .wp-block-woocommerce-product {
background: var(--glass-bg);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
overflow: hidden;
transition: transform 0.18s, box-shadow 0.18s;
position: relative;
min-height: 420px;
display: flex;
flex-direction: column;
justify-content: flex-start;
list-style: none;
}
.woocommerce ul.products li.product:hover, .wp-block-woocommerce-product:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.3);
border-color: var(--global-palette1);
z-index: 2;
}
.woocommerce ul.products li.product img, .wp-block-woocommerce-product img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 0;
transition: transform 0.22s;
}
.woocommerce ul.products li.product:hover img, .wp-block-woocommerce-product:hover img {
transform: scale(1.07) rotate(-1deg);
}
.woocommerce span.onsale, .wp-block-woocommerce-product .onsale {
background: var(--global-palette1);
color: var(--global-text-dark);
border-radius: 0 0 14px 0;
font-size: 0.92em;
padding: 7px 18px;
left: 0;
top: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.14);
position: absolute;
z-index: 3;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title, .wp-block-woocommerce-product-title {
font-size: 1.18rem;
font-weight: 700;
color: var(--global-text-light);
margin: 0 0 8px 0;
text-align: right;
padding: 18px 18px 0 18px;
}
.woocommerce ul.products li.product .price, .wp-block-woocommerce-product-price {
font-size: 1.07rem;
font-weight: 600;
color: var(--global-palette1);
margin-bottom: 10px;
text-align: right;
padding: 0 18px;
}
.woocommerce ul.products li.product .star-rating, .wp-block-woocommerce-product-rating {
margin-bottom: 6px;
text-align: right;
padding: 0 18px;
}
.woocommerce ul.products li.product .button, .wp-block-woocommerce-product .wp-block-button__link, .add_to_cart_button {
background: var(--global-palette1);
color: var(--global-text-dark) !important;
border: none;
border-radius: 8px;
padding: 10px 24px;
font-size: 1rem;
font-weight: 700;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: background 0.18s, box-shadow 0.18s, color 0.18s;
margin: 18px;
display: inline-block;
}
.woocommerce ul.products li.product .button:hover, .wp-block-woocommerce-product .wp-block-button__link:hover, .add_to_cart_button:hover {
background: var(--global-palette1-hover);
color: var(--global-text-dark) !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.16);
}
@media (max-width: 900px) {
.woocommerce ul.products, .wp-block-woocommerce-products {
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px 8px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title, .wp-block-woocommerce-product-title {
font-size: 1.02rem;
padding: 10px 8px 0 8px;
}
.woocommerce ul.products li.product .price, .wp-block-woocommerce-product-price,
.woocommerce ul.products li.product .star-rating, .wp-block-woocommerce-product-rating {
padding: 0 8px;
}
.woocommerce ul.products li.product .button, .wp-block-woocommerce-product .wp-block-button__link, .add_to_cart_button {
margin: 12px 8px 12px 8px;
}
}
@media (max-width: 600px) {
.woocommerce ul.products, .wp-block-woocommerce-products {
grid-template-columns: 1fr !important;
gap: 12px 0;
}
}        .footer {
background: var(--global-palette3);
color: var(--global-text-light);
padding: 60px 0 30px 0;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(169, 177, 135, 0.05) 0%, transparent 70%);
pointer-events: none;
}
.footer-title {
color: var(--global-palette1);
}
.footer-links a {
color: var(--global-text-light);
}
.footer-links a:hover {
color: var(--global-palette1);
}
.footer-bottom {
background: var(--global-palette3-dark);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--global-palette1);
color: var(--global-text-light);
padding: 20px 0;
} @media (max-width: 900px) {
.topbar-flex {
background: #0a1c2d; padding: 10px 15px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.main-nav ul li a {
color: #ffffff;
padding: 12px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.main-nav ul li a:hover,
.main-nav ul li.current-menu-item a {
background-color: #0e2234;
color: #4d9cff;
} .mobile-logo-img {
max-height: 50px;
width: auto;
}
.mobile-menu-toggle {
color: #ffffff;
}
.mobile-menu {
background-color: #0a1c2d;
}
.main-nav ul li a:hover {
color: var(--global-palette1-dark);
}
} .login-modal-title {
color: #4d9cff;
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
text-shadow: 0 2px 4px rgba(77, 156, 255, 0.2);
font-family: 'Cairo', sans-serif;
} .author-name {
display: inline-block;
color: #4d9cff;
font-weight: 700;
font-size: 18px;
padding: 8px 16px;
border-radius: 8px;
background: rgba(10, 28, 45, 0.95);
border: 1px solid rgba(77, 156, 255, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
text-shadow: none;
letter-spacing: 0.5px;
font-family: 'Cairo', sans-serif;
transition: all 0.3s ease;
position: relative;
z-index: 9999;
isolation: isolate;
}
.author-name:hover {
background: rgba(10, 28, 45, 1);
border-color: rgba(77, 156, 255, 0.5);
box-shadow: 0 6px 20px rgba(77, 156, 255, 0.15);
transform: translateY(-1px);
} .footer-logo {
position: relative;
margin-bottom: 20px;
border-radius: 50%;
padding: 15px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 0 30px rgba(77, 156, 255, 0.2),
inset 0 0 20px rgba(77, 156, 255, 0.1);
display: inline-block;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-logo:hover {
transform: translateY(-3px);
box-shadow: 0 10px 40px rgba(77, 156, 255, 0.3),
inset 0 0 25px rgba(77, 156, 255, 0.15);
}
.footer-logo::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, rgba(77, 156, 255, 0.2), transparent, rgba(77, 156, 255, 0.2));
border-radius: 50%;
z-index: 0;
animation: rotateBorder 4s linear infinite;
}
@keyframes rotateBorder {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.footer-logo-img {
max-width: 150px;
height: auto;
filter: drop-shadow(0 5px 15px rgba(77, 156, 255, 0.2)) brightness(1.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-logo-img:hover {
filter: drop-shadow(0 8px 25px rgba(77, 156, 255, 0.4)) brightness(1.2);
transform: translateY(-2px);
}
.site-logo {
max-height: 60px;
width: auto;
transition: all 0.3s ease;
}
.site-icon {
width: 32px;
height: 32px;
} .marble-section, .granite-section {
padding: 80px 0;
position: relative;
}
.marble-section {
background: var(--global-palette3);
}
.granite-section {
background: var(--global-palette3-light);
}
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header h2 {
color: var(--global-palette1);
font-size: 2.5rem;
margin-bottom: 15px;
}
.section-header p {
color: var(--global-text-light);
opacity: 0.8;
max-width: 600px;
margin: 0 auto;
} .projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 40px 0;
}
.project-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.project-image {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.3s ease;
}
.project-content {
padding: 20px;
background: var(--global-palette3);
color: var(--global-text-light);
}
.project-content h3 {
color: var(--global-palette1);
margin-bottom: 10px;
} .home-video {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .hero-img-custom {
margin-top: 40px;
}
.hero-img-custom img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
} .partners-section {
background: var(--global-palette3);
padding: 60px 0;
text-align: center;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 40px auto 0;
padding: 0 20px;
}
.partner-logo {
max-width: 180px;
height: auto;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.partner-logo:hover {
filter: grayscale(0);
opacity: 1;
} .contact-info {
background: var(--global-palette3-light);
padding: 40px;
border-radius: 8px;
margin-top: 30px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.contact-info-item i {
color: var(--global-palette1);
font-size: 1.2rem;
margin-right: 15px;
margin-top: 3px;
}
.contact-info-item h4 {
color: var(--global-palette1);
margin-bottom: 5px;
}
.contact-info-item p {
color: var(--global-text-light);
margin: 0;
} @media (max-width: 768px) {
.projects-grid {
grid-template-columns: 1fr;
}
.partners-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-info {
padding: 20px;
}
} .mobile-menu {
position: fixed;
top: 0;
left: -100%;
width: 85%;
max-width: 400px;
height: 100vh;
background: rgba(10, 28, 45, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 9999;
transition: transform 0.3s ease-in-out;
overflow-y: auto;
box-shadow: 5px 0 25px rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(77, 156, 255, 0.15);
transform: translateX(-100%);
display: block !important;
}
.mobile-menu.active {
transform: translateX(0);
left: 0;
} .mobile-menu-items {
list-style: none;
margin: 0;
padding: 20px;
}
.mobile-menu-items li {
margin-bottom: 10px;
}
.mobile-menu-items a {
color: #fff;
text-decoration: none;
font-size: 16px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 15px;
border-radius: 8px;
background: rgba(77, 156, 255, 0.05);
transition: all 0.3s ease;
}
.mobile-menu-items a span {
flex: 1;
text-align: right;
margin-left: 10px;
}
.mobile-menu-items a i {
font-size: 18px;
color: #4d9cff;
}
.mobile-menu-items a:hover {
background: rgba(77, 156, 255, 0.1);
transform: translateX(-5px);
}
.mobile-menu-items a.active {
background: rgba(77, 156, 255, 0.15);
color: #4d9cff;
} .mobile-sub-menu {
list-style: none;
margin: 10px 0 0 0;
padding-right: 15px;
display: none;
}
.mobile-menu-item-has-children.active .mobile-sub-menu {
display: block;
animation: fadeIn 0.3s ease;
}
.mobile-sub-menu a {
font-size: 14px;
padding: 10px 15px;
background: rgba(77, 156, 255, 0.03);
}
.sub-menu-toggle {
padding: 5px;
color: #fff;
transition: transform 0.3s ease;
display: flex;
align-items: center;
}
.sub-menu-toggle i {
font-size: 14px;
color: rgba(255, 255, 255, 0.7) !important;
}
.mobile-menu-item-has-children.active .sub-menu-toggle i {
transform: rotate(180deg);
} .mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid rgba(77, 156, 255, 0.15);
background: rgba(77, 156, 255, 0.05);
}
.mobile-logo {
flex: 1;
}
.mobile-logo img {
max-height: 40px;
width: auto;
}
.mobile-menu-close {
background: none;
border: none;
color: #fff;
font-size: 24px;
cursor: pointer;
padding: 10px;
transition: all 0.3s ease;
}
.mobile-menu-close:hover {
color: #4d9cff;
transform: rotate(90deg);
} .mobile-menu-footer {
padding: 20px;
border-top: 1px solid rgba(77, 156, 255, 0.15);
margin-top: auto;
background: rgba(77, 156, 255, 0.05);
}
.mobile-contact {
display: flex;
align-items: center;
color: #fff;
margin-bottom: 15px;
padding: 10px;
background: rgba(77, 156, 255, 0.1);
border-radius: 8px;
direction: rtl;
}
.mobile-contact i {
margin-left: 10px;
color: #4d9cff;
}
.mobile-social-links {
display: flex;
gap: 10px;
justify-content: center;
}
.mobile-social-links a {
color: #fff;
font-size: 18px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 156, 255, 0.1);
border-radius: 50%;
transition: all 0.3s ease;
}
.mobile-social-links a:hover {
background: rgba(77, 156, 255, 0.2);
transform: translateY(-3px);
color: #4d9cff;
} .mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
} @supports (padding-top: env(safe-area-inset-top)) {
.mobile-menu {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
}.topbar {
background-color: transparent; color: var(--navbar-text, #ffffff);
height: var(--navbar-height, 220px); width: 100%;
z-index: 1000;
transition: all 0.3s ease;
box-shadow: none; position: absolute; top: 0;
left: 0;
} .topbar.sticky {
position: fixed;
top: 0;
left: 0;
background-color: rgba(1, 1, 0, 0.9); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
height: 120px; animation: fadeInDown 0.5s ease;
} body.has-sticky-nav {
padding-top: var(--navbar-height, 180px); } .topbar-flex {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 30px; } .topbar .logo {
display: flex;
align-items: flex-end; height: 100%;
max-height: 100%;
overflow: hidden;
padding: 15px 0;
margin-right: 50px;
margin-left: 0; padding-bottom: 25px; }
.topbar .logo a.logo-link {
color: var(--navbar-text, #ffffff);
text-decoration: none;
font-size: 2.2rem; font-weight: 700; display: flex;
flex-direction: column;
justify-content: flex-end; align-items: center;
height: 100%;
transition: transform 0.3s ease;
position: relative;
top: 30px; }
.topbar .logo a.logo-link:hover {
transform: translateY(-2px);
} .topbar .logo .logo-icon-bottom {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5px;
}
.topbar .logo .logo-icon-img {
width: 28px;
height: 28px;
transition: transform 0.3s ease;
}
.topbar .logo a:hover .logo-icon-img {
transform: rotate(10deg);
}
.topbar .logo .logo-text {
background: linear-gradient(135deg, #A9B187 10%, #C4D198 90%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
line-height: 1.1;
margin-bottom: 2px;
}
.topbar .logo img.custom-logo {
min-height: 160px; min-width: 200px; max-height: 220px; max-width: 350px; width: auto !important; height: auto !important; object-fit: contain;
transform: scale(1.5); display: block;
margin: auto 0;
transition: transform 0.3s ease;
}
.topbar .logo:hover img.custom-logo {
transform: scale(1.05);
} .main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
height: 100%;
align-items: center;
} .main-nav .sub-menu {
display: none;
position: absolute;
background-color: #fff;
min-width: 220px;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
z-index: 10;
border-radius: 8px;
padding: 12px 0;
flex-direction: column;
border-top: 3px solid var(--navbar-active, #A9B187);
}
.main-nav .menu-item-has-children {
position: relative;
}
.main-nav .menu-item-has-children:hover .sub-menu {
display: flex;
}
.main-nav .sub-menu li {
margin: 0;
width: 100%;
}
.main-nav .sub-menu a {
padding: 12px 20px;
display: block;
text-align: left;
white-space: nowrap;
color: #333;
font-weight: 500;
transition: all 0.3s ease;
border-left: 3px solid transparent;
margin: 0 5px;
border-radius: 4px;
}
.main-nav .sub-menu a:hover {
background-color: rgba(169, 177, 135, 0.08);
color: var(--navbar-active, #A9B187);
border-left: 3px solid var(--navbar-active, #A9B187);
}
.main-nav .sub-menu a:after {
display: none;
}
.main-nav li {
margin: 0 15px;
position: relative;
}
.main-nav ul li a {
color: var(--navbar-text, #ffffff);
text-decoration: none;
display: flex;
align-items: center;
height: 100%;
padding: 0 25px; transition: color 0.3s ease;
font-weight: 600; font-size: 1.15rem; }
.main-nav a:hover,
.main-nav a.active {
color: var(--navbar-active, #A9B187);
}
.main-nav a:after {
content: '';
position: absolute;
width: 0;
height: 2px;
background-color: var(--navbar-active, #A9B187);
bottom: 0;
left: 0;
transition: width 0.3s ease;
}
.main-nav a:hover:after,
.main-nav a.active:after {
width: 100%;
} .header-right {
display: flex;
align-items: center;
gap: 15px; }
.header-right .contact {
margin-right: 15px;
color: var(--navbar-text, #ffffff);
}
.header-right .login-btn {
background-color: var(--navbar-active, #A9B187);
color: #ffffff;
padding: 8px 20px;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
}
.header-right .login-btn:hover {
background-color: #ffffff;
color: var(--navbar-active, #A9B187);
} .language-switcher {
position: relative;
}
.language-switcher .lang-btn {
display: flex;
align-items: center;
padding: 8px 12px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: var(--navbar-text, #ffffff);
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
gap: 8px;
}
.language-switcher .lang-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.language-switcher .current-lang {
font-weight: 600;
letter-spacing: 1px;
}
.language-dropdown {
position: absolute;
top: 100%;
right: 0;
background-color: #ffffff;
border-radius: 6px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
padding: 8px 0;
min-width: 140px;
display: none;
z-index: 1000;
margin-top: 5px;
border-top: 3px solid var(--navbar-active, #A9B187);
}
.language-switcher:hover .language-dropdown {
display: block;
}
.language-dropdown .lang-option {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
transition: all 0.3s;
font-size: 14px;
position: relative;
}
.language-dropdown .lang-option:hover,
.language-dropdown .lang-option.active {
background-color: rgba(169, 177, 135, 0.08);
color: var(--navbar-active, #A9B187);
}
.language-dropdown .lang-option.active::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--navbar-active, #A9B187);
} .mobile-menu-toggle {
display: none;
font-size: 24px;
color: var(--navbar-text, #ffffff);
cursor: pointer;
} @media (max-width: 991px) {
.mobile-menu-toggle {
display: block;
}
.main-nav {
position: absolute;
top: var(--navbar-height, 80px);
left: 0;
right: 0;
background-color: var(--navbar-bg, #010100);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
z-index: 999;
}
.main-nav.active {
max-height: 400px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.main-nav ul {
flex-direction: column;
padding: 20px;
} .main-nav .sub-menu {
position: static;
box-shadow: none;
background-color: rgba(255, 255, 255, 0.05);
padding: 0 0 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
border-radius: 0;
}
.main-nav .menu-item-has-children:hover .sub-menu {
max-height: 500px;
}
.main-nav .sub-menu a {
padding: 10px 15px;
}
.main-nav li {
margin: 10px 0;
} .topbar .logo {
height: var(--navbar-height, 60px);
max-width: 60%;
}
.topbar .logo img.custom-logo {
max-height: calc(var(--navbar-height, 60px) - 15px);
max-width: 100%;
}
.header-right .contact {
display: none;
}
.header-right {
justify-content: flex-end;
}
}