:root {
    --gold: #35B6AF;
    --gold-secondry: #D4A858;
    --gold-light: #7CC8C5;
    --gold-dark: #249A94;
    --silver: #E5E4E2;
    --silver-dark: #C0C0C0;
    --black: #111111;
    --black-light: #1A1A1A;
    --black-lighter: #2D2D2D;
    --white: #FFFFFF;
    --white-dark: #F5F5F5;
    --gradient-gold: linear-gradient(
            135deg,
            var(--gold-light) 0%,
            var(--gold) 50%,
            var(--gold-dark) 100%
    );
    --shadow-soft: 0 6px 20px rgba(53, 182, 175, 0.18);
    --shadow-gold-hover: 0 6px 20px rgba(53, 182, 175, 0.18);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--black);
    color: var(--white);
    line-height: 1.8;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(10px);
    padding: 15px 0;
    transition: all 0.3s ease;
    box-shadow: none;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--gold);
    font-size: 1.5rem;
    font-weight: 700;
}

.logo-text {
    font-size: 1rem;
}

.logo-icon img {
    width: 32px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-gold);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--gold);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--gold);
    font-weight: 600;
    padding: 8px 18px;
    border: 2px solid var(--gold);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.nav-phone:hover {
    background: var(--gradient-gold);
    color: var(--black);
}

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-btn span {
    width: 25px;
    height: 3px;
    background: var(--gold);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* القائمة الجانبية للجوال */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(17, 17, 17, 0.98);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: right 0.3s ease;
}

.mobile-menu.active {
    right: 0;
}

.close-menu {
    position: absolute;
    top: 20px;
    left: 30px;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 3rem;
    cursor: pointer;
}

.mobile-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.mobile-link:hover {
    color: var(--gold);
}

.mobile-phone {
    color: var(--gold);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 15px 30px;
    border: 2px solid var(--gold);
    border-radius: 30px;
}

.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--black) 0%, var(--black-light) 50%, var(--black-lighter) 100%);
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
}

.hero-badge {
    display: inline-block;
    padding: 10px 18px;
    background: var(--gradient-gold);
    color: var(--black);
    font-weight: 600;
    border-radius: 30px;
    margin-bottom: 30px;
    animation: fadeInDown 1s ease;
}

.hero-title {
    font-family: 'Amiri', serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease 0.2s both;
}

.gold-text {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: var(--silver);
    max-width: 600px;
    margin: 0 auto 40px;
    animation: fadeInUp 1s ease 0.4s both;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 1s ease 0.6s both;
}

.btn {
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--gradient-gold);
    color: var(--black);
}

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

.btn-secondary {
    background: transparent;
    color: var(--gold);
    border: 2px solid var(--gold);
}

.btn-secondary:hover {
    background: var(--gradient-gold);
    color: var(--black);
    transform: translateY(-3px);
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--silver);
    animation: bounce 2s infinite;
}

.scroll-arrow {
    width: 30px;
    height: 50px;
    border: 2px solid var(--gold);
    border-radius: 20px;
    position: relative;
}

.scroll-arrow::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    animation: scrollDown 2s infinite;
}

/* معلومات الاتصال السريعة */
.quick-info {
    background: var(--black-light);
    padding: 30px 0;
    border-top: 1px solid var(--black-lighter);
    border-bottom: 1px solid var(--black-lighter);
}

.quick-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.quick-info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.quick-info-item a {
    text-decoration: none;
    color: var(--white);
}

.quick-icon {
    font-size: 2rem;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quick-icon img {
    height: 50px;
    width: 50px;
}

.quick-info-item h4 {
    color: var(--gold);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.quick-info-item p {
    color: var(--silver);
    font-size: 0.95rem;
}

/* عناوين الأقسام */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    padding: 8px 25px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--gold);
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    border: 1px solid var(--gold);
}

.section-title {
    font-family: 'Amiri', serif;
    font-size: 2.8rem;
    color: var(--white);
}

.section-title span {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* قسم من نحن */
.about {
    padding: 100px 0;
    background: var(--black);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text p {
    color: var(--silver);
    font-size: 1.1rem;
    margin-bottom: 20px;
    line-height: 2;
}

.about-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-gold);
    color: var(--black);
    border-radius: 50%;
    font-weight: bold;
}

.about-feature span {
    color: var(--white);
    font-size: 1rem;
}

.about-image {
    position: relative;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.6s, transform 0.6s;
}

.image-frame {
    position: relative;
}

.image-frame::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid var(--gold);
    border-radius: 25px;
    opacity: 0.5;
}

