/* =========================================================
   ZUKTI TECH — COMPLETE LANDING PAGE CSS

   CURRENT
   - 24px outer page gutter on PAGE SHELL only
   - Footer remains full width
   - Hero content shifted right
   - Hero content slightly narrower
   - Hero buttons stay on same line
   - What We Do section narrower
   - Service cards slimmer
   - Impact / Counter REMOVED
   - About Us / Story REMOVED
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

:root {
    --page-gutter: 24px;

    --header-blue: #1557e8;
    --header-blue-hover: #1049c8;
    --header-dark: #071126;
    --header-muted: #718096;
}

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

html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: #f5f7fb;
    color: var(--header-dark);

    font-family: "Manrope", sans-serif;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}


/* =========================================================
   PAGE SHELL
========================================================= */

.page-shell {
    width: 100%;
    margin: 0;

    padding:
        24px
        var(--page-gutter)
        0;
}


/* =========================================================
   HERO
========================================================= */

.hero-slider {
    position: relative;

    width: 100%;

    height: calc(100vh - 48px);

    min-height: 720px;
    max-height: 980px;

    overflow: hidden;

    border: 1px solid rgba(21, 87, 232, .07);

    border-radius: 24px;

    background: #d8edff;

    isolation: isolate;
}

.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        opacity .9s ease,
        visibility .9s ease;
}

.hero-slide.active {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   HERO BACKGROUNDS
========================================================= */

.hero-slide-1 {
    background:
        linear-gradient(
            108deg,
            #d8edff 0%,
            #dcefff 32%,
            #e1f3ff 58%,
            #d9f0ff 78%,
            #cbe8ff 100%
        );
}

.hero-slide-2 {
    background:
        linear-gradient(
            108deg,
            #d6ebff 0%,
            #dcefff 32%,
            #e0f2ff 58%,
            #d6edff 78%,
            #c7e4ff 100%
        );
}

.hero-slide-3 {
    background:
        linear-gradient(
            108deg,
            #d5e9ff 0%,
            #dbeeff 32%,
            #dfefff 58%,
            #d4e8ff 78%,
            #c5ddff 100%
        );
}

.hero-slide::before {
    content: "";

    position: absolute;
    z-index: 2;

    width: 650px;
    height: 650px;

    left: 22%;
    bottom: -440px;

    border-radius: 50%;

    background: rgba(255,255,255,.55);

    filter: blur(10px);

    pointer-events: none;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-image {
    position: absolute;
    z-index: 1;

    top: -80px;
    right: 0;
    bottom: -80px;

    width: 68%;

    overflow: hidden;
}

.hero-image img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 7%,
            rgba(0,0,0,.05) 12%,
            rgba(0,0,0,.15) 17%,
            rgba(0,0,0,.30) 22%,
            rgba(0,0,0,.50) 27%,
            rgba(0,0,0,.70) 32%,
            rgba(0,0,0,.86) 37%,
            rgba(0,0,0,.96) 42%,
            #000 48%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 7%,
            rgba(0,0,0,.05) 12%,
            rgba(0,0,0,.15) 17%,
            rgba(0,0,0,.30) 22%,
            rgba(0,0,0,.50) 27%,
            rgba(0,0,0,.70) 32%,
            rgba(0,0,0,.86) 37%,
            rgba(0,0,0,.96) 42%,
            #000 48%,
            #000 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.hero-image::before,
.hero-image::after {
    content: none;
    display: none;
}


/* =========================================================
   FIRST HERO IMAGE
========================================================= */

.hero-slide-1 .hero-image {
    top: -190px;
    right: 0;
    bottom: 0;

    width: 68%;

    overflow: hidden;
}

.hero-slide-1 .hero-image img,
.hero-slide-1.active .hero-image img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: calc(100% + 190px);

    object-fit: cover;
    object-position: center center;

    transform: translateY(190px);

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 12%,
            rgba(0,0,0,.03) 17%,
            rgba(0,0,0,.10) 22%,
            rgba(0,0,0,.22) 27%,
            rgba(0,0,0,.40) 32%,
            rgba(0,0,0,.60) 37%,
            rgba(0,0,0,.78) 42%,
            rgba(0,0,0,.92) 47%,
            #000 53%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            transparent 12%,
            rgba(0,0,0,.03) 17%,
            rgba(0,0,0,.10) 22%,
            rgba(0,0,0,.22) 27%,
            rgba(0,0,0,.40) 32%,
            rgba(0,0,0,.60) 37%,
            rgba(0,0,0,.78) 42%,
            rgba(0,0,0,.92) 47%,
            #000 53%,
            #000 100%
        );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-inner {
    position: relative;
    z-index: 5;

    width: 100%;
    height: 100%;

    margin: 0;

    padding:
        190px
        48px
        105px
        78px;

    display: flex;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 6;

    width: 48%;
    max-width: 700px;
}


/* =========================================================
   HERO EYEBROW
========================================================= */

.hero-eyebrow {
    width: fit-content;

    margin-bottom: 25px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--header-blue);

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .10em;

    text-transform: uppercase;
}

