@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&display=swap');

:root{
    --bg:#050505;
    --bg2:#111111;

    --gold:#d4af37;
    --gold-light:#f4d978;

    --text:#ffffff;
    --gray:#bcbcbc;

    --glass:rgba(255,255,255,0.05);
    --border:rgba(255,255,255,0.1);

    --shadow:0 15px 40px rgba(0,0,0,.45);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Outfit',sans-serif;

    background:
    radial-gradient(circle at top left,#222 0%,#050505 50%);

    color:white;

    overflow-x:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:white;
}

section{
    padding:120px 8%;
}

/* =====================
NAVBAR
===================== */

nav{
    position:fixed;

    top:0;
    left:0;

    width:100%;

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

    padding:20px 8%;

    z-index:999;

    backdrop-filter:blur(20px);

    background:rgba(0,0,0,.3);

    border-bottom:1px solid rgba(255,255,255,.05);
}

.logo{
    width:50px;
    height:50px;

    border-radius:50%;

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

    font-weight:800;

    color:black;

    background:
    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light));
}

nav ul{
    display:flex;
    gap:35px;

    list-style:none;
}

nav a{
    transition:.3s;
    font-weight:500;
}

nav a:hover{
    color:var(--gold-light);
}

/* =====================
HOME HERO
===================== */

.hero{

    height:100vh;

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.8)),
    url("../images/Fussball1.png");

    background-size:cover;
    background-position:center;

    display:flex;
    align-items:center;

    padding:0 8%;
}

.hero-content{
    max-width:700px;
}

.club{
    color:var(--gold);

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:15px;

    display:block;
}

.hero h1{
    font-size:8rem;

    line-height:.9;

    font-weight:900;

    margin-bottom:15px;
}

.hero h2{
    color:var(--gold-light);

    margin-bottom:15px;
}

.hero p{
    font-size:1.2rem;

    color:#ddd;

    margin-bottom:35px;
}

.buttons{
    display:flex;
    gap:20px;
}

.buttons a{

    padding:15px 35px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;
}

.buttons a:first-child{

    background:
    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light));

    color:black;
}

.buttons a:first-child:hover{
    transform:translateY(-4px);
}

.buttons a:last-child{

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

.buttons a:last-child:hover{

    border-color:var(--gold);
}

/* =====================
PLAYER OVERVIEW
===================== */

.player-overview{

    display:grid;

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

    gap:20px;

    margin-top:-60px;

    position:relative;

    z-index:5;
}

.box{

    background:var(--glass);

    border:1px solid var(--border);

    backdrop-filter:blur(15px);

    padding:30px;

    border-radius:25px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;
}

.box:hover{
    transform:translateY(-5px);
}

.box h3{

    font-size:2rem;

    color:var(--gold);

    margin-bottom:10px;
}

.box p{
    color:var(--gray);
}

/* =====================
ABOUT PREVIEW
===================== */

.about-preview{

    display:grid;

    grid-template-columns:
    1.2fr .8fr;

    gap:60px;

    align-items:center;
}

.about-preview img{

    border-radius:30px;

    box-shadow:var(--shadow);
}

.about-preview h2{

    font-size:3rem;

    margin-bottom:20px;
}

.about-preview p{

    color:#d6d6d6;

    line-height:1.8;
}

/* =====================
STATISTIKEN
===================== */

.stats h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.stats-grid{

    display:grid;

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

    gap:25px;
}

.stat-card{

    background:var(--glass);

    border:1px solid var(--border);

    padding:40px;

    text-align:center;

    border-radius:25px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

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

.stat-card h3{

    font-size:3rem;

    color:var(--gold);

    margin-bottom:10px;
}

.stat-card p{
    color:var(--gray);
}

/* =====================
PAGE HEADER
===================== */

.page-header{

    padding-top:180px;
    padding-bottom:120px;

    text-align:center;

    background:
    linear-gradient(
    rgba(0,0,0,.6),
    rgba(0,0,0,.8)),
    url("../images/Fussball2.png");

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

.page-header h1{

    font-size:5rem;

    margin-bottom:15px;

    font-weight:900;
}

.page-header p{

    color:var(--gray);

    font-size:1.2rem;
}

/* =====================
PROFILE SECTION
===================== */

.profile-section{

    display:grid;

    grid-template-columns:
    .9fr 1.1fr;

    gap:60px;

    align-items:center;
}

.profile-image img{

    border-radius:35px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);
}

.profile-text h2{

    font-size:3rem;

    margin-bottom:25px;
}

.profile-text p{

    color:#d5d5d5;

    line-height:1.9;

    font-size:1.05rem;
}

/* =====================
INFO GRID
===================== */

.info-grid{

    display:grid;

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

    gap:25px;
}

.info-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:30px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.info-card:hover{
    transform:translateY(-6px);
}

.info-card h3{

    color:var(--gold);

    margin-bottom:12px;

    font-size:1.2rem;
}

.info-card p{

    color:#e0e0e0;
}

/* =====================
STÄRKEN
===================== */

.strengths h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.strength-grid{

    display:grid;

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

    gap:25px;
}

.strength-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.strength-card:hover{

    transform:translateY(-8px);
}

.strength-card h3{

    margin-bottom:15px;

    color:var(--gold-light);
}

.strength-card p{

    color:#d5d5d5;

    line-height:1.7;
}

/* =====================
ZIELE
===================== */

.goals h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.goal-list{

    display:grid;

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

    gap:25px;
}

.goal{

    display:flex;

    gap:20px;

    background:var(--glass);

    border:1px solid var(--border);

    padding:30px;

    border-radius:25px;

    backdrop-filter:blur(15px);
}

.goal span{

    min-width:60px;
    height:60px;

    border-radius:15px;

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

    font-weight:800;

    color:black;

    background:
    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light));
}

