.elementor-122 .elementor-element.elementor-element-3f08b2b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:-1px;--padding-bottom:-1px;--padding-left:-1px;--padding-right:-1px;}/* Start custom CSS for html, class: .elementor-element-cc8cc32 *//* ============================================
   PsyAcademy - Coming Soon Page Styles
   ============================================ */

/* ========== Root Variables ========== */
:root {
    /* Color Palette from ColorHunt */
    --cream-light: #FAF3E1;
    --cream-medium: #F5E7C6;
    --orange-primary: #FF6D1F;
    --dark: #222222;
    
    /* Additional Colors */
    --white: #ffffff;
    --whatsapp-green: #25D366;
    --overlay-dark: rgba(0, 0, 0, 0.75);
    
    /* Fonts */
    --font-primary: 'Cairo', 'Tajawal', sans-serif;
    --font-secondary: 'Tajawal', 'Cairo', sans-serif;
}

/* ========== Global Styles ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background: var(--dark);
    color: var(--white);
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    
    /* Background Image */
    background-image: 
        linear-gradient(var(--overlay-dark), var(--overlay-dark)),
        url('https://www.psyacademy.net/wp-content/uploads/2026/01/%D8%AF%D9%88%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D8%A7%D8%B9%D9%84%D8%A7%D9%85%D9%8A-%D8%A7%D9%84%D8%B4%D8%A7%D9%85%D9%84-preview.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ========== Particles Canvas ========== */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ========== Main Container ========== */
.container {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* ========== Logo ========== */
.logo-container {
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInDown 1s ease-out;
}

.logo {
    width: 220px;
    height: auto;
    max-width: 90vw;
    
    /* Make logo white using CSS filters */
    filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
    
    /* Animation */
    animation: float 3s ease-in-out infinite;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.05) translateY(-5px);
    filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(255, 109, 31, 0.8));
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* ========== Content Section ========== */
.content {
    text-align: center;
    max-width: 900px;
    width: 100%;
}

/* Main Title */
.main-title {
    font-size: 5rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 109, 31, 0.5);
    font-family: var(--font-primary);
    letter-spacing: 2px;
}

/* Subtitle */
.subtitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--orange-primary);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(255, 109, 31, 0.3);
}

/* Description */
.description {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--cream-light);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== Countdown Timer ========== */
.countdown {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.time-box {
    background: linear-gradient(135deg, rgba(255, 109, 31, 0.15), rgba(245, 231, 198, 0.1));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 109, 31, 0.3);
    border-radius: 15px;
    padding: 1.5rem 2rem;
    min-width: 120px;
    box-shadow: 0 8px 32px rgba(255, 109, 31, 0.2);
    transition: all 0.3s ease;
}

.time-box:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: var(--orange-primary);
    box-shadow: 0 12px 40px rgba(255, 109, 31, 0.4);
}

.time-value {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: var(--white);
    text-shadow: 0 0 20px rgba(255, 109, 31, 0.5);
    margin-bottom: 0.5rem;
}

.time-label {
    display: block;
    font-size: 1rem;
    color: var(--cream-medium);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========== Features Section ========== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 4rem 0 2rem;
}

.feature-item {
    background: linear-gradient(135deg, rgba(255, 109, 31, 0.1), rgba(245, 231, 198, 0.05));
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 109, 31, 0.2);
    border-radius: 15px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-10px);
    border-color: var(--orange-primary);
    box-shadow: 0 15px 40px rgba(255, 109, 31, 0.3);
}

.feature-item i {
    font-size: 3rem;
    color: var(--orange-primary);
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 109, 31, 0.5);
}

.feature-item h3 {
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.feature-item p {
    font-size: 1rem;
    color: var(--cream-light);
    line-height: 1.6;
}

/* ========== WhatsApp Button ========== */
.whatsapp-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--whatsapp-green);
    color: var(--white);
    padding: 15px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    z-index: 1000;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.whatsapp-button:hover {
    background: #20BA5A;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
}

.whatsapp-button i {
    font-size: 1.5rem;
}

.whatsapp-button span {
    font-family: var(--font-primary);
}

/* WhatsApp Button Pulse Animation */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 8px 35px rgba(37, 211, 102, 0.7);
    }
}

