Ophtical User Guide

On behalf of DesignerByte team, we would like to thank you for purchasing this item. Your support encourages us to build better items and continuously bring value to our products. This documentation file covers all the information needed to install and use this Template. You'll find everything you need to know to create a stunning and beautiful website in minutes.

Ophtical Introduction

This documentation will give you an understanding of how Ophtical template is structured and guide you in performing common functions.

If you want to customize, please contact us here: [email protected]

Author: PBM Infotech

Installation

Follow the steps below to get started with your Site Template:

  1. Open the ... /Template Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • html/css - Stylesheets Folder
    • html/fonts - Fonts Folder
    • html/images - Images Folder
    • html/js - Javacripts Folder
    • html/index.html - (and All HTML files)
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V5 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.


HTML Structure

The general HTML structure is the same throughout the template. Here is thegeneral HTML structure of the template:

<!DOCTYPE html>

<html lang="en">

<head>

[Page meta, page css, page title etc...]

</head>

<body>

<!-- page wrapper -->

<div class="page-wrapper">

<!--header -->

<header id="site-header" class="header">

<div id="header-wrap">

[MENU CONTENT]

</div>

</header>

<!--header -->

<!-- page content -->

<div class="page-content">

<!--Section 1 -->

<section>

[SECTION 1 CONTENT]

</section>

<!--Section 1 -->

<!--Section 2 -->

<section>

[SECTION 2 CONTENT]

</section>

<!--Section 2 -->

</div>

<!-- page content -->

<!--footer -->

<footer class="footer">

[FOOTER_CONTENT]

</footer>

<!--footer -->

</div>

<!-- page wrapper -->

[PAGE JAVASCRIPTS HERE]

</body>

</html>


CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template: 


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Fontawesome -->
<link rel="stylesheet" href="css/fontawesome.css">

<!-- Ophtical Icon -->
<link rel="stylesheet" href="fonts/pbmit-ophtical-icon/pbmit_ophtical.css">

<!-- Base Icons -->
<link rel="stylesheet" href="css/pbminfotech-base-icons.css">

<!-- Themify Icons -->
<link rel="stylesheet" href="css/themify-icons.css">

<!-- Slick -->
<link rel="stylesheet" href="css/swiper.min.css">

<!-- Magnific -->
<link rel="stylesheet" href="css/magnific-popup.css">

<!-- AOS -->
<link rel="stylesheet" href="css/aos.css">

<!-- Shortcode CSS -->
<link rel="stylesheet" href="css/shortcode.css">

<!-- Base CSS -->
<link rel="stylesheet" href="css/base.css">

<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">


Javascript Structure

The general Javascript structure is the same throughout the template. Here is the general Javascript structure of the template: 


<!-- jQuery JS -->
<script src="js/jquery.min.js"></script>

<!-- Popper JS -->
<script src="js/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>

<!-- jquery Waypoints JS -->
<script src="js/jquery.waypoints.min.js"></script>

<!-- jquery Appear JS -->
<script src="js/jquery.appear.js"></script>

<!-- Numinate JS -->
<script src="js/numinate.min.js"></script>

<!-- Slick JS -->
<script src="js/swiper.min.js"></script>

<!-- Magnific JS -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Circle Progress JS -->
<script src="js/circle-progress.js"></script> 

<!-- AOS -->
<script src="js/aos.js"></script>

<!-- Scripts JS -->
<script src="js/scripts.js"></script>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code: 


<link rel="shortcut icon" href="images/favicon.icon"/>

Logo Settings

The Logo Container can be found in the Header Container - Replace "logo-white.png" with your own logo image URL. 

<a href="index.html"><img class="logo-img" src="images/logo.svg" alt="Ophtical"></a>

Note Default height of logo is 60px. you can set height according to your logo type and yourrequirement.

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in css folder base.css file. See example below: 

<!-- "Schibsted Grotesk", sans-serif -->
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet');

<!-- "Onest", sans-serif -->
@import url('https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap" rel="stylesheet');

<!-- "Roboto", sans-serif -->
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet');

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Section title

You can use this code for your page section title to maintain title style.

<div class="pbmit-headingg">
   <h2 class="pbmit-title">Your Title</h2>
</div>

Background color

You can use color in the background. simply add .pbmit-bg-color-global (or any color you want) class where you want to use. See example below: 

<div class="pbmit-bg-color-global">  

[YOUR CONTENT]

</div>

Note We include 4 background color helper class in our template pbmit-bg-color-global, pbmit-bg-color-secondary, pbmit-bg-color-light and pbmit-bg-color-blackish You can add unlimited background color class according to your needs

Background Image

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below: 

<div style="background:url(Path); ">    

[YOUR CONTENT]

</div>

Sliders

  • Swiper Slider

Swiper Slider

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online Swiper Slider documentation.

Shortcode

  • Accordion
  • Buttons
  • Blog Post
  • Counter
  • Icon Box
  • Service Box
  • Progress Bar
  • Team
  • Testimonials

Accordion

Use the below code to display accordion:

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes
            </div>
        </div>
    </div>
</div>

Button

Use the below to display Default Buttons:

Class Code Description Result
.pbmit-btn 
<a class="pbmit-btn" href="#">
    <span class="pbmit-button-content-wrapper">
        <span class="pbmit-button-text-wrap">
            <span class="pbmit-button-text" data-text="Button">
                <span>Button</span>
            </span>
        </span>
        <span class="pbmit-button-icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="512" viewBox="0 0 24 24" width="512"><
            path d="m21.706 12.708-7 7a1 1 0 0 1 -1.414-1.414l5.294-5.294h-15.586a1 1 0 0 1 0-2h15.586l-5.293-5.293a1 
            1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.416z" fill="rgb(0,0,0)"></path></svg>
        </span>
    </span>
</a>
Button Button
.pbmit-btn 
<a class="pbmit-btn transparent" href="#">
    <span class="pbmit-button-content-wrapper">
        <span class="pbmit-button-text-wrap">
            <span class="pbmit-button-text" data-text="Button">
                <span>Button</span>
            </span>
        </span>
        <span class="pbmit-button-icon">
            <svg xmlns="http://www.w3.org/2000/svg" height="512" viewBox="0 0 24 24" width="512
            "><path d="m21.706 12.708-7 7a1 1 0 0 1 -1.414-1.414l5.294-5.294h-15.586a1 1 0 0 1 0-2h15.586l-5.293-5.293a1 
            1 0 0 1 1.414-1.414l7 7a1 1 0 0 1 0 1.416z" fill="rgb(0,0,0)"></path></svg>
        </span>
    </span>
</a>
Button Button

Counter

Use the below code to display Counter style:

Counter Style 1
<div class="pbminfotech-ele-fid-style-1">
    <div class="pbmit-fld-contents">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path d="m0 197v300c0 8.284 6.716 15 15 15h31v-330h-31c-8.284 0-15 6.716-15 15z"></path>
                        <path d="m497 182h-31v330h31c8.284 0 15-6.716 15-15v-300c0-8.284-6.716-15-15-15z"></path>
                        <path d="m151 180h210c8.284 0 15-6.716 15-15v-150c0-8.284-6.716-15-15-15h-210c-8.284 0-15 6.716-15 15v150c0 8.284 6.716 15 15 15zm23.192-99.251c1.464-1.868 36.367-45.749 81.808-45.749s80.344 43.881 81.808 45.749c4.257 5.433 4.257 13.069 0 18.502-1.464 1.868-36.367 45.749-81.808 45.749s-80.344-43.881-81.808-45.749c-4.256-5.433-4.256-13.069 0-18.502z"></path>
                        <path d="m305.587 90c-10.466-10.152-29.251-25-49.587-25-20.337 0-39.122 14.849-49.588 25.001 10.459 10.145 29.247 24.999 49.588 24.999 20.336 0 39.121-14.848 49.587-25zm-64.587 0c0-8.284 6.716-15 15-15s15 6.716 15 15-6.716 15-15 15-15-6.716-15-15z"></path>
                        <path d="m421 120h-15v45c0 24.813-20.187 45-45 45h-210c-24.813 0-45-20.187-45-45v-45h-15c-8.284 0-15 6.716-15 15v377h65v-120h-5c-8.284 0-15-6.716-15-15v-60c0-8.284 6.716-15 15-15h240c8.284 0 15 6.716 15 15v60c0 8.284-6.716 15-15 15h-5v120h65v-377c0-8.284-6.716-15-15-15zm-115 151h-100c-8.284 0-15-6.716-15-15s6.716-15 15-15h100c8.284 0 15 6.716 15 15s-6.716 15-15 15z"></path>
                        <path d="m271 392h70v120h-70z"></path>
                        <path d="m151 332h210v30h-210z"></path>
                        <path d="m171 392h70v120h-70z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-contents-wraper">
            <h4 class="pbmit-fid-counter">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="3" data-before="" data-before-style="" data-after="" data-after-style="">25</span>
                <span class="pbmit-fid"><span>+</span></span>
            </h4>
            <h3 class="pbmit-fid-title">Years of Experience in the Medical Field.</h3>
        </div>
    </div>		
