/*
 Theme Name:   villa_aronia
 Theme URI:    http://villaaronia.pl
 Description:  Dedykowany motyw dla Villa Aronia oparty na Underscores
 Author:       Twoje Imię
 Author URI:   http://villaaronia.pl
 Version:      1.0.0
 Text Domain:  villa_aronia
*/

/* montserrat-100 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/montserrat-v31-latin-ext-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-100italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/montserrat-v31-latin-ext-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/montserrat-v31-latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-200italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/montserrat-v31-latin-ext-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v31-latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-300italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/montserrat-v31-latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-500italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-600italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-700italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v31-latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-800italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/montserrat-v31-latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-900italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/montserrat-v31-latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-300 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/merriweather-v33-latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-300italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/merriweather-v33-latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-v33-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/merriweather-v33-latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/merriweather-v33-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-500italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/merriweather-v33-latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-600 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/merriweather-v33-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-600italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/merriweather-v33-latin-ext-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-v33-latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-700italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/merriweather-v33-latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-800 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/merriweather-v33-latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-800italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/merriweather-v33-latin-ext-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-900 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/merriweather-v33-latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* merriweather-900italic - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/merriweather-v33-latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



























:root {
	--primary: #40A5C3;
	--primary-color: #40A5C3;
	
	--text-light: #FFFFFF;
	
	
	--text-primary-dark: #2C3E50;
	--text-secondary-dark: #34495E;
	--text-primary-light: #FDFEFE;
	--text-secondary-light: #EBF5FB;
	
	--border-radius: .375rem;
	
/* 	--background-primary: #FFFEFD; */
	--background-primary: #F4F6F7;
	--background-secondary: #F7F9Fa;
	
	
	--white: #FFFFFF;
	
	
	--background-primary: #F5F7F8;
	--background-secondary: #F8FAFB;
	
	
	--background-secondary: #FFFEFC;
	
	--bg-primary: #FCFCFC;
	--bg-secondary: #FAFAFA;
}

ul {
	list-style-type: none;
}





* {
	box-sizing: border-box;
	font-family: "Montserrat", Arial, sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
}

button {
	
	background-color: transparent;
	border: none;
	font-family: "Montserrat", Arial, sans-serif;
	margin: 0;
	outline: none;
	padding: 0;
	
}

body {
	background-color: var(--bg-primary);
}

.bg-white {
	background-color: var(--white);
}

.bg-primary {
	background-color: var(--bg-primary);
}

.bg-secondary {
	background-color: var(--bg-secondary);
}

.bg-image-primary::before, .bg-image-secondary::before {
	content: "";
/*     background-attachment: fixed; */
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
    
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 110lvh;
    
    
    
    opacity: 0.05;
    
    z-index: -1;
    pointer-events: none;
	filter: grayscale(60%) brightness(100%) contrast(1);	
}

.bg-image-primary::before {
	background-image: url('https://villaaronia.ustka.pl/wp-content/uploads/2026/02/AdobeStock_627286128-scaled.jpeg'); 
}

.bg-image-secondary::before {
	background-image: url('https://villaaronia.ustka.pl/wp-content/uploads/2026/02/2-Morze-Ustka.jpg'); 
}













.background-light {
	background-color: #fff;
}

section {
	padding: 3rem 0;
}



@media (min-width: 768px) {
	section {
		padding: 4rem 0;
	}
}


@media (min-width: 1200px) {
	section {
		padding: 5rem 0;
	}
}

section:has(.first-box) {
	background-color: var(--bg-primary);
}

.bg-white {
	background-color: var(--white);
}

.container, .container-fluid, .container-small {
	margin: auto;
    padding: 0 1.5rem;
    width: 100%;
}

.container-small {
	max-width: 800px;
}

.container-1920 {
	margin: auto;
	max-width: 1920px;
	width: 100%;
}

@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;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1420px;
    }
	.container-fluid {
		max-width: 1720px;
	}
}





.px-small {
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 1200px) {
	.px-small {
		padding-left: 2rem;
		padding-right: 2rem;
	}	
}

