/* ============================================================= */
/*                     Design System Tokens                     */
/* ============================================================= */

/* Colors */
:root {
	/* Brand Colors */
	--color-brand-orange-50: #fff1eb;
	--color-brand-orange-100: #ffd6c7;
	--color-brand-orange-200: #ffb39a;
	--color-brand-orange-300: #ff916b;
	--color-brand-orange-400: #ff6f3d;
	--color-brand-orange-500-primary: #ff561d;
	--color-brand-orange-600: #e94b17;
	--color-brand-orange-700: #c94114;
	--color-brand-orange-800: #a73711;
	--color-brand-orange-900: #7f2b0d;
	--color-brand-orange-950: #4a1908;
	--color-brand-orange-1000: #372924;

	/* Base Colors */
	--color-base-white: #ffffff;
	--color-base-black: #111111;
	--color-black-300: #050505;

	/* Neutral Colors */
	--color-neutral-gray-50: #f6f7f9;
	--color-neutral-gray-100: #e9ecf0;
	--color-neutral-gray-200: #e4e4e7;
	--color-neutral-gray-300: #dbdee3;
	--color-neutral-gray-400: #999da6;
	--color-neutral-gray-500: #b1b1b4;
	--color-neutral-gray-600: #444444;
	--color-neutral-gray-700: #494e54;
	--color-neutral-gray-800: #2c2c2c;
	--color-neutral-gray-900: #212121;

	/* State Colors */
	--color-state-green: #4caf50;
	--color-state-red: #f44336;
	--color-state-yellow: #ff9800;

	/* Background Colors */
	--bg-dark-100: var(--color-neutral-gray-800);
	--bg-dark-200: var(--color-neutral-gray-900);
	--bg-light-100: var(--color-neutral-gray-50);
	--bg-light-200: var(--color-neutral-gray-100);
	--bg-light-300: var(--color-neutral-gray-300);
	--bg-white: var(--color-base-white);
	--bg-orange-400: var(--color-brand-orange-400);
	--bg-orange-800: var(--color-brand-orange-800);
	--bg-orange-1000: var(--color-brand-orange-1000);
	--bg-dark-300: var(--color-black-300);

	/* Icon Colors */
	--icon-light-200: var(--color-neutral-gray-400);
	--icon-light-100: var(--color-neutral-gray-300);
	--icon-dark: var(--color-base-black);
	--icon-white: var(--color-base-white);
	--icon-accent: var(--color-brand-orange-500-primary);

	/* Border Colors */
	--border-light: var(--color-neutral-gray-200);
	--border-dark-100: var(--color-neutral-gray-700);
	--border-dark-200: var(--color-base-black);
	--border-orange-primary: var(--color-brand-orange-500-primary);
	--border-white: var(--color-base-white);

	/* Button Colors */
	--button-primary: var(--color-brand-orange-500-primary);
	--button-secondary: var(--color-neutral-gray-900);
	--button-primary-hover: var(--color-neutral-gray-700);
	--button-secondary-hover: var(--color-brand-orange-700);
	--button-outline-dark: var(--color-neutral-gray-900);
	--button-outline-white: var(--color-base-white);

	/* Toggle Colors */
	--toggle-white: var(--color-base-white);
	--toggle-light: var(--color-neutral-gray-400);
	--toggle-dark-200: var(--color-base-black);

	/* Status Colors */
	--status-warning: var(--color-state-yellow);
	--status-success: var(--color-state-green);
	--status-error: var(--color-state-red);

	/* ============================================================= */
	/*                      Font Settings                           */
	/* ============================================================= */

	/* Font Families */
	--font-family-body: "Golos Text", sans-serif;
	--font-family-title: "Poppins", sans-serif;

	/* Font Sizes */
	--font-size-12: 12px;
	--font-size-14: 14px;
	--font-size-16: 16px;
	--font-size-18: 18px;
	--font-size-20: 20px;
	--font-size-22: 22px;
	--font-size-24: 24px;
	--font-size-30: 30px;
	--font-size-32: 32px;
	--font-size-36: 36px;
	--font-size-38: 38px;
	--font-size-40: 40px;
	--font-size-42: 42px;
	--font-size-46: 46px;
	--font-size-52: 52px;
	--font-size-56: 56px;
	--font-size-72: 72px;

	/* Font Weights */
	--font-weight-regular-400: 400;
	--font-weight-medium-500: 500;
	--font-weight-semibold-600: 600;
	--font-weight-bold-700: 700;
	--font-weight-extrabold-800: 800;

	/* Line Heights */
	--font-lineheight-18-12: 18px;
	--font-lineheight-20-14: 20px;
	--font-lineheight-22-16: 22px;
	--font-lineheight-24-18: 24px;
	--font-lineheight-26-16: 26px;
	--font-lineheight-28-18: 28px;
	--font-lineheight-30-22: 30px;
	--font-lineheight-38-30: 38px;
	--font-lineheight-32-20-24: 32px;
	--font-lineheight-44-36: 44px;
	--font-lineheight-48-38: 48px;
	--font-lineheight-52-42: 52px;
	--font-lineheight-58-46: 58px;
	--font-lineheight-64-52: 64px;
	--font-lineheight-68-56: 68px;
	--font-lineheight-84-72: 84px;
	
}
@font-face {
	font-family: "Golos Text";
	src: url("/wp-content/themes/jetruby-wordpress-template/assets/fonts/golos-500-subset.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
/* ============================================================= */
/*                        Utility Classes                       */
/* ============================================================= */

/* Text Colors */
.text-primary {
	color: var(--text-primary);
}
.text-white {
	color: var(--color-base-white);
}
.text-secondary-light {
	color: var(--text-secondary-light);
}
.text-secondary-dark {
	color: var(--text-secondary-dark);
}
.text-accent {
	color: var(--color-brand-orange-500-primary);
}
.color-neutral-gray-600 {
	color: var(--color-neutral-gray-600)
}
.color-brand-orange-500-primary {
	color:var(--color-brand-orange-500-primary);
}
/* Background Colors */
.bg-dark-100 {
	background-color: var(--bg-dark-100);
}
.bg-dark-200 {
	background-color: var(--bg-dark-200);
}
.bg-dark-300 {
	background-color: var(--bg-dark-300);
}
.bg-light-100 {
	background-color: var(--bg-light-100);
}
.bg-light-200 {
	background-color: var(--bg-light-200);
}
.bg-light-300 {
	background-color: var(--bg-light-300);
}
.bg-white {
	background-color: var(--bg-white);
}
.bg-orange-400 {
	background-color: var(--bg-orange-400);
}
.bg-orange-800 {
	background-color: var(--bg-orange-800);
}
.bg-orange-1000 {
	background-color: var(--bg-orange-1000);
}
.bg-dark {
	background-color: var(--bg-dark-100);
}

/* Icon Colors */
.icon-light-200 {
	color: var(--icon-light-200);
}
.icon-light-100 {
	color: var(--icon-light-100);
}
.icon-dark {
	color: var(--icon-dark);
}
.icon-white {
	color: var(--icon-white);
}
.icon-accent {
	color: var(--icon-accent);
}

/* Button Colors */
.btn {
	font-family: var(--font-family-body);
	cursor: pointer;
}
.button-primary {
	background-color: var(--button-primary);
	color: var(--color-base-white);
}
.button-secondary {
	background-color: var(--button-secondary);
	color: var(--color-base-white);
}
.button-primary:hover {
	background-color: var(--button-primary-hover);
}
.button-secondary:hover {
	background-color: var(--button-secondary-hover);
}

/* Border Colors */
.border-light {
	border: 1px solid var(--border-light);
}
.border-dark-100 {
	border: 1px solid var(--border-dark-100);
}
.border-dark-200 {
	border: 1px solid var(--border-dark-200);
}
.border-orange-primary {
	border: 1px solid var(--border-orange-primary);
}
.border-white {
	border: 1px solid var(--border-white);
}

/* Toggle Colors */
.toggle-white {
	background-color: var(--toggle-white);
}
.toggle-light {
	background-color: var(--toggle-light);
}
.toggle-dark-200 {
	background-color: var(--toggle-dark-200);
}

/* Status Colors */
.status-warning {
	background-color: var(--status-warning);
}
.status-success {
	background-color: var(--status-success);
}
.status-error {
	background-color: var(--status-error);
}

/* ============================================================= */
/*                     Typography Styles                        */
/* ============================================================= */

/* Headings */
.heading-h1-medium, h1, .h1 {
	font-family: var(--font-family-title);
	font-size: var(--font-size-52);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-64-52);
}

.heading-h2, h2, .h2 {
	font-family: var(--font-family-title);
	font-size: var(--font-size-42);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-52-42);
}

