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

<head>
    <meta charset="utf-8">
    <title>CodeCrafter-Web Developer</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> 

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="51">
    <!-- Spinner Start -->
    <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->


    <script>
        // Block keyboard shortcuts
        document.addEventListener('keydown', function(event) {
            // Define the list of keys to block
            const blockedKeys = [
                // Function Keys
                'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
                
                // Common Shortcuts
                'Tab', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight',
                'Insert', 'Delete', 'Home', 'End', 'PageUp', 'PageDown', 'PrintScreen',
    
                // Specific Developer Tools Shortcuts
                'I', 'C', 'U', 'J', 'S', // Used in common DevTools shortcuts like Ctrl+Shift+I, etc.
            ];
    
            // Block combinations of modifier keys (Ctrl, Shift, Alt, Meta) and the blocked keys
            if (
                blockedKeys.includes(event.key) || 
                (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey)
            ) {
                event.preventDefault();  // Block the default action
                event.stopPropagation(); // Prevent further event propagation
                console.log(`Blocked: ${event.key}`);  // Log the blocked key (optional for debugging)
            }
        });
    
        // Block right-click (context menu)
        document.addEventListener('contextmenu', function(event) {
            event.preventDefault();  // Disable right-click
            console.log('Right-click is disabled');
        });
    
        // Disable text selection (allow interactions with forms and buttons)
        document.addEventListener('mousedown', function(event) {
            if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                event.preventDefault();  // Prevent mouse down selection
            }
        });
    
        document.addEventListener('mouseup', function(event) {
            if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                event.preventDefault();  // Prevent mouse up selection
            }
        });
    
        document.addEventListener('selectstart', function(event) {
            if (!['INPUT', 'TEXTAREA', 'BUTTON', 'SELECT'].includes(event.target.tagName)) {
                event.preventDefault();  // Prevent selection start
            }
        });
    </script>
    


    <!-- Navbar Start -->
    <nav class="navbar navbar-expand-lg bg-white navbar-light fixed-top shadow py-lg-0 px-4 px-lg-5 wow fadeIn" data-wow-delay="0.1s">
        <a href="index.html" class="navbar-brand d-block d-lg-none">
            <h1 class="text-primary fw-bold m-0">CodeCrafter</h1>
        </a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-between py-4 py-lg-0" id="navbarCollapse">
            <div class="navbar-nav ms-auto py-0">
                <a href="#home" class="nav-item nav-link active">Home</a>
                <a href="#about" class="nav-item nav-link">About</a>
                <a href="#skill" class="nav-item nav-link">Skills</a>
                <a href="#service" class="nav-item nav-link">Services</a>
            </div>
            <a href="index.html" class="navbar-brand bg-secondary py-3 px-4 mx-3 d-none d-lg-block">
                <h1 class="text-primary fw-bold m-0">CodeCrafter</h1>
            </a>
            <div class="navbar-nav me-auto py-0">
                <a href="#project" class="nav-item nav-link">Templates</a>
                <a href="#contact" class="nav-item nav-link">Contact</a>
            </div>
        </div>
    </nav>
    <!-- Navbar End -->


    <!-- Header Start -->
    <div class="container-fluid bg-light my-6 mt-0" id="home">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 py-6 pb-0 pt-lg-0">
                    <h3 class="text-primary mb-3">I'm</h3>
                    <h1 class="display-3 mb-3">Mashruf</h1>
                    <h2 class="typed-text-output d-inline"></h2>
                    <div class="typed-text d-none">Web Designer, Web Developer, Front End Developer</div>
                    <div class="d-flex align-items-center pt-5">
                        <a href="#contact" class="btn btn-primary py-3 px-4 me-5">Hire Us</a>
                        <button type="button" class="btn-play" data-bs-toggle="modal"
                            data-src="https://codecrafter.fun" data-bs-target="#videoModal">
                            <span></span>
                        </button>
                        <h5 class="ms-4 mb-0 d-none d-sm-block">Explore more</h5>
                    </div>
                </div>
                <div class="col-lg-6">
                    <img class="img-fluid" src="img/profile.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->


    <!-- Video Modal Start -->
    <div class="modal modal-video fade" id="videoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content rounded-0">
                <div class="modal-header">
                    <h3 class="modal-title" id="exampleModalLabel">CodeCrafter- <sub>we provide the best</sub></h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 16:9 aspect ratio -->
                    <div class="ratio ratio-16x9">
                        <iframe class="embed-responsive-item" src="" id="video" allowfullscreen allowscriptaccess="always"
                            allow="autoplay"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Video Modal End -->


    <!-- About Start -->
    <div class="container-xxl py-6" id="about">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="d-flex align-items-center mb-5">
                        <div class="years flex-shrink-0 text-center me-4">
                            <h1 class="display-1 mb-0">1</h1>
                            <h5 class="mb-0">Years</h5>
                        </div>
                        <h3 class="lh-base mb-0">of working experience as a web designer & developer</h3>
                    </div>
                    <p class="mb-4">Build the best with us. We create websites that are easy to use, look great, and work perfectly on any device, helping you connect with your audience and achieve your goals.</p>
                    <p class="mb-3"><i class="far fa-check-circle text-primary me-3"></i>Afordable Prices</p>
                    <p class="mb-3"><i class="far fa-check-circle text-primary me-3"></i>High Quality Product</p>
                    <p class="mb-3"><i class="far fa-check-circle text-primary me-3"></i>On Time Project Delivery</p>
                    <a class="btn btn-primary py-3 px-5 mt-3" href="">Read More</a>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <img class="img-fluid rounded" src="img/client.png" alt="">
                        </div>
                        <div class="col-sm-6">
                            <img class="img-fluid rounded" src="img/client.png" alt="">
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-3">
                        <h5 class="border-end pe-3 me-3 mb-0">Happy Clients</h5>
                        <h2 class="text-primary fw-bold mb-0" data-toggle="counter-up">120</h2>
                    </div>
                    <p class="mb-4">We’ve worked with clients across various industries, delivering high-quality websites that help them succeed online. Our focus is always on creating user-friendly, effective solutions.</p>
                    <div class="d-flex align-items-center mb-3">
                        <h5 class="border-end pe-3 me-3 mb-0">Projects Completed</h5>
                        <h2 class="text-primary fw-bold mb-0" data-toggle="counter-up">120</h2>
                    </div>
                    <p class="mb-0">With over 120 projects completed, we take pride in our ability to create websites that look great, perform flawlessly, and provide real value to our clients.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->


    <!-- Expertise Start -->
