{% extends 'website/base/base.html' %}
{% block title %} About {% endblock %}
{% block meta_description %}Our satisfied clients have recommended Digi-inn as the best software house in Pakistan. We turn ideas into impactful digital realities.{% 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">





<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>








<style>
        body{
            background-image: url('../static/website/assets/images/entire-body.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            margin: 0;
            padding: 0;
        }

       
        .cta-section {
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

        .about-buttons{
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 13px;
            padding-bottom: 13px;
        }


    .cta-section {
        position: relative;
        z-index: 1;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
        color: #fff;
    }

    .cta-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: -1;
    }


    
.modal-content {
    background-image: url('../static/website/assets/images/entire-body.png');
    background-size: cover;
    background-position: center center;
    color: #fff;
    border-radius: 10px;
}


.modal-header {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

.modal-footer {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}









.gallery-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}


.gallery-row {
    display: flex;
    flex-wrap: nowrap;
    animation: slideRow 15s linear infinite;
}


.gallery-image {
    flex: 0 0 33.33%;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
    
}
.thumbnail{
    width: 100%; /* Ensures images take up full width of their container */
    height: 150px; /* 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 */

}


.top-row {
    animation: slideTopRow 15s linear infinite;
}


.bottom-row {
    animation: slideBottomRow 15s linear infinite;
}


@keyframes slideTopRow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


@keyframes slideBottomRow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}


.modal-dialog-centered {
    max-width: 50%;
    max-height: 50%;
    justify-content: center;
    text-align: center;
}

#fullImage {
    width: 50%;
    height: auto;
}
</style>


{% endblock stylesheets %}

{% block content %}





        <!-- page-title -->
        <section class="page-title centred" style="background-image: url('../static/website/assets/images/home-dev.png'); background-size: cover; background-position: center-center; background-repeat: no-repeat; height: 500px; position: relative;">
            <!-- Overlay -->
            <div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);"></div>
        
            <div class="auto-container">
                <div class="content-box">
                    <p style="color: white; font-size: 21px;">
                        We turn ideas into impactful digital realities. With a commitment to innovation and excellence, we craft tailored solutions in digital marketing, web development, and software design. Our approach is rooted in understanding your unique goals and delivering results that truly resonate.
                    </p>
                </div>
            </div>

            <style>
                @media (max-width: 768px) {
    .page-title {
        height: auto; /* Allow dynamic height for smaller screens */
    }

    .content-box p {
        font-size: 14px; /* Reduce font size for mobile */
        padding: 15px; /* Add more padding for mobile readability */
    }
}

