document.addEventListener("DOMContentLoaded", () => {

    /* ============================================================
       1. ORIGINAL HERO INTRO — PRESERVED EXACTLY (Design 1)
       ============================================================ */
    const heroCards = document.querySelectorAll('.hero-content .glass-card');
    document.addEventListener('mousemove', (e) => {
        const x = (e.clientX / window.innerWidth - 0.5) * 2;
        const y = (e.clientY / window.innerHeight - 0.5) * 2;
        heroCards.forEach(card => {
            const speed = parseFloat(card.getAttribute('data-speed'));
            if (typeof gsap !== 'undefined') {
                gsap.to(card, {
                    x: x * 80 * speed,
                    y: y * 80 * speed,
                    duration: 0.8,
                    ease: 'power2.out',
                    overwrite: 'auto'
                });
            } else {
                card.style.transform = `translate(${x * 100 * speed}px, ${y * 100 * speed}px)`;
            }
        });
    });

    const canvas = document.getElementById('particle-canvas');
    const ctx = canvas.getContext('2d');
    let width, height;
    function resize() { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; }
    window.addEventListener('resize', resize);
    resize();

    const textCanvas = document.getElementById('text-canvas');
    const textCtx = textCanvas.getContext('2d', { willReadFrequently: true });
    let logoPoints = [];

    function extractLogoPoints() {
        textCanvas.width = width; textCanvas.height = height;
        textCtx.clearRect(0, 0, width, height);
        textCtx.fillStyle = 'white';
        textCtx.textAlign = 'center';
        textCtx.textBaseline = 'middle';
        let fontSize = Math.min(width * 0.25, 300);
        textCtx.font = `bold ${fontSize}px Inter, sans-serif`;
        textCtx.fillText('DrD Fit', width / 2, height / 2);
        const imageData = textCtx.getImageData(0, 0, width, height).data;
        const points = [];
        for (let y = 0; y < height; y += 2) {
            for (let x = 0; x < width; x += 2) {
                if (imageData[(y * width + x) * 4 + 3] > 128) points.push({ x, y });
            }
        }
        logoPoints = points;
    }
    setTimeout(extractLogoPoints, 100);
    window.addEventListener('resize', () => setTimeout(extractLogoPoints, 100));

    let particles = [];
    class Particle {
        constructor(x, y) {
            this.x = x || width / 2; this.y = y || height / 2;
            this.vx = (Math.random() - 0.5) * 3; this.vy = (Math.random() - 0.5) * 3;
            this.size = Math.random() * 1.5 + 0.5; this.baseAlpha = Math.random() * 0.8 + 0.2;
            this.color = Math.random() > 0.5 ? '6, 182, 212' : '45, 212, 191';
            this.targetX = this.x; this.targetY = this.y; this.isMorphing = false;
        }
        update(ph) {
            if (this.isMorphing) {
                this.vx = (this.targetX - this.x) * 0.08;
                this.vy = (this.targetY - this.y) * 0.08;
                this.x += this.vx; this.y += this.vy;
            } else {
                this.x += this.vx; this.y += this.vy;
                if (ph >= 6) {
                    this.y += Math.sin(this.x * 0.01 + Date.now() * 0.001) * 0.3;
                    if (this.x < 0) this.x = width; if (this.x > width) this.x = 0;
                    if (this.y < 0) this.y = height; if (this.y > height) this.y = 0;
                }
            }
        }
        draw() {
            ctx.fillStyle = `rgba(${this.color}, ${this.baseAlpha})`;
            ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill();
        }
    }

let phase = 0,
    startTime = Date.now(),
    ecgProgress = 0,
    pulseRadius = 0,
    introRafId,
    particlesPaused = false;
    function morphToDNA() {
        particles.forEach((p, i) => { p.isMorphing = true; let a = i * 0.2, r = Math.min(width, height) * 0.15, s = i % 2 === 0 ? 1 : -1; p.targetX = width / 2 + Math.cos(a) * r * s; p.targetY = height / 2 + ((i % 150) - 75) * 4 + Math.sin(a) * r * 0.3; });
    }
    function morphToHeart() {
        particles.forEach((p, i) => { p.isMorphing = true; let t = (i / particles.length) * Math.PI * 2, sc = Math.min(width, height) * 0.015; p.targetX = width / 2 + 16 * Math.pow(Math.sin(t), 3) * sc; p.targetY = height / 2 + (-(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))) * sc; });
    }
    function morphToLogo() {
        if (!logoPoints.length) return;
        while (particles.length < logoPoints.length) particles.push(new Particle(width / 2 + (Math.random() - 0.5) * 100, height / 2 + (Math.random() - 0.5) * 100));
        particles.forEach((p, i) => { p.isMorphing = true; let pt = logoPoints[i % logoPoints.length]; p.targetX = pt.x; p.targetY = pt.y; p.size = 1.2; });
    }
    function dissolveLogo() {
        particles.forEach(p => { p.isMorphing = false; let a = Math.random() * Math.PI * 2, sp = (Math.random() * 3 + 1) * 0.7; p.vx = Math.cos(a) * sp; p.vy = Math.sin(a) * sp; });
        setTimeout(() => { document.body.classList.add('hero-active'); phase = 6; initLuxury(); }, 400);
        
    }
    function drawECGLine() {
        if (ecgProgress > width) return;
        ctx.strokeStyle = 'rgba(45, 212, 191, 0.8)'; ctx.lineWidth = 3; ctx.shadowBlur = 15; ctx.shadowColor = 'rgba(45, 212, 191, 1)'; ctx.beginPath();
        let sy = height / 2; ctx.moveTo(0, sy);
        for (let x = 0; x < ecgProgress; x += 5) {
            let y = sy, lx = (x + width / 2) % 600;
            if (lx > 280 && lx < 300) y -= 70; else if (lx >= 300 && lx < 315) y += 100; else if (lx >= 315 && lx < 340) y -= 40;
            y += (Math.random() - 0.5) * 2; ctx.lineTo(x, y);
            if (x > ecgProgress - 25 && particles.length < 2500) particles.push(new Particle(x, y));
        }
        ctx.stroke(); ctx.shadowBlur = 0; ecgProgress += 25;
    }
    function drawPulse() {
        if (pulseRadius > width) return;
        ctx.beginPath(); ctx.arc(width / 2, height / 2, pulseRadius, 0, Math.PI * 2);
        ctx.strokeStyle = `rgba(6, 182, 212, ${Math.max(0, 1 - pulseRadius / 300)})`; ctx.lineWidth = 4; ctx.stroke(); pulseRadius += 8;
    }
    function animate() {
        if (particlesPaused && phase === 6) {
    introRafId = requestAnimationFrame(animate);
    return;
}
        let elapsed = Date.now() - startTime;
        if (phase < 6) { ctx.fillStyle = 'rgba(15, 23, 42, 0.2)'; ctx.fillRect(0, 0, width, height); }
        else ctx.clearRect(0, 0, width, height);
        if (phase === 0 && elapsed > 200) { for (let i = 0; i < 10; i++) particles.push(new Particle(width / 2, height / 2)); phase = 1; }
        else if (phase === 1 && elapsed > 800) phase = 2;
        else if (phase === 2 && elapsed > 2000) { morphToDNA(); phase = 3; }
        else if (phase === 3 && elapsed > 3500) { morphToHeart(); phase = 4; }
        else if (phase === 4 && elapsed > 5000) { morphToLogo(); phase = 5; }
        else if (phase === 5 && elapsed > 7000) dissolveLogo();
        if (phase === 1 || phase === 2) drawPulse();
        if (phase === 2) drawECGLine();
        particles.forEach(p => { p.update(phase); p.draw(); });
        introRafId = requestAnimationFrame(animate);
    }
    animate();
    const hero = document.getElementById("hero-section");

const observer = new IntersectionObserver(([entry]) => {

    if (phase !== 6) return;

    particlesPaused = !entry.isIntersecting;

}, {
    threshold: 0.05
});

observer.observe(hero);

    /* ============================================================
       2. FULL SITE — GSAP + LENIS SMOOTH SCROLLING
       ============================================================ */
    let luxuryInitialized = false;
    function initLuxury() {
        if (luxuryInitialized) return;
        luxuryInitialized = true;
        initLenis();
        initCursor();
        initMobileNav();
        initFAQ();
        initCardGlows();
        initTestimonialSlider();
        initContactForm();
        initMagneticElements();
        if (typeof gsap !== 'undefined') initGSAP();
    }

    /* ── Lenis Smooth Scroll ── */
    let lenis;
    function initLenis() {
        if (typeof Lenis === 'undefined') return;
        lenis = new Lenis({
            duration: 1.2,
            easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
            orientation: 'vertical',
            gestureOrientation: 'vertical',
            smoothWheel: true,
            smoothTouch: false,
            wheelMultiplier: 1.0,
            touchMultiplier: 1.2,
            infinite: false,
        });

        function raf(time) {
            lenis.raf(time);
            requestAnimationFrame(raf);
        }
        requestAnimationFrame(raf);

        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                const href = this.getAttribute('href');
                if (href === '#') return;
                const target = document.querySelector(href);
                if (target) {
                    e.preventDefault();
                    
                    // Close sidebar/hamburger menu if open
                    const toggle = document.getElementById('navToggle');
                    const sidebar = document.getElementById('sidebarMenu');
                    if (toggle && sidebar && sidebar.classList.contains('open')) {
                        toggle.classList.remove('open');
                        sidebar.classList.remove('open');
                        toggle.setAttribute('aria-expanded', 'false');
                        sidebar.setAttribute('aria-hidden', 'true');
                        if (lenis) lenis.start();
                    }
                    
                    lenis.scrollTo(target, {
                        offset: -80,
                        duration: 1.4,
                        immediate: false
                    });
                }
            });
        });
    }

    /* ── Custom Cursor ── */
    function initCursor() {
        const cur = document.getElementById('cursor');
        if (!cur || window.innerWidth < 769 || matchMedia('(pointer:coarse)').matches) return;
        const dot = cur.querySelector('.c-dot');
        const ring = cur.querySelector('.c-ring');
        let mx = 0, my = 0, rx = 0, ry = 0;

        document.addEventListener('mousemove', e => {
            mx = e.clientX; my = e.clientY;
            dot.style.transform = `translate(${mx}px, ${my}px) translate(-50%,-50%)`;
        });

        (function loop() {
            rx += (mx - rx) * 0.12; ry += (my - ry) * 0.12;
            ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%,-50%)`;
            requestAnimationFrame(loop);
        })();

        const hoverables = 'a, button, .ex-card, .wellness-row, .faq-q, .slider-btn, .slider-dot, ' +
            '.philosophy-item, .journey-step, .media-item-link, .control-btn, .slide-dot, ' +
            '.luxury-input, .social-icon-btn, .magnet-target';
        document.querySelectorAll(hoverables).forEach(el => {
            el.addEventListener('mouseenter', () => {
                ring.style.width = '56px';
                ring.style.height = '56px';
                ring.style.borderColor = 'rgba(45, 212, 191, 0.6)';
                dot.style.width = '12px';
                dot.style.height = '12px';
            });
            el.addEventListener('mouseleave', () => {
                ring.style.width = '38px';
                ring.style.height = '38px';
                ring.style.borderColor = 'rgba(255, 255, 255, 0.45)';
                dot.style.width = '8px';
                dot.style.height = '8px';
            });
        });
    }

    /* ── Mobile Nav ── */
    function initMobileNav() {
        const toggle = document.getElementById('navToggle');
        const sidebar = document.getElementById('sidebarMenu');
        const overlay = document.getElementById('sidebarOverlay');
        const closeBtn = document.getElementById('sidebarClose');
        
        if (!toggle || !sidebar) return;
        
        function openSidebar() {
            toggle.classList.add('open');
            sidebar.classList.add('open');
            toggle.setAttribute('aria-expanded', 'true');
            sidebar.setAttribute('aria-hidden', 'false');
            if (lenis) lenis.stop();
        }
        
        function closeSidebar() {
            toggle.classList.remove('open');
            sidebar.classList.remove('open');
            toggle.setAttribute('aria-expanded', 'false');
            sidebar.setAttribute('aria-hidden', 'true');
            if (lenis) lenis.start();
        }
        
        toggle.addEventListener('click', () => {
            if (sidebar.classList.contains('open')) {
                closeSidebar();
            } else {
                openSidebar();
            }
        });
        
        if (overlay) overlay.addEventListener('click', closeSidebar);
        if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
    }

    /* ── FAQ Accordion (CSS Grid Transition — Design 1) ── */
    function initFAQ() {
        document.querySelectorAll('.faq-q').forEach(btn => {
            btn.addEventListener('click', () => {
                const item = btn.parentElement;
                const wasOpen = item.classList.contains('open');
                document.querySelectorAll('.faq-item.open').forEach(i => {
                    i.classList.remove('open');
                    i.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
                });
                if (!wasOpen) {
                    item.classList.add('open');
                    btn.setAttribute('aria-expanded', 'true');
                }
            });
        });
    }

    /* ── Cursor Glow Tracking on Cards ── */
    function initCardGlows() {
        const cards = document.querySelectorAll('.glow-card');
        cards.forEach(card => {
            card.addEventListener('mousemove', e => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                card.style.setProperty('--mouse-x', `${x}px`);
                card.style.setProperty('--mouse-y', `${y}px`);
            });
        });
    }

    /* ── Testimonials Slider (Design 2 mechanic) ── */
    function initTestimonialSlider() {
        const track = document.getElementById('testimonial-track');
        const slides = document.querySelectorAll('.testimonial-slide');
        const dots = document.querySelectorAll('.slide-dot');
        const prev = document.getElementById('prev-testi');
        const next = document.getElementById('next-testi');
        if (!track || !slides.length) return;

        let cur = 0;

        function go(n) {
            slides[cur].classList.remove('active');
            dots[cur]?.classList.remove('active');
            cur = (n + slides.length) % slides.length;
            slides[cur].classList.add('active');
            dots[cur]?.classList.add('active');
            if (typeof gsap !== 'undefined') {
                gsap.to(track, { x: -cur * 100 + '%', duration: 0.65, ease: 'power3.inOut' });
            } else {
                track.style.transform = `translateX(-${cur * 100}%)`;
            }
        }

        prev?.addEventListener('click', () => go(cur - 1));
        next?.addEventListener('click', () => go(cur + 1));
        dots.forEach((d, i) => d.addEventListener('click', () => go(i)));

        setInterval(() => go(cur + 1), 6000);
    }

    /* ── Magnetic Elements (Design 2 mechanic) ── */
    function initMagneticElements() {
        if (typeof gsap === 'undefined') return;
        document.querySelectorAll('.magnet-target').forEach(el => {
            el.addEventListener('mousemove', e => {
                const r = el.getBoundingClientRect();
                const dx = e.clientX - (r.left + r.width / 2);
                const dy = e.clientY - (r.top + r.height / 2);
                gsap.to(el, { x: dx * 0.3, y: dy * 0.3, duration: 0.35, ease: 'power2.out', overwrite: 'auto' });
            });
            el.addEventListener('mouseleave', () => {
                gsap.to(el, { x: 0, y: 0, duration: 0.7, ease: 'elastic.out(1, 0.5)', overwrite: 'auto' });
            });
        });
    }

    /* ── Contact Form Validation (Design 2 mechanic) ── */
    function initContactForm() {
        const form = document.getElementById('consultation-form');
        const success = document.getElementById('form-success-box');
        if (!form) return;

        const rules = [
            { id: 'form-name',     groupId: 'group-name',     errId: 'err-name',     check: v => v.trim().length >= 3, msg: 'Full name must be at least 3 characters.' },
            { id: 'form-email',    groupId: 'group-email',    errId: 'err-email',    check: v => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim()), msg: 'Please enter a valid email address.' },
            { id: 'form-phone',    groupId: 'group-phone',    errId: 'err-phone',    check: v => /^[0-9+\s\-()]{7,18}$/.test(v.trim()), msg: 'Please enter a valid phone number.' },
            { id: 'form-interest', groupId: 'group-interest', errId: 'err-interest', check: v => v !== '', msg: 'Please select a primary objective.' },
            { id: 'form-message',  groupId: 'group-message',  errId: 'err-message',  check: v => v.trim().length >= 15, msg: 'Please describe your goal (at least 15 chars).' }
        ];

        form.addEventListener('submit', e => {
            e.preventDefault();
            let valid = true;

            rules.forEach(r => {
                const el = document.getElementById(r.id);
                const grp = document.getElementById(r.groupId);
                const err = document.getElementById(r.errId);
                if (!el) return;

                if (r.check(el.value)) {
                    grp?.classList.remove('has-error');
                    if (err) err.innerText = '';
                } else {
                    grp?.classList.add('has-error');
                    if (err) err.innerText = r.msg;
                    valid = false;
                }
            });

            if (valid && success) {
                const finish = () => {
                    form.style.display = 'none';
                    success.style.display = 'block';
                    if (typeof gsap !== 'undefined') {
                        gsap.fromTo(success, { opacity: 0, y: 15 }, { opacity: 1, y: 0, duration: 0.5 });
                    }
                };
                if (typeof gsap !== 'undefined') {
                    gsap.to(form, { opacity: 0, y: -20, duration: 0.5, onComplete: finish });
                } else {
                    finish();
                }
            }
        });
    }

    /* ── GSAP ScrollTrigger Timelines ── */
    function initGSAP() {
        gsap.registerPlugin(ScrollTrigger);

        if (lenis) {
            lenis.on('scroll', ScrollTrigger.update);
        }

        ScrollTrigger.create({
            start: 'top -40',
            end: 99999,
            toggleClass: { className: 'scrolled', targets: '#main-nav' }
        });

        // Reveal groups fade and slide up stagger
        gsap.utils.toArray('.reveal-group').forEach(el => {
            gsap.fromTo(el, { y: 40, opacity: 0 }, {
                y: 0, opacity: 1, duration: 1, ease: 'power3.out',
                scrollTrigger: { trigger: el, start: 'top 90%' }
            });
        });

        // Expertise cards stagger scale-in
        const exGrid = document.getElementById('expertiseGrid');
        if (exGrid) {
            gsap.fromTo(exGrid.children, { y: 50, opacity: 0 }, {
                y: 0, opacity: 1, duration: 0.8, stagger: 0.08, ease: 'power2.out',
                scrollTrigger: { trigger: exGrid, start: 'top 85%' }
            });
        }

        // Wellness protocol rows stagger entry
        const wellnessList = document.querySelector('.wellness-list');
        if (wellnessList) {
            gsap.fromTo(wellnessList.querySelectorAll('.wellness-row'), { x: 50, opacity: 0 }, {
                x: 0, opacity: 1, duration: 0.9, stagger: 0.06, ease: 'power3.out',
                scrollTrigger: { trigger: wellnessList, start: 'top 85%' }
            });
        }

        // Floating drift for glass cards in hero
        gsap.to('.glass-card.card-1', { y: '+=15', duration: 3, repeat: -1, yoyo: true, ease: 'sine.inOut' });
        gsap.to('.glass-card.card-2', { y: '-=12', duration: 2.5, repeat: -1, yoyo: true, ease: 'sine.inOut' });
        gsap.to('.glass-card.card-3', { y: '+=10', duration: 3.5, repeat: -1, yoyo: true, ease: 'sine.inOut' });

        // Curtain reveal for About image wrapper
        ScrollTrigger.create({
            trigger: '.about-section',
            start: 'top 75%',
            onEnter: () => {
                const wrapper = document.querySelector('.about-image-wrapper');
                if (wrapper) wrapper.classList.add('revealed');
            }
        });

        // Curtain reveal for Wellness image box
        ScrollTrigger.create({
            trigger: '#wellness',
            start: 'top 75%',
            onEnter: () => {
                const wrapper = document.querySelector('.wellness-img-box');
                if (wrapper) wrapper.classList.add('revealed');
            }
        });

        // Parallax zoom for About image
        gsap.fromTo('.about-image-wrapper img', { scale: 1.15 }, {
            scale: 1.0,
            scrollTrigger: {
                trigger: '.about-section',
                start: 'top bottom',
                end: 'bottom top',
                scrub: true
            }
        });

        // Parallax zoom for Wellness image
        gsap.fromTo('.wellness-img-box img', { scale: 1.15 }, {
            scale: 1.0,
            scrollTrigger: {
                trigger: '#wellness',
                start: 'top bottom',
                end: 'bottom top',
                scrub: true
            }
        });

        // About section (Design 2)
        gsap.fromTo('.about-floating-info', { x: 50, opacity: 0 }, {
            x: 0, opacity: 1, duration: 1.0, delay: 0.4, ease: 'power3.out',
            scrollTrigger: { trigger: '.about-section', start: 'top 65%' }
        });
        gsap.fromTo('.philosophy-item', { y: 20, opacity: 0 }, {
            y: 0, opacity: 1, duration: 0.65, stagger: 0.1, ease: 'power3.out',
            scrollTrigger: { trigger: '.medical-philosophy-list', start: 'top 88%' }
        });

        // Journey steps — alternate slide from left / right
        document.querySelectorAll('.journey-step').forEach((step, i) => {
            const content = step.querySelector('.journey-content');
            const indicator = step.querySelector('.journey-indicator');
            gsap.fromTo(content, { x: i % 2 === 0 ? 60 : -60, opacity: 0 }, {
                x: 0, opacity: 1, duration: 0.85, ease: 'power3.out',
                scrollTrigger: { trigger: step, start: 'top 82%' }
            });
            gsap.fromTo(indicator, { scale: 0, opacity: 0 }, {
                scale: 1, opacity: 1, duration: 0.5, ease: 'back.out(2)', delay: 0.2,
                scrollTrigger: { trigger: step, start: 'top 82%' }
            });
        });

        // Speaking & media
        gsap.fromTo('.speaking-card', { scale: 0.94, opacity: 0 }, {
            scale: 1, opacity: 1, duration: 1.1, ease: 'power3.out',
            scrollTrigger: { trigger: '.speaking-section', start: 'top 74%' }
        });
        gsap.fromTo('.media-item-link', { y: 30, opacity: 0 }, {
            y: 0, opacity: 1, duration: 0.75, stagger: 0.1, ease: 'power3.out',
            scrollTrigger: { trigger: '.media-links-container', start: 'top 88%' }
        });

        // Testimonials container
        gsap.fromTo('.testimonials-slider-container', { y: 50, opacity: 0 }, {
            y: 0, opacity: 1, duration: 1.0, ease: 'power3.out',
            scrollTrigger: { trigger: '.testimonials-section', start: 'top 78%' }
        });

        // Metric numbers count up animation
        gsap.utils.toArray('.count-up').forEach(el => {
            const target = +el.dataset.to;
            ScrollTrigger.create({
                trigger: el, start: 'top 90%', once: true,
                onEnter: () => gsap.to(el, { innerHTML: target, duration: 2.2, snap: { innerHTML: 1 }, ease: 'power2.out' })
            });
        });

        // Magnetic physics call-to-actions (Design 1 elements)
        gsap.utils.toArray('.s-nav__cta, .text-cta').forEach(el => {
            el.addEventListener('mousemove', e => {
                const r = el.getBoundingClientRect();
                gsap.to(el, { x: (e.clientX - r.left - r.width / 2) * 0.25, y: (e.clientY - r.top - r.height / 2) * 0.25, duration: 0.4, ease: 'power2.out' });
            });
            el.addEventListener('mouseleave', () => gsap.to(el, { x: 0, y: 0, duration: 0.6, ease: 'elastic.out(1, 0.4)' }));
        });

        // Active indicator on navigation menu links as sections come into viewport view
        document.querySelectorAll('.s-nav__links a').forEach(link => {
            const id = link.getAttribute('href');
            if (!id || id === '#') return;
            const target = document.querySelector(id);
            if (!target) return;
            ScrollTrigger.create({
                trigger: target, start: 'top center', end: 'bottom center',
                onEnter: () => setActiveNav(link), onEnterBack: () => setActiveNav(link)
            });
        });

        function setActiveNav(active) {
            document.querySelectorAll('.s-nav__links a').forEach(a => a.style.opacity = '0.55');
            active.style.opacity = '1';
        }
    }

});
