body {
            font-family: 'Inter', sans-serif;
            background-color: #0A0A0A; /* Fundo Principal: Preto quase absoluto */
            color: #F8F8F8; /* Texto Principal: Branco suave */
            scroll-padding-top: 90px; /* Ajusta o padding para o scrollspy com a nova altura do navbar */
        }
        .nav {
          --bs-nav-link-padding-x: 0.3rem;
          --bs-nav-link-padding-y: 0.5rem;
          --bs-nav-link-font-weight: ;
          --bs-nav-link-color: var(--bs-link-color);
          --bs-nav-link-hover-color: var(--bs-link-hover-color);
          --bs-nav-link-disabled-color: var(--bs-secondary-color);
          display: flex;
          flex-wrap: wrap;
          padding-left: 0;
          margin-bottom: 0;
          list-style: none;
        }
        .navbar {
            background-color: rgba(0, 0, 0, 10) !important; /* Cor inicial do background do menu: Preto com transparência */
            transition: background-color 0.3s ease, height 0.3s ease, padding 0.3s ease; /* Transição suave para background, altura e padding */
            height: 110px; /* Altura inicial do menu */
        }
        /* Estilo para o menu quando a página é rolada */
        .navbar.navbar-scrolled {
            height: 90px; /* Altura mais curta quando rolado */
            padding-top: 0.5rem; /* Ajuste de padding para a altura menor */
            padding-bottom: 0.5rem; /* Ajuste de padding para a altura menor */
        }
        /* Ajusta o padding dos links de navegação quando o menu está encolhido */
        .navbar.navbar-scrolled .navbar-nav .nav-link {
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
        }
        /* Adiciona um background sólido ao menu mobile por padrão para evitar o flash */
        .navbar-collapse {
            background-color: rgba(0, 0, 0, 10); /* Fundo dos Cards: Cinza muito escuro */
            transition: height 0.3s ease; /* Transição apenas na altura */
        }
        /* Menu Hover Animation */
        .navbar-nav .nav-link {
            transition: color 0.3s ease, transform 0.3s ease;
            color: #F8F8F8 !important; /* Cor dos links no menu: Branco suave */
        }
        .navbar-nav .nav-link:hover {
            color: #FFFFFF !important; /* Cor de Destaque: Branco puro no hover */
            transform: translateY(-2px); /* Slight lift effect */
        }
        /* Active Menu Item Style */
        .navbar-nav .nav-link.active {
            color: #FFFFFF !important; /* Cor de Destaque: Branco puro para link ativo */
            font-weight: 600; /* Bolder font for active link */
            border-bottom: 2px solid #FFFFFF; /* Sublinhado branco para link ativo */
            padding-bottom: 0.25rem; /* Adjust padding for underline */
        }
        .hero-section {
            background-image: url('../img/banner-home.jpg'); /*  */
            background-size: cover;
            background-position: center;
            position: relative;
            min-height: 85vh; /* Adjust height for impact */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6); /* Dark overlay for text readability */
            display: flex; /* Make overlay a flex container */
            align-items: center; /* Center content vertically */
            justify-content: center; /* Center content horizontally */
        }
        .hero-logo {
            max-width: 100%; /* Ensure logo is responsive */
            height: auto;
            animation: fadeInScale 2s ease-out forwards; /* Animação de entrada */
        }

        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .section-title {
            position: relative;
            display: inline-block;
            padding-bottom: 0.5rem;
            margin-bottom: 3rem; /* Adjusted for Bootstrap spacing */
        }
        .section-title::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: #FFFFFF; /* Cor de Destaque: Branco puro */
            border-radius: 9999px;
        }
        .btn-primary {
            background-color: #1A1A1A; /* Fundo do botão: Cinza escuro */
            border-color: #FFFFFF; /* Contorno do botão: Branco puro */
            color: #FFFFFF !important; /* Texto do botão: Branco puro */
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            background-color: #333333; /* Fundo do botão: Cinza mais claro no hover */
            border-color: #FFFFFF; /* Contorno do botão: Branco puro no hover */
            transform: scale(1.05); /* Slight scale effect */
        }
        .btn-secondary {
            background-color: #1A1A1A; /* Fundo do botão: Cinza escuro */
            border-color: #FFFFFF; /* Contorno do botão: Branco puro */
            color: #FFFFFF !important; /* Texto do botão: Branco puro */
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            background-color: #333333; /* Fundo do botão: Cinza mais claro no hover */
            border-color: #FFFFFF; /* Contorno do botão: Branco puro no hover */
            transform: scale(1.05); /* Slight scale effect */
        }
        .card {
            background-color: #151515; /* Fundo dos Cards: Cinza muito escuro */
            border: none;
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px); /* Lift effect on hover */
        }
        .social-icon {
            font-size: 2rem; /* Adjusted size for navbar */
            color: #F8F8F8; /* Texto Principal: Branco suave */
            transition: color 0.3s ease, transform 0.3s ease;
        }
        .social-icon:hover {
            color: #FFFFFF; /* Cor de Destaque: Branco puro no hover */
            transform: scale(1.1);
        }
        /* Specific style for circular DJ images */
        .dj-photo {
            width: 150px; /* Fixed width for circular image */
            height: 150px; /* Fixed height for circular image */
            object-fit: cover; /* Ensures image covers the area without distortion */
            border: 4px solid #FFFFFF; /* Contorno branco na borda da foto do DJ */
            margin-bottom: 1.5rem; /* Spacing below the image */
        }

        /* Custom Carousel Styles for Events */
        .events-carousel-container {
            position: relative;
            overflow: hidden; /* Hide overflowing cards */
            width: 100%;
            padding: 0 50px; /* Space for navigation buttons */
            box-sizing: border-box;
        }
        .events-carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out; /* Smooth slide transition */
        }
        .events-carousel-track .event-card-wrapper {
            flex-shrink: 0; /* Prevent items from shrinking */
            padding: 0.5rem; /* Spacing between cards */
            box-sizing: border-box;
            /* Widths will be set by JS for precise control */
        }
        .carousel-custom-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(26, 26, 26, 0.7); /* Fundo do controle: Cinza escuro com transparência */
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 10;
            transition: background-color 0.3s ease;
        }
        .carousel-custom-control:hover {
            background-color: #333333; /* Fundo do controle: Cinza mais claro no hover */
        }

        /* meu código */
        .bg-dark {
          --bs-bg-opacity: 1;
          background-color: #1A1A1A !important; /* Fundo Secundário: Cinza escuro */
        }
        .card-body {
          color: #F8F8F8; /* Texto dos Cards: Branco suave */
        }
        .text-danger {
          --bs-text-opacity: 1;
          color: #F8F8F8 !important; /* Links de eventos: Branco suave */
        }
        /* Responsive adjustments for custom carousel via JS */
        /* The widths for .event-card-wrapper will be set by JavaScript based on screen size */

        .infoBox { background-color: #FFF; width: 300px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 2px solid #3fa7d8; border-radius: 3px; margin-top: 10px }
        .infoBox p { padding: 0 15px }
        .infoBox:before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #3fa7d8; top: -10px; content: ""; height: 0; position: absolute; width: 0; left: 138px }
        label.error { float: left; position: relative; top:3px; left:0%; color: #F4B4C1; vertical-align: top; font-size: 12px; font-weight: 300; text-align: left; display: block; border-left:3px solid #F4B4C1;  padding: 0px 10px 0 5px; margin: 0 0 5px 0;}