.hero-eyebrow::before {
    content: "";

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--header-blue);

    box-shadow:
        0 0 0 5px rgba(21,87,232,.09);
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {
    width: 100%;
    max-width: 690px;

    margin: 0 0 27px;

    color: var(--header-dark);

    font-size:
        clamp(50px, 4.25vw, 72px);

    font-weight: 500;

    line-height: 1.045;

    letter-spacing: -.052em;
}

.hero-title strong {
    color: var(--header-blue);

    font-weight: 600;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.hero-description {
    max-width: 550px;

    margin: 0 0 38px;

    color: #52677f;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.75;

    letter-spacing: -.01em;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.hero-actions {
    width: 100%;

    display: flex;
    align-items: center;

    flex-direction: row;
    flex-wrap: nowrap;

    gap: 13px;
}

.hero-primary-btn,
.hero-secondary-btn {
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    white-space: nowrap;

    border-radius: 11px;

    font-size: 15px;

    line-height: 1;

    text-decoration: none;
}

.hero-primary-btn {
    padding: 0 27px;

    gap: 17px;

    background: var(--header-blue);

    color: #fff;

    font-weight: 700;

    box-shadow:
        0 12px 30px rgba(21,87,232,.20);

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;
}

.hero-primary-btn svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    transition: transform .25s ease;
}

.hero-primary-btn:hover {
    background: var(--header-blue-hover);

    transform: translateY(-2px);

    box-shadow:
        0 17px 38px rgba(21,87,232,.27);
}

.hero-primary-btn:hover svg {
    transform: translateX(5px);
}

.hero-secondary-btn {
    padding: 0 24px;

    border:
        1px solid rgba(7,17,38,.09);

    background:
        rgba(255,255,255,.52);

    color: var(--header-dark);

    font-weight: 600;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        transform .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.hero-secondary-btn:hover {
    color: var(--header-blue);

    border-color:
        rgba(21,87,232,.20);

    background:
        rgba(255,255,255,.90);

    transform: translateY(-2px);
}


/* =========================================================
   HERO ANIMATION
========================================================= */

.hero-slide .hero-eyebrow,
.hero-slide .hero-title,
.hero-slide .hero-description,
.hero-slide .hero-actions {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.hero-slide.active .hero-eyebrow,
.hero-slide.active .hero-title,
.hero-slide.active .hero-description,
.hero-slide.active .hero-actions {
    opacity: 1;

    transform: translateY(0);
}

.hero-slide.active .hero-eyebrow {
    transition-delay: .14s;
}

.hero-slide.active .hero-title {
    transition-delay: .22s;
}

.hero-slide.active .hero-description {
    transition-delay: .30s;
}

.hero-slide.active .hero-actions {
    transition-delay: .38s;
}


/* =========================================================
   HERO ARROWS
========================================================= */

.hero-arrow {
    position: absolute;

    top: 50%;

    z-index: 30;

    width: 44px;
    height: 44px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(7,17,38,.10);

    border-radius: 50%;

    background:
        rgba(255,255,255,.82);

    color: var(--header-dark);

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow:
        0 8px 25px rgba(7,17,38,.08);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.hero-prev {
    left: 17px;
}

.hero-next {
    right: 17px;
}

.hero-arrow svg {
    width: 18px;
    height: 18px;
}

.hero-arrow:hover {
    color: var(--header-blue);

    background: #fff;

    border-color:
        rgba(21,87,232,.16);
}


/* =========================================================
   HERO PAGINATION
========================================================= */

.hero-pagination {
    position: absolute;

    z-index: 30;

    left: 48px;
    bottom: 42px;

    display: flex;
    align-items: center;

    gap: 8px;
}

.hero-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 100px;

    background:
        rgba(7,17,38,.20);

    cursor: pointer;

    transition:
        width .32s ease,
        background-color .32s ease;
}

.hero-dot.active {
    width: 32px;

    background: var(--header-blue);
}

.hero-counter {
    position: absolute;

    z-index: 30;

    right: 48px;
    bottom: 39px;

    display: flex;
    align-items: center;

    gap: 9px;
}

.hero-current {
    color: var(--header-dark);

    font-size: 12px;
    font-weight: 700;
}

.hero-counter-line {
    width: 25px;
    height: 1px;

    background:
        rgba(7,17,38,.22);
}

.hero-total {
    color: var(--header-muted);

    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   HERO PROGRESS
========================================================= */

.hero-progress {
    position: absolute;

    z-index: 30;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    overflow: hidden;

    background:
        rgba(255,255,255,.20);
}

.hero-progress-bar {
    display: block;

    width: 0;
    height: 100%;

    background: var(--header-blue);
}

.hero-slider.is-playing
.hero-progress-bar {
    animation:
        heroProgress 6s linear forwards;
}

@keyframes heroProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   WHAT WE DO
========================================================= */

.zt-services {
    width: 100%;

    padding: 110px 0 115px;

    background: #f5f7fb;
}

.zt-services-inner {
    width: 88%;

    max-width: 1360px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   WHAT WE DO HEADER
========================================================= */

.zt-services-header {
    width: 100%;

    margin: 0 0 52px;
}

.zt-services-eyebrow {
    margin: 0 0 22px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--header-blue);

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .11em;

    text-transform: uppercase;
}

.zt-services-eyebrow span {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--header-blue);

    box-shadow:
        0 0 0 5px rgba(21,87,232,.08);
}


/* =========================================================
   WHAT WE DO HEADING
========================================================= */

.zt-services-heading-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, .65fr);

    align-items: end;

    gap: 65px;
}

.zt-services-heading-grid h2 {
    max-width: 800px;

    margin: 0;

    color: var(--header-dark);

    font-size:
        clamp(41px,3.7vw,61px);

    font-weight: 500;

    line-height: 1.075;

    letter-spacing: -.045em;
}

.zt-services-heading-grid h2 strong {
    color: var(--header-blue);

    font-weight: 600;
}

.zt-services-heading-grid > p {
    max-width: 440px;

    margin: 0 0 4px;

    color: #64768b;

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.zt-services-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 16px;
}


/* =========================================================
   SLIM SERVICE CARD
========================================================= */

.zt-service-card {
    position: relative;

    min-width: 0;

    padding: 15px 15px 23px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(7,17,38,.075);

    border-radius: 18px;

    background: #f8fbff;

    color: var(--header-dark);

    text-decoration: none;

    transition:
        transform .4s cubic-bezier(.2,.7,.2,1),
        border-color .4s ease,
        box-shadow .4s ease,
        background-color .4s ease;
}

.zt-service-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(21,87,232,.17);

    background: #fff;

    box-shadow:
        0 22px 55px rgba(17,46,80,.085);
}