.image-placeholder {
    background: var(--black-light);
    border-radius: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.image-placeholder img {
    width: 90%;
    height: 100%;
    border-radius: 15px;
}

.placeholder-icon {
    font-size: 4rem;
}

.placeholder-icon + span {
    color: var(--silver);
    font-size: 1.1rem;
}

/* قسم الخدمات */
.services {
    padding: 100px 0;
    background: var(--black-light);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background: var(--black);
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid var(--black-lighter);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
}

.service-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.service-icon img {
    height: 55px;
    width: 55px;
}

.service-card h3 {
    font-family: 'Amiri', serif;
    font-size: 1.6rem;
    color: var(--gold-secondry);
    margin-bottom: 15px;
}

.service-card p {
    color: var(--silver);
    line-height: 1.8;
}

/* قسم لماذا نحن */
.why-us {
    padding: 100px 0;
    background: var(--black);
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.why-us-card {
    background: var(--black-light);
    padding: 35px 25px;
    border-radius: 20px;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.why-us-card:hover {
    border-color: var(--gold);
    transform: translateY(-5px);
    box-shadow: var(--shadow-gold);
}

.why-us-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.why-us-card h3 {
    font-family: 'Amiri', serif;
    font-size: 1.4rem;
    color: var(--gold);
    margin-bottom: 15px;
}

.why-us-card p {
    color: var(--silver);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* قسم الملخص */
.summary {
    padding: 80px 0;
    background: var(--black-light);
}

.summary-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.summary-item {
    text-align: center;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.6s, transform 0.6s;
}

.summary-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.summary-item h4 {
    font-family: 'Amiri', serif;
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 25px;
}

.summary-item ul {
    list-style: none;
    text-align: right;
}

.summary-item li {
    color: var(--silver);
    padding: 8px 0;
    padding-right: 25px;
    position: relative;
}

.summary-item li::before {
    content: '-';
    position: absolute;
    right: 0;
    color: var(--gold);
}

/* قسم تواصل معنا */
.contact {
    padding: 100px 0;
    background: var(--black);
}

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

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.contact-card {
    background: var(--black-light);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--black-lighter);
    opacity: 1;
    transform: translateY(0px);
    transition: opacity 0.6s, transform 0.6s;
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.contact-card h3 {
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.contact-card p {
    color: var(--silver);
    line-height: 1.8;
}

.contact-btn {
    display: inline-block;
    padding: 10px 25px;
    background: var(--gradient-gold);
    color: var(--black);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s ease;
}

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

.contact-note {
    font-size: 0.9rem;
    color: var(--gold);
}

.contact-map {
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid var(--gold);
}

.map-container {
    width: 100%;
    height: 100%;
}

.map-container iframe {
    width: 100%;
    height: 100%;
}

/* زر واتساب العائم */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: center;
    background: #25D366;
    color: white;
    padding: 5px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
}

.whatsapp-icon {
    font-size: 1.5rem;
}

.whatsapp-icon img {
    height: 39px;
    padding: 3px;
}

/* التذييل */
.footer {
    background: var(--black-light);
    padding: 60px 0 30px;
    border-top: 1px solid var(--black-lighter);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-tagline {
    color: var(--silver);
    font-size: 1rem;
}

.footer-links h4,
.footer-contact h4 {
    color: var(--gold);
    font-size: 1.2rem;
    margin-bottom: 25px;
}

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

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--silver);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-contact p {
    color: var(--silver);
    margin-bottom: 10px;
}

.footer-contact a {
    color: var(--silver);
    text-decoration: none;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid var(--black-lighter);
}

.footer-bottom p {
    color: var(--silver);
    font-size: 0.9rem;
}

/* الحركات */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

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

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

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes scrollDown {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }
}

/* التجاوب مع الجوال */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }
}

@media (max-width: 768px) {

    .nav-links,
    .nav-phone {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 150px 0 100px;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

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

    .quick-info-grid {
        grid-template-columns: 1fr;
    }

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

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .summary-content {
        grid-template-columns: 1fr;
    }

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

    .whatsapp-text {
        display: none;
    }
}

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

    .section-title {
        font-size: 1.6rem;
    }

    .btn {
        padding: 12px 30px;
        font-size: 1rem;
    }

    .quick-info-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

#minimax-floating-ball {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 12px;
    background: #222222;
    border-radius: 12px;
    display: flex;
    align-items: center;
    color: #F8F8F8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    z-index: 9999;
    transition: all 0.3s ease;
    overflow: hidden;
    cursor: pointer;
}

#minimax-floating-ball:hover {
    transform: translateY(-2px);
    background: #383838;
}