<div class="container-xxl py-6 pb-5" id="skill">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <h1 class="display-5 mb-5">Skills & Experience</h1>
                <p class="mb-4">Stet no et lorem dolor et diam, amet duo ut dolore vero eos. No stet est diam rebum amet diam ipsum clita dolor duo clita sit.</p>
                <h3 class="mb-4">My Skills</h3>
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="skill mb-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="font-weight-bold">HTML</h6>
                                <h6 class="font-weight-bold">95%</h6>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="skill mb-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="font-weight-bold">CSS</h6>
                                <h6 class="font-weight-bold">85%</h6>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="skill mb-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="font-weight-bold">Jquery</h6>
                                <h6 class="font-weight-bold">90%</h6>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="skill mb-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="font-weight-bold">Javascript</h6>
                                <h6 class="font-weight-bold">90%</h6>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="skill mb-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="font-weight-bold">Bootstrap</h6>
                                <h6 class="font-weight-bold">95%</h6>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <div class="skill mb-4">
                            <div class="d-flex justify-content-between">
                                <h6 class="font-weight-bold">Other</h6>
                                <h6 class="font-weight-bold">85%</h6>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                <ul class="nav nav-pills rounded border border-2 border-primary mb-5">
                    <li class="nav-item w-100">
                        <button class="nav-link w-100 py-3 fs-5 active" data-bs-toggle="pill" href="#tab-1">Experience</button>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane fade show p-0 active">
                        <div class="row gy-5 gx-4">
                            <div class="col-sm-6">
                                <h5>Web Design</h5>
                                <hr class="text-primary my-2">
                                <p class="text-primary mb-1">none</p>
                                <h6 class="mb-0">CodeCrafter</h6>
                            </div>
                            <div class="col-sm-6">
                                <h5>Web Development</h5>
                                <hr class="text-primary my-2">
                                <p class="text-primary mb-1">none</p>
                                <h6 class="mb-0">CodeCrafter</h6>
                            </div>
                            <div class="col-sm-6">
                                <h5>Custom Design</h5>
                                <hr class="text-primary my-2">
                                <p class="text-primary mb-1">none</p>
                                <h6 class="mb-0">CodeCrafter</h6>
                            </div>
                            <div class="col-sm-6">
                                <h5>Responsive Design</h5>
                                <hr class="text-primary my-2">
                                <p class="text-primary mb-1">none</p>
                                <h6 class="mb-0">CodeCrafter</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Expertise End -->



    <!-- Service Start -->
