/*
Theme Name: Serendipity Cube (Standalone)
Version: 2.1
*/

/*--------------------------------------------------------------
# Variables & Resets
--------------------------------------------------------------*/
:root {
    --bg-color: hsl(0, 0%, 0%);
    --fg-color: #e0e0e0;
    --bg-color-alpha: hsla(0, 0%, 0%, 0.8);
    --font-main: "Space Mono", monospace;
    --cube-size: 1000px;
    --cube-offset-x: 10;
    --cube-offset-y: 10;
}

body {
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-family: var(--font-main);
    margin: 0;
    overflow-x: hidden;
    transition: background-color 3s ease-in-out;
}

/* Ensure proper overflow handling when scaled */
html {
    overflow-x: hidden;
}

/* Zoom out the entire page when cube is too tall for viewport */
@media (max-height: 1200px) {
    body {
        zoom: 0.9;
    }
}

@media (max-height: 1000px) {
    body {
        zoom: 0.8;
    }
}

@media (max-height: 800px) {
    body {
        zoom: 0.7;
    }
}

@media (max-height: 600px) {
    body {
        zoom: 0.6;
    }
}
body.random-colors-enabled {
    background-image: var(--bg-gradient);
}

/* Ensure privacy modal appears above gradient backgrounds */
body.random-colors-enabled .privacy-modal {
    z-index: 10001;
}
body.image-background-active {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

a {
    color: var(--fg-color);
    text-decoration: underline;
    transition:
        color 0.4s ease-in-out,
        background-color 0.05s ease-in-out;
}
a:hover {
    background-color: #1bb88d;
}

/*--------------------------------------------------------------
# Background Containers
--------------------------------------------------------------*/
#background-image-container,
#shards-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
}

/* Fix background containers for zoom scaling */
/* Use a different approach - position them relative to the viewport */
@media (max-height: 1200px) {
    #background-image-container,
    #shards-container,
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.111); /* 1 / 0.9 */
        transform-origin: top left;
    }
}

@media (max-height: 1000px) {
    #background-image-container,
    #shards-container,
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.25); /* 1 / 0.8 */
        transform-origin: top left;
    }
}

@media (max-height: 800px) {
    #background-image-container,
    #shards-container,
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.429); /* 1 / 0.7 */
        transform-origin: top left;
    }
}

@media (max-height: 600px) {
    #background-image-container,
    #shards-container,
    #vhs-background-effect {
        width: 100vw;
        height: 100vh;
        transform: scale(1.667); /* 1 / 0.6 */
        transform-origin: top left;
    }
}
#background-image-container {
    background-size: cover;
    background-position: top left;
}

/*--------------------------------------------------------------
# Header & Navigation
--------------------------------------------------------------*/
.site-header {
    padding: 2rem;
    display: flex;
    align-items: center;
    z-index: 1000;
}
.site-header.logo-left {
    justify-content: space-between;
}
.site-header.logo-center {
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}
.site-header.logo-top {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
}
.site-header.logo-top .site-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.site-header.logo-top .site-description {
    margin-top: 0.25rem;
}
.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.custom-logo-link img {
    max-height: 80px;
    width: auto;
}
.site-title-tagline {
    display: flex;
    flex-direction: column;
}
.site-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}
.site-title a {
    text-decoration: none;
}
.site-description {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}
.main-navigation a {
    text-decoration: none;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* white-space: nowrap; */ /* I've removed this to allow menu items to wrap on small screens, preventing overflow. */
}

/* Responsive navigation for small screens */
@media (max-width: 768px) {
    .main-navigation ul {
        gap: 1rem; /* Reduce gap on small screens */
        justify-content: center; /* Center the navigation items */
    }
    .main-navigation a {
        font-size: 0.8rem; /* Slightly smaller font on mobile */
    }
}

@media (max-width: 480px) {
    .main-navigation ul {
        gap: 0.75rem; /* Even smaller gap on very small screens */
        flex-direction: column; /* Stack vertically on very small screens */
        align-items: center;
    }
    .main-navigation a {
        font-size: 0.75rem;
        padding: 0.25rem 0; /* Add some vertical padding for touch targets */
    }
}

/*--------------------------------------------------------------
# Layout & Content
--------------------------------------------------------------*/
.site-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Ensures padding is included in the element's total width and height */
}
.content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    align-items: flex-start;
    padding-top: 2rem;
    flex-grow: 1;
}
.primary-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

