@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap');


:root {

--morski: #0891B2;
--ciemny: #0F172A;
--jasny: #F0F9FF;
--piasek: #FAF6EE;
--bialy: #FFFFFF;
--tekst: #475569;

}


* {

margin:0;
padding:0;
box-sizing:border-box;

}


html {

scroll-behavior:smooth;

}


body {

font-family:'Open Sans', sans-serif;

color:var(--tekst);

background:white;

}


h1,
h2,
h3 {

font-family:'Montserrat', sans-serif;

color:var(--ciemny);

}


img {

max-width:100%;
display:block;

}


.container {

width:90%;
max-width:1200px;
margin:auto;

}
/*------------hero-------------*/ 

.hero {

height:100vh;

min-height:700px;

background:

linear-gradient(
rgba(15,23,42,.45),
rgba(15,23,42,.45)
),

url("../images/hero.jpg");


background-size:cover;

background-position:center;

color:white;

position:relative;

display:flex;

align-items:center;

justify-content:center;

}



.navbar {

position:absolute;

top:0;

left:0;

width:100%;

padding:30px 5%;

display:flex;

justify-content:space-between;

align-items:center;

z-index:10;

}



.logo {

display:flex;

align-items:center;

gap:15px;

color:white;

}



.logo strong {

font-family:'Montserrat';

font-size:28px;

display:block;

}



.logo span {

font-size:14px;

}



.wave {

color:#67E8F9;

font-size:35px;

}
/*------------Tekst---hero----*/
.hero-content {

text-align:center;

color:white;

animation:showUp 1s ease;

}


.hero-content h1 {

font-size:clamp(40px,5vw,70px);

color:white;

line-height:1.15;

margin-bottom:25px;

}



.hero-content p {

font-size:22px;

margin-bottom:40px;

}
/*------------Menu------------*/

.menu {

display:flex;

gap:35px;

list-style:none;

}



.menu a {

color:white;

text-decoration:none;

font-weight:500;

transition:.3s;

}


.menu a:hover {

color:#67E8F9;

}

.menu-toggle {

display:none;

background:none;

border:none;

color:white;

font-size:32px;

cursor:pointer;

}

/*------------Przycisk------------*/
.button {

display:inline-block;

padding:15px 35px;

background:var(--morski);

color:white;

border-radius:50px;

text-decoration:none;

font-weight:600;

font-family:'Montserrat';

transition:.3s;

}



.button:hover {

transform:translateY(-4px);

opacity:.9;

}

/*-----------O-nas-----------*/
.about {

padding:100px 0;

}



