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

:root{
    --bg: #ffffff;
    --text: #111827;

    /* Slightly darker green for better contrast */
    --primary: #009970;

    --card: rgba(0,0,0,0.04);
    --border: rgba(0,0,0,0.08);

    --para: #64748b;

    --nav-bg: #ffffff;
}

body.dark{
    --bg: #071739;

    --text: #ffffff;

    --primary: #009970;

    --card: rgba(255,255,255,0.05);

    --border: rgba(255,255,255,0.08);

    --para: #cbd5e1;

    --nav-bg: #08152f;
}

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

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

body{
    background: var(--bg);
    color: var(--text);
    font-family: Arial, sans-serif;
    transition: 0.3s;
}

.container{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

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

.navbar{
    width: 100%;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 999;
}

.nav-container{
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.logo{
    text-decoration: none;
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
}

.logo span{
    color: var(--primary);
}

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

.nav-menu{
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-menu a{
    text-decoration: none;
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    position: relative;
}

.nav-menu a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0%;
    height: 3px;
    background: var(--primary);
    transition: 0.3s;
}

.nav-menu a:hover::after,
.nav-menu .active::after{
    width: 100%;
}

/* =========================
   RIGHT SIDE
========================= */

.nav-right{
    display: flex;
    align-items: center;
    gap: 15px;
}

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

.theme-btn{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    font-size: 22px;
}

/* =========================
   HAMBURGER
========================= */

.hamburger{
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger span{
    width: 28px;
    height: 3px;
    background: var(--text);
    border-radius: 20px;
}

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

@media(max-width: 900px){

    .hamburger{
        display: flex;
    }

    .nav-menu{
        position: absolute;
        top: 85px;
        left: -100%;
        width: 100%;
        background: var(--nav-bg);
        flex-direction: column;
        padding: 35px 0;
        transition: 0.4s;
        border-top: 1px solid var(--border);
    }

    .nav-menu.active{
        left: 0;
    }

    .logo{
        font-size: 25px;
    }

}

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

@media(max-width: 500px){

    .theme-btn{
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .logo{
        font-size: 22px;
    }

}





                    /*====================================tools-page========================================*/


/* =========================
   TOOLS PAGE
========================= */

.tools-page{
    width:100%;

    padding:80px 0 110px;

    background:
    radial-gradient(circle at top right,
    rgba(0,208,156,.08),
    transparent 30%),
    var(--bg);

    transition:.3s ease;
}

/* =========================
   PAGE TOP
========================= */

.tools-page-top{
    text-align:center;

    max-width:900px;

    margin:0 auto 80px;
}

.tools-badge{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(0,208,156,.12);

    border:1px solid rgba(0,208,156,.20);

    color:var(--primary);

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

    margin-bottom:25px;
}

.tools-page-top h1{
    font-size:72px;
    line-height:1.1;

    color:var(--text);

    margin-bottom:20px;

    font-weight:900;
}

.tools-page-top h1 span{
    color:var(--primary);
}

.tools-page-top p{
    max-width:760px;

    margin:auto;

    color:var(--para);

    font-size:20px;

    line-height:1.8;
}

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

.tools-page-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    align-items:stretch;
}

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

.tool-page-card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:26px;

    padding:35px 28px;

    position:relative;
    overflow:hidden;

    transition:.35s ease;

    display:flex;
    flex-direction:column;

    min-height:430px;
}

.tool-page-card::before{
    content:"";

    position:absolute;
    top:-70px;
    right:-70px;

    width:180px;
    height:180px;

    background:rgba(0,208,156,.08);

    border-radius:50%;
}

.tool-page-card:hover{
    transform:translateY(-10px);
    border-color:rgba(0,208,156,.35);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

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

.tool-page-icon{
    width:72px;
    height:72px;

    border-radius:18px;

    background:rgba(0,208,156,.12);

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

    font-size:32px;

    margin-bottom:28px;

    position:relative;
    z-index:2;
}

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

.tool-page-card h3{
    font-size:28px;
    color:var(--text);

    margin-bottom:18px;

    font-weight:800;

    position:relative;
    z-index:2;

    min-height:80px;
}

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

.tool-page-card p{
    color:var(--para);

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

    margin-bottom:30px;

    position:relative;
    z-index:2;

    flex-grow:1;
}

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

.tool-page-card a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    min-width:170px;
    height:52px;

    padding:0 24px;

    border-radius:14px;

    background:linear-gradient(135deg,#ef4444,#dc2626);

    border:none;

    color:#fff;

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

    white-space:nowrap;

    transition:all .3s ease;

    position:relative;
    z-index:2;

    margin-top:auto;

    box-shadow:0 10px 25px rgba(239,68,68,.30);
}

.tool-page-card a:hover{
    transform:translateY(-3px);

    background:linear-gradient(135deg,#dc2626,#b91c1c);

    color:#fff;

    box-shadow:0 15px 30px rgba(239,68,68,.40);
}

/* =========================
   DARK MODE
========================= */

body.dark .tool-page-card{
    box-shadow:none;
}

body.dark .tool-page-card a{
    background:linear-gradient(135deg,#22c55e,#16a34a);

    box-shadow:0 10px 25px rgba(34,197,94,.30);
}

body.dark .tool-page-card a:hover{
    background:linear-gradient(135deg,#16a34a,#15803d);

    box-shadow:0 15px 30px rgba(34,197,94,.40);
}

/* =========================
   LAPTOP
========================= */

@media(max-width:1200px){

    .tools-page-top h1{
        font-size:58px;
    }

    .tools-page-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

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

@media(max-width:900px){

    .tools-page{
        padding:140px 0 90px;
    }

    .tools-page-top h1{
        font-size:48px;
    }

    .tools-page-top p{
        font-size:18px;
    }

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

    .tool-page-card{
        min-height:400px;
    }

}

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

@media(max-width:600px){

    .tools-page{
        padding:120px 0 70px;
    }

    .tools-page-top{
        margin-bottom:50px;
    }

    .tools-page-top h1{
        font-size:36px;
    }

    .tools-page-top p{
        font-size:15px;
    }

    .tools-page-grid{
        grid-template-columns:1fr;
    }

    .tool-page-card{
        min-height:auto;
        padding:28px 22px;
    }

    .tool-page-card h3{
        font-size:24px;
        min-height:auto;
    }

    .tool-page-card p{
        font-size:14px;
    }

    .tool-page-card a{
        width:100%;
        min-width:100%;
    }

}

            /*======================================================workouts-page============================================*/

.workouts-page{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top left, rgba(0,208,156,0.08), transparent 30%),
    var(--bg);

    transition: 0.3s ease;
}

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

.workouts-top{
    text-align: center;
    margin-bottom: 75px;
}

.workout-badge{
    display: inline-block;

    padding: 10px 22px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);
    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 25px;
}

.workouts-top h1{
    font-size: 68px;
    color: var(--text);

    margin-bottom: 20px;
    font-weight: 900;
}

.workouts-top h1 span{
    color: var(--primary);
}

.workouts-top p{
    max-width: 760px;
    margin: auto;

    color: var(--para);

    font-size: 18px;
    line-height: 1.8;
}

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

.workout-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

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

.workout-card{
    background: var(--card);

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

    overflow: hidden;

    transition: 0.35s ease;
}

.workout-card:hover{
    transform: translateY(-10px);
    border-color: rgba(0,208,156,0.35);
}

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

.workout-image{
    overflow: hidden;
}

.workout-image img{
    width: 100%;
    height: 250px;

    object-fit: cover;

    transition: 0.4s ease;
}

.workout-card:hover .workout-image img{
    transform: scale(1.08);
}

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

.workout-content{
    padding: 28px;
}

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

.workout-level{
    display: inline-block;

    padding: 8px 18px;
    border-radius: 30px;

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

    margin-bottom: 22px;
}

.beginner{
    background: rgba(0,208,156,0.12);
    color: #009970;
}

.intermediate{
    background: rgba(255,193,7,0.12);
    color: #ffc107;
}

.advanced{
    background: rgba(255,82,82,0.12);
    color: #ff5252;
}

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

.workout-content h3{
    font-size: 30px;
    color: var(--text);

    margin-bottom: 18px;

    font-weight: 800;

    line-height: 1.4;
}

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

.workout-content p{
    color: var(--para);

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

    margin-bottom: 24px;
}

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

.workout-info{
    display: flex;
    gap: 20px;

    margin-bottom: 28px;

    color: var(--para);

    font-size: 15px;
    font-weight: 600;
}

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

.workout-content a{
    display: inline-block;

    text-decoration: none;

    padding: 15px 24px;
    border-radius: 14px;

    background: var(--primary);
    color: white;

    font-weight: 700;

    transition: 0.3s ease;
}

.workout-content a:hover{
    transform: translateY(-4px);
}

/* =========================
   LAPTOP
========================= */

@media(max-width: 1200px){

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

}

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

@media(max-width: 900px){

    .workouts-page{
        padding: 85px 0;
    }

    .workouts-top h1{
        font-size: 50px;
    }

}

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

@media(max-width: 700px){

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

    .workouts-top{
        margin-bottom: 60px;
    }

    .workouts-top h1{
        font-size: 38px;
    }

    .workouts-top p{
        font-size: 15px;
    }

    .workout-content{
        padding: 24px;
    }

    .workout-content h3{
        font-size: 24px;
    }

    .workout-content p{
        font-size: 14px;
    }

    .workout-content a{
        width: 100%;
        text-align: center;
    }

}

                /*===============================Blog page=================================*/

.modern-blog-page{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top right, rgba(0,208,156,0.08), transparent 30%),
    var(--bg);

    transition: 0.3s ease;
}

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

.modern-blog-top{
    text-align: center;
    margin-bottom: 75px;
}

.modern-blog-badge{
    display: inline-block;

    padding: 10px 22px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);
    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 25px;
}

.modern-blog-top h1{
    font-size: 68px;
    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.modern-blog-top h1 span{
    color: var(--primary);
}

.modern-blog-top p{
    max-width: 760px;
    margin: auto;

    color: var(--para);

    font-size: 18px;
    line-height: 1.8;
}

/* =========================
   FEATURED ARTICLE
========================= */

.featured-article{
    display: grid;
    grid-template-columns: 1.2fr 1fr;

    gap: 40px;

    margin-bottom: 70px;

    background: var(--card);

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

    overflow: hidden;
}

.featured-article-image img{
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.featured-article-content{
    padding: 45px;
}

.featured-label{
    display: inline-block;

    padding: 9px 18px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);

    color: var(--primary);

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

    margin-bottom: 22px;
}

.featured-article-content h2{
    font-size: 42px;
    line-height: 1.3;

    color: var(--text);

    margin-bottom: 22px;

    font-weight: 900;
}

.featured-article-content p{
    color: var(--para);

    line-height: 1.9;

    font-size: 16px;

    margin-bottom: 28px;
}

.featured-meta{
    display: flex;
    gap: 20px;

    margin-bottom: 30px;

    color: var(--para);

    font-size: 14px;
    font-weight: 600;
}

.featured-article-content a{
    display: inline-block;

    text-decoration: none;

    padding: 16px 28px;
    border-radius: 14px;

    background: var(--primary);
    color: white;

    font-weight: 700;

    transition: 0.3s ease;
}

.featured-article-content a:hover{
    transform: translateY(-4px);
}

/* =========================
   FILTERS
========================= */

.blog-filters{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 16px;

    margin-bottom: 60px;
}

.blog-filters button{
    padding: 14px 24px;

    border-radius: 30px;

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

    background: var(--card);

    color: var(--text);

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

    cursor: pointer;

    transition: 0.3s ease;
}

.blog-filters button.active,
.blog-filters button:hover{
    background: var(--primary);
    color: white;
}

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

.modern-blog-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 32px;
}

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

.modern-blog-card{
    background: var(--card);

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

    overflow: hidden;

    transition: 0.35s ease;
}

.modern-blog-card:hover{
    transform: translateY(-10px);
    border-color: rgba(0,208,156,0.35);
}

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

.modern-blog-image{
    overflow: hidden;
}

.modern-blog-image img{
    width: 100%;
    height: 240px;

    object-fit: cover;

    transition: 0.4s ease;
}

.modern-blog-card:hover .modern-blog-image img{
    transform: scale(1.08);
}

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

.modern-blog-content{
    padding: 28px;
}

.modern-blog-category{
    display: inline-block;

    padding: 8px 18px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);
    color: var(--primary);

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

    margin-bottom: 20px;
}

.modern-blog-content h3{
    font-size: 28px;
    line-height: 1.4;

    color: var(--text);

    margin-bottom: 18px;

    font-weight: 800;
}

.modern-blog-content p{
    color: var(--para);

    line-height: 1.8;

    font-size: 16px;

    margin-bottom: 24px;
}

.modern-blog-meta{
    display: flex;
    gap: 18px;

    margin-bottom: 24px;

    color: var(--para);

    font-size: 14px;
    font-weight: 600;
}

.modern-blog-content a{
    text-decoration: none;

    color: var(--primary);

    font-weight: 700;

    transition: 0.3s ease;
}

.modern-blog-content a:hover{
    letter-spacing: 1px;
}

/* =========================
   LAPTOP
========================= */

@media(max-width: 1200px){

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

}

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

@media(max-width: 950px){

    .modern-blog-page{
        padding: 85px 0;
    }

    .featured-article{
        grid-template-columns: 1fr;
    }

    .featured-article-content h2{
        font-size: 34px;
    }

    .modern-blog-top h1{
        font-size: 50px;
    }

}

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

@media(max-width: 700px){

    .modern-blog-grid{
        grid-template-columns: 1fr;
    }

    .modern-blog-top{
        margin-bottom: 60px;
    }

    .modern-blog-top h1{
        font-size: 38px;
    }

    .modern-blog-top p{
        font-size: 15px;
    }

    .featured-article-content{
        padding: 28px 24px;
    }

    .featured-article-content h2{
        font-size: 28px;
    }

    .featured-article-content p{
        font-size: 14px;
    }

    .modern-blog-content{
        padding: 24px;
    }

    .modern-blog-content h3{
        font-size: 24px;
    }

    .modern-blog-content p{
        font-size: 14px;
    }

    .blog-filters{
        gap: 12px;
    }

    .blog-filters button{
        width: 100%;
    }

}

                /*======================================about page=================================*/

.modern-about-page{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top left, rgba(0,208,156,0.08), transparent 30%),
    var(--bg);

    transition: 0.3s ease;
}

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

.about-page-top{
    text-align: center;
    margin-bottom: 80px;
}

.about-page-badge{
    display: inline-block;

    padding: 10px 22px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);
    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 25px;
}

