/* ----------------------------------------------------------------
   Premier Technologies: modern typography and light polish over the
   Canvas (2015) template. Loaded after every template stylesheet.
   Fonts are self-hosted (Inter, Plus Jakarta Sans; SIL OFL, see css/fonts/OFL-*.txt).
   2026-10-24
-----------------------------------------------------------------*/

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-wght-italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2');
}

:root {
	--pt-red: #ed1c24;
	--pt-blue: #005aab;
	--pt-ink: #111827;
	--pt-text: #4b5563;
	--pt-muted: #6b7280;
	--pt-line: #e5e7eb;
	--pt-soft: #f6f8fb;
	--pt-radius: 12px;
	--pt-shadow: 0 1px 2px rgba(17, 24, 39, .06), 0 8px 24px rgba(17, 24, 39, .08);
	--pt-shadow-hover: 0 2px 4px rgba(17, 24, 39, .08), 0 16px 40px rgba(17, 24, 39, .14);
	--pt-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--pt-head: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Typography
-----------------------------------------------------------------*/
body,
small,
#primary-menu ul ul a,
.wp-caption,
.feature-box.fbox-center.fbox-italic p,
.skills li .progress-percent .counter,
input, select, textarea, button,
.sm-form-control {
	font-family: var(--pt-body);
}

body {
	color: var(--pt-text);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
#logo,
#primary-menu ul li a,
#primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title > a,
.button,
.button.button-desc,
.counter,
label,
.entry-link,
.slider-caption h2,
#page-title h1 {
	font-family: var(--pt-head);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--pt-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

/* The template's script-style accents (Crete Round) become clean italic Inter. */
.entry-meta li,
.entry-link span,
.entry blockquote p,
.more-link,
.button.button-desc span,
.testi-content p,
.team-title span,
.before-heading,
.heading-block > span,
.fancy-title span,
.subtitle {
	font-family: var(--pt-body);
	font-style: normal;
	font-weight: 400;
	color: var(--pt-muted);
}

p,
.fbox-desc p,
.feature-box p,
.col_half p,
.col_one_third p {
	color: var(--pt-text);
}
a { transition: color .2s ease; }
a:hover { color: var(--pt-red); }

::selection { background: var(--pt-blue); color: #fff; }

/* One type scale on every page
   page title 34 / section heading 26 / card title 17 / text 15 (desktop)
-----------------------------------------------------------------*/
#page-title h1,
#page-title.page-title-mini h1,
#page-title.page-title-nobg h1 {
	font-size: 34px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
}
#page-title span {
	font-size: 17px;
	font-weight: 400;
	margin-top: 8px;
}
.heading-block h1,
.heading-block h2,
.heading-block h3,
.entry-title h2,
#posts .entry-title h2,
.small-thumbs .entry-title h2,
.postcontent > h3,
.fancy-title h3,
.fancy-title h4 {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.heading-block > span,
.heading-block span.subtitle {
	font-size: 17px;
}
.fbox-desc h3,
.feature-box h3,
.col_half > h4,
.col_one_third > h4,
#content h4,
.team-title h4,
.portfolio-desc h3,
#content .portfolio-desc h3 {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.fbox-desc h3 span,
.feature-box h3 span {
	display: block;
	margin-top: 4px;
	font-family: var(--pt-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--pt-muted);
}
#content p,
#content li,
#content address,
.entry-content p,
.fbox-desc p {
	font-size: 15px;
	line-height: 1.75;
}
.slider-caption h2,
.swiper_wrapper .slider-caption h2 {
	font-size: 52px;
	line-height: 1.15;
}
.slider-caption p,
.swiper_wrapper .slider-caption p {
	font-size: 20px;
	line-height: 1.5;
}
@media (max-width: 991px) {
	#page-title h1, #page-title.page-title-mini h1, #page-title.page-title-nobg h1 { font-size: 28px; }
	.heading-block h1, .heading-block h2, .heading-block h3, .entry-title h2, #posts .entry-title h2, .small-thumbs .entry-title h2, .postcontent > h3, .fancy-title h3, .fancy-title h4 { font-size: 22px; }
	.slider-caption h2, .swiper_wrapper .slider-caption h2 { font-size: 38px; }
	.slider-caption p, .swiper_wrapper .slider-caption p { font-size: 17px; }
}
@media (max-width: 767px) {
	#page-title h1, #page-title.page-title-mini h1, #page-title.page-title-nobg h1 { font-size: 24px; }
	#page-title span { font-size: 15px; }
	.heading-block h1, .heading-block h2, .heading-block h3, .entry-title h2, #posts .entry-title h2, .small-thumbs .entry-title h2, .postcontent > h3, .fancy-title h3, .fancy-title h4 { font-size: 20px; }
	.fbox-desc h3, .feature-box h3, .col_half > h4, .col_one_third > h4, #content h4, .portfolio-desc h3, #content .portfolio-desc h3 { font-size: 16px; }
	.slider-caption h2, .swiper_wrapper .slider-caption h2 { font-size: 26px; }
	.slider-caption p, .swiper_wrapper .slider-caption p { font-size: 15px; }
}

/* Header and menu
-----------------------------------------------------------------*/
#header,
#header-wrap {
	background-color: rgba(255, 255, 255, .97);
}
#header.sticky-header #header-wrap {
	box-shadow: 0 1px 0 var(--pt-line), 0 6px 20px rgba(17, 24, 39, .06);
}

