.rtp-ranking-section{

padding:90px 20px;

background:linear-gradient(135deg,#04142e,#07295f,#0d6efd);

position:relative;

overflow:hidden;

}


.rtp-ranking-section::before{

content:"";

position:absolute;

width:600px;

height:600px;

background:radial-gradient(circle,#27b6ff55,transparent);

left:-250px;

top:-250px;

}


.rtp-ranking-section::after{

content:"";

position:absolute;

width:450px;

height:450px;

background:radial-gradient(circle,#4fc3ff33,transparent);

right:-150px;

bottom:-150px;

}


.rtp-ranking-container{

max-width:1280px;

margin:auto;

position:relative;

z-index:2;

}


.rtp-heading{

text-align:center;

margin-bottom:60px;

}


.badge-live{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:#1cb5ff;

color:#fff;

font-size:13px;

font-weight:700;

margin-bottom:18px;

}


.rtp-heading h2{

font-size:42px;

font-weight:800;

color:#fff;

margin-bottom:20px;

}


.rtp-heading p{

max-width:850px;

margin:auto;

color:#dbe8ff;

font-size:17px;

line-height:1.8;

}


.rtp-ranking-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

gap:25px;

}


.ranking-card{

background:rgba(255,255,255,.07);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

border-radius:22px;

padding:30px;

transition:.35s;

}


.ranking-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 50px rgba(0,0,0,.35);

}


.top1{

border:2px solid #4fc3ff;

box-shadow:0 0 40px rgba(79,195,255,.35);

}


.rank-number{

font-size:28px;

font-weight:900;

color:#4fc3ff;

margin-bottom:15px;

}


.provider{

color:#88cfff;

font-size:14px;

margin-bottom:10px;

}


.ranking-card h3{

color:#fff;

margin-bottom:20px;

font-size:22px;

}


.rtp-percent span{

display:block;

margin-bottom:10px;

font-size:28px;

font-weight:800;

color:#fff;

}


.progress{

height:10px;

background:#163766;

border-radius:20px;

overflow:hidden;

}


.bar{

height:100%;

background:linear-gradient(90deg,#00b4ff,#4fc3ff);

}


.status{

display:inline-block;

margin-top:20px;

padding:8px 18px;

border-radius:40px;

font-size:13px;

font-weight:700;

}


.hot{

background:#00c3ff22;

color:#74d8ff;

}


.gacor{

background:#007bff22;

color:#72bcff;

}


.stabil{

background:#ffffff18;

color:#fff;

}


.btn-main{

display:block;

margin-top:25px;

text-align:center;

padding:14px;

background:linear-gradient(90deg,#0099ff,#4fc3ff);

border-radius:14px;

text-decoration:none;

font-weight:700;

color:#fff;

transition:.3s;

}


.btn-main:hover{

transform:translateY(-3px);

}


.rtp-info{

margin-top:70px;

background:rgba(255,255,255,.06);

padding:40px;

border-radius:24px;

border:1px solid rgba(255,255,255,.12);

}


.rtp-info h3{

color:#fff;

margin-bottom:18px;

font-size:30px;

}


.rtp-info p{

color:#dce8ff;

line-height:1.9;

}


@media(max-width:768px){

.rtp-heading h2{

font-size:30px;

}

.rtp-heading p{

font-size:15px;

}

.ranking-card{

padding:22px;

}

.rtp-info{

padding:25px;

}

.rtp-info h3{

font-size:24px;

}

}