/* ================================
Royal Coating Egypt – Global CSS
Enhanced & Modernized
================================ */
/* ---------- Design Tokens ---------- */
:root {
/* Brand */
--royal-red: #c8102e;
--royal-red-dark: #a80e25;
--royal-red-light: #e31e3b;
--royal-black: #1a1a1a;
--royal-black-light: #333333;
/* System */
--bg-light: hsl(0, 0%, 100%);
--text-dark: hsl(222.2, 84%, 4.9%);
--gray-light: hsl(210, 40%, 96.1%);
--gray-muted: hsl(215.4, 16.3%, 46.9%);
--white: #ffffff;
/* Enhanced Colors */
--success: #10b981;
--success-light: #d1fae5;
--warning: #f59e0b;
--warning-light: #fef3c7;
--error: #ef4444;
--error-light: #fee2e2;
--info: #3b82f6;
--info-light: #dbeafe;
/* Typography */
--font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--font-heading: 'Playfair Display', serif;
/* Effects */
--shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
--shadow-md: 0 8px 24px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 26px rgba(0,0,0,0.12);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
/* Sizing */
--container: 1200px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
/* ---------- Base ---------- */
html, body { height: 100%; }
body {
font-family: var(--font-body);
background: var(--bg-light);
color: var(--royal-black);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 1rem; }
/* Links */
a { color: var(--royal-red); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
.text-link { color: var(--royal-red); text-decoration: underline; }
.muted { color: var(--gray-muted); font-size: .95rem; }
/* ---------- Top Bar ---------- */
.top-bar { background: var(--royal-black); color: #fff; font-size: .95rem; padding: .5rem 0; text-align: center; }
/* ---------- Navigation ---------- */
.main-nav {
background: #fff;
border-bottom: 1px solid var(--gray-light);
position: sticky; top: 0; z-index: 50;
}
.nav-content { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }
.logo { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--royal-red); text-decoration: none; }
.nav-links { display: flex; gap: 1rem; }
.nav-links a { text-decoration: none; color: var(--royal-black); font-weight: 600; transition: color .3s; }
.nav-links a:hover, .nav-links a.active { color: var(--royal-red); }
.nav-toggle { display: none; background: none; font-size: 1.6rem; cursor: pointer; }
/* ---------- Hero ---------- */
.hero, .about-hero {
background: linear-gradient(135deg, #fff, #f8f8f8);
padding: 4.5rem 1rem;
text-align: center;
}
.hero-title, .page-title {
font-family: var(--font-heading);
color: var(--royal-black);
}
.hero-title { font-size: 3rem; margin-bottom: 1rem; }
.hero-title span { color: var(--royal-red); }
.page-title { font-size: 2.6rem; margin-bottom: .5rem; }
.hero-subtitle, .page-subtitle { color: var(--gray-muted); font-size: 1.1rem; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.25rem; }
/* ---------- Buttons ---------- */
.btn {
display: inline-block; padding: .8rem 1.25rem; border-radius: var(--radius-md);
font-weight: 700; text-decoration: none; transition: all .25s ease; cursor: pointer;
}
.btn.primary { background: var(--royal-red); color: #fff; }
.btn.primary:hover { background: var(--royal-red-dark); }
.btn.secondary { border: 2px solid var(--royal-red); color: var(--royal-red); background: transparent; }
.btn.secondary:hover { background: var(--royal-red); color: #fff; }
/* ---------- Sections ---------- */
.product-section, .about-section, .cert-section { padding: 4rem 1rem; }
.section-title {
font-family: var(--font-heading);
font-size: 2rem;
text-align: center;
color: var(--royal-black);
margin-bottom: 2rem;
}
/* ---------- Grids ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
/* ---------- Cards ---------- */
.product-card {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all .25s ease;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* Make product cards clickable when they're links */
.product-card[href] {
text-decoration: none;
color: inherit;
display: block;
}
.product-card[href]:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
.product-card img { width: 100%; height: 180px; object-fit: cover; }
.card-body { padding: 1rem; }
.card-body h3 { color: var(--royal-red); font-size: 1.25rem; margin-bottom: .4rem; }
.card-body p { color: var(--gray-muted); }
/* Product features and tags */
.product-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
.feature-tag {
background: var(--gray-light);
color: var(--royal-black);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 500;
}
.view-details {
color: var(--royal-red);
font-weight: 600;
font-size: 0.9rem;
display: block;
margin-top: 0.5rem;
}
/* ---------- Stats (home) ---------- */
.stats { background: var(--gray-light); padding: 4rem 1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; text-align: center; }
.stat h2 { font-size: 2.5rem; color: var(--royal-red); }
.stat p { color: var(--royal-black); }
/* ---------- Timeline ---------- */
.timeline-section { background: var(--gray-light); padding: 4rem 1rem; }
.timeline { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.timeline div { border-left: 4px solid var(--royal-red); padding-left: 1rem; }
.timeline span { font-weight: 700; color: var(--royal-red); font-size: 1.1rem; }
/* ---------- Certifications List ---------- */
.cert-section { background: #fff; }
.cert-list { list-style: none; padding-left: 0; margin-top: 2rem; }
.cert-list li {
font-size: 1rem; color: var(--gray-muted); margin-bottom: .5rem;
padding-left: 1.25rem; position: relative;
}
.cert-list li::before { content: "✔"; position: absolute; left: 0; color: var(--royal-red); }
/* ---------- Products Controls (Search & Filters) ---------- */
.product-controls { background: #fff; border-top: 1px solid var(--gray-light); border-bottom: 1px solid var(--gray-light); padding: 1.25rem 0; }
.controls-grid { display: grid; grid-template-columns: 1fr 200px auto; gap: .75rem; }
.control-input {
padding: .7rem .9rem; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 1rem; outline: none; background: #fff;
}
.control-input:focus { border-color: var(--royal-red); box-shadow: 0 0 0 2px rgba(200,16,46,.15); }
/* ---------- Forms ---------- */
.contact-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
.contact-form input,
.contact-form textarea,
.contact-form select {
padding: .8rem; border: 1px solid #ddd; border-radius: var(--radius-md); font-size: 1rem; font-family: inherit; background: #fff;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
border-color: var(--royal-red); outline: none; box-shadow: 0 0 0 2px rgba(200,16,46,.15);
}
.checkbox-row { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.form-note { color: var(--gray-muted); font-size: .95rem; }
.success-msg { color: #1a7f37; font-weight: 700; }
/* Standalone form container */
.form-container {
max-width: 450px; margin: 4rem auto; background: #fff; padding: 2rem;
border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
/* ---------- Tables (Specs / Admin) ---------- */
table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; background: #fff; box-shadow: var(--shadow-sm); }
th, td { border: 1px solid #eaeaea; padding: .75rem; text-align: left; }
th { background: var(--gray-light); font-weight: 600; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .95rem; }
.spec-table th, .spec-table td { border: 1px solid var(--gray-light); padding: .75rem; text-align: left; }
.spec-table th { background: var(--gray-light); font-weight: 600; }
/* ---------- Gallery ---------- */
.gallery-filters { text-align: center; margin: 2rem 0; }
.gallery-filters button {
padding: .5rem 1rem; margin: 0 .5rem; border: 2px solid var(--royal-red); background: transparent;
color: var(--royal-red); font-weight: 600; cursor: pointer; transition: all .25s;
}
.gallery-filters button:hover { background: var(--royal-red); color: #fff; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.gallery-item img {
width: 100%; height: 220px; object-fit: cover; cursor: pointer;
border-radius: var(--radius-md); transition: transform .3s;
}
.gallery-item img:hover { transform: scale(1.03); }
/* Modal */
.img-modal {
display: none; position: fixed; z-index: 999; inset: 0; background: rgba(0,0,0,.8);
justify-content: center; align-items: center; padding: 1rem;
}
.img-modal img { max-width: 90%; max-height: 90%; border-radius: var(--radius-lg); }
.modal-close { position: absolute; top: 16px; right: 26px; font-size: 2rem; color: #fff; cursor: pointer; }
/* ---------- FAQ ---------- */
.faq { margin-bottom: 1rem; }
.faq-q {
width: 100%; text-align: left; padding: .9rem 1rem; background: #fff; border: 1px solid #ddd; border-radius: var(--radius-md);
font-weight: 700; cursor: pointer; transition: background .25s;
}
.faq-q:hover { background: #fafafa; }
.faq-a {
overflow: hidden; max-height: 0; transition: max-height .3s ease; background: #fff; border: 1px solid #eee;
border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 0 1rem;
}
.faq-q[aria-expanded="true"] + .faq-a { padding: .9rem 1rem; }
/* ---------- Scraping UI (frontend only) ---------- */
.scrape-output { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.scrape-card { background: #fff; border: 1px solid #eee; border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); }
/* ---------- Dashboard (future admin/customer) ---------- */
.dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.dashboard-header a { background: var(--royal-red); color: #fff; padding: .5rem 1rem; border-radius: var(--radius-md); }
.dashboard-header a:hover { background: var(--royal-red-dark); }
.status-approved { color: #1a7f37; font-weight: 600; }
.status-rejected { color: #c62828; font-weight: 600; }
.status-pending { color: #888; font-weight: 600; }
/* ---------- Map Container ---------- */
.map-container {
margin-top: 2rem; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
/* ---------- Footer ---------- */
.footer { background: var(--royal-black); color: #fff; text-align: center; padding: 1rem 0; margin-top: 3rem; }
/* New Footer System */
.main-footer {
background: var(--royal-red);
color: #fff;
margin-top: 3rem;
padding: 2rem 0 1rem 0;
}
.footer-content {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.footer-section h3 {
color: #fff;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 1rem;
font-family: var(--font-heading);
}
.footer-section p {
color: #fff;
margin-bottom: 0.5rem;
line-height: 1.6;
}
.footer-section a {
color: #fff;
text-decoration: none;
display: block;
margin-bottom: 0.5rem;
transition: opacity var(--transition-fast);
}
.footer-section a:hover {
opacity: 0.8;
text-decoration: none;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: opacity var(--transition-fast);
}
.social-links a:hover {
opacity: 0.8;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding-top: 1rem;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-legal {
display: flex;
gap: 1rem;
align-items: center;
}
.footer-legal a {
color: #fff;
text-decoration: none;
font-size: 0.9rem;
transition: opacity var(--transition-fast);
}
.footer-legal a:hover {
opacity: 0.8;
}
.separator {
color: rgba(255, 255, 255, 0.6);
}
/* Responsive Footer */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
}
.footer-legal {
justify-content: center;
}
}
/* ---------- Animations ---------- */
.reveal { animation: rise .5s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.btn, .product-card img, .gallery-item img, .nav-links a { transition: all .25s ease; }
/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.hidden { display: none !important; }
/* ---------- Responsive ---------- */
@media (max-width: 992px) {
.page-title { font-size: 2.2rem; }
}
@media (max-width: 768px) {
/* Mobile nav */
.nav-links {
display: none; flex-direction: column; gap: .8rem; background: #fff; padding: 1rem;
position: absolute; top: 64px; right: 16px; left: 16px; border: 1px solid var(--gray-light); border-radius: 8px;
}
.nav-links.show { display: flex; }
.nav-toggle { display: block; }
.hero-title { font-size: 2.25rem; }
.page-title { font-size: 2rem; }
.hero-subtitle, .page-subtitle { font-size: 1rem; }
.controls-grid { grid-template-columns: 1fr; }
}
/* Language Switcher */
.lang-switch { display: flex; align-items: center; gap: .25rem; margin-left: 1rem; }
.lang-switch .sep { color: var(--gray-muted); }
.lang-btn {
background: transparent; border: none; cursor: pointer; font-weight: 700;
color: var(--royal-black); padding: .25rem .4rem; border-radius: 4px;
}
.lang-btn.active, .lang-btn:hover { color: var(--royal-red); text-decoration: underline; }
/* RTL Layout */
html[dir="rtl"] body { direction: rtl; text-align: right; }
html[dir="rtl"] .nav-content { flex-direction: row-reverse; }
html[dir="rtl"] .nav-links { justify-content: flex-start; }
html[dir="rtl"] .nav-links a { text-align: right; }
html[dir="rtl"] .hero, html[dir="rtl"] .about-hero { text-align: right; }
html[dir="rtl"] .product-card,
html[dir="rtl"] .about-grid > div,
html[dir="rtl"] .scrape-card { text-align: right; }
/* Reverse padding/margins where needed */
html[dir="rtl"] .cert-list li::before { left: auto; right: 0; }
html[dir="rtl"] .cert-list li { padding-left: 0; padding-right: 1.25rem; }
/* Mobile menu in RTL */
@media (max-width: 768px) {
html[dir="rtl"] .nav-links {
right: 16px; left: 16px; /* keep centered panel */
}
}
/* Use Cairo for Arabic glyphs when in RTL */
html[dir="rtl"] body { font-family: 'Cairo', var(--font-body); }
/* Breadcrumb navigation */
.breadcrumb-section {
background: var(--gray-light);
padding: 1rem 0;
border-bottom: 1px solid #e0e0e0;
}
.breadcrumb {
font-size: 0.9rem;
color: var(--gray-muted);
}
.breadcrumb a {
color: var(--royal-red);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb span {
color: var(--royal-black);
font-weight: 600;
}
/* Product specifications */
.product-specs {
margin: 1rem 0;
}
.spec-item {
margin-bottom: 0.5rem;
font-size: 0.9rem;
color: var(--gray-muted);
}
.spec-item strong {
color: var(--royal-black);
margin-right: 0.5rem;
}
/* Search and Filter Section */
.search-section {
background: var(--gray-light);
padding: 2rem 0;
border-bottom: 1px solid #e0e0e0;
}
.search-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
}
.search-box {
display: flex;
max-width: 500px;
width: 100%;
position: relative;
}
.search-box input {
flex: 1;
padding: 1rem 3rem 1rem 1rem;
border: 2px solid var(--gray-light);
border-radius: var(--radius-lg);
font-size: 1rem;
transition: all 0.3s ease;
}
.search-box input:focus {
outline: none;
border-color: var(--royal-red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
.search-box button {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
background: var(--royal-red);
color: white;
border: none;
border-radius: var(--radius-md);
padding: 0.5rem;
cursor: pointer;
transition: background 0.3s ease;
}
.search-box button:hover {
background: var(--royal-red-dark);
}
.filter-tags {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.filter-tag {
padding: 0.5rem 1rem;
border: 2px solid var(--gray-light);
background: white;
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.filter-tag:hover,
.filter-tag.active {
border-color: var(--royal-red);
background: var(--royal-red);
color: white;
}
/* Enhanced Product Cards */
.product-card {
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: all .25s ease;
border: 1px solid var(--gray-light);
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--royal-red);
}
/* Make product cards clickable when they're links */
.product-card[href] {
text-decoration: none;
color: inherit;
display: block;
}
.product-card[href]:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--royal-red);
}
.product-card img {
width: 100%;
height: 180px;
object-fit: cover;
transition: transform 0.3s ease;
}
.product-card:hover img {
transform: scale(1.05);
}
.card-body {
padding: 1.5rem;
}
.card-body h3 {
color: var(--royal-red);
font-size: 1.25rem;
margin-bottom: .5rem;
transition: color 0.3s ease;
}
.product-card:hover .card-body h3 {
color: var(--royal-red-dark);
}
.card-body p {
color: var(--gray-muted);
line-height: 1.6;
margin-bottom: 1rem;
}
/* Product features and tags */
.product-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1rem 0;
}
.feature-tag {
background: var(--gray-light);
color: var(--royal-black);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-md);
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.product-card:hover .feature-tag {
background: var(--royal-red);
color: white;
}
.view-details {
color: var(--royal-red);
font-weight: 600;
font-size: 0.9rem;
display: block;
margin-top: 0.5rem;
transition: color 0.3s ease;
}
.product-card:hover .view-details {
color: var(--royal-red-dark);
}
/* Enhanced Buttons */
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
text-decoration: none;
font-weight: 600;
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
}
.btn.primary {
background: var(--royal-red);
color: #fff;
border-color: var(--royal-red);
}
.btn.primary:hover {
background: var(--royal-red-dark);
border-color: var(--royal-red-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
}
.btn.secondary {
border: 2px solid var(--royal-red);
color: var(--royal-red);
background: transparent;
}
.btn.secondary:hover {
background: var(--royal-red);
color: #fff;
transform: translateY(-2px);
}
/* Product Grid Improvements */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
/* Responsive improvements */
@media (max-width: 768px) {
.search-container {
gap: 1rem;
}
.filter-tags {
gap: 0.5rem;
}
.filter-tag {
padding: 0.4rem 0.8rem;
font-size: 0.9rem;
}
.product-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Product Comparison Section */
.comparison-section {
background: var(--gray-light);
padding: 4rem 1rem;
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.comparison-card {
background: white;
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.comparison-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--royal-red);
}
.comparison-card.featured {
border-color: var(--royal-red);
box-shadow: var(--shadow-md);
}
.comparison-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.comparison-header h3 {
color: var(--royal-red);
font-size: 1.3rem;
margin: 0;
}
.comparison-icon {
font-size: 2rem;
opacity: 0.8;
}
.comparison-features {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.comparison-features li {
padding: 0.5rem 0;
color: var(--gray-muted);
border-bottom: 1px solid var(--gray-light);
}
.comparison-features li:last-child {
border-bottom: none;
}
.comparison-cta {
text-align: center;
}
/* Quick Stats Section */
.stats-section {
background: var(--royal-black);
color: white;
padding: 3rem 1rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
}
.stat-item {
padding: 1rem;
}
.stat-number {
font-size: 3rem;
font-weight: 800;
color: var(--royal-red);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1.1rem;
color: #ccc;
font-weight: 500;
}
/* Enhanced Section Titles */
.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: 800;
color: var(--royal-black);
margin-bottom: 1rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--royal-red);
border-radius: 2px;
}
/* Loading States and Animations */
.reveal {
animation: fadeInUp 0.6s ease-out both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Enhanced Hover Effects */
.product-card:hover .card-body h3,
.product-card:hover .feature-tag,
.product-card:hover .view-details {
transition: all 0.3s ease;
}
/* Responsive Design Improvements */
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.comparison-card {
padding: 1.5rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.stat-number {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr;
}
.comparison-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}
}
/* Quick View Modal */
.quick-view-modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
}
.quick-view-content {
background-color: white;
margin: 5% auto;
padding: 0;
border-radius: var(--radius-lg);
width: 90%;
max-width: 800px;
max-height: 80vh;
overflow-y: auto;
position: relative;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.quick-view-close {
position: absolute;
right: 20px;
top: 20px;
font-size: 28px;
font-weight: bold;
color: var(--gray-muted);
cursor: pointer;
z-index: 1001;
transition: color 0.3s ease;
}
.quick-view-close:hover {
color: var(--royal-red);
}
.quick-view-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 2rem;
}
.quick-view-image img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: var(--radius-md);
}
.quick-view-details h2 {
color: var(--royal-red);
margin-bottom: 1rem;
font-size: 1.8rem;
}
.quick-view-details p {
color: var(--gray-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.quick-view-features {
margin-bottom: 2rem;
}
.quick-view-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Recently Viewed Section */
.recently-viewed-section {
background: var(--gray-light);
padding: 4rem 1rem;
}
.recently-viewed-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.recently-viewed-item {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
cursor: pointer;
}
.recently-viewed-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.recently-viewed-item img {
width: 100%;
height: 150px;
object-fit: cover;
}
.recently-viewed-item .card-body {
padding: 1rem;
}
.recently-viewed-item h4 {
color: var(--royal-red);
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
}
.recently-viewed-item p {
color: var(--gray-muted);
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
}
/* Enhanced Product Cards with Quick View */
.product-card {
position: relative;
}
.quick-view-trigger {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: var(--radius-md);
padding: 0.5rem;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.product-card:hover .quick-view-trigger {
opacity: 1;
}
.quick-view-trigger:hover {
background: var(--royal-red);
color: white;
}
/* Responsive Design for New Features */
@media (max-width: 768px) {
.quick-view-body {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem;
}
.quick-view-content {
width: 95%;
margin: 10% auto;
}
.recently-viewed-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@media (max-width: 480px) {
.quick-view-actions {
flex-direction: column;
}
}
/* Notification System */
.notification {
position: fixed;
top: 20px;
right: 20px;
z-index: 10000;
animation: slideInRight 0.3s ease-out;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.notification-content {
background: white;
border-radius: var(--radius-lg);
padding: 1rem 1.5rem;
box-shadow: var(--shadow-lg);
border-left: 4px solid var(--royal-red);
display: flex;
align-items: center;
gap: 1rem;
min-width: 300px;
}
.notification-success .notification-content {
border-left-color: #10b981;
}
.notification-info .notification-content {
border-left-color: #3b82f6;
}
.notification-warning .notification-content {
border-left-color: #f59e0b;
}
.notification-error .notification-content {
border-left-color: #ef4444;
}
.notification-message {
flex: 1;
color: var(--royal-black);
font-weight: 500;
}
.notification-close {
background: none;
border: none;
color: var(--gray-muted);
cursor: pointer;
font-size: 1.2rem;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.notification-close:hover {
background: var(--gray-light);
color: var(--royal-red);
}
/* Enhanced Loading States */
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { left: -100%; }
100% { left: 100%; }
}
/* Enhanced Focus States for Accessibility */
.product-card:focus-within,
.btn:focus,
.filter-tag:focus,
.search-box input:focus {
outline: 2px solid var(--royal-red);
outline-offset: 2px;
}
/* Skip to Content Link for Accessibility */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--royal-red);
color: white;
padding: 8px;
text-decoration: none;
border-radius: var(--radius-md);
z-index: 10000;
transition: top 0.3s ease;
}
.skip-link:focus {
top: 6px;
}
/* Print Styles */
@media print {
.search-section,
.wishlist-toggle,
.quick-view-trigger,
.filter-tags,
.wishlist-sidebar {
display: none !important;
}
.product-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}
.section-title::after {
display: none;
}
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.feature-tag {
border: 2px solid var(--royal-black);
}
.btn {
border: 2px solid currentColor;
}
.product-card {
border: 2px solid var(--royal-black);
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.product-card,
.btn,
.filter-tag,
.notification,
.quick-view-content {
transition: none;
animation: none;
}
.product-card:hover {
transform: none;
}
.btn:hover {
transform: none;
}
}
/* ================================
Enhanced Modern Components
================================ */
/* Enhanced Product Cards */
.product-card-enhanced {
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: var(--radius-xl);
overflow: hidden;
transition: all var(--transition-normal);
position: relative;
}
.product-card-enhanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--royal-red), var(--royal-red-light));
transform: scaleX(0);
transition: transform var(--transition-normal);
}
.product-card-enhanced:hover::before {
transform: scaleX(1);
}
.product-card-enhanced:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--royal-red-light);
}
/* Enhanced Buttons */
.btn-modern {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--royal-red) 0%, var(--royal-red-dark) 100%);
border: none;
color: white;
font-weight: 600;
padding: 1rem 2rem;
border-radius: var(--radius-lg);
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-modern::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: left var(--transition-slow);
}
.btn-modern:hover::before {
left: 100%;
}
.btn-modern:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Enhanced Forms */
.form-modern {
background: white;
border-radius: var(--radius-xl);
padding: 2rem;
box-shadow: var(--shadow-md);
border: 1px solid #e2e8f0;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-dark);
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e2e8f0;
border-radius: var(--radius-md);
font-size: 1rem;
transition: all var(--transition-fast);
background: #f8fafc;
}
.form-input:focus {
outline: none;
border-color: var(--royal-red);
background: white;
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
.form-input.error {
border-color: var(--error);
background: var(--error-light);
}
/* Enhanced Navigation */
.nav-modern {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}
.nav-item-modern {
position: relative;
padding: 1rem 1.5rem;
color: var(--text-dark);
text-decoration: none;
font-weight: 500;
transition: all var(--transition-fast);
}
.nav-item-modern::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: var(--royal-red);
transition: all var(--transition-normal);
transform: translateX(-50%);
}
.nav-item-modern:hover::after,
.nav-item-modern.active::after {
width: 100%;
}
/* Enhanced Cards */
.card-modern {
background: white;
border-radius: var(--radius-xl);
padding: 2rem;
box-shadow: var(--shadow-md);
border: 1px solid #e2e8f0;
transition: all var(--transition-normal);
}
.card-modern:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
}
/* Enhanced Tables */
.table-modern {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.table-modern th {
background: #f8fafc;
padding: 1rem;
border-bottom: 1px solid #e2e8f0;
font-weight: 600;
color: var(--text-dark);
}
.table-modern td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
}
.table-modern tbody tr:hover {
background: #f8fafc;
}
/* Enhanced Alerts */
.alert {
padding: 1rem 1.5rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
border-left: 4px solid;
display: flex;
align-items: center;
gap: 0.75rem;
}
.alert-success {
background: var(--success-light);
border-left-color: var(--success);
color: #065f46;
}
.alert-warning {
background: var(--warning-light);
border-left-color: var(--warning);
color: #92400e;
}
.alert-error {
background: var(--error-light);
border-left-color: var(--error);
color: #991b1b;
}
.alert-info {
background: var(--info-light);
border-left-color: var(--info);
color: #1e40af;
}
/* Enhanced Loading States */
.loading-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading-skeleton 1.5s infinite;
}
@keyframes loading-skeleton {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Enhanced Animations */
.fade-in {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in-right {
animation: slideInRight 0.5s ease-out;
}
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* Enhanced Responsive Design */
@media (max-width: 768px) {
.form-modern {
padding: 1.5rem;
}
.card-modern {
padding: 1.5rem;
}
.btn-modern {
padding: 0.875rem 1.5rem;
font-size: 0.875rem;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--bg-light: #1a1a1a;
--text-dark: #ffffff;
--gray-light: #2d2d2d;
--gray-muted: #a0a0a0;
}
.product-card-enhanced,
.card-modern,
.form-modern {
background: #2d2d2d;
border-color: #404040;
color: white;
}
.form-input {
background: #404040;
border-color: #555;
color: white;
}
.form-input:focus {
background: #2d2d2d;
}
}
/* ================================
New Homepage Sections
================================ */
/* Featured Products Section */
.featured-products {
padding: 4rem 0;
background: var(--gray-light);
}
.section-subtitle {
text-align: center;
color: var(--gray-muted);
font-size: 1.1rem;
margin-bottom: 3rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.featured-product-card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-smooth);
border: 1px solid rgba(0,0,0,0.05);
}
.featured-product-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.featured-product-card .product-image {
position: relative;
height: 200px;
overflow: hidden;
}
.featured-product-card .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.featured-product-card:hover .product-image img {
transform: scale(1.05);
}
.product-category {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--royal-red);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.featured-product-card .product-content {
padding: 1.5rem;
}
.featured-product-card .product-content h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.75rem;
font-family: var(--font-heading);
}
.featured-product-card .product-content p {
color: var(--gray-muted);
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.featured-product-card .product-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.featured-product-card .feature-tag {
background: var(--gray-light);
color: var(--text-dark);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 500;
}
.featured-cta {
text-align: center;
}
.refresh-featured {
margin-left: 1rem;
font-size: 0.9rem;
padding: 0.5rem 1rem;
}
/* Why Choose Us Section */
.why-choose-us {
padding: 4rem 0;
background: var(--white);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-item {
text-align: center;
padding: 2rem 1.5rem;
border-radius: var(--radius-lg);
transition: var(--transition-smooth);
border: 1px solid rgba(0,0,0,0.05);
}
.feature-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--royal-red);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
display: block;
}
.feature-item h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
font-family: var(--font-heading);
}
.feature-item p {
color: var(--gray-muted);
line-height: 1.6;
font-size: 0.95rem;
}
/* Color Matching Services Section */
.color-matching {
padding: 4rem 0;
background: var(--white);
}
.color-matching-content {
max-width: 1000px;
margin: 0 auto;
}
.color-intro {
text-align: center;
margin-bottom: 3rem;
}
.color-intro p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--gray-muted);
max-width: 800px;
margin: 0 auto;
}
.color-capabilities {
margin-bottom: 3rem;
}
.color-capabilities h3 {
text-align: center;
font-size: 1.5rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 2rem;
font-family: var(--font-heading);
}
.capabilities-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.capability-item {
text-align: center;
padding: 2rem 1.5rem;
border-radius: var(--radius-lg);
transition: var(--transition-smooth);
border: 1px solid rgba(0,0,0,0.05);
background: var(--gray-light);
}
.capability-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--royal-red);
background: var(--white);
}
.capability-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}
.capability-item h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.75rem;
font-family: var(--font-heading);
}
.capability-item p {
color: var(--gray-muted);
line-height: 1.6;
font-size: 0.9rem;
}
.color-guarantee {
background: var(--royal-red);
color: var(--white);
padding: 3rem 2rem;
border-radius: var(--radius-lg);
text-align: center;
margin-bottom: 3rem;
}
.guarantee-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
font-family: var(--font-heading);
}
.guarantee-content p {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 2rem;
opacity: 0.95;
}
.guarantee-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.guarantee-tag {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.color-cta {
text-align: center;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* News & Updates Section */
.news-updates {
padding: 4rem 0;
background: var(--gray-light);
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.news-item {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-smooth);
border: 1px solid rgba(0,0,0,0.05);
display: flex;
}
.news-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.news-date {
background: var(--royal-red);
color: var(--white);
padding: 1.5rem;
text-align: center;
min-width: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.news-date .day {
font-size: 2rem;
font-weight: 700;
line-height: 1;
display: block;
}
.news-date .month {
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0.25rem;
}
.news-date .year {
font-size: 0.8rem;
opacity: 0.9;
margin-top: 0.25rem;
}
.news-content {
padding: 1.5rem;
flex: 1;
}
.news-content h3 {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.75rem;
line-height: 1.4;
font-family: var(--font-heading);
}
.news-content p {
color: var(--gray-muted);
line-height: 1.6;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.news-link {
color: var(--royal-red);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition-fast);
}
.news-link:hover {
color: var(--royal-red-dark);
text-decoration: underline;
}
.news-cta {
text-align: center;
margin-top: 3rem;
}
/* ================================
Group Companies (Homepage)
================================ */
.group-companies { padding: 4rem 0; background: #fff; }
.companies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.company-card { background: var(--white); border: 1px solid var(--gray-light); border-radius: var(--radius-lg); padding: 1.5rem; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.company-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--royal-red); }
.company-logo-wrap { display: flex; align-items: center; justify-content: center; height: 80px; margin-bottom: 1rem; }
.company-logo { max-height: 60px; width: auto; object-fit: contain; filter: grayscale(10%); }
.logo-fallback { align-items: center; justify-content: center; height: 60px; width: 100%; border: 2px dashed var(--gray-light); border-radius: var(--radius-md); color: var(--gray-muted); font-weight: 700; display: none; }
.company-card h3 { font-size: 1.1rem; color: var(--royal-black); margin-bottom: .5rem; font-family: var(--font-heading); }
.company-card p { color: var(--gray-muted); font-size: .95rem; }
/* Responsive Design for New Sections */
@media (max-width: 768px) {
.featured-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.news-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.news-item {
flex-direction: column;
}
.news-date {
min-width: auto;
padding: 1rem;
flex-direction: row;
gap: 1rem;
}
.news-date .day {
font-size: 1.5rem;
}
.featured-product-card .product-content,
.news-content {
padding: 1rem;
}
.feature-item {
padding: 1.5rem 1rem;
}
.refresh-featured {
margin-left: 0;
margin-top: 1rem;
display: block;
width: 100%;
}
.capabilities-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.color-guarantee {
padding: 2rem 1.5rem;
}
.guarantee-features {
gap: 0.5rem;
}
.color-cta {
flex-direction: column;
align-items: center;
}
.color-cta .btn {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.featured-products,
.why-choose-us,
.news-updates,
.color-matching {
padding: 3rem 0;
}
.section-subtitle {
font-size: 1rem;
margin-bottom: 2rem;
}
.featured-product-card .product-image {
height: 150px;
}
.capability-item {
padding: 1.5rem 1rem;
}
.color-guarantee {
padding: 2rem 1rem;
}
.guarantee-content h3 {
font-size: 1.3rem;
}
.guarantee-content p {
font-size: 1rem;
}
}
/* ---------- New Product Pages Styles ---------- */
/* Products Hero */
.products-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.products-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.hero-title {
font-family: var(--font-heading);
font-size: 3.5rem;
font-weight: 800;
color: var(--royal-black);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.25rem;
color: var(--gray-muted);
margin-bottom: 3rem;
line-height: 1.6;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 800;
color: var(--royal-red);
line-height: 1;
}
.stat-label {
font-size: 0.9rem;
color: var(--gray-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Category Hero */
.category-hero {
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
padding: 4rem 0;
border-bottom: 1px solid var(--gray-light);
}
.category-hero .hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
text-align: left;
}
.category-hero .hero-text {
max-width: none;
}
.category-hero .hero-image {
text-align: center;
}
.category-hero .hero-image img {
max-width: 400px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.hero-features {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
flex-wrap: wrap;
}
.feature-tag {
background: var(--royal-red);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Product Categories */
.product-categories {
padding: 5rem 0;
background: #fff;
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 1rem;
}
.section-subtitle {
font-size: 1.1rem;
color: var(--gray-muted);
max-width: 600px;
margin: 0 auto;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.category-card {
background: #fff;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
border: 1px solid var(--gray-light);
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
.category-card.featured {
border: 2px solid var(--royal-red);
position: relative;
}
.category-card.featured::before {
content: 'Most Popular';
position: absolute;
top: 1rem;
right: 1rem;
background: var(--royal-red);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 2;
}
.card-image {
position: relative;
height: 250px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.category-card:hover .card-image img {
transform: scale(1.05);
}
.card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(200, 16, 46, 0.9), rgba(200, 16, 46, 0.7));
opacity: 0;
transition: opacity var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
}
.category-card:hover .card-overlay {
opacity: 1;
}
.overlay-content {
text-align: center;
color: white;
}
.product-count {
display: block;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.category-badge {
background: rgba(255, 255, 255, 0.2);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.card-content {
padding: 2rem;
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.category-header h3 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
color: var(--royal-black);
margin: 0;
}
.category-icon {
font-size: 1.5rem;
}
.category-description {
color: var(--gray-muted);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.category-features {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.card-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
text-decoration: none;
transition: all var(--transition-fast);
border: none;
cursor: pointer;
font-size: 0.9rem;
}
.btn.primary {
background: var(--royal-red);
color: white;
}
.btn.primary:hover {
background: var(--royal-red-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn.secondary {
background: transparent;
color: var(--royal-red);
border: 2px solid var(--royal-red);
}
.btn.secondary:hover {
background: var(--royal-red);
color: white;
}
.btn.outline {
background: transparent;
color: var(--royal-black);
border: 2px solid var(--gray-light);
}
.btn.outline:hover {
background: var(--gray-light);
color: var(--royal-black);
}
.btn.large {
padding: 1rem 2rem;
font-size: 1rem;
}
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
color: var(--royal-red);
border-radius: 50%;
text-decoration: none;
transition: all var(--transition-fast);
}
.btn-icon:hover {
background: white;
transform: scale(1.1);
}
/* Product Filter */
.product-filter {
background: var(--gray-light);
padding: 2rem 0;
border-bottom: 1px solid var(--gray-light);
}
.filter-tabs {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.filter-btn {
background: white;
border: 2px solid var(--gray-light);
color: var(--gray-muted);
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.filter-btn:hover,
.filter-btn.active {
background: var(--royal-red);
color: white;
border-color: var(--royal-red);
}
/* Enhanced Product Cards */
.product-card {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
border: 1px solid var(--gray-light);
}
.product-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.product-card .card-image {
position: relative;
height: 200px;
overflow: hidden;
}
.product-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-normal);
}
.product-card:hover .card-image img {
transform: scale(1.05);
}
.product-card .card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
}
.product-card:hover .card-overlay {
opacity: 1;
}
.overlay-actions {
display: flex;
gap: 1rem;
}
.card-content {
padding: 1.5rem;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.card-header h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin: 0;
flex: 1;
}
.product-category {
background: var(--gray-light);
color: var(--gray-muted);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-description {
color: var(--gray-muted);
line-height: 1.5;
margin-bottom: 1rem;
}
.card-features {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.card-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
/* Featured Products */
.featured-products {
padding: 5rem 0;
background: var(--gray-light);
}
.featured-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.featured-item {
background: white;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.featured-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.featured-image {
height: 200px;
overflow: hidden;
}
.featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.featured-content {
padding: 1.5rem;
}
.featured-content h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 0.75rem;
}
.featured-content p {
color: var(--gray-muted);
margin-bottom: 1.5rem;
line-height: 1.5;
}
/* Quality Assurance */
.quality-assurance {
padding: 5rem 0;
background: white;
}
.certifications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.cert-item {
text-align: center;
padding: 2rem;
border-radius: var(--radius-lg);
background: var(--gray-light);
transition: all var(--transition-normal);
}
.cert-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.cert-image {
margin-bottom: 1.5rem;
}
.cert-image img {
max-width: 80px;
height: auto;
margin: 0 auto;
}
.cert-content h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 1rem;
}
.cert-content p {
color: var(--gray-muted);
line-height: 1.5;
}
/* Product Benefits */
.product-benefits {
padding: 5rem 0;
background: var(--gray-light);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.benefit-item {
text-align: center;
padding: 2rem;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.benefit-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.benefit-icon {
font-size: 3rem;
margin-bottom: 1.5rem;
}
.benefit-item h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 1rem;
}
.benefit-item p {
color: var(--gray-muted);
line-height: 1.5;
}
/* Products CTA */
.products-cta {
padding: 5rem 0;
background: linear-gradient(135deg, var(--royal-red) 0%, var(--royal-red-dark) 100%);
color: white;
text-align: center;
}
.cta-content h2 {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.cta-content p {
font-size: 1.1rem;
margin-bottom: 3rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-actions {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.products-cta .btn.primary {
background: white;
color: var(--royal-red);
}
.products-cta .btn.primary:hover {
background: var(--gray-light);
transform: translateY(-2px);
}
.products-cta .btn.secondary {
background: transparent;
color: white;
border-color: white;
}
.products-cta .btn.secondary:hover {
background: white;
color: var(--royal-red);
}
.products-cta .btn.outline {
background: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.5);
}
.products-cta .btn.outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
/* Mobile Responsive Updates */
@media (max-width: 768px) {
.hero-stats { gap: 2rem; }
.stat-number { font-size: 2rem; }
.categories-grid { grid-template-columns: 1fr; }
.category-hero .hero-content { grid-template-columns: 1fr; text-align: center; }
.filter-tabs { justify-content: flex-start; overflow-x: auto; }
.cta-actions { flex-direction: column; align-items: center; }
.card-actions { flex-direction: column; }
}
@media (max-width: 480px) {
.hero-stats { flex-direction: column; gap: 1.5rem; }
.stat-number { font-size: 1.8rem; }
.categories-grid { grid-template-columns: 1fr; }
.card-content { padding: 1rem; }
.btn { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
}
/* ---------- Individual Product Pages Styles ---------- */
/* Product Hero */
.product-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
position: relative;
overflow: hidden;
}
.product-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.product-hero .hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 2;
}
.product-badge {
display: inline-block;
background: var(--royal-red);
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.product-title {
font-family: var(--font-heading);
font-size: 3rem;
font-weight: 800;
color: var(--royal-black);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.product-subtitle {
font-size: 1.2rem;
color: var(--gray-muted);
margin-bottom: 2rem;
line-height: 1.6;
}
.product-features {
display: flex;
gap: 1rem;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.hero-actions {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.hero-image {
position: relative;
}
.image-container {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-xl);
background: white;
padding: 2rem;
}
.image-container img {
width: 100%;
height: auto;
max-width: 400px;
margin: 0 auto;
display: block;
}
.image-overlay {
position: absolute;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-category {
background: rgba(200, 16, 46, 0.9);
color: white;
padding: 0.5rem 1rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
}
.iso-badge {
background: rgba(16, 185, 129, 0.9);
color: white;
padding: 0.5rem 1rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
text-align: center;
}
/* Product Overview */
.product-overview {
padding: 5rem 0;
background: white;
}
.overview-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.overview-text {
font-size: 1.1rem;
color: var(--gray-muted);
line-height: 1.7;
margin-bottom: 2rem;
}
.overview-features {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.feature-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.feature-icon {
font-size: 2rem;
flex-shrink: 0;
}
.feature-content h3 {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 0.5rem;
}
.feature-content p {
color: var(--gray-muted);
font-size: 0.95rem;
line-height: 1.5;
}
.overview-stats {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.stat-card {
background: var(--gray-light);
padding: 2rem;
border-radius: var(--radius-lg);
text-align: center;
transition: all var(--transition-normal);
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.stat-number {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 800;
color: var(--royal-red);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--gray-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Technical Specifications */
.tech-specs {
padding: 5rem 0;
background: var(--gray-light);
}
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.spec-card {
background: white;
border-radius: var(--radius-lg);
padding: 2rem;
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
border: 1px solid var(--gray-light);
}
.spec-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.spec-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--gray-light);
}
.spec-header h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin: 0;
}
.spec-icon {
font-size: 1.5rem;
}
.spec-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.spec-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f0f0f0;
}
.spec-item:last-child {
border-bottom: none;
}
.spec-item strong {
color: var(--royal-black);
font-weight: 600;
min-width: 120px;
flex-shrink: 0;
}
.spec-item span {
color: var(--gray-muted);
text-align: right;
flex: 1;
}
/* Application Guide */
.application-guide {
padding: 5rem 0;
background: white;
}
.guide-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.step-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 2rem;
background: var(--gray-light);
border-radius: var(--radius-lg);
transition: all var(--transition-normal);
}
.step-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.step-number {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: var(--royal-red);
color: white;
border-radius: 50%;
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
}
.step-content h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 0.75rem;
}
.step-content p {
color: var(--gray-muted);
line-height: 1.6;
}
/* Quality Assurance */
.quality-assurance {
padding: 5rem 0;
background: var(--gray-light);
}
.quality-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.quality-item {
display: flex;
gap: 1.5rem;
align-items: center;
padding: 2rem;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
}
.quality-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.quality-icon {
flex-shrink: 0;
}
.quality-icon img {
width: 60px;
height: 60px;
object-fit: contain;
}
.quality-content h3 {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 0.75rem;
}
.quality-content p {
color: var(--gray-muted);
line-height: 1.5;
}
/* Related Products */
.related-products {
padding: 5rem 0;
background: white;
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.related-item {
background: var(--gray-light);
border-radius: var(--radius-lg);
overflow: hidden;
transition: all var(--transition-normal);
}
.related-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.related-image {
height: 150px;
overflow: hidden;
background: white;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.related-image img {
max-width: 120px;
max-height: 120px;
object-fit: contain;
}
.related-content {
padding: 1.5rem;
}
.related-content h3 {
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 0.75rem;
}
.related-content p {
color: var(--gray-muted);
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.5;
}
/* Product CTA */
.product-cta {
padding: 5rem 0;
background: linear-gradient(135deg, var(--royal-red) 0%, var(--royal-red-dark) 100%);
color: white;
text-align: center;
}
.product-cta h2 {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
.product-cta p {
font-size: 1.1rem;
margin-bottom: 3rem;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.product-cta .cta-actions {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.product-cta .btn.primary {
background: white;
color: var(--royal-red);
}
.product-cta .btn.primary:hover {
background: var(--gray-light);
transform: translateY(-2px);
}
.product-cta .btn.secondary {
background: transparent;
color: white;
border-color: white;
}
.product-cta .btn.secondary:hover {
background: white;
color: var(--royal-red);
}
.product-cta .btn.outline {
background: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.5);
}
.product-cta .btn.outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
/* Mobile Responsive for Product Pages */
@media (max-width: 768px) {
.product-hero .hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 2rem;
}
.product-title {
font-size: 2.5rem;
}
.overview-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.overview-stats {
grid-template-columns: repeat(3, 1fr);
}
.hero-actions {
justify-content: center;
}
.guide-steps {
grid-template-columns: 1fr;
}
.step-item {
flex-direction: column;
text-align: center;
}
.quality-item {
flex-direction: column;
text-align: center;
}
.product-cta .cta-actions {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.product-title {
font-size: 2rem;
}
.overview-stats {
grid-template-columns: 1fr;
}
.specs-grid {
grid-template-columns: 1fr;
}
.related-grid {
grid-template-columns: 1fr;
}
.image-container {
padding: 1rem;
}
.stat-card {
padding: 1.5rem;
}
.spec-card {
padding: 1.5rem;
}
.step-item {
padding: 1.5rem;
}
.quality-item {
padding: 1.5rem;
}
}
/* ================================
FAQ Section Styles
================================ */
.faq-section {
padding: 80px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.faq-section .section-header {
text-align: center;
margin-bottom: 60px;
}
.faq-section .section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 1rem;
font-family: var(--font-heading);
}
.faq-section .section-subtitle {
font-size: 1.2rem;
color: var(--gray-muted);
max-width: 600px;
margin: 0 auto;
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.faq-item {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.faq-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border-color: var(--royal-red-light);
}
.faq-item h3 {
color: var(--royal-black);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 15px;
line-height: 1.4;
font-family: var(--font-body);
}
.faq-item p {
color: #666;
line-height: 1.7;
margin: 0;
font-size: 1rem;
}
/* FAQ Responsive Design */
@media (max-width: 768px) {
.faq-section {
padding: 60px 0;
}
.faq-section .section-title {
font-size: 2rem;
}
.faq-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 20px;
}
.faq-item {
padding: 25px;
}
.faq-item h3 {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.faq-section {
padding: 40px 0;
}
.faq-section .section-title {
font-size: 1.8rem;
}
.faq-item {
padding: 20px;
}
.faq-item h3 {
font-size: 1.1rem;
}
.faq-item p {
font-size: 0.95rem;
}
}
/* ================================
Blog Section Styles
================================ */
.blog-hero {
padding: 80px 0;
background: linear-gradient(135deg, var(--royal-red) 0%, var(--royal-red-dark) 100%);
color: white;
text-align: center;
}
.blog-hero .hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
font-family: var(--font-heading);
}
.blog-hero .hero-subtitle {
font-size: 1.3rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
.featured-article {
padding: 80px 0;
background: #f8f9fa;
}
.featured-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.featured-image img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.article-meta {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.article-category {
background: var(--royal-red);
color: white;
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.article-date {
color: var(--gray-muted);
font-size: 0.9rem;
}
.article-title {
font-size: 2.2rem;
font-weight: 700;
color: var(--royal-black);
margin-bottom: 20px;
line-height: 1.3;
font-family: var(--font-heading);
}
.article-excerpt {
font-size: 1.1rem;
color: #666;
line-height: 1.6;
margin-bottom: 30px;
}
.blog-categories {
padding: 80px 0;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
}
.category-card {
background: white;
padding: 40px 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
border: 1px solid #e9ecef;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
border-color: var(--royal-red-light);
}
.category-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.category-card h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--royal-black);
margin-bottom: 15px;
font-family: var(--font-heading);
}
.category-card p {
color: #666;
line-height: 1.6;
margin-bottom: 25px;
}
.recent-articles {
padding: 80px 0;
background: #f8f9fa;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 50px;
}
.article-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.article-image {
height: 200px;
overflow: hidden;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.article-card:hover .article-image img {
transform: scale(1.05);
}
.article-content {
padding: 30px;
}
.article-content .article-title {
font-size: 1.4rem;
margin-bottom: 15px;
line-height: 1.4;
}
.article-content .article-excerpt {
font-size: 1rem;
margin-bottom: 20px;
}
.article-link {
color: var(--royal-red);
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.article-link:hover {
color: var(--royal-red-dark);
}
.newsletter-signup {
padding: 80px 0;
background: var(--royal-red);
color: white;
text-align: center;
}
.newsletter-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 20px;
font-family: var(--font-heading);
}
.newsletter-content p {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
}
.newsletter-form {
display: flex;
max-width: 500px;
margin: 0 auto;
gap: 15px;
}
.newsletter-form input {
flex: 1;
padding: 15px 20px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
.newsletter-form button {
padding: 15px 30px;
border: none;
border-radius: 8px;
background: white;
color: var(--royal-red);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
background: #f8f9fa;
transform: translateY(-2px);
}
/* Blog Responsive Design */
@media (max-width: 768px) {
.blog-hero .hero-title {
font-size: 2.2rem;
}
.blog-hero .hero-subtitle {
font-size: 1.1rem;
}
.featured-content {
grid-template-columns: 1fr;
gap: 40px;
}
.featured-image img {
height: 250px;
}
.article-title {
font-size: 1.8rem;
}
.categories-grid {
grid-template-columns: 1fr;
}
.articles-grid {
grid-template-columns: 1fr;
}
.newsletter-form {
flex-direction: column;
}
}
@media (max-width: 480px) {
.blog-hero {
padding: 60px 0;
}
.blog-hero .hero-title {
font-size: 1.8rem;
}
.featured-article,
.blog-categories,
.recent-articles,
.newsletter-signup {
padding: 60px 0;
}
.article-content {
padding: 20px;
}
.newsletter-content h2 {
font-size: 2rem;
}
}
/* ================================
Export Page Styles
================================ */
.export-hero {
padding: 100px 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
overflow: hidden;
}
.export-hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.hero-badge {
display: inline-block;
background: var(--royal-red);
color: white;
padding: 8px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
}
.export-hero .hero-title {
font-size: 3.2rem;
font-weight: 600;
color: var(--royal-black);
margin-bottom: 20px;
line-height: 1.2;
font-family: var(--font-heading);
}
.export-hero .hero-subtitle {
font-size: 1.3rem;
color: #666;
line-height: 1.6;
margin-bottom: 40px;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 600;
color: var(--royal-red);
margin-bottom: 5px;
font-family: var(--font-heading);
}
.stat-label {
font-size: 0.9rem;
color: #666;
font-weight: 600;
}
.hero-actions {
display: flex;
gap: 30px;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
}
.hero-actions .btn {
padding: 18px 40px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 220px;
flex: 1;
max-width: 300px;
}
.hero-actions .btn.primary {
background: var(--royal-red);
color: white;
border: 2px solid var(--royal-red);
}
.hero-actions .btn.primary:hover {
background: var(--royal-red-dark);
border-color: var(--royal-red-dark);
transform: translateY(-2px);
}
.hero-actions .btn.secondary {
background: transparent;
color: var(--royal-red);
border: 2px solid var(--royal-red);
}
.hero-actions .btn.secondary:hover {
background: var(--royal-red);
color: white;
transform: translateY(-2px);
}
.hero-image {
position: relative;
}
.hero-image img {
width: 100%;
height: 500px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.why-partner-section {
padding: 100px 0;
background: white;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 60px;
}
.benefit-card {
background: white;
padding: 40px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
border: 1px solid #e9ecef;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--royal-red), var(--royal-red-light));
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.benefit-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.benefit-card h3 {
font-size: 1.5rem;
font-weight: 500;
color: var(--royal-black);
margin-bottom: 15px;
font-family: var(--font-heading);
}
.benefit-card p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.benefit-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tag {
background: #f8f9fa;
color: var(--royal-red);
padding: 5px 12px;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid #e9ecef;
}
.markets-section {
padding: 100px 0;
background: #f8f9fa;
}
.markets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 60px;
}
.market-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.market-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}
.market-image {
position: relative;
height: 250px;
overflow: hidden;
}
.market-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.market-card:hover .market-image img {
transform: scale(1.05);
}
.market-overlay {
position: absolute;
top: 20px;
right: 20px;
background: rgba(200, 16, 46, 0.9);
color: white;
padding: 8px 16px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.market-content {
padding: 30px;
}
.market-content h3 {
font-size: 1.5rem;
font-weight: 500;
color: var(--royal-black);
margin-bottom: 15px;
font-family: var(--font-heading);
}
.market-content p {
color: #666;
line-height: 1.6;
margin-bottom: 20px;
}
.market-countries {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.country-tag {
background: #f8f9fa;
color: var(--royal-red);
padding: 4px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
border: 1px solid #e9ecef;
}
.partnership-form-section {
padding: 100px 0;
background: white;
}
.form-container {
max-width: 1000px;
margin: 0 auto;
background: #f8f9fa;
padding: 50px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.partnership-form {
display: flex;
flex-direction: column;
gap: 30px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 600;
color: var(--royal-black);
margin-bottom: 8px;
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 15px 20px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--royal-red);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.1);
}
.form-actions {
text-align: center;
margin-top: 20px;
}
.form-actions .btn {
padding: 15px 40px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 200px;
background: var(--royal-red);
color: white;
border: 2px solid var(--royal-red);
cursor: pointer;
font-size: 1rem;
}
.form-actions .btn:hover {
background: var(--royal-red-dark);
border-color: var(--royal-red-dark);
transform: translateY(-2px);
}
.form-note {
color: #666;
font-size: 0.9rem;
margin-top: 15px;
}
.export-cta {
padding: 100px 0;
background: linear-gradient(135deg, var(--royal-red) 0%, var(--royal-red-dark) 100%);
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 3rem;
font-weight: 600;
margin-bottom: 20px;
font-family: var(--font-heading);
}
.cta-content p {
font-size: 1.3rem;
margin-bottom: 40px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.feature {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
justify-content: center;
text-align: center;
}
.feature-icon {
font-size: 1.2rem;
}
.feature-text {
font-size: 0.9rem;
font-weight: 500;
}
.cta-actions {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.cta-actions .btn {
padding: 15px 30px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
}
.cta-actions .btn.primary {
background: white;
color: var(--royal-red);
border: 2px solid white;
}
.cta-actions .btn.primary:hover {
background: #f8f9fa;
border-color: #f8f9fa;
transform: translateY(-2px);
}
.cta-actions .btn.secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-actions .btn.secondary:hover {
background: white;
color: var(--royal-red);
transform: translateY(-2px);
}
.cta-actions .btn.outline {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.cta-actions .btn.outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
transform: translateY(-2px);
}
/* ================================
RTL (Arabic) Support
================================ */
[dir="rtl"] {
text-align: right;
}
[dir="rtl"] .container {
direction: rtl;
}
[dir="rtl"] .nav-links {
flex-direction: row-reverse;
}
[dir="rtl"] .hero-actions {
justify-content: flex-end;
}
[dir="rtl"] .cta-actions {
justify-content: flex-end;
}
[dir="rtl"] .form-row {
direction: rtl;
}
[dir="rtl"] .benefits-grid {
direction: rtl;
}
[dir="rtl"] .markets-grid {
direction: rtl;
}
[dir="rtl"] .cta-features {
direction: rtl;
}
[dir="rtl"] .feature {
flex-direction: row-reverse;
}
[dir="rtl"] .breadcrumb {
direction: rtl;
}
[dir="rtl"] .breadcrumb a::after {
content: " < ";
margin: 0 8px;
}
[dir="rtl"] .breadcrumb span::before {
content: " > ";
margin: 0 8px;
}
[dir="rtl"] .lang-switch {
order: -1;
}
[dir="rtl"] .hero-stats {
direction: rtl;
}
[dir="rtl"] .stat-item {
text-align: center;
}
[dir="rtl"] .market-overlay {
right: auto;
left: 20px;
}
[dir="rtl"] .benefit-card::before {
right: 0;
left: auto;
}
[dir="rtl"] .form-group input,
[dir="rtl"] .form-group select,
[dir="rtl"] .form-group textarea {
text-align: right;
}
[dir="rtl"] .form-group input::placeholder,
[dir="rtl"] .form-group textarea::placeholder {
text-align: right;
}
[dir="rtl"] .section-header {
text-align: center;
}
[dir="rtl"] .section-title {
text-align: center;
}
[dir="rtl"] .section-subtitle {
text-align: center;
}
[dir="rtl"] .hero-content {
text-align: right;
}
[dir="rtl"] .hero-title {
text-align: right;
}
[dir="rtl"] .hero-subtitle {
text-align: right;
}
[dir="rtl"] .cta-content {
text-align: center;
}
[dir="rtl"] .cta-content h2 {
text-align: center;
}
[dir="rtl"] .cta-content p {
text-align: center;
}
[dir="rtl"] .form-header {
text-align: center;
}
[dir="rtl"] .form-header h2 {
text-align: center;
}
[dir="rtl"] .form-header p {
text-align: center;
}
/* RTL Typography */
[dir="rtl"] body {
font-family: 'Cairo', 'Arial', sans-serif;
}
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .benefit-card h3,
[dir="rtl"] .market-content h3 {
font-family: 'Cairo', 'Arial', sans-serif;
}
/* RTL Button Adjustments */
[dir="rtl"] .btn {
text-align: center;
}
[dir="rtl"] .hero-actions .btn {
text-align: center;
}
[dir="rtl"] .cta-actions .btn {
text-align: center;
}
[dir="rtl"] .form-actions .btn {
text-align: center;
}
/* RTL Grid Adjustments */
[dir="rtl"] .benefits-grid {
direction: ltr;
}
[dir="rtl"] .markets-grid {
direction: ltr;
}
[dir="rtl"] .cta-features {
direction: ltr;
}
[dir="rtl"] .hero-stats {
direction: ltr;
}
/* RTL Form Adjustments */
[dir="rtl"] .form-row {
direction: ltr;
}
[dir="rtl"] .partnership-form {
direction: ltr;
}
/* RTL Navigation Adjustments */
[dir="rtl"] .nav-links {
flex-direction: row;
}
[dir="rtl"] .lang-switch {
order: 0;
}
/* RTL Text Alignment */
[dir="rtl"] .hero-content {
text-align: right;
}
[dir="rtl"] .hero-title {
text-align: right;
}
[dir="rtl"] .hero-subtitle {
text-align: right;
}
[dir="rtl"] .benefit-card {
text-align: right;
}
[dir="rtl"] .market-content {
text-align: right;
}
[dir="rtl"] .form-group {
text-align: right;
}
[dir="rtl"] .form-group label {
text-align: right;
}
/* RTL Feature Icons */
[dir="rtl"] .feature {
flex-direction: row;
}
[dir="rtl"] .feature-icon {
margin-left: 8px;
margin-right: 0;
}
/* RTL Market Overlay */
[dir="rtl"] .market-overlay {
right: 20px;
left: auto;
}
/* RTL Benefit Card Accent */
[dir="rtl"] .benefit-card::before {
right: 0;
left: auto;
}
/* Export Page Responsive Design */
@media (max-width: 768px) {
.export-hero .container {
grid-template-columns: 1fr;
gap: 40px;
}
.export-hero .hero-title {
font-size: 2.5rem;
}
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.benefits-grid {
grid-template-columns: 1fr;
}
.markets-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.form-container {
padding: 30px;
}
.cta-content h2 {
font-size: 2.2rem;
}
.cta-features {
grid-template-columns: 1fr;
}
.cta-actions {
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.export-hero {
padding: 60px 0;
}
.export-hero .hero-title {
font-size: 2rem;
}
.hero-stats {
grid-template-columns: 1fr;
}
.why-partner-section,
.markets-section,
.partnership-form-section,
.export-cta {
padding: 60px 0;
}
.form-container {
padding: 20px;
}
.cta-content h2 {
font-size: 1.8rem;
}
}