/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. Home Contact Us css 
06. About Us css
07. Gallery Carousel css
08. Our Services css
09. Solution Your Plan css
10. Why Choose Us css
11. Need Attension css
12. Our Theraphist css
13. Our Testiminial css
14. Our Blog css
15. Scrolling Ticker css
16. Footer css
17. About us Page css
18. Services Page css
19. Service Single css
20. Blog Archive css
21. Blog Single css
22. Theraphist Page css
23. Theraphist Single css
24. Testimonials Page css
25.	FAQs Page css
26. Contact us Page css
27. Make Appointment Page css
28. 404 Page css
29. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--header-bg-color		: #4E0A12;   /* deep maroon */
	--primary-color			: #7E1220;   /* maroon (headings, buttons, footer) */
	--secondary-color		: #F6EBDD;   /* light gold-cream (badges, pills) */
	--text-color			: #7E1220B3; /* paragraph color = maroon 70% */
	--accent-color			: #C9A227;   /* gold (links, icons, highlights) */
	--white-color			: #FFFFFF;
	--divider-color			: #FFFFFF26;
	--dark-divider-color	: #7E12201A;
	--error-color			: rgb(230, 87, 87);
	--accent-font			: "Archivo", sans-serif;
	--default-font			: "DM Sans", sans-serif;
	--gold-color			: #D9A62E;
	--orange-color			: #C97C2B;
	--maroon-color			: #7E1220;
	--sky-color				: #3E8FB0;
	--section-space			: 40px;
	--container-width		: 1300px;
}

/* Container width grows with the device – used on ALL pages */
@media only screen and (min-width: 1400px){
	:root{ --container-width: 1320px; }
}
@media only screen and (min-width: 1600px){
	:root{ --container-width: 1400px; }
}
@media only screen and (min-width: 1920px){
	:root{ --container-width: 1720px; }
}
@media only screen and (min-width: 2560px){
	:root{ --container-width: 1920px; }
}

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

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

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

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-family: var(--accent-font);
	font-weight: 700;
	line-height: 1em;
	color: var(--primary-color);
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
	text-decoration: none;
}

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

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

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

.container{
	max-width: var(--container-width);
}

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

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

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

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

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

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

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

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

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

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

