/* ==========================================================

   TECHNOCRAFT - WEBSITE CUSTOM CSS

   Updated: Trust Bar stays compact; global section padding

   excludes the trust strip at desktop, tablet and mobile.

   ========================================================== */



/* ==========================================================

   TECHNOCRAFT - CUSTOM WEBSITE STYLES

   Base: AI.Tech / Bootstrap 5

   Order: navbar, hero, trust, services, approach, performance,

          why TechnoCraft / SOC, testimonial, contact, footer.

   Corporate palette / Poppins / global button rules are defined

   in technocraft-theme.css. This file contains section overrides.

   Load AFTER style.css and technocraft-theme.css.

   ========================================================== */



/* ==========================================================

   01. NAVIGATION - WHITE CORPORATE HEADER

   Fixed visual alignment, readable type, sticky scrolling

   ========================================================== */

.tc-navbar.sticky-top {

    background: #fff !important;

    box-shadow: 0 2px 16px rgba(0, 32, 66, .07);

    border-bottom: 1px solid #e5edf3;

    z-index: 1040; transition: box-shadow .25s ease;

}

.tc-navbar.bg-primary { background: #fff !important; }

.tc-navbar.tc-is-scrolled { box-shadow: 0 6px 20px rgba(0, 32, 66, .11); }

.tc-navbar .navbar { height: auto; min-height: 78px; padding: 8px 0 !important; }

.tc-navbar-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; margin-right: 0; padding: 3px 0; }

.tc-navbar-logo { width: 44px; height: 49px; flex: none; object-fit: contain; }

.tc-navbar-brand-content { display: flex; flex-direction: column; min-width: 0; }

.tc-navbar-brand-name { font-family: var(--tc-font); font-size: 21px; font-weight: 700; color: var(--tc-primary); line-height: 1.15; letter-spacing: .015em; white-space: nowrap; }

.tc-navbar-brand-name span { color: var(--tc-digital); }

.tc-navbar-brand-subtitle { margin-top: 4px; font-family: var(--tc-font); font-size: 8px; letter-spacing: .09em; font-weight: 500; color: #647384; white-space: nowrap; }

.tc-navbar .navbar-collapse { min-width: 0; align-items: center; }

.tc-navbar .tc-navbar-links { margin-left: auto; margin-right: 0; gap: 2px; padding: 0; background: transparent !important; }

.tc-navbar .navbar-nav .nav-link { margin-right: 0; padding: 9px 9px; font-family: var(--tc-font); font-size: 15px; font-weight: 500; line-height: 1.45; color: #283b4c !important; white-space: nowrap; transition: color .2s ease; }

.tc-navbar .navbar-nav .nav-link:is(:hover,:focus-visible,.active) { color: var(--tc-secondary) !important; }

.tc-navbar .tc-nav-cta { flex-shrink: 0; margin-left: 12px !important; padding: 10px 16px !important; font-size: 13px; font-weight: 500; color: #fff; background: var(--tc-primary); border-color: var(--tc-primary); white-space: nowrap; }

.tc-navbar .tc-nav-cta:is(:hover,:focus-visible) { color: #fff; background: var(--tc-secondary); border-color: var(--tc-secondary); }

.tc-navbar .navbar-toggler { padding: 8px 10px; border: 1px solid #d5e3ed; }

.tc-navbar .navbar-toggler:focus-visible { box-shadow: 0 0 0 3px rgba(51,153,204,.2); }

.tc-scroll-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: linear-gradient(90deg,var(--tc-digital),var(--tc-accent)); transform: scaleX(0); transform-origin: left; pointer-events: none; }

@media (min-width: 992px) and (max-width: 1399.98px) {

    .tc-navbar-logo { width: 38px; height: 43px; }

    .tc-navbar-brand-name { font-size: 18px; }

    .tc-navbar-brand-subtitle { font-size: 7px; letter-spacing: .035em; }

    .tc-navbar .tc-navbar-links { margin-left: auto; margin-right: 0; gap: 0; }

    .tc-navbar .navbar-nav .nav-link { font-size: 13px; padding: 8px 6px; }

    .tc-navbar .tc-nav-cta { font-size: 12px; padding: 9px 11px !important; margin-left: 6px !important; }

}

@media (max-width: 991.98px) {

    .tc-navbar .navbar { min-height: 70px; }

    .tc-navbar .navbar-collapse { padding: 8px 0 15px; }

    .tc-navbar .tc-navbar-links { gap: 0; }

    .tc-navbar .navbar-nav .nav-link { padding: 11px 12px; font-size: 15px; white-space: normal; border-radius: 8px; }

    .tc-navbar .navbar-nav .nav-link.active { background: #eaf4fb; }

    .tc-navbar .tc-nav-cta { margin: 12px 0 0 !important; white-space: normal; font-size: 14px; }

}

@media (max-width: 575.98px) {

    .tc-navbar .navbar { min-height: 65px; }

    .tc-navbar-logo { width: 34px; height: 40px; }

    .tc-navbar-brand-name { font-size: 17px; }

    .tc-navbar-brand-subtitle { font-size: 6.5px; letter-spacing: 0; }

}



/* ==========================================================

   NAVIGATION - FAQ RESPONSIVE ADJUSTMENTS

========================================================== */

/* Standard desktop */

@media (min-width: 1200px) {

    .tc-navbar .tc-navbar-links {

        gap: 2px;

    }

    .tc-navbar .tc-navbar-links .nav-link {

        padding-left: 9px;

        padding-right: 9px;

        font-size: 14px;

    }

    .tc-navbar .tc-nav-cta {

        font-size: 13px;

        padding: 10px 16px !important;

    }

}

/* Smaller laptops: use mobile-style collapse to avoid crowding */

@media (min-width: 992px) and (max-width: 1199.98px) {

    .tc-navbar .tc-navbar-links .nav-link {

        font-size: 13px;

        padding-left: 5px;

        padding-right: 5px;

    }

    .tc-navbar .tc-nav-cta {

        font-size: 12px;

        padding: 10px 12px !important;

    }

}

/* Tablet and mobile */

@media (max-width: 991.98px) {

    .tc-navbar .tc-navbar-links {

        align-items: stretch !important;

        padding-block: 8px;

    }

    .tc-navbar .tc-navbar-links .nav-link {

        font-size: 15px;

        padding: 11px 6px;

    }

    .tc-navbar .tc-nav-cta {

        margin-top: 10px !important;

    }

}



/* ==========================================================

   02. HERO - TECHNOCRAFT CORPORATE BACKGROUND

   Full-width Vanta.NET and right-side brand watermark.

   Main responsive layout defined once in section 14.2 below.

========================================================== */

#techno-hero {

    background: #003366 !important;

}

#techno-hero .tc-highlight { color: var(--tc-accent, #66CCCC); }

#techno-hero .tc-hero-content p { line-height: 1.75; }

#techno-hero .btn.btn-sm.border { color: #fff !important; }

#techno-hero a.btn { white-space: normal; text-align: center; }

#techno-hero .btn-light {

    color: var(--tc-primary, #003366);

    background-color: var(--tc-light, #F2F2F2);

    border-color: var(--tc-light, #F2F2F2);

}

#techno-hero .btn-light:hover,

#techno-hero .btn-light:focus-visible {

    color: #003366;

    background-color: #fff;

    border-color: #fff;

}

#techno-hero .btn-outline-light {

    color: #fff;

    background-color: transparent;

    border-color: rgba(255,255,255,.85);

}

#techno-hero .btn-outline-light:hover,

#techno-hero .btn-outline-light:focus-visible {

    color: #003366;

    background-color: #fff;

    border-color: #fff;

}



/* ==========================================================

   03. TRUST BAR

   Compact Corporate Credential Strip / AI.Tech

========================================================== */

/* ----------------------------------------------------------

   03.1 TRUST BAR CONTAINER

---------------------------------------------------------- */

.tc-trust-bar {

    position: relative;

    background-color: #FFFFFF;

    border-bottom: 1px solid #E8EDF2;

    padding: 10px 0;

    margin: 0;

    min-height: 0;

}

/* Remove unnecessary internal spacing */

.tc-trust-bar .container {

    padding-top: 0;

    padding-bottom: 0;

}

.tc-trust-bar .row {

    --bs-gutter-y: 0;

    align-items: center;

}

/* ----------------------------------------------------------

   03.2 TRUST ITEMS

---------------------------------------------------------- */

.tc-trust-item {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 34px;

    padding: 0 4px;

}

/* Lightweight template icons */

.tc-trust-item i {

    flex-shrink: 0;

    color: var(--tc-accent);

    font-size: 17px;

    font-weight: 400;

    line-height: 1;

}

/* Consistent Poppins typography */

.tc-trust-item span {

    color: var(--tc-dark);

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.4;

}

/* ----------------------------------------------------------

   03.3 TABLET

---------------------------------------------------------- */

@media (max-width: 991.98px) {

    .tc-trust-bar {

        padding: 12px 0;

    }

    .tc-trust-bar .row {

        --bs-gutter-y: 10px;

    }

    .tc-trust-item {

        justify-content: flex-start;

        min-height: 30px;

    }

}

/* ----------------------------------------------------------

   03.4 MOBILE

---------------------------------------------------------- */

@media (max-width: 575.98px) {

    .tc-trust-bar {

        padding: 10px 0;

    }

    .tc-trust-bar .row {

        --bs-gutter-y: 8px;

    }

    .tc-trust-item {

        gap: 7px;

        padding: 0;

        min-height: 28px;

    }

    .tc-trust-item i {

        font-size: 15px;

    }

    .tc-trust-item span {

        font-size: 11px;

        line-height: 1.35;

    }

}



/* ==========================================================

   04. SERVICES

   Original AI.Tech card grid, elevation and hover effects

   ========================================================== */

#services {

    scroll-margin-top: 80px;

}

#services .service-item {

    height: 100%;

}

#services .service-icon i {

    font-weight: normal;

    line-height: 1;

}

