/* =========================================================
   ISGAMER — CONTACT PAGE
========================================================= */


/* =========================================================
   01 — VARIABLES
========================================================= */

.isg-contact {
	--contact-panel: #0b1522;
	--contact-panel-2: #0f1c2c;

	--contact-line: rgba(255,255,255,.09);
	--contact-line-strong: rgba(255,255,255,.14);

	--contact-text: #f7f9ff;
	--contact-copy: #b8c3d3;
	--contact-muted: #8793a6;

	--contact-cyan: #39e7ff;
	--contact-purple: #7657ff;
	--contact-pink: #ff3d81;

	width: 100%;
	margin: 0;
	padding: 0;

	color: var(--contact-text);
}


/* =========================================================
   RESET
========================================================= */

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

.isg-contact a {
	text-decoration: none !important;
}


/* =========================================================
   CONTAINER
========================================================= */

.isg-contact__container {
	width: min(1220px, calc(100% - 80px));

	margin: 0 auto;
}


/* =========================================================
   02 — HERO
========================================================= */

.isg-contact__hero {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		260px;

	align-items: end;

	gap: 70px;

	padding: 68px 0 64px;

	border-bottom: 1px solid var(--contact-line);
}


.isg-contact__hero-copy {
	max-width: 760px;
}


/* EYEBROW */

.isg-contact__eyebrow {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 27px;

	color: var(--contact-cyan);

	font-size: 10px;
	font-weight: 900;

	letter-spacing: .16em;
}


.isg-contact__eyebrow-number {
	display: grid;

	place-items: center;

	min-width: 74px;
	height: 38px;

	padding: 0 11px;

	border: 1px solid rgba(57,231,255,.35);
	border-radius: 8px;

	background: rgba(57,231,255,.04);

	color: var(--contact-cyan);
}


.isg-contact__eyebrow-line {
	width: 27px;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--contact-cyan),
			var(--contact-purple),
			var(--contact-pink)
		);
}


/* TITLE */

.isg-contact__hero h1 {
	margin: 0 !important;

	color: #fff !important;

	font-size:
		clamp(52px,4.8vw,74px) !important;

	font-weight: 950 !important;

	line-height: .94 !important;

	letter-spacing: -.052em !important;
}


.isg-contact__hero h1 span {
	display: block;

	margin-top: 7px;

	background:
		linear-gradient(
			90deg,
			var(--contact-cyan),
			var(--contact-purple),
			var(--contact-pink)
		);

	-webkit-background-clip: text;
	background-clip: text;

	-webkit-text-fill-color: transparent;
}


.isg-contact__hero-copy > p {
	max-width: 650px;

	margin: 25px 0 0 !important;

	color: var(--contact-copy) !important;

	font-size: 15px !important;

	line-height: 1.72 !important;
}


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

.isg-contact__hero-panel {
	position: relative;

	padding: 22px 0 5px 25px;

	border-left:
		1px solid rgba(57,231,255,.18);
}


.isg-contact__hero-panel::before {
	content: "";

	position: absolute;

	top: 0;
	left: -1px;

	width: 2px;
	height: 37px;

	background:
		linear-gradient(
			180deg,
			var(--contact-cyan),
			var(--contact-purple)
		);
}


.isg-contact__hero-panel > span {
	display: block;

	color: var(--contact-cyan);

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

	letter-spacing: .16em;
}


.isg-contact__hero-panel strong {
	display: block;

	margin-top: 17px;

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

	font-size: 58px;
	font-weight: 950;

	line-height: .82;

	letter-spacing: -.055em;
}


.isg-contact__hero-panel small {
	display: block;

	margin-top: 17px;

	color: var(--contact-muted);

	font-size: 8px;
	font-weight: 900;

	letter-spacing: .14em;
}


/* =========================================================
   03 — AD SLOTS
========================================================= */

.isg-contact .isg-ad-slot {
	display: none;
}

.isg-contact .isg-ad-slot:not(:empty) {
	display: block;
}

.isg-contact .isg-ad-slot--contact-top:not(:empty) {
	width: min(970px,100%);

	margin: 32px auto;

	text-align: center;
}

