{% extends "base.html" %}
{% load static %}
{% block content %}


<!-- banner section -->
<section class="jarallax p-0 full-screen video-banner top-position1"
         data-overlay-dark="65"
         data-jarallax 
         data-speed="0.8"
         {% if banner.video_file %}
             data-video-src="mp4:http://127.0.0.1:8000{{ banner.video_file.url }}"
         {% else %}
             style="background-image: url({% static 'img/banner/video-img.jpg' %});"
         {% endif %}>
       
            <div class="container banner-wrapper">
                <div class="row align-items-center min-vh-100 justify-content-center">
                    <div class="col-xl-10 text-center banner-content "><br><br><br><br><br><br>

                        {% if banner.subtitle %}
                        <h4 class="banner-text subtitle text-white">{{ banner.subtitle }}</h4>
                        {% endif %}

                        {% if banner.title %}
                        <h5 class="banner-text title"><span class="text-primary">{{ banner.title }}</span></h5>
                        {% endif %}

                    </div>
                </div>
            </div>


            <style>
             .banner-text {
                opacity: 0;
                line-height: 1.4em;
                font-weight: 800;
                transition: .4s ease-in-out;
            }

            /* Subtitle animation */
            .subtitle {
                font-size: 38px;
                animation: swipeLeft 1.3s ease-out forwards .2s;
            }

            /* Title animation */
            .title {
                font-size: 42px;
                animation: swipeRight 1.3s ease-out forwards .8s;
            }

            /* Keyframes */
            @keyframes swipeLeft {
                0% { opacity:0; transform: translateX(-120px); }
                50% { opacity:0.6; transform: translateX(-20px); }
                100% { opacity:1; transform: translateX(0); }
            }

            @keyframes swipeRight {
                0% { opacity:0; transform: translateX(120px); }
                50% { opacity:0.6; transform: translateX(20px); }
                100% { opacity:1; transform: translateX(0); }
            }

            </style>

        </div>
    </div>
</div>

<style>
    /* Google Font (Professional & clean look) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

.banner-wrapper {
    position: relative;
    z-index: 2;
}

.banner-content {
    animation: fadeInUp 1.2s ease forwards;
}

.banner-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 72px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #f5eff1;
    margin-bottom: 15px;
    opacity: 0;
    animation: slideIn 1.4s ease forwards .2s;
}

.banner-title {
    font-family: 'Poppins', sans-serif;
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.1;
    opacity: 0;
    animation: slideIn 1.6s ease forwards .4s;
}

/* Smooth animations */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .banner-title {
        font-size: 42px;
    }
    .banner-subtitle {
        font-size: 24px;
    }
}

</style>

</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.8/jarallax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jarallax/1.12.8/jarallax-video.min.js"></script>
<script>
jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.8,
    videoVolume: 0,
    videoLoop: true
});
</script>

<!-- end banner section -->


