/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    overflow-x:hidden;
}
html {
    scroll-behavior: smooth;
}
/*Login*/
#loginPage{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background: linear-gradient(to bottom, #d2b48c, #f5f5dc);
}
.login-box {
    width: 320px;
    padding: 30px;

    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);

    border-radius: 16px;
    color: white;
    text-align: center;

    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
}

.login-box input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;

    border-radius: 6px;
    border: none;
    outline: none;
}

.login-box input:focus {
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
}
.login-box button {
    margin: 5px;
    padding: 10px 16px;

    border: none;
    border-radius: 8px;

    background: linear-gradient(to right, #ffffff, #cfcfcf);
    font-weight: 600;

    cursor: pointer;
    transition: all 0.2s ease;
}

.login-box button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.login-box button:active {
    transform: scale(0.95);
}
/* BODY */
body {
    margin: 0;
    background: linear-gradient(to bottom, #d2b48c, #e6d3a3);
    font-family: 'Segoe UI', sans-serif;
    font-size:16px;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* NAVBAR */
.navbar{
    width:100%;
    height:80px;
    padding:0 40px;

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

    background:linear-gradient(to right, black, #444);
    color:burlywood;
}

/* LEFT SIDE */
.nav-left{
    display:flex;
    align-items:center;
    gap:40px;
}

.logo{
    font-size:1.5rem;
}

.nav-links{
    display:flex;
    gap:25px;
    list-style:none;
}

.nav-links a{
    color:burlywood;
    text-decoration:none;
    transition:0.3s;
}

.nav-links a:hover{
    opacity:0.7;
    background: lightgreen;
}

/* RIGHT SIDE */
.nav-right{
    display:flex;
    align-items:center;
}
/* =========================
   ACTIVE USERS
========================= */

.active-users{
    display:flex;
    align-items:center;

    gap:10px;

    background:
        rgba(255,255,255,0.08);

    padding:10px 16px;

    border-radius:999px;

    margin-right:20px;

    font-size:0.95rem;

    backdrop-filter:blur(8px);
}

/* DOT */
.online-dot{
    width:10px;
    height:10px;

    background:#22c55e;

    border-radius:50%;

    animation:pulseDot 1.8s infinite;
}

/* PULSE */
@keyframes pulseDot{

    0%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:0.5;
        transform:scale(1.3);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}
/* PROFILE */
.profile-container{
    position:relative;
}

.profile-btn{
    display:flex;
    align-items:center;
    gap:12px;

    background:none;
    border:none;
    color:white;
    cursor:pointer;
}
/* PROFILE IMAGES */
.profile-image,
.dropdown-profile-image{
    width:42px;
    height:42px;

    border-radius:50%;
    object-fit:cover;

    display:none;
}

.dropdown-profile-image{
    width:50px;
    height:50px;
}

/* FALLBACK AVATARS */
.avatar,
.dropdown-avatar{
    width:42px;
    height:42px;

    border-radius:50%;

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

    background:#3b82f6;
    color:white;
    font-weight:bold;
}
/* UPLOAD BUTTON */
.upload-btn{
    background:rgba(255,255,255,0.08);
    padding:10px;
    border-radius:10px;

    text-align:center;
    cursor:pointer;

    transition:0.25s;
}

.upload-btn:hover{
    background:rgba(255,255,255,0.14);
}

/* AVATAR */
.avatar,
.dropdown-avatar{
    width:42px;
    height:42px;

    border-radius:50%;

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

    background:#3b82f6;
    font-weight:bold;
}

.profile-name{
    font-size:0.95rem;
}

/* DROPDOWN */
.profile-dropdown{
    position:absolute;
    top:65px;
    right:0;

    width:260px;

    background:rgba(17,24,39,0.95);

    backdrop-filter:blur(12px);

    border-radius:16px;

    padding:18px;

    display:none;
    flex-direction:column;
    gap:10px;

    box-shadow:0 10px 30px rgba(0,0,0,0.3);

    z-index:1000;
}

/* SHOW DROPDOWN */
.profile-dropdown.active{
    display:flex;
}

/* HEADER */
.dropdown-header{
    display:flex;
    align-items:center;
    gap:14px;
}

.dropdown-header h4{
    margin-bottom:3px;
}

.dropdown-header p{
    font-size:0.85rem;
    opacity:0.7;
}

/* DIVIDER */
.dropdown-divider{
    width:100%;
    height:1px;
    background:rgba(255,255,255,0.1);

    margin:8px 0;
}

/* LINKS */
.profile-dropdown a{
    text-decoration:none;
    color:white;

    padding:10px;
    border-radius:10px;

    transition:0.25s;
}

.profile-dropdown a:hover{
    background:rgba(255,255,255,0.08);
}

.logout:hover{
    background:rgba(239,68,68,0.2);
}
/* =========================
   SETTINGS MODAL
========================= */

.settings-modal{
    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:10000;

    backdrop-filter:blur(6px);
}

.settings-modal.active{
    display:flex;
}

/* CONTENT */
.settings-content{
    background:white;

    width:min(90%, 450px);

    padding:35px;

    border-radius:28px;

    position:relative;

    animation:settingsPop 0.25s ease;
}

/* CLOSE */
.close-settings{
    position:absolute;

    top:15px;
    right:20px;

    font-size:2rem;

    cursor:pointer;
}

/* GROUPS */
.settings-group{
    margin:25px 0;
}

.settings-group label{
    display:block;

    margin-bottom:8px;

    font-weight:600;
}

/* INPUTS */
.settings-group input,
.settings-group select{
    width:100%;

    padding:14px;

    border-radius:12px;

    border:1px solid #ccc;

    font-size:1rem;
}

/* ANIMATION */
@keyframes settingsPop{

    from{
        transform:scale(0.9);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}
/* =========================
   PROFILE PAGE
========================= */

.profile-page{
    width:min(95%, 1000px);

    margin:60px auto;

    padding:40px;

    background:
        rgba(255,255,255,0.12);

    backdrop-filter:blur(12px);

    border-radius:30px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.15);
}

/* HEADER */
.profile-header{
    display:flex;
    align-items:center;

    gap:25px;

    margin-bottom:40px;
}

/* IMAGE */
.profile-page-image{
    width:120px;
    height:120px;

    border-radius:50%;

    object-fit:cover;

    background:#ddd;
}

/* NAME */
.profile-header h2{
    font-size:2rem;

    margin-bottom:5px;
}

/* RANK */
#profilePageRank{
    opacity:0.75;

    font-size:1.1rem;
}

/* STATS */
.profile-stats{
    display:grid;

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

    gap:20px;

    margin-bottom:35px;
}

.profile-stat{
    background:
        rgba(255,255,255,0.08);

    border-radius:20px;

    padding:25px;

    text-align:center;
}
.profile-stat h3{
    font-size:1.2rem;
    opacity:0.75;
    margin-bottom:10px;
}

/* GOAL */
.profile-goal{
    background:
        rgba(255,255,255,0.08);

    padding:25px;

    border-radius:20px;
}
.profile-goal h3{
    margin-bottom:10px;
    font-size:1.4rem;
}

/* ACHIEVEMENTS */
.profile-achievements{
    background:
        rgba(255,255,255,0.08);

    padding:25px;

    border-radius:20px;
}
.profile-achievements h3{
    margin-bottom:20px;
    font-size:1.4rem;
}

/* MOBILE */
@media (max-width:768px){

    .profile-page{
        padding:25px;
    }

    .profile-header{
        flex-direction:column;

        text-align:center;
    }

    .profile-page-image{
        width:100px;
        height:100px;
    }
}
/*Dashboard*/
.dashboard {
    padding: 40px 20px;
    text-align: center;

    background: rgba(0,0,0,0.05);
    border-radius: 12px;

    margin: 40px auto;
    max-width: 900px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    margin: 30px auto 10px auto; /* tighter spacing */
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.dash-card {
    background: linear-gradient(to right, black, #444);
    color: burlywood;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.dash-card h3 {
    font-size: 14px;
    opacity: 0.7;
}

.dash-card p {
    font-size: 22px;
    margin-top: 10px;
}

/* HERO SECTION */
.hero {
    display: flex;
    justify-content: space-between;
    align-items: center;

    max-width: 1100px;
    margin: 40px auto;

    padding: 60px 40px; /* 🔥 fixed */

    gap: 40px;
    flex-wrap: wrap;

    border-radius: 15px;
    border: 2px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);

    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
}

.hero-text {
    max-width: 500px;
    flex: 1;
}

.hero-text h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}
/* CALL TO ACTION BUTTON */
.cta-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 14px 28px;
    background: linear-gradient(to right, black, #444);
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* Hover effect */
.cta-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

/* Click feel */
.cta-btn:active {
    transform: scale(0.98);
}

/* SOCIAL ICONS */
.hero-links {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.hero-links img {
    width: 35px;
    height: 35px;
    transition: 0.2s ease;
}

.hero-links img:hover {
    transform: scale(1.2);
}

/* HERO IMAGE */
.hero-image img {
    width: 420px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* CONTAINER */
.container {
    display:grid;

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

    gap:28px;

    padding:40px 8%;
}
/*Rest-Timer*/
.timer-box {
    background: linear-gradient(to right, black, #444);
    color: white;
    padding: 20px;
    border-radius: 12px;
    width: 250px;
    margin: 20px auto;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

#timerDisplay {
    font-size: 32px;
    margin: 10px 0;
}
/*Achievements*/
.achievements-box {
    background: linear-gradient(to right, black, #444);
    color: white;
    padding: 20px;
    border-radius: 12px;
    width: 300px;
    margin: 20px auto;
}
.achievements-box h3 {
    text-align: center;
    margin-bottom: 20px;
}

.achievements-box li {
    margin: 20px;
}
.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.achievement-card {
    width: 140px;
    padding: 15px;
    border-radius: 12px;
    text-align: center;
    background: linear-gradient(to right, black, #444);
    color: white;
    transition: 0.3s;
}

.achievement-card.locked {
    opacity: 0.4;
    filter: grayscale(100%);
}

.achievement-card.unlocked {
    box-shadow: 0 0 15px #00ffcc;
}
/* =========================
   ACHIEVEMENT TOAST
========================= */

.achievement-toast{
    position:fixed;

    bottom:30px;
    right:30px;

    background:#111;

    color:white;

    padding:20px 25px;

    border-radius:18px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.25);

    transform:
        translateY(120px);

    opacity:0;

    transition:0.4s ease;

    z-index:9000;
}

/* ACTIVE */
.achievement-toast.active{
    transform:translateY(0);

    opacity:1;
}

.achievement-toast h3{
    margin-bottom:5px;
}
/* =========================
   LEVEL UP
========================= */

.levelup-overlay{
    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:9500;

    backdrop-filter:blur(5px);
}

.levelup-overlay.active{
    display:flex;
}

/* BOX */
.levelup-box{
    background:white;

    padding:50px;

    border-radius:30px;

    text-align:center;

    animation:levelPop 0.4s ease;
}

.levelup-box h1{
    font-size:3rem;

    margin-bottom:15px;
}

@keyframes levelPop{

    from{
        transform:scale(0.7);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}
/* =========================
   COACH INSIGHT
========================= */

.recommendation-card{
    border:
        1px solid rgba(255,255,255,0.15);
}

#coachInsight{
    line-height:1.7;

    font-size:1rem;

    opacity:0.9;
}
/* WORKOUT HISTORY */
.history-box{
    background:rgba(255,255,255,0.15);
    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:25px;

    width:min(90%, 700px);

    margin:30px auto;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.15);
}

.history-box h3{
    margin-bottom:20px;
}

.history-item{
    background:rgba(255,255,255,0.08);

    padding:14px 18px;

    border-radius:14px;

    margin-bottom:12px;

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

    transition:0.25s;
}

.history-item:hover{
    transform:translateX(4px);
}
/* MODERN WORKOUT CARDS */
.box::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        to right,
        #c19a6b,
        #f5deb3
    );
}
.box{
    position:relative;

    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(12px);

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

    border-radius:24px;

    padding:30px;

    color:#111;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.12);

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

    overflow:hidden;
}
.box h3{
    font-size:1.7rem;
    margin-bottom:18px;

    color:#111;
    font-weight:700;
}
.box p,
.box li{
    color:#333;
    line-height:1.7;
    font-size:0.98rem;
}
/* HOVER */
.box:hover{
    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.18);

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

/* IMAGE ROW */
.img-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.img-row img{
    width:90px;
    height:90px;
    cursor:zoom-in;

    object-fit:cover;

    border-radius:16px;

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

    cursor:pointer;

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

.img-row img:hover{
    transform:scale(1.08);

    box-shadow:
        0 10px 20px rgba(0,0,0,0.2);
}
/* IMAGE MODAL */
.image-modal{
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    display:none;

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

    z-index:5000;

    backdrop-filter:blur(6px);

    animation:fadeIn 0.25s ease;
}

/* ACTIVE */
.image-modal.active{
    display:flex;
}

/* MODAL IMAGE */
#modalImage{
    max-width:80%;
    max-height:80%;

    border-radius:20px;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.4);

    animation:zoomIn 0.25s ease;
    position:relative;
    z-index:5001;
}

/* CLOSE BUTTON */
.close-modal{
    position:absolute;

    top:25px;
    right:35px;

    font-size:3rem;

    color:white;

    cursor:pointer;

    transition:0.25s;
}

.close-modal:hover{
    transform:scale(1.1);
}

/* ANIMATIONS */
@keyframes fadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes zoomIn{
    from{
        transform:scale(0.8);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}
/* EXERCISE LIST */
.exercise-list{
    margin-top:20px;

    display:flex;
    flex-direction:column;

    gap:14px;
}

.exercise-list li{
    list-style:none;

    background:
        rgba(255,255,255,0.08);

    padding:14px 18px;

    border-radius:16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    transition:0.25s ease;
}

.exercise-list li:hover{
    transform:translateX(4px);
}

.exercise-list strong{
    font-weight:600;
}

.exercise-list span{
    opacity:0.75;

    font-size:0.9rem;
}

/* LIST */
.box ul {
    margin-top: 10px;
    padding-left: 20px;
}

.box li {
    margin-bottom: 5px;
}

/* LARGE IMAGE (Motivation section) */
.large-img {
    width: 100%;
    max-width: 500px;
    margin: 10px 0;
    border-radius: 10px;
}

/* REVIEWS */
/* REVIEWS SECTION WRAPPER */
.reviews-section {
    padding: 80px 10%;
    text-align: center;
}

/* TITLE */
.reviews-title {
    background: linear-gradient(to right, darkgray, black);
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: bold;
    color: whitesmoke;
    letter-spacing: 0.5px;
}


.reviews-slider {
    position: relative;
    max-width: 700px;
    margin: 50px auto;
    overflow: hidden;
    padding: 30px 0;
}

.reviews-track {
    display: flex;
    transition: transform 0.4s ease;
}

.slide {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Make review cards bigger */
.review-card img {
    width: 90%;
    max-width: 600px;
    border-radius: 15px;
    display: block;
}

/* Arrows */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(to right, black, #444);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }
/* CONTACT */
/* CONTACT SECTION WRAPPER */
.contact-section {
    padding: 80px 10%;
    display: flex;
    justify-content: center;
}

/* CARD STYLE (matches your site) */
.contact-card {
    background: linear-gradient(to right, black, #444);
    color: white;
    padding: 30px;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    text-align: center;
}

/* TEXT */
.contact-card h2 {
    margin-bottom: 10px;
}

.contact-card p {
    margin-bottom: 20px;
    color: #ddd;
}

/* EMAIL ROW */
.contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

/* EMAIL LINK */
.contact-info a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.contact-info a:hover {
    text-decoration: underline;
}
.team-section {
    text-align: center;
    padding: 60px 20px;
}

.section-title {
    font-size: 28px;
    margin-bottom: 30px;
}

.team-container {
    display: flex;
    justify-content: center;
    gap: 100px;
    background: rgba(0, 0, 0, 0.05);
    border: 3px solid black;
    border-radius: 10px;
    flex-wrap: wrap;
}

.team-card {
    background: linear-gradient(to right, black, #444);
    color: white;
    padding: 20px;
    margin: 20px;
    border-radius: 12px;
    width: 220px;
}
.team-card h3{
    font-weight: bold;

}
.team-card h3::first-letter{
    color:#c19a6b
}
.team-card p{
    margin-bottom: 10px;
}

.team-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}
.section-title {
    text-align: center;
}
/* =========================
   FOOTER
========================= */

.footer{
    background:
        linear-gradient(
            to right,
            #000,
            #2e2e2e
        );

    color:white;

    padding:50px 20px;

    text-align:center;
}

/* TITLE */
.footer h2{
    margin-bottom:12px;

    font-size:2rem;

    color:#e0b57a;
}

/* TAGLINE */
.footer-tagline{
    opacity:0.8;

    margin-bottom:30px;

    line-height:1.7;
}

/* LINKS */
.footer-links{
    display:flex;

    justify-content:center;

    gap:25px;

    margin-bottom:25px;

    flex-wrap:wrap;
}

.footer-links a{
    color:white;

    text-decoration:none;

    transition:0.25s;
}

.footer-links a:hover{
    opacity:0.7;
}

/* CONTACT */
.footer-contact{
    margin-bottom:20px;

    opacity:0.85;
}

/* COPYRIGHT */
.footer-copy{
    opacity:0.55;

    font-size:0.9rem;
}
/*Progress Bar*/
.progress-bar {
    width: 100%;
    height: 8px;
    background: #777;
    border-radius: 10px;
    margin-top: 10px;
    overflow: hidden;
}

#progressFill {
    height: 100%;
    width: 0%;
    background: limegreen;
    transition: width 0.4s ease;
    transition:width 0.6s ease;
}

button{
    background: linear-gradient(to right, white, silver);
    border: none;
    border-radius: 6px;
    padding:14px 20px;
    font-weight: 600;
    transition: 0.2s ease;
    margin-top: 15px;
    margin-bottom: 5px;
}

button:hover {
    transform: scale(1.05);
}

button:active {
    transform: scale(0.95);
}
/* =========================
   PREMIUM SECTION
========================= */

.premium-section{
    padding:70px 8%;

    text-align:center;
}

.premium-title{
    font-size:2.5rem;

    margin-bottom:10px;
}

.premium-subtitle{
    opacity:0.75;

    margin-bottom:40px;
}

/* GRID */
.premium-grid{
    display:grid;

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

    gap:25px;
}

/* CARDS */
.premium-card{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.12),
            rgba(255,255,255,0.05)
        );

    backdrop-filter:blur(12px);

    border-radius:24px;

    padding:35px 25px;

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

    transition:0.3s ease;

    position:relative;

    overflow:hidden;
}

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

    box-shadow:
        0 20px 45px rgba(0,0,0,0.15);
}

/* LOCK EFFECT */
.locked::before{
    content:"PRO";

    position:absolute;

    top:15px;
    right:-35px;

    background:#111;

    color:white;

    padding:8px 40px;

    transform:rotate(45deg);

    font-size:0.75rem;

    font-weight:bold;
}

/* PREMIUM MODAL */
.premium-modal{
    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:6000;

    backdrop-filter:blur(5px);
}

.premium-modal.active{
    display:flex;
}

/* CONTENT */
.premium-modal-content{
    background:white;

    color:#111;

    width:min(90%, 420px);

    border-radius:24px;

    padding:35px;

    position:relative;

    animation:premiumPop 0.25s ease;
}

.premium-modal-content h2{
    margin-bottom:15px;
}

.premium-modal-content ul{
    margin:20px 0;

    padding-left:20px;

    text-align:left;
}

.premium-modal-content li{
    margin-bottom:10px;
}

/* CLOSE */
.close-premium{
    position:absolute;

    top:15px;
    right:20px;

    font-size:2rem;

    cursor:pointer;
}

/* BUTTON */
.premium-btn{
    width:100%;
}

/* ANIMATION */
@keyframes premiumPop{
    from{
        transform:scale(0.9);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}
/* =========================
   GOAL MODAL
========================= */

.goal-modal{
    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:7000;

    backdrop-filter:blur(6px);
}

.goal-modal.active{
    display:flex;
}

/* CONTENT */
.goal-content{
    background:white;

    width:min(90%, 450px);

    padding:40px;

    border-radius:28px;

    text-align:center;

    animation:goalPop 0.25s ease;
}

.goal-content h2{
    margin-bottom:10px;
}

.goal-content p{
    opacity:0.7;

    margin-bottom:25px;
}

/* OPTIONS */
.goal-options{
    display:flex;
    flex-direction:column;

    gap:15px;
}

.goal-options button{
    width:100%;
}

/* ANIMATION */
@keyframes goalPop{
    from{
        transform:scale(0.9);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }
}
/* RANK CARD */
#dashRank{
    font-weight:bold;

    letter-spacing:0.5px;
    margin-bottom: 15px;
}

/* OPTIONAL GLOW */
.rank-glow{
    animation:rankPulse 2s infinite;
}

@keyframes rankPulse{

    0%{
        opacity:0.8;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.8;
    }
}
/* MOBILE RESPONSIVE (important) */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-image img {
        width: 100%;
    }

    .reviews {
        flex-direction: column;
        align-items: center;
    }
}
/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 768px){

    /* NAVBAR */
    .navbar{
        flex-direction:column;
        gap:15px;

        height:auto;

        padding:20px;
    }

    .nav-left{
        flex-direction:column;
        gap:15px;
    }

    .nav-links{
        flex-wrap:wrap;
        justify-content:center;

        gap:15px;
    }

    /* HERO */
    .hero{
        flex-direction:column;

        text-align:center;

        padding:40px 20px;
    }

    .hero-text{
        width:100%;
    }

    .hero-text h1{
        font-size:2rem;
        line-height:1.2;
    }

    .hero-image img{
        width:100%;
        max-width:350px;

        margin-top:30px;
    }

    /* DASHBOARD */
    .dashboard-grid{
        grid-template-columns:1fr;
    }

    /* CONTAINERS */
    .container{
        grid-template-columns:1fr;

        padding:25px 20px;
    }

    /* WORKOUT BOXES */
    .box{
        padding:22px;
    }

    /* IMAGES */
    .img-row{
        justify-content:center;
        flex-wrap:wrap;
    }

    .img-row img{
        width:75px;
        height:75px;
    }

    /* BUTTONS */
    button{
        width:100%;
    }

    /* TIMER BUTTONS */
    .timer-box button{
        margin-top:10px;
    }

    /* MODAL IMAGE */
    #modalImage{
        max-width:95%;
        max-height:75%;
    }

    /* TEAM SECTION */
    .team-container{
        flex-direction:column;
        align-items:center;
    }

    /* REVIEWS */
    .review-card img{
        width:100%;
    }

    /* PROFILE */
    .profile-dropdown{
        right:-20px;
        width:220px;
    }

}