<template>
  <q-layout class="bg-white">
    <div class="row q-pa-none">
      <div class="col-12 col-md-12">
        <transition
          appear
          enter-active-class="animated slideInUp"
          leave-active-class="animated slideInDown"
        >
          <div class="text-center text-grey-8 q-pb-xl q-mt-md">
            <span class="text-h4 text-center text-bold line-h-1">GENERAL DASHBOARD</span>
          </div>
        </transition>
      </div>
    </div>
    <section class="row">
      <div class="col-12 col-md-12 q-ma-lg">
        <q-card class="my-card">
          <q-card-section>
            <div class="row">
              <div class="col-12 col-md-4 q-px-xs">TUTOR</div>
              <div class="col-12 col-md-4 q-px-xs">MY QBANK</div>
              <div class="col-12 col-md-4 q-px-xs">MY COURSE</div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </section>

    <footer>
      <div class="q-pa-xs bg-grey-10" style="width:100%;">
        <div class style="border-bottom:1px solid #555;height:auto;">
          <div class="q-pa-xs bg-grey-10 text-white row">
            <q-list dark style="max-width: auto">
              <q-expansion-item default-opened label="DOCEXAMS">
                <q-item clickable v-ripple>
                  <q-item-section>About Us</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Contact Us</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>How it Works</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Privacy Policy</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Refund Policy</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Testimonials</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Sitemap</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Help</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
              <q-expansion-item default-opened label="PARTNER WITH US">
                <q-item clickable v-ripple>
                  <q-item-section>Work for us</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Academic Partners</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-list>
            <q-list dark class style="max-width: auto">
              <q-expansion-item default-opened label="STUDENTS">
                <q-item clickable v-ripple>
                  <q-item-section>Sign In</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Find Course</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Find Qbank</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Find Tutor</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>How it works</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>FAQs</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
              <q-expansion-item default-opened label="TUTORS">
                <q-item clickable v-ripple>
                  <q-item-section>Sign In</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>Become a Tutor</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>FAQs</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-list>
            <q-list dark style="min-width: auto">
              <q-expansion-item default-opened label="FEATURED EXAMS">
                <q-item clickable v-ripple>
                  <q-item-section>MOH UAE</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>DHA</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>HAAD</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MOH Oman</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MOH Kuwait</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>SLE</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>DUCH</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MCPS</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>FCPS</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>PM &amp; DC</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>USMLE</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>PLAB</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-list>
            <q-list dark style="min-width: auto">
              <q-expansion-item default-opened label="FEATURED EXAMS">
                <q-item clickable v-ripple>
                  <q-item-section>AMC</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MCCEE</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MCCQE</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MRCP</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MRCS</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>MRCOG</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>ORE (UK)</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>NBDE (USA)</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>ADC (Australia)</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>NDEB (Canada)</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>NAPLEX</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>
                    <q-item-label>NCLEX</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-list>
            <q-list dark style="max-width: auto">
              <q-expansion-item default-opened label="CONNECT WITH US">
                <q-item clickable v-ripple>
                  <q-item-section class="q-pa-none" avatar>
                    <svg
                      style="width:18px;height:18px;margin-left:-2px;"
                      aria-hidden="true"
                      role="presentation"
                      focusable="false"
                      viewBox="0 0 24 24"
                      class="q-icon notranslate"
                    >
                      <path
                        d="M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z"
                      />
                    </svg>
                  </q-item-section>
                  <q-item-section>Blog</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-facebook-square"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Facebook</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-linkedin"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>LinkedIn</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-twitter-square"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Twitter</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-google-plus-g"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Google +</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-youtube"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Youtube</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-skype"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Skype:</q-item-label>
                    <q-item-label caption>Docexams</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-whatsapp"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>Whatsapp #</q-item-label>
                    <q-item-label caption>+92 345 2410728</q-item-label>
                  </q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section avatar>
                    <i class="fab fa-whatsapp"></i>
                  </q-item-section>
                  <q-item-section>
                    <q-item-label>imo #</q-item-label>
                    <q-item-label caption>+92 345 2410728</q-item-label>
                  </q-item-section>
                </q-item>
              </q-expansion-item>
            </q-list>
          </div>
        </div>
      </div>
      <div
        class="text-center q-pa-sm bg-grey-10"
        style="height:40px;color:white;width:100%;"
      >&copy;&nbsp;&nbsp;2020-2021 DocExams - All Rights Reserved</div>
    </footer>

    <q-drawer v-model="left" side="left" overlay behavior="mobile" elevated>
      <div class="fit bg-grey-9">
        <div class="q-pa-none bg-grey-9 text-white" style="max-width: auto">
          <q-list class="text-h6">
            <q-expansion-item
              :content-inset-level="1"
              expand-separator
              icon="menu_book"
              label="Course"
            >
              <q-item clickable v-ripple>
                <q-item-section>Course-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Course-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Course-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="person" label="Tutor">
              <q-item clickable v-ripple>
                <q-item-section>Tutor-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Tutor-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Tutor-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="school" label="Qbank">
              <q-item clickable v-ripple>
                <q-item-section>Qbank-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Qbank-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Qbank-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="info" label="Info">
              <q-expansion-item label="Info 1" :content-inset-level="0.5">
                <q-item clickable v-ripple to="/info">
                  <q-item-section>Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-3</q-item-section>
                </q-item>
              </q-expansion-item>

              <q-expansion-item label="Info 2" :content-inset-level="0.5">
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-3</q-item-section>
                </q-item>
              </q-expansion-item>
            </q-expansion-item>
          </q-list>
        </div>
      </div>
    </q-drawer>
    <q-page-container>
      <q-page-sticky expand position="top" style="z-index:1030;">
        <div class="containers">
          <q-toolbar class="bg-black text-white q-py-xs q-px-lg">
            <q-btn class="hide" dense flat round icon="menu" @click="left = !left" />
            <q-toolbar-title class="q-py-xs">
              <img src="statics/logo.png" height="40" />
            </q-toolbar-title>

            <div
              v-if="$q.screen.gt.sm"
              class="no-underline GL__toolbar-link q-ml-xs q-gutter-xl text-body2 text-weight-normal row items-center no-wrap"
            >
              <a href="javascript:void(0)" class="text-white">
                Course
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                    <q-item v-for="n in 3" :key="n" dense clickable>
                      <q-item-section>Course {{n}}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
              <a href="javascript:void(0)" class="text-white">
                Qbank
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                    <q-item v-for="n in 3" :key="n" dense clickable>
                      <q-item-section>Qbank {{n}}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
              <a href="javascript:void(0)" class="text-white">
                Tutor
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                    <q-item v-for="n in 3" :key="n" dense clickable>
                      <q-item-section>Tutor {{n}}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
              <!-- <a href="javascript:void(0)" class="text-white">
                    Info
              </a>-->
              <a href="javascript:void(0)" class="text-white">
                Info
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list
                    dense
                    class="q-pt-lg"
                    style="min-width: auto;background: #24292e;color:#ffffff;"
                  >
                    <q-item clickable>
                      <q-item-section>MOH UAE GP 1</q-item-section>
                      <q-item-section side>
                        <q-icon name="keyboard_arrow_right" />
                      </q-item-section>

                      <q-menu anchor="top right" self="top left">
                        <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                          <q-item v-for="n in 3" :key="n" dense clickable>
                            <q-item-section>Submenu Label</q-item-section>
                            <q-item-section side>
                              <q-icon name="keyboard_arrow_right" />
                            </q-item-section>
                            <q-menu auto-close anchor="top right" self="top left">
                              <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                <q-item v-for="n in 3" :key="n" dense clickable>
                                  <q-item-section>3rd level Label</q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-item>
                    <q-item clickable>
                      <q-item-section>MOH UAE GP 1</q-item-section>
                      <q-item-section side>
                        <q-icon name="keyboard_arrow_right" />
                      </q-item-section>

                      <q-menu anchor="top right" self="top left">
                        <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                          <q-item v-for="n in 3" :key="n" dense clickable>
                            <q-item-section>Submenu Label</q-item-section>
                            <q-item-section side>
                              <q-icon name="keyboard_arrow_right" />
                            </q-item-section>
                            <q-menu auto-close anchor="top right" self="top left">
                              <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                <q-item v-for="n in 3" :key="n" dense clickable>
                                  <q-item-section>3rd level Label</q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
            </div>

            <q-space />

            <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
              <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />

              <q-btn dense flat no-wrap>
                <q-avatar circled size="40px">
                  <img src="statics/avtr.png" />
                </q-avatar>
                <q-icon name="arrow_drop_down" size="16px" />

                <q-menu auto-close>
                  <q-list dense class="db-menu">
                    <q-item>
                      <q-item-section class="flex flex-center">
                        <q-avatar class="q-pa-xs" circled size="50px">
                          <img src="statics/avtr.png" />
                        </q-avatar>
                        <span class="text-h6">Asim Khan</span>
                        <span class="text-caption">user@docexams.com</span>
                      </q-item-section>
                    </q-item>
                    <q-separator class="bg-grey-8" />
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />
                      <q-item-section>Tutor Dashboard</q-item-section>
                    </q-item>
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="menu_book" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Course Dashboard</q-item-section>
                    </q-item>
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Qbank Dashboard</q-item-section>
                    </q-item>
                    <q-separator class="bg-grey-8" />
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="help" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Help</q-item-section>
                    </q-item>
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="exit_to_app" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Sign out</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
          </q-toolbar>
        </div>
      </q-page-sticky>
      <keep-alive>
        <router-view />
      </keep-alive>
    </q-page-container>
  </q-layout>
