/* ==========================================
   ATUL TOMAR FITNESS V2
   Main Stylesheet
========================================== */



/* ==========================================
   GOOGLE FONTS
========================================== */

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


html,
body{

    overflow-x:hidden;

}
/* ==========================================
   CSS RESET
========================================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    font-family:inherit;
}

input,
textarea{
    font-family:inherit;
    outline:none;
}


.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.75rem;

    padding:.75rem 1.5rem;

    background:var(--card);

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

    border-radius:999px;

    color:var(--primary);

    font-size:1rem;

    font-weight:600;

    line-height:1;

    margin-bottom:2rem;

}
.section-badge img{

    width:22px;

    height:22px;

    flex-shrink:0;

    display:block;

    object-fit:contain;

}
.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:1rem 2rem;

    border:none;

    border-radius:999px;

    background:var(--primary);

    color:var(--white);

    font-weight:600;

    text-decoration:none;

    cursor:pointer;

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

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

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

}

.btn-primary img{

    width:20px;

    height:20px;

    flex-shrink:0;

}
.btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;

    padding:1rem 2rem;

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

    border-radius:999px;

    background:transparent;

    color:var(--white);

    text-decoration:none;

    font-weight:600;

    transition:all .3s ease;

}
.btn-secondary:hover{

    border-color:var(--primary);

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

    transform:translateY(-3px);

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

}
.btn-secondary img{

    width:22px;

    height:22px;

    flex-shrink:0;
   display:block;
}
.icon-circle{

    width:70px;
    height:70px;

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

    flex-shrink:0;

    border-radius:20px;

    background:linear-gradient(
        135deg,
        #4f8cff,
        #2563eb
    );

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

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


}

.icon-circle img{

    width:34px;

    height:34px;

    object-fit:contain;

    transition:all .35s ease;

}
.card-hover:hover .icon-circle{

    background:#2563eb;

    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.06);

}

.card-hover:hover .icon-circle img{

    transform:scale(1.08);

}
.primary-btn img,
.secondary-btn img{

    width:18px;

    height:18px;

    flex-shrink:0;

    transition:transform .3s ease;

}

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

    transform:translateX(4px);

}
.icon-arrow{

    width:18px;

    height:18px;

    flex-shrink:0;

    transition:transform .3s ease;

}

a:hover .icon-arrow{

    transform:translateX(6px);

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

:root{

    /* Colors */

    --background:#08090A;
    --surface:#111827;
    --card:#161B22;

    --primary:#2563EB;
    --primary-light:#3B82F6;
    --accent:#38BDF8;

    --white:#FFFFFF;
    --gray:#9CA3AF;

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

    /* Layout */

    --container-width:1280px;

    --navbar-height:82px;

    /* Radius */

    --radius-small:10px;
    --radius-medium:18px;
    --radius-large:30px;

    /* Animation */

    --transition:.30s ease;

}



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

body{

    background:var(--background);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.6;

}



.container{

    width:90%;

    max-width:var(--container-width);

    margin:auto;

}



section{

    padding:100px 0;

}



::selection{

    background:var(--primary);

    color:white;

}

.primary-btn,
.secondary-btn,
.program-btn,
.workout-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    white-space:nowrap;

}
.primary-btn img,
.secondary-btn img,
.program-btn img,
.workout-btn img{

    width:18px;

    height:18px;

    transition:transform .3s ease;

}
.primary-btn:hover img,
.secondary-btn:hover img,
.program-btn:hover img,
.workout-btn:hover img{

    transform:translateX(4px);

}

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

h1,
h2,
h3,
h4,
h5{

    font-weight:700;

    line-height:1.2;

}

p{

    color:var(--gray);

}
/* ======================================================
   BODY SCROLL LOCK
====================================================== */

body.menu-open{

    overflow:hidden;

}
/* =====================================================
   ATUL TOMAR FITNESS DESIGN SYSTEM
   Reusable Components
===================================================== */

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    background:#171717;

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

    border-radius:50px;

    color:#3b82f6;

    font-size:18px;

    font-weight:600;

}
.section-badge img{

       width:18px;
    height:18px;

    display:inline flex;

    flex-shrink:0;

}
/* ==========================================
   Premium Circular Icon
========================================== */

.icon-circle{

    width:70px;
    height:70px;

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

    flex-shrink:0;

    border-radius:50%;

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

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

    transition:all .35s ease;

}
/* ==========================================
   Icon Hover Through Card
========================================== */
.card-hover:hover .icon-circle{

    background:#2563eb;

    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.06);

}

.card-hover:hover .icon-circle img{

    transform:scale(1.08);

}
/* ==========================================
   Premium Card Hover
========================================== */

.card-hover{

    transition:var(--transition);

}

.card-hover:hover{

    transform:translateY(-8px);

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

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

}

.icon-circle img{

    width:34px;
    height:34px;

    object-fit:contain;

    transition:all .35s ease;

}
/* ==========================================
   Icon Hover Through Card
========================================== */

.highlight-card:hover .icon-circle{

    background:#2563eb;

    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.06);

}

.highlight-card:hover .icon-circle img{

    transform:scale(1.08);

}


/* ======================================================
   NAVBAR V2.0
   STATUS : IN PROGRESS
   VERSION : 2.0
====================================================== */


/* ======================================================
   NAVBAR V2.0
   STATUS : IN PROGRESS
   VERSION : 2.0
====================================================== */


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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--navbar-height);

    background:rgba(8,9,10,.90);

    backdrop-filter:blur(18px);

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

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

    z-index:1000;

}


/* ======================================================
   MAIN NAVIGATION
====================================================== */

.main-nav{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    height:var(--navbar-height);

}


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

.nav-logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

    text-decoration:none;

}

.logo-image{

    display:block;

    width:290px;

    height:auto;

    max-width:100%;

}


/* ======================================================
   DESKTOP MENU
====================================================== */

.nav-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    gap:40px;

    margin:0;

    padding:0;

}

.nav-item{

    list-style:none;

}


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

.nav-link{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:var(--white);

    font-size:15px;

    font-weight:600;

    letter-spacing:.05em;

    text-transform:uppercase;

    transition:color .3s ease;

}

.nav-link:hover{

    color:var(--accent);

}


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

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:width .3s ease;

}

.nav-link:hover::after,

.nav-link.active::after{

    width:100%;

}


/* ======================================================
   NAVIGATION ACTIONS
====================================================== */

.nav-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:20px;

    flex-shrink:0;

}


/* ======================================================
   SUBSCRIBE BUTTON
====================================================== */

.subscribe-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #2563EB,
        #3B82F6
    );

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    white-space:nowrap;

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

}

.subscribe-btn:hover{

    transform:translateY(-3px);

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

}


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

.menu-toggle{

    display:none;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    padding:0;

    background:none;

    border:none;

    cursor:pointer;

    border-radius:12px;

    transition:background .3s ease;

}

.menu-toggle:hover{

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

}

.menu-icon{

    display:block;

    width:28px;

    height:28px;

}
/* ======================================================
   RESPONSIVE NAVIGATION
====================================================== */

@media (max-width:992px){

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

    .site-header{

        height:80px;

    }

    .main-nav{

        height:80px;

        gap:16px;

    }

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

    .logo-image{

        width:180px;

    }

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

    .subscribe-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

        flex-shrink:0;

        z-index:1101;

    }

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

    .nav-menu{

        position:fixed;

        top:80px;

        left:0;

        width:100%;

        height:calc(100vh - 80px);

        margin:0;

        padding:40px 24px;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:flex-start;

        gap:28px;

        background:#0B1120;

        overflow-y:auto;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:translateY(-20px);

        transition:
            opacity .35s ease,
            transform .35s ease,
            visibility .35s ease;

        z-index:1100;

    }

    /* ==================================================
       OPEN MENU
    ================================================== */

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:translateY(0);

    }

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

    .nav-item{

        width:100%;

        text-align:center;

    }

    .nav-link{

        display:block;

        width:100%;

        padding:14px 0;

        font-size:18px;

    }

}


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

@media (max-width:576px){

    .logo-image{

        width:165px;

    }

    .nav-menu{

        padding:32px 20px;

        gap:24px;

    }

    .nav-link{

        font-size:17px;

    }

}


 /* ==========================================
 SECTION 01 : NAVIGATION
 STATUS : COMPLETE
 ========================================== */
 /* ======================================================
   SECTION 02 : HERO
   STATUS : CSS COMPLETE
====================================================== */


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

/* =====================================================
   SECTION 02 : HERO

   PURPOSE :
   Introduce the brand with a modern premium hero
   section featuring a strong headline, call-to-action,
   professional image and feature highlights.

   FEATURES :
   ✓ Responsive Two-Column Layout
   ✓ Hero Badge
   ✓ Large Typography
   ✓ CTA Buttons
   ✓ Highlight Cards
   ✓ Premium Image Card
   ✓ Responsive Design

   STATUS : COMPLETE
===================================================== */

/* ======================================================
   HERO SECTION
   VERSION : 2.0
   STATUS  : IN PROGRESS
====================================================== */


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

.hero-section{

    min-height:calc(100vh - var(--navbar-height));

    display:flex;

    align-items:center;

    padding:140px 0 90px;

}


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

.hero-content{

    display:grid;

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

    align-items:center;

    gap:80px;

}


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

.hero-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

}


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

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;

    padding:12px 22px;

    margin-bottom:36px;

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

    border-radius:999px;

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

    transition:var(--transition);

}

.hero-badge:hover{

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

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

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

}



.hero-badge:hover .badge-icon{

    transform:rotate(-10deg) scale(1.1);

}

.hero-badge span{

    color:var(--accent);

    font-size:15px;

    font-weight:600;

}


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

.hero-title{

    margin-bottom:28px;

    font-size:clamp(2.8rem,6vw,4rem);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

}

.hero-title span{

    color:var(--primary);

}


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

.hero-description{

    max-width:620px;

    margin-bottom:42px;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}
/* ======================================================
   HERO BUTTONS
====================================================== */

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:60px;

}

.hero-buttons .primary-btn,
.hero-buttons .secondary-btn{

    min-height:56px;

    padding:16px 32px;

}


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

.hero-highlights{

    display:grid;

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

    gap:20px;

}

.highlight-card{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:24px;

    background:var(--card);

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

    border-radius:20px;

    transition:var(--transition);

}

.highlight-card:hover{

    transform:translateY(-8px);

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

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

}

.highlight-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:68px;

    height:68px;

    margin-bottom:20px;

    border-radius:50%;

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

}

.highlight-icon img{

    width:32px;

    height:32px;

}

.highlight-content h3{

    margin-bottom:10px;

    font-size:18px;

}

.highlight-content p{

    line-height:1.6;

}


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

.hero-image-card{

    width:min(100%,520px);

    padding:18px;

    border-radius:28px;

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

    background:linear-gradient(
        180deg,
        rgba(37,99,235,.20),
        rgba(255,255,255,.03)
    );

}

.hero-image{

    display:block;

    width:100%;

    height:auto;

    border-radius:20px;

}


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

@media (max-width:992px){

    .hero-section{

        padding:130px 0 80px;

    }

    .hero-content{

        grid-template-columns:1fr;

        gap:60px;

    }

    .hero-left{

        align-items:center;

        text-align:center;

    }

    .hero-description{

        max-width:650px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-highlights{

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

        width:100%;

    }

}


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

@media (max-width:768px){

    .hero-section{

        padding:120px 0 70px;

    }

    .hero-title{

        font-size:clamp(2.2rem,9vw,3.2rem);

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        width:100%;

    }

    .hero-highlights{

        grid-template-columns:1fr;

    }

    .highlight-card{

        align-items:center;

        text-align:center;

    }

}


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

@media (max-width:480px){

    .hero-section{

        padding:110px 0 60px;

    }

    .hero-badge{

        width:100%;

        justify-content:center;

    }

    .hero-title{

        font-size:2.1rem;

        line-height:1.15;

    }

    .hero-description{

        font-size:15px;

        line-height:1.7;

    }

    .hero-image-card{

        padding:12px;

    }

}

 /* ===================================================== 
  STATUS : COMPLETE
===================================================== */

/* =====================================================
   SECTION 03 : WHY CHOOSE ATUL TOMAR FITNESS

   PURPOSE :
   Highlight the core strengths of Atul Tomar Fitness
   using premium feature cards.

   STATUS : COMPLETE
===================================================== */

.why-choose-section{

    padding:120px 0;

    background:#0A0A0A;

}

.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 70px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

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

    border-radius:999px;

    color:#3B82F6;

    background:#111111;

    font-weight:600;

    font-size:15px;

    margin-bottom:25px;

}

.section-title{

    font-size:56px;

    font-weight:800;

    line-height:1.1;

    color:#ffffff;

    margin-bottom:25px;

}

.section-title span{

    color:#3B82F6;

}

.section-description{

    max-width:700px;

    margin:auto;

    font-size:19px;

    line-height:1.8;

    color:#9CA3AF;

     margin-bottom:90px;

}


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

.feature-grid{

    display:grid;

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

    gap:30px;

    margin-top:80px;

}


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

.feature-card{

    background:#15181F;

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

    border-radius:24px;

    padding:32px;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#3B82F6;

    box-shadow:0 20px 50px rgba(59,130,246,.15);

}


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

.feature-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563EB,#1D4ED8);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.feature-icon i{

    color:#ffffff;

    font-size:28px;

}

.feature-card:hover .feature-icon{

    transform:scale(1.1);

    box-shadow:0 0 25px rgba(59,130,246,.45);

}


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

.feature-card h3{

    font-size:28px;

    color:#ffffff;

    margin-bottom:18px;

}

.feature-card p{

    color:#A1A1AA;

    line-height:1.8;

    font-size:17px;

    margin-bottom:28px;

}


/* =====================================
   LEARN MORE
===================================== */

.feature-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#3B82F6;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.feature-link:hover{

    gap:16px;

}

.feature-link i{

    font-size:14px;

}


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

@media(max-width:992px){

    .feature-grid{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:42px;

    }

}

@media(max-width:768px){

    .why-choose-section{

       padding-top: 120px;
    padding-bottom: 160px;

    }

    .section-title{

        font-size:34px;

    }

    .feature-card{

        padding:30px;

    }

}

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

.section-divider{

    width:220px;

    height:2px;

    margin:90px auto 0;

    background:linear-gradient(
        90deg,
        transparent,
        #3B82F6,
        transparent
    );

    border-radius:50px;

}
/* ==========================================
   Link Arrow
========================================== */

.icon-arrow{

    width:18px;
    height:18px;

    transition:var(--transition);

    flex-shrink:0;

}
.feature-link:hover .icon-arrow{

    transform:translateX(5px);

}
/* ==========================================================
   SECTION 03 : WHY CHOOSE ATUL TOMAR FITNESS
   ----------------------------------------------------------
   Purpose:
   • Style the "Why Choose Us" section.
   • Display premium feature cards in a responsive grid.
   • Maintain consistent branding across the website.

   Includes:
   ✓ Section Layout
   ✓ Section Badge
   ✓ Main Heading
   ✓ Description Text
   ✓ Feature Grid
   ✓ Feature Cards
   ✓ Icon Container
   ✓ Card Titles
   ✓ Card Description
   ✓ Learn More Links
   ✓ Hover Effects
   ✓ Section Divider

   Theme:
   • Dark Premium Design
   • Electric Blue Accent
   • Smooth Hover Animations
   • Responsive Layout

   Status : ✅ Completed
========================================================== */


/* ==========================================================
   SECTION 04 : EXERCISE LIBRARY
   ----------------------------------------------------------
   Purpose:
   • Display workout categories.
   • Encourage visitors to explore exercises.
   • Maintain premium dark fitness theme.

   Includes:
   ✓ Section Layout
   ✓ Section Badge
   ✓ Section Heading
   ✓ Description
   ✓ Exercise Grid
   ✓ Exercise Cards
   ✓ Exercise Icons
   ✓ Card Hover Effect
   ✓ Explore Button

   Theme:
   • Dark Premium Design
   • Electric Blue Accent
   • Responsive Grid Layout

   Status : ✅ Completed
========================================================== */


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

.exercise-section{

    padding: 80px 0 160px;

    background:#0A0A0A;

}


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

.exercise-section .section-badge{

    width:fit-content;

    margin:0 auto 30px;

    padding:14px 30px;

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

    border-radius:999px;

    background:#111;

    color:#3B82F6;

    font-size:18px;

    font-weight:600;

}


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

.exercise-section .section-title{

    text-align:center;

    color:#fff;

    font-size:62px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:25px;

}

.exercise-section .section-title span{

    display:block;

    color:#3B82F6;

}


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

.exercise-section .section-description{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

    color:#9CA3AF;

    font-size:22px;

    line-height:1.8;

}


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

.exercise-grid{

    display:grid;

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

    gap:30px;

}


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

.exercise-card{

    background:#171A22;

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

    border-radius:28px;

        padding: 40px 40px 50px;

    transition:.35s ease;

     display: flex;

    flex-direction: column;

}

.exercise-card:hover{

    transform: translateY(-10px)
        scale(1.02);

    border-color:#3B82F6;

      box-shadow: 0 20px 40px rgba(59,130,246,.18);

}


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

.exercise-icon{

    width:80px;

    height:80px;

    border-radius:22px;

    background:linear-gradient(135deg,#3B82F6,#2563EB);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    margin-bottom:35px;

}


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

.exercise-card h3{

    color:#fff;

    font-size:34px;

    font-weight:700;

    margin-bottom:18px;

}


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

.exercise-card p{

    color:#A8B0C0;

    line-height:1.8;

    font-size:18px;

    margin-bottom:35px;

}


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

.exercise-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.icon-arrow{

    width:18px;

    height:18px;

    flex-shrink:0;

    transition:transform .3s ease;

}

.exercise-link:hover{

    color:var(--primary-light);

}

.exercise-link:hover .icon-arrow{

    transform:translateX(6px);

}


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

@media(max-width:1200px){

.exercise-grid{

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

}

}


@media(max-width:768px){

.exercise-grid{

grid-template-columns:1fr;

}

.exercise-section .section-title{

font-size:42px;

}

.exercise-section .section-description{

font-size:18px;

}

}

.section-divider{

    width:260px;
    height:2px;

    margin:0 auto 80px;

    background:linear-gradient(
        90deg,
        transparent,
        #3B82F6,
        transparent
    );

    opacity:.9;

}
/*======================================================
  SECTION 05 - FEATURED WORKOUT VIDEOS
  Styles for section heading, video cards,
  thumbnails, play button, CTA button, and divider.
======================================================*/


/* ======================================================
   FEATURED VIDEOS
   VERSION : 2.0
====================================================== */


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

.featured-videos-section{

    padding:120px 0;

}


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

.video-grid{

    display:grid;

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

    gap:30px;

}


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

.video-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:var(--card);

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

    border-radius:24px;

    overflow:hidden;

    transition:var(--transition);

}

.video-card:hover{

    transform:translateY(-10px);

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

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

}


/* ======================================================
   THUMBNAIL
====================================================== */

.video-thumbnail{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/9;

}

.video-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .4s ease;

}

.video-card:hover .video-thumbnail img{

    transform:scale(1.08);

}


/* ======================================================
   PLAY BUTTON
====================================================== */

.play-button{

    position:absolute;

    top:50%;

    left:50%;

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

    width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:var(--transition);

}

.play-icon{

    width:28px;

    height:28px;

}

.video-card:hover .play-button{

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

}


/* ======================================================
   DURATION
====================================================== */

.video-duration{

    position:absolute;

    right:16px;

    bottom:16px;

    padding:6px 10px;

    border-radius:8px;

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

    color:#fff;

    font-size:13px;

    font-weight:600;

}


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

.video-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}

.video-content h3{

    margin-bottom:16px;

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

    color:#fff;

}

.video-content p{

    flex:1;

    margin-bottom:26px;

    color:var(--gray);

    line-height:1.8;

}


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

.video-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.video-link:hover{

    color:var(--primary-light);

}

.video-link:hover .icon-arrow{

    transform:translateX(6px);

}


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

.videos-button{

    margin-top:70px;

    text-align:center;

}


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

@media (max-width:992px){

    .featured-videos-section{

        padding:100px 0;

    }

    .video-grid{

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

    }

}


@media (max-width:768px){

    .featured-videos-section{

        padding:90px 0;

    }

    .video-grid{

        grid-template-columns:1fr;

    }

    .video-content{

        padding:26px;

    }

}


@media (max-width:576px){

    .featured-videos-section{

        padding:80px 0;

    }

    .video-content{

        text-align:center;

        align-items:center;

    }

    .video-link{

        justify-content:center;

    }

}
/* ======================================================
   SECTION 06
   NUTRITION
   VERSION : 2.0
====================================================== */


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

.nutrition-section{

    padding:120px 0;

}


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

.nutrition-grid{

    display:grid;

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

    gap:30px;

}


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

.nutrition-card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:36px;

    background:var(--card);

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

    border-radius:24px;

    transition:var(--transition);

}

.nutrition-card:hover{

    transform:translateY(-10px);

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

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

}


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

.nutrition-icon{

    margin-bottom:28px;

}


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

.nutrition-card h3{

    margin-bottom:18px;

    color:#ffffff;

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

    line-height:1.3;

}


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

.nutrition-card p{

    flex:1;

    margin-bottom:28px;

    color:var(--gray);

    font-size:17px;

    line-height:1.8;

}


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

.nutrition-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

    transition:var(--transition);

}

.nutrition-link:hover{

    gap:16px;

}

.nutrition-link:hover .icon-arrow{

    transform:translateX(6px);

}


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

