/*
Theme Name: Hoststarter
Theme URI: https://wordpress.org/
Author: Sabbar
Author URI: https://wordpress.org
Description: Hoststarter is designed to take advantage of the new design tools introduced in WordPress 6.1. With a clean, blank base as a starting point, this default theme includes ten diverse style variations created by members of the WordPress community. Whether you want to build a complex or incredibly simple website, you can do it quickly and intuitively through the bundled styles or dive into creation and full customization yourself.
Requires at least: 6.1
Tested up to: 6.5
Requires PHP: 5.6
Version: 1.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentythree
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/*======================================
[ CSS Table of contents ]
* Global CSS
* Header CSS
	+ Topbar
	+ Logo
	+ Widget
	+ Main Menu
	+ Search
* Hero Slider CSS
* Schedule CSS
* Feautes CSS
* Fun Facts CSS
* Why Choose CSS
* Call to Action CSS
* Portfolio CSS
	+ Portfolio Single CSS
* Services CSS
* Testimonials CSS
* Departments CSS
* Pricing Table CSS
* Clients CSS
* Team CSS
	+ Single Team
* Blog CSS
	+ Latest Blog CSS
	+ Blog Single CSS
	+ Blog Sidebar CSS
* Appointment CSS
* Login CSS
* Register CSS
* Faq CSS
* Contact Us CSS
* Error 404 CSS
* Mail Success CSS
* Newsletter CSS
* Doctor Calendar CSS
* About Us CSS
* Footer CSS
========================================*/
/*=============================
	Global CSS 
===============================*/
@font-face {
	font-family: "Roboto-Bold";
	src: url("fonts/Roboto-Bold.ttf");
}

@font-face {
	font-family: "Roboto-Reg";
	src: url("fonts/Roboto-Regular.ttf");
}

@font-face {
	font-family: "Roboto-Light";
	src: url("fonts/RobotoCondensed-Light.ttf");
}

@font-face {
	font-family: "Roboto-Med";
	src: url("fonts/Roboto-Medium.ttf");
}

/*----GLOBAL STYLING----*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	color: #000;
	font-size: 20px;
	line-height: 1;
	background-color: #fff;
}

h2,
h3,
h4,
h5,
h6,
p,
span {
	padding: 0;
	margin: 0;
	color: #183b56;
}

a {
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: inline-block;
	transition: 0.3s all ease-in-out;
}

ul,
li {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

/*-------------------*/
.container {
	width: 100%;
	max-width: 1440px;
	margin: auto;
}

.section-heading {
	text-align: center;
	font: normal 44px/1 Roboto-Bold;
	margin-bottom: 60px;
}

.primary-btn {
	background-color: #9dc919;
	padding: 16px 40px;
	color: #fff;
	border: 0px;
	border-radius: 10px;
	transition: all 0.3s;
	text-transform: capitalize;
	font: normal 18px/1 Roboto-Med;
}

.primary-btn:hover {
	background-color: #b1cf54;
}

/* ----------------------- */
header {
	padding-block: 40px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	transition: all 0.4s;
}

header.top {
	background-color: #1a7394;
	padding-block: 20px;
}

.logo {
	width: 180px;
	height: 100%;
	transition: all 0.4s;
}

header.top .logo {
	width: 150px;
}

.logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*-------------------------------*/
.hero-section {
	background: #fafcf3;
	color: #183b56;
	text-align: center;
	padding-block: 175px 0;
	overflow: hidden;
}

.hero-section h1 {
	width: 100%;
	max-width: 765px;
	margin-inline: auto;
	margin-bottom: 35px;
	font: normal 56px/1.2 Roboto-Bold;
}

.hero-section .hero-list {
	margin-bottom: 35px;
	max-width: 310px;
	width: 100%;
	margin-inline: auto;
	color: #00adee;
	text-transform: uppercase;
	font: normal 22px/1.2 Roboto-Reg;
}

.hero-section .hero-list li {
	list-style-type: disc;
}

.hero-section form {
	width: 100%;
	max-width: 1100px;
	margin: auto;
}

.hero-section form p {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 12px 24px;
	width: 100%;
	/* max-width: 1100px; */
	/* margin: auto; */
	position: relative;
	z-index: 1;
	border-radius: 8px;
	box-shadow: 1px 2px 30px 0px #0000000f;
}

.wpcf7-spinner {
	display: none;
}

