<template>
    <div class="max-w-[1139px] m-auto pb-[73px]">
        <h1
            class="pb-[42px] h-[22px] font-semibold font-Inter text-[34px] leading-[22px]"
        >
            Our Mission
        </h1>
        <br />
        <div
            v-for="(item, key) in our_mision"
            :key="key"
            class="w-full p-[10px] shadowing rounded-[48px]"
        >
            <img
                class="ml-[48px] mt-[48px] w-[122.34px] h-[122.34px]"
                :src="item.image"
                alt=""
            />
            <p
                class="w-[90%] pl-[48px] font-medium pt-[30px] pb-[30px] h-[Hug (68px)] max-w-[1038.14px] text-[28px] font-Inter leading-[33px] text-gray-200"
            >
                {{ item.title }}
            </p>
            <img src="image.png" alt="" />
        </div>
    </div>
</template>
<script>
export default {
    props: ["our_mision"],
};
</script>
<style>
.shadowing {
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1);
}
</style>
