/* =========================================
   CONECTRO GLOBAL THEME
========================================= */

html{
    min-height:100%;

    background:
        radial-gradient(circle at top, rgba(85,175,255,0.25), transparent 35%),
        radial-gradient(circle at bottom, rgba(0,102,255,0.15), transparent 30%),
        linear-gradient(180deg,#020817 0%,#071427 50%,#020617 100%) fixed !important;
}

body{
    min-height:100%;

    margin:0;
    padding:0;

    background:transparent !important;

    font-family:'Poppins',sans-serif;
    color:#FFFFFF;

    position:relative;
    overflow-x:hidden;
}

/* GRID EFFECT */

body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

    background-size:50px 50px;

    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);

    pointer-events:none;
    z-index:0;
}

/* PARTICLES */

.particles{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:1;
    pointer-events:none;
}

.particles span{
    position:absolute;
    display:block;

    width:4px;
    height:4px;

    background:rgba(120,200,255,0.7);
    border-radius:50%;

    animation:float 12s linear infinite;

    box-shadow:0 0 10px rgba(120,200,255,0.8);
}

@keyframes float{

    from{
        transform:translateY(100vh) scale(.5);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    to{
        transform:translateY(-20vh) scale(1.2);
        opacity:0;
    }
}

/* MAIN CONTAINER */
body > .container{
    margin-top: 110px !important;
}

.container{
    position:relative;
    z-index:5;

    margin-top:2px;
    margin-bottom:2px;

    background:rgba(4,15,32,0.82) !important;

    backdrop-filter:blur(10px);

    border-radius:28px;

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 0 40px rgba(0,153,255,0.15),
        inset 0 0 30px rgba(255,255,255,0.03);

    padding:0px;
}

/* FORCE TRANSPARENCY */

.container-fluid,
.maincontent,
.content-box,
.panel,
.panel-default,
.jumbotron,
.well{
    background-color:transparent !important;
}

/* GLASS EFFECT */

.content-box,
.panel,
.panel-default,
.jumbotron,
.well{
    background:rgba(4,15,32,0.82) !important;

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.08) !important;

    border-radius:20px;

    box-shadow:
        0 0 40px rgba(0,153,255,0.10),
        inset 0 0 30px rgba(255,255,255,0.02);
	
	margin-top: 50px;
}

/* TITLES */

h1,
h2,
h3,
h4{
    font-family:'Cinzel',serif;

    background:linear-gradient(to bottom,#FFFFFF,#85C9FF);

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 25px rgba(120,200,255,0.35);
}

/* TEXT */

p,
td,
th,
label,
span,
div{
    color:#EAF4FF;
}

/* LINKS */

a{
    color:#7DD3FC;
}

a:hover{
    color:#BAE6FD;
    text-decoration:none;
}

/* TABLES */

table{
    border-collapse:collapse;
}

table tr{
    transition:.2s;
}

table tr:hover{
    background:rgba(255,255,255,0.04) !important;
}

/* PANELS */

.panel-heading{
    background:rgba(255,255,255,0.04) !important;
    border:none !important;
    color:#FFF !important;
}

/* NAVBAR */

.navbar{
    background:rgba(4,15,32,0.92) !important;
    border:none !important;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 30px rgba(0,153,255,0.12);
}

.navbar a{
    color:#FFF !important;
}

.navbar a:hover{
    color:#7DD3FC !important;
}

/* FOOTER */

.footer{
    background:rgba(4,15,32,0.92) !important;
    border-top:1px solid rgba(255,255,255,0.08);
    color:#9ca3af;
}

/* DOWNLOADS */

.downloads-header{
    margin-bottom:30px;
}

.downloads-title{
    font-size:46px;
    font-weight:800;
    color:#ffffff;
    margin-bottom:10px;
    letter-spacing:-1px;
	margin-top: -50px;
}

.downloads-subtitle{
    color:#94a3b8;
    font-size:16px;
    max-width:700px;
}

/* CARD */

.download-card{
    display:flex;
    align-items:center;
    gap:30px;

    background:linear-gradient(
        135deg,
        rgba(15,23,42,0.96),
        rgba(30,41,59,0.96)
    );

    border:1px solid rgba(255,255,255,0.06);

    border-radius:18px;

    padding:35px;
    margin-bottom:25px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.03);

    transition:.25s ease;
}

.download-card:hover{
    transform:translateY(-3px);
    border-color:rgba(59,130,246,.35);
}

/* ICON */

.download-icon{
    width:90px;
    height:90px;
    min-width:90px;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:36px;
    color:#fff;

    box-shadow:0 10px 30px rgba(37,99,235,.35);
}

