/* ===========================================
   Aqaba Red Sea Boat - Modern CSS Framework
   =========================================== */

/* ========== CSS Variables & Root ========== */
:root {
       /* Color Palette */
       --primary-deep-blue: #013a63;
       --primary-sea-turquoise: #0ea5a1;
       --accent-sunset: #ff7a45;
       --neutral-muted: #6b7280;
       --neutral-light: #f8fafc;
       --neutral-white: #ffffff;
       --neutral-dark: #03263b;

       /* Card & Glass Effects */
       --card-bg: rgba(255, 255, 255, 0.9);
       --glass-bg: rgba(255, 255, 255, 0.1);
       --glass-border: rgba(255, 255, 255, 0.2);

       /* Layout & Spacing */
       --max-width: 1200px;
       --container-padding: 2rem;
       --section-spacing: 4rem;
       --element-spacing: 1.5rem;

       /* Border Radius */
       --radius-sm: 8px;
       --radius-md: 12px;
       --radius-lg: 16px;
       --radius-xl: 20px;
       --radius-full: 9999px;

       /* Shadows */
       --shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.08);
       --shadow-md: 0 4px 16px rgba(2, 6, 23, 0.12);
       --shadow-lg: 0 8px 24px rgba(2, 6, 23, 0.18);
       --shadow-xl: 0 16px 32px rgba(2, 6, 23, 0.24);

       /* Typography */
       --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-size-xs: 0.75rem;
       --font-size-sm: 0.875rem;
       --font-size-base: 1rem;
       --font-size-lg: 1.125rem;
       --font-size-xl: 1.25rem;
       --font-size-2xl: 1.5rem;
       --font-size-3xl: 1.875rem;
       --font-size-4xl: 2.25rem;

       /* Transitions */
       --transition-fast: 0.15s ease;
       --transition-normal: 0.3s ease;
       --transition-slow: 0.5s ease;
       --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ========== Reset & Base Styles ========== */
*,
*::before,
*::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
}

html {
       scroll-behavior: smooth;
       font-size: 16px;
}

body {
       font-family: var(--font-family);
       font-size: var(--font-size-base);
       line-height: 1.6;
       color: var(--neutral-dark);
       background: linear-gradient(135deg,
                     rgba(247, 251, 253, 0.9) 0%,
                     rgba(234, 247, 251, 0.9) 100%), url("../images/marien1.jpeg") center/cover no-repeat fixed;
       min-height: 100vh;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       transition: all var(--transition-normal);
}

/* RTL Support */
[dir="rtl"] {
       text-align: right;
}

[dir="rtl"] .container {
       direction: rtl;
}

/* ========== Typography ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 0.5em;
       color: var(--neutral-dark);
}

h1 {
       font-size: var(--font-size-4xl);
}

h2 {
       font-size: var(--font-size-3xl);
}

h3 {
       font-size: var(--font-size-2xl);
}

h4 {
       font-size: var(--font-size-xl);
}

h5 {
       font-size: var(--font-size-lg);
}

h6 {
       font-size: var(--font-size-base);
}

p {
       margin-bottom: 1em;
       color: var(--neutral-muted);
}

a {
       color: var(--primary-deep-blue);
       text-decoration: none;
       transition: color var(--transition-fast);
}

a:hover {
       color: var(--primary-sea-turquoise);
}

/* ========== Layout Components ========== */
.container {
       max-width: var(--max-width);
       margin: 0 auto;
       padding: 0 var(--container-padding);
}

.section {
       margin: var(--section-spacing) 0;
}

.grid {
       display: grid;
       gap: var(--element-spacing);
}

/* ========== Header & Navigation ========== */
.header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 1rem 0;
       background: var(--card-bg);
       backdrop-filter: blur(10px);
       border-radius: var(--radius-lg);
       margin-bottom: 2rem;
       box-shadow: var(--shadow-sm);
}

.brand {
       display: flex;
       align-items: center;
       gap: 1rem;
}

.logo {
       width: 60px;
       height: 60px;
       border-radius: var(--radius-md);
       background: linear-gradient(135deg, var(--primary-sea-turquoise), var(--primary-deep-blue));
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--neutral-white);
       font-weight: 700;
       font-size: var(--font-size-xl);
       box-shadow: var(--shadow-md);
       transition: transform var(--transition-bounce);
}

.logo:hover {
       transform: scale(1.05);
}

.brand-text h1 {
       margin: 0;
       font-size: var(--font-size-xl);
       color: var(--neutral-dark);
}

.brand-text p {
       margin: 0;
       color: var(--neutral-muted);
       font-size: var(--font-size-sm);
}

.nav {
       display: flex;
       gap: 2rem;
}

