:root{
    --main-color-sheme: rgb(144, 206, 143);
    --main-color-sheme-hover: rgb(148, 209, 147);
}
html{
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    padding: 0;
    animation: pageloading 0.5s ease-in;
}

.house-link{
    margin-block: 30px;
}
.house-link a{
    background-color: var(--main-color-sheme);
    border-color: var(--main-color-sheme);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: white;
}
.house-link a:hover{
    text-decoration: none;
    color: white;
    background-color: var(--main-color-sheme-hover);
    border-color: var(--main-color-sheme-hover);
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
}
.custom-btn{
    background-color: var(--main-color-sheme);
    border-color: var(--main-color-sheme);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: white;
}
.custom-btn:hover{
    background-color: var(--main-color-sheme-hover);
    border-color: var(--main-color-sheme-hover);
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.2);
}
@keyframes pageloading {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


#onas, #oferty, #pytania, #kontakt{
    margin-bottom: 120px;
}

/* Stała wysokość slajdu i maska przycięcia */
#carouselExampleIndicators .carousel-item{
  position: relative !important;
  height: 500px !important;              /* np. clamp(320px, 60vh, 520px) */
  overflow: hidden !important;
}

/* Link otaczający obrazek wypełnia slajd */
#carouselExampleIndicators .carousel-item > a{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* PRAWIDŁOWE CENTROWANIE: środek kadru w pionie i poziomie */
#carouselExampleIndicators .carousel-item > a > img{
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  /* wypełnij slajd w obu osiach, przytnij równomiernie */
  min-width: 100% !important;
  min-height: 100% !important;

  /* nadpisujemy bootstrapowe w-100 / height:auto */
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;

  display: block !important;
}



/* --- Navbar ---*/
.phone-sidebar{
    background-color: white;
    padding-inline: 15px;
    padding-top: 14px;
    position:fixed;
    right: -154px;
    top: 120px;
    border-radius: 14px;
    transition: 0.5s;
    z-index: 999;
}
.phone-sidebar a{
    font-size: large;
    color: black;
    font-weight: bolder;
    text-decoration: none;
}
.phone-sidebar:hover{
    right: 0px;
}
#navbar{
    z-index: 100;
}
.main-menu{
    
    width: 100%;
    position: fixed;
}
.details-menu{
    position: fixed;
    
    width: 100%;
}
.navbar{
    z-index: 100;
    position: fixed;
}
.nav-item{
    margin: 15px;
    font-size: 15px;
    border-radius: 20px;
    transition: 0.2s;
}
.custom-link{
    color: #666 !important;
    transition: 0.2s;
    display: block;
    text-decoration: none;
    font-size: 600;
    padding: 0.5rem;
}
.custom-link:hover{
    transform: scale(1.1);
    color: #4c963b;
    text-decoration: none;
}
.navbar-nav{
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
}
.nav-item:hover{
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.navbar-expand-md{
    position: fixed;
    background-color: none;
}
.sticky{
    position: fixed;
    top: 0;
    background-color: white;
}
.navbar-brand{
    background-color: white;
    padding: 10px;
    border-radius: 14px;
    position: absolute;
    height: 100px;
    width: 410px;
}
.logo{
    height: 90px;
    position: absolute;
}
.logo-text{
    margin-left: 110px;
}
.special-navbar{
    background-color: white;
}
.navbar-brand2{
    background-color: white;
    padding: 10px;
    border-radius: 14px;
    position: absolute;
    height: 100px;
    width: 110px;
}


/* --- Phone-Navbar --- */
.phone-navbar{
    display: none;
    position: fixed;
    bottom: 0;
    background-color: white;
    height: 65px;
    width: 100%;
    z-index: 999;
    box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.custom-phone-link{
    padding: 10px;
    transition: 0.5s;
    
    
}
.custom-phone-link a{

    color: #666;
    text-decoration: none;
}
.side-nav-item{
    transform: scale(0.7);
}
.side-nav-item:hover, .side-nav-item:active , .center-nav-item:hover, .center-nav-item:active{
    transform: scale(1);
    background-color: var(--main-color-sheme);
    border-radius: 100%;
}
.side-nav-item a:hover, .side-nav-item a:active, .center-nav-item a:hover, .center-nav-item a:active{
    color: white;

}
.phone-link{
    position: absolute;
    margin-top: -10px;
    
    border: solid 1px red;
}


.center-nav-item{
    background-color: #666;
    
    transition: 0.5s;
    transform: scale(1.1);
}
.center-nav-item a{
    color: white;
}


@media screen and (max-width:600px){
    .phone-navbar{
        display: block;
    }
    .page-footer{
        text-align: center;
    }
    .slid .custom-btn{
        
    }
}




/* --- slider --- */
#slider{
    width: 100%;
    height: 110vh;
    overflow: hidden;
    margin-bottom: -200px;
}
.slider{
    display: flex;
    width: 500%;
    height: 102vh;
    transition: all 0.25s ease-in;
    transform: translateX(0);
}
.slider .box, .box-special{
    width: 100%;
    overflow: hidden;
    position: relative;
}
@media (max-width: 768px) {
    #desc-slid {
        margin-left: auto;
        margin-right: auto;
    }
    .box1{
        background-image: url(/photos/marble_with_logo_phone.jpg)!important;
    }
    .slider{
        height: 89vh;
    }
    #slider{
        margin-bottom: -300px;
    }
}

