/* smartphone */
@media (max-width: 575.98px) {
    html {
        font-size: 70%;
    }

    .navbar {
        height: 80px;
        z-index: 999;
        border-radius: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-end;
        position: absolute;
        background-color: var(--background-secondary);
        top: 80px;
        right: -350px;
        height: 100vh;
        z-index: -1;
        transition: right 300ms ease;
    }

    .nav-menu a {
        text-align: right;
        font-size: 14px;
        display: inline-block;
        padding: 25px 60px;
        width: 100%;
    }

    .nav-menu a:first-child {
        margin-top: 10px;
    }

    .nav-cta {
        display: none;
    }

    .hamburger {
        display: block;
        color: white;
    }

    .hamburger span {
        font-size: 40px;
    }

    /* Show Menu */
    .nav-menu.active {
        right: 0;
        /* Slide in */
    }
    /* hero */
    .hero h1 {
        font-size: 3em;
    }
    /* hero */


    /* keypoint */
    .dada-mentah {
        width: 100px;
    }

    .dada-mentah2 {
        width: 120px;
    }

    .key {
        display: flex;
        justify-content: flex-start;
        overflow: scroll;
        flex-wrap: nowrap;
        padding: 5%;
        gap: 2rem;
        position: relative;
    }

    .key-title {
        font-size: 3em;
        max-width: 320px;
    }

    /* keypoint */

    /* prodcut */
    .product {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: row;
        overflow: scroll;
    }
    .product-row {
        min-width: 660px;
        height: 460px;
        padding: 2rem 0%;
        transform:scale(.9);
    }
    .product-col-2 h3 {
        text-align: center;
        max-width: 260px;
        font-weight: 400;
    }
    .product-emblem {
        position: absolute;
        top: 10%;
        right: 10%;
        width: 60px;
    }
    .product-image {
        /* border-radius: 50%; */

        max-width: 360px;
    }
    .product-col-2 p {
        max-width: 250px;
    }
    .product-col-2 h5 {
        font-size: 16px;
    }
    .product-cta {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    .product::after {
        width: 100%;
        height: fit-content;
    }

    /* prodcut */

    /* founder */
    .founder {
        border-radius: 0;
        margin: 0;
    }

    .founder h1 {
        margin-top: 2rem;
        text-align: center;
    }

    .founder-row {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        z-index: 2;
    }

    .founder-col-1 {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
        max-width: 300px;
        gap: 5px;
        padding: 1rem;
        border-radius: 10px;
    }

    .founder-col-1 p {
        text-align: center;
        font-size: 15px;
    }
    .founder-col-1 h3 {
        font-size: 15px;
    }
    .founder-col-1 h4 {
        font-size: 15px;
    }

    .founder-col-2 img {
        max-width: 300px;
    }
    .founder-cta {
        font-size: 15px;
        padding: 20px 20px;
        background-color: var(--primary-color);
        width: fit-content;
        color: white;
        border-radius: 10px;
    }
    .founder::after {
        border-radius: 0px;
    }
    

    /* founder */



    /* testimoni */
    .testimoni {
        display: flex;
        flex-direction: column;
        padding: 1rem 2rem;
    }

    .flamer-row {
        display: flex;
        overflow-x: scroll;
        /* flex-wrap: wrap; */
        gap: 0rem;
        padding: 0rem 0rem;
    }
    .flamer-card {
        transform: scale(.8);
    }

    /* testimoni */


    /* desc */
    .desc {
        padding: 1rem 2rem;
    }

    .desc img {
        max-width: 50px;
    }
    .footer-col-1 p {
        max-width: 250px;
    }
    .footer-col-3 iframe {
        max-width: 280px;
        border-radius: 20px;
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.564);
    }

    /* desc */
}