@media (min-width: 992px) {

    #services .service-item {

        padding: 36px 25px;

    }

}

@media (max-width: 575.98px) {

    #services .service-item { padding: 32px 24px; }

}

#services .tc-service-animated {

    box-shadow: 0 3px 14px rgba(0, 51, 102, 0.07);

    transition:

        background-color 0.35s ease,

        box-shadow 0.35s ease,

        transform 0.35s ease;

}

@media (hover: hover) and (pointer: fine) {

    #services .tc-service-animated:hover {

        transform: translateY(-5px);

        box-shadow:

            0 14px 32px rgba(0, 51, 102, 0.18);

    }

    #services .tc-service-animated .service-icon {

        transition:

            background-color 0.35s ease,

            transform 0.35s ease;

    }

    #services .tc-service-animated:hover .service-icon {

        transform: scale(1.06);

    }

    #services .tc-service-cta i {

        display: inline-block;

        transition: transform 0.25s ease;

    }

    #services .tc-service-cta:hover i {

        transform: translateX(4px);

    }

}

#services .tc-service-cta:focus-visible {

    outline: 2px solid var(--tc-accent);

    outline-offset: 4px;

}



/* ==========================================================

   05. HOW WE WORK

   Four-step timeline and connecting rule

   ========================================================== */

#approach {

    background-color: #FFFFFF;

    scroll-margin-top: 80px;

}

.tc-approach-header {

    max-width: 750px;

    margin-bottom: 40px;

}

.tc-approach-header h2 {

    color: var(--tc-primary);

    font-weight: 700;

    line-height: 1.25;

}

.tc-approach-header p {

    color: #596571;

    line-height: 1.75;

}

.tc-approach-timeline {

    position: relative;

}

.tc-approach-step {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 0 12px;

}

.tc-approach-marker {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 80px;

    height: 80px;

    flex-shrink: 0;

    margin-bottom: 22px;

    background-color: #FFFFFF;

    border: 2px solid #DCEAF5;

    border-radius: 50%;

    box-shadow: 0 4px 14px rgba(0, 51, 102, 0.06);

    transition:

        background-color 0.3s ease,

        border-color 0.3s ease,

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.tc-approach-number {

    color: var(--tc-primary);

    font-size: 28px;

    font-weight: 700;

    line-height: 1;

    transition: color 0.3s ease;

}

.tc-approach-step-title {

    width: 100%;

    margin-bottom: 12px;

    color: var(--tc-primary);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.4;

}

.tc-approach-step-description {

    max-width: 290px;

    color: #596571;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.8;

}

@media (min-width: 992px) {

    .tc-approach-timeline::before {

        content: "";

        position: absolute;

        top: 39px;

        left: 12.5%;

        right: 12.5%;

        height: 2px;

        background: linear-gradient(

            90deg,

            var(--tc-primary),

            var(--tc-secondary),

            var(--tc-digital),

            var(--tc-accent)

        );

        opacity: 0.45;

        pointer-events: none;

    }

}

@media (hover: hover) and (pointer: fine) {

    .tc-approach-step:hover .tc-approach-marker {

        background-color: var(--tc-primary);

        border-color: var(--tc-primary);

        box-shadow: 0 10px 24px rgba(0, 51, 102, 0.12);

        transform: translateY(-4px);

    }

    .tc-approach-step:hover .tc-approach-number {

        color: #FFFFFF;

    }

}

@media (max-width: 991.98px) {

    .tc-approach-timeline::before {

        display: none;

    }

    .tc-approach-step {

        padding: 0 16px;

    }

}

@media (max-width: 767.98px) {

    .tc-approach-header {

        margin-bottom: 30px;

    }

    .tc-approach-step {

        padding: 0 12px;

    }

    .tc-approach-marker {

        width: 68px;

        height: 68px;

        margin-bottom: 16px;

    }

    .tc-approach-number {

        font-size: 25px;

    }

    .tc-approach-step-title {

        margin-bottom: 8px;

        font-size: 17px;

    }

    .tc-approach-step-description {

        max-width: 420px;

    }

}



/* ==========================================================

   06. PERFORMANCE / OUR IMPACT

   Compact animated statistics and AI.Tech illustration

   ========================================================== */

/* The AI.Tech .feature class provides the blue decorative background. */

#performance {

    background-color: var(--tc-primary) !important;

    scroll-margin-top: 80px;

}