.goal p{

    color:#d5d5d5;

    line-height:1.8;
}

/* =====================
LIEBLINGSSPIELER
===================== */

.favorites h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.favorite-player{

    display:grid;

    grid-template-columns:
    .7fr 1.3fr;

    gap:40px;

    align-items:center;

    background:var(--glass);

    border:1px solid var(--border);

    padding:35px;

    border-radius:30px;

    backdrop-filter:blur(15px);
}

.favorite-player img{

    border-radius:25px;
}

.favorite-player h3{

    font-size:2rem;

    color:var(--gold);

    margin-bottom:15px;
}

.favorite-player p{

    color:#d5d5d5;

    line-height:1.8;
}

/* =====================
AUSRÜSTUNG
===================== */

.equipment h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.equipment-grid{

    display:grid;

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

    gap:25px;
}

.equipment-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.3s;
}

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

.equipment-card h3{

    color:var(--gold);

    margin-bottom:15px;
}

.equipment-card p{
    color:#d5d5d5;
}

/* =====================
FUSSBALL ALLTAG
===================== */

.daily-routine h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.timeline{

    max-width:900px;

    margin:auto;
}

.timeline-item{

    margin-bottom:35px;

    padding-left:40px;

    position:relative;
}

.timeline-item::before{

    content:"";

    width:16px;
    height:16px;

    border-radius:50%;

    background:var(--gold);

    position:absolute;

    left:0;
    top:8px;
}

.timeline-item h3{

    margin-bottom:10px;

    color:var(--gold-light);
}

.timeline-item p{

    color:#d5d5d5;
}

/* =====================
FUN FACTS
===================== */

.fun-facts h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.facts-grid{

    display:grid;

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

    gap:25px;
}

.fact-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:30px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.fact-card:hover{

    transform:translateY(-6px);
}

.fact-card{
    color:#d5d5d5;
}

/* =====================
NEXT PAGE BUTTON
===================== */

.next-page{

    text-align:center;
}

.next-page h2{

    margin-bottom:30px;

    font-size:2.5rem;
}

.next-page a{

    display:inline-block;

    padding:18px 40px;

    border-radius:50px;

    font-weight:700;

    color:black;

    background:
    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light));

    transition:.3s;
}

.next-page a:hover{

    transform:translateY(-5px);
}

/* =====================
KARRIERE INTRO
===================== */

.career-intro{

    display:grid;

    grid-template-columns:
    1.1fr .9fr;

    gap:60px;

    align-items:center;
}

.career-text h2{

    font-size:3rem;

    margin-bottom:25px;
}

.career-text p{

    color:#d5d5d5;

    line-height:1.9;

    margin-bottom:20px;
}

