@font-face {
    font-family: 'Kredit';
    src: url('./public/Kredit.otf') format('opentype');
    font-weight: regular;
    font-style: regular;
}

@font-face {
    font-family: 'Awesome Script';
    src: url('./public/Awesome-Script.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


* { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; list-style: none; }

html {
    background-color: transparent;
    height: 100%;
}
body {
    font-family: 'IBM Plex Mono', monospace;
    background-color: #f0f0f0;
    min-height: 100%;
}

/* THREE.JS CANVAS STYLING */
#threejs-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Navigation */
nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 3% 5%;
    padding-top: 30px;
    z-index: 100;
}
.logo-dropdown { position: relative; }
.logo-icon {
    width: 50px;
    height: 50px;
    transform-origin: center center;
    cursor: pointer;
    transform: rotateY(0deg);
}

@keyframes spin-logo-y-slow-stop {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(720deg); }
    100% { transform: rotateY(1080deg); }
}

.logo-spin-active {
    animation-name: spin-logo-y-slow-stop;
    animation-duration: 3s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-fill-mode: forwards;
}


.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 101;
    border-radius: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
}
.dropdown-content.show {
    display: block;
}
.dropdown-content a { color: black; padding: 10px 16px; text-decoration: none; display: block; font-family: 'IBM Plex Mono', monospace; }
.dropdown-content a:hover { background-color: #f1f1f1; }

/* Swiper Slider */
.swiper-container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: transparent;
    perspective: 1200px;
    transform-style: preserve-3d;
}
.swiper-parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}
.swiper-wrapper { position: relative; z-index: 10; }
.swiper-slide {
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Slide Background Styles */
.swiper-slide.slide-bg-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #000000;
    position: relative;
}

.swiper-slide.slide-bg-image:not([data-slide-id="1"]):not([data-slide-id="2"])::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}


.swiper-slide[data-bg-image="public/BG-Tech-Bakery-Cake-desserts.png"] { background-image: url('./public/BG-Tech-Bakery-Cake-desserts.png'); }
.swiper-slide[data-bg-image="public/BG-Futuristic Kitchen Chef.png"] { background-image: url('./public/BG-Futuristic Kitchen Chef.png'); }


.swiper-slide.slide-bg-gradient-1 {
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0.7) 0%, hsla(30, 20%, 80%, 0.6) 100%);
    color: #333;
}
.swiper-slide.slide-bg-gradient-1 h1, .swiper-slide.slide-bg-gradient-1 h2, .swiper-slide.slide-bg-gradient-1 p { color: #333; }


/* Content Layout Styles */
.content {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: transparent;
    padding: 5%;
    z-index: 4;
    box-sizing: border-box;
}

.content.text-content-top-left {
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 8%;
    padding-right: 8%;
    width: auto;
}

/* Text Block Shape Common Styles */
.text-block-shape-03, .text-block-shape-04,
.content-block-with-shape-05, .content-block-with-shape-06 {
    position: relative;
    display: inline-block;
    z-index: 5;
}

.text-block-shape-03::before,
.text-block-shape-04::before,
.swiper-slide[data-slide-id="3"] .content-block-with-shape-05::before,
.swiper-slide[data-slide-id="4"] .content-block-with-shape-06::before {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1;
}


/* Specifics for Slide 1 (Desktop) */
.swiper-slide[data-slide-id="1"] .content.text-content-top-left { padding-top: 80px; padding-left: calc(8% - 20px); }
.text-block-shape-03 { padding: 70px 80px 80px 80px; }
.text-block-shape-03::before { background-image: url('./public/web-element-shape-03.png'); background-size: contain; background-position: center center; width: 650px; height: 380px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.swiper-slide[data-slide-id="1"] .text-block-shape-03 .title-container { max-width: none; }
.swiper-slide[data-slide-id="1"] .text-block-shape-03 .information { max-width: 500px; text-align: left; position: relative; }
.swiper-slide[data-slide-id="1"] .slide-title-h1 { font-size: 4.8rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); }
.swiper-slide[data-slide-id="1"] .information h2 { font-size: 1.3rem; }
.swiper-slide[data-slide-id="1"] .information p { font-size: 1.1rem; }


/* Specifics for Slide 2 (Desktop) */
.swiper-slide[data-slide-id="2"] .content.text-content-top-left { padding-top: 90px; padding-left: 10%; }
.text-block-shape-04 { padding: 60px 50px; }
.text-block-shape-04::before { background-image: url('./public/web-element-shape-04.png'); background-size: 100% 100%; background-position: center center; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 60px); height: calc(100% + 40px); }
.swiper-slide[data-slide-id="2"] .text-block-shape-04 .title-container,
.swiper-slide[data-slide-id="2"] .text-block-shape-04 .information { max-width: 480px; text-align: left; position: relative; }
.swiper-slide[data-slide-id="2"] .slide-title-h1 { font-size: 4.4rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35); }
.swiper-slide[data-slide-id="2"] .information h2 { font-size: 1.2rem; }
.swiper-slide[data-slide-id="2"] .information p { font-size: 1.0rem; }


