/*=====================================================================
                THE ROYAL GYM
        PREMIUM DESIGN SYSTEM 2026
======================================================================*/

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


/*=====================================================================
ROOT VARIABLES
======================================================================*/

:root{

/*================ BACKGROUND ================*/

--bg:#05070F;
--bg-secondary:#0B1220;
--bg-card:#111827;
--bg-card-light:#182335;
--bg-glass:rgba(255,255,255,.05);

/*================ PRIMARY COLORS ================*/

--gold:#D4AF37;
--gold-light:#F4D46A;
--gold-dark:#A47C17;

--cyan:#00D9FF;
--cyan-light:#5EEBFF;

--success:#22C55E;
--danger:#EF4444;

/*================ TEXT ================*/

--white:#FFFFFF;
--text:#F8FAFC;
--text-light:#CBD5E1;
--text-muted:#94A3B8;

/*================ BORDER ================*/

--border:rgba(255,255,255,.08);
--border-light:rgba(255,255,255,.15);

/*================ SHADOWS ================*/

--shadow-sm:0 8px 25px rgba(0,0,0,.18);

--shadow-md:0 15px 45px rgba(0,0,0,.28);

--shadow-lg:0 25px 70px rgba(0,0,0,.45);

--shadow-gold:0 0 30px rgba(212,175,55,.35);

--shadow-cyan:0 0 35px rgba(0,217,255,.28);

/*================ RADIUS ================*/

--radius-sm:12px;
--radius:20px;
--radius-lg:28px;

/*================ TRANSITIONS ================*/

--transition:.35s cubic-bezier(.4,0,.2,1);

--section-padding:120px;

}


/*=====================================================================
RESET
======================================================================*/

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;
overflow-x:hidden;

}

body{

font-family:'Poppins',sans-serif;

background:
radial-gradient(circle at top right,
rgba(0,217,255,.06),
transparent 35%),

radial-gradient(circle at bottom left,
rgba(212,175,55,.06),
transparent 35%),

linear-gradient(
180deg,
#05070F 0%,
#08111F 40%,
#05070F 100%
);

color:var(--text);

overflow-x:hidden;

line-height:1.8;

position:relative;

}


/*=====================================================================
BACKGROUND GLOW
======================================================================*/

body::before{

content:"";

position:fixed;

width:700px;
height:700px;

background:

radial-gradient(circle,
rgba(0,217,255,.06),
transparent 70%);

top:-300px;
right:-300px;

pointer-events:none;

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:650px;
height:650px;

background:

radial-gradient(circle,
rgba(212,175,55,.05),
transparent 70%);

bottom:-300px;
left:-300px;

pointer-events:none;

z-index:-1;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#06080F;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
var(--gold),
var(--cyan)
);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(
180deg,
var(--gold-light),
var(--cyan-light)
);

}


/*=====================================================================
TYPOGRAPHY
======================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

font-family:'Cinzel',serif;

font-weight:700;

line-height:1.2;

color:var(--white);

margin-bottom:18px;

}

h1{

font-size:clamp(3rem,6vw,5.6rem);

}

h2{

font-size:clamp(2.2rem,5vw,4rem);

}

h3{

font-size:clamp(1.5rem,4vw,2rem);

}

p{

color:var(--text-light);

font-size:1rem;

line-height:1.9;

margin-bottom:18px;

}

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}

img{

display:block;

max-width:100%;

height:auto;

}

ul{

list-style:none;

padding:0;

margin:0;

}

::selection{

background:var(--gold);

color:#000;

}


/*=====================================================================
COMMON SECTION
======================================================================*/

section{

padding:var(--section-padding) 0;

position:relative;

overflow:hidden;

}

.section-title{

display:inline-block;

letter-spacing:5px;

font-size:.9rem;

text-transform:uppercase;

font-weight:700;

color:var(--cyan);

margin-bottom:18px;

position:relative;

}

.section-title::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:70px;
height:2px;

background:

linear-gradient(
90deg,
var(--gold),
transparent
);

}

.section-heading{

font-size:clamp(2.3rem,5vw,4rem);

margin-bottom:25px;

line-height:1.25;

}

.section-heading span{

color:var(--gold);

text-shadow:0 0 18px rgba(212,175,55,.25);

}

.section-text{

max-width:760px;

color:var(--text-light);

}


/*=====================================================================
CONTAINER
======================================================================*/

.container{

position:relative;

z-index:2;

}


/*=====================================================================
GLASS EFFECT
======================================================================*/

.glass{

background:var(--bg-glass);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

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

border-radius:var(--radius);

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

}


/*=====================================================================
COMMON UTILITIES
======================================================================*/

.text-gold{

color:var(--gold)!important;

}

.text-cyan{

color:var(--cyan)!important;

}

.bg-dark-custom{

background:var(--bg-secondary);

}

.rounded-xl{

border-radius:var(--radius-lg);

}

.shadow-premium{

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

}

.transition{

transition:var(--transition);

}
/*==========================================================
                    PREMIUM NAVBAR
==========================================================*/

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

padding:18px 0;

