/* ========================================================================================
 * framework.css — CORE THEME CSS (loads after Bootstrap, before custom.css).
 *
 * Vendor "Anchor Dental" template + the design system: :root design tokens, the
 * reusable .section / .section--* utilities, all template section & component styles,
 * and the responsive block. Treat this as the framework — prefer tokens and the
 * .section system over hand-editing per-section names. Site-specific personalization
 * belongs in custom.css, which loads after this and overrides it.
 * ======================================================================================== */
/* ----------------------------------------------------------------------------------------
* Author        : Anchor Corps
* Template Name : Anchor Dental - Dentist & Dental Clinic HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Expertise css
08. Why Choose Us css
09. How It Work css
10. Our Testiminial css
11. Our Transformation css
12. Our FAQs css
13. Our Blog Post css
14. Book Appointment css
15. Footer css
16. About us Page css
17. Services Page css
18. Service Single css
19. Blog Archive css
20. Blog Single css
21. Page Doctor css
22. Doctor Single css
23. Gallery Page css
24. Testimonials Page css
25. Page FAQs css
26. Contact us Page css
27. Page Book Appointment css
28. 404 Page css
29. responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/	

:root{
	--primary-color			: #0B0B38;
	--primary-rgb			: 11, 11, 56;  /* fallback triplet of --primary-color; the live value is derived from the admin Primary in inc/colors.php (consumed by the .page-header overlay) */
	--primary-light			: #2C2C66;
	--secondary-color		: #F8F8FF;
	--text-color			: #555574;
	--accent-color			: #5E5EEE;
	--accent-rgb			: 94, 94, 238; /* must match --accent-color #5E5EEE */
	--white-color			: #FFFFFF;
	--divider-color			: #F0F0FF;
	--dark-divider-color	: #FFFFFF26;
	--error-color			: rgb(230, 87, 87);
	--button-color			: #5E5EEE;
	--button-hover-color	: #0B0B38;
	--button-text-color		: #FFFFFF;
	/* Body font follows the admin "Body" font (Anchor Tools → Site Config → Fonts);
	   falls back to Plus Jakarta if the site-config module is unavailable. */
	--default-font			: var(--anchor-font-body, "Plus Jakarta Sans", sans-serif);
	/* Heading font follows the admin "Heading" font; falls back to the body font. */
	--heading-font			: var(--anchor-font-heading, var(--default-font));

	/* Vertical rhythm for sections (consumed by the .section utilities below and
	   by the legacy section-name rules). Retune section spacing site-wide here. */
	--section-space			: 100px; /* default top & bottom */
	--section-space-md		: 70px;  /* medium bottom step */
	--section-space-sm		: 50px;  /* compact (common mobile value) */
	--section-space-xs		: 25px;  /* tight (mobile tops/bottoms) */
	--section-space-2xs		: 20px;  /* tightest (mobile bottoms) */

	/* Shadows — --shadow-card is the 9× card shadow used across the template. */
	--shadow-card			: 0px 10px 30px 0px #00000008;
	--shadow-soft			: 0px 4px 20px 0px #0000000D;
	--shadow-strong			: 0px 10px 30px 0px #0000001A;

	/* Corner radii (--radius-lg 40px is the dominant brand card/pill radius). */
	--radius-sm				: 10px;
	--radius-md				: 15px;
	--radius-lg				: 40px;
	--radius-circle			: 50%;
	--radius-pill			: 9999px;

	/* Transition durations. */
	--transition-base		: 0.3s;
	--transition-medium		: 0.4s;
	--transition-slow		: 0.5s;
}

/* ----------------------------------------------------------------------------------------
   RESPONSIVE SPACING — shrink the section-space scale at the theme's 991px breakpoint.
   Because every section-name padding rule (and the .section utilities) consume these
   tokens, this single override drives the mobile vertical rhythm for the whole site —
   theme pages AND Anchor blocks. Retune mobile spacing here. Verified to reproduce the
   previous hand-tuned per-section mobile padding exactly (the lone outlier, .our-doctors,
   keeps a literal override in the 991 block below).
   Desktop values are unchanged, so desktop rendering is identical.
   ---------------------------------------------------------------------------------------- */
@media (max-width: 991px){
	:root{
		--section-space    : 50px;  /* desktop 100 */
		--section-space-md : 20px;  /* desktop 70  */
		--section-space-sm : 25px;  /* desktop 50  */
		--section-space-2xs: 0;     /* desktop 20  */
		/* --section-space-xs stays 25px — only the new .section--*-xs modifiers consume it */
	}
}

/* =========================================================================
   Reusable section utilities  (additive — existing section-name classes are
   left as-is; opt new/migrated sections into these instead of baking spacing
   and colors into a per-section name).

   MENTAL MODEL: the outermost section <div> carries BEHAVIOR (spacing +
   inverse text); LAYOUT lives in inner classes (.how-work-image, columns…).

   SPACING — .section reads the --section-space* scale. Top and bottom are
   independently overridable, so asymmetric sections work:
       100 / 100  ->  class="section"
        50 / 100  ->  class="section section--pt-sm"
        50 /  70  ->  class="section section--pt-sm section--pb-md"
       100 /  70  ->  class="section section--pb-md"
       100 /   0  ->  class="section section--pb-0"

   INVERSE — .section--inverse defaults child text to white for dark/image
   backgrounds (the reusable form of the per-name .why-choose-content rule).
   Scoped to text elements only, so buttons and form fields are untouched.
   ========================================================================= */
.section{
	padding-top:    var(--section-pt, var(--section-space));
	padding-bottom: var(--section-pb, var(--section-space));
}

.section--pt-md { --section-pt: var(--section-space-md); }
.section--pt-sm { --section-pt: var(--section-space-sm); }
.section--pt-xs { --section-pt: var(--section-space-xs); }
.section--pt-2xs{ --section-pt: var(--section-space-2xs); }
.section--pt-0  { --section-pt: 0; }
.section--pb-md { --section-pb: var(--section-space-md); }
.section--pb-sm { --section-pb: var(--section-space-sm); }
.section--pb-xs { --section-pb: var(--section-space-xs); }
.section--pb-2xs{ --section-pb: var(--section-space-2xs); }
.section--pb-0  { --section-pb: 0; }

.section--inverse :is(.eyebrow-text, .content-header, h1, h2, h3, h4, h5, h6, p, li, a:not(.btn-default)){
	color: var(--white-color);
}
/* Dark-background eyebrow: white text + inverted accent mark. This is the
   canonical mechanism for dark/image sections (mirrors .why-choose-content).
   The legacy element-level helper .eyebrow-text.light is folded in here so both
   share ONE mechanism — use .section--inverse on the wrapper; reach for
   .eyebrow-text.light only when a single eyebrow sits on a dark background
   outside a .section--inverse wrapper. */
.section--inverse .eyebrow-text,
.eyebrow-text.light{
	color: var(--white-color);
}
.section--inverse .eyebrow-text::before,
.eyebrow-text.light::before{
	filter: brightness(0) invert(1);
}

