/**
 * Theme Name:     Apartament Pływaczka
 * Author:         89 Studio
 * Template:       bootstrap-basic4
 * Text Domain:	   apartament-plywaczka
 * Description:    Bootstrap v.4 basic theme
 */


/* Ustawienia kontenera slidera */
.hero-section { width: 100%; overflow: hidden; clear: both; height: 80vh; position: relative; background-color: #0f2d31}
.hero-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* To kluczowe, żeby wideo i zdjęcie pokrywały się idealnie */
}
.hero-section h2 {text-align: center; letter-spacing: 2px; font-size: 52px;position: absolute; width: 90%; left: 5%; top: 30vh; text-align: center; color: #fff; z-index: 99; text-transform: uppercase;}
.hero-section h2 small {font-size: 24px;}
.hero-section .owl-stage-outer {opacity: 0.7}
.hero-item {height: 80vh; min-height: 500px;  width: 100%; background-position: center center; background-size: cover; background-repeat: no-repeat; position: relative;}
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.owl-theme .owl-dots { position: absolute; bottom: 20px; width: 100%; text-align: center;}
.owl-theme .owl-dots .owl-dot span { width: 12px; height: 12px; background: #fff; opacity: 0.5;}
.owl-theme .owl-dots .owl-dot.active span { background: #fff; opacity: 1;}

.hero-section .video-background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.hero-section .video-background:before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ""; background: rgb(8 59 65 / 24%)}
.video-background video {width: 100%; height: 100%; object-fit: cover;}

img {max-width: 100%;}
.icons-style {width: 150px; height: 150px; margin: 0 auto 50px; border-radius: 50%; border: 3px solid #000; padding: 30px}
body h1, body h2, body h3, body h4, body h5, body h6 {font-family: "Gilda Display", serif; font-weight: 400; font-style: normal; text-transform: uppercase;}
body p, body a, body ul li {font-family: "Open Sans", sans-serif;  font-optical-sizing: auto; font-weight: 400; font-style: normal; font-variation-settings:"wdth" 100;}

header .site-title {z-index: 99;}
header.page-header {position: fixed; top: 0; left: 0; width: 100%; z-index: 999}
header.sticky {background-color: #ffffffe6; box-shadow: #00000030 0px 0px 30px 0px}
header img {margin: 20px; max-width: 120px}
header .menu-col {display: flex; align-items: center; justify-content: flex-end}
header ul li a {color: #fff; font-family: "Gilda Display", serif; text-transform: uppercase; font-weight: 600; letter-spacing: 2px}
header a.phone-btn {color: #fff; font-family: "Gilda Display", serif; text-transform: uppercase; background-color: #2f696f; padding: 10px 30px; margin-left: 50px; z-index: 99}
header a.phone-btn p {color: #fff; font-family: "Gilda Display", serif; text-transform: uppercase; margin: 0}
header.sticky ul li a {color: #2f696f}

header .wpml-ls-legacy-list-horizontal {border: none; padding: 0;}
header .wpml-ls-legacy-list-horizontal a {padding: 0; margin-left: 15px}
header .wpml-ls-legacy-list-horizontal img {margin: 0}

section#rezerwacja {position: relative; margin-top: -80px; z-index: 9; margin-bottom: 100px}
section#rezerwacja .card-body {background-color: #2f696f; padding: 50px 30px}
section#rezerwacja .card-body h3 {text-align: center; text-transform: uppercase; color: #fff; font-size: 24px; margin-bottom: 30px;}
section#rezerwacja .card-body input {padding: 10px; border: none;}
section#rezerwacja .card-body input#hb-form-1-hb-search-form-submit {padding: 10px; background-color: #b67652; color: #fff}

section#rezerwacja .hb-dp-weeks a {color: #2f696f}
section#rezerwacja .hb-searched-summary.hb-clearfix p, section#rezerwacja  .hb-accom-desc, section#rezerwacja  .hb-accom-price-total {color: #fff}
section#rezerwacja input[type="submit"] {padding: 10px; background-color: #b67652; color: #fff}
section#rezerwacja .hb-step-button input {padding: 10px; background-color: #b67652; color: #fff}
section#rezerwacja label {color: #fff}
section#rezerwacja .hb-payment-info-wrapper p, .hb-confirm-area p {color: #fff}


section.header-page {padding: 200px 0 100px; background: #0f2d31; margin-bottom: 100px; position: relative;}
section.header-page:before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url(/wp-content/themes/apartament-plywaczka/img/bg.jpg); opacity: 0.8; background-position: center; background-size: cover;}
section.header-page .container {position: relative;}
section.header-page .container h1 {color: #fff; font-size: 52px}


.frontpage-content h2 {margin-bottom: 50px}
.wp-block-group.smoke-container {background-color: #b4c7c0; padding: 100px 100px 30px;  margin-top: 80px}


.local-gallery {background-color: #b4c7c0; padding-top: 100px; padding-bottom: 80px; margin-bottom: 100px; clear: both; float: left; width: 100%}
.local-gallery .container {margin-bottom: 50px}
.local-gallery .image-box {margin-bottom: 20px}
.local-gallery .custom-gallery-link {clear: both; width: 100%; float: left; text-align: center; display: inline-block;}
.local-gallery .custom-gallery-link a.btn-gallery {padding: 15px 30px; color: #fff; background-color: #2f696f;  display: inline-block;}


.location-section {margin-bottom: 100px} 
.location-section h5.text-center {font-size: 32px}
.location-section h3 {font-size: 52px; margin-bottom: 30px}


.page .container article.page {margin-bottom: 100px}
.info-section {margin-top:100px; margin-bottom: 100px}


.nf-form-content input#nf-field-4 {padding: 10px 40px; background-color: #2f696f; color: #fff; border: none;}

footer#site-footer {border: none; background-color: #2f696f; padding: 50px 20px}
footer#site-footer ul {padding: 0; list-style-type: none; display: flex; justify-content: center;}
footer#site-footer ul li {float: left;  padding: 0 20px}
footer#site-footer ul li a {color: #fff}


.hero-section-video { padding: 100px 0; overflow: hidden; }
.hero-section-video .video-item { transition: transform 0.5s ease, opacity 0.5s ease; transform: scale(0.85); opacity: 0.5;}
.hero-section-video .owl-item.center .video-item { transform: scale(1); opacity: 1; z-index: 10;}
.hero-section-video .video-wrapper { position: relative; width: 100%; border-radius: 15px; overflow: hidden;}
.hero-section-video .slider-video { width: 100%;  display: block;  object-fit: cover;}
.hero-section-video .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  pointer-events: none;}
.hero-section-video .owl-nav button { font-size: 30px !important; color: #fff !important;}

@media (max-width: 768px) {
    .hero-section-video { padding: 40px 0;}
    .hero-section-video .slider-video {height: 450px;}
    .hero-section-video .video-item {transform: scale(0.9); opacity: 0.6; }
}

/*Responsive*/


@media (min-width: 992px) {
    header a.phone-btn svg {display: none}
}


@media (max-width: 991px) {
button.navbar-toggler {background: #2f696f; border: none; border-radius: 0; margin-left: 30px; padding: 8px 15px;}
button.navbar-toggler span {float: left; width: 40px; background: #fff; padding: 1px; display: inline-block; clear: both; margin: 5px 0}
header a.phone-btn p {display: none}

div#bootstrap-basic4-topnavbar{position: fixed; top: 0px; left: 0px; width: 100%; text-align: center; background: rgb(47, 105, 111); padding: 150px 30px 30px; z-index: -1;}

.wpml-ls-legacy-list-horizontal .wpml-ls-item {float: left; clear: both; margin: 4px 0}


header.sticky ul li a {color: #fff}
header ul li a:hover {color: #b4c7c0}
header.sticky ul li a:hover {color: #b4c7c0}


header img {margin: 0; max-width: 90px}
header a.phone-btn {margin-left: 0; padding: 14px; margin-right: 12px}

}