/* Name: New styles
Author: Bartosz Chomont
Date: 11.2025
Version: 1.0.1 */

/******************************

        00 - ZMIENNE
        01 - RESET & NORMALIZE
		02 - OGÓLNE & GLOBALNE KLASY
        03 - LAYOUT
        04 - TYPOGRAFIA
        05 - OBRAZKI & VIDEO
        06 - KOMPONENTY (formularze, slidery, modale, swiper)
		07 - MISC
        08 - HEADER & FOOTER
		09 - SEKCJE GLOBALNE
        10 - STRONA GŁÓWNA
		11 - PODSTRONY
    
******************************/

/*----------------------------------------*/
/*  00 - ZMIENNE
/*----------------------------------------*/

	:root {
		--color-primary: #C1E5FF;
		--color-secondary: #679AB7;
		--color-accent: #C0CFB2;
		--color-text: #2B3133;
		--bg-lighter: #ffffff;
		--bg-darker: #f4f2ef;
		
		--font-primary: 'BDSans', sans-serif;
  	 	--font-secondary: 'Montserrat', sans-serif;
	}

	
/*----------------------------------------*/
/*  01 - RESET & NORMALIZE
/*----------------------------------------*/

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html {
	scroll-behavior: smooth;
}

embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	font-size: 14px;
	overflow-x: hidden;
}

body {
	font-family: var(--font-secondary);
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	overflow-x: hidden;
	color: var(--color-text);
}

/*----------------------------------------*/
/*  02 - OGÓLNE & GLOBALNE KLASY
/*----------------------------------------*/

section:nth-of-type(odd) {
		background-color: var(--bg-lighter);
	}
	
	section:nth-of-type(even) {
		background-color: var(--bg-darker);
	}

a {
	color: var(--color-secondary);
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: all 0.3s ease;
}

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

.primary-button {
	display: inline-block;
	font-size: 18px;
	padding: 16px 32px;
	border: 1px solid var(--color-secondary);
	border-radius: 50px;
	background: var(--color-secondary);
	color: #fff;
	text-decoration: none;
	text-align: center;
	transition: all 0.4s ease-in-out;
}

.primary-button:hover {
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-secondary-dark);
}

.secondary-button {
	display: inline-block;
	font-size: 18px;
	padding: 16px 32px;
	border: 1px solid var(--color-secondary);
	border-radius: 50px;
	background: transparent;
	color: var(--color-secondary);
	text-decoration: none;
	text-align: center;
	transition: all 0.4s ease-in-out;
}

.secondary-button:hover {
	background: var(--color-secondary);
	color: #fff;
}

.tetriary-button {
	color: var(--color-secondary);
	font-weight: 500;
	text-transform: uppercase;
}

.tetriary-button:hover {
	color: var(--color-primary);
}

.tetriary-container {
	width: 100%;
	text-align: center;
}

.section-subtitle {
	display: inline-block;
	margin-bottom: 8px;
	font-size: 16px;
	color: var(--text-primary);
	font-weight: 600;
	text-transform: uppercase;
}

.section-title {
	display: inline-block;
	margin-bottom: 16px;
}

.section-intro {
	font-size: 16px;
	line-height: 1.5;
}

.layout-1-col .section-header {
	width: 100%; max-width: 700px; margin: 0 auto; 
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-wrap: balance;
}

.layout-1-col .section-intro {
	display: block;
	margin-bottom: 0;
}

.layout-2-cols .section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.layout-2-cols .section-intro {
	display: inline-block;
	margin-bottom: 32px;
}

.section-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.section-list li {
	margin-bottom: 0;
	font-size: 14px;
}

.c-white {
	color: #fff;
}

.c-black {
	color: #000;
}

.bg-pattern {
    position: relative;
    background-image: url(https://dentima.marketize.com.pl/wp-content/uploads/2025/10/e-icon2.png);
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: top;
    /* background-blend-mode: lighten; */
    background-color: #fff;
}

@media (max-width: 1100px) {
	.onlydesktop {
		display: none;
	}
}

@media (min-width: 1101px) {
	.onlymobile {
		display: none;
	}
}
	
/*----------------------------------------*/
/*  03 - LAYOUT
/*----------------------------------------*/

section {
	position: relative;
	padding: 80px 0;
}

.flex {
	display: flex;
	flex-direction: row;
}

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

.grid.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
}

