/*==================================================
GreenFenceThai
Part 1B
Header + Hero
==================================================*/


/*==============================
ROOT
==============================*/

:root{

    --primary:#166534;
    --primary-dark:#14532d;
    --primary-light:#1d7d42;

    --secondary:#4CAF50;

    --text:#1d1d1d;
    --text-light:#666;

    --bg:#ffffff;
    --bg-soft:#f7faf7;

    --border:#e6ece6;

    --radius:18px;

    --shadow-sm:
    0 6px 18px rgba(0,0,0,.05);

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

    --container:1280px;

}


/*==============================
RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Noto Sans Thai',sans-serif;

    color:var(--text);

    background:#fff;

    line-height:1.7;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

.container{

    width:min(100% - 40px,var(--container));

    margin:auto;

}


/*==============================
BUTTON
==============================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:52px;

    padding:0 28px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.btn-outline{

    border:1px solid var(--primary);

    color:var(--primary);

    background:#fff;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


/*==============================
HEADER
==============================*/

.site-header{

    position:sticky;

    top:0;

    z-index:999;

    background:#fff;

    box-shadow:

    0 1px 12px rgba(0,0,0,.05);

}

.header-inner{

    height:88px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

/* Logo */

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo img{

    width:58px;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text strong{

    font-size:1.2rem;

    color:var(--primary);

}

.logo-text span{

    color:#666;

    font-size:.85rem;

}

/* Nav */

.main-nav{

    flex:1;

    display:flex;

    justify-content:center;

}

.main-nav ul{

    display:flex;

    gap:34px;

}

.main-nav a{

    font-weight:500;

    transition:.25s;

}

.main-nav a:hover{

    color:var(--primary);

}

/* CTA */

.header-action{

    display:flex;

}

.mobile-menu{

    display:none;

    border:none;

    background:none;

    font-size:30px;

    cursor:pointer;

}


/*==============================
HERO
==============================*/
/* 
.hero{

    position:relative;

    overflow:hidden;

   

    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/background-hero.jpg");

} */

 

.hero-grid{
    display:grid;
    grid-template-columns:   1fr 1fr;
    gap:60px;
    align-items:center;
}
@media (max-width:768px){
    .hero-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .hero-image{
        height:340px;
        border-radius:20px;
        overflow:hidden;
    }

}




/* Left */

.hero-content{
    position:relative;
    z-index:2;
    /* padding-top: 70px;
    padding-bottom: 70px; */
    padding: 110px 0 0 40px;

}
       
@media (max-width: 1200px) {
    .hero-content {
        padding: 84px 0 20px;
        max-width: none;
    }
}

.hero-label{
/* 
    display:inline-block;
    color:var(--primary);
    font-weight:700;
    margin-bottom:18px;
    letter-spacing:.5px; */

    display:inline-flex;
    align-items:center;

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

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

    color:#ffffff;
    font-weight:700;

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

    margin-bottom:26px;
}



.hero h1{

    font-size:clamp(2.5rem,5vw,4.5rem);

    line-height:1.08;

    font-weight:800;

    margin-bottom:22px;

}

.hero h1 span{

    display:block;

    color:var(--primary);

    margin-top:8px;

}

.hero p{

    color:#555;

    font-size:1.1rem;

    max-width:560px;

    margin-bottom:42px;

}


/* Feature */

.hero-features{

    display:flex;

    gap:28px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

}

.feature-icon{

    width:54px;

    height:54px;

    border-radius:50%;
/* 
    background:#eef8f1; */

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.feature-item strong{

    display:block;

    font-size:.98rem;

}

.feature-item span{

    font-size:.84rem;

    color:#666;

}

.hero-buttons{

    display:flex;

    gap:18px;

}


/*==============================
RIGHT
==============================*/

.hero-image{
    position:relative;
}
.hero-image{
    position:relative;
    height:100%;
    overflow:hidden;
    display:flex;
    align-items:stretch;
}

/* .hero-shape{

    position:absolute;

    inset:40px;

    border-radius:40px;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.95),

    rgba(240,250,242,.7));

    z-index:0;

}
 */

.hero-shape{

    position:absolute;

    left:-260px;

    top:-8%;

    width:420px;

    height:118%;

    z-index:3;

    border-radius:50%;

    background:#fff;

}
@media (max-width:1100px){
    .hero-shape{
        display:none;
    }
}



/* .hero-image img{

    position:relative;

    z-index:2;

    border-radius:28px;

    box-shadow:var(--shadow);

}
 */
.hero-image img{

    position:relative;

    z-index:1;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

       object-fit: cover;

    object-position: center center;

}


/*==============================
RESPONSIVE
==============================*/

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-content{

order:2;

}

.hero-image{

order:1;

/* max-width:720px; */

margin:auto;

}

.main-nav{

display:none;

position:absolute;

top:88px;

left:0;

right:0;

background:#fff;

padding:25px;

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

}

.main-nav.active{

display:block;

}

.main-nav ul{

display:flex;

flex-direction:column;

gap:18px;

}

.mobile-menu{

display:block;

}

}


@media(max-width:768px){

.header-inner{

height:72px;

}

.logo img{

width:46px;

}

.hero{
    padding:50px 0;
}

.hero h1{
    font-size:2.6rem;
}

.hero-buttons{
    flex-direction:column;
}

.hero-features{
    flex-direction:column;
    gap:18px;
}

.btn{

width:100%;

}

}


@media(max-width:520px){

.container{

width:min(100% - 24px,1280px);

}

.hero h1{

font-size:2.15rem;

}

.hero p{

font-size:1rem;

}

.logo-text span{

display:none;

}

.hero-image img{

border-radius:20px;

}

}



/*==================================================
PART 2B-1
POPULAR TREES
==================================================*/


/*=========================================
POPULAR TREES
=========================================*/

.popular-trees{

    padding:100px 0;

    background:#ffffff;

}

.tree-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}


/*=========================================
TREE CARD
=========================================*/

.tree-card{

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.tree-card:hover{

    transform:translateY(-10px);

    border-color:rgba(22,101,52,.18);

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);

}


/*=========================================
IMAGE
=========================================*/

.tree-image{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/10;

    background:#eef8f1;

}

.tree-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .5s;

}

