/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Primecare - 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       : #000000;     /* Deep navy/black (main background) */
	--secondary-color     : #FFFFFF;     /* White for text on dark bg */
	--text-color          : #333333;     /* Dark text for light backgrounds */
	--accent-color        : #D4AF37;     /* Gold accent (matches logo & poster) */
	--accent-gradient     : linear-gradient(90deg, #A4782D 0%, #D4AF37 40%, #F9E27C 70%, #D4AF37 100%);
	--white-color         : #FFFFFF;
	--divider-color       : #E6E6E6;     /* Light divider */
	--dark-divider-color  : rgba(255, 255, 255, 0.15); /* For overlays on dark bg */
	--error-color         : #E65757;     /* Red for errors (leave as is) */
	--default-font        : "Plus Jakarta Sans", sans-serif;
}


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

/* Utilities tied to your brand palette */
:root {
  /* assumes you've added these in :root earlier */
  /* --accent-gradient: linear-gradient(90deg,#A4782D 0%,#D4AF37 40%,#F9E27C 70%,#D4AF37 100%); */
}

/* --- Brand helpers --- */
.text-gold        { color: var(--accent-color) !important; }
.bg-gold          { background: var(--accent-color) !important; }
.text-gold-grad   { background: var(--accent-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-gold-grad     { background: var(--accent-gradient) !important; }
.border-gold      { border-color: var(--accent-color) !important; }

/* --- Base --- */
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;
}

h1, h2, h3, h4, h5, h6{
	margin: 0;
	font-weight: 700;
	line-height: 1.2em;
	color: var(--primary-color); /* deep navy for headings on light bg */
}

figure{ margin: 0; }
img{ max-width: 100%; height: auto; }

/* Links use brand gold with accessible hover/focus on dark or light bg */
a{
	text-decoration: none;
	color: var(--accent-color);
	transition: color .2s ease, opacity .2s ease;
}
a:hover{ text-decoration: none; outline: 0; color: #a68428; } /* darker gold on hover */
a:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Layout */
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: inline-flex;
	visibility: hidden;
	overflow: hidden;
}
.reveal img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	transform-origin: left;
}

/* Grid paddings */
.row{ margin-right: -15px; margin-left: -15px; }
.row > *{ padding-right: 15px; padding-left: 15px; }
.row.no-gutters{ margin-right: 0; margin-left: 0; }
.row.no-gutters > *{ padding-right: 0; padding-left: 0; }

/* --- Buttons (brand) --- */
.btn-default{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: capitalize;
	background: var(--accent-gradient);   /* gold gradient */
	color: var(--white-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: var(--primary-color);     /* invert to deep navy on hover */
	color: var(--secondary-color);
}
.btn-default:focus-visible{
	outline: 3px solid var(--accent-color);
	outline-offset: 2px;
}

/* plus icon */
.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-image: url('../images/icon-plus.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 16px auto;
	transform: translate(-30px, -50%);
	transition: all 0.4s ease-in-out;
}
.btn-default:hover::before{ transform: translate(-30px, -50%) rotate(45deg); }

/* sheen on hover */
.btn-default::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 0;
	top: 50%;
	left: 50%;
	background: var(--primary-color);
	opacity: 0;
	z-index: -1;
	transform: translate(-50%,-50%) rotate(45deg);
	transition: all 0.6s ease-in-out;
}
.btn-default:hover:after{ height: 450%; opacity: 1; }

/* Variants */
.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 var(--accent-color);
	background: transparent;
	color: var(--primary-color);
	padding: 18px 60px 18px 30px;
}
.btn-default.btn-border:hover{
	border-color: var(--primary-color);
	background: var(--primary-color);
	color: var(--secondary-color);
}

/* --- Cursor accent --- */
#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); /* gold dot */
	margin: 0;
	border-radius: 50%;
	pointer-events: none;
	opacity:1 !important;
}

/* --- Preloader in brand colors --- */
.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--primary-color); /* deep navy canvas */
	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: 3px solid transparent;
	/* alternating gold & white to keep brand contrast */
	border-color: transparent var(--accent-color) transparent var(--secondary-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); }
}

/* --- Sections / titles --- */
.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;
}
.section-title h3{
	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); /* gold kicker */
	padding-left: 28px;
	margin-bottom: 20px;
}
.section-title h3::before{
	content: '';
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	transform: translateY(-50%);
	background: url("../images/icon-sub-heading.svg") no-repeat left center / cover;
	width: 18px;
	height: 18px;
	filter: brightness(0) saturate(100%) sepia(36%) hue-rotate(2deg) saturate(500%) contrast(0.9); /* subtle gold tint */
}
.section-title h1{
	font-size: 54px;
	font-weight: 700;
	margin-bottom: 0;
	color: var(--primary-color);
}
.section-title h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 0;
	color: var(--primary-color);
}
.section-title p{
	margin-top: 30px;
	margin-bottom: 0;
	color: var(--text-color);
}

/* Forms / errors */
.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: absolute;
	left: 0; right: 0; top: 0;
	z-index: 100;
	background: transparent;
}

header.main-header .header-sticky{
	position: relative;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

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); /* white */
	border-bottom: 1px solid var(--divider-color);
	box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

body.sticky-header-on {
  padding-top: var(--header-height, 0px);
}

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

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

/* nav menu */
.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); /* navy */
	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); /* gold */
}

/* dropdown */
.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: 12px;
	position: absolute;
	left: 0;
	top: 100%;
	background-color: var(--primary-color); /* navy bg */
	transition: all 0.3s ease-in-out;
	text-align: left;
	box-shadow: 0 6px 20px rgba(0,0,0,.08);
}
.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(--accent-color); /* gold on hover */
	background-color: transparent;
	padding: 8px 20px 8px 23px !important;
}

/* contact-now box */
.contact-now-box{
	display: flex;
	align-items: center;
}
.contact-now-box .icon-box{
	background-color: var(--accent-color); /* gold */
	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); /* navy invert */
}
.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 h3{ font-size: 18px; }

/* responsive menu */
.responsive-menu, .navbar-toggle{ display: none; }
.responsive-menu{ top: 0; position: relative; }

.slicknav_btn{
	background: var(--accent-color); /* gold toggle */
	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: 22px;
	height: 3px;
	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; }

/* burger animation */
.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);
}

/* mobile menu */
.slicknav_menu{
	position: absolute;
	width: 100%;
	padding: 0;
	background: var(--primary-color); /* navy */
	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(--accent-color); /* gold hover */
}
.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(--accent-color); /* gold arrow when open */
}
/************************************/
/***        04. Hero css          ***/
/************************************/

/* ---------- Height & base ---------- */
.hero{
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-height, 0px));
  min-height: 540px;
  padding-bottom: 0;
  overflow: hidden;
}

