/* Custom Styles */
:root {
    /* Fonts */
    --font-inria: "Inria Serif", serif;
    --font-montserrat: "Montserrat", sans-serif;

    /* Colors */
    --black: #000000;
    --white: #ffffff;
    --brand-red: #e32b13;
    --gray-text: #555;
    --light-gray: #f2f2f2;
    --heading-brown: #715E33;
    --heading-brown-light: #6E5C32;

    /* Spacing */
    --spacing-container: clamp(1.5rem, 5vw, 6rem);
}

body {
    font-family: var(--font-montserrat);
    color: var(--black);
    padding-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--black);
    font-family: var(--font-inria);
    font-weight: 300;
    /* Adding the common font-weight from the design */
}

h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
}

h2 {
    font-size: clamp(2rem, 4vw + 1rem, 3.5rem);
    text-transform: initial;
}

h3 {
    font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
}

h4 {
    font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
}

h5 {
    font-size: clamp(1.25rem, 1vw + 1rem, 2rem);
}

h6 {
    font-size: clamp(1rem, 0.5vw + 1rem, 1.5rem);
}

p {
    font-size: 1rem;
}
.apartment-table tbody tr:hover{
    background: #fff;
    /* color: red; */
    cursor: pointer;
}   
/* Header & Navigation */
.main-header {
    /* padding: 30px 0; */
    transition: all 0.3s ease;
    z-index: 1000;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    height: 61px;  
    position: fixed;
    top: 0;
}

g#a_color,
g#b_color,
g#d_color,
g#e_color,
g#f_color,
g#g_color,
g#h_color,
g#i_color {
    display: none;
    transition: transform 0.8s cubic-bezier(.25,.1,.25,1);
} 

.row-1 g#e,
.row-1 g#d, .row-1 g#g,.row-1 g#d,.row-1 g#f,
.row-1 g#h,.row-1 g#i{
  transform: translateY(-370px); 
}  

.row-1 g#a_color{
    display: block !important;
} 

.row-2 g#e,
.row-2 g#d, .row-2 g#g,.row-2 g#d,.row-2 g#f,
.row-2 g#h,.row-2 g#i{
  transform: translateY(-370px); 
} 

.row-2 g#b_color{
    display: block !important;
}

.row-3 g#g,
.row-3 g#h,.row-3 g#i,.row-3 g#f{
  transform: translateY(-370px); 
} 

.row-3 g#d_color{
    display: block !important;
}

.row-4 g#g,
.row-4 g#h,.row-4 g#i{
  transform: translateY(-370px); 
} 

.row-4 g#f_color{
    display: block !important;
}


.row-5 g#g,.row-5 g#d,.row-5 g#f,
.row-5 g#h,.row-5 g#i{
  transform: translateY(-370px); 
} 

.row-5 g#e_color{
    display: block !important;
}

.row-6 g#h,.row-6 g#i{
  transform: translateY(-220px); 
} 

.row-6 g#g_color{
    display: block !important;
}

g{
  transition: transform 0.8s cubic-bezier(.25,.1,.25,1);
} 

.row-7 g#i{
  transform: translateY(-220px); 
} 

.row-7 g#h_color{
    display: block !important;
}

.row-8 g#i_color{
    display: block !important;
} 

path#extra_on-off_7,
path#extra_on-off_6 {
    display: none;
} 


.row-3 path#extra_on-off_3,
.row-3 path#extra_on-off_2{
    display: none;
}

.row-4 g#extra_on-off {
    display: none;
}

.row-6 path#extra_on-off_7 {
    display: block;
}  

/*.row-9 g#a_color,
.row-9 g#b_color,
.row-9 g#d_color,
.row-9 g#e_color,
.row-9 g#f_color,
.row-9 g#g_color,
.row-9 g#h_color,
.row-9 g#i_color {
    display: block;
    transition: transform 0.8s cubic-bezier(.25,.1,.25,1);
} */


.building-renders svg {
    max-width: 100%;
    width: 220px;
    margin: 0px auto;
    text-align: center;
}

.main-header .container-fluid {
    padding-left: 48px;
    padding-right: 48px;
}

.navbar-brand {
    padding: 0;
    margin-top: -1px;
}

