/*import the font offline*/
@font-face
{
	font-family: lato-font;
	src:url('../fonts/Lato-font.ttf');  
}
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: lato-font;
	letter-spacing: 0.4px;
	list-style-type: none;
	text-decoration: none;
}
html
{
	overflow-x: hidden;
	scroll-behavior: smooth;
}
body
{
	background: white;
}

::-webkit-scrollbar
{
	width:12px;
}
::-webkit-scrollbar-thumb
{
	background:linear-gradient(blueviolet,rgba(155, 181, 232,1));
	border-radius:5px;
}
h3
{
	font-weight: bold;
	font-size: 30px;
}
img
{
	width:800px;
	object-fit: cover;
}
header
{
	width: 100%;
	padding: 5px;
	position: fixed;
	top:0;
	left: 0;
	z-index: 100;
/*	background: rgba(23, 100, 80, 1.0);*/
/*	color: rgba(227, 200, 3, 1.0);*/	
	color: black;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	background: white;
	animation: headeranim 1s ease;
}
@keyframes headeranim
{
	from
	{
		opacity: 0;
		transform: translateY(-100px);
	}
	to
	{
		opacity: 1;
		transform: translateY(0);

	}
}
.navbar
{
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.navbar .logo img
{
	width: 100px;
	object-fit: cover;
	transform: scale(1.1);
	margin: 10px 0;
	cursor: pointer;
}
.navbar a
{
	color: black;
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
	transition: 0.2s ease;
	border-radius: 5px;
	padding: 10px 14px;
}
.navbar .menu ul li
{
	cursor: pointer;
	transition: 0.2s ease;
	border-radius: 5px;
}
.navbar .menu ul a.active
{
	background:rgba(155, 181, 232,0.7);
	color: darkblue;
}
.navbar .contact 
{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 4px;
	padding:8px 15px;
	border:2px solid rgba(155, 181, 232,0.7);
	border-radius: 5px;
}
.navbar .contact i
{
	font-size: 16px;
}
.menu-tiles
{
	display: none;
	font-size: 25px;
}

/*container section css code starts*/
	.container
	{
		width: 100%;
		position: relative;
	}
	.container .container-overlay
	{
		position: absolute;
		top:-80px;
		left: -30%;
		background: royalblue;
		opacity: 0.15;
		width: 70%;
		height: 100%;
		border-radius:80% 20% 39% 61% / 44% 24% 76% 56%;
		pointer-events: none;
		z-index: 100;
		z-index: -1;
		animation: containeranim2 5s linear infinite;
		transform: rotate(50deg)!important;
	}
	@keyframes containeranim2
	{
		0%
		{
			transform: translateX(-10px);
		}
		50%
		{
			transform: translateX(10px);
		}
		100%
		{
			transform: translateX(-10px);
		}
	}
	.container-cols
	{
		display: flex;
		align-items: center;
		justify-content:center;
		width: 90%;
		margin: 60px auto 15px auto;
		column-gap: 40px;
		padding: 10px;
	}
	.container-left
	{
		flex-basis: 40%;
		text-align: left;
		margin-left: 100px;
		animation: containerleft 1s linear;
/*		animation-duration: 1s;*/
	}
	@keyframes containerleft
	{
		from
		{
			transform: translateX(-30px);
			opacity: 0;
		}
		to
		{
			opacity: 1;
			transform: translateX(0);
			
		}
	}
	.container-left h2
	{
		font-size: 20px;
		margin-bottom: 5px;
	}
	.container-left h3
	{
		font-size: 60px;
		margin-bottom: 10px;
		-webkit-text-stroke:1px;
	}
	.Appointment-btn
	{
		font-size: 20px;
		padding: 20px 35px;
		border-radius: 5px;
		background:rgba(155, 181, 232,0.7);
		margin: 18px 0;
		cursor: pointer;
		border:none;
		transition: 0.3s ease;
		box-shadow: 0 0 20px rgba(255,255,255, 0.7);
	}
	.Appointment-btn:hover
	{
		background: black;
		color: white;
	}
	.container-right
	{
		flex-basis: 57%;
		animation: containerright 1s linear;

	}
	@keyframes containerright
	{
		from
		{
			transform: translateX(30px);
			opacity: 0;
		}
		to
		{
			opacity: 1;
			transform: translateX(0);
			
		}
	}
	.container-right img
	{
		width: 100%;
		object-fit: cover;
		animation: containeranim 3s linear infinite;
	}
	@keyframes containeranim
	{
		0%
		{
			transform: translateY(-15px);
		}
		50%
		{
			transform: translateY(15px);
		}
		100%
		{
			transform: translateY(-15px);
		}
	}
/*container section css code ends*/

/*Why choose us css code starts*/
	.Why-choose-us
	{
		background:rgba(155, 181, 232,0.4);
		padding: 15px;
		width: 100%;
		margin-top: 80px;
		margin-bottom: 50px;
	}
	.choose-cols
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80%;
		margin: 5px auto;
		padding: 15px;
		column-gap: 70px;
	}
	.choose-left
	{
		flex-basis: 40%;
		height: 100%;
	}
	.choose-left img
	{
		border-radius: 5px;
		width: 100%;
		height:350px;
		object-fit: cover;
	}

	.choose-right
	{
		flex-basis: 40%;
		line-height: 1.6;
	}
	.choose-right h1
	{
		margin-bottom: 15px;
		position: relative;
	}
	.choose-right h1::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:5px;
		width: 65px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: royalblue;
	}
	.choose-right p
	{
		margin-bottom: 20px;
		margin-left: 5px;
	}
	.choose-right li
	{
		position: relative;
		margin-bottom: 4px;
		margin-left: 40px;
	}
	.choose-right li::before
	{
		content: "";
		position: absolute;
		top:50%;
		left: -20px;
		transform: translateY(-50%);
		width: 10px;
		height: 10px;
		background: darkorange;
		border-radius: 50%;
	}
	.swiper
	{
		width: 50%;
	}
	.choose-treatment
	{
		width: 80%;
		background: white;
		padding: 15px;
		border-radius: 15px;
		margin:80px auto 50px auto;
		display: flex;
		align-items: center;
		justify-content: center;
		column-gap: 40px;
		row-gap: 20px;
	}
	.Treatment-left
	{
		flex-basis: 35%;
		line-height: 1.6;
	}
	.Treatment-left h4
	{
		font-size: 18px;
		margin-top: 15px;
		margin-bottom: 10px;
		position: relative;
		padding-bottom: 5px;
	}
	.Treatment-left h4::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:0;
		width: 65px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: royalblue;
	}
	.Treatment-left h2
	{
		font-size: 30px;
		width: 400px;
		margin-bottom: 4px;
		padding-bottom: 10px;
		border-bottom:1px solid lightgray;
	}
	.Treatment-left p
	{
		margin-top: 20px;
		width: 400px;
		margin-bottom: 20px;
	}
	.Treatment-right
	{
		flex-basis: 55%;
		width: 100%;
		display: flex;
		justify-content: left;
		column-gap: 20px;
		row-gap: 20px;
		flex-wrap: wrap;
	}
	.treatment-tiles
	{
		background:rgba(155, 181, 232,0.4);
		color:black;
		display: flex;
		flex-basis: 48%;
		align-items: center;
		justify-content: space-between;
		column-gap: 7px;
		padding: 12px 20px;
		border-radius: 5px;
		box-shadow: 5px 5px 5px rgba(0,0,10,0.2);
		cursor: pointer;
		transition: 0.3s ease;
	}
	.treatment-tiles:hover
	{
		transform: translateY(-5px);
	}
	.treatment-tiles-left
	{
		display: flex;
		align-items: center;
		justify-content: left;
		column-gap: 12px;
	}
	.treatment-tiles-left h3
	{
		font-size: 17px;
	}
	.treatment-tiles-left img
	{
		width: 47px;
		object-fit: cover;
	}
	.treatment-tiles-right i
	{
		font-size: 30px;
		color:royalblue;
		transform: rotate(-45deg);
	}
	@media screen and (max-width:1386px)
	{
		.choose-cols
		{
			width: 95%;
		}
		.choose-treatment
		{
			width: 95%;
		}
		.container-cols
		{
			width: 100%;
		}
	}
	@media screen and (max-width:1172px)
	{
		.container-left
		{
			flex-basis: 50%;
		}
		.container-right
		{
			flex-basis: 55%;
		}
		.choose-right p,li
		{
			font-size: 15px;
		}
		.Treatment-left h4
		{
			font-size: 17px;
		}
		.Treatment-left h2
		{
			font-size: 26px;
		}
		.Treatment-left p
		{
			font-size: 15px;
		}
		.choose-treatment
		{
			width: 100%;
		}
		.choose-cols
		{
			width: 100%;
			column-gap: 40px;
		}
		.choose-left
		{
			flex-basis: 50%;
		}
		.choose-right
		{
			flex-basis: 50%;
		}
	}
	@media screen and (max-width:1108px)
	{
		.container
		{
			padding-top: 80px;
		}
		.container-left h3
		{
			font-size: 40px;
		}
		.choose-treatment
		{
			flex-wrap: wrap;
		}
		.Treatment-left,.Treatment-right
		{
			flex-basis: 100%;
		}
		.Treatment-left h2 
		{
			width: 100%;
		}
		.Treatment-left p
		{
			width: 100%;
		}
		.Treatment-right
		{
			margin-bottom: 20px;
		}
	}
	@media screen and (max-width:955px)
	{
		.menu-tiles
		{
			display: block;
			padding: 15px;
			border-radius: 5px;
			cursor: pointer;
			transition: 0.3s ease;
		}
		.menu-tiles i
		{
			border-radius: 5px;
			padding: 10px;
			transition: 0.4s ease;
		}
		.menu-tiles.active i
		{
			background: royalblue;		
			color: white;
		}
		.menu
		{
			position:absolute;
			top:85px;
			text-align: center;
			right:15px;
			width: 95%;
			box-shadow: 0 0 15px rgba(0,0,0,0.4);
			border-radius: 5px;
			height: 0;
			overflow:hidden;
			transition: 0.5s ease;
			padding: 15px;
			padding:0;
			opacity: 0;
			backdrop-filter: blur(15px)

		}

		.menu.active
		{
			height:360px;
			padding:15px;
			opacity: 1;
		}
		.navbar a
		{
			display: block!important;
			margin: 6px 0;
		}
		.container-cols
		{
			flex-wrap: wrap;
		}
		.container-left, .container-right
		{
			flex-basis: 100%;
		}

	}
	@media screen and (max-width:812px)
	{
		.choose-cols
		{
			width: 100%;
			flex-wrap: wrap;
			row-gap: 20px;
		}
		.choose-left, .choose-right
		{
			flex-basis: 100%;
		}
		.swiper
		{
			width: 100%;
		}
	}
	@media screen and (max-width:712px)
	{
		.container-left
		{
			margin-left: 15px;
		}
		.container-left h3
		{
			font-size: 35px;
		}
	}
	@media screen and (max-width:604px)
	{
		.treatment-tiles
		{
			flex-basis: 100%;
		}
		.Appointment-btn
		{
			padding: 15px 20px;
		}
	}
	@media screen and (max-width:415px)
	{
		.container-left h2
		{
			font-size: 18px;
			margin-bottom: 10px;
		}
		.container-left h3
		{
			font-size: 30px;
		}
		.Appointment-btn
		{
			font-size: 18px;
		}
		.navbar .contact
		{
			padding: 10px;
			margin-left: 10px!important;
		}
		.navbar .logo img
		{
			width: 90px;
			object-fit: cover;
		}
		.appointment-right h2
		{
			font-size: 23px!important;
		}
	}

