@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Anton&family=Inter&family=Oswald:wght@400;500;600&family=Roboto:wght@400;500;700&display=swap";
@import"https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@700;800&display=swap";



* {
	-webkit-tap-highlight-color: transparent;
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased
}

body {
	text-rendering: optimizeSpeed
}
section h2,
section p{
	margin-bottom: 0;
}
section .container{
padding: 0;
}
button {
	background: transparent;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-user-select: none;
	user-select: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0
}

a {
	color: inherit;
	text-decoration: none
}

a:where(:visited) {
	color: inherit
}

a:active,
a:hover {
	outline: none
}

ul,
ol {
	list-style-type: none;
	margin: 0;
	padding: 0
}

select,
option {
	font: inherit;
	outline: none
}

img::selection {
	background: transparent
}

:root {
	--pt: 110px;
	--pb: 110px;
	--pl: 150px;
	--pr: 150px;
	--container_padding: 50px
}

@media (max-width: 1440px) {
	:root {
		--pl: 100px;
		--pr: 100px
	}
}

@media (max-width: 1200px) {
	:root {
		--pl: 50px;
		--pr: 50px;
		--container_padding: 30px
	}
}

@media (max-width: 1024px) {
	:root {
		--pl: 0px;
		--pr: 0px
	}
}

@media (max-width: 768px) {
	:root {
		--pt: 100px;
		--pb: 100px;
		--container_padding: 15px
	}
}

h1,
h2,
h3 {
	font-family: Oswald, sans-serif;
	text-transform: uppercase;
	font-style: normal;
	color: #151623
}

h1 {
	font-family: Sofia Sans, sans-serif;
	font-size: 72px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 4px
}

h2 {
	font-family: Sofia Sans, sans-serif;
	font-size: 62px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 3.6px
}

h3 {
	font-family: Sofia Sans, sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 160%;
	letter-spacing: 1.4px
}
.modal-dialog h2 {
    font-family: Sofia Sans, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
}
.modal-dialog .form-group button {
    font-size: 16px;
    text-transform: none;
}
h4 {
	font-family: Sofia Sans, sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 160%;
	letter-spacing: 1.05px;
	text-transform: uppercase
}

p {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	font-style: normal;
	color: #151623
}

.info {
	font-size: 18px
}

.t-a {
	text-align: center
}

.tt-u {
	font-family: Oswald, sans-serif;
	text-transform: uppercase
}

.caption {
	font-size: 14px;
	font-style: normal;
	font-weight: 300 !important;
	line-height: normal;
	color: #fff;
	width: fit-content
}

.nav {
	position: relative;
	transition: color .2s ease;
	font-family: Oswald, sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1.08px
}

.nav:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: currentColor;
	transition: width .2s ease
}

.nav:not(:disabled):hover {
	color: #005fee
}

.nav:not(:disabled).active,
.nav:not(:disabled):active {
	color: #005fee
}

.nav:not(:disabled).active:before,
.nav:not(:disabled):active:before {
	width: 100%
}




@media (max-width: 500px) {
	h1 {
		font-size: 45px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 2.25px
	}

	h2 {
		font-size: 40px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 2px
	}

	h3 {
		font-size: 24px;
		font-weight: 600;
		line-height: 160%;
		letter-spacing: 1.2px
	}

	.info {
		font-size: 14px
	}
}

@media screen and (orientation: landscape) and (max-height: 414px) {
	h1 {
		font-size: 45px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 2.25px
	}

	h2 {
		font-size: 40px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: 2px
	}

	h3 {
		font-size: 24px;
		font-weight: 600;
		line-height: 160%;
		letter-spacing: 1.2px
	}

	h4 {
		font-size: 18px;
		font-weight: 800;
		line-height: 160%;
		letter-spacing: 1.05px;
		text-transform: uppercase
	}
}

html {
	min-height: 100vh;
	overflow-x: hidden;
	/*display: flex;*/
	flex-direction: column;
}

@media screen and (orientation: landscape) and (max-height: 414px) {
	html {
		overflow-x: hidden
	}
}

html.no-scroll {
	overflow: hidden
}

html.no-scroll body {
	overflow: hidden;
	touch-action: none
}

body {
	flex-grow: 1;
	overflow-x: hidden;
	font-family: Oswald, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	background-color: #fff
}

@media (max-width: 500px) {
	body {
		font-size: 16px
	}
}

body::-webkit-scrollbar {
	width: 0px;
	height: 0px
}

.container {
	width: calc(100% - var(--container_padding) * 2);
	max-width: 1340px;
	margin-inline: auto;
	display: flex;
	flex-direction: column
}

.pt {
	padding-top: var(--pt)
}

.pb {
	padding-bottom: var(--pb)
}

.pl {
	padding-left: var(--pl)
}

.pr {
	padding-right: var(--pr)
}

.app {
	position: relative
}

main {
	position: relative;
	z-index: 1
}

input,
textarea {
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.25;
	color: #151623;
	padding: 15px 0 15px 15px;
	border: none;
	border-bottom: 1px solid #0559D6;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none
}

input::placeholder,
textarea::placeholder {
	font-family: Montserrat, "sans-serif";
	color: #151623;
	font-weight: 400;
	font-size: 18px;
	line-height: normal
}

textarea {
	resize: none;
	vertical-align: top;
	width: 100%;
	line-height: 22px;
	-ms-overflow-style: none;
	scrollbar-width: none
}

textarea::-webkit-scrollbar {
	display: none
}

input:-webkit-autofill {
	-webkit-animation-delay: 1s;
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both
}

input[type=submit] {
	-webkit-appearance: button
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0
}

input[type=number] {
	-moz-appearance: textfield
}

#scroll-to-top {
	width: 50px;
	height: 50px;
	padding-top: 8px;
	position: fixed;
	right: 15px;
	bottom: 50px;
	background: #005FEE;
	box-shadow: 0 4px 10px #03222a26;
	border: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	z-index: 99;
	transition: background .2s ease;
	transform: translateY(20px);
	border-radius: 6px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center
}

@media (max-width: 768px) {
	#scroll-to-top {
		bottom: 125px
	}
}

@media (max-width: 500px) {
	#scroll-to-top {
		bottom: 50px
	}
}

#scroll-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease, background .2s ease
}

#scroll-to-top.show:hover {
	/* background: #2bfefe; */
	background: #2bbcc8;
}

#scroll-to-top.show:active {
	background: #2dbdc9
}

.btn {
	font-family: Oswald, sans-serif;
	cursor: pointer;
	display: flex;
	width: 228px;
	height: 55px;
	padding: 5px 10px 5px 15px;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	position: relative;
	overflow: hidden;
	color: #005fee;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: .8px;
	transition: all .2s ease;
	border-radius: 5px;
	background-color: #fff;
	box-shadow: 0 4px 10px #03222a26
}

.btn:first-letter {
	text-transform: uppercase
}

.btn:hover:not(:disabled) {
	color: #151623
}

