/* 

Theme Name: Laguna Dental Cafe - Medical and Healthcare Html Template
Author: info@lagunadentalcafe.com
Support: info@lagunadentalcafe.com
Description: Creative HTML5 Template
Version: 1

*/

/* 
CSS Index
-----------------------------
1.Theme Default CSS
2.header
3.banner section
4.Appointment section
5.about section
6.services
7.work process
8.team area
9.review section
10.faq section
11.counter area
12.blogs area
13.contact area 
14.footer area
15.about page
16.contact page
17.pricing page
18.not found page
19.appointment page
20.service details page
21.doctors details page
22.terms and condition page
23.responsive

*/

/* 1.Theme Default CSS */

@import url('https://fonts.googleapis.com/css2?family=Edu+SA+Beginner:wght@400..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{
  --primary-color: #6D0934;
  --secondary-color: #00898F;
  --brand-color: #8F274A;
  --font-color: #222;
}
html,body{
  overflow-x: hidden;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Roboto", sans-serif;
  transition: all .2s ease-in-out;
}
/* Preloader Styles */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff; /* Adjust background color as needed */
  z-index: 9999; /* Ensure it's above other content */
  display: flex;
  justify-content: center;
  align-items: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 22px;
  color: #000;
  font-family: "Roboto", sans-serif;
}
p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 22px;
  font-family: "Roboto", sans-serif;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: var(--primary);
}
.container {
  padding-right: 10px;
  padding-left: 10px;
  max-width: 1230px;
}
.container-fluid{
  padding:0;
}
.sticky {
  position:fixed;
  top:0 ;
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0;
  box-shadow: 0 4px 2px -2px #7777777d;
  transition: all 0.3s ease;
  z-index: 9999999;
}
.pb60{
  padding-bottom: 40px;
}
.img-box img {
	aspect-ratio: 1.7777;
	object-fit: cover;
	object-position: center;
	transition: all .3s ease-in;
	width: 100%;
}
/* back-to-top */
#button::after {
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

#button:active {
  background-color: #36454F;
}
#button.show {
  opacity: 1;
  visibility: visible;
}
#button i {
	font-size: 18px;
	line-height: 40px;
	color: #fff;
	animation: uparrow 2s infinite linear;
}
@keyframes uparrow {
  0% {
    transform: translatey(0px);
    transform: rotatey(0);
  }
  50% {
    transform: translatey(-6px);
  }
  100% {
    transform: translatey(0px);
    transform: rotatey(0);
  }
}
/* back to top button */
#button {
  display: inline-block;
  background-color: #005563;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 50px;
  right: 30px;
  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border-radius: 50%;
  border: 4px solid #ffffffab;
}

#button:hover {
  cursor: pointer;
  background-color: #36454F;
}


/* common button */
.common-btn {
	color: #fff;
	background: var(--secondary-color);
	font-weight: 600;
}
.common-btn:hover{
  background-color: var(--brand-color);
  color: #fff;
}
.common-btn:focus{
  box-shadow: none;
}
/* 2.header */
.header-top{
  padding: 5px 0;
  position: relative;
}
.header-top::after {
	position: absolute;
	height: 100%;
	width: 33%;
	background: var(--primary-color);
	content: '';
	top: 0;
	z-index: -1;
	clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 0% 100%);
}
.topInfo a {
	color: #fff;
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
  margin-right: 15px;
}
.topInfo a:hover{
  color: #c6c6c6;
}
.topInfo a i{
  margin-right: 5px;
}
.main-menu {
	background-color: #fff;
	/*border-bottom: 2px solid var(--primary-color);*/
}
.main-menu .navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
	box-shadow: 0 0 0 .25rem #0a989852;
}
.main-menu .navbar-light .navbar-toggler{border: none;}
.nav-bg{
  position: relative;
  padding: 0;
}
.nav-bg::after {
	position: absolute;
	height: 100%;
	width: 82%;
	background: var(--primary-color);
	content: '';
	top: 0;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 5% 100%);
	right: 0;
}
.navbar-light .navbar-brand{padding: 10px 0;}
.logo img{width:240px;}
.sticky .logo img{width:220px;}

.menu-font .nav-item .nav-link {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	padding-block: 21px;
	margin-right: 15px;
	position: relative;
	z-index: 1;
}
.menu-font .nav-item .nav-link:hover{color:#c6c6c6;}
.menu-font .nav-item .nav-link.active{
  color: #fff;
}
.my-nav ul li:hover>ul {
  display: inherit;
  margin: 0;
}
.my-nav .dropdown-menu {
	margin: 0;
	padding: 0;
	border-radius: 0;
}
.my-nav .dropdown-menu li{
  border-bottom: 1px solid #c6c6c6;
  background-color: var(--primary-color);
}
.my-nav .dropdown-menu li:last-child{
  border-bottom: 0;
}
.my-nav .dropdown-item {
	padding: 10px 22px;
  color: #fff;
  font-size: 16px;
}
.my-nav .dropdown-menu li:hover .dropdown-item{
background: var(--secondary-color);
color: #fff;
}
.side-nav a{
  position: relative;
  color: #fff;
  font-size: 18px;
  margin-right: 20px;
  z-index: 1;
  display: flex;
}
.appointment-btn a{
  font-size: 14px;
  margin-right: 0;
  padding:10px 20px;
}
.menu-search {
	color: #fff ;
	cursor: pointer;
	font-size: 16px;
	position: relative;
	top: 0;
    margin-right: 15px;
}
.search_block{
  position:fixed;
  top:0px;
  z-index:99999;
  width:100%;
  background:#eeee;
  padding:10px 0;
}
.search_block.MobileSearchBox {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999;
	width: 100%;
	background: var(--secondary-color);
	padding: 10px 0;
}
.search_logo .form-control:focus {
  box-shadow: none;
  border-color:#ccc;
}
.search_logo input {
  padding: 6px 9px;
  width: calc(100% - 112px);
  border: 2px solid #ddd;
  display: inline-block;
  margin-left: 15px;
}
.search_logo.MobileSearchBox input{
  padding:6px;
  margin-right:auto;
  width:calc(100% - 113px);
  border:2px solid #ddd;
}
a.close-search{
  display:inline-block !important;
}
.search_logo.display-flex a,
.search_logo.display-flex button{
  background: #fff;
  width: 40px;
  margin-left: 4px;
  height: 40px;
  text-align: center;
  line-height: 39px;
  color: #0f4576;
  border: none;
  cursor: pointer;
  border-radius: 50%;}
.search_logo.display-flex a:hover,
.search_logo.display-flex button:hover{
  color:#a71e25;
}
.search_logo.display-flex a:last-child{
  margin-right:0;
}
.show{
  display:inline-block;
}
.Hide{
  display:none;
}
.nav-link-search{
  color: #000;
  font-size: 18px;
  margin-right: 10px;
  transition: all .3s ease;
}
.social-sites a {
	font-size: 16px;
	margin-right: 15px;
	background-color: var(--primary-color);
	height: 30px;
	width: 40px;
	line-height: 30px;
	text-align: center;
	color: #fff;
	clip-path: polygon(0% 0%, 82% 0%, 100% 100%, 18% 100%);
  transition: all .5s ease-in-out;
}
.social-sites a:hover{
    clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);
} 
/* 3.banner section */
.banner-img{
  position: relative;
}
.banner-items {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
.banner-content{
  text-align: start;
}
.banner-content h1 {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px;
	color:#fff;
}
.banner-content h2 {
	font-size: 37px;
	font-weight: 900;
	line-height: 45px;
  margin: 20px 0;color:#fff;
}
.banner-content p {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;color:#fff;
}
/*.banner-content h3 span{*/
/*  color: var(--primary-color);*/
/*}*/
.banner-text {
	z-index: 1;
	color: #000;
}
.banner-img::after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	/*background: #fff;*/
	/*opacity: 0.3;*/
}
.banner-doc {
	position: absolute;
	right: 0;
	width: 50%;
	bottom: 0;
	z-index: 1;
}
/* 4.Appointment section */
.appointment-form {
	padding: 30px 100px 30px 100px;
	position: relative;
	margin-top: -15%;
	z-index: 111;
	background: #4380808a;
	color: #fff;
	border: 3px solid #3475849c;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.appointment-form .form-control{
  background: #008282b5;
  color: #fff;
}
.appointment-form .form-control::placeholder{
  color: #fff;
}

