<template>
    <div class="bg-white">
        <!-- Banner section with background image -->
        <div class="aboutimgBg" :style="{
            backgroundImage: `url(/images/maskgroup2.png)`,
            backgroundSize: 'cover',
            height: '600px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        }">
            <div class="banDes">
                <div class="clientTit text-center">
                    <h2 class="text-[50px] font-bold animated fadeInLeft">{{ $t('clients_b1') }}</h2>
                </div>
            </div>
        </div>

        <!-- Clients content section -->
        <div class="mainBg pb-[100px]">
            <div class="oneBox1Bg">
                <div class="container mx-auto px-4">
                    <div class="clientBox1">
                        <h3 style="margin-top: -120px; line-height: 31px;" class="animated fadeInUp text-2xl font-medium text-center text-[#606060]">{{ $t('clients_b2') }}</h3>
                    </div>
                    <div class="clientBg1 mt-[100px]">
                        <div class="clientBg1img flex flex-row items-center justify-between">
                            <div class="clientBg1imgdx w-[300px]">
                                <img class="oneBox1Bg1img1 w-full h-auto object-contain" src="/images/image8.png" alt="Client">
                            </div>
                            <div class="clientBg1imgt text-left pl-[30px]" style="flex: 1;">
                                <h3 class="text-[40px] font-bold mb-2">{{ $t('clients_b3') }}</h3>
                                <h4 class="text-xl text-[#606060] mt-[30px]">{{ $t('clients_b4') }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="clientxiah1 w-full h-[1px] bg-gray-200 my-8"></div>
                        
                        <div class="clientimg flex flex-wrap justify-center gap-6 mt-8">
                            <img src="/images/maskgroup3.png" class="w-[200px] h-auto" alt="Client">
                            <img src="/images/image8.png" class="w-[200px] h-auto" alt="Client">
                            <img src="/images/clients56.png" class="w-[200px] h-auto" alt="Client">
                            <img src="/images/clients11.png" class="w-[200px] h-auto" alt="Client">
                            <img src="/images/clients11.png" class="w-[200px] h-auto" alt="Client">
                        </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

onMounted(() => {
    // You can add any code that needs to run after component is mounted
})
</script>

<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";

.aboutimgBg {
    position: relative;
}

.container {
    max-width: 1310px;
}

.clientTit h2::after {
    content: '';
    margin: 0 auto;
    width: 300px;
    height: 28px;
    background: #A8CBFF;
    display: block;
    margin-top: -30px;
}

.clientBox1 h3 {
    font-weight: 500;
    text-align: center;
    font-size: 24px;
    color: #606060;
    line-height: 31px;
}

@media (max-width: 768px) {
    .clientimg {
        flex-direction: column;
        align-items: center;
    }
    
    .clientimg img {
        margin-bottom: 20px;
    }
}
.clientBg1imgt h3::after {
    content: '';
    margin-top: -20px;
    width: 250px;
    height: 20px;
    background: #A8CBFF;
    display: block;
    margin-left: -4px;
}
</style>
