/*--

Author: W3layouts

Author URL: http://w3layouts.com

License: Creative Commons Attribution 3.0 Unported

License URL: http://creativecommons.org/licenses/by/3.0/

--*/

html,

body {

margin: 0;

font-size: 100%;

font-family: 'Dosis', sans-serif;

background: #ececec;

}

html {

scroll-behavior: smooth;

}

body a {

text-decoration: none;

transition: 0.5s all;

-webkit-transition: 0.5s all;

-moz-transition: 0.5s all;

-o-transition: 0.5s all;

-ms-transition: 0.5s all;

font-family: 'Dosis', sans-serif;

}

body img {

max-width: 100%;

}

a:hover {

text-decoration: none;

}

input[type="button"],

input[type="submit"],

input[type="text"],

input[type="email"],

input[type="search"] {

transition: 0.5s all;

-webkit-transition: 0.5s all;

-moz-transition: 0.5s all;

-o-transition: 0.5s all;

-ms-transition: 0.5s all;

}

h1,

h2,

h3,

h4,

h5,

h6 {

margin: 0;

letter-spacing: 1px;

font-family: 'Dosis', sans-serif;

}

p {

margin: 0;

line-height: 1.9em;

color: #777;

font-size: 15px;

letter-spacing: 1px;

font-family: 'Open Sans', sans-serif;

}

ul {

margin: 0;

padding: 0;

list-style-type: none;

}

/* header */

/* CSS Document */

header {

position: absolute;

z-index: 9;

width: 100%;

background: #a8ee9e;

}

.toggle,

[id^=drop] {

display: none;

}

/* Giving a background-color to the nav container. */

nav {

margin:0;

padding: 0;

float: right;

}

.clear {

clear: both;

}

div#logo {

float: left;

}

#logo a {

float: left;

font-size: .8em;

text-transform: capitalize;

display: initial;

margin: 0;

letter-spacing: 1px;

color: #fff;

padding: 3px 0;

font-weight: 600;

}

#logo a span {

color: #fff;

}

/* Since we'll have the "ul li" "float:left"

* we need to add a clear after the container. */

nav:after {

content:"";

display:table;

clear:both;

}

/* Removing padding, margin and "list-style" from the "ul",

* and adding "position:reltive" */

nav ul {

float: right;

padding:0;

margin:0;

list-style: none;

position: relative;

}

/* Positioning the navigation items inline */

nav ul li {

margin: 0px;

display:inline-block;

float: left;

}

/* Styling the links */

nav a {

color: #000000;

text-transform: capitalize;

font-size: 15px;

letter-spacing: 1px;

padding: 10px 10px;

font-weight: 400;

font-family: 'Open Sans', sans-serif;

}

nav ul li ul li:hover { background: #3ba644; }

/* Background color change on Hover */

nav a:hover {

color: #3ba644;

}

nav ul.inner-ul li a:hover {

color: #3ba644;

}

/* Hide Dropdowns by Default

* and giving it a position of absolute */

nav ul ul {

display: none;

position: absolute;

/* has to be the same number as the "line-height" of "nav a" */

top: 30px;

background: #fff;

padding: 10px;

}

/* Display Dropdowns on Hover */

nav ul li:hover > ul {

display:inherit;

}

/* Fisrt Tier Dropdown */

nav ul ul li {

width:170px;

float:none;

display:list-item;

position: relative;

}

nav ul ul li a {

color: #333;

padding: 5px 10px;

display: block;

}

/* Second, Third and more Tiers

* We move the 2nd and 3rd etc tier dropdowns to the left

* by the amount of the width of the first tier.

*/

nav ul ul ul li {

position: relative;

top:-60px;

/* has to be the same number as the "width" of "nav ul ul li" */

left:170px;

}

/* Change ' +' in order to change the Dropdown symbol */

li > a:only-child:after { content: ''; }

/* Media Queries

--------------------------------------------- */

@media all and (max-width : 991px) {

nav {

float: none;

}

div#logo {

float: none;

}

#logo {

display: block;

padding: 0;

width: 100%;

text-align: center;

float: none;

}

.login-icon {

display: inline-block;

padding:10px;

}

nav {

margin: 0;

}

nav a ,nav a:hover{

color: #333;

}

/* Hide the navigation menu by default */

/* Also hide the */

.toggle + a,

.menu {

display: none;

}

/* Stylinf the toggle lable */

.toggle {

display: block;

padding: 7px 15px;

font-size: 17px;

text-decoration: none;

border: none;

float: right;

background-color: #fff;

color: #009688;

color: #00bcd5;

letter-spacing: 1px;

}

