{% extends 'FrontofficeAr/base.html.twig' %}
{% block activePresentation %}main-menu-active{% endblock %}
{% block titre %}تقديم الجامعة{% endblock %}
{% block body %}

<style>

        
      .ytb{
          width: 80%;
          height:600px;
        }        
    
    
    @media screen and (max-width: 600px) {
        
        .ytb{
          width: 80%;
          height:300px;
        }  
    }

  /* Titre de section */
  #services .heading-92913 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 40px;
    color: #2c3e50;
  }

  /* Boîte de mission */
  .icon-box {
    background: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    margin: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    text-align: center;
  }

  .icon-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  }

  /* Icône */
  .icon-box .icon {
    font-size: 36px;
    color: #0077b6;
    margin-bottom: 20px;
  }

  /* Titre */
  .icon-box h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
  }

  .icon-box h4 a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .icon-box h4 a:hover {
    color: #e8b154;
  }

  /* Texte */
  .icon-box p {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    text-align: left;
  }

  /* Responsive design */
  @media (max-width: 767px) {
    .icon-box {
      margin-bottom: 30px;
    }

    .icon-box p {
      text-align: center;
    }
  }
  .services .icon-box {
    text-align: center;
    border: 1px solid #e2eefd;
    padding: 20px 20px;
    transition: all ease-in-out 0.3s;
    background: #fff;
    width: 100%;
    height: 350px;
    border-top: 5px solid #e8b154;
  }

  .services .icon-box:hover h4 a{
      color: #e8b154;
  }

  .services .icon-box .icon i {
    color: #e8b257;
    font-size: 28px;
    transition: ease-in-out 0.3s;
  }
</style>

    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">تقديم الجامعة</h3>
        </div>
    </div>
    <div class="row block_ac" style='width:100%;margin:0%'>
        <div class="col-lg-12 text-center">
            <iframe class="ytb" width="560" height="315" src="https://www.youtube.com/embed/gUbcG-Pqkyg" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="col-lg-12 text-center">
          <section id="services" class="services">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h3 class="heading-92913 text-black text-center"> {{ presentation.titreAr }}</h3>
                </div>
              </div>

              <div class="row" style="text-align:right;font-size: 20px;">
                {{ presentation.textAr|raw}}
              </div>
            </div>
          </section>
          
        <div class="col-lg-12 text-center">
          <section id="services" class="services">
            <div class="container">
              <div class="row justify-content-center">
                <div class="col-md-12 text-center">
                    <h3 class="heading-92913 text-black text-center">مهام الجامعة</h3>
                </div>
              </div>

              <div class="row" style='display:flex;justify-content: center;direction: rtl;margin-top:-10px'>
                <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos-delay="100">
                  <div class="icon-box">
                    <div class="icon"><i class="bx bx-slideshow"></i></div>
                    <h4><a href="">تقديم</a></h4>
                    <p style='text-align: right;'>
                    تعزيز مصالح غرف الصيد البحري ذات الطابع العام والتي تتجاوز الدوائر المعنية لكل منها-
                    جمع الآراء ومواءمة وجهات النظر <br/>   
                    تحديد المواقف المشتركة للدفاع عنها مع السلطات العامة   
                    التشاور والاستشارة<br/>                
                  </p>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-md-0"  data-aos-delay="200">
                  <div class="icon-box">
                    <div class="icon"><i class="bx bx-command"></i></div>
                    <h4><a href="">تنسيق</a></h4>
                    <p style='text-align: right;'>نصائح ومساعدة للمستثمرين<br/>
                      رأي استشاري في التحكيم وتسوية المنازعات<br/>
                    </p>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4 mt-lg-0" data-aos-delay="300">
                  <div class="icon-box">
                    <div class="icon"><i class="bx bx-palette"></i></div>
                    <h4><a href="">تنشيط</a></h4>
                    <p style='text-align: right;'>المؤتمرات والندوات<br/>
                      التدريب والتعليم المستمر<br/>
                      الدراسات والاستطلاعات<br/>
                      تعزيز التعاون</p>
                  </div>
                </div>  

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4" data-aos-delay="100">
                  <div class="icon-box">
                    <div class="icon"><i class="bx bx-pie-chart-alt"></i></div>
                    <h4><a href="">إدارة</a></h4>
                    <p style='text-align: right;'>تأسيس نشاط الصيد و الاستزراع المائي<br/>
                      تأسيس المصلحة العامة</p>
                  </div>
                </div>

                <div class="col-lg-4 col-md-6 d-flex align-items-stretch mt-4"  data-aos-delay="200">
                  <div class="icon-box">
                    <div class="icon"><i class="bx bx-book-reader"></i></div>
                    <h4><a href="">مشورة وتحكيم</a></h4>
                    <p style='text-align: right;'>البحث العلمي والتدريب<br/>
                      تنظيم وإدارة مصايد الأسماك<br/>
                      التثمين و التطوير<br/>
                      تشجيع التجارة والاستهلاك<br/>   
                      العمالة والاجتماعية</p>
                  </div>
                </div>


              </div>

            </div>
          </section>
        </div>
    </div>
{% endblock %}

{% block js %}
  <script src="{{ asset("assets/FrontofficeFr/assets/vendor/purecounter/purecounter_vanilla.js") }}"></script>
        <script>
            new PureCounter();
        </script>

{% endblock %}