/* ==========================================
   ELITE FITNESS
   fitness.css
   PART 1
========================================== */

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

body{

font-family:'Poppins',sans-serif;
background:#0b0b0b;
color:#fff;
overflow-x:hidden;

}

html{

overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1300px;
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
padding:22px 0;
transition:.4s;
background:rgba(0,0,0,.25);
backdrop-filter:blur(18px);

}

header .container{

display:flex;
align-items:center;
justify-content:space-between;
gap:28px;
}

.logo{
font-size:30px;
font-weight:800;
letter-spacing:2px;
color:#fff;
margin-right:0;
white-space:nowrap;
}

nav{
flex:1;
display:flex;
justify-content:center;
margin-left:0;
}

nav ul{

display:flex;
gap:35px;
align-items:center;
list-style:none;
margin:0;
padding:0;

}

nav a{

font-size:16px;
font-weight:500;
position:relative;
transition:.3s;

}

nav a::after{

content:"";
position:absolute;
left:0;
bottom:-8px;
width:0%;
height:2px;
background:#d4af37;
transition:.4s;

}

nav a:hover::after{

width:100%;

}

.join-btn{

position:static;
padding:10px 30px;
padding-right:28px;
padding-left:20px;
border-radius:50px;
background:#d4af37;
color:#111;
font-weight:500;
transition:.35s;
white-space:nowrap;

}

.join-btn:hover{

transform:translateY(-4px);
box-shadow:0 15px 35px rgba(212,175,55,.4);

}

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

.hero{

height:100vh;

background:

linear-gradient(rgba(0,0,0,.55),
rgba(0,0,0,.65)),

url("images/fitness-hero.png");
background-size:cover;
background-position:center;

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

position:relative;

}

.hero-content{

max-width:850px;

}

.hero h1{

font-size:82px;
font-weight:800;
line-height:1.05;
margin-bottom:25px;

}

.hero p{

font-size:20px;
color:#d6d6d6;
line-height:1.8;
margin-bottom:45px;

}

.hero-buttons{

display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;

}

.btn-primary{

padding:10px 42px;
background:#d4af37;
border-radius:50px;
font-weight:700;
color:#111;
transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(212,175,55,.45);

}

.btn-secondary{

padding:18px 42px;
border:2px solid #fff;
border-radius:50px;
transition:.35s;

}

.btn-secondary:hover{

background:#fff;
color:#111;

}

section{

padding:120px 0;

}

h2{

font-size:48px;
text-align:center;
margin-bottom:70px;
font-weight:800;

}

/* ==========================================
   PART 2
   ABOUT - SERVICES - MEMBERSHIP
==========================================*/

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

.about{

background:#111;

}

