@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* ==========================================================================
   Securitarians - site-wide typography, colour and polish layer
   Loaded on every page AFTER style.css / responsive.css so it wins.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Montserrat everywhere
   The template ships with Poppins + Open Sans + Lato. The rules below restate
   the font on every text-bearing element so the whole site reads as Montserrat.
   Icon elements (<span class="flaticon-*">, <i class="fa*">) are deliberately
   NOT targeted, and their icon fonts are re-asserted further down.
   -------------------------------------------------------------------------- */

html,
body,
h1, h2, h3, h4, h5, h6,
p, a, li, dt, dd, td, th, label, blockquote, figcaption,
input, select, textarea, button,
.sec-title h1,
.sec-title h3,
.sec-title .text,
.main-menu .navigation > li > a,
.main-menu .navigation > li > ul > li > a,
.theme-btn,
.btn-style-one,
.btn-style-nine,
.main-header .header-contact-info ul li .text-holder h6,
.main-header .header-contact-info ul li .text-holder p,
.main-footer .about-widget .text,
.main-footer .footer-column .widget-title,
.main-footer .posts-widget .post .time,
.consultation-section .number,
.page-title h1,
.count-text,
.fact-counter .count-text {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Keep the icon fonts intact */
[class^="flaticon-"],
[class*=" flaticon-"],
[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
	font-family: 'Flaticon' !important;
}

.fa, .fas, .far, .fal, .fad,
.fa:before, .fas:before, .far:before, .fal:before, .fad:before {
	font-family: 'Font Awesome 5 Free' !important;
}

.fab,
.fab:before {
	font-family: 'Font Awesome 5 Brands' !important;
}

.main-footer .services-widget .list li a:before {
	font-family: 'Font Awesome 5 Free' !important;
}

/* Montserrat runs slightly wider than Poppins - tighten the display sizes */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -0.2px;
}

.sec-title h1 {
	font-weight: 700;
	letter-spacing: -0.6px;
}

.sec-title h3 {
	font-weight: 700;
	letter-spacing: -0.3px;
}

.main-menu .navigation > li > a {
	font-weight: 600;
	letter-spacing: 0.2px;
}

.theme-btn {
	font-weight: 600;
	letter-spacing: 1.2px;
}

/* --------------------------------------------------------------------------
   2. Colour overrides (global.css ships a default green link colour #51dc3c)
   -------------------------------------------------------------------------- */

/* Header contact links (Call Us / WhatsApp / Mail Us) */
.main-header .header-contact-info ul li .text-holder p a {
	color: #000000;
}

.main-header .header-contact-info ul li .text-holder p a:hover {
	color: #a47400;
}

/* Footer "About Us" contact details - white */
.main-footer .about-widget .contact-info li,
.main-footer .about-widget .contact-info li a {
	color: #ffffff;
}

.main-footer .about-widget .contact-info li a:hover {
	color: #d1a054;
}

/* Get Free Consultation number - light brown */
.consultation-section .number,
.consultation-section .number a {
	color: #d1a054;
}

.consultation-section .number a:hover {
	color: #ffffff;
}

/* Contact info blocks */
.contact-info-section .contact-info li .text-holder p a,
.contact-info-section-two .contact-info-block .text-holder p a {
	color: #222222;
}

.contact-info-section .contact-info li .text-holder p a:hover,
.contact-info-section-two .contact-info-block .text-holder p a:hover {
	color: #a47400;
}

/* Leftover template green -> brand gold */
.mission-block .image:before,
.main-footer .posts-widget .post .post-thumb .overlay-link,
.news-block-one .image .overlay {
	background-color: rgba(164, 116, 0, 0.85) !important;
}

/* --------------------------------------------------------------------------
   3. Floating WhatsApp chat button
   -------------------------------------------------------------------------- */

.whatsapp-float {
	position: fixed;
	right: 30px;
	bottom: 100px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	font-size: 30px;
	line-height: 1;
	box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
	transition: all .3s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
	background: #1da851;
	color: #fff;
	transform: scale(1.08);
}