.nav a {
       font-weight: 600;
       padding: 0.5rem 1rem;
       border-radius: var(--radius-full);
       transition: all var(--transition-fast);
}

.nav a:hover {
       background: var(--glass-bg);
       color: var(--primary-sea-turquoise);
}

/* ========== Hero Section ========== */
.hero {
       margin: 2rem 0;
}

.hero-card {
       background: var(--card-bg);
       border-radius: var(--radius-xl);
       padding: 2.5rem;
       box-shadow: var(--shadow-lg);
       backdrop-filter: blur(20px);
       border: 1px solid var(--glass-border);
       position: relative;
       overflow: hidden;
}

.hero-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--primary-sea-turquoise), var(--primary-deep-blue));
}

.pill {
       display: inline-block;
       padding: 0.5rem 1rem;
       background: linear-gradient(90deg, var(--primary-sea-turquoise), var(--primary-deep-blue));
       color: var(--neutral-white);
       border-radius: var(--radius-full);
       font-size: var(--font-size-sm);
       font-weight: 600;
       margin-bottom: 1rem;
       box-shadow: var(--shadow-sm);
}

.hero h2 {
       font-size: var(--font-size-3xl);
       margin-bottom: 1rem;
       background: linear-gradient(135deg, var(--primary-deep-blue), var(--primary-sea-turquoise));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
}

.lead {
       font-size: var(--font-size-lg);
       color: var(--neutral-muted);
       margin-bottom: 2rem;
       line-height: 1.7;
}

/* ========== Feature Cards ========== */
.feature {
       display: flex;
       align-items: flex-start;
       gap: 1rem;
       margin-bottom: 1.5rem;
}

.feature-icon {
       width: 50px;
       height: 50px;
       border-radius: var(--radius-md);
       background: var(--glass-bg);
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 700;
       color: var(--primary-deep-blue);
       font-size: var(--font-size-lg);
       flex-shrink: 0;
}

/* ========== Buttons ========== */
.btn {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.75rem 1.5rem;
       border: none;
       border-radius: var(--radius-md);
       font-weight: 600;
       font-size: var(--font-size-base);
       cursor: pointer;
       transition: all var(--transition-normal);
       text-decoration: none;
       position: relative;
       overflow: hidden;
}

.btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       transition: left var(--transition-slow);
}

.btn:hover::before {
       left: 100%;
}

.btn-primary {
       background: linear-gradient(135deg, var(--primary-sea-turquoise), var(--primary-deep-blue));
       color: var(--neutral-white);
       box-shadow: var(--shadow-md);
}

.btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg);
}

.btn-secondary {
       background: var(--neutral-white);
       color: var(--primary-deep-blue);
       border: 2px solid var(--primary-deep-blue);
}

.btn-secondary:hover {
       background: var(--primary-deep-blue);
       color: var(--neutral-white);
}

.btn-ghost {
       background: transparent;
       color: var(--primary-deep-blue);
       border: 2px solid var(--glass-border);
}

.btn-ghost:hover {
       background: var(--glass-bg);
       border-color: var(--primary-sea-turquoise);
}

/* ========== Service Cards ========== */
.services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
       margin-top: 2rem;
}

.service-card {
       background: var(--neutral-white);
       border-radius: var(--radius-lg);
       padding: 2rem;
       box-shadow: var(--shadow-md);
       transition: all var(--transition-normal);
       text-decoration: none;
       color: inherit;
       position: relative;
       overflow: hidden;
}

.service-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: linear-gradient(90deg, var(--primary-sea-turquoise), var(--primary-deep-blue));
       transform: scaleX(0);
       transition: transform var(--transition-normal);
}

.service-card:hover::before {
       transform: scaleX(1);
}

.service-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-xl);
}

.service-card img {
       width: 100%;
       height: 200px;
       object-fit: cover;
       border-radius: var(--radius-md);
       margin-bottom: 1.5rem;
       transition: transform var(--transition-normal);
}

.service-card:hover img {
       transform: scale(1.05);
}

.service-card h4 {
       margin-bottom: 1rem;
       color: var(--neutral-dark);
}

.service-card p {
       color: var(--neutral-muted);
       line-height: 1.6;
}

/* ========== Gallery ========== */
.gallery {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 1rem;
       margin-top: 2rem;
}

.gallery img {
       width: 100%;
       height: 200px;
       object-fit: cover;
       border-radius: var(--radius-md);
       transition: all var(--transition-normal);
       cursor: pointer;
}

.gallery img:hover {
       transform: scale(1.05);
       box-shadow: var(--shadow-lg);
}

