/* --- General Styles --- */
:root {
    --primary-color: #AE1918;
    --secondary-color: #701C1A;
    --dark-color: #3f3f42;
    --light-color: #f4f4f4;
    --font-family-headings: 'Roboto Condensed', sans-serif;
    --font-family-body: 'Roboto', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-body);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--dark-color);
    color: var(--light-color);
}

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

h1, h2, h3 {
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: var(--light-color);
    margin-bottom: 20px;
}

h2 {
    font-size: 2.5rem;
    text-align: center;
}

p {
    margin-bottom: 20px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--light-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

section {
    padding: 80px 0;
    overflow-x: hidden;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-3px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--light-color);
    border: 2px solid var(--light-color);
}

.btn-secondary:hover {
    background-color: var(--light-color);
    color: var(--dark-color);
    transform: translateY(-3px);
}

.btn-tertiary {
    background-color: var(--secondary-color);
    color: #fff;
    border: 2px solid var(--secondary-color);
}

.btn-tertiary:hover {
    background-color: transparent;
    color: var(--secondary-color);
}

/* --- Header --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(7, 7, 9, 0.8);
    backdrop-filter: blur(10px);
    transition: top 0.3s ease;
}

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

header .logo h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin: 0;
}

header nav ul {
    display: flex;
    list-style: none;
}

header nav ul li {
    margin-left: 30px;
}

header nav ul li a {
    color: var(--light-color);
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    padding-bottom: 5px;
}

header nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

header nav ul li a:hover::after,
header nav ul li a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: var(--light-color);
margin: 5px 0;
position: relative; 
top: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            opacity 0.2s ease, 
            top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

header.nav-open .menu-toggle span:nth-child(1) {
transform: rotate(45deg);
top: 8px;
}
header.nav-open .menu-toggle span:nth-child(2) {
opacity: 0; /* Fade out the middle line */
}
header.nav-open .menu-toggle span:nth-child(3) {
transform: rotate(-45deg);
top: -8px; /* (height + margin) = 3px + 5px */
}

/* --- Hero Section --- */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

#hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 7, 9, 0.7);
    z-index: -1;
}

.hero-content {
    max-width: 800px;
}

.hero-content h2 {
    font-size: 4rem;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.hero-content h2.fade-in {
    animation-delay: 0.5s;
}

.hero-content p.fade-in {
    animation-delay: 1s;
}

.hero-content .btn.fade-in {
    animation-delay: 1.5s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- About Us Section --- */
.about-us {
    background-color: var(--dark-color);
}

.about-us-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-us-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.about-us-images img {
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.about-us-images img:hover {
    transform: scale(1.05);
}

/* --- Philosophy Section --- */

.philosophy {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),center/cover no-repeat;
    padding: 80px 0;
}

/* --- Swiper Slider Styles --- */
.philosophy-slider {
    width: 100%;
    padding: 50px 0; /* Add padding to give space for pagination */
    overflow: hidden; /* Important for slider containment */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Allow slides to grow with content */
}

.philosophy-card {
    background: rgba(7, 7, 9, 0.8);
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Make cards in a row equal height */
    display: flex;
    flex-direction: column;
}

.philosophy-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(174, 25, 24, 0.3);
}

.philosophy-card img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 20px;
    border: 3px solid var(--primary-color);
    flex-shrink: 0; /* Prevent image from shrinking */
}

.philosophy-card h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
}

/* --- Swiper Navigation & Pagination Customization --- */

/* Navigation Arrows */
.swiper-button-next,
.swiper-button-prev {
    color: var(--primary-color); /* Use your theme color */
    transition: color 0.3s ease;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    color: var(--light-color);
}

/* Pagination Dots */
.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.5);
    width: 10px;
    height: 10px;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color); /* Use your theme color for the active dot */
}

/* --- Programs Section --- */

/* DELETE THE OLD .programs CSS AND REPLACE IT WITH THIS NEW DESIGN */

.programs {
    background-color: var(--dark-color);
}

.programs .section-intro {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.programs-layout {
    display: grid;
    gap: 80px; /* Increased gap for a more spacious layout */
}

.program-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    position: relative;
    border-radius: 10px;
    border: 1px solid rgba(112, 28, 26, 0.3); /* Subtle border */
    overflow: hidden;
}

/* This is the core of the overlapping effect */
.program-image, .program-content {
    grid-row: 1 / 2; /* Both items occupy the same row */
}

.program-image {
    grid-column: 1 / 3; /* Image spans the entire grid */
    height: 400px;
}

.program-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.program-item:hover .program-image img {
    transform: scale(1.05);
}

.program-content {
    grid-column: 2 / 3; /* Content on the right side by default */
    position: relative;
    z-index: 2;
    padding: 40px;
    
    /* Glass morphism effect */
    background: rgba(7, 7, 9, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(112, 28, 26, 0.5);
    border-radius: 10px;
    
    margin: 40px;
    transition: border-color 0.3s ease;
}

.program-item:hover .program-content {
    border-color: rgba(174, 25, 24, 0.8);
}

/* Alternate the layout for even-numbered items */
.program-item:nth-child(even) .program-content {
    grid-column: 1 / 2; /* Content on the left side */
}

/* Style the decorative number */
.program-number {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 6rem;
    font-weight: 700;
    font-family: var(--font-family-headings);
    color: var(--secondary-color);
    opacity: 0.3;
    z-index: 1;
}

.program-item:nth-child(even) .program-number {
    left: auto;
    right: 20px;
}


.program-content h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.program-content span {
    display: block;
    color: #ccc;
    margin-bottom: 20px;
    font-weight: bold;
}

.program-content p {
    margin-bottom: 30px;
}


/* --- Responsive adjustments for the new Programs design --- */
@media(max-width: 992px) {
    .program-item,
    .program-item:nth-child(even) {
        grid-template-columns: 1fr; /* Stack elements vertically */
        overflow: visible; /* Allow content to overflow visually */
        border: none;
    }

    .program-image {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        height: 250px;
    }

    .program-content,
    .program-item:nth-child(even) .program-content {
        grid-column: 1 / 2;
        grid-row: 1 / 2; /* Both still in the same row */
        align-self: end; /* Align content to the bottom */
        margin: 20px;
        padding: 30px;
    }
    
    .programs-layout {
        gap: 60px;
    }
    
    .program-number {
        top: -15px;
        left: 10px;
        font-size: 4rem;
    }
    
    .program-item:nth-child(even) .program-number {
        right: 10px;
    }
}
/* --- CTA Section --- */
.cta {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: #fff;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.8rem;
}

/* --- Testimonials Section --- */
.testimonials {
    background-color: var(--dark-color);
}

.testimonial-slider-wrapper {
    position: relative;
    max-width: 800px;
    margin: 50px auto 0;
}

.testimonial-slider {
    display: flex;
    overflow: hidden;
}

.testimonial-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 20px;
    text-align: left;
    transition: all ease-in-out .4s;
}

.testimonial-slide img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-slide blockquote p {
    font-style: italic;
    font-size: 1.1rem;
}

.testimonial-slide cite {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--primary-color);
}

.slider-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0%;
    display: flex;
    justify-content: space-between;
}

.slider-controls button {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.slider-controls button:hover {
    background: var(--primary-color);
}

/* --- Gallery Section --- */
/* --- Unusual Gallery Slider Styles --- */

.gallery-slider-container {
    position: relative;
    max-width: 600px;
    height: 450px;
    margin: 50px auto 0;
    perspective: 1000px; /* Adds a 3D perspective for depth */
}

.gallery-deck {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    
    /* The core of the smooth animation */
    transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1), 
                opacity 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
    
    cursor: grab;
    user-select: none; /* Prevent text selection while dragging */
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none; /* Prevent image dragging issues */
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-family-headings);
    text-align: right;
}

/* --- Card Exit Animations --- */
.gallery-card.exit-left {
    transform: translateX(-150%) rotate(-30deg) !important;
    opacity: 0 !important;
}

