.elementor-100 .elementor-element.elementor-element-38afa33{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-100 .elementor-element.elementor-element-38afa33.e-con{--align-self:flex-start;}.elementor-100 .elementor-element.elementor-element-ff16c37{--display:flex;}.elementor-100 .elementor-element.elementor-element-729f2e6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}body.elementor-page-100{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS */<section class="psa-about-page">

    <!-- HERO -->
    <div class="psa-hero">

        <div class="psa-overlay"></div>

        <div class="psa-container">

            <div class="psa-hero-content">

                <span class="psa-badge">
                    Tentang Kami
                </span>

                <h1>
                    PINDIT SNACK
                </h1>

                <p>
                    Menghadirkan berbagai pilihan camilan berkualitas
                    dengan cita rasa terbaik untuk menemani setiap momen
                    bersama keluarga, sahabat, dan pelanggan Anda.
                </p>

            </div>

        </div>

    </div>

    <!-- COMPANY STORY -->
    <section class="psa-story">

        <div class="psa-container">

            <div class="psa-section-title">
                <h2>Cerita Kami</h2>
            </div>

            <div class="psa-story-box">

                <p>
                    Pindit Snack merupakan usaha yang bergerak di bidang
                    makanan ringan yang menyediakan berbagai macam snack
                    pilihan dengan kualitas terbaik. Kami percaya bahwa
                    camilan bukan hanya sekadar makanan ringan, tetapi juga
                    bagian dari kebersamaan dan kebahagiaan dalam setiap
                    kesempatan.
                </p>

                <p>
                    Berawal dari kecintaan terhadap cita rasa khas Indonesia,
                    Pindit Snack terus menghadirkan produk yang renyah,
                    gurih, dan dibuat dengan bahan pilihan. Salah satu
                    produk unggulan kami adalah keripik usus yang telah
                    menjadi favorit banyak pelanggan.
                </p>

            </div>

        </div>

    </section>

    <!-- VISI MISI -->
    <section class="psa-vision">

        <div class="psa-container">

            <div class="psa-grid">

                <div class="psa-card">

                    <h3>Visi</h3>

                    <p>
                        Menjadi pilihan utama masyarakat dalam memenuhi
                        kebutuhan camilan berkualitas dengan rasa yang
                        konsisten dan pelayanan terbaik.
                    </p>

                </div>

                <div class="psa-card">

                    <h3>Misi</h3>

                    <p>
                        Menyediakan produk makanan ringan yang lezat,
                        higienis, dan berkualitas serta memberikan
                        pengalaman terbaik bagi setiap pelanggan.
                    </p>

                </div>

            </div>

        </div>

    </section>

    <!-- KEUNGGULAN -->
    <section class="psa-values">

        <div class="psa-container">

            <div class="psa-section-title">
                <h2>Keunggulan Kami</h2>
            </div>

            <div class="psa-values-grid">

                <div class="psa-value-card">
                    <h3>Bahan Berkualitas</h3>
                    <p>
                        Menggunakan bahan pilihan untuk menghasilkan rasa terbaik.
                    </p>
                </div>

                <div class="psa-value-card">
                    <h3>Rasa Konsisten</h3>
                    <p>
                        Menjaga kualitas rasa agar pelanggan selalu puas.
                    </p>
                </div>

                <div class="psa-value-card">
                    <h3>Kemasan Higienis</h3>
                    <p>
                        Produk dikemas dengan rapi dan aman untuk dikonsumsi.
                    </p>
                </div>

                <div class="psa-value-card">
                    <h3>Pelayanan Ramah</h3>
                    <p>
                        Mengutamakan kepuasan pelanggan dalam setiap transaksi.
                    </p>
                </div>

            </div>

        </div>

    </section>

    <!-- CTA -->
    <section class="psa-cta">

        <div class="psa-container">

            <h2>
                Siap Menikmati Snack Favorit Anda?
            </h2>

            <p>
                Hubungi kami sekarang dan temukan berbagai pilihan camilan
                berkualitas untuk keluarga maupun usaha Anda.
            </p>

            <a href="https://wa.me/62851832522672?text=Halo%20Pindit%20Snack,%20saya%20ingin%20mengetahui%20produk%20yang%20tersedia."
               class="psa-btn"
               target="_blank">

                Hubungi Kami

            </a>

        </div>

    </section>

</section>

<style>

/* ==================================
   PINDIT SNACK ABOUT US
   PREFIX : psa-
================================== */

.psa-about-page,
.psa-about-page *{
    box-sizing:border-box;
}

.psa-about-page{
    font-family:
    Georgia,
    "Times New Roman",
    serif;
    color:#111;
}

/* CONTAINER */

.psa-container{
    max-width:1200px;
    margin:auto;
    padding:0 24px;
}

/* HERO */

.psa-hero{

    position:relative;

    min-height:70vh;

    display:flex;
    align-items:center;

    background:
    linear-gradient(
    to bottom,
    #FFFF00,
    #000000
    );

    overflow:hidden;

}

.psa-overlay{

    position:absolute;
    inset:0;

    background:
    radial-gradient(
    circle at top,
    rgba(255,255,255,.25),
    transparent 50%
    );

}

.psa-hero-content{

    position:relative;
    z-index:2;

    max-width:700px;

    color:#fff;

}

.psa-badge{

    display:inline-block;

    padding:10px 18px;

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

    backdrop-filter:blur(10px);

    border-radius:40px;

    margin-bottom:20px;

}

.psa-hero h1{

    font-size:70px;

    margin-bottom:20px;

}

.psa-hero p{

    font-size:18px;

    line-height:1.8;

}

/* SECTION */

.psa-story,
.psa-values{
    padding:100px 0;
}

.psa-vision{
    padding:30px 0 100px;
}

.psa-section-title{
    text-align:center;
    margin-bottom:50px;
}

.psa-section-title h2{
    font-size:42px;
    margin:0;
}

.psa-story-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    line-height:2;

    font-size:18px;

    color:#444;

}