.menu .toggle {

float: none;

text-align: center;

margin: auto;

width: 30%;

padding: 5px;

font-weight: normal;

font-size: 15px;

letter-spacing: 1px;

}

.toggle:hover {

color:#333;

background-color: #fff;

}

/* Display Dropdown when clicked on Parent Lable */

[id^=drop]:checked + ul {

display: block;

background: #fff;

padding: 15px 0;

text-align: center;

width: 100%;

}

/* Change menu item's width to 100% */

nav ul li {

display: block;

width: 100%;

padding: 5px 0;

}

nav ul ul .toggle,

nav ul ul a {

padding: 0 40px;

}

nav ul ul ul a {

padding: 0 80px;

}

nav a:hover,

nav ul ul ul a {

background-color: transparent;

}

nav ul li ul li .toggle,

nav ul ul a,

nav ul ul ul a{

padding:14px 20px;

color:#FFF;

font-size:17px;

}

nav ul li ul li .toggle,

nav ul ul a {

background-color: #fff;

}

nav ul ul li a {

font-size: 15px;

}

ul.inner-ul{

padding: 0!important;

}

/* Hide Dropdowns by Default */

nav ul ul {

float: none;

position:static;

color: #ffffff;

/* has to be the same number as the "line-height" of "nav a" */

}

/* Hide menus on hover */

nav ul ul li:hover > ul,

nav ul li:hover > ul {

display: none;

}

/* Fisrt Tier Dropdown */

nav ul ul li {

display: block;

width: 100%;

padding: 0;

}

nav ul ul ul li {

position: static;

/* has to be the same number as the "width" of "nav ul ul li" */

}

}

@media all and (max-width : 330px) {

nav ul li {

display:block;

width: 94%;

}

}

.user span.fa {

}

.login-icon a,.login-icon a:hover {

border-radius: 5px;

border: 2px solid #18a5f1;

padding: 0.4em 1.7em;

color: #020202;

font-weight: 500;

letter-spacing: 0px;

text-transform: capitalize;

display: block;

font-size: 1em;

background: #18a5f1;

box-shadow: 0 0px 45px rgba(0, 0, 0, .2);

}

/*-- //header --*/

/*-- banner --*/

.banner {

background: #fff;

}

.layer1 {

background: rgba(0, 0, 0, 0.4);

}

.banner-text-agile {

padding: 11vw 0 5vw;

box-sizing: border-box;

opacity:1;

}

h3.b-w3ltxt span {

font-weight: 300;

text-shadow: none;

letter-spacing: 1px;

color: #353c4e;

}

h3.b-w3ltxt {

font-size: 4em;

color: #353c4e;

font-weight: 800;

line-height: 75px;

padding-top: 1em;

}

.carousel-item p {

color: #777;

text-transform: capitalize;

font-size: 15px;

line-height: 30px;

}

.btn-banner,.btn-banner1 {

background: #00bcd5;

border-radius: 0px;

color: #fff;

font-size: 16px;

letter-spacing: 1px;

padding: 10px 25px;

display: inline-block;

}

.btn-banner1 {

background: #ed948e;

}

.btn-banner:hover,.btn-banner1:hover{

color: #fff;

}

.carousel-indicators {

position: absolute;

bottom: -53px;

margin-left: 0;

justify-content: flex-start;

z-index: 1;

}

.carousel-indicators li.active {

cursor: pointer;

background: #00bcd4;

}

.carousel-indicators li {

position: relative;

-webkit-box-flex: 0;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

width: 20px;

height: 3px;

margin-right: 3px;

margin-left: 3px;

text-indent: -999px;

background-color: #333;

cursor: pointer;

}

/*-- //banner --*/

/*-- about --*/

.about p {

font-size: 15px;

font-weight: normal;

color: #555;

}

.about-grids h4 {

display: block;

font-size: 20px;

font-weight: 600;

margin-top: 5px;

padding-top: 5px;

color: #eee;

border-top: 1px solid rgba(78, 75, 75, 0.2);

}

.dental img {

max-width: 100%;

padding: 0 1em;

}

.grid p {

color: #ddd;

margin-top: 10px;

line-height: 24px;

font-size: 14px;

}

h4.about-left{

font-size: 32px;

color: #353c4e;

text-transform: capitalize;

}

.grid span.fa{

color: #eee;

}

.about-grids .grid {

display: inline-block;

padding: 20px 25px;

}

.about-box .icon, .ser_icon .icon {

width: 80px;

height: 80px;

border-radius: 50%;

display: block;

line-height: 80px;

text-align: center;

transition: all 1s;

-moz-transition: all 1s;

-webkit-transition: all 1s;

-o-transition: all 1s;

background: #00bcd5;

}