.gallery-card.exit-right {
    transform: translateX(150%) rotate(30deg) !important;
    opacity: 0 !important;
}

/* --- Navigation Button Styles --- */
.slider-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background-color: rgba(7, 7, 9, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.slider-nav-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.slider-nav-button.prev {
    left: -25px;
}

.slider-nav-button.next {
    right: -25px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .gallery-slider-container {
        height: 350px;
        max-width: 90%;
    }

    .slider-nav-button.prev {
        left: -15px;
    }
    
    .slider-nav-button.next {
        right: -15px;
    }
}
/* --- School Page Specific Styles --- */

/* --- School Hero Section --- */
.school-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: 2rem;
}

.hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomIn 15s infinite alternate;
}

@keyframes zoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

.school-hero .hero-content h2 {
    font-size: 3.5rem;
}

/* --- History Section --- */
/* DELETE THE OLD .history CSS AND REPLACE IT WITH THIS NEW DESIGN */

.history {
    background-color: var(--dark-color);
    padding: 80px 0;
}

.history-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.history-content {
    display: grid;
    /* An asymmetrical grid for a more dynamic feel */
    grid-template-columns: 1fr 1.5fr; 
    gap: 60px;
    align-items: start;
}

/* --- Founder Image Styles --- */
.history-founder {
    position: sticky; /* The image will "stick" as you scroll past the timeline */
    top: 120px; /* Offset from the top to account for the header */
}

.founder-image-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.founder-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 60%, var(--primary-color) 120%);
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.founder-image-wrapper:hover::after {
    opacity: 0.4;
}

.founder-image-wrapper img {
    border-radius: 10px;
}

.founder-caption {
    padding: 15px;
    text-align: center;
    background: #101012;
    border-radius: 0 0 10px 10px;
}

.founder-caption h4 {
    margin: 0;
    font-size: 1.3rem;
}

.founder-caption span {
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* --- Timeline Styles --- */
.history-timeline {
    position: relative;
    padding-left: 40px;
    /* The vertical timeline bar */
    border-left: 3px solid var(--secondary-color);
}

.timeline-event {
    position: relative;
    padding-bottom: 50px;
    transition: background-color 0.3s ease;
}

/* The circular node on the timeline */
.timeline-event::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -49px; /* Position it perfectly over the border */
    width: 15px;
    height: 15px;
    background-color: var(--dark-color);
    border: 3px solid var(--secondary-color);
    border-radius: 50%;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover effect for the entire event block */
.timeline-event:hover::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.timeline-event:hover .timeline-date {
    color: var(--primary-color);
}


.timeline-date {
    font-family: var(--font-family-headings);
    font-size: 1.5rem;
    font-weight: 700;
    color: #ccc;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.timeline-description h3 {
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.timeline-description p {
    color: #bbb;
    margin: 0;
}

/* --- Responsive adjustments for the new History design --- */
@media (max-width: 992px) {
    .history-content {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }

    .history-founder {
        position: static; /* Remove the sticky behavior */
        max-width: 400px;
        margin: 0 auto 40px;
    }

    .history-timeline {
        padding-left: 30px;
    }

    .timeline-event::before {
        left: -39px; /* Adjust node position */
    }
}

/* --- Facility Section --- */
/* --- Facility Tabs Component Styles --- */

.facility-tabs-container {
    max-width: 900px;
    margin: 50px auto 0;
}

/* --- Tab Navigation --- */
.facility-tabs-nav {
    display: flex;
    position: relative;
    border-bottom: 2px solid #222; /* A subtle line under the tabs */
}

.facility-tab-button {
    flex: 1;
    padding: 15px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-family-headings);
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.4s ease;
}

.facility-tab-button.active {
    color: var(--primary-color);
}

.active-line {
    position: absolute;
    bottom: -2px; /* Sits directly on top of the border */
    left: 0;
    height: 3px;
    background-color: var(--primary-color);
    /* This transition is the key to the "magic line" animation */
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Tab Content --- */
.facility-content-viewport {
    overflow: hidden; /* This hides the other content panes */
    margin-top: 40px;
}

.facility-content-track {
    display: flex;
    width: 300%; /* 100% for each of the 3 panes */
    /* This transition creates the smooth sliding effect */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.facility-content-pane {
    /* Each pane takes up 1/3 of the track's width */
    flex: 0 0 33.333%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    opacity: 0.5;
    transform: scale(0.98);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.facility-content-pane.active {
    opacity: 1;
    transform: scale(1);
}

.pane-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.pane-text h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.pane-text p {
    color: #bbb;
}


/* --- Responsive adjustments for Tabs --- */
@media (max-width: 768px) {
    .facility-tab-button {
        font-size: 0.9rem;
        padding: 15px 10px;
    }

    .facility-content-pane {
        grid-template-columns: 1fr; /* Stack image and text vertically */
        gap: 30px;
        padding: 0 10px; /* Add some horizontal padding */
    }

    .pane-image {
        order: -1; /* Move image to the top */
    }
}

/* --- Dojo Code Section --- */
/* DELETE THE OLD .dojo-code CSS AND REPLACE IT WITH THIS NEW DESIGN */

.dojo-code {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), center/cover fixed no-repeat;
    padding: 80px 0;
}

/* The main plaque container */
.code-plaque {
    max-width: 800px;
    margin: 0 auto;
    background: linear-gradient(170deg, #1a1a1d, #070709);
    border-radius: 15px;
    padding: 50px;
    
    /* This creates the beautiful gradient border */
    border: 4px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
    
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.code-header {
    text-align: center;
    margin-bottom: 40px;
}

.code-header img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 4px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(174, 25, 24, 0.4);
}

.code-header h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.code-header p {
    font-size: 1.1rem;
    color: #ccc;
}

.principles-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.code-principle {
    display: grid;
    grid-template-columns: 60px 1fr; /* Column for number, column for text */
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #333;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.code-principle:last-child {
    border-bottom: none;
}

.code-principle:hover {
    background-color: rgba(255, 255, 255, 0.03);
    transform: scale(1.02);
}

.principle-number {
    font-size: 3rem;
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: var(--secondary-color);
    text-align: center;
    line-height: 1;
    transition: color 0.3s ease;
}

.code-principle:hover .principle-number {
    color: var(--primary-color);
}

.principle-text h3 {
    font-size: 1.4rem;
    color: #fff;
    margin: 0 0 5px 0;
}

.principle-text p {
    font-size: 1rem;
    color: #bbb;
    margin: 0;
}

.code-footer {
    text-align: center;
    font-style: italic;
    color: #aaa;
    margin-top: 30px;
    border-top: 1px solid #333;
    padding-top: 30px;
}

/* --- Responsive adjustments for the new Dojo Code design --- */
@media (max-width: 768px) {
    .code-plaque {
        padding: 30px;
    }

    .code-header img {
        width: 120px;
        height: 120px;
    }

    .code-header h2 {
        font-size: 2rem;
    }
    
    .code-principle {
        /* Stack the number above the text on small screens */
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }

    .principle-number {
        font-size: 2.5rem;
    }
}

/* --- Community Section --- */
/* DELETE THE OLD .community CSS AND REPLACE IT WITH THIS NEW DESIGN */

.community {
    background-color: var(--dark-color);
    padding: 80px 0;
    overflow: hidden; /* Prevents overflow issues from rotated items */
}

.community-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.community-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Asymmetrical columns */
    align-items: center;
    gap: 50px;
}

/* The container for the scattered photos */
.community-photo-wall {
    position: relative;
    min-height: 450px; /* Set a height for the wall */
    perspective: 1500px; /* Adds 3D depth for hover effects */
}

.polaroid {
    position: absolute;
    background-color: #f4f4f4;
    padding: 15px 15px 70px 15px; /* Classic polaroid dimensions */
    border-radius: 5px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.4s ease, 
                z-index 0s 0.2s; /* Delay z-index change to prevent flicker */
}

.polaroid:hover {
    transform: rotate(0deg) scale(1.15) !important; /* Straighten and enlarge on hover */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    z-index: 100 !important;
    transition-delay: 0s; /* No delay on z-index when hovering */
}

.polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid figcaption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: center;
    font-family: 'Caveat', cursive; /* A nice handwriting font (add from Google Fonts if needed) */
    font-size: 1.5rem;
    color: #333;
}

/* --- Positioning for each individual photo --- */
.polaroid-1 {
    top: 20%;
    left: 5%;
    transform: rotate(-10deg);
    z-index: 2;
    width: 60%;
}

.polaroid-2 {
    top: 0;
    left: 45%;
    transform: rotate(8deg);
    z-index: 3; /* Topmost card */
    width: 50%;
}

.polaroid-3 {
    top: 45%;
    left: 30%;
    transform: rotate(15deg);
    z-index: 1;
    width: 65%;
}

.community-narrative
{
    background-color: #333;
    border-radius: 10px;
    padding: 15px;
}

.community-narrative h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

/* Decorative underline */
.community-narrative h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background-color: var(--secondary-color);
}

.community-narrative p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}