/*--------------------------------------------------------------
# 3D Cube & Scene
--------------------------------------------------------------*/
.scene-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translate(var(--cube-offset-x), var(--cube-offset-y));
    transition: transform 0.3s ease-out;
    max-width: 1500px;
    margin: 0 auto;
}
.scene {
    width: var(--cube-size);
    height: var(--cube-size);
    perspective: 10000px; /* Change "none" to a value like this */
}
.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition-property: transform;
}

.cube__face {
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    background-color: var(--cube-other-faces-bg, rgba(0, 0, 0, 0.8));
    /* I've moved padding and overflow to the new inner wrapper */
    box-sizing: border-box;
    overflow: hidden; /* This clips content at the face's edge */
    transform-style: flat;
    transition:
        background-color 0.8s ease,
        border-color 0.8s ease;
}

/* This new wrapper handles the scrolling and padding for the content */
.content-scroll-wrapper {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
    box-sizing: border-box;
}

/* I moved the scrollbar styling from .cube__face to our new wrapper */
.content-scroll-wrapper::-webkit-scrollbar {
    width: 8px;
}
.content-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.content-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--fg-color);
    border-radius: 4px;
    border: 2px solid transparent;
}

/* This rule makes the scrollbar thumb on the bottom face transparent,
   effectively hiding the scrollbar visually while allowing it to still
   occupy space. This preserves the content alignment with the front face. */
.cube__face--bottom .content-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.cube__face--front {
    transform: rotateY(0deg) translateZ(var(--cube-translate-z));
}
.cube__face--right {
    transform: rotateY(90deg) translateZ(var(--cube-translate-z));
}
.cube__face--back {
    transform: rotateY(180deg) translateZ(var(--cube-translate-z));
}
.cube__face--left {
    transform: rotateY(-90deg) translateZ(var(--cube-translate-z));
    background-color: var(--cube-front-face-bg, rgba(0, 0, 0, 0.6));
}
.cube__face--top {
    transform: rotateX(90deg) translateZ(var(--cube-translate-z));
}
.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(var(--cube-translate-z));
    background-color: var(--cube-front-face-bg, rgba(0, 0, 0, 0.6));
}

/* These styles only apply when the .content-wrapping-enabled class is on the body */
.content-wrapping-enabled .cube__face--bottom .content-scroll-wrapper > * {
    margin-top: calc(-1 * var(--cube-size));
}
.content-wrapping-enabled .content-scroll-wrapper > *::after {
    content: '';
    display: block;
    height: var(--cube-size);
}

.entry-header {
    margin-bottom: 1.5rem;
}
.entry-title {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
}
.entry-content p,
.entry-content ul,
.entry-content ol {
    line-height: 1.5;
}
/*--------------------------------------------------------------
# Services Page Grid
--------------------------------------------------------------*/
.services-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates two equal-width columns */
    gap: 1rem; /* Sets the space between the boxes, consistent with your theme */
    width: 100%;
}

.service-box {
    /* We use the same background as your sidebar widgets and cube faces for a consistent look */
    background-color: transparent;
    padding: 1rem; /* Matches the padding of your sidebar widgets */
    box-sizing: border-box;
}

.service-box h2 {
    margin-top: 0;
    font-size: 1.5rem; /* A slightly smaller heading for the boxes */
}

/*--------------------------------------------------------------
# Kruft Page Video Grid
--------------------------------------------------------------*/
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Changed to 3 columns */
    gap: 0.5rem;
    width: 100%; /* Changed to full width */
    clear: both; /* Prevents interference with any floated elements */
    max-width: 100%;
    overflow: hidden;
}

/*--------------------------------------------------------------
# Kruft Page Audio List
--------------------------------------------------------------*/
.audio-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

/*--------------------------------------------------------------
# Player Containers (Mixcloud & SoundCloud)
--------------------------------------------------------------*/
.mixcloud-player-container,
.soundcloud-player-container {
    width: 100%;
    margin-top: 1rem;
    overflow: hidden;
    min-height: 400px; /* Consistent minimum height */
}

.mixcloud-player-container iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

.soundcloud-player-container iframe {
    width: 100%;
    height: 600px;
    border: none;
    display: block;
}