.section-button{

    margin-top:70px;

    text-align:center;

}

.section-button .primary-btn{

    min-width:260px;

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

@media (max-width:992px){

    .nutrition-section{

        padding:100px 0;

    }

    .nutrition-grid{

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

        gap:24px;

    }

}


@media (max-width:768px){

    .nutrition-section{

        padding:90px 0;

    }

    .nutrition-grid{

        grid-template-columns:1fr;

    }

    .nutrition-card{

        padding:30px;

    }

    .nutrition-card h3{

        font-size:1.7rem;

    }

    .nutrition-card p{

        font-size:16px;

    }

    .nutrition-link{

        font-size:16px;

    }

    .section-button{

        margin-top:60px;

    }

    .section-button .primary-btn{

        width:100%;

        max-width:340px;

    }

}


@media (max-width:576px){

    .nutrition-section{

        padding:80px 0;

    }

    .nutrition-card{

        padding:24px;

        text-align:center;

        align-items:center;

    }

    .nutrition-icon{

        margin-bottom:22px;

    }

    .nutrition-card h3{

        font-size:1.45rem;

    }

    .nutrition-card p{

        font-size:15px;

        line-height:1.7;

    }

    .nutrition-link{

        justify-content:center;

    }

    .section-button{

        margin-top:50px;

    }

}


@media (max-width:390px){

    .nutrition-section{

        padding:70px 0;

    }

    .nutrition-card{

        padding:22px;

    }

    .nutrition-card h3{

        font-size:1.3rem;

    }

    .nutrition-card p{

        font-size:14px;

    }

    .section-button .primary-btn{

        width:100%;

    }

}
/* ======================================================
   SECTION 07
   FITNESS TOOLS
   VERSION : 2.0
====================================================== */


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

.tools-section{

    padding:120px 0;

}


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

.tools-section .section-header{

    max-width:780px;

    margin:0 auto 80px;

    text-align:center;

}


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

.tools-section h2{

    margin-bottom:26px;

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

    font-weight:800;

    line-height:1.1;

    letter-spacing:-1px;

    color:#ffffff;

}

.tools-section h2 span{

    display:block;

    color:var(--primary);

}


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

.tools-section .section-header p{

    max-width:700px;

    margin:0 auto;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}
/* ======================================================
   TOOLS GRID
====================================================== */

.tools-grid{

    display:grid;

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

    gap:30px;

}


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

.tool-card{

    display:flex;

    flex-direction:column;

    height:100%;

    padding:36px;

    background:var(--card);

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

    border-radius:24px;

    transition:var(--transition);

}

.tool-card:hover{

    transform:translateY(-10px);

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

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

}


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

.tool-icon{

    margin-bottom:28px;

}


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

.tool-card h3{

    margin-bottom:18px;

    color:#ffffff;

    font-size:clamp(1.4rem,3vw,2rem);

    line-height:1.3;

}

.tool-card p{

    flex:1;

    margin-bottom:28px;

    color:var(--gray);

    font-size:17px;

    line-height:1.8;

}


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

.tool-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.tool-link:hover{

    color:var(--primary-light);

}


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

.section-button{

    margin-top:70px;

    text-align:center;

}


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

.tools-section .section-divider{

    width:220px;

    height:2px;

    margin:90px auto 0;

    border-radius:999px;

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

}


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

@media (max-width:992px){

    .tools-section{

        padding:100px 0;

    }

    .tools-grid{

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

        gap:24px;

    }

}


@media (max-width:768px){

    .tools-section{

        padding:90px 0;

    }

    .tools-grid{

        grid-template-columns:1fr;

    }

    .tool-card{

        padding:30px;

    }

}


@media (max-width:576px){

    .tools-section{

        padding:80px 0;

    }

    .tool-card{

        align-items:center;

        text-align:center;

        padding:24px;

    }

    .tool-card h3{

        font-size:22px;

    }

    .tool-card p{

        font-size:16px;

    }

    .tool-link{

        justify-content:center;

    }

}
/* ==========================================
        SECTION 08 - SUCCESS STORIES
========================================== */

.testimonials-section{
    padding:120px 0;
     padding-bottom:140px;
}

.testimonials-section .section-header{
    text-align:center;
    max-width:900px;
    margin:0 auto 70px;
}

.testimonials-section .section-tag{
    display:inline-block;
    padding:12px 28px;
    border-radius:50px;
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    color:var(--primary-color);
    font-size:18px;
    font-weight:600;
    margin-bottom:25px;
}

.testimonials-section h2{
    font-size:64px;
    font-weight:800;
    line-height:1.1;
    color:#fff;
    margin-bottom:25px;
}

.testimonials-section h2 span{
    display:block;
    color:var(--primary-color);
}

.testimonials-section .section-header p{
    color:var(--text-light);
    font-size:22px;
    line-height:1.8;
}

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

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:80px;
}

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

.testimonial-card{
    background:var(--card-bg);
    border:1px solid rgba(255,255,255,.05);
    border-radius:28px;
    padding:40px;
    transition:.35s ease;
}

.testimonial-card:hover{
    transform:translateY(-10px);
    border-color:var(--primary-color);
    box-shadow:0 20px 45px rgba(58,124,255,.15);
}

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

.stars{
    font-size:22px;
    margin-bottom:25px;
}

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

.review{
    color:var(--text-light);
    font-size:22px;
    line-height:1.8;
    margin-bottom:35px;
    font-style:italic;
}

/* ==========================================
        USER
========================================== */

.user{
    display:flex;
    align-items:center;
    gap:18px;
}

.user-avatar{
    width:65px;
    height:65px;
    border-radius:50%;
    background:linear-gradient(135deg,#4a86ff,#2d5be3);
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    transition:.3s;
      transform:scale(1.1);
}

.user h4{
    color:#fff;
    font-size:22px;
    margin-bottom:6px;
}

.user span{
    color:var(--text-light);
    font-size:17px;
}

/* ==========================================
        COMMUNITY BOX
========================================== */

.community-box{
    background:var(--card-bg);
    border:1px solid rgba(255,255,255,.05);
    border-radius:30px;
    padding:70px;
    text-align:center;
}

.community-box h3{
    font-size:44px;
    color:#fff;
    margin-bottom:20px;
}

.community-box h3 span{
    color:var(--primary-color);
}

.community-box p{
    max-width:700px;
    margin:0 auto 40px;
    color:var(--text-light);
    font-size:22px;
    line-height:1.8;
}

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

.testimonials-section .section-divider{
    width:260px;
    height:2px;
    margin:70px auto 0;
    background:linear-gradient(
        to right,
        transparent,
        var(--primary-color),
        transparent
    );
}

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

@media(max-width:1200px){

    .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .testimonials-section h2{
        font-size:42px;
    }

    .testimonials-section .section-header p{
        font-size:18px;
    }

    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .testimonial-card{
        padding:30px;
    }

    .review{
        font-size:18px;
    }

    .community-box{
        padding:45px 30px;
    }

    .community-box h3{
        font-size:32px;
    }

    .community-box p{
        font-size:18px;
    }

}
/* ======================================================
   SECTION 09
   LATEST ARTICLES
   VERSION : 2.0
====================================================== */


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

.articles-section{

    padding:120px 0;

}


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

.articles-section .section-header{

    max-width:780px;

    margin:0 auto 80px;

    text-align:center;

}


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

.articles-section .section-title{

    margin-bottom:26px;

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

    font-weight:800;

    line-height:1.1;

    letter-spacing:-1px;

    color:#ffffff;

}

.articles-section .section-title span{

    color:var(--primary);

}


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

.articles-section .section-description{

    max-width:700px;

    margin:0 auto;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

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

.articles-grid{

    display:grid;

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

    gap:30px;

}


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

.article-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:var(--card);

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

    border-radius:24px;

    overflow:hidden;

    transition:var(--transition);

}

.article-card:hover{

    transform:translateY(-10px);

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

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

}


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

.article-image{

    aspect-ratio:16/9;

    overflow:hidden;

}

.article-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .4s ease;

}

.article-card:hover .article-image img{

    transform:scale(1.08);

}


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

.article-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}


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

.article-category{

    align-self:flex-start;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:999px;

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

    color:var(--primary);

    font-size:14px;

    font-weight:600;

}


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

.article-content h3{

    margin-bottom:18px;

    color:#ffffff;

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

    line-height:1.3;

}


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

.article-content p{

    flex:1;

    margin-bottom:28px;

    color:var(--gray);

    font-size:17px;

    line-height:1.8;

}


/* ======================================================
   READ MORE
====================================================== */

.read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.read-more:hover{

    color:var(--primary-light);

}


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

.articles-button{

    margin-top:70px;

    text-align:center;

}


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

@media (max-width:992px){

    .articles-section{

        padding:100px 0;

    }

    .articles-grid{

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

        gap:24px;

    }

}


@media (max-width:768px){

    .articles-section{

        padding:90px 0;

    }

    .articles-grid{

        grid-template-columns:1fr;

    }

    .article-content{

        padding:26px;

    }

}


@media (max-width:576px){

    .articles-section{

        padding:80px 0;

    }

    .article-content{

        text-align:center;

        align-items:center;

    }

    .article-category{

        align-self:center;

    }

    .read-more{

        justify-content:center;

    }

}
/* ===================================================== */
/* SECTION 10 - FREQUENTLY ASKED QUESTIONS */
/* ===================================================== */

.faq-section{
    padding:120px 0;
    background:#0b0b0b;
}

.faq-section .container{
    width:90%;
    max-width:1100px;
    margin:auto;
    text-align:center;
}

/* Badge */

.faq-section .section-badge{
    display:inline-block;
    padding:12px 28px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:#121212;
    color:#ffffff;
    font-size:18px;
    font-weight:600;
    margin-bottom:30px;
}

/* Heading */

.faq-section .section-title{
    font-size:72px;
    line-height:1.1;
    font-weight:800;
    color:#ffffff;
    margin-bottom:30px;
}

.faq-section .section-title span{
    color:#3b82f6;
}

/* Description */

.faq-section .section-description{
    max-width:850px;
    margin:0 auto 70px;
    color:#b6b6b6;
    font-size:24px;
    line-height:1.8;
}

/* FAQ Container */

.faq-container{
    display:flex;
    flex-direction:column;
    gap:20px;
}

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

.faq-item{

    background: var(--card-bg);

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

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

    overflow: hidden;

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

}

.faq-item + .faq-item{

    margin-top:1rem;

}

.faq-item:hover{
    border-color:#3b82f6;
    box-shadow:0 12px 35px rgba(59,130,246,.12);
}

/* Question */

.faq-question{

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

    padding: 1.5rem;

    background: transparent;

    border: none;

    cursor: pointer;

    text-align: left;

    font: inherit;

    color: inherit;

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

}

/* Plus Icon */

.faq-icon{
    font-size:34px;
    color:#3b82f6;
    transition:.3s;
}

/* Answer */

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.faq-answer p{
    padding:0 35px 30px;
    color:#b6b6b6;
    font-size:20px;
    line-height:1.8;
    text-align:left;
}

/* Active State */

.faq-item.active{
    border-color:#3b82f6;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
}

/* ===================================================== */
/* Responsive */
/* ===================================================== */

@media(max-width:992px){

    .faq-section .section-title{
        font-size:52px;
    }

    .faq-section .section-description{
        font-size:20px;
    }

    .faq-question{
        font-size:21px;
        padding:24px 28px;
    }

    .faq-answer p{
        font-size:18px;
        padding:0 28px 25px;
    }

}

@media(max-width:576px){

    .faq-section{
        padding:90px 0;
    }

    .faq-section .section-title{
        font-size:40px;
    }

    .faq-section .section-description{
        font-size:18px;
    }

    .faq-question{
        font-size:18px;
        padding:20px;
    }

    .faq-answer p{
        font-size:16px;
        padding:0 20px 20px;
    }

    .faq-icon{
        font-size:28px;
    }

}

/* ===================================================== */
/* END OF SECTION 10 */
/* ===================================================== */

/* ================================================= */
/* SECTION 11 : FOOTER */
/* STATUS : COMPLETE */
/* ================================================= */

.footer{
    background: #0b0b0b;
    padding: 100px 0 40px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.footer .container{
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

/* ===========================================
   Footer Top
=========================================== */

.footer-top{
    text-align: center;
    margin-bottom: 70px;
}

.footer-logo-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.footer-logo{
    width:260px;
    height:auto;
}

.footer-description{
    max-width: 700px;
    margin: auto;
    color: #9ca3af;
    font-size: 18px;
    line-height: 1.8;
}

/* ===========================================
   Social Links
=========================================== */

.footer-socials{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 35px;
}

.footer-socials a{
    color: #ffffff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: 0.3s;
}

.footer-socials a:hover{
    color: #3b82f6;
}

/* ===========================================
   Footer Grid
=========================================== */

.footer-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 60px;
    margin-bottom: 70px;
}

.footer-column h3{
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 25px;
}

.footer-column{
    display: flex;
    flex-direction: column;
}

.footer-column a{
    color: #9ca3af;
    text-decoration: none;
    margin-bottom: 16px;
    transition: 0.3s;
    font-size: 17px;
}

.footer-column a:hover{
    color: #3b82f6;
    transform: translateX(6px);
}

/* ===========================================
   Footer Bottom
=========================================== */

.footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom p{
    color: #7b8794;
    font-size: 15px;
}

/* ===========================================
   Responsive
=========================================== */

@media(max-width:900px){

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-column{
        align-items:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}

/* =======================================================
   WORKOUTS PAGE - HERO SECTION
======================================================= */

/* ======================================================
   WORKOUT HERO
   VERSION : 2.0
   STATUS  : IN PROGRESS
====================================================== */


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

.workout-hero{

    padding:140px 0 100px;

    background:#0A0A0A;

}


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

.workout-hero-content{

    display:grid;

    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);

    align-items:center;

    gap:80px;

}


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

.workout-text{

    display:flex;

    flex-direction:column;

}


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

.workout-text h1{

    margin:28px 0;

    font-size:clamp(2.8rem,6vw,4.5rem);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

    color:#ffffff;

}

.workout-text h1 span{

    display:block;

    color:var(--primary);

}


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

.workout-text p{

    max-width:650px;

    margin-bottom:42px;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}


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

/* Uses the global:
   .hero-buttons
   .primary-btn
   .secondary-btn
*/


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

.hero-stats{

    display:grid;

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

    gap:20px;

    margin-top:60px;

}


.stat-box{

    padding:24px;

    background:var(--card);

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

    border-radius:20px;

    text-align:center;

    transition:var(--transition);

}

.stat-box:hover{

    transform:translateY(-6px);

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

}


.stat-box h3{

    margin-bottom:10px;

    font-size:clamp(2rem,5vw,2.5rem);

    color:var(--primary);

    font-weight:800;

}


.stat-box span{

    color:var(--gray);

    font-size:15px;

    font-weight:500;

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

.workout-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.workout-image::before{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    left:50%;

    top:50%;

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

    background:var(--primary);

    filter:blur(170px);

    opacity:.18;

    z-index:0;

}

.workout-image img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    max-width:560px;

    height:auto;

    border-radius:28px;

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

}


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

@media (max-width:992px){

    .workout-hero{

        padding:130px 0 90px;

    }

    .workout-hero-content{

        grid-template-columns:1fr;

        gap:60px;

    }

    .workout-text{

        align-items:center;

        text-align:center;

    }

    .workout-text p{

        margin-left:auto;

        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .workout-image{

        order:2;

    }

    .hero-stats{

        width:100%;

    }

}


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

@media (max-width:768px){

    .workout-hero{

        padding:120px 0 80px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        width:100%;

    }

    .hero-stats{

        grid-template-columns:1fr;

    }

    .stat-box{

        padding:22px;

    }

}


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

@media (max-width:576px){

    .workout-hero{

        padding:110px 0 70px;

    }

    .workout-text h1{

        font-size:2.3rem;

    }

    .workout-text p{

        font-size:16px;

    }

    .workout-image::before{

        width:300px;

        height:300px;

        filter:blur(120px);

    }

    .workout-image img{

        max-width:100%;

    }

}


/* ======================================================
   390px DEVICES
====================================================== */

@media (max-width:390px){

    .workout-text h1{

        font-size:2rem;

    }

    .workout-text p{

        font-size:15px;

    }

    .stat-box{

        padding:20px;

    }

}
/* ======================================================
   SECTION 02
   WORKOUT CATEGORIES
   PART 1
====================================================== */


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

.workout-categories{

    position:relative;

    padding:120px 0;

    background:#0A0A0A;

    overflow:hidden;

}


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

.workout-categories::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(130px);

    pointer-events:none;

}


.workout-categories::after{

    content:"";

    position:absolute;

    bottom:-220px;

    left:-200px;

    width:450px;

    height:450px;

    border-radius:50%;

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

    filter:blur(150px);

    pointer-events:none;

}


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

.workout-categories .container{

    position:relative;

    z-index:2;

}


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

.workout-categories .section-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}


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

.workout-categories .section-heading h2{

    margin:28px 0 22px;

    font-size:clamp(2.4rem,5vw,3.8rem);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

    color:#ffffff;

}


.workout-categories .section-heading h2 span{

    color:var(--primary);

}


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

.workout-categories .section-heading p{

    max-width:700px;

    margin:0 auto;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}


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

.category-grid{

    display:grid;

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

    gap:30px;

    align-items:stretch;

}
/* ======================================================
   CATEGORY CARD
   PART 2
====================================================== */

.category-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:flex-start;

    height:100%;

    padding:38px 34px;

    background:linear-gradient(
        180deg,
        rgba(25,28,38,.98),
        rgba(20,23,32,.98)
    );

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

    border-radius:28px;

    overflow:hidden;

    text-decoration:none;

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

}


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

.category-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

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

    transform:scaleX(0);

    transition:transform .35s ease;

}


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

.category-card:hover{

    transform:
        translateY(-10px);

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

    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        0 0 35px rgba(37,99,235,.10);

}


.category-card:hover::before{

    transform:scaleX(1);

}


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

.category-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    transition:var(--transition);

}


.category-card:hover .category-icon{

    transform:
        translateY(-4px)
        scale(1.08);

}


.category-card:hover .category-icon img{

    transform:scale(1.08);

}


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

.category-card h3{

    margin-bottom:18px;

    color:#ffffff;

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

    font-weight:700;

    line-height:1.2;

    transition:color .3s ease;

}


.category-card:hover h3{

    color:#ffffff;

}


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

.category-card p{

    color:var(--gray);

    font-size:17px;

    line-height:1.8;

    margin:0;

}
/* ======================================================
   RESPONSIVE
   PART 3
====================================================== */

@media (max-width:1200px){

    .category-grid{

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

        gap:26px;

    }

}


@media (max-width:992px){

    .workout-categories{

        padding:100px 0;

    }

    .workout-categories .section-heading{

        margin-bottom:65px;

    }

    .workout-categories .section-heading h2{

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

    }

}


@media (max-width:768px){

    .workout-categories{

        padding:90px 0;

    }

    .category-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .category-card{

        padding:30px;

    }

    .category-card h3{

        font-size:1.75rem;

    }

    .category-card p{

        font-size:16px;

    }

}


@media (max-width:576px){

    .workout-categories{

        padding:80px 0;

    }

    .workout-categories .section-heading{

        margin-bottom:55px;

    }

    .category-card{

        align-items:center;

        text-align:center;

        padding:26px;

    }

    .category-icon{

        margin-bottom:24px;

    }

    .category-card h3{

        margin-bottom:14px;

    }

}


@media (max-width:390px){

    .workout-categories{

        padding:70px 0;

    }

    .category-card{

        padding:22px;

        border-radius:22px;

    }

    .category-card h3{

        font-size:1.5rem;

    }

    .category-card p{

        font-size:15px;

        line-height:1.7;

    }

}

/* ======================================================
   SECTION 03
   FEATURED WORKOUTS
   PART 1
====================================================== */


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

.featured-workouts{

    position:relative;

    padding:120px 0;

    background:#101010;

    overflow:hidden;

}


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

.featured-workouts::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

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

    filter:blur(140px);

    pointer-events:none;

}


.featured-workouts::after{

    content:"";

    position:absolute;

    bottom:-200px;

    right:-180px;

    width:430px;

    height:430px;

    border-radius:50%;

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

    filter:blur(150px);

    pointer-events:none;

}


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

.featured-workouts .container{

    position:relative;

    z-index:2;

}


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

.featured-workouts .section-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}


.featured-workouts .section-heading h2{

    margin:28px 0 22px;

    font-size:clamp(2.5rem,5vw,3.8rem);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

    color:#ffffff;

}


.featured-workouts .section-heading h2 span{

    color:var(--primary);

}


.featured-workouts .section-heading p{

    max-width:700px;

    margin:0 auto;

    color:var(--gray);

    font-size:18px;

    line-height:1.8;

}


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

.workout-grid{

    display:grid;

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

    gap:34px;

    align-items:stretch;

}
/* ======================================================
   WORKOUT CARD
   PART 2
====================================================== */

.workout-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:linear-gradient(
        180deg,
        rgba(25,28,38,.98),
        rgba(19,22,31,.98)
    );

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

    border-radius:28px;

    overflow:hidden;

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

    position:relative;

}


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

.workout-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

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

    transform:scaleX(0);

    transition:transform .35s ease;

}


.workout-card:hover{

    transform:translateY(-10px);

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

    box-shadow:
        0 25px 55px rgba(0,0,0,.35),
        0 0 35px rgba(37,99,235,.10);

}


