:root{
  --accent: #cfead6; /* light green pastel */
  --accent-2: #eaf7ee;
  --brand: #1b6b3a; /* darker green for headings */
  --muted: #6b6b6b;
  --card-bg: rgba(255,255,255,0.8);
}

html,body{
  height:100%;
  font-family: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--accent-2) 0%, #ffffff 100%);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
  font-size: 20px;
}

h1{
  font-size: 40px
}
h2{
  font-size: 36px
}
h3{
  font-size: 30px
}
h4{
  font-size: 26px
}
h5{
  font-size: 24px
}
h6{
  font-size: 22px
}

a{
  text-decoration: none;
}

header{
  background: #80cbae;
}
header img{
  max-width: 200px;
}
header h1{
  white-space: nowrap;
  font-family: 'Roboto Condensed';
  text-transform: uppercase;
  font-size: 40px
}
header a{
  font-size: 20px;
  color: #fff
}

.hero{
  background: #ecf8ef
}
.productbox1{
  background: #f4eee0
}
.sec3{
  background: #ecf8ef
}
.bg1{
  background: #282f39
}
.bg2{
  background: #80cbae
}

.list1{padding-left: 25px;}
.list1 li{
  font-size: 18px;
}
.list1 li+li{
  margin-top: 8px;
}
.list2{
  margin: 0;
  padding: 0
}
.list2 li{
  display: block;
  font-size: 20px;
}
.list2 li+li{
  margin-top: 15px;
}

footer{font-size: 13px;}

.fs-18{
  font-size: 18px;
}
.fs-20{
  font-size: 20px;
}
.fs-22{
  font-size: 22px;
}
.fs-24{
  font-size: 24px;
}
.bold{
  font-weight: bold
}
.text-teal{
  color: #80cbae!important
}

.word-break{word-break: break-all}


@media screen and (max-width: 1366px){
  .list2 li{font-size: 18px}
  .list1 li{font-size: 17px}
}


@media screen and (max-width: 860px){
  header{
    padding-bottom: 20px
  }
}

@media screen and (max-width: 600px){
  header{
    padding: 20px 0
  }
  .logo-wraper{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
  }
  h1{
    font-size: 30px
  }
  h2{
    font-size: 28px
  }
  h3{
    font-size: 24px
  }
  h4{
    font-size: 24px
  }
  h5{
    font-size: 22px
  }
  h6{
    font-size: 20px
  }
}

@media screen and (max-width: 420px){
  header img{max-width: 150px}
  header h1{font-size: 36px}
  .fs-20.word-break{font-size: 18px}
}