@charset "UTF-8";

/*
    StudioFabryka.pl
    2023-11

    for Med Euro Job
*/


:root,
[data-bs-theme=light] {
	--font: 'Inter', sans-serif;

	--primary-color: 			hsl(231 40% 46%);
	--primary-color-hsl:	 	231 40% 46%;
	--primary-color-light:  	hsl(231 40% 56%);
	--primary-color-lighter:	hsl(231 40% 66%);
	--primary-color-dark: 		hsl(231 40% 36%);

	--dark-color: 	hsl(225 15% 16%);
	--bg-light: 	hsl(228 22% 95%);
	--bs-light-rgb: 240, 241, 245;

	--xxl-space: 7.5rem;
	--xl-space: 5rem;

	--bs-font-sans-serif: var(--font);
	--bs-body-color: var(--dark-color);
	--bs-primary: var(--primary-color);
	--bs-primary-rgb: 69, 83, 163;

	--bs-border-radius-xxl: 1.5rem;
	--bs-border-radius: 1.5rem;
}


/* _basic */

@media (min-width: 1500px) {
	.container {
		max-width: calc(1470px + var(--bs-gutter-x));
	}
}

.inset-0 {
	inset: 0
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	margin-bottom: 1rem;
	line-height: 1.1;
	color: var(--primary-color);
}

h1, .h1 {font-size: clamp(3.5rem, 5vw, 5.2625rem);}
h2, .h2 {font-size: clamp(2.75rem, 4.5vw, 3.95rem);}
h3, .h3 {font-size: clamp(2.25rem, 3.5vw, 2.9625rem);}
h4, .h4 {font-size: clamp(1.75rem, 3vw, 2.21875rem);}
h5, .h5 {font-size: clamp(1.25rem, 2.5vw, 1.66875rem);}
h6, .h6 {font-size: clamp(1rem, 2vw, 1.25rem);}

.lead {font-size: clamp(1.1rem, 2vw, 1.66875rem);}

.pt-xxl {padding-top: var(--xxl-space);}
.pb-xxl {padding-bottom: var(--xxl-space);}
.py-xxl {
	padding-top: var(--xxl-space);
	padding-bottom: var(--xxl-space);
}

.mt-xxl {margin-top: var(--xxl-space);}
.mb-xxl {margin-bottom: var(--xxl-space);}
.my-xxl {
	margin-top: var(--xxl-space);
	margin-bottom: var(--xxl-space);
}

.pt-xl {padding-top: var(--xl-space);}
.pb-xl {padding-bottom: var(--xl-space);}
.py-xl {
	padding-top: var(--xl-space);
	padding-bottom: var(--xl-space);
}

.mt-xl {margin-top: var(--xl-space);}
.mb-xl {margin-bottom: var(--xl-space);}
.my-xl {
	margin-top: var(--xl-space);
	margin-bottom: var(--xl-space);
}

.btn {
    --bs-btn-padding-x: 1.875rem;
    --bs-btn-padding-y: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.25;
    --bs-btn-color: white;
    --bs-btn-border-width: var(--bs-border-width);
    --bs-btn-border-radius: var(--bs-border-radius);
}

.btn-lg {
	padding: 1.875rem 2.5rem;
	font-size: 1.25rem;
	text-transform: uppercase;
}

.btn-primary {

    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color-light);
    --bs-btn-hover-border-color: var(--primary-color-light);
    --bs-btn-active-bg: var(--primary-color-dark);
    --bs-btn-active-border-color: var(--primary-color-dark);
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

body {
	overflow-x: hidden;
	color: hsl(231deg 28.93% 41.03%);
}

main {overflow: hidden;}


/* _navbar */

.navbar-brand-image {
	height: 123px;
	transition: height 200ms;
}

.affix .navbar-brand-image {
	height: 60px;
}

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.9375rem;
    --bs-navbar-color: var(--dark-color);
    --bs-navbar-hover-color: var(--dark-color);
    --bs-navbar-active-color: white;
    --bs-navbar-brand-padding-y: 0;
    --bs-navbar-brand-margin-end: 0;
    --bs-navbar-nav-link-padding-x: 0.75rem;
	transition: padding 200ms, box-shadow 200ms;
	background-color: white;
}

.affix {
	--bs-navbar-padding-y: 0.5rem;
	box-shadow: 0 0 2rem hsl(0 0% 0% / 0.15);
}

.navbar-nav {
    --bs-nav-link-padding-y: 0.35rem;
	gap: 0.5rem;
	align-items: center;
}

.nav-link {
	font-size: 1rem;
	background-color: var(--bg-light);
	line-height: 1;
	border-radius: 1.5rem;

	&:hover,
	&:focus {
		color: var(--dark-color);
		background-color: hsl(228 22% 75%);
	}

	&.active,
	&.show {
		background-color: var(--primary-color);
	}
}

.dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-y: 0;
    --bs-dropdown-spacer: 0.125rem;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-box-shadow: 0 .5rem 1.5rem -.5rem hsl(0 0% 0% /.15);
    --bs-dropdown-link-hover-color: white;
    --bs-dropdown-link-active-color: white;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-dropdown-item-padding-y: 0.5rem;
	--bs-dropdown-link-color: white;
	--bs-dropdown-bg: var(--primary-color);

	box-shadow: var(--bs-dropdown-box-shadow);
	padding: 0.5rem;

	&::before {
		content: '';
		display: block;
		border: .5rem solid transparent;
		border-bottom-color: var(--primary-color);
		position: absolute;
		top: -1rem;
		left: 1.5rem;
	}
}

.dropdown-menu[data-bs-popper] {
    top: 125%;
}

.dropdown-item {
	position: relative;
	transition: padding 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	overflow: hidden;

	&:hover,
	&:focus,
	&.active {
		padding-left: 1.7rem;
		padding-right: .3rem;

		&::before {
			transform: translateX(0);
			opacity: 1;
		}
	}

	&::before {
		content: '>';
		display: block;
		color: var(--primary-color-lighter);
		font-family: monospace;
		transform: translateX(-1.5em);
		opacity: 0;

		position: absolute;
		left: 1rem;
		top: .5em;

		transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
}


/* _header */

.home header .container .overflow-hidden {
	z-index: 3;
	position: relative;
	transform: translate3d(0, 0, 0);

	&::before {
		content: '';
		display: block;
		width: 33%;
		height: 100%;
		background-color: hsl(var(--primary-color-hsl) / 1);
		mix-blend-mode: color;
		position: absolute;
		top: 0;
		left: -10%;
		z-index: 2;
		transform: skewX(25deg);
	}
}

header .position-absolute {
	padding: 3.75rem;
}

header h1 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	font-size: 2.960625rem;

	& small,
	& strong {
		border-radius: .35rem;
	}

	& small {
		padding: .35em 1.5em;
		font-size: 1rem;
		color: white;
		background-color: var(--dark-color);
	}

	& strong {
		padding: 0.15em .45em;
		color: var(--dark-color);
		background-color: white;
	}
}

header form {
	padding: 1.875rem;
	transform: translateY(-50%);
	position: relative;
	z-index: 3;
	margin-inline: 3.75rem;
}

.form-control {
	padding: .9rem 1.875rem;
	border-radius: 1.5rem;
	border: 3px solid var(--bg-light);

	&:is(select) {
		background-image: url(/assets/img/drop.svg);
		background-repeat: no-repeat;
		background-position: right 1.875rem center;
	}
}


/* _main */

#about {
	padding-top: calc(var(--xxl-space) - 3.75rem);

	& h2 {
		display: block;
		padding-left: 2em;
		border-left: 6px solid var(--primary-color);
	}
}

#offer .position-absolute {
	--offer-padding: clamp(1rem, 4vw, 2.5rem);
	padding: var(--offer-padding);
	background-image: linear-gradient(to top, hsl(0 0% 0% / .85), transparent);

	& .label {
		margin-left: calc(-1 * var(--offer-padding));
	}

	& img {
		transition: transform 200ms;
	}
}

.label {
	color: var(--dark-color);
	background-color: white;
	padding: 0.35em 1.25em 0.35rem 1.5rem;
	border-radius: 0 1.5rem 1.5rem 0;
	position: relative;

	&::before,
	&::after {
		content: '';
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		position: absolute;
		left: 0;
		background-repeat: no-repeat;
		background-size: contain;
	}

	&::before {
		bottom: 100%;
		background-image: url(/assets/img/label-top.svg);
	}

	&::after {
		top: 100%;
		background-image: url(/assets/img/label-bottom.svg);
	}
}

#offer a {
	> img {
		transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1);
	}

	&:hover {
		> img {transform: scale(1.1);}

		& .position-absolute img {transform: rotate(45deg);}
	}
}


.step {
	position: relative;
	flex: 1 0 0;

	& small {
		letter-spacing: 3px;
	}

	& + .step::before {
		content: '';
		display: block;
		width: 1.1875rem;
		height: 2.25rem;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url(/assets/img/next-step.svg);

		position: absolute;
		left: 0;
		top: calc(50% - 1.125rem);
	}
}


/* _footer */

.madeby {
	text-decoration: none;
	color: var(--dark-color);

	& small {
		margin-top: 0.2em;
		font-size: 0.625rem;
	}
}

footer {
	& a {
		text-decoration: none;
		color: var(--dark-color);
		transition: color 200ms;

		&:hover {
			color: var(--primary-color);
		}
	}

	& ul {
		list-style: none;
		padding: 0;
	}

	& li + li {
		margin-top: 0.75rem;
	}
}