/* Prefer modern viewport units (iOS/Android browser chrome safe) */
@supports (height: 100dvh){
  .hero{ height: calc(100dvh - var(--header-height, 0px)); }
}
@supports (height: 100svh){
  .hero{ height: calc(100svh - var(--header-height, 0px)); }
}

/* Static bg variant (kept for reuse elsewhere) */
.hero .hero-section{
  background:
    url(../images/hero-bg.svg),
    linear-gradient(90deg, #000000 -10.82%, var(--primary-color) 56.59%) no-repeat;
  background-position: left center;
  background-size: contain;
  padding: 100px 0 186px;
}

/* Legacy image hero (kept) */
.hero.bg-image .hero-section{
  position: relative;
  background: url('../images/hero-bg.jpg') no-repeat center/cover;
  padding: 150px 0 236px;
}
.hero.bg-image .hero-section::before{
  content: '';
  position: absolute; inset: 0;
  background-color: var(--primary-color);
  opacity: .5;
}
.hero.bg-image .hero-section .hero-content{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.hero.bg-image .hero-section .hero-content .section-title h1{
  font-size: clamp(36px, 7vw, 80px);
}

/* ---------- Video / Media slider hero ---------- */
.hero-section.hero-video{
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

/* Dark overlay for readability */
.hero-section.hero-video::before{
  content: '';
  position: absolute; inset: 0;
  background-color: var(--primary-color);
  opacity: .65; /* tweak to taste */
  z-index: 1;
  pointer-events: none;
}

/* Swiper pinned to hero */
.hero-section.hero-video .media-slider{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-section.hero-video .swiper-wrapper,
.hero-section.hero-video .swiper-slide,
.hero-section.hero-video .hero-bg-video{
  width: 100%; height: 100%;
}
.hero-section.hero-video .swiper-slide{ position: relative; }

/* Background media */
.hero-section.hero-video .hero-bg-video{
  position: absolute; inset: 0; z-index: 0;
}
.hero-section.hero-video .hero-bg-video .media,
.hero-section.hero-video .hero-bg-video video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Center per-slide content */
.hero-section.hero-video .swiper-slide > .container{
  position: relative; z-index: 2;
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding-inline: clamp(12px, 4vw, 24px);
}

/* ---------- Typography ---------- */
.hero-content .section-title{ margin-bottom: clamp(16px, 3vw, 40px); }

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

.hero-content .section-title h1{
  /* scales well from phones to desktops */
  font-size: clamp(28px, 6.5vw, 72px);
  line-height: 1.06;
  letter-spacing: -.01em;
  max-width: min(92vw, 1100px);
  margin-inline: auto;
}
.hero-content .section-title h1 img{
  width: clamp(56px, 12vw, 129px);
  height: auto;
  border-radius: 100px;
}

.hero-content .section-title p{
  max-width: min(92vw, 820px);
  margin: 0 auto;
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.6;
  opacity: .95;
}

/* ---------- CTA row (responsive & simple) ---------- */
.hero-content-footer{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(10px, 2vw, 18px);
  justify-items: center;
  align-items: stretch;
  max-width: min(92vw, 860px);
  margin: clamp(12px, 2.2vw, 28px) auto 0;
}

.hero-content-footer .btn-default{
  --pad-x: clamp(18px, 3vw, 34px);
  --pad-y: clamp(12px, 1.6vw, 16px);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 999px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.2;
  white-space: normal; hyphens: auto;
}

/* Keep your icon-left pattern but make it fluid */
.hero-content-footer .btn-default::before{
  width: clamp(16px, 2.1vw, 22px);
  height: clamp(16px, 2.1vw, 22px);
  left: clamp(16px, 2.6vw, 26px);
  transform: translateY(-50%);
  background-size: contain;
}
.hero-content-footer .btn-default.btn-highlighted:hover::before{
  transform: translateY(-50%) rotate(45deg);
}

/* If using the simpler style: hide pseudo icon */
.hero-content-footer .btn-default.btn-simple::before{ display: none; }
.hero-content-footer .btn-link{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 0;
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--white-color);
  opacity: .92; text-decoration: underline;
}
.hero-content-footer .btn-link:hover{ opacity: 1; }

/* ---------- Bottom CTA card ---------- */
.our-cta-box{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0 clamp(10px, 2vw, 15px) clamp(10px, 2vw, 15px);
  z-index: 3;
  pointer-events: none;
}
.our-cta-box .cta-content-box{
  pointer-events: auto;
  background-color: var(--white-color);
  border: 1px solid var(--divider-color);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-radius: 40px;
  padding: clamp(20px, 4vw, 50px);
}
.cta-item{
  border-right: 1px solid var(--divider-color);
  display: flex; align-items: center;
  padding-right: 15px;
}
.cta-item:last-child{ border-right: none; }
.cta-item .icon-box{
  background: var(--accent-color);
  border-radius: 15px;
  width: clamp(56px, 7vw, 70px);
  height: clamp(56px, 7vw, 70px);
  display: flex; align-items: center; justify-content: center;
  margin-right: 15px; position: relative; overflow: hidden;
  transition: background-color .35s ease;
}
.cta-item:hover .icon-box{ background-color: var(--primary-color); }
.cta-item .icon-box::before{
  content: ''; position: absolute; inset: 0;
  background: var(--primary-color);
  border-radius: 15px; transform: scale(0);
  transition: transform .35s ease;
}
.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 h3{
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 8px;
}
.cta-item-content p{ margin: 0; font-size: clamp(14px, 1.7vw, 16px); }
.cta-btn{ text-align: center; }

/* ---------- Swiper UI ---------- */
.hero-section.hero-video .swiper-pagination{
  position: absolute;
  bottom: clamp(16px, 3.2vw, 24px);
  z-index: 2;
}
.hero-section.hero-video .swiper-pagination-bullet{
  background: rgba(255,255,255,.7);
}
.hero-section.hero-video .swiper-pagination-bullet-active{
  background: var(--accent-color);
}

/* Remove default glyphs */
.hero-section.hero-video .swiper-button-prev::after,
.hero-section.hero-video .swiper-button-next::after{ content: none; }

/* Custom FA “tooth” arrows (responsive sizing) */
.hero-section.hero-video .swiper-button-prev,
.hero-section.hero-video .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(42px, 5vw, 58px);
  height: clamp(42px, 5vw, 58px);
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}
.hero-section.hero-video .swiper-button-prev{ left: clamp(8px, 2vw, 18px); }
.hero-section.hero-video .swiper-button-next{ right: clamp(8px, 2vw, 18px); }

.hero-section.hero-video .swiper-button-prev:hover,
.hero-section.hero-video .swiper-button-next:hover{
  transform: translateY(-50%) scale(1.06);
  background: rgba(0,0,0,.34);
}

/* Icon sizes scale with the button */
.hero-section.hero-video .swiper-button-prev i,
.hero-section.hero-video .swiper-button-next i{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.hero-section.hero-video .fa-tooth-base{
  font-size: clamp(18px, 2.8vw, 28px);
  color: var(--white-color);
  opacity: .95;
}
.hero-section.hero-video .fa-dir{
  font-size: clamp(10px, 1.8vw, 14px);
  color: var(--accent-color);
}

/* ---------- Responsive adjustments ---------- */
@media (max-width: 1200px){
  .hero-content .section-title h1{ max-width: min(92vw, 900px); }
}

@media (max-width: 991px){
  .hero{
    height: calc(100svh - var(--header-height, 0px));
    min-height: 500px;
  }
  /* Move the CTA card below the hero to avoid overlap */
  .our-cta-box{
    position: static;
    margin: 0;
    pointer-events: auto;
  }
  .cta-item{ border-right: 0; padding-right: 0; }
  .cta-item + .cta-item{ margin-top: 16px; }
}

@media (max-width: 576px){
  .hero-content .section-title h1{
    font-size: clamp(26px, 9vw, 38px);
  }
  .hero-content .section-title p{
    font-size: clamp(13px, 3.8vw, 16px);
  }
  .hero-content-footer{
    grid-template-columns: 1fr;   /* stack CTAs on phones */
    max-width: 520px;
  }
}


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

.about-us{
	padding: 100px 0;
}

/* main image wrapper */
.about-img figure{
	display: block;
    mask-image: url(../images/about-image-bg-shape.svg);
    background-image: url(../images/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%;
    border-radius: 20px;
}

/* experience badge box */
.company-experience{
	position: absolute;
	bottom: 0;
	right: 0;
	background: url('../images/about-counter-bg.jpg') no-repeat center/cover;
	border-radius: 30px;
	display: flex;
	align-items: center;
	width: 192px;
	height: 214px;
	overflow: hidden;
	padding: 20px;
	box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.company-experience::before{
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--primary-color); /* overlay navy */
	opacity: .6;
	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 h2{
	font-size: 60px;
	font-weight: 700;
	color: var(--accent-color); /* highlight gold numbers */
}
.company-experience-content{
	position: relative;
	text-align: center;
	z-index: 1;
}
.company-experience-content p{
	color: var(--white-color);
	margin: 0;
	text-transform: capitalize;
}

/* body counters */
.about-us-body{
	border-top: 1px solid var(--divider-color);
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 25px 0;
    margin-bottom: 40px;
}
.about-body-item{
	width: calc(50% - 25px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.about-counter{
	width: calc(40% - 10px);
}
.about-counter h2{
	font-size: 40px;
	font-weight: 600;
	color: var(--accent-color); /* gold accent */
}
.about-counter-content{
	width: calc(60% - 10px);
}
.about-counter-content p{
	text-transform: capitalize;
	margin: 0;
	color: var(--text-color);
}

/* footer with founder */
.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%;
	border: 2px solid var(--accent-color); /* subtle gold ring */
}
.company-founder-content{
	width: calc(100% - 80px);
}
.company-founder-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
	color: var(--primary-color);
}
.company-founder-content p{
	text-transform: capitalize;
	margin: 0;
	color: var(--text-color);
}
/************************************/
/***      06. Our Services css     ***/
/************************************/

.our-service{
	/* subtle section bg blend: off-white to pure white */
	background: linear-gradient(180deg, var(--secondary-color) 70%, var(--white-color) 30%);
	padding: 100px 0 20px;
}

.service-item{
	background-color: var(--white-color);
	box-shadow: 0px 10px 30px 0px rgba(0,0,0,.05);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	transition: transform .3s ease;
}
.service-item:hover{ transform: translateY(-6px); }

.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); /* gold tile */
	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;
    inset: 0;
    background: var(--primary-color); /* invert navy overlay */
    border-radius: 10px;
    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 h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
}

.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; color: var(--text-color); }

.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: 50px 0 100px; }

.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 h3{
	position: relative;
	font-size: 20px;
	font-weight: 600;
	padding-left: 35px;
	color: var(--primary-color);
}
.expertise-list-title h3::before{
	content: '\f14a';
	position: absolute;
	font-family: 'FontAwesome';
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	color: var(--accent-color); /* gold check */
}

.expertise-list-content p{ margin: 0; color: var(--text-color); }

.expertise-image{
	position: relative;
	background: url('../images/expertise-image-bg.svg') no-repeat center/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;
}

/* floating doctor badge */
.expert-doctor{
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--white-color);
	box-shadow: 10px 0px 36.8px -4px rgba(0,0,0,.1);
	border: 1px solid var(--divider-color);
	border-radius: 15px;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 300px;
	padding: 25px;
	animation: doctormoveobject 3s infinite linear alternate;
}
@keyframes doctormoveobject{ 50%{ left: 40px; } }

