/* ==========================================================================
   AICPL — Premium Theme Override
   Palette: #122339 (Deep Navy) · #b11b2a (Signal Red) · #faf7f1 (Warm Ivory)
   ========================================================================== */

:root {
	--navy: #122339;
	--red: #b11b2a;
	--ivory: #faf7f1;
	--navy-soft: #1c3350;
}

/* --------------------------------------------------------------------------
   1. Premium base polish
   -------------------------------------------------------------------------- */
body {
	background-color: var(--ivory);
}

a, button, .sis-btn-default, .header-login-btn {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Buttons get a richer, layered feel */
.sis-btn-default {
	background-color: var(--red) !important;
	color: var(--ivory) !important;
	border: 1px solid var(--red) !important;
	box-shadow: 0 6px 18px -6px rgba(177, 27, 42, 0.55);
	letter-spacing: 0.02em;
}

.sis-btn-default:hover {
	background-color: var(--navy) !important;
	border-color: var(--navy) !important;
	box-shadow: 0 8px 22px -6px rgba(18, 35, 57, 0.55);
	transform: translateY(-2px);
}

/* Header */
#sisf-page-header,
.sis-main-header {
	background-color: var(--ivory);
}

.sis-header-sticky.active {
	background-color: var(--ivory);
	box-shadow: 0 4px 20px rgba(18, 35, 57, 0.1);
}

#sisf-page-header-inner {
	border-bottom: 1px solid rgba(18, 35, 57, 0.08);
}

.navbar-nav .nav-link {
	position: relative;
}

/* Header background is now light ivory, so top-level nav text needs to be
   dark for contrast. This targets only the direct top-level links (Home,
   About Us, Service, Clients, Certificates, Contact Us) — the nested
   submenu links are untouched further down. */
.sis-main-menu ul.navbar-nav > li.nav-item > a.nav-link,
.sisf-skin--light .sis-main-menu ul.navbar-nav > li.nav-item > a.nav-link,
.sisf-skin--dark .sis-main-menu ul.navbar-nav > li.nav-item > a.nav-link {
	color: var(--navy) !important;
}

.sis-main-menu ul.navbar-nav > li.nav-item > a.nav-link .custom-toggle-icon {
	color: var(--navy) !important;
}

/* Top-level nav links turn red on hover, but NOT submenu/dropdown links */
.sis-main-menu > ul > li > a:hover,
.navbar-nav > li > a:hover,
.navbar-nav .nav-item.active > .nav-link {
	color: var(--red) !important;
}

/* Submenu (dropdown) links stay white on hover */
.sis-main-menu ul ul li a,
.sis-main-menu ul ul li a:hover,
.sis-main-menu ul ul li a:focus,
.sis-main-menu ul ul li a span,
.sis-main-menu ul ul li a:hover span {
	color: var(--white-color) !important;
}

/* --------------------------------------------------------------------------
   2. Header — social icons beside the Login button
   -------------------------------------------------------------------------- */
.header-social-icons {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: 22px;
	order: 2;
}

.header-social-icons a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: rgba(18, 35, 57, 0.06);
	border: 1px solid rgba(18, 35, 57, 0.15);
	color: var(--navy) !important;
	font-size: 14px;
}

.header-social-icons a:hover {
	background-color: var(--red);
	border-color: var(--red);
	color: var(--ivory) !important;
	transform: translateY(-2px);
}

.sisf-widget-holder.sisf--two {
	gap: 0;
}

/* Login button shows first, social icons follow after it */
.header-btn {
	order: 1;
}

/* --------------------------------------------------------------------------
   3. Floating WhatsApp + Call buttons
   -------------------------------------------------------------------------- */
.floating-contact-buttons {
	position: fixed;
	right: 22px;
	bottom: 90px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
}

.floating-contact-buttons a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	color: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	position: relative;
}

.floating-contact-buttons .fab-whatsapp {
	background-color: #25D366;
}

.floating-contact-buttons .fab-whatsapp:hover {
	background-color: #1ebe5b;
	color: #fff;
	transform: scale(1.08);
}

.floating-contact-buttons .fab-call {
	background-color: var(--red);
}

.floating-contact-buttons .fab-call:hover {
	background-color: var(--navy);
	color: #fff;
	transform: scale(1.08);
}

.floating-contact-buttons .fab-whatsapp::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: rgba(37, 211, 102, 0.55);
	animation: fab-pulse 2.2s ease-out infinite;
	z-index: -1;
}