#performance .tc-performance-description {

    max-width: 610px;

    color: #D5E7F5;

    font-size: 14px;

    line-height: 1.75;

}

/* Compact stat grid: four text metrics, no translucent cards. */

#performance .tc-performance-metrics {

    margin-top: 2px;

}

#performance .tc-performance-item {

    height: 100%;

    padding: 8px 4px 8px 0;

    border-top: 1px solid rgba(255, 255, 255, .2);

    transition: transform .25s ease;

}

#performance .tc-performance-number {

    display: flex;

    align-items: baseline;

    gap: 0;

    color: var(--tc-accent);

    font-size: clamp(21px, 2.25vw, 34px);

    font-weight: 700;

    line-height: 1.3;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;

}

#performance .tc-performance-label {

    color: #D5E7F5;

    font-size: 11px;

    font-weight: 500;

    line-height: 1.55;

    letter-spacing: .2px;

}

/* Original AI.Tech illustration; do not distort or crop. */

#performance .tc-performance-visual { min-width: 0; }

#performance .tc-performance-image {

    display: block;

    width: auto;

    max-width: 100%;

    max-height: 390px;

    height: auto;

    margin-left: auto;

    object-fit: contain;

    object-position: bottom center;

}

#performance .btn {

    font-weight: 500;

    text-align: center;

    white-space: normal;

}

#performance .btn-light { color: var(--tc-primary); }

@media (hover: hover) and (pointer: fine) {

    #performance .tc-performance-item:hover { transform: translateY(-3px); }

}

@media (max-width: 991.98px) {

    /* Keep the stats compact on tablets and phones. */

    #performance .tc-performance-visual { display: none; }

    #performance .tc-performance-number {

        font-size: clamp(24px, 4vw, 34px);

    }

}

@media (max-width: 575.98px) {

    #performance .col-lg-7 {

        padding-top: 38px !important;

        padding-bottom: 38px !important;

    }

    #performance .tc-performance-description { font-size: 13px; }

    #performance .tc-performance-number {

        font-size: clamp(22px, 6vw, 30px);

    }

    #performance .tc-performance-label { font-size: 10px; }

    #performance .btn { font-size: 12px; }

}



/* ==========================================================

   07. WHY TECHNOCRAFT

   Three feature cards and SOC view styling

   ========================================================== */

#why-technocraft {

    scroll-margin-top: 80px;

}

.tc-why-section h2 {

    color: var(--tc-primary);

    font-weight: 700;

    line-height: 1.25;

}

.tc-why-intro {

    color: #596571;

    font-size: 14px;

    line-height: 1.8;

}

.tc-why-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.tc-why-item {

    display: flex;

    align-items: flex-start;

    gap: 16px;

    padding: 20px;

    background-color: #FFFFFF;

    border: 1px solid #E8EDF2;

    border-radius: 12px;

    box-shadow: 0 3px 14px rgba(0, 51, 102, 0.055);

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease,

        border-color 0.3s ease;

}

.tc-why-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    background-color: var(--tc-primary);

    border-radius: 50%;

    color: #FFFFFF;

    font-size: 21px;

    line-height: 1;

    transition:

        background-color 0.3s ease,

        transform 0.3s ease;

}

.tc-why-text {

    flex: 1;

    min-width: 0;

}

.tc-why-card-title {

    margin-bottom: 7px;

    color: var(--tc-primary);

    font-size: 16px;

    font-weight: 600;

    line-height: 1.45;

}

.tc-why-text p {

    color: #596571;

    font-size: 13px;

    line-height: 1.7;

}

.tc-why-cta {

    font-weight: 500;

}

.tc-why-cta i {

    display: inline-block;

    transition: transform 0.25s ease;

}

.tc-soc-terminal {

    position: relative;

    overflow: hidden;

    background-color: #061D35;

    border: 1px solid #20486A;

    border-radius: 14px;

    box-shadow:

        0 15px 38px rgba(0, 38, 77, 0.16);

    color: #E2F0FA;

    font-family: "Poppins", sans-serif;

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.tc-soc-terminal::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image: linear-gradient(

        rgba(102, 204, 204, 0.018) 1px,

        transparent 1px

    );

    background-size: 100% 5px;

    pointer-events: none;

    z-index: 0;

}

.tc-soc-topbar,

.tc-soc-body {

    position: relative;

    z-index: 1;

}

.tc-soc-topbar {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 20px;

    background-color: #0B2947;

    border-bottom: 1px solid #234765;

}

.tc-soc-window-controls {

    display: flex;

    gap: 6px;

    flex-shrink: 0;

}

.tc-soc-window-controls span {

    width: 9px;

    height: 9px;

    border-radius: 50%;

}

.tc-soc-window-controls span:nth-child(1) {

    background-color: #FF6B6B;

}

.tc-soc-window-controls span:nth-child(2) {

    background-color: #FFD166;

}

.tc-soc-window-controls span:nth-child(3) {

    background-color: #4CD964;

}

.tc-soc-window-title {

    flex: 1;

    min-width: 0;

    color: #A6C3DA;

    font-family: Consolas, "Courier New", monospace;

    font-size: 12px;

    text-align: center;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.tc-soc-demo-label {

    color: #66CCCC;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

}

.tc-soc-body {

    padding: 24px;

}

.tc-soc-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 22px;

}

.tc-soc-overline {

    color: #66CCCC;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.4px;

}

.tc-soc-heading-title {

    color: #FFFFFF;

    font-size: 20px;

    font-weight: 600;

}

.tc-soc-monitor-indicator {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    color: #9CDAC2;

    font-size: 11px;

    font-weight: 500;

}

.tc-soc-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background-color: #4ADE80;

    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.10);

}

.tc-soc-command {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px 14px;

    margin-bottom: 22px;

    background-color: #031526;

    border: 1px solid #193E5C;

    border-radius: 7px;

    color: #9CCCE7;

    font-family: Consolas, "Courier New", monospace;

    font-size: 12px;

    overflow-wrap: anywhere;

}

.tc-soc-prompt {

    color: #66CCCC;

    font-weight: 700;

}

.tc-soc-cursor {

    display: inline-block;

    flex-shrink: 0;

    width: 7px;

    height: 14px;

    background-color: #66CCCC;

    animation: tc-cursor-blink 1.1s step-end infinite;

}

@keyframes tc-cursor-blink {

    50% {

        opacity: 0;

    }

}

.tc-soc-table-header {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    padding-bottom: 10px;

    border-bottom: 1px solid #234765;

    color: #789DBA;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

}

.tc-soc-events {

    margin-bottom: 20px;

}

.tc-soc-event {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding: 13px 0;

    border-bottom: 1px dashed rgba(190, 220, 240, 0.13);

}

.tc-soc-event-name {

    flex: 1;

    min-width: 0;

    color: #D8E8F4;

    font-size: 12px;

    line-height: 1.6;

}

.tc-soc-event-status {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    min-width: 94px;

    padding: 5px 9px;

    border-radius: 20px;

    font-size: 10px;

    font-weight: 500;

    text-align: center;

}