.grid.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.layout-1-col {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.layout-2-cols {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 80px;
}

.layout-2-cols.reverse {
	flex-direction: row-reverse;
}

.layout-3-cols {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 48px;
}

.layout-5-cols {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 32px;
}

@media (max-width: 1100px) {
	.flex:not(.mobile-header):not(.mobile-row) {
		flex-direction: column;
	}
	
	.flex-column.ai-center {
		align-items: flex-start;
	}
	
	.flex-column.txt-center {
		text-align: left;
	}
	
	.layout-1-col {
		gap: 48px;
	}
	
	.layout-2-cols {
		gap: 32px;
	}
	
	.layout-2-cols, .layout-2-cols.reverse {
		flex-direction: column;
	}
	
	.layout-2-cols.mobile-reverse, .layout-2-cols.reverse.mobile-reverse {
		flex-direction: column-reverse;
	}
	
	.layout-3-cols {
		flex-direction: column;
		gap: 48px;
	}
	
	.layout-5-cols {
		flex-direction: column;
	}
	
	.layout-1-col .section-intro {
		text-align: left;
	}
	
	.layout-1-col .section-header {
		text-align: left;
		align-items: flex-start;
	}
	
	.mobile-reverse {
		flex-direction: column-reverse;
	}
	
	.grid.grid-2, .grid.grid-3 {
		grid-template-columns: repeat(1, 1fr);
	}
}

.f-nowrap {
	flex-wrap: nowrap;
}

.ai-center {
	align-items: center;
}

.ai-start {
	align-items: flex-start;
}

.jc-center {
	justify-content: center;
}

.jc-space-between {
	justify-content: space-between;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 12px;
	position: relative;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

.col {
	flex: 1;
}

@media (min-width: 1101px) {
	
	.col-d-16 {
		width: 16.66%;
	}
	
	.col-d-20 {
		width: 20%;
	}
	
	.col-d-25 {
		width: 25%;
	}
	
	.col-d-33 {
		width: 33.33%;
	}
	
	.col-d-50 {
		width: 50%;
	}
	
	.col-d-66 {
		width: 66.66%;
	}
}

@media (max-width: 1100px) {
	.col-m-100 {
		width: 100%;
	}
}

@media (min-width: 1101px) {
	
}

@media (max-width: 1100px) {
	.mobile-pt-0 {
		padding-top: 0;
	}
}

.txt-left {
	text-align: left;
}

.txt-center {
	text-align: center;
}

.txt-right {
	text-align: right;
}	
	
/*----------------------------------------*/
/*  04 - TYPOGRAFIA
/*----------------------------------------*/

@font-face {
    font-family: 'BDSans';
    src: url('https://dentysta-artysta.pl/wp-content/uploads/2025/09/BDSans-Black.woff2') format('woff2');
    font-weight: 900; /* Black */
    font-style: normal;
	font-display: swap;
}

p {
	font-family: var(--font-secondary);
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	margin-bottom: 16px;
}

p strong {
	font-weight: 700;
}

span {
	font-weight: 400;
}

ul li,
ol li {
	font-size: 16px;
	margin-bottom: 16px;
	line-height: 1.2;
	list-style-position: inside;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary), Helvetica, Arial, Lucida, sans-serif;
	font-style: normal;
	font-weight: 600;
	line-height: 1.2;
	color: #000;
	margin-top: 0;
	margin-bottom: 0;
}

h3, h4 {
	font-family: var(--font-secondary), Helvetica, Arial, Lucida, sans-serif;
	font-weight: 600;
}

h1, .hero-content__title {
	font-size: 42px;
	line-height: 1.25;
	font-weight: 600;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 4px;
}

h2, .section-title {
    font-size: 36px;
	text-transform: uppercase;
}

h3 {
	font-size: 24px;
}



h4 {
	font-size: 20px;
}

h5 {
	
}

h6 {
	
}

@media (max-width: 1100px) {
	h1, .hero-content__title {
		font-size: 36px;
	}
	h2, .section-title {
		font-size: 32px;
	}
	h3 {
		font-size: 24px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 12px;
	}
	h6 {
		font-size: 11px;
	}
}

.semi-bold {
	font-weight: 600;
}

.text-small {
	font-size: 14px;
}

/*----------------------------------------*/
/*  05 - OBRAZKI & VIDEO
/*----------------------------------------*/

img {
	width: 100%;
	height: auto;
	display: block;
}

.img-square {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center center;
	border-radius: 20px;
}

.img-3x2 {
	width: 100%;
	height: auto;
	aspect-ratio: 3/2;
	object-fit: cover;
	object-position: center center;
}

.img-2x3 {
	width: 100%;
	height: auto;
	aspect-ratio: 2/3;
	object-fit: cover;
	object-position: center center;
}

.img-1x2 {
	width: 100%;
	height: auto;
	aspect-ratio: 1/2;
	object-fit: cover;
	object-position: center center;
}

.img-2x1 {
	width: 100%;
	height: auto;
	aspect-ratio: 2/1;
	object-fit: cover;
	object-position: center center;
}

.img-1x3 {
	width: 100%;
	height: auto;
	aspect-ratio: 1/3;
	object-fit: cover;
	object-position: center center;
}

.img-3x1 {
	width: 100%;
	height: auto;
	aspect-ratio: 3/1;
	object-fit: cover;
	object-position: center center;
}

.img-1x4 {
	width: 100%;
	height: auto;
	aspect-ratio: 1/4;
	object-fit: cover;
	object-position: center center;
}

.img-4x1 {
	width: 100%;
	height: auto;
	aspect-ratio: 4/1;
	object-fit: cover;
	object-position: center center;
}

.img-16x9 {
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	object-fit: cover;
	object-position: center center;
}

.img-9x16 {
	width: 100%;
	height: auto;
	aspect-ratio: 9/16;
	object-fit: cover;
	object-position: center center;
}

.video-container {
flex: 1;
width: 100%;
max-width: 100%;
aspect-ratio: 16 / 9;
}

.video-container iframe {
	width: 100%;
	height: 100%;
}


/*----------------------------------------*/
/*  06 - KOMPONENTY
/*----------------------------------------*/

.wpcf7 input:not([type="checkbox"]), .wpcf7 textarea {
	width: 100%;
    line-height: 1;
    margin: 0;
    padding: 16px 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 0;
}

.wpcf7-submit {
	background: #000;
	color: #fff;
	border-radius: 0;
}

span[data-name="acceptance-137"] .wpcf7-list-item-label {
		font-size: 14px;
	}
	
	span[data-name="acceptance-137"] .wpcf7-list-item-label a {
		color: #000;
	}

/*----------------------------------------*/
/*  07 - MISC
/*----------------------------------------*/




/*----------------------------------------*/
/*  08 - HEADER & FOOTER
/*----------------------------------------*/





/*----------------------------------------*/
/*  09 - SEKCJE GLOBALNE
/*----------------------------------------*/

#cta {
	background: var(--color-primary);
}

