*,
*:before,
*:after {
	box-sizing: border-box;
}

:root {
	/* Primary colors */
	--theme-color-accent: #f12c4c;
	--theme-color-secondary: #1f2f3e;
	--theme-color-style3: #ffffff;
	--theme-color-style4: #1f2841;
	--theme-body-bg: #090f1e;
	--theme-body-color: #ffffff;
	--theme-a-color: #0958c6;
	--theme-section-bg: #1f2f3e;
	--theme-section-border-color: #f12c4c;

	/* Additional colors */
	--color-orange: #ff6b35;
	--color-orange-light: #f7931e;
	--color-green: #10b981;
	--color-red: #f44336;
	--color-blue: #4a9eff;
	--color-gray-light: #e0e0e0;
	--color-gray-medium: #b0b0b0;
	--color-gray-dark: #5e6a7a;
	--color-gray-darker: #2a3a5a;
	--color-text-muted: #6b7280;
	--color-text-secondary: #9aa4b2;
	--color-text-tertiary: #aab4c0;
	--color-border-light: #e5e7eb;
	--color-border-dark: #1f2937;
	--color-success: #4caf50;
	--color-warning: #fcb900;
	--color-info: #0693e3;
	--theme-header-text-color: #FFFFFF;

	/* Gradients */
	--gradient-orange: linear-gradient(135deg, var(--color-orange), var(--color-orange-light));
	--gradient-primary: linear-gradient(135deg, var(--theme-color-accent), var(--theme-buttons-accent-bg-hover));

	/* Sizes and margins */
	--theme-heading-margin-bottom: 16px;
	--border-radius-sm: 4px;
	--border-radius-md: 8px;
	--border-radius-lg: 12px;
	--border-radius-xl: 999px;
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 16px;
	--spacing-xl: 20px;
	--spacing-2xl: 24px;
	--theme-margin-section: 20px;
	--theme-margin-section-mob: 20px;
	--theme-block-padding: 30px;
	--theme-block-padding-mob: 16px;
	--theme-p-margin-bottom: 16px;
	--theme-block-margin-bottom: 32px;

	/* Shadows */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 6px 18px rgba(0, 0, 0, 0.25);
	--shadow-lg: 12px 12px 50px rgba(0, 0, 0, 0.4);

	/* Buttons */
	--theme-buttons-accent-bg: #f12c4c;
	--theme-buttons-accent-bg-hover: #f24662;
	--theme-buttons-secondary-bg: #f12c4c;
	--theme-buttons-secondary-bg-hover: #f24662;
	--theme-buttons-secondary-color: #ffffff;
	--theme-buttons-style3-bg: #1f2841;
	--theme-buttons-style3-bg-hover: #29324b;
	--theme-buttons-outline-border: #0958c6;
	--theme-buttons-outline-bg-hover: #29324b;
	--theme-buttons-outline-color: #ffffff;

	/* Title and footer */
	--theme-header-bg: #090f1e;
	--theme-color-border-header: #090f1e;
	--theme-footer-bg: #141b2e;
	--theme-footer-hr-color: #9297a3;
	--theme-footer-text-color: #fff;
	--theme-footer-menu-color: #9297a3;
	--theme-footer-hr-color: #23345e;

	/* Smoothing corners */
	--theme-rounded-section: 20px;
	--theme-rounded-button: 15px;
	--theme-rounded-images: 15px
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	background-color: var(--theme-body-bg);
	color: var(--theme-body-color)
}

.container {
	max-width: 1280px;
	width: 100%;
	padding-right: 12px;
	padding-left: 12px;
	margin: auto;
}

p {
	margin-top: 0;
	margin-bottom: var(--theme-p-margin-bottom)
}

h1,
h2,
h3,
h4,
h5,
h3 {
	font-family: 'Roboto Flex', sans-serif;
	margin-top: 0;
	margin-bottom: var(--theme-heading-margin-bottom);
	font-weight: 500;
	line-height: 1.2;
}

h1 {
	font-size: 32px;
	font-weight: 900
}

h2 {
	font-size: 28px;
	font-weight: 800
}

h3 {
	font-size: 20px;
	font-weight: 700
}

h4,
h5,
h6 {
	font-size: 16px;
	font-weight: 600
}

img,
svg {
	vertical-align: middle;
	max-width: 100%;
	height: auto
}

table {
	caption-side: bottom;
	border-collapse: collapse
}

caption {
	padding-top: .5rem;
	padding-bottom: .5rem;
	color: #6c757d;
	text-align: left
}

th {
	text-align: inherit;
	text-align: -webkit-match-parent
}

thead,
tbody,
tfoot,
tr,
td,
th {
	border-color: inherit;
	border-style: solid;
	border-width: 0
}

label {
	display: inline-block
}

input,
button,
select,
optgroup,
textarea {
	margin: 0;
	font-size: inherit;
	line-height: inherit
}

a {
	color: var(--theme-a-color);
	text-decoration: none !important
}

a:hover {
	color: var(--theme-a-color)
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none
}