/* ===========================================
   VG WELLNESS PLATFORM
   STYLE.CSS
   =========================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===========================================
   CSS VARIABLES
=========================================== */

:root{

    --primary:#7A2330;
    --secondary:#1F5B43;
    --gold:#C9A227;

    --white:#ffffff;
    --light:#F8F6F2;
    --dark:#222222;
    --text:#555555;

    --radius:12px;

    --shadow:
        0 10px 30px rgba(0,0,0,.08);

    --transition:.35s ease;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    color:var(--text);

    background:var(--light);

    line-height:1.7;

}

img{

    width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

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

.container{

    width:80%;

    max-width:1300px;

    margin:auto;

}

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

h1,h2,h3,h4{

    font-family:'Playfair Display',serif;

    color:var(--dark);

}

h1{

    font-size:64px;

    line-height:1.15;

    margin-bottom:25px;

}

h2{

    font-size:42px;

    margin-bottom:20px;

}

p{

    font-size:18px;

    color:var(--text);

}

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

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

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

    backdrop-filter:blur(12px);

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:70px;

}

.logo-text h2{

    font-size:24px;

    color:var(--primary);

    margin:0;

}

.logo-text p{

    font-size:13px;

    color:var(--gold);

}

nav ul{

    display:flex;

    gap:28px;

}

nav a{

    color:var(--dark);

    font-weight:600;

    transition:var(--transition);

}

nav a:hover{

    color:var(--primary);

}

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

.btn-primary{

    background:var(--primary);

    color:white;

    padding:14px 28px;

    border-radius:40px;

    font-weight:600;

    transition:var(--transition);

    display:inline-block;

}

.btn-primary:hover{

    background:var(--secondary);

    transform:translateY(-3px);

}

.btn-outline{

    border:2px solid white;

    color:white;

    padding:14px 28px;

    border-radius:40px;

    margin-left:15px;

    transition:var(--transition);

}

.btn-outline:hover{

    background:white;

    color:var(--primary);

}

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

.hero{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-video{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    top:0;

    left:0;

    z-index:-2;

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(0,0,0,.60),

        rgba(0,0,0,.45)

    );

    z-index:-1;

}

.hero-content{

    color:white;

}



.hero-tag{

    display:inline-block;

    background:rgba(19, 78, 42, 0.632);

    backdrop-filter:blur(8px);

    padding:10px 20px;

    border-radius:40px;

    margin-bottom:25px;

    color:white;

}

.hero h1{

    color:white;

}

.hero p{

    color:white;

    width:700px;

    max-width:100%;

    margin-bottom:35px;

}

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

.hero-stats{

    display:flex;

    gap:25px;

    margin-top:50px;

}

.stat-card{

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

    backdrop-filter:blur(10px);

    padding:25px;

    border-radius:15px;

    min-width:180px;

    text-align:center;

}

.stat-card h2{

    color:white;

    font-size:38px;

    margin-bottom:10px;

}

.stat-card span{

    color:white;

}

/* ===========================================
SCROLL INDICATOR
=========================================== */

.scroll-down{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    text-align:center;

}

.mouse{

    width:28px;

    height:45px;

    border:2px solid white;

    border-radius:20px;

    margin:10px auto;

    position:relative;

}

.wheel{

    width:6px;

    height:10px;

    background:white;

    border-radius:10px;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:8px;

    animation:scroll 1.8s infinite;

}

@keyframes scroll{

0%{

top:8px;
opacity:1;

}

100%{

top:24px;
opacity:0;

}

}

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

section{

    padding:60px 0;

}

.section-heading{

    text-align:center;

    margin-bottom:60px;

}

.section-heading span{

    color:var(--gold);

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.section-heading h2{

    margin-top:15px;

}

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

.trusted{
    background:#ffffff;
    padding:70px 0;
}

.logo-slider{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
    margin-top:40px;
}

.logo-slider img{
    height:55px;
    width:auto;
    opacity:.65;
    transition:var(--transition);
    filter:grayscale(100%);
}

.logo-slider img:hover{
    opacity:1;
    filter:none;
    transform:scale(1.08);
}

/* ===========================================
   ABOUT
=========================================== */

.about{

    background:#ffffff;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    overflow:visible;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-image img{

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.08);

}