.navbar {
    padding: 2px 0;
}

.navbar-brand .logo-img {
    /* height: 45px; */
    /* width: auto; */
    display: block;
    /* Fixed empty ruleset */
}

.menu-toggle {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    cursor: pointer;
    width: 35px;
}

.menu-icon {
    display: block;
    width: 35px;
    height: 1px;
    background-color: var(--white);
    transition: all 0.3s ease;
}

.menu-icon:last-child {
    width: 20px;
}

.contact-link {
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 400;
    font-family: var(--font-montserrat);
}

.contact-link:hover {
    color: rgba(255, 255, 255, 0.7);
}

.header-left,
.header-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-right {
    justify-content: flex-end;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%),
        url('../images/banner-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding-bottom: 120px;
}

.hero-section .container-fluid {
    padding-left: var(--spacing-container);
    padding-right: var(--spacing-container);
}

.hero-title
 {
    font-weight: 400;
    text-transform: initial;
    margin: 0;
    line-height: 60px;
    font-size: clamp(2.5rem, 20vw, 3.2rem);
    max-width: 100%;
    font-family: var(--font-inria);
    transition: transform 0.1s linear, opacity 0.1s linear;
    /* transform-origin: bottom left; */
    /* will-change: transform, opacity; */
}

.hero-title.scrolled {
    /* Transition handled by JS */
    pointer-events: none;
    /* Fixed empty ruleset */
}

.hero-section .container-fluid {
    padding-left: 90px;
    padding-right: 90px;
}

/* Overlay Menu */
.overlay-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    /* Zoomed in initial state */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay-menu.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    /* Zoom to original size */
}

.menu-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.overlay-nav {
    text-align: center;
}

.overlay-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.overlay-links li {
    margin-bottom: 25px;
}

.overlay-links a {
    color: var(--white);
    text-decoration: none;
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-family: var(--font-montserrat);
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.overlay-links a:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Introduction Section */
.intro {
    padding: clamp(5rem, 6.5vw, 6.5rem) 0;
}

.intro-title {
    color: var(--heading-brown);
    font-size: clamp(2.5rem, 4vw, 4.4rem);
    font-weight: 300;
    line-height: 118%;
    text-transform: initial;
    margin-bottom: 35px;
}

.intro-description {
    color: var(--heading-brown-light);
    text-align: center;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 134%;
}

/* Project Section */
.project {
    background-color: var(--white);
    /* padding-bottom: clamp(5rem, 6.5vw, 6.5rem); */
}

/* Section Divider (Line - Text - Line) */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-montserrat);
    color: #6E5C32;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    text-transform: uppercase;
    gap: 10px;
    margin-bottom: clamp(3rem, 6.2vw, 6.2rem);
    z-index: 1;
    position: relative;
}

.span-divider-left,
.span-divider-right {
    max-width: 118px;
    width: 100%;
    display: block;
}

.span-divider-left::before,
.span-divider-right::after {
    content: "";
    border-bottom: 1px solid #6E5C32;
    max-width: 0;
    /* Start at 0 width */
    width: 100%;
    display: block;
    transition: max-width 1.5s ease-out;
    /* Smooth transition */
}

/* Float the right line to the right side of its container to grow inwards-outwards if needed, 
   but since the container is flex, it grows from the text outwards naturally with max-width */
.span-divider-right::after {
    margin-left: auto;
}

/* Class added via JS when scrolled into view */
.section-divider.animate-lines .span-divider-left::before,
.section-divider.animate-lines .span-divider-right::after {
    max-width: 118px;
    /* Target width */
}

/* Complex Overlapping Grid Layout */
.project-grid-container {
    padding-left: 70px;
}

/* Specific Placements inside the Grid */

.project-title-box {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    padding-right: 20px;
    display: flex;
    align-items: center;
}

.project-title-box h3 {
    color: var(--heading-brown);
    font-size: clamp(2.2rem, 3vw, 3.25rem);
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    text-transform: initial;
    margin-bottom: 0;
}

.project-img-top-right {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    /* Spans down to create overlap space */
    position: relative;
    z-index: 3;
    /* Below the left image */
    margin-bottom: 80px;
    /* Space for the bottom-right text */
}

