@font-face {
            font-family: 'Balistic';
            src: url('{{ asset("fonts/Balistic.otf") }}') format('opentype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }


        :root {
            --font-heading-en: 'Jost', sans-serif;
            --font-heading-ar: 'Tajawal', sans-serif;
            --font-body-en: 'Jost', sans-serif;
            --font-body-ar: 'Tajawal', sans-serif;
        }


        [dir="ltr"] body {
            font-family: var(--font-body-en) !important;
            font-size: 20px !important;
            font-weight: 400;
            line-height: 1.8;
            letter-spacing: 0.01em;
        }


        [dir="rtl"] body {
            font-family: var(--font-body-ar) !important;
            font-size: 17px !important;
            font-weight: 400;
            line-height: 2.1;
            word-spacing: 0.08em;
            letter-spacing: 0.01em;
        }


        [dir="ltr"] .font-headline {
            font-family: var(--font-heading-en) !important;
            font-weight: normal;
            letter-spacing: 0.02em;
        }

        [dir="ltr"] .font-headline {
            font-family: var(--font-heading-en) !important;
            font-weight: normal;
            letter-spacing: 0.02em;
        }

        [dir="rtl"] .font-headline {
            font-family: var(--font-heading-ar) !important;
            font-weight: normal;
            letter-spacing: 0.02em;
            word-spacing: 0.12em;
            line-height: 1.6 !important;
        }

        [dir="ltr"] .font-body {
            font-family: var(--font-body-en) !important;
        }

        [dir="rtl"] .font-body {
            font-family: var(--font-body-ar) !important;
        }


        [dir="rtl"] .font-headline {
            font-family: var(--font-heading-ar) !important;
            font-weight: normal;
            letter-spacing: 0.02em;
            word-spacing: 0.12em;
            line-height: 1.6 !important;
        }


        [dir="ltr"] .font-headline.text-5xl,
        [dir="ltr"] .font-headline.text-6xl,
        [dir="ltr"] .font-headline.md\:text-8xl {
            font-size: clamp(2rem, 6vw, 5rem) !important;
            line-height: 1.1 !important;
        }

        [dir="ltr"] .font-headline.text-4xl,
        [dir="ltr"] .font-headline.md\:text-6xl,
        [dir="ltr"] .font-headline.md\:text-5xl {
            font-size: clamp(2.2rem, 3.5vw, 3.5rem) !important;
            line-height: 1.15 !important;
        }

        [dir="ltr"] .font-headline.text-3xl {
            font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
            line-height: 1.2 !important;
        }

        [dir="ltr"] .font-headline.text-2xl {
            font-size: clamp(1.4rem, 2.5vw, 1.8rem) !important;
            line-height: 1.25 !important;
        }

        [dir="ltr"] .font-headline.text-xl,
        [dir="ltr"] .font-headline.text-lg {
            font-size: 1.25rem !important;
            line-height: 1.3 !important;
        }


        [dir="rtl"] .font-headline.text-5xl,
        [dir="rtl"] .font-headline.text-6xl,
        [dir="rtl"] .font-headline.md\:text-8xl {
            font-size: clamp(2.8rem, 1.5vw, 1.8rem) !important;
            line-height: 1.5 !important;
        }

        [dir="rtl"] .font-headline.text-4xl,
        [dir="rtl"] .font-headline.md\:text-6xl,
        [dir="rtl"] .font-headline.md\:text-5xl {
            font-size: clamp(2.5rem, 2vw, 1.2rem) !important;
            line-height: 1.5 !important;
        }

        [dir="rtl"] .font-headline.text-3xl {
            font-size: clamp(0.7rem, 1.5vw, 1.7rem) !important;
            line-height: 1.5 !important;
        }

        [dir="rtl"] .font-headline.text-2xl {
            font-size: clamp(1.6rem, 1vw, 1.4rem) !important;
            line-height: 1.5 !important;
        }

        [dir="rtl"] .font-headline.text-xl,
        [dir="rtl"] .font-headline.text-lg {
            font-size: 1.5rem !important;
            line-height: 1.5 !important;
        }


        [dir="ltr"] .text-lg {
            font-size: 1.125rem !important;
            line-height: 1.75 !important;
        }

        [dir="ltr"] .text-xl {
            font-size: 1.25rem !important;
            line-height: 1.7 !important;
        }

        [dir="ltr"] .md\:text-2xl {
            font-size: 1rem !important;
            line-height: 1.6 !important;
        }


        [dir="rtl"] .text-lg {
            font-size: 1.05rem !important;
            line-height: 2 !important;
        }

        [dir="rtl"] .text-xl {
            font-size: 1.1rem !important;
            line-height: 1.95 !important;
        }

        [dir="rtl"] p {
            line-height: 2.1 !important;
            word-spacing: 0.08em;
        }

        [dir="rtl"] li {
            line-height: 2 !important;
        }

        [dir="ltr"] .font-english-script {
            font-family: var(--font-heading-en) !important;
            font-weight: normal;
            letter-spacing: 0.02em;
        }

        [dir="rtl"] .font-english-script {
            font-family: var(--font-heading-ar) !important;
        }


        nav {
            font-size: 15px !important;
        }

        [dir="rtl"] nav {
            font-size: 14px !important;
        }

        [dir="ltr"] nav a,
        [dir="ltr"] nav span {
            font-size: 20px !important;
        }

        [dir="rtl"] nav a,
        [dir="rtl"] nav span {
            font-size: 20px !important;
        }


        [dir="ltr"] footer .font-headline {
            font-size: 15px !important;
        }

        [dir="rtl"] footer .font-headline {
            font-size: 14px !important;
        }


        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            display: inline-block;
            vertical-align: middle;
        }

        .glass-nav {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
        }

        .hero-gradient {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.15));
        }

        .pulse-soft {
            animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse-ring {
            0% {
                box-shadow: 0 0 0 0 rgba(76, 214, 251, 0.4);
            }

            70% {
                box-shadow: 0 0 0 15px rgba(76, 214, 251, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(76, 214, 251, 0);
            }
        }

        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }

        .wave-container svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 80px;
        }