/* ========== Contact Section ========== */
.contact-section {
       background: linear-gradient(135deg, var(--primary-deep-blue), var(--primary-sea-turquoise));
       color: var(--neutral-white);
       border-radius: var(--radius-xl);
       padding: 3rem 2rem;
       margin: 3rem 0;
       text-align: center;
       box-shadow: var(--shadow-lg);
}

.contact-section h3 {
       color: var(--neutral-white);
       margin-bottom: 2rem;
       font-size: var(--font-size-3xl);
}

.contact-buttons {
       display: flex;
       flex-wrap: wrap;
       gap: 1rem;
       justify-content: center;
       margin-top: 2rem;
}

.contact-btn {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       background: rgba(255, 255, 255, 0.1);
       color: var(--neutral-white);
       border: 2px solid rgba(255, 255, 255, 0.2);
       border-radius: var(--radius-full);
       padding: 1rem 2rem;
       font-weight: 600;
       text-decoration: none;
       transition: all var(--transition-normal);
       backdrop-filter: blur(10px);
}

.contact-btn:hover {
       background: rgba(255, 255, 255, 0.2);
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg);
}

.contact-btn svg {
       width: 24px;
       height: 24px;
}

/* ========== Sidebar ========== */
.sidebar {
       position: fixed;
       top: 0;
       left: 0;
       width: 300px;
       height: 100vh;
       background: var(--neutral-white);
       box-shadow: var(--shadow-xl);
       border-top-right-radius: var(--radius-xl);
       border-bottom-right-radius: var(--radius-xl);
       z-index: 1000;
       transform: translateX(-100%);
       transition: transform var(--transition-normal);
       padding: 2rem;
       display: flex;
       flex-direction: column;
       gap: 2rem;
       overflow-y: auto;
}

.sidebar.open {
       transform: translateX(0);
}

.sidebar-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       background: rgba(0, 0, 0, 0.5);
       z-index: 999;
       display: none;
       backdrop-filter: blur(5px);
}

.sidebar-overlay.open {
       display: block;
}

/* ========== Modal ========== */
.modal {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       z-index: 2000;
       align-items: center;
       justify-content: center;
       backdrop-filter: blur(5px);
}

.modal.open {
       display: flex;
}

.modal-content {
       background: var(--neutral-white);
       padding: 3rem;
       border-radius: var(--radius-xl);
       max-width: 500px;
       width: 90%;
       box-shadow: var(--shadow-xl);
       position: relative;
       animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
       from {
              opacity: 0;
              transform: translateY(-50px);
       }

       to {
              opacity: 1;
              transform: translateY(0);
       }
}

.close-modal {
       position: absolute;
       top: 1rem;
       right: 1.5rem;
       font-size: 2rem;
       font-weight: bold;
       cursor: pointer;
       color: var(--neutral-muted);
       transition: color var(--transition-fast);
}

.close-modal:hover {
       color: var(--primary-deep-blue);
}

/* ========== Fixed Buttons ========== */
.dash-btn,
.lang-toggle {
       position: fixed;
       top: 1.5rem;
       z-index: 1001;
       background: var(--neutral-white);
       border: none;
       border-radius: var(--radius-full);
       width: 50px;
       height: 50px;
       box-shadow: var(--shadow-md);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all var(--transition-normal);
}

.dash-btn {
       left: 1.5rem;
}

.lang-toggle {
       right: 1.5rem;
       padding: 0.5rem 1rem;
       width: auto;
       font-weight: 600;
       color: var(--primary-deep-blue);
}

.dash-btn:hover,
.lang-toggle:hover {
       background: var(--glass-bg);
       transform: translateY(-2px);
       box-shadow: var(--shadow-lg);
}

.dash-btn .dots {
       display: flex;
       flex-direction: column;
       gap: 4px;
}

.dash-btn .dot {
       width: 6px;
       height: 6px;
       background: var(--primary-deep-blue);
       border-radius: 50%;
}

/* ========== Footer ========== */
.footer {
       margin: 3rem 0;
       padding: 2rem;
       background: linear-gradient(135deg, var(--neutral-white), var(--neutral-light));
       border-radius: var(--radius-lg);
       display: flex;
       align-items: center;
       justify-content: space-between;
       box-shadow: var(--shadow-sm);
}

.footer-content h4 {
       margin-bottom: 0.5rem;
       color: var(--neutral-dark);
}

.footer-content p {
       color: var(--neutral-muted);
       margin: 0;
}

/* ========== Utility Classes ========== */
.text-center {
       text-align: center;
}

.text-left {
       text-align: left;
}

.text-right {
       text-align: right;
}

.muted {
       color: var(--neutral-muted);
}

.primary {
       color: var(--primary-deep-blue);
}

.accent {
       color: var(--primary-sea-turquoise);
}

.mb-0 {
       margin-bottom: 0;
}

