/* Custom CSS for Castelo Óleos */



/* Increased Border Radius for Cards and Features */
.card, .feature-card, .service-card, .contact-feature {
    border-radius: 1rem; /* Increased from default */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Add transition for hover effect */
}

/* Hover effect for cards */
.card:hover, .feature-card:hover, .service-card:hover, .contact-feature:hover {
    transform: translateY(-5px); /* Slight lift effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
}

/* Transitions for Buttons */
.btn, .service-btn, .whatsapp-btn {
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions */
}

/* Hover effect for Primary Buttons */
.btn-primary:hover, .whatsapp-btn:hover {
    transform: scale(1.05); /* Slightly enlarge */
    /* Consider adjusting background color if needed */
}

/* Hover effect for Outline Button */
.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background on hover */
    transform: scale(1.05); /* Slightly enlarge */
}

/* Hover effect for Service Buttons */
.service-btn:hover {
    /* Assuming default red is #dc2626, adjust if needed */
    background-color: #c81e1e; /* Slightly darker red */
    transform: scale(1.05); /* Slightly enlarge */
}

/* Ensure smooth scrolling is enabled (already in HTML, but good practice) */
html {
    scroll-behavior: smooth;
}



/* --- Entry Animations (Optimized for Performance) --- */

/* Keyframes for fade-in and slide-up effect */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* Start slightly lower */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Class to apply the animation */
/* Add this class to elements you want to animate on entry */
/* Triggering the animation usually requires JavaScript (e.g., Intersection Observer) */
/* to add an 'active' class when the element scrolls into view. */

.animate-on-entry {
  opacity: 0; /* Start hidden */
  /* Apply animation when an 'active' or similar class is added via JS */
}

.animate-on-entry.active {
  animation: fadeInUp 0.8s ease-out forwards; /* Apply the animation */
  /* 'forwards' keeps the element in its final state (opacity: 1, transform: translateY(0)) */
}

/* Example: Apply to sections and cards */
/* In your HTML, add class="animate-on-entry" to sections and cards */
/* Then use JavaScript to add the 'active' class when they are visible */

/* You can add staggered delays for elements within a container if needed */
/* Example for cards in a grid (requires JS to add delays or specific classes) */
/* .card-grid .card.active:nth-child(1) { animation-delay: 0.1s; } */
/* .card-grid .card.active:nth-child(2) { animation-delay: 0.2s; } */
/* .card-grid .card.active:nth-child(3) { animation-delay: 0.3s; } */