.workout-card:hover::before{

    transform:scaleX(1);

}


/* ==========================================
   THUMBNAIL
========================================== */

.workout-thumbnail{

    position:relative;

    overflow:hidden;

    height:260px;

}


.workout-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}


.workout-card:hover .workout-thumbnail img{

    transform:scale(1.08);

}


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

.difficulty-badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 16px;

    border-radius:50px;

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

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    backdrop-filter:blur(10px);

}


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

.workout-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:32px;

}


.workout-content h3{

    margin-bottom:16px;

    color:#ffffff;

    font-size:clamp(1.6rem,3vw,2rem);

    font-weight:700;

}


.workout-content p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:26px;

}


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

.workout-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    margin-bottom:28px;

    color:#b8c0d0;

    font-size:15px;

}


.workout-meta span{

    display:flex;

    align-items:center;

    gap:8px;

}


.workout-meta img{

    width:18px;

    height:18px;

}


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

.workout-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:auto;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

}


.workout-btn:hover{

    color:var(--accent);

    gap:16px;

}
/* ======================================================
   ACTION BUTTON
====================================================== */

.workout-action{

    margin-top:70px;

    text-align:center;

}


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

@media (max-width:1200px){

    .workout-grid{

        gap:28px;

    }

}


@media (max-width:992px){

    .featured-workouts{

        padding:100px 0;

    }

    .featured-workouts .section-heading{

        margin-bottom:65px;

    }

    .workout-grid{

        grid-template-columns:1fr;

    }

    .workout-thumbnail{

        height:280px;

    }

}


@media (max-width:768px){

    .featured-workouts{

        padding:90px 0;

    }

    .featured-workouts .section-heading{

        margin-bottom:55px;

    }

    .workout-content{

        padding:28px;

    }

    .workout-thumbnail{

        height:240px;

    }

    .workout-content h3{

        font-size:1.75rem;

    }

    .workout-content p{

        font-size:16px;

    }

    .workout-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

}


@media (max-width:576px){

    .featured-workouts{

        padding:80px 0;

    }

    .workout-card{

        border-radius:24px;

    }

    .workout-thumbnail{

        height:220px;

    }

    .workout-content{

        text-align:center;

        align-items:center;

        padding:24px;

    }

    .workout-meta{

        align-items:center;

    }

    .workout-btn{

        justify-content:center;

    }

    .workout-action .primary-btn{

        width:100%;

    }

}


@media (max-width:390px){

    .featured-workouts{

        padding:70px 0;

    }

    .workout-thumbnail{

        height:200px;

    }

    .workout-content{

        padding:22px;

    }

    .workout-content h3{

        font-size:1.5rem;

    }

    .workout-content p{

        font-size:15px;

        line-height:1.7;

    }

    .difficulty-badge{

        font-size:12px;

        padding:6px 12px;

    }

}
/* =======================================================
   SECTION 04 : WORKOUT PROGRAMS
======================================================= */

.workout-programs{

    padding:120px 8%;
    background:#0b0b0b;

}

.workout-programs .container{

    max-width:1400px;
    margin:0 auto;

}

/* ======================================
   Section Heading
====================================== */

.workout-programs .section-heading{

    max-width:850px;
    margin:0 auto 70px;
    text-align:center;

}

.workout-programs .section-badge{

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

    padding:12px 24px;

    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;

    color:#3b82f6;
    font-size:18px;
    font-weight:600;

    margin-bottom:24px;

}

.workout-programs .section-badge img{

    width:20px;
    height:20px;
    flex-shrink:0;

}

.workout-programs h2{

    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#ffffff;

    margin-bottom:20px;

}

.workout-programs h2 span{

    color:#3b82f6;

}

.workout-programs .section-heading p{

    font-size:20px;
    line-height:1.8;
    color:#9ca3af;

}

/* ======================================
   Program Grid
====================================== */

.program-grid{

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

}

/* ======================================
   Program Card
====================================== */

.program-card{

    display:flex;
    flex-direction:column;

    padding:40px;

    background:#181b24;

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

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

}

.program-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 20px 45px rgba(59,130,246,.18);

}

/* ======================================
   Program Icon
====================================== */

.program-icon{

    width:80px;
    height:80px;

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

    margin-bottom:30px;

    border-radius:20px;

    background:linear-gradient(135deg,#4f8cff,#2563eb);

}

.program-icon img{

    width:40px;
    height:40px;

}

/* ======================================
   Program Title
====================================== */

.program-card h3{

    font-size:32px;
    font-weight:700;
    color:#ffffff;

    margin-bottom:18px;

}

/* ======================================
   Program Description
====================================== */

.program-card p{

    color:#9ca3af;
    font-size:18px;
    line-height:1.8;

    margin-bottom:28px;

}

/* ======================================
   Feature List
====================================== */

.program-features{

    list-style:none;

    padding:0;
    margin:0 0 35px;

}

.program-features li{

    display:flex;
    align-items:center;
    gap:12px;

    color:var(--text-light);

    font-size:16px;
    line-height:1.6;

    margin-bottom:14px;

}

.program-features li:last-child{

    margin-bottom:0;

}

.program-features img{

    width:16px;
    height:16px;

    flex-shrink:0;

}

/* ======================================
   Program Button
====================================== */

.program-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:auto;

    width:max-content;

    color:#3b82f6;
    text-decoration:none;

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

    transition:color .3s ease;

}

.program-btn img{

    width:18px;
    height:18px;

    flex-shrink:0;

    transition:transform .3s ease;

}

.program-btn:hover{

    color:#ffffff;

}

.program-btn:hover img{

    transform:translateX(5px);

}

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

.program-action{

    margin-top:70px;

    text-align:center;

}

.program-action .primary-btn{

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

}

.program-action .primary-btn img{

    width:18px;
    height:18px;

    transition:transform .3s ease;

}

.program-action .primary-btn:hover img{

    transform:translateX(5px);

}
/* =======================================================
   SECTION 04 : WORKOUT PROGRAMS
   Responsive
======================================================= */

@media (max-width:1200px){

    .workout-programs h2{

        font-size:52px;

    }

    .program-grid{

        gap:30px;

    }

    .program-card{

        padding:35px;

    }

}

@media (max-width:992px){

    .workout-programs{

        padding:100px 6%;

    }

    .program-grid{

        grid-template-columns:1fr;

        max-width:700px;

        margin:0 auto;

    }

    .workout-programs .section-heading{

        margin-bottom:60px;

    }

    .workout-programs h2{

        font-size:46px;

    }

    .program-card{

        padding:35px;

    }

}

@media (max-width:768px){

    .workout-programs{

        padding:90px 5%;

    }

    .workout-programs .section-heading{

        margin-bottom:50px;

    }

    .workout-programs .section-badge{

        padding:10px 20px;

        font-size:16px;

    }

    .workout-programs .section-badge img{

        width:18px;

        height:18px;

    }

    .workout-programs h2{

        font-size:38px;

    }

    .workout-programs .section-heading p{

        font-size:17px;

        line-height:1.7;

    }

    .program-card{

        padding:30px;

        border-radius:22px;

    }

    .program-icon{

        width:72px;

        height:72px;

        margin-bottom:24px;

    }

    .program-icon img{

        width:36px;

        height:36px;

    }

    .program-card h3{

        font-size:28px;

    }

    .program-card p{

        font-size:17px;

        margin-bottom:24px;

    }

    .program-features{

        margin-bottom:28px;

    }

    .program-features li{

        font-size:15px;

    }

    .program-action{

        margin-top:60px;

    }

}

@media (max-width:576px){

    .workout-programs{

        padding:80px 20px;

    }

    .workout-programs h2{

        font-size:32px;

    }

    .workout-programs .section-heading p{

        font-size:16px;

    }

    .program-grid{

        gap:24px;

    }

    .program-card{

        padding:24px;

        border-radius:20px;

    }

    .program-icon{

        width:64px;

        height:64px;

        margin-bottom:22px;

    }

    .program-icon img{

        width:32px;

        height:32px;

    }

    .program-card h3{

        font-size:24px;

        margin-bottom:14px;

    }

    .program-card p{

        font-size:16px;

        line-height:1.7;

    }

    .program-features li{

        gap:10px;

        font-size:15px;

    }

    .program-btn{

        font-size:16px;

    }

    .program-btn img{

        width:16px;

        height:16px;

    }

}
/* =======================================================
   SECTION 05 : TRAINING PRINCIPLES
======================================================= */

.training-principles{

    padding:120px 8%;
    background:#111111;

}

.training-principles .container{

    max-width:1400px;
    margin:0 auto;

}

/* ======================================
   Section Heading
====================================== */

.training-principles .section-heading{

    max-width:850px;
    margin:0 auto 70px;
    text-align:center;

}

.training-principles .section-badge{

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

    padding:12px 24px;

    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;

    color:#3b82f6;
    font-size:18px;
    font-weight:600;

    margin-bottom:24px;

}

.training-principles .section-badge img{

    width:20px;
    height:20px;
    flex-shrink:0;

}

.training-principles h2{

    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#ffffff;

    margin-bottom:20px;

}

.training-principles h2 span{

    color:#3b82f6;

}

.training-principles .section-heading p{

    font-size:20px;
    line-height:1.8;
    color:#9ca3af;

}

/* ======================================
   Principles Grid
====================================== */

.principles-grid{

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

}

/* ======================================
   Principle Card
====================================== */

.principle-card{

    position:relative;

    display:flex;
    flex-direction:column;

    padding:40px;

    background:#181b24;

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

    overflow:hidden;

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

}

.principle-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 20px 45px rgba(59,130,246,.18);

}

/* ======================================
   Principle Number
====================================== */

.principle-number{

    position:absolute;
    top:24px;
    right:24px;

    width:52px;
    height:52px;

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

    border-radius:50%;

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

    border:1px solid rgba(59,130,246,.25);

    color:#3b82f6;

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

    transition:.35s ease;

}

.principle-card:hover .principle-number{

    background:#2563eb;
    border-color:#2563eb;
    color:#ffffff;

}

/* ======================================
   Principle Icon
====================================== */

.principle-icon{

    margin-bottom:30px;

}

.principle-card:hover .icon-circle{

    background:#2563eb;

    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.06);

}

.principle-card:hover .icon-circle img{

    transform:scale(1.08);

}

/* ======================================
   Title
====================================== */

.principle-card h3{

    font-size:32px;
    font-weight:700;
    color:#ffffff;

    margin-bottom:18px;

}

/* ======================================
   Description
====================================== */

.principle-card p{

    color:#9ca3af;
    font-size:18px;
    line-height:1.8;

}

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

.principle-action{

    margin-top:70px;
    text-align:center;

}

.principle-action .primary-btn{

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

}

.principle-action .primary-btn img{

    width:18px;
    height:18px;

    transition:transform .3s ease;

}

.principle-action .primary-btn:hover img{

    transform:translateX(5px);

}
/* =======================================================
   SECTION 05 : TRAINING PRINCIPLES
   Responsive
======================================================= */

@media (max-width:1200px){

    .training-principles h2{

        font-size:52px;

    }

    .principles-grid{

        gap:30px;

    }

    .principle-card{

        padding:35px;

    }

}

@media (max-width:992px){

    .training-principles{

        padding:100px 6%;

    }

    .principles-grid{

        grid-template-columns:1fr;

        max-width:700px;

        margin:0 auto;

    }

    .training-principles .section-heading{

        margin-bottom:60px;

    }

    .training-principles h2{

        font-size:46px;

    }

    .principle-card{

        padding:35px;

    }

}

@media (max-width:768px){

    .training-principles{

        padding:90px 5%;

    }

    .training-principles .section-heading{

        margin-bottom:50px;

    }

    .training-principles .section-badge{

        padding:10px 20px;

        font-size:16px;

    }

    .training-principles .section-badge img{

        width:18px;
        height:18px;

    }

    .training-principles h2{

        font-size:38px;

    }

    .training-principles .section-heading p{

        font-size:17px;
        line-height:1.7;

    }

    .principle-card{

        padding:30px;

        border-radius:22px;

    }

    .principle-number{

        width:46px;
        height:46px;

        top:20px;
        right:20px;

        font-size:14px;

    }

    .principle-icon{

        margin-bottom:24px;

    }

    .principle-card h3{

        font-size:28px;

    }

    .principle-card p{

        font-size:17px;

    }

    .principle-action{

        margin-top:60px;

    }

}

@media (max-width:576px){

    .training-principles{

        padding:80px 20px;

    }

    .training-principles h2{

        font-size:32px;

    }

    .training-principles .section-heading p{

        font-size:16px;

    }

    .principles-grid{

        gap:24px;

    }

    .principle-card{

        padding:24px;

        border-radius:20px;

    }

    .principle-number{

        width:42px;
        height:42px;

        top:18px;
        right:18px;

        font-size:13px;

    }

    .principle-card h3{

        font-size:24px;

        margin-bottom:14px;

    }

    .principle-card p{

        font-size:16px;

        line-height:1.7;

    }

    .principle-action .primary-btn{

        width:100%;

        justify-content:center;

    }

}
/* =======================================================
   SECTION 06 : WORKOUT CTA
======================================================= */

.workout-cta{

    position:relative;
    overflow:hidden;

    padding:140px 8%;

    background:linear-gradient(
        180deg,
        #0b0b0b 0%,
        #101826 60%,
        #111827 100%
    );

    text-align:center;

}

/* ======================================
   Background Glow
====================================== */

.workout-cta::before{

    content:"";

    position:absolute;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    width:650px;
    height:650px;

    border-radius:50%;

    background:radial-gradient(
        rgba(37,99,235,.18),
        transparent 70%
    );

    pointer-events:none;

}

/* ======================================
   Container
====================================== */

.workout-cta .container{

    position:relative;

    max-width:900px;

    margin:0 auto;

    z-index:1;

}

/* ======================================
   Section Badge
====================================== */

.workout-cta .section-badge{

    display:inline-flex;

    align-items:center;
    justify-content:center;
    gap:10px;

    padding:12px 26px;

    background:#171717;

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

    border-radius:999px;

    color:#3b82f6;

    font-size:18px;

    font-weight:600;

    margin-bottom:25px;

}

.workout-cta .section-badge img{

    width:20px;
    height:20px;

}

/* ======================================
   Heading
====================================== */

.workout-cta h2{

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    color:#ffffff;

    margin-bottom:24px;

}

.workout-cta h2 span{

    color:#3b82f6;

}

.workout-cta p{

    max-width:760px;

    margin:0 auto 55px;

    color:#9ca3af;

    font-size:22px;

    line-height:1.8;

}

/* ======================================
   Trust Highlights
====================================== */

.cta-highlights{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:40px;

    margin-bottom:60px;

}

.highlight-item{

    display:flex;

    align-items:center;

    gap:14px;

}

.highlight-icon{

    margin:0;

}

.highlight-item h3{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    margin:0 0 4px;

}

.highlight-item p{

    margin:0;

    color:#9ca3af;

    font-size:15px;

    line-height:1.5;

}
/* ======================================
   CTA Buttons
====================================== */

.cta-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-buttons .primary-btn,
.cta-buttons .secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.cta-buttons img{

    width:18px;

    height:18px;

    transition:transform .3s ease;

}

.cta-buttons a:hover img{

    transform:translateX(5px);

}
/* =======================================================
   SECTION 06 : WORKOUT CTA
   Responsive
======================================================= */

@media (max-width:1200px){

    .workout-cta h2{

        font-size:56px;

    }

}

@media (max-width:992px){

    .workout-cta{

        padding:120px 6%;

    }

    .workout-cta h2{

        font-size:48px;

    }

    .workout-cta p{

        font-size:20px;

    }

    .cta-highlights{

        gap:30px;

    }

}

@media (max-width:768px){

    .workout-cta{

        padding:100px 5%;

    }

    .workout-cta .section-badge{

        padding:10px 20px;

        font-size:16px;

    }

    .workout-cta .section-badge img{

        width:18px;
        height:18px;

    }

    .workout-cta h2{

        font-size:40px;

    }

    .workout-cta p{

        font-size:17px;

        line-height:1.7;

        margin-bottom:45px;

    }

    .cta-highlights{

        flex-direction:column;

        align-items:flex-start;

        width:max-content;

        margin:0 auto 50px;

        gap:22px;

    }

    .highlight-item{

        gap:12px;

    }

    .highlight-item h3{

        font-size:17px;

    }

    .highlight-item p{

        font-size:14px;

    }

    .cta-buttons{

        flex-direction:column;

        gap:16px;

    }

    .cta-buttons .primary-btn,
    .cta-buttons .secondary-btn{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:576px){

    .workout-cta{

        padding:80px 20px;

    }

    .workout-cta h2{

        font-size:32px;

    }

    .workout-cta p{

        font-size:16px;

    }

    .cta-highlights{

        width:100%;

        align-items:flex-start;

    }

}
/* =======================================================
   SECTION 01 : NUTRITION HERO
======================================================= */

.nutrition-hero{

    padding:140px 8% 100px;

    background:#0b0b0b;

    overflow:hidden;

}

.nutrition-hero .container{

    max-width:1400px;

    margin:0 auto;

}

.nutrition-hero-container{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:70px;

}

/* ======================================
   Hero Content
====================================== */

.nutrition-content{

    display:flex;

    flex-direction:column;

}

.nutrition-title{

    margin:24px 0;

    font-size:68px;

    font-weight:800;

    line-height:1.05;

    text-transform:uppercase;

    color:#ffffff;

}

.nutrition-title span{

    color:#3b82f6;

}

.nutrition-description{

    max-width:700px;

    margin-bottom:45px;

    color:#9ca3af;

    font-size:22px;

    line-height:1.8;

}

/* ======================================
   Hero Buttons
====================================== */

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:55px;

}

.hero-buttons .primary-btn,
.hero-buttons .secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.hero-buttons img{

    width:18px;

    height:18px;

    flex-shrink:0;

    transition:transform .3s ease;

}

.hero-buttons a:hover img{

    transform:translateX(5px);

}

/* ======================================
   Trust Highlights
====================================== */

.nutrition-highlights{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.nutrition-highlight{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.nutrition-highlight .highlight-icon{

    flex-shrink:0;

}

.nutrition-highlight h3{

    margin:0 0 6px;

    color:#ffffff;

    font-size:20px;

    font-weight:700;

    line-height:1.3;

}

.nutrition-highlight p{

    margin:0;

    color:#9ca3af;

    font-size:16px;

    line-height:1.7;

}

/* ======================================
   Hero Image
====================================== */

.nutrition-image{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.nutrition-image::before{

    content:"";

    position:absolute;

    inset:50% auto auto 50%;

    width:520px;

    height:520px;

    border-radius:50%;

    background:#2563eb;

    opacity:.14;

    filter:blur(180px);

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

    z-index:0;

}

.nutrition-image-card{

    position:relative;

    z-index:1;

    width:100%;

    max-width:560px;

    padding:20px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(37,99,235,.20),
        rgba(255,255,255,.02)
    );

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

    backdrop-filter:blur(15px);

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

}

.nutrition-image-card:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

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

}

.nutrition-hero-image{

    display:block;

    width:100%;

    height:auto;

    border-radius:22px;

}

/* ======================================
   Highlight Icon Hover
====================================== */

.nutrition-highlight:hover .icon-circle{

    background:#2563eb;

    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.05);

}

.nutrition-highlight:hover .icon-circle img{

    transform:scale(1.08);

}
/* =======================================================
   SECTION 01 : NUTRITION HERO
   Responsive
======================================================= */

@media (max-width:992px){

    .nutrition-hero{

        padding:120px 6% 90px;

    }

    .nutrition-hero-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .nutrition-content{

        align-items:center;

        text-align:center;

    }

    .nutrition-description{

        max-width:700px;

        margin-left:auto;
        margin-right:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .nutrition-highlights{

        width:100%;

        max-width:560px;

    }

    .nutrition-highlight{

        text-align:left;

    }

    .nutrition-image{

        justify-content:center;

    }

    .nutrition-image-card{

        max-width:560px;

    }

    .nutrition-title{

        font-size:52px;

    }

}

@media (max-width:768px){

    .nutrition-hero{

        padding:100px 5% 80px;

    }

    .nutrition-title{

        font-size:40px;

    }

    .nutrition-description{

        font-size:18px;

        line-height:1.7;

        margin-bottom:40px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

        gap:16px;

        margin-bottom:45px;

    }

    .hero-buttons .primary-btn,
    .hero-buttons .secondary-btn{

        width:100%;

        max-width:360px;

        justify-content:center;

    }

    .nutrition-highlights{

        gap:18px;

    }

    .nutrition-highlight{

        gap:16px;

    }

    .nutrition-highlight h3{

        font-size:18px;

    }

    .nutrition-highlight p{

        font-size:15px;

        line-height:1.6;

    }

    .nutrition-image-card{

        padding:16px;

        border-radius:24px;

    }

    .nutrition-hero-image{

        border-radius:18px;

    }

}

@media (max-width:480px){

    .nutrition-hero{

        padding:90px 20px 70px;

    }

    .nutrition-title{

        font-size:34px;

    }

    .nutrition-description{

        font-size:16px;

    }

    .nutrition-highlight{

        gap:14px;

    }

    .nutrition-highlight h3{

        font-size:17px;

    }

    .nutrition-highlight p{

        font-size:14px;

    }

    .nutrition-highlight .highlight-icon{

        transform:scale(.9);

    }

}
/* ==========================================================
   SECTION 02 : NUTRITION CATEGORIES
========================================================== */

.nutrition-categories{

    padding:120px 8%;
    background:#0b0b0b;

}

.nutrition-categories .container{

    max-width:1400px;
    margin:0 auto;

}

/* ==========================================
   Section Heading (shared system)
========================================== */

.nutrition-categories .section-heading{

    text-align:center;
    max-width:850px;
    margin:0 auto 70px;

}

.nutrition-categories .section-heading h2{

    font-size:54px;
    font-weight:800;
    line-height:1.1;
    color:#ffffff;

    margin:18px 0;

}

.nutrition-categories .section-heading p{

    font-size:20px;
    line-height:1.8;
    color:#9ca3af;

}

/* ==========================================
   Grid System
========================================== */

.nutrition-grid{

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

}

/* ==========================================
   Nutrition Card
========================================== */

.nutrition-card{

    display:flex;
    flex-direction:column;

    padding:35px;

    background:#181b24;

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

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

}

.nutrition-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 20px 45px rgba(59,130,246,.18);

}