.about-page-top h1{
    font-size: 56px;
    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.about-page-top h1 span{
    color: var(--primary);
}

.about-page-top p{
    max-width: 760px;
    margin: auto;

    color: var(--para);

    font-size: 18px;
    line-height: 1.8;
}

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

.about-page-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 32px;

    margin-bottom: 80px;
}

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

.about-page-card{
    background: var(--card);

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

    padding: 40px;

    transition: 0.35s ease;

    position: relative;
    overflow: hidden;
}

.about-page-card::before{
    content: "";

    position: absolute;
    top: -70px;
    right: -70px;

    width: 180px;
    height: 180px;

    background: rgba(0,208,156,0.08);

    border-radius: 50%;
}

.about-page-card:hover{
    transform: translateY(-10px);
    border-color: rgba(0,208,156,0.35);
}

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

.about-icon{
    width: 75px;
    height: 75px;

    border-radius: 20px;

    background: rgba(0,208,156,0.12);

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

    font-size: 34px;

    margin-bottom: 28px;

    position: relative;
    z-index: 2;
}

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

.about-page-card h2{
    font-size: 34px;
    color: var(--text);

    margin-bottom: 20px;

    font-weight: 800;

    position: relative;
    z-index: 2;
}

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

.about-page-card p{
    color: var(--para);

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

    position: relative;
    z-index: 2;
}