.metamorfoza-image, .metamorfoza-content {
	width: 50%;
}

@media all and (max-width: 768px) {
	.metamorfoza-image, .metamorfoza-content {
	width: 100%;
}
}


/*----------------------------------------*/
/*  10 - HOMEPAGE
/*----------------------------------------*/

section.hero {
	background: url('https://dentysta-artysta.pl/wp-content/uploads/2025/11/hero-new.jpg');
	background-size: cover;
	min-height: 700px;
	position: relative;
}

.hero .col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

.hero .section-subtitle, .hero .hero-content__title { 
color: #fff;
}

.hero .section-subtitle {
	margin-bottom: 0;
	line-height: 1;
}

.hero .layout-2-cols .section-intro {
	margin-bottom: 16px;
}

.hero .section-intro { 
color: #e1e1e1; /* DO SPRAWDZENIA KOLOR */
}

.hero .hero-buttons { 
display: flex;
	gap: 12px;
}

.hero .hero-buttons .primary-button { 
background: #fff;
border-color: #fff;
color: #000;
}

.hero .hero-buttons .secondary-button { 
background: transparent;
border-color: #fff;
color: #fff;
}

@media all and (max-width: 768px) {
	section.hero {
		background-position: 63%;
		z-index: 0;
		min-height: auto;
	}
	
	section.hero::after {
	content: "";
    position: absolute;
    inset: 0;
	width: 100%;
	height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: -1;
	}
	
	section.hero .hero-buttons {
		flex-direction: column;
		width: 100%;
	}
}