.tree-card:hover .tree-image img{

    transform:scale(1.08);

}


/*=========================================
BADGE
=========================================*/

.tree-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:var(--primary);

    color:#fff;

    padding:8px 18px;

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

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

}

.badge-green{

    background:#3aa856;

}


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

.tree-content{

    padding:32px;

}

.tree-content h3{

    font-size:2rem;

    margin-bottom:10px;

    color:var(--primary);

}


/*=========================================
RATING
=========================================*/

.tree-rating{

    color:#f7b500;

    font-size:1rem;

    letter-spacing:2px;

    margin-bottom:18px;

}

.tree-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:24px;

}


/*=========================================
FEATURE LIST
=========================================*/

.tree-feature{

    display:grid;

    gap:12px;

    margin-bottom:28px;

}

.tree-feature li{

    display:flex;

    align-items:center;

    gap:10px;

    color:#333;

    font-size:.96rem;

}


/*=========================================
FOOTER
=========================================*/

.tree-footer{

    display:flex;

    justify-content:flex-start;

}

.tree-footer .btn{

    min-width:180px;

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

    .tree-grid{

        grid-template-columns:1fr;

        gap:32px;

    }

}

@media(max-width:768px){

    .popular-trees{

        padding:70px 0;

    }

    .tree-content{

        padding:24px;

    }

    .tree-content h3{

        font-size:1.7rem;

    }

}

@media(max-width:480px){

    .tree-content{

        padding:20px;

    }

    .tree-content h3{

        font-size:1.5rem;

    }

    .tree-footer .btn{

        width:100%;

    }

}

/*==================================================
PART 2B-2
WHY CHOOSE + USAGE
==================================================*/


/*=========================================
WHY SECTION
=========================================*/