.btn-default{
	display: inline-block;
	font-family: var(--accent-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.1em;
	color: var(--white-color);
	background: var(--accent-color);
	text-transform: capitalize;
	padding: 18px 55px 18px 20px;
	border-radius: 99px;
	border: none;
	transition: all 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.btn-default::before{
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--primary-color);
	background-image: url('../images/arrow-white.svg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	transform: translate(-10px, -50%);
	transition: all 0.4s ease-in-out;
}

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

.btn-default::after{ 
	content: '';
    display: block;
    position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
	width: 0;
	height: 102%;
	border-radius: 99px;
    background: var(--primary-color);
    transition: all 0.4s ease-in-out;
	z-index: -1;
}

.btn-default:hover::after{
	width: 106%;
}

.btn-default.btn-highlighted{
	background-color: var(--white-color);
	color: var(--accent-color);
}

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

.btn-default.btn-highlighted::before{
	background-color: var(--primary-color);
}

.btn-default.btn-highlighted::after{
	background-color: var(--accent-color);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.section-title h3{
	display: inline-block;
	font-size: 14px;
    font-weight: 700;
	line-height: 1em;
    text-transform: capitalize;
	background-color: var(--secondary-color);
    color: var(--accent-color);
	border-radius: 99px;
	padding: 10px 20px;
    margin-bottom: 20px;
}

.section-title h1{
	font-family: "Cinzel", serif;
	font-size: 53px;
	font-weight: 700;
	line-height: 1.2em;
	margin-bottom: 0;
}

.section-title h2{
	font-family: "Cinzel", serif;
	font-size: 50px;
	font-weight: 700;
	line-height: 1.2em;
	margin-bottom: 0;
}

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

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

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

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

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

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

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

.topbar{
	padding: 12px 0;
	background-color: var(--primary-color);
}

.topbar-contact-info{	
	text-align: left;
}

.topbar-contact-info ul{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	line-height: 1em;
	padding: 0;
	margin: 0;
	gap: 30px;
}

.topbar-contact-info ul li a{
	color: var(--white-color);
	display: flex;
	align-items: center;
}

.topbar-contact-info ul li a img{
	max-width: 20px;
	margin-right: 10px;
}

.topbar-social-links{
	text-align: right;
}

.topbar-social-links ul{
	list-style: none;
	line-height: 1em;
	padding: 0;
	margin: 0;
}

.topbar-social-links ul li{
	display: inline-block;
	margin-right: 20px;
	transition: all 0.3s ease-in-out;
}

.topbar-social-links ul li:last-child{
	margin-right: 0;
}

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

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

.topbar-social-links ul li a i{
	font-size: 20px;
	color: inherit
}

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

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

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

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

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

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

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

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

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

.main-menu ul li a {
  font-family: var(--accent-font);
  font-size: 16px;
  font-weight: 600;
  padding: 30px 22px !important;
  color: var(--white-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s ease-in-out;
}


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

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

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

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

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

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

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

.header-btn .btn-default::before{
    background-image: url(../images/icon-phone.svg);
}

.main-menu ul li.highlighted-menu{
    display: none;
}

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

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

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

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

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

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

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

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

.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 .slicknav_row:hover{
	background-color: transparent;
	color: var(--accent-color);
	padding: 10px 20px 10px 23px;
}

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

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

.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);
}

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

.hero{
	background-color: var(--secondary-color);
	padding: 50px 0 0;
}

.hero-content{
	padding-right: 100px;
}

.hero-content .section-title p{
	font-size: 18px;
	color: var(--primary-color);
}

.hero-content-body{
	border-bottom: 1px solid var(--dark-divider-color);
	padding-bottom: 40px;
	margin-bottom: 40px;
}

.hero-content-body .btn-default.btn-highlighted{
	margin-left: 40px;
}

.hero-counter-box h3{
	font-size: 32px;
	color: var(--accent-color);
	margin-bottom: 5px;
}

.hero-counter-box p{
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
}

.hero-image{
	position: relative;
}

.export-doctor-box{
	position: absolute;
	bottom: 0;
	left: 0;
	transform: translateY(-100px);
	background-color: var(--white-color);
	box-shadow: 0px 0px 24px 0px #00000012;
	border-radius: 20px;
	display: flex;
	align-items: center;
	padding: 20px;
	animation: exportmoveobject 3s infinite linear alternate;
}

@keyframes exportmoveobject{
	50%{
		left: 50px;
	}
}

.export-doctor-box .icon-box{
	margin-right: 10px;
}

.export-doctor-box .icon-box img{
	max-width: 48px;
	border-radius: 50%;
}

.export-doctor-content{
	width: calc(100% - 58px);
}

.export-doctor-content h3{
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.export-doctor-content p{
	color: var(--primary-color);
	opacity: 50%;
	text-transform: capitalize;
	margin: 0;
}

.hero.bg-image{
	position: relative;
	background: url('../images/hero-bg-1.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 130px 0 180px;
}

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

.hero.bg-image .hero-content{
	position: relative;	
	text-align: left;
	width: 100%;
	max-width: 680px;
	margin: 0;
	padding-right: 0;
	z-index: 1;
}

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

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

.hero.bg-image .hero-content .hero-content-body{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.hero.hero-slider{
	text-align: left;
	background: none;
	padding: 0;
}

.hero-slider-layout .hero-slide{
	position: relative;
    padding: 130px 0 180px;
}

.hero.bg-image.hero-slider:before{
	display: none;
}

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

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

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

.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img{
	width: 100%;
	height: 100%;
	object-position: center center; 
}

.hero.hero-slider .hero-slider-layout .hero-slide .hero-content{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 680px;
	margin: 0;
}

.hero-slider-layout .swiper-pagination{
    bottom: 100px;
}

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

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

.hero.bg-image.hero-video{
	position: relative;
}

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

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

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

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

.hero-book-appointment .appointment-form{
	background-color: var(--white-color);
	border-radius: 20px;
	text-align: center;
	padding: 40px;
	margin-left: 100px;
}

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

.hero-appointment-form-title h2{
	font-size: 36px;
	margin-bottom: 10px;
}

.hero-appointment-form-title h2 span{
	color: var(--accent-color);
}

.hero-appointment-form-title p{
	margin: 0;
}

/************************************/
/***  05. Home Contact Us css     ***/
/************************************/

.home-contact-us{
	padding: 40px 0;
	background: var(--primary-color);
}

.home-contact-us .home-contact-item{
	display: flex;
	position: relative;
	padding: 10px 15px 10px 0;
	border-right: 1px solid var(--divider-color);
}

.home-contact-us .col-lg-4:last-child .home-contact-item{
	padding-right: 0;
	border-right: none;
}

.home-contact-item .icon-box{
	position: relative;
	width: 64px;
	height: 64px;
	background: var(--divider-color);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	margin-right: 20px;
	overflow: hidden;
}

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

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

.home-contact-item .icon-box img{
	position: relative;
	z-index: 1;
}

.home-contact-us .col-lg-4:nth-last-child(1) .home-contact-item:before{
	display: none;
}

.home-contact-item .icon-box img{
	max-width: 34px;
}

.home-contact-item .home-contact-content{
	width: calc(100% - 84px);
}

.home-contact-item .home-contact-content h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
}

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

/************************************/
/***       06. About Us css       ***/
/************************************/

.about-us{
	padding: var(--section-space) 0 50px;
	background: url('../images/about-us-bg.svg') no-repeat;
	background-position: right -100px center;
	background-size: auto;
}

.about-us-image{
	position: relative;
}

.about-img img{
	border-radius: 30px;
}

.company-experience{
	position: absolute;
	right: 40px;
	bottom: 40px;
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border-radius: 20px;
	padding: 15px 20px;
	box-shadow: 0px 0px 24px 0px #00000012;
	animation: expmoveobject 3s infinite linear alternate;
}

@keyframes expmoveobject{
	50%{
		right: 80px;
	}
}

.company-experience .icon-box{
	margin-right: 10px;
}

.company-experience .icon-box img{
	max-width: 52px;
}

.company-experience-content{
	width: calc(100% - 62px);
	text-align: left;
}

.company-experience-content h3{
	font-size: 32px;
	font-weight: 700;
	margin-bottom: 5px;
}

.company-experience-content p{
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-size: 14px;
	text-transform: capitalize;
	margin: 0;
}

.about-us-body{
	display: flex;
	flex-wrap: wrap;
    gap: 30px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--dark-divider-color);
}

.about-list-item{
	width: calc(50% - 15px);
	display: flex;
	align-items: center;
}

.about-list-item .icon-box{
	margin-right: 10px;
}

.about-list-item .icon-box img{
	max-width: 34px;
}

.about-list-content{
	width: calc(100% - 44px);
}

.about-list-content h3{
	font-size: 18px;
	font-weight: 500;
	text-transform: capitalize;
}

.about-us-footer{
	display: flex;
	flex-wrap: wrap;
}

.doctor-info,
.appointment-btn{
	width: 50%;
}

.appointment-btn{
	text-align: right;
}

.doctor-info-item{
	display: flex;
	align-items: center;
}

.doctor-info-item .image-box{
	margin-right: 10px;
}

.doctor-info-item .image-box img{
	max-width: 48px;
	border-radius: 100%;
}

.doctor-info-item .doctor-info-content{
	width: calc(100% - 58px);
}

.doctor-info-item .doctor-info-content h3{
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.doctor-info-item .doctor-info-content p{
	color: var(--primary-color);
	opacity: 50%;
	margin: 0;
}

/************************************/
/***   07. Gallery Carousel css   ***/
/************************************/
.gallery-carousel{
	padding: 50px 0;
}
/* Center Our Gallery title & subtitle */
.gallery-carousel .section-title{
	text-align: center;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.gallery-carousel .container-fluid{
	padding: 0;
}

.gallery-carousel-box{
	--gap: 10px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}

.gallery-scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	animation: galleryscroll 15s linear infinite;
}

@keyframes galleryscroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.gallery-scrolling-content .gallery-image img{
	border-radius: 30px;
}

.gallery-carousel-box .gallery-scrolling-content .gallery-image:nth-child(even){
	padding-top: 75px;
}

/************************************/
/***     08. Our Services css     ***/
/************************************/

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

.service-item{
	padding: 30px;
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	position: relative;
	overflow: hidden;
}

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

.service-item:hover:before{
	top: 0;
}

.service-item .icon-box{
	background-color: var(--secondary-color);
	height: 52px;
	width: 52px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.service-item .icon-box::before{
	content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background-color: var(--white-color);
    transition: all 0.5s ease-in-out;
    height: 100%;
}

.service-item:hover .icon-box::before{
	top: 0;
}

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

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

.service-item .service-body h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
	transition: all 0.5s ease-in-out;
}

.service-item:hover .service-body h3{
	color: var(--white-color);
}

.service-item .service-body p{
	margin: 0;
	transition: all 0.5s ease-in-out;
}

.service-item:hover .service-body p{
	color: var(--white-color);
}

.service-item .service-footer a{
	background-color: var(--primary-color);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s ease-in-out;
}

.service-item .service-footer a:hover{
	background-color: var(--text-color);
}

.service-cta-item{
	padding: 40px 100px;
	text-align: center;
}

.service-cta-item .icon-box{
	margin: 0 auto;
	margin-bottom: 20px;
}

.service-cta-item:hover .service-cta-btn .btn-default:after{
	width: 100%;
}

.service-cta-item:hover .service-cta-btn .btn-default:before{
	background-color: var(--accent-color);
}

/************************************/
/***  09. Solution Your Plan css  ***/
/************************************/

.solution-your-plan{
	padding: var(--section-space) 0;
	background: var(--secondary-color);
}

.solution-plan-image{
	display: flex;
	align-items: start;
	justify-content: end;
	position: relative;
}

.solution-plan-img-1{
	margin-right: 16px;
}

.solution-plan-img-1 figure,
.solution-plan-img-2 figure{
	display: block;
}

.solution-plan-img-1 figure:after,
.solution-plan-img-2 figure:after{
	width: 250%;
}

.solution-plan-img-1 img,
.solution-plan-img-2 img{
	border-radius: 30px;
}

.solution-plan-content{
	margin-left: 20px;
}

.solution-plan-content .section-title h3{
	background: var(--white-color);
}

.solution-plan-body{
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--dark-divider-color);
}

.solution-plan-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.solution-plan-body ul li{
	position: relative;
    color: var(--primary-color);
    padding-left: 30px;
	margin-bottom: 10px;
}

.solution-plan-body ul li:before{
	content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 18px;
    color: var(--primary-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 4px;
    left: 0;
}

.solution-plan-body ul li:last-child{
	margin-bottom: 0;
}

.solution-counter-item{
	display: flex;
	align-items: center;
}

.solution-counter-item .icon-box{
	margin-right: 10px;
}

.solution-counter-item .icon-box img{
	max-width: 48px;
}

.solution-counter-item .solution-counter-content{
	width: calc(100% - 58px);
}

.solution-counter-item .solution-counter-content h3{
	font-size: 22px;
	margin-bottom: 5px;
}

.solution-counter-item .solution-counter-content p{
	color: var(--primary-color);
	text-transform: capitalize;
	margin: 0;
	white-space: nowrap;
}

/************************************/
/***    10. Why Choose Us css 	  ***/
/************************************/

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

.why-choose-us .section-title{
	text-align: center;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.why-choose-us .why-choose-us-box{
	position: relative;
	margin-top: 30px;
}

.why-choose-box-1{
	background-color: var(--secondary-color);
	border-radius: 30px 0 0 30px;
}

.why-choose-box-2{
	background-color: var(--primary-color);
	border-radius: 0 30px 30px 0;
}

.why-choose-image{
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.why-choose-item{
	border-bottom: 2px solid var(--dark-divider-color);
	display: flex;
	align-items: center;
	padding: 40px;
}

.why-choose-item:last-child{
	border-bottom: none;
}

.why-choose-item .icon-box{
	background-color: var(--white-color);
	height: 52px;
	width: 52px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

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

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

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

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

.why-choose-content{
	width: calc(100% - 72px);
	position: relative;
	z-index: 1;
	max-width: 300px;
}

.why-choose-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.why-choose-content p{
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.why-choose-box-2 .why-choose-item{
	border-color: var(--divider-color);
	flex-direction: row-reverse;
	text-align: right;
}

.why-choose-box-2 .why-choose-item .icon-box{
	margin-right: 0;
	margin-left: 20px;
}

.why-choose-box-2 .why-choose-item .icon-box::before{
	background-color: var(--secondary-color);
}

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

.why-choose-box-2 .why-choose-content h3{
	color: var(--white-color);
}

.why-choose-box-2 .why-choose-content p{
	color: var(--white-color);
	opacity: 70%;
}

/************************************/
/***   11. Need Attension css     ***/
/************************************/

.need-attention{
	padding: var(--section-space) 0;
	background: url('../images/slider/hero-bg2.jpg') no-repeat center center;
	background-size: cover;
	position: relative;
}

.need-attention:before{
	position: absolute;
	content: '';
	background: var(--primary-color);
	opacity: 90%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.need-attention .container{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
}

.need-attention .section-title{
	text-align: center;
}

.need-attention .section-title h2,
.need-attention .section-title p{
	color: var(--white-color);
}

.need-attention-list{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	padding: 0 10px 20px 10px;
	border-bottom: 1px solid var(--divider-color);
}

.need-attention .col-lg-4:nth-last-child(-n + 3) .need-attention-list{
	margin-bottom: 0px;
	padding: 0px 10px 0px 10px;
	border-bottom: none;
}

.need-attention-list .icon-box{
	margin-right: 20px;
}

.need-attention-list .icon-box img{
	max-width: 32px;
}

.need-attention-list .need-attention-content{
	width: calc(100% - 52px);
}

.need-attention-list .need-attention-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/***   	12. Our Theraphist css    ***/
/************************************/

.our-team{
	padding: var(--section-space) 0 70px;
}

.team-member-item{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

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

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

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

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

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

.team-social-icon ul{
	display: inline-block;
	list-style: none;
	line-height: normal;
	margin: 0;
	padding: 14px 28px;
	background: var(--white-color);
	border-radius: 20px;
}

.team-social-icon ul li{
	display: inline-block;
    text-align: center;
    margin-right: 20px;
}

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

.team-social-icon ul li a{
    display: block;
}

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

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

.team-content{
	text-align: center;
}

.team-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

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

/************************************/
/***  	13. Our Testimonial css   ***/
/************************************/

.our-testimonial{
	padding: var(--section-space) 0 50px;
	background: var(--secondary-color) url('../images/testimonial-bg.svg') no-repeat center center; 
	background-size: auto;
}

.our-testimonial .section-title{
	text-align: center;
}

.our-testimonial .section-title h3{
	background: var(--white-color);
}

.our-testimonial .swiper-wrapper{
	cursor: none;
}

.testimonial-item{
	background: var(--white-color);
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
}

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

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

.testimonial-header .testimonial-rating i{
	font-size: 16px;
	color: #F5A200;
	margin-right: 5px;
}

.testimonial-header .testimonial-content p{
	color: var(--primary-color);
	opacity: 70%;
	margin: 0;
}

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

.testimonial-body .author-image{
	width: 56px;
	height: 56px;
	margin-right: 10px;
}

.testimonial-body .author-image img{
	width: 56px;
	height: 56px;
	aspect-ratio: 1/1;
	object-fit: cover;
	border-radius: 50%;
}

.testimonial-body .author-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
}

.testimonial-body .author-content{
	width: calc(100% - 66px);
}

.testimonial-body .author-content p{
	color: var(--primary-color);
	opacity: 70%;
	text-transform: capitalize;
	margin: 0;
}

.testimonial-slider .swiper-pagination{
	position: relative;
	text-align: center;
	bottom: 0px;
	margin-top: 60px;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet{
	height: 12px;
	width: 12px;
	border-radius: 50%;
	background-color: var(--accent-color);
	opacity: 1;
	margin: 0px 6px;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--primary-color);
	opacity: 1;
}

/************************************/
/***   		14. Our Blog css      ***/
/************************************/

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

.blog-item{
	height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image{
	overflow: hidden;
	border-radius: 30px;
	margin-bottom: 30px;
}

.post-featured-image a{
	display: block;
	cursor: none;
}

.post-featured-image img{
	aspect-ratio: 1/0.65;
	object-fit: cover;
	border-radius: 30px;
	transition: all 0.5s ease-out;
}

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

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

.post-item-body h2{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
}

.post-item-body h2 a{
	color: inherit;
}

.post-item-footer .readmore-btn{
	position: relative;
	font-family: var(--accent-font);
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-right: 30px;
    transition: 0.3s ease-in-out;
}

.post-item-footer .readmore-btn::after{
    content: '';
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    background-image: url("../images/readmore-arrow.svg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    transition: 0.3s ease-in-out;
}

/************************************/
/***  15. Scrolling Ticker css    ***/
/************************************/

.our-scrolling-ticker{
	font-size: 16px;
    font-weight: 700;
	background: #403737eb;
	padding: 22px 0;
	border-top: 1px solid var(--primary-color);
	border-bottom: 1px solid var(--primary-color);
}

.scrolling-ticker-box{
	--gap: 40px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	align-items: center;
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
	/* Increased duration from 24s to 45s to make it scroll much slower */
	animation: scroll 45s linear infinite;
}

.scrolling-content span{
	display: inline-block;
	font-size: 20px;
	font-weight: 600;
	color: var(--gold-color);
	font-family: var(--accent-font);
	vertical-align: middle;
}

.scrolling-content span img{
	width: 100%;
	max-width: 30px;
	margin-right: 40px;
	/* Maroon (#7E1220 / #96312F range) – no more green */
	filter: brightness(0) saturate(100%) invert(11%) sepia(91%) saturate(4447%) hue-rotate(345deg) brightness(95%) contrast(93%);
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

@keyframes tickerFlash {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}


/************************************/
/***   		16. Footer css (FIXED SPACING)       ***/
/************************************/

/* ---------- Main Footer ---------- */
.main-footer {
    position: relative;
    background: #0f0708;
    padding: 0; /* Removed top padding */
    color: var(--white-color);
}

.footer-top {
    padding: 40px 0 30px; /* Reduced padding */
}

.footer-widget {
    margin-bottom: 0; /* Removed extra margin */
}

/* ---------- Footer Titles (Gold Headings) ---------- */
.footer-title {
    font-family: var(--accent-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--gold-color);
    text-transform: capitalize;
    margin-bottom: 20px; /* Reduced from 25px */
    position: relative;
    padding-bottom: 10px; /* Reduced from 12px */
}

.footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-color), transparent);
    transition: width 0.4s ease;
}

.footer-widget:hover .footer-title::after {
    width: 80px;
}

/* ---------- About Column ---------- */
.footer-about p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px; /* Reduced from 25px */
    text-align: justify;
}

/* ---------- Social Icons ---------- */
.footer-social-links {
    display: flex;
    gap: 12px;
}

.footer-social-links a {
    width: 42px;
    height: 42px;
    background: var(--orange-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-color);
    font-size: 18px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.footer-social-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.footer-social-links a:hover {
    background: var(--gold-color);
    color: var(--header-bg-color);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.4);
}

.footer-social-links a:hover::before {
    left: 100%;
}

/* ---------- Link Columns - TEXT ONLY UNDERLINE FIX ---------- */
.footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-col ul li {
    margin-bottom: 10px; /* Reduced from 12px */
    position: relative;
}

/* KEY FIX: display: inline ensures underline only spans text width */
.footer-links-col ul li a {
    display: inline;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
    transition: all 0.3s ease;
    line-height: 1.6;
}

/* The animated underline - only under text */
.footer-links-col ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold-color);
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.footer-links-col ul li a:hover {
    color: var(--gold-color);
    font-weight: 600;
}

.footer-links-col ul li a:hover::after {
    width: 100%;
}

.footer-links-col ul li a i {
    font-size: 11px;
    color: var(--gold-color);
    transition: transform 0.3s ease;
    margin-right: 4px;
}

.footer-links-col ul li a:hover i {
    transform: translateX(4px);
}

/* Active page link */
.footer-links-col ul li.active a {
    color: var(--gold-color);
    font-weight: 600;
}

.footer-links-col ul li.active a::after {
    width: 100%;
}

/* ---------- Contact Column ---------- */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Reduced from 18px */
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Reduced from 15px */
    transition: transform 0.3s ease;
}

.contact-item:hover {
    transform: translateX(5px);
}

.contact-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-color);
    font-size: 16px;
    transition: all 0.3s ease;
}

.contact-item:hover .contact-icon {
    background: var(--gold-color);
    color: var(--header-bg-color);
    transform: rotate(360deg);
}

.contact-info {
    flex: 1;
}

.contact-label {
    display: block;
    font-family: var(--accent-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gold-color);
    margin-bottom: 4px;
    text-transform: uppercase;
}

.contact-info p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Footer Bottom Bar ---------- */
.footer-bottom {
    background: var(--primary-color);
    padding: 15px 0; /* Reduced from 20px */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 0; /* Ensure no extra margin */
}

.footer-copyright-text p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    margin: 0;
    text-align: left;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-bottom-links a {
    display: inline;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
    transition: all 0.3s ease;
}

.footer-bottom-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold-color);
    transition: width 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--gold-color);
    font-weight: 600;
}

.footer-bottom-links a:hover::after {
    width: 100%;
}

.footer-bottom-links .separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

/* ---------- Scroll to Top Button ---------- */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(126, 18, 32, 0.5);
    transition: all 0.4s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--gold-color);
    color: var(--header-bg-color);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(201, 162, 39, 0.5);
}