</div>
Counter Style 2
<div class="pbminfotech-ele-fid-style-2">
    <div class="pbmit-fld-contents">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path d="m0 197v300c0 8.284 6.716 15 15 15h31v-330h-31c-8.284 0-15 6.716-15 15z"></path>
                        <path d="m497 182h-31v330h31c8.284 0 15-6.716 15-15v-300c0-8.284-6.716-15-15-15z"></path>
                        <path d="m151 180h210c8.284 0 15-6.716 15-15v-150c0-8.284-6.716-15-15-15h-210c-8.284 0-15 6.716-15 15v150c0 8.284 6.716 15 15 15zm23.192-99.251c1.464-1.868 36.367-45.749 81.808-45.749s80.344 43.881 81.808 45.749c4.257 5.433 4.257 13.069 0 18.502-1.464 1.868-36.367 45.749-81.808 45.749s-80.344-43.881-81.808-45.749c-4.256-5.433-4.256-13.069 0-18.502z"></path>
                        <path d="m305.587 90c-10.466-10.152-29.251-25-49.587-25-20.337 0-39.122 14.849-49.588 25.001 10.459 10.145 29.247 24.999 49.588 24.999 20.336 0 39.121-14.848 49.587-25zm-64.587 0c0-8.284 6.716-15 15-15s15 6.716 15 15-6.716 15-15 15-15-6.716-15-15z"></path>
                        <path d="m421 120h-15v45c0 24.813-20.187 45-45 45h-210c-24.813 0-45-20.187-45-45v-45h-15c-8.284 0-15 6.716-15 15v377h65v-120h-5c-8.284 0-15-6.716-15-15v-60c0-8.284 6.716-15 15-15h240c8.284 0 15 6.716 15 15v60c0 8.284-6.716 15-15 15h-5v120h65v-377c0-8.284-6.716-15-15-15zm-115 151h-100c-8.284 0-15-6.716-15-15s6.716-15 15-15h100c8.284 0 15 6.716 15 15s-6.716 15-15 15z"></path>
                        <path d="m271 392h70v120h-70z"></path>
                        <path d="m151 332h210v30h-210z"></path>
                        <path d="m171 392h70v120h-70z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-contents-box">
            <h3 class="pbmit-fid-title">Years of experience in<br>
                the medical field.
            </h3>
            <h4 class="pbmit-fid-counter">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="2" data-before="" data-before-style="" data-after="" data-after-style="">25</span>
                <span class="pbmit-fid"><span>+</span></span>
            </h4>
        </div>
    </div>			
</div>
Counter Style 3
<div class="pbminfotech-ele-fid-style-3">
    <div class="pbmit-fld-contents">
        <h4 class="pbmit-fid-counter">
            <span class="pbmit-fid-before"></span>
            <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">25</span>
            <span class="pbmit-fid"><span>+</span></span>
        </h4>
        <div class="pbmit-heading-desc">Years of Experience in  Medical Field.</div>
    </div>			
</div>
Counter Style 4
<div class="pbminfotech-ele-fid-style-4">
    <div class="pbmit-fld-contents">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <circle cx="321" cy="310" r="25"></circle>
                        <path d="m145.333 279.385c9.883-14.696 26.664-24.385 45.667-24.385 25.127 0 46.356 16.943 52.904 40h24.193c6.547-23.057 27.777-40 52.904-40 19.003 0 35.784 9.689 45.668 24.385l32.223-39.385h-285.783z"></path>
                        <circle cx="191" cy="310" r="25"></circle>
                        <path d="m321 365c-25.127 0-46.356-16.943-52.904-40h-24.193c-6.547 23.057-27.777 40-52.904 40-28.396 0-51.833-21.632-54.702-49.281l-45.297-55.364v86.645c0 90.981 74.019 165 165 165s165-74.019 165-165v-86.645l-45.298 55.364c-2.869 27.649-26.306 49.281-54.702 49.281zm-14.394 64.038c-13.952 13.952-32.279 20.928-50.606 20.928s-36.654-6.976-50.606-20.928c-5.858-5.857-5.858-15.355 0-21.213 5.858-5.857 15.356-5.857 21.213 0 16.208 16.207 42.579 16.207 58.787 0 5.858-5.858 15.354-5.858 21.213 0 5.857 5.858 5.857 15.356-.001 21.213z"></path>
                        <path d="m21 285v30c0 22.091 17.909 40 40 40v-110c-22.091 0-40 17.909-40 40z"></path>
                        <path d="m451 245v110c22.091 0 40-17.909 40-40v-30c0-22.091-17.909-40-40-40z"></path>
                        <path d="m451 215c14.808 0 28.547 4.635 39.869 12.511-1.865-59.963-26.084-116.066-68.699-158.681-44.385-44.386-103.399-68.83-166.17-68.83s-121.785 24.444-166.17 68.83c-42.615 42.616-66.834 98.718-68.699 158.681 11.322-7.876 25.061-12.511 39.869-12.511v-15c0-35.841 29.159-65 65-65h50.644c9.821-34.585 41.666-60 79.356-60s69.535 25.415 79.356 60h50.644c35.841 0 65 29.159 65 65z"></path>
                        <path d="m386 165h-47.856c-1.54 17.003-8.245 32.538-18.552 45h101.408v-10c0-19.299-15.701-35-35-35z"></path>
                        <path d="m126 165c-19.299 0-35 15.701-35 35v10h101.408c-10.307-12.462-17.012-27.997-18.552-45z"></path>
                        <path d="m308.5 157.5c0-28.949-23.552-52.5-52.5-52.5s-52.5 23.551-52.5 52.5 23.552 52.5 52.5 52.5 52.5-23.551 52.5-52.5zm-67.5 0c0-8.284 6.716-15 15-15s15 6.716 15 15-6.716 15-15 15-15-6.716-15-15z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-contents-box">
            <h4 class="pbmit-fid-counter">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="88" data-interval="10" data-before="" data-before-style="" data-after="" data-after-style="">88</span>
                <span class="pbmit-fid"><span>%</span></span>
            </h4>
            <h3 class="pbmit-fid-title">Customer satisfaction is our success</h3>
        </div>
    </div>	
</div>
Counter Style 5
<div class="pbminfotech-ele-fid-style-5">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fldbox-wrpper"></div>
        <div class="pbmit-content-box">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="95" data-interval="3" data-before="" data-before-style="" data-after="" data-after-style="">95</span>
                <span class="pbmit-fid"><span>%</span></span>
            </h4>
            <div class="pbmit-heading-desc">Patient satisfaction is our success</div>
        </div>
    </div>			
</div>

Icon box

Use the below code to display Icon box style:

Icon box Style 1
<div class="pbmit-ihbox-style-1">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path d="m194.778 356.345c-2.914-41.48-37.569-74.345-79.778-74.345s-76.864 32.865-79.778 74.345c20.059-21.14 48.404-34.345 79.778-34.345s59.719 13.205 79.778 34.345z"></path>
                        <path d="m397 352c-44.112 0-80 35.888-80 80s35.888 80 80 80 80-35.888 80-80-35.888-80-80-80zm0 130c-27.57 0-50-22.43-50-50s22.43-50 50-50 50 22.43 50 50-22.43 50-50 50z"></path>
                        <path d="m115 352c-44.112 0-80 35.888-80 80s35.888 80 80 80 80-35.888 80-80-35.888-80-80-80zm0 130c-27.57 0-50-22.43-50-50s22.43-50 50-50 50 22.43 50 50-22.43 50-50 50z"></path>
                        <path d="m497 212h-17.565l-30.01-159.052c-5.789-30.68-32.652-52.948-63.873-52.948h-18.552c-8.284 0-15 6.716-15 15s6.716 15 15 15h18.552c16.812 0 31.276 11.99 34.393 28.511l28.96 153.489h-151.905c-8.284 0-15 6.716-15 15v21.023c-17.194-8.063-34.806-8.063-52 0v-21.023c0-8.284-6.716-15-15-15h-151.905l28.96-153.489c3.117-16.521 17.582-28.511 34.393-28.511h18.552c8.284 0 15-6.716 15-15s-6.716-15-15-15h-18.552c-31.221 0-58.084 22.268-63.873 52.948l-30.01 159.052h-17.565c-8.284 0-15 6.716-15 15v120c0 4.472 1.968 8.475 5.072 11.223 1.999-58.911 50.538-106.223 109.928-106.223s107.929 47.312 109.928 106.223c3.104-2.748 5.072-6.751 5.072-11.223v-63.394c17.992-15.351 34.008-15.351 52 0v63.394c0 4.472 1.968 8.475 5.072 11.223 1.999-58.911 50.538-106.223 109.928-106.223s107.929 47.312 109.928 106.223c3.104-2.748 5.072-6.751 5.072-11.223v-120c0-8.284-6.716-15-15-15z"></path>
                        <path d="m476.778 356.345c-2.914-41.48-37.569-74.345-79.778-74.345s-76.864 32.865-79.778 74.345c20.059-21.14 48.404-34.345 79.778-34.345s59.719 13.205 79.778 34.345z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <h2 class="pbmit-element-title">Affordable Options</h2>
        <div class="pbmit-heading-desc">Customer-centric approach business strategy prioritizes the needs.</div>
    </div>
