/*
============================================================
NANDA FOOD EXPORT — PROPRIETARY SOURCE CODE
Copyright © 2026 PT. Nanda Food And Agriculture.
All Rights Reserved.

Unauthorized copying, modification, distribution, publication,
or reuse of this proprietary source code, in whole or in substantial
part, is prohibited without prior written permission from
PT. Nanda Food And Agriculture.

Third-party materials remain subject to their respective licenses.
============================================================
*/

/* ==========================================
   1. FAQ SECTION
========================================== */

/* ==========================================
   1.1 FAQ SECTION
========================================== */

#faq-section{
    position:relative;
    overflow:hidden;
    padding:80px 0 100px;
    background:linear-gradient(180deg,#FCFDFC 0%,#FFFFFF 100%);
}

#faq-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top right,rgba(46,94,62,.05) 0%,transparent 34%),
        radial-gradient(circle at bottom left,rgba(46,94,62,.04) 0%,transparent 30%);
}

#faq-section .container{
    position:relative;
    z-index:2;
    max-width:1200px;
}

/* ==========================================
   1.2 FAQ HERO HEADER
========================================== */

#faq-section .section-header{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

#faq-section .section-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.55rem;
    margin-bottom:1rem;
    padding:.7rem 1.55rem;
    border-radius:999px;
    background:rgba(46,94,62,.08);
    color:var(--secondary);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#faq-section .section-header h1{
    margin:0;
    color:var(--primary);
    font-size:clamp(2.8rem,3vw,3.75rem);
    font-weight:700;
    line-height:1.15;
    letter-spacing:-.03em;
}

#faq-section .section-header p{
    max-width:720px;
    margin:1.6rem auto 0;
    color:var(--text-light);
    font-size:1rem;
    line-height:1.9;
    text-align:justify;
    text-align-last:center;
}

/* ==========================================
   1.3 FAQ GROUP
========================================== */

.faq-group{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:calc(100vh - 120px);
    padding:5rem 0;
}

.faq-group+.faq-group{
    border-top:1px solid rgba(46,94,62,.06);
}

.faq-wrapper{
    width:100%;
    max-width:920px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1.15rem;
}

/* ==========================================
   1.4 FAQ GROUP HEADER
========================================== */

.faq-group-header{
    max-width:700px;
    margin:0 auto 3.5rem;
    text-align:center;
}

.faq-group-icon{
    width:72px;
    height:72px;
    margin:0 auto 1.35rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    background:#F3F8F4;
    color:var(--primary);
    font-size:1.8rem;
    box-shadow:0 12px 28px rgba(46,94,62,.08);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background-color .35s ease;
}

.faq-group:hover .faq-group-icon{
    transform:translateY(-4px);
    background:#EBF4ED;
    box-shadow:0 18px 36px rgba(46,94,62,.12);
}

.faq-category{
    display:inline-block;
    margin-bottom:.8rem;
    color:var(--secondary);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.faq-group-header h2{
    margin:0;
    color:var(--primary);
    font-size:2.3rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
}

.faq-group-description{
    max-width:660px;
    margin:1.35rem auto 0;
    color:var(--text-light);
    font-size:1rem;
    line-height:1.85;
    text-align:center;
}

.faq-group-header::after{
    content:"";
    display:block;
    width:90px;
    height:3px;
    margin:1.8rem auto 0;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--secondary),
        transparent
    );
    opacity:.4;
}

/* ==========================================
   1.5 FAQ ACCORDION
========================================== */