.text-block-shape-03 .title-container, .text-block-shape-04 .title-container { margin-bottom: 16px; }


.swiper-slide[data-slide-id="1"] h1, .swiper-slide[data-slide-id="1"] h2, .swiper-slide[data-slide-id="1"] p,
.swiper-slide[data-slide-id="2"] h1, .swiper-slide[data-slide-id="2"] h2, .swiper-slide[data-slide-id="2"] p {
    color: #000000;
    text-shadow: 0.5px 0.5px 1px rgba(100, 100, 100, 0.3);
}

/* === SLIDE 3 & 4 COMMON WRAPPER STYLES === */
.swiper-slide[data-slide-id="3"],
.swiper-slide[data-slide-id="4"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.swiper-slide[data-slide-id="3"] .content-block-with-shape-05,
.swiper-slide[data-slide-id="4"] .content-block-with-shape-06 {
    width: 90%; /* Or adjust as needed, e.g., 95% for more room */
    max-width: 1300px; /* Increase max-width for more space */
    margin: 0 auto;
    /* padding: 30px 40px; Default, will be overridden for slide 3 */
    position: relative;
    display: block;
    z-index: auto;
    background-color: transparent !important;
}

.content-block-with-shape-05 > .content.content-split,
.content-block-with-shape-06 > .content.content-split {
    padding: 0;
    width: 100%;
    min-height: auto;
    position: relative;
    z-index: 1;
}

/* === SLIDE 3 SPECIFIC STYLING === */
.swiper-slide[data-slide-id="3"] .content-block-with-shape-05 {
    padding: 30px 20px 30px 60px; /* Top, Right (less), Bottom, Left (more) -> shifts content left */
}
.swiper-slide[data-slide-id="3"] .content-block-with-shape-05::before {
    background-image: url('./public/web-element-shape-05.png');
    background-size: contain;
    background-position: top left;
    width: calc(75% + 100px);
    height: calc(75% + 30px);
    left: 0px; /* Align with text content area start */
    top: 40px;
}
.swiper-slide[data-slide-id="3"] #title-slide-3 { font-size: 4.5rem; white-space: nowrap; line-height: 1.1; }
.swiper-slide[data-slide-id="3"] .text-content-left .information { max-width: 100%; }
.swiper-slide[data-slide-id="3"] .content.content-split { justify-content: space-between; }
.swiper-slide[data-slide-id="3"] .content.content-split .text-content-left { flex-basis: 50%; } /* Adjusted */
.swiper-slide[data-slide-id="3"] .content.content-split .placeholder-container.demo-container {
    flex-basis: 45%; /* Adjusted to reflect ~25px increase on a ~500px wide element */
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}

/* === SLIDE 4 SPECIFIC STYLING === */
.swiper-slide[data-slide-id="4"] .content-block-with-shape-06 {
    padding: 30px 40px; /* Default padding for now */
}
.swiper-slide[data-slide-id="4"] .content-block-with-shape-06::before {
    background-image: url('./public/web-element-shape-06.png');
    background-size: contain;
    background-position: top left;
    width: calc(93.75% + 125px); /* Increased size */
    height: calc(93.75% + 38px); /* Increased size */
    left: 0;
    top: 40px;
}
.swiper-slide[data-slide-id="4"] .content.content-split { justify-content: space-between; }
.swiper-slide[data-slide-id="4"] .content.content-split .text-content-left { flex-basis: calc(50% - 50px); }
.swiper-slide[data-slide-id="4"] .content.content-split .placeholder-container.booking-container { flex-basis: calc(50% - 50px); }


/* General Content Split (applies to slides 3 & 4 unless overridden) */
.content.content-split {
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* Removed padding and padding-top, should be handled by wrappers */
}
.content-block-with-shape-05 > .content.content-split,
.content-block-with-shape-06 > .content.content-split {
    padding: 0;
    padding-top: 0;
}


.content.content-split .text-content-left {
    padding: 0 10px; /* Keep internal padding */
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.content.content-split .text-content-left .title-container,
.content.content-split .text-content-left .information {
    position: relative;
    top: auto;
    left: auto;
    max-width: 100%;
    opacity: 1;
    transform: none;
    transition: none;
}
.content.content-split .text-content-left .title-container { margin-bottom: 20px; padding: 0 10px; }

.slide-bg-gradient-1 .information { background-color: rgba(255, 255, 255, 0.6); padding: 15px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }


.content.content-split .placeholder-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh;
    max-height: 600px;
    min-height: 400px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}


.slide-title-h1 { font-family: 'Awesome Script', cursive; font-size: 5.5rem; font-weight: normal; color: inherit; margin: 0; white-space: normal; display: block; line-height: 1.1; visibility: visible; }


.information { z-index: 5; }
.information h2 { font-size: 1.5rem; margin-bottom: 15px; color: inherit; font-weight: 500; }
.information p { font-size: 1.25rem; line-height: 1.7; color: inherit; }

.slide-bg-gradient-1 .slide-title-h1 { text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); }
.slide-bg-gradient-1 .information h2,
.slide-bg-gradient-1 .information p { text-shadow: none !important; }
.slide-bg-gradient-1 .content h2:not(.information h2),
.slide-bg-gradient-1 .content p:not(.information p) { text-shadow: none; }