/* CONTENT */

.download-content{
    flex:1;
}

.download-badge{
    display:inline-block;

    padding:6px 12px;

    background:rgba(59,130,246,.15);

    border:1px solid rgba(59,130,246,.25);

    border-radius:999px;

    color:#60a5fa;

    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;

    margin-bottom:15px;
}

.download-content h2{
    color:#fff;
    font-size:32px;
    font-weight:700;
    margin-bottom:18px;
}

.download-content p{
    color:#cbd5e1;
    font-size:15px;
    line-height:1.8;
    margin-bottom:10px;
}

/* ACTIONS */

.download-actions{
    display:flex;
    flex-direction:column;
    gap:15px;
    min-width:230px;
}

/* BUTTONS */

.btn-download{
    height:52px;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none !important;

    font-size:15px;
    font-weight:700;

    transition:.25s ease;
}

.drive-btn{
    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff !important;
}

.drive-btn:hover{
    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(37,99,235,.35);
}

.mediafire-btn{
    background:linear-gradient(
        135deg,
        #ea580c,
        #f97316
    );

    color:#fff !important;
}

.mediafire-btn:hover{
    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(249,115,22,.35);
}

/* RESPONSIVO */

@media (max-width:992px){

    .download-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .download-actions{
        width:100%;
        min-width:100%;
    }

}

/* =========================================
   RANKING PAGE
========================================= */

.ranking-page{
	margin-top:35px;
	margin-bottom:50px;
}

/* HEADER */


.ranking-header h1{
	font-size:46px;
	font-weight:800;
	color:#ffffff;
	margin-bottom:10px;
	letter-spacing:-1px;
	margin-top: -50px;
}

.ranking-header p{
	color:#94a3b8;
	font-size:16px;
	margin:10;
}

/* =========================================
   TOP 3
========================================= */

.top-three-wrapper{
	display:flex;
	gap:20px;
	margin-bottom:25px;
}

.top-three-wrapper .top-card{
	flex:1;
}

.top-card{
	background:linear-gradient(
		135deg,
		rgba(15,23,42,0.96),
		rgba(30,41,59,0.96)
	);
	border:1px solid rgba(255,255,255,0.06);
	border-radius:20px;
	padding:40px 25px 30px;
	text-align:center;
	position:relative;
	box-shadow:
		0 10px 35px rgba(0,0,0,0.25),
		inset 0 1px 0 rgba(255,255,255,0.03);
	transition:.25s ease;
}

.top-card:hover{
	transform:translateY(-3px);
}

.top-card.first{
	border-color:rgba(255,215,0,.35);
}

.top-card.second{
	border-color:rgba(192,192,192,.35);
}

.top-card.third{
	border-color:rgba(205,127,50,.35);
}

.top-position{
	position:absolute;
	top:15px;
	right:15px;
	font-size:14px;
	font-weight:700;
	color:#60a5fa;
}

.top-name{
	color:#fff;
	font-size:24px;
	font-weight:800;
	margin-bottom:8px;
}

.top-guild{
	color:#94a3b8;
	font-size:14px;
	margin-bottom:10px;
}

.top-level{
	color:#cbd5e1;
	font-size:14px;
	margin-bottom:18px;
}

.top-zeny{
	font-size:24px;
	font-weight:800;
	color:#fbbf24;
}

/* =========================================
   TABLE
========================================= */

.ranking-table-wrapper{
	background:linear-gradient(
		135deg,
		rgba(15,23,42,0.96),
		rgba(30,41,59,0.96)
	);
	border:1px solid rgba(255,255,255,0.06);
	border-radius:18px;
	overflow:hidden;
	box-shadow:
		0 10px 35px rgba(0,0,0,0.25),
		inset 0 1px 0 rgba(255,255,255,0.03);
}

/* TABLE */

.ranking-table{
	margin:0;
	color:#fff;
}

.ranking-table thead{
	background:rgba(255,255,255,0.03);
}

.ranking-table thead th{
	border:none !important;
	padding:20px 25px !important;
	font-size:13px;
	font-weight:700;
	color:#94a3b8;
	text-transform:uppercase;
	letter-spacing:.5px;
}

.ranking-table tbody tr{
	transition:.2s ease;
}

.ranking-table tbody tr:hover{
	background:rgba(255,255,255,0.025);
}

.ranking-table tbody td{
	padding:18px 25px !important;
	border-top:1px solid rgba(255,255,255,0.04) !important;
	vertical-align:middle !important;
}

/* POSITION */

.rank-number{
	font-size:18px;
	font-weight:700;
	color:#60a5fa;
	width:80px;
}