.py-small {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

@media (min-width: 1200px) {
	.py-small {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}	
}

.px-medium {
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

@media (min-width: 1200px) {
	.px-medium {
		padding-left: 3.5rem;
		padding-right: 3.5rem;
	}	
}

.py-medium {
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

@media (min-width: 1200px) {
	.py-medium {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}	
}

.px-large {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
}

@media (min-width: 1200px) {
	.px-large {
		padding-left: 5rem;
		padding-right: 5rem;
	}	
}

.py-large {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 1200px) {
	.py-large {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}	
}



.row-gap-zero {
	display: flex;
	flex-direction: column;
	row-gap: 0;
}

.row-gap-small {
	display: flex;
	flex-direction: column;
	row-gap: 1.75rem;
}

@media (min-width: 1200px) {
	.row-gap-small {
		row-gap: 2.75rem;
	}
}

.row-gap-large {
	display: flex;
	flex-direction: column;
	row-gap: 2.75rem;
}

@media (min-width: 1200px) {
	.row-gap-large {
		row-gap: 3.25rem;
	}
}

.row-gap-max {
	display: flex;
	flex-direction: column;
	row-gap: 3.75rem;
}

@media (min-width: 1200px) {
	.row-gap-max {
		row-gap: 4.75rem;
	}
}

section:has(.first-box) {
	padding-top: 0;
}

.first-box {
	background-color: #FFF;
	border-radius: var(--border-radius);
	box-shadow: 
		0 .125rem .25rem rgba(0, 0, 0, 0.02), 
      	0 .5rem 2rem rgba(0, 0, 0, 0.04);
	position: relative;
	margin-top: -4rem;
	z-index: 200;
}

@media (min-width: 1200px) {
	.first-box {
		margin-top: -10rem;
	}
}







.list-box {
	border-radius: var(--border-radius);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
/* 	row-gap: 2rem; */
}

@media (min-width: 1200px) {
	.list-box {
/* 		column-gap: 3rem; */
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
}

.list-box ul {
/* 	display: flex;
	flex-direction: column; */
/* 	row-gap: 1rem; */
}

.list-box ul li {
/* 	padding: .375rem 1rem;
	background-color: var(--background-primary);
	border-radius: var(--border-radius);

	border: 1px solid #f0f0f0; /* Subtelna ramka */
/* 	border-left: 2px solid var(--primary); */ */
	position: relative;
}


.list-box > div:first-child ul, .text-block ul {
	column-gap: 2rem;
	column-count: 1;
}

@media (min-width: 768px) {
	.list-box > div:first-child ul, .text-block ul {
		column-gap: 2rem;
		column-count: 2;
	}
}


@media (min-width: 992px) {
	.list-box > div:first-child ul, .text-block ul {
		column-gap: 2rem;
		column-count: 3;
	}
}


@media (min-width: 1200px) {
	.list-box > div:first-child ul, .text-block ul {
		column-gap: 2rem;
		column-count: 4;
	}
}

.list-box > div:first-child ul li, .text-block ul li {
	break-inside: avoid;
	display: block;
	padding: 0 1rem;
	position: relative;
}

.list-box > div:first-child ul li:before, .text-block ul li::before {
	background-color: var(--primary);
	border-radius: 50%;
	content: "";
	height: .25rem;
	left: 0;
	position: absolute;
	top: .875rem;
	width: .25rem;
}

a.underline {
	text-decoration: underline;
}


/* .list-box > div:first-child ul li {
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 
		0 .125rem .25rem rgba(0, 0, 0, 0.02), 
        0 .5rem 2rem rgba(0, 0, 0, 0.04);
	height: 10rem;
	width: 100%;
} */

.list-box > div:last-child ul, .list-box ul.boxes  {
	gap: 1rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}



@media (min-width: 768px) {
	.list-box > div:last-child ul, .list-box ul.boxes  {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
	
@media (min-width: 1200px) {
	.list-box > div:last-child ul, .list-box ul.boxes  {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.list-box > div:last-child ul li, .list-box ul.boxes li {
	align-items: center;
	background-color: var(--background-primary);
	background-color: #fff;
	border-radius: var(--border-radius);
	box-shadow: 
		0 .125rem .25rem rgba(0, 0, 0, 0.03), 
        0 .5rem 2rem rgba(0, 0, 0, 0.06);
	column-gap: 1rem;
	display: flex;
/* 	height: 10rem; */
	padding: 1.5rem;
	width: 100%;
}

.list-box > div:last-child ul li svg, .list-box ul.boxes li svg {
	fill: var(--primary);
	flex-shrink: 0;
	height: 2rem;
	width: 2rem;
}




.image-wrapper-3 {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 14rem);
	margin-left: -1rem;
	margin-right: -1rem;
}

@media (min-width: 768px) {
	.image-wrapper-3 {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(4, 5rem);
	}		
}

@media (min-width: 992px) {
	.image-wrapper-3 {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(4, 5.75rem);
	}
}

@media (min-width: 1200px) {
	.image-wrapper-3 {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(4, 6.5rem);
	}
}

@media (min-width: 1400px) {
	.image-wrapper-3 {
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows: repeat(4, 8rem);
	}
}

.image-wrapper-2 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 14rem 14rem;
	row-gap: 1rem;
	margin-left: -1rem;
	margin-right: -1rem;
}
			
@media (min-width: 992px) {
	.image-wrapper-2 {
		column-gap: 1rem;
		grid-template-columns: 55% 1fr;
		grid-template-rows: 32rem;
	}
}

.image-wrapper-2 div, .image-wrapper-3 div {
	border: 1px solid rgb(220, 220, 220);
	border-radius: var(--border-radius);
	height: 100%;
	object-fit: cover;
	padding: .375rem;
	position: relative;
	width: 100%;	
}

.image-wrapper-2 .alt, .image-wrapper-3 .alt {
	background: rgba(255,255,255,0.8);
	border-radius: var(--border-radius);
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	padding: .5rem 1rem;
	font-size: .875rem;
	line-height: 1rem;
}

@media (min-width: 768px) {
	.image-wrapper-3 > div:nth-of-type(1) {
		grid-area: 1 / 1 / 5 / 5;
	}

	.image-wrapper-3 > div:nth-of-type(2) {
		grid-area: 1 / 5 / 3 / 8;
	}

	.image-wrapper-3 > div:nth-of-type(3) {
		grid-area: 3 / 5 / 5 / 8;
	}
}

.image-wrapper-2 img, .image-wrapper-3 img {
	border-radius: var(--border-radius);
	height: 100%;
	object-fit: cover;
	width: 100%;		
}































.text-light {
	color: var(--text-primary-light);
}

p {
	font-size: 1rem;
}

a, a:visited {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	text-decoration: none;
}

a.dark {
	color: var(--text-primary-dark);
}

a.light {
	color: var(--text-primary-light);
}

a.dark, a.light {
	transition: all 200ms ease-in-out;
}

a.dark:hover {
	color: var(--text-secondary-dark);
}


a.light:hover {
	color: var(--text-secondary-light);
}






























section:has(.content-top) {
	padding-top: 0;
}

.content-top {
	background-color: #FFF;
	border-radius: var(--border-radius);
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.02), 
            0 .5rem 2rem rgba(0, 0, 0, 0.04);
	padding: 2rem;
	position: relative;
	margin-top: -4rem;
	z-index: 200;
}

@media (min-width: 1200px) {
	.content-top {
		margin-top: -10rem;
		padding: 5rem;
	}
}











.room-wrapper {
				column-gap: 3rem;
				display: flex;
				flex-wrap: wrap;
				row-gap: 1.5rem;
			}
			.room-info {
				align-items: start;
				column-gap: 1rem;
				display: flex;
			}
			.room-info svg {
				flex-shrink: 0;
				fill: var(--primary);
				height: 2em;
				width: 2rem;
			}
			
			
			
			.content-top .image-wrapper {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: auto auto;
				row-gap: 1rem;
			}
			
			@media (min-width: 1200px) {
				.content-top .image-wrapper {
					column-gap: 2rem;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: auto;
				}
			}
			
			.image-wrapper img {
				height: 12rem;
				object-fit: cover;
				width: 100%;
			}
			
			@media (min-width: 1200px) {
				.image-wrapper img {
					height: 24rem;
				}	
			}

















.text-wrapper {
	display: flex;
	flex-direction: column;
	row-gap: 3rem;
}

.text-block {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.text-block a {
	color: var(--primary);
}

.text-block > p {
	
	transform: translateY(1rem);
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    visibility: hidden;
}

/* Stan po wjechaniu na ekran */
.text-block > p.is-visible {
    opacity: 1;
    transform: translateY(0); /* Powrót na oryginalną pozycję */
    visibility: visible;
}





h1, h2, h3 {
	font-family: "Merriweather", Georgia, serif;
	font-weight: 500;
	line-height: 1.25;
}

h1 {
	font-size: 1.375rem;
	letter-spacing: 3px;
	width: 80%;
}
h2 {
	font-size: 1.25rem;
	letter-spacing: 2px;
}
h3 {
	font-size: 1.125rem;
	letter-spacing: 1px;
}

@media (min-width: 768px) {
	h1 {
		font-size: 1.5rem;
		width: 85%;
	}
	h2 {
		font-size: 1.375rem;
	}
	h3 {
		font-size: 1.25rem;
	}
}

@media (min-width: 1200px) {
	h1 {
		font-size: 1.625rem;
		width: 90%;
	}
	h2 {
		font-size: 1.5rem;
	}
	h3 {
		font-size: 1.375rem;
	}
}


	.icon-line {
		font-weight: 400;
		line-height: 3rem;
	}



.short-line, .long-line, .full-line {
	background-color: var(--primary);
	height: 1px;
}

.short-line {
	width: 2rem;
}

.long-line {	
	width: 4rem;
}

.full-line {
	width: 100%;
}



p, li {
	line-height: 2;
}

p strong {
	font-weight: 600;
}


	




































/* header */
header {
	background-color: #FFFFFF;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.02), 0 .5rem 2rem rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
	padding: 0 0 1.375rem 0;
	position: sticky;
	row-gap: 1.375rem;
	top: 0;
	z-index: 250;
}
		
header .logo {
	height: auto;
	width: 7rem;
}

@media (min-width: 768px) {
	header .logo {
		width: 7.75rem;
	}
}

@media (min-width: 1200px) {
	header .logo {
		width: 8.5rem;
	}
}

header .logo img {
	height: auto;
	width: 100%;
}
		
header .logo a {
	align-items: center;
	display: flex;
}
		
.mobile-menu {
	align-items: center;
	column-gap: 1rem;
	display: flex;
}

@media (min-width: 1200px) {
	.mobile-menu {
		display: none;
	}	
}
		
.desktop-menu {
	display: none;
}

@media (min-width: 1200px) {
	.desktop-menu {
		align-items: center;
		column-gap: 1.5rem;
		display: flex;
	}

	.desktop-menu ul {
		column-gap: 1.5rem;
		display: flex;
	}
}

@media (min-width: 1400px) {
	.desktop-menu {
		column-gap: 2.5rem;
	}

	.desktop-menu ul {
		column-gap: 2.5rem;
	}
}
	
.current-menu-item {
	position: relative;
}

.current-menu-item:after {
	background-color: var(--primary);
	bottom: -.375rem;
	content: '';
	height: 1px;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 2rem;
}

.mobile-menu-overlay {
    background-color: rgba(255,255,255, 0.98);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    z-index: 99999 !important;
    display: flex;
	flex-direction: column;
	row-gap: 4rem;
    align-items: center;
    transform: translateX(100%);
    transition: transform 200ms ease-in-out;
	padding: 2rem 0;
}

@media (min-height: 750px) {
	.mobile-menu-overlay {
		justify-content: center;
	}
}

.mobile-menu-overlay.is-active {
    transform: translateX(0);
}

.mobile-menu-overlay .logo {
	flex-shrink: 0;
	width: 8rem;
}

.mobile-menu-overlay nav ul {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
}

.mobile-menu-overlay nav ul {
	color: var(--text-primary-dark);
	text-align: center;
}








button {
			border: none;
			outline: none;
		}
		
		.row-space-between {
			align-items: center;
			display: flex;
			justify-content: space-between;
			width: 100%;
		}
		
		.btn-primary, .btn-secondary {
			align-items: center;
			column-gap: .75rem;
			display: flex;
			justify-content: center;
			transition: all 200ms ease-in-out;
		}
		
		.btn-primary svg, .btn-secondary svg {
			flex-shrink: 0;
			height: 1.5rem;
			width: 1.5rem;
		}
		
		.btn-primary svg {
			fill: var(--text-primary-light);
		}
		
		.btn-secondary svg {
			fill: var(--primary);
		}
		
		.btn-primary:hover, .btn-secondary:hover {
			cursor: pointer;
			filter: brightness(1.1);
			box-shadow: 0 .5rem 1rem rgba(83, 166, 195, 0.2);
		}
		
		.btn-primary {
/* 			background-color: var(--primary-color); */
			background: linear-gradient(60deg, rgba(64, 165, 195, 1), rgba(64, 165, 195, 0.6));
			border-radius: var(--border-radius);
			color: var(--text-primary-light);
			padding: .25rem 1.125rem;
/* 			font-weight: 500; */
		}
		
		.btn-secondary {
/* 			background-color: var(--primary-color); */
/* 			background: #fff; */
			border-radius: var(--border-radius);
			border: 1px solid var(--primary);
			color: var(--primary);
/* 			font-weight: 500; */
			padding: .25rem 1.125rem;
		}
		
		.btn-svg {
			align-items: center;
			display: flex;
			justify-content: center;
		}
		
		.btn-svg svg {
			height: 1.75rem;
			
			width: 1.75rem;
		}
		

		.address-info {
			background-color: var(--primary);
			background: linear-gradient(60deg, rgba(64, 165, 195, 1), rgba(64, 165, 195, 0.6));
			color: var(--text-primary-light);
		}
		.address-info .container {
/* 			display: flex;
			justify-content: space-between; */
		}
		.address-info p {
			font-size: .875rem;
			text-align: right;
		}
		.address-info p span {
			font-size: inherit;
/* 			font-weight: 500; */
			
		}

.buttons {
	gap: .5rem;
	display: flex;
	flex-wrap: wrap;
}
.buttons.center {
	justify-content: center;
}
.buttons .btn-secondary, .buttons .btn-primary {
	min-width: 11rem;
}


.box-shadow {
		box-shadow: 
		0 .125rem .25rem rgba(45, 55, 60, 0.02),   /* Bardzo bliski, niemal niewidoczny */
        0 .25rem .5rem rgba(45, 55, 60, 0.02),  /* Definiuje krawędź */
        0 .5rem 1rem rgba(45, 55, 60, 0.02), /* Nadaje bryłę */
        0 1rem 2rem rgba(45, 55, 60, 0.02); /* Rozprasza światło */
	}





h1, h2, h3, p {
	line-height: 2.25rem;
}










footer {
		background-color: var(--bg-secondary);
		border-top: 1px solid #ddd;
	}
	.footer-map {
		
/* 	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.02), 
            0 .5rem 2rem rgba(0, 0, 0, 0.04); */
	}
	.footer-map iframe {
		height: 100%;
		width: 100%;
	}
iframe {
    /* Wybielenie mapy */
    filter: grayscale(95%) brightness(1.1) contrast(1);
    opacity: 1; /* Dodatkowe rozjaśnienie poprzez przezroczystość */
    
/*     transition: all 0.5s ease;  Płynne przejście przy najechaniu */ 
}

/* Opcjonalnie: mapa staje się wyraźniejsza, gdy klient chce jej użyć */
/* iframe:hover {
    filter: grayscale(0%) brightness(1) contrast(1);
    opacity: 1;
} */
	
	
	
	
	
	
	
	
	footer {
		display: flex;
		flex-direction: column;
		padding-top: 3rem;
/* 		row-gap: 2em;	 */
	}
	@media (min-width: 768px) {
		footer {
			padding-top: 4rem;
/* 			row-gap: 2.5rem; */
		}
	}
	
	@media (min-width: 1200px) {
		footer {
			padding-top: 5rem;
/* 			row-gap: 3rem; */
		}
	}
	.footer-top {
		display: flex;
		flex-direction: column;
		row-gap: 2rem;
	}
	@media (min-width: 992px) {
		.footer-top {
			row-gap: 3rem;
		}
	}
	.footer-map {
		background-color: #eee;
		height: 20rem;
		position: relative;
		width: 100%;
	}
/* 	.footer-map:before {
		content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(244, 246, 247,1) 0%, rgba(244, 246, 247,0) 50%, rgba(244, 246, 247,1) 100%);
    z-index: 10; 
    pointer-events: none; 
	} */
	@media (min-width: 992px) {
		.footer-map {
			height: 30rem;
		}	
	}
	.footer-company-information {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(3, auto);
		row-gap: 4rem;
	}
	@media (min-width: 992px) {
		.footer-company-information {
			column-gap: 2rem;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: auto;
		}
	}
	.footer-company-information h3 {
		margin: 0;
	}
	.footer-information-position {
		column-gap: 1rem;
		display: flex;
	}
	.footer-information-position svg {
		fill: var(--text-primary-dark);
		height: 1.75rem;
		width: 1.75rem;
	}
	.footer-information-position > div:first-of-type {
		align-items: center;
/* 		background-color: var(--primary); */
/* 		border: 1px solid var(--primary-color); */
		border-radius: var(--border-radius);
		display: flex;
		height: 3rem;
		justify-content: center;
		width: 1.75rem;
	}
	.footer-information-position > div:last-of-type {
		display: flex;
		flex-direction: column;
	}
	.footer-bottom {
		background-color: var(--primary);
			background: linear-gradient(60deg, rgba(64, 165, 195, 1), rgba(64, 165, 195, 0.6));
	}
	.footer-copyright {
		align-items: start;
		display: flex;
		flex-direction: column;
		padding: .75rem 0;
	}
	@media (min-width: 992px) {
		.footer-copyright {
			align-items: center;
			column-gap: 1rem;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 1rem 0;
		}	
	}
















/* --- NAPRAWA MINIATUR I HOVER --- */
.image-wrapper-2 .full-screen.full-screen, .image-wrapper-3 .full-screen.full-screen {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer; /* ZAMIANA: Zwykła rączka zamiast lupy */
}

.image-wrapper-2 .full-screen.full-screen img, .image-wrapper-3 .full-screen.full-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

/* Nakładka z plusem */
.image-wrapper-2 .full-screen::before, .image-wrapper-3 .full-screen::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 40px;
    font-weight: 200;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Ciemniejsze tło przy najechaniu */
.image-wrapper-2 .full-screen.full-screen::after, .image-wrapper-3 .full-screen.full-screen::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-wrapper-2 .full-screen.full-screen:hover img, .image-wrapper-3 .full-screen.full-screen:hover img {
    transform: scale(1.08); /* Lekkie powiększenie zdjęcia pod spodem */
}

.image-wrapper-2 .full-screen.full-screen:hover::before,
.image-wrapper-2 .full-screen.full-screen:hover::after,
.image-wrapper-3 .full-screen.full-screen:hover::before,
.image-wrapper-3 .full-screen.full-screen:hover::after {
    opacity: 1; /* Pokazujemy plusa i przyciemnienie */
}

/* --- PODPIS W LIGHTBOXIE (POZOSTAJE BEZ ZMIAN) --- */
#lb-caption {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 14px;
    letter-spacing: 0.5px;
    max-width: 80%;
    text-align: center;
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 100001;
    display: none; /* Domyślnie ukryty, skrypt go pokaże */
}
	
#custom-lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    justify-content: center;
    align-items: center;
    user-select: none;
}

#lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.04), 0 .5rem 2rem rgba(0, 0, 0, 0.08);
    border: 3px solid rgba(255,255,255,0.1);
}

/* Kontener nawigacji */
.lb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background: rgba(255, 255, 255, 0.3); /* Delikatne tło */
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
	
	.lb-nav svg {
		fill: var(--text-primary-dark);
		height: 100%;
		width: 100%;
	}	

#lb-prev { left: 2rem; }
#lb-next { right: 2rem; }

/* Przycisk zamknięcia - minimalistyczny X */
#lb-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
}
	
	#lb-close svg {
		fill: var(--text-primary-dark);
		height: 100%;
		width: 100%;
	}


	
	
	.numbers {
/* 		background-color: var(--white); */
		display: flex;
		flex-direction: column;
		gap: .5rem;
		row-gap: .5rem;
/* 		border-radius: var(--border-radius) var(--border-radius) 0 0; */
/* 		background-color: var(--white); */
/* 		box-shadow: 0 -.125rem .25rem rgba(0, 0, 0, 0.02), 0 -.5rem 2rem rgba(0, 0, 0, 0.04); */
		position: fixed;
/* 		padding: .5rem;
		left: 50%;
    transform: translateX(-50%); */
/* 		justify-content: center; */
		right: 1rem;
/* 		width: 100%; */
		bottom: 1rem;
		transition: all 0.3s ease-in-out;
		
		z-index: 200;
	}	
	@media (min-width: 768px) {
		.numbers {
			right: 2rem;
			bottom: 2rem;
/* 			transform: translateX(0);
			width: fit-content; */
		}
	}
	.numbers a {
/* 		border: 1px solid white; */
		position: relative;
/* 		z-index: 500; */
	}
	.numbers a::before {
		content: "";
		position: absolute;
		border-radius: var(--border-radius);
		inset: 0;
		width: 100%;
		height: 100%;
		background-color: white;
		z-index: -1;
		box-shadow: 0 .125rem .25rem rgba(45, 55, 60, 0.06), 0 .25rem .5rem rgba(45, 55, 60, 0.06), 0 .5rem 1rem rgba(45, 55, 60, 0.06), 0 1rem 2rem rgba(45, 55, 60, 0.06);
	}
	.numbers button {
		min-width: 9rem;
	}
	.numbers.is-hidden {
		bottom: -8rem;
	}
	
	#lightbox-alt {
		position: absolute;
		bottom: 1rem;
		left: 50%;
		transform: translatex(-50%);
	}
	












