<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DIGITAL STUDIO² - @yield('title', 'Home')</title>
    <meta name="description"
        content="Revitalise your enterprise with expert digital solutions – web development, mobile applications, branding, and digital marketing services.">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="{{ asset('assets/Bolton Studio.svg') }}" />

    <!-- Preconnect for external resources -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">

    <!-- Google Fonts -->
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap"
        rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">

    <!-- AOS CSS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

    <style>
        /* ========== CSS Variables ========== */
        :root {
            /* Primary Colors (Violet Theme) */
            --primary-color: #9929ea;
            /* main violet */
            --primary-dark: #7b1fc2;
            /* darker violet */
            --primary-light: #b565f2;
            /* lighter violet */
            --primary-ultra-light: #f3e8fd;
            /* very soft violet */

            /* Secondary Colors (support – soft purple) */
            --secondary-color: #a855f7;
            --secondary-dark: #9333ea;
            --secondary-light: #c084fc;

            /* Accent Colors (cool contrast – indigo) */
            --accent-color: #6366f1;
            --accent-dark: #4f46e5;

            /* Text Colors */
            --text-dark: #1e0a3c;
            --text-light: #5b4b73;
            --text-lighter: #a89cb8;

            /* Backgrounds */
            --background-color: #ffffff;
            --section-bg-alt: #faf5ff;
            /* light violet tint */
            --card-bg: #ffffff;

            /* UI Elements */
            --grey-color: #f5f3f7;
            --border-subtle: #e9dff4;
            --border-light: #fbf9ff;

            /* Effects */
            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            --shadow-primary: 0 4px 14px 0 rgba(153, 41, 234, 0.25);
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
        }

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

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-dark);
            background-color: var(--background-color);
            line-height: 1.6;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 600;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            font-size: 18px;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: var(--transition-smooth);
        }

        a:hover {
            color: var(--primary-color);
        }

        .container {
            max-width: 1200px;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* ========== Scrollbar ========== */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--grey-color);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--primary-color);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }

        /* ========== Bootstrap Overrides ========== */
        .text-primary {
            color: var(--primary-color) !important;
        }

        .text-primary-dark {
            color: var(--primary-dark) !important;
        }

        .text-secondary {
            color: var(--secondary-color) !important;
        }

        .bg-primary {
            background-color: var(--primary-color) !important;
        }

        .bg-primary-light {
            background-color: var(--primary-light) !important;
        }

        .bg-primary-ultra-light {
            background-color: var(--primary-ultra-light) !important;
        }

        .bg-section-alt {
            background-color: var(--section-bg-alt) !important;
        }

        .btn-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
            font-weight: 500 !important;
            transition: var(--transition-smooth) !important;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
            transform: translateY(-2px);
            box-shadow: var(--shadow-primary) !important;
        }

        .btn-outline-primary {
            color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            font-weight: 500 !important;
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color) !important;
            color: white !important;
            transform: translateY(-2px);
        }

        /* ========== Enhanced Navigation ========== */
        .navbar {
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(153, 41, 234, 0.08);
            padding: 1rem 0;
            transition: all 0.3s ease;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
        }

        .navbar.scrolled {
            padding: 0.6rem 0;
            box-shadow: 0 4px 30px rgba(153, 41, 234, 0.08);
        }

        .navbar-brand {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            letter-spacing: -0.5px;
            padding: 0.25rem 0;
            position: relative;
            transition: var(--transition-smooth);
        }

        .navbar-brand:hover {
            transform: translateY(-1px);
        }


        .navbar-nav {
            gap: 0.125rem;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            font-weight: 500;
            padding: 0.65rem 1rem !important;
            border-radius: 10px;
            position: relative;
            transition: all 0.2s ease;
            font-size: 0.95rem;
            color: var(--text-dark) !important;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-link:hover {
            background: var(--primary-ultra-light);
            color: var(--primary-dark) !important;
        }

        .nav-link.active {
            color: var(--primary-color) !important;
            font-weight: 600;
            background: linear-gradient(135deg, var(--primary-ultra-light), rgba(153, 41, 234, 0.1));
        }

        .nav-link.dropdown-toggle {
            position: relative;
            padding-right: 2rem !important;
        }

        .nav-link.dropdown-toggle::after {
            content: '\f078';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            border: none;
            font-size: 0.7rem;
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            transition: transform 0.2s ease;
        }

        .nav-link.dropdown-toggle.show::after {
            transform: translateY(-50%) rotate(180deg);
        }

        /* Nav link icon styling */
        .nav-link i {
            font-size: 0.875rem;
            width: 16px;
            text-align: center;
            transition: color 0.2s ease;
        }

        .nav-link:hover i,
        .dropdown-item:hover i {
            color: var(--primary-color);
        }

        .nav-link.active i {
            color: var(--primary-color);
        }

        /* ========== Professional Dropdown Menu ========== */
        .dropdown-menu {
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(153, 41, 234, 0.12), 0 4px 20px rgba(0, 0, 0, 0.06);
            margin-top: 0.5rem;
            padding: 0.5rem 0;
            min-width: 240px;
            border: 1px solid rgba(153, 41, 234, 0.08);
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            animation: dropdownFadeIn 0.2s ease forwards;
            opacity: 0;
            transform: translateY(5px);
        }

        @keyframes dropdownFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dropdown-item {
            padding: 0.7rem 1.25rem !important;
            font-weight: 500;
            color: var(--text-dark) !important;
            font-size: 0.875rem;
            transition: all 0.15s ease;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            position: relative;
            border-radius: 6px;
            margin: 0 0.375rem;
        }

        .dropdown-item:hover {
            background: var(--primary-ultra-light) !important;
            color: var(--primary-dark) !important;
            transform: translateX(3px);
        }

        .dropdown-item.active {
            background: linear-gradient(135deg, var(--primary-ultra-light), rgba(153, 41, 234, 0.15)) !important;
            color: var(--primary-color) !important;
            font-weight: 600;
        }

        .dropdown-item.active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 35%;
            background: var(--primary-color);
            border-radius: 0 1px 1px 0;
        }

        /* Dropdown Icons */
        .dropdown-item i {
            font-size: 0.75rem;
            min-width: 16px;
            color: var(--text-lighter);
            transition: color 0.15s ease;
        }

        .dropdown-item:hover i {
            color: var(--primary-color);
        }

        /* Contact Button Enhancement */
        .navbar .btn-primary {
            padding: 0.65rem 1.5rem !important;
            font-weight: 600;
            font-size: 0.9rem;
            border-radius: 10px !important;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
            border: none !important;
            box-shadow: 0 4px 15px rgba(153, 41, 234, 0.2) !important;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .navbar .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(153, 41, 234, 0.3) !important;
        }

        /* ========== Mobile Responsive ========== */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                border-radius: 12px;
                padding: 1rem;
                margin-top: 0.75rem;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
                border: 1px solid var(--border-light);
            }

            .nav-link {
                padding: 0.75rem 1rem !important;
                margin: 0.125rem 0;
            }

            .dropdown-menu {
                background: rgba(255, 255, 255, 0.95);
                margin: 0.25rem 0 0.25rem 0.75rem;
                border-left: 2px solid var(--primary-ultra-light);
                animation: none;
                opacity: 1;
                transform: none;
            }

            .navbar-toggler {
                border: 1px solid var(--border-subtle) !important;
                padding: 0.4rem 0.6rem;
                border-radius: 8px;
                transition: var(--transition-smooth);
            }

            .navbar-toggler:hover {
                border-color: var(--primary-color) !important;
                background: var(--primary-ultra-light);
            }

            /* Mobile icon adjustments */
            .nav-link i,
            .dropdown-item i {
                font-size: 0.75rem;
                width: 14px;
            }
        }

        @media (min-width: 992px) {
            .nav-item.dropdown:hover .dropdown-menu {
                display: block;
                animation: dropdownFadeIn 0.2s ease forwards;
            }
        }

        /* ========== Services Carousel ========== */
        .services-carousel-container {
            position: relative;
            height: 400px;
            width: 100%;
            margin: 40px auto;
            perspective: 1200px;
        }

        .service-carousel-item {
            position: absolute;
            width: 300px;
            padding: 2rem 1.5rem;
            background: white;
            border: 1px solid var(--border-light);
            border-radius: 12px;
            text-align: center;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
            box-shadow: var(--shadow-lg);
            cursor: pointer;
            left: 50%;
            transform-origin: center;
            z-index: 1;
        }

        .service-icon-wrapper {
            width: 70px;
            height: 70px;
            background: var(--primary-ultra-light);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.25rem;
            transition: var(--transition-smooth);
        }

        .service-carousel-item:hover .service-icon-wrapper {
            background: var(--primary-color);
        }

        .service-icon-wrapper i {
            font-size: 1.75rem;
            color: var(--primary-color);
            transition: var(--transition-smooth);
        }

        .service-carousel-item:hover .service-icon-wrapper i {
            color: white;
        }

        /* ========== Pricing Styles ========== */
        .pricing .tab {
            border-radius: 20px;
            padding: 0.5rem 1.5rem;
            font-weight: 500;
            transition: all 0.2s ease;
            background: white;
            border: 1px solid var(--primary-color);
            cursor: pointer;
            color: var(--primary-color);
        }

        .pricing .tab.active {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
        }

        .pricing .tab:hover:not(.active) {
            background-color: rgba(153, 41, 234, 0.1) !important;
            color: var(--primary-color) !important;
        }

        .plan {
            background: white !important;
            border-radius: 16px !important;
            padding: 2rem 1.5rem !important;
            transition: all 0.3s ease !important;
            border: 1px solid var(--border-subtle) !important;
            height: 100%;
        }

        .plan:hover {
            transform: translateY(-8px) !important;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
            border-color: var(--primary-color) !important;
        }

        .plan.border-primary {
            border-color: var(--primary-color) !important;
            border-width: 2px !important;
            box-shadow: 0 10px 25px rgba(153, 41, 234, 0.1) !important;
        }

        .plan .price {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700 !important;
            font-size: 2.5rem !important;
            margin: 1rem 0 !important;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .plan .features {
            flex-grow: 1;
            text-align: left;
            padding-left: 0;
            margin-bottom: 1.5rem !important;
        }

        .plan .features li {
            font-size: 0.85rem !important;
            line-height: 1.4;
            color: var(--text-light) !important;
            margin-bottom: 0.5rem !important;
            list-style: none;
        }

        .plan .btn-primary {
            border-radius: 10px !important;
            padding: 0.75rem !important;
            font-weight: 600 !important;
            font-size: 0.8rem !important;
            transition: all 0.2s ease !important;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
            border: none !important;
            margin-top: auto;
        }

        .plan .btn-primary:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 16px rgba(153, 41, 234, 0.25) !important;
        }

        .plan .badge {
            font-size: 0.65rem !important;
            padding: 0.25rem 0.75rem !important;
            border-radius: 50px !important;
            box-shadow: 0 3px 8px rgba(153, 41, 234, 0.15);
            top: 1rem !important;
            right: 1rem !important;
        }

        .per-month {
            font-size: 0.8rem;
            color: var(--text-light);
            font-weight: 400;
        }

        /* ========== Showcase Cards ========== */
        .showcase-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
        }

        .showcase-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        .showcase-card-image-scroll {
            width: 100%;
            height: 250px;
            object-fit: cover;
            object-position: 50% 0%;
            transition: object-position 3s ease-in-out;
        }

        .showcase-card:hover .showcase-card-image-scroll {
            object-position: 50% 100% !important;
        }

        .showcase-info {
            text-align: left;
            padding: 1rem;
        }

        .showcase-category {
            font-family: "Space Grotesk", sans-serif;
            font-size: 1.25rem;
            text-transform: uppercase;
            color: var(--primary-color);
            display: block;
            margin-bottom: 0.25rem;
        }

        .showcase-info h3 {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: var(--text-light);
        }

        .showcase-learn-more {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition-smooth);
        }

        .showcase-learn-more:hover {
            background: var(--primary-dark);
            transform: translateY(-1px);
        }

        /* ========== Stats Section ========== */
        .stats-container {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-lg);
        }

        .stat-box {
            text-align: center;
            padding: 1rem;
            transition: var(--transition-smooth);
        }

        .stat-box:hover {
            transform: translateY(-3px);
        }

        .stat-number {
            margin: 0;
            font-size: 2.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .stat-label {
            font-family: "Inter", sans-serif;
            text-transform: uppercase;
            font-weight: 500;
            font-size: 0.75rem;
            color: var(--text-light);
            letter-spacing: 0.5px;
        }

        /* ========== Footer ========== */
        footer {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            color: white;
            position: relative;
        }

        .footer-link {
            color: #cbd5e1 !important;
            text-decoration: none;
            transition: var(--transition-smooth);
            font-size: 0.875rem;
        }

        .footer-link:hover {
            color: white !important;
            padding-left: 0.25rem;
        }

        /* ========== Utility Classes ========== */
        .feature-list li.included i {
            color: var(--primary-color) !important;
        }

        .feature-list li.not-included i {
            color: #dc3545 !important;
        }

        /* ========== Responsive Adjustments ========== */
        @media (max-width: 768px) {
            html {
                font-size: 14px;
            }

            .services-carousel-container {
                height: auto;
                margin: 20px auto;
                perspective: none;
            }

            .service-carousel-item {
                position: relative;
                width: 100%;
                max-width: 280px;
                margin: 0.75rem auto;
                left: 0;
                transform: none !important;
                opacity: 1 !important;
            }

            .stats-container {
                padding: 1rem;
            }

            .stat-number {
                font-size: 2rem;
            }

            .plan {
                margin-bottom: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .container {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            .navbar-brand {
                font-size: 1.25rem;
            }

            .navbar .btn-primary {
                padding: 0.5rem 1rem !important;
                font-size: 0.8rem;
            }
        }

        /* ========== Accessibility Improvements ========== */
        .visually-hidden {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        /* ========== Performance Optimizations ========== */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }
    </style>

    @stack('styles')
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <div class="container-fluid">
            <!-- Logo -->
            <a class="navbar-brand d-flex align-items-center fw-bold" href="{{ route('home') }}">
                <i class="bi bi-layers-half me-2 text-primary"></i>
                <span>DIGITAL<span class="text-primary">STUDIO</span></span>
            </a>

            <!-- Mobile Toggler -->
            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain"
                aria-label="Toggle navigation" aria-controls="navbarMain" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Nav Links with Font Awesome Icons -->
            <div class="collapse navbar-collapse" id="navbarMain">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('home') ? 'active' : '' }}" href="{{ route('home') }}">
                            <i class="fas fa-home me-1"></i> Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('about') ? 'active' : '' }}" href="{{ route('about') }}">
                            <i class="fas fa-info-circle me-1"></i> About
                        </a>
                    </li>

                    <!-- Services Dropdown with Icons -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle {{ Route::is('services*') ? 'active' : '' }}" href="#"
                            id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                            aria-haspopup="true">
                            <i class="fas fa-cogs me-1"></i> Services
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="servicesDropdown">
                            <li>
                                <a class="dropdown-item {{ Route::is('services') ? 'active' : '' }}"
                                    href="{{ route('services') }}">
                                    <i class="fas fa-code me-2"></i> Web Development
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ Route::is('services.app') ? 'active' : '' }}"
                                    href="{{ route('services.app') }}">
                                    <i class="fas fa-mobile-alt me-2"></i> Mobile Apps
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ Route::is('services.logo') ? 'active' : '' }}"
                                    href="{{ route('services.logo') }}">
                                    <i class="fas fa-pen-nib me-2"></i> Logo Design
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ Route::is('services.ecom') ? 'active' : '' }}"
                                    href="{{ route('services.ecom') }}">
                                    <i class="fas fa-shopping-cart me-2"></i> eCommerce Website
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ Route::is('services.brand') ? 'active' : '' }}"
                                    href="{{ route('services.brand') }}">
                                    <i class="fas fa-palette me-2"></i> Branding
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ Route::is('services.smm') ? 'active' : '' }}"
                                    href="{{ route('services.smm') }}">
                                    <i class="fas fa-hashtag me-2"></i> Social Media Marketing
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item {{ Route::is('services.seo') ? 'active' : '' }}"
                                    href="{{ route('services.seo') }}">
                                    <i class="fas fa-search me-2"></i> Search Engine Optimisation
                                </a>
                            </li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('packages') ? 'active' : '' }}" href="{{ route('packages') }}">
                            <i class="fas fa-box-open me-1"></i> Packages
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('portfolio') ? 'active' : '' }}"
                            href="{{ route('portfolio') }}">
                            <i class="fas fa-briefcase me-1"></i> Portfolio
                        </a>
                    </li>
                </ul>

                <!-- Contact Button with Icon -->
                <div class="d-flex align-items-center">
                    <a class="btn btn-primary" href="{{ route('contact') }}" role="button">
                        <i class="fas fa-envelope me-2"></i> Contact Us
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main id="main-content">
        @yield('content')
    </main>

    <!-- Footer -->
    <footer class="pt-5 pb-4">
        <div class="container">
            <!-- Main Footer -->
            <div class="row g-4 mb-5">
                <div class="col-lg-4">
                    <a href="{{ route('home') }}" class="d-flex align-items-center mb-4 text-decoration-none">
                        <i class="bi bi-layers-half fs-4 me-2 text-primary"></i>
                        <span class="fw-bold fs-4 text-white">DIGITAL<span class="text-gradient">STUDIO</span></span>
                    </a>
                    <p class="text-white-50 mb-4">Transforming concepts into immersive digital experiences. We develop
                        forward-thinking solutions that foster growth and engagement.</p>
                    <div class="d-flex gap-3">
                        <a href="{{ route('social.info') }}" class="text-white-50 hover-lift" aria-label="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="{{ route('social.info') }}" class="text-white-50 hover-lift" aria-label="Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://www.facebook.com/BoltonStudios.co.uk" class="text-white-50 hover-lift"
                            aria-label="Facebook">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-white-50 hover-lift" aria-label="LinkedIn">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-2 col-md-4">
                    <h6 class="fw-bold mb-4 text-white">Company</h6>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a href="{{ route('about') }}" class="footer-link">About Us</a></li>
                        <li class="mb-3"><a href="{{ route('portfolio') }}" class="footer-link">Portfolio</a></li>
                        <li class="mb-3"><a href="{{ route('packages') }}" class="footer-link">Packages</a></li>
                        <li class="mb-3"><a href="{{ route('contact') }}" class="footer-link">Contact</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4">
                    <h6 class="fw-bold mb-4 text-white">Services</h6>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a href="{{ route('services') }}" class="footer-link">Web Development</a></li>
                        <li class="mb-3"><a href="{{ route('services.app') }}" class="footer-link">App Development</a>
                        </li>
                        <li class="mb-3"><a href="{{ route('services.logo') }}" class="footer-link">Logo Design</a></li>
                        <li class="mb-3"><a href="{{ route('services.ecom') }}" class="footer-link">eCommerce
                                Solutions</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-4">
                    <h6 class="fw-bold mb-4 text-white">More Services</h6>
                    <ul class="list-unstyled">
                        <li class="mb-3"><a href="{{ route('services.brand') }}" class="footer-link">Branding</a></li>
                        <li class="mb-3"><a href="{{ route('services.smm') }}" class="footer-link">Social Media
                                Marketing</a></li>
                        <li class="mb-3"><a href="{{ route('services.seo') }}" class="footer-link">SEO</a></li>
                        <li class="mb-3"><a href="{{ route('contact') }}" class="footer-link">Bespoke Solutions</a></li>
                    </ul>
                </div>
            </div>

            <!-- Copyright -->
            <div class="row align-items-center pt-4 border-top border-dark">
                <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                    <p class="text-white-50 mb-0">&copy; 2026 DIGITAL STUDIO. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-center text-md-end">
                    <a href="{{ route('terms.conditions') }}" class="footer-link me-4">Terms &amp; Conditions</a>
                    <a href="{{ route('privacy.policy') }}" class="footer-link">Privacy Policy</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Floating Buttons -->
    <a href="https://wa.me/442045764155" target="_blank" rel="noopener noreferrer"
        class="btn btn-success position-fixed bottom-4 start-4 rounded-circle shadow d-flex align-items-center justify-content-center"
        style="width: 56px; height: 56px; z-index: 9999;" aria-label="Chat on WhatsApp">
        <i class="fab fa-whatsapp fa-lg"></i>
    </a>

    <button id="back-to-top"
        class="btn btn-primary position-fixed bottom-4 end-4 rounded-circle shadow d-flex align-items-center justify-content-center d-none"
        style="width: 56px; height: 56px; z-index: 9999;" aria-label="Back to top">
        <i class="fas fa-arrow-up"></i>
    </button>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    @stack('scripts')

    <script>
        // Initialize AOS
        document.addEventListener('DOMContentLoaded', function () {
            AOS.init({
                duration: 600,
                once: true,
                mirror: false,
                offset: 80
            });

            // Navbar scroll effect
            let lastScrollTop = 0;
            const navbar = document.querySelector('.navbar');

            window.addEventListener('scroll', function () {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                if (scrollTop > 50) {
                    navbar.classList.add('scrolled');
                } else {
                    navbar.classList.remove('scrolled');
                }

                // Back to top button
                const backToTop = document.getElementById('back-to-top');
                if (scrollTop > 300) {
                    backToTop.classList.remove('d-none');
                } else {
                    backToTop.classList.add('d-none');
                }

                lastScrollTop = scrollTop;
            });

            // Back to top functionality
            document.getElementById('back-to-top').addEventListener('click', function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // Smooth scroll for anchor links
            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();
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // Prevent dropdown closing on click inside
            document.querySelectorAll('.dropdown-menu').forEach(function (dropdownMenu) {
                dropdownMenu.addEventListener('click', function (e) {
                    e.stopPropagation();
                });
            });

            // Add hover-lift effect to social icons
            document.querySelectorAll('.hover-lift').forEach(icon => {
                icon.addEventListener('mouseenter', () => {
                    icon.style.transform = 'translateY(-2px)';
                    icon.style.color = 'white !important';
                });
                icon.addEventListener('mouseleave', () => {
                    icon.style.transform = 'translateY(0)';
                    icon.style.color = '';
                });
            });
        });

        // Reduce motion for users who prefer it
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            AOS.init({
                disable: true
            });
        }

        // Tawk.to chat widget
        window.Tawk_API = window.Tawk_API || {};
        window.Tawk_LoadStart = new Date();
        (function () {
            const s1 = document.createElement('script');
            const s0 = document.getElementsByTagName('script')[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/671fb6f04304e3196ad9917e/1ib9u5712';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
        })();
    </script>
</body>

</html>