/* ============================================
   DARK MODE CSS - Consistent Modern Black Theme
   Century Events - Full Dark UI Conversion
   Compatible with Arabic (RTL) and English (LTR)
   ============================================ */

/* ============================================
   1. CSS VARIABLES - Dark Theme Palette
   ============================================ */
:root {
  /* Core Dark Backgrounds */
  --bg-primary: #000000; /* Pure black - main background */
  --bg-secondary: #0d0d0d; /* Near black - sections */
  --bg-tertiary: #111111; /* Dark gray - elevated */
  --bg-card: #141414; /* Card backgrounds */
  --bg-hover: #1a1a1a; /* Hover states */

  /* Text Colors */
  --text-primary: #ffffff; /* Pure white - headings */
  --text-secondary: #f2f2f2; /* Light gray - body text */
  --text-muted: #b3b3b3; /* Muted gray - secondary */
  --text-dim: #808080; /* Dim gray - placeholders */

  /* Accent Colors */
  --accent-gold: #ffb400; /* Gold - primary accent */
  --accent-purple: #aa66ff; /* Purple - secondary accent */
  --accent-green: #4caf50; /* Green - success */
  --accent-orange: #ff6b35; /* Orange - highlights */

  /* Borders & Dividers */
  --border-primary: #2a2a2a; /* Main borders */
  --border-light: #1f1f1f; /* Light borders */
  --border-hover: #3a3a3a; /* Hover borders */

  /* Shadows for Dark Mode */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.9);

  /* Overlays */
  --overlay-light: rgba(0, 0, 0, 0.7);
  --overlay-medium: rgba(0, 0, 0, 0.8);
  --overlay-heavy: rgba(0, 0, 0, 0.9);
}

/* ============================================
   2. BASE & BODY
   ============================================ */
body {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

/* ============================================
   3. SPLASH SCREEN
   ============================================ */
.splash-screen {
  background: var(--bg-primary);
}

.splash-overlay {
  background: var(--overlay-heavy) !important;
}

.splash-content {
  /* Logo remains visible */
}

/* ============================================
   4. HEADER & NAVIGATION
   ============================================ */
.header {
  background: transparent !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.header.scrolled {
  background: rgba(13, 13, 13, 0.98) !important;
  border-bottom: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md);
}

.navbar {
  background: transparent;
}

.nav-container {
  background: transparent;
}

/* Navigation Links */
.nav-link {
  color: var(--text-primary) !important;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent-gold) !important;
}

.nav-link::after {
  background: var(--accent-gold) !important;
}

/* Language Switcher */
.nav-language-switcher {
  background: transparent;
}

.lang-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.lang-btn:hover,
.lang-btn.active {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: var(--accent-gold) !important;
}

.lang-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

.lang-option {
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.lang-option:hover {
  background: var(--bg-hover) !important;
  color: var(--accent-gold) !important;
}

/* Hamburger Menu */
.hamburger span {
  background: var(--text-primary) !important;
}

/* Mobile Menu */
@media (max-width: 768px) {
  .nav-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: var(--shadow-lg);
  }

  .nav-link {
    border-bottom: 1px solid var(--border-light) !important;
  }
}

/* ============================================
   5. HERO SECTION
   ============================================ */
.hero {
  background: var(--bg-primary);
}

.hero-overlay {
  background: var(--overlay-heavy) !important;
}

.hero-content {
  color: var(--text-primary) !important;
}

.hero-title,
.hero-content h1 {
  color: var(--text-primary) !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9) !important;
}

.hero-subtitle,
.hero-content p {
  color: var(--text-secondary) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
}

/* Hero Buttons */
.hero-buttons .cta-btn.primary {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange)) !important;
  color: var(--bg-primary) !important;
  box-shadow: var(--shadow-md);
}

.hero-buttons .cta-btn.primary:hover {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-gold)) !important;
  box-shadow: var(--shadow-lg);
}

.hero-buttons .cta-btn.secondary {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 2px solid var(--text-primary) !important;
}

.hero-buttons .cta-btn.secondary:hover {
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
}

/* Scroll Indicator */
.scroll-indicator {
  color: var(--text-primary) !important;
}