z-index:9999;

background:rgba(5,7,15,.65);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

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

transition:all .45s ease;

}


/*==========================================================
SCROLLED NAVBAR
(Add this class using JS)
==========================================================*/

.navbar.scrolled{

padding:12px 0;

background:rgba(5,7,15,.92);

box-shadow:

0 12px 35px rgba(0,0,0,.35);

border-bottom:

1px solid rgba(0,217,255,.15);

}


/*==========================================================
LOGO
==========================================================*/

.navbar-brand{

font-family:'Cinzel',serif;

font-size:2rem;

font-weight:800;

letter-spacing:2px;

color:var(--white)!important;

position:relative;

transition:var(--transition);

}

.navbar-brand span{

color:var(--gold);

text-shadow:

0 0 18px rgba(212,175,55,.35);

}

.navbar-brand:hover{

transform:scale(1.03);

}

.navbar-brand:hover span{

text-shadow:

0 0 22px rgba(212,175,55,.65);

}


/*==========================================================
NAVIGATION LINKS
==========================================================*/

.navbar-nav{

align-items:center;

gap:10px;

}

.navbar-nav .nav-link{

position:relative;

padding:10px 18px!important;

font-size:15px;

font-weight:600;

letter-spacing:.5px;

color:var(--text)!important;

transition:var(--transition);

}


/*==========================================================
UNDERLINE EFFECT
==========================================================*/

.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:50%;

bottom:-3px;

transform:translateX(-50%);

width:0;

height:2px;

border-radius:50px;

background:

linear-gradient(

90deg,

var(--gold),

var(--cyan)

);

transition:.35s;

}

.navbar-nav .nav-link:hover{

color:var(--gold)!important;

}

.navbar-nav .nav-link:hover::after{

width:75%;

}


/*==========================================================
ACTIVE LINK
==========================================================*/

.navbar-nav .nav-link.active{

color:var(--gold)!important;

}

.navbar-nav .nav-link.active::after{

width:75%;

}


/*==========================================================
JOIN NOW BUTTON
==========================================================*/

.btn-join{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding:12px 28px;

font-weight:700;

border-radius:50px;

background:

linear-gradient(

135deg,

var(--gold),

var(--gold-light)

);

color:#000;

border:none;

overflow:hidden;

position:relative;

transition:.4s;

box-shadow:

0 10px 30px rgba(212,175,55,.25);

}


/* Shine */

.btn-join::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:40%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-20deg);

transition:.7s;

}

.btn-join:hover::before{

left:150%;

}

.btn-join:hover{

transform:translateY(-4px);

background:

linear-gradient(

135deg,

var(--cyan),

#5EEBFF

);

color:white;

box-shadow:

0 0 30px rgba(0,217,255,.35);

}


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

.navbar-toggler{

border:none;

box-shadow:none!important;

padding:8px;

}

.navbar-toggler:focus{

box-shadow:none;

}

.navbar-toggler-icon{

filter:brightness(100);

}


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

@media(max-width:991px){

.navbar-collapse{

margin-top:20px;

padding:25px;

border-radius:22px;

background:

rgba(17,24,39,.98);

backdrop-filter:blur(20px);

border:

1px solid rgba(255,255,255,.06);

box-shadow:

0 20px 45px rgba(0,0,0,.45);

}

.navbar-nav{

gap:6px;

}

.navbar-nav .nav-link{

padding:14px!important;

text-align:center;

border-radius:12px;

}

.navbar-nav .nav-link:hover{

background:

rgba(255,255,255,.04);

}

.btn-join{

width:100%;

margin-top:18px;

}

}


/*==========================================================
DESKTOP HOVER
==========================================================*/

@media(min-width:992px){

.navbar-nav .nav-item{

position:relative;

}

.navbar-nav .nav-item:hover{

transform:translateY(-2px);

transition:.3s;

}

}


/*==========================================================
BOTTOM GLOW
==========================================================*/

.navbar::after{

content:"";

position:absolute;

bottom:-1px;

left:0;

width:100%;

height:1px;

background:

linear-gradient(

90deg,

transparent,

rgba(0,217,255,.15),

rgba(212,175,55,.25),

rgba(0,217,255,.15),

transparent

);

}
/*==========================================================
                    PREMIUM HERO SECTION
==========================================================*/

.hero,
.hero-section{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

overflow:hidden;

padding:140px 0 100px;

background:
linear-gradient(
135deg,
rgba(5,7,15,.88),
rgba(9,17,31,.82)
),
url("../images/hero.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;

}


/*==========================================================
BACKGROUND OVERLAY
==========================================================*/

.hero::before,
.hero-section::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(5,7,15,.88) 10%,

rgba(5,7,15,.65) 55%,

rgba(5,7,15,.45) 100%

);

z-index:1;

}


/*==========================================================
TOP GLOW
==========================================================*/

.hero::after,
.hero-section::after{

content:"";

position:absolute;

width:650px;
height:650px;

top:-250px;
right:-200px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,217,255,.15),

transparent 70%

);

filter:blur(20px);

