:root{
    --warnars1 : #a8d55e;
    --warnars2 : #22bab1;
    --warnars3 : #2586b0;
    --warnars4 : #129fa9;
    --warnars5 : #f46e00;
    --warnars6 : #d7dce0;

    --youtube1 : #FF0000;
    --youtube2 : #CD201F;
    --youtube3 : #bb0000;
    --youtube4 : #c4302b;

    --whatsapp1 : #4FCE5D;
    --whatsapp2 : #25D366;
    --whatsapp3 : #128C7E;
    --whatsapp4 : #075E54;
    --whatapp5 : #28a745;

    --instagram11 : #DD2A7B;
    --instagram12 : #8134AF;
    --instagram13 : #515BD4;
    --instagram14 : #FD355C;
    --instagram15 : #e83e8c;

    --twitter1 : #00b9ff;
    --twitter2 : #00acee;
    --twitter3 : #18a1d6;
    --twitter4 : #008abe;
    --twitter5 : #00bfff;
    --twitter6 : #2bc4ff;

    --facebook : #3C5898;
    --facebook2 : #1778F2;
    --facebook3 :#3b5998;
    --facebook4 : #4267B3;
}
body { background:#edf6ee; font-family: 'Poppins', "Arial Narrow", Arial, sans-serif; font-size: 16px; line-height: 30px; overflow-x:hidden; position:relative; }
.image-content{ margin-top: 40px; margin-bottom: 15px; width: 100px; height: 100px; background-color: #edf6ee; border-radius: 100px; border: 1px solid #ffffff; box-shadow: 2px 2px 2px #333333; }
.heading { text-align: center; }
.heading span { text-align: center !important; font-size: 28px; color: #22bab1; font-weight: 500; display: inline-block; margin-bottom: 5px; border-bottom: 2px solid; border-image: linear-gradient(to right, #28a745 , #22bab1, #a6d65e); border-image-slice: 2%; }
.heading p{ font-size: 12px; color: #22bab1; font-style: italic; margin-bottom: 10px; }
a { color: #ffffff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: none; }
/*START STYLE TOMBOL-TOMBOL UTAMA*/
.kontak-wrapper { width: 100%; }
.kontak-item { width: 100%; margin-bottom: 10px; }
.kontak-item a { text-decoration: none; }
.kontak-box { position: relative; display: flex; align-items: center; justify-content: center; /* tengah secara horizontal */ padding: 16px 20px 16px 50px; width: 100%; border-radius: 10px; text-decoration: none; background-color: #ffffff; transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); overflow: hidden; }
.rsp-spgdt i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 25px; color: #FF0000; transition: transform 0.4s ease, color 0.4s ease; }
.rsp-spgdt span { font-size: 18px; color: #333738; flex: 1; text-align: center; }
.rsp-spgdt:hover span { color: #ffffff; }
.rsp-spgdt:hover { background-color: #FF0000; color: #ffffff; transform: scale(1.03); box-shadow: 0 0 1px #FF0000, 0 0 5px #FF0000; }
.rsp-spgdt:hover i { transform: translateY(-50%) translateX(10px); color: #ffffff; }
.rsp-whastapp i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 25px; color: #28a745; transition: transform 0.4s ease, color 0.4s ease; }
.rsp-whastapp span { font-size: 18px; color: #333738; flex: 1; text-align: center; }
.rsp-whastapp:hover span { color: #ffffff; }
.rsp-whastapp:hover { background-color: #28a745; color: #ffffff; transform: scale(1.03); box-shadow: 0 0 1px #28a745, 0 0 5px #28a745; }
.rsp-whastapp:hover i { transform: translateY(-50%) translateX(10px); color: #ffffff; }
.rsp-jadwal i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 25px; color: #22BAB1; transition: transform 0.4s ease, color 0.4s ease; }
.rsp-jadwal span { font-size: 18px; color: #333738; flex: 1; text-align: center; }
.rsp-jadwal:hover span { color: #ffffff; }
.rsp-jadwal:hover { background-color: #22BAB1; color: #ffffff; transform: scale(1.03); box-shadow: 0 0 1px #22BAB1, 0 0 5px #22BAB1; }
.rsp-jadwal:hover i { transform: translateY(-50%) translateX(10px); color: #ffffff; }
.rsp-mjkn i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 25px; color: #4267B3; transition: transform 0.4s ease, color 0.4s ease; }
.rsp-mjkn span { font-size: 18px; color: #333738; flex: 1; text-align: center; }
.rsp-mjkn:hover span { color: #ffffff; }
.rsp-mjkn:hover { background-color: #4267B3; color: #ffffff; transform: scale(1.03); box-shadow: 0 0 1px #4267B3, 0 0 5px #4267B3; }
.rsp-mjkn:hover i { transform: translateY(-50%) translateX(10px); color: #ffffff; }
.rsp-nuha i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 25px; color: #8134AF; transition: transform 0.4s ease, color 0.4s ease; }
.rsp-nuha span { font-size: 18px; color: #333738; flex: 1; text-align: center; }
.rsp-nuha:hover span { color: #ffffff; }
.rsp-nuha:hover { background-color: #8134AF; color: #8134AF; transform: scale(1.03); box-shadow: 0 0 1px #8134AF, 0 0 5px #8134AF; }
.rsp-nuha:hover i { transform: translateY(-50%) translateX(10px); color: #ffffff; }
.rsp-kritik i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 25px; color: #2bc4ff; transition: transform 0.4s ease, color 0.4s ease; }
.rsp-kritik span { font-size: 18px; color: #333738; flex: 1; text-align: center; }
.rsp-kritik:hover span { color: #ffffff; }
.rsp-kritik:hover { background-color: #2bc4ff; color: #2bc4ff; transform: scale(1.03); box-shadow: 0 0 1px #2bc4ff, 0 0 5px #2bc4ff; }
.rsp-kritik:hover i { transform: translateY(-50%) translateX(10px); color: #ffffff; }
/*END STYLE TOMBOL-TOMBOL UTAMA*/
/*START STYLE SOSMED DAN KONTAK KAMI*/
.rsp-sosmed-wrapper { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 20px; }
.rsp-sosmed-wrapper a{ text-decoration: none; }
.rsp-sosmed-box { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; text-decoration: none; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s, box-shadow 0.4s; will-change: transform, box-shadow; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.rsp-sosmed { font-size: 22px; transition: color 0.4s ease-in-out; color: #fff; }
.rsp-sosmed-box:hover { transform: scale(1.1); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); }
.rsp-igsatu { background-color: #e1306c; }
.rsp-igsatu:hover { background-color: #ffffff; }
.rsp-igsatu:hover .rsp-sosmed { color: #e1306c; }
.rsp-ttsatu { background-color: #000000; }
.rsp-ttsatu:hover { background-color: #ffffff; }
.rsp-ttsatu:hover .rsp-sosmed { color: #000000; }
.rs-fbsatu { background-color: #1877f2; }
.rs-fbsatu:hover { background-color: #ffffff; }
.rs-fbsatu:hover .rsp-sosmed { color: #1877f2; }
.rsp-ytsatu { background-color: #ff0000; }
.rsp-ytsatu:hover { background-color: #ffffff; }
.rsp-ytsatu:hover .rsp-sosmed { color: #ff0000; }
.rsp-websatu { background-color: #a8d55e; }
.rsp-websatu:hover { background-color: #ffffff; }
.rsp-websatu:hover .rsp-sosmed { color: #a8d55e; }
.rsp-googlesatu { background-color: #28a745; }
.rsp-googlesatu:hover { background-color: #ffffff; }
.rsp-googlesatu:hover .rsp-sosmed { color: #28a745; }
/*END STYLE SOSMED DAN KONTAK KAMI*/
/*START SETTINGAN MEDIA LAYOUT*/
@media (max-width: 768px) { .rsp-sosmed-box { width: 45px; height: 45px; } .rsp-sosmed { font-size: 16px; } }
@media (max-width: 480px) { .rsp-sosmed-box { width: 40px; height: 40px; } .rsp-sosmed { font-size: 16px; } .heading p{ font-size: 16px; margin-bottom: 1px; } }
@media (min-width: 768px) { .kontak-wrapper { grid-template-columns: 1fr 1fr; } }
/*START SETTINGAN MEDIA LAYOUT*/