.expert-doctor .icon-box{
	background-color: var(--accent-color); /* gold */
    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 h3{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 5px;
	color: var(--primary-color);
}
.expert-doctor-content p{
	text-transform: capitalize;
	margin: 0;
	color: var(--text-color);
}

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

.why-choose-us{
	background: var(--primary-color) url('../images/why-choose-us-bg.svg') no-repeat center/cover;
	padding: 100px 0 0;
}
.why-choose-content .btn-default.btn-border {
    border-color: var(--accent-color);
    color: var(--accent-color);
}
.why-choose-content .btn-default.btn-border:hover {
    background: var(--accent-color);
    color: var(--white-color);
}

/* section titles on dark bg */
.why-choose-content .section-title p,
.why-choose-content .section-title h2,
.why-choose-content .section-title h3{
	color: var(--white-color);
}
.why-choose-content .section-title h3::before{
	filter: none;
	color: var(--accent-color); /* subtle gold icon instead of flat white */
}

/* image */
.why-choose-image img{
	width: 100%;
	aspect-ratio: 1 / 1.42;
	object-fit: cover;
	border-radius: 20px;
	box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* items */
.why-choose-item{
	border-bottom: 1px solid var(--dark-divider-color);
	display: flex;
	padding-bottom: 30px;
	margin-bottom: 30px;
	transition: transform .3s ease;
}
.why-choose-item:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.why-choose-item:hover{ transform: translateX(8px); }

/* icon box */
.why-choose-item .icon-box{
	position: relative;
    background: var(--accent-color); /* gold */
    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: '';
    position: absolute;
    inset: 0;
    background: var(--white-color);
    border-radius: 10px;
    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(0) saturate(100%) invert(10%) sepia(20%) saturate(600%) hue-rotate(200deg) contrast(0.9);
	/* ensures the icon shifts towards navy tone on hover */
}

/* content */
.why-choose-item-content{ width: calc(100% - 70px); }
.why-choose-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--accent-color); /* gold highlight heading */
	margin-bottom: 5px;
}
.why-choose-item-content p{
	color: var(--white-color);
	margin: 0;
	opacity: .85;
}
/************************************/
/***      09. How It Work css      ***/
/************************************/