.about-content span{

    color:var(--gold);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.about-content h2{

    margin:15px 0 25px;

}

.about-content p{

    margin-bottom:20px;

}

.about-content .btn-primary{

    margin-top:20px;

}

/* ===========================================
   CORPORATE WELLNESS
=========================================== */

.corporate{

    background:linear-gradient(135deg,#f8f6f2,#ffffff);

}

.corporate-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.corporate-grid img{

    border-radius:20px;

    box-shadow:var(--shadow);

}

.corporate-grid h3{

    color:var(--primary);

    font-size:34px;

    margin-bottom:20px;

}

.corporate-grid ul{

    margin:30px 0;

}

.corporate-grid li{

    position:relative;

    padding-left:35px;

    margin-bottom:18px;

    font-size:18px;

    color:var(--text);

}

.corporate-grid li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:var(--secondary);

    font-weight:bold;

    font-size:20px;

}

.corporate-grid .btn-primary{

    margin-top:20px;

}

/* ===========================================
   PREMIUM IMAGE EFFECTS
=========================================== */

.service-card img,
.about-image img,
.corporate-grid img{

    display:block;

    width:100%;

}

.service-card:hover img{

    transform:scale(1.06);

}

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

.services,
.about,
.corporate{

    padding:110px 0;

}

/* ===========================================
   SMALL ANIMATION
=========================================== */

.service-card,
.about-image,
.corporate-grid img{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================
WHY CHOOSE US
=========================================== */

.why-us{
padding:110px 0;
background:#fff;
}

.why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
gap:30px;
margin-top:60px;
}

.why-card{
background:#fff;
padding:40px 30px;
border-radius:18px;
text-align:center;
box-shadow:var(--shadow);
transition:.35s;
}

.why-card:hover{
transform:translateY(-10px);
}

.icon{
font-size:50px;
margin-bottom:20px;
}

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

.journey{
background:var(--light);
}

.journey-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:50px;
}

.step{
text-align:center;
}

.circle{
width:80px;
height:80px;
background:var(--primary);
color:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
font-size:28px;
font-weight:bold;
margin-bottom:20px;
}

/* ==========================================
TESTIMONIALS
=========================================== */

.testimonials{
padding:110px 0;
background:#fff;
}

.testimonial{
max-width:800px;
margin:auto;
text-align:center;
display:none;
}

.testimonial.active{
display:block;
}

.testimonial p{
font-size:22px;
font-style:italic;
margin:30px 0;
}

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

.cta{
padding:120px 0;
background:linear-gradient(rgba(122,35,48,.9),rgba(122,35,48,.9)),
url('../images/hero.jpg');
background-size:cover;
background-position:center;
text-align:center;
color:white;
}

.cta h2,
.cta p{
color:white;
}

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

footer{
background:#1b1b1b;
color:white;
padding:80px 0 30px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 2fr;
gap:50px;
}

.footer-logo{
width:120px;
margin-bottom:20px;
}

footer h3{
color:white;
margin-bottom:20px;
}

footer a{
color:#ccc;
transition:.3s;
}

footer a:hover{
color:var(--gold);
}

.copyright{
margin-top:50px;
text-align:center;
border-top:1px solid rgba(255,255,255,.1);
padding-top:20px;
color:#aaa;
}

/* ==========================================
STICKY NAVIGATION
========================================== */

.navbar.sticky{

    background:#ffffff;

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

    transition:.35s;

}

/* ==========================================
SMOOTH TRANSITIONS
========================================== */

.hero-content{

    transition:all 1s ease;

}

/* ==========================================
SCROLL REVEAL
========================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================
COUNTER
========================================== */

.counter{

    transition:.3s;

}

/* ==========================================
ACTIVE NAVIGATION
========================================== */

nav a.active{

    color:var(--primary);

    font-weight:700;

    position:relative;

}

nav a.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:3px;

    background:var(--gold);

    border-radius:10px;

}

/* ==========================================
   PAGE LOADER
========================================== */

#loader{

position:fixed;

inset:0;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:opacity .6s ease, visibility .6s ease;

}

