<template>
  <q-layout class="bg-white text-grey-9">
    <transition appear enter-active-class="animated slideInUp" leave-active-class="hidden">
      <div class="q-pa-md">
        <q-stepper v-model="step" header-nav color="primary" animated>
          <q-step :name="1" title="View Cart" icon="settings" :done="step > 1">
            <div class="row">
              <div class="col-8 col-md-8 col-sm-12 col-xs-12">
                <q-card class="q-ma-sm" elevated bordered>
                  <q-card-section v-if="cart.length>0">
                    <div class="text-h5 text-grey-8 text-bold text-center">Review Your Order</div>
                    <q-card
                      bordered
                      class="no-shadow q-ma-sm"
                      v-for="(p,index) in cart"
                      :key="p.id"
                    >
                      <q-icon
                        name="clear"
                        size="sm"
                        class="q-ma-sm cursor-pointer"
                        style="float:right;z-index:111"
                        @click="removeFromCart(index)"
                      />
                      <q-card-section>
                        <div class="row justify-between">
                          <q-badge
                            color="secondary"
                            class="q-pa-sm text-body1"
                          >{{p.type==1 ? 'Qbank':'Course'}}</q-badge>
                          <div class="text-body1 text-bold">
                            {{p.name}}
                            <div class="text-caption text-bold">by {{p.by}}</div>
                          </div>
                          <div class="text-bold">
                            {{currency}}
                            <span class="text-strike">{{(p.price*rate).toFixed(2)}}</span>
                            <span
                              class="text-red q-pa-xs text-h6"
                            >{{(rate*(p.price-p.discount)).toFixed(2)}}</span>
                          </div>
                          <div class="q-ma-sm" v-if="p.type==1">
                            <q-select
                              dense
                              outlined
                              v-model="selectedPlans[index]"
                              :options="p.plans"
                              @input="updatePrice($event,p.plans,index)"
                              style="min-width: 120px;"
                              emit-value
                              map-options
                            />
                          </div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-card-section>
                  <q-card-section v-if="cart.length>0 && similarProducts.length>0">
                    <div class="text-h5 text-grey-8 text-bold text-center">Similar Products</div>
                    <q-card
                      bordered
                      class="no-shadow q-ma-sm"
                      v-for="(p,index) in similarProducts"
                      :key="index"
                    >
                      <q-icon
                        name="clear"
                        size="sm"
                        class="q-ma-sm cursor-pointer"
                        style="float:right;z-index:111"
                        @click="removeFromCart(index)"
                      />
                      <q-card-section>
                        <div class="row justify-between">
                          <q-badge
                            color="secondary"
                            class="q-pa-sm text-body1"
                          >{{p.type==1 ? 'Qbank':'Course'}}</q-badge>
                          <div class="text-body1 text-bold">
                            {{p.name}}
                            <div class="text-caption text-bold">by {{p.by}}</div>
                          </div>
                          <div class="text-bold">
                            {{currency}}
                            <span class="text-strike">{{(p.price*rate).toFixed(2)}}</span>
                            <span
                              class="text-red q-pa-xs text-h6"
                            >{{(rate*(p.price-p.discount)).toFixed(2)}}</span>
                          </div>
                          <div class="q-ma-sm" v-if="p.type==1">
                            <q-select
                              dense
                              outlined
                              :options="p.plans"
                              v-model="similarProducts[index].plan"
                              @input="updateSimilarProdPrice($event,index)"
                              style="min-width: 120px;"
                              emit-value
                              map-options
                            />
                          </div>
                          <div class="q-ma-sm" v-else style="min-width: 120px"></div>
                        </div>
                      </q-card-section>
                    </q-card>
                  </q-card-section>
                  <q-card-section v-if="cart.length==0">
                    <div class="empty-cart">
                      <i class="fa fa-shopping-cart" style="font-size: 100px;"></i>
                      <p style="color:red;">Cart is Empty</p>
                      <router-link class="btn btn-primary" to="/">Keep Shopping</router-link>
                    </div>
                  </q-card-section>
                </q-card>
              </div>

              <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                <q-card class="q-ma-sm" elevated bordered>
                  <q-card-section>
                    <div class="text-h5 text-bold text-grey-8">Order Summery</div>
                    <div class="flex justify-between row" v-for="(c) in cart" :key="c.id">
                      <div class="text-subtitle1 text-grey-9 q-pa-sm">{{c.name}}</div>
                      <div
                        class="text-subtitle1 text-grey-9 q-pa-sm"
                      >{{currency}} {{(rate *(c.price -c.discount)).toFixed(2)}}</div>
                    </div>
                    <div class="flex justify-between row bg-grey-2">
                      <div class="text-subtitle1 text-grey-9 q-pa-sm">Subtotal</div>
                      <div
                        class="text-subtitle1 text-grey-9 q-pa-sm"
                      >{{currency}} {{ cartTotal.toFixed(2) }}</div>
                    </div>
                    <q-separator inset="div" />
                    <div class="flex justify-between row q-py-md">
                      <q-btn flat color="primary">Save for Later</q-btn>
                      <q-btn color="secondary" @click="step = 3">checkout</q-btn>
                    </div>
                  </q-card-section>
                </q-card>
              </div>
            </div>
            <q-stepper-navigation>
              <q-btn outline @click="step = 2" color="primary" label="Continue" />
            </q-stepper-navigation>
          </q-step>

          <q-step :name="2" title="Login / Sign Up / Information" icon="mail" :done="step > 2">
            <div class="row">
              <div class="col-8 col-md-8 col-sm-12 col-xs-12">
                <login v-if="authMode==0" @toogleAuthMode="toogleAuthMode"></login>
                <register v-if="authMode==1" @toogleAuthMode="toogleAuthMode"></register>
              </div>
              <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                <q-card class="q-ma-sm" elevated bordered>
                  <q-card-section>
                    <div class="text-h5 text-bold text-grey-8">Order Summery</div>
                    <div class="flex justify-between row" v-for="(c) in cart" :key="c.id">
                      <div class="text-subtitle1 text-grey-9 q-pa-sm">{{c.name}}</div>
                      <div
                        class="text-subtitle1 text-grey-9 q-pa-sm"
                      >{{currency}} {{(rate *(c.price -c.discount)).toFixed(2)}}</div>
                    </div>
                    <div class="flex justify-between row bg-grey-2">
                      <div class="text-subtitle1 text-grey-9 q-pa-sm">Subtotal</div>
                      <div
                        class="text-subtitle1 text-grey-9 q-pa-sm"
                      >{{currency}} {{ cartTotal.toFixed(2) }}</div>
                    </div>
                    <q-separator inset="div" />
                    <div class="flex justify-between row q-py-md">
                      <q-btn flat color="primary">Save for Later</q-btn>
                    </div>
                  </q-card-section>
                </q-card>
              </div>
            </div>
            <q-stepper-navigation>
              <q-btn outline @click="step = 3" color="primary" label="Continue" />
              <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm" />
            </q-stepper-navigation>
          </q-step>
          <q-step :name="3" title="Payment" icon="attach_money" :done="step > 3">
            <div class="row">
              <checkout
                :cart="cart"
                :cartTotal="cartTotal"
                :currency="currency"
                :rate="rate"
                @showThankYou="showThankYou"
              ></checkout>
              <div class="col-4 col-md-4 col-sm-12 col-xs-12">
                <q-card class="q-ma-sm" elevated bordered>
                  <q-card-section>
                    <div class="text-h5 text-bold text-grey-8">Order Summery</div>
                    <div class="flex justify-between row" v-for="(c) in cart" :key="c.id">
                      <div class="text-subtitle1 text-grey-9 q-pa-sm">{{c.name}}</div>
                      <div
                        class="text-subtitle1 text-grey-9 q-pa-sm"
                      >{{currency}} {{(rate *(c.price -c.discount)).toFixed(2)}}</div>
                    </div>
                    <div class="flex justify-between row bg-grey-2">
                      <div class="text-subtitle1 text-grey-9 q-pa-sm">Subtotal</div>
                      <div
                        class="text-subtitle1 text-grey-9 q-pa-sm"
                      >{{currency}} {{ cartTotal.toFixed(2) }}</div>
                    </div>
                  </q-card-section>
                </q-card>
                <q-card class="q-ma-sm" elevated bordered>
                  <q-card-section>
                    <div class="text-h5 text-bold text-grey-8">Currency Options</div>
                    <br />
                    <q-select
                      dense
                      outlined
                      :value="currency"
                      :options="currenciesList"
                      emit-value
                      map-options
                      label="Currency"
                      @input="fetchCurrencyConversionRate"
                    />
                  </q-card-section>
                </q-card>
              </div>
            </div>
            <q-stepper-navigation>
              <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm" />
            </q-stepper-navigation>
          </q-step>

          <q-step :name="4" title="Order Confirmation" icon="add_shopping_cart">
            <q-card>
              <q-card-section class="text-center">
                <div class="text-h5 q-pa-lg">Congratulations!</div>
                <div
                  class="text-subtitle1 text-grey-8"
                >Your purchased items has been successfully added in your account.</div>
                <div class="text-blue-9 q-ma-lg">
                  <q-btn color="primary" to="/qbank/dashboard/welcome">Go to Qbank Dashboard</q-btn>
                </div>
              </q-card-section>
            </q-card>

            <q-stepper-navigation>
              <q-btn outline color="primary" label="Finish" @click="step=1" />
            </q-stepper-navigation>
          </q-step>
        </q-stepper>
      </div>
    </transition>
  </q-layout>