<!-- ABOUT US ================================================== -->
<section class="about-style05 py-5">
    <div class="container mt-5">
        <div class="row align-items-center mt-n1-9">

            <!-- IMAGE COLUMN -->
            <div class="col-lg-6 mt-1-9 wow fadeInLeft text-center" data-wow-delay="100ms">
                <div class="image-hover">
                    <img src="{% static 'img/service/15.jpg' %}" 
                        alt="About Image" 
                        class="img-fluid border-radius-10 w-100"
                        style="max-height:450px; object-fit:cover;">
                </div>
            </div>

            <!-- CONTENT COLUMN -->
            <div class="col-lg-6 mt-1-9">
                <div class="ps-lg-1-6 ps-xxl-2-9 ps-xxl-6">
                    <div class="section-title03 mb-1-9 wow fadeInUp" data-wow-delay="100ms">
                        <h2 class="mb-3">About Us</h2>
                        <!-- <h3 class="mb-3 text-primary">SINCE 2017</h3> -->
                        <p class="display-27 mb-4 font-weight-600">
                            Sri Vidya Innovative Projects & Development is a trusted technology and training institute offering a wide range of services for students, startups, and businesses. 
                        
                            Our expertise includes <strong>academic projects</strong>, <strong>real-time software and IoT projects</strong>, and <strong>research guidance with publication support</strong>. We also provide training and solutions in the latest emerging technologies.
                        
                            With over 7 years of experience, our expert team ensures high-quality project implementations and professional guidance across multiple domains.
                        </p>
                    </div>


                    <div class="row mt-n1-9 mb-1-6">
                        <div class="col-sm-6 mt-1-6">
                            <div class="progress-style01">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 wow fadeInUp" data-wow-delay="300ms">
                                        <div class="me-3 me-xl-2 me-xxl-4">
                                            <div class="progress-round">
                                                <span class="progress-left">
                                                    <span class="progress-bar progress-bar2"></span>
                                                </span>
                                                <span class="progress-right">
                                                    <span class="progress-bar"></span>
                                                </span>
                                                <div class="progress-value">98%</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 wow fadeInUp" data-wow-delay="400ms">
                                        <p class="mb-0 display-27 lh-1">Successful Project Delivery</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 mt-1-6">
                            <div class="progress-style01">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0 wow fadeInUp" data-wow-delay="500ms">
                                        <div class="me-3 me-xl-2 me-xxl-4">
                                            <div class="progress-round">
                                                <span class="progress-left">
                                                    <span class="progress-bar"></span>
                                                </span>
                                                <span class="progress-right">
                                                    <span class="progress-bar"></span>
                                                </span>
                                                <div class="progress-value">40%</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex-grow-1 wow fadeInUp" data-wow-delay="600ms">
                                        <p class="mb-0 display-27 lh-1">Client Innovation Growth</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="wow fadeInUp" data-wow-delay="700ms">
                        <a href="about.html" class="btn-style02">read more</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="shape img d-none d-xl-block">
            <img src="{% static 'img/icons/shape-01.png' %}" alt="...">
        </div>
        <div class="shape img01 d-none d-xl-block">
            <img src="{% static 'img/icons/shape-01.png' %}" alt="...">
        </div>
    </div>
</section>

       

<div class="container-fluid ">
    <div class="text-center">
        
    </div>
</div>


<section>
    <div class="container-fluid py-5 text-center">
        <div class="row justify-content-center">
            <div class="col-md-12 text-center">
                <h1> <span class="font-weight-800 text-primary">Our Services</span></h1>
                <ul class="list-unstyled">
                    <li><a href="index.html">Academic Projects</a></li>
                    <li> B.Tech • M.Tech • MCA • MBA</li>
                </ul><hr>
            </div>
        </div>
      
<!-- 
<div class="premium-grid text-center ">
    <div class="grid-wrapper">

        {% for c in categories %}
         <a href="{% url 'subcategory' c.id %}" class="card" style="text-decoration:none;">
            <i class="{{ c.icon }}"></i>
            <h4>{{ c.name }}</h4>
        </a>
        {% empty %}
        <p class="text-center">No categories available.</p>
        {% endfor %}

    </div>
</div> -->
<!-- <section class="premium-grid mb-5">
    <div class="row justify-content-center">

        {% for c in categories %}
        <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4 text-center">
            <a href="{% url 'subcategory' c.id %}" class="text-decoration-none">

                <div class="service-card">
                    <img src="{{ c.image.url }}"
                         alt="{{ c.name }}"
                         class="img-fluid">

                    <div class="hover-title">
                        {{ c.name }}
                    </div>
                </div>

                <h5 class="service-text mt-3 text-dark">
                    {{ c.name }}
                </h5>

            </a>
        </div>
        {% empty %}
        <p class="text-center">No categories available.</p>
        {% endfor %}

    </div>
</section> -->
<!-- ================= UNDERGRADUATE ================= -->
<h2 class="text-center mb-4">
    <span class="text-primary font-weight-800">Undergraduate Programs</span><br><br>
</h2>

<section class="premium-grid mb-5">
    <div class="row justify-content-center">

        {% with ug_has_courses=False %}
            {% for main in ug_main_categories %}
                {% for c in main.categories.all %}
                    {% if forloop.first and forloop.parentloop.first %}
                        {% with ug_has_courses=True %}
                        {% endwith %}
                    {% endif %}

                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-5 text-center">
                        <a href="{% url 'subcategory' c.id %}" class="text-decoration-none">
                            <div class="service-card">
                                {% if c.image %}
                                    <img src="{{ c.image.url }}" alt="{{ c.name }}" class="img-fluid">
                                {% endif %}
                                <div class="hover-title">{{ c.name }}</div>
                            </div>
                            <h5 class="service-text mt-3 text-dark">{{ c.name }}</h5>
                        </a>
                    </div>
                {% endfor %}
            {% endfor %}

            
        {% endwith %}

    </div>
