@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");

:root {
	--black: #121212;
	--darkgreen: #104911;
	--lightgreen: #548c2f;
	--para: #555555;
	--white-para: #f0f0f0;
	--white: #ffffff;
	--orange: #ff9914;
}

* {
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box;
	font-family: "DM Sans", sans-serif;
}

.container {
	width: 1440px !important;
}

body {
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-header {
	width: 100%;
	max-width: 1440px;
	display: flex;
	background-color: #ff99141a;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
	margin-bottom: -100px !important;
	backdrop-filter: blur(10px); /* Blurs background */
	-webkit-backdrop-filter: blur(10px); /* For Safari */
}

.hero-logo {
	width: 85%;
	margin: 0px auto !important;
}

.logo-img {
	max-height: 50px;
}

.hero-content {
	background-image: url("../images/Dental.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	max-width: 1440px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 840px;
	margin: 0px auto !important;
	transition: all 0.8s linear;
	/* margin-top: -300px; */
}

.content-box {
	margin-left: 100px !important;
	width: 600px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding-top: 100px !important;
}

.hero-swtich-bg {
	display: flex;
	gap: 4px;
	padding: 6px !important;
	background-color: #ff991433;
	border: 1px solid #ff991429;
	width: fit-content;
	border-radius: 30px;
}

.emma-green {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 100%;
	object-fit: cover;
}

.hero-swtich-btn {
	padding: 6px 12px !important;
	padding-right: 18px !important;
	display: flex;
	gap: 6px;
	align-items: center;
	background-color: var(--white);
	border: none;
	border-bottom: 4px solid transparent;
	border-top: 4px solid transparent;
	border-radius: 200px;
	transition: all 1s linear;
}

.hero-swtich-btn {
	font-family: Plus Jakarta Sans;
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	text-transform: capitalize;
	color: var(--orange);
}

.hero-swtich-btn:active {
	background-color: var(--orange);
	border-bottom: 4px solid #ff991403;
	color: var(--white);
}

.hero-swtich-btn.active {
	background-color: var(--orange); /* button bg */
	border-bottom: 4px solid #ff991403;
	border-top: 4px solid #ff991403;
	color: var(--white); /* text color */
}

.hero-swtich-btn.active span {
	color: var(--white); /* span text color */
}

.hero-swtich-btn.active img {
	filter: brightness(0) invert(1); /* icon को भी white कर देगा */
}

h1 {
	font-size: 46px;
	font-weight: 600;
	color: var(--black);
}

h2 {
	font-size: 40px;
	font-weight: 600;
	color: var(--black);
	text-transform: capitalize;
}

h3 {
	font-size: 22px;
	line-height: 33px;
	font-weight: 600;
	text-transform: capitalize;
}

h4 {
	font-size: 18px;
	line-height: 27px;
	font-weight: 600;
	color: var(--black);
}

.para-1 {
	font-size: 18px;
	color: var(--para);
}

.para-2,
.para-2-black {
	font-size: 18px;
	line-height: 27px;
	color: var(--para);
}

.para-2-black {
	font-weight: 500;
	color: var(--black);
}

.para-3,
.para-3-black {
	font-size: 14px;
	line-height: 21px;
	color: var(--white);
	font-weight: 500;
}

.para-3-black {
	color: var(--black);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 400;
}

.para-4 {
	font-size: 16px;
	line-height: 22px;
	color: var(--para);
}

.content-box-para1 {
	font-size: 18px;
	line-height: 27px;
	color: #222222;
}

.content-box-para {
	font-size: 20px;
	color: var(--para);
}

.main-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--orange);
	padding: 6px !important;
	padding-left: 18px !important;
	font-size: 14px;
	font-weight: 500;
	color: var(--white);
	border-radius: 200px;
	text-transform: capitalize;
	transition: all 0.5s linear;
	border: none;
	width: fit-content;
}

.arrow-bg {
	background-color: var(--darkgreen);
	color: var(white);
	padding: 8px 12px !important;
	border-radius: 50%;
	rotate: -45deg;
	transition: all 0.7s linear;
}

.main-btn:hover {
	background-color: var(--darkgreen);
}

