/* =========================================
   1. GLOBAL STYLES & VARIABLES
   ========================================= */

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Custom Properties (Variables) */
:root {
    /* Dark Theme Colors */
    --background: #0a0a0a;
    --foreground: #f5f5f5;
    --card: #1a1a1a;
    --card-foreground: #f5f5f5;
    --primary: #b38d31; /* Golden accent */
    --primary-foreground: #0a0a0a;
    --secondary: #2a2a2a;
    --secondary-foreground: #f5f5f5;
    --muted: #1f1f1f;
    --muted-foreground: #a1a1a1;
    --accent: #b38d31;
    --accent-foreground: #0a0a0a;
    --border: #2a2a2a;
    --ring: #b38d31;
    --warm-light: #b38d31;
    --color-gold: #ffd700;
}

/* Body */
body {
    font-family: 'Lato', sans-serif;
    line-height: 1.6;
    color: #fff;
    background-color: #000;
    overflow-x: hidden;
}

/* Typography */
h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* CTA Buttons */
.cta-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #b38d31;
    color: #000;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: 700;
}

.cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #b38d31;
}

.cta-btn.secondary {
    background-color: transparent;
    border: 2px solid #b38d31;
    color: #b38d31;
}

.cta-btn.secondary:hover {
    background-color: #b38d31;
    color: #000;
}

/* =========================================
   2. HEADER
   ========================================= */

#header {
    position: sticky;
    top: 0;
    background-color: #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 100;
}

#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

nav a:hover, nav a.cta-btn {
    color: #b38d31;
}

/* =========================================
   3. HERO SECTION
   ========================================= */

#hero {
    position: relative; 
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* CRITICAL FIXES: */
    background-image: url('asset/bg.png'); /* Keep the image */
    background-repeat: no-repeat; /* DO NOT REPEAT */
    background-position: center bottom; /* Position the pattern at the bottom center */
    
    /* Ensure the pattern scales to fill the width */
    background-size: cover; 
    
    /* Base color for areas not covered by the pattern */
    background-color: #000;
}

.hero-overlay {
    position: absolute; 
    inset: 0; 
    z-index: 5; 
    width: 100%;
    height: 100%; 
    display: flex; 
    align-items: center;
    justify-content: center; 
    padding: 0; 
    
    /* SMOOTH FADE: Use a subtle gradient for a cinematic look without sharp lines */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.4),    /* Lighter black at the top */
        rgba(0, 0, 0, 0.6) 50%, /* Standard black through the middle */
        rgba(0, 0, 0, 0.8) 100% /* Slightly darker at the bottom */
    );
}

#hero h1 {
    font-size: 11rem; 
    line-height: 0.8; 
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center; 
    position: relative; 
    display: block; /* Change to block to fill width for centering */
    margin-bottom: 0.5rem;
}

.hero-brand-pretext, .hero-subtitle, .buttons {
    /* These elements will be centered by the container's align-items: center.
       To make them align to the "M" of MITCHELLE, we need a trick.
       We'll use a negative margin-left to pull them left from their centered position. */
    position: relative;
    width: fit-content; /* Make them only as wide as their content */
    margin-left: auto; /* Center them */
    margin-right: auto; /* Center them */
    
    /* CALCULATE THE OFFSET: 
       This is the tricky part that often needs manual adjustment or JavaScript.
       You need to estimate or measure the visual offset from the center to the 'M'.
       Let's assume 'MITCHELLE' is X pixels wide.
       The center is X/2. The 'M' is at some small offset from the left.
       
       A common trick is to use a fixed max-width and then a negative margin-left.
       Let's assume you want the text to align to the start of a 600px wide block centered.
       The 'M' might be, for example, 50px from the left edge of that block.
       The center of that block is 300px. So, to align to 50px, you need to shift left by 250px (300-50).
       
       Let's apply a general offset that you can tweak: */
     /* Adjust this value (e.g., -100px, -200px) until it visually aligns */
    /* This will pull the *centered* element to the left. */
}

