/* wwwroot/css/snippets/default.css */

/* ========================================
   DEFAULT SNIPPET CONTAINER
   ======================================== */
.default-snippet {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* ========================================
   SNIPPET HEADER
   ======================================== */
.snippet-header {
    margin-bottom: 1.25rem;
}

.snippet-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.snippet-description {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.5;
}

/* ========================================
   SNIPPET CONTENTS CONTAINER
   ======================================== */
.snippet-contents {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ========================================
   CONTENT ITEM
   ======================================== */
.content-item {
    padding: 1rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

    .content-item.first {
        /* Special styling for first item if needed */
    }

    .content-item:hover {
        /* Optional hover effect - can be controlled by Objective.IsHover */
    }

    /* Content Title inside item */
    .content-item h3 {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #212529;
    }

    /* Content Description/Text inside item */
    .content-item p {
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 0.75rem;
        color: #495057;
    }

/* ========================================
   CONTENT HTML
   ======================================== */
.content-html {
    margin-bottom: 0.75rem;
}

    .content-html p:last-child {
        margin-bottom: 0;
    }

    .content-html img {
        max-width: 100%;
        height: auto;
        border-radius: 0.25rem;
    }

/* ========================================
   CONTENT LINK BUTTON
   ======================================== */
.content-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .content-link:hover {
        opacity: 0.85;
        transform: translateY(-1px);
    }

/* ========================================
   SNIPPET FOOTER
   ======================================== */
.snippet-footer {
    margin-top: 1rem;
    padding-top: 0.75rem;
    font-size: 0.75rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
}
/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .snippet-title {
        font-size: 1.5rem;
    }

    .snippet-description {
        font-size: 0.875rem;
    }

    .content-item h3 {
        font-size: 1.125rem;
    }

    .content-item p {
        font-size: 0.875rem;
    }

    .content-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* wwwroot/css/snippets/paragraph.css */

/* ========================================
   PARAGRAPH SNIPPET CONTAINER
   ======================================== */
.paragraph-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.paragraph-snippet-container {
    padding: 1.5rem;
}

/* ========================================
   PARAGRAPH HEADER
   ======================================== */
.paragraph-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.paragraph-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

.paragraph-subtitle {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================
   PARAGRAPH CONTENT
   ======================================== */
.paragraph-content {
    max-width: 900px;
    margin: 0 auto;
}

.paragraph-content-block {
    margin-bottom: 2rem;
}

    .paragraph-content-block:last-child {
        margin-bottom: 0;
    }

/* Content Title */
.paragraph-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #2d2d3a;
}

/* Paragraph Text */
.paragraph-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #4a4a5a;
}

    .paragraph-text p {
        margin-bottom: 1rem;
    }

        .paragraph-text p:last-child {
            margin-bottom: 0;
        }

    /* Paragraph Text Formatting */
    .paragraph-text strong {
        font-weight: 600;
        color: #2d2d3a;
    }

    .paragraph-text em {
        font-style: italic;
    }

    .paragraph-text a {
        color: #007bff;
        text-decoration: underline;
    }

        .paragraph-text a:hover {
            color: #0056b3;
        }

    .paragraph-text img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
        margin: 1rem 0;
    }

    .paragraph-text ul,
    .paragraph-text ol {
        margin: 1rem 0;
        padding-left: 2rem;
    }

    .paragraph-text li {
        margin-bottom: 0.5rem;
    }

    .paragraph-text blockquote {
        border-left: 4px solid #007bff;
        margin: 1rem 0;
        padding: 0.5rem 0 0.5rem 1.5rem;
        font-style: italic;
        color: #6c757d;
    }

    .paragraph-text pre {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin: 1rem 0;
    }

    .paragraph-text code {
        background: #f8f9fa;
        padding: 0.2rem 0.4rem;
        border-radius: 0.25rem;
        font-family: monospace;
        font-size: 0.875rem;
    }

/* ========================================
   PARAGRAPH LINK
   ======================================== */
.paragraph-link {
    margin-top: 0.75rem;
}

.paragraph-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .paragraph-link-btn:hover {
        color: #0056b3;
        gap: 0.75rem;
    }

.link-arrow {
    transition: transform 0.2s ease;
}

.paragraph-link-btn:hover .link-arrow {
    transform: translateX(4px);
}

/* ========================================
   PARAGRAPH FOOTER
   ======================================== */
.paragraph-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
}

/* ========================================
   VARIATIONS
   ======================================== */

/* Left aligned */
.paragraph-header.text-start {
    text-align: left;
}

/* Right aligned */
.paragraph-header.text-end {
    text-align: right;
}

/* Compact mode */
.paragraph-snippet.compact .paragraph-content {
    max-width: 100%;
}

.paragraph-snippet.compact .paragraph-content-block {
    margin-bottom: 1rem;
}

/* Featured paragraph */
.paragraph-content-block.featured {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #007bff;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .paragraph-snippet-container {
        padding: 1rem;
    }

    .paragraph-title {
        font-size: 1.5rem;
    }

    .paragraph-subtitle {
        font-size: 1rem;
    }

    .paragraph-content-title {
        font-size: 1.25rem;
    }

    .paragraph-text {
        font-size: 0.9375rem;
        line-height: 1.7;
    }

    .paragraph-content {
        max-width: 100%;
    }

    .paragraph-content-block.featured {
        padding: 1rem;
    }
}

/* wwwroot/css/snippets/hero.css */

/* ========================================
   HERO SNIPPET - MAIN CONTAINER
   ======================================== */