</div>
Icon box Style 2
<div class="pbmit-ihbox-style-2">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <g>
                            <path d="m497 42h-30v410c0 8.284-6.716 15-15 15h-270c-8.284 0-15-6.716-15-15v-410h-30c-8.284 0-15 6.716-15 15v440c0 8.284 6.716 15 15 15h360c8.284 0 15-6.716 15-15v-440c0-8.284-6.716-15-15-15z"></path>
                            <path d="m264.5 77h105c8.284 0 15-6.716 15-15v-22c0-22.056-17.944-40-40-40h-55c-22.056 0-40 17.944-40 40v22c0 8.284 6.716 15 15 15z"></path>
                            <path d="m267.412 197.001c10.458 10.145 29.247 24.999 49.588 24.999 20.336 0 39.121-14.848 49.587-25-10.466-10.152-29.251-25-49.587-25-20.338 0-39.122 14.849-49.588 25.001zm64.588-.001c0 8.284-6.716 15-15 15s-15-6.716-15-15 6.716-15 15-15 15 6.716 15 15z"></path>
                            <path d="m437 42h-22.5v20c0 24.813-20.187 45-45 45h-105c-24.813 0-45-20.187-45-45v-20h-22.5v395h240zm-60 350h-120c-8.284 0-15-6.716-15-15s6.716-15 15-15h120c8.284 0 15 6.716 15 15s-6.716 15-15 15zm0-70h-120c-8.284 0-15-6.716-15-15s6.716-15 15-15h120c8.284 0 15 6.716 15 15s-6.716 15-15 15zm21.808-115.749c-1.464 1.868-36.367 45.749-81.808 45.749s-80.344-43.881-81.808-45.749c-4.256-5.433-4.256-13.069 0-18.502 1.464-1.868 36.367-45.749 81.808-45.749s80.344 43.881 81.808 45.749c4.256 5.433 4.256 13.069 0 18.502z"></path>
                            <path d="m0 152h75v260h-75z"></path>
                            <path d="m50 62h-25c-13.807 0-25 11.193-25 25v35h75v-35c0-13.807-11.193-25-25-25z"></path>
                            <path d="m23.22 501.59c1.994 6.203 7.764 10.41 14.28 10.41s12.286-4.207 14.28-10.41l19.154-59.59h-66.868z"></path>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Reserve clinic slot</h2>
        </div>
    </div>
</div>
Icon box Style 3
<article class="pbmit-miconheading-style-3">
    <div class="pbmit-ihbox-style-3">
        <div class="pbmit-ihbox-box">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                    <img src="images/demo-3/aword/aword-img-01.png" alt="">
                </div>
            </div>
            <div class="pbmit-ihbox-contents">
                <h2 class="pbmit-element-title">
                    Best vision hospital <br>in New-York
                </h2>
            </div>
        </div>
    </div>
</article>
Icon box Style 4
<div class="pbmit-ihbox-style-4">
    <div class="pbmit-ihbox-box">
        <h4 class="pbmit-element-subtitle">
            Years of experience in <br>the medical field.
        </h4>
        <h2 class="pbmit-element-title">4.82</h2>
    </div>
</div>
Icon box Style 5
<div class="pbmit-ihbox-style-5">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path d="m415.762 183.611-70-60c-3.507-3.007-8.203-4.23-12.731-3.314-4.528.914-8.381 3.863-10.447 7.995-15.948 31.895-48.006 51.708-83.666 51.708h-92.918c-30.327 0-55 24.673-55 55v112c0 46.302 19.179 88.203 50 118.198v-101.5c-9.059-6.332-15-16.832-15-28.698v-50c0-19.299 15.701-35 35-35h50c19.299 0 35 15.701 35 35v50c0 11.866-5.941 22.365-15 28.698v146.411c8.155 1.245 16.503 1.891 25 1.891 90.981 0 165-74.019 165-165v-152c0-4.379-1.914-8.539-5.238-11.389zm-89.762 166.389c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z"></path>
                        <circle cx="326" cy="305" r="15"></circle>
                        <path d="m211 280h-50c-2.757 0-5 2.243-5 5v50c0 2.757 2.243 5 5 5h50c2.757 0 5-2.243 5-5v-50c0-2.757-2.243-5-5-5z"></path>
                        <path d="m171 370h30v142h-30z"></path>
                        <path d="m21 275v30c0 22.091 17.909 40 40 40v-110c-22.091 0-40 17.909-40 40z"></path>
                        <path d="m316 0h-129.01c-32.656 0-61.478 20.698-72.477 50.624-52.515 5.738-93.513 50.358-93.513 104.376v62.604c11.348-7.932 25.135-12.604 40-12.604h5.484c12.154-32.106 43.205-55 79.516-55h92.918c24.223 0 46-13.459 56.833-35.124 6.241-12.482 17.665-21.225 31.344-23.986 2.918-.59 5.919-.891 8.908-.891 10.734 0 21.135 3.849 29.286 10.837l69.998 59.998c9.985 8.559 15.713 21.013 15.713 34.166v10c14.865 0 28.652 4.672 40 12.604v-42.604c0-96.495-78.504-175-175-175z"></path>
                        <path d="m451 235v110c22.091 0 40-17.909 40-40v-30c0-22.091-17.909-40-40-40z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Qualified  Specialist</h2>
            <div class="pbmit-heading-desc">A Qualified eye specialist is someone highly skilled in evaluating.</div>
        </div>
    </div>
</div>
Icon box Style 6
<div class="pbmit-ihbox-style-6">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-svg">
            <div class="pbmit-ihbox-svg-wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="pbmit-0001" x="0px" y="0px" width="401.998px" height="401.998px" viewBox="0 0 401.998 401.998" style="enable-background:new 0 0 401.998 401.998;" xml:space="preserve">
                    <g>
                        <path d="M401.129,311.475c-1.137-3.426-8.371-8.473-21.697-15.129c-3.61-2.098-8.754-4.949-15.41-8.566 c-6.662-3.617-12.709-6.95-18.13-9.996c-5.432-3.045-10.521-5.995-15.276-8.846c-0.76-0.571-3.139-2.234-7.136-5 c-4.001-2.758-7.375-4.805-10.14-6.14c-2.759-1.327-5.473-1.995-8.138-1.995c-3.806,0-8.56,2.714-14.268,8.135 c-5.708,5.428-10.944,11.324-15.7,17.706c-4.757,6.379-9.802,12.275-15.126,17.7c-5.332,5.427-9.713,8.138-13.135,8.138 c-1.718,0-3.86-0.479-6.427-1.424c-2.566-0.951-4.518-1.766-5.858-2.423c-1.328-0.671-3.607-1.999-6.845-4.004 c-3.244-1.999-5.048-3.094-5.428-3.285c-26.075-14.469-48.438-31.029-67.093-49.676c-18.649-18.658-35.211-41.019-49.676-67.097 c-0.19-0.381-1.287-2.19-3.284-5.424c-2-3.237-3.333-5.518-3.999-6.854c-0.666-1.331-1.475-3.283-2.425-5.852 s-1.427-4.709-1.427-6.424c0-3.424,2.713-7.804,8.138-13.134c5.424-5.327,11.326-10.373,17.7-15.128 c6.379-4.755,12.275-9.991,17.701-15.699c5.424-5.711,8.136-10.467,8.136-14.273c0-2.663-0.666-5.378-1.997-8.137 c-1.332-2.765-3.378-6.139-6.139-10.138c-2.762-3.997-4.427-6.374-4.999-7.139c-2.852-4.755-5.799-9.846-8.848-15.271 c-3.049-5.424-6.377-11.47-9.995-18.131c-3.615-6.658-6.468-11.799-8.564-15.415C98.986,9.233,93.943,1.997,90.516,0.859 C89.183,0.288,87.183,0,84.521,0c-5.142,0-11.85,0.95-20.129,2.856c-8.282,1.903-14.799,3.899-19.558,5.996 c-9.517,3.995-19.604,15.605-30.264,34.826C4.863,61.566,0.01,79.271,0.01,96.78c0,5.135,0.333,10.131,0.999,14.989 c0.666,4.853,1.856,10.326,3.571,16.418c1.712,6.09,3.093,10.614,4.137,13.56c1.045,2.948,2.996,8.229,5.852,15.845 c2.852,7.614,4.567,12.275,5.138,13.988c6.661,18.654,14.56,35.307,23.695,49.964c15.03,24.362,35.541,49.539,61.521,75.521 c25.981,25.98,51.153,46.49,75.517,61.526c14.655,9.134,31.314,17.032,49.965,23.698c1.714,0.568,6.375,2.279,13.986,5.141 c7.614,2.854,12.897,4.805,15.845,5.852c2.949,1.048,7.474,2.43,13.559,4.145c6.098,1.715,11.566,2.905,16.419,3.576 c4.856,0.657,9.853,0.996,14.989,0.996c17.508,0,35.214-4.856,53.105-14.562c19.219-10.656,30.826-20.745,34.823-30.269 c2.102-4.754,4.093-11.273,5.996-19.555c1.909-8.278,2.857-14.985,2.857-20.126C401.99,314.814,401.703,312.819,401.129,311.475z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-heading-desc">Need help? talk to an experts</div>
            <h2 class="pbmit-element-title">
                <a href="tel:(+1)1223345642">
                    <span class="pbmit-btn-wrapper">
                        <span class="pbmit-button-render" data-text="(+1)122-334-5642">
                            <span>(+1)122-334-5642</span>
                        </span>
                    </span>
                </a>
            </h2>
        </div>
    </div>
