PPC template 2 – 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.
			<?php 
/***
 * *  Template name:  temp2
 * *
 * *****/
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tamplate 2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <style>
    /* new */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: Roboto, sans-serif;G
    }

    body {
        background-color: #f9f9f9;
        color: #000;
        line-height: 1.6;
    }

    .header {DFDFFHHHYTJ
        background-color: #2d2525;
        color: white;
        margin: 20px 20px 20px 20px;
        padding: 10px 20px;
        border-radius: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header .logo {
        display: flex;
        align-items: center;
    }

    .header .logo img {
        height: 40px;
        margin-right: 10px;
    }

    .header a {
        color: white;
        text-decoration: none;
        margin-left: 20px;
        font-size: 16px;
    }
    .header a:hover {
    color: #b7a67e;
    }

    /* banner section */
    .container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 15px;
    box-sizing: border-box;
}
.banner .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.banner .grid > div {
    width: 50%;
}

.banner .grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .banner .grid > div {
        width: 100%;
    }
}


/* Adjust container width for larger screens */
@media screen and (min-width: 1920px) {
    .container,
    .container-fluid {
        max-width: 1920px !important;
        padding: 0 30px !important;
        width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 2600px) {
    .container,
    .container-fluid {
        max-width: 1920px !important; /* Ensuring it doesn’t expand beyond this */
        padding: 30px !important;
        width: 100%;
        box-sizing: border-box;
    }
}

    .banner {
        margin-bottom: 0px;
        background-image: linear-gradient(180deg, #fbf5f3 0%, #f7f1e3 100%);

    }

    .banner h1 {
        font-size: 40px;
        color: #2b2b2b;
        text-align: center;
        margin-bottom: 20px;

    }

    .banner .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        /* align-items: center; */
    }

    .banner .grid img {
        max-width: 100%;
        border-radius: 8px;
    }

    .form {
        padding: 0px;
        border-radius: 8px;
    }

    .form h2 {
        font-size: 32px;

    }


    .form label {
        font-weight: bold;
        margin-bottom: 5px;
        display: block;
    }

    .form input {
        border: none;
        border: 2px solid #ddd;
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        background: none;
    }

    .form textarea,
    .form select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: none;
    }

    .form button {
        padding: 10px 30px 10px 30px;
        background: #b04739;
        color: #fff;
        border: none;
        border-radius: 20px;
        cursor: pointer;
    }

    .form button:hover {
        background-color: #444;
    }

    /* Why Choose Section */

    .why-choose {
        background: #fff;
    }

    .why-choose h2 {
        text-align: center;
        font-size: 30px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .why-choose .h2h {
        font-size: 20px;
        text-transform: uppercase;
        color: #000000;
        font-weight: 400;
        text-align: center;
    }

    .why-choose .info {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .why-choose img {
        max-width: unset;
        border-radius: 10px;
    }

    .details p {
        text-transform: uppercase;
        font-weight: 700;
    }

    .details ul {
        list-style-type: none;
        margin-top: 15px;
        padding: 0;
    }
    .details strong{
        padding:10px;
    }

    .details li {
        line-height: 30px;
        color: #000000;
        display: flex;

    }

    .associations img {
        max-height: 50px;
        margin-right: 10px;
    }
    ul.li-space {
    margin-left: 50px;
    margin-top: 0;

    }
    /* Trust the Process Section */
    .trust-process {
        background-color: #f7eee8;
    }

    .trust-process h2 {
        font-size: 40px;
        margin-bottom: 10px;
        font-weight: 700;
        text-align: center;

    }

    .trust-process .h2h {
        font-size: 20px;
        text-transform: uppercase;
        color: #000000;
        font-weight: 400;
        text-align: center;
    }

    .trust-process .testimonial-grid {
        display: flex;
        margin-top: 20px;
    }

    .trust-process .testimonial-list {
        width: 35%;
    }

    .trust-process .testimonial-list ul {
        list-style-type: none;
        padding: 0;
    }

    .testimonial-list img {
        padding: 5px 10px 5px 5px;
    }


    .testimonial-list .li-h {
        font-size: 20px;
        line-height: 58px;
        color: #000000;
        font-weight: 700;
        background-color: #e8e8e8 !important;

    }

    .trust-process .testimonial-list li {
        padding: 10px;
        border-bottom: 1px solid #000000;
        display: flex;
        background-color: #fff;
    }

    .trust-process .testimonial-video img {
        max-width: 100%;
    }

    /* Testimonials Section */
    .testimonials {
        background: #fff;
        text-align: center;
    }

    .testimonials h2 {
        font-size: 30px;
        font-weight: 700;
        text-align: center;

    }

    .testimonials .h2h {
        font-size: 20px !important;
        text-transform: uppercase;
        color: #000000;
        font-weight: 400;
        text-align: center;
    }


    .testimonials .reviews {
        display: flex;
        gap: 20px;
        margin-top: 20px;
        justify-content: center;


    }

    .review-card {
        padding: 20px;
        border-radius: 20px;
        border: solid 3px #f7eee8;
        text-align: left;
        width: 400px;
    }

    .svg-s img {
        width: 5% !important;
        margin: 5px 5px 5px 5px;
    }

    .review-card img {
    width: 10%;
    height: 10%;
    margin-right: 10px;
    }
    .p-name {
    display: flex;
    }
    .review-card h4 {
        font-size: 16px;

    }

    /* Dental Implants Plans Section */
    .dental-plans {
        background-color: #f7eee8;
        text-align: center;
    }

    .dental-plans h2 {
        font-size: 30px;
    }

    .dental-plans .plans {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-top: 20px;
    }

    .plan-card {
        background-color: #f5f0eb;
        border-radius: 15px;
        border: solid 2px #3d4a5a;
        text-align: center;
        width: 409px;
        height: full;
    }

    .plan-card h3 {
        padding: 15px;
        font-size: 20px;
        line-height: 34px;
        text-transform: uppercase;
        color: #3d4a5a;
        font-weight: 400;
        font-family: "Roboto";
        text-align: center;
    }

    .plan-card h4 {
        font-size: 20px;
        padding: 10px;
        color: #000000;
        font-weight: 400;
        font-family: "Roboto";
        text-align: center;
    }

    .plan-card h5 {
        font-size: 15px;
        padding: 20px;
        color: #3d4a5a;
        font-weight: 400;
        font-family: "Poppins";
        text-align: center;
    }

    .plan-card .price {
        font-size: 48px;
        color: #ffffff;
        font-weight: 900;
        text-align: center;
        background-color: #3d4a5a;
        /* height: 96px; */
    }

    .plan-card ul {
        list-style-type: none;
        margin-bottom: 20px;
    }

    .plan-card ul li {
        margin-bottom: 5px;
    }

    .plan-card button {
        font-size: 20px;
        color: #fff;
        width: 164px;
        height: 50px;
        border-radius: 50px;
        border-color: #963f36;
        background-color: #963f36;
        padding: 10px 15px;
        cursor: pointer;
    }
    .plan-card button:hover {
        border-radius: 50px;
        color:#963f36;
        border-color:rgb(0, 0, 0);
        background-color:rgb(255, 255, 255);
        padding: 10px 15px;
        cursor: pointer;
    }
/* Smile Transformations Section */
.smile-transformations {
    background: #fcf8f3;
    padding: 40px 20px;
    text-align: center;
}

.smile-transformations h2 {
    font-size: 40px;
    color: #333;
}

.smile-transformations p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
}

.transformations-carousel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: hidden; Hide overflow */
    width: 100%; /* Ensure container is the full width */
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
    gap: 20px;
    width: calc(100% * 3); /* Display 3 images per scroll */
}