#loader.hidden{

opacity:0;

visibility:hidden;

}

.loader-content{

text-align:center;

}

.loader-content img{

width:100px;

margin:auto;

animation:spinLogo 4s linear infinite;

}

.loader-content h3{

margin-top:20px;

color:var(--primary);

}

.loader-content p{

margin-top:10px;

color:var(--text);

}

@keyframes spinLogo{

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

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

}

/* ==========================================
WHATSAPP
========================================== */

.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:30px;

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

z-index:999;

transition:.35s;

}

.whatsapp-btn:hover{

transform:scale(1.1);

}

/* ==========================================
BACK TO TOP
========================================== */

#backToTop{

position:fixed;

right:25px;

bottom:100px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:20px;

cursor:pointer;

display:none;

z-index:999;

transition:.3s;

}

#backToTop:hover{

background:var(--secondary);

transform:translateY(-5px);

}

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

.page-hero{

background:#ffffff;

padding:60px 0;

position: relative;

height:40vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;
text-align: center;

}

.page-hero-image{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

z-index:-2;

}

.page-overlay{

position:absolute;

inset:0;

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

z-index:-1;

}

.page-hero-content{

color:white;

max-width:800px;

}

.page-hero-content span{

display:inline-block;

background:rgba(255, 0, 0, 0.15);

padding:10px 20px;

border-radius:30px;

margin-bottom:10px;

backdrop-filter:blur(8px);

font-weight:600;

}

.page-hero-content h1{

color:rgb(7, 7, 7);

font-size:30px;

margin-bottom:25px;


}

.page-hero-content p{

color:white;

font-size:20px;

margin-bottom:35px;

max-width:700px;

}

/* ===========================
ABOUT PAGE
=========================== */

.about-section,
.story-section,
.mission-section{

padding:100px 0;

}

.about-grid,
.story-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-image img,
.story-image img{

width:100%;

border-radius:20px;

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

}

.about-list{

list-style:none;

padding:0;

margin-top:30px;

}

.about-list li{

margin-bottom:18px;

font-size:17px;

}

.about-list i{

color:#0d7a3f;

margin-right:10px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

background:#e8f5eb;

color:#0d7a3f;

border-radius:30px;

font-weight:600;

margin-bottom:18px;

}

.section-header{

text-align:center;

max-width:800px;

margin:0 auto 70px;

}

.mission-grid{

display:grid;

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

gap:40px;

}

.mission-card{

padding:45px;

background:#fff;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

text-align:center;

transition:.35s;

}

.mission-card:hover{

transform:translateY(-8px);

}

.mission-card i{

font-size:52px;

color:#0d7a3f;

margin-bottom:25px;

}


/* ==========================================
PART 3 - ABOUT PAGE
========================================== */

.motto-section,
.values-section,
.founder-section,
.facility-section{
    padding:100px 0;
}

.motto-grid,
.values-grid,
.facility-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.motto-card,
.value-card,
.facility-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.3s ease;
}

.motto-card:hover,
.value-card:hover,
.facility-card:hover{
    transform:translateY(-8px);
}

.motto-icon{
    width:80px;
    height:80px;
    margin:0 auto 25px;
    border-radius:50%;
    background:#0d7a3f;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:34px;
}

.value-card i{
    font-size:46px;
    color:#0d7a3f;
    margin-bottom:20px;
}

.founder-grid{
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:60px;
    align-items:center;
}

.founder-image img {
    width: 450px;
    max-width: 100%;
    height: auto;
}
.facility-card{
    overflow:hidden;
    padding:0;
}

.facility-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.facility-card h3{
    padding:20px;
}

/* ==========================================
WHY US
========================================== */

.why-us-section{

padding:100px 0;

background:#f8faf8;

}

.why-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.why-card{

background:white;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

}

.why-card:hover{

transform:translateY(-8px);

}

.why-card i{

font-size:48px;

color:#0d7a3f;

margin-bottom:20px;

}

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

