/* Shivkrupa Ambulance Service - theme overrides on top of the base template */

:root{
	--accent-color: #E4002B !important;
}

/* ===== Hero Background Image ===== */
.hero{
	background-image: url('../images/slider.png');
}

.about-body-item-header .icon-box{
	background-color: #E4002B !important;
}

/* ===== How It Works Background Image ===== */
.intro-video{
	background-image: url('../images/how.png');
}

/* ===== Hero Sub-title: fix cramped 2-line wrap on mobile =====
   The pill badge (.section-sub-title) was built for a single short line —
   tight line-height and an icon vertically centered with translateY(-50%).
   "Trusted Emergency Medical Transportation Since 2007" wraps to 2 lines on
   small screens, which squashed the lines together and threw the icon off.
   Give it breathing room and pin the icon to the top instead. */
@media (max-width: 575px){
	.hero-content .section-title .section-sub-title{
		display: block;
		line-height: 1.5;
		padding: 12px 18px 12px 44px;
		white-space: normal;
	}
	.hero-content .section-title .section-sub-title::before{
		top: 18px;
		transform: none;
	}
}

/* ===== Footer: newsletter box removed, contact list now full width ===== */
.footer-contact-items-list{
	width: 100%;
}
/* Tighten the gap between icon and text — match the close spacing used in Quick Links/Contact Info list */
.footer-contact-item{
	gap: 8px;
	flex: 1 1 260px;
	min-width: 0;
	align-items: flex-start;
}
.footer-contact-item .icon-box{
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}
.footer-contact-item .icon-box img{
	max-width: 18px;
}
.footer-contact-item-content{
	width: calc(100% - 48px);
	min-width: 0;
}
.footer-contact-item-content h3{
	overflow-wrap: anywhere;
	word-break: break-word;
}
.footer-contact-item-numbers{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
}
.footer-contact-item-divider{
	color: rgba(255,255,255,0.4);
	font-weight: 400;
}
@media (max-width: 575px){
	.footer-contact-item{
		gap: 8px;
	}
	.footer-contact-item .icon-box{
		width: 36px;
		height: 36px;
	}
	.footer-contact-item .icon-box img{
		max-width: 16px;
	}
	.footer-contact-item-content{
		width: calc(100% - 44px);
	}
	.footer-contact-item-content h3{
		font-size: 16px;
	}
	.footer-contact-item-numbers{
		font-size: 15px;
		gap: 4px 8px;
	}
}
.navbar-brand img{
	max-width: 56px;
	height: auto;
}
.footer-logo img{
	max-width: 60px;
	height: auto;
}
#loading-icon img{
	max-width: 78px;
	height: auto;
}

/* Brand text next to logo mark */
.navbar-brand{
	display: flex;
	align-items: center;
	gap: 12px;
}
.navbar-brand .brand-text,
.footer-logo .brand-text{
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	white-space: nowrap;
}
.brand-text-main{
	font-family: var(--accent-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--white-color);
}
.brand-text-sub{
	font-family: var(--accent-font);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--accent-color);
}
/* Text stays white + red (accent) on both transparent and sticky navbar
   states, since both use a dark background — navy from the logo mark
   would be invisible here, so we swap it for the site's red accent. */
.header-sticky:not(.sticky) .navbar-brand .brand-text-main,
.sticky .navbar-brand .brand-text-main{
	color: var(--white-color);
}
.header-sticky:not(.sticky) .navbar-brand .brand-text-sub,
.sticky .navbar-brand .brand-text-sub{
	color: var(--accent-color);
}

.footer-logo{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}
.footer-logo img{
	flex-shrink: 0;
}
.footer-logo .brand-text-main{
	font-size: 21px;
}
.footer-logo .brand-text-sub{
	font-size: 21px;
}

@media (max-width: 1199px){
	.brand-text-main{
		font-size: 16px;
	}
	.brand-text-sub{
		font-size: 16px;
	}
}
@media (max-width: 991px){
	.navbar-brand .brand-text{
		white-space: normal;
	}
	.brand-text-main{
		font-size: 17px;
	}
	.brand-text-sub{
		font-size: 17px;
	}
}

/* Floating emergency call button */
.floating-call-btn{
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--accent-color);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	z-index: 999;
	box-shadow: 0 8px 24px rgba(228,0,43,0.45);
	animation: floatingPulse 1.8s infinite;
	text-decoration: none;
}
.floating-call-btn:hover{
	color: #fff;
}
@keyframes floatingPulse{
	0%{ box-shadow: 0 0 0 0 rgba(228,0,43,0.55); }
	70%{ box-shadow: 0 0 0 16px rgba(228,0,43,0); }
	100%{ box-shadow: 0 0 0 0 rgba(228,0,43,0); }
}