animation:heroGlow 8s ease-in-out infinite;

z-index:1;

}


/*==========================================================
CONTENT
==========================================================*/

.hero-content{

position:relative;

z-index:5;

max-width:700px;

}


/*==========================================================
SUBTITLE
==========================================================*/

.hero-subtitle{

display:inline-flex;

align-items:center;

gap:12px;

padding:10px 22px;

margin-bottom:22px;

border-radius:50px;

background:

rgba(255,255,255,.05);

backdrop-filter:blur(12px);

border:

1px solid rgba(255,255,255,.08);

font-size:.95rem;

letter-spacing:2px;

font-weight:600;

color:var(--cyan);

text-transform:uppercase;

}


/*==========================================================
TITLE
==========================================================*/

.hero-title{

font-size:clamp(3.5rem,8vw,6rem);

line-height:1.05;

font-weight:800;

margin-bottom:28px;

color:white;

}

.hero-title span{

color:var(--gold);

text-shadow:

0 0 25px rgba(212,175,55,.45);

}


/*==========================================================
DESCRIPTION
==========================================================*/

.hero-text,
.hero p{

font-size:1.15rem;

line-height:2;

max-width:620px;

color:var(--text-light);

margin-bottom:40px;

}


/*==========================================================
BUTTON GROUP
==========================================================*/

.hero-btns{

display:flex;

align-items:center;

gap:20px;

flex-wrap:wrap;

}


/*==========================================================
PRIMARY BUTTON
==========================================================*/

.hero-btn-primary{

padding:16px 38px;

border-radius:60px;

font-weight:700;

background:

linear-gradient(

135deg,

var(--gold),

var(--gold-light)

);

color:#000;

transition:.45s;

box-shadow:

0 15px 35px rgba(212,175,55,.25);

}

.hero-btn-primary:hover{

transform:translateY(-6px);

background:

linear-gradient(

135deg,

var(--cyan),

#7DF4FF

);

color:white;

box-shadow:

0 20px 45px rgba(0,217,255,.35);

}


/*==========================================================
SECONDARY BUTTON
==========================================================*/

.hero-btn-outline{

padding:16px 38px;

border-radius:60px;

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

background:transparent;

color:white;

transition:.4s;

}

.hero-btn-outline:hover{

background:white;

color:#05070F;

transform:translateY(-6px);

}


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

.hero-image{

position:relative;

z-index:5;

animation:floatingHero 6s ease-in-out infinite;

filter:

drop-shadow(0 35px 70px rgba(0,217,255,.22));

}

.hero-image img{

transition:.8s;

}

.hero-image:hover img{

transform:scale(1.03);

}


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

.hero-stats{

display:flex;

gap:28px;

margin-top:55px;

flex-wrap:wrap;

}

.hero-stat{

padding:18px 25px;

min-width:150px;

border-radius:20px;

background:

rgba(255,255,255,.05);

backdrop-filter:blur(18px);

border:

1px solid rgba(255,255,255,.08);

transition:.4s;

}

.hero-stat:hover{

transform:translateY(-8px);

border-color:rgba(0,217,255,.25);

box-shadow:

0 20px 40px rgba(0,217,255,.18);

}

.hero-stat h3{

font-size:2rem;

color:var(--gold);

margin-bottom:8px;

}

.hero-stat p{

margin:0;

font-size:.9rem;

color:var(--text-light);

}


/*==========================================================
SCROLL INDICATOR
==========================================================*/

.scroll-indicator{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:10;

width:32px;

height:58px;

border-radius:50px;

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

}

.scroll-indicator span{

display:block;

width:6px;

height:12px;

margin:10px auto;

border-radius:50px;

background:var(--gold);

animation:scrollDown 2s infinite;

}


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

@keyframes heroGlow{

0%,100%{

transform:scale(1);

opacity:.6;

}

50%{

transform:scale(1.25);

opacity:1;

}

}

@keyframes floatingHero{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-16px);

}

}

@keyframes scrollDown{

0%{

transform:translateY(0);

opacity:0;

}

50%{

opacity:1;

}

100%{

transform:translateY(22px);

opacity:0;

}

}
/*==========================================================
                PREMIUM BUTTON SYSTEM
==========================================================*/

.btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;

padding:16px 38px;

border:none;
outline:none;

border-radius:60px;

font-size:15px;
font-weight:700;
letter-spacing:.5px;

cursor:pointer;

overflow:hidden;

position:relative;

transition:all .45s cubic-bezier(.4,0,.2,1);

text-decoration:none;

z-index:1;

}


/*==========================================================
PRIMARY BUTTON
==========================================================*/

.btn-primary,
.btn-gold,
.btn-warning{

background:

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

color:#05070F!important;

box-shadow:

0 15px 35px rgba(212,175,55,.25);

}


/* Shine Animation */

.btn-primary::before,
.btn-gold::before,
.btn-warning::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:45%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);

transform:skewX(-25deg);

transition:.8s;

z-index:-1;

}

.btn-primary:hover::before,
.btn-gold:hover::before,
.btn-warning:hover::before{

left:160%;

}

