body {
            box-sizing: border-box;
             background-color: #164018;
             scroll-behavior: smooth
        }
        
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@300;400;500;600;700&display=swap');
        
        .font-playfair { font-family: 'Playfair Display', serif; }
        .font-inter { font-family: 'Inter', sans-serif; }
        .font-arabic { font-family: 'Cairo', 'Amiri', sans-serif; }
        
        /* Color Tokens */
        :root {
            --primary-green: #26e914;
            --green-light: #6EE7B7;
            --green-dark: #047857;
            --accent-green: #34D399;
            --green-bright: #00FF88;
            --gold: #D4AF37;
            --gold-light: #F7E98E;
            --gold-dark: #B8860B;
            --black: #000000;
            --dark-gray: #111827;
            --medium-gray: #1F2937;
            --light-gray: #374151;
            --white: #ffffff;
        }
        
        .text-green { color: var(--primary-green); }
        .bg-green { background-color: var(--primary-green); }
        .border-green { border-color: var(--primary-green); }
        .hover-green:hover { background-color: var(--green-dark); }
        
        .text-gold { color: var(--gold); }
        .bg-gold { background-color: var(--gold); }
        .border-gold { border-color: var(--gold); }


        /* scroll bar design */

        /* ===== Scrollbar Styling ===== */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar:hover {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #05ee05, #1aad1a);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #1aad1a, #5ef65e);   
    
}

        /* finish scroll bar design */

        /* style backtotop button */
        #backToTop {
            position: fixed;
            bottom: 45px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: #00ff44;
            color: black;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,255,100,0.4);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease, transform 0.3s ease;
            z-index: 999;
        }


        #backToTop:hover {
            transform: translateY(-5px);

            transform: scale(1.2);
            box-shadow: 0 0 60px rgba(0, 255, 65, 0.9);
            animation: arrow-bounce 0.7s ease infinite;
        }

        @keyframes arrow-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* finish style backtotop button */
        
         /* try desing */
        .gradient-bg {
            background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
            position: relative;
            
        }
        
        .trading-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.4;
            z-index: 0;
            background-image: 
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><linearGradient id="chartGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2314510E;stop-opacity:0.6"/><stop offset="50%" style="stop-color:%23228B22;stop-opacity:0.4"/><stop offset="100%" style="stop-color:%2314510E;stop-opacity:0.2"/></linearGradient><linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:%2314510E;stop-opacity:0.8"/><stop offset="100%" style="stop-color:%23228B22;stop-opacity:0.6"/></linearGradient></defs><rect width="1200" height="800" fill="url(%23chartGrad)"/><g stroke="url(%23lineGrad)" stroke-width="3" fill="none"><path d="M50,400 Q200,300 350,350 T650,250 T950,200 L1150,150"/><path d="M50,500 Q200,450 350,480 T650,400 T950,350 L1150,300"/><path d="M50,600 Q200,550 350,580 T650,500 T950,450 L1150,400"/><path d="M50,300 Q200,200 350,250 T650,150 T950,100 L1150,50"/></g><g fill="%2314510E" opacity="0.8"><circle cx="150" cy="380" r="5"/><circle cx="300" cy="330" r="5"/><circle cx="450" cy="270" r="5"/><circle cx="600" cy="240" r="5"/><circle cx="750" cy="210" r="5"/><circle cx="900" cy="180" r="5"/><circle cx="1050" cy="160" r="5"/></g><g stroke="%2314510E" stroke-width="1" opacity="0.5"><line x1="100" y1="0" x2="100" y2="800"/><line x1="200" y1="0" x2="200" y2="800"/><line x1="300" y1="0" x2="300" y2="800"/><line x1="400" y1="0" x2="400" y2="800"/><line x1="500" y1="0" x2="500" y2="800"/><line x1="600" y1="0" x2="600" y2="800"/><line x1="700" y1="0" x2="700" y2="800"/><line x1="800" y1="0" x2="800" y2="800"/><line x1="900" y1="0" x2="900" y2="800"/><line x1="1000" y1="0" x2="1000" y2="800"/><line x1="1100" y1="0" x2="1100" y2="800"/><line x1="0" y1="100" x2="1200" y2="100"/><line x1="0" y1="200" x2="1200" y2="200"/><line x1="0" y1="300" x2="1200" y2="300"/><line x1="0" y1="400" x2="1200" y2="400"/><line x1="0" y1="500" x2="1200" y2="500"/><line x1="0" y1="600" x2="1200" y2="600"/><line x1="0" y1="700" x2="1200" y2="700"/></g><g fill="%2314510E" opacity="0.4"><rect x="120" y="350" width="25" height="50"/><rect x="220" y="320" width="25" height="80"/><rect x="320" y="280" width="25" height="120"/><rect x="420" y="250" width="25" height="150"/><rect x="520" y="220" width="25" height="180"/><rect x="620" y="200" width="25" height="200"/><rect x="720" y="180" width="25" height="220"/><rect x="820" y="160" width="25" height="240"/><rect x="920" y="140" width="25" height="260"/><rect x="1020" y="120" width="25" height="280"/></g><text x="60" y="30" fill="%2314510E" font-size="14" opacity="0.7">TRADING PLATFORM</text><text x="60" y="50" fill="%23228B22" font-size="12" opacity="0.6">Live Market Data</text></svg>'),
                radial-gradient(circle at 20% 80%, rgba(20, 81, 14, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(34, 139, 34, 0.15) 0%, transparent 50%);
            background-size: cover, 100% 100%, 100% 100%;
            background-repeat: no-repeat;
        }
        
        .chart-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(45deg, transparent 49%, rgba(20, 81, 14, 0.05) 50%, transparent 51%),
                linear-gradient(-45deg, transparent 49%, rgba(20, 81, 14, 0.05) 50%, transparent 51%);
            background-size: 60px 60px;
            animation: chartMove 20s linear infinite;
        }
        
        @keyframes chartMove {
            0% { transform: translateX(0) translateY(0); }
            100% { transform: translateX(60px) translateY(60px); }
        }
        
        .green-gradient {
            background: linear-gradient(135deg, #14510E 0%, #228B22 50%, #14510E 100%);
            
        }
        
        .green-text {
            background: linear-gradient(135deg, #14510E 0%, #228B22 50%, #14510E 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .glass-effect {
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(20, 81, 14, 0.2);
            position: relative;
            z-index: 10;
        }
        
        .floating-animation {
            animation: floating 6s ease-in-out infinite;
        }
        
        @keyframes floating {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }
        
        .slide-in-left {
            animation: slideInLeft 0.8s ease-out;
        }
        
        .slide-in-right {
            animation: slideInRight 0.8s ease-out;
        }
        
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out;
        }
        
        @keyframes slideInLeft {
            from { transform: translateX(-100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes fadeInUp {
            from { transform: translateY(30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .pulse-green {
            animation: pulseGreen 2s infinite;
        }
        
        @keyframes pulseGreen {
            0%, 100% { box-shadow: 0 0 0 0 rgba(20, 81, 14, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(20, 81, 14, 0); }
        }
        



        .stock-ticker {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color:  #0f2a0c;
            border-top: 1px solid rgba(33, 225, 15, 0.4);
            display: flex;
            align-items: center;
            overflow: hidden;
            z-index: 100;
        }

        .ticker-content {
            display: flex;
            animation: tickerScroll 30s linear infinite;
            white-space: nowrap;
        }
        
        @keyframes tickerScroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        .ticker-item {
            margin-right: 3rem;
            font-size: 0.875rem;
            color: #fff;
        }
        
        .price-up { color: #10B981; }
        .price-down { color: #EF4444; }
        
      

        /* finish design */

        
        /* Market Ticker Animation */
        .ticker-container {
            width: 100%;
            overflow: hidden;
        }
        
        .ticker-content {
            display: flex;
            animation: ticker 30s linear infinite;
        }
        
        @keyframes ticker {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        
        /* Professional Glass Morphism Effects */
        .glass-card {
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(212, 175, 55, 0.05));
            backdrop-filter: blur(25px);
            border: 2px solid rgba(0, 255, 106, 0.3);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(0, 255, 106, 0.2),
                inset 0 1px 0 rgba(0, 255, 106, 0.2);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-5px);
            
            box-shadow: 0 12px 40px rgb(54, 199, 54),
             0 0 10px rgb(2, 145, 2);
            border-color: var(--primary-green);
        }
        .glass-card:hover h3, .glass-card:hover h4, .glass-card:hover h2 {
            color: var(--primary-green);
        }
        
        .glass-card:hover p {
            color: white;
        }
        .glass-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
            transition: left 0.6s ease;
        }
        
        .glass-card:hover::before {
            left: 100%;
        }
        
        .glass-nav {
            background: linear-gradient(145deg, rgba(0, 0, 0, 0.95), rgba(212, 175, 55, 0.03));
            backdrop-filter: blur(25px);
            border-bottom: 1px solid rgba(212, 175, 55, 0.4);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }
        
        /* Professional Interactive Button Styles */
      
        
        .btn-green {
            background: linear-gradient(135deg, var(--primary-green) 0%, var(--green-bright) 100%);
            color: black;
            padding: 1rem 2rem;
            border-radius: 16px;
            font-weight: 700;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 
                0 4px 20px var(--green-bright)
                0 0 0 0 var(--green-light);
            position: relative;
            overflow: hidden;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .btn-green::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s ease;
        }
        
        .btn-green:hover::before {
            left: 100%;
        }
        
        .btn-green:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 40px rgb(54, 199, 54);
                
        }
        
        .btn-outline-green {
            border: 2px solid var(--primary-green);
            color: var(--primary-green);
            background: transparent;
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .btn-outline-green::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: var(--primary-green);
            transition: width 0.3s ease;
            z-index: -1;
        }
        
        .btn-outline-green:hover::before {
            width: 100%;
        }
        
        .btn-outline-green:hover {
            color: black;
            transform: translateY(-2px);
            background: #00ff8440;
            transform: translateY(-3px);
            box-shadow: 0 0 20px #00ff84a8;
        }

        



        /* Section Title Styling */
        .section-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            right: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, rgb(15, 229, 15), rgb(51, 237, 51));
            border-radius: 2px;
        }
        
        [dir="ltr"] .section-title::after {
            right: auto;
            left: 0;
        }
        

        /* header style */

        html[lang="en"] nav a {
            margin-left: 18px;
            margin-right: 18px;
        } 

    
        #languageDropdown {
            border: 2px solid var(--primary-green);
            
        }
        #languageDropdown {
            position: relative;
            padding: 8px 14px;
            border: 1px solid #0f0;
            border-radius: 8px;
            background: rgba(0,0,0,0.4);
            color: white;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: 0.3s ease;
        }

        /* Glow on hover */
        #languageDropdown:hover {
            box-shadow: 0 0 12px #00ff44;
            transform: translateY(-2px);
            border-color: #00ff55;
            color: var(--primary-green);
        }
        #languageMenu {
            
            border-radius: 8px;
            
            box-shadow:0 0px 10px #00ff44;
        }
        .btn-lang {
            color: var(--primary-green);
        }
        .btn-lang:hover {
            transform: translateY(-2px);
            color: black;
            background-color: var(--primary-green);
        }


/* Basic reset for this component */
        .elite-navbar { position: fixed; top:0; left:0; right:0; z-index:999; background: #0f2a0c; backdrop-filter: blur(6px); border-bottom:1px solid rgba(33, 225, 15, 0.4); }

        .elite-inner { max-width:1400px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:20px; }

        /* left */
        .logo-link { display:flex; align-items:center; gap:12px; text-decoration:none; }
        .logo-box { width:45px; height:45px; background:#00ff44; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#002; font-size:18px; }
        .brand { color:#00ff66; font-weight:700; line-height:1; }
        .tag { color:#bcd4b5; font-size:12px; }

        /* center nav */
        .elite-nav { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; position:relative; }
        .nav-links { display:flex; gap:28px; list-style:none; align-items:center; margin:0; padding:0; white-space:nowrap; }
        .nav-item { color:#e9fce9; text-decoration:none; font-weight:500; padding:6px 4px; position:relative; transition: color .22s, transform .22s; }
        .nav-item:hover { color:#00ff66; transform:translateY(-3px); }
        .nav-item::after { content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:#00ff66; transition:width .22s; }
        .nav-item:hover::after, .nav-item.active::after { width:100%; }



/* Prevent navbar links from breaking into 2 lines */

         html[lang="en"] nav a {
    margin-left: 18px;
    margin-right: 18px;
} 

html[lang="en"] .nav-item {
    font-size: 0.90rem;
    
}


.nav-item {
    white-space: nowrap;      /* يمنع تكسير الكلمات */
    font-size: 0.95rem;       /* حجم خط مناسب للإنجليزية */
    padding: 0.4rem 0.6rem;   /* يقلل المساحة بين الروابط */
    display: inline-block;
}


        .nav-item {
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-item:hover {
    color: #32CD32; /* الأخضر الخاص بموقعك */
    transform: translateY(-2px); /* حركة للأعلى */
}

/* Underline Animation */
.nav-item::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 0%;
    height: 2px;
    background: #32CD32;
    transition: width 0.3s ease;
}

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


/* "More" dropdown (visible on tablet) */
.more-dropdown { display:none; position:relative; }
.more-btn { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.04); color:#dfffe0; padding:6px 10px; border-radius:8px; cursor:pointer; }
.more-menu { position:absolute; right:0; top:40px; background:#051409; border:1px solid rgba(255,255,255,0.04); padding:8px 6px; border-radius:8px; display:none; box-shadow:0 8px 30px rgba(0,0,0,0.6); }
.more-menu a { display:block; color:#eafde9; padding:6px 10px; text-decoration:none; }

/* right actions */
.elite-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lang-dropdown { position:relative; }
.lang-dropdown button { background:transparent; color:#e9fce9; border:1px solid rgba(255,255,255,0.04); padding:6px 10px; border-radius:8px; cursor:pointer; }
.lang-menu { position:absolute; top:40px; right:0; display:none; background:#051409; border-radius:8px; padding:6px; border:1px solid rgba(255,255,255,0.04); }
.lang-menu button { display:block; width:100%; background:transparent; border:none; color:#eafde9; padding:8px; text-align:left; cursor:pointer; }

/* GET started button */
.btn-get { background:#00ff44; color:#062; padding:10px 18px; border-radius:10px; text-decoration:none; font-weight:700; margin-left:6px; }

/* hamburger (hidden on desktop) */
.hamburger { display:none; background:transparent; border:none; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; }
.hamburger span { display:block; height:3px; background:#eafde9; margin:5px 0; border-radius:3px; transition:all .25s; }

/* mobile panel */
.mobile-panel { position:fixed; top:0; right:-100%; width:320px; height:100vh; background:linear-gradient(180deg,#071207,#07160a); z-index:10000; transition:right .32s ease; box-shadow: -20px 0 60px rgba(0,0,0,0.6); }
.mobile-panel.show { right:0; }
.mobile-inner { padding:28px; }
.mobile-close { background:transparent; border:none; color:#e9fce9; font-size:28px; float:right; }

/* mobile nav links */
.mobile-nav { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.mobile-nav a { color:#eafde9; padding:12px; background:rgba(255,255,255,0.02); border-radius:8px; text-decoration:none; }

/* mobile actions */
.mobile-actions { margin-top:24px; display:flex; gap:12px; flex-direction:column; }



/* responsive breakpoints */

/* DESKTOP: 1280px+ (default) */

/* TABLET range: <1280px and >=992px:
   hide links with .hide-on-tablet and show the More dropdown */
@media (max-width:1479px) and (min-width:992px) {
  .hide-on-tablet { display:none !important; }   /* hide lower priority links */
  .more-dropdown { display:block; }               /* show more button */
  .elite-inner { padding-left:16px; padding-right:16px; }
  .nav-links { gap:20px; }
  .btn-get { min-width:120px; text-align:center; }
}

/* MOBILE: <992px – hide center nav, show hamburger */
@media (max-width:991px) {
  .elite-nav { display:none; }
  .hamburger { display:flex; }
  .btn-get { display:none; } /* optionally hide big button on mobile */
  .elite-inner { padding-left:12px; padding-right:12px; }
}

/* small phone tiny tweaks */
@media (max-width:420px) {
  .brand { font-size:14px; }
  .tag { font-size:11px; }
  .logo-box { width:40px; height:40px; }
}

    




/* Order: left actions, then nav, then logo */
.elite-inner {
    display: flex;
    justify-content: space-between;
}

/* Left side container */
.elite-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Push Nav to center */
.elite-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Logo stays on far right */
.elite-left {
    display: flex;
    align-items: center;
}
@media (max-width: 991px) {
    .elite-nav { display: none; }  /* hide nav on mobile */

    .elite-actions {
        order: 3;     /* stay at left */
    }
    .elite-left {
        order: 1;     /* stay at right */
    }
}

.priority-high {
    
    font-weight: bolder;
    border: 1px dotted var(--primary-green);
    color: greenyellow;
    border-radius: 25%;
}

  .hamburger i {
    color: var(--primary-green);
  }     
  .hamburger i:hover {
    
    font-weight: bolder;
    font-size: 25px;
  }

 #mobileClose i {
    font-size: 25px;
 }
  #mobileClose i:hover {
    font-weight: bolder;
    font-size: 30px;
  }



  /* Button 8: Neon Border Animation */
        .btn-neon-border {
            background: var(--primary-green);
            color: black;
            height: 50px;
            border-radius: 12px;
            position: relative;
            font-weight: bolder;
            
        }

        .btn-neon-border::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, 
                #26e914, #00ff00, #26e914, #00ff00,
                #26e914, #00ff00, #26e914, #00ff00);
            background-size: 400%;
            border-radius: 12px;
            z-index: -1;
            animation: neon-border-rotate 3s linear infinite;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        @keyframes neon-border-rotate {
            0% { background-position: 0 0; }
            100% { background-position: 400% 0; }
        }

        .btn-neon-border:hover::before {
            opacity: 1;
        }

        .btn-neon-border:hover {
            box-shadow: 
                0 0 30px rgba(72, 241, 57, 0.6),
                inset 0 0 20px rgba(38, 233, 20, 0.1);
            transform: translateY(-5px);
            color: white;
            font-size: large;
        }


        /* finish header style */

  /* footer style */
        /* ===========================
   FOOTER — NEW PROFESSIONAL STYLE
   =========================== */
footer {
    background: #030a03;
    border-top: 1px solid var(--primary-green);
    padding-top: 60px;
    color: white;
    font-family: "Tajawal", sans-serif;
}
footer {
            background: #0f2a0c;
             backdrop-filter: blur(6px);
             border-top:1px solid rgba(22, 176, 8, 0.4);
        }
/* Headings */
footer h3 {
    color: white;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
    position: relative;
    
   
}

/* Neon underline under section titles */
footer h3::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: 0;
    left: 0;
    width: 50%;
    height: 3px;
    background: #00ff66;
    box-shadow: 0 0 10px #00ff66;
    border-radius: 10px;
}
footer h3:hover {
    color: var(--primary-green);
}
/* Footer Text */
footer p, footer span {
    color: #b7c3b7;
}

/* ===========================
   FOOTER LINKS
   =========================== */
.footer-item {
    color: #b7c3b7;
    font-size: 15px;
    display: block;
    transition: 0.3s;
    position: relative;
}



.footer-item:hover {
    color: #00ff66;
    text-shadow: 0 0 8px #00ff66;
}

.footer-item:hover::after {
    width: 100%;
}

/* Highlight selected (ex: Learning Rooms) */
.footer-priority {
    color: #00ff66 !important;
    font-weight: bold;
}

/* ---------------------------
   SOCIAL ICONS — PREMIUM STYLE
---------------------------- */

/* Wrapper spacing fix for RTL */
.flex.space-x-reverse > a {
    margin-left: 12px;
    margin-right: 0 !important;
}

/* Main icon style */
.social-icons-wrapper {
    display: flex;
    gap: 15px; /* adjust 10–20px depending on your design */
}


.social-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(145deg, #050f05, #0d1e0d);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,255,80,0.25);
    transition: 0.4s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    
    box-shadow:
        0 0 4px rgba(0,255,80,0.3),
        inset 0 0 6px rgba(0,255,80,0.1);
}

/* Icon itself */
.social-icon i {
    color: #d9e6d9;
    font-size: 16px;
    transition: 0.35s ease;
}

/* Neon green glow background on hover */
.social-icon:hover {
    transform: scale(1.15);
    border-color: #00ff66;
    box-shadow:
        0 0 12px #00ff66,
        0 0 25px rgba(0,255,80,0.6),
        inset 0 0 10px rgba(0,255,80,0.5);
}

/* Icon turns neon */
.social-icon:hover i {
    color: #00ff66;
    text-shadow: 0 0 8px #00ff66;
}

/* Animated glowing ring */
.social-icon::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    top: -10%;
    left: -10%;
    background: radial-gradient(circle, rgba(0,255,90,0.15), transparent 70%);
    opacity: 0;
    transition: 0.4s ease;
}

/* Glow pulse on hover */
.social-icon:hover::after {
    opacity: 1;
    transform: scale(1.2);
}

/* Magnetic effect */
.social-icon:hover {
    transform: scale(1.18) translateY(-3px);
}

/* Click effect */
.social-icon:active {
    transform: scale(1.05);
    box-shadow: 0 0 20px #00ff66;
}

/* ===========================
   CONTACT ICONS
   =========================== */
footer .contact-item i {
    color: #00ff66 !important;
    font-size: 14px;
}

/* ===========================
   BOTTOM FOOTER
   =========================== */
footer .bottom-footer {
    border-top: 1px solid rgba(0, 255, 90, 0.12);
    padding-top: 25px;
    margin-top: 40px;
}

.bottom-icons {    
    display: flex;
    gap: 15px; /* adjust 10–20px depending on your design */

}
        /* end footer style */

/*  hero-headline design: Neon Glow Classic */
        .hero-headline {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(2.5rem, 6vw, 4rem);
            line-height: 1.2;
            font-weight: 900;
            color: #ffffff;
            text-transform: uppercase;
            letter-spacing: 8px;
            margin-bottom: 4em;
            text-shadow: 
                0 0 10px #00ff41,
                0 0 20px #00ff41,
                0 0 40px #00ff41,
                0 0 80px #00ff41,
                0 0 120px #00ff41;
            animation: neon-flicker 3s ease-in-out infinite;
            cursor: pointer;
            transition: all 0.3s ease;
        }


        .hero-headline:hover {
            transform: scale(1.05);
            text-shadow: 
                0 0 20px #00ff41,
                0 0 40px #00ff41,
                0 0 80px #00ff41,
                0 0 160px #00ff41,
                0 0 200px #00ff41;
        }

        @keyframes neon-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                text-shadow: 
                    0 0 10px #00ff41,
                    0 0 20px #00ff41,
                    0 0 40px #00ff41,
                    0 0 80px #00ff41,
                    0 0 120px #00ff41;
            }
            20%, 24%, 55% {
                text-shadow: none;
            }
        }

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

/* finish hero-headline design */


/* fix clickable buttons and form input*/
.trading-bg,
.chart-lines,
body::before,
body::after {
    pointer-events: none !important;
}
section, input, select, button, .glass-card {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}


.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-box img {
    height: 36px;
    
    max-height: 36px;
    object-fit: contain;
    display: block;
    width: 36px;        /* default desktop size */
   
}

.elite-left {
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .logo-box {
        width: 40px;
        height: 40px;
    }
    .logo-box img {
        height: 33px;
        max-height: 33px;       
        width: 33px;
    }
}

@media (max-width: 640px) {
    .logo-box {
        width: 35px;
        height: 35px;
    }
    .logo-box img {
        height: 30px;
        max-height: 30px;
        width: 30px;
    }

    .logo-link {
        gap: 8px;
    }

    .brand {
        font-size: 18px !important;
    }

    .tag {
        font-size: 14px !important;
    }
}




html, body {
    overflow-x: hidden;
}




        /* Section Title Styling */
        .section-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 1.5rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            right: 0;
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-green), var(--green-light));
            border-radius: 2px;
        }
        
        [dir="ltr"] .section-title::after {
            right: auto;
            left: 0;
        }
        

        .section-title {
            font-family: 'Orbitron', sans-serif;
            font-size: 3rem;
            font-weight: 900;
            color: #00ff41;
            
            margin: 0 0 20px 0;
            text-shadow: 
                0 0 30px rgba(0, 255, 65, 0.8),
                0 0 60px rgba(0, 255, 65, 0.5);
            letter-spacing: 3px;
            animation: title-glow 3s ease-in-out infinite;
        }

        @keyframes title-glow {
            0%, 100% { 
                text-shadow: 
                    0 0 30px rgba(0, 255, 65, 0.8),
                    0 0 60px rgba(0, 255, 65, 0.5);
            }
            50% { 
                text-shadow: 
                    0 0 50px rgba(0, 255, 65, 1),
                    0 0 100px rgba(0, 255, 65, 0.7),
                    0 0 150px rgba(0, 255, 65, 0.4);
            }
        }




        
/* fix clickable buttons and form input*/
.trading-bg,
.chart-lines,
body::before,
body::after {
    pointer-events: none !important;
}
section, input, select, button, .glass-card {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}


        footer {
            background: #0f2a0c;
             backdrop-filter: blur(6px);
             border-bottom:1px solid rgba(14, 116, 4, 0.4);
        }



[dir="rtl"] .rtl\:ml-4 { margin-left: 1rem; }
[dir="ltr"] .ltr\:mr-4 { margin-right: 1rem; }

[dir="rtl"] .rtl\:ml-2 { margin-left: 0.5rem;}
[dir="ltr"] .ltr\:mr-2 { margin-right: 0.5rem; }


.ltr-number {
    direction: ltr;
    unicode-bidi: bidi-override;
    display: inline-block;
}