/*--------------------------------------------------------------
# Lazy Loading Placeholders
--------------------------------------------------------------*/
.video-placeholder,
.audio-placeholder,
.soundcloud-placeholder {
    position: relative;
    background: linear-gradient(45deg, #333, #555);
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
}

.video-placeholder {
    aspect-ratio: 16/9;
    min-height: 150px;
    max-width: 100%;
    overflow: hidden;
}

.audio-placeholder {
    height: 60px;
}

.soundcloud-placeholder {
    height: 600px;
}

.video-placeholder:hover,
.audio-placeholder:hover,
.soundcloud-placeholder:hover {
    background: linear-gradient(45deg, #444, #666);
    border-color: #888;
    color: #fff;
}

.video-placeholder::before,
.audio-placeholder::before,
.soundcloud-placeholder::before {
    content: "Click to load";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.video-placeholder.loading::before,
.audio-placeholder.loading::before,
.soundcloud-placeholder.loading::before {
    content: "Loading...";
}

.video-placeholder.loaded,
.audio-placeholder.loaded,
.soundcloud-placeholder.loaded {
    background: transparent;
    border: none;
    cursor: default;
    padding: 0;
}

.video-placeholder.loaded::before,
.audio-placeholder.loaded::before,
.soundcloud-placeholder.loaded::before {
    display: none;
}

.video-placeholder.loaded iframe,
.audio-placeholder.loaded iframe,
.soundcloud-placeholder.loaded iframe {
    width: 100%;
    height: 100%;
    border: none;
    max-width: 100%;
    object-fit: contain;
}

/*--------------------------------------------------------------
# Embed Mode & Iframe
--------------------------------------------------------------*/
.embed-wrapper {
    display: none;
    width: 100%;
    flex-grow: 1;
    height: 85vh;
}
body.embed-mode .scene-wrapper {
    display: none;
}
body.embed-mode .embed-wrapper {
    display: block;
}
.embed-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: var(--bg-color-alpha);
}

/*--------------------------------------------------------------
# Media Player Fix & Sidebar/Footer
--------------------------------------------------------------*/
.sidebar {
    width: 300px;
    flex-shrink: 0;
    margin-top: 10rem;
}
.sidebar-widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: var(--cube-other-faces-bg);
    position: relative;
    box-shadow: -15px 15px 0 var(--cube-front-face-bg);
}

/* 3D Box Effect - Top triangle (fills gap between main element and drop shadow) */
.sidebar-widget::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 15px;
    height: 15px;
    background-color: var(--cube-front-face-bg);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: -1;
}

/* 3D Box Effect - Bottom triangle (fills gap between main element and drop shadow) */
.sidebar-widget::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: var(--cube-front-face-bg);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: -1;
}

/* Firefox 3D cube iframe interaction fix */
.cube__face iframe,
.cube__face .video-placeholder iframe,
.cube__face .audio-placeholder iframe,
.cube__face .soundcloud-placeholder iframe,
.cube__face .mixcloud-player-container iframe,
.cube__face .soundcloud-player-container iframe {
    transform-style: flat !important;
    transform: translateZ(0) !important;
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    isolation: isolate;
}

/* Ensure interactive elements work in 3D context */
.cube__face .video-placeholder,
.cube__face .audio-placeholder,
.cube__face .soundcloud-placeholder,
.cube__face .mixcloud-player-container,
.cube__face .soundcloud-player-container {
    transform-style: flat !important;
    transform: translateZ(0) !important;
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}

/* Additional Firefox-specific fix for embedded content */
@-moz-document url-prefix() {
    .cube__face iframe,
    .cube__face .video-placeholder iframe,
    .cube__face .audio-placeholder iframe,
    .cube__face .soundcloud-placeholder iframe,
    .cube__face .mixcloud-player-container iframe,
    .cube__face .soundcloud-player-container iframe {
        transform: none !important;
        will-change: auto !important;
    }
}

