/*
  This file contains custom CSS rules to supplement Tailwind CSS.
*/

body {
    font-family: 'Inter', sans-serif;
}

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

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.hero-bg {
    background-image: linear-gradient(rgba(20, 29, 47, 0.6), rgba(20, 29, 47, 0.6)), url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=2670&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
}

/* Style for inner page banners */
.page-banner {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Add a subtle lift effect on hover for cards */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

/* Style for scrolled header */
.header-scrolled {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: white; /* More opaque on scroll */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0,
 0, 0.06);
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

.service-section {
    scroll-margin-top: 100px; 
}