/*-------------------------------- SUNRAISE --------------------------*/
/*--- Custom styles, loaded after style.css and assets/css/custom.css ---*/
/*--- Values taken from the live Rinol pages (the Elementor global kit is not used) ---*/

/*-------------------------------- Variables --------------------------*/
/*--- Colors, fonts and sizes ---*/
:root {
	--sr-accent: #FF4D00;
	--sr-text: #000000;
	--sr-text-soft: #333333;
	--sr-border: #D5D8DC;
	--sr-bg-gray: #F5F5F5;
	--sr-dark: #111111;
	--sr-font: "Montserrat", sans-serif;
	--sr-container: 1200px;
	--sr-gutter: 20px;
	--sr-section-space: 80px;
}

/*--- Mobile ---*/
@media (max-width: 767px) {
	:root {
		--sr-section-space: 50px;
	}
}

/*-------------------------------- Base layout --------------------------*/
/*--- Container ---*/
.sr-app-container {
	max-width: var(--sr-container);
	margin: 0 auto;
	padding: 0 var(--sr-gutter);
	box-sizing: border-box;
}

/*--- Sections ---*/
.sr-app-section {
	padding: var(--sr-section-space) 0;
	font-family: var(--sr-font);
	color: var(--sr-text);
}

/*-------------------------------- Applications: shared --------------------------*/
/*--- WYSIWYG paragraphs inside Elementor headings ---*/
.sr-application-page .elementor-heading-title p {
	margin: 0;
	display: inline;
}

/*--- Titles ---*/
.sr-app-title {
	margin: 0 0 24px;
	font-family: var(--sr-font);
	font-size: 35px;
	line-height: 1.2;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--sr-text);
}
.sr-app-title strong,
.sr-app-title b {
	font-weight: 700;
}

/*--- Text ---*/
.sr-app-text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--sr-text);
}
.sr-app-text p {
	margin: 0 0 16px;
}
.sr-app-text p:last-child,
.sr-app-text ul:last-child,
.sr-app-text ol:last-child {
	margin-bottom: 0;
}
.sr-app-text a {
	color: var(--sr-accent);
}

/*--- Bullet lists with orange check ---*/
.sr-app-text ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.sr-app-text ul li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 32px;
}
.sr-app-text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF4D00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/*--- Heading with lines on both sides ---*/
.sr-app-heading {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 48px;
}
.sr-app-heading .sr-app-title {
	margin: 0;
	white-space: nowrap;
}
.sr-app-heading__line {
	flex: 1 1 auto;
	height: 1px;
	background: var(--sr-text-soft);
}

/*-------------------------------- Applications: content sections --------------------------*/
/*--- Backgrounds ---*/
.sr-app-content--gray {
	background: var(--sr-bg-gray);
}
.sr-app-content--white {
	background: #fff;
}

/*--- Layout ---*/
.sr-app-content__inner {
	display: flex;
	align-items: center;
	gap: 56px;
}
.sr-app-content--image-left .sr-app-content__inner {
	flex-direction: row-reverse;
}
.sr-app-content__text {
	flex: 1 1 55%;
	min-width: 0;
}
.sr-app-content__media {
	flex: 1 1 45%;
	min-width: 0;
}
.sr-app-content__image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}
.sr-app-content--no-image .sr-app-content__text {
	flex-basis: 100%;
}

/*-------------------------------- Applications: systems --------------------------*/
/*--- Grid ---*/
.sr-app-systems__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px 56px;
}

/*--- Item ---*/
.sr-app-system {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.sr-app-system__media {
	flex: 0 0 150px;
}
.sr-app-system__image {
	display: block;
	width: 150px;
	height: auto;
}
.sr-app-system__body {
	min-width: 0;
}
.sr-app-system__name {
	margin: 0 0 8px;
	font-family: var(--sr-font);
	font-size: 20px;
	line-height: 1.3;
	font-weight: 400;
	color: var(--sr-text);
}
.sr-app-system__name strong,
.sr-app-system__name b {
	font-weight: 700;
}
.sr-app-system__desc {
	font-size: 14px;
	line-height: 1.6;
}
.sr-app-system__link {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sr-accent);
	text-decoration: none;
}
.sr-app-system__link:hover {
	text-decoration: underline;
}

