.species-badge{
    display:inline-flex;
    align-items:center;

    padding:10px 22px;
    border-radius:999px;

    background:rgba(255,255,255,.92);

    color:#2d6b3d;
    font-weight:700;

    box-shadow:0 8px 30px rgba(0,0,0,.12);

    margin-bottom:26px;
}

.hero-buttons .btn{
    box-shadow:0 12px 35px rgba(0,0,0,.25);
}




/************************************************
Hero Compare
************************************************/
/* ไทรเกาหลี vs ต้นโมก*/
.compare-hero-saikaolee-vs-tonmok{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        url("../images/greenfencethai/asset/comparison/bg-ไทรเกาหลี-vs-ต้นโมก.webp")
        center center / cover
        no-repeat;

}

/* ไทรเกาหลี vs ไทรอินโด*/
.compare-hero-saikaolee-vs-saiindo{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        url("../images/greenfencethai/asset/comparison/bg-ไทรเกาหลี-vs-ไทรอินโด.webp")
        center center / cover
        no-repeat;

}

/* ต้นโมก vs ชาฮกเกี้ยน*/
.compare-hero-tonmok-vs-chahokkien{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        url("../images/greenfencethai/asset/comparison/bg-ต้นโมก-vs-ชาฮกเกี้ยน.webp")
        center center / cover
        no-repeat;

}

/*ต้นแก้ว VS ต้นโมก*/
.compare-hero-kaew-vs-tonmok{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    background:
        url("../images/greenfencethai/asset/comparison/bg-ต้นแก้ว-vs-ต้นโมก.webp")
        center center / cover
        no-repeat;

}



/* ชาฮกเกี้ยน VS คริสติน่า */
 .compare-hero-chahokkien-vs-christina{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    background:
        url("../images/greenfencethai/asset/comparison/bg-ชาฮกเกี้ยน-vs-ต้นคริสติน่า.webp")
        center center / cover
        no-repeat;

}


/*คริสติน่า VS ต้นโมก*/
.compare-hero-cristina-vs-tonmok{
    position:relative;
    min-height:620px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;

    background:
        url("../images/greenfencethai/asset/comparison/bg-คริสติน่า-vs-ต้นโมก.webp")
        center center / cover
        no-repeat;

}


/***********************************************
Overlay
***********************************************/

.compare-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.78) 0%,
            rgba(255,255,255,.63) 24%,
            rgba(255,255,255,.30) 48%,
            rgba(255,255,255,.06) 72%,
            rgba(255,255,255,0) 100%
        );

}


/***********************************************
Content
***********************************************/

.compare-hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:auto;
    text-align:center;
    padding:90px 0;

}


 

/***********************************************
Badge
***********************************************/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(255,255,255,.82);

    backdrop-filter:blur(10px);

    color:#21493b;

    font-weight:700;

    margin-bottom:30px;

}


/***********************************************
Heading
***********************************************/

.compare-hero h1{

    margin:0;

    color:#21493b;

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.08;

    font-weight:800;

}


.compare-hero h1 span{

    color:#6b8f5b;

    margin:0 14px;

}


/***********************************************
Description
***********************************************/

.compare-hero p{

    margin:30px auto 42px;

    max-width:620px;

    font-size:1.1rem;

    line-height:1.9;

    color:#4e5d56;

}


/***********************************************
Buttons
***********************************************/

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}


/***********************************************
Button
***********************************************/

.hero-buttons .btn{

    min-width:220px;

}


/***********************************************
Tablet
***********************************************/

@media(max-width:991px){

    .compare-hero{

        min-height:520px;

    }

    .compare-hero-content{

        padding:70px 0;

    }

}


/***********************************************
Mobile
***********************************************/

@media(max-width:768px){

    .compare-hero{

        min-height:460px;

        background-position:center;

    }

    .compare-hero h1{

        font-size:2.4rem;

    }

    .compare-hero p{

        font-size:1rem;

        margin:24px auto 34px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

}


/* ==========================================
Feature Card List
========================================== */

.feature-card ul{

    list-style:none;

    padding:0;

    margin:24px 0 0;

}

.feature-card li{
    position:relative;
    padding-left:34px;
    margin-bottom:18px;
    font-size:1.05rem;
    line-height:1.8;
    color:#39453f;
    text-align: left;

}

.feature-card li:last-child{
    margin-bottom:0;
}

.feature-card li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:2px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#eaf7ed;
    color:#2f8b57;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.85rem;
    font-weight:700;
}