.career-image img{

    border-radius:30px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);
}

/* =====================
CAREER TIMELINE
===================== */

.timeline-section h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:70px;
}

.timeline-section .timeline{

    position:relative;

    max-width:1000px;

    margin:auto;

    padding-left:40px;
}

.timeline-section .timeline::before{

    content:"";

    position:absolute;

    left:8px;
    top:0;

    width:3px;
    height:100%;

    background:
    linear-gradient(
    var(--gold),
    transparent);
}

.timeline-card{

    position:relative;

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    margin-bottom:35px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.timeline-card:hover{

    transform:translateX(10px);
}

.timeline-card::before{

    content:"";

    position:absolute;

    left:-42px;
    top:35px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:var(--gold);

    box-shadow:0 0 20px var(--gold);
}

.timeline-card span{

    color:var(--gold);

    font-weight:700;

    letter-spacing:2px;
}

.timeline-card h3{

    margin:12px 0;

    font-size:1.7rem;
}

.timeline-card p{

    color:#d5d5d5;

    line-height:1.8;
}

/* =====================
SAISONEN
===================== */

.season-overview h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.season-grid{

    display:grid;

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

    gap:30px;
}

.season-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.season-card:hover{

    transform:translateY(-8px);
}

.season-card h3{

    color:var(--gold);

    margin-bottom:25px;

    font-size:1.8rem;
}

.season-card ul{

    list-style:none;
}

.season-card li{

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#d5d5d5;
}

/* =====================
ENTWICKLUNG
===================== */

.development h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.development-grid{

    display:grid;

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

    gap:25px;
}

.development-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.development-card:hover{

    transform:translateY(-8px);
}

.development-card h3{

    color:var(--gold-light);

    margin-bottom:15px;
}

.development-card p{

    color:#d5d5d5;

    line-height:1.8;
}

/* =====================
ERFOLGE
===================== */

.achievements h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.achievement-grid{

    display:grid;

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

    gap:25px;
}

.achievement-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:40px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.achievement-card:hover{

    transform:translateY(-10px);
}

.achievement-card{

    font-size:3rem;
}

.achievement-card h3{

    font-size:1.4rem;

    margin-top:20px;
    margin-bottom:10px;

    color:var(--gold);
}

.achievement-card p{

    font-size:1rem;

    color:#d5d5d5;

    line-height:1.7;
}

/* =====================
CAREER GALLERY
===================== */

.career-gallery h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.career-images{

    display:grid;

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

    gap:20px;
}

.career-images img{

    height:300px;

    object-fit:cover;

    border-radius:25px;

    border:1px solid var(--border);

    transition:.4s;
}

.career-images img:hover{

    transform:
    scale(1.05)
    translateY(-10px);
}

/* =====================
ZUKUNFTSZIELE
===================== */

.future-goals h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.future-container{

    display:grid;

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

    gap:30px;
}

.future-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    backdrop-filter:blur(15px);
}

.future-card h3{

    color:var(--gold);

    margin-bottom:25px;
}

.future-card ul{

    padding-left:20px;
}

.future-card li{

    margin-bottom:15px;

    color:#d5d5d5;
}

/* =====================
KARRIERE QUOTE
===================== */

.quote-section{

    text-align:center;
}

.quote-section h2{

    font-size:4rem;

    max-width:1000px;

    margin:auto;

    line-height:1.3;

    color:white;
}

/* =====================
GALERIE INTRO
===================== */

.gallery-intro{

    text-align:center;

    max-width:900px;

    margin:auto;
}

.gallery-intro h2{

    font-size:3rem;

    margin-bottom:25px;
}

.gallery-intro p{

    color:#d5d5d5;

    line-height:1.9;

    font-size:1.1rem;
}

/* =====================
FEATURED IMAGE
===================== */

.featured-image{

    position:relative;

    overflow:hidden;

    border-radius:35px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);
}

.featured-image img{

    width:100%;
    height:650px;

    object-fit:cover;
}