.scroll-to-top i {
    transition: transform 0.3s ease;
}

.scroll-to-top:hover i {
    transform: translateY(-3px);
}

/* =========================================
   MOBILE FOOTER RESPONSIVE - FIXED
   ========================================= */
@media only screen and (max-width: 991px) {
    .main-footer {
        padding: 0; /* Removed padding */
    }
    .footer-top {
        padding: 30px 0 20px; /* Reduced significantly */
    }
    .footer-title {
        font-size: 20px;
        margin-bottom: 18px;
    }
    .footer-about p {
        font-size: 14px;
    }
    .footer-bottom-links {
        justify-content: flex-start;
        margin-top: 10px;
    }
    .footer-copyright-text p {
        text-align: center;
        margin-bottom: 10px;
    }
	
	.footer-widget {
		margin-bottom: 15px; /* Removed extra margin */
	}
}

@media only screen and (max-width: 767px) {
    .main-footer {
        padding: 0; /* Removed all padding */
    }
    .footer-top {
        padding: 5px 0 15px; /* Minimal padding */
    }
    .footer-title {
        font-size: 18px;
        margin-bottom: 15px;
    }
    .footer-about p {
        font-size: 14px;
        margin-bottom: 15px;
    }
    .footer-social-links {
        justify-content: flex-start;
    }
    .footer-links-col ul li {
        margin-bottom: 8px; /* Reduced */
    }
    .footer-links-col ul li a {
        font-size: 16px;
    }
    .footer-contact-list {
        gap: 12px;
    }
    .contact-item {
        gap: 10px;
    }
    .contact-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 14px;
    }
    .contact-label {
        font-size: 10px;
    }
    .contact-info p {
        font-size: 13px;
    }
    .footer-bottom {
        padding: 12px 0; /* Reduced */
    }
    .footer-copyright-text {
        text-align: center;
        margin-bottom: 8px;
    }
    .footer-copyright-text p {
        text-align: center;
        margin-bottom: 0;
    }
    .footer-bottom-links {
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    .footer-bottom-links a {
        font-size: 14px; /* Slightly smaller on mobile */
        font-weight: 500;
    }
    .footer-bottom-links .separator {
        font-size: 14px;
    }
    .scroll-to-top {
        width: 42px;
        height: 42px;
        bottom: 20px;
        right: 20px;
        font-size: 16px;
    }
    
    /* Force middle two columns side-by-side on mobile */
    .footer-mobile-half {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        padding-right: 10px;
        padding-left: 10px;
    }
}

/************************************/
/***   17. About us Page css      ***/
/************************************/

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

.page-header-box h1{
	color: var(--primary-color);
	font-size: 57px;
	line-height: 1.2em;
	text-align: center;
	margin-bottom: 20px;
}

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

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

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

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

.company-counter{
	padding: 40px 0;
	background: var(--primary-color);
}

.company-counter-item{
	display: flex;
	align-items: center;
}

.company-counter-item .icon-box{
	margin-right: 10px;
}

.company-counter-item .icon-box img{
	max-width: 64px;
}

.company-counter-item .company-counter-content{
	width: calc(100% - 74px);
}

.company-counter-item .company-counter-content h3{
	color: var(--white-color);
	font-size: 32px;
	margin-bottom: 5px;
}

.company-counter-item .company-counter-content p{
	color: var(--white-color);
	opacity: 70%;
	text-transform: capitalize;
	margin: 0;
}

.mission-vision{
	position: relative;
	padding: var(--section-space) 0;
}

.mission-vision::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var(--white-color);
	opacity: 85%;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.mission-vision .section-title{
	position: relative;
	z-index: 1;
	text-align: center;
}

.our-mva-item{
	position: relative;
	background: var(--white-color);
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	overflow: hidden;
	z-index: 1;
}

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

.our-mva-item:hover:before{
	top: 0;
}

.our-mva-item .icon-box{
	position: relative;
	background: var(--secondary-color);
	border-radius: 10px;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	overflow: hidden;
	z-index: 1;
}

.our-mva-item .icon-box:before{
	content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    border-radius: 0px;
    background-color: var(--white-color);
    transition: all 0.5s ease-in-out;
    height: 100%;
}

.our-mva-item:hover .icon-box:before{
	top: 0;
}

.our-mva-item .icon-box img{
	position: relative;
	z-index: 1;
	max-width: 30px;
}

.our-mva-item .mva-item-content{
	position: relative;
	z-index: 1;
}

.our-mva-item .mva-item-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
	transition: all 0.3s ease-in-out;
}

.our-mva-item:hover .mva-item-content h3{
	color: var(--white-color);
}

