<% layout('layouts/doctorsbp') %>
<div class="speci-bg">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active speciality-first-slide">
                <img src="/img/specialities/cimg1.jpeg" class="d-block w-100 cimg" alt="...">
                <div class="carousel-caption">
                    <h2>Always laugh when you can, it is cheap medicine.</h2>
    
                </div>
            </div>

            <div class="carousel-item speciality-second-slide">
                <img src="/img/specialities/cimg2.jpeg" class="d-block w-100 cimg" alt="...">
                <div class="carousel-caption">
                    <h2>Declare the past, diagnose the present, foretell the future.‚Äù</h2>
                
                </div>
            </div>

            <div class="carousel-item speciality-third-slide">
                <img src="/img/specialities/cimg3.jpeg" class="d-block w-100 cimg" alt="...">
                <div class="carousel-caption">
                    <h2>It's no coincidence that four of the six letters in health are "heal"</h2>
                
                </div>
            </div>

        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>

    <h1 class="specialities-section-text">Speciality Doctor Section </h1>
    <div class="speciality-cards">
        <div class="boxes">
            <a href="/specialities/otology">
                <div class="card-box box-1">
                    <img class="specialities-images" src="/img/specialities/1.png" alt="">
                    <a href="/specialities/otology" class="btn btn-info consult">Otology</a>
                </div>
            </a>
        </div>
        <div class="boxes">
            <a href="/specialities/gynecology">
                <div class="card-box box-2">
                    <img class="specialities-images" src="/img/specialities/2.png" alt="">
                    <a href="/specialities/gynecology" class="btn btn-info consult">Gynecology</a>
                </div>
            </a>
        </div>

        <div class="boxes">
            <a href="/specialities/neurology">
                <div class="card-box box-3">
                    <img class="specialities-images" src="/img/specialities/3.png" alt="">
                    <a href="/specialities/neurology" class="btn btn-info consult">Neurology</a>
                </div>
            </a>
        </div>

        <div class="boxes">
            <a href="/specialities/dermatology">
                <div class="card-box box-4">
                    <img class="specialities-images" src="/img/specialities/4.png" alt="">
                    <a href="/specialities/dermatology" class="btn btn-info consult">Dermatology</a>
                </div>
            </a>
        </div>

        <a href="/specialities/pediatrician">
            <div class="boxes">
                <div class="card-box box-5">
                    <img class="specialities-images" src="/img/specialities/5.png" alt="">
                    <a href="/specialities/pediatrician" class="btn btn-info consult">Pediatrician</a>
                </div>
            </div>
        </a>

        <a href="/specialities/gastroenterology">
            <div class="boxes">
                <div class="card-box box-6">
                    <img class="specialities-images" src="/img/specialities/6.png" alt="">
                    <a href="/specialities/gastroenterology" class="btn btn-info consult">Gastroenterology</a>
                </div>
            </div>
        </a>

        <a href="/specialities/nephrology">
            <div class="boxes">
                <div class="card-box box-7">
                    <img class="specialities-images" src="/img/specialities/7.png" alt="">
                    <a href="/specialities/nephrology" class="btn btn-info consult">Nephrology</a>
                </div>
            </div>
        </a>

        <a href="/specialities/sexology">
            <div class="boxes">
                <div class="card-box box-8">
                    <img class="specialities-images" src="/img/specialities/8.png" alt="">
                    <a href="/specialities/sexology" class="btn btn-info consult">Sexology</a>
                </div>
            </div>
        </a>

    </div>
    <footer>
        <!-- this is footer -->
        <div class="footer-content">
            <div class="footer-col">
                <div class="footer-title">
                    <span>TeleMedico</span>
                </div>
                <div>
                    <a href="#" class="footer-item">Doctors</a>
                    <a href="#" class="footer-item">Sign-Up</a>
                    <a href="#" class="footer-item">About Us</a>
                </div>
            </div>

            <div class="footer-col">
                <div class="footer-title">
                    <span>Recommended Hospitals</span>
                </div>
                <div>
                    <a href="#" class="footer-item">Apollo</a>
                    <a href="#" class="footer-item">Hayat</a>
                    <a href="#" class="footer-item">Woodlands</a>
                </div>
            </div>

            <div class="footer-col">
                <div class="footer-title">
                    <span>For Patients</span>
                </div>
                <div class="item">
                    <a href="#" class="footer-item">Appointments</a>
                    <a href="#" class="footer-item">Availability</a>
                    <a href="#" class="footer-item">Chat with us</a>
                </div>
            </div>

            <div class="footer-col">
                <div class="footer-title">
                    <span>Ratings</span>
                </div>
                <div class="item">
                    <a href="#" class="footer-item">Stars</a>
                    <a href="#" class="footer-item">Feedback</a>
                    <a href="#" class="footer-item">24 x 7 Helpline</a>
                </div>
            </div>


            <div class="footer-col">
                <div class="footer-title">
                    <span>Socials</span>
                </div>
                <div>
                    <a href="#" class="footer-item">Facebook</a>
                    <a href="#" class="footer-item">Twitter</a>
                    <a href="#" class="footer-item">Github</a>
                </div>
            </div>

        </div>


    </footer>
    </div>
    </div>