{% extends 'base_template/base.html' %}
{% load static %}
  
{% block content %}
{% include 'frontend/header/header.html' %}
<main class="main">
    {% include 'frontend/hero/hero.html' %}
    {% include 'frontend/about/about.html' %}
    {% include 'frontend/featured-services/featured-services.html' %}
    {% include 'frontend/work/work.html' %}
    {% include 'frontend/work/works.html' %}
    {% include 'frontend/services/services.html' %}
    {% include 'frontend/services/pricing.html' %}
    {% include 'frontend/faq/faq.html' %}
    {% include 'frontend/call-action/call-action.html' %}
    {% include 'frontend/portfolio/portfolio.html' %}
    {% include 'frontend/team/team.html' %}
    {% include 'frontend/contact/contact.html' %}
    {% include 'frontend/footer/footer.html' %}

</main>
{% if floating_image %}
<style>
#floating-banner {
  animation: fadeIn 1s ease-in-out;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
</style>

<div id="floating-banner" style="
    position: fixed;
    {% if floating_image.position == 'Top Right' %}top: 20px; right: 20px;
    {% elif floating_image.position == 'Top Left' %}top: 20px; left: 20px;
    {% elif floating_image.position == 'Bottom Left' %}bottom: 20px; left: 20px;
    {% else %}bottom: 20px; right: 20px;{% endif %}
    z-index: 9999;
">
  <img src="{{ floating_image.image.url }}" alt="{{ floating_image.title }}" 
       style="max-width: 180px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
</div>
{% endif %}



{% endblock %}