.our-mva-item .mva-item-content p{
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.our-mva-item:hover .mva-item-content p{
	color: var(--white-color);
}

.cta-infobar{
	position: relative;
	background: var(--white-color);
	padding: 40px;
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	z-index: 1;
}

.cta-info-content{
	display: flex;
}

.cta-info-content .icon-box{
	background: var(--secondary-color);
	border-radius: 10px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20px;
}

.cta-info-content .icon-box img{
	max-width: 30px;
}

.cta-info-content .cta-content{
	width: calc(100% - 68px);
}

.cta-info-content .cta-content h3{
	font-size: 20px;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.cta-info-content .cta-content p{
	color: var(--primary-color);
	opacity: 70%;
	margin: 0;
}

.cta-appointment-btn{
	text-align: right;
}

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

.quality-treatment-video{
    position: relative;
	z-index: 1;
    overflow: hidden;
	cursor: none;
	border-radius: 30px;
}

.quality-treatment-video .video-image img{
	width: 100%;
	aspect-ratio: 1/0.88;
	object-fit: cover;
	border-radius: 30px;
	transition: all 0.5s ease-in-out;
}

.quality-treatment-video:hover .video-image img{
    transform: scale(1.1);
}

.quality-treatment-video .video-image a{
	cursor: none;
	position: relative;
	z-index: 1;
}

.video-play-button{
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.video-play-button a{
	position: relative;
	background-color: var(--white-color);
	border-radius: 100%;
	width: 86px;
	height: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: none;
}

.video-play-button a:before{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.video-play-button a:after{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--white-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

@keyframes border-zooming{
	100%{
		transform: scale(1);
		opacity: 0;
	}
}

.video-play-button a i{
	font-size: 36px;
	color: var(--accent-color);
}

.quality-treatment-content .section-title h3{
	background: var(--white-color);
}

.quality-treatment-content{
	padding-left: 20px;
}

.quality-treatment-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.quality-treatment-body ul li{
	position: relative;
    color: var(--primary-color);
    text-transform: capitalize;
    padding-left: 30px;
	margin-bottom: 20px;
}

.quality-treatment-body ul li:before{
	content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 18px;
    color: var(--primary-color);
    display: inline-block;
    line-height: normal;
    position: absolute;
    top: 4px;
    left: 0;
}

.quality-treatment-body ul li:last-child{
	margin-bottom: 0;
}

.therapy-process{
	padding: var(--section-space) 0 70px;
}

.therapy-process .section-title{
	text-align: center;
}

.therapy-process-item{
	text-align: center;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.therapy-process-item .icon-box{
	position: relative;
	height: 100px;
	width: 100px;
	border-radius: 100%;
	margin: 0 auto;
	margin-bottom: 30px;
	background: var(--white-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 25px var(--dark-divider-color);
}

.therapy-process .col-lg-3:nth-child(even) .therapy-process-item .icon-box:before{
	position: absolute;
	display: block;
	content: '';
	background: url('../images/icon-right-down-arrow.svg') no-repeat right center;
    top: 50%;
    right: 0;
    width: 135px;
    height: 23px;
    background-size: 100% auto;
    transform: translate(175px, -50%);
	z-index: 2;
}

.therapy-process .col-lg-3:nth-child(odd) .therapy-process-item .icon-box::before{
	position: absolute;
	display: block;
	content: '';
	background: url('../images/icon-right-up-arrow.svg') no-repeat right center;
    top: 50%;
    right: 0;
    width: 135px;
    height: 23px;
    background-size: 100% auto;
    transform: translate(175px, -50%);
	z-index: 2;
}

.therapy-process .col-lg-3:nth-last-child(1) .therapy-process-item .icon-box:before{
	display: none;
}

.therapy-process-item .icon-box img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 100%;
}

.therapy-process-item .therapy-process-content h3{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	text-transform: capitalize;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 20px;
}

.therapy-process-item .therapy-process-content p{
	color: var(--primary-color);
	opacity: 70%;
	margin: 0;
}

/************************************/
/***	18. Service Page css      ***/
/************************************/

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

.page-services .cta-infobar{
	margin-top: 70px;
}

/************************************/
/***    19. Service Single css    ***/
/************************************/

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

.service-featured-img{
	margin-bottom: 30px;
}

.service-featured-img img{
	aspect-ratio: 1 / 0.57;
	object-fit: cover;
	border-radius: 30px;
}

.service-entry h2{
	font-size: 54px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.service-entry h3{
	font-size: 32px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

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

.service-entry ul li{
    position: relative;
    width: calc(50% - 10px);
    color: var(--primary-color);
    text-transform: capitalize;
    padding-left: 35px;
}

.service-entry ul li:before{
    content: '\f058';
    font-family: "Font Awesome 6 Free";
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
}

.service-entry-image figure{
	display: block;
}

.service-entry-image img{
	border-radius: 30px;
	aspect-ratio: 1/0.68;
	object-fit: cover;
}

.service-sidebar{
	position: sticky;
	top: 20px;
	margin-left: 10px;
}

.service-catagery-list,
.opening-hour-section{
	margin-bottom: 40px;
}

.service-catagery-list,
.opening-hour-section,
.sidebar-cta-box{
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 30px;
}

.service-catagery-list h3,
.opening-hour-section h3{
	font-size: 20px;
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 30px;
}

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

.service-catagery-list ul li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 35px;
}

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

.service-catagery-list ul li:before{
	position: absolute;
	content: '';
	background: url('../images/arrow-white.svg') no-repeat center center;
	background-color: var(--primary-color);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	background-size: 12px auto;
	transition: all 0.3s ease-in-out;
}

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

.service-catagery-list ul li a{
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

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

.opening-hour-section ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.opening-hour-section ul li{
	color: var(--primary-color);
	text-transform: capitalize;
	margin-bottom: 10px;
}

.opening-hour-section ul li:last-child{
	margin-bottom: 0;
}

.sidebar-cta-box{
	text-align: center;
}

.sidebar-cta-box .icon-box{
	background: var(--secondary-color);
	border-radius: 10px;
	height: 48px;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	margin-bottom: 30px;
}

.sidebar-cta-box .cta-content{
	margin-bottom: 40px;
	text-align: center;
}

.sidebar-cta-box .cta-content h3{
	font-size: 28px;
	margin-bottom: 20px;
}

.sidebar-cta-box .cta-content p{
	margin: 0;
}

.sidebar-cta-box .cta-appointment-btn{
	text-align: center;
}

/************************************/
/***	 20. Blog Archive css     ***/
/************************************/

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

.page-blog .blog-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

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

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

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

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

/************************************/
/***	 21. Blog Single css      ***/
/************************************/

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

.post-single-meta ol li.breadcrumb-item{
	font-size: 18px;
}

.post-single-meta ol li i{
    font-size: 18px;
    color: var(--accent-color);
    margin-right: 5px;
}

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

.post-image figure{
	display: block;
}

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

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

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

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

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

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	margin: 0 0 0.6em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.post-entry blockquote{
	background: var(--secondary-color) url('../images/icon-blockquote.svg') no-repeat 35px 40px;
	background-size: 45px;
	border-radius: 30px;
	padding: 30px 30px 30px 100px;
	margin-bottom: 30px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/************************************/
/***   22. Theraphist Page css    ***/
/************************************/

.page-team{
	padding: var(--section-space) 0 60px;
}

.page-team .team-member-item{
	height: calc(100% - 40px);
	margin-bottom: 40px;
}

/************************************/
/***   23. Theraphist Single css  ***/
/************************************/

.page-team-single{
	padding: var(--section-space) 0 25px;
}

.page-team-single .row{
	background-color: var(--primary-color);
	border-radius: 35px 30px 30px 35px;
}

.team-member-image{
	height: 100%;
}

.team-member-image figure{
	height: 100%;
}

.team-member-image img{
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 30px 0 0 30px;
}

.team-member-details{
	margin-left: 30px;
	height: 100%;
	padding: 50px 30px;
}

.member-detail-header{
	margin-bottom: 40px;
}

.member-detail-header h2{
	font-size: 32px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.member-detail-header p{
	font-size: 18px;
	text-transform: capitalize;
	color: var(--white-color);
	margin: 0;
}

.member-detail-content{
	margin-bottom: 40px;
}

.member-detail-content p{
	font-size: 18px;
	text-transform: capitalize;
	color: var(--white-color);
}

.member-detail-content p:last-child{
	margin-bottom: 0;
}

.member-detail-body{
	margin-bottom: 40px;
}

.member-detail-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.member-detail-body ul li{
	font-size: 18px;
	color: var(--white-color);
	display: flex;
	margin-bottom: 15px;
}

.member-detail-body ul li:last-child{
	margin-bottom: 0;
}

.member-detail-body ul li span{
	width: 30%;
	font-weight: 500;
}

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

.member-social-list ul li{
    display: inline-block;
    margin-right: 20px;
}

.member-social-list ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

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

.member-social-list ul li a i{
    font-size: 20px;
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.about-member-details{
	padding: 25px 0 100px;
}

.about-member-info{
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
}

.member-info-title{
	margin-bottom: 30px;
}

.member-info-title h2{
	font-size: 32px;
	text-transform: capitalize;
}

.member-info-content p:last-child{
	margin-bottom: 0;
}

.member-winning-awards{
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
}

.winning-awards-content{
	margin-bottom: 30px;
}

.winning-awards-content h2{
	font-size: 32px;
	text-transform: capitalize;
	margin-bottom: 30px;
}

.winning-awards-content p:last-child{
	margin-bottom: 0;
}

.winning-awards-box .row .col-6{
	padding: 0;
}

.winning-awards-box{
	text-align: center;
}

.winning-award-img img{
	max-height: 129px;
}

.winning-award-img.img-box-1{
	border-right: 2px solid var(--dark-divider-color);
	border-bottom: 2px solid var(--dark-divider-color);
	padding-bottom: 35px;
}

.winning-award-img.img-box-2{
	border-bottom: 2px solid var(--dark-divider-color);
	padding-bottom: 35px;
}

.winning-award-img.img-box-3{
	padding-top: 35px;
	border-right: 2px solid var(--dark-divider-color);
}

.winning-award-img.img-box-4{
	padding-top: 35px;
}

.team-member-skills{
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
}

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

.member-skills-title h2{
	font-size: 32px;
	text-transform: capitalize;
}

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

.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: 20px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
}

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

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

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

.cta-infobar.team-sidebar-cta .cta-info-content p{
	margin-bottom: 20px;
}

.cta-infobar.team-sidebar-cta .cta-appointment-btn{
	text-align: left;
}

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

.page-video-gallery{
	padding: var(--section-space) 0 70px;
}

.photo-gallery{
	margin-bottom: 30px;
}

.photo-gallery a{
	cursor: none;
}

.photo-gallery figure{
	position: relative;
}

.photo-gallery figure::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color);
  opacity: 50%;
  visibility: visible;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(1);
  border-radius: 30px;
  pointer-events: none;
  transition: all 0.4s ease-in-out;
}
.photo-gallery:hover figure::before {
  opacity: 55%;
}
.photo-gallery figure::after {
  position: absolute;
  content: "\f144";
  background: var(--white-color);
  border-radius: 50%;
  color: var(--accent-color);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 46px;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(-50%);
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: all 0.5s ease-in-out;
}

.photo-gallery:hover figure::after{
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) scale(1.1);
}

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

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

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

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

.faq-catagery-list{
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 30px;
}

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

.faq-catagery-list ul li{
	position: relative;
	margin-bottom: 20px;
	padding-left: 35px;
}

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

.faq-catagery-list ul li:before{
	position: absolute;
	content: '';
	background: url('../images/arrow-white.svg') no-repeat center center;
	background-color: var(--primary-color);
	top: 1px;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	background-size: 12px auto;
	transition: all 0.3s ease-in-out;
}

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

.faq-catagery-list ul li a{
	font-size: 18px;
	font-weight: 500;
	color: var(--primary-color);
	text-transform: capitalize;
	transition: all 0.3s ease-in-out;
}

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

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

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

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

.faqs-section-title h2{
	font-size: 32px;
}

.faq-accordion .accordion-item{
	border: 2px solid var(--dark-divider-color);
	border-radius: 20px;
	margin-bottom: 20px;
}

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

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after{
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	bottom: auto;
	transform: translate(0px, -50%) rotate(90deg);
	background-image: url("../images/arrow-white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px;
	border-radius: 50%;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-item .accordion-button.collapsed::after{
	transform: translate(0px, -50%) rotate(0deg);
}

.accordion-header .accordion-button{
	font-size: 18px;
	font-weight: 700;
	text-transform: capitalize;
	padding: 20px 45px 20px 20px;
}

.accordion-body{
	padding: 0 20px 20px 20px;
}

.accordion-body p{
	margin: 0;
}

/************************************/
/***	26. Contact Us Page css	  ***/
/************************************/

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

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 2px solid var(--dark-divider-color);
  border-radius: 20px;
  padding: 22px 18px;
  height: calc(100% - 20px);
  margin-bottom: 20px;
}


.contact-info-item .icon-box {
  background: var(--secondary-color);
  border-radius: 10px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  flex-shrink: 0;
}


.contact-info-item .icon-box img{
	max-width: 30px;
}

.contact-info-item .contact-info-content h3 {
  font-size: 20px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 8px;
}


.contact-info-item .contact-info-content p{
	margin: 0;
}

.contact-us-form{
	padding: 20px 0 60px;
}

.contact-us-img img{
	border-radius: 30px;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.contact-form{
	margin-left: 25px;
}

.contact-form .form-control{
    padding: 15px 20px;
    background-color: transparent;
	border: 2px solid var(--dark-divider-color);
    border-radius: 10px;
    color: var(--primary-color);
    box-shadow: none;
}

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

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

/***************************************/
/***  27. Make Appointment Page css  ***/
/***************************************/

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

.page-book-appointment .book-appointment-form{
	max-width: 1050px;
	margin: 0 auto;
	border: 2px solid var(--dark-divider-color);
	border-radius: 30px;
	padding: 40px;
}

.book-appointment-form .section-title{
	text-align: center;
}

.book-appointment-form .appointment-form{
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.appointment-form .form-control{
    padding: 15px 20px;
    background-color: transparent;
    border: 2px solid var(--dark-divider-color);
    border-radius: 10px;
    color: var(--primary-color);
    box-shadow: none;
}

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

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

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

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

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

.error-page-content-heading h2{
	font-size: 56px;
}

.error-page-content-heading h2 span{
	color: var(--accent-color);
}

.error-page-content-body p{
	font-size: 18px;
}

/************************************/
/***     28. responsive css       ***/
/************************************/

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

	.navbar{
        padding: 20px 0px;
    }
	
	.main-menu ul li{
		margin-left: 0;
	}
}

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

	#magic-cursor{
        display: none !important;
    }

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

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

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

	.section-title{
		margin-bottom: 20px;
	}

	.section-title h1,
	.section-title h2{
		font-size: 44px;
	}

	.section-title p{
		margin-top: 20px;
	}

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

	.section-title-content{
		text-align: left;
      	margin-top: 20px;
    }

	.topbar-contact-info ul{
		justify-content: center;
		gap: 20px;
	}

	.topbar-contact-info ul li a img{
		max-width: 18px;
		margin-right: 5px;
	}

	.topbar-social-links{
		display: none;
	}

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

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

	.hero-content-body .btn-default.btn-highlighted{
		margin-left: 30px;
	}

	.hero-counter-box h3{
		font-size: 28px;
	}

	.hero-img{
		text-align: center;
	}

	.hero-img img{
		max-width: 70%;
	}

	.export-doctor-box{
		padding: 15px;
	}

	.export-doctor-content h3{
		font-size: 18px;
	}

	.hero.bg-image{
		padding: 80px 0 100px;
	}

	.hero.bg-image .hero-content .section-title h1{
		font-size: 60px;
	}

	.hero.bg-image.hero-slider{
        padding: 0;
    }

	.hero-slider-layout .hero-slide{
		padding: 80px 0 100px;
	}

	.hero-slider-layout .swiper-pagination{
		bottom: 40px;
	}

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

	.hero-book-appointment .appointment-form{
		padding: 30px;
		margin-left: 0px;
	}

	.hero-appointment-form-title h2{
		font-size: 32px;
	}

	.home-contact-us{
		padding: 40px 0 10px;
	}

	.home-contact-us .home-contact-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.home-contact-us .col-lg-4:nth-child(even) .home-contact-item{
		border: none;
	}

    .about-us{
		padding: 50px 0 25px;
	}

	.about-img{
		text-align: center;
		margin-bottom: 30px;
	}

	.company-experience{
		right: 80px;
		padding: 10px 15px;
	}

	@keyframes expmoveobject{
		50%{
			right: 120px;
		}
	}

	.company-experience-content h3{
		font-size: 28px;
	}

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

	.gallery-carousel{
		padding: 25px 0;
	}

	.gallery-scrolling-content .gallery-image img{
		width: 100%;
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}

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

	.service-item{
		padding: 20px;
	}

	.solution-your-plan{
		padding: 50px 0;
	}
	
	.solution-plan-image{
		justify-content: center;
		margin-bottom: 30px;
	}

	.solution-plan-content{
		margin-left: 0;
	}

	.solution-plan-body{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.solution-counter-item .solution-counter-content h3{
		font-size: 20px;
	}

	.why-choose-us{
		padding: 50px 0;
	}

	.why-choose-box-1{
		border-radius: 30px 30px 0 0px;
	}

	.why-choose-box-2{
		border-radius: 0 0 30px 30px;
	}

	.why-choose-item{
		padding: 30px;
	}

	.why-choose-content{
		max-width: 100%;
	}

	.why-choose-box-2 .why-choose-item{
		flex-direction: row;
		text-align: left;
	}

	.why-choose-box-2 .why-choose-item .icon-box{
		margin-right: 20px;
		margin-left: 0px;
	}

	.why-choose-image{
		display: none;
	}

	.why-choose-image img{
		max-width: 70%;
	}

    .need-attention{
		padding: 50px 0;
	}

	.need-attention-list .need-attention-content p{
		font-size: 16px;
	}

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

	.team-social-icon ul li a i{
		font-size: 20px;
	}

	.our-testimonial{
		padding: 50px 0 25px;
	}

	.testimonial-item{
		padding: 30px;
	}

	.testimonial-item .testimonial-header{
		margin-bottom: 30px;
	}

	.testimonial-slider .swiper-pagination{
		margin-top: 40px;
	}

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

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

	.our-scrolling-ticker{
		padding: 20px 0;
	}
	
	.scrolling-content span{
		font-size: 20px;
	}

	.main-footer{
		padding: 40px 0 0;
	}

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

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

	.about-working-hour,
	.about-service-list{
		margin-left: 0;
	}

	.about-working-hour h3,
	.about-service-list h3,
	.footer-contact h3{
		font-size: 20px;
		margin-bottom: 20px;
	}

	.footer-contact-details .footer-info-box{
		margin-bottom: 20px;
	}

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

	.page-header{
		padding: 50px 0;
	}
	
	.page-header-box h1{
		font-size: 44px;
		margin-bottom: 15px;
	}

	.page-about-us{
		padding: 50px 0;
	}

	.company-counter{
		padding: 30px 0 0;
	}

    .company-counter-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.company-counter-item .company-counter-content h3{
		font-size: 28px;
	}

    .mission-vision{
		padding: 50px 0;
	}

	.our-mva-item{
		padding: 20px;
	}

	.cta-infobar{
		padding: 30px;
	}

	.cta-info-content{
		display: block;
		margin-bottom: 20px;
	}

	.cta-info-content .icon-box{
		margin-right: 0;
		margin-bottom: 20px;
	}

	.cta-info-content .cta-content{
		width: 100%;
	}

	.cta-appointment-btn{
		text-align: left;
	}

	.quality-treatment{
		padding: 50px 0;
	}

	.quality-treatment-video{
		margin-bottom: 20px;
	}

	.quality-treatment-content{
		padding-left: 0;
	}

	.video-play-button a i{
		font-size: 30px;
	}

	.quality-treatment-body ul li{
		margin-bottom: 15px;
	}

	.therapy-process{
		padding: 50px 0 20px;
	}

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

	.therapy-process .col-lg-3:nth-child(odd) .therapy-process-item .icon-box:before{
		transform: translate(210px, -50%);
	}

	.therapy-process .col-lg-3:nth-last-child(odd) .therapy-process-item .icon-box:before{
		display: none;
	}

    .page-services{
		padding: 50px 0;
	}

	.page-services .cta-infobar{
		margin-top: 20px;
	}

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

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

	.service-featured-img{
		margin-bottom: 20px;
	}

	.service-entry h3{
		font-size: 28px;
		margin-bottom: 20px;
	}

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

	.service-entry ul{
		margin-bottom: 20px;
		gap: 15px;
	}

	.service-entry ul li{
		width: calc(50% - 7.5px);
		padding-left: 30px;
	}

	.service-sidebar{
		margin-left: 0px;
	}

	.service-catagery-list,
	.opening-hour-section,
	.sidebar-cta-box{
		padding: 20px;
	}

	.service-catagery-list,
	.opening-hour-section{
		margin-bottom: 30px;
	}

	.service-catagery-list h3,
	.opening-hour-section h3{
		margin-bottom: 20px;
	}

	.service-catagery-list ul li{
		padding-left: 30px;
	}

	.service-catagery-list ul li:before{
		height: 20px;
		width: 20px;
		top: 4px;
	}

	.service-catagery-list ul li a{
		font-size: 16px;
	}

	.sidebar-cta-box .icon-box{
		margin-bottom: 20px;
	}

	.sidebar-cta-box .cta-content{
		margin-bottom: 20px;
	}

	.sidebar-cta-box .cta-content h3{
		font-size: 24px;
	}

    .page-blog{
		padding: 50px 0;
	}

	.page-blog .blog-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.post-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: 30px;
	}

	.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-team{
		padding: 50px 0 20px;
	}
	
	.page-team .team-member-item{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}

	.page-team-single{
		padding: 50px 0 25px;
	}

	.page-team-single .row{
		border-radius: 40px 40px 30px 30px;
	}

	.team-member-image img{
		aspect-ratio: 1 / 0.85;
		border-radius: 30px 30px 0 0px;
	}

	.team-member-details{
		margin-left: 0px;
		padding: 30px;
	}

	.member-detail-header{
		margin-bottom: 30px;
	}

	.member-detail-header h2{
		font-size: 28px;
	}

	.member-detail-content{
		margin-bottom: 30px;
	}

	.member-detail-body{
		margin-bottom: 30px;
	}

	.about-member-details{
		padding: 25px 0 50px;
	}

	.about-member-info{
		padding: 30px;
	}

	.member-info-title{
		margin-bottom: 20px;
	}

	.member-info-title h2{
		font-size: 28px;
	}

	.member-winning-awards{
		padding: 30px;
		margin-bottom: 30px;
	}

	.winning-awards-content h2{
		font-size: 28px;
		margin-bottom: 20px;
	}

	.team-member-skills{
		padding: 30px;
	}

	.member-skills-title{
		margin-bottom: 20px;
	}

	.member-skills-title h2{
		font-size: 28px;
	}

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

	.skillbar .skill-data .skill-title{
		font-size: 18px;
	}

	.skillbar .skill-data .skill-no{
		font-size: 20px;
	}

	.cta-infobar.team-sidebar-cta .cta-info-content{
		margin-bottom: 0;
	}

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

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

	.faq-sidebar{
		margin-right: 0;
		margin-bottom: 20px;
	}
	
	.faq-catagery-list{
		padding: 20px;
	}

	.faq-catagery-list ul li{
		padding-left: 30px;
	}

	.faq-catagery-list ul li:before{
		height: 20px;
		width: 20px;
		top: 4px;
	}

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

	.faqs-section-title{
		margin-bottom: 20px;
	}
	
	.faqs-section-title h2{
		font-size: 28px;
	}

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

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

	.accordion-body{
		padding: 0 15px 15px 15px;
	}

	.page-contact{
		padding: 50px 0 0;
	}

	.contact-info-item{
		padding: 20px;
	}

	.contact-us-form{
		padding: 25px 0 50px;
	}

	.contact-us-img{
		text-align: center;
		margin-bottom: 20px;
	}

	.contact-form{
		margin-left: 0;
	}

	.contact-form .form-control{
		padding: 12px 20px;
	}

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

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

	.page-book-appointment .book-appointment-form{
		padding: 30px;
	}

	.appointment-form .form-control{
		padding: 12px 20px;
	}

	.error-page{
		padding: 50px 0;
	}
	
	.error-page-image{
		margin-bottom: 20px;
	}

	.error-page-content-heading{
		margin-bottom: 20px;
	}
	
	.error-page-content-heading h2{
		font-size: 44px;
	}	
}

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

	.btn-default{
		padding: 15px 55px 15px 15px;
	}

	.btn-default::before{
		width: 32px;
		height: 32px;
	}

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

	.section-title{
		text-align: center;
		margin-bottom: 20px;
	}

	.section-title h1{
		font-size: 26px;
	}

	.section-title h2{
		font-size: 22px;
	}

	.section-title p{
		margin-top: 20px;
	}

	.section-btn{
		text-align: center;
        margin-top: 20px;
    }

	.section-title-content{
      	margin-top: 20px;
    }

	.topbar-contact-info ul li.hide-mobile{
		display: none;
    }

	.topbar-contact-info ul li a img{
        max-width: 16px;
    }

	.topbar-contact-info ul li:last-child{
		margin-bottom: 0;
	}

	.hero-content{
		margin-bottom: 0;
	}

	.hero-content .section-title{
		text-align: left;
	}

	.hero-content .section-title p{
		font-size: 16px;
	}

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

	.hero-content-body .btn-default.btn-highlighted{
		margin: 15px 0 0 0;
	}

	.export-doctor-box{
		transform: translateY(-60px);
		padding: 12px;
	}

	.hero-counter-box{
		height: calc(100% - 30px);
		margin-bottom: 30px;
	}
	
	.hero-counter-box h3{
		font-size: 24px;
	}

	.hero.bg-image{
		padding: 50px 0 80px;
	}

	.hero.bg-image .hero-content .section-title{
        text-align: left;
    }

	.hero.bg-image .hero-content .section-title h1{
        font-size: 40px;
    }

	.hero-slider-layout .hero-slide{
		padding: 50px 0 80px;
	}

	.hero-slider-layout .swiper-pagination{
		bottom: 20px;
	}

	.hero-book-appointment .appointment-form{
        padding: 30px 20px;
    }

	.hero-appointment-form-title h2{
        font-size: 28px;
    }
	
	.home-contact-us{
		padding: 30px 0 0px;
	}

	.home-contact-us .home-contact-item{
		padding-right: 0;
		border: none;
	}

	.home-contact-item .home-contact-content h3{
		font-size: 18px;
	}

	.company-experience .icon-box img{
		max-width: 42px;
	}

	.company-experience-content{
		width: calc(100% - 52px);
		text-align: left;
	}

	.company-experience-content h3{
        font-size: 24px;
    }

    .about-content .section-title{
		text-align: left;
	}

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

	.about-list-item{
		width: 100%;
	}

	.about-list-content h3{
		font-size: 16px;
	}

	.doctor-info,
	.appointment-btn{
		width: 100%;
	}

	.appointment-btn{
		margin-top: 20px;
		text-align: left;
	}

	.service-item .service-body h3{
		font-size: 18px;
	}

	.solution-plan-image{
		margin-bottom: 20px;
	}

	.solution-plan-content .section-title{
		text-align: left;
	}

	.solution-plan-body{
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.solution-counter-item{
		margin-bottom: 20px;
	}

	.solution-plan-counter .col-lg-4:last-child .solution-counter-item{
		margin-bottom: 0;
	}

	.solution-counter-item .solution-counter-content h3{
		font-size: 18px;
	}

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

	.why-choose-item .icon-box{
		background-color: var(--white-color);
		height: 52px;
		width: 52px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}

	.why-choose-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

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

	.need-attention{
        padding: 50px 0 30px;
    }

	.need-attention-list .icon-box{
		margin-right: 10px;
	}

	.need-attention-list .need-attention-content{
		width: calc(100% - 42px);
	}

	.need-attention .col-lg-4:nth-last-child(-n + 3) .need-attention-list,
	.need-attention .col-lg-4 .need-attention-list{
		margin-bottom: 20px;
		padding: 0px 0px 20px 0px;
		border-bottom: 1px solid var(--divider-color);
	}

	.team-social-icon ul{
		padding: 12px 24px;
	}
	
	.team-social-icon ul li a i{
		font-size: 20px;
	}

	.team-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.testimonial-item{
		padding: 20px;
	}

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

	.testimonial-body .author-content h3{
		font-size: 18px;
	}

	.testimonial-slider .swiper-pagination{
		margin-top: 20px;
	}

	.post-item-body h2{
		font-size: 18px;
	}
	
	.scrolling-content span{
		font-size: 18px;
	}

	.about-working-hour,
	.about-service-list{
		margin-bottom: 20px;
	}

	.about-working-hour ul li{
		margin-bottom: 10px;
	}

	.about-service-list ul li{
		margin-bottom: 10px;
	}

	.footer-contact-details .footer-info-box{
		margin-bottom: 10px;
	}

	.footer-copyright{
		text-align: center;
		padding: 15px 0;
		margin-top: 20px;
	}

	.footer-copyright-text{
		margin-bottom: 10px;
	}

	.footer-copyright-text p{
		font-size: 16px;
	}

	.footer-links ul{
		text-align: center;
	}
	
	.page-header-box h1{
		font-size: 30px;
	}

    .company-counter-item .icon-box img{
		max-width: 55px;
	}

	.company-counter-item .company-counter-content h3{
		font-size: 24px;
	}

	.our-mva-item .mva-item-content h3{
		font-size: 18px;
	}

	.cta-infobar{
        padding: 20px;
    }

	.cta-info-content .cta-content h3{
		font-size: 18px;
	}

	.therapy-process-item .icon-box{
		width: 80px;
		height: 80px;
	}
	
	.therapy-process .col-lg-3:nth-child(odd) .therapy-process-item .icon-box:before{
		display: none;
	}

	.therapy-process-item .therapy-process-content h3{
		font-size: 18px;
	}

	.page-services .cta-infobar{
		margin-top: 0px;
	}

	.service-entry h3{
		font-size: 24px;
	}

	.service-entry ul li{
		width: 100%;
	}

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

	.service-catagery-list, .opening-hour-section{
		margin-bottom: 20px;
	}

	.sidebar-cta-box .cta-content h3{
		font-size: 20px;
	}

	.post-single-meta ol li i{
        font-size: 18px;
    }

	.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: 24px;
	}

	.tag-links{
		font-size: 20px;
	}

	.team-member-details{
        padding: 20px;
    }

	.member-detail-header{
        margin-bottom: 20px;
    }

	.member-detail-header h2{
        font-size: 24px;
    }

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

	.member-detail-body{
        margin-bottom: 20px;
    }

	.member-detail-body ul li{
		font-size: 16px;
        margin-bottom: 10px;
    }

	.member-detail-body ul li span{
		width: 45%;
		font-weight: 500;
	}

	.about-member-info{
        padding: 20px;
    }

	.member-info-title h2{
		font-size: 24px;
	}

	.member-winning-awards{
		padding: 20px;
	}

	.winning-awards-content h2{
		font-size: 24px;
	}

	.winning-award-img.img-box-2,
	.winning-award-img.img-box-1{
		padding-bottom: 20px;
	}

	.winning-award-img.img-box-4,
	.winning-award-img.img-box-3{
		padding-top: 20px;
	}

	.team-member-skills{
        padding: 20px;
    }

	.member-skills-title h2{
        font-size: 24px;
    }

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

	.skillbar .skill-data .skill-title{
        font-size: 16px;
    }

	.skillbar .skill-data .skill-no{
        font-size: 18px;
    }

	.page-faqs .faqs-section{
		margin-bottom: 20px;
	}
	
	.faqs-section-title h2{
		font-size: 24px;
	}

	.contact-info-item .contact-info-content h3{
		font-size: 18px;
	}

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

	.page-book-appointment .book-appointment-form{
		padding: 20px;
	}

	.error-page-content-heading h2{
		font-size: 26px;
	}
}

/************************************/
/***  Global FA Icon Default Size  ***/
/************************************/
.icon-box i{
	font-size: 26px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

/************************************/
/*** Restaurant FA Icon Size & Hover Fix ***/
/************************************/

/* Button inner icons */
.btn-default i{
	margin-right: 10px;
}

/* Home Contact Us icons */
.home-contact-item .icon-box i{
	position: relative;
	z-index: 1;
	font-size: 32px;
}
.home-contact-item:hover .icon-box i{
	color: var(--primary-color);
}

/* About Us icons */
.company-experience .icon-box i{
	font-size: 44px;
}
.about-list-item .icon-box i{
	font-size: 28px;
}

/* Our Service icons */
.service-item .icon-box i{
	position: relative;
	z-index: 1;
	font-size: 28px;
	transition: all 0.5s ease-in-out;
}
.service-item:hover .icon-box i{
	color: var(--primary-color);
}

/* Solution Counter icons */
.solution-counter-item .icon-box i{
	font-size: 42px;
}

/* Why Choose Us icons */
.why-choose-item .icon-box i{
	position: relative;
	z-index: 1;
	font-size: 28px;
}
.why-choose-item:hover .icon-box i{
	color: var(--white-color);
}
.why-choose-box-2 .why-choose-item:hover .icon-box i{
	color: var(--primary-color);
}

/* Need Attention icons */
.need-attention-list .icon-box i{
	font-size: 30px;
}

/* Readmore button – hide old svg arrow because we now use FA icon (prevents double arrow) */
.post-item-footer .readmore-btn::after{
	display: none;
}
.post-item-footer .readmore-btn i{
	margin-right: 8px;
}

/************************************/
/***  Inner Pages Icon Sizes       ***/
/************************************/

/* About Page - counter icons (bigger) */
.company-counter-item .icon-box i{
	font-size: 48px;
}

/* Mission / Vision cards (z-index so hover bg doesn't hide icon) */
.our-mva-item .icon-box i{
	position: relative;
	z-index: 1;
}

/* CTA info bar */
.cta-info-content .icon-box i{
	font-size: 24px;
}

/* Process circles */
.therapy-process-item .icon-box i{
	font-size: 40px;
}

/* Sidebar CTA box */
.sidebar-cta-box .icon-box i{
	font-size: 24px;
}

/* Footer info icons (dark background) */
.footer-info-box .icon-box i{
	font-size: 18px;
	color: var(--white-color);
}

/*********************************************************************************************************/

/************************************/
/***    Active Menu Link css      ***/
/***********************************/
.main-menu .nav-menu-wrapper > ul > li > a {
  position: relative;
}
/* ACTIVE + HOVER = same design: maroon block + gold bottom bar */
.main-menu .nav-menu-wrapper > ul > li > a:hover,
.main-menu .nav-menu-wrapper > ul > li > a.active {
  background: var(--gold-color);
  color: var(--white-color);
}
.main-menu .nav-menu-wrapper > ul > li > a:hover::before,
.main-menu .nav-menu-wrapper > ul > li > a.active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: var(--primary-color); /* gold bar under block, like screenshot */
}
/* dropdown submenu – maroon panel, white links, gold hover */
.main-menu ul ul {
  background-color: var(--primary-color);
}
.main-menu ul ul li a {
  color: var(--white-color);
  padding: 10px 20px !important;
}
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
  color: var(--gold-color);
  background-color: transparent;
  padding: 10px 20px 10px 23px !important;
}
/* mobile menu active link */
.slicknav_nav li a.active {
  color: var(--accent-color);
}

.main-menu .nav-menu-wrapper > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/* Reservation Button */
.main-menu ul li a.reservation-blink {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(
        120deg,
        var(--gold-color),
        var(--orange-color),
        var(--maroon-color),
        var(--gold-color)
    );
    background-size: 300% 100%;
    color: var(--white-color) !important;
    border-radius: 99px;
    padding: 12px 22px !important;
    margin-left: 10px;
    position: relative;
    overflow: hidden;
    animation:
        reservationGradient 3s linear infinite,
        reservationGlow 2s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.main-menu ul li a.reservation-blink:hover {
    transform: scale(1.06);
}

/* Blinking Dot */
.reservation-blink .blink-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--white-color);
    flex-shrink: 0;
    animation: blinkDot 1s ease-in-out infinite;
}

/* Shine Sweep */
.main-menu ul li a.reservation-blink::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--white-color),
        transparent
    );
    opacity: 0.35;
    transform: skewX(-20deg);
    animation: reservationShine 2.5s ease infinite;
}

/* Gradient Animation */
@keyframes reservationGradient {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* Glow Animation */
@keyframes reservationGlow {
    0%,
    100% {
        box-shadow: 0 0 0 0 var(--gold-color);
    }

    50% {
        box-shadow: 0 0 16px 2px var(--orange-color);
    }
}

/* Blinking Dot Animation */
@keyframes blinkDot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.25;
        transform: scale(0.7);
    }
}