/* ==========================================
   Icon System
========================================== */

.nutrition-icon{

    margin-bottom:25px;

}

/* reuse existing icon-circle hover system */

.nutrition-card:hover .icon-circle{

    background:#2563eb;
    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.06);

}

.nutrition-card:hover .icon-circle img{

    transform:scale(1.08);

}

/* ==========================================
   Card Typography
========================================== */

.nutrition-card h3{

    font-size:24px;
    font-weight:700;
    color:#ffffff;

    margin-bottom:14px;

}

.nutrition-card p{

    font-size:16px;
    line-height:1.7;
    color:#9ca3af;

    margin-bottom:22px;

}

/* ==========================================
   Card Button (shared pattern)
========================================== */

.card-btn{

    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:auto;

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

    color:#3b82f6;
    text-decoration:none;

    transition:color .3s ease;

}

.card-btn img{

    width:18px;
    height:18px;

    transition:transform .3s ease;

}

.card-btn:hover{

    color:#ffffff;

}

.card-btn:hover img{

    transform:translateX(5px);

}
/* ==========================================================
   SECTION 02 : NUTRITION CATEGORIES
   Responsive
========================================================== */

@media (max-width:1200px){

    .nutrition-categories{

        padding:100px 6%;

    }

    .nutrition-categories .section-heading{

        margin-bottom:60px;

    }

    .nutrition-categories .section-heading h2{

        font-size:48px;

    }

    .nutrition-grid{

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

        gap:28px;

    }

}

@media (max-width:768px){

    .nutrition-categories{

        padding:90px 5%;

    }

    .nutrition-categories .section-heading{

        margin-bottom:50px;

    }

    .nutrition-categories .section-heading h2{

        font-size:38px;

    }

    .nutrition-categories .section-heading p{

        font-size:18px;

        line-height:1.7;

    }

    .nutrition-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .nutrition-card{

        padding:30px;

        border-radius:22px;

    }

    .nutrition-icon{

        margin-bottom:22px;

    }

    .nutrition-card h3{

        font-size:22px;

    }

    .nutrition-card p{

        font-size:16px;

        margin-bottom:20px;

    }

}

@media (max-width:576px){

    .nutrition-categories{

        padding:80px 20px;

    }

    .nutrition-categories .section-heading h2{

        font-size:32px;

    }

    .nutrition-categories .section-heading p{

        font-size:16px;

    }

    .nutrition-card{

        padding:24px;

        border-radius:20px;

    }

    .nutrition-icon{

        margin-bottom:20px;

    }

    .nutrition-card h3{

        font-size:20px;

    }

    .nutrition-card p{

        font-size:15px;

        line-height:1.7;

    }

    .card-btn{

        font-size:15px;

    }

    .card-btn img{

        width:16px;

        height:16px;

    }

}
/* =======================================================
   SECTION 03 : FEATURED MEAL PLANS
======================================================= */

.featured-meals{

    padding:120px 8%;

    background:#111111;

}

.featured-meals .container{

    max-width:1400px;

    margin:0 auto;

}

/* ======================================
   Section Heading
====================================== */

.featured-meals .section-heading{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.featured-meals .section-heading h2{

    margin:18px 0;

    font-size:54px;

    font-weight:800;

    line-height:1.1;

    color:#ffffff;

}

.featured-meals .section-heading h2 span{

    color:#3b82f6;

}

.featured-meals .section-heading p{

    font-size:20px;

    line-height:1.8;

    color:#9ca3af;

}

/* ======================================
   Meal Grid
====================================== */

.meal-grid{

    display:grid;

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

    gap:32px;

}

/* ======================================
   Meal Card
====================================== */

.meal-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#181b24;

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

    border-radius:25px;

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

}

.meal-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 20px 45px rgba(59,130,246,.18);

}

/* ======================================
   Meal Image
====================================== */

.meal-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

}

.meal-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .45s ease;

}

.meal-card:hover .meal-image img{

    transform:scale(1.08);

}

/* ======================================
   Meal Badge
====================================== */

.meal-badge{

    position:absolute;

    top:20px;

    right:20px;

    padding:8px 16px;

    border-radius:999px;

    background:#3b82f6;

    color:#ffffff;

    font-size:14px;

    font-weight:700;

}

/* ======================================
   Meal Content
====================================== */

.meal-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:32px;

}

.meal-content h3{

    margin-bottom:16px;

    color:#ffffff;

    font-size:28px;

    font-weight:700;

}

.meal-content p{

    margin-bottom:24px;

    color:#9ca3af;

    font-size:17px;

    line-height:1.8;

}

/* ======================================
   Meal Meta
====================================== */

.meal-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:28px;

}

.meal-meta span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#b6b6b6;

    font-size:15px;

    font-weight:500;

}

.meal-meta img{

    width:16px;

    height:16px;

    flex-shrink:0;

}

/* ======================================
   Card Button
====================================== */

.meal-content .card-btn{

    margin-top:auto;

}

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

.meal-action{

    margin-top:70px;

    text-align:center;

}

.meal-action .primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(59,130,246,.30);

}
/* =======================================================
   SECTION 03 : FEATURED MEAL PLANS
   Responsive
======================================================= */

@media (max-width:1200px){

    .featured-meals{

        padding:100px 6%;

    }

    .featured-meals .section-heading{

        margin-bottom:60px;

    }

    .featured-meals .section-heading h2{

        font-size:48px;

    }

    .meal-grid{

        gap:28px;

    }

}

@media (max-width:992px){

    .meal-grid{

        grid-template-columns:1fr;

    }

    .meal-card{

        max-width:720px;

        margin:0 auto;

    }

}

@media (max-width:768px){

    .featured-meals{

        padding:90px 5%;

    }

    .featured-meals .section-heading{

        margin-bottom:50px;

    }

    .featured-meals .section-heading h2{

        font-size:38px;

    }

    .featured-meals .section-heading p{

        font-size:18px;

        line-height:1.7;

    }

    .meal-content{

        padding:28px;

    }

    .meal-content h3{

        font-size:24px;

    }

    .meal-content p{

        font-size:16px;

        margin-bottom:22px;

    }

    .meal-meta{

        gap:12px;

    }

    .meal-meta span{

        font-size:14px;

    }

    .meal-badge{

        top:16px;

        right:16px;

        padding:7px 14px;

        font-size:13px;

    }

}

@media (max-width:576px){

    .featured-meals{

        padding:80px 20px;

    }

    .featured-meals .section-heading h2{

        font-size:32px;

    }

    .featured-meals .section-heading p{

        font-size:16px;

    }

    .meal-content{

        padding:24px;

    }

    .meal-content h3{

        font-size:22px;

    }

    .meal-content p{

        font-size:15px;

        line-height:1.7;

    }

    .meal-meta{

        flex-direction:column;

        align-items:flex-start;

    }

    .meal-meta span{

        font-size:14px;

    }

    .meal-badge{

        top:14px;

        right:14px;

        padding:6px 12px;

        font-size:12px;

    }

    .meal-content .card-btn{

        width:100%;

        justify-content:center;

    }

}
/* =======================================================
   SECTION 04 : HIGH PROTEIN FOODS (CLEAN VERSION)
======================================================= */

.protein-foods{

    padding:120px 8%;
    background:#0b0b0b;

}

.protein-foods .container{

    max-width:1400px;
    margin:auto;

}

/* ======================================
   Section Heading
====================================== */

.protein-foods .section-heading{

    text-align:center;
    max-width:850px;
    margin:0 auto 70px;

}

.protein-foods h2{

    font-size:60px;
    font-weight:800;
    color:#ffffff;
    line-height:1.1;
    margin-bottom:20px;

}

.protein-foods h2 span{

    color:#3b82f6;

}

.protein-foods .section-heading p{

    color:#9ca3af;
    font-size:20px;
    line-height:1.8;

}

/* ======================================
   Protein Grid
====================================== */

.protein-grid{

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

}

/* ======================================
   Protein Card
====================================== */

.protein-card{

    background:#181b24;
    border:1px solid rgba(255,255,255,.05);
    border-radius:24px;
    overflow:hidden;

    transition:all .35s ease;

}

.protein-card:hover{

    transform:translateY(-10px);
    border-color:#2563eb;
    box-shadow:0 20px 45px rgba(37,99,235,.18);

}
.protein-card option{

    color:#000;

    background:#fff;

}

/* ======================================
   Image
====================================== */

.protein-image{

    aspect-ratio:4/3;
    overflow:hidden;

}

.protein-image img{

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

    transition:transform .45s ease;

}

.protein-card:hover .protein-image img{

    transform:scale(1.06);

}

/* ======================================
   Content
====================================== */

.protein-content{

    padding:30px;

}

.protein-content h3{

    color:#ffffff;
    font-size:28px;
    margin-bottom:14px;

}

.protein-content p{

    color:#9ca3af;
    font-size:17px;
    line-height:1.8;
    margin-bottom:20px;

}

/* ======================================
   Protein Info
====================================== */

.protein-info{

    display:flex;
    gap:16px;
    flex-wrap:wrap;

    margin-bottom:22px;

}

.protein-info span{

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#d1d5db;
    font-size:15px;
    font-weight:600;

}

.protein-info img{

    width:16px;
    height:16px;

}

/* ======================================
   Card Button (USE GLOBAL SYSTEM)
====================================== */

/* DO NOT redefine card-btn here */

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

.protein-action{

    text-align:center;
    margin-top:70px;

}

.protein-action .primary-btn:hover{

    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(59,130,246,.30);

}
/* =======================================================
   SECTION 04 : HIGH PROTEIN FOODS
   RESPONSIVE
======================================================= */

/* ======================================
   TABLET (<=1100px)
====================================== */

@media (max-width:1100px){

    .protein-grid{

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

    }

    .protein-foods h2{

        font-size:48px;

    }

}

/* ======================================
   TABLET / SMALL LAPTOP (<=768px)
====================================== */

@media (max-width:768px){

    .protein-foods{

        padding:90px 6%;

    }

    .protein-grid{

        grid-template-columns:1fr;

    }

    .protein-foods h2{

        font-size:38px;

    }

    .protein-foods .section-heading p{

        font-size:18px;

        line-height:1.7;

    }

    .protein-content{

        padding:25px;

    }

    .protein-content h3{

        font-size:24px;

    }

    .protein-content p{

        font-size:16px;

    }

    .protein-info{

        gap:12px;

        margin-bottom:18px;

    }

}

/* ======================================
   MOBILE (<=576px)
====================================== */

@media (max-width:576px){

    .protein-foods{

        padding:80px 20px;

    }

    .protein-foods h2{

        font-size:32px;

    }

    .protein-foods .section-heading p{

        font-size:16px;

    }

    .protein-card{

        border-radius:20px;

    }

    .protein-content{

        padding:22px;

    }

    .protein-content h3{

        font-size:22px;

    }

    .protein-content p{

        font-size:15px;

        line-height:1.7;

    }

    .protein-info{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .protein-info span{

        font-size:14px;

    }

}
/* =======================================================
   SECTION 05 : NUTRITION GUIDES (CLEAN VERSION)
======================================================= */

.nutrition-guides{

    padding:120px 8%;
    background:#0b0b0b;

}

.nutrition-guides .container{

    max-width:1400px;
    margin:auto;

}

/* ======================================
   Section Heading
====================================== */

.nutrition-guides .section-heading{

    text-align:center;
    max-width:850px;
    margin:0 auto 70px;

}

.nutrition-guides h2{

    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#ffffff;

    margin-bottom:20px;

}

.nutrition-guides h2 span{

    color:#3b82f6;

}

.nutrition-guides .section-heading p{

    color:#9ca3af;
    font-size:20px;
    line-height:1.8;

}

/* ======================================
   Grid System
====================================== */

.guides-grid{

    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:30px;
    margin-top:70px;

}

/* ======================================
   Guide Card
====================================== */

.guide-card{

    background:#121212;
    border:1px solid rgba(255,255,255,.08);
    border-radius:28px;
    overflow:hidden;

    transition:all .35s ease;

}

.guide-card:hover{

    transform:translateY(-10px);
    border-color:#3b82f6;
    box-shadow:0 25px 60px rgba(59,130,246,.18);

}

/* ======================================
   Image
====================================== */

.guide-image{

    overflow:hidden;

}

.guide-image img{

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

    display:block;

    transition:transform .45s ease;

}

.guide-card:hover .guide-image img{

    transform:scale(1.06);

}

/* ======================================
   Content
====================================== */

.guide-content{

    padding:30px;

}

.guide-category{

    display:inline-flex;
    align-items:center;

    padding:8px 16px;
    margin-bottom:18px;

    background:rgba(37,99,235,.12);
    border:1px solid rgba(37,99,235,.2);

    border-radius:999px;

    color:#3b82f6;
    font-size:14px;
    font-weight:600;

}

/* ======================================
   Title
====================================== */

.guide-content h3{

    color:#ffffff;
    font-size:26px;
    line-height:1.35;

    margin-bottom:16px;

    transition:color .3s ease;

}

.guide-card:hover .guide-content h3{

    color:#3b82f6;

}

/* ======================================
   Description
====================================== */

.guide-content p{

    color:#9ca3af;
    font-size:17px;
    line-height:1.8;

    margin:18px 0 24px;

}

/* ======================================
   Button (GLOBAL SYSTEM ONLY)
====================================== */

.card-btn{

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#3b82f6;
    font-weight:700;
    text-decoration:none;

    transition:color .3s ease;
    align-self:center;

}

.card-btn img{

    width:18px;
    height:18px;

    transition:transform .3s ease;

}

.card-btn:hover{

    color:#ffffff;

}

.card-btn:hover img{

    transform:translateX(5px);

}

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

.guides-action{

    text-align:center;
    margin-top:70px;

}
/* =======================================================
   SECTION 05 : NUTRITION GUIDES
   RESPONSIVE
======================================================= */

/* ======================================
   TABLET (<=1100px)
====================================== */

@media (max-width:1100px){

    .guides-grid{

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

    }

    .nutrition-guides h2{

        font-size:48px;

    }

}

/* ======================================
   TABLET / SMALL LAPTOP (<=768px)
====================================== */

@media (max-width:768px){

    .nutrition-guides{

        padding:90px 6%;

    }

    .guides-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .nutrition-guides h2{

        font-size:38px;

    }

    .nutrition-guides .section-heading p{

        font-size:18px;

        line-height:1.7;

    }

    .guide-content{

        padding:25px;

    }

    .guide-content h3{

        font-size:22px;

    }

    .guide-content p{

        font-size:16px;

        line-height:1.7;

    }

    .guide-image img{

        height:220px;

    }

}

/* ======================================
   MOBILE (<=576px)
====================================== */

@media (max-width:576px){

    .nutrition-guides{

        padding:80px 20px;

    }

    .nutrition-guides h2{

        font-size:32px;

    }

    .nutrition-guides .section-heading p{

        font-size:16px;

    }

    .guide-content{

        padding:22px;

    }

    .guide-content h3{

        font-size:20px;

    }

    .guide-content p{

        font-size:15px;

    }

    .guide-category{

        font-size:13px;

        padding:7px 14px;

    }

    .card-btn{

        font-size:15px;

    }

    .card-btn img{

        width:16px;

        height:16px;

    }

}
/* =======================================================
   SECTION 06 : NUTRITION CALCULATORS (BASE)
======================================================= */

.nutrition-calculators{

    padding:120px 8%;
    background:#111111;

}

.nutrition-calculators .container{

    max-width:1400px;
    margin:auto;

}

/* ======================================
   Section Heading
====================================== */

.nutrition-calculators .section-heading{

    text-align:center;
    max-width:850px;
    margin:0 auto 70px;

}

.nutrition-calculators h2{

    font-size:60px;
    font-weight:800;
    line-height:1.1;
    color:#ffffff;

    margin-bottom:20px;

}

.nutrition-calculators h2 span{

    color:#3b82f6;

}

.nutrition-calculators .section-heading p{

    font-size:20px;
    line-height:1.8;
    color:#9ca3af;

}

/* ======================================
   Grid System
====================================== */

.calculator-grid{

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

}

/* ======================================
   Calculator Card
====================================== */

.calculator-card{

    display:flex;
    flex-direction:column;

    padding:40px;

    background:#181b24;

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

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

}

.calculator-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 20px 45px rgba(59,130,246,.18);

}

/* ======================================
   Icon System
====================================== */

.calculator-icon{

    margin-bottom:25px;

}

.calculator-card:hover .icon-circle{

    background:#2563eb;
    border-color:#2563eb;

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

    transform:translateY(-3px) scale(1.05);

}

.calculator-card:hover .icon-circle img{

    transform:scale(1.08);

}

/* ======================================
   Card Content
====================================== */

.calculator-card h3{

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

    color:#ffffff;

    margin-bottom:16px;

}

.calculator-card p{

    font-size:17px;
    line-height:1.8;

    color:#9ca3af;

    margin-bottom:24px;

}

/* ======================================
   Button (GLOBAL SYSTEM ONLY)
====================================== */

.calculator-card .card-btn{

    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:auto;

    color:#3b82f6;

    font-weight:700;
    text-decoration:none;

    transition:color .3s ease;

}

.calculator-card .card-btn img{

    width:18px;
    height:18px;

    transition:transform .3s ease;

}

.calculator-card .card-btn:hover{

    color:#ffffff;

}

.calculator-card .card-btn:hover img{

    transform:translateX(5px);

}

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

.calculator-action{

    text-align:center;
    margin-top:70px;

}

.calculator-action .primary-btn{

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

    padding:18px 40px;

    border-radius:50px;

    background:#3b82f6;

    color:#ffffff;

    text-decoration:none;

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

    transition:.35s ease;

}

.calculator-action .primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 40px rgba(59,130,246,.30);

}
/* =======================================================
   SECTION 06 : NUTRITION CALCULATORS
   RESPONSIVE
======================================================= */

/* ======================================
   TABLET (<=1100px)
====================================== */

@media (max-width:1100px){

    .nutrition-calculators h2{

        font-size:48px;

    }

    .calculator-grid{

        gap:28px;

    }

}

/* ======================================
   TABLET / SMALL LAPTOP (<=768px)
====================================== */

@media (max-width:768px){

    .nutrition-calculators{

        padding:90px 6%;

    }

    .calculator-grid{

        grid-template-columns:1fr;

    }

    .nutrition-calculators h2{

        font-size:38px;

    }

    .nutrition-calculators .section-heading p{

        font-size:18px;

        line-height:1.7;

    }

    .calculator-card{

        padding:30px;

    }

    .calculator-card h3{

        font-size:24px;

    }

    .calculator-card p{

        font-size:16px;

    }

    .calculator-icon{

        margin-bottom:22px;

    }

}

/* ======================================
   MOBILE (<=576px)
====================================== */

@media (max-width:576px){

    .nutrition-calculators{

        padding:80px 20px;

    }

    .nutrition-calculators h2{

        font-size:32px;

    }

    .nutrition-calculators .section-heading p{

        font-size:16px;

    }

    .calculator-card{

        padding:24px;

        border-radius:20px;

    }

    .calculator-card h3{

        font-size:22px;

    }

    .calculator-card p{

        font-size:15px;

        line-height:1.7;

    }

    .calculator-card .card-btn{

        font-size:15px;

    }

    .calculator-card .card-btn img{

        width:16px;
        height:16px;

    }

    .calculator-action .primary-btn{

        width:100%;

        max-width:320px;

    }

}
/* =======================================================
   SECTION 07 : NUTRITION FAQ (BASE)
======================================================= */

.nutrition-faq{

    padding:120px 8%;
    background:#0b0b0b;

}

.nutrition-faq .container{

    max-width:1100px;
    margin:auto;

}

/* ======================================
   Section Heading
====================================== */

.nutrition-faq .section-heading{

    text-align:center;
    max-width:850px;
    margin:0 auto 70px;

}

.nutrition-faq h2{

    font-size:60px;
    font-weight:800;
    line-height:1.1;

    color:#ffffff;

    margin-bottom:20px;

}

.nutrition-faq h2 span{

    color:#3b82f6;

}

.nutrition-faq .section-heading p{

    font-size:20px;
    line-height:1.8;

    color:#9ca3af;

}

/* ======================================
   FAQ Container Layout
====================================== */

.faq-container{

    display:flex;
    flex-direction:column;
    gap:18px;

}

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

.faq-item{

    background:#181b24;

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

    border-radius:18px;

    overflow:hidden;

    transition:all .3s ease;

}

.faq-item:hover{

    border-color:#3b82f6;

    box-shadow:0 15px 40px rgba(59,130,246,.15);

}

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

