/* ===========================================
   KRISHIWALA - MAIN STYLESHEET
   Author : Raj Raushan Singh
=========================================== */

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

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

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

body{
    font-family:'Poppins',sans-serif;
    background:#f8fff7;
    color:#333;
    line-height:1.7;
}

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

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ======================
   LINKS
====================== */

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

/* ======================
   HEADER
====================== */

header{

    width:100%;
    background:#2E7D32;
    color:#fff;
    position:sticky;
    top:0;
    z-index:999;

    box-shadow:0 3px 12px rgba(0,0,0,.1);

}

header .container{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;

}

.logo h2{

    font-size:30px;
    font-weight:700;
    color:white;

}

nav ul{

    display:flex;
    gap:30px;

}

nav ul li a{

    color:white;
    font-size:16px;
    transition:.3s;

}

nav ul li a:hover{

    color:#FFD54F;

}

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

.hero{

    height:90vh;

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

    text-align:center;

    color:white;

    background:
        radial-gradient(circle at 20% 20%, rgba(255, 213, 79, .22), transparent 30%),
        radial-gradient(circle at 80% 30%, rgba(129, 199, 132, .28), transparent 35%),
        linear-gradient(135deg, #1b5e20 0%, #2e7d32 48%, #66a937 100%);

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

}

.hero-content{

    width:min(800px, 90%);

}

.hero h1{

    font-size:60px;
    margin-bottom:20px;

}

.hero p{

    font-size:20px;
    margin-bottom:40px;

}

.btn{

    display:inline-block;
    padding:15px 35px;

    background:#4CAF50;

    color:white;

    border-radius:40px;

    transition:.4s;

    font-weight:600;

}

.btn:hover{

    background:#1B5E20;
    transform:translateY(-4px);

}

/* ======================
   FEATURES
====================== */

.features{

    padding:90px 0;

}

.features .container{

    display:grid;

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

    gap:30px;

}

.card{

    background:white;

    padding:35px;

    border-radius:15px;

    text-align:center;

    transition:.4s;

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

}

.card:hover{

    transform:translateY(-10px);

}

.card h3{

    color:#2E7D32;

    margin-bottom:15px;

    font-size:24px;

}

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

.about{

    background:#E8F5E9;

    padding:90px 0;

    text-align:center;

}

.about h2{

    font-size:40px;

    color:#2E7D32;

    margin-bottom:20px;

}

.about p{

    max-width:900px;

    margin:auto;

    font-size:18px;

}

/* ======================
   LATEST ARTICLES
====================== */

.latest{

    padding:90px 0;

}

.latest h2{

    text-align:center;

    margin-bottom:50px;

    color:#2E7D32;

    font-size:40px;

}

.articles{

    display:grid;

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

    gap:30px;

}

.post{

    background:white;

    padding:30px;

    border-radius:15px;

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

    transition:.3s;

}

.post:hover{

    transform:translateY(-8px);

}

.post h3{

    color:#388E3C;

    margin-bottom:15px;

}

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

footer{

    background:#1B5E20;

    color:white;

    text-align:center;

    padding:50px 20px;

}

footer h2{

    margin-bottom:15px;

}

footer p{

    margin-top:10px;

}

/* ======================
   SCROLLBAR
====================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#43A047;

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#ddd;

}

/* ======================
   RESPONSIVE
====================== */

@media(max-width:992px){

nav ul{

    gap:18px;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:18px;

}

}

@media(max-width:768px){

header .container{

    flex-direction:column;

    gap:15px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

}

.hero{

    height:75vh;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

.about h2,
.latest h2{

    font-size:30px;

}

}

@media(max-width:480px){

.logo h2{

    font-size:24px;

}

.hero h1{

    font-size:28px;

}

.hero p{

    font-size:15px;

}

.btn{

    padding:12px 25px;

}

}