.main-btn:hover .arrow-bg {
	background-color: var(--white);
	color: var(--darkgreen);
	rotate: 0deg;
}

.green-text,
.orange-text {
	padding: 12px 14px !important;
	background-color: #548c2f0f;
	border: 1px solid #548c2f33;
	font-size: 14px;
	font-weight: 600;
	color: var(--lightgreen);
	width: fit-content;
	border-radius: 200px;
}

.orange-text {
	background-color: #ff99140f;
	border: 1px solid #ff991433;
	color: var(--orange);
}

/*Section  About us */

.whyChooseUs {
	width: 100%;
	max-width: 1440px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 120px !important;
	padding-bottom: 120px !important;
	/* background-color: black; */
	background-image: url("../images/whyChooseUs.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.whyChooseUs-box {
	width: 95%;
	max-width: 1240px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	margin: 0px auto !important;
}

/* Left side */
.whyChooseUs-left {
	width: 540px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.whyChooseUs-left-part1 {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.whyChooseUs-left-part2 {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.whyChooseUs-left-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 6px !important;
	border: 1px solid #ff991480;
	border-radius: 200px;
}

/* right side */
.whyChooseUs-right {
	width: 640px;
	display: flex;
	gap: 10px;
}

.whyChooseUs-right-col1 img {
	border-radius: 16px;
	height: 605px;
}

.whyChooseUs-right-col2 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.whyChooseUs-right-col2 img {
	border-radius: 16px;
	line-height: 300px;
}

/* Section Who we help */

.whohelp {
	width: 100%;
	max-width: 1440px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 110px !important;
	padding-bottom: 110px !important;
	background-color: #f9f9f9;
}

.whohelp-box {
	width: 95%;
	max-width: 1240px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-items: center;
	/* padding: 80px!important; */
	margin: 0px auto !important;
}

.whohelpcontent {
	width: 560px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin: 0px auto !important;
}

.whowehelp-cards {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0px auto !important;
	margin-top: 50px !important;
}

.whowehelp-card {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 6px !important;
	width: 23%;
	height: 420px;
	border-radius: 16px;
}

.whowehelp-card-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-radius: 10px;
	background-color: var(--white);
	padding: 14px !important;
}

.card-1 {
	background-image: url("../images/family.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-2 {
	background-image: url("../images/senior.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-3 {
	background-image: url("../images/smallBusiness.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.card-4 {
	background-image: url("../images/selfEmployed.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.whowehelp-card:hover {
	border-bottom: 2px solid var(--arrow-bg);
}
.whowehelp-card:hover .whowehelp-card-image {
	transform: scale(1.1);
}
.card-image {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
}

.whowehelp-card-image {
	border-radius: 16px;
	margin-bottom: 8px !important;
	transition: all 1s linear;
}

.whowehelp-card h4 {
	padding-left: 4px !important;
	padding-right: 4px !important;
}
.whowehelp-card p {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

/* free Quotes Section */

.freeQuotes,
.footer {
	width: 100%;
	max-width: 1440px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 120px !important;
	padding-bottom: 120px !important;
	background-image: url("../images/freeQuotes.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.freeQuotes-box {
	width: 90%;
	max-width: 1240px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0px auto !important;
}

.freeQuotes-left {
	width: 480px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.freeQuotes-h2 {
	color: white;
	text-transform: initial;
	font-size: 38px;
	line-height: 48px;
}

.para-1-white {
	font-size: 18px;
	line-height: 27px;
	color: #ffffffcc;
}

.para-freeQuotes {
	font-size: 14px;
	line-height: 21px;
	color: var(--white);
	font-family: "Plus Jakarta Sans", sans-serif;
}

.freeQuotes-container {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 8px !important;
	width: 100%;
}

.freeQuotes-protect {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9.8px !important;
}

.freeQuotes-right {
	width: 570px;
	border: 1px solid #ff991466;
	border-radius: 28px;
	padding: 10px !important;
}

.freeQuotes-right-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 50px 70px !important;
	gap: 20px;
	background-color: #ff9914;
	border-radius: 20px;
}

.para-james {
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	color: white;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.para-name {
	font-size: 20px;
	line-height: 24px;
	font-weight: bold;
	color: white;
	font-family: "Plus Jakarta Sans", sans-serif;
}

.divider {
	width: 1px;
	height: 20px;
	background-color: #ffffff66;
}

/* Footer */

.footer {
	/* background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) -30.34%, rgba(1, 201, 226, 0.6) 163.07%); */
	background: linear-gradient(144.12deg, rgba(255, 153, 20, 0) -26.06%, #ff9914 125.01%);
	padding-bottom: 100px !important;
	padding-top: 80px !important;
}

.footer-box {
	width: 90%;
	max-width: 1240px;
	margin: 0px auto !important;
	display: flex;
	justify-content: space-between;
}

.footer-left img {
	border-radius: 10px;
	max-height: 50px;
}

.footer-right {
	width: 532px;
	display: flex;
	padding: 6px !important;
	background-color: #ffffff;
	border-radius: 16px;
	border: 1px solid #01c9e266;
}

.footer-right h3 {
	font-family: "Plus Jakarta Sans", sans-serif;
}

.footer-right-content {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 22px 40px !important;
}

.footer-contacts {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.footer-contacts-part {
	display: flex;
	gap: 4px;
	align-items: center;
}

.footer-socialmedia {
	display: flex;
	gap: 14px;
}

.footer-btn {
	width: fit-content;
}

.meganR-content img {
	border-radius: 20px !important;
	object-fit: cover;
}

/*  Form */
.modal-dialog {
	margin: 50px auto !important;
}

#leadFormModal .modal-content {
	background: #fff;
	border-radius: 20px;
	padding: 30px !important;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 522px;
	margin: 0px auto !important;
}

#leadFormModal .modal-header {
	border: none;
	padding-bottom: 0 !important;
}

form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.form-content {
	display: flex;
	flex-direction: column;
}
.form-content label {
	margin-bottom: 10px !important;
}
.form-btn {
	margin: 0px auto !important;
}

#leadFormModal .modal-title {
	font-size: 22px;
	font-weight: bold;
	color: #121212;
}

#leadFormModal .form-heading {
	font-size: 18px;
	font-weight: 600;
	/* margin: 20px 0 25px!important; */
	color: #121212;
}

#leadFormModal .form-control,
#leadFormModal select {
	color: #121212;
	border: 1px solid #01c9e233;
	border-radius: 200px;
	box-shadow: none;
	height: 44px;
	background: #01c9e20f;
	padding: 10px 15px !important;
	font-size: 14px;
}

#leadFormModal .form-control:focus,
#leadFormModal select:focus {
	border-color: #e7c873;
	outline: none;
	box-shadow: 0 0 5px rgba(42, 157, 143, 0.2);
}

#leadFormModal .checkbox {
	/* margin-bottom: 5px!important; */
	margin-top: 15px !important;
}

#leadFormModal .checkbox input[type="checkbox"] {
	margin-top: 1px !important;
}

#leadFormModal .checkbox label {
	color: #121212;
	font-size: 14px;
	font-weight: normal;
}

/* #leadFormModal .btn-submit{
		border-radius: 50px;
		border: 1px solid #E7C873;
		background: #E7C873;
		padding: 12px 18px!important;
		color: #1A1A1A;
		font-size: 16px;
		font-style: normal;
		font-weight: 500;
		line-height: 18px; /* 112.5% 
}

#leadFormModal .btn-submit:hover {
		border-radius: 50px;
		border: 1px solid #E7C873;
		background: #E7C873;
		color:#1A1A1A;
		text-decoration: none;
} */

.modal-header .close span {
	color: var(--black);
}

#leadFormModal .checkbox-label {
	display: flex;
	gap: 10px;
}

#leadFormModal .checkbox-label span {
	padding-left: 20px !important;
	margin-top: -3px !important;
}

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

	.modal-dialog {
		display: flex;
		justify-content: center;
	}

	#leadFormModal .modal-content {
		width: 90%;
	}

	h1 {
		font-size: 45px;
		text-align: center;
	}

	h2 {
		font-size: 32px;
	}

	h3 {
		font-size: 22px;
		line-height: 33px;
		font-weight: 600;
		text-transform: capitalize;
	}

	h4 {
		font-size: 18px;
		line-height: 27px;
		font-weight: 600;
		color: var(--black);
	}

	.para-1 {
		font-size: 18px;
		line-height: 27px;
		color: var(--para);
	}

	.para-2 {
		font-size: 16px;
		line-height: 24px;
		color: var(--para);
	}

	.para-3,
	.para-3-black {
		font-size: 14px;
		line-height: 21px;
		color: var(--white);
		font-weight: 500;
	}

	.para-3-black {
		color: var(--black);
	}

	.content-box-para {
		font-size: 18px;
		color: var(--para);
		text-align: center;
	}

	.hero,
	.whyChooseUs,
	.whohelp,
	.freeQuotes,
	.meganR,
	.footer {
		width: 100%;
		max-width: 100%;
		background-position: center;
	}

	.whyChooseUs,
	.whohelp,
	.freeQuotes,
	.footer {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}

	.whyChooseUs-box,
	.whohelp-box,
	.freeQuotes-box,
	.footer-box {
		width: 95%;
		flex-direction: column;
		margin: 0px auto !important;
	}

	.hero-header,
	.hero-content {
		width: 100%;
		max-width: 100%;
		background-position: center;
	}

	.hero-content {
		height: 700px;
	}

	.hero-logo {
		width: 90%;
		margin: 0px auto !important;
	}

	.content-box {
		width: 90%;
		padding: 0% !important;
		margin: 0px auto !important;
		/* justify-content: center; */
		align-items: center;
		gap: 30px;
	}

	.whyChooseUs-box {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 40px;
	}

	.whyChooseUs-left,
	.whyChooseUs-right {
		width: 90%;
		justify-content: center;
		text-align: center;
	}

	.whyChooseUs-right-col1,
	.whyChooseUs-right-col2 {
		width: 50%;
		object-fit: cover;
		/* height: 620px; */
	}
	.whyChooseUs-right-col1 img {
		width: 100%;
		object-fit: cover;
		height: 630px;
	}

	.whyChooseUs-right-col2 img {
		width: 100%;
		object-fit: cover;
		height: 310px;
	}

	.green-text,
	.orange-text {
		margin: 0px auto !important;
	}
	.about-card-content {
		justify-content: center;
	}

	.whohelp-box {
		width: 95%;
	}

	.whowehelp-card {
		width: 30%;
	}

	.whowehelp-card-image {
		width: 100%;
	}

	.card-image {
		height: 200px;
	}

	/* FreeQuotes */

	.freeQuotes-box {
		text-align: center;
		gap: 40px;
	}

	.freeQuotes-left,
	.freeQuotes-right {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Footer */

	.footer-box {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.footer-left {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.footer-right {
		margin-top: 30px !important;
		width: fit-content;
	}
}

@media screen and (max-width: 767px) {
	h1 {
		font-size: 35px;
	}

	h2,
	.freeQuotes-h2 {
		font-size: 28px;
		text-align: center;
	}

	h3 {
		font-size: 18px;
		line-height: 26px;
	}

	h4 {
		font-size: 18px;
		line-height: 24px;
	}

	.para-1 {
		font-size: 16px;
		line-height: 24px;
	}

	.para-2,
	.para-2-black {
		font-size: 16px;
		line-height: 22px;
	}

	.para-3,
	.para-3-black {
		font-size: 14px;
		line-height: 18px;
	}

	.para-2-black {
		text-align: left;
	}

	.para-james {
		font-size: 18px;
		line-height: 25px;
	}

	.content-box-para {
		font-size: 16px;
		color: var(--para);
	}

	.whyChooseUs,
	.whohelp,
	.freeQuotes,
	.meganR,
	.footer {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		margin: 0px !important;
	}

	.whyChooseUs-box,
	.whohelp-box,
	.freeQuotes-box,
	.footer-box {
		width: 90%;
	}

	.whohelpcontent,
	.footer-box {
		width: 100%;
	}

	.card-image {
		height: auto;
	}
	.footer-right {
		flex-direction: column;
		width: 100%;
	}

	.whowehelp-cards {
		flex-direction: column;
	}
	.whowehelp-card {
		width: 100%;
		height: 450px;
		background-size: cover;
		background-position: center;
		/* justify-content: center; */
		/* align-items: center; */
	}

	.whyChooseUs-left {
		width: 100%;
	}

	.whyChooseUs-right {
		flex-direction: column;
		width: 100%;
	}
	.whyChooseUs-right-col1,
	.whyChooseUs-right-col2 {
		width: 100%;
		height: fit-content;
	}

	.whyChooseUs-right-col1 img {
		height: auto;
	}

	.freeQuotes-container {
		flex-wrap: wrap;
		justify-content: center;
	}

	.freeQuotes-h2 {
		line-height: 35px;
	}

	.freeQuotes-right-inner {
		padding: 30px !important;
	}

	.whowehelp-card {
		text-align: center;
	}

	.footer-right {
		width: 80%;
		padding: 20px !important;
		justify-content: center;
	}

	.footer-right-content {
		justify-content: center;
		align-items: center;
	}

	.footer-left {
		display: flex;
		justify-content: center;
	}

	.footer-left img {
		width: 80%;
	}

	.whowehelp-card-image {
		width: 100%;
	}

	#leadFormModal .checkbox label {
		font-size: 12px;
	}

	#leadFormModal .modal-title {
		font-size: 20px;
	}

	#leadFormModal .form-heading {
		font-size: 16px;
	}

	.logo-img {
		width: fit-content;
	}

	.hero-logo {
		display: flex;
		justify-content: center;
	}
}