.tc-soc-status-blocked,

.tc-soc-status-contained {

    background-color: rgba(74, 222, 128, 0.12);

}

.tc-soc-status-investigating {

    background-color: rgba(250, 204, 21, 0.12);

}

.tc-soc-status-watching {

    background-color: rgba(51, 153, 204, 0.18);

}

.tc-soc-posture {

    padding-top: 3px;

    margin-bottom: 18px;

    color: #A6C3DA;

    font-size: 12px;

}

.tc-soc-posture strong {

    color: #FFFFFF;

    font-weight: 600;

}

.tc-soc-progress {

    width: 100%;

    height: 8px;

    overflow: hidden;

    background-color: #234765;

    border-radius: 20px;

}

.tc-soc-progress-fill {

    width: 92%;

    height: 100%;

    background: linear-gradient(

        90deg,

        var(--tc-secondary),

        var(--tc-accent)

    );

    border-radius: inherit;

}

.tc-soc-note {

    color: #86A4BA;

    font-size: 11px;

    line-height: 1.6;

}

@media (hover: hover) and (pointer: fine) {

    .tc-why-item:hover {

        transform: translateY(-3px);

        border-color: rgba(51, 153, 204, 0.35);

        box-shadow: 0 10px 24px rgba(0, 51, 102, 0.10);

    }

    .tc-why-item:hover .tc-why-icon {

        background-color: var(--tc-secondary);

        transform: scale(1.05);

    }

    .tc-why-cta:hover i {

        transform: translateX(4px);

    }

    .tc-soc-terminal:hover {

        transform: translateY(-3px);

        box-shadow: 0 20px 44px rgba(0, 38, 77, 0.22);

    }

}

@media (max-width: 991.98px) {

    .tc-soc-terminal {

        max-width: 750px;

    }

}

@media (max-width: 575.98px) {

    .tc-why-item {

        padding: 16px;

        gap: 12px;

    }

    .tc-why-icon {

        width: 42px;

        height: 42px;

        font-size: 18px;

    }

    .tc-why-card-title {

        font-size: 15px;

    }

    .tc-soc-body {

        padding: 18px;

    }

    .tc-soc-topbar {

        padding: 12px 14px;

    }

    .tc-soc-heading {

        flex-wrap: wrap;

    }

    .tc-soc-event-name {

        font-size: 11px;

    }

    .tc-soc-event-status {

        min-width: auto;

        font-size: 9px;

        padding: 5px 7px;

    }

}

/* SOC panel compatibility and responsive polish */

.tc-soc-view-label,

.tc-soc-live-label {

    color: var(--tc-accent);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1px;

    flex-shrink: 0;

}

.tc-soc-command-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tc-soc-status-success,

.tc-soc-status-blocked,

.tc-soc-status-contained { color: #8BE5AC; background: rgba(74, 222, 128, .12); }

.tc-soc-status-warning,

.tc-soc-status-investigating { color: #F5D976; background: rgba(250, 204, 21, .12); }

.tc-soc-status-info,

.tc-soc-status-watching { color: #8CD5F4; background: rgba(51, 153, 204, .18); }

.tc-soc-metrics .tc-soc-metric-card {

    height: 100%; min-width: 0; padding: 11px 8px;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 9px; background: rgba(255, 255, 255, .045);

    text-align: center;

}

.tc-soc-metric-card span { display: block; margin-bottom: 5px; color: #A6C3DA; font-size: 10px; }

.tc-soc-metric-card strong { display: block; color: #FFFFFF; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

.tc-soc-heading { flex-wrap: wrap; }

@media (max-width: 575.98px) {

    .tc-soc-command { overflow: hidden; }

    .tc-soc-event { flex-direction: column; align-items: flex-start; gap: 6px; }

    .tc-soc-event-status { min-width: 0; }

}



/* ==========================================================

   08. CLIENT TESTIMONIAL

   Original AI.Tech split-column testimonial styling

   ========================================================== */

#testimonials {

    /* Keep testimonials white to create the site-wide alternating section rhythm. */
    background-color: #FFFFFF;

    scroll-margin-top: 80px;

}

.tc-testimonials h2 {

    color: var(--tc-primary);

    font-weight: 700;

    line-height: 1.25;

}

.tc-testimonial-intro {

    color: #596571;

    font-size: 14px;

    line-height: 1.8;

}

.tc-testimonial-content {

    border-color: var(--tc-digital) !important;

    border-width: 2px !important;

}

.tc-testimonial-quote {

    color: var(--tc-primary);

    font-family: "Poppins", sans-serif;

    font-weight: 400;

    line-height: 1.65;

    font-style: normal;

}

.tc-testimonial-avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 60px;

    background-color: #E8F1FA;

    border-radius: 50%;

    color: var(--tc-secondary);

    font-size: 27px;

}

.tc-testimonials .testimonial-item h5 {

    color: var(--tc-primary);

    font-size: 15px;

    font-weight: 600;

}

.tc-testimonial-role {

    color: #596571;

    font-size: 13px;

    line-height: 1.5;

}

.tc-testimonial-cta {

    font-weight: 500;

}

.tc-testimonial-cta i {

    display: inline-block;

    transition: transform 0.25s ease;

}

@media (hover: hover) and (pointer: fine) {

    .tc-testimonial-cta:hover i {

        transform: translateX(4px);

    }

}

@media (max-width: 991.98px) {

    .tc-testimonial-content {

        margin-top: 4px;

    }

}

@media (max-width: 575.98px) {

    .tc-testimonial-quote {

        font-size: 17px !important;

        line-height: 1.7;

    }

    .tc-testimonial-avatar {

        width: 52px;

        height: 52px;

        font-size: 23px;

    }

}



/* ==========================================================

   09. CONTACT / ASSESSMENT

   Dark navy contact block with a white Laravel form

   ========================================================== */

#contact {

    background-color: var(--tc-primary);

    background-image:

        radial-gradient(

            circle at 90% 15%,

            rgba(102, 204, 204, 0.10),

            transparent 34%

        ),

        linear-gradient(

            135deg,

            #003366 0%,

            #00477D 100%

        );

    scroll-margin-top: 80px;

}

#contact::before {

    width: 340px;

    height: 340px;

    top: -180px;

    right: -130px;

    border: 45px solid rgba(102, 204, 204, 0.055);

    border-radius: 50%;

    z-index: -1;

}

#contact > .container {

    z-index: 1;

}

.tc-contact-intro h2 {

    color: #FFFFFF;

    font-weight: 700;

    line-height: 1.2;

}

.tc-contact-intro > .btn.btn-sm {

    color: #FFFFFF !important;

    border-color: rgba(255, 255, 255, 0.55) !important;

    font-weight: 500;

}

.tc-contact-lead {

    color: #D5E7F5;

    font-size: 15px;

    line-height: 1.8;

}

.tc-contact-details {

    display: flex;

    flex-direction: column;

    gap: 22px;

    margin-top: 30px;

}

.tc-contact-detail {

    display: flex;

    align-items: flex-start;

    gap: 16px;

}