/* Firefox-specific layout override for kruft page */
body.firefox-layout .scene-wrapper {
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.firefox-layout .scene {
    width: 100% !important;
    height: auto !important;
    min-height: 500px !important;
    perspective: none !important;
    max-width: 100% !important;
}

body.firefox-layout .cube {
    transform-style: flat !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    position: static !important;
}

body.firefox-layout .cube__face {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 500px !important;
    display: block !important;
    box-shadow: -15px 15px 0 var(--cube-front-face-bg) !important;
    overflow: visible !important;
    background-color: var(--cube-other-faces-bg, rgba(0, 0, 0, 0.8)) !important;
}

/* 3D Box Effect for Firefox layout */
body.firefox-layout .cube__face::before {
    content: '';
    position: absolute;
    top: 0;
    left: -15px;
    width: 15px;
    height: 15px;
    background-color: var(--cube-front-face-bg);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    z-index: -1;
}

body.firefox-layout .cube__face::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: 0;
    width: 15px;
    height: 15px;
    background-color: var(--cube-front-face-bg);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: -1;
}

/* Hide other cube faces in Firefox layout */
body.firefox-layout .cube__face--back,
body.firefox-layout .cube__face--right,
body.firefox-layout .cube__face--left,
body.firefox-layout .cube__face--top,
body.firefox-layout .cube__face--bottom {
    display: none !important;
}

/* Ensure iframes work properly in Firefox layout */
body.firefox-layout .cube__face iframe,
body.firefox-layout .cube__face .video-placeholder iframe,
body.firefox-layout .cube__face .audio-placeholder iframe,
body.firefox-layout .cube__face .soundcloud-placeholder iframe,
body.firefox-layout .cube__face .mixcloud-player-container iframe,
body.firefox-layout .cube__face .soundcloud-player-container iframe {
    transform: none !important;
    transform-style: flat !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    isolation: none !important;
}
.sidebar-widget h4 {
    margin-top: 0;
}

.site-footer {
    padding: 2rem;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7;
}

.site-footer a {
    font-size: inherit;
}

.wp-audio-shortcode .mejs-container,
.wp-audio-shortcode .mejs-controls {
    background: transparent !important;
}
.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    background: rgba(255, 255, 255, 0.3) !important;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
    background: var(--fg-color) !important;
}
.mejs-controls button {
    color: var(--fg-color) !important;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
    background: var(--fg-color) !important;
}

/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/
@media (max-width: 1400px) {
    .content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .sidebar {
        width: 100%;
        max-width: var(--cube-size);
        margin-top: 4rem;
    }
    .video-grid {
        grid-template-columns: repeat(3, 1fr); /* Keep 3 columns on medium screens */
    }
}

/* Small screens - switch to flat responsive design */
@media (max-width: 599px) {
    .site-header {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .site-header.logo-left {
        flex-direction: column;
    }
    .main-navigation ul {
        justify-content: center;
    }
    .services-container {
        grid-template-columns: 1fr;
    }
    .services-tabs-container {
        flex-direction: column;
        gap: 1rem;
    }
    .services-tabs-nav {
        flex-direction: row;
        min-width: auto;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.25rem;
    }
    .services-tabs-nav button {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.75rem 1rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        min-width: auto;
    }
    .services-tabs-nav button.active {
        border-left: none;
        border-bottom-color: #1bb88d;
    }
    .services-tabs-nav button span {
        font-size: 0.8rem;
    }
    .video-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }
    .scene-wrapper {
        transform: none;
        width: 100%; /* Ensure scene wrapper takes full width */
    }
    .scene {
        width: 100%;
        /* max-width: 600px; */ /* I've removed this fixed max-width which was causing overflow on small screens. */
        height: auto;
        min-height: 500px;
        perspective: none;
    }
    .cube {
        transform-style: flat;
        transform: none !important;
        width: 100%;
        height: 100%;
        position: static;
    }
    .cube__face {
        position: relative;
        transform: none;
        width: 100%;
        height: 100%;
        min-height: 500px;
        display: block;
        box-shadow: -15px 15px 0 var(--cube-front-face-bg);
        overflow: visible !important;
    }

    /* 3D Box Effect - Top triangle (fills gap between main element and drop shadow) */
    .cube__face::before {
        content: '';
        position: absolute;
        top: 0;
        left: -15px;
        width: 15px;
        height: 15px;
        background-color: var(--cube-front-face-bg);
        clip-path: polygon(100% 0, 100% 100%, 0 100%);
        z-index: -1;
    }

    /* 3D Box Effect - Bottom triangle (fills gap between main element and drop shadow) */
    .cube__face::after {
        content: '';
        position: absolute;
        bottom: -15px;
        right: 0;
        width: 15px;
        height: 15px;
        background-color: var(--cube-front-face-bg);
        clip-path: polygon(0 0, 100% 0, 0 100%);
        z-index: -1;
    }
    .cube__face--back,
    .cube__face--right,
    .cube__face--left,
    .cube__face--top,
    .cube__face--bottom {
        display: none;
    }
}