/* PLAYER */

.player-name{
	color:#fff;
	font-size:16px;
	font-weight:700;
}

.player-guild{
	color:#94a3b8;
	font-size:13px;
	margin-top:3px;
}

/* CLASS */

.player-class{
	color:#dbe4ee;
	font-size:14px;
}

/* ZENY */

.zeny-value{
	color:#fbbf24;
	font-size:16px;
	font-weight:700;
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:991px){

	.top-three-wrapper{
		flex-direction:column;
	}

	.ranking-table thead{
		display:none;
	}

	.ranking-table tbody tr{
		display:block;
		padding:15px;
	}

	.ranking-table tbody td{
		display:block;
		width:100%;
		border:none !important;
		padding:8px 0 !important;
	}

}

/* --------------------------------
 Quick Link Sidebar Nav
-------------------------------- */
.quick-links{
    background: linear-gradient(
        180deg,
        rgba(8,25,55,.95),
        rgba(5,15,35,.95)
    );

    border: 1px solid rgba(0,170,255,.25);
    border-radius: 14px;

    padding: 15px 15px 5px;
    margin: 0;

    box-shadow:
        0 0 20px rgba(0,120,255,.15),
        inset 0 0 15px rgba(0,120,255,.08);
}


.quick-links ul {
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 0;
}

.quick-links ul hr {
	margin: 0;
}


.quick-links ul li{
    list-style:none;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.quick-links ul li:last-child{
    border-bottom:none;
}


.quick-links ul li:last-of-type {
	border: none;
}

.quick-links ul li a{
	font-family: 'Inter-Medium';
	font-size: 14pt;
	color: #f2f2f2;
	padding: 10px 0px 10px 70px;
	text-decoration: none;
	display: block;
	height: 62px;
}

.quick-links ul li:nth-of-type(1) a {
	background: url(../img/review.png) no-repeat;
	background-position: 10px 10px;
}

.quick-links ul li:nth-of-type(2) a {
	background: url(../img/newbie.png) no-repeat;
	background-position: 10px 10px;
}

.quick-links ul li:nth-of-type(3) a {
	background: url(../img/quest.png) no-repeat;
	background-position: 10px 10px;
}

.quick-links ul li:nth-of-type(4) a {
	background: url(../img/vote.png) no-repeat;
	background-position: 10px 10px;
}

.quick-links ul li:nth-of-type(5) a {
	background: url(../img/staff.png) no-repeat;
	background-position: 10px 10px;
}

.quick-links ul li:nth-of-type(6) a {
	background: url(../img/woe.png) no-repeat;
	background-position: 10px 10px;
}

.quick-links ul li:nth-of-type(1) a:hover {
	background: url(../img/review_h.png) no-repeat 10px 10px, url(../img/quick-links-hover.png) no-repeat 10px center;
}

.quick-links ul li:nth-of-type(2) a:hover {
	background: url(../img/newbie_h.png) no-repeat 10px 10px, url(../img/quick-links-hover.png) no-repeat 20px center;
}

.quick-links ul li:nth-of-type(3) a:hover {
	background: url(../img/quest_h.png) no-repeat 10px 10px, url(../img/quick-links-hover.png) no-repeat 20px center;
}

.quick-links ul li:nth-of-type(4) a:hover {
	background: url(../img/vote_h.png) no-repeat 10px 10px, url(../img/quick-links-hover.png) no-repeat 20px center;
}

.quick-links ul li:nth-of-type(5) a:hover {
	background: url(../img/staff_h.png) no-repeat 10px 10px, url(../img/quick-links-hover.png) no-repeat 20px center;
}

.quick-links ul li:nth-of-type(6) a:hover {
	background: url(../img/woe_h.png) no-repeat 10px 10px, url(../img/quick-links-hover.png) no-repeat 20px center;
}



.register-page{
	max-width:900px;
	margin:35px auto 35px;
}

.register-card{
	background:linear-gradient(
		135deg,
		rgba(15,23,42,.96),
		rgba(30,41,59,.96)
	);
	border:1px solid rgba(255,255,255,.06);
	border-radius:20px;
	padding:35px;
	box-shadow:
		0 10px 35px rgba(0,0,0,.25),
		inset 0 1px 0 rgba(255,255,255,.03);
}

.register-header{
	text-align:center;
	margin-bottom:35px;
	
}

.register-header h1{
	color:#fff;
	font-size:42px;
	font-weight:800;
	margin-bottom:10px;
}

.register-header p{
	color:#94a3b8;
	font-size:15px;
}

.register-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}

