/* ========================================
 * FONTS
 * ======================================== */

/* Google Fonts - Roboto family */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:wdth,wght@87.5,200..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
/* Local fonts example (uncomment to use):



/* ========================================
 * GLOBAL STYLES & BOOTSTRAP OVERRIDE
 * ======================================== */

/* CSS Variables - Theme configuration */
:root,
[data-bs-theme="light"] {
    --bs-primary: #5C33FF;
    --bs-primary-rgb: 122, 28, 172;
    --bs-secondary: #F9F9F9;
    --bs-secondary-rgb: 249, 249, 249;
    --bs-dark: #111111;
    --bs-dark-rgb: 17, 17, 17;
    --bs-dark-text-emphasis: #EEEEEE;
    --bs-light: #FFF;
    --bs-light-rgb: 255, 255, 255;
    --bs-warning: #FDC227;
    --bs-warning-rgb: 253, 194, 39;
    --bs-success: #3EB54A;
    --bs-success-rgb: 62, 181, 74;
    --bs-danger: #EF4444;
    --bs-danger-rgb: 239, 68, 68;
    --bs-border-color: #D8D8D8;
    --font-site: Public Sans, Arial, sans-serif;
    --font-title: 'Mona Sans', Public Sans, Arial, sans-serif;
    --font-desc: Public Sans, Arial, sans-serif;
    --font-detail: Public Sans, Arial, sans-serif;
    --text-color-site: #202020;
    --text-heading-color: #0E0F1F;
    --text-color-title: #27272A;
    --text-color-desc: #71717A;
    --text-color-detail: #52525B;
    --container-lg-width: 960px;
    --container-xl-width: 1200px;
    --container-xxl-width: 1340px;
    --screen-base-width: 1440px;
    --bs-transition: all 0.25s ease-in-out;

    /* Additional theme variables */
    --artech-bg-canvas: #F9F9F9;
    --font-size-section-title: 56px;
    --line-height-section-title: 64px;
    --letter-spacing-section-title: -2.1px;
    --text-color-paragraph: #17161A;
    --artech-card-border: #E8E8E8;
    --artech-border-strong: #37353E;
    --artech-border-soft: rgba(var(--bs-dark-rgb), 0.05);
    --artech-elevation-md: 0 4px 16px rgba(var(--bs-dark-rgb), 0.08);
    --artech-navbar-accent-rgb: 92, 51, 255;
    --artech-navbar-accent-hover: #5117EE;
    --artech-navbar-accent-hover-rgb: 81, 23, 238;
    --artech-footer-border: #a9a9a9;
    --artech-button-dark: #202020;
    --artech-button-dark-rgb: 32, 32, 32;
    --artech-button-dark-hover: rgba(var(--bs-dark-rgb), 0.85);
    --artech-portfolio-full-card-width: 500px;
    --artech-portfolio-preview-card-width: 202px;
    /* Dark Theme Section (Trending Features) */
    --artech-dark-text-rgb: 238, 238, 238;
    --artech-dark-border: rgba(var(--bs-light-rgb), 0.17);
    --artech-dark-border-hover: rgba(var(--bs-light-rgb), 0.25);
    --artech-dark-bg-glass: rgba(var(--bs-dark-rgb), 0.05);
    --artech-dark-bg-glass-hover: rgba(var(--bs-light-rgb), 0.05);
    --artech-dark-text-medium: rgba(var(--bs-light-rgb), 0.69);
    --artech-dark-text-light: rgba(var(--bs-light-rgb), 0.39);
    --artech-dark-pattern-gradient: rgba(var(--artech-navbar-accent-rgb), 0.1);
    --artech-text-primary-color: #5028E4;
    --artech-text-primary-rgb: 80, 40, 228;
    --artech-highlight-rgb: 7, 251, 115;
    --artech-card-highlight-rgb: 0, 32, 255;
    --artech-header-dark-rgb: 25, 25, 25;
    --artech-dark-skeleton-start: rgba(var(--bs-light-rgb), 0.05);
    --artech-dark-skeleton-middle: rgba(var(--bs-light-rgb), 0.1);
    --artech-dark-skeleton-end: rgba(var(--bs-light-rgb), 0.05);
    --font-size-base: 16px;
    --line-height-base: 24px;
    --letter-spacing-base: -0.24px;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text-color-site);
    font-family: var(--font-site);
    line-height: 1.25;
    overflow-x: hidden;
}


/* ========================================
 * BUTTON COMPONENTS - Bootstrap 5 Override
 * Following DEVELOPMENT_FLOW.md guidelines
 * ======================================== */

.btn {
    --bs-btn-padding-x: 20px;
    --bs-btn-padding-y: 14px;
    --bs-btn-line-height: 1.4;
    --bs-btn-border-radius: 12px;
    --bs-btn-font-weight: 500;
    --bs-btn-font-family: var(--font-site);
    --bs-btn-font-size: 16px;
    font-family: var(--bs-btn-font-family);
    font-weight: var(--bs-btn-font-weight);
    font-size: var(--bs-btn-font-size);
    transition: all 0.3s ease;
    border: 1px solid var(--bs-btn-border-color);
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: var(--btn-min-height, 40px);
}

/* Button States */
.btn:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
 * BUTTON VARIANTS - Following CSS Variables Pattern
 * ======================================== */

