/*
 * @author		RoS
 * @site		https://corgras-oc.github.io/
 */

@import url("cs_grid.min.css");

/*
	1. GENERAL
	2. TEXT
	3. VIDEO
	4. BUTTON
	5. SECTION
	6. GRID CONTENTS
		6.1. GRID CONTENTS MEDIA QUERIES
	7. CONTENT MEDIA
	8. ITEM MEDIA
	9. POSITION MEDIA ITEMS
		9.1. POSITION MEDIA ITEMS QUERIES
	10. ITEMS
	11. ACCORDION
		11.1. ACCORDION HEADING
		11.2. ACCORDION BODY
		11.3. ACCORDION MEDIA QUERIES
	12. TABS
		12.1. TAB NAVS
		12.2. TAB BODY
		12.3. TAB MEDIA QUERIES
*/

/* --- 1. GENERAL --- */
:root{
	--body-color: #343434;
	--link-color: #3660BC;
	--bg-item: #fff;
	--bg-accordion-heading: #fff;
	--bg-accordion-body: #fff;
	--bg-tabs-nav: #fff;
	--bg-tabs-nav-accent: #fff;
	--border: #dee2e6;
	--box-shadow: rgb(0 0 0 / 10%);
	--btn-bg: #3660BC;
	--btn-bg-hover: #343434;
	--btn-color: #fff;
}

/* --- 2. TEXT --- */
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}

/* --- 3. VIDEO --- */
.cs__media-video {
	display: block;
	width: 100%;
	height: 100%;
}
.cs__video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.cs__video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* --- 4. BUTTON --- */
.cs__caption-buttons {
	margin-top: 1.5rem;
}
.cs__btn{
	/*font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.8rem;
	display: inline-block;*/
	vertical-align: middle;
	position: relative;
	/*border: .1rem solid transparent;
	letter-spacing: .06rem;
	padding: 1rem 1.5rem;
	text-transform: uppercase;
	height: 4rem;
	background: var(--btn-bg);
	color: var(--btn-color);
	-webkit-backface-visibility: hidden;
	box-shadow: none;
	transition: .25s;
	*/
	display:block;
	margin-top: 1rem;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
}
.cs__btn:hover,
.cs__btn:focus {
	/*background: var(--btn-bg-hover);
	color: var(--btn-color);*/
}

/* --- 5. SECTION --- */
.cs__section {
	margin-bottom: 3rem;
}
.cs__section > h2 {
	margin-bottom: 3rem;
}

/* --- 6. GRID CONTENTS--- */
.cs__contents {
	align-items: center;
	gap: 0;
}
.cs__contents:has(.cs__content, .cs__content-media) {
	gap: var(--bs-gutter-y) calc(var(--bs-gutter-x) * 3);
}
.cs__content {
	grid-area: cs__content;
	font-size: 1.4rem;
}
.cs__items {
	grid-area: cs__items;
}
.cs__content-media {
	grid-area: cs__content-media;
}

