/* Import the Work Sans font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');

/* Basic reset and styles */
/* Reset and basic styles */
/* Basic reset and styles */
body {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	background-color: #f4f4f4;
	color: #333;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden; /* Prevent horizontal scrollbar due to margins */
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: relative;
}

.main-content {
	flex: 1;
	padding-bottom: 60px;
	box-sizing: border-box;
	margin: 0 250px; /* Adjust the left and right margin */
}

.main-content h2 {
	font-size: 32px; /* Adjust the font size as needed */
}


.left-align {
	text-align: left;
}

.right-align {
	text-align: right;
}
/* Override margin for header and footer */
.navbar,
footer.smaller-footer {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* Ensure consistent layout across pages */
.centered-section,
.main-content {
	flex-grow: 1; /* Let content fill the available space */
}

.centered-section {
	text-align: center;
	padding: 50px 0;
}

.centered-section h2 {
	margin: 0 auto;
	max-width: 600px;
	margin-top: 70px;
	font-size: 42px; /* Adjust the font size for the title */
}

.centered-section h2,
.centered-section .contact-text {
	margin: 0 auto;
	max-width: 600px;
	margin-top: 120px;
}

.centered-section .contact-text {
	font-size: 20px; /* Adjust the font size for the contact text */
	line-height: 1.6; /* Increase line height for better readability */
	max-width: 800px; /* Set the maximum width to make the text wider */
	margin: 0 auto; /* Center the text horizontally */
	text-align: center; /* Center-align the text */
	margin-top: 30px;
	margin-bottom: 80px;
}

/* Styles for the map and contact */
.map-and-contact {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 100px; /* Increase margin to move the entire section down */
}

.contact-info-container {
	flex: 1;
	max-width: 300px;
	padding: 20px;
	text-align: left;
	margin-top: 240px; /* Increase margin to move the entire section down */
}


.map-container {
	flex: 1;
	width: 90%; /* Adjust width as needed */
	max-width: 1000px; /* Set a maximum width */
	height: 600px; /* Adjust height as needed */
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	margin: 20px auto; /* Center the map */
}

.map-container iframe {
	width: 100%;
	height: 100%;
	border: none;
}


.contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.contact-item img {
	width: 24px; /* Adjust the width of the icons */
	height: 24px; /* Adjust the height of the icons */
	margin-right: 10px;
}

.contact-item p {
	margin: 0;
	font-size: 16px;
}

/* Styles for the image container */
.image-with-rectangle {
	position: relative;
	text-align: center;
}

.image-with-rectangle img {
	width: 100%;
	height: auto;
	max-height: 700px; /* Adjust the maximum height of the image */
}

.rectangle {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height: auto;
	background-color: #f4f4f4;
	padding: 30px;
	box-sizing: border-box;
}

.rectangle h2,
.rectangle p {
	margin: 0;
	color: #333;
}

.rectangle-content {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end; /* Move content to the bottom */
	padding-top: 20px; /* Adjust this value to move the text down */
}

.rectangle h2 {
	margin: 0;
	font-size: 46px; /* Adjust font size for the title */
	color: #333;
	text-align: left; /* Align text to the left */
	padding-right: 20px; /* Add padding to the right for the title */
	padding-left: 20px; /* Add padding to the left for the title */
}

.rectangle p {
	margin: 0;
	font-size: 18px; /* Adjust font size for the paragraph */
	color: #333;
	text-align: left; /* Align text to the left */
	padding-right: 20px; /* Add padding to the right for the paragraph */
	padding-left: 20px; /* Add padding to the left for the paragraph */
	padding-bottom: 30px;
	margin-top: 20px;
}

.container {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	margin-top: 40px;
	margin-bottom: 40px;
}


.subtext {
	font-size: 14px;
	color: #888; /* Adjust the color as needed */
	display: block;
	text-align: center; /* Align the text to the center if needed */
}

.clinic-container {
	display: block;
	text-align: center; /* Align the entire container to the center */
	font-weight: bold; /* Apply bold font */
}
/* Navigation bar styles */
.navbar {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #fff;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	width: 100%;
	padding: 20px 250px; /* Adjust padding to match content margins */
	box-sizing: border-box;
}

.nav {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	width: 100%;
}

.nav li {
	margin-left: 60px; /* Adjust the margin as needed */
	margin-right: 60px; /* Adjust the margin as needed */
}

.nav a {
	text-decoration: none;
	color: #888;
	transition: color 0.3s ease;
	padding: 10px 20px;
	font-size: 18px;
	font-weight: bold;
}

/* Change color on hover */
.nav a:hover {
	color: #000;
}
/* Ensure clinic name stays on one line */
.clinic-name {
	font-size: 28px;
	color: #247cff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	flex-shrink: 0;
}

.subtext {
	font-size: 14px;
	color: #888; /* Adjust the color as needed */
}

/* Ensure the text stays on a single line */
.nav a {
	white-space: nowrap; /* Prevent text wrapping */
	overflow: hidden; /* Hide overflowing text */
	text-overflow: ellipsis; /* Display an ellipsis for overflowed text */
}

/* Example media query for smaller screens */
@media screen and (max-width: 768px) {
	.navbar {
		padding: 20px 50px; /* Adjust padding for smaller screens if necessary */
	}

	.nav a {
		font-size: 16px; /* Decrease font size for smaller screens */
	}

	/* Add the styles from your first CSS snippet here */
	.centered-section,
	.main-content {
		flex-grow: 1; /* Let content fill the available space */
	}

	.centered-section {
		text-align: center;
		padding: 50px 0;
	}

	.centered-section h2 {
		margin: 0 auto;
		max-width: 600px;
		margin-top: 70px;
		font-size: 42px; /* Adjust the font size for the title */
	}

	.centered-section h2,
	.centered-section .contact-text {
		margin: 0 auto;
		max-width: 600px;
		margin-top: 120px;
	}

	.centered-section .contact-text {
		font-size: 20px; /* Adjust the font size for the contact text */
		line-height: 1.6; /* Increase line height for better readability */
		max-width: 800px; /* Set the maximum width to make the text wider */
		margin: 0 auto; /* Center the text horizontally */
		text-align: center; /* Center-align the text */
		margin-top: 30px;
		margin-bottom: 80px;
	}

	.rectangle {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
	}

	.rectangle h2 {
		font-size: 28px;
	}

	.rectangle p {
		font-size: 14px;
		margin-top: 10px;
	}

	/* ... (continue with the rest of your styles) */
}

/* CSS for the experience section */
.experience-section {
	background-color: #f4f4f4;
	padding: 40px 0;
}


.experience-text {
	width: calc(70% - 20px); /* Adjust width for text */
	margin-right: 20px; /* Add some space between text and circle */
	margin-top: 40px; /* Increase top margin */
	margin-bottom: 40px; /* Increase bottom margin */
}

.experience-text h2 {
	font-size: 50px;
	color: #333;
	margin-bottom: 10px;
}

.experience-text p {
	font-size: 18px;
	color: #555;
}

.image-wrapper {
	width: 48%; /* Adjust width for image wrappers */
	overflow: hidden;
}

.image-wrapper img {
	width: 100%;
	height: auto;
}


.new-section {
	display: flex;
	align-items: center;
	margin-top: 40px;
}

.circle-with-text {
	width: 30%;
	display: flex;
	justify-content: center; /* Center content horizontally */
	align-items: center; /* Center content vertically */
	margin-top: 140px; /* Increase the top margin to move the circles lower */
	margin-bottom: 80px; /* Adjust the bottom margin */
}

.circle h3 {
	font-size: 80px; /* Increase the font size */
	margin: 0;
	color: #247cff; /* Set the color to match the clinic name color */
}


.circle {
	background-color: #fff;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	width: 350px;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden; /* Hide overflowing content */
	margin-top: -20px;
}

.circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	object-position: center top; /* Adjust the position to center the doctor's head */

}