.hero-overlay .container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; /* Aligns content to the top */
    padding: 0 20px;
    height: 100%;
    
    /* SHIFT TEXT UP: Reduced from 15vh to 12vh */
    margin-top: 12vh; /* Adjust this value (e.g., 5vh for higher, 20vh for lower) */
}

.buttons {
    display: flex;
    gap: 20px;
    justify-content: center; /* CRITICAL: Centers the buttons inside their container */
    /* REMOVE left: -150px; */
}

/* Figure Layer (Man in Suit Image) */
.hero-figure {
    position: absolute;
    margin-left: -80px;
    inset: 0;
    z-index: 1; /* Keep it below the overlay (z-index 5) */
    overflow: hidden;
    /* Optional: Use a gradient to fade the man-in-suit figure to black at the edges */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.8);
}

.suit-man-img {
    /* Position the image to be centered and cover the whole area */
    position: absolute;
    top: 50%;
    left: 50%;
    /* SHIFT SUIT UPWARD: Change the Y-axis value from -50% (centered) to -55% (5% higher) */
    transform: translate(-50%, -55%); 
    width: 70%;
    height: auto;
    object-fit: cover;
}

/* Style for the small "THE" prefix */
.hero-brand-pretext {
    font-size: 2.5rem; 
    font-weight: 700;
    color: var(--primary); 
    margin-bottom: 0;
    text-align: left;
    left: -420px; /* Tweak this for 'THE' */
}

/* Style for the subheadline, "Your Story, Reimagined." */
.hero-subtitle {
    font-size: 1.5rem; 
    font-weight: 400;
    margin-bottom: 2rem;
    color: #fff; 
    text-align: center; /* Ensure subtitle text is centered */
    /* REMOVE left: -100px; */
}

/* =========================================
   4. ABOUT SECTION
   ========================================= */

#about {
    /* Further reduce the padding for the critical #about section, saving even more space */
    padding: 40px 0; 
    background-color: #1a1a1a;
}

#about, #insights {
    background-color: #1a1a1a;
}

/* New wrapper to create the two-column layout */
.about-content-wrapper {
    display: flex;
    justify-content: space-between; 
    align-items: stretch; /* CRITICAL: Allows children (content and images) to fill the height */
    gap: 60px;
    margin-top: 2rem;
}

/* Style for the text column (LEFT) */
#about .content {
    flex: 1; 
    max-width: 50%;
    text-align: left;
    margin-top: 0;
    /* OVERRIDE: Remove the default flex: 1; from your old code (line 313) */
}

/* Ensure the headline and subheadline are centered */
.section-headline {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: -.4rem;
     /* Space for the subheadline */
}

.section-subheadline {
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--muted-foreground);
    text-align: center;
    margin-bottom: 2.5rem; /* Space below subheadline */
}

.welcome-pretitle {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    text-align: left; /* Aligns with the paragraphs */
    margin-top: 3rem; 
    margin-bottom: 2rem;
}

/* Override default centered text (line 320) for the paragraphs in the content column */
#about .content p {
    text-align: left; /* Force description text to the left */
    margin-bottom: 1.5rem;
}

/* Style the CTA button within the text column */
.about-cta {
    margin-top: 20px;
    display: inline-block; 
}

/* Update the .images block */
.images {
    flex: 1; 
    max-width: 45%; 
    position: relative;
    
    /* CRITICAL: Must be 100% of the space provided by the parent (.about-content-wrapper) */
    height: 100%; 
    
    /* Change to 'block' to simply fill the height (if 'flex' causes centering issues) */
    display: block; 
}

.about-img {
    width: 100%;
    height: 100%; /* CRITICAL: Fills the entire vertical space */
    object-fit: cover; /* Ensures image covers the space without distortion */
}

/* =========================================
   5. CAPABILITIES SECTION (Act 4)
   ========================================= */

.capabilities {
    padding: 5rem 0;
    background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
}

