#hero {
	font-size: 1.25em;
}

#hero h2 {
	font-size: 3rem;
}

#hero .hero_desc {
	display: flex;
	align-items: center;
}

#hero picture {
	display: block;
	text-align: center;
}

#hero picture img {
	max-width: 100%;
	height: auto;
}

#kpi {
	display: flex;
	flex-wrap: wrap;
	font-size: 1em;
	font-weight: 400;
	padding: 5em 0;
}

#kpi .kpi_col {
	flex: 1;
	text-align: center;
	border-right: solid 1.5px #d6d9dc;
}

#kpi .kpi_col:last-child {
	border-right: 0;
}

#kpi .lead {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 0;
}

#offer {
	padding: 4em 0;
}

#offer .offer_col {
	background: #fff;
	padding: 2.5em 3em;
	border-radius: 12px;
}

#offer .offer_col img {
	max-width: 85px;
	aspect-ratio: 1 / 1;
	margin-bottom: 2em;
}

#offer .offer_col h3:after {
	content: '';
	display: block;
	background: #EB3EC8;
	width: 110px;
	height: 1.5px;
	margin: 0.8em auto;
}

#process {
	padding: 4em 0;
}

#process .process_col {
	flex: 1;
}

/* #process .process_col .count {
	width: 100px;
	height: 100px;
	line-height: 100px;
	background-size: cover;
	font-size: 2.5em;
	font-weight: 500;
	text-align: center;
	margin: auto;
	margin-bottom: 3rem;
}

#process .process_col .count:before {
	content: url(../img/process_circle.svg);
	display: block;
	width: 100px;
	position: absolute;
} */

#process .process_col .count {
    position: relative;    /* KEY: reference point for :before */
    width: 100px;
    height: 100px;
    /* Drop line-height; use Flexbox for better control */
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 2.5em;
    font-weight: 500;
    margin: 0 auto 3rem;   /* Horizontal centering and bottom margin */
}

#process .process_col .count:before {
    content: url(../img/process_circle.svg);
    position: absolute;    /* Now relative to .count, not the whole page */
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: -1;           /* Circle behind the number */
    display: block;
    line-height: 0;        /* Prevents odd vertical shifts */
}

#process .process_col .count_2:before {
	transform: rotate(45deg)
}

#process .process_col .count_3:before {
	transform: rotate(90deg)
}

#process .process_col .count_4:before {
	transform: rotate(135deg)
}

#process .process_col strong {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
}

#failure {
	background: linear-gradient(180deg,rgba(235, 62, 200, 1) 0%, rgba(133, 35, 113, 1) 100%);
	color: #fff;
}

#failure .main_image {
	max-width: 50%;
	aspect-ratio: 642 / 476;
	margin: auto;
}

#failure .slide_box {
	background: #fff;
	padding: 2.5em 3em;
	border-radius: 12px;
	color: #51284F;
	position: relative;
	overflow: hidden;
	text-align: center;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

#failure .slide_box:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(81, 40, 79, 0.25);
}

/* underline below the title in brand color */
#failure .slide_box[data-company="uniqa"] h3:after,
#failure .slide_box[data-company="unica"] h3:after {
	background: #51284F;
}

#failure .slide_box[data-company="amtrust"] h3:after {
	background: #A0ADBE;
}

#failure .slide_box[data-company="pzu"] h3:after {
	background: #227AEF;
}

#failure .slide_box[data-company="hdi"] h3:after {
	background: #19BD70;
}

/* === COMPANY LOGO ON #failure CARDS ===
   Logo loaded from API (--company-logo). Cards without a logo (no
   .has-logo class) have no ::after – they show text only.
   Default: card shows the text only. On hover the text fades out and
   the whole logo takes over the card, large and centred. The card
   background stays white, so the logo's own white background blends in
   (no visible edges). The card also lifts on hover. */
#failure .slide_box.has-logo::after {
	content: "";
	position: absolute;
	/* fills the card but leaves a bottom band clear for the CTA
	   (top, right, bottom, left) */
	inset: 1.8em 1.8em 5.2em 1.8em;
	background-image: var(--company-logo);
	background-repeat: no-repeat;
	background-position: center;
	/* contain → whole logo visible, never cropped */
	background-size: contain;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.4s ease, transform 0.4s ease;
	z-index: 2;
	pointer-events: none;
}

#failure .slide_box.has-logo:hover::after {
	opacity: 1;
	transform: scale(1);
}

/* Title and description give way to the logo on hover; the CTA stays. */
#failure .slide_box.has-logo h3,
#failure .slide_box.has-logo p {
	transition: opacity 0.3s ease;
}

