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

:root{

--bg:#071426;

--card:#10233d;
--card2:#18365e;

--primary:#38bdf8;
--secondary:#0ea5e9;

--success:#10b981;
--warning:#f59e0b;

--text:#ffffff;
--muted:#9fb3c8;

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

--radius:32px;

}

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

*{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

line-height:1.7;

}

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

.blob{

position:fixed;

border-radius:50%;

filter:blur(120px);

z-index:-1;

}

.blob-1{

width:450px;
height:450px;

background:
rgba(56,189,248,.15);

top:-120px;
left:-120px;

}

.blob-2{

width:400px;
height:400px;

background:
rgba(14,165,233,.12);

bottom:-100px;
right:-100px;

}

.blob-3{

width:300px;
height:300px;

background:
rgba(59,130,246,.08);

top:45%;
left:40%;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:
linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:999px;

}

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

.navbar{

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(20px);

background:
rgba(7,20,38,.85);

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

}

.nav-container{

max-width:1400px;

margin:auto;

padding:22px 40px;

display:flex;

align-items:center;

justify-content:space-between;

}

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo-icon{

width:50px;
height:50px;

display:flex;

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

border-radius:16px;

font-size:1.4rem;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.logo span{

font-size:2rem;

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

font-weight:800;

}

.nav-links{

display:flex;

gap:14px;

}

.nav-links a{

padding:12px 18px;

text-decoration:none;

color:#cbd5e1;

border-radius:999px;

transition:.3s;

}

.nav-links a:hover{

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

color:white;

}

.nav-actions{

display:flex;

gap:12px;

}

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

.primary-btn{

padding:14px 24px;

border:none;

cursor:pointer;

border-radius:16px;

font-weight:700;

color:white;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

transition:.35s;

}

.secondary-btn,
.outline-btn{

padding:14px 24px;

border-radius:16px;

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

background:none;

color:white;

cursor:pointer;

transition:.35s;

}

.primary-btn:hover,
.secondary-btn:hover,
.outline-btn:hover{

transform:
translateY(-4px);

}

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

.hero{

max-width:1400px;

margin:auto;

padding:100px 40px;

display:grid;

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

gap:60px;

align-items:center;

}

.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:999px;

background:
rgba(56,189,248,.15);

margin-bottom:24px;

font-weight:700;

color:#c8f2ff;

}

.hero h1{

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

line-height:1.05;

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

margin-bottom:20px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
var(--primary),
#7dd3fc
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.1rem;

color:var(--muted);

max-width:650px;

line-height:1.9;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:14px;

flex-wrap:wrap;

margin-bottom:40px;

}

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

.hero-stats{

display:grid;

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

gap:20px;

}

.hero-stat{

padding:24px;

text-align:center;

border-radius:24px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

}

.hero-stat h3{

font-size:2rem;

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

margin-bottom:8px;

}

.hero-stat p{

margin:0;

color:var(--muted);

}
/* ==========================================
HYDRATION CARD
========================================== */

.hero-right{

display:flex;

justify-content:center;

align-items:center;

}

.hydration-card{

width:100%;

max-width:460px;

padding:35px;

border-radius:36px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

box-shadow:
0 25px 50px rgba(0,0,0,.25);

}

/* ==========================================
PROGRESS RING
========================================== */

.ring-wrapper{

display:flex;

justify-content:center;

margin-bottom:30px;

}

.progress-ring{

width:260px;
height:260px;

border-radius:50%;

display:flex;

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

background:
conic-gradient(
var(--primary) 50%,
rgba(255,255,255,.08) 50%
);

position:relative;

}

.progress-ring::before{

content:"";

position:absolute;

width:210px;
height:210px;

border-radius:50%;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

}

.ring-center{

position:relative;

z-index:2;

text-align:center;

}

.ring-center h2{

font-size:2.8rem;

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

margin-bottom:8px;

}

.ring-center span{

color:var(--muted);

}

.goal-info{

display:grid;

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

gap:20px;

}

.goal-info div{

padding:20px;

border-radius:20px;

text-align:center;

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

}

.goal-info h4{

margin-bottom:8px;

font-size:1rem;

color:var(--muted);

}

.goal-info p{

font-size:1.2rem;

font-weight:700;

}

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

.section-header{

text-align:center;

margin-bottom:50px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(56,189,248,.15);

color:#c8f2ff;

font-weight:700;

margin-bottom:15px;

}

.section-header h2{

font-size:3rem;

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

margin-bottom:10px;

}

.section-header p{

color:var(--muted);

max-width:700px;

margin:auto;

}

/* ==========================================
QUICK ADD WATER
========================================== */