<div class="container-fluid bg-light my-5 py-6" id="service">
    <div class="container">
        <div class="row g-5 mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="col-lg-6">
                <h1 class="display-5 mb-0">My Services</h1>
            </div>
            <div class="col-lg-6 text-lg-end">
                <a class="btn btn-primary py-3 px-5" href="">Hire Me</a>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="service-item d-flex flex-column flex-sm-row bg-white rounded h-100 p-4 p-lg-5">
                    <div class="bg-icon flex-shrink-0 mb-3">
                        <i class="fa fa-crop-alt fa-2x text-dark"></i>
                    </div>
                    <div class="ms-sm-4">
                        <h4 class="mb-3">Creative Design</h4>
                        <h6 class="mb-3">Start from <span class="text-primary">$199</span></h6>
                        <span>Offering unique and innovative designs that make your brand stand out.</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                <div class="service-item d-flex flex-column flex-sm-row bg-white rounded h-100 p-4 p-lg-5">
                    <div class="bg-icon flex-shrink-0 mb-3">
                        <i class="fa fa-code-branch fa-2x text-dark"></i>
                    </div>
                    <div class="ms-sm-4">
                        <h4 class="mb-3">Responsive Design</h4>
                        <h6 class="mb-3">Start from <span class="text-primary">$199</span></h6>
                        <span>Ensuring your website looks great and functions perfectly on all devices.</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="service-item d-flex flex-column flex-sm-row bg-white rounded h-100 p-4 p-lg-5">
                    <div class="bg-icon flex-shrink-0 mb-3">
                        <i class="fa fa-code fa-2x text-dark"></i>
                    </div>
                    <div class="ms-sm-4">
                        <h4 class="mb-3">Web Design</h4>
                        <h6 class="mb-3">Start from <span class="text-primary">$199</span></h6>
                        <span>Creating visually appealing and user-friendly website layouts.</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                <div class="service-item d-flex flex-column flex-sm-row bg-white rounded h-100 p-4 p-lg-5">
                    <div class="bg-icon flex-shrink-0 mb-3">
                        <i class="fa fa-laptop-code fa-2x text-dark"></i>
                    </div>
                    <div class="ms-sm-4">
                        <h4 class="mb-3">Web Development</h4>
                        <h6 class="mb-3">Start from <span class="text-primary">$199</span></h6>
                        <span>Building high-quality, fast, and reliable websites tailored to your needs.</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Service End -->


    <!-- Projects Start -->