/* This is the key element for the overlap */
.project-img-bottom-left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    position: relative;
    z-index: 2;
    /* Needs to be above the top-right image */
    margin-top: -300px;
    /* Negative margin pulls it up over the top row */
    /* margin-right: -10%; */
    /* Negative margin pulls it right over the right column */
    background: var(--white);
    /* Ensure background is solid so top-right image doesn't show through transparent areas if any */
}

.project-desc-box {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: end;
    /* Align to the bottom of the cell */
    padding-left: 10%;
    /* Push it away from the overlapping image */
    z-index: 1;
}



.project-desc-box {
    padding: 0 70px;
}

.project-desc-box p {
    color: var(--heading-brown-light);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 126%;
    max-width: 474px;
}

/* Image utility */
.custom-shadow {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
}

/* Parallax Wrapper */
.parallax-wrapper {
    /* overflow: hidden; */
    /* Important so translated image doesn't break layout wildly */
    width: 100%;
    height: 100%;
}

.parallax-img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    will-change: transform;
    /* Hint for browser performance */
    transform: scale(1.1);
    /* Slightly enlarge so when it translates, edges don't show background */
}

.project-img-top-right img {
    height: 599px;
    object-fit: cover;
    width: 100%;
}

.project-title-box {
    padding: 70px 80px;
}

/* Minergie Section */
.minergie-section {
    background-color: var(--white);
    padding-bottom: clamp(4rem, 6vw, 6rem);
}

.minergie-logo-wrapper {
    margin-bottom: clamp(2rem, 3vw, 3rem);
}

.minergie-logo {
    max-width: 363px;
    height: auto;
    width: 100%;
}

.minergie-text {
    color: var(--heading-brown-light);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 134%;
}

/* Raumkonzept Section */

.raumkonzept-section {
    background-color: var(--white);
    /* Base color */
    padding-top: clamp(5rem, 6.5vw, 6.5rem);
	margin-bottom: clamp(5rem, 8.5vw, 8.5rem);
}
.eindruck-section .main-swiper .swiper-slide img {
    border-radius: 0;
}
.eindruck-slider {
	max-width:1440px;
	width:100%;
	margin:auto;
	display:block;
}
.thumbs-swiper .swiper-slide-thumb-active {
    border: 3px solid var(--heading-brown) !important;
}
.thumbs-swiper .swiper-slide img {
    border-radius: 0 !important;
}
.thumbs-swiper .swiper-slide-thumb-active {
   border-radius: 0 !important;
}

.raumkonzept-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 531px;
    background: #FCF0DB;
    z-index: 0;
}