</div>
Icon box Style 7
<div class="pbmit-ihbox-style-7">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 60 60;" xml:space="preserve">
                    <g>
                        <path d="M42.117,43.007c-0.55-0.067-1.046,0.327-1.11,0.876s0.328,1.046,0.876,1.11C52.399,46.231,58,49.567,58,51.5 c0,2.714-10.652,6.5-28,6.5S2,54.214,2,51.5c0-1.933,5.601-5.269,16.117-6.507c0.548-0.064,0.94-0.562,0.876-1.11 c-0.065-0.549-0.561-0.945-1.11-0.876C7.354,44.247,0,47.739,0,51.5C0,55.724,10.305,60,30,60s30-4.276,30-8.5 C60,47.739,52.646,44.247,42.117,43.007z"></path>
                        <path d="M29.823,54.757L45.164,32.6c5.754-7.671,4.922-20.28-1.781-26.982C39.761,1.995,34.945,0,29.823,0 s-9.938,1.995-13.56,5.617c-6.703,6.702-7.535,19.311-1.804,26.952L29.823,54.757z M30,12c3.86,0,7,3.141,7,7s-3.14,7-7,7 s-7-3.141-7-7S26.14,12,30,12z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Address Clinic</h2>
            <div class="pbmit-heading-desc">511 SW 10th Ave 1206, Portland, OR United States Opening Hours: 7.00am - 19.00pm</div>
        </div>
    </div>
</div>
Icon box Style 8
<div class="pbmit-ihbox-style-8">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-heading-wrap">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                    <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                        <g>
                            <path d="m418.247 218.63c-14.687-8.387-32.514-17.389-52.601-25.289l-7.832 9.25c8.413 15.969 13.186 34.14 13.186 53.409 0 25.956-8.648 49.928-23.208 69.196 58.294-19.518 104.372-52.213 125.828-69.202-11.781-9.346-30.958-23.422-55.373-37.364z"></path>
                            <path d="m164.209 186.805c-58.294 19.518-104.372 52.213-125.829 69.202 11.78 9.345 30.956 23.42 55.374 37.363 14.687 8.387 32.514 17.389 52.601 25.289l7.832-9.25c-8.413-15.968-13.187-34.14-13.187-53.409 0-25.956 8.648-49.928 23.209-69.195z"></path>
                            <path d="m224.553 226.307c2.71-3.2 6.636-5.12 10.827-5.294 4.172-.188 8.262 1.414 11.227 4.381l28.477 28.477 45.202-53.384c-15.598-18.039-38.623-29.487-64.286-29.487-46.869 0-85 38.131-85 85 0 9.79 1.684 19.19 4.744 27.95z"></path>
                            <path d="m276.621 290.988c-4.181.184-8.262-1.414-11.227-4.381l-28.477-28.477-45.202 53.384c15.598 18.039 38.622 29.486 64.285 29.486 46.869 0 85-38.131 85-85 0-9.79-1.684-19.19-4.744-27.95l-48.809 57.643c-2.709 3.201-6.636 5.121-10.826 5.295z"></path>
                            <g>
                                <path d="m360.272 107.62c-35.243-17.712-70.325-26.693-104.272-26.693s-69.029 8.98-104.272 26.693c-27.614 13.877-55.413 33.14-82.628 57.252-25.133 22.269-44.974 44.382-57.994 60.134-7.176 8.683-11.106 19.583-11.106 30.848v.146c0-4.176 1.741-8.163 4.804-11.002 1.152-1.068 28.741-26.455 73.324-52.012 41.372-23.715 105.816-51.986 177.872-51.986 25.082 0 59.467 3.598 100.24 17.025l30.205-35.672c-8.727-5.435-17.459-10.353-26.173-14.733z"></path>
                                <path d="m500.894 225.006c-13.02-15.752-32.861-37.865-57.994-60.134-10.432-9.243-20.95-17.766-31.51-25.553l-25.322 29.905c15.277 6.446 31.251 14.274 47.805 23.763 44.583 25.557 72.172 50.943 73.324 52.012 3.062 2.838 4.803 6.825 4.803 11.001v-.146c0-11.265-3.93-22.165-11.106-30.848z"></path>
                                <path d="m508.447 24.694c5.353-6.322 4.568-15.787-1.754-21.141-6.322-5.354-15.787-4.568-21.14 1.754l-99.108 117.046c8.327 5.186 16.648 10.849 24.944 16.966z"></path>
                            </g>
                            <g>
                                <path d="m78.128 319.014c-44.583-25.557-72.172-50.944-73.324-52.012-3.063-2.839-4.804-6.826-4.804-11.002 0 11.265 3.93 22.165 11.107 30.848 13.02 15.752 32.861 37.865 57.994 60.134 10.457 9.265 21.001 17.807 31.587 25.609l25.245-29.814c-15.277-6.446-31.251-14.274-47.805-23.763z"></path>
                                <path d="m507.197 267.002c-1.152 1.068-28.741 26.455-73.324 52.012-41.373 23.716-105.816 51.986-177.873 51.986-25.082 0-59.467-3.598-100.24-17.025l-30.125 35.577c8.7 5.415 17.405 10.316 26.093 14.681 35.243 17.713 70.325 26.693 104.272 26.693s69.029-8.98 104.272-26.693c27.614-13.877 55.413-33.14 82.628-57.252 25.133-22.269 44.974-44.382 57.994-60.134 7.176-8.682 11.106-19.582 11.106-30.847 0 4.176-1.741 8.163-4.803 11.002z"></path>
                                <path d="m3.553 487.307c-5.354 6.322-4.568 15.787 1.754 21.141 2.818 2.387 6.261 3.553 9.686 3.553 4.257 0 8.488-1.803 11.455-5.307l99.188-117.141c-8.328-5.184-16.651-10.846-24.948-16.961z"></path>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
            <h2 class="pbmit-element-title">Cutting-Edge Technology</h2>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-heading-desc">We use the latest diagnostic and advanced treatment  to detect vision problem</div>
        </div>
    </div>
