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

/* ==========================================
   ATUL TOMAR FITNESS
   EXERCISE STYLESHEET
========================================== */


/* ==========================================================
  01 Base

02 Hero
   ├── Layout
   ├── Content
   ├── Highlights
   ├── Actions
   ├── Image
   └── Specifications

03 Muscles Worked

04 Benefits

05 Timeline

06 Mistakes

07 Coach Tips

08 Variations

09 FAQ

10 Related Exercises

11 CTA

12 Responsive
========================================================== */
/* ==========================================================
   SECTION 01 : BASE / FOUNDATION
========================================================== */

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

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

    box-sizing:border-box;

}

/* ==========================================
   DOCUMENT
========================================== */

html{

    scroll-behavior:smooth;

}

/* ==========================================
   MEDIA
========================================== */

img,
picture,
svg{

    display:block;

    max-width:100%;

    height:auto;

}

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

a{

    color:inherit;

    text-decoration:none;

}

/* ==========================================
   FORM ELEMENTS
========================================== */

button,
input,
textarea,
select{

    font:inherit;

}

/* ==========================================
   COMMON LAYOUT FIXES
========================================== */

.container,
.hero-grid,
.muscle-details,
.timeline-content,
.benefit-content,
.related-exercise-content,
.progression-card{

    min-width:0;

}

/* ==========================================
   FLEX UTILITIES
========================================== */

.flex-center{

    display:flex;

    align-items:center;

    gap:1rem;

}

/* ==========================================
   ACCESSIBILITY
========================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:4px;

}

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

::selection{

    background:var(--primary);

    color:var(--white);

}
/* ==========================================================
   SECTION 02 : EXERCISE HERO
========================================================== */

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

.exercise-hero{

    position:relative;

    padding:7rem 0;

    overflow:hidden;

}


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

.hero-grid{

    display:grid;

    grid-template-columns:minmax(0,1.1fr) minmax(380px,480px);

    align-items:center;

    gap:5rem;

}


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

.hero-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:1.75rem;

    min-width:0;

}


/* ==========================================
   BREADCRUMB
========================================== */

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:.6rem;

    margin:0;

    font-size:.95rem;

    color:var(--gray);

}

.breadcrumb a{

    transition:color .25s ease;

}

.breadcrumb a:hover{

    color:var(--primary);

}

.current-page{

    color:var(--white);

    font-weight:600;

}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:.75rem;

    padding:.9rem 1.4rem;

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

    border-radius:999px;

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

    backdrop-filter:blur(12px);

    transition:

        border-color .3s ease,

        transform .3s ease,

        background .3s ease;

}

.hero-badge:hover{

    border-color:var(--primary);

    background:rgba(37,99,235,.08);

    transform:translateY(-2px);

}

.hero-badge img{

    width:22px;

    height:22px;

}

.hero-badge span{

    font-size:.95rem;

    font-weight:600;

    color:var(--white);

}


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

.hero-heading{

    display:flex;

    flex-direction:column;

    gap:1rem;

}

.hero-heading h1{

    margin:0;

    max-width:10ch;

    line-height:1.05;

}


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

.hero-tagline{

    margin:0;

    max-width:28ch;

    font-size:1.35rem;

    font-weight:600;

    line-height:1.6;

    color:var(--primary);

}


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

.hero-description{

    margin:0;

    max-width:62ch;

    color:var(--gray);

    line-height:1.9;

}
/* ==========================================================
   HERO HIGHLIGHTS
========================================================== */

.hero-highlights{

    display:flex;

    flex-direction:column;

    gap:1rem;

    margin-top:.5rem;

}


.hero-highlight{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:.9rem 1rem;

    border:1px solid transparent;

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;

    will-change:transform;

}


.hero-highlight:hover{

    transform:translateX(6px);

    border-color:rgba(37,99,235,.18);

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

}


.hero-highlight .icon-circle{

    flex-shrink:0;

    width:52px;

    height:52px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.hero-highlight:hover .icon-circle{

    transform:translateY(-2px);

}


.highlight-content{

    display:flex;

    flex-direction:column;

    gap:.25rem;

    min-width:0;

}


.highlight-content span{

    font-size:1rem;

    font-weight:600;

    color:var(--white);

    line-height:1.5;

}


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

.hero-actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-top:.75rem;

}


.hero-actions a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:180px;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.hero-actions a:hover{

    transform:translateY(-3px);

}


/* ==========================================================
   HERO MICRO INTERACTIONS
========================================================== */

.hero-badge,
.hero-highlight,
.hero-image-card,
.specification-card{

    will-change:transform;

}
/* ==========================================================
   HERO MEDIA
========================================================== */

.hero-media{

    display:flex;

    flex-direction:column;

    gap:2rem;

    min-width:0;

}


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

.hero-image-card{

    position:relative;

    overflow:hidden;

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

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

    background:var(--card);

    padding:1rem;

    box-shadow:0 24px 60px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.hero-image-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 32px 70px rgba(37,99,235,.16);

}

.hero-image-card img{

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

    border-radius:calc(var(--radius-large) - .35rem);

    transition:transform .6s ease;

}

.hero-image-card:hover img{

    transform:scale(1.04);

}


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

.hero-specifications{

    display:grid;

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

    gap:1rem;

}