/* --- Responsive adjustments for the new Community design --- */
@media (max-width: 992px) {
    .community-content {
        grid-template-columns: 1fr; /* Stack on smaller screens */
        gap: 40px;
    }

    .community-photo-wall {
        order: -1; /* Move photos above the text */
        min-height: 400px;
    }
}

@media (max-width: 576px) {
    .community-photo-wall {
        min-height: 300px;
    }
    
    .polaroid figcaption {
        font-size: 1.2rem;
    }
}

/* --- Safety & Hygiene Section --- */

.safety {
    background: #101012;
    padding: 80px 0;
}

.safety .section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.safety-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.safety-card {
    position: relative;
    padding: 30px;
    border-radius: 15px;
    overflow: hidden; /* Important for the border pseudo-element */
    
    /* Glass morphism effect */
    background: rgba(26, 26, 29, 0.6); /* Slightly lighter than the page background */
    backdrop-filter: blur(10px);
    
    border: 1px solid rgba(112, 28, 26, 0.3); /* Fallback border */
    transition: transform 0.3s ease, border-color 0.3s ease;
    
    /* Used for staggered animation delay */
    animation-delay: var(--delay, 0s);
}

/* The magic gradient border (pseudo-element) */
.safety-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;
    border: 2px solid transparent;
    background: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color)) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.safety-card:hover {
    transform: translateY(-10px);
    border-color: transparent; /* Hide the fallback border on hover */
}

.safety-card:hover::before {
    opacity: 1; /* Reveal the gradient border on hover */
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.card-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dark-color);
    border-radius: 50%;
    color: var(--primary-color);
    border: 1px solid #333;
}

/* Decorative number adds depth */
.card-number {
    font-size: 4rem;
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05); /* Very subtle */
    line-height: 1;
}

.card-body h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.card-body p {
    color: #bbb;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- Responsive adjustments for the new Safety design --- */
@media (max-width: 992px) {
    .safety-features-grid {
        grid-template-columns: 1fr; /* Stack cards vertically */
        gap: 25px;
    }
}

/* --- Join Legacy Section --- */
.join-legacy {
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    padding: 60px 0;
}

.join-legacy-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.join-legacy-content h2 {
    color: #fff;
    font-size: 2.8rem;
}

.join-legacy-content p {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* --- Responsive Adjustments for School Page --- */
@media (max-width: 992px) {
    .history-content,
    .code-content {
        grid-template-columns: 1fr;
    }

    .history-image {
        order: -1; /* Move image to the top on smaller screens */
        max-width: 400px;
        margin: 0 auto 30px;
    }

    .facility-grid,
    .safety-content {
        grid-template-columns: 1fr;
    }

    .community-gallery {
        grid-template-columns: 1fr;
    }
}

/* --- Masters Page Specific Styles --- */

/* --- Masters Hero Section --- */
.masters-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.masters-hero .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.masters-hero .hero-content h2 {
    font-size: 3.5rem;
}

/* --- Grandmaster Section --- */
/* DELETE THE OLD .grandmaster CSS AND REPLACE IT WITH THIS NEW DESIGN */

.grandmaster {
    background-color: var(--dark-color);
    padding: 80px 0;
}

.grandmaster-showcase {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5-column grid for flexible overlapping */
    align-items: center;
    position: relative;
}

/* Decorative background text for added depth */
.background-text {
    grid-column: 3 / 6; /* Position in the right-hand columns */
    grid-row: 1 / 2;
    font-size: 10rem;
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: rgba(112, 28, 26, 0.1); /* Very subtle brand color */
    text-transform: uppercase;
    text-align: right;
    line-height: 1;
    z-index: 0;
    user-select: none;
}

.grandmaster-portrait {
    grid-column: 1 / 4; /* Overlaps from column 1 to 3 */
    grid-row: 1 / 2;
    z-index: 1;
    position: relative;
}

.grandmaster-portrait img {
    width: 100%;
    max-width: 500px; /* Control max size */
    border-radius: 10px;
    /* A more subtle shadow effect */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* The Glass Effect Card */
.grandmaster-bio-glass {
    grid-column: 3 / 6; /* Overlaps from column 3 to 5 */
    grid-row: 1 / 2;
    z-index: 2; /* Sits on top of the image */
    
    /* The Glassmorphism Effect */
    background: rgba(16, 16, 18, 0.6); /* Semi-transparent background */
    backdrop-filter: blur(12px); /* The key frosting effect */
    -webkit-backdrop-filter: blur(12px); /* For Safari support */
    
    border-radius: 15px;
    border: 1px solid rgba(112, 28, 26, 0.3);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    
    /* Used for staggered animation delay */
    animation-delay: var(--delay, 0s);
}

.bio-content {
    padding: 40px;
}

.bio-content .rank {
    display: inline-block;
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(174, 25, 24, 0.1);
    padding: 5px 10px;
    border-radius: 5px;
}

.bio-content h2 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 3rem;
}

.bio-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}

/* --- Responsive adjustments for the new Grandmaster design --- */
@media (max-width: 992px) {
    .grandmaster-showcase {
        display: flex; /* Switch to flexbox for vertical stacking */
        flex-direction: column;
        gap: 0;
    }
    
    .grandmaster-portrait {
        width: 100%;
        margin-bottom: -80px; /* Pull the bio card up over the image */
        max-width: 400px;
    }

    .grandmaster-bio-glass {
        width: 100%;
        max-width: 500px;
    }
    
    .background-text {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 6rem;
    }
}

@media (max-width: 576px) {
    .bio-content {
        padding: 30px;
    }

    .bio-content h2 {
        font-size: 2.2rem;
    }

    .background-text {
        display: none; /* Hide decorative text on very small screens */
    }
}

/* --- Head Instructors Section --- */
/* DELETE THE OLD .head-instructors CSS AND REPLACE IT WITH THIS NEW DESIGN */

.head-instructors {
    background-color: #101012;
    padding: 80px 0;
}

.head-instructors .section-intro {
    max-width: 700px;
    margin: 0 auto 80px; /* Increased margin */
    text-align: center;
}

.instructor-showcase {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Increased gap between profiles */
}

.instructor-profile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 40px;
}

/* --- The Photo Block --- */
.instructor-photo {
    position: relative;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

.instructor-photo img {
    width: 100%;
    border-radius: 10px;
    filter: grayscale(80%); /* Start with a more artistic, desaturated look */
    transition: filter 0.4s ease;
}

/* The decorative accent box */
.photo-accent {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 3px solid var(--secondary-color);
    z-index: -1;
    transition: transform 0.4s ease, border-color 0.4s ease;
}

/* --- The Bio Block --- */
.instructor-bio {
    padding: 30px 0; /* Vertical padding only, no horizontal */
}

.instructor-bio .rank {
    display: inline-block;
    font-family: var(--font-family-headings);
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 700;
}

.instructor-bio h3 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.instructor-bio p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}