.why-section{

    padding:100px 0;

    background:#f8fcf8;

}

.why-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:24px;

}


/*=========================================
WHY CARD
=========================================*/

.why-card{

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:24px;

    padding:36px 28px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:rgba(22,101,52,.18);

    box-shadow:
        0 20px 45px rgba(0,0,0,.10);

}

.why-icon{

    width:72px;

    height:72px;

    margin:0 auto 24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef8f1;

    font-size:32px;

    transition:.35s;

}

.why-card:hover .why-icon{

    transform:rotate(8deg) scale(1.08);

    background:var(--primary);

    color:#fff;

}

.why-card h3{

    font-size:1.2rem;

    color:var(--primary);

    margin-bottom:14px;

}

.why-card p{

    color:#666;

    line-height:1.8;

    font-size:.95rem;

}



/*=========================================
USAGE SECTION
=========================================*/

.usage-section{

    padding:100px 0;

    background:#ffffff;

}

.usage-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


/*=========================================
USAGE CARD
=========================================*/

.usage-card{

    overflow:hidden;

    border-radius:26px;

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s,
        box-shadow .35s;

}

.usage-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 24px 50px rgba(0,0,0,.10);

}

.usage-card img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    transition:transform .45s;

}

.usage-card:hover img{

    transform:scale(1.08);

}

.usage-body{

    padding:24px;

    display:flex;

    align-items:center;

    gap:18px;

}

.usage-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#eef8f1;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

    transition:.35s;

}

.usage-card:hover .usage-icon{

    background:var(--primary);

    color:#fff;

}

.usage-body h3{

    font-size:1.2rem;

    color:var(--text);

    line-height:1.4;

}



/*=========================================
SECTION SPACING
=========================================*/

.popular-trees+.why-section{

    border-top:1px solid #edf3ed;

}

.why-section+.usage-section{

    border-top:1px solid #edf3ed;

}



/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

    .why-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:992px){

    .usage-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .why-section,

    .usage-section{

        padding:70px 0;

    }

    .why-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;

    }

    .usage-grid{

        grid-template-columns:1fr;

        gap:24px;

    }

    .why-card{

        padding:28px 20px;

    }

    .why-icon{

        width:64px;

        height:64px;

        font-size:28px;

    }

    .usage-body{

        padding:20px;

    }

}

@media(max-width:480px){

    .why-grid{

        grid-template-columns:1fr;

    }

    .why-card{

        border-radius:20px;

    }

    .usage-card{

        border-radius:20px;

    }

    .usage-body{

        gap:14px;

    }

    .usage-icon{

        width:52px;

        height:52px;

        font-size:20px;

    }

    .usage-body h3{

        font-size:1.05rem;

    }

}


/*==================================================
PART 3B-1A
Comparison + Delivery
==================================================*/


/*=========================================
SECTION HEADING
=========================================*/

.section-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-subtitle{

    display:inline-block;

    margin-bottom:14px;

    color:var(--primary);

    font-weight:700;

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:1px;

}

.section-heading h2{

    font-size:clamp(2rem,4vw,3rem);

    line-height:1.2;

    margin-bottom:18px;

    color:var(--text);

}

.section-heading p{

    color:#666;

    font-size:1.05rem;

}



/*=========================================
COMPARISON
=========================================*/

.comparison-section{

    padding:100px 0;

    background:#fff;

}

/* .comparison-table{

    overflow:auto;

    border-radius:24px;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

}
 */
.compare-head{

    display:grid;

    grid-template-columns:

    2fr
    1fr
    1fr;

    background:var(--primary);

    color:#fff;

    font-weight:700;

}

.compare-head div{

    padding:22px;

    text-align:center;

}

.compare-head div:first-child{

    text-align:left;

}

.compare-row{

    display:grid;

    grid-template-columns:

    2fr
    1fr
    1fr;

    border-top:1px solid var(--border);

    transition:.25s;

    background:#fff;

}

.compare-row:hover{

    background:#f6fbf7;

}

