/* style.css */
:root {
    --color-primary: hsl(205, 78%, 51%); /* Tailwind sky-600 */
    --color-primary-dark: hsl(205, 85%, 41%); /* Tailwind sky-700 */
    --color-primary-light: hsl(205, 90%, 89%); /* Tailwind sky-200 */

    --color-text-base: hsl(215, 16%, 47%); /* Tailwind slate-600 */
    --color-text-heading: hsl(215, 28%, 17%); /* Tailwind slate-900 */
    --color-text-on-dark: hsl(210, 17%, 82%); /* Tailwind slate-300 */
    --color-text-light: hsl(0, 0%, 100%); /* white */

    --color-background-body: hsl(220, 30%, 96%); /* Tailwind slate-50 */
    --color-background-card: hsl(0, 0%, 100%); /* white */
    --color-background-section-alt: hsl(220, 25%, 93%); /* Tailwind slate-100 */
    --color-background-footer: hsl(220, 13%, 18%); /* Tailwind slate-800 */

    --color-background-overlay: rgba(0, 0, 0, 0.5);
    --color-background-overlay-hero: rgba(0, 0, 0, 0.6);
    --color-background-overlay-contact: rgba(226, 232, 240, 0.7); /* slate-200 with opacity */

    --font-heading: 'Archivo Black', sans-serif;
    --font-body: 'Roboto', sans-serif;

    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem; /* Tailwind rounded-lg is often 0.5rem */
    --border-radius-lg: 0.75rem; /* Tailwind rounded-xl is often 0.75rem */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --header-height: 80px; /* Approximate, adjust if needed */

    --transition-duration: 0.3s;
    --transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Non-linear example */
    --transition-timing-smooth: ease-in-out;
}

/* Base Styles */
body {
    font-family: var(--font-body);
    color: var(--color-text-base); /* Default text color */
    background-color: var(--color-background-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
    line-height: 1.3;
}

section h2 { /* Ensure section titles are prominent */
    color: var(--color-text-heading);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-duration) var(--transition-timing-smooth);
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom space under images */
}

/* Header */
header#main-header { /* Assuming an ID if needed for more specific targeting */
    /* Tailwind sticky top-0 z-50 bg-white shadow-md */
    transition: box-shadow var(--transition-duration) var(--transition-timing-smooth);
}

#mobile-menu a {
    transition: background-color var(--transition-duration) var(--transition-timing-smooth), color var(--transition-duration) var(--transition-timing-smooth);
}

/* Hero Section */
#hero {
    color: var(--color-text-light); /* Ensured by HTML */
}
#hero h1, #hero p {
    color: var(--color-text-light); /* Explicitly white */
}
#hero .bg-black.bg-opacity-60 {
    background-color: var(--color-background-overlay-hero) !important; /* Ensure override if Tailwind specificity is higher */
}

/* General Button Styles (enhancing Tailwind) */
.btn, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-body);
    font-weight: 600; /* semibold */
    padding: 0.75rem 1.5rem; /* Default padding */
    border-radius: var(--border-radius-md);
    transition: background-color var(--transition-duration) var(--transition-timing-smooth),
                transform var(--transition-duration) var(--transition-timing-function),
                box-shadow var(--transition-duration) var(--transition-timing-smooth);
    cursor: pointer;
    text-align: center;
    /* Tailwind handles specific bg/text colors */
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-lg);
}
.btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    transform: translateY(0px) scale(1);
    box-shadow: var(--shadow-sm);
}

/* Card Styles */
.card {
    background-color: var(--color-background-card);
    /* Tailwind utilities like p-8, rounded-xl, shadow-xl are used in HTML */
    transition: transform var(--transition-duration) var(--transition-timing-function),
                box-shadow var(--transition-duration) var(--transition-timing-smooth);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a grid */
}

.card-image { /* Div wrapping the image */
    /* Ensure image container allows image to be centered if not full width */
    /* The HTML specific classes like h-56 and object-cover handle image display */
    position: relative; /* For potential overlays on image if needed */
    width: 100%; /* Ensure it spans the card padding */
    /* HTML uses text-center on this element for pricing cards */
}
.card-image img {
    /* HTML uses w-full h-56 object-cover rounded-lg shadow-md mx-auto */
    /* object-fit: cover; Applied in HTML */
    border-bottom: 1px solid var(--color-background-section-alt); /* Subtle separator */
}

.card-content {
    /* Tailwind p-X handles padding */
    flex-grow: 1; /* Content takes available space */
    display: flex;
    flex-direction: column;
    /* HTML uses text-center here for pricing cards */
}
.card-content h3 {
    font-family: var(--font-heading);
    color: var(--color-text-heading);
}
.card-content p {
    color: var(--color-text-base);
}
.card-content ul {
    text-align: left; /* Overrides card's text-center if any */
}
.card-content .btn, .card-content button { /* Button at the bottom of the card */
    margin-top: auto; /* Pushes button to bottom if card-content is flex-grow */
}

/* Our Process Section - Timeline */
.timeline-item .bg-sky-600.text-white { /* Numbered circle */
    box-shadow: var(--shadow-md);
}