</template>

<script>
import { mapGetters } from "vuex";
import ConfirmDialogVue from "../components/ConfirmDialog.vue";
import { Loading } from "quasar";
export default {
  data() {
    return {
      password: "",
      isPwd: true,
      mail: "",
      remember: false,
      options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"],
      qbankPlans: [],
      selectedPlans: [],
      similarProducts: [],
      doctypes: [],
      authMode: 0,
      selectedCurrency: "USD",
      currenciesList: [
        { label: "USD", value: "USD" },
        { label: "PKR", value: "PKR" },
        { label: "EUR", value: "EUR" },
        { label: "RON", value: "RON" },
        { label: "GBP", value: "GBP" },
        { label: "AUD", value: "AUD" },
        { label: "CAD", value: "CAD" },
        { label: "CHF", value: "CHF" },
        { label: "CZK", value: "CZK" },
        { label: "DKK", value: "DKK" },
        { label: "HUF", value: "HUF" },
        { label: "JPY", value: "JPY" },
        { label: "NOK", value: "NOK" },
        { label: "PLN", value: "PLN" },
        { label: "SEK", value: "SEK" },
        { label: "TRY", value: "TRY" },
        { label: "RUB", value: "RUB" },
        { label: "CNY", value: "CNY" },
        { label: "BGN", value: "BGN" },
        { label: "HRK", value: "HRK" },
        { label: "BRL", value: "BRL" },
        { label: "HKD", value: "HKD" },
        { label: "IDR", value: "IDR" },
        { label: "KRW", value: "KRW" },
        { label: "MXN", value: "MXN" },
        { label: "MYR", value: "MYR" },
        { label: "NZD", value: "NZD" },
        { label: "PHP", value: "PHP" },
        { label: "SGD", value: "SGD" },
        { label: "ZAR", value: "ZAR" },
        { label: "MDL", value: "MDL" },
        { label: "AED", value: "AED" },
        { label: "EGP", value: "EGP" },
        { label: "INR", value: "INR" },
        { label: "RSD", value: "RSD" },
        { label: "UAH", value: "UAH" },
        { label: "TWD", value: "TWD" },
        { label: "ILS", value: "ILS" },
        { label: "LBP", value: "LBP" },
        { label: "SYP", value: "SYP" },
        { label: "JOD", value: "JOD" },
        { label: "KWD", value: "KWD" },
        { label: "OMR", value: "OMR" },
        { label: "QAR", value: "QAR" },
        { label: "SAR", value: "SAR" },
        { label: "ARS", value: "ARS" },
        { label: "CLP", value: "CLP" },
        { label: "BOB", value: "BOB" },
        { label: "COP", value: "COP" },
        { label: "CRC", value: "CRC" },
        { label: "DOP", value: "DOP" },
        { label: "GTQ", value: "GTQ" },
        { label: "HNL", value: "HNL" },
        { label: "NIO", value: "NIO" },
        { label: "PYG", value: "PYG" },
        { label: "PEN", value: "PEN" },
        { label: "UYU", value: "UYU" },
        { label: "NGN", value: "NGN" },
        { label: "NAD", value: "NAD" },
        { label: "BYR", value: "BYR" },
        { label: "TND", value: "TND" },
        { label: "DZD", value: "DZD" },
        { label: "KES", value: "KES" },
        { label: "VND", value: "VND" },
        { label: "MAD", value: "MAD" },
        { label: "THB", value: "THB" },
        { label: "BYN", value: "BYN" },
        { label: "BDT", value: "BDT" },
        { label: "LKR", value: "LKR" },
        { label: "AFN", value: "AFN" },
        { label: "ALL", value: "ALL" },
        { label: "AZN", value: "AZN" },
        { label: "BBD", value: "BBD" },
        { label: "BMD", value: "BMD" },
        { label: "BND", value: "BND" },
        { label: "BSD", value: "BSD" },
        { label: "BWP", value: "BWP" },
        { label: "BZD", value: "BZD" },
        { label: "FJD", value: "FJD" },
        { label: "JMD", value: "JMD" },
        { label: "KZT", value: "KZT" },
        { label: "LAK", value: "LAK" },
        { label: "LRD", value: "LRD" },
        { label: "MMK", value: "MMK" },
        { label: "MOP", value: "MOP" },
        { label: "MRO", value: "MRO" },
        { label: "MUR", value: "MUR" },
        { label: "MVR", value: "MVR" },
        { label: "NPR", value: "NPR" },
        { label: "PGK", value: "PGK" },
        { label: "SBD", value: "SBD" },
        { label: "SCR", value: "SCR" },
        { label: "TOP", value: "TOP" },
        { label: "TTD", value: "TTD" },
        { label: "VUV", value: "VUV" },
        { label: "WST", value: "WST" },
        { label: "XCD", value: "XCD" },
        { label: "XOF", value: "XOF" },
        { label: "YER", value: "YER" },
      ],
    };
  },
  components: {
    checkout: () => import("../components/cart/Checkout.vue"),
    register: () => import("../components/cart/Register.vue"),
    login: () => import("../components/cart/Login.vue"),
  },
  computed: {
    ...mapGetters("cart", [
      "cart",
      "isCartEmpty",
      "cartTotal",
      "rate",
      "currency",
    ]),
    ...mapGetters("auth", ["isLoggedIn"]),
    step: {
      get() {
        return this.$route.query.view
          ? parseInt(this.$route.query.view, 10)
          : 1;
      },
      set(val) {
        switch (val) {
          case 2:
            if (this.isLoggedIn) {
              if (this.step == 3) {
                val = 1;
              } else {
                val = 3;
              }
            }
          case 3:
            if (this.isCartEmpty) {
              if (this.step == 1) {
                return;
              }
              val = 1;
            } else if (!this.isLoggedIn) {
              if (this.step != 2) {
                val = 2;
              } else {
                return;
              }
            }
            break;
          case 4:
            return;
        }
        this.$router.replace({ query: { view: val } });
      },
    },
  },
  mounted() {
    this.load2Checkout();
    this.selectedPlans = [];
    this.cart.forEach((val, index) => {
      this.selectedPlans.push(val.plan);
    });
    this.handleSimilarProducts();
    if (!this.isLoggedIn && this.step == 3) {
      this.$router.replace({ query: { view: 2 } });
    } else if (this.isLoggedIn && this.step == 2) {
      this.$router.replace({ query: { view: 3 } });
    }
  },
  methods: {
    load2Checkout() {
      let tcheckout = document.createElement("script");
      tcheckout.setAttribute(
        "src",
        "https://www.2checkout.com/checkout/api/2co.min.js"
      );
      document.head.appendChild(tcheckout);
    },
    toogleAuthMode(val) {
      this.authMode = val;
    },
    handleSimilarProducts: function () {
      this.doctypes = [];
      this.cart.forEach((e) => {
        let item = this.doctypes.find((el) => {
          return e.doctype == el.doctype && e.type == el.type;
        });

        if (!item) {
          this.doctypes.push({ doctype: e.doctype, type: e.type });
        }
      });
      console.log(this.doctypes);
      if (this.doctypes.length > 0) {
        this.fetchSimilarProducts();
      }
    },
    addToCart: function (product) {
      let index = this.similarProducts.findIndex((e) => {
        return e.id == product.id;
      });
      this.similarProducts.splice(index, 1);
      this.$store.dispatch("addToCart", product).then(() => {
        this.handleSimilarProducts();
        this.$notify({
          title: " Congrats",
          message: "Added To Cart Successfully !",
          type: "success",
          position: "bottom-right",
        });
      });
    },
    fetchSimilarProducts() {
      axios.post("/cart/similar/products", this.doctypes).then((res) => {
        this.similarProducts = [];
        res.data.forEach((el) => {
          if (!this.isProductInCart(el)) {
            this.similarProducts.push(el);
          }
        });

        console.log(res.data);
      });
    },
    isProductInCart(item) {
      let found = false;
      this.cart.forEach((e) => {
        if (e.id == item.id && e.type == item.type) {
          found = true;
          return false;
        }
      });

      return found;
    },
    updatePrice(p, plans, index) {
      let plan = plans.find((e) => e.value == p);
      this.$store
        .dispatch("cart/updateItemPrice", {
          index: index,
          actual_price: plan.actual_price,
          discount_price: plan.discount_price,
          plan: p,
        })
        .then(() => {
          this.$q.notify({
            message: "Success",
            type: "success-notify",
            caption: "Product Subscription Plan Changed  Successfully !",
          });
        })
        .catch((e) => {
          this.$q.notify({
            message: "Failed",
            type: "error-notify",
            caption:
              "Sorry!! Subscription Plan change Request failed.Please try again later...",
          });
        });
    },
    updateSimilarProdPrice(p, index) {
      let plan = this.qbankSubscriptions.find((e) => e.id == p);

      this.similarProducts[index].price = plan.actual_price;
      this.similarProducts[index].discount = plan.discount_price;
    },
    removeFromCart(index) {
      this.$q
        .dialog({
          component: ConfirmDialogVue,
          parent: this,
          titleText: "Confirm ?",
          msgText: "Would you like to remove this product from cart?",
          cancel: true,
          persistent: true,
        })
        .onOk(() => {
          this.$store
            .dispatch("cart/removeFromCart", index)
            .then(() => {
              this.handleSimilarProducts();
              this.$q.notify({
                message: "Success",
                type: "success-notify",
                caption: "Product removed from cart  Successfully !",
              });
            })
            .catch((e) => {
              this.$q.notify({
                message: "Failed",
                type: "error-notify",
                caption:
                  "Sorry!! Prduct remove Request failed.Please try again later...",
              });
            });
        })
        .onCancel(() => {
          // console.log('>>>> Cancel')
        })
        .onDismiss(() => {
          // console.log('I am triggered on both OK and Cancel')
        });
    },
    removeFromSimilarProducts(index) {
      this.similarProducts.splice(index, 1);
      this.$notify({
        title: "success",
        message: "Product Reomoved From Suggestion Successfully !",
        type: "success",
        position: "bottom-right",
      });
    },
    showThankYou() {
      this.$router.replace({ query: { view: 4 } });
      this.$store
        .dispatch("cart/clearCart")
        .then(() => {})
        .catch((e) => {
          this.$q.notify({
            message: "Alert",
            type: "error-notify",
            caption:
              "Sorry!! Cart Clear Failed.Please manually clear the cart...",
          });
        });
    },

    fetchCurrencyConversionRate(currency) {
      Loading.show({
        message: "Loading Currency Rate. Please Hang on a second...",
      });
      if (currency == "USD") {
        let rate = 1.0;
        this.$store.commit("cart/updateCurrencyAndRate", { rate, currency });
        Loading.hide();
        return;
      }
      let t = this;
      axios
        .get(`/conversion/rate/${currency}`)
        .then((res) => {
          let rate = res.data.rate;
          t.$store.commit("cart/updateCurrencyAndRate", { rate, currency });
          Loading.hide();
        })
        .catch((err) => {
          Loading.hide();
          this.$q.notify({
            message: "Error",
            type: "error-notify",
            caption:
              "Sorry!! Currency Conversion Failed. Please try again Later...",
          });
           this.$store.commit("cart/updateCurrencyAndRate", { rate:1, currency:'USD' });
        });
    },

    parseXml(text, currency) {
      let t = this;
      let parser = new DOMParser();
      let xmlDoc = parser.parseFromString(text, "text/xml");
      Array.from(xmlDoc.getElementsByTagName("ePayment")).forEach(function (
        item
      ) {
        let rate = parseFloat(item.childNodes[0].childNodes[1].textContent);
        t.$store.commit("cart/updateCurrencyAndRate", { rate, currency });
      });
    },
  },
  watch: {
    cart: function () {
      this.selectedPlans = [];
      this.cart.forEach((val, index) => {
        this.selectedPlans.push(val.plan);
      });
    },
  },
};
</script>