.box-special .bg{
    padding: 2rem;
    
    width: 33%;
    transform: skewX(7deg);
    position: absolute;
    height: 100%;
    left: -10%;
    padding-left: 20rem;
    transform-origin: 0 100%;
}
.box-special .bg:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 273%;
    top: 0;
    background-color: inherit;
    
}
.slider .box .bg{
    padding: 2rem;
    background-color: rgba(82, 148, 81, 0.5);
    width: 55%;
    transform: skewX(7deg);
    position: absolute;
    height: 100%;
    left: -10%;
    padding-left: 20rem;
    transform-origin: 0 100%;
}

.slider .box p{
    font-size:20px;
    font-weight: 400;
}
.slider .box .bg:before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: inherit;
    transform: skewX(10deg);
}
.slider .box .details{
    position: absolute;
    z-index: 200;
    height: 100%;
}
.slidy{
    width: 500%;
    display: flex;
    color: white;
}
.slidy input{
    display: none;
}
.slid{
    width: 20%;
    transition: 2s;
}
#slider-header{
    font-size: 4em;
}
#slider-text{
    font-size: 1.5em;
}
.overlap-navigation{
    margin-top: -100px!important;
}
.navigation-manual{
    
    
    background-color: white;
    padding-top: 20px;
    padding-bottom: 10px;
    border-radius: 16px;
    z-index: 200;
}
.navigation-manual .mx-auto{
    text-align: center;
}
@media screen and (max-width:576px){
    
    .slider .box .details{
        
    }
}
.manual-btn{
    border: 2px solid var(--main-color-sheme);
    padding: 7px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}
.checked {
    background: var(--main-color-sheme);
}

.manual-btn:hover{
    background: var(--main-color-sheme);
}
.maindiv{
    overflow: hidden;
    width: 100%;
}

#radio1:checked ~ .first{
    margin-left: 0;
}
#radio2:checked ~ .first{
    margin-left: -20%;
}
#radio3:checked ~ .first{
    margin-left: -40%;
}
#radio4:checked ~ .first{
    margin-left: -60%;
}
 .box2, .box3, .box4{
    background-size:cover;
}
.box1{
    background-image: url("/photos/marble_with_logo.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff;
}
.box2{
    background-image: url("/photos/Domek_podwórko2.jpg");
}
.box3{
    background-image: url("/photos/kitchen1.jpg");
}
.box4{
    background-image: url("/photos/bathroom1x.jpg");
}
.box1, .box2, .box3, .box4{
    width: 100%;
}
.spacerek{
   margin-top: 100vh; 
}

/* --- Content ---*/
.title{
    margin-bottom: 5rem;
    padding-top: 4rem;
}
.text-desc{
    margin-top: 80px;
    margin-bottom: 160px;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: auto;
    text-align: center;
    font-family: arial;
    transition: 0.5s;
}
.card:hover{
    background-color: #daebd6;
}
.my-spacer{
    margin-bottom: 100px;
}
.card-body {
    padding: 2px 16px;
    height: 400px;
}
  
.card-title {
    font-size: 22px;
    margin-top: 10px;
}
  
.card-text {
    font-size: 14px;
    text-align: left;
}
.centered-text{
    margin-top: 13%;
}
.card-icon{
    margin-block:50px;
    color: #B1D7B4;
}
.specjal-image img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    transition: 0.5s;
}
.specjal-image img:hover{
    transform: translate(0, -20px)
}
.background-color{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background-color: #B1D7B4;
}
.background-shape{
    margin-top: 50px;
    margin-left: -50px;
    width: 65%;
    border-radius: 20px;
    height: 300px;
    position: absolute;
    overflow: hidden;
}
.special-height{
    margin: 250px;
    min-height: 900px;
    background-color: rgb(230, 230, 230);
    box-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.2);
    background-image: url(/photos/todd-kent-178j8tJrNlc-unsplash.jpg);
    background-size: cover;
    background-position: 0px -150px;
}
.steps{
    width: 20%;
    margin: 10px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 15px;
    height: 110px;
    transition: 1s;
    overflow: hidden;
}
.step1, .step2, .step3, .step4, .step5{
    transition: 0.5s;
}
.step1:hover, .step2:hover, .step3:hover, .step4:hover, .step5:hover{
    height: 240px;
    width: 100%;
    background-color: #B1D7B4;
}