.btn:hover:not(:disabled) .arrow-btn i {
	animation: fadeInFromNone .3s ease-out
}
.btn.close:hover{
background-color: #fff;
}
.btn:hover:not(:disabled) .arrow-btn svg {
	animation: fadeInFromNone .3s ease-out
}

@keyframes fadeInFromNone {
	0% {
		transform: translate(0);
		opacity: 1
	}

	50% {
		transform: translate(20px);
		opacity: 0
	}

	70% {
		transform: translate(-20px);
		opacity: 0
	}

	to {
		transform: translate(0);
		opacity: 1
	}
}

.btn:active:not(:disabled) {
	border: 1px solid #005FEE
}

.btn:disabled {
	cursor: not-allowed;
	color: #005fee8b
}

.btn:disabled .arrow-btn {
	background-color: #005fee8b
}

.btn .arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 45px;
	background-color: #005fee;
	border-radius: 2px;
	position: relative
}

.btn .arrow-btn i {
	width: 24px;
	height: 24px;
	display: block;
	background: url(/img/public/images/arrow-button.svg);
	will-change: transform;
	translate: none;
	rotate: none;
	scale: none;
	opacity: 1;
	transform: translate(0)
}

.btn.contained {
	background-color: #005fee;
	color: #fff;
	justify-content: center;
	font-family: Sofia Sans, sans-serif;
	padding: 12px 30px;
	width: fit-content;
	height: fit-content;
	border: 1px solid transparent
}

.btn.contained:hover {
	background-color: #fff;
	color: #005fee;
	border: 1px solid #005FEE
}

.btn.contained:active:not(:disabled) {
	border: none
}

.form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 534px;
}

.form > div,
.forms{
	width: 427px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
   	gap: 30px;
}

.form.input-footer {
	margin-bottom: 0
}

@media (max-width: 1024px) {
	.form.input-footer {
		max-width: 327px
	}
}

@media (max-width: 768px) {
	.form.input-footer {
		max-width: 427px
	}
}

@media (max-width: 500px) {
	.form.input-footer {
		width: 100%
	}
}

@media (max-width: 768px) {
	.form {
		margin-bottom: 0
	}
}

@media (max-width: 500px) {
	.form {
		width: 100%
	}
}
.forms .input-wrapper,
.form .input-wrapper {
	max-width: 100%;
	width: 100%;
	position: relative
}
.forms .input-wrapper input,
.form .input-wrapper input {
	width: 100%;
	background-color: transparent
}

.form .input-wrapper.has-valid-field input {
	border-color: #0559d6
}

.form .input-wrapper.has-invalid-field input {
	border-color: #9c1619
}

.form .input-wrapper .validation-error {
	font-family: Montserrat, sans-serif;
	position: absolute;
	top: -5px;
	left: 15px;
	font-size: 10px;
	color: #9c1619;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	pointer-events: none
}

.form__line {
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 30px
}

.cookies {
	position: fixed;
	left: 50%;
	bottom: 20px;
	max-width: min(100% - 2 * var(--container_padding), 426px);
	padding: 22px 27px;
	background: #151623;
	z-index: 99;
	opacity: 1;
	visibility: visible;
	transition: opacity .2s ease;
	border: none;
	border-radius: 5px;
	transform: translate(-50%);
	box-shadow: 0 0 2px 1px #57574d80
}

@media (max-width: 900px) {
	.cookies {
		left: 0;
		transform: translate(50%);
		bottom: 10px
	}
}

@media (max-width: 500px) {
	.cookies {
		left: var(--container_padding);
		transform: none;
		width: 100%
	}
}

.cookies__inner {
	display: grid;
	grid-auto-flow: column;
	align-items: center;
	grid-gap: 40px;
	color: #fff;
	font-family: Oswald, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: .8px
}

@media (max-width: 768px) {
	.cookies__inner {
		grid-gap: 20px;
		font-size: 14px;
		line-height: 22px
	}
}

.cookies.hidden {
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease
}

.cookies .btn {
	padding: 0;
	background-color: transparent;
	width: fit-content;
	font-size: 16px;
	line-height: 24px;
	height: fit-content
}

.cookies .btn:hover:not(:disabled) {
	color: #fff
}

.cookies .btn:active:not(:disabled) {
	border: none
}

@media (max-width: 768px) {
	.cookies .btn {
		font-size: 14px;
		line-height: 22px
	}
}

@media screen and (orientation: landscape) and (max-height: 420px) {
	.cookies {
		width: calc(100% - 2 * var(--container_padding));
		bottom: 5px
	}
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: transparent;
	padding: 10% var(--container_padding) 5%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 9999;
	overflow-y: scroll;
	overscroll-behavior-y: contain;
	display: flex;
	justify-content: center
}
.popup.modal {
    --bs-modal-width: 720px;
}
.popup h2, .popup p.info{
	color: #fff;
}
#order_form_pjax .btn-close:hover{
	background-color: #fff;
}
.popup .modal-header .btn-close {
    --bs-btn-close-color: #fff;
    filter: invert(1);
}
.popup .modal-header .btn-close:hover {
    opacity: 1;
}
.popup .modal-header {
    border-bottom: none;
}
.hidden {
    display: none;
}
.popup #order_form_pjax {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.popup .modal-dialog{
	/* position: relative;
	margin: auto; */
	background: #151623;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1rem 0 80px 0;
}

@media (max-width: 500px) {
	.popup__inner {
		max-width: 100%;
		width: 100%;
		min-width: auto;
		padding: 120px 0 195px
	}
}

.popup.show {
	transform: translateY(0);
	opacity: 1;
	visibility: visible
}

.popup.open {
	opacity: 1;
	visibility: visible;
	pointer-events: initial
}

.popup__success-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;
	max-width: 392px
}

@media (max-width: 500px) {
	.popup__success-inner {
		max-width: 341px
	}

	.popup__success-inner p {
		font-size: 18px;
		line-height: 29px
	}
}

.popup__success-inner h2,
.popup__success-inner p {
	color: #fff
}

.popup.hosting-service .popup__inner,
.popup.virtual-server .popup__inner,
.popup.telephone .popup__inner,
.popup.rent .popup__inner {
	padding: 80px 190px
}

@media (max-width: 500px) {

	.popup.hosting-service .popup__inner,
	.popup.virtual-server .popup__inner,
	.popup.telephone .popup__inner,
	.popup.rent .popup__inner {
		padding: 40px 20px
	}
}

.popup .modal-content,
.popup.virtual-server .popup__form-inner,
.popup.telephone .popup__form-inner,
.popup.rent .popup__form-inner {
	/* display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
	max-width: 540px; */
	background-color: transparent;
	border-color: transparent;

}

@media (max-width: 500px) {

	.popup.hosting-service .popup__form-inner,
	.popup.virtual-server .popup__form-inner,
	.popup.telephone .popup__form-inner,
	.popup.rent .popup__form-inner {
		max-width: 341px
	}

	.popup.hosting-service .popup__form-inner p,
	.popup.virtual-server .popup__form-inner p,
	.popup.telephone .popup__form-inner p,
	.popup.rent .popup__form-inner p {
		font-size: 18px;
		line-height: 29px
	}
}