.compare-row div{

    padding:20px 22px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.compare-row div:first-child{

    justify-content:flex-start;

    font-weight:600;

}

.compare-row:nth-child(even){

    background:#fbfdfb;

}



/*=========================================
DELIVERY
=========================================*/
/*=========================================
DELIVERY SECTION
=========================================*/

.delivery-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

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

}

.delivery-section::before{

    content:"";

    position:absolute;

    top:-180px;
    right:-120px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(22,101,52,.08),
            transparent 72%
        );

}

.delivery-grid{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:80px;

    align-items:center;

}

/*========================*/

.delivery-content{

    max-width:650px;

}

.delivery-content h2{

    font-size:clamp(2.3rem,4vw,3.3rem);

    line-height:1.2;

    margin:18px 0 24px;

    color:#17392d;

}

.delivery-content p{

    font-size:1.08rem;

    line-height:1.9;

    color:#64726d;

    margin-bottom:36px;

}

/*========================*/

.delivery-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px 28px;

    margin:0 0 42px;

    padding:0;

}

.delivery-list li{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1rem;

    font-weight:600;

    color:#234237;

}

.delivery-list li::before{

    content:"✓";

    width:28px;
    height:28px;

    border-radius:50%;

    background:#eaf6ec;

    color:#166534;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:.9rem;

    font-weight:700;

}

/*========================*/

.delivery-map{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.delivery-map::before{

    content:"";

    position:absolute;

    inset:35px;

    border-radius:36px;

    background:
        linear-gradient(
            135deg,
            rgba(22,101,52,.05),
            rgba(22,101,52,0)
        );

}

.delivery-map img{

    position:relative;

    width:100%;

    max-width:460px;

    transition:.45s;

}

.delivery-map:hover img{

    transform:scale(1.04);

}

/*========================*/

.delivery-content .btn{

    min-width:240px;

}

/*========================*/

@media(max-width:1100px){

.delivery-grid{

grid-template-columns:1fr;

gap:60px;

}

.delivery-content{

max-width:100%;

text-align:center;

}

.delivery-list{

grid-template-columns:repeat(2,1fr);

}

.delivery-content .btn{

margin:auto;

}

}

@media(max-width:768px){

.delivery-section{

padding:80px 0;

}

.delivery-list{

grid-template-columns:1fr;

gap:14px;

}

.delivery-content h2{

font-size:2rem;

}

.delivery-map{

order:-1;

}

.delivery-map img{

max-width:320px;

}

}

@media(max-width:480px){

.delivery-content h2{

font-size:1.8rem;

}

.delivery-content p{

font-size:1rem;

}

.delivery-content .btn{

width:100%;

}

}

/*==================================================
PART 3B-1B
FAQ
==================================================*/


/*=========================================
FAQ
=========================================*/

.faq-section{

    padding:100px 0;

    background:#ffffff;

}

.faq-list{

    max-width:900px;

    margin:0 auto;

    display:grid;

    gap:20px;

}


/*-----------------------------------------
FAQ CARD
-----------------------------------------*/

.faq-item{

    background:#fff;

    border:1px solid var(--border);

    border-radius:20px;

    padding:28px 30px;

    box-shadow:var(--shadow-sm);

    transition:
    transform .3s,
    box-shadow .3s,
    border-color .3s;

}

.faq-item:hover{

    transform:translateY(-5px);

    border-color:rgba(22,101,52,.25);

    box-shadow:

    0 18px 40px rgba(0,0,0,.08);

}


/*-----------------------------------------
QUESTION
-----------------------------------------*/

.faq-item h3{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:14px;

    font-size:1.2rem;

    color:var(--primary);

    line-height:1.4;

}

.faq-item h3::before{

    content:"?";

    width:38px;

    height:38px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-weight:700;

}


/*-----------------------------------------
ANSWER
-----------------------------------------*/

.faq-item p{

    color:#666;

    line-height:1.9;

    padding-left:52px;

}


/*-----------------------------------------
GRID
-----------------------------------------*/

.faq-grid{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:24px;

}


/*-----------------------------------------
OPTIONAL ACCORDION STYLE
-----------------------------------------*/

.faq-item.active{

    border-color:var(--primary);

}

.faq-item.active h3{

    color:var(--primary-dark);

}

.faq-item.active h3::before{

    content:"−";

    font-size:22px;

}


/*-----------------------------------------
HOVER
-----------------------------------------*/

.faq-item:hover h3{

    color:var(--primary-dark);

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

    .faq-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .faq-section{

        padding:70px 0;

    }

    .faq-item{

        padding:22px;

    }

    .faq-item h3{

        font-size:1.08rem;

        gap:12px;

    }

    .faq-item h3::before{

        width:34px;

        height:34px;

        font-size:15px;

    }

    .faq-item p{

        padding-left:46px;

        font-size:.95rem;

    }

}

@media(max-width:480px){

    .faq-item{

        padding:18px;

        border-radius:16px;

    }

    .faq-item h3{

        font-size:1rem;

        margin-bottom:10px;

    }

    .faq-item p{

        padding-left:0;

        margin-top:12px;

        line-height:1.8;

    }

    .faq-item h3::before{

        width:30px;

        height:30px;

        font-size:14px;

    }

}

/*==================================================
PART 3B-2
CTA + FOOTER
==================================================*/


/*=========================================
CTA
=========================================*/

.cta-section{

    padding:100px 0;

    background:#fff;

}

.cta-box{

    position:relative;

    overflow:hidden;

    padding:80px;

    border-radius:32px;

    text-align:center;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        #2e7d32
    );

    box-shadow:
    0 25px 60px rgba(22,101,52,.18);

}