</div>
Icon box Style 9
<article class="pbmit-miconheading-style-9">
    <div class="pbmit-ihbox-style-9">
        <div class="pbmit-ihbox-box">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                    <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                        <g>
                            <g>
                                <circle cx="256" cy="256.073" r="15"/>
                                <path d="m347.826 186.923c14.54 19.259 23.174 43.214 23.174 69.15 0 25.956-8.648 49.928-23.208 69.196 58.294-19.518 104.372-52.213 125.828-69.202-11.781-9.346-30.958-23.422-55.373-37.363-18.901-10.794-42.984-22.615-70.421-31.781z"/>
                                <path d="m38.379 256.08c11.78 9.345 30.956 23.42 55.374 37.363 18.901 10.793 42.985 22.614 70.421 31.78-14.54-19.259-23.174-43.214-23.174-69.15 0-25.956 8.648-49.928 23.208-69.196-58.293 19.518-104.371 52.213-125.829 69.203z"/>
                                <path d="m256 171.073c-46.869 0-85 38.131-85 85s38.131 85 85 85 85-38.131 85-85-38.131-85-85-85zm0 130c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z"/>
                            </g>
                            <g>
                                <path d="m507.196 267.075c-1.152 1.068-28.741 26.455-73.324 52.012-41.372 23.716-105.815 51.986-177.872 51.986-39.772 0-102.916-9.02-177.872-51.986-44.583-25.557-72.172-50.944-73.324-52.012-3.063-2.839-4.804-6.826-4.804-11.002 0 11.265 3.93 22.165 11.107 30.848 13.02 15.752 32.861 37.865 57.994 60.134 27.214 24.112 55.014 43.375 82.628 57.252 35.242 17.713 70.324 26.693 104.271 26.693s69.029-8.98 104.272-26.693c27.614-13.877 55.413-33.14 82.628-57.252 25.133-22.269 44.974-44.382 57.994-60.134 7.176-8.683 11.106-19.583 11.106-30.848 0 4.176-1.741 8.163-4.804 11.002z"/>
                                <path d="m500.893 225.079c-13.02-15.752-32.861-37.865-57.994-60.134-27.214-24.112-55.014-43.375-82.628-57.252-35.242-17.713-70.324-26.693-104.271-26.693s-69.029 8.98-104.272 26.693c-27.614 13.877-55.413 33.14-82.628 57.252-25.133 22.269-44.974 44.382-57.994 60.134-7.176 8.683-11.106 19.583-11.106 30.848v.146c0-4.176 1.741-8.163 4.804-11.002 1.152-1.068 28.741-26.455 73.324-52.012 41.372-23.715 105.815-51.986 177.872-51.986 39.772 0 102.916 9.02 177.872 51.986 44.583 25.557 72.172 50.943 73.324 52.012 3.063 2.839 4.804 6.826 4.804 11.002v-.146c0-11.265-3.93-22.165-11.107-30.848z"/>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
            <div class="pbmit-ihbox-contents">
                <h2 class="pbmit-element-title">
                    Our Mission
                </h2>
                <div class="pbmit-heading-desc">Our mission is to provide exceptional, compassionate, and affordable eye care using advanced technology, aiming to restore and preserve vision for a brighter, clearer future.</div>
            </div>
        </div>
    </div>
</article>
Icon box Style 10
<div class="pbmit-ihbox-style-10">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path d="m156.412 175.001c10.458 10.145 29.247 24.999 49.588 24.999 20.336 0 39.121-14.848 49.587-25-10.466-10.152-29.251-25-49.587-25-20.338 0-39.122 14.849-49.588 25.001zm64.588-.001c0 8.284-6.716 15-15 15s-15-6.716-15-15 6.716-15 15-15 15 6.716 15 15z"></path>
                        <path d="m497 0h-482c-8.284 0-15 6.716-15 15v380c0 8.284 6.716 15 15 15h158.084c-4.561-10.764-7.084-22.593-7.084-35 0-8.672 1.237-17.059 3.536-25h-54.536c-8.284 0-15-6.716-15-15 0-13.785-11.215-25-25-25-8.284 0-15-6.716-15-15v-180c0-8.284 6.716-15 15-15 13.785 0 25-11.215 25-25 0-8.284 6.716-15 15-15h282c8.284 0 15 6.716 15 15 0 13.785 11.215 25 25 25 8.284 0 15 6.716 15 15v180c0 8.284-6.716 15-15 15-13.785 0-25 11.215-25 25 0 8.284-6.716 15-15 15h-54.536c2.3 7.941 3.536 16.328 3.536 25 0 12.407-2.524 24.236-7.084 35h158.084c8.284 0 15-6.716 15-15v-380c0-8.284-6.716-15-15-15z"></path>
                        <path d="m422 282.079v-154.158c-18.291-5.19-32.73-19.63-37.921-37.921h-256.158c-5.19 18.291-19.63 32.73-37.921 37.921v154.158c18.291 5.19 32.73 19.63 37.921 37.921h56.892c16.476-21.276 42.257-35 71.187-35s54.711 13.724 71.187 35h56.892c5.191-18.291 19.63-32.73 37.921-37.921zm-86-162.079h40c8.284 0 15 6.716 15 15s-6.716 15-15 15h-40c-8.284 0-15-6.716-15-15s6.716-15 15-15zm0 60h40c8.284 0 15 6.716 15 15s-6.716 15-15 15h-40c-8.284 0-15-6.716-15-15s6.716-15 15-15zm-211.808 4.251c-4.257-5.433-4.257-13.069 0-18.502 1.464-1.868 36.367-45.749 81.808-45.749s80.344 43.881 81.808 45.749c4.257 5.433 4.257 13.069 0 18.502-1.464 1.868-36.367 45.749-81.808 45.749s-80.344-43.881-81.808-45.749zm131.808 85.749c-8.284 0-15-6.716-15-15s6.716-15 15-15h120c8.284 0 15 6.716 15 15s-6.716 15-15 15z"></path>
                        <path d="m256 315c-33.084 0-60 26.916-60 60s26.916 60 60 60 60-26.916 60-60-26.916-60-60-60zm0 75c-8.284 0-15-6.716-15-15s6.716-15 15-15 15 6.716 15 15-6.716 15-15 15z"></path>
                        <path d="m216 455.606v41.394c0 5.766 3.306 11.021 8.502 13.52 5.197 2.497 11.365 1.797 15.868-1.807l15.63-12.504 15.63 12.504c2.712 2.17 6.027 3.287 9.372 3.287 2.208 0 4.43-.487 6.496-1.48 5.196-2.498 8.502-7.754 8.502-13.52v-41.394c-12.057 6.007-25.639 9.394-40 9.394s-27.943-3.387-40-9.394z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title"> Transparent Cornea Prices </h2>
        </div>
        <div class="pbmit-contents-wraper">
            <h2 class="pbmit-element-title"> Transparent Cornea Prices </h2>
            <div class="pbmit-heading-desc">Get corneal treatment with clear, upfront pricing, no hidden costs, just expert care</div>
        </div>
    </div>
</div>
Icon box Style 11
<article class="pbmit-miconheading-style-11">
    <div class="pbmit-ihbox-style-11">
        <div class="pbmit-ihbox-box">
            <div class="pbmit-ihbox-box-inner">
                <div class="pbmit-ihbox-wraper">
                    <h2 class="pbmit-element-title">
                        Advanced Vision <br>Treatments
                    </h2>
                    <div class="pbmit-ihbox-icon">
                        <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                            <svg aria-hidden="true" class="e-font-icon-svg e-far-clock" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="pbmit-ihbox-contents" style="margin-bottom: -159.562px;">
                    <div class="pbmit-heading-desc">Search our locations to find the one nearest you Get the answers and assurance you deserve with accuracy you can trust.</div>
                    <div class="pbmit-ihbox-btn">
                        <a href="#">
                            <span class="pbmit-btn-wrapper">
                                <span class="pbmit-button-render" data-text="Consultant Doctor">
                                    <span>Consultant Doctor</span>
                                </span>
                            </span>
                            <span class="pbmit-button-icon">
                                <i class="pbmit-base-icon-next-1"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
Icon box Style 12
<div class="pbmit-ihbox-style-12">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-svg">
            <div class="pbmit-ihbox-svg-wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" id="Layer_4" height="512" viewBox="0 0 24 24" width="512">
                    <g>
                        <path d="m21.379 16.913c-1.512-1.278-2.379-3.146-2.379-5.125v-2.788c0-3.519-2.614-6.432-6-6.92v-1.08c0-.553-.448-1-1-1s-1 .447-1 1v1.08c-3.387.488-6 3.401-6 6.92v2.788c0 1.979-.867 3.847-2.388 5.133-.389.333-.612.817-.612 1.329 0 .965.785 1.75 1.75 1.75h16.5c.965 0 1.75-.785 1.75-1.75 0-.512-.223-.996-.621-1.337z"></path>
                        <path d="m12 24c1.811 0 3.326-1.291 3.674-3h-7.348c.348 1.709 1.863 3 3.674 3z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-contents-wrap">
                <h2 class="pbmit-element-title">Subscribe to Newsletter</h2>
            </div>
            <div class="pbmit-heading-desc">Get exclusive news & offers through our ophtical newsletter</div>
        </div>
    </div>
</div>
Icon box Style 13
<article class="pbmit-miconheading-style-13">
    <div class="pbmit-ihbox-style-13">
        <div class="pbmit-ihbox-box">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-text">1</div>
            </div>
            <h2 class="pbmit-element-title">
                Fill in our medical<br> application
            </h2>
            <div class="pbmit-heading-desc">Help us prepare for your visit by completing a quick patient form.</div>
        </div>
    </div>
