.species-hero{
  position:relative;
  /* min-height:820px; */
/*   background:
    linear-gradient(
      90deg,
      rgba(247,244,239,.96) 0%,
      rgba(247,244,239,.84) 24%,
      rgba(247,244,239,.28) 46%,
      rgba(247,244,239,0) 64%
    ),
    url("../images/greenfencethai/asset/ไทรเกาหลี/bg-ไทรเกาหลี.jpg"); */


/*   background:linear-gradient(
    261deg, 
    rgba(247, 244, 239, .96) 0%, 
    rgba(247, 244, 239, .84) 5%, 
    rgba(247, 244, 239, .58) 46%, 
    rgba(247, 244, 239, 0.8) 100%), 
    url(../images/greenfencethai/asset/ไทรเกาหลี/bg-ไทรเกาหลี.jpg); */


  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}

 .species-hero{
  position:relative;
 
  background:
    linear-gradient(
      90deg,
      rgba(247,244,239,.96) 0%,
      rgba(247,244,239,.84) 24%,
      rgba(247,244,239,.28) 46%,
      rgba(247,244,239,0) 64%
    ),
     url(../images/greenfencethai/asset/คำนวณจำนวนต้นไม้รั้ว/bg-คำนวณจำนวนต้นไม้รั้ว.webp); ;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}


.bg-text-hero {
    position: relative;
    /* left: 40px; */
    /* bottom: 40px; */
 /*    top: 80px;
    z-index: 3;
    width: min(900px, calc(100% - 80px));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); */
    background: rgba(255, 255, 255, .7);
    background: rgba(230, 255, 231, .5);
    
    border-radius: 18px;
/*     overflow: hidden; */
    /* box-shadow: 0 14px 36px rgba(0, 0, 0, .08); */
    backdrop-filter: blur(10px);
    padding:20px;
    margin-top: 50px;
}

.species-hero-grid {
    padding-left: 20px;
    padding-right: 20px;
}
 

#spacing{
  scroll-margin-top:150px;
}
 

.definition-box {
  max-width: 900px;
  margin: auto;
}
.note-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.tip-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}
.quick-answer-box{
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.feature-grid-3col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
 







/**************/

.highlight{

    animation:
        resultGlow .9s ease;
}

@keyframes resultGlow{

    0%{

        transform:scale(.98);

        box-shadow:
            0 0 0 rgba(63,107,79,0);

    }

    50%{

        transform:scale(1.01);

        box-shadow:
            0 0 35px rgba(63,107,79,.18);

    }

    100%{

        transform:scale(1);

        box-shadow:none;

    }

}


/* ==========================================
   RELATED CONTENT
========================================== */

.related-content{

    padding:90px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faf8 100%
        );
}

.related-content .container{

    max-width:1100px;
}

.related-content .section-title{

    text-align:center;

    margin-bottom:35px;
}

.related-content .section-title span{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#eef5ef;

    color:#21493b;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:14px;
}

.related-content .section-title h2{

    margin:0 0 12px;

    font-size:2rem;

    color:#17392d;
}

.related-content .section-title p{

    max-width:700px;

    margin:0 auto;

    color:#66756f;

    line-height:1.8;
}


/* Grid */

.related-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin-top:35px;
}


/* Card */

.related-links a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 22px;

    background:#fff;

    border:1px solid #dde6dc;

    border-radius:18px;

    color:#17392d;

    font-weight:700;

    transition:.3s;

    box-shadow:
        0 6px 20px rgba(0,0,0,.04);

}

.related-links a::before{

    content:"🌿";

    font-size:20px;
}

.related-links a:hover{

    transform:translateY(-4px);

    border-color:#7aa06e;

    box-shadow:
        0 18px 35px rgba(33,73,59,.12);

    background:#f8fcf7;

    color:#2f6c48;
}


/* Mobile */

@media(max-width:768px){

    .related-links{

        display:grid;

        grid-template-columns:1fr;

    }

    .related-links a{

        width:100%;

    }

}