:where([class^="ri-"])::before { content: "\f3c2"; }

* {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-animation {
  animation: mobileMenuAnimation 0.2s linear none;
}

@keyframes mobileMenuAnimation {
  0% { width: 0%; }
  100% { width: 65%; }
}

.hero-background-image {
  background-image: url('../../imgs/contato/bg-img.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cta-magnetic {
position: relative;
overflow: hidden;
transition: transform 0.3s ease-in-out 0s;
}
.cta-magnetic::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
transition-delay: 0s;
}

.cta-magnetic:active::before {
width: 300px;
height: 300px;
transition-delay: 0.05s;
}
.cta-magnetic:active {
transform: translateY(-2px);
transition: transform 0.3s ease-in-out 0.05s;
}

@media (hover: hover) {
  .cta-magnetic:hover::before {
    width: 300px;
    height: 300px;
    transition-delay: 0.05s;
  }
  .cta-magnetic:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease-in-out 0.05s;
  }
}

@media screen and (max-width: 400px) {
  .subtitle-text{
    font-size: 0.95em;
  }
}

:root {
  --sat: env(safe-area-inset-top);
}

header.sticky {
  padding-top: calc(0.5rem + var(--sat)); 
}

#mobile-menu {
  padding-top: calc(2.5rem + var(--sat)) !important; 
}