.scroll-arrow {
  border-color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.scroll-text {
  color: var(--text-primary) !important;
}

/* ============================================
   6. SECTION COMMON STYLES
   ============================================ */
.section {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.section-header {
  color: var(--text-primary);
}

.section-title {
  color: var(--accent-gold) !important;
}

.section-title::after {
  background: var(--accent-purple) !important;
}

.section-subtitle {
  color: var(--text-muted) !important;
}

/* ============================================
   7. INTRO SECTION
   ============================================ */
.intro {
  background: var(--bg-secondary) !important;
}

.intro-content h2 {
  color: var(--accent-gold) !important;
}

.intro-content p {
  color: var(--text-secondary) !important;
}

/* ============================================
   8. ABOUT SECTION
   ============================================ */
.about {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.about-overlay {
  background: linear-gradient(135deg, rgba(13, 13, 13, 0.95) 0%, rgba(17, 17, 17, 0.9) 50%, rgba(13, 13, 13, 0.95) 100%) !important;
}

.about .section-title,
.about .section-subtitle {
  color: var(--text-primary) !important;
}

.about-text h3 {
  color: var(--accent-gold) !important;
}

.about-text p {
  color: var(--text-secondary) !important;
}

.about-image img {
  border: 2px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   9. VISION & MISSION SECTION
   ============================================ */
.vision-mission {
  background: var(--bg-secondary) !important;
}

.vm-content {
  background: transparent;
}

.vm-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md);
  border-radius: 20px;
}

.vm-item:hover {
  border-color: var(--accent-purple) !important;
  box-shadow: var(--shadow-lg);
}

.vm-item h3 {
  color: var(--accent-gold) !important;
}

.vm-item p {
  color: var(--text-secondary) !important;
}

/* ============================================
   10. SERVICES SECTION
   ============================================ */
.services {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.services-grid {
  background: transparent;
}

.service-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.service-card:hover {
  border-color: var(--accent-gold) !important;
  box-shadow: var(--shadow-lg) !important;
}

.service-image {
  background: var(--bg-tertiary);
}

.service-name {
  color: var(--accent-gold) !important;
  background: var(--bg-card) !important;
}

/* ============================================
   11. PORTFOLIO SECTION
   ============================================ */
.portfolio {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

/* Category Filters */
.portfolio-categories {
  background: transparent;
}

.category-btn {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 2px solid var(--border-primary) !important;
}

.category-btn:hover,
.category-btn.active {
  background: var(--accent-purple) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-purple) !important;
}

/* Portfolio Items */
.portfolio-grid {
  background: transparent;
}

.portfolio-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.portfolio-item:hover {
  border-color: var(--accent-gold) !important;
  box-shadow: var(--shadow-lg) !important;
}

.portfolio-image {
  background: var(--bg-tertiary);
}

.portfolio-overlay {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.95) 100%) !important;
}

.work-type {
  color: var(--accent-gold) !important;
}

.work-title {
  color: var(--text-primary) !important;
}

.portfolio-info {
  color: var(--text-secondary);
}

/* ============================================
   12. TEAM SECTION
   ============================================ */
.team {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.team-grid {
  background: transparent;
}

.team-member {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.team-member:hover {
  border-color: var(--accent-purple) !important;
  box-shadow: var(--shadow-lg) !important;
}

.member-image {
  background: var(--bg-tertiary);
}

.member-info {
  background: var(--bg-card) !important;
}

.member-info h3 {
  color: var(--accent-gold) !important;
}

.member-position {
  color: var(--text-secondary) !important;
}

/* Team Control Buttons */
.team-controls {
  background: transparent;
}

.btn-show-more,
.btn-show-less {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold)) !important;
  color: var(--text-primary) !important;
  border: none !important;
  box-shadow: var(--shadow-md);
}

.btn-show-more:hover,
.btn-show-less:hover {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-purple)) !important;
  box-shadow: var(--shadow-lg);
}

/* ============================================
   13. CLIENTS/PARTNERS SECTION
   ============================================ */
.clients {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

.clients-grid {
  background: transparent;
}

.client-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

.client-item:hover {
  border-color: var(--accent-gold) !important;
  box-shadow: var(--shadow-md) !important;
  background: var(--bg-hover) !important;
}

.client-logo {
  filter: brightness(1.2) contrast(1.1) !important;
}

.client-item:hover .client-logo {
  filter: brightness(1.5) contrast(1.2) !important;
}
#clients .client-item {
  background: transparent !important;
}
/* ============================================
   14. PROFILE/STATS SECTION
   ============================================ */
.profile {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%) !important;
  color: var(--text-secondary) !important;
}

.modern-stats-grid {
  background: transparent;
}

.modern-stat-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.modern-stat-item::before {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-gold), var(--accent-orange)) !important;
}

.modern-stat-item:hover {
  border-color: var(--accent-purple) !important;
  box-shadow: var(--shadow-lg) !important;
}

.stat-value {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-purple)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.stat-title {
  color: var(--text-primary) !important;
}

.stat-description {
  color: var(--text-muted) !important;
}

/* ============================================
   15. NEWS SECTION
   ============================================ */