.cta-section{

padding:100px 0;

background:linear-gradient(135deg,#0d7a3f,#1b9a5d);

color:white;

text-align:center;

}

.cta-box{

max-width:850px;

margin:auto;

}

.cta-box h2{

color:white;

font-size:42px;

margin-bottom:20px;

}

.cta-box p{

color:white;
font-size:18px;

margin-bottom:35px;

opacity:.95;

}

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

footer{

background:#0b3d2c;

color:white;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:3fr 2fr 2fr 4fr;

gap:40px;

}

.footer-grid h4{

margin-bottom:20px;

color:#f6d365;

}

.footer-grid h5{

margin-bottom:20px;

color:white;

}

.footer-grid ul{

list-style:none;

padding:0;

}

.footer-grid li{

margin-bottom:12px;

}

.footer-grid a{

color:white;

text-decoration:none;

}

.footer-grid a:hover{

color:#f6d365;

}

.footer-bottom{

text-align:center;

padding-top:25px;

}

/* ===================================================
   SERVICES PAGE
===================================================*/

.breadcrumb-section{

    background:#faf8f4;

    padding:15px 0;

}

.breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:15px;

}

.breadcrumb a{

    color:#0d6b3f;

    font-weight:600;

    text-decoration:none;

}

.breadcrumb .active{

    color:#666;

}

.services-intro{

    background:#ffffff;

}

.services-intro .section-title{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.services-intro p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin-top:20px;

}

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

.services-wrapper{

    display:grid;

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

    gap:30px;

}

.service-content{

    padding:25px;

}

.service-icon{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0d6b3f;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    margin-bottom:20px;

}

/*======================================================
WHY CORPORATE WELLNESS
======================================================*/

.why-corporate{

    background:#ffffff;

}

.corporate-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.corporate-image img{

    width:100%;

    border-radius:20px;

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

}

.challenge-grid{

    display:grid;

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

    gap:25px;

    margin-top:30px;

}

.challenge-card{

    background:#fff;

    padding:25px;

    border-radius:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.challenge-card:hover{

    transform:translateY(-8px);

}

.challenge-card i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#0d6b3f;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    margin-bottom:20px;

}

.challenge-card h4{

    margin-bottom:10px;

}

.challenge-card p{

    color:#666;

    line-height:1.7;

}

/*======================================================
VG APPROACH
======================================================*/

.vg-approach{

    background:#f8faf8;

    padding:100px 0;

}

.approach-box{

    display:grid;

    grid-template-columns:1.2fr 1fr;

    gap:60px;

    background:white;

    border-radius:24px;

    padding:60px;

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

}

.approach-left h2{

    margin-bottom:20px;

}

.approach-left p{

    line-height:2;

    color:#666;

}

.approach-item{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

    padding:18px 25px;

    border-radius:15px;

    background:#eef7f1;

    font-weight:600;

}

.approach-item i{

    color:#0d6b3f;

    font-size:22px;

}


/*==========================================
CORPORATE SOLUTIONS
==========================================*/
/*
.corporate-solutions{

    background:#ffffff;

}

.solution-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.solution-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.4s;

}

.solution-card:hover{

    transform:translateY(-12px);

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

}

.solution-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

}

.solution-content{

    padding:30px;

}

.solution-icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#0d6b3f;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    margin-bottom:20px;

}

.solution-content h3{

    font-size:22px;

    color:#17371d;

    margin-bottom:15px;

}

.solution-content p{

    color:#666;

    line-height:1.8;

}

/* Responsive */

@media(max-width:1200px){

.solution-grid{

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

}

}

@media(max-width:768px){

.solution-grid{

grid-template-columns:1fr;

}

}

/*=====================================================
VG WELLNESS FRAMEWORK
=====================================================*/

.wellness-framework{

    background:#f8faf8;

}

.framework-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin-top:70px;

    flex-wrap:wrap;

}

.framework-card{

    background:white;

    width:320px;

    padding:40px;

    border-radius:22px;

    text-align:center;

    position:relative;

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

    transition:.35s;

}

.framework-card:hover{

    transform:translateY(-12px);

}

.framework-number{

    position:absolute;

    top:20px;

    right:20px;

    color:#d4af37;

    font-size:34px;

    font-weight:700;

}

.framework-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#0d6b3f;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

}

.framework-card h3{

    margin-bottom:18px;

    color:#17371d;

}