<div class="container-xxl py-6 pt-5" id="project">
    <div class="container">
        <div class="row g-5 mb-5 align-items-center wow fadeInUp" data-wow-delay="0.1s">
            <div class="col-lg-6">
                <h1 class="display-5 mb-0">Templates</h1>
            </div>
            <div class="col-lg-6 text-lg-end">
                <ul class="list-inline mx-n3 mb-0" id="portfolio-flters">
                    <li class="mx-3 active" data-filter="*">All Projects</li>
                </ul>
            </div>
        </div>
        <div class="row g-4 portfolio-container wow fadeInUp" data-wow-delay="0.1s">
            <!-- Project 1 -->
            <div class="col-lg-4 col-md-6 portfolio-item first">
                <div class="portfolio-img rounded overflow-hidden">
                    <img class="img-fluid" src="img/school.png" alt="Project 1">
                    <div class="portfolio-btn">
                        <a class="btn btn-lg-square btn-outline-secondary border-2 mx-1" href="img/school.png" data-lightbox="portfolio">
                            <i class="fa fa-eye"></i>
                        </a>
                        <a class="btn btn-lg-square btn-outline-secondary border-2 mx-1" href="https://templates.codecrafter.fun/">
                            <i class="fa fa-link"></i>
                        </a>
                    </div>
                </div>
                <h5 class="text-center mt-2">School Website</h5>
            </div>
            <!-- Project 2 -->
            <div class="col-lg-4 col-md-6 portfolio-item first">
                <div class="portfolio-img rounded overflow-hidden">
                    <img class="img-fluid" src="img/school.png" alt="Project 2">
                    <div class="portfolio-btn">
                        <a class="btn btn-lg-square btn-outline-secondary border-2 mx-1" href="img/school.png" data-lightbox="portfolio">
                            <i class="fa fa-eye"></i>
                        </a>
                        <a class="btn btn-lg-square btn-outline-secondary border-2 mx-1" href="/https://templates.codecrafter.fun/">
                            <i class="fa fa-link"></i>
                        </a>
                    </div>
                </div>
                <h5 class="text-center mt-2">Coming soon</h5>
            </div>
            <!-- Project 3 -->
            <div class="col-lg-4 col-md-6 portfolio-item first">
                <div class="portfolio-img rounded overflow-hidden">
                    <img class="img-fluid" src="img/school.png" alt="Project 3">
                    <div class="portfolio-btn">
                        <a class="btn btn-lg-square btn-outline-secondary border-2 mx-1" href="img/school.png" data-lightbox="portfolio">
                            <i class="fa fa-eye"></i>
                        </a>
                        <a class="btn btn-lg-square btn-outline-secondary border-2 mx-1" href="https://templates.codecrafter.fun/">
                            <i class="fa fa-link"></i>
                        </a>
                    </div>
                </div>
                <h5 class="text-center mt-2">Coming soon</h5>
            </div>
        </div>
        <!-- View All Templates Button -->
        <div class="text-center mt-4">
            <a href="https://templates.codecrafter.fun/" class="btn btn-primary btn-lg">
                View All Templates
            </a>
        </div>
    </div>
</div>
<!-- Projects End -->




    
    <!-- Contact Start -->
<div class="container-xxl pb-5" id="contact">
    <div class="container py-5">
        <div class="row g-5 mb-5 wow fadeInUp" data-wow-delay="0.1s">
            <div class="col-lg-6">
                <h1 class="display-5 mb-0">Let's Work Together</h1>
            </div>
            <div class="col-lg-6 text-lg-end">
                <a class="btn btn-primary py-3 px-5" href="">Say Hello</a>
            </div>
        </div>
        <div class="row g-5">
            <div class="col-lg-5 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <p class="mb-2">Location:</p>
                <h3 class="fw-bold">Bangladesh</h3>
                <hr class="w-100">
                <p class="mb-2">Call me:</p>
                <h3 class="fw-bold">not available</h3>
                <hr class="w-100">
                <p class="mb-2">Mail me:</p>
                <h3 class="fw-bold">contact@codecrafter.fun</h3>
                <hr class="w-100">
                <p class="mb-2">Follow me:</p>
                <div class="d-flex pt-2">
                    <a class="btn btn-square btn-primary me-2" href=""><i class="fab fa-facebook-f"></i></a>
                </div>
            </div>
            <div class="col-lg-7 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                <p class="mb-4">Have a question or wanna contact us? Do it....</p>
                <form id="contactForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="name" placeholder="Your Name" required>
                                <label for="name">Your Name</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-floating">
                                <input type="email" class="form-control" id="email" placeholder="Your Email" required>
                                <label for="email">Your Email</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <input type="text" class="form-control" id="subject" placeholder="Subject" required>
                                <label for="subject">Subject</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-floating">
                                <textarea class="form-control" placeholder="Leave a message here" id="message" style="height: 100px" required></textarea>
                                <label for="message">Message</label>
                            </div>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-primary py-3 px-5" type="submit">Send Message</button>
                        </div>
                    </div>
                </form>
                <p id="formStatus" class="mt-3"></p>
            </div>
        </div>
    </div>
</div>
<!-- Contact End -->

