.custom-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  min-width: 320px;
  z-index: 1010;
}

.dark-mode .custom-header-fixed {
  background: #101924;
}

.dark-mode .nk-sidebar-bar.is-theme,
.dark-mode .nk-sidebar-bar,
.dark-mode .nk-menu-hr,
.dark-mode .nk-sidebar-main,
.dark-mode .custom-header-fixed {
  border-color: #203247;
}

.nk-body.ui-softy,
.nk-body.ui-shady,
.nk-body.ui-softy .custom-header-fixed,
.nk-body.ui-shady .custom-header-fixed {
  background: #f5f6fa !important;
}

.custom-header-fixed + .nk-content {
  margin-top: 65px;
  position: relative;
}

@media (min-width: 576px) {
  .custom-header-fixed {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (min-width: 992px) {
  .custom-header-fixed {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1200px) {
  .nk-header {
    border-bottom: none;
    padding-top: 0.5rem;
  }
  .custom-header-fixed {
    left: 80px;
  }
}


/* imagem do evento nos detalhes */
/* Container flutuante da imagem */
.floating-image-container {
    position: relative;
    margin-top: -85px; /* Move a imagem para sobrepor a seção anterior */
    z-index: 10;
    margin-left: -60px;
}

.floating-image {
    width: 100%; /* Garante que a imagem se ajuste ao container */
    max-width: 300px; /* Tamanho máximo da imagem */
    border: 5px solid #fff; /* Moldura branca em volta */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efeito de sombra */
}

/* Título do evento */
.event-title {
    margin-top:20px;
}

.event-organization {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}
.comp-pro-c3-event {
    margin-top: 30px;;
}

/* Descrição do evento */
.event-description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
}

/* Responsividade */
@media (max-width: 768px) {
    .floating-image-container {
        margin-top: -50px;
    }

    .event-title {
        font-size: 2rem;
    }
}

/* Container flexível */
.event-details-box {
    overflow: hidden; /* Para conter o float */
    margin-left: -30px;
    margin-top: -15px;
}

.event-details-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Imagem à esquerda */
.event-details-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

/* Limita a largura da imagem, mas permite altura automática */
.event-image-wrapper {
    width: 280px;
    flex-shrink: 0;
}

.event-image {
    width: 100%;
    height: auto;
    border: 5px solid #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Texto ocupa todo o espaço restante, mas pode descer abaixo da imagem */
.event-description-text {
    flex: 1;
    min-width: 0;
    margin-top: 40px;
}

/* Para quebrar o texto e evitar 'duas colunas fixas' */
.event-description-text div {
    display: block;
    color: #333;
    line-height: 1.6;
}

/* Responsivo */
@media (max-width: 768px) {
    .event-details-flex {
        flex-direction: column;
        align-items: center;
    }

    .event-image-wrapper {
        width: 100%;
    }

    .event-description-text {
        width: 100%;
    }
}

.event-image {
  float: left;
  width: 300px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  border: 5px solid #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}