/*------------------------------------*\
    THE APEX PARTNER - brand layer
    Loaded after style.css. Everything that is specific to this site
    (logo sizing, language switcher, brand accents) lives here so the
    vendor theme stays as untouched as possible.

    Brand palette (taken from resources/logo.jpg)
      ink    #0b0e14
      blue   #1160f2   primary / actions
      green  #8ed629   accent
\*------------------------------------*/

/*------------------------------------*\
    #LOGO
\*------------------------------------*/
.navbar-brand .logo {
	height: 38px;
	width: auto;
	vertical-align: middle;
}

.footer-logo,
.widget-about .footer-logo {
	height: 34px;
	width: auto;
	margin-bottom: 25px;
}

@media only screen and (max-width: 991px) {
	.navbar-brand .logo {
		height: 30px;
	}
}

/*------------------------------------*\
    #LANGUAGE SWITCHER (dropdown)
\*------------------------------------*/
.navbar-lang {
	display: flex;
	align-items: center;
}

.lang-dropdown {
	position: relative;
}

/* the closed state: a small pill showing the current language code */
.lang-toggle {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50px;
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: uppercase;
	padding: 10px 14px 10px 16px;
	cursor: pointer;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.lang-toggle:hover,
.lang-dropdown.is-open .lang-toggle {
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

.lang-toggle:focus {
	outline: none;
}

.lang-toggle:focus-visible {
	outline: 2px solid #8ed629;
	outline-offset: 2px;
}

.lang-toggle-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	-webkit-transition: transform 0.25s ease;
	transition: transform 0.25s ease;
}

.lang-dropdown.is-open .lang-toggle-caret {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* the open list */
.lang-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1050;
	min-width: 160px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(11, 14, 20, 0.18);
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(-6px);
	transform: translateY(-6px);
	-webkit-transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.lang-dropdown.is-open .lang-menu {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.lang-menu li {
	margin: 0;
	padding: 0;
}

.lang-btn {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: 0;
	background-color: transparent;
	color: #282828;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	padding: 10px 16px;
	cursor: pointer;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.lang-btn::after {
	content: attr(data-lang-code);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #9a9a9a;
	margin-left: 18px;
}

.lang-btn:hover {
	background-color: #f2f5fb;
	color: #1160f2;
}

.lang-btn.is-active {
	color: #1160f2;
	font-weight: 700;
}

.lang-btn.is-active::after {
	color: #1160f2;
}

.lang-btn:focus {
	outline: none;
}

.lang-btn:focus-visible {
	background-color: #f2f5fb;
	box-shadow: inset 0 0 0 2px #8ed629;
}

/* Light header variant (white navbar) */
.header-light .lang-toggle,
.navbar.bg-white .lang-toggle {
	border-color: rgba(11, 14, 20, 0.18);
	background-color: transparent;
	color: #282828;
}

.header-light .lang-toggle:hover,
.navbar.bg-white .lang-toggle:hover,
.header-light .lang-dropdown.is-open .lang-toggle,
.navbar.bg-white .lang-dropdown.is-open .lang-toggle {
	background-color: rgba(11, 14, 20, 0.06);
	color: #282828;
}

/* Desktop: push the switcher to the far right of the navbar */
@media only screen and (min-width: 992px) {
	.navbar > .container {
		flex-wrap: nowrap;
	}

	.navbar .navbar-collapse {
		order: 2;
	}

	.navbar-lang {
		order: 3;
		margin-left: 26px;
	}
}

/* Tablet / phone: the switcher stays visible next to the burger,
   it is deliberately outside the collapsing menu */
@media only screen and (max-width: 991px) {
	.navbar-lang {
		margin-left: auto;
		margin-right: 12px;
	}

	.lang-toggle {
		font-size: 11px;
		padding: 9px 11px 9px 12px;
	}
}

@media only screen and (max-width: 360px) {
	.navbar-brand .logo {
		height: 26px;
	}

	.lang-toggle {
		font-size: 10px;
		padding: 8px 9px 8px 10px;
		letter-spacing: 0;
	}

	.navbar-lang {
		margin-right: 8px;
	}
}

/*------------------------------------*\
    #NAVBAR FIT
    Greek labels are longer than the theme's English ones, so the menu
    needs a little more breathing room than the stock rules give it.
\*------------------------------------*/
.module-consultation .btn {
	width: auto;
	padding: 0 22px;
	white-space: nowrap;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.navbar .navbar-nav > li {
		margin-right: 14px;
	}

	.navbar .navbar-nav > li > a {
		font-size: 12px;
	}

	/* the header CTA would push the menu into the logo at this width;
	   the same call to action is repeated further down every page */
	.module-consultation {
		display: none;
	}
}

/*------------------------------------*\
    #HERO
\*------------------------------------*/
.hero-1 {
	padding: 230px 0 165px;
}

.hero--eyebrow {
	color: #ffffff;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 24px;
	opacity: 0.85;
}

.hero-1 .hero--headline {
	font-size: 46px;
	line-height: 58px;
}

.hero-1 .hero--desc {
	padding: 0 40px;
	margin-bottom: 38px;
	font-weight: 400;
	font-size: 17px;
	line-height: 30px;
}

.hero .btn + .btn {
	margin-left: 14px;
}

@media only screen and (max-width: 991px) {
	.hero-1 {
		padding: 185px 0 120px;
	}

	.hero-1 .hero--headline {
		font-size: 34px;
		line-height: 44px;
	}

	.hero-1 .hero--desc {
		padding: 0;
		font-size: 16px;
		line-height: 28px;
	}
}

@media only screen and (max-width: 575px) {
	.hero-1 {
		padding: 160px 0 90px;
	}

	.hero-1 .hero--headline {
		font-size: 27px;
		line-height: 36px;
	}

	.hero .btn {
		display: block;
		width: 100%;
		max-width: 280px;
		margin-right: auto;
		margin-left: auto;
	}

	.hero .btn + .btn {
		margin-left: auto;
		margin-top: 14px;
	}
}

/*------------------------------------*\
    #PAGE TITLE (inner-page heroes)
\*------------------------------------*/
/* The vendor "bg-parallax" sets background-attachment: fixed, which sizes
   the cover photo to the *viewport* rather than the section. Every monitor
   therefore showed a different crop of the same image, and iOS ignores the
   property altogether. Scroll the photo normally so the crop is computed
   from the section's own box and is identical on every screen. */
.hero.bg-parallax,
.page-title.bg-parallax {
	background-attachment: scroll;
}

/* Size the band from the page width instead of a fixed pixel padding, so
   the photo keeps the same framing from a 13" laptop to a 4K monitor and
   never shrinks to a thin strip. The brand photos carry their tagline in
   the left third and the subject in the middle band, so anchor slightly
   above centre; on narrow screens keep the subject centred. */
.page-title {
	display: flex;
	align-items: center;
	min-height: clamp(420px, 31.25vw, 640px);
	max-height: none;
	background-position: center 45%;
}

.page-title .container {
	width: 100%;
	padding-top: 100px; /* the transparent header overlaps the band */
}

.page-title .title {
	padding: 0;
}

.page-title .title--heading h1 {
	font-size: clamp(36px, 4vw, 60px);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

@media only screen and (max-width: 991px) {
	.page-title {
		min-height: 380px;
		background-position: center center;
	}
}

/* Phones see a narrow vertical slice: anchor on the subject (right of
   centre) so the photo's own tagline, which sits in the left third, does
   not fight the page heading. */
@media only screen and (max-width: 575px) {
	.page-title {
		min-height: 320px;
		background-position: 62% center;
	}
}

/*------------------------------------*\
    #BRAND ACCENTS
\*------------------------------------*/
.cta.bg-theme,
.bg-theme {
	background-color: #1160f2;
	background-image: none;
}

.btn--gradient {
	background-image: -webkit-linear-gradient(200deg, #1160f2 0%, #2f7bff 55%, #8ed629 100%);
	background-image: linear-gradient(250deg, #1160f2 0%, #2f7bff 55%, #8ed629 100%);
	border-color: transparent;
}

#back-to-top:hover {
	background-color: #8ed629;
	border-color: #8ed629;
}

/*------------------------------------*\
    #SMALL FIXES
\*------------------------------------*/
/* keep long Greek headlines from colliding with the hero buttons */
.hero .hero--headline {
	word-break: normal;
	overflow-wrap: break-word;
}

/* stat blocks: allow "24/7" style values, the theme assumes plain numbers */
.count-box .counting {
	white-space: nowrap;
}

/* contact + footer detail lists */
.contact--info p,
.widget-contact li {
	margin-bottom: 6px;
}

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

.widget-contact li {
	color: #9b9b9b;
	font-size: 15px;
	line-height: 28px;
}

.widget-contact li i {
	color: #1160f2;
	width: 22px;
	margin-right: 4px;
}

.widget-contact li a {
	color: #9b9b9b;
}

.widget-contact li a:hover {
	color: #1160f2;
}

/* map embed */
.map-embed {
	display: block;
	width: 100%;
	height: 460px;
	border: 0;
	filter: grayscale(20%);
}

@media only screen and (max-width: 767px) {
	.map-embed {
		height: 320px;
	}
}

/* SLA / commitment cards */
.sla-card {
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	border-radius: 4px;
	padding: 34px 30px;
	margin-bottom: 30px;
	height: calc(100% - 30px);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.sla-card:hover {
	border-color: #1160f2;
	box-shadow: 0 12px 30px rgba(11, 14, 20, 0.08);
}

.sla-card .sla-value {
	color: #1160f2;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 12px;
}

.sla-card .sla-title {
	color: #282828;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 8px;
}

.sla-card .sla-desc {
	color: #9b9b9b;
	font-size: 15px;
	line-height: 26px;
	margin-bottom: 0;
}

/*------------------------------------*\
    #FEATURE CARDS
\*------------------------------------*/
/* left-aligned dark section (services "how we work"): the vendor icon
   colour is the brand blue, which disappears against the dark overlay */
.featured-2 .feature-card .feature-card-icon i {
	color: #ffffff;
}

/* the strap line that sits between title and description */
.feature-card .feature-card-lead {
	color: #1160f2;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 25px;
	margin-bottom: 8px;
}

.featured-2 .feature-card .feature-card-lead {
	color: #8ed629;
}

.featured-2 .feature-card .feature-card-title {
	margin-bottom: 6px;
}

/*------------------------------------*\
    #FILE UPLOAD (careers application form)
    The native control cannot be styled, so it is hidden behind a label
    that mirrors the look of .form-control.
\*------------------------------------*/
.form-file {
	position: relative;
	margin-bottom: 20px;
	text-align: left;
}

/* The input is transparent but keeps its size: a clipped or display:none
   control cannot be focused, and the browser then refuses to report the
   `required` validation message. */
.form-file input[type="file"] {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 60px;
	opacity: 0;
	cursor: pointer;
}

.form-file-label {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 60px;
	background-color: #f7f7f7;
	border: 1px solid #f7f7f7;
	border-radius: 3px;
	margin-bottom: 8px;
	padding: 8px 8px 8px 0;
	cursor: pointer;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.form-file:hover .form-file-label,
.form-file input[type="file"]:focus + .form-file-label {
	border-color: #1160f2;
}

.form-file-btn {
	flex: 0 0 auto;
	background-color: #1160f2;
	border-radius: 3px;
	color: #ffffff;
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1;
	padding: 15px 22px;
	margin-right: 18px;
}

.form-file-name {
	flex: 1 1 auto;
	color: #9b9b9b;
	font-size: 15px;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 10px;
}

.form-file-name.has-file {
	color: #282828;
	font-weight: 500;
}

.form-file-hint {
	color: #9b9b9b;
	font-size: 13px;
	line-height: 22px;
	margin-bottom: 0;
}

.form-file-hint.is-error {
	color: #d0021b;
}

@media only screen and (max-width: 575px) {
	.form-file-btn {
		padding: 13px 16px;
		font-size: 12px;
		margin-right: 12px;
	}

	.form-file-name {
		font-size: 14px;
	}
}

/* language list pills (careers / services) */
.lang-pills {
	padding: 0;
	margin: 0 0 30px;
	list-style: none;
}

.lang-pills li {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	padding: 7px 18px;
	margin: 0 8px 10px 0;
}

.lang-pills.lang-pills-dark li {
	border-color: rgba(11, 14, 20, 0.15);
	color: #282828;
}

/* ------------------------------------------------------------------
   Typeface: Inter everywhere (headings and body).
   The vendor theme hard-codes Montserrat for headings and Roboto for
   body text; Montserrat's Greek glyphs are poor, so every selector the
   theme gives a font-family is re-declared here (this file loads last,
   same specificity → these win). The Google Fonts css2 endpoint serves
   the Greek / Greek-extended subsets automatically via unicode-range.
   ------------------------------------------------------------------ */
body,
.font-body,
.font-heading,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
blockquote,
.blockquote,
.quote-author,
.btn,
.form-control,
.heading .heading--title,
.heading .heading--subtitle,
.navbar-nav > li > a,
ul.dropdown-menu li a,
ul.mega-menu li ul li a,
.accordion .card .card-heading a,
.pagination > li > a,
.pagination > li > span,
.footer--copyright,
.footer-widget .widget-title h5,
footer .widget-links ul li a,
.info-card .info-card-step,
.info-card .info-card-subtitle,
.consultation--desc,
.module--search-box .form-control,
.alerts .alert-content p {
	font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Brand photography (assets/images/apex): keep the full-bleed "why" banner
   filling its column regardless of the photo aspect ratio. */
.featured-3 .banner--img { height: 100%; }
.featured-3 .banner--img img { width: 100%; height: 100%; object-fit: cover; }

/* The brand photos are already dark and carry their own contrast, so the
   vendor overlays (.85 / .6) turn them almost black. Lighten them. */
.hero.bg-overlay-dark3:before,
.featured-2.bg-overlay-dark3:before { opacity: .5; }
.page-title.bg-overlay-dark:before { opacity: .35; }

/* "Why us" / "How we work" banners (#featured2 on index.html and services.html):
   pull the copy to the left edge of the viewport
   so it sits on the dark, empty part of the photo. Column width is capped so
   line lengths stay the same as inside the normal centred container. */
@media (min-width: 992px) {
	#featured2 .container { width: 100%; max-width: none; padding-left: 60px; padding-right: 60px; }
	#featured2 .row > .col-lg-6 { flex: 0 0 585px; max-width: 585px; }
}

/* Footer: full-bleed brand photo. The Apex logo and tagline live in the photo
   itself (left side), so the old logo/about/links columns are gone. The contact
   details sit in a dark translucent panel on the right so they stay legible
   over the desk photo, with the address given top billing. */
.footer-1 { position: relative; background-color: #111214; }
.footer-1.bg-section { background-position: center 45%; }
.footer-1 .footer-widget { padding-top: 120px; padding-bottom: 90px; }
.footer-1 .footer--widget { margin-bottom: 0; }

.footer-contact-panel {
	background: rgba(12, 14, 18, .8);
	border: 1px solid rgba(255, 255, 255, .08);
	border-left: 3px solid #8ed629;
	border-radius: 4px;
	padding: 30px 34px 26px;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.footer-address {
	display: flex;
	align-items: flex-start;
	margin-bottom: 18px;
	color: #ffffff;
	text-decoration: none;
}
.footer-address:hover,
.footer-address:focus { color: #ffffff; text-decoration: none; }
.footer-address:hover strong { color: #8ed629; }
.footer-address i {
	color: #1160f2;
	font-size: 24px;
	width: 26px;
	margin: 3px 4px 0 0;
	flex: 0 0 26px;
}
.footer-address strong {
	display: block;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.4;
	transition: color .2s linear;
}
.footer-address > span > span {
	display: block;
	font-size: 16px;
	line-height: 1.5;
	color: #d5d5d5;
}

.footer-1 .footer--copyright { position: relative; z-index: 2; }

@media only screen and (max-width: 767px) {
	.footer-1 .footer-widget { padding-top: 70px; padding-bottom: 50px; }
	.footer-contact-panel { padding: 24px 22px 20px; }
}

/* Text + side photo sections ("Who we are" on index.html, "Our story" on
   about.html, the careers intro): let the photo fill the full height of the
   text column beside it instead of stopping at its own aspect ratio. On the
   careers intro the photo wrapper carries mb-50 to match the heading's own
   bottom margin, so it is subtracted from the height. */
@media (min-width: 992px) {
	.about-1 .row,
	.featured-1 .row { align-items: stretch; }
	.about-1 .about--img,
	.featured-1 .about--img { height: 100%; }
	.featured-1 .about--img.mb-50 { height: calc(100% - 50px); }
	.about-1 .about--img img,
	.featured-1 .about--img img { width: 100%; height: 100%; object-fit: cover; }
	/* photos whose subject sits on the right (e.g. the globe with a logo on the
	   far left that would otherwise be cut mid-way) */
	.about--img img.img-focus-right { object-position: 100% 50%; }
}

/* Mission / vision / values (about.html): the big step numbers were a ghosted
   grey; give them the brand two-tone of the logo - blue figures, lime dot. */
.info-card .info-card-step {
	color: #1160f2;
	font-weight: 600;
}
.info-card .info-card-step::after {
	content: ".";
	color: #8ed629;
}