.faq-item{
    overflow:hidden;
    background:#FFFFFF;
    border:1px solid rgba(46,94,62,.08);
    border-radius:18px;
    box-shadow:0 10px 26px rgba(15,23,42,.05);
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.faq-item:hover{
    transform:translateY(-3px);
    border-color:rgba(46,94,62,.16);
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}

.faq-item[open]{
    border-color:rgba(46,94,62,.18);
    box-shadow:0 18px 42px rgba(15,23,42,.09);
}

.faq-item summary{
    position:relative;
    padding:1.55rem 4.8rem 1.55rem 2rem;
    list-style:none;
    cursor:pointer;
    color:var(--primary);
    font-size:1.02rem;
    font-weight:600;
    line-height:1.7;
    text-align:left;
    transition:background-color .3s ease;
}

.faq-item summary::-webkit-details-marker{
    display:none;
}

.faq-item summary::after{
    content:"+";
    position:absolute;
    top:50%;
    right:24px;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#EEF5F0;
    color:var(--primary);
    font-size:1.35rem;
    font-weight:500;
    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.faq-item:hover summary::after{
    background:#E6F2E9;
}

.faq-item[open] summary{
    background:#FBFCFB;
}

.faq-item[open] summary::after{
    content:"−";
    background:var(--primary);
    color:#FFFFFF;
    transform:translateY(-50%) rotate(180deg);
}

.faq-item p{
    margin:0;
    padding:0 2rem 2rem;
    color:var(--text-light);
    font-size:.96rem;
    line-height:1.9;
    text-align:justify;
}

.faq-item p strong{
    color:var(--primary);
    font-weight:700;
}

/* ==========================================
   2. FAQ CTA
========================================== */

/* ==========================================
   2.1 CTA SECTION
========================================== */

.faq-cta{
    position:relative;
    overflow:hidden;
    padding:6rem 0;
    background:#F5F9F6;
}

.faq-cta::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at top right,
        rgba(46,94,62,.06) 0%,
        transparent 35%),
        radial-gradient(circle at bottom left,
        rgba(46,94,62,.04) 0%,
        transparent 30%);
}

.faq-cta .container{
    position:relative;
    z-index:2;
}

/* ==========================================
   2.2 CTA CARD
========================================== */

.faq-cta-card{
    position:relative;
    max-width:960px;
    margin:0 auto;
    padding:4rem;
    text-align:center;
    background:#FFFFFF;
    border:1px solid rgba(46,94,62,.08);
    border-radius:24px;
    box-shadow:
        0 18px 48px rgba(15,23,42,.06);
}

.faq-cta-card::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:120px;
    height:4px;
    border-radius:999px;
    background:var(--secondary);
}

.faq-cta-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1rem;
    padding:.7rem 1.5rem;
    border-radius:999px;
    background:rgba(46,94,62,.08);
    color:var(--secondary);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.faq-cta-card h2{
    margin:0;
    color:var(--primary);
    font-size:2.5rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-.02em;
}

.faq-cta-card p{
    max-width:660px;
    margin:1.5rem auto 0;
    color:var(--text-light);
    font-size:1rem;
    line-height:1.9;
}

/* ==========================================
   2.3 CTA ACTIONS
========================================== */

.faq-cta-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2.5rem;
}

.faq-cta-buttons .btn{
    min-width:220px;
    justify-content:center;
}

.faq-cta-buttons .btn-primary{
    box-shadow:
        0 12px 28px rgba(46,94,62,.18);
}

.faq-cta-buttons .btn-primary:hover{
    transform:translateY(-3px);
}

.faq-cta-buttons .btn-outline{
    background:#FFFFFF;
}

.faq-cta-buttons .btn-outline:hover{
    transform:translateY(-3px);
}

/* ==========================================
   2.4 CTA TRUST BAR
========================================== */

.faq-cta-divider{
    width:100%;
    max-width:760px;
    height:1px;
    margin:2.75rem auto 2rem;
    background:rgba(46,94,62,.08);
}

.faq-cta-trust{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:1.2rem 2.5rem;
    margin:0;
    padding:0;
    list-style:none;
}

.faq-cta-trust li{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    color:var(--primary);
    font-size:.95rem;
    font-weight:600;
    line-height:1.5;
    transition:
        color .3s ease,
        transform .3s ease;
}

.faq-cta-trust li:hover{
    color:var(--secondary);
    transform:translateY(-2px);
}

.faq-cta-trust i{
    flex-shrink:0;
    font-size:1.1rem;
    color:var(--secondary);
    transition:
        color .3s ease,
        transform .3s ease;
}

.faq-cta-trust li:hover i{
    color:var(--primary);
    transform:scale(1.08);
}