/* --- Projekty --- */
.houses-background-settings{
    height: 600px;
    background-size: cover;
    background-position: center;
    transition: 1s;
}
.houses-background-settings:hover{
    background-position-x: -100px;
}
@media screen and (max-width: 576px){
    .houses-background-settings{
        height: 400px;
    }
    .house-card-text h2{
        font-size: 1.3rem;
    }
    .house-card-text li{
        font-size: 0.7rem;
        margin-left: -20px;
        padding: 0;
    }
    .house-card-text p{
        display: none;
    }
}
.house-card-text{
    color: #f1f1f1;
    background: rgb(54, 54, 54);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 20px;
}
.house-card-text h5{
    padding-bottom: 12px;
    border-bottom: solid 3px var(--main-color-sheme)
}
.house-card-text h2:hover{
    transition: 0.2s;
    color: var(--main-color-sheme);
}
.gallery {
    box-shadow: 4px 4px 7px 7px rgba(0, 0, 0, 0.2);
    z-index:100;
}


  
.modal-header, .modal-footer {
    background-color: #f1f1f1;
}
/* --- Houses-details --- */


.back-link a{
    font-size: 30px;
    margin-left: 40px;
    color: rgb(255, 255, 255);
}
.active-details{
    visibility: visible;
    opacity: 1;
    height: auto;
}
.house-details-background{
    background: #fff;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.details-background-house{
    background-size: cover;
    background-position: 0px -350px;
    min-height: 400px;
    background-attachment: fixed;
    position: relative;
}
.details-title{
    color: white;
    position: absolute;
    bottom: 0;
    font-size: 70px;
}
.close-button{
    background-color: #202020;
    width: 65px;
    float: right;
    border: none;
    color: white;
    padding: 10px 25px;
    font-size: 30px;
    cursor: pointer;
    
    border-radius: 120px;
    z-index: 100;
}

.details-title, .long-description, .long-description-details{
    
}
.long-description p, .long-description-details{
    font-size: 22px;
}
.long-description-details li{
    margin-block: 15px;
}
.btn {
    font-size: 16px;
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    background-color: #b5c4b5;
    color: white;
    border: none;
    cursor: pointer;
  }

  .btn:hover {
    background-color: #3e8e41;
  }
  


  /* Styl wyniku */
  #result {
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
    color: var(--main-color-sheme);
  }

  .house-details input[type=checkbox]{
    height: 0;
    width: 0;
    visibility: hidden;
    }

    .house-details label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 27px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
    margin: auto;
    margin-top: -23px;
}

.house-details label:after {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

.house-details input:checked + label {
    background: var(--main-color-sheme);
}

.house-details input:checked + label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.house-details label:active:after {
    width: 35px;
}
.house-details .card p{
    margin-top: 10px;
    font-size: 17px;
    padding-left: 40px;
    text-align: left;
    color: white;
    font-weight: bolder;
}
@media screen and (max-width: 576px){
    .house-details .card p{
        text-align: center;
        padding: 0;
        max-height: 100%;
    }
    .house-details .check{
        margin-top: -20px;
        margin-bottom: 30px;
    }
    .house-details span::before{
        content: "\A";
        white-space: pre;
    }
    .short-description{
        font-size: 25px;
        text-align: center !important;
    }
}
.short-description{
    text-align: justify;
}
span{
    color: var(--main-color-sheme);
}
.house-details .card{
    padding: 0px;
    transition: 1s;
}
.house-details .card span{
    border-bottom: solid 2px var(--main-color-sheme);
}
.house-details .card-switch-text{
    max-height: 130px;
    background: rgb(54, 54, 54);
}
.more-details{
    border: solid 2px var(--main-color-sheme);
    padding: 20px;
}
.more-details li{
    font-size: 17px;
}
#surface, #materials{
    margin: 10px;
    padding: 40px;
    /* From https://css.glass */
background: rgba(207, 255, 213, 0.49);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.6px);
-webkit-backdrop-filter: blur(6.6px);
}

