/* Menu Link Animations */
.nav-links a {
position: relative;
display: inline-block;

color: white;
text-decoration: none;
padding: 8px 0;

transition:
color 0.3s ease,
transform 0.3s ease;
}

/* Underline animation */
.nav-links a::after {
content: "";

position: absolute;
bottom: 0;
left: 0;

width: 0;
height: 2px;

background: #4da6ff;

transition: width 0.3s ease;
}

/* Desktop hover */
.nav-links a:hover {
color: #4da6ff;
transform: translateY(-2px);
}

.nav-links a:hover::after {
width: 100%;
}

/* Touch/keyboard feedback */
.nav-links a:active,
.nav-links a:focus-visible {
color: #4da6ff;
transform: scale(0.95);
}

/* Selected link */
.nav-links a.selected {
color: #4da6ff;
}

.nav-links a.selected::after {
width: 100%;
}

/* main{
    margin-left: 1%;
    margin-left: 1%;
} */
 /* ======================== ERROR PAGE ====================== */
 /* Loading Screen */

.loading-screen {
min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
color: white;
}

/* Spinning Loader */

.loader {
width: 45px;
height: 45px;
border: 4px solid #333;
border-top: 4px solid #4da6ff;
border-radius: 50%;

animation: spin 1s linear infinite;
}

@keyframes spin {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}
/* BACKGROUND IMAGE: FIXED

body {
    margin: 0;
    background: #000;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("./Images");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -1;
}

Error Page */

.error-page {
min-height: 70vh;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 20px;
}

.error-page h1 {
font-size: 150px;
margin: 0;
color: #0a4785c1;
}

.error-page h2 {
color: white;
margin: 10px 0;
}

.error-page p {
color: #aaa;
max-width: 400px;
}

.error-button {
margin-top: 20px;
padding: 12px 25px;
/* background: #4da6ff; */
/* color: white; */
text-decoration: none;
border-radius: 5px;
transition: 0.3s ease;
}
.error-button {
    animation:
      fadeIn 4.1s ease-out forwards,
     floatingButton 1.4s ease-in-out;
    
    /* animation: slideFromLeft 1s ease-out forwards */
}

.error-button:hover {
background: linear-gradient(
165deg,
#3d0101,
#930303 20%,
#2d2d2d
);
color: rgba(255, 255, 255, 0.893);
transform: translateY(-2px);
}
 /* ========================== BODY ======================= */
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.navbar {
    width: 100%;
    box-sizing: border-box;
}
.error-button{
    padding: 20px;
    border-width: 1mm;
    outline-color: rgb(190, 12, 12);
    outline: 1px;
    background: linear-gradient(
140deg,
#0f0f0f,
#2a2a2a 20%,
#151515
);

box-shadow: 0 4px 12px rgba(0, 0.5, 0.2, 0.4);

    outline-width: 2mm;
    color: red;
}
/* Welcome Section */

.welcome-section {
min-height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 40px 20px;
background: #0f0f0f;


background-image: url("./Images/background-img-gif5.1.gif");
background-size: cover;
background-position: center;
background-repeat: no-repeat;


position: relative;
isolation: isolate;
}

.welcome-section::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: -1;
}
.welcome-section h1 {
color: white;
font-size: clamp(32px, 6vw, 65px);
margin: 0 0 20px;
}

.welcome-section h1 span {
color: #0362fc;
}

.welcome-section p {
max-width: 500px;
color: #aaa;
font-size: 16px;
line-height: 1.7;
}

/* -------- Explore More Button ------------ */
.welcome-button {
margin-top: 20px;
padding: 12px 28px;
background: linear-gradient(
165deg,
#3d0101,
#930303 20%,
#6a0101
);
color: white;
text-decoration: none;
border-radius: 5px;
transition: 0.3s ease;
}