@media (max-width: 767px){
	.floating-call-btn{
		width: 52px;
		height: 52px;
		right: 16px;
		bottom: 16px;
		font-size: 18px;
	}
}

/* ===== Nav: keep single line, never wrap, on all devices ===== */
.navbar{
	flex-wrap: nowrap;
}
.main-menu{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.main-menu ul li a{
	white-space: nowrap;
}
.header-btn .btn-default{
	white-space: nowrap;
}
@media (min-width: 992px) and (max-width: 1199px){
	.main-menu ul li{
		margin: 0 6px;
	}
	.main-menu ul li a{
		font-size: 14px;
		padding: 12px 6px !important;
	}
	.header-btn .btn-default{
		font-size: 13px;
		padding: 14px 48px 14px 18px;
	}
	.navbar-brand .brand-text{
		display: none;
	}
}
@media (min-width: 1200px) and (max-width: 1399px){
	.main-menu ul li{
		margin: 0 8px;
	}
	.header-btn .btn-default{
		font-size: 14px;
		padding: 15px 50px 15px 20px;
	}
}

/* ===== Hero Highlights ===== */
.hero-highlights{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 30px 0;
}
.hero-highlights .hero-highlight-item{
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.18);
	color: var(--white-color);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: 100px;
}
.hero-highlights .hero-highlight-item i{
	color: var(--accent-color);
	font-size: 15px;
}

/* ===== Hero Buttons (multi) ===== */
.hero-btn{
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
}
.hero-btn .btn-default i{
	margin-right: 6px;
}
/* Smaller hero buttons — scoped so other buttons sharing .btn-default elsewhere aren't affected */
.hero-btn .btn-default{
	font-size: 14px;
	padding: 13px 42px 13px 18px;
}
.hero-btn .btn-default::before{
	width: 32px;
	height: 32px;
	background-size: 16px auto;
}
.hero-btn .btn-default.btn-outline{
	padding: 12px 22px;
}
.hero-btn .btn-default.btn-whatsapp{
	padding: 13px 22px;
}
@media (max-width: 575px){
	.hero-btn{
		gap: 10px;
	}
	.hero-btn .btn-default{
		font-size: 13px;
		padding: 11px 36px 11px 16px;
	}
	.hero-btn .btn-default::before{
		width: 28px;
		height: 28px;
		right: 4px;
		background-size: 14px auto;
	}
	.hero-btn .btn-default.btn-outline{
		padding: 10px 18px;
	}
	.hero-btn .btn-default.btn-whatsapp{
		padding: 11px 18px;
	}
}
.btn-default.btn-outline{
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);
	color: var(--white-color);
}
.btn-default.btn-outline::before{
	background-color: transparent;
	background-image: none;
	display: none;
}
.btn-default.btn-outline{
	padding: 16px 28px;
}
.btn-default.btn-outline:hover{
	border-color: var(--accent-color);
	color: var(--white-color);
}
.btn-default.btn-outline::after{
	background: var(--accent-color);
}
.btn-default.btn-whatsapp{
	background: #25D366;
	padding: 17px 28px;
}
.btn-default.btn-whatsapp::before{
	display: none;
}
.btn-default.btn-whatsapp::after{
	background: var(--primary-color);
}
.btn-default.btn-whatsapp i{
	font-size: 18px;
}

/* ===== How It Works (4 steps) — now a slider, same pattern as Services ===== */
.how-it-works-slider{
	margin-top: 220px;
}
.how-it-works-slider .swiper{
	overflow: hidden;
}
.intro-video-items-list.how-it-works-list{
	flex-wrap: nowrap;
	gap: 0;
	margin-top: 0;
}
/* Swiper stretches each .swiper-slide to match the tallest slide, but the card
   itself (.intro-video-item) only sized to its own content inside that slide —
   so shorter step text produced a visibly smaller card. Force the card to fill
   its slide so all 4 step cards render at the same size. */
.how-it-works-list.swiper-wrapper .swiper-slide{
	height: auto;
	display: flex;
}
.how-it-works-list .intro-video-item{
	width: 100%;
	height: 100%;
	min-height: 220px;
	padding: 30px;
	gap: 14px;
	justify-content: flex-start;
}
.how-it-works-list .icon-box .step-num{
	position: relative;
	z-index: 1;
	color: var(--white-color);
	font-weight: 800;
	font-size: 20px;
}
.how-it-works-pagination{
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}
.how-it-works-pagination .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
	background: var(--white-color);
	opacity: 0.35;
	border-radius: 50%;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}
