a,input{
    outline:0
}
.wrapper,body,html{
    width:100%;
    min-height:100%
}
.logo,.navbar,.servers{
    text-align:right
}
.btn,select{
    cursor:pointer
}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
    display:block
}
.clear,.clearfix:after,.middle:after{
    display:table;
    clear:both
}
ol,ul{
    list-style:none
}
blockquote,q{
    quotes:none
}
blockquote:after,blockquote:before,q:after,q:before{
    content:'';
    content:none
}
.clear,.clearfix:after,.middle:after,.nav li.lang a:before{
    content:''
}
table{
    border-collapse:collapse;
    border-spacing:0
}
body,html{
    font-size:13px;
    line-height:1.42;
    font-family:Roboto,Tahoma,sans-serif;
    height:100%;
    background:#010101;
    color:#ffd199;
    min-width:1240px
}
a{
    color:#e6ff99;
    text-decoration:underline
}
.nav li a,a:hover{
    text-decoration:none
}
.wrapper{
    margin:0 auto;
    height:auto!important;
    height:100%;
    background:url(../images/footer.jpg) 50% bottom no-repeat
}
.container{
    width:1240px;
    margin:0 auto
}
.header{
    width:100%;
    height:599px;
    background:url(../images/header.jpg) 50% 0 no-repeat
}
.navbar{
    height:80px;
    padding-top:80px
}
.nav{
    font-size:0
}
.nav li{
    display:inline-block;
    margin-left:70px
}
.nav li a{
    color:#fff5ea;
    font-size:20px;
    font-family:AlbertusMedium,sans-serif;
    font-weight:400;
    line-height:1;
    display:block;
    position:relative;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
.nav li a.active,.nav li a:hover,.nav li.home a{
    color:#e6ff99
}
.btn-reg,.nav li.lang a,.servers .server .tiptip{
    -webkit-transition:all .5s ease-in-out
}
.nav li.home{
    float:left;
    margin-left:0
}
.nav li span{
    display:block;
    width:100%;
    height:40px;
    background-position:50% 0;
    background-repeat:no-repeat
}
.ico-home{
    background-image:url(../images/menu-ico-01.png)
}
.ico-about{
    background-image:url(../images/menu-ico-02.png)
}
.ico-stat{
    background-image:url(../images/menu-ico-03.png)
}
.ico-donate{
    background-image:url(../images/menu-ico-04.png)
}
.ico-toprank{
    background-image:url(../images/menu-ico-05.png)
}
.nav li.lang a{
    position:relative;
    display:inline-block;
    width:30px;
    height:30px;
    margin-right:35px;
    opacity:.5;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
    background-size:100% 100%
}
.nav li.lang a:before,.news .ico{
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out
}
.nav li.lang a.ru{
    background:url(../images/ru.png) no-repeat
}
.nav li.lang a.en{
    background:url(../images/en.png) no-repeat
}
.nav li.lang a.active,.nav li.lang a:hover{
    opacity:1
}
.nav li.lang a:before{
    visibility:visible;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
    border-radius:100%;
    position:absolute;
    border:3px solid #ffae4c;
    transition:all .3s ease-in-out;
    z-index:0;
    opacity:1;
    width:100%;
    height:100%;
    left:-3px;
    top:-3px
}
.nav li.lang a.active:before,.nav li.lang a:hover:before{
    visibility:hidden;
    top:50%;
    left:50%;
    width:0;
    height:0%;
    opacity:0
}
.servers .server .progress-radial,.servers .server .progress-radial span,.servers .server .tiptip{
    left:0;
    text-align:center;
    position:absolute;
    width:100%
}
.logo{
    padding-top:70px;
    padding-right:105px
}
.logo a img{
    -webkit-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -o-transition:all .5s ease;
    transition:all .5s ease
}
.btn-reg,.servers .server .tiptip{
    -o-transition:all .5s ease-in-out
}
.logo a:hover img{
    -webkit-filter:brightness(1.3);
    -o-filter:brightness(1.3);
    -moz-filter:brightness(1.3);
    filter:brightness(1.3)
}
.servers{
    padding-right:190px;
    font-size:0;
    padding-top:35px
}
.servers .server{
    color:#ffae4c;
    display:inline-block;
    position:relative;
    margin-left:30px;
    border-radius:100%;
    width:110px
}
.servers .server canvas{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg)
}
.servers .server .progress-radial{
    top:0;
    font-size:30px;
    font-family:AlbertusExtraBold,sans-serif;
    font-weight:400;
    color:#fff5ea;
    height:100%;
    line-height:1
}
.servers .server .progress-radial span{
    z-index:1;
    top:40px;
    text-shadow:0 0 5px rgba(0,0,0,.75)
}
.servers .server .tiptip{
    top:-25px;
    font-size:20px;
    transform:rotate(-360deg) translateX(80px);
    opacity:0;
    visibility:hidden;
    -moz-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out
}
.btn-cp,.btn-reg{
    height:53px;
    text-align:center;
    font-size:18px;
    font-family:Roboto,sans-serif;
    line-height:52px;
    -moz-transition:all .5s ease-in-out;
    text-transform:uppercase;
    text-decoration:none
}
.servers .server:hover .tiptip{
    opacity:1;
    visibility:visible;
    transform:rotate(0) translateY(0)
}
.middle{
    width:100%;
    margin:0 auto;
    padding:0 0 200px;
    position:relative;
    min-height:300px;
    background:url(../images/content.jpg) 50% 0 no-repeat;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.main{
    width:880px;
    float:right
}
.main .btns {
    display: block;
    margin: 0 auto;
    height: 53px;
    width: 760px;
    margin-left: 230px; /* Ajuste para a direita */

}
.btn-cp,.btn-reg,.news,.news .info ul li,.news .more a{
    display:inline-block
}


.btn-reg, .btn-cp {
    width: 261px;
    background: url(../images/btn-active.png) no-repeat;
    color: #fff5ea;
    transition: all .5s ease-in-out;
    font-weight: 700;
}

.btn-reg:hover, .btn-cp:hover {
    color: #e6ff99;
}

.btn-reg {
    font-weight: 700;
}

.btn-cp {
    font-weight: 700;
}

.socials,.start{
    text-align:right
}
.block-title,.news .title,.page-title,.start a{
    font-family:AlbertusExtraBold,sans-serif
}
.news .img img,.news .more a{
    -webkit-transition:.5s ease-in-out;
    o-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out
}
.btn-cp:hover{
    color:#e6ff99
}
.start {
    height: 90px;
    padding-right: 285px;
    padding-top: 45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: bold; /* Negrito */

}
.start a{
    color:#fff5ea;
    text-decoration:none;
    font-size:30px;
    text-transform:uppercase;
    text-shadow:0 0 5px rgba(0,0,0,.75)
}
.start a:hover{
    color:#e6ff99
}
.scrollTo{
    height:80px;
    padding-left:240px
}
.socials{
    height:60px
}
.newsbox{
    font-size:0
}
.newsbox>*{
    vertical-align:top
}
.news{
    margin-bottom:10px;
    width:440px;
    font-size:13px
}
.news .title,.news .title a{
    font-size:32px;
    color:#fff5ea
}
.news-header{
    background:url(../images/news-header.png) no-repeat;
    width:440px;
    height:166px;
    padding-top:15px
}
.news .img{
    width:410px;
    height:166px;
    overflow:hidden;
    margin:0 auto;
    border-radius:5px;
    position:relative
}
.news .img img{
    border-radius:5px;
    width:100%;
    height:196px
}
.news:hover .img img{
    -webkit-filter:brightness(1.3);
    -o-filter:brightness(1.3);
    -moz-filter:brightness(1.3);
    filter:brightness(1.3)
}
.news .title{
    position:absolute;
    bottom:15px;
    left:15px;
    right:15px;
    line-height:1
}
.toprank .item:after,.page-content:after{
    content:'';
    left:0
}
.news .title a{
    text-decoration:none
}
.news .date{
    padding:15px 0 0 15px;
    color:#ffd199;
    font-size:14px;
    font-weight:700
}
.news-content{
    background:url(../images/news-content.png) repeat-y;
    width:440px
}
.news .content{
    padding:15px 30px
}
.news-footer{
    background:url(../images/news-footer.png) no-repeat;
    width:440px;
    height:57px;
    padding-top:30px
}
.news .info{
    text-align:left;
    padding:0 20px 20px
}
.news .more a{
    background-color:#ffae4c;
    height:30px;
    padding:0 15px;
    color:#000;
    font-size:12px;
    font-weight:700;
    line-height:30px;
    text-decoration:none;
    border-radius:3px;
    text-transform:uppercase;
    border:1px solid transparent
}
.news .more a:hover{
    background-color:transparent;
    border:1px solid #ffae4c;
    color:#fff
}
.news .info ul{
    float:right;
    font-size:0;
    padding-top:5px
}
.news .info ul>*{
    vertical-align:top
}
.news .info ul li{
    font-size:12px;
    color:#917c65;
    margin:0 1px;
    height:19px;
    font-weight:100
}
.toprank .date,.toprank .link{
    margin-left:55px
}

.toprank .nick,.toprank .link{
    margin-left:55px
}
.news.half{
    width:404px
}
.news.half .img,.news.half .img img{
    height:98px
}
.fb,.tw,.vk{
    width:19px;
    height:19px;
    display:inline-block
}
.news.half:nth-child(even){
    margin-right:10px
}
.news .ico{
    transition:all .3s ease-in-out
}
.news .ico:hover{
    transform:rotate(360deg)
}
.vk{
    background:url(../images/vk.png) no-repeat
}
.fb{
    background:url(../images/fb.png) no-repeat
}
.tw{
    background:url(../images/tw.png) no-repeat
}
.page-content,.page-title{
    width:880px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box
}
.page-title{
    background:url(../images/content-header.png) no-repeat;
    height:93px;
    text-align:left;
    color:#fff5ea;
    font-size:32px;
    padding:30px 30px 0;
    box-sizing:border-box
}
.page-title .date{
    font-size:14px;
    color:#ffd199;
    font-family:Roboto,sans-serif;
    font-weight:700;
    float:right;
    padding-top:15px
}
.page-content{
    background:url(../images/content-content.png) repeat-y;
    padding:30px 30px 10px;
    position:relative;
    box-sizing:border-box
}
.page-content:after{
    background:url(../images/content-footer.png) 0 bottom no-repeat;
    position:absolute;
    height:30px;
    right:0;
    bottom:-30px
}
.page-content p{
    margin-bottom:10px
}
.page-content h3,label{
    color:#fff5ea;
    font-size:18px;
    font-weight:700
}
.input,input[type=password],input[type=text],select,textarea{
    border:2px solid #ffae4c;
    color:#141312;
    font-size:14px
}
.input,input[type=password],input[type=text]{
    height:30px
}
select{
    background:url(../images/arrow.png) right 50% no-repeat #fff;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    height:34px;
    padding-right:30px
}
textarea{
    padding:5px
}
.btn{
    background-color:#ffae4c;
    padding:10px 20px;
    line-height:1;
    font-size:16px;
    font-weight:400;
    color:#000;
    border:1px solid transparent;
    border-radius:3px;
    text-transform:uppercase;
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}
.table td,.table th{
    padding-left:8px;
    font-size:14px;
    height:34px;
    vertical-align:middle
}
.btn:hover{
    border-color:#ffae4c;
    background-color:transparent;
    color:#fff
}
.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 5px
}
.table th{
    background:#ffae4c;
    color:#141312;
    font-weight:700;
    text-align:left
}
.table td{
    color:#fff5ea;
    background-color:#43321e
}
.sidebar{
    width:338px;
    float:left;
    padding-top:180px
}
.block-title{
    padding-top:25px;
    font-size:20px;
    color:#ffae4c;
    line-height:1;
    font-weight:400;
    text-align:center;
    text-shadow:1px 1px 5px rgba(0,0,0,.75);
    height:70px;
    position:relative;
    background:url(../images/block-header.png) no-repeat;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box
}
.toprank .item,.tops-nav-serv{
    font-family:Roboto,sans-serif
}
.block{
    background:url(../images/block-content.png) repeat-y;
    padding:1px 0
}
.block-bottom{
    background:url(../images/block-footer.png) no-repeat;
    height:38px
}
.toprank .item{
    padding:20px;
    position:relative;
    z-index:1;
    border-bottom:1px solid rgba(255,255,255,.05)
}
.toprank .avatar{
    float:left;
    height:43px
}
.toprank .avatar img{
    width:37px;
    height:37px;
    border:3px solid #ffae4c;
    border-radius:100%
}
.toprank .link a{
    text-transform:uppercase;
    font-size:14px;
    color:#fff;
    font-weight:700;
    text-decoration:none;
    line-height:1
}
.toprank .date{
    line-height:1.42;
    color:#ffd199;
    font-size:12px
}
.toprank .nick{
    line-height:1.42;
    color:#f07c17;
    font-size:18px
}
.toprank .item:last-child{
    border-bottom:0
}
.toprank .item:after{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.1);
    -webkit-transform:rotateX(90deg) perspective(400px);
    -moz-transform:rotateX(90deg) perspective(400px);
    -o-transform:rotateX(90deg) perspective(400px);
    transform:rotateX(90deg) perspective(400px);
    z-index:-1;
    -webkit-transition:all .3s ease;
    -o-transition:all .3s ease;
    -moz-transition:all .3s ease;
    transition:all .3s ease
}
.toprank .item:hover:after{
    height:100%;
    -webkit-transform:rotateX(0);
    -moz-transform:rotateX(0);
    -o-transform:rotateX(0);
    transform:rotateX(0)
}
.toprank .item:hover .date{
    border-color:transparent
}
.tops-nav{
    padding:0 20px 30px;
    border-bottom:1px solid #0d0d0d;
    margin-bottom:15px
}
.tops-nav-serv{
    float:left;
    text-align:left;
    color:#fff;
    font-size:16px;
    font-weight:700;
    line-height:1.2
}
.tops-nav-type{
    float:right
}
.tops-nav a{
    font-family:AlbertusMedium,sans-serif;
    color:#ffd199;
    text-decoration:none;
    display:inline-block;
    font-size:16px;
    font-weight:400;
    line-height:23px;
    padding:0 5px;
    margin:0 3px
}
.tops-nav a.active,.tops-nav a:hover{
    background-color:#ffae4c;
    border-radius:4px;
    color:#fff;
    font-family:AlbertusExtraBold,sans-serif
}
.top-table{
    padding:0 20px 20px;
    border-bottom:1px solid #1a1a1a;
    color:#fff;
    font-size:17px;
    font-weight:700
}
.top-table table{
    width:100%;
    font-family:Roboto,sans-serif
}
.top-table table .num{
    width:30px;
    color:#ffd199;
    font-weight:700;
    font-size:12px
}
.top-table table .name{
    font-size:14px;
    color:#fff5ea
}
.top-table table .count{
    text-align:right;
    font-size:16px;
    color:#ffae4c;
    font-family:AlbertusExtraBold,sans-serif
}
.footer{
    width:100%;
    margin:-180px auto 0;
    min-height:180px;
    position:relative;
    overflow:hidden
}
.copy{
    text-align:left;
    font-size:13px;
    font-weight:700;
    color:#fff;
    float:left;
    padding-top:50px
}
.copy p{
    color:#cfc9b5;
    font-weight:400;
    font-size:12px
}
.u{
    padding-top:10px
}
.counters,.pay{
    float:right;
    padding-top:90px
}
.counters{
    margin-right:10px
}
.counters a img{
    opacity:.4;
    margin:0 5px
}
.counters a:hover img{
    opacity:1
}
.pay{
    margin-right:170px
}
.inner .header{
    background-image:url(../images/header-inner.jpg);
    height:396px
}
.inner .logo,.inner .servers{
    padding-top:0
}
.inner .middle{
    background-image:url(../images/content-inner.jpg)
}
.inner .start{
    height:75px;
    padding-top:28px
}
.inner .scrollTo{
    display:none
}