/* --- Alternating Layout for the Second Instructor --- */
.instructor-profile:nth-child(even) {
    direction: rtl; /* Reverses the order of grid items */
}

.instructor-profile:nth-child(even) * {
    direction: ltr; /* Resets text direction for content */
}

.instructor-profile:nth-child(even) .photo-accent {
    left: auto;
    right: -20px; /* Position accent on the other side */
}

/* --- Hover Effects --- */
.instructor-profile:hover .instructor-photo img {
    filter: grayscale(0%); /* Full color on hover */
}

.instructor-profile:hover .photo-accent {
    transform: translate(10px, 10px);
    border-color: var(--primary-color);
}

.instructor-profile:nth-child(even):hover .photo-accent {
    transform: translate(-10px, 10px); /* Adjust for reversed layout */
}


/* --- Responsive adjustments for the new Head Instructors design --- */
@media (max-width: 992px) {
    .instructor-profile,
    .instructor-profile:nth-child(even) {
        grid-template-columns: 1fr; /* Stack vertically */
        direction: ltr; /* Reset direction */
        gap: 30px;
    }
    
    .instructor-profile * {
        direction: ltr; /* Ensure all children are correct */
    }

    .instructor-bio {
        text-align: center;
    }
    
    .instructor-photo {
        max-width: 400px;
        margin: 0 auto;
    }
}
/* --- Lineage Section --- */
.lineage {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85));
}

.lineage-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.lineage-gallery {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.lineage-image {
    text-align: center;
}

.lineage-image img {
    border: 3px solid #555;
    padding: 5px;
    background: #000;
    filter: sepia(0.5) contrast(1.1);
    width: 200px;
    height: 280px;
    object-fit: cover;
}

.lineage-image span {
    display: block;
    margin-top: 10px;
    color: #aaa;
    font-style: italic;
}

/* --- Teaching Philosophy Section --- */
/* --- Unusual Philosophy Slider Styles --- */

.teaching-philosophy {
    padding-bottom: 0; /* Remove bottom padding to merge with the slider */
}

.philosophy-slider-container {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* --- Backgrounds Layer --- */
.philosophy-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.philosophy-backgrounds::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7, 7, 9, 0.8); /* Dark overlay for text readability */
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.05);
    /* This creates the smooth crossfade and zoom effect */
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.background-image.active {
    opacity: 1;
    transform: scale(1);
}

/* --- Content Layer --- */
.philosophy-content-layer {
    position: relative;
    z-index: 2;
    height: 250px; /* Set a fixed height for the content area */
    display: flex;
    align-items: center;
}

.philosophy-content-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.philosophy-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15px;
    max-width: 700px; /* Limit text width */
    
    /* Animation for text */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}

.philosophy-slide.active {
    opacity: 1;
    transform: translateY(0);
}

.philosophy-slide h3 {
    color: var(--primary-color);
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.philosophy-slide p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #ccc;
}


/* --- Navigation Layer --- */
.philosophy-nav-layer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 3;
    padding: 30px 0;
}

.philosophy-nav {
    position: relative;
    display: flex;
    justify-content: space-around;
    max-width: 700px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
}

.nav-button {
    background: none;
    border: none;
    color: #888;
    font-size: 1.1rem;
    font-family: var(--font-family-headings);
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.4s ease;
    padding: 0 10px;
}

.nav-button.active {
    color: #fff;
}

.nav-progress-line {
    position: absolute;
    top: -1px; /* Sits on top of the border-top */
    left: 0;
    height: 2px;
    background: var(--primary-color);
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .philosophy-slider-container {
        min-height: 550px;
    }

    .philosophy-slide h3 {
        font-size: 2rem;
    }

    .philosophy-slide p {
        font-size: 1rem;
    }

    .nav-button {
        font-size: 0.9rem;
    }
}

/* --- Assistant Instructors Section --- */
.assistant-instructors {
    background-color: var(--dark-color);
}

.assistant-instructors .section-intro {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.assistants-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.assistant-card {
    text-align: center;
    transition: transform 0.3s ease;
}

.assistant-card:hover {
    transform: scale(1.05);
}

.assistant-card img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px;
    filter: grayscale(1);
    border: 3px solid var(--secondary-color);
    transition: filter 0.3s ease, border-color 0.3s ease;
}

.assistant-card:hover img {
    filter: grayscale(0);
    border-color: var(--primary-color);
}

.assistant-card h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.assistant-card span {
    color: #aaa;
}

/* --- Train With Us CTA Section --- */
.train-with-us {
    background: linear-gradient(rgba(7, 7, 9, 0.8), rgba(7, 7, 9, 0.8)), center/cover no-repeat;
    text-align: center;
}

.train-with-us-content {
    max-width: 700px;
    margin: 0 auto;
}

.train-with-us-content h2 {
    font-size: 2.8rem;
    color: var(--primary-color);
}

/* --- Responsive Adjustments for Masters Page --- */
@media (max-width: 992px) {
    .grandmaster-content,
    .lineage-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .grandmaster-image {
        max-width: 300px;
        margin: 0 auto 30px;
    }

    .grandmaster-bio h2 {
        text-align: center;
    }
    
    .instructors-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-content {
        grid-template-columns: 1fr;
    }

    .assistants-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .instructor-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .assistants-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Classes Page Specific Styles --- */

/* --- Classes Hero Section --- */
.classes-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-top: 7rem;
}

.classes-hero .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.classes-hero .hero-content h2 {
    font-size: 3.5rem;
}

/* --- Class Schedule Section --- */
.class-schedule {
    background-color: #101012;
}
.class-schedule .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.schedule-table-wrapper {
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.9rem;
}

.schedule-table th, .schedule-table td {
    padding: 15px 10px;
    border: 1px solid #222;
}

.schedule-table thead {
    background-color: var(--secondary-color);
}

.schedule-table th {
    text-transform: uppercase;
    font-family: var(--font-family-headings);
}

.schedule-table tbody tr:nth-child(odd) {
    background-color: var(--dark-color);
}

.schedule-table td:first-child {
    font-weight: bold;
    color: var(--primary-color);
}
.schedule-table td.special-class {
    background-color: rgba(174, 25, 24, 0.3);
    font-weight: bold;
}

/* --- Program Details Section --- */

/* --- Program Details Immersive Slider Styles --- */

.program-details {
    padding: 0; /* Remove padding from the section wrapper */
    height: 100vh; /* Make the slider full viewport height */
}

.program-slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* --- Backgrounds Layer --- */
.program-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.program-backgrounds::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(7, 7, 9, 0.9) 10%, rgba(7, 7, 9, 0.5) 50%, rgba(7, 7, 9, 0.9) 90%);
}

.program-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    /* Cinematic crossfade and zoom */
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.program-bg-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* --- Content Layer --- */
.program-slider-track {
    position: relative;
    z-index: 2;
}

.program-slide {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    
    /* Animation for content slides */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease 0.4s, visibility 0s 1.2s;
}

.program-slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease 0.4s, visibility 0s 0s;
}

.program-slide-content {
    max-width: 600px;
}

.program-slide h3 {
    font-size: 3.5rem;
    color: #fff;
    margin-bottom: 10px;
}

.program-slide .program-ages {
    display: block;
    font-size: 1.5rem;
    color: var(--primary-color);
    font-family: var(--font-family-headings);
    margin-bottom: 25px;
}

.program-slide p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}

.program-slide p strong {
    color: #fff;
}


/* --- UI Layer --- */
.program-slider-ui {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 40px 0;
}

.slider-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.slider-arrow {
    background: none;
    border: 2px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-arrow:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: scale(1.1);
}

.slider-pagination {
    display: flex;
    gap: 15px;
}

.pagination-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pagination-dot.active {
    background-color: var(--primary-color);
    transform: scale(1.2);
}