.tc-contact-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    width: 48px;

    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.24);

    border-radius: 10px;

    background-color: rgba(255, 255, 255, 0.10);

    color: var(--tc-accent);

    font-size: 21px;

    line-height: 1;

    transition:

        background-color 0.3s ease,

        transform 0.3s ease;

}

.tc-contact-detail-content {

    min-width: 0;

    padding-top: 2px;

}

.tc-contact-detail-content h5 {

    margin-bottom: 5px;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 600;

}

.tc-contact-detail-content p,

.tc-contact-detail-content address,

.tc-contact-detail-content a {

    color: #D5E7F5;

    font-size: 13px;

    font-style: normal;

    line-height: 1.75;

    overflow-wrap: anywhere;

}

.tc-contact-detail-content a {

    text-decoration: none;

    transition: color 0.2s ease;

}

.tc-contact-detail-content a:hover {

    color: #FFFFFF;

    text-decoration: underline;

}

.tc-contact-detail-content a:focus-visible {

    outline: 2px solid var(--tc-accent);

    outline-offset: 4px;

}

.tc-assessment-form {

    padding: 34px;

    background-color: #FFFFFF;

    border: 1px solid rgba(255, 255, 255, 0.65);

    border-radius: 14px;

    box-shadow:

        0 14px 38px rgba(0, 19, 49, 0.16);

}

.tc-assessment-form-header h3 {

    color: var(--tc-primary);

    font-size: 19px;

    font-weight: 600;

}

.tc-assessment-form-header p {

    color: #596571;

    font-size: 13px;

    line-height: 1.65;

}

.tc-assessment-form .form-label {

    margin-bottom: 8px;

    color: var(--tc-primary);

    font-size: 13px;

    font-weight: 500;

}

.tc-assessment-form .form-label span {

    color: var(--tc-secondary);

}

.tc-assessment-form .form-control,

.tc-assessment-form .form-select {

    min-height: 46px;

    padding: 10px 14px;

    background-color: #F8FAFC;

    border: 1px solid #DDE5ED;

    border-radius: 8px;

    color: var(--tc-dark);

    font-family: inherit;

    font-size: 1rem;

    font-weight: 400;

    transition:

        background-color 0.2s ease,

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}

.tc-assessment-form .form-control:focus,

.tc-assessment-form .form-select:focus {

    background-color: #FFFFFF;

    border-color: var(--tc-digital);

    box-shadow: 0 0 0 3px rgba(51, 153, 204, 0.14);

}

.tc-assessment-form .form-control::placeholder {

    color: #5D6B79;

    opacity: 1;

}

.tc-assessment-form textarea.form-control {

    min-height: 125px;

    resize: vertical;

}

.tc-assessment-form .form-control.is-invalid,

.tc-assessment-form .form-select.is-invalid {

    border-color: #DC3545;

}

.tc-assessment-form .invalid-feedback {

    font-size: 12px;

}

.tc-assessment-submit {

    min-height: 49px;

    padding: 12px 20px;

    border-radius: 8px;

    background-color: var(--tc-primary);

    border-color: var(--tc-primary);

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 500;

    text-align: center;

    transition:

        background-color 0.3s ease,

        border-color 0.3s ease,

        box-shadow 0.3s ease;

}

.tc-assessment-submit:hover {

    background-color: var(--tc-secondary);

    border-color: var(--tc-secondary);

    color: #FFFFFF;

}

.tc-assessment-submit:focus-visible {

    outline: 2px solid var(--tc-digital);

    outline-offset: 3px;

}

.tc-assessment-submit i {

    display: inline-block;

    transition: transform 0.25s ease;

}

.tc-assessment-note {

    color: #5D6B79;

    font-size: .8125rem;

    line-height: 1.7;

}

.tc-contact-honeypot {

    position: absolute;

    left: -9999px;

    width: 1px;

    height: 1px;

    overflow: hidden;

}

@media (hover: hover) and (pointer: fine) {

    .tc-contact-detail:hover .tc-contact-icon {

        background-color: rgba(255, 255, 255, 0.16);

        transform: translateY(-2px);

    }

    .tc-assessment-submit:hover {

        box-shadow: 0 7px 18px rgba(0, 51, 102, 0.18);

    }

    .tc-assessment-submit:hover i {

        transform: translateX(4px);

    }

}

@media (max-width: 991.98px) {

    .tc-contact-intro {

        max-width: 750px;

    }

    .tc-contact-details {

        gap: 18px;

        margin-top: 24px;

    }

    .tc-assessment-form {

        padding: 28px;

    }

}

@media (max-width: 575.98px) {

    .tc-contact-lead {

        font-size: 14px;

    }

    .tc-contact-detail {

        gap: 12px;

    }

    .tc-contact-icon {

        width: 43px;

        height: 43px;

        font-size: 19px;

    }

    .tc-contact-detail-content h5 {

        font-size: 14px;

    }

    .tc-assessment-form {

        padding: 22px 18px;

        border-radius: 12px;

    }

    .tc-assessment-form-header h3 {

        font-size: 17px;

    }

}



/* ==========================================================

   10. FOOTER

   Original AI.Tech footer structure and copyright

   ========================================================== */

.tc-footer {

    background-color: #00264D !important;

    color: #B9D5ED !important;

}

.tc-footer-brand {

    font-family: "Poppins", sans-serif;

    font-size: 27px;

    font-weight: 700;

    line-height: 1.3;

    letter-spacing: -0.5px;

}

.tc-footer-brand span {

    color: var(--tc-accent);

}

.tc-footer h5 {

    color: #FFFFFF;

    font-size: 16px;

    font-weight: 600;

}

.tc-footer p {

    color: #B9D5ED;

    font-size: 13px;

    line-height: 1.8;

}

.tc-footer .btn.btn-link {

    display: block;

    width: fit-content;

    max-width: 100%;

    padding: 0;

    margin-bottom: 10px;

    color: #B9D5ED;

    font-family: inherit;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.6;

    text-align: left;

    white-space: normal;

}

.tc-footer .btn.btn-link::before {

    color: var(--tc-accent);

}

.tc-footer-contact-line {

    display: flex;

    align-items: flex-start;

}

.tc-footer-contact-line i {

    flex-shrink: 0;

    width: 16px;

    margin-top: 5px;

    color: var(--tc-accent);

}

.tc-footer-contact-line span,

.tc-footer-contact-line a {

    min-width: 0;

    overflow-wrap: anywhere;

}

.tc-footer-contact-line a {

    color: #B9D5ED;

    text-decoration: none;

}

.tc-footer a:focus-visible {

    outline: 2px solid var(--tc-accent);

    outline-offset: 4px;

}

@media (hover: hover) and (pointer: fine) {

    .tc-footer .btn.btn-link:hover,

    .tc-footer-contact-line a:hover,

    .tc-footer .footer-menu a:hover {

        color: #FFFFFF;

    }

}

.tc-footer .copyright {

    border-top: 1px solid rgba(255, 255, 255, 0.12);

}

.tc-footer .copyright,

.tc-footer .copyright a {

    font-size: 12px;

}

.tc-footer-credits {

    display: block;

    margin-top: 6px;

    color: #8FB9D9;

}