.top-table table tr {
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.top-table table tr:hover {
    background-color: #e32020;
    color: #fff;
    transform: scale(1.02); /* Aumenta ligeiramente o tamanho da linha */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra mais espaçada */
}

.top-table table td {
    padding: 12px 20px; /* Adiciona espaçamento interno (padding) nas células */
}

.news-pagination {
    text-align: center;
    margin-top: 20px;
 }
 
 .news-pagination ul {
    list-style: none;
    padding: 0;
    display: inline-flex;
 }
 
 .news-pagination ul li {
    margin: 0 10px;
 }
 
 .news-pagination ul li a {
    display: block;
    width: 40px;  /* Tamanho da bolinha */
    height: 40px;  
    line-height: 40px;  /* Alinhamento vertical do número */
    text-align: center;

    border-radius: 50%;
    text-decoration: none;
    color: #333; /* Cor do texto */
    font-size: 16px;  /* Tamanho do texto */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;  /* Efeito suave na cor e no tamanho */
 }
 
 .news-pagination ul li a.active {
    background-color: #ffae4c; /* Cor do fundo para a página ativa */
    color: #fff; /* Cor do texto na página ativa */
 }
 
 .news-pagination ul li a:hover:not(.active) {
    background-color: #ffae4c; /* Cor de fundo ao passar o mouse por cima (não ativa) */
    color: #ffffff; /* Cor do texto ao passar o mouse */
    transform: scale(1.1); /* Aumenta a bolinha um pouco ao passar o mouse */
 }
 
 .news .img {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 250px; /* Ajuste conforme o tamanho da imagem */
}

.Noticia-label {
    position: absolute;
    top: 10px; /* Ajuste de acordo com a posição desejada */
    right: 10px; /* Alinhamento à direita */
    background-color: #ffcc00; /* Cor de fundo */
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1; /* Para garantir que fique sobre a imagem */
}

.news .img {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 250px; /* Ajuste conforme o tamanho da imagem */
}

.Tutorial-label {
    position: absolute;
    top: 10px; /* Ajuste conforme necessário */
    right: 10px; /* Alinhamento à direita */
    background-color: #007bff; /* Cor de fundo azul */
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #fff; /* Cor do texto em branco */
    border-radius: 5px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1; /* Garantir que a tag fique acima da imagem */
}

.filter-container {
    text-align: right;
    margin-bottom: 20px;
}

.filter-container label {
    margin-right: 10px;
    font-weight: bold;
}

#news-filter {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filter-container label {
    color: #ffae4c; /* Cor do texto */
}