/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .program-slide-content {
        padding: 0 20px;
    }

    .program-slide h3 {
        font-size: 2.5rem;
    }

    .program-slide .program-ages {
        font-size: 1.2rem;
    }
}


/* --- Specialty Classes Section --- */
.specialty-classes {
    background-color: #101012;
}
.specialty-classes .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.specialty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.specialty-card {
    background: var(--dark-color);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.specialty-card img {
    height: 220px;
    width: 100%;
    object-fit: cover;
}

.specialty-card h3 {
    color: var(--primary-color);
    margin: 20px 0 10px;
}

.specialty-card p {
    padding: 0 20px 20px;
}

/* --- Belt System Section --- */
/* DELETE THE OLD .belt-system CSS AND REPLACE IT WITH THIS NEW DESIGN */

.belt-system {
    background: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85));
    padding: 80px 0;
}

.belt-system-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.dojo-belt-rack {
    display: grid;
    /* This grid makes the rack responsive automatically */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    background: rgba(7, 7, 9, 0.7);
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #333;
}

.belt-item {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.belt-item:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* The main colored fabric of the belt */
.belt-fabric {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--belt-color);
    border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 
                inset 0 -2px 4px rgba(255,255,255,0.2);
}

/* This pseudo-element creates the illusion of a folded-over piece */
.belt-fabric::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    border-radius: 0 0 5px 5px;
}

/* The SVG knot */
.belt-knot {
    position: relative;
    z-index: 2;
    width: 25px;
    height: 25px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    margin-left: -70%; /* Position knot to the side */
}

.belt-knot svg {
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 10;
    stroke-linecap: round;
}

.belt-name {
    position: relative;
    z-index: 2;
    font-family: var(--font-family-headings);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    /* Add a subtle shadow to make text pop */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}


/* --- Responsive adjustments for the new Belt System --- */
@media (max-width: 576px) {
    .dojo-belt-rack {
        grid-template-columns: 1fr; /* Stack belts in a single column */
        gap: 20px;
        padding: 30px;
    }
}

/* --- First Class Section --- */

/* DELETE THE OLD .first-class CSS AND REPLACE IT WITH THIS NEW DESIGN */

.first-class {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
}

.journey-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.journey-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--dark-color) 0%, rgba(7, 7, 9, 0.7) 100%);
}

.journey-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2; /* Make the background atmospheric and subtle */
}

.first-class-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.first-class-journey {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.journey-card {
    position: relative;
    padding: 40px 30px;
    text-align: center;
    border-radius: 15px;
    
    /* The Glassmorphism Effect */
    background: rgba(16, 16, 18, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border: 1px solid rgba(112, 28, 26, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* For staggered animation */
    animation-delay: var(--delay, 0s);
}

.journey-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.card-number {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 3rem;
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.05);
    line-height: 1;
    user-select: none;
}

.card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
    color: #fff;
}

.journey-card h4 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.journey-card p {
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive adjustments for the new First Class design --- */
@media (max-width: 992px) {
    .first-class-journey {
        grid-template-columns: 1fr; /* Stack cards vertically */
        max-width: 500px;
        margin: 0 auto;
    }
}
/* --- Responsive Adjustments for Classes Page --- */
@media (max-width: 992px) {
    .program-item,
    .program-item:nth-child(2n) {
        grid-template-columns: 1fr;
    }
    .program-item .program-image,
    .program-item:nth-child(2n) .program-image {
        order: -1; /* Always put image on top */
    }

    .specialty-grid {
        grid-template-columns: 1fr;
    }
    
    .belt-system-content {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "text"
            "belts"
            "image";
    }

    .first-class-content {
        grid-template-columns: 1fr;
    }
}

/* --- Membership Page Specific Styles --- */

/* --- Membership Hero Section --- */
.membership-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding-top: 8rem;
}

.membership-hero .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.membership-hero .hero-content h2 {
    font-size: 3.5rem;
}

/* --- Pricing Plans Section --- */
.pricing-plans {
    background-color: var(--dark-color);
}
.pricing-plans .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}

.pricing-card {
    background-color: #101012;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #222;
}
.pricing-card:hover {
    transform: translateY(-10px);
}

.pricing-header {
    padding: 30px;
    border-bottom: 1px solid #222;
}
.pricing-header h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
}
.pricing-header .price {
    font-size: 4rem;
    font-family: var(--font-family-headings);
    font-weight: 700;
    color: #fff;
    margin: 10px 0;
}
.pricing-header .price span {
    font-size: 1.5rem;
    vertical-align: middle;
    color: #888;
}

.pricing-body {
    padding: 30px;
}
.pricing-body ul {
    list-style: none;
    margin-bottom: 30px;
}
.pricing-body ul li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
}
.pricing-body ul li::before {
    content: '✓';
    color: var(--primary-color);
    position: absolute;
    left: 0;
}
.pricing-body ul li.disabled {
    color: #666;
    text-decoration: line-through;
}
.pricing-body ul li.disabled::before {
    content: '✗';
    color: #666;
}

.pricing-card.popular {
    transform: scale(1.05);
    border: 2px solid var(--primary-color);
    box-shadow: 0 0 30px rgba(174, 25, 24, 0.4);
    position: relative;
}
.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- Why Join Section --- */
.why-join {
    background-color: #101012;
}
.why-join .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.why-join-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.why-join-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.why-join-icon {
    flex-shrink: 0; /* Prevents the icon from shrinking */
    width: 50px;
    height: 50px;
    color: var(--primary-color); /* Sets the color for the SVG */
}

/* Add this to ensure the SVG fills its container */
.why-join-icon svg {
    width: 100%;
    height: 100%;
}

.why-join-item img {
    width: 50px;
    height: 50px;
}
.why-join-item h3 {
    margin-bottom: 10px;
    font-size: 1.4rem;
}

/* --- Trial Offer Section --- */
.trial-offer {
    background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), center/cover fixed;
}
.trial-offer-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: center;
}
.trial-offer-image img {
    border-radius: 10px;
    border: 5px solid var(--secondary-color);
    height: 400px;
    object-fit: cover;
}
.trial-offer-text h2 {
    text-align: left;
    color: var(--primary-color);
}
.trial-offer-text .btn {
    margin-top: 20px;
}

/* --- Membership FAQ Section --- */
.membership-faq {
    background-color: #101012;
}
.faq-accordion {
    max-width: 800px;
    margin: 50px auto 0;
}
.faq-item {
    border-bottom: 1px solid #333;
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    text-align: left;
}
.faq-question span {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-family-headings);
}
.faq-question .faq-icon {
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.5s ease;
}
.faq-answer p {
    padding-bottom: 20px;
    color: #bbb;
}

/* --- Included Gallery --- */
/* --- Unique Film Strip Slider Styles --- */

.included-gallery {
    background-color: var(--dark-color);
    padding: 80px 0;
}

.filmstrip-slider-container {
    position: relative;
    margin-top: 60px;
    padding: 0 50px; /* Space for navigation buttons */
}

.filmstrip-viewport {
    width: 100%;
    overflow: hidden; /* This is the key to the slider effect */
}