.appointment-form .form-select{
  background: #008282b5;
  color: #fff;
}
.appointment-form .form-control:focus{
  box-shadow: none;
  border-color:var(--primary-color);
}
.appointment-form .form-select:focus{
  box-shadow: none;
  border-color:var(--primary-color);
}
.appointment-form h5 {
	font-size: 14px;
	font-weight: 600;
  color: #fff;
	background-color: #004757;
	display: inline-block;
	padding: 5px 15px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%,-50%);
  clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 5% 100%);
}
.appointment-form .common-btn{
  width: 100%;
}
.app-bg img {
	opacity: 0.3;
  width: 80px;
}
.app-bg{
  position: absolute;
  top: 50%;
  left: 1%;
  transform: translateY(-50%);
  overflow: hidden;
}
/* 5.about section */
.about-area{
  padding: 70px 0;
}
.about-content h3 {
	font-size: 26px;
	color: var(--brand-color);
	line-height: 32px;
	font-weight: 600;
}
.about-content h3 i{
  font-size: 24px;
  margin-right: 15px;
  color: var(--secondary-color);
}
.about-content h2 {
	font-size: 36px;
	line-height: 50px;
	margin: 10px 0;
	font-weight: 600;
}
.about-content h2 span {
	color: var(--primary-color);
}
.about-img{
  position: relative;
  width: 100%;
}
.about-img img{border-radius: 10px;}
.abt-img-1 img{
  border-top-left-radius: 50%;
}
.abt-img-3 img{
  border-bottom-right-radius: 50%;
}
.about-content p{
  color: #222;
  font-size: 18px;
  line-height: 28px;
  margin-bottom: 25px;
  margin-top:25px;
}
.options{
  margin-bottom: 25px;
}
.abt-options .col-md-6:nth-child(3) .options{
  margin-bottom: 0;
}
.abt-options .col-md-6:nth-child(4) .options{
  margin-bottom: 0;
}
.opt-img{
  background-color: var(--primary-color);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  margin-right: 15px;
}
.opt-img img{
  padding: 10px;
}
.options-text h4{
  font-size: 16px;
  color: var(--brand-color);
  line-height: 22px;
  font-weight: 600;
}
.options-text p{
  font-size: 14px;
  color:#222;
  line-height: 22px;
  margin-bottom: 0;
}
/* 6.services */
/* .service-area{
  padding: 60px 0;
  background-color: #ededed;
} */
.service-area{
    background-color: #700E39;
    padding: 70px 0;
    background-image: url("./assets/images/bg/texture-dental-min.png"); 
    background-position: center center;
    background-repeat: repeat;
    background-size: cover;
}
.service-area .sub-head h3 {
	font-size: 30px;
	color: #fff;
	line-height: 38px;
	font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
}
.sub-head h3 {
	font-size: 30px;
	color: var(--brand-color);
	line-height: 38px;
	font-weight: 600;
  text-align: center;
  margin-bottom: 50px;
}
.sub-head h3 i{
  font-size: 30px;
  margin-right: 15px;
  color: var(--secondary-color);
}
.heading h2{
  font-size: 34px;
  line-height: 42px;
  margin-bottom: 50px;
  color: var(--secondary-color);
  text-align: center;
  font-weight: 600;
}


.service-img{
  background: var(--secondary-color);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  line-height: 80px;
  transition: all .3s ease;
}
.service-img img{
  padding: 15px;
}
.single-service:hover .service-img {
  -o-transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg) ;
  -moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.service-wrapper {
	padding: 20px 10px;
	background: #fff;
	border-radius: 20px;
}
.services-container .col-lg-3{width:20% !important;}
/*.services-container .col-lg-3:nth-last-child(-n+4) .single-service .service-wrapper{*/
/*  margin-bottom: 0;*/
/*}*/

.service-wrapper h3{
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  text-align: center;
  padding-top: 15px;
  color: var(--primary-color);
  transition: all .3s ease-in;
  font-family: "Roboto", sans-serif;

}
.service-wrapper:hover h3{
  color: #fff;
}
/*.service-wrapper:hover .service-img{*/
/*  background-color: #fff;*/
/*}*/
.single-service{width:100%;}
.service-wrapper{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  -webkit-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-property: color;
  transition-duration: 0.3s;
  width: 100%;
  border-radius: 20px;
  z-index:1;
  margin-bottom:25px;
}

.sweep-bottom:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width:100%;
  height:0;
  background: #40001c;
  border-radius: 20px;
  transition: all 0.3s ease;
  z-index: -1;
} 

.sweep-bottom:hover:before{
  height:100%;
}

.sweep-bottom:hover, .sweep-bottom:focus, .sweep-bottom:active {
  color: #fff;
  border-radius: 20px;
}



