:root{

    --green:#00833e;
    --green-dark:#006b32;
    --gray:#666;
    --bg:#f6f7f8;
    --line:#e5e5e5;

}

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

body{

    font-family:
    "Yu Gothic",
    "Hiragino Sans",
    sans-serif;

    background:var(--bg);

    color:#333;

    line-height:1.8;
}

.container{

    width:min(1100px,92%);
    margin:auto;
}

header{

    background:#fff;

    border-bottom:1px solid var(--line);
}

.header-inner{

    height:80px;

    display:flex;

    align-items:center;
}

.logo{

    height:42px;
}

.hero{

    background:linear-gradient(135deg,#00833e,#3ea95e);

    color:#fff;

    text-align:center;

    padding:80px 20px;
}

.hero h1{

    font-size:2.4rem;

    margin-bottom:20px;
}

.hero p{

    max-width:700px;

    margin:auto;

    font-size:1.05rem;
}

.cards{

    margin:70px 0;

    display:grid;

    gap:25px;
}

.card{

    background:#fff;

    border-radius:16px;

    padding:35px;

    display:grid;

    grid-template-columns:80px 1fr 40px;

    gap:25px;

    align-items:center;

    text-decoration:none;

    color:inherit;

    transition:.25s;

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

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

.card:hover{

    transform:translateY(-4px);

    border-color:var(--green);

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

.icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#edf8f0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;
}

.content h2{

    color:var(--green);

    margin-bottom:10px;

    font-size:1.5rem;
}

.content p{

    color:var(--gray);
}

.arrow{

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--green);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

    font-weight:bold;
}

footer{

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

    background:#fff;

    padding:30px 0;

    text-align:center;

    color:#888;
}

@media(max-width:768px){

.hero{

    padding:60px 20px;
}

.hero h1{

    font-size:2rem;
}

.card{

    grid-template-columns:1fr;

    text-align:center;
}

.icon,
.arrow{

    margin:auto;
}

}