.news {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.news-grid {
  background: transparent;
}

.news-item {
  background: var(--bg-card) !important;
  border: 2px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md) !important;
}

.news-item:hover {
  border-color: var(--accent-gold) !important;
  box-shadow: var(--shadow-lg) !important;
}

.news-header {
  background: transparent;
}

.news-date {
  color: var(--accent-gold) !important;
}

.news-title {
  color: var(--text-primary) !important;
}

.news-description {
  color: var(--text-secondary) !important;
}

.news-link {
  color: var(--accent-gold) !important;
}

.news-link:hover {
  color: var(--accent-purple) !important;
}

/* ============================================
   16. CONTACT SECTION
   ============================================ */
.contact {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}

.contact-overlay {
  background: linear-gradient(135deg, rgba(13, 13, 13, 0.95) 0%, rgba(17, 17, 17, 0.9) 50%, rgba(13, 13, 13, 0.95) 100%) !important;
}

.contact .section-title,
.contact .section-subtitle {
  color: var(--text-primary) !important;
}

/* Contact Info */
.contact-info {
  background: transparent;
}

.contact-item {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-primary) !important;
  backdrop-filter: blur(10px);
}

.contact-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--accent-gold) !important;
}

.contact-item i {
  color: var(--accent-gold) !important;
}

.contact-details h3 {
  color: var(--text-primary) !important;
}

.contact-details p,
.contact-details a {
  color: var(--text-secondary) !important;
}

.contact-details a:hover {
  color: var(--accent-gold) !important;
}

/* Contact Form */
.contact-form {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border-primary) !important;
  backdrop-filter: blur(20px);
}

.form-group label {
  color: var(--text-primary) !important;
}

.form-group input,
.form-group textarea,
.form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder,
.form-control::placeholder {
  color: var(--text-dim) !important;
}

.form-group input:focus,
.form-group textarea:focus,
.form-control:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--accent-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 180, 0, 0.1) !important;
}

.btn-submit {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-orange)) !important;
  color: var(--bg-primary) !important;
  border: none !important;
  box-shadow: var(--shadow-md);
}

.btn-submit:hover {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-gold)) !important;
  box-shadow: var(--shadow-lg);
}
/* ============================================
   Client Card – Glass Logo Box with Dark Theme
   - Adds a soft glass-style inner box
   - Enhances logo visibility on dark backgrounds
   - Smooth hover zoom for a premium brand look جديد  
 
  ============================================ */




/* ============================================
   17. FOOTER
   ============================================ */
.footer {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border-top: 1px solid var(--border-primary) !important;
}

.footer-content {
  background: transparent;
}

.footer-main {
  background: transparent;
}

.footer-logo {
  filter: brightness(1.2);
}

.footer-description {
  color: var(--text-secondary) !important;
}

.footer-section h3,
.footer-section h4 {
  color: var(--accent-gold) !important;
}

.footer-section p,
.footer-section a,
.footer-section li,
.footer-section li a {
  color: var(--text-secondary) !important;
}

.footer-section a:hover,
.footer-section li a:hover {
  color: var(--accent-gold) !important;
}

.footer-links {
  background: transparent;
}

/* Social Links */
.social-links {
  background: transparent;
}

.social-link {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
}

.social-link:hover {
  background: var(--accent-purple) !important;
  color: var(--text-primary) !important;
  border-color: var(--accent-purple) !important;
}

/* Footer Bottom */
.footer-bottom {
  background: var(--bg-primary) !important;
  border-top: 1px solid var(--border-primary) !important;
  color: var(--text-muted) !important;
}

.footer-bottom p {
  color: var(--text-muted) !important;
}

/* ============================================
   18. MODALS & OVERLAYS
   ============================================ */
.modal {
  background: rgba(0, 0, 0, 0.95) !important;
}

.modal-content {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-header {
  background: var(--bg-hover) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.modal-title {
  color: var(--text-primary) !important;
}

.modal-body {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

.modal-body h3,
.modal-body h4 {
  color: var(--accent-gold) !important;
}

.modal-body p {
  color: var(--text-secondary) !important;
}

.close {
  color: var(--text-primary) !important;
  background: transparent !important;
  border: none !important;
  opacity: 1 !important;
}

.close:hover {
  color: var(--accent-gold) !important;
}

/* Service Modal */
#serviceModal .modal-content,
#workModal .modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
}

#serviceModalContent,
#workModalContent {
  color: var(--text-secondary) !important;
}

#serviceModalContent h2,
#serviceModalContent h3,
#workModalContent h2,
#workModalContent h3 {
  color: var(--accent-gold) !important;
}

#serviceModalContent p,
#workModalContent p {
  color: var(--text-secondary) !important;
}