#failure .slide_box.has-logo:hover h3,
#failure .slide_box.has-logo:hover p {
	opacity: 0;
}

/* Keep the CTA visible and above the logo. */
#failure .slide_box.has-logo a {
	z-index: 3;
}

#failure .slide_box > * {
	position: relative;
	z-index: 1;
}

#failure .slide_box a {
	display: block;
	color: #51284F;
	margin-top: 2em;
	font-weight: 600;
}

#failure .slide_box h3:after {
	content: '';
	display: block;
	background: #EB3EC8;
	width: 110px;
	height: 1.5px;
	margin: 0.8em auto;
}

#companies {
	flex: 0 0 20%;
	box-sizing: border-box;
	margin-top: 3em;
	padding-right: 4em;
}

.companies_bt {
	width: -webkit-fill-available;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1em;
	border: 1px solid #e3e7ee;
	padding: 1em 1.5em;
	border-radius: 12px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
}

.companies_bt img {
	max-height: 44px;
	max-width: 100%;
	object-fit: contain;
}

.companies_bt:hover {
	border-color: #EB3EC8;
}

.companies_bt.active {
	border-color: #EB3EC8;
	box-shadow: 0 0 0 2px rgba(235, 62, 200, 0.15);
}

.companies_placeholder {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 2.5em 2em;
	text-align: center;
	color: #6b7280;
	background: #fff;
	border: 1px dashed #cdd3dd;
	border-radius: 12px;
}

#companies_service {
	flex: 0 0 80%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* background: #fff; */
	/* border-radius: 12px; */
	/* padding: 4em 3em; */
	margin-top: 3em;
}

#companies_projects {
	flex: 1;
	display: flex;
	flex-direction: column;
}

#companies_service h3 {
	margin-bottom: 2em;
}

#companies_links {
	display: flex;
}

.link_col {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.link_col .full_bt {
	margin: 1em;
	padding: 0.7em 1.4em 0.8em 1.4em;
	white-space: nowrap;
	text-align: center;
}

#companies_aditional {
	display: flex;
	gap: 3em;
	padding: 4em 0;
	margin-left: 20%;
}

#additional_links {
	padding: 0 4em;
}

#additional_links_2 {
	padding: 0 4em;
}

.addit_row {
	height: 180px;
}

.form_link {
	border: 0;
	background: none;
	font-weight: 500;
}

#additional_links:first-child {
	border-right: solid 1.5px #EB3EC8;
}

#additional_links .lead {
	font-size: 1.56em;
	font-weight: 600;
	color: #51284F;
	text-transform: none;
}

#additional_links_2 .lead {
	font-size: 1.56em;
	font-weight: 600;
	color: #51284F;
	text-transform: none;
}

.forms {
	padding: 4em 0;
}

.report_section {
	display: flex;
}

.report_desc {
	padding-right: 5em;
	flex: 0 0 40%;
}

.report_desc h3 {
	font-size: 2.5rem;
	font-weight: 600;
}

.report_desc strong {
	font-size: 1.25em;
	font-weight: 600;
}

.report_desc p {
	margin-bottom: 2em;
}

.report_desc .icon {
	width: 50px;
	aspect-ratio: 1 / 1;
	float: left;
    margin-right: 1em;
}

.add_documents {
	color: rgba(81,40,79, 0.4)
}

#cooperative {
	background: linear-gradient(180deg,rgba(235, 62, 200, 1) 0%, rgba(133, 35, 113, 1) 100%);
	color: #fff;
	min-height: 57rem;
}

.cooperative_section {
	display: flex;
}

.cooperative_desc {
	padding-right: 5em;
	flex: 0 0 40%;
}

.cooperative_desc h3 {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 0.5em;
}

.cooperative_section .form {
	flex: 0 0 60%;
}

.cooperative_desc .icon {
	width: 50px;
	aspect-ratio: 1 / 1;
    margin-right: 1em;
}

.cooperative_desc strong {
	font-size: 1.25em;
	font-weight: 600;
}

.carousel {
	overflow: hidden;
	width: 100%;
}

/* odstęp między tekstem sekcji a karuzelą partnerów */
#partners .sec_title {
	margin-bottom: 2.2em;
}

#partner_track {
	display: flex;
	width: max-content;
	animation: scroll 50s linear infinite;
}

#partner_track img {
	height: 60px;
	width: auto;
	aspect-ratio: auto;
	margin: 0 40px;
	flex-shrink: 0;
	filter: grayscale(1);
	cursor: pointer;
}

#partner_track img:hover {
	filter: grayscale(0);
}

.companies_projects {
	display: block;
}

