@font-face {
    font-family: "Clash Display";
    src: url("Assets/ClashDisplay_Complete/ClashDisplay_Complete/Fonts/TTF/ClashDisplay-Variable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1,
h2, h3,
.build, .rights {
    font-family: "Clash Display", sans-serif;
}

ul li {
    list-style: none;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s ease;
    cursor: pointer;
}

ul li:hover {
    border-bottom: 2px solid #958ebb;
}

.contact,
.join,
.build {
    transition: all 0.3s ease;
}

.contact {
    border: 4px solid rgba(255, 255, 255, 0.823);
    cursor: pointer;
}

.contact:hover,
.join:hover,
.build:hover {
    transform: scale(1.02);
}

.join,
.build, .iconBg, .numberOne, .numberTwo, .numberThree, .numberFour {
    cursor: pointer;
    background-image: linear-gradient(to right, #777EAD, #beb5e3);
}

/* Efeito de pulsação contínua */
.arrowDown {
    animation: pulse 2s infinite ease-in-out;
    transform: translateZ(0);
    /* Otimização GPU */
    will-change: transform, box-shadow;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(149, 142, 187, 0.4);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(149, 142, 187, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(149, 142, 187, 0);
    }
}

/* Efeito no ícone interno */
.iconBg {
    animation: iconFloat 3s infinite ease-in-out;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* Efeito hover */
.arrowDown:hover {
    animation-play-state: paused;
}

.arrowDown:hover .iconBg {
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.1);
    transition: transform 0.3s ease;
}   

.seta {
    animation: arrowRight 2s infinite;
}

@keyframes arrowRight {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }
}

.contactInfo {
    background: #ad5389;
    background: linear-gradient(to right, #22202e, #383353, #22202e);
}

.card, .forms {
    background: radial-gradient(48.74% 50% at 50.04% 50%, #423D5E 0%, #1F1D2C 100%);
}

.banner{
    background-image: url(Assets/tech.jpg);
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
}

.servicos img{
    filter: brightness(0) invert(1) opacity(0.4);
}

.social{
    transition: all 0.3s ease;
}

.social:hover{
    transform: scale(1.05);
}