/*------------------------------------*\
    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
\*------------------------------------*/
.navbar-lang {
	display: flex;
	align-items: center;
}

.lang-switch {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50px;
	background-color: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.lang-btn {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	background-color: transparent;
	color: #ffffff;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	line-height: 1;
	text-transform: uppercase;
	padding: 10px 15px;
	cursor: pointer;
	-webkit-transition: all 0.25s ease;
	transition: all 0.25s ease;
}

.lang-btn + .lang-btn {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.lang-btn:hover {
	background-color: rgba(255, 255, 255, 0.18);
	color: #ffffff;
}

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

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

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

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

.header-light .lang-btn,
.navbar.bg-white .lang-btn {
	color: #282828;
}

.header-light .lang-btn + .lang-btn,
.navbar.bg-white .lang-btn + .lang-btn {
	border-left-color: rgba(11, 14, 20, 0.18);
}

.header-light .lang-btn.is-active,
.navbar.bg-white .lang-btn.is-active {
	color: #ffffff;
}

/* 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-btn {
		font-size: 11px;
		padding: 9px 13px;
	}
}

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

	.lang-btn {
		font-size: 10px;
		padding: 8px 10px;
	}

	.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: "Montserrat", 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;
	}
}

/*------------------------------------*\
    #BRAND ACCENTS
\*------------------------------------*/
.cta.bg-theme,
.bg-theme {
	background-color: #1160f2;
	background-image: -webkit-linear-gradient(200deg, #1160f2 0%, #1160f2 40%, #8ed629 145%);
	background-image: linear-gradient(250deg, #1160f2 0%, #1160f2 40%, #8ed629 145%);
}

.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: "Montserrat", sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 12px;
}

.sla-card .sla-title {
	color: #282828;
	font-family: "Montserrat", 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;
}

/* 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;
}
