html,
body {
    scroll-behavior: smooth;
}

section,
header,
.hero,
.about,
.services,
.container {
    will-change: transform;
    backface-visibility: hidden;
}

/* نفس كود CSS الموجود في الأصل */
:root {
    --primary: #1A5F7A;
    /* أزرق داكن (ثقة واحترافية) */
    --secondary: #579C87;
    /* أخضر مائي (نمو واستدامة) */
    --accent: #FF9500;
    /* برتقالي (طاقة وإشراق) */
    --light: #F5F7FA;
    /* أبيض مائل للأزرق (نقاء) */
    --dark: #0C2D48;
    /* أزرق داكن جداً (ثبات) */
    --text: #333333;
    /* رمادي داكن (قراءة واضحة) */
    --white: #FFFFFF;
    /* أبيض */
    --shadow: rgba(26, 95, 122, 0.12);
    /* ظل أزرق */
    --gradient: linear-gradient(135deg, var(--primary), #2A7A9A);
    --accent-gradient: linear-gradient(135deg, var(--accent), #FFB84D);
    --secondary-gradient: linear-gradient(135deg, var(--secondary), #6FB8A3);
    --success: #4CAF50;
    --danger: #F44336;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--light);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Customizable Loader Colors --- */
:root {
    /* loader color variable kept minimal for wavy loader */
    --primary-color: #4A90E2;
}

/* --- Container for the new wavy loader --- */
.progress-container {
    width: 100%;
    max-width: 350px;
    height: 16px;
    margin-top: 15px;

    /* Inset from the edge of the screen by 4dp (4px) */
    padding: 0 4px;
    box-sizing: border-box;

    /* Add rounded corners to create a pill shape */
    border-radius: 50px;
    overflow: hidden;
    /* This is KEY for the pill shape */

    /* The background is now transparent */
    background-color: transparent;
}

#wavy-loader-svg {
    width: 100%;
    height: 100%;
}

/* --- Style for the animated indicator only --- */
#wavy-indicator {
    stroke: var(--primary-color);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    /* This property ensures the ends are circular */

    /* REMOVED: The drop-shadow that was causing the blue circle */
    /* filter: drop-shadow(0 0 2px rgba(74, 144, 226, 0.5)); */
}


/* --- Ensure the rest of your loader styles are present --- */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    font-family: 'Roboto', sans-serif;
    direction: ltr;
}

.loader-content {
    text-align: center;
}

.company-logo {
    width: 120px;
    height: auto;
    margin-bottom: 30px;
}

.status-container {
    margin-top: 25px;
}

.status-label {
    font-size: 0.9rem;
    color: #666;
    letter-spacing: 2px;
    font-weight: 500;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Header Styles */
header {
    background: rgba(12, 45, 72, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--white);
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    transition: all 0.3s ease;
    /* Hint to browser this element will be transformed/opacity-changed on scroll */
    will-change: transform, opacity;
    /* promote to its own composite layer for smoother transforms */
    transform: translateZ(0);
}

/* expose a header height variable so mobile menu can sit flush below the header
   we update this value when header changes state (scrolled) so the menu top
   always starts at the header bottom */
header {
    --header-height: 80px;
    /* default visual header height used elsewhere */
}

header.scrolled {
    /* Make the header noticeably taller when scrolled so it's more prominent */
    padding: 20px 0;
    background: rgba(12, 45, 72, 0.98);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25);
    --header-height: 120px;
    /* increase header height when scrolled so mobile menu top adjusts */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Custom Language Selector Styles */
/* Language selector: modern, accessible styling for native <select> + optional custom classes
   - Uses a subtle box + rounded corners to match site aesthetic
   - Works in RTL (logical padding) and has clear focus/active states
   - Leaves room for future JS-driven custom dropdowns (classes kept for compatibility)
*/
/* Enhanced Language Selector Widget - Single Display Fix */

/* Hide native select on desktop, show on mobile for better UX */
/* Header container styling to ensure proper layout */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* Language switcher base styles */
.language-switcher {
    position: relative;
    z-index: 1001;
    margin-left: auto;
    /* Push to the right by default */
}

/* Hide native select by default */
.language-switcher select,
#languageSelect {
    display: none;
}

/* Mobile styles - show custom styled selector */
@media (max-width: 768px) {

    /* Hide native select on mobile */
    #languageSelect {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Show custom selector on mobile */
    .language-selector {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
    }

    /* Show custom button on mobile */
    .language-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Adjust button size for mobile */
        padding: 8px 12px;
        font-size: 0.85rem;
        gap: 8px;
    }

    /* Adjust flag icon size for mobile */
    .flag-icon {
        width: 20px;
        height: 15px;
    }

    /* Adjust language switcher position on mobile */
    .language-switcher {
        margin-right: 15px;
        /* Space before the mobile menu button */
    }

    /* Adjust dropdown for mobile */
    .language-dropdown {
        right: -10px;
        min-width: 180px;
        max-width: calc(100vw - 40px);
    }

    /* Adjust language options for mobile */
    .language-option {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}

/* Desktop styles - show custom dropdown */
@media (min-width: 769px) {

    /* Hide native select on desktop */
    #languageSelect {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Show custom selector on desktop */
    .language-selector {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
    }

    /* Show custom button on desktop */
    .language-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Position language switcher at the end of the header */
    .language-switcher {
        margin-left: auto;
        margin-right: 20px;
    }

    /* Adjust header layout for desktop */
    .header-container {
        display: flex;
        align-items: center;
    }

    .logo {
        flex: 0 0 auto;
    }

    nav {
        flex: 1 1 auto;
        margin: 0 20px;
    }

    .language-switcher {
        order: 3;
        /* Place after the navigation */
    }

    .mobile-menu-btn {
        display: none;
        /* Hide mobile menu button on desktop */
    }
}

/* Main language button with glassmorphism effect */
.language-button {
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer effect on hover */
.language-button::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 0.6s ease;
}

.language-button:hover::before {
    left: 100%;
}

.language-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

.language-button.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Language flag with enhanced styling */
.language-flag {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.language-button:hover .language-flag {
    transform: scale(1.1);
}

/* Dropdown arrow with rotation animation */
.dropdown-arrow {
    margin-inline-start: 6px;
    color: rgba(255, 255, 255, 0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-button.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Enhanced dropdown with premium styling */
.language-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 8px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
    pointer-events: none;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Anchor dropdown to the same side as the language-switcher (RTL/LTR safe)
   This prevents overflow when the switcher is placed on the left in RTL */
.language-dropdown {
    left: auto;
    right: 0;
}
html[dir="rtl"] .language-dropdown {
    left: 0;
    right: auto;
}

/* Dropdown header with title */
.dropdown-header {
    padding: 12px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 4px;
}

.language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Enhanced language options */
.language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--dark);
    border-radius: 12px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Ripple effect on click */
.language-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(26, 95, 122, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.language-option:active::after {
    width: 200px;
    height: 200px;
}

.language-option:hover {
    background: rgba(26, 95, 122, 0.06);
    transform: translateX(-4px);
}

.language-option:focus {
    outline: none;
    background: rgba(26, 95, 122, 0.08);
    box-shadow: 0 0 0 2px rgba(26, 95, 122, 0.2);
}

.language-option.selected {
    background: rgba(26, 95, 122, 0.1);
    font-weight: 700;
    color: var(--primary);
}

/* Checkmark for selected language */
.language-option.selected::before {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.language-option.selected::after {
    content: '✓';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Language search box for enhanced UX */
.language-search {
    position: relative;
    margin: 8px;
    margin-bottom: 4px;
}

.language-search input {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.language-search input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(255, 255, 255, 0.9);
}

.language-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text);
    opacity: 0.6;
}

/* Language region divider */
.language-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    margin: 8px 16px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .language-dropdown {
        right: -40px;
        left: 8px;
        min-width: calc(100vw - 32px);
    }

    .language-button {
        padding: 6px 10px;
        font-size: 0.8rem;
        gap: 6px;
    }

    .language-option {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    /* Adjust flag icon for very small screens */
    .flag-icon {
        width: 18px;
        height: 13px;
    }

    /* In RTL make sure the dropdown offsets mirror correctly */
    html[dir="rtl"] .language-dropdown {
        left: -40px;
        right: 8px;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    .language-button,
    .language-dropdown,
    .language-option,
    .dropdown-arrow {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .language-button {
        background: var(--primary);
        border: 2px solid var(--white);
    }

    .language-dropdown {
        background: var(--white);
        border: 2px solid var(--primary);
    }

    .language-option:hover,
    .language-option:focus {
        background: var(--light);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .language-dropdown {
        background: rgba(12, 45, 72, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-header,
    .language-option {
        color: var(--white);
    }

    .language-option:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .language-option.selected {
        background: rgba(255, 255, 255, 0.15);
        color: var(--accent);
    }

    .language-search input {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: var(--white);
    }

    .language-search input:focus {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* Additional header styling for better layout */
/* header {
    position: relative;
    width: 100%;
    z-index: 1000;
} */

/* nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: var(--accent);
} */

.mobile-menu-btn {
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix for flag icon class name mismatch */
.flag-icon {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.language-button:hover .flag-icon {
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {

    /* Updated header layout for mobile */
    .header-container {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-menu-btn {
        display: flex;
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        background: none;
        border: none;
        color: var(--white);
        font-size: 24px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-menu-btn:hover {
        transform: translateY(-50%) scale(1.1);
        color: var(--accent);
    }


    /* Center logo for mobile and small screens */
    .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: 700;
        transition: all 0.3s ease;
    }

    /* Make hover keep the translate centering and add scale instead of replacing transform */
    .logo:hover {
        transform: translate(-50%, -50%) scale(1.05);
    }

    /* Language switcher swaps side based on direction */
    html[dir="rtl"] .language-switcher {
        position: absolute;
        left: 24px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 1000;
    }
    html[dir="ltr"] .language-switcher {
        position: absolute;
        right: 24px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 1000;
    }

    /* Hamburger animation */
    .mobile-menu-btn span {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--white);
        margin: 5px 0;
        transition: all 0.3s ease;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    /* Mobile navigation overlay: span full viewport and remove side gaps.
       Use inset to place the element and extend into device safe areas. */



    /* Removed large commented nav-overlay block that caused confusion during development. */

    /* For older WebKit implementations */
    @supports (padding: constant(safe-area-inset-left)) {
        nav ul {
            padding-left: constant(safe-area-inset-left);
            padding-right: constant(safe-area-inset-right);
        }
    }

    nav ul.active {
        transform: translateX(0);
    }

    nav ul li {
        margin: 0 0 30px 0;
        width: 100%;
        text-align: center;
    }

    /* Make anchors size to their content on mobile so hover/underline
       effects don't stretch full-width. Keep generous padding for touch. */
    nav ul li a {
        color: var(--white);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.18s ease, transform 0.18s ease;
        position: relative;
        padding: 14px 22px;
        /* large touch target but not full-width */
        display: inline-block;
        width: auto;
        /* do not expand to full menu width */
        border-radius: 10px;
        /* subtle rounding when hovered */
    }

    nav ul li a:hover {
        color: var(--accent);
    }

    /* Underline should match the width of the text (not full menu) */


    nav ul li a:hover::after {
        width: 60%;
        /* underline covers only the text area visually */
    }

    /* Force the primary navigation (the mobile overlay with id="primary-navigation")
   to be full-bleed and override any container/parent constraints. */
    #primary-navigation {
        position: fixed !important;
        inset: var(--header-height, 80px) 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding-top: 50px !important;
        padding-left: env(safe-area-inset-left, 0px) !important;
        padding-right: env(safe-area-inset-right, 0px) !important;
        background: rgba(12, 45, 72, 0.98);
        z-index: 9999 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        /* production: debug outline removed */
    }

    #primary-navigation li {
        width: 100%;
        text-align: center;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .section-title h2 {
        font-size: 2rem;
    }

    .vmv-container,
    .goal-content,
    .b2b-container,
    .b2c-container,
    .logistics-container {
        grid-template-columns: 1fr;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .modal-header {
        height: 150px;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .modal-details {
        grid-template-columns: 1fr;
    }

    .modal-footer {
        flex-direction: column;
        gap: 15px;
    }

    .cookie-container {
        flex-direction: column;
        text-align: center;
            /* Center logo for very small screens */
            .logo {
                left: 50% !important;
                transform: translate(-50%, -50%) !important;
                position: absolute !important;
            }
    }
}






.logo {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    transition: all 0.3s ease;
    transform-origin: center center;
}



@media (min-width: 769px) {
    .logo:hover {
        transform: scale(1.05);
    }
}

.logo i {
    color: var(--accent);
    margin-left: 10px;
    font-size: 30px;
    animation: pulse 2s infinite;
}

/* Logo image and anchor styling */
.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.logo img#site-logo,
.logo img {
    width: 48px;
    height: auto;
    /* display: block; */
    display: block;
}

/* Show site name only on large screens. Keep logo image always visible. */
.logo>a>span,
.logo>span {
    display: none;
    /* hide by default on small screens */
}

@media (min-width: 1200px) {

    .logo>a>span,
    .logo>span {
        /* display: inline-block; /* show site name on large screens */
        display: none;
        /* show site name on large screens */

        margin-inline-start: 8px;
        font-size: 24px;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-right: 25px;
    position: relative;
}

nav ul li a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px 0;
}

nav ul li a:hover {
    color: var(--accent);
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: width 0.3s ease;
}

nav ul li a:hover::after {
    width: 100%;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
    transform: scale(1.1);
    color: var(--accent);
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(12, 45, 72, 0.85), rgba(12, 45, 72, 0.7)), url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8A%3D%3D&auto=format&fit=crop&w=1770&q=80') center/cover no-repeat;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(12, 45, 72, 0.4) 100%);
    z-index: 1;
}

.hero-content {
    max-width: 800px;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: fadeInDown 1s ease;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    font-weight: 300;
    animation: fadeInUp 1s ease 0.3s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.btn {
    display: inline-block;
    background: var(--accent-gradient);
    color: var(--white);
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: fadeInUp 1s ease 0.6s both;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    z-index: -1;
}

.btn:hover::before {
    transform: translateX(0);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.5);
}

/* Floating Icons */
.floating-icon {
    position: absolute;
    opacity: 0.1;
    animation: float 15s infinite ease-in-out;
    z-index: 1;
}

.floating-icon.icon-1 {
    top: 20%;
    right: 10%;
    font-size: 4rem;
    animation-delay: 0s;
}

.floating-icon.icon-2 {
    bottom: 30%;
    left: 15%;
    font-size: 3rem;
    animation-delay: 2s;
}

.floating-icon.icon-3 {
    top: 40%;
    left: 5%;
    font-size: 3.5rem;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(5deg);
    }

    50% {
        transform: translateY(0) rotate(0deg);
    }

    75% {
        transform: translateY(20px) rotate(-5deg);
    }
}

/* Section Styles */
.section {
    padding: 100px 0;
    position: relative;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 25%;
    width: 50%;
    height: 4px;
    background: linear-gradient(to left, var(--primary), var(--accent));
    border-radius: 2px;
}

.section-title p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    color: var(--text);
}

/* About Section */
.about {
    background-color: var(--white);
}

.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
}

.about-text {
    flex: 1;
}

.about-text h3 {
    font-size: 1.8rem;
    color: var(--secondary);
    margin-bottom: 20px;
    position: relative;
    padding-right: 15px;
}

.about-text h3::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 5px;
    background: var(--accent);
    border-radius: 3px;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.about-image {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow);
    position: relative;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.05);
}

/* Why Choose Us Section */
.why-choose-us {
    background-color: var(--light);
    padding: 80px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.feature-card {
    text-align: center;
    padding: 40px 30px;
    border-radius: 25px;
    background: linear-gradient(145deg, var(--light), #FFFFFF);
    box-shadow: 0 10px 30px var(--shadow);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: var(--accent);
    border-radius: 0 0 0 100px;
    opacity: 0.1;
    z-index: 0;
}

.feature-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon {
    font-size: 3.5rem;
    color: var(--secondary);
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1);
    color: var(--accent);
}

.feature-card h3 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.feature-card p {
    position: relative;
    z-index: 1;
}

/* Vision Mission Values Section - Redesigned */
.vision-mission-values {
    background: linear-gradient(135deg, rgba(26, 95, 122, 0.05), rgba(87, 156, 135, 0.1));
    padding: 100px 0;
    position: relative;
}

.vision-mission-values::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIgZmlsbD0icmdiYSg4NywgMTU2LCAxMzUsIDAuMSkiLz48L3N2Zz4=');
    opacity: 0.3;
    z-index: 0;
}

.vmv-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.vmv-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.vmv-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.vmv-icon {
    width: 80px;
    height: 80px;
    background: var(--secondary-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(87, 156, 135, 0.3);
    transition: all 0.3s ease;
}

.vmv-card:hover .vmv-icon {
    transform: scale(1.1) rotate(10deg);
}

.vmv-card h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
}

.vmv-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
    flex-grow: 1;
}

.values-list {
    list-style: none;
    margin-top: 20px;
    text-align: right;
}

.values-list li {
    margin-bottom: 15px;
    padding-right: 35px;
    position: relative;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text);
}

.values-list li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--secondary);
    font-size: 1.2rem;
}

/* Our Goal Section - Redesigned */
.our-goal {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), rgba(255, 149, 0, 0.1));
    padding: 100px 0;
    position: relative;
}

.our-goal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsIDE0OSwgMCwgMC4xKSIvPjwvc3ZnPg==');
    opacity: 0.3;
    z-index: 0;
}

.goal-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.goal-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.goal-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.goal-icon {
    width: 80px;
    height: 80px;
    background: var(--accent-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(255, 149, 0, 0.3);
    transition: all 0.3s ease;
}

.goal-card:hover .goal-icon {
    transform: scale(1.1) rotate(10deg);
}

.goal-card h3 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.goal-card p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
}

/* B2B Services Section - Redesigned */
.b2b-services {
    background: linear-gradient(135deg, rgba(87, 156, 135, 0.05), rgba(87, 156, 135, 0.1));
    padding: 100px 0;
    position: relative;
}

.b2b-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIgZmlsbD0icmdiYSg4NywgMTU2LCAxMzUsIDAuMSkiLz48L3N2Zz4=');
    opacity: 0.3;
    z-index: 0;
}

.b2b-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.b2b-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.b2b-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.b2b-icon {
    width: 80px;
    height: 80px;
    background: var(--secondary-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(87, 156, 135, 0.3);
    transition: all 0.3s ease;
}

.b2b-card:hover .b2b-icon {
    transform: scale(1.1) rotate(10deg);
}

.b2b-card h3 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.b2b-content {
    margin-bottom: 20px;
    flex-grow: 1;
    text-align: right;
}

.b2b-content h4 {
    color: var(--secondary);
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.b2b-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 15px;
}

.b2b-benefit {
    background: rgba(87, 156, 135, 0.1);
    padding: 15px;
    border-radius: 15px;
    margin-top: auto;
    text-align: right;
}

.b2b-benefit h4 {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.b2b-benefit p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.b2b-card ul {
    list-style: none;
    margin: 15px 0;
    text-align: right;
}

.b2b-card ul li {
    margin-bottom: 10px;
    padding-right: 25px;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.b2b-card ul li::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 3px;
    color: var(--secondary);
    font-size: 0.8rem;
}

/* B2C Services Section - Redesigned */
.b2c-services {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), rgba(255, 149, 0, 0.1));
    padding: 100px 0;
    position: relative;
}

.b2c-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsIDE0OSwgMCwgMC4xKSIvPjwvc3ZnPg==');
    opacity: 0.3;
    z-index: 0;
}

.b2c-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.b2c-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.b2c-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.b2c-icon {
    width: 80px;
    height: 80px;
    background: var(--accent-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(255, 149, 0, 0.3);
    transition: all 0.3s ease;
}

.b2c-card:hover .b2c-icon {
    transform: scale(1.1) rotate(10deg);
}

.b2c-card h3 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.b2c-content {
    margin-bottom: 20px;
    flex-grow: 1;
    text-align: right;
}

.b2c-content h4 {
    color: var(--accent);
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.b2c-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 15px;
}

.b2c-benefit {
    background: rgba(255, 149, 0, 0.1);
    padding: 15px;
    border-radius: 15px;
    margin-top: auto;
    text-align: right;
}

.b2c-benefit h4 {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.b2c-benefit p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.b2c-card ul {
    list-style: none;
    margin: 15px 0;
    text-align: right;
}

.b2c-card ul li {
    margin-bottom: 10px;
    padding-right: 25px;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.b2c-card ul li::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 3px;
    color: var(--accent);
    font-size: 0.8rem;
}

/* Logistics Services Section - Redesigned */
.logistics-services {
    background: linear-gradient(135deg, rgba(26, 95, 122, 0.05), rgba(26, 95, 122, 0.1));
    padding: 100px 0;
    position: relative;
}

.logistics-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIgZmlsbD0icmdiYSgyNiwgOTUsIDEyMiwgMC4xKSIvPjwvc3ZnPg==');
    opacity: 0.3;
    z-index: 0;
}

.logistics-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.logistics-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logistics-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.logistics-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(26, 95, 122, 0.3);
    transition: all 0.3s ease;
}

.logistics-card:hover .logistics-icon {
    transform: scale(1.1) rotate(10deg);
}

.logistics-card h3 {
    font-size: 1.6rem;
    color: var(--primary);
    margin-bottom: 15px;
    font-weight: 700;
}

.logistics-content {
    margin-bottom: 20px;
    flex-grow: 1;
    text-align: right;
}

.logistics-content h4 {
    color: var(--primary);
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.logistics-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 15px;
}

.logistics-benefit {
    background: rgba(26, 95, 122, 0.1);
    padding: 15px;
    border-radius: 15px;
    margin-top: auto;
    text-align: right;
}

.logistics-benefit h4 {
    color: var(--primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.logistics-benefit p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}

.logistics-card ul {
    list-style: none;
    margin: 15px 0;
    text-align: right;
}

.logistics-card ul li {
    margin-bottom: 10px;
    padding-right: 25px;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
}

.logistics-card ul li::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 3px;
    color: var(--primary);
    font-size: 0.8rem;
}

/* Marketing Section - Redesigned */
.marketing {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.03), rgba(255, 149, 0, 0.07));
    padding: 100px 0;
    position: relative;
}