/*Why choose us css code ends here*/

/*Number counter css code starts here*/
	.number-counter
	{
		width: 100%;
		padding: 15px;
		margin-bottom: 15px;
	}
	.counter-container
	{
		display: flex;
		align-items: center;
		justify-content: space-around;
		column-gap: 20px;
		row-gap: 15px;
		text-align: center;
		width: 90%;
/*		height: 250px;*/
		margin: 40px auto;
		padding-bottom: 50px;

	}
	.counter
	{
		border-radius: 5px;
		padding: 20px;
		position: relative;
/*		margin-bottom: 50px;*/
	}
	.counter h1
	{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%, -50%);	
		opacity: 0.8;
		font-size: 100px;
		-webkit-text-stroke:4px;
		letter-spacing: 3px;
		color:rgba(155, 181, 232,1);
		z-index: 1;
		user-select: none;
	}
	.counter h3
	{
		font-size: 18px;
		color:darkblue;
		z-index: 2;
		position: relative;
		padding: 5px;
		border-radius: 5px;
		font-size: 16px;
/*		backdrop-filter: blur(8px);*/
	}
/*Number counter css code ends here*/

/*Gallery Section css code starts*/
	.gallery
	{
		width: 100%;
		background:rgba(155, 181, 232,0.4);
		padding: 10px;
	}
	.gallery h1
	{
		text-align: center;
		margin-bottom: 50px;
		margin-top: 30px;
		position: relative;
		font-size: 40px;
	}
	.gallery h1::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:46.6%;
		width: 65px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: royalblue;
	}
	.gallery-images
	{
		columns:5;
		column-gap: 20px;
		width: 80%;
		margin:auto;
	}
	.gallery-images img
	{
		width: 100%;
		height: 100%;
		border-radius: 5px;
		margin-bottom: 20px;
		box-shadow: 0 0 30px rgba(0,0,0,0.3);
/*		padding:2px;*/
		border:2px solid white;
		cursor: pointer;
		transition: 0.3s ease;
	}
	.gallery-images img:hover
	{
		filter:blur(4px);
	}
	.gallery-popup
	{
		width: 100%;
		height: 100%;
		z-index: 100;
		position: fixed;
		top:0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(rgba(0, 0, 50, 0.6),rgba(0, 0, 50, 0.6));
		backdrop-filter: blur(10px);
		visibility: hidden;
		opacity: 0;
		transition: 0.2s ease;
	}
	.gallery-popup.active
	{
		visibility: visible;
		opacity: 1;
	}
	.gallery-popup .cut
	{
		position: absolute;
		top:40px;
		right: 40px;
		background:darkred;
		color: white;
		border-radius: 50%;
		cursor: pointer;
		width: 50px;
		font-size: 25px;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.gallery-popup img
	{
		border-radius: 5px;
		box-shadow: 0 0 20px rgba(0,0,0,0.3);
		object-fit: cover;
		max-height: 900px;
		width: 50%;
	}
/*Gallery Section css code ends*/
/*About me Section css code starts*/
	.about-me
	{
		width: 100%;
		padding: 50px 10px;
		background: aliceblue;
	}
	.about-me-cols
	{
		width: 80%;
		margin:auto;
		padding: 15px;
		border-radius: 5px;
		background: white;
		display: flex;
		justify-content: center;
		column-gap: 30px;
		line-height: 1.5;
		letter-spacing: 0.8px;
		box-shadow: 0 0 20px rgba(0, 0, 100, 0.1);
	}
	.about-me-left
	{
		flex-basis: 50%;
/*		background: whitesmoke;*/
		display: flex;
		justify-content: center;
		column-gap: 40px;
		padding: 15px;
		border-radius: 5px;
	}
	.about-me-left h2
	{
		margin-bottom: 5px;
		color:blueviolet;
	}
	.about-me-left h4
	{
		font-size: 16px;
		margin-bottom: 5px;
	}
	.about-me-cols .about-me-left img
	{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		object-fit: cover;
		border:3px solid blueviolet;
		padding: 4px;
	}
	.inside-about-me
	{
		display: flex;
		align-items: center;
		justify-content:left;
		column-gap: 5px;
	}
	.about-me-left-contents
	{
		border-right: 1px solid lightgray;
		padding-right: 60px;
	}
	.about-me-left-contents h1
	{
		text-align: center;
		margin-bottom: 30px;
		position: relative;
	}
	.about-me-left-contents h1::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:14%;
		width: 65px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: blueviolet;
	}
	.about-me-cols h3
	{
		font-size: 25px;
		color: blueviolet;
		margin-bottom: 7px;
	}
	.experience 
	{
		border-right: 1px solid lightgray;
		padding-right: 30px;
	}
	.about-me-right
	{
		flex-basis: 50%;
/*		background: whitesmoke;*/	
		padding: 15px;
		border-radius: 5px;
	}
	.bx-chevrons-right
	{
		color:darkblue;
		margin-right: 3px;
		transform: translateY(1px);
	}
