/* General Body and Typography */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #1a1a2e; /* Dark base for vaporwave */
    color: #e0e0e0; /* Light grey for general text */
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll from glitch effects */
}

/* Vaporwave Theme Colors & Accents */
:root {
    --primary-color: #00FFFF; /* Electric Blue */
    --secondary-color: #FF69B4; /* Neon Pink */
    --accent-color-1: #8A2BE2; /* Blue Violet */
    --accent-color-2: #FFD700; /* Gold for highlights */
    --dark-bg: #1a1a2e;
    --light-bg: #2a2a4a;
    --text-light: #e0e0e0;
    --text-dark: #1a1a2e;
    --glitch-color-1: #FF00FF; /* Magenta */
    --glitch-color-2: #00FF00; /* Green */
}

#projectType option{
    color: #1a1a2e;
}

.button.is-large{
    white-space: normal;
    height: 100%;
}

strong{
    color: var(--text-light);
}

/* Base Bulma Overrides */
.title, .subtitle {
    font-family: 'Poppins', sans-serif;
    color: var(--text-light);
}
.title.vaporwave-title {
    color: var(--primary-color);
    text-shadow: 2px 2px var(--secondary-color), 4px 4px var(--accent-color-1);
    font-weight: 700;
    letter-spacing: 2px;
}
.subtitle.vaporwave-subtitle {
    color: var(--text-light);
    text-shadow: 1px 1px rgba(0,0,0,0.3);
}
.has-text-white-ter {
    color: var(--text-light) !important;
}
.has-text-primary {
    color: var(--primary-color) !important;
}
a {
    color: var(--primary-color);
}
a:hover {
    color: var(--secondary-color);
}

/* Vaporwave Gradients & Backgrounds */
.vaporwave-section {
    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--light-bg) 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 1.5rem; /* Consistent padding for main sections */
}
.vaporwave-section-dark {
    background: linear-gradient(135deg, var(--light-bg) 0%, var(--dark-bg) 100%);
    position: relative;
    overflow: hidden;
    padding: 6rem 1.5rem; /* Consistent padding for main sections */
}

/* Glitch Effect Mixin (simplified for CSS) */
.glitch-text {
    position: relative;
    display: inline-block; /* Required for glitch effect on text */
    animation: glitch-effect 1s infinite alternate;
}
.glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 var(--glitch-color-1);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim-1 2s infinite alternate-reverse;
}
.glitch-text::after {
    left: -2px;
    text-shadow: -2px 0 var(--glitch-color-2);
    clip: rect(85px, 450px, 100px, 0);
    animation: glitch-anim-2 3s infinite alternate-reverse;
}

