<template>
  <v-sheet
    class="py-9"
    color="#D4D4D4
"
    width="100%"
  >
    <v-row justify="center">
      <v-col cols="12">
        <v-card-title class="text-center">
          <h6 class="text-primary text-h6">OUR SERVICES</h6>
        </v-card-title>
        <v-card-title class="text-center">
          <h4 class="text-h4">What services do we provide?</h4>
        </v-card-title>
      </v-col>
    </v-row>
    <v-sheet
      color="transparent"
      class="d-flex align-center justify-center pa-9"
      :height="mdAndUp ? '' : '1148'"
    >
      <v-sheet
        color="transparent"
        class="py-9 d-flex justify-center"
        :style="mdAndUp ? '' : 'transform: rotate(90deg) '"
      >
        <!-- 1 -->
        <v-card
          variant="text"
          class="pa-0 py-9 d-flex align-center flex-column justify-center pl-9"
          height="389"
          width="315"
          :image="`/1.svg`"
        >
          <div :style="mdAndUp ? '' : 'transform: rotate(-90deg) '">
            <div class="w-100 d-flex justify-center">
              <v-avatar size="68">
                <Vue3Lottie
                  width="100%"
                  height="100%"
                  animationLink="https://lottie.host/e14b7470-11a0-41b2-bcdc-14d5260b90da/anhPhyS6CA.json"
                />
              </v-avatar>
            </div>
            <v-card-title class="text-center">
              <h5 class="text-h6">Customer Service</h5>
            </v-card-title>
            <v-card-subtitle style="width: 235px" class="text-center">
              <p class="text-wrap text-body-2">
                We produce products and solutions for the most efficient use of
                energy and resources
              </p>
            </v-card-subtitle>
          </div>
        </v-card>
        <!-- 2 -->
        <v-card
          variant="text"
          class="pa-0 py-9 d-flex align-center flex-column justify-center"
          height="389"
          width="260"
          :image="`/2.svg`"
        >
          <div :style="mdAndUp ? '' : 'transform: rotate(-90deg) '">
            <div class="w-100 d-flex justify-center">
              <v-avatar size="68">
                <Vue3Lottie
                  animationLink="https://lottie.host/cf7d6682-8d9b-4e93-9118-72a1c28818c2/C2u78zSb1t.json"
                  :height="200"
                  :width="200"
                />
              </v-avatar>
            </div>
            <v-card-title class="text-center">
              <h5 class="text-h6">Partners & Projects</h5>
            </v-card-title>
            <v-card-subtitle style="width: 235px" class="text-center">
              <p class="text-wrap text-body-2">
                By partnering with MNS,you can increase the value of your
                consulting or design work
              </p>
            </v-card-subtitle>
          </div>
        </v-card>
        <!-- 3 -->
        <v-card
          variant="text"
          class="pa-0 py-9 d-flex align-center flex-column justify-center"
          height="389"
          width="286"
          :image="`/3.svg`"
        >
          <div :style="mdAndUp ? '' : 'transform: rotate(-90deg) '">
            <div class="w-100 d-flex justify-center">
              <v-avatar size="68">
                <Vue3Lottie
                  animationLink="https://lottie.host/65a52003-11fe-45ab-9ec9-bd50fdc3a88c/JkY91d1Ikv.json"
                  :height="200"
                  :width="200"
                />
              </v-avatar>
            </div>
            <v-card-title class="text-center mt-3">
              <h5>Customer Service</h5>
            </v-card-title>
            <v-card-subtitle style="width: 235px" class="text-center">
              <p class="text-wrap">
                We produce products and solutions for the most efficient use of
                energy and resources
              </p>
            </v-card-subtitle>
          </div>
        </v-card>
        <!-- 4 -->
        <v-card
          variant="text"
          class="pa-0 py-9 d-flex align-center flex-column justify-center"
          height="389"
          width="267"
          :image="`/4.svg`"
        >
          <div :style="mdAndUp ? '' : 'transform: rotate(-90deg) '">
            <div class="w-100 d-flex justify-center">
              <v-avatar size="68">
                <Vue3Lottie
                  animationLink="https://lottie.host/17a7b581-b8b8-4e23-bbba-a057b5e50c3c/Wxm5y61E4p.json"
                  :height="200"
                  :width="200"
                />
              </v-avatar>
            </div>
            <v-card-title class="text-center mt-3">
              <h5>Customer Service</h5>
            </v-card-title>
            <v-card-subtitle style="width: 235px" class="text-center">
              <p class="text-wrap">
                We produce products and solutions for the most efficient use of
                energy and resources
              </p>
            </v-card-subtitle>
          </div>
        </v-card>
      </v-sheet>
    </v-sheet>
  </v-sheet>
</template>

<script setup>
import { Vue3Lottie } from "vue3-lottie";
import { useDisplay } from "vuetify";
const { mdAndUp } = useDisplay();
</script>

<style scoped></style>