/* =========================
   HIGHLIGHT
========================= */

.about-highlight{
    background: var(--card);

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

    padding: 55px;

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

.highlight-content{
    flex: 1;
}

.highlight-badge{
    display: inline-block;

    padding: 9px 18px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);
    color: var(--primary);

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

    margin-bottom: 22px;
}

.highlight-content h2{
    font-size: 48px;
    line-height: 1.3;

    color: var(--text);

    margin-bottom: 22px;

    font-weight: 900;
}

.highlight-content p{
    color: var(--para);

    line-height: 1.9;
    font-size: 16px;
}

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

.highlight-stats{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.highlight-box{
    min-width: 160px;

    background: rgba(0,208,156,0.08);

    border: 1px solid rgba(0,208,156,0.12);
    border-radius: 24px;

    padding: 28px;

    text-align: center;
}

.highlight-box h3{
    font-size: 42px;
    color: var(--primary);

    margin-bottom: 10px;

    font-weight: 900;
}

.highlight-box p{
    color: var(--text);

    font-size: 15px;
    font-weight: 600;
}

/* =========================
   LAPTOP
========================= */

@media(max-width: 1200px){

    .highlight-content h2{
        font-size: 40px;
    }

}

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

@media(max-width: 950px){

    .modern-about-page{
        padding: 85px 0;
    }

    .about-page-top h1{
        font-size: 50px;
    }

    .about-page-grid{
        grid-template-columns: 1fr;
    }

    .about-highlight{
        flex-direction: column;
        align-items: flex-start;
    }

}

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

@media(max-width: 700px){

    .about-page-top{
        margin-bottom: 60px;
    }

    .about-page-top h1{
        font-size: 38px;
    }

    .about-page-top p{
        font-size: 15px;
    }

    .about-page-card{
        padding: 28px 24px;
    }

    .about-page-card h2{
        font-size: 28px;
    }

    .about-page-card p{
        font-size: 14px;
    }

    .about-highlight{
        padding: 30px 24px;
    }

    .highlight-content h2{
        font-size: 30px;
    }

    .highlight-content p{
        font-size: 14px;
    }

    .highlight-stats{
        width: 100%;
    }

    .highlight-box{
        width: 100%;
    }

}

        /*==============================================contact-page=================================*/

.contact-page{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top right, rgba(0,208,156,0.08), transparent 30%),
    var(--bg);

    transition: 0.3s ease;
}

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

.contact-top{
    text-align: center;
    margin-bottom: 80px;
}

.contact-badge{
    display: inline-block;

    padding: 10px 22px;
    border-radius: 30px;

    background: rgba(0,208,156,0.12);
    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 25px;
}

.contact-top h1{
    font-size: 72px;
    color: var(--text);

    margin-bottom: 22px;

    font-weight: 900;
}

.contact-top h1 span{
    color: var(--primary);
}

.contact-top p{
    max-width: 760px;
    margin: auto;

    color: var(--para);

    font-size: 18px;
    line-height: 1.8;
}

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

.contact-wrapper{
    display: grid;
    grid-template-columns: 1fr 1.2fr;

    gap: 40px;
}

/* =========================
   INFO SIDE
========================= */

.contact-info{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.contact-card{
    display: flex;
    align-items: center;

    gap: 20px;

    background: var(--card);

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

    padding: 28px;

    transition: 0.35s ease;
}

.contact-card:hover{
    transform: translateY(-6px);
    border-color: rgba(0,208,156,0.35);
}

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

.contact-icon{
    width: 70px;
    height: 70px;

    border-radius: 18px;

    background: rgba(0,208,156,0.12);

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

    font-size: 30px;
}

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

.contact-card h3{
    font-size: 24px;
    color: var(--text);

    margin-bottom: 8px;

    font-weight: 800;
}

.contact-card p{
    color: var(--para);

    font-size: 15px;
    line-height: 1.7;
}

/* =========================
   HIGHLIGHT BOX
========================= */

.contact-highlight{
    background: var(--primary);

    border-radius: 32px;

    padding: 40px;

    color: white;

    margin-top: 10px;
}

.contact-highlight h2{
    font-size: 38px;

    margin-bottom: 20px;

    line-height: 1.3;

    font-weight: 900;
}

.contact-highlight p{
    line-height: 1.9;
    font-size: 16px;
}

/* =========================
   FORM BOX
========================= */

.contact-form-box{
    background: var(--card);

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

    padding: 40px;
}

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

.contact-form{
    display: flex;
    flex-direction: column;

    gap: 24px;
}

.input-group input,
.input-group textarea{
    width: 100%;

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

    border-radius: 18px;

    padding: 18px 20px;

    color: var(--text);

    font-size: 16px;

    outline: none;

    transition: 0.3s ease;
}

.input-group textarea{
    height: 180px;
    resize: none;
}

.input-group input:focus,
.input-group textarea:focus{
    border-color: var(--primary);
}

/* =========================
   PLACEHOLDER
========================= */

.input-group input::placeholder,
.input-group textarea::placeholder{
    color: var(--para);
}

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

.contact-form button{
    height: 60px;

    border: none;
    border-radius: 18px;

    background: var(--primary);
    color: white;

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

    cursor: pointer;

    transition: 0.3s ease;
}

.contact-form button:hover{
    transform: translateY(-4px);
}

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

@media(max-width: 950px){

    .contact-page{
        padding: 85px 0;
    }

    .contact-top h1{
        font-size: 54px;
    }

    .contact-wrapper{
        grid-template-columns: 1fr;
    }

}

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

@media(max-width: 700px){

    .contact-top{
        margin-bottom: 60px;
    }

    .contact-top h1{
        font-size: 40px;
    }

    .contact-top p{
        font-size: 15px;
    }

    .contact-card{
        padding: 22px;
    }

    .contact-card h3{
        font-size: 20px;
    }

    .contact-form-box{
        padding: 28px 22px;
    }

    .contact-highlight{
        padding: 28px 24px;
    }

    .contact-highlight h2{
        font-size: 28px;
    }

    .contact-highlight p{
        font-size: 14px;
    }

    .input-group input,
    .input-group textarea{
        font-size: 15px;
    }

}

                /*========================================BMI-CALCULATOR==========================================*/

/* =========================
BMI PAGE
========================= */

.body-bmi{
    background:var(--bg);
    padding:20px;
    transition:.3s ease;
}

.container-bmi{
    max-width:1400px;
    margin:auto;
    background:var(--card);
    border-radius:30px;
    padding:30px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.card-bmi{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:25px;
    padding:30px;
}

.card-bmi h1{
    font-size:72px;
    color:var(--text);
    margin-bottom:15px;
    line-height:1.1;
}

.desc-bmi{
    color:var(--text-light);
    font-size:20px;
    line-height:1.6;
    margin-bottom:30px;
}

.card-bmi label{
    display:block;
    font-size:30px;
    font-weight:700;
    margin:25px 0 10px;
    color:var(--text);
}

.card-bmi input[type="number"]{
    width:100%;
    padding:18px;
    border:2px solid var(--border);
    border-radius:16px;
    font-size:28px;
    background:var(--bg);
    color:var(--text);
    outline:none;
    transition:.3s ease;
}

.card-bmi input[type="number"]:focus{
    border-color:#3b82f6;
}

.card-bmi input[type="range"]{
    width:100%;
    margin:20px 0;
    accent-color:#3b82f6;
}

.card-bmi button{
    width:100%;
    padding:18px;
    border:none;
    border-radius:16px;
    background:linear-gradient(90deg,#3b82f6,#4f46e5);
    color:#fff;
    font-size:28px;
    font-weight:700;
    cursor:pointer;
    margin-top:10px;
    transition:.3s ease;
}

.card-bmi button:hover{
    transform:translateY(-2px);
}

.result-bmi{
    text-align:center;
}

#bmi{
    font-size:110px;
    font-weight:800;
    color:var(--text);
}

#status{
    font-size:44px;
    font-weight:700;
    margin-bottom:20px;
    color:var(--text);
}

.result-bmi svg{
    width:100%;
    max-width:650px;
}

#needle{
    transform-origin:300px 300px;
    transition:.5s ease;
}