/* .hero-section form {
	background: #fff;
	padding: 12px 24px;
	width: 100%;
	max-width: 1100px;
	margin: auto;
	position: relative;
	z-index: 1;
	border-radius: 8px;
	box-shadow: 1px 2px 30px 0px #0000000f;
} */

.hero-section form .form-control {
	border: 0px;
	background-color: transparent;
	box-shadow: unset;
	border-bottom: 1px solid #5a7184;
	border-radius: 0px;
	width: 90%;
	padding: 0px 5px 5px 0px;
	font: normal 16px/1 Roboto-Light;
}

.hero-section form br {
	display: none;
}

.hero-section .hero-img {
	margin-top: -30px;
	position: relative;
	z-index: 0;
}

/*==================*/

.experience-section {
	padding-block: 42px 82px;
}

.experience-section .row {
	gap: 70px;
}

.experience-section .exp-img {
	width: 100%;
	max-width: 280px;
}

.experience-section .exp-img img {
	width: 100%;
	object-fit: cover;
}

/*==================*/
.about-section {
	background: #fafcf3;
	padding-block: 80px;
}

.about-section .section-heading {
	margin-bottom: 16px;
}

.about-section p {
	font: normal 18px/1 Roboto-Reg;
	margin-bottom: 20px;
}

.about-section .row {
	margin-bottom: 53px;
}

.about-section .card {
	padding: 19px 19px 37px;
	border-radius: 10px;
	height: 100%;
}

.card img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
}

.about-section .card-title {
	font: normal 24px/1.3 Roboto-Bold;
	margin-block: 30px 20px;
	min-height: 68px;
	color: #183b56;
}

.about-section .card-text {
	font: 300 18px/1.7 Roboto-Reg;
	min-height: 216px;
	color: #183b56;
	padding-right: 23px;
}

/*------------------------*/
.contact-sec {
	padding-block: 120px 105px;
	position: relative;
	z-index: 1;
	background: url(images/base.png) no-repeat center;
	background-size: cover;
}

.contact-sec::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #00aeec;
	z-index: -1;
	opacity: 0.75;
}

.contact-sec .section-heading {
	color: #fff;
	font-size: 54px;
	margin-bottom: 18px;
}

.contact-sec p {
	color: #fff;
	margin-bottom: 54px;
	font: 300 28px/1 Roboto-Reg;
}

.contact-sec .primary-btn {
	background: #fff;
	color: #00aeec;
}

/*------------------------*/
.feature-sec {
	padding-block: 83px;
}

.feature-sec .row {
	justify-content: space-between;
}

.feature-img {
	padding-left: 30px;
	width: 100%;
	max-width: 562px;
}

.feature-img img {
	width: 100%;
	height: 100%;
}

.feature-detail {
	padding-right: 50px;
}

.feature-sec .section-heading {
	text-align: start;
	line-height: 1.3;
}

.feature-detail .row:not(:last-child) {
	margin-bottom: 42px;
}

.feature-detail h3 {
	color: #183b56;
	font: 300 24px/1 Roboto-Med;
	margin-bottom: 15px;
}

.feature-detail p {
	color: #183b56;
	font: 300 16px/1.4 Roboto-Reg;
	width: 100%;
	max-width: 450px;
}

.feature-detail-img {
	position: relative;
	z-index: 1;
	margin: auto;
	display: flex;
	width: 70px;
	height: 70px;
	justify-content: center;
	border-radius: 50%;
	align-items: center;
	background-color: #fff;
	box-shadow: 0px 0px 30px #2f4c5818;
}

.feature-detail-img::after {
	content: "";
	position: absolute;
	z-index: -1;
	background: #9dc919;
	border-radius: 50%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 25px;
	height: 25px;
}

.inverted .inverted-row {
	flex-direction: row-reverse;
}

.inverted-feature-img {
	display: flex;
	gap: 20px;
	width: 100%;
	max-width: 100% !important;
}

.inverted .primary-btn {
	margin-top: 60px;
}

.inverted-feature-img img {
	width: 50%;
	height: 100%;
	object-fit: contain;
}

/*------------------------*/
.management-sec {
	padding-block: 72px 82px;
	background: #fafcf3;
}

.management-sec .section-heading {
	width: 100%;
	max-width: 644px;
	margin-inline: auto;
	line-height: 1.3;
}

.management-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: auto;
	justify-content: center;
	margin-bottom: 65px;
	padding: 0px;
}

.management-list li {
	color: #323232;
	width: 33%;
	display: flex;
	gap: 15px;
	align-items: center;
	padding: 40px 20px;
	font: 300 24px / 1 Roboto-Med;
	border: 1px solid #7070704c;
}

