PPC template 7 – Embed – Landing Pages

Step 1: Go to WordPress back-end.
Step 2: Go to page.
Step 3: Add new page.
Step 4: Add title and URL/slug.
Step 5: Click on Backend Editor and then Click on add element, search Raw HTML and add it.
Step 6: Copy below text-area content and paste it into your Raw HTML.
Step 7: Once you have pasted your content then save and update page.
			<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tempalte 7</title>
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
    <style>
        /* html {
            scroll-behavior: smooth;
        } */
        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            margin: 0px;
            font-family: 'Roboto', sans-serif;
            font-size: 1.1rem;
            line-height: 1.3;
        }
        
        h1{ font-size: 3.75rem; }
        h2{ font-size: 2.75rem; }
        h3{ font-size: 1.625rem; }
        :root {
            --primary-color: #3d4a5a;
            --white: #ffffff;
        }
        a{
            text-decoration: none;
            color: var(--primary-color);
        }
        .btn {
            padding: 20px 30px;
            font-size: 20px;
            line-height: 20px;
            border: 0px;
            border-radius: 35px;
            color: var(--white);
            background-color: var(--primary-color);
            text-transform: uppercase;
            text-decoration: none;
            min-width: 200px;
            transition: all 0.5s;

        }
        .btn-rv{
            color: #3d4a5a;
            background-color: #e6dfd8;
        }
        .btn:hover {
            color: #3d4a5a;
            background-color: #e6dfd8;
        }
        .btn-rv:hover{
            color: var(--white);
            background-color: var(--primary-color);
        }
        .header-container{
            max-width: 1500px;
            width: 100%;
            margin: 0 auto;
            padding: 0px 15px;
            box-sizing:border-box ;
        }
        .container {
            max-width: 1260px;
            width: 100%;
            margin: 0 auto;
            padding: 0px 15px;
        }
        .sub-heading{
            font-size: 20px;
            font-weight: 500;
        }
        .fit-img{
            width: 100%;
        }
        img{
            max-width: 100%;
        }
        /* flex start */
        .d-flex { display: flex; }
        .d-iflex { display: inline-flex; }
        .d-row { flex-wrap: row; }
        .d-wrap { flex-wrap: wrap; }
        .d-column{ flex-direction: column; }
        

        .pr-1{ padding-right: 10px; }
        .pb-5{ padding-bottom: 50px; }
        .pb-6{ padding-bottom: 60px; }
        .pt-6{ padding-top: 60px; }
        

        .mr-1{ margin-right: 10px; }
        .mt-1{ margin-top: 10px;}
        .mt-2{ margin-top: 20px;}
        .mt-3{ margin-top: 30px; }
        .mb-2{ margin-bottom: 20px; }
        .mb-3{ margin-bottom: 30px; }

        .gap5 { gap: 5px; }
        .gap10 { gap: 10px; }
        .gap15 { gap: 15px; }
        .gap20 { gap: 20px; }
        .gap25 { gap: 25px; }
        .gap30 { gap: 30px; }

        .row-gap-20{ row-gap: 20px; }
        .row-gap-30{ row-gap: 20px; }
        .text-center { text-align: center; }
        .center { justify-content: center; }
        .align-center{ align-items: center}
        .end {align-items: flex-end;}
        /* flex end */

        /*  Row and col start*/
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-left: -15px;
            margin-right: -15px ;
        }
        .row div[class*="col-"]{
            box-sizing: border-box;
            padding-left: 15px;
            padding-right: 15px;
        }

        .row.no-gap { margin: 0px; }
        .row.no-gap .col-6 { padding: 0px; }

        .col-12 { width : 100%; }
        .col-11 { width : 91.66666667%; }
        .col-10 { width : 83.33333333%; }
        .col-9 { width : 75%; }
        .col-8 { width : 66.66666667%; }
        .col-7 { width : 58.33333333%; }
        .col-6 { width : 50%; }
        .col-5 { width : 41.66666667%; }
        .col-4 { width : 33.33333333%; }
        .col-3 { width : 25%; }
        .col-2 { width : 16.66666667%; }
        .col-1 { width : 8.33333333%; }
        
        /*  Row and col end*/

        /* Header start */
        header {
            background-color: var(--primary-color);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            padding: 10px 0px;
            z-index: 1;
        }
        header>div {
            padding: 20px 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo img {
            width: 100%;
            height: auto;
        }
        header .info a {
            display: flex;
            align-items: center;
            color: var(--white);
            font-size: 20px;
            text-decoration: none;
        }
        header address {
            font-style: normal;
        }
        .info svg {
            height: 30px;
            margin-right: 10px;
            fill: var(--white);
        }
        .request-appt-btn {
            color: var(--primary-color);
            background-color: var(--white);
        }
        /* Header end */

        /* banner section */
        .banner-sect-wrapper {
            position: relative;
            background-color: #f5f0eb;
            min-height: 90vh;
        }
        .banner-image {
            width: 100%; 
        }
        .banner-image img {
            width: 100%;
            -webkit-mask-image: linear-gradient(180deg, #fff 0% 50%, #ffffff80 80%, transparent 100%);
            mask-image: linear-gradient(180deg, #fff 0% 55%, #ffffff60 65%, transparent 85%);
        }
        .banner-content {
            position: absolute;
            /* top: 58%; */
            right: 0;
            bottom: 15%;
            left: 0;
        }
        .banner-content .entry-title {
            max-width: 700px;
            text-transform: uppercase;
            text-align: center;
        }
        .banner-content p{
            width: 95%;
            text-align: center;
        }

        /* Form section */

        .form-wrapper {
            width: 100%;
            height: 100%;
            border: 1px solid #3d4a5a;
            border-radius: 15px;
            overflow: hidden;
        }
        /* .form-sect-wrapper .col-6:last-child{ max-width:50%;} */
        .form-block {
            border-radius: 20px;
            filter: drop-shadow(0px 10px 25px rgba(158, 158, 158, 0.28));
            background: #fff;
            padding: 50px 35px;
            margin-top: -50px;
            margin-right: 50px;
        }
        .form-block .from-title{
            font-size: 2.5rem;
            text-align: center;
            padding: 0px 60px;
        }
        .form-block form input:not([type=submit]),
        .form-block form select,
        .form-block form textarea{
            width: 100%;
            border:none;
            border-bottom: 1px solid #000;
            font-size: 16px;
            line-height: 50px;
            font-family: 'Roboto', sans-serif;
        }
        input[type=submit]{
            cursor: pointer;
        }
        .form-block form *::placeholder{
            color: #000;
        }
        
        /* Googler review  */
        .google-review-title {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
        }
        .google-logo img {
            max-width: 115px;
            width: 100%;
        }
        span.rating-stars svg{
            width: 20px;
            fill:#f5a623;
        }
        .g-review-rating svg{
            width: 20px;
            fill:#f6b92b;
        }
        .rating-points {
            font-size: 26px;
            font-weight: 500;
        }
        .google-reviews-slider{
            color: #606060;
        }
        .g-review-persion{
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .google-reviews .google-reviews-info {
            padding: 10px 10px 10px 25px;
            border-left: 5px solid #dad3c7;
        }
        .g-review-commet {
            font-size: 15px;
            line-height: 24px;
        }
        .google-reviews {
            position: relative;
            padding-bottom: 10px;
        }
        .slider-arrow {
            width: 45px;
            height: 45px;
            fill: #606060;
            position: absolute;
            bottom: 0px;
            z-index: 999;
            background: #fff;
        }
        .slider-arrow:hover{
            cursor: pointer;
        }
        .slider-prew{ right: 55px; }
        .slider-next{  right: 10px; }
        
        /* Offer slider */
        
        .offer-sect-wrapper{
            background: #f5f0eb;
        }
       
        .offer-head {
            padding: 25px 40px;
            background: #3d4a5a;
        }
        .symbol {
            font-size: 30px;
            line-height: 50px;
        }
        .offer-price {
            font-size: 40px;
            display: flex;
            color: #fff;
            font-weight: 600;
        }

        .offer-head-tags {
            font-size: 30px;
            line-height: 30px;
            margin-top: 13px;
        }
        .offer-body {
            padding: 25px 40px;
            align-items: flex-start;
            text-transform: uppercase;
        }
        .offer-title {
            font-size: 1.75rem;
            line-height: 1.3;
            color: #3d4a5a;
            font-weight: 400;
            padding-right: 15px;
        }
        .offer-body-tags {
            font-size: 16px;
            padding: 7px 10px;
            background: #3d4a5a;
            color: #fff;
        }

        /* services tabs section */
        .tab-nav {
            width: 100%;
            list-style-type: none;
            border: 1px solid #3d4a5a;
            border-radius: 10px;
            background-color: #f5f0eb;
            overflow: hidden;
        }
        .tab-nav li {
            width: inherit;
            text-align: center;
            text-transform: uppercase;
            font-size: 16px;
            padding: 20px;
        }
        .tab-nav li:hover{
            cursor: pointer;
        }

        .tab-nav .active {
            
            background: #3d4a5a;
            color: #fff;
            border-radius: 10px;
        }
        .tab-body{
            display:none;
        }
        .tab-body.active{
            display:block;
        }
        .service-title{
            font-size: 40px;
            text-transform: uppercase;
        }
        .service-image img{
            width: 100%;
            min-height: 400px;
            object-fit: cover;
            border-radius: 10px;
        }
        .service-content{
            font-size: 16px;
            line-height: 26px;
            height: 100%;
            align-content: center;
        }
        
        /* Benifits section */
        .benifit-sect-wrapper{
            background: radial-gradient(circle at 20% 45%, #e2bc6a94 0%, #eae4de 18%, #f5efeb 100%);
        }

        .accordion-item{
            padding: 30px ;
            border: 1px solid #000;
            border-radius: 10px;

        }
        .benifit-image.d-flex {
            height: 100%;
        }
        .accordion-header {
            display: flex;
            justify-content: space-between;
        }
        .accordion-header *:hover{
            cursor: pointer;
        }
        .accordion-header span.arrow-right svg {
            width: 30px;
        }
        .accordion-content {
            display: none;
            padding-top: 20px;
        }
            
        .accordion-item.active .accordion-content {
            display: block; /* Show content for active items */
        }
        /* Doctor section  */
        .center-img{
            margin: 0 auto;
            max-width: 100%;
        }
        .quote{
            border-left: 3px solid #054f7d;
            padding-left: 20px; 
            font-size:1.875rem
            line-height: 44px;
        }
        .video-btn svg {
            width: 13px;
            fill: #fff;
            margin-left: 3px;
        }
        .video-btn .video-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-color);
            border-radius: 50%;
        }
        .fit-btn{
            width: fit-content;
            max-width: 80%;
        }
        /* footer css */
        footer ul {list-style-type: none;}
        .social-media ul{
            display:flex
        }
        .social-media svg {
            width: 18px;
            height: 18px;
            object-fit: contain;
            fill: #fff;
        }
        footer .logo{
            max-width: 250px;
            width: 100%;
            margin: auto;
        }
        footer h2{ font-size: 1.625rem; }
        .social-media li a {
            height: 20px;
            width: 20px;
            text-align: center;
            background: var(--primary-color);
            padding: 6px;
            border-radius: 35px;
            display: block;
            transition: 0.3s;
        }
        .contact-info {
            max-width: 230px;
        }
        .copyright-text{
            padding: 30px 0px;
            border-top: 2px solid #000;
        }

        .google-review-container{
            max-width: 610px;
        }
        .form-sect-wrapper .col-6{
            padding: 0px;
        }

        .social-media li a:hover{
            background: #e6dfd8;
        }
        .social-media li a:hover svg{
            fill:var(--primary-color)
        }

        @media(max-width:1260px){
            .container{
                max-width: calc(100% - 30px);
            } 
            .google-review-container{
                max-width: 498px;
            }
            header .info a{
                font-size:16px ;
            }
            .btn{
                font-size: 16px;
                padding: 10px 20px;
            }
            .logo {
                max-width: 180px;
            }
        }
        @media(max-width:1024px){
            h1 { font-size: 3rem; }
            .form-block{ margin-right: 0px;}
            .form-block .from-title{ font-size: 2rem; padding: 0px 30px }
            .banner-sect-wrapper {
                position: relative;
                background-color: #f5f0eb;
                min-height: 100vh;
            }
            .info svg{
                height: 20px;
                margin-right: 3px;
            }           
            .google-review-container{
                max-width: 100vw;
                padding: 20px;
            }
            .offer-title { font-size: 1.5rem; li}
        }
        @media(max-width:910px){
            
            .logo img{
                max-width: 200px;
                margin: 0 auto;
            }
            .info address, .info span:not(.icon) {
                display: none;
            }
            .info .icon{
                width: 40px;
                height: 40px;
                background: #fff;
                border-radius: 5px;
                padding: 5px;
                box-sizing: border-box;
            }
            .info .icon svg{
                height: 30px;
                fill: var(--primary-color);
            }
        }
        @media(max-width:767px){
            h1 { font-size: 2.2rem; }
            h2 { font-size: 2rem; }
            body { font-size: 1rem; }
            
            header>div{ flex-wrap: wrap; justify-content: space-around; }
            header, .banner-content{ position: relative; }
            .logo { max-width: 100%; width: 100%; text-align: center; }
            .row{ gap: 20px; }
            .logo{ margin-bottom: 10px; }
            .banner-content .d-flex { flex-direction: column; align-items: center; }
            .banner-content{ padding-bottom: 50px ; }
            .banner-sect-wrapper { min-height: 0px; }
            .form-block .from-title{ padding: 0;}
            .quote{font-size:1.5rem}
            .service-title{ font-size: 1.6rem; line-height:1.3}
            .tab-nav { flex-direction: column; align-items: center; }
            .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1{ width: 100%; }
            .form-block{ margin-top: 0px; margin-right: 0px;}
        }
        @media(min-width:1921px){
            .container{
                max-width: 70%;
                /* padding: 0px 300px; */
            }
            .header-container{
                max-width: 80%;
            }
        }

    </style>
</head>

<body>
    <header>
        <div class="header-container">
            <div class="logo">
                <a href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/logo.svg" alt="Logo"></a>
            </div>
            <div class="info address">
                <a href="#">
                    <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
                            <path d="m32 55.7-.9-1.1c-.6-.8-15.9-18.7-15.9-29.4 0-9.3 7.6-16.8 16.8-16.8S48.8 16 48.8 25.2c0 10.7-15.3 28.7-15.9 29.4l-.9 1.1zm0-45c-8 0-14.4 6.5-14.4 14.4 0 8.4 11.1 22.7 14.4 26.8 3.3-4.1 14.4-18.3 14.4-26.8 0-7.9-6.4-14.4-14.4-14.4z" />
                            <path d="M32 31.6c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.9 6.4-6.4 6.4zm0-10.4c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4z" />
                        </svg>
                    </span>
                    <address>Lorem Ipsum is simply dummy text of the</address>
                </a>
            </div>
            <div class="info phone">
                <a href="#">
                    <span class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 128 128" viewBox="0 0 128 128">
                            <path d="M50.7,47.5l5.4-5.4c3.1-3.1,3.1-8,0-11.1L40.8,15.6c-3.1-3.1-8-3.1-11.1,0L21.2,24c-2.9,2.9-4.7,6.6-5.3,10.6  c-0.6,4.4,0.3,8.8,2.7,12.6c7,11.3,15.3,21.8,24.5,31.3c10.6,10.9,22.5,20.5,35.4,28.5c2.9,1.8,6.3,2.8,9.8,2.8  c0.9,0,1.8-0.1,2.7-0.2c4-0.6,7.7-2.5,10.6-5.3l8.5-8.5c1.5-1.5,2.3-3.5,2.3-5.6c0-2.1-0.8-4.1-2.3-5.5L94.6,69.4  c-3.1-3.1-8-3.1-11.1,0l-5.4,5.4c-1.1,1.1-3,1.2-4.2,0.1c-4.6-4.1-9.3-8.6-13.9-13.2c-3.2-3.3-6.4-6.7-9.4-10.1  C49.5,50.4,49.6,48.6,50.7,47.5C50.7,47.5,50.7,47.5,50.7,47.5z M47,54.9c3.1,3.5,6.3,6.9,9.6,10.3c4.6,4.7,9.4,9.3,14.1,13.4  c3.1,2.8,7.9,2.6,10.8-0.3l5.4-5.4c1.2-1.2,3.1-1.2,4.3,0l15.4,15.4c0.6,0.6,0.9,1.3,0.9,2.1c0,0.8-0.3,1.6-0.9,2.1l-8.5,8.5  c-2.1,2.1-4.9,3.5-7.8,4c-3.3,0.5-6.5-0.2-9.2-1.9c-12.5-7.8-24.1-17.1-34.5-27.8c-9-9.3-17-19.5-23.9-30.5c-1.7-2.8-2.4-6.1-2-9.4  c0.4-3,1.8-5.7,3.9-7.9l8.5-8.5c0.6-0.6,1.4-0.9,2.1-0.9c0.8,0,1.5,0.3,2.1,0.9l15.4,15.4c1.2,1.2,1.2,3.1,0,4.3l-5.4,5.4  C44.4,47,44.2,51.7,47,54.9z" />
                        </svg>
                    </span>
                    <span>+X (xxx) xxx-xxxx</span>
                </a>
            </div>
            <div class="request-appt">
                <a href="#form-sect" class="btn request-appt-btn">Request Appointment</a>
            </div>
        </div>
    </header>

    <div id="main" class="primry">

        <!-- Banner Section  -->
        <section id="banner-sect">
            <div class="banner-sect-wrapper">
                <div class="banner-image">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/banner.png" alt="banner" />
                </div>
                <div class="banner-content">
                    <div class="container">
                        <div class="d-flex d-wrap center gap20">
                            <h1 class="entry-title">Where Comfort Meets Care For Every Smile.</h1>
                            <p>Elevate your smile with Miami's top professionals at The Dental Boutique, where
                                personalized care meets exceptional care.</p>
                            <div class="d-flex center gap20">
                                <a href="#form-sect" class="btn">Request Appointment</a>
                                <a href="tel:xxxxxxxxxx" class="btn btn-rv call-btn">Call (xxx) xxx-xxxx</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Form section -->
        <section id="form-sect">
            <div class="form-sect-wrapper pb-6">
                <div class="container">
                    <div class="row">
                        <div class="col-6 col-md-12">
                                <!-- form -->
                            
                        </div>
                        <div class="col-6 col-md-12 mt-3" >
                            
                            <div class=" mt-2">
                                <h2>Patient Stories</h2>
                                <div class="google-review-title mt-2">
                                    <span class="google-logo"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/Google-Logo.svg" alt="Google reviews"/></span>
                                    <span class="rating-points">Rating 4.9</span>
                                    <span class="rating-stars">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                    </span>
                                    <span class="rating-cout">1,087 reviews</span>
                                </div>

                                <div class="swiper google-reviews mt-2 mb-2">
                                    <div class="swiper-wrapper">

                                        <div class="swiper-slide google-reviews-slider">
                                            <div class="google-reviews-info">
                                                <div class="g-review-commet mb-2">
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                                                </div>
                                                <div class="g-review-rating">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                </div>
                                            </div>
                                            <div class="g-review-persion mt-2">- Breanne Sytnyk</div>
                                        </div>

                                        <div class="swiper-slide google-reviews-slider">
                                            <div class="google-reviews-info">
                                                <div class="g-review-commet mb-2">
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                                                </div>
                                                <div class="g-review-rating">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                </div>
                                            </div>
                                            <div class="g-review-persion mt-2">- Breanne Sytnyk</div>
                                        </div>

                                        <div class="swiper-slide google-reviews-slider">
                                            <div class="google-reviews-info">
                                                <div class="g-review-commet mb-2">
                                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
                                                </div>
                                                <div class="g-review-rating">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"/></svg>
                                                </div>
                                            </div>
                                            <div class="g-review-persion mt-2">- Breanne Sytnyk</div>
                                        </div>

                                    </div>
                                    
                                    <div class="slider-arrow slider-prew">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g data-name="Left"><path d="M42 34H22a2 2 0 0 1 0-4h20a2 2 0 0 1 0 4Z"/><path d="M22 34a2 2 0 0 1-1.414-3.414l9-9a2 2 0 1 1 2.828 2.828l-9 9A1.993 1.993 0 0 1 22 34Z"/><path d="M31 43a1.993 1.993 0 0 1-1.414-.586l-9-9a2 2 0 0 1 2.828-2.828l9 9A2 2 0 0 1 31 43Z"/><path d="M32 58a26 26 0 1 1 26-26 26.03 26.03 0 0 1-26 26Zm0-48a22 22 0 1 0 22 22 22.025 22.025 0 0 0-22-22Z"/></g></svg>
                                    </div>
                                    <div class="slider-arrow slider-next">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g data-name="Right"><path d="M42 34H22a2 2 0 0 1 0-4h20a2 2 0 0 1 0 4Z"/><path d="M42 34a1.993 1.993 0 0 1-1.414-.586l-9-9a2 2 0 0 1 2.828-2.828l9 9A2 2 0 0 1 42 34Z"/><path d="M33 43a2 2 0 0 1-1.414-3.414l9-9a2 2 0 0 1 2.828 2.828l-9 9A1.993 1.993 0 0 1 33 43Z"/><path d="M32 58a26 26 0 1 1 26-26 26.03 26.03 0 0 1-26 26Zm0-48a22 22 0 1 0 22 22 22.025 22.025 0 0 0-22-22Z"/></g></svg>
                                    </div>
                               
                                </div>

                                <div><a href="#form-sect" class="btn d-iflex">Request Appointment</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Offer Section -->
        <section id="offer-sect">
            <div class="offer-sect-wrapper pt-6 pb-6">
                <div class="container">

                    <h2 class="text-center">Special Offers for Our Patients</h2>
                    <h3 class="sub-heading text-center mt-1">We’re locally owned and love supporting our community.</h3>

                    <div class="row mt-3">
                        
                        <div class="col-4">
                            <div class="form-wrapper">
                                <div class="offer-head">
                                    <div class="offer-price">
                                        <span class="symbol">$</span>
                                        <span class="cost">XXX</span>
                                        <span class="offer-head-tags">off</span>
                                    </div>
                                </div>
                                <div class="offer-body d-flex d-column row-gap-20">
                                    <div class="offer-title">Traditional or Clear Braces</div>
                                    <div class="offer-body-tags">For New Patient Only</div>
                                    <div class="offer-learn-more"><a href="#" class="learn-more-btn">Learn More</a></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-4">
                            <div class="form-wrapper">
                                <div class="offer-head">
                                    <div class="offer-price">
                                        <span class="symbol">$</span>
                                        <span class="cost">XX</span>
                                        <span class="offer-head-tags"> month</span>
                                    </div>
                                </div>
                                <div class="offer-body d-flex d-column row-gap-20">
                                    <div class="offer-title">Same-Day Emergency Exam</div>
                                    <div class="offer-body-tags">For New Patient Only</div>
                                    <div class="offer-learn-more"><a href="#" class="learn-more-btn">Learn More</a></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-4">
                            <div class="form-wrapper">
                                <div class="offer-head">
                                    <div class="offer-price">
                                        <span class="symbol">$</span>
                                        <span class="cost">XX/</span>
                                        <span class="offer-head-tags">only</span>
                                    </div>
                                </div>
                                <div class="offer-body d-flex d-column row-gap-20">
                                    <div class="offer-title">Traditional or Clear Braces</div>
                                    <div class="offer-body-tags">For New Patient Only</div>
                                    <div class="offer-learn-more"><a href="#" class="learn-more-btn">Learn More</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Service Section -->
        <section id="sevice-sect">
            <div class="sevice-sect-wrapper pt-6 pb-6">
                <div class="container">
                    <h2 class="text-center">Dental Services</h2>
                    <h3 class="sub-heading text-center mt-1 ">We’re locally owned and love supporting our community.</h3>

                    <div class="tab-head mt-2 mb-3">
                        <ul class="tab-nav d-flex">
                            <li class="tablinks active" onclick="openTabs(event, 'tab-1')">Cosmetic Dentistry</li>
                            <li class="tablinks" onclick="openTabs(event, 'tab-2')">General Dentistry</li>
                            <li class="tablinks" onclick="openTabs(event, 'tab-3')">Dental Implants</li>
                            <li class="tablinks" onclick="openTabs(event, 'tab-4')">Emergency Dentistry</li>
                            <li class="tablinks" onclick="openTabs(event, 'tab-5')" >Oral Surgery</li>
                        </ul>
                    </div>
                    
                    <div id="tab-1" class="tab-body active">
                        <div class="row">
                            <div class="col-5">
                                <div class="service-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/service.png" alt="services"></div>
                            </div>
                            <div class="col-7">
                                <div class="service-content d-flex d-wrap row-gap-20">
                                    <h3 class="service-title">Cosmetic Dentistry</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
                                    <a class="btn d-iflex center" href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div id="tab-2" class="tab-body">
                        <div class="row">
                            <div class="col-5">
                                <div class="service-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/service-2.png" alt="services"></div>
                            </div>
                            <div class="col-7">
                                <div class="service-content d-flex d-wrap row-gap-20">
                                    <h3 class="service-title">General Dentistry</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
                                    <a class="btn d-iflex center" href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-3" class="tab-body">
                        <div class="row">
                            <div class="col-5">
                                <div class="service-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/service.png" alt="services"></div>
                            </div>
                            <div class="col-7">
                                <div class="service-content d-flex d-wrap row-gap-20">
                                    <h3 class="service-title">Dental Implants</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
                                    <a class="btn d-iflex center" href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-4" class="tab-body">
                        <div class="row">
                            <div class="col-5">
                                <div class="service-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/service-2.png" alt="services"></div>
                            </div>
                            <div class="col-7">
                                <div class="service-content d-flex d-wrap row-gap-20">
                                    <h3 class="service-title">Emergency Dentistry</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
                                    <a class="btn d-iflex center" href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="tab-5" class="tab-body">
                        <div class="row">
                            <div class="col-5">
                                <div class="service-image"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/service.png" alt="services"></div>
                            </div>
                            <div class="col-7">
                                <div class="service-content d-flex d-wrap row-gap-20">
                                    <h3 class="service-title">Oral Surgery</h3>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p>
                                    <a class="btn d-iflex center" href="#">Read More</a>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </section>
        
        <!-- Benifit Section -->
        <section id="benifit-sect">
            <div class="benifit-sect-wrapper pt-6">
                <div class="container">
                    <div class="row no-gap">
                        <div class="col-6">
                            <h2>The Benifits of Dental Implants</h2>
                            <h3 class="sub-heading mt-1 mb-2">We’re locally owned and love supporting our community.</h3>

                            <div class="accordion-container d-flex d-column row-gap-20 pb-6"> 
                                <div class="accordion-item active">
                                    <div class="accordion-header">
                                        <h3>Years of Experience in Dentistry<h3>
                                         <span class="arrow-right">
                                            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M15.6034546,11.6465454l-6-6c-0.1937256-0.1871948-0.5009155-0.1871948-0.6947021,0C8.710144,5.8383789,8.7046509,6.1549072,8.8964844,6.3535156L14.5430298,12l-5.6465454,5.6464844c-0.09375,0.09375-0.1464233,0.2208862-0.1464233,0.3534546C8.75,18.276062,8.973877,18.499939,9.25,18.5c0.1326294,0.0001221,0.2598267-0.0525513,0.3534546-0.1464844l6-6c0.000061-0.000061,0.0001221-0.000061,0.0001831-0.0001221C15.7987671,12.1581421,15.7987061,11.8416748,15.6034546,11.6465454z"/></svg>
                                         </span>   
                                        </div> 
                                    <div class="accordion-content"> 
                                        <p>With years of experience, we at Inglewood Family Dental are delivering quality dental care to the overall Calgary community.</p> 
                                    </div>
                                </div> 
                                <div class="accordion-item">
                                    <div class="accordion-header">
                                        <h3>Get Reliable Dental Care<h3>
                                        <span class="arrow-right">
                                            <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M15.6034546,11.6465454l-6-6c-0.1937256-0.1871948-0.5009155-0.1871948-0.6947021,0C8.710144,5.8383789,8.7046509,6.1549072,8.8964844,6.3535156L14.5430298,12l-5.6465454,5.6464844c-0.09375,0.09375-0.1464233,0.2208862-0.1464233,0.3534546C8.75,18.276062,8.973877,18.499939,9.25,18.5c0.1326294,0.0001221,0.2598267-0.0525513,0.3534546-0.1464844l6-6c0.000061-0.000061,0.0001221-0.000061,0.0001831-0.0001221C15.7987671,12.1581421,15.7987061,11.8416748,15.6034546,11.6465454z"/></svg>
                                        </span> 
                                    </div> 
                                    <div class="accordion-content"> 
                                        <p>With years of experience, we at Inglewood Family Dental are delivering quality dental care to the overall Calgary community.</p> 
                                    </div> 
                                </div>
                                <div class="accordion-item">
                                    <div class="accordion-header">
                                        <h3>Serving Neighborhood<h3>
                                            <span class="arrow-right">
                                                <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24"><path d="M15.6034546,11.6465454l-6-6c-0.1937256-0.1871948-0.5009155-0.1871948-0.6947021,0C8.710144,5.8383789,8.7046509,6.1549072,8.8964844,6.3535156L14.5430298,12l-5.6465454,5.6464844c-0.09375,0.09375-0.1464233,0.2208862-0.1464233,0.3534546C8.75,18.276062,8.973877,18.499939,9.25,18.5c0.1326294,0.0001221,0.2598267-0.0525513,0.3534546-0.1464844l6-6c0.000061-0.000061,0.0001221-0.000061,0.0001831-0.0001221C15.7987671,12.1581421,15.7987061,11.8416748,15.6034546,11.6465454z"/></svg>
                                            </span> 
                                    </div> 
                                    <div class="accordion-content"> 
                                        <p>With years of experience, we at Inglewood Family Dental are delivering quality dental care to the overall Calgary community.</p> 
                                    </div> 
                                </div>
                           </div>
                        </div>

                        <div class="col-6">
                            <div class="benifit-image d-flex end">
                                <img class="fit-img" src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/benifits.png" alt="Benifit">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <section id="doctor-sect">
            <div class="doctor-sect-wrapper">
                <div class="container">
                    <div class="row">
                        <div class="col-6 pt-6 pb-6 ">
                            <div class="d-flex d-column row-gap-20">
                                <h2 class="sub-heading">Meet the Family Dental Clinic Near You</h2>
                                <h2>Dr. Name Here</h2>
                                <div class="quote">Lorem Ipsum is simply dummy text of the printing and typesetting <strong>industry. Lorem Ipsum is simply dummy text of</strong></div>
                                <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled.</p>
                                <a id="wel-come"class="video-btn d-iflex align-center gap15" href="/wp-content/themes/hello-elementor-child/video/implant.mp4" data-fancybox="video-slide">
                                        <span class="video-icon d-iflex center">
                                            <svg aria-hidden="true" class="e-font-icon-svg e-fas-play" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>
                                        </span>
                                        <span>A welcome message from Dr. Name Here</span>
                                </a>
                                <a class="btn fit-btn" href="#">Schedule a Consultation</a>
                                <div class="partners"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/promo.png" alt="partners"></div>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="benifit-image d-flex end ">
                                <img class="center-img" src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/doctor.png" alt="doctor">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <footer>
        <div class="footer-wrapper ">
            <div class="footer-top pt-6 pb-6">
                <div class="container">
                    <div class="row">
                        <div class="col-4 d-flex d-column row-gap-20">
                            <h2>Family Dental</h2>
                            <ul class="contact-info d-flex d-column gap10">
                                <li><a href="tel:xxxxxxxxxx">(XXX) XXX-XXXX</a></li>
                                <li><a href="mailto:info@familydental.ca">info@familydental.ca</a></li>
                                <li><a href="#">1420 9 Ave SE #24, Calgary, AB T2G 0T5, Canada</a></li>
                            </ul>
                        </div>
                        <div class="col-4 d-flex align-center">
                                <div class="logo ">
                                    <a href="#"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp7-images/logo-b.svg" alt="Logo"></a>
                                </div>
                        </div>
                        <div class="col-4 col-4 d-flex d-column end row-gap-20">
                            <div class="social-media">
                                <ul class="d-flex gap5">
                                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg></a></li>
                                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg></a></li>
                                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg></a></li>
                                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"/></svg></a></li>
                                    <li><a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg></a></li>
                                </ul>
                            </div>
                            <div class="google-reviews-info">
                                <span><span>
                                <span class="rating-stars">Over 1000+
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"></path></svg>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="m10 16.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 7 1-5 4.9 1.1 6.9z"></path></svg>
                                    Star
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 0 262 262"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
                                    Reviews
                                </span>
                            </div>
                            <a class="btn fit-btn" href="#form-sect">Request an Appointment</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright-wrapper">
                <div class="container">
                    <div class="copyright-text text-center">
                        <p>Copyright © 2025 - Family Dental | All Right Reserved.<p>
                    </div>
                </div>
            </div>
        </div>
    </footer>


    <script src="https://code.jquery.com/jquery-3.7.1.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>
        $(function() {
            /* Accordion*/
            $('.accordion-header').click(function(j) {
                var dropDown = $(this).closest('.accordion-item').find('.accordion-content');
                $(this).closest('.accordion-container').find('.accordion-content').not(dropDown).slideUp();
                if ($(this).hasClass('active')) {
                    $(this).removeClass('active');
                } else {
                    $(this).closest('.accordion-container').find('.acc__title.active').removeClass('active');
                    $(this).addClass('active');
                }
                dropDown.stop(false, true).slideToggle();
                j.preventDefault();
            });
            new Swiper('.swiper', {
                loop: true,
                slidesPerView: 1,
                paginationClickable: true,
                spaceBetween: 0,
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false,
                },
                navigation: {
                    nextEl: ".slider-prew",
                    prevEl: ".slider-next",
                }
            });

        });
        function openTabs(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tab-body");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
        }
</script>
</body>
</html>
Copy Code
