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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>DIGITAL STUDIO2 - @yield('title', 'Home')</title>
    <link rel="icon" type="image/png" href="{{ asset('assets/Bolton Studio.svg') }}" />
    <link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto Mono" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto Flex" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Sora" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- AOS CSS -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <style>
        /* Style the scrollbar container */
        ::-webkit-scrollbar {
            width: 12px;
            /* Width of the vertical scrollbar */
            height: 12px;
            /* Height of the horizontal scrollbar */
        }

        /* Style the scrollbar track (background of the scrollbar) */
        ::-webkit-scrollbar-track {
            background-color: #f5f5f5;
            /* Light grey background for scrollbar in light mode */
            border-radius: 0px;

            /* Rounded corners */
        }

        /* Style the scrollbar thumb (the draggable part of the scrollbar) */
        ::-webkit-scrollbar-thumb {
            background-color: var(--primary-color);
            /* Dark grey thumb */
            border-radius: 0px;

            /* Rounded corners */
        }

        /* On hover, change the thumb color */
        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--paragraph-color);
            /* Darker grey when hovered */
        }

        /* Style the scrollbar corner (if there's a bottom-right corner scrollbar) */
        ::-webkit-scrollbar-corner {
            background-color: #f1f1f1;
        }





        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .animate-bounce {
            animation: bounce 3s ease-in-out infinite;
        }

        .very-small {
            font-size: 10px;
        }

        .main-hero-img {
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border: 8px solid white;
        }

        .main-hero-img:hover {
            transform: scale(1.02) rotate(-1deg);
        }


        /* Define CSS Variables for Premium Professional Theme */
        :root {
    /* Brand Colors – Bold Red Theme */
    --primary-color: #FF0800;        /* Primary Red */
    --primary-dark: #cc0600;         /* Darker Red */
    --primary-light: #fff1f0;        /* Soft Red Tint */
    --secondary-color: #FF2800;      /* Secondary Red-Orange */
    --accent-color: #ff4d2d;         /* Accent Highlight */

    /* 📝 Modern Text Colors – High Contrast Slate */
    --text-dark: #0f172a;            /* Slate 900 */
    --text-medium: #334155;          /* Slate 700 */
    --text-light: #64748b;           /* Slate 500 */
    --text-color: var(--text-medium);
    --paragraph-color: var(--text-medium);

    /* 🎨 Backgrounds */
    --background-color: #f8fafc;     /* Slate 50 */
    --section-bg-alt: #f1f5f9;       /* Slate 100 */
    --card-bg: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(255, 255, 255, 0.5);

    /* 🧩 UI Elements & Tokens */
    --border-radius-sm: 0.5rem;      /* 8px */
    --border-radius-md: 0.75rem;     /* 12px */
    --border-radius-lg: 1.5rem;      /* 24px */
    --border-subtle: #e2e8f0;         /* Slate 200 */

    /* 🌫️ Premium Soft Shadows (Red-tinted) */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1),
                 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
                 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1),
                 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-color-primary: rgba(255, 8, 0, 0.25);

    /* ✨ Effects */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

        
        /* Import Inter Font */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        /* Global Typography & Layout */
        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        h1, h2, h3, h4, h5, h6 {
            color: var(--text-dark);
            font-weight: 700;
            letter-spacing: -0.025em;
            margin-bottom: 0.75rem;
        }

        /* Modern Components Overrides */
        
        /* 1. Buttons - Premium Pill Style */
        .btn {
            border-radius: var(--border-radius-full, 9999px);
            padding: 0.875rem 2rem;
            font-weight: 600;
            letter-spacing: 0.01em;
            transition: var(--transition-smooth);
            border: 1px solid transparent;
        }

        .btn-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
            box-shadow: 0 4px 6px -1px var(--shadow-color-primary);
        }

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

        .btn-outline-primary {
            color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            background-color: transparent !important;
        }

        .btn-outline-primary:hover, .btn-outline-primary.active {
            background-color: var(--primary-color) !important;
            color: white !important;
            box-shadow: 0 8px 20px var(--shadow-color-primary) !important;
        }

        /* 2. Cards - Modern & Clean */
        .card, .service-box, .feature-box, .stat-box, .story-card, .web-service-card {
            background: var(--card-bg) !important;
            border-radius: var(--border-radius-lg) !important;
            border: 1px solid var(--border-subtle) !important;
            box-shadow: var(--shadow-sm) !important;
            transition: var(--transition-smooth) !important;
            padding: 2.5rem !important;
        }

        .card:hover, .service-box:hover, .feature-box:hover, .stat-box:hover, .story-card:hover, .web-service-card:hover {
            transform: translateY(-5px) !important;
            box-shadow: var(--shadow-lg) !important;
            border-color: var(--primary-light) !important;
        }

        /* 3. Form Elements - Polished */
        .form-control, .form-select {
            border-radius: var(--border-radius-md) !important;
            border: 1px solid var(--border-subtle) !important;
            padding: 1rem 1.25rem !important;
            background-color: white !important;
            box-shadow: var(--shadow-sm);
            transition: var(--transition-smooth);
            color: var(--text-dark);
            font-size: 0.95rem;
        }

        .form-control:focus, .form-select:focus {
            box-shadow: 0 0 0 4px rgba(255, 8, 0, 0.1) !important;
            border-color: var(--primary-color) !important;
            outline: none;
        }
        
        /* Utility Classes */
        .bg-light { background-color: var(--section-bg-alt) !important; }
        .bg-white { background-color: #ffffff !important; }
        .text-primary { color: var(--primary-color) !important; }
        .text-secondary { color: var(--secondary-color) !important; }
        
        /* Global Theme Overrides */
        .text-muted { color: var(--text-light) !important; }
        .text-dark { color: var(--text-dark) !important; }
        .shadow-sm { box-shadow: var(--shadow-sm) !important; }
        .shadow-lg { box-shadow: var(--shadow-lg) !important; }

        /* NEW: Topbar Styling */
        .topbar {
            background: var(--text-dark);
            padding: 10px 0;
            font-size: 13px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.8);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .topbar a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            transition: var(--transition-smooth);
        }

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

        .topbar-info i {
            color: var(--primary-color);
            margin-right: 8px;
        }

        .topbar-social a {
            margin-left: 15px;
            font-size: 14px;
        }

        /* NEW: Redesigned Navbar */
        .navbar {
            padding: 15px 0;
            transition: all 0.4s ease;
            background: white !important;
            border-bottom: 1px solid var(--border-subtle);
            position: sticky !important;
            top: 0;
            width: 100%;
            z-index: 1030; /* Ensures it stays above all content but below preloader */
        }

        .navbar.sticky-scrolled {
            padding: 10px 0;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        }

        .navbar-brand span {
            font-size: 1.5rem;
            letter-spacing: -1px;
        }

        .nav-link {
            font-weight: 600;
            color: var(--text-medium) !important;
            padding: 10px 15px !important;
            transition: var(--transition-smooth);
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .nav-link:before {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: var(--transition-smooth);
            transform: translateX(-50%);
        }

        .nav-link:hover:before, .nav-link.active:before {
            width: 20px;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary-color) !important;
        }

        .dropdown-toggle::after {
            margin-left: 0.5rem !important;
            vertical-align: middle !important;
        }

        .dropdown-menu {
            border: none !important;
            box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
            border-radius: var(--border-radius-md) !important;
            padding: 1rem !important;
            margin-top: 15px !important;
        }

        .dropdown-item {
            font-weight: 500;
            padding: 0.7rem 1rem !important;
            border-radius: var(--border-radius-sm) !important;
            transition: var(--transition-smooth);
        }

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

        /* NEW: Redesigned Footer */
        footer {
            background: #0f172a !important; /* Slate 900 */
            color: #f8fafc !important;
            padding-top: 80px;
            border-top: none !important;
        }

        footer .footer-logo span {
            font-size: 1.5rem;
            color: white;
        }

        footer .footer-title {
            color: white;
            font-size: 1.1rem;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }

        footer .footer-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background: var(--primary-color);
        }

        footer .footer-link {
            color: #94a3b8 !important; /* Slate 400 */
            text-decoration: none;
            transition: var(--transition-smooth);
            display: block;
            margin-bottom: 12px;
            font-size: 0.95rem;
        }

        footer .footer-link:hover {
            color: var(--primary-color) !important;
            padding-left: 8px;
        }

        footer .contact-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
            color: #94a3b8;
        }

        footer .contact-item i {
            color: var(--primary-color);
            background: rgba(255, 8, 0, 0.1);
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .footer-bottom {
            background: #020617; /* Slate 1000 */
            padding: 25px 0;
            margin-top: 60px;
        }

        .footer-social-pill {
            display: flex;
            gap: 12px;
        }

        .footer-social-pill a {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            transition: var(--transition-smooth);
            text-decoration: none;
        }

        .footer-social-pill a:hover {
            background: var(--primary-color);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px var(--shadow-color-primary);
        }


        /* ... Previous styles ... */

        /* 4. Premium Showcase Cards */
        .showcase-card {
            position: relative;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            background: var(--card-bg);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-sm);
            transition: var(--transition-smooth);
            height: 100%;
        }

        .showcase-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-light);
        }

        .showcase-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .showcase-card:hover img {
            transform: scale(1.05);
        }

        .showcase-info {
            padding: 1.5rem;
            background: white;
            position: relative;
            z-index: 10;
        }

        .showcase-category {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            background: var(--primary-light);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
        }

        /* 5. Section Layouts */
        .section-alternate {
            background-color: var(--section-bg-alt);
            border-top: 1px solid var(--border-subtle);
            border-bottom: 1px solid var(--border-subtle);
        }

        /* Background Glow Animations */
        .bg-glow {
            /* ... existing glow styles ... */

            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 8, 0, 0.1) 0%, rgba(255, 8, 0, 0) 70%);
            filter: blur(60px);
            z-index: -1;
            pointer-events: none;
        }

        .glow-top-right {
            top: -100px;
            right: -100px;
        }

        .glow-bottom-left {
            bottom: -100px;
            left: -100px;
        }

        /* Home Hero Background */
        /* Hero Sections Backgrounds */
        .hero-home {
            background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 241, 240, 0.9)), url('../assets/sb-hero-bg.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 100px 0;
        }

        .hero-about {
            background: linear-gradient(rgba(255, 8, 0, 0.05), rgba(255, 255, 255, 0.9)), url('../assets/sb-hero-bg.png');
            background-size: cover;
            background-position: top;
        }

        .hero-services {
            background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 241, 240, 0.95)), url('../assets/sb-hero-bg.png');
            background-size: cover;
            background-position: bottom;
        }

        .hero-portfolio {
            background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 241, 240, 0.98)), url('../assets/sb-hero-bg.png');
            background-size: cover;
            background-position: center;
        }

        .hero-packages {
            background: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 241, 240, 0.95)), url('../assets/sb-hero-bg.png');
            background-size: cover;
            background-position: center;
        }

        .hero-contact {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(255, 8, 0, 0.4)), url('../assets/sb-contact-bg.png');
            background-size: cover;
            background-position: center;
        }

        /* Service Detail Heroes */
        .hero-service-detail {
            background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(255, 8, 0, 0.2)), url('../assets/hero-bg-studio.png') !important;
            background-size: cover !important;
            background-position: center !important;
        }

        .hero-service-app {
            background-blend-mode: multiply;
        }

        .hero-service-web {
            background-blend-mode: soft-light;
        }

        .hero-service-ecom {
            background-blend-mode: darken;
        }

        .hero-service-logo {
            background-blend-mode: darken;
        }

        .hero-service-brand {
            background-blend-mode: darken;
        }

        .hero-service-smm {
            background-blend-mode: dark;
        }

        .hero-service-seo {
            background-blend-mode: luminosity;
        }

        /* Foooter */
        footer {
            background: var(--section-bg-alt);
            color: var(--text-color);
            font-family: "Lexend", sans-serif;
            border-top: 1px solid var(--border-subtle);
        }



        /* Custom Transitions & Hover Effects */
        .transition-smooth {
            transition: var(--transition-smooth);
        }



        /* Responsive Adjustments */

        /* Services */
        .services-section {
            max-width: 1250px;
            margin: auto;
            padding: 10px;
        }

        .services-section h2 {
            max-width: 800px;
            margin: auto;
            padding: 20px;
            font-size: 36px;
            font-weight: 600;
            text-align: center;
        }

        .services-section h2 span {
            color: var(--primary-color);
        }

        .services-section .description {
            text-align: center;
            max-width: 1000px;
            margin: auto;
            font-size: 16px;
            color: var(--text-light); /* Fixed from hardcoded grey */
            margin-bottom: 30px;
        }

        /* Service Cards */
        /* Services Carousel */
        .services-carousel-container {
            position: relative;
            height: 450px;
            width: 100%;
            margin: 50px auto;
            perspective: 1000px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: visible;
        }

        .service-carousel-item {
            position: absolute;
            width: 320px;
            padding: 35px 25px;
            background: white;
            border: 1px solid var(--border-subtle);
            border-radius: 15px;
            text-align: center;
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            user-select: none;
            backface-visibility: hidden;
        }

        .service-carousel-item img {
            width: 70px;
            height: 70px;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .service-carousel-item:hover img {
            transform: scale(1.1) translateY(-5px);
        }

        .service-carousel-item h5 {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--text-color);
        }

        .service-carousel-item p {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-light);
        }







        /* Features Section */
        .service-features {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 80px;
        }

        .feature-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding-left: 24px;
            /* border-left: solid 0.1px rgba(13, 110, 253, 0.4); */
        }



        .feature-box h3 {
            font-family: "Sora";
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }

        .feature-box .feature-icon {
            font-size: 40px;
            /* background: #222; */
            padding: 20px;
            border-radius: 0px;
            color: var(--primary-color);
            transition: 0.3s ease-in-out;
        }

        .feature-box:hover .feature-icon {
            transform: scale(1.1);
        }



        /* Stats Section */
        .stats-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 20px;
            /* margin-top: 30px; */
            margin-bottom: 30px;
            background: var(--section-bg-alt);
            border: 1px solid var(--border-subtle);
            /* padding: 20px; */
            border-radius: 0px;
        }

        .stat-box {
            background: white;
            border-radius: 12px;
            text-align: center;
            border: 1px solid var(--border-subtle);
            min-width: 191px;
            min-height: 102px;
            transition: var(--transition-smooth);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
        }

        .stat-box:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            background: white;
        }

        .stat-number {
            margin-bottom: 10px;
            margin-top: 0px;
            font-size: 41px;
            font-weight: bold;
            color: var(--primary-color);
        }

        .stat-label {
            font-family: "Roboto Mono";
            text-transform: uppercase;
            font-weight: 500;
            font-size: 13px;
            color: var(--text-light); /* Fixed from hardcoded grey */
        }



        /* Showcase Grid */
        .showcase-projects {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            max-width: 1250px;
            margin: auto;
            padding: 20px;
        }

        @media (max-width: 768px) {
            .showcase-projects {
                grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            }
        }

        /* 4. Premium Showcase Cards */
        .showcase-projects {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 24px;
            padding: 20px 0;
        }

        .showcase-card {
            position: relative;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            background: var(--card-bg);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-sm);
            transition: var(--transition-smooth);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .showcase-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-color);
        }

        .showcase-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 280px;
        }

        .showcase-card img:not(.showcase-arrow-link img) {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .showcase-card:hover img:not(.showcase-arrow-link img) {
            transform: scale(1.1);
        }

        .showcase-card-image-scroll {
            object-position: 50% 0%;
        }

        .showcase-card:hover .showcase-card-image-scroll {
            object-position: 50% 100% !important;
            transition: object-position 4s ease-in-out;
        }

        .showcase-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent 0%, rgba(15, 23, 42, 0.4) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .showcase-card:hover .showcase-overlay {
            opacity: 1;
        }

        .showcase-info {
            padding: 1.75rem;
            background: white;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
        }

        .showcase-category {
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--primary-color);
            background: var(--primary-light);
            padding: 0.4rem 1rem;
            border-radius: 50px;
            margin-bottom: 0.75rem;
            width: fit-content;
        }

        .showcase-info h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0;
            line-height: 1.4;
            transition: color 0.3s ease;
        }

        .showcase-card:hover .showcase-info h3 {
            color: var(--primary-color);
        }

        .showcase-arrow-link {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition-smooth);
            z-index: 20;
            box-shadow: var(--shadow-sm);
        }

        .showcase-arrow-link img {
            width: 18px !important;
            height: 18px !important;
            filter: brightness(0) invert(1);
            transition: transform 0.3s ease;
        }

        .showcase-card:hover .showcase-arrow-link {
            background: var(--text-dark);
            transform: scale(1.1);
        }

        .showcase-card:hover .showcase-arrow-link img {
            transform: translate(2px, -2px);
        }

        /* Filter Menu Styling */
        .showcase-filter-menu .btn {
            padding: 0.6rem 1.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 50px;
            transition: var(--transition-smooth);
            border: 1px solid var(--border-subtle) !important;
            background: white !important;
            color: var(--text-medium) !important;
        }

        .showcase-filter-menu .btn:hover {
            border-color: var(--primary-color) !important;
            color: var(--primary-color) !important;
            transform: translateY(-2px);
        }

        .showcase-filter-menu .btn.active {
            background: var(--primary-color) !important;
            color: white !important;
            border-color: var(--primary-color) !important;
            box-shadow: 0 4px 10px var(--shadow-color-primary);
        }

        .showcase-learn-more {
            margin-top: 40px;
            padding: 1rem 3rem;
            font-size: 1rem;
            background: var(--text-dark);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition-smooth);
            box-shadow: var(--shadow-md);
        }

        .showcase-learn-more:hover {
            background: var(--primary-color);
            transform: translateY(-3px) scale(1.02);
            box-shadow: var(--shadow-lg);
        }

        @media (max-width: 768px) {
            .showcase-projects {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 16px;
            }
        }

        /*.showcase-card:nth-child(n+7) {*/
        /*display: none;*/
        /* Hide cards after the first 6 */
        /*}*/

        /* About */

        /* Legacy Hero Section Removed - Handled by Bootstrap 5 */

        /* Legacy Story Section Removed - Handled by Bootstrap 5 Grid */

        /* what-we-do */
        /* Legacy What We Do Section Removed - Handled by Bootstrap 5 */


        /* CTA Section */

        /* Legacy Unique CTA & Contact Sections Removed - Handled by Bootstrap 5 */

        /* Additional Inquiries Section */
        .inquiries-section-unique {
            background: var(--section-bg-alt);
            padding: 50px 5%;
            text-align: center;
            color: var(--text-color);
            border-top: 1px solid var(--border-subtle);
        }

        .inquiries-section-unique h2 {
            font-size: 2rem;
            font-weight: bold;
        }

        .highlight-text {
            color: var(--primary-color);
        }

        .inquiries-section-unique p {
            font-size: 0.9rem;
            color: var(--text-light);
            margin-bottom: 20px;
        }

        /* Inquiries Container */
        .inquiries-container-unique {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        /* Inquiry Box */
        .inquiry-box-unique {
            background: white;
            padding: 12px 20px;
            border-radius: 0px;

            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-color);
            font-size: 1rem;
            cursor: pointer;
            transition: 0.3s;
            border: 1px solid var(--border-subtle);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
        }

        .inquiry-box-unique i {
            color: var(--primary-color);
            font-size: 1.2rem;
        }

        .inquiry-box-unique:hover {
            background: var(--section-bg-alt);
            border-color: var(--primary-color);
        }


        /* Responsive Design */
        @media (max-width: 768px) {
            .inquiries-container-unique {
                flex-direction: column;
                align-items: center;
            }

            .inquiry-box-unique {
                width: 100%;
                justify-content: center;
            }
        }


        .tech-section {
            text-align: center;
            background: var(--section-bg-alt);
            padding: 50px 20px;
            color: var(--text-color);
            border-top: 1px solid var(--border-subtle);
            border-bottom: 1px solid var(--border-subtle);
        }

        .tech-section h2 {
            font-size: 2rem;
            font-weight: bold;
        }

        .tech-section h2 span {
            color: var(--primary-color);
        }

        .tech-section p {
            justify-self: center;
            max-width: 1250px;
            margin-top: 10px;
            font-size: 1rem;
            color: var(--text-light);
        }

        .tech-icons {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 30px;
            gap: 20px;
        }

        .tech-icons .icon {
            padding: 20px 40px 5px 40px;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: white;
            border: 2px solid var(--primary-color);
            border-radius: 0px;
            transition: var(--transition-smooth);
        }

        .tech-icons .icon:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .tech-icons .icon img {
            max-width: 100%;
            max-height: 100%;
        }

        /* Section with Platforms  */
        .search-platforms {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: white;
            padding: 35px 25px 10px 25px;
            border-radius: var(--border-radius-md);
            border: 1px solid var(--border-subtle);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
            max-width: 1100px;
            margin: auto;
            position: relative;
            overflow: hidden;
        }

        @media (max-width: 768px) {
            .search-platforms {
                flex-direction: column;
            }
        }

        /* App Dev Section */
        .app-development {
            text-align: center;
            padding: 50px 20px;
            background-color: var(--background-color);
        }

        .app-development h2 {
            color: var(--text-color);
            font-size: 32px;
            margin-bottom: 15px;
        }

        .app-development h2 span {
            color: var(--primary-color);
        }

        .app-development p {
            color: var(--text-light);
            max-width: 800px;
            margin: auto;
            font-size: 16px;
            line-height: 1.6;
        }



        /* Styling for individual cards */
        .app-card {
            display: flex;
            background: white;
            border: 1px solid var(--border-subtle);
            padding: 25px 40px 45px 25px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
            align-items: center;
            transition: var(--transition-smooth);
            position: relative;
        }

        .app-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px) !important;
            box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
        }

        /* Alternating card positions */


        /* Styling for the card number */
        .app-number {
            margin-top: -85px;
            font-size: 18px;
            font-weight: bold;
            color: white;
            background: var(--primary-color);
            width: 70px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius-sm);
            margin-right: 15px;
        }

        /* Text styling */
        .app-content {
            text-align: left;
        }

        .app-content h3 {
            font-family: "Lexend";
            font-size: 22px;
            font-weight: 400;
            color: var(--text-color);
            margin-bottom: 5px;
        }

        .app-content p {
            font-family: "Lexend";
            font-size: 16px;
            font-weight: 300;
            color: var(--text-light);
            line-height: 1.5;
        }


        /* Toast Notification Styling */
        .toast {
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: var(--border-radius-md);

            padding: 16px;
            position: fixed;
            z-index: 1;
            left: 50%;
            bottom: 30px;
            font-size: 17px;
        }

        .toast.show {
            visibility: visible;
            animation: fadein 0.5s, fadeout 0.5s 3.5s;
        }

        @keyframes fadein {
            from {
                bottom: 0;
                opacity: 0;
            }

            to {
                bottom: 30px;
                opacity: 1;
            }
        }

        @keyframes fadeout {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }





        /* Glow Effects */
        .bg-glow {
            position: absolute;
            width: 40vw;
            height: 40vw;
            background: radial-gradient(circle, rgba(255, 8, 0, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
            pointer-events: none;
            z-index: -1;
        }

        .glow-top-right {
            top: -10vw;
            right: -10vw;
        }

        .glow-bottom-left {
            bottom: -10vw;
            left: -10vw;
        }

        /* Premium Pricing Section Styles */
        .pricing {
            background-color: var(--section-bg-alt);
        }

        .pricing .tab {
            border-radius: 0;
            padding: 10px 25px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: white;
            border: 1px solid var(--primary-color);
        }

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

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

        .plan {
            background: white !important;
            border-radius: var(--border-radius-md) !important;
            padding: 3rem 2rem !important;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
            border: 1px solid var(--border-subtle) !important;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

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

        .plan.border-primary {
            border-color: var(--primary-color) !important;
            border-width: 2px !important;
            box-shadow: 0 15px 35px rgba(255, 8, 0, 0.1) !important;
        }

        .plan h4 {
            font-family: "Lexend";
            font-size: 1.2rem !important;
            font-weight: 700 !important;
            letter-spacing: -0.5px;
            color: var(--text-dark) !important;
            margin-bottom: 0;
        }

        .plan hr {
            border-color: var(--border-subtle);
            opacity: 0.1;
            margin: 1.5rem 0;
        }

        .plan .price {
            font-family: "Sora";
            font-weight: 800 !important;
            font-size: 3rem !important;
            margin: 1.5rem 0 !important;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: block;
        }

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

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

        .plan .btn-primary {
            border-radius: 12px !important;
            padding: 14px !important;
            font-weight: 600 !important;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 0.85rem !important;
            transition: all 0.3s ease !important;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
            border: none !important;
            margin-top: auto;
            color: #fff !important;
        }

        .plan .btn-primary:hover {
            transform: scale(1.02);
            box-shadow: 0 10px 20px rgba(255, 8, 0, 0.3) !important;
        }

        .plan .badge {
            font-family: "Lexend";
            font-size: 0.7rem !important;
            padding: 6px 14px !important;
            border-radius: 50px !important;
            box-shadow: 0 4px 10px rgba(255, 8, 0, 0.2);
            top: 20px !important;
            right: 20px !important;
        }

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

        /* DIGITAL JOURNEY / STEPS SECTION Styling */
        .digital-journey {
            background-color: var(--section-bg-alt) !important;
        }

        .step-box {
            background: white !important;
            border-radius: var(--border-radius-lg) !important;
            border: 1px solid var(--border-subtle) !important;
            transition: var(--transition-smooth) !important;
            position: relative;
            z-index: 1;
        }

        .step-box:hover {
            border-color: var(--primary-color) !important;
            transform: translateY(-10px) !important;
            box-shadow: 0 20px 40px var(--shadow-color-primary) !important;
        }

        .step-box .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            background: var(--primary-light);
            border-radius: 50%;
            margin-bottom: 2rem;
            transition: var(--transition-smooth);
        }

        .step-box:hover .icon {
            background: var(--primary-color);
            transform: rotateY(180deg);
        }

        .step-box:hover .icon img {
            filter: brightness(0) invert(1);
        }

        .steps-container {
            position: relative;
        }

        /* Connective line for desktop */
        @media (min-width: 992px) {
            .steps-container::before {
                content: '';
                position: absolute;
                top: 40%;
                left: 10%;
                right: 10%;
                height: 2px;
                background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
                z-index: 0;
            }
        }

        /* Professional Spinner Preloader */
        #page-preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease;
        }

        .loader-content {
            text-align: center;
        }

        .loader-brand {
            font-size: 1.5rem;
            font-weight: 800;
            margin-top: 15px;
            color: var(--text-dark);
            letter-spacing: -1px;
        }

        body:not(.loaded) {
            overflow: hidden !important;
        }

        body.loaded #page-preloader {
            opacity: 0;
            pointer-events: none;
        }

        .spinner-custom {
            width: 50px;
            height: 50px;
            border: 4px solid var(--primary-light);
            border-top: 4px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    @stack('styles')
</head>

<body>
    <!-- Professional Preloader -->
    <div id="page-preloader">
        <div class="loader-content">
            <div class="spinner-custom"></div>
            <div class="loader-brand">
                DIGITAL <span class="text-primary">STUDIO</span>
            </div>
        </div>
    </div>

    <div class="corner-effect"></div>

    <!-- NEW: Topbar -->
    <div class="topbar d-none d-lg-block">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <div class="topbar-info d-flex gap-4">
                        <a href="tel:+447476603415"><i class="fas fa-phone-alt"></i> +44 74 7660 3415</a>
                        <a href="mailto:info@DigitalStudio.com"><i class="fas fa-envelope"></i> info@DigitalStudio.com</a>
                        <span><i class="fas fa-map-marker-alt"></i> London, United Kingdom</span>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="topbar-social">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Redesigned Navbar -->
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container">
            <a class="navbar-brand py-0 d-flex align-items-center" href="{{ route('home') }}">
                <span class="fw-bold text-dark">
                    DIGITAL <span class="text-primary">STUDIO</span>
                </span>
            </a>

            <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarMain">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarMain">
                <ul class="navbar-nav mb-2 mb-lg-0 gap-lg-2">
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('home') ? 'active' : '' }}" href="{{ route('home') }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('about') ? 'active' : '' }}" href="{{ route('about') }}">About Us</a>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle {{ Route::is('services*') ? 'active' : '' }}"
                            href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown">
                            Our Services
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item {{ Route::is('services') ? 'active' : '' }}" href="{{ route('services') }}">Web Development</a></li>
                            <li><a class="dropdown-item {{ Route::is('services.app') ? 'active' : '' }}" href="{{ route('services.app') }}">Mobile App Development</a></li>
                            <li><a class="dropdown-item {{ Route::is('services.logo') ? 'active' : '' }}" href="{{ route('services.logo') }}">Logo Design & Identity</a></li>
                            <li><a class="dropdown-item {{ Route::is('services.ecom') ? 'active' : '' }}" href="{{ route('services.ecom') }}">Ecommerce Solutions</a></li>
                            <li><a class="dropdown-item {{ Route::is('services.brand') ? 'active' : '' }}" href="{{ route('services.brand') }}">Branding Services</a></li>
                            <li><a class="dropdown-item {{ Route::is('services.smm') ? 'active' : '' }}" href="{{ route('services.smm') }}">Social Media Marketing</a></li>
                            <li><a class="dropdown-item {{ Route::is('services.seo') ? 'active' : '' }}" href="{{ route('services.seo') }}">SEO Optimization</a></li>
                        </ul>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('packages') ? 'active' : '' }}" href="{{ route('packages') }}">Pricing Plans</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ Route::is('portfolio') ? 'active' : '' }}" href="{{ route('portfolio') }}">Portfolio</a>
                    </li>
                </ul>
            </div>

            <div class="d-none d-lg-block">
                <a class="btn btn-primary btn-sm px-4" href="{{ route('contact') }}">Start Project</a>
            </div>
        </div>
    </nav>

    @yield('content')

    <footer class="footer">
        <div class="container">
            <div class="row g-5">
                <!-- Brand Profile -->
                <div class="col-lg-4 col-md-12">
                    <div class="footer-logo mb-4">
                        <span class="fw-bold">DIGITAL <span class="text-primary">STUDIO</span></span>
                    </div>
                    <p class="text-light-emphasis mb-4 pe-lg-5">
                        We are a premium digital agency based in London, dedicated to transforming businesses through state-of-the-art digital experiences and innovative design solutions.
                    </p>
                    <div class="footer-social-pill">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="col-lg-2 col-md-4">
                    <h5 class="footer-title">Company</h5>
                    <div class="footer-links">
                        <a href="{{ route('home') }}" class="footer-link">Home</a>
                        <a href="{{ route('about') }}" class="footer-link">About Us</a>
                        <a href="{{ route('portfolio') }}" class="footer-link">Portfolio</a>
                        <a href="{{ route('packages') }}" class="footer-link">Price Plans</a>
                        <a href="{{ route('contact') }}" class="footer-link">Contact</a>
                    </div>
                </div>

                <!-- Services Links -->
                <div class="col-lg-3 col-md-4">
                    <h5 class="footer-title">Services</h5>
                    <div class="footer-links">
                        <a href="{{ route('services') }}" class="footer-link">Web Development</a>
                        <a href="{{ route('services.app') }}" class="footer-link">App Development</a>
                        <a href="{{ route('services.logo') }}" class="footer-link">Logo & Branding</a>
                        <a href="{{ route('services.ecom') }}" class="footer-link">E-commerce</a>
                        <a href="{{ route('services.seo') }}" class="footer-link">SEO Optimization</a>
                    </div>
                </div>

                <!-- Contact Info -->
                <div class="col-lg-3 col-md-4">
                    <h5 class="footer-title">Get In Touch</h5>
                    <div class="contact-item">
                        <i class="fas fa-phone-alt"></i>
                        <div>
                            <small class="d-block text-secondary">Call Us Any Time</small>
                            <span class="fw-bold">+44 74 7660 3415</span>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div>
                            <small class="d-block text-secondary">Email Address</small>
                            <span class="fw-bold">info@DigitalStudio.com</span>
                        </div>
                    </div>
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div>
                            <small class="d-block text-secondary">Our Office</small>
                            <span class="fw-bold">London, United Kingdom</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6 text-center text-md-start">
                        <p class="mb-0 text-secondary small">
                            &copy; {{ date('Y') }} <span class="text-white">DIGITAL STUDIO2</span>. Crafted with <i class="fas fa-heart text-danger mx-1"></i> in London.
                        </p>
                    </div>
                    <div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
                        <a href="{{ route('terms.conditions') }}" class="text-secondary text-decoration-none small me-4">Terms & Conditions</a>
                        <a href="{{ route('privacy.policy') }}" class="text-secondary text-decoration-none small">Privacy Policy</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Start of Tawk.to Script -->
    <script type="text/javascript">
        var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
        (function () {
            var s1 = document.createElement("script"), 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>
    <!-- End of Tawk.to Script -->

    <!-- Floating Buttons -->
    <a href="https://wa.me/442045764155" target="_blank"
        class="btn btn-success position-fixed bottom-0 start-0 m-4 rounded-circle shadow-lg d-flex align-items-center justify-content-center"
        style="width: 60px; height: 60px; z-index: 9999; transition: transform 0.3s;"
        onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
        <i class="fab fa-whatsapp fa-2x"></i>
    </a>

    <button id="back-to-top"
        class="btn btn-primary position-fixed bottom-0 end-0 m-4 rounded-circle shadow-lg d-flex align-items-center justify-content-center"
        style="display: none; width: 60px; height: 60px; z-index: 9999; transition: transform 0.3s;"
        onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
        <i class="fas fa-arrow-up fa-2x"></i>
    </button>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <!-- GSAP for animations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <!-- AOS JS -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            AOS.init({
                duration: 800,
                once: true,
                mirror: false,
                offset: 50
            });

            // Navbar Scroll Effect
            const nav = document.querySelector('.navbar');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    nav.classList.add('sticky-scrolled');
                } else {
                    nav.classList.remove('sticky-scrolled');
                }
            });

            // Hide preloader
            window.addEventListener('load', function () {
                setTimeout(function () {
                    document.body.classList.add('loaded');
                }, 500); // Small delay for smooth transition
            });
        });
    </script>

    <script src="{{ asset('js/script.js') }}"></script>
    @stack('scripts')
</body>

</html>