.raumkonzept-title {
    color: var(--heading-brown);
    font-size: clamp(2.5rem, 4vw, 4.4rem);
    font-weight: 300;
    line-height: 118%;
    text-transform: capitalize;
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

/* Custom CSS Grid for overlapping images */
.raum-grid-container {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Image 1: Top Center Balcony (Static) */
.raum-img-1 {
    grid-column: 2 / 12;
    /* Covers most of the width, visually centered */
    grid-row: 1 / 3;
    z-index: 1;
    position: relative;
    /* margin-bottom: 124px; */
}

/* Image 2: Middle Left Dining (Parallax) */
.raum-img-2 {
    z-index: 3;
    position: relative;
    margin-top: -80px;
    padding-right: 0;
    height: 434px;
    position: relative;
    left: -10px;
    max-width: 620px;
    margin-left: 100px;
}

/* Image 3: Middle Right Kitchen (Parallax) */
.raum-img-3 {
    z-index: 4;
    position: relative;
    margin-top: 100px;
    margin-left: 0;
    max-width: 620px;
    margin-right: 130px;
    right: 80px;
}

/* Image 4: Bottom Left Bedroom (Parallax) */
.raum-img-4 {
    z-index: 4;
    position: relative;
    margin-top: -90px;
    position: relative;
    left: 120px;
    max-width: 594px;
}

/* Element 5: Bottom Right Text Block */
.raum-text-block {
    z-index: 1;
    position: relative;
    padding: 0 20px 0 109px;
    align-self: end;
}

.raum-text-block p {
    color: var(--heading-brown-light);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 134%;
}

/* "JETZT ENTDECKEN" link styling */
.raum-link {
    color: var(--black);
    font-family: var(--font-inria);
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    text-decoration: none;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--black);
    font-weight: 400;
    line-height: 90%;
    text-transform: capitalize;
}

.raum-link:hover {
    color: var(--black);
    opacity: 0.7;
}

/* Specific Parallax Initial Scales */
/* We scale them slightly larger than their container so when we translate them within the overflow-hidden wrapper, the edges aren't exposed */
.parallax-img-2,
.parallax-img-3,
.parallax-img-4 {
    will-change: transform;
    transform: scale(1.15);
    /* Slightly higher scale for larger translations */
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Wrapper Utility to constrain height if needed, though aspect ratio of image usually governs if width is set */
/* .raum-img-1 img,
.raum-img-2 .parallax-wrapper,
.raum-img-3 .parallax-wrapper,
.raum-img-4 .parallax-wrapper {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
} */

/* .raum-grid-container-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1170px;
    margin: auto;
    width: 100%;
    flex-wrap: wrap;
} */

/* Eindruck Section */
.eindruck-section {
    /* padding-top: clamp(4rem, 6.5vw, 6.5rem); */
    padding-bottom: clamp(4rem, 6.5vw, 6.5rem);
    background-color: var(--white);
    overflow: hidden;
}

.eindruck-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: #F4E1BE;
    z-index: 0;
    display: none;
}

.eindruck-title {
    color: var(--heading-brown);
    font-family: var(--font-inria);
    font-size: clamp(2.5rem, 4.4vw, 4.4rem);
    font-weight: 300;
    text-transform: capitalize;
}

.eindruck-slider .slider-item {
    margin: 0 15px;
    transition: transform 0.3s ease;
    outline: none;
}

.eindruck-slider .slider-item img {
    width: 100%;
    height: 654px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .eindruck-slider .slider-item img {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .eindruck-slider .slider-item img {
        height: 300px;
    }
}

/* Video Section */
.video-section {
    background-color: var(--white);
    overflow: hidden;
    margin-bottom: clamp(4rem, 6.5vw, 6.5rem);
}

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

#project-video {
    display: block;
    cursor: pointer;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through if we want to click the button or the video */
}

.play-btn {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
    /* Re-enable pointer events for the button */
    padding: 0;
}

.play-btn:hover {
    transform: scale(1.1);
}

.video-section.playing .video-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .main-header {
        padding: 6px 0;
    }

    /* Adjust project grid overlap for tablets */
    .project-grid-container {
        grid-template-columns: 1fr;
        /* Switch to single column */
        grid-template-rows: auto;
        gap: 30px;
    }

    .project-title-box,
    .project-img-top-right,
    .project-img-bottom-left,
    .project-desc-box {
        grid-column: 1 / -1;
        /* Everyone takes full width */
        grid-row: auto;
        /* Automatic rows */
        margin: 0;
        /* Reset negative margins */
        padding: 0;
        /* Reset specific paddings */
        z-index: 1;
    }

    .project-title-box {
        margin-bottom: 20px;
    }

    .project-desc-box {
        margin-top: 20px;
    }

    /* Adjust Raumkonzept grid overlap for tablets */
    .raum-grid-container {
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: auto;
        gap: 30px;
        padding: 0 15px;
    }

    .raum-img-1,
    .raum-img-2,
    .raum-img-3,
    .raum-img-4,
    .raum-text-block {
        /* grid-column: 1 / -1; */
        /* Take full width */
        /* grid-row: auto; */
        /* Flow naturally */
        margin: 0;
        /* Reset all negative margins that create overlap */
        padding: 0;
        /* Reset specific paddings */
    }

    .raumkonzept-bg {
        height: 15%;
        /* Reduce height of beige background on mobile */
    }

    .raum-text-block {
        margin-top: 20px;
        text-align: center;
        /* Center text on mobile */
    }

    .raum-link {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-bottom: 60px;
    }

    .contact-link {
        font-size: 0.7rem;
    }

    .navbar-brand .logo-img {
        height: 45px;
        width: 45px;
    }
}

/* Apartments Section */
.apartments-section {
    background: #FCF0DB;
    padding: clamp(4rem, 6.5vw, 6.5rem) 0;
}