.mb-1 {
       margin-bottom: 0.5rem;
}

.mb-2 {
       margin-bottom: 1rem;
}

.mb-3 {
       margin-bottom: 1.5rem;
}

.mb-4 {
       margin-bottom: 2rem;
}

.mt-0 {
       margin-top: 0;
}

.mt-1 {
       margin-top: 0.5rem;
}

.mt-2 {
       margin-top: 1rem;
}

.mt-3 {
       margin-top: 1.5rem;
}

.mt-4 {
       margin-top: 2rem;
}

.fade-in {
       animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
       from {
              opacity: 0;
              transform: translateY(20px);
       }

       to {
              opacity: 1;
              transform: translateY(0);
       }
}

/* ========== Responsive Design ========== */
@media (max-width: 768px) {
       :root {
              --container-padding: 1rem;
              --section-spacing: 2rem;
       }

       .header {
              flex-direction: column;
              gap: 1rem;
              text-align: center;
       }

       .nav {
              gap: 1rem;
       }

       .hero-card {
              padding: 1.5rem;
       }

       .hero h2 {
              font-size: var(--font-size-2xl);
       }

       .services-grid {
              grid-template-columns: 1fr;
       }

       .contact-buttons {
              flex-direction: column;
              align-items: center;
       }

       .contact-btn {
              width: 100%;
              max-width: 300px;
       }

       .sidebar {
              width: 90vw;
              padding: 1.5rem;
       }

       .dash-btn,
       .lang-toggle {
              width: 45px;
              height: 45px;
              top: 1rem;
       }

       .dash-btn {
              left: 1rem;
       }

       .lang-toggle {
              right: 1rem;
              padding: 0.25rem 0.75rem;
              font-size: var(--font-size-sm);
       }

       .footer {
              flex-direction: column;
              gap: 1rem;
              text-align: center;
       }
}

@media (max-width: 480px) {
       .hero-card {
              padding: 1rem;
       }

       .modal-content {
              padding: 2rem;
              margin: 1rem;
       }

       .contact-section {
              padding: 2rem 1rem;
       }
}

/* ========== Service Pages Styles ========== */
.service-header {
       text-align: center;
       margin: 3rem 0;
       padding: 2rem;
       background: var(--card-bg);
       border-radius: var(--radius-xl);
       box-shadow: var(--shadow-md);
}

.service-header h1 {
       font-size: var(--font-size-4xl);
       margin-bottom: 1rem;
       background: linear-gradient(135deg, var(--primary-deep-blue), var(--primary-sea-turquoise));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
}

.service-features {
       margin: 3rem 0;
       padding: 2rem;
       background: var(--neutral-white);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
}

.service-features h2 {
       margin-bottom: 1.5rem;
       color: var(--primary-deep-blue);
}

.features-list {
       list-style: none;
       padding: 0;
}

.features-list li {
       padding: 0.75rem 0;
       border-bottom: 1px solid var(--glass-border);
       position: relative;
       padding-left: 2rem;
}

.features-list li:last-child {
       border-bottom: none;
}

.features-list li::before {
       content: '✓';
       position: absolute;
       left: 0;
       top: 0.75rem;
       color: var(--primary-sea-turquoise);
       font-weight: bold;
       font-size: var(--font-size-lg);
}

.service-image {
       margin: 3rem 0;
       text-align: center;
}

.service-image img {
       max-width: 100%;
       height: auto;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-lg);
       transition: transform var(--transition-normal);
}

.service-image img:hover {
       transform: scale(1.02);
}

.service-cta {
       text-align: center;
       margin: 3rem 0;
       padding: 2rem;
       background: linear-gradient(135deg, var(--primary-deep-blue), var(--primary-sea-turquoise));
       color: var(--neutral-white);
       border-radius: var(--radius-xl);
       box-shadow: var(--shadow-lg);
}

.service-cta a {
       color: var(--neutral-white);
       text-decoration: underline;
       font-weight: 600;
}

.service-cta a:hover {
       color: var(--accent-sunset);
}

/* Skip Link for Accessibility */
.skip-link {
       position: absolute;
       top: -40px;
       left: 6px;
       background: var(--primary-deep-blue);
       color: var(--neutral-white);
       padding: 8px;
       text-decoration: none;
       border-radius: var(--radius-sm);
       z-index: 1000;
       transition: top var(--transition-fast);
}

.skip-link:focus {
       top: 6px;
}

/* ========== Print Styles ========== */
@media print {

       .dash-btn,
       .lang-toggle,
       .sidebar,
       .sidebar-overlay {
              display: none;
       }

       body {
              background: white;
       }

       .hero-card,
       .service-card {
              box-shadow: none;
              border: 1px solid #ddd;
       }
}