.kalkulator{
    background: rgba(207, 255, 213, 0.49);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.6px);
    -webkit-backdrop-filter: blur(6.6px);
    padding-block: 60px;
    padding-inline: 60px;
}
.additional-desc{
    font-size: 15px;
    color: #222;
}

/* --- Encourage --- */
#encourage iframe{
    height: 600px;
}
#encourage .col-md-7{
    background: rgb(54, 54, 54);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.425);
    padding: 130px;
}
.map-title{
    font-size: 46px;
}
.map-text{
    color: white;
    font-size: 20px;
    padding-right: 30px;
    padding-top: 40px;
}
.map-text-colored{
    color: var(--main-color-sheme);
}
.map-text-lowercased{
    font-size: 10px;
}
#encourage p{
    margin-top: 50px;
    font-size: 20px;
}
@media screen and (max-width: 576px){
    #encourage .col-md-7{
        padding: 30px;
    }
}

/* --- Contact --- */
#kontakt-part{
    background:
        radial-gradient(circle at top left, rgba(144, 206, 143, 0.2), transparent 28%),
        linear-gradient(135deg, #142219 0%, #1d3124 58%, #243d2c 100%);
    padding-block: 70px;
    margin-top: 60px;
    position: relative;
    overflow: hidden;
}

#kontakt-part::before{
    content: "";
    position: absolute;
    inset: auto -120px -120px auto;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(144, 206, 143, 0.2) 0%, rgba(144, 206, 143, 0) 70%);
    pointer-events: none;
}
.container {
    max-width: 500px;
    margin: 0 auto;
}
form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
}
.form-group {
    margin-bottom: 20px;
}
label {
    font-weight: bold;
}
textarea {
    resize: none;
}

#kontakt-part .test{
    position: relative;
    z-index: 1;
}

#kontakt-part form{
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(28px, 4vw, 42px);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.22);
}

#kontakt-part h2{
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: #173123;
    font-weight: 800;
    letter-spacing: -0.03em;
}

#kontakt-part h4{
    color: #415449;
    font-size: 1.02rem;
    line-height: 1.6;
}

#kontakt-part h4 b,
#kontakt-part h4 a{
    color: #205d31;
}

#kontakt-part .form-group{
    margin-bottom: 18px;
}

#kontakt-part label{
    margin-bottom: 8px;
    color: #173123;
    font-size: 0.96rem;
    letter-spacing: 0.02em;
}

#kontakt-part .form-control{
    border-radius: 16px;
    border: 1px solid rgba(30, 56, 39, 0.14);
    background: #f7faf6;
    padding: 14px 16px;
    min-height: 54px;
    box-shadow: none;
}

#kontakt-part textarea.form-control{
    min-height: 160px;
}

#kontakt-part .form-control:focus{
    border-color: rgba(76, 150, 59, 0.55);
    box-shadow: 0 0 0 0.22rem rgba(144, 206, 143, 0.2);
    background: #fff;
}

#kontakt-part #kontakt-submit{
    width: 100%;
    margin-top: 8px;
    padding-block: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2f6b38 0%, #4a9b45 100%);
    box-shadow: 0 18px 40px rgba(39, 88, 43, 0.28);
}

#kontakt-part #kontakt-submit:hover{
    transform: translateY(-1px);
}

#kontakt-status{
    text-align: center;
}



/* --- Answers --- */
.accordion-button:not(.collapsed){
    background-color: var(--main-color-sheme) !important;
    
    color: white !important;
    border: none !important;
}
.accordion-button:focus{
    border: none !important;
    box-shadow: 0 0 0 0.15rem rgba(21, 253, 13, 0.25) !important;
}
.accordion{
    border: none !important;
}