</section>



<!-- ================= POSTGRADUATE ================= -->
<h2 class="text-center mb-4">
    <span class="text-primary font-weight-800">Postgraduate Programs</span><br><br>
</h2><hr>

<section class="premium-grid mb-5">
    <div class="row justify-content-center">

        {% if pg_main_categories.exists %}
            {% for main in pg_main_categories %}
                {% for c in main.categories.all %}
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-5 text-center">
                        <a href="{% url 'subcategory' c.id %}" class="text-decoration-none">

                            <div class="service-card">
                                {% if c.image %}
                                    <img src="{{ c.image.url }}" alt="{{ c.name }}" class="img-fluid">
                                {% endif %}
                                <div class="hover-title">{{ c.name }}</div>
                            </div>

                            <h5 class="service-text mt-3 text-dark">{{ c.name }}</h5>
                        </a>
                    </div>
                {% endfor %}
            {% endfor %}
        {% else %}
            <p class="text-center">No postgraduate courses available.</p>
        {% endif %}

    </div>
</section>




</div>


<div class="col-lg-12 mt-1-9 order-1 order-lg-2">
    <div class="row">
        <div class="container-fluid text-center">
            <!-- <h1><span class="font-weight-800 mb-5"></span></h1> -->
            <h2> <span class="font-weight-800 text-primary">Real Time Project Services</span></h2>
            <hr>

            <section class="premium-grid mb-5">
                <div class="row">

                    <!-- Web Development -->
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4 text-center">
                        <a href="{% url 'web_development' %}" class="text-decoration-none">
                            <div class="service-card">
                                <img src="{% static 'img/service/1.png' %}" alt="">
                                <div class="hover-title">
                                    <i class="fa-solid fa-laptop-code"></i> Web Development
                                </div>
                            </div>
                            <h5 class="service-text mt-3 text-dark">Web Development</h5>
                        </a>
                    </div>

                    <!-- App Development -->
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4 text-center">
                        <a href="{% url 'app_development' %}" class="text-decoration-none">
                            <div class="service-card">
                                <img src="{% static 'img/service/4.png' %}" alt="">
                                <div class="hover-title">
                                    <i class="fa-solid fa-mobile-screen-button"></i> App Development
                                </div>
                            </div>
                            <h5 class="service-text text-dark">App Development</h5>
                        </a>
                    </div>

                    <!-- AI/ML Development -->
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4 text-center">
                        <a href="{% url 'ai_ml_development' %}" class="text-decoration-none">
                            <div class="service-card">
                                <img src="{% static 'img/service/5.png' %}" alt="">
                                <div class="hover-title">
                                    <i class="fa-solid fa-robot"></i> AI & ML Development
                                </div>
                            </div>
                            <h5 class="service-text text-dark">AI & ML Development</h5>
                        </a>
                    </div>

                    <!-- IOT Development -->
                    <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-4 text-center">
                        <a href="{% url 'iot_development' %}" class="text-decoration-none">
                            <div class="service-card">
                                <img src="{% static 'img/service/small_img/iot1.png' %}" alt="">
                                <div class="hover-title">
                                    <i class="fa-solid fa-microchip"></i> IoT Development
                                </div>
                            </div>
                            <h5 class="service-text mt-3 text-dark">IoT Development</h5>
                        </a>
                    </div>

                </div>
            </section>
        </div>
    </div>
</div>


<section>
    <div class="container-fluid">
        <!-- SCROLLING ANIMATION -->
        <div class="scroll-section py-5 border-bottom border-top">
            <div class="scroll-track pause-on-hover scroll-left scroll-speed-4">
                <div class="scroll-group">

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">Academic Projects</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">Real Time Projects</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">Research Paper Publication</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">Website Development</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">App Development</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">AI & Machine Learning</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">IoT Projects</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">Turnitin / Trinity Check</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                    <div class="scroll-item display-6 text-uppercase font-weight-800 text-secondary me-1-9">Mechanical & Drill Bit Projects</div>
                    <div class="scroll-item with-img me-1-9"><img src="{% static 'img/icons/icon-03.png' %}" alt="icon" class="w-30px"></div>

                </div>
            </div>
        </div>
    </div>
