@import url('https://fonts.cdnfonts.com/css/poppins');
body {
    font-family: 'Poppins';
    margin: 0;
    padding: 0;
    background-color: #4d4d4d;
    color: #353535;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.button {
    background-color: #795b00;
    /*Warnacokelat*/
    border: none;
    /*Menghilangkanborderdefault*/
    color: white;
    /*Warnateks*/
    padding: 10px 20px;
    /*Paddinguntukukurantombol*/
    text-align: center;
    /*Teksditengah*/
    text-decoration: none;
    /*Menghilangkangarisbawahpadateks*/
    display: inline-block;
    /*Membuattombolinline*/
    font-size: 16px;
    /*Ukuranfont*/
    border-radius: 40px;
    /*Radius40*/
    cursor: pointer;
    /*Mengubahkursormenjadipointersaatdihover*/
    font-weight: bold;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

.button:hover {
    background-color: #A0522D;
    /* Warna cokelat lebih terang saat dihover */
}

.container {
    width: 100%;
    max-width: 600px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

header {
    background: rgb(15, 116, 15);
    background: radial-gradient(circle, rgba(15, 116, 15, 1) 20%, rgba(3, 46, 10, 1) 100%);
    color: white;
    padding: 1em 0;
    text-align: center;
    border-bottom: 2px solid #666666;
}

header img {
    width: 60%;
}

header h1 {
    margin: 0;
}

main {
    padding: 0em;
}

.home {
    background: rgb(3, 46, 10);
    background: linear-gradient(360deg, rgba(15, 116, 15, 1) 10%, rgba(3, 46, 10, 1)100%);
    text-align: center;
    color: #ffffff;
}

.home h1 {
    color: #ffffff;
    margin-top: -15px;
}

.home h3 {
    color: #ffffff;
    font-style: italic;
    line-height: 30px;
    padding: 30px;
    font-size: medium;
}

.home h4 {
    font-style: italic;
}

#home-content {
    padding: 20px;
}

#about-content {
    padding: 30px;
    text-align: center;
    color: #323232;
}

#about-content p {
    text-align: center;
    line-height: 25px;
}

.about h1 {
    color: #323232;
}

#about-content .box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#about-content .box .card {
    width: 90%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    background-color: #edecec;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    margin-bottom: 50px;
}

#about-content .box .card h3 {
    font-weight: normal;
}

#contact-content {
    padding: 20px;
}


/* ################################ Memahami #################### */

.memahami {
    background: #edecec;
    text-align: center;
    color: #ffffff;
    padding: 20px;
}

.memahami h1 {
    color: #323232;
}

.memahami h3 {
    font-weight: normal;
    color: #323232;
}

.memahami h4 {
    font-style: italic;
}

#memahami-content {
    padding: 20px;
}


/* ################################## end memahami ## */


/* ################################ Tenang #################### */

.tenang {
    background: #c9bba0;
    text-align: center;
    color: #323232;
    padding: 20px;
    margin-top: -44px;
}

.tenang h1 {
    color: #323232;
}

.tenang h3 {
    font-weight: normal;
    color: #323232;
}

.tenang h4 {
    font-style: italic;
}

#tenang-content {
    padding: 20px;
}


/* ################################## end tenang ## */


/* ################################ Memperkenalkan #################### */

.memperkenalkan {
    background: rgb(15, 116, 15);
    background: radial-gradient(circle, rgba(15, 116, 15, 1) 2%, rgba(3, 46, 10, 1) 100%);
    text-align: center;
    color: #323232;
    padding: 20px;
    margin-top: -44px;
}

.memperkenalkan img {
    width: 80%;
}

.memperkenalkan h1 {
    color: #ffffff;
}

.memperkenalkan h3 {
    font-weight: normal;
    color: #ffffff;
}

.memperkenalkan h4 {
    font-style: italic;
}

#memperkenalkan-content {
    padding: 20px;
}


/* ################################## end memperkenalkan ## */


/* Produk  */