/* Shine Animation */
@keyframes reservationShine {
    0% {
        left: -60%;
    }

    60% {
        left: 120%;
    }

    100% {
        left: 120%;
    }
}

/************************************/
/***  Hero Slider – Full Image    ***/
/************************************/
/* Slide height follows the photo ratio → FULL photo visible, no crop */



.hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
    text-align: left;
    margin: 0;
    margin-right: auto;
    padding-left: 50px; /* Adjust this value (e.g., 30px to 80px) to get the exact spacing you want */
}

/************************************/
/***  Mobile Toggle + Dropdown    ***/
/************************************/
@media only screen and (max-width: 991px){
	.navbar-toggle{
		display: block;
		margin-left: auto;
	}
	.responsive-menu{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--primary-color);
		z-index: 999;
		box-shadow: 0 15px 30px rgba(0,0,0,.25);
	}
	.responsive-menu.menu-open{
		display: block;
	}
	.responsive-menu ul{
		list-style: none;
		margin: 0;
		padding: 10px 0;
	}
	.responsive-menu ul li a{
		display: block;
		padding: 12px 20px;
		color: var(--white-color);
		font-family: var(--accent-font);
		font-weight: 500;
		text-transform: capitalize;
		border-bottom: 1px solid var(--divider-color);
	}
	.responsive-menu ul li a.active,
	.responsive-menu ul li a:hover{
		color: var(--accent-color);
	}
	.responsive-menu ul ul{
		display: none;
	}
}