section.uslugi {
	background-image:url('https://dentysta-artysta.pl/wp-content/uploads/2025/11/Ellipse-1.png');
}

.wyrozniki-ikona {
	height: 120px;
}

.wyrozniki-col {
	text-align: center;
}

.wyroznik-text {
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	text-wrap: balance;
}

.wyrozniki-tytul {
	margin-top: 16px;
	margin-bottom: 8px;
	font-size: 20px;
	font-weight: 600;
	color: #424241;
}

.wyrozniki-opis {
	font-size: 16px;
	color: #909090;	
	margin-bottom: 0;
}

.uslugi .splide__slide {
	background: #fff; background-size: cover; border-radius: 20px;
}

.uslugi .splide__slide img {
	width: 100%; height: auto; aspect-ratio: 10/7; object-fit: cover; display: block; margin: 0 auto; border-radius: 20px 20px 0 0;
}

.uslugi .splide__slide .box {
	width: 100%;
	padding: 24px;
	display: flex;
    flex-direction: column;
	gap: 16px;
}

.uslugi .splide__slide .box .box-top {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.uslugi .splide__slide .problem, .uslugi .splide__slide .opis {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
	text-transform: none;
	color: #909090;
}

.uslugi .splide__slide h3 {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	text-transform: none;
	color: #000;
}

.uslugi .splide__slide span.tetriary-button {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 600;
	text-transform: none;
	color: var(--color-secondary);
}

.metamorfozy h3 {
	font-size: 20px;
	 margin-top: 0;
        margin-bottom: 24px;
}

	 .metamorfoza-single {
		display: flex;
		align-items: center;
        gap: 80px;
        background: var(--secondary-color);
		color: #fff;
        padding: 0;
        margin: 0;
    }

.metamorfoza-single.reverse {
	flex-direction: row-reverse;
}
	
	.metamorfoza-image, .metamorfoza-content {
		flex: 1;
	}
	
	.metamorfoza-content {
		padding: 0;
	}
	
	.metamorfoza-header {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	
	.metamorfoza-header__title {
		font-size: 24px;
		font-weight: 600;
	}

 @media all and (max-width: 768px) {
	 
	 .metamorfoza-single.reverse {
	flex-direction: column;
	 }
	 
        .metamorfoza-single {
            gap: 20px;
        }

	.metamorfoza-single {
		flex-direction: column;
		gap: 20px;
		width: 100%;
	}
	
	.metamorfoza-image {
		width: 100%;
	}
	
	.metamorfoza-content {
		padding: 0;
	}
}

.lekarze .layout-5-cols .lekarz {
	flex: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-align: center;
}

.lekarze .layout-5-cols .lekarz img {
	margin-bottom: 16px;
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	border: 1px solid var(--color-secondary);
}

.lekarze .layout-5-cols .lekarz .tetriary-button {
	margin-top: 16px;
}

/*----------------------------------------*/
/*  11 - PODSTRONY
/*----------------------------------------*/

.layout-2-cols .section-content > *:last-child {
    margin-bottom: 0;
}
.layout-2-cols .section-content ul li:last-child {
margin-bottom: 0;
}

.layout-2-cols .section-header {
		margin-bottom: 32px;
	}
	
	.layout-2-cols .section-header .section-title {
		margin-bottom: 0px;
	}

section:not(.usluga-hero):not(.hero) .layout-2-cols .primary-button {
		margin-top: 32px;
	}

/* Usługa hero */
.usluga-hero .hero-content__title {
		margin-bottom: 16px;
	}
	
	.usluga-hero .layout-2-cols .section-intro {
		margin-bottom: 24px;
	}
	
	.usluga-hero ul {
		margin-bottom: 32px;
	}
	
	.usluga-hero ul li {
		font-weight: 600;
		text-transform: uppercase;
		position: relative;
		padding-left: 32px;
		list-style-type: none;
	}
	
	.usluga-hero ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 25'><path d='M3.8 13.52L7.84 17.3L8.59 18L9.35 17.31L20.21 7.44L18.71 6L8.59 15.2L5.32 12.1L3.8 13.52Z'/></svg>")
    /* background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM18.0303 8.53033L10.0303 16.5303C9.73744 16.8232 9.26256 16.8232 8.96967 16.5303L5.96967 13.5303C5.67678 13.2374 5.67678 12.7626 5.96967 12.4697C6.26256 12.1768 6.73744 12.1768 7.03033 12.4697L9.5 14.9393L16.9697 7.46967C17.2626 7.17678 17.7374 7.17678 18.0303 7.46967C18.3232 7.76256 18.3232 8.23744 18.0303 8.53033Z" fill="%2300C3A5"></path></svg>); */
    /* background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23d31417" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>); */
	}
	
	.usluga-hero .buttons {
		margin-bottom: 16px;
	}
	
/* CTA Nano */
	.cta-nano .col {
		width: 100%;
		max-width: 700px;
		margin: 0 auto;
		text-wrap: balance;
	}
	
	.cta-nano .col .section-intro {
		margin-bottom: 40px;
	}
	
/* Three icons */
	.three-icons .layout-2-cols {
	gap: 48px;
}

.three-icons img {
	width: 48px;
	height: 48px;
	margin-bottom: 24px;
}

.three-icons i {
	font-size: 48px;
	margin-bottom: 24px;
}

.three-icons h4 {
	margin-bottom: 12px;
}























/* RÓŻNE - do sprawdzenia */

.team__title {
	text-align: center;
	margin-bottom: 50px;
	margin-top: 0;
}

.team .splide {
	max-width: 1920px;
	margin: 0 auto;
}

.team-member__name {
	margin-top: 0;
	margin-bottom: 10px;
}

.team-member__content {
	font-size: 14px;
	padding: 1rem 1.5rem;
	border: 2px solid #303030;
}

.team-member__description {
	text-transform: uppercase;
	line-height: 1.6em;
}

.team img {
	width: 100%;
}

.team .splide__arrow {
	position: initial;
	width: auto;
	height: auto;
	background: none;
	border: 0;
	transform: none;
	color: #fff;
	font-size: 30px;
	padding: 20px;
}

.team .splide__arrow:hover, .team .splide__arrow:focus {
	color: #E09900;
}

.team .splide__arrow--prev {
	margin-right: 10px;
}

.team .splide__arrows {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	margin-bottom: 20px;
}

.splide-inline-arrows .splide__arrow {
	position: initial;
	width: auto;
	height: auto;
	background: none;
	border: 0;
	transform: none;
	font-size: 1.4rem;
}

.splide-inline-arrows .splide__arrow:hover, .splide-inline-arrows .splide__arrow:focus {
	color: #e09900;
}

.splide-inline-arrows .splide__arrows {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 40px auto 0;
	max-width: 400px;
	width: 100%;
}

	
	.team-slider-wrapper,
.team {
    width: 100%;
	padding: 0;
}
	
.team-slider-wrapper {
    position: relative;
}

.team-slider-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 80px; /* szerokość efektu fade */
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, transparent, #000); /* kolor tła - dostosuj */
    z-index: 10;
}
	
	.team .splide__arrows {
		position: absolute;
		top: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 80px);
    margin-bottom: 20px;
    margin-left: -40px;
	}
	

	
	.splide__pagination {
		position: inherit;
		margin-top: 25px;
	}
	
	.splide__pagination__page.is-active {
		background: var(--color-secondary);
	}
	
	.bxl::before, .bxr::before {
		content: "";
    background: #cccccc;
    width: 17px;
    height: 3px;
    display: block;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 2px;
    position: absolute;
	}
	
	.bxl::after, .bxr::after {
		content: "";
    background: #cccccc;
    width: 17px;
    height: 3px;
    display: block;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-radius: 2px;
    position: absolute;
	}
	
	.bxl::before {
		top: 18px;
    left: 0px;
	}
	
	.bxl::after {
		top: 8px;
    left: 0px;
	}
	
	.bxr::before {
		top: 8px;
		right: 0px;
	}
	
	.bxr::after {
		top: 18px;
    	right: 0px;
	}
	
	


	@media (max-width: 768px) {
		.splide .opis {
			display: none;
		}
		
		.splide .linked-box {
			padding: 16px;
		}
		
		.splide .linked-box .box { 
			gap: 0;
			padding: 0;
		}
		
		.splide .primary-button {
			font-size: 14px;
			padding: 8px 16px;
			margin-top: 12px!important;
		}
		
		.splide h3 {
			margin-top: 16px;
		}
	}
	

	/* Efekty leczenia */