.management-list li:nth-child(1n) {
	border-top: 0px;
}

.management-list li:nth-child(10),
.management-list li:nth-child(11),
.management-list li:nth-child(12) {
	border-bottom: 0px;
}

.management-list li:nth-child(3n + 1) {
	border-left: 0px;
}

.management-list li:nth-child(3n) {
	border-right: 0px;
}

/*------------------------*/
.review-sec {
	background: #fafcf3;
	padding-block: 75px 100px;
}

.review-sec .container {
	max-width: 1500px;
}

.review-sec .section-heading {
	margin-bottom: 20px;
}

.review-para {
	margin-bottom: 75px;
	font: 300 18px/1 Roboto-Reg;
	color: #747474;
}

.review-item {
	padding-inline: 30px;
}

.review-item .card {
	padding: 55px 30px 45px;
}

.star-img,
.review-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.star-img {
	margin-bottom: 17px;
}

.review-img {
	margin-bottom: 25px;
}

.review-item .card-body {
	padding: 0px;
}

.review-item .card-text {
	margin-bottom: 25px;
	font: 300 24px/1 Roboto-Bold;
}

.review-item p {
	margin-bottom: 25px;
	font: 300 18px/1.2 Roboto-Reg;
	color: #6b6c6e;
	/* text-align: start; */
	min-height: 90px;
}

.review-item h4 {
	font: 300 18px/1.2 Roboto-Med;
	color: #9dc919;
	margin-bottom: 5px;
	text-transform: capitalize;
}

.review-item span {
	font: 300 18px/1.2 Roboto-Reg;
}

/*------------------------*/
.faq-sec {
	padding-block: 82px;
}

.dev-accordion {
	background-color: #fafcf3;
	border-radius: 24px;
	display: flex;
	justify-content: center;
	align-items:center;
	flex-direction:column;
	padding: 25px 36px;
	cursor: pointer;
	height: 80px;
	transition: all 0.4s;
	overflow: hidden;
}

.dev-accordion.active {
	height: 200px;
	background-color: #9dc919;
}

.dev-accordion:not(:last-child) {
	margin-bottom: 32px;
}

.accordion_box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.accordion_plus {
	display: block;
	position: relative;
	width: 30px;
	height: 30px;
}

.accordion_plus::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 3px;
	background: #373737;
}

.accordion_plus::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 3px;
	background: #373737;
	opacity: 1;
	transition: all 0.3s;
	transform: rotate(90deg);
}

.dev-accordion.active .accordion_plus::after {
	opacity: 0;
}

.dev-accordion h3 {
	font: 300 25px/1 Roboto-Med;
}

.dev-accordion p {
	font: 300 18px / 1.6 Roboto-Reg;
	color: #6b6c6e;
	overflow: hidden;
	display: none;
	transition: height 0.4s ease;
	border-top: 1px solid #d9d9d9;
	padding-top: 25px;
	margin-top: 25px;
	padding-inline: 20px;
	width:100%;
}

.dev-accordion.active p {
	display: block;
	color: #fff;
}

.dev-accordion.active h3 {
	color: #fff;
}

.dev-accordion.active .accordion_plus::before {
	background: #fff;
}

/*--------------------*/
.footer-top {
	background-color: #00aeec;
	padding-block: 90px 115px;
}

.footer-row {
	justify-content: space-between;
}

.footer-row h5 {
	font: 300 40px / 1 Roboto-Bold;
	color: #fff;
	margin-bottom: 21px;
}

.footer-para {
	font: 300 24px / 1 Roboto-Reg;
	color: #fff;
	margin-bottom: 68px;
}

footer .contact-form {
	width: 100%;
	max-width: 740px;
}

footer .contact-form p {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 22px;
	width: 100%;
}

span.wpcf7-form-control-wrap {
	width: 49%;
}

footer .contact-form input {
	width: 100%;
	height: 56px;
	background-color: #8be1ff;
	border: 0px;
	padding: 16px;
	border-radius: 8px;
}

footer .contact-form .select-container {
	width: 49%;
	height: 56px;
}
footer .contact-form .primary-btn{
background-color: #ffffff;
    color: #00aeec;
    padding: 16px 72px;
    margin-top: 20px;
    width: fit-content;
    height: auto;
}

footer .contact-form input:focus-visible {
	outline: none;
}


footer .contact-form .primary-btn:hover {
	background-color: #e2f7ff;
}

