*{
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;
color:inherit;
}

section{
padding:90px 8%;
}

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

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

.center{
text-align:center;
margin-bottom:50px;
font-size:42px;
}

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

.hero{

display:grid;

grid-template-columns:1.3fr 1fr;

gap:70px;

align-items:center;

background:#fff;

min-height:85vh;

}

.heroText span{

display:inline-block;

color:#556B2F;

font-size:13px;

font-weight:bold;

letter-spacing:2px;

margin-bottom:15px;

text-transform:uppercase;

}

.heroText h1{

font-size:60px;

margin-bottom:25px;

line-height:1.1;

}

.heroText p{

font-size:18px;

max-width:700px;

}

.heroCard{

background:#fff;

padding:55px;

border-radius:25px;

text-align:center;

border-top:6px solid #556B2F;

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

}

.heroCard i{

font-size:70px;

color:#556B2F;

margin-bottom:25px;

}

.heroCard h2{

margin-bottom:18px;

font-size:30px;

}

/********************************
GENERAL CARD
********************************/

.card{

background:#fff;

padding:45px;

border-radius:22px;

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

}

.card h2{

margin-bottom:25px;

font-size:34px;

}

.card p{

margin-bottom:20px;

}

/********************************
TABLE OF CONTENTS
********************************/

.toc{

display:grid;

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

gap:20px;

}

.toc div{

background:#fff;

padding:22px 28px;

border-radius:15px;

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

transition:.3s;

font-weight:600;

}

.toc div:hover{

transform:translateY(-6px);

}

.toc i{

color:#556B2F;

margin-right:12px;

}

/********************************
GRID
********************************/

.grid{

display:grid;

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

gap:30px;

}

/********************************
INFO CARDS
********************************/

.infoCard{

background:#fff;

padding:40px;

border-radius:20px;

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

transition:.35s;

border-bottom:4px solid #556B2F;

}

.infoCard:hover{

transform:translateY(-10px);

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

}

.infoCard i{

font-size:48px;

color:#556B2F;

margin-bottom:20px;

}

.infoCard h3{

font-size:24px;

margin-bottom:15px;

}

.infoCard p{

font-size:15px;

line-height:1.8;

}

/********************************
SECTION HEADINGS
********************************/

.section h2{

font-size:42px;

margin-bottom:40px;

}

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

.footer{

background:#2d3a18;

padding:70px 8%;

text-align:center;

margin-top:80px;

}

.footer h2{

color:white;

font-size:36px;

margin-bottom:20px;

}

.footer p{

color:#d5d5d5;

max-width:750px;

margin:auto;

margin-bottom:20px;

}

/********************************
SCROLLBAR
********************************/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:#556B2F;

border-radius:10px;

}

::-webkit-scrollbar-track{

background:#eef2e9;

}

/********************************
ANIMATIONS
********************************/

.card,
.infoCard,
.heroCard,
.toc div{

transition:all .35s ease;

}

.card:hover{

transform:translateY(-6px);

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

}

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

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

}

.grid{

grid-template-columns:1fr 1fr;

}

.toc{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

section{

padding:70px 25px;

}

.hero{

text-align:center;

}

.heroText h1{

font-size:42px;

}

.heroText p{

font-size:16px;

}

.heroCard{

padding:40px;

}

.heroCard i{

font-size:60px;

}

.grid{

grid-template-columns:1fr;

}

.section h2{

font-size:34px;

}

.card{

padding:30px;

}

.infoCard{

padding:30px;

}

.center{

font-size:34px;

}

.footer{

padding:50px 25px;

}

.footer h2{font-size:30px;

}

}