.welcome-button:hover {
margin-top: 20px;
padding: 12px 28px;
background: linear-gradient(
165deg,
#5c5c5c,
#d6d1d1 20%,
#292828
);
color: white;
text-decoration: none;
border-radius: 5px;
border-width: 5%;
border-style: solid;
border-color: white;
/* border-inline:solid; */
/* border-inline-color: black; */
transition: 0.3s ease;
}
/* Floating Button Effect */ 
 .welcome-button {
    animation: slideFromLeft 4.1s ease-out forwards,
     floatingButton 3s ease-in-out infinite;
    
    /* animation: slideFromLeft 1s ease-out forwards */
}
/* @keyframes slideButton {
    from {
        transform: translateX(-160px);
    }

    to {
        transform: translateX(0);
    }
} */
@keyframes floatingButton {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

















/* ===========================================================================
                            BACK TO TOP BUTTON
=========================================================================== */

#back-to-top {
    position: fixed;

    bottom: 25px;
    right: 20px;

    width: 50px;
    height: 50px;

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

    color: white;
    background: linear-gradient(
        135deg,
        #550000,
        #d00000
    );

    border: 2px solid #ff3030;
    border-radius: 50%;

    font-size: 20px;

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease,
        transform 0.4s ease,
        box-shadow 0.3s ease;

    z-index: 9998;
}

/* Visible state */

#back-to-top.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

/* Hover effect */

#back-to-top:hover {
    transform: translateY(-5px);

    box-shadow:
        0 0 15px rgba(220, 0, 0, 0.7);
}

/* Mobile sizing */

@media (max-width: 600px) {

    #back-to-top {
        width: 45px;
        height: 45px;

        right: 15px;
        bottom: 20px;

        font-size: 17px;
    }

}

/* --------- Elements slide in from the left --------- */
.animate-left {
    animation: slideFromLeft 1s ease-out forwards;
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-160px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/*-------- Staggered Animation ----------*/
.animate-left:nth-child(1) {
    animation-delay: 0.2s;
}

.animate-left:nth-child(2) {
    animation-delay: 0.5s;
}

.animate-left:nth-child(3) {
    animation-delay: 0.8s;
}

.animate-left:nth-child(4) {
    animation-delay: 1.1s;
}

.animate-left:nth-child(5) {
    animation-delay: 1.4s;
}

.animate-left:nth-child(6) {
    animation-delay: 1.7s;
}

.animate-left:nth-child(7) {
    animation-delay: 2.0s;
}

.animate-left:nth-child(8) {
    animation-delay: 2.3s;
}

.animate-left:nth-child(9) {
    animation-delay: 2.6s;
}
.animate-left:nth-child(10) {
    animation-delay: 2.9s;
}

.animate-left:nth-child(11) {
    animation-delay: 3.2s;
}

.animate-left:nth-child(12) {
    animation-delay: 3.5s;
}

.animate-left:nth-child(13) {
    animation-delay: 3.8s;
}

.animate-left:nth-child(14) {
    animation-delay: 4.1s;
}

.animate-left:nth-child(15) {
    animation-delay: 4.4s;
}

.animate-left:nth-child(16) {
    animation-delay: 4.7s;
}

.animate-left:nth-child(17) {
    animation-delay: 5.0s;
}

.animate-left:nth-child(18) {
    animation-delay: 5.3s;
}

.animate-left:nth-child(19) {
    animation-delay: 5.6s;
}

.animate-left:nth-child(20) {
    animation-delay: 5.9s;
}

.animate-left:nth-child(21) {
    animation-delay: 6.2s;
}

.animate-left:nth-child(22) {
    animation-delay: 6.5s;
}

.animate-left:nth-child(23) {
    animation-delay: 6.8s;
}

.animate-left:nth-child(24) {
    animation-delay: 7.1s;
}
.animate-left:nth-child(25) {
    animation-delay: 7.4s;
}

.animate-left:nth-child(26) {
    animation-delay: 7.7s;
}

.animate-left:nth-child(27) {
    animation-delay: 8.0s;
}

.animate-left:nth-child(28) {
    animation-delay: 8.3s;
}

.animate-left:nth-child(29) {
    animation-delay: 8.7s;
}

.animate-left:nth-child(30) {
    animation-delay: 8.8s;
}


/* Page entrance animation */
/* body {
    animation: pageEntrance 1.2s ease-in;
}

@keyframes pageEntrance {
    from {
        opacity: 0.4;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
} */
/*----------- Footer -----------*/
.lanfooter{
    /* behavior: left to right; */
    color: white;
    background-image: url(./Images/background-img-gif5.1base.gif);
    font-size: small;
    bottom: 0;
}
.site-footer {
    background: #080808;
    color: white;
    text-align: center;
    padding: 40px 20px 20px;
    border-top: 1px solid #333;
}

.footer-content h2 {
    color: #c1121e92;
    letter-spacing: 2px;
}

.footer-content p {
    color: #aaa;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    margin: 25px 0;
}

.footer-links a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #FF3030;
}