.form-group label{
	display:block;
	color:#dbe4ee;
	margin-bottom:8px;
	font-weight:600;
}

.form-control{
	height:48px;
	background:#0f172a;
	border:1px solid rgba(255,255,255,.08);
	color:#fff;
	border-radius:12px;
}

.form-control:focus{
	border-color:#3b82f6;
	box-shadow:none;
}

.birth-box,
.captcha-box{
	margin-top:10px;
	padding:20px;
	background:#0f172a;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.05);
}

.register-birth,
.register-captcha{
	margin-top:25px;
}

.register-notes{
	margin-top:30px;
	padding:20px;
	background:rgba(255,255,255,.03);
	border-radius:14px;
}

.register-notes h3{
	color:#60a5fa;
	margin-top:0;
	margin-bottom:15px;
}

.register-notes ul{
	margin:0;
	padding-left:20px;
	color:#cbd5e1;
}

.btn-register{
	width:100%;
	height:56px;
	margin-top:30px;
	border:none;
	border-radius:14px;
	background:linear-gradient(
		135deg,
		#2563eb,
		#3b82f6
	);
	color:#fff;
	font-size:18px;
	font-weight:700;
	transition:.25s;
}

.btn-register:hover{
	transform:translateY(-2px);
}

.register-page{
	max-width:900px;
	margin:30px auto 50px;
}

.register-card{
	background:linear-gradient(
		135deg,
		rgba(15,23,42,.96),
		rgba(30,41,59,.96)
	);
	border:1px solid rgba(255,255,255,.06);
	border-radius:20px;
	padding:35px;
	box-shadow:0 10px 35px rgba(0,0,0,.25);
}

.register-header{
	text-align:center;
	margin-bottom:30px;
}

.register-header h1{
	font-size:42px;
	font-weight:800;
	color:#fff;
	margin-bottom:10px;
}

.register-header p{
	color:#94a3b8;
	font-size:15px;
}

.register-alert{
	background:#7f1d1d;
	color:#fff;
	padding:15px;
	border-radius:12px;
	margin-bottom:25px;
}

.register-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}

.form-group{
	margin-bottom:20px;
}

.form-group label{
	display:block;
	color:#dbe4ee;
	margin-bottom:8px;
	font-weight:600;
}

.form-control{
	height:48px;
	background:#0f172a;
	border:1px solid rgba(255,255,255,.08);
	color:#fff;
	border-radius:12px;
}

.form-control:focus{
	border-color:#3b82f6;
	box-shadow:none;
}

.register-section{
	margin-top:25px;
}

.birth-box,
.captcha-box{
	padding:20px;
	background:#0f172a;
	border-radius:14px;
	border:1px solid rgba(255,255,255,.05);
}

.register-info{
	margin-top:30px;
	padding:20px;
	background:rgba(255,255,255,.03);
	border-radius:14px;
}

.register-info h3{
	margin-top:0;
	margin-bottom:15px;
	color:#60a5fa;
}

.register-info ul{
	margin:0;
	padding-left:20px;
	color:#cbd5e1;
}

.btn-register{
	width:100%;
	height:56px;
	margin-top:30px;
	border:none;
	border-radius:14px;
	font-size:18px;
	font-weight:700;
	color:#fff;
	background:linear-gradient(
		135deg,
		#2563eb,
		#3b82f6
	);
	transition:.25s;
}

.btn-register:hover{
	transform:translateY(-2px);
}

@media(max-width:768px){

	.register-grid{
		grid-template-columns:1fr;
	}

}

/* INFO PAGE */

.info-header{
    margin-bottom:30px;
}

.info-title{
    font-size:42px;
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
    margin-top: -50px;
}

.info-subtitle{
    color:#94a3b8;
    font-size:16px;
}

.info-card{
    background:rgba(15,23,42,.92);
    border:1px solid rgba(255,255,255,.06);
    border-radius:18px;
    padding:25px;
    margin-bottom:25px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.03);
}

.info-card-header{
    font-size:22px;
    font-weight:700;
    color:#fff;
    margin-bottom:20px;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:15px;
}

.info-item{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    border-radius:12px;
    padding:15px;
}

.info-item .label{
    display:block;
    color:#94a3b8;
    font-size:13px;
}

.info-item .value{
    display:block;
    text-align:center;
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.feature-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:12px;
}

.feature-item{
    background:rgba(255,255,255,.03);
    padding:12px 15px;
    border-radius:12px;
}

.commands-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:15px;
}

.command-box{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    border-radius:12px;
    padding:15px;
}

.command-box span{
    display:block;
    color:#60a5fa;
    font-weight:700;
    margin-bottom:8px;
}