</template>

<script>
import { fabGithub } from "@quasar/extras/fontawesome-v5";
const stringOptions = [
  "quasarframework/quasar",
  "quasarframework/quasar-awesome"
];
export default {
  name: "MyLayout",
  data() {
    return {
      text: "",
      options: null,
      left: false,
      miniState: true,
      slide: 1,
      search: "",
      slides: "style",
      lorem:
        "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo. sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.",
      loading4: false,
      filteredOptions: []
    };
  },
  methods: {
    simulateProgress(number) {
      // we set loading state
      this[`loading${number}`] = true;
      // simulate a delay
      setTimeout(() => {
        // we're done, we reset loading state
        this[`loading${number}`] = false;
      }, 3000);
    },
    filter(val, update) {
      if (this.options === null) {
        // load data
        setTimeout(() => {
          this.options = stringOptions;
          this.$refs.search.filter("");
        }, 2000);
        update();
        return;
      }
      if (val === "") {
        update(() => {
          this.filteredOptions = this.options.map(op => ({
            label: op
          }));
        });
        return;
      }
      update(() => {
        this.filteredOptions = [
          {
            label: val,
            type: "In this repository"
          },
          {
            label: val,
            type: "All GitHub"
          },
          ...this.options
            .filter(op => op.toLowerCase().includes(val.toLowerCase()))
            .map(op => ({
              label: op
            }))
        ];
      });
    }
  },
  created() {
    this.fabGithub = fabGithub;
  }
};
</script>