.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 2rem;
    align-items: stretch;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.capability-card {
    position: relative;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2.25rem 2rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(20,20,20,0.6);
    border: 1px solid rgba(218, 185, 0, 0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-height: 200px;
    
    /* Reveal transitions */
    /* opacity: 0; */
    /* transform: translateY(40px); */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.35s ease, border-color 0.35s ease;
}

.capability-card.visible { /* Used by JS */
    opacity: 1;
    transform: translateY(0);
}

.capability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(218, 185, 0, 0.25);
    border-color: rgba(218, 185, 0, 0.35);
}

.capability-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #ffe45e, #ffcf00);
    color: #171717;
    box-shadow: 0 6px 16px rgba(255, 207, 0, 0.4);
}

.capability-title {
    margin: 0.25rem 0;
    font-weight: 700;
    font-size: clamp(1.5rem, 1.6vw + 1.1rem, 1.75rem);
    color:var(--accent);
    margin-bottom: 1.5rem;
}

.capability-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.897);
    line-height: 1.65;
    font-size: 1.2rem;
}

.section-title {
    font-size: 3.5rem;
    text-align: center;
    margin-bottom: -.4rem;
    color: rgb(255, 255, 255);
     /* Space for the subheadline */
}

.section-subtitle {
    font-family: 'Lato', sans-serif;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--muted-foreground);
    text-align: center;
    margin-bottom: 6.5rem; /* Space below subheadline */
}

.news-section .section-title,
.news-section .section-subline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 700px; /* Optional: limit max width for better appearance */
}
/* =========================================
   6. SERVICES SECTION
   ========================================= */

/* Cards */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.card {
    background-color: #222;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 0 15px #b38d31;
    transform: translateY(-5px);
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}

/* =========================================
   7. TESTIMONIALS SECTION
   ========================================= */

#testimonials {
    background-color: #121212; /* Dark background to match theme */
    padding: 6rem 0;
    text-align: center;
}

.testimonial-grid {
    display: grid;
    /* Create 2 columns of equal width */
    grid-template-columns: 1fr 1fr; 
    gap: 2rem; /* Spacing between the cards */
    max-width: 1200px; 
    margin: 0 auto 3rem auto;
    align-items: stretch; /* Ensures cards stretch to the same height */
}

#testimonials .section-title {
    color: #FFFFFF;
    /* Uses existing section-title style, but you can override color here if needed */
}

#testimonials .section-subtitle {
    color: var(--muted-foreground);
    margin-bottom: 3rem;
}

.testimonial-card {
    /* max-width: 800px; 
    margin: 0 auto 3rem auto; */
    background-color: #1a1a1a; /* Dark card background */
    padding: 3rem;
    border-radius: 1.5rem;
    border-top: 5px solid var(--primary); /* Gold accent line */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    height: 100%;
}

.profile-photo-container {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    margin: 0 auto 1.5rem auto;
    overflow: hidden;
    /* Gold border/glow around the image */
    border: 3px solid var(--primary); 
    box-shadow: 0 0 10px rgba(218, 185, 0, 0.5);
}

.profile-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-message {
    font-size: 1.35rem;
    line-height: 1.6;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    font-style: italic;
    font-weight: 300;
}

.testimonial-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary); /* Gold name color */
    margin-bottom: 0.25rem;
}

.testimonial-title {
    font-size: 0.9rem;
    color: #AAAAAA;
    margin-bottom: 2rem; 
}

/* Reusing the primary CTA button style for the "See Full Testimonials" button */
.see-full-btn {
    /* If you want this specific button to always use the primary style: */
    background-color: var(--primary);
    color: var(--primary-foreground);
}

@media (max-width: 992px) { 
    .testimonial-grid {
        /* Stack the cards vertically on smaller screens */
        grid-template-columns: 1fr;
        max-width: 600px; /* Constrain width on mobile stack */
    }
}

/* Ensure mobile responsiveness for the card */
@media (max-width: 600px) {
    .testimonial-card {
        padding: 1.5rem;
    }
    .testimonial-message {
        font-size: 1.1rem;
    }
}

/* =========================================
   8. INSIGHTS PREVIEW SECTION
   ========================================= */