@media only screen and (max-width: 767px) {
    .section-title p {
        text-align: justify;
    }
	
	.home-contact-item .home-contact-content p {
		text-align: justify;
	}
}

@media only screen and (max-width: 767px){
	.topbar-contact-info ul{
		flex-wrap: nowrap;
		justify-content: center;
		gap: 10px;
	}

	.topbar-contact-info ul li{
		min-width: 0;
	}

	.topbar-contact-info ul li a{
		font-size: 14px;
		white-space: nowrap;
	}

	.topbar-contact-info ul li a img{
		max-width: 14px;
		margin-right: 4px;
		flex-shrink: 0;
	}
}

/************************************/
/***  Header Wide Container Fix   ***/
/************************************/
/* Header + topbar stretch edge-to-edge on large screens,
   while page content keeps --container-width */
@media only screen and (min-width: 1400px){
	.topbar .container,
	header.main-header .container{
		max-width: 100%;
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media only screen and (min-width: 2560px){
	.topbar .container,
	header.main-header .container{
		padding-left: 60px;
		padding-right: 60px;
	}
}

/************************************/
/***  Restaurant Video Wall css   ***/
/************************************/
.restaurant-video-wall {
  padding: var(--section-space) 0;
  background: var(--secondary-color);
}
/* 4 vertical videos in one row */
.video-wall-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.video-wall-item {
  border: 2px solid var(--primary-color);
  overflow: hidden;
  background: var(--primary-color);
  box-shadow: 0 15px 35px var(--dark-divider-color);
}
.video-wall-item video {
  display: block;
  width: 100%;
  height: 620px;
  object-fit: cover;
  cursor: pointer;
}
.video-wall-item video::-webkit-media-controls-panel {
  display: flex !important;
  opacity: 1 !important;
}

/* ---------- Entrance: Extra slow and smooth rise from bottom, one by one ---------- */
.video-wall-item.video-reveal {
  opacity: 0;
  transform: translateY(120px) scale(0.92); /* Starts lower and slightly more scaled down */
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), transform 1.8s cubic-bezier(0.16, 1, 0.3, 1); /* Increased duration to 1.8s for slow motion */
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

.video-wall-item.video-reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}


  
  /************************************/
/***  Inner Pages Banner Image    ***/
/************************************/
.page-header {
  position: relative;
  padding: 70px 0;
  background-color: var(--primary-color);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* dark overlay so title stays readable on the banner image */
/* .page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-color);
  opacity: 30%;
  pointer-events: none;
} */
.page-header .container {
  position: relative;
  z-index: 1;
}
.page-header-box h1 {
  color: var(--white-color);
}
.page-header-box ol li.breadcrumb-item {
  color: var(--white-color);
}
.page-header-box ol li.breadcrumb-item a {
  color: var(--white-color);
  opacity: 0.8;
}
.page-header-box ol li.breadcrumb-item + .breadcrumb-item::before {
  color: var(--white-color);
  opacity: 0.6;
}

/************************************/
/***  Mobile – FULL Banner + Slider Image  ***/
/************************************/
@media only screen and (max-width: 991px){

  /* ---- Inner page banner – increase height & ensure full coverage ---- */
  .page-header {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    padding: 50px 0 !important; /* Increases mobile height so the banner is clearly visible */
  }

  /* ---- Home slider – show FULL image, no crop ---- */
  .hero.hero-slider .hero-slider-layout .hero-slide{
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    height: auto !important;
  }
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img{
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: initial !important;   
    display: block !important;
  }
  /* keep swipe dots on the image */
  .hero-slider-layout .swiper-pagination{
    bottom: 15px !important;
  }
}
}
@media only screen and (max-width: 991px) {
  .video-wall-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .video-wall-item video {
    height: 600px;
  }
  .video-wall-title h2 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 575px) {
  .video-wall-grid {
    grid-template-columns: 1fr;
  }
  .video-wall-item video {
    height: 660px;
  }
  .video-wall-title h2 {
    font-size: 26px;
  }
}

/************************************/
/***  Inner Pages Banner Image    ***/
/************************************/
.page-header {
  position: relative;
  padding: 70px 0;
  background-color: var(--primary-color);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* dark overlay so title stays readable on the banner image */
/* .page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--primary-color);
  opacity: 30%;
  pointer-events: none;
} */
.page-header .container {
  position: relative;
  z-index: 1;
}
.page-header-box h1 {
  color: var(--white-color);
}
.page-header-box ol li.breadcrumb-item {
  color: var(--white-color);
}
.page-header-box ol li.breadcrumb-item a {
  color: var(--white-color);
  opacity: 0.8;
}
.page-header-box ol li.breadcrumb-item + .breadcrumb-item::before {
  color: var(--white-color);
  opacity: 0.6;
}

/************************************/
/***  Mobile Scroller – Always Visible Bar  ***/
/************************************/
@media only screen and (max-width: 991px) {
  /* hide native scrollbar (it auto-hides on touch devices) */
  .menu-category-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .menu-category-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }
  /* custom track + thumb – ALWAYS visible, never hides */
  .menu-scroll-track {
    position: relative;
    height: 10px; /* thicker bar */
    border-radius: 99px;
    background: var(--secondary-color);
    margin: 14px 0 0; /* full width – no side gaps */
    overflow: hidden;
  }
  .menu-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 70px; /* wider thumb */
    border-radius: 99px;
    background: linear-gradient(
      90deg,
      var(--accent-color),
      var(--primary-color)
    );
  }
}

/************************************/
/***  Mobile Header – Compact     ***/
/************************************/
@media only screen and (max-width: 991px) {
  .topbar {
    padding: 10px 0;
  }
  .navbar {
    padding: 10px 0;
  }
  .navbar-brand img {
    max-width: 170px;
  }
}
@media only screen and (max-width: 575px) {
  .topbar {
    padding: 6px 0;
  }
  .navbar {
    padding: 6px 0;
  }
  .navbar-brand img {
    max-width: 140px;
  }
  .slicknav_btn {
    width: 15px;
    height: 15px;
  }
}
/************************************/
/***  Google Review Badge         ***/
/************************************/
.testimonial-item {
  position: relative;
}
.testimonial-google-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  background: var(--white-color);
  border: 1px solid var(--dark-divider-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}
.testimonial-item:hover .testimonial-google-badge {
  transform: scale(1.1);
}
.testimonial-google-badge svg {
  width: 20px;
  height: 20px;
  display: block;
}
/************************************/
/***  Google Badge – Animations   ***/
/************************************/
/* 1) Entrance pop when the card appears */
.testimonial-google-badge {
  animation: googlePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* 2) Soft floating loop (idle) */
.testimonial-google-badge svg {
  animation: googleFloat 3s ease-in-out infinite;
}
/* 3) Hover: badge lifts + Google "G" spins */
.testimonial-item:hover .testimonial-google-badge {
  transform: scale(1.12);
  box-shadow: 0 10px 25px var(--dark-divider-color);
}
.testimonial-item:hover .testimonial-google-badge svg {
  animation: googleSpin 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes googlePop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-90deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}