.featured-text{

    position:absolute;

    bottom:40px;
    left:40px;

    max-width:600px;

    padding:30px;

    border-radius:25px;

    backdrop-filter:blur(20px);

    background:rgba(0,0,0,.45);

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

.featured-text h2{

    font-size:2.5rem;

    margin-bottom:15px;
}

.featured-text p{

    color:#d5d5d5;

    line-height:1.8;
}

/* =====================
GALERIE GRID
===================== */

.gallery-grid{

    display:grid;

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

    gap:25px;
}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:25px;

    border:1px solid var(--border);

    cursor:pointer;
}

.gallery-item img{

    height:350px;

    object-fit:cover;

    transition:.5s;
}

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:flex-end;

    padding:25px;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.85));
}

.gallery-overlay h3{

    font-size:1.4rem;

    transform:translateY(20px);

    opacity:0;

    transition:.4s;
}

.gallery-item:hover img{

    transform:scale(1.1);
}

.gallery-item:hover .gallery-overlay h3{

    opacity:1;

    transform:translateY(0);
}

/* =====================
MEMORY SECTION
===================== */

.memory-section h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.memory-grid{

    display:grid;

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

    gap:25px;
}

.memory-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.memory-card:hover{

    transform:translateY(-8px);
}

.memory-card h3{

    color:var(--gold);

    margin-bottom:15px;
}

.memory-card p{

    color:#d5d5d5;

    line-height:1.8;
}

/* =====================
SOCIAL HERO
===================== */

.social-hero{

    display:grid;

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

    gap:25px;
}

.social-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:30px;

    padding:40px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.4s;
}

.social-card:hover{

    transform:
    translateY(-10px)
    scale(1.02);
}

.social-card h2{

    font-size:2rem;

    color:var(--gold);

    margin-bottom:15px;
}

.social-card p{

    color:#d5d5d5;

    margin-bottom:25px;

    line-height:1.8;
}

.social-card a{

    display:inline-block;

    padding:14px 30px;

    border-radius:50px;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--gold),
    var(--gold-light));

    color:black;

    transition:.3s;
}

.social-card a:hover{

    transform:translateY(-3px);
}

/* =====================
SOCIAL STATS
===================== */

.social-stats h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.social-stat-grid{

    display:grid;

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

    gap:25px;
}

.social-stat-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:40px;

    text-align:center;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.social-stat-card:hover{

    transform:translateY(-8px);
}

.social-stat-card h3{

    font-size:3.5rem;

    color:var(--gold);

    margin-bottom:10px;
}

.social-stat-card p{

    color:#d5d5d5;
}

/* =====================
KONTAKT
===================== */

.contact-section h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.contact-card{

    max-width:800px;

    margin:auto;

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:30px;

    padding:50px;

    text-align:center;

    backdrop-filter:blur(15px);
}

.contact-card p{

    color:#d5d5d5;

    font-size:1.1rem;

    line-height:2;
}

/* =====================
SPONSOREN
===================== */

.sponsors h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.sponsor-grid{

    display:grid;

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

    gap:25px;
}

.sponsor-card{

    background:var(--glass);

    border:1px solid var(--border);

    border-radius:25px;

    padding:45px;

    text-align:center;

    font-weight:600;

    color:#d5d5d5;

    backdrop-filter:blur(15px);

    transition:.3s;
}

.sponsor-card:hover{

    transform:translateY(-8px);

    color:var(--gold-light);
}

/* =====================
MEINE REISE
===================== */

.journey{

    text-align:center;

    max-width:1000px;

    margin:auto;
}

.journey h2{

    font-size:3rem;

    margin-bottom:25px;
}

.journey p{

    color:#d5d5d5;

    line-height:2;

    font-size:1.1rem;
}

/* =====================
SOCIAL LINKS
===================== */

.social-links h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;
}

.links-grid{

    display:grid;

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

    gap:25px;
}

.links-grid a{

    text-align:center;

    padding:25px;

    border-radius:20px;

    background:var(--glass);

    border:1px solid var(--border);

    backdrop-filter:blur(15px);

    transition:.3s;

    font-weight:600;
}

.links-grid a:hover{

    transform:translateY(-8px);

    color:var(--gold-light);

    border-color:var(--gold);
}

/* =====================
FOOTER
===================== */

footer{

    text-align:center;

    padding:70px 20px;

    background:#080808;

    border-top:1px solid rgba(255,255,255,.08);
}

footer h3{

    font-size:2rem;

    color:var(--gold);

    margin-bottom:10px;
}