.how-it-work{
	padding: 100px 0;
}

/* images grid */
.how-work-image{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-right: 30px;
}
.how-work-img-1,
.how-work-img-2{ width: calc(50% - 7.5px); }
.how-work-img-3{ width: 100%; }

.how-work-img-1 figure,
.how-work-img-2 figure,
.how-work-img-3 figure{
	display: block;
	width: 100%;
	border-radius: 20px;
}
.how-work-img-1 img,
.how-work-img-2 img,
.how-work-img-3 img{
	width: 100%;
	border-radius: 20px;
	object-fit: cover;
}
.how-work-img-1 img,
.how-work-img-2 img{ aspect-ratio: 1 / 1.09; }
.how-work-img-3 img{ aspect-ratio: 1 / 0.49; }

/* floating doctor image overlay */
.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;
	box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.doctor-work-img-box img{
	max-width: 158px;
	border-radius: 40px;
}

/* accordion */
.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);
	border-radius: 12px;
	transition: box-shadow .3s ease;
}
.faq-accordion.how-work-accordion .accordion-item:hover{
	box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.faq-accordion.how-work-accordion .accordion-item:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
}

/* headers */
.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:hover{
	color: var(--accent-color); /* gold hover */
}
.faq-accordion.how-work-accordion .accordion-header .accordion-button span{
	position: absolute;
    left: 0;
    top: -3px;
    transform: translateY(50%);
    font-size: 20px;
    line-height: 1em;
    color: var(--primary-color);
    transition: color 0.3s ease-in-out;
}
.faq-accordion.how-work-accordion .accordion-button:not(.collapsed) span{
	color: var(--accent-color); /* gold when expanded */
}
.faq-accordion.how-work-accordion .accordion-button:not(.collapsed){
   color: var(--accent-color); /* heading gold when expanded */
}
.faq-accordion.how-work-accordion .accordion-header .accordion-button.collapsed{
	color: var(--primary-color);
}

/* toggle icons */
.faq-accordion.how-work-accordion .accordion-item .accordion-button::after,
.faq-accordion.how-work-accordion .accordion-item .accordion-button.collapsed::after{
    font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 0;
	transition: color .3s ease;
}
.faq-accordion.how-work-accordion .accordion-item .accordion-button::after{
    content: '\f068'; /* minus */
	color: var(--accent-color); /* gold when open */
}
.faq-accordion.how-work-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f067'; /* plus */
	color: var(--primary-color);
}

/* body */
.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('../images/testimonial-bg.png'),
		linear-gradient(180deg, var(--primary-color) 60%, var(--white-color) 40%);
	background-position: center center;
	background-size: auto;
	padding: 100px 0 50px;
}

/* section title on dark */
.our-testimonials .section-title h2{
	color: var(--white-color);
}

/* slider card */
.testimonial-slider{
	position: relative;
	background-color: var(--white-color);
	box-shadow: 0px 12px 37.1px 0px rgba(0,0,0,.05);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 100px;
}

/* header & quote */
.testimonial-header{ margin-bottom: 50px; }
.testimonial-quote{ margin-bottom: 30px; }
.testimonial-quote img{
	max-width: 50px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}

/* content */
.testimonial-content p{
	font-size: 20px;
	font-weight: 600;
	margin: 0;
	color: var(--primary-color);
}

/* author */
.testimonial-body{
    display: inline-flex;
    align-items: center;
}
.author-image{ margin-right: 20px; }
.author-image img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
	border: 2px solid var(--accent-color); /* subtle gold ring */
}
.author-content{
	text-align: left;
    width: calc(100% - 80px);
}
.author-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
	color: var(--primary-color);
}
.author-content p{
	text-transform: capitalize;
	margin: 0;
	color: var(--text-color);
}

/* nav buttons */
.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: var(--accent-color); /* gold */
	border-radius: 10px;
	transition: all 0.4s ease-in-out;
	box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.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); /* navy on hover */
}
.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	content: '';
	position: absolute;
    inset: 0;
    background: url("../images/arrow-white.svg") no-repeat center center;
    background-size: 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease-in-out;
}
.testimonial-slider .testimonial-button-prev::before{ transform: rotate(180deg); }
.testimonial-slider .testimonial-button-next:hover::before{ transform: translateX(2px); }
.testimonial-slider .testimonial-button-prev:hover::before{ transform: rotate(180deg) translateX(2px); }
/************************************/
/***  11. Our Transformation css  ***/
/************************************/

.our-transformation{
	padding: 50px 0 70px;
}

.transformation_image{
	margin-bottom: 30px;
}
.transformation_image img{
	width: 100%;
	aspect-ratio: 1 / 0.71;
	object-fit: cover;
	border-radius: 40px;
	box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/************************************/
/***       12. Our FAQs css        ***/
/************************************/

.our-faqs{
	background-color: var(--secondary-color); /* off-white base */
	padding: 100px 0;
}

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

/* CTA box above FAQs */
.section-cta-box{
	background-color: var(--white-color);
	border-radius: 40px;
	display: inline-flex;
	align-items: center;
	padding: 40px;
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
	transition: transform .3s ease;
}
.section-cta-box:hover{ transform: translateY(-4px); }

.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; color: var(--text-color); }
.section-cta-content h3{
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--primary-color);
}

/* FAQ accordion */
.our-faq-section .accordion-item{
	border-radius: 20px;
	margin-bottom: 25px;
	padding: 0;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.our-faq-section .accordion-item:last-child{ margin-bottom: 0; }

/* accordion headers */
.our-faq-section .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2em;
	background-color: var(--accent-color); /* gold by default */
	color: var(--white-color);
	padding: 20px 50px 20px 20px;
	transition: all 0.3s ease-in-out;
}
.our-faq-section .accordion-button:not(.collapsed){
   background: var(--accent-gradient); /* gold gradient when open */
   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);
}

/* plus/minus icons */
.our-faq-section .accordion-item .accordion-button::after,
.our-faq-section .accordion-item .accordion-button.collapsed::after{
	font-family: "Font Awesome 6 Free";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 20px;
	width: 20px;
	height: 20px;
	padding: 5px;
	transition: color .3s ease;
}
.our-faq-section .accordion-item .accordion-button::after{
	content: '\f068'; /* minus */
	color: var(--white-color);
}
.our-faq-section .accordion-item .accordion-button.collapsed::after{
	content: '\f067'; /* plus */
	color: var(--accent-color); /* gold plus */
}