/* ========== Footer ========== */
.footer {
    margin-top: 4rem;
    text-align: center;
    color: var(--cream-medium);
    font-size: 0.95rem;
    padding: 2rem;
}

/* ========== Animations ========== */
@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);
    }
}

.fade-in {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.fade-in-delay {
    animation: fadeInUp 1s ease-out 0.4s both;
}

.fade-in-delay-2 {
    animation: fadeInUp 1s ease-out 0.6s both;
}

.fade-in-delay-3 {
    animation: fadeInUp 1s ease-out 0.8s both;
}

.fade-in-delay-4 {
    animation: fadeInUp 1s ease-out 1s both;
}

.fade-in-delay-5 {
    animation: fadeInUp 1s ease-out 1.2s both;
}

/* ========== Responsive Design ========== */

/* Tablet */
@media (max-width: 768px) {
    .logo {
        width: 160px;
    }
    
    .main-title {
        font-size: 3.5rem;
    }
    
    .subtitle {
        font-size: 2rem;
    }
    
    .description {
        font-size: 1.1rem;
    }
    
    .countdown {
        gap: 1rem;
    }
    
    .time-box {
        padding: 1.2rem 1.5rem;
        min-width: 100px;
    }
    
    .time-value {
        font-size: 2.5rem;
    }
    
    .features {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .whatsapp-button span {
        display: none;
    }
    
    .whatsapp-button {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .container {
        padding: 1rem;
    }
    
    .logo {
        width: 140px;
    }
    
    .main-title {
        font-size: 2.5rem;
    }
    
    .subtitle {
        font-size: 1.5rem;
    }
    
    .description {
        font-size: 1rem;
    }
    
    .time-box {
        padding: 1rem;
        min-width: 80px;
    }
    
    .time-value {
        font-size: 2rem;
    }
    
    .time-label {
        font-size: 0.85rem;
    }
    
    .feature-item {
        padding: 1.5rem;
    }
    
    .feature-item i {
        font-size: 2.5rem;
    }
    
    .feature-item h3 {
        font-size: 1.2rem;
    }
    
    .whatsapp-button {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    .whatsapp-button i {
        font-size: 1.3rem;
    }
}

/* ========== Print Styles ========== */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .whatsapp-button,
    #particles-canvas {
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS *//* ============================================
   PsyAcademy - Coming Soon Page JavaScript
   ============================================ */

// ========== Countdown Timer ==========
function initCountdown() {
    // Set target date (1 month from now)
    const targetDate = new Date();
    targetDate.setDate(targetDate.getDate() + 30);
    
    // Update countdown every second
    const countdownInterval = setInterval(() => {
        const now = new Date().getTime();
        const distance = targetDate - now;
        
        // Calculate time units
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        
        // Update DOM elements
        document.getElementById('days').textContent = String(days).padStart(2, '0');
        document.getElementById('hours').textContent = String(hours).padStart(2, '0');
        document.getElementById('minutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('seconds').textContent = String(seconds).padStart(2, '0');
        
        // Check if countdown is finished
        if (distance < 0) {
            clearInterval(countdownInterval);
            document.getElementById('countdown').innerHTML = '<h2 class="launch-message">تم الإطلاق!</h2>';
        }
    }, 1000);
}

// ========== Particles Animation ==========
class Particle {
    constructor(canvas) {
        this.canvas = canvas;
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.vx = (Math.random() - 0.5) * 0.5;
        this.vy = (Math.random() - 0.5) * 0.5;
        this.radius = Math.random() * 2 + 1;
        this.opacity = Math.random() * 0.5 + 0.2;
    }
    
    update() {
        this.x += this.vx;
        this.y += this.vy;
        
        // Wrap around edges
        if (this.x < 0) this.x = this.canvas.width;
        if (this.x > this.canvas.width) this.x = 0;
        if (this.y < 0) this.y = this.canvas.height;
        if (this.y > this.canvas.height) this.y = 0;
    }
    
    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = `rgba(255, 109, 31, ${this.opacity})`;
        ctx.fill();
    }
}

function initParticles() {
    const canvas = document.getElementById('particles-canvas');
    const ctx = canvas.getContext('2d');
    
    // Set canvas size
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    
    // Create particles
    const particles = [];
    const particleCount = 30;
    
    for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle(canvas));
    }
    
    // Animation loop
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(particle => {
            particle.update();
            particle.draw(ctx);
        });
        
        // Draw connections between nearby particles
        for (let i = 0; i < particles.length; i++) {
            for (let j = i + 1; j < particles.length; j++) {
                const dx = particles[i].x - particles[j].x;
                const dy = particles[i].y - particles[j].y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < 150) {
                    ctx.beginPath();
                    ctx.strokeStyle = `rgba(255, 109, 31, ${0.15 * (1 - distance / 150)})`;
                    ctx.lineWidth = 1;
                    ctx.moveTo(particles[i].x, particles[i].y);
                    ctx.lineTo(particles[j].x, particles[j].y);
                    ctx.stroke();
                }
            }
        }
        
        requestAnimationFrame(animate);
    }
    
    animate();
}