/* Medium tablets - scale cube moderately */
@media (max-width: 768px) and (min-width: 600px) {
    .site-header {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .site-header.logo-left {
        flex-direction: column;
    }
    .main-navigation ul {
        justify-content: center;
    }
    .services-container {
        grid-template-columns: 1fr;
    }
    .services-tabs-container {
        flex-direction: column;
        gap: 1rem;
    }
    .services-tabs-nav {
        flex-direction: row;
        min-width: auto;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.25rem;
    }
    .services-tabs-nav button {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.75rem 1rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        min-width: auto;
    }
    .services-tabs-nav button.active {
        border-left: none;
        border-bottom-color: #1bb88d;
    }
    .services-tabs-nav button span {
        font-size: 0.8rem;
    }
    .video-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }
    
    /* Scale down the cube moderately for medium tablets */
    .scene-wrapper {
        transform: scale(0.6) translate(var(--cube-offset-x), var(--cube-offset-y));
        transform-origin: center;
    }
    .scene {
        width: var(--cube-size);
        height: var(--cube-size);
        perspective: 10000px;
    }
    .cube {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
    }
    .cube__face {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        background-color: var(--cube-other-faces-bg, rgba(0, 0, 0, 0.8));
        box-sizing: border-box;
        overflow: hidden;
        transform-style: flat;
        transition:
            background-color 0.8s ease,
            border-color 0.8s ease;
    }
    .cube__face--left {
        background-color: var(--cube-front-face-bg, rgba(0, 0, 0, 0.6));
    }
    .cube__face--bottom {
        background-color: var(--cube-front-face-bg, rgba(0, 0, 0, 0.6));
    }
}


