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

.hero-background {
  min-height: 60vh;
  padding: 10rem 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 40%, rgba(255, 255, 255, 0) 70%),
    url('../img/fundo-animado.webp');
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  background-position: left, right;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.HeroGraphic{
    position: absolute;
    width: 100%;
    bottom: -12rem;
    z-index: 120;
}


.modal {
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}

.modal-content {
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.modal.active {
    opacity: 1;
    pointer-events: all;
}
.modal.active .modal-content {
    transform: translateY(0);
}
.dot.active {
    background-color: #0093fd;
}

.swiper-button-prev {
  left: -30px; /* Aumente o valor negativo para afastar mais */
}

.swiper-button-next {
  right: -30px;
}

@media screen and (max-width: 600px){ 

    .HeroGraphic{
        bottom: -5rem;
    }
    
    .hero-background {
        padding: 5rem 0;
        background-image:
            linear-gradient(to top, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%),
            url('../img/fundo-animado.webp');
        background-size: 100% 100%, cover;
        background-repeat: no-repeat;
        background-position: center, center top; /* ajusta altura do webp */
    }

    .HeroIcon-container{
        bottom: 5rem;
        width: 10rem;
    }

}