@keyframes googleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@keyframes googleSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.15);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/************************************/
/***  Slider Content – Royal Typography ***/
/************************************/
/* ============================================
   Right-to-Left Display Animation Keyframes
   ============================================ */
@keyframes slideInRTL {
  0% {
    opacity: 0;
    transform: translateX(80px); /* Starts from the right */
    filter: blur(6px);           /* Slight blur for premium feel */
  }
  100% {
    opacity: 1;
    transform: translateX(0);    /* Ends at normal position */
    filter: blur(0);
  }
}

/* ============================================
   Badge – Maroon pill with gold text (span)
   ============================================ */
.hero.hero-slider .hero-slide .hero-content .section-title span {
  font-family: var(--default-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4a843;
  background: #6b1a1a;
  border: 1px solid #8b2a2a;
  border-radius: 99px;
  padding: 8px 22px;
  display: inline-block;
  margin-bottom: 18px;
  box-shadow: 0 2px 12px rgba(107, 26, 26, 0.4);
  
  /* Animation Properties */
  opacity: 0;
  animation: slideInRTL 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.2s; /* Animates first */
}



/* ============================================
   Title – Playfair Display serif (div)
   ============================================ */
.hero.hero-slider .hero-slide .hero-content .section-title div {
  font-family: "Playfair Display", serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.15em;
  letter-spacing: 1px;
  color: #ffffff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45);
  margin-bottom: 28px;

  /* Animation Properties */
  opacity: 0;
  animation: slideInRTL 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.4s; /* Animates second (staggered) */
}

/* Span inside Title div – italic accent */
.hero.hero-slider .hero-slide .hero-content .section-title div span {
  font-style: italic;
  font-weight: 600;
  color: #ffffff;
}

/* ============================================
   Buttons – Matching Right-to-Left Animation
   ============================================ */
.hero.hero-slider .hero-slide .hero-content .hero-content-body {
  opacity: 0;
  animation: slideInRTL 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: 0.6s; /* Animates last */
}

/* ============================================
   Responsive Sizes
   ============================================ */
@media only screen and (max-width: 1199px) {
  .hero.hero-slider .hero-slide .hero-content .section-title div {
    font-size: 62px;
  }
}

@media only screen and (max-width: 991px) {
  .hero.hero-slider .hero-slide .hero-content .section-title div {
    font-size: 50px;
  }
  .hero.hero-slider .hero-slide .hero-content .section-title span {
    font-size: 10px;
    letter-spacing: 2.5px;
    padding: 7px 18px;
  }
}

@media only screen and (max-width: 767px) {
  .hero.hero-slider .hero-slide .hero-content .section-title div {
    font-size: 36px;
    line-height: 1.25em;
  }
  .hero.hero-slider .hero-slide .hero-content .section-title span {
    font-size: 9px;
    letter-spacing: 2px;
    padding: 6px 16px;
    margin-bottom: 14px;
  }
}

@media only screen and (max-width: 480px) {
  .hero.hero-slider .hero-slide .hero-content .section-title div {
    font-size: 28px;
  }
}
/************************************/
/***  Header Right Actions Wrapper ***/
/************************************/
.header-actions{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/************************************/
/***  Mobile Animated Reservation   ***/
/************************************/
/* Hidden on desktop – desktop keeps the menu version */
.mobile-reservation-btn{
    display: none;
}

@media only screen and (max-width: 991px){
    /* Same animated gradient (gold → orange → maroon) as desktop */
    .mobile-reservation-btn{
        display: inline-flex;
        align-items: center;
        gap: 8px;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        font-family: var(--accent-font);
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: capitalize;
        color: var(--white-color) !important;
        background: linear-gradient(
            120deg,
            var(--gold-color),
            var(--orange-color),
            var(--maroon-color),
            var(--gold-color)
        );
        background-size: 300% 100%;
        border-radius: 99px;
        padding: 10px 20px;
        animation:
            reservationGradient 3s linear infinite,
            reservationGlow 2s ease-in-out infinite;
        transition: transform 0.3s ease;
        z-index: 1;
    }

    .mobile-reservation-btn:active{
        transform: scale(0.95);
    }

    /* Blinking dot */
    .mobile-reservation-btn .blink-dot{
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--white-color);
        flex-shrink: 0;
        animation: blinkDot 1s ease-in-out infinite;
    }

    /* Shine sweep */
    .mobile-reservation-btn::after{
        content: '';
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            var(--white-color),
            transparent
        );
        opacity: 0.35;
        transform: skewX(-20deg);
        animation: reservationShine 2.5s ease infinite;
    }

    /* Remove duplicate button from the opened mobile dropdown */
    .responsive-menu li a.reservation-blink,
    .slicknav_nav li a.reservation-blink{
        display: none;
    }
}

/* Small phones – slightly compact */
@media only screen and (max-width: 575px){
    .mobile-reservation-btn{
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
    }

    .mobile-reservation-btn .blink-dot{
        width: 6px;
        height: 6px;
    }
}

/************************************/
/***  Header Buttons – Gap + Icon ***/
/************************************/
/* Proper space between phone & reservation buttons */
.header-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.header-btn .btn-default {
  margin: 0;
}

/* Reservation button – meaningful calendar-check icon (instead of phone) */
.header-btn .btn-reservation::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 18px;
}

/* keep phone icon size consistent on phone button */
.header-btn .btn-phone::before {
  background-size: 18px;
}

/* Small screens – keep buttons neat */
@media only screen and (max-width: 575px) {
  .header-btn {
    gap: 8px;
  }
}

/************************************/
/***  Hero Slider – First-View Fit ***/
/************************************/
.hero.hero-slider {
  padding: 0;
}
/* Desktop: slider + marquee both visible in first screen */
.hero-slider-layout .hero-slide {
  padding: 0;
  height: calc(100vh - 200px);
  min-height: 420px;
  position: relative;
  overflow: hidden;
  background-color: var(--primary-color);
}
.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
  display: block;
}
/* Desktop: content LEFT aligned with header container */
.hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: var(--container-width);
  margin: 0;
  padding: 0 15px;
  text-align: left;
}
/* align slider text with header logo/menu on large screens (moves left) */
@media only screen and (min-width: 1400px) {
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
    max-width: 100%;
    padding: 0 40px;
  }
}
@media only screen and (min-width: 2560px) {
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
    padding: 0 60px;
  }
}
.hero-slider-layout .swiper-pagination {
  bottom: 15px;
}

/* ---------- 1. Force all hero elements to start off-screen on the right ---------- */
.hero-slider-layout .swiper-slide .hero-content .section-title span,
.hero-slider-layout .swiper-slide .hero-content .section-title div,
.hero-slider-layout .swiper-slide .hero-content .section-title p,
.hero-slider-layout .swiper-slide .hero-content .hero-content-body {
  opacity: 0;
  transform: translateX(100vw);
  visibility: hidden;
}

/* ---------- 2. Active slide: Animate elements one by one slowly from the right ---------- */
.hero-slider-layout .swiper-slide-active .hero-content .section-title span {
  animation: heroItemSlowIn 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards !important;
  visibility: visible !important;
}

.hero-slider-layout .swiper-slide-active .hero-content .section-title div,
.hero-slider-layout .swiper-slide-active .hero-content .section-title div {
  animation: heroItemSlowIn 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards !important;
  visibility: visible !important;
}

.hero-slider-layout .swiper-slide-active .hero-content .section-title p {
  animation: heroItemSlowIn 2.5s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards !important;
  visibility: visible !important;
}

.hero-slider-layout .swiper-slide-active .hero-content .hero-content-body {
  animation: heroItemSlowIn 2.5s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards !important;
  visibility: visible !important;
}

/* ---------- 3. Smooth slow keyframes from right corner ---------- */
@keyframes heroItemSlowIn {
  0% {
    opacity: 0;
    transform: translateX(100vw);
    visibility: hidden;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
  }
}

/* ---------- 4. Kill conflicting template plugin behaviors (WOW.js / Up animations) ---------- */
.hero-slider-layout .hero-content .wow,
.hero-slider-layout .hero-content [data-wow-delay] {
  animation-name: none !important;
  visibility: visible !important;
}

/* ---------- Mobile: FULL image, NO empty bg, NO content ---------- */
@media only screen and (max-width: 991px) {
  .hero-slider-layout .hero-slide {
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
  }
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    height: auto !important;
  }
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: initial !important;
    display: block !important;
  }
  /* hide text/buttons on mobile – image only */
  .hero.hero-slider .hero-slider-layout .hero-slide .hero-content {
    display: none !important;
  }
  /* dots sit on the image, no gap below */
  .hero-slider-layout .swiper-pagination {
    bottom: 12px !important;
  }
}

/* =========================================
   FOOD MARQUEE - SCROLLS LEFT → RIGHT (PURE CSS, NO JS)
   No top/bottom gap — sits flush between sections
========================================= */
.food-marquee-section {
	background: var(--header-bg-color);          /* #0F2A22 */
	overflow: hidden;
	padding: 40px 0;                             /* inner breathing space only */
	/* no margin, no border — flush top & bottom */
}

/* Track = 2 identical groups, animated rightwards */
.food-marquee-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: anjFoodMarquee 35s linear infinite;   /* lower = faster */
}

.food-marquee-group {
	display: flex;
	align-items: center;
	gap: 70px;
	padding-right: 70px;
}

.mq-item {
	display: flex;
	align-items: center;
	gap: 70px;
}

/* LEFT → RIGHT scroll */
@keyframes anjFoodMarquee {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Hollow outline text — YOUR gold */
.food-marquee-section .pbmit-element-title {
	margin: 0;
	font-size: clamp(48px, 7vw, 100px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 1px;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px var(--gold-color);  /* #D9A62E */
	position: relative;
}

/* Fallback if browser doesn't support text-stroke */
@supports not (-webkit-text-stroke: 1px black) {
	.food-marquee-section .pbmit-element-title { color: var(--gold-color); }
}

/* Hover fill — YOUR orange (replaces red) */
.food-marquee-section .pbmit-element-title::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: var(--orange-color);                  /* #E8871E */
	-webkit-text-stroke: 0 transparent;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .6s ease;
	overflow: hidden;
}
.mq-item:hover .pbmit-element-title::before { clip-path: inset(0 0 0 0); }

/* Utensil icon (replaces +) — big, near text size — YOUR orange */
.food-marquee-section .mq-icon {
	font-size: clamp(40px, 6vw, 88px);
	color: var(--orange-color);                  /* #E8871E */
	line-height: 1;
}

/* Mobile */
@media (max-width: 768px) {
	.food-marquee-section { padding: 25px 0; }
	.food-marquee-group, .mq-item { gap: 35px; }
	.food-marquee-group { padding-right: 35px; }
}



/* =========================================
WHY CHOOSE SECTION - PARALLAX & ANIMATIONS
(Colors updated from :root variables)
========================================= */
.anj-why-section {
	position: relative;
	padding: 100px 0;
	overflow: hidden;
	background-color: var(--header-bg-color); /* #0F2A22 */
}

/* Parallax Background Container (Hides image when it's translated above) */
.anj-why-parallax-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden; /* CRITICAL: This hides the image when it's above the section */
	z-index: 1;
	pointer-events: none;
}

/* The actual background image layer */
.anj-why-parallax-img {
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: url('../images/parallax/why-choose-us.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* opacity: 0.3; */
}

/* Ensure container sits on top of the background */
.anj-why-section .container {
	position: relative;
	z-index: 2;
}

/* =========================================
ENTRANCE ANIMATIONS - VERY SLOW & DRAMATIC
========================================= */
/* Initial Hidden States - Starting completely off-screen */
.anj-why-left {
	padding-right: 40px;
	opacity: 0.3 !important;
	visibility: hidden !important;
	transform: translateX(-100vw) !important;
	transition: opacity 2s ease-out 0.5s, transform 5s cubic-bezier(0.19, 1, 0.22, 1), visibility 5s !important;
}

.anj-why-right {
	display: flex;
	flex-direction: column;
	gap: 35px;
	opacity: 0.3 !important;
	visibility: hidden !important;
	transform: translateX(100vw) !important;
	transition: opacity 2s ease-out 1s, transform 5s cubic-bezier(0.19, 1, 0.22, 1) 0.8s, visibility 5s 0.8s !important;
}

/* Triggered when section enters viewport */
.anj-why-section.is-visible .anj-why-left,
.anj-why-section.is-visible .anj-why-right {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(0) !important;
}

/* =========================================
SECTION TITLE STYLES (h3 badge + h2 + span)
========================================= */
.anj-why-section .section-title.light-title {
	text-align: left;
	margin-bottom: 25px;
}

.anj-why-section .section-title.light-title h3 {
	background: var(--primary-color);            /* --header-bg-color @ 60% */
	border: 1px solid var(--gold-color);
	color: var(--gold-color);
}

.anj-why-section .section-title.light-title h2 {
	font-family: var(--accent-font);
	color: var(--white-color);
	text-shadow: 0 2px 15px rgba(0, 0, 0, 0.8);
}

.anj-why-section .section-title.light-title h2 span {
	color: var(--gold-color);
	font-style: italic;
	font-family: "Playfair Display", serif;       /* Royal accent word */
}

/* Left Side Text Styles */
.anj-why-description {
	font-family: var(--default-font);
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.95);             /* --white-color @ 95% */
	margin-top: 15px;
	text-align: justify;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* Right Side - Numbered Items */
.anj-why-item {
	display: flex;
	align-items: center;
	gap: 30px;
	transition: transform 0.4s ease;
	cursor: pointer;
}

.anj-why-item:hover {
	transform: translateX(15px);
}

.anj-why-number {
	flex-shrink: 0;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--orange-color) 0%, var(--maroon-color) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--default-font);
	font-size: 32px;
	font-weight: 700;
	color: var(--white-color);
	box-shadow: 0 4px 20px rgba(150, 49, 47, 0.4); /* --maroon-color glow */
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	border: 2px solid var(--divider-color);
}

