/* =========================================================
   TESTED OK ELECTRONICS
   CONTACT US PAGE
   ========================================================= */

.tok-contact-page {
	width: 100%;
	background: #ffffff;
	color: #071A33;
}

.tok-contact-page *,
.tok-contact-page *::before,
.tok-contact-page *::after {
	box-sizing: border-box;
}

.tok-contact-container {
	width: min(1200px, calc(100% - 48px));
	max-width: 1200px;
	margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.tok-contact-hero {
	position: relative;
	overflow: hidden;

	padding: 82px 0 75px;

	background:
		linear-gradient(
			135deg,
			#071A33 0%,
			#0D47A1 100%
		);
}

.tok-contact-hero::before {
	content: "";

	position: absolute;

	width: 420px;
	height: 420px;

	top: -210px;
	right: -100px;

	border-radius: 50%;

	background: rgba(255,255,255,.055);
}

.tok-contact-hero::after {
	content: "";

	position: absolute;

	width: 300px;
	height: 300px;

	bottom: -190px;
	left: -100px;

	border-radius: 50%;

	background: rgba(227,30,36,.10);
}

.tok-contact-hero-content {
	position: relative;
	z-index: 2;

	max-width: 760px;
}

.tok-contact-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;

	margin-bottom: 18px;

	color: #ffffff;

	font-size: 12px;
	font-weight: 800;

	letter-spacing: 2px;
}

.tok-contact-eyebrow span {
	width: 30px;
	height: 3px;

	background: #E31E24;
}

.tok-contact-hero h1 {
	margin: 0 0 20px;

	color: #ffffff;

	font-size: 58px;
	line-height: 1.05;
	font-weight: 800;

	letter-spacing: -1.5px;
}

.tok-contact-hero h1 strong {
	display: block;

	color: #E31E24;

	font-weight: 800;
}

.tok-contact-hero p {
	max-width: 680px;

	margin: 0 0 28px;

	color: rgba(255,255,255,.80);

	font-size: 17px;
	line-height: 1.8;
}

.tok-contact-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;

	color: rgba(255,255,255,.62);

	font-size: 13px;
}

.tok-contact-breadcrumb a {
	color: #ffffff !important;

	text-decoration: none !important;
}

.tok-contact-breadcrumb a:hover {
	color: #E31E24 !important;
}

.tok-contact-breadcrumb i {
	color: rgba(255,255,255,.4);

	font-size: 9px;
}


/* =========================================================
   CONTACT OPTIONS
   ========================================================= */

.tok-contact-options {
	position: relative;
	z-index: 5;

	margin-top: -35px;
}

.tok-contact-option-grid {
	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	gap: 12px;
}

.tok-contact-option {
	display: flex;

	align-items: center;

	gap: 14px;

	min-height: 110px;

	padding: 18px;

	border: 1px solid #E1E7EE;

	background: #ffffff;

	color: #071A33 !important;

	text-decoration: none !important;

	box-shadow:
		0 12px 30px
		rgba(7,26,51,.07);

	transition:
		transform .3s ease,
		box-shadow .3s ease,
		border-color .3s ease;
}

.tok-contact-option:hover {
	transform: translateY(-4px);

	border-color: #D3DDE8;

	box-shadow:
		0 18px 40px
		rgba(7,26,51,.11);
}

.tok-contact-option-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 46px;

	width: 46px;
	height: 46px;

	background: #EAF1FB;

	color: #0D47A1;

	font-size: 17px;
}

.tok-contact-option span {
	display: block;

	margin-bottom: 4px;

	color: #E31E24;

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 1.2px;
}

.tok-contact-option strong {
	display: block;

	color: #071A33;

	font-size: 13px;
	font-weight: 800;

	line-height: 1.35;

	word-break: break-word;
}

.tok-contact-option small {
	display: block;

	margin-top: 3px;

	color: #89929D;

	font-size: 10px;

	line-height: 1.4;
}


/* =========================================================
   MAIN CONTACT AREA
   ========================================================= */

.tok-contact-main {
	padding: 95px 0;
}

.tok-contact-main-grid {
	display: grid;

	grid-template-columns:
		1.2fr .8fr;

	gap: 55px;

	align-items: start;
}

.tok-contact-section-label {
	margin-bottom: 9px;

	color: #E31E24;

	font-size: 11px;
	font-weight: 800;

	letter-spacing: 1.8px;

	text-transform: uppercase;
}

.tok-contact-form-section h2 {
	margin: 0 0 13px;

	color: #071A33;

	font-size: 40px;
	line-height: 1.15;
	font-weight: 800;
}

.tok-contact-form-intro {
	max-width: 650px;

	margin: 0 0 32px;

	color: #687483;

	font-size: 14px;
	line-height: 1.7;
}