@keyframes glitch-effect {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

@keyframes glitch-anim-1 {
    0% { clip: rect(35px, 9999px, 12px, 0); } /* Using 9999px for full width */
    10% { clip: rect(20px, 9999px, 80px, 0); }
    20% { clip: rect(10px, 9999px, 40px, 0); }
    30% { clip: rect(60px, 9999px, 90px, 0); }
    40% { clip: rect(15px, 9999px, 70px, 0); }
    50% { clip: rect(80px, 9999px, 25px, 0); }
    60% { clip: rect(50px, 9999px, 10px, 0); }
    70% { clip: rect(5px, 9999px, 95px, 0); }
    80% { clip: rect(70px, 9999px, 30px, 0); }
    90% { clip: rect(25px, 9999px, 65px, 0); }
    100% { clip: rect(40px, 9999px, 55px, 0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(25px, 9999px, 75px, 0); }
    15% { clip: rect(55px, 9999px, 15px, 0); }
    30% { clip: rect(5px, 9999px, 85px, 0); }
    45% { clip: rect(70px, 9999px, 20px, 0); }
    60% { clip: rect(10px, 9999px, 60px, 0); }
    75% { clip: rect(80px, 9999px, 30px, 0); }
    90% { clip: rect(40px, 9999px, 90px, 0); }
    100% { clip: rect(50px, 9999px, 45px, 0); }
}

/* Navbar */
.navbar {
    background-color: rgba(26, 26, 46, 0.8); /* Semi-transparent dark background */
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--primary-color);
    box-shadow: 0 2px 10px rgba(0, 255, 255, 0.2);
}
.navbar-brand .navbar-item {
    padding: 0.5rem 0.75rem;
}
.navbar-logo {
    max-height: 2.5rem;
    width: auto;
    filter: drop-shadow(0 0 5px var(--primary-color));
}
.navbar-title {
    color: var(--text-light);
    text-shadow: 1px 1px var(--secondary-color);
}
.navbar-item {
    color: var(--text-light);
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.navbar-item:hover {
    background-color: transparent;
    color: var(--primary-color);
    text-shadow: 0 0 8px var(--primary-color);
}
.navbar-burger {
    color: var(--primary-color);
}
.navbar-burger:hover {
    background-color: transparent;
    color: var(--secondary-color);
}
.navbar-menu.is-active {
    background-color: var(--dark-bg);
}

/* Hero Section */
.hero-vaporwave {
    background-image: url('photos/pics/vaporwave-grid-pattern_6.jpg'); /* A subtle grid or retro pattern */
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem; /* Adjust for fixed navbar */
}
.hero-vaporwave::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.2), rgba(255, 105, 180, 0.2));
    z-index: 0;
}
.hero-vaporwave .hero-body {
    position: relative;
    z-index: 1;
}
.hero-image {
    max-width: 90%;
    height: auto;
    border: 3px solid var(--primary-color);
    box-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--secondary-color);
    filter: saturate(1.2) hue-rotate(10deg);
    transition: all 0.5s ease-in-out;
}
.hero-image:hover {
    transform: scale(1.03);
    box-shadow: 0 0 30px var(--primary-color), 0 0 60px var(--secondary-color);
}
.feature-block {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    transition: all 0.3s ease-in-out;
}
.feature-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px var(--primary-color), 0 0 25px var(--secondary-color);
}

/* Buttons */
.vaporwave-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--dark-bg);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 15px var(--primary-color);
    transition: all 0.3s ease-in-out;
}
.vaporwave-button:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--dark-bg);
    box-shadow: 0 0 20px var(--secondary-color);
    transform: translateY(-2px);
}
.vaporwave-button-outline {
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease-in-out;
}
.vaporwave-button-outline:hover {
    background-color: var(--primary-color);
    color: var(--dark-bg);
    box-shadow: 0 0 15px var(--primary-color);
    transform: translateY(-2px);
}

/* Image blocks with overlay */
.vaporwave-image-block {
    position: relative;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 15px var(--primary-color);
    transition: all 0.4s ease-in-out;
    filter: grayscale(0.2) contrast(1.1);
}
.vaporwave-image-block:hover {
    transform: scale(1.02);
    box-shadow: 0 0 25px var(--secondary-color);
    filter: grayscale(0) contrast(1.2) hue-rotate(5deg);
}
.vaporwave-image-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
    transition: background 0.3s ease;
}
.vaporwave-image-block:hover::before {
    background: rgba(0, 0, 0, 0.2);
}

/* Card Styling */
.vaporwave-card {
    background-color: var(--light-bg);
    border: 1px solid var(--accent-color-1);
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}
.vaporwave-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 25px var(--primary-color);
}