.text .bal-after img, .text .bal-before img {
height: 100%!important;
}
	
	.metamorfoza-header__description p {
		font-size: 14px;
	}

@media all and (max-width: 479px) {
    .beforeAfter {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .bal-container {
        margin: 0px 0px;
    }
	
	.metamorfoza-header {
		padding: 0 20px 20px 20px;	
		
	}
	
}

@media all and (max-width: 599px) {
    .beforeAfter {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .bal-container {
        margin: 0px 0px;
    }
}

@media all and (min-width: 480px) and (max-width: 768px) {
    .beforeAfter {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .bal-container {
        margin: 0 0;
    }
}

@media all and (min-width: 768px) and (max-width: 959px) {
    .beforeAfter {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        height: 1100px;
        padding: 10px;
    }
    .bal-container {
        margin: 0px 0;
    }
}

@media all and (min-width: 960px) and (max-width: 1199px) {
    .beforeAfter {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .bal-container {
        margin: 0 0px;
    }
}

@media all and (min-width: 1199px) {
    .beforeAfter {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }
    .bal-container {
        margin: 0;
    }
}


/* Before After Container */

.bal-container {
    position: relative;
    width: 100%;
    height: 100%;
	border-radius: 20px;
    cursor: grab;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bal-after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bal-before {
    display: block;
    position: absolute;
    top: 0;
    /* right: 0; */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    overflow: hidden;
}

.bal-before-inset {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
img {
    user-drag: none;
    user-select: none;
    pointer-events: none;
  }
.bal-after img,
.bal-before img {
    object-fit: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    object-position: 50% 50%;
    top: 0;
    bottom: 0;
    left: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    
}


.bal-beforePosition {
    background: #121212;
    color: #fff;
    left: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}

.bal-afterPosition {
    background: #121212;
    color: #fff;
    right: 0;
    pointer-events: none;
    border-radius: 0.2rem;
    padding: 2px 10px;
}

.beforeLabel {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.afterLabel {
    position: absolute;
    bottom: 0;
    margin: 1rem;
    font-size: 1em;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/* handle and arrow */

.bal-handle {
    height: 41px;
    width: 41px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -21px;
    border: 2px solid #fff;
    border-radius: 1000px;
    z-index: 20;
    pointer-events: none;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.handle-left-arrow,
.handle-right-arrow {
    width: 0;
    height: 0;
    border: 6px inset transparent;
    position: absolute;
    top: 50%;
    margin-top: -6px;
}

.handle-left-arrow {
    border-right: 6px solid #fff;
    left: 50%;
    margin-left: -17px;
}

.handle-right-arrow {
    border-left: 6px solid #fff;
    right: 50%;
    margin-right: -17px;
}

.bal-handle::before {
    bottom: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgb(12, 12, 12);
}

.bal-handle::after {
    top: 50%;
    margin-top: 20.5px;
    box-shadow: 0 0 5px rgb(12, 12, 12);
}

.bal-handle::before,
.bal-handle::after {
    content: " ";
    display: block;
    width: 2px;
    background: #fff;
    height: 9999px;
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
}