.about-box .icon span.fa{

font-size: 2em;

line-height: 80px;

color: #ffffff;

}

.about-box h4 {

text-transform: uppercase;

font-size: 1em;

margin: 1em 0;

color: #353c4e;

font-weight: 600;

}

/*-- //about --*/

/*-- what we do --*/

.ser1 {

height: 100%;

background: #fff;

box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, .1);

padding: 50px 40px;

border-radius: 5%;

}

.completed {

height:100%;

background: #fff;

box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, .1);

padding: 50px 40px;

border-radius: 5%;

}

/* -- error --*/

.error {

padding: 50px 20px;

}

/* -- //error --*/

/* -- Terms and Conditions --*/

.terms {

padding: 50px 40px;

}

/* -- //Terms and Conditions --*/

.offer-grids h4 {

font-size: 25px;

line-height: 35px;

font-weight: 600;

}

.offer-grids p {

font-size: 15px;

font-weight: normal;

letter-spacing: .5px;

}

.offer-grids h5 {

font-size: 22px;

letter-spacing: 0;

line-height: 32px;

color: #191919;

text-transform: capitalize;

}

/*-- //what we do --*/

/*-- about bottom --*/

.bottom-grids h4 {

font-size: 36px;

color: #353c4e;

line-height: 50px;

text-transform: capitalize;

}

.bottom-grids p {

font-size: 15px;

font-weight: normal;

color: #555;

letter-spacing: .5px;

}

/*-- //about bottom --*/

/*-- feedback --*/

.feedback-top {

position: relative;

background: #00bcd5;

}

.feedback-top span.fa{

color: #fff;

}

/*

.feedback-top:after {

content: '';

position: absolute;

top: 101%;

left: 14%;

width: 0;

height: 0;

border-top: 15px solid #00bcd5;

border-right: 4px solid transparent;

border-left: 12px solid transparent;

transform: rotate(0deg);

}

*/

.feedback-top p {

color: #fff;

font-size: 15px;

letter-spacing: .8px;

margin: 0;

line-height: 2em;

}

.feedback-img {

width: 23%;

margin: .5em 1em 0 1em;

float: left;

}

.feedback-grids {

margin: 1em 0 0;

}

.feedback-img img {

width: 100%;

border-radius: 50%;

}

.feedback-img-info {

float: left;

margin-top: 1em;

}

.feedback-img-info h5 {

color: #353c4e;

font-size: 1.2em;

letter-spacing: 1px;

font-weight: 600;

margin-top: .5em;

}

p.font-italic {

color: #666;

}

/*-- //feedback --*/

/*-- blog --*/

h3.heading,h2.heading {

font-size: 50px;

color: #222;

text-transform: capitalize;

letter-spacing: 2px;

position: relative;

}

h3.heading:after,h2.heading:after {

position: absolute;

content: '';

background: #333;

width: 10%;

height: 2px;

bottom: 0%;

left: 45%;

}

.blog-grids h4 {

font-size: 23px;

text-transform: capitalize;

font-weight: 600;

color: #353c4e;

}

.blog-grids h5 {

font-size: 16px;

font-weight: 600;

color: #999;

letter-spacing: 0.5px;

margin-top: 3em;

}

.blog-grids p {

font-size: 15px;

letter-spacing: .5px;

color: #777;

font-weight: normal;

}

.blog-grids.head h5 {

font-size: 16px;

font-weight: 600;

color: #999;

letter-spacing: 0.5px;

margin-top: 2em;

}

.blog-img1 img,.blog-img2 img {

position: relative;

}

.blog-img1 a {

position: absolute;

right: 2.6%;

top: 1%;

background: #fff;

color: #333;

padding: 8px 15px;

font-size: 16px;

font-weight: 600;

letter-spacing: 1px;

}

.blog-img2 a {

position: absolute;

left: 2.8%;

top: 1%;

background: #fff;

color: #333;

padding: 8px 15px;

font-size: 16px;

font-weight: 600;

letter-spacing: 1px;

}

/*-- //blog --*/

/*-- gallery --*/

.gal-img {

margin-bottom: 1em;

padding-right: 0px;

}

/*-- //gallery --*/

/*-- popup --*/

.pop-overlay {

position: fixed;

top: 0px;

bottom: 0;

left: 0;

right: 0;

background: rgba(0, 0, 0, 0.7);

transition: opacity 0ms;

visibility: hidden;

opacity: 0;

z-index: 99;

}

.pop-overlay:target {

visibility: visible;

opacity: 1;

}

.popup {

background: #fff;

border-radius: 5px;

max-width: 480px;

position: relative;

margin: 8em auto;

padding: 3em 1em;

}

.popup p {

font-size: 15px;

color: #666;

letter-spacing: .5px;

line-height: 30px;

}

.popup h2 {

margin-top: 0;

color: #fff;

}

.popup .close {

position: absolute;

top: 5px;

right: 15px;

transition: all 200ms;

font-size: 30px;

font-weight: bold;

text-decoration: none;

color: #000;

}

.popup .close:hover {

color: #333;

}

/*-- //popup --*/

/*-- modal Call Us --*/

button.btn.btn-primary.submit {

background: #00bcd5;

border: none;

letter-spacing: 1px;

border-radius: 0;

padding: 10px;

margin: 10px 0;

}

/*-- //modal Call Us --*/

/*-- appointment --*/

.appointment{

background: #00bcd5;

}

.appointment h4 {

font-size: 40px;

text-transform: uppercase;

letter-spacing: 5px;

color: #fff;

}

.appointment p{

font-size: 15px;

color: #fff;

text-transform: capitalize;

}

.appointment a {

color: #fff;

font-size: 17px;

letter-spacing: 1px;

font-weight: 500;

padding: 12px 30px;

display: inline-block;

border: 2px solid #fff;

margin-top: 20px;

}

/*-- //appointment --*/

/*-- social icons --*/

a.button-footr span.fa {

font-size: 16px;

color: #666;

}

.social h4 {

font-size: 30px;

text-transform: capitalize;

font-weight: 600;

color: #333;

}

span.fa-facebook{

color: #3b5998;

}

span.fa-twitter{

color: #1da1f2;

}

span.fa-dribbble{

color: #ea4c89;

}

span.fa-pinterest{

color: #bd081c;

}

span.fa-google-plus{

color: #dd4b39;

}

/*-- //social icons --*/

/*-- footer --*/

footer,.copyright{

background: #191919;

}

.copyright {

border-top: 1px solid #555;

}

.footer-grids h4 {

color: #eee;

font-size: 25px;

}

.footer-grids h5 {

color: #666;

}

.footer-grids h5 span{

color: #00bcd5;

}

.footer-grids p,.footer-grids p a,.copyright p ,.copyright p a{

font-size: 15px;

color: #777;

font-weight: normal;

letter-spacing: .5px;

font-family: 'Open Sans', sans-serif;

}

.footer-grids ul li a {

font-size: 15px;

color: #777;

font-weight: normal;

letter-spacing: .5px;

font-family: 'Open Sans', sans-serif;

}

.footer-grids ul li {

list-style-type: none;

}

.footer-grids input[type="email"] {

background: #fff;

box-shadow: none !important;

padding: 12px 15px;

color: #777;

font-size: 14px;

width: 67% !important;

border: none;

letter-spacing: 1px;

outline: none;

}

.footer-grids button.btn {

background: #00bcd5;

color: #fff;

font-size: 14px;

width: 33% !important;

letter-spacing: 1px;

padding: 12px;

display: inline-block;

border:none;

outline: none;

cursor: pointer;

border-radius: 0px;

-webkit-border-radius: 0px;

-moz-border-radius: 0px;

-ms-border-radius: 0px;

-o-border-radius: 0px;

}

/*-- //footer --*/

/*-- About page --*/

.innerpage-banner {

background: url(../images/innerbg.jpg) no-repeat center;

background-size: cover;

min-height: 300px;

}

.inner-page-layer {

background: rgba(0, 0, 0, 0.2);

min-height: 300px;

}

/* team */

.team-member,

.team-member .team-img {

position: relative;

}

.team-member {

overflow: hidden;

}

.team-member,

.team-member .team-img {

position: relative;

}

.team-hover {

position: absolute;

top: 10px;

left: 10px;

bottom: 10px;

right: 10px;

margin: 0;

border: 12px solid rgba(0, 0, 0, 0.1);

background-color: rgba(0, 0, 0, 0.7);

opacity: 0;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.team-member:hover .team-hover .desk {

top: 30%;

}

.team-member:hover .team-hover,

.team-member:hover .team-hover .desk,

.team-member:hover .team-hover .s-link {

opacity: 1;

}

.team-hover .desk {

position: absolute;

top: 0%;

width: 100%;

opacity: 0;

-webkit-transform: translateY(-55%);

-ms-transform: translateY(-55%);

transform: translateY(-55%);

-webkit-transition: all 0.3s 0.2s;

transition: all 0.3s 0.2s;

padding: 0 10px;

}

.desk,

.desk h4,

.team-hover .s-link a {

text-align: center;

color: #eee;

text-transform: capitalize;

}

.desk p {

font-size: 14px;

letter-spacing: .5px;

color: #aaa;