/* ==========================================
   2.5 CTA BUTTONS
========================================== */

.faq-cta-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    margin-top:2.5rem;
}

.faq-cta-actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.75rem;
    width:240px;
    height:56px;
    padding:0 2rem;
    border:2px solid transparent;
    border-radius:999px;
    font-size:.96rem;
    font-weight:600;
    line-height:1;
    text-decoration:none;
    transition:
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}

.faq-cta-actions .btn i{
    font-size:1.15rem;
    transition:transform .3s ease;
}

/* Primary */

.faq-cta-actions .btn-primary{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--white);
    box-shadow:0 12px 28px rgba(46,94,62,.18);
}

.faq-cta-actions .btn-primary i,
.faq-cta-actions .btn-primary span{
    color:inherit;
}

.faq-cta-actions .btn-primary:hover{
    background:#234A31;
    border-color:#234A31;
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(46,94,62,.22);
}

.faq-cta-actions .btn-primary:hover i{
    transform:translateX(3px);
}

/* Outline */

.faq-cta-actions .btn-outline{
    background:#F7FAF8;
    border-color:#C8D8CE;
    color:var(--primary);
    box-shadow:0 8px 20px rgba(15,23,42,.04);
}

.faq-cta-actions .btn-outline i,
.faq-cta-actions .btn-outline span{
    color:inherit;
}

.faq-cta-actions .btn-outline:hover{
    background:var(--primary);
    border-color:var(--primary);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(46,94,62,.18);
}

.faq-cta-actions .btn-outline:hover i{
    transform:translateX(3px);
}

/* ==========================================
   3.1 TABLET
========================================== */

@media (min-width:769px) and (max-width:1024px){

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

    #faq-section{
        padding:64px 0 72px;
    }

    #faq-section .container{
        width:100%;
        max-width:100%;
        padding-left:32px;
        padding-right:32px;
    }

    /* ==========================================
       HERO
    ========================================== */

    #faq-section .section-header{
        max-width:620px;
        margin:0 auto 4rem;
    }

    #faq-section .section-label{
        margin-bottom:1rem;
    }

    #faq-section .section-header h1{
        max-width:560px;
        margin:0 auto;
        font-size:2.7rem;
        line-height:1.15;
    }

    #faq-section .section-header p{
        max-width:600px;
        margin:1.4rem auto 0;
        font-size:.98rem;
        line-height:1.85;
        text-align:center;
    }

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

    .faq-group{
        min-height:auto;
        padding:72px 0 0;
    }

    .faq-group:first-of-type{
        padding-top:0;
    }

    .faq-group-header{
        max-width:620px;
        margin:0 auto 3rem;
        text-align:center;
    }

    .faq-group-icon{
        width:66px;
        height:66px;
        margin:0 auto 1.2rem;
        border-radius:20px;
        font-size:1.55rem;
    }

    .faq-category{
        justify-content:center;
        margin-bottom:.8rem;
    }

    .faq-group-header h2{
        max-width:520px;
        margin:0 auto;
        font-size:2rem;
        line-height:1.25;
    }

    .faq-group-description{
        max-width:580px;
        margin:1rem auto 0;
        font-size:.97rem;
        line-height:1.85;
        text-align:center;
    }

    .faq-group-header::after{
        margin-top:1.5rem;
    }

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

    .faq-wrapper{
        max-width:760px;
        margin:0 auto;
        gap:1.15rem;
    }

    .faq-item{
        border-radius:18px;
    }

    .faq-item summary{
        padding:1.35rem 4.2rem 1.35rem 1.6rem;
        font-size:.98rem;
        line-height:1.7;
    }

    .faq-item summary::after{
        right:18px;
        width:36px;
        height:36px;
        font-size:1.15rem;
    }

    .faq-item p{
        padding:0 1.6rem 1.6rem;
        font-size:.95rem;
        line-height:1.85;
    }

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

    .faq-cta{
        padding:72px 0 0;
    }

    .faq-cta-card{
        max-width:760px;
        margin:0 auto;
        padding:3rem 2.5rem;
    }

    .faq-cta-header{
        max-width:600px;
        margin:0 auto;
    }

    .faq-cta-card h2{
        max-width:560px;
        margin:0 auto;
        font-size:2.3rem;
        line-height:1.2;
    }

    .faq-cta-card p{
        max-width:560px;
        margin:1.3rem auto 0;
        font-size:.97rem;
        line-height:1.85;
        text-align:center;
    }

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

    .faq-cta-actions{
        justify-content:center;
        gap:1rem;
        margin-top:2.3rem;
    }

    .faq-cta-actions .btn{
        width:220px;
        height:54px;
    }

}