/* 7.work process */
.process-area {
	padding: 60px 0;
	position: relative;
	object-fit: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.proc-img{
  background: var(--secondary-color);
  border-radius: 50%;
  height: 80px;
  width: 80px;
  line-height: 80px;
  transition: all .3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.proc-img img{
  width: 100%;
}
.process-text{
  text-align: center;
}
.process-text h4 {
	font-size: 20px;
	color: var(--primary-color);
	margin: 10px 0;
	font-weight: 600;
	line-height: 30px;
}
.process-text p {
	font-size: 14px;
	color: #222;
	line-height: 22px;
	padding: 0 15px;
}

.process {
	position: relative;
	padding: 20px 40px;
	background-color: #fff;
	border-radius: 50%;
	height: 267px;
	width: 267px;
}
.animate-odd{
  animation: moveup 5s infinite linear;
}
.animate-even{
  animation: movedown 5s infinite linear;
}
.process-text span {
	position: absolute;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 16px;
	text-align: center;
	line-height: 30px;
	font-weight: 800;
	top: 0;
	right: 50px;
}
.one{
  background-color: #4b91ff;
}
.two{
  background-color: #ff4b4b;
}
.three{
  background-color: #cb075a;
}
.four{
  background-color: #00e745;
}
@keyframes moveup {
  0% {
    transform: translatey(0px);
    transform: rotatey(0);
  }
  50% {
    transform: translatey(-20px);
  }
  100% {
    transform: translatey(0px);
    transform: rotatey(0);
  }
}
@keyframes movedown {
  0% {
    transform: translatey(0px);
    transform: rotatey(0);
  }
  50% {
    transform: translatey(20px);
  }
  100% {
    transform: translatey(0px);
    transform: rotatey(0);
  }
}
/* 8.team area */
.team-area{
  padding: 60px 0;
}
.team-area .slick-dots li button::before {
  font-size: 37px;
  line-height: 57px;
}
.mem-img img {
	border-radius: 50%;
	border-right: 10px solid var(--secondary-color);
	border-left: 10px solid var(--secondary-color);
	border-top: 10px solid var(--primary-color);
}


.member{
  background-color: #f4f4f4;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  position: relative;
  margin-bottom: 40px;
}
.member.slick-slide {
  margin: 0 10px;
}
.member.slick-list {
  margin: 0 -30px;
}
.mem-social {
	position: absolute;
	display: flex;
	flex-direction: column;
	padding: 5px;
	top: 16%;
	left: 0%;
	background: var(--primary-color);
	border-radius: 20px;
	transform: translateX(-10px);
  visibility: hidden;
  transition: .3s  ease-in;
  opacity: 0;
}
.member:hover .mem-social{
  transform: translateX(0);
  visibility: visible;
  opacity: 1;
}
.mem-social a{
  margin-bottom: 11px;
  font-size: 16px;
  background-color: #fff;
  color: var(--primary-color);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
}
.mem-social a:last-child{
  margin-bottom: 0;
}
.mem-details {
  text-align: center;
	padding: 10px 0;
}
.mem-details h1{
  font-family: Roboto, sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: var(--primary-color);
  font-weight: 600;
}
.mem-details p {
	font-size: 16px;
	line-height: 26px;
}
.member-wrapper .prev_arrow {
	position: absolute;
	top: -50px;
	transform: translateY(-50%);
	right: 69px;
	z-index: 999;
	color: #fff;
	margin: auto;
	font-size: 20px;
	background-color: var(--primary-color);
	padding: 5px 15px;
	cursor: pointer;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 15% 100%);
}
.member-wrapper .next_arrow {
	position: absolute;
	top: -50px;
	transform: translateY(-50%);
	right: 20px;
	z-index: 999;
	color: #fff;
	margin: auto;
	font-size: 20px;
	background-color: var(--secondary-color);
	padding: 5px 15px;
	cursor: pointer;
	clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 0% 100%);
}
.member-wrapper-2 .col-lg-3.col-md-4:nth-last-child(-n+4) .member{
  margin-bottom: 0;
}


/* 9.review section */
.review-area{
  padding: 70px 0;
  background: #9cc9d454;
  position: relative;
  overflow: hidden;
}
.review-area .slick-dots li button::before {
  font-size: 37px;
  line-height: 57px;
}
.review{
  background-color: #fff;
  padding: 35px;
  border-radius: 20px;
  /*border-left: 1px solid var(--primary-color);*/
  /*border-right: 1px solid var(--primary-color);*/
  /*border-top: 1px solid var(--secondary-color);*/
  /*border-bottom: 1px solid var(--secondary-color);*/
  position: relative;
}
.rev-rate i{
  font-size: 12px;
  margin-right: 5px;
  color: #ff9712;
}
.rev-rate {
	margin-bottom: 15px;
}
.rev-img {
	position: absolute;
	top: 5px;
	right: 15px;
}
.rev-img img{
  border-radius: 50%;width: 70px;
}
.rev-details h4{
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  margin-bottom: 10px;
}
.rev-details p {
	font-size: 14px;
	line-height: 20px;
}
.rev-details .rev-date {
	font-size: 14px;
	line-height: 22px;
	color: #686F86;
	margin-bottom: 0;
  margin-top: 3px;
	letter-spacing: -1%;
	height: unset;
}
.rev-ico {
	position: absolute;
	top: -12px;
	left: 32px;
	background-color: var(--primary-color);
	border-radius: 50%;
	height: 30px;
	width: 30px;
	z-index: 1;
  text-align: center;
  box-shadow: 0px 2px 4px 1px #017369;
}
.rev-ico i{
  font-size: 16px;
  line-height: 30px;
  color: #fff;
}

.review-wrapper .slick-list{
  overflow-y: visible;
  overflow-x: hidden;
}
.review.slick-slide {
  margin: 20px 10px;
}
.review.slick-list {
  margin: -20px -20px;
}
.rev-bg {
	position: absolute;
	top: 2px;
	right: -70px;
  z-index: -1;
}
.rev-bg-2 {
	position: absolute;
	bottom: 2px;
	left: -117px;
	z-index: -1;
}
.rev-bg img {
	width: 375px;
	opacity: 0.1;
  transform: rotate(238deg);
}
.rev-bg-2 img {
	width: 375px;
	opacity: 0.1;
  transform: rotate(398deg);
}
.riv-ico {
	position: absolute;
	top: 2px;
	left: -62px;
}
.riv-ico img{
  width: 178px;
	opacity: 0.1;
}
/* 10.faq section */
.faq-area{
  padding: 60px 0;
}
.ques-wrapper .accordion-item {
  background-color: #fff;
  border: 0;
  margin: 10px 0;
}
/*.ques-wrapper .accordion-item h2{*/
/*  color: #fff;*/
/*}*/
.ques-wrapper .accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  background-color:#f4f4f4;
  color: #222;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
}
.ques-wrapper .accordion-button:focus {
  outline: 0;
  box-shadow: none;
}
.ques-wrapper .accordion-button:not(.collapsed) {
  /*background-color: var(--primary-color);*/
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
  color: var(--secondary);
}
.ques-wrapper .accordion-body {
  padding: 15px 10px;
  background-color: #f7f7f7;
}
.ques-wrapper .accordian-desc p {
  font-size: 16px;
  line-height: 24px;
}
.ques-wrapper .accordion-button::after {
  margin-left: auto;
  font-family: "Font Awesome 5 free";
  content: "\f067";
  background-image: none;
  transition: transform .4s ease-in-out;
  background-color: #fff;
  border-radius: 50%;
  color: var(--primary-color);
  font-size: 13px;
  text-align: center;
  font-weight: 600;
}
.ques-wrapper .accordion-button:not(.collapsed)::after {
  background-image: none;
  margin-left: auto;
  font-family: "Font Awesome 5 free";
  content: "\f068";
  transform: rotate(-180deg);
  font-size: 10px;
font-weight: 600;
}
.member-wrapper.pb60 .slick-dots{
  bottom: 0;
  }
