@charset "UTF-8";
:root,
[data-bs-theme=light] {
	--font: 'Bitter', serif;

	--primary-color: #009245;
	--primary-color-light: #14b062;
	--primary-color-dark: #012B31;
	--bs-primary: var(--primary-color);
	--bs-primary-rgb: 0, 146, 69;

	--bs-light: #DAD6D6;
	--bs-light-rgb: 218, 214, 214;

	--bs-font-family: var(--font);

	--h1: clamp(3rem, 6vw, 6.3625rem);
	--h2: clamp(3rem, 4.5vw, 4.5rem);
	--h3: clamp(2.2rem, 3vw, 3.18125rem);
	--h4: clamp(1.5rem, 2vw, 2.25rem);
	--h5: clamp(1.1rem, 1.5vw, 1.59375rem);
	--h6: clamp(1rem, 1.1vw, 1.125rem);
	--lead: clamp(1.1rem, 1.5vw, 1.5rem);

	--xxl: 9.375rem;
	--xl: 4.6875rem;
}

html {scroll-padding-top: 100px}

body {
	font-size: 1.125rem;
	line-height: 1.66;
	color: var(--primary-color-dark);
	font-family: var(--font);
}

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 200ms, text-decoration 200ms;

	&:hover {
		text-decoration: underline;
		color: var(--primary-color-light);
	}
}

.inset-0 {
	inset:0;
}

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

.ps-xxl {padding-left: var(--xxl);}
.pe-xxl {padding-right: var(--xxl);}

.p-xxl {
	padding: var(--xxl);
}

.p-xl {
	padding: var(--xl);
}

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

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

.mb-xxl {margin-bottom: var(--xxl);}

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

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

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

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

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

@media screen and (min-width: 93.75rem) {
	.container {
		max-width: 91.875rem;
	}
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font);
	font-weight: 900;
	margin-bottom: 1rem;
	line-height: 1.2;

	& em {
		font-style: normal;
		color: var(--primary-color);
	}
}

h1, .h1 {font-size: var(--h1);}
h2, .h2 {font-size: var(--h2);}
h3, .h3 {font-size: var(--h3);}
h4, .h4 {font-size: var(--h4);}
h5, .h5 {font-size: var(--h5);}
h6, .h6 {font-size: var(--h6);}

.lead {
	font-size: var(--lead);
	font-weight: 400;
	line-height: 1.5;
}



/*
		NAVBAR
*/

.navbar {
	--bs-navbar-padding-y: 0.625rem;
	--bs-navbar-brand-padding-y: 0.3125rem;
	--bs-navbar-brand-margin-end: 0;
	--bs-navbar-nav-link-padding-x: 1.5625rem;

	transition: background-color 200ms;
}

.navbar-brand-image {
	display: block;
	height: 120px;
	transition: height 200ms;
}

.affix {
	background-color: var(--primary-color-dark);

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

.navbar .nav-link {
	opacity: 1;
	color: white;
	font-family: var(--font);
	font-size: var(--h6);
	font-weight: 900;

	&:hover,
	&:focus,
	&.active {
		text-decoration: none;
		opacity: 1;
		color: var(--primary-color);
	}
}

.dropdown-menu {
	border-radius: 0;
	border: 0;
	padding: 0;
	background-image: url(/assets/img/omnie-bg.svg);
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	max-width: 20rem;
	min-width: 20rem;
	outline: .25rem solid white;

	& li + li .dropdown-item {
		border-top: 1px solid hsl(0 0% 0% / .15);
	}
}

.dropdown-item {
	padding: .35rem 1rem;
	line-height: 1.3;
	white-space: normal;
	background-color: white;
	transition: color 200ms, background-color 200ms;

	&:hover,
	&:focus,
	&.active {
		color: white;
		text-decoration: none;
		background-color: transparent;

	}
}



/*
		HEADER
*/

header .swiper-slide img {
	height: 100vh;
}

.slogan {
	padding-top: 9.375rem;
}

header .d-flex:not(.container) div {
	flex: 1;


	& + div {
		padding-left: 3rem;
		border-left: 1px solid hsl(0 0% 100% / .2);
	}
}

header h2.h4 {
	margin-top: 1rem;
	margin-bottom: 2.5rem;
}

.home header .swiper-slide img {
  transform: scale(1.3);
  filter: brightness(0) grayscale(.5);
  transition: transform 5s cubic-bezier(.23,.56,.05,.76), filter 3s;
}

.home header .swiper-slide-visible img {
  transform: scale(1);
  filter: brightness(1) grayscale(0);
}

header .position-absolute {
  background-image: radial-gradient(circle at bottom right, transparent 30%, black);

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25vh;
    min-height: 300px;
    background-image: linear-gradient(to bottom, hsl(0 0% 0% / .8), transparent);
  }
}



/*
		MAIN CONTENT
*/

