/* ==========================================================================
   CIGEOTECH ENGINEERING LTD — brand overrides
   Loaded AFTER css/style.css. Keep this file small and targeted; the base
   template does the heavy lifting.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Brand palette
   style.css declares its own :root (--primary: #FE1027) and loads after
   skin-1.css, so the palette has to be re-declared HERE to win the cascade.
   Do not move this below the template stylesheet link.

   Primary   #00008C  navy   — buttons, links, primary UI
   Secondary #2DB200  green  — accents, eyebrows, checks, highlights
   -------------------------------------------------------------------------- */
:root {
	--primary: #00008C;
	--primary-hover: #000073;
	--primary-dark: #00005C;

	--rgba-primary-1: rgba(0, 0, 140, 0.1);
	--rgba-primary-2: rgba(0, 0, 140, 0.2);
	--rgba-primary-3: rgba(0, 0, 140, 0.3);
	--rgba-primary-4: rgba(0, 0, 140, 0.4);
	--rgba-primary-5: rgba(0, 0, 140, 0.5);
	--rgba-primary-6: rgba(0, 0, 140, 0.6);
	--rgba-primary-7: rgba(0, 0, 140, 0.7);
	--rgba-primary-8: rgba(0, 0, 140, 0.8);
	--rgba-primary-9: rgba(0, 0, 140, 0.9);

	/* The template uses --secondary as the fill for large dark bands (footer,
	   dark sections). Bright green there would overwhelm the page, so this
	   stays a deep navy and green is applied as an accent below. */
	--secondary: #050B3D;

	--title: #050B3D;

	/* Named brand tokens */
	--cig-navy: #00008C;
	--cig-green: #2DB200;
	--cig-green-dark: #249000;
	--cig-blue: #0062B3;
}

/* --------------------------------------------------------------------------
   0b. Green accent placement
   Green carries the highlight moments; navy carries the structure.
   -------------------------------------------------------------------------- */
.section-head .sub-title,
.sub-title.text-primary,
h6.sub-title {
	color: var(--cig-green) !important;
}

/* Tick bullets and numbered markers */
.list-check.primary li:before,
.list-check li:before {
	color: var(--cig-green) !important;
}

/* Numbered markers use :after with content:attr(data-text), not :before */
.list-number-circle li:after {
	background: var(--cig-green) !important;
	color: #fff !important;
}

.list-square-box li:before,
.list-square-box li:after {
	background-color: var(--cig-green) !important;
}

/* Secondary button style */
.btn-green,
.btn.btn-green {
	background-color: var(--cig-green);
	border-color: var(--cig-green);
	color: #fff;
}
.btn-green:hover,
.btn.btn-green:hover {
	background-color: var(--cig-green-dark);
	border-color: var(--cig-green-dark);
	color: #fff;
}

/* --------------------------------------------------------------------------
   0d. Dark-background contexts
   The sidenav header bar is filled with --secondary (deep navy), so anything
   that would otherwise be navy-on-navy switches to the green accent.
   -------------------------------------------------------------------------- */
.header-sidenav-1 .service-list ul li span,
.header-sidenav-1 .service-list ul li i {
	color: var(--cig-green);
}
.header-sidenav-1 .service-list ul li i {
	border-color: var(--cig-green);
}
.header-sidenav-1 .service-list ul li i:after {
	background: var(--cig-green);
}

/* Menu toggle button — matches .site-header.header-sidenav-1 .menu-btn */
.site-header.header-sidenav-1 .menu-btn {
	background: var(--cig-green);
}

/* Slider arrows — template selector is nested three deep, match it */
.main-slider1 .swiper-button .swiper-button-prev,
.main-slider1 .swiper-button .swiper-button-next {
	background-color: var(--cig-green);
}
.main-slider1 .swiper-button .swiper-button-prev:hover,
.main-slider1 .swiper-button .swiper-button-next:hover {
	background-color: var(--cig-green-dark);
}

/* Anything primary-coloured sitting on a dark band needs the green instead */
.bg-secondary .text-primary,
.overlay-black-dark .text-primary,
.site-footer .text-primary {
	color: var(--cig-green) !important;
}

/* Footer link contrast: the template leaves several anchors at the global
   link colour, which is now navy and therefore invisible on the dark footer. */
.site-footer a {
	color: rgba(255, 255, 255, .72);
}
.site-footer a:hover,
.site-footer a:focus {
	color: var(--cig-green);
}
.site-footer .footer-title,
.site-footer .footer-title a {
	color: #fff;
}

/* Phone call-out block */
.site-footer .call-box2,
.site-footer .call-box2 a {
	color: var(--cig-green);
}
.site-footer .call-box2 span {
	color: var(--cig-navy);
	background: #fff;
}

/* --------------------------------------------------------------------------
   0c. Preloader — navy field, green motion
   -------------------------------------------------------------------------- */
#loading-area.loading-page-2 {
	background-color: #050B3D;
}

#loading-area.loading-page-2 .loading-inner {
	border-color: rgba(255, 255, 255, .28);
	color: var(--cig-green);
	box-shadow: 0 0 30px rgba(0, 0, 0, .45);
}

#loading-area.loading-page-2 .loading-inner:before {
	border-top-color: var(--cig-green);
	border-right-color: var(--cig-green);
}