/* ============================================
   19. BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */
.btn,
.button,
.cta-btn,
button[type="submit"],
button[type="button"] {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold)) !important;
  color: var(--text-primary) !important;
  border: none !important;
  box-shadow: var(--shadow-md);
}

.btn:hover,
.button:hover,
.cta-btn:hover,
button[type="submit"]:hover,
button[type="button"]:hover {
  background: linear-gradient(135deg, var(--accent-gold), var(--accent-purple)) !important;
  box-shadow: var(--shadow-lg);
}

/* Back to Top Button */
.back-to-top {
  background: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
  box-shadow: var(--shadow-lg) !important;
  border: none !important;
}

.back-to-top:hover {
  background: var(--accent-purple) !important;
  color: var(--text-primary) !important;
}

/* ============================================
   20. SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-hover);
  border-radius: 6px;
  border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* Firefox Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-hover) var(--bg-secondary);
}

/* ============================================
   21. TEXT SELECTION
   ============================================ */
::selection {
  background: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
}

::-moz-selection {
  background: var(--accent-gold) !important;
  color: var(--bg-primary) !important;
}

/* ============================================
   22. FOCUS STATES (Accessibility)
   ============================================ */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.nav-link:focus,
.category-btn:focus {
  outline: 2px solid var(--accent-gold) !important;
  outline-offset: 2px !important;
}

/* ============================================
   23. ADDITIONAL ELEMENTS
   ============================================ */
hr,
.divider {
  border-color: var(--border-primary) !important;
  background: var(--border-primary) !important;
}

blockquote {
  border-left-color: var(--accent-gold) !important;
  background: var(--bg-hover) !important;
  color: var(--text-secondary) !important;
}

code,
pre {
  background: var(--bg-hover) !important;
  color: var(--accent-gold) !important;
  border: 1px solid var(--border-primary) !important;
}

/* ============================================
   24. ADMIN PANEL (if exists)
   ============================================ */
.admin-panel,
.admin-container,
.admin-wrapper {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
}

.admin-header,
.admin-nav {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
}

.admin-card,
.admin-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md);
}

.admin-table {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}

.admin-table th {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--border-primary) !important;
}

.admin-table td {
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-secondary) !important;
}

.admin-table tr:hover {
  background: var(--bg-hover) !important;
}

/* ============================================
   25. LOADING & SPINNER STATES
   ============================================ */
.loading,
.spinner,
.loader {
  border-top-color: var(--accent-gold) !important;
}

/* ============================================
   26. ALERTS & NOTIFICATIONS
   ============================================ */
.alert,
.notification,
.toast {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-md);
}

.alert-success {
  border-left: 4px solid var(--accent-green) !important;
}

.alert-error,
.alert-danger {
  border-left: 4px solid var(--accent-orange) !important;
}

.alert-info,
.alert-warning {
  border-left: 4px solid var(--accent-purple) !important;
}

/* ============================================
   27. CARDS & GENERIC CONTAINERS
   ============================================ */
.card,
.box,
.panel,
.widget,
.container-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary) !important;
}

.card:hover,
.box:hover,
.panel:hover {
  border-color: var(--accent-gold) !important;
  box-shadow: var(--shadow-md);
}

.card-header,
.card-title {
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-primary) !important;
  background: var(--bg-hover);
}

.card-body,
.card-content {
  color: var(--text-secondary) !important;
}

/* ============================================
   28. UTILITY CLASSES
   ============================================ */
.bg-light,
.bg-white {
  background: var(--bg-card) !important;
}

.bg-dark {
  background: var(--bg-primary) !important;
}

.bg-darker {
  background: var(--bg-secondary) !important;
}

.text-dark {
  color: var(--text-primary) !important;
}

.text-light {
  color: var(--text-secondary) !important;
}

.text-muted {
  color: var(--text-muted) !important;
}

.border-light {
  border-color: var(--border-primary) !important;
}

/* ============================================
   29. RTL/LTR COMPATIBILITY
   ============================================ */
[dir="rtl"] .nav-link::after {
  right: 0;
  left: auto;
}

[dir="ltr"] .nav-link::after {
  left: 0;
  right: auto;
}

body.en .nav-link::after {
  left: 0;
  right: auto;
}

/* ============================================
   30. RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 1024px) {
  .header.scrolled {
    background: rgba(0, 0, 0, 0.98) !important;
  }
}

@media (max-width: 768px) {
  .modal-content {
    max-width: 95%;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem !important;
  }

  .section-title {
    font-size: 1.8rem !important;
  }
}

/* ============================================
   END OF DARK MODE CSS
   ============================================ */