/* accordion body */
.our-faq-section .accordion-item .accordion-body{
	background-color: var(--primary-color); /* navy bg */
	padding: 20px 50px 20px 20px;
}
.our-faq-section .accordion-item .accordion-body p{
    color: var(--white-color);
	margin: 0;
	line-height: 1.6em;
}
/************************************/
/***     13. Our Blog Post css    ***/
/************************************/

.our-blog{
	padding: 100px 0 70px;
}

/* card */
.blog-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	box-shadow: 0px 10px 30px 0px rgba(0,0,0,.05);
	border-radius: 40px;
	display: flex;
	align-items: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.blog-item:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

/* featured image */
.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: transform .5s ease-in-out;
}
.blog-item:hover .post-featured-image img{ transform: scale(1.1); }

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

/* content */
.post-item-content{ margin-bottom: 20px; }
.post-item-content h3{
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
	color: var(--primary-color); /* navy titles */
}
.post-item-content h3 a{
	color: inherit;
	outline: none;
}
.post-item-content h3 a:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 6px;
}
.post-item-content p{
	margin: 0;
	color: var(--text-color);
}

/* read more */
.post-readmore-btn a{
	position: relative;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color); /* gold */
	transition: color .3s ease-in-out, transform .3s ease-in-out;
	padding-right: 26px;
	display: inline-block;
}
.post-readmore-btn a::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-image: url(../images/icon-plus-accent.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transform: translate(0, -50%);
	transition: transform .4s ease-in-out, filter .3s ease-in-out;
}
.post-readmore-btn a:hover{
	color: var(--primary-color); /* navy on hover */
	transform: translateX(2px);
}
.post-readmore-btn a:hover::before{
	transform: translate(0, -50%) rotate(45deg);
	filter: brightness(3) invert(1); /* keeps icon visible on navy */
}

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

.book-appointment{
	background-color: var(--secondary-color); /* off-white bg */
	padding: 100px 0;
}

/* working time sidebar */
.working-time-box{
	background-color: var(--primary-color); /* navy */
	border-radius: 40px;
	padding: 40px;
	margin-bottom: 40px;
	box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.working-box-title{
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.working-box-title h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--accent-color); /* gold heading */
}
.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; color: var(--accent-color); }

/* CTA in sidebar */
.book-appointment-sidebar .section-cta-box{
	padding: 30px;
}

/* form card */
.appointment-form{
	background-color: var(--white-color);
	border-radius: 40px;
	padding: 50px;
	box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.appointment-form-content{ margin-bottom: 40px; }
.appointment-form-content p{ margin: 0; color: var(--text-color); }

.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;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.appointment-form .form-control:focus{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(212,175,55,.25); /* soft gold focus */
	outline: none;
}

.appointment-form-title{ margin-bottom: 20px; }
.appointment-form-title h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
}

/* reasons (radio inputs) */
.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"]{
	accent-color: var(--accent-color); /* modern browsers */
}
.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;
	color: var(--text-color);
	transition: color .3s ease;
}
.appointment-reason .reason-box input:checked ~ label{
	color: var(--accent-color); /* gold label when checked */
	font-weight: 600;
}

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

.main-footer{
	background:
		url(../images/hero-bg.svg),
		linear-gradient(90deg, #000000 -10.82%, var(--primary-color) 56.59%);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	padding: 100px 0 0;
}

/* about block */
.about-footer{ width: 100%; max-width: 412px; }
.footer-logo{ margin-bottom: 30px; }
.footer-logo img{ max-width: 180px; border-radius: 10px; }

.about-footer-content{ margin-bottom: 30px; }
.about-footer-content p{
	color: var(--white-color);
	margin: 0;
	opacity: .9;
}

/* contact headings */
.footer-contact-content h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--accent-color); /* gold heading for emphasis */
	margin-bottom: 15px;
}
.footer-contact-content h3:last-child{ margin-bottom: 0; }

/* links list */
.footer-links h3{
	font-size: 20px;
	text-transform: capitalize;
	color: var(--accent-color); /* gold section titles */
	margin-bottom: 30px;
}
.footer-links ul{
	margin: 0;
	padding: 0 0 0 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);
	opacity: .9;
	transition: color .3s ease, opacity .3s ease, transform .2s ease;
}
.footer-links ul li:hover a{
	color: var(--accent-color);
	opacity: 1;
	transform: translateX(2px);
}

/* contact detail rows */
.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;
	opacity: .9;
}

/* copyright strip */
.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;
	opacity: .85;
}

/* policy links */
.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;
	opacity: .9;
	transition: color .3s ease, opacity .3s ease;
}
.footer-privacy-policy ul li:hover a{
	color: var(--accent-color);
	opacity: 1;
}
/************************************/
/***     16. About us Page css     ***/
/************************************/

/* page header (uses brand gradient) */
.page-header{
	background:
		url(../images/hero-bg.svg),
		linear-gradient(90deg, #000000 -10.82%, var(--primary-color) 56.59%);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	padding: 140px 0;
	
}
.page-header-box{ text-align: center; }
.page-header-box h1{
	font-size: 54px;
	font-weight: 700;
	text-align: center;
	color: var(--white-color);
	margin-bottom: 20px;
}
.page-header-box ol{
	margin: 0;
	padding: 0;
	display: inline-flex;
	justify-content: center;
	gap: 10px;
}
.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;
	outline: none;
}
.page-header-box ol li.breadcrumb-item a:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 4px;
}
.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
	color: var(--white-color);
}

/* excellence strip with dark->light transition */
.our-excellence{
	background: linear-gradient(180deg, var(--primary-color) 70%, var(--white-color) 30%);
	padding: 100px 0 20px;
}
.our-excellence .section-title h2{ color: var(--white-color); }

.excellence-item{
	background-color: var(--white-color);
	box-shadow: 0 10px 30px rgba(0,0,0,.05);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.excellence-item:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.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 h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
}
.excellence-content p{ margin: 0; color: var(--text-color); }

/* reuse how-it-work section spacing on about */
.how-it-work.about-how-work{ padding: 50px 0 100px; }

/* team grid */
.our-doctors{ padding: 100px 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: transform .5s ease-in-out;
}
.team-member-item:hover .team-image img{ transform: scale(1.1); }

/* floating social icons */
.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); /* navy pill */
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.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); /* gold on hover */
}

/* team text */
.team-content{ text-align: center; }
.team-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
	color: var(--primary-color);
}
.team-content h3 a{
	color: inherit;
	outline: none;
}
.team-content h3 a:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 6px;
}
.team-content p{
	text-transform: capitalize;
	margin: 0;
	color: var(--text-color);
}

/* FAQs variant inside About page */
.our-faqs.page-about-faqs{
	background-color: transparent;
	padding: 50px 0 100px;
}
.our-faqs.page-about-faqs .section-cta-box{
	background-color: var(--secondary-color); /* off-white card */
}
.our-faqs.page-about-faqs .our-faq-section .accordion-header .accordion-button.collapsed{
	background-color: var(--secondary-color);
}