@media (max-width: 576px) {
    .page-title {
        height: auto; /* Adjust height further for very small screens */
    }

    .content-box p {
        font-size: 12px; /* Reduce font size for smaller devices */
    }
}
            </style>
        </section>
        <!-- page-title end -->



         <!-- banner-style-five -->
        <section class="banner-style-two banner-style-five p_relative pt_30 pb_30">
            <div class="pattern-layer-2" style="background-image: url(../static/website/assets/images/shape/bg-03.png);"></div>
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content-box">
                            <h3 style="font-size: 47px; 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;">
                                Services Expension:
                            </h3>
                            <p style="font-size: 17px;">
                                Digi-Inn is a leading IT solutions company that provides custom software development services to businesses of all sizes. Our team of experienced and skilled developers can create custom software solutions that meet the specific needs of your business.
                            </p>      
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-12 image-column">
                        <div class="image-box">
                            <figure class="image">
                                <img src="../static/website/assets/images/map and services-01.png" alt="Service Image" width="100%" height="auto">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- banner-style-five end -->




        <section class="p-relative pb_120">
            <div class="container">
                <div class="row">
                    <!-- First Column -->
                    <div class="col-md-6 col-12 d-flex justify-content-center align-items-center mb-3 mb-md-0">
                        <div class="cta-content text-center">  
                            <!-- Image to open the modal for Vision -->
                            <img src="../static/website/assets/images/vision.jpeg" alt="Our Vision" 
                                 class="img-fluid clickable-image" data-toggle="modal" data-target="#visionModal" 
                                 style="cursor: pointer;">
                        </div>
                    </div>
        
                    <!-- Second Column -->
                    <div class="col-md-6 col-12 d-flex justify-content-center align-items-center">
                        <div class="cta-content text-center">
                            <!-- Image to open the modal for Mission -->
                            <img src="../static/website/assets/images/mission.jpeg" alt="Our Mission" 
                                 class="img-fluid clickable-image" data-toggle="modal" data-target="#missionModal" 
                                 style="cursor: pointer;">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Modal for Vision -->
        <div class="modal fade" id="visionModal" tabindex="-1" role="dialog" aria-labelledby="visionModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="visionModalLabel">Our Vision</h5>
                        <button style="color: white;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p style="color: white;">We will turn technology into assets for your business. To empower organizations to develop by utilizing our powerful promoting strategies and to convey the greatest measure of fulfillment to our important clients.</p>
                    </div>
                    <div class="modal-footer">
                        <button style="border: none;" type="button" class="btn btn-secondary btn-two theme-btn" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal for Mission -->
        <div class="modal fade" id="missionModal" tabindex="-1" role="dialog" aria-labelledby="missionModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 style="color: white;" class="modal-title" id="missionModalLabel">Our Mission</h5>
                        <button style="color: white;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p style="color: white;">In order to help our clients grow their businesses and realize their marketing goals by offering innovative and effective integrated marketing and public relations solutions. In doing so, we will provide consistently successful, unique, and forward-thinking digital marketing solutions that will take into account the individual needs of each client and will be able to give each customer the best possible service.</p>
                    </div>
                    <div class="modal-footer">
                        <button style="border: none;" type="button" class="btn btn-secondary btn-two theme-btn" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        




          <section class="cta-section p-relative pt_100 pb_100" style="background-image: url(../static/website/assets/images/connect-us.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="{% url 'contact' %}" class="theme-btn btn-two"><span>Connect Now</span></a>
                </div>
            </div>
        </section>



         <!-- banner-style-five -->
        <section class="banner-style-two banner-style-five p_relative pt_150 pb_120">
            
            <div class="auto-container">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12 col-sm-12 content-column">
                        <div class="content-box">
                            <h3 style="color: white; margin-bottom: 30px;">
                                We Are Digi-inn
                            </h3>
                            
                            <!-- Gallery Container -->
                            <div class="gallery-container">
                                <!-- Upper Row (Left to Right Slide) -->
                                <div class="gallery-row top-row d-flex justify-content-start">
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (1).jpeg" alt="Image 1" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (1).jpg" alt="Image 2" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (2).jpeg" alt="Image 3" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (3).jpeg" alt="Image 3" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (4).jpeg" alt="Image 3" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    
                                </div>
                                
                                <!-- Bottom Row (Right to Left Slide) -->
                                <div class="gallery-row bottom-row d-flex justify-content-end">
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (5).jpeg" alt="Image 4" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (6).jpeg" alt="Image 5" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (7).jpeg" alt="Image 6" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (8).jpeg" alt="Image 6" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                    <div class="gallery-image">
                                        <img src="../static/website/assets/images/gallery/event (9).jpeg" alt="Image 6" class="thumbnail" data-toggle="modal" data-target="#imageModal" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Modal for Image View -->
                    <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 style="color: white;" class="modal-title" id="imageModalLabel">Digi inn</h5>
                            <button style="color: white;" type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <img src="" alt="Full Image" id="fullImage" class="img-fluid">
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary btn-two theme-btn" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>


                    <script>
                        $(document).ready(function() {
                            // When an image thumbnail is clicked, show it in the modal
                            $('.thumbnail').click(function() {
                                var imgSrc = $(this).attr('src'); // Get the image source
                                $('#fullImage').attr('src', imgSrc); // Set it as the src for the modal's full image
                            });
                        });
                    </script>
                    <div class="col-lg-6 col-md-12 col-sm-12 image-column" style="position: relative; background: url('../static/website/assets/images/bg_services.jpeg') no-repeat center center / cover; height: 350px;">
                        <!-- Overlay for atomic black effect -->
                        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7);"></div>
                        
                        <!-- Content on top of the background -->
                        <div style="position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; color: white; text-align: center;">
                            
                            <p style="max-width: 80%; margin-bottom: 20px; color: white;">
                                Discover the talented individuals who drive our success. Our team works together to deliver innovative solutions and exceptional results for our clients.
                            </p>
                            <a href="{% url 'teams' %}" class="btn-two theme-btn about-buttons" style="padding: 10px 20px; background-color: #f44c4c; color: white; text-decoration: none; border-radius: 5px;">View Team</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- banner-style-five end -->
        
        




        








        





       


      

       


      


       

              


        <!--Scroll to top-->
        <div class="scroll-to-top">
            <div>
                <div class="scroll-top-inner">
                    <div class="scroll-bar">
                        <div class="bar-inner"></div>
                    </div>
                    <div class="scroll-bar-text">Go To Top</div>
                </div>
            </div>
        </div>
        <!-- Scroll to top end -->
        
    </div>

    {% 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 %}