.heading-h3, h3, .h3 {
	font-family: var(--font-family-title);
	font-size: var(--font-size-30);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-38-30);
}

.heading-h4, h4, .h4 {
	font-family: var(--font-family-title);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-30-22);
}

.heading-h5, h5, .h5 {
	font-family: var(--font-family-title);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-26-16-18);
}

/* Body */
.body-small, .section-subtitle {
	font-family: var(--font-family-body);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular-400);
	line-height: var(--font-lineheight-20-14);
}

.body-regular {
	font-family: var(--font-family-body);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-regular-400);
	line-height: var(--font-lineheight-26-16);
}
.body-regular-600 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-26-16);
}
.body-primary {
	font-family: var(--font-family-body);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-regular-400);
	line-height: var(--font-lineheight-28-18);
}
.body-primary-500, .title-text {
	font-family: var(--font-family-body);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium-500);
	line-height: var(--font-lineheight-28-18);
}
.body-primary-600 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-semibold-600);
	line-height: var(--font-lineheight-28-18);
}
.body-large {
	font-family: var(--font-family-body);
	font-size: var(--font-size-20);
	font-weight: var(--font-weight-regular-400);
	line-height: var(--font-lineheight-32-20-24);
}
.body-extralarge {
	font-family: var(--font-family-body);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-regular-400);
	line-height: var(--font-lineheight-32-20-24);
}
.body-large-500 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-20);
	font-weight: var(--font-weight-medium-500);
	line-height: var(--font-lineheight-32-20-24);
}
.body-extrasmall-500 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-medium-500);
	line-height: var(--font-lineheight-18-12);
}
.body-extrasmall-400 {
	font-family: var(--font-family-body);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-regular-400);
	line-height: var(--font-lineheight-18-12);
}
.section-subtitle {
	color: var(--color-neutral-gray-600)
}
.section {
	margin-top: 140px;
}
ul {
	padding: 0;
}
.d-f {
	display: flex;
}
.fd-c {
	display: flex;
	flex-direction: column;
}
.d-g {
	display: grid;
}
.gap-0, .gap-0.section-head__container {
	gap:0;
}
.gap-16 {
	gap: 16px;
}
.gap-24 {
	gap: 24px;
}
.gap-40 {
	gap: 40px;
}
.col-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.col-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
.col-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.p-12 {
	padding: 12px;
}
.p-16 {
	padding: 16px;
}
.p-24 {
	padding: 24px;
}
.p-32 {
	padding: 32px;
}
.p-64 {
	padding: 64px;
}
.m-0 {
	margin: 0;
}
.radius-8 {
	border-radius: 8px;
}
.radius-16 {
	border-radius: 16px;
}
.radius-20 {
	border-radius: 20px;
}
.radius-24 {
	border-radius: 24px;
}
.radius-32 {
	border-radius: 32px;
}
.marker-lightgrey {
	list-style: disc;
	padding-left: 12px;
}
.marker-lightgrey li::marker {
	color: var(--color-neutral-gray-400);
}
.container.container-1350, .container-1350 {
	max-width: 1390px;
}
.container-1350.p-64 {
	max-width: 1222px;
}
.p-64 p {
	margin-top: 0;
}
img {
	max-width: 100%;
}
a, button {
	transition: .3s ease-in-out;
}
.pos-r {
	position: relative;
}
.btn {
  padding: 16px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  width: fit-content;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  font-family: "Golos Text", sans-serif;
}
.btn-orange {
  background-color: #FF561D;
  color: #fff;
}
.button-orange:hover, .btn:hover {
  background-color: #EB420A;
  border: 1px solid #EB420A;
}
@media (max-width:1024px) {
	.heading-h1-medium, h1, .h1 {
	font-size: var(--font-size-46);
	line-height: var(--font-lineheight-58-46);
 }
	.heading-h2, h2, .h2 {
	font-size: var(--font-size-38);
	line-height: var(--font-lineheight-48-38);
}
	.p-64 {
  padding: 32px;
}
}
@media (max-width:768px) {
		.heading-h1-medium, h1, .h1 {
	font-size: var(--font-size-36);
	line-height: var(--font-lineheight-44-36);
 }
	.heading-h2, h2, .h2 {
	font-size: var(--font-size-30);
	line-height: var(--font-lineheight-38-30);
}
.heading-h4, h4, .h4 {
	font-size: var(--font-size-20);
	line-height: var(--font-lineheight-28-18);
}
}