.qa-bi{
    color: rgb(54, 54, 54);
}





/* --- Footer --- */
.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 30px;
}
.footer-copyright {
    color: #666;
    padding: 40px 0;
}








@media screen and (max-width:600px){
    #slider-header{
        font-size: 3em;
        text-align: center;
    }
    #slider-text{
        font-size: 1.2em;
        text-align: center;
    }
    #navbar{
        display: none;
    }
    
}
/* --- WOW dla karuzeli --- */
.wow-carousel {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    position: relative;
}

/* Nadpisanie Twojego limitu wysokości (masz max-height:500px) */
#wow,
#galleryCarousel .carousel-item {
    max-height: none;
}

#galleryCarousel .carousel-item {
    height: clamp(320px, 70vh, 680px);
}

#galleryCarousel .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform-origin: center;
}

/* Delikatny „Ken Burns” tylko na aktywnym slajdzie */
#galleryCarousel .carousel-item.active img {
    animation: kenburns 9s ease-in-out both;
}

@keyframes kenburns {
    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.12);
    }
}

/* Fade overlay + bardziej czytelne napisy */
#galleryCarousel .overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .35) 100%);
    pointer-events: none;
}

#galleryCarousel .carousel-caption {
    text-shadow: 0 6px 24px rgba(0, 0, 0, .6);
}

/* Dots ładniejsze i w Twoim kolorze */
#galleryCarousel .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .55);
    transition: transform .2s ease, background-color .2s ease;
}

#galleryCarousel .carousel-indicators .active {
    background-color: var(--main-color-sheme);
    transform: scale(1.25);
}

/* Pasek postępu */
#galleryCarousel .carousel-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}

#galleryCarousel .carousel-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--main-color-sheme);
    animation: progress 4.5s linear infinite;
}

/* Pauza paska przy hoverze */
#galleryCarousel:hover .carousel-progress span {
    animation-play-state: paused;
}

@keyframes progress {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* --- LEKKI LIGHTBOX (bez bibliotek) --- */
.lb.hidden {
    display: none;
}

.lb {
    position: fixed;
    inset: 0;
    z-index: 1060;
    /* > Bootstrap modal */
    background: rgba(0, 0, 0, .92);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-stage {
    max-width: 95vw;
    max-height: 90vh;
}

.lb-stage img {
    max-width: 95vw;
    max-height: 90vh;
}

.lb-close,
.lb-prev,
.lb-next {
    position: absolute;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 42px;
    line-height: 1;
    cursor: pointer;
    padding: .25rem .5rem;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}

.lb-close {
    top: 12px;
    right: 16px;
    font-size: 56px;
}

.lb-prev {
    left: 16px;
}

.lb-next {
    right: 16px;
}

.lb-counter {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 600;
    background: rgba(0, 0, 0, .35);
    padding: .25rem .5rem;
    border-radius: 8px;
}

/* Gest dotykowy – ułatw klik w mobilu */
.lb-stage {
    touch-action: pan-y;
}

/* Stałe „okno” na slajdy */
#galleryCarousel .carousel-item {
    height: clamp(320px, 70vh, 680px);
}

/* Domyślnie: zdjęcia wypełniają okno (cover) */
#galleryCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dla zdjęć pionowych – pokaż całe (contain) + neutralne tło */
#galleryCarousel .carousel-item img.is-portrait {
    object-fit: contain;
    background: #0b0b0b;
    /* pasy po bokach/górze-dole */
}

/* Ken Burns tylko dla poziomych – pionowe bez zoomu */
#galleryCarousel .carousel-item.active img.is-landscape {
    animation: kenburns 9s ease-in-out both;
}

@keyframes kenburns {
    from {
        transform: scale(1.03);
    }

    to {
        transform: scale(1.12);
    }
}

/* (opcjonalnie) całkiem wyłącz podpisy, gdyby gdzieś zostały */
#galleryCarousel .carousel-caption {
    display: none !important;
}

/* Stałe okno slajdów (też dla tego ID) */
#carouselExampleIndicators .carousel-item {
    height: clamp(320px, 70vh, 680px) !important;
    overflow: hidden !important;
}

/* Zneutralizuj stare pozycjonowanie obrazka i wymuś object-fit */
#carouselExampleIndicators .carousel-item>a>img,
#carouselExampleIndicators .carousel-item>img {
    position: static !important;
    /* zamiast absolute */
    top: auto !important;
    left: auto !important;
    transform: none !important;

    /* wyłącz stare min-* i „auto” */
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: cover;
    object-position: center;
    display: block !important;
}