.popup.hosting-service .popup__form-inner h2,
.popup.hosting-service .popup__form-inner p,
.popup.virtual-server .popup__form-inner h2,
.popup.virtual-server .popup__form-inner p,
.popup.telephone .popup__form-inner h2,
.popup.telephone .popup__form-inner p,
.popup.rent .popup__form-inner h2,
.popup.rent .popup__form-inner p {
	color: #fff
}

.popup.hosting-service .popup__form-inner .form,
.popup.virtual-server .popup__form-inner .form,
.popup.telephone .popup__form-inner .form,
.popup.rent .popup__form-inner .form {
	margin-bottom: 0
}

.popup .modal-content input,
.popup .modal-content input::placeholder,
.popup.virtual-server .popup__form-inner .input-wrapper input,
.popup.telephone .popup__form-inner .input-wrapper input,
.popup.rent .popup__form-inner .input-wrapper input {
	color: #fff
}

.popup.hosting-service .popup__form-inner .input-wrapper input::placeholder,
.popup.virtual-server .popup__form-inner .input-wrapper input::placeholder,
.popup.telephone .popup__form-inner .input-wrapper input::placeholder,
.popup.rent .popup__form-inner .input-wrapper input::placeholder {
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	text-transform: none
}

@media (max-width: 500px) {

	.popup.hosting-service .popup__form-inner .input-wrapper input::placeholder,
	.popup.virtual-server .popup__form-inner .input-wrapper input::placeholder,
	.popup.telephone .popup__form-inner .input-wrapper input::placeholder,
	.popup.rent .popup__form-inner .input-wrapper input::placeholder {
		font-size: 16px
	}
}

.map-marker {
	display: flex;
	position: absolute;
	z-index: 2;
	flex-direction: column;
	gap: 35px;
	padding: 45px 30px;
	background-color: #151623;
	width: 100%;
	max-width: 456px;
	border-radius: 15px;
	top: 50%;
	left: 10%;
	transform: translateY(-50%)
}

.map-marker__contact {
	display: flex;
	align-items: center;
	gap: 10px
}

.map-marker__contact p {
	margin-bottom: 0;
	color: #fff
}

@media (max-width: 1440px) {
	.map-marker {
		left: 5%
	}
}

@media (max-width: 1200px) {
	.map-marker {
		left: 50%;
		transform: translate(-50%, 20%)
	}
}

@media (max-width: 500px) {
	.map-marker {
		padding: 30px;
		gap: 20px
	}
}

.select {
	position: relative;
	display: block;
	min-width: 60px
}

.select__head {
	width: 100%;
	padding: 5px;
	font-size: 18px;
	line-height: 22px;
	color: #151623;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid transparent
}

.select__head:after {
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0001 6.5H14.6701C17.9801 6.5 19.3401 8.85 17.6801 11.72L16.3401 14.03L15.0001 16.34C13.3401 19.21 10.6301 19.21 8.97005 16.34L7.63005 14.03L6.29005 11.72C4.66005 8.85 6.01005 6.5 9.33005 6.5H12.0001Z' fill='%23151623'/%3E%3C/svg%3E%0A") no-repeat center/cover;
	position: absolute;
	right: 8px;
	bottom: 50%;
	transform: translateY(50%);
	content: "";
	display: block;
	transition: .2s ease-in
}

.select__head.open {
	color: #1d4130;
	background: #fff;
	border: 1px solid #005fee;
	border-bottom: 1px solid transparent;
	border-top-right-radius: 2px;
	border-top-left-radius: 2px
}

.select__head.open:after {
	transform: translateY(50%) rotate(180deg);
	background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0001 6.5H14.6701C17.9801 6.5 19.3401 8.85 17.6801 11.72L16.3401 14.03L15.0001 16.34C13.3401 19.21 10.6301 19.21 8.97005 16.34L7.63005 14.03L6.29005 11.72C4.66005 8.85 6.01005 6.5 9.33005 6.5H12.0001Z' fill='%23005FEE'/%3E%3C/svg%3E%0A") no-repeat center/cover
}

.select__list {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border-bottom-right-radius: 2px;
	border-bottom-left-radius: 2px;
	max-height: 205px;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 100;
	margin: 0;
	padding: 0;
	font-size: 18px;
	color: #151623;
	scrollbar-color: dark;
	scrollbar-width: thin;
	overscroll-behavior: contain;
	border: 1px solid #005fee;
	border-top: none
}

.select__list::-webkit-scrollbar {
	width: 7px;
	background-color: #f8f9fa;
	padding: 5px
}

.select__list::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: #d9d9d9
}

.select__list .select__item {
	position: relative;
	padding: 5px;
	cursor: pointer;
	list-style-type: none
}

.select__list .select__item:hover {
	color: #005fee
}

.about-us .container {
	position: relative
}

.about-us__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 60px
}

@media (max-width: 1024px) {
	.about-us__inner {
		gap: 50px
	}
}

.about-us__description {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1000px;
	gap: 40px
}

.about-us .img {
	z-index: 0;
	position: absolute;
	left: 594px;
	top: -110px
}

@media (max-width: 768px) {
	.about-us .img {
		left: 0
	}
}

.about-us .img img {
	width: 1410px;
	height: 765px
}

.services .container {
	position: relative
}

.services__inner {
	z-index: 1;
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr 1fr
}

@media (max-width: 768px) {
	.services__inner {
		grid-auto-flow: row;
		gap: 50px
	}
}

.services .divider {
	position: absolute;
	height: 100%;
	border: 1px solid #005FEE;
	left: 50%;
	opacity: 1;
}

@media (max-width: 768px) {
	.services .divider.desc {
		display: none
	}
}

.services .divider.mob {
	display: none
}

@media (max-width: 768px) {
	.services .divider.mob {
		display: block;
		height: 1px;
		width: 100%;
		left: 0;
		bottom: -10px
	}
}

.services__description {
	padding-top: 50px;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: relative
}

.services__description .list {
	display: flex;
	flex-direction: column;
	gap: 10px
}

@media (max-width: 500px) {
	.services__description .list p {
		font-size: 12px
	}
}

@media (max-width: 768px) {
	.services__description {
		max-width: 100%;
		padding-top: 0
	}
}

.services .arrow-scroll {
	position: absolute;
	top: 50px;
	right: calc(50% - 50px);
	animation: float 2s ease-in-out infinite
}

@media (max-width: 1440px) {
	.services .arrow-scroll {
		right: 0
	}
}

@media (max-width: 768px) {
	.services .arrow-scroll {
		display: none
	}
}

.services__scroll {
	display: flex;
	margin-left: 50px;
	height: 600px;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none
}

.services__scroll::-webkit-scrollbar {
	display: none
}

@media (max-width: 900px) {
	.services__scroll {
		margin-left: 10px
	}
}