.framework-card p{

    color:#666;

    line-height:1.8;

}

.framework-arrow{

    font-size:34px;

    color:#0d6b3f;

}

/*================================*/

.framework-values{

    background:white;

    padding:80px 0;

}

.values-box{

    display:grid;

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

    gap:30px;

}

.value{

    text-align:center;

    padding:35px;

}

.value i{

    font-size:42px;

    color:#0d6b3f;

    margin-bottom:20px;

}

.value h4{

    color:#17371d;

}

/*======================================================
VG FRAMEWORK
======================================================*/

.vg-framework{

    background:#f7faf7;

}

.framework-wrapper{

    position:relative;

    width:900px;

    height:700px;

    margin:80px auto;

}

.framework-center{

    position:absolute;

    left:50%;

    top:58%;

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

}

.center-circle{

    width:280px;

    height:280px;

    border-radius:50%;

    background:white;

    border:8px solid #0d6b3f;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:25px;

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

}

.center-circle img{

    width:90px;

    margin-bottom:20px;

}

.center-circle h4{

    color:#17371d;

    margin-bottom:12px;

}

.center-circle span{

    color:#666;

    font-size:14px;

}

.framework-node{

    position:absolute;

    width:260px;

    text-align:center;

}

.framework-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#0d6b3f;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin:auto auto 25px;

    box-shadow:0 12px 30px rgba(13,107,63,.25);

}

.framework-node h3{

    color:#17371d;

    margin-bottom:15px;

}

.framework-node p{

    color:#666;

    line-height:1.8;

}

.top{

    top:0;

    left:50%;

    transform:translateX(-50%);

}

.bottom{

    bottom:-210px;

    left:50%;

    transform:translateX(-50%);

}

.left{

    left:-20;

    top:50%;

    transform:translateY(-50%);

}

.right{

    right:0;

    top:50%;

    transform:translateY(-50%);

}

/* Connecting Lines */

.framework-wrapper::before{

    content:"";

    position:absolute;

    left:50%;

    top:80px;

    width:4px;

    height:540px;

    background:#d4af37;

    transform:translateX(-50%);

}

.framework-wrapper::after{

    content:"";

    position:absolute;

    top:58%;

    left:80px;

    right:80px;

    height:4px;

    background:#d4af37;

    transform:translateY(-50%);

}

.wellness-impact{

    background:#0d6b3f;

    color:white;

    text-align:center;

    padding:90px 20px;

}

.wellness-impact blockquote{

    font-size:36px;

    font-weight:300;

    line-height:1.6;

    max-width:900px;

    margin:auto;

}

.quote-author{

    margin-top:30px;

    color:#d4af37;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

/*==========================================
INDUSTRIES
==========================================*/

.industries-section{

    background:#ffffff;

}

.industries-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.industry-card{

    background:#fff;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

    border-bottom:5px solid #0d6b3f;

}

.industry-card i{

    font-size:48px;

    color:#0d6b3f;

    margin-bottom:25px;

}

.industry-card h3{

    margin-bottom:15px;

    color:#17371d;

}

.industry-card p{

    color:#666;

    line-height:1.8;

}

/*==========================================
DELIVERY
==========================================*/

.delivery-models{

    background:#f8faf8;

    padding:100px 0;

}

.delivery-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.delivery-card{

    background:white;

    border-radius:22px;

    padding:40px;

    text-align:center;

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

    transition:.35s;

}

.delivery-card:hover{

    transform:translateY(-12px);

}

.delivery-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#0d6b3f;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

}

.delivery-card h3{

    margin-bottom:18px;

    color:#17371d;

}

.delivery-card p{

    color:#666;

    line-height:1.8;

}

@media(max-width:1100px){

.industries-grid,
.delivery-grid{

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

}

}

@media(max-width:768px){

.industries-grid,
.delivery-grid{

grid-template-columns:1fr;

}

}
/*==================================================
BUSINESS IMPACT
==================================================*/

.business-impact{

background:#0d6b3f;

color:white;

}

.business-impact .section-title h2,
.business-impact .section-title p,
.business-impact .section-title span{

color:white;

}