.quick-add-section{

max-width:1400px;

margin:auto;

padding:120px 40px;

}

.quick-grid{

display:grid;

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

gap:24px;

}

.water-card{

padding:35px;

border-radius:30px;

text-align:center;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

transition:.35s ease;

}

.water-card:hover{

transform:
translateY(-10px);

}

.water-icon{

font-size:3rem;

margin-bottom:20px;

}

.water-card h3{

font-size:2rem;

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

margin-bottom:10px;

}

.water-card p{

color:var(--muted);

margin-bottom:20px;

}

.water-card button{

padding:12px 20px;

border:none;

cursor:pointer;

border-radius:14px;

font-weight:700;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

}

/* ==========================================
REMINDERS
========================================== */

.reminders-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.reminders-grid{

display:grid;

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

gap:24px;

}

.reminder-card{

padding:30px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

transition:.35s ease;

}

.reminder-card:hover{

transform:
translateY(-8px);

}

.reminder-icon{

width:70px;
height:70px;

display:flex;

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

border-radius:20px;

font-size:1.8rem;

margin-bottom:20px;

}

.morning{

background:rgba(251,191,36,.15);

}

.work{

background:rgba(59,130,246,.15);

}

.gym{

background:rgba(16,185,129,.15);

}

.night{

background:rgba(139,92,246,.15);

}

.reminder-card h3{

margin-bottom:10px;

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

}

.reminder-card p{

color:var(--muted);

line-height:1.8;

margin-bottom:20px;

}

.reminder-time{

display:inline-block;

padding:10px 16px;

border-radius:999px;

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

}

/* ==========================================
STREAK CARD
========================================== */

.streak-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.streak-card{

padding:50px;

border-radius:36px;

display:flex;

justify-content:space-between;

align-items:center;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.streak-left span{

font-weight:700;

}

.streak-left h2{

font-size:4rem;

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

margin:10px 0;

}

.streak-circle{

width:140px;
height:140px;

border-radius:50%;

display:flex;

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

font-size:3rem;

font-weight:800;

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

backdrop-filter:blur(10px);

}

/* ==========================================
STATISTICS
========================================== */

.stats-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.stats-grid{

display:grid;

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

gap:24px;

}

.stat-card{

padding:35px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

}

.stat-icon{

width:70px;
height:70px;

margin:auto;

margin-bottom:20px;

display:flex;

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

border-radius:20px;

font-size:1.8rem;

}

.blue{
background:rgba(56,189,248,.15);
}

.cyan{
background:rgba(34,211,238,.15);
}

.purple{
background:rgba(139,92,246,.15);
}

.green{
background:rgba(16,185,129,.15);
}

.stat-card h3{

font-size:2rem;

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

margin-bottom:8px;

}

.stat-card p{

color:var(--muted);

}
/* ==========================================
OVERVIEW SECTION
========================================== */

.overview-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.overview-card{

padding:40px;

border-radius:32px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

}

.overview-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

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

}

.overview-row:last-child{

border-bottom:none;

}

.overview-row span{

color:var(--muted);

}

.overview-row strong{

font-size:1.1rem;

}

/* ==========================================
ANALYTICS SECTION
========================================== */

.analytics-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.analytics-card{

padding:40px;

border-radius:32px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

}

.chart-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:40px;

}

.chart-header h3{

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

font-size:1.6rem;

}

.chart-header span{

color:var(--muted);

}

.bar-chart{

height:320px;

display:flex;

align-items:flex-end;

justify-content:space-between;

gap:18px;

}

.bar-item{

flex:1;

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

}

.bar{

width:100%;

border-radius:18px 18px 0 0;

background:
linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

transition:.35s ease;

}

.bar:hover{

transform:
scaleY(1.05);

}

.bar-item span{

color:var(--muted);

font-size:.95rem;

}

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

.timeline-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.timeline-card{

padding:40px;

border-radius:32px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

position:relative;

}

.timeline-item{

display:flex;

gap:20px;

position:relative;

padding-bottom:35px;

}

.timeline-item:last-child{

padding-bottom:0;

}

.timeline-item::before{

content:"";

position:absolute;

left:8px;
top:22px;

width:2px;

height:100%;

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

}

.timeline-item:last-child::before{

display:none;

}

.timeline-dot{

width:18px;
height:18px;

border-radius:50%;

background:
var(--primary);

margin-top:4px;

flex-shrink:0;

}

.timeline-content h4{

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

margin-bottom:6px;

}

.timeline-content p{

color:var(--muted);

}

/* ==========================================
HEATMAP
========================================== */

.heatmap-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.heatmap-grid{

display:grid;

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

gap:12px;

max-width:700px;

margin:auto;

}