.box {
	display: block;

	& img {
		aspect-ratio: 1;
		transition: transform 600ms cubic-bezier(0,.5,.04,.94);
	}

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

	& .position-absolute {
		background-image: linear-gradient(to top, hsl(0 0% 0% / .7), hsl(0 0% 0% / 0) 70%);
	}

	&::before {
		position: absolute;
		top: -3rem;
		left: -3rem;
		z-index: 3;

		content: '';
		display: block;
		width: 6rem;
		height: 6rem;
		transform-origin: center;
		background-color: var(--primary-color);
		transform: rotate(45deg);
	}

	&.box-2::before {
		background-color: hsl(38 83% 55%);
	}
	&.box-3::before {
		background-color: hsl(354 100% 64%);
	}
}

#o-mnie {
	background-color: var(--primary-color-dark);
	background-image: url(/assets/img/omnie-bg.svg);
	background-position: right center;
	background-size: cover;
	background-repeat: no-repeat;
}



#zakres-uslug, #sprawdz-takze {
	background-image: url(/assets/img/tree-bg.png);
	background-repeat: no-repeat;
	background-position: left -450px bottom -250px;

  .col-md-6 {margin-bottom: 100px;}

  .shadow {
    box-shadow: 0 1.25rem 3.75rem hsl(0 0% 0% / .1) !important;
  }

	a {
		color: var(--primary-color-dark);
		background-color: #fff;
    position: relative;
    padding-top: calc(100px + 3rem) !important;

    &::after {
      content: '';
      display: block;
      width: 0;
      height: 3px;
      background-color: var(--primary-color);

      position: absolute;
      bottom: 0;
      left: 0;
      transition: width 500ms ease;
    }

		&:hover {
			text-decoration: none;

      &::after {
        width: 100%;
      }

      .rounded-circle img {
        transform: scale(1.1)
      }
		}
	}

	.rounded-circle {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
		border: 10px solid hsl(148, 38%, 91%);

    img {transition: transform 300ms ease-out}
	}
}

#sprawdz-takze {
	background-image: none;
}


#galeria .swiper, #sprawdz-takze .swiper {
	padding-bottom: var(--xl);
}

#galeria .swiper-pagination, #sprawdz-takze .swiper-pagination {
	bottom: 0;
}

#galeria .swiper-pagination-bullet, #sprawdz-takze .swiper-pagination-bullet {
	width: 1rem;
	height: 1rem;
	background-color: var(--primary-color);
}


#mapa iframe {
	display: block;
	width: 100%;
	height: 500px;
}


footer a {
	color: var(--primary-color-dark);
	transition: color 200ms;

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

.madeby small {font-size: 0.625rem;}



/*
		SUB CONTENT
*/

.card-image,
.card-img-top {
	display: block;
	overflow: hidden;
	border-radius: .25rem;

	& img {
		transition: .4s cubic-bezier(0.075, 0.82, 0.165, 1);
	}
}

.card {
	cursor: pointer;

	&:hover {
		& .card-image img,
		& .card-img-top img {
			transform: scale(1.1);
		}

		& .card-title-link {
			color: var(--primary-color);
		}
	}
}

.sub header .swiper-slide img {
	height: 644px;
}


#sprawdz-takze .swiper {
	overflow: visible;
}


#pliki a {
	transition: all 200ms;

	&:hover {
		filter: brightness(1.1);
		text-decoration: none;
	}
}

#form textarea {
	height: 13.9rem;
}

.gallery a {
	overflow: hidden;
	display: block;

	& img {
		transition: transform 300ms;
	}

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

.form-control {
  border-radius: .25rem;

  &:hover {
    border-color: hsl(0 0% 50%);
  }

  &:focus {
    border-color: var(--primary-color);
  }

  &.error {
    border-color: red;
  }
}

.error-msg {color: red;}

.btn {
  font-weight: bold;
  padding: 1.25rem 1.875rem;
  border-radius: 0;
}

.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);
}

main {overflow: hidden;}

/*
		MEDIA QUERIES
*/

@media screen and (max-width: 1199px) {
	.offcanvas {
		background-color: var(--primary-color-dark) !important;
	}

	.dropdown-menu {
		background-image: none;
		background-color: transparent;
		outline: none;
	}

	.dropdown-item {
		background-color: transparent;
		color: white;
		border: 0 !important;
	}

	.dropdown-item.active {color: var(--primary-color);}

	#o-mnie .ps-xxl,
	#o-mnie .pe-xxl {
		--xxl: 2rem;
	}
}



@media screen and (max-width: 991px) {
	footer h4, footer h4.mb-0 {
		flex-direction: column;
		margin-bottom: 2rem !important;
		text-align: center;
	}

  .home header .swiper-slide img {
    object-position: 70% 0;
  }

	.sub header .swiper-slide img {
		height: 400px;
	}
}


@media screen and (max-width: 767px) {
	.slogan .d-flex h3 {font-size: var(--h4);}
	.slogan .d-flex p {font-size: 0.75rem;}
}



@media screen and (max-width: 500px) {
	:root {
		--xxl: 3rem;
		--xl: 1.5rem;
	}

	#galeria .swiper, #sprawdz-takze .swiper {
		padding-bottom: var(--xxl);
	}

	.navbar-brand-image {height: 80px;}

	.slogan {
		text-align: center;
	}

	.slogan .d-flex {
		flex-direction: column;
	}
	.slogan .d-flex div {
		border-left: 0 !important;
		padding: 0 !important;
		text-align: center;

		& h3 {margin-bottom: 0.25rem;}
	}
}