.cta-box::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

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

    top:-180px;

    right:-120px;

}

.cta-box::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

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

    bottom:-120px;

    left:-80px;

}

.cta-box>*{

    position:relative;

    z-index:2;

}

.cta-box span{

    display:inline-block;

    margin-bottom:16px;

    padding:8px 18px;

    border-radius:999px;

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

    font-weight:700;

}

.cta-box h2{

    font-size:clamp(2rem,4vw,3.2rem);

    margin-bottom:20px;

    line-height:1.2;

}

.cta-box p{

    max-width:720px;

    margin:0 auto 40px;

    opacity:.92;

    font-size:1.08rem;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.cta-box .btn-primary{

    background:#fff;

    color:var(--primary);

}

.cta-box .btn-primary:hover{

    background:#f3f3f3;

}

.cta-box .btn-outline{

    border:1px solid rgba(255,255,255,.4);

    background:transparent;

    color:#fff;

}

.cta-box .btn-outline:hover{

    background:#fff;

    color:var(--primary);

}



/*=========================================
FOOTER
=========================================*/


/********************/
/*======================================
Footer
======================================*/

.species-footer{

    background:#204C36;

    color:#fff;

    margin-top:100px;

}

.species-footer .container{

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1.2fr;

    gap:50px;

}

.footer-logo{

    width:70px;

    margin-bottom:18px;

}

.footer-col h3{

    margin-bottom:16px;

    color:#fff;

}

.footer-col h4{

    margin-bottom:18px;

    color:#fff;

}

.footer-col p{

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

    line-height:1.9;

}

.footer-col ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-col li{

    margin-bottom:14px;

}

.footer-col a{

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

    transition:.25s;

}

.footer-col a:hover{

    color:#fff;

    padding-left:6px;

}

.footer-bottom{
    margin-top:60px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    font-size:.82rem;



    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-top:28px;
    margin-top:28px;
    border-top:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.72);
    font-size:.92rem;

}

.footer-bottom p{

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

}

@media(max-width:991px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}
/**/
.footer-col>div>.btn-line{

    background: #416151;

   /*  color:#21493b; */

   /*  border:2px solid #fff; */

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

}

.footer-col>div>.btn-line:hover{

   /*  background:#F5FFF7; */

    transform:translateY(-3px);

}