.heat{

aspect-ratio:1;

border-radius:12px;

transition:.3s ease;

}

.heat:hover{

transform:
scale(1.1);

}

.level-1{

background:
rgba(56,189,248,.15);

}

.level-2{

background:
rgba(56,189,248,.30);

}

.level-3{

background:
rgba(56,189,248,.55);

}

.level-4{

background:
rgba(56,189,248,.90);

}

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

.badges-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.badges-grid{

display:grid;

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

gap:24px;

}

.badge-card{

padding:35px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

transition:.35s ease;

font-size:2.5rem;

}

.badge-card:hover{

transform:
translateY(-8px);

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

}

.badge-card h3{

font-size:1.3rem;

margin:18px 0 10px;

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

}

.badge-card p{

font-size:1rem;

color:var(--muted);

}
/* ==========================================
SCHEDULE SECTION
========================================== */

.schedule-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.schedule-card{

padding:40px;

border-radius:32px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

}

.schedule-row{

display:grid;

grid-template-columns:
140px 1fr 120px;

align-items:center;

gap:20px;

padding:22px 0;

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

}

.schedule-row:last-child{

border-bottom:none;

}

.schedule-row span{

font-weight:700;

color:#dbeafe;

}

.schedule-row p{

color:var(--muted);

}

.schedule-row strong{

text-align:right;

color:var(--success);

}

/* ==========================================
HEALTH BENEFITS
========================================== */

.benefits-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.benefits-grid{

display:grid;

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

gap:24px;

}

.benefit-card{

padding:35px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

transition:.35s ease;

font-size:2.5rem;

}

.benefit-card:hover{

transform:
translateY(-10px);

}

.benefit-card h3{

font-size:1.3rem;

margin:18px 0 12px;

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

}

.benefit-card p{

color:var(--muted);

line-height:1.8;

}

/* ==========================================
SMART TIPS
========================================== */

.tips-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.tips-grid{

display:grid;

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

gap:24px;

}

.tip-card{

padding:35px;

border-radius:30px;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

transition:.35s ease;

font-size:2.3rem;

}

.tip-card:hover{

transform:
translateY(-8px);

}

.tip-card h3{

font-size:1.25rem;

margin:16px 0 10px;

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

}

.tip-card p{

color:var(--muted);

line-height:1.8;

}

/* ==========================================
AI COACH
========================================== */

.coach-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.coach-card{

padding:55px;

display:grid;

grid-template-columns:
120px 1fr;

gap:35px;

align-items:center;

border-radius:36px;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.coach-avatar{

width:120px;
height:120px;

border-radius:50%;

display:flex;

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

font-size:3rem;

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

backdrop-filter:blur(12px);

}

.coach-content span{

font-weight:700;

display:block;

margin-bottom:10px;

}

.coach-content h2{

font-size:2.5rem;

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

margin-bottom:16px;

}

.coach-content p{

max-width:700px;

line-height:1.9;

margin-bottom:24px;

}

/* ==========================================
PREMIUM FEATURES
========================================== */

.premium-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.premium-grid{

display:grid;

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

gap:24px;

}

.premium-card{

padding:40px;

border-radius:32px;

text-align:center;

background:
linear-gradient(
145deg,
var(--card),
var(--card2)
);

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

transition:.35s ease;

font-size:2.6rem;

}

.premium-card:hover{

transform:
translateY(-10px);

box-shadow:
0 0 30px rgba(56,189,248,.18);

}

.premium-card h3{

font-size:1.4rem;

margin:18px 0 12px;

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

}

.premium-card p{

color:var(--muted);

line-height:1.8;

}

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

.newsletter-section{

max-width:1400px;

margin:auto;

padding:0 40px 120px;

}

.newsletter-card{

padding:80px;

border-radius:40px;

text-align:center;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary),
#60a5fa
);

position:relative;

overflow:hidden;

}

.newsletter-card::before{

content:"";

position:absolute;

width:350px;
height:350px;

border-radius:50%;

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

top:-120px;
right:-120px;

}

.newsletter-card h2{

font-size:3rem;

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

margin-bottom:18px;

position:relative;

z-index:2;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.9;

position:relative;

z-index:2;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

margin-top:30px;

position:relative;

z-index:2;

}

.newsletter-form input{

width:380px;

padding:18px 20px;

border:none;

outline:none;

border-radius:18px;

}

