{% extends 'website/base/base.html' %}
{% block title %} Cinematography Services {% endblock %}
{% block meta_description %}Digi-inn is a company that also provides their clients with the video editing and video creation services. Click to read more.{% endblock %}

{% block stylesheets %}





<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link href="../static/website/assets/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/website/assets/css/flaticon.css" rel="stylesheet">
<link href="../static/website/assets/css/owl.css" rel="stylesheet">
<link href="../static/website/assets/css/bootstrap.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/website/assets/css/animate.css" rel="stylesheet">
<link href="../static/website/assets/css/aos.css" rel="stylesheet">
<link href="../static/website/assets/css/nice-select.css" rel="stylesheet">
<link href="../static/website/assets/css/jquery-ui.css" rel="stylesheet">
<link href="../static/website/assets/css/elpath.css" rel="stylesheet">
<link href="../static/website/assets/css/color.css" id="jssDefault" rel="stylesheet">
<link href="../static/website/assets/css/rtl.css" rel="stylesheet">
<link href="../static/website/assets/css/style.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/service.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/cta.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/process.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/pricing.css" rel="stylesheet">
<link href="../static/website/assets/css/module-css/contact.css" rel="stylesheet">
<link href="../static/website/assets/css/responsive.css" rel="stylesheet">


<style>
        .owl-carousel .service-block {
            float: none; /* Prevents stacking vertically */
            width: 100%; /* Ensures each item takes full space */
}
body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

