body { background: #61C4E7; background: linear-gradient(180deg,rgba(97, 196, 231, 1) 0%, rgba(50, 188, 131, 1) 39%, rgba(50, 188, 131, 1) 100%); font-family: 'Poppins', Arial, sans-serif; color: white; }
.header { padding-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.header img { margin-bottom: 10px; max-width: 250px; box-shadow: 0 0 35px 10px #fff; border-radius: 100%; }
.header h1, .header p.small{margin: 0;}
.header p.small{font-weight: 600;}
.hero-img { width: 63%; }
.overlay-box { position: absolute; top: -11%; right: 0; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 50px 50px 20px; max-width: 59%; }
.overlay-box p { font-size: 18px; }
.overlay-box span { color: #00ffff; }
.info-box { background:#26f7b3; color: black; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.detail-box .left-box {color: #fc0001;font-weight: 600;}
.detail-box .left-box h2{padding-left: 5px;}
.info-box .detail-box{display: flex;}
.info-box img.bor-10-rd{ border-radius:30PX ; -webkit-border-radius:30PX ; -moz-border-radius:30PX ; -ms-border-radius:30PX ; -o-border-radius:30PX ; }
.info-box .detail-box .imgbox-1{max-width: 245px; height: fit-content;}
.info-box h5 { color: red; font-weight: bold; text-align: center; }
.info-box .detail-box .imgbox-2{ max-width: 150px; height: fit-content; }
.info-box .right-img{text-align: right;}
.info-box .col-6 img.bor-10-rd{width: 100%;}
.right-info-box .col-9{padding: 0;width: 71%;}
.right-info-box .col-3{width: 29%;}
.right-info-box .col-3 img,.right-info-box .col-9 img{width: 100%;}
.right-info-box .col-3 img{height: 100%;}
.planting-section h2 { text-align: center; font-weight: bold; margin-bottom: 30px; }
.planting-section .plant-name { text-align: center; margin-top: 10px; }
.footer-cta { text-align: center; padding: 1rem 2rem 3rem; font-size: 1.5rem; font-weight: bold; }
.watershed-section .container, .plant-section .container{ max-width: 900px; width: 100%; margin: 0 auto; }
.watershed-section .container .water-img{ padding: 10px 0 0; }
.watershed-section .container .water-img img{ width: 100%; }
.watershed-section h5{color: black;}
.planting-section .row{row-gap: 30px;}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1260px; }
}
@media (max-width: 1280px){
  .header img { margin-bottom: 10px; max-width: 180px;}
}
@media (max-width: 1199px){
  .overlay-box{padding: 30px;right: 15px;}
  .overlay-box p { font-size: 16px; }
   .container, .container-lg, .container-md, .container-sm { max-width: 100%; }
 .info-box .detail-box .imgbox-1 { max-width: 190px;} 
.no-mow-section{margin-top: 60px;}
.planting-section .row { row-gap: 0px; }
}
@media (max-width: 991px){
  .overlay-box{ position: relative; width: 100%; max-width: 100%; left: 0; right: 0; top: 0; padding: 20PX;}
  .hero-img{width: 100%;}
  .no-mow-section{margin-top: 0;}
  .no-mow-section .col-md-6{width: 100%;}
  .info-box .detail-box {margin-bottom: 10px; }
  .planting-section h2{margin-bottom: 10px;}
  .header img{max-width: 140px;}
  .plant-section{padding-top: 20px !important;}
  .header{flex-direction: column;gap: 10px;}
  .header p.small{text-align: center;}
}
@media (max-width: 767px){
      .no-mow-section { padding-top: 30px !important; padding-bottom: 10PX !important;}
.info-box .detail-box{ margin-bottom: 10px; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px;}
.info-box .detail-box .imgbox-1{max-width: 250px;}
.info-box{overflow: hidden;}
.plant-section{padding-bottom: 20PX !important;}
.header h1{text-align: center;}
}