.footer-bottom {
    border-top: 1px solid #222;
    padding-top: 15px;
    font-size: 13px;
    color: #777;
}



/* ===================================================
================== PAGES ==========================
=================================================== */

/* =========================
   ABOUT PAGE
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}
.about-page {
    min-height: 100vh;
    padding-bottom: 60px;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 0.85)
        ),
        url("./Images/background-img-gif2.gif");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: sticky;

    color: white;
}


/* GENERAL HEADINGS */

.about-page h2 {
    margin-bottom: 25px;

    font-size: clamp(24px, 4vw, 38px);
    letter-spacing: 2px;
    text-align: center;
}

.about-page h2 span,
.about-hero h1 span {
    color: #d00000;
}

.about-page p {
    color: #d0d0d0;
    line-height: 1.8;
}


/* HERO */

.about-hero {
    text-align: center;
    padding: 100px 20px 70px;
}

.about-hero h1 {
    font-size: clamp(30px, 6vw, 65px);
    letter-spacing: 3px;
}

.about-hero p {
    font-size: 17px;
}


/* INTRODUCTION AND SECTIONS */

.about-introduction,
.about-section {
    width: min(100% - 40px, 950px);
    margin: 0 auto 80px;

    padding: 35px;

    background: rgba(10, 10, 10, 0.8);
    border-left: 4px solid #a00000;

    border-radius: 8px;
    box-shadow: 0 0 25px rgba(100, 0, 0, 0.2);
}

.about-introduction strong {
    color: #ff3030;
}


/* ADMINISTRATIVE TEAM */

.administrative-section {
    width: min(100% - 30px, 1250px);
    margin: 0 auto 80px;
}

.admin-grid {
    display: grid;

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

    gap: 30px;
}


/* ADMIN CARDS */

.admin-card {
    position: relative;

    padding: 18px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #242424,
            #0b0b0b
        );

    border: 1px solid #383838;
    border-radius: 12px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.admin-card:hover {
    transform: translateY(-8px);

    border-color: #b00000;

    box-shadow:
        0 0 15px rgba(180, 0, 0, 0.35);
}


/* ROLE */

.role {
    color: #ff3030 !important;

    font-size: 14px;
    font-weight: bold;

    letter-spacing: 2px;
}


/* IMAGE */

.card-top img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    margin: 15px auto;

    border: 2px solid #555;
    border-radius: 8px;

    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.admin-card:hover .card-top img {
    transform: scale(1.04);
    filter: brightness(1.12);
}


/* NAME */

.card-top h3 {
    margin: 12px 0 18px;

    font-size: 27px;
    letter-spacing: 3px;
}
.kgr-text{
    font-style: none;
    color: rgba(255, 57, 209, 0.979);
}

/* SEE MORE BUTTON */

