::-webkit-scrollbar {
    width: 12px; 
}

::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgb(163, 29, 43);
    border-radius: 10px;
    border: 3px solid #f1f1f1; 
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgb(200, 40, 55); 
}


* {
    scrollbar-width: thin;
    scrollbar-color: rgb(163, 29, 43) #f1f1f1;
}

[data-aos] {
  will-change: transform, opacity;
}

 body{
    color: white;
}


/* menu */
div#header header .btn-toggle{
    display: none;
}
div#header header .btn-toggle a{
    color:rgb(0, 0, 0);
}

div#header header .btn-toggle a:hover{
    color:rgb(220,53,69);
}
/* apresentação */
main#content .apresentacao .desc{
   width: 45%;
}

main#content .apresentacao .desc h1{
   font-size: 4rem;
}

main#content .apresentacao .desc form .input-field{
   background-color: rgba(0, 0, 0, 0);
   border:1px solid rgba(220, 53, 70, 0.24);
   border-radius: 2rem;
}

main#content .apresentacao .desc form .input-field input{
    width: 100%;
    border:none;
    outline: none;
    border-radius:2rem 0 0 2rem;
    background:none;
    color:white;
}

main#content .apresentacao .desc form .input-field button{
    background:rgb(255, 255, 255);
    border:none;

}

main#content .apresentacao .desc .card-domain .card-domain-item{
    border:1px solid rgba(201, 201, 201, 0.116);
    padding: 10px 0px;
    width: 130px;
    text-align: center;
    border-radius:2rem;
    cursor:context-menu;
    transition: all .3s ease-in-out;
    
}

main#content .apresentacao .desc .card-domain .card-domain-item:hover{
    background:rgb(220,53,69);
    transform: translateY(-10px);
}

/* sobre */
main#content .sobre{
    background-image: linear-gradient(to left, rgba(92, 19, 26, 0.932) , rgb(0, 0, 0));
    padding: 5rem 8rem;
    color:white;
}

/* escolhas */
main#content .escolha{
    padding: 0px 8rem;
    background:rgb(255, 255, 255);
    color:black;
    margin-top: 6rem;
}

main#content .escolha .desc-escolha{
    width: 40%;
    margin: 0 auto;
}


main#content .escolha
.card-escolha-item{
    width: 280px;
    border-radius: 10px;
    text-align: center;
    padding: 4rem 3rem;
}

main#content .escolha
.card-escolha-item .icon i{
   font-size: 2.3rem;
}

main#content .escolha
.card-escolha-item .icon {
    margin-bottom: 10px;
    color:rgb(23, 30, 41);
}

/* recursos */
main#content .recursos{
    margin-top: 6rem;
    padding: 0px 8rem;
    background:white;
}

main#content .recursos .desc-recurso{
    width: 35%;
    margin: 0 auto;
}

main#content .recursos .card-recurso{
    background:white;
}

main#content .recursos .card-recurso
.card-group{
   text-align: center;
}

main#content .recursos .card-recurso
.card-group .card-group-item{
   width:50%;
   padding: 50px 0;
}

main#content .recursos .card-recurso
.card-group .card-group-item.active{
   background:rgb(220,53,69);
   color: white;
}


/* planos */
main#content .planos{
    margin-top: 6rem;
    padding: 0 8rem 5rem 8rem;
    background:rgb(255, 255, 255);
    
}

main#content .planos .desc-planos{
    width: 40%;
    margin: 0 auto;
}


main#content .planos .planos-card .planos-card-group.first{
    width: 40%;
    background:rgb(22, 22, 22);
}

main#content .planos .planos-card .planos-card-group.first img{
    width: 100%;
}


main#content .planos .planos-card .planos-card-group.last{
    width: 70%;
}
main#content .planos .planos-card .planos-card-group .planos-card-group-item{
    background:rgb(255, 255, 255);
    border:1px solid rgba(220, 53, 70, 0.096);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    border-radius:10px;
    height: 200px;
}

main#content .planos .planos-card .planos-card-group .planos-card-group-item .item{
    display: flex;
    width: 50%;
}

main#content .planos .planos-card .planos-card-group .planos-card-group-item .item .icon{
    margin-top:10px;
    margin-right: 20px;
}
main#content .planos .planos-card .planos-card-group .planos-card-group-item .item .icon i{
    background:rgba(194, 194, 194, 0.116);
    padding: 15px;
    font-size: 1.5rem;
    border-radius:50%;
    color:rgb(220,53,69);
}

main#content .planos .planos-card .planos-card-group .planos-card-group-item .price a{
    border:1px solid rgba(220, 53, 70, 0.158);
    width: 100%;
    color:rgb(0, 0, 0);
    padding: 8px 16px;
}

/* footer */

div#footer footer{
    background-color: rgb(0, 0, 0);
    padding: 5rem 8rem;
}

div#footer .footer-bottom{
    background-color: rgb(8, 8, 8);
    color:rgb(112, 112, 112);
}

div#footer .logo{
    width: 30%;
}

div#footer .logo .icons i{
    font-size: 1.3rem;
    background:rgb(226, 226, 226);
    color:rgb(0, 0, 0);
    padding: 8px 10px;
    border-radius:50%;
}

/* página preços HTML */

.pagina-precos .detalhes-precos{
    padding: 5rem 8rem;
    color:black;
   
}

.pagina-precos
.card-detalhes-precos{
    background:white;
    margin-bottom: 4rem;
}

.pagina-precos
.card-detalhes-group{
    width: 40%;
}



.pagina-precos .guide
.my-progress-bar {
    padding: 5px;
    background:rgba(220, 53, 70, 0.062);
    border-radius:40px;
 
}

.pagina-precos .guide
.my-progress-bar button{
  background:rgba(71, 16, 22, 0.226);
  width: 25px;
  height: 25px;
  border:none;
  border-radius:50%;
  transition: all .3s ease-in-out;
}


.pagina-precos .guide
.my-progress-bar button.active{
  background:rgb(220, 53, 70);
  width: 25px;
  height: 25px;
  border:none;
  border-radius:50%;
}


.pagina-precos
.card-detalhes-precos
.card-group{
    background:rgba(220, 53, 70, 0.034);
    border:1px solid rgb(220, 53, 70);
    border-radius:10px;
    padding: 2rem 1.5rem;
    width: 70%;
}

.pagina-precos .card-beneficios {
    background-color: rgb(0, 0, 0);
    margin: 0 8rem;
    padding: 3rem;
    color:white;
    border-radius:10px;
}

.pagina-precos .card-beneficios .first {
    width: 25%;
}
.pagina-precos .comparacao{
    padding: 5rem 8rem;
}

.pagina-precos .comparacao table th,
.pagina-precos .comparacao table td{
    padding: 20px 10px;
}