body {

}

.folhas span {
    position:fixed;
    top:-10%;
    font-size:35px;
    animation:cair 10s linear infinite;
    opacity:.7;
}

.folhas span:nth-child(1){
    left:10%;
    animation-duration:8s;
}

.folhas span:nth-child(2){
    left:25%;
    animation-duration:12s;
}

.folhas span:nth-child(3){
    left:45%;
    animation-duration:10s;
}

.folhas span:nth-child(4){
    left:65%;
    animation-duration:14s;
}

.folhas span:nth-child(5){
    left:80%;
    animation-duration:9s;
}

.folhas span:nth-child(6){
    left:90%;
    animation-duration:13s;
}


@keyframes cair {

    0% {
        transform:translateY(-10vh) rotate(0deg);
    }

    50% {
        transform:translateY(50vh) translateX(50px) rotate(180deg);
    }

    100% {
        transform:translateY(110vh) translateX(-50px) rotate(360deg);
    }

}
.top {
    padding: 30px 25px 25px;
}
.logo {
    width:45px;
    height:45px;
    background:linear-gradient(135deg, #0EA5E9, #1D4ED8);
    color:#FFF;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    box-shadow:0 4px 10px rgba(37,99,235,0.35);
}

.logo{
    transition: .2s;
}


.logo:active{
    transform: scale(0.85) rotate(20deg);
}







.card.blue {

    background: linear-gradient(135deg, #0EA5E9, #1D4ED8, #172554);
    color: #fff;
    border-radius: 18px;
    border: 2px solid #7dd3fc;
    box-shadow: 0 8px 18px rgba(0,0,0,0.25);
    overflow: hidden;

}


.card.blue h6 {

    color: #e0f2fe;
    font-weight: bold;
    letter-spacing: 1px;

}


.card.blue p {

    color: #f0f9ff;
    font-size: 14px;

}


.btn-write {

    background: linear-gradient(135deg,#38bdf8,#2563eb);
    color: #fff;
    font-weight: bold;
    border-radius: 20px;
    border: 1px solid #bae6fd;
    padding: 8px 22px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);

}


.btn-write:hover {

    background: linear-gradient(135deg,#60a5fa,#1d4ed8);
    color:#fff;

}

.btn-blue {
  background:linear-gradient(135deg, #0EA5E9, #1D4ED8);
    color: #fff;
}

.quote{

    text-align:center;

}

.quote h6{

    color:#999;

    font-size:13px;

}

.quote p{

    font-size:26px;

    font-weight:300;

}

.purple{

    background:#efe3ff;

}

.btn-purple{

    background:#7b2cbf;

    color:#FFF;

    border-radius:30px;

}

.btn-purple:hover{

    background:#6822a8;

    color:#FFF;

}

.bottom{

    position:fixed;

    bottom:80px;

    left:0;

    width:100%;

    background:#FFF;

    z-index:999;

    box-shadow:0 -5px 15px rgba(0,0,0,.08);

}

.bottom a{

    color:#777;

    text-decoration:none;

    font-size:12px;

}

.bottom i{

    font-size:23px;

}

.active{

    color:#7b2cbf !important;

}







.btn-pro {
    background: linear-gradient(135deg, #facc15, #f59e0b);
    color: #fff;
    border: none;
    padding: 8px 22px;
    font-weight: 700;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-pro:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.6);
}

.btn-pro:active {
    transform: scale(0.95);
}

/* efeito de brilho */
.btn-pro::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.4);
    transform: skewX(-25deg);
    transition: 0.5s;
}

.btn-pro:hover::before {
    left: 150%;
}



.menu-fab{

    position:fixed;

    bottom:50px;

    right:25px;

    z-index:999;
    
    



}

.menu-fab{

    position:fixed;

    bottom:50px;

    right:25px;

    z-index:999;

}




.botao-fab{

    width:60px;

    height:60px;

        background: linear-gradient(135deg, #1E40AF, #2563EB, #0F172A);
    color: #fff;
    border-radius: 18px;
    border: 2px solid #93C5FD;
    box-shadow: 
        0 10px 25px rgba(30,64,175,0.35),
        inset 0 1px 12px rgba(255,255,255,0.15);

}

.botao-fab{
    transition: .2s;
}


.botao-fab:active{
    transform: scale(0.85) rotate(20deg);
}
.opcoes-fab{

    position:absolute;

    bottom:70px;

    right:0;

    display:none;

    flex-direction:column;

    gap:12px;

}


.opcoes-fab a{


       background: linear-gradient(135deg, #1E40AF, #2563EB, #0F172A);
    color: #fff;
    border-radius: 18px;
    border: 2px solid #93C5FD;
    text-decoration:none;
    box-shadow: 
        0 10px 25px rgba(30,64,175,0.35),
        inset 0 1px 12px rgba(255,255,255,0.15);
    padding:12px 18px;


    display:flex;

    align-items:center;

    gap:10px;

    width:140px;

}


.opcoes-fab i{

    font-size:20px;

}


.mostrar{

    display:flex;

}


.menu-lateral{

    position:fixed;

    top:0;
    left:0;

    width:280px;
    height:100vh;

    background:white;

    box-shadow:5px 0 20px rgba(0,0,0,.2);

    padding:25px;

    transform:translateX(-100%);

    transition:.4s;

    z-index:1000;

}


.menu-lateral.ativo{

    transform:translateX(0);

}


.menu-lateral h3{

    color:#1D4ED8;

    margin-bottom:30px;

}


.menu-lateral a{

    display:block;

    padding:15px;

    margin-bottom:10px;

    border-radius:15px;

    text-decoration:none;

    color:#333;

    transition:.3s;

}


.menu-lateral a:hover{

    background:#E0F2FE;

    color:#1D4ED8;

}



.fechar{

    text-align:right;

    font-size:25px;

    cursor:pointer;

}



.fundo-menu{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.4);

    display:none;

    z-index:999;

}


.fundo-menu.ativo{

    display:block;

}