#insights-preview {
    /* Keep existing dark background and spacing */
    background-color: var(--background); 
    padding: 6rem 0;
    text-align: center;
}

#insights-preview .section-title {
    color: var(--primary); 
    margin-bottom: 0.5rem;
}

#insights-preview .section-subtitle {
    font-style: italic;
    font-size: 1.25rem;
    color: var(--muted-foreground);
    margin-bottom: 3.5rem;
}

.insights-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto 3.5rem auto;
}

.insight-card {
    /* --- Height Adjustment Here --- */
    
    /* Increased top/bottom padding from 2.5rem to 4rem for more height */
    padding: 4rem 2rem; 
    
    /* --- Keep Existing Dashed Border Styles --- */
    
    /* 1. Remove background, blur, and standard border/shadow */
    background-color: transparent; 
    box-shadow: none; 
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    /* 2. Apply the Dashed Gold Border */
    border: 1px dashed var(--primary); 
    border-radius: 0; 
    
    /* Keep other layout/transition styles */
    position: relative;
    text-align: center;
    height: 100%; 
    transition: all 0.3s ease;
}

/* Hover Effect (Simple Accent) */
.insight-card:hover {
    transform: translateY(0);
    box-shadow: none;
    border-color: var(--primary);
    border-style: solid; 
}

.insight-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.insight-excerpt {
    font-size: 1rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin-bottom: 2rem; /* Added space before the button */
}

.insight-card-btn {
    /* Override global cta-btn properties to make it smaller if desired */
    padding: 8px 16px; 
    font-size: 0.9rem;
    
    /* Ensure it behaves nicely within the dashed box */
    margin-top: auto; 
    display: inline-block;
}

.insights-cta {
    margin-top: 2rem;
}

.insight-icon {
    /* Identical to .capability-icon styling */
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
    background: linear-gradient(180deg, #ffe45e, #ffcf00);
    color: #171717;
    box-shadow: 0 6px 16px rgba(255, 207, 0, 0.4);
}

/* Mobile Responsiveness for Insights Grid */
@media (max-width: 768px) {
    .insights-preview-grid {
        grid-template-columns: 1fr; /* Stacks cards vertically */
        max-width: 400px;
    }
}

/* =========================================
   9. BOOKSTORE PLACEMENT SECTION (New)
   ========================================= */

#bookstore-placement {
    background-color: #1a1a1a; /* Dark background */
    padding: 6rem 0;
    text-align: center;
}

.bookstore-video-grid {
    /* CRITICAL CHANGE: Sets up a 3-column layout */
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem; /* Spacing between the columns */
    max-width: 1200px;
    margin: 0 auto;
}

.video-item {
    text-align: center;
    overflow: hidden;
    position: relative;
    padding: 0 10px; /* Padding for spacing inside the grid */
}

.video-wrapper {
    width: 100%;
    margin-bottom: 0.75rem;
    background-color: #1a1a1a;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    border: 3px solid var(--primary); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

    /* --- CRITICAL: Enforce 16:9 Aspect Ratio --- */
    /* Modern way (use this if target browsers support it) */
    aspect-ratio: 16 / 9; 

    /* Fallback for older browsers (uses padding hack) */
    /* Remove this if using 'aspect-ratio' above */
    /* height: 0; 
    padding-top: 56.25%; 
    */
}
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Button Appearance */
    background-color: rgba(218, 185, 0, 0.85); /* Semi-transparent gold */
    color: #121212;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px; /* Adjust to visually center the play triangle */
    transition: background-color 0.2s, opacity 0.3s;
}

.play-button:hover {
    background-color: var(--primary); /* Solid gold on hover */
}

.play-button svg {
    fill: #121212;
}

.fullscreen-button {
    /* Position it in the bottom right corner */
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10; /* Ensure it's above the video */
    
    /* Basic styling */
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 8px;
    line-height: 0; /* To perfectly center the SVG icon */
    transition: opacity 0.3s, transform 0.3s;
    
    /* Make the button invisible by default */
    opacity: 0;
    pointer-events: none; 
}

.fullscreen-button svg {
    color: white;
    width: 20px;
    height: 20px;
    display: block;
}