/*About me Section css code ends*/

/*Appointment section css code starts*/
	.appointment-form
	{
		width: 100%;
		padding: 50px 10px;
		background: aliceblue;
	}
	.appointment-cols
	{
		display: flex;
		justify-content: center;
		width: 60%;
		border-radius: 15px;
		margin: auto;
		box-shadow: 0 0 20px rgba(0, 0, 100, 0.1);
	}
	.appointment-left
	{
		flex-basis: 50%;
	}
	.appointment-left img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		display: flex;
	}
	.appointment-right
	{
		flex-basis: 50%;
		background: white;
		line-height: 1.6;
		padding: 20px 35px;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
	}
	.appointment-right h2
	{
		font-size: 28px;
		margin-bottom: 15px;
		position: relative;
	}
	.appointment-right h2::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:0;
		width: 60px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: blueviolet;
	}
	.appointment-right form
	{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.appointment-right .input-data
	{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin:9px 0;
	}
	.appointment-right label
	{
		font-size: 16px;
		margin-bottom: 6px;
	}
	.appointment-right input
	{
		font-size: 14px;
		padding: 12px 15px;
		background: rgba(0,0,100,0.1);
		border:none;
		border-radius: 15px;
		outline: none;
	}
	.appointment-right input::placeholder
	{
		color:darkgray;
	}
	.input-data p
	{
		font-size: 13px;
	}
	.input-data .Appointment-btn
	{
		background: linear-gradient(to right, violet,blueviolet);
		color: white;	
	}
	.input-data .Appointment-btn:hover
	{
		background: linear-gradient(to right, blueviolet,violet);
	}
/*Appointment section css code ends*/

/*Testimonials Section css code starts*/
	.testimonials
	{
		width: 80%;
		padding: 40px 10px;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.testimonials h1
	{
		text-align: center;
		font-size: 35px;
		margin-bottom: 50px;
		position: relative;
		padding-bottom: 3px;
	}
	.testimonials h1::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:45%;
		width: 85px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: royalblue;
	}
	.user-reviews
	{
		background:rgba(155, 181, 232,0.3);
		padding: 15px;
		border-radius: 15px;
/*		border:1px solid blueviolet;*/
		height: 260px;
	}
	.user-reviews p
	{
		font-size: 15px;
	}
	.user-reviews .bxs-quote-left ,.bxs-quote-right
	{
		color: blueviolet;
		font-size: 35px;
		margin:5px 0;
	}
	.bxs-quote-right
	{
		float: right;
	}
	.rating
	{
		margin:15px 0;
	}
	.rating i
	{
		color:goldenrod;
		font-size: 22px;
	}
	.user-reviews h4
	{
		font-size: 20px;
		color: blueviolet;
	}
/*Testimonials Section css code ends*/
/*get-in-touch section css code starts*/
	.get-in-touch
	{
		width: 100%;
		padding: 50px 10px 0 10px;
	}
	.get-in-touch h1
	{
		font-size: 35px;
		text-align: center;
		position: relative;
		padding-bottom: 5px;
		margin-bottom: 50px;
	}
	.get-in-touch h1::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:44.5%;
		width: 85px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: royalblue;
	}
	.get-in-touch-cols
	{
		width: 80%;
		margin:auto;
		display: flex;
		justify-content: space-around;
		column-gap: 70px;
/*		background:pink;*/
		border-radius: 15px;
		line-height: 1.6;
	}
	.get-in-touch-left
	{
		flex-basis: 50%;
	}
	.FAQS-section
	{
		padding: 10px;
/*		border:1px solid rgba(0, 0, 0, 0.3);*/
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		border-radius: 15px;
		margin:15px 0;
	}
	.FAQS-title
	{
		padding: 10px 10px;
		border-radius: 15px;
		background: aliceblue;
		position: relative;
		cursor: pointer;
		width: 100%;
		transition: 0.3s ease;
	}
	.FAQS-title::before
	{
		content: "+";
		position: absolute;
		top:50%;
		right: 20px;
		transform: translateY(-50%);
		font-size:28px;
		transition: 0.2s ease;
	}
	.FAQS-title.active
	{
		background: royalblue;
		color: white;
	}
	.FAQS-title.active::before
	{
		content: "-";
	}
	.FAQS-title h3
	{
		font-size: 19px;
	}
	.FAQS
	{
		padding: 0 10px;
		height: 0;
		overflow: hidden;
	}
	.FAQS.active
	{
		height: auto;
		overflow:visible;
		animation: FAQanim 0.5s ease;
	}
	@keyframes FAQanim
	{
		from
		{
			transform: translateY(-10px);
		}
		to
		{
			transform: translateY(0);
		}
	}
	.FAQS p
	{
		font-size: 15px;
		padding: 10px 0;
	}
	.get-in-touch-right
	{
		flex-basis: 50%;
		margin-top: 10px;
		position: relative;
	}
	.get-in-touch-right h2
	{
		margin-bottom: 15px;
		font-size: 20px;
	}
	.get-in-touch-right h4
	{
		position: absolute;
		top:10px;
		right: 10px;
		font-size: 40px;
		z-index: 10;
		color: white;
		-webkit-text-stroke:2px;
		letter-spacing: 1px;
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(7px);
		border-radius: 5px;
		padding: 2px 18px;
	}
	.get-in-touch-right-image
	{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 85%;
		border-radius: 5px;
		overflow: hidden;
		margin-top: 50px;
		z-index: 5;
		transition: 0.8s ease;
	}
	.get-in-touch-right-image.active
	{
		width: 0;
		overflow: hidden;
		opacity: 0;
	}
	.get-in-touch-right-image img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.get-in-touch-right-image-2
	{
		position: absolute;
		top:0;
		left: 0;
		width: 0;
		overflow: hidden;
		opacity: 0;
		height: 85%;
		border-radius: 5px;
		overflow: hidden;
		margin-top: 50px;
		transition: 0.8s ease;
	}
	.get-in-touch-right-image-2.active
	{
		width: 100%;
		opacity: 1;
		overflow: visible;
		z-index: 7;
	}
	.get-in-touch-right-image-2 img
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 5px;
	}

	.get-in-touch-right-cursor
	{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 80px;
		height: 80px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: royalblue;
		color: white;
		z-index: 100;
		cursor: pointer;
		font-size: 20px;
		pointer-events: none;
		scale: 0;
	}
	
