{% load static %}

<style>
  .about .video-box {
  background: url("{% static 'img/'|add:template_name|add:'/about.jpg' %}") center center no-repeat;
  background-size: cover;
  min-height: 500px;
  }
</style>

<section id="about" class="about">
  <div class="container-fluid">

    <div class="row">
      <div class="col-xl-5 col-lg-6 video-box d-flex justify-content-center align-items-stretch position-relative">
        <a href="{{ about_video }}" class="glightbox play-btn mb-4"></a>
      </div>

      <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
        {% autoescape off%}
        <h3>{{ about_h3 }}</h3>
        <p>{{ about_p }}</p>
        {% endautoescape %}

        {% for item in about %}
        <div class="icon-box">
          <div class="icon"><i class="bx {{ item.icon }}"></i></div>
          <h4 class="title"><a href="{{ item.link }}">{{ item.h4 }}</a></h4>
          <p class="description">{{ item.p }}</p>
        </div>
        {% endfor %}
      </div>
    </div>

  </div>
</section>