<style lang="css" scoped>
.empty-cart {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: column;
}
.empty-cart > a {
  display: flex;
  justify-content: center;
  width: 50%;
  align-self: center;
}
.my-card {
  width: 100%;
  max-width: 265px;
}
.bullets ul {
  list-style: none;
  padding: 0;
}
.bullets ul li {
  width: 49%;
  display: inline-block;
  vertical-align: top;
  padding: 10px 0;
  font-size: 18px;
}
.bullets li::before {
  content: "\2713";
  padding-right: 10px;
  color: green;
  font-weight: 900;
}

.info-card {
  width: 100%;
  max-width: 30vw;
  max-height: auto;
}

.related-art {
  width: 100%;
  max-height: auto;
}

.my-card2 {
  width: 100%;
  max-width: 600px;
}

.my-card-tuts {
  width: 100%;
  max-width: 500px;
}

.col-height {
  height: 380px;
}

.col-height-tuts {
  max-height: 447px;
}

.wide {
  width: 80%;
}

.l-h {
  line-height: 3.5;
}

.min-h {
  min-height: 160px;
}

.q-card__section--vert {
  padding: 10px;
}

.hide {
  display: none;
}

.show {
  display: inline;
}
a {
  text-decoration: none;
  color: #04b1ed;
}

.grn-v-bar {
  border-left: 3px solid transparent;
}