/*************************/
/*  ไทรเกาหลี VS ไทรอินโด  */
/*************************/
.compare-hero-saikaolee-vs-saiindo::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(20,32,25,.72) 0%,
            rgba(20,32,25,.45) 35%,
            rgba(20,32,25,.18) 65%,
            rgba(20,32,25,.10) 100%
        );

    z-index:1;
}
.compare-hero-saikaolee-vs-saiindo h1{
    color:#fff;
    font-size:clamp(3rem,6vw,5rem);
    font-weight:800;
    line-height:1.1;

    text-shadow:
        0 3px 18px rgba(0,0,0,.45);
}

.compare-hero-saikaolee-vs-saiindo h1 span{
    color:#ffe16a;
}
.compare-hero-saikaolee-vs-saiindo p{
    color:rgba(255,255,255,.95);
    text-shadow:0 2px 10px rgba(0,0,0,.35);

    max-width:760px;
    margin:28px auto 42px;
    font-size:1.12rem;
    line-height:1.9;
}


/*************************/
/*  ต้นโมก VS ชาฮกเกี้ยน  */
/*************************/

.compare-hero-tonmok-vs-chahokkien::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(20,32,25,.72) 0%,
            rgba(20,32,25,.45) 35%,
            rgba(20,32,25,.18) 65%,
            rgba(20,32,25,.10) 100%
        );

    z-index:1;
}
.compare-hero-tonmok-vs-chahokkien h1{
    color:#fff;
    font-size:clamp(3rem,6vw,5rem);
    font-weight:800;
    line-height:1.1;

    text-shadow:
        0 3px 18px rgba(0,0,0,.45);
}

.compare-hero-tonmok-vs-chahokkien h1 span{
    color:#ffe16a;
}
.compare-hero-tonmok-vs-chahokkien p{
    color:rgba(255,255,255,.95);
    text-shadow:0 2px 10px rgba(0,0,0,.35);

    max-width:760px;
    margin:28px auto 42px;
    font-size:1.12rem;
    line-height:1.9;
}


/*************************/
/* ต้นแก้ว VS ต้นโมก */
/*************************/


.compare-hero-kaew-vs-tonmok::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(20,32,25,.72) 0%,
            rgba(20,32,25,.45) 35%,
            rgba(20,32,25,.18) 65%,
            rgba(20,32,25,.10) 100%
        );

    z-index:1;

}

.compare-hero-kaew-vs-tonmok h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

    line-height:1.1;

    text-shadow:0 3px 18px rgba(0,0,0,.45);

}

.compare-hero-kaew-vs-tonmok h1 span{

    color:#ffe16a;

}

.compare-hero-kaew-vs-tonmok p{

    color:rgba(255,255,255,.95);

    text-shadow:0 2px 10px rgba(0,0,0,.35);

    max-width:760px;

    margin:28px auto 42px;

    font-size:1.12rem;

    line-height:1.9;

}


/*************************/
/* ชาฮกเกี้ยน VS คริสติน่า */
/*************************/

 

.compare-hero-chahokkien-vs-christina::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(20,32,25,.72) 0%,
            rgba(20,32,25,.45) 35%,
            rgba(20,32,25,.18) 65%,
            rgba(20,32,25,.10) 100%
        );

    z-index:1;

}

.compare-hero-chahokkien-vs-christina h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

    line-height:1.1;

    text-shadow:0 3px 18px rgba(0,0,0,.45);

}

.compare-hero-chahokkien-vs-christina h1 span{

    color:#ffe16a;

}

.compare-hero-chahokkien-vs-christina p{

    color:rgba(255,255,255,.95);

    text-shadow:0 2px 10px rgba(0,0,0,.35);

    max-width:760px;

    margin:28px auto 42px;

    font-size:1.12rem;

    line-height:1.9;

}


/*************************/
/* คริสติน่า VS ต้นโมก */
/*************************/

 

.compare-hero-cristina-vs-tonmok::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to right,
            rgba(20,32,25,.72) 0%,
            rgba(20,32,25,.45) 35%,
            rgba(20,32,25,.18) 65%,
            rgba(20,32,25,.10) 100%
        );

    z-index:1;

}

.compare-hero-cristina-vs-tonmok h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

    line-height:1.1;

    text-shadow:0 3px 18px rgba(0,0,0,.45);

}

.compare-hero-cristina-vs-tonmok h1 span{

    color:#ffe16a;

}

.compare-hero-cristina-vs-tonmok p{

    color:rgba(255,255,255,.95);

    text-shadow:0 2px 10px rgba(0,0,0,.35);

    max-width:760px;

    margin:28px auto 42px;

    font-size:1.12rem;

    line-height:1.9;

}