.impact-counter-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.impact-counter{

text-align:center;

padding:40px;

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

border-radius:20px;

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

backdrop-filter:blur(8px);

}

.impact-counter h2{

display:inline;

font-size:60px;

color:#d4af37;

}

.impact-counter span{

font-size:40px;

color:#d4af37;

}

.impact-counter p{

margin-top:15px;

}

/*============================*/

.business-results{

background:#ffffff;

padding:100px 0;

}

.results-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.result-card{

padding:40px;

background:#f8faf8;

border-radius:20px;

transition:.35s;

}

.result-card:hover{

transform:translateY(-10px);

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

}

.result-card i{

font-size:40px;

color:#0d6b3f;

margin-bottom:20px;

}

.result-card h3{

margin-bottom:15px;

}

.result-card p{

line-height:1.8;

color:#666;

}

/*=========================================================
WHY VG
=========================================================*/

.why-vg{

    background:#f7faf7;

}

.why-vg-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:70px;

    align-items:center;

}

.why-vg-image{

    position:sticky;

    top:120px;

}

.why-vg-image img{

    width:100%;

    border-radius:25px;

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

}

.section-subtitle{

    color:#0d6b3f;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.why-vg-content h2{

    margin:15px 0 25px;

}

.why-vg-content>p{

    color:#666;

    line-height:1.9;

    margin-bottom:40px;

}

.vg-benefits{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.benefit-item{

    display:flex;

    gap:20px;

    align-items:flex-start;

    background:white;

    padding:25px;

    border-radius:18px;

    transition:.35s;

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

}

.benefit-item:hover{

    transform:translateX(10px);

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

}

.benefit-item i{

    color:#0d6b3f;

    font-size:26px;

    margin-top:6px;

}

.benefit-item h4{

    color:#17371d;

    margin-bottom:8px;

}

.benefit-item p{

    color:#666;

    line-height:1.7;

}

@media(max-width:992px){

.why-vg-grid{

grid-template-columns:1fr;

}

.why-vg-image{

position:relative;
top:auto;

}

}
.vg-promise{

    margin-top:45px;

    background:linear-gradient(135deg,#0d6b3f,#1d8c55);

    color:white;

    padding:45px;

    border-radius:25px;

    box-shadow:0 20px 50px rgba(13,107,63,.25);

}

.vg-promise h3{

    margin-bottom:18px;

    color:#fff;

}

.vg-promise p{

    font-size:18px;

    line-height:1.9;

    opacity:.95;

}


/*======================================================
LEADERSHIP
======================================================*/

.leadership-message{

background:#ffffff;

}

.leadership-grid{

display:grid;

grid-template-columns:400px 1fr;

gap:80px;

align-items:center;

}

.leader-image img{

width:100%;

border-radius:25px;

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

}

.leader-content blockquote{

font-size:26px;

font-style:italic;

color:#0d6b3f;

line-height:1.7;

margin:30px 0;

border-left:5px solid #d4af37;

padding-left:25px;

}

.leader-signature{

margin-top:40px;

}

.leader-signature strong{

display:block;

font-size:22px;

}

.leader-signature span{

display:block;

color:#0d6b3f;

margin-top:5px;

}

.leader-signature small{

display:block;

margin-top:8px;

color:#888;

}

/*======================================================
TESTIMONIALS
======================================================*/

.corporate-testimonials{

background:#f8faf8;

padding:100px 0;

}

.testimonial-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:20px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

}

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

.faq-list details{

margin-bottom:20px;

background:white;

padding:25px;

border-radius:15px;

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

}

.faq-list summary{

cursor:pointer;

font-weight:600;

font-size:18px;

}

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

.corporate-cta{

padding:120px 20px;

background:linear-gradient(135deg,#0d6b3f,#2b8d57);

text-align:center;

color:white;

}

.cta-content{

max-width:850px;

margin:auto;

}

.cta-content h2{

color:white;

font-size:48px;

margin-bottom:25px;

}

.cta-content p{

font-size:20px;

line-height:1.8;

margin-bottom:45px;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}


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

.corporate-hero{

    position:relative;

    height:90vh;

    background:url("../images/corporate-banner.jpg") center center;

    background-size:cover;

    display:flex;

    align-items:center;

}

.hero-overlay{

    position:absolute;

    inset:0;

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

}

.hero-content{

    position:relative;

    color:white;

    max-width:700px;

    z-index:10;

}

.hero-content span{

    display:inline-block;

    color:#d4af37;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:58px;

    line-height:1.2;

    margin-bottom:25px;

}

.hero-content p{

    font-size:20px;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/*==================================================
Corporate Hero
==================================================*/

.hero-corp{

    position:relative;
    min-height:90vh;

    background:url("../images/corporate-banner.jpg")
        center center/cover no-repeat;

    display:flex;
    align-items:center;

}

.corp-overlay{

    position:absolute;
    inset:0;

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

}

.corp-content{

    position:relative;

    max-width:700px;

    color:#ffffff;

    z-index:2;

}
/*
.corp-tag{

    display:inline-block;

    color:#000000;

    letter-spacing:3px;

    font-weight:600;

    margin-bottom:20px;

}
*/
.corp-content h1{

    font-size:58px;

    line-height:1.2;

    margin-bottom:25px;

}

.corp-content p{

    color:white;
    
    font-size:20px;

    line-height:1.8;

    margin-bottom:40px;

}

.corp-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.about-content{

    max-width:900px;

    margin:0 auto;

    text-align:left;

}

.about-content p{

    font-size:1.08rem;

    line-height:1.9;

    color:#555;

    margin-bottom:24px;

}

.about-content strong{

    color:#1B5E4B;

    font-weight:700;

}

.vg-philosophy{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:35px;

    font-size:1.15rem;

    font-weight:700;

    color:#C9A44B;

    letter-spacing:1px;

    text-transform:uppercase;

}

.vg-philosophy .divider{

    color:#1B5E4B;

    font-size:1.5rem;

}

.vg-content{

    max-width:900px;

    margin:0 auto;

}

.vg-content p{

    text-align:justify;

    line-height:2;

    font-size:1.08rem;

    color:#555;

    margin-bottom:25px;

}

.tagline{

    font-size:1.2rem;

    color:#C8A646;

    font-weight:600;

}

.vg-cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

    margin-top:50px;

}

.vg-card{

    background:#fff;

    border-radius:20px;

    padding:35px;

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

    transition:.35s;

}

.vg-card:hover{

    transform:translateY(-10px);

}

.vg-card .icon{

    font-size:2.5rem;

    margin-bottom:15px;

}

.vg-card h3{

    color:#1B5E4B;

    margin-bottom:15px;

}

.vg-card p{

    text-align:left;

    line-height:1.8;

}

.vg-quote{

    max-width:850px;

    margin:50px auto 0;

    padding-left:25px;

    border-left:4px solid #C8A646;

    font-style:italic;

    color:#1B5E4B;

    font-size:1.2rem;

}

.vm-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(450px,1fr));

    gap:40px;

}

