


.carousel-item {
    height: 20rem;
}

.carousel-caption {
    bottom: 3rem;
    z-index: 10;
}

@media (min-width: 40em) {
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }
}

/* Animação do gradiente do carrossel */
@keyframes gradientShift {
  0% {
    background: linear-gradient(45deg, #4d98e2, #052af2);
  }
  50% {
    background: linear-gradient(45deg, #052af2, #4d98e2, #6a5acd);
  }
  100% {
    background: linear-gradient(45deg, #4d98e2, #052af2);
  }
}

.carousel-item svg rect {
  animation: gradientShift 8s ease-in-out infinite;
}

/* Gradiente com movimento */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.carousel-item {
  position: relative;
}

.carousel-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(-45deg, #4d98e2, #052af2, #6a5acd, #4d98e2);
  background-size: 400% 400%;
  animation: gradientMove 6s ease infinite;
  z-index: 1;
}

.carousel-item .container {
  position: relative;
  z-index: 2;
}

/* Fim do gradiente com movimento */

/* Estilos profissionais adicionais */
.feature-icon {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.card:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.counter {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
}

/* Melhorias na responsividade */
@media (max-width: 768px) {
  .carousel-item {
    height: 14rem;
  }
  
  .carousel-caption h1 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 1rem;
  }
  
  /* Ocultar subtextos no mobile para menos informação */
  .carousel-caption p:not(.btn-container) {
    display: none;
  }
  
  /* Botões normais no mobile */
  .carousel-caption .btn-lg {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
  
  .display-5 {
    font-size: 1.8rem;
  }
  
  .feature-icon {
    width: 60px !important;
    height: 60px !important;
  }
  
  /* Ocultar descrições dos serviços no mobile */
  .feature p {
    display: none;
  }
  
  /* Ocultar subtítulos das seções no mobile (exceto da seção Sobre) */
  .lead:not(#About .lead) {
    display: none;
  }
  
  /* Manter textos da seção Sobre visíveis */
  #About .lead,
  #About p {
    display: block !important;
  }
  
  /* Ajustar tamanhos de texto da seção Sobre para mobile */
  #About .lead {
    font-size: 1rem;
  }
  
  #About p {
    font-size: 0.9rem;
  }


}

/* Animações suaves */
.fade-in {
  animation: fadeIn 0.6s ease-in;
}

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

/* Navbar com comportamento padrão do Bootstrap */

/* Melhorias na seção de tecnologias */
#Technologies {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.02), rgba(108, 117, 125, 0.01));
}

#Technologies .border {
  border: 2px solid rgba(108, 117, 125, 0.2) !important;
  transition: all 0.3s ease;
  background-color: rgba(13, 110, 253, 0.01);
}

#Technologies .border:hover {
  border-color: var(--bs-primary) !important;
  background-color: rgba(13, 110, 253, 0.05);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(13, 110, 253, 0.1);
}

/* Melhorias nos badges */
.badge {
  font-weight: 500;
  padding: 6px 12px;
  font-size: 0.8rem;
}

/* Backgrounds animados sutis para seções */
.stats-section {
  background: linear-gradient(135deg, rgba(13, 110, 253, 0.05), rgba(108, 117, 125, 0.03));
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(13, 110, 253, 0.03), transparent);
  animation: shimmer 8s infinite;
  z-index: 0;
}

.stats-section .container {
  position: relative;
  z-index: 1;
}

.about-section {
  background: linear-gradient(135deg, rgba(108, 117, 125, 0.03), rgba(13, 110, 253, 0.05));
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(-45deg, transparent, rgba(108, 117, 125, 0.02), transparent);
  animation: shimmer 10s infinite reverse;
  z-index: 0;
}

.about-section .container {
  position: relative;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Manter texto visível no tema dark */
.stats-section .text-muted,
.about-section .text-muted {
  color: var(--bs-gray-400) !important;
}

.stats-section h3,
.about-section h2,
.about-section h3 {
  color: var(--bs-body-color) !important;
}

.stats-section .text-primary,
.about-section .text-primary {
  color: var(--bs-primary) !important;
}

/* Seção de testimonials com background sutil */
#Testimonials {
  background: linear-gradient(135deg, rgba(108, 117, 125, 0.01), rgba(13, 110, 253, 0.02));
}

#Testimonials .card {
  background-color: var(--bs-dark);
  border: 1px solid rgba(108, 117, 125, 0.2);
}

#Testimonials .card:hover {
  border-color: rgba(13, 110, 253, 0.3);
  box-shadow: 0 15px 35px rgba(13, 110, 253, 0.1);
}