.minimax-ball-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.minimax-logo-wave {
    width: 26px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22' viewBox='0 0 26 22' fill='none'%3E%3Cg clip-path='url(%23clip0_3442_102412)'%3E%3Cpath d='M12.8405 14.6775C12.8405 14.9897 13.0932 15.2424 13.4055 15.2424C13.7178 15.2424 13.9705 14.9897 13.9705 14.6775V2.98254C13.9705 1.88957 13.0809 1 11.9879 1C10.895 1 10.0054 1.88957 10.0054 2.98254V11.566V17.1068C10.0054 17.5773 9.62327 17.9594 9.1528 17.9594C8.68233 17.9594 8.30021 17.5773 8.30021 17.1068V8.04469C8.30021 6.95172 7.41063 6.06215 6.31767 6.06215C5.22471 6.06215 4.33513 6.95172 4.33513 8.04469V11.8855C4.33513 12.3559 3.953 12.7381 3.48254 12.7381C3.01207 12.7381 2.62994 12.3559 2.62994 11.8855V10.4936C2.62994 10.1813 2.37725 9.92861 2.06497 9.92861C1.7527 9.92861 1.5 10.1813 1.5 10.4936V11.8855C1.5 12.9784 2.38957 13.868 3.48254 13.868C4.5755 13.868 5.46508 12.9784 5.46508 11.8855V8.04469C5.46508 7.57422 5.8472 7.19209 6.31767 7.19209C6.78814 7.19209 7.17026 7.57422 7.17026 8.04469V17.1068C7.17026 18.1998 8.05984 19.0894 9.1528 19.0894C10.2458 19.0894 11.1353 18.1998 11.1353 17.1068V2.98254C11.1353 2.51207 11.5175 2.12994 11.9879 2.12994C12.4584 2.12994 12.8405 2.51207 12.8405 2.98254V14.6775Z' fill='%23F8F8F8'/%3E%3Cpath d='M23.3278 6.06215C22.2348 6.06215 21.3452 6.95172 21.3452 8.04469V15.6143C21.3452 16.0847 20.9631 16.4669 20.4926 16.4669C20.0222 16.4669 19.6401 16.0847 19.6401 15.6143V2.98254C19.6401 1.88957 18.7505 1 17.6575 1C16.5645 1 15.675 1.88957 15.675 2.98254V19.0175C15.675 19.4879 15.2928 19.8701 14.8224 19.8701C14.3519 19.8701 13.9698 19.4879 13.9698 19.0175V17.0329C13.9698 16.7206 13.7171 16.4679 13.4048 16.4679C13.0925 16.4679 12.8398 16.7206 12.8398 17.0329V19.0175C12.8398 20.1104 13.7294 21 14.8224 21C15.9153 21 16.8049 20.1104 16.8049 19.0175V2.98254C16.8049 2.51207 17.187 2.12994 17.6575 2.12994C18.128 2.12994 18.5101 2.51207 18.5101 2.98254V15.6143C18.5101 16.7072 19.3997 17.5968 20.4926 17.5968C21.5856 17.5968 22.4752 16.7072 22.4752 15.6143V8.04469C22.4752 7.57422 22.8573 7.19209 23.3278 7.19209C23.7982 7.19209 24.1804 7.57422 24.1804 8.04469V14.6775C24.1804 14.9897 24.4331 15.2424 24.7453 15.2424C25.0576 15.2424 25.3103 14.9897 25.3103 14.6775V8.04469C25.3103 6.95172 24.4207 6.06215 23.3278 6.06215Z' fill='%23F8F8F8'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3442_102412'%3E%3Crect width='25' height='22' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.minimax-ball-text {
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.minimax-close-icon {
    margin-left: 8px;
    font-size: 16px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.minimax-close-icon:hover {
    opacity: 1;
}

/* تنسيق الفيديو في الخلفية */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* لمنع ظهور أي شريط تمرير */
    background-color: #000; /* خلفية احتياطية سوداء */
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* هذا السطر هو السر في جعل الفيديو متجاوباً مثل الصور */
    z-index: 0;
}

/* التأكد من أن التراكب (Overlay) والنجوم فوق الفيديو */
.hero-overlay {
    z-index: 1;
    background: rgba(0, 0, 0, 0.5); /* تعتيم الفيديو لتوضيح الخط */
}

#starCanvas {
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    z-index: 3;
    position: relative;
}

/* تعديلات للجوال */
@media (max-width: 768px) {
    .hero {
        height: 80vh; /* تقليل الارتفاع قليلاً في الجوال ليكون مريحاً */
    }

    .hero-title {
        font-size: 2.2rem; /* تصغير الخط ليتناسب مع عرض الشاشة */
    }
}

#starCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Above overlay, below content */
    pointer-events: none; /* Allows clicking buttons through the canvas */
}

.hero-content {
    position: relative;
    z-index: 2; /* Ensures text is always on top */
}

.hero-overlay {
    z-index: 0;
}

.profile-float {
    position: fixed;
    right: 0; /* LTR default on right */
    background-color: var(--gold-secondry);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    z-index: 999;
    text-decoration: none;
    color: white;
    gap: 8px;
    transition: width 0.3s ease;
    overflow: hidden;
    width: 160px;
    height: 45px;
    white-space: nowrap;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.profile-float {
    bottom: 10px;
}

.profile-float img {
    height: 30px;
    width: 30px;
}

.profile-float-text {
    color: white;
    flex-shrink: 0;
    font-size: 13px;
}

.profile-float-icon {
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}


[dir="rtl"] .profile-float {
    right: auto;
    left: 0; /* Move to left in RTL */
}

[dir="rtl"] .profile-float {
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}