/* Tabs */
.tabs.is-boxed ul li a {
    border-color: var(--accent-color-1);
    color: var(--text-light);
    background-color: var(--dark-bg);
    transition: all 0.3s ease-in-out;
}
.tabs.is-boxed ul li.is-active a {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--dark-bg);
    box-shadow: 0 0 10px var(--primary-color);
}
.tabs.is-boxed ul li a:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--dark-bg);
}
.tab-pane {
    display: none;
    animation: fadeIn 0.5s ease-out;
}
.tab-pane.is-active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Process Section */
.process-step {
    border-radius: 8px;
    margin-bottom: 2rem;
    height: 100%; /* Ensure cards in columns have equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.process-step .icon {
    filter: drop-shadow(0 0 5px var(--primary-color));
}

/* Portfolio Section */
.portfolio-card {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    height: 100%; /* Ensure cards in columns have equal height */
}
.portfolio-card .card-image img {
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.portfolio-card:hover .card-image img {
    transform: scale(1.05);
    filter: brightness(0.8);
}
.portfolio-card .card-content {
    background-color: rgba(42, 42, 74, 0.8);
    backdrop-filter: blur(3px);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s ease-in-out;
}
.portfolio-card:hover .card-content {
    opacity: 1;
    transform: translateY(0);
}
.portfolio-card .card-content .title, .portfolio-card .card-content .subtitle {
    color: var(--text-light);
    text-shadow: 1px 1px var(--accent-color-1);
}

/* Modals */
.modal-content.vaporwave-modal-content {
    background-color: var(--dark-bg);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px var(--primary-color);
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
}
.modal-close {
    background-color: var(--secondary-color);
    filter: drop-shadow(0 0 10px var(--secondary-color));
}

/* Testimonials */
.testimonial-card .media-left img {
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color);
}
.testimonial-card {
    height: 100%; /* Ensure cards in columns have equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Stats Section */
.stat-block {
    border-radius: 8px;
    height: 100%; /* Ensure blocks in columns have equal height */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vaporwave-number {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-shadow: 2px 2px var(--secondary-color);
}

/* CTA Section */
.cta-vaporwave-zigzag {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* Zigzag effect */
    padding: 8rem 1.5rem;
    margin-top: -5rem; /* Overlap with previous section */
    margin-bottom: -5rem;
    z-index: 2;
}
.cta-vaporwave-zigzag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay */
    z-index: 0;
}
.cta-vaporwave-zigzag .container {
    position: relative;
    z-index: 1;
}

/* Form Styling */
.form-vaporwave .label {
    color: var(--text-light);
}
.vaporwave-input, .vaporwave-textarea, .vaporwave-select select {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--accent-color-1);
    color: var(--text-light);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(138, 43, 226, 0.2);
    transition: all 0.3s ease-in-out;
}
.vaporwave-input::placeholder, .vaporwave-textarea::placeholder {
    color: rgba(224, 224, 224, 0.6);
}
.vaporwave-input:focus, .vaporwave-textarea:focus, .vaporwave-select select:focus {
    border-color: var(--primary-color);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 15px var(--primary-color);
}
.vaporwave-select::after {
    color: var(--primary-color);
}
.help.is-danger {
    color: var(--secondary-color);
    text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}

/* Footer */
.vaporwave-footer {
    background-color: var(--dark-bg);
    border-top: 1px solid var(--primary-color);
    padding: 3rem 1.5rem;
    box-shadow: 0 -2px 10px rgba(0, 255, 255, 0.2);
}
.footer-logo {
    max-height: 2.5rem;
    filter: drop-shadow(0 0 5px var(--primary-color));
}
.vaporwave-link {
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}
.vaporwave-link:hover {
    color: var(--secondary-color);
    text-shadow: 0 0 8px var(--secondary-color);
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1000;
    background-color: rgba(26, 26, 46, 0.9);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 20px var(--primary-color);
    border-radius: 8px;
    max-width: 350px;
    transition: all 0.5s ease-in-out;
}
.cookie-banner.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
.cookie-banner .card-content {
    padding: 1.25rem;
}
.cookie-banner .title, .cookie-banner .subtitle {
    color: var(--text-light);
}
.cookie-banner a {
    color: var(--primary-color);
}
.cookie-banner a:hover {
    color: var(--secondary-color);
}

/* Cookie Modal */
.modal .switch[type="checkbox"] + label::before {
    background-color: var(--accent-color-1);
    border-color: var(--accent-color-1);
}
.modal .switch[type="checkbox"]:checked + label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.modal .switch[type="checkbox"]:checked + label::after {
    background-color: var(--dark-bg);
}
.modal .switch[type="checkbox"]:disabled + label::before {
    opacity: 0.6;
}
.modal .switch[type="checkbox"]:disabled + label::after {
    opacity: 0.6;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .hero-vaporwave .columns {
        flex-direction: column-reverse; /* Image on top for mobile */
    }
    .hero-image {
        margin-bottom: 2rem;
    }
    .navbar-menu {
        text-align: center;
    }
    .navbar-item {
        padding: 0.75rem 0;
    }
    .cta-vaporwave-zigzag {
        clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
    }
    .cookie-banner {
        max-width: calc(100% - 2rem);
        left: 1rem;
        right: 1rem;
    }
    .title.is-1 {
        font-size: 2.5rem;
    }
    .subtitle.is-4 {
        font-size: 1.25rem;
    }
}
/* Parent wrapper styles */
.rightsCloudWrap {
    padding: 3rem 1.5rem; /* Top/bottom and side padding for the wrapper */
    margin: 2rem 0; /* Vertical margin for separation */
    background-color: var(--light-bg); /* A slightly lighter background for content */
    border-radius: 10px; /* Soft rounded corners */
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); /* Subtle glow */
    color: var(--text-light); /* Ensure text color is light */
}