<style lang="css" scoped>
a {
  text-decoration: none;
  color: #04b1ed;
  font-weight: 400;
}
.my-card {
    width:100%;
    height: auto;
}
.grn-v-bar {
  border-left: 3px solid transparent;
}

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

.wide {
  width: 80%;
}

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

.hide {
  display: none;
}

.show {
  display: inline;
}

.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 .3s, background-color .3s;
} */
.q-item {
  min-height: 24px;
  padding: 2px 15px;
  color: inherit;
  transition: color 0.3s, background-color 0.3s;
}

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

.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%;
}

.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;
}

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

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

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.header-img {
  width: 50%;
  float: right;
}

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

.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;
}

.px-xl {
  padding-left: 140px;
  padding-right: 140px;
  padding-bottom: 50px;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .btn-center {
    text-align: center;
  }

  .px-xl {
    padding-left: 0px;
    padding-right: 0px;
  }

  .w-40 {
    width: 96%;
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

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

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

  .header-img {
    width: 100%;
    float: none;
    clear: both;
  }

  .line-h-1 {
    line-height: 1.2;
  }

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

  .img-size {
    width: 90%;
    height: 150px;
    display: none;
  }

  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

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

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

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

  .top-slider {
    height: 70vh;
  }

  .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) {
}
</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%;
  }
}
</style>