/* 4. Visibility Toggle: Show the fullscreen button ONLY when the video is playing */
.video-wrapper.is-playing .fullscreen-button {
    opacity: 1; /* Make it visible */
    pointer-events: auto; /* Make it clickable */
}

/* 5. Improve the Play/Pause button visibility toggle */
/* Ensure the initial play button is hidden when playing (as per the JS logic) */
.video-wrapper.is-playing .play-button {
    opacity: 0;
    pointer-events: none; /* Make it unclickable when hidden */
}

.video-wrapper.is-playing .play-button {
    opacity: 0;
    pointer-events: none; /* Prevents button from intercepting clicks on the video */
}

/* Slightly brighten the video when playing (optional) */
.video-wrapper.is-playing .local-video {
    opacity: 1.0;
}
.local-video {
    width: 100%;
    height: 100%;

    /* CRITICAL CHANGE: Use 'cover' to fill the 16:9 wrapper. 
       This will crop the video vertically if the original is too tall, 
       but it ensures the full width is always filled, creating the landscape look. */
    object-fit: cover; 
    
    display: block;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
.video-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--foreground); /* Light color for the title */
    margin-top: 0;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .bookstore-video-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 3rem;
    }
    .video-wrapper {
        height: 250px;
    }
}
/* =========================================
   9. FINAL CTA SECTION
   ========================================= */

#final-cta {
    background: linear-gradient(135deg, #000, #b38d31);
}

/* =========================================
   10. FOOTER
   ========================================= */

#footer {
    background-color: #000;
    padding: 40px 0;
    text-align: center;
}

#footer nav ul {
    justify-content: center;
    margin: 20px 0;
}

#footer .social {
    margin-top: 20px;
}

#footer .social a {
    color: #fff;
    margin: 0 10px;
    text-decoration: none;
    transition: color 0.3s;
}

#footer .social a:hover {
    color: #b38d31;
}

/* =========================================
   11. ANIMATIONS
   ========================================= */

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================
   12. RESPONSIVENESS
   ========================================= */

@media (max-width: 768px) {
    /* --- HERO SECTION MOBILE ADJUSTMENTS --- */
    #hero h1 {
        font-size: 3.5rem; /* Adjusted for better visibility than 2.5rem */
    }
    .hero-brand-pretext {
        font-size: 1.5rem;
        /* Ensure all text alignment offsets are removed/ignored on mobile */
        width: 100%;
        text-align: center;
    }
    .hero-subtitle {
        text-align: center;
    }
    .buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px; /* Added slight gap for stacked buttons */
        width: 100%; /* Ensures buttons block centers properly */
    }
    .cta-btn {
        width: 80%; /* Makes buttons more clickable on mobile */
        text-align: center;
    }

    /* --- NAVIGATION & GENERAL MOBILE ADJUSTMENTS --- */
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
    .cards {
        grid-template-columns: 1fr;
    }
    
    /* --- ABOUT SECTION MOBILE ADJUSTMENTS (New Two-Column Layout) --- */

    /* Force columns to stack vertically */
    .about-content-wrapper {
        flex-direction: column;
        gap: 40px;
    }
   } 



   /* Section 4: Philosophy Strip */
.philosophy-strip {
    position: relative;
    padding: 6rem 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    overflow: hidden;
}

.philosophy-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(218, 185, 0, 0.03) 2px,
        rgba(218, 185, 0, 0.03) 4px
    );
    animation: filmGrain 8s steps(10) infinite;
}

@keyframes filmGrain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
}

.philosophy-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.philosophy-quote {
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    color: white;
    line-height: 1.5;
    animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
  

.philosophy-content h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: -.4rem;
    color: var(--accent);
}

.philosophy-cta-btn {
    margin-top: 1.5rem;
    display: inline-block; /* Allows the button to shrink to its content size */
}

/* =================================
   Book Trailers Section Styling
   ================================= */
#book-trailers {
    padding: 6rem 0;
    text-align: center;
    background-color: var(--background); /* Or any color you prefer */
}