.floating-contact-buttons .fab-call::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: rgba(177, 27, 42, 0.5);
	animation: fab-pulse 2.2s ease-out infinite;
	animation-delay: 1.1s;
	z-index: -1;
}

@keyframes fab-pulse {
	0% { transform: scale(1); opacity: 0.65; }
	100% { transform: scale(1.9); opacity: 0; }
}

@media (max-width: 575px) {
	.floating-contact-buttons {
		right: 14px;
		bottom: 80px;
		gap: 10px;
	}
	.floating-contact-buttons a {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   4. Mobile responsiveness pass
   -------------------------------------------------------------------------- */

/* Images always fluid, never overflow their container */
img {
	max-width: 100%;
	height: auto;
}

.container, .container-fluid {
	padding-left: 16px;
	padding-right: 16px;
}

/* Fluid, clamp-based type scale so headings/body text scale smoothly
   from mobile to desktop instead of jumping at breakpoints */
h1, .h1 { font-size: clamp(28px, 5vw, 56px) !important; line-height: 1.2 !important; }
h2, .h2 { font-size: clamp(24px, 4vw, 42px) !important; line-height: 1.25 !important; }
h3, .h3 { font-size: clamp(20px, 3vw, 30px) !important; line-height: 1.3 !important; }
h4, .h4 { font-size: clamp(18px, 2.5vw, 24px) !important; }
p, li, .sis-text { font-size: clamp(14px, 1.5vw, 16px) !important; }

/* --------------------------------------------------------------------------
   5. Header dropdown submenu (Service ▸ ...) — text visibility fix
   -------------------------------------------------------------------------- */
/* The template's decorative "-" marker expands to full width on hover and
   sits on top of the link text, making it look like the text disappears.
   We don't need that marker, so remove it entirely. */
.sis-main-menu ul ul li a:before,
.sis-main-menu ul ul li:hover a:before,
.sis-main-menu ul ul li a.active:before {
	display: none !important;
	content: none !important;
}

.sis-main-menu ul ul li a,
.sis-main-menu ul ul li a:hover,
.sis-main-menu ul ul li a:focus,
.sis-main-menu ul ul li a span {
	color: var(--white-color) !important;
}

@media (max-width: 991px) {
	.header-social-icons {
		display: none;
	}

	/* Fix: About Us image was absolutely positioned and overlapped the
	   text column on mobile. Make it flow normally, and place it AFTER
	   the text (text first, image below). */
	.sis-about-us-section .row > .col-lg-6:first-child {
		order: 2;
	}
	.sis-about-us-section .row > .col-lg-6:nth-child(2) {
		order: 1;
	}
	.sis-about-us-section .row {
		display: flex;
		flex-wrap: wrap;
	}
	.sisf-left-about {
		position: static !important;
		width: 100% !important;
		margin-top: 28px;
	}
	.sisf-left-about-image img {
		width: 100%;
		height: auto;
	}

	.sisf-centered-header-wrapper {
		flex-wrap: wrap;
	}

	/* About Us page: center the meeting-room image on mobile/tablet */
	.sisf-sis-features-inner-image {
		text-align: center;
	}
	.sisf-sis-features-inner-image img {
		margin: 0 auto;
		display: block;
	}

	.sis-main-menu {
		background-color: var(--navy);
	}

	section, .sis-section, [class*="sisf-"] {
		word-wrap: break-word;
	}

	.button-group.d-flex {
		flex-wrap: wrap;
		gap: 12px !important;
	}

	.sisf-bottom-quote-with-content {
		flex-wrap: wrap;
		gap: 14px;
	}
}

@media (max-width: 767px) {
	body {
		overflow-x: hidden;
	}

	.container {
		width: 100%;
	}

	/* Stack any row of columns that used to sit side by side */
	.row > [class*="col-"] {
		margin-bottom: 20px;
	}
	.row > [class*="col-"]:last-child {
		margin-bottom: 0;
	}

	/* Reduce heavy section padding on small screens */
	section, .sis-section-padding, [class*="section-padding"] {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.sisf-header-logo-link img {
		height: 55px !important;
	}

	.sisf-e-inner, .sisf-e-content {
		flex-direction: column;
		text-align: center;
	}

	table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}

	.mobile-login-btn-wrap .sis-btn-default {
		width: 100%;
		text-align: center;
	}

	/* Testimonial cards used a fixed aspect-ratio meant for wide desktop
	   cards; on narrow screens that forced a lot of empty space below the
	   quote. Let the card height follow its content instead. */
	.testimonial-right.page .sisf-e-inner {
		aspect-ratio: unset !important;
		height: auto !important;
		min-height: auto !important;
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.testimonial-right.page .sisf-e-discription h5,
	.testimonial-right.page .sisf-e-discription h3 {
		font-size: 16px !important;
	}

	.testimonial-right {
		margin: 24px 0 30px 0;
	}
}

@media (max-width: 480px) {
	h1, .h1 { font-size: 26px !important; }
	h2, .h2 { font-size: 22px !important; }

	.floating-contact-buttons a {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
}

/* --------------------------------------------------------------------------
   9. Testimonials section — ivory background + reduced top space + contrast
   -------------------------------------------------------------------------- */
.sis-testimonial-section.sis-comman-background {
	background-color: var(--ivory) !important;
}

/* Space above the "TESTIMONIAL" heading was too large (150px) */
.sis-testimonial-part {
	padding-top: 60px;
}

/* Section title on the light background needs dark text */
.sis-testimonial-section .sisf-m-title {
	color: var(--navy) !important;
}

/* Individual testimonial cards: give them a real card surface since the
   section behind them is no longer dark */
.testimonial-right.page .sisf-e-inner {
	background-color: var(--white-color) !important;
	border: 1px solid rgba(18, 35, 57, 0.08) !important;
	box-shadow: 0 4px 14px rgba(18, 35, 57, 0.05);
}

.testimonial-right.page .sisf-e-inner .sisf-bottom-quote-with-content {
	border-top: 1px solid rgba(18, 35, 57, 0.1) !important;
}

.testimonial-right.page .sisf-e-inner .sisf-e-discription h3,
.testimonial-right.page .sisf-e-inner .sisf-e-discription h5,
.testimonial-right.page .sisf-e-inner .sisf-e-author span,
.testimonial-right.page .sisf-e-inner .sisf-e-author-name,
.testimonial-right.page .sisf-e-inner .sisf-e-author-job {
	color: var(--navy) !important;
}

/* Keep the active slide's own red-card / navy-text highlight intact —
   the rules above are broader and would otherwise override it */
.testimonial-right.page .swiper-slide-active .sisf-e-inner {
	background-color: var(--main-color) !important;
	border-color: var(--main-color) !important;
}

.testimonial-right.page .swiper-slide-active .sisf-e-inner .sisf-e-discription h3,
.testimonial-right.page .swiper-slide-active .sisf-e-inner .sisf-e-discription h5,
.testimonial-right.page .swiper-slide-active .sisf-e-inner .sisf-e-author span,
.testimonial-right.page .swiper-slide-active .sisf-e-inner .sisf-e-author-name,
.testimonial-right.page .swiper-slide-active .sisf-e-inner .sisf-e-author-job,
.testimonial-right.page .swiper-slide-active .sisf-e-inner .quote-left-icon span,
.testimonial-right.page .swiper-slide-active .sisf-e-inner .star {
	color: var(--white-color) !important;
}

@media (max-width: 480px) {
	.sis-testimonial-part {
		padding-top: 36px;
	}
}

/* --------------------------------------------------------------------------
   12. Inner page banners — dark overlay so heading/breadcrumb text pops
   -------------------------------------------------------------------------- */
.sisf-banner {
	position: relative;
}

.sisf-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(18, 35, 57, 0.6) 0%, rgba(18, 35, 57, 0.7) 100%);
	z-index: 1;
}

.sisf-banner .sisf-page-title {
	z-index: 2;
}

/* --------------------------------------------------------------------------
   6. Footer bottom bar — fix low-contrast text on red background
   -------------------------------------------------------------------------- */
.sisf-page-footer-bottom-area .footer-copyright-text p,
.sisf-page-footer-bottom-area .footer-privacy-policy a,
.sisf-page-footer-bottom-area .footer-credit p {
	color: var(--ivory) !important;
}

.sisf-page-footer-bottom-area .footer-privacy-policy a:hover {
	color: var(--navy) !important;
}

.footer-credit {
	text-align: center;
	padding-top: 14px;
	margin-top: 14px;
	border-top: 1px solid rgba(250, 247, 241, 0.25);
}

.footer-credit p {
	font-size: 14px;
	margin: 0;
	opacity: 0.9;
}

.footer-credit a {
	color: var(--ivory) !important;
	font-weight: 700;
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Clients page — professional card redesign
   -------------------------------------------------------------------------- */
.sis-blog-listing-page .client-card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background-color: var(--white-color);
	border: 1px solid rgba(18, 35, 57, 0.08);
	border-left: 4px solid var(--red);
	border-radius: 12px;
	padding: 24px 22px;
	margin-bottom: 22px;
	box-shadow: 0 4px 14px rgba(18, 35, 57, 0.05);
	transition: all 0.3s ease;
}

.sis-blog-listing-page .client-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(18, 35, 57, 0.12);
	border-left-color: var(--navy);
}

.sis-blog-listing-page .client-card-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--navy), var(--navy-soft));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ivory);
	font-size: 22px;
}