/* =========================================================
   FORM
   ========================================================= */

.tok-contact-form {
	width: 100%;
}

.tok-contact-form-row {
	display: grid;

	grid-template-columns:
		1fr 1fr;

	gap: 18px;

	margin-bottom: 18px;
}

.tok-contact-field {
	margin-bottom: 18px;
}

.tok-contact-form-row .tok-contact-field {
	margin-bottom: 0;
}

.tok-contact-field label {
	display: block;

	margin-bottom: 8px;

	color: #071A33;

	font-size: 12px;
	font-weight: 700;
}

.tok-contact-field input,
.tok-contact-field select,
.tok-contact-field textarea {
	display: block;

	width: 100%;

	border: 1px solid #DCE4EC;

	border-radius: 5px;

	background: #ffffff;

	color: #071A33;

	font-family: inherit;

	font-size: 13px;

	outline: none;

	transition:
		border-color .25s ease,
		box-shadow .25s ease;
}

.tok-contact-field input,
.tok-contact-field select {
	height: 50px;

	padding: 0 14px;
}

.tok-contact-field textarea {
	min-height: 145px;

	padding: 14px;

	resize: vertical;
}

.tok-contact-field input::placeholder,
.tok-contact-field textarea::placeholder {
	color: #A1AAB4;
}

.tok-contact-field input:focus,
.tok-contact-field select:focus,
.tok-contact-field textarea:focus {
	border-color: #0D47A1;

	box-shadow:
		0 0 0 3px
		rgba(13,71,161,.08);
}

.tok-contact-submit {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	min-height: 48px;

	padding: 0 24px;

	border: 0;

	border-radius: 6px;

	background: #E31E24;

	color: #ffffff;

	font-family: inherit;

	font-size: 13px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background .3s ease,
		transform .3s ease;
}

.tok-contact-submit:hover {
	background: #071A33;

	color: #ffffff;

	transform: translateY(-2px);
}


/* =========================================================
   CONTACT INFO
   ========================================================= */

.tok-contact-info {
	background:
		linear-gradient(
			145deg,
			#071A33,
			#0D47A1
		);
}

.tok-contact-info-inner {
	padding: 42px 38px;
}

.tok-contact-info .tok-contact-section-label {
	color: #E31E24;
}

.tok-contact-info h2 {
	margin: 0 0 14px;

	color: #ffffff;

	font-size: 34px;
	line-height: 1.1;
	font-weight: 800;
}

.tok-contact-info-inner > p {
	margin: 0 0 32px;

	color: rgba(255,255,255,.68);

	font-size: 13px;
	line-height: 1.8;
}

.tok-contact-info-list {
	border-top:
		1px solid
		rgba(255,255,255,.12);
}

.tok-contact-info-item {
	display: flex;

	align-items: flex-start;

	gap: 14px;

	padding: 20px 0;

	border-bottom:
		1px solid
		rgba(255,255,255,.12);
}

.tok-contact-info-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 40px;

	width: 40px;
	height: 40px;

	background: rgba(255,255,255,.08);

	color: #ffffff;

	font-size: 14px;
}

.tok-contact-info-item span {
	display: block;

	margin-bottom: 5px;

	color: rgba(255,255,255,.45);

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 1.2px;
}

.tok-contact-info-item strong,
.tok-contact-info-item a {
	display: block;

	color: #ffffff !important;

	font-size: 13px;
	font-weight: 600;

	line-height: 1.6;

	text-decoration: none !important;
}

.tok-contact-info-item a:hover {
	color: #E31E24 !important;
}


/* =========================================================
   OPENING HOURS
   ========================================================= */

.tok-contact-hours {
	display: flex;

	align-items: center;

	gap: 14px;

	margin-top: 25px;

	padding: 18px;

	background: rgba(255,255,255,.06);

	border:
		1px solid
		rgba(255,255,255,.10);
}

.tok-contact-hours-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 40px;

	width: 40px;
	height: 40px;

	background: #E31E24;

	color: #ffffff;
}

.tok-contact-hours span {
	display: block;

	margin-bottom: 3px;

	color: rgba(255,255,255,.45);

	font-size: 9px;
	font-weight: 800;

	letter-spacing: 1px;
}

.tok-contact-hours strong {
	display: block;

	color: #ffffff;

	font-size: 13px;
}

.tok-contact-hours small {
	display: block;

	margin-top: 2px;

	color: rgba(255,255,255,.65);

	font-size: 11px;
}

.tok-contact-whatsapp {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	margin-top: 15px;

	min-height: 48px;

	padding: 0 16px;

	background: #E31E24;

	color: #ffffff !important;

	font-size: 12px;
	font-weight: 700;

	text-decoration: none !important;

	transition:
		background .3s ease;
}