.ques-dec {
  position: relative;
}
.ques-img img {
	width: 450px;
	height: 400px;
	/*clip-path: polygon(0% 0%, 86% 0%, 100% 100%, 14% 100%);*/
}
.cl-zone {
	position: absolute;
	top: -30px;
	border: 10px solid #fff;
	border-radius: 50%;
	left: -54px;
}
.cl-zone p {
	width: 100px;
	text-align: center;
	height: 100px;
  font-size: 15px;
  line-height: 22px;
	background-color: var(--primary-color);
	color: #fff;
  display: flex;
  align-items: center;
  border-radius: 50%;
  padding: 15px;
}
.cl-zone-2 {
	position: absolute;
	bottom: -36px;
	border: 10px solid #fff;
	border-radius: 50%;
	right: -55px;
}
.cl-zone-2 p {
	width: 100px;
	text-align: center;
	height: 100px;
	font-size: 16px;
	line-height: 22px;
	background-color:var(--secondary-color);
	color: #fff;
	display: flex;
	align-items: center;
	border-radius: 50%;
	padding: 15px 0;
}
.para {
	position: absolute;
	top: -18px;
	right: -41px;
	z-index: -1;
}
.para img{
  height: 440px;
  width: 500px;
}
/* 11.counter area */
.counter-area {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  position: relative;
  object-fit: cover;
  padding: 60px 0;
}
.counter-wrapper{
  position: relative;
  z-index: 1;
}
.summary-contents h4{
  font-size: 48px;
  line-height: 56px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--secondary-color);
}
.summary-contents p{
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  color: var(--primary-color);
}
.counter-area::after {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: #fff;
	opacity: 0.6;
}
.summary-icon img{
  width: 100%;
}
.summary-icon {
	background: #fff;
	height: 80px;
	width: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--primary-color);
	border-radius: 50%;
  margin-right: 15px;
  padding: 15px;
}
/* 12.blogs area */
.blog-area{
  padding: 60px 0;
  background-color: #ededed;
}
.blog-contents {
	padding: 0 15px 15px 15px;
	background-color: #f6f6f6;
  position: relative;
}
.blog-details .common-btn {
	width: auto;
	font-size: 14px;
	margin-top: 16px;
  clip-path: none;
}
.blog-details .img-box {
  overflow: hidden;
}

.blog-details img {
  transform: rotate(0) scale(1);
  transition: .3s ease-in-out;
}
.blog-details:hover img {
  -webkit-transform: scale(1.2);
  transform:  scale(1.2);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.blog-details {
	margin-bottom: 25px;
	position: relative;
}
.blog-contents p {
	color: var(--primary);
	font-size: 16px;
	line-height: 22px;
}
.blog-info p a {
  font-size: 14px;
  color: var(--secondary);
  font-weight: 600;
  margin-right: 20px;
}
.blog-info p {
  font-size: 14px;
  color:#fff;
  font-weight: 600;
  padding-left: 10px;
}
.blog-info i {
  color: #fff;
  margin-right: 5px;
}
.blog-info {
	position: absolute;
	top: -18px;
	right: 0;
	background-color: var(--primary-color);
	padding: 4px 20px;
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 6% 100%);
}
.blog-contents h5 {
  padding-top: 20px;
  padding-bottom: 5px;
}
.blog-details:hover h5 a{
  color: var(--secondary-color);
}
.blog-contents h5 a {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}
/* 13.contact area  */
.contact-area{
  background-color: #008a8a91;
  position: relative;
 margin-top: 80px;
}
.con-img img {
	margin-top: -60px;
}
.con-left{
  color: #000;
}
.con-left h3{
  font-size: 34px;
  line-height: 46px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #fff;
}
.con-left p {
	font-size: 20px;
	line-height: 32px;
	font-weight: 600;
  margin-right: 15px;
}
.follow a{
    margin-right: 5px;
    background-color: #fff;
    color: var(--secondary-color);
}
.bar {
  margin-bottom: 20px;
}
.bar:hover img {
  border: 2px solid var(--primary-color);
  scale: 1.05;
 }
 .bar img{
   background-color: #fff;
   border-radius:50%;
   padding: 10px;
   transition: .2s all ease-in-out;
   border: 2px solid #fff;
 }
.bar address{
  margin-bottom: 0;
  font-size: 18px;
  color: #fff;
  line-height: 26px;
  font-weight: 600;
  margin-left: 20px;
}
.bar a{
  margin-bottom: 0;
  font-size: 18px;
  color: #fff;
  line-height: 26px;
  font-weight: 600;
  margin-left: 20px;
  letter-spacing: 1px;
}
.contactbar-info .col-6:last-child .bar{
  margin-bottom: 0;
}

 /* Media Section */