/* _subpages */

.sub header .overflow-hidden {
	height: 370px;
}

.sub header img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.offer-box {
	text-decoration: none;
	color: var(--dark-color);
	padding: clamp(1rem, 4vw, 2.5rem);
	border: 2px solid var(--bg-light);
	transition: border-color 200ms;

	.h5 {
		transition: color 200ms;
		display: block;
	}

	&:hover {
		border-color: var(--primary-color);
		.h5 {color: var(--primary-color);}
	}
}

#apply .form-label {
	width: 33%;
	margin: 0;
}

.error, .error-mail {border-color: red;}

.error-msg {
	text-align: right;
	color: red;
	width: 100%;
	display: block;
}

textarea {
	height: 8rem;
}

aside .position-sticky {
	top: 100px;
	bottom: 50px;
}

.sub #main * a:not(.btn) {
	color: var(--primary-color);
}


.gallery a {
	overflow: hidden;
	display: block;
	border-radius: .5rem;

	& img {
		transition: transform 200ms;
		display: block;
	}

	&:hover {
		& img {transform: scale(1.1);}
	}
}



.pagination {
	display: flex
}

.pagination li {
	display: none
}

.pagination .active,
.pagination .insertPage,
.pagination li:first-child,
.pagination li:last-child {
	display: block
}

.pagination a {
	text-decoration: none;
}

.pagination a,
.pagination input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin: 0 5px;
	padding: 0;
	text-align: center;
	color: #e1e1e1;
	border: 1px solid #e1e1e1;
	transition: all .2s;
	border-radius: .5rem;
}

.pagination a:focus,
.pagination a:hover,
.pagination input:focus,
.pagination input:hover {
	color: var(--primary-color);
	border: 1px solid var(--primary-color)
}

.pagination input::placeholder {
	color: #e1e1e1;
	font-size: 16px;
	font-weight: 500
}

.pagination .active a {
	border: 1px solid var(--primary-color);
	background: var(--primary-color);
	color: #fff;
	cursor: text
}

.pagination .insertPage+.insertPage {
	display: none
}

.accordion-header,
.accordion-button {
	box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: var(--bs-light);
}





/*

		MEDIA QUERY

*/

@media (max-width: 1499px) {
	.navbar-brand-image {
		height: 85px;
	}

	.nav-link {
		font-size: clamp(0.875rem, 1.5vw, 1rem);
	}
}

@media (max-width: 1399px) {
	.nav-item {
		width: 100%;
	}

	.nav-link {
		width: 100%;
		padding: 0.75em 1em;
	}

	.dropdown-menu::before {display: none;}

	#offer a strong:is(.h4) {
		font-size: clamp(1.115rem, 2vw, 1.5rem);
	}

	#offer .position-absolute {
		--offer-padding: clamp(1rem, 2vw, 2rem);
	}
}


@media (max-width: 1199px) {
	.home header h1 {
		font-size: clamp(1.115rem, 2.5vw, 2.5rem);

		& small {
			font-size: .75rem;
		}
	}

	.sub header .position-absolute {
		align-items: flex-end !important;
	}

	.sub header h1 {
		text-align: center;
	}

	.sub header .position-absolute {
		padding: 1rem 1.5rem;
	}
}



@media (max-width: 991px) {
	header form {
		padding: 1.75rem;
		transform: none;
		margin-inline: 0;
		margin-top: 1.95rem;
	}

	#offer a > img {
		aspect-ratio: 16/6;
	}

	#offer a .position-absolute .d-flex {margin-top: 1rem;}

	.step + .step {
		padding-top: 4rem;
		margin-top: 2.5rem;
	}

	.step + .step::before {
		transform: translateX(-50%) rotate(90deg);
		left: 50%;
		top: 0;
	}

	footer {
		text-align: center;
	}
}


@media (max-width: 767px) {
	:root {
		--xxl-space: 3.75rem;
		--xl-space: 2.5rem;
	}

	header .position-absolute {
		padding: 1.75rem;
		align-items: flex-end !important;
	}

	.sub header h1 {
		font-size: clamp(1.875rem, 5vw, 5rem);
	}

	.sub header .overflow-hidden {
		height: 270px;
	}

	.form-control {border-radius: .5rem;}

	#apply .form-label {width: 100%;}
}


@media (max-width: 575px) {
	#about h2:is(.h4) {
		padding-left: 1rem;
		font-size: clamp(1.25rem, 2vw, 2rem);
		line-height: 1.5;
	}
}


@media (max-width: 440px) {
	#offer a > img {
		aspect-ratio: 16/9;
	}

	#offer .position-absolute img {
		width: 2rem;
		height: 2rem;
	}
}