.whatsapp-float .tooltip-text {
	position: absolute;
	right: 70px;
	white-space: nowrap;
	background: #192546;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 13px;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}

.whatsapp-float:hover .tooltip-text {
	opacity: 1;
	visibility: visible;
}

@media only screen and (max-width: 767px) {
	.whatsapp-float {
		right: 20px;
		bottom: 80px;
		width: 50px;
		height: 50px;
		font-size: 26px;
	}

	.whatsapp-float .tooltip-text {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   4. Site polish - header, banner, buttons, cards, footer
   -------------------------------------------------------------------------- */

/* Sticky header lift */
.main-header .sticky-header {
	box-shadow: 0 6px 26px rgba(0, 0, 0, .10);
}

/* Animated underline on the main navigation */
.main-menu .navigation > li {
	position: relative;
}

.main-menu .navigation > li > a:after {
	position: absolute;
	content: '';
	left: 50%;
	right: auto;
	bottom: 14px;
	width: 0;
	height: 2px;
	background: #a47400;
	transform: translateX(-50%);
	transition: width .35s ease;
}

.main-menu .navigation > li:hover > a:after,
.main-menu .navigation > li.current > a:after {
	width: 58%;
}

/* Page banner - richer overlay + refined breadcrumb */
.page-title {
	background-position: center center;
	background-size: cover;
}

.page-title:before {
	background: linear-gradient(120deg, rgba(13, 18, 30, .93) 0%, rgba(25, 37, 70, .84) 55%, rgba(164, 116, 0, .62) 100%) !important;
}

.page-title h1 {
	font-weight: 700;
	letter-spacing: -0.5px;
}

.page-title .bread-crumb ul li,
.page-title .bread-crumb ul li a {
	font-weight: 500;
	letter-spacing: .3px;
}

/* Buttons */
.theme-btn {
	border-radius: 4px;
	transition: all .35s ease;
}

.btn-style-one:hover,
.btn-style-nine:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(164, 116, 0, .28);
}

.call-to-action-section .right-column .inner-column .btn-style-one:hover {
	box-shadow: 0 12px 26px rgba(25, 37, 70, .35);
}

/* Welcome / service blocks as equal-height cards */
.welcome-block {
	display: flex;
}

.welcome-block .inner-box {
	width: 100%;
	background: #ffffff;
	border: 1px solid #ededed;
	border-radius: 8px;
	padding: 34px 28px 34px 108px;
	margin-bottom: 30px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
	transition: all .4s ease;
}

.welcome-block .inner-box:hover {
	border-color: #e3d2ab;
	box-shadow: 0 16px 34px rgba(0, 0, 0, .10);
	transform: translateY(-6px);
}

.welcome-block .icon-box {
	left: 28px;
	top: 34px;
	font-size: 42px;
	line-height: 46px;
	padding-right: 22px;
}

.welcome-block h4 {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 10px;
}

.welcome-block .text {
	font-size: 15px;
	line-height: 1.8em;
	color: #7c7c7c;
}

/* Vision / mission / value blocks */
.mission-block {
	display: flex;
}

.mission-block .inner-box {
	width: 100%;
	background: #ffffff;
	border: 1px solid #ededed;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
	transition: all .4s ease;
}

.mission-block .inner-box:hover {
	box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
	transform: translateY(-6px);
}

.mission-block .image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

.mission-block h4,
.mission-block .text {
	padding: 0 26px;
}

.mission-block h4 {
	margin-top: 24px;
	font-weight: 700;
}

.mission-block .text {
	padding-bottom: 28px;
	font-size: 15px;
	line-height: 1.8em;
	color: #7c7c7c;
}

/* Section title divider - the template ships a green padlock graphic */
.sec-title h1:before {
	width: 72px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(to right, #a47400, #d1a054);
	bottom: 12px;
}

.sec-title.light h1:before {
	background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, .25));
}

.sec-title h1 {
	padding-bottom: 28px;
	margin-bottom: 24px;
}

/* Progress bars */
.progress-box h5 {
	font-weight: 600;
}

.progress-levels .progress-box .bar {
	background: #eeeae1;
	border-radius: 3px;
}

.progress-levels .progress-box .bar .bar-fill {
	background: linear-gradient(to right, #a47400, #d1a054) !important;
	border-radius: 3px;
}

/* Accordion */
.accordion-box.style-two .accordion {
	border-radius: 6px;
	overflow: hidden;
}

/* Consultation band - keep the copy legible over the photo */
.consultation-section:before {
	background: linear-gradient(to right, rgba(9, 12, 20, .95) 40%, rgba(9, 12, 20, .55) 75%, rgba(9, 12, 20, .15) 100%) !important;
}

.consultation-section form input {
	border-radius: 4px 0 0 4px;
}

/* Call to action band */
.call-to-action-section .outer-container {
	border-radius: 8px;
	box-shadow: 0 20px 45px rgba(164, 116, 0, .22);
}

/* Footer */
.main-footer .footer-column .widget-title:after {
	background-color: #d1a054;
	width: 52px;
	height: 3px;
}

.main-footer .services-widget .list li a {
	transition: all .3s ease;
}

.main-footer .services-widget .list li a:hover {
	padding-left: 22px;
	color: #d1a054;
}

/* Scroll to top */
.scroll-top {
	border-radius: 6px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
	transition: all .3s ease;
}

.scroll-top:hover {
	transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   5. Content helpers used by the inner pages
   -------------------------------------------------------------------------- */

/* Body copy blocks */
.content-text p {
	color: #7c7c7c;
	font-size: 16px;
	line-height: 1.95em;
	margin-bottom: 20px;
}

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

.content-text a {
	color: #a47400;
	font-weight: 600;
}

/* Brand-coloured tick list */
.check-list {
	position: relative;
	margin-bottom: 0;
}

.check-list li {
	position: relative;
	color: #5b5b5b;
	font-size: 16px;
	line-height: 1.75em;
	padding-left: 32px;
	margin-bottom: 14px;
}

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

.check-list li:before {
	position: absolute;
	content: '\f00c';
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 50%;
	background: rgba(164, 116, 0, .10);
	font-size: 10px;
	color: #a47400;
	font-family: 'Font Awesome 5 Free' !important;
	font-weight: 900;
}

.check-list.light li {
	color: #dddddd;
}

.check-list.light li:before {
	background: rgba(255, 255, 255, .16);
	color: #ffffff;
}

/* Sector / solution detail row (image + copy, alternating) */
.detail-row {
	position: relative;
	margin-bottom: 70px;
}

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

.detail-row .image-box {
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.detail-row .image-box img {
	display: block;
	width: 100%;
	height: 400px;
	object-fit: cover;
	transition: all .6s ease;
}

.detail-row .image-box:hover img {
	transform: scale(1.07);
}

.detail-row .content-box h3 {
	color: #192546;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.3em;
	margin-bottom: 18px;
}

.detail-row .content-box .sub-title {
	position: relative;
	display: inline-block;
	color: #a47400;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	margin-bottom: 12px;
	padding-bottom: 10px;
}

.detail-row .content-box .sub-title:after {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 38px;
	height: 2px;
	background: #a47400;
}

/* Value / core-value cards */
.value-block {
	display: flex;
	margin-bottom: 30px;
}

.value-block .inner-box {
	position: relative;
	width: 100%;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 38px 32px;
	overflow: hidden;
	transition: all .4s ease;
}

.value-block .inner-box:before {
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(to right, #a47400, #d1a054);
	transform: scaleX(0);
	transform-origin: left;
	transition: all .45s ease;
}

.value-block .inner-box:hover:before {
	transform: scaleX(1);
}

.value-block .inner-box:hover {
	box-shadow: 0 18px 38px rgba(0, 0, 0, .11);
	transform: translateY(-6px);
}

.value-block .inner-box .icon-box {
	position: relative;
	color: #a47400;
	font-size: 44px;
	line-height: 1;
	margin-bottom: 22px;
	transition: all .4s ease;
}

.value-block .inner-box:hover .icon-box {
	transform: translateY(-4px);
}

.value-block .inner-box h4 {
	color: #192546;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 12px;
}

.value-block .inner-box .text {
	color: #7c7c7c;
	font-size: 15px;
	line-height: 1.85em;
}

.value-block .inner-box .text a {
	color: #a47400;
	font-weight: 600;
	word-break: break-word;
}

.value-block .inner-box .text a:hover {
	text-decoration: underline;
}

/* Numbered process steps */
.process-block {
	display: flex;
	margin-bottom: 30px;
	text-align: center;
}

.process-block .inner-box {
	position: relative;
	width: 100%;
	padding: 38px 26px;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	transition: all .4s ease;
}

.process-block .inner-box:hover {
	box-shadow: 0 18px 38px rgba(0, 0, 0, .11);
	transform: translateY(-6px);
}

.process-block .inner-box .count {
	display: inline-block;
	width: 58px;
	height: 58px;
	line-height: 58px;
	border-radius: 50%;
	background: linear-gradient(135deg, #a47400, #d1a054);
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 20px;
	box-shadow: 0 8px 20px rgba(164, 116, 0, .28);
}

.process-block .inner-box h4 {
	color: #192546;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 10px;
}

.process-block .inner-box .text {
	color: #7c7c7c;
	font-size: 15px;
	line-height: 1.85em;
}

/* Leadership / role cards */
.profile-block {
	display: flex;
	margin-bottom: 30px;
}

.profile-block .inner-box {
	position: relative;
	width: 100%;
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 40px 30px;
	text-align: center;
	transition: all .4s ease;
}

.profile-block .inner-box:hover {
	box-shadow: 0 18px 38px rgba(0, 0, 0, .11);
	transform: translateY(-6px);
}

.profile-block .inner-box .icon {
	position: relative;
	width: 88px;
	height: 88px;
	line-height: 88px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: rgba(164, 116, 0, .09);
	color: #a47400;
	font-size: 36px;
	transition: all .4s ease;
}

.profile-block .inner-box:hover .icon {
	background: linear-gradient(135deg, #a47400, #d1a054);
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(164, 116, 0, .3);
}

.profile-block .inner-box h4 {
	color: #192546;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 14px;
	letter-spacing: .2px;
}

.profile-block .inner-box .text {
	color: #7c7c7c;
	font-size: 15px;
	line-height: 1.85em;
}

/* Contact page - reach-us cards */
.reach-block {
	display: flex;
	margin-bottom: 30px;
}

.reach-block .inner-box {
	position: relative;
	width: 100%;
	background: #f7f8f9;
	border-radius: 8px;
	padding: 38px 30px;
	border-bottom: 3px solid transparent;
	transition: all .4s ease;
}

.reach-block .inner-box:hover {
	background: #ffffff;
	border-bottom-color: #a47400;
	box-shadow: 0 18px 38px rgba(0, 0, 0, .11);
	transform: translateY(-6px);
}

.reach-block .inner-box .icon {
	color: #a47400;
	font-size: 38px;
	line-height: 1;
	margin-bottom: 20px;
}

.reach-block .inner-box h4 {
	color: #192546;
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 12px;
}

.reach-block .inner-box .text,
.reach-block .inner-box .text a {
	color: #7c7c7c;
	font-size: 15px;
	line-height: 1.9em;
	word-break: break-word;
}

.reach-block .inner-box .text a {
	color: #a47400;
	font-weight: 600;
}

.reach-block .inner-box .text a:hover {
	text-decoration: underline;
}

/* Enquiry form */
.default-form-area {
	background: #ffffff;
	border-radius: 10px;
	padding: 40px 35px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}

.default-form-area h4 {
	color: #192546;
	font-weight: 700;
	margin-bottom: 26px;
}

.contact-form .form-control {
	border-radius: 4px;
}

/* Simple map embed wrapper */
.map-embed {
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
}

.map-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Small utilities */
.mb-30 {
	margin-bottom: 30px;
}

.mb-50 {
	margin-bottom: 50px;
}

/* --------------------------------------------------------------------------
   6. Responsive tweaks
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {
	.detail-row .image-box img {
		height: 340px;
	}
}

@media only screen and (max-width: 991px) {
	.detail-row {
		margin-bottom: 50px;
	}

	.detail-row .content-box {
		margin-top: 30px;
	}

	.sec-title h1 {
		font-size: 30px;
	}

	.page-title h1 {
		font-size: 40px;
	}
}

@media only screen and (max-width: 767px) {
	.welcome-block .inner-box {
		padding: 30px 24px 30px 96px;
	}

	.welcome-block .icon-box {
		left: 24px;
		top: 30px;
		font-size: 36px;
	}

	.detail-row .image-box img {
		height: 260px;
	}

	.detail-row .content-box h3 {
		font-size: 22px;
	}

	.default-form-area {
		padding: 30px 22px;
	}

	.page-title h1 {
		font-size: 32px;
	}
}