.faq-question{

    width:100%;

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

    padding:26px 28px;

    background:transparent;
    border:none;

    cursor:pointer;

    color:#ffffff;

    font-size:20px;
    font-weight:600;

    text-align:left;

}

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

.faq-title{

    flex:1;

}

/* ======================================
   ICON SYSTEM (STANDARDIZED)
====================================== */

.faq-icon{

    flex-shrink:0;

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

    transition:transform .35s ease;

}

/* ======================================
   ANSWER (INITIAL STATE)
====================================== */

.faq-answer{

    max-height:0;
    overflow:hidden;

    padding:0 28px;

    transition:all .4s ease;

}

.faq-answer p{

    color:#9ca3af;

    font-size:17px;
    line-height:1.8;

    padding-bottom:24px;

}

/* ======================================
   ACTIVE STATE (ACCORDION OPEN)
====================================== */

.faq-item.active .faq-answer{

    max-height:300px;

    padding-top:0;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

}
/* =======================================================
   SECTION 07 : NUTRITION FAQ (RESPONSIVE + FINAL)
======================================================= */

/* ======================================
   TABLET (<=992px)
====================================== */

@media (max-width:992px){

    .nutrition-faq h2{

        font-size:48px;

    }

}

/* ======================================
   MOBILE (<=768px)
====================================== */

@media (max-width:768px){

    .nutrition-faq{

        padding:90px 6%;

    }

    .nutrition-faq h2{

        font-size:38px;

    }

    .nutrition-faq .section-heading p{

        font-size:18px;

        line-height:1.7;

    }

    .faq-question{

        font-size:18px;

        padding:20px;

    }

    .faq-answer{

        padding:0 20px;

    }

    .faq-answer p{

        font-size:16px;

    }

}

/* ======================================
   SMALL MOBILE (<=576px)
====================================== */

@media (max-width:576px){

    .nutrition-faq{

        padding:80px 20px;

    }

    .nutrition-faq h2{

        font-size:32px;

    }

    .nutrition-faq .section-heading p{

        font-size:16px;

    }

    .faq-question{

        font-size:16px;

        padding:18px;

        gap:12px;

    }

    .faq-title{

        font-size:16px;

        line-height:1.5;

    }

    .faq-icon{

        transform:scale(.9);

    }

    .faq-answer p{

        font-size:15px;

        line-height:1.7;

    }

}

/* ======================================
   ACTIVE STATE SAFETY FIX (IMPORTANT)
   Prevent layout jump issues
====================================== */

.faq-item.active .faq-answer{

    display:block; /* fallback safety */
    max-height:300px;

}

/* ======================================
   ICON FIX (smooth rotation consistency)
====================================== */

.faq-item.active .faq-icon{

    transform:rotate(45deg);

    transition:transform .35s ease;

}

/* ======================================
   SMOOTH TRANSITION ENHANCEMENT
====================================== */

.faq-answer{

    will-change:max-height;

}
/* =======================================================
   SECTION 08 : NUTRITION CTA (CLEAN SYSTEM)
======================================================= */

.nutrition-cta{

    padding:120px 8%;
    background:#111111;

}

.nutrition-cta .container{

    max-width:1400px;
    margin:auto;

}

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

.nutrition-cta-content{

    position:relative;
    overflow:hidden;

    padding:90px 70px;

    text-align:center;

    border-radius:35px;

    background:linear-gradient(
        135deg,
        rgba(59,130,246,.10),
        rgba(17,17,17,1)
    );

    border:1px solid rgba(59,130,246,.25);

}

/* Blue Glow */

.nutrition-cta-content::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:#2563eb;

    filter:blur(180px);

    opacity:.15;

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

    z-index:0;

}

.nutrition-cta-content > *{

    position:relative;
    z-index:2;

}

/* ======================================
   BADGE (GLOBAL SYSTEM)
====================================== */

.nutrition-cta .section-badge{

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

    gap:10px;

    padding:12px 24px;

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

    border-radius:50px;

    color:#3b82f6;
    font-size:18px;
    font-weight:600;

    margin-bottom:30px;

}

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

.nutrition-cta h2{

    font-size:64px;
    font-weight:800;
    line-height:1.1;

    color:#ffffff;

    margin-bottom:25px;

}

.nutrition-cta h2 span{

    color:#3b82f6;

}

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

.nutrition-cta p{

    max-width:760px;
    margin:0 auto 45px;

    font-size:20px;
    line-height:1.8;

    color:#9ca3af;

}

/* ======================================
   BUTTONS (SYSTEM ALIGNED)
====================================== */

.cta-buttons{

    display:flex;
    justify-content:center;

    gap:20px;
    flex-wrap:wrap;

    margin-bottom:70px;

}

/* Primary Button */

.cta-buttons .primary-btn{

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

    gap:10px;

    padding:18px 38px;

    border-radius:50px;

    background:#3b82f6;
    color:#ffffff;

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

    text-decoration:none;

    transition:.35s ease;

}

.cta-buttons .primary-btn:hover{

    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(59,130,246,.35);

}

/* Secondary Button */

.cta-buttons .secondary-btn{

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

    gap:10px;

    padding:18px 38px;

    border-radius:50px;

    background:#1a1a1a;

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

    color:#ffffff;

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

    text-decoration:none;

    transition:.35s ease;

}

.cta-buttons .secondary-btn:hover{

    background:#3b82f6;
    border-color:#3b82f6;

}

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

.cta-stats{

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

    gap:25px;

}

/* STAT BOX */

.stat-box{

    padding:30px;

    background:#181b24;

    border-radius:22px;

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

    transition:.35s ease;

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:#3b82f6;

    box-shadow:0 18px 40px rgba(59,130,246,.18);

}

.stat-box h3{

    font-size:42px;
    font-weight:800;

    color:#3b82f6;

    margin-bottom:12px;

}

.stat-box p{

    font-size:18px;
    color:#9ca3af;

    margin:0;

}
/* =======================================================
   SECTION 08 : NUTRITION CTA (RESPONSIVE)
======================================================= */

/* TABLET */

@media (max-width:992px){

    .nutrition-cta-content{

        padding:70px 40px;

    }

    .nutrition-cta h2{

        font-size:48px;

    }

    .cta-stats{

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

    }

}

/* MOBILE */

@media (max-width:768px){

    .nutrition-cta{

        padding:90px 6%;

    }

    .nutrition-cta-content{

        padding:50px 25px;

    }

    .nutrition-cta h2{

        font-size:36px;

    }

    .nutrition-cta p{

        font-size:18px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons a{

        width:100%;

    }

    .cta-stats{

        grid-template-columns:1fr;

    }

}

/* SMALL MOBILE */

@media (max-width:576px){

    .nutrition-cta{

        padding:80px 20px;

    }

    .nutrition-cta h2{

        font-size:32px;

    }

    .nutrition-cta p{

        font-size:16px;

    }

}

/* ==========================================================
   SECTION 01 : CALCULATOR HERO
========================================================== */

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

.calculator-hero{

    padding:clamp(6rem,8vw,8rem) 0;

    overflow:hidden;

}


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

.calculator-hero-wrapper{

    display:grid;

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

    align-items:center;

    gap:clamp(3rem,5vw,6rem);

}


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

.calculator-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:1.75rem;

}

.calculator-content h1{

    margin:0;

    max-width:10ch;

    line-height:1.05;

}

.calculator-content h1 span{

    color:var(--primary);

}

.calculator-content p{

    margin:0;

    max-width:60ch;

    color:var(--gray);

    line-height:1.8;

}


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

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:1rem;

    margin-top:.5rem;

}


/* ==========================================
   DASHBOARD
========================================== */

.calculator-dashboard{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.calculator-dashboard::before{

    content:"";

    position:absolute;

    inset:50% auto auto 50%;

    width:420px;

    height:420px;

    border-radius:50%;

    background:var(--primary);

    opacity:.12;

    filter:blur(170px);

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

}


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

.dashboard-card{

    position:relative;

    z-index:1;

    width:100%;

    max-width:480px;

    padding:2rem;

    background:var(--card);

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

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

    backdrop-filter:blur(18px);

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

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

}

.dashboard-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

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

}


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

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1.5rem;

}

.dashboard-header h3{

    margin:0;

    font-size:1.25rem;

    color:var(--white);

}

.dashboard-header span{

    font-size:.85rem;

    color:var(--gray);

}


/* ==========================================
   DASHBOARD METRICS
========================================== */

.dashboard-metrics{

    display:flex;

    flex-direction:column;

}


/* ==========================================
   DASHBOARD ITEM
========================================== */

.dashboard-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:1.25rem 0;

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

}

.dashboard-item:last-child{

    border-bottom:none;

}

.dashboard-item span{

    color:var(--gray);

    font-size:1rem;

}

.dashboard-item strong{

    font-size:1.35rem;

    font-weight:700;

    color:var(--primary);

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

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

@media (max-width:1024px){

    .calculator-hero{

        padding:5rem 0;

    }

    .calculator-hero-wrapper{

        gap:3rem;

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

    }

    .calculator-content h1{

        max-width:12ch;

    }

    .dashboard-card{

        padding:1.75rem;

    }

}


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

@media (max-width:768px){

    .calculator-hero{

        padding:4rem 0;

    }

    .calculator-hero-wrapper{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .calculator-content{

        align-items:center;

        text-align:center;

    }

    .calculator-content h1{

        max-width:100%;

    }

    .calculator-content p{

        max-width:600px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .calculator-dashboard{

        width:100%;

    }

    .dashboard-card{

        max-width:520px;

        margin:0 auto;

    }

}


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

@media (max-width:576px){

    .calculator-hero{

        padding:5rem 0 3.5rem;

    }

    .calculator-content{

        gap:1.5rem;

    }

    .calculator-content p{

        font-size:.95rem;

        line-height:1.75;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

    }

    .hero-buttons .primary-btn,

    .hero-buttons .secondary-btn{

        width:100%;

        justify-content:center;

    }

    .dashboard-card{

        padding:1.5rem;

    }

    .dashboard-header{

        margin-bottom:1.25rem;

    }

    .dashboard-header h3{

        font-size:1.1rem;

    }

    .dashboard-header span{

        font-size:.8rem;

    }

    .dashboard-item{

        padding:1rem 0;

    }

    .dashboard-item span{

        font-size:.95rem;

    }

    .dashboard-item strong{

        font-size:1.15rem;

    }

}


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

@media (max-width:390px){

    .calculator-hero{

        padding:3rem 0;

    }

    .hero-buttons{

        gap:.75rem;

    }

    .dashboard-card{

        padding:1.25rem;

    }

    .dashboard-header{

        flex-direction:column;

        align-items:flex-start;

        gap:.35rem;

    }

    .dashboard-item{

        padding:.9rem 0;

    }

    .dashboard-item span{

        font-size:.9rem;

    }

    .dashboard-item strong{

        font-size:1.05rem;

    }

}
/* ==========================================================
   SECTION 02 : CALCULATOR CATEGORIES
========================================================== */

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

.calculator-categories{

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

}


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

.calculator-category-grid{

    display:grid;

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

    gap:2rem;

    margin-top:clamp(3rem,5vw,4rem);

}


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

.calculator-category-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    padding:2rem;

    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;

}

.calculator-category-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

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

}


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

.calculator-label{

    position:absolute;

    top:1.25rem;

    right:1.25rem;

    padding:.4rem .85rem;

    background:var(--primary);

    color:var(--white);

    border-radius:999px;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.05em;

    text-transform:uppercase;

}


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

.calculator-category-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:76px;

    height:76px;

    margin-bottom:1.75rem;

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

    border-radius:20px;

    transition:transform .3s ease;

}

.calculator-category-card:hover .calculator-category-icon{

    transform:translateY(-4px);

}

.calculator-category-icon img{

    transition:transform .3s ease;

}

.calculator-category-card:hover .calculator-category-icon img{

    transform:scale(1.08);

}


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

.calculator-category-card h3{

    margin:0 0 .85rem;

    color:var(--white);

}

.calculator-category-card p{

    flex:1;

    margin:0 0 2rem;

    color:var(--gray);

    line-height:1.8;

}


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

.card-btn{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    margin-top:auto;

    color:var(--primary);

    font-weight:600;

    transition:
        gap .3s ease,
        color .3s ease;

}

.card-btn:hover{

    gap:1rem;

    color:var(--white);

}
/* ==========================================================
   CALCULATOR CATEGORIES RESPONSIVE
========================================================== */

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

@media (max-width:1024px){

    .calculator-category-grid{

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

    }

}


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

@media (max-width:768px){

    .calculator-categories{

        padding:4rem 0;

    }

    .calculator-category-grid{

        gap:1.5rem;

    }

    .calculator-category-card{

        padding:1.75rem;

    }

}


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

@media (max-width:576px){

    .calculator-categories{

        padding:3.5rem 0;

    }

    .calculator-category-grid{

        grid-template-columns:1fr;

    }

    .calculator-category-card{

        align-items:flex-start;

        text-align:left;

        padding:1.5rem;

    }

    .calculator-label{

        position:static;

        margin-bottom:1rem;

    }

    .calculator-category-icon{

        margin:0 0 1.5rem;

    }

    .calculator-category-card p{

        margin-bottom:1.5rem;

    }

    .card-btn{

        align-self:center;

    }

}


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

@media (max-width:390px){

    .calculator-category-card{

        padding:1.25rem;

    }

    .calculator-category-icon{

        width:68px;

        height:68px;

    }

    .calculator-label{

        font-size:.68rem;

    }

}
/* ==========================================================
   SECTION 03 : BMI CALCULATOR
========================================================== */

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

.bmi-calculator{

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

}


/* ==========================================
   WRAPPER
========================================== */

.bmi-wrapper{

    display:grid;

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

    gap:clamp(2.5rem,5vw,4rem);

    align-items:start;

    margin-top:clamp(3rem,5vw,4rem);

}


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

.bmi-card,
.bmi-result-card{

    padding:2rem;

    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;

}

.bmi-card:hover,
.bmi-result-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

}
/* ==========================================
   INPUT GROUP
========================================== */

.input-group{

    display:flex;

    flex-direction:column;

    gap:.85rem;

    margin-bottom:1.75rem;

}

.input-group:last-of-type{

    margin-bottom:2rem;

}


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

.input-group label{

    font-size:1rem;

    font-weight:600;

    color:var(--white);

}


/* ==========================================
   INPUT
========================================== */

.input-group input{

    width:100%;

    height:60px;

    padding:0 1.25rem;

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

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

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

    color:var(--white);

    font-size:1rem;

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

}

.input-group input::placeholder{

    color:var(--gray);

}

.input-group input:focus{

    outline:none;

    border-color:var(--primary);

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

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

}


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

.bmi-card .primary-btn{

    width:100%;

    justify-content:center;

}
/* ==========================================
   RESULT CARD
========================================== */

.bmi-result-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}


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

.result-title{

    display:block;

    margin-bottom:1rem;

    font-size:1rem;

    font-weight:600;

    color:var(--gray);

}


/* ==========================================
   BMI VALUE
========================================== */

#bmiValue{

    margin:0;

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

    font-weight:800;

    line-height:1;

    color:var(--primary);

}


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

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:1.5rem;

    padding:.75rem 1.5rem;

    border-radius:999px;

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

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

   color:var(--white);

    font-size:.95rem;

    font-weight:600;

}


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

.result-divider{

    width:100%;

    height:1px;

    margin:2rem 0;

    background:var(--border);

}


/* ==========================================
   IDEAL WEIGHT
========================================== */

.ideal-box{

    display:flex;

    flex-direction:column;

    gap:.5rem;

}

.ideal-box p{

    margin:0;

    color:var(--gray);

}

#idealWeight{

    margin:0;

    color:var(--white);

    font-size:1.8rem;

    font-weight:700;

}


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

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

@media (max-width:1024px){

    .bmi-wrapper{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:768px){

    .bmi-calculator{

        padding:4rem 0;

    }

    .bmi-wrapper{

        gap:2rem;

    }

    .bmi-card,
    .bmi-result-card{

        padding:1.75rem;

    }

}


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

@media (max-width:576px){

    .bmi-calculator{

        padding:3.5rem 0;

    }

    .bmi-card,
    .bmi-result-card{

        padding:1.5rem;

    }

    .input-group input{

        height:56px;

    }

    #idealWeight{

        font-size:1.5rem;

    }

}


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

@media (max-width:390px){

    .bmi-card,
    .bmi-result-card{

        padding:1.25rem;

    }

    .status-badge{

        width:100%;

    }

}
/* ==========================================================
   SECTION 04 : PROTEIN CALCULATOR
========================================================== */

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

.protein-calculator{

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

}


/* ==========================================
   WRAPPER
========================================== */

.protein-wrapper{

    display:grid;

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

    gap:clamp(2.5rem,5vw,4rem);

    align-items:start;

    margin-top:clamp(3rem,5vw,4rem);

}


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

.protein-card,
.protein-result .result-card{

    padding:2rem;

    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;

}

.protein-card:hover,
.protein-result .result-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

}
/* ==========================================
   INPUT GROUP
========================================== */

.protein-card .input-group{

    display:flex;

    flex-direction:column;

    gap:.85rem;

    margin-bottom:1.75rem;

}

.protein-card .input-group:last-of-type{

    margin-bottom:2rem;

}


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

.protein-card label{

    font-size:1rem;

    font-weight:600;

    color:var(--white);

}


/* ==========================================
   INPUT & SELECT
========================================== */

.protein-card input,
.protein-card select{

    width:100%;

    height:60px;

    padding:0 1.25rem;

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

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

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

    color:var(--white);

    font-size:1rem;

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

}


/* ==========================================
   PLACEHOLDER
========================================== */

.protein-card input::placeholder{

    color:var(--gray);

}


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

.protein-card input:focus,
.protein-card select:focus{

    outline:none;

    border-color:var(--primary);

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

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

}


/* ==========================================
   SELECT
========================================== */

.protein-card select{

    cursor:pointer;

}


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

.protein-card .btn-primary{

    width:100%;

    justify-content:center;

    margin-top:.5rem;

}
/* ==========================================
   RESULT CARD
========================================== */

.protein-result .result-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


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

.protein-result h3{

    margin:0;

    color:var(--gray);

    font-size:1.15rem;

    font-weight:600;

}


/* ==========================================
   PROTEIN VALUE
========================================== */

.protein-result h1{

    margin:1rem 0;

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

    line-height:1;

    font-weight:800;

    color:var(--primary);

}


/* ==========================================
   STATUS
========================================== */

#proteinStatus{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.75rem 1.5rem;

    border-radius:999px;

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

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

    color:var(--white);

    font-size:.95rem;

    font-weight:600;

}


/* ==========================================
   PROTEIN BREAKDOWN
========================================== */

.protein-breakdown,
.protein-tip{

    display:flex;

    flex-direction:column;

    gap:.5rem;

}

.protein-breakdown p,
.protein-tip p{

    margin:0;

    color:var(--gray);

}

.protein-breakdown h4{

    margin:0;

    color:var(--white);

    font-size:1.8rem;

    font-weight:700;

}


/* ==========================================
   RECOMMENDATION
========================================== */

#proteinTip{

    max-width:34ch;

    margin:0 auto;

    color:var(--gray);

    line-height:1.75;

}


/* ==========================================================
   PROTEIN CALCULATOR RESPONSIVE
========================================================== */

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

@media (max-width:1024px){

    .protein-wrapper{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:768px){

    .protein-calculator{

        padding:4rem 0;

    }

    .protein-wrapper{

        gap:2rem;

    }

    .protein-card,
    .protein-result .result-card{

        padding:1.75rem;

    }

}


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

@media (max-width:576px){

    .protein-calculator{

        padding:3.5rem 0;

    }

    .protein-card,
    .protein-result .result-card{

        padding:1.5rem;

    }

    .protein-card input,
    .protein-card select{

        height:56px;

    }

    .protein-breakdown h4{

        font-size:1.5rem;

    }

}


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

@media (max-width:390px){

    .protein-card,
    .protein-result .result-card{

        padding:1.25rem;

    }

    #proteinStatus{

        width:100%;

    }

}
/* ==========================================================
   SECTION 05 : TDEE CALCULATOR
========================================================== */

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

.tdee-calculator{

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

}


/* ==========================================
   WRAPPER
========================================== */

.tdee-wrapper{

    display:grid;

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

    gap:clamp(2.5rem,5vw,4rem);

    align-items:start;

    margin-top:clamp(3rem,5vw,4rem);

}


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

.tdee-card,
.tdee-result .result-card{

    padding:2rem;

    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;

}

.tdee-card:hover,
.tdee-result .result-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

}
/* ==========================================
   INPUT GROUP
========================================== */

.tdee-card .input-group{

    display:flex;

    flex-direction:column;

    gap:.85rem;

    margin-bottom:1.75rem;

}

.tdee-card .input-group:last-of-type{

    margin-bottom:2rem;

}


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

.tdee-card label{

    font-size:1rem;

    font-weight:600;

    color:var(--white);

}


/* ==========================================
   INPUT & SELECT
========================================== */

.tdee-card input,
.tdee-card select{

    width:100%;

    height:60px;

    padding:0 1.25rem;

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

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

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

    color:var(--white);

    font-size:1rem;

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

}


/* ==========================================
   PLACEHOLDER
========================================== */

.tdee-card input::placeholder{

    color:var(--gray);

}


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

.tdee-card input:focus,
.tdee-card select:focus{

    outline:none;

    border-color:var(--primary);

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

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

}


/* ==========================================
   SELECT
========================================== */

.tdee-card select{

    cursor:pointer;

}

.tdee-card option{

    color:#000;

    background:#fff;

}


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

