*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f5f8f7;
color:#333;
line-height:1.8;
}

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

/* HERO SECTION */

.hero{
background:linear-gradient(135deg,#0f8c63,#0a6e4d);
padding:80px 0;
text-align:center;
color:#fff;
}

.hero h1{
font-size:42px;
font-weight:700;
margin-bottom:15px;
}

.hero p{
max-width:700px;
margin:auto;
font-size:17px;
opacity:.9;
}

/* BLOG LAYOUT */

.blog-wrapper{
display:grid;
grid-template-columns:3fr 1fr;
gap:35px;
padding:60px 0;
}

/* BLOG CONTENT */

.blog-content{
background:#fff;
padding:35px;
border-radius:15px;
box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.featured-image img{
width:100%;
border-radius:12px;
margin-bottom:25px;
}

.blog-title{
font-size:34px;
color:#0a6e4d;
margin-bottom:10px;
}

.blog-meta{
color:#777;
margin-bottom:25px;
font-size:14px;
}

.blog-content h2{
margin-top:30px;
margin-bottom:15px;
color:#0a6e4d;
}

.blog-content p{
margin-bottom:18px;
}

/* SIDEBAR */

.sidebar{
position:sticky;
top:20px;
height:fit-content;
}

.sidebar-card{
background:#fff;
padding:25px;
border-radius:15px;
box-shadow:0 5px 25px rgba(0,0,0,.08);
margin-bottom:25px;
}

.sidebar-card h3{
margin-bottom:15px;
color:#0a6e4d;
}

.sidebar-card ul{
list-style:none;
}

.sidebar-card ul li{
margin-bottom:12px;
}

.sidebar-card ul li a{
text-decoration:none;
color:#444;
transition:.3s;
}

.sidebar-card ul li a:hover{
color:#0f8c63;
}

.demo-btn{
display:block;
text-align:center;
background:#0f8c63;
color:#fff;
padding:14px;
border-radius:8px;
text-decoration:none;
font-weight:600;
margin-top:15px;
}

/* RELATED BLOGS */

.related{
padding-bottom:60px;
}

.related h2{
margin-bottom:25px;
color:#0a6e4d;
}

.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

.blog-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;
}

.blog-card:hover{
transform:translateY(-5px);
}

.blog-card img{
width:100%;
height:200px;
object-fit:cover;
}

.blog-card-content{
padding:20px;
}

.blog-card h3{
font-size:20px;
margin-bottom:10px;
color:#0a6e4d;
}

/* CTA */

.cta{
background:#0f8c63;
padding:60px 20px;
text-align:center;
color:#fff;
margin-top:30px;
}

.cta h2{
font-size:36px;
margin-bottom:15px;
}

.cta a{
display:inline-block;
margin-top:20px;
padding:15px 35px;
background:#fff;
color:#0f8c63;
text-decoration:none;
font-weight:600;
border-radius:8px;
}

/* MOBILE */

@media(max-width:900px){

.blog-wrapper{
grid-template-columns:1fr;
}

.hero h1{
font-size:30px;
}

.blog-title{
font-size:28px;
}

}



.contents {
  position: relative;
  width: 100%;
  height: 100%;
}

/* =========================
   DESKTOP
========================= */

.hero-title {
  position: absolute;
  bottom: 60%;
  left: -13%;
  margin: 0;
  padding: 0;
  text-align: left;

  color: #08590e;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
}

.hero-small {
  font-weight: 400;
  font-size: x-large;
}

.hero-main {
  font-size: 150%;
  font-weight: bolder;
  color: #0a3e17;
}

.hero-description {
  position: absolute;
  bottom: 25%;
  left: -13%;
  margin: 0;
  padding: 0;

  text-align: left;
  color: #08590e !important;
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
}

.hero-description span {
  font-weight: 325;
  font-size: 200%;
  line-height: 150%;
}


/* =========================
   TABLET
   768px - 991px
========================= */

@media (max-width: 991px) {

  .hero-title {
    left: -5%;
    bottom: 58%;
  }

  .hero-small {
    font-size: 28px;
  }

  .hero-main {
    font-size: 40px;
  }

  .hero-description {
    left: -5%;
    bottom: 30%;
  }

  .hero-description span {
    font-size: 160%;
    line-height: 1.5;
  }
}


/* =========================
   MOBILE
   481px - 767px
========================= */

@media (max-width: 767px) {

  .hero-title {
    left: 0;
    bottom: 58%;
    width: 100%;
    text-align: center;
  }

  .hero-small {
    font-size: 20px;
  }

  .hero-main {
    font-size: 32px;
  }

  .hero-description {
    left: 0;
    bottom: 30%;
    width: 100%;
    text-align: center;
  }

  .hero-description span {
    font-size: 140%;
    line-height: 1.5;
  }
}


/* =========================
   SMALL MOBILE
   480px and below
========================= */

@media (max-width: 480px) {

  .hero-title {
    bottom: 60%;
  }

  .hero-small {
    font-size: 20px;
  }

  .hero-main {
    font-size: 28px;
  }

  .hero-description {
    bottom: 25%;
  }

  .hero-description span {
    font-size: 125%;
    line-height: 1.45;
  }
}

@media (max-width: 767px) {

  footer .row {
    text-align: center;
  }

  footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  footer .footer-links li {
    margin: 0 8px;
  }

  /* Copyright */
  footer .copyright {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 15px;
  }

  footer .copyright p {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}