.image-wrapper {
    width: 33.33%; /* Each image takes up 33.33% of the carousel width */
    flex-shrink: 0; /* Prevent images from shrinking */
}

.image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.carousel-btn {
    background: #b04739;
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 10px 15px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 1000;
}

/* Position the previous button outside the slider */
.carousel-btn.prev {
    left: 0px; /* Move the previous button outside to the left */
}

/* Position the next button outside the slider */
.carousel-btn.next {
    right: 0px; /* Move the next button outside to the right */
}

.form button:hover {
    background: #2d2525 !important;}
/* Hover effect for arrows */
.carousel-btn:hover {
    background: #8e392f;
}

    /* Find Out If You're A Candidate Section */
    .find-out-candidate {
        background-color: #f7eee8;
        padding: 40px 0;
    }

    .find-out-candidate h2 {
        font-size: 40px;
        text-align: center;
        margin-bottom: 5px;
    }

    .find-out-candidate p {
        text-align: center;
        color: #000;
        margin-bottom: 20px;
    }

    .evaluation-section {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .evaluation-box {
        background-color: #2d2d2d;
        padding: 20px;
        width: 441px;
        height: 373px;
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .pricing-box {
        background: #fff;
        padding: 20px;
        width: 441px;
        height: 373px;
        border-radius: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .p-box {
        border: solid 3px #2d2d2d;
        margin-bottom: 30px;
        border-radius: 20px;
        padding: 20px;
    }

    .evaluation-box h3 {
        font-size: 25px;
        margin-bottom: 10px;
        color: #fff;

    }

    .pricing-box h3 {
        font-size: 25px;
        margin-bottom: 10px;
    }

    .evaluation-box ul {
        list-style-type: disc;
        padding-left: 20px;
        margin-bottom: 20px;
        color: #fff;
    }

    .evaluation-box h4 {
        font-size: 25px;
        margin-bottom: 10px;
        color: #fff;
    }


    .pricing-box ul {
        list-style-type: circle;
        padding-left: 20px;
        margin-bottom: 20px;
        color: #000;
    }

    .progress-bar {
        height: fit-content;
        background: #2d2d2d;
        border-radius: 20px;
        overflow: hidden;
        position: relative;
        display: flex;
    }

    .progress-bar img {
        padding: 10px 15px;
    }

    .submit-btn {
        background: #963f36;
        color: #fff;
        padding: 5px 10px;
        border: none;
        cursor: pointer;
        align-self: center;
        margin-left: 160px;
    }

    /* Footer Section */
    .footer {
        background: #fcf8f3;
        color: #333;
        font-family: Arial, sans-serif;
        padding: 20px 0;
    }

    .footer-top {
        display: flex;
        justify-content: space-around;
        text-align: center;
        padding: 20px 0;
        border-bottom: 1px solid #963f36;
    }

    .footer-appointments,
    .footer-contact {
        border-right: 2px solid #963f36;
        height: 90px;
    }

    .footer-top div {
        flex: 1;
    }

    .footer-top p {
        font-size: 16px;
        margin: 0;
        color: #535050;
        font-weight: 700;
    }

    .footer-top h3 {
        font-size: 18px;
        margin: 5px 0;
        color: #000;
    }

    .footer-main {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        padding: 20px 0;
        gap: 20px;
        border-bottom: 1px solid #963f36;

    }

    .footer-logo {
        text-align: center;
        width: 20%;
    }

    .footer-logo img {
        width: 80px;
        height: auto;
        margin-bottom: 10px;
    }

    .footer-logo h3 {
        font-size: 26px;
        margin: 10px 0;
        color: #000000;
    }

    .footer-address {
        width: 30%;
        text-align: left;

    }

    .footer-address h4 {
        font-size: 16px;
        margin-bottom: 0px;
    }

    .footer-address p {
        font-size: 14px;
        line-height: 1.5;
        margin: 10px 0;
    }

    .txt-f,
    .footer-address a {
        color: #b04739;
        text-decoration: none;
        font-weight: bold;
        font-weight: 400;
    }

    .footer-address a:hover {
        text-decoration: underline;
    }

    .book-now {
        background: #b04739;
        color: #fff;
        padding: 10px 20px;
        border: none;
        border-radius: 20px;
        cursor: pointer;
    }

    .book-now:hover {
        background: #8e392f;
    }

    .footer-map img {
        width: 500px;
    }

    .footer-bottom {
        text-align: center;
        font-size: 12px;
        color: #666;
        margin-top: 10px;
    }

    /* Style all font awesome icons */
    .fa {
        padding: 10px;
        font-size: 23px;
        width: 44px;
        height: fit-content;
        text-align: center;
        text-decoration: none;
        border-radius: 50%;
    }

    /* Add a hover effect if you want */
    .fa:hover {
        opacity: 0.7;
    }

    /* Set a specific color for each brand */

    /* Facebook */
    .fa-facebook {
        color: #000000;
        border: 1px solid #963f36;
        margin: 10px;
    }


    .fa-instagram {
        color: #000000;
        border: 1px solid #963f36;
    }



     /* youtube video  */
     .season_content iframe {
        max-width: 100%;
        /* Ensures the video is responsive */
        height: 80%;
        /* Adjusts the height of the video */
    }

    .season_content p {
        font-size: 16px;
        margin-top: 10px;
        color: #333;
    }

    .season_tabs {
        position: relative;
        min-height: 500px;
        /* This part sucks */
        clear: both;
        margin: 25px 0;
    }

    .season_tab {
        float: left;
        clear: both;
        width: 500px;
    }

    .season_tabs p.li-h {
        font-size: 20px;
        line-height: 58px;
        color: #000000;
        font-weight: 700;
        background-color: #e8e8e8 !important;
        padding: 20px;
    }

    .season_tab label {
        background: #eee;
        padding: 10px;
        border: 1px solid #ccc;
        margin-left: -1px;
        font-size: 20px;
        vertical-align: middle;
        position: relative;
        left: 1px;
        width: 369px;
        height: 68px;
        display: table-cell;
    }

    .season_tab [type=radio] {
        display: none;
    }

    .season_content {
        position: absolute;
        top: 0;
        left: 369px;
        background: white;
        right: 0;
        bottom: 0;
        padding: 20px;
        border: 1px solid #ccc;
    }
    .season_tab img {
    margin-right: 10px;
}
    .season_content span {
        animation: 0.5s ease-out 0s 1 slideInFromTop;
    }

    [type=radio]:checked~label {
        background: white;
        border-bottom: 2px solid #8bc34a;
        z-index: 2;
    }

    [type=radio]:checked~label~.season_content {
        z-index: 1;
    }
    /*before-after css */
    .swiper {
    width: 100%;
    height: 100%;
    }

    .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    .slider-btn svg {
        width: 100%;
        height: 100%;
    }

    .slider-btn {
        position: absolute;
        margin-top: -20px;
        top: 50%;
        width: 40px;
        height: 40px;
        z-index: 1;
    }
    .btn-prev.slider-btn {
        left: -60px;
    }

    .btn-next.slider-btn {
        right: -60px;
    }

    .slider-btn:hover {
        cursor: pointer;
    }
    @media (max-width: 1200px) {
        .slider-btn {
            width: 35px;
            height:35px;
        }
        .btn-prev.slider-btn {
        left: 0px;
        fill: white;

        }
        .btn-next.slider-btn {
        right: 0px;
        fill: white;

        }
    }
    .swiper-button-prev {
        display: none !important;
    }
    .swiper-button-next {
        display: none !important;

    }
   
    /* Responsive Design */

/* For screens smaller than 1200px (for tablets and large mobile screens) */
@media (max-width: 1200px) {
    .container {padding: 15px;}
    .banner .grid {
        grid-template-columns: 1fr; 
        display: flex;
        flex-direction: column;
    }
    .banner .grid .form h2{
        font-size: 60px; 

    }
    .banner .grid .form span{
        font-size: 40px; 

    }
    .banner h1 {
        font-size: 40px; 
    }

    .header {
        flex-direction: column; 
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .header .logo img {
        height: 60px; 
        margin:5px;
    }

    .header a {
        margin-left: 0;
        margin-top: 10px;
        background: white;
        color: #2d2525;
        font-size: 12px;
        padding: 12px;
        border-radius: 20px;
    }
    .header a:hover{
    color: #2d2525;
    background: #b7a67e;
    cursor: pointer;
    }
    .season_content iframe {
    max-width: 100%;
    height: revert-layer;
}
}

/* For screens smaller than 768px (for mobile phones) */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .banner .grid {
        grid-template-columns: 1fr; 
    }

    .banner h1 {
        font-size: 40px; 
    }

    .form {
        padding: 0px;
    }

    .form h2 {
        font-size: 41px !important; 
    }

    .form input,
    .form textarea,
    .form select,
    .form button {
        width: 100%; 
    }

    .form input,
    .form textarea,
    .form select {
        margin-bottom: 10px;
    }

    /* Ensure the input fields (firstname/lastname) don't sit side by side */
    #firstname,
    #lastname {
        width: 100%; 
    }

    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .header a {
        background: white;
        color: #2d2525;
        font-size: 12px;
        padding: 12px;
        border-radius: 20px;
    }
    .header a:hover{
    color: #2d2525;
    background: #b7a67e;
    cursor: pointer;
    }
}

/* For screens smaller than 480px (for very small mobile screens) */
@media (max-width: 480px) {
    .banner h1 {
        font-size: 20px!important; 
    }

    .header {
        padding: 10px; 
        display: flex;
        align-items: center;
        flex-direction: column;
        margin:0;
        border-radius: 0;

    }
    .header a {
        background: white;
        color: #2d2525;
        font-size: 12px;
        padding: 5px;
        border-radius: 20px;
    }
    .header a:hover{
    color: #2d2525;
    background: #b7a67e;
    cursor: pointer;
    }

    .header .logo img {
        height: 50px; 
        margin:5px;
    }
    .form h2 {
        font-size: 24px !important; 
    }
    .banner .grid .form span {
    font-size: 18px;
    }

    .form button {
        font-size: 14px; 
        padding: 8px 20px;
        width: 50%;
    }
}
/* Responsive Design for Why Choose and Trust the Process Sections */

/* For screens smaller than 1200px (tablets and large mobile screens) */
@media (max-width: 1200px) {
    /* Why Choose Section */
    .why-choose h2 {
        font-size: 38px !important;  

    .why-choose .h2h {
        font-size: 25px  !important; 
    }

    .why-choose .info {
        flex-direction: column; 
        align-items: center;
        
    }
    .why-choose p {
    font-size: 25px !important; 

    }

    .why-choose img {
        max-width: 100%; 
        margin-bottom: 20px;
    }

    .details ul {
        margin-top: 10px; 
        font-size: 20px !important

    }
    .details {
    padding: 20px;
    }
    .details .associations h3{
        font-size: 25px !important; 
    }

    /* Trust the Process Section */
    .trust-process h2 {
        font-size: 40px !important; 
    }

    .trust-process .h2h {
        font-size: 25px !important; 
    }

    .trust-process .testimonial-grid {
        flex-direction: column; 
    }

    .trust-process .testimonial-list {
        width: 100%;
        margin-bottom: 20px;
    }

    .testimonial-list .li-h {
        font-size: 18px; 
    }

    .trust-process .testimonial-list li {
        padding: 8px;
        line-height: 25px;
    }

    .trust-process .testimonial-video img {
        width: 100%; 
    }
}}

/* For screens smaller than 768px (for mobile phones) */
@media (max-width: 768px) {
    .why-choose h2 {
        font-size: 30px; 
    }

    .why-choose .h2h {
        font-size: 20px; 
    }

    .why-choose .info {
        flex-direction: column; 
        gap: 10px; 
        align-items: center;

    }

    .why-choose img {
        max-width: 100%; 
        margin-bottom: 20px;
    }

    .details ul {
        margin-top: 5px; 
    }
    .details {
    padding: 20px;
}
    /* Trust the Process Section */
    .trust-process h2 {
        font-size: 24px; 
    }

    .trust-process .h2h {
        font-size: 16px; 
    }

    .trust-process .testimonial-grid {
        flex-direction: column; 
    }

    .trust-process .testimonial-list {
        width: 100%; 
    }

    .testimonial-list .li-h {
        font-size: 16px; 
    }

    .trust-process .testimonial-list li {
        font-size: 14px; 
        padding: 6px; 
    }

    .trust-process .testimonial-video img {
        width: 100%; 
    }
}

/* For screens smaller than 480px (very small mobile screens) */
@media (max-width: 480px) {

    .why-choose h2 {
        font-size: 20px !important;
    }

    .why-choose .h2h {
        font-size: 14px;
    }

    .why-choose .info {
        flex-direction: column;
        align-items: center;

    }
    .why-choose p {
        font-size: 12px;
    }
    .why-choose img {
        max-width: 100%;
        margin-bottom: 15px;
    }

    .details ul {
        margin-top: 0; 
    }
    .details {
    padding: 20px;
    }
    .details ul {
        margin-top: 10px; 
        font-size: 15px; 

    }
    /* Trust the Process Section */
    .trust-process h2 {
        font-size: 24px; 
    }

    .trust-process .h2h {
        font-size: 15px; 
    }
}

    .trust-process .testimonial-grid {
        flex-direction: column; 

    .trust-process .testimonial-list {
        width: 100%; 
        margin-bottom: 15px;
    }

    .testimonial-list .li-h {
        font-size: 14px; 
    }

    .trust-process .testimonial-list li {
        font-size: 12px; 
        padding: 5px; 
    }

    .trust-process .testimonial-video img {
        width: 100%; 
    }
}

/* For screens smaller than 1200px (tablets and large mobile screens) */
@media (max-width: 1200px) {
    .testimonials h2 {
        font-size: 28px !important;
    }

    .testimonials .h2h {
        font-size: 18px !important;
    }

    .testimonials .reviews {
        flex-direction: row; 
        gap: 20px;
    }

    .review-card {
        width: 100%; 
    }

    /* Dental Implants Plans Section */
    .dental-plans h2 {
        font-size: 30px !important;
    }

    .dental-plans .plans {
        flex-direction: row; 
        gap: 20px;
    }

    .plan-card {
        width: 100%; 
        max-width: fit-content;
    }

    /* Smile Transformations Section */
    .transformations-carousel {
        flex-direction: column; 
        width: 100%;
    }

    .carousel-images {
        width: calc(100% * 3); 
    }

    .image-wrapper {
        width: 33.33%; 
    }

    /* Find Out If You're A Candidate Section */
    .evaluation-section {
        flex-direction: row; 
    }

    .evaluation-box, .pricing-box {
        width: 100%; 
        max-width: 441px;
    }

    .submit-btn {
        margin-left: 0; 
    }
}

/* For screens smaller than 768px (mobile phones) */
@media (max-width: 768px) {
    /* Testimonials Section */
    .testimonials h2 {
        font-size: 24px;
    }

    .testimonials .h2h {
        font-size: 16px;
    }

    .testimonials .reviews {
        flex-direction: row;
        gap: 15px;
    }

    .review-card {
        width: 100%; 
    }

    .review-card h4 {
        font-size: 16px;
    }

    /* Dental Implants Plans Section */
    .dental-plans h2 {
        font-size: 28px;
    }

    .dental-plans .plans {
        flex-direction: row;
        gap: 15px;
        display: flex;
        flex-wrap: nowrap;
    }

    .plan-card {
        width: 100%;
        max-width: fit-content;
    }

    .plan-card h3 {
        font-size: 18px;
    }

    .plan-card h4 {
        font-size: 18px;
    }

    .plan-card h5 {
        font-size: 14px;
    }

    .plan-card .price {
        font-size: 50px;
    }

    .plan-card button {
        font-size: 18px;
    }

    /* Smile Transformations Section */
    .smile-transformations h2 {
        font-size: 22px;
    }

    .smile-transformations p {
        font-size: 14px;
    }

    .transformations-carousel {
        flex-direction: column; 
    }

    .carousel-images {
        width: calc(100% * 3);
    }

    .image-wrapper {
        width: 33.33%;
    }

    .carousel-btn {
        font-size: 20px;
    }

    /* Find Out If You're A Candidate Section */
    .evaluation-section {
        flex-direction: column; 
        gap: 15px;
        align-items: center;

    }

    .evaluation-box, .pricing-box {
        width: 100%;
    }

    .submit-btn {
        margin-left: 0;
        align-self: center;
    }
}

/* For screens smaller than 480px (small mobile screens) */
@media (max-width: 480px) {
    /* Testimonials Section */
    .testimonials h2 {
        font-size: 26px !important; 
    }

    .testimonials .h2h {
        font-size: 20px !important;
    }

    .testimonials .reviews {
        flex-direction: column; 
        gap: 10px;
    }

    .review-card {
        width: 100%;
    }

    .review-card h4 {
        font-size: 14px !important;
    }

    /* Dental Implants Plans Section */
    .dental-plans h2 {
        font-size: 26px !important; 
    }

    .dental-plans .plans {
        flex-direction: column; 
        gap: 10px;
        align-items: center;

    }

    .plan-card {
        width: 100%;
        max-width: 350px;
    }

    .plan-card h3 {
        font-size: 31px;
    }

    .plan-card h4 {
        font-size: 16px;
    }

    .plan-card h5 {
        font-size: 12px;
    }

    .plan-card .price {
        font-size: 40px;
    }

    .plan-card button {
        font-size: 16px;
    }

    /* Smile Transformations Section */
    .smile-transformations h2 {
        font-size: 30px;
    }

    .smile-transformations p {
        font-size: 15px;
    }

    .transformations-carousel {
        flex-direction: column; 
    }

    .carousel-images {
        width: calc(100% * 3);
    }

    .image-wrapper {
        width: 33.33%;
    }

    .carousel-btn {
        font-size: 18px;
    }

    /* Find Out If You're A Candidate Section */
    .evaluation-section {
        flex-direction: column; 
        gap: 10px;
    }

    .evaluation-box, .pricing-box {
        width: 100%;
    }

    .submit-btn {
        margin-left: 0;
        align-self: center;
    }
}
/* Footer Section */
@media (max-width: 1200px) {
    .footer-top {
        flex-direction: column;
        align-items: center;
    }
    .footer-top p {
    font-size: 36px;
    }
    .footer-top h3 {
    font-size: 24px;
    }

    .footer-appointments,
    .footer-contact {
        border-right: none; 
        height: auto;
    }

    .footer-main {
        flex-direction: column; 
        gap: 20px;
        align-items: center;

    }

    .footer-logo {
        width: 100%; 
        text-align: center;
    }

    .footer-logo img {
        width: 70px; 
    }

    .footer-address {
        width: 100%; 
        text-align: center;
    }

    .footer-map img {
        width: 100%; 
        max-width: 500px; 
    }

    .footer-bottom {
        font-size: 24px;
    }

    .fa {
        font-size: 24px; 
        width: 55px;
    }

    .fa-facebook, .fa-instagram {
        margin: 5px;
    }

    .book-now {
        padding: 8px 15px; 
    }
    .footer-address p {
    font-size: 24px;
    }
    .footer-address h4 {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    /* Footer Section */
    .footer-top {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .footer-main {
        flex-direction: column; 
        align-items: center;

    }

    .footer-logo img {
        width: 60px;
    }

    .footer-address h4 {
        font-size: 21px; 
    }

    .footer-address p {
        font-size: 17px; 
    }

    .footer-bottom {
        font-size: 20px;
    }

    /* Social media icons */
    .fa {
        font-size: 20px; 
        width: 40px;
        height: 40px;
    }

    /* Book now button */
    .book-now {
        padding: 8px 15px;
        font-size: 14px; 
    }
    .book-now:hover {
        color:black;
        background:#b7a67e;
    }


    /* Make footer map responsive */
    .footer-map img {
        width: 100%; 
        max-width: 400px;
    }
    .footer-address p {
    font-size: 22px;
    }
    .footer-address h4 {
        font-size: 30px;
    }
}

@media (max-width: 480px) {
    /* Footer Section */
    .footer-top {
        padding: 10px 0;
    }

    .footer-main {
        flex-direction: column; 
    }

    .footer-logo img {
        width: 50px; /
    }

    .footer-address h4 {
        font-size: 21px;
    }

    .footer-address p {
        font-size: 17px;
    }

    .footer-bottom {
        font-size: 15px; 
    }

    .fa {
        font-size: 20px; 
        width: 40px;
        height: 38px;
    }

    /* Book now button */
    .book-now {
        padding: 8px 15px;
        font-size: 12px;
    }
    .footer-top p {
        font-size: 24px;
    }
    .footer-top h3 {
        font-size: 20px;
    }

    /* Footer map image */
    .footer-map img {
        width: 100%; 
        max-width: 350px;
    }
}
/* Season Content and Tabs Section */
@media (max-width: 1200px) {
    .season_tabs {
        margin: 15px 0;
        padding: 0;
    }

    .season_tab {
        width: 100%; 
        margin-bottom: 20px;
    }

    .season_tab label {
        width: 100%; 
    }

    .season_content {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 15px;
        width: 100%;
        position: relative;
    }

    .season_tabs p.li-h {
        font-size: 34px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    /* Season Content and Tabs Section */
    .season_tabs {
        margin: 10px 0;
        padding: 0;
    }

    .season_tab {
        width: 100%; 
    }

    .season_tab label {
        width: 100%; 
    }

    .season_content {
        width: 100%; 
        padding: 10px;
        position: relative;

    }

    .season_tabs p.li-h {
        font-size: 34px;
        text-align: center;
    }
}

@media (max-width: 480px) {
    /* Season Content and Tabs Section */
    .season_tabs {
        margin: 10px 0;
        padding: 0;
    }

    .season_tab {
        width: 100%; 
        margin-bottom: 10px;
    }

    .season_tab label {
        width: 100%; 
    }

    .season_content {
        width: 100%;
        padding: 10px;
        position: relative;

    }

    .season_tabs p.li-h {
        font-size: 24px;
        text-align: center;
    }
    .season_tab label {
        font-size: 16px;
    }

    .season_content iframe {
        height: 50%;
    }
}

    /* Mobile and Tablet Layout (320px to 768px) */
    @media (max-width: 768px) {
        .why-choose .grid {
            flex-direction: column; /* Stack image and content vertically */
        }
        .why-choose .grid div {
            order: 0 !important; /* Reset order for mobile */
        }
        .why-choose .grid div:first-child {
            order: 1; /* Image on top */
        }
        .why-choose .grid div:last-child {
            order: 2; /* Content below */
        }
    }
    .video-container{
        padding: 30px 0px;
    }
    .why-choose .grid ul li {
    margin-bottom: 10px !important;
}
#why-choose-title {
    font-size: 32px;
    font-weight: 600;
    line-height: 48px;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    #why-choose-title {
        font-size: 24px !important;
        line-height: 36px !important;
    }
}

@media (max-width: 768px) {
    #why-choose-title {
        font-size: 20px !important;
        line-height: 32px !important;
    }
}

@media (max-width: 480px) {
    #why-choose-title {
        font-size: 20px!important;
        line-height: 32px !important;
    }
}
/* Mobile Layout (320px to 768px) */
    @media (max-width: 768px) {
        .evaluation-section {
            flex-direction: column; /* Stack boxes vertically on mobile */
        }
        .evaluation-box, .pricing-box {
            flex: 1 1 100%; /* Full width for mobile */
        }
    }

    /* Mobile Layout (320px to 768px) */
    @media (max-width: 768px) {
        .review-card {
            flex: 1 1 100% !important; /* Full width for mobile */
            max-width: 100% !important;
        }
    }
    .video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.video-container video {
    width: 32%; /* Each video takes 32% width to fit three in a row */
    height: auto;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .video-container video {
        width: 100%; /* Full width for small screens */
    }
}


    </style>

</head>

<body>
    <header class="header">
        <div class="logo">
            <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/logo.png" alt="Logo">
            <span>LOGO HERE</span>
        </div>
        <div class="header-links">
            <a href="#">Book an Appointment</a>
            <a href="#">(XXX)-XXX-XXX</a>
        </div>
    </header>

<!-- Why Choose Section -->
<section class="why-choose" style="padding: 30px 0;">
    <div class="container" style="max-width: 1200px; margin: auto; padding: 0 20px;">
        <h2 style="text-align: center; font-size: 40px; margin-bottom: 20px;">
            <span style="font-size: 32px; text-transform: uppercase; color: #000; font-weight: 400;">WHY CHOOSE</span><br> Family Dental Clinic
        </h2>
        <div class="grid" style="display: flex; gap: 30px; align-items: center;">
            <!-- Left Image -->
            <div style="flex: 1; order: 1;">
                <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Doctor.png" alt="Experienced Dentist" style="width: 100%; border-radius: 8px;">
            </div>

            <!-- Right Content -->
            <div style="flex: 1; order: 2;">
                <h5 id="why-choose-title" class="why-chooses">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</h5>
                <ul style="list-style-type: none; padding: 0;">
                    <li style="margin-bottom: 15px; display: flex; align-items: center;">
                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/human.svg" style="margin-right: 10px;">
                        <strong>10 Years Clinical Experience</strong>
                    </li>
                    <li style="margin-bottom: 15px; display: flex; align-items: center;">
                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/membr.svg" style="margin-right: 10px;">
                        <strong>Membership - International Dental Implant Association</strong>
                    </li>
                    <li style="margin-bottom: 15px;">
                        <ul style="margin-left: 30px; margin-bottom: 15px; list-style-type: disc;">
                            <li>American Dental Association</li>
                            <li>American Academy of Facial Esthetics</li>
                            <li>International Dental Implant Association</li>
                        </ul>
                    </li>
                    <li style="margin-bottom: 15px; display: flex; align-items: center;">
                        <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/DI.svg" style="margin-right: 10px;">
                        <strong>Dental Implants - Single & Multiple Dental Implants</strong>
                    </li>
                    <li>
                        <ul style="margin-left: 30px; list-style-type: disc;">
                            <li>Single Dental Implants</li>
                            <li>Multiple Dental Implants</li>
                            <li>Implant Supported Denture</li>
                        </ul>
                    </li>
                </ul>
                <div class="associations" style="margin-top: 20px;">
                    <h3 style="font-size: 20px; margin-bottom: 10px;">Associations</h3>
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Associations.png" alt="NSU Florida">
                </div>
            </div>
        </div>
    </div>
</section>

    <!-- Trust Process Section -->
    <section class="trust-process" style="padding: 30px 0;">
        <div class="container">
            <h2><span class="h2h">Still Don't Trust The Process?</span><br>See What These Real Patients Think</h2>
            <div class="video-container">
    <video src="https://microsite.medianv.website/wp-content/themes/hello-elementor-child/video/implant1.mp4" autoplay muted loop></video>
    <video src="https://microsite.medianv.website/wp-content/themes/hello-elementor-child/video/implant.mp4" autoplay muted loop></video>
    <video src="https://microsite.medianv.website/wp-content/themes/hello-elementor-child/video/implant1.mp4" autoplay muted loop></video>
</div>      
        </div>
    </section>

   <!-- Testimonials Section -->
<section class="testimonials" style="padding: 30px 0;">
    <div class="container">
        <h2 style="font-size: 40px; text-align: center; margin-bottom: 20px;">
            <span style="font-size: 32px; text-transform: uppercase; color: #000; font-weight: 400;">Testimonials</span><br>Implants Patients Reviews
        </h2>
        <div class="reviews" style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
            <!-- Review Card 1 -->
            <div class="review-card" style="flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
                <p class="svg-s" style="display: flex; align-items: center; gap: 10px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/quotation .svg" style="width: 24px;">
                    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.
                </p>
                <div class="p-name" style="display: flex; align-items: center; gap: 10px; margin-top: 15px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Dental-Veneers.png" style="width: 50px; height: 50px; border-radius: 50%;">
                    <h4 style="font-size: 18px;">
                        <strong>Sam Smith</strong><br>Patient
                    </h4>
                </div>
            </div>

            <!-- Review Card 2 -->
            <div class="review-card" style="flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
                <p class="svg-s" style="display: flex; align-items: center; gap: 10px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/quotation .svg" style="width: 24px;">
                    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.
                </p>
                <div class="p-name" style="display: flex; align-items: center; gap: 10px; margin-top: 15px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Dental-Veneers.png" style="width: 50px; height: 50px; border-radius: 50%;">
                    <h4 style="font-size: 18px;">
                        <strong>Sam Smith</strong><br>Patient
                    </h4>
                </div>
            </div>

            <!-- Review Card 3 -->
            <div class="review-card" style="flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
                <p class="svg-s" style="display: flex; align-items: center; gap: 10px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/quotation .svg" style="width: 24px;">
                    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.
                </p>
                <div class="p-name" style="display: flex; align-items: center; gap: 10px; margin-top: 15px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Dental-Veneers.png" style="width: 50px; height: 50px; border-radius: 50%;">
                    <h4 style="font-size: 18px;">
                        <strong>Sam Smith</strong><br>Patient
                    </h4>
                </div>
            </div>

            <!-- Review Card 4 -->
            <div class="review-card" style="flex: 1 1 calc(50% - 20px); max-width: calc(50% - 20px); padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
                <p class="svg-s" style="display: flex; align-items: center; gap: 10px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/quotation .svg" style="width: 24px;">
                    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.
                </p>
                <div class="p-name" style="display: flex; align-items: center; gap: 10px; margin-top: 15px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Dental-Veneers.png" style="width: 50px; height: 50px; border-radius: 50%;">
                    <h4 style="font-size: 18px;">
                        <strong>Sam Smith</strong><br>Patient
                    </h4>
                </div>
            </div>
        </div>
    </div>
</section>
    <!-- Dental Implants Plans Section -->
    <section class="dental-plans" style="padding: 30px 0px;">
        <div class="container">
            <h2>Dental Implants Plans</h2>
            <p>We’re locally owned and love supporting our community.</p>
            <div class="plans">
                <div class="plan-card">
                    <h3>Single Tooth</h3>
                    <p class="price">$XXX</p>
                    <h4>Feature List</h4>
                    <ul>
                        <li>Feature 1 description</li>
                        <li>Feature 2 description</li>
                        <li>Feature 3 description</li>
                    </ul>
                    <button>Book Online</button>
                    <h5>Et has minimum elitr intellegat.</h5>
                </div>
                <div class="plan-card">
                    <h3>Single Tooth</h3>
                    <p class="price">$XXX</p>
                    <h4>Feature List</h4>
                    <ul>
                        <li>Feature 1 description</li>
                        <li>Feature 2 description</li>
                        <li>Feature 3 description</li>
                    </ul>
                    <button>Book Online</button>
                    <h5>Et has minimum elitr intellegat.</h5>
                </div>
                <div class="plan-card">
                    <h3>Single Tooth</h3>
                    <p class="price">$XXX</p>
                    <h4>Feature List</h4>
                    <ul>
                        <li>Feature 1 description</li>
                        <li>Feature 2 description</li>
                        <li>Feature 3 description</li>
                    </ul>
                    <button>Book Online</button>
                    <h5>Et has minimum elitr intellegat.</h5>
                </div>
            </div>
        </div>
    </section>

    <!-- Smile Transformations Section -->
    <section class="smile-transformations" style="padding: 30px 20px;">
        <div class="container">
            <h2>Our Smile Transformations</h2>
            <p>Lorem Ipsum is simply dummy text of the printing.</p>
            <div class="transformations-carousel">
                <div class="swiper afterBeforeSwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Layer 732.png" alt="Transformation 1"></div>
                        <div class="swiper-slide"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Layer 732.png" alt="Transformation 1"></div>
                        <div class="swiper-slide"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Layer 732.png" alt="Transformation 1"></div>
                        <div class="swiper-slide"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Layer 732.png" alt="Transformation 1"></div>
                        <div class="swiper-slide"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Layer 732.png" alt="Transformation 1"></div>
                        <div class="swiper-slide"><img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/Layer 732.png" alt="Transformation 1"></div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
                <div class="btn-prev slider-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M20.2 9.804a1 1 0 0 0-1.414 0L12.3 16.29a.997.997 0 0 0-.292.71c0 .258.096.514.292.71l6.486 6.486a1 1 0 0 0 1.414-1.414L14.418 17l5.782-5.782a1 1 0 0 0 0-1.414zM17 2C8.716 2 2 8.716 2 17s6.716 15 15 15 15-6.716 15-15S25.284 2 17 2zm0 28C9.832 30 4 24.168 4 17S9.832 4 17 4s13 5.832 13 13-5.832 13-13 13z"/></svg></div>
                <div class="btn-next slider-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g><path d="M16 1a15 15 0 1 0 15 15A15 15 0 0 0 16 1Zm0 28a13 13 0 1 1 13-13 13 13 0 0 1-13 13Z"/><path d="M14.42 8.93A1 1 0 0 0 13 10.34l5.29 5.3a.51.51 0 0 1 0 .72L13 21.66a1 1 0 1 0 1.41 1.41l6.71-6.71a.51.51 0 0 0 0-.72Z"/></g></svg></div>
            </div>
        </div>
    </section>

    <!-- Find Out If You're A Candidate Section -->
    <!-- Find Out If You're A Candidate Section -->
<section class="find-out-candidate" style="padding: 30px 0;">
    <div class="container">
        <h2 style="font-size: 40px; text-align: center; margin-bottom: 10px;">Find Out If You're A</h2>
        <p style="font-size: 24px; text-align: center; margin-bottom: 30px;">Candidate For Dental Implants!</p>
        <div class="evaluation-section" style="display: flex; gap: 30px; flex-wrap: wrap;">
            <!-- Evaluation Box -->
            <div class="evaluation-box" style="flex: 1; min-width: 300px; background-color: #2d2d2d; padding: 20px; border-radius: 8px; color: #fff;">
                <h3 style="font-size: 24px; margin-bottom: 15px;">Complete Our Evaluation To Instantly Discover</h3>
                <ul style="list-style-type: disc; padding-left: 20px; margin-bottom: 20px;">
                    <li style="margin-bottom: 10px;">If You’re A Candidate For Dental Implants</li>
                    <li style="margin-bottom: 10px;">What Treatment Options Are Available For You</li>
                    <li style="margin-bottom: 10px;">Pricing And Financing Options</li>
                </ul>
                <h4 style="font-size: 20px; margin-bottom: 15px;">BONUS</h4>
                <ul style="list-style-type: disc; padding-left: 20px;">
                    <li>Receive A Special Promotion That Can Save You Thousands!</li>
                </ul>
            </div>

            <!-- Pricing Box -->
            <div class="pricing-box" style="flex: 1; min-width: 300px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
                <h3 style="font-size: 24px; margin-bottom: 15px;">Get Pricing Instantly</h3>
                <div class="p-box" style="border: 2px solid #2d2d2d; border-radius: 8px; padding: 15px; margin-bottom: 20px;">
                    <p style="font-size: 18px; margin-bottom: 10px;">What Best Describes Your Condition? *</p>
                    <ul style="list-style-type: none; padding: 0;">
                        <li style="margin-bottom: 10px;">I Have All My Teeth</li>
                        <li style="margin-bottom: 10px;">I'm Missing One Tooth</li>
                        <li style="margin-bottom: 10px;">I'm Missing Multiple Teeth</li>
                        <li style="margin-bottom: 10px;">I'm Missing All My Teeth</li>
                    </ul>
                </div>
                <div class="progress-bar" style="display: flex; align-items: center; gap: 10px;">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/prcbar.png">
                    <button type="submit" class="submit-btn" style="background-color: #b04739; color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 18px;">▶</button>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Footer Section -->
    <footer class="footer">
        <div class="container">
            <div class="footer-top">
                <div class="footer-contact">
                    <p>Call us</p>
                    <h3>XXX-XXX-XXXX</h3>
                </div>
                <div class="footer-appointments">
                    <p>Same Day Appointments Available</p>
                    <h3>OPEN 7 DAYS A WEEK</h3>
                </div>
                <div class="footer-hours">
                    <p>Mon - Fri: 11am - 7pm</p>
                    <h3>SAT - SUN: 9AM - 6PM</h3>
                </div>
            </div>
            <div class="footer-main">
                <div class="footer-logo">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/f-logo.png" alt="Logo">
                    <h3>LOGO HERE</h3>
                    <div class="social-icons">
                        <a href="#" class="fa fa-facebook"></a>
                        <a href="#" class="fa fa-instagram"></a>
                    </div>
                </div>
                <div class="footer-address">
                    <h4>Office Address</h4>
                    <p>
                        <span class="txt-f">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</span> <br>has been the industry's standard dummy text ever since the 1500s,<br>
                        <a href="#">Get Directions</a>
                    </p>
                    <h4>How Was Your Experience?<br></h4>
                    <p>
                        <a href="#">Write A Review</a>
                    </p>
                    <button class="book-now">BOOK NOW</button>
                </div>
                <div class="footer-map">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/temp2images/map.png" alt="Map">
                </div>
            </div>
            <div class="footer-bottom">
                <p>© 2024 Family Dental | All Rights Reserved | Privacy Policy | Website & Marketing Created With MediaNV by MediaNV</p>
            </div>
        </div>
    </footer>
</body>
    <script>
        $( document ).ready(function() {
            swiper = new Swiper(".afterBeforeSwiper", {
                slidesPerView: 1,
                spaceBetween: 30,
                loop:true,
                breakpoints: {
                    767: {
                        slidesPerView: 2,
                        spaceBetween: 30,
                    },
                    1024: {
                        slidesPerView: 3,
                        spaceBetween: 30,
                    }
                },
                navigation: {
                    nextEl: ".swiper-button-prev",
                    prevEl: ".swiper-button-next",
                },
                
            });
     
            $('.btn-prev').on('click', function() {
                $('.swiper-button-prev').click();
            });
            $('.btn-next').on('click', function() {
                $('.swiper-button-next').click();
            });
        });
    </script>

</html>
Copy Code