.media-area{background: #fff;padding: 50px 0;}
.media-item{display:block;width:100%;background:#fff;transition:.3s;position:relative;overflow:hidden;margin-bottom:8px;border-radius: 10px;}
.media-item:hover .view-icon{height:100%;opacity:1;}
.media-item img{aspect-ratio: 1.57;width: 100%;object-fit: cover;}
.media-item .view-icon{position:absolute;top:0;left:0;width:100%;height:20%;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;font-size:50px;font-weight:400;color:#fff;opacity:0;transition:all .3s ease-in;}
.gallery-media-title{position:absolute;bottom:0;z-index:3;text-shadow:0 1px 2px rgb(0 0 0 / 60%);right:0;left:0;padding:63px 13px 10px;margin:0 0 0;text-align:left;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0.8) 100%);}
.gallery-media-title h5{font-size:16px;color:#fff;line-height:22px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.fancybox__container{z-index: 99999999999 !important;}
.media-area .heading-title2 h2{
	color: #fff;
}
.media-area .l-more .hero-btn{
	background: var(--Seconday-color);
	color: #fff;
}
.media-area .l-more .hero-btn:hover{
	background: #fff;
	color: var(--primary-color);
}
.fancybox__container{z-index:99999999999;}

/* AboutFC */
.about-wrapper-area{
	padding: 80px 0;
}
.about-banner img{
      border-radius: 50px;
        border: 15px solid var(--brand-color);;
}

.about-content-box h3 {
  font-size: 36px;
  line-height: 46px;
    font-weight: 900;
	color: var(--primary-color);
	margin-bottom: 10px;
}
.about-content-box h5{
	font-size: 16px;
	line-height: 26px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--brand-color);
}
.about-content-box p{font-size:18px;line-height:28px;z-index:9999999;margin:10px 0 10px 0;text-align: justify;}
.about-content-box ul{
	list-style: none;
	padding-left: 0;
}
.about-content-box li{
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}
.about-content-box strong{
	color: var(--Seconday);
}


/* 14.footer area */
.footer-top{
  padding: 60px 0;
  background-color: var(--secondary-color);
}
.flogo img{width:250px;}
.footer-bottom{
  padding: 20px 0;
  background-color: #272727;
}
footer .form-control:focus{
  box-shadow: none;
  border: 1px solid var(--primary-color);
}

.flogo p{
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  margin-top: 10px;
}
.newsletter h3{
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 20px;
  font-weight: 600;
  color: #fff;
}
.newsletter p{
  font-size: 14px;
  line-height: 22px;
  color: #fff;
  margin-bottom: 5px;
}
.footer-area .common-btn {
	width: auto;
margin-top: 12px;
background-color: var(--primary-color);
padding: 5px 20px;
}
.footer-area .common-btn:hover{
  background-color: #fff;
  color: #000;
}
.newsletter a{
  display:block;
  margin-bottom: 5px;
  color: #fff;
}
.newsletter a::before{
  content: '\f5c9';
  font-family: 'Font Awesome 5 free';
  margin-right: 10px;
  transition: .3s all ease-in-out;
  font-weight: 900;
  opacity: 0;
  margin-left: -26px;
}
.newsletter a:hover{
  color: var(--brand-color);
}
.newsletter a:hover::before{
  opacity: 1;
}
.copy a{
  color: #fff;
  font-weight: 600;
}
/*  15.about page  */
.pagehead-area {
	padding: 100px 0;
	position: relative;
	object-fit: cover;
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
}
.pagehead-area::after {
	position: absolute;
	content: '';
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: #fff;
	opacity: 0.4;
}
.page-head{
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-head h1{
  font-size: 40px;
  line-height: 54px;
  font-weight: 600;
  color: var(--secondary-color);
}
.page-head>i{
  margin: 15px 0;
  font-size: 25px;
  color: var(--primary-color);
  opacity: 0.5;
}
.breadcrump a {
	font-size: 20px;
  color: var(--primary-color);
	line-height: 28px;
}
.breadcrump i {
	margin: 0 10px;
  color: var(--primary-color);
	font-size: 20px;
}
.breadcrump p {
	font-size: 20px;
	color: var(--secondary-color);
}
.page-ico-1 {
	position: absolute;
	left: -60px;
	top: -44px;
}
.page-ico-1 img{
  height: 100px;
  width: 100px;
  opacity: 0.2;
}
.page-ico-2 {
	position: absolute;
	right: -70px;
	bottom: -55px;
}
.page-ico-2 img{
  height: 80px;
  width: 80px;
  opacity: 0.2;
}
.mission-area{
  padding: 60px 0;
  position: relative;
  background-color: #efefef;
}
.mission{
  position: relative;
  z-index: 1;
}
.mission-ico {
	position: absolute;
	top: 50%;
  transform: translateY(-50%);
	right: 60px;
}
.mission-ico img{
  width: 150px;
  opacity: 0.1;
}
.vision-ico {
	position: absolute;
	top: 50%;
  transform: translateY(-50%);
	right: 60px;
}
.vision-ico img{
  width: 150px;
  opacity: 0.1;
}
.mission-area::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 53%;
  height: 100%;
  background-color: var(--primary-color);
  z-index: 1;
  clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.mission h3{
  font-size: 30px;
  line-height: 38px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 15px;
}
.mission p{
  font-size: 18px;
  line-height: 28px;
  color: #fff;
}
.vision{
  padding-left: 45px;
}
.vision h3{
  font-size: 30px;
  line-height: 38px;
  color: #000;
  font-weight: 600;
  margin-bottom: 15px;
}
.vision p{
  font-size: 18px;
  line-height: 28px;
  color: #000;
}
/* 16.contact page */
.con-card{
  transition: .5s all ease-in-out;
  padding: 60px 20px;
  width: 100%;
}
.card-1{
  background-color: #B2DFDF;
}
.card-2{
  background-color: #2ba0bbc9;
}

.contact-card .con-card .card-ico {
	height: 50px;
	width: 50px;
	border-radius: 50%;
	padding: 10px;
	transition: .5s all ease-in-out;
	background: #339e9e7d;
}
.con-card address{
  margin-bottom: 0;
  font-size: 18px;
  color:var(--brand-color);
  line-height: 26px;
  font-weight: 600;
  margin-left: 20px;
}
.con-card a{
  font-size: 18px;
  color: var(--brand-color);
  line-height: 26px;
  font-weight: 600;
  margin-left: 20px;
  letter-spacing: 1px;
  word-wrap: anywhere;
}
.contact-card .DPhone a{font-size:32px;}
.con-card a{
  font-size: 18px;
  color: var(--brand-color);
  line-height: 26px;
  font-weight: 600;
  margin-left: 20px;
  letter-spacing: 1px;
  word-wrap: anywhere;
}
.con-card:hover img{
  transform: rotate(360deg);
}
.form-area{
  padding: 60px 0;
}

.con-form .form-control {
	background: #55968730;
	border: 1px solid #7cb9b99c;
	margin-bottom: 26px;
	padding: 10px;
}
/* .con-form .common-btn{
  padding: 6px 15px;
} */
.con-form .form-control:focus{
  box-shadow: none;
  border: 1px solid #7cb9b99c;
}

/* 17.pricing page */
.pricing-area{
  padding: 60px 0;
}
.price-wrapper{
  background-color: #bfeaea78;
  position: relative;
  box-shadow:5px 5px 20px #ebebeb;
}
.price-head{
  padding: 25px 15px;
  background-color: var(--primary-color);
}
.price-head h3{
  font-size: 40px;
  line-height: 58px;
  color: #fff;
  margin-bottom: 15px;
}
.price-head h5{
  font-size: 26px;
  line-height: 38px;
  color: #fff;
}
.price-head h5 span{
  font-size: 16px;
  color: #fff;
}
.price-ico {
	position: absolute;
	top: 32px;
	right: 11px;
	opacity: 0.4;
}
.price-ico img{
  width: 100px;
}
.price-list {
	padding: 30px 20px;
}
.price-list ul{
  margin: 0;
  padding: 0;
}
.price-list ul li {
	list-style: none;
	border-bottom: 1px solid #fff;
	padding: 10px 0;
}
.price-list ul li:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.price-list ul li i{
  float: right;
}
.checked i{
  color: #00e745;
}
.unchecked i{
  color: #e70013;
}
/* 18.not found page */
.not-found-area{
  padding: 100px 0;
  position: relative;
}
.nf-wrapper{
  text-align: center;
}
.nf-wrapper h2{
font-size: 100px;
line-height: 112px;
font-weight: 900;
color: var(--primary-color);
}
.nf-wrapper h4{
  font-size: 40px;
line-height: 52px;
font-weight: 600;
color: var(--secondary-color);
margin: 10px 0;
}
.nf-wrapper p{
  font-size: 20px;
  line-height: 32px;
  color: #333;
}
.nf-wrapper a{
  width: auto;
  font-size: 20px;
  margin-top: 20px;
}
.nf-bg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0.2;
  z-index: -1;
}
.nf-bg img {
	width: 400px;
}
/* 19.appointment page */
.appointment-area{
  padding-top: 60px;padding-bottom: 120px;
}

.book-image-1 img{
  border-top-left-radius: 50%;
  width: 100%;
}
.book-image-2 img{
  border-top-right-radius: 50%;
  width: 100%;
}
.book-image-3 img{
  border-bottom-left-radius: 50%;
  width: 100%;
}
.book-image-4 img{
  border-bottom-right-radius: 50%;
  width: 100%;
}
.book-left{
  position: relative;
}
.book-left::before{
  position: absolute;
  content: '';
  height: 300px;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-color: #0b8fa367;
  border-radius:100px;
  opacity: 0.6;
  
}
.book-left::after {
	position: absolute;
	content: '';
	background-image: url(../images/icon/round.png);
	top:50%;
	left:50%;
	height: 100px;
	width: 100px;
  transform: translate(-50%, -50%) rotate(0deg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
  animation: spin 25s infinite linear;
}
@keyframes spin {
  to{
    transform: translate(-50%, -50%) rotate(360deg); 
  }
 
}
.book-image-1{
  margin-bottom: 23px;
}
.book-image-2{
  margin-bottom: 23px;
}
.book-form .form-control{
  background: #55968730;
  border: 1px solid #7cb9b99c;
  margin-bottom: 25px;
  padding: 13px;
  color: #555;
}
.book-form .form-control:focus{
  box-shadow: none;
  border: 1px solid #7cb9b99c;
}
.book-form .form-select{
  background: #55968730;
  border: 1px solid #7cb9b99c;
  margin-bottom: 25px;
  padding: 13px;
  color: #707070;
  background-image: none;
  position: relative;
}
.book-form .form-select:focus{
  box-shadow: none;
  border: 1px solid #7cb9b99c;
}
.contactbar-info .col-lg-6:last-child .bar {
	margin-bottom: 0;
}
.sd-img {
	margin-bottom: 10px;
}
.sd-img img{
  width: 100%;  border-radius: 15px;
}
/* 20.service details page */
.Sdetails-area{
padding: 60px 0;
}
.Sdetails-left h1{
  font-size: 30px;
  line-height: 38px;
  margin-bottom:15px;
  color: var(--secondary-color);
  font-weight: 600;
}
.Sdetails-left h2{
  font-size: 24px;
  line-height: 30px;
  margin: 10px 0;
  color: var(--brand-color);
  font-weight: 600;
}
.Sdetails-left p{
  font-size: 16px;
  line-height: 28px;
  margin-bottom: 20px;
  color: #555;
}

.services-box{
  padding: 20px 15px;
  border: 2px solid #ededed;
  margin-bottom: 45px;
}
.services-box ul {
  margin: 0;
  padding: 0;
}
.services-box ul li{
  list-style: none;
}
.services-box ul li{
  list-style: none;
}
.services-box a{
  font-size: 18px;
  display: block;
  padding: 12px 0;
  border-bottom: 1px dashed #005563;
  color: var(--primary-color);
}
.services-box a:hover{
  color: var(--brand-color);
}
.services-box ul li:last-child a{
  padding-bottom: 0;
  border-bottom:0;
}
.services-box h4{
  font-size: 22px;
	line-height: 32px;
	color: var(--secondary-color);
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	font-weight: 600;
}
.help-box{
  padding: 20px 10px;
  border: 2px solid #ededed;
}
.help-box .common-btn {
  width: 100%;
}
.help-box h4{
  font-size: 24px;
  line-height: 32px;
  color: var(--secondary-color);
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
}
.help-box p{
  font-size: 15px;
  line-height: 22px;
  color: #555;
  margin: 15px 0;
}
.list-blog{
  padding: 10px 0;
  border-bottom: 1px dashed var(--secondary-color);
}
.list-blog:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.list-blog a{
  border-bottom: 0;
  padding: 0;
}
.services-box .list-blog:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}
.blog-box{
  padding: 20px 10px;
  border: 2px solid #ededed;
  margin-bottom: 45px;
}
.blog-box h4 {
	font-size: 22px;
	line-height: 32px;
	color: var(--secondary-color);
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
	font-weight: 600;
}
.list-blog:hover h5 {
  color: var(--primary-color);
}
 .caption-line{
  background-color: #eee;
  padding: 10px;
  border-left: 2px solid var(--primary-color);
  margin-bottom: 25px;
}
.caption-line p{
  margin-bottom: 0;
  line-height: 30px;
}
.change-blog .common-btn{
  width: inherit;
  margin-top: 35px;
}
.prev {
	clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
	padding-right: 20px;
}
.next {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
	padding-left: 20px;
}
/* 21.doctors details page */
.dd-area{
  padding: 60px 0;
}
.doc-intro{
  margin-bottom: 6px;
}
.doc-intro h2{
  font-size: 30px;
  line-height: 38px;
  margin-bottom: 15px;
  color: var(--secondary-color);
  font-weight: 600;
}
.doc-intro h4 {
	font-size: 16px;
	line-height: 24px;
	color: #fff;
	padding: 0px 25px 2px 7px;
	background-color: var(--primary-color);
	display: inline-block;
  clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%);
}
.doc-intro p{
  font-size: 16px;
  line-height: 26px;
  color: #555;
  margin-top: 15px;
}
.doc-details{
  padding: 15px;
  background-color: #c0f2f273;
  width: 100%;
}
.doc-right h3{
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 15px;
  color: var(--secondary-color);
  font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--secondary-color);  margin-top: 15px;
}
.doc-right p{margin-top: 15px;}
.doc-right ul{
  padding: 0;
  margin: 0;
}
.doc-right ul li{
  list-style: none;
  margin-bottom: 15px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.doc-details ul li::before{
  content: '\f005';
  font-family: 'Font Awesome 5 free';
  margin-right: 10px;
  color: var(--brand-color);
}
.doc-edu{
  padding: 15px;
  background-color: #c0f2f273;
  width: 100%;
  position: relative;
}
.doc-edu ul{
  padding-left: 25px;
}
.doc-edu ul li{
  position: relative;
}
.doc-edu ul li::before {
	content: '\f5da';
	font-family: 'Font Awesome 5 free';
	color:var(--brand-color);
	font-weight: 900;
	left: -27px;
	position: absolute;
  top: 2px;
}
.doc-exp{
  padding: 15px;
  background-color: #c0f2f273;
  width: 100%;
  position: relative;
}
.doc-exp ul{
  padding-left: 25px;
}
.doc-exp ul li{
  position: relative;
}
.doc-exp ul li::before {
	content: '\f0f1';
	font-family: 'Font Awesome 5 free';
	color: var(--brand-color);
	font-weight: 900;
	left: -27px;
	position: absolute;
  top: 2px;
}
.doc-reward{
  padding: 15px;
  background-color: #c0f2f273;
  width: 100%;
  position: relative;
}
.doc-reward ul{
  padding-left: 25px;
}
.doc-reward ul li{
  position: relative;
}
.doc-reward ul li::before {
	content: '\f5a2';
	font-family: 'Font Awesome 5 free';
	color: var(--brand-color);
	font-weight: 900;
	left: -27px;
	position: absolute;
  top: 2px;
}
.doctor-left .member{
  margin-bottom: 10px;
}


/* 22.terms and condition page */
.terms-wrapper{
  padding: 60px 0;
}
.terms-wrapper h3 {
	font-size: 24px;
	line-height: 32px;
	margin: 10px 0;
	font-weight: 600;
}
.terms-wrapper p{
  font-size: 16px;
  line-height: 26px;
  margin-bottom: 20px;
  color: #555;
}
.terms-wrapper ol li{
  font-size: 15px;
  line-height: 24px;
  margin-bottom: 10px;
  color: #555;
}



/*============= 23.responsive =============*/

/* xxl */
@media (min-width:2201px) and (max-width:5000px){
  .nav-bg::after {
    width: 58%;
  }
  .header-top::after {
    width: 48%;
  }
}
/* xxl */
@media (min-width:2201px) and (max-width:3200px){
  .nav-bg::after {
    width: 62%;
  }
  .header-top::after {
    width: 44%;
  }
}
/* xxl */
@media (min-width:1501px) and (max-width:2200px){
  .nav-bg::after {
    width: 67%;
  }
  .header-top::after {
    width: 41%;
  }
}
/* XL Device :1200px. */
@media (min-width:1200px) and (max-width:1500px){
  .nav-bg::after {
    width: 72%;
  }
  .header-top::after {
    width: 35%;
  }
}
/* LG Device :992px. */
@media (min-width:992px) and (max-width:1200px){
}
 
/* MD Device :768px. */
@media (min-width:768px) and (max-width:991px){
  .nav-bg::after {
    display: none;
  }
  .header-top::after {
    width: 39%;
  }
  .header-top{
    display: none;
  }
  .logo {
    position: absolute;
    /*top: 38px;*/
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 4px 0;
  }
  .my-nav{
    padding: 15px 0;
  }
  .my-nav ul> li:first-child .nav-link{
    margin-top: 20px;
  }
  .menu-font .nav-item .nav-link{
    color: var(--primary-color);
  }
  .side-nav{
    display: none;
  }
  .menu-search{
    color: var(--primary-color);
  }
  .side-nav-2 {
    position: absolute;
    right: 16px;
    top: 19px;
  }
  .side-nav-2 a{
    color: var(--primary-color);
    margin-right: 15px;
  }
  .side-nav-2 .common-btn{
    color: #fff;
  }
  .appointment-form {
    padding: 30px 18px 30px 18px;
    margin-top: unset;
  }
  .banner-doc {
    position: absolute;
    width: 50%;
    right: 0;
    bottom: 0;
    height: unset;
    z-index: 1;
  }
  .banner-content h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
  }
  .banner-content h2 {
    font-size: 35px;
    line-height: 48px;
    margin: 10px 0;
  }
  .banner-content p {
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
  }
  .abt-options{
    display: none;
  }
  .about-content h3 {
    font-size: 20px;
    line-height: 26px;
  }
  .about-content h2 {
    font-size: 26px;
    line-height: 35px;
  }
  .about-content p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
  }
  .process-area {
    background-position: top 0px left 0;
  }
  .process{
    margin-bottom: 35px;
  }
  /*.services-container .col-lg-3:nth-last-child(-n+4) .single-service .service-wrapper{*/
  /*  margin-bottom: 25px;*/
  /*}*/
  .ques-wrapper{
    margin-top: 50px;
  }
  .ques-dec{
    margin-top: 60px;
  }
  .con-img{
    display: none;
  }
  .contact-area{
    padding: 60px 0;
  }
  .con-left{
    text-align: center;
  }
  .page-ico-1{
    left: 0;
  }
  .page-ico-2{
    right: 0;
  }
  .price-wrapper{
    margin-bottom: 25px;
  }
  .services-container .col-lg-3{width:50% !important;}
  /* .book-left::after {
    top: 37%;
    left: 38%;
  } */
}
/* Extra small Device. */
@media (max-width:767px){
  .my-nav ul> li:first-child .nav-link{
    margin-top: 20px;
  }
  .side-nav-2 {
    top: 23px;
  }
  .header-top{
    display: none;
  }
  .nav-bg::after {
    display: none;
  }
  .logo {
    position: absolute;
    /*top: 38px;*/
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 4px 0;
  }
  .my-nav{
    padding: 15px 0;
  }
  .menu-font .nav-item .nav-link {
    color: var(--primary-color);
    padding: 10px 0;
    margin: 10px 0;
  }
  .side-nav{
    display: none;
  }
  .menu-search{
    color: var(--primary-color);
  }
  .side-nav-2 {
    position: absolute;
    right: 16px;
  }
  .side-nav-2 a{
    color: var(--primary-color);
    margin-right: 15px;
  }
  .side-nav-2 .common-btn{
    color: #fff;
  }
  .appointment-form {
    padding: 30px 18px 30px 18px;
    margin-top: unset;
  }
  .banner-content h3 {
    font-size: 16px;
    font-weight: 600;
    line-height: 14px;
  }
  .banner-content h1 {
    font-size: 25px;
    font-weight: 900;
    line-height: 34px;
    margin: 20px 0;
  }
  .banner-content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
  }
  .appointment-btn{
    display: none;
  }
  .about-content h3{
    text-align: center;
    margin-top: 25px;
  }
  .about-content h2 {
    font-size: 30px;
    line-height: 44px;
    font-weight: 600;
    text-align: center;
  }
  .about-content > p {
    color: #222;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 25px;
    text-align: center;
  }
  .banner-text{
    width: auto;
  }
  .mission-area::before {
    display: none;
  }
  .vision{
    padding-left: 0;
    margin-top: 30px;
  }
  .vision-ico {
    position: absolute;
    top: 60%;
    transform: translateY(-15%);
    right: 0;
  }
  .mission-ico {
    right: 0;
  }
  .mission-ico img{
    opacity: 0.8;
  }
  .mission-ico{
    z-index: -1;
  }
  .mission h3, .mission p{
    color: #000;
    text-align: center;
  }
  .vision {
    padding-left: 0;
    margin-top: 30px;
    text-align: center;
  }
  .newsletter h3{
    margin-top: 40px;
  }
  .page-ico-1{
    left: 0;
  }
  .page-ico-2 {
    right: 0;
  }

  .con-card{
    margin-bottom: 10px;
  }
  .contact-card {
    margin-top: 10px;
  }
  .con-form {
    margin-top: 30px;
  }
  .price-wrapper{
    margin-bottom: 35px;
  }
  .ques-wrapper .accordion-button{
    font-size: 16px;
  }

  .book-left{
    margin-bottom: 40px;
  }
  .sd-right{
    margin-top: 40px;
  }
  