/* Headings use the admin "Heading" font (the theme's heading classes are
   tag-agnostic: .section-title / .hero-header). */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-header {
	font-family: var(--heading-font);
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body{
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6em;
	background-color: var(--white-color);
	color: var(--text-color);
}

p{
	line-height: 1.8em;
	margin-bottom: 1.6em;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl,
.mfp-container{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters > *{
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: capitalize;
	background: var(--button-color);
	color: var(--button-text-color);
	border-radius: 100px;
	padding: 19px 60px 19px 30px;
	border: none;
	transition: all 0.5s ease-in-out;
	overflow: hidden;
	z-index: 1;
}

.btn-default:hover{
	background-color: var(--button-hover-color);
}

.btn-default::before{
	content: "\f061"; /* Font Awesome: fa-arrow-right */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 16px;
	line-height: 1;
	color: currentColor;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	top: 50%;
	right: 0;
	/* Rotated -45deg so the arrow points to the upper-right by default. */
	transform: translate(-30px, -50%) rotate(-45deg);
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	/* On hover, straighten to point directly right. */
	transform: translate(-30px, -50%) rotate(0deg);
}

.btn-default::after{
	content: '';
	position: absolute;
	width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    background: var(--button-hover-color);
    opacity: 0;
	z-index: -1;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
	transition: all 0.6s ease-in-out;
}

.btn-default:hover:after{
	height: 450%;
	opacity: 1;
}

.btn-default.btn-highlighted{
	background-color: transparent;
	border: 1px solid var(--white-color);
	color: var(--white-color);
	padding: 18px 60px 18px 30px;
}

.btn-default.btn-border{
	border: 1px solid transparent;
	padding: 18px 60px 18px 30px;
}

.btn-default.btn-border:hover{
	border-color: var(--white-color);
}

#magic-cursor{
	position: absolute;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
    z-index: 1000000;
}

#ball{
	position: fixed;
	display: block;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 8px !important;
	height: 8px !important;
	background: var(--accent-color);
	margin: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity:1 !important;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto;
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.section-row{
	margin-bottom: 80px;
}

.section-row .section-title{
	margin-bottom: 0;
}

.section-title-content p{	
	margin: 0;
}

.section-btn{
	text-align: end;
}

.section-title{
	position: relative;
	margin-bottom: 50px;
}

.eyebrow-text{
	display: inline-block;
	position: relative;
	font-size: 14px;
    font-weight: 700;
	line-height: 1.2em;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-color);
	padding-left: 28px;
    margin-bottom: 20px;
}

.eyebrow-text::before{
	content: '';
	position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
    transform: translateY(-50%);
	background: url("/wp-content/uploads/2026/05/Site-Favicon.png") no-repeat;
	background-position: left center;
	background-size: cover;
	width: 18px;
	height: 18px;
}

/* .eyebrow-text.light — dark-background eyebrow alias. Defined with the
   canonical .section--inverse eyebrow mechanism near the top of this file
   (search ".section--inverse .eyebrow-text"). Prefer .section--inverse. */

.hero-header{
	font-size: 54px;
	font-weight: 700;
	margin-bottom: 0;
}

.content-header{
	font-size: 46px;
	font-weight: 700;
}

.section-title p{
	margin-top: 30px;
	margin-bottom: 0;
}

.help-block.with-errors ul{
	margin: 0;
	text-align: left;
}

.help-block.with-errors ul li{
	color: var(--error-color);
	font-weight: 500;
	font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

header.main-header{
	position: relative;
	background-color: var(--white-color);
	z-index: 100;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 0;
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
    transform: translateY(0);
	background-color: var(--secondary-color);
	border-bottom: 1px solid var(--divider-color);
}

.navbar{
	padding: 20px 0;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center;
	display: inline-flex;
}

.main-menu ul li{
	margin: 0 4px;
	position: relative;
}

.main-menu ul li a{
	font-size: 16px;
	font-weight: 500;
	padding: 13px !important;
	color: var(--primary-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu > a:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 14px;
	margin-left: 8px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color);
}

.main-menu ul ul{
	visibility: hidden;
	opacity: 0;
	transform: scaleY(0.8);
	transform-origin: top;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 220px;
	border-radius: 20px;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: var(--accent-color);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

.main-menu ul li.submenu ul li.submenu > a:after{
	content: '\f105';
	float: right;
}

.main-menu ul li.submenu:first-child ul{
    width: 220px;
}

.main-menu ul ul ul{
	left: 100%;
	top: 0;
	text-align: left;
}

.main-menu ul ul li{
	margin: 0;
	padding: 0;
}

.main-menu ul ul li a{
	color: var(--white-color);
	padding: 8px 20px !important;
	transition: all 0.3s ease-in-out;
}

.main-menu ul li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus{
	color: var(--primary-color);
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

.contact-now-box{
	display: flex;
	align-items: center;
}

.contact-now-box .icon-box{
	background-color: var(--accent-color);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	transition: all 0.3s ease-in-out;
}

.contact-now-box:hover .icon-box{
	background-color: var(--primary-color);
}

.contact-now-box .icon-box img{
	max-width: 20px;
}

.contact-now-box-content{
	width: calc(100% - 55px);
}

.contact-now-box-content p{
	line-height: normal;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.contact-now-box-content .content-subtitle{
	font-size: 18px;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	top: 0;
	position: relative;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 10px;
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child{
	margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child{
	margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: var(--accent-color);
	border-radius: 0;
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	padding: 10px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: transparent;
	color: var(--primary-color);
}

.slicknav_menu ul ul li a{
    padding: 10px 20px 10px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	right: 15px;
    top: 15px;
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
	color: var(--primary-color);
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero{
	position: relative;
	padding-bottom: 86px;
}

.hero .hero-section{
    background:  url(/wp-content/uploads/2026/05/hero-bg.svg), linear-gradient(90deg, var(--primary-light) -10.82%, var(--primary-color) 56.59%) no-repeat;
    background-position: left center;
    background-size: contain;
    padding: calc(100px + 6rem) 0 186px;
}

.hero.bg-image .hero-section{
	position: relative;
	background: url('/wp-content/uploads/2026/06/hero-thumb.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: calc(150px + 6rem) 0 175px;
}

.hero.bg-image .hero-section::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 50%;
	width: 100%;
	height: 100%;
}

.hero.bg-image .hero-section .hero-content{
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.hero.bg-image .hero-section .hero-content .hero-header{
	font-size: 80px;
}

.hero.bg-image .hero-section.hero-slider-layout{
	background: none;
	padding: 0;
}

.hero-section.hero-slider-layout .hero-slide{
	position: relative;
    padding: calc(150px + 6rem) 0 236px;
}

.hero.bg-image .hero-section .hero-slide::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 50%;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-section.hero-slider-layout .hero-slide .hero-slider-image{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

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

.hero-section.hero-slider-layout .hero-slide .hero-content{
	position: relative;
	z-index: 2;
}

.hero-section.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 120px;
	text-align: center;
	z-index: 2;
}

.hero-section.hero-slider-layout .hero-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 12px;
    background: var(--white-color);
    opacity: 1;
    transition: all 0.3s ease-in-out;
    margin: 0 5px;
}

.hero-section.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

.hero-section.hero-video{
	position: relative;
	overflow: hidden;
	/* Fixed-header offset (video hero has no base padding; overlay/video are
	   absolute inset:0 so they still fill behind the header). */
	padding-top: 6rem;
}

.hero-section.hero-video::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--primary-color);
	opacity: 70%;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-section.hero-video .hero-bg-video{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

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

.hero-section.hero-video .hero-content{
	position: relative;
	z-index: 1;
}

.hero-content .section-title{
	margin-bottom: 40px;
}

.hero-content .section-title p,
.hero-content .hero-header{
	color:  var(--white-color);
}

.hero-content .hero-header img{
	max-width: 129px;
	border-radius: 100px;
}

.hero-content-body{
	border-top: 1px solid var(--dark-divider-color);
	border-bottom: 1px solid var(--dark-divider-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 60px;
	padding: 25px 0;
	margin-bottom: 40px;
}

.hero-counter-box{
	width: calc(33.33% - 40px);
}

.hero-counter-box .counter-number{
	font-size: 40px;
	font-weight: 600;
	color:  var(--white-color);
	margin-bottom: 20px;
}

.counter-number {
	margin-bottom: .25rem;
	line-height: .8;
}

.hero-counter-box p{
	text-transform: capitalize;
	line-height: 1.4em;
	color: var(--white-color);
	margin: 0;
}

.hero-content-footer .btn-default{
	padding: 19px 30px;
	margin-right: 30px;
}

.hero-content-footer .btn-default::before{
	/* No pseudo-element glyph in the hero footer. The phone button carries its
	   own <i class="fa-phone"> inline in the markup; Schedule Appointment is a
	   plain pill. (Icon was previously a hardcoded background-image URL.) */
	content: none;
}

.hero-content-footer .btn-default.btn-highlighted{
	padding: 18px 30px;
	margin-right: 0px;
}

.hero-content-footer .btn-default.btn-highlighted .fa-phone{
	margin-right: 8px;
}

.hero-image{
	position: relative;
	padding-left: 80px;
}

.hero-img figure{
	display: block;
	border-radius: 40px;
}

.hero-img img{
	width: 100%;
	aspect-ratio: 1 / 1.12;
	object-fit: cover;
	border-radius: 40px;
}

.company-service-rating{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	max-width: 275px;
	background-color: var(--white-color);
	border-radius: 15px;
	padding: 20px;
	animation: serviceratingmoveobject 3s infinite linear alternate;
}

@keyframes serviceratingmoveobject{
	50%{
		left: 60px;
	}
}

.company-rating-icon{
	margin-bottom: 10px;
}

.company-rating-icon ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.company-rating-icon ul li{
	display: inline-block;
}

.company-rating-icon ul li i{
	font-size: 16px;
	color: var(--accent-color);
}

.company-rating-content .content-subtitle{
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.company-rating-content p{
	line-height: 1.4em;
	margin: 0;
}

.our-cta-box{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 15px;
	z-index: 2;
}

/* Form variant (top-level service pages): the box holds a form instead of the
   short 3-item grid, so the absolute `bottom: 0` pin made it grow UPWARD over
   the hero content. Keep it in normal flow and pull it up with a fixed
   margin-top so it straddles the hero edge regardless of the form's height —
   no absolute pin, no height-dependent calc. */
.our-cta-box--form{
	/* relative (not static) so its overlapping top (white bg + eyebrow) paints
	   ABOVE the hero-section's positioned overlay via DOM order. Left at z-index
	   auto on purpose — see .hero .ti-widget-container below. */
	position: relative;
	margin: -90px 15px 0;
}

/* The TrustIndex reviews widget mounts inside the hero, which is EARLIER in the
   DOM than the CTA card, so the (DOM-later) card painted over its popup. Give
   the widget container its own stacking context above the card (auto/0) but
   below the sticky header (~50) so the popup clears the card yet stays under
   the nav. The popup is a descendant of this container, so it rises with it. */
.hero .ti-widget-container{
	position: relative;
	z-index: 10;
}

/* Trim the hero's reserved overlap space to suit the in-flow card. */
.hero.bg-image:has(.our-cta-box--form) .hero-section{
	padding-bottom: 130px;
}

.hero:has(.our-cta-box--form){
	padding-bottom: 40px;
}

.cta-content-box{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: var(--shadow-card);
	border-radius: 40px;
	padding: 50px;
}

.cta-item{
	border-right: 1px solid var(--divider-color);
	display: flex;
	align-items: center;
	padding-right: 15px;
}

.cta-item .icon-box{
	position: relative;
	background-color: var(--accent-color);
    border-radius: 15px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
    margin-right: 15px;
    transition: all 0.5s ease-in-out;
}

.cta-item:hover .icon-box{
	background-color: var(--primary-color);
}

.cta-item .icon-box::before{
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: 0;
    background: var(--primary-color);
	border-radius: 15px;
	width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.cta-item:hover .icon-box:before{
    transform: scale(1);
}

.cta-item .icon-box img{
	position: relative;
	max-width: 34px;
	z-index: 1;
}

.cta-item-content{
	width: calc(100% - 85px);
}

.cta-item-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.cta-item-content p{
	margin: 0;
	line-height: 1.2
}

.icon-box.white .fa-solid {
	color: white;
	font-size: 28px;
	z-index: 999
}

.cta-btn{
	text-align: center;
}

/************************************/
/***       05. About Us css	      ***/
/************************************/

.about-us{
	padding: var(--section-space) 0;
}

.about-img figure{
	display: block;
    mask-image: url(/wp-content/uploads/2026/05/about-image-bg-shape.svg);
    background-image: url(/wp-content/uploads/2026/05/about-image-bg-shape.svg);
    mask-size: cover;
    mask-position: center center;
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.about-image{
	position: relative;
	margin-right: 30px;
}

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

/* Click-anywhere video trigger on the about image, with a centered play icon. */
.about-img.about-video-trigger{
	position: relative;
	cursor: pointer;
}

.about-play-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--accent-color);
	color: var(--white-color);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
	pointer-events: none; /* clicks pass through to the trigger image */
	transition: transform 0.4s ease-in-out;
}

.about-play-icon svg{
	width: 30px;
	height: 30px;
	margin-left: 4px; /* optically center the triangle */
	fill: currentColor;
}

/* Hovering anywhere on the image scales the play icon up. */
.about-img.about-video-trigger:hover .about-play-icon{
	transform: translate(-50%, -50%) scale(1.12);
}

.company-experience{
	position: absolute;
	bottom: 0;
	right: 0;
	background: url('/wp-content/uploads/2026/06/about-sadc-header-p-800-crop-bvqVfq.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 30px;
	display: flex;
	align-items: center;
	width: 33%;
	height: 33%;
	overflow: hidden;
	padding: 20px;
}

.company-experience::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--primary-color);
	opacity: 60%;
	width: 100%;
	height: 100%;
}

.company-experience-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.company-experience-counter{
	position: relative;
	text-align: center;
	margin-bottom: 5px;
	z-index: 1;
}

.company-experience-counter .counter-number{
	font-size: 60px;
	color: var(--white-color);
}

.company-experience-content{
	position: relative;
	text-align: center;
	z-index: 1;
}

.company-experience-content p{
	color: var(--white-color);
	margin: 0;
	line-height: 1.2
}

.about-us-body{
	border-top: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
    padding: 25px 0;
    margin-bottom: 40px;
}

.about-body-item{
	width: calc(33.333% - 20px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}

.about-counter{
	width: auto;
}

.about-counter .counter-number{
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	color:  var(--accent-color);
}

.about-counter-content{
	width: auto;
}

.about-counter-content p{
	text-transform: capitalize;
	margin: 0;
}

.about-us-footer{
	display: flex;
	align-items: center;
}

.about-us-footer-btn{
	margin-right: 50px;
	line-height: normal;
}

.about-company-founder{
	display: flex;
	align-items: center;
}

.company-founder-image{
	margin-right: 20px;
}

.company-founder-image img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.company-founder-content{
	width: calc(100% - 80px);
}

.company-founder-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.company-founder-content p{
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***      06. Our Services css	  ***/
/************************************/

.our-service{
	background: linear-gradient(180deg, var(--secondary-color) 70%, var(--white-color) 30%);
	padding: var(--section-space) 0 var(--section-space-2xs);
}

.service-item{
	background-color: var(--white-color);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.service-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.service-item-box{
	display: flex;
	align-items: center;
}

.service-item-box .icon-box{
	position: relative;
	background-color: var(--accent-color);
	border-radius: 10px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 15px;
	transition: all 0.5s ease-in-out;
}

.service-item-box .icon-box::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.service-item:hover .service-item-box .icon-box::before{
	transform: scale(1);
}

.service-item-box .icon-box img{
	position: relative;
	max-width: 38px;
	z-index: 1;
}

.service-item-content{
	width: calc(100% - 65px);
}

.service-item-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.service-readmore{
	margin-left: 10px;
}

.service-readmore img{
	max-width: 30px;
	transition: all 0.3s ease-in-out;
}

.service-item:hover .service-readmore img{
	transform: rotate(45deg);
}

.service-body{
	margin-bottom: 30px;
}

.service-body p{
	margin: 0;
}

.service-image{
	border-radius: 40px;
	overflow: hidden;
}

.service-image img{
	aspect-ratio: 1 / 0.67;
	object-fit: cover;
	border-radius: 40px;
	transition: all 0.5s ease-out;
}

.service-item:hover .service-image img{
	transform: scale(1.1)
}

/************************************/
/***     07. Our Expertise css	  ***/
/************************************/

.our-expertise{
	padding: var(--section-space-sm) 0 var(--section-space);
}

.expertise-content .section-title{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.expertise-list-box{
	margin-bottom: 30px;
}

.expertise-list-box:last-child{
	margin-bottom: 0;
}

.expertise-list-title{
	margin-bottom: 20px;
}

.expertise-list-title .eyebrow-text{
	position: relative;
	font-size: 20px;
	font-weight: 600;
	padding-left: 35px;
}

.expertise-list-title .eyebrow-text::before{
	content: '\f14a';
	position: absolute;
	font-family: 'FontAwesome';
	background: none;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	color: var(--accent-color);
}

.expertise-list-content p{
	margin: 0;
}

.expertise-image{
	position: relative;
	background: url('/wp-content/uploads/2026/05/expertise-image-bg.svg') no-repeat;
	background-position: center center;
	background-size: auto;
	border-radius: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	gap: 30px;
}

.expertise-img-1{
	width: calc(50% - 15px);
}

.expertise-img-2{
	padding-top: 165px;
	width: calc(50% - 15px);
}

.expertise-img-1 img figure,
.expertise-img-2 img figure{
	display: block;
	border-radius: 40px;
}

.expertise-img-1 img,
.expertise-img-2 img{
	aspect-ratio: 1 / 1.29;
	object-fit: cover;
	border-radius: 40px;
}

/* 1:1 square frame holding a popup / gallery embed instead of a plain image. */
.expertise-popup-box{
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 40px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Stretch the embedded popup card / gallery to fill the square frame. */
.expertise-popup-box > *,
.expertise-popup-box .up-video-card,
.expertise-popup-box .up-embed-popup{
	width: 100%;
}

.expertise-popup-box .up-video-card{
	height: 100%;
}

/* Neutralize the theme's portrait <img> rule so embeds keep their own shapes. */
.expertise-popup-box img{
	aspect-ratio: auto;
	border-radius: 0;
}

/* ===== Consultation steps (numbered timeline) ===== */
.consultation-steps{
	margin-top: 40px;
}

.consultation-steps-title{
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 30px;
}

.step-item{
	position: relative;
	display: flex;
	gap: 24px;
	padding-bottom: 34px;
}

.step-item:last-child{
	padding-bottom: 0;
}

/* Vertical line connecting one step number down to the next. */
.step-item:not(:last-child)::before{
	content: '';
	position: absolute;
	top: 60px;
	bottom: 0;
	left: 27px;
	width: 2px;
	background-color: var(--divider-color);
}

.step-number{
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--accent-color);
	color: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
}

.step-content{
	padding-top: 6px;
}

.step-title{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}

.step-content p{
	margin: 0;
}

.expert-doctor{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--white-color);
	box-shadow: 10px 0px 36.8px -4px #0000001A;
	border: 1px solid var(--divider-color);
	border-radius: 15px;
	display: flex;
	align-items: center;
	justify-content:center;
	width: 100%;
	max-width: 300px;
	padding: 0px;
	animation: doctormoveobject 10s infinite linear alternate;
}

@keyframes doctormoveobject{
	50%{
		left: 40px;
	}
}

.expert-doctor .icon-box{
	background-color: var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    transition: all 0.3s ease-in-out;
}

.expert-doctor:hover .icon-box{
	background-color: var(--primary-color);
}

.expert-doctor .icon-box img{
	max-width: 30px;
}

.expert-doctor-content{
	width: calc(100% - 80px);
}

.expert-doctor-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 5px;
}

.expert-doctor-content p{
	text-transform: capitalize;
	margin: 0;
}

@media (max-width: 767px) {
	.expert-doctor {
		position: relative
	}
}

/************************************/
/***     08. Why Choose Us css	  ***/
/************************************/

.why-choose-us{
	background: var(--primary-color) url('/wp-content/uploads/2026/05/why-choose-us-bg.svg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: var(--section-space) 0 0;
}

.why-choose-content .section-title p,
.why-choose-content .content-header,
.why-choose-content .eyebrow-text{
	color: var(--white-color);
}

.why-choose-content .eyebrow-text::before{
	filter: brightness(0) invert(1);
}

.why-choose-image img{
	width: 100%;
	aspect-ratio: 1 / 1.42;
	object-fit: contain;
}

.why-choose-item{
	border-bottom: 1px solid var(--dark-divider-color);
	display: flex;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.why-choose-item:last-child{
	border-bottom: none;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.why-choose-item .icon-box{
	position: relative;
    background-color: var(--accent-color);
    border-radius: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-right: 20px;
    transition: all 0.5s ease-in-out;
}

.why-choose-item .icon-box::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--white-color);
    border-radius: 10px;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.why-choose-item:hover .icon-box::before{
	transform: scale(1);
}

.why-choose-item .icon-box img{
	position: relative;
	max-width: 35px;
	z-index: 1;
	transition: all 0.3s ease-in-out;
}

.why-choose-item:hover .icon-box img{
	filter: brightness(1) invert(1);
}

.why-choose-item-content{
	width: calc(100% - 70px);
}

.why-choose-item-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 5px;
}

.why-choose-item-content p{
	color: var(--white-color);
	margin: 0;
}

/************************************/
/***      09. How It Work css	  ***/
/************************************/

.how-it-work{
	padding: var(--section-space) 0;
}

.how-work-image{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-right: 30px;
}

.how-work-img-2,
.how-work-img-1{
	width: calc(50% - 7.5px);
}

.how-work-img-3{
	width: 100%;
}

.how-work-img-3 figure,
.how-work-img-2 figure,
.how-work-img-1 figure{
	display: block;
	width: 100%;
	border-radius: 20px;
}

.how-work-img-3 img,
.how-work-img-2 img,
.how-work-img-1 img{
	width: 100%;
	border-radius: 20px;
}

.how-work-img-2 img,
.how-work-img-1 img{
	aspect-ratio: 1 / 1.09;
	object-fit: cover;
}

.how-work-img-3 img{
	aspect-ratio: 1 / 0.49;
	object-fit: cover;
}

.doctor-work-img-box{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.doctor-work-img-box figure{
	background-color: var(--secondary-color);
	border: 10px solid var(--white-color);
	border-radius: 40px;
	padding: 10px 12px;
}

.doctor-work-img-box img{
	max-width: 158px;
	border-radius: 40px;
}

.faq-accordion.how-work-accordion .accordion-item{
	margin-bottom: 30px;
	padding-bottom: 30px;
	background-color: var(--white-color);
	border-bottom: 1px solid var(--divider-color);
}

.faq-accordion.how-work-accordion .accordion-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

.faq-accordion.how-work-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	background-color: transparent;
	color: var(--primary-color);
	padding: 0px 25px 0 45px;
	border: none;
	position: relative;
	transition: all 0.3s ease-in-out;
}

.faq-accordion.how-work-accordion .accordion-header .accordion-button span{
	position: absolute;
    left: 0;
    top: -3px;
    bottom: auto;
    transform: translateY(50%);
    font-size: 20px;
    line-height: 1em;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.faq-accordion.how-work-accordion .accordion-button:not(.collapsed) span{
	color: var(--primary-color);
}

.faq-accordion.how-work-accordion .accordion-button:not(.collapsed){
   color: var(--primary-color);
}

.faq-accordion.how-work-accordion .accordion-header .accordion-button.collapsed{
	color: var(--primary-color);
}

.faq-accordion.how-work-accordion .accordion-item .accordion-button::after,
.faq-accordion.how-work-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f068';
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 0;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 0px;
	color: var(--primary-color);
}

.faq-accordion.how-work-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f067';	
	color: var(--primary-color);
}

.faq-accordion.how-work-accordion .accordion-item .accordion-body{
	padding: 20px 25px 0px 45px;
}

.faq-accordion.how-work-accordion .accordion-item .accordion-body p{
    color: var(--text-color);
	margin-bottom: 20px;
}

.faq-accordion.how-work-accordion .accordion-item .accordion-body p:last-child{
	margin-bottom: 0;
}

/************************************/
/***    10. Our Testiminial css	  ***/
/************************************/

.our-testimonials{
	background: url('/wp-content/uploads/2026/05/testimonial-bg.png'), linear-gradient(180deg, var(--primary-color) 60%, var(--white-color) 40%);
	background-position: center center;
	background-size: auto;
	padding: var(--section-space) 0 var(--section-space-sm);
}

.our-testimonials .content-header{
	color: var(--white-color);
}

.testimonial-slider{
	background-color: var(--white-color);
	box-shadow: 0px 12px 37.1px 0px #0000000D;
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 100px;
}

.testimonial-header{
	margin-bottom: 50px;
}

.testimonial-quote{
	margin-bottom: 30px;
}

.testimonial-quote img{
	max-width: 50px;
}

.testimonial-content p{
	font-size: 20px;
	font-weight: 600;
	margin: 0;
}

.testimonial-body{
    display: inline-flex;
    align-items: center;
}

.author-image{
    margin-right: 20px;
}

.author-image img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.author-content{
	text-align: left;
    width: calc(100% - 80px);
}

.author-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.author-content p{
	text-transform: capitalize;
	margin: 0;
}

.testimonial-btn{
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: right;
	margin-top: 30px;
	z-index: 1;
}

.testimonial-slider .testimonial-button-next,
.testimonial-slider .testimonial-button-prev{
	position: relative;
	width: 45px;
	height: 45px;
	background-color: var(--accent-color);
	border-radius: 10px;
	transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-next{
	margin-left: 30px;
}


.testimonial-slider .testimonial-button-next:hover,
.testimonial-slider .testimonial-button-prev:hover{
	background-color: var(--primary-color);
}

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url("/wp-content/uploads/2026/05/arrow-white.svg") no-repeat center center;
    background-size: 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.testimonial-slider .testimonial-button-prev::before{
	transform: rotate(180deg);
}

/************************************/
/***  11. Our Transformation css  ***/
/************************************/

.our-transformation{
	padding: var(--section-space-sm) 0 var(--section-space-md);
}

.transformation_image{
	margin-bottom: 30px;
}

.transformation_image img{
	width: 100%;
	aspect-ratio: 1 / 0.71;
	object-fit: cover;
	border-radius: 40px;
}

/************************************/
/***       12. Our fAQs css       ***/
/************************************/

.our-faqs{
	background-color: var(--secondary-color);
	padding: var(--section-space) 0;
}

.our-faqs-content{
	margin-right: 30px;
}

.section-cta-box{
	background-color: var(--white-color);
	border-radius: 40px;
	display: inline-flex;
	padding: 40px;
}

.section-cta-box .icon-box{
	margin-right: 30px;
}

.section-cta-box .icon-box img{
	max-width: 60px;
}

.section-cta-content{
	width: calc(100% - 90px);
}

.section-cta-content p{
	margin-bottom: 10px;
}

.section-cta-content .cta-header{
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 10px;
}

.our-faq-section .accordion-item{
	border-radius: 20px;
	margin-bottom: 25px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.our-faq-section .accordion-item:last-child{
	margin-bottom: 0;
}

.our-faq-section .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	background-color: var(--accent-color);
	color: var(--white-color);
	padding: 20px 50px 20px 20px;
	transition: all 0.3s ease-in-out;
}

.our-faq-section .accordion-button:not(.collapsed){
   background-color: var(--accent-color);
   color: var(--white-color);
   border-bottom: 1px solid var(--dark-divider-color);
}

.our-faq-section .accordion-header .accordion-button.collapsed{
	background-color: var(--white-color);
	color: var(--primary-color);
}

.our-faq-section .accordion-item .accordion-button::after,
.our-faq-section .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 20px;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -10px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 5px;
	color: var(--white-color);
}

.our-faq-section .accordion-item .accordion-button.collapsed::after{
	content: '\f067';
	color: var(--primary-color);
}

.our-faq-section .accordion-item .accordion-body{
	background-color: var(--accent-color);
	padding: 20px 50px 20px 20px;
}

.our-faq-section .accordion-item .accordion-body p{
    color: var(--white-color);
	margin: 0;
}

/************************************/
/***     13. Our Blog Post css	  ***/
/************************************/

.our-blog{
	padding: var(--section-space) 0 var(--section-space-md);
}

.blog-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: var(--shadow-card);
	border-radius: 40px;
	display: flex;
	align-items: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.blog-item .post-featured-image{
	width: 50%;
	height: 100%;
}

.blog-item .post-featured-image figure{
	height: 100%;
}

.blog-item .post-featured-image a{
	height: 100%;
	cursor: none;
	display: block;
	border-radius: 40px 0 0 40px;
	overflow: hidden;
}

.blog-item .post-featured-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.03;
	object-fit: cover;
	border-radius: 40px 0 0 40px;
	transition: all 0.5s ease-in-out;
}

.blog-item:hover .post-featured-image img{
	transform: scale(1.1);
}

.post-item-body{
	display: flex;
    width: 50%;
    flex-wrap: wrap;
    align-items: center;
    padding: 20px;
}

.post-item-content{
	margin-bottom: 20px;
}

.post-item-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}

.post-item-content .content-subtitle a{
	color: inherit;
}

.post-item-content p{
	margin: 0;
}

.post-readmore-btn a{
	position: relative;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
	padding-right: 26px;
}

.post-readmore-btn a::before{
	content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-image: url(/wp-content/uploads/2026/05/icon-plus-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transform: translate(0px, -50%);
    transition: all 0.4s ease-in-out;
}

.post-readmore-btn a:hover:before{
	transform: translate(0px, -50%) rotate(45deg);
	filter: brightness(3) invert(1);
}

.post-readmore-btn a:hover{
	color: var(--primary-color);
}

/* ===== Meet The Doctors ===== */
.meet-doctors{
	padding: var(--section-space) 0 var(--section-space-md);
}

.meet-doctors .doctor-item{
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 60px;
}

.meet-doctors .doctor-list .doctor-item:last-child{
	margin-bottom: 0;
}

.meet-doctors .doctor-image figure{
	margin: 0;
}

.meet-doctors .doctor-image a{
	display: block;
	border-radius: 40px;
	overflow: hidden;
	cursor: none;
}

.meet-doctors .doctor-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1.1;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.meet-doctors .doctor-item:hover .doctor-image img{
	transform: scale(1.05);
}

.meet-doctors .doctor-role{
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 16px;
}

.meet-doctors .doctor-name{
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 20px;
}

.meet-doctors .doctor-name a{
	color: inherit;
	transition: color 0.3s ease-in-out;
}

.meet-doctors .doctor-name a:hover{
	color: var(--accent-color);
}

.meet-doctors .doctor-bio{
	margin: 0 0 24px;
}

.meet-doctors .doctor-credentials{
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}

.meet-doctors .doctor-credentials li{
	position: relative;
	padding-left: 34px;
	margin-bottom: 14px;
}

.meet-doctors .doctor-credentials li:last-child{
	margin-bottom: 0;
}

/* Relevant Font Awesome icon at the start of each credential. */
.meet-doctors .doctor-credentials li i{
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	text-align: center;
	color: var(--accent-color);
	font-size: 16px;
}

/* Desktop: side-by-side, alternating which side the image sits on. The DOM is
   always image-first, so mobile naturally stacks image-on-top for every card. */
@media only screen and (min-width: 992px){
	.meet-doctors .doctor-item{
		flex-direction: row;
		align-items: center;
		gap: 60px;
		margin-bottom: 80px;
	}

	.meet-doctors .doctor-list .doctor-item:nth-child(even){
		flex-direction: row-reverse;
	}

	.meet-doctors .doctor-image,
	.meet-doctors .doctor-content{
		flex: 1 1 50%;
		min-width: 0;
	}
}

/************************************/
/***   14. Book Appointment css	  ***/
/************************************/

.book-appointment{
	background-color: var(--secondary-color);
	padding: var(--section-space) 0;
}

.working-time-box{
	background-color: var(--primary-color);
	border-radius: 40px;
	padding: 40px;
	margin-bottom: 40px;
}

.working-box-title{
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.working-box-title .cta-header{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--white-color);
}

.working-time-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.working-time-list ul li{
	font-weight: 600;
	color: var(--white-color);
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

.working-time-list ul li:last-child{
	margin-bottom: 0;
}

.working-time-list ul span{
	margin-right: 10px;
}

.book-appointment-sidebar .section-cta-box{
	padding: 30px;
}

.appointment-form{
	background-color: var(--white-color);
	border-radius: 40px;
	padding: 50px;
}

.appointment-form-content{
	margin-bottom: 40px;
}

.appointment-form-content p{
	margin: 0;
}

.appointment-form .form-control{
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid var(--divider-color);
    border-radius: 40px;
    color: var(--text-color);
    box-shadow: none;
}

.appointment-form-title{
	margin-bottom: 20px;
}

.appointment-form-title .cta-header{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.appointment-reason{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}

.appointment-reason .reason-box{
	width: calc(33.33% - 20px);
}

.appointment-reason .reason-box input[type="radio"]:checked{
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.appointment-reason .reason-box label{
	cursor: pointer;
	text-transform: capitalize;
	margin-left: 5px;
}

.appointment-reason .reason-box input:checked ~ label{
	color: var(--accent-color);
}

/************************************/
/***   		15. Footer css        ***/
/************************************/

.main-footer{
	background: url(/wp-content/uploads/2026/05/hero-bg.svg), linear-gradient(90deg, var(--primary-light) -10.82%, var(--primary-color) 56.59%);
	background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
	padding: var(--section-space) 0 0;
}

.about-footer{
	width: 100%;
	max-width: 412px;
}

.footer-logo{
	margin-bottom: 30px;
}

.footer-logo img{
	max-width: 180px;
}

.about-footer-content{
	margin-bottom: 30px;
}

.about-footer-content p{
	color: var(--white-color);
	margin: 0;
}

.footer-contact-content .footer-title{
	font-size: 20px;
	font-weight: 600;
	color: var(--white-color);
	margin-bottom: 15px;
}

.footer-contact-content .footer-title:last-child{
	margin-bottom: 0;
}

.footer-links .footer-title{
	font-size: 20px;
	text-transform: capitalize;
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-links ul{
	margin: 0;
	padding: 0;
	padding-left: 20px;
}

.footer-links ul li{
	text-transform: capitalize;
	margin-bottom: 20px;
}

.footer-links ul li:last-child{
	margin-bottom: 0;
}

.footer-links ul li::marker{
	color: var(--accent-color);
}

.footer-links ul li a{
	color: var(--white-color);
	transition: all 0.3s ease-in-out;
}

.footer-links ul li:hover a{
	color: var(--accent-color);
}

.footer-contact-details .footer-info-box{
	position: relative;
	padding-left: 40px;
    margin-bottom: 25px;
}

.footer-contact-details .footer-info-box:last-child{
	margin-bottom: 0;
}

.footer-info-box .icon-box{
	position: absolute;
	top: -2px;
	left: 0;
}

.footer-info-box .icon-box img{
	max-width: 24px;
}

.footer-info-box-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

.footer-copyright{
	border-top: 1px solid var(--dark-divider-color);
	padding: 40px 0;
	margin-top: 80px;
}

.footer-copyright-text p{
	color: var(--white-color);
	margin: 0;
}

.footer-privacy-policy ul{
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: end;
}

.footer-privacy-policy ul li{
	display: inline-block;
	margin-right: 40px;
}

.footer-privacy-policy ul li:last-child{
	margin-right: 0;
}

.footer-privacy-policy ul li a{
	color: var(--white-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.footer-privacy-policy ul li:hover a{
	color: var(--accent-color);
}

/************************************/
/***     16. About us Page css	  ***/
/************************************/

.page-header {
  background:
    radial-gradient(
      ellipse at center,
      rgba(var(--primary-rgb), 0.7) 0%,
      rgba(var(--primary-rgb), 0.9) 100%
    ),
    url("/wp-content/uploads/2026/06/hero-thumb.jpg");

  background-repeat: no-repeat, no-repeat;
  background-position: center, left center;
  background-size: cover;

  padding: calc(140px + 4rem) 0 140px;
}

.page-header-box{
	text-align: center;
}

.page-header-box .hero-header{
	font-size: 54px;
    font-weight: 700;
	text-align: center;
	color: var(--white-color);
	margin-bottom: 20px;
}

.page-header-box ol{
	margin: 0;
	display: inline-flex;
	justify-content: center;
}

.page-header-box ol{
	margin: 0;
	padding: 0;
	justify-content: center;
}

.page-header-box ol li.breadcrumb-item{
	font-size: 16px;
	font-weight: 400;
	color: var(--white-color);
	text-transform: capitalize;
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--white-color);
}

.our-excellence{
	background: linear-gradient(180deg, var(--primary-color) 70%, var(--white-color) 30%);
	padding: var(--section-space) 0 var(--section-space-2xs);
}

.our-excellence .content-header{
	color: var(--white-color);
}

.excellence-item{
	background-color: var(--white-color);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.excellence-item .icon-box{
	margin-bottom: 30px;
}

.excellence-item .icon-box img{
	max-width: 80px;
}

.excellence-title{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.excellence-title .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.excellence-content p{
	margin: 0;
}

.how-it-work.about-how-work{
	padding: var(--section-space-sm) 0 var(--section-space);
}

.our-doctors{
	padding: var(--section-space) 0;
}

.team-member-item{
	position: relative;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	z-index: 1;
}

.team-image{
    position: relative;
    overflow: hidden;
	border-radius: 40px;
	margin-bottom: 30px;
}

.team-image img{
	width: 100%;
	aspect-ratio: 1/1.18;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-image img{
    transform: scale(1.1);
}

.team-social-icon{
	position: absolute;
    right: 20px;
    top: 0; 
	transform: translateY(-100%);
	text-align: center;
	z-index: 1;
    transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-social-icon{
	top: 20px;
	transform: translateY(0%);
}

.team-social-icon ul{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

.team-social-icon ul li{
	display: block;
    text-align: center;
    margin-bottom: 10px;
}

.team-social-icon ul li:last-child{
	margin-bottom: 0;
}

.team-social-icon ul li a{
	height: 30px;
	width: 30px;
	background-color: var(--primary-color);
	border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.team-social-icon ul li a i{
    color: var(--white-color);
    font-size: 16px;
	transition: all 0.3s ease-in-out;
}

.team-social-icon ul li a:hover{
	background: var(--accent-color);
}

.team-content{
	text-align: center;
}
	
.team-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.team-content .content-subtitle a{
	color: inherit;
}

.team-content p{
	text-transform: capitalize;
	margin: 0;
}

.our-faqs.page-about-faqs{
	background-color: transparent;
	padding: var(--section-space-sm) 0 var(--section-space);
}

.our-faqs.page-about-faqs .section-cta-box{
	background-color: var(--secondary-color);
}

.our-faqs.page-about-faqs .our-faq-section .accordion-header .accordion-button.collapsed{
	background-color: var(--secondary-color);
}

/************************************/
/***     17. Page Services css	  ***/
/************************************/

.page-services{
	padding: var(--section-space) 0 var(--section-space-md);
}

.our-faqs.page-about-faqs.page-service-faqs{
	padding: var(--section-space) 0;
}

.our-testimonials.service-testimonials{
	padding: var(--section-space) 0;
}

/************************************/
/***   18. Service Single css	  ***/
/************************************/

.page-service-single{
	padding: var(--section-space) 0;
}

.service-single-content{
	margin-right: 30px;
}

.service-single-slider{
	position: relative;
	margin-bottom: 40px;
}

.service-single-btn .service-single-button-prev::before{
	transform: rotate(225deg);
}

.service-slider-image{
	border-radius: 40px;
	overflow: hidden;
}

.service-slider-image img{
	border-radius: 40px;
	overflow: hidden;
	aspect-ratio: 1 / 0.6;
    object-fit: cover;
}

.service-single-slider .swiper-pagination{
    position: absolute;
    text-align: center;
    bottom: 20px;
	z-index: 1;
}

.service-single-slider .swiper-pagination .swiper-pagination-bullet{
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background-color: var(--white-color);
	opacity: 1;
	margin: 0px 4px;
}

.service-single-slider .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--accent-color);
	opacity: 1;
}

.service-entry{
	margin-bottom: 50px;
}

.service-entry .content-header{
	font-size: 46px;
	margin-bottom: 20px;
}

.service-entry .content-subtitle{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.service-entry p{
	margin-bottom: 20px;
}

.service-entry p:last-child{
	margin-bottom: 0px;
}

.service-entry ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.service-entry ul li{
	position: relative;
    width: 100%;
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 600;
	text-transform: capitalize;
	padding-left: 30px;
}

.service-entry ul li:before{
	content: '\f14a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 2px;
    left: 0;
}

.service-entry-image{
	margin-bottom: 20px;
}

.service-entry-img img{
	border-radius: 40px;
}

.service-single-faqs .our-faq-section .accordion-item{
	border: 1px solid var(--divider-color);
}

.service-sidebar{
	position: sticky;
	top: var(--sidebar-sticky-top, 100px);
}

.service-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 40px;
	margin-bottom: 40px;
}

.service-catagery-list .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.service-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.service-catagery-list ul li{
	background-color: var(--white-color);
	border-radius: 14px;
	padding: 15px;
	margin-bottom: 15px;
}

.service-catagery-list ul li:last-child{
	margin-bottom: 0;
}

.service-catagery-list ul li a{
	display: block;
    position: relative;
    color: var(--text-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a{
	color: var(--accent-color);
}

.service-catagery-list ul li a::after{
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0px;
	transform: translate(0px, -50%);
	background-image: url('/wp-content/uploads/2026/05/icon-plus-accent.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	width: 14px;
	height: 14px;
    transition: all 0.3s ease-in-out;
}

.service-catagery-list ul li:hover a::after{
	transform: translate(0px, -50%) rotate(45deg);
}

.service-sidebar .section-cta-box{
	display: flex;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
	padding: 30px;
}

/************************************/
/***      19. Blog Archive css	  ***/
/************************************/

.page-blog{
	padding: var(--section-space) 0;
}

.page-blog .blog-item{
	display: block;
}

.page-blog .post-featured-image{
	width: 100%;
	height: auto;
}

.page-blog .post-featured-image a{
	border-radius: 40px 40px 0 0px;	
}

.page-blog .post-featured-image img{
	height: auto;
	aspect-ratio: 1 / 0.7;
	border-radius: 40px 40px 0 0px;
}

.page-blog .post-item-body{
	width: 100%;
	display: block;
	padding: 30px;
}

.page-pagination{
    margin-top: 30px;
    text-align: center;
}

.page-pagination ul{
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span{
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--accent-color);
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
	line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);
	color: var(--white-color);
}

/************************************/
/***      20. Blog Single css	  ***/
/************************************/

.page-single-post{
	padding: var(--section-space) 0;
}

.post-image{
	position: relative;
	margin-bottom: 30px;
}

.post-image figure{
	display: block;
}

.post-image figure,
.post-image img{
	aspect-ratio: 1 / 0.50;
	object-fit: cover;
	border-radius: 40px;
}

.post-content{
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after{
    content: '';
    display: block;
    clear: both;
}

.post-entry a{
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	margin: 0 0 0.6em;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color);
}

.post-entry h1 span,
.post-entry h2 span{
	font-weight: 400;
}

.post-entry h1{
	font-size: 54px;
}

.post-entry h2{
	font-size: 46px;
}

.post-entry h3{
	font-size: 40px;
}

.post-entry h4{
	font-size: 30px;
}

.post-entry h5{
	font-size: 24px;
}

.post-entry h6{
	font-size: 18px;
}

.post-entry p{
	margin-bottom: 20px;
}

.post-entry p:last-child{
	margin-bottom: 0;
}

.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

.post-entry ol{
    margin: 0 0 30px;
}

.post-entry ol li{
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
}

.post-entry ul{
	padding: 0;
	margin: 20px 0 20px;
	padding-left: 20px;
}

.post-entry ul li{
	font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    position: relative;
    margin-bottom: 15px;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul{
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child{
    margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--secondary-color) url(/wp-content/uploads/2026/05/icon-blockquote.svg) no-repeat 35px 40px;
    background-size: 50px;
    border-radius: 40px;
    padding: 30px 30px 30px 120px;
    margin-bottom: 30px;
}

.post-entry blockquote p{
	color: var(--primary-color);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.tag-links{
	font-size: 22px;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-block;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    background-color: var(--primary-color);
    color: var(--white-color);
	border-radius: 10px;
    padding: 8px 20px;
    margin-left: 10px;
    margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background: var(--accent-color);
}

.post-social-sharing{
    text-align: right;
}

.post-social-sharing ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.post-social-sharing ul li:last-child{
	margin-right: 0;
}

.post-social-sharing ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	background-color: var(--primary-color);
    color: var(--white-color);
	border-radius: 10px;
    width: 38px;
    height: 38px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a{
	background-color: var(--accent-color);
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a i{
    color: var(--secondry-color);
}

/************************************/
/***      21. Page Doctor css 	  ***/
/************************************/

.page-doctor{
	padding: var(--section-space) 0 var(--section-space-md);
}

/************************************/
/***    22. Doctor Single css 	  ***/
/************************************/

.page-doctor-single{
	padding: var(--section-space) 0;
}

.about-doctor-info{
	margin-bottom: 50px;
}

.about-doctor-info p{
	margin-bottom: 30px;
}

.about-doctor-info p:last-child{
	margin-bottom: 0;
}

.about-doctor-info .content-header{
	font-size: 46px;
	margin-bottom: 30px;
}

.team-member-skills{
	margin-bottom: 30px;
}

.team-member-skills .skills-progress-bar{
	margin-bottom: 25px;
}

.team-member-skills .skills-progress-bar:last-child{
	margin-bottom: 0;
}

.skillbar .skill-data{
	display: flex;
	justify-content: space-between;
	margin-bottom: 15px;
}

.skillbar .skill-data .skill-title{	
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color);
	text-transform: capitalize;
}

.skillbar .skill-data .skill-no{
	font-size: 18px;
	font-weight: 600;
	color: var(--primary-color);
	margin-left: 20px;
}

.skillbar .skill-progress{
	width: 100%;
	height: 15px;
	background: var(--secondary-color);
	border-radius: 99px;
	position: relative;
}

.skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--accent-color);
	border-radius: 99px;
}

.doctor-feature-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.doctor-feature-list ul li{
    position: relative;
    width: calc(50% - 10px);
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    padding-left: 30px;
}

.doctor-feature-list ul li:before{
    content: '\f14a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 20px;
    color: var(--accent-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 2px;
    left: 0;
}

.doctor-details-sidebar{
	position: sticky;
	top: 20px;
	margin-left: 30px;
}

.doctor-details-box{
	background-color: var(--white-color);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 20px;
	margin-bottom: 40px;
}

.doctor-details-box .doctor-image{
	position: relative;
    overflow: hidden;
	border-radius: 40px;
	margin-bottom: 30px;
}

.doctor-details-box .doctor-image img{
	width: 100%;
	aspect-ratio: 1/1.18;
	object-fit: cover;
	transition: all 0.5s ease-in-out;
}

.doctor-details-box:hover .doctor-image img{
    transform: scale(1.1);
}

.doctor-details-box .doctor-content{
	text-align: center;
	margin-bottom: 20px;
}
	
.doctor-details-box .doctor-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.doctor-details-box .doctor-content .content-subtitle a{
	color: inherit;
}

.doctor-details-box .doctor-content p{
	text-transform: capitalize;
	margin: 0;
}

.doctor-social-list ul{
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.doctor-social-list ul li{
	display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.doctor-social-list ul li:last-child{
	margin-right: 0;
}

.doctor-social-list ul li a{
	height: 30px;
	width: 30px;
	background-color: var(--accent-color);
	border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.doctor-social-list ul li a i{
    color: var(--white-color);
    font-size: 16px;
	transition: all 0.3s ease-in-out;
}

.doctor-social-list ul li a:hover{
	background: var(--primary-color);
}

.get-touch-box{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 30px;
}

.get-touch-title{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.get-touch-title .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.get-touch-box ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.get-touch-box ul li{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.get-touch-box ul li:last-child{
	border-bottom: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.get-touch-box ul li span{
	font-size: 18px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
}

/************************************/
/***     23. Gallery Page css	  ***/
/************************************/

.our-gallery-page{
	padding: var(--section-space) 0 var(--section-space-md); 
}

.photo-gallery{
	margin-bottom: 30px;
	border-radius: 40px;
	overflow: hidden;
}

.photo-gallery a{
	cursor: none;
}

.photo-gallery img{
	position: relative;
	aspect-ratio: 1 / 1;
    object-fit: cover;
	border-radius: 40px;
}

.mfp-arrow-left:before,
.mfp-arrow-right:before{
	border: none;
}

.mfp-arrow-left:after{
	border-right: 13px solid var(--accent-color);
	opacity: 1;
}	

.mfp-arrow-right:after{
	border-left: 13px solid var(--accent-color);
	opacity: 1;
}

/************************************/
/***   24. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	padding: var(--section-space) 0 var(--section-space-md);
}

.testimonial-box-item{
	background: var(--white-color);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
}

.testimonial-box-header{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.testimonial-box-header .author-box-image{
	margin-right: 15px;
}

.testimonial-box-header .author-box-image img{
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
}

.author-box-content{
	width: calc(100% - 75px);
}

.author-box-content .content-subtitle{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.author-box-content p{
	text-transform: capitalize;
	line-height: normal;
	margin: 0;
}

.testimonial-box-item .testimonial-box-body{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30px;
}

.testimonial-quote-img img{
	max-width: 30px;
}

.testimonial-box-body .testimonial-rating i{
	font-size: 16px;
	color: var(--accent-color);
	margin-right: 2px;
}

.testimonial-box-content p{
	margin: 0;
}

/************************************/
/***       25. FAQs Page css      ***/
/************************************/

.page-faqs{
	padding: var(--section-space) 0;
}

.page-faqs-catagery{
	margin-right: 30px;
}

.page-faqs .page-faq-accordion{
	margin-bottom: 60px;
}

.page-faqs .page-faq-accordion:last-child{
	margin-bottom: 0;
}

.page-faqs .faq-accordion-title{
	margin-bottom: 30px;
}

.page-faqs .faq-accordion-title .content-header{
	font-size: 46px;
}

.page-faq-accordion .accordion-item{
	border: 1px solid var(--divider-color);
	border-radius: 20px;
	margin-bottom: 25px;
    padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
}

.page-faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.page-faq-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	background-color: var(--accent-color);
	color: var(--white-color);
	padding: 20px 50px 20px 20px;
	transition: all 0.3s ease-in-out;
}

.page-faq-accordion .accordion-button:not(.collapsed){
   background-color: var(--accent-color);
   color: var(--white-color);
   border-bottom: 1px solid var(--dark-divider-color);
}

.page-faq-accordion .accordion-header .accordion-button.collapsed{
	background-color: var(--white-color);
	color: var(--primary-color);
}

.page-faq-accordion .accordion-item .accordion-button::after,
.page-faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f068';
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 20px;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -10px);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 5px;
	color: var(--white-color);
}

.page-faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '\f067';
	color: var(--primary-color);
}

.page-faq-accordion .accordion-item .accordion-body{
	background-color: var(--accent-color);
	padding: 20px 50px 20px 20px;
}

.page-faq-accordion .accordion-item .accordion-body p{
    color: var(--white-color);
	margin: 0;
}

.faq-sidebar{
	position: sticky;
	top: 20px;
}

.faq-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
	margin-bottom: 40px;
}

.faq-catagery-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.faq-catagery-list ul li{
	background-color: var(--white-color);
    border-radius: 14px;
    margin-bottom: 20px;
}

.faq-catagery-list ul li:last-child{
	margin-bottom: 0;
}

.faq-catagery-list ul li a{
	display: block;
    position: relative;
    color: var(--text-color);
    text-transform: capitalize;
	padding: 15px;
    transition: all 0.3s ease-in-out
}

.faq-catagery-list ul li a::after{
	content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY( -50%);
    background-image: url(/wp-content/uploads/2026/05/icon-plus-accent.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 14px;
    height: 14px;
    transition: all 0.3s ease-in-out;
}

.faq-catagery-list ul li:hover a::after{
	transform: translateY(-50%) rotate(45deg);
}

.faq-catagery-list ul li:hover a{
	color: var(--accent-color);
}

.faq-sidebar .section-cta-box{
	display: flex;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
	padding: 30px;
}

/************************************/
/***   26. Contact us Page css	  ***/
/************************************/

.page-contact-us{
	padding: var(--section-space) 0;
}

.contact-us-info{
	margin-bottom: 70px;
}

.contact-us-content{
	margin-right: 30px;
}

.contact-us-item{
	position: relative;
	border: 1px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 30px;
	box-shadow: 0px 4px 40px 0px #0000000F;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
}

.contact-us-item:before{
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: var(--accent-color);
    border-radius: 500px 500px 0 0;
    transition: all 0.4s ease-in-out;
    height: 100%;
    width: 100%;
    z-index: 0;
	opacity: 0;
}

.contact-us-item:hover:before{
    top: 0;
	border-radius: 0;
	opacity: 1;
}

.contact-us-item .icon-box{
	position: relative;
	margin-bottom: 20px;
	z-index: 2;
}

.contact-us-item .icon-box img{
	max-width: 60px;
	transition: all 0.4s ease-in-out;
}

.contact-us-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.contact-us-item .contact-info-content{
	position: relative;
	z-index: 2;
	transition: all 0.3s ease-in-out;
}

/* All text inside the card inherits the wrapper color, regardless of tag
   (p, a, span, etc.). Explicit selectors so links beat their default color. */
.contact-us-item .contact-info-content .content-subtitle,
.contact-us-item .contact-info-content p,
.contact-us-item .contact-info-content a{
	color: inherit;
}

.contact-us-item .contact-info-content .content-subtitle{
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.contact-us-item .contact-info-content p,
.contact-us-item .contact-info-content a{
	display: block;
	width: 100%;
	max-width: 250px;
	margin: 0;
}

/* Card hover recolors the whole content block; children inherit it. */
.contact-us-item:hover .contact-info-content{
	color: var(--white-color);
}

.contact-us-form .form-control{
	padding: 15px;
	font-size: 16px;
	background-color: var(--secondary-color);
	border-color: var(--divider-color);
	border-radius: 14px;
	color: var(--primary-color);
	box-shadow: none;
	outline: none;
}

.contact-us-form .form-group label{
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.google-map .container-fluid{
	padding: 0;
}

.google-map-iframe iframe,
.google-map-iframe{
	width: 100%;
	height: 650px;
}

.google-map-iframe iframe{
	filter: grayscale(100%);
	transition: all 0.3s ease-in-out;
}

.google-map-iframe:hover iframe{
	filter: grayscale(0%);
}

/*************************************/
/*** 27. Page Book Appointment css ***/
/*************************************/

.page-book-appointment{
	padding: var(--section-space) 0;
}

.page-book-appointment .section-title{
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
}

.page-book-appointment .appointment-form{
	box-shadow: var(--shadow-card);
	border: 1px solid var(--divider-color);
}

/************************************/
/*** 	   28. 404 Page css       ***/
/************************************/

.error-page{
	padding: var(--section-space) 0;
}

.error-page-image{
	text-align: center;
	margin-bottom: 30px;
}

.error-page-image img{
	max-width: 50%;
}

.error-page .error-page-content{
	text-align: center;
}

.error-page-content-heading{
	margin-bottom: 30px;
}

.error-page-content-heading .content-header{
	font-size: 46px;
}

.error-page-content-body p{
	margin-bottom: 30px;
}

/* Insurances strip — bespoke 90px rhythm (off-scale), moved off inline styles. */
.insurances-accepted{
	padding: 90px 0;
	background: var(--secondary-color);
}

/************************************/
/***      29. Responsive css	  ***/
/************************************/

@media only screen and (max-width: 1024px){
	
	.main-menu ul li{
		margin: 0;
	}

	.company-experience{
		padding: 10px;
	}

	.company-experience-counter .counter-number{
		font-size: 50px;
	}

	.company-experience-content p{
		font-size: 14px;
	}
}

@media only screen and (max-width: 991px){

	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	.section-row{
		margin-bottom: 50px;
	}
	
	.section-btn{
		margin-top: 20px;
		text-align: left;
	}

	.section-title-content p{
		margin: 0;
		margin-top: 15px;
	}
	
	.section-title{
		margin-bottom: 40px;
	}

	.eyebrow-text{
		margin-bottom: 15px;
	}

	.hero-header{
		font-size: 40px;
	}

	.content-header{
		font-size: 38px;
	}
	
	.section-title p{
		margin-top: 20px;
		margin-bottom: 0;
	}

	.hero{
		padding-bottom: 108px;
	}

	.hero .hero-section{
		padding: 50px 0 158px;
	}

	.hero-section.hero-slider-layout .hero-slide{
		padding: calc(100px + 4rem) 0 175px;
	}

	.hero.bg-image .hero-section {
		padding: calc(100px + 4rem) 0 175px;
	}

	.hero-section.hero-slider-layout .hero-pagination{
		bottom: 140px;
	}

	.hero-content{
		margin-bottom: 30px;
	}

	.hero-content .section-title{
		margin-bottom: 30px;
	}

	.hero.bg-image .hero-section .hero-content .hero-header {
		font-size: 62px;
	}

	.hero-content-body{
		padding: 20px 0;
		margin-bottom: 30px;
	}

	.hero-counter-box .counter-number{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.hero-image{
		padding-left: 0px;
		padding-bottom: 50px;
	}

	.hero-img img{
		aspect-ratio: 1 / 0.8;
	}

	.company-service-rating{
		top: auto;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		max-width: 275px;
		padding: 15px;
	}

	@keyframes serviceratingmoveobject{
		50%{
			left: 43%;
		}
	}

	.company-rating-icon{
		margin-bottom: 5px;
	}

	.company-rating-content .content-subtitle{
		margin-bottom: 5px;
	}

	.cta-content-box{
		padding: 30px;
	}

	.cta-item{
		margin-bottom: 30px;
	}

	.cta-content-box .col-md-6:nth-child(2n + 2) .cta-item{
		border-right: none;
		padding-right: 0;
	}

	.cta-item .icon-box{
		width: 60px;
		height: 60px;
	}

	.cta-item .icon-box img{
		max-width: 28px;
	}

	.cta-item-content{
		width: calc(100% - 75px);
	}

	.cta-item-content .content-subtitle{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.about-us-content{
		margin-bottom: 30px;
	}

	.about-us-body{
		gap: 20px;
		padding: 20px 0;
		margin-bottom: 30px;
	}

	.about-body-item{
		width: calc(33.333% - 14px);
	}

	.about-counter{
		width: auto;
	}

	.about-counter .counter-number{
		font-size: 32px;
	}

	.about-counter-content{
		width: auto;
	}

	.about-image{
		margin-right: 0px;
	}

	.company-experience-counter .counter-number{
		font-size: 50px;
	}

	.service-item{
		padding: 30px;
	}

	.service-item-content .content-subtitle{
		font-size: 18px;
	}

	.service-body{
		margin-bottom: 20px;
	}

	.expertise-content{
		margin-bottom: 30px;
	}

	.expertise-content .section-title{
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	.expertise-list-title{
		margin-bottom: 10px;
	}

	.expertise-list-box{
		margin-bottom: 20px;
	}

	.expertise-image{
		max-width: 635px;
		margin: 0 auto;
	}

	.why-choose-content{
		margin-bottom: 30px;
	}

	.why-choose-list{
		margin-bottom: 30px;
	}

	.why-choose-item{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.why-choose-image{
		text-align: center;
	}

	.why-choose-image img{
		width: 100%;
		max-width: 50%;
		aspect-ratio: 1 / 1.4;
		margin: 0 auto;
	}

	.how-work-content{
		margin-bottom: 30px;
	}

	.faq-accordion.how-work-accordion .accordion-item{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.faq-accordion.how-work-accordion .accordion-header .accordion-button{
		padding: 0px 25px 0 35px;
	}

	.faq-accordion.how-work-accordion .accordion-item .accordion-body{
		padding: 10px 25px 0px 35px;
	}

	.how-work-image{
		margin-right: 0px;
	}

	.how-work-img-2 img,
	.how-work-img-1 img{
		aspect-ratio: 1 / 0.8;
		object-fit: cover;
	}

	.how-work-img-3 img{
		aspect-ratio: 1 / 0.4;
		object-fit: cover;
	}

	.testimonial-slider{
		padding: 50px;
	}

	.testimonial-header{
		margin-bottom: 40px;
	}

	.testimonial-quote{
		margin-bottom: 20px;
	}

	.testimonial-content p{
		font-size: 18px;
	}

	.our-faqs-content{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.section-cta-box{
		padding: 30px;
	}

	.section-cta-box .icon-box{
		margin-right: 20px;
	}

	.section-cta-box .icon-box img{
		max-width: 50px;
	}

	.section-cta-content{
		width: calc(100% - 70px);
	}

	.section-cta-content p{
		margin-bottom: 5px;
	}

	.section-cta-content .cta-header{
		font-size: 20px;
		margin-bottom: 5px;
	}

	.our-faq-section .accordion-header .accordion-button{
		padding: 15px 45px 15px 15px;
	}

	.our-faq-section .accordion-item .accordion-body{
		padding: 15px 45px 15px 15px;
	}

	.our-faq-section .accordion-item .accordion-button::after,
	.our-faq-section .accordion-item .accordion-button.collapsed::after{
		right: 15px;
	}

	.blog-item .post-featured-image img{
		aspect-ratio: 1 / 0.8;
	}

	.post-item-content .content-subtitle{
		margin-bottom: 15px;
	}

	.book-appointment-sidebar{
		margin-bottom: 30px;
	}

	.working-time-box{
		padding: 30px;
		margin-bottom: 30px;
	}

	.working-box-title{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.working-time-list ul li{
		margin-bottom: 20px;
	}

	.appointment-form{
		padding: 40px;
	}

	.appointment-form-content{
		margin-bottom: 30px;
	}

	.appointment-reason{
		margin-bottom: 30px;
	}

	.main-footer{
		background-size: cover;
	}

	.footer-logo{
		margin-bottom: 20px;
	}

	.about-footer-content{
		margin-bottom: 20px;
	}

	.about-footer{
		max-width: 100%;
		margin-bottom: 40px;
	}

	.footer-links .footer-title{
		margin-bottom: 20px;
	}

	.footer-links ul li{
		margin-bottom: 10px;
	}

	.footer-copyright{
		padding: 30px 0;
		margin-top: 60px;
	}

	.footer-privacy-policy ul li{
		margin-right: 20px;
	}

	.page-header{
		padding: calc(80px + 4rem) 0 80px;
	}

	.page-header-box .hero-header{
		font-size: 40px;
		margin-bottom: 10px;
	}

	.our-excellence{
		background: linear-gradient(180deg, var(--primary-color) 50%, var(--white-color) 50%);
	}

	.excellence-item{
		padding: 30px;
	}

	.excellence-item .icon-box{
		margin-bottom: 20px;
	}

	.excellence-item .icon-box img{
		max-width: 70px;
	}

	.excellence-title{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.our-doctors{
		/* base gives 50/50 at mobile via tokens; restore the original 50/20 bottom */
		padding-bottom: 20px;
	}

	.team-image{
		margin-bottom: 20px;
	}

	.team-image img{
		aspect-ratio: 1 / 1.1;
	}

	.service-single-content{
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.service-single-slider{
		margin-bottom: 30px;
	}

	.service-entry{
		margin-bottom: 40px;
	}

	.service-entry .content-header{
		font-size: 38px;
	}

	.service-catagery-list{
		padding: 30px;
		margin-bottom: 30px;
	}

	.service-catagery-list .content-subtitle{
		margin-bottom: 20px;
	}

	.page-blog .post-featured-image img{
		aspect-ratio: 1 / 0.7;
	}

	.page-blog .post-item-body{
		padding: 20px;
	}

	.page-pagination{
		margin-top: 10px;
	}

	.post-image{
		margin-bottom: 20px;
	}

	.post-entry blockquote{
		background: var(--secondary-color) url('/wp-content/uploads/2026/05/icon-blockquote.svg') no-repeat 30px 35px;
        background-size: 45px;
        padding: 25px 25px 25px 90px;
        margin-bottom: 20px;
	}

	.post-entry blockquote p{
		font-size: 18px;
	}

	.post-entry h2{
		font-size: 36px;
	}

	.post-entry ul li{
		font-size: 16px;
	}

	.post-tag-links{
		padding: 0 0px;
	}

	.post-tags{
		margin-bottom: 10px;
	}

	.post-social-sharing ul{
		text-align: left;
	}

	.post-tags .tag-links a{
		font-size: 16px;
		padding: 8px 15px;
	}

	.doctor-details-sidebar{
		position: initial;
		margin-left: 0px;
		margin-bottom: 30px;
	}

	.about-doctor-info{
		margin-bottom: 40px;
	}

	.doctor-details-box{
		margin-bottom: 30px;
	}

	.doctor-details-box .doctor-image{
		max-width: 80%;
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.doctor-details-box .doctor-image img{
		aspect-ratio: 1 / 0.99;
	}

	.about-doctor-info p{
		margin-bottom: 20px;
	}

	.about-doctor-info .content-header{
		font-size: 38px;
		margin-bottom: 20px;
	}

	.team-member-skills .skills-progress-bar{
		margin-bottom: 20px;
	}

	.skillbar .skill-data{
		margin-bottom: 10px;
	}

	.testimonial-box-item{
		padding: 30px;
	}

	.testimonial-box-header{
		padding-bottom: 20px;
		margin-bottom: 20px;
	}

	.testimonial-box-item .testimonial-box-body{
		margin-bottom: 20px;
	}

	.faq-sidebar{
		position: initial;
		margin-bottom: 30px;
	}

	.faq-catagery-list{
		padding: 20px;
		margin-bottom: 30px;
	}

	.page-faqs-catagery{
		margin-right: 0px;
	}

	.page-faqs .page-faq-accordion{
		margin-bottom: 40px;
	}

	.page-faqs .faq-accordion-title{
		margin-bottom: 20px;
	}

	.page-faqs .faq-accordion-title .content-header{
		font-size: 38px;
	}

	.page-faq-accordion .accordion-header .accordion-button{
		padding: 15px 45px 15px 15px;
	}

	.page-faq-accordion .accordion-item .accordion-body{
		padding: 15px 45px 15px 15px;
	}

	.page-faq-accordion .accordion-item .accordion-button::after,
	.page-faq-accordion .accordion-item .accordion-button.collapsed::after{
		right: 15px;
	}

	.contact-us-info{
		margin-bottom: 20px;
	}

	.contact-us-item .icon-box img{
		max-width: 50px;
	}

	.google-map-iframe iframe,
	.google-map-iframe{
		height: 500px;
	}

	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-image img{
		max-width: 80%;
	}

	.error-page-content-heading{
		margin-bottom: 20px;
	}
	
	.error-page-content-heading .content-header{
		font-size: 38px;
	}

	.error-page-content-body p{
		margin-bottom: 20px;
	}
}

@media only screen and (max-width: 767px){

	.btn-default{
		padding: 17px 55px 17px 25px;
	}

	.section-row{
		margin-bottom: 40px;
	}

	.section-title{
        margin-bottom: 30px;
    }

	.hero-header{
        font-size: 28px;
    }

	.content-header{
        font-size: 28px;
    }

	.section-title p{
        margin-top: 15px;
    }

	.hero{
        padding-bottom: 141px;
    }

	.hero .hero-section{
        padding: 50px 0 190px;
    }

	.hero.bg-image .hero-section .hero-content .hero-header {
		font-size: 38px;
	}

	.hero-section.hero-slider-layout .hero-slide{
		padding: 50px 0 250px;
	}

	.hero-section.hero-slider-layout .hero-pagination{
		bottom: 190px;
	}

	.hero-content .hero-header img{
		max-width: 90px;
	}

	.hero-content-body{
        padding: 15px 0;
        margin-bottom: 30px;
		gap: 20px;
    }

	.hero-counter-box{
		width: calc(33.33% - 13.33px);
	}

	.hero-counter-box .counter-number{
        font-size: 32px;
        margin-bottom: 10px;
    }

	.hero-content-footer .btn-default.btn-highlighted{
		margin-top: 15px;
	}

	.hero-content-footer .btn-default{
		padding: 17px 25px;
		margin-right: 0;
	}

	.hero-content-footer .btn-default.btn-highlighted{
		padding: 16px 25px;
	}

	.hero-image{
        padding-bottom: 80px;
    }

	.company-rating-content .content-subtitle{
		font-size: 16px;
		margin-bottom: 5px;
	}

	.cta-content-box{
        padding: 20px 10px;
    }

	.cta-item{
		border-right: none;
		padding-right: 0px;
	}

	.about-us-body{
        padding: 15px 0;
    }

	.about-body-item{
		width: calc(50% - 10px);
	}

	.about-counter{
        width: auto;
    }

	.about-counter .counter-number{
        font-size: 30px;
    }

	.about-counter-content{
        width: auto;
    }

	.about-us-footer{
		display: block;
	}

	.about-us-footer-btn{
		margin-right: 0px;
		margin-bottom: 20px;
	}

	.company-experience{
        padding: 5px;
    }

	.company-experience-counter .counter-number{
        font-size: 30px;
    }

	.company-experience-content p{
		font-size: 12px;
	}

	.service-item{
        padding: 20px;
    }

	.service-header{
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	.service-body{
        margin-bottom: 15px;
    }

	.service-image img{
		aspect-ratio: 1 / 0.6;
	}

	.expertise-list-title .eyebrow-text{
		font-size: 18px;
		padding-left: 30px;
	}

	.expertise-list-title .eyebrow-text::before{
		width: 22px;
		height: 22px;
	}

	.expertise-image{
		background-size: 75% auto;
		gap: 20px;
	}

	.expertise-img-1,
	.expertise-img-2{
		width: calc(50% - 10px);
	}

	.expertise-img-2{
		padding-top: 100px;
	}

	.expert-doctor{
		max-width: 220px;
		padding: 10px 15px;
	}

	.expert-doctor .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.expert-doctor .icon-box img{
		max-width: 26px;
	}

	.expert-doctor-content{
		width: calc(100% - 55px);
	}

	.expert-doctor-content .content-subtitle{
		font-size: 18px;
		margin-bottom: 0px;
	}

	.why-choose-item-content .content-subtitle{
		font-size: 18px;
	}

	.why-choose-image img{
        max-width: 100%;
    }

	.faq-accordion.how-work-accordion .accordion-item{
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

	.faq-accordion.how-work-accordion .accordion-header .accordion-button{
		font-size: 18px;
        padding: 0px 25px 0 25px;
    }

	.faq-accordion.how-work-accordion .accordion-header .accordion-button span{
		font-size: 18px;
	}

	.faq-accordion.how-work-accordion .accordion-item .accordion-body{
        padding: 10px 0px 0px 25px;
    }

	.doctor-work-img-box figure{
		border: 6px solid var(--white-color);
		padding: 6px 8px;
	}

	.how-work-img-2 img, .how-work-img-1 img{
        aspect-ratio: 1 / 0.98;
    }

	.how-work-img-3 img{
        aspect-ratio: 1 / 0.55;
    }

	.doctor-work-img-box img{
		max-width: 120px;
	}

	.testimonial-slider{
		padding: 30px;
	}

	.testimonial-header{
		margin-bottom: 30px;
	}

	.testimonial-quote{
		margin-bottom: 15px;
	}

	.testimonial-quote img{
		max-width: 40px;
	}

	.testimonial-content p{
		font-size: 14px;
	}

	.author-content .content-subtitle{
		font-size: 18px;
	}

	.testimonial-btn{
		position: initial;
		justify-content: center;
	}

	.section-cta-box{
        padding: 20px;
    }

	.section-cta-box .icon-box{
        margin-right: 15px;
    }

	.section-cta-box .icon-box img{
        max-width: 40px;
    }

	.section-cta-content{
		width: calc(100% - 55px);
	}

	.section-cta-content .cta-header{
        font-size: 18px;
    }

	.our-faq-section .accordion-header .accordion-button{
		font-size: 18px;
	}

	.our-faq-section .accordion-item .accordion-body{
		padding: 15px;
	}

	.blog-item{
		display: block;
	}

	.blog-item .post-featured-image{
		width: 100%;
		height: auto;
	}

	.blog-item .post-featured-image a{
		border-radius: 40px 40px 0 0px;	
	}

	.blog-item .post-featured-image img{
		height: auto;
		border-radius: 40px 40px 0 0px;
	}

	.post-item-body{
		width: 100%;
		display: block;
	}

	.post-item-content .content-subtitle{
		font-size: 18px;
	}

	.working-time-box{
        padding: 20px;
    }

	.working-box-title .cta-header{
		font-size: 18px;
	}

	.working-time-list ul li{
        margin-bottom: 15px;
    }

	.book-appointment-sidebar .section-cta-box{
		padding: 20px;
	}

	.appointment-form{
        padding: 30px 20px;
    }

	.appointment-form .form-control{
		padding: 12px 15px;
	}

	.appointment-form-title .cta-header{
		font-size: 18px;
	}

	.appointment-reason{
		gap: 10px;
	}

	.appointment-reason .reason-box{
		width: 100%;
	}

	.about-footer{
        margin-bottom: 30px;
    }

	.footer-contact-content .footer-title{
		font-size: 18px;
		margin-bottom: 10px;
	}

	.footer-links{
		margin-bottom: 30px;
	}

	.main-footer .col-12:last-child .footer-links{
		margin-bottom: 0;
	}

	.footer-links .footer-title{
		font-size: 18px;
        margin-bottom: 15px;
    }

	.footer-copyright{
        padding: 20px 0;
        margin-top: 40px;
    }

	.footer-copyright-text{
		text-align: center;
		margin-bottom: 10px;
	}

	.footer-privacy-policy ul{
		text-align: center;
	}

	.footer-privacy-policy ul li{
        margin-right: 15px;
    }

	.page-header-box .hero-header{
        font-size: 28px;
    }

	.our-excellence{
		background: linear-gradient(180deg, var(--primary-color) 40%, var(--white-color) 40%);
	}

	.excellence-item{
		padding: 30px 20px;
	}

	.excellence-item .icon-box{
		margin-bottom: 20px;
	}

	.excellence-item .icon-box img{
		max-width: 60px;
	}

	.excellence-title{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.excellence-title .content-subtitle{
		font-size: 18px;
	}

	.service-slider-image img{
		aspect-ratio: 1 / 0.8;
	}

	.service-single-slider .swiper-pagination{
		bottom: 10px;
	}

	.service-entry .content-header{
        font-size: 28px;
    }

	.service-entry .content-subtitle{
        font-size: 18px;
    }

	.service-entry ul{
        display: block;
    }

	.service-entry ul li{
		width: 100%;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.service-entry ul li:last-child{
		margin-bottom: 0;
	}

	.service-entry ul li:before{
		font-size: 18px;
		top: 4px;
	}

	.service-entry-img{
		margin-bottom: 20px;
	}

	.service-catagery-list{
        padding: 20px;
    }

	.service-catagery-list .content-subtitle{
		font-size: 18px;
	}

	.service-catagery-list ul li{
		padding: 12px;
	}

	.service-sidebar .section-cta-box{
		padding: 20px;
	}

	.post-image figure,
	.post-image img{
		aspect-ratio: 1 / 0.70;
	}

	.post-entry blockquote{
		background: var(--secondary-color) url(/wp-content/uploads/2026/05/icon-blockquote.svg) no-repeat 20px 20px;
        background-size: 35px;
        padding: 55px 20px 20px 20px;
	}
	
	.post-entry h2{
		font-size: 28px;
	}

	.tag-links{
		font-size: 20px;
	}

	.doctor-details-box .doctor-image{
        max-width: 100%;
        margin: auto;
        margin-bottom: 20px;
    }

	.doctor-details-box .doctor-content{
		margin-bottom: 15px;
	}

	.doctor-details-box .doctor-content .content-subtitle{
		font-size: 18px;
	}

	.get-touch-title .content-subtitle{
		font-size: 18px;
	}

	.about-doctor-info{
        margin-bottom: 30px;
    }

	.about-doctor-info .content-header{
        font-size: 28px;
    }

	.skillbar .skill-data .skill-no,
	.skillbar .skill-data .skill-title{
		font-size: 16px;
	}

	.doctor-feature-list ul{
		gap: 15px;
	}

	.doctor-feature-list ul li{
		padding-left: 25px;
		width: 100%;
	}

	.doctor-feature-list ul li:before{
		font-size: 18px;
		top: 3px;
	}

	.photo-gallery img,
	.photo-gallery{
		border-radius: 20px;
	}

	.testimonial-box-item{
        padding: 20px;
    }

	.testimonial-box-header{
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

	.author-box-content .content-subtitle{
		font-size: 18px;
	}

	.testimonial-box-item .testimonial-box-body{
        margin-bottom: 15px;
    }

	.faq-catagery-list ul li a{
		padding: 12px;
	}

	.faq-catagery-list ul li a::after{
		right: 12px;
	}

	.page-faqs .page-faq-accordion{
        margin-bottom: 30px;
    }

	.page-faqs .faq-accordion-title .content-header{
        font-size: 28px;
    }

	.page-faq-accordion .accordion-header .accordion-button{
        font-size: 18px;
    }

	.page-faq-accordion .accordion-item .accordion-body{
        padding: 15px;
    }

	.contact-us-item{
		padding: 20px;
	}

	.contact-us-item .icon-box img{
        max-width: 40PX;
    }

	.contact-us-item .contact-info-content .content-subtitle{
		font-size: 18px;
	}

	.google-map-iframe iframe,
	.google-map-iframe{
		height: 350px;
	}

	.error-page-image img{
		max-width: 100%;
	}

	.error-page-content-heading .content-header{
        font-size: 28px;
	}
}