</article>
Icon box Style 14
<div class="pbmit-ihbox-style-14">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <g>
                            <path d="m392.6 508.1c-27.2-1.8-65.5-11.2-102.9-24.6-131.9-47.2-260.6-173-288-349-4.9-31.3.2-59.9 24-83.2 7.9-7.8 15-16.5 22.8-24.4 29.3-30.1 72-30.9 102.3-1.9 9.6 9.2 19.4 18.2 28.7 27.6 26.6 26.9 27.7 68.3 2.5 96.5-7.3 8.1-15 15.8-22.7 23.5-8.4 8.4-18.9 13.2-30.1 16.8-13.9 4.3-16.5 10.2-10.1 23.4 39.9 83.5 102.3 143.6 187.2 180.3 11.4 4.9 16.6 2.7 21.2-8.6 10-24.7 28.4-42.7 49.5-57.3 23.9-16.5 58.1-12.8 80.8 6.7 12.4 10.7 24.3 22 35.5 33.8 25.3 26.7 25 68.4-.1 95.5-3.5 3.8-7.2 7.6-10.6 11.5-20.5 23.8-46.3 34.9-90 33.4z"></path>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <h2 class="pbmit-element-title">Call Us</h2>
        <div class="pbmit-heading-desc">Call us 24/7 with any emergency or to schedule an appointment & check your health.</div>
    </div>
</div>
Icon box Style 15
<article class="pbmit-miconheading-style-15">
    <div class="pbmit-ihbox pbmit-ihbox-style-15">
        <div class="pbmit-ihbox-box">
            <h2 class="pbmit-element-title">
                2022 : Excellence in ophthalmic care award
            </h2>
            <div class="pbmit-heading-desc">Recognized for outstanding dedication to patient-centered eye care and clinical excellence in diagnostics and treatment.
                Presented by the National Ophthalmology Council during Annual Conference.
            </div>
        </div>
    </div>
</article>
Icon box Style 16
<div class="pbmit-ihbox-style-16">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-text-content">
            <span class="pbmit-ihbox-icon-type-text">1</span>        
            <div class="pbmit-text-content-wrapper">
                <span class="pbmit-element-title">Treatment of eye conditions :</span>            
                <span class="pbmit-heading-desc">Eye care involves diagnosing, and treating various eye diseases, including infections.</span>        
            </div>
        </div>
    </div>
</div>
Icon box Style 17
<div class="pbmit-ihbox-style-17">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-icon-box-wrapper">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                    <svg enable-background="new 0 0 100 100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <path d="m54.75 61.7309799v-2.3699951c0-21.9786606 16.2715454-39.8894348 37.5211639-42.4388428 2.7931672-.3351097 5.2288361 1.917471 5.2288361 4.7306748v.0000095c0 2.4273148-1.8343735 4.4202805-4.2426605 4.7236137-7.4862671.9429264-14.1913986 4.3405972-19.203804 9.2676563-1.7802734 1.7499619-.5009689 4.7270927 1.9953613 4.7170334.0236969-.0000954.0474014-.000145.0710983-.000145 12.2492294 0 21.9682159 10.0996895 21.3522568 22.4834023-.538559 10.8274422-9.4114075 19.7002907-20.2388535 20.2388496-12.3837051.6159593-22.4833984-9.1030272-22.4833984-21.3522567z"></path>
                        <path d="m2.5000021 61.2574081.000001-1.8964233c0-21.9786606 16.2715454-39.8894348 37.5211601-42.4388428 2.7931755-.3351097 5.2288368 1.917471 5.2288368 4.7306748v.0003147c0 2.4272079-1.8342209 4.4199734-4.2423592 4.7236252-7.481739.9434032-14.1888084 4.3410473-19.1987572 9.2678051-1.779623 1.7500687-.500473 4.7271957 1.9954643 4.7165833.025219-.0001068.0504398-.0001602.0756588-.0001602 11.8699932 0 21.3699932 9.5 21.3699932 21.3699951 0 12.0883865-9.8361855 21.7125397-21.996748 21.3711853-11.6399678-.3267442-20.7532557-10.200203-20.7532498-21.8447572z"></path>
                    </svg>
                </div>
            </div>
            <div class="pbmit-heading-desc">“I’m truly impressed with care I received professional, compassionate, and thorough. The facilities were modern, and the doctors took time to explain every detail. Highly recommend this eye hospital for anyone seeking quality vision care.”</div>
        </div>
        <h2 class="pbmit-element-title">Ronald Benson</h2>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-contents-wrap">
            </div>
        </div>
    </div>
</div>
Icon box Style 18
<div class="pbmit-ihbox-style-18">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <g>
                            <path d="m497 42h-30v410c0 8.284-6.716 15-15 15h-270c-8.284 0-15-6.716-15-15v-410h-30c-8.284 0-15 6.716-15 15v440c0 8.284 6.716 15 15 15h360c8.284 0 15-6.716 15-15v-440c0-8.284-6.716-15-15-15z"></path>
                            <path d="m264.5 77h105c8.284 0 15-6.716 15-15v-22c0-22.056-17.944-40-40-40h-55c-22.056 0-40 17.944-40 40v22c0 8.284 6.716 15 15 15z"></path>
                            <path d="m267.412 197.001c10.458 10.145 29.247 24.999 49.588 24.999 20.336 0 39.121-14.848 49.587-25-10.466-10.152-29.251-25-49.587-25-20.338 0-39.122 14.849-49.588 25.001zm64.588-.001c0 8.284-6.716 15-15 15s-15-6.716-15-15 6.716-15 15-15 15 6.716 15 15z"></path>
                            <path d="m437 42h-22.5v20c0 24.813-20.187 45-45 45h-105c-24.813 0-45-20.187-45-45v-20h-22.5v395h240zm-60 350h-120c-8.284 0-15-6.716-15-15s6.716-15 15-15h120c8.284 0 15 6.716 15 15s-6.716 15-15 15zm0-70h-120c-8.284 0-15-6.716-15-15s6.716-15 15-15h120c8.284 0 15 6.716 15 15s-6.716 15-15 15zm21.808-115.749c-1.464 1.868-36.367 45.749-81.808 45.749s-80.344-43.881-81.808-45.749c-4.256-5.433-4.256-13.069 0-18.502 1.464-1.868 36.367-45.749 81.808-45.749s80.344 43.881 81.808 45.749c4.256 5.433 4.256 13.069 0 18.502z"></path>
                            <path d="m0 152h75v260h-75z"></path>
                            <path d="m50 62h-25c-13.807 0-25 11.193-25 25v35h75v-35c0-13.807-11.193-25-25-25z"></path>
                            <path d="m23.22 501.59c1.994 6.203 7.764 10.41 14.28 10.41s12.286-4.207 14.28-10.41l19.154-59.59h-66.868z"></path>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Regular eye checkups prevent major vision problems from developing early.</h2>
        </div>
    </div>
</div>
Icon box Style 19
<div class="pbmit-ihbox-style-19">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <g>
                            <path d="m392.6 508.1c-27.2-1.8-65.5-11.2-102.9-24.6-131.9-47.2-260.6-173-288-349-4.9-31.3.2-59.9 24-83.2 7.9-7.8 15-16.5 22.8-24.4 29.3-30.1 72-30.9 102.3-1.9 9.6 9.2 19.4 18.2 28.7 27.6 26.6 26.9 27.7 68.3 2.5 96.5-7.3 8.1-15 15.8-22.7 23.5-8.4 8.4-18.9 13.2-30.1 16.8-13.9 4.3-16.5 10.2-10.1 23.4 39.9 83.5 102.3 143.6 187.2 180.3 11.4 4.9 16.6 2.7 21.2-8.6 10-24.7 28.4-42.7 49.5-57.3 23.9-16.5 58.1-12.8 80.8 6.7 12.4 10.7 24.3 22 35.5 33.8 25.3 26.7 25 68.4-.1 95.5-3.5 3.8-7.2 7.6-10.6 11.5-20.5 23.8-46.3 34.9-90 33.4z"></path>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-heading-desc">Contact Us 24/7</div>
            <h2 class="pbmit-element-title"><a href="tel:1-888-452-1510"><span class="pbmit-btn-wrapper"><span class="pbmit-button-render" data-text="1-888-452-1510"><span>1-888-452-1510</span></span></span><span class="pbmit-button-icon"><i class="pbmit-base-icon-next-1"></i></span></a></h2>
        </div>
        <a class="pbmit-link" href="tel:1-888-452-1510" title="Go to 1-888-452-1510"></a>
    </div>