.anj-why-item:hover .anj-why-number {
	background: linear-gradient(135deg, var(--gold-color) 0%, var(--orange-color) 100%);
	color: var(--header-bg-color);
	transform: scale(1.1) rotate(5deg);
	box-shadow: 0 10px 30px rgba(217, 166, 46, 0.5); /* --gold-color glow */
	border-color: var(--white-color);
}

.anj-why-content {
	flex: 1;
}

.anj-why-item-title {
	font-family: var(--default-font);
	font-size: 28px;
	font-weight: 800;
	color: var(--white-color);
	margin: 0 0 8px 0;
	text-transform: capitalize;
	transition: color 0.3s ease;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.anj-why-item:hover .anj-why-item-title {
	color: var(--gold-color);
}

.anj-why-item-desc {
	font-family: var(--default-font);
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	transition: color 0.3s ease;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.anj-why-item:hover .anj-why-item-desc {
	color: var(--white-color);
}

/* =========================================
RESPONSIVE DESIGN
========================================= */
@media (max-width: 991px) {
	.anj-why-section { padding: 60px 0; }
	.anj-why-left { padding-right: 0; margin-bottom: 40px; text-align: center; }
	.anj-why-section .section-title.light-title { text-align: left; }
	.anj-why-section .section-title.light-title h2 { font-size: 32px; }
	.anj-why-description { text-align: center; max-width: 600px; margin: 0 auto; }
	.anj-why-right { max-width: 700px; margin: 0 auto; }
}

@media (max-width: 768px) {
	.anj-why-section { padding: 50px 0; }
	.container { padding-left: 20px; padding-right: 20px; }
	.anj-why-section .section-title.light-title h2 { font-size: 28px; margin-bottom: 15px; line-height: 1.3; }
	.anj-why-description { font-size: 14px; line-height: 1.8; margin-top: 10px; padding: 0 10px; }
	.anj-why-right { gap: 20px; }

	.anj-why-item {
		gap: 20px; padding: 20px;
		background: var(--primary-color);
		border-radius: 15px; border: 1px solid var(--divider-color);
	}
	.anj-why-number { width: 55px; height: 55px; font-size: 20px; flex-shrink: 0; }
	.anj-why-item-title { font-size: 17px; margin-bottom: 8px; }
	.anj-why-item-desc { font-size: 14px; line-height: 1.8; margin: 0; }
}

@media (max-width: 576px) {
	.anj-why-section { padding: 40px 0; }
	.container { padding-left: 15px; padding-right: 15px; }
	.anj-why-section .section-title.light-title h2 { font-size: 24px; margin-bottom: 15px; }
	.anj-why-description { font-size: 14px; line-height: 1.8; margin-top: 15px; text-align: justify; }
	.anj-why-right { gap: 15px; }
	.anj-why-item { flex-direction: row; text-align: left; gap: 15px; padding: 18px; background: var(--primary-color); border-radius: 12px; margin-bottom: 0; }
	.anj-why-number { width: 50px; height: 50px; font-size: 18px; margin: 0; }
	.anj-why-content { flex: 1; min-width: 0; padding-right: 5px; }
	.anj-why-item-title { font-size: 16px; margin-bottom: 6px; line-height: 1.3; }
	.anj-why-item-desc { font-size: 14px; line-height: 1.8; margin: 0; }
}

@media (max-width: 480px) {
	.anj-why-section { padding: 35px 0; }
	.container { padding-left: 15px; padding-right: 15px; }
	.anj-why-section .section-title.light-title h2 { font-size: 22px; margin-bottom: 12px; }
	.anj-why-description { font-size: 14px; line-height: 1.8; margin-top: 10px; }
	.anj-why-right { gap: 15px; }
	.anj-why-item { gap: 15px; padding: 16px; border-radius: 12px; }
	.anj-why-number { width: 48px; height: 48px; font-size: 17px; }
	.anj-why-item-title { font-size: 15px; margin-bottom: 6px; }
	.anj-why-item-desc { font-size: 14px; line-height: 1.8; }
}

@media (max-width: 375px) {
	.anj-why-section { padding: 30px 0; }
	.anj-why-section .section-title.light-title h2 { font-size: 20px; }
	.anj-why-description { font-size: 14px; }
	.anj-why-item { padding: 14px; gap: 12px; }
	.anj-why-number { width: 44px; height: 44px; font-size: 16px; }
	.anj-why-item-title { font-size: 14px; }
	.anj-why-item-desc { font-size: 14px; }
}


/************************************/
/***  Signature Dishes Carousel   ***/
/************************************/

.signature-carousel-section {
    position: relative;
    padding: 40px 0; /* Gives outer clearance so arrows aren't cut off by screen edges */
}

.signature-swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0 40px 0;
}

.signature-swiper .swiper-slide {
    height: auto;
}

/* Fully Visible Navigation Arrows */
.signature-button-prev,
.signature-button-next {
    position: absolute;
    top: 35%;  /* Changed from 55% to 45% - centers with image, not text */
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: var(--primary-color);
    color: var(--white-color, #fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
}

.signature-button-prev:hover,
.signature-button-next:hover {
    background-color: var(--accent-color, #8b0000);
    color: #fff;
}

.signature-button-prev {
    left: 0px;
}

.signature-button-next {
    right: 0px;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 991px) {
    .signature-carousel-section {
        padding: 0 25px;
    }
    .signature-button-prev,
    .signature-button-next {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}
/* Optional: Fine-tune for different screen sizes */
@media (max-width: 991px) {
    .signature-button-prev,
    .signature-button-next {
        top: 35%;  /* Adjust for mobile */
    }
}

/* Special styling for disclaimer text */
.disclaimer-item {
    position: relative;
    color: var(--gold-color) !important;
    font-weight: 700;
    overflow: hidden;
}

.disclaimer-item i {
    color: var(--gold-color) !important;
}

/* Moving shine effect */
.disclaimer-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(78, 10, 18, 0.7),
        transparent
    );
    animation: shineText 3s linear infinite;
}

@keyframes shineText {
    100% {
        left: 150%;
    }
}

/* Stop scrolling ticker animation on hover */
.our-scrolling-ticker:hover .scrolling-content {
    animation-play-state: paused;
}

/************************************/
/***  About Us – Mobile Space Fix  ***/
/***  Mobile ONLY – desktop & button styles untouched ***/
/************************************/
@media only screen and (max-width: 991px){
	/* List items → 2 equal columns, no empty right side */
	.about-us-body{
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		margin-bottom: 25px;
		padding-bottom: 25px;
	}
	.about-list-item{
		width: 100%;
	}
	.about-list-content h3{
		font-size: 16px;
	}

	/* Footer → stack full width = removes empty space
	   (ONLY width/layout – button design is NOT changed) */
	.about-us-footer{
		display: flex;
		flex-direction: column;
		gap: 15px;
	}
	.about-us-footer > a.btn-default,
	.about-us-footer .appointment-btn,
	.about-us-footer .appointment-btn .btn-default{
		width: 100%;
		margin: 0;
	}
	.appointment-btn{
		text-align: left;
	}
}

/* Very small phones – keep 2 columns but tighter */
@media only screen and (max-width: 400px){
	.about-us-body{
		gap: 10px;
	}
	.about-list-content h3{
		font-size: 14px;
	}
}

/************************************/
/*** About Buttons – Mobile View ***/
/************************************/
@media (max-width: 767px) {
	.about-us-footer .btn-default {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.1em;
		padding: 15px 60px;
	}

	.about-us-footer .btn-default i {
		margin-right: 0;
	}
}

/************************************/
/***  Our Promise Section Layout Fix ***/
/************************************/

/* 1. Change card to Flexbox to put Icon on Left and Content on Right */
.our-mva-item {
    display: flex !important;
    align-items: flex-start !important; /* Aligns items to the top */
    gap: 20px !important;               /* Space between Icon and Text */
    height: auto !important;            /* CRITICAL: Removes the huge empty white space */
    padding: 25px !important;
    margin-bottom: 20px !important;
}

/* 2. Fix Icon Box - Keep it on the left, prevent shrinking */
.our-mva-item .icon-box {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;        /* Remove bottom margin */
}

/* 3. Fix Content Box - Takes full remaining width on the right */
.our-mva-item .mva-item-content {
    flex: 1 !important;
    width: 100% !important;
}

/* 4. Adjust Title and Description spacing */
.our-mva-item .mva-item-content h3 {
    margin-bottom: 10px !important;     /* Tighter gap between Title and Description */
}

/* =========================================
   Mobile Adjustments (Same Design, Just Compact)
   ========================================= */
@media only screen and (max-width: 767px) {
    .our-mva-item {
        padding: 20px !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Slightly smaller icon for mobile to save space */
    .our-mva-item .icon-box {
        width: 45px !important;
        height: 45px !important;
    }
    .our-mva-item .icon-box img {
        max-width: 22px !important;
    }
    
    /* Adjust typography for mobile */
    .our-mva-item .mva-item-content h3 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    .our-mva-item .mva-item-content p {
        font-size: 14px !important;
        line-height: 1.6em !important;
    }
}

/* =========================================
CTA INFOBAR - MOBILE LAYOUT FIX
Icon left, Title right, Desc below, Full-width button
========================================= */
@media only screen and (max-width: 991px) {
    .cta-infobar {
        padding: 25px 20px !important;
    }
    
    /* Make icon and title sit on same row */
    .cta-info-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    /* Icon stays on left */
    .cta-info-content .icon-box {
        flex-shrink: 0 !important;
        width: 48px !important;
        height: 48px !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Title and content wrapper */
    .cta-info-content .cta-content {
        flex: 1 !important;
        width: calc(100% - 63px) !important;
    }
    
    /* Title styling */
    .cta-info-content .cta-content h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
        line-height: 1.3em !important;
    }
    
    /* Description on separate row below */
    .cta-info-content .cta-content p {
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        line-height: 1.6em !important;
        margin-bottom: 0 !important;
    }
    
    /* Button container - full width */
    .cta-appointment-btn {
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }
    
    /* Button - full width with centered text */
    .cta-appointment-btn .btn-default {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 14px 20px !important;
    }
    
    /* Button icon spacing */
    .cta-appointment-btn .btn-default i {
        margin-right: 8px !important;
    }
}

/* Extra small mobile devices */
@media only screen and (max-width: 575px) {
    .cta-infobar {
        padding: 20px 15px !important;
    }
    
    .cta-info-content .icon-box {
        width: 42px !important;
        height: 42px !important;
    }
    
    .cta-info-content .cta-content h3 {
        font-size: 16px !important;
    }
    
    .cta-info-content .cta-content p {
        font-size: 13px !important;
    }
    
    .cta-appointment-btn .btn-default {
        padding: 12px 15px !important;
        font-size: 15px !important;
    }
}

.reservation-small-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	margin-top: 5px;
	background-color: var(--primary-color);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.reservation-small-btn i {
	font-size: 10px;
}

.reservation-small-btn:hover {
	background-color: var(--gold-color);
	color: #fff;
}

.contact-info-content p a {
	color: var(--primary-color);
	text-decoration: none;
	transition: all 0.3s ease;
}

.contact-info-content p a:hover {
	color: var(--gold-color);
}

.contact-info p a {
	color: #fff;
	text-decoration: none;
}

.contact-info p a:hover {
	color: var(--gold-color);
}

.location-content-hidden {
	visibility: hidden!important;
}