/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Proshield - Cyber Security Services HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Service css
07. Our Feature css
08. Our Projects css
09. Why Choose Us css
10. What We Do css
11. Our Pricing css
12. Our Testimonial css
13. Our Team css
14. CTA Box css
15. Our FAQs css
16. Our Blog css
17. Footer css
18. About Us Page css
19. Services Page css
20. Service Single css
21. Blog Archive css
22. Blog Single css
23. Projects Page css
24. Project Single css
25. Team Page css
26. Team Single css
27. Pricing Page css
28. Testimonial Page css
29. Image Gallery css
30. Video Gallery css
31. FAQs Page css
32. Contact Us Page css
33. 404 Error Page css
34. Responsive css
-------------------------------------------------------------------------------------- */

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

:root{
	--primary-color				: #010535;
	--secondary-color			: #F2F2F5;
	--text-color				: #707070;
	--accent-color				: #465A65;
	--accent-secondary-color	: #54BBDA;
	--white-color				: #FFFFFF;
	--divider-color				: #F5F5F5;
	--dark-divider-color		: #FFFFFF33;
	--error-color				: rgb(230, 87, 87);
	--default-font				: "Plus Jakarta Sans", sans-serif;
}

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

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

::-webkit-scrollbar-track{
	background-color: var(--secondary-color);
	border-left: 1px solid var(--secondary-color);
}
::-webkit-scrollbar{
	width: 7px;
	background-color: var(--secondary-color);
}
::-webkit-scrollbar-thumb{
	background: linear-gradient(180deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

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

h1,
h2,
h3,
h4,
h5,
h6{
	margin : 0;
	font-weight: 600;
	line-height: 1.2em;
	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: 1300px;
}

.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: -15px;
    margin-left: -15px;
}

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

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

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

.btn-default{
	position: relative;
	display: inline-block;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-radius: 100px;
    color: var(--white-color);
    font-size: 18px;
    font-weight: 600;
	line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 17px 60px 17px 30px;
    transition: all 0.4s ease-in-out;
	overflow: hidden;
	z-index: 0;
}

.btn-default:hover{
	background-position: right center;
}

.btn-default::before{
	content: '\f0a9';
	font-family: 'Font Awesome 6 Free';
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-30px, -50%);
	font-size: 20px;
	color: var(--white-color);
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.btn-default:hover::before{
	transform: translate(-27px, -50%);
}

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

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

.btn-default.btn-highlighted::after{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    border-radius: 100px;
    transition: 0.4s ease-in-out;
    z-index: -1;
}

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

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

.btn-default.btn-highlighted:hover:after{
    width: 100%;
    left: 0;
    right: auto;
}

.cb-cursor:before{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

.preloader{
    position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

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

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

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

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

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

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

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

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

.section-row .section-title{
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

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

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

.section-title{
	position: relative;
	margin-bottom: 40px;
	z-index: 1;
}

.section-title h3{
	position: relative;
	display: inline-block;
	font-size: 15px;
	line-height: normal;
	letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f35c1e;
	padding-left: 30px;
    margin-bottom: 20px;
}

.section-title h3::before{
	content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url('../images/icon-sub-heading.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    width: 20px;
    height: 20px;
}

.section-title h1{
	font-size: 68px;
	font-weight: 700;
	color: var(--white-color);
	margin-bottom: 0;
	cursor: none;
}

.section-title h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 0;
	cursor: none;
}

.section-title h1 span,
.section-title h2 span{
	background: linear-gradient(90.15deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
	background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.section-title.dark-section h3,
.section-title.dark-section h1,
.section-title.dark-section h2,
.section-title.dark-section p{
	color: var(--white-color);
}

.section-title.dark-section h3::before{
	filter: brightness(0) invert(1);
}

.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{
	background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
	padding: 10px 0;
}

.topbar-info-text p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.topbar-info-text p a{
	font-weight: 700;
	text-transform: capitalize;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all 0.3s ease-in-out;
}

.topbar-info-text p a:hover{
	color: var(--primary-color)	;
}

.topbar-links{
	display: flex;
	align-items: center;
	justify-content: end;
}

.topbar-contact-info{
	border-right: 1px solid var(--dark-divider-color);
	margin-right: 25px;
	padding-right: 25px;
}

.topbar-contact-info ul{
	list-style: none;
    padding: 0;
    margin: 0;
}

.topbar-contact-info ul li{
	position: relative;
    display: inline-block;
    margin-right: 20px;
	color: var(--white-color);
	opacity: 80%;
    transition: all 0.3s ease-in-out;
}

.topbar-contact-info ul li a{
    color: inherit;
}

.topbar-contact-info ul li:hover{
	color: var(--primary-color);
}

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

.topbar-contact-info ul li::before{
	content: '/';
	position: absolute;
	top: 0;
	right: -16px;
	bottom: 0;
	font-size: 16px;
	color: var(--white-color);
	opacity: 80%;
}

.topbar-contact-info ul li:last-child:before{
	display: none;
}

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

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

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

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

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

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

header.main-header{
	position: relative;
	border-bottom: 1px solid var(--dark-divider-color);
	z-index: 100;
}

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

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

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

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

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

.main-menu .nav-menu-wrapper{
	flex: 1;
	text-align: center;
	margin: 0 20px;
}

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

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

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

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

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-secondary-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: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	transition: all 0.3s ease-in-out;
	text-align: left;
}

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

.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 li:hover > ul{
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
    padding: 5px 0;
}

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

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

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

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

.slicknav_btn{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	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 a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

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

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

.slicknav_menu{
	position: absolute;
    width: 100%;
	padding: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

.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: 8px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
	transition: all 0.3s ease-in-out;
}

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

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

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

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

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

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

.hero{
	position: relative;
	
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 140px 0;
}

.hero::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(270deg, rgba(1, 5, 53, 0.28) 43.57%, rgba(1, 5, 53, 0.8) 100%);
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero.hero-video{
	padding: 205px 0;
}

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

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

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

.hero.hero-slider-layout::before{
	display: none;
}

.hero.hero-slider-layout .swiper,
.hero.hero-slider-layout .swiper-wrapper {
	height: auto !important;
}

.hero.hero-slider-layout .swiper-slide {
	height: auto !important;
}

.hero.hero-slider-layout .hero-slide{
	position: relative;
	min-height: 800px;
	display: flex;
	align-items: center;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.hero.hero-slider-layout .hero-slide::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(1, 5, 53, 0.28) 43.57%, rgba(1, 5, 53, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero.hero-slider-layout .hero-slide .container {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: 140px;
	padding-bottom: 140px;
}

.hero.hero-slider-layout .hero-pagination{
	position: absolute;
    bottom: 70px;
	text-align: left;
	padding-left: calc(((100vw - 1300px) / 2) + 15px);
	z-index: 2;
}

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

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

.hero-content{
	position: relative;
	width: 100%;
	max-width: 635px;
	z-index: 2;
}

.hero-content-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
}

.video-play-button{
	display: flex;
    align-items: center;
    justify-content: center;
}

.video-play-button a{
	height: 50px;
	width: 50px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: none;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a{
	background: var(--accent-color);
}

.video-play-button i{
	font-size: 18px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.video-play-button:hover a i{
	color: var(--white-color);
}

.video-play-button h3{
	font-size: 18px;
	text-transform: capitalize;
	color: var(--white-color);
	margin: 0;
}

.hero-content-footer{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-top: 80px;
}

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

.hero-list ul li{
	background: url('../images/icon-check-white.svg') no-repeat;
	background-position: left top;
	background-size: 24px auto;
	line-height: 1.5em;
	text-transform: capitalize;
	color: var(--white-color);
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 25px;
	padding: 0 0 25px 35px;
}

.hero-list ul li:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.our-client-images{
	display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-image{
	display: inline-block;
	border: 1px solid var(--white-color);
    border-radius: 50%;
    margin-left: -14px;
    width: 62px;
    height: 62px;
    overflow: hidden;
    z-index: 1;
}

.client-image:first-child{
    margin: 0;
}

.client-image figure{
	display: block;
}

.client-image img{
	width: 100%;
    max-width: 60px;
	border-radius: 50%;
}

.client-image.client-counter{
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
	text-align: center;
	display: inline-flex;
    align-items: center;
    justify-content: center;
	transition: all 0.4s ease-in-out;
}

.client-image.client-counter:hover{
	background-position: right center;
}

.client-image.client-counter h3{
	font-size: 22px;
	color: var(--white-color);
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.client-image.client-counter:hover h3{
	color: var(--primary-color);
}

.our-client-content{
	margin-top: 10px;
}

.our-client-content p{
	color: var(--white-color);
	margin-bottom: 0;
}

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

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

.about-us-image{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 30px;
	margin-right: 20px;
}

.about-image-box{
	width: calc(50% - 15px);
}

.about-img-2{
	margin-bottom: 30px;
}

.about-img-1 figure,
.about-img-2 figure,
.about-img-3 figure{
	display: block;
	border-radius: 30px;
}

.about-img-1 img,
.about-img-2 img,
.about-img-3 img{
	width: 100%;
	object-fit: cover;
	border-radius: 30px;
}

.about-img-1 img{
	aspect-ratio: 1 / 1.91;
}

.about-img-2 img,
.about-img-3 img{
	aspect-ratio: 1 / 1.07;
}

.get-free-security-circle{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
	z-index: 1;
}

.get-free-security-circle img{
	width: 100%;
	max-width: 166px;
	animation: infiniterotate 20s infinite linear;
}

@keyframes infiniterotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}

.about-us-body{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
	border-radius: 30px;
	margin-bottom: 50px;
	margin-left: 20px;
	padding: 15px 25px 15px 15px;
	overflow: hidden;
}

.about-us-body-img{
	width: 160px;
	min-width: 160px;
	height: 160px;
	background-color: var(--white-color);
	border-radius: 15px;
	display: flex;
	margin-right: 15px;
	margin-left: 0;
	overflow: hidden;
	padding: 5px;
}

.about-us-body-img figure{
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	margin: 0;
}

.about-us-body-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-us-body-content{
	width: calc(100% - 200px);
	padding: 10px 0;
}

.about-us-body-content h3{
	color: var(--white-color);
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 10px;
}

.about-us-body-content p{
	color: var(--white-color);
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}

.about-us-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
}

.about-footer-list,
.about-footer-content{
	width: calc(50% - 15px);
}

.about-footer-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-footer-list ul li{
	background: url('../images/icon-check.svg') no-repeat;
	background-position: left top;
	background-size: 24px auto;
	line-height: 1.5em;
	padding-left: 35px;
	margin-bottom: 20px;
}

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

.about-contact-btn{
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.about-contact-btn .icon-box{
	position: relative;
	height: 46px;
	width: 46px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}

.about-contact-btn:hover .icon-box{
	background-position: right center;
}

.about-contact-btn .icon-box img{
	width: 100%;
	max-width: 28px;
}

.about-footer-btn-content{
	width: calc(100% - 56px);
}

.about-footer-btn-content h3{
	font-size: 20px;
	color: var(--primary-color);
	margin: 0;
}

.about-footer-btn-content h3 a{
	color: inherit;
}

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

.our-services{
	background: #010535;
	padding: 100px 0 70px;
}

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

.service-item::before{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	height: 0;
	width: 100%;
	z-index: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active:before,
.service-item:hover:before{
	height: 100%;
}

.service-item .icon-box{
	position: relative;
	margin-bottom: 90px;
	z-index: 1;
}

.service-item .icon-box img{
	width: 100%;
	max-width: 80px;
	transition: all 0.4s ease-in-out;
}

.service-item.active .icon-box img,
.service-item:hover .icon-box img{
	filter: brightness(0) invert(1);
}

.service-title-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	z-index: 1;
}

.service-title{
	width: calc(100% - 55px);
}

.service-title h3{
	font-size: 20px;
	font-weight: 600;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-title h3,
.service-item:hover .service-title h3{
	color: var(--white-color);
}

.service-title h3 a{
	color: inherit;
}

.service-btn a{
	position: relative;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	display: flex;
	color: var(--white-color);
	justify-content: center;
	align-items: center;
	overflow: hidden;
	margin-left: 15px;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-btn a,
.service-item:hover .service-btn a{
	background: var(--white-color);
	color: var(--accent-secondary-color);
}

.service-item .service-btn a:hover{
	color: var(--primary-color);
}

.service-btn a::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	height: 100%;
	width: 100%;
	z-index: -1;
	transition: all 0.4s ease-in-out;
}

.service-btn a i{
	font-size: 20px;
	color: inherit;
}

.service-content{
	position: relative;
	z-index: 1;
}

.service-content p{
	margin-bottom: 0;
	transition: all 0.4s ease-in-out;
}

.service-item.active .service-content p,
.service-item:hover .service-content p{
	color: var(--white-color);
}

/************************************/
/*** 	  07. Our Feature css	  ***/
/************************************/

.our-feature{
	padding: 100px 0;
}

.feature-image figure{
	display: block;
	border-radius: 30px;
}

.feature-image img{
	width: 100%;
	aspect-ratio: 1 / 0.62;
	object-fit: cover;
	border-radius: 30px;
}

.company-experience-info{
	display: flex;
	gap: 30px;
	margin-top: 30px;
}

.company-experience-info .feature-image{
	width: calc(65% - 15px);
}

.company-experience-info .feature-image img{
	aspect-ratio: 1 / 0.652;
}

.company-experience-box{
	width: calc(35% - 15px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 50%, var(--accent-color) 98.15%);
	background-size: 200% auto;
	text-align: center;
	border-radius: 30px;
	padding: 20px;
	transition: all 0.4s ease-in-out;
}

.company-experience-box:hover{
	background-position: right center;
}

.company-experience-content{
	border-bottom: 1px solid var(--dark-divider-color);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.company-experience-content h2{
	font-size: 60px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.company-experience-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.company-client-images .client-image{
	width: 32px;
    height: 32px;
	margin-left: -8px;
}

.company-client-images .client-image img{
	max-width: 30px;
}

.company-client-images .client-image.client-counter h3{
	font-size: 10px;
}

.our-feature-content{
	margin-left: 15px;
}

.ferature-list-item{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.ferature-list-item:last-child{
	margin-bottom: 0;
}

.ferature-list-item .icon-box{
	height: 60px;
	width: 60px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.ferature-list-item:hover .icon-box{
	background-position: right center;
}

.ferature-list-item .icon-box img{
	max-width: 30px;
}

.ferature-list-content{
	width: calc(100% - 80px);
}

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

.ferature-list-content p{
	margin-bottom: 0;
}

/************************************/
/*** 	 08. Our Projects css	  ***/
/************************************/

.our-projects{
	background: var(--secondary-color);
	padding: 100px 0;
}

.projects-list{
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--dark-divider-color);
	border-right: none;
	border-bottom: none;
	border-radius: 30px;
	overflow: hidden;
}

.project-item{
	position: relative;
	width: 25%;
	border-right: 1px solid var(--dark-divider-color);
	border-bottom: 1px solid var(--dark-divider-color);
	border-top: none;
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    overflow: hidden;
    z-index: 1;
}

.project-item:nth-child(-4n + 4){
	border-radius: 0 30px 0 0;
}

.project-item:last-child{
	border-radius: 0 0 30px 0;
}

.project-image a,
.project-image figure{
	display: block;
	overflow: hidden;
	cursor: none;
}

.project-image figure::before{
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(84, 187, 218, 0.6) 0%, rgba(70, 90, 101, 0.6) 100%);
    height: 0;
    width: 100%;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.project-item.active .project-image a figure::before,
.project-item:hover .project-image a figure::before{
    height: 100%;
}

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

.project-item.active .project-image img,
.project-item:hover .project-image img{
	transform: scale(1.05);
}

.project-content{
	position: absolute;
	right: 30px;
	left: 30px;
	bottom: 30px;
    transform: translateY(50px);
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

.project-item.active .project-content,
.project-item:hover .project-content{
    transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.project-content p{
	margin-bottom: 20px;
}

.project-content p a{
	display: inline-block;
    line-height: 1.2em;
	text-transform: capitalize;
	color: var(--white-color);
	border: 1px solid var(--white-color);
	border-radius: 5px;
	padding: 8px 10px;
}

.project-content h3{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

.project-content h3 a{
	color: inherit;
}

.section-footer-text{
	width: 100%;
	max-width: 580px;
	text-align: center;
	margin: 80px auto 0;
}

.section-footer-text p{
	margin-bottom: 0;
}

.section-footer-text p a{
	position: relative;
	font-weight: 600;
	text-transform: capitalize;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p a::before{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	height: 2px;
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.section-footer-text p span:hover,
.section-footer-text p a:hover,
.section-footer-text p a:hover::before{
	background-position: right center;
}

/************************************/
/*** 	 09. Why Choose Us css	  ***/
/************************************/

.why-choose-us{
	padding: 100px 0;
	background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.why-choose-image{
	margin-right: 20px;
}

.why-choose-image figure{
	display: block;
	border-radius: 30px;
}

.why-choose-image img{
	width: 100%;
	aspect-ratio: 1 / 1.25;
	object-fit: cover;
	border-radius: 30px;
}

.why-choose-item{
	position: relative;
	background-color: var(--white-color);
	border-radius: 30px;
	box-shadow: 0px 0px 100px 2px #0000000D;
	padding: 25px 30px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.why-choose-item:before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.why-choose-item:hover:before{
	top: 0;
	bottom: auto;
    height: 100%;
}

.why-choose-item:last-child{
	margin-bottom: 0;
}

.why-choose-item .icon-box{
	position: relative;
	margin-right: 30px;
	z-index: 1;
}

.why-choose-item .icon-box img{
	width: 100%;
	max-width: 80px;
	transition: all 0.4s ease-in-out;
}

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

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

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

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

.why-choose-item:hover .why-choose-item-content h3,
.why-choose-item:hover .why-choose-item-content p{
	color: var(--white-color);
}

.why-choose-counter-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 80px;
	padding-top: 80px;
}

.why-choose-counter-item{
	position: relative;
	width: calc(33% - 37.5px);
	text-align: center;
}

.why-choose-counter-item:after{
	content: '';
    position: absolute;
    top: 50%;
    right: -25px;
    bottom: 0;
    left: auto;
    transform: translateY(-50%);
    background: var(--dark-divider-color);
    width: 1px;
    height: 85%;
}

.why-choose-counter-item:last-child:after,
.why-choose-counter-item:nth-child(4n + 4)::after{
	display: none;
}

.why-choose-counter-item .icon-box{
	margin-bottom: 20px;
}

.why-choose-counter-item .icon-box img{
	width: 100%;
	max-width: 60px;
}

.why-choose-counter-content h3{
	color: var(--white-color);
	font-size: 46px;
	font-weight: 800;
	margin-bottom: 10px;
}

.why-choose-counter-content p{
	color: var(--white-color);
	font-size: 18px;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 	  10. What We Do css	  ***/
/************************************/

.our-security{
	padding: 100px 0;
}

.security-content-item{
	margin-bottom: 40px;
}

.security-content-item:last-child{
	margin-bottom: 0;
}

.security-content-item h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.security-content-item p{
	margin-bottom: 0;
}

.security-image{
	margin-bottom: 40px;
}

.security-image figure{
	display: block;
	border-radius: 30px;
}

.security-image img{
	width: 100%;
	aspect-ratio: 1 / 0.51;
	object-fit: cover;
	border-radius: 30px;
}

.security-list{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	border-top: 1px solid var(--divider-color);
	margin-top: 80px;
	padding-top: 80px;
}

.security-list-item{
	width: calc(33.33% - 20px);
	background: url(../images/icon-check.svg) no-repeat;
	background-size: 26px auto;
	background-position: top left;
	padding-left: 35px;
}

.security-list-item h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.security-list-item p{
	margin-bottom: 0;
}

/************************************/
/*** 	  11. Our Pricing css	  ***/
/************************************/

.our-pricing{
	background: var(--secondary-color);
	padding: 100px 0;
}

.pricing-item{
	height: calc(100% - 30px);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	margin-bottom: 30px;
	overflow: hidden;
}

.pricing-header{
	position: relative;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-bottom: 1px solid transparent;
	padding: 30px;
}

.pricing-header h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 15px;
}

.pricing-header h2{
	font-size: 46px;
	color: var(--white-color);	
	margin-bottom: 15px;
}

.pricing-header h2 sup{
    font-size: 20px;
	top: -10px;
}

.pricing-header h2 sub{
    bottom: 0;
    font-size: 16px;
    font-weight: 400;
	opacity: 80%;
}

.pricing-header p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.pricing-header .icon-box{
	position: absolute;
	top: -14px;
	right: -35px;
}

.pricing-header .icon-box img{
	width: 100%;
	max-width: 100px;
}

.pricing-body{
	padding: 30px;
}

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

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

.pricing-list ul li{
	background-image: url('../images/icon-check.svg');
	background-repeat: no-repeat;
	background-position: top left;
	background-size: 24px auto;
	line-height: 1.5em;
	margin-bottom: 20px;
	padding-left: 35px;
}

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

.pricing-item.highlighted-box{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
}

.pricing-item.highlighted-box .pricing-header{
	background: transparent;
	border-bottom-color: var(--dark-divider-color);
}

.pricing-item.highlighted-box .pricing-list ul li{
	color: var(--white-color);
}

.pricing-item.highlighted-box .pricing-list ul li{
	background-image: url('../images/icon-check-white.svg');
}

.pricing-item.highlighted-box .btn-default.btn-highlighted:after{
    background: var(--primary-color);
}

.pricing-benefit-list{
	margin-top: 30px;
}

.pricing-benefit-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 15px 50px;
}

.pricing-benefit-list ul li{
	display: flex;
	align-items: center;
	color: var(--primary-color);
}

.pricing-benefit-list ul li img{
	max-width: 20px;
	margin-right: 15px;
}

/************************************/
/*** 	12. Our Testimonial css   ***/
/************************************/

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

.testimonial-box{
	position: relative;
	background: url(../images/testimonial-bg.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px 30px;
}

.testimonial-box::before{
	content: '';
    position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color);
	border-radius: 30px;
	opacity: 60%;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.testimonial-video-button,
.testimonial-slider-box{
	position: relative;
	width: calc(50% - 15px);
	z-index: 1;
}

.testimonial-video-button{
	text-align: center;
}

.testimonial-video-button a{
	position: relative;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 100%;
	width: 74px;
	height: 74px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: none;
	transition: all 0.4s ease-in-out;
}

.testimonial-video-button a:hover{
	background-position: right center;
}

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

.testimonial-video-button a:after{
	content: '';
	position: absolute;
	top: -30%;
	left: -30%;
	width: 160%;
	height: 160%;
	border: 50px solid var(--divider-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;
	}
}

.testimonial-video-button a i{
	font-size: 30px;
	color: var(--white-color);
	margin-left: 3px;
}

.testimonial-video-button h3{
	color: var(--white-color);
	font-size: 18px;
	font-weight: 600;
	margin-top: 40px;
	text-transform: capitalize;
}

.testimonial-slider{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px 30px 0 30px;
	padding: 50px;
	overflow: hidden;
	margin-top: -135px;
}

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

.testimonial-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.testimonial-company-logo img{
	width: 100%;
	max-width: 165px;
	max-height: 40px;
}

.testimonial-quote{
	text-align: end;
}

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

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

.testimonial-content p{
	font-size: 18px;
	font-weight: 500;
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 20px;
}

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

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

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

.author-image figure{
	display: block;
	border-radius: 50%;
}

.author-image img{
	width: 100%;
	max-width: 50px;
	border-radius: 50%;
}

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

.author-content h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.author-content p{
	color: var(--white-color);
	opacity: 80%;
	text-transform: capitalize;
	margin: 0;
}

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

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

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

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

.testimonial-slider .testimonial-button-next::before,
.testimonial-slider .testimonial-button-prev::before{
	font-family: 'FontAwesome';
	content: '\f061';
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	font-size: 16px;
	color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

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

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

.testimonial-contact-info{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	padding: 40px 40px 40px 0;
}

.testimonial-contact-box{
	width: calc(65% - 15px);
	display: flex;
	align-items: center;
}

.testimonial-contact-box .icon-box{
	height: 60px;
	width: 60px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	transition: all 0.4s ease-in-out;
}

.testimonial-contact-box:hover .icon-box{
	background-position: right center;
}

.testimonial-contact-box .icon-box img{
	width: 100%;
	max-width: 30px;
}

.testimonial-contact-content{
	width: calc(100% - 80px);
}

.testimonial-contact-content p{
	color: var(--white-color);
	font-weight: 500;
	margin: 0;
}

.testimonial-contact-content p a{
	display: inline-block;
	color: inherit;
	text-decoration: underline;
	transition: all 0.4s ease-in-out;
}

.testimonial-contact-content p a:hover{
	color: var(--accent-secondary-color);
}

.testimonial-contact-btn{
	width: calc(35% - 15px);
	text-align: end;
}

/************************************/
/*** 	   13. Our Team css  	  ***/
/************************************/

.our-team{
	background: #010535;
	padding: 100px 0 100px;
}

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

.team-image{
	position: relative;
}

.team-image:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	transform: scale(0);
    background: linear-gradient(180deg, rgba(84, 187, 218, 0.6) -0.01%, rgba(70, 90, 101, 0.6) 111.29%);
    border-radius: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-image:before{
	transform: scale(1);
}

.team-image a,
.team-image a figure{
	display: block;
	cursor: none;
	border-radius: 30px;
	overflow: hidden;
}

.team-image figure:before{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
	background: linear-gradient(180deg, rgba(84, 187, 218, 0) 63.54%, #465A65 110.14%);
	border-radius: 30px;
	transition: all 0.4s ease-in-out;
    z-index: 1;
}

.team-item:hover .team-image figure:before{
	opacity: 0;
}

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

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

.team-social-icon{
	position: absolute;
	top: 50%;
	transform: translateY(0%);
	left: 30px;
	right: 30px;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	z-index: 2;
}

.team-item:hover .team-social-icon{
	transform: translateY(-50%);
	opacity: 1;
}

.team-social-icon ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 15px;
}

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

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

.team-social-icon ul li a i{
    color: var(--white-color);
    font-size: 18px;
}

.team-content{
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	text-align: center;
	z-index: 2;
}

.team-content h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

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

.team-content p{
	color: var(--white-color);
	opacity: 80%;
	text-transform: capitalize;
	margin: 0;
}

/************************************/
/*** 	    14. CTA Box css  	  ***/
/************************************/

.cta-box-section{
	padding: 50px 0 100px;
}

.cta-box{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px 70px;
	padding: 25px 25px 25px 60px;
}

.cta-box-content{
	width: calc(64% - 35px);
}

.cta-contact-info{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	z-index: 1;
}

.cta-contact-info:before{
    content: '';
    position: absolute;
    width: 125px;
    height: 100px;
    bottom: 10px;
    right: 0;
    transform: rotateY(180deg);
    background: url(../images/cta-box-arrow.svg) no-repeat;
	background-position: right center;
    background-size: cover;
    animation: ctamovearrow 2s infinite linear alternate;
}

@keyframes ctamovearrow{
	50%{
		right: -30px;
	}
}

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

.cta-contact-item:last-child{
	border: none;
	margin: 0;
	padding: 0;
}

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

.cta-contact-item .icon-box img{
	width: 100%;
	max-width: 50px;
}

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

.cta-contact-content h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 5px;
}

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

.cta-contact-content p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.cta-contact-content p a:hover{
	color: var(--primary-color);
}

.cta-box-image{
	width: calc(36% - 35px);
}

.cta-box-image figure{
	display: block;
	border-radius: 30px;
}

.cta-box-image img{
	width: 100%;
	aspect-ratio: 1 / 0.705;
	object-fit: cover;
	border-radius: 30px;
}

/************************************/
/*** 	   15. Our FAQs css 	  ***/
/************************************/

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

.our-faqs.home-our-faqs{
	background: var(--secondary-color);
}

.faq-content{
	margin-right: 30px;
}

.faq-image figure{
	display: block;
	border-radius: 30px;
}

.faq-image img{
	width: 100%;
	aspect-ratio: 1 / 0.608;
	object-fit: cover;
	border-radius: 30px;
}

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

.faq-accordion .accordion-item::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 20px;
	height: 100%;
	width: 100%;
	z-index: 0;
}

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

.faq-accordion .accordion-header .accordion-button{
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4em;
	background: transparent;
	color: var(--primary-color);
	padding: 26px 50px 26px 30px;
	transition: all 0.3s ease-in-out;
}

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

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

.faq-accordion .accordion-item .accordion-button::after, 
.faq-accordion .accordion-item .accordion-button.collapsed::after{
    content: '\f107';
    font-family: 'FontAwesome';
    font-size: 20px;
    font-weight: 900;
	color: var(--primary-color);
    position: absolute;
    right: 30px;
    top: 50%;
	transform: translateY(-50%);
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
	color: var(--white-color);
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-body{
	position: relative;
	padding: 15px 50px 30px 30px;
	z-index: 1;
}

.faq-accordion .accordion-body p{
    color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

/************************************/
/*** 	   16. Our Blog css 	  ***/
/************************************/

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

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

.post-featured-image a{
	display: block;
	border-radius: 30px;
	overflow: hidden;
	cursor: none;
}

.post-featured-image figure:before{
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, transparent 58.63%, var(--accent-color) 110.88%);
    z-index: 1;
}

.post-featured-image img{
    width: 100%;
	aspect-ratio: 1 / 1.02;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

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

.post-item-content{
	position: absolute;
	right: 30px;
	bottom: 30px;
	left: 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	z-index: 2;
}

.post-item-body h2{
	font-size: 20px;
	line-height: 1.4em;
	color: var(--white-color);
}

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

.post-item-btn a{
	height: 42px;
	width: 42px;
	border-radius: 50%;
	display: flex;
	background-color: var(--white-color);
	color: var(--accent-color);
	justify-content: center;
	align-items: center;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.post-item-btn a:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.post-item-btn a i{
	font-size: 20px;
	color: inherit;
}

/************************************/
/*** 	   17. Footer css   	  ***/
/************************************/

.main-footer{
	background: url(../images/footer-bg.png), linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	padding: 80px 0 0 0;
}

.footer-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 80px;
    padding-bottom: 50px;
}

.footer-logo img{
	width: 100%;
	max-width: 223px;
}

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

.footer-social-links ul li{
	display: inline-block;
	margin-right: 15px;
}

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

.footer-social-links ul li a{
	border: 1px solid var(--white-color);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

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

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

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

.footer-newsletter-form{
    margin-right: 30px;
}

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

.footer-links p{
	color: var(--white-color);
	margin-bottom: 30px;
}

.footer-newsletter-form .form-group{
	display: flex;
}

.footer-newsletter-form .form-group .form-control{
	width: calc(100% - 70px);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4em;
	color: var(--text-color);
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	outline: none;
	box-shadow: none;
	padding: 15px 20px;
}

.footer-newsletter-form .form-group .form-control::placeholder{
	color: var(--text-color);
}

.footer-newsletter-form .form-group .newsletter-btn{
	background-color: var(--white-color);
	color: var(--primary-color);
	width: 60px;
	height: 60px;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin-left: 10px;
	transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover{
	background-color: var(--primary-color);
	color: var(--white-color);
	transform: rotate(25deg);
}

.footer-newsletter-form .form-group .newsletter-btn i{
	font-size: 30px;
	color: inherit;
	padding-right: 5px;
}

.footer-quick-links{
	margin-left: 30px;
}

.footer-links ul{
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-links ul li{
	color: var(--white-color);
	text-transform: none;
	line-height: 1.7em;
	margin-bottom: 10px;
}

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

.footer-links ul li a{
	color: inherit;
	transition: all 0.3s ease-in-out;
}

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

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

.footer-copyright-text{
	text-align: center;
}

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

/************************************/
/*** 	 18. About Us Page css	  ***/
/************************************/

.page-header{
	position: relative;

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 145px 0;
}

.page-header::before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background: linear-gradient(270deg, rgba(1, 5, 53, 0.28) 43.57%, rgba(1, 5, 53, 0.8) 100%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

.page-header-box{
	position: relative;
	z-index: 1;
}

.page-header-box h1{
	display: inline-block;
    color: var(--white-color);
    font-size: 68px;
    font-weight: 800;
    line-height: 1.2em;
    margin-bottom: 10px;
    cursor: none;
}

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

.page-header-box ol li.breadcrumb-item{
    font-weight: 500;
	text-transform: capitalize;
	line-height: normal;
	color: var(--white-color);
}

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

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

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

.our-approach{
	position: relative;
	padding: 100px 0;
	background-image: url('../images/our-approach-bg.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.our-approach:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(242, 242, 245, 0.6) 99.12%, #F2F2F5 99.38%);
    height: 100%;
    width: 100%;
    z-index: 1;
}

.our-approach-box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.our-approach-image{
	position: relative;
	z-index: 1;
}

.our-approach-content{
	position: relative;
	margin-right: -110px;
	z-index: 2;
}

.mission-vision-item{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background: var(--white-color);
	border-radius: 30px;
	padding: 25px 30px;
	box-shadow: 0px 0px 100px 2px #0000000D;
	margin-bottom: 30px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.mission-vision-item:before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.mission-vision-item:hover:before{
	top: 0;
	bottom: auto;
    height: 100%;
}

.mission-vision-item:last-child{
	margin-bottom: 0;
}

.mission-vision-item .icon-box{
	position: relative;
	margin-right: 30px;
	z-index: 1;
}

.mission-vision-item .icon-box img{
	width: 100%;
	max-width: 80px;
	transition: all 0.4s ease-in-out;
}

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

.mission-vision-content{
	position: relative;
	width: calc(100% - 110px);
	z-index: 1;
}

.mission-vision-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 10px;
	transition: all 0.4s ease-in-out;
}

.mission-vision-content p{
	margin: 0;
	transition: all 0.4s ease-in-out;
}

.mission-vision-item:hover .mission-vision-content h3,
.mission-vision-item:hover .mission-vision-content p{
	color: var(--white-color);
}

.our-approach-image figure{
	display: block;
	border-radius: 30px;
}

.our-approach-image img{
	width: 100%;
	aspect-ratio: 1 / 0.863;
	object-fit: cover;
	border-radius: 30px;
}

.what-we-do{
	padding: 100px 0;
}

.what-we-do-image{
	position: relative;
	padding: 0 80px 117px 0;
	margin-right: 30px;
}

.what-we-do-img-1 figure,
.what-we-do-img-2 figure{
	display: block;
	border-radius: 30px;
}

.what-we-do-img-1 img,
.what-we-do-img-2 img{
	width: 100%;
	object-fit: cover;	
	border-radius: 30px;
}

.what-we-do-img-1{
	position: relative;
}

.what-we-do-img-1::before{
	content: '';
    display: block;
    position: absolute;
    top: 20px;
    right: auto;
    bottom: auto;
    left: 20px;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.what-we-do-img-1 img{
	aspect-ratio: 1 / 1.01;
}

.what-we-do-img-2{
	position: absolute;
	max-width: 270px;
	right: 0;
	bottom: 0;
	z-index: 1;
}

.what-we-do-img-2 img{
	aspect-ratio: 1 / 0.68;
}

.company-experience-box.what-we-do-circle{
	position: absolute;
	top: 170px;
	right: 0;
	height: 160px;
	width: 160px;
	border-radius: 50%;
	padding: 15px;
	z-index: 1;
}

.company-experience-box.what-we-do-circle h2{
	color: var(--white-color);
	font-size: 40px;
	font-weight: 700;
	margin-bottom: 10px;
}

.company-experience-box.what-we-do-circle p{
	color: var(--white-color);
	text-transform: capitalize;
	line-height: 1.4em;
	margin: 0;
}

.what-we-do-body{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.what-we-do-body ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.what-we-do-body ul li{
	background-image: url(../images/icon-check.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    margin-bottom: 20px;
    padding-left: 35px;
}

.what-we-do-body ul li:last-child{
	margin-bottom: 0;
}

.what-we-list{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

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

.what-we-item .icon-box{
	margin-right: 20px;
}

.what-we-item .icon-box img{
	width: 100%;
	max-width: 50px;
}

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

.what-we-item-content h3{
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
}

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

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

.work-step-item{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.work-step-item::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(30px, 55px);
    border: 1px dashed var(--accent-secondary-color);
    width: 1px;
    height: 100%;
    z-index: -1;
}

.work-step-item:last-child:before{
	display: none;
}

.work-step-item:last-child{
	margin-bottom: 0px;
}

.work-step-item .work-step-no{
	height: 60px;
	width: 60px;
	background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
    background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	transition: all 0.4s ease-in-out;
}

.work-step-item:hover .work-step-no{
	background-position: right center;
}

.work-step-no h3{
	color: var(--white-color);
	font-size: 24px;
	font-weight: 700;
}

.work-step-content{
	width: calc(100% - 80px);
}

.work-step-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 15px;
}

.work-step-content p{
	margin: 0;
}

.how-it-work-image{
	position: relative;
	padding-left: 80px;
}

.how-it-work-img-1 figure,
.how-it-work-img-2 figure{
	display: block;
}

.how-it-work-img-1 img,
.how-it-work-img-2 img{
	width: 100%;
	object-fit: cover;
}

.how-it-work-img-1 figure{
	border-radius: 30px;
}

.how-it-work-img-1 img{
	aspect-ratio: 1 / 1.16;
}

.how-it-work-img-2{
	position: absolute;
	max-width: 306px;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	border: 10px solid var(--white-color);
	border-radius: 30px;
	overflow: hidden;
	z-index: 1;
}

.how-it-work-img-2 img{
	aspect-ratio: 1 / 1.02;	
}

.our-benefits{
	background-color: var(--secondary-color);
}

.our-benefits .container-fluid{
	padding: 0;
}

.our-benefit-image{
	position: relative;
	height: 100%;
	padding-right: 85px;
	margin-right: 80px;
}

.benefit-img-1,
.benefit-img-1 figure,
.benefit-img-1 img{
	height: 100%;
}

.benefit-img-1 img{
	width: 100%;
	aspect-ratio: 1 / 1.01;
	object-fit: cover;
}

.benefit-img-2{
	position: absolute;
	max-width: 354px;
	right: -30px;
	bottom: 40px;
	border: 10px solid var(--white-color);
	border-radius: 30px;
	overflow: hidden;
	z-index: 1;
}

.benefit-img-2 figure{
	display: block;
}

.benefit-img-2 img{
	width: 100%;
    aspect-ratio: 1 / 1.21;
	object-fit: cover;
}

.contact-us-circle{
	position: absolute;
	top: 60px;
	right: 0;
	z-index: 1;
}

.contact-us-circle img{
	width: 100%;
	max-width: 180px;
	animation: infiniterotate 20s infinite linear;
}

.our-benefit-content{
	padding: 100px 0;
	padding-right: calc(((100vw - 1300px) / 2) + 5px);
}

.our-benefit-body{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 40px;
}

.benefit-body-item{
	width: calc(50% - 15px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: var(--white-color);
	border-radius: 15px;
	padding: 15px 20px;
}

.benefit-body-item .icon-box{
	height: 60px;
    width: 60px;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    transition: all 0.4s ease-in-out;
}

.benefit-body-item:hover .icon-box{
	background-position: right center;
}

.benefit-body-item .icon-box img{
	width: 100%;
	max-width: 30px;
}

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

.benefit-body-item-content h3{
	font-size: 20px;
	line-height: 1.4em;
	text-transform: capitalize;
}

.our-benefit-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
}

.benefit-footer-list{
	width: calc(60% - 15px);
}

.benefit-footer-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.benefit-footer-list ul li{
	background-image: url(../images/icon-check.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    margin-bottom: 20px;
    padding-left: 35px;
}

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

.benefit-footer-btn{
	width: calc(40% - 15px);
}

/************************************/
/************************************/
/*** 	  Service Flip Card css	  ***/
/************************************/

.service-flip-wrap{
	perspective: 1200px;
	height: 320px;
	margin-bottom: 30px;
	cursor: pointer;
}

.service-flip-inner{
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.7s ease-in-out;
	transform-style: preserve-3d;
}

.service-flip-wrap:hover .service-flip-inner{
	transform: rotateY(180deg);
}

.service-flip-front,
.service-flip-back{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	padding: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.service-flip-front{
	background: linear-gradient(to top, #53b6d4 0%, #ffffff 100%);
	border: none;
}

.service-flip-front .service-flip-icon{
	margin-bottom: 25px;
}

.service-flip-front .service-flip-icon img{
	width: 70px;
	height: 70px;
	object-fit: contain;
}

.service-flip-front h3{
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	margin: 0;
}

.service-flip-back{
	background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
	transform: rotateY(180deg);
	gap: 20px;
}

.service-flip-back p{
	color: var(--white-color);
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
}

.service-flip-back .btn-default{
	background: var(--white-color);
	color: var(--accent-color);
	border-color: var(--white-color);
	margin-top: 5px;
}

.service-flip-back .btn-default:hover{
	background: transparent;
	color: var(--white-color);
}

/*** 	 19. Services Page css	  ***/
/************************************/

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

.page-services .service-item{
	box-shadow: 0px 0px 100px 2px #0000000D;
}

/************************************/
/*** 	20. Service Single css	  ***/
/************************************/

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

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

.page-catagery-list{
	background-color: var(--secondary-color);
    border-radius: 30px;
	padding: 30px;
    margin-bottom: 60px;
	overflow: hidden;
}

.page-catagery-list h3{
    font-size: 20px;
    text-transform: capitalize;
	margin-bottom: 30px;
}

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

.page-catagery-list ul li{
    margin-bottom: 20px;
}

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

.page-catagery-list ul li a{
	position: relative;
    display: block;
	line-height: 1.5em;
    text-transform: capitalize;
    color: var(--text-color);
	background-color: var(--white-color);
	border-radius: 10px;
	padding: 15px 50px 15px 15px;
	overflow: hidden;
    transition: all 0.4s ease-in-out;
	z-index: 1;
}

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

.page-catagery-list ul li a::before{
    font-family: 'FontAwesome';
    content: '\f0a9';
    position: absolute;
	font-size: 24px;
	color: var(--accent-color);
    top: 50%;
    right: 15px;
    width: 24px;
    height: 24px;
	transform: translateY(-50%);
    transition: all 0.4s ease-in-out;
}

.page-catagery-list ul li:hover a::before{
	color: var(--white-color);
}

.page-catagery-list ul li a::after{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.page-catagery-list ul li:hover a::after{
	top: 0;
	height: 100%;
}

.sidebar-cta-box{
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
	padding: 40px;
}

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

.sidebar-cta-logo img{
	width: 100%;
	max-width: 223px;
}

.sidebar-cta-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.sidebar-cta-contact{
	position: relative;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--dark-divider-color);
	margin-top: 30px;
	padding-top: 30px;
	z-index: 1;
}

.sidebar-cta-contact .icon-box{
	position: relative;
	background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	border-radius: 100%;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 20px 0 10px;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact .icon-box:hover{
	background-position: right center;
}

.sidebar-cta-contact .icon-box:before{
	content: '';
	position: absolute;
	top: -33%;
	left: -33%;
	width: 160%;
	height: 160%;
	border: 35px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
}

.sidebar-cta-contact .icon-box:after{
	content: '';
	position: absolute;
	top: -33%;
	left: -33%;
	width: 160%;
	height: 160%;
	border: 35px solid var(--divider-color);
	border-radius: 50%;
	transform: scale(0.6);
	z-index: -1;
	animation: border-zooming 1.2s infinite linear;
	animation-delay: .3s;
}

.sidebar-cta-contact .icon-box img{
	width: 100%;
	max-width: 24px;
}

.sidebar-cta-contact-content{
	width: calc(100% - 72px);
}

.sidebar-cta-contact-content h3{
	font-size: 20px;
	color: var(--white-color);
	margin-bottom: 10px;
}

.sidebar-cta-contact-content h3 a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact-content h3 a:hover{
	color: var(--primary-color);
	text-decoration-color: var(--primary-color);
}

.sidebar-cta-contact-content p{
	color: var(--white-color);
	opacity: 80%;
	margin-bottom: 0;
}

.page-single-slider{
    margin-bottom: 0px;
}

.page-single-slider .swiper-wrapper{
	cursor: none;
}

.page-single-slider .swiper-slide figure{
	display: block;
	overflow: hidden;
	border-radius: 30px;
}

.page-single-slider .swiper-slide figure::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(180deg, rgba(1, 5, 53, 0) 80.06%, var(--primary-color) 100%);
	width: 100%;
	height: 100%;
}

.page-single-slider .swiper-slide img{
	width: 100%;
    aspect-ratio: 1 / 0.66;
    object-fit: cover;
	border-radius: 30px;
}

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

.page-single-slider .page-single-pagination .swiper-pagination-bullet{
	position: relative;
    height: 12px;
    width: 12px;
    background: var(--white-color);
    opacity: 1;
    margin: 0 8px;
}

.page-single-slider .page-single-pagination .swiper-pagination-bullet:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--white-color);
    height: 0;
    width: 0;
    border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.page-single-slider .page-single-pagination .swiper-pagination-bullet-active:before{
	height: 24px;
	width: 24px;
}

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

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

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

.service-entry h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 20px;
}

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

.service-entry ul li{
    background: url(../images/icon-check.svg) no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
	text-transform: capitalize;
    margin-bottom: 20px;
    padding-left: 30px;
}

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

.service-why-choose-box,
.service-entry-feature-box{
	margin-top: 60px;
}

.our-benefit-body.service-why-choose-list{
	margin: 40px 0;
}

.our-benefit-body.service-why-choose-list .benefit-body-item{
	background: var(--secondary-color);
	padding: 20px;
}

.service-feature-list{
	display: flex;
	gap: 30px 50px;
	flex-wrap: wrap;
	margin: 40px 0;
}

.service-feature-item{
	position: relative;
	width: calc(33.33% - 33.33px);
}

.service-feature-item::before{
	content: '';
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    background-color: var(--secondary-color);
    height: 85%;
    width: 1px;
}

.service-feature-item:nth-child(3n + 3):before,
.service-feature-item:last-child:before{
	display: none;
}

.service-feature-box{
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.service-feature-box .icon-box{
	margin-right: 15px;
}

.service-feature-box .icon-box img{
	width: 100%;
	max-width: 60px;
}

.service-feature-title{
	width: calc(100% - 75px);
}

.service-feature-title h3{
	font-size: 20px;
	text-transform: capitalize;
}

.service-feature-content p{
	margin-bottom: 0;
}

.service-entry-image-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	align-items: center;
}

.service-entry-image{
	width: calc(52% - 15px);
}

.service-entry-list-content{
	width: calc(48% - 15px);
}

.service-entry-image figure{
	display: block;
	border-radius: 30px;
}

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

/************************************/
/*** 	 21. Blog Archive css	  ***/
/************************************/

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

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

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

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

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

/************************************/
/*** 	 22. Blog Single css	  ***/
/************************************/

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

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

.post-image figure{
	display: block;	
	border-radius: 30px;
	overflow: hidden;
}

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

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

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

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

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

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6{
	font-weight: 700;
	line-height: 1.2em;
	margin: 0 0 0.435em;
}

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

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

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

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

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

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

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

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

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

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

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

.post-entry ol li,
.post-entry ul li{
    position: relative;
	font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

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

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

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

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

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

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

.tag-links{
    font-size: 20px;
	font-weight: 600;
    text-transform: capitalize;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.post-tags .tag-links a{
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1em;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    color: var(--white-color);
	border-radius: 10px;
    padding: 12px 20px;
	transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover{
	background-position: right center;
}

.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: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    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-position: right center;
}

.post-social-sharing ul li a i{
    font-size: 18px;
    color: inherit;
}

/************************************/
/*** 	 23. Projects Page css	  ***/
/************************************/

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

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

.page-projects .project-item .project-image a,
.page-projects .project-item .project-image figure{
	border-radius: 30px;
	cursor: none;
}

.page-projects .project-item .project-image figure::before{
	background: linear-gradient(180deg, rgba(84, 187, 218, 0) 58.63%, var(--accent-color) 110.88%);
	height: 100%;
}

.page-projects .project-item .project-image img{
	aspect-ratio: 1 / 0.99;
}

.page-projects .project-item .project-content{
	transform: translateY(0px);
	opacity: 1;
    visibility: visible;
}

/************************************/
/*** 	 24. Project single css	  ***/
/************************************/

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

.project-detail-list{
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
	margin-bottom: 60px;
}

.project-deatil-title{
	margin-bottom: 30px;
}

.project-deatil-title h3{
	font-size: 20px;
}

.project-detail-item{
	display: flex;
	align-items: center;
	background: var(--white-color);
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 25px;
}

.project-detail-item:last-child{
	margin-bottom: 0;
}

.project-detail-item .icon-box{
	height: 60px;
	width: 60px;
	background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
}

.project-detail-item:hover .icon-box{
	background-position: right center;
}

.project-detail-item .icon-box img{
	width: 100%;
	max-width: 30px;
}

.project-detail-content{
	width: calc(100% - 80px);
}

.project-detail-content h3{
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 5px;
}

.project-detail-content p{
	text-transform: capitalize;
	margin-bottom: 0;
}

.project-entry{
	margin-bottom: 60px;
}

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

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

.project-entry h2{
	font-size: 46px;
	font-weight: 700;
	margin-bottom: 20px;
}

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

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

.project-entry ul li{
	width: 100%;
    background: url(../images/icon-check.svg) no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    padding-left: 30px;
}

.project-challenge-box,
.project-scope-box{
	margin-top: 60px;
}

.project-video-list-box{
	display: flex;
	flex-wrap: wrap;
	gap: 0 30px;
	align-items: center;
	margin-top: 40px;
}

.project-video-content,
.project-video-box{
	width: calc(50% - 15px);
}

.project-video-image figure{
	display: block;
	border-radius: 30px;
}

.project-video-image figure::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--primary-color);
	opacity: 30%;
	z-index: 0;
}

.project-video-image img{
	width: 100%;
	aspect-ratio: 1 / 0.856;
	object-fit: cover;
	border-radius: 30px;
}

.project-video-box{
	position: relative;
}

.project-video-box .testimonial-video-button{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.project-scope-box ul li{
	width: calc(50% - 15px);
}

.project-entry-images{
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	margin: 40px 0;
}

.project-entry-image{
	width: calc(50% - 15px);
}

.project-entry-image figure{
	display: block;
	border-radius: 30px;
}

.project-entry-image img{
	width: 100%;
	aspect-ratio: 1 / 0.7;
	object-fit: cover;
	border-radius: 30px;
}

.what-we-list.project-scope-list .what-we-item{
	align-items: start;
}

.what-we-list.project-scope-list .what-we-item .icon-box img{
	max-width: 60px;
}

.what-we-list.project-scope-list .what-we-item .what-we-item-content h3{
	margin-bottom: 10px;
}

/************************************/
/*** 	  25. Team Page css 	  ***/
/************************************/

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

/************************************/
/*** 	 26. Team Single css	  ***/
/************************************/

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

.team-singe-image{
	margin-bottom: 60px;
}

.team-singe-image figure{
	display: block;
	border-radius: 30px;
}

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

.team-detail-box{
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 30px;
}

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

.team-detail-content h3{
	font-size: 20px;
	margin-bottom: 20px;
}

.team-detail-content p{
	margin-bottom: 0;
}

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

.team-detail-list li{
	position: relative;
	font-size: 20px;
	font-weight: 600;
	color: var(--primary-color);
	background: var(--white-color);
	display: flex;
	align-items: center;
	border-radius: 10px;
	margin-bottom: 25px;
	padding: 15px;
	overflow: hidden;
	transition: all 0.4s ease-in-out;
	z-index: 0;
}

.team-detail-list li:last-child{
	margin-bottom: 0;
}

.team-detail-list li:hover{
	color: var(--white-color);
}

.team-detail-list ul li::before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.team-detail-list ul li:hover::before{
	top: 0;
	height: 100%;
}

.team-detail-list li a{
	width: 100%;
	color: inherit;
	display: flex;
	align-items: center;
}

.team-detail-list li img{
	width: 100%;
	max-width: 30px;
	margin-right: 20px;
	transition: all 0.4s ease-in-out;
}

.team-detail-list li:hover img{
	filter: brightness(0) invert(1);
}

.team-member-info .section-title p{
	margin: 0 0 5px;
}

.team-member-detail{
	border-bottom: 1px solid var(--divider-color);
	margin-bottom: 40px;
	padding-bottom: 40px;
}

.team-member-detail p{
	margin-bottom: 20px;
}

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

.member-social-list{
    display: flex;
    align-items: center;
    gap: 20px;
}

.member-social-list span{
    font-size: 20px;
    font-weight: 600;
	color: var(--primary-color);
}

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

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

.member-social-list ul li a{
    background: linear-gradient(90.15deg, var(--accent-color) 0, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

.member-social-list ul li a:hover{
	background-position: right center;
}

.member-social-list ul li a i{
    color: var(--white-color);
    font-size: 18px;
}

.team-skills-box,
.team-experience-box,
.team-single-form{
	margin-top: 60px;
}

.team-skills-list{
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.skills-progress-bar{
	width: calc(50% - 15px);
}

.skills-progress-bar .skill-data{
	display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.skills-progress-bar .skill-data .skill-title{
	text-transform: capitalize;
}

.skills-progress-bar .skill-data .skill-no{
	color: var(--primary-color);
}

.skills-progress-bar .skillbar .skill-progress{
	position: relative;
	width: 100%;
	height: 16px;
	background: var(--secondary-color);
	border-radius: 100px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 100px;
}

.team-single-list ul{
	display: flex;
	gap: 25px 30px;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

.team-single-list ul li{
	width: calc(50% - 15px);
    background: url(../images/icon-check.svg) no-repeat;
    background-position: top left;
    background-size: 24px auto;
    line-height: 1.5em;
    padding-left: 30px;
}

.member-contact-form .form-control{
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5em;
	color: var(--text-color);
	background: transparent;
	border: 1px solid var(--divider-color);
	border-radius: 10px;
	padding: 17px 20px;
	box-shadow: none;
	outline: none;
}

.member-contact-form .form-control::placeholder{
	color: var(--text-color);
}

/************************************/
/*** 	 27. Pricing Page css	  ***/
/************************************/

.page-pricing{
	padding: 100px 0;
}

/************************************/
/*** 	28. Testimonial Page css  ***/
/************************************/

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

.page-testimonials .testimonial-item{
	background-color: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 30px;
	padding: 40px;
	box-shadow: 0px 0px 100px 2px #0000000D;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

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

.page-testimonials .testimonial-content p{
	color: var(--text-color);
	font-size: 16px;
}

.page-testimonials .testimonial-body .author-content h3{
	color: var(--primary-color);
}

.page-testimonials .testimonial-body .author-content p{
	color: var(--text-color);
}

/************************************/
/*** 	 29. Image Gallery css	  ***/
/************************************/

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

.page-gallery-box .photo-gallery{
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a{
	cursor: none;
}

.page-gallery-box .photo-gallery figure{
	display: block;
	border-radius: 20px;
}

.page-gallery-box .photo-gallery img{
    width: 100%;
    aspect-ratio: 1 / 0.81;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	30. Video Gallery css     ***/
/************************************/

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

.video-gallery-image{
	overflow: hidden;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.video-gallery-image a{
	position: relative;
	display: block;
	cursor: none;
}

.video-gallery-image a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-color);
	border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before{
    opacity: 50%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after{
    content: '\f04b';
	font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
	font-size: 20px;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	color: var(--white-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
	display: flex;
	align-items: center;
	justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after{
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img{
	width: 100%;
    aspect-ratio: 1 / 0.81;
	object-fit: cover;
	border-radius: 20px;
}

/************************************/
/*** 	  31. FAQs Page css 	  ***/
/************************************/

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

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

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

/************************************/
/*** 	32. Contact Us Page css   ***/
/************************************/

.page-contact-us{
	padding: 100px 0;
}

.page-contact-us .section-row .section-title{
	max-width: 600px;
}

.page-contact-box{
	position: relative;
	padding: 0 120px 120px 120px;
	background: url('../images/contact-box-bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	border: 1px solid var(--divider-color);
	box-shadow: 0px 0px 100px 2px #0000000D;
	border-radius: 30px;
	margin-top: 150px;
}

.page-contact-box:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--primary-color);
	opacity: 80%;
	border-radius: 30px;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.contact-info-list{
	position: relative;
	background: linear-gradient(90.15deg, var(--accent-color) 1.15%, var(--accent-secondary-color) 98.84%);
	border-radius: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 30px 100px;
	padding: 60px;
	margin: -150px 0 80px 0;
	z-index: 1;
}

.contact-info-item{
	position: relative;
	width: calc(33.33% - 66.66px);
}

.contact-info-item:before{
	content: '';
    position: absolute;
    top: 50%;
    right: -50px;
    bottom: 0;
    left: auto;
    transform: translateY(-50%);
    background: var(--dark-divider-color);
    width: 1px;
    height: 85%;
}

.contact-info-item:last-child::before,
.contact-info-item:nth-child(3n + 3)::before{
	display: none;
}

.contact-info-item .icon-box{
	position: relative;
	height: 60px;
	width: 60px;
	background: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 30px;
}

.contact-info-item .icon-box::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: var(--primary-color);
	border-radius: 50%;
	transform: scale(0);
	transition: all 0.4s ease-in-out;
}

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

.contact-info-item .icon-box img{
	position: relative;
	width: 100%;
	max-width: 30px;
	transition: all 0.4s ease-in-out;
	z-index: 1;
}

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

.contact-info-content h3{
	color: var(--white-color);
	font-size: 20px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.contact-info-content p{
	color: var(--white-color);
	opacity: 80%;
	margin: 0;
}

.contact-info-content p a{
	color: inherit;
	transition: all 0.4s ease-in-out;
}

.contact-info-content p a:hover{
	color: var(--primary-color);
}

.contact-us-form{
	position: relative;
	text-align: center;
	z-index: 1;
}

.member-contact-form.contact-form .form-control{
	background: var(--white-color);
}

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

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

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

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

/************************************/
/*** 	  33. 404 Page css  	  ***/
/************************************/

.error-page{
	padding: 100px 0;
}

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

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

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

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

/************************************/
/***      34. Responsive css      ***/
/************************************/

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

	.btn-default{
		font-size: 16px;
		padding: 15px 50px 15px 20px;
    }

	.btn-default::before{
		transform: translate(-20px, -50%);
		font-size: 18px;
	}

	.btn-default:hover::before{
		transform: translate(-17px, -50%);
	}

	.topbar-info-text p{
		font-size: 14px;
	}

	.topbar-contact-info{
		margin-right: 15px;
		padding-right: 15px;
	}

	.topbar-contact-info ul li{
		font-size: 14px;
		margin-right: 15px;
	}

	.topbar-contact-info ul li::before{
		right: -12px;
		font-size: 14px;
	}

	.topbar-social-links ul li{
		margin-right: 10px;
	}

	.topbar-social-links ul li a i{
		font-size: 16px;
		margin-right: 5px;
	}

	.navbar{
		padding: 15px 0;
	}

	.main-menu ul li.highlighted-menu{
		display: block;
	}
	
	.slicknav_nav li,
	.slicknav_nav ul{
        display: block;
    }

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

	.header-btn{
		display: none;
	}

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

	.section-row .section-title{
		max-width: 100%;
	}

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

	.section-title h3{
		padding-left: 25px;
		margin-bottom: 10px;
	}

	.section-title h3::before{
		width: 18px;
		height: 18px;
	}

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

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

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

	.section-title-content{
		margin-left: 0;
		margin-top: 15px;
	}

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

	.hero{
		padding: 100px 0;
	}

	.hero.hero-video{
		padding: 120px 0;
	}

	.hero.hero-slider-layout .hero-slide{
		padding: 120px 0;
	}
	
	.hero.hero-slider-layout .hero-pagination{
		bottom: 40px;
		padding-left: 15px;
	}

	.hero-content{
		max-width: 100%;
	}

	.video-play-button a{
		height: 45px;
		width: 45px;
	}

	.hero-content-footer{
		margin-top: 40px;
	}

	.hero-list ul li{
		background-size: 22px auto;
		background-position: left top 2px;
		margin-bottom: 15px;
		padding: 0 0 15px 30px;
	}

	.client-image{
		width: 50px;
		height: 50px;
	}

	.client-image img{
		max-width: 50px;
	}
	
	.client-image.client-counter h3{
		font-size: 20px;
	}

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

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

	.about-img-1 figure,
	.about-img-2 figure,
	.about-img-3 figure,
	.about-img-1 img,
	.about-img-2 img,
	.about-img-3 img{
		border-radius: 20px;
	}

	.about-img-1 img{
        aspect-ratio: 1 / 1.58;
    }

	.about-img-2 img,
	.about-img-3 img{
		aspect-ratio: 1 / 0.92;
	}

	.get-free-security-circle img{
		max-width: 140px;
	}

	.about-us-content{
		margin-left: 0px;
	}

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

	.about-footer-list ul li{
		background-size: 20px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 15px;
	}

	.about-contact-btn{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.about-contact-btn .icon-box{
		height: 40px;
		width: 40px;
	}

	.about-contact-btn .icon-box img{
		max-width: 22px;
	}

	.about-footer-btn-content{
		width: calc(100% - 50px);
	}

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

	.service-item{
		border-radius: 20px;
		padding: 30px;
	}

	.service-item .icon-box{
		margin-bottom: 60px;
	}

	.service-item .icon-box img{
		max-width: 60px;
	}

	.our-feature{
		padding: 50px 0;
	}

	.our-feature-images{
		margin-bottom: 30px;
	}

	.feature-image figure{
		border-radius: 20px;
	}

	.feature-image img{
		aspect-ratio: 1 / 0.48;
		border-radius: 20px;
	}

	.company-experience-info .feature-image img{
		aspect-ratio: 1 / 0.54;
	}

	.company-experience-box{
		border-radius: 20px;
		padding: 25px 20px;
	}

	.company-experience-content{
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.company-experience-content h2{
		font-size: 45px;
		margin-bottom: 5px;
	}

	.our-feature-content{
		margin: 0;
	}

	.ferature-list-item{
		margin-bottom: 30px;
	}

	.ferature-list-item .icon-box{
		height: 50px;
    	width: 50px;
		margin-right: 15px;
	}

	.ferature-list-item .icon-box img{
		max-width: 25px;
	}

	.ferature-list-content{
		width: calc(100% - 65px);
	}

	.our-projects{
		padding: 50px 0;
	}

	.projects-list{
		border-radius: 20px;
	}

	.project-item{
		width: 50%;
	}

	.project-item:nth-child(-4n + 4){
		border-radius: 0;
	}

	.project-item:nth-child(-2n + 2){
		border-radius: 0 20px 0 0;
	}

	.project-item:last-child{
		border-radius: 0 0 20px 0;
	}

	.project-image img{
		aspect-ratio: 1 / 1.05;
	}

	.project-content p{
		margin-bottom: 15px;
	}

	.section-footer-text{
		max-width: 100%;
		margin: 30px auto 0;
	}

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

	.why-choose-image{
		margin-right: 0;
		margin-bottom: 30px;
	}

	.why-choose-image figure,
	.why-choose-image img{
		border-radius: 20px;
	}

	.why-choose-image img{
		aspect-ratio: 1 / 0.75;
	}

	.why-choose-item{
		padding: 20px 25px;
		border-radius: 20px;
		margin-bottom: 30px;
	}

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

	.why-choose-item .icon-box img{
		max-width: 60px;
	}

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

	.why-choose-item-content h3{
		margin-bottom: 5px;
	}

	.why-choose-counter-list{
		margin-top: 40px;
		padding-top: 40px;
	}

	.why-choose-counter-item .icon-box img{
		max-width: 50px;
	}

	.why-choose-counter-content h3{
		font-size: 36px;
	}

	.why-choose-counter-content p{
		font-size: 16px;
	}

	.our-security{
		padding: 50px 0;
	}

	.security-content-box{
		margin-bottom: 30px;
	}

	.security-content-item{
		margin-bottom: 30px;
	}

	.security-content-item h3{
		margin-bottom: 10px;
	}

	.our-security-image-content{
		display: flex;
		flex-direction: column;
	}

	.security-image{
		margin: 30px 0 0 0;
	}

	.security-image figure{
		border-radius: 20px;
	}

	.security-image img{
		aspect-ratio: 1 / 0.45;
		border-radius: 20px;
	}

	.security-list{
		margin-top: 40px;
    	padding-top: 40px;
	}

	.security-list-item{
		width: calc(50% - 15px);
		background-size: 20px auto;
		background-position: top 2px left;
		padding-left: 30px;
	}

	.security-list-item h3{
		margin-bottom: 10px;
	}

	.our-pricing{
		padding: 50px 0;
	}

	.pricing-item{
		border-radius: 20px;
	}

	.pricing-header{
		padding: 20px;
	}

	.pricing-header h3{
		margin-bottom: 10px;
	}
	
	.pricing-header h2{
		font-size: 36px;
		margin-bottom: 10px;
	}

	.pricing-header h2 sup{
		font-size: 18px;
		top: -7px;
	}

	.pricing-header .icon-box{
		top: -10px;
		right: -25px;
	}

	.pricing-header .icon-box img{
		max-width: 80px;
	}

	.pricing-body{
		padding: 20px;
	}

	.pricing-list{
		margin-bottom: 30px;
	}

	.pricing-list ul li{
		background-size: 20px auto;
		background-position: top 2px left;
		margin-bottom: 15px;
		padding-left: 25px;
	}

	.pricing-benefit-list{
		margin-top: 10px;
	}

	.pricing-benefit-list ul{
		gap: 15px 30px;
	}

	.pricing-benefit-list ul li img{
		max-width: 18px;
		margin-right: 10px;
	}

	.our-testimonials{
		padding: 50px 0;
	}

	.testimonial-box,
	.testimonial-box::before{
		border-radius: 20px;
	}

	.testimonial-box{
		padding: 60px 30px 40px;
	}

	.testimonial-video-button,
	.testimonial-slider-box{
		width: 100%;
	}

	.testimonial-video-button a{
		width: 60px;
		height: 60px;
	}

	.testimonial-video-button a:before,
	.testimonial-video-button a:after{
		top: -33%;
		left: -33%;
	}

	.testimonial-video-button a i{
		font-size: 26px;
	}

	.testimonial-slider{
		margin-top: 0;
		padding: 40px;
		border-radius: 20px;
	}

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

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

	.testimonial-content p{
		font-size: 16px;
		margin-bottom: 15px;
	}

	.testimonial-contact-info{
		margin-top: 30px;
		padding: 0;
	}

	.testimonial-contact-box .icon-box{
		height: 50px;
		width: 50px;
		margin-right: 15px;
	}

	.testimonial-contact-box .icon-box img{
		max-width: 26px;
	}

	.testimonial-contact-content{
		width: calc(100% - 65px);
	}

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

	.team-image:before,
	.team-image a,
	.team-image a figure,
	.team-image figure:before{
		border-radius: 20px;
	}

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

	.team-social-icon{
		left: 20px;
		right: 20px;
	}

	.team-content{
		right: 20px;
		bottom: 20px;
		left: 20px;
	}

	.cta-box-section{
		padding: 25px 0 50px;
	}

	.cta-box{
		border-radius: 20px;
		padding: 30px;
	}

	.cta-box-content,
	.cta-box-image{
		width: 100%;
	}

	.cta-contact-item .icon-box{
		margin-right: 15px;
	}

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

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

	.cta-contact-info:before{
		width: 110px;
		height: 80px;
	}

	.cta-box-image figure{
		border-radius: 20px;
	}

	.cta-box-image img{
        aspect-ratio: 1 / 0.55;
        border-radius: 20px;
    }

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

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

	.faq-image figure,
	.faq-image img{
		border-radius: 20px;
	}

	.faq-accordion .accordion-item::before,
	.faq-accordion .accordion-item{
		border-radius: 10px;
	}

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

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

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

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

	.post-featured-image a{
		border-radius: 20px;
	}

	.post-featured-image img{
		aspect-ratio: 1 / 0.85;
	}

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

	.post-item-btn a{
		height: 36px;
		width: 36px;
	}

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

	.footer-header{
		margin-bottom: 40px;
		padding-bottom: 40px;
	}

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

	.footer-newsletter-form{
		margin: 0 0 30px 0;
	}

	.footer-quick-links,
	.footer-links{
		margin: 0 0 30px 0;
	}

	.footer-links h3{
		margin-bottom: 15px;
	}

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

	.footer-newsletter-form .form-group .form-control{
		width: calc(100% - 60px);
		padding: 10px 20px;
	}

	.footer-newsletter-form .form-group .newsletter-btn{
		width: 50px;
		height: 50px;
	}

	.footer-newsletter-form .form-group .newsletter-btn i{
		font-size: 24px;
	}

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

	.page-header{
		padding: 80px 0;
	}
	
	.page-header-box h1{
		font-size: 50px;
	}

	.our-approach{
		padding: 50px 0;
	}

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

	.mission-vision-item{
		padding: 20px;
		border-radius: 20px;
	}

	.mission-vision-item .icon-box{
		margin-right: 20px;
	}

	.mission-vision-item .icon-box img{
		max-width: 60px;
	}

	.mission-vision-content{
		width: calc(100% - 80px);
	}

	.mission-vision-content h3{
		margin-bottom: 5px;
	}

	.our-approach-image figure,
	.our-approach-image img{
		border-radius: 20px;
	}

	.our-approach-image img{
		aspect-ratio: 1 / 0.7;
	}

	.what-we-do{
		padding: 50px 0;
	}

	.what-we-do-image{
		max-width: 80%;
		margin: 0 auto;
		padding: 0 80px 90px 0;
		margin-bottom: 30px;
	}

	.what-we-do-img-1 figure,
	.what-we-do-img-2 figure,
	.what-we-do-img-1 img,
	.what-we-do-img-2 img{
		border-radius: 20px;
	}

	.what-we-do-img-1::before{
		border-radius: 20px;
	}

	.company-experience-box.what-we-do-circle{
		width: 140px;
		height: 140px;
		top: 100px;
	}

	.company-experience-box.what-we-do-circle h2{
		font-size: 32px;
	}

	.company-experience-box.what-we-do-circle p{
		font-size: 14px;
	}

	.what-we-do-body{
		margin-bottom: 30px;
		padding-bottom: 30px;
	}

	.what-we-list{
		gap: 20px;
	}

	.what-we-item{
		width: calc(50% - 10px);
	}

	.what-we-do-body ul li{
		background-size: 20px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 15px;
	}

	.what-we-item .icon-box{
		margin-right: 15px;
	}

	.what-we-item .icon-box img{
		max-width: 40px;
	}

	.what-we-item-content{
		width: calc(100% - 55px);
	}

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

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

	.work-step-item{
		margin-bottom: 30px;
	}

	.work-step-item .work-step-no{
		width: 50px;
		height: 50px;
		margin-right: 15px;
	}

	.work-step-no h3{
		font-size: 22px;
	}

	.work-step-item::before{
		transform: translate(25px, 45px);
	}

	.work-step-content{
		width: calc(100% - 65px);
	}

	.work-step-content h3{
		margin-bottom: 10px;
	}

	.how-it-work-img-1 img{
		aspect-ratio: 1 / 0.85;
	}

	.how-it-work-img-1 figure,
	.how-it-work-img-1 img,
	.how-it-work-img-2{
		border-radius: 20px;
	}

	.our-benefits{
		padding: 50px 0;
	}

	.our-benefit-image{
		height: auto;
		margin: 0 15px;
		margin-bottom: 30px;
	}

	.benefit-img-1,
	.benefit-img-1 figure,
	.benefit-img-1 img{
		height: auto;
		border-radius: 20px;
	}
	
	.benefit-img-1 img{
		aspect-ratio: 1 / 0.98;
	}

	.benefit-img-2{
		max-width: 280px;
		border-radius: 20px;
		right: 0;
	}

	.contact-us-circle{
		top: 40px;
		right: 15px;
	}

	.contact-us-circle img{
		max-width: 140px;
	}

	.our-benefit-content{
		padding: 0 15px;
	}

	.our-benefit-body{
		gap: 20px;
		margin-bottom: 30px;
	}

	.benefit-body-item{
		width: calc(50% - 10px);
		padding: 12px 15px;
	}

	.benefit-body-item .icon-box{
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.benefit-body-item .icon-box img{
		max-width: 25px;
	}

	.benefit-body-item-content{
		width: calc(100% - 60px);
	}

	.benefit-footer-btn,
	.benefit-footer-list{
		width: 100%;
	}

	.benefit-footer-list ul li{
		background-size: 20px auto;
		background-position: left top 2px;
		padding-left: 25px;
		margin-bottom: 10px;
	}

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

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

	.page-single-sidebar{
		position: initial;
		margin: 0 0 30px 0;
	}

	.page-catagery-list{
		border-radius: 20px;
		margin-bottom: 30px;
	}

	.page-catagery-list h3{
		margin-bottom: 20px;
	}

	.page-catagery-list ul li a{
		padding: 12px 40px 12px 15px;
	}

	.page-catagery-list ul li a::before{
		font-size: 22px;
		width: 22px;
		height: 22px;
	}

	.sidebar-cta-box{
		border-radius: 20px;
		padding: 30px;
	}

	.sidebar-cta-logo{
		margin-bottom: 15px;
	}

	.sidebar-cta-logo img{
		max-width: 183px;
	}

	.sidebar-cta-contact{
		margin-top: 20px;
		padding-top: 20px;
	}

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

	.page-single-slider .swiper-slide figure{
		border-radius: 20px;
	}

	.page-single-slider .swiper-slide img{
		aspect-ratio: 1 / 0.57;
		border-radius: 20px;
	}

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

	.service-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

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

	.service-entry ul li{
		background-size: 20px auto;
		background-position: top 2px left;
        margin-bottom: 15px;
        padding-left: 25px;
	}

	.service-why-choose-box,
	.service-entry-feature-box{
		margin-top: 30px;
	}

	.our-benefit-body.service-why-choose-list{
		margin: 30px 0;
	}

	.our-benefit-body.service-why-choose-list .benefit-body-item{
		padding: 15px;
	}

	.service-feature-list{
		gap: 30px;
		margin: 30px 0;
	}

	.service-feature-item{
		width: calc(33.33% - 20px);
	}

	.service-feature-item::before{
		right: -15px;
	}

	.service-feature-box .icon-box{
		margin-right: 10px;
	}

	.service-feature-box .icon-box img{
		max-width: 45px;
	}

	.service-feature-title{
		width: calc(100% - 55px);
	}

	.service-entry-image figure{
		border-radius: 20px;
	}

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

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

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

	.page-single-post{
		padding: 50px 0;
	}
	
	.post-image{
		margin-bottom: 20px;
	}
	
	.post-image figure,
	.post-image img{
		border-radius: 20px;
	}
	
	.post-entry h1,
	.post-entry h2,
	.post-entry h3,
	.post-entry h4,
	.post-entry h5,
	.post-entry h6{
		margin: 0 0 0.417em;
	}
	
	.post-entry h2{
		font-size: 36px;
	}
	
	.post-entry p{
		margin-bottom: 15px;
	}
	
	.post-entry ul li{
		font-size: 16px;
		margin-bottom: 10px;
	}
	
	.post-entry blockquote{
		background-position: 25px 25px;
		background-size: 50px;
		padding: 25px 25px 25px 85px;
		border-radius: 20px;
		margin-bottom: 20px;
	}
	
	.post-entry blockquote p{
		font-size: 18px;
	}
	
	.post-tags{
		margin-bottom: 20px;
	}
	
	.post-tags .tag-links a{
		padding: 12px 15px;
	}
	
	.post-social-sharing ul{
		text-align: left;
	}

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

	.page-projects .project-item .project-image a,
	.page-projects .project-item .project-image figure{
		border-radius: 20px;
	}

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

	.project-detail-list{
		border-radius: 20px;
		margin-bottom: 30px;
	}

	.project-deatil-title{
		margin-bottom: 20px;
	}

	.project-detail-item .icon-box{
		height: 50px;
		width: 50px;
		margin-right: 15px;
	}

	.project-detail-item .icon-box img{
		max-width: 25px;
	}

	.project-detail-content{
		width: calc(100% - 65px);
	}

	.project-entry{
		margin-bottom: 30px;
	}

	.project-entry h2{
		font-size: 36px;
		margin-bottom: 15px;
	}

	.project-entry p{
		margin-bottom: 15px;
	}

	.project-challenge-box,
	.project-scope-box{
		margin-top: 30px;
	}

	.project-entry h3{
		margin-bottom: 15px;
	}

	.project-entry ul{
		gap: 15px 20px;
	}

	.project-entry ul li{
		background-position: top 2px left;
		background-size: 20px auto;
		padding-left: 25px;
	}

	.project-video-list-box{
		margin-top: 30px;
	}

	.project-video-image figure,
	.project-video-image img{
		border-radius: 20px;
	}

	.project-scope-box ul li{
		width: calc(50% - 10px);
	}

	.project-entry-images{
		margin: 30px 0;
	}

	.project-entry-image figure{
		border-radius: 20px;
	}

	.project-entry-image img{
		aspect-ratio: 1 / 0.65;
		border-radius: 20px;
	}

	.what-we-list.project-scope-list .what-we-item .icon-box img{
		max-width: 50px;
	}

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

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

	.team-singe-image{
		margin-bottom: 30px;
	}

	.team-singe-image figure{
		border-radius: 20px;
	}

	.team-singe-image img{
		aspect-ratio: 1 / 0.8;
		border-radius: 20px;
	}

	.team-detail-box{
		border-radius: 20px;
		padding: 20px;
	}

	.team-detail-content{
		margin-bottom: 20px;
	}

	.team-detail-content h3{
		margin-bottom: 10px;
	}

	.team-detail-list li{
		margin-bottom: 20px;
		font-size: 18px;
		padding: 10px;
	}

	.team-detail-list li img{
		max-width: 26px;
		margin-right: 15px;
	}

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

	.team-member-detail p{
		margin-bottom: 15px;
	}

	.team-skills-box,
	.team-experience-box,
	.team-single-form{
		margin-top: 30px;
	}

	.team-single-list ul{
		gap: 20px;
	}

	.team-single-list ul li{
		width: calc(50% - 10px);
		background-size: 22px auto;
		padding-left: 25px;
	}

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

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

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

	.page-testimonials .testimonial-item{
		border-radius: 20px;
		padding: 30px;
	}

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

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

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

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

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

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

	.page-contact-us .section-row .section-title{
		max-width: 100%;
	}

	.page-contact-box{
		padding: 0 30px 60px 30px;
		margin-top: 90px;
		border-radius: 20px;
	}

	.page-contact-box:before{
		border-radius: 20px;
	}

	.contact-info-list{
		gap: 20px;
		border-radius: 20px;
		padding: 20px;
		margin: -90px 0 30px 0;
	}

	.contact-info-item{
		width: calc(33.33% - 13.33px);
	}

	.contact-info-item:before{
		right: -10px;
	}

	.contact-info-item .icon-box{
		width: 50px;
		height: 50px;
		margin-bottom: 20px;
	}

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

	.contact-info-content h3{
		margin-bottom: 10px;
	}

	.contact-info-content p{
		font-size: 14px;
	}

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

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

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

	.error-page-content .section-title{
		margin-bottom: 15px;
	}
}

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

	.topbar-info-text{
		display: none;
	}

	.topbar-links{
		justify-content: center;
	}

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

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

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

	.hero-content-body{
		gap: 20px;
		justify-content: space-between;
	}

	.about-us-image{
		gap: 20px;
    }
	
	.about-image-box{
		width: calc(50% - 10px);
	}

	.about-img-1{
		margin-top: 50px;
	}

	.about-img-2{
		margin-bottom: 20px;
	}

    .get-free-security-circle img{
        max-width: 100px;
    }

	.about-us-body{
		align-items: inherit;
		border-radius: 20px;
		margin-left: 0px;
		padding-right: 0px;
		overflow: hidden;
	}

	.about-us-body-img{
		display: block;
		width: auto;
		height: auto;
		clip-path: none;
		margin-right: 0px;
		margin-left: 0;
	}

	.about-us-body-img figure{
		width: 100%;
		height: 100%;
		clip-path: none;
	}

	.about-us-body-img img{
		width: 130px;
		height: 100%;
	}

	.about-us-body-content{
		width: calc(100% - 130px);
		height: 100%;
		padding: 12px;
	}

	.about-us-body-content h3{
		font-size: 16px;
	}

	.about-us-body-content p{
		font-size: 14px;
	}

	.about-footer-list,
	.about-footer-content{
		width: 100%;
	}

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

	.about-footer-btn-content h3{
		font-size: 18px;
	}

	.service-item{
        padding: 20px;
    }

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

	.service-item .icon-box img{
        max-width: 40px;
    }

	.service-title h3{
		font-size: 18px;
	}

	.service-btn a{
		height: 35px;
		width: 35px;
	}

	.service-btn a i{
		font-size: 16px;
	}

	.feature-image img{
        aspect-ratio: 1 / 0.6;
    }

	.company-experience-info{
		display: block;
	}

	.company-experience-info .feature-image{
		width: 100%;
	}

	.company-experience-info .feature-image img{
        aspect-ratio: 1 / 0.58;
    }

	.company-experience-box{
		width: 100%;
		margin-top: 30px;
	}

	.company-experience-content h2{
        font-size: 30px;
    }

	.ferature-list-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.project-item{
		width: 100%;
	}

	.project-item:nth-child(-2n + 2){
        border-radius: 0;
    }

	.project-item:first-child{
		border-radius: 20px 20px 0 0;
	}

	.project-item:last-child{
		border-radius: 0 0 20px 20px;
	}

	.project-content{
		right: 20px;
		left: 20px;
		bottom: 20px;
	}

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

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

	.why-choose-item .icon-box{
        margin-right: 10px;
    }

	.why-choose-item .icon-box img{
        max-width: 50px;
    }

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

	.why-choose-item-content h3{
		font-size: 18px;
	}

	.why-choose-counter-list{
        margin-top: 30px;
        padding-top: 30px;
		gap: 30px;
    }

	.why-choose-counter-item{
		width: calc(50% - 15px);
	}

	.why-choose-counter-item .icon-box{
		margin-bottom: 10px;
	}

	.why-choose-counter-item .icon-box img{
        max-width: 40px;
    }

	.why-choose-counter-content h3{
        font-size: 26px;
		margin-bottom: 5px;
    }

	.why-choose-counter-item:after{
		right: -15px;
	}

	.why-choose-counter-item:nth-child(2n + 2)::after{
		display: none;
	}

	.security-content-item h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.security-image img{
        aspect-ratio: 1 / 0.6;
    }

	.security-list{
        margin-top: 20px;
        padding-top: 20px;
    }

	.security-list-item{
        width: 100%;
    }

	.security-list-item h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.pricing-header h3{
		font-size: 18px;
	}

	.pricing-header h2{
        font-size: 26px;
    }

	.pricing-header h2 sup{
        font-size: 16px;
        top: -3px;
    }

	.pricing-header h2 sub{
		font-size: 14px;
	}

	.pricing-header .icon-box{
        top: -5px;
        right: -15px;
    }

	.pricing-header .icon-box img{
        max-width: 60px;
    }

	.pricing-benefit-list ul{
		gap: 15px;
	}

	.pricing-benefit-list ul li{
		width: calc(50% - 7.5px);
		font-size: 12px;
	}

	.pricing-benefit-list ul li img{
		max-width: 16px;
		margin-right: 5px;
	}

	.testimonial-box{
        padding: 50px 20px 30px;
    }

	.testimonial-video-button h3{
		font-size: 16px;
	}

	.testimonial-slider{
        padding: 20px;
    }

	.testimonial-company-logo img{
		max-width: 130px;
	}

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

	.testimonial-content p{
		font-size: 14px;
        margin-bottom: 10px;
    }

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

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

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

	.testimonial-btn{
        position: relative;
		bottom: 0;
        justify-content: center;
        margin-top: 20px;
    }

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

	.testimonial-contact-box,
	.testimonial-contact-btn{
        width: 100%;
		text-align: start;
    }

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

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

	.cta-box{
		padding: 20px;
    }

	.cta-contact-info:before{
		width: 80px;
		height: 70px;
		opacity: 60%;
		bottom: 0;
		right: 3px;
		transform: rotate(198deg);
	}

	@keyframes ctamovearrow{
		50%{
			right: -15px;
		}
	}
	
	.cta-contact-item{
		border-bottom: 1px solid var(--dark-divider-color);
		margin: 0 0 15px 0;
		padding: 0 0 15px 0;
		border-right: none;
	}

	.cta-contact-content h3{
		font-size: 18px;
	}

	.cta-contact-item .icon-box{
        margin-right: 10px;
    }

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

	.cta-contact-content{
        width: calc(100% - 45px);
    }

	.cta-box-image img{
        aspect-ratio: 1 / 0.65;
    }

	.faq-accordion .accordion-header .accordion-button{
		font-size: 18px;
		padding: 14px 40px 14px 14px;
    }

	.faq-accordion .accordion-item .accordion-button::after,
	.faq-accordion .accordion-item .accordion-button.collapsed::after{
		font-size: 18px;
		right: 14px;
	}

	.faq-accordion .accordion-body{
        padding: 10px 14px 14px;
    }

	.post-item-body h2{
		font-size: 18px;
	}

	.footer-header{
		display: block;
		margin-bottom: 30px;
        padding-bottom: 30px;
	}

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

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

	.footer-links h3{
        font-size: 18px;
    }

	.footer-copyright{
        padding: 15px 0;
    }

	.page-header-box h1{
		font-size: 30px;
	}

	.mission-vision-item .icon-box{
        margin-right: 10px;
    }

	.mission-vision-item .icon-box img{
        max-width: 40px;
    }

	.mission-vision-content{
        width: calc(100% - 50px);
    }

	.mission-vision-content h3{
		font-size: 18px;
	}

	.mission-vision-content p{
		font-size: 14px;
	}

	.our-approach-image img{
		aspect-ratio: 1 / 0.86;
	}

	.what-we-do-image{
		max-width: 100%;
		padding: 0 40px 60px 0;
	}

	.what-we-do-img-1::before{
		top: 10px;
		left: 10px;
	}

	.what-we-do-img-2{
		max-width: 170px;
	}

	.company-experience-box.what-we-do-circle{
		width: 110px;
        height: 110px;
		top: 30px;
		padding: 10px;
	}

	.company-experience-box.what-we-do-circle h2{
		font-size: 24px;
		margin-bottom: 5px;
	}

	.company-experience-box.what-we-do-circle p{
		font-size: 12px;
	}

	.what-we-item{
		width: 100%;
	}

	.what-we-item-content h3{
		font-size: 18px;
	}

	.work-step-item{
        margin-bottom: 20px;
    }

	.work-step-item::before{
        transform: translate(22px, 45px);
    }

	.work-step-item .work-step-no{
		width: 45px;
        height: 45px;
		margin-right: 10px;
	}

	.work-step-no h3{
        font-size: 20px;
    }
	
	.work-step-content{
		width: calc(100% - 55px);
	}

	.work-step-content h3{
		font-size: 18px;
	}

	.work-step-content p{
		font-size: 14px;
	}

	.how-it-work-image{
		padding-left: 40px;
	}

	.how-it-work-img-1 img{
		aspect-ratio: 1 / 1.1;
	}

	.how-it-work-img-2{
		max-width: 180px;
		border-width: 5px;
	}

	.our-benefit-image{
		padding-right: 50px;
	}

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

	.benefit-img-2{
		max-width: 160px;
		border-width: 5px;
		bottom: 20px;
	}

	.benefit-img-2 img{
		aspect-ratio: 1 / 1.1;
	}

	.contact-us-circle{
        top: 20px;
    }

	.contact-us-circle img{
        max-width: 80px;
    }

	.benefit-body-item{
		width: 100%;
	}	

	.benefit-body-item-content h3{
		font-size: 18px;
	}

	.page-catagery-list,
	.sidebar-cta-box{
		padding: 20px;
	}

	.page-catagery-list h3{
		font-size: 18px;
	}

	.sidebar-cta-contact-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

	.page-single-slider{
        margin-bottom: 20px;
    }

	.page-single-slider .swiper-slide img{
        aspect-ratio: 1 / 0.79;
    }

	.service-entry h2{
        font-size: 26px;
    }

	.service-entry ul li{
        margin-bottom: 10px;
    }

	.service-feature-item{
        width: 100%;
    }

	.service-feature-item::before{
		top: auto;
		bottom: -15px;
		left: 50%;
		transform: translateX(-50%);
		height: 1px;
		width: 100%;
	}

	.service-feature-box{
		margin-bottom: 10px;
	}

	.service-feature-box .icon-box img{
        max-width: 40px;
    }

	.service-feature-title{
        width: calc(100% - 50px);
    }

	.service-feature-title h3{
		font-size: 18px;
	}

	.service-entry-image-list{
		gap: 20px;
	}

	.service-entry-image,
	.service-entry-list-content{
		width: 100%;
	}

	.service-entry-image img{
        aspect-ratio: 1 / 0.68;
    }

	.post-image img{
		aspect-ratio: 1 / 0.7;
	}
	
	.post-entry blockquote{
		background-position: 15px 12px;
		padding: 60px 15px 15px 15px;
	}
	
	.post-entry h2{
		font-size: 26px;
	}

	.tag-links{
		font-size: 18px;
	}
	
	.project-detail-list{
		padding: 20px;
	}

	.project-deatil-title h3{
		font-size: 18px;
	}

	.project-detail-item{
		padding: 10px;
		margin-bottom: 20px;
	}

	.project-detail-content h3{
		font-size: 18px;
	}

	.project-entry h2{
        font-size: 26px;
    }
	
	.project-video-content,
	.project-video-box{
		width: 100%;
	}

	.project-scope-box ul li{
		width: 100%;
	}
	
	.project-entry-images{
		gap: 20px;
	}

	.project-entry-image{
		width: 100%;
	}

	.what-we-list.project-scope-list .what-we-item .icon-box img{
        max-width: 40px;
    }

	.what-we-list.project-scope-list .what-we-item .what-we-item-content h3{
		font-size: 18px;
		margin-bottom: 5px;
	}

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

	.team-detail-content h3{
        font-size: 18px;
    }

	.team-member-info .section-title{
		margin-bottom: 20px;
	}
	
	.team-member-detail{
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

	.member-social-list span{
		font-size: 18px;
	}

	.member-social-list ul li{
		margin-right: 10px;
	}

	.team-skills-list{
		gap: 20px;
	}

	.skills-progress-bar{
		width: 100%;
	}

	.team-single-list ul li{
		width: 100%;
	}

	.page-testimonials .testimonial-item{
        padding: 20px;
    }

	.page-contact-box{
        padding: 0 20px 30px 20px;
        margin-top: 50px;
    }

	.contact-info-list{
		gap: 30px;
        margin: -50px 0 30px 0;
    }

	.contact-info-item{
		width: 100%;
	}

	.contact-info-item:before{
		top: auto;
		right: 0;
		bottom: -15px;
		left: 0;
		width: 100%;
		height: 1px;
	}

	.contact-info-item:nth-child(3n + 3)::before{
		display: block;
	}
	
	.contact-info-item:last-child::before{
		display: none;
	}

	.contact-info-item .icon-box{
		margin-bottom: 15px;
	}

	.contact-info-content h3{
		font-size: 18px;
	}
	
	.google-map-iframe,
	.google-map-iframe iframe{
		height: 350px;
	}
}


.security_item{
    background-color:#fff;
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 30px;
    border: 2px solid #518cc6;
}
.security_item figure.image--security-anime {
    width: 150px;
    margin: 0 auto 30px auto;
}
.security_item_content h3{
    font-size:18px;
}

@media (max-width:767px){
    .security_item{
        margin-bottom:30px;
    }
}
/************************************/
/***      Floating Social Bar      ***/
/************************************/

body .floating-social-bar {
	display: block !important;
	position: fixed !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	z-index: 99999 !important;
	padding: 0;
	margin: 0;
}

body .floating-social-bar ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px;
}

body .floating-social-bar ul li a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #e8e8e8;
	color: #444 !important;
	font-size: 15px;
	transition: background 0.3s ease, color 0.3s ease;
	text-decoration: none !important;
}

body .floating-social-bar ul li a:hover {
	background: linear-gradient(135deg, var(--accent-color), var(--accent-secondary-color)) !important;
	color: #fff !important;
}


/************************************/
/***  Expanding Locations Section ***/
/************************************/

.expanding-locations {
    padding: 80px 0;
    background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
}

.locations-title {
    margin-bottom: 40px;
}

.locations-title h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--white-color);
    margin-bottom: 5px;
    font-style: italic;
}

.locations-title h2 em {
    font-style: italic;
}

.locations-subtitle {
    font-size: 28px;
    font-weight: 600;
    color: var(--white-color);
    text-decoration: underline;
    text-underline-offset: 6px;
}

.locations-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.location-tag {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid var(--white-color);
    color: var(--white-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: transparent;
    transition: all 0.3s ease;
}

.location-tag:hover {
    background-color: var(--white-color);
    color: #f35c1e;
}

/************************************/
/***  Gallery Preview Section     ***/
/************************************/

.gallery-preview {
    padding: 80px 0;
    background-color: var(--white-color);
}

.gallery-preview .section-title h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--primary-color);
}

.gallery-preview-grid {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
    overflow: hidden;
}

.gallery-preview-item {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
}

.gallery-preview-item figure {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 4/3;
}

.gallery-preview-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-preview-item:hover figure img {
    transform: scale(1.05);
}

.gallery-view-more {
    position: relative;
    z-index: 2;
    clear: both;
    margin-top: 40px;
    padding-top: 10px;
}

.gallery-view-more .btn-default i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.gallery-view-more .btn-default:hover i {
    transform: translateX(5px);
}

/************************************/
/***  Gallery Full Page           ***/
/************************************/

.gallery-page {
    padding: 80px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.gallery-grid-item {
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.gallery-grid-item figure {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 4/3;
}

.gallery-grid-item figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-grid-item:hover figure img {
    transform: scale(1.05);
}

/************************************/
/***  Responsive — New Sections   ***/
/************************************/

@media (max-width: 991px) {
    .expanding-locations {
        padding: 60px 0;
    }
    .locations-title h2 {
        font-size: 28px;
    }
    .locations-subtitle {
        font-size: 22px;
    }
    .gallery-preview {
        padding: 60px 0;
    }
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .expanding-locations {
        padding: 40px 0;
    }
    .locations-title h2 {
        font-size: 24px;
    }
    .locations-subtitle {
        font-size: 20px;
    }
    .location-tag {
        padding: 8px 18px;
        font-size: 12px;
    }
    .gallery-preview {
        padding: 40px 0;
    }
    .gallery-preview-item figure {
        aspect-ratio: 16/9;
    }
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Gallery Preview Section Override */
.gallery-preview .section-row {
    margin-bottom: 40px;
}
.gallery-preview .gallery-preview-grid {
    display: flex;
    flex-wrap: wrap;
}
.gallery-preview .gallery-preview-item {
    height: 100%;
}
.gallery-preview .gallery-preview-item figure {
    height: 100%;
}


/************************************/
/***  Expanding Locations Page    ***/
/************************************/

.expanding-locations-page {
    padding: 100px 0;
}

.expanding-locations-page .locations-title {
    margin-bottom: 50px;
}

.expanding-locations-page .locations-title h2 {
    font-size: 42px;
}

.expanding-locations-page .locations-subtitle {
    font-size: 32px;
}

.locations-tags-page {
    gap: 20px;
}

.locations-tags-page .location-tag {
    padding: 15px 35px;
    font-size: 16px;
    letter-spacing: 2px;
}

/************************************/
/***  Client List Page            ***/
/************************************/

.client-list-section {
    padding: 80px 0;
}

.client-card {
    text-align: center;
    margin-bottom: 40px;
    transition: transform 0.3s ease;
}

.client-card:hover {
    transform: translateY(-5px);
}

.client-card-image {
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
    border: 1px solid var(--divider-color);
}

.client-card-image figure {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1/1;
}

.client-card-image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.client-card:hover .client-card-image figure img {
    transform: scale(1.05);
}

.client-card-name h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.4em;
}

/************************************/
/***  Responsive — New Pages      ***/
/************************************/

@media (max-width: 991px) {
    .expanding-locations-page {
        padding: 70px 0;
    }
    .expanding-locations-page .locations-title h2 {
        font-size: 32px;
    }
    .expanding-locations-page .locations-subtitle {
        font-size: 24px;
    }
    .locations-tags-page .location-tag {
        padding: 12px 25px;
        font-size: 14px;
    }
    .client-list-section {
        padding: 60px 0;
    }
}

@media (max-width: 767px) {
    .expanding-locations-page {
        padding: 50px 0;
    }
    .expanding-locations-page .locations-title h2 {
        font-size: 26px;
    }
    .expanding-locations-page .locations-subtitle {
        font-size: 20px;
    }
    .locations-tags-page .location-tag {
        padding: 10px 20px;
        font-size: 13px;
    }
    .client-list-section {
        padding: 40px 0;
    }
    .client-card {
        margin-bottom: 25px;
    }
    .client-card-name h4 {
        font-size: 16px;
    }
}


/************************************/
/***  Enquiry Popup               ***/
/************************************/

.enquiry-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

.enquiry-popup-overlay.active {
    display: flex;
}

.enquiry-popup {
    background: var(--white-color);
    border-radius: 20px;
    max-width: 750px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: popupSlideIn 0.4s ease;
}

@keyframes popupSlideIn {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.enquiry-popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 30px;
    color: var(--primary-color);
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.3s;
}

.enquiry-popup-close:hover {
    color: #f35c1e;
}

.enquiry-popup-inner {
    display: flex;
}

.enquiry-popup-image {
    width: 40%;
    min-height: 100%;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}

.enquiry-popup-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enquiry-popup-content {
    width: 60%;
    padding: 40px 35px;
}

.enquiry-popup-image + .enquiry-popup-content {
    width: 60%;
}

.enquiry-popup-content:only-child {
    width: 100%;
}

.enquiry-popup-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.enquiry-popup-content p {
    color: var(--text-color);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.enquiry-popup-form input[type="text"],
.enquiry-popup-form input[type="email"],
.enquiry-popup-form input[type="tel"],
.enquiry-popup-form textarea,
.enquiry-popup-form select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-family: var(--default-font);
    transition: border-color 0.3s;
}

.enquiry-popup-form input:focus,
.enquiry-popup-form textarea:focus,
.enquiry-popup-form select:focus {
    border-color: #f35c1e;
    outline: none;
}

.enquiry-popup-form textarea {
    height: 80px;
    resize: vertical;
}

.enquiry-popup-form input[type="submit"] {
    background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
    color: var(--white-color);
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s;
    width: 100%;
}

.enquiry-popup-form input[type="submit"]:hover {
    opacity: 0.9;
}

/* Floating Button */
.enquiry-floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: linear-gradient(135deg, #f35c1e 0%, #ffe405 100%);
    color: var(--white-color);
    padding: 15px 25px;
    border-radius: 50px;
    cursor: pointer;
    z-index: 99998;
    box-shadow: 0 5px 20px rgba(243,92,30,0.4);
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 16px;
}

.enquiry-floating-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(243,92,30,0.5);
}

/* Responsive */
@media (max-width: 767px) {
    .enquiry-popup-inner {
        flex-direction: column;
    }
    .enquiry-popup-image {
        width: 100%;
        height: 150px;
        border-radius: 20px 20px 0 0;
    }
    .enquiry-popup-content,
    .enquiry-popup-image + .enquiry-popup-content {
        width: 100%;
        padding: 25px 20px;
    }
    .enquiry-popup-content h3 {
        font-size: 20px;
    }
    .enquiry-floating-btn {
        bottom: 20px;
        right: 20px;
        padding: 12px 20px;
        font-size: 14px;
    }
}

/* Client Home Section */
.client-home-section {
    padding: 80px 0;
}
.client-view-more {
    margin-top: 10px;
}
.client-view-more .btn-default i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}
.client-view-more .btn-default:hover i {
    transform: translateX(5px);
}


/************************************/
/***  Mobile Responsive Fixes     ***/
/************************************/

@media (max-width: 767px) {

    /* 24/7 Calibration Support box - stack vertically */
    .about-us-body {
        flex-direction: column;
        border-radius: 15px;
        padding: 0 !important;
        margin-left: 0;
    }

    .about-us-body-img {
        width: 100% !important;
        min-width: 100% !important;
        height: 180px !important;
        border-radius: 15px 15px 0 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .about-us-body-img figure {
        width: 100% !important;
        height: 100% !important;
        border-radius: 15px 15px 0 0 !important;
    }

    .about-us-body-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .about-us-body-content {
        width: 100% !important;
        padding: 20px !important;
    }

    .about-us-body-content h3 {
        font-size: 18px !important;
        margin-bottom: 8px;
    }

    .about-us-body-content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* Feature area images - prevent overlap */
    .our-feature-images {
        position: relative;
        overflow: hidden;
    }

    .company-experience-info {
        flex-direction: column;
        gap: 15px;
    }

    .company-experience-info .feature-image {
        width: 100% !important;
    }

    .company-experience-info .feature-image img {
        aspect-ratio: 16/9 !important;
        width: 100% !important;
    }

    /* Counters - 3 side by side */
    .why-choose-counter-list {
        gap: 10px !important;
        justify-content: center;
    }

    .why-choose-counter-item {
        width: calc(33.33% - 10px) !important;
        padding: 0;
    }

    .why-choose-counter-item .icon-box {
        margin-bottom: 5px;
    }

    .why-choose-counter-item .icon-box img {
        max-width: 30px !important;
    }

    .why-choose-counter-content h3 {
        font-size: 20px !important;
        margin-bottom: 3px;
    }

    .why-choose-counter-content p {
        font-size: 11px !important;
        line-height: 1.3;
    }

    .why-choose-counter-item:after {
        right: -7px !important;
    }

    .why-choose-counter-item:last-child:after {
        display: none;
    }

    /* Floating social bar - shift down below header */
    body .floating-social-bar {
        top: auto !important;
        bottom: 100px !important;
        transform: none !important;
    }
}

/* Services Section Dark BG */
.our-services .section-title h3 {
    color: #f35c1e;
}
.our-services .section-title h2 {
    color: var(--white-color);
}
.our-services .section-title h2 span {
    color: #f35c1e;
}

/************************************/
/***  Dropdown Menu Styles        ***/
/************************************/

.navbar-nav .menu-item-has-children {
    position: relative;
}

.navbar-nav .menu-item-has-children > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px; max-width: 320px;
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 15px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s ease;
    z-index: 9999;
    list-style: none;
    margin: 0;
}

.navbar-nav .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-nav .sub-menu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.navbar-nav .sub-menu li a {
    display: block;
    padding: 8px 25px;
    color: var(--primary-color) !important;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: normal;
    text-decoration: none;
}

.navbar-nav .sub-menu li a:hover {
    color: #f35c1e !important;
    background: #f9f9f9;
    padding-left: 30px;
}

/* Dropdown arrow indicator */
.navbar-nav .menu-item-has-children > a::after {
    content: f107;
    font-family: Font Awesome 6 Free;
    font-weight: 900;
    margin-left: 6px;
    font-size: 12px;
}

/* Sticky header dropdown */
.header-sticky.active .navbar-nav .sub-menu {
    top: 100%;
}

@media (max-width: 991px) {
    .navbar-nav .menu-item-has-children > .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: 0 0 0 15px;
        min-width: auto;
        background: transparent;
    }
    .navbar-nav .sub-menu li a {
        color: var(--white-color) !important;
        padding: 6px 15px;
        font-size: 14px;
    }
    .navbar-nav .sub-menu li a:hover {
        background: transparent;
        color: #f35c1e !important;
    }
    .navbar-nav .menu-item-has-children > a::after {
        display: none;
    }
}
.navbar-nav .sub-menu li:last-child {
    border-bottom: none;
}

/************************************/
/***  Service Entry Content Fix   ***/
/************************************/

.service-entry {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-color);
}

.service-entry h2 {
    font-size: 28px;
    margin-top: 30px;
}

.service-entry div {
    margin-bottom: 5px;
    line-height: 1.8;
}

.service-entry div:empty {
    margin-bottom: 15px;
}

.service-entry p {
    line-height: 1.8;
}

.service-entry p[data-start] {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary-color);
    border-left: 4px solid #f35c1e;
    padding-left: 15px;
    margin-bottom: 30px;
}

/* ============================================================
   Alipuraya Center palette override (Plum + Rose Gold + Ivory)
   Appended 2026-04-21 — overrides original Proshield palette
   ============================================================ */
:root{
	--primary-color				: #3B1F3A !important;  /* deep aubergine/plum — dark sections, headings */
	--secondary-color			: #F7F1EA !important;  /* warm ivory — light section bg */
	--text-color				: #5B4A55 !important;  /* warm plum-gray — body text */
	--accent-color				: #7B3E6B !important;  /* orchid mid — gradient start */
	--accent-secondary-color	: #033e8a !important;  /* rose gold — gradient end / CTAs */
	--white-color				: #FFFFFF !important;
	--divider-color				: #dfeaf3 !important;  /* warm ivory divider */
}

/* Patch hardcoded legacy navy (#010535) across the theme */
[style*="#010535"]{ background: #3B1F3A !important; }

/* Headings: use plum instead of near-black */
h1, h2, h3, h4, h5, h6 { color: #3B1F3A; }

/* Primary CTA buttons — warm rose-gold gradient instead of teal */
.btn-primary,
.theme-btn,
button.theme-btn,
a.theme-btn,
input[type="submit"]{
	background: linear-gradient(90deg, #7B3E6B 0%, #033e8a 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
}
.btn-primary:hover,
.theme-btn:hover,
a.theme-btn:hover,
input[type="submit"]:hover{
	background: linear-gradient(90deg, #033e8a 0%, #7B3E6B 100%) !important;
	color: #FFFFFF !important;
}

/* Link accents in body copy */
a{ color: #7B3E6B; }
a:hover{ color: #033e8a; }

/* Soft ivory backdrop for any section using --secondary-color gradients */
.bg-light, .section-bg, .bg-secondary{ background-color: #F7F1EA !important; }

/* Footer — darken to plum, keep rose-gold accents */
footer, .footer, .site-footer{
	background: linear-gradient(180deg, #3B1F3A 0%, #2A1529 100%) !important;
	color: #F7F1EA;
}
footer a, .footer a, .site-footer a{ color: #033e8a; }
footer a:hover, .footer a:hover, .site-footer a:hover{ color: #FFFFFF; }


/* ============================================================
   Header/menu bar + footer — solid plum #3B1F3A
   Appended 2026-04-21
   ============================================================ */

/* Menu bar / header — solid plum at all states (default + sticky) */
.main-header,
.main-header .header-sticky,
.header-sticky,
.header-sticky.active,
.navbar{
	background: #3B1F3A !important;
	background-color: #3B1F3A !important;
}

/* Menu link text — ivory on plum, rose-gold on hover */
.navbar-nav .nav-item .nav-link,
.navbar-nav li a,
.main-header a{
	color: #F7F1EA !important;
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .current-menu-item > a,
.navbar-nav li a:hover{
	color: #033e8a !important;
}

/* Dropdown submenus — keep plum family */
.navbar-nav .sub-menu{
	background: #2A1529 !important;
}
.navbar-nav .sub-menu li a{ color: #F7F1EA !important; }
.navbar-nav .sub-menu li a:hover{ color: #033e8a !important; }

/* Mobile slicknav menu */
.slicknav_menu, .slicknav_nav{
	background: #3B1F3A !important;
}
.slicknav_nav a{ color: #F7F1EA !important; }
.slicknav_nav a:hover{ color: #033e8a !important; background: #2A1529 !important; }
.slicknav_btn .slicknav_icon-bar{ background: #F7F1EA !important; }

/* Footer — solid plum (overrides earlier gradient) */
footer, .footer, .site-footer,
.footer-main, .footer-widgets, .footer-bottom, .copyright-wrapper{
	background: #3B1F3A !important;
	background-image: none !important;
	color: #F7F1EA !important;
}


/* ============================================================
   Enquiry floating button — match nav Contact button gradient
   Appended 2026-04-21
   ============================================================ */
.enquiry-floating-btn{
	background: linear-gradient(to right, #7B3E6B 0%, #033e8a 50%, #7B3E6B 100%) !important;
	background-size: 200% auto !important;
	color: #FFFFFF !important;
	box-shadow: 0 5px 20px rgba(59, 31, 58, 0.4) !important;
	transition: background-position 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}
.enquiry-floating-btn:hover{
	background-position: right center !important;
	box-shadow: 0 8px 25px rgba(123, 62, 107, 0.5) !important;
}


/* ============================================================
   Top bar → Contact button gradient
   Section titles → #3B1F3A plum
   Appended 2026-04-21
   ============================================================ */

/* Topbar matches .btn-default gradient (plum → rose-gold → plum, animated) */
.topbar{
	background: linear-gradient(to right, #7B3E6B 0%, #033e8a 50%, #7B3E6B 100%) !important;
	background-size: 200% auto !important;
}
.topbar-info-text p a:hover{ color: #3B1F3A !important; }

/* Section titles — plum color on light-section variants */
.section-title h1,
.section-title h2,
.section-title h3{
	color: #3B1F3A !important;
}

/* The small uppercase kicker (h3) — use rose gold to stay legible + tie to palette */
.section-title h3{
	color: #7B3E6B !important;
}

/* Gradient highlight span inside titles — keep plum→rose-gold */
.section-title h1 span,
.section-title h2 span{
	background: linear-gradient(90deg, #7B3E6B 0%, #033e8a 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Dark-section variant — keep white, override the plum rule */
.section-title.dark-section h1,
.section-title.dark-section h2,
.section-title.dark-section h3,
.section-title.dark-section p{
	color: #FFFFFF !important;
}


/* ============================================================
   Hero banner overlay — plum gradient #3B1F3A
   Appended 2026-04-21
   ============================================================ */
.hero::before,
.hero.hero-slider-layout .hero-slide::before{
	background: linear-gradient(270deg, rgba(59, 31, 58, 0.28) 43.57%, rgba(59, 31, 58, 0.85) 100%) !important;
}


/* ============================================================
   White textured background — for:
   - .about-us-body (24/7 Calibration Support box)
   - .our-services (IT & SECURITY SERVICES section)
   Subtle diagonal linen-style pattern via inline SVG
   Appended 2026-04-21
   ============================================================ */

.about-us-body,
.our-services{
	background-color: #FFFFFF !important;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 40 L40 0' stroke='%233B1F3A' stroke-opacity='0.035' stroke-width='1'/><path d='M-10 10 L10 -10' stroke='%233B1F3A' stroke-opacity='0.035' stroke-width='1'/><path d='M30 50 L50 30' stroke='%233B1F3A' stroke-opacity='0.035' stroke-width='1'/><circle cx='20' cy='20' r='0.7' fill='%233B1F3A' fill-opacity='0.05'/></svg>") !important;
	background-repeat: repeat !important;
	background-size: 40px 40px !important;
}

/* 24/7 Calibration box — text was white-on-orange, flip to plum on white */
.about-us-body{
	border: 1px solid #dfeaf3 !important;
	box-shadow: 0 4px 24px rgba(59, 31, 58, 0.08) !important;
}
.about-us-body-content h3{ color: #3B1F3A !important; }
.about-us-body-content p{ color: #5B4A55 !important; }

/* IT & SECURITY SERVICES section — titles were white/orange, flip for white bg */
.our-services .section-title h3{ color: #7B3E6B !important; }
.our-services .section-title h2{ color: #3B1F3A !important; }
.our-services .section-title h2 span{
	background: linear-gradient(90deg, #7B3E6B 0%, #033e8a 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}
.our-services .section-title p{ color: #5B4A55 !important; }

/* Service cards already white — add a subtle plum border so they stand out on textured white */
.our-services .service-item{
	border: 1px solid #dfeaf3 !important;
	box-shadow: 0 4px 20px rgba(59, 31, 58, 0.06) !important;
}


/* ============================================================
   WHY CHOOSE US — ivory section background
   Appended 2026-04-21
   ============================================================ */
.why-choose-us{
	background: #F7F1EA !important;
	background-image: none !important;
}

/* Counter stats at bottom of section — were white-on-orange, flip to plum */
.why-choose-counter-content h3,
.why-choose-counter-content p{
	color: #3B1F3A !important;
}

/* Dividers under/between counter stats — use plum at low opacity (was white) */
.why-choose-counter-list{
	border-top: 1px solid rgba(59, 31, 58, 0.15) !important;
}
.why-choose-counter-item:after{
	background: rgba(59, 31, 58, 0.15) !important;
}

/* Feature cards sit on ivory — add subtle plum shadow for definition */
.why-choose-item{
	box-shadow: 0 4px 20px rgba(59, 31, 58, 0.06) !important;
}


/* ============================================================
   IT & SECURITY SERVICES — ivory bg (overrides earlier white texture)
   Appended 2026-04-21
   ============================================================ */
.our-services{
	background-color: #F7F1EA !important;
	background-image: none !important;
}


/* ============================================================
   Ivory sections — swap heading/kicker colors (opposite to other sections)
   Why Choose Us + IT & Security Services
   Appended 2026-04-21
   ============================================================ */

/* Kicker h3 — plum (was rose-gold/orchid) */
.our-services .section-title h3,
.why-choose-us .section-title h3{
	color: #3B1F3A !important;
}

/* Main title h2 — rose-gold/orchid gradient (was solid plum) */
.our-services .section-title h2,
.why-choose-us .section-title h2{
	background: linear-gradient(90deg, #7B3E6B 0%, #033e8a 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}

/* The <span> inside the title was already gradient — reverse direction so it still pops */
.our-services .section-title h2 span,
.why-choose-us .section-title h2 span{
	background: linear-gradient(90deg, #033e8a 0%, #7B3E6B 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}


/* ============================================================
   Kicker icon before section title — new orchid-bloom SVG
   in rose-gold (default) / plum (on ivory sections via default kicker plum)
   Appended 2026-04-21
   ============================================================ */

/* Default: rose-gold orchid bloom before the h3 kicker */
.section-title h3::before{
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 C13.5 6 13.5 9 12 11 C10.5 9 10.5 6 12 3 Z' fill='%23033e8a'/><path d='M21 12 C18 13.5 15 13.5 13 12 C15 10.5 18 10.5 21 12 Z' fill='%23033e8a'/><path d='M12 21 C10.5 18 10.5 15 12 13 C13.5 15 13.5 18 12 21 Z' fill='%23033e8a'/><path d='M3 12 C6 10.5 9 10.5 11 12 C9 13.5 6 13.5 3 12 Z' fill='%23033e8a'/><path d='M17.5 6.5 C17 8.5 15.5 10 13.5 10.5 C14 8.5 15.5 7 17.5 6.5 Z' fill='%23033e8a' opacity='0.7'/><path d='M17.5 17.5 C15.5 17 14 15.5 13.5 13.5 C15.5 14 17 15.5 17.5 17.5 Z' fill='%23033e8a' opacity='0.7'/><path d='M6.5 17.5 C7 15.5 8.5 14 10.5 13.5 C10 15.5 8.5 17 6.5 17.5 Z' fill='%23033e8a' opacity='0.7'/><path d='M6.5 6.5 C8.5 7 10 8.5 10.5 10.5 C8.5 10 7 8.5 6.5 6.5 Z' fill='%23033e8a' opacity='0.7'/><circle cx='12' cy='12' r='1.8' fill='%233B1F3A'/></svg>") no-repeat left center !important;
	background-size: contain !important;
	width: 22px !important;
	height: 22px !important;
}

/* On ivory sections, kicker text is plum — use plum-centered bloom for harmony */
.our-services .section-title h3::before,
.why-choose-us .section-title h3::before{
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3 C13.5 6 13.5 9 12 11 C10.5 9 10.5 6 12 3 Z' fill='%233B1F3A'/><path d='M21 12 C18 13.5 15 13.5 13 12 C15 10.5 18 10.5 21 12 Z' fill='%233B1F3A'/><path d='M12 21 C10.5 18 10.5 15 12 13 C13.5 15 13.5 18 12 21 Z' fill='%233B1F3A'/><path d='M3 12 C6 10.5 9 10.5 11 12 C9 13.5 6 13.5 3 12 Z' fill='%233B1F3A'/><path d='M17.5 6.5 C17 8.5 15.5 10 13.5 10.5 C14 8.5 15.5 7 17.5 6.5 Z' fill='%237B3E6B' opacity='0.75'/><path d='M17.5 17.5 C15.5 17 14 15.5 13.5 13.5 C15.5 14 17 15.5 17.5 17.5 Z' fill='%237B3E6B' opacity='0.75'/><path d='M6.5 17.5 C7 15.5 8.5 14 10.5 13.5 C10 15.5 8.5 17 6.5 17.5 Z' fill='%237B3E6B' opacity='0.75'/><path d='M6.5 6.5 C8.5 7 10 8.5 10.5 10.5 C8.5 10 7 8.5 6.5 6.5 Z' fill='%237B3E6B' opacity='0.75'/><circle cx='12' cy='12' r='1.8' fill='%23033e8a'/></svg>") no-repeat left center !important;
	background-size: contain !important;
}

/* Make sure the h3 has enough left padding for the bigger 22px icon */
.section-title h3{ padding-left: 32px !important; }


/* ============================================================
   Inner-page banner overlay — match hero plum gradient
   Appended 2026-04-21
   ============================================================ */
.page-header::before{
	background: linear-gradient(270deg, rgba(59, 31, 58, 0.28) 43.57%, rgba(59, 31, 58, 0.85) 100%) !important;
}


/* ============================================================
   Hotel Room flip cards — palette-matched
   Appended 2026-04-21
   ============================================================ */

/* FRONT: ivory/white with plum title */
.service-flip-front{
	background: linear-gradient(180deg, #FFFFFF 0%, #F7F1EA 100%) !important;
	border: 1px solid #dfeaf3 !important;
	box-shadow: 0 8px 28px rgba(59, 31, 58, 0.08) !important;
	padding: 35px 30px !important;
}
.service-flip-front h3{
	color: #3B1F3A !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	margin-top: 10px !important;
}
/* Image frame */
.service-flip-front .service-flip-icon{
	margin-bottom: 20px !important;
	width: 100% !important;
}
.service-flip-front .service-flip-icon img{
	width: 100% !important;
	height: 170px !important;
	object-fit: cover !important;
	border-radius: 16px !important;
}
/* Fallback when no featured image — rose-gold tile with orchid bloom */
.service-flip-front:not(:has(.service-flip-icon))::before,
.service-flip-front .service-flip-icon:empty{
	content: '';
	display: block;
	width: 100%;
	height: 170px;
	margin-bottom: 20px;
	border-radius: 16px;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g transform='translate(40,40)'><path d='M0 -22 C6 -12 6 -4 0 4 C-6 -4 -6 -12 0 -22 Z' fill='white' fill-opacity='0.85'/><path d='M22 0 C12 6 4 6 -4 0 C4 -6 12 -6 22 0 Z' fill='white' fill-opacity='0.85'/><path d='M0 22 C-6 12 -6 4 0 -4 C6 4 6 12 0 22 Z' fill='white' fill-opacity='0.85'/><path d='M-22 0 C-12 -6 -4 -6 4 0 C-4 6 -12 6 -22 0 Z' fill='white' fill-opacity='0.85'/><circle r='3' fill='%233B1F3A'/></g></svg>") center / 90px no-repeat,
		linear-gradient(135deg, #033e8a 0%, #7B3E6B 100%);
}

/* BACK: plum → orchid gradient with room details */
.service-flip-back{
	background: linear-gradient(135deg, #3B1F3A 0%, #7B3E6B 100%) !important;
	padding: 30px 26px !important;
	gap: 10px !important;
	justify-content: flex-start !important;
}
.service-flip-back .room-name{
	color: #033e8a !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	margin: 0 0 4px 0 !important;
	letter-spacing: 0.02em !important;
}
.service-flip-back .room-details{
	color: #F7F1EA !important;
	font-size: 13.5px !important;
	text-align: left !important;
	width: 100% !important;
	line-height: 1.55 !important;
}
.service-flip-back .room-details .room-tagline{
	font-style: italic !important;
	color: #F7F1EA !important;
	opacity: 0.85 !important;
	margin: 0 0 10px 0 !important;
	text-align: center !important;
}
.service-flip-back .room-details ul{
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 10px 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 4px 12px !important;
}
.service-flip-back .room-details ul li{
	color: #F7F1EA !important;
	font-size: 12.5px !important;
	padding-left: 16px !important;
	position: relative !important;
	line-height: 1.4 !important;
}
.service-flip-back .room-details ul li::before{
	content: '' !important;
	position: absolute !important;
	left: 0 !important;
	top: 6px !important;
	width: 6px !important;
	height: 6px !important;
	background: #033e8a !important;
	border-radius: 50% !important;
}
.service-flip-back .room-details .room-price{
	color: #033e8a !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	text-align: center !important;
	margin: 8px 0 0 0 !important;
	padding-top: 10px !important;
	border-top: 1px solid rgba(3, 62, 138, 0.3) !important;
}

/* Book Now button on back — rose-gold outline, inverts on hover */
.service-flip-back .btn-book{
	margin-top: 8px !important;
	padding: 9px 22px !important;
	font-size: 14px !important;
	background: transparent !important;
	border: 1.5px solid #033e8a !important;
	color: #033e8a !important;
	border-radius: 100px !important;
}
.service-flip-back .btn-book:hover{
	background: #033e8a !important;
	color: #3B1F3A !important;
}
.service-flip-back .btn-book::before,
.service-flip-back .btn-book::after{ display: none !important; }

/* Slightly taller cards to fit amenity grid */
.service-flip-wrap{ height: 420px !important; }


/* ============================================================
   About feature pills — replace generic blue check with
   hotel-themed icons (rose-gold on transparent). Order:
   1 ROOMS | 2 DINING | 3 SPA | 4 POOL | 5 EVENTS | 6 CONCIERGE | 7 WEDDINGS
   Appended 2026-04-22
   ============================================================ */

.about-footer-list ul li{
	background-size: 24px 24px !important;
	background-position: left center !important;
}

/* 1. ROOMS — bed icon */
.about-footer-list ul li:nth-child(1){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18v-7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v7'/><path d='M3 18v2M21 18v2'/><path d='M3 14h18'/><path d='M7 11v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2'/><path d='M12 11v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2'/></svg>") !important;
}

/* 2. DINING — fork + knife */
.about-footer-list ul li:nth-child(2){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3v7a2 2 0 0 0 2 2v9'/><path d='M11 3v7'/><path d='M9 3v4'/><path d='M16 3c-2 0-3 1.5-3 4v4a1 1 0 0 0 1 1h1v9'/></svg>") !important;
}

/* 3. SPA — lotus/leaf */
.about-footer-list ul li:nth-child(3){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21c-3-3-6-5-6-10a6 6 0 0 1 12 0c0 5-3 7-6 10z'/><path d='M12 11v10'/><path d='M8 14c1 1 2 1.5 4 1.5s3-.5 4-1.5'/></svg>") !important;
}

/* 4. POOL — wave */
.about-footer-list ul li:nth-child(4){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5'/><path d='M3 15c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5'/><path d='M3 20c2 0 2-1.5 4-1.5s2 1.5 4 1.5 2-1.5 4-1.5 2 1.5 4 1.5'/></svg>") !important;
}

/* 5. EVENTS — sparkle/star */
.about-footer-list ul li:nth-child(5){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v6M12 15v6M3 12h6M15 12h6'/><path d='M12 8l1 3 3 1-3 1-1 3-1-3-3-1 3-1z' fill='%23033e8a' fill-opacity='0.2'/></svg>") !important;
}

/* 6. CONCIERGE — bell */
.about-footer-list ul li:nth-child(6){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 18h16'/><path d='M5 18a7 7 0 0 1 14 0'/><path d='M12 6V4'/><path d='M10 4h4'/></svg>") !important;
}

/* 7. WEDDINGS — heart */
.about-footer-list ul li:nth-child(7){
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z'/></svg>") !important;
}


/* ============================================================
   Testimonial box bg + gallery page-header banner
   Appended 2026-04-22
   ============================================================ */

/* Testimonial box — use uploaded hotel background */
.testimonial-box.parallaxie{
	background: url("https://demo.serveque.in/alipuraya-center/wp-content/uploads/2026/04/testimonial.jpg") center / cover no-repeat !important;
	position: relative !important;
}
.testimonial-box.parallaxie::before{
	content: '' !important;
	position: absolute !important;
	inset: 0 !important;
	background: linear-gradient(135deg, rgba(59,31,58,0.75) 0%, rgba(123,62,107,0.6) 100%) !important;
	border-radius: inherit !important;
	z-index: 0 !important;
}
.testimonial-box.parallaxie > *{ position: relative !important; z-index: 1 !important; }

/* Broken static avatar / company-logo / quote images — hide them */
.testimonial-header .testimonial-company-logo img[src*="company-logo.svg"],
.testimonial-header .testimonial-quote img[src*="testimonial-quote.svg"]{
	display: none !important;
}
/* Replace author image with a palette-matched initial circle */
.testimonial-body .author-image{
	width: 54px !important;
	height: 54px !important;
	border-radius: 50% !important;
	background: linear-gradient(135deg, #033e8a 0%, #7B3E6B 100%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}
.testimonial-body .author-image figure,
.testimonial-body .author-image img{
	display: none !important;
}
.testimonial-body .author-image::after{
	content: '\2605' !important;  /* star */
	color: #FFFFFF !important;
	font-size: 24px !important;
}

/* Replace quote icon area with a rose-gold quote glyph */
.testimonial-quote::after{
	content: '\201C' !important;
	font-family: Georgia, serif !important;
	font-size: 64px !important;
	color: #033e8a !important;
	line-height: 1 !important;
	display: inline-block !important;
}


/* ============================================================
   Send via WhatsApp button — WhatsApp brand green
   Appended 2026-04-23
   ============================================================ */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"]{
	background: #25D366 !important;
	background-image: none !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 100px !important;
	padding: 14px 36px !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;
	transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 button[type="submit"]:hover{
	background: #128C7E !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(18, 140, 126, 0.45) !important;
}
/* Prepend a small WhatsApp glyph */
.wpcf7 input[type="submit"]::before,
.wpcf7 button[type="submit"]::before{
	content: '\f232' !important;
	font-family: 'Font Awesome 6 Brands' !important;
	margin-right: 8px !important;
}



/* ============================================================
   ALIPURAYA CENTER — REBRAND v2 PALETTE (2026-05-06)
   Top bar + Footer : #033e8a (deep plum)
   Menu bar         : #FAF7EB (warm ivory)
   CTA buttons      : cream interior + gold gradient ring + plum text + circle arrow
   Overrides ALL prior Silver Orchid palette rules above (last in cascade wins).
   ============================================================ */

:root{
    --primary-color   : #033e8a !important;
    --secondary-color : #FAF7EB !important;
    --text-color      : #033e8a !important;
    --accent-color    : #033e8a !important;
}

/* ----- TOP BAR ----- */
.topbar,
.main-header .topbar{
    background: #033e8a !important;
    background-image: none !important;
}
.topbar,
.topbar p,
.topbar a,
.topbar-info-text p,
.topbar-info-text p a,
.topbar-contact-info ul li a,
.topbar-social-links a{
    color: #FAF7EB !important;
}
.topbar a:hover,
.topbar-info-text p a:hover,
.topbar-contact-info ul li a:hover,
.topbar-social-links a:hover{
    color: #033e8a !important;
}

/* ----- MAIN HEADER + NAVBAR — cream ----- */
.main-header,
.main-header .header-sticky,
.header-sticky,
.header-sticky.active,
.navbar{
    background: #FAF7EB !important;
    background-color: #FAF7EB !important;
}
.main-header .topbar{ background: #033e8a !important; }

/* Nav menu link text — plum on cream, gold on hover */
.navbar-nav .nav-item .nav-link,
.navbar-nav li a,
.main-menu ul li a,
.main-menu ul li.submenu > a:after{
    color: #033e8a !important;
}
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .current-menu-item > a,
.navbar-nav li a:hover,
.main-menu ul li a:hover{
    color: #033e8a !important;
}

/* Submenus on cream */
.navbar-nav .sub-menu,
.main-menu ul ul{
    background: #FAF7EB !important;
    border: 1px solid rgba(3, 62, 138, 0.12) !important;
    box-shadow: 0 6px 20px rgba(3, 62, 138, 0.10) !important;
}
.navbar-nav .sub-menu li a,
.main-menu ul ul li a{ color: #033e8a !important; }
.navbar-nav .sub-menu li a:hover,
.main-menu ul ul li a:hover{ color: #033e8a !important; }

/* Mobile slicknav */
.slicknav_menu, .slicknav_nav{ background: #FAF7EB !important; }
.slicknav_nav a{ color: #033e8a !important; }
.slicknav_nav a:hover{ color: #033e8a !important; background: rgba(3, 62, 138, 0.05) !important; }
.slicknav_btn .slicknav_icon-bar{ background: #033e8a !important; }

/* ----- FOOTER ----- */
footer, .footer, .site-footer,
.main-footer,
.footer-main, .footer-widgets, .footer-bottom, .copyright-wrapper,
.footer-header, .footer-links{
    background: #033e8a !important;
    background-image: none !important;
    color: #FAF7EB !important;
}
.main-footer p, .main-footer span, .main-footer h1, .main-footer h2,
.main-footer h3, .main-footer h4, .main-footer h5, .main-footer h6{
    color: #FAF7EB !important;
}
footer a, .footer a, .site-footer a, .main-footer a{ color: #033e8a !important; }
footer a:hover, .footer a:hover, .main-footer a:hover{ color: #FAF7EB !important; }

/* ----- HEADINGS ----- */
h1, h2, h3, h4, h5, h6 { color: #033e8a; }
.section-title h1,
.section-title h2{ color: #033e8a !important; }
.section-title h3{ color: #033e8a !important; }
.section-title.dark-section h1,
.section-title.dark-section h2,
.section-title.dark-section h3,
.section-title.dark-section p{ color: #FAF7EB !important; }
.section-title h1 span,
.section-title h2 span,
.our-services .section-title h2 span{
    background: linear-gradient(90deg, #033e8a 0%, #033e8a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ----- LINKS ----- */
a:not(.theme-btn):not(.btn-primary):not(.btn-default){ color: #033e8a; }
a:not(.theme-btn):not(.btn-primary):not(.btn-default):hover{ color: #033e8a; }

/* ----- HERO BANNER OVERLAY ----- */
.hero::before,
.hero.hero-slider-layout .hero-slide::before{
    background: linear-gradient(270deg, rgba(3, 62, 138, 0.28) 43.57%, rgba(3, 62, 138, 0.85) 100%) !important;
}

/* ----- IVORY SECTION BACKGROUNDS ----- */
.bg-light, .section-bg, .bg-secondary,
.why-choose-us, .our-services{
    background: #FAF7EB !important;
    background-image: none !important;
    background-color: #FAF7EB !important;
}
.about-us-body{
    background: #FFFFFF !important;
    border: 1px solid #dfeaf3 !important;
    box-shadow: 0 4px 24px rgba(3, 62, 138, 0.08) !important;
}
.about-us-body-content h3{ color: #033e8a !important; }
.about-us-body-content p{ color: #5B4A55 !important; }
.our-services .section-title h3{ color: #033e8a !important; }
.our-services .section-title h2{ color: #033e8a !important; }
.our-services .section-title p{ color: #5B4A55 !important; }
.our-services .service-item{
    border: 1px solid #dfeaf3 !important;
    box-shadow: 0 4px 20px rgba(3, 62, 138, 0.06) !important;
}
.why-choose-counter-content h3,
.why-choose-counter-content p{ color: #033e8a !important; }
.why-choose-counter-list{ border-top: 1px solid rgba(3, 62, 138, 0.15) !important; }
.why-choose-counter-item:after{ background: rgba(3, 62, 138, 0.15) !important; }
.why-choose-item{ box-shadow: 0 4px 20px rgba(3, 62, 138, 0.06) !important; }


/* ============================================================
   CTA BUTTONS — cream + gold gradient ring + plum text + circle chevron
   Matches the "Book an Appointment" reference image.
   ============================================================ */
.btn-primary,
.theme-btn,
button.theme-btn,
a.theme-btn,
.btn-default,
input[type="submit"]{
    position: relative !important;
    display: inline-block !important;
    background: #FAF7EB url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><circle cx='25' cy='25' r='22' fill='none' stroke='%23033e8a' stroke-width='2'/><path d='M21 17 L29 25 L21 33' fill='none' stroke='%23033e8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") right 12px center / 32px no-repeat !important;
    background-color: #FAF7EB !important;
    color: #033e8a !important;
    font-weight: 700 !important;
    text-transform: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 70px 14px 32px !important;
    text-decoration: none !important;
    z-index: 0;
    overflow: visible !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}
.btn-primary::before,
.theme-btn::before,
button.theme-btn::before,
a.theme-btn::before,
.btn-default::before,
input[type="submit"]::before{
    content: "" !important;
    position: absolute !important;
    inset: -2px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 50%, #033e8a 100%) !important;
    z-index: -1 !important;
    opacity: 1 !important;
}
.btn-primary:hover,
.theme-btn:hover,
button.theme-btn:hover,
a.theme-btn:hover,
.btn-default:hover,
input[type="submit"]:hover{
    color: #033e8a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(3, 62, 138, 0.18) !important;
}

/* Floating enquiry button */
.enquiry-floating-btn{
    background: #FAF7EB !important;
    color: #033e8a !important;
    border: 2px solid #033e8a !important;
    box-shadow: 0 5px 20px rgba(3, 62, 138, 0.4) !important;
}
.enquiry-floating-btn:hover{
    background: #FFFFFF !important;
    color: #033e8a !important;
    box-shadow: 0 8px 25px rgba(3, 62, 138, 0.5) !important;
}


/* ============================================================
   HOME — ABOUT SECTION (Alipur AYA Centre layout) — 2026-05-06
   2-col split, single rounded image left, eyebrow + two-tone heading
   + body + 2 feature rows + Know More CTA on right
   ============================================================ */

.about-us {
    background: #FAF7EB !important;
    padding: 100px 0;
    position: relative;
}

/* Single rounded image, no collage */
.about-us-image {
    position: relative;
}
.about-us-image .about-image-box.single {
    border-radius: 28px;
    overflow: hidden;
}
.about-us-image .about-image-box.single figure {
    margin: 0;
}
.about-us-image .about-image-box.single figure img {
    width: 100%;
    height: auto;
    border-radius: 28px;
    display: block;
}

/* Heart eyebrow */
.about-us-content .section-title h3 {
    color: #033e8a !important;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
}
.about-us-content .section-title h3 i {
    color: #033e8a;
    font-size: 18px;
}

/* Two-tone heading: outer gold, span plum (override gradient) */
.about-us-content .section-title h2 {
    color: #033e8a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #033e8a !important;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 22px;
}
.about-us-content .section-title h2 span {
    color: #033e8a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #033e8a !important;
}

/* Body description */
.about-us-content .section-title p {
    color: #5B4A55;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Feature rows — checkmark circle + heading + body */
.about-us-feature-list {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}
.about-us-feature-list .about-feature-row {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
    align-items: flex-start;
}
.about-us-feature-list .about-feature-row:last-child {
    margin-bottom: 0;
}
.about-us-feature-list .feature-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #033e8a;
    color: #033e8a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 4px;
}
.about-us-feature-list .feature-content h4 {
    color: #033e8a !important;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
}
.about-us-feature-list .feature-content p {
    color: #5B4A55;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

/* Compact "Know More" CTA in about section */
.about-us-content .btn-default {
    padding: 11px 56px 11px 26px !important;
    font-size: 14px !important;
    background-size: 26px 26px !important;
    background-position: right 9px center !important;
}

/* Responsive */
@media (max-width: 991px) {
    .about-us {
        padding: 60px 0;
    }
    .about-us-image {
        margin-bottom: 40px;
    }
    .about-us-content .section-title h2 {
        font-size: 32px;
    }
}


/* ============================================================
   CTA BUTTONS v3 — FIX: cream interior actually shows now
   2026-05-06
   Technique: dual-background with padding-box + border-box clip.
   Replaces broken v2 (gradient was filling instead of ringing).
   ============================================================ */

/* Reset the original Proshield FontAwesome arrow glyph + my v2 attempt */
.btn-default::before,
.btn-primary::before,
.theme-btn::before,
button.theme-btn::before,
a.theme-btn::before,
input[type="submit"]::before {
    content: none !important;
    display: none !important;
}

/* Real button: cream interior + gold→plum gradient 2px ring */
.btn-default,
.btn-primary,
.theme-btn,
button.theme-btn,
a.theme-btn,
input[type="submit"] {
    position: relative !important;
    display: inline-block !important;
    /* Two backgrounds stacked: cream clipped to padding-box, gradient clipped to border-box.
       The 2px transparent border reveals the gradient underneath. */
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(135deg, #0078b7 0%, #033e8a 50%, #033e8a 100%) border-box !important;
    background-color: transparent !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    color: #033e8a !important;
    font-weight: 700 !important;
    text-transform: none !important;
    padding: 14px 64px 14px 30px !important;
    overflow: visible !important;
    z-index: 1 !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, color 0.25s ease !important;
}

/* Circle chevron on the right edge — FontAwesome glyph inside a plum-bordered circle */
.btn-default::after,
.btn-primary::after,
.theme-btn::after,
button.theme-btn::after,
a.theme-btn::after,
input[type="submit"]::after {
    content: "\f054" !important;        /* fa-chevron-right */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #033e8a !important;
    color: #033e8a !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-left: 1px !important;        /* optical centering of the chevron */
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease !important;
}

/* Hover: subtle lift + arrow nudges right + circle fills plum */
.btn-default:hover,
.btn-primary:hover,
.theme-btn:hover,
button.theme-btn:hover,
a.theme-btn:hover,
input[type="submit"]:hover {
    color: #033e8a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(3, 62, 138, 0.18) !important;
}
.btn-default:hover::after,
.btn-primary:hover::after,
.theme-btn:hover::after,
button.theme-btn:hover::after,
a.theme-btn:hover::after,
input[type="submit"]:hover::after {
    background: #033e8a !important;
    color: #FAF7EB !important;
    transform: translateY(-50%) translateX(2px) !important;
}

/* Compact "Know More" variant in About section */
.about-us-content .btn-default {
    padding: 11px 52px 11px 24px !important;
    font-size: 14px !important;
}
.about-us-content .btn-default::after {
    width: 24px !important;
    height: 24px !important;
    font-size: 9px !important;
    right: 6px !important;
}


/* ============================================================
   CTA BUTTONS v4 — thicker ring + matching circle gradient + amber chevron
   2026-05-06
   - Outline: 2px → 4px
   - Text: bumped to 700 weight, solid plum (no opacity tricks)
   - Chevron circle: now uses the SAME gradient outline as the button
   - Chevron icon: amber/gold (#033e8a) matching the gradient mid-tone
   ============================================================ */

.btn-default,
.btn-primary,
.theme-btn,
button.theme-btn,
a.theme-btn,
input[type="submit"] {
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(135deg, #0078b7 0%, #033e8a 50%, #033e8a 100%) border-box !important;
    background-color: transparent !important;
    border: 4px solid transparent !important;       /* THICKER ring */
    color: #033e8a !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    -webkit-text-fill-color: #033e8a !important;
    padding: 16px 78px 16px 36px !important;
    border-radius: 999px !important;
}

.btn-default::after,
.btn-primary::after,
.theme-btn::after,
button.theme-btn::after,
a.theme-btn::after,
input[type="submit"]::after {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    /* Circle gets the SAME gradient ring as the button */
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(135deg, #0078b7 0%, #033e8a 50%, #033e8a 100%) border-box !important;
    border: 3px solid transparent !important;
    border-radius: 50% !important;
    color: #033e8a !important;                       /* amber chevron, not plum */
    -webkit-text-fill-color: #033e8a !important;
    width: 38px !important;
    height: 38px !important;
    right: 6px !important;
    padding-left: 1px !important;
}

/* Hover: lift + arrow nudges, circle's gradient stays */
.btn-default:hover::after,
.btn-primary:hover::after,
.theme-btn:hover::after,
button.theme-btn:hover::after,
a.theme-btn:hover::after,
input[type="submit"]:hover::after {
    transform: translateY(-50%) translateX(2px) !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(135deg, #0078b7 0%, #033e8a 50%, #033e8a 100%) border-box !important;
}

/* About section "Know More" — compact variant scaled down proportionally */
.about-us-content .btn-default {
    padding: 13px 64px 13px 28px !important;
    font-size: 15px !important;
    border-width: 3px !important;
}
.about-us-content .btn-default::after {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    border-width: 2.5px !important;
    right: 5px !important;
}


/* ============================================================
   CTA BUTTONS v5 — make compact "Know More" identical to main button,
   just smaller. Drops the border-width override that was causing
   the dashed/striped gradient artifact.
   2026-05-06
   ============================================================ */

/* About section's "Know More" — exactly the same look as the main CTA,
   only padding + font + circle scaled down. NO border-width override. */
.about-us-content .btn-default,
.about-us-content .btn-primary,
.about-us-content .theme-btn,
.about-us-content a.theme-btn,
.about-us-content button.theme-btn,
.about-us-content input[type="submit"] {
    padding: 12px 60px 12px 26px !important;
    font-size: 15px !important;
    border-width: 4px !important;          /* SAME as main button */
}

.about-us-content .btn-default::after,
.about-us-content .btn-primary::after,
.about-us-content .theme-btn::after,
.about-us-content a.theme-btn::after,
.about-us-content button.theme-btn::after,
.about-us-content input[type="submit"]::after {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    border-width: 3px !important;
    right: 5px !important;
}


/* ============================================================
   CTA BUTTONS v6 — scope fix, 2026-05-06
   Earlier rules used `input[type="submit"]` which leaked the cream
   pill + gradient ring + chevron onto search forms, admin bar, etc.
   Reset every submit/button that DOESN'T have an explicit CTA class.
   ============================================================ */

/* Strip CTA styling from submit inputs that aren't explicitly CTAs */
input[type="submit"]:not(.btn-default):not(.btn-primary):not(.theme-btn) {
    all: revert !important;
}
input[type="submit"]:not(.btn-default):not(.btn-primary):not(.theme-btn)::before,
input[type="submit"]:not(.btn-default):not(.btn-primary):not(.theme-btn)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* Same for plain <button> elements without a CTA class */
button:not(.btn-default):not(.btn-primary):not(.theme-btn)::before,
button:not(.btn-default):not(.btn-primary):not(.theme-btn)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* And for any common WP / theme search form widgets — explicit reset */
.search-form input[type="submit"],
.searchform input[type="submit"],
.wp-block-search input[type="submit"],
.wp-block-search button,
#searchform input[type="submit"],
#adminbarsearch input[type="submit"],
#wpadminbar input[type="submit"],
#wpadminbar button {
    all: revert !important;
}
.search-form input[type="submit"]::before,
.search-form input[type="submit"]::after,
.searchform input[type="submit"]::before,
.searchform input[type="submit"]::after,
.wp-block-search input[type="submit"]::before,
.wp-block-search input[type="submit"]::after,
.wp-block-search button::before,
.wp-block-search button::after,
#searchform input[type="submit"]::before,
#searchform input[type="submit"]::after,
#adminbarsearch input[type="submit"]::before,
#adminbarsearch input[type="submit"]::after,
#wpadminbar input[type="submit"]::before,
#wpadminbar input[type="submit"]::after,
#wpadminbar button::before,
#wpadminbar button::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}


/* ============================================================
   CTA BUTTONS v7 — gradient direction fix, 2026-05-06
   135deg diagonal compressed to barely-visible color shift on
   small buttons. Switching to 90deg horizontal so the gold→plum
   transition is fully visible at any button width.
   ============================================================ */

.btn-default,
.btn-primary,
.theme-btn,
button.theme-btn,
a.theme-btn,
.about-us-content .btn-default,
.about-us-content .btn-primary,
.about-us-content .theme-btn,
.about-us-content a.theme-btn,
.about-us-content button.theme-btn {
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(90deg, #0078b7 0%, #0078b7 35%, #033e8a 65%, #033e8a 100%) border-box !important;
}

.btn-default::after,
.btn-primary::after,
.theme-btn::after,
button.theme-btn::after,
a.theme-btn::after,
.about-us-content .btn-default::after,
.about-us-content .btn-primary::after,
.about-us-content .theme-btn::after,
.about-us-content a.theme-btn::after,
.about-us-content button.theme-btn::after {
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(90deg, #0078b7 0%, #0078b7 35%, #033e8a 65%, #033e8a 100%) border-box !important;
}

/* Hover keeps the same horizontal gradient direction */
.btn-default:hover::after,
.btn-primary:hover::after,
.theme-btn:hover::after,
button.theme-btn:hover::after,
a.theme-btn:hover::after,
.about-us-content .btn-default:hover::after,
.about-us-content .btn-primary:hover::after,
.about-us-content .theme-btn:hover::after,
.about-us-content a.theme-btn:hover::after,
.about-us-content button.theme-btn:hover::after {
    background:
        linear-gradient(90deg, #0078b7 0%, #0078b7 35%, #033e8a 65%, #033e8a 100%) padding-box,
        linear-gradient(90deg, #0078b7 0%, #0078b7 35%, #033e8a 65%, #033e8a 100%) border-box !important;
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}

/* About Us page — full description block (only renders on /about/) */
.about-us-full-description {
    margin-top: 24px;
    color: #5B4A55;
    font-size: 16px;
    line-height: 1.75;
}
.about-us-full-description p {
    margin-bottom: 16px;
}
.about-us-full-description p:last-child { margin-bottom: 0; }
.about-us-full-description strong { color: #033e8a; }


/* ============================================================
   SERVICE CARD BUTTON FIX — 2026-05-07
   Old silver-orchid `.service-flip-back .btn-book` rule was overriding
   the CTA treatment (transparent bg, 1.5px gold border, no chevron).
   Restore full CTA look (cream + gradient ring + chevron) at compact size.
   ============================================================ */

.service-flip-back .btn-default,
.service-flip-back .btn-book {
    position: relative !important;
    display: inline-block !important;
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(90deg, #0078b7 0%, #0078b7 35%, #033e8a 65%, #033e8a 100%) border-box !important;
    background-color: transparent !important;
    border: 3px solid transparent !important;
    border-radius: 999px !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 50px 10px 22px !important;
    margin-top: 12px !important;
    text-decoration: none !important;
    overflow: visible !important;
    z-index: 1 !important;
}

.service-flip-back .btn-default::before,
.service-flip-back .btn-book::before {
    content: none !important;
    display: none !important;
}

.service-flip-back .btn-default::after,
.service-flip-back .btn-book::after {
    content: "\f054" !important;
    display: flex !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 10px !important;
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(90deg, #0078b7 0%, #0078b7 35%, #033e8a 65%, #033e8a 100%) border-box !important;
    border: 2px solid transparent !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-left: 1px !important;
}

.service-flip-back .btn-default:hover,
.service-flip-back .btn-book:hover {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25) !important;
}

.service-flip-back .btn-default:hover::after,
.service-flip-back .btn-book:hover::after {
    transform: translateY(-50%) translateX(2px) !important;
}

/* Also ensure the back card text is readable */
.service-flip-back .room-name {
    color: #FAF7EB !important;
}
.service-flip-back .room-details,
.service-flip-back .room-details p {
    color: rgba(250, 247, 235, 0.85) !important;
}


/* ============================================================
   CTA BUTTONS v8 — LOGO COLOURS GRADIENT, 2026-05-07
   Replace the multi-stop gold/amber/brown gradient with the
   official logo palette: #0078b7 (gold) → #033e8a (plum).
   Applies to: main CTA, compact about button, service card
   button, and every chevron circle.
   ============================================================ */

/* Main + about-section buttons */
.btn-default,
.btn-primary,
.theme-btn,
button.theme-btn,
a.theme-btn,
.about-us-content .btn-default,
.about-us-content .btn-primary,
.about-us-content .theme-btn,
.about-us-content a.theme-btn,
.about-us-content button.theme-btn,
.service-flip-back .btn-default,
.service-flip-back .btn-book {
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(90deg, #0078b7 0%, #033e8a 100%) border-box !important;
}

/* Chevron circles on all of the above */
.btn-default::after,
.btn-primary::after,
.theme-btn::after,
button.theme-btn::after,
a.theme-btn::after,
.about-us-content .btn-default::after,
.about-us-content .btn-primary::after,
.about-us-content .theme-btn::after,
.about-us-content a.theme-btn::after,
.about-us-content button.theme-btn::after,
.service-flip-back .btn-default::after,
.service-flip-back .btn-book::after {
    background:
        linear-gradient(#FAF7EB, #FAF7EB) padding-box,
        linear-gradient(90deg, #0078b7 0%, #033e8a 100%) border-box !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}

/* Hover — circle fills with the same gradient, chevron flips to cream */
.btn-default:hover::after,
.btn-primary:hover::after,
.theme-btn:hover::after,
button.theme-btn:hover::after,
a.theme-btn:hover::after,
.about-us-content .btn-default:hover::after,
.about-us-content .btn-primary:hover::after,
.about-us-content .theme-btn:hover::after,
.about-us-content a.theme-btn:hover::after,
.about-us-content button.theme-btn:hover::after,
.service-flip-back .btn-default:hover::after,
.service-flip-back .btn-book:hover::after {
    background:
        linear-gradient(90deg, #0078b7 0%, #033e8a 100%) padding-box,
        linear-gradient(90deg, #0078b7 0%, #033e8a 100%) border-box !important;
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    transform: translateY(-50%) translateX(2px) !important;
}


/* ============================================================
   SERVICE CARDS — REBRAND TO LOGO PALETTE (2026-05-07)
   The flip-card front/back still used Proshield cyan/orange and
   silver-orchid plum/orchid. Switching both to Alipur AYA Centre
   logo colours: #0078b7 (gold) + #033e8a (plum).
   ============================================================ */

/* FRONT: cream-to-gold-tinted background, plum heading */
.service-flip-front {
    background: linear-gradient(180deg, #FAF7EB 0%, #cfe6f4 100%) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
    box-shadow: 0 4px 18px rgba(3, 62, 138, 0.10) !important;
}
.service-flip-front h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}
.service-flip-front .service-flip-icon img {
    filter: none;
}

/* BACK: logo plum solid (matches button gradient end-stop) */
.service-flip-back {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    box-shadow: 0 4px 18px rgba(3, 62, 138, 0.20) !important;
}
.service-flip-back .room-name {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}
.service-flip-back p,
.service-flip-back .room-details,
.service-flip-back .room-details p {
    color: rgba(250, 247, 235, 0.88) !important;
}

/* Subtle gold accent line at the top of the back card (logo-gold) */
.service-flip-back::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent 0%, #0078b7 50%, transparent 100%);
    opacity: 0.85;
}


/* ============================================================
   SERVICE CARD FALLBACK IMAGE — match logo palette
   2026-05-07
   The default placeholder shown when a service post has no
   featured image was silver-orchid rose-gold → orchid (#033e8a → #7B3E6B)
   with a #3B1F3A dot. Switching to #0078b7 → #033e8a (logo colours).
   ============================================================ */

.service-flip-front:not(:has(.service-flip-icon))::before,
.service-flip-front .service-flip-icon:empty {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g transform='translate(40,40)'><path d='M0 -22 C6 -12 6 -4 0 4 C-6 -4 -6 -12 0 -22 Z' fill='white' fill-opacity='0.9'/><path d='M22 0 C12 6 4 6 -4 0 C4 -6 12 -6 22 0 Z' fill='white' fill-opacity='0.9'/><path d='M0 22 C-6 12 -6 4 0 -4 C6 4 6 12 0 22 Z' fill='white' fill-opacity='0.9'/><path d='M-22 0 C-12 -6 -4 -6 4 0 C-4 6 -12 6 -22 0 Z' fill='white' fill-opacity='0.9'/><circle r='3' fill='%23033e8a'/></g></svg>") center / 90px no-repeat,
        linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}


/* ============================================================
   WHY CHOOSE US — Alipur AYA layout (2026-05-07)
   Centered two-tone heading + alternating numbered boxes (plum / gold)
   ============================================================ */

.why-choose-us {
    background: #FFFFFF !important;
    background-image: none !important;
    padding: 90px 0 !important;
}

/* Centered section title — override dark-section (now on white bg) */
.why-choose-us .section-title { text-align: center !important; }
.why-choose-us .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    margin-bottom: 14px !important;
}
.why-choose-us .section-title h3 i { color: #033e8a !important; }
.why-choose-us .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
}
.why-choose-us .section-title h2 span {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}
.why-choose-us .section-title.dark-section p,
.why-choose-us .section-title p { color: #5B4A55 !important; }

/* The boxes list */
.why-choose-us .why-choose-list {
    max-width: 920px;
    margin: 48px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}
.why-choose-us .why-choose-item {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    border-radius: 18px !important;
    padding: 24px 36px !important;
    position: relative !important;
    box-shadow: 0 8px 24px rgba(3, 62, 138, 0.12) !important;
}
.why-choose-us .why-choose-item-left {
    background: #033e8a !important;
    margin-right: 70px !important;
    flex-direction: row !important;
    text-align: left !important;
}
.why-choose-us .why-choose-item-right {
    background: #0078b7 !important;
    margin-left: 70px !important;
    flex-direction: row-reverse !important;
    text-align: right !important;
}
.why-choose-us .why-choose-number {
    flex: 0 0 auto !important;
    width: 72px !important;
    height: 72px !important;
    background: #FFFFFF !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.20) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #033e8a !important;
}
.why-choose-us .why-choose-item-content { flex: 1 1 auto; }
.why-choose-us .why-choose-item-content h4 {
    margin: 0 0 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.why-choose-us .why-choose-item-content p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content h4,
.why-choose-us .why-choose-item-left .why-choose-item-content p { color: #FAF7EB !important; }
.why-choose-us .why-choose-item-right .why-choose-item-content h4,
.why-choose-us .why-choose-item-right .why-choose-item-content p { color: #033e8a !important; }

.why-choose-us .why-choose-counter-list { margin-top: 60px !important; }

@media (max-width: 767px) {
    .why-choose-us .why-choose-item-left,
    .why-choose-us .why-choose-item-right {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: row !important;
        text-align: left !important;
        padding: 18px 20px !important;
        gap: 16px !important;
    }
    .why-choose-us .why-choose-number { width: 56px !important; height: 56px !important; font-size: 24px !important; }
    .why-choose-us .section-title h2 { font-size: 28px !important; }
}


/* ============================================================
   SERVICE BANNER — full-width image banner with plum overlay
   Sits directly below the Services section. 2026-05-07
   ============================================================ */

.service-banner {
    position: relative;
    padding: 110px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* fallback when no image uploaded — logo gradient */
    background-color: #033e8a;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    overflow: hidden;
}
.service-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(3, 62, 138, 0.78) 0%, rgba(3, 62, 138, 0.90) 100%);
    z-index: 1;
}
.service-banner > .container {
    position: relative;
    z-index: 2;
}
.service-banner-content h2 {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
}
.service-banner-content p {
    color: rgba(250, 247, 235, 0.92);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto 30px;
    max-width: 640px;
}
.service-banner-content .btn-default {
    display: inline-block;
}
@media (max-width: 991px) {
    .service-banner { padding: 80px 0; }
    .service-banner-content h2 { font-size: 30px; }
}
@media (max-width: 767px) {
    .service-banner { padding: 56px 0; }
    .service-banner-content h2 { font-size: 24px; }
    .service-banner-content p { font-size: 15px; }
}


/* ============================================================
   WHY CHOOSE US v2 — match mockup: overlapping staggered boxes
   2026-05-07
   - Boxes overlap vertically (negative margin)
   - Plum boxes (odd): flush-left, ~82% wide, sit ON TOP
   - Gold box (even): offset-left, flush-right, behind, text centred
   - Bigger number tiles
   ============================================================ */

.why-choose-us .why-choose-list {
    max-width: 940px !important;
    margin: 50px auto 0 !important;
    display: block !important;
    position: relative !important;
    gap: 0 !important;
}

.why-choose-us .why-choose-item {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    border-radius: 22px !important;
    padding: 30px 42px !important;
    position: relative !important;
    box-shadow: 0 12px 34px rgba(3, 62, 138, 0.20) !important;
    margin-bottom: -26px !important;   /* overlap the next box */
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }

/* Plum boxes (1, 3, …) — flush left, narrower on the right, on top */
.why-choose-us .why-choose-item-left {
    background: #033e8a !important;
    width: 82% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    flex-direction: row !important;
    text-align: left !important;
    z-index: 3 !important;
}

/* Gold box (2, 4, …) — offset from left, flush right, behind, text centred */
.why-choose-us .why-choose-item-right {
    background: #0078b7 !important;
    width: 82% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex-direction: row-reverse !important;
    text-align: center !important;
    z-index: 2 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;   /* taller so it peeks out above & below the plum boxes */
}
.why-choose-us .why-choose-item-right .why-choose-item-content {
    padding: 0 10px !important;
}

/* Number tile */
.why-choose-us .why-choose-number {
    flex: 0 0 auto !important;
    width: 78px !important;
    height: 78px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}

.why-choose-us .why-choose-item-content { flex: 1 1 auto !important; }
.why-choose-us .why-choose-item-content h4 {
    margin: 0 0 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.why-choose-us .why-choose-item-content p {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content h4,
.why-choose-us .why-choose-item-left .why-choose-item-content p {
    color: #FAF7EB !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content h4,
.why-choose-us .why-choose-item-right .why-choose-item-content p {
    color: #033e8a !important;
}

@media (max-width: 767px) {
    .why-choose-us .why-choose-item,
    .why-choose-us .why-choose-item-left,
    .why-choose-us .why-choose-item-right {
        width: 100% !important;
        margin: 0 0 16px !important;
        flex-direction: row !important;
        text-align: left !important;
        padding: 20px !important;
        gap: 16px !important;
    }
    .why-choose-us .why-choose-item-right .why-choose-item-content { padding: 0 !important; }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-number { width: 56px !important; height: 56px !important; font-size: 24px !important; border-radius: 12px !important; }
}


/* ============================================================
   WHY CHOOSE US v3 — final structure (matches mockup) 2026-05-07
   - One centred column (~740px), all boxes same width & aligned
   - Boxes overlap vertically (~16px); plum boxes sit on top
   - White rounded number tiles poke out the top & bottom of the box
   - Tile alternates LEFT (plum boxes) / RIGHT (gold box)
   - Gold box text centred; plum box text left-aligned
   ============================================================ */

.why-choose-us .why-choose-list {
    max-width: 740px !important;
    margin: 50px auto 0 !important;
    display: block !important;
    position: relative !important;
    gap: 0 !important;
}

.why-choose-us .why-choose-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 104px !important;
    border-radius: 22px !important;
    padding: 28px 38px !important;
    margin: 0 0 -16px 0 !important;          /* overlap the next box */
    overflow: visible !important;
    box-shadow: 0 14px 34px rgba(3, 62, 138, 0.22) !important;
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }

/* Plum boxes (1, 3, …) — on top */
.why-choose-us .why-choose-item-left {
    background: #033e8a !important;
    z-index: 3 !important;
}
/* Gold box (2, 4, …) — behind */
.why-choose-us .why-choose-item-right {
    background: #0078b7 !important;
    z-index: 2 !important;
}

/* White number tile — absolutely positioned so it pokes out top & bottom */
.why-choose-us .why-choose-number {
    position: absolute !important;
    top: -12px !important;
    bottom: -12px !important;
    width: 92px !important;
    height: auto !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    z-index: 4 !important;
}
.why-choose-us .why-choose-item-left .why-choose-number  { left: 18px !important; right: auto !important; }
.why-choose-us .why-choose-item-right .why-choose-number { right: 18px !important; left: auto !important; }

/* Content — pushed clear of the tile */
.why-choose-us .why-choose-item-content {
    flex: 1 1 auto !important;
    width: 100% !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content {
    padding-left: 96px !important;
    padding-right: 0 !important;
    text-align: left !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content {
    padding-right: 96px !important;
    padding-left: 0 !important;
    text-align: center !important;
}
.why-choose-us .why-choose-item-content h4 {
    margin: 0 0 6px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}
.why-choose-us .why-choose-item-content p {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content h4,
.why-choose-us .why-choose-item-left .why-choose-item-content p { color: #FAF7EB !important; }
.why-choose-us .why-choose-item-right .why-choose-item-content h4,
.why-choose-us .why-choose-item-right .why-choose-item-content p { color: #033e8a !important; }

/* Mobile */
@media (max-width: 767px) {
    .why-choose-us .why-choose-list { max-width: 100% !important; }
    .why-choose-us .why-choose-item {
        margin: 0 0 16px 0 !important;
        padding: 20px 16px !important;
        min-height: auto !important;
        border-radius: 16px !important;
    }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-number {
        width: 58px !important;
        top: -8px !important;
        bottom: -8px !important;
        font-size: 24px !important;
        border-radius: 12px !important;
    }
    .why-choose-us .why-choose-item-left .why-choose-number  { left: 12px !important; }
    .why-choose-us .why-choose-item-right .why-choose-number { right: 12px !important; }
    .why-choose-us .why-choose-item-left .why-choose-item-content  { padding-left: 70px !important; }
    .why-choose-us .why-choose-item-right .why-choose-item-content { padding-right: 70px !important; text-align: left !important; }
}


/* ============================================================
   WHY CHOOSE US — disable WOW fade animation on the boxes
   2026-05-07
   The .wow fadeInUp animation left box 3 stuck at partial opacity
   (washed-out lavender instead of #033e8a). Force full opacity.
   Also tighten the number tile a touch.
   ============================================================ */

.why-choose-us .why-choose-item.wow,
.why-choose-us .why-choose-item {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}

/* Make the number tile a bit more square / poke out less */
.why-choose-us .why-choose-number {
    top: -10px !important;
    bottom: -10px !important;
    width: 86px !important;
}

/* Reaffirm plum box bg (defends against any opacity bleed) */
.why-choose-us .why-choose-item-left { background-color: #033e8a !important; }
.why-choose-us .why-choose-item-right { background-color: #0078b7 !important; }


/* ============================================================
   WHY CHOOSE US v4 — accurate to the latest mockup. 2026-05-07
   - Wide centred column (~1000px)
   - Plum boxes (1, 3): full width, on top, tile on LEFT, text left
   - Tan box (2): NARROWER (stops ~55px short on the right), behind,
     tile on RIGHT, text centred
   - Big white rounded number tiles (~130px) poking ~22px out top & bottom
   - Generous corner radius; boxes overlap ~22px
   ============================================================ */

.why-choose-us .why-choose-list {
    max-width: 1000px !important;
    margin: 52px auto 0 !important;
    display: block !important;
    position: relative !important;
    gap: 0 !important;
}

.why-choose-us .why-choose-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 130px !important;
    border-radius: 26px !important;
    padding: 30px 44px !important;
    margin: 0 0 -22px 0 !important;          /* overlap next box */
    overflow: visible !important;
    box-shadow: 0 16px 38px rgba(3, 62, 138, 0.20) !important;
    /* kill wow animation so colours never get stuck half-faded */
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }

/* Plum boxes (1, 3, …) — full width, ON TOP */
.why-choose-us .why-choose-item-left {
    background: #033e8a !important;
    background-color: #033e8a !important;
    z-index: 3 !important;
    margin-right: 0 !important;
}
/* Tan box (2, 4, …) — narrower on the right, BEHIND */
.why-choose-us .why-choose-item-right {
    background: #033e8a !important;
    background-color: #033e8a !important;
    z-index: 2 !important;
    margin-right: 56px !important;
}

/* Big white number tile — pokes out top & bottom */
.why-choose-us .why-choose-number {
    position: absolute !important;
    top: -22px !important;
    bottom: -22px !important;
    width: 130px !important;
    height: auto !important;
    background: #FFFFFF !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 46px !important;
    font-weight: 800 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    z-index: 4 !important;
}
.why-choose-us .why-choose-item-left .why-choose-number  { left: 16px !important;  right: auto !important; }
.why-choose-us .why-choose-item-right .why-choose-number { right: 16px !important;  left: auto !important; }

/* Content — pushed clear of the tile */
.why-choose-us .why-choose-item-content {
    flex: 1 1 auto !important;
    width: 100% !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content {
    padding-left: 124px !important;
    padding-right: 0 !important;
    text-align: left !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content {
    padding-right: 124px !important;
    padding-left: 0 !important;
    text-align: center !important;
}
.why-choose-us .why-choose-item-content h4 {
    margin: 0 0 7px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}
.why-choose-us .why-choose-item-content p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content h4,
.why-choose-us .why-choose-item-left .why-choose-item-content p  { color: #FAF7EB !important; }
.why-choose-us .why-choose-item-right .why-choose-item-content h4,
.why-choose-us .why-choose-item-right .why-choose-item-content p { color: #033e8a !important; }

/* Mobile */
@media (max-width: 767px) {
    .why-choose-us .why-choose-list { max-width: 100% !important; }
    .why-choose-us .why-choose-item {
        margin: 0 0 18px 0 !important;
        padding: 22px 16px !important;
        min-height: auto !important;
        border-radius: 18px !important;
    }
    .why-choose-us .why-choose-item-right { margin-right: 0 !important; }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-number {
        width: 64px !important;
        top: -10px !important;
        bottom: -10px !important;
        font-size: 26px !important;
        border-radius: 14px !important;
    }
    .why-choose-us .why-choose-item-left .why-choose-number  { left: 12px !important; }
    .why-choose-us .why-choose-item-right .why-choose-number { right: 12px !important; }
    .why-choose-us .why-choose-item-left .why-choose-item-content  { padding-left: 78px !important; }
    .why-choose-us .why-choose-item-right .why-choose-item-content { padding-right: 78px !important; text-align: left !important; }
}


/* ============================================================
   WHY CHOOSE US v5 — APPROVED structure. 2026-05-08
   Plum boxes (1,3): full width, on TOP, white tile LEFT (pokes out), text left
   Tan box (2): narrower (right edge stops short), BEHIND, white tile RIGHT, text centred
   Big white rounded number tiles; boxes overlap ~24px; big rounded corners.
   This block is LAST in the file — it overrides every earlier why-choose rule.
   ============================================================ */

.why-choose-us .why-choose-list {
    max-width: 1000px !important;
    margin: 52px auto 0 !important;
    display: block !important;
    position: relative !important;
    gap: 0 !important;
}

.why-choose-us .why-choose-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 150px !important;
    border-radius: 28px !important;
    padding: 32px 50px !important;
    margin: 0 0 -24px 0 !important;          /* overlap the next box */
    overflow: visible !important;
    box-shadow: 0 18px 40px rgba(3, 62, 138, 0.16) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }

/* Plum boxes (1, 3, …) — FULL width, ON TOP */
.why-choose-us .why-choose-item-left {
    background-color: #033e8a !important;
    background-image: none !important;
    z-index: 3 !important;
    margin-right: 0 !important;
}
/* Tan box (2, 4, …) — NARROWER on the right, BEHIND */
.why-choose-us .why-choose-item-right {
    background-color: #033e8a !important;
    background-image: none !important;
    z-index: 2 !important;
    margin-right: 60px !important;
}

/* Big white number tile — absolutely positioned, pokes out top & bottom */
.why-choose-us .why-choose-number {
    position: absolute !important;
    top: -20px !important;
    bottom: -20px !important;
    width: 148px !important;
    height: auto !important;
    background: #FFFFFF !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 50px !important;
    font-weight: 800 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    z-index: 4 !important;
}
.why-choose-us .why-choose-item-left  .why-choose-number { left: 18px !important;  right: auto !important; }
.why-choose-us .why-choose-item-right .why-choose-number { right: 18px !important;  left: auto !important; }

/* Content — pushed clear of the tile */
.why-choose-us .why-choose-item-content {
    flex: 1 1 auto !important;
    width: 100% !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content {
    padding-left: 140px !important;
    padding-right: 0 !important;
    text-align: left !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content {
    padding-right: 140px !important;
    padding-left: 0 !important;
    text-align: center !important;
}
.why-choose-us .why-choose-item-content h4 {
    margin: 0 0 8px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}
.why-choose-us .why-choose-item-content p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}
.why-choose-us .why-choose-item-left  .why-choose-item-content h4,
.why-choose-us .why-choose-item-left  .why-choose-item-content p,
.why-choose-us .why-choose-item-right .why-choose-item-content h4,
.why-choose-us .why-choose-item-right .why-choose-item-content p {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}

/* Mobile */
@media (max-width: 767px) {
    .why-choose-us .why-choose-list { max-width: 100% !important; }
    .why-choose-us .why-choose-item {
        margin: 0 0 18px 0 !important;
        padding: 24px 16px !important;
        min-height: auto !important;
        border-radius: 18px !important;
    }
    .why-choose-us .why-choose-item-right { margin-right: 0 !important; }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-number {
        width: 66px !important;
        top: -10px !important;
        bottom: -10px !important;
        font-size: 28px !important;
        border-radius: 14px !important;
    }
    .why-choose-us .why-choose-item-left  .why-choose-number { left: 12px !important; }
    .why-choose-us .why-choose-item-right .why-choose-number { right: 12px !important; }
    .why-choose-us .why-choose-item-left  .why-choose-item-content { padding-left: 86px !important; }
    .why-choose-us .why-choose-item-right .why-choose-item-content { padding-right: 86px !important; text-align: left !important; }
}


/* ============================================================
   WHY CHOOSE US v6 — polish: square-ish tiles, tighter boxes
   2026-05-08
   - Box vertical padding & min-height reduced so the box hugs the text
   - Number tiles now read close to square (poke out ~16px each side)
   - Tan box (2) a touch less narrow
   ============================================================ */

.why-choose-us .why-choose-item {
    min-height: 116px !important;
    padding: 24px 50px !important;
    margin: 0 0 -22px 0 !important;
    border-radius: 24px !important;
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }

.why-choose-us .why-choose-item-right {
    margin-right: 48px !important;
}

.why-choose-us .why-choose-number {
    top: -16px !important;
    bottom: -16px !important;
    width: 150px !important;
    border-radius: 22px !important;
    font-size: 48px !important;
}

/* keep content clear of the (slightly different) tile width */
.why-choose-us .why-choose-item-left .why-choose-item-content  { padding-left: 144px !important; }
.why-choose-us .why-choose-item-right .why-choose-item-content { padding-right: 144px !important; }

/* tighten the line spacing a touch so 3-line copy doesn't push the box tall */
.why-choose-us .why-choose-item-content h4 { margin-bottom: 6px !important; font-size: 19px !important; }
.why-choose-us .why-choose-item-content p  { font-size: 14.5px !important; line-height: 1.5 !important; }

@media (max-width: 767px) {
    .why-choose-us .why-choose-item { min-height: auto !important; padding: 22px 16px !important; margin-bottom: 16px !important; }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-item-right { margin-right: 0 !important; }
    .why-choose-us .why-choose-number { width: 64px !important; top: -10px !important; bottom: -10px !important; font-size: 26px !important; }
    .why-choose-us .why-choose-item-left  .why-choose-item-content { padding-left: 84px !important; }
    .why-choose-us .why-choose-item-right .why-choose-item-content { padding-right: 84px !important; text-align: left !important; }
}


/* ============================================================
   WHY CHOOSE US v7 — measured to the mockup's geometry. 2026-05-08
   Box ~165px tall, padding generous. Tile = box + ~44px tall (tall
   rectangle, ~1.45 ratio) poking ~22px out top & bottom. Overlap ~14px.
   Plum boxes full width, on top. Tan box ~45px narrower, behind, tile
   near its right edge. All text cream.
   Last block in the file -> overrides all earlier why-choose CSS.
   ============================================================ */

.why-choose-us .why-choose-list {
    max-width: 1000px !important;
    margin: 52px auto 0 !important;
    display: block !important;
    position: relative !important;
    gap: 0 !important;
}

.why-choose-us .why-choose-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 165px !important;
    border-radius: 26px !important;
    padding: 38px 52px !important;
    margin: 0 0 -14px 0 !important;          /* small overlap */
    overflow: visible !important;
    box-shadow: 0 16px 36px rgba(3, 62, 138, 0.16) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }

/* Plum boxes (1, 3, …) — full width, ON TOP */
.why-choose-us .why-choose-item-left {
    background-color: #033e8a !important;
    background-image: none !important;
    z-index: 3 !important;
    margin-right: 0 !important;
}
/* Tan box (2, 4, …) — ~45px narrower on the right, BEHIND */
.why-choose-us .why-choose-item-right {
    background-color: #033e8a !important;
    background-image: none !important;
    z-index: 2 !important;
    margin-right: 45px !important;
}

/* White number tile — tall rectangle, pokes ~22px out top & bottom */
.why-choose-us .why-choose-number {
    position: absolute !important;
    top: -22px !important;
    bottom: -22px !important;
    width: 145px !important;
    height: auto !important;
    background: #FFFFFF !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 50px !important;
    font-weight: 800 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    z-index: 4 !important;
}
.why-choose-us .why-choose-item-left  .why-choose-number { left: 22px !important;  right: auto !important; }
.why-choose-us .why-choose-item-right .why-choose-number { right: 22px !important;  left: auto !important; }

/* Content — clear of the tile */
.why-choose-us .why-choose-item-content {
    flex: 1 1 auto !important;
    width: 100% !important;
}
.why-choose-us .why-choose-item-left .why-choose-item-content {
    padding-left: 142px !important;
    padding-right: 0 !important;
    text-align: left !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content {
    padding-right: 142px !important;
    padding-left: 0 !important;
    text-align: center !important;
}
.why-choose-us .why-choose-item-content h4 {
    margin: 0 0 8px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
}
.why-choose-us .why-choose-item-content p {
    margin: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
}
.why-choose-us .why-choose-item-left  .why-choose-item-content h4,
.why-choose-us .why-choose-item-left  .why-choose-item-content p,
.why-choose-us .why-choose-item-right .why-choose-item-content h4,
.why-choose-us .why-choose-item-right .why-choose-item-content p {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}

/* Mobile */
@media (max-width: 767px) {
    .why-choose-us .why-choose-list { max-width: 100% !important; }
    .why-choose-us .why-choose-item {
        margin: 0 0 18px 0 !important;
        padding: 24px 16px !important;
        min-height: auto !important;
        border-radius: 18px !important;
    }
    .why-choose-us .why-choose-item-right { margin-right: 0 !important; }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-number {
        width: 64px !important;
        top: -10px !important;
        bottom: -10px !important;
        font-size: 26px !important;
        border-radius: 14px !important;
    }
    .why-choose-us .why-choose-item-left  .why-choose-number { left: 12px !important; }
    .why-choose-us .why-choose-item-right .why-choose-number { right: 12px !important; }
    .why-choose-us .why-choose-item-left  .why-choose-item-content { padding-left: 84px !important; }
    .why-choose-us .why-choose-item-right .why-choose-item-content { padding-right: 84px !important; text-align: left !important; }
}


/* ============================================================
   WHY CHOOSE US v8 — clean redesign (3-card grid). 2026-05-08
   Warm ivory section, centred two-tone heading, three white cards
   each with a logo-gradient number badge, plum title (gold underline),
   muted body text, hover lift. Middle card highlighted in plum.
   Last block in the file -> overrides all earlier why-choose CSS.
   ============================================================ */

/* ---- Section ---- */
.why-choose-us {
    background: #FAF7EB !important;
    background-image: none !important;
    padding: 90px 0 !important;
}

/* ---- Heading (centred, two-tone gold + plum) ---- */
.why-choose-us .section-title { text-align: center !important; }
.why-choose-us .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: .5px !important;
    margin-bottom: 14px !important;
}
.why-choose-us .section-title h3 i { color: #033e8a !important; font-size: 17px !important; }
.why-choose-us .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}
.why-choose-us .section-title h2 span {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}
.why-choose-us .section-title.dark-section p,
.why-choose-us .section-title p { color: #6B5D6E !important; }

/* ---- Card grid ---- */
.why-choose-us .why-choose-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    max-width: 1080px !important;
    margin: 52px auto 0 !important;
    position: static !important;
    align-items: stretch !important;
}

/* ---- Card ---- */
.why-choose-us .why-choose-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    min-height: 0 !important;
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(3, 62, 138, 0.07) !important;
    border-radius: 22px !important;
    padding: 42px 30px 34px !important;
    margin: 0 !important;
    box-shadow: 0 10px 32px rgba(3, 62, 138, 0.08) !important;
    overflow: visible !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    z-index: auto !important;
}
.why-choose-us .why-choose-item:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 20px 44px rgba(3, 62, 138, 0.16) !important;
}

/* ---- Number badge (logo gradient) ---- */
.why-choose-us .why-choose-number {
    position: static !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 0 22px 0 !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    box-shadow: 0 10px 24px rgba(3, 62, 138, 0.25) !important;
}

/* ---- Card content ---- */
.why-choose-us .why-choose-item-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: center !important;
}
.why-choose-us .why-choose-item-content h4 {
    position: relative !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 18px 0 !important;
    padding-bottom: 12px !important;
}
.why-choose-us .why-choose-item-content h4::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: linear-gradient(90deg, #0078b7, #033e8a) !important;
}
.why-choose-us .why-choose-item-content p {
    color: #6B5D6E !important;
    -webkit-text-fill-color: #6B5D6E !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ---- Middle card highlighted (plum) ---- */
.why-choose-us .why-choose-item-right {
    background: linear-gradient(150deg, #0078b7 0%, #033e8a 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 16px 40px rgba(3, 62, 138, 0.24) !important;
}
.why-choose-us .why-choose-item-right:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 26px 50px rgba(3, 62, 138, 0.30) !important;
}
.why-choose-us .why-choose-item-right .why-choose-number {
    background: #FFFFFF !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content h4 {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content h4::after {
    background: linear-gradient(90deg, #0078b7, #FAF7EB) !important;
}
.why-choose-us .why-choose-item-right .why-choose-item-content p {
    color: rgba(250, 247, 235, 0.86) !important;
    -webkit-text-fill-color: rgba(250, 247, 235, 0.86) !important;
}

/* ---- Counter strip below ---- */
.why-choose-us .why-choose-counter-list { margin-top: 64px !important; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .why-choose-us .why-choose-list { grid-template-columns: 1fr !important; max-width: 460px !important; gap: 22px !important; }
    .why-choose-us .why-choose-item-right { transform: none !important; }
    .why-choose-us .section-title h2 { font-size: 30px !important; }
}


/* ============================================================
   WHY CHOOSE US v9 — TWO-TONE SPLIT BARS. 2026-05-08
   Full-width horizontal bars. Left ~26% = plum block w/ big number;
   right = white block w/ title (plum) + description (gray). Thin gold
   seam between the halves. Hover lift. Stacks on mobile.
   Last block in the file -> overrides every earlier why-choose rule.
   ============================================================ */

/* ---- Section ---- */
.why-choose-us {
    background: #FAF7EB !important;
    background-image: none !important;
    padding: 90px 0 !important;
}

/* ---- Heading (centred, two-tone gold + plum) ---- */
.why-choose-us .section-title { text-align: center !important; }
.why-choose-us .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: .4px !important;
    margin-bottom: 14px !important;
}
.why-choose-us .section-title h3 i { color: #033e8a !important; font-size: 17px !important; }
.why-choose-us .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
}
.why-choose-us .section-title h2 span {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}
.why-choose-us .section-title.dark-section p,
.why-choose-us .section-title p { color: #6B5D6E !important; }

/* ---- Bar list ---- */
.why-choose-us .why-choose-list {
    display: block !important;
    max-width: 980px !important;
    margin: 52px auto 0 !important;
    position: static !important;
    gap: 0 !important;
}

/* ---- Each bar ---- */
.why-choose-us .why-choose-item {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(3, 62, 138, 0.06) !important;
    box-shadow: 0 10px 28px rgba(3, 62, 138, 0.10) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    z-index: auto !important;
}
.why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
.why-choose-us .why-choose-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 40px rgba(3, 62, 138, 0.16) !important;
}

/* ---- Left plum block with the big number ---- */
.why-choose-us .why-choose-number {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    flex: 0 0 26% !important;
    max-width: 26% !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 34px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    box-shadow: none !important;
}
/* thin gold seam between the two halves */
.why-choose-us .why-choose-number::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 4px !important;
    background: linear-gradient(180deg, #0078b7 0%, #033e8a 100%) !important;
}

/* ---- Right white block with title + text ---- */
.why-choose-us .why-choose-item-content {
    flex: 1 1 auto !important;
    width: auto !important;
    background: #FFFFFF !important;
    padding: 30px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
}
.why-choose-us .why-choose-item-content h4 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
}
.why-choose-us .why-choose-item-content p {
    color: #6B5D6E !important;
    -webkit-text-fill-color: #6B5D6E !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ---- Counter strip below ---- */
.why-choose-us .why-choose-counter-list { margin-top: 64px !important; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .why-choose-us .why-choose-list { max-width: 100% !important; }
    .why-choose-us .why-choose-item {
        flex-direction: column !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }
    .why-choose-us .why-choose-item:last-child { margin-bottom: 0 !important; }
    .why-choose-us .why-choose-number {
        flex: 0 0 auto !important;
        max-width: none !important;
        width: 100% !important;
        padding: 20px !important;
        font-size: 34px !important;
    }
    .why-choose-us .why-choose-number::after {
        right: auto !important; left: 0 !important; top: auto !important; bottom: 0 !important;
        width: 100% !important; height: 4px !important;
        background: linear-gradient(90deg, #0078b7 0%, #033e8a 100%) !important;
    }
    .why-choose-us .why-choose-item-content { padding: 22px 20px !important; }
    .why-choose-us .section-title h2 { font-size: 30px !important; }
}


/* ============================================================
   WHY CHOOSE US v10 — TWO-TONE SPLIT BARS (max specificity, final)
   2026-05-08. Prefixed with `body` so it beats every earlier block.
   ============================================================ */

body .why-choose-us {
    background: #FAF7EB !important;
    background-image: none !important;
    padding: 90px 0 !important;
}

/* Heading */
body .why-choose-us .section-title { text-align: center !important; }
body .why-choose-us .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    letter-spacing: .4px !important;
    margin: 0 0 14px 0 !important;
}
body .why-choose-us .section-title h3 i { color: #033e8a !important; font-size: 17px !important; }
body .why-choose-us .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    font-weight: 700 !important;
    font-size: 40px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
body .why-choose-us .section-title h2 span {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}
body .why-choose-us .section-title p,
body .why-choose-us .section-title.dark-section p { color: #6B5D6E !important; -webkit-text-fill-color: #6B5D6E !important; }

/* List */
body .why-choose-us .why-choose-list {
    display: block !important;
    max-width: 980px !important;
    margin: 52px auto 0 !important;
    position: static !important;
    gap: 0 !important;
    grid-template-columns: none !important;
}

/* Each bar */
body .why-choose-us .why-choose-list .why-choose-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    text-align: left !important;
    width: 100% !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(3, 62, 138, 0.06) !important;
    box-shadow: 0 10px 28px rgba(3, 62, 138, 0.10) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
    position: relative !important;
    z-index: auto !important;
}
body .why-choose-us .why-choose-list .why-choose-item:last-child { margin-bottom: 0 !important; }
body .why-choose-us .why-choose-list .why-choose-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 40px rgba(3, 62, 138, 0.16) !important;
}
/* both colour variants share the same bar styling */
body .why-choose-us .why-choose-list .why-choose-item-left,
body .why-choose-us .why-choose-list .why-choose-item-right {
    background: #FFFFFF !important;
    background-image: none !important;
    margin: 0 0 20px 0 !important;
    transform: none !important;
    z-index: auto !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left:last-child,
body .why-choose-us .why-choose-list .why-choose-item-right:last-child { margin-bottom: 0 !important; }

/* Left plum block + big number */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    flex: 0 0 26% !important;
    max-width: 26% !important;
    min-width: 110px !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 34px 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number::before { content: none !important; display: none !important; }
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important; left: auto !important;
    top: 0 !important; bottom: 0 !important;
    width: 4px !important; height: auto !important;
    background: linear-gradient(180deg, #0078b7 0%, #033e8a 100%) !important;
    display: block !important;
}

/* Right white block + content */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content {
    flex: 1 1 auto !important;
    width: auto !important;
    background: #FFFFFF !important;
    padding: 28px 38px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4::after { content: none !important; display: none !important; }
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content p {
    color: #6B5D6E !important;
    -webkit-text-fill-color: #6B5D6E !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* Counter strip */
body .why-choose-us .why-choose-counter-list { margin-top: 64px !important; }

/* Responsive */
@media (max-width: 767px) {
    body .why-choose-us .why-choose-list { max-width: 100% !important; }
    body .why-choose-us .why-choose-list .why-choose-item { flex-direction: column !important; border-radius: 14px !important; margin-bottom: 16px !important; }
    body .why-choose-us .why-choose-list .why-choose-item:last-child { margin-bottom: 0 !important; }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
        flex: 0 0 auto !important; max-width: none !important; width: 100% !important; padding: 20px !important; font-size: 34px !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-number::after {
        right: auto !important; left: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; height: 4px !important;
        background: linear-gradient(90deg, #0078b7 0%, #033e8a 100%) !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content { padding: 22px 20px !important; }
    body .why-choose-us .section-title h2 { font-size: 30px !important; }
}


/* ============================================================
   ABOUT PAGE — Director's Speech + Mission & Vision. 2026-05-08
   ============================================================ */

/* ---- Director's Speech ---- */
.director-speech {
    background: #FFFFFF;
    padding: 90px 0;
}
.director-speech-image { position: relative; }
.director-speech-image figure { margin: 0; border-radius: 24px; overflow: hidden; }
.director-speech-image figure img { width: 100%; height: auto; display: block; border-radius: 24px; }
.director-speech-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(250,247,235,0.5);
    font-size: 90px;
}
.director-speech-content .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 500; text-transform: capitalize; margin-bottom: 14px;
}
.director-speech-content .section-title h3 i { color: #033e8a; font-size: 16px; }
.director-speech-content .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    font-weight: 700; font-size: 32px; line-height: 1.25; margin-bottom: 22px;
}
.director-speech-text { color: #5B4A55; font-size: 15.5px; line-height: 1.8; }
.director-speech-text p { margin: 0 0 16px; }
.director-speech-text p:last-child { margin-bottom: 0; }
.director-speech-text strong { color: #033e8a; }
.director-speech-signoff {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid rgba(3, 62, 138,0.12);
    display: flex; flex-direction: column;
}
.director-speech-signoff .ds-name {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px; font-style: italic; font-weight: 600; color: #033e8a;
}
.director-speech-signoff .ds-title { font-size: 13.5px; color: #8A7D90; margin-top: 4px; letter-spacing: .3px; }

@media (max-width: 991px) {
    .director-speech { padding: 60px 0; }
    .director-speech-image { margin-bottom: 36px; }
    .director-speech-content .section-title h2 { font-size: 26px; }
}

/* ---- Mission & Vision ---- */
.mission-vision {
    background: #FAF7EB;
    padding: 90px 0;
}
.mission-vision .section-title { text-align: center; }
.mission-vision .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 16px; font-weight: 500; text-transform: capitalize; margin-bottom: 14px;
}
.mission-vision .section-title h3 i { color: #033e8a; font-size: 16px; }
.mission-vision .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    font-weight: 700; font-size: 36px; margin-bottom: 0;
}
.mission-vision .mv-cards-row { margin-top: 48px; }
.mv-card {
    height: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(3, 62, 138,0.07);
    border-radius: 22px;
    padding: 40px 36px;
    box-shadow: 0 12px 34px rgba(3, 62, 138,0.08);
    transition: transform .3s ease, box-shadow .3s ease;
    margin-bottom: 0;
}
.mv-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(3, 62, 138,0.16); }
.mv-icon {
    width: 64px; height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    display: flex; align-items: center; justify-content: center;
    color: #FFFFFF; font-size: 26px;
    box-shadow: 0 10px 24px rgba(3, 62, 138,0.22);
    margin-bottom: 22px;
}
.mv-card.mv-vision .mv-icon { background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%); }
.mv-card h4 { color: #033e8a !important; -webkit-text-fill-color: #033e8a !important; font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.mv-card p { color: #5B4A55; font-size: 15px; line-height: 1.75; margin: 0; }

@media (max-width: 991px) {
    .mission-vision { padding: 60px 0; }
    .mission-vision .section-title h2 { font-size: 28px; }
    .mv-card { margin-bottom: 22px; }
    .mv-card:last-child { margin-bottom: 0; }
}


/* ============================================================
   WHY CHOOSE US v11 — white-tile overlapping bars (the mockup).
   2026-05-08. `body`-prefixed for max specificity -> wins over all
   earlier why-choose blocks.
   - Bars 1 & 3: deep plum, full width, ON TOP, tile on LEFT, text left
   - Bar 2: muted tan, ~16px inset, BEHIND, tile on RIGHT, text right
   - White rounded number tiles (tall-ish, plum number) poke ~14px out
   - Bars overlap ~18px. No box padding; padding lives on the content.
   ============================================================ */

/* Section */
body .why-choose-us {
    background: #FAF7EB !important;
    background-image: none !important;
    padding: 90px 0 !important;
}

/* Heading */
body .why-choose-us .section-title { text-align: center !important; }
body .why-choose-us .section-title h3 {
    color: #033e8a !important; -webkit-text-fill-color: #033e8a !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    font-size: 16px !important; font-weight: 500 !important; text-transform: capitalize !important;
    margin: 0 0 14px 0 !important;
}
body .why-choose-us .section-title h3 i { color: #033e8a !important; font-size: 17px !important; }
body .why-choose-us .section-title h2 {
    color: #033e8a !important; -webkit-text-fill-color: #033e8a !important;
    background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
    font-weight: 700 !important; font-size: 40px !important; line-height: 1.2 !important; margin: 0 !important;
}
body .why-choose-us .section-title h2 span { color: #033e8a !important; -webkit-text-fill-color: #033e8a !important; background: none !important; }
body .why-choose-us .section-title p, body .why-choose-us .section-title.dark-section p { color: #6B5D6E !important; -webkit-text-fill-color: #6B5D6E !important; }

/* List */
body .why-choose-us .why-choose-list {
    display: block !important;
    max-width: 1000px !important;
    margin: 52px auto 0 !important;
    position: relative !important;
    gap: 0 !important;
    grid-template-columns: none !important;
}

/* Each bar */
body .why-choose-us .why-choose-list .why-choose-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 120px !important;
    border-radius: 18px !important;
    padding: 0 !important;
    margin: 0 0 -18px 0 !important;
    overflow: visible !important;
    box-shadow: 0 12px 32px rgba(3, 62, 138, 0.16) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}
body .why-choose-us .why-choose-list .why-choose-item:last-child { margin-bottom: 0 !important; }

/* Plum bars (1, 3) — full width, ON TOP */
body .why-choose-us .why-choose-list .why-choose-item-left {
    background: #033e8a !important;
    background-color: #033e8a !important;
    background-image: none !important;
    z-index: 3 !important;
    flex-direction: row !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Tan bar (2) — slightly inset, BEHIND, mirrored */
body .why-choose-us .why-choose-list .why-choose-item-right {
    background: #B5A084 !important;
    background-color: #B5A084 !important;
    background-image: none !important;
    z-index: 2 !important;
    flex-direction: row-reverse !important;
    margin-left: 18px !important;
    margin-right: 6px !important;
}

/* White rounded number tile — pokes ~14px out top & bottom */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
    position: absolute !important;
    top: -14px !important;
    bottom: -14px !important;
    left: auto !important; right: auto !important;
    width: 94px !important;
    height: auto !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    z-index: 4 !important;
    margin: 0 !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number::before,
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number::after { content: none !important; display: none !important; }
body .why-choose-us .why-choose-list .why-choose-item-left  .why-choose-number { left: 22px !important; }
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number { right: 22px !important; }

/* Content */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content {
    flex: 1 1 auto !important;
    width: auto !important;
    background: transparent !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content {
    padding: 30px 44px 30px 142px !important;
    text-align: left !important;
}
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content {
    padding: 30px 142px 30px 44px !important;
    text-align: right !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4 {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4::after { content: none !important; display: none !important; }
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
/* tan bar — number stays plum; text stays white for contrast against #B5A084 */
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}

/* Counter strip */
body .why-choose-us .why-choose-counter-list { margin-top: 64px !important; }

/* Responsive */
@media (max-width: 767px) {
    body .why-choose-us .why-choose-list { max-width: 100% !important; }
    body .why-choose-us .why-choose-list .why-choose-item {
        flex-direction: row !important;
        margin: 0 0 16px 0 !important;
        min-height: auto !important;
        border-radius: 14px !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-right { flex-direction: row !important; margin-left: 0 !important; margin-right: 0 !important; }
    body .why-choose-us .why-choose-list .why-choose-item:last-child { margin-bottom: 0 !important; }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
        width: 56px !important; top: -8px !important; bottom: -8px !important; font-size: 24px !important; border-radius: 12px !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-left  .why-choose-number,
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number { left: 12px !important; right: auto !important; }
    body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content,
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content {
        padding: 20px 18px 20px 84px !important; text-align: left !important;
    }
    body .why-choose-us .section-title h2 { font-size: 30px !important; }
}


/* ============================================================
   TESTIMONIALS — rebrand to logo palette. 2026-05-08
   Was using a hotel bg image + silver-orchid plum/orchid/rose-gold.
   ============================================================ */

/* Testimonial box — drop the hotel photo, use the logo plum gradient */
.testimonial-box.parallaxie,
.testimonial-box {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}
.testimonial-box.parallaxie::before {
    background: linear-gradient(135deg, rgba(0, 120, 183, 0.06) 0%, rgba(3, 62, 138, 0.0) 100%) !important;
}

/* Author avatar circle — logo gold->plum */
.testimonial-body .author-image {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}
.testimonial-body .author-image::after { color: #FFFFFF !important; }

/* Quote glyph — logo gold */
.testimonial-quote::after { color: #0078b7 !important; }

/* Section title (outside the dark box) */
.our-testimonials .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}
.our-testimonials .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}
.our-testimonials .section-title h2 span {
    color: #0078b7 !important;
    -webkit-text-fill-color: #0078b7 !important;
    background: none !important;
}

/* Text inside the dark testimonial box stays light */
.testimonial-box .testimonial-content p,
.testimonial-box .author-content h3,
.testimonial-box .author-content p {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}
.testimonial-box .author-content p { color: rgba(250, 247, 235, 0.75) !important; }

/* Slider nav arrows — gold accent */
.testimonial-button-prev, .testimonial-button-next {
    border-color: #0078b7 !important;
    color: #0078b7 !important;
}


/* ============================================================
   WHY CHOOSE US v12 — kill the old ::before hover-fill overlay
   2026-05-08. The original theme had .why-choose-item::before that
   grew to 100% height on hover with a silver-orchid colour.
   ============================================================ */

body .why-choose-us .why-choose-list .why-choose-item::before,
body .why-choose-us .why-choose-list .why-choose-item:hover::before {
    content: none !important;
    display: none !important;
    background: none !important;
    height: 0 !important;
}

/* Clean hover — just a subtle lift + deeper shadow, no colour change */
body .why-choose-us .why-choose-list .why-choose-item:hover,
body .why-choose-us .why-choose-list .why-choose-item-left:hover,
body .why-choose-us .why-choose-list .why-choose-item-right:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 42px rgba(3, 62, 138, 0.22) !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left:hover {
    background: #033e8a !important;
    background-color: #033e8a !important;
}
body .why-choose-us .why-choose-list .why-choose-item-right:hover {
    background: #B5A084 !important;
    background-color: #B5A084 !important;
}
/* keep the text colours unchanged on hover */
body .why-choose-us .why-choose-list .why-choose-item:hover .why-choose-item-content h4 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
body .why-choose-us .why-choose-list .why-choose-item:hover .why-choose-item-content p {
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}
body .why-choose-us .why-choose-list .why-choose-item:hover .why-choose-number {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}


/* ============================================================
   ABOUT SECTION — image fills its column (kills the big horizontal gap)
   2026-05-08
   ============================================================ */

.about-us .about-us-image,
.about-us .about-us-image .about-image-box,
.about-us .about-us-image .about-image-box.single,
.about-us .about-us-image .about-image-box.single figure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
}
.about-us .about-us-image .about-image-box.single,
.about-us .about-us-image .about-image-box.single figure {
    border-radius: 28px !important;
    overflow: hidden !important;
}
.about-us .about-us-image .about-image-box.single figure img,
.about-us .about-us-image .about-image-box.single img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 28px !important;
}

/* Desktop: crop the portrait to a tidy 4:5 so it doesn't get extremely tall */
@media (min-width: 992px) {
    .about-us .about-us-image .about-image-box.single {
        aspect-ratio: 4 / 5;
    }
    .about-us .about-us-image .about-image-box.single figure {
        height: 100% !important;
        aspect-ratio: 4 / 5;
    }
    .about-us .about-us-image .about-image-box.single figure img,
    .about-us .about-us-image .about-image-box.single img {
        height: 100% !important;
        object-fit: cover !important;
        object-position: center 18% !important;
    }
}


/* ============================================================
   FOOTER — uniform gold contact icons + address line. 2026-05-08
   The envelope & map-marker icons sat in the <li> (cream text);
   the whatsapp icons sat in the <a> (gold). Now all gold to match.
   ============================================================ */

.footer-links ul li,
.footer-links ul li a,
.footer-links ul li i,
.footer-links ul li a i,
.footer-links ul li .fa,
.footer-links ul li .fa-whatsapp,
.footer-links ul li .fa-envelope,
.footer-links ul li .fa-map-marker,
.footer-links ul li svg {
    color: #033e8a !important;
}
.footer-links ul li a:hover,
.footer-links ul li a:hover i {
    color: #FAF7EB !important;
}
/* keep the column headings (h3) light, not gold */
.footer-links h3 {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}


/* ============================================================
   BOOK APPOINTMENT PAGE — form styling. 2026-05-08
   ============================================================ */

.book-appointment-header {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    padding: 90px 0 70px;
    text-align: center;
}
.book-appointment-header .page-header-box h1 {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    font-size: 38px; font-weight: 700; margin: 0 0 12px;
}
.book-appointment-header .breadcrumb { justify-content: center; }
.book-appointment-header .breadcrumb li,
.book-appointment-header .breadcrumb li a { color: rgba(250,247,235,0.8) !important; }
.book-appointment-header .breadcrumb li a:hover { color: #0078b7 !important; }
.book-appointment-header .breadcrumb li.active { color: #0078b7 !important; }

.book-appointment-section {
    background: #FAF7EB;
    padding: 80px 0;
}
.book-appointment-card {
    background: #FFFFFF;
    border: 1px solid rgba(3, 62, 138,0.07);
    border-radius: 24px;
    box-shadow: 0 16px 44px rgba(3, 62, 138,0.10);
    padding: 48px 48px 40px;
}
.book-appointment-card .section-title { margin-bottom: 32px; }
.book-appointment-card .section-title h3 {
    color: #033e8a !important; -webkit-text-fill-color: #033e8a !important;
    font-size: 16px; font-weight: 500; text-transform: capitalize; margin-bottom: 10px;
}
.book-appointment-card .section-title h2 {
    color: #033e8a !important; -webkit-text-fill-color: #033e8a !important;
    background: none !important; font-size: 32px; font-weight: 700; margin-bottom: 10px;
}
.book-appointment-card .section-title p { color: #6B5D6E; font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 560px; }

.book-appointment-form .form-group { margin-bottom: 20px; }
.book-appointment-form label {
    display: block; font-size: 13.5px; font-weight: 600; color: #033e8a;
    margin-bottom: 7px; letter-spacing: .2px;
}
.book-appointment-form label span { color: #C0392B; }
.book-appointment-form input[type="text"],
.book-appointment-form input[type="tel"],
.book-appointment-form input[type="date"],
.book-appointment-form select,
.book-appointment-form textarea {
    width: 100%;
    border: 1.5px solid rgba(3, 62, 138,0.18);
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 15px;
    color: #033e8a;
    background: #FFFFFF;
    transition: border-color .2s ease, box-shadow .2s ease;
    font-family: inherit;
}
.book-appointment-form input:focus,
.book-appointment-form select:focus,
.book-appointment-form textarea:focus {
    outline: none;
    border-color: #033e8a;
    box-shadow: 0 0 0 3px rgba(3, 62, 138,0.18);
}
.book-appointment-form textarea { resize: vertical; min-height: 110px; }
.book-appointment-form select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23033e8a' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

.book-appointment-submit { margin-top: 8px; text-align: center; }
/* the .btn-default CTA styling already applies; just make sure the WhatsApp icon shows + a touch of spacing */
.book-appointment-submit .btn-default i { margin-right: 6px; }

.book-appointment-note {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13px;
    color: #8A7D90;
}

@media (max-width: 767px) {
    .book-appointment-header { padding: 60px 0 50px; }
    .book-appointment-header .page-header-box h1 { font-size: 28px; }
    .book-appointment-section { padding: 50px 0; }
    .book-appointment-card { padding: 28px 20px 24px; border-radius: 18px; }
    .book-appointment-card .section-title h2 { font-size: 24px; }
}


/* ============================================================
   SERVICE CARDS — front face is now a link to the detail page
   2026-05-08
   ============================================================ */
a.service-flip-front,
.service-flip-wrap a.service-flip-front {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}
a.service-flip-front:hover h3 { color: #033e8a !important; }
.service-flip-wrap { cursor: pointer; }
.service-flip-back .btn-book { cursor: pointer; }

/* Testimonials heading — use the muted gold #033e8a like the other section headings (not the bright #0078b7) */
.our-testimonials .section-title h2 span {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}
.our-testimonials .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}
/* the quote glyph + slider arrows: keep gold but the muted one for consistency on the tan box is fine; quote glyph stays #0078b7 since it sits on a light area */
.testimonial-quote::after { color: #033e8a !important; }

/* Testimonial card — solid logo-tan #033e8a (was a 2-variable gradient that looked off) */
.testimonial-slider {
    background: #033e8a !important;
    background-image: none !important;
}
/* the dark backdrop box behind the card — keep it plum (already set) */
.testimonial-box.parallaxie,
.testimonial-box {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}
.testimonial-box::before { background: transparent !important; opacity: 0 !important; }
/* text on the gold card stays cream/white */
.testimonial-slider .testimonial-content p,
.testimonial-slider .author-content h3,
.testimonial-slider .author-content p { color: #FFFFFF !important; }
.testimonial-slider .author-content p { opacity: .8; }

/* ============================================================
   SERVICES HEADING — fix the gradient on the emphasis word.
   "Trusted Care for" = solid muted gold; "<span>Every Family</span>" =
   gold->plum gradient text (display:inline-block makes background-clip:text
   render reliably). body-prefixed so it wins over the older conflicting rules.
   2026-05-08
   ============================================================ */
body .our-services .section-title h2,
body .our-services.our-services .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    background-image: none !important;
}
body .our-services .section-title h2 span {
    display: inline-block !important;
    background: linear-gradient(90deg, #033e8a 0%, #033e8a 100%) !important;
    background-image: linear-gradient(90deg, #033e8a 0%, #033e8a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    padding-bottom: 0.05em !important;
}
/* keep the eyebrow gold too */
body .our-services .section-title h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}

/* ============================================================
   SECTION HEADINGS — unified gradient (golden -> plum) everywhere.
   2026-05-08. body-prefixed so it overrides every earlier conflicting rule.
   - Outer heading text  : solid muted gold #033e8a
   - Emphasis <span>     : #033e8a -> #033e8a gradient text
   - Dark sections (hero): stay cream/white
   ============================================================ */

body .section-title h1,
body .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    background-image: none !important;
}
body .section-title h1 span,
body .section-title h2 span {
    display: inline-block !important;
    background: linear-gradient(90deg, #033e8a 0%, #033e8a 100%) !important;
    background-image: linear-gradient(90deg, #033e8a 0%, #033e8a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    padding-bottom: 0.05em !important;
}

/* Testimonials: the <span> is the FIRST part ("What our"), so the outer
   text ("Clients Say") should be plum for a natural left->right gold->plum flow */
body .our-testimonials .section-title h2 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
}

/* Hero / dark sections — keep heading text cream, no gold */
body .section-title.dark-section h1,
body .section-title.dark-section h2,
body .section-title.dark-section h1 span,
body .section-title.dark-section h2 span,
body .section-title.dark-section h3,
body .section-title.dark-section p {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    background: none !important;
    background-image: none !important;
}

/* Section eyebrows (h3) — consistent muted gold (non-dark sections) */
body .section-title:not(.dark-section) h3 {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}

/* Hero slider pagination — force all bullets to render at full size
   (defeats any dynamic-bullet scaling so 17 slides show 17 visible dots) */
.hero.hero-slider-layout .hero-pagination {
    width: auto !important;
    max-width: 92vw !important;
    white-space: nowrap !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    align-items: center !important;
}
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet,
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active-main,
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active-prev,
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active-prev-prev,
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active-next,
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active-next-next {
    width: 12px !important;
    height: 12px !important;
    transform: scale(1) !important;
    opacity: .85 !important;
    visibility: visible !important;
    display: inline-block !important;
}
.hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
    transform: scale(1.15) !important;
}

/* ============================================================
   SERVICE CARDS — auto-height to fit the images natural aspect.


/* ============================================================
   SERVICE CARDS — auto-height to fit the image natural aspect.
   Front face drives the card height; back face overlays on flip.
   2026-05-08
   ============================================================ */
.service-flip-wrap {
    height: auto !important;
    min-height: 0 !important;
    perspective: 1200px;
}
.service-flip-inner {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    transform-style: preserve-3d;
    transition: transform 0.7s ease-in-out;
}
.service-flip-wrap:hover .service-flip-inner {
    transform: rotateY(180deg);
}

/* Front face: relative so it drives the wrap height */
.service-flip-front {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Back face: absolute, covers the front on flip */
.service-flip-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    overflow: auto !important;
}

/* Image — natural aspect, no crop */
.service-flip-front .service-flip-icon,
.service-flip-front .service-flip-icon img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
}

/* Fallback placeholder for cards with no featured image — give it a sensible fixed height */
.service-flip-front:not(:has(.service-flip-icon))::before,
.service-flip-front .service-flip-icon:empty {
    height: 200px !important;
}


/* ============================================================
   SERVICE DETAIL PAGE — universal blocks (features / steps / CTA).
   2026-05-08
   ============================================================ */

.service-entry { margin-bottom: 40px; }
.sd-block-heading {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 22px !important;
    position: relative;
    padding-bottom: 12px;
}
.sd-block-heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 48px; height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #033e8a 0%, #033e8a 100%);
}

/* What's Included */
.service-features-block { background: #FAF7EB; border: 1px solid rgba(3, 62, 138,0.07); border-radius: 18px; padding: 32px 32px 28px; margin: 0 0 36px; }
.service-features-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; }
.service-features-list li { display: flex; gap: 12px; align-items: flex-start; color: #033e8a; font-size: 15px; line-height: 1.5; }
.service-features-list li i { flex: 0 0 auto; color: #033e8a; font-size: 20px; margin-top: 1px; }
@media (max-width: 575px) { .service-features-list { grid-template-columns: 1fr; } }

/* How It Works */
.service-howitworks-block { margin: 0 0 36px; }
.service-steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-step { background: #FFFFFF; border: 1px solid rgba(3, 62, 138,0.07); border-radius: 16px; padding: 22px 22px 22px 80px; box-shadow: 0 8px 22px rgba(3, 62, 138,0.06); position: relative; }
.service-step .step-num {
    position: absolute;
    left: 18px; top: 18px;
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-size: 22px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(3, 62, 138,0.22);
}
.service-step .step-body h4 { color: #033e8a !important; -webkit-text-fill-color: #033e8a !important; font-size: 16px; font-weight: 700; margin: 0 0 6px; }
.service-step .step-body p { color: #6B5D6E; font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 575px) { .service-steps-grid { grid-template-columns: 1fr; } }

/* CTA Card */
.service-cta-card {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    border-radius: 20px;
    padding: 32px 36px;
    color: #FAF7EB;
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
    margin: 0 0 24px;
    box-shadow: 0 16px 36px rgba(3, 62, 138,0.22);
}
.service-cta-card .service-cta-content { flex: 1; }
.service-cta-card h3 { color: #FAF7EB !important; -webkit-text-fill-color: #FAF7EB !important; background: none !important; font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.service-cta-card p { color: rgba(250,247,235,0.85); font-size: 15px; line-height: 1.55; margin: 0; }
.service-cta-card .btn-default { flex-shrink: 0; }
@media (max-width: 767px) { .service-cta-card { flex-direction: column; align-items: stretch; text-align: center; } }


/* ============================================================
   WHY CHOOSE US — number tiles MUST stay inside the bars
   (no poke-out top or bottom). 2026-05-14
   ============================================================ */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
}
/* keep horizontal placement: left tile on plum bars, right on tan */
body .why-choose-us .why-choose-list .why-choose-item-left  .why-choose-number { left: 18px !important;  right: auto !important; }
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number { right: 18px !important;  left: auto !important; }

/* a touch more vertical padding so the bar comfortably contains the 90px tile */
body .why-choose-us .why-choose-list .why-choose-item {
    min-height: 130px !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content  { padding: 26px 44px 26px 130px !important; }
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content { padding: 26px 130px 26px 44px !important; }


/* ============================================================
   SERVICE DETAIL — "Our Services" panel moved under the CTA card.
   Now lives in the main (wide) column, styled as a multi-column
   link grid instead of a sidebar list. 2026-05-14
   ============================================================ */
.service-others-list {
    margin: 28px 0 24px;
    background: #FAF7EB;
    border: 1px solid rgba(3, 62, 138, 0.07);
    border-radius: 18px;
    padding: 28px 28px 22px;
}
.service-others-list .sd-block-heading { margin-bottom: 18px !important; }
.service-others-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 22px;
}
@media (min-width: 768px) {
    .service-others-list ul { grid-template-columns: repeat(3, 1fr); }
}
.service-others-list li {
    margin: 0;
    padding: 0;
}
.service-others-list li a {
    display: block;
    padding: 11px 16px 11px 28px;
    color: #033e8a !important;
    font-size: 14.5px;
    text-decoration: none;
    border-radius: 10px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
    position: relative;
}
.service-others-list li a::before {
    content: "\203A";
    position: absolute;
    left: 12px;
    color: #033e8a;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}
.service-others-list li a:hover {
    background: #FFFFFF;
    color: #033e8a !important;
    transform: translateX(2px);
}
.service-others-list li a:hover::before { color: #033e8a; transform: translateX(2px); }
.service-others-list li.active a {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    color: #FAF7EB !important;
    font-weight: 700;
    cursor: default;
}
.service-others-list li.active a::before { color: #0078b7; }

/* Make the rest of the page-service-single feel right in the wider column */
.page-service-single .row > [class*="col-lg-"] { transition: none; }


/* ============================================================
   WHY CHOOSE US — CLEAN, ALIGNED, SPACED. 2026-05-14
   - All bars same width, no horizontal inset
   - Clean gap between bars (no overlap)
   - Number tiles square (88px), vertically centered, fully inside the bar
   - Tile alternates LEFT (plum bars) / RIGHT (tan bar) for visual interest
   - ALL text left-aligned for readability (no right-align)
   - Clear title -> description hierarchy
   ============================================================ */

body .why-choose-us .why-choose-list {
    max-width: 1000px !important;
    margin: 50px auto 0 !important;
    display: block !important;
    position: relative !important;
}

body .why-choose-us .why-choose-list .why-choose-item {
    position: relative !important;
    width: 100% !important;
    min-height: 132px !important;
    border-radius: 22px !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;             /* clean gap, no overlap */
    box-shadow: 0 10px 26px rgba(3, 62, 138, 0.14) !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
    -webkit-animation: none !important;
    transform: none !important;
}
body .why-choose-us .why-choose-list .why-choose-item:last-child { margin-bottom: 0 !important; }
body .why-choose-us .why-choose-list .why-choose-item-left  {
    background: #033e8a !important; background-color: #033e8a !important; background-image: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    z-index: auto !important;
}
body .why-choose-us .why-choose-list .why-choose-item-right {
    background: #B5A084 !important; background-color: #B5A084 !important; background-image: none !important;
    margin-left: 0 !important; margin-right: 0 !important;
    z-index: auto !important;
}

/* Number tile: fixed square, vertically centered inside the bar */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 88px !important;
    height: 88px !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    z-index: 2 !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left  .why-choose-number { left: 22px !important;  right: auto !important; }
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number { right: 22px !important;  left: auto !important; }

/* Content: consistent left-aligned text, padding clears the tile */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content {
    flex: 1 1 auto !important;
    width: auto !important;
    background: transparent !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content {
    padding: 26px 46px 26px 134px !important;
    text-align: left !important;
}
body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content {
    padding: 26px 134px 26px 46px !important;
    text-align: left !important;             /* clean readability, even with tile on right */
}

/* Typography: clear hierarchy, breathable spacing */
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4::after {
    content: none !important; display: none !important;
}
body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.88) !important;
}

/* Hover — subtle lift, no colour change */
body .why-choose-us .why-choose-list .why-choose-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px rgba(3, 62, 138, 0.20) !important;
}
body .why-choose-us .why-choose-list .why-choose-item-left:hover  { background: #033e8a !important; }
body .why-choose-us .why-choose-list .why-choose-item-right:hover { background: #B5A084 !important; }
body .why-choose-us .why-choose-list .why-choose-item::before,
body .why-choose-us .why-choose-list .why-choose-item:hover::before {
    content: none !important; display: none !important; background: none !important;
}

/* Mobile */
@media (max-width: 767px) {
    body .why-choose-us .why-choose-list { max-width: 100% !important; }
    body .why-choose-us .why-choose-list .why-choose-item {
        min-height: auto !important;
        margin-bottom: 14px !important;
        border-radius: 16px !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
        width: 58px !important; height: 58px !important; font-size: 22px !important; border-radius: 12px !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-left  .why-choose-number { left: 14px !important; }
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number { right: 14px !important; }
    body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content { padding: 18px 18px 18px 88px !important; }
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content { padding: 18px 88px 18px 18px !important; }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4 { font-size: 17px !important; }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content p { font-size: 14px !important; }
}

/* Hero — mobile image fix (was cropping too aggressively).
   Reduce slide height on phones, anchor the image to the top so the subject stays visible. */
@media (max-width: 991px) {
    .hero.hero-slider-layout .hero-slide {
        min-height: 560px !important;
        background-position: center 20% !important;
    }
    .hero.hero-slider-layout .hero-slide .container { padding-top: 80px !important; padding-bottom: 80px !important; }
}
@media (max-width: 575px) {
    .hero.hero-slider-layout .hero-slide {
        min-height: 460px !important;
        background-position: center 15% !important;
    }
    .hero.hero-slider-layout .hero-slide .container { padding-top: 60px !important; padding-bottom: 60px !important; }
    .hero-content h1, .hero-content h3 { font-size: 28px !important; }
    .hero-content h3 { font-size: 13px !important; }
}

/* Hide the custom mouse-follow cursor (magiccursor.js) on touch devices.
   It is a desktop-only effect; on phones it can appear as a stray dot. */
@media (max-width: 991px), (hover: none), (pointer: coarse) {
    .cb-cursor,
    .cb-cursor-text { display: none !important; }
    body { cursor: auto !important; }
}

/* Hero — mobile: shorter banner + smaller text/button. 2026-05-14 */
@media (max-width: 991px) {
    .hero.hero-slider-layout .hero-slide { min-height: 460px !important; background-position: center 20% !important; }
    .hero.hero-slider-layout .hero-slide .container { padding-top: 60px !important; padding-bottom: 60px !important; }
    .hero-content .section-title h1, .hero-content h1 { font-size: 32px !important; line-height: 1.15 !important; margin-bottom: 12px !important; }
    .hero-content .section-title h3 { font-size: 14px !important; margin-bottom: 8px !important; letter-spacing: .5px !important; }
    .hero-content .section-title p { font-size: 15px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
    .hero-btn .btn-default { font-size: 14px !important; padding: 11px 56px 11px 22px !important; }
    .hero-btn .btn-default::after { width: 30px !important; height: 30px !important; font-size: 10px !important; right: 6px !important; }
}
@media (max-width: 575px) {
    .hero.hero-slider-layout .hero-slide { min-height: 380px !important; background-position: center 18% !important; }
    .hero.hero-slider-layout .hero-slide .container { padding-top: 44px !important; padding-bottom: 44px !important; }
    .hero-content { max-width: 100% !important; }
    .hero-content .section-title h1, .hero-content h1 { font-size: 24px !important; line-height: 1.18 !important; margin-bottom: 10px !important; }
    .hero-content .section-title h3 { font-size: 12px !important; margin-bottom: 6px !important; }
    .hero-content .section-title p { font-size: 13.5px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
    .hero-btn .btn-default { font-size: 13px !important; padding: 10px 48px 10px 18px !important; border-width: 3px !important; }
    .hero-btn .btn-default::after { width: 26px !important; height: 26px !important; font-size: 9px !important; right: 5px !important; border-width: 2px !important; }
    .hero.hero-slider-layout .hero-pagination { bottom: 18px !important; padding-left: 18px !important; }
    .hero.hero-slider-layout .hero-pagination .swiper-pagination-bullet { width: 8px !important; height: 8px !important; margin: 0 3px !important; }
}

/* Service cards — 3 per row at every breakpoint; scale down on small screens */
@media (max-width: 991px) {
    .service-flip-front { padding: 18px 14px !important; }
    .service-flip-front h3 { font-size: 16px !important; margin-top: 10px !important; }
    .service-flip-back { padding: 18px 16px !important; gap: 8px !important; }
    .service-flip-back .room-name { font-size: 15px !important; }
    .service-flip-back .room-details, .service-flip-back .room-details p { font-size: 12.5px !important; line-height: 1.45 !important; }
    .service-flip-back .btn-default { font-size: 12px !important; padding: 8px 40px 8px 14px !important; margin-top: 6px !important; }
    .service-flip-back .btn-default::after { width: 22px !important; height: 22px !important; font-size: 8px !important; right: 4px !important; }
}
@media (max-width: 575px) {
    .service-flip-front { padding: 12px 10px !important; }
    .service-flip-front h3 { font-size: 13px !important; line-height: 1.2 !important; margin-top: 8px !important; }
    .service-flip-front .service-flip-icon { margin-bottom: 6px !important; }
    .service-flip-back { padding: 12px 10px !important; gap: 6px !important; }
    .service-flip-back .room-name { font-size: 12.5px !important; line-height: 1.2 !important; }
    .service-flip-back .room-details, .service-flip-back .room-details p { font-size: 10.5px !important; line-height: 1.35 !important; }
    .service-flip-back .btn-default { font-size: 10px !important; padding: 6px 28px 6px 8px !important; border-width: 2px !important; }
    .service-flip-back .btn-default::after { width: 18px !important; height: 18px !important; font-size: 7px !important; right: 3px !important; border-width: 1.5px !important; }
    /* tighter row gutter so 3 cards fit better */
    .our-services .row { margin-left: -6px !important; margin-right: -6px !important; }
    .our-services .row [class*="col-"] { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Hero mobile FIX — shorter container only, image fills (no white space),
   text/button keep their normal sizes. 2026-05-14
   ============================================================ */
@media (max-width: 991px) {
    .hero.hero-slider-layout .swiper-slide,
    .hero.hero-slider-layout .hero-slide {
        height: auto !important;
        min-height: 460px !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
    .hero.hero-slider-layout .hero-slide .container {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    /* Revert font/button size shrinkage — let theme defaults handle it */
    .hero-content .section-title h1, .hero-content h1 { font-size: unset !important; }
    .hero-content .section-title h3 { font-size: unset !important; }
    .hero-content .section-title p { font-size: unset !important; }
    .hero-btn .btn-default { font-size: unset !important; padding: unset !important; }
    .hero-btn .btn-default::after { width: unset !important; height: unset !important; font-size: unset !important; }
}
@media (max-width: 575px) {
    .hero.hero-slider-layout .swiper-slide,
    .hero.hero-slider-layout .hero-slide {
        min-height: 380px !important;
        background-size: cover !important;
        background-position: center center !important;
    }
    .hero.hero-slider-layout .hero-slide .container {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}

/* Hero — phone view button + typography. 2026-05-14
   - Button: thicker, more padding so text + chevron fit cleanly
   - Title (h3 eyebrow): small label
   - Subtitle (h1): clearly bigger than the title
   ============================================================ */
@media (max-width: 991px) {
    .hero-content .hero-btn .btn-default {
        font-size: 15px !important;
        font-weight: 700 !important;
        padding: 14px 60px 14px 26px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }
    .hero-content .hero-btn .btn-default::after {
        width: 30px !important; height: 30px !important;
        font-size: 10px !important; right: 7px !important;
        border-width: 2px !important;
    }
    .hero-content .section-title h3 {
        font-size: 14px !important;
        letter-spacing: .5px !important;
        margin-bottom: 10px !important;
    }
    .hero-content .section-title h1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }
}
@media (max-width: 575px) {
    .hero-content .hero-btn .btn-default {
        font-size: 14px !important;
        padding: 13px 54px 13px 22px !important;
    }
    .hero-content .hero-btn .btn-default::after {
        width: 26px !important; height: 26px !important;
        font-size: 9px !important; right: 6px !important;
    }
    .hero-content .section-title h3 { font-size: 13px !important; margin-bottom: 8px !important; }
    .hero-content .section-title h1 { font-size: 24px !important; margin-bottom: 10px !important; }
}

/* Service flip cards — phone view: fixed height, content fits, no scroll.
   Title on top, description in middle (flex), View Details pinned bottom.
   2026-05-14 */
@media (max-width: 575px) {
    .service-flip-wrap {
        height: 270px !important;
        min-height: 270px !important;
        max-height: 270px !important;
    }
    .service-flip-inner {
        height: 270px !important;
        min-height: 270px !important;
    }
    .service-flip-front,
    .service-flip-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .service-flip-front {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .service-flip-front .service-flip-icon {
        margin: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        border-radius: 16px 16px 0 0 !important;
    }
    .service-flip-front .service-flip-icon,
    .service-flip-front .service-flip-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        aspect-ratio: auto !important;
        max-height: none !important;
    }
    .service-flip-front h3 {
        flex: 0 0 auto !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 10px 8px !important;
        text-align: center !important;
        background: rgba(0,0,0,0.05);
    }
    .service-flip-back {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 14px 12px !important;
        gap: 0 !important;
    }
    .service-flip-back .room-name {
        flex: 0 0 auto !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
        margin: 0 0 8px !important;
        text-align: center !important;
    }
    .service-flip-back .room-details {
        flex: 1 1 auto !important;
        overflow: hidden !important;
        min-height: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .service-flip-back .room-details p {
        font-size: 10px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    .service-flip-back .btn-default {
        flex: 0 0 auto !important;
        align-self: center !important;
        font-size: 9.5px !important;
        padding: 6px 28px 6px 10px !important;
        margin-top: 8px !important;
        border-width: 2px !important;
    }
    .service-flip-back .btn-default::after {
        width: 18px !important; height: 18px !important;
        font-size: 7px !important; right: 3px !important; border-width: 1.5px !important;
    }
}

/* Phone-view service cards — tighter corner radius, uniform home + /rooms/.
   Same CSS already applies to both pages (they share the .service-flip-* classes).
   2026-05-14 */
@media (max-width: 575px) {
    .service-flip-wrap,
    .service-flip-inner,
    .service-flip-front,
    .service-flip-back {
        border-radius: 12px !important;
    }
    .service-flip-front .service-flip-icon {
        border-radius: 12px 12px 0 0 !important;
    }
    .service-flip-front .service-flip-icon img {
        border-radius: 12px 12px 0 0 !important;
    }
}
@media (max-width: 991px) and (min-width: 576px) {
    /* Tablet — moderate corners between desktop and phone */
    .service-flip-wrap,
    .service-flip-inner,
    .service-flip-front,
    .service-flip-back {
        border-radius: 18px !important;
    }
}

/* Hero — make .hero-slide always fill .swiper-slide so no white strip can
   appear below the bg-image. 2026-05-14 */
.hero.hero-slider-layout .swiper-slide {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
}
.hero.hero-slider-layout .swiper-slide > .hero-slide {
    flex: 1 1 auto !important;
    width: 100% !important;
}
.hero.hero-slider-layout .swiper-wrapper {
    align-items: stretch !important;
}
@media (max-width: 575px) {
    /* Belt-and-braces on phone: both elements get the same height */
    .hero.hero-slider-layout .swiper-slide,
    .hero.hero-slider-layout .hero-slide {
        height: 380px !important;
        min-height: 380px !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: #033e8a !important;   /* safety fallback if image fails to load */
    }
}

/* WHY CHOOSE US — phone-view fix. Tile must not overlap title/description.
   Smaller tile (52px) + content padding 82px clears it + text scaled to phone.
   Breakpoint widened to 991px so tablets render this too.
   2026-05-14 */
@media (max-width: 991px) {
    body .why-choose-us .why-choose-list { max-width: 100% !important; padding: 0 12px !important; }
    body .why-choose-us .why-choose-list .why-choose-item {
        min-height: auto !important;
        margin: 0 0 14px 0 !important;
        padding: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 20px rgba(3, 62, 138,0.16) !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item:last-child { margin-bottom: 0 !important; }

    /* Tile: smaller square, vertically centred INSIDE the bar */
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
        position: absolute !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 12px !important;
        font-size: 20px !important;
        box-shadow: 0 5px 12px rgba(0,0,0,0.18) !important;
        background: #FFFFFF !important;
        color: #033e8a !important;
        -webkit-text-fill-color: #033e8a !important;
        z-index: 2 !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-left  .why-choose-number { left: 14px !important; right: auto !important; }
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number { right: 14px !important; left: auto !important; }

    /* Content: padding clears the tile, text scaled to phone */
    body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content {
        padding: 18px 18px 18px 82px !important;
        text-align: left !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content {
        padding: 18px 82px 18px 18px !important;
        text-align: left !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 0 6px 0 !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}

/* WHY CHOOSE US — phone view: stack tile ABOVE content (column layout).
   Eliminates any tile-over-text overlap. 2026-05-14 */
@media (max-width: 991px) {
    body .why-choose-us .why-choose-list .why-choose-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding: 16px 18px 18px !important;
        margin: 0 0 14px 0 !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-number {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
        margin: 0 0 12px 0 !important;
        align-self: flex-start !important;
        background: #FFFFFF !important;
        color: #033e8a !important;
        -webkit-text-fill-color: #033e8a !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.16) !important;
        flex: 0 0 auto !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-number {
        align-self: flex-end !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-left .why-choose-item-content,
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content {
        padding: 0 !important;
        width: 100% !important;
        flex: 0 0 auto !important;
        text-align: left !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item-right .why-choose-item-content {
        text-align: right !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        margin: 0 0 6px 0 !important;
    }
    body .why-choose-us .why-choose-list .why-choose-item .why-choose-item-content p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
}

/* Our Services panel (on service detail page) — phone view: 1 column.
   2-col was cramping the long service names. 2026-05-14 */
@media (max-width: 575px) {
    .service-others-list {
        padding: 22px 18px 18px !important;
        border-radius: 14px !important;
    }
    .service-others-list .sd-block-heading { font-size: 18px !important; margin-bottom: 14px !important; }
    .service-others-list ul {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .service-others-list li a {
        padding: 10px 14px 10px 26px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    .service-others-list li a::before { left: 10px !important; }
    .service-others-list li.active a {
        font-weight: 700 !important;
    }
}
@media (min-width: 576px) and (max-width: 991px) {
    .service-others-list ul {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px 18px !important;
    }
}

/* SERVICE CARDS — uniform card height + uniform image height (no variation
   between cards in the same row). 2026-05-14
   - Desktop/tablet: card 360px tall, image area 260px (cover-crop)
   - Phone (already set): 270px tall
   ============================================================ */
@media (min-width: 576px) {
    .service-flip-wrap {
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;
    }
    .service-flip-inner {
        height: 360px !important;
        min-height: 360px !important;
    }
    .service-flip-front,
    .service-flip-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .service-flip-front {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
    }
    .service-flip-front .service-flip-icon {
        flex: 0 0 260px !important;
        height: 260px !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 18px 18px 0 0 !important;
    }
    .service-flip-front .service-flip-icon img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;        /* uniform crop -> every image fills equally */
        aspect-ratio: auto !important;
        max-height: none !important;
        display: block !important;
    }
    .service-flip-front h3 {
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 14px 16px !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
    }
    /* If there is no featured image, fallback placeholder fills the 260px area */
    .service-flip-front:not(:has(.service-flip-icon))::before,
    .service-flip-front .service-flip-icon:empty {
        height: 260px !important;
        flex: 0 0 260px !important;
    }
}

/* Footer — new layout: logo full-width on top, 3 heading columns below. 2026-05-14 */
.main-footer .footer-logo-row {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(250, 247, 235, 0.10);
}
.main-footer .footer-logo-row .footer-logo {
    display: inline-block;
    text-align: center;
}
.main-footer .footer-logo-row .footer-logo img {
    max-width: 180px;
    height: auto;
    display: inline-block;
}
.main-footer .footer-cols-row {
    align-items: flex-start;
}
.main-footer .footer-cols-row > [class*="col-"] {
    margin-bottom: 24px;
}
.main-footer .footer-cols-row .footer-social-links { padding-top: 0; }
.main-footer .footer-cols-row .footer-social-links ul {
    padding: 0; margin: 0; list-style: none;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.main-footer .footer-cols-row .footer-social-links ul li a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(250, 247, 235, 0.10);
    color: #033e8a !important;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.main-footer .footer-cols-row .footer-social-links ul li a:hover {
    background: #033e8a;
    color: #033e8a !important;
    transform: translateY(-2px);
}
@media (max-width: 767px) {
    .main-footer .footer-logo-row { margin-bottom: 24px; padding-bottom: 20px; }
    .main-footer .footer-logo-row .footer-logo img { max-width: 140px; }
    .main-footer .footer-cols-row > [class*="col-"] { margin-bottom: 26px; text-align: center; }
    .main-footer .footer-cols-row .footer-social-links ul { justify-content: center; }
}

/* Gallery — phone view: 2-column grid (was 1 column = stack). 2026-05-14 */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .gallery-grid-item figure {
        aspect-ratio: 1 / 1 !important;        /* square thumbs read better at 2-col on phone */
        border-radius: 8px !important;
    }
    .gallery-grid-item {
        border-radius: 8px !important;
    }
}
@media (max-width: 480px) {
    .gallery-grid {
        gap: 8px !important;
    }
}

/* DESKTOP service cards — restore the natural-size look (auto-height, full
   image, no crop). Source images are uniform so the cards line up naturally.
   Phone view (≤575px) still uses the 270px fixed flip-card layout. 2026-05-14 */
@media (min-width: 576px) {
    .service-flip-wrap {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .service-flip-inner {
        height: auto !important;
        min-height: 0 !important;
    }
    /* Front: relative so it drives the wrap height */
    .service-flip-front {
        position: relative !important;
        display: block !important;
        height: auto !important;
        flex: none !important;
    }
    /* Back: absolute, overlays the front on flip */
    .service-flip-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: auto !important;
    }
    /* Image: natural aspect ratio, no crop */
    .service-flip-front .service-flip-icon {
        flex: none !important;
        height: auto !important;
        margin-bottom: 20px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    .service-flip-front .service-flip-icon img {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: initial !important;
        aspect-ratio: auto !important;
        display: block !important;
    }
    .service-flip-front h3 {
        flex: none !important;
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 10px !important;
        text-align: center !important;
    }
}

/* Testimonial section image — fills the left plum block. 2026-05-14 */
.testimonial-box .testimonial-video-button .testimonial-section-image {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    display: block !important;
}
.testimonial-box .testimonial-video-button .testimonial-section-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 24px !important;
}
.testimonial-box .testimonial-video-button {
    display: flex !important;
    align-items: stretch !important;
}
@media (max-width: 991px) {
    .testimonial-box .testimonial-video-button .testimonial-section-image { min-height: 220px !important; }
}

/* Defensive — kill any residual rotation on flip-card titles/text so a
   mid-flip frame doesnt leave them tilted. 2026-05-14 ADVANCE_BACKEND/ Kushal Nighty_BACKEND/ Kushal nighty img/ Pink blue interior/ Plant Nest/ Priya Nighty_BACKEND/ Saajsringar ( E-commerce)/ flatokart-static/ guides/ healthnova/ hotelbidisha.com/ kushal-nighty-redesign/ pink-and-blue-interior-html/ pink-blue-interior-theme/ satyam-shivam-sundaram-static/ unityglobalservices-static/


/* Defensive — kill any residual rotation on flip-card titles/text so a
   mid-flip frame doesn't leave them tilted. 2026-05-14 */
.service-flip-wrap .service-flip-front h3,
.service-flip-wrap .service-flip-back h4,
.service-flip-wrap .service-flip-back .room-name,
.service-flip-wrap .service-flip-back .room-details,
.service-flip-wrap .service-flip-back .room-details p,
.service-flip-wrap .service-flip-back .btn-default {
    transform: none !important;
    rotate: 0deg !important;
    text-orientation: mixed !important;
    writing-mode: horizontal-tb !important;
}
.service-flip-front h3,
.service-flip-back .room-name {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}


/* Desktop service cards — restore the inner padding so the image sits inside a
   cream frame instead of going edge-to-edge. 2026-05-14 */
@media (min-width: 576px) {
    .service-flip-front {
        padding: 30px 26px 28px !important;
        background: linear-gradient(180deg, #FFFFFF 0%, #FAF7EB 100%) !important;
        border: 1px solid rgba(3, 62, 138, 0.07) !important;
        box-shadow: 0 10px 28px rgba(3, 62, 138, 0.10) !important;
    }
    .service-flip-front .service-flip-icon {
        margin-bottom: 22px !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    .service-flip-front .service-flip-icon img {
        border-radius: 16px !important;
    }
    .service-flip-front h3 {
        font-size: 19px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
}


/* ============================================================
   FOOTER POLISH — desktop. 2026-05-14
   - Larger centred logo with a soft divider line
   - Uniform column headings with a small gold underline
   - Clean list styling, gold chevron prefix on Quick Links
   - Social icons in a neat row
   - Better column gaps and copyright bar
   ============================================================ */

.main-footer {
    padding: 70px 0 0 !important;
    background: #033e8a !important;
    color: #FAF7EB;
}
.main-footer .container { max-width: 1200px; }

/* Logo row — full width, centred, divider line below */
.main-footer .footer-logo-row {
    text-align: center;
    margin-bottom: 50px !important;
    padding-bottom: 36px !important;
    border-bottom: 1px solid rgba(250, 247, 235, 0.12) !important;
}
.main-footer .footer-logo-row .footer-logo {
    display: inline-block;
}
.main-footer .footer-logo-row .footer-logo img {
    max-width: 200px !important;
    height: auto !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
}

/* 3 columns — uniform spacing */
.main-footer .footer-cols-row {
    align-items: flex-start;
    margin-bottom: 30px;
}
.main-footer .footer-cols-row > [class*="col-"] { margin-bottom: 30px; }

/* Column headings — uniform style */
.main-footer .footer-links h3,
.main-footer .footer-social-links h3 {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 22px !important;
    padding-bottom: 12px !important;
    position: relative;
    text-transform: capitalize;
}
.main-footer .footer-links h3::after,
.main-footer .footer-social-links h3::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 36px; height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0078b7 0%, #033e8a 100%);
}

/* Lists — clean, no bullets */
.main-footer .footer-links ul,
.main-footer .footer-links .menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.main-footer .footer-links li,
.main-footer .footer-links .menu li {
    margin: 0 0 10px !important;
    padding: 0 !important;
    list-style: none !important;
}
.main-footer .footer-links li a,
.main-footer .footer-links .menu li a {
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    text-decoration: none !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    transition: color .2s ease, padding-left .2s ease;
    display: inline-block;
}
.main-footer .footer-links li a:hover,
.main-footer .footer-links .menu li a:hover {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}

/* Quick Links — chevron prefix on each link */
.main-footer .footer-quick-links .menu li a,
.main-footer .footer-quick-links ul li a {
    position: relative;
    padding-left: 16px !important;
}
.main-footer .footer-quick-links .menu li a::before,
.main-footer .footer-quick-links ul li a::before {
    content: "\203A";
    position: absolute;
    left: 0;
    color: #0078b7;
    font-weight: 700;
    transition: transform .2s ease;
}
.main-footer .footer-quick-links .menu li a:hover::before,
.main-footer .footer-quick-links ul li a:hover::before {
    transform: translateX(3px);
    color: #FAF7EB;
}

/* Contact column — icons inline, address line gets multi-line */
.main-footer .footer-cols-row .footer-links ul li i,
.main-footer .footer-cols-row .footer-links ul li .fa {
    color: #033e8a !important;
    width: 18px;
    text-align: center;
    margin-right: 4px;
}
.main-footer .footer-cols-row .footer-links ul li:last-child {
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

/* Social icons — circular pills */
.main-footer .footer-social-links ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.main-footer .footer-social-links ul li { margin: 0 !important; }
.main-footer .footer-social-links ul li a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(250, 247, 235, 0.10) !important;
    color: #033e8a !important;
    font-size: 16px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.main-footer .footer-social-links ul li a:hover {
    background: #0078b7 !important;
    color: #033e8a !important;
    transform: translateY(-2px);
}
.main-footer .footer-social-links ul li a i { color: inherit !important; }

/* Copyright bar */
.main-footer .footer-copyright {
    margin-top: 30px;
    padding: 22px 0;
    border-top: 1px solid rgba(250, 247, 235, 0.12);
}
.main-footer .footer-copyright-text p {
    color: rgba(250, 247, 235, 0.65) !important;
    font-size: 13.5px !important;
    margin: 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 767px) {
    .main-footer { padding-top: 40px !important; }
    .main-footer .footer-logo-row { margin-bottom: 28px !important; padding-bottom: 22px !important; }
    .main-footer .footer-logo-row .footer-logo img { max-width: 150px !important; }
    .main-footer .footer-cols-row > [class*="col-"] { text-align: center; margin-bottom: 26px; }
    .main-footer .footer-links h3::after,
    .main-footer .footer-social-links h3::after { left: 50%; transform: translateX(-50%); }
    .main-footer .footer-social-links ul { justify-content: center !important; }
    .main-footer .footer-cols-row .footer-links ul li:last-child { justify-content: center; }
}


/* ============================================================
   BLUE GRADIENT — use #0078b7 -> #033e8a wherever a solid dark blue is
   currently used on a major surface. Text stays solid #033e8a.
   2026-05-14
   ============================================================ */

/* Top bar */
.topbar,
.main-header .topbar {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Footer */
.main-footer,
footer.main-footer {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-color: #033e8a !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Why Choose Us — plum bars (now blue) */
body .why-choose-us .why-choose-list .why-choose-item-left {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-color: #033e8a !important;
}

/* Service banner (under home Services) */
.service-banner {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}
.service-banner-overlay {
    background: linear-gradient(135deg, rgba(0, 120, 183, 0.78) 0%, rgba(3, 62, 138, 0.90) 100%) !important;
}

/* Service CTA card on the service detail page */
.service-cta-card {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Testimonial dark box behind the gold card */
.testimonial-box.parallaxie,
.testimonial-box {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Service flip-back card */
.service-flip-back {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Director's speech photo placeholder */
.director-speech-placeholder {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Mission/Vision card icons (vision variant) */
.mv-card.mv-vision .mv-icon {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Book Appointment page header */
.book-appointment-header,
.page-header.book-appointment-header {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* About full description blockquote (if styled with a bg) */
.about-us-full-description strong { color: #033e8a; }

/* Service step number tile (use gradient too — gold->blue still cool, but request was blue gradient) */
.service-step .step-num {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}

/* Hero banner dark overlay */
.hero::before,
.hero.hero-slider-layout .hero-slide::before {
    background: linear-gradient(270deg, rgba(0, 120, 183, 0.28) 43.57%, rgba(3, 62, 138, 0.85) 100%) !important;
}

@media (max-width: 767px) {
    .page-header.parallaxie { padding: 48px 0 36px !important; }
    .page-header.parallaxie .page-header-box h1 { font-size: 26px !important; }
}



/* ============================================================
   PAGE HEADER — image background + translucent blue gradient overlay.
   2026-05-14. Replaces the opaque-gradient block from page-header-blue.css.
   The Featured Image is painted inline on .page-header.parallaxie via the
   theme template, so DO NOT slap a !important background on the element.
   The ::before pseudo carries the gradient tint.
   ============================================================ */
.page-header.parallaxie,
body .page-header.parallaxie {
    background-color: #033e8a;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 70px 0 50px !important;
    min-height: 0 !important;
    position: relative;
}
/* Fallback gradient when no Featured Image is set on the page.
   The theme drops an empty url() into the inline style if no image,
   so we paint a gradient behind it. */
.page-header.parallaxie {
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
}
/* When a Featured Image IS set, the inline style on the element wins
   (specificity tie, but inline > stylesheet). */

.page-header.parallaxie::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 120, 183, 0.62) 0%, rgba(3, 62, 138, 0.82) 100%) !important;
    z-index: 1;
}
.page-header.parallaxie .container,
.page-header.parallaxie .page-header-box {
    position: relative;
    z-index: 2;
}

.page-header.parallaxie .page-header-box h1 {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 36px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.page-header.parallaxie .breadcrumb { margin: 0 !important; }
.page-header.parallaxie .breadcrumb li,
.page-header.parallaxie .breadcrumb li a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13.5px !important;
}
.page-header.parallaxie .breadcrumb li.active { color: #cfe6f4 !important; }
.page-header.parallaxie .breadcrumb li a:hover { color: #cfe6f4 !important; }

@media (max-width: 767px) {
    .page-header.parallaxie { padding: 48px 0 36px !important; }
    .page-header.parallaxie .page-header-box h1 { font-size: 26px !important; }
}



/* ============================================================
   SECTION TITLE H2 — blue gradient text. 2026-05-14
   Applies to all .section-title h2 except .dark-section variants
   (which sit on dark/coloured backgrounds and stay solid white).
   ============================================================ */
.section-title h2,
body .section-title h2,
.section-title h2 span,
body .section-title h2 span,
.our-services .section-title h2,
.our-services .section-title h2 span,
.why-choose-us .section-title h2,
.why-choose-us .section-title h2 span,
.director-speech .section-title h2,
.director-speech .section-title h2 span,
.about-us-content .section-title h2,
.about-us-content .section-title h2 span {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Keep dark-section variants solid light — gradient on dark background is unreadable. */
.section-title.dark-section h2,
.section-title.dark-section h2 span,
body .section-title.dark-section h2,
body .section-title.dark-section h2 span {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #FAF7EB !important;
    color: #FAF7EB !important;
}



/* ============================================================
   HEADER BRAND — text first, then logo image. 2026-05-14
   Targets the brand wrapper rendered by header.php (.header-logo).
   The PHP template now emits:
     <a class="logo brand-with-text" href="...">
        <span class="brand-text">Alipur Aya Centre</span>
        <img src="logo.png" alt="...">
     </a>
   ============================================================ */
.main-header .header-logo .logo.brand-with-text,
.main-header .header-logo a.brand-with-text {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}
.main-header .header-logo .brand-text {
    font-family: inherit;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0.2px;
    color: transparent !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.main-header .header-logo .brand-with-text img {
    max-height: 44px;
    width: auto;
    height: auto;
}

@media (max-width: 991px) {
    .main-header .header-logo .brand-text { font-size: 17px; }
    .main-header .header-logo .brand-with-text img { max-height: 36px; }
}
@media (max-width: 480px) {
    .main-header .header-logo .brand-text { font-size: 15px; }
    .main-header .header-logo .brand-with-text img { max-height: 30px; }
}


/* ============================================================
   HEADER BRAND TEXT — fix selector. The wrapper is .navbar-brand,
   not .header-logo. Override the earlier mis-selected block.
   2026-05-15
   ============================================================ */
.main-header .navbar-brand.brand-with-text,
.main-header a.navbar-brand.brand-with-text,
body .main-header .navbar-brand.brand-with-text {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: #033e8a !important;
}
.main-header .navbar-brand.brand-with-text .brand-text,
.main-header a.navbar-brand.brand-with-text .brand-text,
body .main-header .navbar-brand.brand-with-text .brand-text {
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.2px !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.main-header .navbar-brand.brand-with-text img {
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 991px) {
    .main-header .navbar-brand.brand-with-text .brand-text { font-size: 18px !important; }
    .main-header .navbar-brand.brand-with-text img { max-height: 36px !important; }
}
@media (max-width: 480px) {
    .main-header .navbar-brand.brand-with-text .brand-text { font-size: 15px !important; }
    .main-header .navbar-brand.brand-with-text img { max-height: 30px !important; }
}

/* Larger header logo — 2026-05-15 */
.main-header .navbar-brand.brand-with-text img {
    max-height: 70px !important;
}
@media (max-width: 991px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 56px !important; }
}
@media (max-width: 480px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 44px !important; }
}

/* Bigger header logo — 2026-05-15 */
.main-header .navbar-brand.brand-with-text img {
    max-height: 95px !important;
}
@media (max-width: 991px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 72px !important; }
}
@media (max-width: 480px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 56px !important; }
}

/* ============================================================
   Stop the hero CTA chevron from jumping on hover.
   The legacy Proshield rule .btn-default.btn-highlighted:hover:after
   reassigns the pseudo to width:100%; left:0; right:auto — that
   overlaps and visually shifts the chevron. Lock it to a fixed
   right-edge position for all hover states. 2026-05-15
   ============================================================ */
.btn-default.btn-highlighted::after,
.btn-default.btn-highlighted:hover::after,
.btn-default.btn-highlighted:hover:after,
body .btn-default.btn-highlighted::after,
body .btn-default.btn-highlighted:hover::after,
.hero-btn .btn-default.btn-highlighted::after,
.hero-btn .btn-default.btn-highlighted:hover::after {
    content: "\f054" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #033e8a !important;
    color: #033e8a !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-left: 1px !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    transition: background 0.25s ease, color 0.25s ease !important;
}
.btn-default.btn-highlighted:hover::after,
.btn-default.btn-highlighted:hover:after,
body .btn-default.btn-highlighted:hover::after,
.hero-btn .btn-default.btn-highlighted:hover::after {
    background: #033e8a !important;
    color: #FAF7EB !important;
    transform: translateY(-50%) !important;   /* NO translateX — arrow stays put */
}

/* Hero banner — lighter blue overlay so the photo shows through. 2026-05-15 */
.hero::before,
.hero.hero-slider-layout .hero-slide::before,
body .hero::before,
body .hero.hero-slider-layout .hero-slide::before {
    background: linear-gradient(270deg, rgba(0, 120, 183, 0.10) 43.57%, rgba(3, 62, 138, 0.42) 100%) !important;
}

/* Menu bar — tighter padding on each link. 2026-05-15
   Original: 14px 20px (tall + wide). Now: 8px 12px. */
.main-menu ul li a,
.navbar-nav li a,
body .main-menu ul li a {
    padding: 8px 12px !important;
    font-size: 15px !important;
}
.main-menu .nav-menu-wrapper { margin: 0 10px !important; }

@media (max-width: 1199px) {
    .main-menu ul li a,
    .navbar-nav li a { padding: 7px 9px !important; font-size: 14px !important; }
}

/* About page — full description (WYSIWYG) paragraph styling. 2026-05-15 */
.about-us-content .about-us-full-description {
    margin-top: 18px;
    color: #5B4A55;
}
.about-us-content .about-us-full-description p {
    margin: 0 0 14px;
    line-height: 1.7;
    color: inherit;
    font-size: 15.5px;
}
.about-us-content .about-us-full-description p:last-child { margin-bottom: 0; }
.about-us-content .about-us-full-description strong {
    color: #033e8a;
    font-weight: 700;
}
.about-us-content .about-us-full-description em { color: #033e8a; }
.about-us-content .about-us-full-description ul,
.about-us-content .about-us-full-description ol {
    padding-left: 22px;
    margin: 0 0 14px;
}
.about-us-content .about-us-full-description blockquote {
    border-left: 3px solid #0078b7;
    padding: 4px 0 4px 14px;
    margin: 14px 0;
    font-style: italic;
    color: #033e8a;
}

/* About page — gap between full description and Know More button. 2026-05-15 */
.about-us-content .about-us-full-description { margin-bottom: 26px; }
.about-us-content .about-us-footer { margin-top: 22px; }
.about-us-content .about-us-full-description + .about-us-feature-list { margin-top: 8px; }

/* Hamburger bars — white on blue button (earlier override made them blue-on-blue, invisible). 2026-05-15 */
.slicknav_btn .slicknav_icon-bar,
body .slicknav_btn .slicknav_icon-bar,
.navbar-toggle .slicknav_btn .slicknav_icon-bar {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Submenu (Services etc.) dropdown chevron — clearly visible in both
   closed and open states, rotates on open. The original rule used
   .submenu class but WP outputs .menu-item-has-children; an earlier
   override wrote "content: f107" without quotes which silently
   broke. 2026-05-15 */
.main-menu ul li.menu-item-has-children > a::after,
.navbar-nav .menu-item-has-children > a::after,
body .navbar-nav .menu-item-has-children > a::after {
    content: "\f107" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    margin-left: 6px !important;
    color: #033e8a !important;
    opacity: 1 !important;
    display: inline-block !important;
    transition: transform 0.25s ease !important;
    transform: rotate(0deg);
}
.navbar-nav .menu-item-has-children:hover > a::after,
.navbar-nav .menu-item-has-children.active > a::after,
.navbar-nav .menu-item-has-children > a:focus::after,
.main-menu ul li.menu-item-has-children:hover > a::after,
body .navbar-nav .menu-item-has-children:hover > a::after {
    transform: rotate(180deg) !important;
    color: #0078b7 !important;
}

@media (max-width: 991px) {
    /* Keep chevron visible on mobile (was display:none earlier) */
    .navbar-nav .menu-item-has-children > a::after,
    body .navbar-nav .menu-item-has-children > a::after {
        display: inline-block !important;
        float: right;
        margin-top: 4px;
        color: #033e8a !important;
    }
}

/* Slicknav (mobile) submenu arrow — was white-on-cream = invisible. 2026-05-15 */
.slicknav_arrow,
body .slicknav_arrow {
    font-size: 0 !important;
    color: #033e8a !important;
}
.slicknav_arrow:after,
body .slicknav_arrow:after,
.slicknav_nav .slicknav_arrow:after {
    content: "\f107" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    color: #033e8a !important;
    margin-left: 8px !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    opacity: 1 !important;
    display: inline-block !important;
}
.slicknav_open > a .slicknav_arrow:after,
.slicknav_collapsed > a .slicknav_arrow:after,
body .slicknav_open > a .slicknav_arrow:after {
    color: #0078b7 !important;
}
.slicknav_open > a .slicknav_arrow:after {
    transform: rotate(180deg) !important;
}

/* Footer text — light on the deep-blue gradient background.
   Earlier rules painted everything #033e8a which matched the bg
   and went invisible. 2026-05-15 */
.main-footer .footer-links li,
.main-footer .footer-links li a,
.main-footer .footer-links li i,
.main-footer .footer-links li a i,
.main-footer .footer-links li .fa,
.main-footer .footer-links .menu li,
.main-footer .footer-links .menu li a,
.main-footer .footer-links ul li,
.main-footer .footer-links ul li a,
.main-footer .footer-links ul li i,
.main-footer .footer-links ul li .fa,
.main-footer .footer-links ul li a i,
body .main-footer .footer-links li a,
body .main-footer .footer-links ul li a {
    color: #FAF7EB !important;
    -webkit-text-fill-color: #FAF7EB !important;
}
.main-footer .footer-links li a:hover,
.main-footer .footer-links li a:hover i,
.main-footer .footer-links ul li a:hover,
.main-footer .footer-links ul li a:hover i,
body .main-footer .footer-links li a:hover {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-decoration: underline !important;
}
.main-footer .footer-cols-row .footer-links ul li i,
.main-footer .footer-cols-row .footer-links ul li .fa {
    color: #cfe6f4 !important;
}
.main-footer .footer-quick-links .menu li a::before,
.main-footer .footer-quick-links ul li a::before {
    color: #cfe6f4 !important;
}
.main-footer .footer-copyright,
.main-footer .footer-copyright p {
    color: rgba(250, 247, 235, 0.75) !important;
}

/* WhatsApp-green submit buttons on Contact + Book Appointment forms.
   Both forms submit straight to wa.me, so the colour matches the
   destination. 2026-05-15 */
.book-appointment-submit .btn-default,
.book-appointment-submit button.btn-default,
#ba_submit,
.contact-us-form .wpcf7 input[type=submit],
.contact-us-form .wpcf7 button[type=submit],
.member-contact-form .wpcf7 input[type=submit],
.member-contact-form .wpcf7 button[type=submit],
.contact-form .wpcf7 input[type=submit],
.contact-form .wpcf7 button[type=submit],
body .book-appointment-submit .btn-default,
body .contact-us-form .wpcf7 input[type=submit] {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    padding: 14px 60px 14px 30px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(18, 140, 126, 0.28) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
}
.book-appointment-submit .btn-default:hover,
#ba_submit:hover,
.contact-us-form .wpcf7 input[type=submit]:hover,
.contact-us-form .wpcf7 button[type=submit]:hover,
.member-contact-form .wpcf7 input[type=submit]:hover,
.contact-form .wpcf7 input[type=submit]:hover,
body .book-appointment-submit .btn-default:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    background-image: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(7, 94, 84, 0.40) !important;
}

/* Override the chevron-circle ::after on these — replace with the
   WhatsApp icon so it reads as a clear messenger CTA */
.book-appointment-submit .btn-default::after,
#ba_submit::after,
.contact-us-form .wpcf7 input[type=submit]::after,
.contact-us-form .wpcf7 button[type=submit]::after,
.member-contact-form .wpcf7 input[type=submit]::after,
.contact-form .wpcf7 input[type=submit]::after,
body .book-appointment-submit .btn-default::after {
    content: "\f232" !important;   /* fa-whatsapp */
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    width: 28px !important;
    height: 28px !important;
    border: 1.5px solid #FFFFFF !important;
    color: #FFFFFF !important;
    background: transparent !important;
    right: 8px !important;
    top: 50% !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}
.book-appointment-submit .btn-default:hover::after,
#ba_submit:hover::after,
.contact-us-form .wpcf7 input[type=submit]:hover::after,
.contact-us-form .wpcf7 button[type=submit]:hover::after,
.member-contact-form .wpcf7 input[type=submit]:hover::after,
.contact-form .wpcf7 input[type=submit]:hover::after,
body .book-appointment-submit .btn-default:hover::after {
    background: #FFFFFF !important;
    color: #128C7E !important;
    transform: translateY(-50%) !important;
}

/* Inline WhatsApp icon already rendered inside #ba_submit — make
   sure its colour is white on the green background */
#ba_submit .fa-whatsapp,
.book-appointment-submit .btn-default .fa-whatsapp {
    color: #FFFFFF !important;
    margin-right: 6px !important;
}

/* Footer cleanup — 2026-05-15
   (1) Kill the solid dark-blue tile painted on each .footer-links
       column (line ~9134 set bg #033e8a, creating a darker box on
       top of the lighter blue footer gradient).
   (2) Social icons -> white. */
.main-footer .footer-links,
.main-footer .footer-quick-links,
.main-footer .footer-social-links,
.main-footer .footer-header,
body .main-footer .footer-links {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Social icons — pure white on a subtle translucent ring */
.main-footer .footer-social-links ul li a,
body .main-footer .footer-social-links ul li a {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
.main-footer .footer-social-links ul li a i,
.main-footer .footer-social-links ul li a svg,
body .main-footer .footer-social-links ul li a i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}
.main-footer .footer-social-links ul li a:hover,
body .main-footer .footer-social-links ul li a:hover {
    background: #FFFFFF !important;
    color: #033e8a !important;
    border-color: #FFFFFF !important;
}
.main-footer .footer-social-links ul li a:hover i,
.main-footer .footer-social-links ul li a:hover svg {
    color: #033e8a !important;
    fill: #033e8a !important;
}

/* Header brand — bigger again. 2026-05-15 */
.main-header .navbar-brand.brand-with-text img,
body .main-header .navbar-brand.brand-with-text img {
    max-height: 120px !important;
}
.main-header .navbar-brand.brand-with-text .brand-text,
body .main-header .navbar-brand.brand-with-text .brand-text {
    font-size: 30px !important;
}
@media (max-width: 991px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 90px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text { font-size: 23px !important; }
}
@media (max-width: 480px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 64px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text { font-size: 18px !important; }
}

/* Top-level menu links as outline pill buttons. 2026-05-15
   Each top-level item gets a blue-outlined transparent pill.
   On hover the pill fills with blue gradient + white text.
   Dropdown sub-items keep plain styling (no pill). */
.main-menu .nav-menu-wrapper > ul > li > a,
.navbar-nav > li > a,
body .navbar-nav > li > a,
body .main-menu .nav-menu-wrapper > ul > li > a {
    display: inline-block !important;
    padding: 8px 18px !important;
    border: 2px solid #033e8a !important;
    border-radius: 999px !important;
    color: #033e8a !important;
    background: transparent !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
    text-decoration: none !important;
}
.main-menu .nav-menu-wrapper > ul > li,
.navbar-nav > li {
    margin: 0 5px !important;
}
.main-menu .nav-menu-wrapper > ul > li > a:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current_page_item > a,
.navbar-nav > li.active > a,
body .navbar-nav > li > a:hover {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: #033e8a !important;
    transform: translateY(-1px) !important;
}
/* Chevron on dropdown pills — recolor on hover + active so it
   stays visible against the now-blue background */
.navbar-nav > li.menu-item-has-children > a::after,
body .navbar-nav > li.menu-item-has-children > a::after {
    color: #033e8a !important;
}
.navbar-nav > li.menu-item-has-children:hover > a::after,
.navbar-nav > li.current-menu-item.menu-item-has-children > a::after,
body .navbar-nav > li.menu-item-has-children:hover > a::after {
    color: #FFFFFF !important;
}

/* Submenu items are NOT pills — restore plain link look. */
.navbar-nav .sub-menu li a,
body .navbar-nav .sub-menu li a {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 8px 18px !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
}
.navbar-nav .sub-menu li a:hover {
    background: rgba(0, 120, 183, 0.08) !important;
    color: #0078b7 !important;
    -webkit-text-fill-color: #0078b7 !important;
    transform: none !important;
}

/* Mobile (slicknav menu) — back to flat, no pills */
@media (max-width: 991px) {
    .slicknav_nav li a,
    .slicknav_nav .slicknav_row,
    body .slicknav_nav li a {
        border: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 10px 15px !important;
        transform: none !important;
    }
}

/* Topbar contact row (left) + social icons (right). 2026-05-15 */
.topbar { padding: 8px 0; }
.topbar-contact-row ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
}
.topbar-contact-row ul li { margin: 0 !important; padding: 0 !important; }
.topbar-contact-row ul li a {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .2s ease;
}
.topbar-contact-row ul li a:hover { opacity: 0.85; }
.topbar-contact-row ul li a i { font-size: 14px; color: #cfe6f4 !important; }
.topbar-contact-row li.topbar-whatsapp a i { color: #25D366 !important; }

/* Social icons on the right — keep them tidy with brand colors */
.topbar-social-links ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
}
.topbar-social-links ul li a {
    display: inline-flex;
    width: 28px; height: 28px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    background: rgba(255,255,255,0.14);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.topbar-social-links ul li a i,
.topbar-social-links ul li a svg { color: #FFFFFF !important; fill: #FFFFFF !important; font-size: 13px; }
.topbar-social-links ul li a:hover { background: #FFFFFF; color: #033e8a !important; transform: translateY(-1px); }
.topbar-social-links ul li a:hover i,
.topbar-social-links ul li a:hover svg { color: #033e8a !important; fill: #033e8a !important; }

@media (max-width: 767px) {
    .topbar .row { flex-direction: column; gap: 6px; }
    .topbar-contact-row ul { justify-content: center; gap: 12px; }
    .topbar-contact-row ul li a { font-size: 12px; }
    .topbar-social-links ul { justify-content: center; }
}

/* Menu pills — switch from outline to solid filled gradient. 2026-05-15
   Each top-level menu link is a filled blue gradient pill with white
   text + a subtle shadow. Hover darkens. */
.main-menu .nav-menu-wrapper > ul > li > a,
.navbar-nav > li > a,
body .navbar-nav > li > a,
body .main-menu .nav-menu-wrapper > ul > li > a {
    display: inline-block !important;
    padding: 9px 22px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    line-height: 1.2 !important;
    box-shadow: 0 3px 10px rgba(3, 62, 138, 0.18) !important;
    transition: filter 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
    text-decoration: none !important;
}
.main-menu .nav-menu-wrapper > ul > li > a:hover,
.navbar-nav > li > a:hover,
.navbar-nav > li.current-menu-item > a,
.navbar-nav > li.current_page_item > a,
.navbar-nav > li.active > a,
body .navbar-nav > li > a:hover {
    background: linear-gradient(135deg, #033e8a 0%, #022c64 100%) !important;
    background-image: linear-gradient(135deg, #033e8a 0%, #022c64 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(3, 62, 138, 0.32) !important;
}

/* Chevron now sits on a blue pill — always white */
.navbar-nav > li.menu-item-has-children > a::after,
.navbar-nav > li.menu-item-has-children:hover > a::after,
body .navbar-nav > li.menu-item-has-children > a::after {
    color: #FFFFFF !important;
}

/* Phone view header — keep brand (text + logo) and hamburger on ONE row.
   Shrink everything to fit. 2026-05-15 */
@media (max-width: 991px) {
    .main-header .header-sticky .navbar,
    .main-header .header-sticky .navbar > .container {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .main-header .navbar-brand.brand-with-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
    }
    .main-header .navbar-toggle {
        flex: 0 0 auto !important;
        margin-left: 10px !important;
    }
}

@media (max-width: 767px) {
    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img {
        max-height: 50px !important;
    }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text {
        font-size: 17px !important;
    }
    .navbar-toggle .slicknav_btn,
    body .navbar-toggle .slicknav_btn {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 480px) {
    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img {
        max-height: 42px !important;
    }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text {
        font-size: 14px !important;
        letter-spacing: 0 !important;
    }
    .main-header .navbar-brand.brand-with-text {
        gap: 6px !important;
    }
    .navbar-toggle .slicknav_btn,
    body .navbar-toggle .slicknav_btn {
        width: 34px !important;
        height: 34px !important;
    }
    .slicknav_icon .slicknav_icon-bar {
        width: 18px !important;
        height: 2px !important;
        margin: 3px auto !important;
    }
}

@media (max-width: 380px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 36px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text { font-size: 12.5px !important; }
}

/* Footer columns — center the 3-column block in the container.
   Each column gets a fixed max-width and the row is centred so the
   right-side empty space is removed (symmetric breathing room).
   2026-05-15 */
@media (min-width: 992px) {
    .main-footer .footer-cols-row {
        justify-content: center !important;
        gap: 60px;
    }
    .main-footer .footer-cols-row > [class*="col-"] {
        flex: 0 0 auto !important;
        max-width: 280px !important;
        width: auto !important;
    }
    /* Centre the inner content too so each column reads as a tidy group */
    .main-footer .footer-links,
    .main-footer .footer-social-links { text-align: center; }
    .main-footer .footer-links h3,
    .main-footer .footer-social-links h3 { display: inline-block; text-align: left; }

    /* Lists centred under the heading */
    .main-footer .footer-links ul,
    .main-footer .footer-links .menu { display: inline-block; text-align: left; }
    .main-footer .footer-social-links ul { justify-content: center !important; }
}

/* Social media icons — real brand colors. 2026-05-15
   Topbar (white-on-blue) and Footer (large circle pills) both
   recoloured per platform. */

/* Common: clear earlier monotone overrides */
.topbar-social-links ul li a,
.main-footer .footer-social-links ul li a {
    background: #FFFFFF !important;
    border: 0 !important;
    color: inherit !important;
}
.topbar-social-links ul li a i,
.topbar-social-links ul li a svg,
.main-footer .footer-social-links ul li a i,
.main-footer .footer-social-links ul li a svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* Facebook brand blue */
.topbar-social-links ul li a:has(.fa-facebook),
.topbar-social-links ul li a:has(.fa-facebook-f),
.topbar-social-links ul li a:has(.fa-facebook-square),
.main-footer .footer-social-links ul li a:has(.fa-facebook),
.main-footer .footer-social-links ul li a:has(.fa-facebook-f),
.main-footer .footer-social-links ul li a:has(.fa-facebook-square) {
    color: #1877F2 !important;
}

/* Instagram brand gradient — paint icon as gradient via background-clip:text */
.topbar-social-links ul li a:has(.fa-instagram) .fa-instagram,
.main-footer .footer-social-links ul li a:has(.fa-instagram) .fa-instagram,
.topbar-social-links ul li a .fa-instagram,
.main-footer .footer-social-links ul li a .fa-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* YouTube red */
.topbar-social-links ul li a:has(.fa-youtube),
.main-footer .footer-social-links ul li a:has(.fa-youtube) { color: #FF0000 !important; }

/* X / Twitter — near-black */
.topbar-social-links ul li a:has(.fa-x-twitter),
.topbar-social-links ul li a:has(.fa-twitter),
.main-footer .footer-social-links ul li a:has(.fa-x-twitter),
.main-footer .footer-social-links ul li a:has(.fa-twitter) { color: #000000 !important; }

/* LinkedIn blue */
.topbar-social-links ul li a:has(.fa-linkedin),
.topbar-social-links ul li a:has(.fa-linkedin-in),
.main-footer .footer-social-links ul li a:has(.fa-linkedin),
.main-footer .footer-social-links ul li a:has(.fa-linkedin-in) { color: #0A66C2 !important; }

/* WhatsApp green */
.topbar-social-links ul li a:has(.fa-whatsapp),
.main-footer .footer-social-links ul li a:has(.fa-whatsapp) { color: #25D366 !important; }

/* Hover: keep white circle, slight lift */
.topbar-social-links ul li a:hover,
.main-footer .footer-social-links ul li a:hover {
    background: #FFFFFF !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* Footer icons keep their 40px circle; topbar icons stay 28px */

/* Footer columns — fix the broken centering. Headings + lists are
   block-level, just visually centred within the column. 2026-05-15 */
@media (min-width: 992px) {
    .main-footer .footer-links,
    .main-footer .footer-social-links {
        text-align: left !important;
    }
    .main-footer .footer-links h3,
    .main-footer .footer-social-links h3 {
        display: block !important;
        text-align: left !important;
    }
    .main-footer .footer-links ul,
    .main-footer .footer-links .menu {
        display: block !important;
        text-align: left !important;
    }
    /* Centre each column horizontally inside its slot by allowing
       the row to space them evenly */
    .main-footer .footer-cols-row {
        justify-content: center !important;
    }
}

/* Gallery captions — text below each image. 2026-05-15 */
.gallery-grid-item .gallery-caption {
    margin-top: 12px;
    text-align: center;
    color: #033e8a;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 6px;
}
.gallery-grid-item { margin-bottom: 26px; }
@media (max-width: 767px) {
    .gallery-grid-item .gallery-caption { font-size: 13px; margin-top: 8px; }
    .gallery-grid-item { margin-bottom: 18px; }
}


/* CF7 submit button — force WhatsApp green (earlier rule was being
   beaten by .wpcf7-submit defaults). 2026-05-15 */
.wpcf7 input.wpcf7-submit,
.wpcf7 input[type=submit].wpcf7-submit,
.wpcf7 .wpcf7-form input[type=submit],
.contact-form .wpcf7 .wpcf7-submit,
.contact-us-form .wpcf7 .wpcf7-submit,
.member-contact-form .wpcf7 .wpcf7-submit,
body .wpcf7 input.wpcf7-submit,
body .wpcf7 input[type=submit] {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(18, 140, 126, 0.28) !important;
    transition: filter 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
    cursor: pointer !important;
}
.wpcf7 input.wpcf7-submit:hover,
.wpcf7 input[type=submit].wpcf7-submit:hover,
.wpcf7 .wpcf7-form input[type=submit]:hover,
.contact-form .wpcf7 .wpcf7-submit:hover,
.contact-us-form .wpcf7 .wpcf7-submit:hover,
body .wpcf7 input.wpcf7-submit:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    background-image: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(7, 94, 84, 0.40) !important;
}
.wpcf7 input.wpcf7-submit::after,
.wpcf7 input[type=submit]::after { content: none !important; display: none !important; }


/* Footer Terms & Conditions link in copyright bar. 2026-05-15 */
.main-footer .footer-copyright-text p {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
    justify-content: center;
}
.main-footer .footer-copyright-text .footer-sep {
    opacity: 0.55;
    margin: 0 2px;
}
.main-footer .footer-copyright-text .footer-tnc {
    color: #cfe6f4 !important;
    -webkit-text-fill-color: #cfe6f4 !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: color .2s ease, transform .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.main-footer .footer-copyright-text .footer-tnc i {
    color: #cfe6f4 !important;
    font-size: 14px;
}
.main-footer .footer-copyright-text .footer-tnc:hover {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-decoration: underline !important;
}
.main-footer .footer-copyright-text .footer-tnc:hover i { color: #FFFFFF !important; }

@media (max-width: 575px) {
    .main-footer .footer-copyright-text p { gap: 4px 8px; font-size: 12.5px !important; }
    .main-footer .footer-copyright-text .footer-sep { display: none; }
}


/* About page — founder name + title block, above the Know More button.
   Pulled from director_speech_name + director_speech_title ACF fields.
   2026-05-15 */
.about-us-content .about-founder-line {
    position: relative;
    padding: 14px 0 14px 18px;
    margin: 22px 0 22px;
    border-left: 3px solid #0078b7;
}
.about-us-content .about-founder-line .about-founder-name {
    margin: 0 0 4px;
    font-family: inherit;
    font-style: italic;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.2;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.about-us-content .about-founder-line .about-founder-name::before {
    content: "\2022";
    display: inline-block;
    margin-right: 8px;
    color: #033e8a;
    -webkit-text-fill-color: #033e8a !important;
    background: none;
    font-style: normal;
    transform: translateY(-2px);
}
.about-us-content .about-founder-line .about-founder-title {
    margin: 0;
    color: #5B4A55;
    font-size: 14.5px;
    line-height: 1.5;
}

@media (max-width: 575px) {
    .about-us-content .about-founder-line { padding: 10px 0 10px 14px; margin: 18px 0; }
    .about-us-content .about-founder-line .about-founder-name { font-size: 19px; }
    .about-us-content .about-founder-line .about-founder-title { font-size: 13.5px; }
}


/* Right-edge side drawer: Enquiry / WhatsApp / Call. 2026-05-15
   3 vertical pills stacked on the right edge of the viewport, text
   rotated 90deg so the buttons stay narrow. Visible on desktop and
   mobile. Hides the legacy single floating Enquiry button. */
.enquiry-floating-btn { display: none !important; }

.side-drawer-buttons {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99998;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.side-drawer-buttons .side-drawer-btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-height: 120px;
    padding: 14px 0;
    border-radius: 14px 0 0 14px;
    text-decoration: none !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 700;
    font-size: 13px;
    box-shadow: -3px 3px 12px rgba(0,0,0,0.18);
    transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
    cursor: pointer;
    overflow: hidden;
}
.side-drawer-buttons .side-drawer-btn:hover {
    transform: translateX(-4px);
    box-shadow: -6px 5px 18px rgba(0,0,0,0.28);
    filter: brightness(1.05);
}
.side-drawer-buttons .side-drawer-btn span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.side-drawer-buttons .side-drawer-btn span i {
    color: #FFFFFF !important;
    font-size: 14px;
}

/* Per-pill colours */
.side-drawer-enquiry { background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%); }
.side-drawer-wa      { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
.side-drawer-call    { background: linear-gradient(135deg, #2d2d2d 0%, #000000 100%); }

@media (max-width: 991px) {
    .side-drawer-buttons {
        top: auto;
        bottom: 14px;
        transform: none;
        right: 6px;
        gap: 8px;
    }
    .side-drawer-buttons .side-drawer-btn {
        width: 34px;
        min-height: 100px;
        font-size: 12px;
        padding: 12px 0;
    }
}
@media (max-width: 480px) {
    .side-drawer-buttons .side-drawer-btn {
        width: 32px;
        min-height: 92px;
        font-size: 11.5px;
    }
}

/* About founder line — match home Director Speech signoff styling.
   Earlier rule used gradient text + bullet; flip to the same serif
   italic look used on the home page (.ds-name / .ds-title). 2026-05-15 */
.about-us-content .about-founder-line {
    margin-top: 26px;
    margin-bottom: 22px;
    padding: 0;
    padding-top: 20px;
    border: 0 !important;
    border-top: 1px solid rgba(3, 62, 138, 0.12) !important;
    display: flex;
    flex-direction: column;
}
.about-us-content .about-founder-line .about-founder-name {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 22px !important;
    font-style: italic !important;
    font-weight: 600 !important;
    color: #033e8a !important;
    -webkit-text-fill-color: #033e8a !important;
    background: none !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.about-us-content .about-founder-line .about-founder-name::before {
    content: none !important;
    display: none !important;
}
.about-us-content .about-founder-line .about-founder-title {
    font-size: 13.5px !important;
    color: #8A7D90 !important;
    margin: 4px 0 0 !important;
    letter-spacing: .3px !important;
    font-style: normal !important;
}


/* Enquiry drawer — slide-in panel from the right edge.
   Replaces the previous centered modal popup. 2026-05-15 */
.enquiry-popup-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: block !important;
    background: rgba(3, 62, 138, 0.55) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 99999 !important;
    padding: 0 !important;
}
.enquiry-popup-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.enquiry-popup {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    width: 440px !important;
    max-width: 92vw !important;
    background: #FFFFFF !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.18) !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s ease !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 28px 28px 36px !important;
    border-radius: 0 !important;
}
.enquiry-popup-overlay.active .enquiry-popup {
    transform: translateX(0) !important;
}

.enquiry-popup-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(3, 62, 138, 0.08) !important;
    color: #033e8a !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 2 !important;
    transition: background .2s ease, transform .2s ease !important;
}
.enquiry-popup-close:hover {
    background: #033e8a !important;
    color: #FFFFFF !important;
    transform: rotate(90deg) !important;
}

.enquiry-popup-inner {
    display: block !important;
    padding-top: 24px !important;
}
.enquiry-popup-image { display: none !important; }
.enquiry-popup-content { width: 100% !important; padding: 0 !important; }
.enquiry-popup-content h3 {
    color: #033e8a !important;
    font-size: 22px !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
}
.enquiry-popup-content p {
    color: #5B4A55 !important;
    font-size: 14px !important;
    margin: 0 0 18px !important;
}
.enquiry-popup-form .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100% !important;
    margin-bottom: 12px !important;
}
.enquiry-popup-form .row,
.enquiry-popup-form > p {
    flex-direction: column !important;
}

@media (max-width: 480px) {
    .enquiry-popup { width: 100% !important; max-width: 100% !important; padding: 22px 18px 28px !important; }
    .enquiry-popup-content h3 { font-size: 20px !important; }
}

/* Header brand — phone-only bump. 2026-05-15 */
@media (max-width: 767px) {
    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img { max-height: 66px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text { font-size: 21px !important; }
}
@media (max-width: 480px) {
    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img { max-height: 56px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text { font-size: 18px !important; }
}
@media (max-width: 380px) {
    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img { max-height: 46px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text { font-size: 15px !important; }
}

/* Phone-view header — bigger brand + tighter padding so logo/text use
   the available row width. 2026-05-15 */
@media (max-width: 767px) {
    .main-header .header-sticky .navbar > .container,
    .main-header .navbar > .container { padding-left: 10px !important; padding-right: 10px !important; }
    .main-header .header-sticky .navbar { padding: 6px 0 !important; }
    .main-header .navbar-brand.brand-with-text { gap: 10px !important; }

    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img { max-height: 80px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text { font-size: 24px !important; }
}
@media (max-width: 480px) {
    .main-header .header-sticky .navbar > .container,
    .main-header .navbar > .container { padding-left: 8px !important; padding-right: 8px !important; }
    .main-header .navbar-brand.brand-with-text { gap: 8px !important; }

    .main-header .navbar-brand.brand-with-text img,
    body .main-header .navbar-brand.brand-with-text img { max-height: 64px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text,
    body .main-header .navbar-brand.brand-with-text .brand-text { font-size: 20px !important; }
    .navbar-toggle { margin-left: 6px !important; }
}
@media (max-width: 380px) {
    .main-header .navbar-brand.brand-with-text img { max-height: 54px !important; }
    .main-header .navbar-brand.brand-with-text .brand-text { font-size: 17px !important; }
}

/* FINAL OVERRIDE — green WhatsApp pill on every send button, max specificity. 2026-05-15 */
html body .wpcf7 input.wpcf7-submit,
html body .wpcf7 input[type=submit],
html body .wpcf7 button[type=submit],
html body .wpcf7-form input[type=submit],
html body .wpcf7-form button[type=submit],
html body .enquiry-popup-form input[type=submit],
html body .enquiry-popup-form button[type=submit],
html body .book-appointment-submit button#ba_submit,
html body .book-appointment-submit button.btn-default,
html body button#ba_submit,
html body button#ba_submit.btn-default {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(18, 140, 126, 0.30) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
html body .wpcf7 input.wpcf7-submit:hover,
html body .wpcf7 input[type=submit]:hover,
html body .wpcf7 button[type=submit]:hover,
html body .enquiry-popup-form input[type=submit]:hover,
html body .book-appointment-submit button#ba_submit:hover,
html body button#ba_submit:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    background-image: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(7, 94, 84, 0.40) !important;
}
html body .wpcf7 input[type=submit]::after,
html body button#ba_submit::after,
html body .book-appointment-submit button::after {
    content: none !important;
    display: none !important;
}
html body button#ba_submit .fa-whatsapp,
html body .book-appointment-submit button .fa-whatsapp {
    color: #FFFFFF !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* Desktop dropdown — make it scrollable so a long list (13+ Services)
   stays inside a tidy box instead of running off the page. 2026-05-15 */
@media (min-width: 992px) {
    .navbar-nav .menu-item-has-children > .sub-menu,
    .navbar-nav .sub-menu,
    body .navbar-nav .menu-item-has-children > .sub-menu {
        max-height: 60vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-width: 280px !important;
        padding: 8px 0 !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(3, 62, 138, 0.35) transparent;
    }
    .navbar-nav .sub-menu::-webkit-scrollbar { width: 6px; }
    .navbar-nav .sub-menu::-webkit-scrollbar-thumb { background: rgba(3, 62, 138, 0.35); border-radius: 3px; }
    .navbar-nav .sub-menu li { background: transparent !important; }
    .navbar-nav .sub-menu li:nth-child(odd),
    .navbar-nav .sub-menu li:nth-child(even) { background: transparent !important; }
}

/* Mobile (slicknav) — restore the default chevron glyph (do NOT hide
   it with font-size:0). Style it as a clear blue chevron-down,
   rotates on open. 2026-05-15 */
.slicknav_arrow,
body .slicknav_arrow {
    font-size: 16px !important;
    color: #033e8a !important;
    margin-left: 8px !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transition: transform 0.25s ease !important;
}
.slicknav_arrow::after,
.slicknav_arrow:after { content: none !important; display: none !important; }
.slicknav_open > a .slicknav_arrow,
body .slicknav_open > a .slicknav_arrow {
    transform: rotate(180deg) !important;
    color: #0078b7 !important;
}

/* Topbar — phone view: keep contact row and social icons ON ONE LINE.
   Earlier rule stacked them; this override flips them back side-by-side
   with shrunken icons + nowrap. 2026-05-15 */
@media (max-width: 767px) {
    .topbar { padding: 5px 0 !important; }
    .topbar .row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .topbar .row > [class*="col-"] {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Left side — contact info: phone first, then a WA + email icon-only */
    .topbar-contact-row ul {
        justify-content: flex-start !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    .topbar-contact-row ul li a {
        font-size: 11.5px !important;
        gap: 4px !important;
    }
    .topbar-contact-row ul li a i { font-size: 12px !important; }
    /* Compact: hide the long WhatsApp text label, keep just the green icon */
    .topbar-contact-row li.topbar-whatsapp a > :not(i) { display: none !important; }
    /* And hide the email address text (keep just envelope icon, click still opens mailto) */
    .topbar-contact-row li.topbar-email a > :not(i) { display: none !important; }

    /* Right side — social icons: smaller circles, packed tight */
    .topbar-social-links ul {
        justify-content: flex-end !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    .topbar-social-links ul li a {
        width: 22px !important;
        height: 22px !important;
    }
    .topbar-social-links ul li a i,
    .topbar-social-links ul li a svg { font-size: 11px !important; }
}

@media (max-width: 380px) {
    .topbar-contact-row ul li a { font-size: 10.5px !important; }
    .topbar-contact-row ul li a i,
    .topbar-contact-row ul li a > i { font-size: 11px !important; }
    .topbar-social-links ul li a { width: 20px !important; height: 20px !important; }
    .topbar-social-links ul li a i { font-size: 10px !important; }
}

/* Topbar — never let the phone number wrap, and apply the compact
   icon-only layout at tablet widths too (not just phones). 2026-05-15 */
.topbar-contact-row ul li,
.topbar-contact-row ul li a {
    white-space: nowrap !important;
}

@media (max-width: 991px) {
    .topbar { padding: 5px 0 !important; }
    .topbar .row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 6px !important;
    }
    .topbar .row > [class*="col-"] {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    .topbar-contact-row ul {
        justify-content: flex-start !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }
    .topbar-contact-row ul li a { font-size: 12px !important; gap: 4px !important; }
    .topbar-contact-row ul li a i { font-size: 12px !important; }
    /* Hide WhatsApp + email labels — keep just clickable icons */
    .topbar-contact-row li.topbar-whatsapp a > :not(i),
    .topbar-contact-row li.topbar-email a > :not(i) { display: none !important; }
    .topbar-social-links ul {
        justify-content: flex-end !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
    }
    .topbar-social-links ul li a { width: 24px !important; height: 24px !important; }
    .topbar-social-links ul li a i,
    .topbar-social-links ul li a svg { font-size: 11px !important; }
}

/* Mobile slicknav fixes — 2026-05-15
   (A) Duplicate arrow: kill the FA chevron pseudo on every menu link
       inside slicknav; ONLY the library default .slicknav_arrow span
       remains visible.
   (B) Scrolling: let the mobile menu container scroll vertically when
       the open submenu (Services with 17 items) overflows. */

/* (A) — wipe ALL pseudo-element chevrons inside slicknav, no matter
   which earlier selector tried to add one */
.slicknav_nav li a::after,
.slicknav_nav li a::before,
.slicknav_nav .menu-item-has-children > a::after,
.slicknav_nav .menu-item-has-children > a::before,
.slicknav_nav .slicknav_parent > a::after,
.slicknav_menu li a::after,
.slicknav_menu li a::before,
body .slicknav_nav li a::after,
body .slicknav_nav li a::before {
    content: none !important;
    display: none !important;
}

/* (A) — the only arrow shown is .slicknav_arrow (library default ▼) */
.slicknav_arrow,
body .slicknav_arrow {
    font-size: 14px !important;
    color: #033e8a !important;
    margin-left: 8px !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    opacity: 1 !important;
}
.slicknav_open > a .slicknav_arrow,
body .slicknav_open > a .slicknav_arrow {
    transform: rotate(180deg) !important;
    color: #0078b7 !important;
}
.slicknav_arrow::after,
.slicknav_arrow::before,
.slicknav_arrow:after,
.slicknav_arrow:before { content: none !important; display: none !important; }

/* (B) — Mobile menu scroll fix */
.slicknav_menu,
.slicknav_nav,
body .slicknav_nav {
    max-height: none !important;
    overflow: visible !important;
}
.slicknav_menu {
    max-height: calc(100vh - 80px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}
/* Submenu items inside slicknav: no height clip, no inner scrollbar */
.slicknav_nav .sub-menu,
.slicknav_nav ul,
.slicknav_nav .menu-item-has-children > .sub-menu {
    max-height: none !important;
    overflow: visible !important;
}

/* Topbar phone view — stack: contact (phone + WA + email) on row 1,
   social icons centred below on row 2. 2026-05-15
   Tablet view (768-991px) stays side-by-side (this only overrides phone). */
@media (max-width: 767px) {
    .topbar .row {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .topbar .row > [class*="col-"] {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .topbar-contact-row ul {
        justify-content: center !important;
        gap: 14px !important;
    }
    .topbar-social-links ul {
        justify-content: center !important;
        gap: 10px !important;
    }
    .topbar-social-links ul li a {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Social icons — clean consistent rendering. 2026-05-15
   Earlier rule used :has() + background-clip:text gradient on Instagram
   which is flaky across browsers (looked washed out vs the solid FB).
   New rule: paint each icon glyph with a flat brand-coloured fill,
   smaller relative to its white-circle background, consistent sizing. */

/* Reset any earlier brand-gradient-clip on Instagram icon */
.topbar-social-links ul li a .fa-instagram,
.main-footer .footer-social-links ul li a .fa-instagram,
body .topbar-social-links ul li a .fa-instagram,
body .main-footer .footer-social-links ul li a .fa-instagram {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
}

/* Solid brand colors per glyph (target the icon directly, not :has()) */
.topbar-social-links ul li a .fa-facebook,
.topbar-social-links ul li a .fa-facebook-f,
.main-footer .footer-social-links ul li a .fa-facebook,
.main-footer .footer-social-links ul li a .fa-facebook-f {
    color: #1877F2 !important;
    -webkit-text-fill-color: #1877F2 !important;
}
.topbar-social-links ul li a .fa-instagram,
.main-footer .footer-social-links ul li a .fa-instagram {
    color: #E4405F !important;
    -webkit-text-fill-color: #E4405F !important;
}
.topbar-social-links ul li a .fa-youtube,
.main-footer .footer-social-links ul li a .fa-youtube {
    color: #FF0000 !important;
    -webkit-text-fill-color: #FF0000 !important;
}
.topbar-social-links ul li a .fa-whatsapp,
.main-footer .footer-social-links ul li a .fa-whatsapp {
    color: #25D366 !important;
    -webkit-text-fill-color: #25D366 !important;
}
.topbar-social-links ul li a .fa-linkedin,
.topbar-social-links ul li a .fa-linkedin-in,
.main-footer .footer-social-links ul li a .fa-linkedin,
.main-footer .footer-social-links ul li a .fa-linkedin-in {
    color: #0A66C2 !important;
    -webkit-text-fill-color: #0A66C2 !important;
}
.topbar-social-links ul li a .fa-x-twitter,
.topbar-social-links ul li a .fa-twitter,
.main-footer .footer-social-links ul li a .fa-x-twitter,
.main-footer .footer-social-links ul li a .fa-twitter {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Sizing: keep glyph at ~55% of circle so it never fills edge-to-edge */
.topbar-social-links ul li a i,
.topbar-social-links ul li a svg {
    font-size: 13px !important;
    line-height: 1 !important;
}
.main-footer .footer-social-links ul li a i,
.main-footer .footer-social-links ul li a svg {
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Hover: keep white circle, glyph slightly brightened */
.topbar-social-links ul li a:hover,
.main-footer .footer-social-links ul li a:hover {
    background: #FFFFFF !important;
}

/* Slicknav arrow — final safety net. 2026-05-15
   If slicknav initialised twice and added two .slicknav_arrow spans,
   hide every duplicate after the first. Also nuke any pseudo on the
   parent anchor as a last-resort guard. */
html body .slicknav_arrow ~ .slicknav_arrow,
html body .slicknav_arrow + .slicknav_arrow,
html body .slicknav_nav .slicknav_arrow:nth-of-type(n+2) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
html body .slicknav_nav a::after,
html body .slicknav_nav a::before,
html body .slicknav_menu a::after,
html body .slicknav_menu a::before {
    content: none !important;
    display: none !important;
    background: none !important;
}


/* ============================================================
   FINAL NAV AUDIT — single source of truth for menu chevron logic.
   2026-05-15.

   Rules accumulated from many iterations and started contradicting:
     - Some rules forced rotate(180deg) on the chevron base state
     - Some left it at rotate(0deg)
     - The slicknav mobile menu was rendering 2 arrows
     - Submenu hover/open state was inconsistent

   This block is appended LAST so it wins on order, and uses
   `html body` prefix so it wins on specificity.
   ============================================================ */

/* ---------- DESKTOP PILL CHEVRON ----------
   Default state: chevron pointing DOWN (˅) — content is fa-chevron-down (\f107).
   Hover OR current-page state: rotate 180deg → chevron points UP (^).
*/
html body .navbar-nav > li.menu-item-has-children > a::after,
html body .main-menu .nav-menu-wrapper > ul > li.menu-item-has-children > a::after {
    content: "\f107" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    margin-left: 6px !important;
    color: #FFFFFF !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: rotate(0deg) !important;
    transition: transform 0.25s ease !important;
    opacity: 1 !important;
    float: none !important;
}

/* Rotate ONLY on hover, focus, or when this is the current page */
html body .navbar-nav > li.menu-item-has-children:hover > a::after,
html body .navbar-nav > li.menu-item-has-children > a:hover::after,
html body .navbar-nav > li.menu-item-has-children > a:focus::after,
html body .navbar-nav > li.menu-item-has-children.active > a::after,
html body .navbar-nav > li.menu-item-has-children.current-menu-item > a::after,
html body .navbar-nav > li.menu-item-has-children.current-menu-parent > a::after,
html body .navbar-nav > li.menu-item-has-children.current-menu-ancestor > a::after {
    transform: rotate(180deg) !important;
    color: #FFFFFF !important;
}

/* ---------- MOBILE SLICKNAV — single arrow only ----------
   1. Kill every pseudo-element chevron inside slicknav (no FA chevron).
   2. The only arrow shown is the slicknav library's native `<span class="slicknav_arrow">▼</span>`.
   3. That arrow rotates 180° when the submenu is open.
*/
html body .slicknav_nav li a::after,
html body .slicknav_nav li a::before,
html body .slicknav_menu li a::after,
html body .slicknav_menu li a::before,
html body .slicknav_nav .menu-item-has-children > a::after,
html body .slicknav_nav .menu-item-has-children > a::before,
html body .slicknav_nav .slicknav_parent > a::after,
html body .slicknav_arrow::after,
html body .slicknav_arrow::before {
    content: none !important;
    display: none !important;
}

html body .slicknav_arrow {
    font-size: 14px !important;
    color: #033e8a !important;
    margin-left: 8px !important;
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transition: transform 0.25s ease, color 0.25s ease !important;
    opacity: 1 !important;
    transform: rotate(0deg) !important;
    float: none !important;
}
html body .slicknav_open > a .slicknav_arrow {
    transform: rotate(180deg) !important;
    color: #0078b7 !important;
}

/* Also: if slicknav ever renders duplicate arrow spans (re-init bug), hide all but the first */
html body .slicknav_arrow ~ .slicknav_arrow { display: none !important; }

/* ---------- SUBMENU PANEL (desktop dropdown) ----------
   Keep the scrollable behavior from earlier, but with consistent borders. */
@media (min-width: 992px) {
    html body .navbar-nav .menu-item-has-children > .sub-menu {
        max-height: 60vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-width: 280px !important;
        background: #FAF7EB !important;
        border: 1px solid rgba(3, 62, 138, 0.12) !important;
        box-shadow: 0 6px 20px rgba(3, 62, 138, 0.10) !important;
        padding: 8px 0 !important;
        z-index: 9999 !important;
    }
}

/* ---------- HEADER PADDING / WRAP — make sure nothing collapses ---------- */
@media (min-width: 992px) {
    html body .main-header .header-sticky .navbar {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    html body .main-header .header-sticky .navbar > .container {
        flex-wrap: nowrap !important;
    }
}

/* Side drawer — Call Us pill: orange gradient. 2026-05-15 */
html body .side-drawer-call,
.side-drawer-call,
body .side-drawer-call {
    background: linear-gradient(135deg, #FF8C1A 0%, #E85D00 100%) !important;
    background-image: linear-gradient(135deg, #FF8C1A 0%, #E85D00 100%) !important;
}

/* Header brand text — bigger + heavier weight. 2026-05-15 */
html body .main-header .navbar-brand.brand-with-text .brand-text {
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.05 !important;
}
@media (max-width: 991px) {
    html body .main-header .navbar-brand.brand-with-text .brand-text {
        font-size: 30px !important;
        font-weight: 900 !important;
    }
}
@media (max-width: 767px) {
    html body .main-header .navbar-brand.brand-with-text .brand-text {
        font-size: 26px !important;
        font-weight: 900 !important;
    }
}
@media (max-width: 480px) {
    html body .main-header .navbar-brand.brand-with-text .brand-text {
        font-size: 22px !important;
        font-weight: 900 !important;
    }
}
@media (max-width: 380px) {
    html body .main-header .navbar-brand.brand-with-text .brand-text {
        font-size: 19px !important;
        font-weight: 900 !important;
    }
}

/* Founder Speech (Director Speech) section — image border. 2026-05-15 */
html body .director-speech .director-speech-image {
    padding: 10px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(3, 62, 138, 0.18);
    position: relative;
}
html body .director-speech .director-speech-image::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    padding: 4px;
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}
html body .director-speech .director-speech-image figure {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #cfe6f4;
    position: relative;
    z-index: 0;
}
html body .director-speech .director-speech-image figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
html body .director-speech .director-speech-placeholder {
    border-radius: 10px;
    border: 2px solid #cfe6f4;
}

/* Testimonial section — image should fully cover its half of the
   blue box, no visible blue padding around the image. 2026-05-15 */
html body .our-testimonials .testimonial-box,
html body .testimonial-box {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
}
html body .testimonial-box .testimonial-video-button {
    width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    flex: 0 0 50% !important;
}
html body .testimonial-box .testimonial-video-button .testimonial-section-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
html body .testimonial-box .testimonial-video-button .testimonial-section-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}
/* Right side: the slider gets the remaining 50% width with its own padding */
html body .testimonial-box .testimonial-slider-box,
html body .testimonial-box .testimonial-slider {
    width: 50% !important;
    flex: 0 0 50% !important;
    padding: 32px 32px 32px 28px !important;
}
@media (max-width: 991px) {
    html body .testimonial-box {
        flex-direction: column !important;
    }
    html body .testimonial-box .testimonial-video-button,
    html body .testimonial-box .testimonial-slider-box,
    html body .testimonial-box .testimonial-slider {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    html body .testimonial-box .testimonial-video-button .testimonial-section-image {
        min-height: 240px !important;
    }
}

/* CF7 submit buttons (Contact form + Enquiry drawer) — match the
   Book Appointment pill exactly. The blue outline/border thats


/* CF7 submit buttons match the Book Appointment green pill. 2026-05-15 */
html body .wpcf7 input.wpcf7-submit,
html body .wpcf7 input[type=submit],
html body .wpcf7 input[type=submit].wpcf7-form-control,
html body .wpcf7 input[type=submit].has-spinner,
html body .wpcf7 .wpcf7-form input[type=submit],
html body .enquiry-popup-form input[type=submit],
html body .contact-us-form input[type=submit],
html body .member-contact-form input[type=submit],
html body input[type=submit].wpcf7-submit {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-image: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    background-color: #25D366 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 999px !important;
    padding: 14px 40px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: 0 4px 14px rgba(18, 140, 126, 0.28) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease !important;
    cursor: pointer !important;
    min-height: 0 !important;
    height: auto !important;
    width: auto !important;
    display: inline-block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
html body .wpcf7 input.wpcf7-submit:hover,
html body .wpcf7 input[type=submit]:hover,
html body .enquiry-popup-form input[type=submit]:hover,
html body input[type=submit].wpcf7-submit:hover {
    background: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    background-image: linear-gradient(135deg, #128C7E 0%, #075E54 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(7, 94, 84, 0.40) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
html body .wpcf7 input.wpcf7-submit:focus,
html body .wpcf7 input[type=submit]:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.30) !important;
}


/* Testimonial section — REVERT my width/layout changes, keep the
   original right-card width. Image fills the ENTIRE blue testimonial-box
   as a background; the review card sits on top of it on the right.
   2026-05-15 */
html body .our-testimonials .testimonial-box,
html body .testimonial-box {
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    position: relative !important;
}

/* Image now spans the WHOLE blue box (behind everything), not just half */
html body .testimonial-box .testimonial-video-button {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
    z-index: 0 !important;
}
html body .testimonial-box .testimonial-video-button .testimonial-section-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
html body .testimonial-box .testimonial-video-button .testimonial-section-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Review card on the right — keep its width as before; sit ON TOP of image */
html body .testimonial-box .testimonial-slider-box,
html body .testimonial-box .testimonial-slider {
    position: relative !important;
    z-index: 1 !important;
    width: calc(50% - 15px) !important;
    flex: 0 0 calc(50% - 15px) !important;
    margin-left: auto !important;
    padding: 32px 32px 32px 28px !important;
    background: rgba(3, 62, 138, 0.92) !important;
    border-radius: 24px !important;
}

@media (max-width: 991px) {
    html body .testimonial-box {
        min-height: 460px !important;
    }
    html body .testimonial-box .testimonial-slider-box,
    html body .testimonial-box .testimonial-slider {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-top: auto !important;
    }
}


/* Service card "Coming Soon" diagonal corner ribbon. 2026-05-15 */
html body .service-flip-wrap {
    position: relative;
    overflow: hidden;
}
html body .service-flip-wrap .service-coming-soon {
    position: absolute;
    top: 18px;
    right: -50px;
    width: 180px;
    transform: rotate(45deg);
    transform-origin: center center;
    background: linear-gradient(135deg, #FF8C1A 0%, #E85D00 100%);
    color: #FFFFFF;
    -webkit-text-fill-color: #FFFFFF;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-align: center;
    padding: 6px 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.20);
    text-transform: uppercase;
    z-index: 5;
    pointer-events: none;
    line-height: 1.1;
}

/* Slight tab effect at the ribbon ends */
html body .service-flip-wrap .service-coming-soon::before,
html body .service-flip-wrap .service-coming-soon::after {
    content: "";
    position: absolute;
    top: 100%;
    border: 4px solid transparent;
    border-top-color: #A03E00;
}
html body .service-flip-wrap .service-coming-soon::before { left: 6px; }
html body .service-flip-wrap .service-coming-soon::after  { right: 6px; }

@media (max-width: 575px) {
    html body .service-flip-wrap .service-coming-soon {
        width: 140px;
        top: 14px;
        right: -40px;
        font-size: 10.5px;
        padding: 5px 0;
    }
}


/* Testimonial section — restore original left/right layout.
   Image: left half. Review card: right half. Both side by side,
   no overlay, no blue gradient strip visible between them. 2026-05-15 */
html body .our-testimonials .testimonial-box,
html body .testimonial-box {
    position: relative !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
}

/* Image — LEFT half only, not absolute, not background */
html body .testimonial-box .testimonial-video-button {
    position: relative !important;
    inset: auto !important;
    width: 50% !important;
    flex: 0 0 50% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    align-self: stretch !important;
}
html body .testimonial-box .testimonial-video-button .testimonial-section-image {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: block !important;
}
html body .testimonial-box .testimonial-video-button .testimonial-section-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Review card — RIGHT half only, no overlay, full opacity */
html body .testimonial-box .testimonial-slider-box,
html body .testimonial-box .testimonial-slider {
    position: relative !important;
    z-index: 1 !important;
    width: 50% !important;
    flex: 0 0 50% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 32px 32px 32px 28px !important;
    background: transparent !important;
    border-radius: 0 !important;
}

@media (max-width: 991px) {
    html body .testimonial-box {
        flex-direction: column !important;
        min-height: 0 !important;
    }
    html body .testimonial-box .testimonial-video-button,
    html body .testimonial-box .testimonial-slider-box,
    html body .testimonial-box .testimonial-slider {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    html body .testimonial-box .testimonial-video-button .testimonial-section-image {
        min-height: 240px !important;
    }
}


/* TESTIMONIAL FINAL — undo my .testimonial-slider width:50% mistake.
   That rule was nesting 50% inside an already-50% wrap, making the slider
   too narrow and pushing the card into a weird state. Reset slider to
   100% of its container. 2026-05-15 */
html body .testimonial-box .testimonial-slider {
    width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* slider-box still holds the right half */
html body .testimonial-box .testimonial-slider-box {
    width: 50% !important;
    flex: 0 0 50% !important;
    padding: 32px 32px 32px 28px !important;
    background: transparent !important;
}

/* Make sure video-button half actually renders */
html body .testimonial-box {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}
html body .testimonial-box > .testimonial-video-button {
    width: 50% !important;
    flex: 0 0 50% !important;
    min-height: 360px !important;
    display: block !important;
}
html body .testimonial-box > .testimonial-video-button .testimonial-section-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
}
html body .testimonial-box > .testimonial-video-button .testimonial-section-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

@media (max-width: 991px) {
    html body .testimonial-box {
        flex-direction: column !important;
    }
    html body .testimonial-box > .testimonial-video-button,
    html body .testimonial-box .testimonial-slider-box {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    html body .testimonial-box > .testimonial-video-button { min-height: 240px !important; }
}


/* Testimonial section — RESTORE the original design from before my interventions.
   Box: blue gradient, rounded 30px corners, padded, with 30px gap between cols.
   Image: left half (calc(50% - 15px)) with rounded 24px corners, 320px min-height.
   Card: right half (calc(50% - 15px)).
   2026-05-15 — final */
html body .testimonial-box,
html body .our-testimonials .testimonial-box {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 40px 30px !important;
    padding: 40px !important;
    border-radius: 30px !important;
    overflow: visible !important;
    position: relative !important;
}
html body .testimonial-box > .testimonial-video-button {
    position: relative !important;
    inset: auto !important;
    width: calc(50% - 15px) !important;
    flex: 0 0 calc(50% - 15px) !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    z-index: 1 !important;
    align-self: auto !important;
    height: auto !important;
}
html body .testimonial-box > .testimonial-video-button .testimonial-section-image {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    display: block !important;
    padding: 0 !important;
}
html body .testimonial-box > .testimonial-video-button .testimonial-section-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    object-fit: cover !important;
    border-radius: 24px !important;
    display: block !important;
}
html body .testimonial-box .testimonial-slider-box {
    width: calc(50% - 15px) !important;
    flex: 0 0 calc(50% - 15px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}
html body .testimonial-box .testimonial-slider {
    width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

@media (max-width: 991px) {
    html body .testimonial-box {
        flex-direction: column !important;
        padding: 24px !important;
        gap: 24px !important;
    }
    html body .testimonial-box > .testimonial-video-button,
    html body .testimonial-box .testimonial-slider-box {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    html body .testimonial-box > .testimonial-video-button .testimonial-section-image,
    html body .testimonial-box > .testimonial-video-button .testimonial-section-image img {
        min-height: 240px !important;
    }
}

/* Footer Contact — location icon next to address, no gap. 2026-05-15
   The address li was display:flex which pushed the icon and text apart.
   Switch it back to inline-block flow with the icon tight against the text. */
html body .main-footer .footer-links ul li,
html body .main-footer .footer-cols-row .footer-links ul li,
html body .main-footer .footer-cols-row .footer-links ul li:last-child {
    display: block !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-align: left !important;
    line-height: 1.55 !important;
    padding-left: 22px !important;
    text-indent: -22px !important;
}
html body .main-footer .footer-links ul li i,
html body .main-footer .footer-links ul li .fa,
html body .main-footer .footer-cols-row .footer-links ul li i,
html body .main-footer .footer-cols-row .footer-links ul li .fa {
    display: inline-block !important;
    width: 16px !important;
    margin-right: 6px !important;
    text-align: center !important;
    text-indent: 0 !important;
    vertical-align: baseline !important;
}

/* Header text logo — line-height per request. 2026-05-15 */
html body .main-header .navbar-brand.brand-with-text .brand-text {
    line-height: 3.05 !important;
}

/* Menu bar — remove top/bottom padding. 2026-05-15 */
html body .main-header .header-sticky,
html body .main-header .header-sticky.active,
html body .main-header .header-sticky .navbar,
html body .main-header .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Footer Contact rows — clean icon + text alignment. 2026-05-15
   Flex layout: icon = fixed first column, text = second column that
   wraps within itself so all wrapped lines align under the text. */
html body .main-footer .footer-links ul li,
html body .main-footer .footer-cols-row .footer-links ul li,
html body .main-footer .footer-cols-row .footer-links ul li:last-child {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-indent: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
}
html body .main-footer .footer-links ul li i,
html body .main-footer .footer-links ul li .fa,
html body .main-footer .footer-cols-row .footer-links ul li i,
html body .main-footer .footer-cols-row .footer-links ul li .fa {
    flex: 0 0 16px !important;
    width: 16px !important;
    margin: 0 !important;
    margin-top: 3px !important;
    text-align: center !important;
    text-indent: 0 !important;
    line-height: inherit !important;
}
html body .main-footer .footer-links ul li a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    word-break: break-word !important;
}


/* Blog single page — image display fixes. 2026-05-15 */

/* Plain page-header banner (no bg image) — just the blue gradient */
html body .page-header.parallaxie.page-header-plain {
    background: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
    background-image: linear-gradient(135deg, #0078b7 0%, #033e8a 100%) !important;
}
html body .page-header.parallaxie.page-header-plain::before {
    display: none !important;
}

/* The in-content featured image — show it FULLY, no diagonal anim panel,
   no visibility:hidden reveal lock */
html body .page-single-post .post-image figure.image-anime,
html body .page-single-post .post-image figure.reveal {
    visibility: visible !important;
    overflow: visible !important;
    display: block !important;
    border-radius: 14px !important;
    margin: 0 0 30px !important;
}
html body .page-single-post .post-image figure.image-anime::after,
html body .page-single-post .post-image figure.image-anime:after {
    content: none !important;
    display: none !important;
}
html body .page-single-post .post-image figure img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 14px !important;
    display: block !important;
    max-width: 100% !important;
}
/* Keep the post image at a sensible max width so a tall portrait
   doesn't dominate the whole article column */
html body .page-single-post .post-image {
    text-align: center;
    margin-bottom: 30px;
}
html body .page-single-post .post-image figure {
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Terms & Conditions page. 2026-05-15 */
html body .terms-page {
    padding: 70px 0 90px;
    background: #FFFFFF;
}
html body .terms-page .terms-content {
    color: #4a3f52;
    font-size: 15.5px;
    line-height: 1.8;
}
html body .terms-page .terms-content h1,
html body .terms-page .terms-content h2,
html body .terms-page .terms-content h3,
html body .terms-page .terms-content h4 {
    color: #033e8a;
    margin: 26px 0 12px;
    line-height: 1.3;
}
html body .terms-page .terms-content h2 { font-size: 24px; }
html body .terms-page .terms-content h3 { font-size: 19px; }
html body .terms-page .terms-content p { margin: 0 0 14px; }
html body .terms-page .terms-content ul,
html body .terms-page .terms-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
html body .terms-page .terms-content li { margin-bottom: 6px; }
html body .terms-page .terms-content strong { color: #033e8a; }
html body .terms-page .terms-content a { color: #0078b7; text-decoration: underline; }

html body .terms-page .terms-download {
    margin-top: 36px;
    text-align: center;
}
html body .terms-page .terms-download .btn-default {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
html body .terms-page .terms-download .btn-default i {
    color: inherit !important;
    font-size: 16px;
}

@media (max-width: 767px) {
    html body .terms-page { padding: 44px 0 56px; }
    html body .terms-page .terms-content { font-size: 14.5px; }
}

/* Coming Soon ribbon — fix the cropped text. The strap was too short
   and sat too high, so its top-right end (with part of the text) was
   clipped by the card overflow:hidden. Wider strap + lower position so
   the text sits centred in the visible diagonal band. 2026-05-15 */
html body .service-flip-wrap .service-coming-soon {
    top: 26px !important;
    right: -62px !important;
    width: 210px !important;
    padding: 7px 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
}
html body .service-flip-wrap .service-coming-soon::before,
html body .service-flip-wrap .service-coming-soon::after {
    display: none !important;
}
@media (max-width: 575px) {
    html body .service-flip-wrap .service-coming-soon {
        top: 20px !important;
        right: -58px !important;
        width: 180px !important;
        font-size: 9.5px !important;
        padding: 6px 0 !important;
    }
}

/* Footer social icons — solid white circle. 2026-05-15 */
html body .main-footer .footer-social-links ul li a {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
}
html body .main-footer .footer-social-links ul li a:hover {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    transform: translateY(-2px) scale(1.05) !important;
}


/* Footer brand — logo + "Alipur Aya Centre" text. 2026-05-15
   Desktop: logo then text side-by-side, text big + bold.
   Phone: text drops below the logo (stacked, centred). */
html body .main-footer .footer-logo .footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    text-decoration: none !important;
}
html body .main-footer .footer-logo .footer-brand-text {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.3px;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    white-space: nowrap;
}

@media (max-width: 767px) {
    html body .main-footer .footer-logo .footer-brand-link {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    html body .main-footer .footer-logo .footer-brand-text {
        font-size: 24px;
        white-space: normal;
    }
}
@media (max-width: 380px) {
    html body .main-footer .footer-logo .footer-brand-text {
        font-size: 20px;
    }
}


/* ============================================================
   SLICKNAV FINAL — one source of truth. 2026-05-15
   Problem: earlier `.slicknav_nav .slicknav_arrow:after { content:"\f107" }`
   (specificity 0,2,1) was beating the `html body .slicknav_arrow::after`
   kill-rules (0,1,3) — so a FontAwesome chevron AND slicknav's native
   arrow span both rendered = two arrows. Also parent items were extra-
   indented. This block uses `html body .slicknav_nav` prefixes so it
   wins on specificity, and is appended last so it wins on order.
   ============================================================ */

/* 1) Kill EVERY pseudo-element chevron anywhere in the slicknav menu */
html body .slicknav_nav .slicknav_arrow::after,
html body .slicknav_nav .slicknav_arrow::before,
html body .slicknav_nav .slicknav_arrow:after,
html body .slicknav_nav .slicknav_arrow:before,
html body .slicknav_nav a::after,
html body .slicknav_nav a::before,
html body .slicknav_nav li a::after,
html body .slicknav_nav li a::before,
html body .slicknav_nav .slicknav_item::after,
html body .slicknav_nav .slicknav_row::after {
    content: none !important;
    display: none !important;
}

/* 2) The ONLY arrow = slicknav's native <span class="slicknav_arrow">.
   It already swaps ► (closed) / ▼ (open) via the library JS. */
html body .slicknav_nav .slicknav_arrow {
    display: inline-block !important;
    font-size: 12px !important;
    color: #033e8a !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    background: transparent !important;
}
/* Guard against a duplicate arrow span if slicknav ever re-inits */
html body .slicknav_nav .slicknav_arrow ~ .slicknav_arrow {
    display: none !important;
}

/* 3) Uniform indentation — no extra gap before parent items (Services).
   Earlier vendor + override rules gave .slicknav_row / parent links a
   bigger left margin than plain items. Force them all equal. */
html body .slicknav_nav li,
html body .slicknav_nav li a,
html body .slicknav_nav li .slicknav_item,
html body .slicknav_nav li .slicknav_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
html body .slicknav_nav > li > a,
html body .slicknav_nav > li > .slicknav_item {
    padding: 12px 20px !important;
    display: block !important;
}
/* Submenu (child) items — one consistent indent step */
html body .slicknav_nav ul li a {
    padding: 9px 20px 9px 38px !important;
}

/* Slicknav parent item indent fix — 2026-05-15.
   slicknav double-wraps a dropdown parent: an outer a.slicknav_item
   holds an inner a (the real link). Both anchors inherited the theme
   link padding/margin, double-indenting parent text like "Services".
   Keep padding on the outer anchor only; flatten the inner one. */
html body .slicknav_nav li .slicknav_item > a,
html body .slicknav_nav li .slicknav_row > a,
html body .slicknav_nav li > a > a,
html body .slicknav_nav .slicknav_parent > a > a {
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    background: transparent !important;
    border: 0 !important;
}
html body .slicknav_nav > li > a,
html body .slicknav_nav > li > a.slicknav_item,
html body .slicknav_nav > li > a.slicknav_row {
    padding: 12px 20px !important;
    margin: 0 !important;
    display: block !important;
}