/* --- 6.1. GRID CONTENTS MEDIA QUERIES --- */
@media (max-width: 575.98px) {
	.cs__contents.grid-1,
	.cs__contents.grid-2,
	.cs__contents.grid-3 {
		grid-template-areas:
			"cs__content-media"
			"cs__content"
			"cs__items"
		;
	}
	.cs__contents.grid-4,
	.cs__contents.grid-5,
	.cs__contents.grid-6,
	.cs__contents.grid-7 {
		grid-template-areas:
			"cs__content-media"
			"cs__items"
			"cs__content"
		;
	}
	.cs__contents.grid-8,
	.cs__contents.grid-9,
	.cs__contents.grid-14 {
		grid-template-areas:
			"cs__content"
			"cs__content-media"
			"cs__items"
		;
	}
	.cs__contents.grid-10,
	.cs__contents.grid-11,
	.cs__contents.grid-12,
	.cs__contents.grid-13 {
		grid-template-areas:
			"cs__content"
			"cs__items"
			"cs__content-media"
		;
	}
	.cs__contents.grid-15,
	.cs__contents.grid-16,
	.cs__contents.grid-17,
	.cs__contents.grid-18 {
		grid-template-areas:
			"cs__items"
			"cs__content-media"
			"cs__content"
		;
	}
	.cs__contents.grid-19,
	.cs__contents.grid-20,
	.cs__contents.grid-21,
	.cs__contents.grid-22{
		grid-template-areas:
			"cs__items"
			"cs__content"
			"cs__content-media"
		;
	}
}
@media (min-width: 576px) {
	.cs__contents.grid-1,
	.cs__contents.grid-2,
	.cs__contents.grid-3 {
		grid-template-areas:
			"cs__content-media"
			"cs__content"
			"cs__items"
		;
	}
	.cs__contents.grid-4,
	.cs__contents.grid-5,
	.cs__contents.grid-6,
	.cs__contents.grid-7 {
		grid-template-areas:
			"cs__content-media"
			"cs__items"
			"cs__content"
		;
	}
	.cs__contents.grid-8,
	.cs__contents.grid-9,
	.cs__contents.grid-14 {
		grid-template-areas:
			"cs__content"
			"cs__content-media"
			"cs__items"
		;
	}
	.cs__contents.grid-10,
	.cs__contents.grid-11,
	.cs__contents.grid-12,
	.cs__contents.grid-13 {
		grid-template-areas:
			"cs__content"
			"cs__items"
			"cs__content-media"
		;
	}
	.cs__contents.grid-15,
	.cs__contents.grid-16,
	.cs__contents.grid-17,
	.cs__contents.grid-18 {
		grid-template-areas:
			"cs__items"
			"cs__content-media"
			"cs__content"
		;
	}
	.cs__contents.grid-19,
	.cs__contents.grid-20,
	.cs__contents.grid-21,
	.cs__contents.grid-22{
		grid-template-areas:
			"cs__items"
			"cs__content"
			"cs__content-media"
		;
	}
}
@media (min-width: 768px) {}
@media (min-width: 992px) {
	.cs__contents.grid-1 {
		grid-template-areas:
			"cs__content-media"
			"cs__content"
			"cs__items"
		;
	}
	.cs__contents.grid-2 {
		grid-template-areas:
			"cs__content-media	cs__content"
			"cs__items			cs__items"
		;
		grid-template-columns: repeat(2, 1fr);
	}
	.cs__contents.grid-3 {
		grid-template-areas:
			"cs__content-media	cs__content-media"
			"cs__content		cs__items"
		;
		grid-template-columns: repeat(2, 1fr);
	}
	.cs__contents.grid-4 {
		grid-template-areas:
			"cs__content-media	cs__items"
			"cs__content		cs__items"
		;
		grid-template-columns: repeat(2, 1fr);
	}
	.cs__contents.grid-5 {
		grid-template-areas:
			"cs__content-media	cs__items"
			"cs__content		cs__content"
		;
		grid-template-columns: repeat(2, 1fr);
	}
	.cs__contents.grid-6 {
		grid-template-areas:
			"cs__content-media	cs__content-media"
			"cs__items			cs__content"
		;
	}
	.cs__contents.grid-7 {
		grid-template-areas:
			"cs__content-media"
			"cs__items"
			"cs__content"
		;
	}
	.cs__contents.grid-8 {
		grid-template-areas:
			"cs__content"
			"cs__content-media"
			"cs__items"
		;
	}
	.cs__contents.grid-9 {
		grid-template-areas:
			"cs__content		cs__content"
			"cs__content-media	cs__items"
		;
	}
	.cs__contents.grid-10 {
		grid-template-areas:
			"cs__content	cs__content"
			"cs__items		cs__content-media"
		;
	}
	.cs__contents .grid-11 {
		grid-template-areas:
			"cs__content		cs__items"
			"cs__content-media	cs__content-media"
		;
	}
	.cs__contents .grid-12 {
		grid-template-areas:
			"cs__content"
			"cs__items"
			"cs__content-media"
		;
	}
	.cs__contents.grid-13 {
		grid-template-areas:
			"cs__content		cs__items"
			"cs__content-media	cs__items"
		;
		grid-template-columns: repeat(2, 1fr);
	}
	.cs__contents.grid-14 {
		grid-template-areas:
			"cs__content	cs__content-media"
			"cs__items		cs__items"
		;
	}
	.cs__contents.grid-15 {
		grid-template-areas:
			"cs__items"
			"cs__content-media"
			"cs__content"
		;
	}
	.cs__contents.grid-16 {
		grid-template-areas:
			"cs__items		cs__content-media"
			"cs__content	cs__content"
		;
	}
	.cs__contents.grid-17 {
		grid-template-areas:
			"cs__items			cs__items"
			"cs__content-media	cs__content"
		;
	}
	.cs__contents.grid-18 {
		grid-template-areas:
			"cs__items	cs__content-media"
			"cs__items	cs__content"
		;
		grid-template-columns: repeat(2, 1fr);
	}
	.cs__contents .grid-19 {
		grid-template-areas:
			"cs__items"
			"cs__content"
			"cs__content-media"
		;
	}
	.cs__contents.grid-20 {
		grid-template-areas:
			"cs__items			cs__content"
			"cs__content-media	cs__content-media"
		;
	}
	.cs__contents.grid-21 {
		grid-template-areas:
			"cs__items		cs__items"
			"cs__content	cs__content-media"
		;
	}
	.cs__contents.grid-22 {
		grid-template-areas:
			"cs__items	cs__content"
			"cs__items	cs__content-media"
		;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

/* --- 7. CONTENT MEDIA --- */
.cs__content-media {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.cs__content-media .cs__media-image + .cs__media-video {
	margin-top: var(--bs-gutter-y);
}
.cs__content-media .cs__media-image {
	width: 100%;
	display: flex;
	justify-content: center;
	overflow: hidden;
}
.cs__content-media .cs__media-image img {
	max-width: 100%;
}

/* --- 8. ITEM MEDIA --- */
.cs__item-media .cs__media-image,
.cs__item-media .cs__media-icon,
.cs__item-media .cs__media-video {
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* --- 9. POSITION MEDIA ITEMS --- */
.top,
.bottom {
	display: flex !important;
	flex-direction: column;
	flex-wrap: wrap;
}
.top > .cs__item-media {
	margin-bottom: .75rem;
	width: 100%;
	order: 1;
}
.top > .cs__item-caption {
	margin-top: .75rem;
	width: 100%;
	flex: 1 1 auto;
	order: 2;
}
.bottom > .cs__item-media {
	margin-top: .75rem;
	width: 100%;
	order: 2;
}
.bottom > .cs__item-caption {
	margin-bottom: .75rem;
	width: 100%;
	flex: 1 1 auto;
	order: 1;
}
.left,
.right {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
}

/* --- 9.1. POSITION MEDIA ITEMS QUERIES --- */
@media (max-width: 575.98px) {
	.left > .cs__item-media {
		margin-bottom: .75rem;
		margin-right: 0;
		width: 100%;
		flex: 1 1 auto;
		display: flex;
		order: 2;
	}
	.left > .cs__item-caption {
		margin-top: .75rem;
		margin-left: 0;
		width: 100%;
		flex: 1 1 auto;
		order: 1;
	}
	.right > .cs__item-media {
		margin-top: .75rem;
		margin-left: 0;
		width: 100%;
		display: flex;
		flex: 1 1 auto;
		order: 2;
	}
	.right > .cs__item-caption {
		margin-bottom: .75rem;
		margin-right: 0;
		width: 100%;
		flex: 1 1 auto;
		order: 1;
	}
}
@media (min-width: 576px) {
	.left > .cs__item-media {
		margin-bottom: .75rem;
		margin-right: 0;
		width: 100%;
		display: flex;
		flex: 1 1 auto;
		order: 1;
	}
	.left > .cs__item-caption {
		margin-top: .75rem;
		margin-left: 0;
		width: 100%;
		flex: 1 1 auto;
		order: 2;
	}
	.right > .cs__item-media {
		margin-top: .75rem;
		margin-left: 0;
		width: 100%;
		display: flex;
		flex: 1 1 auto;
		order: 2;
	}
	.right > .cs__item-caption {
		margin-bottom: .75rem;
		margin-right: 0;
		width: 100%;
		flex: 1 1 auto;
		order: 1;
	}
}
@media (min-width: 768px) {
	.left > .cs__item-media {
		margin-bottom: 0;
		margin-right: 1.5rem;
		width: calc(50% - 1.5rem);
		display: flex;
		flex: 1 0 auto;
		order: 1;
	}
	.left > .cs__item-caption {
		margin-top: 0;
		margin-left: 1.5rem;
		width: calc(50% - 1.5rem);
		flex: 1 0 auto;
		order: 2;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content:center
	}
	.right > .cs__item-media {
		margin-top: 0;
		margin-left: 1.5rem;
		width: calc(50% - 1.5rem);
		display: flex;
		flex: 1 0 auto;
		order: 2;
	}
	.right > .cs__item-caption {
		margin-bottom: 0;
		margin-right: 1.5rem;
		width: calc(50% - 1.5rem);
		flex: 1 0 auto;
		order: 1;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content:center
	}
}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}

/* --- 10. ITEMS --- */
.cs__item {
	position: relative;
	z-index: 10;
	/*border: .1rem solid var(--border);
	background: var(--bg-item);
	padding: 2rem;*/
	height: 100%;
	/*transition: .25s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	color: var(--body-color);*/
}
/*.cs__item:hover {
	box-shadow: 0 0 5rem var(--box-shadow);
	z-index: 15;
}*/
.cs__media-image {
	transition: transform .4s;
}
.cs__item:hover .cs__media-image {
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.cs__media-icon i {
	font-size: 4rem;
}
.cs__media-video {
	display: block;
	width: 100%;
}
.cs__item-caption {
	color: var(--body-color);
	display: flex;
	flex-direction: column;
}
.cs__item:hover .cs__caption-title {
	color: var(--body-color-accent);
}
.cs__caption-title {
	font-size: 1.6rem;
	line-height: 2rem;
	font-weight: 700;
	margin: 0;
	overflow-wrap: anywhere;
}
.cs__item .cs__caption-description {
	margin-top: 1rem;
	font-size: 1.4rem;
	flex: 1 1 auto;
}
.cs__item .cs__caption-description p {
	margin-bottom: 0;
}

/* --- 11. ACCORDION --- */
/* --- 11.1. ACCORDION HEADING --- */
.cs__accordion .panel-heading {
	color: var(--link-color);
	border-color: var(--border);
	background: var(--bg-accordion-heading);
	padding: 0;
}
.cs__accordion-heading {
	font-size: 1.7rem;
	line-height: 2rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-decoration: none;
	padding: 1.5rem 2rem;
}
.cs__accordion-heading.collapsed {
	color: var(--body-color);
}
.cs__accordion-heading:hover,
.cs__accordion-heading:focus {
	color: var(--link-color);
	text-decoration: none;
	outline: none
}
.cs__accordion-heading i {
	font-size: 1.7rem;
	margin-right: .6rem;
}
.cs__accordion-heading span {
	flex: 1;
}
.cs__accordion-heading:after {
	font-family: 'Glyphicons Halflings';
	content: "\e259";
}
.cs__accordion-heading.collapsed:after {
	content: "\e258";
}

/* --- 11.2. ACCORDION BODY --- */
.cs__accordion-body {
	padding: 3rem 2rem;
}
.cs__accordion-body .cs__caption-description {
	font-size: 1.4rem;
}
.cs__accordion-body .cs__caption-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

/* --- 11.3. ACCORDION MEDIA QUERIES --- */
@media (max-width: 575.98px) {
	.cs__accordion-body .btn {
		min-width: 100%;
	}
}
@media (min-width: 576px) {
	.cs__accordion-body .btn {
		min-width: calc(100% / 2 - 1.5rem);
	}
}
@media (min-width: 768px) {
	.cs__accordion-body .btn {
		min-width: calc(100% / 3 - 1.5rem);
	}
}
@media (min-width: 992px) {
	.cs__accordion-body .btn {
		min-width: calc(100% / 4 - 1.5rem);
	}
	.cs__accordion-body .cs__item-media + .cs__item-caption .btn {
		min-width: calc(100% / 2 - 1.5rem);
	}
}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {
	.cs__accordion-body .btn {
		min-width: calc(100% / 4 - 1.5rem);
	}
	.cs__accordion-body .cs__item-media + .cs__item-caption .btn {
		min-width: calc(100% / 3 - 1.5rem);
	}
}

/* --- 12. TABS --- */
/* --- 12.1. TAB NAVS --- */
.cs__tabs-nav {
	border: 0;
	display: flex;
	margin: 0;
}
.cs__tabs-nav > li {
	float: none;
	margin-bottom: 0;
}
.cs__tabs-btn > a {
	text-align: left;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1.8rem !important;
	background: var(--bg-tabs-nav) !important;
	color: var(--link-color);
	cursor: pointer;
	border: .1rem solid var(--border) !important;
	padding: 1rem 2rem !important;
	margin: 0 -.1rem 0 0 !important;
	border-radius: 0 !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
	color: var(--body-color);
	cursor: default;
	background-color: var(--bg-tabs-nav-accent) !important;
	border: .1rem solid var(--border) !important;
	border-bottom-color: transparent !important;
}
.nav-tabs > li > a:focus,
.nav-tabs > li > a:hover {
	color: var(--body-color);
	cursor: pointer;
	background-color: var(--bg-tabs-nav-accent) !important;
	border: .1rem solid var(--border) !important;
	cursor: pointer;
}
.cs__tabs-title i {
	font-size: 1.7rem;
	margin-right: .6rem;
}
.cs__tabs-title span {
	flex: 1;
}

/* --- 12.2. TAB BODY --- */
.cs__tabs-body {
	padding: 3rem 2rem;
}
.cs__tabs-body .cs__caption-description {
	font-size: 1.4rem;
}
.cs__tabs-body .cs__caption-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
}

/* --- 12.3. TAB MEDIA QUERIES --- */
@media (max-width: 575.98px) {
	.cs__tabs-nav {
		display: none;
	}
	.cs__tabs .cs__accordions {
		border-radius: .4rem;
		border: .1rem solid var(--border);
	}
	.cs__tabs .cs__accordions + .cs__accordions {
		margin-top: .5rem;
	}
	.cs__tabs .cs__accordion-heading {
		color: var(--link-color);
		background: var(--bg-accordion-heading);
	}
	.cs__tabs .cs__accordion-heading.collapsed {
		color: var(--link-color);
	}
	.cs__tabs .cs__accordion-heading:hover,
	.cs__tabs .cs__accordion-heading:focus {
		color: var(--body-color);
		text-decoration: none;
		outline: none;
	}
	.cs__tabs-content {
		opacity: 1;
		visibility: visible;
		position: relative;
	}
	.cs__tabs-body .btn {
		min-width: 100%;
	}
}
@media (min-width: 576px) {
	.cs__tabs-nav {
		display: none;
	}
	.cs__tabs .cs__accordions {
		border-radius: .4rem;
		border: .1rem solid var(--border);
	}
	.cs__tabs .cs__accordions + .cs__accordions {
		margin-top: .5rem;
	}
	.cs__tabs .cs__accordion-heading {
		color: var(--link-color);
		background: var(--bg-accordion-heading);
	}
	.cs__tabs .cs__accordion-heading.collapsed {
		color: var(--body-color);
	}
	.cs__tabs .cs__accordion-heading:hover,
	.cs__tabs .cs__accordion-heading:focus {
		color: var(--link-color);
		text-decoration: none;
		outline: none;
	}
	.cs__tabs-content {
		opacity: 1;
		visibility: visible;
		position: relative;
	}
	.cs__tabs-body .btn {
		min-width: calc(100% / 2 - 1.5rem);
	}
}
@media (min-width: 768px) {
	.cs__tabs-body .btn {
		min-width: calc(100% / 3 - 1.5rem);
	}
}
@media (min-width: 992px) {
	.cs__tabs-nav {
		display: flex;
	}
	.cs__tabs .cs__accordions {
		border-radius: 0;
		border: 0;
	}
	.cs__tabs .cs__accordions + .cs__accordions {
		margin-top: 0;
	}
	.cs__tabs .cs__accordions .cs__accordion-heading {
		display: none;
	}
	.cs__tabs-contents {
		border: .1rem solid var(--border);
		margin-top: -.1rem;
	}
	.cs__tabs-content {
		opacity: 0;
		visibility: hidden;
		position: fixed;
	}
	.cs__tabs-content.active,
	.cs__tabs-content.in {
		transition: .5s;
		opacity: 1;
		visibility: visible;
		position: relative;
	}
	.cs__tabs-collapse.collapse {
		display: block;
	}
	.cs__tabs-body .btn {
		min-width: calc(100% / 4 - 1.5rem);
	}
	.cs__tabs-body .cs__item-media + .cs__item-caption .btn {
		min-width: calc(100% / 2 - 1.5rem);
	}
}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {
	.cs__tabs-body .btn {
		min-width: calc(100% / 4 - 1.5rem);
	}
	.cs__tabs-body .cs__tabs-media + .cs__item-caption .btn {
		min-width: calc(100% / 3 - 1.5rem);
	}
}


/* NEW STYLE */





.golden-line-button .cs__btn {
    background-color: transparent; /* Прозорий фон */
    border: 2px solid #d9b899; /* Видима золотиста рамка */
    color: #d9b899; /* Колір тексту */
    padding: 10px 20px; /* Відступи всередині */
    font-size: 16px; /* Розмір тексту */
    cursor: pointer; /* Курсор у вигляді покажчика */
    position: relative; /* Для можливості анімації */
    transition: all 0.3s ease; /* Плавність анімації */
    display: inline-block; /* Для коректного позиціонування */
    text-align: center; /* Вирівнювання тексту по центру */
}

/* Ефект при наведенні: зміна фону та колір рамки */
.golden-line-button .cs__btn:hover {
    background-color: #d9b899; /* Темніший золотистий фон */
    color: white; /* Білий колір тексту для контрасту */
}

/* Додатково: ефект для активного стану (під час натискання) */
.golden-line-button .cs__btn:active {
    background-color: #b48a6e; /* Ще темніший тон для фону при натисканні */
    border-color: #b48a6e; /* Відповідний колір рамки */
}