/* =========================================
   Base
========================================= */

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

:root {

    --main-color: #3d6b3d;
    --accent-color: #88b04b;
    --background: #faf9f5;
    --text: #333;
    --light: #ffffff;
    --border: #e5e5e5;

}

body {

    font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
    background: var(--background);
    color: var(--text);
    line-height: 1.8;

}

a {

    color: inherit;
    text-decoration: none;

}

img {

    max-width: 100%;

}


/* =========================================
   Layout
========================================= */

.container{

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

}

section{

    padding:70px 0;

}

h1{

    font-size:3rem;
    margin-bottom:20px;

}

h2{

    font-size:2rem;
    color:var(--main-color);
    margin-bottom:30px;

}

h3{

    margin-bottom:15px;

}

p{

    margin-bottom:20px;

}


/* =========================================
   Header
========================================= */

header{

    background:white;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:100;

}

header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:20px 0;

}

.site-title h1{

    font-size:1.6rem;
    margin-bottom:5px;

}

.site-en{

    display:block;
    color:var(--main-color);
    font-size:.85rem;
    letter-spacing:2px;
    font-weight:bold;

}

.site-title p{

    color:#777;
    font-size:.9rem;
    margin:0;

}


/* =========================================
   Navigation
========================================= */

nav ul{

    display:flex;
    list-style:none;
    gap:25px;

}

nav a{

    font-weight:bold;
    transition:.3s;

}

nav a:hover{

    color:var(--main-color);

}


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

.hero{

    background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.75)),
               url("../img/top.jpg");

    background-size:cover;
    background-position:center;

    min-height:70vh;

    display:flex;
    align-items:center;

}

.hero-text{

    width:min(900px,90%);
    margin:auto;

}

.hero-subtitle{

    color:var(--main-color);
    letter-spacing:3px;
    font-weight:bold;
    margin-bottom:10px;

}

.hero-copy{

    font-size:2rem;
    color:var(--main-color);
    margin:25px 0;

}

.hero-message{

    font-size:1.15rem;
    max-width:700px;

}


/* =========================================
 Cards
========================================= */

.card-grid{

    display:grid;

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

    gap:30px;

}

.card{

    background:white;

    padding:30px;

    border-radius:15px;

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

    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

}

.card h3{

    color:var(--main-color);

}


/* =========================================
 Footer
========================================= */

footer{

    background:#2f4630;

    color:white;

    text-align:center;

    padding:40px 20px;

}


/* =========================================
 Smartphone
========================================= */

@media (max-width:768px){

header .container{

    flex-direction:column;

    align-items:flex-start;

}

nav{

    width:100%;

    margin-top:20px;

}

nav ul{

    flex-wrap:wrap;

    gap:15px;

}

h1{

    font-size:2.2rem;

}

.hero{

    min-height:55vh;

}

.hero-copy{

    font-size:1.5rem;

}

}