.sis-blog-listing-page .sisf-e-title {
	color: var(--navy) !important;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
}

.sis-blog-listing-page .sisf-e-excerpt {
	color: var(--text-color) !important;
	font-size: 14px;
	margin-top: 6px;
}

/* --------------------------------------------------------------------------
   8. Certificates page — professional card redesign
   -------------------------------------------------------------------------- */
.sis-pricing-plans-section .row .sisf-m-inner {
	background-color: var(--white-color);
	border: 1px solid rgba(18, 35, 57, 0.08);
	border-left: 4px solid var(--red);
	border-radius: 12px;
	padding: 26px 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 14px rgba(18, 35, 57, 0.05);
	transition: all 0.3s ease;
	height: 100%;
}

.sis-pricing-plans-section .row .sisf-m-inner:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(18, 35, 57, 0.12);
	border-left-color: var(--navy);
}

.sis-pricing-plans-section .sis-e-top-inner {
	padding-bottom: 0 !important;
}

.sis-pricing-plans-section .sis-title {
	color: var(--navy) !important;
	font-size: 19px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sis-pricing-plans-section .sis-title::before {
	content: "\f559";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--red);
	font-size: 22px;
	flex-shrink: 0;
}

.sis-pricing-plans-section .sisf-m-button .sis-btn-default {
	padding: 8px 18px !important;
	font-size: 14px !important;
	background-color: transparent !important;
	color: var(--red) !important;
	border: 1.5px solid var(--red) !important;
	box-shadow: none !important;
}