.tdee-card .btn-primary{

    width:100%;

    justify-content:center;

    margin-top:.5rem;

}
/* ==========================================
   RESULT CARD
========================================== */

.tdee-result .result-card{

    display:flex;

    flex-direction:column;

    text-align:center;

}


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

.tdee-result h3{

    margin:0;

    color:var(--gray);

    font-size:1.15rem;

    font-weight:600;

}


/* ==========================================
   CALORIE VALUE
========================================== */

#maintenanceCalories{

    margin:1rem 0;

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

    line-height:1;

    font-weight:800;

    color:var(--primary);

}


/* ==========================================
   STATUS
========================================== */

#calorieStatus{

    display:inline-flex;

    align-self:center;

    align-items:center;

    justify-content:center;

    padding:.75rem 1.5rem;

    border-radius:999px;

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

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

    color:var(--white);

    font-size:.95rem;

    font-weight:600;

}


/* ==========================================
   RESULT LIST
========================================== */

.calorie-info{

    display:flex;

    flex-direction:column;

    margin-top:2rem;

}

.calorie-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    padding:1.1rem 0;

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

}

.calorie-item:last-child{

    border-bottom:none;

}

.calorie-item span{

    color:var(--gray);

}

.calorie-item strong{

    color:var(--primary);

    font-size:1.25rem;

    font-weight:700;

}


/* ==========================================================
   TDEE CALCULATOR RESPONSIVE
========================================================== */

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

@media (max-width:1024px){

    .tdee-wrapper{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:768px){

    .tdee-calculator{

        padding:4rem 0;

    }

    .tdee-wrapper{

        gap:2rem;

    }

    .tdee-card,
    .tdee-result .result-card{

        padding:1.75rem;

    }

}


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

@media (max-width:576px){

    .tdee-calculator{

        padding:3.5rem 0;

    }

    .tdee-card,
    .tdee-result .result-card{

        padding:1.5rem;

    }

    .tdee-card input,
    .tdee-card select{

        height:56px;

    }

    #maintenanceCalories{

        font-size:3rem;

    }

    .calorie-item{

        padding:1rem 0;

    }

    .calorie-item strong{

        font-size:1.1rem;

    }

}


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

@media (max-width:390px){

    .tdee-card,
    .tdee-result .result-card{

        padding:1.25rem;

    }

    #calorieStatus{

        width:100%;

    }

}
/* ==========================================================
   SECTION 06 : WATER INTAKE CALCULATOR
========================================================== */

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

.water-calculator{

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

}


/* ==========================================
   WRAPPER
========================================== */

.water-wrapper{

    display:grid;

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

    gap:clamp(2.5rem,5vw,4rem);

    align-items:start;

    margin-top:clamp(3rem,5vw,4rem);

}


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

.water-card,
.water-result .result-card{

    padding:2rem;

    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;

}

.water-card:hover,
.water-result .result-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

}
/* ==========================================
   INPUT GROUP
========================================== */

.water-card .input-group{

    display:flex;

    flex-direction:column;

    gap:.85rem;

    margin-bottom:1.75rem;

}

.water-card .input-group:last-of-type{

    margin-bottom:2rem;

}


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

.water-card label{

    font-size:1rem;

    font-weight:600;

    color:var(--white);

}


/* ==========================================
   INPUT & SELECT
========================================== */

.water-card input,
.water-card select{

    width:100%;

    height:60px;

    padding:0 1.25rem;

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

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

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

    color:var(--white);

    font-size:1rem;

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

}


/* ==========================================
   PLACEHOLDER
========================================== */

.water-card input::placeholder{

    color:var(--gray);

}


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

.water-card input:focus,
.water-card select:focus{

    outline:none;

    border-color:var(--primary);

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

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

}


/* ==========================================
   SELECT
========================================== */

.water-card select{

    cursor:pointer;

}

.water-card option{

    color:#000;

    background:#fff;

}


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

.water-card .btn-primary{

    width:100%;

    justify-content:center;

    margin-top:.5rem;

}
/* ==========================================
   RESULT CARD
========================================== */

.water-result .result-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}


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

.water-result h3{

    margin:0;

    color:var(--gray);

    font-size:1.15rem;

    font-weight:600;

}


/* ==========================================
   WATER VALUE
========================================== */

#waterValue{

    margin:1rem 0;

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

    line-height:1;

    font-weight:800;

    color:var(--primary);

}


/* ==========================================
   STATUS
========================================== */

#waterStatus{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:.75rem 1.5rem;

    border-radius:999px;

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

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

    color:var(--white);

    font-size:.95rem;

    font-weight:600;

}


/* ==========================================
   BREAKDOWN
========================================== */

.water-breakdown{

    display:flex;

    flex-direction:column;

    gap:.5rem;

    margin-top:2rem;

}

.water-breakdown p{

    margin:0;

    color:var(--gray);

}


/* ==========================================
   RECOMMENDATION
========================================== */

#waterTip{

    margin:0;

    color:var(--white);

    font-size:1.35rem;

    font-weight:700;

    line-height:1.7;

}


/* ==========================================================
   WATER CALCULATOR RESPONSIVE
========================================================== */

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

@media (max-width:1024px){

    .water-wrapper{

        grid-template-columns:1fr;

    }

}


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

@media (max-width:768px){

    .water-calculator{

        padding:4rem 0;

    }

    .water-wrapper{

        gap:2rem;

    }

    .water-card,
    .water-result .result-card{

        padding:1.75rem;

    }

}


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

@media (max-width:576px){

    .water-calculator{

        padding:3.5rem 0;

    }

    .water-card,
    .water-result .result-card{

        padding:1.5rem;

    }

    .water-card input,
    .water-card select{

        height:56px;

    }

    #waterValue{

        font-size:3rem;

    }

    #waterTip{

        font-size:1.1rem;

    }

}


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

@media (max-width:390px){

    .water-card,
    .water-result .result-card{

        padding:1.25rem;

    }

    #waterStatus{

        width:100%;

    }

}
/* ==========================================================
   BODY FAT CALCULATOR
========================================================== */

.bodyfat-calculator{

    padding:120px 8%;

    background:#0b0b0b;

}

.bodyfat-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:start;

    margin-top:70px;

}

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

.bodyfat-card{

    background:#161616;

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

    border-radius:30px;

    padding:45px;

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

}

.bodyfat-card .input-group{

    margin-bottom:28px;

}

.bodyfat-card label{

    display:block;

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    margin-bottom:12px;

}

.bodyfat-card input,
.bodyfat-card select{

    width:100%;

    height:65px;

    padding:0 22px;

    background:#1f1f1f;

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

    border-radius:16px;

    color:#ffffff;

    font-size:17px;

    outline:none;

    transition:.3s;

}

.bodyfat-card input:focus,
.bodyfat-card select:focus{

    border-color:#3b82f6;

    box-shadow:0 0 18px rgba(59,130,246,.25);

}

.bodyfat-card .btn-primary{

    width:100%;

    margin-top:10px;

}

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

.bodyfat-result{

    display:flex;

    justify-content:center;

}

.bodyfat-result .result-card{

    width:100%;

    background:#171c26;

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

    border-radius:30px;

    padding:45px;

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

}

.bodyfat-result h3{

    color:#9ca3af;

    text-align:center;

    font-size:22px;

    margin-bottom:20px;

}

#bodyFatValue{

    text-align:center;

    font-size:64px;

    color:#3b82f6;

    font-weight:800;

    margin-bottom:20px;

}

#bodyFatStatus{

    display:block;

    width:max-content;

    margin:auto;

    padding:12px 28px;

    border-radius:50px;

    background:#1d4ed8;

    color:#ffffff;

    font-size:17px;

    font-weight:600;

     transition:.4s;

    transform:scale(1);

}

.bodyfat-details{

    margin-top:35px;

}

@media(max-width:992px){

    .bodyfat-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .bodyfat-card,
    .bodyfat-result .result-card{

        padding:30px;

    }

    #bodyFatValue{

        font-size:50px;

    }

}

/* ==========================================================
   BODY FAT CLASSIFICATION METER
========================================================== */

.bodyfat-meter{

    margin:40px 0;

}

.bodyfat-meter h4{

    color:#ffffff;

    font-size:22px;

    margin-bottom:25px;

}

/* ======================================
   Labels
====================================== */

.meter-labels{

    display:grid;

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

    text-align:center;

    gap:4px;

    margin-bottom:15px;

}


.meter-labels span{

    font-size:11px;

    line-height:1.2;

}
/* ======================================
   Meter Bar
====================================== */

.meter-bar{

    position:relative;

    display:grid;

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

    height:18px;

    border-radius:50px;

    overflow:hidden;

}

/* Sections */

.meter-segment.essential{

    background:#ef4444;

}

.meter-segment.athletic{

    background:#22c55e;

}

.meter-segment.fitness{

    background:#3b82f6;

}

.meter-segment.average{

    background:#f59e0b;

}

.meter-segment.obese{

    background:#dc2626;

}

/* ======================================
   Pointer
====================================== */

.meter-pointer{

    position:absolute;

    top:1px;

    left:5%;

    width:18px;

    height:18px;

    background:#ffffff;

    border:3px solid #3b82f6;

    border-radius:50%;

    transform:translateX(-50%);

    transition:left .8s ease;

    box-shadow:0 0 15px rgba(59,130,246,.6);

    z-index:5;

}

/* ======================================
   Percentage
====================================== */

.meter-value{

    margin-top:18px;

    text-align:center;

}

#meterPercentage{

    color:#3b82f6;

    font-size:24px;

    font-weight:700;

}

/* ======================================
   Responsive
====================================== */

@media(max-width:768px){

    .meter-labels span{

        font-size:10px;

    }

    .meter-pointer{

        font-size:18px;

        top:-24px;

    }

    #meterPercentage{

        font-size:20px;

    }

}
/* ==========================================================
   LEAN BODY MASS CALCULATOR
========================================================== */

.lbm-calculator{

    padding:120px 8%;

    background:#0b0b0b;

}

.lbm-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:start;

    margin-top:70px;

}

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

.lbm-card{

    background:#161616;

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

    border-radius:30px;

    padding:45px;

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

}

.lbm-card .input-group{

    margin-bottom:28px;

}

.lbm-card label{

    display:block;

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    margin-bottom:12px;

}

.lbm-card input{

    width:100%;

    height:65px;

    padding:0 22px;

    background:#1f1f1f;

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

    border-radius:16px;

    color:#ffffff;

    font-size:17px;

    outline:none;

    transition:.3s;

}

.lbm-card input:focus{

    border-color:#3b82f6;

    box-shadow:0 0 18px rgba(59,130,246,.25);

}

.lbm-card .btn-primary{

    width:100%;

    margin-top:15px;

}

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

.lbm-result{

    display:flex;

    justify-content:center;

}

.lbm-result .result-card{

    width:100%;

    background:#171c26;

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

    border-radius:30px;

    padding:45px;

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

}

.lbm-result h3{

    text-align:center;

    color:#9ca3af;

    font-size:22px;

    margin-bottom:20px;

}

#lbmValue{

    text-align:center;

    font-size:64px;

    font-weight:800;

    color:#3b82f6;

    margin-bottom:20px;

}

#lbmStatus{

    display:block;

    width:max-content;

    margin:auto;

    padding:12px 28px;

    border-radius:50px;

    background:#1d4ed8;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

}

.lbm-details{

    margin-top:35px;

}

.lbm-details .calorie-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.lbm-details .calorie-item:last-child{

    border-bottom:none;

}

.lbm-details span{

    color:#9ca3af;

    font-size:16px;

}

.lbm-details strong{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

}

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

@media(max-width:992px){

    .lbm-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .lbm-card,
    .lbm-result .result-card{

        padding:30px;

    }

    #lbmValue{

        font-size:48px;

    }

    .lbm-card label{

        font-size:16px;

    }

}
/* ==========================================================
   MACRO CALCULATOR
========================================================== */

.macro-calculator{

    padding:120px 8%;

    background:#0b0b0b;

}

.macro-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:start;

    margin-top:70px;

}

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

.macro-card{

    background:#161616;

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

    border-radius:30px;

    padding:45px;

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

}

.macro-card .input-group{

    margin-bottom:28px;

}

.macro-card label{

    display:block;

    color:#ffffff;

    font-size:18px;

    font-weight:600;

    margin-bottom:12px;

}

.macro-card input,
.macro-card select{

    width:100%;

    height:65px;

    padding:0 22px;

    background:#1f1f1f;

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

    border-radius:16px;

    color:#ffffff;

    font-size:17px;

    outline:none;

    transition:.3s;

}

.macro-card input:focus,
.macro-card select:focus{

    border-color:#3b82f6;

    box-shadow:0 0 18px rgba(59,130,246,.25);

}

.macro-card .btn-primary{

    width:100%;

    margin-top:15px;

}

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

.macro-result{

    display:flex;

    justify-content:center;

}

.macro-result .result-card{

    width:100%;

    background:#171c26;

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

    border-radius:30px;

    padding:45px;

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

}

.macro-result h3{

    text-align:center;

    color:#9ca3af;

    font-size:22px;

    margin-bottom:20px;

}

#macroCalories{

    text-align:center;

    font-size:60px;

    font-weight:800;

    color:#3b82f6;

    margin-bottom:20px;

}

#macroStatus{

    display:block;

    width:max-content;

    margin:auto;

    padding:12px 30px;

    border-radius:50px;

    background:#2563eb;

    color:#ffffff;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.macro-details{

    margin-top:30px;

}

.macro-details .calorie-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.macro-details .calorie-item:last-child{

    border-bottom:none;

}

.macro-details span{

    color:#9ca3af;

    font-size:16px;

}

.macro-details strong{

    color:#ffffff;

    font-size:18px;

    font-weight:700;

}

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

@media(max-width:992px){

    .macro-wrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .macro-card,
    .macro-result .result-card{

        padding:30px;

    }

    #macroCalories{

        font-size:48px;

    }

}
/* =======================================================
   LEARN HERO
======================================================= */

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

.learn-hero{

    padding:140px 0 100px;

    background:linear-gradient(
        180deg,
        #0b0b0b 0%,
        #111827 100%
    );

    text-align:center;

}

/* ==========================================
   LAYOUT
========================================== */

.learn-hero-content{

    max-width:900px;

    margin-inline:auto;

}

.learn-hero .section-badge{

    margin-bottom:2rem;

}

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

.learn-hero h1{

    margin-bottom:1.5rem;

    font-size:3.6rem;

    font-weight:800;

    line-height:1.2;

    color:var(--white);

}

.learn-hero h1 span{

    color:var(--primary);

}

.learn-hero p{

    max-width:760px;

    margin:0 auto 3.5rem;

    font-size:1.2rem;

    line-height:1.8;

    color:var(--gray);

}

/* ==========================================
   SEARCH
========================================== */

.learn-search{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}

.learn-search input{

    flex:1;

    max-width:550px;

    min-width:280px;

    padding:1rem 1.5rem;

    background:var(--card);

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

    border-radius:999px;

    color:var(--white);

    font-size:1rem;

    transition:all .3s ease;

}

.learn-search input::placeholder{

    color:var(--gray);

}

.learn-search input:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.learn-search .btn-primary{

    min-width:170px;

}

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

@media (max-width:1024px){

    .learn-hero h1{

        font-size:3rem;

    }

}

@media (max-width:768px){

    .learn-hero{

        padding:110px 0 80px;

    }

    .learn-hero h1{

        font-size:2.5rem;

    }

    .learn-hero p{

        font-size:1.1rem;

    }

    .learn-search{

        flex-direction:column;

    }

    .learn-search input,

    .learn-search .btn-primary{

        width:100%;

        max-width:100%;

    }

}

@media (max-width:576px){

    .learn-hero{

        padding:100px 0 70px;

    }

    .learn-hero h1{

        font-size:2rem;

    }

    .learn-hero p{

        font-size:1rem;

        line-height:1.7;

    }

}

@media (max-width:390px){

    .learn-hero h1{

        font-size:1.75rem;

    }

}
/* ==========================================================
   LEARN CATEGORIES
========================================================== */

.learn-categories{

    padding:100px 0;

    background:#0b0b0b;

}

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

.category-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.category-card{

    background:#1a1f2b;

    border:1px solid #2c3344;

    border-radius:25px;

    padding:40px;

    transition:.35s;

    cursor:pointer;

    overflow:hidden;

    position:relative;

}

/* Hover */

.category-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}



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

.category-card h3{

    color:#ffffff;

    font-size:42px;

    font-weight:700;

    margin-bottom:20px;

}

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

.category-card p{

    color:#9ca3af;

    font-size:24px;

    line-height:1.8;

}

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

.category-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transition:.7s;

}

.category-card:hover::before{

    left:100%;

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

@media(max-width:1200px){

.category-grid{

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

}

}

@media(max-width:768px){

.category-grid{

    grid-template-columns:1fr;

}

.category-card{

    padding:30px;

}

.category-card h3{

    font-size:34px;

}

.category-card p{

    font-size:20px;

}
.category-icon{
    margin-bottom:35px;
}

}
/* ==========================================================
   FEATURED ARTICLES
========================================================== */

.featured-articles{

    padding:100px 0;

    background:#0b0b0b;

}

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

.article-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.article-card{

    background:#1a1f2b;

    border:1px solid #2c3344;

    border-radius:25px;

    overflow:hidden;

    transition:.35s;

    cursor:pointer;

}

.article-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}

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

.article-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    display:block;

    transition:.35s;

}

.article-card:hover img{

    transform:scale(1.05);

}

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

.article-content{

    padding:30px;

}

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

.article-category{

    display:inline-block;

    padding:8px 18px;

    background:#2563eb;

    color:#ffffff;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

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

.article-content h3{

    color:#ffffff;

    font-size:30px;

    line-height:1.4;

    margin-bottom:18px;

}

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

.article-content p{

    color:#9ca3af;

    font-size:18px;

    line-height:1.8;

    margin-bottom:25px;

}

/* ==========================================================
   READ MORE
========================================================== */

.article-content a{

    color:#3b82f6;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.article-content a:hover{

    color:#60a5fa;

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

@media(max-width:1200px){

.article-grid{

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

}

}

@media(max-width:768px){

.article-grid{

    grid-template-columns:1fr;

}

.article-content{

    padding:25px;

}

.article-content h3{

    font-size:24px;

}

.article-content p{

    font-size:17px;

}

.article-card img{

    height:220px;

}

}
/* ==========================================================
   LATEST ARTICLES
========================================================== */

.latest-articles{

    padding:100px 0;

    background:#111827;

}

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

.latest-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.latest-card{

    display:flex;

    align-items:flex-start;

    gap:25px;

    background:#1a1f2b;

    border:1px solid #2c3344;

    border-radius:22px;

    padding:30px;

    transition:.35s;

    cursor:pointer;

}

.latest-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

/* ==========================================================
   DATE
========================================================== */

.latest-date{

    min-width:90px;

    height:90px;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    color:#ffffff;

}

.latest-date span{

    font-size:34px;

    font-weight:700;

    line-height:1;

}

.latest-date small{

    font-size:14px;

    letter-spacing:2px;

    margin-top:8px;

}

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

.latest-content{

    flex:1;

}

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

.latest-category{

    display:inline-block;

    padding:8px 18px;

    background:#2563eb;

    border-radius:50px;

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

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

.latest-content h3{

    color:#ffffff;

    font-size:28px;

    line-height:1.4;

    margin-bottom:15px;

}

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

.latest-content p{

    color:#9ca3af;

    font-size:17px;

    line-height:1.8;

    margin-bottom:22px;

}

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

.latest-content a{

    color:#3b82f6;

    text-decoration:none;

    font-size:17px;

    font-weight:700;

    transition:.3s;

}

.latest-content a:hover{

    color:#60a5fa;

    padding-left:8px;

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

@media(max-width:992px){

.latest-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.latest-card{

    flex-direction:column;

    align-items:flex-start;

}

.latest-date{

    width:80px;

    height:80px;

}

.latest-date span{

    font-size:28px;

}

.latest-content h3{

    font-size:24px;

}

.latest-content p{

    font-size:16px;

}

}
/* ==========================================================
   POPULAR FITNESS TOPICS
========================================================== */

.popular-topics{

    padding:100px 0;

    background:#0b0b0b;

}

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

.topics-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.topic-card{

    position:relative;

    height:420px;

    overflow:hidden;

    border-radius:25px;

    cursor:pointer;

    border:1px solid #2c3344;

    transition:.35s;

}

.topic-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}

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

.topic-card > img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.topic-card:hover img{

    transform:scale(1.12);

}

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

.topic-overlay{

    position:absolute;

    inset:0;

    display:flex;

     margin-bottom:16px;

    flex-direction:column;

    justify-content:flex-end;

    padding:35px;

  background:linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.15) 100%
);

}

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

.topic-overlay span{

    display:inline-block;

    width:max-content;

    padding:8px 18px;

    background:#2563eb;

    border-radius:50px;

    color:#ffffff;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

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

.topic-overlay h3{

    color:#ffffff;

    font-size:34px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:20px;

}

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

.topic-overlay a{

    color:#ffffff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.topic-overlay a:hover{

    color:#60a5fa;

    padding-left:8px;

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

@media(max-width:1200px){

.topics-grid{

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

}

}

@media(max-width:768px){

.topics-grid{

    grid-template-columns:1fr;

}

.topic-card{

    height:340px;

}

.topic-overlay{

    padding:25px;

}

.topic-overlay h3{

    font-size:28px;

}

}
/* ==========================================================
   LEARN CTA
========================================================== */

.learn-cta{

    padding:120px 0;

    background:#0b0b0b;

}

.learn-cta-box{

    max-width:1200px;

    margin:auto;

    padding:80px 60px;

    border-radius:35px;

    text-align:center;

    background:linear-gradient(
        135deg,
        #1e3a8a,
        #2563eb,
        #3b82f6
    );

    position:relative;

    overflow:hidden;

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

}

/* ==========================================
   Decorative Glow
========================================== */

.learn-cta-box::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

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

    border-radius:50%;

    top:-120px;

    left:-120px;

}

.learn-cta-box::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

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

    border-radius:50%;

    bottom:-120px;

    right:-120px;

}

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

.learn-cta-box>*{

    position:relative;

    z-index:2;

}

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

.learn-cta .section-badge{

    display:inline-block;

    padding:12px 28px;

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

    backdrop-filter:blur(10px);

    border-radius:50px;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    margin-bottom:30px;

}

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

.learn-cta-box h2{

    color:#ffffff;

    font-size:58px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.learn-cta-box h2 span{

    color:#facc15;

}

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

.learn-cta-box p{

    max-width:750px;

    margin:auto;

    color:#e5e7eb;

    font-size:20px;

    line-height:1.8;

    margin-bottom:50px;

}

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

.learn-cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:70px;

}

.learn-cta-buttons .btn-primary{

    min-width:220px;

}

.learn-cta-buttons .btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 35px;

    border-radius:50px;

    background:#ffffff;

    color:#1e3a8a;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.learn-cta-buttons .btn-secondary:hover{

    transform:translateY(-4px);

    background:#f3f4f6;

}

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