/* ==========================================================
   SPECIFICATION CARD
========================================================== */

.specification-card{

    display:flex;

    align-items:center;

    gap:1rem;

    padding:1.1rem;

    background:var(--card);

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

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.specification-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

    box-shadow:0 18px 40px rgba(37,99,235,.12);

}

.specification-card .icon-circle{

    flex-shrink:0;

    width:56px;

    height:56px;

    transition:transform .3s ease;

}

.specification-card:hover .icon-circle{

    transform:scale(1.08);

}


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

.specification-content{

    display:flex;

    flex-direction:column;

    gap:.35rem;

    min-width:0;

}

.specification-content h4{

    margin:0;

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--gray);

}

.specification-content p{

    margin:0;

    font-size:1.05rem;

    font-weight:700;

    color:var(--white);

    line-height:1.3;

}
/* ==========================================================
   HERO RESPONSIVE
========================================================== */

/* ==========================================
   LARGE TABLETS
========================================== */

@media (max-width:1024px){

    .exercise-hero{

        padding:5rem 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:4rem;

    }

    .hero-content{

        max-width:720px;

    }

    .hero-media{

        width:100%;

        max-width:720px;

        margin:0 auto;

    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

    .exercise-hero{

        padding:4rem 0;

    }

    .hero-grid{

        gap:3rem;

    }

    .breadcrumb{

        font-size:.9rem;

    }

    .hero-heading h1{

        max-width:none;

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

    }

    .hero-tagline{

        max-width:none;

        font-size:1.15rem;

    }

    .hero-description{

        max-width:none;

        line-height:1.8;

    }

    .hero-highlights{

        gap:.85rem;

    }

    .hero-highlight{

        padding:.85rem 1rem;

    }

    .hero-highlight .icon-circle{

        width:48px;

        height:48px;

    }

    .hero-actions{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-actions a{

        width:100%;

        min-width:100%;

    }

    .hero-image-card{

        padding:.75rem;

    }

    .hero-specifications{

        gap:.85rem;

    }

}


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

@media (max-width:576px){

    .exercise-hero{

        padding:3.5rem 0;

    }

    .hero-grid{

        gap:2.5rem;

    }

    .hero-badge{

        padding:.75rem 1.15rem;

    }

    .hero-badge img{

        width:20px;

        height:20px;

    }

    .hero-heading{

        gap:.75rem;

    }

    .hero-heading h1{

        font-size:2.2rem;

    }

    .hero-tagline{

        font-size:1.05rem;

    }

    .hero-description{

        font-size:.96rem;

    }

    .hero-highlight{

        gap:.85rem;

        padding:.8rem;

    }

    .hero-highlight .icon-circle{

        width:44px;

        height:44px;

    }

    .highlight-content span{

        font-size:.95rem;

    }

    .hero-specifications{

        grid-template-columns:1fr;

    }

    .specification-card{

        padding:1rem;

    }

    .specification-card .icon-circle{

        width:50px;

        height:50px;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:380px){

    .exercise-hero{

        padding:3rem 0;

    }

    .breadcrumb{

        font-size:.82rem;

        gap:.35rem;

    }

    .hero-heading h1{

        font-size:2rem;

    }

    .hero-tagline{

        font-size:1rem;

    }

    .hero-description{

        font-size:.92rem;

    }

    .hero-highlight{

        padding:.75rem;

    }

    .hero-highlight .icon-circle{

        width:40px;

        height:40px;

    }

    .specification-card{

        gap:.85rem;

    }

}

/* ==========================================================
   SECTION 03 : MUSCLES WORKED
========================================================== */

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

.muscles-worked{

    padding:7rem 0;

}


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

.muscles-grid{

    display:grid;

    grid-template-columns:minmax(340px,420px) minmax(0,1fr);

    align-items:start;

    gap:4rem;

}


/* ==========================================
   ANATOMY
========================================== */

.muscles-anatomy{

    position:sticky;

    top:110px;

}


.anatomy-card{

    overflow:hidden;

    padding:1rem;

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

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

    background:var(--card);

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

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.anatomy-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 30px 65px rgba(37,99,235,.14);

}


.anatomy-card img{

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:contain;

    border-radius:calc(var(--radius-large) - .35rem);

}


/* ==========================================
   MUSCLE LIST
========================================== */

.muscles-list{

    display:flex;

    flex-direction:column;

    gap:2.5rem;

}


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

.muscle-group{

    display:flex;

    flex-direction:column;

    gap:1rem;

}


.group-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.group-header h3{

    margin:0;

}


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

.muscle-card{

    display:flex;

    align-items:center;

    gap:1.25rem;

    padding:1.25rem;

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

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

    background:var(--card);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.muscle-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 18px 40px rgba(37,99,235,.12);

}


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

.muscle-icon{

    flex-shrink:0;

}


.muscle-icon .icon-circle{

    width:58px;

    height:58px;

    transition:transform .3s ease;

}


.muscle-card:hover .icon-circle{

    transform:scale(1.08);

}


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

.muscle-content{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:.45rem;

    min-width:0;

}


.muscle-content h4{

    margin:0;

    font-size:1.15rem;

    font-weight:700;

    color:var(--white);

}


.muscle-content p{

    margin:0;

    color:var(--gray);

    font-size:.95rem;

}


/* ==========================================
   ACTIVATION BAR
========================================== */

.activation-meter{

    width:100%;

    height:8px;

    margin-top:.35rem;

    overflow:hidden;

    border-radius:999px;

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

}


.meter-fill{

    display:block;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

    transition:width .4s ease;

}


.level-5{ width:100%; }

.level-4{ width:80%; }

.level-3{ width:60%; }

.level-2{ width:40%; }

.level-1{ width:20%; }


/* ==========================================
   LABEL
========================================== */

.activation-label{

    margin-top:.2rem;

    font-size:.82rem;

    font-weight:600;

    color:var(--gray);

}
/* ==========================================================
   MUSCLES WORKED RESPONSIVE
========================================================== */

/* ==========================================
   LAPTOPS
========================================== */

@media (max-width:1024px){

    .muscles-worked{

        padding:5rem 0;

    }

    .muscles-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .muscles-anatomy{

        position:static;

        max-width:650px;

        margin:0 auto;

        width:100%;

    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

    .muscles-worked{

        padding:4rem 0;

    }

    .muscles-grid{

        gap:2.5rem;

    }

    .muscles-list{

        gap:2rem;

    }

    .muscle-card{

        padding:1rem;

        gap:1rem;

    }

    .muscle-icon .icon-circle{

        width:52px;

        height:52px;

    }

    .muscle-content h4{

        font-size:1.05rem;

    }

    .muscle-content p{

        font-size:.92rem;

    }

}


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

@media (max-width:576px){

    .muscles-worked{

        padding:3.5rem 0;

    }

    .muscles-grid{

        gap:2rem;

    }

    .anatomy-card{

        padding:.75rem;

    }

    .muscle-group{

        gap:.85rem;

    }

    .muscle-card{

        align-items:flex-start;

    }

    .muscle-icon .icon-circle{

        width:48px;

        height:48px;

    }

    .activation-meter{

        height:7px;

    }

    .activation-label{

        font-size:.8rem;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:380px){

    .muscles-worked{

        padding:3rem 0;

    }

    .muscle-card{

        padding:.9rem;

        gap:.85rem;

    }

    .muscle-icon .icon-circle{

        width:44px;

        height:44px;

    }

    .muscle-content h4{

        font-size:1rem;

    }

    .muscle-content p{

        font-size:.9rem;

    }

    .activation-label{

        font-size:.78rem;

    }

}
/* ==========================================================
   SECTION 04 : BENEFITS
========================================================== */

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

.exercise-benefits{

    padding:7rem 0;

}


/* ==========================================
   BENEFITS GRID
========================================== */

.benefits-list{

    display:grid;

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

    gap:1.5rem;

}


/* ==========================================
   BENEFIT CARD
========================================== */

.benefit-item{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

    padding:1.5rem;

    background:var(--card);

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

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.benefit-item:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(37,99,235,.12);

}


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

.benefit-item .icon-circle{

    flex-shrink:0;

    width:60px;

    height:60px;

    transition:transform .3s ease;

}


.benefit-item:hover .icon-circle{

    transform:scale(1.08);

}


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

.benefit-content{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:.65rem;

}


.benefit-content h3{

    margin:0;

    font-size:1.2rem;

    font-weight:700;

    line-height:1.3;

    color:var(--white);

}


.benefit-content p{

    margin:0;

    color:var(--gray);

    line-height:1.75;

}
/* ==========================================================
   BENEFITS RESPONSIVE
========================================================== */

/* ==========================================
   LAPTOPS
========================================== */

@media (max-width:1024px){

    .exercise-benefits{

        padding:5rem 0;

    }

    .benefits-list{

        gap:1.25rem;

    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

    .exercise-benefits{

        padding:4rem 0;

    }

    .benefits-list{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .benefit-item{

        padding:1.25rem;

        gap:1rem;

    }

    .benefit-item .icon-circle{

        width:56px;

        height:56px;

    }

    .benefit-content h3{

        font-size:1.1rem;

    }

}


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

@media (max-width:576px){

    .exercise-benefits{

        padding:3.5rem 0;

    }

    .benefits-list{

        gap:1rem;

    }

    .benefit-item{

        padding:1rem;

        gap:.9rem;

    }

    .benefit-item .icon-circle{

        width:52px;

        height:52px;

    }

    .benefit-content{

        gap:.5rem;

    }

    .benefit-content h3{

        font-size:1.05rem;

    }

    .benefit-content p{

        font-size:.95rem;

        line-height:1.7;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:380px){

    .exercise-benefits{

        padding:3rem 0;

    }

    .benefit-item{

        padding:.9rem;

    }

    .benefit-item .icon-circle{

        width:48px;

        height:48px;

    }

    .benefit-content h3{

        font-size:1rem;

    }

    .benefit-content p{

        font-size:.9rem;

    }

}

/* ==========================================================
   SECTION 05 : HOW TO PERFORM
========================================================== */

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

.exercise-technique{

    padding:clamp(5rem,8vw,7rem) 0;

}


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

.exercise-timeline{

    max-width:1200px;

    margin:0 auto;

}


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

.timeline-step{

    position:relative;

    display:grid;

    grid-template-columns:88px minmax(0,1fr);

    align-items:flex-start;

    gap:2rem;

    padding-bottom:2.5rem;

}

.timeline-step:last-child{

    padding-bottom:0;

}

.timeline-step::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:43px;

    width:2px;

    background:linear-gradient(
        to bottom,
        rgba(37,99,235,.35),
        rgba(255,255,255,.08)
    );

}

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

    display:none;

}


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

.timeline-marker{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:88px;

    min-height:88px;

    flex-shrink:0;

}

.step-label{

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--gray);

}

.step-number{

    margin-top:.35rem;

    font-size:2rem;

    font-weight:800;

    line-height:1;

    color:var(--primary);

}


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

.timeline-card{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    padding:2rem;

    background:var(--card);

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

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.timeline-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(37,99,235,.12);

}


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

.timeline-header{

    margin:0;

}

.timeline-header h3{

    margin:0;

    font-size:1.5rem;

    line-height:1.35;

    color:var(--white);

}


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

.timeline-description{

    padding-bottom:1.5rem;

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

}

.timeline-description p{

    margin:0;

    max-width:65ch;

    color:var(--gray);

    line-height:1.8;

}


/* ==========================================
   COACH TIP
========================================== */

.coach-tip{

    display:flex;

    align-items:flex-start;

    gap:1rem;

    padding:1.25rem;

    background:rgba(37,99,235,.05);

    border:1px solid rgba(37,99,235,.15);

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

}

.coach-tip .icon-circle{

    flex-shrink:0;

}

.coach-tip-content{

    display:flex;

    flex-direction:column;

    gap:.5rem;

    min-width:0;

}

.coach-tip-title{

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--primary);

}

.coach-tip-content p{

    margin:0;

    color:var(--gray);

    line-height:1.75;

}

/* ==========================================================
   SECTION 06 : COMMON MISTAKES
========================================================== */

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

.common-mistakes{

    padding:7rem 0;

}


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

.mistakes-grid{

    display:grid;

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

    gap:1.75rem;

}


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

.mistake-card{

    display:flex;

    flex-direction:column;

    gap:1.75rem;

    padding:1.75rem;

    background:var(--card);

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

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

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


.mistake-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(37,99,235,.12);

}


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

.mistake-header{

    display:flex;

    align-items:flex-start;

    gap:1rem;

}


.mistake-header .icon-circle{

    flex-shrink:0;

    width:60px;

    height:60px;

    transition:transform .3s ease;

}


.mistake-card:hover .icon-circle{

    transform:scale(1.08);

}


.mistake-header h3{

    margin:0;

    font-size:1.25rem;

    line-height:1.3;

    color:var(--white);

}


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

.mistake-level{

    display:inline-flex;

    align-items:center;

    margin-top:.6rem;

    padding:.4rem .8rem;

    border-radius:999px;

    background:rgba(37,99,235,.12);

    color:var(--primary-light);

    font-size:.8rem;

    font-weight:600;

}


/* ==========================================
   BODY
========================================== */

.mistake-body{

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}


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

.mistake-section{

    display:flex;

    flex-direction:column;

    gap:.65rem;

    padding-top:1.25rem;

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

}


.mistake-section:first-child{

    padding-top:0;

    border-top:none;

}


/* ==========================================
   LABEL
========================================== */

.mistake-label{

    display:inline-flex;

    align-self:flex-start;

    padding:.4rem .8rem;

    border-radius:999px;

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

    color:var(--white);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


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

.mistake-section p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}
/* ==========================================================
   COMMON MISTAKES RESPONSIVE
========================================================== */

/* ==========================================
   LAPTOPS
========================================== */

@media (max-width:1024px){

    .common-mistakes{

        padding:5rem 0;

    }

    .mistakes-grid{

        gap:1.5rem;

    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

    .common-mistakes{

        padding:4rem 0;

    }

    .mistakes-grid{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .mistake-card{

        padding:1.5rem;

        gap:1.5rem;

    }

    .mistake-header .icon-circle{

        width:56px;

        height:56px;

    }

    .mistake-header h3{

        font-size:1.15rem;

    }

}


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

@media (max-width:576px){

    .common-mistakes{

        padding:3.5rem 0;

    }

    .mistakes-grid{

        gap:1rem;

    }

    .mistake-card{

        padding:1.25rem;

        gap:1.25rem;

    }

    .mistake-header{

        gap:.9rem;

    }

    .mistake-header .icon-circle{

        width:52px;

        height:52px;

    }

    .mistake-level{

        margin-top:.5rem;

        font-size:.75rem;

    }

    .mistake-section{

        gap:.6rem;

        padding-top:1rem;

    }

    .mistake-label{

        font-size:.75rem;

    }

    .mistake-section p{

        font-size:.95rem;

        line-height:1.7;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:380px){

    .common-mistakes{

        padding:3rem 0;

    }

    .mistake-card{

        padding:1rem;

    }

    .mistake-header{

        gap:.75rem;

    }

    .mistake-header .icon-circle{

        width:48px;

        height:48px;

    }

    .mistake-header h3{

        font-size:1.05rem;

    }

    .mistake-level{

        font-size:.72rem;

        padding:.35rem .7rem;

    }

    .mistake-label{

        font-size:.72rem;

    }

    .mistake-section p{

        font-size:.9rem;

    }

}
/* ==========================================================
   COACH'S TIPS
========================================================== */

.coach-tips{

    padding:clamp(5rem,8vw,7rem) 0;

}


/* ==========================================
   COACH CARD
========================================== */

.coach-card{

    max-width:900px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:2rem;

    padding:2.5rem;

    background:var(--card);

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

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

   transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.coach-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 20px 50px rgba(37,99,235,.12);

}


/* ==========================================
   COACH QUOTE
========================================== */

.coach-quote{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

    padding-bottom:2rem;

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

}

.coach-quote blockquote{

    margin:0;

    font-size:1.35rem;

    font-weight:600;

    line-height:1.7;

    color:var(--white);

    font-style:italic;

}


/* ==========================================
   TIPS LIST
========================================== */

.coach-tips-list{

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}


/* ==========================================
   SINGLE TIP
========================================== */

.coach-tip{

    display:flex;

    align-items:flex-start;

    gap:1rem;

}

.coach-tip p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


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

.coach-footer{

    padding-top:2rem;

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

}

.coach-signature h3{

    margin:0 0 .4rem;

    color:var(--white);

    font-size:1.2rem;

}

.coach-signature p{

    margin:0;

    color:var(--primary-light);

    font-weight:500;

}
/* ==========================================================
   EXERCISE PROGRESSION
========================================================== */

.exercise-progression{

    padding:clamp(5rem,8vw,7rem) 0;

}

.progression-roadmap{

    max-width:900px;

    margin:0 auto;

}


/* ==========================================
   STEP
========================================== */

.progression-step{

    display:grid;

    grid-template-columns:90px 1fr;

    gap:2rem;

    align-items:start;

}


/* ==========================================
   STEP NUMBER
========================================== */

.step-number{

    display:flex;

    justify-content:center;

}

.step-number span{

    display:flex;

    align-items:center;

    justify-content:center;

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--primary);

    color:var(--white);

    font-size:1.25rem;

    font-weight:700;

}


/* ==========================================
   PROGRESSION CARD
========================================== */

.progression-card{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

    padding:2rem;

    background:var(--card);

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

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

  transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.progression-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(37,99,235,.12);

}


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

.progression-level{

    display:inline-flex;

    align-self:flex-start;

    padding:.55rem 1.2rem;

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.04em;

}

.progression-level.beginner{

    background:rgba(34,197,94,.12);

    color:#4ADE80;

}

.progression-level.intermediate{

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

    color:#60A5FA;

}

.progression-level.advanced{

    background:rgba(239,68,68,.12);

    color:#F87171;

}


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

.progression-card h3{

    margin:0;

    font-size:1.6rem;

    color:var(--white);

}

.progression-card p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


/* ==========================================
   SPECS
========================================== */

.progression-specs{

    display:grid;

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

    gap:1.25rem;

    padding-top:1.5rem;

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

}

.progression-spec{

    display:flex;

    flex-direction:column;

    gap:.35rem;

}

.progression-spec span{

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--gray);

}

.progression-spec strong{

    color:var(--white);

    font-size:1rem;

}


/* ==========================================
   CONNECTOR
========================================== */

.progression-arrow{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:1.5rem 0;

}

.progression-arrow img{

    width:34px;

    height:34px;

    opacity:.9;

}


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

.progression-card:hover h3{

    color:var(--primary-light);

}

.progression-card:hover .step-number span{

    transform:scale(1.05);

}
/* ==========================================================
   QUESTIONS ANSWERED
========================================================== */

.exercise-faq{

    padding:clamp(5rem,8vw,7rem) 0;

}


/* ==========================================
   FAQ LIST
========================================== */

.faq-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

    max-width:900px;

    margin:0 auto;

}


/* ==========================================
   FAQ ITEM
========================================== */

.faq-item{

    background:var(--card);

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

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

    overflow:hidden;

   transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.faq-item:hover{

    border-color:var(--primary);

    box-shadow:0 16px 40px rgba(37,99,235,.10);

}


/* ==========================================
   QUESTION
========================================== */

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1.5rem;

    padding:1.5rem;

    border:none;

    background:none;

    color:var(--white);

    cursor:pointer;

    text-align:left;

    font:inherit;

}

.faq-question span{

    font-size:1.1rem;

    font-weight:600;

    line-height:1.6;

}


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

.faq-question .icon-circle{

    flex-shrink:0;

    transition:transform .35s ease;

}


/* ==========================================
   ANSWER
========================================== */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-answer p{

    margin:0;

    padding:0 1.5rem 1.5rem;

    color:var(--gray);

    line-height:1.8;

}


/* ==========================================
   ACTIVE STATE
========================================== */

.faq-item.active{

    border-color:var(--primary);

}

.faq-item.active .faq-question .icon-circle{

    transform:rotate(45deg);

}

.faq-item.active .faq-answer{

    max-height:300px;

}
/* ==========================================================
   EXPLORE MORE EXERCISES
========================================================== */

.related-exercises{

    padding:clamp(5rem,8vw,7rem) 0;

}


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

.related-exercises-grid{

    display:grid;

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

    gap:2rem;

}


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

.related-exercise-card{

    display:flex;

    flex-direction:column;

    background:var(--card);

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

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

    overflow:hidden;

    cursor:pointer;

    transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.related-exercise-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(37,99,235,.12);

}


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

.related-exercise-image{

    overflow:hidden;

    aspect-ratio:16/10;

}

.related-exercise-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .45s ease;

}

.related-exercise-card:hover img{

    transform:scale(1.05);

}


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

.related-exercise-content{

    display:flex;

    flex-direction:column;

    gap:1rem;

    padding:1.5rem;

    flex:1;

}

.related-exercise-content h3{

    margin:0;

    font-size:1.3rem;

    color:var(--white);

}

.related-exercise-content p{

    margin:0;

    color:var(--gray);

    line-height:1.75;

}


/* ==========================================
   META
========================================== */

/* ==========================================
   META
========================================== */

.related-exercise-meta{

    display:flex;

    flex-wrap:wrap;

    gap:.75rem;

    padding-top:1rem;

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

}

.meta-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.45rem .9rem;

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

    border-radius:999px;

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

    color:var(--gray);

    font-size:.82rem;

    font-weight:600;

  transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.related-exercise-card:hover .meta-pill{

    border-color:var(--primary);

    color:var(--white);

}

.related-exercise-meta span{

    font-size:.85rem;

    color:var(--gray);

    font-weight:600;

}


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

.related-link{

    margin-top:auto;

    color:var(--primary-light);

    font-weight:600;

    transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.related-exercise-card:hover .related-link{

    transform:translateX(6px);

}

/* ==========================================================
   JOURNEY CTA
========================================================== */

.exercise-cta{

    padding:clamp(5rem,8vw,7rem) 0;

}


/* ==========================================
   CTA CARD
========================================== */

.exercise-cta-card{

    max-width:1000px;

    margin:0 auto;

    padding:clamp(2.5rem,4vw,4rem);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:2rem;

    background:var(--card);

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

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

    transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.exercise-cta-card:hover{

    border-color:var(--primary);

    box-shadow:0 24px 60px rgba(37,99,235,.12);

}


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

.exercise-cta-card h2{

    margin:0;

    max-width:18ch;

}

.exercise-cta-card p{

    max-width:65ch;

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


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

.exercise-cta-buttons{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1rem;

}


/* ==========================================
   HIGHLIGHTS
========================================== */

.exercise-cta-highlights{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:1.5rem;

    width:100%;

    padding-top:2rem;

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

}


.cta-highlight{

    display:flex;

    align-items:center;

    gap:.85rem;

}


.cta-highlight span{

    font-weight:600;

    color:var(--white);

}


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

.cta-highlight:hover .icon-circle{

    transform:scale(1.08);

}

.exercise-cta-card:hover .section-badge{

    border-color:var(--primary);

}


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


/* ==========================================================
   1024px - Large Tablets & Small Laptops
========================================================== */

@media (max-width:1024px){

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

    .hero-highlight{

        gap:.85rem;

    }

    .hero-highlight .icon-circle{

        width:46px;
        height:46px;

    }


    /* ==========================================
       MUSCLES WORKED
    ========================================== */

    .muscles-worked-grid{

        grid-template-columns:1fr;

        gap:2.5rem;

    }

    .anatomy-card{

        max-width:650px;

        width:100%;

        margin:0 auto;

    }

    .muscles-content{

        gap:2rem;

    }

    .muscle-group{

        gap:1rem;

    }

    .muscle-item{

        padding:1.25rem;

    }

    .muscle-info{

        gap:1rem;

        align-items:center;

    }

    .muscle-details{

        width:100%;

    }

    .activation-meter{

        width:100%;

        max-width:220px;

    }


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

    .benefits-list{

        gap:1.5rem;

    }

    .benefit-item{

        gap:1.25rem;

    }


    /* ==========================================
       HOW TO PERFORM
    ========================================== */

    .timeline-step{

        grid-template-columns:72px 1fr;

        gap:1.5rem;

    }

    .timeline-content{

        padding:1.75rem;

    }


    /* ==========================================
       COMMON MISTAKES
    ========================================== */

    .mistakes-grid{

        gap:1.5rem;

    }


    /* ==========================================
       COACH TIPS
    ========================================== */

    .coach-card{

        padding:2rem;

    }


    /* ==========================================
       EXERCISE PROGRESSION
    ========================================== */

    .progression-roadmap{

        max-width:100%;

    }

    .progression-specs{

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

    }


    /* ==========================================
       FAQ
    ========================================== */

    .faq-question{

        padding:1.25rem 1.5rem;

    }

    .faq-answer p{

        padding:0 1.5rem 1.5rem;

    }


    /* ==========================================
       RELATED EXERCISES
    ========================================== */

    .related-exercises-grid{

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

        gap:1.75rem;

    }


    /* ==========================================
       CTA
    ========================================== */

    .exercise-cta-card{

        padding:2.75rem;

    }

}



/* ==========================================================
   768px - Tablets
========================================================== */

@media (max-width:768px){

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

    .hero-highlights{

        gap:1rem;

    }

    .hero-highlight{

        gap:.75rem;

    }

    .hero-highlight .icon-circle{

        width:44px;
        height:44px;

    }

    .hero-highlight span{

        font-size:.95rem;

        line-height:1.5;

    }


    /* ==========================================
       MUSCLES WORKED
    ========================================== */

    .muscles-worked{

        padding:4.5rem 0;

    }

    .muscles-worked-grid{

        gap:2rem;

    }

    .anatomy-card{

        padding:.85rem;

    }

    .muscles-content{

        gap:1.75rem;

    }

    .muscle-group{

        gap:1rem;

    }

    .muscle-item{

        padding:1rem;

    }

    .muscle-info{

        align-items:flex-start;

    }

    .muscle-details h4{

        font-size:1.05rem;

    }

    .activation-meter{

        width:100%;

        max-width:220px;

    }


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

    .benefits-list{

        gap:1.25rem;

    }

    .benefit-item{

        gap:1rem;

    }

    .benefit-content h3{

        font-size:1.1rem;

    }
/* ==========================================================
   SECTION 05 : HOW TO PERFORM
========================================================== */

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

.exercise-technique{

    padding:7rem 0;

}

.exercise-timeline{

    max-width:1280px;

    margin:0 auto;

}

.timeline-step{

    position:relative;

    display:grid;

    grid-template-columns:120px minmax(0,1fr);

    gap:2.5rem;

    align-items:start;

    padding-bottom:3rem;

}

.timeline-step:last-child{

    padding-bottom:0;

}


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

.timeline-step::before{

    content:"";

    position:absolute;

    left:59px;

    top:0;

    bottom:0;

    width:2px;

    background:linear-gradient(
        to bottom,
        rgba(37,99,235,.45),
        rgba(255,255,255,.08)
    );

}

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

    display:none;

}


/* ==========================================
   MARKER
========================================== */

.timeline-marker{

     position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:120px;

    height:120px;

    border-radius:50%;

    background:var(--card);

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

    transition:.35s;

}

.timeline-step:hover .timeline-marker{

    border-color:var(--primary);

    transform:scale(1.05);

    box-shadow:0 20px 45px rgba(37,99,235,.18);

}


/* ==========================================
   STEP LABEL
========================================== */

.step-label{

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.18em;

    color:var(--gray);

    text-transform:uppercase;

}

.step-number{

    margin-top:.35rem;

    font-size:2.5rem;

    font-weight:800;

    color:var(--primary);

}


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

.timeline-card{

    width:100%;

    max-width:none;

    padding:2.25rem;

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

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

    background:var(--card);

    transition:.35s;

}

.timeline-card:hover{

    border-color:var(--primary);

    transform:translateY(-6px);

    box-shadow:0 24px 50px rgba(37,99,235,.14);

}


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

.timeline-header{

    margin-bottom:1.25rem;

}

.timeline-header h3{

    margin:0;

    font-size:2rem;

}


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

.timeline-description{

    padding-bottom:1.75rem;

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

}

.timeline-description p{

    margin:0;

    max-width:72ch;

    font-size:1.05rem;

    line-height:1.9;

}


/* ==========================================
   COACH TIP
========================================== */

.coach-tip{

    display:flex;

    align-items:flex-start;

    gap:1.25rem;

    margin-top:1.75rem;

    padding:1.5rem;

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

    background:rgba(37,99,235,.05);

    border:1px solid rgba(37,99,235,.15);

}

.coach-tip .icon-circle{

    flex-shrink:0;

}

.coach-tip-content{

    flex:1;

}

.coach-tip-title{

    display:block;

    margin-bottom:.5rem;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--primary);

}

.coach-tip-content p{

    margin:0;

    line-height:1.8;

}
/* ==========================================================
   HOW TO PERFORM RESPONSIVE
========================================================== */

/* ==========================================
   LAPTOPS
========================================== */

@media (max-width:1024px){

    .exercise-technique{

        padding:5rem 0;

    }

    .exercise-timeline{

        max-width:100%;

    }

}


/* ==========================================
   TABLETS
========================================== */

@media (max-width:768px){

    .exercise-technique{

        padding:4rem 0;

    }

    .timeline-step{

        grid-template-columns:80px 1fr;

        gap:1.5rem;

        padding-bottom:2.5rem;

    }

    .timeline-step::before{

        left:39px;

    }

    .timeline-marker{

        width:80px;

        height:80px;

    }

    .step-label{

        font-size:.65rem;

        letter-spacing:.14em;

    }

    .step-number{

        font-size:1.6rem;

    }

    .timeline-card{

        padding:1.5rem;

        gap:1.25rem;

    }

    .timeline-header h3{

        font-size:1.25rem;

    }

    .coach-tip{

        padding:1rem;

    }

    .coach-tip .icon-circle{

        width:52px;

        height:52px;

    }

}


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

@media (max-width:576px){

    .exercise-technique{

        padding:3.5rem 0;

    }

    .timeline-step{

        grid-template-columns:1fr;

        gap:1rem;

        padding-bottom:2rem;

    }

    .timeline-step::before{

        display:none;

    }

    .timeline-marker{

        width:72px;

        height:72px;

        margin:0 auto;

    }

    .step-label{

        font-size:.62rem;

    }

    .step-number{

        font-size:1.4rem;

    }

    .timeline-card{

        padding:1.25rem;

    }

    .timeline-header{

        justify-content:flex-start;

    }

    .timeline-header h3{

        font-size:1.15rem;

    }

    .timeline-description{

        padding-bottom:1.25rem;

    }

    .timeline-description p{

        font-size:.95rem;

        line-height:1.75;

    }

    .coach-tip{

        gap:.85rem;

        padding:1rem;

    }

    .coach-tip .icon-circle{

        width:48px;

        height:48px;

    }

    .coach-tip-title{

        font-size:.75rem;

    }

    .coach-tip-content p{

        font-size:.92rem;

        line-height:1.7;

    }

}


/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:380px){ 


     /* ==========================================
       COMMON MISTAKES
    ========================================== */

    .mistakes-grid{

        gap:1.25rem;

    }

    .mistake-card{

        max-width:none;

    }


    /* ==========================================
       COACH TIPS
    ========================================== */

    .coach-card{

        padding:1.75rem;

    }

    .coach-quote{

        gap:1rem;

    }

    .coach-quote blockquote{

        font-size:1.15rem;

    }


    /* ==========================================
       EXERCISE PROGRESSION
    ========================================== */

    .progression-step{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .step-number{

        justify-content:flex-start;

    }

    .progression-card{

        padding:1.75rem;

    }

    .progression-specs{

        grid-template-columns:1fr;

    }


    /* ==========================================
       FAQ
    ========================================== */

    .faq-question{

        padding:1.25rem;

    }

    .faq-question span{

        font-size:1rem;

    }

    .faq-answer p{

        padding:0 1.25rem 1.25rem;

    }


    /* ==========================================
       RELATED EXERCISES
    ========================================== */

    .related-exercises-grid{

        gap:1.5rem;

    }

    .related-exercise-content{

        padding:1.25rem;

    }


    /* ==========================================
       CTA
    ========================================== */

    .exercise-cta-card{

        padding:2.5rem 2rem;

    }

    .exercise-cta-buttons{

        width:100%;

    }

    .exercise-cta-buttons .btn{

        flex:1;

        min-width:220px;

    }

    .exercise-cta-highlights{

        gap:1rem;

    }

}
}
/* ==========================================================
   576px - Large Mobile
========================================================== */

@media (max-width:576px){

    /* ==========================================
       GLOBAL
    ========================================== */

    section{

        padding:4rem 0;

    }

    .section-header{

        margin-bottom:2.5rem;

    }

    .section-header p{

        font-size:.95rem;

    }


    /* ==========================================
       COMMON MISTAKES
    ========================================== */

    .mistakes-grid{

        gap:1rem;

    }


    /* ==========================================
       COACH TIPS
    ========================================== */

    .coach-card{

        padding:1.5rem;

    }

    .coach-quote{

        flex-direction:column;

        align-items:flex-start;

    }

    .coach-quote blockquote{

        font-size:1.05rem;

        line-height:1.7;

    }

    .coach-footer{

        text-align:center;

    }


    /* ==========================================
       EXERCISE PROGRESSION
    ========================================== */

    .progression-card{

        padding:1.5rem;

    }

    .progression-card h3{

        font-size:1.25rem;

    }

    .progression-arrow img{

        width:28px;

        height:28px;

    }


    /* ==========================================
       QUESTIONS ANSWERED
    ========================================== */

    .faq-question{

        gap:.75rem;

        padding:1rem;

    }

    .faq-question span{

        font-size:.95rem;

    }

    .faq-answer p{

        padding:0 1rem 1rem;

    }


    /* ==========================================
       EXPLORE MORE EXERCISES
    ========================================== */

    .related-exercises-grid{

        grid-template-columns:1fr;

        gap:1.25rem;

    }

    .related-exercise-content{

        padding:1.25rem;

    }

    .related-exercise-content h3{

        font-size:1.1rem;

    }

    .related-exercise-meta{

        gap:.5rem;

    }


    /* ==========================================
       JOURNEY CTA
    ========================================== */

    .exercise-cta-card{

        padding:2rem 1.5rem;

    }

    .exercise-cta-buttons{

        flex-direction:column;

    }

    .exercise-cta-buttons .btn{

        width:100%;

        min-width:0;

    }

    .exercise-cta-highlights{

        flex-direction:column;

        align-items:flex-start;

        gap:.75rem;

    }

    .cta-highlight{

        width:100%;

    }

}


/* ==========================================================
   390px - Small Mobile
========================================================== */

@media (max-width:390px){

   

    /* ==========================================
       COACH TIPS
    ========================================== */

    .coach-card{

        padding:1.25rem;

    }

    .coach-quote blockquote{

        font-size:1rem;

    }


    /* ==========================================
       EXERCISE PROGRESSION
    ========================================== */

    .progression-card{

        padding:1.25rem;

    }


    /* ==========================================
       QUESTIONS ANSWERED
    ========================================== */

    .faq-question{

        padding:.9rem;

    }


    /* ==========================================
       EXPLORE MORE EXERCISES
    ========================================== */

    .related-exercise-content{

        padding:1rem;

    }


    /* ==========================================
       JOURNEY CTA
    ========================================== */

    .exercise-cta-card{

        padding:1.75rem 1.25rem;

    }

}