.filmstrip-track {
    display: flex;
    align-items: center;
    gap: 40px;
    /* This transition makes the sliding animation smooth */
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.filmstrip-item {
    flex-shrink: 0; /* Prevent items from shrinking */
    width: 400px; /* Set a base width for the items */
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    
    /* These transitions animate the active state changes */
    transition: transform 0.5s ease, filter 0.5s ease;
    
    /* Default state for non-active items */
    transform: scale(0.85);
    filter: grayscale(80%) brightness(0.7);
}

.filmstrip-item.active {
    /* Active state: larger and full color */
    transform: scale(1);
    filter: grayscale(0%) brightness(1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.filmstrip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- UI Styling --- */
.filmstrip-caption {
    text-align: center;
    margin-top: 30px;
    font-size: 1.3rem;
    font-family: var(--font-family-headings);
    color: #ccc;
    height: 25px; /* Fixed height to prevent layout shift */
    transition: opacity 0.4s ease;
}

.filmstrip-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(7, 7, 9, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.filmstrip-nav:hover {
    background-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.filmstrip-nav.prev {
    left: 0;
}

.filmstrip-nav.next {
    right: 0;
}


/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .filmstrip-slider-container {
        padding: 0 40px;
    }
    
    .filmstrip-track {
        gap: 20px;
    }

    .filmstrip-item {
        width: 250px; /* Smaller items on smaller screens */
    }

    .filmstrip-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
}

/* --- Membership Contact Section --- */
.membership-contact {
    background-color: var(--secondary-color);
}
.membership-contact h2, .membership-contact p {
    color: #fff;
    text-align: center;
}
.membership-contact .section-intro {
    max-width: 700px;
    margin: 0 auto 50px;
}
.contact-form {
    max-width: 800px;
    margin: 0 auto;
}
.form-group {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 15px;
    background-color: rgba(7, 7, 9, 0.5);
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-family: var(--font-family-body);
}
.form-group input::placeholder, .form-group textarea::placeholder {
    color: #ccc;
}
.contact-form button {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

/* --- Responsive Adjustments for Membership Page --- */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    .pricing-card {
        max-width: 450px;
        margin: 0 auto;
    }
    .pricing-card.popular {
        transform: scale(1); /* Reset scale on smaller screens */
    }
    .why-join-grid {
        grid-template-columns: 1fr;
    }
    .trial-offer-content {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .form-group {
        flex-direction: column;
    }
}

/* --- Events Page Specific Styles --- */

/* --- Events Hero Section --- */
.events-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.events-hero .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.events-hero .hero-content h2 {
    font-size: 3.5rem;
}

/* --- Upcoming Events Section --- */
.upcoming-events {
    background-color: #101012;
}
.upcoming-events .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.events-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.event-card {
    background-color: var(--dark-color);
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 300px 1fr;
    transition: box-shadow 0.3s ease;
}
.event-card:hover {
     box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-details {
    display: flex;
    padding: 30px;
    gap: 30px;
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-family: var(--font-family-headings);
    border-right: 2px solid #333;
    padding-right: 30px;
}
.event-date span:first-child {
    font-size: 1.2rem;
    font-weight: 700;
}
.event-date span:last-child {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.event-info h3 {
    margin-bottom: 10px;
}
.event-info .btn {
    margin-top: 15px;
}

/* --- Event Types Section --- */
/* DELETE THE OLD .event-types CSS AND REPLACE IT WITH THIS NEW DESIGN */

.event-types {
    background-color: var(--dark-color);
    padding: 80px 0;
}

.event-types .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

/* The core of the unique layout */
.event-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto; /* Two rows of automatic height */
    gap: 30px;
}

.event-feature-card {
    padding: 30px;
    border-radius: 15px;
    
    /* Glass morphism effect */
    background: rgba(16, 16, 18, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(112, 28, 26, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;

    /* For staggered animations */
    animation-delay: var(--delay, 0s);
}

.event-feature-card:hover {
    transform: translateY(-10px);
    /* A subtle, colored glow on hover */
    box-shadow: 0 20px 40px rgba(174, 25, 24, 0.15);
}

/* --- Card Grid Placement --- */
.card-1 {
    grid-column: 1 / 2; /* Takes the first column */
    grid-row: 1 / 3;    /* Spans both rows, making it tall */
}

.card-2 {
    grid-column: 2 / 3; /* Takes the second column */
    grid-row: 1 / 2;    /* Sits in the first row */
}

.card-3 {
    grid-column: 2 / 3; /* Takes the second column */
    grid-row: 2 / 3;    /* Sits in the second row */
}

.card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.card-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--dark-color);
    color: var(--primary-color);
    border: 1px solid #333;
}

.card-header h3 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin: 0;
}

.card-body p {
    font-size: 1rem;
    line-height: 1.7;
    color: #bbb;
    margin: 0;
}


/* --- Responsive adjustments for the unique grid --- */
@media (max-width: 992px) {
    .event-types-grid {
        grid-template-columns: 1fr; /* Stack everything in a single column */
        grid-template-rows: auto;   /* Reset rows */
    }

    /* Reset all custom grid placements */
    .card-1, .card-2, .card-3 {
        grid-column: auto;
        grid-row: auto;
    }
}

/* --- Community Gatherings Section --- */
/* DELETE THE OLD .community-gatherings CSS AND REPLACE IT WITH THIS NEW DESIGN */

.community-gatherings {
    background: var(--dark-color);
    padding: 80px 0;
}

.gathering-showcase {
    display: grid;
    /* A 12-column grid gives us fine-grained control over the overlap */
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    position: relative;
    min-height: 500px;
}

/* --- The Background Image --- */
.gathering-background-image {
    grid-column: 1 / 9; /* Span from the 1st to the 9th column line */
    grid-row: 1 / 2;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.gathering-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gathering-background-image:hover img {
    transform: scale(1.05);
}

/* --- The Glass Text Card --- */
.gathering-text-card {
    grid-column: 7 / 13; /* Overlap from the 7th to the 13th column line */
    grid-row: 1 / 2;
    z-index: 2; /* Ensure this card is on top */
    
    padding: 40px;
    border-radius: 15px;

    /* The Glassmorphism Effect */
    background: rgba(16, 16, 18, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    border: 1px solid rgba(112, 28, 26, 0.4);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    
    /* Used for staggered animation */
    animation-delay: var(--delay, 0s);
}

.gathering-text-card h2 {
    text-align: left;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.gathering-text-card p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
}

/* Decorative Icon inside the card */
.card-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(to bottom right, var(--primary-color), var(--secondary-color));
    color: #fff;
    margin-bottom: 20px;
}

/* Styling for the new highlights list */
.event-highlights {
    list-style: none;
    margin: 30px 0;
    padding: 0;
}

.event-highlights li {
    padding-left: 30px;
    position: relative;
    margin-bottom: 15px;
    font-size: 1.1rem;
    font-weight: 700;
}

.event-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}


/* --- Responsive adjustments for the amazing design --- */
@media (max-width: 992px) {
    .gathering-showcase {
        display: flex; /* Switch to a simpler layout */
        flex-direction: column;
        min-height: auto;
    }
    
    .gathering-background-image {
        width: 100%;
        height: 300px; /* Give the image a fixed height */
        margin-bottom: -60px; /* Pull the text card up for a partial overlap */
    }

    .gathering-text-card {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .gathering-text-card {
        padding: 30px;
    }

    .gathering-text-card h2 {
        font-size: 2rem;
    }
}
/* --- Past Events Gallery Section --- */
/* DELETE THE OLD .past-events-gallery CSS AND REPLACE IT WITH THIS NEW DESIGN */

.past-events-gallery {
    background-color: #101012;
    padding: 80px 0;
}

.past-events-gallery .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

/* --- The Interactive Grid --- */
.polaroid-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    /* This keeps the container proportional as it scales */
    aspect-ratio: 4 / 3;
}

.polaroid-item {
    background-color: #f4f4f4;
    padding: 15px 15px 60px 15px; /* Polaroid proportions */
    border-radius: 5px;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    
    /* This transition is the key to the smooth animation */
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), 
                filter 0.5s ease,
                box-shadow 0.5s ease;
}

.polaroid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.polaroid-item figcaption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: center;
    font-family: 'Caveat', cursive; /* Optional: Add a handwriting font */
    font-size: 1.6rem;
    color: #333;
    font-weight: 700;
}

/* --- Initial positions and rotations for a scattered look --- */
.item-1 { transform: rotate(-4deg); }
.item-2 { transform: rotate(3deg); }
.item-3 { transform: rotate(5deg); }
.item-4 { transform: rotate(-2deg); }

/* --- The Hover Interaction Magic --- */

/* When hovering over the *container*, make all items fade back */
.polaroid-grid-container:hover .polaroid-item {
    filter: grayscale(100%) brightness(0.6);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

/* But, for the *specific item* being hovered, override the above styles */
.polaroid-grid-container .polaroid-item:hover {
    transform: scale(1.2) rotate(0deg); /* Enlarge and straighten */
    z-index: 10;
    filter: grayscale(0%) brightness(1); /* Bring to full color */
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}


/* --- Responsive adjustments for the grid --- */
@media (max-width: 992px) {
    .polaroid-grid-container {
        aspect-ratio: 1 / 1.2; /* Taller aspect ratio for vertical stacking */
    }
}

@media (max-width: 576px) {
    .polaroid-grid-container {
        /* Switch to a single column layout on small screens */
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        gap: 40px; /* Increase gap to avoid overlap when expanding */
        aspect-ratio: auto; /* Let height be determined by content */
        max-width: 300px;
    }
    
    /* On mobile, the hover effect is simpler: just grow in place */
    .polaroid-grid-container:hover .polaroid-item {
        filter: none; /* No grayscale effect on mobile */
    }

    .polaroid-grid-container .polaroid-item:hover {
        transform: scale(1.1); /* A more subtle grow effect */
    }

    /* Reset initial rotations for a clean stack */
    .item-1, .item-2, .item-3, .item-4 {
        transform: rotate(0deg);
    }
}

/* --- Event Calendar Section --- */
.event-calendar {
    background-color: var(--dark-color);
}
.calendar-container {
    max-width: 900px;
    margin: 50px auto 0;
    background: #101012;
    border-radius: 10px;
    padding: 30px;
    overflow-x: scroll;
}
.calendar-header {
    text-align: center;
    margin-bottom: 20px;
}
.calendar-header h3 {
    font-size: 2rem;
    color: var(--primary-color);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.day-name, .day {
    text-align: center;
    padding: 15px 10px;
}
.day-name {
    font-weight: 700;
}
.day {
    background-color: var(--dark-color);
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.day:hover {
    background-color: var(--secondary-color);
}
.day.prev-month, .day.next-month {
    color: #555;
}
.day.has-event {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: bold;
    position: relative;
    cursor: pointer;
}
.event-dot {
    display: none; /* simple version, no dot */
}
.event-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    white-space: nowrap;
    margin-bottom: 5px;
}
.day.has-event:hover .event-tooltip {
    display: block;
}

/* --- Stay Updated CTA Section --- */
.stay-updated {
    background-color: var(--secondary-color);
    padding: 60px 0;
}
.stay-updated-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.stay-updated-content h2 {
    color: #fff;
}
.stay-updated-content p {
    color: #eee;
    margin-bottom: 30px;
}
.newsletter-form {
    display: flex;
    gap: 10px;
}
.newsletter-form input {
    flex-grow: 1;
    padding: 15px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
}
.newsletter-form .btn {
    border-color: #fff;
    color: var(--secondary-color);
    background-color: #fff;
}
.newsletter-form .btn:hover {
    background-color: transparent;
    color: #fff;
}

/* --- Responsive Adjustments for Events Page --- */
@media (max-width: 992px) {
    .event-card {
        grid-template-columns: 200px 1fr;
    }
    .community-gatherings-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .event-card {
        grid-template-columns: 1fr;
    }
    .event-image {
        height: 200px;
    }
    .event-details {
        padding: 20px;
        gap: 20px;
    }
    .event-date {
        padding-right: 20px;
    }
    .event-type-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .day-name {
        font-size: 0.8rem;
    }
    .day {
        padding: 10px 5px;
        font-size: 0.9rem;
    }
    .newsletter-form {
        flex-direction: column;
    }
}

/* --- Reviews Page Specific Styles --- */

/* --- Reviews Hero Section --- */
.reviews-hero {
    height: 60vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.reviews-hero .hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviews-hero .hero-content h2 {
    font-size: 3.5rem;
}

/* --- Testimonial Showcase Section --- */
.testimonial-showcase {
    background-color: #101012;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.testimonial-card {
    background-color: var(--dark-color);
    border-radius: 10px;
    padding: 30px;
    border-left: 5px solid var(--secondary-color);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}
.testimonial-header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonial-header h4 {
    margin: 0;
    font-size: 1.2rem;
}
.testimonial-header span {
    color: #aaa;
    font-size: 0.9rem;
}

.testimonial-body .stars {
    color: #ffd700;
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.testimonial-body p {
    font-style: italic;
    color: #ccc;
    margin: 0;
}

/* --- Video Testimonials Section --- */
.video-testimonials {
    background-color: var(--dark-color);
}
.video-testimonials .section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.video-main-wrapper {
    max-width: 800px;
    margin: 0 auto;
}
.video-player {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
}
.video-player img {
    width: 100%;
    transition: transform 0.3s ease;
}
.video-player:hover img {
    transform: scale(1.05);
}
.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: #fff;
    background: rgba(174, 25, 24, 0.7);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.video-player:hover .play-button-overlay {
    background: rgba(174, 25, 24, 0.9);
}
.video-caption {
    background: #101012;
    padding: 20px;
    border-radius: 0 0 10px 10px;
}
.video-caption h3 {
    margin-bottom: 10px;
}
.video-caption p {
    margin-bottom: 0;
}

/* --- Transformation Stories Section --- */
.transformation-stories {
    background: #101012;
}
.transformation-story {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: center;
}
.transformation-images {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.transformation-image {
    text-align: center;
}
.transformation-image img {
    border-radius: 10px;
    border: 3px solid #444;
}
.transformation-image span {
    display: block;
    margin-top: 10px;
    font-family: var(--font-family-headings);
    text-transform: uppercase;
    color: var(--primary-color);
}
.transformation-arrow {
    font-size: 3rem;
    color: var(--primary-color);
}
.transformation-text h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
}

/* --- Reviews by Program Section --- */
.reviews-by-program {
    background: var(--dark-color);
}
.program-reviews-wrapper {
    max-width: 800px;
    margin: 50px auto 0;
}
.review-tabs {
    display: flex;
    border-bottom: 2px solid #333;
}
.tab-link {
    background: none;
    border: none;
    color: #aaa;
    padding: 15px 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    border-bottom: 3px solid transparent;
    transform: translateY(2px);
}
.tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.tab-content {
    display: none;
    padding: 30px 0;
}
.tab-content.active {
    display: block;
}
.tab-content p {
    padding-left: 20px;
    border-left: 3px solid var(--secondary-color);
    margin-bottom: 20px;
}
.tab-content p strong {
    display: block;
    color: #fff;
    margin-bottom: 5px;
}

/* --- Leave a Review Section --- */
.leave-review {
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
}
.leave-review-content {
    text-align: center;
}
.leave-review-content img {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}
.leave-review-content h2, .leave-review-content p {
    color: #fff;
}
.leave-review-content p {
    max-width: 600px;
    margin: 0 auto 30px;
}
.review-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* --- Unique 3D Perspective Carousel Styles --- */

.wall-of-fame {
    background-color: #101012;
    padding: 80px 0;
}

/* This is the main container that enables the 3D view */
.perspective-carousel-container {
    position: relative;
    width: 100%;
    height: 400px; /* Define a height for the carousel area */
    margin-top: 60px;
    perspective: 1200px; /* The "camera" distance. Crucial for the 3D effect. */
}

/* This is the element that will rotate in 3D space */
.carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    /* This tells child elements to respect the 3D transformations */
    transform-style: preserve-3d;
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1); /* Smooth rotation */
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 350px; /* Width of each image panel */
    height: 250px; /* Height of each image panel */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    /* Backface is hidden so we don't see the back of panels as they rotate */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- UI Styling --- */
.carousel-caption-container {
    position: absolute;
    bottom: -60px; /* Position below the carousel */
    left: 0;
    right: 0;
    text-align: center;
}

.carousel-caption {
    font-family: var(--font-family-headings);
    font-size: 1.3rem;
    color: #ccc;
    transition: opacity 0.5s ease;
}

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(7, 7, 9, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-nav:hover {
    background-color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev {
    left: 10%;
}

.carousel-nav.next {
    right: 10%;
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
    .perspective-carousel-container {
        height: 300px;
    }
    .carousel-item {
        width: 250px;
        height: 180px;
    }
    .carousel-nav.prev { left: 5%; }
    .carousel-nav.next { right: 5%; }
}

@media (max-width: 576px) {
    .carousel-item {
        width: 200px;
        height: 150px;
    }
    .carousel-nav.prev { left: 0; }
    .carousel-nav.next { right: 0; }
}

/* --- Responsive Adjustments for Reviews Page --- */
@media (max-width: 992px) {
    .testimonial-grid {
        grid-template-columns: 1fr;
    }
    .transformation-story {
        grid-template-columns: 1fr;
    }
    .transformation-images {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .review-links {
        flex-direction: column;
    }
    .review-tabs {
        flex-direction: column;
    }
    .tab-link {
        border-bottom: 1px solid #333;
        transform: none;
    }
    .tab-link.active {
        border-bottom: 1px solid var(--primary-color);
    }
}

/* --- Footer --- */
/* DELETE THE OLD footer CSS AND REPLACE IT WITH THIS NEW DESIGN */

footer {
    background-color: #101012; /* Use the darkest theme color */
    padding: 60px 0 30px;
    
    /* A subtle, premium top border */
    border-top: 3px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to left, var(--primary-color), var(--secondary-color));
}

.footer-main {
    display: grid;
    /* A more deliberate grid layout */
    grid-template-columns: 2fr 1fr 1fr; 
    gap: 40px;
    margin-bottom: 50px;
}

.footer-column h4, .footer-logo h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-logo h3 {
    margin-bottom: 15px;
    text-transform: none;
    letter-spacing: 0;
}

.footer-column p {
    color: #aaa;
    line-height: 1.7;
    margin-bottom: 10px;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a,
.footer-contact a {
    color: #aaa;
    position: relative;
    padding-bottom: 3px;
    transition: color 0.3s ease;
}

.footer-links ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--primary-color);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-links ul li a:hover,
.footer-contact a:hover {
    color: #fff;
}

.footer-links ul li a:hover::before {
    width: 100%;
}

/* --- Newsletter Form Styling --- */
.newsletter-form {
    display: flex;
    border: 1px solid #444;
    border-radius: 5px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.newsletter-form:focus-within {
    border-color: var(--primary-color);
}

.newsletter-form input {
    flex-grow: 1;
    background: none;
    border: none;
    padding: 12px 15px;
    color: #fff;
    font-size: 1rem;
}

.newsletter-form input:focus {
    outline: none;
}

.newsletter-form button {
    background-color: var(--secondary-color);
    border: none;
    color: #fff;
    padding: 0 20px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
    background-color: var(--primary-color);
}

/* --- Footer Bottom: Social and Copyright --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #333;
    padding-top: 30px;
    color: #888;
}

.footer-social {
    display: flex;
    gap: 20px;
}

.footer-social a {
    color: #888;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    color: var(--primary-color);
    transform: translateY(-3px);
}

.footer-social svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* --- Responsive adjustments for the new Footer design --- */
@media (max-width: 992px) {
    .footer-main {
        grid-template-columns: 1fr 1fr; /* 2x2 grid on tablets */
    }
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr; /* Single column on mobile */
        text-align: center;
    }

    .footer-links ul li a::before {
        display: none; /* Hide fancy underline on mobile */
    }

    .footer-bottom {
        flex-direction: column; /* Stack social and copyright */
        gap: 20px;
    }
}


/* --- Animations on Scroll --- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

/* --- Responsive Styles --- */
@media (max-width: 992px) {
    h2 {
        font-size: 2rem;
    }

    .hero-content h2 {
        font-size: 3rem;
    }

    .about-us-content {
        grid-template-columns: 1fr;
    }

    .philosophy-grid {
        grid-template-columns: 1fr;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 860px) {
    header nav {
        /* Full-screen overlay */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        /* Centering the links */
        display: flex;
        align-items: center;
        justify-content: center;
        
        /* Glass effect background */
        background: rgba(7, 7, 9, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        
        /* Initial state: hidden off-screen to the right */
        transform: translateX(100%);
        visibility: hidden;
        
        /* The smooth slide-in transition */
        transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), 
                    visibility 0.5s;
    }

    /* When the nav is open, slide it into view */
    header.nav-open nav {
        transform: translateX(0);
        visibility: visible;
    }
    
    header nav ul {
        flex-direction: column;
        gap: 20px; /* Use gap for consistent spacing */
        padding: 0;
    }

    header nav ul li {
        margin: 0; /* Reset margins */
        text-align: center;
        
        /* Initial state for link animation */
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    
    /* When nav is open, cascade the links into view */
    header.nav-open nav ul li {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered animation delay for each link */
    header.nav-open nav ul li:nth-child(1) { transition-delay: 0.20s; }
    header.nav-open nav ul li:nth-child(2) { transition-delay: 0.25s; }
    header.nav-open nav ul li:nth-child(3) { transition-delay: 0.30s; }
    header.nav-open nav ul li:nth-child(4) { transition-delay: 0.35s; }
    header.nav-open nav ul li:nth-child(5) { transition-delay: 0.40s; }
    header.nav-open nav ul li:nth-child(6) { transition-delay: 0.45s; }
    header.nav-open nav ul li:nth-child(7) { transition-delay: 0.50s; }

    header nav ul li a {
        font-size: 1.5rem; /* Larger, more tappable links */
        padding: 10px 20px;
    }
    
    .menu-toggle {
        display: block; /* Ensure the burger is visible */
    }

    .testimonial-slide {
        flex-direction: column;
        text-align: center;
    }
    
    .testimonial-slide img {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .hero-content h2 {
        font-size: 2.5rem;
    }

    .programs-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Legal Pages (Privacy/Terms) --- */

.legal-hero {
    height: 40vh;
    min-height: 250px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(7, 7, 9, 0.8), rgba(7, 7, 9, 0.8)), center/cover;
}

.legal-hero h1 {
    font-size: 3rem;
    color: #fff;
}

.legal-hero p {
    font-size: 1.2rem;
    color: var(--primary-color);
}

.legal-content {
    background-color: var(--dark-color);
    padding: 80px 0;
}

.legal-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: #101012;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #333;
}

.last-updated {
    font-style: italic;
    color: #888;
    text-align: right;
    margin-bottom: 30px;
}

.legal-wrapper article {
    margin-bottom: 40px;
}

.legal-wrapper h2 {
    font-size: 1.8rem;
    color: var(--primary-color);
    text-align: left;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.legal-wrapper p, .legal-wrapper li {
    color: #ccc;
    line-height: 1.7;
}

.legal-wrapper ul {
    list-style: none;
    padding-left: 0;
}

.legal-wrapper ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
}

.legal-wrapper ul li::before {
    content: '»';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

.legal-wrapper .btn {
    margin-top: 20px;
}

/* --- Thank You Page Styles --- */

.thank-you-main {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 70vh; /* Ensures content is centered vertically on the screen */
    padding: 40px 0;
    background: var(--dark-color);
}

.thank-you-box {
    max-width: 600px;
    padding: 40px;
    
    /* A subtle glass effect to match other modern sections */
    background: rgba(16, 16, 18, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border-radius: 15px;
    border: 1px solid #333;
}

.thank-you-box h1 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 15px;
}

.thank-you-box p {
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* --- Animated Checkmark --- */
.checkmark-container {
    margin: 0 auto 30px;
}

.checkmark-svg {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 3;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px var(--primary-color);
    margin: auto;
    /* Start the animation when the element appears */
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3;
    stroke-miterlimit: 10;
    stroke: var(--primary-color);
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* --- Keyframe Animations --- */
@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 50px var(--primary-color);
    }
}