/* optional: gold underline for excellence titles on dark bg */
.our-excellence .excellence-title{
	border-bottom: 1px solid var(--divider-color);
	position: relative;
}
.our-excellence .excellence-title::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: var(--accent-color);
	border-radius: 2px;
}
/************************************/
/***     17. Page Services css     ***/
/************************************/

.page-services{
	padding: 100px 0 70px;
}

.our-faqs.page-about-faqs.page-service-faqs{
	padding: 100px 0;
}

.our-testimonials.service-testimonials{
	padding: 100px 0;
}

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

.page-service-single{
	padding: 100px 0;
}

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

/* image slider */
.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;
	aspect-ratio: 1 / 0.6;
    object-fit: cover;
	transition: transform .5s ease;
}
.service-slider-image img:hover{ transform: scale(1.05); }

/* pagination bullets */
.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: 0 4px;
	transition: all .3s ease;
}
.service-single-slider .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--accent-color); /* gold */
}

/* entry text */
.service-entry{ margin-bottom: 50px; }
.service-entry h2{
	font-size: 46px;
	margin-bottom: 20px;
	color: var(--primary-color);
}
.service-entry h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
	color: var(--primary-color);
}
.service-entry p{
	margin-bottom: 20px;
	color: var(--text-color);
}
.service-entry p:last-child{ margin-bottom: 0; }

/* custom bullet list */
.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); /* gold check */
    position: absolute;
    top: 2px;
    left: 0;
}

/* inline image */
.service-entry-image{ margin-bottom: 20px; }
.service-entry-img img{ border-radius: 40px; }

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

/* sidebar */
.service-sidebar{ position: sticky; top: 20px; }

/* category list */
.service-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 40px;
	margin-bottom: 40px;
	box-shadow: 0 8px 20px rgba(0,0,0,.05);
}
.service-catagery-list h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 30px;
	color: var(--primary-color);
}
.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;
	transition: transform .3s ease, box-shadow .3s ease;
}
.service-catagery-list ul li:last-child{ margin-bottom: 0; }
.service-catagery-list ul li:hover{
	transform: translateX(4px);
	box-shadow: 0 6px 14px rgba(0,0,0,.08);
}
.service-catagery-list ul li a{
	display: block;
    position: relative;
    color: var(--text-color);
	text-transform: capitalize;
	transition: color .3s ease;
}
.service-catagery-list ul li:hover a{ color: var(--accent-color); }
.service-catagery-list ul li a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
	transform: translateY(-50%);
	background-image: url('../images/icon-plus-accent.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	width: 14px;
	height: 14px;
    transition: transform .3s ease;
}
.service-catagery-list ul li:hover a::after{
	transform: translateY(-50%) rotate(45deg);
}

/* sidebar CTA */
.service-sidebar .section-cta-box{
	display: flex;
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	border: 1px solid var(--divider-color);
	padding: 30px;
	border-radius: 30px;
	transition: transform .3s ease;
}
.service-sidebar .section-cta-box:hover{
	transform: translateY(-4px);
}
/************************************/
/***      19. Blog Archive css    ***/
/************************************/

.page-blog{
	padding: 100px 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 0;	
	display: block;
	overflow: hidden;
}
.page-blog .post-featured-image img{
	height: auto;
	aspect-ratio: 1 / 0.7;
	border-radius: 40px 40px 0 0;
	object-fit: cover;
	transition: transform .5s ease;
}
.page-blog .blog-item:hover .post-featured-image img{
	transform: scale(1.06);
}

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

/* pagination */
.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;
    justify-content: center;
    align-items: center;
    background: var(--secondary-color);
    color: var(--accent-color);        /* gold numbers */
	border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 700;
	line-height: 1em;
	text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.page-pagination ul li a:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 8px;
}
.page-pagination ul li.active a, 
.page-pagination ul li a:hover{
    background: var(--accent-color);   /* gold active */
	color: var(--white-color);
}


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

.page-single-post{ padding: 100px 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;
}

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

/* typographic system */
.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); /* gold links in article */
	text-decoration: none;
}
.post-entry a:hover{ opacity: .9; }

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	margin: 0 0 0.6em;
	color: var(--primary-color); /* navy headings */
}
.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; color: var(--text-color); }
.post-entry p:last-child{ margin-bottom: 0; }
.post-entry p strong{
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 600;
}

/* lists */
.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 0 0 20px;
	margin: 20px 0;
}
.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;
}

/* blockquote */
.post-entry blockquote{
	background: var(--secondary-color) url(../images/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; }

/* tags & share */
.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);   /* navy pill */
    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); /* gold hover */
}

.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); /* navy */
    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;
}
/* fix typo: use --secondary-color on hover icon if needed */
.post-social-sharing ul li:hover a i{
    color: var(--secondary-color);
}
/************************************/
/***      21. Page Doctor css     ***/
/************************************/

.page-doctor{
	padding: 100px 0 70px;
}


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

.page-doctor-single{
	padding: 100px 0;
}

/* about doctor text */
.about-doctor-info{ margin-bottom: 50px; }
.about-doctor-info p{ margin-bottom: 30px; color: var(--text-color); }
.about-doctor-info p:last-child{ margin-bottom: 0; }
.about-doctor-info h2{
	font-size: 46px;
	margin-bottom: 30px;
	color: var(--primary-color);
}

/* skills */
.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;
	overflow: hidden;
}
.skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0; left: 0; bottom: 0;
	background-color: var(--accent-color); /* gold fill */
	border-radius: 99px;
}

/* features list */
.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); /* gold check */
    position: absolute;
    top: 2px; left: 0;
}

/* sidebar card */
.doctor-details-sidebar{
	position: sticky;
	top: 20px;
	margin-left: 30px;
}
.doctor-details-box{
	background-color: var(--white-color);
	box-shadow: 0px 10px 30px 0px rgba(0,0,0,.05);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	padding: 20px;
	margin-bottom: 40px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.doctor-details-box:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.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: transform .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 h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
	color: var(--primary-color);
}
.doctor-details-box .doctor-content h3 a{
	color: inherit;
	outline: none;
}
.doctor-details-box .doctor-content h3 a:focus-visible{
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 6px;
}
.doctor-details-box .doctor-content p{
	text-transform: capitalize;
	margin: 0;
	color: var(--text-color);
}

/* social icons */
.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); /* gold */
	border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease-in-out;
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.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 in touch box */
.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 h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	color: var(--primary-color);
}
.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: 0; padding-bottom: 0;
}
.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: 100px 0 70px; 
}