.btn-primary:hover,
.btn-gold:hover,
.btn-warning:hover{

transform:

translateY(-6px);

background:

linear-gradient(
135deg,
var(--cyan),
#65EEFF
);

color:white!important;

box-shadow:

0 20px 45px rgba(0,217,255,.35);

}


/*==========================================================
OUTLINE BUTTON
==========================================================*/

.btn-outline,
.btn-outline-light{

background:transparent;

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

color:white!important;

backdrop-filter:blur(12px);

}

.btn-outline:hover,
.btn-outline-light:hover{

background:white;

color:#05070F!important;

border-color:white;

transform:translateY(-6px);

box-shadow:

0 20px 45px rgba(255,255,255,.12);

}


/*==========================================================
CYAN BUTTON
==========================================================*/

.btn-info{

background:

linear-gradient(
135deg,
var(--cyan),
#63F0FF
);

color:white;

box-shadow:

0 18px 40px rgba(0,217,255,.25);

}

.btn-info:hover{

background:

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

color:black;

transform:translateY(-6px);

box-shadow:

0 18px 40px rgba(212,175,55,.30);

}


/*==========================================================
SUCCESS BUTTON
==========================================================*/

.btn-success{

background:

linear-gradient(
135deg,
#22C55E,
#4ADE80
);

border:none;

color:white;

}

.btn-success:hover{

transform:translateY(-5px);

box-shadow:

0 20px 40px rgba(34,197,94,.35);

}


/*==========================================================
ICON INSIDE BUTTON
==========================================================*/

.btn i{

font-size:15px;

transition:.35s;

}

.btn:hover i{

transform:translateX(4px);

}


/*==========================================================
RIPPLE EFFECT
==========================================================*/

.btn::after{

content:"";

position:absolute;

width:0;
height:0;

left:50%;
top:50%;

transform:translate(-50%,-50%);

border-radius:50%;

background:

rgba(255,255,255,.18);

transition:.55s;

z-index:-2;

}

.btn:active::after{

width:350px;
height:350px;

}


/*==========================================================
BUTTON GLOW
==========================================================*/

.btn:hover{

filter:

brightness(105%);

}


/*==========================================================
BUTTON GROUP
==========================================================*/

.button-group{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}


/*==========================================================
SMALL BUTTON
==========================================================*/

.btn-sm{

padding:12px 26px;

font-size:14px;

}


/*==========================================================
LARGE BUTTON
==========================================================*/

.btn-lg{

padding:20px 48px;

font-size:17px;

}


/*==========================================================
FULL WIDTH
==========================================================*/

.btn-block{

width:100%;

}


/*==========================================================
DISABLED
==========================================================*/

.btn:disabled{

opacity:.5;

cursor:not-allowed;

transform:none!important;

box-shadow:none!important;

}


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

.btn:focus{

outline:none;

box-shadow:

0 0 0 4px rgba(0,217,255,.15);

}


/*==========================================================
FLOATING BUTTON
==========================================================*/

.btn-floating{

width:60px;
height:60px;

padding:0;

border-radius:50%;

display:flex;

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

font-size:22px;

}


/*==========================================================
HOVER SCALE
==========================================================*/

.btn:hover{

transform:

translateY(-6px)

scale(1.03);

}


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

@media(max-width:768px){

.btn{

width:100%;

padding:15px 28px;

font-size:15px;

}

.button-group{

flex-direction:column;

gap:15px;

}

}
/*==========================================================
                PREMIUM CARD SYSTEM
==========================================================*/

.card,
.facility-card,
.membership-card,
.trainer-card,
.review-card,
.branch-card,
.nutrition-card,
.transformation-card{

position:relative;

overflow:hidden;

background:
linear-gradient(
180deg,
rgba(17,24,39,.98),
rgba(10,14,25,.98)
);

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

border-radius:26px;

padding:30px;

transition:all .45s cubic-bezier(.4,0,.2,1);

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

backdrop-filter:blur(18px);

height:100%;

}


/*==========================================================
TOP GLOW LINE
==========================================================*/

.card::before,
.facility-card::before,
.membership-card::before,
.trainer-card::before,
.review-card::before,
.branch-card::before,
.nutrition-card::before,
.transformation-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
var(--gold),
var(--cyan)
);

transform:scaleX(0);

transform-origin:left;

transition:.5s;

}


/*==========================================================
BACKGROUND GLOW
==========================================================*/

.card::after,
.facility-card::after,
.membership-card::after,
.trainer-card::after,
.review-card::after,
.branch-card::after,
.nutrition-card::after,
.transformation-card::after{

content:"";

position:absolute;

width:220px;
height:220px;

top:-100px;
right:-100px;

border-radius:50%;

background:

radial-gradient(circle,
rgba(0,217,255,.12),
transparent 70%);

opacity:0;

transition:.5s;

}


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

.card:hover,
.facility-card:hover,
.membership-card:hover,
.trainer-card:hover,
.review-card:hover,
.branch-card:hover,
.nutrition-card:hover,
.transformation-card:hover{

transform:
translateY(-14px);

border-color:
rgba(0,217,255,.25);

box-shadow:
0 35px 70px rgba(0,0,0,.45);

}