@media (max-width: 768px) {
	.services__scroll {
		height: max-content;
		overflow: visible;
		margin-left: 0
	}
}

.services__list {
	display: grid;
	justify-self: end;
	max-width: 570px;
	gap: 40px;
	margin-left: 10px
}

@media (max-width: 768px) {
	.services__list {
		justify-self: start;
		max-width: 100%;
		margin-left: 0
	}
}

.services__list-item {
	display: flex;
	flex-direction: column
}

.services__list-item img {
	width: 143px;
	height: 143px
}

.services__list .content {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.services__list .content .list {
	display: flex;
	flex-direction: column;
	gap: 5px
}

.services__list .content a>p {
	color: #00f
}

.services .img {
	z-index: 0;
	position: absolute;
	left: -50px;
	top: 301px
}

@media (max-width: 768px) {
	.services .img {
		left: -50px;
		top: 507px
	}
}

.services .img img {
	width: 1410px;
	height: 765px
}

.advantages .container {
	position: relative
}

.advantages__inner {
	display: flex;
	flex-direction: column;
	gap: 80px
}

@media (max-width: 768px) {
	.advantages__inner {
		gap: 60px
	}
}

.advantages__list {
	display: flex;
	justify-content: space-between;
	gap: 30px
}

@media (max-width: 768px) {
	.advantages__list {
		flex-direction: column
	}
}

.advantages__list-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px
}

.advantages .img {
	z-index: 0;
	position: absolute;
	left: 820px;
	top: -130px
}

.advantages .img img {
	width: 1140px;
	height: 765px
}

.whyWe .container {
	position: relative
}

.whyWe__inner {
	z-index: 1;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr 1fr;
	height: fit-content
}

@media (max-width: 768px) {
	.whyWe__inner {
		grid-auto-flow: row;
		gap: 70px
	}
}

.whyWe__description {
	display: flex;
	flex-direction: column;
	max-width: 658px
}

@media (max-width: 768px) {
	.whyWe__description {
		max-width: 100%
	}
}

.whyWe__description p {
	margin-top: 40px;
	margin-bottom: 60px
}

@media (max-width: 768px) {
	.whyWe__description p {
		margin-top: 30px;
		margin-bottom: 30px
	}
}

.whyWe__img {
	max-width: 570px;
	height: auto;
	justify-self: end;
	height: fit-content;
	clip-path: polygon(70% 8%, 90% 53%, 55% 90%, 10% 69%, 19% 24%);
	transition: .6s ease
}

.whyWe__img:hover {
	clip-path: polygon(100% 0, 100% 45%, 100% 100%, 0 100%, 0 0)
}

.whyWe__img:hover img {
	transform: scale(1)
}

@media (max-width: 768px) {
	.whyWe__img {
		justify-self: start
	}
}

.whyWe__img img {
	width: 100%;
	height: auto;
	transition: .6s ease;
	transform: scale(1.3)
}

.whyWe .img {
	position: absolute;
	left: 186px
}

@media (max-width: 500px) {
	.whyWe .img {
		display: none
	}
}

.whyWe .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.footer {
	position: relative;
	z-index: 2;
	background-color: #151623;
	padding: 30px 0 15px
}

@media (max-width: 768px) {
	.footer {
		margin-top: 0;
		padding: 30px 0
	}
}
.footer p {
margin-bottom: 0;
}
.footer p,
.footer a {
	color: #fff
	
}

.footer__inner {
	display: flex;
	flex-direction: column;
	gap: 30px;
	z-index: 2
}

@media (max-width: 768px) {
	.footer__inner {
		gap: 40px
	}
}

.footer__inner-navigation {
	display: flex
}

@media (max-width: 768px) {
	.footer__inner-navigation {
		flex-direction: column;
		gap: 30px
	}
}

.footer__inner-navigation__contact,
.footer__inner-navigation__menu {
	display: flex;
	flex-direction: column;
	gap: 25px
}

.footer__inner-navigation__contact-items {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.footer__inner-navigation__contact-items a {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 160%;
	font-style: normal
}

.footer__inner-navigation__contact .tt-u {
	font-size: 16px
}

.footer__inner-navigation__menu {
	max-width: 205px;
	margin-left: 180px
}

@media (max-width: 768px) {
	.footer__inner-navigation__menu {
		margin-left: 0
	}
}

.footer__inner-navigation__menu p {
	font-size: 16px
}

.footer__inner-navigation__menu-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 10px;
	column-gap: 30px
}

.footer__inner-navigation__input {
	max-width: 427px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.footer__inner-rights {
	display: flex;
	justify-content: space-between
}

@media (max-width: 500px) {
	.footer__inner-rights {
		flex-direction: column;
		gap: 20px
	}
}

.footer__inner-rights__list {
	display: flex;
	gap: 20px
}

.form-field {
	font-family: Montserrat, "sans-serif";
	display: block;
	width: 384px;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color: #fff;
	-webkit-appearance: none;
	border: none;
	background-color: transparent
}

.form-field::placeholder {
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	text-transform: none
}

.form-group {
	position: relative;
	display: flex;
	width: 100%;
	border-radius: 5px;
	border: 1px solid #2BFEFE;
	overflow: hidden
}

.form-group.has-invalid-field {
	border: 1px solid #9C1619
}

.form-group.has-invalid-field button {
	background: #74acff;
	color: #fff
}

.form-group .validation-error {
	display: none
}

.form-group button {
	color: #fff;
	font-family: Oswald, "sans-serif";
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	padding: 12px 30px;
	background: #005fee;
	border-radius: 4px;
	transition: all .3s ease
}

.form-group button:hover {
	color: #151623;
	background: #2BFEFE
}

.header {
	background: transparent;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	transition: all .2s ease, backdrop-filter .2s ease;
	padding: 15px 0;
	margin-top: 25px
}

.header-list {
	display: flex;
	align-items: center;
	gap: 60px
}

@media (max-width: 1024px) {
	.header-list {
		flex-direction: column;
		gap: 10px;
		align-items: start
	}
}

.header-list__item {
	position: relative;
	padding: 5px
}

.header-list__item.menu {
	min-width: fit-content;
	padding: 5px
}

@media (max-width: 1024px) {
	.header-list__item.menu svg {
		display: none
	}
}

.header-list__item>a {
	position: relative;
	transition: color .2s ease;
	font-family: Oswald, sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1.08px
}

.header-list__item .drop {
	min-width: 160px;
	display: none;
	z-index: 10;
	position: absolute;
	background: white;
	top: 100%;
	left: -1px;
	right: -1px;
	font-weight: 400;
	font-size: 16px;
	line-height: 17px;
	border-radius: 2px;
	border-top: none;
	box-shadow: none
}

.header-list__item .drop-item {
	position: relative;
	font-family: Oswald, sans-serif;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.08px;
	line-height: 160%;
	white-space: nowrap;
	transition: color .2s ease;
	width: fit-content
}

.header-list__item .drop-item:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	transition: width .2s linear
}