.marketing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsIDE0OSwgMCwgMC4wNSkiLz48L3N2Zz4=');
    opacity: 0.3;
    z-index: 0;
}

.marketing-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 60px;
    position: relative;
    z-index: 1;
}

.marketing-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.marketing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.marketing-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.marketing-card.b2b .marketing-icon {
    background: var(--secondary-gradient);
    color: var(--white);
    box-shadow: 0 10px 25px rgba(87, 156, 135, 0.3);
}

.marketing-card.b2c .marketing-icon {
    background: var(--accent-gradient);
    color: var(--white);
    box-shadow: 0 10px 25px rgba(255, 149, 0, 0.3);
}

.marketing-card:hover .marketing-icon {
    transform: scale(1.1) rotate(10deg);
}

.marketing-card h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 700;
}

.marketing-card p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 25px;
    font-weight: 500;
}

.marketing-card ul {
    list-style: none;
    text-align: right;
    width: 100%;
}

.marketing-card ul li {
    margin-bottom: 15px;
    padding-right: 35px;
    position: relative;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text);
}

.marketing-card.b2b ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--secondary);
    font-size: 1.2rem;
}

.marketing-card.b2c ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 2px;
    color: var(--accent);
    font-size: 1.2rem;
}

/* Summary Section */
.summary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--white);
    padding: 100px 0;
    position: relative;
}

.summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(12, 45, 72, 0.4) 100%);
    z-index: 1;
}

.summary-container {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.summary h2 {
    font-size: 2.8rem;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

.summary h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 25%;
    width: 50%;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
}

.summary-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.summary-point {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.summary-point:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.summary-icon {
    width: 80px;
    height: 80px;
    background: var(--accent-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(255, 149, 0, 0.3);
    transition: all 0.3s ease;
}

.summary-point:hover .summary-icon {
    transform: scale(1.1) rotate(10deg);
}

.summary-point h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--accent);
    font-weight: 700;
}

.summary-point p {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Slogan Section */
.slogan {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), rgba(255, 149, 0, 0.1));
    padding: 80px 0;
    text-align: center;
    position: relative;
}

.slogan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIgZmlsbD0icmdiYSgyNTUsIDE0OSwgMCwgMC4xKSIvPjwvc3ZnPg==');
    opacity: 0.3;
    z-index: 0;
}

.slogan-container {
    position: relative;
    z-index: 1;
}

.slogan h2 {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 800;
}

.slogan p {
    font-size: 1.8rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 10px;
}

.slogan .slogan-text {
    font-size: 1.5rem;
    color: var(--secondary);
    font-weight: 500;
}

/* Stats Section */
.stats {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(12, 45, 72, 0.95), rgba(12, 45, 72, 0.85));
    color: var(--white);
    position: relative;
}

.stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, rgba(12, 45, 72, 0.4) 100%);
    z-index: 1;
}

.stats-container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    text-align: center;
}

.stat-item {
    padding: 20px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stat-number {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 10px;
    color: var(--accent);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.stat-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Testimonials Section */
.testimonials {
    background-color: var(--light);
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.testimonial-card {
    background: var(--white);
    border-radius: 25px;
    padding: 35px 30px;
    box-shadow: 0 10px 30px var(--shadow);
    position: relative;
    transition: all 0.4s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.testimonial-card:hover {
    transform: translateY(-10px) rotateY(5deg);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.testimonial-card::before {
    content: '\f10d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 25px;
    left: 25px;
    font-size: 2.5rem;
    color: rgba(26, 95, 122, 0.1);
}

.testimonial-text {
    margin-bottom: 25px;
    font-style: italic;
    color: var(--text);
    line-height: 1.8;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.author-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-left: 20px;
    object-fit: cover;
    border: 3px solid var(--light);
    transition: all 0.3s ease;
}

.testimonial-card:hover .author-image {
    transform: scale(1.1);
    border-color: var(--accent);
}

.author-info h4 {
    color: var(--primary);
    margin-bottom: 5px;
    font-weight: 700;
}

.author-info p {
    color: var(--text);
    font-size: 0.9rem;
}

.rating {
    color: var(--accent);
    margin-bottom: 15px;
}

/* Contact Section */
.contact {
    background-color: var(--white);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 50px;
}

.contact-form {
    background: var(--light);
    padding: 45px;
    border-radius: 25px;
    box-shadow: 0 10px 30px var(--shadow);
    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0.05;
    z-index: 0;
}

.form-group {
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.form-group label {
    display: block;
    margin-bottom: 10px;
    color: var(--primary);
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid transparent;
    border-radius: 15px;
    font-family: 'Tajawal', sans-serif;
    font-size: 1rem;
    background: var(--white);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.2);
    transform: translateY(-3px);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: var(--light);
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.contact-item:hover::before {
    transform: scaleY(1);
}

.contact-item:hover {
    transform: translateX(-10px);
    box-shadow: 0 5px 20px var(--shadow);
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--accent-gradient);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    font-size: 1.3rem;
    box-shadow: 0 5px 15px rgba(255, 149, 0, 0.3);
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon {
    transform: scale(1.1) rotate(10deg);
}

.contact-text h3 {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 8px;
    font-weight: 700;
}

.contact-text p {
    color: var(--text);
    line-height: 1.6;
}

/* Footer */
footer {
    background: linear-gradient(135deg, var(--dark), var(--primary));
    color: var(--white);
    padding: 70px 0 20px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: var(--accent-gradient);
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
}

.footer-col h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* use logical inline start so the accent bar sits at the start of the heading
       in LTR (left) and at the start in RTL (right) automatically */
    inset-inline-start: 0;
    width: 50px;
    height: 3px;
    background: var(--accent);
}

.footer-col p {
    margin-bottom: 20px;
    line-height: 1.8;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
    position: relative;
    /* use logical padding so spacing works in both directions: space between
       the pseudo-marker (at the start) and the link text */
    padding-inline-start: 15px;
}

.footer-links li::before {
    content: '\f053';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    /* place marker at the inline start (left in LTR, right in RTL) */
    inset-inline-start: 0;
    top: 5px;
    font-size: 0.8rem;
    color: var(--accent);
    transition: all 0.3s ease;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--accent);
    /* default assumes LTR: move the link slightly toward the marker */
    transform: translateX(5px);
}

.footer-links li:hover::before {
    /* default LTR: move marker slightly toward the link */
    transform: translateX(-5px);
}

/* RTL overrides: flip the hover directions so movements feel natural */
:root:dir(rtl) .footer-links a:hover {
    transform: translateX(-5px);
}

:root:dir(rtl) .footer-links li:hover::before {
    transform: translateX(5px);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--secondary);
    color: var(--white);
    transform: translateY(-5px);
}

.newsletter-form {
    display: flex;
    margin-top: 15px;
    gap: 10px;
}

.newsletter-form input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 25px;
    font-family: 'Tajawal', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    backdrop-filter: blur(5px);
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form button {
    padding: 12px 20px;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    background: var(--white);
    color: var(--accent);
    transform: translateY(-3px);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--white);
    border-radius: 20px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    transform: scale(0.7);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.modal.active .modal-content {
    transform: scale(1);
}

.modal-header {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

.modal-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px 20px 0 0;
}

.modal-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--secondary);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    z-index: 2;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    color: var(--primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.close-modal:hover {
    background: var(--accent);
    color: var(--white);
    transform: rotate(90deg);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
    border-radius: 0 0 20px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary) var(--light);
}

.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: var(--light);
    border-radius: 10px;
    margin: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--secondary);
    border-radius: 10px;
    border: 2px solid var(--light);
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.modal-category {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
    display: inline-block;
    background: rgba(87, 156, 135, 0.1);
    padding: 6px 15px;
    border-radius: 20px;
}

.modal-title {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 20px;
    font-weight: 800;
}

.modal-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text);
    margin-bottom: 30px;
}