.text-content {
	width: 70%;
	text-align: right;
	padding-left: 20px; /* Adjust spacing between circle and text */
	margin-top: -40px;
}

.text-content h2 {
	font-size: 50px;
	margin-bottom: 10px;
}

.text-content p {
	font-size: 18px;
	color: #555;
}


/* Adjust footer styles */
footer.smaller-footer {
	height: 120px;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
	margin-top: 100px; /* Push footer to the bottom */
}

.footer-container {
	padding: 10px 0;
	box-sizing: border-box;
}
/* Additional styling specific to the contact info */
.contact-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	padding: 0 20px;
	box-sizing: border-box;
}

.footer-image {
	margin: 20px auto;
}

.footer-image img {
	max-width: 130px;
	height: auto;
}

/* Ensure elements inside the contact info align properly */
.contact-details-left,
.contact-details-right {
	display: flex;
	align-items: center;
	margin-bottom: 50px;
}

/* Adjust the width and height of the contact icons */
.contact-details-left img,
.contact-details-right img {
	width: 20px;
	height: 20px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;
}

/* Align elements in the contact details sections */
.contact-details-left p,
.contact-details-right p {
	margin: 5px 0;
	line-height: 1.5;
	white-space: nowrap;
}

.contact-details-left {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
}

.contact-details-right {
	flex: 1;
	text-align: right;
}

.form-group {
	margin-bottom: 20px;
	text-align: left;
}

.booking-form {
	margin-left: 400px; /* Add left margin */
	margin-right: 400px; /* Add right margin */
}

.form-group.submit-button {
	display: flex;
	justify-content: center;
}

label {
	display: block;
	margin-bottom: 5px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.message {
	grid-column: span 2;
}

button {
	width: 200px; /* Adjust the button width as needed */
	padding: 12px; /* Increase the padding for better visibility and clickability */
	background-color: #007bff;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 18px; /* Increase the font size */
	font-family: 'Poppins', sans-serif; /* Inherit font from the site */
}

button:hover {
	background-color: #0056b3;
}

.side-image {
	width: 350px; /* Set the image size */
	height: 350px; /* Set the image size */
	border-radius: 50%; /* Make the image circular */
	margin-bottom: 20px; /* Add margin for spacing between image and text */
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Add shadow effect */
	box-sizing: border-box; /* Include padding and border in the element's total width and height */
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden; /* Hide overflowing content */
}

.left-align {
	text-align: left;
	margin-right: auto;
	overflow: hidden;
}

.right-align {
	text-align: right;
	margin-left: auto;
	overflow: hidden;
}

.left {
	float: left;
	margin-left: 20px; /* Adjust the spacing between the image and text */
	margin-right: 40px;
}

.right {
	float: right;
	margin-right: 20px; /* Adjust the spacing between the image and text */
	margin-left: 40px;
}

/* Copyright section */
.copyright-info {
	text-align: center;
	margin-top: 10px; /* Adjust top margin */
	color: #333;
	background-color: #f4f4f4;
	padding: 5px 0; /* Adjust the padding to make it thinner */
	margin-bottom: 0;
	max-height: 30px; /* Limit the height of the copyright strip */
	overflow: hidden; /* Hide any overflowed content */
	font-size: 12px; /* Adjust the font size */
	display: flex;
	align-items: center; /* Vertically center the text */
	justify-content: center; /* Horizontally center the text */
}