.see-more,
.apply-button,
.card-link {
    display: inline-block;

    cursor: pointer;

    border: none;
    border-radius: 6px;

    text-decoration: none;
    font-weight: bold;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.see-more {
    width: 100%;

    padding: 13px;

    color: white;

    background:
        linear-gradient(
            90deg,
            #333,
            #8b0000,
            #333
        );

    background-size: 200% 100%;
}

.see-more:hover {
    transform: scale(1.03);

    box-shadow: 0 0 18px rgba(220, 0, 0, 0.45);
}


/* HIDDEN EXTRA TEXT */

/* Collapsed extra content */
.card-extra {
    max-height: 0;
    overflow: hidden;
    opacity: 0;

    margin-top: 0;

    transition:
        max-height 0.5s ease,
        opacity 0.4s ease,
        margin-top 0.4s ease;
}

/* Expanded extra content */
.admin-card.expanded .card-extra {
    max-height: 600px;
    opacity: 1;
    margin-top: 15px;
}

.card-extra p {
    font-size: 14px;
    text-align: left;
}

.card-extra strong {
    color: #ff3030;
}


/* CARD LINKS */

.card-link {
    margin-top: 12px;
    padding: 10px 15px;

    color: white;
    background: #850000;
}

.card-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
}


/* SPONSOR */

.sponsor-caption p {
    font-size: 14px;
}

.apply-button {
    margin-top: 18px;
    padding: 13px 20px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #222,
            #a00000,
            #d00000,
            #700000
        );

    background-size: 250% 250%;

    animation: sponsorGradient 5s ease infinite,
    floatingButton 1.4s ease-in-out;
}
@keyframes floatingButton {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}



.apply-button:hover {
    transform: scale(1.04);

    box-shadow: 0 0 20px rgba(220, 0, 0, 0.5);
}

@keyframes sponsorGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================
   CONTACT FORM
========================= */

.contact-section {
    width: min(100% - 35px, 850px);
    margin: 0 auto;

    padding: 35px;

    background: white;

    color: #111;

    border: 3px solid #850000;
    border-radius: 8px;
}

.contact-section h2 {
    color: #111;
}

.contact-section h2 span {
    color: #a00000;
}

.contact-section p {
    color: #444;
    text-align: center;
}

.contact-form {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 30px;
}

.contact-form label {
    font-weight: bold;
    color: #222;
}

.contact-form input,
.contact-form textarea {
    width: 100%;

    padding: 14px;

    font: inherit;

    color: #111;
    background: #fff;

    border: 1px solid #999;
    border-radius: 4px;

    outline: none;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #a00000;

    box-shadow:
        0 0 8px rgba(160, 0, 0, 0.25);
}

.contact-form textarea {
    resize: vertical;
}


/* SEND BUTTON */

.send-button {
    margin-top: 15px;

    padding: 16px;

    color: white;

    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;

    cursor: pointer;

    border: none;

    background:
        linear-gradient(
            135deg,
            #650000,
            #b00000,
            #e00000,
            #650000
        );

    background-size: 300% 300%;

    animation: sendGradient 5s ease infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.send-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 20px rgba(180, 0, 0, 0.5);
}

@keyframes sendGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================
   MOBILE RESPONSIVENESS
========================= */

@media (max-width: 600px) {

    .about-hero {
        padding: 70px 15px 50px;
    }

    .about-introduction,
    .about-section,
    .contact-section {
        padding: 25px 20px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .admin-card {
        max-width: 430px;
        width: 100%;
        margin: auto;
    }

    .card-top img {
        max-height: 400px;
    }

}



/* =========================
   SOCIALS PAGE
========================= */

/* =========================
   SOCIALS PAGE
========================= */

.socials-page {
    min-height: 100vh;
    padding-bottom: 70px;

    color: white;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.88)
        ),
        url("./Images/background-img-gif4.gif");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    
}


/* HERO */

.socials-hero {
    padding: 90px 20px 50px;
    text-align: center;
}

.socials-hero h1 {
    font-size: clamp(32px, 6vw, 60px);
    letter-spacing: 3px;
}