.about .container{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.about-left h2{

font-size:50px;
margin-bottom:25px;
text-align:left;

}

.about-left p{

font-size:18px;
line-height:1.9;
color:#cfcfcf;

}

.about-right{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.box{

background:#181818;
padding:40px;
border-radius:18px;
text-align:center;
transition:.35s;
border:1px solid rgba(255,255,255,.05);

}

.box:hover{

transform:translateY(-10px);
border-color:#d4af37;
box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.box h3{

font-size:42px;
color:#d4af37;
margin-bottom:12px;

}

.box p{

color:#d0d0d0;
font-size:17px;

}

/* ================= SERVICES ================= */

.services{

background:#0b0b0b;

}

.cards{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
width:90%;
max-width:1300px;
margin:auto;

}

.card{

background:#171717;
padding:45px 30px;
border-radius:18px;
text-align:center;
transition:.35s;
border:1px solid rgba(255,255,255,.06);

}

.card:hover{

transform:translateY(-12px);
border-color:#d4af37;
box-shadow:0 20px 40px rgba(0,0,0,.4);

}

.card i{

font-size:55px;
color:#d4af37;
margin-bottom:25px;

}

.card h3{

font-size:24px;
margin-bottom:15px;

}

.card p{

color:#bdbdbd;
line-height:1.7;

}

/* ================= MEMBERSHIP ================= */

.membership{

background:#111;

}

.plans{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
width:90%;
max-width:1200px;
margin:auto;

}

.plan{

background:#181818;
padding:55px 40px;
border-radius:20px;
text-align:center;
transition:.4s;
border:1px solid rgba(255,255,255,.05);
position:relative;

}

.plan:hover{

transform:translateY(-12px);
border-color:#d4af37;

}

.plan h3{

font-size:26px;
margin-bottom:20px;

}

.plan h1{

font-size:65px;
color:#d4af37;
margin-bottom:10px;

}

.plan p{

margin-bottom:35px;
color:#cfcfcf;

}

.plan a{

display:inline-block;
padding:15px 40px;
background:#d4af37;
border-radius:40px;
color:#111;
font-weight:700;
transition:.35s;

}

.plan a:hover{

transform:scale(1.05);

}

.featured{

transform:scale(1.05);
border:2px solid #d4af37;

}

.featured::before{

content:"MOST POPULAR";

position:absolute;

top:-15px;
left:50%;

transform:translateX(-50%);

background:#d4af37;
color:#111;

padding:8px 22px;

font-size:13px;
font-weight:700;

border-radius:30px;

letter-spacing:1px;

}

.plan ul{

margin:30px 0;

}

.plan ul li{

padding:10px 0;
color:#d0d0d0;
font-size:16px;
border-bottom:1px solid rgba(255,255,255,.05);

}

.plan ul li:last-child{

border:none;

}

/* ==========================================
   PART 2
   ABOUT - SERVICES - MEMBERSHIP
==========================================*/

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

.about{

background:#111;

}

.about .container{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.about-left h2{

font-size:50px;
margin-bottom:25px;
text-align:left;

}

.about-left p{

font-size:18px;
line-height:1.9;
color:#cfcfcf;

}

.about-right{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:25px;

}

.box{

background:#181818;
padding:40px;
border-radius:18px;
text-align:center;
transition:.35s;
border:1px solid rgba(255,255,255,.05);

}

.box:hover{

transform:translateY(-10px);
border-color:#d4af37;
box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.box h3{

font-size:42px;
color:#d4af37;
margin-bottom:12px;

}

.box p{

color:#d0d0d0;
font-size:17px;

}

/* ================= SERVICES ================= */

.services{

background:#0b0b0b;

}

.cards{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
width:90%;
max-width:1300px;
margin:auto;

}

.card{

background:#171717;
padding:45px 30px;
border-radius:18px;
text-align:center;
transition:.35s;
border:1px solid rgba(255,255,255,.06);

}

.card:hover{

transform:translateY(-12px);
border-color:#d4af37;
box-shadow:0 20px 40px rgba(0,0,0,.4);

}

.card i{

font-size:55px;
color:#d4af37;
margin-bottom:25px;

}

.card h3{

font-size:24px;
margin-bottom:15px;

}

.card p{

color:#bdbdbd;
line-height:1.7;

}

/* ================= MEMBERSHIP ================= */

.membership{

background:#111;

}

.plans{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
width:90%;
max-width:1200px;
margin:auto;

}

.plan{

background:#181818;
padding:55px 40px;
border-radius:20px;
text-align:center;
transition:.4s;
border:1px solid rgba(255,255,255,.05);
position:relative;

}

.plan:hover{

transform:translateY(-12px);
border-color:#d4af37;

}

.plan h3{

font-size:26px;
margin-bottom:20px;

}

.plan h1{

font-size:65px;
color:#d4af37;
margin-bottom:10px;

}

.plan p{

margin-bottom:35px;
color:#cfcfcf;

}

.plan a{

display:inline-block;
padding:15px 40px;
background:#d4af37;
border-radius:40px;
color:#111;
font-weight:700;
transition:.35s;

}

.plan a:hover{

transform:scale(1.05);

}

.featured{

transform:scale(1.05);
border:2px solid #d4af37;

}

.featured::before{

content:"MOST POPULAR";

position:absolute;

top:-15px;
left:50%;

transform:translateX(-50%);

background:#d4af37;
color:#111;

padding:8px 22px;

font-size:13px;
font-weight:700;

border-radius:30px;

letter-spacing:1px;

}

.plan ul{

margin:30px 0;

}

.plan ul li{

padding:10px 0;
color:#d0d0d0;
font-size:16px;
border-bottom:1px solid rgba(255,255,255,.05);

}

.plan ul li:last-child{

border:none;

}

/* ==========================================
   PART 3
   TRAINERS - GALLERY - CONTACT - FOOTER
==========================================*/

/* ================= TRAINERS ================= */

.trainers{

background:#0b0b0b;

}

.trainer-grid{

width:90%;
max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.trainer{

background:#181818;
border-radius:20px;
overflow:hidden;
text-align:center;
transition:.4s;
border:1px solid rgba(255,255,255,.06);

}

.trainer:hover{

transform:translateY(-12px);
border-color:#d4af37;
box-shadow:0 20px 45px rgba(0,0,0,.45);

}

.trainer img{

width:100%;
height:420px;
object-fit:cover;
transition:.5s;

}

.trainer:hover img{

transform:scale(1.08);

}

.trainer h3{

font-size:28px;
margin:25px 0 8px;

}

.trainer p{

padding-bottom:30px;
color:#d4af37;
font-size:17px;

}

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

.gallery{

background:#111;

}

.gallery-grid{

width:90%;
max-width:1350px;
margin:auto;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;

}

.gallery-grid img{

width:100%;
height:300px;
object-fit:cover;

border-radius:18px;

cursor:pointer;

transition:.45s;

}

.gallery-grid img:hover{

transform:scale(1.05);
box-shadow:0 20px 45px rgba(0,0,0,.45);

}

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

.contact{

background:

linear-gradient(rgba(0,0,0,.75),
rgba(0,0,0,.75)),
url("images/fitness-hero.png");

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

text-align:center;

padding:140px 20px;

}

.contact h2{

font-size:55px;
margin-bottom:20px;

}

.contact p{

font-size:20px;
color:#ddd;

margin-bottom:40px;

}

.contact-btn{

display:inline-block;

padding:18px 45px;

background:#d4af37;

color:#111;

font-weight:700;

border-radius:50px;

transition:.35s;

}

.contact-btn:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(212,175,55,.4);

}

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

footer{

background:#080808;

padding:45px 20px;

text-align:center;

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

}

footer p{

color:#999;

font-size:16px;

letter-spacing:1px;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:#d4af37;
border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#f2cb52;

}

/* ==========================================
   PART 4
   RESPONSIVE + ANIMATIONS + FINAL
==========================================*/

/* ================= ANIMATIONS ================= */

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(60px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes zoomIn{

0%{

opacity:0;
transform:scale(.9);

}

100%{

opacity:1;
transform:scale(1);

}

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.hero-content h1{

animation:fadeUp .9s ease;

}

.hero-content p{

animation:fadeUp 1.2s ease;

}

.hero-buttons{

animation:fadeUp 1.5s ease;

}

.card,
.plan,
.box,
.trainer,
.gallery-grid img{

animation:zoomIn .8s ease;

}

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

.card,
.plan,
.box,
.trainer,
.gallery-grid img,
.contact-btn,
.btn-primary,
.btn-secondary,
.join-btn{

will-change:transform;

}

.card:hover,
.plan:hover,
.box:hover,
.trainer:hover{

transform:translateY(-12px);

}

.gallery-grid img:hover{

filter:brightness(1.08);

}

.logo{

transition:.35s;

}

.logo:hover{

letter-spacing:3px;

}

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

::selection{

background:#d4af37;
color:#111;

}

/* ================= FOCUS ================= */

a:focus,
button:focus{

outline:2px solid #d4af37;
outline-offset:5px;

}

/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

.hero h1{

font-size:64px;

}

.cards{

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

}

.trainer-grid{

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

}

.gallery-grid{

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

}

.about .container{

grid-template-columns:1fr;

}

.plans{

grid-template-columns:1fr;

}

}

@media(max-width:768px){
   

header{

padding:18px 0;

}

header .container{

flex-direction:row;
gap:14px;

}

nav ul{

flex-wrap:wrap;
justify-content:center;
gap:18px;

}

.logo{

font-size:24px;

}

.hero{

padding:140px 20px 100px;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;
max-width:320px;
text-align:center;

}

.cards{

grid-template-columns:1fr;

}

.about-right{

grid-template-columns:1fr;

}

.trainer-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-grid img{

height:240px;

}

section{

padding:90px 20px;

}

h2{

font-size:34px;

}

.plan h1{

font-size:50px;

}

}

@media(max-width:500px){

.hero h1{

font-size:36px;

line-height:1.15;

}

.hero p{

font-size:16px;

}

.logo{

font-size:21px;

}

nav a{

font-size:15px;

}

.contact h2{

font-size:34px;

}

.contact p{

font-size:16px;

}

footer p{

font-size:14px;

}

}

.back-btn{
position:fixed;
top:70px;
left:30px;
display:flex;
align-items:center;
gap:10px;
padding:14px 24px;
background:#fff;
color:#111;
border-radius:50px;
font-weight:600;
box-shadow:0 10px 25px rgba(0,0,0,.15);
z-index:9999;
transition:.3s;
}

.back-btn:hover{
background:#111;
color:#fff;
transform:translateY(-4px);
}

.menu-toggle{
display:none;
color:#fff;
background:transparent;
border:0;
padding:0;
font:inherit;
}

.menu-toggle i{
pointer-events:none;
font-size:28px;
}

@media (max-width:768px){
header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    flex-direction:row;
    min-height:48px;
}

.logo{
    position:static;
    transform:none;
    order:2;
    flex:1;
    min-width:0;
    flex-shrink:1;
    max-width:none;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:clamp(18px,4.5vw,24px);
    letter-spacing:1px;
}

.menu-toggle{
    order:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    font-size:0;
    cursor:pointer;
    line-height:1;
    flex-shrink:0;
    color:#fff;
}

.back-btn{
    position:fixed;
    top:76px;
    left:20px;
    padding:10px 18px;
    font-size:15px;
    max-width:calc(100vw - 40px);
}

.join-btn{
    order:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    font-size:14px;
    flex-shrink:0;
}

nav{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:100%;
    background:rgba(17,17,17,.98);
    padding:18px 0;
    z-index:1001;
    box-shadow:0 18px 35px rgba(0,0,0,.32);
    backdrop-filter:blur(14px);
    margin-left:0;
}

nav.active{
    display:block;
}

nav.active ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    position:static;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
}

nav.active li{
    width:100%;
    text-align:center;
}

nav.active a{
    display:block;
    width:100%;
    padding:14px 20px;
    font-size:17px;
    font-weight:600;
}

nav.active a::after{
    display:none;
}

body.mobile-menu-open .back-btn{
    display:none;
}

}