@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
    
body {
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}

.gradient-bg {
    background: linear-gradient(135deg, #5d3eb3 0%, #3a69a7 100%);
}

.gradient-bgbuttom{
    background-color: #482c94;
}

.gradient-bgbuttom:hover{
    background-color:#582fc7;
}
/* Efeito de fundo fosco com blur para a seção Hero */
.hero-blur-bg {
  /* O backdrop-filter aplica o efeito no fundo do elemento */
  -webkit-backdrop-filter: blur(40px); /* Para compatibilidade com navegadores WebKit */
  backdrop-filter: blur(50px);
  
  /* Adiciona um gradiente para o efeito ficar mais escuro e sutil */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2), /* Escuro e semi-transparente no topo */
    rgba(0, 0, 0, 0)
  );
}

/* Gradiente Animado e Futurista para a Seção Hero */
@keyframes animated-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.hero-rgb {
    background: linear-gradient(-45deg,
        rgb(5, 122, 168),
        rgb(18, 165, 209),
        rgb(130, 35, 173),
        rgb(61, 82, 177)
    );
    background-size: 400% 400%; 
    animation: animated-gradient 15s ease infinite; 
    border-radius: 50px;
    /* Garante que o conteúdo fique acima do fundo com blur */
    position: relative;
    z-index: 10;
}

/* Fundo da seção Hero para o efeito de blur */
.hero-blur-bg {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.2); /* Adiciona uma camada de opacidade sutil */
    position: absolute;
    inset: 0;
}

.bottom-port{
    color: #5937b6;
    background-color: rgb(243, 243, 243);
}

.bottom-port:hover{
    color: #8e1dda;
}
.carousel-container {
    scroll-snap-type: x mandatory;
}

/* Estilização dos slides do carrossel com box-shadow e transição */
.carousel-slide {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease-out forwards;
    transition: all 0.3s ease-in-out; /* Adicionado transição */
}

.carousel-slide:nth-child(2) { animation-delay: 0.1s; }
.carousel-slide:nth-child(3) { animation-delay: 0.2s; }
.carousel-slide:nth-child(4) { animation-delay: 0.3s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-slide {
    scroll-snap-align: center;
}
  
/* Efeito de box-shadow ao passar o mouse */
.carousel-slide:hover {
    box-shadow: 0 10px 20px rgba(144, 57, 243, 0.801);
    transform: scale(1.03);
}

.design-card {
    transition: all 0.3s ease;
}
    
.design-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(144, 57, 243, 0.801), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
    
.footer-link {
    position: relative;
}

.footer-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: width 0.4s ease;
}
    
.footer-link:hover::after {
    width: 100%;
}