.footer-logo{

    width:70px;

    margin-bottom:18px;
    background-color: #ffffff;

}
/* 
.site-footer{

    background:#133523;

    color:#fff;

    padding-top:80px;

}

.footer-grid{

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr 1.2fr;

    gap:60px;

    padding-bottom:60px;

}

.footer-about h3{

    font-size:2rem;

    margin-bottom:18px;

}

.footer-about p{

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

    max-width:420px;

}

.footer-menu h4,

.footer-contact h4{

    margin-bottom:18px;

    font-size:1.15rem;

}

.footer-menu ul,

.footer-contact ul{

    display:grid;

    gap:12px;

}

.footer-menu a{

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

    transition:.25s;

}

.footer-menu a:hover{

    color:#fff;

    padding-left:6px;

}

.footer-contact li{

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

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:24px 0;

    text-align:center;

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

    font-size:.92rem;

}

 */

/*=========================================
UTILITY
=========================================*/

.text-center{

    text-align:center;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}



/*=========================================
IMAGE
=========================================*/

img{

    max-width:100%;

    height:auto;

}

section{

    position:relative;

}



/*=========================================
ANIMATION
=========================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .7s ease both;

}

.card-hover{

    transition:
    transform .3s,
    box-shadow .3s;

}

.card-hover:hover{

    transform:translateY(-8px);

    box-shadow:
    0 18px 45px rgba(0,0,0,.12);

}



/*=========================================
SMOOTH HOVER
=========================================*/

.tree-card,
.why-card,
.usage-card,
.faq-item{

    transition:
    .35s;

}

.tree-card:hover,
.why-card:hover,
.usage-card:hover,
.faq-item:hover{

    transform:translateY(-6px);

}



/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1100px){

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.cta-box{

padding:60px 40px;

}

}

@media(max-width:768px){

.cta-section{

padding:70px 0;

}

.cta-box{

padding:45px 25px;

border-radius:24px;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons .btn{

width:100%;

}

.footer-grid{

gap:35px;

}

.footer-about p{

max-width:100%;

}

}

@media(max-width:480px){

.site-footer{

padding-top:60px;

}

.footer-about h3{

font-size:1.6rem;

}

 

.cta-box h2{

font-size:2rem;

}

.cta-box p{

font-size:1rem;

}

}
 
/* ==========================================================
SECTION : COMPARISON + DELIVERY + FAQ
========================================================== */

.compare-delivery-section{
    padding:70px 0 45px;
    background:#fff;
}

.compare-delivery-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
}

/*==================================================
CARD
==================================================*/

.compare-card,
.delivery-card{

    background:#fff;

    border-radius:18px;

    border:1px solid #ececec;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    overflow:hidden;

}

.section-title{

    font-size:2rem;

    font-weight:800;

    text-align:center;

    margin:28px 20px 24px;

    color:#222;

}

.section-title.center{

    margin-bottom:40px;

}

/*==================================================
COMPARE TABLE
==================================================*/

 
.comparison-wrapper{

    border:1px solid var(--border);

    border-radius:24px;

    overflow:auto;

    box-shadow:var(--shadow);

    background:#fff;

}

.comparison-table{

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

}

.compare-header,
.compare-row{

    display:grid;

    grid-template-columns:
    1.4fr
    1fr
    1fr;

    align-items:center;

  

}

.compare-header{

    background:#fafafa;

    border-top:1px solid #eee;

    border-bottom:1px solid #eee;

    font-weight:700;

}

.compare-header>div,
.compare-row>div{

    padding:14px 18px;

}

.compare-header img{

    width:44px;

    height:44px;

    object-fit:cover;

    border-radius:8px;

    display:block;

    margin:0 auto 6px;

}

.compare-header span{

    display:block;

    text-align:center;

}

.compare-row{

    border-bottom:1px solid #f1f1f1;

    transition:.25s;

}

.compare-row:hover{

    background:#fafdf9;

}

.compare-row div:first-child{

    font-weight:500;

}

.compare-row div:not(:first-child){

    text-align:center;

}