.project_wrapper {
	/* margin-top: 15px; */
	background: #fff;
	border-radius: 12px;
	padding: 4em 3em;
	margin-top: 1em;
}

.project_wrapper h4 {
    padding: 15px;
    text-align: center;
}

.projekt_links {
	display: flex;
}

.checkbox_link {
	color: #51284F;
	text-decoration-line: none;
	font-weight: 500;
}

.coop_checkbox_link {
	color: #fff;
	text-decoration-line: none;
	font-weight: 500;
}

.coop-item {
    cursor: pointer;
    padding: 8px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 6px;
}

.coop-item:hover {
	cursor: pointer;
    background-color: #f0f0f0;
    color: #222;
}

.coop-item.active {
    background-color: #e0e0e0;
    font-weight: bold;
    color: #000;
}

#removeFile {
    background: none;
    border: none;
    color: red;
    font-weight: bold;
    cursor: pointer;
    margin-left: 10px;
}

#toast-container {
    position: fixed !important;
    bottom: 20px; /* Changed from top to bottom */
    left: 50% !important;
    transform: translateX(-50%) !important; /* Horizontal centering only */
    z-index: 99999 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.custom-toast {
    padding: 15px 30px;
    border-radius: 50px; /* Strong rounding (pill shape) */
    color: white;
    font-weight: 600;
    font-family: sans-serif;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    text-align: center;
    white-space: nowrap;
}

/* Colors */
.toast-success { background-color: #28a745; }
.toast-error { background-color: #dc3545; }

/* Fade-in animation */
.custom-toast.show { 
    opacity: 1; 
    transform: translateY(0);
}

.acceptance p {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
}

.acceptance input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex: 0 0 18px;
}

.acceptance label {
    flex: 1;
    cursor: pointer;
    line-height: 1.4;
    margin: 0;
}

a:hover {
	color: #EB3EC8;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

.carousel:hover #partner_track {
	animation-play-state: paused;
}

/* 720p (1280×720) — mniejszy padding panelu, żeby treść lepiej się mieściła */
@media (max-width: 1280px) {
	.project_wrapper {
		padding: 2em;
	}
}

@media (max-width: 966px) {
	#hero {
		text-align: center;
	}

	#partner_track,
	.cooperative_section,
	#hero .hero_desc,
	#kpi,
	.report_section,
	#companies_aditional,
	#companies_links {
		display: block;
	}

	#kpi .kpi_col { 
		margin-bottom: 1.5em;
	}

	#kpi .lead {
    	font-size: 2rem;
	}

	#companies {
   		padding-right: 0;
	}	

	#companies_service h3 {
		margin-bottom: 1em;
	}

	#companies_service {
		flex: 0 0 100%;
		padding: 2em 1em;
	}

	#companies_service .full_bt {
		padding: 0.8em 2em 1em 2em;
	}

	#companies_aditional {
    	margin-left: 0;
		padding: 2em 0;
	}

	#additional_links {
    	padding: 0;
	}

	#additional_links_2 {
    	padding: 0;
	}	

	.addit_row {
		height: auto;
	}

	#additional_links:first-child {
    	border-right: 0;
    	border-bottom: solid 1.5px #EB3EC8;
		margin-bottom: 2em;
	}

	.form_link {
		margin-bottom: 2em;
	}

	#additional_links .lead {
    	font-size: 1.4em;
	}

	#additional_links_2 .lead {
    	font-size: 1.4em;
	}

	.report_section {
		padding: 3em 0;
	}

	.report_desc {
		padding: 0 1.5em;
	}

	.report_desc h3 {
		font-size: 1.75rem;
	}

	.report_desc {
		text-align: center;
	}

	.report_desc .icon {
		float: none !important;
		display: block !important;
		width: 50px !important;
		margin: 0 auto 0.6em !important;
	}

	.report_desc p {
		margin-bottom: 1.5em;
	}

	.cooperative_desc h3 {
   		font-size: 1.75rem;
	}

	.cooperative_desc {
    	padding: 0 0.5em;
	}

	.forms {
   		padding: 0;
	}

	#hero h2 {
		font-size: 2rem;
	}

	#cooperative {
		min-height: auto;
	}

	.cooperative_desc,
	.report_desc {
		padding: 0 0.5em;
	}

	.projekt_links {
		display: block;
	}

	.project_wrapper {
		padding: 2em 1.5em;
	}

	#offer {
		padding: 2em 0;
	}

	#process {
		padding: 2em 0;
	}

	#process .process_col {
		margin-bottom: 2em;
	}

	#failure .main_image {
		max-width: 80%;
	}
}