/* VISI MISI */

.psa-grid{

    display:grid;

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

    gap:30px;

}

.psa-card{

    background:#fffdf2;

    padding:40px;

    border-radius:24px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.psa-card:hover{
    transform:translateY(-8px);
}

.psa-card h3{
    margin-bottom:15px;
    font-size:28px;
}

/* VALUES */

.psa-values-grid{

    display:grid;

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

    gap:25px;

}

.psa-value-card{

    background:#fff;

    padding:30px;

    border-radius:20px;

    text-align:center;

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

    transition:.35s;

}

.psa-value-card:hover{

    transform:translateY(-8px);

}

.psa-value-card h3{
    margin-bottom:15px;
}

/* CTA */

.psa-cta{

    padding:100px 0;

    text-align:center;

    background:
    linear-gradient(
    to bottom,
    #111111,
    #000000
    );

    color:#fff;

}

.psa-cta h2{

    font-size:46px;

    margin-bottom:20px;

}

.psa-cta p{

    max-width:700px;

    margin:auto auto 30px;

    line-height:1.8;

}

.psa-btn{

    display:inline-block;

    padding:16px 32px;

    border-radius:14px;

    background:#FFFF00;

    color:#111;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}

.psa-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 30px rgba(255,255,0,.35);

}

/* ANIMATION */

.psa-fade{
    opacity:0;
    transform:translateY(30px);
    transition:all .8s ease;
}

.psa-fade.psa-show{
    opacity:1;
    transform:none;
}

/* RESPONSIVE */

@media(max-width:991px){

    .psa-grid{
        grid-template-columns:1fr;
    }

    .psa-values-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .psa-hero{
        min-height:60vh;
    }

    .psa-hero h1{
        font-size:48px;
    }

    .psa-section-title h2{
        font-size:32px;
    }

    .psa-values-grid{
        grid-template-columns:1fr;
    }

    .psa-cta h2{
        font-size:34px;
    }

}

</style>

<script>

document.addEventListener("DOMContentLoaded", function(){

    const elements = document.querySelectorAll(
        ".psa-card, .psa-value-card"
    );

    elements.forEach(el=>{
        el.classList.add("psa-fade");
    });

    const observer = new IntersectionObserver(entries=>{

        entries.forEach(entry=>{

            if(entry.isIntersecting){
                entry.target.classList.add("psa-show");
            }

        });

    },{
        threshold:0.2
    });

    elements.forEach(el=>{
        observer.observe(el);
    });

});

</script>/* End custom CSS */