#produk-content {
    padding: 30px;
    text-align: center;
    color: #323232;
}

#produk-content p {
    text-align: center;
    line-height: 25px;
}

.produk h1 {
    margin-top: -15px;
    color: #323232;
}

.produk img {
    width: 80%;
}


/* end Produk */


/* tak hanya */

.takhanya {
    background: rgb(15, 116, 15);
    background: radial-gradient(circle, rgba(15, 116, 15, 1) 0%, rgba(3, 46, 10, 1) 100%);
    text-align: center;
    color: #323232;
    padding: 20px;
}

.takhanya h3 {
    color: #ffffff;
    margin-top: -20px;
}

.takhanya p {
    color: #ffffff;
}


/* kegiatan  */

#kegiatan-content {
    text-align: center;
    color: #323232;
}

.kegiatan img {
    width: 100%;
    margin-top: -44px;
}


/* end kegiatan */


/* ################################ Pengalaman #################### */

.pengalaman {
    background: #c9bba0;
    text-align: center;
    color: #323232;
    padding: 20px;
    margin-top: -24px;
}

.pengalaman h1 {
    color: #323232;
}

.pengalaman h3 {
    font-weight: normal;
    color: #323232;
}

.pengalaman h4 {
    font-style: italic;
}

#pengalaman-content {
    padding: 20px;
}

.pengalaman video {
    width: 90%;
    height: 100%;
    border: solid 4px #323232;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.pengalaman img {
    width: 100%;
}


/* ################################## end tenang ## */


/* jadilah  */

#jadilah-content {
    padding: 30px;
    text-align: center;
    color: #323232;
}

#jadilah-content p {
    text-align: center;
    line-height: 25px;
}

.jadilah h1 {
    margin-top: -15px;
    color: #323232;
}

.jadilah img {
    width: 100%;
}

.penawaran {
    background: rgb(15, 116, 15);
    background: radial-gradient(circle, rgba(15, 116, 15, 1) 0%, rgba(3, 46, 10, 1) 100%);
    text-align: center;
}

.penawaran h3,
h1,
h2 {
    color: #ffffff;
}

.penawaran p {
    color: #ffffff;
}

.penawaran img {
    width: 100%;
}


/* ################################ faqlayout #################### */

.faqlayout {
    background: #edecec;
    text-align: center;
    color: #ffffff;
    padding: 20px;
}

.faqlayout h1 {
    color: #032e0a;
}

.faqlayout h3 {
    font-weight: bold;
    color: #323232;
}

.faqlayout h4 {
    font-style: italic;
}

.faqlayout p {
    color: #323232;
    text-align: left;
}

#faqlayout-content {
    padding: 20px;
}


/* ################################## end faqlayout ## */

footer {
    background: rgb(171, 126, 43);
    background: radial-gradient(circle, rgba(171, 126, 43, 1) 10%, rgba(69, 47, 6, 1) 100%);
    color: white;
    text-align: center;
    padding: 1em 0;
}


/* Mobile Specific Styles */

@media (max-width: 600px) {
    header {
        padding: 0.5em 0;
    }
    main {
        padding: 0em;
    }
    footer {
        padding: 0.5em 0;
    }
}

body {
    font-size: 16px;
    /* Ukuran font default */
}

@media (min-width: 600px) {
    body {
        font-size: 18px;
        /* Ukuran font untuk layar dengan lebar minimal 600px */
    }
}

/*@media (min-width: 900px) {*/
/*    body {*/
/*        font-size: 20px;*/
        /* Ukuran font untuk layar dengan lebar minimal 900px */
/*    }*/
/*}*/

/*@media (min-width: 1200px) {*/
/*    body {*/
/*        font-size: 22px;*/
        /* Ukuran font untuk layar dengan lebar minimal 1200px */
/*    }*/
/*}*/

/*@media (min-width: 768px) {*/
/*    body {*/
/*        font-size: 20px;*/
        /* UKuran font untuk layar dengan lebar minimal 768px */
/*    }*/
/*}*/