/* Pionowe – pokaż całe zdjęcie */
#carouselExampleIndicators .carousel-item img.is-portrait {
    object-fit: contain !important;
    background: #0b0b0b;
    /* pasy */
}

/* Ken Burns tylko dla poziomych */
#carouselExampleIndicators .carousel-item.active img.is-landscape {
    animation: kenburns 9s ease-in-out both;
}

/* Pasek postępu również dla tego ID */
#carouselExampleIndicators .carousel-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(255, 255, 255, .25);
    overflow: hidden;
}

#carouselExampleIndicators .carousel-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--main-color-sheme);
    animation: progress 4.5s linear infinite;
}

#carouselExampleIndicators:hover .carousel-progress span {
    animation-play-state: paused;
}

/* (Jeśli gdzieś zostały captiony) */
#carouselExampleIndicators .carousel-caption {
    display: none !important;
}

/* Temporary disabled contact form */
.kontakt-form-disabled {
    background: linear-gradient(145deg, #ffffff 0%, #f3f7f1 100%);
    border: 1px solid rgba(144, 206, 143, 0.28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}

.kontakt-temporary-note {
    margin: 26px 0 28px;
    padding: 18px 20px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(20, 34, 25, 0.94), rgba(34, 69, 49, 0.92));
    color: #f4fff4;
    font-size: 1rem;
    line-height: 1.7;
    box-shadow: 0 18px 40px rgba(15, 31, 21, 0.24);
}

.kontakt-disabled-fieldset {
    opacity: 0.58;
    filter: saturate(0.7);
}

.kontakt-form-disabled .custom-btn[disabled] {
    width: 100%;
    cursor: not-allowed;
    opacity: 1;
    background: linear-gradient(135deg, #6b766e, #47534a);
    border-color: #47534a;
    box-shadow: none;
}

/* Premium house pages */
.house-showcase-page {
    background:
        radial-gradient(circle at top left, rgba(144, 206, 143, 0.18), transparent 32%),
        radial-gradient(circle at top right, rgba(19, 45, 31, 0.12), transparent 28%),
        linear-gradient(180deg, #f4f8f1 0%, #edf3ec 42%, #f7faf6 100%);
}

.house-showcase-page .phone-sidebar {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 36px rgba(15, 31, 21, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.house-showcase-page .special-navbar {
    background: transparent;
}

.house-showcase-page .navbar-brand2,
.house-showcase-page .house-menu {
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 40px rgba(17, 30, 23, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.house-showcase-page .house-menu {
    padding-inline: 14px;
}

.house-showcase-page .nav-item {
    margin: 10px 12px;
}

.house-showcase-page .custom-link {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.house-showcase-page .house-details-background {
    background: transparent;
    padding-bottom: 72px;
}

.house-showcase-page .details-background-house {
    min-height: clamp(420px, 66vh, 700px);
    margin: 0 26px 42px;
    border-radius: 0 0 36px 36px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    box-shadow: 0 36px 80px rgba(18, 34, 24, 0.2);
}

.house-showcase-page .details-background-house::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(7, 12, 10, 0.08) 0%, rgba(7, 12, 10, 0.2) 35%, rgba(7, 12, 10, 0.72) 100%),
        linear-gradient(125deg, rgba(144, 206, 143, 0.2), transparent 38%);
}

.house-showcase-page .details-background-house::after {
    content: "";
    position: absolute;
    inset: auto 28px 28px auto;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.house-showcase-page .details-title {
    left: clamp(20px, 5vw, 70px);
    right: 24px;
    bottom: clamp(20px, 4vw, 48px);
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
    padding: 24px 28px;
    max-width: max-content;
    background: rgba(13, 24, 17, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 1;
}

.house-showcase-page .back-link {
    display: block;
    margin-top: 12px;
}

.house-showcase-page .back-link a {
    display: inline-block;
    margin-left: 0;
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.84);
}

.house-showcase-page .house-details > .house-details-background > .container-fluid {
    max-width: 1520px;
    padding-inline: 28px;
}

.house-showcase-page .long-description,
.house-showcase-page .long-description-details {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.house-showcase-page .long-description {
    position: relative;
    padding: clamp(28px, 3vw, 38px);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 28px 70px rgba(19, 37, 27, 0.11);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.house-showcase-page .long-description::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(144, 206, 143, 0.55), rgba(255, 255, 255, 0.3));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.house-showcase-page .short-description {
    margin-bottom: 28px;
    font-size: clamp(1.65rem, 2.2vw, 2.8rem);
    line-height: 1.22;
    text-align: left !important;
    color: #132b1f;
    letter-spacing: -0.03em;
    max-width: none;
}

.house-showcase-page .short-description b {
    color: #274f35;
}

.house-showcase-page .house-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin: 0 0 26px;
}

.house-showcase-page .house-tag {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(39, 79, 53, 0.08);
    border: 1px solid rgba(39, 79, 53, 0.12);
    color: #274f35;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(24, 45, 31, 0.08);
}

.house-showcase-page .house-tag::before {
    content: "";
    width: 9px;
    height: 9px;
    margin-right: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4a9b45, #9fe39c);
    box-shadow: 0 0 0 4px rgba(144, 206, 143, 0.18);
}

.house-showcase-page .house-tag-strong {
    background: linear-gradient(135deg, #214733 0%, #2f6b38 100%);
    border-color: rgba(33, 71, 51, 0.24);
    color: #f4fff4;
}

.house-showcase-page .house-tag-strong::before {
    background: linear-gradient(135deg, #dfffdc, #9fe39c);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.house-showcase-page .long-description > p:first-of-type {
    margin-bottom: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(25, 50, 33, 0.12);
}

.house-showcase-page .intro-copy {
    margin-bottom: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(25, 50, 33, 0.12);
}

.house-showcase-page .long-description p {
    font-size: 1.02rem;
    line-height: 1.9;
    color: #294236;
    max-width: 70ch;
}

.house-showcase-page .long-description .container-xl {
    max-width: none;
    width: 100%;
    padding: 0;
}

.house-showcase-page .long-description .row.my-5 {
    position: relative;
    margin: 36px 0 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 34px 24px 18px;
    border-radius: 32px;
    background: linear-gradient(145deg, #112419 0%, #183425 56%, #254c35 100%);
    box-shadow: 0 34px 70px rgba(11, 23, 16, 0.3);
    overflow: hidden;
}

.house-showcase-page .long-description .row.my-5::before {
    content: "";
    position: absolute;
    inset: auto -40px -70px auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(144, 206, 143, 0.28) 0%, rgba(144, 206, 143, 0) 72%);
}

.house-showcase-page .long-description .row.my-5 > h2,
.house-showcase-page .long-description .row.my-5 > p {
    position: relative;
    z-index: 1;
    width: 100%;
    color: #f5fff7;
}

.house-showcase-page .long-description .row.my-5 > h2 {
    margin-bottom: 8px;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.house-showcase-page .long-description .row.my-5 > p {
    margin-bottom: 22px;
    color: #9fe39c;
    font-size: 0.92rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.house-showcase-page .long-description .row.my-5 > [class*="col-"] {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    padding: 22px 22px 16px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 16px 34px rgba(5, 12, 8, 0.18);
}

.house-showcase-page .long-description .row.my-5 > [class*="col-"] > p:first-child {
    margin-bottom: 16px;
    font-size: 1.02rem;
    line-height: 1.45;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.house-showcase-page .long-description .row.my-5 > [class*="col-"] li {
    color: rgba(244, 255, 246, 0.92);
    font-size: 1rem;
    line-height: 1.78;
}

.house-showcase-page .long-description .row.my-5 > [class*="col-"] li::before {
    background: linear-gradient(135deg, #baffba, #f0ffee);
    box-shadow: 0 0 0 4px rgba(144, 206, 143, 0.22);
}

.house-showcase-page .long-description ul,
.house-showcase-page .more-details ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.house-showcase-page .long-description li,
.house-showcase-page .more-details li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 24px;
}

.house-showcase-page .long-description li::before,
.house-showcase-page .more-details li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8ddf8b, #d2ffd0);
    box-shadow: 0 0 0 4px rgba(144, 206, 143, 0.16);
}

.house-showcase-page .long-description-details {
    position: relative;
    padding-left: 22px;
}

.house-showcase-page .wow-carousel,
.house-showcase-page #carouselExampleIndicators {
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 26px 70px rgba(18, 34, 24, 0.16);
}

.house-showcase-page .wow-carousel .carousel-item img,
.house-showcase-page #carouselExampleIndicators .carousel-item img {
    filter: saturate(1.04) contrast(1.03);
}

.house-showcase-page .carousel-control-prev,
.house-showcase-page .carousel-control-next {
    opacity: 1;
}

.house-showcase-page .carousel-control-prev-icon,
.house-showcase-page .carousel-control-next-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: rgba(14, 29, 20, 0.56);
    background-size: 46%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.house-showcase-page .more-details {
    border: none;
    border-radius: 30px;
    padding: 28px;
    background: linear-gradient(160deg, #102218 0%, #163426 54%, #214733 100%);
    color: #eef8ef;
    box-shadow: 0 34px 72px rgba(9, 18, 13, 0.26);
}

.house-showcase-page .more-details li {
    font-size: 1rem;
    line-height: 1.7;
}

.house-showcase-page #surface,
.house-showcase-page #materials {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.house-showcase-page .more-details-headers h5 {
    margin-bottom: 14px;
    color: #9de29b;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.house-showcase-page .more-details-headers + ul {
    margin-bottom: 26px;
}

.house-showcase-page .more-details-headers:last-of-type + ul {
    margin-bottom: 0;
}

.house-showcase-page .house-details > .house-details-background > .container-fluid > .row > p[style] {
    margin-top: 28px;
    padding: 20px 26px;
    border-radius: 24px;
    background: rgba(16, 34, 24, 0.92);
    color: #f4fff4;
    box-shadow: 0 20px 50px rgba(10, 20, 14, 0.2);
}

.house-showcase-page .page-footer {
    background: linear-gradient(180deg, #0f1f17 0%, #0b140f 100%);
    border-top: 1px solid rgba(144, 206, 143, 0.14);
}

.house-showcase-page .footer-copyright {
    color: rgba(214, 228, 217, 0.78);
}

@media screen and (min-width: 992px) {
    .house-showcase-page .long-description-details {
        margin-top: -54px !important;
    }

    .house-showcase-page .long-description-details > .wow-carousel,
    .house-showcase-page .long-description-details > #carouselExampleIndicators {
        position: sticky;
        top: 116px;
        z-index: 2;
    }
}

@media screen and (max-width: 991px) {
    .house-showcase-page .details-background-house {
        margin-inline: 18px;
    }

    .house-showcase-page .long-description,
    .house-showcase-page .long-description-details {
        padding-left: 0;
    }

    .house-showcase-page .long-description-details {
        margin-top: 24px !important;
    }
}

@media screen and (max-width: 768px) {
    .house-showcase-page .details-background-house {
        min-height: 360px;
        border-radius: 0 0 28px 28px;
        margin: 0 12px 28px;
    }

    .house-showcase-page .details-title {
        max-width: calc(100% - 32px);
        padding: 20px 18px;
        border-radius: 22px;
    }

    .house-showcase-page .back-link a {
        letter-spacing: 0.14em;
    }

    .house-showcase-page .house-details > .house-details-background > .container-fluid {
        padding-inline: 16px;
    }

    .house-showcase-page .long-description {
        padding: 24px 18px;
        border-radius: 26px;
    }

    .house-showcase-page .long-description p {
        max-width: none;
    }

    .house-showcase-page .long-description .row.my-5 {
        padding: 28px 16px 10px;
        border-radius: 24px;
    }

    .house-showcase-page .long-description .row.my-5 > [class*="col-"] {
        padding: 18px 16px 12px;
    }

    .house-showcase-page .more-details {
        padding: 22px 18px;
        border-radius: 24px;
    }
}

@media screen and (max-width: 576px) {
    .kontakt-temporary-note {
        padding: 16px;
        font-size: 0.95rem;
    }

    .house-showcase-page .short-description {
        font-size: 1.9rem;
    }

    .house-showcase-page .house-tags {
        gap: 8px;
    }

    .house-showcase-page .house-tag {
        width: 100%;
        justify-content: flex-start;
        font-size: 0.82rem;
    }

    .house-showcase-page .long-description p {
        font-size: 1rem;
        line-height: 1.8;
    }

    .house-showcase-page .long-description .row.my-5 > p {
        letter-spacing: 0.11em;
    }

    .house-showcase-page .more-details li,
    .house-showcase-page .long-description li {
        padding-left: 22px;
    }
}