.table>:not(caption)>*>* {
    background: none;
}

.apartments-title {
    font-family: var(--font-inria);
    font-size: 3.25rem;
    font-weight: 300;
    color: var(--heading-brown);
    line-height: 1.2;
    text-transform: capitalize;
}

.apartment-table {
    border-collapse: separate;
    border-spacing: 0;
    background-color: transparent;
    color: #8C7A5B;
    margin-bottom: 0;
}

.apartment-table thead th {
    border: none;
    font-weight: 500;
    text-transform: capitalize;
    padding: 20px 10px;
    color: #8B5E3B;
    border-bottom: 1px solid #E5DFD3;
    font-size: 1.2rem;
    letter-spacing: 1px;
    font-family: var(--font-inria);
}

.apartment-table tbody td {
    border: none;
    vertical-align: middle;
    padding: 12px 10px;
    border-bottom: 1px solid #E5DFD3;
    font-family: var(--font-inria);
    font-weight: 500;
    font-size: 1rem;
    color: #8B5E3B;
}

.apartment-table tbody tr:last-child td {
    border-bottom: none;
}

.btn-download {
    color: #FFF;
    font-family: var(--font-inria);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    text-transform: capitalize;
    border-radius: 3px;
    background: #8B5E3B;
    display: inline-flex;
    padding: 4px 6px;
    justify-content: center;
    align-items: center;
    gap: 3px;
    height: 20px;
    text-decoration: none;
}

.status-available {
    text-decoration: none;
}

.building-img {
    transition: transform 0.5s ease;
}

.building-img:hover {
    transform: scale(1.02);
}