.check{

    color:#219653;

    font-size:22px;

    font-weight:bold;

}

.cross{

    color:#bdbdbd;

    font-size:22px;

}

.compare-footer{

    padding:22px;

    text-align:center;

}

.btn-outline-green{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:11px 24px;

    border:2px solid #0d7b38;

    border-radius:999px;

    color:#0d7b38;

    font-weight:700;

    transition:.25s;

}

.btn-outline-green:hover{

    background:#0d7b38;

    color:#fff;

}

/*==================================================
DELIVERY
==================================================*/

.delivery-content{

    display:grid;

  /*   grid-template-columns:230px 1fr; */

    gap:26px;

    padding:10px 28px 30px;

    align-items:center;

}

.delivery-map{

    text-align:center;

}

.delivery-map img{

    width:100%;

    /* max-width:220px; */

}

.delivery-info ul{

    list-style:none;

    margin:0;

    padding:0;

}

.delivery-info li{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:10px;

    color:#333;

    font-size:.96rem;

}

.delivery-info p{

    margin:18px 0 22px;

    color:#666;

    line-height:1.6;

}

.btn-green{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 26px;

    border-radius:10px;

    background:#0d7b38;

    color:#fff;

    font-weight:700;

    transition:.25s;

}

.btn-green:hover{

    background:#095d2a;

}

/*==================================================
FAQ
==================================================*/

.faq-section{

    padding:35px 0 70px;

}

.faq-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.faq-column{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.faq-column details{

    background:#fff;

    border:1px solid #ececec;

    border-radius:10px;

    overflow:hidden;

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

}

.faq-column summary{

    list-style:none;

    cursor:pointer;

    padding:16px 18px;

    font-weight:600;

    position:relative;

    transition:.2s;

}

.faq-column summary::-webkit-details-marker{

    display:none;

}

.faq-column summary::after{

    content:"+";

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    font-size:20px;

    color:#0d7b38;

    transition:.2s;

}

.faq-column details[open] summary::after{

    content:"−";

}

.faq-column summary:hover{

    background:#f8fcf8;

}

.faq-column p{

    padding:0 18px 18px;

    color:#666;

    line-height:1.75;

}

.faq-footer{

    text-align:center;

    margin-top:35px;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1100px){

.compare-delivery-grid{

grid-template-columns:1fr;

}

.delivery-content{

grid-template-columns:180px 1fr;

}

}

@media(max-width:768px){

.compare-header,
.compare-row{

min-width:650px;

}

.compare-card{

overflow-x:auto;

}

.delivery-content{

grid-template-columns:1fr;

text-align:center;

}

.delivery-info li{

justify-content:center;

}

.faq-grid{

grid-template-columns:1fr;

}

.section-title{

font-size:1.7rem;

}

}







@media(max-width:480px){
  .compare-delivery-section{
    padding:50px 0 30px;
  }

  .faq-section{
    padding:20px 0 50px;
  }

  .section-title{
    font-size:1.45rem;
  }

  .btn-green,
  .btn-outline-green{
    width:100%;
  }

}

 
/**/
/*=========================================
PREMIUM CTA
=========================================*/

.cta-section{

    padding:120px 0;

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

}

.cta-box{

    position:relative;

    overflow:hidden;

    padding:90px 70px;

    text-align:center;

    border-radius:36px;

    background:
        linear-gradient(
            145deg,
            #173c2e 0%,
            #1f5a41 55%,
            #2c7854 100%
        );

    color:#fff;

    box-shadow:
        0 30px 80px rgba(17,49,36,.28);

}


/* Gold Glow */

.cta-box::before{

    content:"";

    position:absolute;

    width:520px;
    height:520px;

    top:-260px;
    right:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,182,122,.28),
            transparent 72%
        );

}


/* White Glow */

.cta-box::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    left:-160px;
    bottom:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.08),
            transparent 72%
        );

}

.cta-box>*{

    position:relative;

    z-index:2;

}


/* Badge */

.cta-box span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    background:

        rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    color:#f2d9a4;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-size:.82rem;

}