.legend-bmi{
    margin-top:15px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:16px;
    text-align:left;
    line-height:2;
    color:var(--text);
    background:var(--bg);
}

.legend-bmi span{
    color:var(--text);
}

.gender-box{
    display:flex;
    gap:15px;
    margin-top:10px;
}

.gender-option{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:15px;
    border:2px solid #dbeafe;
    border-radius:15px;
    cursor:pointer;
    font-size:18px;
    font-weight:600;
    background:#fff;
}

.gender-option input{
    width:auto;
}

/* =========================
DARK MODE SUPPORT
========================= */

body.dark .container-bmi,
body.dark .card-bmi{
    box-shadow:none;
}

body.dark .legend-bmi{
    background:rgba(255,255,255,.03);
}

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

@media(max-width:1200px){

    .card-bmi h1{
        font-size:58px;
    }

    #bmi{
        font-size:90px;
    }
}

@media(max-width:900px){

    .container-bmi{
        grid-template-columns:1fr;
    }

    .card-bmi h1{
        font-size:48px;
    }

    .desc-bmi{
        font-size:18px;
    }

    .card-bmi label{
        font-size:24px;
    }

    .card-bmi input[type="number"]{
        font-size:22px;
    }

    .card-bmi button{
        font-size:22px;
    }

    #bmi{
        font-size:80px;
    }

    #status{
        font-size:34px;
    }
}

@media(max-width:600px){

    .body-bmi{
        padding:10px;
    }

    .container-bmi{
        padding:20px;
        border-radius:20px;
    }

    .card-bmi{
        padding:20px;
    }

    .card-bmi h1{
        font-size:36px;
    }

    .desc-bmi{
        font-size:16px;
    }

    .card-bmi label{
        font-size:20px;
    }

    .card-bmi input[type="number"]{
        padding:14px;
        font-size:18px;
    }

    .card-bmi button{
        padding:14px;
        font-size:18px;
    }

    #bmi{
        font-size:60px;
    }

    #status{
        font-size:26px;
    }
}

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

.breadcrumb{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.breadcrumb a,
.breadcrumb p{
    color: var(--text);
    font-size: 15px;
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb span{
    color: var(--para);
}




/* =====================================================
BMI BLOG SECTION
===================================================== */

.bmi-blog-section{
    width: 100%;
    padding-top: 20px;
    padding-bottom: 110px;
    background: var(--bg);
    margin-top: -20px;
}

/* TOP */

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

.bmi-blog-badge{
    display: inline-block;
    padding: 10px 24px;
    border-radius: 40px;
    background: rgba(0,208,156,0.12);
    border: 1px solid rgba(0,208,156,0.2);
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 24px;
}

.bmi-blog-top h2{
    font-size: 64px;
    color: var(--text);
    margin-bottom: 22px;
    font-weight: 900;
}

.bmi-blog-top h2 span{
    color: var(--primary);
}

.bmi-blog-top p{
    max-width: 850px;
    margin: auto;
    color: var(--para);
    line-height: 1.8;
}

/* GRID */

.bmi-blog-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 28px;
    margin-bottom: 70px;
}

/* CARD */

.bmi-blog-card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 28px;
    padding: 35px;
    transition: 0.3s ease;
}

.bmi-blog-card:hover{
    transform: translateY(-5px);
}

.bmi-blog-card h3{
    color: var(--text);
    font-size: 30px;
    margin-bottom: 18px;
    font-weight: 800;
}

.bmi-blog-card p{
    color: var(--para);
    line-height: 1.9;
}

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

.bmi-faq{
    width: 100%;
    max-width: 1000px;
    margin: 90px auto 0;
}

.bmi-faq h2{
    text-align: center;
    color: var(--text);
    font-size: 52px;
    font-weight: 900;
    margin-bottom: 50px;
}

.faq-box{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 30px 35px;
    margin-bottom: 24px;
    transition: 0.3s ease;
}

.faq-box:hover{
    transform: translateY(-3px);
    border-color: rgba(0,208,156,0.3);
}

.faq-box h4{
    color: var(--text);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.4;
}

.faq-box p{
    color: var(--para);
    font-size: 17px;
    line-height: 1.9;
}

/* =====================================================
RELATED TOOLS
===================================================== */

.related-tools{
    margin-top: 70px;
}

.related-tools h2{
    text-align: center;
    color: var(--text);
    font-size: 48px;
    margin-bottom: 40px;
    font-weight: 900;
}

.related-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px;
}

.related-card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    transition: 0.3s ease;
}

.related-card:hover{
    transform: translateY(-5px);
    border-color: var(--primary);
    color: var(--primary);
}

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

@media(max-width:1000px){

    .bmi-wrapper{
        grid-template-columns: 1fr;
    }

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

}

@media(max-width:900px){

    .bmi-blog-grid{
        grid-template-columns: 1fr;
    }

    .bmi-info-grid{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .bmi-header h1{
        font-size: 42px;
    }

    .bmi-blog-top h2{
        font-size: 40px;
    }

    .bmi-faq h2,
    .related-tools h2{
        font-size: 34px;
    }

    .faq-box{
        padding: 24px;
    }

    .faq-box h4{
        font-size: 22px;
    }

    .faq-box p{
        font-size: 15px;
    }

    .bmi-form,
    .bmi-result,
    .bmi-blog-card{
        padding: 24px;
    }

    .bmi-blog-card h3{
        font-size: 24px;
    }

    .bmi-meter{
        width: 230px;
        height: 115px;
    }

    .meter-needle{
        height: 90px;
    }

    .meter-value h3{
        font-size: 42px;
    }

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

}

@media(max-width:600px){

    .height-wrapper{
        flex-direction: column;
    }

    #heightUnit{
        width: 100%;
    }

}

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

.calorie-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top left,
    rgba(0,208,156,0.08),
    transparent 30%),
    var(--bg);
}

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

.calorie-top{
    text-align: center;
    margin-bottom: 60px;
}

.calorie-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(0,208,156,0.12);

    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.calorie-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.calorie-top h1 span{
    color: var(--primary);
}

