/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/
:root {
	--cnvs-themecolor: #3399ff;
	--cnvs-themecolor-rgb: 51, 153, 255;
}

 #header-wrap {
    border-bottom: 0px;
}
 
   
 .list-group-item {
            color: #333;
            padding: 10px 15px;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .list-group-item:hover {
            background-color: #f8f9fa; /* Efek hover */
        }

        .list-group-item.active {
            background-color: #007bff; /* Warna aktif */
            color: white !important;
            font-weight: bold;
        }

        .instagram-float {
            position: fixed;
            bottom: 40px;
            right: 20px;
            width: 55px; /* Ukuran icon */
            height: 55px;
            background-color: #FFF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            transition: transform 0.3s ease-in-out;
        }
        .instagram-float img {
            width: 50px;  
            height: 50px;
        }
        .instagram-float:hover {
            transform: scale(1.1);
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .blink-button {
            background: #ff4757;
            color: white;
            padding: 12px 20px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            animation: blink 1s infinite;
        }
        @keyframes glow {
            0% { box-shadow: 0 0 5px #ff4757; }
            50% { box-shadow: 0 0 20px #ff6b81; }
            100% { box-shadow: 0 0 5px #ff4757; }
        }

        .glow-button {
            background: #ff4757;
            color: white;
            padding: 12px 20px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            animation: glow 1.5s infinite alternate;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            50% { transform: translateX(3px); }
            75% { transform: translateX(-3px); }
        }

        @keyframes blink-shake {
            0% { opacity: 1; }
            50% { opacity: 0.5; transform: scale(1.05); }
            100% { opacity: 1; }
        }

        .shake-button {
            background: #ff4757;
            color: white;
            padding: 12px 20px;
            font-size: 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            animation: blink-shake 1s infinite, shake 0.5s infinite alternate;
        }

        .child-category {
            margin-left: 15px; /* Bikin child agak menjorok ke dalam */
            padding-left: 10px;
            border-left: 2px solid #ddd; /* Kasih garis biar lebih jelas */
        }

      .responsive-text {
            font-size: 30px; /* Default (Laptop besar) */
        }

        @media (max-width: 1024px) { /* Tablet */
            .responsive-text {
                font-size: 26px;
            }
        }

        @media (max-width: 768px) { /* Ponsel */
            .responsive-text {
                font-size: 22px;
            }
        }

        @media (max-width: 480px) { /* Ponsel kecil */
            .responsive-text {
                font-size: 18px;
            }
        }