/*----------------------------------------------

[Core CSS]

Theme   : Shock
Version : 1.0.0
Author  : Codings
Support : codings.dev

----------------------------------------------*/

/*----------------------------------------------

[Content Index]

1. General
2. Layout
3. Color
4. Style
5. Animation
6. Hover
7. Helper

----------------------------------------------*/

/*----------------------------------------------
1. General
----------------------------------------------*/

/* #region General */

body {
	width: 100%;
	height: 100%;
  margin: 0;
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--gray-color);
}

a {
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

ol, ul {
  padding-left: 1.2rem;
}

ol, ul, dl {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

ol:last-child, ul:last-child, dl:last-child {
	margin-bottom: 0;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

ol {
	list-style-type: none;
	counter-reset: item;
}

ol > li, ul > li {
	margin: 0.5rem 0;
}

ol > li:first-child, ul > li:first-child,
ol > li:last-child, ul > li:last-child {
	margin: 0;
}

ol > li {
	counter-increment: item;
}

ol > li::before {
	content: counters(item, ".") ". ";
	margin-left: -1.2rem;
	font-weight: 700;
}

li ol > li::before {
	content: counters(item, ".") " ";
	margin-right: 5px;
}

mark, .mark {
  padding: 0;
}

.blockquote {
	position: relative;
	width: fit-content;
	margin: 3rem auto 3rem 0;
  font-size: inherit;
	color: inherit;
}

.blockquote:last-child {
	margin-bottom: 0;
}

.figure {
	width: 100%;
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: block;
}

.figure .image {
	width: 100%;
  display: block;
}

img, svg {
  vertical-align: middle;
}

@media (max-width: 991px) {	
	.blockquote {
		margin: 1.5rem auto 1.5rem 0;
	}
}

/* #endregion General */

/*----------------------------------------------
2. Layout
----------------------------------------------*/

/* #region Layout */

@media (min-width: 1200px) {
	.max-w-85 { max-width: 85% !important; }
}
.g-3 { --bs-gutter-x: calc( 3rem / 2 ) !important; }
.g-3 { --bs-gutter-y: calc( 3rem / 2 ) !important; }
.g-4 { --bs-gutter-x: calc( 4rem / 2 ) !important; }
.g-4 { --bs-gutter-y: calc( 4rem / 2 ) !important; }
.g-5 { --bs-gutter-x: calc( 5rem / 2 ) !important; }
.g-5 { --bs-gutter-y: calc( 5rem / 2 ) !important; }

@media (min-width: 768px) {
	.g-3 { --bs-gutter-x: 3rem !important; }
	.g-3 { --bs-gutter-y: 3rem !important; }
	.g-4 { --bs-gutter-x: 4rem !important; }
	.g-4 { --bs-gutter-y: 4rem !important; }
	.g-5 { --bs-gutter-x: 5rem !important; }
	.g-5 { --bs-gutter-y: 5rem !important; }
}
.mb-0 { margin-bottom: 0 !important; }
.me-2 { margin-right: calc( 2rem / 2 ) !important; }
.mb-2 { margin-bottom: calc( 2rem / 2 ) !important; }
.mt-3 { margin-top: calc( 3rem / 2 ) !important; }
.mb-3 { margin-bottom: calc( 3rem / 2 ) !important; }
.mt-4 { margin-top: calc( 4rem / 2 ) !important; }
.mb-4 { margin-bottom: calc( 4rem / 2 ) !important; }
.mt-5 { margin-top: calc( 5rem / 2 ) !important; }

@media (min-width: 768px) {
	.me-2 { margin-right: 2rem !important; }
	.mb-2 { margin-bottom: 2rem !important; }
	.mt-3 { margin-top: 3rem !important; }
	.mb-3 { margin-bottom: 3rem !important; }
	.mt-4 { margin-top: 4rem !important; }
	.mb-4 { margin-bottom: 4rem !important; }
	.mt-5 { margin-top: 5rem !important; }
}

.p-0 { padding: 0 !important; }
.pb-5 { padding-bottom: calc( 5rem / 2 ) !important; }

@media (min-width: 768px) {
	.pb-5 { padding-bottom: 5rem !important; }
}
.align-v-bottom { display: flex; align-items: flex-end !important; }

/* #endregion Layout */

/*----------------------------------------------
3. Color
----------------------------------------------*/

/* #region Color */

.primary { --color: var(--primary-color) !important; }
.primary-hover { --hover-color: var(--primary-color) !important; }

.primary-15 { --color: var(--primary-15-color) !important; }

.primary-25 { --color: var(--primary-25-color) !important; }

.primary-50 { --color: var(--primary-50-color) !important; }

.primary-75 { --color: var(--primary-75-color) !important; }

.secondary { --color: var(--secondary-color) !important; }

.secondary-15 { --color: var(--secondary-15-color) !important; }

.secondary-25 { --color: var(--secondary-25-color) !important; }

.secondary-50 { --color: var(--secondary-50-color) !important; }

.secondary-75 { --color: var(--secondary-75-color) !important; }

.tertiary { --color: var(--tertiary-color) !important; }

.tertiary-15 { --color: var(--tertiary-15-color) !important; }

.tertiary-25 { --color: var(--tertiary-25-color) !important; }

.tertiary-50 { --color: var(--tertiary-50-color) !important; }

.tertiary-75 { --color: var(--tertiary-75-color) !important; }

.accent { --color: var(--accent-color) !important; }

.white { --color: var(--white-color) !important; }

.white-10 { --color: var(--white-10-color) !important; }

.white-25 { --color: var(--white-25-color) !important; }

.white-50 { --color: var(--white-50-color) !important; }

.white-65 { --color: var(--white-65-color) !important; }

.white-75 { --color: var(--white-75-color) !important; }

.white-85 { --color: var(--white-85-color) !important; }

.gray { --color: var(--gray-color) !important; }

.gray-10 { --color: var(--gray-10-color) !important; }

.gray-25 { --color: var(--gray-25-color) !important; }

.gray-50 { --color: var(--gray-50-color) !important; }

.gray-65 { --color: var(--gray-65-color) !important; }

.gray-75 { --color: var(--gray-75-color) !important; }

.gray-85 { --color: var(--gray-85-color) !important; }

.black { --color: var(--black-color) !important; }

.black-10 { --color: var(--black-10-color) !important; }

.black-25 { --color: var(--black-25-color) !important; }

.black-50 { --color: var(--black-50-color) !important; }

.black-65 { --color: var(--black-65-color) !important; }

.black-75 { --color: var(--black-75-color) !important; }

.black-85 { --color: var(--black-85-color) !important; }

/* #endregion Color */

/*----------------------------------------------
4. Style
----------------------------------------------*/

/* #region Style */

:root .gradient.scheme-1,
:root .bg-gradient.scheme-1,
:root .border-gradient.scheme-1,
:root .text-gradient.scheme-1 {
	--color-1: var(--primary-color);
	--color-2: var(--secondary-color);
}

:root .gradient.scheme-1.invert-gradient,
:root .bg-gradient.scheme-1.invert-gradient,
:root .border-gradient.scheme-1.invert-gradient,
:root .text-gradient.scheme-1.invert-gradient {
	--color-2: var(--primary-color);
	--color-1: var(--secondary-color);
}

:root .gradient.scheme-2,
:root .bg-gradient.scheme-2,
:root .border-gradient.scheme-2,
:root .text-gradient.scheme-2 {
	--color-1: var(--secondary-color);
	--color-2: var(--tertiary-color);
}

:root .gradient.scheme-2.invert-gradient,
:root .bg-gradient.scheme-2.invert-gradient,
:root .border-gradient.scheme-2.invert-gradient,
:root .text-gradient.scheme-2.invert-gradient {
	--color-2: var(--secondary-color);
	--color-1: var(--tertiary-color);
}

:root .gradient.scheme-3,
:root .bg-gradient.scheme-3,
:root .border-gradient.scheme-3,
:root .text-gradient.scheme-3 {
	--color-1: var(--tertiary-color);
	--color-2: var(--primary-color);
}

:root .gradient.scheme-3.invert-gradient,
:root .bg-gradient.scheme-3.invert-gradient,
:root .border-gradient.scheme-3.invert-gradient,
:root .text-gradient.scheme-3.invert-gradient {
	--color-2: var(--tertiary-color);
	--color-1: var(--primary-color);
}

.text-italic {
	font-style: italic;
}

.text-outline {
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
}

.shadow {
	box-shadow: 0px 20px 50px 0px rgb(0 0 0 / 15%) !important;
}

.invert-color {
	filter: brightness(1) invert(1);
}
.mix-blend-difference { mix-blend-mode: difference; }

/* #endregion Style */

/*----------------------------------------------
5. Animation
----------------------------------------------*/

/* #region Animation */

/* #endregion Animation */

/*----------------------------------------------
6. Hover
----------------------------------------------*/

/* #region Hover */

.hover-up {
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hover-up:hover {
	transform: translateY(-10px);
}

/* #endregion Hover */

/*----------------------------------------------
7. Helper
----------------------------------------------*/

/* #region Helpers */

.line-clamp-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.link {
	position: relative;
	z-index: 5;
	text-decoration: none;
	color: var(--color);
	pointer-events: all;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.link:hover,
.link:hover > * {
	color: var(--hover-color);
}

.link .icon {
	margin-right: 7.5px;
	vertical-align: middle;
	font-size: 0.75rem;
}

.fit-cover {
	object-fit: cover;
	object-position: center;
}

/* #endregion Helpers */