.modal-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.detail-item {
    background: var(--light);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.detail-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--shadow);
}

.detail-item i {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.detail-item:hover i {
    color: var(--accent);
    transform: scale(1.1);
}

.detail-item h4 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 5px;
}

.detail-item p {
    color: var(--text);
    font-size: 0.9rem;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: var(--light);
    border-radius: 0 0 20px 20px;
}

.modal-price {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent);
}

.modal-contact {
    background: var(--accent-gradient);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-contact:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.5);
}

/* Policy Modal */
.policy-modal .modal-header {
    background: var(--gradient);
    color: var(--white);
    padding: 25px 30px;
    border-radius: 20px 20px 0 0;
    position: relative;
    height: auto;
}

.policy-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

.policy-section {
    margin-bottom: 25px;
}

.policy-section h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.policy-section p {
    color: var(--text);
    line-height: 1.8;
    margin-bottom: 15px;
}

.policy-section ul {
    color: var(--text);
    line-height: 1.8;
    margin-right: 20px;
    margin-bottom: 15px;
}

.policy-section li {
    margin-bottom: 8px;
}

.policy-footer {
    display: flex;
    justify-content: center;
    padding: 20px 30px;
    background: var(--light);
    border-radius: 0 0 20px 20px;
}

.policy-close {
    background: var(--accent-gradient);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
}

