/* Common styles */
  .flex {
	display: flex;
  }

  .flex-column {
	flex-direction: column;
  }

  .space-between {
	justify-content: space-between;
  }

  .justify-center {
	justify-content: center;
  }

  .align-center {
	align-items: center;
  }


  html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: hidden;
  }
  
  body {
	font-family: 'Montserrat';
	font-size: 16px;
	color: var(--color-black);
	overflow-x: hidden
  }

  h1 {
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
  }

  h1 span {
	color: var(--color-light-blue);
  }

  h2 {
	font-size: 40px;
	line-height: 48px;
	color: var(--color-black);
	font-weight: bold;
	margin-bottom: 38px;
  }

  .btn,
  input[type="submit"].btn-blue,
  input[type="button"].btn-blue {
	font-size: 14px;
	font-family: 'PlusJakartaSans', 'Montserrat', sans-serif;
	font-style: normal;
  	font-display: swap;
	font-weight: 700;
	border-radius: 68px;
	padding: 23px 48px;
	display: inline-block;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	z-index: 0;
	--btn-fill: currentColor;
	transition: color .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
  }

  input[type="submit"].btn-blue,
  input[type="button"].btn-blue {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	box-sizing: border-box;
  }

  .btn::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: var(--btn-fill);
	transform: scale(0);
	transform-origin: center;
	opacity: 0;
	transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), opacity .2s ease;
	z-index: -1;
  }

  .btn:hover::before,
  .btn:focus-visible::before,
  .btn:focus::before {
	transform: scale(1);
	opacity: 1;
  }

  .btn-blue {
	color: var(--color-white);
	background-color: var(--color-light-blue);
	--btn-fill: #1b64c6;
  }

  /* Как у .blog-item .read-more-btn: тёмно-синяя заливка из центра */
  .btn-blue:hover::before,
  .btn-blue:focus-visible::before {
	transform: scale(1);
	opacity: 1;
  }

  .btn-blue:hover,
  .btn-blue:focus-visible {
	color: var(--color-white);
  }

  /*
   * input[type=submit|button] нерисует ::before/::after — заливка «из центра» недоступна.
   * Тот же финальный цвет, что у .btn-blue после hover (#1b64c6).
   */
  input[type="submit"].btn-blue:hover,
  input[type="submit"].btn-blue:focus-visible,
  input[type="button"].btn-blue:hover,
  input[type="button"].btn-blue:focus-visible {
	background-color: #1b64c6;
	color: var(--color-white);
  }

  .btn-blue-shadow {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
	line-height: 110%;
	background: linear-gradient(113.28deg, #95AAFF -1.93%, #2380FF 51.34%, #1B64C6 112.67%), #FF6860;
	box-shadow: 0px 4px 0px #1B64C6;
  }

  .btn-red {
	color: var(--color-white);
	background-color: var(--color-red);
	--btn-fill: #d22645;
	box-shadow: 0px 4px 0px #D32834;
  }

  input:not([type="submit"]):focus::placeholder,
  textarea:focus::placeholder {
	opacity: 0;
	transition: .2s;
  }

  input[type="submit"] {
	cursor: pointer;
  }

  @media screen and (max-width: 1199px) {

	h2 {
		font-size: 34px;
		margin-bottom: 20px;
	}
  }

  @media screen and (max-width: 991px) {
	h1 {
		font-size: 28px;
		line-height: 110%;
	}

	h2 {
		font-size: 24px;
		line-height: 100%;
		margin-bottom: 21px;
	}
  }

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}