.card:hover::before,
.facility-card:hover::before,
.membership-card:hover::before,
.trainer-card:hover::before,
.review-card:hover::before,
.branch-card:hover::before,
.nutrition-card:hover::before,
.transformation-card:hover::before{

transform:scaleX(1);

}

.card:hover::after,
.facility-card:hover::after,
.membership-card:hover::after,
.trainer-card:hover::after,
.review-card:hover::after,
.branch-card:hover::after,
.nutrition-card:hover::after,
.transformation-card:hover::after{

opacity:1;

}


/*==========================================================
CARD IMAGE
==========================================================*/

.card img,
.facility-card img,
.membership-card img,
.trainer-card img,
.review-card img,
.branch-card img,
.nutrition-card img,
.transformation-card img{

width:100%;

border-radius:18px;

transition:.7s;

}

.card:hover img,
.facility-card:hover img,
.membership-card:hover img,
.trainer-card:hover img,
.review-card:hover img,
.branch-card:hover img,
.nutrition-card:hover img,
.transformation-card:hover img{

transform:scale(1.08);

}


/*==========================================================
ICON
==========================================================*/

.card i,
.facility-card i,
.membership-card i,
.trainer-card i,
.review-card i,
.branch-card i,
.nutrition-card i,
.transformation-card i{

font-size:2.8rem;

margin-bottom:20px;

color:var(--gold);

transition:.45s;

}

.card:hover i,
.facility-card:hover i,
.membership-card:hover i,
.trainer-card:hover i,
.review-card:hover i,
.branch-card:hover i,
.nutrition-card:hover i,
.transformation-card:hover i{

transform:
rotateY(180deg)
scale(1.15);

color:var(--cyan);

}


/*==========================================================
TITLE
==========================================================*/

.card h3,
.facility-card h3,
.membership-card h3,
.trainer-card h3,
.review-card h3,
.branch-card h3,
.nutrition-card h3,
.transformation-card h3{

font-size:1.55rem;

margin-bottom:16px;

transition:.4s;

}

.card:hover h3,
.facility-card:hover h3,
.membership-card:hover h3,
.trainer-card:hover h3,
.review-card:hover h3,
.branch-card:hover h3,
.nutrition-card:hover h3,
.transformation-card:hover h3{

color:var(--gold);

}


/*==========================================================
TEXT
==========================================================*/

.card p,
.facility-card p,
.membership-card p,
.trainer-card p,
.review-card p,
.branch-card p,
.nutrition-card p,
.transformation-card p{

color:var(--text-light);

line-height:1.9;

}


/*==========================================================
CARD BUTTON
==========================================================*/

.card .btn,
.facility-card .btn,
.membership-card .btn,
.trainer-card .btn{

margin-top:22px;

}


/*==========================================================
PRICE
==========================================================*/

.membership-price{

font-size:2.6rem;

font-weight:800;

color:var(--gold);

margin:25px 0;

text-shadow:
0 0 20px rgba(212,175,55,.25);

}


/*==========================================================
TRAINER IMAGE
==========================================================*/

.trainer-card img{

aspect-ratio:1/1;

object-fit:cover;

}


/*==========================================================
SOCIAL ICONS
==========================================================*/

.trainer-social{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}

.trainer-social a{

width:46px;
height:46px;

display:flex;

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

border-radius:50%;

background:
rgba(255,255,255,.05);

transition:.4s;

}

.trainer-social a:hover{

background:var(--gold);

color:#000;

transform:
translateY(-6px)
rotate(360deg);

}


/*==========================================================
REVIEW STARS
==========================================================*/

.rating{

color:#FFD700;

font-size:18px;

margin-bottom:16px;

letter-spacing:3px;

}


/*==========================================================
POPULAR PLAN
==========================================================*/

.popular{

border:2px solid var(--gold);

transform:scale(1.03);

box-shadow:
0 0 40px rgba(212,175,55,.20);

}

.popular::before{

transform:scaleX(1);

}


/*==========================================================
BADGE
==========================================================*/

.badge-premium{

position:absolute;

top:20px;
right:20px;

padding:8px 16px;

border-radius:50px;

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

color:#000;

font-size:13px;

font-weight:700;

}


/*==========================================================
GRID GAP
==========================================================*/

.card-grid{

display:grid;

gap:30px;

}
/*==========================================================
                PREMIUM GALLERY SECTION
==========================================================*/

.gallery-section{

position:relative;

background:linear-gradient(
180deg,
#05070F 0%,
#08111F 100%
);

overflow:hidden;

}


/*==========================================================
FILTER BUTTONS
==========================================================*/

.gallery-filter{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:60px;

}

.gallery-filter button{

padding:14px 30px;

background:rgba(255,255,255,.05);

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

border-radius:50px;

color:var(--text);

font-weight:600;

transition:all .4s ease;

backdrop-filter:blur(12px);

cursor:pointer;

}

.gallery-filter button:hover{

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

color:#000;

transform:translateY(-5px);

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

}