.newsletter a::before{
  display: none;
}
/*.services-container .col-lg-3:nth-last-child(-n+4) .single-service .service-wrapper{*/
/*  margin-bottom: 25px;*/
/*}*/
.my-nav .dropdown-menu {
  max-height: 200px; /* Adjust height as needed */
    overflow-y: auto;
}
.services-container .col-lg-3{width:50% !important;}
.logo img {
    width: 190px;
}
.service-wrapper h3 {
    font-size: 16px;
}
.service-wrapper {
    padding: 20px 5px;
}
}
/* sm device */
@media (min-width:601px) and (max-width:767px){
  .banner-text{
    width: 50%;
  }
  .process-area{
    background-position: top 0 left 0;
  }
  .process-container .col-12:nth-child(1) .process{
    margin-bottom: 35px;
  }
  .process-container .col-12:nth-child(2) .process{
    margin-bottom: 65px;
  }
  .process-container .col-12:nth-child(3) .process{
    margin-bottom: 35px;
  }
  .process-container .col-12:nth-child(4) .process{
    margin-bottom: 0;
  }
  .member-wrapper .prev_arrow {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 0;
    right: auto;
  }
  .member-wrapper .next_arrow {
    position: absolute;
    top: 0;
    transform: translateY(-52%);
    right: 0;
  }
  .ques-wrapper {
    margin-top: 55px;
  }
  .goal-wrapper{
    margin-bottom: 25px;
  }
  .con-left {
    color: #000;
    text-align: center;
  }
  .contact-area{
    padding: 60px 0;
  }
  .follow a {
    font-size: 15px;
    margin-right: 6px;
  }
 .follow{
  margin-bottom: 25px;
 }
 .service-wrapper h3 {
    font-size: 16px;
}
}
/* xs device */
@media only screen and (max-width: 600px) {
 
  .banner-doc{
    display: none;
  }
  .banner-content h1 {
    font-size: 24px;
    font-weight: 900;
    line-height: 40px;
    margin: 5px 0;
  }
  .banner-content{
    text-align: center;
  }
  .banner-content p {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }
  .abt-options{
    display: none;
  }
  .process-area{
    background-position: top 0 left 0;
  }
  .process-container .col-12:nth-child(1) .process{
    margin-bottom: 35px;
  }
  .process-container .col-12:nth-child(2) .process{
    margin-bottom: 65px;
  }
  .process-container .col-12:nth-child(3) .process{
    margin-bottom: 35px;
  }
  .process-container .col-12:nth-child(4) .process{
    margin-bottom: 0;
  }
  .member-wrapper .prev_arrow {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    left: 0;
    right: auto;
  }
  .member-wrapper .next_arrow {
    position: absolute;
    top: 0;
    transform: translateY(-52%);
    right: 0;
  }
  .ques-dec{
    display: none;
  }
  .goal-wrapper {
    margin-bottom: 30px;
  }
  .con-left {
    color: #000;
    text-align: center;
  }
  .contact-area{
    padding: 60px 0;
  }
  .follow a {
    font-size: 15px;
    margin-right: 6px;
  }
 .follow{
  margin-bottom: 25px;
 }
 .newsletter h3{
  margin-top: 25px;
 }
 .blog-info{
  padding: 4px 8px;
 }
.book-left::before {
	height: 200px;
	width: 200px;
	top: 50%;
	left: 50%;
	border-radius: 60px;
}
}

@media screen and (max-width:568px){
.container{width:100%;}
.banner-content h1 {
	font-size: 16px;
	line-height: 22px;
}
.banner-content h2 {
	font-size: 22px;
	line-height: 30px;
	  margin: 10px 0;
}
.banner-content p{  display: none;}
.about-content > p {text-align: justify;}
.about-content-box h3{  margin-top: 15px;}
.about-content-box p {text-align: justify;}
.about-content-box .appointment-btn{display: inline-block;}
.logo img {width: 175px;}
.sticky .logo img {
	width: 175px;
}
.menu-font .nav-item .nav-link {margin: 0;}
.member{  margin-bottom: 15px !important;}
.menu-search{margin-right:0;}
.side-nav-2 a{margin-right:0;}
.page-head h1{font-size: 24px;}


}
@media screen and (max-width:480px){
.container{width:100%;}


}
@media screen and (max-width:414px){
    .container{width:100%;}
}
@media screen and (max-width:375px){
    .container{width:100%;}
    .service-wrapper h3 {
    font-size: 15px;
}
}
@media screen and (max-width:360px){
    .container{width:100%;}
}
@media screen and (max-width:320px){
    .container{width:100%;}
}