</section>
<!--  =====================WORK PROCESS ============================= -->
           
    <section class=" bg-light">
    <div class="container ">
        <div class="row align-items-center">
            <!-- Left Content -->
            <div class="col-lg-7">
                <div class="pe-xl-5">
                    <div class="section-title03 mb-4">
                        <span class="text-secondary sub-title">Working Process</span>
                        
                        <h3> <span class="font-weight-800 text-primary"> Our Project Workflow</span></h3>
                    </div>

                    <p class="mb-2">
                        We follow a simple and structured development process to help students build real-time projects with proper guidance and industry standards.
                    </p>

                    <!-- Accordion -->
                    <div id="accordion" class="accordion-style style01">
                        <p class="mb-2">
                            <strong>Step 1 — Requirement & Topic Selection</strong><br>
                            We discuss project requirements and choose the best suitable domain such as IoT, AI, ML, Python, or Web Development.
                        </p>
                    </div>

                    <div id="accordion" class="accordion-style style01">
                        <p class="mb-2">
                            <strong>Step 2 — Coding & Implementation</strong><br>
                            The project is designed, developed, and implemented with required hardware or software modules based on real-time use cases.
                        </p>
                    </div>

                    <div id="accordion" class="accordion-style style01">
                        <p class="mb-2">
                            <strong>Step 3 — Testing & Final Submission</strong><br>
                            We test the project, complete documentation, and provide support until successful presentation and submission.
                        </p>
                    </div>

                </div>
            </div>

            <!-- Right Image -->
            <div class="col-lg-5 text-center image-hover">
                <img src="{% static 'img/service/22.jpg' %}" 
                    class="img-fluid rounded shadow-sm" 
                    style="height:450px; object-fit:cover;" 
                    alt="Process Image">
            </div>

        </div> 
    </div>
</section>




<!-- client section -->
<div class="container-fluid mt-5" style="width:100%;">
    <div class="row mt-n1-9 mt-5">
        <div class="col-sm-12 col-lg-12 mt-1-9 mt-5">
            <div class="bg-secondary p-1-9 h-100">
                <div class="row mt-n4">

                    <!-- 1st Block -->
                    <div class="col-lg-4 mt-4 wow fadeInUp" data-wow-delay="100ms">
                        <div class="border-lg-end border-color-light-white text-center p-xl-1-6">
                            <div class="text-white display-10 font-weight-800 lh-1">
                                <div class="odometer odometer-auto-theme" data-count="467">1000</div>+
                            </div>
                            <span class="text-uppercase display-31 font-weight-600 text-white opacity9">
                                Project Complete
                            </span>
                        </div>
                    </div>

                    <!-- 2nd Block -->
                    <div class="col-lg-4 mt-4 wow fadeInUp" data-wow-delay="150ms">
                        <div class="border-lg-end border-color-light-white text-center p-xl-1-6">
                            <div class="text-white display-10 font-weight-800 lh-1">
                                <div class="odometer odometer-auto-theme" data-count="365">800</div>+
                            </div>
                            <span class="text-uppercase display-31 font-weight-600 text-white opacity9">
                                Happy Client
                            </span>
                        </div>
                    </div>

                    <!-- 3rd Block -->
                    <div class="col-lg-4 mt-4 wow fadeInUp" data-wow-delay="200ms">
                        <div class="text-center p-xl-1-6">
                            <div class="text-white display-10 font-weight-800 lh-1">
                                <div class="odometer odometer-auto-theme" data-count="452">500</div>+
                            </div>
                            <span class="text-uppercase display-31 font-weight-600 text-white opacity9">
                                Dealer Equipment
                            </span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<section class="services-carousel-section py-5">
    <h2 class="text-center mb-5">
            <span class="fw-bold font-weight-1200  text-primary">Our Portfolio</span>
        </h2><hr>
    <div class="container-fluid bg-light p-5 rounded">
       
        <div class="carousel-marquee">
            <div class="carousel-track" id="portfolioTrack">

                {% for p in projects %}
                <div class="portfolio-item">
                    <div class="card shadow-sm p-2 text-center">

                        {% if p.demo_video %}
                        <video 
                            autoplay muted loop playsinline controls
                            style="width:100%; height:160px; object-fit:cover; border-radius:10px;">
                            <source src="{{ p.demo_video.url }}" type="video/mp4">
                        </video>
                        {% else %}
                        <div class="no-preview p-5 text-muted">No Video</div>
                        {% endif %}

                        <h6 class="fw-bold mt-2">{{ p.title|truncatechars:25 }}</h6>
                        <a href="{% url 'project-detail' p.id %}" class="btn btn-primary w-100 mt-1">View</a>
                    </div>
                </div>
                {% endfor %}

                <!-- Duplicate once for perfect infinite loop -->
                {% for p in projects %}
                <div class="portfolio-item">
                    <div class="card shadow-sm p-2 text-center">

                        {% if p.demo_video %}
                        <video 
                            autoplay muted loop playsinline controls
                            style="width:100%; height:160px; object-fit:cover; border-radius:10px;">
                            <source src="{{ p.demo_video.url }}" type="video/mp4">
                        </video>
                        {% else %}
                        <div class="no-preview p-5 text-muted">No Video</div>
                        {% endif %}

                        <h6 class="fw-bold mt-2">{{ p.title|truncatechars:25 }}</h6>
                        <a href="{% url 'project-detail' p.id %}" class="btn btn-primary w-100 mt-1">View</a>
                    </div>
                </div>
                {% endfor %}

            </div>
        </div>
    </div>