.gallery-filter button.active{

background:linear-gradient(
135deg,
var(--cyan),
#64EDFF
);

color:#fff;

box-shadow:0 18px 40px rgba(0,217,255,.30);

}


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

.gallery-grid{

display:grid;

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

gap:28px;

}


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

.gallery-item{

position:relative;

overflow:hidden;

border-radius:24px;

background:#111827;

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

transition:.5s;

}

.gallery-item:hover{

transform:translateY(-10px);

box-shadow:0 30px 65px rgba(0,0,0,.45);

}


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

.gallery-item img{

width:100%;

height:400px;

object-fit:cover;

transition:1s;

display:block;

}

.gallery-item:hover img{

transform:scale(1.12);

}

.brand-logo {
    width: 300px;
    height: 300px;
    object-fit: contain;
    margin: 0 auto 1rem;
}


/*==========================================================
DARK OVERLAY
==========================================================*/

.gallery-overlay{

position:absolute;

inset:0;

background:linear-gradient(
180deg,
transparent,
rgba(5,7,15,.92)
);

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

opacity:0;

transition:.5s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}


/*==========================================================
TITLE
==========================================================*/

.gallery-overlay h3{

color:white;

font-size:1.6rem;

margin-bottom:10px;

transform:translateY(20px);

transition:.45s;

}

.gallery-overlay p{

color:#d6d6d6;

margin-bottom:18px;

transform:translateY(20px);

transition:.5s;

}

.gallery-item:hover h3,

.gallery-item:hover p{

transform:translateY(0);

}


/*==========================================================
VIEW BUTTON
==========================================================*/

.gallery-view{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

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

border-radius:50px;

color:#000;

font-weight:700;

transition:.4s;

width:max-content;

}

.gallery-view:hover{

background:linear-gradient(
135deg,
var(--cyan),
#62EDFF
);

color:#fff;

transform:translateY(-4px);

}


/*==========================================================
IMAGE BORDER GLOW
==========================================================*/

.gallery-item::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

border-radius:24px;

padding:2px;

background:linear-gradient(
135deg,
transparent,
rgba(212,175,55,.45),
rgba(0,217,255,.45),
transparent
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    
    -webkit-mask-composite: exclude;
    mask-composite: exclude;
opacity:0;

transition:.5s;

pointer-events:none;

}

.gallery-item:hover::before{

opacity:1;

}


/*==========================================================
PLUS ICON
==========================================================*/

.gallery-icon{

position:absolute;

top:50%;
left:50%;

transform:translate(-50%,-50%) scale(.7);

width:75px;
height:75px;

border-radius:50%;

background:rgba(255,255,255,.12);

backdrop-filter:blur(15px);

display:flex;

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

font-size:28px;

color:white;

opacity:0;

transition:.45s;

}

.gallery-item:hover .gallery-icon{

opacity:1;

transform:translate(-50%,-50%) scale(1);

}


/*==========================================================
CATEGORY BADGE
==========================================================*/

.gallery-badge{

position:absolute;

top:20px;
left:20px;

padding:8px 16px;

border-radius:50px;

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

backdrop-filter:blur(10px);

color:white;

font-size:.85rem;

font-weight:600;

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

}


/*==========================================================
LOAD MORE BUTTON
==========================================================*/

.gallery-load{

margin-top:60px;

text-align:center;

}


/*==========================================================
HOVER SHADOW
==========================================================*/

.gallery-item:hover{

filter:brightness(108%);

}


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

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

gap:20px;

}

.gallery-item img{

height:260px;

}

.gallery-filter{

gap:10px;

}

.gallery-filter button{

padding:12px 20px;

font-size:14px;

}

.gallery-overlay{

padding:20px;

}

.gallery-overlay h3{

font-size:1.3rem;

}

}
/*==========================================================
                    PREMIUM FOOTER
==========================================================*/

.footer{

position:relative;

padding:100px 0 30px;

background:
linear-gradient(
180deg,
#08111F 0%,
#05070F 100%
);

overflow:hidden;

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

}


/*==========================================================
TOP GLOW
==========================================================*/

.footer::before{

content:"";

position:absolute;

top:-180px;
left:50%;

transform:translateX(-50%);

width:700px;
height:350px;

background:

radial-gradient(circle,
rgba(0,217,255,.10),
transparent 70%);

pointer-events:none;

}

.footer::after{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:2px;

background:

linear-gradient(
90deg,
transparent,
var(--gold),
var(--cyan),
transparent
);

}


/*==========================================================
LOGO
==========================================================*/

.footer-logo{

font-family:'Cinzel',serif;

font-size:2.3rem;

font-weight:700;

color:white;

margin-bottom:20px;

}

.footer-logo span{

color:var(--gold);

text-shadow:

0 0 18px rgba(212,175,55,.35);

}


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

.footer-about{

color:var(--text-light);

line-height:1.9;

max-width:420px;

margin-bottom:30px;

}


/*==========================================================
HEADINGS
==========================================================*/

