body {
    background-image: url(../Imagens/hex-background-networking.jpg);
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.bcolor{
    border: 1px solid rgba(128, 128, 128, 0.614);
}

.accordion-button:not(.collapsed) {
    background-color: #9c9c9c25;
    /* Cor de fundo quando ativo */
    color: #000000;
}

.accordion-button-collapsed {
    background-color: transparent;
    /* Cor de fundo quando ativo */
    color: #000000;
}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.accordion {
    flex: 1 1 auto;
}

/*Efeito de aparecer*/

@keyframes appear {
    from {
        opacity: 0;
        scale: 0.8;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

.container {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}


/*animações*/


/*Client Cards Animação*/

/*Card 1*/
.anima1 {
    display: flex;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.anima1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            rgba(255, 255, 255, 0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.anima1:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(60, 60, 60, 0.5);
}

.anima1:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/*Card 2*/
.anima2 {
    display: flex;
    justify-content: center;
    
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.anima2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            rgba(255, 255, 255, 0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.anima2:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(60, 60, 60, 0.5);
}

.anima2:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/*Card 3*/
.anima3 {
    display: flex;
    justify-content: center;
    
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.anima3::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            rgba(255, 255, 255, 0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.anima3:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(60, 60, 60, 0.5);
}

.anima3:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/*Card 4*/
.anima4 {
    display: flex;
    justify-content: center;
    
    position: relative;
    overflow: hidden;
    transition: all 0.5s ease;
}

.anima4::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(0deg,
            transparent,
            transparent 30%,
            rgba(255, 255, 255, 0.3));
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
}

.anima4:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(60, 60, 60, 0.5);
}

.anima4:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/*Orçamento aparecer*/
@keyframes orcaappear {
    from {
        opacity: 0;
        transform: scale (0.8);
    }
    to {
        opacity: 1;
        transform: scale (1);
    }
}

.orcaappear {
    animation: orcaappear 0.8s ease-in-out;
}