/* NizaMira Technologies — presentation layer on top of the template.
 *
 * Kept in its own file and loaded last so the vendored template CSS stays
 * untouched and every change here can be traced or reverted in one place.
 * The palette is the template's own blue and green; this file only deepens
 * and applies them more consistently.
 */

:root {
    --nz-blue: #1842b6;
    --nz-blue-deep: #0f2c7d;
    --nz-blue-ink: #0a1c4d;
    --nz-green: #26d48c;
    --nz-green-deep: #14ab6c;
    --nz-ink: #14213d;
    --nz-muted: #5b6b8c;
    --nz-shadow: 0 18px 40px -18px rgba(10, 28, 77, .35);
    --nz-shadow-lift: 0 26px 55px -20px rgba(10, 28, 77, .45);
}

/* ------------------------------------------------------------ buttons */
/* The template's flat fills read as washed out on a phone, which is where
   most of this site is opened. Gradient plus a lift on hover gives the
   primary action enough weight to be found without changing the hues. */

.btn-primary,
.btn-secondary {
    border: 0;
    box-shadow: var(--nz-shadow);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.btn-primary {
    background-image: linear-gradient(135deg, var(--nz-blue) 0%, var(--nz-blue-deep) 100%);
}

.btn-secondary {
    background-image: linear-gradient(135deg, var(--nz-green) 0%, var(--nz-green-deep) 100%);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--nz-shadow-lift);
    filter: saturate(1.1);
}

.btn-demo {
    white-space: nowrap;
}

/* ------------------------------------------------------------ hero */
/* The stock photography behind the carousel is busy, so the headline needs
   a gradient scrim rather than the template's flat tint to stay readable. */

.carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(10, 28, 77, .92) 0%,
            rgba(15, 44, 125, .78) 45%,
            rgba(24, 66, 182, .35) 100%);
    pointer-events: none;
}

.carousel-caption {
    z-index: 2;
}

.carousel-caption h6 {
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 1rem !important;
}

.carousel-caption h1 {
    text-shadow: 0 6px 30px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------ cards */

.service-item,
.project-item,
.team-item,
.blog-item,
.capability-card {
    transition: transform .3s ease, box-shadow .3s ease;
}

.service-item:hover,
.team-item:hover,
.blog-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--nz-shadow-lift);
}

/* --------------------------------------------------- capability cards */
/* The three service lines. A card per line, the individual capabilities
   listed inside it, and a demo request on each — the page's whole job is
   to get someone to ask for a demo. */

.capability-card {
    background: #fff;
    border: 1px solid rgba(24, 66, 182, .12);
    border-top: 4px solid var(--nz-green);
    box-shadow: var(--nz-shadow);
    display: flex;
    flex-direction: column;
}

.capability-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--nz-shadow-lift);
    border-top-color: var(--nz-blue);
}

.capability-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background-image: linear-gradient(135deg, var(--nz-blue) 0%, var(--nz-blue-deep) 100%);
}

.capability-card h4 {
    color: var(--nz-ink);
}

.capability-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1 1 auto;
}

.capability-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .6rem;
    color: var(--nz-muted);
    line-height: 1.5;
}

.capability-list li::before {
    content: "\f058";               /* Font Awesome check-circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1rem;
    color: var(--nz-green-deep);
}

/* ---------------------------------------------------------- team card */
/* The social icon row used to provide the bottom padding here; it was
   removed because the icons linked nowhere. */

.team-item .team-name {
    padding-bottom: 1.5rem !important;
}

/* ------------------------------------------------------- demo CTA band */

.demo-band {
    background-image: linear-gradient(120deg, var(--nz-blue-ink) 0%, var(--nz-blue) 55%, var(--nz-blue-deep) 100%);
    color: #fff;
}

.demo-band h2 {
    color: #fff;
}

.demo-band p {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 0;
}

/* ------------------------------------------------------------ headings */

.section-eyebrow {
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--nz-blue);
}

/* -------------------------------------------------------- work shot */

.work-shot {
    box-shadow: var(--nz-shadow);
    border: 1px solid rgba(24, 66, 182, .12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.work-shot:hover {
    transform: translateY(-6px);
    box-shadow: var(--nz-shadow-lift);
}

/* ------------------------------------------------------------- mobile */
/* The template pins the hero to a 400px min-height and centres the caption
   inside it, so a headline plus a paragraph plus two buttons is clipped at
   both ends. Give the hero enough room to hold its own content, and move the
   arrows off the copy. */

@media (max-width: 767.98px) {

    .carousel-item,
    .carousel-item img {
        min-height: 660px;
    }

    .carousel-caption {
        padding: 100px 18px 80px;
    }

    .carousel-item h1 {
        font-size: 1.85rem !important;
        line-height: 1.22;
        margin-bottom: 1rem !important;
    }

    .carousel-item p {
        font-size: 1rem !important;
        margin: 0 auto 1.5rem;
    }

    /* Two inline anchors wrap onto separate lines with no vertical gap. */
    .carousel-caption .carousel-content a {
        display: inline-block;
        margin: 6px 4px !important;
    }

    .carousel-caption .btn {
        padding: .7rem 1.6rem !important;
        font-size: .95rem;
    }

    /* Pinned at top:50% by the template — straight over the headline. */
    .carousel-control-prev,
    .carousel-control-next {
        top: auto;
        bottom: 14px;
        width: 58px;
        height: 42px;
    }

    #carouselId .carousel-indicators {
        bottom: 64px;
    }

    .capability-card {
        text-align: left;
    }
}