/*-------------------------------- Applications: certifications --------------------------*/
/*--- Section ---*/
.sr-app-certifications {
	background: var(--sr-bg-gray);
}
.sr-app-certifications__intro {
	margin-bottom: 24px;
}

/*--- Table ---*/
.sr-app-certifications__scroll {
	overflow-x: auto;
	background: #fff;
	border: 1px solid #ddd;
}
.sr-app-certifications__table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}
.sr-app-certifications__table thead th {
	padding: 14px 20px;
	background: var(--sr-dark);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	border: 0;
}
.sr-app-certifications__table tbody th,
.sr-app-certifications__table tbody td {
	padding: 16px 20px;
	border: 0;
	border-top: 1px solid #e3e3e3;
	text-align: left;
	vertical-align: top;
	background: #fff;
}
.sr-app-certifications__table tbody th {
	width: 260px;
	font-weight: 600;
}

/*--- Entries ---*/
.sr-app-certifications__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sr-app-certifications__list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 18px;
}
.sr-app-certifications__list li:last-child {
	margin-bottom: 0;
}
.sr-app-certifications__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--sr-accent);
}

/*-------------------------------- Applications: choosing --------------------------*/
/*--- Grid ---*/
.sr-app-choosing__grid {
	display: grid;
	gap: 24px;
}
.sr-app-choosing__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sr-app-choosing__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*--- Card ---*/
.sr-app-choice {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	border: 1px solid #ddd;
	color: var(--sr-text);
	text-decoration: none;
}
.sr-app-choice__scenario {
	font-size: 15px;
	line-height: 1.6;
}
.sr-app-choice__solution {
	font-size: 15px;
	font-weight: 700;
	color: var(--sr-accent);
}
.sr-app-choice--link {
	transition: border-color 0.2s ease;
}
.sr-app-choice--link:hover {
	border-color: var(--sr-accent);
	color: var(--sr-text);
}

/*-------------------------------- Applications: FAQ --------------------------*/
/*--- Item ---*/
.sr-app-faq__item {
	border: 1px solid var(--sr-border);
	margin-top: -1px;
}
.sr-app-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.sr-app-faq__question::-webkit-details-marker {
	display: none;
}
.sr-app-faq__answer {
	padding: 0 22px 20px;
	color: var(--sr-text-soft);
}

/*--- Plus / minus icon ---*/
.sr-app-faq__icon {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}
.sr-app-faq__icon::before,
.sr-app-faq__icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 16px;
	height: 2px;
	background: var(--sr-text);
	transition: transform 0.2s ease;
}
.sr-app-faq__icon::after {
	transform: rotate(90deg);
}
.sr-app-faq__item[open] .sr-app-faq__icon::after {
	transform: rotate(0deg);
}

/*-------------------------------- Applications: responsive --------------------------*/
/*--- Tablet ---*/
@media (max-width: 1024px) {
	.sr-app-title {
		font-size: 30px;
	}
	.sr-app-content__inner {
		gap: 40px;
	}
	.sr-app-systems__grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.sr-app-choosing__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*--- Mobile ---*/
@media (max-width: 767px) {
	.sr-app-title {
		font-size: 24px;
	}
	.sr-app-heading {
		gap: 12px;
		margin-bottom: 32px;
	}
	.sr-app-heading .sr-app-title {
		white-space: normal;
		text-align: center;
	}
	.sr-app-content__inner,
	.sr-app-content--image-left .sr-app-content__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}
	.sr-app-system {
		gap: 16px;
	}
	.sr-app-system__media {
		flex-basis: 100px;
	}
	.sr-app-system__image {
		width: 100px;
	}
	.sr-app-choosing__grid--2,
	.sr-app-choosing__grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}
	.sr-app-choice {
		padding: 22px;
	}
}

/*-------------------------------- New styles --------------------------*/