.select-container select {
	background-color: #8be1ff;
	border: 0px;
	padding: 16px;
	border-radius: 8px;
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	height: 100%;
}

select::-ms-expand {
	display: none;
}

.select-container {
	position: relative;
	display: inline-block;
}

.select-container::after {
	content: "";
	background: url(images/down-arrow.png) no-repeat right;
	width: 12px;
	height: 8px;
	font-size: 12px;
	color: #333;
	position: absolute;
	top: 50%;
	right: 19px;
	pointer-events: none;
	transform: translateY(-50%);
}

footer .contact-form input::placeholder,
.select-container select {
	font: 300 16px / 1 Roboto-Reg;
	color: #183b56;
}

.contact-list {
	margin-top: 84px;
	display: flex;
	flex-direction: column;
	gap: 35px;
	padding: 0px;
}

.contact-list li,
.contact-list li a {
	color: #fff;
	font: 300 24px / 1 Roboto-Reg;
}

.footer-bottom {
	background: #183b56;
	padding-block: 28px;
	text-align: center;
}

.footer-bottom span {
	font: 300 16px / 1 Roboto-Reg;
	color: #fff;
}

/*======= RESPONSIVE STYLING ========*/
/*============ MAX-WIDTH 1600px===========*/
@media (max-width: 1600px) {
	.contact-sec {
		padding-block: 100px;
	}
	.management-list li {
		    padding: 30px 20px;
		    font: 300 22px / 1 Roboto-Med;
	}
	.section-heading {
		font-size:40px
	}
	.footer-top{
		padding-block:80px;
	}
}

/*============ MAX-WIDTH 1450px===========*/
@media (max-width: 1450px) {
	.container {
		padding-inline: 20px;
	}

	.inverted-feature-img {
		overflow: hidden;
	}

	.review-item {
		padding-inline: 15px;
	}
}

@media (max-width: 1300px) {
	.management-list li {
		font-size: 20px;
	}
}

@media (max-width: 1220px) {
	header {
		padding-block: 30px;
	}

	.logo {
		width: 150px;
	}

	header.top .logo {
		width: 130px;
	}

	.hero-section h1 {
		font-size: 46px;
	}

	.hero-section .hero-img {
		height: 500px;
	}

	.hero-section .hero-img img {
		height: 100%;
		width: 100%;
	}

	.primary-btn {
		font-size: 16px;
		padding-inline: 30px;
	}

	.about-section .card-title {
		font: normal 21px / 1.3 Roboto-Bold;
		min-height: 50px;
	}

	.inverted .primary-btn {
		margin-top: 30px;
	}

	.feature-detail {
		padding-right: 0px;
	}

	.section-heading {
		font-size: 35px;
		margin-bottom: 40px;
	}

	.experience-section .exp-img {
		max-width: 270px;
	}

	.experience-section {
		padding-block: 42px 60px;
	}

	.about-section .card-text {
		font-size: 16px;
	}

	.about-section .card {
		padding-bottom: 25px;
	}

	.contact-sec .section-heading {
		font-size: 45px;
	}

	.feature-img {
		max-width: 480px;
		padding-left: 0px;
	}

	.feature-detail-img {
		width: 60px;
		height: 60px;
	}

	.review-item .card {
		padding: 40px 20px 40px;
	}

	.dev-accordion {
		padding: 25px 36px 30px;
		height: 80px;
	}

	/* .dev-accordion.active {
	  height: 250px;
	} */
	.dev-accordion h3 {
		font-size: 25px;
	}

	.management-list li {
		width: 33%;
		gap: 15px;
		padding: 25px 10px;
		font-size: 16px;
	}

	.management-list {
		margin-bottom: 40px;
	}

	.footer-row h5 {
		font-size: 30px;
	}

	.contact-list {
		gap: 25px;
	}

	.contact-list li,
	.contact-list li a {
		font-size: 20px;
	}

	.footer-para {
		font-size: 18px;
		margin-bottom: 50px;
	}

	.contact-sec {
		padding-block: 80px;
	}
}