.footer h4{

font-size:1.35rem;

margin-bottom:25px;

position:relative;

padding-bottom:10px;

}

.footer h4::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:60px;
height:2px;

background:

linear-gradient(
90deg,
var(--gold),
transparent
);

}


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

.footer-links{

list-style:none;

padding:0;

margin:0;

}

.footer-links li{

margin-bottom:15px;

}

.footer-links a{

color:var(--text-light);

display:inline-flex;

align-items:center;

gap:10px;

transition:.35s;

}

.footer-links a:hover{

color:var(--gold);

transform:translateX(8px);

}

.footer-links a i{

color:var(--cyan);

font-size:14px;

}


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

.footer-contact{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:22px;

}

.footer-contact i{

width:48px;
height:48px;

display:flex;

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

border-radius:50%;

background:

rgba(255,255,255,.05);

color:var(--gold);

font-size:18px;

transition:.35s;

}

.footer-contact:hover i{

background:var(--gold);

color:#000;

transform:rotate(360deg);

}

.footer-contact span{

color:var(--text-light);

line-height:1.7;

}


/*==========================================================
SOCIAL ICONS
==========================================================*/

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:50px;
height:50px;

display:flex;

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

border-radius:50%;

background:

rgba(255,255,255,.05);

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

color:white;

font-size:18px;

transition:.4s;

}

.footer-social a:hover{

background:

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

color:#000;

transform:
translateY(-6px)
rotate(360deg);

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

}


/*==========================================================
NEWSLETTER
==========================================================*/

.footer-newsletter{

margin-top:25px;

}

.footer-newsletter p{

margin-bottom:18px;

}

.footer-newsletter form{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.footer-newsletter input{

flex:1;

min-width:220px;

padding:15px 20px;

border-radius:50px;

background:

rgba(255,255,255,.05);

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

color:white;

outline:none;

transition:.35s;

}

.footer-newsletter input:focus{

border-color:var(--cyan);

box-shadow:

0 0 20px rgba(0,217,255,.18);

}

.footer-newsletter button{

padding:15px 30px;

border:none;

border-radius:50px;

background:

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

color:#000;

font-weight:700;

transition:.35s;

cursor:pointer;

}

.footer-newsletter button:hover{

background:

linear-gradient(
135deg,
var(--cyan),
#6AEFFF
);

color:white;

transform:translateY(-4px);

}


/*==========================================================
DIVIDER
==========================================================*/

.footer-divider{

margin:60px 0 30px;

height:1px;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.15),
transparent
);

}


/*==========================================================
COPYRIGHT
==========================================================*/

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom p{

margin:0;

color:var(--text-muted);

font-size:.95rem;

}

.footer-bottom a{

color:var(--gold);

transition:.35s;

}

.footer-bottom a:hover{

color:var(--cyan);

}


/*==========================================================
PAYMENT / BADGES
==========================================================*/

.footer-badges{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.footer-badges img{

height:32px;

opacity:.75;

transition:.35s;

}

.footer-badges img:hover{

opacity:1;

transform:translateY(-4px);

}


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

@media(max-width:768px){

.footer{

text-align:center;

}

.footer h4::after{

left:50%;

transform:translateX(-50%);

}

.footer-about{

margin:auto auto 30px;

}

.footer-contact{

justify-content:center;

text-align:left;

}

.footer-social{

justify-content:center;

}

.footer-newsletter form{

flex-direction:column;

}

.footer-newsletter input,

.footer-newsletter button{

width:100%;

}

.footer-bottom{

justify-content:center;

text-align:center;

}
.footer-badges{

justify-content:center;

}

}
}

/* ==========================================================
   BRANCH PAGE FEATURES — DESKTOP + TABLET + MOBILE
   ========================================================== */