</div>
Icon box Style 20
<div class="pbmit-ihbox-style-20">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path d="m101 477c0 19.33 15.67 35 35 35 19.33 0 35-15.67 35-35v-117h-70z"></path>
                        <path d="m171 330h55c8.284 0 15-6.716 15-15v-300c0-8.284-6.716-15-15-15h-180c-8.284 0-15 6.716-15 15v300c0 8.284 6.716 15 15 15h5 50zm1-288c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm-72-216c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm-15 87c0-8.284 6.716-15 15-15s15 6.716 15 15-6.716 15-15 15-15-6.716-15-15z"></path>
                        <path d="m341 477c0 19.33 15.67 35 35 35 19.33 0 35-15.67 35-35v-117h-70z"></path>
                        <path d="m411 330h55c8.284 0 15-6.716 15-15v-300c0-8.284-6.716-15-15-15h-180c-8.284 0-15 6.716-15 15v300c0 8.284 6.716 15 15 15h55zm1-288c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm-72-216c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm0 72c8.284 0 15 6.716 15 15s-6.716 15-15 15-15-6.716-15-15 6.716-15 15-15zm-15 87c0-8.284 6.716-15 15-15s15 6.716 15 15-6.716 15-15 15-15-6.716-15-15z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <h2 class="pbmit-element-title">See our pricing packages</h2>
        <div class="pbmit-heading-desc">Explore our affordable pricing. Call anytime to learn about our affordable packages.</div>
    </div>
</div>
Icon box Style 21
<div class="pbmit-ihbox-style-21">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg aria-hidden="true" class="e-font-icon-svg e-fas-bell" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Get exclusive news & offers through our ophtical newsletter</h2>
        </div>
    </div>
</div>
Icon box Style 22
<div class="pbmit-ihbox-style-22">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22.773 22.773" style="enable-background:new 0 0 22.773 22.773;" xml:space="preserve">
                    <g>
                        <g>
                            <path d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573 c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z"></path>
                            <path d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334    c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0 c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019 c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464 c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648 c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z"></path>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-heading-desc">download on </div>
            <h2 class="pbmit-element-title"><a href="https://www.apple.com/in/app-store/"><span class="pbmit-btn-wrapper"><span class="pbmit-button-render" data-text="App Store"><span>App Store</span></span></span><span class="pbmit-button-icon"><i class="pbmit-base-icon-next-1"></i></span></a></h2>
        </div>
        <a class="pbmit-link" href="https://www.apple.com/in/app-store/" title="Go to App Store"></a>
    </div>
</div>

Service Box

Use the below code to display Service Box style:

Service Box Style 1
<article class="pbmit-service-style-1">
    <div class="pbminfotech-post-item">
        <div class="pbmit-box-content-wrap">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/demo-1/service/service-img-01.jpg" class="img-fluid" alt="">
                </div>
            </div>
            <a class="pbmit-link" href="#" title="Go to Cataract Surgery"></a>
            <div class="pbmit-heading-box">
                <h3 class="pbmit-service-title">
                    <a href="#">Cataract Surgery</a>
                </h3>
            </div>
            <div class="pbmit-content-box">
                <div class="pbmit-service-number">01</div>
                <div class="pbmit-service-icon">
                    <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                        <g>
                            <g>
                                <circle cx="256" cy="256.073" r="15"/>
                                <path d="m347.826 186.923c14.54 19.259 23.174 43.214 23.174 69.15 0 25.956-8.648 49.928-23.208 69.196 58.294-19.518 104.372-52.213 125.828-69.202-11.781-9.346-30.958-23.422-55.373-37.363-18.901-10.794-42.984-22.615-70.421-31.781z"/>
                                <path d="m38.379 256.08c11.78 9.345 30.956 23.42 55.374 37.363 18.901 10.793 42.985 22.614 70.421 31.78-14.54-19.259-23.174-43.214-23.174-69.15 0-25.956 8.648-49.928 23.208-69.196-58.293 19.518-104.371 52.213-125.829 69.203z"/>
                                <path d="m256 171.073c-46.869 0-85 38.131-85 85s38.131 85 85 85 85-38.131 85-85-38.131-85-85-85zm0 130c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z"/>
                            </g>
                            <g>
                                <path d="m507.196 267.075c-1.152 1.068-28.741 26.455-73.324 52.012-41.372 23.716-105.815 51.986-177.872 51.986-39.772 0-102.916-9.02-177.872-51.986-44.583-25.557-72.172-50.944-73.324-52.012-3.063-2.839-4.804-6.826-4.804-11.002 0 11.265 3.93 22.165 11.107 30.848 13.02 15.752 32.861 37.865 57.994 60.134 27.214 24.112 55.014 43.375 82.628 57.252 35.242 17.713 70.324 26.693 104.271 26.693s69.029-8.98 104.272-26.693c27.614-13.877 55.413-33.14 82.628-57.252 25.133-22.269 44.974-44.382 57.994-60.134 7.176-8.683 11.106-19.583 11.106-30.848 0 4.176-1.741 8.163-4.804 11.002z"/>
                                <path d="m500.893 225.079c-13.02-15.752-32.861-37.865-57.994-60.134-27.214-24.112-55.014-43.375-82.628-57.252-35.242-17.713-70.324-26.693-104.271-26.693s-69.029 8.98-104.272 26.693c-27.614 13.877-55.413 33.14-82.628 57.252-25.133 22.269-44.974 44.382-57.994 60.134-7.176 8.683-11.106 19.583-11.106 30.848v.146c0-4.176 1.741-8.163 4.804-11.002 1.152-1.068 28.741-26.455 73.324-52.012 41.372-23.715 105.815-51.986 177.872-51.986 39.772 0 102.916 9.02 177.872 51.986 44.583 25.557 72.172 50.943 73.324 52.012 3.063 2.839 4.804 6.826 4.804 11.002v-.146c0-11.265-3.93-22.165-11.107-30.848z"/>
                            </g>
                        </g>
                    </svg>
                </div>
                <h3 class="pbmit-service-title">
                    <a href="#">Cataract Surgery</a>
                </h3>
                <div class="pbmit-serv-cat">
                    <a href="#" rel="tag">Lens Coating</a>, 
                    <a href="#" rel="tag">Vision Testing</a>
                </div>
                <div class="pbmit-service-description">
                    Common treatments include eye drops, medications, surgeries, and protective lifestyle changes.                    
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 2
<article class="pbmit-service-style-2">
    <div class="pbminfotech-post-item">
        <div class="pbmit-box-content-wrap">
            <a class="pbmit-link" href="#" title="Go to Cataract surgery"></a>
            <div class="pbmit-content-box">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/demo-3/service/service-img-01.jpg" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="pbmit-content-wrap">
                    <div class="pbmit-service-number">01</div>
                    <div class="pbmit-content-box-wrap">
                        <div class="pbmit-service-icon">
                            <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                                <g>
                                    <g>
                                        <circle cx="256" cy="256.073" r="15"/>
                                        <path d="m347.826 186.923c14.54 19.259 23.174 43.214 23.174 69.15 0 25.956-8.648 49.928-23.208 69.196 58.294-19.518 104.372-52.213 125.828-69.202-11.781-9.346-30.958-23.422-55.373-37.363-18.901-10.794-42.984-22.615-70.421-31.781z"/>
                                        <path d="m38.379 256.08c11.78 9.345 30.956 23.42 55.374 37.363 18.901 10.793 42.985 22.614 70.421 31.78-14.54-19.259-23.174-43.214-23.174-69.15 0-25.956 8.648-49.928 23.208-69.196-58.293 19.518-104.371 52.213-125.829 69.203z"/>
                                        <path d="m256 171.073c-46.869 0-85 38.131-85 85s38.131 85 85 85 85-38.131 85-85-38.131-85-85-85zm0 130c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z"/>
                                    </g>
                                    <g>
                                        <path d="m507.196 267.075c-1.152 1.068-28.741 26.455-73.324 52.012-41.372 23.716-105.815 51.986-177.872 51.986-39.772 0-102.916-9.02-177.872-51.986-44.583-25.557-72.172-50.944-73.324-52.012-3.063-2.839-4.804-6.826-4.804-11.002 0 11.265 3.93 22.165 11.107 30.848 13.02 15.752 32.861 37.865 57.994 60.134 27.214 24.112 55.014 43.375 82.628 57.252 35.242 17.713 70.324 26.693 104.271 26.693s69.029-8.98 104.272-26.693c27.614-13.877 55.413-33.14 82.628-57.252 25.133-22.269 44.974-44.382 57.994-60.134 7.176-8.683 11.106-19.583 11.106-30.848 0 4.176-1.741 8.163-4.804 11.002z"/>
                                        <path d="m500.893 225.079c-13.02-15.752-32.861-37.865-57.994-60.134-27.214-24.112-55.014-43.375-82.628-57.252-35.242-17.713-70.324-26.693-104.271-26.693s-69.029 8.98-104.272 26.693c-27.614 13.877-55.413 33.14-82.628 57.252-25.133 22.269-44.974 44.382-57.994 60.134-7.176 8.683-11.106 19.583-11.106 30.848v.146c0-4.176 1.741-8.163 4.804-11.002 1.152-1.068 28.741-26.455 73.324-52.012 41.372-23.715 105.815-51.986 177.872-51.986 39.772 0 102.916 9.02 177.872 51.986 44.583 25.557 72.172 50.943 73.324 52.012 3.063 2.839 4.804 6.826 4.804 11.002v-.146c0-11.265-3.93-22.165-11.107-30.848z"/>
                                    </g>
                                </g>
                            </svg>
                        </div>
                        <h3 class="pbmit-service-title">
                            <a href="#">Cataract surgery</a>
                        </h3>
                        <div class="pbmit-serv-cat">
                            <a href="#" rel="tag">Lens Coating</a>, 
                            <a href="#" rel="tag">Vision Testing</a>
                        </div>
                        <div class="pbmit-service-description">
                            Common treatments include eye drops, medications, surgeries, and protective lifestyle changes.                        
                        </div>
                        <a class="pbmit-service-btn" href="#">
                            <span class="pbmit-btn-wrapper">
                                <span class="pbmit-button-text" data-text="Continue Reading">
                                    <span>Continue Reading</span>
                                </span>
                            </span>
                            <span class="pbmit-button-icon">
                                <i class="pbmit-base-icon-next-1"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

