<template>
  <div id="Certification">
    <LayoutContainer>
      <v-row class="custom-row">
        <v-col cols="5">
          <LayoutUISubTitle
            :iconSize="6"
            :iconClasses="iconClasses"
            :titleText="'DES FORMATIONS CERTIFIFIÉES'"
          />
          <LayoutUITitle title="Certification" />
          <LayoutUITitle title="Qualiopi : Marque de certification " />
          <div class="bloc-certif ml-12 mt-6 mr-12">
            <p>
              Nos formations sont certifiées Qualiopi - Actions de formation.
            </p>
            <p class="details-certifications">
              La marque « Qualiopi » vise à :
            </p>
            <ul class="list-qualiopi">
              <li>
                attester de la qualité du processus mis en œuvre par les
                prestataires d’actions concourant au développement des
                compétences ;
              </li>
              <li>
                permettre une plus grande lisibilité de l’offre de formation
                auprès des entreprises et des usagers.
              </li>
            </ul>
          </div>
        </v-col>

        <v-col cols="7">
          <v-img src="/images/formation/qualiopi.jpg" />
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup></script>

<style scoped>

.custom-row {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.qualiopi-img {
  background-image: url("/images/formation/qualiopi.jpg");
  width: 600px;
  top: -15rem;
}
.bloc-certif {
  text-align: justify;
}

.list-qualiopi {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  margin-top: 1rem;
}
.details-certifications {
  font-weight: 300;
  font-size: 16px;
  line-height: 20px;
  color: #091d20;
  margin-top: 1rem;
}
</style>