.tok-contact-whatsapp > i:first-child {
	font-size: 18px;
}

.tok-contact-whatsapp > i:last-child {
	font-size: 10px;
}

.tok-contact-whatsapp:hover {
	background: #ffffff;

	color: #071A33 !important;
}


/* =========================================================
   MAP
   ========================================================= */

.tok-contact-map-section {
	padding: 0 0 95px;
}

.tok-contact-map-heading {
	display: flex;

	align-items: flex-end;

	justify-content: space-between;

	gap: 40px;

	margin-bottom: 25px;
}

.tok-contact-map-heading h2 {
	margin: 0;

	color: #071A33;

	font-size: 36px;
	line-height: 1.15;
	font-weight: 800;
}

.tok-contact-map-heading p {
	max-width: 400px;

	margin: 0;

	color: #687483;

	font-size: 13px;
	line-height: 1.7;
}

.tok-contact-map {
	width: 100%;

	height: 450px;

	overflow: hidden;

	border:
		1px solid #E0E7EE;
}

.tok-contact-map iframe {
	display: block;

	width: 100%;
	height: 100%;

	border: 0;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.tok-contact-support {
	padding: 95px 0;

	background: #F7F9FB;
}

.tok-contact-section-heading {
	max-width: 700px;

	margin-bottom: 40px;
}

.tok-contact-section-heading h2 {
	margin: 0 0 13px;

	color: #071A33;

	font-size: 40px;
	line-height: 1.15;
	font-weight: 800;
}

.tok-contact-section-heading p {
	margin: 0;

	color: #687483;

	font-size: 14px;
	line-height: 1.7;
}

.tok-contact-support-grid {
	display: grid;

	grid-template-columns:
		repeat(4, 1fr);

	gap: 18px;
}

.tok-contact-support-card {
	min-height: 250px;

	padding: 28px;

	border: 1px solid #E1E7EE;

	background: #ffffff;

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}

.tok-contact-support-card:hover {
	transform: translateY(-4px);

	box-shadow:
		0 15px 35px
		rgba(7,26,51,.08);
}

.tok-contact-support-icon {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	margin-bottom: 25px;

	background: #EAF1FB;

	color: #0D47A1;

	font-size: 18px;
}

.tok-contact-support-card h3 {
	margin: 0 0 10px;

	color: #071A33;

	font-size: 17px;
	font-weight: 800;
}

.tok-contact-support-card p {
	margin: 0;

	color: #74818E;

	font-size: 12px;
	line-height: 1.7;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.tok-contact-cta {
	padding: 90px 0;
}

.tok-contact-cta-inner {
	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 40px;

	padding: 55px 60px;

	background: #071A33;
}

.tok-contact-cta-inner h2 {
	max-width: 700px;

	margin: 0 0 12px;

	color: #ffffff;

	font-size: 38px;
	line-height: 1.15;
	font-weight: 800;
}

.tok-contact-cta-inner p {
	margin: 0;

	color: rgba(255,255,255,.65);

	font-size: 14px;
	line-height: 1.7;
}

.tok-contact-button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	gap: 10px;

	min-height: 48px;

	padding: 0 24px;

	border-radius: 6px;

	background: #E31E24;

	color: #ffffff !important;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none !important;

	transition:
		background .3s ease,
		transform .3s ease;
}

.tok-contact-button:hover {
	background: #ffffff;

	color: #071A33 !important;

	transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

	.tok-contact-container {
		width: calc(100% - 40px);
	}

	.tok-contact-option-grid {
		grid-template-columns:
			repeat(2, 1fr);
	}

	.tok-contact-main-grid {
		grid-template-columns: 1fr;

		gap: 50px;
	}

	.tok-contact-support-grid {
		grid-template-columns:
			repeat(2, 1fr);
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.tok-contact-container {
		width: calc(100% - 28px);
	}


	/* HERO */

	.tok-contact-hero {
		padding: 60px 0 55px;
	}

	.tok-contact-hero h1 {
		font-size: 40px;
	}

	.tok-contact-hero p {
		font-size: 15px;
	}


	/* OPTIONS */

	.tok-contact-options {
		margin-top: -20px;
	}

	.tok-contact-option-grid {
		grid-template-columns: 1fr;
	}

	.tok-contact-option {
		min-height: 95px;
	}


	/* MAIN */

	.tok-contact-main {
		padding: 65px 0;
	}

	.tok-contact-form-section h2 {
		font-size: 32px;
	}

	.tok-contact-form-row {
		grid-template-columns: 1fr;

		gap: 0;
	}

	.tok-contact-form-row .tok-contact-field {
		margin-bottom: 18px;
	}


	/* MAP */

	.tok-contact-map-section {
		padding-bottom: 65px;
	}

	.tok-contact-map-heading {
		display: block;
	}

	.tok-contact-map-heading h2 {
		font-size: 31px;
	}

	.tok-contact-map-heading p {
		margin-top: 12px;
	}

	.tok-contact-map {
		height: 360px;
	}


	/* SUPPORT */

	.tok-contact-support {
		padding: 65px 0;
	}

	.tok-contact-section-heading h2 {
		font-size: 32px;
	}

	.tok-contact-support-grid {
		grid-template-columns: 1fr;
	}


	/* CTA */

	.tok-contact-cta {
		padding: 65px 0;
	}

	.tok-contact-cta-inner {
		display: block;

		padding: 40px 28px;
	}

	.tok-contact-cta-inner h2 {
		font-size: 31px;
	}

	.tok-contact-button {
		margin-top: 25px;
	}

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.tok-contact-hero h1 {
		font-size: 34px;
	}

	.tok-contact-info-inner {
		padding: 32px 24px;
	}

	.tok-contact-map {
		height: 320px;
	}

}








/* =========================================================
   FLUENT FORMS — TESTED OK CONTACT FORM
   ========================================================= */

.tok-contact-form .fluentform {
	width: 100%;
	margin: 0;
}

.tok-contact-form .ff-el-group {
	margin-bottom: 18px;
}

.tok-contact-form .ff-el-input--label label {
	display: block;

	margin-bottom: 8px;

	color: #071A33;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.tok-contact-form .ff-el-form-control {
	display: block;

	width: 100%;

	min-height: 50px;

	padding: 0 14px;

	border: 1px solid #DCE4EC !important;
	border-radius: 5px !important;

	background: #ffffff !important;

	color: #071A33 !important;

	font-family: inherit;

	font-size: 13px;

	box-shadow: none !important;

	transition:
		border-color .25s ease,
		box-shadow .25s ease;
}

.tok-contact-form textarea.ff-el-form-control {
	min-height: 145px;

	padding: 14px;

	resize: vertical;
}

.tok-contact-form .ff-el-form-control::placeholder {
	color: #A1AAB4 !important;

	opacity: 1;
}

.tok-contact-form .ff-el-form-control:focus {
	border-color: #0D47A1 !important;

	box-shadow:
		0 0 0 3px
		rgba(13,71,161,.08) !important;

	outline: none !important;
}


/* =========================================================
   TWO-COLUMN FIELDS
   ========================================================= */

.tok-contact-form .ff-t-cell {
	padding-left: 9px;
	padding-right: 9px;
}

.tok-contact-form .ff-t-cell:first-child {
	padding-left: 0;
}

.tok-contact-form .ff-t-cell:last-child {
	padding-right: 0;
}


/* =========================================================
   REQUIRED ASTERISK
   ========================================================= */

.tok-contact-form .ff-el-input--label label .error {
	color: #E31E24;
}

.tok-contact-form .ff-el-input--label label span {
	color: #E31E24;
}


/* =========================================================
   SELECT
   ========================================================= */

.tok-contact-form select.ff-el-form-control {
	padding-right: 40px;

	cursor: pointer;

	appearance: auto;
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.tok-contact-form .ff-btn-submit,
.tok-contact-form button[type="submit"] {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 48px;

	padding: 0 25px;

	border: 0 !important;
	border-radius: 6px !important;

	background: #E31E24 !important;

	color: #ffffff !important;

	font-family: inherit;

	font-size: 13px;
	font-weight: 700;

	line-height: 1;

	cursor: pointer;

	box-shadow: none !important;

	transition:
		background .3s ease,
		transform .3s ease;
}

.tok-contact-form .ff-btn-submit:hover,
.tok-contact-form button[type="submit"]:hover {
	background: #071A33 !important;

	color: #ffffff !important;

	transform: translateY(-2px);
}


/* =========================================================
   VALIDATION MESSAGES
   ========================================================= */

.tok-contact-form .error {
	color: #E31E24 !important;

	font-size: 11px;
}

.tok-contact-form .ff-el-is-error .ff-el-form-control {
	border-color: #E31E24 !important;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.tok-contact-form .ff-message-success {
	margin: 0 0 20px;

	padding: 18px 20px;

	border: 1px solid #D8E9DD;

	border-radius: 5px;

	background: #F3FAF5;

	color: #245B32;

	font-size: 13px;

	line-height: 1.7;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.tok-contact-form .ff-t-cell {
		width: 100% !important;

		padding-left: 0;
		padding-right: 0;
	}

	.tok-contact-form .ff-el-group {
		margin-bottom: 16px;
	}

	.tok-contact-form .ff-btn-submit,
	.tok-contact-form button[type="submit"] {
		width: 100%;
	}

}