.transition-all {
     transition: all 0.3s ease;
}

.hero-overlay {
     background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
}

.primary-gradient {
     background: linear-gradient(135deg, #227d40, #2ead6e);
}

/* Dark mode styles */
.dark .dark-card {
     background-color: #1E1E1E;
}

.gallery-item {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
     transform: scale(1.03);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.testimonial-card {
     transition: transform 0.3s ease;
}

.testimonial-card:hover {
     transform: translateY(-5px);
}

.service-card {
     transition: all 0.3s ease;
}

.service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.dark .service-card:hover {
     box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
}

.dark .text-dark {
     color: #E5E5E5;
}

.dark .bg-dark {
     background-color: #121212;
}

.dark .bg-card-dark {
     background-color: #1E1E1E;
}

.dark .border-dark {
     border-color: #333;
}

.fade-in {
     animation: fadeIn 1s ease-in-out;
}

.slide-up {
     animation: slideUp 0.8s ease-out;
}

.nav-link {
     position: relative;
}

.nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -5px;
     left: 50%;
     background-color: #227d40;
     transition: all 0.3s ease;
}

.nav-link:hover::after {
     width: 100%;
     left: 0;
}

.back-to-top {
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
}

/* Enhanced dark mode styles */
.dark body {
     background-color: #121212;
     color: #e5e5e5;
}

.dark .bg-white {
     background-color: #1e1e1e !important;
}

.dark .bg-gray-50 {
     background-color: #1a1a1a !important;
}

.dark .text-gray-900 {
     color: #e5e5e5 !important;
}

.dark .text-gray-800 {
     color: #e5e5e5 !important;
}

.dark .text-gray-700 {
     color: #d1d5db !important;
}

.dark .text-gray-600 {
     color: #9ca3af !important;
}

.dark .border-gray-300 {
     border-color: #374151 !important;
}

.dark .border-gray-200 {
     border-color: #374151 !important;
}

.dark .shadow-md {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-lg {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

/* CSS untuk tombol-tombol sosial */
.social-menu {
     position: fixed;
     bottom: 20px;
     left: 20px;
     z-index: 9999;
     display: flex;
     flex-direction: column-reverse;
     /* Menempatkan tombol utama di bawah */
     align-items: flex-start;
}

/* Checkbox untuk toggle */
.social-toggle {
     display: none;
}

/* Tombol utama */
.social-label {
     background-color: #333;
     color: #fff;
     border-radius: 50%;
     width: 50px;
     height: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 20px;
     cursor: pointer;
     transition: transform 0.3s ease;
}

/* Social button container */
.social-buttons {
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 10px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     /* Dimulai dari bawah */
     transition: all 0.3s ease;
}

/* Social buttons ketika checkbox diceklis */
.social-toggle:checked~.social-buttons {
     opacity: 1;
     visibility: visible;
     transform: translateY(-10px);
     /* Naik ke atas */
}

.social-button {
     display: flex;
     align-items: center;
     gap: 10px;
     background-color: #25d366;
     /* Default WhatsApp color */
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 10px;
     text-align: left;
     cursor: pointer;
     width: 180px;
     transition: transform 0.3s ease;
}

.social-button.phone {
     background-color: #34b7f1;
     /* Warna Telepon */
}

.social-button img {
     width: 30px;
     height: 30px;
}

.social-button span {
     display: inline-block;
     flex-grow: 1;
}

.social-button:hover {
     transform: scale(1.1);
}

/* Animasi rotasi untuk tombol utama */
.social-label:hover {
     transform: rotate(90deg);
}

.social-button.tokopedia {
     background-color: #42b549;
     /* Warna Tokopedia */
}

.social-button.shopee {
     background-color: #f36d38;
     /* Warna Shopee */
}