#news-filter {
    background-color: #ecf0f1; /* Cor de fundo da caixa de seleção */
    color: #34495e; /* Cor do texto na caixa de seleção */
}

#news-filter:hover {
    border-color: #2980b9; /* Cor da borda ao passar o mouse */
}

#news-filter:focus {
    border-color: #3498db; /* Cor da borda ao focar */
}

/* Estilização geral do contêiner do filtro */
.filter-container {
    text-align: right;
    margin-bottom: 20px;
}

/* Cor do texto "Filtrar por:" */
.filter-container label {
    margin-right: 10px;
    font-weight: bold;
    color: #ffae4c; /* Cor neutra do texto */
}

/* Estilização da caixa de seleção */
#news-filter {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f0f0f0;
    color: #333; /* Cor neutra do texto na caixa */
    transition: border-color 0.3s;
}

/* Cor da borda ao passar o mouse */
#news-filter:hover {
    border-color: #007bff;
}

/* Cor da borda quando em foco */
#news-filter:focus {
    border-color: #0056b3;
    outline: none;
}

/* Estilização para a opção 'Guia' com cor rosa */
#news-filter option[value="Guia"] {
    background-color: #f8c6e7; /* Rosa claro como fundo da opção */
    color: #da09fa; /* Rosa escuro como cor do texto */
}