/* Title */

.cta-box h2{

    margin:

        28px auto
        22px;

    max-width:760px;

    font-size:

        clamp(2.3rem,4vw,3.8rem);

    line-height:1.15;

    font-weight:800;

    letter-spacing:-.03em;

}


/* Description */

.cta-box p{

    max-width:720px;

    margin:

        0 auto
        46px;

    font-size:1.12rem;

    line-height:1.9;

    color:

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

}


/* Buttons */

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}


/* Main Button */

.cta-box .btn-primary{

    min-width:240px;

    height:58px;

    border-radius:999px;

    background:

        linear-gradient(
            135deg,
            #f0d49b,
            #d7ae62
        );

    color:#173c2e;

    font-weight:800;

    border:none;

    box-shadow:

        0 18px 40px
        rgba(212,174,98,.35);

}

.cta-box .btn-primary:hover{

    transform:

        translateY(-4px);

    box-shadow:

        0 26px 55px
        rgba(212,174,98,.45);

}


/* Secondary */

.cta-box .btn-outline{

    min-width:220px;

    height:58px;

    border-radius:999px;

    background:

        rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    border:

        1px solid
        rgba(255,255,255,.24);

    color:#fff;

}

.cta-box .btn-outline:hover{

    background:#fff;

    color:#173c2e;

}


/* Divider */

.cta-box::marker{

    display:none;

}

@media(max-width:768px){

    .cta-box{

        padding:60px 26px;

        border-radius:26px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons .btn{

        width:100%;

    }

}


/* ==========================================
   Footer Links
========================================== */

.footer-bottom-links{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:22px;

}

.footer-bottom-links a{

    position:relative;

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

    font-size:.92rem;

    font-weight:600;

    text-decoration:none;

    transition:
        color .25s ease;

}

/* Divider */

.footer-bottom-links a:not(:last-child)::after{

    content:"";

    position:absolute;

    top:50%;

    right:-12px;

    width:4px;

    height:4px;

    border-radius:50%;

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

    transform:translateY(-50%);

}

/* Hover */

.footer-bottom-links a:hover{

    color:#ffffff;

}

/* Underline */

.footer-bottom-links a::before{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    border-radius:999px;

    background:#ffffff;

    transition:width .25s ease;

}

.footer-bottom-links a:hover::before{

    width:100%;

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .footer-bottom-links{

        gap:16px;

    }

}

/* ==========================================
   Footer Intro
========================================== */

.footer-intro{

    max-width:760px;

    margin:0 auto 56px;

    text-align:center;

}

.footer-intro h2{

    margin:0 0 16px;

    font-size:clamp(1.8rem,3vw,2.5rem);

    font-weight:800;

    line-height:1.25;

    letter-spacing:-.03em;

    color:#ffffff;

}

.footer-intro p{

    max-width:620px;

    margin:0 auto;

    font-size:1.05rem;

    line-height:1.8;

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

}

/* เส้นตกแต่ง */

.footer-intro::after{

    content:"";

    display:block;

    width:72px;

    height:4px;

    margin:28px auto 0;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        #7fd99a
    );

}

/* ==========================================
   Tablet
========================================== */

@media(max-width:991px){

    .footer-intro{

        margin-bottom:44px;

    }

}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .footer-intro{

        margin-bottom:36px;

    }

    .footer-intro h2{

        font-size:1.6rem;

    }

    .footer-intro p{

        font-size:.98rem;

        line-height:1.7;

    }

}

/* ปรับ แสง*/

 .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/background-hero.webp");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  overflow:hidden;
}

 .hero::before{
    content:"";
    position:absolute;
    right:-280px;
    top:-160px;
    width:900px;
    height:900px;
   /*  border-radius:50%; */

    background:
        radial-gradient(
        circle,
        rgba(33,150,83,.10),
        transparent 70%);

}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    z-index:1;

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






}
.hero 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);
}

.hero h1 span{
    color:#ffe16a;
}
.hero 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;
}