.socials-hero h1 span,
.join-section h2 span,
.application-box h2 span,
.success-box h2 span {
    color: #d00000;
}

.socials-hero p {
    color: #ccc;
    font-size: 18px;
}


/* SOCIAL LINKS */

.social-links-section {
    display: grid;

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

    gap: 20px;

    width: min(100% - 35px, 950px);

    margin: 0 auto 90px;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 20px;

    color: white;
    text-decoration: none;

    /* background:
        linear-gradient(
            135deg,
            #222,
            #111
        ); */

        background-image: url(./Images/background-img-gif1.gif);

    border: 1px solid #444;
    border-left: 4px solid #a00000;
    border-radius: 8px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.social-card > span {
    flex: 1;
}

.social-card > i:first-child {
    font-size: 25px;
}

.social-card > i:last-child {
    font-size: 13px;
    color: #aaa;
}

.social-card:hover {
    transform: translateX(8px);

    border-color: #e00000;

    box-shadow:
        0 0 18px rgba(200, 0, 0, 0.3);
}


/* JOIN SECTION */

.join-section {
    width: min(100% - 35px, 850px);

    margin: auto;
    padding: 45px 25px;

    text-align: center;

    background: rgba(15, 15, 15, 0.9);

    border: 1px solid #600000;
    border-radius: 10px;
}

.join-section h2 {
    font-size: clamp(23px, 4vw, 35px);
}

.join-section p {
    color: #ccc;
    line-height: 1.7;
}


/* BUTTONS */

.apply-now-button,
.submit-application-button {
    padding: 14px 25px;

    color: white;
    font-weight: bold;
    font-size: 15px;

    cursor: pointer;

    border: none;
    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #550000,
            #c00000,
            #850000
        );

    background-size: 250% 250%;

    animation: applicationGradient 5s ease infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.apply-now-button {
    margin-top: 20px;
    background:
        linear-gradient(
            135deg,
            #550000,
            #c00000,
            #850000
        );

    background-size: 250% 250%;

    animation: applicationGradient 5s ease infinite;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.apply-now-button:hover{
        /* Hover */
        margin-top: 20px;
padding: 12px 28px;
background: linear-gradient(
165deg,
#5c5c5c,
#d6d1d1 20%,
#292828
);
color: white;
text-decoration: none;
border-radius: 5px;
border-width: 5%;
border-style: solid;
border-color: white;
/* border-inline:solid; */
/* border-inline-color: black; */
transition: 0.3s ease;
}

.apply-now-button:hover,
.submit-application-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 20px rgba(220, 0, 0, 0.5);
}

@keyframes applicationGradient {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* =========================
   APPLICATION MODAL
========================= */

.application-modal,
.success-modal {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: none;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.application-modal.active,
.success-modal.active {
    display: flex;
}

.application-box,
.success-box {
    position: relative;

    width: min(100%, 600px);
    max-height: 90vh;

    overflow-y: auto;

    padding: 30px;

    color: #111;

    background: white;

    border: 3px solid #850000;
    border-radius: 10px;

    animation: modalEntrance 0.4s ease-out;
}

@keyframes modalEntrance {

    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* CLOSE BUTTON */

.close-modal {
    position: absolute;

    top: 10px;
    right: 15px;

    color: #800000;

    font-size: 30px;

    cursor: pointer;

    border: none;
    background: transparent;
}


/* FORM */

.application-box h2,
.success-box h2 {
    text-align: center;
    margin-bottom: 25px;
}

#application-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#application-form label {
    font-weight: bold;
}

#application-form input[type="text"] {
    width: 100%;

    padding: 12px;

    box-sizing: border-box;

    border: 1px solid #999;
    border-radius: 5px;
}

#application-form fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin: 10px 0;
    padding: 15px;

    border: 1px solid #bbb;
    border-radius: 5px;
}

#application-form legend {
    font-weight: bold;
}

