/* Custom color classes that weren't generated by the CDN version */
.text-\[\#A8DADC\] { color: #A8DADC; }
.text-\[\#FF6B6B\] { color: #FF6B6B; }
.text-\[\#40514E\] { color: #40514E; }

.bg-\[\#A8DADC\] { background-color: #A8DADC; }
.bg-\[\#FF6B6B\] { background-color: #FF6B6B; }
.bg-\[\#40514E\] { background-color: #40514E; }

.bg-\[\#A8DADC\]\/10 { background-color: rgba(168, 218, 220, 0.1); }
.bg-\[\#A8DADC\]\/20 { background-color: rgba(168, 218, 220, 0.2); }
.bg-\[\#FF6B6B\]\/20 { background-color: rgba(255, 107, 107, 0.2); }
.bg-\[\#FF6B6B\]\/30 { background-color: rgba(255, 107, 107, 0.3); }
.bg-\[\#A8DADC\]\/30 { background-color: rgba(168, 218, 220, 0.3); }
.bg-\[\#82C96A\]\/30 { background-color: rgba(130, 201, 106, 0.3); }

.border-\[\#A8DADC\] { border-color: #A8DADC; }
.border-\[\#FF6B6B\] { border-color: #FF6B6B; }
.border-\[\#A8DADC\]\/20 { border-color: rgba(168, 218, 220, 0.2); }
.border-\[\#A8DADC\]\/50 { border-color: rgba(168, 218, 220, 0.5); }
.border-\[\#A8DADC\]\/60 { border-color: rgba(168, 218, 220, 0.6); }
.border-\[\#FF6B6B\]\/30 { border-color: rgba(255, 107, 107, 0.3); }
.border-\[\#FF6B6B\]\/55 { border-color: rgba(255, 107, 107, 0.55); }
.border-\[\#FF6B6B\]\/33 { border-color: rgba(255, 107, 107, 0.33); }
.border-dashed { border-style: dashed; }

.from-\[\#A8DADC\] { --tw-gradient-from: #A8DADC; }
.from-\[\#FF6B6B\] { --tw-gradient-from: #FF6B6B; }
.to-\[\#A8DADC\] { --tw-gradient-to: #A8DADC; }
.to-\[\#FF6B6B\] { --tw-gradient-to: #FF6B6B; }
.to-\[\#82C96A\]\/30 { --tw-gradient-to: rgba(130, 201, 106, 0.3); }

.from-\[\#f9e4dc\]\/90 { --tw-gradient-from: rgba(249, 228, 220, 0.9); }
.to-\[\#F8F6F2\]\/90 { --tw-gradient-to: rgba(248, 246, 242, 0.9); }
.from-\[\#FFF8F0\] { --tw-gradient-from: #FFF8F0; }
.to-\[\#F9E4DC\] { --tw-gradient-to: #F9E4DC; }
.via-\[\#F9E4DC\] { --tw-gradient-stops: var(--tw-gradient-from), #F9E4DC, var(--tw-gradient-to, rgba(249, 228, 220, 0)); }
.via-\[\#fff8f0\] { --tw-gradient-stops: var(--tw-gradient-from), #FFF8F0, var(--tw-gradient-to, rgba(255, 248, 240, 0)); }

.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

.hover\:text-\[\#FF6B6B\]:hover { color: #FF6B6B; }
.hover\:text-\[\#A8DADC\]:hover { color: #A8DADC; }
.hover\:text-white:hover { color: white; }
.hover\:bg-\[\#A8DADC\]:hover { background-color: #A8DADC; }
.hover\:bg-\[\#FF6B6B\]:hover { background-color: #FF6B6B; }
.hover\:bg-\[\#A8DADC\]\/10:hover { background-color: rgba(168, 218, 220, 0.1); }

.hover\:from-\[\#FF6B6B\]:hover { --tw-gradient-from: #FF6B6B; }
.hover\:to-\[\#A8DADC\]:hover { --tw-gradient-to: #A8DADC; }

.hover\:border-\[\#FF6B6B\]:hover { border-color: #FF6B6B; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.10); }
.hover\:scale-\[1\.045\]:hover { transform: scale(1.045); }
.hover\:-translate-x-full:hover { transform: translateX(-100%); }
.hover\:translate-x-0:hover { transform: translateX(0); }
.hover\:rotate-3:hover { transform: rotate(3deg); }
.hover\:rotate-\(-1deg\):hover { transform: rotate(-1deg); }
.hover\:translateY\(-6px\):hover { transform: translateY(-6px); }
.hover\:translate-y-\(-6px\):hover { transform: translateY(-6px); }
.hover\:underline:hover { text-decoration: underline; }

.group-hover\:text-\[\#FF6B6B\] { color: #FF6B6B; }
.group-hover\:opacity-100 { opacity: 1; }
.group-hover\:scale-110 { transform: scale(1.1); }
.group-hover\:rotate-3 { transform: rotate(3deg); }
.group-hover\:-translate-x-full { transform: translateX(-100%); }
.group-hover\:translate-x-0 { transform: translateX(0); }

.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

/* Add bg-opacity and bg-blur utility classes */
.backdrop-blur-md { backdrop-filter: blur(12px); }
.bg-white\/70 { background-color: rgba(255, 255, 255, 0.7); }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7); }
.bg-black\/75 { background-color: rgba(0, 0, 0, 0.75); }
.bg-gray-100\/50 { background-color: rgba(243, 244, 246, 0.5); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-opacity-75 { --tw-bg-opacity: 0.75; }
.drop-shadow { filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)); }

/* Transition utilities */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

.ease-\[cubic-bezier\(\.77\,0\,\.18\,1\)\] { transition-timing-function: cubic-bezier(.77,0,.18,1); }

/* Transform utilities */
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-full { transform: translateX(100%); }
.overflow-hidden { overflow: hidden; }
.inset-0 { top: 0px; right: 0px; bottom: 0px; left: 0px; }
.absolute { position: absolute; }
.relative { position: relative; }
.z-10 { z-index: 10; }

/* Other useful utility classes that might be missing */
.rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.rounded-b-3xl { border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.rotate-3 { transform: rotate(3deg); }
.blur-xl { filter: blur(24px); }

/* Animation utilities */
.animate-fadeInUp { animation: fadeInUp 0.4s cubic-bezier(.4,0,.2,1) both; }

/* Ota yhteyttä button styling */
.ota-btn-bg {
  z-index: 0;
}

.group:hover .ota-btn-bg:first-child {
  transform: translateX(-100%);
}

.group:hover .ota-btn-bg:last-of-type {
  transform: translateX(0);
}

/* Fix for the Ota yhteyttä button background */
.group-hover\:-translate-x-full { transform: translateX(-100%); }
.group-hover\:translate-x-0 { transform: translateX(0); }