/* ==========================================
   3.2 MOBILE
========================================== */

@media (max-width:768px){

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

    #faq-section{
        padding:54px 0 60px;
    }

    #faq-section .container{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }

    /* ==========================================
       HERO
    ========================================== */

    #faq-section .section-header{
        max-width:330px;
        margin:0 auto 3rem;
    }

    #faq-section .section-label{
        margin-bottom:1rem;
        padding:.65rem 1.35rem;
        font-size:.72rem;
    }

    #faq-section .section-header h1{
        max-width:330px;
        margin:0 auto;
        font-size:2.05rem;
        line-height:1.2;
        letter-spacing:-.02em;
    }

    #faq-section .section-header p{
        max-width:320px;
        margin:1.2rem auto 0;
        font-size:.95rem;
        line-height:1.85;
        text-align:justify;
        text-align-last:left;
    }

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

    .faq-group{
        min-height:auto;
        padding:54px 0 0;
    }

    .faq-group:first-of-type{
        padding-top:0;
    }

    .faq-group-header{
        max-width:330px;
        margin:0 auto 2.2rem;
        text-align:center;
    }

    .faq-group-icon{
        width:58px;
        height:58px;
        margin:0 auto 1rem;
        border-radius:18px;
        font-size:1.35rem;
    }

    .faq-category{
        justify-content:center;
        margin-bottom:.75rem;
        font-size:.72rem;
    }

    .faq-group-header h2{
        max-width:330px;
        margin:0 auto;
        font-size:1.7rem;
        line-height:1.3;
    }

    .faq-group-description{
        max-width:320px;
        margin:1rem auto 0;
        font-size:.94rem;
        line-height:1.8;
        text-align:justify;
        text-align-last:left;
    }

    .faq-group-header::after{
        margin-top:1.3rem;
    }

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

    .faq-wrapper{
        max-width:100%;
        gap:1rem;
    }

    .faq-item{
        border-radius:16px;
    }

    .faq-item summary{
        padding:1.15rem 3.8rem 1.15rem 1.2rem;
        font-size:.95rem;
        line-height:1.6;
    }

    .faq-item summary::after{
        right:16px;
        width:34px;
        height:34px;
        font-size:1.1rem;
    }

    .faq-item p{
        padding:0 1.2rem 1.4rem;
        font-size:.92rem;
        line-height:1.85;
        text-align:justify;
        text-align-last:left;
    }

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

    .faq-cta{
        padding:60px 0 0;
        background:none;
    }

    .faq-cta::before,
    .faq-cta::after,
    .faq-cta-card::before,
    .faq-cta-card::after{
        display:none;
    }

    .faq-cta-card{
        padding:2.25rem 1.25rem;
        border-radius:20px;
    }

    .faq-cta-header{
        max-width:330px;
        margin:0 auto;
    }

    .faq-cta-label{
        padding:.65rem 1.35rem;
        font-size:.72rem;
    }

    .faq-cta-card h2{
        max-width:330px;
        margin:0 auto;
        font-size:2rem;
        line-height:1.2;
    }

    .faq-cta-card p{
        max-width:320px;
        margin:1.15rem auto 0;
        font-size:.95rem;
        line-height:1.85;
        text-align:justify;
        text-align-last:left;
    }

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

    .faq-cta-actions{
        flex-direction:column;
        align-items:center;
        gap:.9rem;
        margin-top:2rem;
    }

    .faq-cta-actions .btn{
        width:100%;
        max-width:295px;
        height:54px;
    }

}