.policy-close:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.5);
}

/* Cookie Consent Banner */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--dark);
    color: var(--white);
    padding: 20px 0;
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
}

.cookie-consent.show {
    transform: translateY(0);
}

.cookie-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.cookie-text {
    flex: 1;
    min-width: 250px;
}

.cookie-text p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cookie-text a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-accept {
    background: var(--accent);
    color: var(--white);
}

.cookie-accept:hover {
    background: var(--white);
    color: var(--accent);
}

.cookie-decline {
    background: transparent;
    color: var(--white);
    border: 1px solid var(--white);
}

.cookie-decline:hover {
    background: var(--white);
    color: var(--dark);
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--dark);
    color: var(--white);
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast.success {
    background: var(--success);
}

.toast.error {
    background: var(--danger);
}

.toast i {
    font-size: 1.2rem;
}

/* Scroll to top button */
.scroll-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 55px;
    height: 55px;
    background: var(--secondary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.scroll-top.active {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    background: var(--accent);
    color: var(--white);
    transform: translateY(-5px);
}

/* Responsive Design - Enhanced Version */

/* Large Desktops - 1200px and up */
@media (min-width: 1200px) {
    .hero h1 {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .container {
        max-width: 1140px;
    }
}

/* Desktops and Tablets - 992px and down */
@media (max-width: 992px) {
    .hero h1 {
        font-size: clamp(2.2rem, 4vw, 2.8rem);
    }

    .about-content {
        flex-direction: column;
        gap: 2rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .modal-content {
        max-width: 90%;
        margin: 2rem auto;
    }

    .modal-header {
        height: 200px;
    }

    .marketing-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .summary-points {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Improve touch targets */
    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    /* Improve navigation spacing */
    nav ul li {
        margin: 0 0 20px 0;
    }
}

/* Mobile Phones - 576px and down */
@media (max-width: 576px) {

    /* Container adjustments */
    .container {
        padding: 0 15px;
    }

    /* Fluid typography */
    .hero h1 {
        font-size: clamp(1.5rem, 6vw, 1.8rem);
        line-height: 1.2;
    }

    .hero p {
        font-size: clamp(0.9rem, 3vw, 1rem);
        line-height: 1.5;
    }

    .btn {
        padding: 12px 25px;
        font-size: clamp(0.9rem, 2.5vw, 1rem);
        min-height: 44px;
        width: 100%;
        max-width: 300px;
    }

    .section-title h2 {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
    }

    .about-text h3 {
        font-size: clamp(1.3rem, 4vw, 1.5rem);
    }

    .contact-form {
        padding: 30px 20px;
    }

    .slogan h2 {
        font-size: clamp(1.6rem, 5vw, 2rem);
    }

    .slogan p {
        font-size: clamp(1.2rem, 4vw, 1.5rem);
    }

    .slogan .slogan-text {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    .newsletter-form {
        flex-direction: column;
        gap: 1rem;
    }

    .newsletter-form input {
        width: 100%;
    }

    .modal-body {
        padding: 20px;
    }

    .modal-footer {
        padding: 15px 20px;
    }

    .modal-details {
        gap: 15px;
    }

    .detail-item {
        padding: 15px;
    }

    /* Improve image responsiveness */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Ensure readable text */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* Small Mobile Phones - 375px and down */
@media (max-width: 375px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 10px 20px;
    }

    .modal-content {
        max-width: 95%;
        margin: 1rem auto;
    }

    .modal-header {
        height: 120px;
    }

    .modal-title {
        font-size: 1.2rem;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    nav ul {
        padding-top: 20px;
        height: calc(100vh - var(--header-height, 80px));
        overflow-y: auto;
    }

    nav ul li {
        margin: 0 0 15px 0;
    }

    .hero {
        min-height: 70vh;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Adjust any background images or icons for high DPI displays */
    .icon {
        background-size: contain;
    }
}

/* Print styles */
/* @media print {
    nav, .mobile-menu-btn, .modal, .cookie-container {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    .section {
        page-break-inside: avoid;
    }
} */

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

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

/* Performance hints for scroll-animated elements */
.scroll-top {
    will-change: transform, opacity;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform: translateZ(0);
}

.floating-icon,
.stat-number {
    will-change: transform, opacity;
}



















/* the stable and official css code for navigation */

/* A more robust reset to prevent browser inconsistencies */
/* *,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

/* body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #f4f4f4;
    color: #ffffff;
    overflow-x: hidden;
} */

/* --- Header & Navigation Container --- */
.main-header {
    /* background-color: #fff; */
    background: rgba(12, 45, 72, 0.98);
    position: fixed;
    padding: 1.5rem 2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* This is crucial for positioning the mobile nav menu */
    position: relative;


    /* --- STICKY NAVIGATION STYLES --- */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;

    /* --- ANIMATION TRANSITION --- */
    /* This makes the change from large to small smooth */
    transition: all 0.3s ease-in-out;
}


/* --- SCROLLED STATE (smaller header) --- */
/* This class is added by JavaScript when you scroll down */
.main-header.scrolled {
    /* Increase padding for a larger header when scrolled */
    padding: 1.0rem 2rem;
    /* Larger padding */
}

.logo {
    /* Initial (large) state */
    font-size: 1.8rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    transition: font-size 0.3s ease-in-out;
}

/* --- SCROLLED STATE for the logo --- */
.main-header.scrolled .logo {
    font-size: 1.5rem;
    /* Smaller font size */
}


.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

/* --- Mobile Navigation (Default Styles) --- */
/* These styles apply to all screens, then are overridden by the media query for desktop */
.nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    /* Ensure the button is always on top */
    z-index: 1000;
}

/* Hamburger Icon Styles */
.hamburger {
    display: block;
    width: 25px;
    height: 3px;
    /* background-color: #333; */
    background-color: #ffffff;

    position: relative;
    /* Transition for the middle line disappearing */
    transition: background-color 0.3s ease-in-out;
}

/* Top and bottom lines of the hamburger */
.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background-color: #333; */
    background-color: #ffffff;

    /* Transition for the rotation into an 'X' */
    transition: transform 0.3s ease-in-out;
}

.hamburger::before {
    transform: translateY(-8px);
}

.hamburger::after {
    transform: translateY(8px);
}

/* --- State for the OPEN hamburger menu (turns it into an 'X') --- */
.nav-toggle.open .hamburger {
    /* Hide the middle line */
    background-color: transparent;
}

.nav-toggle.open .hamburger::before {
    transform: rotate(45deg);
}

.nav-toggle.open .hamburger::after {
    transform: rotate(-45deg);
}

/* The navigation menu itself */
.main-nav {
    position: absolute;
    top: 100%;
    /* Position it right below the header */
    left: 0;
    width: 100%;
    /* background-color: #fff; */
    background: rgba(12, 45, 72, 0.98);

    /* Hide it by default by moving it up */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    /* Smooth transition for sliding in/out */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* --- State for the OPEN navigation menu --- */
.main-nav.open {
    /* Show it by moving it down to its natural position */
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
}

.nav-links li {
    margin: 1rem 0;
}




/* --- Desktop Navigation (Media Query) --- */
/* These styles ONLY apply when the screen is 768px or wider */
@media (min-width: 768px) {

    /* Hide the hamburger button on desktop */
    .nav-toggle {
        display: none;
    }

    /* Reset the navigation menu for desktop layout */
    .main-nav {
        position: static;
        /* Take it out of the absolute positioning flow */
        transform: translateY(0);
        /* Always visible */
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        background-color: transparent;
    }

    /* Arrange links horizontally */
    .nav-links {
        flex-direction: row;
        padding: 0;
    }

    .nav-links li {
        margin: 0 0 0 1.5rem;
        /* Add space to the left of each link */
    }






}