/*get-in-touch section css code ends*/

/*footer section css code starts*/
	.other-service-footer img
	{
		width: 100%;
		object-fit: cover;
		transform: translateY(-1px);
	}
	.other-service-footer
	{
		margin-top: 60px;
		width: 100%;
	}
	.footer
	{
		width: 100%;
		padding-bottom: 100px;
		background:linear-gradient(to right,rgba(155, 181, 232,1),rgba(155, 181, 232, 0.5)),url('../images/doodle.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}
	.footer-cols
	{
		display: flex;
		justify-content: space-around;
		column-gap: 50px;
		row-gap: 20px;
		width: 80%;
		margin:auto;
		line-height: 1.6;
	}
	.footer-contents
	{
		flex-basis: 33%;
		padding: 10px;
	}
	.footer-tiles
	{
		display: flex;
		justify-content:left;
		column-gap: 6px;
		margin:12px 0;
		background: white;
		padding: 7px 15px;
		border-radius: 15px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	}
	.footer-tiles:nth-child(1)
	{
		display: inline-flex;
		cursor: pointer;
	}
	.footer-tiles img
	{
		width: 200px;
		margin:10px 2px;
/*		object-fit: cover;*/
	}
	.footer-tiles i
	{
		font-size: 26px;
		margin-top: 5px;
		color: royalblue;
	}
	.footer-tiles strong
	{
		color: royalblue;
		padding-top: 2px;
	}
	.footer-tiles span
	{
		font-size: 14px;
	}
	.footer-tiles-inside
	{
		display: flex;
		flex-direction: column;
	}
	.footer-tiles-inside strong
	{
		font-size: 19px;
	}
	.footer-contents-2-cols
	{
		background: white;
		line-height: 1.7;
		padding: 20px 30px;
		border-radius: 15px;
		flex-basis: 45%;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	}
	.footer-contents:nth-child(3)
	{
		flex-basis: 25%;
	}
	.clinic-hours
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:6px 0;
	}
	.footer-contents h2
	{
		font-size: 30px;
		margin-bottom: 5px;
		padding-left: 2px;
	}
	.footer-contents h3
	{
		font-size: 27px;
		margin-bottom: 15px;
		position: relative;
	}
	.footer-contents h3::before
	{
		content: "";
		position: absolute;
		bottom:-4px;
		left:0;
		width: 60px;
		opacity: 0.6;
		height: 4px;
		border-radius: 35px;
		background: royalblue;
	}
	.footer-contents .socials
	{
		display: flex;
		align-items: center;
		column-gap: 10px;
	}
	.footer-contents .socials i
	{
		font-size: 33px;
		color: royalblue;
		border-radius: 15px;
		background: white;
		padding: 10px;
		cursor: pointer;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
		transition: 0.2s ease;
	}
	.footer-contents .socials i:hover
	{
		background: royalblue;
		color: white;
	}
/*footer section css code ends*/

/*Copyright section css code starts*/
	.copyright
	{
		width: 100%;
		padding: 20px;
		box-shadow: -5px -5px 10px rgba(0,0,100,0.1);
		line-height: 1.6;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.copyright-claim p
	{
		color: royalblue;
		letter-spacing: 0.4px;
	}
/*Copyright section css code ends*/

@media screen and (max-width:1377px)
{
	.counter h1
	{
		font-size:80px;
	}
	.gallery-images
	{
		width: 90%;
	}
	.gallery-popup img
	{
		width: 70%;
	}
	.about-me-cols
	{
		width: 90%;
	}
	.appointment-cols
	{
		width: 80%;
	}
	.testimonials
	{
		width: 90%;
	}
	.get-in-touch-cols
	{
		width: 90%;
	}
	.footer-cols
	{
		width: 90%;
	}
}
@media screen and (max-width:1200px)
{
	.counter-container
	{
		width: 100%;
	}
	.counter h1
	{
		font-size:65px;
	}
	.gallery-images
	{
		width: 95%;
	}
	.gallery-popup img
	{
		width: 90%;
	}
	.about-me-cols
	{
		width: 97%;
	}
	.appointment-cols
	{
		width: 88%;
	}
	.testimonials
	{
		width: 94%;
	}
	.get-in-touch-cols
	{
		width: 95%;
	}
	.footer-cols
	{
		width: 96%;
	}
}
@media screen and (max-width:1000px)
{
	.gallery-images
	{
		columns:4;
	}
	.appointment-cols
	{
		width: 95%;

	}
	.get-in-touch-cols
	{
		flex-wrap: wrap;
		row-gap: 20px;
	}
	.get-in-touch-left
	{
		flex-basis: 100%;
	}
	.get-in-touch-right
	{
		flex-basis: 100%;
		height: 550px;
	}
	.get-in-touch-right-cursor
	{
		display: none;
	}
	.about-me-cols
	{
		flex-wrap: wrap;

	}
	.about-me-left
	{
		border-bottom: 1px solid lightgray;
		margin-bottom: 10px;
		padding-bottom: 30px;
	}
	.about-me-left, .about-me-right
	{
		flex-basis: 100%;
	}
	.footer-cols
	{
		flex-wrap: wrap;
	}
	.footer-contents
	{
		flex-basis: 100%;
	}
}
@media screen and (max-width:887px)
{
	.counter h1
	{
		font-size:75px;
	}
	.counter-container
	{
		flex-wrap: wrap;
		justify-content: left;

	}
	.counter
	{
		flex-basis: 48%;
		background:rgba(0, 0, 100, 0.08) ;
		padding: 50px 10px;
	}
}
@media screen and (max-width:780px)
{
	.gallery-images
	{
		columns:3;
	}
	.appointment-cols
	{
		flex-wrap: wrap;
	}
	.appointment-left ,.appointment-right
	{
		flex-basis: 100%;
	}
	.counter-container
	{
		padding-bottom: 40px;
		margin:0;
	}
	.counter h1
	{
		font-size:75px;
	}
}
@media screen and (max-width:555px)
{
	.counter h1
	{
		font-size:75px;
	}
	.counter-container
	{
		row-gap: 3px;
	}
	.counter 
	{
		flex-basis: 100%;
		margin: 10px 0;
	}
	.gallery-images
	{
		columns:2;
	}
	.about-me-left
	{
		flex-wrap: wrap;
	}
	.about-me-left-contents
	{
		width: 100%;
		margin-bottom: 15px;
		border-bottom: 1px solid lightgray;
		padding-bottom: 15px;
	}
	.get-in-touch-right
	{
		flex-basis: 100%;
		height: 400px;
	}
	.copyright
	{
		flex-wrap: wrap;
		row-gap: 10px;
	}
}
@media screen and (max-width:450px)
{
	.gallery-images
	{
		columns:1;
	}
	.testimonials
	{
		margin-bottom: 10px;
	}
	.counter-container
	{
		padding-bottom: 10px;
		margin-top: 0;
	}
	.get-in-touch-right
	{
		flex-basis: 100%;
		height: 250px;
	}
	.get-in-touch-right h4
	{
		font-size: 25px;
		-webkit-text-stroke:1px;
		letter-spacing: 1px;
	}
}