// ========== Parallax Effect ==========
function initParallax() {
    let ticking = false;
    
    window.addEventListener('scroll', () => {
        if (!ticking) {
            window.requestAnimationFrame(() => {
                const scrolled = window.pageYOffset;
                const parallaxElements = document.querySelectorAll('.logo, .main-title, .subtitle');
                
                parallaxElements.forEach((element, index) => {
                    const speed = 0.5 + (index * 0.1);
                    element.style.transform = `translateY(${scrolled * speed}px)`;
                });
                
                ticking = false;
            });
            
            ticking = true;
        }
    });
}

// ========== Smooth Scroll ==========
function initSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
}

// ========== Dynamic Background Gradient ==========
function initDynamicGradient() {
    let hue = 0;
    
    setInterval(() => {
        hue = (hue + 0.5) % 360;
        document.body.style.setProperty('--gradient-hue', hue);
    }, 50);
}

// ========== WhatsApp Button Animation ==========
function initWhatsAppButton() {
    const whatsappBtn = document.querySelector('.whatsapp-button');
    
    if (whatsappBtn) {
        // Add entrance animation after page load
        setTimeout(() => {
            whatsappBtn.style.animation = 'slideInRight 0.5s ease-out, pulse 2s infinite 0.5s';
        }, 1500);
        
        // Track clicks
        whatsappBtn.addEventListener('click', () => {
            console.log('WhatsApp button clicked');
        });
    }
}

// Slide in animation for WhatsApp button
const style = document.createElement('style');
style.textContent = `
    @keyframes slideInRight {
        from {
            transform: translateX(200px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
`;
document.head.appendChild(style);

// ========== Loading Screen ==========
function initLoadingScreen() {
    window.addEventListener('load', () => {
        document.body.classList.add('loaded');
    });
}

// ========== Intersection Observer for Animations ==========
function initScrollAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    }, observerOptions);
    
    // Observe all animated elements
    document.querySelectorAll('.feature-item, .time-box').forEach(el => {
        observer.observe(el);
    });
}

// ========== Initialize Everything ==========
document.addEventListener('DOMContentLoaded', () => {
    console.log('🚀 PsyAcademy - Initializing...');
    
    // Initialize all features
    initCountdown();
    initParticles();
    initParallax();
    initSmoothScroll();
    initWhatsAppButton();
    initScrollAnimations();
    initLoadingScreen();
    
    console.log('✅ PsyAcademy - Ready!');
});

// ========== Performance Optimization ==========
// Throttle function for performance
function throttle(func, delay) {
    let lastCall = 0;
    return function (...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) {
            return;
        }
        lastCall = now;
        return func(...args);
    };
}

// Debounce function for resize events
function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Optimize resize handling
window.addEventListener('resize', debounce(() => {
    console.log('Window resized');
}, 250));

// ========== Error Handling ==========
window.addEventListener('error', (e) => {
    console.error('JavaScript Error:', e.message);
});

// ========== Console Message ==========
console.log('%c🎓 PsyAcademy', 'font-size: 24px; color: #FF6D1F; font-weight: bold;');
console.log('%cأكاديمية متخصصة في الإرشاد النفسي', 'font-size: 14px; color: #FAF3E1;');
console.log('%c© 2026 PsyAcademy. All rights reserved.', 'font-size: 12px; color: #999;');/* End custom CSS */