.about .container {

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.about h2 {

color:var(--morski);

font-size:40px;

}



.about h3 {

font-size:28px;

margin:25px 0;

}



.about p {

line-height:1.8;

font-size:18px;

}



.about img {

border-radius:30px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/*-----------Animacja-----------*/

@keyframes showUp {

from {

opacity:0;

transform:translateY(40px);

}


to {

opacity:1;

transform:translateY(0);

}

}

/*----------------------------------------*/

.features {

padding:100px 0;

background:var(--jasny);

}



.section-heading {

text-align:center;

max-width:700px;

margin:auto;

}



.section-heading h2 {

font-size:42px;

margin-bottom:15px;

}



.wave-line {

color:var(--morski);

font-size:30px;

margin-bottom:20px;

}



.section-heading p {

font-size:18px;

line-height:1.7;

}

/*-----------Karty-------------*/

.features-grid {

margin-top:60px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.feature-card {

background:white;

padding:40px 30px;

border-radius:25px;

text-align:center;

transition:.3s;

box-shadow:
0 10px 30px rgba(0,0,0,.06);

}



.feature-card:hover {

transform:translateY(-10px);

}



.icon {

font-size:45px;

margin-bottom:20px;

}



.feature-card h3 {

font-size:22px;

margin-bottom:15px;

}



.feature-card p {

line-height:1.7;

}

/*---------------Pokoje----------*/

.rooms {

padding:100px 0;

background:white;

}



.rooms-gallery {

margin-top:60px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.room-image {

overflow:hidden;

border-radius:30px;

height:350px;

}



.room-image img {

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.room-image:hover img {

transform:scale(1.08);

}



.rooms-button {

text-align:center;

margin-top:50px;

}

/*-------------Galeria-------------*/

.gallery {

padding:100px 0;

background:var(--jasny);

}



.gallery-grid {

margin-top:60px;

display:grid;
grid-template-columns:repeat(3,1fr);
/*
grid-auto-rows:220px;
*/
gap:25px;

}



.gallery-item {

width:100%;

height:280px;

object-fit:cover;

border-radius:25px;

cursor:pointer;

transition:.4s;

}



.gallery-item:hover {

transform:scale(1.04);

}


/*
.gallery-item:first-child {

grid-column:span 2;

grid-row:span 2;

}
*/

/*-----------------Lightbox---------*/
.lightbox {

display:none;

position:fixed;

inset:0;

background:rgba(15,23,42,.95);

align-items:center;

justify-content:center;

z-index:999;

}



.lightbox img {

max-width:90%;

max-height:85%;

border-radius:20px;

}



.close {

position:absolute;

top:30px;

right:40px;

font-size:50px;

color:white;

cursor:pointer;

}

.lightbox button {

position:absolute;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

color:white;

font-size:50px;

cursor:pointer;

padding:20px;

}



.prev {

left:30px;

}



.next {

right:30px;

}



.lightbox button:hover {

color:#67E8F9;

}

.counter {

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

color:white;

font-size:18px;

font-family:'Montserrat', sans-serif;

background:rgba(0,0,0,.35);

padding:8px 18px;

border-radius:30px;

}

/* ----------Pobierowo--------------*/
.pobierowo {

padding:100px 0;

background:var(--piasek);

}



.pobierowo-content {

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.pobierowo-image img {

width:100%;

border-radius:30px;

}



.pobierowo-text h2 {

font-size:42px;

}



.pobierowo-text p {

font-size:18px;

line-height:1.8;

margin:20px 0;

}



.pobierowo-cards {

margin-top:70px;

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.pobierowo-cards div {

background:white;

padding:30px;

border-radius:25px;

text-align:center;

}



.pobierowo-cards h3 {

margin-bottom:15px;

}

/*---------------Kontakt--i--Mapa----*/
.contact {

padding:100px 0;

background:var(--ciemny);

color:white;

}



.section-heading.light h2 {

color:white;

}



.section-heading.light p {

color:#CBD5E1;

}



.contact-grid {

margin-top:60px;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}



.contact-box {

background:white;

color:var(--tekst);

padding:45px;

border-radius:30px;

}



.contact-box h3 {

margin-bottom:20px;

font-size:28px;

}



.contact-box p {

line-height:1.8;

margin-bottom:30px;

}



.map iframe {

width:100%;

height:400px;

border:0;

border-radius:30px;

}

/*------------Stopka----------*/
.footer {

background:#020617;

color:white;

padding:70px 0 30px;

text-align:center;

}



.footer-logo h2 {

font-family:'Montserrat';

font-size:32px;

letter-spacing:2px;

}



.footer-logo p {

color:#CBD5E1;

margin-top:10px;

}



.footer-wave {

color:#67E8F9;

font-size:35px;

margin-bottom:10px;

}



.footer-links {

display:flex;

justify-content:center;

gap:30px;

margin:40px 0;

}



.footer-links a {

color:#E2E8F0;

text-decoration:none;

transition:.3s;

}



.footer-links a:hover {

color:#67E8F9;

}



.footer-info {

color:#CBD5E1;

line-height:2;

}



.copyright {

margin-top:40px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.1);

color:#94A3B8;

font-size:14px;

}

/*wersja dla telefonów */

@media(max-width:768px){


.navbar{

padding:20px;

}


.menu{

display:none;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

flex-direction:column;

text-align:center;

padding:30px;

}


.menu a{

color:var(--ciemny);

}


.menu-toggle{

display:block;

}


.menu.active{

display:flex;

}


}

/*Tablet do 1024px*/

@media (max-width:1024px){

.container{

width:90%;

}


/* O nas */

.about .container{

grid-template-columns:1fr;

gap:40px;

}



/* Udogodnienia */

.features-grid{

grid-template-columns:repeat(2,1fr);

}


/* Pokoje */

.rooms-gallery{

grid-template-columns:repeat(2,1fr);

}


/* Pobierowo */

.pobierowo-content{

grid-template-columns:1fr;

}


/* Karty Pobierowa */

.pobierowo-cards{

grid-template-columns:repeat(2,1fr);

}


/* Kontakt */

.contact-grid{

grid-template-columns:1fr;

}

}

/* Telefon do 768px*/

@media(max-width:768px){


body{

overflow-x:hidden;

}



/* HERO */

.hero{

min-height:650px;

}


.hero-content h1{

font-size:38px;

}


.hero-content p{

font-size:18px;

}



/* LOGO */

.logo strong{

font-size:22px;

}



/* SEKCJE */

.about,
.features,
.rooms,
.gallery,
.pobierowo,
.contact{

padding:70px 0;

}



/* Nagłówki */

.section-heading h2,
.pobierowo-text h2,
.about h2{

font-size:32px;

}



/* O NAS */

.about h3{

font-size:24px;

}



/* KARTY */

.features-grid{

grid-template-columns:1fr;

}

.card-animation {

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .7s ease,
    transform .7s ease;

}


.card-animation.show {

    opacity:1;

    transform:translateY(0);

}

.feature-card:nth-child(2),
.pobierowo-cards div:nth-child(2){

transition-delay:.15s;

}


.feature-card:nth-child(3),
.pobierowo-cards div:nth-child(3){

transition-delay:.3s;

}

/* POKOJE */

.rooms-gallery{

grid-template-columns:1fr;

}


.room-image{

height:300px;

}



/* GALERIA */

.gallery-grid{

grid-template-columns:1fr;

}


.gallery-item{

height:300px;

}



/* POBIEROWO */

.pobierowo-cards{

grid-template-columns:1fr;

}



/* KONTAKT */

.contact-box{

padding:30px;

}



/* PRZYCISKI */

.button{

padding:14px 28px;

}


}

/*Telefony 360px*/

@media(max-width:380px){


.hero-content h1{

font-size:32px;

}


.logo span{

display:none;

}


.gallery-item,
.room-image{

height:240px;

}

}