/* gallery tiles */
.photo-gallery{
	margin-bottom: 30px;
	border-radius: 40px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
	transition: transform .3s ease, box-shadow .3s ease;
}
.photo-gallery:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.photo-gallery a{ cursor: none; display: block; }
.photo-gallery img{
	position: relative;
	aspect-ratio: 1 / 1;
    object-fit: cover;
	border-radius: 40px;
	transition: transform .5s ease-in-out;
}
.photo-gallery:hover img{ transform: scale(1.05); }

/* magnific arrows in brand color */
.mfp-arrow-left:before,
.mfp-arrow-right:before{ border: none; }
.mfp-arrow-left:after{
	border-right: 13px solid var(--accent-color); /* gold */
	opacity: 1;
}	
.mfp-arrow-right:after{
	border-left: 13px solid var(--accent-color);  /* gold */
	opacity: 1;
}
/************************************/
/***   24. Testimonials Page css  ***/
/************************************/

.page-testimonials{
	padding: 100px 0 70px;
}

.testimonial-box-item{
	background: var(--white-color);
	box-shadow: 0px 10px 30px rgba(0,0,0,.06);
	border: 1px solid var(--divider-color);
	border-radius: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 40px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial-box-item:hover{
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(0,0,0,.08);
}

.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%;
	border: 2px solid var(--accent-color); /* subtle gold ring */
}
.author-box-content{ width: calc(100% - 75px); }
.author-box-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 5px;
	color: var(--primary-color);
}
.author-box-content p{
	text-transform: capitalize;
	line-height: normal;
	margin: 0;
	color: var(--text-color);
}

.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); /* gold stars */
	margin-right: 2px;
}

.testimonial-box-content p{ margin: 0; color: var(--text-color); }


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

.page-faqs{ padding: 100px 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 h2{
	font-size: 46px;
	color: var(--primary-color);
}

.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); /* gold expanded */
	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%;
	transform: translateY(-50%);
	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;
}

/* sidebar */
.faq-sidebar{ position: sticky; top: 20px; }
.faq-catagery-list{
	background-color: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
	margin-bottom: 40px;
	box-shadow: 0 6px 16px rgba(0,0,0,.05);
}
.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;
	transition: transform .3s ease, box-shadow .3s ease;
}
.faq-catagery-list ul li:last-child{ margin-bottom: 0; }
.faq-catagery-list ul li:hover{
	transform: translateX(4px);
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.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: '';
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background-image: url(../images/icon-plus-accent.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 14px;
    height: 14px;
    transition: transform .3s ease-in-out;
}
.faq-catagery-list ul li:hover a{ color: var(--accent-color); }
.faq-catagery-list ul li:hover a::after{ transform: translateY(-50%) rotate(45deg); }

.faq-sidebar .section-cta-box{
	display: flex;
	box-shadow: 0px 10px 30px rgba(0,0,0,.08);
	border: 1px solid var(--divider-color);
	padding: 30px;
	border-radius: 30px;
	transition: transform .3s ease;
}
.faq-sidebar .section-cta-box:hover{ transform: translateY(-4px); }
/************************************/
/***   26. Contact us Page css    ***/
/************************************/

.page-contact-us{
	padding: 100px 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 rgba(0,0,0,.06);
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
}
.contact-us-item:hover{
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.1);
}
.contact-us-item:before{
    content: '';
    position: absolute;
    top: 100%;
    right: 0; left: 0;
    background-color: var(--accent-color); /* gold sweep */
    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: filter .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; }
.contact-us-item .contact-info-content h3{
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 20px;
	color: var(--primary-color);
	transition: color .3s ease-in-out;
}
.contact-us-item .contact-info-content p{
	width: 100%;
	max-width: 250px;
	margin: 0;
	color: var(--text-color);
	transition: color .3s ease-in-out;
}
.contact-us-item:hover .contact-info-content h3,
.contact-us-item:hover .contact-info-content p{
	color: var(--white-color);
}

/* form */
.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;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.contact-us-form .form-control:focus{
	border-color: var(--accent-color);
	box-shadow: 0 0 0 3px rgba(212,175,55,.25);
}
.contact-us-form .form-group label{
	color: var(--primary-color);
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 10px;
}

/* map */
.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: filter .3s ease-in-out;
}
.google-map-iframe:hover iframe{ filter: grayscale(0%); }


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

.page-book-appointment{
	padding: 100px 0;
}
.page-book-appointment .section-title{
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
	text-align: center;
}
.page-book-appointment .appointment-form{
	box-shadow: 0px 10px 30px rgba(0,0,0,.08);
	border: 1px solid var(--divider-color);
}


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

.error-page{ padding: 100px 0; }
.error-page-image{ text-align: center; margin-bottom: 30px; }
.error-page-image img{ max-width: 50%; border-radius: 20px; }

