*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{
background:#f4f6f2;
color:#2b2b2b;
line-height:1.8;
}

a{
text-decoration:none;
}

section{
padding:90px 8%;
}

.sectionTitle{
display:inline-block;
color:#556B2F;
font-size:13px;
font-weight:700;
letter-spacing:2px;
margin-bottom:15px;
text-transform:uppercase;
}

h1,h2,h3{
font-weight:700;
color:#1f1f1f;
}

p{
color:#666;
font-size:16px;
}

/********************************
HERO
********************************/

.aboutHero{

display:grid;

grid-template-columns:1.2fr 1fr;

gap:70px;

align-items:center;

min-height:90vh;

background:white;

}

.heroContent h1{

font-size:58px;

line-height:1.15;

margin-bottom:30px;

}

.heroContent p{

font-size:18px;

margin-bottom:35px;

max-width:700px;

}

.heroButtons{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-top:20px;

}

.primaryBtn{

background:#556B2F;

color:white;

padding:18px 34px;

border:none;

border-radius:12px;

font-size:15px;

cursor:pointer;

transition:.35s;

font-weight:600;

}

.primaryBtn:hover{

background:#445824;

transform:translateY(-4px);

box-shadow:0 18px 40px rgba(85,107,47,.25);

}

.secondaryBtn{

background:white;

color:#556B2F;

padding:18px 34px;

border:2px solid #556B2F;

border-radius:12px;

font-size:15px;

cursor:pointer;

transition:.35s;

font-weight:600;

}

.secondaryBtn:hover{

background:#556B2F;

color:white;

transform:translateY(-4px);

}

/********************************
RIGHT PANEL
********************************/

.heroImage{

display:flex;

justify-content:center;

align-items:center;

}

.glassCard{

width:100%;

max-width:430px;

background:white;

padding:60px;

border-radius:25px;

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

text-align:center;

border-top:6px solid #556B2F;

}

.glassCard i{

font-size:70px;

color:#556B2F;

margin-bottom:25px;

}

.glassCard h2{

margin-bottom:20px;

font-size:30px;

}

.glassCard p{

font-size:17px;

}

/********************************
STATISTICS
********************************/

.stats{

display:grid;

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

gap:25px;

background:#eef2e9;

}

.statCard{

background:white;

padding:40px;

text-align:center;

border-radius:18px;

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

transition:.35s;

}

.statCard:hover{

transform:translateY(-10px);

}

.statCard i{

font-size:42px;

color:#556B2F;

margin-bottom:20px;

}

.statCard h2{

font-size:38px;

margin-bottom:10px;

color:#556B2F;

}

.statCard p{

font-size:15px;

}

/********************************
GENERAL SPLIT LAYOUT
********************************/