.grn-v-bar:hover {
  border-left: 3px solid green;
}
.no-underline a {
  text-decoration: none;
  font-size: 1.5em;
}

.no-underline a:hover {
  color: rgb(0, 255, 0) !important;
}

.no-underline a .i-rotate {
  transform: rotate(0deg);
  transition: all 0.5s ease;
}

.no-underline a:hover .i-rotate {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.q-item {
  min-height: 24px;
  padding: 2px 46px;
  color: inherit;
  transition: color 0.3s, background-color 0.3s;
}

.content {
  max-width: 60%;
}

.containers {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.h4-title {
  color: #fff;
  font-size: 36px;
  font-family: keep calm;
}

.h5-title {
  width: 75%;
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.slider-l {
  position: absolute;
  z-index: 1030;
  width: 65%;
}

.top-slider {
  background-image: linear-gradient(
    to bottom right,
    black,
    rgba(0, 0, 0, 0.75)
  );
  position: relative;
  min-height: 70%;
}

.top-slider .img-float {
  width: 50%;
  float: right !important;
}

.db-menu {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  width: 20vw;
}

.hover-fx {
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2),
    0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in;
}

.testi-bg {
  height: 80vh;
  width: 100%;
  background-image: radial-gradient(
      circle,
      rgba(35, 146, 131, 0.99),
      rgba(97, 190, 178, 0.92)
    ),
    url(../statics/testiBg.svg);
  background-repeat: repeat;
}

.bg-map {
  height: 80vh;
  width: 100%;
  background-image: url(../statics/world-map.png);
  background-repeat: no-repeat;
  /* background-size: cover;
        background-position: top; */
}

.bg-map-mob {
  height: 80vh;
  width: 100%;
  background-image: url(../statics/world-map.png);
  background-repeat: no-repeat;
}

.logo-hover {
  filter: grayscale(100%);
  margin: 5px 20px;
}

.logo-hover:hover {
  filter: grayscale(0%);
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.img-size {
  width: 60%;
  height: 150px;
}

.popup-wh {
  width: 240px;
  height: auto;
}

.face-card {
  width: 25%;
}

.img-hover {
  filter: grayscale(100%);
  transform: scale(1, 1);
  transition: all 0.5s;
}

.img-hover:hover {
  filter: grayscale(0%);
  transform: scale(1.3, 1.3);
  transition: all 0.5s;
  border: 1px solid white;
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.5),
    0 14px 21px 2px rgba(0, 0, 0, 0.24), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  z-index: 1030;
}
.fix {
  position: fixed;
}
.text-hover {
  transition: all 2s;
}
.text-hover:hover .hidden {
  transition: all 2s;
  color: #04b1ed;
  display: block !important;
}

.hover-primary {
  background: inherit;
  transition: all 1s;
}
.hover-primary:hover {
  background: #1976d2 !important;
  transition: all 0.6s;
}
.order-start {
  order: 1;
}
.order-end {
  order: 2;
}
.sizing {
  font-size: 30px;
  width: 40px;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .fix {
    position: relative;
  }
  .btn-center {
    text-align: center;
  }
  .order-start {
    order: 2;
  }
  .order-end {
    order: 1;
  }
  .bullets ul li {
    width: 100%;
    display: block;
  }
  .q-mt-lg {
    margin-left: 15px;
  }
  .sizing {
    font-size: 20px;
    width: 10px;
  }
  .w-40 {
    width: 96%;
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }

  .h4-title-mob {
    font-size: 30px;
    text-align: center;
    line-height: 1;
    margin-left: 0px;
  }

  .w-50 {
    width: 100%;
    font-size: 36px;
    line-height: 1;
    text-align: center;
    margin-top: -80px;
  }

  .info-card {
    width: 100%;
    max-width: 92%;
    max-height: 420px;
  }
  .img-size {
    width: 90%;
    height: 150px;
    display: none;
  }
  .my-card2 {
    width: 100%;
    max-width: 85%;
  }

  .face-card {
    width: 45%;
  }

  .col-height-tuts {
    max-height: 35%;
  }

  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

  .testi-bg {
    height: 100% !important;
  }

  .min-h {
    min-height: 16px;
  }

  .text-h4 {
    font-size: 26px !important;
  }

  .h3-title {
    color: #fff;
    font-family: keep calm;
    font-size: 30px;
    line-height: 1;
    text-align: center;
  }

  .h5-title {
    display: none;
  }

  .slider-l {
    width: 100%;
    margin-top: 0%;
  }

  .top-slider {
    height: 70vh;
  }

  .top-slider .img-float {
    width: 100%;
    height: auto;
  }

  .col-height {
    height: auto;
  }

  .wide {
    width: 95%;
    margin-top: 0;
  }

  .q-pt-xl {
    padding-top: 10px !important;
  }

  .q-pl-xl {
    padding-left: 36px !important;
  }

  .db-menu {
    width: 50vw;
  }

  .q-card__section--horiz > div:not(:last-child),
  .q-card__section--horiz > img:not(:last-child) {
    /* top: -80px; */
    top: 0px;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
  .face-card {
    width: 11.7vw;
  }
}
</style><style>
.top-slider .q-carousel__slides-container {
  height: 100% !important;
  width: 70%;
  float: right;
  margin-top: 0px !important;
}

.border-red {
  border: 1px solid red;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .top-slider .q-carousel__slides-container {
    height: 65% !important;
    margin-top: 200px !important;
    float: none;
    width: 100%;
  }
  .q-stepper__tab {
    display: none;
  }
}
</style>