footer p{

    color:#bcbcbc;
}

/* =====================
SCROLLBAR
===================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#080808;
}

::-webkit-scrollbar-thumb{

    background:
    linear-gradient(
    var(--gold),
    var(--gold-light));

    border-radius:20px;
}

/* =====================
ANIMATIONEN
===================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

.hero-content,
.page-header,
.box,
.stat-card,
.info-card,
.strength-card,
.goal,
.timeline-card,
.season-card,
.development-card,
.achievement-card,
.gallery-item,
.memory-card,
.social-card,
.social-stat-card,
.sponsor-card{

    animation:fadeUp .8s ease;
}

/* =====================
LARGE TABLET
===================== */

@media(max-width:1200px){

    .hero h1{
        font-size:6rem;
    }

    .player-overview{
        grid-template-columns:
        repeat(3,1fr);
    }

    .strength-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .equipment-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .achievement-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .career-images{
        grid-template-columns:
        repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .memory-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .sponsor-grid{
        grid-template-columns:
        repeat(2,1fr);
    }

    .links-grid{
        grid-template-columns:
        repeat(2,1fr);
    }
}

/* =====================
TABLET
===================== */

@media(max-width:992px){

    section{
        padding:100px 6%;
    }

    .hero{
        padding:0 6%;
    }

    .hero h1{
        font-size:5rem;
    }

    .about-preview,
    .profile-section,
    .career-intro,
    .favorite-player,
    .quote{

        grid-template-columns:1fr;
    }

    .info-grid{

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

    .goal-list{

        grid-template-columns:1fr;
    }

    .season-grid{

        grid-template-columns:1fr;
    }

    .development-grid{

        grid-template-columns:1fr;
    }

    .future-container{

        grid-template-columns:1fr;
    }

    .social-hero{

        grid-template-columns:1fr;
    }

    .social-stat-grid{

        grid-template-columns:1fr;
    }
}

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

@media(max-width:768px){

    nav{

        flex-direction:column;

        gap:20px;

        padding:20px;
    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;
    }

    .hero{

        text-align:center;

        justify-content:center;
    }

    .hero h1{

        font-size:4rem;
    }

    .hero h2{

        font-size:1.2rem;
    }

    .buttons{

        justify-content:center;

        flex-wrap:wrap;
    }

    .player-overview{

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

        margin-top:20px;
    }

    .page-header h1{

        font-size:3.5rem;
    }

    .info-grid{

        grid-template-columns:1fr;
    }

    .strength-grid{

        grid-template-columns:1fr;
    }

    .equipment-grid{

        grid-template-columns:1fr;
    }

    .facts-grid{

        grid-template-columns:1fr;
    }

    .gallery-grid{

        grid-template-columns:1fr;
    }

    .memory-grid{

        grid-template-columns:1fr;
    }

    .career-images{

        grid-template-columns:1fr;
    }

    .achievement-grid{

        grid-template-columns:1fr;
    }

    .featured-image img{

        height:400px;
    }

    .featured-text{

        left:20px;
        right:20px;
        bottom:20px;

        max-width:none;
    }
}

/* =====================
SMALL MOBILE
===================== */

@media(max-width:500px){

    section{
        padding:80px 5%;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero p{
        font-size:1rem;
    }

    .player-overview{
        grid-template-columns:1fr;
    }

    .box h3{
        font-size:1.6rem;
    }

    .stat-card h3{
        font-size:2.5rem;
    }

    .social-stat-card h3{
        font-size:2.5rem;
    }

    .page-header h1{
        font-size:2.8rem;
    }

    .featured-image img{
        height:300px;
    }

    .featured-text h2{
        font-size:1.8rem;
    }

    .quote-section h2{
        font-size:2rem;
    }

    .timeline-card{
        padding:25px;
    }

    .contact-card{
        padding:30px;
    }
}

/* =====================
EXTRA HOVER EFFECTS
===================== */

img{
    transition:.4s;
}

.profile-image img:hover,
.career-image img:hover,
.about-preview img:hover{

    transform:scale(1.02);
}

.favorite-player img:hover{

    transform:scale(1.03);
}

/* =====================
SELECTION COLOR
===================== */

::selection{

    background:var(--gold);

    color:black;
}