/* ===================================================================
   MASTER STYLESHEET - HEALING WITH SKYFIRE
   This file contains all styles for the entire website.
   =================================================================== */

:root {
    --fire-orange: #ff6b35;
    --sky-blue: #4a90e2;
    --warm-gold: #f4a261;
    --deep-purple: #2a1810;
}

/* --- General Body & Smooth Scrolling --- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #abbbd4; /* A deep navy blue as a fallback */
    background-image: linear-gradient(to bottom, #354969, #57616b); /* Fades from navy to Bootstrap's dark */
}

/* --- Navigation Enhancements --- */
.navbar {
    transition: background-color 0.4s ease;
}

.navbar-scrolled {
    background-color: rgba(33, 37, 41, 0.9) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.navbar .nav-link {
    transition: color 0.3s ease;
}

.navbar .nav-link.active {
    color: var(--bs-warning) !important;
    font-weight: 600;
}

.navbar-brand {
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* --- Hero Section & Parallax --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Fallback for browsers without JS parallax */
    z-index: 1;
    transition: transform 0.2s ease-out;
}

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, rgba(42, 24, 16, 0.7), rgba(0,0,0,0.5) 50%, rgba(74, 144, 226, 0.5));
    z-index: 2;
}

.hero-section .container { z-index: 3; }
.hero-title { text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); }

/* --- General Card & Button Styling --- */
/* Cards (dark glass look) */
[data-bs-theme="dark"] .card {
  background-color: rgba(255, 255, 255, 0.507);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 6px 25px rgba(255, 123, 84, 0.25);
}

/* Buttons (fire glow on hover) */
[data-bs-theme="dark"] .btn-warning {
  background: linear-gradient(45deg, var(--fire-orange), var(--warm-gold));
  color: #fff;
}
[data-bs-theme="dark"] .btn-warning:hover {
  box-shadow: 0 0 20px rgba(255, 123, 84, 0.5);
}


/* --- Accordion (FAQ) Icon Animation --- */
.accordion-button::after {
    transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
}

/* --- Testimonial Carousel (Main and Mini) --- */
.testimonial-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0 2rem 0;
    position: relative;
}

.testimonial-content::before {
    content: '\f10d';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 5rem;
    color: var(--bs-warning);
    opacity: 0.1;
    position: absolute;
    top: -10px;
    left: 10px;
}

.testimonial-avatar {
    width: 80px; height: 80px; border-radius: 50%; background-color: var(--bs-warning);
    color: var(--bs-dark); font-size: 2rem; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.5rem auto; border: 3px solid rgba(255, 255, 255, 0.2);
}

.testimonial-text { font-size: 1.2rem; font-style: italic; line-height: 1.6; margin-bottom: 1.5rem; }
.testimonial-author { font-weight: 600; font-size: 1rem; color: var(--bs-light); }

.carousel-control-prev-icon,
.carousel-control-next-icon { background-color: rgba(0, 0, 0, 0.3); border-radius: 50%; padding: 20px; }