.calendly-inline-widget { height: 100% !important; width: 100% !important; border-radius: inherit; }


/* Contact Form Modal */
.modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border-radius: 5px; max-width: 500px; width: 80%; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: black; }
.modal-content h2 { text-align: center; margin-bottom: 15px; padding-bottom: 10px; }
.modal-description { font-size: 0.95rem; color: #555; margin-top: 5px; margin-bottom: 20px; text-align: center; line-height: 1.4; padding-left: 10px; padding-right: 10px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: 'IBM Plex Mono', monospace; }
.form-group textarea { height: 100px; }
button[type="submit"] { background-color: #333; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-family: 'IBM Plex Mono', monospace; }
button[type="submit"]:hover { background-color: #555; }

/* PAGINATION STYLES - Static & Horizontal */
.pagination-container { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20; }
.swiper-pagination { display: flex !important; justify-content: center !important; align-items: center !important; width: auto !important; position: relative !important; }
.swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.5) !important; opacity: 0.7 !important; margin: 0 6px !important; border-radius: 50%; transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; display: inline-block; flex-shrink: 0; }
.swiper-pagination .swiper-pagination-bullet-active { background-color: #ffffff !important; opacity: 1 !important; transform: scale(1.3); }

/* Swiper Navigation Arrows */
.swiper-button-prev, .swiper-button-next { display: none; position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 20; cursor: pointer; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.7; color: transparent !important; }
.swiper-button-prev { left: 10px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }
.swiper-button-next { right: 10px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); }
.swiper-slide[data-slide-id="1"] .swiper-button-prev, .swiper-slide[data-slide-id="2"] .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
.swiper-slide[data-slide-id="1"] .swiper-button-next, .swiper-slide[data-slide-id="2"] .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }


/* Media Queries */
@media (max-width: 800px) {
    .slide-title-h1 { font-size: 2.5rem; line-height: 1.2; }
    .information h2 { font-size: 1.0rem; }
    .information p { font-size: 0.85rem; line-height: 1.4; }

    .swiper-slide[data-slide-id="1"] .content.text-content-top-left,
    .swiper-slide[data-slide-id="2"] .content.text-content-top-left { padding-top: 80px; align-items: center; padding-left: 5%; padding-right: 5%; }
    .swiper-slide[data-slide-id="1"] .text-block-shape-03,
    .swiper-slide[data-slide-id="2"] .text-block-shape-04 { padding: 20px; text-align: center; }
    .swiper-slide[data-slide-id="1"] .text-block-shape-03::before { width: 300px; height: 180px; }
    .swiper-slide[data-slide-id="2"] .text-block-shape-04::before { width: calc(100% + 30px); height: calc(100% + 20px); }
    .swiper-slide[data-slide-id="1"] .slide-title-h1, .swiper-slide[data-slide-id="2"] .slide-title-h1 { font-size: 2.8rem; }
    .swiper-slide[data-slide-id="1"] .information h2, .swiper-slide[data-slide-id="2"] .information h2 { font-size: 1rem; }
    .swiper-slide[data-slide-id="1"] .information p, .swiper-slide[data-slide-id="2"] .information p { font-size: 0.8rem; }
    .swiper-slide[data-slide-id="1"] .text-block-shape-03 .title-container, .swiper-slide[data-slide-id="1"] .text-block-shape-03 .information,
    .swiper-slide[data-slide-id="2"] .text-block-shape-04 .title-container, .swiper-slide[data-slide-id="2"] .text-block-shape-04 .information { text-align: center; max-width: 100%; }
    .slide-bg-gradient-1 .information { padding: 10px 15px; border-radius: 10px; }
    .swiper-slide[data-slide-id="1"].slide-bg-image::before, .swiper-slide[data-slide-id="2"].slide-bg-image::before { background: none; }

    .swiper-slide[data-slide-id="3"] .content-block-with-shape-05,
    .swiper-slide[data-slide-id="4"] .content-block-with-shape-06 { width: 100%; padding: 10px; }

    .swiper-slide[data-slide-id="3"] .content-block-with-shape-05::before,
    .swiper-slide[data-slide-id="4"] .content-block-with-shape-06::before {
        background-size: contain; background-repeat: no-repeat; background-position: top left;
        width: calc(85% + 20px); height: calc(85% + 15px);
        left: 0; top: 40px;
    }
    /* Increase size of shape for slide 4 on mobile to match desktop % increase */
    .swiper-slide[data-slide-id="4"] .content-block-with-shape-06::before {
        width: calc(93.75% + 20px); /* Using the increased percentage */
        height: calc(93.75% + 15px);
    }


    .swiper-slide[data-slide-id="3"] #title-slide-3 { font-size: 2.5rem; white-space: normal; }
    .swiper-slide[data-slide-id="1"] .slide-title-h1, .swiper-slide[data-slide-id="2"] .slide-title-h1,
    .swiper-slide[data-slide-id="1"] h2, .swiper-slide[data-slide-id="1"] p,
    .swiper-slide[data-slide-id="2"] h2, .swiper-slide[data-slide-id="2"] p { text-shadow: 1px 1px 2px rgba(50, 50, 50, 0.25); }
    .slide-bg-gradient-1 .slide-title-h1 { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); }

    .content.content-split { flex-direction: column; justify-content: flex-start; padding: 15% 5% 5% 5%; min-height: 0; }
    .content-block-with-shape-05 > .content.content-split,
    .content-block-with-shape-06 > .content.content-split { padding-top: 0; }

    .swiper-slide[data-slide-id="3"] .content.content-split .text-content-left .title-container,
    .swiper-slide[data-slide-id="4"] .content.content-split .text-content-left .title-container { padding-left: 8px; padding-right: 8px; }

    .content.content-split .text-content-left { flex-basis: auto; width: 100%; max-width: 100%; text-align: center; margin-bottom: 20px; order: 1; padding: 0; align-items: center; }
    .content.content-split .text-content-left .title-container,
    .content.content-split .text-content-left .information { padding: 0; text-align: center; max-width: 95%; }

    .content.content-split .placeholder-container#demoPlaceholderContainer,
    .content.content-split .placeholder-container.booking-container {
        flex-basis: auto; width: 100%; max-width: 100%;
        min-height: 350px; max-height: none; order: 2;
        border-radius: 10px; margin-top: 15px;
        visibility: visible !important; opacity: 1 !important; display: flex !important;
    }
    .content.content-split .placeholder-container#demoPlaceholderContainer { height: 450px; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.12); }
    .content.content-split .placeholder-container.booking-container { height: 500px; overflow: hidden; }

    .content.content-split .placeholder-container#demoPlaceholderContainer iframe { width: 100%; height: 100%; visibility: visible !important; opacity: 1 !important; display: block !important; }

    .swiper-pagination { display: none !important; }
    .swiper-button-prev, .swiper-button-next { display: block; opacity: 0.7; z-index: 30; }
    .pagination-container { bottom: 20px; }
}