﻿.sh-home {
	--sh-primary: var(--color-primary, #0097dc);
	--sh-primary-dark: #0b339a;
	--sh-primary-end: #007ad2;
	--sh-gradient-primary: var(--brandwebsite-gradient-primary, linear-gradient(90.33deg, #0b339a 0%, #0097dc 49.13%, #007ad2 99.72%));
	--sh-text: #333;
	--sh-heading: #0b339a;
	--sh-muted: #666;
	--sh-bg: #f9fbff;
	--sh-soft: #d9edf9;
	--sh-gold: #d6a64a;
	--sh-font: "Roboto", sans-serif;
	--sh-section-y: 28px;
	--sh-section-y-mobile: 22px;
	margin: 0;
	padding-top: 0;
	background: var(--sh-bg);
	color: var(--sh-text);
	font-family: var(--sh-font);
	font-size: 16px;
	line-height: 1.6;
	overflow: hidden;
}

body.home {
	font-family: "Roboto", sans-serif;
}

@font-face {
	font-family: "Roboto";
	src: url("../../fonts/roboto/roboto-vietnamese.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: block;
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Roboto";
	src: url("../../fonts/roboto/roboto-latin.woff2") format("woff2");
	font-style: normal;
	font-weight: 100 900;
	font-display: block;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body.home main#main.sh-home {
	margin-top: 50px;
	padding-top: 0 !important;
	background: var(--sh-bg);
	font-family: "Roboto", sans-serif;
}

.sh-home *,
.sh-home *::before,
.sh-home *::after {
	box-sizing: border-box;
}

.sh-home h1,
.sh-home h2,
.sh-home h3,
.sh-home h4,
.sh-home h5,
.sh-home h6,
.sh-home button,
.sh-home input,
.sh-home select,
.sh-home textarea {
	font-family: var(--sh-font);
}

.sh-home .sh-container {
	width: min(1270px, calc(100% - 40px));
	margin: 0 auto;
}

.sh-home .sh-section {
	padding: var(--sh-section-y) 0;
}

.sh-home .sh-section__head {
	max-width: 760px;
	margin: 0 auto 28px;
	text-align: center;
}

.sh-home .sh-section__head h2 {
	margin: 0 0 10px;
	background: var(--sh-gradient-primary);
	background-clip: text;
	-webkit-background-clip: text;
	color: var(--sh-primary);
	font-size: clamp(28px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	-webkit-text-fill-color: transparent;
}

.sh-home .sh-section__head p {
	margin: 0;
	color: var(--sh-muted);
	font-size: 16px;
	line-height: 1.65;
}

.sh-home .sh-eyebrow {
	margin: 0 0 8px;
	color: var(--sh-primary);
	font-size: 14px;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0;
}

.sh-home .sh-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 22px;
	border-radius: 8px;
	background: linear-gradient(90deg, #0b78ce, #0097dc);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(0, 151, 220, 0.2);
}

.sh-home .sh-button:hover {
	color: #fff;
	transform: translateY(-1px);
}

.sh-home img {
	display: block;
	max-width: 100%;
}

.sh-home__seo-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	.sh-home {
		--sh-section-y: var(--sh-section-y-mobile);
	}

	.sh-home .sh-container {
		width: min(100% - 24px, 520px);
	}

	.sh-home .sh-section {
		padding: var(--sh-section-y) 0;
	}

	.sh-home .sh-section__head {
		margin-bottom: 20px;
	}

	.sh-home .sh-section__head h2 {
		font-size: 26px;
	}

	.sh-home .sh-section__head p {
		font-size: 15px;
	}
}