/*=============  MAX-WIDTH 960px ==============*/
@media (max-width: 960px) {
	.hero-section h1 {
		font-size: 40px;
	}

	.hero-section form {
		/* max-width: 600px; */
		width: 100%;
		margin: auto;
	}

	/* .hero-section form .form-control {
		width: 100%;
	} */

	.hero-section form .primary-btn {
		padding-block: 13px;
		margin: auto;
		max-width: fit-content;
	}

	/* .hero-section .hero-img {
		margin-top: -130px;
	} */

	.hero-section .hero-img {
		height: auto;
	}

	.feature-sec .row {
		row-gap: 30px;
	}

	.feature-img {
		margin: auto;
	}

	.management-list li {
		width: 50%;
	}

	.management-list li:nth-child(3n) {
		border-left: 0px;
		border-right: 1px solid #7070704c;
	}

	.management-list li:nth-child(1n) {
		border-top: 0px;
		border-left: 0px;
	}

	.management-list li:nth-child(2n) {
		border-right: 0px;
	}

	.management-list li:nth-child(10) {
		border-bottom: 1px solid #7070704c;
	}

	.dev-accordion {
		padding-inline: 25px;
	}

	.dev-accordion p {
		padding-top: 25px;
		margin-top: 30px;
		padding-inline: 10px;
		font-size: 16px;
	}

	.accordion_plus {
		width: 20px;
		height: 20px;
	}

	.about-section .row {
		row-gap: 30px;
	}

	.about-section .card {
		padding-bottom: 25px;
	}

	.section-heading {
		font-size: 30px;
	}

	.about-section .card-text {
		min-height: 170px;
	}

	.contact-sec .section-heading {
		font-size: 35px;
	}

	.contact-sec {
		padding-block: 80px;
	}

	.contact-sec p {
		font-size: 20px;
	}

	.footer-top .row {
		row-gap: 50px;
	}

	.contact-list {
		margin-top: 40px;
	}

	.dev-accordion h3,
	.feature-detail h3 {
		font-size: 20px;
	}

	.feature-detail p {
		font-size: 16px;
	}

	.inverted .primary-btn {
		margin-top: 15px;
	}

	.dev-accordion.active {
		height: 250px;
	}

	.management-list li {
		padding: 25px;
	}

	.management-sec {
		padding-block: 75px;
	}

	.experience-section .exp-img {
		max-width: 240px;
	}
}

/*============ MAX-WIDTH 690px===========*/
@media (max-width: 690px) {
	.management-list li {
		width: 100%;
	}

	.dev-accordion {
		padding-inline: 15px;
	}

	.dev-accordion.active {
		height: 380px;
	}

	.dev-accordion p {
		padding-inline: 0px;
		font-size: 15px;
	}

	.hero-section h1 {
		font-size: 36px;
	}

	.hero-section .hero-img {
		height: 250px;
		margin-top: -140px;
	}

	.hero-section .hero-img img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	.hero-section .hero-list li {
		font-size: 18px;
	}

	.section-heading {
		font-size: 28px;
		line-height: 1.3;
	}

	.experience-section .row {
		gap: 40px;
	}

	.contact-sec .section-heading {
		font-size: 31px;
	}

	.contact-sec p {
		font-size: 18px;
		line-height: 1.4;
	}

	.feature-detail-img {
		margin: unset;
	}

	.feature-sec .row {
		row-gap: 20px;
	}

	.management-list li {
		padding-inline: 5px;
		gap: 5px;
	}

	.management-list li:nth-child(1n) {
		border-right: 0px;
	}

	.management-list li:nth-child(11) {
		border-bottom: 1px solid #7070704c;
	}

	.management-list li img {
		width: 25px;
		height: 18px;
	}

	footer .contact-form input,
	footer .contact-form .select-container {
		width: 100%;
	}

	.contact-list li,
	.contact-list li a {
		font-size: 17px;
	}

	.dev-accordion h3,
	.feature-detail h3 {
		font-size: 18px;
	}

	.footer-row h5 {
		font-size: 23px;
		line-height: 1.3;
	}

	.footer-para {
		font-size: 16px;
		margin-bottom: 30px;
		line-height: 1.3;
	}

	.contact-list {
		gap: 15px;
	}

	.footer-top {
		padding-block: 75px;
	}

	.footer-bottom {
		padding-block: 20px;
	}

	.experience-section .exp-img {
		max-width: 200px;
	}

	.logo {
		width: 130px;
	}

	header.top .logo {
		width: 120px;
	}

	.hero-section form p {
		flex-direction: column;
		row-gap: 25px;
	}

	.hero-section form .form-control {
		width: 100%;
	}

	span.wpcf7-form-control-wrap {
		width: 100%;
	}
}

.wpcf7 form .wpcf7-response-output {
	2em 0.5em 2em !important;
}
/*=========================
	End Footer CSS
===========================*/