.tc-footer .footer-menu a {

    color: #B9D5ED;

    font-size: 12px;

}

@media (max-width: 575.98px) {

    .tc-footer-brand {

        font-size: 25px;

    }

    .tc-footer .container.py-5 {

        padding-bottom: 32px !important;

    }

}



/* ==========================================================

   11. ACCESSIBILITY / REDUCED MOTION

   Applied globally without disabling normal WOW.js animations.

   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    #techno-hero .animated { animation: none !important; }

    #performance .tc-performance-item,

    #services .tc-service-animated,

    #services .tc-service-animated .service-icon,

    #services .tc-service-cta i,

    .tc-why-item,

    .tc-why-icon,

    .tc-why-cta i,

    .tc-soc-terminal,

    .tc-assessment-submit,

    .tc-assessment-submit i,

    .tc-contact-icon,

    .tc-contact-detail-content a,

    .tc-assessment-form .form-control,

    .tc-assessment-form .form-select,

    .tc-testimonial-cta i,

    .tc-trust-item i,

    .tc-approach-marker,

    .tc-approach-number {

        transition: none !important;

    }

    .tc-soc-cursor,

    .tc-soc-status-dot { animation: none !important; }

    #performance .tc-performance-item:hover,

    #services .tc-service-animated:hover,

    .tc-why-item:hover,

    .tc-soc-terminal:hover,

    .tc-approach-step:hover .tc-approach-marker {

        transform: none !important;

    }

}



/* ==========================================================

   12. SITE-WIDE RESPONSIVE RHYTHM

   Compact spacing, consistent section sizing, better readability

   ========================================================== */

:root { --tc-header-height: 80px; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--tc-header-height) + 8px); }

body { overflow-x: clip; }

main section[id] { scroll-margin-top: calc(var(--tc-header-height) + 8px); }

main section:not(#techno-hero) > .container { max-width: 1140px; }

main section:not(#techno-hero):not(#performance):not(.tc-trust-bar) { padding-top: 56px !important; padding-bottom: 56px !important; }

main section:not(#techno-hero):not(#performance):not(.tc-trust-bar) > .container { padding-top: 0 !important; padding-bottom: 0 !important; }

main section h2 { font-size: clamp(1.65rem, 2.3vw, 2.35rem); line-height: 1.22; }

main section p { overflow-wrap: break-word; }

.tc-performance-number { font-variant-numeric: tabular-nums; }

#services .row.g-4 { --bs-gutter-y: 1.5rem; --bs-gutter-x: 1.5rem; }

#services .service-item { padding: 28px 22px; border-radius: 12px; }

#services .service-icon { width: 65px; height: 65px; margin-bottom: 16px; }

#services .service-icon i { font-size: 1.6rem !important; }

#services .service-item h5 { font-size: 1.06rem; }

#services .service-item p { font-size: .875rem; line-height: 1.7; }

.tc-approach-header { margin-bottom: 28px; }

.tc-approach-marker { width: 66px; height: 66px; margin-bottom: 16px; }

.tc-approach-number { font-size: 24px; }

#performance .tc-performance-image { max-height: 365px; }

#testimonials .tc-testimonial-quote { font-size: clamp(1.1rem, 1.65vw, 1.5rem) !important; line-height: 1.65; }

.tc-contact .tc-assessment-form { box-shadow: 0 18px 40px rgba(0, 22, 48, .15); }

.tc-footer .container.py-5 { padding-top: 42px !important; padding-bottom: 38px !important; }

.tc-footer .row.g-5 { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }

.tc-footer-brand-lockup { display: inline-flex; align-items: center; gap: 12px; }

.tc-footer-logo { width: 45px; height: 49px; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); }

.tc-footer-brand-text { display: flex; flex-direction: column; gap: 4px; }

.tc-footer-brand-text .tc-footer-brand { display: block; font-size: 19px; line-height: 1.2; font-weight: 700; color: #fff; }

.tc-footer-brand-text .tc-footer-brand span { color: var(--tc-accent); }

.tc-footer-brand-text small { display: block; color: #b9d4e7; font-size: 7px; letter-spacing: .08em; }

@media (max-width: 991.98px) {

    :root { --tc-header-height: 74px; }

    main section:not(#techno-hero):not(#performance):not(.tc-trust-bar) { padding-top: 46px !important; padding-bottom: 46px !important; }

}

@media (max-width: 575.98px) {

    :root { --tc-header-height: 66px; }

    main section:not(#techno-hero):not(#performance):not(.tc-trust-bar) { padding-top: 34px !important; padding-bottom: 34px !important; }

    #services .service-item { padding: 24px 18px; }

    .tc-footer .container.py-5 { padding-top: 32px !important; padding-bottom: 26px !important; }

}



/* ==========================================================

   13. SCROLL UX + INTERACTIVE MOTION

   Repeats on re-entry; leaves WOW wrappers intact.

   JS adds .tc-motion-ready only after observers are installed.

   ========================================================== */

@media (prefers-reduced-motion: no-preference) {

    html.tc-motion-ready .tc-ux-reveal {

        opacity: 0;

        transform: translate3d(0, 19px, 0);

        transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.25,1);

        transition-delay: var(--tc-reveal-delay, 0ms);

    }

    html.tc-motion-ready .tc-ux-reveal.tc-ux-visible {

        opacity: 1;

        transform: translate3d(0, 0, 0);

    }

    .tc-navbar .nav-link:focus-visible, .tc-navbar .tc-nav-cta:focus-visible {

        outline: 2px solid var(--tc-digital);

        outline-offset: 3px;

    }

    #services .service-item, .tc-approach-step, .tc-why-item, .tc-soc-terminal,

    .tc-footer a, .tc-assessment-submit {

        transition-duration: .28s;

    }

}

@media (prefers-reduced-motion: reduce) {

    html { scroll-behavior: auto !important; }

    .tc-scroll-progress { transition: none !important; }

    .tc-ux-reveal { opacity: 1 !important; transform: none !important; }

}

/* Navbar always stays white, regardless of AI.Tech's scroll classes. */

.tc-navbar.sticky-top { top: 0 !important; }

.tc-navbar .navbar-collapse { flex-grow: 1; }

@media (min-width: 992px) {

    .tc-navbar .tc-navbar-links { margin-left: auto !important; margin-right: 0 !important; }

    .tc-navbar .tc-nav-cta { margin-left: 18px !important; }

}

@media (max-width: 991.98px) {

    .tc-navbar .tc-navbar-links { margin: 0 !important; }

}



/* ==========================================================

   14. UNIFIED CYBER BACKGROUND — HERO / PERFORMANCE / CONTACT

   Hero: Vanta.NET + dark overlay + brand watermark.

   Performance & Contact: existing shared cyber-network SVG.

   ========================================================== */

/* 14.1 Shared section stacking */

#techno-hero,

#performance,

#contact {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    background-color: #003366 !important;

}

#performance > .container,

#contact > .container {

    position: relative;

    z-index: 3;

}

/* 14.2 HERO — subtle full-bleed animated network + wide content. */

#techno-hero.hero-header {

    width: 100%;

    min-height: 620px;

    padding: 0 !important;

    margin: 0 !important;

    background: #003366 !important;

}

/* Vanta mounts on the section itself, not the .container. */

#techno-hero canvas.vanta-canvas {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;

    height: 100% !important;

    display: block !important;

    z-index: 0 !important;

    opacity: .36 !important;

    pointer-events: none !important;

}

/* Mute the network on the copy side, allow subtle detail around the logo. */

#techno-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(90deg,

        rgba(0, 22, 48, .48) 0%,

        rgba(0, 27, 56, .32) 52%,

        rgba(0, 28, 60, .18) 100%);

}