/* Heading styles within rightsCloudWrap */
.rightsCloudWrap h1 {
    font-size: 2.2rem; /* Moderate size for main heading */
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary-color); /* Electric Blue for emphasis */
    text-shadow: 1px 1px var(--secondary-color); /* Pink shadow */
    letter-spacing: 0.5px;
}

.rightsCloudWrap h2 {
    font-size: 1.8rem; /* Slightly smaller for sub-headings */
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1.2rem;
    color: var(--accent-color-1); /* Blue Violet for distinction */
    text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
}

.rightsCloudWrap h3 {
    font-size: 1.5rem; /* Even smaller */
    font-weight: 600;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    color: var(--text-light); /* Default light text color */
}

.rightsCloudWrap h4 {
    font-size: 1.3rem; /* Small heading */
    font-weight: 500;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--text-light);
}

.rightsCloudWrap h5 {
    font-size: 1.1rem; /* Smallest heading */
    font-weight: 500;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    color: var(--text-light);
}

/* Paragraph styles within rightsCloudWrap */
.rightsCloudWrap p {
    font-size: 1rem; /* Standard paragraph font size */
    margin-bottom: 1rem; /* Space between paragraphs */
    line-height: 1.7; /* Improved readability */
    color: var(--text-light);
}

/* Unordered list styles within rightsCloudWrap */
.rightsCloudWrap ul {
    list-style: none; /* Remove default bullet points */
    padding-left: 0; /* Remove default padding */
    margin-bottom: 1rem;
}

/* List item styles within rightsCloudWrap */
.rightsCloudWrap ul li {
    position: relative;
    padding-left: 1.5rem; /* Space for custom bullet */
    margin-bottom: 0.5rem; /* Space between list items */
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
}

/* Custom bullet point for list items */
.rightsCloudWrap ul li::before {
    content: '►'; /* Retro triangle bullet */
    position: absolute;
    left: 0;
    color: var(--primary-color); /* Electric Blue bullet */
    font-weight: bold;
    font-size: 0.8rem; /* Adjust bullet size */
    line-height: 1.6; /* Align with text */
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5); /* Subtle glow for bullet */
}

/* Responsive adjustments for headings */
@media screen and (max-width: 768px) {
    .rightsCloudWrap h1 {
        font-size: 1.8rem;
    }
    .rightsCloudWrap h2 {
        font-size: 1.5rem;
    }
    .rightsCloudWrap h3 {
        font-size: 1.3rem;
    }
    .rightsCloudWrap h4 {
        font-size: 1.1rem;
    }
    .rightsCloudWrap h5 {
        font-size: 1rem;
    }
    .rightsCloudWrap p,
    .rightsCloudWrap ul li {
        font-size: 0.95rem;
    }
    .rightsCloudWrap {
        padding: 2rem 1rem;
    }
}