/* =========================================
   VitalBalance Premium Website
   Main Stylesheet
========================================= */


/* ---------- GLOBAL ---------- */


:root {

    --green-dark: #18392b;
    --green: #54745d;
    --sage: #a8bca8;

    --sand: #eee5d7;
    --gold: #c9a85b;

    --light: #f8f7f3;
    --grey: #6d746f;

    --white: #ffffff;

    --radius: 24px;

    --shadow:
    0 20px 50px rgba(0,0,0,0.08);

}



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



html {
    scroll-behavior:smooth;
}



body {

    font-family:
    "Manrope",
    Arial,
    sans-serif;

    background:
    var(--light);

    color:
    var(--green-dark);

    line-height:1.7;

}



img {

    width:100%;
    display:block;

}



h1,
h2,
h3 {

    font-family:
    "Playfair Display",
    serif;

    line-height:1.25;

}



h1 {

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

}



h2 {

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

    text-align:center;

    margin-bottom:60px;

}



h3 {

    font-size:1.4rem;

}



p {

    color:
    var(--grey);

}



a {

    text-decoration:none;

    color:inherit;

}



.container {

    width:min(1200px,90%);

    margin:auto;

}





/* ---------- BUTTONS ---------- */


.btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

    16px 34px;


    border-radius:
    50px;


    font-weight:
    700;


    transition:
    .3s ease;


}



.btn.primary {

    background:
    var(--green-dark);

    color:
    white;

}



.btn.primary:hover {

    transform:
    translateY(-4px);

    background:
    var(--green);

}







/* ---------- HEADER ---------- */


.header {

    position:
    sticky;

    top:0;

    z-index:100;

    background:
    rgba(248,247,243,.85);

    backdrop-filter:
    blur(15px);

}



.nav {

    height:
    90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:1.8rem;

    font-weight:800;

}



.logo span {

    color:
    var(--green);

}



nav {

    display:flex;

    gap:35px;

}



nav a {

    color:
    var(--grey);

    font-weight:600;

}



nav a:hover {

    color:
    var(--green-dark);

}







/* ---------- HERO ---------- */


.hero {

    padding:
    100px 0;

}



.hero-grid {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:70px;

    align-items:center;

}



.hero-content p {

    font-size:1.2rem;

    margin:
    30px 0;

}



.hero-image img {

    border-radius:
    40px;

    box-shadow:
    var(--shadow);

}





.trust {

    display:flex;

    gap:25px;

    margin-top:50px;

}



.trust div {

    background:white;

    padding:20px;

    border-radius:20px;

    box-shadow:
    var(--shadow);

}



.trust strong {

    display:block;

    font-size:1.2rem;

}







/* ---------- ABOUT ---------- */


.about {

    padding:
    120px 0;

}



.two-column {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;

}



.about img {

    border-radius:35px;

}



.about li {

    list-style:none;

    margin-top:15px;

}






/* ---------- SERVICES ---------- */


.services {

    padding:
    120px 0;

}



.cards {

    display:grid;

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

    gap:30px;

}



.card {

    background:white;

    padding:40px;

    border-radius:
    var(--radius);

    box-shadow:
    var(--shadow);

    transition:.3s;

}



.card:hover {

    transform:
    translateY(-10px);

}



.icon {

    font-size:3rem;

    margin-bottom:25px;

}



.card li {

    list-style:none;

    margin:12px 0;

}







/* ---------- PROCESS ---------- */


.process {

    background:
    var(--sand);

    padding:
    120px 0;

}



.steps {

    display:grid;

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

    gap:20px;

}



.steps div {

    background:white;

    padding:30px;

    border-radius:20px;

    text-align:center;

}



.steps span {

    display:block;

    font-size:2rem;

    font-weight:bold;

    color:
    var(--green);

}







/* ---------- BENEFITS ---------- */


.benefits {

    padding:
    120px 0;

}



.benefit-grid {

    display:grid;

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

    gap:25px;

}



.benefit-grid div {

    background:white;

    padding:30px;

    border-radius:20px;

    box-shadow:
    var(--shadow);

}







/* ---------- REVIEWS ---------- */


.reviews {

    padding:
    120px 0;

    background:
    white;

}



.review-grid {

    display:grid;

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

    gap:30px;

}



.review {

    padding:35px;

    border-radius:25px;

    background:
    var(--light);

}



.review img {

    width:80px;

    height:80px;

    object-fit:cover;

    border-radius:50%;

    margin-bottom:20px;

}






/* ---------- PRICING ---------- */


.pricing {

    padding:
    120px 0;

}



.pricing-grid {

    display:grid;

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

    gap:25px;

}



.price-card {

    background:white;

    padding:40px;

    border-radius:25px;

    box-shadow:
    var(--shadow);

}



.price-card strong {

    display:block;

    font-size:3rem;

    margin:25px 0;

}



.featured {

    border:

    3px solid var(--gold);

    transform:
    scale(1.05);

}



.featured span {

    background:
    var(--gold);

    color:white;

    padding:8px 15px;

    border-radius:20px;

}






/* ---------- FAQ ---------- */


.faq {

    padding:
    120px 0;

    background:white;

}



.faq-item {

    background:
    var(--light);

    padding:30px;

    margin-bottom:20px;

    border-radius:20px;

}






/* ---------- CONTACT ---------- */


.contact {

    padding:
    120px 0;

    text-align:center;

}



form {

    max-width:600px;

    margin:auto;

}



input,
textarea {

    width:100%;

    padding:18px;

    margin-bottom:20px;

    border-radius:15px;

    border:
    1px solid #ddd;

    font-size:1rem;

}



textarea {

    height:150px;

}






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


footer {

    background:
    var(--green-dark);

    color:white;

    padding:40px 0;

}



footer .container {

    display:flex;

    justify-content:space-between;

}



footer a {

    margin-left:20px;

}







/* ---------- MOBILE ---------- */


@media(max-width:900px){


.nav nav {

    display:none;

}



.hero-grid,
.two-column {

    grid-template-columns:1fr;

}



.cards,
.review-grid,
.benefit-grid,
.pricing-grid {

    grid-template-columns:1fr;

}



.steps {

    grid-template-columns:1fr;

}



.trust {

    flex-direction:column;

}



.featured {

    transform:none;

}



footer .container {

    flex-direction:column;

    gap:20px;

}



}
/* Scroll Animation */

.hidden {

    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;

}



.show {

    opacity:1;

    transform:
    translateY(0);

}