.header-list__item .drop-item:hover,
.header-list__item .drop-item.is-active {
	color: #005fee
}

.header-list__item .drop-item.is-active:after {
	width: 100%;
	background-color: #005fee
}

.header-list__item .drop-box {
	padding: 5px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 115px
}

@media (min-width: 1025px) {
	.header-list__item:hover.menu {
		border-top-right-radius: 2px;
		border-top-left-radius: 2px;
		background: #fff
	}

	.header-list__item:hover .header-nav__item {
		color: #005fee
	}

	.header-list__item:hover .header-nav__item svg {
		transform: rotate(180deg)
	}

	.header-list__item:hover .header-nav__item svg path {
		fill: #005fee
	}

	.header-list__item:hover .header-nav__item:after {
		width: 100%
	}

	.header-list__item:hover .drop {
		display: block;
		-webkit-box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, .55);
		-moz-box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, .55);
		box-shadow: 0 0 13px 3px #0000008c
	}
}

@media (max-width: 1024px) {
	.header-list__item .drop {
		display: flex;
		align-items: center;
		border: none;
		position: relative;
		padding-left: 10px
	}
}

.header-list a[class*=link] {
	position: relative;
	transition: color .2s linear;
	display: inline-flex;
	align-items: center
}

.header-list a[class*=link]:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 0;
	transition: width .2s linear
}

.header-list a[class*=link] svg {
	width: 18px;
	height: 18px
}

.header-list a[class*=link]:hover:after {
	width: 100%;
	background-color: #005fee
}

.header-nav {
	font-weight: 400;
	font-size: 16px;
	line-height: 160%;
	margin-left: auto;
	margin-right: 50px
}

@media (max-width: 1024px) {
	.header-nav {
		margin-left: 0;
		margin-right: auto;
		margin-top: 20px
	}
}

.header-nav__item[class*=link] {
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: all .2s ease
}

.header-nav__item[class*=link] svg {
	aspect-ratio: 1;
	transition: all .2s ease
}

.header-nav__item[class*=link].is-active {
	color: #005fee
}

.header-nav__item[class*=link].is-active:after {
	width: 100%;
	background-color: #005fee
}

.header.blured {
	background: white;
	margin-top: 0;
	box-shadow: 0 4px 10px #03222a26
}

.header.opened-menu .header__mobile-inner .logo {
	opacity: 0;
	transition: opacity .2s ease;
	max-width: 85px
}

.header__mobile-inner {
	display: none;
	position: relative
}

@media (max-width: 1024px) {
	.header__mobile-inner {
		display: flex;
		align-items: center;
		column-gap: 30px
	}
}

.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center
}

@media (max-width: 1200px) {
	.header__inner {
		column-gap: 10px
	}
}

@media (max-width: 1024px) {
	.header__inner {
		background-color: transparent;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 30px;
		padding: 45px var(--container_padding);
		height: 70vh;
		transform: translate(100vw);
		opacity: 0
	}

	.header__inner.open {
		transform: translate(0);
		opacity: 1;
		transition: transform .3s ease, opacity .3s ease;
		justify-content: start;
		background: var(--backgraund-light, #fff);
		box-shadow: 0 2px 10px #0b306933
	}
}

@media screen and (orientation: landscape) and (max-height: 414px) {
	.header__inner {
		height: fit-content
	}
}

.header .logo {
	max-width: 204px;
	height: 30px;
	transition: opacity .4s ease .03s
}

.header .logo img {
	width: 100%
}

.header .wrapper-menu {
	position: absolute;
	width: 20px;
	height: 20px;
	display: flex;
	right: 0;
	z-index: 2;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	transition: transform .33s ease-out
}

.header .wrapper-menu.active {
	transform: rotate(-45deg)
}

.header .line-menu {
	background-color: #00f;
	border-radius: 1px;
	width: 100%;
	height: 2px
}

.header .line-menu.half {
	width: 50%
}

.header .line-menu.start {
	align-self: flex-end;
	transition: transform .33s cubic-bezier(.54, .81, .57, .57);
	transform-origin: left
}

.header .active .line-menu.start {
	transform: rotate(90deg) translate(-1px)
}

.header .line-menu.end {
	transition: transform .33s cubic-bezier(.54, .81, .57, .57);
	transform-origin: right
}

.header .active .line-menu.end {
	transform: rotate(90deg) translate(1px)
}

body:not(.home) .header {
	background: rgba(0, 128, 0, .5)
}

.intro {
	position: relative;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center
}

.intro .bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}

@media (max-width: 1024px) {
	.intro {
		background-size: cover
	}
}

@media (max-width: 768px) {
	.intro {
		background-size: cover
	}
}

.intro__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-direction: column;
	height: 100%;
	gap: 100px
}

.intro__title {
	max-width: 845px
}

@keyframes float {

	0%,
	to {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-30px)
	}
}

.arrow {
	animation: float 2s ease-in-out infinite
}

@media (max-width: 768px) {
	.arrow.desc {
		display: none
	}
}

.arrow.abs {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translate(-50%)
}

.arrow.mob {
	display: none
}

@media (max-width: 768px) {
	.arrow.mob {
		position: absolute;
		display: block;
		bottom: 0
	}
}

.intro-about {
	position: relative;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center
}

.intro-about__inner {
	max-width: 1000px;
	display: flex;
	align-items: start;
	justify-content: start;
	position: relative;
	flex-direction: column;
	gap: 100px
}

.intro-about__title {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.intro-about .img {
	z-index: 0;
	position: absolute;
	top: 0
}

.intro-about .img img {
	width: 1410px;
	height: 765px
}

.partners .container {
	position: relative
}

.partners__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 80px
}

.partners__title {
	text-align: center
}

.partners__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 44px 0
}

@media (max-width: 1024px) {
	.partners__list {
		max-width: 700px;
		justify-content: center;
		gap: 50px;
		padding: 0
	}
}

.partners__list-item {
	max-width: 240px;
	max-height: 140px
}

.partners__list-item img {
	width: 100%;
	height: auto
}

.partners .img {
	z-index: 0;
	position: absolute;
	left: -427px;
	top: -200px
}

.partners .img img {
	width: 1410px;
	height: 765px
}

.provide .container {
	position: relative
}

.provide__inner {
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 40px
}

.provide__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px
}

@media (max-width: 768px) {
	.provide__list {
		grid-template-columns: 1fr;
		gap: 10px
	}
}

.provide__list .column {
	display: flex;
	flex-direction: column;
	gap: 10px
}

@media (max-width: 768px) {
	.provide__list .column {
		width: calc(100% - 15px);
		position: relative;
		left: 15px
	}
}

.provide__list .column li {
	list-style-position: outside;
	list-style-type: disc;
	position: relative
}

.provide__list .column li::marker {
	font-size: 10px
}

.provide .img {
	z-index: 0;
	position: absolute;
	left: 110px;
	top: -138px
}

@media (max-width: 500px) {
	.provide .img {
		display: none
	}
}