#techno-hero::after { content: none !important; }

/* Keep content aligned but let it use more horizontal room than .container. */

#techno-hero > .tc-hero-container {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    width: 100%;

    max-width: 1440px;

    min-height: 620px;

    margin-inline: auto;

    padding: 90px clamp(24px, 4vw, 64px);

}

#techno-hero .tc-hero-row {

    width: 100%;

    margin-inline: 0;

}

#techno-hero .tc-hero-content {

    position: relative;

    z-index: 3;

    min-width: 0;

    padding-inline: 0;

}

#techno-hero #hero-title {

    max-width: 780px;

    font-size: clamp(2.5rem, 3.5vw, 4.1rem);

    line-height: 1.17;

    letter-spacing: -.032em;

}

#techno-hero .tc-hero-content > p {

    max-width: 630px;

    color: #D5E7F5 !important;

    font-size: 15px;

    line-height: 1.75;

}

/* The shield is intentionally not inside Bootstrap's grid. */

#techno-hero .tc-hero-watermark-wrap {

    position: absolute;

    top: 50%;

    right: clamp(18px, 5vw, 100px);

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: clamp(320px, 33vw, 550px);

    transform: translateY(-50%);

    pointer-events: none;

    user-select: none;

}

#techno-hero .tc-hero-watermark {

    display: block;

    width: 100%;

    height: auto;

    max-height: 550px;

    object-fit: contain;

    opacity: .18;

    filter: brightness(0) invert(1);

}

@media (max-width: 1199.98px) {

    #techno-hero .tc-hero-watermark-wrap { right: 2%; width: 34vw; }

    #techno-hero #hero-title { font-size: clamp(2.4rem, 4vw, 3.5rem); }

}

@media (max-width: 991.98px) {

    #techno-hero.hero-header { min-height: 540px; }

    #techno-hero > .tc-hero-container {

        min-height: 540px;

        padding: 86px 32px 68px;

    }

    #techno-hero .tc-hero-content { max-width: 690px; margin-inline: auto; text-align: center; }

    #techno-hero .tc-hero-content > p { margin-inline: auto; }

    #techno-hero .tc-hero-watermark-wrap { right: -20px; width: min(42vw, 310px); }

    #techno-hero .tc-hero-watermark { opacity: .075; }

    #techno-hero canvas.vanta-canvas { opacity: .30 !important; }

}

@media (max-width: 575.98px) {

    #techno-hero.hero-header { min-height: 0; }

    #techno-hero > .tc-hero-container {

        min-height: 500px;

        padding: 78px 20px 58px;

    }

    #techno-hero #hero-title { font-size: clamp(2rem, 8vw, 2.7rem); }

    #techno-hero .tc-hero-content > p { font-size: 14px; line-height: 1.7; }

    #techno-hero .tc-hero-watermark-wrap { right: -45px; width: 205px; }

    #techno-hero .tc-hero-watermark { opacity: .055; }

    #techno-hero canvas.vanta-canvas { opacity: .25 !important; }

}

@media (prefers-reduced-motion: reduce) {

    #techno-hero canvas.vanta-canvas { display: none !important; }

}

/* 14.3 PERFORMANCE — same vector family, no AI.Tech ring artwork */

#performance.feature {

    background: linear-gradient(112deg,

        #02284e 0%, #003366 53%, #064577 100%) !important;

}

#performance::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background: radial-gradient(ellipse at 80% 45%,

        rgba(102,204,204,.11), transparent 52%);

}

#performance::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: url('../img/cyber-network-motif.svg') center/cover no-repeat;

    opacity: .47;

}

#performance .tc-performance-image {

    filter: drop-shadow(0 16px 34px rgba(0, 17, 37, .23));

}

/* 14.4 CONTACT — same SVG at lower opacity; form stays prominent */

#contact.tc-contact {

    background: linear-gradient(112deg,

        #02284e 0%, #003366 53%, #064577 100%) !important;

}

#contact::before {

    content: "";

    position: absolute;

    inset: 0;

    width: auto;

    height: auto;

    top: 0;

    right: 0;

    border: 0;

    border-radius: 0;

    background: radial-gradient(ellipse at 86% 28%,

        rgba(102,204,204,.08), transparent 50%);

    z-index: 0;

    pointer-events: none;

}

#contact::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: url('../img/cyber-network-motif.svg') center/cover no-repeat;

    opacity: .22;

}

#contact .tc-assessment-form {

    position: relative;

    z-index: 2;

    background: #fff;

    box-shadow: 0 18px 44px rgba(0, 15, 39, .18);

}

/* 14.5 Responsive: background stays proportional on all screens */

@media (max-width: 991.98px) {

    #performance::after,

    #contact::after { background-size: auto 100%; }

}

@media (max-width: 575.98px) {

    #performance::after { opacity: .28; }

    #contact::after { opacity: .14; }

}



/* ==========================================================

   FREQUENTLY ASKED QUESTIONS

   TechnoCraft Corporate FAQ / AI.Tech Bootstrap 5

   - Compact two-column layout

   - Interactive accordion

   - Consistent navy and cyan accents

   - Responsive typography and spacing

========================================================== */

/* ----------------------------------------------------------

   FAQ SECTION CONTAINER

---------------------------------------------------------- */

.tc-faq-section {

    position: relative;

    /* Alternate with the white testimonial section, as elsewhere on site. */
    background-color: #F2F2F2;

}

/* Full-width FAQ background, even if Bootstrap supplies bg-white. */
#faqs.tc-faq-section,
#faqs {
    background-color: #F2F2F2 !important;
}

.tc-faq-section .container {

    max-width: 1140px;

}

/* ----------------------------------------------------------

   LEFT: SECTION INTRODUCTION

---------------------------------------------------------- */

.tc-faq-intro {

    max-width: 390px;

}

.tc-faq-intro h2 {

    color: var(--tc-primary);

    font-size: clamp(1.8rem, 2.5vw, 2.3rem);

    font-weight: 700;

    line-height: 1.25;

}

.tc-faq-description {

    color: #667381;

    font-size: 14px;

    line-height: 1.8;

}

/* ----------------------------------------------------------

   FAQ HELP AREA

---------------------------------------------------------- */

.tc-faq-help {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding-top: 20px;

    border-top: 1px solid #E5ECF2;

}

.tc-faq-help-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: var(--tc-primary);

    background: #EEF5FA;

    border-radius: 12px;

}

.tc-faq-help-icon i {

    font-size: 19px;

}

.tc-faq-help h3 {

    color: var(--tc-primary);

    font-size: 15px;

    font-weight: 600;

}