.vm-box{

    background:#fff;

    padding:40px;

    border-radius:20px;

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

}

.vm-box span{

    color:#C8A646;

    font-weight:700;

    letter-spacing:1px;

}

.vm-box h2{

    margin:15px 0 20px;

}

.vm-box p{

    text-align:justify;

    line-height:1.9;

    color:#555;

}

.vm-box ul{

    margin-top:25px;

    line-height:2;

    padding-left:20px;

}


/* ==========================================
   FOOTER SOCIAL MEDIA
========================================== */

.footer-social{

    margin-top:40px;

    text-align:center;

}

.footer-social h3{

    color:#ffffff;

    font-size:1.5rem;

    margin-bottom:12px;

}

.footer-social p{

    color:rgba(255,255,255,.75);

    max-width:600px;

    margin:0 auto 25px;

    line-height:1.7;

}

.social-icons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

}

.social-icons a{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#ffffff;

    font-size:1.25rem;

    transition:all .3s ease;

    text-decoration:none;

}

.social-icons a:hover{

    background:#C8A646;

    color:#1B5E4B;

    transform:translateY(-5px);

    box-shadow:0 10px 25px rgba(200,166,70,.35);

}

*{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

img{

    max-width:100%;

    display:block;

}

.container{

    width:min(90%,1200px);

    margin:auto;

}