.carousel-indicators [data-bs-target] { background-color: #fff; opacity: 0.5; width: 12px; height: 12px; border-radius: 50%; margin: 0 5px; }
.carousel-indicators .active { opacity: 1; background-color: var(--bs-warning); }

/* --- Automatic Story Rotator (Testimonials Page) --- */
#story-rotator {
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#story-display { max-height: 350px; overflow-y: auto; padding-right: 15px; transition: opacity 0.4s ease-in-out; }
#story-display.fading-out { opacity: 0; }
#story-display blockquote { font-size: 1.1rem; line-height: 1.6; border-left: 3px solid var(--bs-warning); padding-left: 1.5rem; margin: 0; }
#story-display footer { margin-top: 1rem; text-align: right; }

/* Custom Scrollbar for Story Rotator */
#story-display::-webkit-scrollbar { width: 6px; }
#story-display::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
#story-display::-webkit-scrollbar-thumb { background: var(--bs-warning); border-radius: 3px; }
#story-display::-webkit-scrollbar-thumb:hover { background: var(--fire-orange); }

#story-selectors { list-style: none; padding: 0; margin-top: 2rem; display: flex; justify-content: center; gap: 15px; }
#story-selectors li { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; }
#story-selectors li:hover { background-color: rgba(255, 255, 255, 0.6); }
#story-selectors li.active { background-color: var(--bs-warning); }

/* --- Back to Top Button --- */
.back-to-top { position: fixed; visibility: hidden; opacity: 0; right: 20px; bottom: 20px; z-index: 999;
    background: var(--bs-warning); width: 44px; height: 44px; border-radius: 50%;
    transition: all 0.4s; color: var(--bs-dark); }
.back-to-top i { font-size: 24px; }
.back-to-top:hover { background: var(--fire-orange); color: white; }
.back-to-top.active { visibility: visible; opacity: 1; }

/* --- Dark Mode Specifics --- */
[data-bs-theme="dark"] .card { background-color: var(--bs-secondary) !important; }
[data-bs-theme="dark"] .bg-secondary { background-color: #343a40 !important; }


/* ===================================================================
   MOBILE RESPONSIVENESS FIXES
   This section applies only to screens 768px wide or smaller.
   =================================================================== */
@media (max-width: 768px) {
    .hero-title.display-3 {
        font-size: 2.5rem; 
        margin-top: 4rem; /* Try 3.5rem or even 4rem */
    }
}
    /* Reduce general page title font size */
    .display-4 {
        font-size: 2.2rem;
    }

    /* Adjust the Story Rotator on the testimonials page */
    #story-rotator {
        min-height: auto; /* Let it shrink */
        margin-top: 2rem;
    }

    #story-display {
        max-height: 300px; /* Make it a bit shorter on mobile */
    }

    /* Adjust padding in testimonial carousels */
    .testimonial-content {
        padding: 0.5rem;
    }

    .testimonial-text {
        font-size: 1.1rem;
    }

    /* Center-align the footer content on mobile */
    footer .text-md-end {
        text-align: center !important;
        margin-top: 1rem;
    }
/* ===================================================================
   NEW: Magic Glow Effect for Services Image
   =================================================================== */

/* Define the pulsing animation */
@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 15px rgba(244, 162, 97, 0.4); /* --warm-gold */
  }
  50% {
    box-shadow: 0 0 35px rgba(255, 107, 53, 0.6); /* --fire-orange, more intense */
  }
  100% {
    box-shadow: 0 0 15px rgba(244, 162, 97, 0.4); /* --warm-gold */
  }
}

/* Apply the animation to the specific image on the services page */
#services-hero-image {
  /* Apply the animation: 5 seconds long, infinite loop, smooth easing */
  animation: pulse-glow 5s infinite ease-in-out;
  
  /* Ensure the shadow respects the rounded corners of the image */
  border-radius: var(--bs-border-radius); 
}
/* ===================================================================
   NEW: Warping Energy Field (Melting) Effect
   =================================================================== */

/* This keyframe animation slowly changes the noise pattern, creating the "melting" effect */
@keyframes warp-animation {
  0% {
    /* The feTurbulence element is targeted inside the filter */
    filter: url(#warp-effect);
  }
  50% {
    /* We change the baseFrequency to a slightly different value to create movement */
    --baseFrequency: 0.02 0.03; 
    filter: url(#warp-effect);
  }
  100% {
    /* Back to the original frequency for a smooth loop */
    filter: url(#warp-effect);
  }
}

/* This is the container for our image */
#warping-image-container {
  border-radius: var(--bs-border-radius);
  overflow: hidden; /* This is crucial to keep the effect contained */
  
  /* Apply the filter and the animation */
  filter: url(#warp-effect);
  animation: warp-animation 20s ease-in-out infinite alternate;
}

#warping-image-container img {
  /* Make sure the image fills the container */
  display: block;
  width: 100%;
}