:root {
    --primary-color: #6a1b9a;
    /* Deep Purple */
    --accent-color: #00e5ff;
    /* Cyan Neon */
    --secondary-color: #ff007f;
    /* Magenta Neon */
    --dark-bg: #0f0c1a;
    --dark-alt: #1a1625;
    --text-main: #e0e0e0;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    padding-top: 80px;
    /* Prevent navbar from covering content */
}

h1,
h2,
h3,
h4,
h5,
.navbar-brand {
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

/* Navbar */
.glass-nav {
    background: rgba(15, 12, 26, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accent-color) !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.nav-link {
    color: var(--text-main) !important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--accent-color) !important;
    text-shadow: 0 0 8px var(--accent-color);
}

/* Headings */
.section-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

.section-padding {
    padding: 80px 0;
}

.bg-dark-alt {
    background-color: var(--dark-alt);
}

/* Glassmorphism Components */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    color: #fff;
    transition: transform 0.3s, box-shadow 0.3s;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 40px rgba(106, 27, 154, 0.2);
}

.glass-caption {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    padding: 20px;
    bottom: 20%;
}

/* Buttons */
.btn-glow {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 30px;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.5);
    transition: all 0.3s;
}

.btn-glow:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.8);
    color: #fff;
}

.shadow-purple {
    box-shadow: 0 0 20px rgba(106, 27, 154, 0.4);
}

/* Pricing Cards */
.pricing-card h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.pricing-card .price {
    font-weight: 700;
}

/* Gallery Images */
.gallery-img {
    height: 500px;
    object-fit: cover;
}

/* Carousel Testimonials */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 10px;
}

/* Footer */
footer {
    background: linear-gradient(to top, #000, var(--dark-bg));
}

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

    /* Hero Carousel Mobile - Show full banner */
    #home .carousel-item img {
        height: auto !important;
        /* Ensure override */
    }

    /* Hide Captions on Mobile if they overlap too much with the image text */
    /* Since the user's images have text IN them, we might not need the overlay captions on mobile or we should style them differently.
       For now, let's keep them small or hide them if the user wants the "print" look which has text in the image.
       The user said "se apresente dessa forma" referring to the IMAGE content.
       Let's hide the HTML captions on mobile to avoid double-text since the images have text. */
    #home .carousel-caption {
        display: none;
    }

    /* Gallery Carousel Mobile */
    .gallery-img {
        height: auto !important;
        object-fit: contain;
    }

    .carousel-caption {
        display: none;
        /* Hide captions in gallery too on mobile if images have text */
    }

    /* General Padding */
    .section-padding {
        padding: 40px 0;
    }
}

/* Global Carousel Image Fix */
#home .carousel-item img {
    height: auto;
    width: 100%;
    object-fit: contain;
}

/* Testimonial Card Design */
.testimonial-card-bg {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: #333;
    /* Dark text for contrast on white */
    max-width: 500px;
    margin: 0 auto;
    position: relative;
}

.testimonial-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: -60px;
    /* Pull up */
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #eee;
}

.testimonial-text {
    font-style: italic;
    font-size: 1rem;
    margin-top: 1rem;
    line-height: 1.6;
}

.testimonial-name {
    font-weight: 700;
    color: #000;
    margin-top: 1rem;
    font-size: 1.2rem;
}