/* ==================== HERO BANNER ==================== */
        .hero {
            position: relative;
            height: 100vh;
            min-height: 700px;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .slide.active {
            opacity: 1;
            z-index: 1;
        }

        .slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

        }

        .slide-content {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 1100px;
            padding: 0 20px;
            animation: fadeUp 1.5s ease forwards;
        }

        .slide-content h1 {
            font-size: clamp(2.8rem, 7vw, 5.5rem);
            font-weight: 800;
            margin-bottom: 10px;
            text-shadow: 0 8px 30px rgba(0,0,0,0.6);
        }

        .slide-content .arabic {
            font-size: clamp(1.8rem, 4.5vw, 3.2rem);
            display: block;
            margin-bottom: 20px;
            opacity: 0.95;
        }

        .slide-content p {
            font-size: clamp(1.25rem, 2.5vw, 1.9rem);
            max-width: 780px;
            margin: 0 auto 40px;
            text-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }

        .cta-button {
            background: var(--blue);
            color: var(--white);
            padding: 18px 42px;
            border-radius: 50px;
            font-size: 1.3rem;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 12px 30px rgba(0,78,152,0.4);
            transition: all 0.4s ease;
			margin-top:70vh;
        }

        .cta-button:hover {
            transform: translateY(-6px) scale(1.08);
        }

        .slider-controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            display: flex;
            gap: 14px;
        }

        .dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.4s ease;
        }

        .dot.active {
            background: var(--blue);
            width: 40px;
            border-radius: 20px;
        }

        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }