:root {
    /* Light Mode */
    --bg-page: #f8faff;
    --bg-secondary: #ffffff;
    --text-main: #0f172a; /* FIXED: dark text in light mode */
    --text-muted: #64748b;
    --color-primary: #007bff;
    --hero-bg-top: #0a2540;
    --hero-bg-bottom: #00408b;
    --hero-circle-1: rgba(0, 123, 255, 0.15);
    --hero-circle-2: rgba(23, 162, 184, 0.15);
    --hero-circle-3: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0,0,0,0.1);
    --about-badge-background: rgba(255,255,255,0.7);
}

/* ==============================
   BASE
============================== */
html, body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', "Segoe UI", sans-serif;
    background: var(--bg-page);
    color: var(--text-main);
    overflow-x: hidden;
    transition: .4s ease;
}
main {
            flex-grow: 1;
        }

h1, h2, h3, h4, h5, h6, strong { color: var(--text-main); }
.text-muted, .text-secondary { color: var(--text-muted) !important; }
.text-primary { color: var(--color-primary) !important; }

.bg-white, .bg-light, .card, .accordion-body, .form-control {
    background-color: var(--bg-secondary) !important;
    color: var(--text-main) !important;
}

.shadow-lg { box-shadow: 0 1rem 3rem var(--shadow-color) !important; }

/* ==============================
   NAVBAR STYLES (NEW - Transparent & Frosted)
============================== */
.navbar-blur {
    /* 1. Transparent Background, relies on blur for visibility */
    background-color: rgba(10, 37, 64, 0.1) !important; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Slightly stronger shadow for contrast */
    transition: background-color 0.3s ease;
    z-index: 1030; 
}
.navbar-blur .nav-link:hover {
    color: var(--color-primary) !important;
}
.navbar-blur .nav-link.active {
    /* 2. Ensured high visibility for active links */
    color: white !important;
    border-bottom: 2px solid white;
    padding-bottom: 6px;
}
.navbar-blur .navbar-brand,
.navbar-blur .nav-link {
    /* 2. Ensured high visibility for all text */
    color: white !important;
}

/* ==============================
   HERO SECTION*/
        .hero-fire {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(120deg, var(--hero-bg-top), var(--hero-bg-bottom));
            color: #fff;
            /* Added padding-top to compensate for sticky navbar height (approx 70px) */
            padding: 100px 0 70px 0; 
            position: relative;
            overflow: hidden; /* Keep the overflow hidden */
        }
        
        .hero-fire .container { position: relative; z-index: 2; }
        .hero-fire .title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; color: white !important; }
        .hero-fire .subtext { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .9; color: rgba(255, 255, 255, 0.9) !important; }
        

.floating-book {
    max-width: 430px;
    transform: rotate(-3deg);
    transition: .4s ease;
}
.floating-book:hover { transform: rotate(0deg) scale(1.05); }

/* Hero buttons */
#heroButtons a, #mobileHeroButtons a {
            padding: 10px 22px;
            font-size: 1rem;
            width: auto;
            display: inline-block;
        }

/* Hero bottom fade */
.hero-fire::after {
            content:"";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 120px;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, var(--bg-page) 90%); 
            pointer-events: none;
            transition: background 0.5s ease;
            z-index: 2;
        }

.circle-anim {
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  animation: floatBubble 6s infinite ease-in-out;
  opacity:0.18;
  z-index:0;
}

.circle-anim:nth-child(1) { background-color: var(--hero-circle-1); top:10%; left:-60px; }
.circle-anim:nth-child(2) { background-color: var(--hero-circle-2); bottom:15%; right:-60px; animation-delay:1s; }
.circle-anim:nth-child(3) { background-color: var(--hero-circle-3); top:60%; left:40%; animation-delay:2s; }

@keyframes floatBubble {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px) scale(1.05); }
  100% { transform: translateY(0); }
}

/* Floating sales pill on hero */
.sales-pill {
            position: absolute; /* Default to absolute for desktop positioning over book */
            bottom: 20px; 
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(6px);
            padding: 10px 20px; /* Adjusted padding */
            border-radius: 50px; 
            color: white; 
            z-index: 3; 
            border: 1px solid rgba(255,255,255,.3);
            box-shadow: 0 6px 18px rgba(0,0,0,0.1);
            animation: heroPillPulse 3s ease-in-out infinite; /* REVERTED */
            white-space: nowrap;
        }
        
        /* REVERTED KEYFRAMES for fuller pulse */
        @keyframes heroPillPulse { 
            0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
            50% { box-shadow: 0 0 15px 6px rgba(255,255,255,0); }
            100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
        }

/* Soft float animation for hero book */
.floating-book {
  animation: heroFloat 4.5s ease-in-out infinite;
}
@keyframes heroFloat {
  0%   { transform: translateY(0) rotate(-3deg); }
  50%  { transform: translateY(-8px) rotate(-3deg); }
  100% { transform: translateY(0) rotate(-3deg); }
}

.hero-fire .title,
.hero-fire h1 {
  color: #fff !important;
  font-weight: 800 !important;
}
.filter-white {
    filter: brightness(0) invert(1);
}


 /* === HERO SECTION ALIGNMENT FIXES === */

        /* 1. Universal Left-Alignment for Text Column (Desktop & Mobile) */
        .hero-fire .col-lg-6.order-1 {
            /* Force left alignment on the main column container */
            text-align: left !important; 
            display: flex;
            flex-direction: column;
            align-items: flex-start !important;
        }

        /* Remove any conflicting centering classes from child elements */
        .hero-fire .col-lg-6.order-1 > div {
             text-align: left !important;
             width: 100%;
        }
        
        /* 2. Right Column (Book/Pill/Buttons) Alignment & PULL UP FIX */
        .hero-fire .col-lg-6.order-2 {
            text-align: center !important; 
            display: flex;
            flex-direction: column;
            align-items: center; /* Centers the block elements (book/pill) */
            margin-top: -50px; /* PULLS BOOK/PILL UP SLIGHTLY on desktop */
        }

        /* Pill Alignment Refinement: Ensure it stays centered under the book on mobile, and centered relative to the book container on desktop. */
        .sales-pill {
            /* Desktop/Mobile Base: centered relative to its parent container */
            left: 50%;
            transform: translateX(-50%);
        }
        
        @media (max-width: 991.98px) {
            
            /* Resetting desktop margin for mobile */
            .hero-fire .col-lg-6.order-2 {
                margin-top: 0 !important;
            }

            /* Overrides to ensure mobile stacking order works with text aligned left */
            .hero-fire .col-lg-6.order-1 {
                text-align: left !important;
                align-items: flex-start !important;
            }

            /* Pill: Switch to relative flow below the book, centered within the flex column */
            .sales-pill {
                position: relative !important;
                transform: none !important; /* Removes translateX(-50%) */
                left: auto !important;
                bottom: auto !important;
                margin-top: 20px; /* Space between book and pill */
            }

            /* Buttons: Ensure buttons are full width on mobile and stacked */
            #mobileHeroButtons {
                width: 100%;
                margin-top: 18px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }
            #mobileHeroButtons a {
                width: 100%;
            }
        }

/* ==============================
   ABOUT SECTION
============================== */
#about {
    position: relative;
}
.about-image-wrap {
    position: relative;
    display: inline-block;
    width:100%;
    max-width:420px;
    margin:0 auto;
}

.about-image-wrap img {
  animation: none !important;
  transform: none !important;
}

.about-book-img {
    width:100%;
    max-height:420px;
    object-fit:cover;
    border-radius:12px;
    display:block;
    margin:auto;
}

.about-badge {
    position:absolute;
    display:inline-flex;
    gap:8px;
    align-items:center;
    padding:8px 12px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:600;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    border:1px solid rgba(255,255,255,0.4);
    color:var(--text-main);
    animation: badgeFloat 5s ease-in-out infinite;
    white-space:nowrap;
}

/* Desktop pill positions */
.top-badge { top:14px; left:14px; }
.mid-badge { right:14px; top:50%; transform:translateY(-50%); }
.bottom-badge { right:14px; bottom:14px; }

@keyframes badgeFloat {
    0% { transform:translateY(0); opacity:.85; }
    50% { transform:translateY(-6px); opacity:1; }
    100% { transform:translateY(0); opacity:.85; }
}

/* ==============================
   MOBILE RULES
============================== */
@media(max-width: 768px) {

  /* Stack centered */
  .about-image-wrap {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }

  /* Pills become inline items below image */
  .about-badge {
    position:relative !important;
    transform:none !important;
    margin:4px !important;
    animation:none !important;
  }

  .about-pills-group {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
  }

  /* CTA last */
  .about-cta,
  .about-section .btn,
  #heroButtons {
    order:99;
    width:100%;
    text-align:center;
  }

  #heroButtons a { width:100%; }
}

/* ==============================
   THEME BUTTON
============================== */
.theme-btn {
  position:fixed;
  right:18px;
  top:18px;
  z-index:2000;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--bg-page);
  color:var(--text-main);
  border:2px solid var(--text-muted);
  transition:.4s;
}
.theme-btn:hover {
  background:var(--color-primary);
  color:#fff;
  border-color:var(--color-primary);
}

.about-section {
  position: relative;
  overflow: hidden;
}

/* Container should stay above the orbs */
.about-section .container {
  position: relative;
  z-index: 2;
}

/* Orb Wrapper */
.about-orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Base Orb Style – visible blue circles */
.about-orbs .orb {
  position: absolute;
  background: #0d6efd; /* bootstrap blue */
  border-radius: 50%;
  opacity: 0.25;      /* visible but not distracting */
}

/* ORB 1 — constant hop on text side */
.orb-hop {
  width: 55px;
  height: 55px;
  left: 8%;
  top: 42%;
  animation: orbHop 1.6s ease-in-out infinite;
}

/* ORB 2 — slow floating left side */
.orb-float-1 {
  width: 85px;
  height: 85px;
  left: -40px;
  top: 15%;
  animation: orbFloat1 10s ease-in-out infinite;
}

/* ORB 3 — slow floating around the book */
.orb-float-2 {
  width: 70px;
  height: 70px;
  right: -30px;
  top: 55%;
  animation: orbFloat2 12s ease-in-out infinite;
}

/* HOP animation — stays in place */
@keyframes orbHop {
  0% { transform: translateY(0); }
  50% { transform: translateY(-22px); }
  100% { transform: translateY(0); }
}

/* FLOAT animations — slow drifting */
@keyframes orbFloat1 {
  0% { transform: translate(0, 0); }
  50% { transform: translate(40px, 25px); }
  100% { transform: translate(0, 0); }
}

@keyframes orbFloat2 {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-35px, -30px); }
  100% { transform: translate(0, 0); }
}

.why-special-section {
  margin-bottom: 4rem; /* Adds breathing space */
}

.author-wrapper {
  padding-top: 3rem; /* Extra spacing above author section */
}

/* Full width background */
.testimonial-area {
  background: linear-gradient(180deg, #dbe9f7, #eaf3fb);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* Slider wrapper */
.testimonial-slider {
  position: relative;
  height: auto;
  min-height: 330px;
}

/* Each card */
.testimonial-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 900px;   /* increased from 750px */
  transform: translateX(-50%) translateY(20px);
  background: #fff;
  padding: 3rem 3.2rem;  /* increased padding */
  border-radius: 22px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.75s cubic-bezier(0.25, 0.8, 0.35, 1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.testimonial-card.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0px);
}


/* Icon */
.quote-icon {
  font-size: 2.5rem;
  color: #0d6efd;
  margin-bottom: 1rem;
}

@media (max-width: 576px) {
  .testimonial-card {
    padding: 2rem 1.7rem;
    max-width: 100%;
    border-radius: 18px;
  }

  .quote-icon {
    font-size: 2rem;
  }

  .testimonial-card p.lead {
    font-size: 1rem;
  }
}

/* Better mobile button layout */
@media (max-width: 576px) {
  .testimonial-area .btn {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
  }

  #prevBtn, #nextBtn {
    margin: 0 6px !important;
  }
}

/* FULL-SECTION BACKGROUND */
.contact-author-section {
  background: linear-gradient(to bottom right, #f6faff, #e9f0f8);
}


/* =======================================
   Custom Styles for Contact Icons
   ======================================= */

/* Matches the style of the feature card icons but uses the primary blue color */
.contact-icon-circle {
    width: 40px; 
    height: 40px;
    background-color: #007bff; /* Primary Bootstrap Blue */
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents shrinking */
    
    /* Icon inside the circle */
    font-size: 1.1rem;
    color: #ffffff;
}


/* =======================================
   FOOTER STYLES (MATCHES HERO)
   ======================================= */

.footer-fire-wrapper {
    /* Ensures the footer spans the entire viewport width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    overflow: hidden; /* Contains the animated circles */
}

.hero-footer-style {
    /* Hero Gradient Background */
    background: linear-gradient(120deg, var(--hero-bg-top), var(--hero-bg-bottom)) !important;
    position: relative;
    color: white !important;
    padding-bottom: 30px !important; /* Adjust overall footer height */
}

/* Animated circles inside the footer wrapper */
.footer-fire-wrapper .circle-anim:nth-child(1) { background-color: rgba(255, 255, 255, 0.15); top: 5%; left: 80%; }
.footer-fire-wrapper .circle-anim:nth-child(2) { background-color: rgba(255, 255, 255, 0.15); bottom: 10%; right: 5%; animation-delay: 1.5s; }
.footer-fire-wrapper .circle-anim:nth-child(3) { background-color: rgba(255, 255, 255, 0.1); top: 50%; left: 10%; animation-delay: 3s; }

/* White Gradient Transition (The missing piece) */
.hero-footer-style::before {
    content: "";
    position: absolute;
    top: -120px; 
    left: 0;
    width: 100%;
    height: 120px;
    /* Final adjustment for smooth blend */
    background: linear-gradient(to top, 
        rgba(248, 250, 255, 0) 0%, /* Transparent at the footer boundary */
        rgba(248, 250, 255, 1) 100% /* Solid page background color at the top */
    );
    pointer-events: none;
    z-index: 10;
}

/* Custom link styling to match the modern look */
.footer-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-link:hover {
    color: var(--color-primary); /* A nice Bootstrap-like blue accent */
}

/* Social icon hover effect */
.social-icon {
    color: #9ca3af;
    transition: color 0.2s, transform 0.2s;
}
.social-icon:hover {
    color: white !important; /* White hover on dark background */
    transform: translateY(-2px);
}
.social-icon.text-white { /* For icons used in the footer/hero */
    color: white !important;
    opacity: 0.8;
}
.social-icon.text-white:hover {
    opacity: 1;
}

@media (max-width: 991.98px) {
    .footer-fire-wrapper {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* Blog Post Card Styles (Mockup for IG posts) */
.blog-card-img {
    height: 300px;
    object-fit: cover;
    border-radius: 12px 12px 0 0;
}
.blog-card-meta {
    font-size: 0.8rem;
    color: var(--color-primary);
}
.blog-card-link {
    text-decoration: none;
    color: var(--text-main);
    transition: color 0.2s;
}
.blog-card-link:hover {
    color: var(--color-primary);
}
.instagram-embed-target {
    min-height: 600px;
}

.navbar-blur-light {
    /* Slightly less transparent background for visibility on light pages */
    background-color: rgba(255, 255, 255, 0.4) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle white border */
}

/* Optimizing Blog Pills for Mobile (They are currently in a vertical column on mobile) */
@media (max-width: 767.98px) {
    /* Force the pills into a horizontal, scrollable row for small screens */
    #blogTabs {
        flex-direction: row !important; /* Override the flex-column from Bootstrap */
        flex-wrap: nowrap !important;
        overflow-x: auto; /* Allow horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Better scrolling on iOS */
        padding-bottom: 8px !important; /* Space for a scrollbar/shadow if needed */
        justify-content: flex-start !important; /* Align tabs to the start */
    }

    #blogTabs .nav-item {
        flex-shrink: 0; /* Prevent pills from shrinking */
    }
}

/* New style for the content area's 'Read More' link/button */
.blog-card-read-more {
    cursor: pointer;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    transition: color 0.2s;
}
.blog-card-read-more:hover {
    color: var(--text-main);
}