/* =========================================================
   SERVICE CARD META
========================================================= */

.zt-service-meta {
    min-height: 45px;

    padding: 0 3px 11px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.zt-service-number {
    color: #8799ad;

    font-size: 10px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .10em;
}

.zt-service-arrow {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border:
        1px solid rgba(7,17,38,.09);

    border-radius: 50%;

    background: #fff;

    color: var(--header-dark);

    transition:
        color .3s ease,
        background-color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.zt-service-arrow svg {
    width: 15px;
    height: 15px;
}

.zt-service-card:hover
.zt-service-arrow {
    color: #fff;

    border-color: var(--header-blue);

    background: var(--header-blue);

    transform: rotate(45deg);
}


/* =========================================================
   SERVICE IMAGE
========================================================= */

.zt-service-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 8.7;

    overflow: hidden;

    border-radius: 13px;

    background: #e7eff8;
}

.zt-service-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(7,17,38,.16) 100%
        );
}

.zt-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.zt-service-card:hover
.zt-service-image img {
    transform: scale(1.04);
}

.zt-service-tag {
    position: absolute;

    z-index: 2;

    left: 12px;
    bottom: 12px;

    padding: 7px 10px;

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

    border-radius: 100px;

    background:
        rgba(255,255,255,.88);

    color: #172a42;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .06em;

    text-transform: uppercase;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.zt-service-content {
    padding: 21px 5px 0;
}

.zt-service-content h3 {
    margin: 0 0 10px;

    color: var(--header-dark);

    font-size:
        clamp(19px,1.5vw,23px);

    font-weight: 600;

    line-height: 1.2;

    letter-spacing: -.025em;
}

.zt-service-content p {
    max-width: 360px;

    min-height: 63px;

    margin: 0 0 18px;

    color: #697b90;

    font-size: 13px;

    line-height: 1.65;
}

.zt-service-link {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: var(--header-blue);

    font-size: 11px;
    font-weight: 700;

    line-height: 1;
}

.zt-service-link svg {
    width: 15px;
    height: 15px;

    transition: transform .3s ease;
}

.zt-service-card:hover
.zt-service-link svg {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .zt-services {
        padding:
            95px 0 100px;
    }

    .zt-services-inner {
        width: 94%;
        max-width: none;
    }

    .zt-services-heading-grid {
        grid-template-columns: 1fr;

        gap: 23px;
    }

    .zt-services-heading-grid > p {
        max-width: 600px;
    }

    .zt-services-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .zt-service-card:last-child {
        grid-column: 1 / -1;
    }

    .zt-service-card:last-child
    .zt-service-image {
        aspect-ratio: 2 / 1;
    }

}


/* =========================================================
   HERO TABLET
========================================================= */

@media (max-width: 900px) {

    .page-shell {
        padding-top: 16px;
    }

    .hero-slider {
        height: auto;

        min-height: 860px;

        border-radius: 20px;
    }

    .hero-image,
    .hero-slide-1 .hero-image {
        top: 0;
        right: 0;
        bottom: auto;

        width: 100%;
        height: 55%;
    }

    .hero-image img,
    .hero-slide-1 .hero-image img,
    .hero-slide-1.active .hero-image img {
        position: relative;

        inset: auto;

        width: 100%;
        height: 100%;

        object-fit: cover;

        transform: none;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                #000 45%,
                rgba(0,0,0,.90) 60%,
                rgba(0,0,0,.60) 72%,
                rgba(0,0,0,.25) 84%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                #000 45%,
                rgba(0,0,0,.90) 60%,
                rgba(0,0,0,.60) 72%,
                rgba(0,0,0,.25) 84%,
                transparent 100%
            );
    }

    .hero-inner {
        padding:
            390px 32px 95px;
    }

    .hero-content {
        width: 100%;

        max-width: 620px;
    }

    .hero-title {
        max-width: 600px;

        font-size:
            clamp(44px,7vw,60px);
    }

    .hero-actions {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .hero-pagination {
        left: 32px;
        bottom: 32px;
    }

    .hero-counter {
        right: 32px;
        bottom: 29px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

    :root {
        --page-gutter: 16px;
    }

    .zt-services {
        padding:
            72px 0 80px;
    }

    .zt-services-inner {
        width: 100%;
    }

    .zt-services-header {
        margin-bottom: 38px;
    }

    .zt-services-heading-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .zt-services-heading-grid h2 {
        font-size:
            clamp(36px,10vw,44px);
    }

    .zt-services-heading-grid > p {
        font-size: 13.5px;
    }

    .zt-services-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .zt-service-card:last-child {
        grid-column: auto;
    }

    .zt-service-card {
        padding:
            14px 14px 22px;
    }

    .zt-service-card:last-child
    .zt-service-image,
    .zt-service-image {
        aspect-ratio: 16 / 9;
    }

    .zt-service-content {
        padding:
            20px 4px 0;
    }

    .zt-service-content p {
        min-height: auto;
    }

}


/* =========================================================
   HERO MOBILE
========================================================= */

@media (max-width: 640px) {

    .page-shell {
        padding-top: 12px;
    }

    .hero-slider {
        min-height: 790px;

        border-radius: 18px;
    }

    .hero-image,
    .hero-slide-1 .hero-image {
        height: 44%;
    }

    .hero-inner {
        padding:
            310px 20px 85px;
    }

    .hero-content {
        width: 100%;
        max-width: none;
    }

    .hero-title {
        max-width: 100%;

        font-size:
            clamp(37px,10.5vw,47px);
    }

    .hero-description {
        max-width: 100%;

        font-size: 14px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

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

    .hero-arrow {
        top: 27%;

        width: 39px;
        height: 39px;
    }

    .hero-prev {
        left: 10px;
    }

    .hero-next {
        right: 10px;
    }

    .hero-pagination {
        left: 20px;
        bottom: 24px;
    }

    .hero-counter {
        right: 20px;
        bottom: 21px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    :root {
        --page-gutter: 14px;
    }

    .hero-slider {
        min-height: 760px;
    }

    .hero-title {
        font-size: 35px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;
    }

}