#primary-menu ul li > a {
	font-weight: 600;
	letter-spacing: .04em;
	transition: color .2s ease;
}
#primary-menu.sub-title > ul > li > a span,
#primary-menu.sub-title ul li > a span {
	font-family: var(--pt-body);
	font-weight: 400;
	letter-spacing: .01em;
	text-transform: none;
}
#primary-menu ul li:hover > a,
#primary-menu ul li.current > a {
	color: var(--pt-red);
}

/* Page title band
-----------------------------------------------------------------*/
#page-title {
	background-color: var(--pt-soft);
	border-bottom: 1px solid var(--pt-line);
}
#page-title h1 {
	font-weight: 800;
	letter-spacing: .02em;
}
#page-title span {
	font-family: var(--pt-body);
	font-style: normal;
	color: var(--pt-muted);
}
#page-title .breadcrumb a { color: var(--pt-muted); }
#page-title .breadcrumb a:hover { color: var(--pt-red); }

/* Hero slider caption
-----------------------------------------------------------------*/
.slider-caption h2 {
	font-weight: 800;
	letter-spacing: .02em;
}
.slider-caption p {
	font-family: var(--pt-body);
	font-weight: 400;
}
/* Slides marked "dark" have a dark photo: white text with a soft shadow. */
.swiper-slide.dark .slider-caption:not(.dark) h2,
.swiper-slide.dark .slider-caption:not(.dark) p {
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
/* Light photos keep dark text; a faint halo keeps it readable over busy areas. */
.swiper-slide:not(.dark) .slider-caption:not(.dark) h2,
.swiper-slide:not(.dark) .slider-caption:not(.dark) p {
	text-shadow: 0 1px 14px rgba(255, 255, 255, .7);
}

/* Section headings
-----------------------------------------------------------------*/
.heading-block h1,
.heading-block h2,
.heading-block h3,
.heading-block h4 {
	font-weight: 800;
	letter-spacing: .01em;
}
.heading-block:after {
	border-top-color: var(--pt-red);
	border-top-width: 3px;
	border-radius: 2px;
}

/* Buttons
-----------------------------------------------------------------*/
.button {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .04em;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 90, 171, .22);
}
.button.button-3d { border-bottom-width: 0; }

/* Images and media in content
-----------------------------------------------------------------*/
.col_half img,
.col_one_third img,
.media-box img,
.fslider .slide img,
.entry-image img,
#content .entry-image img {
	border-radius: var(--pt-radius);
}

/* Feature boxes (services)
-----------------------------------------------------------------*/
.feature-box .fbox-icon i,
.feature-box .fbox-icon img {
	transition: transform .25s ease;
}
.feature-box:hover .fbox-icon i,
.feature-box:hover .fbox-icon img {
	transform: translateY(-3px);
}
.feature-box h3 {
	font-weight: 700;
	letter-spacing: .01em;
}

/* Brand and client grids
-----------------------------------------------------------------*/
.portfolio-item .portfolio-image {
	border-radius: var(--pt-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--pt-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}
.portfolio-item:hover .portfolio-image {
	transform: translateY(-4px);
	box-shadow: var(--pt-shadow-hover);
}
.portfolio-item .portfolio-image img {
	transition: transform .4s ease;
}
.portfolio-item:hover .portfolio-image img {
	transform: scale(1.03);
}
/* Logo cards (Brands, Dealers, Clients): transparent PNG logos on a white card. */
.portfolio-item .portfolio-image.pt-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 6%;
	background: #fff;
	border: 1px solid var(--pt-line);
}
.portfolio-item .portfolio-image.pt-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}
.portfolio-item:hover .portfolio-image.pt-logo img {
	transform: scale(1.04);
}
/* Logo grids use a plain CSS grid instead of the template's masonry script, so every row lines up
   even when a name runs to two lines. */