.how-it-works-pagination .swiper-pagination-bullet-active{
	background: var(--accent-color);
	opacity: 1;
	width: 26px;
	border-radius: 100px;
}
@media (max-width: 991px){
	.how-it-works-slider{
		margin-top: 80px;
	}
	.how-it-works-list .intro-video-item{
		min-height: 200px;
	}
}
@media (max-width: 575px){
	.how-it-works-list .intro-video-item{
		min-height: auto;
		padding: 26px;
		gap: 10px;
	}
	.how-it-works-icon{
		margin: 2px 0;
	}
}

/* ===== Why Choose Checklist ===== */
.why-choose-checklist{
	list-style: none;
	margin: 30px 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
}
.why-choose-checklist li{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
	background: var(--secondary-color);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 4px 18px rgba(2,22,35,0.06);
}
.why-choose-checklist li i{
	color: var(--accent-color);
	font-size: 18px;
	flex-shrink: 0;
}
@media (max-width: 575px){
	.why-choose-checklist{
		grid-template-columns: 1fr;
	}
}

/* ===== Emergency Contact Banner ===== */
.emergency-banner{
	padding: 90px 0;
	text-align: center;
}
.emergency-banner-inner .section-sub-title{
	display: inline-block;
	margin-bottom: 15px;
	color: var(--white-color);
}
.emergency-banner-inner h2{
	margin-bottom: 30px;
	color: var(--white-color);
	font-size: 44px;
}
.emergency-number span{
	white-space: nowrap;
}
@media (max-width: 991px){
	.emergency-banner{
		padding: 60px 0;
	}
	.emergency-banner-inner h2{
		font-size: 30px;
	}
	.emergency-number{
		font-size: 14px;
		padding: 11px 20px;
	}
}
@media (max-width: 575px){
	.emergency-banner-inner h2{
		font-size: 22px;
		margin-bottom: 20px;
	}
	.emergency-banner-inner .section-sub-title{
		font-size: 13px;
	}
	.emergency-number{
		font-size: 13px;
		padding: 10px 16px;
		gap: 6px;
	}
	.emergency-number.primary span{
		white-space: nowrap;
	}
	.emergency-number.alternate span{
		white-space: normal;
	}
	.emergency-banner-numbers{
		gap: 10px;
	}
}
.emergency-banner-numbers{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-bottom: 20px;
}
.emergency-number{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 100px;
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}
.emergency-number.primary{
	background: var(--accent-color);
	color: var(--white-color);
}
.emergency-number.primary:hover{
	background: var(--white-color);
	color: var(--primary-color);
}
.emergency-number.alternate{
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);
	color: var(--white-color);
}
.emergency-number.alternate:hover{
	border-color: var(--accent-color);
	color: var(--accent-color);
}
.emergency-banner-inner > p{
	color: rgba(255,255,255,0.75);
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ===== Footer Contact Inline List ===== */
/* This list lives inside .footer-working-hours-links, whose base template rule
   ".footer-working-hours-links ul li" sets display:flex + justify-content:space-between
   (built for a two-column "day / hours" layout) and beats our own li rule below on
   specificity — that's what was shoving the icon to the left and the text/address
   all the way to the right. Override it explicitly here. */
.footer-working-hours-links .footer-contact-inline li{
	justify-content: flex-start;
}
.footer-contact-inline{
	list-style: none;
	padding: 0;
	margin: 14px 0 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.footer-contact-inline li{
	color: rgba(255,255,255,0.75);
	font-size: 14px;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.footer-contact-inline li i{
	color: var(--accent-color);
	width: 16px;
	flex-shrink: 0;
	margin-top: 3px;
}
.footer-contact-inline li a{
	color: rgba(255,255,255,0.75);
}
.footer-contact-inline li a:hover{
	color: var(--accent-color);
}

/* ===== Floating Button Stack (Call / WhatsApp / Mail) ===== */
.floating-btn-stack{
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	z-index: 999;
}
.floating-btn{
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
	transition: transform 0.3s ease-in-out;
}
.floating-btn:hover{
	transform: scale(1.08);
	color: #fff;
}
.floating-btn.floating-call{
	width: 62px;
	height: 62px;
	font-size: 24px;
	background: #1944DF;
	animation: floatingPulseBlue 1.8s infinite;
}
.floating-btn.floating-whatsapp{
	background: #25D366;
}
.floating-btn.floating-mail{
	background: var(--accent-color);
}
@keyframes floatingPulseBlue{
	0%{ box-shadow: 0 0 0 0 rgba(25,68,223,0.55); }
	70%{ box-shadow: 0 0 0 16px rgba(25,68,223,0); }
	100%{ box-shadow: 0 0 0 0 rgba(25,68,223,0); }
}

/* ===== How It Works: circular step icon with hover effect ===== */
.how-it-works-icon{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 4px 0;
	border: 2px solid var(--accent-color);
	border-radius: 50%;
	font-size: 20px;
	color: var(--accent-color);
	background: transparent;
	transition: all 0.4s ease-in-out;
}
.intro-video-item:hover .how-it-works-icon{
	background: var(--accent-color);
	color: var(--white-color);
	transform: scale(1.08);
	box-shadow: 0 8px 20px rgba(228,0,43,0.35);
}

/* ===== Service Card: title on image + read more ===== */
.service-image-title{
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(2,22,35,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--white-color);
	font-size: 15px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 100px;
}
.service-image-title i{
	color: var(--accent-color);
}
.project-item-content h2{
	font-size: 24px;
	margin-bottom: 0;
}
/* project-item is a flex column with justify-content:space-between; now that
   project-item-content is its only flex child, push it to the bottom instead
   of letting it collapse to the top. */
.project-item-content{
	margin-top: auto;
}
/* Card only shows the title (badge on the image); no description text. */
.service-readmore-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent-color);
	text-decoration: none;
}
/* Title + Read More live together at the bottom of the card; the red
   arrow button sits directly to the right of Read More, always visible. */
.service-card-footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}
.service-card-footer .project-item-btn{
	position: relative;
	transform: scale(1);
	margin: 0;
	z-index: 1;
}
.service-card-footer .project-item-btn a{
	width: 42px;
	height: 42px;
}
.service-readmore-btn i{
	transition: transform 0.3s ease-in-out;
}
.service-readmore-btn:hover{
	color: var(--primary-color);
}
.service-readmore-btn:hover i{
	transform: translateX(4px);
}