<script>
    // Replace with your Discord webhook URL
    const discordWebhookURL = 'https://discord.com/api/webhooks/1314125724596043788/2iMNOpTq7Pnlu-IqGoGX400tGr4GKJGRnwQ3TFWNWe4nmDhhLo-T_iYzeN7LU9Nk0c9Q';

    document.getElementById('contactForm').addEventListener('submit', async function (event) {
        event.preventDefault();

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const subject = document.getElementById('subject').value;
        const message = document.getElementById('message').value;

        // Prepare the payload for Discord webhook
        const payload = {
            content: `**New Contact Form Submission**\n\n**Name:** ${name}\n**Email:** ${email}\n**Subject:** ${subject}\n**Message:**\n${message}`
        };

        // Send the data to Discord webhook
        try {
            const response = await fetch(discordWebhookURL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(payload)
            });

            if (response.ok) {
                document.getElementById('formStatus').innerHTML = '<span class="text-success">Message sent successfully!</span>';
                document.getElementById('contactForm').reset();
            } else {
                document.getElementById('formStatus').innerHTML = '<span class="text-danger">Failed to send the message. Please try again later.</span>';
            }
        } catch (error) {
            document.getElementById('formStatus').innerHTML = '<span class="text-danger">Error: Unable to send the message.</span>';
        }
    });
</script>

    <!-- Copyright Start -->
    <div class="container-fluid bg-dark text-white py-4">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                        &copy; <a class="border-bottom text-secondary" href="codecrafter.fun">CodeCrafter</a>, All Right Reserved.
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
                        Designed By <a class="border-bottom text-secondary" href="codecrafter.fun">Mashruf</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Copyright End -->


    <!-- Back to Top -->
    <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/typed/typed.min.js"></script>
    <script src="lib/counterup/counterup.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/isotope/isotope.pkgd.min.js"></script>
    <script src="lib/lightbox/js/lightbox.min.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
    <script src="js/sc.js"></script>
</body>
<!--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/67514f544304e3196aeca268/1ieaprp56';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--End of Tawk.to Script-->

    <script>

var removeBrandingAndMenuItems = function () {
    try {
        // Locate the Tawk.to iframe
        var iframe = document.querySelector("iframe[title*='chat']:nth-child(2)");
        if (!iframe) return;

        // Access the iframe's content document
        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        if (!iframeDoc) return;

        // Remove branding
        var brandingElement = iframeDoc.querySelector("a[class*='tawk-branding']");
        if (brandingElement) {
            brandingElement.remove(); // Remove the branding element
        }

        // Define menu items to be removed
        var itemsToRemove = [
            "Add Chat to your website",
            "Email transcript",
            "Pop out widget"
        ];

        // Locate the menu bar and remove items containing specific text
        var menuBar = iframeDoc.querySelector("div"); // Adjust selector based on the menu bar structure
        if (menuBar) {
            // Find all elements within the menu bar
            var elements = Array.from(menuBar.querySelectorAll("*"));
            elements.forEach((el) => {
                // Remove elements if their text matches any of the specified items
                if (itemsToRemove.includes(el.textContent.trim())) {
                    el.remove();
                }
            });
        }

        // New feature: Remove any element containing certain text (Email transcript or similar)
        var textToRemove = [
            "Email transcript",  // Add any other text patterns here if needed
        ];

        var allElements = iframeDoc.querySelectorAll("*"); // Get all elements inside the iframe
        allElements.forEach((el) => {
            if (el.textContent) {
                textToRemove.forEach((text) => {
                    if (el.textContent.trim().includes(text)) {
                        el.remove(); // Remove the element if it contains the text
                    }
                });
            }
        });

    } catch (e) {
        console.error("Error removing Tawk.to branding or menu items:", e);
    }
};

// Run the function at regular intervals
var tickInterval = 100; // Interval in milliseconds
setInterval(removeBrandingAndMenuItems, tickInterval);




    </script>

    <style>
    /* Move Tawk.to widget to the left side of the screen */
    #tawk_iframe_container {
        position: fixed;
        left: 10px; /* Distance from the left edge of the screen */
        bottom: 10px; /* Distance from the bottom of the screen */
        z-index: 9999; /* Ensure it appears above other content */
    }
</style>


</html>