#book-trailers .section-title {
    color: var(--text-color, #1a1a1a); /* Adjust to your main text color variable */
}

#book-trailers .section-subtitle {
    margin-bottom: 3.5rem;
    color: var(--muted-foreground);
}

/* Ensure the grid wraps nicely for a single item */
#book-trailers .bookstore-video-grid {
    display: flex;
    justify-content: center; /* Center the single video item */
    gap: 2rem; /* Spacing between grid items, though only one here */
    padding: 0 1rem;
}

#book-trailers .video-item {
    /* Define a maximum width for the video container for large screens */
    max-width: 800px;
    width: 100%;
    margin: 0 auto; /* Center the item if it doesn't take full width */
    /* Add subtle lift/shadow effect */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Important for video border radius */
}

#book-trailers .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

#book-trailers .local-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#book-trailers .video-title {
    margin-top: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground, #333);
}

/* Hide the play button (already done in HTML, but here for redundancy/consistency) */
#book-trailers .play-button {
    display: none !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #book-trailers {
        padding: 4rem 0;
    }

    #book-trailers .video-item {
        max-width: 100%;
    }
    
    #book-trailers .video-title {
        font-size: 1.1rem;
    }
}

/* Section 2: News & Blogs - Adapted to Main Site Theme */

/* Container and background */
.news-section {
    padding: 5rem 1.5rem;
    background: linear-gradient(180deg, var(--card) 0%, var(--background) 100%);
    color: var(--foreground);
    
    /* Left align all text inside the news section */
    text-align: left;
}

/* Section Heading */
.news-section .section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 3.5rem;
    color: var(--foreground);
    text-align: center; /* Center the title */
    margin-bottom: 0.6rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.news-section .section-subline {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.4rem;
    font-style: italic;
    color: var(--muted-foreground);
    text-align: center; /* Center the subtitle */
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* News Card Grid */
/* Align cards to the left within the grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    justify-items: start;       /* Align grid items (cards) to the left */
    max-width: 1200px;
    margin: 0 auto;
}

/* News Card Styling With Golden Border, Rounded Corners and Dark Background */
.news-card {
    background-color: var(--card);        /* Dark background */
    border: 1.5px solid var(--color-gold); /* Thicker golden border */
    border-radius: 12px;                  /* Rounded corners */
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 5px 18px rgba(179, 141, 49, 0.4); /* subtle golden glow */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

/* Smooth hover effect with slightly raised card and stronger glow */
.news-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: 0 15px 40px rgba(179, 141, 49, 0.7);
}

/* Image on top fills full width */
.news-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-bottom: 1.5px solid var(--color-gold); /* golden border below image */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

/* Zoom image on hover */
.news-card:hover .news-image img {
    transform: scale(1.05);
}

/* Content inside card with padding and left-aligned text */
.news-content {
    padding: 1.5rem 2rem; /* spacious padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Title */
.news-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--foreground);
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Description */
.news-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--muted-foreground);
    line-height: 1.5;
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

/* Button styled as outlined gold with uppercase text */
.news-readmore-btn {
    align-self: flex-start;
    padding: 10px 20px;
    border: 2px solid var(--color-gold);
    background-color: transparent;
    color: var(--color-gold);
    border-radius: 5px;
    font-weight: 700;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 0 0 var(--color-gold);
}

.news-readmore-btn:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
    box-shadow: inset 200px 0 0 0 var(--color-gold);
    text-decoration: none;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        justify-items: center;  /* Center card on mobile */
    }

    .news-card {
        max-width: 100%;
    }
}

.section-subline {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 50px;
    color: var(--color-medium-grey);
}

/* Read More Button Styling (Adapted to match capabilities theme) */
#insights-preview .read-more-btn.primary-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary);
    color: var(--primary-foreground);
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#insights-preview .read-more-btn.primary-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px var(--primary);
}

.read-more-btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--color-gold); 
    color: var(--color-gold);
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.read-more-btn:hover {
    background-color: var(--color-gold);
    color: var(--color-black);
}