/* Styl dla ciemnego tła (overlay) */
.lum-lightbox {
    background: rgba(0, 0, 0, 0.9); /* Ciemne tło */
    z-index: 10000;
}

/* Zapewnienie, że zdjęcie nie wystaje poza ekran */
.lum-img {
    max-width: 90vw !important;
    max-height: 80vh !important;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* Styl strzałek nawigacji */
.lum-previous-button, .lum-next-button {
    width: 60px;
    height: 60px;
}
a {
	width: fit-content;
}


















.contact-box {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem  1rem;
	justify-content: center;
	margin: 1rem 0;
	padding: 1rem;
}
.contact-box > p {
	font-family: "Merriweather";
	font-weight: 500;
	letter-spacing: 1px;
	text-align: center;
}





/* FIRST SECTION - HOME */
.first-box.home {
	gap: 4rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}
@media (min-width: 992px) {
	.firs-box.home {
		grid-template-columns: 1fr 22rem;
		grid-template-rows: auto;	
	}	
}
@media (min-width: 1200px) {
	.first-box.home {
		grid-template-columns: 1fr 24rem;
		grid-template-rows: auto;	
	}
}
.first-box.home > div:last-child {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.first-box.home .benefit {
	background-color: var(--bg-secondary);
	border-radius: var(--border-radius);
	width: 100%;
}
.first-box.home .buttons {
	gap: .5rem;
	display: flex;
	flex-wrap: wrap;
}
.first-box.home .buttons .btn-primary {
	min-width: 12rem;
}
.benefit {
	align-items: start;
	column-gap: .75rem;
	display: flex;
	padding: 1rem;
}
.benefit svg {
	fill: var(--primary);
	flex-shrink: 0;
	height: 1.75rem;
	width: 1.75rem;
}
.benefit > div:first-child {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	height: 2rem;
	transform: translate(.125rem, .125rem);
	width: 2rem;
}
.benefit > div:last-child {
	display: flex;
	flex-direction: column;
}
.benefit .title {
	font-weight: 500;
}
.benefit > div:last-child > p:last-child {
	line-height: 1.5rem;
}

/* SECOND SECTION - HOME */
.left-box, .right-box {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
}

@media (min-width: 1200px) {
	.left-box {
		grid-template-columns: 30rem 1fr;
		transform: translateX(2rem);
	}

	.right-box {
		grid-template-columns: 1fr 30rem;
		transform: translateX(-2rem);

	}
}

@media (min-width: 1400px) {
	.left-box {
		grid-template-columns: 34rem 1fr;
		transform: translateX(2rem);
	}

	.right-box {
		grid-template-columns: 1fr 34rem;
		transform: translateX(-2rem);
	}
}

.right-box > img {
	order: 1;
}
.right-box > div {
	order: 2;
}

@media (min-width: 1200px) {
	.right-box > img {
		order: 2;
	}
	.right-box > div {
		order: 1;
	}	
}
.left-box > img, .right-box > img {
	border-radius: var(--border-radius);
	flex-shrink: 0;
	height: 18rem;
	object-fit: cover;
	width: 100%;
	border: 1px solid rgb(220, 220, 220);
	padding: .375rem;
}

@media (min-width: 768px) {
	.left-box > img, .right-box > img {
		height: 26rem;
	}
}

@media (min-width: 1200px) {
	.left-box > img, .right-box > img {
		height: 30rem;
	}
}

.left-box > div, .right-box > div {
	border-radius: var(--border-radius);
}


@media (min-width: 1200px) {
	.left-box > div, .right-box > div {
		margin-top: 2rem;
	}	
}

/* OPINIONS - HOME */
.opinions {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
}
@media (min-width: 998px) {
	.opinions {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;	
	}
}
.opinion {
	border-radius: var(--border-radius);
	justify-content: space-between;
	flex-shrink: 0;
	flex-grow: 0;
	border: 1px solid #f0f0f0;
}
.opinion > p {
	font-style: italic;
}
.opinion div {
	display: flex;
	column-gap: .5rem;
}
.opinion div svg {
	fill: #eee;
	height: 2.25rem;
	width: 2.25rem;
}
.stars {
	display: flex;
	column-gap: .5rem;
}
div.stars svg {
	fill: var(--primary);
	height: 1.25rem;
	width: 1.25rem;	
}

/* FAQ - HOME */
.faq {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}

.faq-position {
	column-gap: 1rem;
	display: grid;
	grid-template-columns: 2rem 1fr;
	grid-template-rows: auto 0fr;
	row-gap: 1rem;
	transition: all 200ms ease-in-out;
}

.faq-position.open {
	grid-template-rows: auto 1fr;
}

.faq-position svg {
	cursor: pointer;
	fill: var(--primary);
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	height: 2rem;
	width: 2rem;
	transition: all 200ms ease-in-out;
}

.faq-position.open svg {
	transform: rotate(-90deg);
}

.question {
	cursor: pointer;
	font-weight: 500;
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
}

.answer {
	background-color: var(--white);
	border-radius: var(--border-radius);

	display: flex;
	flex-direction: column;
	grid-column: 1 / span 2;
	grid-row: 2 / span 1;
	opacity: 0;
	overflow: hidden;
	padding: 0 2rem;
	row-gap: .375rem;
	transition: all 100ms ease-in-out;
}

.faq-position.open .answer {
	opacity: 1;
	padding: 1rem 2rem;
}

/* ROOMS */
.room-list {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}
@media (min-width: 992px) {
	.room-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}	
}
.room-card {
	background-color: #FFF;
	border-radius: var(--border-radius);
	box-shadow: 
		0 .125rem .25rem rgba(0, 0, 0, 0.02), 
		0 .5rem 2rem rgba(0, 0, 0, 0.04);
	overflow: hidden;
	width: 100%;
}
.room-card img {
	height: 16rem;
	object-fit: cover;
	width: 100%;
}
@media (min-width: 768px) {
	.room-card img {
		height: 20rem;
	}
}
@media (min-width: 1200px) {
	.room-card img {
		height: 24rem;
	}
}

/* PRICE LIST */
.price-list {
	display: flex;
	flex-direction: column;
	row-gap: 2.5rem;
}
.price-position {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
}
.price-title {
	padding-left: .75rem;
}
.price-table {
	display: grid;
	gap: .125rem;
	grid-template-columns: 1fr 5rem;
	grid-template-rows: auto;	
}
@media (min-width: 768px) {
	.price-table {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}
}
.price-table-title, .price-table-price {
	display: grid;
	gap: .125rem;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(6, auto);	
}
@media (min-width: 768px) {
	.price-table-title, .price-table-price {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: auto;	
	}	
}
.price-table-title p {
	align-items: center;
	background-color: rgba(64, 165, 195, 0.12);
	border-radius: var(--border-radius);
	display: flex;
	line-height: 1.25rem;
	padding: .75rem;
}
.price-table-price p {
	align-items: center;
	background-color: rgba(64, 165, 195, 0.04);
	border-radius: var(--border-radius);
	display: flex;
	justify-content: center;
	line-height: 1.25rem;
	padding: .75rem;
}
@media (min-width: 768px) {
	.price-table-price p {
		justify-content: start;
	}
}

/* OFFER */
.offer-list {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}
@media (min-width: 992px) {
	.offer-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}	
}
.offer-card {
	background-color: #FFF;
	border-radius: var(--border-radius);
	box-shadow: 
		0 .125rem .25rem rgba(0, 0, 0, 0.02), 
		0 .5rem 2rem rgba(0, 0, 0, 0.04);
	overflow: hidden;
	width: 100%;
}
.offer-card img {
	height: 16rem;
	object-fit: cover;
	width: 100%;
}
@media (min-width: 768px) {
	.offer-card img {
		height: 20rem;
	}
}
@media (min-width: 1200px) {
	.offer-card img {
		height: 24rem;
	}
}

/* COOKIEYES */
.cky-btn-revisit-wrapper {
	background-color: var(--primary) !important;
	box-shadow: 0 .125rem .25rem rgba(45, 55, 60, 0.06), 0 .25rem .5rem rgba(45, 55, 60, 0.06), 0 .5rem 1rem rgba(45, 55, 60, 0.06), 0 1rem 2rem rgba(45, 55, 60, 0.06) !important;
	left: 1rem !important;
	bottom: 1rem !important;
}

@media (min-width: 768px) {
	.cky-btn-revisit-wrapper {
		left: 2rem !important;
		bottom: 2rem !important;
	}
}

.cky-btn {
	background-color: var(--primary) !important;
	border: none !important;
	border-radius: var(--border-radius) !important;
	color: var(--text-primary-light) !important;
}