form .modal-body > img {
	display: none;
}

#form-thanks {
	display: none;
}

.form-content {
	margin-bottom: 15px !important;
}

#submitButton {
	margin-top: 20px !important;
}

#loadingGraphic {
	display: none;
	padding: 2px 0 3px;
	margin: 10px auto !important;
	text-align: center;
}

#loader {
	display: inline-block;
	width: 44px;
	height: 44px;
	margin: 6px auto;
	-webkit-animation: 1s ease-in-out infinite animball_two;
	animation: 1s ease-in-out infinite animball_two;
}

#loader .loaderBall {
	width: 44px;
	height: 44px;
	position: absolute;
}

#loader .loaderBall .ball {
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	-webkit-animation: 1s ease-in-out infinite animball_one;
	animation: 1s ease-in-out infinite animball_one;
}

#loader .loaderBall .ball.ball1 {
	background-color: var(--orange);
	top: 0;
	left: 0;
}

#loader .loaderBall .ball.ball2 {
	background-color: var(--orange);
	top: 0;
	left: 24px;
}

#loader .loaderBall .ball.ball3 {
	background-color: var(--orange);
	top: 24px;
	left: 0;
}

#loader .loaderBall .ball.ball4 {
	background-color: var(--orange);
	top: 24px;
	left: 24px;
}

@-webkit-keyframes animball_one {
	0% {
		position: absolute;
	}
	50% {
		top: 12px;
		left: 12px;
		position: absolute;
		opacity: 0.5;
	}
	100% {
		position: absolute;
	}
}

@keyframes animball_one {
	0% {
		position: absolute;
	}
	50% {
		top: 12px;
		left: 12px;
		position: absolute;
		opacity: 0.5;
	}
	100% {
		position: absolute;
	}
}

@-webkit-keyframes animball_two {
	0% {
		-webkit-transform: rotate(0deg) scale(1);
	}
	50% {
		-webkit-transform: rotate(360deg) scale(1.3);
	}
	100% {
		-webkit-transform: rotate(720deg) scale(1);
	}
}

@keyframes animball_two {
	0% {
		transform: rotate(0deg) scale(1);
	}
	50% {
		transform: rotate(360deg) scale(1.3);
	}
	100% {
		transform: rotate(720deg) scale(1);
	}
}

.social {
	margin: 5px 0 0;
	padding: 0;
}

.social li {
	display: inline-block;
	margin-right: 10px;
}

.social li .iconic * {
	fill: var(--orange);
	stroke: var(--orange);
}