.elementor-832 .elementor-element.elementor-element-72b6ba3{--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;}.elementor-832 .elementor-element.elementor-element-1a7d0de{--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;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-832 .elementor-element.elementor-element-170c4e0 > .elementor-widget-container{padding:4px 0px 0px 0px;}.elementor-832 .elementor-element.elementor-element-170c4e0{text-align:center;}.elementor-832 .elementor-element.elementor-element-170c4e0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:59px;font-weight:600;color:var( --e-global-color-secondary );}@media(max-width:1024px){.elementor-832 .elementor-element.elementor-element-170c4e0 > .elementor-widget-container{padding:8px 0px 0px 0px;}.elementor-832 .elementor-element.elementor-element-170c4e0{text-align:center;}.elementor-832 .elementor-element.elementor-element-170c4e0 .elementor-heading-title{font-size:48px;}}@media(max-width:767px){.elementor-832 .elementor-element.elementor-element-170c4e0 > .elementor-widget-container{padding:8px 0px 0px 0px;}.elementor-832 .elementor-element.elementor-element-170c4e0{text-align:center;}.elementor-832 .elementor-element.elementor-element-170c4e0 .elementor-heading-title{font-size:38px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Halo Lab - Premium dental laboratory services">
    <title>Halo Lab</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #007AFF;
            --primary-hover: #0051D5;
            --text-primary: #1d1d1f;
            --text-secondary: #6e6e73;
            --background: #ffffff;
            --surface: #f5f5f7;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--background);
            color: var(--text-primary);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        /* Floating Particles */
        .particles {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: radial-gradient(circle, rgba(0, 122, 255, 0.8) 0%, rgba(0, 122, 255, 0.4) 50%, transparent 70%);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 122, 255, 0.5);
            animation: float linear infinite;
        }

        .particle:nth-child(1) { left: 10%; animation-duration: 25s; animation-delay: 0s; width: 5px; height: 5px; }
        .particle:nth-child(2) { left: 20%; animation-duration: 30s; animation-delay: 2s; width: 7px; height: 7px; }
        .particle:nth-child(3) { left: 30%; animation-duration: 28s; animation-delay: 4s; width: 4px; height: 4px; }
        .particle:nth-child(4) { left: 40%; animation-duration: 32s; animation-delay: 1s; width: 6px; height: 6px; }
        .particle:nth-child(5) { left: 50%; animation-duration: 27s; animation-delay: 3s; width: 8px; height: 8px; }
        .particle:nth-child(6) { left: 60%; animation-duration: 29s; animation-delay: 5s; width: 5px; height: 5px; }
        .particle:nth-child(7) { left: 70%; animation-duration: 31s; animation-delay: 2s; width: 6px; height: 6px; }
        .particle:nth-child(8) { left: 80%; animation-duration: 26s; animation-delay: 4s; width: 7px; height: 7px; }
        .particle:nth-child(9) { left: 15%; animation-duration: 33s; animation-delay: 1s; width: 4px; height: 4px; }
        .particle:nth-child(10) { left: 85%; animation-duration: 28s; animation-delay: 3s; width: 5px; height: 5px; }
        .particle:nth-child(11) { left: 5%; animation-duration: 29s; animation-delay: 6s; width: 6px; height: 6px; }
        .particle:nth-child(12) { left: 45%; animation-duration: 31s; animation-delay: 2s; width: 7px; height: 7px; }
        .particle:nth-child(13) { left: 65%; animation-duration: 27s; animation-delay: 5s; width: 5px; height: 5px; }
        .particle:nth-child(14) { left: 90%; animation-duration: 34s; animation-delay: 1s; width: 6px; height: 6px; }
        .particle:nth-child(15) { left: 25%; animation-duration: 30s; animation-delay: 4s; width: 8px; height: 8px; }

        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.8;
            }
            90% {
                opacity: 0.8;
            }
            100% {
                transform: translateY(-100px) translateX(100px) rotate(360deg);
                opacity: 0;
            }
        }

        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4rem 2rem;
            position: relative;
            z-index: 1;
        }

        .hero-content {
            max-width: 900px;
            text-align: center;
        }

        .hero h1 {
            font-size: 5rem;
            font-weight: 700;
            letter-spacing: -2px;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            line-height: 1.3;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Animated Rotating Text */
        .rotating-text-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 6rem;
            position: relative;
        }

        .rotating-text {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary) 0%, #0051D5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            opacity: 1;
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .rotating-text.fade-out {
            opacity: 0;
            transform: translateY(-20px);
        }

        .rotating-text.fade-in {
            opacity: 0;
            transform: translateY(20px);
        }

        .hero p {
            font-size: 1.5rem;
            font-weight: 400;
            color: var(--text-secondary);
            margin-bottom: 3.5rem;
            line-height: 1.5;
        }

        /* Buttons */
        .button-group {
            display: flex;
            gap: 1.25rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1.125rem 2.5rem;
            font-size: 1.0625rem;
            font-weight: 500;
            border-radius: 980px;
            text-decoration: none !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-block;
            border: none;
            cursor: pointer;
            background: var(--primary);
            color: white;
            box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .btn:hover::before {
            opacity: 1;
        }

        .btn:link,
        .btn:visited,
        .btn:hover,
        .btn:active {
            text-decoration: none !important;
        }

        .btn:hover {
            background: var(--primary-hover);
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(0, 122, 255, 0.4);
        }

        .btn:active {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 3rem;
            }

            .hero p {
                font-size: 1.25rem;
            }

            .nav-links {
                gap: 1.5rem;
            }

            .button-group {
                flex-direction: column;
                max-width: 300px;
                margin: 0 auto;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- Floating Particles -->
    <div class="particles">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>

    <!-- Hero -->
    <section class="hero">
        <div class="hero-content">
            <h1>
                <span>We make</span>
                <span class="rotating-text-container">
                    <span class="rotating-text">Smile Design</span>
                </span>
                <span>Effortless</span>
            </h1>
            <p>Premium dental laboratory services delivered with precision and care</p>
            <div class="button-group">
                <a href="https://halolab.co.uk/dsd/" class="btn">Submit DSD Case</a>
                <a href="https://halolab.co.uk/ceramics/" class="btn">Submit Ceramic Case</a>
                <a href="https://halolab.co.uk/appliances/" class="btn">Submit Appliance Case</a>
            </div>
        </div>
    </section>

    <script>
        // Rotating text animation
        const words = ['Smile Design', 'Whitening', 'Retainers', 'Veneers'];
        let currentIndex = 0;
        const rotatingText = document.querySelector('.rotating-text');

        function rotateText() {
            // Fade out
            rotatingText.classList.add('fade-out');
            
            setTimeout(() => {
                // Change text
                currentIndex = (currentIndex + 1) % words.length;
                rotatingText.textContent = words[currentIndex];
                
                // Reset to fade-in position
                rotatingText.classList.remove('fade-out');
                rotatingText.classList.add('fade-in');
                
                // Remove fade-in class and let it animate to normal
                setTimeout(() => {
                    rotatingText.classList.remove('fade-in');
                }, 50);
            }, 600);
        }

        // Initialize with first word
        rotatingText.textContent = words[0];

        // Rotate every 3 seconds
        setInterval(rotateText, 3000);
    </script>
</body>
</html>/* End custom CSS */