.membership-features {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

p.membership-features {
    color: #FFFFFF !important;
    font-size: 15px;
    line-height: 1.8;
    opacity: 1 !important;
    visibility: visible !important;
}

small.membership-features {
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    opacity: 1 !important;
    visibility: visible !important;
}

.card .membership-features {
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.membership-features i {
    color: #D4AF37 !important;
}
/*=====================================================================
    THE ROYAL GYM
    FINAL iOS / SAFARI DARK MODE FIX
    Prevents iPhone Safari from turning sections white
======================================================================*/

/* ----------------------------------------------------------
   FORCE DARK COLOR SCHEME
---------------------------------------------------------- */

:root {
    color-scheme: dark !important;
}

html {
    background-color: #05070F !important;
    color-scheme: dark !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: #05070F !important;
    color: #F4F7FB !important;
}


/* ----------------------------------------------------------
   FORCE ALL MAIN SECTIONS TO STAY DARK
---------------------------------------------------------- */

body,
main,
section,
.section,
.hero,
.hero-section,
.owner-section,
.why-choose-section,
.gallery-preview-section,
.offers-section,
.contact-section,
.membership-section,
.facilities-section,
.transformation-section,
.nutrition-section,
.branch-section {
    background-color: #05070F;
}


/* ----------------------------------------------------------
   PREVENT BOOTSTRAP LIGHT BACKGROUNDS
---------------------------------------------------------- */

.bg-light {
    background-color: #101722 !important;
    color: #F4F7FB !important;
}

.bg-white {
    background-color: #101722 !important;
    color: #F4F7FB !important;
}


/* ----------------------------------------------------------
   TEXT MUST REMAIN VISIBLE
---------------------------------------------------------- */

body,
body p,
section p,
.section p,
.section-text,
.card p,
.facility-card p,
.membership-card p,
.review-card p,
.branch-card p,
.nutrition-card p,
.transformation-card p {
    color: #D6DEE8 !important;
}


/* ----------------------------------------------------------
   HEADINGS
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.section-heading,
.section-title {
    color: #F4F7FB;
}


/* Gold text should ALWAYS remain gold */

.text-gold,
.text-warning {
    color: #D7B25C !important;
}


/* ----------------------------------------------------------
   LISTS / CHECKLISTS
---------------------------------------------------------- */

.intro-checklist,
.intro-checklist li,
.membership-features,
.membership-features li {
    color: #F4F7FB !important;
}


/* ----------------------------------------------------------
   CARDS
---------------------------------------------------------- */

.card,
.facility-card,
.membership-card,
.review-card,
.branch-card,
.nutrition-card,
.trainer-card,
.transformation-card,
.why-card,
.glass {
    background-color: #1B2A3B !important;
    color: #F4F7FB !important;
}


/* Card headings */

.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.facility-card h1,
.facility-card h2,
.facility-card h3,
.facility-card h4,
.facility-card h5,
.facility-card h6,
.membership-card h1,
.membership-card h2,
.membership-card h3,
.membership-card h4,
.membership-card h5,
.membership-card h6,
.review-card h1,
.review-card h2,
.review-card h3,
.review-card h4,
.review-card h5,
.review-card h6,
.branch-card h1,
.branch-card h2,
.branch-card h3,
.branch-card h4,
.branch-card h5,
.branch-card h6,
.nutrition-card h1,
.nutrition-card h2,
.nutrition-card h3,
.nutrition-card h4,
.nutrition-card h5,
.nutrition-card h6 {
    color: #F4F7FB !important;
}


/* Card paragraph text */

.card p,
.facility-card p,
.membership-card p,
.review-card p,
.branch-card p,
.nutrition-card p,
.trainer-card p,
.transformation-card p,
.why-card p {
    color: #D6DEE8 !important;
}


/* ----------------------------------------------------------
   BOOTSTRAP TEXT UTILITIES
---------------------------------------------------------- */

.text-dark {
    color: #F4F7FB !important;
}

.text-muted {
    color: #B7C0CC !important;
}

.text-secondary {
    color: #B7C0CC !important;
}

.text-light {
    color: #D6DEE8 !important;
}

.text-white {
    color: #FFFFFF !important;
}


/* ----------------------------------------------------------
   BOOTSTRAP HR
---------------------------------------------------------- */

hr {
    border-color: rgba(255,255,255,.18) !important;
}


/* ----------------------------------------------------------
   FORM ELEMENTS
---------------------------------------------------------- */

input,
textarea,
select,
.form-control,
.form-select {
    background-color: #111722 !important;
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,.15) !important;
}

input::placeholder,
textarea::placeholder {
    color: #9EACBC !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    background-color: #111722 !important;
    color: #FFFFFF !important;
    border-color: #D7B25C !important;
}


/* ----------------------------------------------------------
   NAVBAR
---------------------------------------------------------- */

.navbar {
    background: rgba(5,7,15,.94) !important;
}

.navbar-brand {
    color: #FFFFFF !important;
}

.navbar-nav .nav-link {
    color: #F4F7FB !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: #D7B25C !important;
}


/* ----------------------------------------------------------
   FOOTER
---------------------------------------------------------- */

footer,
.footer {
    background: #05070F !important;
    color: #FFFFFF !important;
}

footer p,
.footer p {
    color: #D6DEE8 !important;
}

footer a,
.footer a {
    color: #D6DEE8;
}


/* ----------------------------------------------------------
   IOS SAFARI SPECIFIC PROTECTION
---------------------------------------------------------- */

@supports (-webkit-touch-callout: none) {

    html {
        background: #05070F !important;
        color-scheme: dark !important;
    }

    body {
        background: #05070F !important;
        color: #F4F7FB !important;
    }

    section {
        background-color: #05070F !important;
    }

    .bg-light,
    .bg-white {
        background-color: #101722 !important;
    }

    .card,
    .facility-card,
    .membership-card,
    .review-card,
    .branch-card,
    .nutrition-card,
    .trainer-card,
    .transformation-card,
    .why-card {
        background-color: #1B2A3B !important;
    }
}


/* ----------------------------------------------------------
   IOS SAFE AREA
---------------------------------------------------------- */

@supports (padding: max(0px)) {

    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

}


/* ----------------------------------------------------------
   FINAL OVERRIDE
---------------------------------------------------------- */

html,
body {
    min-height: 100%;
    background: #05070F !important;
}

body::before,
body::after {
    pointer-events: none;
}