.learn-stats{

    display:grid;

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

    gap:30px;

}

.learn-stat{

    padding:25px;

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

    backdrop-filter:blur(10px);

    border-radius:20px;

}

.learn-stat h3{

    color:#ffffff;

    font-size:42px;

    margin-bottom:10px;

}

.learn-stat span{

    color:#dbeafe;

    font-size:17px;

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

@media(max-width:992px){

.learn-stats{

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

}

.learn-cta-box{

    padding:60px 40px;

}

.learn-cta-box h2{

    font-size:46px;

}

}

@media(max-width:768px){

.learn-cta{

    padding:80px 0;

}

.learn-cta-box{

    padding:45px 25px;

}

.learn-cta-box h2{

    font-size:34px;

}

.learn-cta-box p{

    font-size:17px;

}

.learn-cta-buttons{

    flex-direction:column;

}

.learn-cta-buttons .btn-primary,

.learn-cta-buttons .btn-secondary{

    width:100%;

}

.learn-stats{

    grid-template-columns:1fr;

}

.learn-stat h3{

    font-size:34px;

}

}
/* =======================================================
   ABOUT HERO
======================================================= */

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

.about-hero{

    padding:140px 0 100px;

    background:linear-gradient(
        180deg,
        #0b0b0b 0%,
        #111827 100%
    );

    text-align:center;

}

/* ==========================================
   LAYOUT
========================================== */

.about-hero-content{

    max-width:960px;

    margin-inline:auto;

}

.about-hero .section-badge{

    margin-bottom:2rem;

}

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

.about-hero h1{

    margin-bottom:1.75rem;

    font-size:3.75rem;

    font-weight:800;

    line-height:1.15;

    color:var(--white);

}

.about-hero h1 span{

    color:var(--primary);

}

.about-hero p{

    max-width:760px;

    margin:0 auto 3.5rem;

    font-size:1.25rem;

    line-height:1.8;

    color:var(--gray);

}

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

.about-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1.25rem;

    flex-wrap:wrap;

    margin-bottom:5rem;

}

.about-buttons .btn-primary,

.about-buttons .btn-secondary{

    min-width:220px;

}

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

.about-stats{

    display:grid;

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

    gap:1.5rem;

}

.about-stat{

    padding:2rem 1.5rem;

    background:var(--card);

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

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

    transition:all .3s ease;

}

.about-stat:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

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

}

.about-stat h3{

    margin-bottom:.5rem;

    font-size:2.5rem;

    font-weight:800;

    color:var(--primary);

}

.about-stat p{

    margin:0;

    color:var(--gray);

    font-size:1rem;

    line-height:1.6;

}

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

@media (max-width:1024px){

    .about-hero{

        padding:130px 0 90px;

    }

    .about-hero h1{

        font-size:3rem;

    }

    .about-stats{

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

    }

}

@media (max-width:768px){

    .about-hero{

        padding:110px 0 80px;

    }

    .about-hero h1{

        font-size:2.5rem;

    }

    .about-hero p{

        font-size:1.1rem;

    }

    .about-buttons{

        flex-direction:column;

    }

    .about-buttons .btn-primary,

    .about-buttons .btn-secondary{

        width:100%;

    }

}

@media (max-width:576px){

    .about-hero{

        padding:100px 0 70px;

    }

    .about-hero h1{

        font-size:2rem;

    }

    .about-hero p{

        font-size:1rem;

        line-height:1.7;

    }

    .about-stats{

        grid-template-columns:1fr;

    }

    .about-stat{

        padding:1.75rem;

    }

}

@media (max-width:390px){

    .about-hero h1{

        font-size:1.75rem;

    }

    .about-buttons{

        gap:1rem;

    }

    .about-stat h3{

        font-size:2rem;

    }

}
/* ==========================================================
   OUR STORY
========================================================== */

.our-story{

    padding:120px 0;

    background:#111827;

}

/* ==========================================================
   LAYOUT
========================================================== */

.story-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

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

.story-image{

    position:relative;

}

.story-image img{

    width:100%;

    border-radius:30px;

    display:block;

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

    transition:.4s;

}

.story-image:hover img{

    transform:scale(1.03);

}

/* Decorative Border */

.story-image::before{

    content:"";

    position:absolute;

    top:-15px;

    left:-15px;

    width:100%;

    height:100%;

    border:3px solid #2563eb;

    border-radius:30px;

    z-index:-1;

}

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

.story-content .section-badge{

    margin-bottom:25px;

}

.story-content h2{

    font-size:52px;

    color:#ffffff;

    line-height:1.2;

    margin-bottom:30px;

}

.story-content h2 span{

    color:#3b82f6;

}

.story-content p{

    color:#9ca3af;

    font-size:18px;

    line-height:1.9;

    margin-bottom:25px;

}

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

.story-highlights{

    display:grid;

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

    gap:18px;

    margin:45px 0;

}

.highlight-item{

    background:#1a1f2b;

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

    border-radius:18px;

    padding:18px 20px;

    color:#ffffff;

    font-size:17px;

    font-weight:600;

    transition:.3s;

     padding: 1.75rem;

}
.highlight-item .icon-circle{

    width: 3.5rem;
    height: 3.5rem;

    flex-shrink: 0;

    margin-bottom: 1.25rem;

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

}

.highlight-item:hover{

    transform: translateY(-6px);

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

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


}
.highlight-item:hover .icon-circle{

    transform: scale(1.08);

}
.highlight-text{

    line-height: 1.45;
       font-weight: 600;

}
/* ==========================================================
   BUTTON
========================================================== */

.story-content .btn-primary{

    margin-top:10px;

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

@media(max-width:992px){

.story-wrapper{

    grid-template-columns:1fr;

}

.story-image{

    max-width:600px;

    margin:auto;

}

.story-content{

    text-align:center;

}

.story-highlights{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.our-story{

    padding:80px 0;

}

.story-content h2{

    font-size:38px;

}

.story-content p{

    font-size:17px;

}

.story-highlights{

    grid-template-columns:1fr;

}

.highlight-item{

    text-align:left;

}

}
/* ==========================================================
   WHY CHOOSE ATUL TOMAR FITNESS
========================================================== */

.why-choose{

    padding:120px 0;

    background:#0b0b0b;

}

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

.choose-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.choose-card{

    background:#1a1f2b;

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

    border-radius:28px;

    padding:45px 35px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    position:relative;

    overflow:hidden;

        transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}
.choose-card .icon-circle{

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

}

/* Hover */

.choose-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}
.choose-card:hover .icon-circle{
  
       background: rgba(37,99,235,.18);

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

    transform: scale(1.08);


}

/* Shine Effect */

.choose-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.06),

        transparent

    );

    transition:.8s;

}

.choose-card:hover::before{

    left:100%;

}

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

.choose-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:30px;

    border-radius:22px;

    background:linear-gradient(

        135deg,

        #2563eb,

        #3b82f6

    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    transition:.35s;

}

.choose-card:hover .choose-icon{

    transform:rotate(-8deg) scale(1.08);

}

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

.choose-card h3{

    color:#ffffff;

    font-size:28px;

    line-height:1.4;

    margin-bottom:20px;

}

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

.choose-card p{

    color:#9ca3af;

    font-size:17px;

    line-height:1.8;

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

@media(max-width:1200px){

.choose-grid{

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

}

}

@media(max-width:768px){

.why-choose{

    padding:80px 0;

}

.choose-grid{

    grid-template-columns:1fr;

}

.choose-card{

    padding:35px 25px;

}

.choose-icon{

    width:75px;

    height:75px;

    font-size:34px;

}

.choose-card h3{

    font-size:24px;

}

.choose-card p{

    font-size:16px;

}

}
/* ==========================================================
   MISSION & VISION
========================================================== */

.mission-vision{

    padding:120px 0;

    background:#111827;

}

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

.mission-grid{

    display:grid;

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

    gap:40px;

    margin-top:70px;

}

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

.mission-card{

    background:#1a1f2b;

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

    border-radius:30px;

    padding:50px 40px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.mission-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}

/* ==========================================
   SHINE EFFECT
========================================== */

.mission-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transition:.8s;

}

.mission-card:hover::before{

    left:100%;

}

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

.mission-icon{

    width:90px;

    height:90px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    margin-bottom:30px;

    transition:.35s;

}

.mission-card:hover .mission-icon{

    transform:rotate(-8deg) scale(1.08);

}

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

.mission-card h3{

    color:#ffffff;

    font-size:34px;

    margin-bottom:25px;

}

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

.mission-card p{

    color:#9ca3af;

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

}

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

.mission-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.mission-card ul li{

    color:#ffffff;

    font-size:17px;

    margin-bottom:18px;

    padding-left:12px;

    transition:.3s;

}

.mission-card ul li:hover{

    color:#60a5fa;

    transform:translateX(6px);

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

@media(max-width:992px){

.mission-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.mission-vision{

    padding:80px 0;

}

.mission-card{

    padding:35px 25px;

}

.mission-icon{

    width:75px;

    height:75px;

    font-size:34px;

}

.mission-card h3{

    font-size:28px;

}

.mission-card p{

    font-size:16px;

}

.mission-card ul li{

    font-size:16px;

}

}
/* ==========================================================
   CORE VALUES
========================================================== */

.core-values{

    padding:120px 0;

    background:#0b0b0b;

}

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

.values-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.value-card{

    background:#1a1f2b;

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

    border-radius:28px;

    padding:45px 35px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

/* Hover */

.value-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}

/* ==========================================================
   SHINE EFFECT
========================================================== */

.value-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.06),

        transparent

    );

    transition:.8s;

}

.value-card:hover::before{

    left:100%;

}

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

.value-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:30px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    transition:.35s;

}

.value-card:hover .value-icon{

    transform:rotate(-8deg) scale(1.08);

}

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

.value-card h3{

    color:#ffffff;

    font-size:28px;

    font-weight:700;

    line-height:1.4;

    margin-bottom:18px;

}

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

.value-card p{

    color:#9ca3af;

    font-size:17px;

    line-height:1.8;

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

@media(max-width:1200px){

.values-grid{

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

}

}

@media(max-width:768px){

.core-values{

    padding:80px 0;

}

.values-grid{

    grid-template-columns:1fr;

}

.value-card{

    padding:35px 25px;

}

.value-icon{

    width:75px;

    height:75px;

    font-size:34px;

}

.value-card h3{

    font-size:24px;

}

.value-card p{

    font-size:16px;

}

}
/* ==========================================================
   OUR IMPACT
========================================================== */

.our-impact{

    padding:120px 0;

    background:#111827;

}

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

.impact-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.impact-card{

    background:#1a1f2b;

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

    border-radius:28px;

    padding:45px 35px;

    text-align:center;

    position:relative;

    overflow:hidden;

    transition:.35s;

    cursor:pointer;

}

.impact-card:hover{

    transform:translateY(-10px);

    border-color:#2563eb;

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

}

/* ==========================================================
   SHINE EFFECT
========================================================== */

.impact-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.06),

        transparent

    );

    transition:.8s;

}

.impact-card:hover::before{

    left:100%;

}

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

.impact-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:30px;

    border-radius:22px;

    background:linear-gradient(

        135deg,

        #2563eb,

        #3b82f6

    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    transition:.35s;

}

.impact-card:hover .impact-icon{

    transform:rotate(-8deg) scale(1.08);

}

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

.impact-card h3{

    color:#3b82f6;

    font-size:48px;

    font-weight:800;

    margin-bottom:12px;

}

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

.impact-card span{

    display:block;

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

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

.impact-card p{

    color:#9ca3af;

    font-size:17px;

    line-height:1.8;

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

@media(max-width:1200px){

.impact-grid{

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

}

}

@media(max-width:768px){

.our-impact{

    padding:80px 0;

}

.impact-grid{

    grid-template-columns:1fr;

}

.impact-card{

    padding:35px 25px;

}

.impact-icon{

    width:75px;

    height:75px;

    font-size:34px;

}

.impact-card h3{

    font-size:40px;

}

.impact-card span{

    font-size:20px;

}

.impact-card p{

    font-size:16px;

}

}
/* ==========================================================
   FOUNDER MESSAGE
========================================================== */

.founder-message{

    padding:120px 0;

    background:#0b0b0b;

}

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

.founder-card{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:center;

    background:#1a1f2b;

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

    border-radius:35px;

    padding:60px;

    overflow:hidden;

    position:relative;

    transition:.35s;

}

.founder-card:hover{

    border-color:#2563eb;

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

}

/* ==========================================================
   SHINE EFFECT
========================================================== */

.founder-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transition:.9s;

}

.founder-card:hover::before{

    left:100%;

}

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

.founder-image{

    position:relative;

}

.founder-image img{

    width:100%;

    border-radius:30px;

    display:block;

    transition:.4s;

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

}

.founder-card:hover .founder-image img{

    transform:scale(1.03);

}

/* Decorative Border */

.founder-image::before{

    content:"";

    position:absolute;

    top:-15px;

    left:-15px;

    width:100%;

    height:100%;

    border:3px solid #2563eb;

    border-radius:30px;

    z-index:-1;

}

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

.founder-content{

    position:relative;

    z-index:2;

}

.founder-content .section-badge{

    margin-bottom:25px;

}

.founder-content h2{

    color:#ffffff;

    font-size:52px;

    line-height:1.2;

    margin-bottom:30px;

}

.founder-content h2 span{

    color:#3b82f6;

}

.founder-content p{

    color:#9ca3af;

    font-size:18px;

    line-height:1.9;

    margin-bottom:22px;

}

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

.founder-content blockquote{

    margin:40px 0;

    padding:30px;

    border-left:5px solid #2563eb;

    background:#111827;

    border-radius:18px;

    color:#ffffff;

    font-size:22px;

    font-style:italic;

    line-height:1.8;

}

/* ==========================================================
   SIGNATURE
========================================================== */

.founder-signature{

    margin-bottom:35px;

}

.founder-signature h4{

    color:#ffffff;

    font-size:28px;

    margin-bottom:8px;

}

.founder-signature span{

    color:#60a5fa;

    font-size:17px;

}

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

.founder-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.founder-buttons .btn-primary{

    min-width:220px;

}

.founder-buttons .btn-secondary{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 35px;

    border:2px solid #3b82f6;

    border-radius:50px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.founder-buttons .btn-secondary:hover{

    background:#2563eb;

    transform:translateY(-4px);

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

@media(max-width:1100px){

.founder-card{

    grid-template-columns:1fr;

}

.founder-image{

    max-width:500px;

    margin:auto;

}

}

@media(max-width:768px){

.founder-message{

    padding:80px 0;

}

.founder-card{

    padding:35px 25px;

}

.founder-content{

    text-align:center;

}

.founder-content h2{

    font-size:36px;

}

.founder-content p{

    font-size:17px;

}

.founder-content blockquote{

    font-size:18px;

    padding:22px;

}

.founder-signature h4{

    font-size:24px;

}

.founder-buttons{

    flex-direction:column;

}

.founder-buttons .btn-primary,

.founder-buttons .btn-secondary{

    width:100%;

}

}
/* ==========================================================
   CONTACT HERO
========================================================== */

.contact-hero{

    padding:140px 0 100px;

    background:linear-gradient(
        180deg,
        #0b0b0b 0%,
        #111827 100%
    );

    text-align:center;

}

.contact-hero-content{

    max-width:850px;

    margin:auto;

}

.contact-hero .section-badge{

    display:inline-block;

    padding:12px 28px;

    background:#2563eb;

    color:#ffffff;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    margin-bottom:30px;

}

.contact-hero h1{

    color:#ffffff;

    font-size:60px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:30px;

}

.contact-hero h1 span{

    color:#3b82f6;

}

.contact-hero p{

    color:#9ca3af;

    font-size:20px;

    line-height:1.8;

}
/* ==========================================================
   CONTACT INFORMATION
========================================================== */

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

.contact-info{

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

}


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

.contact-grid{

    display:grid;

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

    gap:2rem;

    margin-top:clamp(3rem,5vw,4rem);

}


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

.contact-card{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:2rem;

    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;

}

.contact-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

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

.contact-card .icon-circle{

    margin-bottom:1.5rem;

    flex-shrink:0;

    transition:
        transform .3s ease,
        background .3s ease;

}

.contact-card:hover .icon-circle{

    transform:translateY(-4px);

}


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

.contact-card h3{

    margin:0 0 .85rem;

    color:var(--white);

    font-size:1.35rem;

    font-weight:700;

}


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

.contact-card p{

    margin:0 0 1.5rem;

    color:var(--gray);

    line-height:1.75;

}


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

.contact-card a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:auto;

    color:var(--primary-light);

    font-weight:600;

    text-decoration:none;

    word-break:break-word;

    transition:color .3s ease;

}

.contact-card a:hover{

    color:var(--white);

}
/* ==========================================================
   CONTACT INFORMATION RESPONSIVE
========================================================== */

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

@media (max-width:1024px){

    .contact-grid{

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

    }

}


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

@media (max-width:768px){

    .contact-info{

        padding:4rem 0;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:1.5rem;

    }

    .contact-card{

        padding:1.75rem;

    }

    .contact-card h3{

        font-size:1.25rem;

    }

}


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

@media (max-width:576px){

    .contact-info{

        padding:3.5rem 0;

    }

    .contact-card{

        padding:1.5rem;

    }

    .contact-card p{

        font-size:.95rem;

    }

    .contact-card a{

        font-size:.95rem;

    }

}


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

@media (max-width:390px){

    .contact-card{

        padding:1.25rem;

    }

    .contact-card h3{

        font-size:1.15rem;

    }

    .contact-card p{

        font-size:.9rem;

    }

    .contact-card a{

        font-size:.9rem;

    }

}

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

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

.contact-form-section{

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

}


/* ==========================================
   WRAPPER
========================================== */

.contact-wrapper{

    display:grid;

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

    gap:clamp(3rem,6vw,5rem);

    align-items:center;

}


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

.contact-text p{

    max-width:60ch;

    margin-top:1.5rem;

    color:var(--gray);

    line-height:1.8;

}


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

.contact-form{

    padding:2rem;

    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;

}

.contact-form:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

}


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

.contact-form form{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}
/* ==========================================
   FORM GROUP
========================================== */

.form-group{

    display:flex;

    flex-direction:column;

    gap:.85rem;

}


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

.form-group label{

    color:var(--white);

    font-size:1rem;

    font-weight:600;

}


/* ==========================================
   INPUT & TEXTAREA
========================================== */

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:1rem 1.25rem;

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

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

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

    color:var(--white);

    font-size:1rem;

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

}


/* ==========================================
   TEXTAREA
========================================== */

.contact-form textarea{

    min-height:180px;

    resize:vertical;

}


/* ==========================================
   PLACEHOLDER
========================================== */

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:var(--gray);

}


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

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

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

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

}


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

.contact-form .btn-primary{

    width:100%;

    justify-content:center;

    margin-top:.5rem;

}
/* ==========================================================
   CONTACT FORM RESPONSIVE
========================================================== */

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

@media (max-width:1024px){

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .contact-text{

        text-align:center;

    }

    .contact-text p{

        max-width:60ch;

        margin:1.5rem auto 0;

    }

}


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

@media (max-width:768px){

    .contact-form-section{

        padding:4rem 0;

    }

    .contact-form{

        padding:1.75rem;

    }

}


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

@media (max-width:576px){

    .contact-form-section{

        padding:3.5rem 0;

    }

    .contact-form{

        padding:1.5rem;

    }

    .contact-form input,
    .contact-form textarea{

        font-size:.95rem;

    }

    .contact-form textarea{

        min-height:160px;

    }

}


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

@media (max-width:390px){

    .contact-form{

        padding:1.25rem;

    }

    .form-group{

        gap:.75rem;

    }

    .contact-form textarea{

        min-height:140px;

    }

}







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

.exercise-hero{

    padding:150px 0 100px;

    background:#0b0b0b;

}

/* ==========================================================
   WRAPPER
========================================================== */

.exercise-hero-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

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