.calorie-top p{
    max-width: 700px;
    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.calorie-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   FORM & RESULT
========================= */

.calorie-form,
.calorie-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.calorie-form h2,
.calorie-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   GENDER
========================= */

.gender-box{
    display: flex;

    gap: 16px;

    margin-bottom: 28px;
}

.gender-btn{
    flex: 1;

    height: 58px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

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

    cursor: pointer;

    transition: 0.3s ease;
}

.gender-btn.active{
    background: var(--primary);

    color: white;
}

/* =========================
   INPUTS
========================= */

.input-box{
    margin-bottom: 24px;
}

.input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.input-box select{
    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.calorie-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

/* =========================
   MAIN RESULT
========================= */

.main-calorie{
    text-align: center;

    margin-bottom: 40px;
}

.main-calorie h3{
    font-size: 90px;

    color: var(--primary);

    line-height: 1;

    font-weight: 900;

    margin-bottom: 10px;
}

.main-calorie p{
    color: var(--text);

    font-size: 24px;
    font-weight: 700;
}

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

.calorie-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

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

.calorie-card{
    border-radius: 26px;

    padding: 28px;

    text-align: center;

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

    transition: 0.3s ease;
}

.calorie-card:hover{
    transform: translateY(-6px);
}

/* COLORS */

.loss{
    background:
    rgba(255,87,34,0.08);
}

.maintain{
    background:
    rgba(0,208,156,0.08);
}

.gain{
    background:
    rgba(255,193,7,0.08);
}

/* ICON */

.card-icon{
    font-size: 34px;

    margin-bottom: 18px;
}

/* TEXT */

.calorie-card h4{
    color: var(--text);

    margin-bottom: 14px;

    font-size: 22px;
}

.calorie-card span{
    display: block;

    color: var(--primary);

    font-size: 40px;
    font-weight: 900;

    margin-bottom: 10px;
}

.calorie-card p{
    color: var(--para);
}

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

.calorie-info{
    background:
    rgba(0,208,156,0.08);

    border:
    1px solid rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;
}

.calorie-info h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.calorie-info p{
    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .calorie-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .calorie-top h1{
        font-size: 42px;
    }

    .main-calorie h3{
        font-size: 60px;
    }

    .main-calorie p{
        font-size: 20px;
    }

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

}
/* =========================
   CALORIE BLOG SECTION
========================= */

.calorie-blog-section{
    width: 100%;

    padding-top: 0px;
    padding-bottom: 110px;

    background: var(--bg);

    margin-top: -20px;
}

/* TOP */

.calorie-blog-top{
    text-align: center;

    margin-bottom: 70px;
}

.calorie-blog-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background:
    rgba(0,208,156,0.12);

    border:
    1px solid
    rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.calorie-blog-top h2{
    font-size: 64px;

    color: var(--text);

    margin-bottom: 22px;

    font-weight: 900;
}

.calorie-blog-top h2 span{
    color: var(--primary);
}

.calorie-blog-top p{
    max-width: 850px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

/* GRID */

.calorie-blog-grid{
    display: grid;

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

    gap: 28px;

    margin-bottom: 70px;
}

/* CARD */

.calorie-blog-card{

    background: var(--card);

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

    border-radius: 28px;

    padding: 35px;

    transition: 0.3s ease;
}

.calorie-blog-card:hover{
    transform: translateY(-5px);
}

.calorie-blog-card h3{
    color: var(--text);

    font-size: 30px;

    margin-bottom: 18px;

    font-weight: 800;
}

.calorie-blog-card p{
    color: var(--para);

    line-height: 1.9;
}

/* FAQ */

.calorie-faq{
    max-width: 1000px;

    margin: auto;
}

.calorie-faq h2{
    text-align: center;

    color: var(--text);

    font-size: 48px;

    margin-bottom: 40px;

    font-weight: 900;
}

.calorie-faq-box{

    background: var(--card);

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

    border-radius: 22px;

    padding: 28px;

    margin-bottom: 22px;
}

.calorie-faq-box h4{
    color: var(--text);

    font-size: 24px;

    margin-bottom: 12px;

    font-weight: 800;
}

.calorie-faq-box p{
    color: var(--para);

    line-height: 1.8;
}

/* RESPONSIVE */

@media(max-width:900px){

    .calorie-blog-grid{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .calorie-blog-top h2{
        font-size: 40px;
    }

    .calorie-faq h2{
        font-size: 34px;
    }

    .calorie-blog-card{
        padding: 24px;
    }

    .calorie-blog-card h3{
        font-size: 24px;
    }

}

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

.water-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top right,
    rgba(0,208,156,0.08),
    transparent 30%),
    var(--bg);
}

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

.water-top{
    text-align: center;

    margin-bottom: 60px;
}

.water-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(0,208,156,0.12);

    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.water-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.water-top h1 span{
    color: var(--primary);
}

.water-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.water-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   FORM + RESULT
========================= */

.water-form,
.water-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.water-form h2,
.water-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.input-box{
    margin-bottom: 24px;
}

.input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.input-box select{
    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.water-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

/* =========================
   MAIN RESULT
========================= */

.water-main-result{
    display: flex;

    justify-content: center;

    margin-bottom: 40px;
}

/* WATER CIRCLE */

.water-circle{
    width: 260px;
    height: 260px;

    border-radius: 50%;

    position: relative;

    overflow: hidden;

    border: 10px solid rgba(0,208,156,0.15);

    background: rgba(0,208,156,0.08);
}

/* WAVE */

.water-wave{
    position: absolute;

    width: 200%;
    height: 200%;

    background:
    rgba(0,208,156,0.45);

    top: 60%;

    left: -50%;

    border-radius: 40%;

    animation: wave 6s linear infinite;
}

@keyframes wave{

    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(360deg);
    }

}

/* CONTENT */

.water-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

    z-index: 10;
}

.water-content h3{
    font-size: 58px;

    color: var(--text);

    font-weight: 900;
}

.water-content p{
    color: var(--text);

    font-size: 18px;
}

/* =========================
   GLASSES
========================= */

.water-glasses{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.glass-card{
    background:
    rgba(255,255,255,0.03);

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

    border-radius: 24px;

    padding: 28px;

    text-align: center;
}

.glass-card span{
    font-size: 34px;

    display: block;

    margin-bottom: 15px;
}

.glass-card h4{
    color: var(--primary);

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

    margin-bottom: 8px;
}

.glass-card p{
    color: var(--para);
}

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

.water-info{
    background:
    rgba(0,208,156,0.08);

    border:
    1px solid rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;
}

.water-info h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.water-info p{
    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .water-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .water-top h1{
        font-size: 42px;
    }

    .water-circle{
        width: 220px;
        height: 220px;
    }

    .water-content h3{
        font-size: 46px;
    }

    .water-glasses{
        grid-template-columns: 1fr;
    }

}

                                                /* =========================
                                                   BODY FAT SECTION
                                                ========================= */

.bodyfat-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top left,
    rgba(0,208,156,0.08),
    transparent 30%),
    var(--bg);
}

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

.bodyfat-top{
    text-align: center;

    margin-bottom: 60px;
}

.bodyfat-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(0,208,156,0.12);

    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.bodyfat-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.bodyfat-top h1 span{
    color: var(--primary);
}

.bodyfat-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.bodyfat-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.bodyfat-form,
.bodyfat-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.bodyfat-form h2,
.bodyfat-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   GENDER
========================= */

.bf-gender-box{
    display: flex;

    gap: 16px;

    margin-bottom: 28px;
}

.bf-gender-btn{
    flex: 1;

    height: 58px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

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

    cursor: pointer;

    transition: 0.3s ease;
}

.bf-gender-btn.active{
    background: var(--primary);

    color: white;
}

/* =========================
   INPUTS
========================= */

.bf-input-box{
    margin-bottom: 24px;
}

.bf-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.bf-input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.bf-input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.bf-input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

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

.bodyfat-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

/* =========================
   CIRCLE
========================= */

.bf-circle-wrapper{
    display: flex;

    justify-content: center;

    margin-bottom: 40px;
}

.bf-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.bf-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.bf-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.bf-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#bfProgress{
    stroke: var(--primary);

    stroke-dasharray: 628;

    stroke-dashoffset: 628;

    transition: 1s ease;
}

/* CONTENT */

.bf-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.bf-content h3{
    font-size: 60px;

    color: var(--primary);

    font-weight: 900;
}

.bf-content p{
    color: var(--text);

    font-size: 22px;
    font-weight: 700;
}

/* =========================
   RESULT
========================= */

.bf-result-box{
    background:
    rgba(0,208,156,0.08);

    border:
    1px solid rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 35px;
}

.bf-result-box h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.bf-result-box p{
    color: var(--para);

    line-height: 1.8;
}

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

.bf-grid{
    display: grid;

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

    gap: 18px;
}

.bf-card{
    background:
    rgba(255,255,255,0.03);

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

    border-radius: 22px;

    padding: 22px;

    text-align: center;
}

.bf-card h5{
    color: var(--para);

    margin-bottom: 10px;
}

.bf-card span{
    color: var(--text);

    font-size: 18px;
    font-weight: 800;
}

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

@media(max-width:1000px){

    .bodyfat-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .bodyfat-top h1{
        font-size: 42px;
    }

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

    .bf-circle{
        width: 220px;
        height: 220px;
    }

    .bf-circle svg{
        width: 220px;
        height: 220px;
    }

    .bf-content h3{
        font-size: 46px;
    }

}

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

.protein-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top right,
    rgba(0,208,156,0.08),
    transparent 30%),
    var(--bg);
}

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

.protein-top{
    text-align: center;
    margin-bottom: 60px;
}

.protein-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(0,208,156,0.12);

    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.protein-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.protein-top h1 span{
    color: var(--primary);
}

.protein-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.protein-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.protein-form,
.protein-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.protein-form h2,
.protein-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.protein-input-box{
    margin-bottom: 24px;
}