@media (max-width: 991px) {
    .apartments-title {
        font-size: 2.22rem;
    }

    .building-renders {
        margin-top: 50px;
    }

    .apartments-section {
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .apartments-title {
        font-size: 1.8rem;
    }

    .apartment-table thead th,
    .apartment-table tbody td {
        padding: 15px 5px;
        font-size: 0.85rem;
    }
}

/* Materials Section */
.materials-section {
    padding-top: clamp(4rem, 6.5vw, 6.5rem);
    padding-bottom: clamp(4rem, 9vw, 9rem);
    overflow: hidden;
}

.materials-title {
    color: var(--heading-brown);
    font-size: clamp(2.3rem, 4.38vw, 4.38rem);
    /* text-transform: uppercase; */
    font-family: var(--font-inria);
}

.materials-description {
    color: var(--heading-brown-light);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 134%;
}

.collage-wrapper {
    position: relative;
    margin-top: 50px;
}

.materials-collage {
position: relative;
    width: 100%;
    min-height: 1471px;
}

.collage-item {
    position: absolute;
    /* transition: transform 0.5s ease; */
    /* Removed as it causes lag in parallax */
    overflow: hidden;
    /* Contain the scaled parallax image */
}
.collage-item img {
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
    object-fit: cover;
}

/* Specific Positions */
.building-f-1
 {
    width: 100%;
    top: 640px;
    left: 18%;
    z-index: 2;
    max-width: 458px;
}
.lifestyle-c-1
 {
    width: 55%;
    top: 0;
    left: 0;
    z-index: 1;
    right: 0;
    margin: auto;
    height: 651px;
}



.lifestyle-l-1 {
    width: 100%;
    bottom: 0;
    left: 20%;
    z-index: 3;
    top: 1160px;
    height: 725px;
    max-width: 661px;
}

.lifestyle-center {
    width: 100%;
    bottom: 0;
    left: 56.5%;
    z-index: 5;
    max-width: 482px;
    height: 490px;
    max-width: 417px;
    top: 1059px;
}

.building-f-2 {
    width: 100%;
    bottom: 0px;
    right: 31%;
    z-index: 3;
    top: 748px;
    height: 334px;
    max-width: 482px;
}

@media (max-width: 991px) {
    .materials-collage {
        min-height: 700px;
    }

    .building-f-1 {
        width: 35%;
        left: 5%;
    }

    .lifestyle-c-1 {
        width: 50%;
        left: 40%;
    }

    .lifestyle-l-1 {
        width: 30%;
        bottom: 50px;
    }

    .lifestyle-center {
        width: 35%;
        left: 30%;
    }

    .building-f-2 {
        width: 30%;
        right: 2%;
    }
}

@media (max-width: 768px) {
    .materials-section {
        padding: 80px 0;
    }

    .materials-collage {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto;
        gap: 30px;
        padding: 0 15px;
    }

    .collage-item {
        position: static;
        width: 100% !important;
    }
}

/* Material Configurator Section */
.configurator-section {
    background-color: var(--white);
}

.configurator-main-title {
    color: var(--heading-brown);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 300;
}

.config-sub-title {
    font-family: var(--font-inria);
    font-weight: 300;
    color: var(--heading-brown);
    font-size: clamp(1.2rem, 2vw, 2rem);
    text-transform: uppercase;
}

.config-group-title {
    font-family: var(--font-inria);
    font-weight: 300;
    color: var(--heading-brown);
    font-size: clamp(1.8rem, 3.15vw, 3.15rem);
    text-transform: uppercase;
}

.swatch-box {
    width: 164px;
    height: 116px;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.swatch-box:hover {
    transform: translateY(-5px);
}

.swatch-label {
    display: block;
    font-family: var(--font-montserrat);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--heading-brown-light);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 10px;
}

.config-preview-wrapper img {
width: 100%;
    border-radius: 2px;
    height: 783px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .swatch-box {
        width: 110px;
        height: 110px;
    }

    .config-controls {
        text-align: center;
    }

    .swatch-grid {
        justify-content: center;
    }
}

/* Pilatusweg Section */
.pilatusweg-section {
    background: #FFFCFC;
    overflow: hidden;
    box-shadow: 9px 5px 15px rgba(0, 0, 0, 0.15);
}

.pilatusweg-left-col,
.pilatusweg-right-col {
    min-height: 500px;
    /* Ensure columns have enough height to push content apart */
}

/* Adjusting padding for top and bottom content to spread them out */
.pilatusweg-content-top {
    margin-top: 10%;
}

/* .pilatusweg-content-bottom {
    margin-bottom: 5%;
} */

.pilatusweg-title {
    font-size: 22px;
    color: var(--heading-brown);
    font-family: var(--font-inria);
    font-weight: 300;
    line-height: 118%;
    text-transform: capitalize;
    margin-bottom: clamp(4rem, 5vw, 5rem);
}

.pilatusweg-link {
    color: var(--heading-brown);
    font-family: var(--font-montserrat);
    font-size: clamp(0.9rem, 1vw, 1rem);
    text-decoration: none;
    font-weight: 400;
    transition: opacity 0.3s ease;
}

.pilatusweg-link:hover {
    opacity: 0.7;
    color: var(--black);
}

.pilatusweg-link .arrow-icon {
font-size: 1.2rem;
    font-weight: 300;
    display: flex;
}

/* Iframe Wrapper to remove default spacing issues */
.pilatusweg-iframe-wrapper {
    line-height: 0;
    font-size: 0;
}

.pilatusweg-iframe-wrapper iframe {
    display: block;
    /* box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.05); */
    /* Soft shadow for depth */
}

.pilatusweg-number {
    font-family: var(--font-montserrat);
    font-weight: 600;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    color: var(--heading-brown);
    border-bottom: 2px solid var(--heading-brown);
    line-height: 1;
    padding-bottom: 2px;
}

.pilatusweg-right-col {
    height: 100%;
    background: #F1E6D2;
    box-shadow: 9px 5px 15px rgba(0, 0, 0, 0.15);
}

@media (max-width: 991px) {
    .pilatusweg-left-col {
        min-height: auto;
        padding: 3rem 1.5rem !important;
        /* Override p-5 */
        gap: 2rem;
    }

    .pilatusweg-right-col {
        min-height: auto;
        padding: 0 1.5rem 3rem 1.5rem !important;
    }

    .pilatusweg-content-top,
    .pilatusweg-content-bottom {
        margin: 0;
    }

    .pilatusweg-title {
        text-align: center;
    }

    .pilatusweg-content-bottom {
        text-align: center;
    }
}

/* Standort Section */
.standort-section {
    background-color: var(--white);
    padding-top: clamp(4rem, 6.5vw, 6.5rem);
}

.standort-title {
    font-family: var(--font-inria);
    font-weight: 300;
    color: var(--heading-brown);
    font-size: clamp(2.3rem, 4.38vw, 4.38rem);
    line-height: 118%;
    /* text-transform: uppercase; */
}

.standort-description {
    color: var(--heading-brown-light);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-style: normal;
    font-weight: 400;
    line-height: 134%;
}

.standort-visuals-container {
    max-width: 1200px;
    margin: 60px auto 0;
    padding-bottom: 0;
}

.standort-map-wrapper {
    width: 100%;
    margin-left: auto;
    position: relative;
    z-index: 1;
}

.standort-foreground-img {
    position: relative;
    width: 60%;
    left: 0;
    bottom: 0;
    z-index: 2;
    top: 0;
}

.standort-foreground-img img {
    width: 100%;
    border-radius: 2px;
    will-change: transform;
    /* transform: scale(1.1); */
    /* Ensure coverage during translation */
}

@media (max-width: 991px) {
    .standort-visuals-container {
        padding-bottom: 0;
    }

    .standort-map-wrapper {
        width: 100%;
        margin-bottom: 30px;
    }

    .standort-foreground-img {
        position: static;
        width: 100%;
    }
}

/* Brochure Section */
.brochure-section {
    background-color: #f3ebd7;
    /* Design match beige */
    overflow: hidden;
}

.brochure-title {
    font-family: var(--font-inria);
    font-weight: 300;
    color: #3e4a59;
    /* Darker blue/grey from design */
    font-size: clamp(2.5rem, 4.5vw, 4.5rem);
    line-height: 1.1;
}

.address-text {
    font-family: var(--font-montserrat);
    font-weight: 400;
    color: #5d4a44;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.brochure-iframe-wrapper {
    background: white;
    padding: 20px;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

.brochure-iframe-wrapper:hover {
    transform: translateY(-5px);
}

@media (max-width: 991px) {
    .brochure-title {
        text-align: center;
        margin-bottom: 30px !important;
    }

    .brochure-location {
        justify-content: center;
        margin-bottom: 40px;
    }
}

/* Footer Section */
.site-footer {
    background: #FCF0DB;
    font-family: var(--font-montserrat);
    margin-top: clamp(4rem, 6.5vw, 6.5rem);
}

.footer-title {
    color: var(--heading-brown);
    font-family: var(--font-inria);
    font-size: clamp(2.3rem, 3.2vw, 3.2rem);
    font-weight: 300;
    line-height: 118%;
}

/* Form Styles */
.form-label-custom {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 106%;
    text-transform: capitalize;
}

.form-control-custom {
    background: transparent;
    border: none;
    border-bottom: 1px solid #1A1A1A;
    border-radius: 0;
    padding: 0.5rem 0;
    font-size: 0.9rem;
    color: #1A1A1A;
    transition: border-color 0.3s ease;
    font-style: normal;
    font-family: var(--font-montserrat);
}

.form-control-custom:focus {
    background: transparent;
    box-shadow: none;
    border-color: #555;
    outline: none;
}

.form-control-custom::placeholder {
    color: #8C8C8C;
    font-style: italic;
    font-weight: 300;
}

/* Checkbox */
.custom-checkbox .form-check-input {
    background-color: transparent;
    border: 1px solid #1A1A1A;
    border-radius: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: none !important;
}

.custom-checkbox .form-check-input:checked {
    background-color: #1A1A1A;
    border-color: #1A1A1A;
    box-shadow: none !important;
}

.custom-checkbox .form-check-label {
    color: #000;
    text-align: left;
    font-family: var(--font-montserrat);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    cursor: pointer;
}

/* Submit Button */
.btn-submit-custom {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 60px;
    border: 1px solid #FFF;
    background: #FFF;
    height: 60px;
    padding: 0 35px 0 36px;
    transition: all 0.5s ease;
}

.btn-submit-custom:hover {
    background-color: var(--heading-brown);
    transform: scale(1.02);
    color: #FFF;
}

/* Info Box */
.footer-info-box {
    background: #C4A36A;
    backdrop-filter: blur(20px);
    height: 100%;
}

.info-title {
    font-family: var(--font-inria);
    color: var(--black);
    font-size: clamp(1.8rem, 1.9vw, 1.9rem);
    font-weight: 300;
}

.info-text {
    color: var(--black);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.6;
    font-weight: 400;
}

.info-link {
    color: var(--black);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.3s ease;
}

.info-link:hover {
    color: var(--black);
    opacity: 0.7;
}

/* Copyright Bottom Bar */
.footer-copyright {
    color: #715E32;
    text-align: center;
    font-family: var(--font-montserrat);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 0 20px;
    background: #F4E1BE;
}

.copyright-title {
color: #000;
    font-size: 26px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    text-transform: capitalize;
}

.footer-copyright p
 {
    color: #000;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    text-transform: capitalize;
}

.footer-copyright p a {
     color: #000;
    text-decoration: none;
}

@media (max-width: 991px) {
    .footer-info-box {
        margin-top: 2rem;
    }
}

.hide-on-desktop {
    display: none;
}

.footer-bottom p {
    color: #715E32;
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.van-den {
    padding: clamp(4rem, 6.5vw, 6.5rem) 0;
}

.van-den p {
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.footer-logo-img {
    max-width: 150px;
    height: auto;
}

.standort-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 852px;
    background: #FCF0DB;
    z-index: 0;
}
.materials-section .materials-description.mx-auto {
    margin-bottom: 70px !important;
}
.form-check.custom-checkbox br {
    display: none;
}
.form-check.custom-checkbox.mb-5 {
    margin-bottom: 2rem !important;
}
.btn-submit-custom {
	border-radius: 60px;
border: 1px solid #FFF !important;
background: #FFF  !important;
	height: 60px;
padding: 0 35px 0 36px;
	color: #000 !important;
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
text-transform: uppercase;
}
.pil-text {
    transform: rotate(-90deg);
    color: #715E32;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 126%;
    position: absolute;
    right: 0;
    top: 110px;
}
.minergie-section-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.minergie-section-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.minergie-logo-wrapper
 {
    margin-top: auto;
    margin-bottom: 1rem !important;
}
  
/* For swipper slider */
.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
}

.main-swiper {
    width: 100%;
    height: 500px; 
    margin-bottom: 20px;
}

.main-swiper .swiper-slide img {
      max-width: 100%;
    height: auto;
    object-fit: cover !important;
    border-radius: 8px;
    margin:0px auto; 
    max-height:900px;
}

/*.swiper-button-next,
.swiper-button-prev{
    display: none !important;
}*/


.swiper-free-mode>.swiper-wrapper {
    justify-content: center;
}


/* Thumbs Slider */
.thumbs-swiper {
    width: 100%;
    height: 120px; 
}

.thumbs-swiper .swiper-slide {
    opacity: 0.6;
    transition: opacity 0.3s;
    cursor: pointer;
}

.thumbs-swiper .swiper-slide-thumb-active {
    opacity: 1;
    border: 3px solid #007aff;
    border-radius: 6px;
}

.thumbs-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.main-swiper {
    height: 774px;
}
/* Navigation arrows (optional) */
.swiper-button-next,
.swiper-button-prev {
    color:#715e33 !important;
}

/*.hero-section .align-items-end {
    align-items: flex-end !important;
    align-items: center;
    justify-content: center;
    text-align: center;
}*/

#raumkonzept .parallax-wrapper {
    max-height: 400px;
}
.lifestyle-l-1 a
 {
    height: 100%;
    display: flex;
}
.lifestyle-l-1 {
    height: 415px;
}
    .main-swiper .swiper-slide img {
        width: 100%;
    }
.swiper-wrapper {
    max-width: 1300px;
    height: 82vh !important;
    margin-left: auto;
    margin-right: auto;
}

.main-swiper .swiper-slide img {
    object-fit: contain !important;
    object-position: 53% 50%;
    width: 100%;
    height: 100% !important;
}
.swiper-fade .swiper-slide
 {
    max-width: 1300px;
    height: 80vh !important;
    margin-left: auto;
    margin-right: auto;
    width: 100% !important;
}
.thumbs-swiper .swiper-wrapper {
	 height: 100% !important;
}
/* /// End For swipper slider */