@extends('frontend.layouts.app')


@section('content')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap');

  :root {
    --principal-font: 'Kumbh Sans', sans-serif;
    --font-size: 12px;

    --bg-gradient: linear-gradient(to bottom, hsl(273, 75%, 66%), hsl(240, 73%, 65%));

    --primary-dark-color: hsl(238, 29%, 16%);
    --primary-soft-color: hsl(14, 88%, 65%);

    --neutral-dark-color: hsl(237, 12%, 33%);
    --neutral-soft-color: hsl(240, 6%, 50%);

  }


  html {
    box-sizing: border-box;
  }

  * {
    box-sizing: inherit;
  }

  .attribution {
    font-size: 11px;
    text-align: center;
    background-color: hsl(240, 5%, 91%);
    padding: 8px 0 5px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  .attribution a {
    color: hsl(228, 45%, 44%);
  }

  /* global */
  /*================================================*/




  .card-wrapper {

    padding-bottom: 50px;
    /* footer fixed */
    padding-top: -55px;
  }

  p {
    margin: 0 0 12px;
    line-height: 1.5;
  }

  h2 {
    margin: 12px 0;
  }


  /* generics */
  /*================================================*/

  .content-cc {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* FAQ card */
  /*================================================*/

  .faq-card {

    background-color: #fff;
    border-radius: 20px;

    max-width: 1350px;
    margin-top: 90px;

    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  /* FAQ card: imagenes */
  /*================================================*/


  .faq-ilustrations {
    position: relative;
  }

  .faq-ilustrations .mobile.ilust {
    position: absolute;
    top: -100px;
    left: -30px;
    right: 0;
  }

  .mobile {
    display: block;
    margin: 0 auto;
  }


  /* FAQ card: main */
  /*================================================*/

  .faq-content {
    padding: 9px 25px 3rem;
  }

  .faq-content h1 {
    font-size: 32px;
    text-align: center;
    color: var(--primary-dark-color);
  }

  .faq-accordion {
    padding: 8px 0;
    border-bottom: 1px solid hsl(240, 5%, 91%);
  }


  /* FAQ card: main title */
  /*================================================*/

  /* checkbox tgg-title*/
  input.tgg-title {
    appearance: unset;
    all: unset;
  }

  .faq-accordion-title label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .faq-accordion-title h2 {
    font-size: 20px
      /*var(--font-size)*/
    ;
    font-weight: 400;
    color: var(--neutral-dark-color);
  }

  .faq-accordion-title span {
    margin-left: auto;
    transition: transform .4s ease-in-out;
  }


  /* FAQ card: main content */
  /*================================================*/

  .faq-accordion-content {
    color: var(--neutral-soft-color);
    overflow: hidden;
    max-height: 0;
    transition: max-height .4s ease-in-out;
  }


  /* Effects */
  /*================================================*/

  /* main title, accordion title effects */

  .faq-accordion-title:hover h2 {
    color: var(--primary-soft-color)
  }

  /* onclick "" */
  .faq-accordion .tgg-title:checked+div>label>h2 {
    font-weight: 700;
  }

  .faq-accordion .tgg-title:checked+div>label>span {
    will-change: transform;
    transform: rotate(180deg);
  }

  /* main content, acordion text effect */

  .faq-accordion .tgg-title:checked~.faq-accordion-content {
    will-change: max-height;
    max-height: 150px;
  }

  .faq-back {
    background-image: url('{{ asset(' /frontend/assets/images/back.jpg') }}');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 970px;
    opacity: 90%;
    margin-bottom: 0px;
  }
</style>



<section style="" class="space-top space-extra2-bottom faq-back">
  <div class="container">
    <div class="row">

      <div style="margin:0 auto" class=" col-xl-11 col-lg-11 col-md-12 order-lg-2">

        <div style="margin-top:-65px" class="card-wrapper">
          <div class="faq-card">

            <div class="faq-ilustrations">

              <!-- mobile -->
              <img class="mobile pattern"
                src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/bg-pattern-mobile.svg">
              </img>
              <img class="mobile ilust"
                src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/illustration-woman-online-mobile.svg">
              </img>
              <!-- mobile -->
            </div>

            <main class="faq-content">
              <h1>FAQ</h1>

              <div class="faq-articles">

                <article class="faq-accordion">

                  <input type="checkbox" class="tgg-title" id="tgg-title-1">

                  <div class="faq-accordion-title">
                    <label for="tgg-title-1">
                      <h2>What is Med Exam Pass?</h2>
                      <span class="arrow-icon">
                        <img
                          src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
                      </span>
                    </label>
                  </div>

                  <div class="faq-accordion-content">
                    <p>Med Exam Pass is an online Emergency Medicine revision service developed to guide doctors through
                      the medical exams by providing a comprehensive, time efficient and personalised revision resource.
                      Established in 2024 by a team of worldwide doctors, Med Exam Pass is now recognised as a leading
                      provider of medical revision resources.

                      Our online MRCEM Primary, MRCEM Intermediate and others revision courses provide access to
                      thousands of original questions mapped to the Royal College of Emergency Medicine curricula with
                      extensive revision notes and detailed feedback to boost your MRCEM exam preparation and maximise
                      your chance of success. We are continually reviewing, updating and expanding our question bank
                      with past paper exam questions to ensure our questions represent what you will experience in the
                      actual exam.

                      Learn more about our revision courses…</p>
                  </div>

                </article> <!-- faq accordion -->

                <article class="faq-accordion">

                  <input type="checkbox" class="tgg-title" id="tgg-title-2">

                  <div class="faq-accordion-title">
                    <label for="tgg-title-2">
                      <h2>
                        What types of medical courses are available?
                      </h2>
                      <span class="arrow-icon">
                        <img
                          src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
                      </span>
                    </label>
                  </div>

                  <div class="faq-accordion-content">
                    <p>Medical courses can include undergraduate programs (like Medicine or Nursing), graduate programs
                      (such as Physician Assistant or Nurse Practitioner), specialized training (like Residency), and
                      continuing education (for current healthcare professionals)..</p>
                  </div>

                </article> <!-- faq accordion -->

                <article class="faq-accordion">

                  <input class="tgg-title" type="checkbox" id="tgg-title-3">

                  <div class="faq-accordion-title">
                    <label for="tgg-title-3">
                      <h2>
                        How do I reset my password?
                      </h2>
                      <span class="arrow-icon">
                        <img
                          src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
                      </span>
                    </label>
                  </div>

                  <div class="faq-accordion-content">
                    <p>Click “Forgot password” from the login page or “Change password” from your profile page.
                      A reset link will be emailed to you.</p>
                  </div>

                </article> <!-- faq accordion -->

                <article class="faq-accordion">

                  <input class="tgg-title" type="checkbox" id="tgg-title-4">

                  <div class="faq-accordion-title">
                    <label for="tgg-title-4">
                      <h2>
                        Can I cancel my subscription?
                      </h2>
                      <span class="arrow-icon">
                        <img
                          src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
                      </span>
                    </label>
                  </div>

                  <div class="faq-accordion-content">
                    <p>
                      Yes! Send us a message and we’ll process your request no questions asked.</p>
                  </div>

                </article> <!-- faq accordion -->

                <article class="faq-accordion">

                  <input class="tgg-title" type="checkbox" id="tgg-title-5">

                  <div class="faq-accordion-title">
                    <label for="tgg-title-5">
                      <h2>
                        Do you provide additional support?
                      </h2>
                      <span class="arrow-icon">
                        <img
                          src="https://raw.githubusercontent.com/Romerof/FAQ-accordion-card/main/images/icon-arrow-down.svg">
                      </span>
                    </label>
                  </div>

                  <div class="faq-accordion-content">
                    <p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
                  </div>

                </article> <!-- faq accordion -->

              </div> <!-- faq articles -->

            </main> <!-- faq -->

          </div> <!-- faq card -->

        </div>
      </div>
    </div>
  </div>
  @endsection