<template>
  <q-layout class="bg-white shadow-24">
    <div class="q-pa-none q-ma-none">
      <div class="slider-l q-pt-xl q-px-xl">
        <h3 class="h4-title h4-title-mob">MOH/DHA/HAAD Exam General Requirements For Dentists</h3>
        <h5
          class="h5-title"
        >All the dentists applying for license for UAE Healthcare Authorities MOH, HAAD or DHA must hold BDS, DDS, DMD or equivalent. For General Dentist, candidate must have completed house job and must have atleast two (2) years clinical experience.</h5>
        <div class="q-mb-md q-gutter-sm btn-center">
          <q-btn to="/search/courses" size="md" color="white" text-color="black" label="Course" />
          <q-btn to="/search/qbanks" size="md" color="secondary" label="Qbank" />
          <q-btn to="/search/tutors" size="md" color="primary" label="Tutor" />
        </div>
      </div>
      <q-carousel
        v-model="slide"
        class="top-slider"
        animated
        infinite
        autoplay
        transition-prev="fade-in"
        transition-next="fade-out"
      >
        <q-carousel-slide :name="1" class="img-float" img-src="statics/infoImg2.png" />
      </q-carousel>
    </div>

    <!-- ******************************************* -->
    <div class="row q-pa-md">
      <div class="col-12 col-md-12">
        <q-chip
          square
          class="bg-transparent"
          style="opacity: .5;"
          icon="access_time"
        >Last updated: 2019-01-14 14:32</q-chip>
        <q-chip
          square
          clickable
          class="bg-transparent text-primary"
          style="opacity: .5;"
          icon="person"
        >Dr. Marium Javed</q-chip>
      </div>
    </div>

    <div class="row">
      <div class="col-12 col-md-8 q-pl-lg q-pr-lg">
        <h5
          class="text-bold text-grey-8 q-ma-sm"
        >MOH/DHA/HAAD Exam General Requirements For Dentists</h5>
        <p
          class="q-ma-sm"
        >All the dentists applying for license for UAE Healthcare Authorities (Ministry of Health (MOH), Department of Health -Abu Dhabi(HAAD) or Dubai Health Authority (DHA)) must hold BDS (Bachelor of Dental Surgery), DDS (Doctor of Dental Surgery), DMD (Doctor of Dental Medicine) or equivalent from a national accredited dental institution, to be able to practice in government or private sector throughout UAE (United Arab Emirate).</p>
        <p
          class="q-ma-sm"
        >Although these UAE Healthcare Authorities (MOH, DHA, HAAD) have unified their PQR (Professional Qualification Requirements) but license conversion from one authority to another to be able to practice in different UAE state is still facing hurdles. UAE Healthcare Authorities issue license to dentists for the following categories;</p>

        <b class="text-h6 q-ma-sm">Intern</b>
        <p
          class="q-ma-sm"
        >Candidate should have passed BDS, DMD, DDS or equivalent dental qualification having atleast five (5) years of course duration from any accredited dental institution. Candidate doesn’t need experience (internship /house job or clinical) to apply for the following licensing category.</p>
        <b class="text-h6 q-ma-sm">Resident</b>
        <p
          class="q-ma-sm"
        >Candidate should have passed BDS, DMD, DDS or equivalent dental qualification from any accredited dental institution. Candidate must have completed one year house job / internship post-graduation and should also fulfill any other requirement as per the relevant authority residency standards.</p>
        <p
          class="q-ma-sm"
        >All the dentists applying for license for UAE Healthcare Authorities (Ministry of Health (MOH), Department of Health -Abu Dhabi(HAAD) or Dubai Health Authority (DHA)) must hold BDS (Bachelor of Dental Surgery), DDS (Doctor of Dental Surgery), DMD (Doctor of Dental Medicine) or equivalent from a national accredited dental institution, to be able to practice in government or private sector throughout UAE (United Arab Emirate).</p>
        <p
          class="q-ma-sm"
        >Although these UAE Healthcare Authorities (MOH, DHA, HAAD) have unified their PQR (Professional Qualification Requirements) but license conversion from one authority to another to be able to practice in different UAE state is still facing hurdles. UAE Healthcare Authorities issue license to dentists for the following categories;</p>
        <div class="row">
          <div class="col-5 col-md-5 col-xs-12 flex flex-center">
            <div class="q-pa-md q-gutter-sm">
              <q-btn
                class="btn-fixed-width"
                color="lightgrey text-grey-8 rounded-border"
                icon="chat"
              >0 Comment(s)</q-btn>
            </div>
          </div>
          <div class="col-7 col-md-7 col-xs-12 flex flex-center">
            <div class="q-pa-md q-gutter-sm">
              <q-btn round color="primary">
                <i class="text-h5 fab fa-facebook-f"></i>
              </q-btn>
              <q-btn round color="primary">
                <i class="text-h5 fab fa-twitter"></i>
              </q-btn>
              <q-btn round color="primary">
                <i class="text-h5 fab fa-linkedin-in"></i>
              </q-btn>
              <q-btn round color="primary">
                <i class="text-h5 fab fa-google-plus-g"></i>
              </q-btn>
              <q-btn round color="primary">
                <i class="text-h5 far fa-envelope"></i>
              </q-btn>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-md-12">
            <div class="q-pa-sm q-gutter-sm">
              <q-banner
                rounded
                class="column text-center q-pa-md bg-white"
                style="border: 1px solid #d1d1d1;"
              >
                <template v-slot:avatar>
                  <q-avatar size="80px">
                    <img src="statics/tutorImg2.jpg" />
                  </q-avatar>
                </template>
                <div class="text-h6 q-pa-md">M. Asim Khan</div>
                <div class="text-weight-light">
                  I am a professional bloager with experience of 5 years...
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ipsa modi quos omnis blanditiis accusantium, aliquam labore Excepturi, assumenda expedita.
                </div>
              </q-banner>
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-4">
        <q-card class="info-card q-ma-sm" elevated bordered>
          <q-card-section horizontal>
            <q-img class="col-5 col-sm-5" src="statics/tstImg.jpg" />
            <q-card-actions vertical>
              <div class="text-h5">Course</div>
              <div class="text-weight-bold">Dental Guide</div>
              <div class="text-weight-light">Lorem ipsum, dolor amet consectetur adipisicing elit.</div>
              <q-btn flat color="primary">View Details</q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
        <q-card class="info-card q-ma-sm" elevated bordered>
          <q-card-section horizontal>
            <q-img class="col-5 col-sm-5" src="statics/tutorImg2.jpg" />
            <q-card-actions vertical>
              <div class="text-h5">Tutor</div>
              <div class="text-weight-bold">Dental Guide</div>
              <div class="text-weight-light">Lorem ipsum, dolor amet consectetur adipisicing elit.</div>
              <q-btn flat color="primary">View Details</q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
        <q-card class="info-card q-ma-sm" elevated bordered>
          <q-card-section horizontal>
            <q-img class="col-5 col-sm-5" src="statics/photo11.jpg" />
            <q-card-actions vertical>
              <div class="text-h5">Qbank</div>
              <div class="text-weight-bold">Dental Guide</div>
              <div class="text-weight-light">Lorem ipsum, dolor amet consectetur adipisicing elit.</div>
              <q-btn flat color="primary">View Details</q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-8 q-px-md">
        <div class="text-h4 text-grey-8 q-mx-lg q-py-xl">You May Also Like</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-8 q-px-lg">
        <q-card class="related-art q-ma-sm no-border no-shadow">
          <q-card-section horizontal>
            <q-img class="img-size" src="statics/final-imgs/1.jpg" />
            <q-card-actions vertical>
              <q-img class="img-size hide" src="statics/final-imgs/1.jpg" />

              <div class="text-h5 text-bold">What to know about coronaviruses</div>
              <div class="text-weight-light">Medically reviewed by Cameron White, MD, MPH</div>
              <p
                class="text-body2 q-pt-lg"
              >Coronaviruses belong to the subfamily Coronavirinae in the family Coronaviridae and often cause the common cold. Both SARS-CoV and MERS-CoV are types respiratory syndrome</p>
              <q-btn flat color="primary" label="Read more" class="w-40">
                <q-icon right name="arrow_right_alt"></q-icon>
              </q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
        <q-separator color="lightgrey" class="q-ma-lg" inset />
      </div>
      <div class="col-12 col-md-8 q-px-lg">
        <q-card class="related-art q-ma-sm no-border no-shadow">
          <q-card-section horizontal>
            <q-img class="img-size" src="statics/final-imgs/5.jpg" />
            <q-card-actions vertical>
              <q-img class="img-size hide" src="statics/final-imgs/5.jpg" />

              <div class="text-h5 text-bold">What to know about coronaviruses</div>
              <div class="text-weight-light">Medically reviewed by Cameron White, MD, MPH</div>
              <p
                class="text-body2 q-pt-lg"
              >Coronaviruses belong to the subfamily Coronavirinae in the family Coronaviridae and often cause the common cold. Both SARS-CoV and MERS-CoV are types respiratory syndrome</p>
              <q-btn flat color="primary" label="Read more" class="w-40">
                <q-icon right name="arrow_right_alt"></q-icon>
              </q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
        <q-separator color="lightgrey" class="q-ma-lg" inset />
      </div>
      <div class="col-12 col-md-8 q-px-lg">
        <q-card class="related-art q-ma-sm no-border no-shadow">
          <q-card-section horizontal>
            <q-img class="img-size" src="statics/final-imgs/8.png" />
            <q-card-actions vertical>
              <q-img class="img-size hide" src="statics/final-imgs/8.png" />
              <div class="text-h5 text-bold">What to know about coronaviruses</div>
              <div class="text-weight-light">Medically reviewed by Cameron White, MD, MPH</div>
              <p
                class="text-body2 q-pt-lg"
              >Coronaviruses belong to the subfamily Coronavirinae in the family Coronaviridae and often cause the common cold. Both SARS-CoV and MERS-CoV are types respiratory syndrome</p>
              <q-btn flat color="primary" label="Read more" class="w-40">
                <q-icon right name="arrow_right_alt"></q-icon>
              </q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
        <q-separator color="lightgrey" class="q-ma-lg" inset />
      </div>
      <div class="col-12 col-md-8 q-px-lg">
        <q-card class="related-art q-ma-sm no-border no-shadow">
          <q-card-section horizontal>
            <q-img class="img-size" src="statics/final-imgs/9.jpg" />
            <q-card-actions vertical>
              <q-img class="img-size hide" src="statics/final-imgs/9.jpg" />
              <div class="text-h5 text-bold">What to know about coronaviruses</div>
              <div class="text-weight-light">Medically reviewed by Cameron White, MD, MPH</div>
              <p
                class="text-body2 q-pt-lg"
              >Coronaviruses belong to the subfamily Coronavirinae in the family Coronaviridae and often cause the common cold. Both SARS-CoV and MERS-CoV are types respiratory syndrome</p>
              <q-btn flat color="primary" label="Read more" class="w-40">
                <q-icon right name="arrow_right_alt"></q-icon>
              </q-btn>
            </q-card-actions>
          </q-card-section>
        </q-card>
        <q-separator color="lightgrey" class="q-ma-lg" inset />
      </div>
      <div class="col-12 col-md-8 q-px-lg q-pb-lg">
        <q-card class="related-art q-ma-sm no-shadow">
          <q-card-section horizontal>
            <q-avatar size="60px" class="q-ma-md">
              <img style="border-radius: 50%;" src="statics/tutorImg2.jpg" />
            </q-avatar>

            <div class="q-mx-md full-width">
              <q-input v-model="text" outlined type="textarea" />
            </div>
          </q-card-section>
        </q-card>
        <q-btn class="float-right" color="primary" label="Post a comment" />
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-8">
        <q-list class="rounded-borders" style="max-width: 100%;">
          <q-item-label header>
            All Comments
            <q-badge color="grey" text-color="white text-bold" label="24" />
          </q-item-label>

          <q-item>
            <q-item-section avatar>
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <q-item-label lines="1">Brunch this weekend?</q-item-label>
              <q-item-label caption lines="2">
                <span class="text-weight-bold">Janet</span>
                -- I'll be in your neighborhood doing errands this
                weekend. Do you want to grab brunch?
              </q-item-label>
              <q-item-label caption lines="1">
                <a href="#">
                  <span clickable class="text-weight-bold">
                    Like
                    <i class="fas fa-thumbs-up q-pa-sm"></i>
                  </span>
                </a>
                <a href="#">
                  <span clickable class="text-weight-bold">
                    Dislike
                    <i class="fas fa-thumbs-down q-pa-sm"></i>
                  </span>
                </a>
                <a href="#">
                  <span clickable class="text-weight-bold">
                    Reply
                    <i class="fas fa-reply q-pa-sm"></i>
                  </span>
                </a>
                <q-btn-dropdown flat color="primary" label="View more" class="w-40">
                  <q-icon right name="keyboard_arrow_right"></q-icon>
                </q-btn-dropdown>
              </q-item-label>
            </q-item-section>

            <q-item-section side top>1 min ago</q-item-section>
          </q-item>

          <q-separator inset="item" />

          <q-item>
            <q-item-section avatar>
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <q-item-label lines="1">Brunch this weekend?</q-item-label>
              <q-item-label caption lines="2">
                <span class="text-weight-bold">Janet</span>
                -- I'll be in your neighborhood doing errands this
                weekend. Do you want to grab brunch?
              </q-item-label>
              <q-item-label caption lines="1">
                <span clickable class="text-weight-bold">
                  Like
                  <i class="fas fa-thumbs-up q-pa-sm"></i>
                </span>
                <span clickable class="text-weight-bold">
                  Dislike
                  <i class="fas fa-thumbs-down q-pa-sm"></i>
                </span>
                <span clickable class="text-weight-bold">
                  Reply
                  <i class="fas fa-reply q-pa-sm"></i>
                </span>
              </q-item-label>
            </q-item-section>

            <q-item-section side top>1 min ago</q-item-section>
          </q-item>
          <q-item class="q-ml-xl">
            <q-item-section avatar>
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
              </q-avatar>
            </q-item-section>

            <q-item-section>
              <q-item-label lines="1">Brunch this weekend?</q-item-label>
              <q-item-label caption lines="2">
                <span class="text-weight-bold">Janet</span>
                -- I'll be in your neighborhood doing errands this
                weekend. Do you want to grab brunch?
              </q-item-label>
              <q-item-label caption lines="1">
                <span clickable class="text-weight-bold">
                  Like
                  <i class="fas fa-thumbs-up q-pa-sm"></i>
                </span>
                <span clickable class="text-weight-bold">
                  Dislike
                  <i class="fas fa-thumbs-down q-pa-sm"></i>
                </span>
                <span clickable class="text-weight-bold">
                  Reply
                  <i class="fas fa-reply q-pa-sm"></i>
                </span>
              </q-item-label>
            </q-item-section>

            <q-item-section side top>1 min ago</q-item-section>
          </q-item>
        </q-list>
        <q-btn class="float-right q-ma-xl" color="primary" label="Show more comments" />
      </div>
    </div>

    <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>
                  <q-item-section to="/home">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>
      <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,
      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: []
    };
  },
  components: {
    //  "footer-link": require("components/footerLink.vue").default
  },
  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>
.my-card {
  width: 100%;
  max-width: 265px;
}

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

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

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

  .q-mt-lg {
    margin-left: 15px;
  }

  .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: 96%;
    max-height: 320px;
  }
  .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%;
  }
}
</style>