#application-form fieldset label {
    font-weight: normal;
    font-size: 14px;
}

#application-form input[type="radio"],
#application-form input[type="checkbox"] {
    accent-color: #a00000;
}


/* STATUS */

.form-status {
    text-align: center;
    font-size: 14px;
    color: #a00000;
}


/* SUCCESS MODAL */

.success-box {
    text-align: center;
}

.success-box p {
    line-height: 1.7;
    color: #444;
}

.success-box strong {
    color: #a00000;
}

.success-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;

    margin-top: 25px;
}

.yes-button,
.back-button {
    padding: 12px 25px;

    border: none;
    border-radius: 5px;

    font-weight: bold;
    cursor: pointer;

    transition: transform 0.3s ease;
}

.yes-button {
    color: white;
    background: #008000;
}

.back-button {
    color: white;
    background: #850000;
}

.yes-button:hover,
.back-button:hover {
    transform: translateY(-3px);
}


/* MOBILE */

@media (max-width: 600px) {

    .social-links-section {
        grid-template-columns: 1fr;
    }

    .social-card {
        padding: 17px;
    }

    .application-box,
    .success-box {
        padding: 25px 20px;
    }

    .success-buttons {
        flex-direction: column;
    }

    .yes-button,
    .back-button {
        width: 100%;
    }

};





/* =====================================================================================================
======================== OVERVIEW PAGE ================================================================
===================================================================================================== */
/* ========== OVERVIEW HERO ========== */
.overview-page {
    min-height: 100vh;
    padding-bottom: 70px;

    color: white;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.88)
        ),
        url("./Images/background-img-gif2.gif");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.overview-hero {
  height: 60vh;
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("./Images/background-image2.jpg") center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.overview-hero h1 {
  font-size: 3.5rem;
  margin-bottom: 10px;
}
.overview-hero p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* ========== HALL OF FAME ========== */
.hall-of-fame {
  padding: 80px 20px;
  background: #0d0d0d;
}
.section-header {
  text-align: center;
  margin-bottom: 50px;
}
.section-header h2 {
  font-size: 2.5rem;
}
.section-header .white { color: white; }
.section-header .red { color: #c41e3a; }
.hof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}
.hof-card {
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
}
.hof-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.hof-info {
  padding: 15px;
  color: white;
}

/* ========== TEAMS (from previous) ========== */
.teams-section {
  position: relative;
  min-height: 100vh;
  background: url("../Images/teams-bg.gif") center/cover no-repeat fixed;
  padding: 80px 20px;
}
.page-blur-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(18px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.8s ease;
}
.page-blur-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.view-page-btn {
  padding: 16px 50px;
  font-size: 1.3rem;
  background: linear-gradient(135deg, #c41e3a, #8b0000);
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 600;
}
.team-block {
  margin-bottom: 80px;
  opacity: 0;
  transform: translateX(-60px);
  transition: 0.8s ease;
}
.team-block.show {
  opacity: 1;
  transform: translateX(0);
}
.team-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}
.team-logo { width: 80px; height: 80px; object-fit: contain; }
.team-name { font-size: 2.4rem; color: white; margin: 0; }
.team-sub { color: #c41e3a; margin: 4px 0 0; }
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}
.player-card {
  background: rgba(20,20,20,0.9);
  border: 1px solid rgba(196,30,58,0.3);
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
}
.player-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(196,30,58,0.25);
}
.player-img { width: 100%; height: 220px; object-fit: cover; }
.player-info { padding: 20px; color: #eee; }
.player-name { font-size: 1.25rem; margin: 0 0 12px; color: white; }
.team-tag { color: #c41e3a; }
.player-buttons { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.tiktok-btn, .view-profile-btn {
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tiktok-btn { background: #000; color: white; }
.view-profile-btn {
  background: transparent;
  color: #c41e3a;
  border: 1.5px solid #c41e3a;
}
.view-profile-btn:hover { background: #c41e3a; color: white; }