#portfolio.pt-logo-grid {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 28px 20px;
	height: auto !important;
	margin: 0 !important;
}
#portfolio.pt-logo-grid:before,
#portfolio.pt-logo-grid:after { display: none !important; }
#portfolio.pt-logo-grid .portfolio-item {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
#portfolio.pt-logo-grid .portfolio-desc {
	padding: 12px 4px 0;
}
@media (max-width: 1199px) { #portfolio.pt-logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991px)  { #portfolio.pt-logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px)  { #portfolio.pt-logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } }
/* The template wraps images in a span with a loading spinner; it would show through the transparent logos. */
.portfolio-image.pt-logo .preloader {
	display: block;
	width: 100%;
	height: 100%;
	background: none !important;
}
.portfolio-desc h3 {
	font-weight: 700;
	letter-spacing: .03em;
}
.portfolio-desc h3 a { color: var(--pt-ink); }
.portfolio-desc h3 a:hover { color: var(--pt-red); }

/* Forms
-----------------------------------------------------------------*/
.sm-form-control {
	border: 1px solid var(--pt-line);
	border-radius: 8px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.sm-form-control:focus {
	border-color: var(--pt-blue);
	box-shadow: 0 0 0 3px rgba(0, 90, 171, .15);
}
label {
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--pt-ink);
}

/* Contact map
-----------------------------------------------------------------*/
#google-map iframe { filter: saturate(.9); }

/* The template fixes .container at 470px from 480px wide; never wider than the window (scrollbars). */
.container { max-width: 100%; }

/* Contact details: labels in one column, values aligned beside them; numbers and addresses never split. */
.pt-contact-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 16px;
	margin: 0 0 30px;
	font-size: 15px;
	line-height: 1.6;
}
.pt-contact-list dt {
	font-weight: 600;
	color: var(--pt-ink);
}
.pt-contact-list dd {
	margin: 0;
	white-space: nowrap;
}
.pt-contact-list a { color: inherit; }
.pt-contact-list a:hover { color: var(--pt-red); }

/* Footer
-----------------------------------------------------------------*/
#footer,
#footer.dark {
	background-color: #0f172a;
	border-top: 0;
}
#footer #copyrights,
#footer.dark #copyrights {
	font-family: var(--pt-body);
	font-size: 14px;
	line-height: 1.8;
	background-color: #0f172a;
	color: rgba(255, 255, 255, .78);
	border-top: 3px solid var(--pt-red);
}
#footer #copyrights .col_half,
#footer #copyrights p {
	color: rgba(255, 255, 255, .78);
}
#footer #copyrights a,
#footer.dark #copyrights a { color: #fff; }

/* "Powered by" sits on its own line under the copyright. */
#copyrights .ea-credit {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	opacity: .85;
}
/* Desktop: copyright block left, contact line right, both centred on one row. */
@media (min-width: 768px) {
	#copyrights > .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
	}
	#copyrights > .container:before,
	#copyrights > .container:after { display: none; }
	#copyrights > .container > .col_half {
		float: none;
		margin: 0;
		width: auto;
	}
}
/* Phones and tablets: everything centred. */
@media (max-width: 767px) {
	#copyrights .col_half { text-align: center; }
}
#footer #copyrights a:hover { color: var(--pt-red); }
#footer #copyrights i { color: var(--pt-red); }

/* Back to top
-----------------------------------------------------------------*/
#gotoTop {
	border-radius: 50%;
	background-color: var(--pt-blue);
}
#gotoTop:hover { background-color: var(--pt-red); }

/* Respect users who prefer less motion
-----------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	a, .button, .sm-form-control,
	.portfolio-item .portfolio-image, .portfolio-item .portfolio-image img,
	.feature-box .fbox-icon i, .feature-box .fbox-icon img {
		transition: none !important;
	}
	.button:hover,
	.portfolio-item:hover .portfolio-image,
	.portfolio-item:hover .portfolio-image img,
	.feature-box:hover .fbox-icon i,
	.feature-box:hover .fbox-icon img {
		transform: none;
	}
}