<template>
    <section class="container-values ">
        <div class="mission col-12 col-md-4 px-4 py-4">
            <div class="d-flex align-items-center gap-3 mb-4">
                <h2 class="mb-0">Misión</h2>
                <img src="/images/values/ship.png" alt="mission-value" loading="lazy" height="50" />
            </div>
            <div>
                <p>Ofrecer servicios de limpieza subacuática de alta calidad utilizando tecnologías innovadoras y
                    sostenibles, mejorando la eficiencia de las embarcaciones y protegiendo los ecosistemas marinos sin
                    perjudicar el medio ambiente.</p>
            </div>
        </div>
        <div class="vision col-12 col-md-4 px-4 py-4">
            <div class="d-flex align-items-center gap-3 mb-4">
                <h2 class="mb-0">Visión</h2>
                <img src="/images/values/lighthouse.png" alt="vision-value" loading="lazy" height="50" />
            </div>
            <div>
                <p>Ser una empresa reconocida a nivel nacional por nuestra contribución al medio ambiente marino,
                    participando activamente en la limpieza y conservación de los océanos y playas, y cumpliendo con
                    estándares de seguridad internacionales.</p>
            </div>
        </div>
        <div class="values col-12 col-md-4 px-4 py-4">
            <div class="d-flex align-items-center gap-3 mb-4">
                <h2 class="mb-0">Valores</h2>
                <img src="/images/values/anchor.png" alt="values-value" loading="lazy" height="50" />
            </div>
            <div class="content-values">
                <ul class="first">
                    <li>Excelencia</li>
                    <li>Compromiso ambiental</li>
                    <li>Innovación</li>
                    <li>Seguridad</li>
                    <li>Trabajo en equipo</li>
                </ul>
                <ul class="second">
                    <li>Responsabilidad</li>
                    <li>Integridad</li>
                    <li>Servicio al cliente</li>
                    <li>Respeto</li>
                    <li>Adaptabilidad</li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
.container-values {
    display: flex;
    flex-wrap: wrap;
}

.mission,
.values {
    background-color: #113755;
    color: white;
    p {
        text-align: justify;
    }
}

.vision {
    background-color: #0e5d7d;
    color: white;

    p {
        text-align: justify;
    }
}

.content-values {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    ul {
        margin: 0;
        padding: 0;
        li {
            list-style: none;
            display: flex;
            align-items: center;

            &::before {
                content: '\F234';
                font-family: "bootstrap-icons";
                margin-right: 5px;
            }
        }
    }
}

@media (min-width: 768px) {
/*    .content-values {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
     
        .first {
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 2;
        }
        .second {
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 3;
        }

    }*/
}

</style>