/* ==========================
      Royal RolePlay
      Applications CSS
========================== */



* {

box-sizing:border-box;

}



body {

margin:0;

background:#050505;

color:white;

font-family:tahoma, sans-serif;

}





/* Header */


.header {

width:90%;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 0;

}





.logo {

display:flex;

align-items:center;

gap:15px;

}



.logo img {

width:70px;

height:70px;

object-fit:contain;

}



.logo h2 {

color:#d4af37;

}





.back-btn {


background:#d4af37;

color:#000;

padding:12px 25px;

border-radius:12px;

text-decoration:none;

font-weight:bold;


}





/* Main */


.applications {


width:90%;

max-width:1200px;

margin:auto;

text-align:center;


}




.applications h1 {


font-size:40px;

color:#d4af37;


}




.applications p {


color:#aaa;


}





/* Cards */


.request-grid {


display:grid;

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

gap:25px;

margin-top:40px;


}





.request-card {


background:#111;

border:1px solid #222;

border-radius:25px;

padding:30px;

transition:.3s;


}




.request-card:hover {


transform:translateY(-8px);

border-color:#d4af37;


}





.request-card h2 {


color:#d4af37;

font-size:25px;


}





.request-card p {


color:#bbb;

height:50px;


}





.request-card button {


margin-top:20px;

padding:12px 30px;

border:none;

border-radius:12px;

background:#d4af37;

color:#000;

font-weight:bold;

cursor:pointer;


}





.request-card button:hover {


background:white;


}
/* ==========================
        Application Form
========================== */


.application-form {


margin-top:60px;

background:#111;

border:1px solid #222;

border-radius:25px;

padding:40px;

text-align:right;


}





.application-form h2 {


text-align:center;

color:#d4af37;

font-size:30px;

margin-bottom:30px;


}





.application-form label {


display:block;

color:#ddd;

margin:15px 0 8px;

font-weight:bold;


}





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


width:100%;

background:#080808;

border:1px solid #333;

border-radius:12px;

padding:15px;

color:white;

font-family:tahoma;

font-size:15px;


}





.application-form select {


cursor:pointer;


}





.application-form textarea {


height:120px;

resize:none;


}





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


outline:none;

border-color:#d4af37;


}





.send-request {


width:100%;

margin-top:25px;

padding:15px;

border:none;

border-radius:12px;

background:#d4af37;

color:#000;

font-size:16px;

font-weight:bold;

cursor:pointer;


}





.send-request:hover {


background:white;


}





/* Footer */


.footer {


margin-top:50px;

padding:30px;

text-align:center;


}





.footer a {


background:#d4af37;

color:#000;

padding:15px 35px;

border-radius:15px;

text-decoration:none;

font-weight:bold;


}





.footer a:hover {


background:white;


}
/* ==========================
        Leader Card
========================== */


.request-card.leader {


border:1px solid #d4af37;

background:

linear-gradient(
145deg,
#151515,
#080808
);


}



.request-card.leader h2 {


color:#ffd700;


}





/* ==========================
        Responsive
========================== */



@media(max-width:1000px){


.request-grid {


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


}


}





@media(max-width:650px){



.header {


flex-direction:column;

gap:20px;


}




.applications h1 {


font-size:30px;


}




.request-grid {


grid-template-columns:1fr;


}




.request-card {


padding:25px;


}





.application-form {


padding:25px;


}



.application-form h2 {


font-size:25px;


}



}