.provide .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.faq {
	position: relative;
	min-height: 100vh
}

.faq .container {
	position: relative;
	z-index: 1
}

.faq .img {
	z-index: 0;
	position: absolute;
	left: 324px;
	top: 54px
}

.faq .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.faq__inner {
	margin-top: 175px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 100px
}

@media (max-width: 500px) {
	.faq__inner {
		gap: 70px
	}
}

.faq__description {
	text-align: center
}

.faq__content {
	display: flex;
	flex-direction: column;
	gap: 70px
}

@media (max-width: 500px) {
	.faq__content {
		gap: 40px
	}
}

.faq__content-section {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.faq__content-section__list {
	display: flex;
	flex-direction: column;
	gap: 30px
}

@media (max-width: 500px) {
	.faq__content-section__list {
		gap: 15px
	}
}

@media (max-width: 500px) {
	.faq__content-section {
		gap: 20px
	}
}

.item {
	padding: 20px 0;
	border-top: 2px solid #303030;
	border-bottom: 2px solid #303030
}

.item .question {
	display: flex;
	padding: 0 15px;
	justify-content: space-between;
	align-items: center;
	width: 100%
}

@media (max-width: 500px) {
	.item .question {
		gap: 10px
	}
}

.item .question svg {
	display: flex;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	transition: transform .5s ease-out
}

.item .question .info {
	text-align: start
}

.item.open svg {
	transform: rotate(180deg)
}

.item .content {
	max-height: 0;
	overflow: hidden;
	padding: 0 15px;
	transition: max-height 1s cubic-bezier(0, 1, 0, 1)
}

.item .content p {
	text-align: left
}

.item .content p:first-child {
	margin-top: 15px
}

@media (max-width: 500px) {
	.item .content p {
		margin-top: 10px;
		font-size: 12px
	}
}

.item .content.active {
	transition: max-height 1s ease-in-out;
	max-height: 2000px
}

.hosting {
	position: relative
}

@media (max-width: 500px) {
	.hosting {
		min-height: 100%
	}
}

.hosting .container {
	position: relative;
	z-index: 1
}

.hosting .img {
	z-index: 0;
	position: absolute;
	left: 240px
}

@media (max-width: 900px) {
	.hosting .img {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.hosting .img {
		top: 80px;
		left: 20px
	}
}

.hosting .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.hosting .img2 {
	z-index: 0;
	transform: rotateY(180deg);
	bottom: -420px;
	position: absolute;
	left: 0
}

@media (max-width: 900px) {
	.hosting .img2 {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.hosting .img2 {
		top: 80px;
		left: 20px
	}
}

.hosting .img2 img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.hosting__intro {
	margin-top: 20%;
	justify-content: center;
	display: flex;
	flex-direction: column;
	gap: 40px
}

@media (max-width: 500px) {
	.hosting__intro {
		padding-top: 200px;
		height: 100%
	}
}

@media (max-width: 400px) {
	.hosting__intro {
		gap: 20px;
		padding-top: 130px
	}
}

.hosting__intro-description {
	width: 100%;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

.hosting__intro-list {
	display: flex;
	flex-direction: column;
	max-width: 900px;
	width: 100%
}

.hosting__intro-list>ul {
	display: flex;
	flex-direction: column;
	gap: 15px
}

.hosting__intro-list>ul li {
	display: inline-flex;
	align-items: start;
	gap: 10px
}

.hosting__intro-list>ul li:before {
	content: "";
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
	background-size: 24px 24px;
	background-image: url(/img/public/build/check-icon-69190395.svg);
	background-repeat: no-repeat;
	margin-top: 2px
}

@media (max-width: 500px) {
	.hosting__intro-list>ul li:before {
		height: 20px;
		width: 20px;
		background-size: 20px 20px
	}
}

@media (max-width: 500px) {
	.hosting__intro-list>ul {
		gap: 5px
	}

	.hosting__intro-list>ul .info {
		font-size: 14px
	}
}

.hosting-advantages {
	position: relative
}

.hosting-advantages.virtual .hosting-advantages__inner,
.hosting-advantages.virtual .hosting-advantages__list {
	max-width: 900px
}

.hosting-advantages .container {
	position: relative;
	z-index: 1
}

.hosting-advantages .img {
	z-index: 0;
	position: absolute;
	left: 470px;
	top: -100px
}

@media (max-width: 1024px) {
	.hosting-advantages .img {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.hosting-advantages .img {
		top: 80px;
		left: -220px
	}
}

.hosting-advantages .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.hosting-advantages__inner {
	max-width: 900px;
	display: flex;
	flex-direction: column;
	gap: 40px
}

.hosting-advantages__list {
	width: 100%
}

.hosting-advantages__list>ul {
	display: flex;
	flex-direction: column;
	gap: 25px
}

.hosting-advantages__list>ul li {
	display: inline-flex;
	align-items: start;
	gap: 10px
}

.hosting-advantages__list>ul li:before {
	content: "";
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
	background-size: 24px 24px;
	background-image: url(/img/public/build/check-icon-69190395.svg);
	background-repeat: no-repeat;
	margin-top: 2px
}

@media (max-width: 500px) {
	.hosting-advantages__list>ul li:before {
		height: 20px;
		width: 20px;
		background-size: 20px 20px
	}
}

.hosting-plan {
	position: relative
}

.hosting-plan .container {
	position: relative;
	z-index: 1
}

.hosting-plan .img {
	z-index: 0;
	position: absolute;
	transform: rotateY(180deg);
	left: -144px;
	top: -100px
}

@media (max-width: 1024px) {
	.hosting-plan .img {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.hosting-plan .img {
		top: 80px;
		left: -220px
	}
}

.hosting-plan .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.hosting-plan__inner {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.hosting-plan__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px
}

@media (max-width: 900px) {
	.hosting-plan__list {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (max-width: 600px) {
	.hosting-plan__list {
		grid-template-columns: repeat(1, 1fr)
	}
}

.hosting-plan__list-card {
	display: flex;
	flex-direction: column;
	gap: 35px;
	padding: 35px 30px;
	border: 1px solid #74ACFF;
	align-items: center;
	justify-content: space-between;
	background-color: #fff
}

.hosting-plan__list-card:nth-child(2) {
	background-color: #f1f7ff
}

.hosting-plan__list-card .card-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%
}

.hosting-plan__list-card .card-body .head {
	text-align: center
}

.hosting-plan__list-card .card-body .head h3 {
	color: #005fee;
	text-transform: none
}

.hosting-plan__list-card .card-body .content>ul {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.hosting-plan__list-card .card-body .content>ul li {
	display: inline-flex;
	align-items: start;
	gap: 10px
}

.hosting-plan__list-card .card-body .content>ul li:before {
	content: "";
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
	background-size: 24px 24px;
	background-image: url(/img/public/build/check-icon-69190395.svg);
	background-repeat: no-repeat
}

@media (max-width: 500px) {
	.hosting-plan__list-card .card-body .content>ul li:before {
		height: 20px;
		width: 20px;
		background-size: 20px 20px
	}
}

.hosting-plan__include {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.hosting-plan__include-list>ul {
	display: flex;
	flex-direction: column;
	gap: 15px
}

.hosting-plan__include-list>ul li {
	display: inline-flex;
	align-items: center;
	gap: 10px
}

.hosting-plan__include-list>ul li:before {
	content: "";
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
	background-size: 24px 24px;
	background-image: url(/img/public/build/check-icon-69190395.svg);
	background-repeat: no-repeat
}

@media (max-width: 500px) {
	.hosting-plan__include-list>ul li:before {
		height: 20px;
		width: 20px;
		background-size: 20px 20px
	}
}

.hosting-additional {
	position: relative
}

.hosting-additional .container {
	position: relative;
	z-index: 1
}

.hosting-additional .img {
	z-index: 0;
	position: absolute;
	left: 240px
}

@media (max-width: 900px) {
	.hosting-additional .img {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.hosting-additional .img {
		top: 80px;
		left: 20px
	}
}

.hosting-additional .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.hosting-additional__inner {
	display: flex;
	justify-content: space-between;
	gap: 115px
}

@media (max-width: 1024px) {
	.hosting-additional__inner {
		gap: 60px
	}
}

@media (max-width: 768px) {
	.hosting-additional__inner {
		flex-direction: column;
		gap: 30px
	}
}

.hosting-additional__img {
	max-width: 570px;
	width: 100%
}

@media (max-width: 768px) {
	.hosting-additional__img {
		max-width: 100%
	}
}

.hosting-additional__img img {
	width: 100%
}

.hosting-additional__list {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.hosting-additional__list>ul {
	display: flex;
	flex-direction: column;
	gap: 25px
}

.hosting-additional__list>ul li {
	display: inline-flex;
	align-items: center;
	gap: 10px
}

.hosting-additional__list>ul li:before {
	content: "";
	display: flex;
	flex: 0 0 auto;
	height: 24px;
	width: 24px;
	background-size: 24px 24px;
	background-image: url(/img/public/build/additional-icon-82caf813.svg);
	background-repeat: no-repeat
}

@media (max-width: 500px) {
	.hosting-additional__list>ul li:before {
		height: 20px;
		width: 20px;
		background-size: 20px 20px
	}
}

.hosting-question {
	position: relative
}

.hosting-question .container {
	position: relative;
	z-index: 1
}

.hosting-question .img {
	transform: rotateY(180deg);
	transform: rotate(180deg);
	z-index: 0;
	position: absolute;
	left: 150px;
	bottom: 0
}

@media (max-width: 900px) {
	.hosting-question .img {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.hosting-question .img {
		top: 80px;
		left: 20px
	}
}

.hosting-question .img img {
	position: relative;
	z-index: 0;
	width: 1410px;
	height: 765px
}

.hosting-question__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px
}

.hosting-question__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px;
	text-align: center
}

.privacy {
	position: relative;
	min-height: 100vh;
	padding-bottom: 110px
}

.privacy .img {
	z-index: 0;
	position: absolute;
	left: 25%;
	top: -176px
}

@media (max-width: 1024px) {
	.privacy .img {
		left: -500px;
		top: 0
	}
}

@media (max-width: 500px) {
	.privacy .img {
		left: -700px;
		top: 0
	}
}

.privacy .img img {
	width: 1410px;
	height: 765px
}

.privacy__inner {
	margin-top: 175px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 75px;
	position: relative;
	z-index: 1
}

@media (max-width: 500px) {
	.privacy__inner {
		margin-top: 60%;
		align-items: center
	}
}

.privacy__description {
	display: flex;
	flex-direction: column;
	gap: 80px
}

.privacy__description h3 {
	text-align: center
}

@media (max-width: 500px) {
	.privacy__description {
		gap: 40px
	}
}

.privacy__content {
	display: flex;
	flex-direction: column;
	gap: 70px
}

.privacy__content-section {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.privacy__content-section__list {
	display: flex;
	flex-direction: column;
	gap: 30px
}

.terms {
	position: relative;
	min-height: 100vh;
	padding-bottom: 110px
}

.terms .img {
	z-index: 0;
	position: absolute;
	left: 25%;
	top: -176px
}

@media (max-width: 1024px) {
	.terms .img {
		left: -500px;
		top: 0
	}
}

@media (max-width: 500px) {
	.terms .img {
		left: -700px;
		top: 0
	}
}

.terms .img img {
	width: 1410px;
	height: 765px
}

.terms__inner {
	margin-top: 175px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 75px;
	position: relative;
	z-index: 1
}

@media (max-width: 500px) {
	.terms__inner {
		margin-top: 60%;
		align-items: center
	}
}

.terms__description {
	display: flex;
	flex-direction: column;
	gap: 80px
}

.terms__description h3 {
	text-align: center
}

@media (max-width: 500px) {
	.terms__description {
		gap: 40px
	}
}

.terms__content {
	display: flex;
	flex-direction: column;
	gap: 70px
}

.terms__content-section {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.terms__content-section__list {
	display: flex;
	flex-direction: column;
	gap: 30px
}

.contacts {
	position: relative;
	min-height: 100vh;
	padding-bottom: 110px
}

.contacts__map {
	width: 100%;
	position: relative
}

.contacts__map iframe {
	width: 100%;
	height: 500px
}

@media (max-width: 1200px) {
	.contacts__map {
		margin-bottom: 120px
	}

	.contacts__map iframe {
		height: 350px
	}
}

@media (max-width: 500px) {
	.contacts {
		padding-bottom: 80px
	}
}

.contacts .img {
	z-index: 0;
	position: absolute;
	left: 324px;
	bottom: -200px
}

@media (max-width: 1024px) {
	.contacts .img {
		left: -500px;
		bottom: -195px
	}
}

@media (max-width: 500px) {
	.contacts .img {
		left: -700px;
		bottom: -195px
	}
}

.contacts .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.contacts__inner {
	position: relative;
	z-index: 1;
	margin-top: 175px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 40px
}

.contacts h2 {
	text-align: center
}

.contacts__content {
	display: flex;
	flex-direction: column;
	gap: 70px
}

.contacts__content-section {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.contacts__content-section__list {
	display: flex;
	flex-direction: column;
	gap: 30px
}

.services-page {
	position: relative
}

.services-page .container {
	position: relative;
	z-index: 1
}

.services-page .img {
	z-index: 0;
	position: absolute;
	left: 240px
}

@media (max-width: 900px) {
	.services-page .img {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.services-page .img {
		top: 80px;
		left: 20px
	}
}

.services-page .img img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.services-page .img2 {
	z-index: 0;
	transform: rotate(180deg);
	bottom: -220px;
	position: absolute;
	left: 0
}

@media (max-width: 900px) {
	.services-page .img2 {
		top: 50px;
		left: 140px
	}
}

@media (max-width: 768px) {
	.services-page .img2 {
		top: 80px;
		left: 20px
	}
}

.services-page .img2 img {
	z-index: 0;
	width: 1410px;
	height: 765px
}

.services-page__intro {
	margin-top: 20%;
	position: relative;
	justify-content: center;
	display: flex;
	flex-direction: column;
	gap: 40px
}

@media (max-width: 400px) {
	.services-page__intro {
		gap: 20px;
		padding-top: 30px
	}
}

.services-page__intro-description {
	width: 100%;
	max-width: 770px;
	display: flex;
	flex-direction: column;
	gap: 10px
}

@media (max-width: 500px) {
	.services-page__intro-description {
		gap: 5px
	}

	.services-page__intro-description .info {
		font-size: 14px
	}
}

.services-page__intro-list {
	display: flex;
	flex-direction: column;
	max-width: 541px;
	width: 100%
}

@media (max-width: 500px) {
	.services-page__intro-list {
		display: none
	}
}

.services-page__collocation,
.services-page__electrical,
.services-page__parametres,
.services-page__cooling,
.services-page__security {
	display: flex;
	gap: 115px;
	justify-content: space-between;
	position: relative;
	padding: 110px 0
}

@media (max-width: 900px) {

	.services-page__collocation,
	.services-page__electrical,
	.services-page__parametres,
	.services-page__cooling,
	.services-page__security {
		flex-direction: column;
		gap: 50px;
		padding: 55px 0
	}
}

.services-page__collocation-content,
.services-page__electrical-content,
.services-page__parametres-content,
.services-page__cooling-content,
.services-page__security-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 655px;
	position: relative;
	z-index: 2
}

@media (max-width: 900px) {

	.services-page__collocation-content,
	.services-page__electrical-content,
	.services-page__parametres-content,
	.services-page__cooling-content,
	.services-page__security-content {
		max-width: 100%
	}
}

.services-page__collocation-list,
.services-page__electrical-list,
.services-page__parametres-list,
.services-page__cooling-list,
.services-page__security-list {
	display: flex;
	flex-direction: column;
	gap: 25px
}

.services-page__collocation-list div,
.services-page__electrical-list div,
.services-page__parametres-list div,
.services-page__cooling-list div,
.services-page__security-list div {
	display: flex;
	gap: 10px;
	align-items: center
}

.services-page__collocation-list div span,
.services-page__electrical-list div span,
.services-page__parametres-list div span,
.services-page__cooling-list div span,
.services-page__security-list div span {
	display: inline-flex;
	align-items: center
}

.services-page__collocation-list div svg,
.services-page__electrical-list div svg,
.services-page__parametres-list div svg,
.services-page__cooling-list div svg,
.services-page__security-list div svg {
	width: 24px;
	height: 24px
}

@media (max-width: 500px) {

	.services-page__collocation-list div svg,
	.services-page__electrical-list div svg,
	.services-page__parametres-list div svg,
	.services-page__cooling-list div svg,
	.services-page__security-list div svg {
		width: 20px;
		height: 20px
	}
}

.services-page__collocation-image,
.services-page__electrical-image,
.services-page__parametres-image,
.services-page__cooling-image,
.services-page__security-image {
	display: block;
	width: 100%;
	max-width: 570px;
	position: relative;
	z-index: 2
}

.services-page__collocation-image img,
.services-page__electrical-image img,
.services-page__parametres-image img,
.services-page__cooling-image img,
.services-page__security-image img {
	min-width: 570px;
	width: 100%;
	max-height: 380px
}

@media (max-width: 900px) {

	.services-page__collocation-image img,
	.services-page__electrical-image img,
	.services-page__parametres-image img,
	.services-page__cooling-image img,
	.services-page__security-image img {
		max-width: 100%;
		min-width: 100%
	}
}

@media (max-width: 900px) {

	.services-page__collocation-image,
	.services-page__electrical-image,
	.services-page__parametres-image,
	.services-page__cooling-image,
	.services-page__security-image {
		max-width: 100%
	}
}

.services-page__collocation .img {
	position: absolute;
	top: 110px;
	left: 236px
}

@media (max-width: 900px) {
	.services-page__collocation .img {
		top: 0;
		left: -20px
	}
}

@media (max-width: 900px) {

	.services-page__parametres,
	.services-page__cooling {
		flex-direction: column-reverse;
		gap: 50px
	}
}

.services-page__parametres .img {
	position: absolute;
	top: 0;
	left: 106px
}

@media (max-width: 900px) {
	.services-page__parametres .img {
		top: 0;
		left: -320px
	}
}

.services-page__electrical .img {
	position: absolute;
	top: 120px;
	left: 106px;
	transform: rotateX(180deg);
	transform: rotateY(180deg)
}

@media (max-width: 900px) {
	.services-page__electrical .img {
		top: 0;
		left: -320px
	}
}

.services-page__security .img {
	position: absolute;
	top: 300px;
	left: 106px;
	transform: rotateX(180deg);
	transform: rotateY(180deg)
}

@media (max-width: 900px) {
	.services-page__security .img {
		top: 0;
		left: -120px
	}
}

.services-page__cooling .img {
	position: absolute;
	top: 320px;
	left: 106px;
	transform: rotateY(180deg)
}

@media (max-width: 900px) {
	.services-page__cooling .img {
		top: 0;
		left: -320px
	}
}

.services-page__advantages {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 110px 0
}

@media (max-width: 900px) {
	.services-page__advantages {
		padding: 55px 0
	}
}

.services-page__advantages-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px
}

@media (max-width: 500px) {
	.services-page__advantages-list {
		grid-template-columns: 1fr
	}
}

.services-page__advantages-list .column {
	display: flex;
	flex-direction: column;
	gap: 25px
}

.services-page__advantages-list .column div {
	display: flex;
	gap: 10px;
	align-items: center
}

.services-page__advantages-list .column div span {
	display: inline-flex;
	align-items: center
}

.services-page__advantages-list .column div svg {
	width: 24px;
	height: 24px
}

@media (max-width: 500px) {
	.services-page__advantages-list .column div svg {
		width: 20px;
		height: 20px
	}
}

.notfound {
	position: relative;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center
}

.notfound__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	gap: 180px
}

@media screen and (orientation: landscape) and (max-height: 414px) {
	.notfound__inner {
		gap: 85px
	}
}

@media (max-width: 768px) {
	.notfound__inner {
		gap: 115px
	}
}

.notfound__inner h1 {
	font-size: 120px
}

@media (max-width: 768px) {
	.notfound__inner h1 {
		font-size: 100px
	}
}

.notfound .img {
	z-index: 0;
	position: absolute;
	top: 0
}

@media (max-width: 500px) {
	.notfound .img.wire {
		top: 150px
	}

	.notfound .img.wire img {
		width: 744px;
		height: 254px
	}
}

#map {
	height: 400px;
	width: 100%
}

svg.isometric-svg {
	width: 100%;
	height: 88vh;
}

.circle:hover{
	fill: #005FED;
}
.circle:hover .circle-info {
    fill: #fff;
}