.aboutSection,
.storySection,
.whyChoose{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.aboutLeft h2,
.storyContent h2,
.whyLeft h2{

font-size:44px;

margin-bottom:25px;

}

.aboutLeft p,
.storyContent p,
.whyLeft p{

margin-bottom:20px;

font-size:17px;

}

/********************************
FEATURE CARDS
********************************/

.aboutRight{

display:grid;

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

gap:25px;

}

.featureCard{

background:white;

padding:35px;

border-radius:18px;

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

transition:.35s;

}

.featureCard:hover{

transform:translateY(-8px);

}

.featureCard i{

font-size:38px;

color:#556B2F;

margin-bottom:18px;

}

.featureCard h3{

margin-bottom:12px;

font-size:22px;

}

/********************************
MISSION & VISION
********************************/

.missionVision{

display:grid;

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

gap:35px;

margin-top:40px;

}

.mvCard{

background:#fff;

padding:45px;

border-radius:20px;

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

transition:.35s;

border-top:5px solid #556B2F;

}

.mvCard:hover{

transform:translateY(-10px);

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

}

.mvCard .icon{

width:75px;

height:75px;

background:#556B2F;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.mvCard .icon i{

font-size:30px;

color:#fff;

}

.mvCard h2{

margin-bottom:18px;

font-size:28px;

}

.mvCard p{

font-size:16px;

color:#666;

}



/********************************
STORY IMAGE
********************************/

.storyImage{

display:flex;

justify-content:center;

align-items:center;

}

.storyBox{

width:100%;

max-width:420px;

height:500px;

background:linear-gradient(135deg,#556B2F,#7B9446);

border-radius:25px;

display:flex;

align-items:center;

justify-content:center;

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

}

.storyBox i{

font-size:130px;

color:white;

opacity:.9;

}



/********************************
JOINT WEALTH
********************************/

.jointSection{

display:grid;

grid-template-columns:1.1fr 1fr;

gap:70px;

align-items:center;

background:#ffffff;

}

.jointContent h2{

font-size:46px;

margin-bottom:25px;

line-height:1.2;

}

.jointContent p{

margin-bottom:20px;

font-size:17px;

color:#666;

}

.jointCards{

display:grid;

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

gap:25px;

}

.jointCard{

background:#fff;

padding:35px;

border-radius:20px;

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

transition:.35s;

border-bottom:4px solid #556B2F;

}

.jointCard:hover{

transform:translateY(-10px);

}

.jointCard i{

font-size:42px;

color:#556B2F;

margin-bottom:20px;

}

.jointCard h3{

font-size:22px;

margin-bottom:15px;

}

.jointCard p{

font-size:15px;

color:#666;

}



/********************************
BENEFITS
********************************/

.benefitsSection{

background:#eef2e9;

text-align:center;

}

.benefitsSection h2{

font-size:44px;

margin-bottom:20px;

}

.benefitIntro{

max-width:850px;

margin:auto;

margin-bottom:55px;

font-size:18px;

}

.benefitGrid{

display:grid;

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

gap:30px;

}

.benefitCard{

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.35s;

}

.benefitCard:hover{

transform:translateY(-12px);

}

.benefitCard i{

font-size:48px;

color:#556B2F;

margin-bottom:22px;

}

.benefitCard h3{

font-size:24px;

margin-bottom:15px;

}

.benefitCard p{

font-size:15px;

color:#666;

line-height:1.8;

}

/********************************
WHY CHOOSE LP HOLDINGS
********************************/

.whyChoose{

background:#fff;

}

.whyRight{

display:grid;

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

gap:25px;

}

.whyCard{

background:#f8faf6;

padding:35px;

border-radius:18px;

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

transition:.35s;

border-left:5px solid #556B2F;

}

.whyCard:hover{

transform:translateY(-8px);

background:#fff;

}

.whyCard i{

font-size:42px;

color:#556B2F;

margin-bottom:18px;

}

.whyCard h3{

margin-bottom:12px;

font-size:22px;

}

.whyCard p{

font-size:15px;

color:#666;

line-height:1.7;

}



/********************************
CORE VALUES
********************************/

.valuesSection{

background:#eef2e9;

text-align:center;

}

.valuesSection h2{

font-size:44px;

margin-bottom:60px;

}

.valuesGrid{

display:grid;

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

gap:30px;

}

.valueCard{

background:#fff;

padding:45px 30px;

border-radius:20px;

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

transition:.35s;

}

.valueCard:hover{

transform:translateY(-12px);

}

.valueCard i{

font-size:52px;

color:#556B2F;

margin-bottom:25px;

}

.valueCard h3{

font-size:24px;

margin-bottom:15px;

}

.valueCard p{

font-size:15px;

line-height:1.8;

color:#666;

}



/********************************
CALL TO ACTION
********************************/

.ctaSection{

padding:110px 8%;

}

.ctaCard{

background:linear-gradient(135deg,#556B2F,#708238);

padding:70px;

border-radius:30px;

text-align:center;

color:white;

box-shadow:0 30px 70px rgba(85,107,47,.30);

}

.ctaCard h2{

font-size:48px;

margin-bottom:25px;

color:white;

}

.ctaCard p{

max-width:850px;

margin:auto;

margin-bottom:40px;

font-size:18px;

line-height:1.9;

color:#f3f3f3;

}

.ctaButtons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.ctaCard .primaryBtn{

background:white;

color:#556B2F;

}

.ctaCard .primaryBtn:hover{

background:#f5f5f5;

}

.ctaCard .secondaryBtn{

border:2px solid white;

background:transparent;

color:white;

}

.ctaCard .secondaryBtn:hover{

background:white;

color:#556B2F;

}



/********************************
FOOTER
********************************/

.aboutFooter{

background:#2d3a18;

padding:70px 8%;

text-align:center;

}

.aboutFooter h2{

font-size:36px;

color:white;

margin-bottom:15px;

}

.aboutFooter p{

color:#d8d8d8;

max-width:700px;

margin:auto;

margin-bottom:30px;

}

.footerLinks{

display:flex;

justify-content:center;

gap:35px;

flex-wrap:wrap;

margin-bottom:35px;

}

.footerLinks a{

color:white;

font-size:16px;

transition:.3s;

}

.footerLinks a:hover{

color:#c8d7a4;

}

.copyright{

font-size:14px;

color:#bdbdbd;

}



/********************************
RESPONSIVE
********************************/

@media(max-width:1100px){

.aboutHero,
.aboutSection,
.storySection,
.jointSection,
.whyChoose{

grid-template-columns:1fr;

}

.stats{

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

}

.aboutRight,
.jointCards,
.whyRight{

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

}

.valuesGrid{

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

}

.benefitGrid{

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

}

}



@media(max-width:768px){

section{

padding:70px 25px;

}

.heroContent h1{

font-size:40px;

}

.aboutLeft h2,
.storyContent h2,
.whyLeft h2,
.jointContent h2{

font-size:34px;

}

.valuesSection h2,
.benefitsSection h2{

font-size:34px;

}

.stats,
.aboutRight,
.jointCards,
.benefitGrid,
.valuesGrid,
.whyRight,
.missionVision{

grid-template-columns:1fr;

}

.heroButtons,
.ctaButtons{

flex-direction:column;

}

.primaryBtn,
.secondaryBtn{

width:100%;

}

.ctaCard{

padding:45px 30px;

}

.ctaCard h2{

font-size:36px;

}

.ctaCard p{

font-size:16px;

}

.storyBox{

height:350px;

}

.glassCard{

padding:40px;

}

}