/* ==========================
        Home Page CSS
      Royal RolePlay
========================== */



/* Main Cards Layout */


.main-cards {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}




/* Main Card */


.main-card {

position:relative;

background:#111;

border-radius:20px;

overflow:hidden;

border:1px solid #222;

min-height:380px;

}




.main-card img {

width:100%;

height:220px;

object-fit:cover;

display:block;

}




.main-card::after {

content:"";

position:absolute;

top:0;

left:0;

right:0;

height:220px;

background:linear-gradient(

transparent,

rgba(0,0,0,.8)

);

}





.card-content {

position:relative;

z-index:2;

padding:25px;

}





.card-content h3 {

font-size:24px;

color:#fff;

margin-bottom:12px;

}





.card-content p {

font-size:15px;

color:#aaa;

line-height:2;

}





.card-content a {

margin-top:15px;

background:#d4af37;

color:#000;

padding:12px 25px;

display:inline-block;

border-radius:12px;

font-weight:bold;

}





.card-content a:hover {

background:#fff;

}






/* ==========================
        Organization Card
========================== */


.main-card:first-child {

border-top:3px solid #1e90ff;

}




/* ==========================
          Gang Card
========================== */


.main-card:nth-child(2) {

border-top:3px solid #e63946;

}




/* ==========================
      Applications Card
========================== */


.main-card:nth-child(3) {

border-top:3px solid #d4af37;

}





/* ==========================
        Hero Animation
========================== */


.hero img {

animation:zoomBanner 15s infinite alternate;

}



@keyframes zoomBanner {


from {

transform:scale(1);

}


to {

transform:scale(1.08);

}


}
/* ==========================
          Empty Box
========================== */


.empty-box {

background:#111;

border:1px solid #222;

border-radius:18px;

padding:40px 25px;

text-align:center;

}



.empty-box h3 {

font-size:22px;

color:#fff;

margin-bottom:15px;

}



.empty-box p {

color:#999;

line-height:2;

}





/* ==========================
            News
========================== */


.news-list {

display:flex;

flex-direction:column;

gap:15px;

}



.news-card {

background:#111;

border:1px solid #222;

border-radius:15px;

padding:20px;

display:flex;

align-items:center;

justify-content:space-between;

}



.news-card:hover {

border-color:#d4af37;

}



.news-card h3 {

font-size:18px;

}



.news-card p {

color:#aaa;

margin-top:8px;

}





/* ==========================
          Topics
========================== */


.topics-list {

display:flex;

flex-direction:column;

gap:15px;

}



.topic-card {

background:#111;

border-radius:15px;

padding:20px;

border:1px solid #222;

}



.topic-card:hover {

border-color:#6c35ff;

}



.topic-card h3 {

margin-bottom:10px;

}



.topic-card p {

color:#999;

}





/* ==========================
          Replies
========================== */


.reply-list {

display:flex;

flex-direction:column;

gap:15px;

}



.reply-card {

background:#111;

padding:20px;

border-radius:15px;

border:1px solid #222;

}



.reply-card:hover {

border-color:#00a884;

}
/* ==========================
          Statistics
========================== */


.stats-container {

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}



.stat-card {

background:#111;

padding:30px 20px;

border-radius:18px;

text-align:center;

border:1px solid #222;

}



.stat-card:hover {

transform:translateY(-5px);

border-color:#d4af37;

}



.stat-card h3 {

font-size:38px;

color:#d4af37;

margin-bottom:10px;

}



.stat-card p {

color:#aaa;

font-size:16px;

}





/* ==========================
            About
========================== */


.about-box {

background:#111;

border-radius:20px;

padding:35px;

display:flex;

align-items:center;

gap:35px;

border:1px solid #222;

}



.about-box img {

width:130px;

height:130px;

object-fit:contain;

}



.about-content h3 {

font-size:26px;

margin-bottom:15px;

}



.about-content p {

color:#aaa;

line-height:2;

}