#loading-area.loading-page-2 .loading-inner .loading:before {
	background: var(--cig-green);
	box-shadow: 0 0 20px var(--cig-green);
}

/* The template animates .text-load:before from a data-text attribute; the
   base letter sits at 10% white, which reads as almost invisible. Lift it.
   "CIGEOTECH" is 9 characters, so the type is also sized down to sit inside
   the 150px ring rather than spilling past it. */
#loading-area.loading-page-2 .load-text .text-load,
#loading-area.loading-page-2 .load-text .text-load:before {
	font-size: 16px;
	letter-spacing: 0;
}

#loading-area.loading-page-2 .load-text .text-load {
	color: rgba(255, 255, 255, .30);
}

/* --------------------------------------------------------------------------
   1. Logo legibility
   The Cigeotech mark is navy + green on transparency. On the template's
   transparent/dark headers a navy logo disappears, so the "white" logo slot
   gets a light chip behind it instead of a recoloured mark.
   -------------------------------------------------------------------------- */
.logo-header.logo-white img,
.footer-logo.logo-white img {
	background: #ffffff;
	padding: 8px 12px;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.footer-logo.logo-white img {
	max-width: 200px;
	height: auto;
}

/* --------------------------------------------------------------------------
   2. Brand accents
   -------------------------------------------------------------------------- */
.text-navy { color: var(--cig-navy) !important; }
.bg-navy { background-color: var(--cig-navy) !important; }

/* Dark sections in this template default to a slate navy; keep headings crisp */
.bg-secondary { background-color: var(--secondary) !important; }

/* --------------------------------------------------------------------------
   2b. Team cards
   The portraits are supplied at mixed aspect ratios (ID photos, site shots),
   which left the cards ragged. A fixed ratio + cover crop evens them up.
   -------------------------------------------------------------------------- */
.dz-team.style-1 .dz-media {
	position: relative;
	aspect-ratio: 3 / 3.6;
	overflow: hidden;
	background: var(--slate-100, #eef1f6);
}
.dz-team.style-1 .dz-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

/* --------------------------------------------------------------------------
   3. Mobile hardening
   -------------------------------------------------------------------------- */

/* Nothing should ever push the page sideways on a phone. */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, iframe, video { max-width: 100%; }

@media only screen and (max-width: 991px) {
	/* Header address/phone strip is too dense for small screens */
	.header-content-bx .service-list { display: none; }
}

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

	/* The template sets .banner-content to position:absolute with left:0 but no
	   width, so it shrink-wraps wider than the viewport and pushes the whole
	   document sideways. Pinning both edges resolves the width to the slide. */
	.main-slider1 .banner-inner .banner-content {
		left: 0;
		right: 0;
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
	}
	.main-slider1 .banner-inner .banner-content .row {
		margin-left: 0;
		margin-right: 0;
	}
	.main-slider1 .banner-inner .banner-content [class*="col-"] {
		padding-left: 0;
		padding-right: 0;
		max-width: 100%;
		flex: 0 0 100%;
	}

	/* Hero slider: let the banner breathe and keep the headline readable */
	.main-slider1 .swiper-slide,
	.main-slider1 .banner-inner {
		min-height: 520px;
	}

	.main-slider1 .banner-content .title,
	.dz-bnr-inr .dz-bnr-inr-entry h1 {
		font-size: 30px;
		line-height: 1.22;
	}

	.main-slider1 .banner-content p {
		font-size: 15px;
		line-height: 1.65;
	}

	/* Stacked CTAs read better full width than crowded side by side */
	.main-slider1 .banner-content .btn,
	.dz-section-3 .btn {
		display: flex;
		width: 100%;
		justify-content: center;
		margin-right: 0;
	}

	/* Section headings scale down */
	.section-head .title { font-size: 26px; line-height: 1.25; }
	.section-head h2.title { font-size: 26px; }

	/* Slider thumbnails eat vertical space on phones */
	.main-slider1 .slider-thumbs-wraper { display: none; }

	/* Service/team cards */
	.dz-box.style-1 .dz-info .title { font-size: 18px; }
	.dz-team.style-1 .dz-name { font-size: 18px; }

	/* Counters and stat rows */
	.counter-num .counter { font-size: 34px; }

	/* Contact/office info blocks stack cleanly */
	.icon-bx-wraper.left.style-2 { flex-wrap: wrap; }
	.icon-bx-wraper.left.style-2 .row { margin-top: 10px; }

	/* Map should not be a letterbox slit */
	.map-iframe iframe { min-height: 300px; }
}

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

	.main-slider1 .banner-content .title,
	.dz-bnr-inr .dz-bnr-inr-entry h1 {
		font-size: 26px;
	}

	.section-head .title,
	.section-head h2.title { font-size: 23px; }

	/* Breadcrumb wrapping instead of overflowing */
	.breadcrumb-row .breadcrumb { flex-wrap: wrap; justify-content: center; }

	/* Footer widgets */
	.site-footer .widget { margin-bottom: 30px; }
}

/* --------------------------------------------------------------------------
   4. Touch targets
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.nav.navbar-nav > li > a,
	.sub-menu li a,
	.footer-links a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* --------------------------------------------------------------------------
   5. Accessibility
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--cig-green);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}