.exercise-content h1{

    color:#ffffff;

    font-size:64px;

    font-weight:800;

    line-height:1.1;

    margin:25px 0;

}

.exercise-content p{

    color:#9ca3af;

    font-size:19px;

    line-height:1.9;

    margin-bottom:45px;

    max-width:650px;

}

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

.exercise-info{

    display:grid;

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

    gap:20px;

    margin-bottom:45px;

}

.exercise-item{

    background:#111827;

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

    border-radius:18px;

    padding:22px;

    transition:.3s;

}

.exercise-item:hover{

    border-color:#2563eb;

    transform:translateY(-5px);

}

.exercise-item h4{

    color:#60a5fa;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:10px;

}

.exercise-item span{

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}

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

.exercise-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.exercise-buttons .btn-primary{

    min-width:220px;

}

.exercise-buttons .btn-secondary{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:220px;

    padding:18px 35px;

    border:2px solid #2563eb;

    border-radius:50px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.exercise-buttons .btn-secondary:hover{

    background:#2563eb;

    transform:translateY(-4px);

}

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

.exercise-image{

    position:relative;

}

.exercise-image img{

    width:100%;

    display:block;

    border-radius:30px;

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

    transition:.4s;

}

.exercise-image img:hover{

    transform:scale(1.02);

}

/* Decorative Border */

.exercise-image::before{

    content:"";

    position:absolute;

    top:-15px;

    left:-15px;

    width:100%;

    height:100%;

    border:3px solid #2563eb;

    border-radius:30px;

    z-index:-1;

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

@media(max-width:1100px){

.exercise-hero-wrapper{

    grid-template-columns:1fr;

}

.exercise-content{

    text-align:center;

}

.exercise-content p{

    margin:auto;

    margin-bottom:40px;

}

.exercise-info{

    max-width:700px;

    margin:40px auto;

}

.exercise-buttons{

    justify-content:center;

}

.exercise-image{

    max-width:650px;

    margin:auto;

}

}

@media(max-width:768px){

.exercise-hero{

    padding:120px 0 70px;

}

.exercise-content h1{

    font-size:42px;

}

.exercise-content p{

    font-size:17px;

}

.exercise-info{

    grid-template-columns:1fr;

}

.exercise-buttons{

    flex-direction:column;

}

.exercise-buttons .btn-primary,

.exercise-buttons .btn-secondary{

    width:100%;

}

}
/* ==========================================================
   QUICK FACTS
========================================================== */

.exercise-quick-facts{

    display:grid;

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

    gap:20px;

    margin-top:50px;

}

.quick-fact{

    display:flex;

    align-items:center;

    gap:18px;

    background:#111827;

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

    border-radius:18px;

    padding:20px 22px;

    transition:.3s;

}

.quick-fact:hover{

    transform:translateY(-5px);

    border-color:#2563eb;

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

}

.quick-icon{

    width:60px;

    height:60px;

    border-radius:15px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    flex-shrink:0;

}

.quick-fact h4{

    color:#ffffff;

    font-size:18px;

    margin-bottom:6px;

}

.quick-fact p{

    color:#9ca3af;

    font-size:16px;

    margin:0;

}
@media(max-width:768px){

.exercise-quick-facts{

    grid-template-columns:1fr;

}

.quick-fact{

    padding:18px;

}

.quick-icon{

    width:55px;

    height:55px;

    font-size:24px;

}

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

.muscles-worked{

    padding:120px 0;

    background:#111827;

}

/* ==========================================================
   MAIN WRAPPER
========================================================== */

.muscles-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    margin-top:70px;

}


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

.muscles-image{

    background:#1a1f2b;

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

    border-radius:28px;

    padding:15px;

    text-align:center;

    transition:.35s;

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

}


.muscles-image:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

.muscles-image img{

    width:100%;

    max-width:760px;   /* Increased from 650px */

    display:block;

    margin:auto;

    border-radius:18px;

    object-fit:contain;

}
.anatomy-caption{

    margin-top:25px;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.anatomy-caption span{

    color:#d1d5db;

    font-size:17px;

    font-weight:500;

}

.caption-primary{

    color:#ffffff !important;

    font-weight:700 !important;

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

.muscles-content{

    display:flex;

    flex-direction:column;

    gap:30px;

}

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

.muscle-card{

    background:#1a1f2b;

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

    border-radius:22px;

    padding:28px;

   transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

}

.muscle-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

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

.muscle-title{

    display:inline-block;

    background:#2563eb;

    color:#ffffff;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.muscle-card h3{

    color:#ffffff;

    font-size:30px;

    margin-bottom:18px;

}

.muscle-card p{

    color:#9ca3af;

    font-size:17px;

    line-height:1.8;

}

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

.muscle-list{

    display:grid;

    gap:14px;

    padding:0;

    margin-top:25px;

}

.muscle-list li{

 list-style:none;

    background:#111827;

    border-radius:14px;

    padding:16px 18px;

    color:#ffffff;

    font-size:17px;

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

    transition:.3s;

}


.muscle-list li:hover{

    border-color:#2563eb;

    transform:translateX(6px);

}

.muscle-list li:last-child{

    margin-bottom:0;

}

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

.activation-section{

    margin-top:80px;

    background:#1a1f2b;

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

    border-radius:25px;

    padding:45px;

}

.activation-section h3{

    color:#ffffff;

    font-size:34px;

    text-align:center;

    margin-bottom:40px;

}

/* ==========================================================
   ACTIVATION ITEM
========================================================== */

.activation-item{

    margin-bottom:30px;

}

.activation-item:last-child{

    margin-bottom:0;

}

.activation-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

}

.activation-header span{

    color:#ffffff;

    font-size:18px;

    font-weight:600;

}

/* ==========================================================
   PROGRESS BAR
========================================================== */

.activation-bar{

    width:100%;

    height:14px;

    background:#111827;

    border-radius:50px;

    overflow:hidden;

}

.activation-fill{

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

}

/* Widths */

.activation-fill.chest{

    width:100%;

}

.activation-fill.triceps{

    width:75%;

}

.activation-fill.shoulders{

    width:65%;

}

.activation-fill.serratus{

    width:40%;

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

@media(max-width:992px){

.muscles-wrapper{

    grid-template-columns:1fr;

}

.muscles-image{

    order:-1;

}

}

@media(max-width:768px){

.muscles-worked{

    padding:80px 0;

}

.muscles-wrapper{

    gap:40px;

}

.muscle-card{

    padding:25px;

}

.muscle-card h3{

    font-size:24px;

}

.muscle-card p{

    font-size:16px;

}

.activation-section{

    padding:30px 20px;

}

.activation-section h3{

    font-size:28px;

}

.activation-header span{

    font-size:16px;

}

}
/* ==========================================
   ACTIVATION ANIMATION
========================================== */

.activation-fill{

    animation:fillBar 1.4s ease forwards;

    transform-origin:left;

}

@keyframes fillBar{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

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

.exercise-benefits{

    padding:120px 0;

    background:#0f172a;

}

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

.benefits-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

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

.benefit-card{

    background:#1a1f2b;

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

    border-radius:24px;

    padding:35px 30px;

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

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

    height:100%;

}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

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

.benefit-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

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

    border:1px solid rgba(59,130,246,.18);

    transition:.35s;

}

.benefit-card:hover .benefit-icon{

    transform:translateY(-4px);

    background:#2563eb;

}

.benefit-icon img{

    width:34px;

    height:34px;

    transition:.35s;

    filter:brightness(0) invert(44%) sepia(94%) saturate(1822%)
           hue-rotate(209deg) brightness(99%) contrast(92%);

}

.benefit-card:hover .benefit-icon img{

    filter:brightness(0) invert(1);

}

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

.benefit-card h3{

    color:#ffffff;

    font-size:24px;

    margin-bottom:18px;

    line-height:1.4;

}

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

.benefit-card p{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.8;

}

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

@media(max-width:992px){

.benefits-grid{

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

}

}

@media(max-width:768px){

.exercise-benefits{

    padding:80px 0;

}

.benefits-grid{

    grid-template-columns:1fr;

    gap:25px;

    margin-top:50px;

}

.benefit-card{

    padding:30px 25px;

}

.benefit-icon{

    width:60px;

    height:60px;

    font-size:30px;

    border-radius:16px;

}

.benefit-card h3{

    font-size:22px;

}

.benefit-card p{

    font-size:15px;

}

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

.how-to-perform{

    padding:120px 0;

    background:#111827;

}

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

.steps-timeline{

    position:relative;

    max-width:900px;

    margin:70px auto 0;

}

.steps-timeline::before{

    content:"";

    position:absolute;

    left:35px;

    top:0;

    width:3px;

    height:100%;

    background:linear-gradient(
        to bottom,
        #2563eb,
        rgba(37,99,235,.15)
    );

}

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

.step-card{

    display:flex;

    gap:30px;

    position:relative;

    margin-bottom:45px;

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

}

.step-card:last-child{

    margin-bottom:0;

}

.step-card:hover{

    transform:translateY(-6px);

}

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

.step-number{

    width:70px;

    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    position:relative;

    z-index:2;

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

}

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

.step-content{

    flex:1;

    background:#1a1f2b;

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

    border-radius:22px;

    padding:28px;

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

}

.step-card:hover .step-content{

    border-color:#2563eb;

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

}

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

.step-content h3{

    color:#ffffff;

    font-size:28px;

    margin-bottom:15px;

}

.step-content p{

    color:#cbd5e1;

    font-size:17px;

    line-height:1.8;

}

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

@media(max-width:768px){

.how-to-perform{

    padding:80px 0;

}

.steps-timeline{

    margin-top:50px;

}

.steps-timeline::before{

    left:25px;

}

.step-card{

    gap:20px;

    margin-bottom:35px;

}

.step-number{

    width:50px;

    height:50px;

    font-size:18px;

}

.step-content{

    padding:22px;

}

.step-content h3{

    font-size:22px;

}

.step-content p{

    font-size:16px;

}

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

.common-mistakes{

    padding:120px 0;

    background:#0f172a;

}

/* ==========================================================
   WRAPPER
========================================================== */

.mistakes-wrapper{

    margin-top:70px;

    background:#1a1f2b;

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

    border-radius:28px;

    overflow:hidden;

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

}

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

.mistake-item{

    display:flex;

    align-items:flex-start;

    gap:25px;

    padding:30px 35px;

    border-left:4px solid transparent;

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

    transition:
    .35s ease;

}

.mistake-item:last-child{

    border-bottom:none;

}

.mistake-item:hover{

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

    border-left-color:#ef4444;

}

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

.mistake-badge{

    width:58px;

    height:58px;

    min-width:58px;

    border-radius:50%;

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

    border:2px solid rgba(239,68,68,.35);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ef4444;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.mistake-item:hover .mistake-badge{

    background:#ef4444;

    color:#ffffff;

    transform:scale(1.08);

}

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

.mistake-content{

    flex:1;

}

.mistake-content h3{

    color:#ffffff;

    font-size:24px;

    margin-bottom:10px;

}

.mistake-content p{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.8;

}

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

@media(max-width:768px){

.common-mistakes{

    padding:80px 0;

}

.mistakes-wrapper{

    margin-top:50px;

}

.mistake-item{

    padding:25px 20px;

    gap:18px;

}

.mistake-badge{

    width:48px;

    height:48px;

    min-width:48px;

    font-size:15px;

}

.mistake-content h3{

    font-size:20px;

}

.mistake-content p{

    font-size:15px;

}

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

.coach-tips{

    padding:120px 0;

    background:#111827;

}

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

.coach-card{

    margin-top:70px;

    background:#1a1f2b;

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

    border-radius:28px;

    overflow:hidden;

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

}

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

.coach-tip{

    display:flex;

    gap:25px;

    padding:30px 35px;

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

    transition:
    background .35s ease,
    transform .35s ease;

}

.coach-tip:last-child{

    border-bottom:none;

}

.coach-tip:hover{

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

}

/* ==========================================================
   STAR
========================================================== */

.tip-star{

    width:56px;

    height:56px;

    min-width:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    border:2px solid rgba(37,99,235,.25);

    color:#3b82f6;

    font-size:22px;

    transition:.35s;

}

.coach-tip:hover .tip-star{

    background:#2563eb;

    color:#ffffff;

    transform:rotate(12deg) scale(1.08);

}

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

.tip-content{

    flex:1;

}

.tip-content h3{

    color:#ffffff;

    font-size:24px;

    margin-bottom:12px;

}

.tip-content p{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.8;

}

/* ==========================================================
   COACH'S CORNER
========================================================== */

.coach-corner{

    margin-top:40px;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.10),
        rgba(59,130,246,.05)
    );

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

    border-left:5px solid #2563eb;

    border-radius:24px;

    padding:45px;

    text-align:center;

}

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

.corner-title{

    color:#60a5fa;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

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

.coach-corner blockquote{

    margin:0;

    color:#ffffff;

    font-size:28px;

    line-height:1.8;

    font-weight:600;

    font-style:italic;

}

/* ==========================================================
   AUTHOR
========================================================== */

.corner-author{

    margin-top:35px;

    color:#ffffff;

    font-size:22px;

    font-weight:700;

}

/* ==========================================================
   ROLE
========================================================== */

.corner-role{

    margin-top:10px;

    color:#60a5fa;

    font-size:15px;

    text-transform:uppercase;

    letter-spacing:2px;

}

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

@media(max-width:768px){

.coach-tips{

    padding:80px 0;

}

.coach-card{

    margin-top:50px;

}

.coach-tip{

    gap:18px;

    padding:25px 20px;

}

.tip-star{

    width:46px;

    height:46px;

    min-width:46px;

    font-size:18px;

}

.tip-content h3{

    font-size:20px;

}

.tip-content p{

    font-size:15px;

}

.coach-corner{

    padding:30px 20px;

}

.corner-title{

    font-size:20px;

}

.coach-corner blockquote{

    font-size:22px;

}

.corner-author{

    font-size:20px;

}

.corner-role{

    font-size:14px;

}

}
/* ==========================================================
   RECOMMENDED VARIATIONS
========================================================== */

.exercise-variations{

    padding:120px 0;

    background:#0f172a;

}

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

.variations-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

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

.variation-card{

    background:#1a1f2b;

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

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

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

}

.variation-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

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

.variation-image{

    overflow:hidden;

}

.variation-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.variation-card:hover .variation-image img{

    transform:scale(1.06);

}

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

.variation-card h3{

    color:#ffffff;

    font-size:28px;

    margin:22px 28px 15px;

}

.variation-card p{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.8;

    margin:0 28px 30px;

}

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

.variation-badge{

    display:inline-block;

    margin:28px 28px 0;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}

/* Beginner */

.variation-badge.beginner{

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

    color:#22c55e;

}

/* Upper Chest */

.variation-badge.upper-chest{

    background:rgba(168,85,247,.15);

    color:#a855f7;

}

/* Strength */

.variation-badge.strength{

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

    color:#3b82f6;

}

/* Home Workout */

.variation-badge.home{

    background:rgba(249,115,22,.15);

    color:#f97316;

}

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

.variation-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 28px 30px;

    padding:14px;

    border-radius:14px;

    background:#2563eb;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.variation-btn:hover{

    background:#1d4ed8;

}

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

@media(max-width:992px){

.variations-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.exercise-variations{

    padding:80px 0;

}

.variations-grid{

    margin-top:50px;

    gap:25px;

}

.variation-image img{

    height:220px;

}

.variation-card h3{

    font-size:24px;

    margin:20px 22px 12px;

}

.variation-card p{

    font-size:15px;

    margin:0 22px 25px;

}

.variation-badge{

    margin:22px 22px 0;

}

.variation-btn{

    margin:0 22px 25px;

}

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

.exercise-faq{

    padding:120px 0;

    background:#111827;

}

/* ==========================================================
   WRAPPER
========================================================== */

.faq-wrapper{

    max-width:900px;

    margin:70px auto 0;

}

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

.faq-item{

    background:#1a1f2b;

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

    border-radius:22px;

    overflow:hidden;

    margin-bottom:20px;

    transition:.35s;

}

.faq-item:hover{

    border-color:#2563eb;

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

}

.faq-item.active{

    border-color:#2563eb;

}

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

.faq-question{

    width:100%;

    background:transparent;

    border:none;

    display:flex;

    align-items:center;

    gap:25px;

    padding:28px 30px;

    cursor:pointer;

    text-align:left;

}

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

.faq-number{

    width:55px;

    height:55px;

    min-width:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    border:2px solid rgba(37,99,235,.25);

    color:#3b82f6;

    font-size:18px;

    font-weight:700;

    transition:.35s;

}

.faq-item.active .faq-number{

    background:#2563eb;

    color:#ffffff;

}

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

.faq-title{

    flex: 1;

    font-size: 1.0625rem;

    font-weight: 600;

    line-height: 1.6;

    color: var(--heading-color);

}

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

.faq-icon{

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    transition: transform .3s ease;

}

.faq-icon img{

    width: 1.25rem;

    height: 1.25rem;

    display: block;

}
.faq-item.active .faq-icon{

    transform:rotate(180deg);

}

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

.faq-answer{

    display:none;

    padding:0 30px 30px 90px;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-answer p{

    color:#cbd5e1;

    font-size:17px;

    line-height:1.8;

}
/* ==========================================
   FAQ Hover & Focus
========================================== */

.faq-item:hover{

    border-color: var(--primary-color);

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);

    transform: translateY(-2px);

}

.faq-question:hover{

    background-color: var(--surface-hover);

}

.faq-question:focus-visible{

    outline: 2px solid var(--primary-color);

    outline-offset: -2px;

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

@media(max-width:768px){

.exercise-faq{

    padding:80px 0;

}

.faq-wrapper{

    margin-top:50px;

}

.faq-question{

    gap:18px;

    padding:22px 20px;

}

.faq-number{

    width:45px;

    height:45px;

    min-width:45px;

    font-size:16px;

}

.faq-title{

    font-size:18px;

}

.faq-icon{

    font-size:24px;

}

.faq-answer{

    padding:0 20px 25px 83px;

}

.faq-answer p{

    font-size:15px;

}

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

.related-exercises{

    padding:120px 0;

    background:#0f172a;

}

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

.related-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

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

.related-card{

    background:#1a1f2b;

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

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

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

}

.related-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

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

.related-image{

    overflow:hidden;

}

.related-image img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.related-card:hover .related-image img{

    transform:scale(1.08);

}

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

.related-content{

    padding:22px;

}

.related-content h3{

    color:#ffffff;

    font-size:22px;

    margin:18px 0 12px;

}

.related-content p{

    color:#cbd5e1;

    font-size:15px;

    line-height:1.7;

    margin-bottom:22px;

}

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

.related-badge{

    display:inline-block;

    padding:7px 16px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

}

/* Compound */

.related-badge.compound{

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

    color:#3b82f6;

}

/* Isolation */

.related-badge.isolation{

    background:rgba(168,85,247,.15);

    color:#a855f7;

}

/* Bodyweight */

.related-badge.bodyweight{

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

    color:#22c55e;

}

/* Lower Chest */

.related-badge.lower-chest{

    background:rgba(249,115,22,.15);

    color:#f97316;

}

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

.related-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#60a5fa;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.related-btn:hover{

    color:#93c5fd;

    transform:translateX(6px);

}

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

@media(max-width:1200px){

.related-grid{

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

}

}

@media(max-width:768px){

.related-exercises{

    padding:80px 0;

}

.related-grid{

    grid-template-columns:1fr;

    gap:25px;

    margin-top:50px;

}

.related-image img{

    height:220px;

}

.related-content{

    padding:20px;

}

.related-content h3{

    font-size:20px;

}

.related-content p{

    font-size:15px;

}

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

.journey-cta{

    padding:120px 0;

    background:#111827;

}

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

.journey-card{

    background:linear-gradient(
        135deg,
        #1a1f2b,
        #161b26
    );

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

    border-radius:32px;

    padding:70px 50px;

    text-align:center;

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

}

.journey-card h2{

    color:#ffffff;

    font-size:46px;

    margin:30px 0 20px;

}

.journey-card>p{

    max-width:760px;

    margin:auto;

    color:#cbd5e1;

    font-size:18px;

    line-height:1.9;

}

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

.journey-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

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

.journey-item{

    background:#111827;

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

    border-radius:22px;

    padding:40px 30px;

    text-decoration:none;

    transition:.35s;

}

.journey-item:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

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

}

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

.journey-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

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

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

    font-size:36px;

    transition:.35s;

}

.journey-item:hover .journey-icon{

    background:#2563eb;

    color:#ffffff;

    transform:scale(1.08);

}

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

.journey-item h3{

    color:#ffffff;

    font-size:24px;

    margin-bottom:15px;

}

.journey-item p{

    color:#cbd5e1;

    font-size:16px;

    line-height:1.8;

}

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

@media(max-width:992px){

.journey-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.journey-cta{

    padding:80px 0;

}

.journey-card{

    padding:50px 25px;

}

.journey-card h2{

    font-size:34px;

}

.journey-card>p{

    font-size:16px;

}

.journey-grid{

    margin-top:45px;

    gap:25px;

}

.journey-item{

    padding:30px 20px;

}

.journey-icon{

    width:70px;

    height:70px;

    font-size:30px;

}

.journey-item h3{

    font-size:22px;

}

.journey-item p{

    font-size:15px;

}

}
.workout-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:25px 0;

}

.workout-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-light);

    font-size:.95rem;

    font-weight:500;

}

.workout-meta img{

    width:18px;

    height:18px;

    object-fit:contain;

    opacity:.9;

}