/* Statistics Section */
#statistics .bg-black.bg-opacity-50 {
    background-color: var(--color-background-overlay) !important;
}
#statistics [data-count] {
    color: var(--color-text-light);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
#statistics p:not([data-count]) {
    color: var(--color-primary-light);
}

/* Contact Section */
#contact .bg-slate-200.bg-opacity-70 {
   background-color: var(--color-background-overlay-contact) !important;
}
#contactForm label {
    color: var(--color-text-heading);
    font-weight: 500;
}
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm textarea,
#contactForm select {
    background-color: var(--color-background-card); /* white */
    border: 1px solid hsl(215, 20%, 89%); /* slate-300 */
    color: var(--color-text-base);
    transition: border-color var(--transition-duration) var(--transition-timing-smooth),
                box-shadow var(--transition-duration) var(--transition-timing-smooth);
    /* Tailwind classes handle padding and rounding */
}
#contactForm input[type="text"]:focus,
#contactForm input[type="email"]:focus,
#contactForm textarea:focus,
#contactForm select:focus {
    border-color: var(--color-primary);
    /* Tailwind focus:ring-2 focus:ring-sky-500 handles the ring */
    outline: none;
}
#contactForm select { /* Custom select arrow if Tailwind doesn't provide a nice default */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25em 1.25em;
    padding-right: 2.5rem;
}


/* Footer */
footer {
    background-color: var(--color-background-footer);
    color: var(--color-text-on-dark);
}
footer h4, footer h5 {
    color: var(--color-text-light);
}
footer a {
    color: var(--color-text-on-dark);
}
footer a:hover {
    color: var(--color-primary-light);
}
footer hr {
    border-color: hsl(220, 13%, 30%); /* slate-700 */
}
footer .social-links a { /* If you add a class to the social link ul/div */
    display: inline-block;
    /* Add more styling if needed for text-based social links */
}

/* Parallax Background Effect */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (prefers-reduced-motion: reduce) {
    .parallax-bg {
        background-attachment: scroll;
    }
}

/* Scroll Animations (JS will toggle 'is-visible') */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s var(--transition-timing-smooth),
                transform 0.6s var(--transition-timing-smooth);
    will-change: opacity, transform;
}

.animate-on-scroll.is-visible.fadeInUp {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.fadeInUp { transform: translateY(40px); }

.animate-on-scroll.is-visible.fadeInDown {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.fadeInDown { transform: translateY(-40px); }

.animate-on-scroll.is-visible.slideInLeft {
    opacity: 1;
    transform: translateX(0);
}
.animate-on-scroll.slideInLeft { transform: translateX(-50px); }

.animate-on-scroll.is-visible.slideInRight {
    opacity: 1;
    transform: translateX(0);
}
.animate-on-scroll.slideInRight { transform: translateX(50px); }

.animate-on-scroll.is-visible.zoomIn {
    opacity: 1;
    transform: scale(1);
}
.animate-on-scroll.zoomIn { transform: scale(0.85); }


/* Styling for success.html page */
.success-page-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - var(--header-height)); /* Assumes header might be on this page */
    text-align: center;
    padding: 2rem; /* Or use Tailwind padding */
    background-color: var(--color-background-body);
}
.success-page-container .icon-success { /* Example for an SVG or font icon */
    width: 80px;
    height: 80px;
    color: var(--color-primary); /* Or a success green */
    margin-bottom: 1.5rem;
}
/* .success-page-container h1, .success-page-container p handled by base styles + Tailwind */

/* Styling for privacy.html and terms.html pages */
.page-content-container {
    padding-top: calc(var(--header-height) + 2rem); /* Header height + some space */
    padding-bottom: 4rem;
    max-width: 800px; /* Readable content width */
    margin-left: auto;
    margin-right: auto;
}
.page-content-container h1 { margin-bottom: 1.5rem; }
.page-content-container h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.page-content-container p,
.page-content-container ul,
.page-content-container ol {
    margin-bottom: 1rem;
    line-height: 1.7;
}
.page-content-container ul,
.page-content-container ol {
    padding-left: 1.5rem; /* Standard list indentation */
}

/* Cookie Popup (already styled inline in HTML, this is for reference/override) */
#cookie-popup {
    /* font-family: var(--font-body); */
}
#cookie-popup #accept-cookie:hover {
     /* background-color: var(--color-primary-dark) !important; */ /* If inline style needs override */
}

/* "Read more" link style */
.read-more-link {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding-bottom: 3px;
}
.read-more-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-duration) var(--transition-timing-function);
}
.read-more-link:hover::after,
.read-more-link:focus::after {
    transform: scaleX(1);
}
.read-more-link:hover,
.read-more-link:focus {
    color: var(--color-primary-dark); /* Ensure text color changes too */
}

/* Fix for image containers if they need fixed height and object-fit for all cards */
.image-container { /* Use this class to wrap images in cards needing this behavior */
    width: 100%; /* Or specific width */
    height: 200px; /* Example fixed height */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem; /* Spacing */
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure body text is not too light on light backgrounds */
body {
    /* Tailwind text-slate-700 from HTML is fine */
    /* color: var(--color-text-base); Applied */
}