.tc-faq-help p {

    color: #667381;

    font-size: 13px;

    line-height: 1.7;

}

/* ----------------------------------------------------------

   RIGHT: FAQ ACCORDION

---------------------------------------------------------- */

.tc-faq-accordion {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.tc-faq-accordion .accordion-item {

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid #E5ECF2;

    border-radius: 12px !important;

    box-shadow: 0 3px 14px rgba(0, 51, 102, 0.035);

    transition:

        border-color 0.25s ease,

        box-shadow 0.25s ease,

        transform 0.25s ease;

}

/* Hover effect */

@media (hover: hover) and (pointer: fine) {

    .tc-faq-accordion .accordion-item:hover {

        border-color: #BCD8E9;

        box-shadow:

            0 8px 24px rgba(0, 51, 102, 0.07);

        transform: translateY(-2px);

    }

}

/* ----------------------------------------------------------

   ACCORDION QUESTION BUTTON

---------------------------------------------------------- */

.tc-faq-accordion .accordion-button {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 19px 22px;

    color: var(--tc-primary);

    background: #FFFFFF;

    font-family: "Poppins", sans-serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.6;

    box-shadow: none;

}

/* Expanded question */

.tc-faq-accordion .accordion-button:not(.collapsed) {

    color: var(--tc-primary);

    background: #F3F8FC;

    box-shadow: none;

}

/* Remove Bootstrap focus glow */

.tc-faq-accordion .accordion-button:focus {

    box-shadow: none;

}

.tc-faq-accordion .accordion-button:focus-visible {

    outline: 2px solid var(--tc-digital);

    outline-offset: -3px;

}

/* ----------------------------------------------------------

   QUESTION NUMBER

---------------------------------------------------------- */

.tc-faq-number {

    flex-shrink: 0;

    color: var(--tc-secondary);

    font-family: "Poppins", sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.04em;

}

/* ----------------------------------------------------------

   QUESTION TEXT

---------------------------------------------------------- */

.tc-faq-question {

    flex: 1;

    min-width: 0;

}

/* ----------------------------------------------------------

   ACCORDION ARROW

---------------------------------------------------------- */

.tc-faq-accordion .accordion-button::after {

    flex-shrink: 0;

    width: 16px;

    height: 16px;

    margin-left: auto;

    background-size: 16px;

    transition: transform 0.25s ease;

}

/* ----------------------------------------------------------

   ANSWER CONTENT

---------------------------------------------------------- */

.tc-faq-accordion .accordion-body {

    padding: 0 22px 20px 52px;

    background: #F3F8FC;

}

.tc-faq-accordion .accordion-body p {

    color: #5D6B79;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.85;

}

/* ----------------------------------------------------------

   TABLET RESPONSIVENESS

---------------------------------------------------------- */

@media (max-width: 991.98px) {

    .tc-faq-intro {

        max-width: 100%;

    }

    .tc-faq-accordion .accordion-button {

        padding: 18px 20px;

    }

    .tc-faq-accordion .accordion-body {

        padding: 0 20px 20px 50px;

    }

}

/* ----------------------------------------------------------

   MOBILE RESPONSIVENESS

---------------------------------------------------------- */

@media (max-width: 575.98px) {

    .tc-faq-section .container {

        padding-left: 18px;

        padding-right: 18px;

    }

    .tc-faq-intro h2 {

        font-size: 1.7rem;

    }

    .tc-faq-description {

        font-size: 13px;

    }

    .tc-faq-accordion {

        gap: 8px;

    }

    .tc-faq-accordion .accordion-button {

        gap: 10px;

        padding: 16px;

        font-size: 13px;

    }

    .tc-faq-number {

        font-size: 11px;

    }

    .tc-faq-accordion .accordion-body {

        padding: 0 16px 17px 40px;

    }

    .tc-faq-accordion .accordion-body p {

        font-size: 12px;

        line-height: 1.8;

    }

    .tc-faq-help {

        gap: 12px;

    }

}

/* ----------------------------------------------------------

   REDUCED MOTION ACCESSIBILITY

---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .tc-faq-accordion .accordion-item,

    .tc-faq-accordion .accordion-button::after,

    .tc-faq-accordion .collapsing {

        transition: none !important;

    }

}



/* ==========================================================

   BACK TO TOP - NATIVE JAVASCRIPT VISIBILITY

   Managed by main.js via .tc-back-to-top-visible.

========================================================== */

.back-to-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px);

    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;

}

.back-to-top.tc-back-to-top-visible {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);

}

@media (max-width: 575.98px) {

    .back-to-top { right: 18px; bottom: 18px; width: 42px; height: 42px; }

}

@media (prefers-reduced-motion: reduce) {

    .back-to-top { transition: none !important; }

}







/* ==========================================================

   TECHNOCRAFT - PAGE LOADING SPINNER

========================================================== */



#spinner {

    background-color: #FFFFFF;

}



#spinner .tc-loading-spinner {

    width: 3rem;

    height: 3rem;

    color: var(--tc-primary) !important;

}



@media (prefers-reduced-motion: reduce) {

    #spinner .tc-loading-spinner {

        animation: none !important;

    }

}

/* Phase 3: keyboard access and consistent focus feedback. */
.tc-skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1050;
    padding: 12px 18px;
    color: #fff;
    background: var(--tc-primary);
    border-radius: 8px;
    transform: translateY(-200%);
}

.tc-skip-link:focus {
    color: #fff;
    transform: none;
}

a[href]:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.tc-navbar .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--tc-secondary);
    outline-offset: 3px;
}

#techno-hero .btn:focus-visible,
#performance .btn:focus-visible,
.tc-footer a[href]:focus-visible,
.tc-contact-details a[href]:focus-visible {
    outline-color: var(--tc-accent);
}

#services .service-item:focus-within,
.tc-faq-accordion .accordion-item:focus-within {
    box-shadow: 0 0 0 2px var(--tc-secondary);
}

.tc-assessment-submit:disabled {
    opacity: 1;
    cursor: wait;
    color: #fff;
    background-color: var(--tc-primary);
    border-color: var(--tc-primary);
    box-shadow: none;
}

/* The document's scroll padding supplies the header offset exactly once. */
#main-content,
#main-content [id] {
    scroll-margin-top: 0;
}

.tc-navbar .navbar-nav .nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Keep secondary copy readable without changing the existing heading scale. */
.tc-faq-accordion .accordion-button,
.tc-faq-accordion .accordion-body p {
    font-size: .875rem;
}

.tc-faq-accordion .accordion-body p {
    line-height: 1.8;
}

#techno-hero .tc-hero-content > p,
.tc-performance-description,
.tc-why-intro,
.tc-contact-lead {
    max-width: 65ch;
}

.tc-approach-header p {
    max-width: 65ch;
    margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
    /* WOW uses inline visibility; its hidden state must not hide readable content. */
    .wow {
        visibility: visible !important;
    }

    .animated {
        animation: none !important;
    }

    .btn,
    .tc-navbar .navbar-nav .nav-link {
        transition: none;
    }

    .tc-faq-accordion .accordion-item:hover {
        transform: none;
    }
}