</section>

<script>
document.querySelectorAll("video").forEach(video => {
    video.play();
    video.volume = 1; // default volume
});
</script>




<!-- EXTRA
        ================================================== -->
        <section class="bg-img cover-background parallax extra-style01 secondary-overlay" data-overlay-dark="6" data-background="{% static 'img/service/22.jpg' %}">
            <div class="container">
                <div class="row py-md-2-9 py-lg-7 align-items-center justify-content-center">
                    <div class="col-lg-12 wow fadeInUp" data-wow-delay="100ms">
                        <div class="story-video d-flex justify-content-center mb-1-9 mb-xl-2-9">
                            <a class="video video_btn" href="{% static 'videos/video2.mp4' %}">
                                <span class="display-27 text-white lh-1"><i class="fa-solid fa-play"></i></span>
                            </a>
                        </div>
                        <div class="text-center wow fadeInUp" data-wow-delay="200ms">
                        <h2 class="display-2 font-weight-800 lh-1 mb-0 text-white w-xl-80 mx-auto ls-minus-2px">
                            Building <span class="text-primary font-weight-800">Scalable & Real World Applications</span>
                        </h2>
                        </div>
                    </div>
                </div>
            </div>
        </section>
<!----------------------------------------------end section------------------------------------------>

<!-------------------------start section------------------------------------->

     <!-- CONTACT DETAILS ================================================== -->


        <section class="py-5">
            <div class="container-fluid">
                <div class="row justify-content-center">
                    <div class="col-lg-11">
                        <div class="row align-items-center mt-n4">
                            <div class="col-md-7 col-lg mt-4 wow fadeIn" data-wow-delay="100ms">
                                <h2 class="mb-0 display-20 font-weight-600 text-center">
                                    <span class="font-weight-800 text-primary">Our Office Location</span>
                                </h2>
                                <hr>

                                <p class="text-center mb-2 text-danger">
                                    <strong>Office Timings:</strong> Monday to Friday, 10:00 AM – 6:00 PM
                                </p>

                                <p class="text-center mb-0 p-3 bg-light border border-danger rounded">
                                    <strong class="text-danger">Note:</strong> Office is closed on Saturdays and Sundays.
                                </p>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CONTACT INFO
        ================================================== -->
        <section class=" bg-light">
            <div class="container-fluid">
                <div class="row align-items-center">

                    <!-- Google Map -->
                    <div class="col-md-8 ">
                        <div class="map-box shadow-sm rounded overflow-hidden">
                            <iframe 
                                src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3829.701845255878!2d80.44293367514051!3d16.287044584424457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTbCsDE3JzEzLjQiTiA4MMKwMjYnNDMuOCJF!5e0!3m2!1sen!2sin!4v1764684814185!5m2!1sen!2sin" 
                                width="100%" 
                                height="420" 
                                style="border:0;" 
                                allowfullscreen="" 
                                loading="lazy">
                            </iframe>
                        </div>
                    </div>

                    <div class="col-md-4 mb-4">
                        <div class="image-box shadow-sm rounded overflow-hidden">
                            <img src="{% static 'img/contact/1.jpeg' %}" 
                                class="img-fluid building-img"
                                alt="Company Building">
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <style>
            .map-box, .image-box {
            transition: all 0.3s ease-in-out;
            border-radius: 12px;
            background: #fdfcfc;
        }

        .map-box:hover, .image-box:hover {
            transform: translateY(-5px);
            box-shadow: 0px 10px 25px rgba(0,0,0,0.08);
        }

        .building-img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            transition: all 0.3s ease-in-out;
        }

        .image-box:hover .building-img {
            transform: scale(1.03);
        }

        </style>


        <section class="contact-style01">
    <div class="container">
        <div class="row mt-n1-9">
            
            <!-- Left Section (Contact Blocks) -->
            <div class="col-lg-6 mt-1-9">
                <div class="pe-xl-6">

                    <div class="row mt-n1-9">

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-solid fa-location-dot"></i></div>
                                <h4 class="mb-3">Address</h4>
                                <p class="mb-0">
                                    D.No 20-9-30 & 20-9-34/A, Etukur Road,<br>
                                    Opp. Saketh Nath Ricemill, Near Kanyakaparmeswari Temple,<br>
                                    Guntur, Andhra Pradesh, 522003.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-solid fa-headset"></i></div>
                                <h4 class="mb-3">24/7 Support</h4>
                                <p class="mb-0">
                                    Real-time assistance and guidance for projects.
                                </p>
                            </div>
                        </div>

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-regular fa-clock"></i></div>
                                <h4 class="mb-3">Working Hours</h4>
                                <p class="mb-0">Monday-Friday:10AM-6 PM|Saturday,Sunday Closed</p>
                            </div>
                        </div>

                        <div class="col-md-6 mt-1-9">
                            <div class="contact-bg rounded text-center">
                                <div class="icon"><i class="fa-regular fa-envelope"></i></div>
                                <h4 class="mb-3">Send Email</h4>
                                <div class="content">
                                    <a href="mailto:abcgopi123@gmail.com">abcgopi123@gmail.com</a>
                                    <!-- <a href="https://www.svipd.com" target="_blank">www.svipd.com</a> -->
                                </div>
                            </div>
                        </div>

                    </div><!-- END inner row -->

                </div>
            </div>

            <div class="col-lg-6 mt-1-9">
                <div class="conatct-form border border-color-light-black bg-secondary rounded">
                    <form class="contact " action="{% url 'contact' %}" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                     {% if messages %}
                        <div class="mt-3">
                            {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}

                        <div class="quform-elements">
                            <div class="row">

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Your Name <span class="quform-required">*</span></label>
                                        <input class="form-control" type="text" name="name" placeholder="Your name here">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Your Email <span class="quform-required">*</span></label>
                                        <input class="form-control" type="email" name="email" placeholder="Your email here">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Subject <span class="quform-required">*</span></label>
                                        <input class="form-control" type="text" name="subject" placeholder="Your subject here">
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="quform-element form-group">
                                        <label>Phone</label>
                                        <input class="form-control" type="text" name="phone" placeholder="Your phone here">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="quform-element form-group">
                                        <label>Message <span class="quform-required">*</span></label>
                                        <textarea class="form-control" rows="3" name="message" placeholder="Tell us a few words"></textarea>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <button class="btn-style01 white primary-hover border-0" type="submit">
                                        <span></span>Send Message
                                    </button>
                                </div>

                            </div>
                        </div>

                    </form>
                </div>
            </div>


        </div>
    </div>
</section>

<style>
/* Contact Card Base */
.contact-bg {
    background: #e9ebea; /* Light neutral background */
    color: #333;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid #e0e0e0;
}

.contact-bg .icon {
    font-size: 36px;
    margin-bottom: 15px;
    color: #007bff;
    transition: transform 0.3s ease, color 0.3s ease;
}

.contact-bg h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.contact-bg p, .contact-bg .content a {
    color: #555;
    font-size: 14px;
}

.contact-bg .content a {
    display: block;
    text-decoration: none;
    margin-top: 5px;
    transition: color 0.3s ease;
}

/* Hover Effects */
.contact-bg:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.contact-bg:hover .icon {
    transform: scale(1.2);
    color: #0056b3;
}

.contact-bg:hover h4 {
    color: #0056b3;
}

.contact-bg:hover .content a {
    color: #007bff;
}
</style>

    {% endblock %}