/* Quando a opção 'Guia' estiver selecionada */
#news-filter option:checked[value="Guia"] {
    background-color: #da09fa; /* Rosa mais vibrante quando selecionado */
    color: white;
}

/* Estilização específica para a categoria selecionada */
#news-filter option:checked {
    background-color: #070507; /* Rosa vibrante para qualquer opção selecionada */
    color: white;
}

/* Estilização da tag 'Guia' */
.Guia-label {
    background-color: #da09fa; /* Rosa vibrante */
    color: white; /* Cor do texto */
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 10px;
    right: 10px; /* Posiciona à direita */
    border-radius: 5px;
}

/* Estilização da tag 'Evento' */
.Evento-label {
    background-color: #28a745; /* Verde */
    color: white; /* Cor do texto */
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 10px;
    right: 10px; /* Posiciona à direita */
    border-radius: 5px;
}

/* Estilização da tag 'Promoção' */
.Promocao-label {
    background-color: #dc3545; /* Vermelho */
    color: white; /* Cor do texto */
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    position: absolute;
    top: 10px;
    right: 10px; /* Posiciona à direita */
    border-radius: 5px;
}

.medal-container {
    position: relative;
    display: inline-block;
}

.medal {
    width: 20px;
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

.tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-size: 12px;

    /* Posição do tooltip à direita */
    position: absolute;
    z-index: 1;
    top: 50%; /* Centraliza verticalmente em relação à medalha */
    left: 110%; /* Posiciona à direita da medalha */
    transform: translateY(-50%); /* Ajusta para centralização vertical */

    /* Transição suave ao aparecer */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.medal-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}