.error-page .error-page-content{ text-align: center; }
.error-page-content-heading{ margin-bottom: 30px; }
.error-page-content-heading h2{
	font-size: 46px;
	color: var(--primary-color);
}
.error-page-content-body p{ margin-bottom: 30px; color: var(--text-color); }


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

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

	.company-experience{ width: 140px; height: 160px; padding: 10px; }
	.company-experience-counter h2{ 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; }
	.section-title h3{ margin-bottom: 15px; }
	.section-title h1{ font-size: 40px; }
	.section-title h2{ 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: 100px 0 200px; }
	.hero.bg-image .hero-section { padding: 100px 0 200px; }
	.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 .section-title h1 { font-size: 62px; }

	.hero-content-body{ padding: 20px 0; margin-bottom: 30px; }
	.hero-counter-box h2{ 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 h3{ 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 h3{ font-size: 18px; margin-bottom: 5px; }

	.about-us{ padding: 50px 0; }
	.about-us-content{ margin-bottom: 30px; }
	.about-us-body{ gap: 20px; padding: 20px 0; margin-bottom: 30px; }
	.about-body-item{ width: calc(50% - 10px); }
	.about-counter{ width: calc(32% - 10px); }
	.about-counter h2{ font-size: 36px; }
	.about-counter-content{ width: calc(68% - 10px); }
	.about-image{ margin-right: 0px; }

	.company-experience{ width: 230px; height: 255px; }
	.company-experience-counter h2{ font-size: 50px; }

	.our-service{ padding: 50px 0 0px; }
	.service-item{ padding: 30px; }
	.service-item-content h3{ font-size: 18px; }
	.service-body{ margin-bottom: 20px; }

	.our-expertise{ padding: 25px 0 50px; }
	.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-us{ padding: 50px 0 0; }
	.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-it-work{ padding: 50px 0; }
	.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; }

	.our-testimonials{ padding: 50px 0 25px; }
	.testimonial-slider{ padding: 50px; }
	.testimonial-header{ margin-bottom: 40px; }
	.testimonial-quote{ margin-bottom: 20px; }
	.testimonial-content p{ font-size: 18px; }

	.our-transformation{ padding: 25px 0 20px; }

	.our-faqs{ padding: 50px 0; }
	.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 h3{ 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; }

	.our-blog{ padding: 50px 0 20px; }
	.blog-item .post-featured-image img{ aspect-ratio: 1 / 0.8; }
	.post-item-content h3{ margin-bottom: 15px; }

	.book-appointment{ padding: 50px 0; }
	.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{ padding: 50px 0 0; background-size: cover; }
	.footer-logo{ margin-bottom: 20px; }
	.about-footer-content{ margin-bottom: 20px; }
	.about-footer{ max-width: 100%; margin-bottom: 40px; }
	.footer-links h3{ 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: 80px 0; }
	.page-header-box h1{ font-size: 40px; margin-bottom: 10px; }

	.our-excellence{
		background: linear-gradient(180deg, var(--primary-color) 50%, var(--white-color) 50%);
		padding: 50px 0 0px;
	}
	.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; }

	.how-it-work.about-how-work{ padding: 25px 0 50px; }

	.our-doctors{ padding: 50px 0 20px; }
	.team-image{ margin-bottom: 20px; }
	.team-image img{ aspect-ratio: 1 / 1.1; }

	.our-faqs.page-about-faqs{ padding: 25px 0 50px; }

	.page-services{ padding: 50px 0 20px; }
	.our-faqs.page-about-faqs.page-service-faqs{ padding: 50px 0; }
	.our-testimonials.service-testimonials{ padding: 50px 0; }

	.page-service-single{ padding: 50px 0; }
	.service-single-content{ margin-right: 0px; margin-bottom: 30px; }
	.service-single-slider{ margin-bottom: 30px; }
	.service-entry{ margin-bottom: 40px; }
	.service-entry h2{ font-size: 38px; }
	.service-catagery-list{ padding: 30px; margin-bottom: 30px; }
	.service-catagery-list h3{ margin-bottom: 20px; }

	.page-blog{ padding: 50px 0; }
	.page-blog .post-featured-image img{ aspect-ratio: 1 / 0.7; }
	.page-blog .post-item-body{ padding: 20px; }
	.page-pagination{ margin-top: 10px; }

	.page-single-post{ padding: 50px 0; }
	.post-image{ margin-bottom: 20px; }
	.post-entry blockquote{
		background: var(--secondary-color) url('../images/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; }

	.page-doctor{ padding: 50px 0 20px; }
	.page-doctor-single{ padding: 50px 0; }
	.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 20px; }
	.doctor-details-box .doctor-image img{ aspect-ratio: 1 / 0.99; }
	.about-doctor-info p{ margin-bottom: 20px; }
	.about-doctor-info h2{ font-size: 38px; margin-bottom: 20px; }
	.team-member-skills .skills-progress-bar{ margin-bottom: 20px; }
	.skillbar .skill-data{ margin-bottom: 10px; }

	.our-gallery-page{ padding: 50px 0 20px; }

	.page-testimonials{ padding: 50px 0 20px; }
	.testimonial-box-item{ padding: 30px; }
	.testimonial-box-header{ padding-bottom: 20px; margin-bottom: 20px; }
	.testimonial-box-item .testimonial-box-body{ margin-bottom: 20px; }

	.page-faqs{ padding: 50px 0; }
	.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 h2{ font-size: 38px; }
	.page-faq-accordion .accordion-header .accordion-button{ padding: 15px 45px 15px 15px; }
	.page-faq-accordion .accordion-item .accordion-body{ padding: 15px; }
	.page-faq-accordion .accordion-item .accordion-button::after,
	.page-faq-accordion .accordion-item .accordion-button.collapsed::after{ right: 15px; }

	.page-contact-us{ padding: 50px 0; }
	.contact-us-info{ margin-bottom: 20px; }
	.contact-us-item .icon-box img{ max-width: 50px; }
	.google-map-iframe iframe,
	.google-map-iframe{ height: 500px; }

	.page-book-appointment{ padding: 50px 0; }

	.error-page{ padding: 50px 0; }
	.error-page-image{ margin-bottom: 20px; }
	.error-page-image img{ max-width: 80%; }
	.error-page-content-heading{ margin-bottom: 20px; }
	.error-page-content-heading h2{ 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; }
	.section-title h1{ font-size: 28px; }
	.section-title h2{ 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 .section-title h1 { 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 .section-title h1 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 h2{ font-size: 32px; margin-bottom: 10px; }

	.hero-content-footer .btn-default.btn-highlighted{ margin-top: 15px; }
	.hero-content-footer .btn-default{ padding: 17px 25px 17px 65px; margin-right: 20px; }
	.hero-content-footer .btn-default.btn-highlighted{ padding: 16px 25px 16px 55px; }

	.hero-image{ padding-bottom: 80px; }

	.company-rating-content h3{ 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: 100%; }
	.about-counter{ width: calc(28% - 10px); }
	.about-counter h2{ font-size: 32px; }
	.about-counter-content{ width: calc(72% - 10px); }

	.about-us-footer{ display: block; }
	.about-us-footer-btn{ margin-right: 0px; margin-bottom: 20px; }

	.company-experience{ width: 110px; height: 125px; padding: 5px; }
	.company-experience-counter h2{ 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 h3{ font-size: 18px; padding-left: 30px; }
	.expertise-list-title h3::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 h3{ font-size: 18px; margin-bottom: 0px; }

	.why-choose-item-content h3{ 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 h3{ 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 h3{ 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 h3{ font-size: 18px; }

	.working-time-box{ padding: 20px; }
	.working-box-title h3{ 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 h3{ font-size: 18px; }
	.appointment-reason{ gap: 10px; }
	.appointment-reason .reason-box{ width: 100%; }

	.about-footer{ margin-bottom: 30px; }
	.footer-contact-content h3{ font-size: 18px; margin-bottom: 10px; }
	.footer-links{ margin-bottom: 30px; }
	.main-footer .col-12:last-child .footer-links{ margin-bottom: 0; }
	.footer-links h3{ 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 h1{ 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 h3{ font-size: 18px; }

	.service-slider-image img{ aspect-ratio: 1 / 0.8; }
	.service-single-slider .swiper-pagination{ bottom: 10px; }
	.service-entry h2{ font-size: 28px; }
	.service-entry h3{ 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 h3{ 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(../images/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 h3{ font-size: 18px; }
	.get-touch-title h3{ font-size: 18px; }

	.about-doctor-info{ margin-bottom: 30px; }
	.about-doctor-info h2{ 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 h3{ 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 h2{ 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 h3{ font-size: 18px; }

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

	.error-page-image img{ max-width: 100%; }
	.error-page-content-heading h2{ font-size: 28px; }
}