.hero-snippet {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-snippet-container {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Hero Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* ========================================
   HERO CONTAINER & ALIGNMENT
   ======================================== */
.hero-container {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 4rem 2rem;
}

.hero-container-center {
    text-align: center;
}

.hero-container-left {
    text-align: left;
}

.hero-container-right {
    text-align: right;
}

/* Content Container */
.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-container-left .hero-content {
    margin: 0;
}

.hero-container-right .hero-content {
    margin: 0 0 0 auto;
}

/* ========================================
   PRE-TITLE / BADGE
   ======================================== */
.hero-pretitle {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.5rem 1rem;
    background: rgba(255,255,255,0.2);
    border-radius: 50px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

/* ========================================
   TITLE
   ======================================== */
.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Title Animations */
.animate-title-fade {
    animation: heroTitleFade 0.8s ease forwards;
}

.animate-title-slide {
    animation: heroTitleSlide 0.6s ease forwards;
}

.animate-title-zoom {
    animation: heroTitleZoom 0.5s ease forwards;
}

@keyframes heroTitleFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes heroTitleSlide {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTitleZoom {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   DESCRIPTION
   ======================================== */
.hero-description {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.animate-desc-fade {
    animation: heroDescFade 0.8s ease 0.2s forwards;
    opacity: 0;
    animation-fill-mode: forwards;
}

.animate-desc-slide {
    animation: heroDescSlide 0.6s ease 0.2s forwards;
    opacity: 0;
    transform: translateY(-20px);
    animation-fill-mode: forwards;
}

@keyframes heroDescFade {
    to {
        opacity: 1;
    }
}

@keyframes heroDescSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   BUTTONS
   ======================================== */
.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.hero-buttons-center {
    justify-content: center;
}

.hero-buttons-left {
    justify-content: flex-start;
}

.hero-buttons-right {
    justify-content: flex-end;
}

/* Primary Button */
.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-btn-primary {
    background: white;
    color: #333;
    border: none;
}

    .hero-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

/* Secondary Button */
.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    color: white;
    border: 2px solid white;
}

    .hero-btn-secondary:hover {
        background: white;
        color: #333;
        transform: translateY(-2px);
    }

/* Button Icon */
.hero-btn-icon {
    transition: transform 0.2s ease;
}

.hero-btn-primary:hover .hero-btn-icon,
.hero-btn-secondary:hover .hero-btn-icon {
    transform: translateX(4px);
}

/* ========================================
   EXTRA CONTENT
   ======================================== */
.hero-extra {
    margin-top: 2rem;
    text-align: center;
}

    .hero-extra img {
        max-width: 100%;
        height: auto;
    }

/* ========================================
   SCROLL INDICATOR
   ======================================== */
.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    cursor: pointer;
}

.scroll-text {
    display: block;
    font-size: 0.75rem;
    color: white;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.scroll-mouse {
    width: 26px;
    height: 42px;
    border: 2px solid white;
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
}

.scroll-wheel {
    width: 4px;
    height: 8px;
    background: white;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 1.5s infinite;
}

@keyframes scrollWheel {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    80% {
        opacity: 0;
        transform: translateX(-50%) translateY(15px);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1.125rem;
    }

    .hero-snippet {
        min-height: 70vh;
    }
}

@media (max-width: 768px) {
    .hero-snippet {
        min-height: 60vh;
    }

    .hero-container {
        padding: 3rem 1.5rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-container-left .hero-content,
    .hero-container-right .hero-content {
        text-align: center;
    }

    .hero-buttons-left,
    .hero-buttons-right {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .hero-pretitle {
        font-size: 0.75rem;
    }
}



/* wwwroot/css/snippets/box.css */

/* ========================================
   BOX SNIPPET - MAIN CONTAINER
   ======================================== */
.box-snippet {
    width: 100%;
    padding: 2rem 0;
}

.box-snippet-container {
    width: 100%;
}

/* ========================================
   BOX HEADER
   ======================================== */
.box-header {
    margin-bottom: 2.5rem;
}

.box-header-center {
    text-align: center;
}

.box-header-left {
    text-align: left;
}

.box-header-right {
    text-align: right;
}

.box-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

.box-subtitle {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.box-header-left .box-subtitle {
    margin: 0;
}

.box-header-right .box-subtitle {
    margin: 0 0 0 auto;
}

/* ========================================
   BOX GRID
   ======================================== */
.box-grid {
    display: grid;
    gap: 1.5rem;
}

/* Grid Columns based on Size Objective */
.box-grid-1 {
    grid-template-columns: 1fr;
}

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

.box-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.box-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   BOX ITEM
   ======================================== */
.box-item {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

    /* Box hover effect (controlled by Objective.IsHover) */
    .box-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

/* Box link wrapper */
.box-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

/* ========================================
   BOX ICON
   ======================================== */
.box-icon-wrapper {
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.box-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    /* Icon shapes */
    .box-icon.circle {
        border-radius: 50%;
    }

    .box-icon.rounded {
        border-radius: 0.5rem;
    }

    .box-icon.pill {
        border-radius: 50px;
    }

    /* Icon sizes */
    .box-icon.size-sm {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .box-icon.size-md {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .box-icon.size-lg {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .box-icon.size-xl {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }

    /* Icon colors */
    .box-icon.bg-primary {
        background: #007bff;
        color: white;
    }

    .box-icon.bg-secondary {
        background: #6c757d;
        color: white;
    }

    .box-icon.bg-success {
        background: #28a745;
        color: white;
    }

    .box-icon.bg-danger {
        background: #dc3545;
        color: white;
    }

    .box-icon.bg-warning {
        background: #ffc107;
        color: #333;
    }

    .box-icon.bg-info {
        background: #17a2b8;
        color: white;
    }

    .box-icon.bg-dark {
        background: #343a40;
        color: white;
    }

    .box-icon.bg-light {
        background: #f8f9fa;
        color: #333;
    }

/* Box icon image */
.box-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Box icon emoji */
.box-icon-emoji {
    font-size: 2.5rem;
    line-height: 1;
}

/* Icon animations (from Objective.Animation) */
.box-icon.animate-fade {
    animation: boxIconFade 0.5s ease;
}

.box-icon.animate-zoom {
    animation: boxIconZoom 0.5s ease;
}

.box-icon.animate-bounce {
    animation: boxIconBounce 0.5s ease;
}

@keyframes boxIconFade {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes boxIconZoom {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes boxIconBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Box item hover icon effect */
.box-item:hover .box-icon {
    transform: scale(1.05);
}

/* ========================================
   BOX ITEM TITLE
   ======================================== */
.box-item-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}

/* ========================================
   BOX ITEM DESCRIPTION
   ======================================== */
.box-item-description {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* ========================================
   BOX LINK TEXT
   ======================================== */
.box-link-text {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #007bff;
    transition: all 0.2s ease;
}

.box-item:hover .box-link-text {
    color: #0056b3;
}

/* ========================================
   BOX FOOTER
   ======================================== */
.box-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
    border-top: 1px solid #dee2e6;
}

/* ========================================
   BOX VARIANTS
   ======================================== */

/* Border box */
.box-item.border-variant {
    border: 1px solid #dee2e6;
    background: transparent;
}

/* Shadow box */
.box-item.shadow-variant {
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* Featured box */
.box-item.featured {
    border: 2px solid #007bff;
    position: relative;
}

    .box-item.featured::before {
        content: "Featured";
        position: absolute;
        top: 0;
        right: 0;
        background: #007bff;
        color: white;
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
        border-bottom-left-radius: 0.5rem;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .box-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .box-snippet {
        padding: 1.5rem 0;
    }

    .box-title {
        font-size: 1.75rem;
    }

    .box-subtitle {
        font-size: 1rem;
    }

    .box-grid-2,
    .box-grid-3,
    .box-grid-4 {
        grid-template-columns: 1fr;
    }

    .box-item {
        padding: 1.25rem;
    }

    .box-item-title {
        font-size: 1.125rem;
    }
}


/* wwwroot/css/snippets/banner.css */

/* ========================================
   BANNER SNIPPET - MAIN CONTAINER
   ======================================== */
.banner-snippet {
    position: relative;
    width: 100%;
    margin: 1rem 0;
    overflow: hidden;
}

    .banner-snippet.hidden {
        display: none;
    }

.banner-snippet-container {
    position: relative;
    width: 100%;
    padding: 2rem;
}

/* Banner Overlay */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* ========================================
   BANNER CONTAINER & ALIGNMENT
   ======================================== */
.banner-container {
    position: relative;
    z-index: 1;
}

.banner-container-center {
    text-align: center;
}

.banner-container-left {
    text-align: left;
}

.banner-container-right {
    text-align: right;
}

/* Content Container */
.banner-content {
    max-width: 800px;
    margin: 0 auto;
}

.banner-container-left .banner-content {
    margin: 0;
}

.banner-container-right .banner-content {
    margin: 0 0 0 auto;
}

/* ========================================
   BANNER ICON
   ======================================== */
.banner-icon {
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.banner-icon-element {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    width: 80px;
    height: 80px;
}

    /* Icon shapes */
    .banner-icon-element.circle {
        border-radius: 50%;
    }

    .banner-icon-element.rounded {
        border-radius: 1rem;
    }

    .banner-icon-element.pill {
        border-radius: 50px;
    }

    /* Icon sizes */
    .banner-icon-element.size-sm {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .banner-icon-element.size-md {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .banner-icon-element.size-lg {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .banner-icon-element.size-xl {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }

/* ========================================
   BANNER TITLE
   ======================================== */
.banner-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: inherit;
}

/* Banner Title Animations */
.animate-title-fade {
    animation: bannerTitleFade 0.6s ease forwards;
}

.animate-title-slide {
    animation: bannerTitleSlide 0.5s ease forwards;
}

.animate-title-zoom {
    animation: bannerTitleZoom 0.4s ease forwards;
}

@keyframes bannerTitleFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes bannerTitleSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bannerTitleZoom {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   BANNER DESCRIPTION
   ======================================== */
.banner-description {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.animate-desc-fade {
    animation: bannerDescFade 0.6s ease 0.15s forwards;
    opacity: 0;
    animation-fill-mode: forwards;
}

.animate-desc-slide {
    animation: bannerDescSlide 0.5s ease 0.15s forwards;
    opacity: 0;
    transform: translateY(-10px);
    animation-fill-mode: forwards;
}

@keyframes bannerDescFade {
    to {
        opacity: 1;
    }
}

@keyframes bannerDescSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   BANNER BUTTONS
   ======================================== */
.banner-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.banner-buttons-center {
    justify-content: center;
}

.banner-buttons-left {
    justify-content: flex-start;
}

.banner-buttons-right {
    justify-content: flex-end;
}

/* Primary Button */
.banner-btn-primary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
    color: #333;
    border: none;
}

    .banner-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

/* Secondary Button */
.banner-btn-secondary {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    color: white;
    border: 2px solid white;
}

    .banner-btn-secondary:hover {
        background: white;
        color: #333;
        transform: translateY(-2px);
    }

/* ========================================
   BANNER NOTE
   ======================================== */
.banner-note {
    margin-top: 1rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* ========================================
   BANNER CLOSE BUTTON
   ======================================== */
.banner-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0,0,0,0.3);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .banner-close:hover {
        background: rgba(0,0,0,0.5);
        transform: scale(1.1);
    }

/* ========================================
   BANNER VARIANTS (from Objective.Visual)
   ======================================== */

/* Shadow variant */
.banner-snippet-container.shadow {
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Shadow large variant */
.banner-snippet-container.shadow-large {
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Border variant */
.banner-snippet-container.border {
    border: 1px solid rgba(255,255,255,0.2);
}

/* Gradient variant */
.banner-snippet-container.gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ========================================
   BANNER TYPES (Color based)
   ======================================== */

/* Info Banner */
.banner-snippet-container.bg-info {
    background: linear-gradient(135deg, #17a2b8, #0d6efd);
}

/* Success Banner */
.banner-snippet-container.bg-success {
    background: linear-gradient(135deg, #28a745, #20c997);
}

/* Warning Banner */
.banner-snippet-container.bg-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #333;
}

/* Danger Banner */
.banner-snippet-container.bg-danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
}

/* Dark Banner */
.banner-snippet-container.bg-dark {
    background: linear-gradient(135deg, #343a40, #212529);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .banner-snippet-container {
        padding: 1.5rem;
    }

    .banner-title {
        font-size: 1.5rem;
    }

    .banner-description {
        font-size: 1rem;
    }

    .banner-buttons {
        flex-direction: column;
        align-items: center;
    }

    .banner-btn-primary,
    .banner-btn-secondary {
        width: 100%;
        text-align: center;
    }

    .banner-icon-element {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }

    .banner-container-left .banner-content,
    .banner-container-right .banner-content {
        text-align: center;
    }

    .banner-buttons-left,
    .banner-buttons-right {
        justify-content: center;
    }
}



/* wwwroot/css/snippets/widget.css */

/* ========================================
   WIDGET SNIPPET - MAIN CONTAINER
   ======================================== */
.widget-snippet {
    width: 100%;
    margin-bottom: 1.5rem;
}

.widget-snippet-container {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* ========================================
   WIDGET HEADER
   ======================================== */
.widget-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.widget-header-left {
    text-align: left;
}

.widget-header-center {
    text-align: center;
}

.widget-header-right {
    text-align: right;
}

.widget-header-icon {
    display: inline-block;
    font-size: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.widget-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

.widget-description {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0.25rem 0 0 0;
}

/* ========================================
   WIDGET CONTENT
   ======================================== */
.widget-content {
    padding: 0;
}

.widget-content-flush {
    padding: 0;
}

.widget-content-divided {
    padding: 0;
}

.widget-content-bordered {
    padding: 1rem;
    border: 1px solid #e9ecef;
    margin: 0.5rem;
    border-radius: 0.375rem;
}

/* ========================================
   WIDGET LIST STYLES
   ======================================== */
.widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-list-item {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    transition: background 0.2s ease;
}

    .widget-list-item:hover {
        background: #f8f9fa;
    }

/* List variations */
.widget-list-flush .widget-list-item {
    padding: 0.75rem 1rem;
}

.widget-list-divided .widget-list-item {
    border-bottom: 1px solid #e9ecef;
}

    .widget-list-divided .widget-list-item:last-child {
        border-bottom: none;
    }

.widget-list-striped .widget-list-item:nth-child(odd) {
    background: #f8f9fa;
}

/* Widget item icon */
.widget-item-icon {
    font-size: 1rem;
    min-width: 24px;
    text-align: center;
    color: #007bff;
}

/* Widget item content */
.widget-item-content {
    flex: 1;
}

.widget-item-link {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    text-decoration: none;
    margin-bottom: 0.25rem;
}

    .widget-item-link:hover {
        color: #007bff;
    }

.widget-item-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.25rem;
}

.widget-item-description {
    display: block;
    font-size: 0.75rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
}

.widget-item-meta {
    display: block;
    font-size: 0.6875rem;
    color: #adb5bd;
}

/* ========================================
   WIDGET GRID STYLES
   ======================================== */
.widget-grid {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

/* Grid columns */
.widget-grid-1 {
    grid-template-columns: 1fr;
}

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

.widget-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.widget-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Widget Card */
.widget-card {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

    .widget-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

/* Card Image */
.widget-card-image {
    width: 100%;
    height: 150px;
    overflow: hidden;
}

    .widget-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

.widget-card:hover .widget-card-image img {
    transform: scale(1.05);
}

/* Card Body */
.widget-card-body {
    padding: 0.75rem;
}

.widget-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.widget-card-description {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.widget-card-link {
    display: inline-block;
    font-size: 0.6875rem;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

    .widget-card-link:hover {
        text-decoration: underline;
    }

/* ========================================
   WIDGET SIMPLE ITEM
   ======================================== */
.widget-simple-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

    .widget-simple-item:last-child {
        border-bottom: none;
    }

/* ========================================
   WIDGET CUSTOM HTML
   ======================================== */
.widget-custom-html {
    padding: 1rem;
}

    .widget-custom-html img {
        max-width: 100%;
        height: auto;
    }

/* ========================================
   WIDGET FOOTER
   ======================================== */
.widget-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
}

/* ========================================
   WIDGET VARIANTS
   ======================================== */

/* Compact widget */
.widget-snippet.compact .widget-header {
    padding: 0.5rem 1rem;
}

.widget-snippet.compact .widget-list-item {
    padding: 0.5rem 1rem;
}

/* Large widget */
.widget-snippet.large .widget-title {
    font-size: 1.25rem;
}

.widget-snippet.large .widget-list-item {
    padding: 1rem 1.25rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .widget-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .widget-grid-2,
    .widget-grid-3,
    .widget-grid-4 {
        grid-template-columns: 1fr;
    }

    .widget-header-left,
    .widget-header-center,
    .widget-header-right {
        text-align: center;
    }

    .widget-list-item {
        flex-direction: column;
        text-align: center;
    }

    .widget-item-icon {
        margin: 0 auto 0.5rem;
    }
}


/* wwwroot/css/snippets/cta.css */

/* ========================================
   CTA SNIPPET - MAIN CONTAINER
   ======================================== */
.cta-snippet {
    position: relative;
    width: 100%;
    margin: 2rem 0;
    overflow: hidden;
}

.cta-snippet-container {
    position: relative;
    width: 100%;
    padding: 3rem 2rem;
}

/* CTA Overlay */
.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* ========================================
   CTA CONTAINER LAYOUTS
   ======================================== */
.cta-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cta-layout-center {
    flex-direction: column;
    text-align: center;
}

.cta-layout-left {
    flex-direction: row;
    text-align: left;
}

.cta-layout-right {
    flex-direction: row-reverse;
    text-align: left;
}

/* ========================================
   CTA ICON
   ======================================== */
.cta-icon-wrapper {
    flex-shrink: 0;
}

.cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon-element {
    font-size: 3rem;
    width: 100px;
    height: 100px;
}

    /* Icon shapes */
    .cta-icon-element.circle {
        border-radius: 50%;
    }

    .cta-icon-element.rounded {
        border-radius: 1rem;
    }

    .cta-icon-element.pill {
        border-radius: 50px;
    }

    /* Icon sizes */
    .cta-icon-element.size-sm {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .cta-icon-element.size-md {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .cta-icon-element.size-lg {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .cta-icon-element.size-xl {
        width: 120px;
        height: 120px;
        font-size: 3rem;
    }

/* ========================================
   CTA CONTENT
   ======================================== */
.cta-content {
    flex: 1;
}

.cta-content-center {
    text-align: center;
}

.cta-content-left {
    text-align: left;
}

.cta-content-right {
    text-align: right;
}

/* Pre-title / Badge */
.cta-pretitle {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0.25rem 0.75rem;
    background: rgba(255,255,255,0.2);
    border-radius: 50px;
    margin-bottom: 1rem;
}

/* Title */
.cta-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: inherit;
}

/* Description */
.cta-description {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* Title Animations */
.animate-title-fade {
    animation: ctaTitleFade 0.6s ease forwards;
}

.animate-title-slide {
    animation: ctaTitleSlide 0.5s ease forwards;
}

.animate-title-zoom {
    animation: ctaTitleZoom 0.4s ease forwards;
}

@keyframes ctaTitleFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ctaTitleSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ctaTitleZoom {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Description Animations */
.animate-desc-fade {
    animation: ctaDescFade 0.6s ease 0.15s forwards;
    opacity: 0;
    animation-fill-mode: forwards;
}

.animate-desc-slide {
    animation: ctaDescSlide 0.5s ease 0.15s forwards;
    opacity: 0;
    transform: translateY(-10px);
    animation-fill-mode: forwards;
}

@keyframes ctaDescFade {
    to {
        opacity: 1;
    }
}

@keyframes ctaDescSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   CTA BUTTONS
   ======================================== */
.cta-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.cta-buttons-center {
    justify-content: center;
}

.cta-buttons-left {
    justify-content: flex-start;
}

.cta-buttons-right {
    justify-content: flex-end;
}

/* Primary Button */
.cta-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: white;
    color: #333;
    border: none;
}

    .cta-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

/* Secondary Button */
.cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
    color: white;
    border: 2px solid white;
}

    .cta-btn-secondary:hover {
        background: white;
        color: #333;
        transform: translateY(-2px);
    }

/* Button Icon & Arrow */
.cta-btn-icon {
    font-size: 1.125rem;
}

.cta-btn-arrow {
    transition: transform 0.2s ease;
}

.cta-btn-primary:hover .cta-btn-arrow,
.cta-btn-secondary:hover .cta-btn-arrow {
    transform: translateX(4px);
}

/* ========================================
   CTA NOTE / TRUST BADGE
   ======================================== */
.cta-note {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cta-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    font-size: 0.75rem;
}

/* ========================================
   CTA IMAGE
   ======================================== */
.cta-image {
    flex: 1;
    max-width: 40%;
}

    .cta-image img {
        width: 100%;
        height: auto;
        border-radius: 0.5rem;
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

/* ========================================
   CTA VARIANTS (based on Objective.Color)
   ======================================== */

/* Primary CTA */
.cta-snippet-container.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* Success CTA */
.cta-snippet-container.bg-success {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

/* Danger CTA (Urgent) */
.cta-snippet-container.bg-danger {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
}

/* Warning CTA */
.cta-snippet-container.bg-warning {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #333;
}

/* Dark CTA */
.cta-snippet-container.bg-dark {
    background: linear-gradient(135deg, #343a40, #212529);
    color: white;
}

/* Light CTA */
.cta-snippet-container.bg-light {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #dee2e6;
}

/* ========================================
   CTA VARIANTS (based on Objective.Visual)
   ======================================== */

/* Shadow variant */
.cta-snippet-container.shadow {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Border variant */
.cta-snippet-container.border {
    border: 2px solid rgba(255,255,255,0.2);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .cta-title {
        font-size: 2rem;
    }

    .cta-snippet-container {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .cta-layout-left,
    .cta-layout-right {
        flex-direction: column;
        text-align: center;
    }

    .cta-image {
        max-width: 100%;
        margin-top: 1.5rem;
    }

    .cta-layout-right .cta-image {
        margin-top: 1.5rem;
    }

    .cta-title {
        font-size: 1.75rem;
    }

    .cta-description {
        font-size: 1rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-btn-primary,
    .cta-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .cta-icon-element {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .cta-content-left,
    .cta-content-right,
    .cta-content-center {
        text-align: center;
    }

    .cta-buttons-left,
    .cta-buttons-right {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .cta-title {
        font-size: 1.5rem;
    }

    .cta-pretitle {
        font-size: 0.6875rem;
    }

    .cta-snippet-container {
        padding: 1.5rem 1rem;
    }
}


/* wwwroot/css/snippets/faq.css */

/* ========================================
   FAQ SNIPPET - MAIN CONTAINER
   ======================================== */
.faq-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.faq-snippet-container {
    width: 100%;
}

/* ========================================
   FAQ HEADER
   ======================================== */
.faq-header {
    margin-bottom: 2rem;
}

.faq-header-center {
    text-align: center;
}

.faq-header-left {
    text-align: left;
}

.faq-header-right {
    text-align: right;
}

.faq-header-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.faq-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.faq-description {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.faq-header-left .faq-description {
    margin: 0;
}

.faq-header-right .faq-description {
    margin: 0 0 0 auto;
}

/* ========================================
   FAQ CONTENT
   ======================================== */
.faq-content {
    margin-bottom: 1.5rem;
}

.faq-content-flush {
    padding: 0;
}

.faq-content-divided .faq-accordion-item {
    border-bottom: 1px solid #e9ecef;
}

.faq-content-bordered {
    padding: 1rem;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
}

/* ========================================
   FAQ ACCORDION STYLES
   ======================================== */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-accordion-item {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .faq-accordion-header:hover {
        background: #f8f9fa;
    }

.faq-question {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.faq-question-icon {
    font-size: 1.25rem;
    font-weight: 600;
    color: #007bff;
    min-width: 28px;
    text-align: center;
}

.faq-question-text {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.faq-accordion-icon {
    font-size: 1.25rem;
    font-weight: 600;
    color: #6c757d;
    transition: transform 0.2s ease;
}

/* Accordion Body */
.faq-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .faq-accordion-body.open {
        max-height: 500px;
    }

.faq-answer {
    padding: 0 1.25rem 1.25rem 1.25rem;
    color: #6c757d;
    line-height: 1.6;
    border-top: 1px solid #e9ecef;
    margin-top: 0.5rem;
}

    .faq-answer p {
        margin-bottom: 0.75rem;
    }

        .faq-answer p:last-child {
            margin-bottom: 0;
        }

/* FAQ Link */
.faq-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

    .faq-link:hover {
        text-decoration: underline;
    }

.faq-link-arrow {
    transition: transform 0.2s ease;
}

.faq-link:hover .faq-link-arrow {
    transform: translateX(4px);
}

/* ========================================
   FAQ GRID STYLES
   ======================================== */
.faq-grid {
    display: grid;
    gap: 1.5rem;
}

/* Grid columns */
.faq-grid-1 {
    grid-template-columns: 1fr;
}

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

.faq-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.faq-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* FAQ Card */
.faq-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
    height: 100%;
}

    .faq-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.faq-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.faq-card-icon {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.faq-card-question {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.faq-card-answer {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.6;
}

.faq-card-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

    .faq-card-link:hover {
        text-decoration: underline;
    }

/* ========================================
   FAQ FOOTER
   ======================================== */
.faq-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.faq-footer-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6c757d;
}

.faq-footer-icon {
    font-size: 1rem;
}

/* ========================================
   FAQ VARIANTS
   ======================================== */

/* Compact FAQ */
.faq-snippet.compact .faq-accordion-header {
    padding: 0.75rem 1rem;
}

.faq-snippet.compact .faq-answer {
    padding: 0 1rem 0.75rem 1rem;
}

/* Large FAQ */
.faq-snippet.large .faq-question-text {
    font-size: 1.125rem;
}

.faq-snippet.large .faq-answer {
    font-size: 1rem;
}

/* Primary colored FAQ items */
.faq-accordion-item.bg-primary {
    background: #007bff;
}

    .faq-accordion-item.bg-primary .faq-question-text,
    .faq-accordion-item.bg-primary .faq-answer {
        color: white;
    }

    .faq-accordion-item.bg-primary .faq-accordion-icon {
        color: white;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .faq-grid-3,
    .faq-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .faq-title {
        font-size: 1.75rem;
    }

    .faq-description {
        font-size: 1rem;
    }

    .faq-grid-2,
    .faq-grid-3,
    .faq-grid-4 {
        grid-template-columns: 1fr;
    }

    .faq-accordion-header {
        padding: 0.875rem 1rem;
    }

    .faq-question-text {
        font-size: 0.9375rem;
    }

    .faq-answer {
        font-size: 0.875rem;
    }

    .faq-header-left .faq-description,
    .faq-header-right .faq-description {
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .faq-question {
        gap: 0.5rem;
    }

    .faq-question-icon {
        font-size: 1rem;
        min-width: 24px;
    }

    .faq-card-header {
        flex-direction: column;
        text-align: center;
    }
}



/* wwwroot/css/snippets/map.css */

/* ========================================
   MAP SNIPPET - MAIN CONTAINER
   ======================================== */
.map-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.map-snippet-container {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* ========================================
   MAP HEADER
   ======================================== */
.map-header {
    padding: 1.5rem 1.5rem 0 1.5rem;
    margin-bottom: 1rem;
}

.map-header-center {
    text-align: center;
}

.map-header-left {
    text-align: left;
}

.map-header-right {
    text-align: right;
}

.map-header-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.map-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.map-description {
    font-size: 1rem;
    color: #6c757d;
}

/* ========================================
   MAP CONTAINER
   ======================================== */
.map-container {
    position: relative;
    margin: 1rem;
    overflow: hidden;
    border-radius: 0.5rem;
}

.map-size-small {
    height: 300px;
}

.map-size-medium {
    height: 400px;
}

.map-size-large {
    height: 500px;
}

.map-size-full {
    height: 600px;
}

.map-canvas {
    width: 100%;
    height: 100%;
    background: #e9ecef;
}

/* ========================================
   MAP CONTROLS
   ======================================== */
.map-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 10;
}

.map-control-btn {
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .map-control-btn:hover {
        background: #f8f9fa;
        transform: scale(1.05);
    }

/* ========================================
   LOCATION CARD OVERLAY
   ======================================== */
.map-location-card {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    background: white;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10;
    max-width: 320px;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.location-card-content {
    display: flex;
    gap: 1rem;
}

.location-icon {
    font-size: 2rem;
    min-width: 48px;
    text-align: center;
}

.location-info {
    flex: 1;
}

.location-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #212529;
}

.location-address {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.location-phone,
.location-email {
    display: inline-block;
    font-size: 0.75rem;
    color: #007bff;
    text-decoration: none;
    margin-right: 0.75rem;
}

    .location-phone:hover,
    .location-email:hover {
        text-decoration: underline;
    }

.location-card-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .location-card-close:hover {
        color: #dc3545;
    }

/* ========================================
   MAP DETAILS GRID
   ======================================== */
.map-details {
    padding: 1.5rem;
}

.map-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.map-details-flush {
    display: flex;
    flex-direction: column;
}

.map-details-divided .map-detail-item {
    border-bottom: 1px solid #e9ecef;
}

.map-detail-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

    .map-detail-item:hover {
        background: #e9ecef;
        transform: translateX(4px);
    }

.detail-icon {
    font-size: 1.5rem;
    min-width: 40px;
    text-align: center;
}

.detail-content {
    flex: 1;
}

.detail-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #212529;
}

.detail-text {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.detail-link {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

    .detail-link:hover {
        text-decoration: underline;
    }

/* ========================================
   MAP FOOTER
   ======================================== */
.map-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.map-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .map-header {
        padding: 1rem 1rem 0 1rem;
    }

    .map-title {
        font-size: 1.5rem;
    }

    .map-container {
        margin: 0.75rem;
    }

    .map-size-small,
    .map-size-medium,
    .map-size-large,
    .map-size-full {
        height: 300px;
    }

    .map-location-card {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        max-width: calc(100% - 1.5rem);
    }

    .location-card-content {
        flex-direction: column;
        text-align: center;
    }

    .map-details {
        padding: 1rem;
    }

    .map-details-grid {
        grid-template-columns: 1fr;
    }

    .map-detail-item {
        flex-direction: column;
        text-align: center;
    }

    .map-controls {
        top: 0.5rem;
        right: 0.5rem;
    }

    .map-control-btn {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}
/* wwwroot/css/snippets/pricing.css */

/* ========================================
   PRICING SNIPPET - MAIN CONTAINER
   ======================================== */
.pricing-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.pricing-snippet-container {
    width: 100%;
    padding: 2rem 0;
}

/* ========================================
   PRICING HEADER
   ======================================== */
.pricing-header {
    margin-bottom: 2rem;
}

.pricing-header-center {
    text-align: center;
}

.pricing-header-left {
    text-align: left;
}

.pricing-header-right {
    text-align: right;
}

.pricing-header-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.pricing-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.pricing-description {
    font-size: 1.125rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.pricing-header-left .pricing-description {
    margin: 0;
}

.pricing-header-right .pricing-description {
    margin: 0 0 0 auto;
}

/* ========================================
   PRICING TOGGLE
   ======================================== */
.pricing-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.toggle-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6c757d;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
}

    .toggle-label.active {
        color: #007bff;
    }

.save-badge {
    position: absolute;
    top: -20px;
    right: -40px;
    background: #28a745;
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 20px;
    white-space: nowrap;
}

.toggle-switch {
    width: 60px;
    height: 30px;
    background: #dee2e6;
    border-radius: 30px;
    cursor: pointer;
    position: relative;
    transition: background 0.2s ease;
}

.toggle-slider {
    width: 26px;
    height: 26px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

    .toggle-slider.monthly {
        transform: translateX(4px);
    }

    .toggle-slider.annual {
        transform: translateX(30px);
    }

/* ========================================
   PRICING GRID
   ======================================== */
.pricing-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

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

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

.pricing-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.pricing-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   PRICING CARD
   ======================================== */
.pricing-card {
    position: relative;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

    .pricing-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

/* Popular Badge */
.pricing-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 1rem;
    border-bottom-left-radius: 0.5rem;
}

/* Card Inner */
.pricing-card-inner {
    padding: 1.5rem;
}

/* Plan Icon */
.pricing-plan-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

/* Plan Name */
.pricing-plan-name {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: #212529;
}

/* Plan Description */
.pricing-plan-description {
    font-size: 0.8125rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* Price */
.pricing-price-wrapper {
    text-align: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.pricing-original-price {
    font-size: 0.875rem;
    color: #dc3545;
    text-decoration: line-through;
    margin-right: 0.5rem;
}

.pricing-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.125rem;
}

.pricing-currency {
    font-size: 1.125rem;
    font-weight: 600;
    color: #6c757d;
}

.pricing-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #212529;
}

.pricing-period {
    font-size: 0.75rem;
    color: #6c757d;
}

.pricing-price-note {
    display: block;
    font-size: 0.6875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

/* Features */
.pricing-features {
    margin-bottom: 1.5rem;
}

    .pricing-features ul,
    .pricing-features-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .pricing-features li,
        .pricing-features-list li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0;
            font-size: 0.8125rem;
            border-bottom: 1px solid #f8f9fa;
        }

            .pricing-features li:last-child,
            .pricing-features-list li:last-child {
                border-bottom: none;
            }

.feature-icon {
    font-size: 0.875rem;
    min-width: 20px;
    text-align: center;
}

.pricing-features-list li.included .feature-icon {
    color: #28a745;
}

.pricing-features-list li.excluded .feature-icon {
    color: #dc3545;
}

.pricing-features-list li.excluded .feature-text {
    text-decoration: line-through;
    color: #adb5bd;
}

/* CTA Button */
.pricing-cta {
    margin-top: 1.5rem;
    text-align: center;
}

.pricing-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

    .pricing-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

/* Footer Note */
.pricing-footer-note {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.6875rem;
    color: #6c757d;
}

/* ========================================
   PRICING FOOTER
   ======================================== */
.pricing-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.pricing-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   PRICING CARD VARIANTS
   ======================================== */

/* Popular Card Highlight */
.pricing-card.popular {
    border: 2px solid #007bff;
    box-shadow: 0 5px 20px rgba(0,123,255,0.15);
}

    .pricing-card.popular:hover {
        transform: translateY(-8px);
    }

/* Featured Card */
.pricing-card.featured {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .pricing-card.featured .pricing-plan-name,
    .pricing-card.featured .pricing-amount,
    .pricing-card.featured .pricing-currency {
        color: white;
    }

    .pricing-card.featured .pricing-plan-description,
    .pricing-card.featured .pricing-period,
    .pricing-card.featured .pricing-price-note {
        color: rgba(255,255,255,0.8);
    }

    .pricing-card.featured .pricing-price-wrapper {
        border-bottom-color: rgba(255,255,255,0.2);
    }

    .pricing-card.featured .pricing-features li {
        color: rgba(255,255,255,0.9);
        border-bottom-color: rgba(255,255,255,0.1);
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .pricing-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .pricing-title {
        font-size: 1.75rem;
    }

    .pricing-description {
        font-size: 1rem;
    }

    .pricing-grid-2,
    .pricing-grid-3,
    .pricing-grid-4 {
        grid-template-columns: 1fr;
    }

    .pricing-card {
        max-width: 400px;
        margin: 0 auto;
    }

    .pricing-card-inner {
        padding: 1.25rem;
    }

    .pricing-amount {
        font-size: 2rem;
    }

    .toggle-label {
        font-size: 0.75rem;
    }

    .save-badge {
        position: static;
        display: inline-block;
        margin-left: 0.25rem;
        top: auto;
        right: auto;
    }
}

@media (max-width: 480px) {
    .pricing-snippet-container {
        padding: 1rem 0;
    }

    .pricing-plan-name {
        font-size: 1.125rem;
    }

    .pricing-amount {
        font-size: 1.75rem;
    }
}

/* wwwroot/css/snippets/list.css */

/* ========================================
   LIST SNIPPET - MAIN CONTAINER
   ======================================== */
.list-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.list-snippet-container {
    width: 100%;
    padding: 1rem;
}

/* ========================================
   LIST HEADER
   ======================================== */
.list-header {
    margin-bottom: 1.5rem;
}

.list-header-center {
    text-align: center;
}

.list-header-left {
    text-align: left;
}

.list-header-right {
    text-align: right;
}

.list-header-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.list-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.list-description {
    font-size: 0.9375rem;
    color: #6c757d;
}

/* ========================================
   LIST CONTENT
   ======================================== */
.list-content {
    margin-bottom: 1rem;
}

.list-content-flush {
    padding: 0;
}

.list-content-divided .list-item {
    border-bottom: 1px solid #e9ecef;
}

    .list-content-divided .list-item:last-child {
        border-bottom: none;
    }

.list-content-bordered {
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* ========================================
   SNIPPET LIST STYLES
   ======================================== */
.snippet-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* List Item */
.list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    transition: background 0.2s ease;
}

.list-item-icon {
    font-size: 1rem;
    min-width: 24px;
    text-align: center;
    color: #007bff;
}

.list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.list-item-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212529;
}

.list-item-description {
    font-size: 0.8125rem;
    color: #6c757d;
    line-height: 1.4;
}

.list-item-link {
    font-size: 0.75rem;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

    .list-item-link:hover {
        text-decoration: underline;
    }

/* List Variations */
.list-striped .list-item:nth-child(odd) {
    background: #f8f9fa;
}

.list-hoverable .list-item:hover {
    background: #f8f9fa;
    cursor: pointer;
}

/* ========================================
   ORDERED LIST STYLES
   ======================================== */
ol.snippet-list {
    list-style: none;
    counter-reset: list-counter;
}

    ol.snippet-list .list-item {
        counter-increment: list-counter;
        position: relative;
        padding-left: 2.5rem;
    }

        ol.snippet-list .list-item:before {
            content: counter(list-counter) ".";
            position: absolute;
            left: 0.75rem;
            top: 0.75rem;
            font-weight: 600;
            color: #007bff;
        }

/* ========================================
   LIST VARIANTS
   ======================================== */

/* Compact List */
.list-snippet.compact .list-item {
    padding: 0.5rem 0.75rem;
}

.list-snippet.compact .list-item-title {
    font-size: 0.875rem;
}

.list-snippet.compact .list-item-description {
    font-size: 0.75rem;
}

/* Large List */
.list-snippet.large .list-item {
    padding: 1rem 1.25rem;
}

.list-snippet.large .list-item-title {
    font-size: 1rem;
}

.list-snippet.large .list-item-description {
    font-size: 0.875rem;
}

/* Checkmark List */
.snippet-list.checkmark .list-item-icon {
    color: #28a745;
}

    .snippet-list.checkmark .list-item-icon:before {
        content: "✓";
    }

/* Arrow List */
.snippet-list.arrow .list-item-icon {
    color: #007bff;
}

    .snippet-list.arrow .list-item-icon:before {
        content: "→";
    }

/* Bullet List */
.snippet-list.bullet .list-item-icon {
    color: #6c757d;
}

    .snippet-list.bullet .list-item-icon:before {
        content: "•";
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .list-snippet-container {
        padding: 0.75rem;
    }

    .list-title {
        font-size: 1.25rem;
    }

    .list-description {
        font-size: 0.875rem;
    }

    .list-item {
        padding: 0.625rem 0.875rem;
        gap: 0.5rem;
    }

    .list-item-title {
        font-size: 0.875rem;
    }

    .list-item-description {
        font-size: 0.75rem;
    }

    ol.snippet-list .list-item {
        padding-left: 2rem;
    }
}

@media (max-width: 480px) {
    .list-item {
        flex-direction: column;
        text-align: center;
    }

    .list-item-icon {
        margin: 0 auto;
    }

    .list-item-content {
        text-align: center;
    }

    ol.snippet-list .list-item {
        padding-left: 1.75rem;
        text-align: left;
    }

        ol.snippet-list .list-item:before {
            left: 0.25rem;
        }
}




/* wwwroot/css/snippets/testimonial.css */

/* ========================================
   TESTIMONIAL SNIPPET - MAIN CONTAINER
   ======================================== */
.testimonial-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.testimonial-snippet-container {
    width: 100%;
    padding: 2rem 0;
}

/* ========================================
   TESTIMONIAL HEADER
   ======================================== */
.testimonial-header {
    margin-bottom: 2rem;
}

.testimonial-header-center {
    text-align: center;
}

.testimonial-header-left {
    text-align: left;
}

.testimonial-header-right {
    text-align: right;
}

.testimonial-header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.testimonial-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.testimonial-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.testimonial-header-left .testimonial-description {
    margin: 0;
}

.testimonial-header-right .testimonial-description {
    margin: 0 0 0 auto;
}

/* ========================================
   TESTIMONIAL GRID
   ======================================== */
.testimonial-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

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

.testimonial-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.testimonial-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   TESTIMONIAL CARD
   ======================================== */
.testimonial-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

    .testimonial-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

/* Rating Stars */
.testimonial-rating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.star {
    font-size: 1rem;
    color: #ddd;
}

    .star.filled {
        color: #ffc107;
    }

/* Quote Icon */
.testimonial-quote-icon {
    font-size: 3rem;
    line-height: 1;
    color: #007bff;
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

/* Testimonial Text */
.testimonial-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #4a4a5a;
    margin-bottom: 1.25rem;
    font-style: italic;
}

/* Author Section */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

/* Avatar */
.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007bff;
    color: white;
    font-size: 1.5rem;
}

    .testimonial-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Author Info */
.testimonial-author-info {
    flex: 1;
}

.testimonial-name {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.125rem 0;
    color: #212529;
}

.testimonial-position {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
}

.testimonial-link {
    font-size: 0.6875rem;
    color: #007bff;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.125rem;
}

    .testimonial-link:hover {
        text-decoration: underline;
    }

/* ========================================
   TESTIMONIAL CAROUSEL
   ======================================== */
.testimonial-carousel {
    position: relative;
    overflow: hidden;
    padding: 0 2rem;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    padding: 0 0.5rem;
}

.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 1px solid #dee2e6;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    z-index: 10;
}

    .carousel-prev:hover,
    .carousel-next:hover {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

.carousel-prev {
    left: 0;
}

.carousel-next {
    right: 0;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dee2e6;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .carousel-dot.active {
        background: #007bff;
        width: 24px;
        border-radius: 10px;
    }

    .carousel-dot:hover {
        background: #007bff;
    }

/* ========================================
   TESTIMONIAL FOOTER
   ======================================== */
.testimonial-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.testimonial-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   TESTIMONIAL VARIANTS
   ======================================== */

/* Minimal Card */
.testimonial-card.minimal {
    box-shadow: none;
    border: 1px solid #e9ecef;
}

    .testimonial-card.minimal:hover {
        transform: none;
        box-shadow: none;
    }

/* Dark Card */
.testimonial-card.dark {
    background: #1a1a2e;
    color: white;
}

    .testimonial-card.dark .testimonial-text {
        color: rgba(255,255,255,0.9);
    }

    .testimonial-card.dark .testimonial-name {
        color: white;
    }

/* Centered Card */
.testimonial-card.centered {
    text-align: center;
}

    .testimonial-card.centered .testimonial-author {
        justify-content: center;
    }

    .testimonial-card.centered .testimonial-rating {
        justify-content: center;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .testimonial-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .testimonial-snippet-container {
        padding: 1rem 0;
    }

    .testimonial-title {
        font-size: 1.5rem;
    }

    .testimonial-description {
        font-size: 0.875rem;
    }

    .testimonial-grid-2,
    .testimonial-grid-3,
    .testimonial-grid-4 {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 1.25rem;
    }

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

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

    .carousel-prev,
    .carousel-next {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-card.centered .testimonial-author {
        flex-direction: column;
    }
}


/* wwwroot/css/snippets/feature.css */

/* ========================================
   FEATURE SNIPPET - MAIN CONTAINER
   ======================================== */
.feature-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.feature-snippet-container {
    width: 100%;
    padding: 2rem 0;
}

/* ========================================
   FEATURE HEADER
   ======================================== */
.feature-header {
    margin-bottom: 2.5rem;
}

.feature-header-center {
    text-align: center;
}

.feature-header-left {
    text-align: left;
}

.feature-header-right {
    text-align: right;
}

.feature-header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.feature-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.feature-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.feature-header-left .feature-description {
    margin: 0;
}

.feature-header-right .feature-description {
    margin: 0 0 0 auto;
}

/* ========================================
   FEATURE GRID
   ======================================== */
.feature-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

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

.feature-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.feature-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   FEATURE CARD
   ======================================== */
.feature-card {
    position: relative;
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
}

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

/* Featured Badge */
.feature-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-bottom-left-radius: 0.5rem;
}

/* Card Inner */
.feature-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ========================================
   FEATURE ICON
   ======================================== */
.feature-icon-wrapper {
    margin-bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Icon Shapes */
.icon-circle {
    border-radius: 50%;
}

.icon-rounded {
    border-radius: 0.5rem;
}

.icon-pill {
    border-radius: 50px;
}

/* Icon Sizes (from Objective.Size) */
.feature-icon-wrapper.size-sm {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

.feature-icon-wrapper.size-md {
    width: 64px;
    height: 64px;
    font-size: 2rem;
}

.feature-icon-wrapper.size-lg {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
}

.feature-icon-wrapper.size-xl {
    width: 100px;
    height: 100px;
    font-size: 3rem;
}

/* Icon Colors */
.feature-icon-wrapper.bg-primary {
    background: #007bff;
    color: white;
}

.feature-icon-wrapper.bg-secondary {
    background: #6c757d;
    color: white;
}

.feature-icon-wrapper.bg-success {
    background: #28a745;
    color: white;
}

.feature-icon-wrapper.bg-danger {
    background: #dc3545;
    color: white;
}

.feature-icon-wrapper.bg-warning {
    background: #ffc107;
    color: #333;
}

.feature-icon-wrapper.bg-info {
    background: #17a2b8;
    color: white;
}

.feature-icon-wrapper.bg-dark {
    background: #343a40;
    color: white;
}

.feature-icon-wrapper.bg-light {
    background: #f8f9fa;
    color: #333;
}

.feature-icon-default,
.feature-icon-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.feature-icon-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icon Animations (from Objective.Animation) */
.feature-card:hover .feature-icon-wrapper.animate-bounce {
    animation: featureIconBounce 0.5s ease;
}

.feature-card:hover .feature-icon-wrapper.animate-zoom {
    animation: featureIconZoom 0.3s ease;
}

@keyframes featureIconBounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes featureIconZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* ========================================
   FEATURE CARD CONTENT
   ======================================== */
.feature-card-content {
    flex: 1;
}

.feature-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #212529;
}

.feature-card-description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 1rem;
}

.feature-card-html {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

    .feature-card-html p:last-child {
        margin-bottom: 0;
    }

/* ========================================
   FEATURE LINK
   ======================================== */
.feature-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.feature-link-default {
    color: #007bff;
}

    .feature-link-default:hover {
        color: #0056b3;
        gap: 0.75rem;
    }

.feature-link-bordered {
    color: #007bff;
    border: 1px solid #007bff;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
}

    .feature-link-bordered:hover {
        background: #007bff;
        color: white;
        gap: 0.75rem;
    }

.feature-link-arrow {
    transition: transform 0.2s ease;
}

.feature-card-link:hover .feature-link-arrow {
    transform: translateX(4px);
}

/* ========================================
   FEATURE FOOTER
   ======================================== */
.feature-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.feature-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   FEATURE VARIANTS
   ======================================== */

/* Horizontal Layout (for larger screens) */
.feature-card.horizontal .feature-card-inner {
    flex-direction: row;
    gap: 1rem;
}

.feature-card.horizontal .feature-icon-wrapper {
    margin-bottom: 0;
}

.feature-card.horizontal .feature-card-content {
    flex: 1;
}

/* Center Aligned Card */
.feature-card.centered {
    text-align: center;
}

    .feature-card.centered .feature-icon-wrapper {
        margin-left: auto;
        margin-right: auto;
    }

    .feature-card.centered .feature-card-link {
        justify-content: center;
    }

/* Dark Card */
.feature-card.dark {
    background: #1a1a2e;
    color: white;
}

    .feature-card.dark .feature-card-title {
        color: white;
    }

    .feature-card.dark .feature-card-description,
    .feature-card.dark .feature-card-html {
        color: rgba(255,255,255,0.8);
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .feature-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .feature-snippet-container {
        padding: 1rem 0;
    }

    .feature-title {
        font-size: 1.5rem;
    }

    .feature-description {
        font-size: 0.875rem;
    }

    .feature-grid-2,
    .feature-grid-3,
    .feature-grid-4 {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .feature-card-title {
        font-size: 1rem;
    }

    .feature-card-description,
    .feature-card-html {
        font-size: 0.8125rem;
    }

    /* Disable horizontal layout on mobile */
    .feature-card.horizontal .feature-card-inner {
        flex-direction: column;
        text-align: center;
    }

    .feature-card.horizontal .feature-icon-wrapper {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    .feature-icon-wrapper.size-md {
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }

    .feature-icon-wrapper.size-lg {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
}


/* wwwroot/css/snippets/quote.css */

/* ========================================
   QUOTE SNIPPET - MAIN CONTAINER
   ======================================== */
.quote-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.quote-snippet-container {
    width: 100%;
    padding: 2rem;
}

/* ========================================
   QUOTE HEADER
   ======================================== */
.quote-header {
    margin-bottom: 2rem;
}

.quote-header-center {
    text-align: center;
}

.quote-header-left {
    text-align: left;
}

.quote-header-right {
    text-align: right;
}

.quote-header-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.quote-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.quote-description {
    font-size: 0.9375rem;
    color: #6c757d;
}

/* ========================================
   QUOTE CARD
   ======================================== */
.quote-card {
    position: relative;
    background: white;
    border-radius: 0.5rem;
    padding: 2rem;
    transition: all 0.3s ease;
    max-width: 800px;
    margin: 0 auto;
}

    .quote-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

/* Quote Marks */
.quote-mark {
    position: absolute;
    font-size: 6rem;
    line-height: 1;
    color: #007bff;
    opacity: 0.15;
    font-family: serif;
}

.quote-mark-top {
    top: 1rem;
    left: 1.5rem;
}

.quote-mark-bottom {
    bottom: 1rem;
    right: 1.5rem;
    transform: rotate(180deg);
}

/* Quote Icon */
.quote-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* Quote Text */
.quote-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #4a4a5a;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

    .quote-text p {
        margin-bottom: 1rem;
    }

        .quote-text p:last-child {
            margin-bottom: 0;
        }

.quote-text-large {
    font-size: 1.25rem;
    line-height: 1.8;
}

/* Quote Author */
.quote-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* Author Avatar */
.quote-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007bff;
    color: white;
    font-size: 1.5rem;
}

    .quote-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Author Info */
.quote-author-info {
    flex: 1;
}

.quote-author-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.125rem;
}

.quote-author-title {
    font-size: 0.75rem;
    color: #6c757d;
}

.quote-author-link {
    font-size: 0.6875rem;
    color: #007bff;
    text-decoration: none;
    display: inline-block;
    margin-top: 0.125rem;
}

    .quote-author-link:hover {
        text-decoration: underline;
    }

/* ========================================
   QUOTE FOOTER
   ======================================== */
.quote-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.quote-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   QUOTE VARIANTS
   ======================================== */

/* Left Aligned Quote */
.quote-card.left-aligned {
    text-align: left;
    margin: 0;
}

/* Right Aligned Quote */
.quote-card.right-aligned {
    text-align: right;
    margin: 0 0 0 auto;
}

.right-aligned .quote-author {
    justify-content: flex-end;
}

/* Centered Quote */
.quote-card.centered {
    text-align: center;
}

.centered .quote-author {
    justify-content: center;
}

/* Bordered Quote */
.quote-card.bordered {
    border: 2px solid #007bff;
}

/* Dark Quote */
.quote-card.dark {
    background: #1a1a2e;
    color: white;
}

    .quote-card.dark .quote-text {
        color: rgba(255,255,255,0.9);
    }

    .quote-card.dark .quote-author-name {
        color: white;
    }

    .quote-card.dark .quote-author-title {
        color: rgba(255,255,255,0.7);
    }

    .quote-card.dark .quote-author {
        border-top-color: rgba(255,255,255,0.2);
    }

/* Gradient Quote */
.quote-card.gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

    .quote-card.gradient .quote-mark {
        color: white;
        opacity: 0.2;
    }

    .quote-card.gradient .quote-text {
        color: white;
    }

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .quote-snippet-container {
        padding: 1.5rem;
    }

    .quote-card {
        padding: 1.5rem;
    }

    .quote-title {
        font-size: 1.25rem;
    }

    .quote-text {
        font-size: 1rem;
    }

    .quote-text-large {
        font-size: 1.125rem;
    }

    .quote-mark {
        font-size: 4rem;
    }

    .quote-mark-top {
        top: 0.75rem;
        left: 1rem;
    }

    .quote-mark-bottom {
        bottom: 0.75rem;
        right: 1rem;
    }

    .quote-avatar {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .quote-card {
        padding: 1.25rem;
    }

    .quote-text {
        font-size: 0.9375rem;
    }

    .quote-author {
        flex-direction: column;
        text-align: center;
    }

    .quote-card.centered .quote-author {
        flex-direction: column;
    }

    .quote-card.right-aligned .quote-author {
        flex-direction: column;
    }

    .quote-mark {
        display: none;
    }
}

/* wwwroot/css/snippets/team.css */

/* ========================================
   TEAM SNIPPET - MAIN CONTAINER
   ======================================== */
.team-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.team-snippet-container {
    width: 100%;
    padding: 2rem 0;
}

/* ========================================
   TEAM HEADER
   ======================================== */
.team-header {
    margin-bottom: 2.5rem;
}

.team-header-center {
    text-align: center;
}

.team-header-left {
    text-align: left;
}

.team-header-right {
    text-align: right;
}

.team-header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.team-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.team-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.team-header-left .team-description {
    margin: 0;
}

.team-header-right .team-description {
    margin: 0 0 0 auto;
}

/* ========================================
   TEAM GRID
   ======================================== */
.team-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

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

.team-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.team-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   TEAM CARD
   ======================================== */
.team-card {
    position: relative;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

    .team-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }

/* Team Badge */
.team-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-bottom-left-radius: 0.5rem;
    z-index: 2;
}

/* Card Inner */
.team-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ========================================
   TEAM IMAGE
   ======================================== */
.team-image-wrapper {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
}

.image-circle {
    border-radius: 50%;
    margin: 1rem auto;
    width: calc(100% - 2rem);
    aspect-ratio: 1 / 1;
}

.image-rounded {
    border-radius: 0.5rem;
}

.team-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Social Overlay */
.team-social-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.team-card:hover .team-social-overlay {
    transform: translateY(0);
}

.team-social-link {
    color: white;
    text-decoration: none;
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

    .team-social-link:hover {
        transform: scale(1.2);
    }

/* ========================================
   TEAM AVATAR
   ======================================== */
.team-avatar-wrapper {
    display: flex;
    justify-content: center;
    padding: 1.5rem 1.5rem 0 1.5rem;
}

.avatar-circle .team-avatar-icon {
    border-radius: 50%;
}

.avatar-rounded .team-avatar-icon {
    border-radius: 0.5rem;
}

.team-avatar-icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    font-size: 3rem;
}

.avatar-sm .team-avatar-icon {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.avatar-lg .team-avatar-icon {
    width: 150px;
    height: 150px;
    font-size: 3.5rem;
}

/* ========================================
   TEAM INFO
   ======================================== */
.team-info {
    padding: 1.25rem;
    text-align: center;
    flex: 1;
}

.team-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #212529;
}

.team-position {
    font-size: 0.8125rem;
    color: #007bff;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.team-bio {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #6c757d;
    margin-bottom: 1rem;
}

.team-bio-html {
    font-size: 0.8125rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

/* ========================================
   CONTACT BUTTONS
   ======================================== */
.team-contact-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.team-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

.contact-btn-default {
    background: #f8f9fa;
    color: #007bff;
}

    .contact-btn-default:hover {
        background: #007bff;
        color: white;
    }

.contact-btn-bordered {
    background: transparent;
    color: #007bff;
    border: 1px solid #007bff;
}

    .contact-btn-bordered:hover {
        background: #007bff;
        color: white;
    }

/* ========================================
   TEAM FOOTER
   ======================================== */
.team-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.team-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   TEAM VARIANTS
   ======================================== */

/* Minimal Card */
.team-card.minimal {
    box-shadow: none;
    border: 1px solid #e9ecef;
}

    .team-card.minimal:hover {
        transform: none;
        box-shadow: none;
    }

/* Dark Card */
.team-card.dark {
    background: #1a1a2e;
    color: white;
}

    .team-card.dark .team-name {
        color: white;
    }

    .team-card.dark .team-bio,
    .team-card.dark .team-bio-html {
        color: rgba(255,255,255,0.8);
    }

    .team-card.dark .contact-btn-default {
        background: rgba(255,255,255,0.1);
        color: white;
    }

/* Horizontal Layout */
.team-card.horizontal .team-card-inner {
    flex-direction: row;
}

.team-card.horizontal .team-image-wrapper {
    width: 40%;
    margin: 1rem;
}

.team-card.horizontal .team-info {
    text-align: left;
    padding: 1rem 1rem 1rem 0;
}

.team-card.horizontal .team-contact-buttons {
    justify-content: flex-start;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .team-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .team-snippet-container {
        padding: 1rem 0;
    }

    .team-title {
        font-size: 1.5rem;
    }

    .team-description {
        font-size: 0.875rem;
    }

    .team-grid-2,
    .team-grid-3,
    .team-grid-4 {
        grid-template-columns: 1fr;
    }

    .team-card {
        max-width: 350px;
        margin: 0 auto;
    }

    .team-name {
        font-size: 1rem;
    }

    .team-position {
        font-size: 0.75rem;
    }

    /* Disable horizontal layout on mobile */
    .team-card.horizontal .team-card-inner {
        flex-direction: column;
    }

    .team-card.horizontal .team-image-wrapper {
        width: auto;
        margin: 1rem;
    }

    .team-card.horizontal .team-info {
        text-align: center;
        padding: 0 1rem 1rem 1rem;
    }

    .team-card.horizontal .team-contact-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .team-avatar-icon {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }

    .team-contact-buttons {
        flex-direction: column;
        align-items: center;
    }

    .team-contact-btn {
        width: 100%;
        justify-content: center;
    }
}


/* wwwroot/css/snippets/gallery.css */

/* ========================================
   GALLERY SNIPPET - MAIN CONTAINER
   ======================================== */
.gallery-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.gallery-snippet-container {
    width: 100%;
    padding: 2rem 0;
}

/* ========================================
   GALLERY HEADER
   ======================================== */
.gallery-header {
    margin-bottom: 2rem;
}

.gallery-header-center {
    text-align: center;
}

.gallery-header-left {
    text-align: left;
}

.gallery-header-right {
    text-align: right;
}

.gallery-header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.gallery-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.gallery-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.gallery-header-left .gallery-description {
    margin: 0;
}

.gallery-header-right .gallery-description {
    margin: 0 0 0 auto;
}

/* ========================================
   GALLERY FILTER
   ======================================== */
.gallery-filter {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: 1px solid #dee2e6;
    border-radius: 50px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .filter-btn:hover {
        background: #f8f9fa;
    }

    .filter-btn.active {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

/* ========================================
   GALLERY GRID
   ======================================== */
.gallery-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

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

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

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

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

/* ========================================
   GALLERY ITEM
   ======================================== */
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .gallery-item:hover {
        transform: translateY(-3px);
    }

.gallery-item-inner {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
}

/* Gallery Image */
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

/* Overlay */
.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-align: center;
    padding: 1rem;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-icon {
    font-size: 2rem;
    color: white;
    margin-bottom: 0.5rem;
}

.gallery-overlay-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.gallery-overlay-description {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.8);
}

/* Video Thumbnail */
.gallery-video-thumb {
    position: relative;
    cursor: pointer;
}

.video-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    transition: all 0.2s ease;
}

    .video-play-button:hover {
        background: #007bff;
        transform: translate(-50%, -50%) scale(1.1);
    }

/* ========================================
   LIGHTBOX
   ======================================== */
.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.lightbox-container {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.lightbox-video {
    width: 80vw;
    height: 45vw;
    max-width: 1200px;
    max-height: 675px;
}

    .lightbox-video iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    transition: transform 0.2s ease;
}

    .lightbox-close:hover {
        transform: scale(1.1);
    }

.lightbox-caption {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
}

    .lightbox-caption h3 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .lightbox-caption p {
        font-size: 0.75rem;
        opacity: 0.8;
    }

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .lightbox-prev:hover,
    .lightbox-next:hover {
        background: rgba(255,255,255,0.4);
    }

.lightbox-prev {
    left: -50px;
}

.lightbox-next {
    right: -50px;
}

/* ========================================
   GALLERY FOOTER
   ======================================== */
.gallery-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.gallery-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .gallery-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .gallery-snippet-container {
        padding: 1rem 0;
    }

    .gallery-title {
        font-size: 1.5rem;
    }

    .gallery-description {
        font-size: 0.875rem;
    }

    .gallery-grid-2,
    .gallery-grid-3,
    .gallery-grid-4 {
        grid-template-columns: 1fr;
    }

    .filter-btn {
        padding: 0.375rem 1rem;
        font-size: 0.75rem;
    }

    .lightbox-prev,
    .lightbox-next {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .lightbox-prev {
        left: -40px;
    }

    .lightbox-next {
        right: -40px;
    }

    .lightbox-video {
        width: 95vw;
        height: 53.4vw;
    }
}

@media (max-width: 480px) {
    .gallery-filter {
        gap: 0.25rem;
    }

    .filter-btn {
        padding: 0.25rem 0.75rem;
        font-size: 0.6875rem;
    }

    .lightbox-prev,
    .lightbox-next {
        display: none;
    }

    .lightbox-close {
        top: -30px;
        font-size: 1.5rem;
    }

    .lightbox-caption {
        bottom: -50px;
    }
}


/* wwwroot/css/snippets/video.css */

/* ========================================
   VIDEO SNIPPET - MAIN CONTAINER
   ======================================== */
.video-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.video-snippet-container {
    width: 100%;
    padding: 2rem 0;
}

/* ========================================
   VIDEO HEADER
   ======================================== */
.video-header {
    margin-bottom: 2rem;
}

.video-header-center {
    text-align: center;
}

.video-header-left {
    text-align: left;
}

.video-header-right {
    text-align: right;
}

.video-header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.video-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.video-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.video-header-left .video-description {
    margin: 0;
}

.video-header-right .video-description {
    margin: 0 0 0 auto;
}

/* ========================================
   VIDEO GRID
   ======================================== */
.video-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

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

.video-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.video-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ========================================
   VIDEO CARD
   ======================================== */
.video-card-item {
    transition: transform 0.3s ease;
}

    .video-card-item:hover {
        transform: translateY(-3px);
    }

.video-card {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
    height: 100%;
}

    .video-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

/* Thumbnail */
.video-thumbnail {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.video-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card:hover .video-thumb-img {
    transform: scale(1.05);
}

/* Play Overlay */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-thumbnail:hover .video-play-overlay {
    opacity: 1;
}

.video-play-button {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

.video-play-overlay.large .video-play-button {
    width: 70px;
    height: 70px;
    font-size: 1.75rem;
}

.video-play-button:hover {
    transform: scale(1.1);
    background: #007bff;
}

/* Duration */
.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: white;
    font-size: 0.6875rem;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Video Info */
.video-info {
    padding: 1rem;
}

.video-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #212529;
    line-height: 1.4;
}

.video-card-description {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.video-meta {
    font-size: 0.6875rem;
    color: #adb5bd;
}

/* ========================================
   FEATURED VIDEO
   ======================================== */
.video-featured {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.video-featured-player {
    flex: 2;
    aspect-ratio: 16 / 9;
}

.video-featured-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
}

.video-featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-featured-info {
    flex: 1;
    padding: 1rem;
}

.video-featured-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #212529;
}

.video-featured-description {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.video-featured-meta {
    font-size: 0.6875rem;
    color: #adb5bd;
}

/* ========================================
   PLAYLIST
   ======================================== */
.video-playlist {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.playlist-title {
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem;
    margin: 0;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.playlist-items {
    max-height: 400px;
    overflow-y: auto;
}

.playlist-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #e9ecef;
}

    .playlist-item:hover {
        background: #f8f9fa;
    }

    .playlist-item.active {
        background: #e3f2fd;
    }

.playlist-thumb {
    position: relative;
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.25rem;
}

    .playlist-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.playlist-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.playlist-item:hover .playlist-play {
    opacity: 1;
}

.playlist-info {
    flex: 1;
}

.playlist-title {
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    padding: 0;
    background: none;
    border: none;
    color: #212529;
}

.playlist-duration {
    font-size: 0.6875rem;
    color: #adb5bd;
}

/* ========================================
   VIDEO MODAL
   ======================================== */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.video-modal-content {
    position: relative;
    max-width: 90%;
    width: 1000px;
    background: black;
    border-radius: 0.5rem;
    overflow: hidden;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    transition: transform 0.2s ease;
    z-index: 1;
}

    .video-modal-close:hover {
        transform: scale(1.1);
    }

.video-modal-player {
    aspect-ratio: 16 / 9;
}

.video-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.video-modal-info {
    padding: 1rem;
    background: #1a1a2e;
    color: white;
}

    .video-modal-info h3 {
        font-size: 1rem;
        margin: 0 0 0.25rem 0;
    }

    .video-modal-info p {
        font-size: 0.75rem;
        margin: 0;
        opacity: 0.8;
    }

/* ========================================
   VIDEO FOOTER
   ======================================== */
.video-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.video-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .video-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .video-snippet-container {
        padding: 1rem 0;
    }

    .video-title {
        font-size: 1.5rem;
    }

    .video-description {
        font-size: 0.875rem;
    }

    .video-grid-2,
    .video-grid-3,
    .video-grid-4 {
        grid-template-columns: 1fr;
    }

    .video-featured {
        flex-direction: column;
    }

    .video-featured-player {
        aspect-ratio: 16 / 9;
    }

    .playlist-item {
        padding: 0.5rem;
    }

    .playlist-thumb {
        width: 100px;
    }

    .video-modal-content {
        max-width: 95%;
    }
}

@media (max-width: 480px) {
    .playlist-thumb {
        width: 80px;
    }

    .playlist-title {
        font-size: 0.75rem;
    }

    .video-play-button {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .video-modal-close {
        top: -30px;
        font-size: 1.5rem;
    }
}

/* wwwroot/css/snippets/contact.css */

/* ========================================
   CONTACT SNIPPET - MAIN CONTAINER
   ======================================== */
.contact-snippet {
    width: 100%;
    margin-bottom: 2rem;
}

.contact-snippet-container {
    width: 100%;
    padding: 2rem;
}

/* ========================================
   CONTACT HEADER
   ======================================== */
.contact-header {
    margin-bottom: 2rem;
}

.contact-header-center {
    text-align: center;
}

.contact-header-left {
    text-align: left;
}

.contact-header-right {
    text-align: right;
}

.contact-header-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.contact-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}

.contact-description {
    font-size: 1rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

.contact-header-left .contact-description {
    margin: 0;
}

.contact-header-right .contact-description {
    margin: 0 0 0 auto;
}

/* ========================================
   CONTACT SPLIT LAYOUT
   ======================================== */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Contact Info Side */
.contact-info-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
    transition: transform 0.2s ease;
}

    .contact-info-item:hover {
        transform: translateX(5px);
    }

.contact-info-icon {
    font-size: 1.75rem;
    min-width: 48px;
    text-align: center;
}

.contact-info-content {
    flex: 1;
}

.contact-info-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #212529;
}

.contact-info-text {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0 0 0.25rem 0;
    line-height: 1.5;
}

.contact-info-link {
    font-size: 0.75rem;
    color: #007bff;
    text-decoration: none;
}

    .contact-info-link:hover {
        text-decoration: underline;
    }

/* Social Links */
.contact-social {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
}

.contact-social-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: #212529;
}

.contact-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.contact-social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #212529;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

    .contact-social-link:hover {
        background: #007bff;
        color: white;
        transform: translateY(-2px);
    }

/* Contact Form Side */
.contact-form-side {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #212529;
}

.form-control {
    padding: 0.625rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    transition: border-color 0.2s ease;
}

    .form-control:focus {
        outline: none;
        border-color: #007bff;
    }

textarea.form-control {
    resize: vertical;
}

.contact-submit-btn {
    padding: 0.75rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .contact-submit-btn:hover {
        background: #0056b3;
        transform: translateY(-2px);
    }

    .contact-submit-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

.form-message {
    padding: 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    text-align: center;
}

    .form-message.success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .form-message.error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

/* ========================================
   CONTACT GRID LAYOUT
   ======================================== */
.contact-grid {
    display: grid;
    gap: 1.5rem;
}

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

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

.contact-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.contact-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.contact-card-item {
    transition: transform 0.3s ease;
}

    .contact-card-item:hover {
        transform: translateY(-5px);
    }

.contact-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
    height: 100%;
}

    .contact-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.contact-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.contact-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #212529;
}

.contact-card-text {
    font-size: 0.8125rem;
    color: #6c757d;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.contact-card-link {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: #007bff;
    text-decoration: none;
}

    .contact-card-link:hover {
        text-decoration: underline;
    }

/* ========================================
   CONTACT FOOTER
   ======================================== */
.contact-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.contact-footer-icon {
    font-size: 0.875rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 992px) {
    .contact-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {
    .contact-snippet-container {
        padding: 1rem;
    }

    .contact-title {
        font-size: 1.5rem;
    }

    .contact-description {
        font-size: 0.875rem;
    }

    .contact-split {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .contact-grid-2,
    .contact-grid-3,
    .contact-grid-4 {
        grid-template-columns: 1fr;
    }

    .contact-info-item {
        padding: 0.75rem;
    }

    .contact-info-icon {
        font-size: 1.5rem;
        min-width: 40px;
    }

    .contact-social-links {
        justify-content: center;
    }

    .contact-form-side {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .contact-card {
        padding: 1rem;
    }

    .contact-card-icon {
        font-size: 2rem;
    }

    .contact-social-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}



/* wwwroot/css/snippets/breadcrumb.css */

/* ========================================
   BREADCRUMB SNIPPET - MAIN CONTAINER
   ======================================== */
.breadcrumb-snippet {
    width: 100%;
    margin-bottom: 1rem;
}

.breadcrumb-snippet-container {
    width: 100%;
    padding: 0.75rem 1rem;
}

/* ========================================
   BREADCRUMB HEADER
   ======================================== */
.breadcrumb-header {
    margin-bottom: 1rem;
}

.breadcrumb-header-left {
    text-align: left;
}

.breadcrumb-header-center {
    text-align: center;
}

.breadcrumb-header-right {
    text-align: right;
}

.breadcrumb-header-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.breadcrumb-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.125rem 0;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.breadcrumb-description {
    font-size: 0.75rem;
    color: #adb5bd;
    margin: 0;
}

/* ========================================
   BREADCRUMB NAVIGATION
   ======================================== */
.breadcrumb-nav {
    width: 100%;
}

/* Breadcrumb List */
.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Breadcrumb Item */
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s ease;
}

    .breadcrumb-link:hover {
        color: #007bff;
        text-decoration: underline;
    }

.breadcrumb-icon {
    font-size: 0.75rem;
    margin-right: 0.125rem;
}

.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #212529;
    font-weight: 500;
}

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #adb5bd;
    font-size: 0.75rem;
}

/* ========================================
   BREADCRUMB VARIANTS
   ======================================== */

/* Flush Style - No Background */
.breadcrumb-flush {
    padding: 0;
}

/* Divided Style - With Separator Lines */
.breadcrumb-divided .breadcrumb-item:not(:last-child):after {
    content: "|";
    margin: 0 0.5rem;
    color: #dee2e6;
}

.breadcrumb-divided .breadcrumb-separator {
    display: none;
}

/* Bordered Style - With Border */
.breadcrumb-bordered {
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    background: #f8f9fa;
}

/* ========================================
   SEPARATOR VARIANTS (controlled by Objective.Value)
   ======================================== */

/* Slash Separator (default) */
.breadcrumb-list .breadcrumb-separator {
    content: "/";
}

/* Arrow Separator */
.breadcrumb-list.arrow .breadcrumb-separator {
    content: "›";
    font-size: 1rem;
}

/* Double Arrow Separator */
.breadcrumb-list.double-arrow .breadcrumb-separator {
    content: "»";
}

/* Bullet Separator */
.breadcrumb-list.bullet .breadcrumb-separator {
    content: "•";
    font-size: 0.875rem;
}

/* Dash Separator */
.breadcrumb-list.dash .breadcrumb-separator {
    content: "—";
}

/* Chevron Separator */
.breadcrumb-list.chevron .breadcrumb-separator {
    content: "›";
    font-weight: bold;
}

/* ========================================
   BREADCRUMB SIZES
   ======================================== */
.breadcrumb-snippet.size-sm .breadcrumb-item {
    font-size: 0.6875rem;
}

.breadcrumb-snippet.size-sm .breadcrumb-icon {
    font-size: 0.625rem;
}

.breadcrumb-snippet.size-lg .breadcrumb-item {
    font-size: 0.9375rem;
}

.breadcrumb-snippet.size-lg .breadcrumb-icon {
    font-size: 0.875rem;
}

.breadcrumb-snippet.size-lg .breadcrumb-separator {
    font-size: 0.875rem;
}

/* ========================================
   BREADCRUMB WITH BACKGROUND
   ======================================== */
.breadcrumb-snippet-container.bg-light {
    background: #f8f9fa;
    border-radius: 0.25rem;
}

.breadcrumb-snippet-container.bg-primary {
    background: #007bff;
}

    .breadcrumb-snippet-container.bg-primary .breadcrumb-link,
    .breadcrumb-snippet-container.bg-primary .breadcrumb-current,
    .breadcrumb-snippet-container.bg-primary .breadcrumb-separator {
        color: white;
    }

        .breadcrumb-snippet-container.bg-primary .breadcrumb-link:hover {
            color: rgba(255,255,255,0.8);
        }

/* ========================================
   BREADCRUMB WITH SHADOW
   ======================================== */
.breadcrumb-snippet-container.shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.breadcrumb-snippet-container.shadow-lg {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ========================================
   BREADCRUMB FOOTER
   ======================================== */
.breadcrumb-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    font-size: 0.6875rem;
    color: #adb5bd;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-top: 1px solid #e9ecef;
}

.breadcrumb-footer-icon {
    font-size: 0.75rem;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .breadcrumb-snippet-container {
        padding: 0.5rem 0.75rem;
    }

    .breadcrumb-item {
        font-size: 0.75rem;
    }

    .breadcrumb-separator {
        margin: 0 0.375rem;
    }

    .breadcrumb-list {
        flex-wrap: wrap;
    }

    .breadcrumb-title {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb-item {
        font-size: 0.6875rem;
    }

    .breadcrumb-icon {
        display: none;
    }

    .breadcrumb-separator {
        margin: 0 0.25rem;
    }

    .breadcrumb-bordered {
        padding: 0.375rem 0.75rem;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .breadcrumb-snippet {
        display: none;
    }
}