/* ==========================
        Rubika Channel
========================== */


.channel-box {

background:linear-gradient(

135deg,

#151515,

#080808

);

padding:40px 25px;

border-radius:20px;

text-align:center;

border:1px solid #222;

}



.channel-box h2 {

font-size:28px;

margin-bottom:15px;

}



.channel-box p {

color:#aaa;

margin-bottom:25px;

}



.channel-box a {

background:#00a884;

color:white;

padding:14px 35px;

border-radius:12px;

display:inline-block;

font-weight:bold;

}



.channel-box a:hover {

background:#00c995;

}





/* ==========================
          Contact
========================== */


.contact-cards {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}



.contact-card {

background:#111;

padding:25px;

border-radius:18px;

border:1px solid #222;

text-align:center;

}



.contact-card:hover {

border-color:#d4af37;

}



.contact-card h3 {

color:#d4af37;

margin-bottom:12px;

}



.contact-card p {

color:#999;

}
/* ==========================
            Footer
========================== */


.footer {

margin-top:50px;

background:#0b0b0b;

border-radius:20px 20px 0 0;

padding:40px 25px;

text-align:center;

border-top:1px solid #222;

}



.footer-logo img {

width:90px;

height:90px;

object-fit:contain;

}



.footer-logo h2 {

margin-top:15px;

font-size:26px;

}



.footer-logo p {

color:#999;

margin-top:8px;

}





.footer-links {

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin:30px 0;

}



.footer-links a {

color:#ccc;

}



.footer-links a:hover {

color:#d4af37;

}





.copyright {

color:#777;

font-size:14px;

}





/* ==========================
      Card Animation
========================== */


.main-card,
.stat-card,
.contact-card {

transition:.3s;

}



.main-card:hover,
.stat-card:hover,
.contact-card:hover {

box-shadow:

0 10px 30px rgba(0,0,0,.5);

}





/* ==========================
        Mobile Bottom Nav
========================== */


.bottom-nav {

display:none;

}





@media(max-width:700px){


.bottom-nav {

position:fixed;

bottom:15px;

right:15px;

left:15px;

display:flex;

justify-content:space-around;

background:#111;

padding:15px;

border-radius:20px;

border:1px solid #222;

z-index:999;

}



.bottom-nav a {

display:flex;

flex-direction:column;

align-items:center;

gap:5px;

font-size:13px;

color:#ddd;

}



.bottom-nav a:hover {

color:#d4af37;

}


}
/* ==========================
      Applications System
========================== */


/* Form Box */


.form-box {

background:#111;

padding:35px;

border-radius:20px;

border:1px solid #222;

max-width:800px;

margin:auto;

}





.form-box form {

display:flex;

flex-direction:column;

gap:15px;

}





.form-box label {

color:#fff;

font-size:16px;

margin-top:10px;

}





.form-box input,
.form-box select,
.form-box textarea {


background:#080808;

border:1px solid #333;

color:white;

padding:15px;

border-radius:12px;

font-size:15px;

outline:none;

}





.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {


border-color:#d4af37;

}





.form-box textarea {

height:150px;

resize:none;

}





.form-box button {


background:#d4af37;

color:#000;

border:none;

padding:15px;

border-radius:12px;

font-size:17px;

font-weight:bold;

cursor:pointer;

margin-top:15px;

}



.form-box button:hover {

background:white;

}





/* ==========================
      Faction Cards
========================== */


#faction .main-card {


min-height:250px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

}



#faction .card-content {

width:100%;

}



#faction .main-card h3 {


font-size:26px;

color:#d4af37;

}





#faction .main-card p {


color:#aaa;

}





/* ==========================
      Application Buttons
========================== */


.card-btn {


display:inline-block;

background:#d4af37;

color:#000;

padding:12px 30px;

border-radius:12px;

font-weight:bold;

margin-top:20px;

}



.card-btn:hover {

background:white;

}