/* Medium tablets and smaller laptops - scale cube but keep 3D effect */
@media (max-width: 1024px) and (min-width: 769px) {
    .site-header {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    .site-header.logo-left {
        flex-direction: column;
    }
    .main-navigation ul {
        justify-content: center;
    }
    .services-container {
        grid-template-columns: 1fr;
    }
    .services-tabs-container {
        flex-direction: column;
        gap: 1rem;
    }
    .services-tabs-nav {
        flex-direction: row;
        min-width: auto;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.25rem;
    }
    .services-tabs-nav button {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.75rem 1rem;
        border-left: none;
        border-bottom: 3px solid transparent;
        min-width: auto;
    }
    .services-tabs-nav button.active {
        border-left: none;
        border-bottom-color: #1bb88d;
    }
    .services-tabs-nav button span {
        font-size: 0.8rem;
    }
    .video-grid {
        width: 100%;
        grid-template-columns: 1fr;
    }
    
    /* Scale down the cube for medium screens but keep 3D effect */
    .scene-wrapper {
        transform: scale(0.75) translate(var(--cube-offset-x), var(--cube-offset-y));
        transform-origin: center;
    }
    .scene {
        width: var(--cube-size);
        height: var(--cube-size);
        perspective: 10000px;
    }
    .cube {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
    }
    .cube__face {
        position: absolute;
        width: var(--cube-size);
        height: var(--cube-size);
        background-color: var(--cube-other-faces-bg, rgba(0, 0, 0, 0.8));
        box-sizing: border-box;
        overflow: hidden;
        transform-style: flat;
        transition:
            background-color 0.8s ease,
            border-color 0.8s ease;
    }
    .cube__face--left {
        background-color: var(--cube-front-face-bg, rgba(0, 0, 0, 0.6));
    }
    .cube__face--bottom {
        background-color: var(--cube-front-face-bg, rgba(0, 0, 0, 0.6));
    }
}

/*--------------------------------------------------------------
# Icons
--------------------------------------------------------------*/
.fa-large {
    font-size: 4rem; /* You can adjust this value to your liking */
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.tab {
    text-indent: 40px;
}
.text-justify {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.1;
}
.float-left {
    float: left;
    margin-top: 0.5rem;
    margin-right: 1.5rem; /* Adds some space to the right of the image */
    margin-bottom: 0.5rem; /* Adds some space below the image */
}

.float-right {
    float: right;
    margin-top: 0.5rem;
    margin-left: 1.5rem; /* Adds some space to the left of the image */
    margin-bottom: 0.5rem; /* Adds some space below the image */
}

/* Add a clearfix utility to contain floats */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/*--------------------------------------------------------------
# Tabbed Interface
--------------------------------------------------------------*/
.tabs-container {
    margin-top: 1.5rem;
}
.tabs-nav {
    display: flex;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #555;
}
.tabs-nav button {
    /* Reset default button styles */
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
    
    /* Apply tab styles */
    padding: 0.75rem 1.5rem;
    display: block;
    opacity: 0.7;
    background-color: transparent;
    border-bottom: 3px solid transparent;
    transform: translateY(1px);
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.tabs-nav button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}
.tabs-nav button.active {
    opacity: 1;
    border-bottom-color: #1bb88d;
}
.tab-panel {
    display: none;
    padding: 1.5rem 0;
}
.tab-panel.active {
    display: block;
}

/*--------------------------------------------------------------
# Services Tabs Interface
--------------------------------------------------------------*/
.services-tabs-container {
    margin-top: 1.5rem;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.services-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
    flex-shrink: 0;
}

.services-tabs-nav button {
    /* Reset default button styles */
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
    
    /* Apply service button styles */
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.7;
    background-color: transparent;
    border-left: 3px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    width: 100%;
    position: relative;
    z-index: 1;
}

.services-tabs-nav button * {
    pointer-events: none;
}

.services-tabs-nav button i {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.services-tabs-nav button span {
    font-size: 0.9rem;
    line-height: 1.2;
}

.services-tabs-nav button:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.05);
}

.services-tabs-nav button.active {
    opacity: 1;
    border-left-color: #1bb88d;
    background-color: rgba(255, 255, 255, 0.05);
}

.services-tabs-content {
    flex-grow: 1;
    min-width: 0; /* Allows content to shrink */
}

.service-tab-panel {
    display: none;
    padding: 0;
}

.service-tab-panel.active {
    display: block;
}

.service-tab-panel h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    color: var(--fg-color);
}

.service-tab-panel p {
    line-height: 1.6;
    margin-bottom: 0;
}

/* Additional responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .services-tabs-nav button {
        padding: 0.5rem 0.75rem;
    }
    
    .services-tabs-nav button span {
        font-size: 0.75rem;
    }
    
    .services-tabs-nav button i {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .services-tabs-nav button {
        padding: 0.4rem 0.5rem;
        gap: 0.5rem;
    }
    
    .services-tabs-nav button span {
        font-size: 0.7rem;
    }
    
    .services-tabs-nav button i {
        font-size: 0.9rem;
        width: 16px;
    }
}

/*--------------------------------------------------------------
# Privacy Modal Styles
--------------------------------------------------------------*/
.privacy-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.privacy-modal.show {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.privacy-modal-content {
    background-color: rgba(0, 0, 0, 0.9);
    border: 2px solid #ffffff;
    border-radius: 8px;
    max-width: 600px;
    max-height: 80vh;
    width: 90%;
    margin: 20px;
    transform: translateY(-50px);
    transition: transform 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.privacy-modal.show .privacy-modal-content {
    transform: translateY(0);
}

.privacy-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ffffff;
}

.privacy-modal-header h2 {
    margin: 0;
    color: #ffffff;
}

.privacy-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.privacy-close:hover {
    background-color: #ffffff;
    color: #000000;
    border-radius: 50%;
}

.privacy-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
    color: #ffffff;
}

.privacy-modal-body h3 {
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 10px;
}

.privacy-modal-body ul {
    margin: 10px 0;
    padding-left: 20px;
}

.privacy-modal-body a {
    color: #ffffff;
    text-decoration: underline;
}

.privacy-modal-body a:hover {
    opacity: 0.7;
}

/* Mobile responsiveness for privacy modal */
@media (max-width: 768px) {
    .privacy-modal-content {
        width: 95%;
        margin: 10px;
        max-height: 90vh;
    }
    
    .privacy-modal-header,
    .privacy-modal-body {
        padding: 15px;
    }
}