.newsletter-form button{

padding:18px 26px;

border:none;

cursor:pointer;

border-radius:18px;

background:#0f172a;

color:white;

font-weight:700;

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

.footer{

background:#05101d;

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

margin-top:60px;

}

.footer-container{

max-width:1400px;

margin:auto;

padding:80px 40px;

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:40px;

}

.footer-logo{

font-size:2rem;

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

font-weight:800;

margin-bottom:18px;

color:#7dd3fc;

}

.footer-brand p{

color:var(--muted);

line-height:1.9;

margin-bottom:25px;

}

.footer-column h3{

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

margin-bottom:18px;

}

.footer-column ul{

list-style:none;

}

.footer-column li{

margin-bottom:12px;

}

.footer-column a{

text-decoration:none;

color:var(--muted);

transition:.3s ease;

}

.footer-column a:hover{

color:white;

padding-left:6px;

}

.social-links{

display:flex;

gap:12px;

}

.social-links a{

width:48px;
height:48px;

display:flex;

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

border-radius:16px;

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

color:white;

text-decoration:none;

transition:.35s ease;

}

.social-links a:hover{

transform:
translateY(-5px);

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

}

.footer-bottom{

padding:24px;

text-align:center;

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

color:var(--muted);

}

/* ==========================================
SCROLL TOP BUTTON
========================================== */

.scroll-top{

position:fixed;

right:30px;
bottom:30px;

width:65px;
height:65px;

border:none;

cursor:pointer;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

font-size:1.2rem;

opacity:0;

visibility:hidden;

transform:
translateY(20px);

transition:.35s ease;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

transform:
translateY(0);

}

.scroll-top:hover{

transform:
translateY(-6px);

box-shadow:
0 15px 35px rgba(56,189,248,.35);

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:
translateY(40px);

}

100%{

opacity:1;

transform:
translateY(0);

}

}

@keyframes float{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-12px);

}

100%{

transform:
translateY(0);

}

}

.hydration-card{

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

}

.water-card,
.reminder-card,
.stat-card,
.badge-card,
.benefit-card,
.tip-card,
.premium-card{

animation:
fadeUp .8s ease both;

}

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

.water-card:hover,
.reminder-card:hover,
.stat-card:hover,
.badge-card:hover,
.benefit-card:hover,
.tip-card:hover,
.premium-card:hover{

box-shadow:
0 0 30px rgba(56,189,248,.15);

}

.primary-btn:hover{

box-shadow:
0 12px 25px rgba(56,189,248,.30);

}

.logo-icon{

box-shadow:
0 0 25px rgba(56,189,248,.25);

}

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

@media(max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.quick-grid{

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

}

.reminders-grid{

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

}

.stats-grid{

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

}

.badges-grid{

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

}

.benefits-grid{

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

}

.tips-grid{

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

}

.premium-grid{

grid-template-columns:1fr;

}

.footer-container{

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

}

}

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

@media(max-width:768px){

.nav-container{

flex-direction:column;

gap:20px;

}

.nav-links{

flex-wrap:wrap;

justify-content:center;

}

.hero,
.quick-add-section,
.reminders-section,
.streak-section,
.stats-section,
.overview-section,
.analytics-section,
.timeline-section,
.heatmap-section,
.badges-section,
.schedule-section,
.benefits-section,
.tips-section,
.coach-section,
.premium-section,
.newsletter-section{

padding-left:20px;
padding-right:20px;

}

.hero-stats,
.quick-grid,
.reminders-grid,
.stats-grid,
.badges-grid,
.benefits-grid,
.tips-grid{

grid-template-columns:1fr;

}

.coach-card{

grid-template-columns:1fr;

text-align:center;

}

.schedule-row{

grid-template-columns:1fr;

text-align:center;

}

.chart-header{

flex-direction:column;

gap:10px;

}

.footer-container{

grid-template-columns:1fr;

padding:60px 20px;

}

.newsletter-card{

padding:50px 25px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

}

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

@media(max-width:500px){

.hero h1{

font-size:2.8rem;

}

.hero-stat{

padding:18px;

}

.section-header h2{

font-size:2rem;

}

.newsletter-card h2{

font-size:2rem;

}

.streak-left h2{

font-size:3rem;

}

.streak-circle{

width:100px;
height:100px;

font-size:2rem;

}

.progress-ring{

width:220px;
height:220px;

}

.progress-ring::before{

width:180px;
height:180px;

}

.ring-center h2{

font-size:2rem;

}

.scroll-top{

width:55px;
height:55px;

right:20px;
bottom:20px;

}

}

/* ==========================================
END OF FILE
========================================== */
/* ==========================================
   SIDEBAR INTEGRATION ADJUSTMENTS
   ========================================== */
body {
  margin-left: 290px;
}

@media (max-width: 960px) {
  body {
    margin-left: 0;
  }
}