.isg-contact .isg-ad-slot--contact-side:not(:empty) {
	margin-top: 24px;

	text-align: center;
}


/* =========================================================
   04 — CONTACT TYPES
========================================================= */

.isg-contact__types {
	padding: 58px 0 66px;

	border-bottom: 1px solid var(--contact-line);
}


.isg-contact__section-label {
	display: flex;

	align-items: center;

	gap: 12px;

	margin-bottom: 27px;

	color: var(--contact-cyan);

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

	letter-spacing: .16em;
}


.isg-contact__section-label > span {
	width: 27px;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--contact-cyan),
			transparent
		);
}


.isg-contact__types-grid {
	display: grid;

	grid-template-columns:
		repeat(3,minmax(0,1fr));

	gap: 18px;
}


/* TYPE CARD */

.isg-contact__type {
	--type-accent: #39e7ff;
	--type-rgb: 57,231,255;

	position: relative;

	min-height: 240px;

	padding: 27px;

	overflow: hidden;

	border: 1px solid var(--contact-line);
	border-radius: 14px;

	background:
		radial-gradient(
			250px 150px at 100% 0%,
			rgba(var(--type-rgb),.06),
			transparent 70%
		),
		linear-gradient(
			145deg,
			#0e1b2b,
			#09131f
		);

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


.isg-contact__type::before {
	content: "";

	position: absolute;

	top: 0;
	left: 27px;

	width: 55px;
	height: 2px;

	background:
		linear-gradient(
			90deg,
			var(--type-accent),
			transparent
		);
}


.isg-contact__type:hover {
	transform: translateY(-5px);

	border-color:
		rgba(var(--type-rgb),.34);
}


.isg-contact__type--general {
	--type-accent: #39e7ff;
	--type-rgb: 57,231,255;
}

.isg-contact__type--reports {
	--type-accent: #7657ff;
	--type-rgb: 118,87,255;
}

.isg-contact__type--partners {
	--type-accent: #ff3d81;
	--type-rgb: 255,61,129;
}


.isg-contact__type-number {
	display: grid;

	place-items: center;

	width: 40px;
	height: 34px;

	margin-bottom: 32px;

	border: 1px solid rgba(var(--type-rgb),.32);
	border-radius: 7px;

	color: var(--type-accent);

	font-size: 10px;
	font-weight: 900;
}


.isg-contact__type h2 {
	margin: 0 0 12px !important;

	color: #fff !important;

	font-size: 22px !important;
	font-weight: 900 !important;

	line-height: 1.18 !important;
}


.isg-contact__type p {
	margin: 0 !important;

	color: var(--contact-muted) !important;

	font-size: 13px !important;

	line-height: 1.65 !important;
}


/* =========================================================
   05 — MAIN FORM AREA
========================================================= */

.isg-contact__main {
	display: grid;

	grid-template-columns:
		minmax(0, 1.55fr)
		minmax(300px, .75fr);

	align-items: start;

	gap: 25px;

	padding: 68px 0 72px;

	border-bottom: 1px solid var(--contact-line);
}


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

.isg-contact__form-panel {
	padding: 34px;

	border: 1px solid var(--contact-line);
	border-radius: 16px;

	background:
		linear-gradient(
			145deg,
			#0d1928,
			#09131f
		);
}


.isg-contact__form-head {
	margin-bottom: 27px;
}


.isg-contact__form-head > span {
	display: block;

	margin-bottom: 8px;

	color: var(--contact-cyan);

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

	letter-spacing: .16em;
}


.isg-contact__form-head h2 {
	margin: 0 !important;

	color: #fff !important;

	font-size: 36px !important;
	font-weight: 950 !important;

	letter-spacing: -.035em !important;
}


.isg-contact__form-head p {
	max-width: 620px;

	margin: 13px 0 0 !important;

	color: var(--contact-muted) !important;

	font-size: 13px !important;

	line-height: 1.65 !important;
}


/* =========================================================
   FORM GENERIC STYLING
========================================================= */

.isg-contact__form form {
	margin: 0;
}


.isg-contact__form p {
	margin: 0 0 18px;
}


.isg-contact__form label {
	display: block;

	margin-bottom: 7px;

	color: #dbe4ef;

	font-size: 11px;
	font-weight: 850;
}


.isg-contact__form input[type="text"],
.isg-contact__form input[type="email"],
.isg-contact__form input[type="tel"],
.isg-contact__form input[type="url"],
.isg-contact__form select,
.isg-contact__form textarea {
	width: 100% !important;

	margin: 0 !important;

	border: 1px solid var(--contact-line-strong) !important;
	border-radius: 9px !important;

	outline: none !important;

	background: #091521 !important;

	color: #fff !important;

	font-family: inherit !important;

	font-size: 13px !important;

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


.isg-contact__form input[type="text"],
.isg-contact__form input[type="email"],
.isg-contact__form input[type="tel"],
.isg-contact__form input[type="url"],
.isg-contact__form select {
	height: 48px;

	padding: 0 14px !important;
}


.isg-contact__form textarea {
	min-height: 175px;

	padding: 14px !important;

	resize: vertical;
}


.isg-contact__form input:focus,
.isg-contact__form select:focus,
.isg-contact__form textarea:focus {
	border-color:
		rgba(57,231,255,.45) !important;

	box-shadow:
		0 0 0 3px rgba(57,231,255,.04) !important;
}


/* SUBMIT */

.isg-contact__form input[type="submit"],
.isg-contact__form button[type="submit"] {
	display: inline-flex !important;

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

	min-height: 50px;

	padding: 0 22px !important;

	border:
		1px solid rgba(57,231,255,.40) !important;

	border-radius: 9px !important;

	background:
		linear-gradient(
			135deg,
			rgba(57,231,255,.11),
			rgba(118,87,255,.08)
		) !important;

	color: var(--contact-cyan) !important;

	font-size: 12px !important;
	font-weight: 900 !important;

	cursor: pointer;

	transition:
		transform .2s ease,
		border-color .2s ease;
}


.isg-contact__form input[type="submit"]:hover,
.isg-contact__form button[type="submit"]:hover {
	transform: translateY(-2px);

	border-color:
		rgba(57,231,255,.66) !important;
}


/* =========================================================
   PRIVACY NOTE
========================================================= */

.isg-contact__privacy-note {
	display: flex;

	align-items: flex-start;

	gap: 12px;

	margin-top: 22px;

	padding: 14px;

	border: 1px solid rgba(255,255,255,.065);
	border-radius: 9px;

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


.isg-contact__privacy-note > span {
	display: grid;

	place-items: center;

	width: 22px;
	height: 22px;

	flex: 0 0 22px;

	border: 1px solid rgba(255,61,129,.30);
	border-radius: 50%;

	color: var(--contact-pink);

	font-size: 10px;
	font-weight: 900;
}


.isg-contact__privacy-note p {
	margin: 0 !important;

	color: var(--contact-muted) !important;

	font-size: 11px !important;

	line-height: 1.55 !important;
}


/* =========================================================
   06 — INFO PANEL
========================================================= */

.isg-contact__info {
	padding: 31px;

	border: 1px solid var(--contact-line);
	border-radius: 16px;

	background:
		radial-gradient(
			300px 180px at 100% 0%,
			rgba(118,87,255,.06),
			transparent 70%
		),
		linear-gradient(
			145deg,
			#0e1b2b,
			#09131f
		);
}


.isg-contact__info-head > span {
	display: block;

	margin-bottom: 8px;

	color: #a991ff;

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

	letter-spacing: .16em;
}


.isg-contact__info-head h2 {
	margin: 0 !important;

	color: #fff !important;

	font-size: 27px !important;
	font-weight: 950 !important;
}


/* INFO ITEMS */

.isg-contact__info-list {
	display: flex;

	flex-direction: column;

	gap: 0;

	margin-top: 26px;
}


.isg-contact__info-item {
	display: grid;

	grid-template-columns:
		37px minmax(0,1fr);

	gap: 13px;

	padding: 19px 0;

	border-top: 1px solid var(--contact-line);
}


.isg-contact__info-item > span {
	display: grid;

	place-items: center;

	width: 34px;
	height: 30px;

	border: 1px solid rgba(118,87,255,.25);
	border-radius: 6px;

	color: #a991ff;

	font-size: 9px;
	font-weight: 900;
}


.isg-contact__info-item h3 {
	margin: 0 0 6px !important;

	color: #fff !important;

	font-size: 14px !important;
	font-weight: 900 !important;
}


.isg-contact__info-item p {
	margin: 0 !important;

	color: var(--contact-muted) !important;

	font-size: 11px !important;

	line-height: 1.6 !important;
}


/* RESPONSE */

.isg-contact__response {
	margin-top: 20px;

	padding: 17px;

	border: 1px solid rgba(57,231,255,.10);
	border-radius: 9px;

	background: rgba(57,231,255,.025);
}


.isg-contact__response span {
	color: var(--contact-cyan);

	font-size: 8px;
	font-weight: 900;

	letter-spacing: .15em;
}


.isg-contact__response p {
	margin: 8px 0 0 !important;

	color: var(--contact-muted) !important;

	font-size: 11px !important;

	line-height: 1.6 !important;
}


/* =========================================================
   07 — QUICK LINKS
========================================================= */

.isg-contact__quick {
	display: grid;

	grid-template-columns:
		minmax(0,.8fr)
		minmax(420px,1.2fr);

	align-items: center;

	gap: 70px;

	padding: 72px 0 100px;
}


.isg-contact__quick-copy > span {
	display: block;

	margin-bottom: 10px;

	color: var(--contact-pink);

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

	letter-spacing: .16em;
}


.isg-contact__quick-copy h2 {
	margin: 0 !important;

	color: #fff !important;

	font-size:
		clamp(32px,3.5vw,45px) !important;

	font-weight: 950 !important;

	line-height: 1.05 !important;
}


.isg-contact__quick-copy h2 strong {
	display: block;

	color: var(--contact-cyan);
}


.isg-contact__quick-links {
	display: grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap: 12px;
}


.isg-contact__quick-links a {
	display: flex;

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

	min-height: 66px;

	padding: 0 19px;

	border: 1px solid var(--contact-line);
	border-radius: 10px;

	background:
		linear-gradient(
			145deg,
			#0d1928,
			#09131f
		);

	color: #dce4ef !important;

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

	transition:
		transform .2s ease,
		border-color .2s ease;
}


.isg-contact__quick-links a:hover {
	transform: translateY(-3px);

	border-color:
		rgba(57,231,255,.30);
}


.isg-contact__quick-links a span {
	color: var(--contact-cyan);

	font-size: 17px;
}


/* =========================================================
   08 — RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

	.isg-contact__container {
		width: calc(100% - 48px);
	}


	.isg-contact__hero {
		grid-template-columns: 1fr;

		gap: 35px;
	}


	.isg-contact__hero-panel {
		width: max-content;
	}


	.isg-contact__types-grid {
		grid-template-columns:
			repeat(2,minmax(0,1fr));
	}


	.isg-contact__main {
		grid-template-columns: 1fr;
	}


	.isg-contact__quick {
		grid-template-columns: 1fr;

		gap: 35px;
	}

}


@media (max-width: 700px) {

	.isg-contact__container {
		width: calc(100% - 30px);
	}


	.isg-contact__hero {
		padding: 48px 0 50px;
	}


	.isg-contact__hero h1 {
		font-size:
			clamp(41px,11vw,55px) !important;
	}


	.isg-contact__types {
		padding: 48px 0 55px;
	}


	.isg-contact__types-grid {
		grid-template-columns: 1fr;
	}


	.isg-contact__main {
		padding: 54px 0;
	}


	.isg-contact__form-panel,
	.isg-contact__info {
		padding: 24px;
	}


	.isg-contact__quick {
		padding: 55px 0 78px;
	}


	.isg-contact__quick-links {
		grid-template-columns: 1fr;
	}

}