.sis-pricing-plans-section .sisf-m-button .sis-btn-default:hover {
	background-color: var(--red) !important;
	color: var(--ivory) !important;
	transform: translateY(-2px);
}

/* Push the "View Certificate" button to the bottom of every card so all
   cards in a row line up evenly regardless of certificate name length */
.sis-pricing-plans-section .sisf-m-inner {
	display: flex;
	flex-direction: column;
}

.sis-pricing-plans-section .sisf-m-top,
.sis-pricing-plans-section .sis-e-top-inner,
.sis-pricing-plans-section .sis-top-content,
.sis-pricing-plans-section .sis-pricing-subtitle {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}

.sis-pricing-plans-section .sisf-m-button {
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   10. About Us page — equal-height boxes
   -------------------------------------------------------------------------- */
.sis-our-features-bottom .row {
	display: flex;
	flex-wrap: wrap;
}

.sis-our-features-bottom .row > [class*="col-"] {
	display: flex;
}

.sisf-sis-icon-with-text--hover.sisf-other-feature {
	width: 100%;
}

.sisf-sis-icon-with-text--hover.sisf-other-feature .sisf-e-inner {
	height: 100%;
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	/* "Our Values" boxes: two stacked cards inside each of two columns.
	   Turn the pair of columns into a 2-column / 2-row grid so the card
	   in row 1 (left) always matches the height of the card in row 1
	   (right), and likewise for row 2 — without changing the markup. */
	.sis-our-value-section .row .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: column;
		grid-template-rows: repeat(2, 1fr);
		column-gap: 24px;
	}
	.sis-our-value-section .row .row > .col-md-6 {
		display: contents;
	}
	.sis-our-value-section .sisf-our-value-content {
		height: 100%;
	}
	.sis-our-value-section .sisf-e-inner.radius {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
}

/* --------------------------------------------------------------------------
   11. Client page — equal-height column cards
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	/* Two columns of 3 stacked client cards each. Turn them into a
	   2-column / 3-row grid so card 1 (left) matches card 1 (right) in
	   height, card 2 matches card 2, and so on. */
	.sis-blog-listing-page > .row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: column;
		grid-template-rows: repeat(3, 1fr);
		column-gap: 30px;
	}
	.sis-blog-listing-page > .row > [class*="col-"] {
		display: contents;
	}
	.sis-blog-listing-page .sisf-blog {
		display: contents;
	}
	.sis-blog-listing-page .sis-letest-blog-item {
		height: 100%;
	}
	.sis-blog-listing-page .client-card {
		height: 100%;
	}
}