.protein-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.protein-input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.protein-input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.protein-input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.protein-input-box select{
    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.protein-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

/* =========================
   CIRCLE
========================= */

.protein-main{
    display: flex;

    justify-content: center;

    margin-bottom: 40px;
}

.protein-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.protein-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.protein-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.protein-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#proteinProgress{
    stroke: var(--primary);

    stroke-dasharray: 628;

    stroke-dashoffset: 628;

    transition: 1s ease;
}

/* CONTENT */

.protein-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.protein-content h3{
    font-size: 56px;

    color: var(--primary);

    font-weight: 900;
}

.protein-content p{
    color: var(--text);

    font-size: 20px;
    font-weight: 700;
}

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

.protein-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.protein-card{
    background:
    rgba(255,255,255,0.03);

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

    border-radius: 22px;

    padding: 22px;

    text-align: center;
}

.protein-card span{
    font-size: 32px;

    display: block;

    margin-bottom: 14px;
}

.protein-card h4{
    color: var(--primary);

    font-size: 24px;
    font-weight: 900;

    margin-bottom: 8px;
}

.protein-card p{
    color: var(--para);
}

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

.protein-info{
    background:
    rgba(0,208,156,0.08);

    border:
    1px solid rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.protein-info h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.protein-info p{
    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.protein-note{
    background:
    rgba(255,193,7,0.08);

    border:
    1px solid rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.protein-note h4{
    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.protein-note p{
    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .protein-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .protein-top h1{
        font-size: 42px;
    }

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

    .protein-circle{
        width: 220px;
        height: 220px;
    }

    .protein-circle svg{
        width: 220px;
        height: 220px;
    }

    .protein-content h3{
        font-size: 42px;
    }

}

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

.bmr-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top left,
    rgba(0,208,156,0.08),
    transparent 30%),
    var(--bg);
}

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

.bmr-top{
    text-align: center;
    margin-bottom: 60px;
}

.bmr-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(0,208,156,0.12);

    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.bmr-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.bmr-top h1 span{
    color: var(--primary);
}

.bmr-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.bmr-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.bmr-form,
.bmr-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.bmr-form h2,
.bmr-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   GENDER
========================= */

.bmr-gender-box{
    display: flex;
    gap: 16px;

    margin-bottom: 28px;
}

.bmr-gender-btn{
    flex: 1;

    height: 58px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

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

    cursor: pointer;

    transition: 0.3s ease;
}

.bmr-gender-btn.active{
    background: var(--primary);
    color: white;
}

/* =========================
   INPUTS
========================= */

.bmr-input-box{
    margin-bottom: 24px;
}

.bmr-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.bmr-input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.bmr-input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.bmr-input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.bmr-input-box select{
    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.bmr-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

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

.bmr-main{
    display: flex;
    justify-content: center;

    margin-bottom: 40px;
}

.bmr-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.bmr-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.bmr-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.bmr-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#bmrProgress{
    stroke: var(--primary);

    stroke-dasharray: 628;

    stroke-dashoffset: 628;

    transition: 1s ease;
}

/* CONTENT */

.bmr-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.bmr-content h3{
    font-size: 52px;

    color: var(--primary);

    font-weight: 900;
}

.bmr-content p{
    color: var(--text);

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

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

.bmr-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.bmr-card{
    background:
    rgba(255,255,255,0.03);

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

    border-radius: 22px;

    padding: 22px;

    text-align: center;
}

.bmr-card span{
    font-size: 32px;

    display: block;

    margin-bottom: 14px;
}

.bmr-card h4{
    color: var(--primary);

    font-size: 24px;
    font-weight: 900;

    margin-bottom: 8px;
}

.bmr-card p{
    color: var(--para);
}

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

.bmr-info{
    background:
    rgba(0,208,156,0.08);

    border:
    1px solid rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.bmr-info h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.bmr-info p{
    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.bmr-note{
    background:
    rgba(255,193,7,0.08);

    border:
    1px solid rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.bmr-note h4{
    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.bmr-note p{
    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .bmr-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .bmr-top h1{
        font-size: 42px;
    }

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

    .bmr-circle{
        width: 220px;
        height: 220px;
    }

    .bmr-circle svg{
        width: 220px;
        height: 220px;
    }

    .bmr-content h3{
        font-size: 40px;
    }

}

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

.heart-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top right,
    rgba(255,45,85,0.08),
    transparent 30%),
    var(--bg);
}

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

.heart-top{
    text-align: center;
    margin-bottom: 60px;
}

.heart-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(255,45,85,0.12);

    border: 1px solid rgba(255,45,85,0.2);

    color: #ff2d55;

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

    margin-bottom: 24px;
}

.heart-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.heart-top h1 span{
    color: #ff2d55;
}

.heart-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.heart-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.heart-form,
.heart-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.heart-form h2,
.heart-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.heart-input-box{
    margin-bottom: 24px;
}

.heart-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.heart-input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.heart-input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.heart-input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.heart-input-box select{
    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.heart-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: #ff2d55;

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

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

.heart-main{
    display: flex;
    justify-content: center;

    margin-bottom: 40px;
}

.heart-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.heart-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.heart-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.heart-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#heartProgress{
    stroke: #ff2d55;

    stroke-dasharray: 628;

    stroke-dashoffset: 628;

    transition: 1s ease;
}

/* CONTENT */

.heart-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.heart-content h3{
    font-size: 56px;

    color: #ff2d55;

    font-weight: 900;
}

.heart-content p{
    color: var(--text);

    font-size: 20px;
    font-weight: 700;
}

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

.heart-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.heart-card{
    background:
    rgba(255,255,255,0.03);

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

    border-radius: 22px;

    padding: 22px;

    text-align: center;
}

.heart-card span{
    font-size: 32px;

    display: block;

    margin-bottom: 14px;
}

.heart-card h4{
    color: #ff2d55;

    font-size: 24px;
    font-weight: 900;

    margin-bottom: 8px;
}

.heart-card p{
    color: var(--para);
}

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

.heart-info{
    background:
    rgba(255,45,85,0.08);

    border:
    1px solid rgba(255,45,85,0.15);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.heart-info h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.heart-info p{
    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.heart-note{
    background:
    rgba(255,193,7,0.08);

    border:
    1px solid rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.heart-note h4{
    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.heart-note p{
    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .heart-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .heart-top h1{
        font-size: 42px;
    }

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

    .heart-circle{
        width: 220px;
        height: 220px;
    }

    .heart-circle svg{
        width: 220px;
        height: 220px;
    }

    .heart-content h3{
        font-size: 42px;
    }

}

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

.macro-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(circle at top left,
    rgba(0,208,156,0.08),
    transparent 30%),
    var(--bg);
}

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

.macro-top{
    text-align: center;
    margin-bottom: 60px;
}

.macro-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background: rgba(0,208,156,0.12);

    border: 1px solid rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.macro-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.macro-top h1 span{
    color: var(--primary);
}

.macro-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.macro-wrapper{
    display: grid;

    grid-template-columns: 420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.macro-form,
.macro-result{
    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.macro-form h2,
.macro-result h2{
    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   GENDER
========================= */

.macro-gender-box{
    display: flex;
    gap: 16px;

    margin-bottom: 28px;
}

.macro-gender-btn{
    flex: 1;

    height: 58px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

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

    cursor: pointer;

    transition: 0.3s ease;
}

.macro-gender-btn.active{
    background: var(--primary);

    color: white;
}

/* =========================
   INPUTS
========================= */

.macro-input-box{
    margin-bottom: 24px;
}

.macro-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.macro-input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.macro-input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.macro-input-group span{
    width: 80px;

    height: 100%;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.macro-input-box select{
    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.macro-btn{
    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;
}

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

.macro-main{
    display: flex;
    justify-content: center;

    margin-bottom: 40px;
}

.macro-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.macro-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.macro-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.macro-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#macroProgress{
    stroke: var(--primary);

    stroke-dasharray: 628;

    stroke-dashoffset: 628;

    transition: 1s ease;
}

/* CONTENT */

.macro-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.macro-content h3{
    font-size: 52px;

    color: var(--primary);

    font-weight: 900;
}

.macro-content p{
    color: var(--text);

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

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

.macro-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.macro-card{
    border-radius: 22px;

    padding: 22px;

    text-align: center;

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

.protein-card{
    background: rgba(255,87,34,0.08);
}

.carbs-card{
    background: rgba(0,208,156,0.08);
}

.fats-card{
    background: rgba(255,193,7,0.08);
}

.macro-card span{
    font-size: 32px;

    display: block;

    margin-bottom: 14px;
}

.macro-card h4{
    color: var(--primary);

    font-size: 24px;
    font-weight: 900;

    margin-bottom: 8px;
}

.macro-card p{
    color: var(--para);
}

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

.macro-info{
    background:
    rgba(0,208,156,0.08);

    border:
    1px solid rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.macro-info h4{
    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.macro-info p{
    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.macro-note{
    background:
    rgba(255,193,7,0.08);

    border:
    1px solid rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.macro-note h4{
    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.macro-note p{
    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .macro-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .macro-top h1{
        font-size: 42px;
    }

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

    .macro-circle{
        width: 220px;
        height: 220px;
    }

    .macro-circle svg{
        width: 220px;
        height: 220px;
    }

    .macro-content h3{
        font-size: 40px;
    }

}

                                /* =========================
                                   WORKOUT PLANNER
                                ========================= */



.planner-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(
    circle at top left,
    rgba(0,208,156,0.08),
    transparent 30%
    ),
    var(--bg);
}

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

.planner-top{
    text-align: center;
    margin-bottom: 60px;
}

.planner-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background:
    rgba(0,208,156,0.12);

    border:
    1px solid
    rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.planner-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.planner-top h1 span{
    color: var(--primary);
}

.planner-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.planner-wrapper{
    display: grid;

    grid-template-columns:
    420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.planner-form,
.planner-result{

    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.planner-form h2,
.planner-result h2{

    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.planner-input-box{
    margin-bottom: 24px;
}

.planner-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.planner-input-box select{

    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.planner-btn{

    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;

    transition: 0.3s ease;
}

.planner-btn:hover{
    transform: translateY(-3px);
}

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

.workout-plan{
    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 35px;
}

.plan-day{

    background:
    rgba(255,255,255,0.03);

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

    border-radius: 24px;

    padding: 24px;
}

.day-header{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

    flex-wrap: wrap;

    gap: 10px;
}

.day-header span{

    background: var(--primary);

    color: white;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;
}

.day-header h3{

    color: var(--text);

    font-size: 24px;
    font-weight: 800;
}

.plan-day ul{
    padding-left: 18px;
}

.plan-day ul li{

    color: var(--para);

    margin-bottom: 12px;

    line-height: 1.7;
}

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

.planner-info{

    background:
    rgba(0,208,156,0.08);

    border:
    1px solid
    rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.planner-info h4{

    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.planner-info p{

    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.planner-note{

    background:
    rgba(255,193,7,0.08);

    border:
    1px solid
    rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.planner-note h4{

    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.planner-note p{

    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .planner-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .planner-top h1{
        font-size: 42px;
    }

    .planner-form,
    .planner-result{
        padding: 24px;
    }

    .day-header h3{
        font-size: 20px;
    }

}

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



.sleep-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(
    circle at top right,
    rgba(120,119,255,0.08),
    transparent 30%
    ),
    var(--bg);
}

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

.sleep-top{
    text-align: center;
    margin-bottom: 60px;
}

.sleep-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background:
    rgba(120,119,255,0.12);

    border:
    1px solid
    rgba(120,119,255,0.2);

    color: #7877ff;

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

    margin-bottom: 24px;
}

.sleep-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.sleep-top h1 span{
    color: #7877ff;
}

.sleep-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.sleep-wrapper{
    display: grid;

    grid-template-columns:
    420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.sleep-form,
.sleep-result{

    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.sleep-form h2,
.sleep-result h2{

    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.sleep-input-box{
    margin-bottom: 24px;
}

.sleep-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.sleep-input-box select,
.sleep-input-box input{

    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.sleep-btn{

    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: #7877ff;

    color: white;

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

    cursor: pointer;

    margin-top: 10px;

    transition: 0.3s ease;
}

.sleep-btn:hover{
    transform: translateY(-3px);
}

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

.sleep-main{
    display: flex;
    justify-content: center;

    margin-bottom: 40px;
}

.sleep-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.sleep-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.sleep-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.sleep-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#sleepProgress{
    stroke: #7877ff;

    stroke-dasharray: 628;

    stroke-dashoffset: 120;

    transition: 1s ease;
}

/* CONTENT */

.sleep-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.sleep-content h3{
    font-size: 56px;

    color: #7877ff;

    font-weight: 900;
}

.sleep-content p{
    color: var(--text);

    font-size: 20px;
    font-weight: 700;
}

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

.sleep-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.sleep-card{

    background:
    rgba(255,255,255,0.03);

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

    border-radius: 22px;

    padding: 22px;

    text-align: center;
}

.sleep-card span{
    font-size: 32px;

    display: block;

    margin-bottom: 14px;
}

.sleep-card h4{

    color: #7877ff;

    font-size: 24px;
    font-weight: 900;

    margin-bottom: 8px;
}

.sleep-card p{
    color: var(--para);
}

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

.sleep-info{

    background:
    rgba(120,119,255,0.08);

    border:
    1px solid
    rgba(120,119,255,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.sleep-info h4{

    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.sleep-info p{

    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.sleep-note{

    background:
    rgba(255,193,7,0.08);

    border:
    1px solid
    rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.sleep-note h4{

    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.sleep-note p{

    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .sleep-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .sleep-top h1{
        font-size: 42px;
    }

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

    .sleep-form,
    .sleep-result{
        padding: 24px;
    }

    .sleep-circle{
        width: 220px;
        height: 220px;
    }

    .sleep-circle svg{
        width: 220px;
        height: 220px;
    }

    .sleep-content h3{
        font-size: 42px;
    }

}

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

.steps-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(
    circle at top left,
    rgba(0,208,156,0.08),
    transparent 30%
    ),
    var(--bg);
}

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

.steps-top{
    text-align: center;
    margin-bottom: 60px;
}

.steps-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background:
    rgba(0,208,156,0.12);

    border:
    1px solid
    rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.steps-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.steps-top h1 span{
    color: var(--primary);
}

.steps-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.steps-wrapper{
    display: grid;

    grid-template-columns:
    420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.steps-form,
.steps-result{

    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.steps-form h2,
.steps-result h2{

    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.steps-input-box{
    margin-bottom: 24px;
}

.steps-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.steps-input-group{
    display: flex;

    align-items: center;

    height: 60px;

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

    border-radius: 18px;

    overflow: hidden;
}

.steps-input-group input{
    flex: 1;

    height: 100%;

    border: none;
    outline: none;

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;
}

.steps-input-group span{
    width: 90px;

    height: 100%;

    display: flex;

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

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

    color: var(--text);

    font-weight: 700;
}

/* SELECT */

.steps-input-box select{

    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.steps-btn{

    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;

    transition: 0.3s ease;
}

.steps-btn:hover{
    transform: translateY(-3px);
}

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

.steps-main{
    display: flex;
    justify-content: center;

    margin-bottom: 40px;
}

.steps-circle{
    width: 260px;
    height: 260px;

    position: relative;
}

.steps-circle svg{
    width: 260px;
    height: 260px;

    transform: rotate(-90deg);
}

.steps-circle svg circle{
    fill: none;

    stroke-width: 16;

    stroke-linecap: round;
}

.steps-circle svg circle:first-child{
    stroke: rgba(255,255,255,0.08);
}

#stepsProgress{
    stroke: var(--primary);

    stroke-dasharray: 628;

    stroke-dashoffset: 628;

    transition: 1s ease;
}

/* CONTENT */

.steps-content{
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

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

.steps-content h3{
    font-size: 52px;

    color: var(--primary);

    font-weight: 900;
}

.steps-content p{
    color: var(--text);

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

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

.steps-grid{
    display: grid;

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

    gap: 18px;

    margin-bottom: 35px;
}

.steps-card{

    background:
    rgba(255,255,255,0.03);

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

    border-radius: 22px;

    padding: 22px;

    text-align: center;
}

.steps-card span{
    font-size: 32px;

    display: block;

    margin-bottom: 14px;
}

.steps-card h4{

    color: var(--primary);

    font-size: 24px;
    font-weight: 900;

    margin-bottom: 8px;
}

.steps-card p{
    color: var(--para);
}

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

.steps-info{

    background:
    rgba(0,208,156,0.08);

    border:
    1px solid
    rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.steps-info h4{

    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.steps-info p{

    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.steps-note{

    background:
    rgba(255,193,7,0.08);

    border:
    1px solid
    rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.steps-note h4{

    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.steps-note p{

    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .steps-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .steps-top h1{
        font-size: 42px;
    }

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

    .steps-form,
    .steps-result{
        padding: 24px;
    }

    .steps-circle{
        width: 220px;
        height: 220px;
    }

    .steps-circle svg{
        width: 220px;
        height: 220px;
    }

    .steps-content h3{
        font-size: 42px;
    }

}

                                                            /* =========================
                                                               DIET PLANNER
                                                            ========================= */

.diet-section{
    width: 100%;
    padding: 110px 0;

    background:
    radial-gradient(
    circle at top right,
    rgba(0,208,156,0.08),
    transparent 30%
    ),
    var(--bg);
}

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

.diet-top{
    text-align: center;
    margin-bottom: 60px;
}

.diet-badge{
    display: inline-block;

    padding: 10px 24px;

    border-radius: 40px;

    background:
    rgba(0,208,156,0.12);

    border:
    1px solid
    rgba(0,208,156,0.2);

    color: var(--primary);

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

    margin-bottom: 24px;
}

.diet-top h1{
    font-size: 72px;

    color: var(--text);

    margin-bottom: 20px;

    font-weight: 900;
}

.diet-top h1 span{
    color: var(--primary);
}

.diet-top p{
    max-width: 700px;

    margin: auto;

    color: var(--para);

    line-height: 1.8;
}

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

.diet-wrapper{
    display: grid;

    grid-template-columns:
    420px 1fr;

    gap: 35px;
}

/* =========================
   BOXES
========================= */

.diet-form,
.diet-result{

    background: var(--card);

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

    border-radius: 32px;

    padding: 35px;
}

.diet-form h2,
.diet-result h2{

    color: var(--text);

    margin-bottom: 35px;

    font-size: 34px;
}

/* =========================
   INPUTS
========================= */

.diet-input-box{
    margin-bottom: 24px;
}

.diet-input-box label{
    display: block;

    margin-bottom: 12px;

    color: var(--text);

    font-weight: 700;
}

.diet-input-box select{

    width: 100%;

    height: 60px;

    border-radius: 18px;

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

    background: transparent;

    color: var(--text);

    padding: 0 20px;

    font-size: 16px;

    outline: none;
}

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

.diet-btn{

    width: 100%;

    height: 62px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

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

    cursor: pointer;

    margin-top: 10px;

    transition: 0.3s ease;
}

.diet-btn:hover{
    transform: translateY(-3px);
}

/* =========================
   MEAL PLAN
========================= */

.meal-plan{
    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-bottom: 35px;
}

.meal-card{

    background:
    rgba(255,255,255,0.03);

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

    border-radius: 24px;

    padding: 24px;
}

.meal-header{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 16px;

    flex-wrap: wrap;

    gap: 10px;
}

.meal-header span{

    background: var(--primary);

    color: white;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;
    font-weight: 700;
}

.meal-header h3{

    color: var(--text);

    font-size: 24px;
    font-weight: 800;
}

.meal-card ul{
    padding-left: 18px;
}

.meal-card ul li{

    color: var(--para);

    margin-bottom: 12px;

    line-height: 1.7;
}

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

.diet-info{

    background:
    rgba(0,208,156,0.08);

    border:
    1px solid
    rgba(0,208,156,0.12);

    border-radius: 24px;

    padding: 24px;

    margin-bottom: 25px;
}

.diet-info h4{

    color: var(--text);

    margin-bottom: 12px;

    font-size: 24px;
}

.diet-info p{

    color: var(--para);

    line-height: 1.8;
}

/* =========================
   NOTE
========================= */

.diet-note{

    background:
    rgba(255,193,7,0.08);

    border:
    1px solid
    rgba(255,193,7,0.2);

    border-radius: 24px;

    padding: 24px;
}

.diet-note h4{

    color: #ffc107;

    margin-bottom: 12px;

    font-size: 22px;
}

.diet-note p{

    color: var(--para);

    line-height: 1.8;
}

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

@media(max-width:1000px){

    .diet-wrapper{
        grid-template-columns: 1fr;
    }

}

@media(max-width:700px){

    .diet-top h1{
        font-size: 42px;
    }

    .diet-form,
    .diet-result{
        padding: 24px;
    }

    .meal-header h3{
        font-size: 20px;
    }

}








                    /*======================================footer===============================*/

.footer{
    width: 100%;
    padding-top: 90px;

    /* ALWAYS DARK BACKGROUND */
    background: #071739;

    color: #ffffff;

    overflow: hidden;
}

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

.container{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

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

.footer-wrapper{
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;

    padding-bottom: 60px;
}

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

.footer-logo{
    text-decoration: none;
    font-size: 34px;
    font-weight: 900;
    color: #ffffff;

    display: inline-block;
    margin-bottom: 25px;
}

.footer-logo span{
    color: #009970;
}

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

.footer-box p{
    color: #b6c2d1;
    line-height: 1.9;
    font-size: 16px;
}

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

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

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

.footer-box ul{
    list-style: none;
}

.footer-box ul li{
    margin-bottom: 16px;
}

.footer-box ul li a{
    text-decoration: none;
    color: #b6c2d1;
    transition: 0.3s ease;
}

.footer-box ul li a:hover{
    color: #009970;
    padding-left: 6px;
}

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

.footer-social{
    display: flex;
    gap: 14px;

    margin-top: 28px;
}

.footer-social a{
    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: rgba(255,255,255,0.08);

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

    color: white;
    text-decoration: none;

    transition: 0.3s ease;
}

.footer-social a:hover{
    background: #009970;
    transform: translateY(-5px);
}

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

.footer-form{
    margin-top: 24px;
}

.footer-form input{
    width: 100%;
    height: 56px;

    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);

    border-radius: 14px;

    padding: 0 18px;

    color: white;
    font-size: 15px;

    outline: none;

    margin-bottom: 16px;
}

.footer-form input::placeholder{
    color: #b6c2d1;
}

.footer-form button{
    width: 100%;
    height: 56px;

    border: none;
    border-radius: 14px;

    background: #009970;
    color: white;

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

    cursor: pointer;

    transition: 0.3s ease;
}

.footer-form button:hover{
    transform: translateY(-4px);
}

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

.footer-bottom{
    border-top: 1px solid rgba(255,255,255,0.08);

    padding: 28px 0;
    text-align: center;
}

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

/* =========================
   LAPTOP
========================= */

@media(max-width: 1100px){

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

}

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

@media(max-width: 768px){

    .footer{
        padding-top: 70px;
    }

    .footer-wrapper{
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .footer-logo{
        font-size: 30px;
    }

    .footer-box h3{
        font-size: 22px;
    }

}

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

@media(max-width: 500px){

    .footer{
        padding-top: 60px;
    }

    .footer-logo{
        font-size: 26px;
    }

    .footer-box p{
        font-size: 15px;
    }

    .footer-box h3{
        font-size: 20px;
    }

    .footer-social a{
        width: 42px;
        height: 42px;
    }

    .footer-form input,
    .footer-form button{
        height: 52px;
    }

    .footer-bottom p{
        font-size: 14px;
        line-height: 1.8;
    }

}