.process-container {  
            text-align: center;
        }
        .process-step img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }
        /* Curved Arrow CSS */
        .process-arrow {
            position: relative;
            width: 80px;
            height: 30px;
            margin-right: 20px;
            margin-left: 20px;
        }

        .process-arrow::before {
            content: "";
            position: absolute;
            width: 80px;
            height: 40px;
            border: 2px solid rgb(255, 255, 255);
            border-color: transparent transparent rgb(255, 255, 255) rgb(255, 255, 255);
            border-radius: 50% 0 0 50%;
            top: -5px;
            left: 0;
            transform: rotate(-45deg);
        }

        .process-arrow::after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            border-top: 2px solid rgb(255, 255, 255);
            border-right: 2px solid rgb(255, 255, 255);
            top: 18px;
            left: 70px;
            transform: rotate(45deg);
        }

   
    .owl-carousel .owl-dots {
        display: none !important; /* This will ensure dots do not appear */
    }
    .cta-section {
    height: 400px; /* Set desired height for the section */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-content .cta-btn {
    font-size: 18px; /* Adjust button font size */
    padding: 15px 30px; /* Adjust padding for the button */
    background-color: #FF5733; /* Customize the button color */
    color: white; /* Button text color */
    border-radius: 5px; /* Optional border radius for rounded corners */
}

.cta-section {
  position: relative; /* Required for pseudo-element positioning */
  z-index: 1; /* Ensure it stays above the pseudo-element */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  color: #fff; /* Optional: Ensures text is visible on dark overlay */
}

.cta-section::before {
  content: ""; /* Creates the pseudo-element */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Atomic black overlay with 50% opacity */
  z-index: -1; /* Places the overlay behind the content */
}

.gallery-slider .item img {
    width: 100%; /* Ensures images take up full width of their container */
    height: 200px; /* Set a uniform height */
    object-fit: cover; /* Ensures the image is cropped to fit the dimensions while maintaining aspect ratio */
    border-radius: 10px; /* Optional: For rounded corners */
}

</style>


{% endblock stylesheets %}

{% block content %}










        <section class="banner-style-two banner-style-five p_relative pt_150 pb_120" style="background-image: url('../static/website/assets/images/cinematography-01.png'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 700px;">
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column" style="display: flex; align-items: center; justify-content: center; height: 500px;">
                        <div class="content-box">
                            <h3 style="font-size: 40px; margin-bottom: 10px; font-weight: 800; background: linear-gradient(45deg, rgba(107,145,199,1) 0%, rgba(214,91,129,1) 100%); -webkit-background-clip: text; color: transparent;">
                                Cinematography
                            </h3>
                            <p style="font-size: 19px;">
                                Digi-Inn provides high-quality cinematography services that bring your vision to life. Our team of creative professionals captures stunning visuals and powerful storytelling to enhance your brand’s presence. Whether for commercials, documentaries, or corporate videos, we create impactful visual content that leaves a lasting impression.
                            </p>      
                        </div>
                    </div>
                </div>
            </div>
        </section>



         




        <section class="cta-section p-relative pt_100 pb_100" style="background-image: url(../static/website/assets/images/cinematography-02.png); background-attachment: fixed; background-position: center; background-size: cover; height: 0px !important;">
            <div class="auto-container">
                <div class="cta-content text-center">
                    <a href="https://leadmagnet.digiinnsolutions.com/" 
                       class="theme-btn btn-two" 
                       target="_blank" 
                       rel="noopener nofollow">
                       <span>Consult Now</span>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- service section starts -->
        <section class="service-style-two pt_100">
            <div class="auto-container">
                <!-- Owl Carousel wrapper -->
                <div class="row clearfix owl-carousel">
                    <div class="col-lg-4 col-md-6 col-sm-12 service-block">
                        <div class="service-block-one" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                            <div class="inner-box">
                                <div class="icon-box">
                                    <img src="../static/website/assets/images/cinematics/cinematics-02.png" alt="">
                                </div>
                                <h3 style="color: white;">Product Shoot</h3>
                                <p>
                                    Get high-quality product videos that showcase your products and drive sales. We work with you to develop a compelling concept and storyboard, and we leverage our expertise to capture footage that highlights the key features and benefits of your product.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 service-block">
                        <div class="service-block-one" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                            <div class="inner-box">
                                <div class="icon-box">
                                    <img src="../static/website/assets/images/cinematics/cinematics-03.png" alt="">
                                </div>
                                <h3  style="color: white;">Video Graphy</h3>
                                <p>
                                    We capture delightful and engaging videos of your events, conferences, and other business activities. Let us understand your goals and objectives, and we will develop a custom videography plan to document the important moments.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 service-block">
                        <div class="service-block-one" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                            <div class="inner-box">
                                <div class="icon-box">
                                    <img src="../static/website/assets/images/cinematics/cinematics-01.png" alt="">
                                </div>
                                <h3 style="color: white;">Drone Coverage</h3>
                                <p>
                                    Capture unique and stunning aerial footage of your business or event from any angle. Digi Inn has well-experienced drone pilots who will help you achieve your marketing goals.
                                </p>
                                    	                            
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 service-block">
                        <div class="service-block-one" style="background: url('../static/website/assets/images/card-bg.png') no-repeat center center; background-size: cover; border-radius: 10px;">
                            <div class="inner-box">
                                <div class="icon-box">
                                    <img src="../static/website/assets/images/cinematics/cinematics-03.png" alt="">
                                </div>
                                <h3 style="color: white;">Video Editing</h3>
                                <p>
                                    Get your videos to perfection by adding music, sound effects, and graphics to create a polished and professional product.
                                </p>
                            </div>
                        </div>
                    </div>
                    
                    
                    <!-- Add more service items as needed -->
                </div>
            </div>
        </section>
        
        <!-- Inline JavaScript for Owl Carousel -->
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                $('.owl-carousel').owlCarousel({
                    loop: true,
                    margin: 30,
                    nav: true,
                    dots: true,
                    autoplay: true,
                    autoplayTimeout: 2000,
                    autoplaySpeed: 800,
                    autoplayHoverPause: true,
                    responsive: {
                        0: {
                            items: 1
                        },
                        600: {
                            items: 2
                        },
                        1000: {
                            items: 3
                        }
                    }
                });
            });
        </script>
            </div>
        </section>
        <!-- service-section end -->




         <!-- Our process section  start from here -->

         <section class="service-style-two pb_100">
            <div class="auto-container">
                <div class="container">
                    <div class="sec-title light centred mb_20">
                        <h2 class="pb_60">Our Process</h2>
                    </div>
                    <div class="process-container">
                        <div class="row justify-content-center align-items-center">
                            <!-- Step 1 -->
                            <div class="col-md-2 col-12 text-center process-step mb-4 mb-md-0">
                                <img src="../static/website/assets/images/process (1).png" alt="Step 1" class="img-fluid mb-3">
                                <h4 style="font-family: poppins; font-size: 17px; color: white;">Drop Your Query</h4>
                                <p style="color: white; font-size: 13px; line-height: 20px; margin-top: 10px;">
                                    Fill the form, share details, and get started
                                </p>
                            </div>
                            <!-- Arrow -->
                            <div class="col-md-1 col-12 text-center mb-4 mb-md-0">
                                <img src="../static/website/assets/images/arrows-01.png" alt="Arrow" class="arrow-img">
                            </div>
                            <!-- Step 2 -->
                            <div class="col-md-2 col-12 text-center process-step mb-4 mb-md-0">
                                <img src="../static/website/assets/images/process (2).png" alt="Step 2" class="img-fluid mb-3">
                                <h4 style="font-family: poppins; font-size: 17px; color: white;">Get Consultation</h4>
                                <p style="color: white; font-size: 13px; line-height: 20px; margin-top: 10px;">
                                    Our expert will contact you with tailored advice
                                </p>
                            </div>
                            <!-- Arrow -->
                            <div class="col-md-1 col-12 text-center mb-4 mb-md-0">
                                <img src="../static/website/assets/images/arrows-02.png" alt="Arrow" class="arrow-img">
                            </div>
                            <!-- Step 3 -->
                            <div class="col-md-2 col-12 text-center process-step mb-4 mb-md-0">
                                <img src="../static/website/assets/images/process (4).png" alt="Step 3" class="img-fluid mb-3">
                                <h4 style="font-family: poppins; font-size: 17px; color: white;">Set Up a Meeting</h4>
                                <p style="color: white; font-size: 13px; line-height: 20px; margin-top: 10px;">
                                    Schedule a meeting to finalize your project
                                </p>
                            </div>
                            <!-- Arrow -->
                            <div class="col-md-1 col-12 text-center mb-4 mb-md-0">
                                <img src="../static/website/assets/images/arrows-01.png" alt="Arrow" class="arrow-img">
                            </div>
                            <!-- Step 4 -->
                            <div class="col-md-2 col-12 text-center process-step">
                                <img src="../static/website/assets/images/process (3).png" alt="Step 4" class="img-fluid mb-3">
                                <h4 style="font-family: poppins; font-size: 17px; color: white;">Get Started!</h4>
                                <p style="color: white; font-size: 13px; line-height: 20px; margin-top: 10px;">
                                    Our team begins turning your vision into reality
                                </p>
                            </div>
                        </div>

                        <style>
                            @media (max-width: 768px) {
                                .process-container .arrow-img {
                                    display: none; /* Completely hide arrows on mobile */
                                }
                            }
                        </style>
                    </div>
                </div>
            </div>
        </section>



        <!-- Our process section  ends from here -->




        <!-- Tech Tools-section -->
        <section class="clients-section pb_100">
            <div class="auto-container">
                <div class="row align-items-center">
                    <!-- Left Column: Tools and Tech -->
                    <div class="col-md-6">
                        <div class="sec-title light mb_60">
                            <h2 class="pb_20">Our Expertise</h2>
                        </div>
                        <div class="five-item-carousel owl-carousel owl-theme owl-dots-none owl-nav-none pb_40">
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (1).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (2).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (3).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (4).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (5).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (6).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (7).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (8).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (9).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (10).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>            
                            
                        </div>
                        <div class="five-item-carousel owl-carousel owl-theme owl-dots-none owl-nav-none">
                            
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (11).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (12).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (13).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (14).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (15).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (16).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (17).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (18).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure>                  
                            <figure class="clients-logo"><img src="../static/website/assets/images/tools/tools (19).png" alt="tech" style="max-width: 100px; height: 80px; margin: 10px auto;"></figure> 
                        </div>
                    </div>
        
                    <!-- Right Column: Gallery -->
                    <div class="col-md-6">
                        <div class="sec-title light mb_60">
                            <h2 class="pb_40">Gallery</h2>
                        </div>
                        <div class="gallery-slider owl-carousel owl-theme">
                            <div class="item">
                                <img src="../static/website/assets/images/resource/testimonial-2.png" alt="gallery" class="img-fluid rounded w-100">
                            </div>
                            <div class="item">
                                <img src="../static/website/assets/images/resource/testimonial-2.png" alt="gallery" class="img-fluid rounded w-100">
                            </div>
                            <div class="item">
                                <img src="../static/website/assets/images/resource/testimonial-2.png" alt="gallery" class="img-fluid rounded w-100">
                            </div>
                            <div class="item">
                                <img src="../static/website/assets/images/resource/testimonial-2.png" alt="gallery" class="img-fluid rounded w-100">
                            </div>
                            <div class="item">
                                <img src="../static/website/assets/images/resource/testimonial-2.png" alt="gallery" class="img-fluid rounded w-100">
                            </div>
                            <div class="item">
                                <img src="../static/website/assets/images/resource/testimonial-2.png" alt="gallery" class="img-fluid rounded w-100">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Inline JavaScript -->
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                $('.gallery-slider').owlCarousel({
                    loop: true,              // Infinite loop
                    margin: 10,              // Space between images
                    nav: false,              // Remove navigation buttons
                    dots: false,             // Hide dots navigation
                    autoplay: true,          // Auto sliding
                    autoplayTimeout: 3000,   // 3-second delay
                    responsive: {
                        0: {
                            items: 1         // 1 item on small screens
                        },
                        768: {
                            items: 2         // 2 items on medium screens
                        },
                        1024: {
                            items: 4         // 4 items on large screens
                        }
                    }
                });
            });
        </script>
        <!-- Tech Tools-section end -->






         <!-- contact-section -->
         <section class="contact-section p_relative pb_120">
            <div class="auto-container container">
                <div class="sec-title mb_60 text-center">
                    <h2 style="color: white;">Get Quotation Now</h2>
                </div>
                <div class="form-inner">
                    <form id="contact-form">
                        {% csrf_token %}
                        
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="username" placeholder="Your Name" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="company_name" placeholder="Your Company Name" required>
                            </div>
                        </div>                       
                    
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="email" class="form-control" name="email" placeholder="Your Email" required>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="location" placeholder="Your Location" required>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <input type="text" class="form-control" name="contact_no" placeholder="Your Contact Number" required>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <label class="d-block mb-2" style="color: white;">Select Required Service:</label>
                                <div class="d-flex flex-wrap gap-3">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service1" value="Software Development" required>
                                        <label class="form-check-label" for="service1">Software Development</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service2" value="Web Development" required>
                                        <label class="form-check-label" for="service2">Web Development</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service3" value="Content Writing" required>
                                        <label class="form-check-label" for="service3">Content Writing</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service5" value="Graphic Designing" required>
                                        <label class="form-check-label" for="service5">Graphic Designing</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service6" value="Social Media Marketing" required>
                                        <label class="form-check-label" for="service6">Social Media Marketing</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service7" value="Cinematography" required>
                                        <label class="form-check-label" for="service7">Cinematography</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="selected_service" id="service4" value="Search Engine Optimization" required>
                                        <label class="form-check-label" for="service4">Search Engine Optimization</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group mb-3">
                                <textarea class="form-control" name="message" placeholder="Type your message or description" rows="4"></textarea>
                            </div>
                        </div>
                    
                        <div class="row clearfix">
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn mr-0 Right pt_20 text-center">
                                <button style="border: none;" class="theme-btn btn-two btn btn-primary w-100" type="submit">
                                    <span>Send Message</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- Success Message -->
                    <div id="success-message" style="display: none; color: green; text-align: center; margin-top: 10px;">
                        Your message has been sent successfully!
                    </div>
                    
                    <script>
                        document.getElementById("contact-form").addEventListener("submit", function(event) {
                            event.preventDefault();  // Prevent normal form submission
                            
                            let formData = new FormData(this);
                            
                            fetch("{% url 'submit_lead' %}", {
                                method: "POST",
                                body: formData,
                                headers: {
                                    "X-CSRFToken": document.querySelector("[name=csrfmiddlewaretoken]").value
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    document.getElementById("success-message").style.display = "block";
                                    document.getElementById("contact-form").reset();
                                } else {
                                    alert("Something went wrong. Please try again.");
                                }
                            })
                            .catch(error => console.error("Error:", error));
                        });
                    </script>
                    
                </div>
            </div>
        </section>
        <!-- contact-section end -->






       


      

       


      


       

        {% block javascripts %}


    <!-- jequery plugins -->
    <script src="../static/website/assets/js/jquery.js"></script>
    <script src="../static/website/assets/js/bootstrap.min.js"></script>
    <script src="../static/website/assets/js/owl.js"></script>
    <script src="../static/website/assets/js/wow.js"></script>
    <script src="../static/website/assets/js/jquery.fancybox.js"></script>
    <script src="../static/website/assets/js/appear.js"></script>
    <script src="../static/website/assets/js/isotope.js"></script>
    <script src="../static/website/assets/js/jquery.nice-select.min.js"></script>
    <script src="../static/website/assets/js/aos.js"></script>
    <script src="../static/website/assets/js/jquery-ui.js"></script>
    <script src="../static/website/assets/js/product-filter.js"></script>
    <script src="../static/website/assets/js/bxslider.js"></script>
    <script src="../static/website/assets/js/jquery.bootstrap-touchspin.js"></script>
    <script src="../static/website/assets/js/validation.js"></script>

    <!-- main-js -->
    <script src="../static/website/assets/js/script.js"></script>

    {% endblock javascripts %}
    {% endblock content %}