.btn-primary {
    /* Typography & sizing to match Figma */
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-border-radius: 8px;
    /* pill */
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 0px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 20px;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: var(--font-site);
    --bs-btn-letter-spacing: -0.16px;

    /* Keep disabled colors in theme */
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-color: #fff;

    --bs-btn-hover-bg: var(--artech-navbar-accent-hover);
    --bs-btn-hover-border-color: var(--artech-navbar-accent-hover);
    --bs-btn-hover-color: var(--bs-light);
    min-height: var(--btn-min-height, 40px);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    box-shadow: 0 10px 20px rgba(var(--artech-navbar-accent-hover-rgb), 0.3);
}

.btn-secondary {
    --bs-btn-bg: var(--artech-button-dark);
    --bs-btn-border-color: var(--artech-button-dark);
    --bs-btn-color: var(--bs-light);
    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--artech-button-dark-hover);
    --bs-btn-hover-border-color: var(--artech-button-dark-hover);
    --bs-btn-border-radius: 8px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 14px;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: var(--font-site);
    --bs-btn-line-height: 20px;
    --bs-btn-letter-spacing: -0.16px;

    font-family: var(--bs-btn-font-family);
    font-weight: var(--bs-btn-font-weight);
    font-size: var(--bs-btn-font-size);
    line-height: var(--bs-btn-line-height);
    letter-spacing: var(--bs-btn-letter-spacing);
    transition: var(--bs-transition);
    min-height: var(--btn-min-height, 40px);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    box-shadow: 0 3px 12px rgba(var(--bs-dark-rgb), 0.35);
}

.btn-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--bs-dark-rgb), 0.15);
    --bs-btn-color: var(--text-color-site);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb), 0.15);
    --bs-btn-hover-color: var(--text-color-site);

    --bs-btn-border-radius: 8px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 0px;
    --bs-btn-font-size: 14px;
    --bs-btn-line-height: 20px;
    --bs-btn-font-weight: 600;
    --bs-btn-font-family: var(--font-site);
    --bs-btn-letter-spacing: -0.16px;

    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--text-color-desc);
    min-height: var(--btn-min-height, 40px);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    background: rgba(var(--bs-light-rgb), 0.25);
    box-shadow: 0 4px 12px rgba(var(--bs-dark-rgb), 0.08);
}


.btn-link {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: #6b1a9a;
    --bs-btn-active-color: #5a1780;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: 0;
    text-decoration: none;
    border: none;
    background: transparent;
}

.btn-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* Button Sizes */

.btn-md {
    --btn-min-height: 48px;
}

/* Form Styles */

.form-label {
    font-weight: 500;
    color: var(--text-color-title);
}

.form-control,
.form-select {
    --bs-body-bg: #fff;
    --bs-body-color: var(--text-color-site);
    --bs-form-control-bg: #fff;
    --bs-form-control-color: var(--text-color-site);
    --bs-form-control-border-color: var(--bs-border-color);
    --bs-form-select-bg: #fff;
    --bs-form-select-color: var(--text-color-site);
    --bs-form-select-border-color: var(--bs-border-color);
    padding: 14px 16px;
}

.form-control:focus,
.form-select:focus {
    border: 1px solid var(--bs-primary);
    box-shadow: 0 0 0 3.2px rgba(var(--bs-primary-rgb), 0.05);
}

.form-control::placeholder {
    color: #A1A1AA;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* ========================================
  COMPONENTS
  ======================================== */

.s-section {
    padding: 100px 0;
}

.s-section__title {
    font-family: var(--font-title);
    font-size: var(--font-size-section-title);
    line-height: var(--line-height-section-title);
    letter-spacing: var(--letter-spacing-section-title);
    font-weight: 600;
    color: var(--text-color-site);
}

.s-section__paragraph {
    color: rgba(var(--bs-dark-rgb), 0.91);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.24px;
}

.s-card__title {
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 23px;
    line-height: 28px;
    letter-spacing: -0.48px;
}

.s-base-text {
    font-family: var(--font-site);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
}
.s-text-md {
    --font-size-base: 14px;
    --line-height-base: 20px;
    --letter-spacing-base: -0.24px;
}
.s-text-sm {
    --font-size-base: 12px;
    --line-height-base: 16px;
    --letter-spacing-base: -0.24px;
}

@media (max-width: 767px) {
    .s-section__title {
        --font-size-section-title: 40px;
        --line-height-section-title: 56px;
    }
}


/* Utility classes */
.s-object-cover {
    object-fit: cover;
    object-position: center;
}

.s-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}

.s-dots .embla__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color) !important;
    transition: var(--bs-transition);
    color: var(--bs-light);
    padding: 0;
}

.s-dots .embla__dot.is-selected {
    color: rgba(var(--bs-dark-rgb), 0.45);
}

@media screen and (max-width: 767px) {
    .s-section {
        padding: 50px 0;
    }
}

.s-badge {
    background: rgba(var(--bs-dark-rgb), 0.06);
    color: var(--text-color-site);
    font-family: var(--font-site);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.24px;
    font-weight: 500;
    padding: 0 12px;
}


@media screen and (max-width: 767px) {
    .s-badge {
        padding: 0 6px;
        font-size: 12px;
        line-height: 16px;
    }
}

.breadcrumb-item:after {
    content: "/";
    color: var(--text-color-desc);
    border: none;
    transform: none;
    top: 0;
}

.breadcrumb > li > a {
    color: var(--text-color-site);
}