* { margin: 0; padding: 0; box-sizing: border-box; }

body, html { font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 400; line-height: 1.5; color: #242424; }

a { text-decoration: none; color: unset; }
img { vertical-align: middle; }
ul { list-style: none; }
p { line-height: 26px; }
h1, h2, h3, h4 { font-weight: 700; color: #232323; line-height: 1.2; }
button { border: 0; outline: 0; font-family: var(--ff); letter-spacing: 1px; }


.widget-section { width: 100%; display: block; padding: 60px 16px; }
.container { max-width: 1140px; margin: auto; }

:root {

	--c1 : #b5559e;
	--c2 : #57c680;

	--bs: 0 3px 15px 0 #0000001a;
	--bs2 : 0 3.4px 2.7px -30px #0000000f, 0 8.2px 8.9px -30px #00000012, 0 25px 40px -30px #00000033;
	--bs3 : inset 0px 0px 20px 10px #00000054;
	--bs4 : 0 0px 6px 0 #0000001a;
	--bs5 : 0px 0px 12px 0px #00000026;
	--ts : all 0.5s ease-in-out;
	--fa : "Font Awesome 7 Pro";
	--fs : 40px;
	--ff : 'Nunito', sans-serif;

	--gc : linear-gradient(90deg, #57c680 0%, #b5559e 77%);
	--gch : linear-gradient(90deg, #b5559e 0%, #57c680 77%);

	--cg : linear-gradient(90deg, #ff73dd 0%, #b5559e 77%);
	--cgh : linear-gradient(90deg, #b5559e 0%, #ff73dd 77%);

}





/* ----- Title ----- */
.section-title { display: block; max-width: 750px; text-align: center; margin: auto auto 40px auto; }
.section-title h2 { display: inline-block; font-size: 32px; font-weight: 700; position: relative; text-transform: capitalize; }
.section-title h4 { font-size: 20px; font-weight: 500; margin-bottom: 5px; text-transform: uppercase; color: var(--c1); }
.section-title .style { display: block; }
.section-title .style span { display: inline-block; width: 60px; height: 3px; background: #333; }
.section-title .style span:last-child { background: var(--c1); }

@media all and (max-width: 480px) {
	.section-title h2 { font-size: 28px; }
	.section-title h4 { font-size: 16px; }
}




/* ========== ========== ========== ========== ========== ========== ==========
									Header
========== ========== ========== ========== ========== ========== ========== */

/* ---------- ----- Top Bar ----- ---------- */
.top_bar { background: var(--c1); color: #fff; padding: 12px 16px; }
.locations { display: flex; justify-content: space-between; }
.locations ul { display: flex; gap: 6px; }

.btn_call a { display: flex; align-items: center; gap: 8px; }
.btn_call i { font-size: 24px; }
.btn_call p { font-weight: 600; }

@media all and (max-width: 480px) {
	.locations { flex-direction:  column; gap: 8px; align-items: center; }
}

/* ---------- NAV BAR ---------- */
.nav_btn { margin-left: 24px; }
.act-nav { color: var(--c1)!important; }

.header { display: block; width: 100%; position: sticky; top: 0; background: #fff; box-shadow: var(--bs); z-index: 999; }
.nav-container { display: flex; justify-content: space-between; align-items: center;
	padding: 4px 0px; max-width: 1140px; margin: auto; position: relative; }

.logo { width: 116px; }
.logo img { width: 100%; height: auto; }

.navbar { display: block; }
.nav_area { display: flex; align-items: center; }

.nav_links { display: flex; }
.nav_links li { position: relative; }
.nav_links li a,
.nav_links li label { display: block; padding: 8px 12px; transition: var(--ts); font-weight: 600; position: relative; }
.nav_links li label:after { content: "\f107"; font-family: var(--fa); float: right; font-size: 12px; transition: transform 0.3s; line-height: 2;
    margin-left: 9px; }


.sub_link input { display: none; }
.sub_link:hover .sub_menu { display: block; }

.sub_menu { width: 260px; display: none; position: absolute; top: 100%; left: 0;
	background: #fff; box-shadow: var(--bs); transition: var(--ts); border-radius: 6px; z-index: 99; overflow: hidden; }
.sub_menu li a { display: block; padding: 12px 16px; font-weight: 500; }
.sub_menu li a:hover { background: #f2f2f2; }

.btn_OC { display: none; }
.btn_OC button { display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 26px; border: 0; outline: 0; background: var(--c1); color: #fff; }

/* Request */
.btn_nav { display: block; width: 160px; height: 40px; background: var(--c1); color: #fff; position: relative; border-radius: 4px; }
.btn_nav:before { content:"Book Appointment"; position: absolute; top: 0; display: block; width: 100%; height: 40px; line-height: 40px; text-align: center; transition: var(--ts); }
.btn_nav:hover:before { letter-spacing: 0.3px; }

.mobile_view { display: none; justify-content: space-between; align-items: center; }

@media all and (max-width:480px) {
	.btn_OC { display: flex; padding: 16px; justify-content: flex-end; }

	.logo { padding-left: 16px; }

	.mobile_view { display: flex; }

	.navbar { position: fixed; top: 0; left: -100%; width: 100%; height: 100%; background: #00000080; transition: var(--ts); }
	.nav_area { display: block; width: 80%; height: 100%; background: #fff; }
	.nav_links { display: block; height: 100%; overflow: scroll; }
	.nav_links li a, .nav_links li label { padding: 8px 32px; }
	.nav_links li+li { border-top: 1px solid #3333331a;}

	.sub_link:hover .sub_menu { display: none; }
	.toggle:checked ~ .sub_menu { width: 100%; display: block; position: relative; padding: 0; background: #fff0; box-shadow: unset; }

	.nav_btn { display: none; }
}


.sub_link:hover .servMenu { display: block; }
.servMenu { width: 720px; display: none; position: absolute; top: 100%; left: 0;
	background: #fff; box-shadow: var(--bs); transition: var(--ts); border-radius: 6px; z-index: 99; overflow: hidden; }

@media all and (max-width: 480px) {
	.toggle:checked ~ .servMenu { width: 100%; display: block; position: relative; padding: 0; background: #fff0; box-shadow: unset; }
}

/* Service Links */
.servArea { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px; gap: 32px; }
@media all and (max-width: 480px) {
	.servArea { grid-template-columns: repeat(1, 1fr); gap: 0px; padding: 0px 32px; }
}

/* Radio Btn */
.radioDropdown {  }
.radioDropdown:hover .radiodropMenu { display: block; }

.radioBtn { display: none; position: relative; }
.RbtnL { display: block; padding: 8px!important; font-weight: 600; color: var(--c1); position: relative; }
.RbtnL:after { content: "\f107"; display: none; font-family: var(--fa); float: right; font-size: 12px; transition: transform 0.3s; }

.radiodropMenu { display: block; transition: var(--ts); font-size: 14px!important }
.radiodropMenu li {  }
.radiodropMenu li a { display: block; padding: 6px 8px!important; transition: var(--ts); }
.radiodropMenu li a:hover { background: #f5f5f5; }

@media all and (max-width: 480px) {
	.RbtnL { color: unset; }
	.RbtnL:after { display: block; }

	.radioBtn:checked ~ .radiodropMenu { display: block; }
	.radiodropMenu { display: none; }
	.radiodropMenu li a { padding: 8px 8px 8px 16px!important; font-weight: 500; }
}



/* ========== ========== ========== ========== ========== ========== ==========
									Index CSS
========== ========== ========== ========== ========== ========== ========== */


/* ---------- ----- Banner ----- ---------- */
.carousel_banner { display: block; }
.carousel_banner .flickity-prev-next-button { border-radius: 2px; background: var(--c1); color: #fff; border: 2px solid #fff;  }
.carousel_banner .flickity-prev-next-button:hover { background: var(--c2); border: 2px solid var(--c2); }
.carousel_slide { width: 100%; display: inline-block; overflow: hidden; }

.banner { width: 100%; height: 80vh; display: flex; }
.banner_row { width: 70%; margin: auto; display: flex; align-items: center; grid-gap: 24px; padding: 16px; }
.banner_col { display: block; }

.banner_text { width: 60%; }
.banner_text h1 { font-size: 38px; color: unset; }
.banner_text h1 span { display: block; font-weight: 500; }
.banner_text p { margin-top: 12px; }

.banner_img { display: block; position: relative; margin-bottom: -23%; }
.banner_img img { width: 100%; height: auto; }

.banner_img1 { display: block; width: 80%; margin: auto; }
.banner_img1 img { display: block; width: 100%; height: auto; border-radius: 50%; }

.banner_btns { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; }
.banner_btns a { display: inline-block; width: 180px; padding: 14px 0; text-align: center; border-radius: 4px; font-size: 15px; color: #fff; transition: var(--ts); }
.btn1 { background: var(--c1); }
.btn2 { background: var(--c2); }
.btn1:hover { background: var(--c2); }
.btn2:hover { background: var(--c1); }

.bg_banner1 { background: url("assets/images/banner1.jpg")no-repeat center / cover; }
.bg_banner2 { background: url("assets/images/banner2.jpg")no-repeat center / cover; }


@media all and (max-width: 480px) {
	.carousel_banner .flickity-prev-next-button { width: 32px; height: 32px; }
	.banner { height: 55vh; position: relative; z-index: 1;  }
	.banner:before { content: ''; width: 100%; height: 100%; background: #f2f5fac4; position: absolute; top: 0; left: 0; z-index: -1; }
	.banner_row { width: 100%; padding: 40px; }

	.banner_text { width: 100%; }
	.banner_text h1 { font-size: 24px; }
	.banner_text h1 span { display: inline; }

	.bg_banner1 { background: url("assets/images/banner1.jpg")no-repeat right center / cover; }
	.bg_banner2 { background: url("assets/images/banner2.jpg")no-repeat right center / cover; }

	.banner_btns { gap: 8px; margin-top: 16px; }
	.banner_btns a { width: 150px; padding: 9px 0px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.carousel_banner .flickity-prev-next-button { width: 32px; height: 32px; }
	.banner { height: 46vh;}
	.banner_row { width: 100%; padding: 60px; }

	.banner_text { width: 60%; }
	.banner_text h1 { font-size: 30px; }
	.banner_text h1 span { display: inline; }

	.banner_btns { gap: 16px; }
	.banner_btns a { width: 150px; padding: 9px 0px; }
}

@media (min-width: 998px) and (max-width: 1024px) {
	.carousel_banner .flickity-prev-next-button { width: 32px; height: 32px; }
	.banner { height: 60vh;}
	.banner_row { width: 100%; padding: 60px; }

	.banner_text { width: 60%; }
	.banner_text h1 { font-size: 30px; }

	.banner_btns { gap: 16px; }
	.banner_btns a { width: 150px; padding: 9px 0px; }
}



/* ---------- ----- Locations ----- ---------- */
.locations_ { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; }
.location_ { display: block; width: 100%; background: #fff; border-radius: 12px; box-shadow: var(--bs); overflow: hidden; }

.location_img { display: block; width: 100%; }
.location_img img { width: 100%; height: auto; }

.location_txt { display: block; text-align: center; padding: 24px 16px; }
.location_txt h3 { font-size: 20px; transition: var(--ts); }

.location_btn { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--c1); }
.location_btn a {  }
.location_btn a i { color: var(--c1); margin-right: 6px; }

.location_:hover .location_txt h3 { color: var(--c1); }

@media all and (max-width: 480px) {
	.locations_ { grid-template-columns: repeat(1, 1fr); }
}



/* ---------- ----- Service ----- ---------- */
.row_service_ { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.col_service_ { display: block; position: relative; border-radius: 12px; background: #fff; box-shadow: var(--bs); overflow: hidden; }

.service_img_ { display: block; width: 100%; }
.service_img_ img { width: 100%; height: auto; }
.service_txt_ { display: block; width: 100%; padding: 32px 24px; text-align: center; }
.service_txt_ h3 { font-size: 32px; color: var(--c1); }
.service_txt_ p { margin-top: 9px; }

.anchor_btn { display: inline-block; padding: 12px 32px; background: var(--cg); color: #fff; border-radius: 50px; margin-top: 16px; transition: var(--ts); }
.anchor_btn:hover { background: var(--cgh); }

@media all and (max-width: 480px) {
	.row_service_ { grid-template-columns: repeat(1, 1fr); }
}


/* ---------- ----- Doctors ----- ---------- */
.staff_row_ { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; }
.staff_card_ { background: #fff; border-radius: 12px; box-shadow: var(--bs); padding: 24px 16px;  }
.staff_thumb { width: 160px; height: 160px; border-radius: 12px; border: 1px solid #f3f3f3; margin: auto; }
.staff_thumb img { width: 100%; height: auto; }
.staff_text { text-align: center; margin-top: 24px; }
.staff_text h3 { color: var(--c1); }
.staff_text p { font-weight: 600; margin-top: 4px; }
.staff_text ul { text-align: left; margin-top: 16px; }
.staff_text ul li+li { margin-top: 4px; }
.staff_text ul li b { color: var(--c1); }

@media all and (max-width: 480px) {
	.staff_row_ { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	.staff_row_ { grid-template-columns: repeat(3, 1fr); }
}


/* ---------- ----- Choose Us ----- ---------- */
.section__choose { display: block; position: relative; padding: 60px 16px 0px 16px; }
.choose__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.choose__col {  position: relative; }
.choose__col:first-child { width: 65%; }
.choose__col:last-child  { width: 35%; }

.choose__title { margin-bottom: 32px; }
.choose__title h4 { margin-bottom: 8px; color: var(--c1); }
.choose__title h2 { font-size: 42px; }

.choose__subrow { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.choose__subcol { display: flex; justify-content: space-between; position: relative; }
.choose__icon { display: block; width: 20%; font-size: 52px; color: var(--c1); }

.choose__text { width: 80%; margin-left: 16px; }
.choose__text h3 { font-size: 20px; color: var(--c1); }
.choose__text p { margin-top: 9px; }

.choose__img { width: 90%; margin: auto; }
.choose__img img { width: 100%; height: auto; }

@media all and (max-width: 480px) {
	.choose__row { flex-direction: column; }
	.choose__col:first-child { width: 100%; }
	.choose__col:last-child  { width: 100%; }

	.choose__title { margin-bottom: 32px; }
	.choose__title h4 { margin-bottom: 8px; color: var(--c1); }
	.choose__title h2 { font-size: 28px; }

	.choose__img { width: 65%; margin: auto; }

	.choose__subrow { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	.section__choose { padding: 60px 16px; }
	.choose__row { gap: 16px; }
	.choose__subrow { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 998px) and (max-width: 1024px) {
	.choose__col:first-child { width: 60%; }
	.choose__col:last-child  { width: 40%; }
}



/* ---------- ----- Counter ----- ---------- */
.section_counter { width: 100%; display: block; padding: 100px 16px; position: relative; }
.bg_counter { background: linear-gradient(to bottom, #ff73dd 0%, #b5559e 77%); }
.counter_row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; }
.counter_col { display: block; width: 100%; text-align: center; color: #fff; }
.counter_col i { display: inline-block; font-size: 60px; margin-bottom: 16px; }
.counter_col span { display: block; font-size: 42px; }
.counter_col p { font-size: 16px; font-weight: 500; }

.counter_col:nth-child(2) span:after { content: "+" }
.counter_col:nth-child(3) span:after { content: "+" }

@media all and (max-width: 480px) {
	.counter_row { grid-template-columns: repeat(2, 1fr); }
	.counter_col span { font-size: 40px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.counter_col span { font-size: 40px; }
}

@media (min-width: 998px) and (max-width: 1024px) {
	.section_counter { padding: 60px 16px; }
	.counter_col i { display: inline-block; font-size: 40px; margin-bottom: 16px; }
	.counter_col span { display: block; font-size: 32px; }
	.counter_col p { font-size: 16px; font-weight: 500; }
}



/* ---------- ----- Services ----- ---------- */
.row__service { display: grid; grid-template-columns: repeat(2, 1fr); }
.col__service { display: flex; justify-content: space-between; align-items: center; background: #f9f9f9; }

.col__service:nth-child(1) { grid-column: 1/ span 2; }
.col__service:nth-child(2) {  }
.col__service:nth-child(3) { flex-direction: row-reverse; }
.col__service:nth-child(4) { grid-column: 1/ span 2; flex-direction: row-reverse; }
.col__service:nth-child(5) {  }
.col__service:nth-child(6) { flex-direction: row-reverse; }
.col__service:nth-child(7) { grid-column: 1/ span 2; }

.service__img { display: block; width: 100%; }
.service__img img { display: block; width: 100%; height: 300px; object-fit: cover; }
.service__txt { display: block; width: 100%; padding: 32px 24px; text-align: center; }
.service__txt h3 { font-size: 22px; color: var(--c1); }
.service__txt p { margin-top: 9px; }
.service__txt a { display: inline-block; padding: 8px 24px; background: var(--cg); color: #fff; border-radius: 50px; margin-top: 16px; transition: var(--ts); }
.service__txt a:hover { background: var(--cgh); }

@media all and (max-width: 480px) {
	.row__service { grid-template-columns: repeat(1, 1fr); grid-gap: 16px; }
	.col__service { flex-direction: column; background: #fff; border-radius: 12px; box-shadow: var(--bs); overflow: hidden; }

	.col__service:nth-child(1) { grid-column: unset; }
	.col__service:nth-child(2) {  }
	.col__service:nth-child(3) { flex-direction: column; }
	.col__service:nth-child(4) { grid-column: unset; flex-direction: column; }
	.col__service:nth-child(5) {  }
	.col__service:nth-child(6) { flex-direction: column; }
	.col__service:nth-child(7) { grid-column: unset; }
	.service__img img { height: auto; }
}



/* ---------- ----- Tesimonials ----- ---------- */
.tesimonial_row { display: grid; grid-template-columns: 32% 66%; grid-gap: 3%; }
.tesimonial_col { display: block; width: 100%; position: relative; }

.tesimonial__text { display: block; }
.tesimonial__text span { display: block; color: var(--c1); margin-bottom: 9px; }
.tesimonial__text h3 { font-size: 32px; }
.tesimonial__text p  { margin-top: 12px; }

.tesimonial-carousel { display: block; width: 100%; position: relative; overflow: hidden;  }
.tesimonial-carousel .tesimonial_slide { width: 50%; display: inline-block; overflow: hidden; padding: 16px 8px; }

.tesimonial { display: block; padding: 24px; background: #fff; box-shadow: var(--bs4); border-radius: 9px; }
.tesimonial_star { display: block; margin-bottom: 12px; }
.tesimonial_text { display: block; width: 100%; height: 138px; padding-right: 8px; overflow-y: auto; }
.tesimonial_text p { text-align: justify; }

.tesimonial_profile { display: flex; align-items: center; gap: 16px; padding-top: 16px; margin-top: 16px; border-top: 1px solid #ddd; }
.tesimonial_thumb { display: block; width: 62px; height: 62px; border-radius: 50px; overflow: hidden; box-shadow: var(--bs5); }
.tesimonial_thumb img { width: 100%; height: auto; }
.tesimonial_info {  }
.tesimonial_info p { font-size: 14px; margin-top: 4px; }

@media all and (max-width:480px) {
	.tesimonial_row { grid-template-columns: repeat(1, 1fr); grid-gap: 16px; }
	.tesimonial-carousel .tesimonial_slide { width: 100%; }
}


/* ---------- ----- Blog ----- ---------- */
.blog-area .row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; }
.blog-area .row .col { display: block; width: 100%; background: #fff; box-shadow: 0 5px 30px 0 #d6d7d891; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; }
.blog-area .row .col img { width: 100%; height: auto; }

.blog-text { padding: 30px; }
.blog-text ul { display: flex; margin-bottom: 16px; }
.blog-text ul li+li { margin-left: 16px; }
.blog-text ul li i { color: var(--c1); margin-right: 6px; }
.blog-text h3 { font-size: 18px; margin-bottom: 16px; font-weight: 600; color: var(--c1); }
.blog-text p { text-align: justify; }
.blog-text a { display: inline-block; padding: 10px 30px; background: var(--cg); color: #fff;
	border: 1px solid #ddd; border-radius: 50px; margin-top: 24px; font-size: 16px; font-weight: 600; transition: 0.5s; }
.blog-text a:hover { background: var(--cgh); }

@media all and (max-width: 480px) {
	.blog-area .row { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 500px) and (max-width: 992px) {
	.blog-area .row { grid-gap: 16px; }
}

@media (min-width: 500px) and (max-width: 1024px) {
	.blog-text { padding: 30px 16px; }
}




/* ========== ========== ========== ========== ========== ========== ==========
									Page CSS
========== ========== ========== ========== ========== ========== ========== */

/* ---------- Page Banner ---------- */
.page_banner { width: 100%; position: relative; background: url('assets/images/page_banner.jpg')no-repeat center / cover; z-index: 1; }
.page_banner:before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #b5559eb0; z-index: -1; }
.page_banner_info { padding: 120px 16px; text-align: center; }
.page_banner_info h1 { font-size: 42px; color: #fff; }
.page_banner_info ul { display: inline-flex; margin-top: 16px; }
.page_banner_info ul li+li { margin-left: 12px; }
.page_banner_info ul li { font-weight: 600!important; }

@media all and (max-width: 480px) {
	.page_banner { background: url('assets/images/page_banner.jpg')no-repeat right / cover; }
	.page_banner_info { padding: 80px 16px; }
	.page_banner_info h1 { font-size: 28px; }
}




/* ========== ========== ========== ========== ========== ========== ==========
									Service Page
========== ========== ========== ========== ========== ========== ========== */

/* ----- SERVICE PAGE ----- */
.widget-service { display: block; position: relative; padding: 60px 16px; }
.service-row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }
.service-page-col { width: 100%; display: block; }
.sc1 { height: fit-content; }
.sc2 {  grid-column: 1 / span 2; }

/* LEFT SIDE CONTENT */
.service-details__image { display: block; margin-bottom: 30px; }
.service-details__image img { width: 100%; object-fit: cover; border-radius: 10px; }

/* text */
.service-details__text h1 { font-size: 32px; color: var(--c1); margin-bottom: 24px; }
.service-details__text h1 span { display: block; }
.service-details__text h2 { font-size: 26px; margin-bottom: 16px; }
.service-details__text p+p { margin-top: 8px;}

/* Choose */
.service-details__choose { margin-top: 32px; }
.service-details__choose h3 { font-size: 26px; color: var(--c1); }
.details__choose__ { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; margin-top: 24px; }
.details__choose_ { width: 100%; background: #fff; box-shadow: var(--bs); border-radius: 12px; padding: 24px 16px; }

.details__choose_text { margin-top: 24px; }
.details__choose_text h4 { font-size: 18px; text-align: center; }
.details__choose_text p { text-align: justify; margin-top: 9px; }

/* Info */
.service-details__info { margin-top: 32px; }
.service-details__info h3 { font-size: 26px; color: var(--c1); }
.service-details__info p { margin-top: 16px; }
.service-details__info ul { margin: 16px 0 0 16px; }
.service-details__info ul li+li { margin-top: 9px; }
.service-details__info ul li:before { content: '\f058'; margin-right: 9px; color: var(--c1); font-family: var(--fa); font-weight: 900; }


/* WIDGET ANCHOR */
.widget_anchor { width: 100%; padding: 30px 24px; position: relative; border: 1px solid #efeef5; box-shadow: var(--bs); border-radius: 12px; }
.widget_anchor h3 { font-size: 28px; margin-bottom: 16px; }

.category_list { display: block; position: relative; }
.category_list li+li { margin-top: 12px; }

.category_list li { display: block; position: relative; background: #ffeffb; transition: all 0.3s ease; border-radius: 4px; overflow: hidden; z-index: 1; }
.category_list li:before { content: ''; position: absolute; bottom: 0; right: 0; left: 0;
	background: var(--cg); width: 0; height: 100%; transition: .3s ease; overflow: hidden; z-index: -1; }

.category_list li a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 500; }

.category_list li:hover:before { width: 100%; }
.category_list li:hover { color: #fff; }

.act_link { background: var(--cg)!important; color: #fff; }

@media all and (max-width: 498px) {
	.service-row { grid-template-columns: repeat(1, 1fr); }
	.sc2 {  grid-column: unset; grid-row: unset; }

	.service-details__text h2 { font-size: 24px; text-align: center; }

	/* Choose */
	.service-details__choose h3 { font-size: 24px; text-align: center; }
	.details__choose__ { grid-template-columns: repeat(1, 1fr); }

	/* Info */
	.service-details__info h3 { font-size: 24px; text-align: center; }
}


@media (min-width: 500px) and (max-width: 992px) {
	.service-row { grid-template-columns: repeat(1, 1fr); }
	.sc2 {  grid-column: unset; grid-row: unset; }
}



/* ========== ========== ========== ========== ========== ========== ==========
									Blog Page
========== ========== ========== ========== ========== ========== ========== */

.widget-blog { display: block; position: relative; padding: 60px 0px; }
.blog-row { display: flex; justify-content: space-around; }
.blog-col { display: block; position: relative; padding: 16px; }
.blog-col:first-child { width: 68%; }
.blog-col:last-child { width: 32%; }

@media all and (max-width: 498px) {
	.blog-row { flex-direction: column; }
	.blog-col:first-child { width: 100%; }
	.blog-col:last-child { width: 100%; }	
}

@media (min-width: 500px) and (max-width: 998px) {
	.blog-row { flex-direction: column; }
	.blog-col:first-child { width: 100%; }
	.blog-col:last-child { width: 100%; }
}

/* Blog page area */
.blog-poster+.blog-poster { margin-top: 36px; }
.blog-poster { display: block; position: relative; box-shadow: 0 5px 30px 0 #d6d7d891; border-radius: 10px; background: #ffffff; overflow: hidden; }
.blog-poster .thumb { display: block; padding: 15px; }
.blog-poster .thumb img { width: 100%; height: 43vh; object-fit: cover; display: block; }
.blog-poster .info { padding: 15px 30px 30px 30px; }
.blog-poster .info ul { display: flex; margin-bottom: 16px; }
.blog-poster .info ul li+li { margin-left: 16px; }
.blog-poster .info ul li i { color: var(--c1); margin-right: 6px; }
.blog-poster .info h3 { font-size: 24px; margin-bottom: 15px; }
.blog-poster .info a { display: inline-block; padding: 12px 32px; background: var(--cg); color: #fff; border-radius: 50px; margin-top: 24px; font-size: 16px; transition: 0.5s; }
.blog-poster .info a:hover { background: var(--cgh); }


/* ----- Blog Page ----- */

.blog_img { display: block; border: 1px solid #ddd; border-radius: 12px; overflow: hidden; }
.blog_img img { width: 100%; height: 43vh; object-fit: cover; display: block; }

.blog__page { display: block; position: relative; }
.blog__page h1 { font-size: 38px; margin-top: 24px; }
.blog__page h2 { font-size: 26px; margin-top: 24px; }
.blog__page h4+h3 { margin-top: 14px; }
.blog__page h3 { font-size: 18px; margin-top: 24px; }
.blog__page p { margin-top: 10px; }


.blog__page__text { display: block; margin-top: 32px; }
.blog__page__text h3 { font-size: 20px; }
.blog__page__text p { margin-top: 9px; }
.blog__page__text ul { margin: 9px 0 0 16px; list-style: disc; }
.blog__page__text ul li+li { margin-top: 9px; }

@media all and (max-width: 498px) {
	.blog_img img { height: 100%; }
}


/* ----- Blog Side bar ----- */
.sidebar-item+.sidebar-item { margin-top: 46px; }
.sidebar-item h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 30px; position: relative; z-index: 1; }

.recent-post .thumb  { display: table-cell; width: 100px; }
.recent-post .thumb img { width: 100%; height: auto; }
.recent-post ul li .info { display: table-cell; color: #837f7e; line-height: 26px; padding: 0 0 0 16px; vertical-align: top; }
.recent-post ul li+li { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ddd; }
.recent-post ul li .info ul { display: flex; font-size: 13px; margin-top: 12px; }
.recent-post ul li .info ul li+li { margin-left: 12px; margin-top: 0; padding-top: 0; border-top: 0; }
.recent-post ul li .info ul li i { color: var(--c1); margin-right: 6px; }
.recent-post ul li .info a { color: #666666; text-decoration: inherit; font-weight: 800; font-size: 16px; }

.sidebar-item.gallery .images { display: flex; flex-wrap: wrap; }
.sidebar-item.gallery .images img { width: 33.33%; padding: 7px;  }

.sidebar-item.follow { display: block; }
.sidebar-item.follow i { width: 40px; height: 40px; line-height: 40px; text-align: center; background: #f7f7fe; border-radius: 4px; transition: 0.5s; }
.sidebar-item.follow i:hover { background: var(--c1); color: #fff; }

.sidebar-item.tags ul li { display: inline-block; padding: 12px; border: 1px solid #ddd; border-radius: 30px; margin-bottom: 12px; }





/* ========== ========== ========== ========== ========== ========== ==========
									BRANCH PAGE
========== ========== ========== ========== ========== ========== ========== */

/* ----- FORM ----- */
.form__ { display: block; width: 100%; }
.form__ form { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.form__ input,
.form__ select,
.form__ textarea { display: block; width: 100%; padding: 14px; border-radius: 6px; border: 1px solid #ddd; font-family: var(--ff1); outline-color: var(--c1); }
.form__ textarea { border-radius: 12px; }
.form__ button { display: block; width: 100%; padding: 12px; background: var(--cg); color: #fff; border-radius: 50px; transition: var(--ts); }
.form__ button:hover { background: var(--cgh); }


/* ---------- ----- Banner ----- ---------- */
.banner_sec { background: var(--c1); position: relative; z-index: 2; }
.banner_sec:before { content: ""; position: absolute; top: 0; left: 0;
	display: block; width: 100%; height: 100%; background: url(assets/images/banner_inner.png) no-repeat center / cover; z-index: 1; }

.banner__row { display: flex; justify-content: space-between; align-items: center; gap: 32px; position: relative; z-index: 2; }
.banner__col { display: block; width: 100%; position: relative; }
.banner__text_ {  }
.banner__text_ span { display: inline-block; padding: 8px 16px; background: var(--c1); color: #fff; border-radius: 50px; margin-bottom: 12px; }
.banner__text_ h1 { font-size: 42px; }
.banner__text_ p { margin-top: 16px; }

.banner_form { display: block; width: 80%; margin: auto; border-radius: 12px; background: #fff; box-shadow: var(--bs); overflow: hidden; }
.form_title { text-align: center; padding: 16px; background: var(--c1); }
.form_title h3 { color: #fff; }
.banner_form .form__ { padding: 24px; }

@media all and (max-width: 480px) {
	.banner__row { flex-direction: column; }
	.banner_form { width: 100%; }
	.banner__text_ h1 { font-size: 28px; }
}


/* ---------- ----- Doctors ----- ---------- */
.doctors__row { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; }

.doctor__ { display: flex; justify-content: space-between; flex-direction: column; padding: 24px 16px; background: #fff; box-shadow: var(--bs); border-radius: 12px; }
.doctor__img { display: block; width: 40%; margin: auto; border-radius: 12px; overflow: hidden; }
.doctor__img img { width: 100%; height: auto; }

.doctor__txt { width: 100%; }
.doctor__txt ul { text-align: left; margin-top: 12px; font-size: 14px; }
.doctor__txt ul li+li { margin-top: 4px; }
.doctor__txt ul li b { color: var(--c1); }

.doctor_info { text-align: center; margin-top: 16px; }
.doctor_info h3 { font-size: 16px; color: var(--c1); }
.doctor_info p { font-weight: 600; margin-top: 4px; }

.doctor__btn { display: block; text-align: center; margin-top: 16px; }
.consult_btn { display: inline-block; padding: 12px 32px; background: var(--cg); color: #fff; border-radius: 50px; }

@media all and (max-width: 480px) {
	.doctors__row { grid-template-columns: repeat(1, 1fr); }
}


/* ---------- POPUP MODEL ---------- */
.modal { display: none; position: fixed; z-index: 9999; padding-top: 100px; left: 0; top: 0;
  width: 100%; height: 100%; overflow: auto; background: #00000080; }

.modal-content { background: #fefefe; margin: auto; border: 1px solid #888; width: 340px; border-radius: 12px; overflow: hidden;  }

.modal-head { display: flex; justify-content: space-between; align-items: center; text-align: center; padding: 16px; background: var(--c1); color: #fff; }
.modal-head h3 { font-size: 22px; color: #fff; }
.modal-head .close { color: #fff; font-size: 28px; font-weight: 500; }
.modal-body { display: block; width: 100%; padding: 16px; }

/* ----- FORM ----- */
.form___ { display: block; width: 100%; }
.form___ form { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.form___ input,
.form___ select,
.form___ textarea { display: block; width: 100%; padding: 14px; border-radius: 6px; border: 1px solid #ddd; font-family: var(--ff1); outline-color: var(--c1); }
.form___ textarea { border-radius: 12px; }
.form___ button { display: block; width: 100%; padding: 12px; background: var(--cg); color: #fff; border-radius: 50px; transition: var(--ts); }
.form___ button:hover { background: var(--cgh); }




/* ---------- ----- Section Services ----- ---------- */
.section_services_ { display: block; width: 100%; padding: 0px 16px; }
.service_row_ { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; }
.service_col_ { display: flex; align-items: center; border-radius: 12px; box-shadow: var(--bs); }
.service_col_:nth-child(1) { background: #fff1f6; }
.service_col_:nth-child(2) { background: #f1f1e5; }

.service__img_ { width: 40%; display: block; }
.service__img_ img { width: 100%; height: auto; }

.service__txt_ { display: block; width: 60%; padding: 16px; }
.service__txt_ h3 { font-size: 32px; }
.service__txt_ p { margin-top: 16px; }

@media all and (max-width: 480px) {
	.service_row_ { grid-template-columns: repeat(1, 1fr); }
	.service__txt_ h3 { font-size: 26px; }
}

/* ----- Services ----- */
.service__slider { margin-top: 60px; }
.service__slide { display: inline-block; width: 16.666%; padding: 8px; }
.service__slider .flickity-page-dots { z-index: 2; }
.service__slider .flickity-page-dots .dot { display: inline-block;
	width: 16px; height: 16px; margin: 0 6px; background: #fff0; border-radius: 50%; cursor: pointer; position: relative; }
.service__slider .flickity-page-dots .dot:before { content: "⦿"; color: var(--c1); }

.service__ { display: block; width: 100%; padding: 24px 16px; background: #fff; border-radius: 12px; box-shadow: var(--bs4); }
.service__icon { display: block; width: 82px; height: 82px; margin: auto; }
.service__icon img { width: 100%; height: auto; }
.service__title { display: block; text-align: center; margin-top: 16px; }
.service__title h3 { transition: var(--ts); }
.service__title h3 span { display: block; }
.service__:hover .service__title h3 { color: var(--c1); }

@media all and (max-width: 480px) {
	.service__slide { width: 50%; }
}


/* ---------- ----- ABOUT US ----- ---------- */
.about_sec { background: url(assets/images/banner_inner.png) no-repeat center / cover; }
.about__row { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 24px; }
.about__col { display: block; width: 100%; position: relative; }

.about__image { display: block; width: 100%; }
.about__image img { width: 100%; height: auto; }

.about__text { display: block; }
.about__text span { display: block; color: var(--c1); margin-bottom: 8px; }
.about__text h3 { font-size: 24px; }
.about__text p  { margin-top: 12px; text-align: justify; }

@media all and (max-width: 480px) {
	.about__row { grid-template-columns: repeat(1, 1fr); }
}

/* SERVICE PAGE */	
.serviceRow { display: flex; justify-content: space-between; gap: 32px; }
.serviceCol { display: block; position: relative; }
.serviceCol:nth-child(1) { width: 65%; }
.serviceCol:nth-child(2) { width: 35%; }

.service_artical { display: block; width: 100%; }
.service_artical hr { margin: 32px 0px; border: none; height: 1px; background-color: #ddd; }
.service_artical h1 { font-size: 32px; color: var(--c1); }
.service_artical h3 { font-size: 24px; color: var(--c1); }
.service_artical p  { margin-top: 16px; text-align: justify; }

.services_grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; margin-top: 16px; }
.services_item { display: block; padding: 24px 16px; position: relative; background: #fff; box-shadow: var(--bs); border-radius: 8px; }
.services_item .icon { display: block; width: 72px; height: 72px; line-height: 72px;
	text-align: center; margin: auto; background: #b5559e1a; color: var(--c1); font-size: 32px; border-radius: 50px; }
.services_item .text { display: block; text-align: center; margin-top: 24px; }

.service_grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; margin-top: 16px; }
.service_gridItem { display: block; text-align: center; padding: 24px 16px; background: #fff; border-radius: 8px; box-shadow: var(--bs); }
.service_gridItem i { width: 72px; height: 72px; line-height: 72px;
	text-align: center; background: #b5559e1a; color: var(--c1); border-radius: 50%; font-size: 35px; }
.service_gridItem h4 { margin-top: 20px; }
.service_gridItem p  { margin-top: 9px; }

@media all and (max-width: 480px) {
	.serviceRow { flex-direction: column; }
	.serviceCol:nth-child(1) { width: 100%; }
	.serviceCol:nth-child(2) { width: 100%; }

	.service_artical h1 { font-size: 24px; text-align: center; }
	.service_artical h3 { text-align: center; }

	.services_grid { grid-template-columns: repeat(1, 1fr); }
	.service_grid { grid-template-columns: repeat(1, 1fr); }
}




/* ========== ========== ========== ========== ========== ========== ==========
								Book A Appointment CSS
========== ========== ========== ========== ========== ========== ========== */

.appointment_banner { width: 100%; display: block; padding: 16px; background: var(--c1); box-shadow: var(--bs3); }
.appointment_ban_ { display: block; }
.appointment_ban_ ul { display: flex; gap: 6px; color: #fff; }
.appointment_ban_ ul li {  }


.appointment { display: block; padding: 60px 16px; position: relative; background: var(--c1); z-index: 1; }
.appointment:before { content: ''; display: block; width: 100%; height: 40%;
	background: url('assets/images/appointment-wave.png')no-repeat top / cover; position: absolute; top: 0; left: 0; z-index: -1; }
.appointment_row { display: flex; align-items: flex-end; gap: 32px; }
.appointment_col { display: block; }

.appointment_col:nth-child(1) { width: 45%; }
.appointment_col:nth-child(2) { width: 55%; }

.appointment_img {  }
.appointment_img img { width: 100%; height: auto; }

.appointment_form { display: block; border-radius: 12px; background: #fff; padding: 42px; }
.appointment_form h3 { font-size: 32px; text-align: center; }
.input_group { display: flex; gap: 22px; margin-top: 22px; }
.input_ { display: block; width: 100%; }
.input_ label { display: block; margin-bottom: 6px; font-weight: 600; }
.input_ input,
.input_ select,
.input_ textarea { width: 100%; display: block; padding: 12px 16px; border: 1px solid #d1d1d1; border-radius: 6px; color: #242424; }
.input_ button { padding: 12px 52px; border-radius: 50px; background: var(--cg); color: #fff; border: 0; }
.input_ button:hover { background: var(--cgh); }

/*  */
.appointment__ { display: block; padding: 32px 16px; background: #ffd2f5; text-align: center; border-radius:12px; }
.appointment__title { display: block; text-align: center; margin-bottom: 24px; }
.appointment__title h3 { font-size: 32px; }
.appointment__title p { margin-top: 12px; }

.appointment__flex { display: inline-flex; gap: 16px; margin: auto; }
.appointment__flex a { display: flex; align-items: center; gap: 4px;
	padding: 8px 16px; background: var(--c1); color: #fff; font-size: 20px; border-radius: 8px; transition: var(--ts); }
.appointment__flex a i { margin-right: 12px; }
.appointment__flex a:hover { background: #fff; color: var(--c1); }


@media all and (max-width: 480px) {
	.appointment_row { flex-direction: column; }
	.appointment_col:nth-child(1) { width: 100%; }
	.appointment_col:nth-child(2) { width: 100%; }

	.appointment_form { padding: 32px 22px; }
	.input_group { flex-direction: column; }

	.appointment__flex { flex-direction: column; }
}




/* ========== ========== ========== ========== ========== ========== ==========
									Contact Page
========== ========== ========== ========== ========== ========== ========== */

/* ---------- ----- Contact Page ----- ---------- */
.contact-area { overflow: hidden; }
.contact-area .row { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 32px; }

.contact-col { width: 100%; display: block; position: relative; }
.cc2 { grid-column: 2 / span 3; }

.address-items { padding: 60px 30px; background: var(--gc); position: relative; }
.address-items::before,
.address-items::after  { content: ""; position: absolute; right: -50px; top: -50px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; }
.address-items::before { width: 180px; height: 180px; }
.address-items::after { width: 150px; height: 150px; }
.address-items .item+.item { margin-top: 32px; padding-top: 32px; border-top: 1px dashed #ddd; }
.address-items .item >* { color: #fff; }
.address-items .item h3 { font-size: 24px; margin-bottom: 16px; }
.address-items .item a { display: block; }
.address-items .item a+a { margin-top: 8px; }

.contact-form { display: block; }
.contact-form h2 { font-size: 32px; font-weight: 200; margin-bottom: 30px; }
.contact-form h2 strong { display: block; font-weight: 900; }
.contact-form input,
.contact-form textarea { width: 100%; padding: 0px 20px; background: #f7f7f7; font-size: 16px; line-height: 48px; border: 0; border-radius: 2px; }
.contact-form button { font-weight: 600; padding: 16px 40px; background: var(--gc); color: #fff; border-radius: 50px; border: 0; outline: 0; margin-top: 24px; }
.contact-form button:hover { background: var(--gch); }
.flex-input { width: 100%; display: flex; gap: 32px; margin: 24px 0; }

.maps { display: block; }
.maps iframe { width: 100%; height: 450px; vertical-align: middle; border: 0; }

@media all and (max-width: 480px) {
	.contact-area .row { grid-template-columns: repeat(1, 1fr); }
	.cc2 { grid-column: unset; }

	.flex-input { flex-direction: column; gap: 24px; }
}

@media (min-width: 500px) and (max-width: 992px) {
	.contact-area .row { grid-template-columns: repeat(2, 1fr); grid-gap: 16px; }
	.cc2 { grid-column: unset; }
	.contact-form h2 { font-size: 30px; }
}








/* ========== ========== ========== ========== ========== ========== ==========
									Fixed Button
========== ========== ========== ========== ========== ========== ========== */

.fixed_btns { width: 100%; display: flex; justify-content: flex-end; padding: 0px 60px; position: fixed; bottom: 60px; z-index: 99; }
.fixed_btn { display: block; width: 62px; position: relative; }
.fixed_btn img { width: 100%; height: auto; }

@media all and (max-width: 480px) {
	.fixed_btns { padding: 0px 24px; bottom: 24px; }
	.fixed_btn { width: 42px; }
}



/* ========== ========== ========== ========== ========== ========== ==========
									Footer
========== ========== ========== ========== ========== ========== ========== */

.footer { width: 100%; display: block; background: #b5559e1a; }

.footer-area .row { display: grid; grid-template-columns: 28% 42% 28%; grid-gap: 10px; }
.footer-upper { max-width: 1140px; margin: auto; padding: 80px 16px 40px 16px; }

.footer-col { width: 100%; display: block; }
.footer-col h3 { font-size: 24px; font-weight: 700; margin-bottom: 30px; text-transform: uppercase; color: unset; }
.footer-col p { color: unset; }
.footer-col img { display: block; width: 180px; height: auto; margin-bottom: 24px; }
.footer-col a:hover { color: var(--c2); }

.footerLinks { display: flex; justify-content: space-between; gap: 16px; }
.foot-link li a { display: block; padding: 6px; transition: 0.5s; }
.foot-link li a:before { content: '❯'; font-weight: 600; color: var(--c1); margin-right: 2px; }

.foot-info li+li { margin-top: 24px; }
.foot-info h4 { display: flex; align-items: center; font-weight: 600; margin-bottom: 8px; color: var(--c1);  }
.foot-info h4 i { width: 35px; font-size: 20px; margin-right: 0px; color: var(--c1); }
.foot-info a { display: block; margin-left: 35px; transition: 0.5s; }
.foot-info a+a { margin-top: 8px; }

.social-media { display: inline-block; border-top: 1px dashed var(--foot); margin-top: 24px; }
.social-media i { width: 40px; height: 40px; line-height: 40px; text-align: center; background: var(--c1); color: #fff; border-radius: 50px; transition: 0.5s; }
.social-media i:hover { background: var(--c2); }

.footer-bottom { display: block; padding: 24px 16px; background: var(--c1); color: var(--foot); text-align: center; border-top: 1px solid #ffffff26; }
.footer-bottom p { color: #fff; }
.footer-bottom a { color: var(--c2); font-weight: 600; }

.svg-shape svg.gray { fill: #fff; }

@media all and (max-width: 480px) {
	.footer-area .row { grid-template-columns: repeat(1, 1fr); }
	.footerLinks { flex-direction: column; gap: 0; }
}