body{
    font-family: "Segoe UI",sans-serif;
    color:#444;
    line-height:1.7;
}

.navbar{
    background:#0f5132;
    transition:.3s;
}

.navbar-brand{
    font-size:1.4rem;
}

.nav-link{
    color:#fff !important;
    margin-left:15px;
    margin-right:15px;
    transition:.3s;
}

.nav-link:hover{
    color:#ffc107 !important;
}

.hero{

    background:linear-gradient(rgba(15,81,50,.88),rgba(15,81,50,.88)),
    url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80");

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

    min-height:100vh;

    display:flex;

    align-items:center;

    color:white;

}

.hero h1{
    font-weight:700;
}

.hero-card{

    background:white;

    color:#333;

    padding:40px;

    border-radius:20px;

    text-align:center;

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

}

.icon-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#198754;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    font-size:40px;

    margin-bottom:20px;

}

.section{

    padding:90px 0;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-weight:700;

    color:#0f5132;

}

.news-card{

    border:none;

    border-radius:15px;

    overflow:hidden;

    transition:.3s;

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

}

.news-card:hover{

    transform:translateY(-10px);

}

.news-card img{

    height:220px;

    object-fit:cover;

}

.info-box{

    background:white;

    padding:35px;

    border-radius:15px;

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

    height:100%;

}

.product{

    background:white;

    border-radius:15px;

    overflow:hidden;

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

    transition:.3s;

    text-align:center;

}

.product:hover{

    transform:translateY(-8px);

}

.product img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.product h5{

    padding:20px;

}

footer{

    background:#0f5132;

    color:white;

    text-align:center;

    padding:30px;

}

@media(max-width:768px){

.hero{

text-align:center;

padding:120px 0;

}

.hero-card{

margin-top:40px;

}

.section{

padding:70px 0;

}

}