Progress Bar

Use the below code to display Progress Bar style:

<div class="progressbar">
   <span class="progress-label">Biotechnology</span>
      <div class="progress progress-lg progress-percent-bg">
         <div class="progress-bar aos aos-init aos-animate" data-aos="slide-right" data-aos-delay="200" data-aos-duration="1000"
            data-aos-easing="ease-in-out" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
         <span class="progress-percent">80%</span>
      </div>
   </div>
</div>

Team

Use the below code to display Team:

Team Style 1
<article class="pbmit-team-style-1">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-inner">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/demo-2/team/team-01.jpg" class="img-fluid" alt="">
                </div>
            </div>
            <a class="pbmit-link" href="#" title="Go to Dr. Jane Smith"></a>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbmit-box-title-wrap">
                <h3 class="pbmit-team-title">
                    <a href="#">Dr. Jane Smith</a>
                </h3>
                <div class="pbminfotech-box-team-position">Orthoptist</div>
            </div>
            <div class="pbmit-short-description">
                We combine professional eye care with the latest fashion trends in eyewear. Our experienced optometrists and friendly staff are dedicated to helping you vision and find eyewear that suits your style and budget.
                <br>
                <br>
                Routine eye exams are essential for maintaining clear vision & detecting early signs of eye conditions. Our optometrists advanced diagnostic equipment to assess your vision and eye health. We offer specialized eye exams for children to catch and treat vision issues early.            
            </div>
            <div class="pbmit-team-social-links">
                <ul class="pbmit-social-links pbmit-team-social-links">
                    <li class="pbmit-social-li pbmit-social-facebook">
                        <a href="#" title="Facebook" target="_blank">
                            <span><i class="pbmit-base-icon-facebook-logo"></i></span>
                        </a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-twitter">
                        <a href="#" title="Twitter" target="_blank">
                            <span><i class="pbmit-base-icon-twitter-2"></i></span>
                        </a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-instagram">
                        <a href="#" title="Instagram" target="_blank">
                            <span><i class="pbmit-base-icon-instagram"></i></span>
                        </a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-youtube">
                        <a href="#" title="Youtube" target="_blank">
                            <span><i class="pbmit-base-icon-youtube-play"></i></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</article>
Team Style 2
<article class="pbmit-team-style-2">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-inner">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/demo-1/team/team-01.jpg" class="img-fluid" alt="">
                </div>
            </div>
            <a class="pbmit-link" href="#" title="Go to Dr. Jane Smith"></a>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbmit-box-title-wrap">
                <h3 class="pbmit-team-title">
                    <a href="#">Dr. Jane Smith</a>
                </h3>
                <div class="pbminfotech-box-team-position">Orthoptist</div>
            </div>
            <div class="pbmit-team-social-links">
                <ul class="pbmit-social-links pbmit-team-social-links">
                    <li class="pbmit-social-li pbmit-social-facebook">
                        <a href="#" title="Facebook" target="_blank">
                            <span><i class="pbmit-base-icon-facebook-logo"></i></span>
                        </a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-twitter">
                        <a href="#" title="Twitter" target="_blank">
                            <span><i class="pbmit-base-icon-twitter-2"></i></span>
                        </a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-instagram">
                        <a href="#" title="Instagram" target="_blank">
                            <span><i class="pbmit-base-icon-instagram"></i></span>
                        </a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-youtube">
                        <a href="#" title="Youtube" target="_blank">
                            <span><i class="pbmit-base-icon-youtube-play"></i></span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</article>

Testimonial

Use the below code to display Testimonial:

Testimonial Style 1
<article class="pbmit-testimonial-style-1">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="images/demo-2/testimonial/testimonial-img-01.jpg" class="img-fluid" alt="">
            </div>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I love this eye hospital—not only did they offer the care and attention I needed, but the range of advanced treatments and personal service was outstanding. Absolutely worth it. I highly recommend them to anyone looking for expert eye care with a compassionate touch.”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author">
            <div class="pbmit-auther-title-wrapper">
                <h3 class="pbminfotech-box-title">Naomi Violet</h3>
                <div class="pbminfotech-box-star-ratings">
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                </div>
            </div>
            <div class="pbminfotech-testimonial-detail">President, southern behavioural services</div>
        </div>
    </div>
</article>
Testimonial Style 2
<article class="pbmit-testimonial-style-2">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="images/demo-1/testimonial/testimonial-img-01.jpg" class="img-fluid" alt="">
            </div>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I love this eye hospital—not only did they offer the care and attention I needed, but the range of advanced treatments and personal service was outstanding. Absolutely worth it. I highly recommend them to anyone looking for expert eye care with a compassionate touch.”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author">
            <div class="pbmit-auther-title-wrapper">
                <h3 class="pbminfotech-box-title">Naomi Violet</h3>
                <div class="pbminfotech-box-star-ratings">
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                </div>
            </div>
            <div class="pbminfotech-testimonial-detail">President, southern behavioural services</div>
        </div>
    </div>
</article>
Testimonial Style 3
<article class="pbmit-testimonial-style-3">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="images/demo-3/testimonial/testimonial-img-01.jpg" class="img-fluid" alt="">
            </div>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I love this eye hospital—not only did they offer the care and attention I needed, but the range of advanced treatments and personal service was outstanding. Absolutely worth it. I highly recommend them to anyone looking for expert eye care with a compassionate touch.”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author">
            <div class="pbmit-auther-title-wrapper">
                <h3 class="pbminfotech-box-title">Naomi Violet</h3>
                <div class="pbminfotech-box-star-ratings">
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                </div>
            </div>
            <div class="pbminfotech-testimonial-detail">President, southern behavioural services</div>
        </div>
    </div>
</article>

Contact Form Setup

You can make the contact form working easily. You should know some basics for PHP coding and SMTP basic knowledge. Follow the steps given below to send email from the PHP script:

Prerequisites

You need SMTP details to set the script. There are two ways to get SMTP

  1. Get SMTP from your hosting service provider
  2. Get SMTP from your Gmail account

1. Get SMTP from your hosting service provider

If you have server with email server and want to use your domain email address then you can get SMTP login details from your hosting directly. Please contact your hosting service provider and they will send you SMTP login details.


2. Get SMTP from your Gmail account

There are some settings need to be done in your Gmail account to get SMTP details and make it working. Please follow steps given on this page

netcorecloud.com/tutorials/send-an-email-via-gmail-smtp-server-using-php


Setting SMTP details in send.php script file

Open send.php file and edit as described below:

  • Set SMTP details in the file in the SMTP Email Settings section (line number 7 to 18).
  • If you added more fields in the Contact form, then you need to edit Form fields you want to receive in email section (line number 25 to 50).

That's all you need to setup. This will send email with all form data.

If you have any quesiton or confusion, then please create a ticket on our support site so our team will guide you properly on this.

Browser Support

Hectolab supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 10 and above.

How to rate this item

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: https://themeforest.net/downloads and find "Rate this item" below the download button and rate out the theme.

Advance Thanks in Anticipation!

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Scripts



CSS & Fonts



Note For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit the template.