/* ===== Service Detail Popup ===== */
.service-popups-wrapper{
	display: none;
}
.service-popup{
	position: relative;
	background: var(--white-color);
	max-width: 640px;
	width: 92%;
	margin: 40px auto;
	border-radius: 20px;
	overflow: hidden;
}
.service-popup .mfp-close{
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	line-height: 38px;
	background: rgba(2,22,35,0.55);
	color: #fff;
	border-radius: 50%;
	font-size: 22px;
	opacity: 1;
}
.service-popup-image{
	height: 280px;
}
.service-popup-image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.service-popup-body{
	padding: 30px 30px 34px;
}
.service-popup-tag{
	display: inline-block;
	background: var(--secondary-color);
	color: var(--primary-color);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: 14px;
}
.service-popup-body h3{
	font-size: 26px;
	margin-bottom: 14px;
}
.service-popup-body p{
	font-size: 15px;
	color: var(--body-color);
	margin-bottom: 26px;
}
.service-popup-actions{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* ===== Share Widget (icon -> 3 sub icons) ===== */
.share-widget{
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
.share-toggle-btn{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--primary-color);
	border: none;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	flex-shrink: 0;
}
.share-toggle-btn:hover,
.share-widget.active .share-toggle-btn{
	background: var(--accent-color);
	color: var(--white-color);
}
.share-sub-icons{
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}
.share-widget.active .share-sub-icons{
	max-width: 220px;
	opacity: 1;
}
.share-icon{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 16px;
	flex-shrink: 0;
	transition: transform 0.3s ease-in-out;
}
.share-icon:hover{
	transform: scale(1.1);
	color: #fff;
}
.share-icon.share-call{
	background: var(--primary-color);
}
.share-icon.share-whatsapp{
	background: #25D366;
}
.share-icon.share-mail{
	background: var(--accent-color);
}

@media (max-width: 575px){
	.service-popup-image{
		height: 200px;
	}
	.service-popup-body{
		padding: 22px 20px 26px;
	}
	.service-popup-body h3{
		font-size: 21px;
	}
}

/* ===== FAQ Left Info Panel ===== */
.faq-info-box{
	position: sticky;
	top: 120px;
}
.faq-info-image{
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 24px;
}
.faq-info-image img{
	width: 100%;
	height: 260px;
	object-fit: cover;
	display: block;
}
.faq-info-card{
	background: var(--secondary-color);
	border-radius: 20px;
	padding: 30px;
}
.faq-info-card h3{
	font-size: 24px;
	margin-bottom: 12px;
}
.faq-info-card > p{
	font-size: 15px;
	color: var(--body-color);
	margin-bottom: 20px;
}
.faq-info-list{
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.faq-info-list li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--primary-color);
}
.faq-info-list li i{
	color: var(--accent-color);
	width: 18px;
	flex-shrink: 0;
	margin-top: 3px;
}
.faq-info-list li a{
	color: var(--primary-color);
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.faq-info-list li a:hover{
	color: var(--accent-color);
}
/* Base template adds a checkmark (::before) in front of every ".faq-info-box ul li",
   which showed up as a bullet sitting before our own Font Awesome icon. Kill it and
   the padding-left that was reserved for it, since spacing is now handled by flex gap. */
.faq-info-box .faq-info-list li{
	padding-left: 0;
}
.faq-info-box .faq-info-list li::before{
	content: none;
}

/* ===== Reviews: reclaim the width the removed reviewer photo used to take ===== */
.testimonial-author-content{
	width: 100%;
}
/* Card had min-height sized for photo + counter blocks that no longer
   exist; without it, space-between stretches huge gaps between what's left. */
.testimonial-item{
	min-height: auto;
}

/* ===== FAQ Heading Alignment Fix ===== */
/* The section markup uses class "our-faq" but the base stylesheet's
   section padding rule targets "our-faqs" (typo mismatch), so the section
   never got its top/bottom padding and the heading sat flush against the
   container edge. Add the missing padding directly. */
.our-faq{
	padding: 120px 0;
}
@media (max-width: 767px){
	.our-faq{
		padding: 60px 0;
	}
}
/* The animated heading text splits into lines/words via JS; make sure
   every line stays centered on desktop and mobile instead of drifting left. */
.our-faq .section-title{
	text-align: center;
}
.our-faq .section-title h2,
.our-faq .section-title .split-line{
	text-align: center;
	width: 100%;
}
@media (max-width: 575px){
	.our-faq .section-title{
		padding: 0 10px;
	}
}
@media (max-width: 991px){
	.faq-info-box{
		position: static;
		margin-bottom: 40px;
	}
}
/* "Chat on WhatsApp" — keep icon + label on a single row and never let the
   button (or anything else in the card) push past the card's own edges. */
.faq-info-card{
	overflow: hidden;
}
.faq-info-card .btn-whatsapp{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	white-space: nowrap;
	margin-top: 22px;
}
@media (max-width: 575px){
	.faq-info-card{
		padding: 22px;
	}
	.faq-info-card h3{
		font-size: 20px;
	}
	.faq-info-list li{
		font-size: 14px;
	}
	.faq-info-card .btn-whatsapp{
		width: 100%;
		padding: 14px 18px;
		font-size: 14px;
	}
	.faq-info-card .btn-whatsapp i{
		font-size: 16px;
	}
}

@media (max-width: 767px){
	.floating-btn-stack{
		right: 16px;
		bottom: 16px;
		gap: 10px;
	}
	.floating-btn{
		width: 46px;
		height: 46px;
		font-size: 17px;
	}
	.floating-btn.floating-call{
		width: 54px;
		height: 54px;
		font-size: 20px;
	}
	.floating-btn.floating-whatsapp{
		width: 42px;
		height: 42px;
		font-size: 16px;
	}
	.hero-highlights .hero-highlight-item{
		font-size: 12px;
		padding: 8px 14px;
	}
}
@media (max-width: 480px){
	.floating-btn-stack{
		right: 12px;
		bottom: 12px;
		gap: 8px;
	}
	.floating-btn.floating-whatsapp{
		width: 38px;
		height: 38px;
		font-size: 15px;
	}
	.floating-btn.floating-mail{
		width: 38px;
		height: 38px;
		font-size: 15px;
	}
	.floating-btn.floating-call{
		width: 48px;
		height: 48px;
		font-size: 18px;
	}
}

/* ===== Footer Copyright: "Designed By" credit link ===== */
.footer-copyright-text p a{
	color: var(--white-color);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}
.footer-copyright-text p a:hover{
	color: var(--accent-color);
}

/* ===== Mobile Nav Contact Number =====
   This <li> is duplicated by SlickNav into the mobile menu automatically
   (see js/function.js -> $('#menu').slicknav()). Keep it out of the desktop
   menu — desktop already has the phone number in .header-btn — and only
   reveal it inside the mobile slide-out list. */
.nav-contact-item{
	display: none;
}
@media (max-width: 991px){
	.nav-contact-item{
		display: block;
	}
	.nav-contact-item .nav-link{
		display: flex;
		align-items: center;
		gap: 8px;
		color: var(--white-color) !important;
		font-weight: 600;
	}
	.nav-contact-item .nav-link i{
		color: var(--white-color);
	}
}