/* ============================================================
   AI2Gi IoT Page
   Custom layout + animation
   Uses existing main.css variables
   ============================================================ */

.ai2gi-iot-page {
    position: relative;
    overflow: hidden;
    background: var(--tj-color-theme-dark);
    color: var(--tj-color-heading-primary);
}

.ai2gi-iot-red {
    color: var(--tj-color-theme-primary);
}


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

.ai2gi-iot-hero {
    position: relative;
    min-height: 860px;
    display: flex;
    align-items: center;
    padding: 130px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(1, 1, 123, .22),
            transparent 30%
        ),
        var(--tj-color-theme-dark);
}

.ai2gi-iot-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );
    background-size: 75px 75px;
    pointer-events: none;
}

.ai2gi-iot-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

.ai2gi-iot-hero-glow-one {
    width: 420px;
    height: 420px;
    top: -130px;
    right: 4%;
    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.15),
            transparent 70%
        );
}

.ai2gi-iot-hero-glow-two {
    width: 350px;
    height: 350px;
    left: -120px;
    bottom: -100px;
    background:
        radial-gradient(
            circle,
            rgba(1,1,123,.22),
            transparent 70%
        );
}

.ai2gi-iot-hero-content {
    position: relative;
    z-index: 3;
}

.ai2gi-iot-hero-title {
    max-width: 760px;
    margin: 15px 0 0;
    color: var(--tj-color-heading-primary);
    font-family: var(--tj-ff-heading);
    font-size: clamp(52px, 6.4vw, 96px);
    font-weight: var(--tj-fw-sbold);
    line-height: .94;
    letter-spacing: -.065em;
}

.ai2gi-iot-hero-title span {
    color: var(--tj-color-theme-primary);
}

.ai2gi-iot-hero-description {
    max-width: 650px;
    margin-top: 28px;
    color: var(--tj-color-text-body);
    font-size: 17px;
    line-height: 1.85;
}

.ai2gi-iot-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 36px;
}

.ai2gi-iot-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tj-color-common-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--tj-fw-medium);
    transition: .3s ease;
}

.ai2gi-iot-link-btn i {
    color: var(--tj-color-theme-primary);
    transition: transform .3s ease;
}

.ai2gi-iot-link-btn:hover {
    color: var(--tj-color-theme-primary);
}

.ai2gi-iot-link-btn:hover i {
    transform: translateY(4px);
}


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

.ai2gi-iot-hero-visual {
    position: relative;
    width: 100%;
    min-height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai2gi-iot-hero-image {
    position: relative;
    z-index: 4;
    width: min(430px, 80%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 34px;
    background: var(--tj-color-theme-bg);
    box-shadow:
        0 35px 100px rgba(0,0,0,.35);
    transform: rotate(3deg);
    animation: ai2giIotHeroImage 7s ease-in-out infinite;
}

.ai2gi-iot-hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(8,4,30,.60),
            transparent 40%
        );
    pointer-events: none;
}

.ai2gi-iot-hero-image img {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
}

.ai2gi-iot-image-label {
    position: absolute;
    z-index: 3;
    left: 22px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: var(--tj-color-common-white);
    background: rgba(24,19,59,.84);
    backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: var(--tj-fw-medium);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tj-color-theme-primary);
    box-shadow: 0 0 0 6px rgba(207,2,31,.10);
    animation: ai2giIotPulse 2s ease-in-out infinite;
}

@keyframes ai2giIotHeroImage {
    0%, 100% {
        transform: rotate(3deg) translateY(0);
    }

    50% {
        transform: rotate(1.5deg) translateY(-15px);
    }
}

@keyframes ai2giIotPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}


/* ============================================================
   ORBITS
   ============================================================ */

.ai2gi-iot-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}

.ai2gi-iot-orbit-one {
    width: 520px;
    height: 520px;
    animation: ai2giIotOrbit 18s linear infinite;
}

.ai2gi-iot-orbit-two {
    width: 390px;
    height: 390px;
    border-color: rgba(207,2,31,.15);
    animation: ai2giIotOrbitReverse 14s linear infinite;
}

@keyframes ai2giIotOrbit {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ai2giIotOrbitReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}


/* ============================================================
   FLOATING INFO CARDS
   ============================================================ */

.ai2gi-iot-floating-card {
    position: absolute;
    z-index: 6;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(24,19,59,.90);
    backdrop-filter: blur(14px);
    box-shadow: 0 22px 60px rgba(0,0,0,.30);
}

.ai2gi-iot-floating-one {
    top: 92px;
    left: 0;
    animation: ai2giIotFloatOne 5s ease-in-out infinite;
}

.ai2gi-iot-floating-two {
    top: 200px;
    right: 0;
    animation: ai2giIotFloatTwo 6s ease-in-out infinite;
}

.ai2gi-iot-floating-three {
    bottom: 78px;
    left: 5%;
    animation: ai2giIotFloatThree 5.5s ease-in-out infinite;
}

.ai2gi-iot-mini-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--tj-color-theme-primary);
    background: rgba(207,2,31,.07);
    border: 1px solid rgba(207,2,31,.15);
}

.ai2gi-iot-floating-card strong {
    display: block;
    color: var(--tj-color-common-white);
    font-size: 12px;
}

.ai2gi-iot-floating-card span {
    display: block;
    margin-top: 3px;
    color: var(--tj-color-text-body);
    font-size: 10px;
}

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

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

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

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

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

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


/* ============================================================
   MARQUEE
   ============================================================ */

.ai2gi-iot-marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: var(--tj-color-theme-bg);
}

.ai2gi-iot-marquee .marquee-slider {
    padding: 0;
}

.ai2gi-iot-marquee .marquee-item {
    padding: 23px 10px;
}

.ai2gi-iot-marquee .marquee-text {
    white-space: nowrap;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: clamp(20px, 2.5vw, 34px);
    letter-spacing: -.025em;
}

.ai2gi-iot-marquee .marquee-icon i {
    color: var(--tj-color-theme-primary);
}


/* ============================================================
   INTRO
   ============================================================ */

.ai2gi-iot-intro {
    background: var(--tj-color-theme-dark);
}

.ai2gi-iot-intro .sec-title {
    max-width: 850px;
}

.ai2gi-iot-intro-text {
    max-width: 540px;
    margin-left: auto;
    color: var(--tj-color-text-body);
    font-size: 16px;
    line-height: 1.9;
}


/* ============================================================
   CAPABILITIES
   ============================================================ */

.ai2gi-iot-capabilities {
    position: relative;
    padding: 125px 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(1,1,123,.13),
            transparent 27%
        ),
        var(--tj-color-theme-bg);
}

.ai2gi-iot-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px;
}

.ai2gi-iot-heading-row .sec-title {
    margin-bottom: 0;
}

.ai2gi-iot-heading-description {
    max-width: 490px;
    margin-bottom: 3px;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}

.ai2gi-iot-capability {
    position: relative;
    height: 100%;
    min-height: 290px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(35,29,75,.96),
            rgba(18,13,43,.98)
        );
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.ai2gi-iot-capability::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -130px;
    right: -100px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.14),
            transparent 70%
        );
}

.ai2gi-iot-capability:hover {
    transform: translateY(-9px);
    border-color: rgba(207,2,31,.24);
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
}

.ai2gi-iot-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30px;
}

.ai2gi-iot-card-number {
    color: rgba(255,255,255,.20);
    font-family: var(--tj-ff-heading);
    font-size: 14px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-iot-card-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(207,2,31,.16);
    border-radius: 18px;
    color: var(--tj-color-theme-primary);
    background: rgba(207,2,31,.06);
    font-size: 22px;
}

.ai2gi-iot-capability .title {
    margin-bottom: 14px;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 23px;
}

.ai2gi-iot-capability .desc {
    margin: 0;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}

.ai2gi-iot-card-line {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 28px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,.45),
            transparent
        );
}


/* ============================================================
   ARCHITECTURE
   ============================================================ */

.ai2gi-iot-architecture {
    background:
        linear-gradient(
            180deg,
            var(--tj-color-theme-dark),
            var(--tj-color-theme-bg)
        );
}

.ai2gi-iot-architecture .sec-title {
    max-width: 650px;
}

.ai2gi-iot-architecture .desc {
    max-width: 550px;
    color: var(--tj-color-text-body);
    line-height: 1.85;
}

.ai2gi-iot-flow {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 40px 20px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 30px;
    background:
        radial-gradient(
            circle at center,
            rgba(1,1,123,.14),
            transparent 60%
        ),
        rgba(24,19,59,.65);
}

.ai2gi-iot-flow-track {
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.65),
            rgba(1,1,123,.65),
            transparent
        );
}

.ai2gi-iot-flow-item {
    position: relative;
    z-index: 2;
    width: 105px;
    min-width: 105px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ai2gi-iot-flow-icon {
    width: 92px;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    color: var(--tj-color-theme-primary);
    background: var(--tj-color-theme-bg);
    box-shadow: 0 18px 45px rgba(0,0,0,.25);
    transition: .35s ease;
}

.ai2gi-iot-flow-item:hover .ai2gi-iot-flow-icon {
    transform: scale(1.07);
    border-color: rgba(207,2,31,.30);
}

.ai2gi-iot-flow-item strong {
    display: block;
    color: var(--tj-color-common-white);
    font-size: 13px;
}

.ai2gi-iot-flow-item span {
    margin-top: 4px;
    color: var(--tj-color-text-body);
    font-size: 10px;
}


/* ============================================================
   INDUSTRIES
   ============================================================ */

.ai2gi-iot-industries {
    padding: 120px 0;
    background: var(--tj-color-theme-dark);
}

.ai2gi-iot-industry-item {
    position: relative;
    min-height: 370px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.07);
    background: var(--tj-color-theme-bg);
}

.ai2gi-iot-industry-image {
    position: absolute;
    inset: 0;
}

.ai2gi-iot-industry-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8,4,30,.95),
            rgba(8,4,30,.35),
            rgba(8,4,30,.15)
        );
}

.ai2gi-iot-industry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.ai2gi-iot-industry-item:hover .ai2gi-iot-industry-image img {
    transform: scale(1.06);
}

.ai2gi-iot-industry-content {
    position: relative;
    z-index: 2;
    width: 58%;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
}

.ai2gi-iot-industry-content > span {
    display: block;
    margin-bottom: 12px;
    color: var(--tj-color-theme-primary);
    font-size: 12px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-iot-industry-content h3 {
    margin-bottom: 12px;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 29px;
}

.ai2gi-iot-industry-content p {
    margin: 0;
    color: var(--tj-color-white-2);
    line-height: 1.75;
}


/* ============================================================
   PROJECT SECTION
   ============================================================ */

.ai2gi-iot-project-section {
    background: var(--tj-color-theme-bg);
}

.ai2gi-iot-project-section .project-item {
    transition: transform .35s ease;
}

.ai2gi-iot-project-section .project-item:hover {
    transform: translateY(-7px);
}


/* ============================================================
   PROCESS
   ============================================================ */

.ai2gi-iot-process {
    position: relative;
    background: var(--tj-color-theme-dark);
}

.ai2gi-iot-process-line {
    width: 100%;
    height: 1px;
    margin: 55px 0 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.35),
            rgba(1,1,123,.35),
            transparent
        );
}

.ai2gi-iot-process-item {
    position: relative;
    height: 100%;
    padding: 30px;
    border-left: 1px solid rgba(255,255,255,.07);
}

.ai2gi-iot-process-item:first-child {
    border-left: 0;
}

.ai2gi-iot-process-item .step-number {
    position: absolute;
    top: -15px;
    right: 20px;
    color: rgba(255,255,255,.10);
    font-family: var(--tj-ff-heading);
    font-size: 46px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-iot-process-item .process-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 16px;
    color: var(--tj-color-theme-primary);
    background: rgba(207,2,31,.07);
    border: 1px solid rgba(207,2,31,.15);
}

.ai2gi-iot-process-item h4 {
    margin-bottom: 12px;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 21px;
}

.ai2gi-iot-process-item p {
    margin: 0;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}


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

.ai2gi-iot-faq {
    background: var(--tj-color-theme-bg);
}

.ai2gi-iot-faq .content-wrap {
    padding-right: 30px;
}

.ai2gi-iot-faq .desc {
    margin: 20px 0 30px;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.ai2gi-iot-final-cta {
    padding: 100px 0;
    background: var(--tj-color-theme-dark);
}

.ai2gi-iot-final-box {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 70px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 36px;
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(207,2,31,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #26125d,
            #13062f
        );
}

.ai2gi-iot-final-content {
    position: relative;
    z-index: 4;
    max-width: 760px;
}

.ai2gi-iot-final-box .sec-title {
    margin: 15px 0 20px;
}

.ai2gi-iot-final-box p {
    max-width: 650px;
    margin: 0 0 30px;
    color: var(--tj-color-text-body);
    line-height: 1.85;
}

.ai2gi-iot-final-visual {
    position: absolute;
    top: 50%;
    right: 70px;
    width: 310px;
    height: 310px;
    transform: translateY(-50%);
}

.ai2gi-iot-final-ring {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.ai2gi-iot-final-ring.ring-one {
    animation: ai2giFinalRing 11s linear infinite;
}

.ai2gi-iot-final-ring.ring-two {
    inset: 35px;
    border-color: rgba(207,2,31,.22);
    animation: ai2giFinalRingReverse 8s linear infinite;
}

.ai2gi-iot-final-ring.ring-three {
    inset: 70px;
    border-color: rgba(1,1,123,.35);
}

.ai2gi-iot-final-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    color: var(--tj-color-common-white);
    background: var(--tj-color-theme-primary);
    box-shadow: 0 20px 60px rgba(207,2,31,.20);
    font-family: var(--tj-ff-heading);
    font-size: 18px;
    font-weight: var(--tj-fw-bold);
}

@keyframes ai2giFinalRing {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes ai2giFinalRingReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {

    .ai2gi-iot-hero-title {
        font-size: clamp(48px, 6vw, 78px);
    }

    .ai2gi-iot-floating-one {
        left: -5px;
    }

    .ai2gi-iot-floating-two {
        right: -5px;
    }

    .ai2gi-iot-final-visual {
        right: 30px;
    }

}


@media (max-width: 991px) {

    .ai2gi-iot-hero {
        min-height: auto;
        padding: 110px 0 80px;
    }

    .ai2gi-iot-hero-visual {
        min-height: 560px;
        margin-top: 60px;
    }

    .ai2gi-iot-heading-row {
        display: block;
    }

    .ai2gi-iot-heading-description {
        margin-top: 22px;
    }

    .ai2gi-iot-flow {
        margin-top: 45px;
    }

    .ai2gi-iot-industry-content {
        width: 70%;
    }

    .ai2gi-iot-process-line {
        display: none;
    }

    .ai2gi-iot-process-item {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.07);
    }

    .ai2gi-iot-final-box {
        min-height: auto;
        padding: 55px 40px;
    }

    .ai2gi-iot-final-visual {
        position: relative;
        top: auto;
        right: auto;
        margin: 50px auto 0;
        transform: none;
    }

}


@media (max-width: 767px) {

    .ai2gi-iot-hero-title {
        font-size: 50px;
    }

    .ai2gi-iot-hero-description {
        font-size: 15px;
    }

    .ai2gi-iot-hero-image {
        width: 310px;
    }

    .ai2gi-iot-hero-image img {
        height: 430px;
    }

    .ai2gi-iot-orbit-one {
        width: 360px;
        height: 360px;
    }

    .ai2gi-iot-orbit-two {
        width: 290px;
        height: 290px;
    }

    .ai2gi-iot-floating-card {
        min-width: 125px;
        padding: 11px;
    }

    .ai2gi-iot-floating-one {
        top: 55px;
        left: 0;
    }

    .ai2gi-iot-floating-two {
        top: 160px;
        right: 0;
    }

    .ai2gi-iot-floating-three {
        bottom: 45px;
        left: 0;
    }

    .ai2gi-iot-flow {
        min-height: auto;
        flex-wrap: wrap;
        justify-content: center;
        gap: 28px;
    }

    .ai2gi-iot-flow-track {
        display: none;
    }

    .ai2gi-iot-industry-item {
        min-height: 330px;
    }

    .ai2gi-iot-industry-content {
        width: 100%;
        min-height: 330px;
        padding: 25px;
        justify-content: flex-end;
    }

    .ai2gi-iot-final-visual {
        width: 240px;
        height: 240px;
    }

}


@media (max-width: 575px) {

    .ai2gi-iot-hero-title {
        font-size: 43px;
    }

    .ai2gi-iot-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .ai2gi-iot-hero-visual {
        min-height: 440px;
    }

    .ai2gi-iot-hero-image {
        width: 270px;
    }

    .ai2gi-iot-hero-image img {
        height: 380px;
    }

    .ai2gi-iot-floating-card {
        transform: scale(.9);
    }

    .ai2gi-iot-capability {
        min-height: 255px;
        padding: 27px;
    }

    .ai2gi-iot-final-box {
        padding: 40px 25px;
        border-radius: 26px;
    }

}


/* ============================================================
   AI2Gi MACHINE LEARNING PAGE
   Uses existing main.css theme variables
   ============================================================ */

.ai2gi-ml-page {
    position: relative;
    overflow: hidden;
    color: var(--tj-color-heading-primary);
    background: var(--tj-color-theme-dark);
}

.ai2gi-ml-red {
    color: var(--tj-color-theme-primary);
}


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

.ai2gi-ml-hero {
    position: relative;
    min-height: 820px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 125px 0 100px;

    background:
        radial-gradient(
            circle at 75% 45%,
            rgba(1,1,123,.18),
            transparent 28%
        ),
        var(--tj-color-theme-dark);
}

.ai2gi-ml-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 70px 70px;
}

.ai2gi-ml-hero-content {
    position: relative;
    z-index: 4;
}

.ai2gi-ml-hero-title {
    max-width: 800px;
    margin: 16px 0 0;

    color: var(--tj-color-heading-primary);
    font-family: var(--tj-ff-heading);

    font-size: clamp(52px, 6vw, 92px);
    font-weight: var(--tj-fw-sbold);

    line-height: .94;
    letter-spacing: -.065em;
}

.ai2gi-ml-hero-title span {
    color: var(--tj-color-theme-primary);
}

.ai2gi-ml-hero-description {
    max-width: 650px;
    margin-top: 28px;

    color: var(--tj-color-text-body);

    font-size: 17px;
    line-height: 1.85;
}

.ai2gi-ml-hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;

    margin-top: 35px;
}

.ai2gi-ml-scroll-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: var(--tj-color-common-white);

    text-decoration: none;

    font-size: 13px;
    font-weight: var(--tj-fw-medium);

    transition: .3s ease;
}

.ai2gi-ml-scroll-link i {
    color: var(--tj-color-theme-primary);
    transition: transform .3s ease;
}

.ai2gi-ml-scroll-link:hover {
    color: var(--tj-color-theme-primary);
}

.ai2gi-ml-scroll-link:hover i {
    transform: translateY(4px);
}


/* ============================================================
   HERO DATA VISUAL
   ============================================================ */

.ai2gi-ml-visual {
    position: relative;

    min-height: 580px;

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

.ai2gi-ml-chart {
    position: relative;

    width: 470px;
    height: 390px;

    overflow: hidden;

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

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(27,22,65,.98),
            rgba(15,10,39,.98)
        );

    box-shadow:
        0 40px 100px
        rgba(0,0,0,.34);
}

.chart-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}

.chart-line {
    position: absolute;

    left: 8%;
    right: 8%;
    top: 50%;

    height: 120px;

    border-top:
        2px solid
        var(--tj-color-theme-primary);

    transform:
        rotate(-7deg)
        skewY(-18deg);

    filter:
        drop-shadow(
            0 0 12px
            rgba(207,2,31,.32)
        );
}

.chart-line::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 45px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
}

.chart-point {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        var(--tj-color-theme-primary);

    box-shadow:
        0 0 0 7px
        rgba(207,2,31,.08),
        0 0 18px
        rgba(207,2,31,.30);

    animation:
        ai2giMlPointPulse
        2.5s
        ease-in-out
        infinite;
}

.point-one {
    left: 12%;
    top: 63%;
}

.point-two {
    left: 29%;
    top: 55%;
    animation-delay: .25s;
}

.point-three {
    left: 48%;
    top: 57%;
    animation-delay: .5s;
}

.point-four {
    left: 67%;
    top: 39%;
    animation-delay: .75s;
}

.point-five {
    left: 84%;
    top: 28%;
    animation-delay: 1s;
}

@keyframes ai2giMlPointPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }
}


/* ============================================================
   CHART CENTER
   ============================================================ */

.chart-center {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 130px;
    height: 130px;

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

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(24,19,59,.95);

    box-shadow:
        0 15px 60px
        rgba(0,0,0,.25);
}

.chart-center-ring {
    position: absolute;

    inset: -12px;

    border:
        1px solid
        rgba(207,2,31,.27);

    border-radius: 50%;

    animation:
        ai2giMlRing
        4s
        linear
        infinite;
}

@keyframes ai2giMlRing {

    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.chart-center strong {
    position: relative;
    z-index: 2;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        28px;
}


/* ============================================================
   DATA CARDS
   ============================================================ */

.ai2gi-ml-data-card {
    position: absolute;

    z-index: 5;

    width: 145px;

    padding: 16px 17px;

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

    border-radius:
        18px;

    background:
        rgba(24,19,59,.90);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.25);
}

.ai2gi-ml-data-card .data-label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--tj-color-text-body);

    font-size:
        9px;

    letter-spacing:
        .14em;
}

.ai2gi-ml-data-card strong {
    color:
        var(--tj-color-common-white);

    font-size:
        13px;
}

.data-card-one {
    top: 65px;
    left: 2%;
    animation:
        ai2giMlFloatOne
        5s
        ease-in-out
        infinite;
}

.data-card-two {
    top: 15px;
    right: 4%;
    animation:
        ai2giMlFloatTwo
        5.5s
        ease-in-out
        infinite;
}

.data-card-three {
    bottom: 55px;
    right: 8%;
    animation:
        ai2giMlFloatThree
        6s
        ease-in-out
        infinite;
}

@keyframes ai2giMlFloatOne {

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

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

@keyframes ai2giMlFloatTwo {

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

    50% {
        transform: translateY(12px);
    }
}

@keyframes ai2giMlFloatThree {

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

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


/* ============================================================
   PARTICLES
   ============================================================ */

.ai2gi-ml-hero-particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--tj-color-theme-primary);

    box-shadow:
        0 0 18px
        rgba(207,2,31,.45);

    animation:
        ai2giMlParticle
        7s
        ease-in-out
        infinite;
}

.particle-one {
    top: 19%;
    left: 49%;
}

.particle-two {
    top: 35%;
    right: 7%;
    animation-delay: 1.5s;
}

.particle-three {
    bottom: 20%;
    right: 32%;
    animation-delay: 3s;
}

@keyframes ai2giMlParticle {

    0%,
    100% {
        transform:
            translate(0,0)
            scale(1);

        opacity: .3;
    }

    50% {
        transform:
            translate(22px,-18px)
            scale(1.4);

        opacity: 1;
    }
}


/* ============================================================
   MARQUEE
   ============================================================ */

.ai2gi-ml-marquee {
    overflow:
        hidden;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    background:
        var(--tj-color-theme-bg);
}

.ai2gi-ml-marquee .marquee-item {
    padding:
        22px 10px;
}

.ai2gi-ml-marquee .marquee-text {
    white-space:
        nowrap;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

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

    letter-spacing:
        -.025em;
}

.ai2gi-ml-marquee .marquee-icon i {
    color:
        var(--tj-color-theme-primary);
}


/* ============================================================
   INTRO
   ============================================================ */

.ai2gi-ml-intro {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-ml-intro .sec-title {
    max-width:
        850px;
}

.ai2gi-ml-intro-text {
    max-width:
        520px;

    margin-left:
        auto;

    color:
        var(--tj-color-text-body);

    font-size:
        16px;

    line-height:
        1.9;
}


/* ============================================================
   CAPABILITIES
   ============================================================ */

.ai2gi-ml-capabilities {
    padding:
        120px 0;

    background:
        var(--tj-color-theme-bg);
}

.ai2gi-ml-capabilities .sec-heading {
    max-width:
        820px;

    margin-inline:
        auto;
}

.ai2gi-ml-capabilities .sec-title {
    margin-bottom:
        16px;
}

.ai2gi-ml-capabilities .sec-heading .desc {
    max-width:
        650px;

    margin-inline:
        auto;

    color:
        var(--tj-color-text-body);

    line-height:
        1.8;
}

.ai2gi-ml-capability {
    position:
        relative;

    height:
        100%;

    min-height:
        280px;

    padding:
        32px;

    overflow:
        hidden;

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

    border-radius:
        26px;

    background:
        linear-gradient(
            145deg,
            rgba(32,26,70,.96),
            rgba(17,12,43,.98)
        );

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.ai2gi-ml-capability::before {
    content:
        "";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    top:
        -100px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.13),
            transparent 70%
        );
}

.ai2gi-ml-capability:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(207,2,31,.25);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.28);
}

.capability-number {
    position:
        absolute;

    top:
        22px;

    right:
        27px;

    color:
        rgba(255,255,255,.10);

    font-family:
        var(--tj-ff-heading);

    font-size:
        42px;

    font-weight:
        var(--tj-fw-bold);
}

.capability-icon {
    width:
        61px;

    height:
        61px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(207,2,31,.16);

    border-radius:
        18px;

    color:
        var(--tj-color-theme-primary);

    background:
        rgba(207,2,31,.06);

    font-size:
        22px;
}

.ai2gi-ml-capability .title {
    margin-bottom:
        13px;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        22px;
}

.ai2gi-ml-capability .desc {
    margin:
        0;

    color:
        var(--tj-color-text-body);

    line-height:
        1.8;
}


/* ============================================================
   PIPELINE
   ============================================================ */

.ai2gi-ml-pipeline {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-ml-pipeline .sec-title {
    max-width:
        620px;
}

.ai2gi-ml-pipeline .desc {
    max-width:
        550px;

    color:
        var(--tj-color-text-body);

    line-height:
        1.8;
}

.ai2gi-ml-pipeline-box {
    position:
        relative;

    min-height:
        280px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        35px 20px;

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

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(24,19,59,.92),
            rgba(13,9,37,.98)
        );
}

.ai2gi-ml-pipeline-line {
    position:
        absolute;

    top:
        50%;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.55),
            rgba(1,1,123,.65),
            transparent
        );
}

.ai2gi-ml-pipeline-node {
    position:
        relative;

    z-index:
        3;

    width:
        92px;

    text-align:
        center;
}

.ai2gi-ml-pipeline-node span {
    width:
        78px;

    height:
        78px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 13px;

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

    border-radius:
        50%;

    color:
        var(--tj-color-theme-primary);

    background:
        var(--tj-color-theme-bg);

    font-family:
        var(--tj-ff-heading);

    font-size:
        13px;

    font-weight:
        var(--tj-fw-bold);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.22);

    transition:
        .35s ease;
}

.ai2gi-ml-pipeline-node:hover span {
    transform:
        scale(1.08);

    border-color:
        rgba(207,2,31,.28);
}

.ai2gi-ml-pipeline-node strong {
    display:
        block;

    color:
        var(--tj-color-common-white);

    font-size:
        12px;
}

.ai2gi-ml-pipeline-node small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--tj-color-text-body);

    font-size:
        9px;
}


/* ============================================================
   USE CASES
   ============================================================ */

.ai2gi-ml-usecases {
    background:
        var(--tj-color-theme-bg);
}

.ai2gi-ml-usecases .project-item {
    transition:
        transform .35s ease;
}

.ai2gi-ml-usecases .project-item:hover {
    transform:
        translateY(-7px);
}


/* ============================================================
   PROCESS
   ============================================================ */

.ai2gi-ml-process {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-ml-process .h5-process-wrapper {
    margin-top:
        40px;
}


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

.ai2gi-ml-faq {
    background:
        var(--tj-color-theme-bg);
}

.ai2gi-ml-faq .content-wrap {
    padding-right:
        25px;
}

.ai2gi-ml-faq .desc {
    color:
        var(--tj-color-text-body);

    line-height:
        1.8;
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.ai2gi-ml-final-cta {
    padding:
        100px 0;

    background:
        var(--tj-color-theme-dark);
}

.ai2gi-ml-final-box {
    position:
        relative;

    min-height:
        440px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        70px;

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

    border-radius:
        36px;

    background:
        linear-gradient(
            135deg,
            #26125e,
            #12062d
        );
}

.ai2gi-ml-final-content {
    position:
        relative;

    z-index:
        5;

    max-width:
        740px;
}

.ai2gi-ml-final-box .sec-title {
    max-width:
        700px;

    margin:
        17px 0 20px;
}

.ai2gi-ml-final-box p {
    max-width:
        620px;

    margin:
        0 0 30px;

    color:
        var(--tj-color-text-body);

    line-height:
        1.85;
}


/* ============================================================
   FINAL VISUAL
   ============================================================ */

.ai2gi-ml-final-visual {
    position:
        absolute;

    top:
        50%;

    right:
        75px;

    width:
        280px;

    height:
        280px;

    transform:
        translateY(-50%);
}

.final-orbit {
    position:
        absolute;

    inset:
        0;

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

    border-radius:
        50%;
}

.final-orbit-one {
    animation:
        ai2giMlOrbit
        12s
        linear
        infinite;
}

.final-orbit-two {
    inset:
        38px;

    border-color:
        rgba(207,2,31,.18);

    animation:
        ai2giMlOrbitReverse
        8s
        linear
        infinite;
}

.final-core {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        100px;

    height:
        100px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%,-50%);

    border-radius:
        50%;

    background:
        rgba(207,2,31,.10);

    border:
        1px solid
        rgba(207,2,31,.30);
}

.final-core-inner {
    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    color:
        var(--tj-color-common-white);

    background:
        var(--tj-color-theme-primary);

    font-family:
        var(--tj-ff-heading);

    font-size:
        17px;

    font-weight:
        var(--tj-fw-bold);

    box-shadow:
        0 15px 45px
        rgba(207,2,31,.20);
}

@keyframes ai2giMlOrbit {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes ai2giMlOrbitReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0);
    }

}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {

    .ai2gi-ml-hero-title {
        font-size:
            clamp(48px, 6vw, 78px);
    }

    .ai2gi-ml-final-visual {
        right:
            30px;
    }

}


@media (max-width: 991px) {

    .ai2gi-ml-hero {
        min-height:
            auto;

        padding:
            110px 0 80px;
    }

    .ai2gi-ml-visual {
        min-height:
            520px;

        margin-top:
            50px;
    }

    .ai2gi-ml-intro-text {
        margin-top:
            25px;

        margin-left:
            0;
    }

    .ai2gi-ml-pipeline-box {
        margin-top:
            45px;
    }

    .ai2gi-ml-final-box {
        padding:
            50px 40px;
    }

    .ai2gi-ml-final-visual {
        position:
            relative;

        top:
            auto;

        right:
            auto;

        margin:
            50px auto 0;

        transform:
            none;
    }

}


@media (max-width: 767px) {

    .ai2gi-ml-hero-title {
        font-size:
            49px;
    }

    .ai2gi-ml-chart {
        width:
            400px;

        height:
            340px;
    }

    .ai2gi-ml-pipeline-box {
        flex-wrap:
            wrap;

        justify-content:
            center;

        gap:
            25px;
    }

    .ai2gi-ml-pipeline-line {
        display:
            none;
    }

}


@media (max-width: 575px) {

    .ai2gi-ml-hero-title {
        font-size:
            42px;
    }

    .ai2gi-ml-hero-description {
        font-size:
            15px;
    }

    .ai2gi-ml-visual {
        min-height:
            400px;
    }

    .ai2gi-ml-chart {
        width:
            290px;

        height:
            280px;

        border-radius:
            24px;
    }

    .chart-center {
        width:
            95px;

        height:
            95px;
    }

    .chart-center strong {
        font-size:
            22px;
    }

    .ai2gi-ml-data-card {
        width:
            115px;

        padding:
            11px;
    }

    .data-card-one {
        left:
            -2px;

        top:
            40px;
    }

    .data-card-two {
        right:
            -2px;

        top:
            25px;
    }

    .data-card-three {
        right:
            0;

        bottom:
            25px;
    }

    .ai2gi-ml-capability {
        min-height:
            auto;

        padding:
            27px;
    }

    .ai2gi-ml-final-box {
        padding:
            40px 25px;

        border-radius:
            26px;
    }

    .ai2gi-ml-final-visual {
        width:
            220px;

        height:
            220px;
    }

}


/* ============================================================
   AI2Gi SOFTWARE DEVELOPMENT V2
   Unique software-focused visual system
   Uses existing main.css variables
   ============================================================ */

.ai2gi-software-v2 {
    position: relative;
    overflow: hidden;
    color: var(--tj-color-heading-primary);
    background: var(--tj-color-theme-dark);
}

.ai2gi-software-v2 .sec-title {
    color: var(--tj-color-heading-primary);
}

.ai2gi-sw2-hero {
    position: relative;
    min-height: 820px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 125px 0 100px;
    background:
        radial-gradient(
            circle at 82% 48%,
            rgba(1,1,123,.20),
            transparent 28%
        ),
        var(--tj-color-theme-dark);
}

.ai2gi-sw2-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image: linear-gradient(
        to bottom,
        black,
        transparent
    );
}

.ai2gi-sw2-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
}

.ai2gi-sw2-orb-left {
    width: 340px;
    height: 340px;
    left: -140px;
    bottom: -100px;
    background:
        radial-gradient(
            circle,
            rgba(1,1,123,.22),
            transparent 70%
        );
}

.ai2gi-sw2-orb-right {
    width: 430px;
    height: 430px;
    right: -160px;
    top: -130px;
    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.12),
            transparent 70%
        );
}

.ai2gi-sw2-hero-copy {
    position: relative;
    z-index: 3;
}

.ai2gi-sw2-hero-title {
    max-width: 760px;
    margin: 15px 0 0;
    color: var(--tj-color-heading-primary);
    font-family: var(--tj-ff-heading);
    font-size: clamp(52px, 6vw, 92px);
    font-weight: var(--tj-fw-sbold);
    line-height: .94;
    letter-spacing: -.065em;
}

.ai2gi-sw2-hero-title span {
    color: var(--tj-color-theme-primary);
}

.ai2gi-sw2-hero-text {
    max-width: 650px;
    margin-top: 28px;
    color: var(--tj-color-text-body);
    font-size: 17px;
    line-height: 1.85;
}

.ai2gi-sw2-hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 35px;
}

.ai2gi-sw2-watch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--tj-color-common-white);
    text-decoration: none;
    font-size: 13px;
    transition: .3s ease;
}

.ai2gi-sw2-watch:hover {
    color: var(--tj-color-theme-primary);
}

.watch-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    color: var(--tj-color-theme-primary);
    background: rgba(255,255,255,.02);
}


/* ============================================================
   CODE STAGE
   ============================================================ */

.ai2gi-sw2-code-stage {
    position: relative;
    min-height: 590px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai2gi-sw2-code-window {
    position: relative;
    z-index: 5;
    width: min(470px, 90%);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 26px;
    background:
        linear-gradient(
            145deg,
            rgba(33,28,71,.98),
            rgba(13,9,35,.99)
        );
    box-shadow:
        0 40px 120px rgba(0,0,0,.38);
    transform: rotate(-3deg);
    animation: ai2giSw2CodeFloat 7s ease-in-out infinite;
}

@keyframes ai2giSw2CodeFloat {
    0%,100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-1.2deg) translateY(-12px);
    }
}

.ai2gi-sw2-window-head {
    height: 54px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.15);
}

.ai2gi-sw2-window-dots {
    display: flex;
    gap: 6px;
}

.ai2gi-sw2-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
}

.ai2gi-sw2-window-title {
    color: var(--tj-color-text-body);
    font-size: 9px;
    letter-spacing: .08em;
}

.ai2gi-sw2-code {
    position: relative;
    min-height: 315px;
    padding: 30px 24px;
}

.ai2gi-sw2-code-row {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 39px;
    white-space: nowrap;
    color: rgba(255,255,255,.72);
    font-family: monospace;
    font-size: 12px;
}

.code-index {
    width: 25px;
    color: rgba(255,255,255,.18);
}

.code-purple {
    color: #d694ff;
}

.code-white {
    color: #ffffff;
}

.code-red {
    color: var(--tj-color-theme-primary);
}

.code-grey {
    color: rgba(255,255,255,.27);
}

.ai2gi-sw2-code-row.muted {
    margin-top: 4px;
}

.ai2gi-sw2-caret {
    display: block;
    width: 2px;
    height: 18px;
    margin: 10px 0 0 177px;
    background: var(--tj-color-theme-primary);
    animation: ai2giSw2Caret 1s steps(1) infinite;
}

@keyframes ai2giSw2Caret {
    50% { opacity: 0; }
}

.ai2gi-sw2-terminal {
    min-height: 53px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    border-top: 1px solid rgba(255,255,255,.06);
    color: var(--tj-color-text-body);
    font-family: monospace;
    font-size: 9px;
}

.ai2gi-sw2-terminal strong {
    margin-left: auto;
    color: rgba(255,255,255,.60);
    font-size: 9px;
}

.terminal-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tj-color-theme-primary);
    box-shadow: 0 0 12px rgba(207,2,31,.35);
    animation: ai2giSw2Status 2s ease-in-out infinite;
}

@keyframes ai2giSw2Status {
    50% { opacity: .3; }
}

.ai2gi-sw2-bracket {
    position: absolute;
    z-index: 2;
    color: rgba(255,255,255,.14);
    font-family: monospace;
    font-size: 90px;
    line-height: 1;
}

.bracket-top {
    left: 4%;
    top: 20%;
}

.bracket-bottom {
    right: 3%;
    bottom: 17%;
}

.ai2gi-sw2-badge {
    position: absolute;
    z-index: 8;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(24,19,59,.92);
    backdrop-filter: blur(14px);
    color: var(--tj-color-common-white);
    font-size: 10px;
    font-weight: var(--tj-fw-medium);
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.badge-ui {
    top: 95px;
    left: 1%;
    animation: ai2giSw2BadgeOne 5s ease-in-out infinite;
}

.badge-api {
    right: 0;
    top: 225px;
    animation: ai2giSw2BadgeTwo 6s ease-in-out infinite;
}

.badge-cloud {
    left: 8%;
    bottom: 85px;
    animation: ai2giSw2BadgeThree 5.5s ease-in-out infinite;
}

@keyframes ai2giSw2BadgeOne {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes ai2giSw2BadgeTwo {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(11px); }
}

@keyframes ai2giSw2BadgeThree {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

.ai2gi-sw2-scan {
    position: absolute;
    z-index: 7;
    left: 25%;
    right: 25%;
    top: 21%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--tj-color-theme-primary),
            transparent
        );
    opacity: .65;
    animation: ai2giSw2Scan 4s linear infinite;
}

@keyframes ai2giSw2Scan {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: .7; }
    80% { opacity: .7; }
    100% { transform: translateY(340px); opacity: 0; }
}


/* ============================================================
   MOVING RAIL
   ============================================================ */

.ai2gi-sw2-rail {
    overflow: hidden;
    background: var(--tj-color-theme-bg);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.ai2gi-sw2-rail-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 35px;
    padding: 20px 0;
    animation: ai2giSw2RailMove 30s linear infinite;
}

.ai2gi-sw2-rail-track span {
    white-space: nowrap;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: clamp(21px,2.5vw,35px);
    font-weight: var(--tj-fw-medium);
}

.ai2gi-sw2-rail-track i {
    color: var(--tj-color-theme-primary);
}

@keyframes ai2giSw2RailMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}


/* ============================================================
   BIG STATEMENT
   ============================================================ */

.ai2gi-sw2-statement {
    background: var(--tj-color-theme-dark);
}

.ai2gi-sw2-statement-title {
    max-width: 1020px;
    margin: 0;
    color: var(--tj-color-heading-primary);
    font-family: var(--tj-ff-heading);
    font-size: clamp(42px,5vw,70px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.ai2gi-sw2-statement-title span {
    color: var(--tj-color-theme-primary);
}

.ai2gi-sw2-statement-bottom {
    max-width: 760px;
    margin-top: 30px;
}

.ai2gi-sw2-statement-bottom p {
    max-width: 690px;
    margin-bottom: 20px;
    color: var(--tj-color-text-body);
    line-height: 1.85;
}


/* ============================================================
   BUILDING BLOCKS
   ============================================================ */

.ai2gi-sw2-blocks {
    background: var(--tj-color-theme-bg);
}

.ai2gi-sw2-blocks-intro {
    max-width: 500px;
    margin-left: auto;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}

.ai2gi-sw2-block-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-top: 55px;
}

.ai2gi-sw2-block {
    position: relative;
    min-height: 430px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 26px;
    background:
        linear-gradient(
            160deg,
            rgba(34,28,74,.97),
            rgba(17,12,43,.98)
        );
    transition: transform .4s ease, border-color .4s ease;
}

.ai2gi-sw2-block:hover {
    transform: translateY(-8px);
    border-color: rgba(207,2,31,.23);
}

.ai2gi-sw2-block-number {
    position: absolute;
    right: 22px;
    top: 18px;
    color: rgba(255,255,255,.08);
    font-family: var(--tj-ff-heading);
    font-size: 40px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-sw2-block-visual {
    position: relative;
    height: 175px;
    margin-bottom: 30px;
}

.ai2gi-sw2-block-content h3 {
    margin-bottom: 12px;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 22px;
}

.ai2gi-sw2-block-content p {
    margin: 0;
    color: var(--tj-color-text-body);
    font-size: 14px;
    line-height: 1.8;
}


/* Visual 01 */

.visual-window {
    position: absolute;
    top: 25px;
    left: 10px;
    width: 145px;
    height: 105px;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: #0d0a24;
    box-shadow: 20px 20px 50px rgba(0,0,0,.18);
}

.visual-window div {
    width: 80%;
    height: 7px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: rgba(255,255,255,.09);
}

.visual-window div:nth-child(2) {
    width: 60%;
}

.visual-window div:nth-child(3) {
    width: 35%;
    background: rgba(207,2,31,.55);
}

.visual-line {
    position: absolute;
    width: 80px;
    height: 1px;
    left: 115px;
    top: 72px;
    background: var(--tj-color-theme-primary);
    transform: rotate(-20deg);
}

.line-two {
    left: 135px;
    top: 95px;
    width: 60px;
    opacity: .35;
}


/* Visual 02 */

.visual-phone {
    position: absolute;
    left: 50%;
    top: 7px;
    width: 95px;
    height: 155px;
    transform: translateX(-50%);
    border: 5px solid #272146;
    border-radius: 22px;
    background: #0b0820;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
}

.phone-screen {
    position: absolute;
    inset: 16px 10px;
    border-radius: 12px;
    background:
        linear-gradient(
            150deg,
            rgba(207,2,31,.24),
            rgba(1,1,123,.22)
        );
}

.visual-circle {
    position: absolute;
    width: 165px;
    height: 165px;
    left: 50%;
    top: 3px;
    transform: translateX(-50%);
    border: 1px solid rgba(207,2,31,.16);
    border-radius: 50%;
    animation: ai2giSw2Circle 7s linear infinite;
}

@keyframes ai2giSw2Circle {
    from { transform: translateX(-50%) rotate(0); }
    to { transform: translateX(-50%) rotate(360deg); }
}


/* Visual 03 */

.visual-api {
    position: absolute;
    top: 28px;
    left: 20px;
    display: flex;
    gap: 18px;
}

.visual-api span {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    box-shadow: 0 15px 30px rgba(0,0,0,.18);
}

.visual-api span:nth-child(2) {
    margin-top: 42px;
    background: rgba(207,2,31,.10);
    border-color: rgba(207,2,31,.25);
}

.visual-api-line {
    position: absolute;
    left: 54px;
    top: 52px;
    width: 80px;
    height: 55px;
    border-left: 1px solid rgba(207,2,31,.45);
    border-bottom: 1px solid rgba(207,2,31,.45);
}


/* Visual 04 */

.visual-cloud {
    position: absolute;
    top: 36px;
    left: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border-radius: 25px;
    color: var(--tj-color-theme-primary);
    background: rgba(207,2,31,.07);
    border: 1px solid rgba(207,2,31,.18);
    font-size: 24px;
    z-index: 3;
}

.cloud-ring {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 115px;
    height: 115px;
    transform: translateX(-50%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
}

.ring-two {
    width: 175px;
    height: 175px;
    top: -10px;
    border-color: rgba(207,2,31,.10);
    animation: ai2giSw2CloudSpin 10s linear infinite;
}

@keyframes ai2giSw2CloudSpin {
    from { transform: translateX(-50%) rotate(0); }
    to { transform: translateX(-50%) rotate(360deg); }
}


/* ============================================================
   ARCHITECTURE
   ============================================================ */

.ai2gi-sw2-architecture {
    background:
        linear-gradient(
            180deg,
            var(--tj-color-theme-dark),
            var(--tj-color-theme-bg)
        );
}

.ai2gi-sw2-architecture-image {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--tj-color-theme-bg);
}

.ai2gi-sw2-architecture-image img {
    width: 100%;
    height: 610px;
    display: block;
    object-fit: cover;
    transition: transform .7s ease;
}

.ai2gi-sw2-architecture-image:hover img {
    transform: scale(1.045);
}

.architecture-label {
    position: absolute;
    left: 22px;
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(24,19,59,.88);
    backdrop-filter: blur(14px);
    color: var(--tj-color-common-white);
    font-size: 10px;
}

.architecture-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tj-color-theme-primary);
    animation: ai2giSw2Dot 2s ease-in-out infinite;
}

@keyframes ai2giSw2Dot {
    50% { opacity: .3; }
}

.ai2gi-sw2-architecture-content {
    padding-left: 35px;
}

.ai2gi-sw2-architecture-content .sec-title {
    max-width: 650px;
}

.ai2gi-sw2-architecture-content .desc {
    max-width: 580px;
    margin-top: 20px;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}

.ai2gi-sw2-layer-list {
    margin-top: 35px;
}

.ai2gi-sw2-layer-item {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ai2gi-sw2-layer-item > span {
    width: 35px;
    color: var(--tj-color-theme-primary);
    font-family: var(--tj-ff-heading);
    font-size: 11px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-sw2-layer-item div {
    flex: 1;
}

.ai2gi-sw2-layer-item strong {
    display: block;
    color: var(--tj-color-common-white);
    font-size: 14px;
}

.ai2gi-sw2-layer-item small {
    display: block;
    margin-top: 4px;
    color: var(--tj-color-text-body);
    font-size: 10px;
}

.ai2gi-sw2-layer-item > i {
    color: rgba(255,255,255,.45);
    transition: transform .3s ease;
}

.ai2gi-sw2-layer-item:hover > i {
    color: var(--tj-color-theme-primary);
    transform: translateX(5px);
}


/* ============================================================
   SHOWCASE
   ============================================================ */

.ai2gi-sw2-showcase {
    background: var(--tj-color-theme-bg);
}

.ai2gi-sw2-showcase-slider {
    padding: 15px 0 40px;
}

.ai2gi-sw2-showcase-slider .swiper-slide {
    width: min(520px, 78vw);
}

.ai2gi-sw2-showcase-card {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.07);
    background: #100c2c;
}

.showcase-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.showcase-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(9,4,28,.95),
            rgba(9,4,28,.15) 55%,
            rgba(9,4,28,.05)
        );
}

.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.ai2gi-sw2-showcase-card:hover .showcase-image img {
    transform: scale(1.07);
}

.showcase-content {
    position: absolute;
    z-index: 2;
    left: 28px;
    right: 28px;
    bottom: 28px;
}

.showcase-content span {
    display: block;
    margin-bottom: 10px;
    color: var(--tj-color-theme-primary);
    font-size: 11px;
    font-weight: var(--tj-fw-medium);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.showcase-content h3 {
    max-width: 420px;
    margin: 0;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 28px;
    line-height: 1.15;
}

.showcase-content a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    border-radius: 50%;
    background: var(--tj-color-theme-primary);
    color: var(--tj-color-common-white);
    transition: transform .3s ease;
}

.showcase-content a:hover {
    transform: translateX(5px);
}


/* ============================================================
   JOURNEY TIMELINE
   ============================================================ */

.ai2gi-sw2-journey {
    background: var(--tj-color-theme-dark);
}

.ai2gi-sw2-journey .desc {
    max-width: 540px;
    margin-top: 20px;
    color: var(--tj-color-text-body);
    line-height: 1.85;
}

.ai2gi-sw2-timeline {
    position: relative;
    padding-left: 38px;
}

.ai2gi-sw2-timeline::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            var(--tj-color-theme-primary),
            rgba(255,255,255,.08),
            transparent
        );
}

.ai2gi-sw2-timeline-item {
    position: relative;
    display: flex;
    gap: 22px;
    padding: 0 0 45px;
}

.ai2gi-sw2-timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -38px;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tj-color-theme-bg);
    border: 1px solid rgba(207,2,31,.30);
    color: var(--tj-color-theme-primary);
    font-size: 8px;
    font-weight: var(--tj-fw-bold);
    box-shadow: 0 0 0 6px var(--tj-color-theme-dark);
}

.timeline-content span {
    display: block;
    margin-bottom: 7px;
    color: var(--tj-color-theme-primary);
    font-size: 10px;
    font-weight: var(--tj-fw-medium);
    text-transform: uppercase;
    letter-spacing: .1em;
}

.timeline-content h4 {
    margin: 0 0 8px;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 21px;
}

.timeline-content p {
    max-width: 500px;
    margin: 0;
    color: var(--tj-color-text-body);
    line-height: 1.75;
}


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

.ai2gi-sw2-faq {
    background: var(--tj-color-theme-bg);
}

.ai2gi-sw2-faq .content-wrap {
    padding-right: 25px;
}

.ai2gi-sw2-faq .desc {
    color: var(--tj-color-text-body);
}


/* ============================================================
   FINAL CTA
   ============================================================ */

.ai2gi-sw2-final {
    background: var(--tj-color-theme-dark);
}

.ai2gi-sw2-final-box {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 70px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 36px;
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(207,2,31,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #25105b,
            #13072f
        );
}

.ai2gi-sw2-final-content {
    position: relative;
    z-index: 3;
    max-width: 750px;
}

.ai2gi-sw2-final-box .sec-title {
    max-width: 720px;
    margin: 16px 0 20px;
}

.ai2gi-sw2-final-box .sec-title span {
    color: var(--tj-color-theme-primary);
}

.ai2gi-sw2-final-box p {
    max-width: 620px;
    margin: 0 0 30px;
    color: var(--tj-color-text-body);
    line-height: 1.85;
}

.ai2gi-sw2-final-code {
    position: absolute;
    right: 80px;
    top: 50%;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    color: var(--tj-color-common-white);
    font-family: monospace;
    font-size: 32px;
    animation: ai2giSw2FinalSpin 14s linear infinite;
}

.ai2gi-sw2-final-code::before {
    content: "";
    position: absolute;
    inset: 25px;
    border: 1px solid rgba(207,2,31,.17);
    border-radius: 50%;
}

.ai2gi-sw2-final-code strong {
    color: var(--tj-color-theme-primary);
}

@keyframes ai2giSw2FinalSpin {
    from {
        transform:
            translateY(-50%)
            rotate(0);
    }

    to {
        transform:
            translateY(-50%)
            rotate(360deg);
    }
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1199px) {

    .ai2gi-sw2-hero-title {
        font-size: clamp(48px,6vw,78px);
    }

    .ai2gi-sw2-badge {
        transform: scale(.92);
    }

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

    .ai2gi-sw2-final-code {
        right: 25px;
    }
}


@media (max-width: 991px) {

    .ai2gi-sw2-hero {
        min-height: auto;
        padding: 110px 0 80px;
    }

    .ai2gi-sw2-code-stage {
        min-height: 540px;
        margin-top: 55px;
    }

    .ai2gi-sw2-statement-title {
        margin-top: 25px;
    }

    .ai2gi-sw2-blocks-intro {
        margin:
            20px 0 0;
    }

    .ai2gi-sw2-architecture-image img {
        height: 520px;
    }

    .ai2gi-sw2-architecture-content {
        padding-left: 0;
        margin-top: 50px;
    }

    .ai2gi-sw2-final-box {
        min-height: auto;
        padding: 55px 40px;
    }

    .ai2gi-sw2-final-code {
        position: relative;
        top: auto;
        right: auto;
        margin: 45px auto 0;
        transform: none;
    }

    @keyframes ai2giSw2FinalSpin {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(360deg);
        }
    }
}


@media (max-width: 767px) {

    .ai2gi-sw2-hero-title {
        font-size: 48px;
    }

    .ai2gi-sw2-hero-buttons {
        align-items: flex-start;
        flex-direction: column;
    }

    .ai2gi-sw2-code-window {
        width: 360px;
    }

    .ai2gi-sw2-badge {
        min-width: 85px;
        padding: 10px;
        font-size: 9px;
    }

    .badge-ui {
        left: 0;
    }

    .badge-api {
        right: 0;
    }

    .ai2gi-sw2-block-grid {
        grid-template-columns: 1fr;
    }

    .ai2gi-sw2-block {
        min-height: 390px;
    }

    .ai2gi-sw2-architecture-image img {
        height: 430px;
    }

}


@media (max-width: 575px) {

    .ai2gi-sw2-hero-title {
        font-size: 41px;
    }

    .ai2gi-sw2-hero-text {
        font-size: 15px;
    }

    .ai2gi-sw2-code-stage {
        min-height: 430px;
    }

    .ai2gi-sw2-code-window {
        width: 290px;
        transform: rotate(-2deg);
    }

    .ai2gi-sw2-code {
        padding: 24px 13px;
    }

    .ai2gi-sw2-code-row {
        gap: 4px;
        font-size: 9px;
    }

    .ai2gi-sw2-caret {
        margin-left: 142px;
    }

    .ai2gi-sw2-terminal {
        font-size: 7px;
    }

    .ai2gi-sw2-terminal strong {
        font-size: 7px;
    }

    .ai2gi-sw2-bracket {
        font-size: 60px;
    }

    .badge-cloud {
        bottom: 40px;
    }

    .ai2gi-sw2-statement-title {
        font-size: 39px;
    }

    .ai2gi-sw2-block {
        padding: 25px;
    }

    .ai2gi-sw2-showcase-slider .swiper-slide {
        width: 86vw;
    }

    .ai2gi-sw2-showcase-card {
        min-height: 420px;
    }

    .showcase-content h3 {
        font-size: 23px;
    }

    .ai2gi-sw2-final-box {
        padding: 40px 25px;
        border-radius: 26px;
    }

    .ai2gi-sw2-final-code {
        width: 205px;
        height: 205px;
    }
}


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

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

    .ai2gi-sw2-code-window,
    .ai2gi-sw2-badge,
    .ai2gi-sw2-rail-track,
    .ai2gi-sw2-scan,
    .visual-circle,
    .ring-two,
    .ai2gi-sw2-final-code,
    .ai2gi-sw2-caret {
        animation: none !important;
    }

}

/* ============================================================
   AI2Gi SOFTWARE SHOWCASE V5
   No slider / no carousel
   Static architectural composition
============================================================ */

.ai2gi-sw5-showcase {
    position: relative;
    overflow: hidden;
    padding: 95px 0;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(72, 55, 180, 0.28),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(35, 55, 150, 0.22),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #111846 0%,
            #171755 45%,
            #211052 100%
        );
}

.ai2gi-sw5-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            110deg,
            rgba(35, 62, 150, 0.12),
            transparent 45%,
            rgba(91, 36, 145, 0.14)
        );
}
/* ============================================================
   HEADING
============================================================ */

.ai2gi-sw5-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 55px;
}

.ai2gi-sw5-heading-main {
    max-width: 760px;
}

.ai2gi-sw5-heading-main .sub-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai2gi-sw5-heading-main .sec-title {
    margin-top: 15px;
    margin-bottom: 0;
}

.ai2gi-sw5-heading-main .sec-title span {
    color: var(--tj-color-theme-primary);
}

.ai2gi-sw5-heading-copy {
    max-width: 400px;
}

.ai2gi-sw5-heading-copy p {
    margin: 0;
    color: var(--tj-color-text-body);
    line-height: 1.8;
}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.ai2gi-sw5-layout {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr);
    gap: 22px;
}


/* ============================================================
   FEATURED
============================================================ */

.ai2gi-sw5-featured {
    position: relative;
    min-height: 625px;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.08);
    background: var(--tj-color-theme-bg);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
}

.ai2gi-sw5-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ai2gi-sw5-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.7,.2,1);
}

.ai2gi-sw5-featured:hover
.ai2gi-sw5-image img {
    transform: scale(1.065);
}

.ai2gi-sw5-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(10,4,29,.98) 0%,
            rgba(10,4,29,.75) 35%,
            rgba(10,4,29,.20) 68%,
            rgba(10,4,29,.05) 100%
        );
}

.ai2gi-sw5-featured-info {
    position: absolute;
    z-index: 3;
    left: 38px;
    right: 38px;
    bottom: 42px;
    max-width: 600px;
}

.ai2gi-sw5-featured-info > span {
    display: block;
    margin-bottom: 12px;
    color: var(--tj-color-theme-primary);
    font-size: 10px;
    font-weight: var(--tj-fw-medium);
    letter-spacing: .14em;
}

.ai2gi-sw5-featured-info h3 {
    max-width: 570px;
    margin: 0;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: clamp(34px,3.8vw,56px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.ai2gi-sw5-featured-info p {
    max-width: 520px;
    margin: 16px 0 22px;
    color: rgba(255,255,255,.67);
    font-size: 13px;
    line-height: 1.8;
}

.ai2gi-sw5-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--tj-color-common-white);
    text-decoration: none;
    font-size: 12px;
    font-weight: var(--tj-fw-medium);
    transition: .3s ease;
}

.ai2gi-sw5-link i {
    color: var(--tj-color-theme-primary);
    transition: transform .3s ease;
}

.ai2gi-sw5-link:hover {
    color: var(--tj-color-theme-primary);
}

.ai2gi-sw5-link:hover i {
    transform: translateX(5px);
}

.ai2gi-sw5-status {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(24,19,59,.78);
    backdrop-filter: blur(14px);
    color: rgba(255,255,255,.72);
    font-size: 9px;
}

.ai2gi-sw5-status span {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
    background: var(--tj-color-theme-primary);
    box-shadow: 0 0 0 6px rgba(207,2,31,.08);
    animation: ai2giSw5Status 2s ease-in-out infinite;
}

@keyframes ai2giSw5Status {
    50% {
        opacity: .3;
    }
}


/* ============================================================
   RIGHT COLUMN
============================================================ */

.ai2gi-sw5-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* ============================================================
   MINI CARDS
============================================================ */

.ai2gi-sw5-mini-card {
    position: relative;
    min-height: 155px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 23px;
    background: #120c30;
    box-shadow: 0 20px 60px rgba(0,0,0,.16);
}

.ai2gi-sw5-mini-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.ai2gi-sw5-mini-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(10,4,29,.95),
            rgba(10,4,29,.45),
            rgba(10,4,29,.15)
        );
}

.ai2gi-sw5-mini-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.ai2gi-sw5-mini-card:hover
.ai2gi-sw5-mini-image img {
    transform: scale(1.08);
}

.ai2gi-sw5-mini-content {
    position: relative;
    z-index: 3;
    min-height: 155px;
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    align-items: center;
    gap: 12px;
    padding: 22px;
}

.ai2gi-sw5-mini-content > span {
    color: var(--tj-color-theme-primary);
    font-family: var(--tj-ff-heading);
    font-size: 10px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-sw5-mini-content small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.45);
    font-size: 8px;
    letter-spacing: .12em;
}

.ai2gi-sw5-mini-content h4 {
    margin: 0;
    color: var(--tj-color-common-white);
    font-family: var(--tj-ff-heading);
    font-size: 17px;
}

.ai2gi-sw5-mini-content > i {
    color: var(--tj-color-theme-primary);
    transition: transform .3s ease;
}

.ai2gi-sw5-mini-card:hover
.ai2gi-sw5-mini-content > i {
    transform: translateX(4px);
}


/* ============================================================
   SOFTWARE STACK
============================================================ */

.ai2gi-sw5-layers {
    flex: 1;
    padding: 25px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 23px;
    background:
        linear-gradient(
            145deg,
            rgba(24,19,59,.98),
            rgba(15,10,38,.98)
        );
}

.ai2gi-sw5-layers-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ai2gi-sw5-layers-head span {
    color: var(--tj-color-theme-primary);
    font-size: 9px;
    font-weight: var(--tj-fw-medium);
    letter-spacing: .14em;
}

.ai2gi-sw5-layers-head small {
    color: rgba(255,255,255,.30);
    font-size: 8px;
    letter-spacing: .08em;
}

.ai2gi-sw5-layer {
    display: grid;
    grid-template-columns: 32px 1fr 20px;
    align-items: center;
    gap: 10px;
    min-height: 67px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: padding .3s ease;
}

.ai2gi-sw5-layer:last-child {
    border-bottom: 0;
}

.ai2gi-sw5-layer:hover {
    padding-left: 5px;
}

.layer-number {
    color: rgba(255,255,255,.23);
    font-size: 9px;
}

.layer-text strong {
    display: block;
    color: var(--tj-color-common-white);
    font-size: 12px;
    font-weight: var(--tj-fw-medium);
}

.layer-text small {
    display: block;
    margin-top: 3px;
    color: var(--tj-color-text-body);
    font-size: 9px;
}

.ai2gi-sw5-layer > i {
    color: rgba(255,255,255,.25);
    font-size: 10px;
    transition: .3s ease;
}

.ai2gi-sw5-layer:hover > i {
    color: var(--tj-color-theme-primary);
    transform: translateX(4px);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 991px) {

    .ai2gi-sw5-heading {
        display: block;
    }

    .ai2gi-sw5-heading-copy {
        max-width: 650px;
        margin-top: 20px;
    }

    .ai2gi-sw5-layout {
        grid-template-columns: 1fr;
    }

    .ai2gi-sw5-featured {
        min-height: 560px;
    }

    .ai2gi-sw5-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ai2gi-sw5-layers {
        grid-column: 1 / -1;
    }

}


@media (max-width: 767px) {

    .ai2gi-sw5-showcase {
        padding: 80px 0;
    }

    .ai2gi-sw5-featured {
        min-height: 500px;
        border-radius: 24px;
    }

    .ai2gi-sw5-featured-info {
        left: 25px;
        right: 25px;
        bottom: 28px;
    }

    .ai2gi-sw5-featured-info h3 {
        font-size: 37px;
    }

    .ai2gi-sw5-right {
        display: flex;
    }

}


@media (max-width: 575px) {

    .ai2gi-sw5-heading {
        margin-bottom: 35px;
    }

    .ai2gi-sw5-featured {
        min-height: 450px;
    }

    .ai2gi-sw5-featured-info h3 {
        font-size: 30px;
    }

    .ai2gi-sw5-featured-info p {
        font-size: 11px;
    }

    .ai2gi-sw5-mini-card {
        min-height: 135px;
    }

    .ai2gi-sw5-mini-content {
        min-height: 135px;
        padding: 18px;
    }

    .ai2gi-sw5-mini-content h4 {
        font-size: 15px;
    }

    .ai2gi-sw5-layers {
        padding: 20px;
    }

}


/* ============================================================
   AI2Gi CONSULTING - ADVANCED STRATEGY DESK
   Unique namespace: ai2gi-consult-*
============================================================ */

.ai2gi-consult-page {
    position: relative;
    overflow: hidden;
    background: var(--tj-color-theme-dark);
    color: var(--tj-color-heading-primary);
}


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

.ai2gi-consult-hero {
    position: relative;
    min-height: 820px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 125px 0 95px;

    background:
        radial-gradient(
            circle at 77% 42%,
            rgba(44,67,170,.16),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #0e1337,
            #18133b 52%,
            #160d38
        );
}

.ai2gi-consult-hero-bg {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(47,76,170,.04) 50%,
            rgba(207,2,31,.025) 100%
        );
}

.ai2gi-consult-hero-noise {
    position: absolute;
    inset: 0;
    opacity: .10;
    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(255,255,255,.14) .6px,
            transparent .6px
        );

    background-size: 11px 11px;
}

.ai2gi-consult-hero-copy {
    position: relative;
    z-index: 3;
}

.ai2gi-consult-hero-title {
    max-width: 760px;
    margin: 16px 0 0;

    color: var(--tj-color-heading-primary);
    font-family: var(--tj-ff-heading);

    font-size:
        clamp(
            52px,
            6vw,
            92px
        );

    font-weight:
        var(--tj-fw-sbold);

    line-height: .95;
    letter-spacing: -.065em;
}

.ai2gi-consult-hero-title span {
    color:
        var(--tj-color-theme-primary);
}

.ai2gi-consult-hero-text {
    max-width:
        630px;

    margin-top:
        28px;

    color:
        var(--tj-color-text-body);

    font-size:
        17px;

    line-height:
        1.85;
}

.ai2gi-consult-hero-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    flex-wrap:
        wrap;

    margin-top:
        35px;
}

.ai2gi-consult-scroll {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--tj-color-common-white);

    text-decoration:
        none;

    font-size:
        11px;

    transition:
        .3s ease;
}

.ai2gi-consult-scroll:hover {
    color:
        var(--tj-color-theme-primary);
}

.scroll-line {
    width:
        30px;

    height:
        1px;

    display:
        block;

    background:
        var(--tj-color-theme-primary);
}


/* ============================================================
   COMMAND DESK
============================================================ */

.ai2gi-consult-desk {
    position:
        relative;

    z-index:
        3;

    width:
        min(510px, 100%);

    margin-left:
        auto;

    overflow:
        hidden;

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

    border-radius:
        25px;

    background:
        rgba(18,20,59,.92);

    box-shadow:
        0 35px 120px
        rgba(0,0,0,.32);

    transform:
        rotate(1deg);
}

.consult-desk-top {
    height:
        54px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.desk-brand {
    color:
        rgba(255,255,255,.43);

    font-family:
        monospace;

    font-size:
        8px;

    letter-spacing:
        .08em;
}

.desk-status {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        rgba(255,255,255,.38);

    font-size:
        7px;

    letter-spacing:
        .10em;
}

.desk-status span {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--tj-color-theme-primary);

    animation:
        ai2giConsultPulse
        2s
        ease-in-out
        infinite;
}

@keyframes ai2giConsultPulse {

    50% {
        opacity:
            .3;
    }

}

.consult-desk-body {
    position:
        relative;

    padding:
        28px;
}

.consult-desk-question {
    padding-bottom:
        24px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}

.consult-desk-question small {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        8px;

    letter-spacing:
        .12em;
}

.consult-desk-question strong {
    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        22px;
}


/* Path */

.consult-desk-path {
    display:
        flex;

    align-items:
        center;

    margin:
        27px 0;
}

.desk-node {
    width:
        83px;

    min-width:
        83px;

    text-align:
        center;
}

.desk-node span {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 7px;

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

    border-radius:
        50%;

    color:
        rgba(255,255,255,.31);

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

    font-size:
        8px;
}

.desk-node strong {
    color:
        rgba(255,255,255,.40);

    font-size:
        9px;
}

.desk-node.active span {
    border-color:
        rgba(207,2,31,.35);

    background:
        rgba(207,2,31,.10);

    color:
        var(--tj-color-theme-primary);
}

.desk-node.active strong {
    color:
        var(--tj-color-common-white);
}

.desk-connector {
    flex:
        1;

    display:
        flex;

    justify-content:
        center;

    gap:
        4px;
}

.desk-connector i {
    width:
        4px;

    height:
        4px;

    display:
        block;

    border-radius:
        50%;

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

    animation:
        ai2giConsultConnector
        1.7s
        ease-in-out
        infinite;
}

.desk-connector i:nth-child(2) {
    animation-delay:
        .2s;
}

.desk-connector i:nth-child(3) {
    animation-delay:
        .4s;
}

@keyframes ai2giConsultConnector {

    50% {
        background:
            var(--tj-color-theme-primary);
    }

}


/* Metrics */

.consult-desk-metrics {
    display:
        grid;

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

    gap:
        13px;

    margin-bottom:
        23px;
}

.consult-desk-metrics small {
    display:
        block;

    margin-bottom:
        7px;

    color:
        rgba(255,255,255,.31);

    font-size:
        7px;

    letter-spacing:
        .08em;
}

.metric-track {
    width:
        100%;

    height:
        3px;

    overflow:
        hidden;

    border-radius:
        10px;

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

.metric-track span {
    display:
        block;

    height:
        100%;

    border-radius:
        10px;

    background:
        linear-gradient(
            90deg,
            var(--tj-color-theme-primary),
            #4555ae
        );
}

.consult-desk-metrics strong {
    display:
        block;

    margin-top:
        6px;

    color:
        var(--tj-color-common-white);

    font-size:
        9px;
}


/* Result */

.consult-desk-result {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        16px;

    border:
        1px solid
        rgba(207,2,31,.16);

    border-radius:
        14px;

    background:
        rgba(207,2,31,.04);
}

.result-icon {
    width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    color:
        var(--tj-color-common-white);

    background:
        var(--tj-color-theme-primary);
}

.consult-desk-result small {
    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        7px;

    letter-spacing:
        .10em;
}

.consult-desk-result strong {
    color:
        var(--tj-color-common-white);

    font-size:
        10px;
}

.consult-desk-footer {
    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 18px;

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

    color:
        rgba(255,255,255,.27);

    font-family:
        monospace;

    font-size:
        7px;
}

.desk-glow {
    position:
        absolute;

    width:
        220px;

    height:
        220px;

    top:
        130px;

    right:
        -100px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.10),
            transparent 70%
        );

    filter:
        blur(20px);

    pointer-events:
        none;
}


/* ============================================================
   MOVING STRIP
============================================================ */

.ai2gi-consult-strip {
    overflow:
        hidden;

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

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    background:
        var(--tj-color-theme-bg);
}

.ai2gi-consult-strip-track {
    width:
        max-content;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

    padding:
        19px 0;

    animation:
        ai2giConsultStrip
        29s
        linear
        infinite;
}

.ai2gi-consult-strip-track span {
    white-space:
        nowrap;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        clamp(
            18px,
            2.2vw,
            31px
        );
}

.ai2gi-consult-strip-track i {
    color:
        var(--tj-color-theme-primary);
}

@keyframes ai2giConsultStrip {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


/* ============================================================
   STATEMENT
============================================================ */

.ai2gi-consult-statement {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-consult-statement-grid {
    display:
        grid;

    grid-template-columns:
        .25fr 1fr;

    gap:
        50px;
}

.ai2gi-consult-statement-title {
    max-width:
        950px;

    margin:
        0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        clamp(
            42px,
            5vw,
            70px
        );

    line-height:
        1.02;

    letter-spacing:
        -.05em;
}

.ai2gi-consult-statement-title span {
    color:
        var(--tj-color-theme-primary);
}

.ai2gi-consult-statement-text {
    max-width:
        720px;

    margin:
        28px 0 0;

    color:
        var(--tj-color-text-body);

    line-height:
        1.85;
}


/* ============================================================
   SECTION HEAD
============================================================ */

.ai2gi-consult-section-header {
    max-width:
        850px;

    margin-bottom:
        55px;
}

.ai2gi-consult-section-header .sec-title {
    margin:
        15px 0 0;
}

.ai2gi-consult-section-header .sec-title span {
    color:
        var(--tj-color-theme-primary);
}


/* ============================================================
   FRAMEWORK
============================================================ */

.ai2gi-consult-framework {
    background:
        var(--tj-color-theme-bg);
}

.ai2gi-consult-framework-layout {
    display:
        grid;

    grid-template-columns:
        180px 1fr 300px;

    min-height:
        500px;

    overflow:
        hidden;

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

    border-radius:
        27px;

    background:
        #111540;
}

.ai2gi-consult-framework-index {
    padding:
        27px 0;

    border-right:
        1px solid
        rgba(255,255,255,.07);
}

.framework-index {
    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    padding:
        0 20px;

    color:
        rgba(255,255,255,.34);

    font-size:
        10px;

    transition:
        .3s ease;
}

.framework-index span {
    color:
        rgba(255,255,255,.18);

    font-size:
        8px;
}

.framework-index.active {
    color:
        var(--tj-color-common-white);

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

.framework-index.active span {
    color:
        var(--tj-color-theme-primary);
}

.ai2gi-consult-framework-main {
    position:
        relative;

    padding:
        65px;
}

.framework-number {
    color:
        rgba(255,255,255,.08);

    font-family:
        var(--tj-ff-heading);

    font-size:
        70px;

    font-weight:
        var(--tj-fw-bold);
}

.framework-label {
    display:
        block;

    margin:
        15px 0 10px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        8px;

    letter-spacing:
        .14em;
}

.ai2gi-consult-framework-main h3 {
    max-width:
        500px;

    margin:
        0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        35px;

    line-height:
        1.08;
}

.ai2gi-consult-framework-main > p {
    max-width:
        540px;

    margin:
        18px 0 30px;

    color:
        var(--tj-color-text-body);

    font-size:
        13px;

    line-height:
        1.8;
}

.framework-mini-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2,160px);

    gap:
        8px;
}

.framework-mini-grid div {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        42px;

    padding:
        0 10px;

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

    border-radius:
        9px;

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

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

    font-size:
        9px;
}

.framework-mini-grid span {
    color:
        var(--tj-color-theme-primary);

    font-size:
        7px;
}


/* Framework side */

.ai2gi-consult-framework-side {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-left:
        1px solid
        rgba(255,255,255,.07);

    background:
        radial-gradient(
            circle,
            rgba(50,72,167,.12),
            transparent 62%
        );
}

.side-orbit {
    width:
        190px;

    height:
        190px;

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

    border-radius:
        50%;

    animation:
        ai2giConsultOrbit
        12s
        linear
        infinite;
}

.side-core {
    position:
        absolute;

    width:
        85px;

    height:
        85px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(207,2,31,.24);

    border-radius:
        50%;

    background:
        var(--tj-color-theme-bg);

    color:
        var(--tj-color-theme-primary);

    font-family:
        var(--tj-ff-heading);

    font-size:
        10px;
}

.side-word {
    position:
        absolute;

    color:
        rgba(255,255,255,.43);

    font-size:
        8px;

    letter-spacing:
        .12em;
}

.word-one {
    top:
        20%;

    left:
        23%;
}

.word-two {
    right:
        17%;

    top:
        44%;
}

.word-three {
    bottom:
        19%;

    left:
        27%;
}

@keyframes ai2giConsultOrbit {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   AREAS
============================================================ */

.ai2gi-consult-areas {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-consult-area-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        14px;
}

.consult-area {
    position:
        relative;

    min-height:
        360px;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        23px;

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

    border-radius:
        21px;

    background:
        linear-gradient(
            160deg,
            rgba(27,34,82,.94),
            rgba(14,11,38,.98)
        );

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

.consult-area:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(207,2,31,.24);
}

.consult-area::after {
    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -70px;

    top:
        -70px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.09),
            transparent 70%
        );
}

.area-top {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.area-top span {
    color:
        rgba(255,255,255,.20);

    font-family:
        var(--tj-ff-heading);

    font-size:
        9px;
}

.area-top i {
    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(207,2,31,.15);

    border-radius:
        14px;

    color:
        var(--tj-color-theme-primary);

    background:
        rgba(207,2,31,.05);
}

.area-content {
    position:
        relative;

    z-index:
        2;

    margin-top:
        auto;

    margin-bottom:
        25px;
}

.area-content small {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        8px;

    letter-spacing:
        .12em;
}

.area-content h3 {
    margin:
        0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        22px;

    line-height:
        1.12;
}

.area-content p {
    margin:
        12px 0 0;

    color:
        var(--tj-color-text-body);

    font-size:
        11px;

    line-height:
        1.75;
}

.area-footer {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    gap:
        5px;

    flex-wrap:
        wrap;

    padding-top:
        14px;

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

.area-footer span {
    padding:
        5px 7px;

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

    border-radius:
        999px;

    color:
        rgba(255,255,255,.34);

    font-size:
        7px;
}


/* ============================================================
   DECISION BOARD
============================================================ */

.ai2gi-consult-decision {
    background:
        var(--tj-color-theme-bg);
}

.ai2gi-consult-decision-board {
    position:
        relative;

    min-height:
        500px;

    overflow:
        hidden;

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

    border-radius:
        28px;

    background:
        #101440;
}

.decision-background-grid {
    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;
}

.decision-header {
    position:
        relative;

    z-index:
        2;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 23px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.31);

    font-family:
        monospace;

    font-size:
        7px;

    letter-spacing:
        .09em;
}

.decision-content {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    padding:
        55px;
}

.decision-question small {
    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        8px;

    letter-spacing:
        .13em;
}

.decision-question h2 {
    max-width:
        470px;

    margin:
        0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        clamp(
            30px,
            3.7vw,
            52px
        );

    line-height:
        1.03;

    letter-spacing:
        -.04em;
}

.decision-options {
    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}

.decision-option {
    min-height:
        82px;

    display:
        grid;

    grid-template-columns:
        30px 1fr 20px;

    align-items:
        center;

    gap:
        12px;

    padding:
        15px;

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

    border-radius:
        13px;

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

    transition:
        .3s ease;
}

.decision-option.active {
    border-color:
        rgba(207,2,31,.22);

    background:
        rgba(207,2,31,.045);
}

.decision-option > span {
    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        8px;

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

    color:
        rgba(255,255,255,.30);

    font-size:
        8px;
}

.decision-option.active > span {
    background:
        rgba(207,2,31,.13);

    color:
        var(--tj-color-theme-primary);
}

.decision-option strong {
    display:
        block;

    color:
        var(--tj-color-common-white);

    font-size:
        11px;
}

.decision-option small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--tj-color-text-body);

    font-size:
        8px;
}

.decision-option > i {
    color:
        rgba(255,255,255,.19);

    font-size:
        10px;
}

.decision-option.active > i {
    color:
        var(--tj-color-theme-primary);
}

.decision-result {
    grid-column:
        1 / -1;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    padding-top:
        20px;

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

.decision-result-line {
    width:
        65px;

    height:
        1px;

    background:
        var(--tj-color-theme-primary);
}

.decision-result span {
    color:
        var(--tj-color-theme-primary);

    font-size:
        7px;

    letter-spacing:
        .12em;
}

.decision-result strong {
    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        13px;
}


/* ============================================================
   JOURNEY
============================================================ */

.ai2gi-consult-journey {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-consult-journey-line {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        20px;
}

.ai2gi-consult-journey-line::before {
    content:
        "";

    position:
        absolute;

    left:
        8%;

    right:
        8%;

    top:
        28px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.45),
            rgba(75,84,174,.35),
            transparent
        );
}

.journey-item {
    position:
        relative;

    z-index:
        2;
}

.journey-dot {
    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        22px;

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

    border-radius:
        50%;

    background:
        var(--tj-color-theme-dark);

    color:
        var(--tj-color-theme-primary);

    font-family:
        var(--tj-ff-heading);

    font-size:
        8px;

    box-shadow:
        0 0 0 8px
        var(--tj-color-theme-dark);
}

.journey-item small {
    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        7px;

    letter-spacing:
        .13em;
}

.journey-item h3 {
    margin:
        0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        19px;

    line-height:
        1.15;
}

.journey-item p {
    margin:
        9px 0 0;

    color:
        var(--tj-color-text-body);

    font-size:
        10px;

    line-height:
        1.75;
}


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

.ai2gi-consult-faq {
    background:
        var(--tj-color-theme-bg);
}

.ai2gi-consult-faq-intro {
    padding-right:
        25px;
}

.ai2gi-consult-faq-intro .sec-title {
    margin:
        14px 0;
}

.ai2gi-consult-faq-intro .sec-title span {
    color:
        var(--tj-color-theme-primary);
}

.ai2gi-consult-faq-intro p {
    max-width:
        470px;

    margin-bottom:
        28px;

    color:
        var(--tj-color-text-body);

    line-height:
        1.8;
}


/* ============================================================
   FINAL
============================================================ */

.ai2gi-consult-final {
    background:
        var(--tj-color-theme-dark);
}

.ai2gi-consult-final-box {
    position:
        relative;

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        65px;

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

    border-radius:
        32px;

    background:
        linear-gradient(
            130deg,
            #12215a,
            #21104b
        );
}

.ai2gi-consult-final-content {
    position:
        relative;

    z-index:
        4;

    max-width:
        720px;
}

.ai2gi-consult-final-box .sec-title {
    margin:
        15px 0 20px;
}

.ai2gi-consult-final-box .sec-title span {
    color:
        var(--tj-color-theme-primary);
}

.ai2gi-consult-final-box p {
    max-width:
        620px;

    margin:
        0 0 30px;

    color:
        rgba(255,255,255,.63);

    line-height:
        1.8;
}

.ai2gi-consult-final-graphic {
    position:
        absolute;

    right:
        55px;

    top:
        50%;

    width:
        270px;

    height:
        270px;

    transform:
        translateY(-50%);
}

.final-graphic-grid {
    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 1px,
            transparent 1px
        );

    background-size:
        27px 27px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 70%
        );
}

.ai2gi-consult-final-graphic::before,
.ai2gi-consult-final-graphic::after {
    content:
        "";

    position:
        absolute;

    inset:
        25px;

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

    transform:
        rotate(45deg);
}

.ai2gi-consult-final-graphic::after {
    inset:
        58px;

    border-color:
        rgba(207,2,31,.18);

    animation:
        ai2giConsultDiamond
        10s
        linear
        infinite;
}

.final-graphic-square {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    z-index:
        3;

    width:
        82px;

    height:
        82px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    transform:
        translate(-50%,-50%);

    border-radius:
        20px;

    background:
        var(--tj-color-theme-primary);

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        28px;

    box-shadow:
        0 20px 60px
        rgba(207,2,31,.22);
}

.graphic-line {
    position:
        absolute;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.55),
            transparent
        );
}

.line-a {
    width:
        100px;

    top:
        28%;

    left:
        -15px;

    transform:
        rotate(-25deg);
}

.line-b {
    width:
        125px;

    right:
        -35px;

    top:
        52%;

    transform:
        rotate(18deg);
}

.line-c {
    width:
        80px;

    left:
        8%;

    bottom:
        22%;

    transform:
        rotate(35deg);
}

@keyframes ai2giConsultDiamond {

    from {
        transform:
            rotate(45deg);
    }

    to {
        transform:
            rotate(405deg);
    }

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .ai2gi-consult-hero-title {
        font-size:
            clamp(
                48px,
                6vw,
                78px
            );
    }

    .ai2gi-consult-framework-layout {
        grid-template-columns:
            150px 1fr 250px;
    }

    .ai2gi-consult-framework-main {
        padding:
            45px;
    }

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

}


@media (max-width: 991px) {

    .ai2gi-consult-hero {
        min-height:
            auto;

        padding:
            110px 0 80px;
    }

    .ai2gi-consult-desk {
        margin:
            55px auto 0;
    }

    .ai2gi-consult-statement-grid {
        grid-template-columns:
            1fr;
    }

    .ai2gi-consult-framework-layout {
        grid-template-columns:
            1fr;
    }

    .ai2gi-consult-framework-index {
        display:
            grid;

        grid-template-columns:
            repeat(5,1fr);

        padding:
            0;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.07);
    }

    .framework-index {
        min-height:
            65px;

        justify-content:
            center;

        padding:
            0 8px;
    }

    .ai2gi-consult-framework-side {
        min-height:
            280px;

        border-left:
            0;

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

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

    .ai2gi-consult-journey-line {
        grid-template-columns:
            repeat(2,1fr);

        row-gap:
            45px;
    }

    .ai2gi-consult-journey-line::before {
        display:
            none;
    }

    .decision-content {
        grid-template-columns:
            1fr;
    }

    .decision-result {
        grid-column:
            auto;
    }

    .ai2gi-consult-final-box {
        min-height:
            auto;

        padding:
            55px 40px;
    }

    .ai2gi-consult-final-graphic {
        position:
            relative;

        top:
            auto;

        right:
            auto;

        margin:
            45px auto 0;

        transform:
            none;
    }

}


@media (max-width: 767px) {

    .ai2gi-consult-hero-title {
        font-size:
            47px;
    }

    .ai2gi-consult-hero-actions {
        flex-direction:
            column;

        align-items:
            flex-start;
    }

    .ai2gi-consult-desk {
        transform:
            none;
    }

    .ai2gi-consult-desk-body {
        padding:
            22px;
    }

    .consult-desk-path {
        overflow:
            auto;
    }

    .ai2gi-consult-framework-index {
        grid-template-columns:
            repeat(3,1fr);
    }

    .framework-index:nth-child(n+4) {
        display:
            none;
    }

    .ai2gi-consult-framework-main {
        padding:
            35px 25px;
    }

    .framework-mini-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .ai2gi-consult-area-grid {
        grid-template-columns:
            1fr;
    }

    .ai2gi-consult-area {
        min-height:
            330px;
    }

    .decision-content {
        padding:
            35px 25px;
    }

    .decision-question h2 {
        font-size:
            34px;
    }

    .ai2gi-consult-journey-line {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 575px) {

    .ai2gi-consult-hero-title {
        font-size:
            39px;
    }

    .ai2gi-consult-hero-text {
        font-size:
            15px;
    }

    .ai2gi-consult-desk {
        width:
            100%;

        border-radius:
            20px;
    }

    .consult-desk-question strong {
        font-size:
            18px;
    }

    .consult-desk-metrics {
        grid-template-columns:
            1fr;
    }

    .ai2gi-consult-statement-title {
        font-size:
            37px;
    }

    .ai2gi-consult-framework-index {
        grid-template-columns:
            repeat(2,1fr);
    }

    .framework-index:nth-child(n+3) {
        display:
            none;
    }

    .framework-mini-grid {
        grid-template-columns:
            1fr;
    }

    .ai2gi-consult-framework-side {
        min-height:
            220px;
    }

    .ai2gi-consult-area {
        min-height:
            310px;
    }

    .ai2gi-consult-decision-board {
        border-radius:
            22px;
    }

    .decision-option {
        grid-template-columns:
            28px 1fr 15px;
    }

    .ai2gi-consult-final-box {
        padding:
            40px 25px;

        border-radius:
            25px;
    }

    .ai2gi-consult-final-graphic {
        width:
            215px;

        height:
            215px;
    }

}
/* ============================================================
   AI2Gi CONSULTING IMAGE SHOWCASE
============================================================ */

.ai2gi-consult-image-grid {
    display: grid;
    grid-template-columns: 1.25fr .875fr;
    grid-template-rows: 300px 300px;
    gap: 18px;
}

.ai2gi-consult-image-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;

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

    background:
        #101440;

    isolation: isolate;

    box-shadow:
        0 25px 70px rgba(0,0,0,.22);
}

.ai2gi-consult-image-business {
    grid-row: 1 / 3;
    min-height: 618px;
}

.ai2gi-consult-image-card > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    opacity: 1;
    visibility: visible;

    z-index: 0;

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

.ai2gi-consult-image-card:hover > img {
    transform: scale(1.07);
}

.ai2gi-consult-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(8,4,28,.97) 0%,
            rgba(8,4,28,.72) 40%,
            rgba(8,4,28,.25) 72%,
            rgba(8,4,28,.08) 100%
        );
}

.ai2gi-consult-image-number {
    position: absolute;
    z-index: 3;

    top: 22px;
    right: 24px;

    color: rgba(255,255,255,.17);

    font-family: var(--tj-ff-heading);
    font-size: 42px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-consult-image-content {
    position: absolute;
    z-index: 4;

    left: 27px;
    right: 27px;
    bottom: 25px;
}

.ai2gi-consult-image-content small {
    display: block;

    margin-bottom: 8px;

    color:
        var(--tj-color-theme-primary);

    font-size: 8px;
    font-weight: var(--tj-fw-medium);

    letter-spacing: .12em;
}

.ai2gi-consult-image-content h3 {
    max-width: 510px;

    margin: 0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size: 26px;

    line-height: 1.08;
}

.ai2gi-consult-image-content p {
    max-width: 500px;

    margin: 11px 0 16px;

    color:
        rgba(255,255,255,.64);

    font-size: 11px;

    line-height: 1.75;
}

.ai2gi-consult-image-content a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color:
        var(--tj-color-common-white);

    text-decoration: none;

    font-size: 10px;
    font-weight: var(--tj-fw-medium);

    transition: .3s ease;
}

.ai2gi-consult-image-content a i {
    color:
        var(--tj-color-theme-primary);

    transition: transform .3s ease;
}

.ai2gi-consult-image-content a:hover {
    color:
        var(--tj-color-theme-primary);
}

.ai2gi-consult-image-content a:hover i {
    transform:
        translateX(5px);
}


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

@media (max-width: 991px) {

    .ai2gi-consult-image-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 360px 360px;
    }

    .ai2gi-consult-image-business {
        grid-column: 1 / 3;
        grid-row: auto;
        min-height: 360px;
    }

}


@media (max-width: 767px) {

    .ai2gi-consult-image-grid {
        display: block;
    }

    .ai2gi-consult-image-card,
    .ai2gi-consult-image-business {
        min-height: 370px;
        margin-bottom: 16px;
    }

}


@media (max-width: 575px) {

    .ai2gi-consult-image-card,
    .ai2gi-consult-image-business {
        min-height: 330px;
        border-radius: 21px;
    }

    .ai2gi-consult-image-content {
        left: 21px;
        right: 21px;
        bottom: 21px;
    }

    .ai2gi-consult-image-content h3 {
        font-size: 22px;
    }

}





/* ============================================================
   AI2Gi PRODUCTS - READABILITY ENHANCEMENTS
============================================================ */

/* Product hero description */
.ai2gi-products-main .h6-banner-area .desc,
.site-main .h6-banner-area .desc {
    max-width: 680px;
    font-size: 17px;
    line-height: 1.85;
}

/* Hero bottom descriptive content */
.site-main .h6-banner-bottom .desc {
    font-size: 14px;
    line-height: 1.7;
}

/* Choose cards */
.site-main .h6-choose-section .choose-content .desc {
    font-size: 14px;
    line-height: 1.7;
}

/* About content */
.site-main .h6-about-section .about-content > .desc {
    font-size: 15px;
    line-height: 1.85;
}

/* Product service descriptions */
.site-main .h6-service-item .desc {
    font-size: 14px;
    line-height: 1.75;
}

/* Process descriptions */
.site-main .h6-process-item .desc {
    font-size: 13px;
    line-height: 1.75;
}

/* Search/question heading */
.site-main .search-qst-input-inner .title {
    font-size: 19px;
}

/* Moving product strip */
.site-main .h6-hero-services-content .title {
    font-size: 21px;
}

.site-main .h6-hero-services-content .desc {
    font-size: 13px;
    line-height: 1.65;
}


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

@media (max-width: 767px) {

    .site-main .h6-banner-area .desc {
        font-size: 15px;
        line-height: 1.75;
    }

    .site-main .h6-choose-section .choose-content .desc {
        font-size: 13px;
    }

    .site-main .h6-about-section .about-content > .desc {
        font-size: 14px;
    }

    .site-main .h6-service-item .desc {
        font-size: 13px;
    }

    .site-main .h6-process-item .desc {
        font-size: 12px;
    }

}


/* ============================================================
   AI2Gi - SPACE AFTER FINAL WORKING PROCESS
============================================================ */

.h6-working-process {
    margin-bottom: 110px;
}

@media (max-width: 991px) {
    .h6-working-process {
        margin-bottom: 85px;
    }
}

@media (max-width: 767px) {
    .h6-working-process {
        margin-bottom: 70px;
    }
}

/* ============================================================
   SPACE BETWEEN FINAL WORKING PROCESS AND CTA
============================================================ */

.h6-working-process + section {
    margin-top: 100px;
}

@media (max-width: 991px) {
    .h6-working-process + section {
        margin-top: 80px;
    }
}

@media (max-width: 767px) {
    .h6-working-process + section {
        margin-top: 60px;
    }
}


/* ============================================================
   AI2Gi AI PRODUCTS
   Small layout / readability enhancements
============================================================ */

.ai2gi-products-ai-banner
.h6-banner-area .desc {
    max-width: 700px;
    font-size: 17px;
    line-height: 1.8;
}


.ai2gi-products-ai-about
.about-content > .desc {
    font-size: 15px;
    line-height: 1.85;
}


.ai2gi-products-ai-choose
.choose-content .desc {
    font-size: 14px;
    line-height: 1.75;
}


.ai2gi-products-ai-family
.h6-service-item .desc {
    font-size: 14px;
    line-height: 1.75;
}


.ai2gi-products-ai-projects
.project-content .desc {
    font-size: 13px;
    line-height: 1.75;
}


.ai2gi-products-ai-process
.process-content .desc {
    font-size: 13px;
    line-height: 1.75;
}


.ai2gi-products-ai-blog
.blog-content .title {
    font-size: 18px;
    line-height: 1.35;
}


.ai2gi-products-ai-blog
.blog-meta {
    font-size: 11px;
}


/* ============================================================
   SPACE BEFORE PREDEFINED CTA
============================================================ */

.ai2gi-products-ai-process {
    margin-bottom: 110px;
}


.ai2gi-products-ai-blog {
    margin-bottom: 110px;
}


@media (max-width: 991px) {

    .ai2gi-products-ai-process {
        margin-bottom: 85px;
    }

    .ai2gi-products-ai-blog {
        margin-bottom: 85px;
    }

}


@media (max-width: 767px) {

    .ai2gi-products-ai-banner
    .h6-banner-area .desc {
        font-size: 15px;
    }

    .ai2gi-products-ai-about
    .about-content > .desc {
        font-size: 14px;
    }

    .ai2gi-products-ai-choose
    .choose-content .desc {
        font-size: 13px;
    }

    .ai2gi-products-ai-family
    .h6-service-item .desc {
        font-size: 13px;
    }

    .ai2gi-products-ai-process {
        margin-bottom: 70px;
    }

    .ai2gi-products-ai-blog {
        margin-bottom: 70px;
    }

}



/* ============================================================
   AI2Gi HEALTHCARE PRODUCT PAGE
   Template readability + spacing
============================================================ */

.ai2gi-healthcare-page
.h6-banner-area .desc {
    max-width: 700px;
    font-size: 17px;
    line-height: 1.8;
}

.ai2gi-healthcare-page
.h6-hero-countup .desc {
    font-size: 14px;
    line-height: 1.7;
}

.ai2gi-healthcare-page
.h6-hero-services-content .desc {
    font-size: 13px;
    line-height: 1.7;
}

.ai2gi-healthcare-project-section
.project-content .desc {
    font-size: 13px;
    line-height: 1.75;
}

.ai2gi-healthcare-blog-section
.blog-content .title {
    font-size: 18px;
    line-height: 1.35;
}

.ai2gi-healthcare-blog-section
.blog-meta {
    font-size: 11px;
}

.ai2gi-healthcare-blog-section {
    margin-bottom: 105px;
}

.h7-working-process
.process-content .desc {
    font-size: 13px;
    line-height: 1.75;
}

.h7-working-process {
    margin-bottom: 110px;
}


@media (max-width: 991px) {

    .ai2gi-healthcare-blog-section {
        margin-bottom: 80px;
    }

    .h7-working-process {
        margin-bottom: 85px;
    }

}


@media (max-width: 767px) {

    .ai2gi-healthcare-page
    .h6-banner-area .desc {
        font-size: 15px;
    }

    .ai2gi-healthcare-page
    .h6-hero-countup .desc {
        font-size: 13px;
    }

    .ai2gi-healthcare-project-section
    .project-content .desc {
        font-size: 12px;
    }

    .ai2gi-healthcare-blog-section
    .blog-content .title {
        font-size: 16px;
    }

    .h7-working-process
    .process-content .desc {
        font-size: 12px;
    }

    .ai2gi-healthcare-blog-section {
        margin-bottom: 65px;
    }

    .h7-working-process {
        margin-bottom: 70px;
    }

}





/* ============================================================
   AI2Gi EDUCATION PRODUCTS
   READABILITY + CUSTOM EDUCATION SECTION
============================================================ */

.ai2gi-education-countup-intro {
    max-width: 620px;
    margin: 20px 0 28px;

    color: var(--tj-color-text-body);

    font-size: 15px;
    line-height: 1.85;
}

.ai2gi-education-countup
.countup-item .desc {
    font-size: 14px;
    line-height: 1.75;
}

.ai2gi-education-countup
.count-text {
    font-size: 15px;
}

.ai2gi-education-services-intro {
    max-width: 690px;
    margin: 18px auto 0;

    color: var(--tj-color-text-body);

    font-size: 15px;
    line-height: 1.8;
}

.ai2gi-education-services
.service-content .desc {
    font-size: 14px;
    line-height: 1.8;
}

.ai2gi-education-services
.service-content .title {
    font-size: 28px;
}

.ai2gi-education-services
.list-style-2 li {
    font-size: 13px;
}

.ai2gi-education-banner
.h6-banner-area .desc {
    max-width: 700px;

    font-size: 17px;
    line-height: 1.82;
}

.ai2gi-education-banner
.h6-hero-countup .desc {
    font-size: 14px;
    line-height: 1.75;
}

.ai2gi-education-banner
.h6-hero-services-content .desc {
    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   CUSTOM LEARNING JOURNEY
============================================================ */

.ai2gi-education-journey {
    position: relative;
    overflow: hidden;

    background:
        var(--tj-color-theme-dark);
}

.ai2gi-education-journey-intro {
    max-width: 470px;
    margin: 0 0 5px auto;

    color: var(--tj-color-text-body);

    font-size: 15px;
    line-height: 1.85;
}

.ai2gi-education-journey-line {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 16px;

    margin-top: 60px;
}

.ai2gi-education-journey-line::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 36px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.45),
            rgba(72,86,176,.40),
            transparent
        );
}

.ai2gi-education-journey-item {
    position: relative;
    z-index: 2;

    min-height: 310px;

    padding: 25px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            150deg,
            #151b4b,
            #11133b
        );

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

.ai2gi-education-journey-item:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(207,2,31,.23);
}

.journey-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border:
        1px solid
        rgba(207,2,31,.18);

    border-radius: 15px;

    background:
        rgba(207,2,31,.045);

    color:
        var(--tj-color-theme-primary);

    font-size: 20px;
}

.ai2gi-education-journey-item > span {
    position: absolute;

    top: 24px;
    right: 22px;

    color:
        rgba(255,255,255,.13);

    font-family:
        var(--tj-ff-heading);

    font-size: 25px;
    font-weight: var(--tj-fw-bold);
}

.ai2gi-education-journey-item small {
    display: block;

    margin-bottom: 8px;

    color:
        var(--tj-color-theme-primary);

    font-size: 8px;

    letter-spacing: .13em;
}

.ai2gi-education-journey-item h3 {
    margin: 0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size: 20px;

    line-height: 1.15;
}

.ai2gi-education-journey-item p {
    margin-top: 13px;

    color:
        var(--tj-color-text-body);

    font-size: 12px;

    line-height: 1.8;
}


/* ============================================================
   SPACE BEFORE PREDEFINED CTA
============================================================ */

.ai2gi-education-journey {
    margin-bottom: 110px;
}


@media (max-width: 991px) {

    .ai2gi-education-journey-line {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .ai2gi-education-journey-line::before {
        display: none;
    }

    .ai2gi-education-journey {
        margin-bottom: 85px;
    }

}


@media (max-width: 767px) {

    .ai2gi-education-countup-intro {
        font-size: 14px;
    }

    .ai2gi-education-services-intro {
        font-size: 14px;
    }

    .ai2gi-education-services
    .service-content .desc {
        font-size: 13px;
    }

    .ai2gi-education-banner
    .h6-banner-area .desc {
        font-size: 15px;
    }

    .ai2gi-education-journey-intro {
        margin: 20px 0 0;

        font-size: 14px;
    }

    .ai2gi-education-journey-line {
        grid-template-columns:
            1fr;

        margin-top: 40px;
    }

    .ai2gi-education-journey-item {
        min-height: 270px;
    }

    .ai2gi-education-journey {
        margin-bottom: 70px;
    }

}

.ai2gi-education-banner {
    margin-bottom: 45px;
}

.ai2gi-education-countup {
    padding-top: 60px;
}



/* ============================================================
   AI2Gi BUSINESS PRODUCTS
   Readability + custom business visual
============================================================ */

.ai2gi-business-banner
.h6-banner-area .desc {
    max-width: 700px;
    font-size: 17px;
    line-height: 1.8;
}

.ai2gi-business-banner
.h6-hero-countup .desc {
    font-size: 14px;
    line-height: 1.75;
}

.ai2gi-business-banner
.h6-hero-services-content .desc {
    font-size: 13px;
    line-height: 1.7;
}


.ai2gi-business-about-copy {
    max-width: 560px;
    margin: 24px 0 0;
    color: var(--tj-color-text-body);
    font-size: 14px;
    line-height: 1.85;
}


.ai2gi-business-solutions
.h5-service-content .desc {
    max-width: 620px;
    font-size: 14px;
    line-height: 1.8;
}


.ai2gi-business-solutions
.h5-service-content .title {
    font-size: 26px;
}


.ai2gi-business-solutions
.sub-cat .sub-title {
    font-size: 10px;
}


.ai2gi-business-command {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            #101846 0%,
            #17133b 55%,
            #211052 100%
        );
}


.ai2gi-business-command-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    min-height: 560px;
    padding: 60px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 28px;
    background:
        rgba(24,19,59,.56);
}


.ai2gi-business-command-content {
    position: relative;
    z-index: 3;
}


.ai2gi-business-command-content .sec-title {
    max-width: 630px;
    margin: 15px 0 20px;
}


.ai2gi-business-command-content .sec-title span {
    color: var(--tj-color-theme-primary);
}


.ai2gi-business-command-content > p {
    max-width: 590px;
    margin-bottom: 30px;
    color: var(--tj-color-text-body);
    font-size: 14px;
    line-height: 1.85;
}


.ai2gi-business-command-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}


.command-point {
    min-height: 100px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 13px;
    background: rgba(17,24,70,.46);
}


.command-point > span {
    display: block;
    margin-bottom: 8px;
    color: var(--tj-color-theme-primary);
    font-size: 8px;
}


.command-point strong {
    display: block;
    color: var(--tj-color-common-white);
    font-size: 12px;
}


.command-point small {
    display: block;
    margin-top: 5px;
    color: var(--tj-color-text-body);
    font-size: 8px;
}


/* ============================================================
   BUSINESS COMMAND VISUAL
============================================================ */

.ai2gi-business-command-visual {
    position: relative;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.command-orbit {
    position: absolute;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%;
}


.orbit-one {
    width: 340px;
    height: 340px;
    animation:
        ai2giBusinessOrbit
        18s
        linear
        infinite;
}


.orbit-two {
    width: 235px;
    height: 235px;
    border-color: rgba(207,2,31,.14);
    animation:
        ai2giBusinessOrbitReverse
        13s
        linear
        infinite;
}


.command-core {
    position: relative;
    z-index: 4;
    width: 125px;
    height: 125px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            #202a70,
            #17133b
        );
    border:
        1px solid rgba(207,2,31,.27);
    box-shadow:
        0 0 0 15px rgba(207,2,31,.025),
        0 25px 70px rgba(0,0,0,.28);
    animation:
        ai2giBusinessCore
        4s
        ease-in-out
        infinite;
}


.command-core i {
    color: var(--tj-color-theme-primary);
    font-size: 23px;
}


.command-core strong {
    color: var(--tj-color-common-white);
    font-size: 9px;
    letter-spacing: .12em;
}


.command-core span {
    color: rgba(255,255,255,.30);
    font-size: 7px;
    letter-spacing: .11em;
}


.command-node {
    position: absolute;
    z-index: 5;
    min-width: 88px;
    padding: 9px 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(17,20,60,.90);
    color: var(--tj-color-common-white);
    font-size: 8px;
    letter-spacing: .08em;
    box-shadow: 0 14px 35px rgba(0,0,0,.20);
}


.command-node-one {
    top: 23px;
    left: 50%;
    transform: translateX(-50%);
}


.command-node-two {
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
}


.command-node-three {
    bottom: 23px;
    left: 50%;
    transform: translateX(-50%);
}


.command-node-four {
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
}


@keyframes ai2giBusinessOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes ai2giBusinessOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes ai2giBusinessCore {

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

}


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

.ai2gi-business-faq
.content-wrap .desc {
    max-width: 500px;
    margin: 20px 0 28px;
    color: var(--tj-color-text-body);
    font-size: 14px;
    line-height: 1.8;
}


.ai2gi-business-faq
.faq-text p {
    font-size: 14px;
    line-height: 1.8;
}


@media (max-width: 991px) {

    .ai2gi-business-command-box {
        grid-template-columns: 1fr;
        padding: 45px;
    }

    .ai2gi-business-command-visual {
        min-height: 390px;
    }

}


@media (max-width: 767px) {

    .ai2gi-business-banner
    .h6-banner-area .desc {
        font-size: 15px;
    }

    .ai2gi-business-about-copy {
        font-size: 13px;
    }

    .ai2gi-business-solutions
    .h5-service-content .desc {
        font-size: 13px;
    }

    .ai2gi-business-solutions
    .h5-service-content .title {
        font-size: 21px;
    }

    .ai2gi-business-command-box {
        padding: 32px 22px;
        border-radius: 22px;
    }

    .ai2gi-business-command-points {
        grid-template-columns: 1fr;
    }

    .ai2gi-business-command-visual {
        min-height: 340px;
    }

    .orbit-one {
        width: 265px;
        height: 265px;
    }

    .orbit-two {
        width: 185px;
        height: 185px;
    }

    .command-node-one {
        top: 20px;
    }

    .command-node-three {
        bottom: 20px;
    }

    .command-node-two {
        right: 0;
    }

    .command-node-four {
        left: 0;
    }

    .ai2gi-business-faq
    .faq-text p {
        font-size: 13px;
    }

}



/* ============================================================
   AI2Gi BUSINESS BANNER - INNER GAP
============================================================ */

.ai2gi-business-banner .h6-banner-bottom {
    gap: 18px;
}


/* Desktop */
@media (min-width: 992px) {
    .ai2gi-business-banner .h6-banner-bottom {
        gap: 24px;
    }
}


/* Tablet */
@media (max-width: 991px) {
    .ai2gi-business-banner .h6-banner-bottom {
        gap: 16px;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .ai2gi-business-banner .h6-banner-bottom {
        gap: 12px;
    }
}
/* ============================================================
   AI2Gi BUSINESS
   VISIBLE GAP BETWEEN HERO BOTTOM AND PRODUCT CAPABILITIES
============================================================ */

.ai2gi-business-banner + .ai2gi-business-solutions {
    margin-top: 75px !important;
}


/* Desktop */
@media (min-width: 1200px) {
    .ai2gi-business-banner + .ai2gi-business-solutions {
        margin-top: 95px !important;
    }
}


/* Tablet */
@media (max-width: 1199px) {
    .ai2gi-business-banner + .ai2gi-business-solutions {
        margin-top: 70px !important;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .ai2gi-business-banner + .ai2gi-business-solutions {
        margin-top: 50px !important;
    }
}





/* ============================================================
   AI2Gi IoT PRODUCTS
   Template enhancements + custom IoT section
============================================================ */


/* ============================================================
   BANNER
============================================================ */

.ai2gi-iot-banner
.h6-banner-area .desc {
    max-width: 700px;
    font-size: 17px;
    line-height: 1.82;
}

.ai2gi-iot-banner
.h6-hero-countup .desc {
    font-size: 14px;
    line-height: 1.75;
}

.ai2gi-iot-banner
.h6-hero-services-content .desc {
    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   ABOUT
============================================================ */

.ai2gi-iot-about
.sec-heading .sec-title {
    max-width: 900px;
}

.ai2gi-iot-about
.about-item .desc {
    font-size: 14px;
    line-height: 1.85;
}


/* ============================================================
   IoT SERVICES
============================================================ */

.ai2gi-iot-services
.sec-heading .sec-title {
    max-width: 780px;
}

.ai2gi-iot-services
.h8-service-item .desc {
    font-size: 13px;
    line-height: 1.75;
}

.ai2gi-iot-services
.h8-service-item .title {
    font-size: 23px;
}


/* ============================================================
   CUSTOM IoT CONTROL CENTER
============================================================ */

.ai2gi-iot-control {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111846 0%,
            #15164a 48%,
            #201052 100%
        );
}


.ai2gi-iot-control-box {
    position: relative;

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    align-items: center;

    gap: 50px;

    min-height: 570px;

    padding: 55px;

    overflow: hidden;

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

    border-radius: 28px;

    background:
        rgba(24,19,59,.72);
}


.ai2gi-iot-control-content {
    position: relative;
    z-index: 5;
}


.ai2gi-iot-control-content
.sec-title {
    max-width: 620px;

    margin:
        15px 0 22px;
}


.ai2gi-iot-control-content
.sec-title span {
    color:
        var(--tj-color-theme-primary);
}


.ai2gi-iot-control-content > p {
    max-width: 560px;

    margin-bottom: 28px;

    color:
        var(--tj-color-text-body);

    font-size: 14px;

    line-height: 1.85;
}


/* IoT visual */

.ai2gi-iot-control-visual {
    position: relative;

    min-height: 440px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Core */

.iot-control-core {
    position: relative;

    z-index: 5;

    width: 135px;
    height: 135px;

    display: flex;

    flex-direction: column;

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

    gap: 3px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #222d79,
            #16143e
        );

    border:
        1px solid
        rgba(207,2,31,.38);

    box-shadow:
        0 0 0 16px rgba(207,2,31,.025),
        0 25px 70px rgba(0,0,0,.30);

    animation:
        ai2giIotCore
        4s
        ease-in-out
        infinite;
}


.iot-control-core i {
    color:
        var(--tj-color-theme-primary);

    font-size: 25px;
}


.iot-control-core strong {
    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size: 14px;
}


.iot-control-core small {
    color:
        rgba(255,255,255,.36);

    font-size: 7px;

    letter-spacing: .12em;
}


/* Orbit rings */

.iot-pulse {
    position: absolute;

    border-radius: 50%;

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


.pulse-one {
    width: 350px;
    height: 350px;

    animation:
        ai2giIotOrbit
        18s
        linear
        infinite;
}


.pulse-two {
    width: 265px;
    height: 265px;

    border-color:
        rgba(207,2,31,.14);

    animation:
        ai2giIotOrbitReverse
        13s
        linear
        infinite;
}


.pulse-three {
    width: 190px;
    height: 190px;

    border-style: dashed;

    border-color:
        rgba(93,117,255,.16);

    animation:
        ai2giIotOrbit
        9s
        linear
        infinite;
}


/* Nodes */

.iot-control-node {
    position: absolute;

    z-index: 6;

    min-width: 95px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

    padding:
        11px 15px;

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

    border-radius:
        13px;

    background:
        rgba(17,20,60,.92);

    backdrop-filter:
        blur(12px);

    color:
        var(--tj-color-common-white);

    box-shadow:
        0 14px 40px
        rgba(0,0,0,.20);

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


.iot-control-node i {
    color:
        var(--tj-color-theme-primary);

    font-size: 16px;
}


.iot-control-node span {
    font-size: 8px;

    letter-spacing: .10em;
}


.iot-control-node:hover {
    border-color:
        rgba(207,2,31,.28);

    transform:
        translateY(-5px);
}


.node-sensor {
    top: 25px;
    left: 50%;

    transform:
        translateX(-50%);
}


.node-data {
    right: 3px;
    top: 50%;

    transform:
        translateY(-50%);
}


.node-cloud {
    bottom: 25px;
    left: 50%;

    transform:
        translateX(-50%);
}


.node-action {
    left: 3px;
    top: 50%;

    transform:
        translateY(-50%);
}


@keyframes ai2giIotOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes ai2giIotOrbitReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes ai2giIotCore {

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

}


/* ============================================================
   WORKING PROCESS
============================================================ */

.ai2gi-iot-process
.h8-process-area
.sec-title {
    max-width: 650px;
}


.ai2gi-iot-process
.process-content .desc {
    font-size: 13px;
    line-height: 1.8;
}


/* ============================================================
   SPACE BEFORE CTA
============================================================ */

.ai2gi-iot-process {
    margin-bottom: 110px;
}


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

@media (max-width: 991px) {

    .ai2gi-iot-control-box {
        grid-template-columns:
            1fr;

        padding:
            45px;
    }

    .ai2gi-iot-control-visual {
        min-height:
            390px;
    }

    .ai2gi-iot-process {
        margin-bottom:
            85px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-iot-banner
    .h6-banner-area .desc {
        font-size:
            15px;
    }


    .ai2gi-iot-about
    .about-item .desc {
        font-size:
            13px;
    }


    .ai2gi-iot-services
    .h8-service-item .desc {
        font-size:
            12px;
    }


    .ai2gi-iot-services
    .h8-service-item .title {
        font-size:
            20px;
    }


    .ai2gi-iot-control-box {
        padding:
            32px 22px;

        border-radius:
            22px;
    }


    .ai2gi-iot-control-content
    > p {
        font-size:
            13px;
    }


    .ai2gi-iot-control-visual {
        min-height:
            335px;
    }


    .pulse-one {
        width:
            265px;

        height:
            265px;
    }


    .pulse-two {
        width:
            200px;

        height:
            200px;
    }


    .pulse-three {
        width:
            145px;

        height:
            145px;
    }


    .iot-control-core {
        width:
            85px;

        height:
            85px;
    }


    .iot-control-core i {
        font-size:
            18px;
    }


    .iot-control-core strong {
        font-size:
            10px;
    }


    .iot-control-node {
        min-width:
            72px;

        padding:
            8px 10px;
    }


    .iot-control-node i {
        font-size:
            12px;
    }


    .iot-control-node span {
        font-size:
            6px;
    }


    .node-sensor {
        top:
            10px;
    }


    .node-cloud {
        bottom:
            10px;
    }


    .node-action {
        left:
            0;
    }


    .node-data {
        right:
            0;
    }


    .ai2gi-iot-process
    .process-content .desc {
        font-size:
            12px;
    }


    .ai2gi-iot-process {
        margin-bottom:
            70px;
    }

}


/* ============================================================
   AI2Gi MOBILE PRODUCTS
   Unique Mobile Product Styling
============================================================ */


/* ============================================================
   BANNER READABILITY
============================================================ */

.ai2gi-mobile-banner .banner-content {
    position: relative;
    z-index: 5;
}

.ai2gi-mobile-banner .banner-title {
    max-width: 1000px;
}

.ai2gi-mobile-banner .banner-title span img {
    max-width: 210px;
}

.ai2gi-mobile-banner .banner-btn-area {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ai2gi-mobile-banner .h4-hero-item img {
    object-fit: cover;
}


/* ============================================================
   ABOUT
============================================================ */

.ai2gi-mobile-about .sec-heading .sec-title {
    max-width: 900px;
}

.ai2gi-mobile-about .about-content .desc {
    font-size: 15px;
    line-height: 1.85;
}

.ai2gi-mobile-about .experience-text {
    line-height: 1.55;
}


/* ============================================================
   CAPABILITIES
============================================================ */

.ai2gi-mobile-capabilities .sec-heading .sec-title {
    max-width: 800px;
}

.ai2gi-mobile-capabilities
.h8-service-item .desc {
    font-size: 13px;
    line-height: 1.8;
}

.ai2gi-mobile-capabilities
.h8-service-item .title {
    font-size: 23px;
}


/* ============================================================
   CUSTOM EXPERIENCE
============================================================ */

.ai2gi-mobile-experience {
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111846 0%,
            #15164b 50%,
            #211052 100%
        );
}

.ai2gi-mobile-experience-head {
    max-width: 760px;
    margin-bottom: 55px;
}

.ai2gi-mobile-experience-head .sec-title {
    margin: 15px 0 18px;
}

.ai2gi-mobile-experience-head p {
    margin: 0;

    color:
        var(--tj-color-text-body);

    font-size: 15px;
    line-height: 1.85;
}

.ai2gi-mobile-experience-track {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    position: relative;
}

.ai2gi-mobile-experience-track::before {
    content: "";

    position: absolute;

    left: 8%;
    right: 8%;
    top: 40px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(207,2,31,.40),
            rgba(83,100,220,.38),
            transparent
        );
}

.ai2gi-mobile-step {
    position: relative;
    z-index: 2;

    min-height: 315px;

    padding: 25px;

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

    border-radius: 20px;

    background:
        rgba(24,19,59,.72);

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

.ai2gi-mobile-step:hover {
    transform:
        translateY(-8px);

    border-color:
        rgba(207,2,31,.24);
}

.mobile-step-number {
    position: absolute;

    top: 18px;
    right: 20px;

    color:
        rgba(255,255,255,.11);

    font-family:
        var(--tj-ff-heading);

    font-size:
        25px;

    font-weight:
        var(--tj-fw-bold);
}

.mobile-step-icon {
    width: 55px;
    height: 55px;

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

    margin-bottom: 24px;

    border:
        1px solid
        rgba(207,2,31,.19);

    border-radius: 15px;

    color:
        var(--tj-color-theme-primary);

    background:
        rgba(207,2,31,.045);

    font-size:
        19px;
}

.ai2gi-mobile-step > span {
    display: block;

    margin-bottom: 8px;

    color:
        var(--tj-color-theme-primary);

    font-size:
        8px;

    letter-spacing:
        .14em;
}

.ai2gi-mobile-step h3 {
    margin: 0;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        20px;

    line-height:
        1.2;
}

.ai2gi-mobile-step p {
    margin:
        14px 0 0;

    color:
        var(--tj-color-text-body);

    font-size:
        12px;

    line-height:
        1.8;
}


/* ============================================================
   WORKING PROCESS
============================================================ */

.ai2gi-mobile-process
.process-content .desc {
    font-size: 13px;
    line-height: 1.8;
}


/* ============================================================
   CUSTOM ARCHITECTURE
============================================================ */

.ai2gi-mobile-architecture {
    overflow: hidden;

    background:
        var(--tj-color-theme-dark);
}

.ai2gi-mobile-architecture-copy {
    max-width: 580px;

    margin:
        20px 0 30px;

    color:
        var(--tj-color-text-body);

    font-size:
        15px;

    line-height:
        1.85;
}

.ai2gi-mobile-architecture-list {
    max-width:
        590px;

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

.architecture-item {
    display: grid;

    grid-template-columns:
        45px 1fr 30px;

    align-items: center;

    gap: 15px;

    min-height:
        82px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    transition:
        padding .3s ease,
        background .3s ease;
}

.architecture-item:hover {
    padding-left:
        10px;

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

.architecture-item > span {
    color:
        rgba(255,255,255,.19);

    font-size:
        10px;
}

.architecture-item strong {
    display:
        block;

    color:
        var(--tj-color-common-white);

    font-size:
        13px;
}

.architecture-item small {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--tj-color-text-body);

    font-size:
        10px;
}

.architecture-item > i {
    color:
        rgba(255,255,255,.24);

    transition:
        .3s ease;
}

.architecture-item:hover > i {
    color:
        var(--tj-color-theme-primary);

    transform:
        translateX(4px);
}


/* DEVICE */

.ai2gi-mobile-device-stage {
    position:
        relative;

    min-height:
        540px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.device-glow {
    position:
        absolute;

    width:
        330px;

    height:
        330px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(207,2,31,.16),
            rgba(31,25,91,.04) 60%,
            transparent 72%
        );

    animation:
        ai2giMobileGlow
        4s
        ease-in-out
        infinite;
}

.mobile-device {
    position:
        relative;

    z-index:
        5;

    width:
        220px;

    height:
        440px;

    padding:
        9px;

    border:
        2px solid
        rgba(255,255,255,.12);

    border-radius:
        36px;

    background:
        linear-gradient(
            145deg,
            #2a2e63,
            #0b0d25
        );

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.38);

    transform:
        rotate(-7deg);

    animation:
        ai2giMobileDeviceFloat
        5s
        ease-in-out
        infinite;
}

.mobile-device-speaker {
    position:
        absolute;

    z-index:
        7;

    top:
        16px;

    left:
        50%;

    width:
        55px;

    height:
        11px;

    transform:
        translateX(-50%);

    border-radius:
        999px;

    background:
        rgba(0,0,0,.65);
}

.mobile-device-screen {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    overflow:
        hidden;

    border-radius:
        28px;

    background:
        linear-gradient(
            165deg,
            #171b51,
            #0c0d27
        );
}

.mobile-screen-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        35px 18px 12px;

    color:
        rgba(255,255,255,.80);

    font-size:
        10px;
}

.mobile-screen-top i {
    color:
        var(--tj-color-theme-primary);
}

.mobile-screen-content {
    padding:
        24px 20px;
}

.mobile-screen-content small {
    color:
        var(--tj-color-theme-primary);

    font-size:
        7px;

    letter-spacing:
        .12em;
}

.mobile-screen-content h4 {
    max-width:
        170px;

    margin:
        10px 0 30px;

    color:
        var(--tj-color-common-white);

    font-family:
        var(--tj-ff-heading);

    font-size:
        21px;

    line-height:
        1.16;
}

.mobile-screen-cards {
    display:
        grid;

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

    gap:
        8px;
}

.mobile-screen-cards div {
    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        12px;

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

    color:
        var(--tj-color-theme-primary);

    font-size:
        17px;
}

.mobile-screen-bottom {
    position:
        absolute;

    left:
        50%;

    bottom:
        15px;

    display:
        flex;

    gap:
        5px;

    transform:
        translateX(-50%);
}

.mobile-screen-bottom span {
    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

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

.mobile-screen-bottom span.active {
    width:
        18px;

    border-radius:
        999px;

    background:
        var(--tj-color-theme-primary);
}

.device-orbit {
    position:
        absolute;

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

    border-radius:
        50%;
}

.orbit-a {
    width:
        360px;

    height:
        360px;

    animation:
        ai2giMobileOrbit
        16s
        linear
        infinite;
}

.orbit-b {
    width:
        270px;

    height:
        270px;

    border-color:
        rgba(207,2,31,.14);

    animation:
        ai2giMobileOrbitReverse
        11s
        linear
        infinite;
}

@keyframes ai2giMobileDeviceFloat {

    50% {
        transform:
            rotate(-7deg)
            translateY(-8px);
    }

}

@keyframes ai2giMobileGlow {

    50% {
        transform:
            scale(1.05);
        opacity:
            .75;
    }

}

@keyframes ai2giMobileOrbit {

    from {
        transform:
            rotate(0);
    }

    to {
        transform:
            rotate(360deg);
    }

}

@keyframes ai2giMobileOrbitReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0);
    }

}


/* ============================================================
   INSIGHTS
============================================================ */

.ai2gi-mobile-insights
.blog-content .title {
    font-size:
        20px;

    line-height:
        1.3;
}

.ai2gi-mobile-insights
.blog-content .desc {
    font-size:
        13px;

    line-height:
        1.75;
}


/* ============================================================
   CTA / FOOTER SPACE
============================================================ */

.ai2gi-mobile-insights {
    margin-bottom:
        110px;
}


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

@media (max-width: 991px) {

    .ai2gi-mobile-experience-track {
        grid-template-columns:
            repeat(2,1fr);
    }

    .ai2gi-mobile-experience-track::before {
        display:
            none;
    }

    .ai2gi-mobile-device-stage {
        margin-top:
            45px;
    }

    .ai2gi-mobile-insights {
        margin-bottom:
            85px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-mobile-banner
    .banner-title {
        font-size:
            43px;
    }

    .ai2gi-mobile-banner
    .banner-btn-area {
        gap:
            10px;
    }

    .ai2gi-mobile-about
    .about-content .desc {
        font-size:
            13px;
    }

    .ai2gi-mobile-capabilities
    .h8-service-item .desc {
        font-size:
            12px;
    }

    .ai2gi-mobile-experience-track {
        grid-template-columns:
            1fr;
    }

    .ai2gi-mobile-experience-head p {
        font-size:
            13px;
    }

    .ai2gi-mobile-step {
        min-height:
            270px;
    }

    .ai2gi-mobile-step h3 {
        font-size:
            18px;
    }

    .ai2gi-mobile-step p {
        font-size:
            11px;
    }

    .ai2gi-mobile-process
    .process-content .desc {
        font-size:
            12px;
    }

    .ai2gi-mobile-architecture-copy {
        font-size:
            13px;
    }

    .ai2gi-mobile-device-stage {
        min-height:
            430px;
    }

    .mobile-device {
        width:
            185px;

        height:
            370px;
    }

    .orbit-a {
        width:
            300px;

        height:
            300px;
    }

    .orbit-b {
        width:
            220px;

        height:
            220px;
    }

    .mobile-screen-content h4 {
        font-size:
            18px;
    }

    .ai2gi-mobile-insights
    .blog-content .title {
        font-size:
            17px;
    }

    .ai2gi-mobile-insights {
        margin-bottom:
            70px;
    }

}


/* ============================================================
   AI2Gi ACADEMY
   FINAL SPACING + CARD ALIGNMENT FIXES
============================================================ */


/* ============================================================
   01. REDUCE SPACE AROUND ACADEMY PATHWAYS
============================================================ */

.ai2gi-academy-pathways {
    padding-top: 70px;
    padding-bottom: 70px;
}

.ai2gi-academy-pathways .sec-heading {
    margin-bottom: 35px;
}

.ai2gi-academy-pathways .sec-heading .sub-title {
    margin-bottom: 8px;
}

.ai2gi-academy-pathways .sec-heading .sec-title {
    margin-top: 0;
}

.ai2gi-academy-pathways .sec-heading .desc {
    margin-top: 15px;
}


/* ============================================================
   02. MAKE ALL FOUR PATHWAY BOXES SAME HEIGHT
============================================================ */

.ai2gi-academy-pathway-row {
    align-items: stretch;
}

.ai2gi-academy-pathway-row > [class*="col-"] {
    display: flex;
}

.ai2gi-academy-pathway-row .choose-box {
    width: 100%;
    height: 100%;
    min-height: 290px;
    display: flex;
}

.ai2gi-academy-pathway-row .choose-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ai2gi-academy-pathway-row .choose-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ai2gi-academy-pathway-row .choose-content .desc {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 0;
}

.ai2gi-academy-pathway-row .choose-content .title {
    min-height: 30px;
}


/* ============================================================
   03. ACADEMY LEARNING HEADING
   KEEP "OUR ACADEMY" AND TITLE CLOSER
============================================================ */

.ai2gi-academy-learning {
    padding-top: 70px;
}

.ai2gi-academy-learning .sec-heading {
    margin-bottom: 35px;
}

.ai2gi-academy-learning .sec-heading .sub-title {
    margin-bottom: 8px;
}

.ai2gi-academy-learning .sec-heading .sec-title {
    margin-top: 0;
}

.ai2gi-academy-learning .sec-heading .desc {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.75;
}


/* ============================================================
   04. SERVICE SLIDER READABILITY
============================================================ */

.ai2gi-academy-learning
.service-item.style-2
.service-content .desc {
    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   05. REMOVE MIDDLE LINE FROM COUNTER BOX
============================================================ */

/* Disable template separator */
.ai2gi-academy-countup
.count-separator,
.ai2gi-academy-countup
.count-separator.sep-2 {
    display: none !important;
}


/* Add subtle separation another way */
.ai2gi-academy-countup
.countup-item.style-2 {
    position: relative;
    padding-right: 35px;
}

.ai2gi-academy-countup
.countup-item.style-2::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    height: 75%;
    background: rgba(255,255,255,.06);
}

.ai2gi-academy-countup
.col-md-4:last-child
.countup-item.style-2::after {
    display: none;
}


/* ============================================================
   06. COUNTER TEXT
============================================================ */

.ai2gi-academy-countup
.count-text {
    font-size: 18px;
    line-height: 1.5;
}

.ai2gi-academy-countup
.inline-content .counter {
    font-size: 65px;
}

.ai2gi-academy-countup
.inline-content .count-plus {
    font-size: 35px;
}


/* ============================================================
   07. SPACE AFTER COUNTER BEFORE CTA / FOOTER
============================================================ */

.ai2gi-academy-countup {
    margin-bottom: 85px;
}


/* ============================================================
   08. BANNER TEXT VISIBILITY
============================================================ */

.ai2gi-academy-banner
.banner-content .sub-title {
    font-size: 15px;
}

.ai2gi-academy-banner
.banner-content .desc {
    font-size: 16px;
    line-height: 1.8;
}


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

@media (max-width: 991px) {

    .ai2gi-academy-pathways {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .ai2gi-academy-pathways .sec-heading {
        margin-bottom: 30px;
    }

    .ai2gi-academy-pathway-row .choose-box {
        min-height: 270px;
    }

    .ai2gi-academy-learning {
        padding-top: 60px;
    }

    .ai2gi-academy-learning .sec-heading {
        margin-bottom: 30px;
    }

    .ai2gi-academy-countup {
        margin-bottom: 70px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-academy-pathways {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .ai2gi-academy-pathways .sec-heading {
        margin-bottom: 25px;
    }

    .ai2gi-academy-pathway-row .choose-box {
        min-height: 0;
    }

    .ai2gi-academy-pathway-row .choose-content .desc {
        font-size: 14px;
    }

    .ai2gi-academy-learning {
        padding-top: 45px;
    }

    .ai2gi-academy-learning .sec-heading {
        margin-bottom: 25px;
    }

    .ai2gi-academy-learning .sec-heading .desc {
        font-size: 14px;
    }

    .ai2gi-academy-countup {
        margin-bottom: 55px;
    }

    .ai2gi-academy-countup
    .count-text {
        font-size: 16px;
    }

    .ai2gi-academy-countup
    .inline-content .counter {
        font-size: 52px;
    }

    .ai2gi-academy-countup
    .inline-content .count-plus {
        font-size: 28px;
    }

    .ai2gi-academy-countup
    .countup-item.style-2 {
        padding-right: 0;
    }

    .ai2gi-academy-countup
    .countup-item.style-2::after {
        display: none;
    }

}

/* ============================================================
   AI2Gi ACADEMY
   CLEAN LEARNING TRACK BOX
============================================================ */

.ai2gi-academy-track-box {
    position: relative;
    width: 100%;
}

.ai2gi-academy-track-box .rating-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;

    width: 100%;
    min-height: 145px;

    padding: 28px 36px;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 18px;

    background:
        rgba(24, 19, 59, 0.92);

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.18);
}


/* Remove ALL template separator effects */
.ai2gi-academy-track-box .rating-box::before,
.ai2gi-academy-track-box .rating-box::after,
.ai2gi-academy-track-box .rating-area::before,
.ai2gi-academy-track-box .rating-area::after {
    display: none !important;
    content: none !important;
}


/* Number */
.ai2gi-academy-track-box .rating-box > .title {
    flex: 0 0 auto;

    margin: 0;

    color: var(--tj-color-common-white);

    font-family: var(--tj-ff-heading);

    font-size: 72px;
    line-height: 1;

    font-weight: var(--tj-fw-medium);
}


/* Text block */
.ai2gi-academy-track-box .rating-area {
    display: flex;
    align-items: center;

    margin: 0;
}


/* Track text */
.ai2gi-academy-track-box .rating-text {
    display: block;

    max-width: 210px;

    color: var(--tj-color-text-body);

    font-family: var(--tj-ff-body);

    font-size: 17px;
    line-height: 1.5;
}


/* Small red accent */
.ai2gi-academy-track-box .rating-area::after {
    display: block !important;

    width: 32px;
    height: 2px;

    margin-left: 18px;

    background: var(--tj-color-theme-primary);

    content: "" !important;
}


/* Hover */
.ai2gi-academy-track-box .rating-box {
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.ai2gi-academy-track-box .rating-box:hover {
    transform: translateY(-4px);

    box-shadow:
        0 28px 65px rgba(0, 0, 0, 0.25);
}


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

@media (max-width: 991px) {

    .ai2gi-academy-track-box .rating-box {
        min-height: 125px;

        padding: 24px 28px;

        gap: 22px;
    }

    .ai2gi-academy-track-box .rating-box > .title {
        font-size: 60px;
    }

    .ai2gi-academy-track-box .rating-text {
        font-size: 16px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-academy-track-box .rating-box {
        min-height: 110px;

        padding: 20px 22px;

        gap: 18px;
    }

    .ai2gi-academy-track-box .rating-box > .title {
        font-size: 52px;
    }

    .ai2gi-academy-track-box .rating-text {
        max-width: 170px;

        font-size: 14px;
    }

    .ai2gi-academy-track-box .rating-area::after {
        width: 22px;
        margin-left: 12px;
    }

}


/* ============================================================
   AI2Gi CONTACT INFO
   MAKE ALL FOUR CONTACT CARDS EQUAL HEIGHT
============================================================ */

.tj-contact-area .row.row-gap-4 > [class*="col-"] {
    display: flex;
}

.tj-contact-area .contact-item.style-2 {
    width: 100%;
    height: 100%;
    min-height: 350px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 36px 28px;
}


/* Keep icon area identical */
.tj-contact-area .contact-item.style-2 .contact-icon {
    flex: 0 0 108px;

    width: 108px;
    height: 108px;

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

    margin-bottom: 24px;
}


/* Equal title area */
.tj-contact-area .contact-item.style-2 .contact-title {
    min-height: 32px;

    margin-bottom: 18px;

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

    text-align: center;
}


/* Address / email / phone content */
.tj-contact-area .contact-item.style-2 > p,
.tj-contact-area .contact-item.style-2 .contact-list {
    width: 100%;
    min-height: 80px;

    margin: 0;

    text-align: center;
}


/* Keep all text consistent */
.tj-contact-area .contact-item.style-2 p,
.tj-contact-area .contact-item.style-2 .contact-list li,
.tj-contact-area .contact-item.style-2 .contact-list li a {
    font-size: 15px;
    line-height: 1.75;
}


/* ============================================================
   DESKTOP
============================================================ */

@media (min-width: 1200px) {

    .tj-contact-area .contact-item.style-2 {
        min-height: 360px;
    }

}


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

@media (max-width: 1199px) {

    .tj-contact-area .contact-item.style-2 {
        min-height: 330px;
    }

}


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

@media (max-width: 767px) {

    .tj-contact-area .row.row-gap-4 > [class*="col-"] {
        display: flex;
    }

    .tj-contact-area .contact-item.style-2 {
        min-height: 0;
        height: 100%;
    }

}



/* ============================================================
   AI2Gi COURSES
   BANNER + FOOTER SPACING
============================================================ */


/* Courses banner readability */

.ai2gi-courses-banner .banner-content {
    position: relative;
    z-index: 5;
}

.ai2gi-courses-banner .banner-content .desc {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.8;
}


/* Give the two lower panels some breathing room */

.ai2gi-courses-banner-bottom {
    gap: 22px;
}


/* Slightly differentiate the course strip */

.ai2gi-course-strip {
    overflow: hidden;
}

.ai2gi-course-strip .h6-hero-services-content .title {
    font-size: 20px;
}

.ai2gi-course-strip .h6-hero-services-content .desc {
    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   SPACE BETWEEN LEARNING EXPERIENCES AND CTA / FOOTER
============================================================ */

/*
   This is the final section before:
   @include('sections.cta')
*/




/* Also protect against template section collapsing */

.ai2gi-course-testimonials + section {
    margin-top: 0;
}


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

@media (max-width: 991px) {

    .ai2gi-course-testimonials {
        margin-bottom: 75px;
    }

}


@media (max-width: 767px) {

    .ai2gi-courses-banner .banner-content .desc {
        font-size: 14px;
    }

    .ai2gi-courses-banner-bottom {
        gap: 15px;
    }

    .ai2gi-course-testimonials {
        margin-bottom: 60px;
    }

}


/* ============================================================
   AI2Gi COURSES HERO V2
   UNIQUE DESIGN
============================================================ */

.ai2gi-courses-hero-v2 {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;

    background:
        radial-gradient(
            circle at 78% 40%,
            rgba(1, 1, 123, 0.48),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #180552 0%,
            #25066e 48%,
            #350052 100%
        );
}


/* Decorative glow */

.ai2gi-courses-hero-glow {
    position: absolute;
    top: 15%;
    right: -120px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(207, 2, 31, 0.14),
            transparent 68%
        );

    filter: blur(20px);

    pointer-events: none;
}


/* Main grid */

.ai2gi-courses-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, .85fr);

    align-items: center;

    gap: 80px;
}


/* ============================================================
   LEFT SIDE
============================================================ */

.ai2gi-courses-hero-content {
    max-width: 760px;
}

.ai2gi-courses-hero-content .sub-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 20px;
}


.ai2gi-courses-hero-content .banner-title {
    margin: 0;

    max-width: 760px;

    font-family: var(--tj-ff-heading);

    font-size: clamp(52px, 6vw, 82px);

    line-height: 1.01;

    letter-spacing: -0.045em;

    color: var(--tj-color-common-white);
}


.ai2gi-courses-hero-content .banner-title > span {
    color: var(--tj-color-theme-primary);
}


.ai2gi-courses-hero-desc {
    max-width: 650px;

    margin-top: 28px;

    color: var(--tj-color-text-body);

    font-size: 17px;

    line-height: 1.85;
}


/* Buttons */

.ai2gi-courses-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;

    margin-top: 34px;
}


/* Tags */

.ai2gi-course-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 35px;
}

.ai2gi-course-tags span {
    display: inline-flex;
    align-items: center;

    padding: 9px 14px;

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

    border-radius: 50px;

    background: rgba(24,19,59,.56);

    color: rgba(255,255,255,.72);

    font-size: 12px;

    line-height: 1;

    backdrop-filter: blur(10px);

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

.ai2gi-course-tags span:hover {
    transform: translateY(-3px);

    border-color: rgba(207,2,31,.5);

    color: var(--tj-color-common-white);
}


/* ============================================================
   RIGHT VISUAL
============================================================ */

.ai2gi-courses-hero-visual {
    position: relative;

    min-height: 540px;
}


/* Main image card */

.ai2gi-course-main-card {
    position: absolute;

    top: 0;
    right: 0;

    width: min(100%, 590px);

    height: 430px;

    overflow: hidden;

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

    border-radius: 32px;

    background: #18133b;

    box-shadow:
        0 35px 90px rgba(0,0,0,.3);
}


.ai2gi-course-main-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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


.ai2gi-course-main-card:hover img {
    transform: scale(1.06);
}


.ai2gi-course-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(24,19,59,.03),
            rgba(10,4,29,.78)
        );
}


/* Image label */

.ai2gi-course-card-label {
    position: absolute;

    top: 22px;
    left: 22px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 13px;

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

    border-radius: 50px;

    background: rgba(24,19,59,.72);

    color: rgba(255,255,255,.76);

    font-size: 9px;

    letter-spacing: .13em;

    backdrop-filter: blur(12px);
}


.live-dot {
    width: 7px;
    height: 7px;

    display: block;

    border-radius: 50%;

    background: var(--tj-color-theme-primary);

    box-shadow:
        0 0 0 6px rgba(207,2,31,.10);

    animation:
        ai2giCoursePulse 2s ease-in-out infinite;
}


@keyframes ai2giCoursePulse {

    50% {
        opacity: .4;
        transform: scale(.85);
    }

}


/* Image content */

.ai2gi-course-card-title {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}


.ai2gi-course-card-title strong {
    max-width: 420px;

    color: #fff;

    font-family: var(--tj-ff-heading);

    font-size: 38px;

    line-height: 1.05;

    letter-spacing: -.035em;
}


.ai2gi-course-card-title small {
    color: rgba(255,255,255,.66);

    font-size: 13px;

    line-height: 1.6;
}


/* ============================================================
   FLOATING DASHBOARD
============================================================ */

.ai2gi-course-dashboard {
    position: absolute;

    z-index: 4;

    left: -30px;
    bottom: 35px;

    width: 350px;

    padding: 22px;

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

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(24,19,59,.98),
            rgba(18,12,48,.98)
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.28);

    backdrop-filter: blur(18px);
}


.dashboard-top,
.dashboard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.dashboard-top {
    padding-bottom: 14px;

    border-bottom: 1px solid rgba(255,255,255,.06);
}


.dashboard-top span {
    color: rgba(255,255,255,.42);

    font-size: 9px;

    letter-spacing: .13em;
}


.dashboard-top i {
    color: var(--tj-color-theme-primary);

    font-size: 18px;
}


.dashboard-main {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 20px 0;
}


.dashboard-number {
    color: #fff;

    font-family: var(--tj-ff-heading);

    font-size: 56px;

    line-height: 1;
}


.dashboard-main strong {
    display: block;

    color: #fff;

    font-size: 15px;

    font-weight: var(--tj-fw-medium);
}


.dashboard-main small {
    display: block;

    margin-top: 5px;

    color: var(--tj-color-text-body);

    font-size: 11px;

    line-height: 1.5;
}


.dashboard-progress {
    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 20px;

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


.dashboard-progress span {
    display: block;

    width: 72%;
    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--tj-color-theme-primary),
            #01017b
        );

    animation:
        ai2giCourseProgress 2.5s ease-in-out infinite alternate;
}


@keyframes ai2giCourseProgress {

    from {
        width: 68%;
    }

    to {
        width: 78%;
    }

}


.dashboard-footer {
    padding-top: 13px;
}


.dashboard-footer span {
    color: rgba(255,255,255,.42);

    font-size: 10px;
}


/* ============================================================
   FLOATING ICONS
============================================================ */

.ai2gi-course-orbit {
    position: absolute;

    z-index: 5;

    width: 58px;
    height: 58px;

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

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

    border-radius: 50%;

    background: #18133b;

    color: var(--tj-color-theme-primary);

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

    animation:
        ai2giCourseFloat 4s ease-in-out infinite;
}


.orbit-one {
    top: 24px;
    right: -16px;
}


.orbit-two {
    right: 42px;
    bottom: 55px;

    animation-delay: -.9s;
}


@keyframes ai2giCourseFloat {

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

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

}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1199px) {

    .ai2gi-courses-hero-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .ai2gi-courses-hero-content {
        max-width: 850px;
    }


    .ai2gi-courses-hero-visual {
        max-width: 680px;

        width: 100%;

        margin: 0 auto;
    }

}


@media (max-width: 767px) {

    .ai2gi-courses-hero-v2 {
        padding: 85px 0 80px;
    }


    .ai2gi-courses-hero-content .banner-title {
        font-size: 47px;
    }


    .ai2gi-courses-hero-desc {
        margin-top: 20px;

        font-size: 14px;
    }


    .ai2gi-courses-hero-actions {
        margin-top: 25px;
    }


    .ai2gi-courses-hero-visual {
        min-height: 470px;
    }


    .ai2gi-course-main-card {
        height: 350px;

        border-radius: 24px;
    }


    .ai2gi-course-card-title strong {
        font-size: 29px;
    }


    .ai2gi-course-dashboard {
        left: 15px;
        bottom: 10px;

        width: calc(100% - 30px);
    }


    .ai2gi-course-orbit {
        display: none;
    }

}


@media (max-width: 575px) {

    .ai2gi-courses-hero-v2 {
        padding: 70px 0;
    }


    .ai2gi-courses-hero-content .banner-title {
        font-size: 40px;
    }


    .ai2gi-course-tags {
        gap: 7px;

        margin-top: 25px;
    }


    .ai2gi-course-tags span {
        padding: 8px 11px;

        font-size: 10px;
    }


    .ai2gi-courses-hero-visual {
        min-height: 430px;
    }


    .ai2gi-course-main-card {
        height: 310px;
    }


    .ai2gi-course-card-title {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }


    .ai2gi-course-card-title strong {
        font-size: 25px;
    }


    .ai2gi-course-dashboard {
        padding: 18px;
    }


    .dashboard-number {
        font-size: 46px;
    }

}


/* ============================================================
   AI2Gi COURSES
   FINAL SECTION GAP FIX
============================================================ */


/* ------------------------------------------------------------
   BANNER → LEARNING JOURNEY
------------------------------------------------------------ */

/* Space immediately after the custom course hero */
.ai2gi-courses-hero-v2 {
    margin-bottom: 70px;
}


/* ------------------------------------------------------------
   LEARNING JOURNEY → COURSE PATHWAYS
------------------------------------------------------------ */

.ai2gi-course-process {
    margin-bottom: 70px;
}


/* ------------------------------------------------------------
   COURSE PATHWAYS → LEARNING EXPERIENCES
------------------------------------------------------------ */

.ai2gi-course-pathways {
    margin-bottom: 75px;
}


/* ------------------------------------------------------------
   LEARNING EXPERIENCES → CTA / FOOTER
------------------------------------------------------------ */

.ai2gi-course-testimonials {
    margin-bottom: 90px;
}


/* ------------------------------------------------------------
   PREVENT TEMPLATE COLLAPSE
------------------------------------------------------------ */

.ai2gi-courses-hero-v2,
.ai2gi-course-process,
.ai2gi-course-pathways,
.ai2gi-course-testimonials {
    position: relative;
    display: block;
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 991px) {

    .ai2gi-courses-hero-v2 {
        margin-bottom: 55px;
    }

    .ai2gi-course-process {
        margin-bottom: 55px;
    }

    .ai2gi-course-pathways {
        margin-bottom: 60px;
    }

    .ai2gi-course-testimonials {
        margin-bottom: 70px;
    }

}


@media (max-width: 767px) {

    .ai2gi-courses-hero-v2 {
        margin-bottom: 40px;
    }

    .ai2gi-course-process {
        margin-bottom: 45px;
    }

    .ai2gi-course-pathways {
        margin-bottom: 50px;
    }

    .ai2gi-course-testimonials {
        margin-bottom: 60px;
    }

}




/* =========================================================
   AI2Gi CERTIFICATION PAGE
   UNIQUE HERO SYSTEM
   Palette:
   Primary Red  : #CF021F
   Theme BG     : #18133b
   Dark Violet  : #1C0164
   Border Blue  : #01017b
========================================================= */


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

.ai2gi-certification-hero-section {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background:
        radial-gradient(
            circle at 82% 15%,
            rgba(207, 2, 31, 0.20),
            transparent 24%
        ),
        radial-gradient(
            circle at 74% 70%,
            rgba(92, 42, 145, 0.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 25% 85%,
            rgba(1, 1, 123, 0.38),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #0b1237 0%,
            #11143f 42%,
            #18133b 68%,
            #211046 100%
        );
    border-bottom: 1px solid rgba(207, 2, 31, 0.17);
    margin-bottom: 80px;
}


.ai2gi-certification-hero-layout {
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    align-items: center;
    gap: 65px;
    position: relative;
    z-index: 5;
}


/* =========================================================
   HERO BACKGROUND LIGHTS
========================================================= */

.ai2gi-certification-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(5px);
}

.ai2gi-certification-glow-one {
    width: 260px;
    height: 260px;
    top: 5%;
    right: 15%;
    background: rgba(207, 2, 31, 0.08);
}

.ai2gi-certification-glow-two {
    width: 380px;
    height: 380px;
    right: 35%;
    bottom: -160px;
    background: rgba(61, 45, 126, 0.15);
}

.ai2gi-certification-glow-three {
    width: 250px;
    height: 250px;
    left: -100px;
    top: 35%;
    background: rgba(1, 1, 123, 0.18);
}


.ai2gi-certification-hero-grid-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.10;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 1px
        );

    background-size: 75px 75px;

    mask-image: linear-gradient(
        to right,
        transparent,
        black 30%,
        black 75%,
        transparent
    );
}


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

.ai2gi-certification-hero-content {
    position: relative;
    z-index: 8;
}

.ai2gi-certification-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 9px 16px;

    border-radius: 40px;

    border: 1px solid rgba(207, 2, 31, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(207, 2, 31, 0.11),
            rgba(89, 45, 127, 0.10)
        );

    color: #e6a4ad;

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

    letter-spacing: 0.06em;

    margin-bottom: 24px;
}


.ai2gi-certification-live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #CF021F;

    box-shadow:
        0 0 7px rgba(207, 2, 31, 0.9),
        0 0 18px rgba(207, 2, 31, 0.35);
}


.ai2gi-certification-hero-title {
    max-width: 700px;

    color: #ffffff;

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

    font-size: clamp(43px, 5.4vw, 73px);

    line-height: 1.04;

    font-weight: 700;

    margin-bottom: 25px;
}


.ai2gi-certification-hero-title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 5%,
            #d8b4ff 40%,
            #e86b85 75%,
            #CF021F 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.ai2gi-certification-hero-text {
    max-width: 620px;

    color: #a9a6bd;

    font-size: 17px;

    line-height: 1.85;

    margin-bottom: 32px;
}


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

.ai2gi-certification-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 22px;

    margin-bottom: 34px;
}


.ai2gi-certification-outline-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 13px 2px;

    color: #c1bdd0;

    font-size: 14px;
    font-weight: 500;

    transition: 0.3s ease;
}


.ai2gi-certification-outline-btn:hover {
    color: #ffffff;
}


.ai2gi-certification-outline-arrow {
    color: #d96278;

    font-size: 19px;

    transition: 0.3s ease;
}


.ai2gi-certification-outline-btn:hover
.ai2gi-certification-outline-arrow {
    transform: translateX(5px);
}


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

.ai2gi-certification-hero-points {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px 25px;

    padding-top: 24px;

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


.ai2gi-certification-hero-point {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #9996ad;

    font-size: 12px;
}


.ai2gi-certification-check-icon {
    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    color: #ffffff;

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

    background:
        linear-gradient(
            135deg,
            #CF021F,
            #662c72
        );

    box-shadow:
        0 0 12px rgba(207, 2, 31, 0.20);
}


/* =========================================================
   HERO VISUAL AREA
========================================================= */

.ai2gi-certification-hero-visual {
    min-height: 570px;

    position: relative;

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


/* =========================================================
   DECORATIVE RINGS
========================================================= */

.ai2gi-certification-ring {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.ai2gi-certification-ring-one {
    width: 535px;
    height: 535px;

    border: 1px solid rgba(110, 73, 153, 0.28);

    animation:
        ai2giCertificationRingRotate
        22s linear infinite;
}


.ai2gi-certification-ring-two {
    width: 430px;
    height: 430px;

    border: 1px dashed rgba(207, 2, 31, 0.22);

    animation:
        ai2giCertificationRingReverse
        17s linear infinite;
}


@keyframes ai2giCertificationRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes ai2giCertificationRingReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* =========================================================
   CERTIFICATION CARD
========================================================= */

.ai2gi-certification-card {
    width: min(475px, 88%);

    min-height: 365px;

    position: relative;

    z-index: 10;

    padding: 32px;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid rgba(142, 105, 171, 0.42);

    background:
        linear-gradient(
            140deg,
            rgba(36, 31, 72, 0.98),
            rgba(20, 20, 59, 0.98)
        );

    box-shadow:
        0 30px 75px rgba(0, 0, 0, 0.38),
        0 0 45px rgba(77, 42, 107, 0.13);
}


.ai2gi-certification-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255, 255, 255, 0.035) 48%,
            transparent 72%
        );

    pointer-events: none;
}


.ai2gi-certification-card::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #8b4b8b,
            transparent
        );

    opacity: 0.9;
}


/* =========================================================
   CARD TOP
========================================================= */

.ai2gi-certification-card-top {
    position: relative;
    z-index: 3;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;
}


.ai2gi-certification-card-brand {
    display: flex;
    align-items: center;

    gap: 11px;
}


.ai2gi-certification-brand-mark {
    width: 41px;
    height: 41px;

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

    border-radius: 10px;

    color: #ffffff;

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

    background:
        linear-gradient(
            140deg,
            #CF021F,
            #512b70
        );

    box-shadow:
        0 0 18px rgba(207, 2, 31, 0.20);
}


.ai2gi-certification-card-brand small {
    display: block;

    color: #77728c;

    font-size: 8px;

    letter-spacing: 0.17em;

    margin-bottom: 3px;
}


.ai2gi-certification-card-brand strong {
    display: block;

    color: #dedbe8;

    font-size: 9px;

    letter-spacing: 0.10em;
}


.ai2gi-certification-verified-badge {
    padding: 6px 10px;

    border-radius: 5px;

    border: 1px solid rgba(207, 2, 31, 0.28);

    background: rgba(207, 2, 31, 0.08);

    color: #e48595;

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

    letter-spacing: 0.15em;
}


/* =========================================================
   CARD BODY
========================================================= */

.ai2gi-certification-card-body {
    position: relative;

    z-index: 3;

    padding-top: 47px;
    padding-right: 70px;
}


.ai2gi-certification-card-label {
    display: block;

    color: #93749d;

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

    letter-spacing: 0.16em;

    margin-bottom: 10px;
}


.ai2gi-certification-card-body h3 {
    color: #ffffff;

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

    font-size: 27px;

    line-height: 1.18;

    margin-bottom: 14px;
}


.ai2gi-certification-card-body h3 span {
    display: block;

    color: #dca0b2;
}


.ai2gi-certification-card-body p {
    color: #8e8a9e;

    font-size: 12px;

    line-height: 1.7;

    margin: 0;

    max-width: 330px;
}


.ai2gi-certification-card-line {
    width: 100%;

    height: 1px;

    margin: 25px 0 17px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.10),
            transparent
        );
}


.ai2gi-certification-card-meta {
    display: flex;

    gap: 50px;
}


.ai2gi-certification-card-meta small {
    display: block;

    color: #646078;

    font-size: 8px;

    margin-bottom: 4px;
}


.ai2gi-certification-card-meta strong {
    color: #ccc8d8;

    font-size: 10px;
}


/* =========================================================
   CERTIFICATION SEAL
========================================================= */

.ai2gi-certification-card-seal {
    width: 78px;
    height: 78px;

    position: absolute;

    right: 25px;
    bottom: 25px;

    z-index: 4;

    border-radius: 50%;

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

    border: 1px solid rgba(207, 2, 31, 0.40);

    background:
        radial-gradient(
            circle,
            rgba(207, 2, 31, 0.14),
            rgba(39, 22, 63, 0.35)
        );

    box-shadow:
        0 0 20px rgba(207, 2, 31, 0.10);
}


.ai2gi-certification-seal-inner {
    width: 59px;
    height: 59px;

    border-radius: 50%;

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

    color: #f1d6de;

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

    font-size: 17px;
    font-weight: 800;

    border: 1px dashed rgba(220, 160, 178, 0.42);
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.ai2gi-certification-floating-card {
    position: absolute;

    z-index: 20;

    min-width: 205px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 12px 15px;

    border-radius: 12px;

    border: 1px solid rgba(128, 91, 158, 0.30);

    background:
        linear-gradient(
            135deg,
            rgba(25, 23, 57, 0.95),
            rgba(18, 19, 50, 0.94)
        );

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.25),
        0 0 22px rgba(74, 44, 104, 0.09);

    backdrop-filter: blur(12px);

    animation:
        ai2giCertificationFloat
        4.8s ease-in-out infinite;
}


.ai2gi-certification-floating-content strong {
    display: block;

    color: #e9e6ef;

    font-size: 11px;

    line-height: 1.25;

    margin-bottom: 3px;
}


.ai2gi-certification-floating-content small {
    display: block;

    color: #746f84;

    font-size: 9px;
}


.ai2gi-certification-expertise-card {
    left: -10px;
    top: 85px;
}


.ai2gi-certification-credential-card {
    right: -8px;
    top: 245px;

    animation-delay: 1.4s;
}


.ai2gi-certification-skill-card {
    left: 15px;
    bottom: 55px;

    animation-delay: 2.5s;
}


@keyframes ai2giCertificationFloat {

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

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

}


/* =========================================================
   FIXED CUSTOM ICONS
   No dependency on tji-code / tji-award etc.
========================================================= */

.ai2gi-certification-floating-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    position: relative;

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

    border-radius: 10px;

    border: 1px solid rgba(207, 2, 31, 0.24);

    background:
        linear-gradient(
            135deg,
            rgba(207, 2, 31, 0.13),
            rgba(91, 45, 115, 0.15)
        );

    color: #dc8295;

    box-shadow:
        inset 0 0 14px rgba(207, 2, 31, 0.04);
}


/* Technology network icon */

.ai2gi-certification-icon-network span {
    width: 5px;
    height: 5px;

    position: absolute;

    border-radius: 50%;

    background: #d56c82;

    box-shadow:
        0 0 7px rgba(207, 2, 31, 0.55);
}


.ai2gi-certification-icon-network span:nth-child(1) {
    left: 9px;
    top: 10px;
}


.ai2gi-certification-icon-network span:nth-child(2) {
    right: 9px;
    top: 10px;
}


.ai2gi-certification-icon-network span:nth-child(3) {
    left: 50%;
    bottom: 8px;

    transform: translateX(-50%);
}


.ai2gi-certification-icon-network i {
    width: 16px;
    height: 13px;

    position: absolute;

    left: 11px;
    top: 12px;

    border-top: 1px solid #b96b7e;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

    transform: skewX(-17deg);
}


.ai2gi-certification-icon-network i::after {
    content: "";

    position: absolute;

    width: 1px;
    height: 11px;

    left: 7px;
    top: 1px;

    background: #b96b7e;

    transform: rotate(35deg);
}


/* Credential badge icon */

.ai2gi-certification-icon-badge {
    border-color: rgba(207, 2, 31, 0.28);
}


.ai2gi-certification-icon-badge::before {
    content: "";

    width: 17px;
    height: 17px;

    border-radius: 50%;

    position: absolute;

    border: 1px solid #d57387;
}


.ai2gi-certification-icon-badge b {
    position: relative;

    color: #df8799;

    font-size: 11px;

    z-index: 2;
}


/* Code icon */

.ai2gi-certification-icon-code span {
    color: #db8295;

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

    font-family: monospace;
}


/* =========================================================
   CERTIFICATION PATHWAYS
========================================================= */

.ai2gi-certification-pathways {
    margin-bottom: 85px;
}


.ai2gi-certification-service-wrapper {
    margin-top: 10px;
}


/* =========================================================
   PROJECT SECTION
========================================================= */

.ai2gi-certification-projects {
    margin-bottom: 90px;
}


.ai2gi-certification-projects .desc {
    font-size: 15px;

    line-height: 1.85;
}


.ai2gi-certification-projects .project-wrapper-2 {
    margin-top: 6px;
}


/* =========================================================
   FAQ VISUAL
========================================================= */

.ai2gi-certification-faq {
    margin-bottom: 95px;
}


.ai2gi-certification-faq-visual {
    height: 100%;

    min-height: 410px;

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

    position: relative;
}


.ai2gi-certification-faq-card {
    position: relative;

    width: min(390px, 90%);

    padding: 45px 40px;

    border-radius: 22px;

    border: 1px solid rgba(128, 91, 158, 0.25);

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(207, 2, 31, 0.13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #1f1948,
            #121337
        );

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}


.ai2gi-certification-faq-card::before {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -55px;
    bottom: -55px;

    border-radius: 50%;

    border: 1px solid rgba(207, 2, 31, 0.16);
}


.ai2gi-certification-faq-card-icon {
    width: 63px;
    height: 63px;

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

    margin-bottom: 27px;

    border-radius: 16px;

    color: #ffffff;

    font-size: 25px;
    font-weight: 600;

    background:
        linear-gradient(
            135deg,
            #CF021F,
            #5d3474
        );

    box-shadow:
        0 0 25px rgba(207, 2, 31, 0.18);
}


.ai2gi-certification-faq-card span {
    display: block;

    color: #9b809e;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.16em;

    margin-bottom: 12px;
}


.ai2gi-certification-faq-card strong {
    display: block;

    color: #ffffff;

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

    font-size: 25px;

    line-height: 1.25;

    margin-bottom: 17px;
}


.ai2gi-certification-faq-card p {
    margin: 0;

    color: #87839b;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   FAQ TYPOGRAPHY
========================================================= */

.ai2gi-certification-faq .faq-text p {
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .ai2gi-certification-hero-layout {
        gap: 45px;
    }

    .ai2gi-certification-card {
        width: min(445px, 88%);
    }

    .ai2gi-certification-ring-one {
        width: 490px;
        height: 490px;
    }

    .ai2gi-certification-ring-two {
        width: 390px;
        height: 390px;
    }

    .ai2gi-certification-floating-card {
        min-width: 185px;
    }

    .ai2gi-certification-expertise-card {
        left: -5px;
    }

    .ai2gi-certification-credential-card {
        right: 0;
    }

}


@media (max-width: 991px) {

    .ai2gi-certification-hero-section {
        padding: 100px 0 90px;
        margin-bottom: 60px;
    }


    .ai2gi-certification-hero-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }


    .ai2gi-certification-hero-content {
        text-align: center;
    }


    .ai2gi-certification-hero-title {
        margin-left: auto;
        margin-right: auto;
    }


    .ai2gi-certification-hero-text {
        margin-left: auto;
        margin-right: auto;
    }


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


    .ai2gi-certification-hero-points {
        justify-content: center;
    }


    .ai2gi-certification-hero-visual {
        min-height: 530px;
        margin-top: 15px;
    }


    .ai2gi-certification-pathways {
        margin-bottom: 65px;
    }


    .ai2gi-certification-projects {
        margin-bottom: 70px;
    }


    .ai2gi-certification-faq {
        margin-bottom: 75px;
    }

}


@media (max-width: 767px) {

    .ai2gi-certification-hero-section {
        padding: 80px 0 70px;
        margin-bottom: 45px;
    }


    .ai2gi-certification-hero-title {
        font-size: 41px;
    }


    .ai2gi-certification-hero-text {
        font-size: 15px;
    }


    .ai2gi-certification-hero-buttons {
        flex-direction: column;
        gap: 12px;
    }


    .ai2gi-certification-hero-points {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }


    .ai2gi-certification-hero-visual {
        min-height: 455px;
    }


    .ai2gi-certification-ring-one {
        width: 350px;
        height: 350px;
    }


    .ai2gi-certification-ring-two {
        width: 285px;
        height: 285px;
    }


    .ai2gi-certification-card {
        width: 91%;

        min-height: 320px;

        padding: 23px;

        border-radius: 19px;
    }


    .ai2gi-certification-card-body {
        padding-top: 34px;
        padding-right: 35px;
    }


    .ai2gi-certification-card-body h3 {
        font-size: 22px;
    }


    .ai2gi-certification-card-body p {
        font-size: 11px;
    }


    .ai2gi-certification-card-seal {
        width: 61px;
        height: 61px;

        right: 18px;
        bottom: 19px;
    }


    .ai2gi-certification-seal-inner {
        width: 45px;
        height: 45px;

        font-size: 14px;
    }


    .ai2gi-certification-card-meta {
        gap: 20px;
    }


    .ai2gi-certification-floating-card {
        min-width: 150px;
        padding: 9px 10px;

        gap: 8px;
    }


    .ai2gi-certification-floating-icon {
        width: 33px;
        height: 33px;
        flex-basis: 33px;
    }


    .ai2gi-certification-floating-content strong {
        font-size: 9px;
    }


    .ai2gi-certification-floating-content small {
        font-size: 8px;
    }


    .ai2gi-certification-expertise-card {
        left: -4px;
        top: 30px;
    }


    .ai2gi-certification-credential-card {
        right: -3px;
        top: 165px;
    }


    .ai2gi-certification-skill-card {
        left: 2px;
        bottom: 19px;
    }


    .ai2gi-certification-pathways {
        margin-bottom: 50px;
    }


    .ai2gi-certification-projects {
        margin-bottom: 55px;
    }


    .ai2gi-certification-faq {
        margin-bottom: 60px;
    }


    .ai2gi-certification-faq-visual {
        min-height: 320px;

        margin-bottom: 35px;
    }


    .ai2gi-certification-faq-card {
        width: 90%;

        padding: 30px 25px;
    }


    .ai2gi-certification-faq-card strong {
        font-size: 22px;
    }

}


/* =========================================================
   AI2Gi WORKSHOP PAGE
   Fully Unique CSS
========================================================= */


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

.ai2gi-workshop-hero {
    position: relative;
    overflow: hidden;

    padding: 125px 0 115px;

    margin-bottom: 85px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(207, 2, 31, 0.25),
            transparent 24%
        ),
        radial-gradient(
            circle at 70% 72%,
            rgba(245, 112, 45, 0.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(1, 1, 123, 0.34),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #0b1238 0%,
            #171440 45%,
            #211342 72%,
            #2e173f 100%
        );

    border-bottom: 1px solid rgba(207, 2, 31, 0.16);
}


.ai2gi-workshop-hero-layout {
    display: grid;

    grid-template-columns: 1.03fr 0.97fr;

    align-items: center;

    gap: 65px;

    position: relative;
    z-index: 5;
}


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

.ai2gi-workshop-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(12px);
}


.ai2gi-workshop-glow-pink {
    width: 280px;
    height: 280px;

    top: -100px;
    right: 15%;

    background: rgba(207, 2, 31, 0.09);
}


.ai2gi-workshop-glow-orange {
    width: 320px;
    height: 320px;

    right: 0;
    bottom: -130px;

    background: rgba(236, 91, 36, 0.10);
}


.ai2gi-workshop-glow-blue {
    width: 280px;
    height: 280px;

    left: -120px;
    bottom: 20%;

    background: rgba(1, 1, 123, 0.17);
}


.ai2gi-workshop-hero-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.08;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 30%,
            black 80%,
            transparent
        );
}


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

.ai2gi-workshop-hero-kicker {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 24px;

    border-radius: 50px;

    border: 1px solid rgba(220, 87, 104, 0.38);

    background: rgba(207, 2, 31, 0.08);

    color: #de9aa5;

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

    letter-spacing: 0.07em;
}


.ai2gi-workshop-kicker-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #CF021F;

    box-shadow:
        0 0 7px rgba(207, 2, 31, 0.8),
        0 0 18px rgba(207, 2, 31, 0.4);
}


.ai2gi-workshop-hero-title {
    max-width: 700px;

    color: #ffffff;

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

    font-size: clamp(45px, 5.4vw, 74px);

    line-height: 1.03;

    font-weight: 700;

    margin-bottom: 24px;
}


.ai2gi-workshop-hero-title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 10%,
            #ed9caf 38%,
            #ff9c58 68%,
            #d85e77 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.ai2gi-workshop-hero-desc {
    max-width: 610px;

    color: #a6a2b8;

    font-size: 17px;

    line-height: 1.85;

    margin-bottom: 32px;
}


.ai2gi-workshop-hero-actions {
    display: flex;
    align-items: center;

    gap: 22px;

    flex-wrap: wrap;

    margin-bottom: 32px;
}


.ai2gi-workshop-secondary-link {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #b5afc1;

    font-size: 14px;
    font-weight: 500;

    transition: 0.3s ease;
}


.ai2gi-workshop-secondary-link span {
    color: #e1818c;

    font-size: 19px;

    transition: 0.3s ease;
}


.ai2gi-workshop-secondary-link:hover {
    color: #ffffff;
}


.ai2gi-workshop-secondary-link:hover span {
    transform: translateX(5px);
}


.ai2gi-workshop-hero-tags {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding-top: 22px;

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


.ai2gi-workshop-hero-tags span {
    padding: 6px 10px;

    border-radius: 5px;

    border: 1px solid rgba(145, 100, 119, 0.22);

    background: rgba(255,255,255,0.025);

    color: #827c91;

    font-size: 9px;

    letter-spacing: 0.05em;
}


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

.ai2gi-workshop-hero-visual {
    min-height: 540px;

    position: relative;

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


.ai2gi-workshop-visual-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ai2gi-workshop-orbit-a {
    width: 520px;
    height: 520px;

    border: 1px solid rgba(207, 2, 31, 0.17);

    animation:
        ai2giWorkshopOrbitA
        18s linear infinite;
}


.ai2gi-workshop-orbit-b {
    width: 390px;
    height: 390px;

    border: 1px dashed rgba(226, 114, 91, 0.16);

    animation:
        ai2giWorkshopOrbitB
        15s linear infinite;
}


@keyframes ai2giWorkshopOrbitA {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes ai2giWorkshopOrbitB {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}


/* =========================================================
   LIVE WORKSHOP CARD
========================================================= */

.ai2gi-workshop-live-card {
    width: min(455px, 88%);

    min-height: 360px;

    position: relative;

    z-index: 6;

    padding: 31px;

    border-radius: 23px;

    border: 1px solid rgba(121, 85, 119, 0.38);

    background:
        linear-gradient(
            145deg,
            rgba(37, 29, 69, 0.97),
            rgba(19, 20, 57, 0.98)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,0.38),
        0 0 45px rgba(207, 2, 31, 0.06);
}


.ai2gi-workshop-live-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #f27d55,
            transparent
        );
}


.ai2gi-workshop-live-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.ai2gi-workshop-live-label {
    color: #9e7888;

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

    letter-spacing: 0.17em;
}


.ai2gi-workshop-live-status {
    padding: 6px 9px;

    border-radius: 5px;

    border: 1px solid rgba(234, 118, 91, 0.27);

    color: #ee9b88;

    background: rgba(234, 118, 91, 0.06);

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

    letter-spacing: 0.11em;
}


.ai2gi-workshop-live-heading {
    padding: 50px 0 38px;
}


.ai2gi-workshop-live-heading small {
    display: block;

    color: #7b748a;

    font-size: 8px;

    letter-spacing: 0.14em;

    margin-bottom: 10px;
}


.ai2gi-workshop-live-heading h3 {
    color: #ffffff;

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

    font-size: 31px;

    line-height: 1.2;

    margin: 0;
}


.ai2gi-workshop-live-heading h3 span {
    display: block;

    color: #ea8991;
}


.ai2gi-workshop-progress {
    padding-bottom: 25px;
}


.ai2gi-workshop-progress-head {
    display: flex;
    justify-content: space-between;

    color: #827c90;

    font-size: 10px;

    margin-bottom: 9px;
}


.ai2gi-workshop-progress-head strong {
    color: #df8c7a;

    font-size: 9px;
}


.ai2gi-workshop-progress-track {
    width: 100%;
    height: 5px;

    border-radius: 5px;

    overflow: hidden;

    background: rgba(255,255,255,0.06);
}


.ai2gi-workshop-progress-track span {
    display: block;

    width: 72%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #CF021F,
            #ee895f
        );
}


.ai2gi-workshop-live-bottom {
    display: flex;

    gap: 30px;

    padding-top: 17px;

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


.ai2gi-workshop-live-bottom small {
    display: block;

    color: #625c70;

    font-size: 8px;

    margin-bottom: 3px;
}


.ai2gi-workshop-live-bottom strong {
    color: #d2ceda;

    font-size: 9px;
}


/* =========================================================
   HERO FLOATING CARDS
========================================================= */

.ai2gi-workshop-floating-card {
    position: absolute;

    z-index: 10;

    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 185px;

    padding: 11px 14px;

    border-radius: 11px;

    border: 1px solid rgba(130, 88, 114, 0.30);

    background:
        rgba(22, 20, 52, 0.92);

    backdrop-filter: blur(11px);

    box-shadow:
        0 15px 35px rgba(0,0,0,0.27);

    animation:
        ai2giWorkshopFloat
        4.4s ease-in-out infinite;
}


.ai2gi-workshop-float-one {
    left: -4px;
    top: 92px;
}


.ai2gi-workshop-float-two {
    right: -5px;
    bottom: 87px;

    animation-delay: 1.5s;
}


.ai2gi-workshop-float-icon {
    width: 36px;
    height: 36px;

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

    border-radius: 9px;

    color: #e8958d;

    border: 1px solid rgba(207, 2, 31, 0.24);

    background:
        linear-gradient(
            135deg,
            rgba(207, 2, 31, 0.13),
            rgba(75, 46, 85, 0.20)
        );

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


.ai2gi-workshop-floating-card strong {
    display: block;

    color: #dfdce4;

    font-size: 10px;

    margin-bottom: 3px;
}


.ai2gi-workshop-floating-card small {
    color: #706a7b;

    font-size: 8px;
}


@keyframes ai2giWorkshopFloat {

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

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

}


/* =========================================================
   WORKSHOP FORMAT
========================================================= */

.ai2gi-workshop-format {
    margin-bottom: 90px;
}


.ai2gi-workshop-section-heading {
    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;
}


.ai2gi-workshop-section-heading > span {
    display: inline-block;

    color: #b87987;

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

    letter-spacing: 0.13em;

    margin-bottom: 12px;
}


.ai2gi-workshop-section-heading h2 {
    color: #ffffff;

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

    font-size: clamp(31px, 4vw, 48px);

    line-height: 1.15;

    margin-bottom: 15px;
}


.ai2gi-workshop-section-heading h2 strong {
    color: #cf6978;

    font-weight: 700;
}


.ai2gi-workshop-section-heading p {
    color: #918da0;

    font-size: 15px;

    line-height: 1.8;

    margin: 0 auto;
}


.ai2gi-workshop-format-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 18px;
}


.ai2gi-workshop-format-card {
    position: relative;

    min-height: 280px;

    padding: 28px 25px;

    border-radius: 16px;

    border: 1px solid rgba(102, 77, 120, 0.25);

    background:
        linear-gradient(
            145deg,
            rgba(28, 23, 60, 0.88),
            rgba(19, 20, 53, 0.88)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.ai2gi-workshop-format-card:hover {
    transform: translateY(-7px);

    border-color: rgba(207, 2, 31, 0.33);

    box-shadow:
        0 20px 45px rgba(0,0,0,0.20),
        0 0 25px rgba(207,2,31,0.05);
}


.ai2gi-workshop-format-number {
    color: #615b70;

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

    letter-spacing: 0.10em;

    margin-bottom: 20px;
}


.ai2gi-workshop-format-symbol {
    width: 46px;
    height: 46px;

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

    margin-bottom: 24px;

    border-radius: 12px;

    color: #df8692;

    border: 1px solid rgba(207, 2, 31, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(207,2,31,0.10),
            rgba(82,47,91,0.16)
        );

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


.ai2gi-workshop-format-card h3 {
    color: #f0edf3;

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

    font-size: 20px;

    margin-bottom: 12px;
}


.ai2gi-workshop-format-card p {
    color: #858193;

    font-size: 13px;

    line-height: 1.75;

    margin-bottom: 23px;
}


.ai2gi-workshop-format-card > span {
    display: inline-block;

    color: #726b7c;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;
}


/* =========================================================
   WORKSHOP TOPICS
========================================================= */

.ai2gi-workshop-topics {
    margin-bottom: 95px;
}


.ai2gi-workshop-topics-panel {
    display: grid;

    grid-template-columns: 0.86fr 1.14fr;

    gap: 55px;

    padding: 60px;

    border-radius: 24px;

    border: 1px solid rgba(83, 65, 111, 0.28);

    background:
        radial-gradient(
            circle at 10% 90%,
            rgba(207,2,31,0.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #17153f,
            #121337
        );
}


.ai2gi-workshop-topics-intro > span {
    display: block;

    color: #b57783;

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

    letter-spacing: 0.15em;

    margin-bottom: 13px;
}


.ai2gi-workshop-topics-intro h2 {
    color: #ffffff;

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

    font-size: 36px;

    line-height: 1.2;

    margin-bottom: 17px;
}


.ai2gi-workshop-topics-intro h2 strong {
    color: #d87383;
}


.ai2gi-workshop-topics-intro p {
    max-width: 460px;

    color: #888396;

    font-size: 14px;

    line-height: 1.85;

    margin-bottom: 28px;
}


.ai2gi-workshop-topic-list {
    display: flex;
    flex-direction: column;

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


.ai2gi-workshop-topic-row {
    display: grid;

    grid-template-columns: 45px 1fr auto;

    align-items: center;

    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(255,255,255,0.07);

    transition:
        padding-left 0.3s ease,
        background 0.3s ease;
}


.ai2gi-workshop-topic-row:hover {
    padding-left: 10px;
}


.ai2gi-workshop-topic-index {
    color: #675f72;

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


.ai2gi-workshop-topic-row strong {
    display: block;

    color: #ebe8ef;

    font-size: 14px;

    margin-bottom: 5px;
}


.ai2gi-workshop-topic-row small {
    color: #777183;

    font-size: 11px;

    line-height: 1.5;
}


.ai2gi-workshop-topic-arrow {
    color: #d57988;

    font-size: 18px;

    transition: 0.3s ease;
}


.ai2gi-workshop-topic-row:hover .ai2gi-workshop-topic-arrow {
    transform: translateX(5px);
}


/* =========================================================
   WORKSHOP EXPERIENCE
========================================================= */

.ai2gi-workshop-experience {
    margin-bottom: 95px;
}


.ai2gi-workshop-experience-header {
    margin-bottom: 42px;
}


.ai2gi-workshop-experience-header
.ai2gi-workshop-section-heading {
    text-align: left;

    margin: 0;
}


.ai2gi-workshop-experience-grid {
    display: grid;

    grid-template-columns: 1.08fr 0.92fr;

    gap: 28px;
}


.ai2gi-workshop-experience-main {
    min-height: 420px;

    padding: 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(207,2,31,0.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #211743,
            #15133a
        );

    border: 1px solid rgba(97,74,125,0.26);
}


.ai2gi-workshop-experience-label {
    color: #a67582;

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

    letter-spacing: 0.16em;

    margin-bottom: 15px;
}


.ai2gi-workshop-experience-main h3 {
    max-width: 520px;

    color: #ffffff;

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

    font-size: 35px;

    line-height: 1.2;

    margin-bottom: 18px;
}


.ai2gi-workshop-experience-main p {
    max-width: 550px;

    color: #8b8799;

    font-size: 14px;

    line-height: 1.85;

    margin-bottom: 38px;
}


.ai2gi-workshop-experience-line {
    display: flex;

    align-items: center;

    gap: 14px;
}


.ai2gi-workshop-experience-line div {
    color: #9690a1;

    font-size: 11px;
}


.ai2gi-workshop-experience-line span {
    display: inline-flex;

    width: 27px;
    height: 27px;

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

    margin-right: 5px;

    border-radius: 50%;

    color: #d97787;

    background: rgba(207,2,31,0.08);

    border: 1px solid rgba(207,2,31,0.18);

    font-size: 9px;
}


.ai2gi-workshop-experience-line i {
    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.35),
            rgba(114,90,127,0.10)
        );
}


.ai2gi-workshop-experience-side {
    display: flex;
    flex-direction: column;

    gap: 17px;
}


.ai2gi-workshop-mini-card {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 18px;

    padding: 25px;

    border-radius: 16px;

    border: 1px solid rgba(91,72,119,0.23);

    background:
        linear-gradient(
            145deg,
            rgba(30,25,63,0.86),
            rgba(18,19,52,0.92)
        );
}


.ai2gi-workshop-mini-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

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

    border-radius: 12px;

    color: #df8290;

    border: 1px solid rgba(207,2,31,0.19);

    background: rgba(207,2,31,0.06);

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


.ai2gi-workshop-mini-card strong {
    display: block;

    color: #e8e4eb;

    font-size: 14px;

    margin-bottom: 6px;
}


.ai2gi-workshop-mini-card p {
    color: #7e788b;

    font-size: 11px;

    line-height: 1.6;

    margin: 0;
}


/* =========================================================
   WORKSHOP FAQ
========================================================= */

.ai2gi-workshop-faq {
    margin-bottom: 100px;
}


.ai2gi-workshop-faq-layout {
    display: grid;

    grid-template-columns: 0.82fr 1.18fr;

    gap: 70px;

    align-items: start;
}


.ai2gi-workshop-faq-intro > span {
    color: #b47783;

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

    letter-spacing: 0.15em;
}


.ai2gi-workshop-faq-intro h2 {
    color: #ffffff;

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

    font-size: 37px;

    line-height: 1.2;

    margin: 13px 0 17px;
}


.ai2gi-workshop-faq-intro h2 strong {
    display: block;

    color: #d77382;
}


.ai2gi-workshop-faq-intro > p {
    max-width: 420px;

    color: #858091;

    font-size: 14px;

    line-height: 1.85;
}


.ai2gi-workshop-faq-tip {
    margin-top: 30px;

    padding: 17px 18px;

    border-left: 2px solid #CF021F;

    background:
        rgba(207,2,31,0.035);
}


.ai2gi-workshop-faq-tip span {
    display: block;

    color: #cf7481;

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

    letter-spacing: 0.14em;

    margin-bottom: 7px;
}


.ai2gi-workshop-faq-tip p {
    color: #777284;

    font-size: 11px;

    line-height: 1.7;

    margin: 0;
}


.ai2gi-workshop-faq-list {
    border-top: 1px solid rgba(255,255,255,0.08);
}


.ai2gi-workshop-faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}


.ai2gi-workshop-faq-question {
    width: 100%;

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

    gap: 20px;

    padding: 23px 0;

    border: 0;

    background: transparent;

    color: #e7e3ea;

    text-align: left;

    font-size: 14px;
    font-weight: 500;
}


.ai2gi-workshop-faq-question b {
    color: #d47786;

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

    transition: transform 0.3s ease;
}


.ai2gi-workshop-faq-question:not(.collapsed) b {
    transform: rotate(45deg);
}


.ai2gi-workshop-faq-answer {
    max-width: 850px;

    padding: 0 35px 23px 0;

    color: #817b8e;

    font-size: 13px;

    line-height: 1.8;
}


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

@media (max-width: 1199px) {

    .ai2gi-workshop-hero-layout {
        gap: 40px;
    }

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

    .ai2gi-workshop-topics-panel {
        padding: 45px;
        gap: 35px;
    }

    .ai2gi-workshop-experience-grid {
        gap: 18px;
    }

}


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

@media (max-width: 991px) {

    .ai2gi-workshop-hero {
        padding: 100px 0 85px;
        margin-bottom: 65px;
    }

    .ai2gi-workshop-hero-layout {
        grid-template-columns: 1fr;
    }

    .ai2gi-workshop-hero-content {
        text-align: center;
    }

    .ai2gi-workshop-hero-title {
        margin-left: auto;
        margin-right: auto;
    }

    .ai2gi-workshop-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ai2gi-workshop-hero-actions {
        justify-content: center;
    }

    .ai2gi-workshop-hero-tags {
        justify-content: center;
    }

    .ai2gi-workshop-hero-visual {
        min-height: 510px;
    }

    .ai2gi-workshop-topics-panel {
        grid-template-columns: 1fr;
    }

    .ai2gi-workshop-experience-grid {
        grid-template-columns: 1fr;
    }

    .ai2gi-workshop-faq-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ai2gi-workshop-experience-header
    .ai2gi-workshop-section-heading {
        text-align: center;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-workshop-hero {
        padding: 80px 0 65px;
        margin-bottom: 50px;
    }

    .ai2gi-workshop-hero-title {
        font-size: 41px;
    }

    .ai2gi-workshop-hero-desc {
        font-size: 15px;
    }

    .ai2gi-workshop-hero-actions {
        flex-direction: column;
    }

    .ai2gi-workshop-hero-visual {
        min-height: 420px;
    }

    .ai2gi-workshop-orbit-a {
        width: 350px;
        height: 350px;
    }

    .ai2gi-workshop-orbit-b {
        width: 275px;
        height: 275px;
    }

    .ai2gi-workshop-live-card {
        width: 91%;
        min-height: 310px;
        padding: 23px;
    }

    .ai2gi-workshop-live-heading {
        padding: 32px 0 27px;
    }

    .ai2gi-workshop-live-heading h3 {
        font-size: 23px;
    }

    .ai2gi-workshop-live-bottom {
        gap: 18px;
    }

    .ai2gi-workshop-floating-card {
        min-width: 145px;
        padding: 8px 10px;
    }

    .ai2gi-workshop-float-one {
        left: -2px;
        top: 28px;
    }

    .ai2gi-workshop-float-two {
        right: -2px;
        bottom: 18px;
    }

    .ai2gi-workshop-floating-card strong {
        font-size: 8px;
    }

    .ai2gi-workshop-floating-card small {
        font-size: 7px;
    }

    .ai2gi-workshop-format {
        margin-bottom: 60px;
    }

    .ai2gi-workshop-format-grid {
        grid-template-columns: 1fr;
    }

    .ai2gi-workshop-section-heading {
        margin-bottom: 32px;
    }

    .ai2gi-workshop-section-heading h2 {
        font-size: 31px;
    }

    .ai2gi-workshop-topics {
        margin-bottom: 65px;
    }

    .ai2gi-workshop-topics-panel {
        padding: 30px 22px;
    }

    .ai2gi-workshop-topics-intro h2 {
        font-size: 29px;
    }

    .ai2gi-workshop-topic-row {
        grid-template-columns: 32px 1fr auto;
        gap: 12px;
        padding: 17px 0;
    }

    .ai2gi-workshop-topic-row strong {
        font-size: 12px;
    }

    .ai2gi-workshop-topic-row small {
        font-size: 9px;
    }

    .ai2gi-workshop-experience {
        margin-bottom: 65px;
    }

    .ai2gi-workshop-experience-main {
        min-height: auto;
        padding: 30px 24px;
    }

    .ai2gi-workshop-experience-main h3 {
        font-size: 28px;
    }

    .ai2gi-workshop-experience-line {
        flex-wrap: wrap;
    }

    .ai2gi-workshop-experience-line i {
        width: 25px;
    }

    .ai2gi-workshop-mini-card {
        padding: 20px;
    }

    .ai2gi-workshop-faq {
        margin-bottom: 70px;
    }

    .ai2gi-workshop-faq-layout {
        gap: 30px;
    }

    .ai2gi-workshop-faq-intro h2 {
        font-size: 30px;
    }

}

/* =========================================================
   WORKSHOP - FONT SIZE UPDATES
========================================================= */

.ai2gi-workshop-hero-desc {
    font-size: 18px !important;
    line-height: 1.85;
}

.ai2gi-workshop-hero-tags span {
    font-size: 11px;
}

.ai2gi-workshop-format-card h3 {
    font-size: 22px;
}

.ai2gi-workshop-format-card p {
    font-size: 15px;
    line-height: 1.8;
}

.ai2gi-workshop-format-card > span {
    font-size: 9px;
}

.ai2gi-workshop-topics-intro p {
    font-size: 15px;
}

.ai2gi-workshop-topic-row strong {
    font-size: 16px;
}

.ai2gi-workshop-topic-row small {
    font-size: 13px;
}

.ai2gi-workshop-experience-main p {
    font-size: 15px;
}

.ai2gi-workshop-mini-card strong {
    font-size: 16px;
}

.ai2gi-workshop-mini-card p {
    font-size: 13px;
}


/* =========================================================
   ADVANCED FAQ
========================================================= */

.ai2gi-workshop-advanced-faq {
    position: relative;
    margin-bottom: 105px;
}


.ai2gi-workshop-faq-heading {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}


.ai2gi-workshop-faq-eyebrow {
    display: inline-block;

    color: #d37b88;

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

    letter-spacing: 0.16em;

    margin-bottom: 13px;
}


.ai2gi-workshop-faq-heading h2 {
    color: #ffffff;

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

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

    line-height: 1.16;

    margin-bottom: 17px;
}


.ai2gi-workshop-faq-heading h2 strong {
    color: #d96f80;
}


.ai2gi-workshop-faq-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #9692a6;

    font-size: 16px;

    line-height: 1.85;
}


/* =========================================================
   FAQ OUTER CONTAINER
========================================================= */

.ai2gi-workshop-faq-shell {
    display: grid;

    grid-template-columns: 0.38fr 1fr;

    min-height: 510px;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid rgba(72, 57, 105, 0.30);

    background:
        linear-gradient(
            145deg,
            #191640,
            #111235
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,0.20);
}


/* =========================================================
   FAQ NAVIGATION
========================================================= */

.ai2gi-workshop-faq-nav {
    padding: 32px 0;

    border-right: 1px solid rgba(255,255,255,0.07);

    background:
        linear-gradient(
            180deg,
            rgba(28,25,64,0.75),
            rgba(18,18,50,0.75)
        );
}


.ai2gi-workshop-faq-nav-label {
    padding: 0 27px;

    margin-bottom: 15px;

    color: #6f697d;

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

    letter-spacing: 0.17em;
}


.ai2gi-workshop-faq-nav-item {
    width: 100%;

    display: grid;

    grid-template-columns: 37px 1fr;

    align-items: center;

    gap: 9px;

    padding: 18px 27px;

    text-align: left;

    border: 0;

    border-left: 2px solid transparent;

    background: transparent;

    color: #8d889a;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.ai2gi-workshop-faq-nav-item span {
    color: #5f596d;

    font-size: 10px;

    font-weight: 700;
}


.ai2gi-workshop-faq-nav-item strong {
    font-size: 13px;

    font-weight: 500;
}


.ai2gi-workshop-faq-nav-item:hover {
    color: #ffffff;

    background: rgba(255,255,255,0.025);
}


.ai2gi-workshop-faq-nav-item.active {
    color: #ffffff;

    border-left-color: #CF021F;

    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.09),
            transparent
        );
}


.ai2gi-workshop-faq-nav-item.active span {
    color: #d97d8a;
}


.ai2gi-workshop-faq-nav-item.active strong {
    color: #eeeaf1;
}


/* =========================================================
   FAQ CONTENT
========================================================= */

.ai2gi-workshop-faq-content {
    position: relative;

    padding: 48px 55px;
}


.ai2gi-workshop-faq-answer-panel {
    min-height: 410px;

    position: relative;

    display: flex;

    gap: 36px;
}


.ai2gi-workshop-faq-number {
    flex: 0 0 auto;

    color: rgba(207,2,31,0.18);

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

    font-size: 72px;

    line-height: 0.9;

    font-weight: 700;
}


.ai2gi-workshop-faq-answer-body {
    max-width: 680px;

    padding-top: 6px;
}


.ai2gi-workshop-faq-answer-body > span {
    display: block;

    color: #bd7781;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.16em;

    margin-bottom: 13px;
}


.ai2gi-workshop-faq-answer-body h3 {
    color: #ffffff;

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

    font-size: 30px;

    line-height: 1.25;

    margin-bottom: 18px;
}


.ai2gi-workshop-faq-answer-body > p {
    color: #9691a3;

    font-size: 16px;

    line-height: 1.9;

    margin-bottom: 32px;
}


/* =========================================================
   FAQ HIGHLIGHT CARDS
========================================================= */

.ai2gi-workshop-faq-highlight {
    display: grid;

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

    gap: 14px;
}


.ai2gi-workshop-faq-highlight > div {
    padding: 18px;

    border-radius: 12px;

    border: 1px solid rgba(97,72,116,0.23);

    background:
        rgba(255,255,255,0.025);
}


.ai2gi-workshop-faq-highlight small {
    display: block;

    color: #6e6879;

    font-size: 10px;

    margin-bottom: 7px;
}


.ai2gi-workshop-faq-highlight strong {
    color: #ddd9e2;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================================
   FAQ ACTIVE INDICATOR
========================================================= */

.ai2gi-workshop-faq-answer-panel::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #CF021F,
            rgba(207,2,31,0.15),
            transparent
        );
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 1200px) {

    .ai2gi-workshop-hero-desc {
        font-size: 18px;
    }

    .ai2gi-workshop-format-card p {
        font-size: 15px;
    }

    .ai2gi-workshop-topic-row small {
        font-size: 13px;
    }

}


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

@media (max-width: 991px) {

    .ai2gi-workshop-advanced-faq {
        margin-bottom: 75px;
    }

    .ai2gi-workshop-faq-shell {
        grid-template-columns: 1fr;
    }

    .ai2gi-workshop-faq-nav {
        display: grid;

        grid-template-columns: repeat(5, 1fr);

        border-right: 0;

        border-bottom: 1px solid rgba(255,255,255,0.07);

        padding: 10px;
    }

    .ai2gi-workshop-faq-nav-label {
        display: none;
    }

    .ai2gi-workshop-faq-nav-item {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 5px;

        padding: 13px 8px;

        border-left: 0;

        border-bottom: 2px solid transparent;

        text-align: center;
    }

    .ai2gi-workshop-faq-nav-item.active {
        border-left: 0;

        border-bottom-color: #CF021F;
    }

    .ai2gi-workshop-faq-nav-item strong {
        font-size: 11px;
    }

    .ai2gi-workshop-faq-content {
        padding: 40px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-workshop-hero-desc {
        font-size: 16px;
    }

    .ai2gi-workshop-format-card p {
        font-size: 14px;
    }

    .ai2gi-workshop-topic-row strong {
        font-size: 14px;
    }

    .ai2gi-workshop-topic-row small {
        font-size: 11px;
    }

    .ai2gi-workshop-mini-card strong {
        font-size: 14px;
    }

    .ai2gi-workshop-mini-card p {
        font-size: 12px;
    }

    .ai2gi-workshop-faq-heading {
        margin-bottom: 35px;
    }

    .ai2gi-workshop-faq-heading h2 {
        font-size: 31px;
    }

    .ai2gi-workshop-faq-heading p {
        font-size: 14px;
    }

    .ai2gi-workshop-faq-nav {
        grid-template-columns: repeat(5, 1fr);

        padding: 7px;
    }

    .ai2gi-workshop-faq-nav-item {
        padding: 10px 3px;
    }

    .ai2gi-workshop-faq-nav-item span {
        font-size: 8px;
    }

    .ai2gi-workshop-faq-nav-item strong {
        display: none;
    }

    .ai2gi-workshop-faq-content {
        padding: 28px 22px;
    }

    .ai2gi-workshop-faq-answer-panel {
        min-height: auto;

        display: block;
    }

    .ai2gi-workshop-faq-number {
        display: block;

        font-size: 48px;

        margin-bottom: 15px;
    }

    .ai2gi-workshop-faq-answer-body h3 {
        font-size: 24px;
    }

    .ai2gi-workshop-faq-answer-body > p {
        font-size: 14px;
    }

    .ai2gi-workshop-faq-highlight {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   AI2Gi INTERNSHIP PAGE
   COMPLETELY UNIQUE CSS
========================================================= */


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

.ai2gi-internship-hero {
    position: relative;
    overflow: hidden;

    padding: 125px 0 115px;

    margin-bottom: 85px;

    background:
        radial-gradient(
            circle at 81% 15%,
            rgba(207, 2, 31, 0.30),
            transparent 23%
        ),
        radial-gradient(
            circle at 72% 75%,
            rgba(238, 102, 48, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 23% 85%,
            rgba(101, 52, 126, 0.17),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #13143e 0%,
            #20143f 43%,
            #30153e 70%,
            #35173c 100%
        );

    border-bottom: 1px solid rgba(207,2,31,0.16);
}


.ai2gi-internship-hero-layout {
    display: grid;

    grid-template-columns: 1.04fr 0.96fr;

    align-items: center;

    gap: 60px;

    position: relative;

    z-index: 4;
}


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

.ai2gi-internship-hero-light {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(10px);
}


.ai2gi-internship-light-pink {
    width: 300px;
    height: 300px;

    top: -100px;
    right: 18%;

    background: rgba(207,2,31,0.11);
}


.ai2gi-internship-light-orange {
    width: 330px;
    height: 330px;

    right: -80px;
    bottom: -130px;

    background: rgba(239,98,52,0.10);
}


.ai2gi-internship-light-violet {
    width: 300px;
    height: 300px;

    left: -120px;
    bottom: 20%;

    background: rgba(87,48,112,0.15);
}


.ai2gi-internship-grid {
    position: absolute;

    inset: 0;

    opacity: 0.07;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


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

.ai2gi-internship-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 24px;

    border-radius: 50px;

    border: 1px solid rgba(207,2,31,0.40);

    background: rgba(207,2,31,0.08);

    color: #e09ca6;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.07em;
}


.ai2gi-internship-kicker span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #CF021F;

    box-shadow:
        0 0 8px rgba(207,2,31,0.80),
        0 0 17px rgba(207,2,31,0.35);
}


.ai2gi-internship-hero-title {
    max-width: 690px;

    color: #ffffff;

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

    font-size: clamp(44px, 5.3vw, 72px);

    line-height: 1.04;

    font-weight: 700;

    margin-bottom: 25px;
}


.ai2gi-internship-hero-title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 5%,
            #eaa5b0 35%,
            #ef956e 68%,
            #d9677d 100%
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.ai2gi-internship-hero-desc {
    max-width: 625px;

    color: #a9a4b7;

    font-size: 18px;

    line-height: 1.85;

    margin-bottom: 33px;
}


.ai2gi-internship-hero-actions {
    display: flex;

    align-items: center;

    gap: 22px;

    flex-wrap: wrap;

    margin-bottom: 34px;
}


.ai2gi-internship-secondary-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #b9b2c2;

    font-size: 15px;

    font-weight: 500;
}


.ai2gi-internship-secondary-link span {
    color: #e28382;

    font-size: 19px;

    transition: 0.3s ease;
}


.ai2gi-internship-secondary-link:hover {
    color: #ffffff;
}


.ai2gi-internship-secondary-link:hover span {
    transform: translateX(5px);
}


.ai2gi-internship-hero-features {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0;

    padding-top: 23px;

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


.ai2gi-internship-hero-features div {
    flex: 1;

    padding-right: 25px;
}


.ai2gi-internship-hero-features div + div {
    padding-left: 25px;

    border-left: 1px solid rgba(255,255,255,0.08);
}


.ai2gi-internship-hero-features span {
    display: block;

    color: #d97782;

    font-size: 12px;

    font-weight: 700;

    margin-bottom: 5px;
}


.ai2gi-internship-hero-features p {
    margin: 0;

    color: #817c8d;

    font-size: 12px;
}


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

.ai2gi-internship-hero-visual {
    position: relative;

    min-height: 550px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.ai2gi-internship-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ai2gi-internship-orbit-one {
    width: 525px;
    height: 525px;

    border: 1px solid rgba(207,2,31,0.15);

    animation:
        ai2giInternshipOrbitOne
        21s linear infinite;
}


.ai2gi-internship-orbit-two {
    width: 405px;
    height: 405px;

    border: 1px dashed rgba(227,113,90,0.15);

    animation:
        ai2giInternshipOrbitTwo
        16s linear infinite;
}


@keyframes ai2giInternshipOrbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes ai2giInternshipOrbitTwo {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


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

.ai2gi-internship-dashboard {
    position: relative;

    z-index: 7;

    width: min(465px, 88%);

    min-height: 365px;

    padding: 31px;

    border-radius: 23px;

    border: 1px solid rgba(128,88,110,0.35);

    background:
        linear-gradient(
            145deg,
            rgba(38,28,65,0.98),
            rgba(20,19,54,0.98)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,0.39),
        0 0 40px rgba(207,2,31,0.06);
}


.ai2gi-internship-dashboard::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #ef8c66,
            transparent
        );
}


.ai2gi-internship-dashboard-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.ai2gi-internship-dashboard-top small {
    display: block;

    color: #736c7c;

    font-size: 8px;

    letter-spacing: 0.15em;

    margin-bottom: 5px;
}


.ai2gi-internship-dashboard-top strong {
    color: #ded9e3;

    font-size: 11px;

    letter-spacing: 0.05em;
}


.ai2gi-internship-live {
    padding: 6px 10px;

    border-radius: 5px;

    color: #e89686;

    border: 1px solid rgba(237,111,91,0.25);

    background: rgba(237,111,91,0.06);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.ai2gi-internship-dashboard-main {
    padding: 49px 0 36px;
}


.ai2gi-internship-dashboard-main > span {
    color: #aa7380;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.16em;

    display: block;

    margin-bottom: 10px;
}


.ai2gi-internship-dashboard-main h3 {
    color: #ffffff;

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

    font-size: 31px;

    line-height: 1.18;

    margin-bottom: 14px;
}


.ai2gi-internship-dashboard-main h3 strong {
    color: #df7b86;
}


.ai2gi-internship-dashboard-main p {
    max-width: 340px;

    color: #827d8f;

    font-size: 13px;

    line-height: 1.7;

    margin: 0;
}


.ai2gi-internship-dashboard-progress {
    padding-bottom: 24px;
}


.ai2gi-internship-dashboard-progress > div:first-child {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;
}


.ai2gi-internship-dashboard-progress span {
    color: #7e7789;

    font-size: 9px;
}


.ai2gi-internship-dashboard-progress strong {
    color: #df8a78;

    font-size: 8px;
}


.ai2gi-internship-progress-bar {
    width: 100%;

    height: 5px;

    overflow: hidden;

    border-radius: 6px;

    background: rgba(255,255,255,0.06);
}


.ai2gi-internship-progress-bar span {
    display: block;

    width: 68%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #CF021F,
            #ec8a63
        );
}


.ai2gi-internship-dashboard-bottom {
    display: flex;

    gap: 35px;

    padding-top: 17px;

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


.ai2gi-internship-dashboard-bottom small {
    display: block;

    color: #5f596e;

    font-size: 8px;

    margin-bottom: 4px;
}


.ai2gi-internship-dashboard-bottom strong {
    color: #d5d0dc;

    font-size: 9px;
}


/* =========================================================
   HERO FLOATING CARDS
========================================================= */

.ai2gi-internship-float-card {
    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 185px;

    padding: 11px 14px;

    border-radius: 11px;

    border: 1px solid rgba(131,88,109,0.31);

    background:
        rgba(23,20,53,0.94);

    backdrop-filter: blur(12px);

    box-shadow:
        0 17px 35px rgba(0,0,0,0.27);

    animation:
        ai2giInternshipFloat
        4.7s ease-in-out infinite;
}


.ai2gi-internship-float-card > span {
    width: 36px;
    height: 36px;

    display: flex;

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

    flex: 0 0 36px;

    border-radius: 9px;

    border: 1px solid rgba(207,2,31,0.22);

    background: rgba(207,2,31,0.07);

    color: #df8790;

    font-size: 13px;

    font-weight: 700;
}


.ai2gi-internship-float-card strong {
    display: block;

    color: #ddd9e3;

    font-size: 10px;

    margin-bottom: 3px;
}


.ai2gi-internship-float-card small {
    color: #726b7d;

    font-size: 8px;
}


.ai2gi-internship-float-one {
    left: -6px;
    top: 95px;
}


.ai2gi-internship-float-two {
    right: -5px;
    bottom: 78px;

    animation-delay: 1.6s;
}


@keyframes ai2giInternshipFloat {

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

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

}


/* =========================================================
   COUNTUP
========================================================= */

.ai2gi-internship-countup {
    margin-bottom: 90px;
}


.ai2gi-internship-countup .sec-title {
    max-width: 800px;

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


.ai2gi-internship-countup .desc {
    font-size: 15px;

    line-height: 1.8;
}


.ai2gi-internship-countup .count-text {
    font-size: 16px;
}


.ai2gi-internship-count-icon {
    color: #d97985;
}


/* =========================================================
   PATHWAYS
========================================================= */

.ai2gi-internship-pathways {
    margin-bottom: 95px;
}


.ai2gi-internship-pathways .sec-heading .sec-title {
    max-width: 450px;
}


.ai2gi-internship-pathways .content-wrap > .desc {
    font-size: 16px;

    line-height: 1.85;
}


.ai2gi-internship-pathways .service-content .desc {
    font-size: 15px;

    line-height: 1.8;
}


.ai2gi-internship-pathways .list-style-2 li {
    font-size: 13px;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.ai2gi-internship-testimonials {
    margin-bottom: 100px;
}


.ai2gi-internship-testimonials .content-wrap > .desc {
    font-size: 16px;

    line-height: 1.85;
}


.ai2gi-internship-trust-box {
    display: inline-block;

    margin-top: 25px;

    padding: 16px 20px;

    border-left: 2px solid #CF021F;

    background:
        rgba(207,2,31,0.04);
}


.ai2gi-internship-trust-box span {
    display: block;

    color: #9a6e79;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;

    margin-bottom: 6px;
}


.ai2gi-internship-trust-box strong {
    color: #ddd9e2;

    font-size: 14px;
}


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

.ai2gi-internship-faq {
    margin-bottom: 105px;
}


.ai2gi-internship-faq-layout {
    display: grid;

    grid-template-columns: 0.80fr 1.20fr;

    gap: 70px;

    align-items: start;
}


/* =========================================================
   FAQ INTRO
========================================================= */

.ai2gi-internship-faq-intro > span {
    display: block;

    color: #b1727d;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.16em;

    margin-bottom: 12px;
}


.ai2gi-internship-faq-intro > h2 {
    color: #ffffff;

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

    font-size: 38px;

    line-height: 1.18;

    margin-bottom: 18px;
}


.ai2gi-internship-faq-intro > h2 strong {
    display: block;

    color: #d87482;
}


.ai2gi-internship-faq-intro > p {
    max-width: 450px;

    color: #878292;

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 30px;
}


/* =========================================================
   CUSTOM FAQ CARD
========================================================= */

.ai2gi-internship-faq-card {
    position: relative;

    max-width: 430px;

    padding: 27px;

    border-radius: 20px;

    overflow: hidden;

    border: 1px solid rgba(86,64,113,0.28);

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(207,2,31,0.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #211842,
            #141337
        );

    box-shadow:
        0 28px 65px rgba(0,0,0,0.22);
}


.ai2gi-internship-faq-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 19px;

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.ai2gi-internship-faq-card-top span {
    color: #e2dce8;

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

    font-size: 13px;

    font-weight: 700;
}


.ai2gi-internship-faq-card-top small {
    color: #96737d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;
}


.ai2gi-internship-faq-card-center {
    display: flex;

    align-items: center;

    gap: 17px;

    padding: 32px 0;
}


.ai2gi-internship-faq-circle {
    width: 54px;
    height: 54px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 18px;

    background:
        linear-gradient(
            135deg,
            #CF021F,
            #673c6e
        );

    box-shadow:
        0 0 25px rgba(207,2,31,0.16);
}


.ai2gi-internship-faq-card-center strong {
    color: #f1edf3;

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

    font-size: 20px;

    letter-spacing: 0.08em;
}


.ai2gi-internship-faq-card-line {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #CF021F,
            rgba(207,2,31,0.10),
            transparent
        );
}


.ai2gi-internship-faq-card-bottom {
    display: flex;

    justify-content: space-between;

    padding-top: 19px;
}


.ai2gi-internship-faq-card-bottom span {
    color: #777080;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


/* =========================================================
   FAQ LIST
========================================================= */

.ai2gi-internship-faq-list {
    border-top: 1px solid rgba(255,255,255,0.08);
}


.ai2gi-internship-faq-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);

    transition: background 0.3s ease;
}


.ai2gi-internship-faq-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.035),
            transparent
        );
}


.ai2gi-internship-faq-question {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 25px 0;

    border: 0;

    background: transparent;

    color: #e4e0e8;

    text-align: left;

    font-size: 16px;

    font-weight: 500;
}


.ai2gi-internship-faq-question b {
    color: #d67a86;

    font-size: 21px;

    font-weight: 400;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


.ai2gi-internship-faq-question:not(.collapsed) b {
    transform: rotate(45deg);

    color: #ee8d8d;
}


.ai2gi-internship-faq-answer {
    max-width: 850px;

    padding: 0 40px 25px 0;

    color: #888293;

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   LARGE SCREEN FONT BOOST
========================================================= */

@media (min-width: 1200px) {

    .ai2gi-internship-hero-desc {
        font-size: 18px;
    }

    .ai2gi-internship-countup .desc {
        font-size: 15px;
    }

    .ai2gi-internship-pathways .service-content .desc {
        font-size: 15px;
    }

}


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

@media (max-width: 991px) {

    .ai2gi-internship-hero {
        padding: 100px 0 85px;

        margin-bottom: 65px;
    }

    .ai2gi-internship-hero-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .ai2gi-internship-hero-content {
        text-align: center;
    }

    .ai2gi-internship-hero-title {
        margin-left: auto;
        margin-right: auto;
    }

    .ai2gi-internship-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ai2gi-internship-hero-actions {
        justify-content: center;
    }

    .ai2gi-internship-hero-features {
        justify-content: center;
        text-align: left;
    }

    .ai2gi-internship-hero-visual {
        min-height: 520px;
    }

    .ai2gi-internship-countup {
        margin-bottom: 65px;
    }

    .ai2gi-internship-pathways {
        margin-bottom: 70px;
    }

    .ai2gi-internship-testimonials {
        margin-bottom: 75px;
    }

    .ai2gi-internship-faq-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .ai2gi-internship-faq {
        margin-bottom: 80px;
    }

    .ai2gi-internship-faq-card {
        max-width: 520px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-internship-hero {
        padding: 80px 0 65px;

        margin-bottom: 50px;
    }

    .ai2gi-internship-hero-title {
        font-size: 41px;
    }

    .ai2gi-internship-hero-desc {
        font-size: 16px;
    }

    .ai2gi-internship-hero-actions {
        flex-direction: column;
    }

    .ai2gi-internship-hero-features {
        flex-direction: column;

        align-items: flex-start;

        gap: 13px;
    }

    .ai2gi-internship-hero-features div {
        width: 100%;

        padding: 0 !important;

        border: 0 !important;
    }

    .ai2gi-internship-hero-visual {
        min-height: 420px;
    }

    .ai2gi-internship-orbit-one {
        width: 350px;
        height: 350px;
    }

    .ai2gi-internship-orbit-two {
        width: 280px;
        height: 280px;
    }

    .ai2gi-internship-dashboard {
        width: 92%;

        min-height: 315px;

        padding: 23px;

        border-radius: 18px;
    }

    .ai2gi-internship-dashboard-main {
        padding: 33px 0 27px;
    }

    .ai2gi-internship-dashboard-main h3 {
        font-size: 23px;
    }

    .ai2gi-internship-dashboard-main p {
        font-size: 11px;
    }

    .ai2gi-internship-dashboard-bottom {
        gap: 18px;
    }

    .ai2gi-internship-float-card {
        min-width: 145px;

        padding: 8px 10px;
    }

    .ai2gi-internship-float-one {
        left: -3px;
        top: 25px;
    }

    .ai2gi-internship-float-two {
        right: -3px;
        bottom: 16px;
    }

    .ai2gi-internship-float-card strong {
        font-size: 8px;
    }

    .ai2gi-internship-float-card small {
        font-size: 7px;
    }

    .ai2gi-internship-countup {
        margin-bottom: 55px;
    }

    .ai2gi-internship-pathways {
        margin-bottom: 60px;
    }

    .ai2gi-internship-testimonials {
        margin-bottom: 65px;
    }

   /* =========================================================
   INTERNSHIP FAQ - TEMPLATE STYLE
   NO PHOTO / NO BOY IMAGE
========================================================= */

.ai2gi-internship-faq-template {
    margin-bottom: 105px;
}


.ai2gi-internship-faq-template .sec-heading {
    margin-bottom: 25px;
}


.ai2gi-internship-faq-template .sec-heading .sec-title {
    max-width: 520px;
}


/* =========================================================
   CUSTOM SUPPORT CARD
========================================================= */

.ai2gi-internship-faq-support {
    position: relative;

    max-width: 470px;

    padding: 28px;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(76, 59, 109, 0.30);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(207, 2, 31, 0.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #211842,
            #151337
        );

    box-shadow:
        0 25px 55px rgba(0,0,0,0.20);
}


.ai2gi-internship-faq-support::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #e98367,
            transparent
        );
}


.ai2gi-internship-faq-support-top {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 22px;
}


.ai2gi-internship-faq-support-mark {
    width: 47px;
    height: 47px;

    display: flex;

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

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            #CF021F,
            #61376c
        );

    color: #ffffff;

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 0 20px rgba(207,2,31,0.14);
}


.ai2gi-internship-faq-support-label {
    display: block;

    color: #917280;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 4px;
}


.ai2gi-internship-faq-support-top strong {
    display: block;

    color: #e9e4eb;

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

    font-size: 17px;
}


.ai2gi-internship-faq-support-line {
    height: 1px;

    margin-bottom: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.32),
            rgba(255,255,255,0.06),
            transparent
        );
}


.ai2gi-internship-faq-support > .desc {
    color: #878192;

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 22px;
}


.ai2gi-internship-faq-support-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}


.ai2gi-internship-faq-support-tags span {
    padding: 6px 9px;

    border-radius: 5px;

    border: 1px solid rgba(207,2,31,0.17);

    background: rgba(207,2,31,0.04);

    color: #9f7a82;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.08em;
}


/* =========================================================
   FAQ TEXT SIZE
========================================================= */

.ai2gi-internship-faq-template .faq-title {
    font-size: 16px;
}


.ai2gi-internship-faq-template .faq-text p {
    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   SECTION SPACE
========================================================= */

.ai2gi-internship-faq-template {
    padding-top: 20px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .ai2gi-internship-faq-template {
        margin-bottom: 75px;
    }

    .ai2gi-internship-faq-support {
        max-width: 100%;

        margin-bottom: 35px;
    }

}


@media (max-width: 767px) {

    .ai2gi-internship-faq-template {
        margin-bottom: 60px;
    }

    .ai2gi-internship-faq-support {
        padding: 23px;
    }

    .ai2gi-internship-faq-support > .desc {
        font-size: 14px;
    }

    .ai2gi-internship-faq-template .faq-title {
        font-size: 14px;
    }

    .ai2gi-internship-faq-template .faq-text p {
        font-size: 14px;
    }

}

}


/* =========================================================
   INTERNSHIP EXPERIENCE - EQUAL CARD HEIGHT
========================================================= */

.ai2gi-internship-countup .row {
    align-items: stretch;
}

.ai2gi-internship-countup .col-lg-4 {
    display: flex;
}

.ai2gi-internship-countup .countup-item-wrap {
    width: 100%;
    height: 100%;
    display: flex;
}

.ai2gi-internship-countup .countup-item {
    width: 100%;
    height: 100%;
    min-height: 315px;

    display: flex;
    flex-direction: column;

    padding: 32px 28px;
}

.ai2gi-internship-countup .countup-item .desc {
    flex: 1;
}

@media (max-width: 991px) {
    .ai2gi-internship-countup .countup-item {
        min-height: 290px;
    }
}

@media (max-width: 767px) {
    .ai2gi-internship-countup .countup-item {
        min-height: 270px;
    }
}


/* =========================================================
   AI2Gi RESEARCH PAGE
   UNIQUE CSS
========================================================= */


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

.ai2gi-research-hero {
    position: relative;
    overflow: hidden;

    padding: 125px 0 115px;

    margin-bottom: 90px;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(207, 2, 31, 0.25),
            transparent 24%
        ),
        radial-gradient(
            circle at 72% 78%,
            rgba(177, 71, 132, 0.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 24% 85%,
            rgba(55, 28, 93, 0.24),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #111338 0%,
            #1d153f 42%,
            #2b1644 72%,
            #33163d 100%
        );

    border-bottom: 1px solid rgba(207,2,31,0.15);
}


.ai2gi-research-hero-layout {
    display: grid;

    grid-template-columns: 1.03fr 0.97fr;

    align-items: center;

    gap: 62px;

    position: relative;

    z-index: 4;
}


.ai2gi-research-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(15px);
}


.ai2gi-research-glow-one {
    width: 300px;
    height: 300px;

    top: -110px;
    right: 15%;

    background: rgba(207,2,31,0.10);
}


.ai2gi-research-glow-two {
    width: 340px;
    height: 340px;

    right: -100px;
    bottom: -130px;

    background: rgba(184,85,137,0.10);
}


.ai2gi-research-glow-three {
    width: 260px;
    height: 260px;

    left: -100px;
    bottom: 20%;

    background: rgba(49,38,105,0.18);
}


.ai2gi-research-hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.07;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.06) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


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

.ai2gi-research-hero-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 24px;

    border-radius: 50px;

    border: 1px solid rgba(207,2,31,0.36);

    background: rgba(207,2,31,0.07);

    color: #df9aa7;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.06em;
}


.ai2gi-research-hero-kicker span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #CF021F;

    box-shadow:
        0 0 8px rgba(207,2,31,0.85),
        0 0 18px rgba(207,2,31,0.32);
}


.ai2gi-research-hero-title {
    max-width: 720px;

    color: #ffffff;

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

    font-size: clamp(44px, 5.3vw, 72px);

    line-height: 1.04;

    font-weight: 700;

    margin-bottom: 25px;
}


.ai2gi-research-hero-title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 8%,
            #e4a5c0 38%,
            #d992b6 66%,
            #cc667e 100%
        );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.ai2gi-research-hero-desc {
    max-width: 620px;

    color: #a8a4b8;

    font-size: 18px;

    line-height: 1.85;

    margin-bottom: 33px;
}


.ai2gi-research-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-bottom: 32px;
}


.ai2gi-research-secondary-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #b8b1c3;

    font-size: 15px;

    transition: 0.3s ease;
}


.ai2gi-research-secondary-link span {
    color: #db8193;

    font-size: 20px;

    transition: 0.3s ease;
}


.ai2gi-research-secondary-link:hover {
    color: #ffffff;
}


.ai2gi-research-secondary-link:hover span {
    transform: translateX(5px);
}


.ai2gi-research-hero-tags {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding-top: 22px;

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


.ai2gi-research-hero-tags span {
    padding: 6px 10px;

    border-radius: 5px;

    border: 1px solid rgba(150,92,129,0.25);

    background: rgba(255,255,255,0.022);

    color: #877e91;

    font-size: 10px;
}


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

.ai2gi-research-hero-visual {
    min-height: 555px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;
}


.ai2gi-research-hero-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ai2gi-research-orbit-one {
    width: 525px;
    height: 525px;

    border: 1px solid rgba(207,2,31,0.16);

    animation:
        ai2giResearchOrbitOne
        22s linear infinite;
}


.ai2gi-research-orbit-two {
    width: 405px;
    height: 405px;

    border: 1px dashed rgba(195,102,144,0.16);

    animation:
        ai2giResearchOrbitTwo
        17s linear infinite;
}


@keyframes ai2giResearchOrbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes ai2giResearchOrbitTwo {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* =========================================================
   RESEARCH LAB CARD
========================================================= */

.ai2gi-research-lab-card {
    width: min(470px, 90%);

    min-height: 370px;

    position: relative;

    z-index: 7;

    padding: 31px;

    border-radius: 23px;

    border: 1px solid rgba(117,79,120,0.37);

    background:
        linear-gradient(
            145deg,
            rgba(37,28,67,0.98),
            rgba(19,19,53,0.98)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,0.38),
        0 0 40px rgba(207,2,31,0.06);
}


.ai2gi-research-lab-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #b76297,
            transparent
        );
}


.ai2gi-research-lab-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.ai2gi-research-lab-top small {
    display: block;

    color: #706879;

    font-size: 8px;

    letter-spacing: 0.15em;

    margin-bottom: 4px;
}


.ai2gi-research-lab-top strong {
    color: #ddd8e2;

    font-size: 10px;

    letter-spacing: 0.06em;
}


.ai2gi-research-lab-top > span {
    padding: 6px 9px;

    border-radius: 5px;

    color: #df8392;

    border: 1px solid rgba(207,2,31,0.25);

    background: rgba(207,2,31,0.06);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.ai2gi-research-lab-main {
    padding: 48px 0 34px;
}


.ai2gi-research-lab-main > small {
    display: block;

    color: #a07385;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 10px;
}


.ai2gi-research-lab-main h3 {
    color: #ffffff;

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

    font-size: 31px;

    line-height: 1.2;

    margin-bottom: 14px;
}


.ai2gi-research-lab-main h3 strong {
    display: block;

    color: #d8829c;
}


.ai2gi-research-lab-main p {
    max-width: 350px;

    color: #817c8e;

    font-size: 13px;

    line-height: 1.8;

    margin: 0;
}


/* =========================================================
   RESEARCH FLOW
========================================================= */

.ai2gi-research-lab-flow {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;
}


.ai2gi-research-flow-step {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #6f687a;

    font-size: 9px;
}


.ai2gi-research-flow-step span {
    width: 25px;
    height: 25px;

    display: inline-flex;

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

    border-radius: 50%;

    border: 1px solid rgba(107,85,120,0.25);

    font-size: 8px;
}


.ai2gi-research-flow-step.active {
    color: #d8ccd9;
}


.ai2gi-research-flow-step.active span {
    color: #ffffff;

    border-color: rgba(207,2,31,0.38);

    background: rgba(207,2,31,0.12);
}


.ai2gi-research-lab-flow > i {
    width: 24px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.28),
            rgba(105,82,121,0.12)
        );
}


/* =========================================================
   LAB BOTTOM
========================================================= */

.ai2gi-research-lab-bottom {
    display: flex;

    gap: 28px;

    padding-top: 17px;

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


.ai2gi-research-lab-bottom small {
    display: block;

    color: #5f596e;

    font-size: 8px;

    margin-bottom: 4px;
}


.ai2gi-research-lab-bottom strong {
    color: #d2ced9;

    font-size: 9px;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.ai2gi-research-floating-card {
    position: absolute;

    z-index: 9;

    min-width: 190px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    border-radius: 11px;

    border: 1px solid rgba(119,81,116,0.28);

    background:
        rgba(22,19,51,0.94);

    backdrop-filter: blur(11px);

    box-shadow:
        0 16px 35px rgba(0,0,0,0.25);

    animation:
        ai2giResearchFloat
        4.6s ease-in-out infinite;
}


.ai2gi-research-floating-card > span {
    width: 36px;
    height: 36px;

    display: flex;

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

    flex: 0 0 36px;

    border-radius: 9px;

    background: rgba(207,2,31,0.07);

    border: 1px solid rgba(207,2,31,0.21);

    color: #dd8293;

    font-size: 13px;

    font-weight: 700;
}


.ai2gi-research-floating-card strong {
    display: block;

    color: #ded9e2;

    font-size: 10px;

    margin-bottom: 3px;
}


.ai2gi-research-floating-card small {
    color: #726b7d;

    font-size: 8px;
}


.ai2gi-research-float-one {
    left: -4px;
    top: 90px;
}


.ai2gi-research-float-two {
    right: -3px;
    bottom: 80px;

    animation-delay: 1.5s;
}


@keyframes ai2giResearchFloat {

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

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

}


/* =========================================================
   RESEARCH PROCESS
========================================================= */

.ai2gi-research-process {
    margin-bottom: 90px;
}


.ai2gi-research-process .process-content .desc {
    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   SECOND RESEARCH WORKFLOW
========================================================= */

.ai2gi-research-workflow {
    margin-bottom: 95px;
}


.ai2gi-research-workflow-intro {
    max-width: 700px;

    color: #9994a8;

    font-size: 16px;

    line-height: 1.85;

    margin-top: 20px;
}


.ai2gi-research-workflow .process-content .desc {
    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   CUSTOM RESEARCH FOCUS
========================================================= */

.ai2gi-research-lab-section {
    margin-bottom: 100px;
}


.ai2gi-research-lab-heading {
    max-width: 760px;

    text-align: center;

    margin: 0 auto 50px;
}


.ai2gi-research-lab-heading > span {
    display: inline-block;

    color: #b87586;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.16em;

    margin-bottom: 12px;
}


.ai2gi-research-lab-heading h2 {
    color: #ffffff;

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

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

    line-height: 1.16;

    margin-bottom: 16px;
}


.ai2gi-research-lab-heading h2 strong {
    display: block;

    color: #d7798a;
}


.ai2gi-research-lab-heading p {
    color: #8d8899;

    font-size: 15px;

    line-height: 1.85;
}


.ai2gi-research-focus-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 17px;
}


.ai2gi-research-focus-card {
    min-height: 320px;

    position: relative;

    padding: 27px 24px;

    border-radius: 17px;

    border: 1px solid rgba(89,70,113,0.24);

    background:
        linear-gradient(
            145deg,
            rgba(29,24,60,0.91),
            rgba(18,19,52,0.92)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


.ai2gi-research-focus-card:hover {
    transform: translateY(-7px);

    border-color: rgba(207,2,31,0.28);

    box-shadow:
        0 22px 45px rgba(0,0,0,0.19);
}


.ai2gi-research-focus-number {
    display: block;

    color: #625c70;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.12em;

    margin-bottom: 20px;
}


.ai2gi-research-focus-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 24px;

    border-radius: 13px;

    color: #dc8292;

    border: 1px solid rgba(207,2,31,0.18);

    background:
        linear-gradient(
            135deg,
            rgba(207,2,31,0.10),
            rgba(95,53,112,0.14)
        );

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

    font-size: 12px;

    font-weight: 700;
}


.ai2gi-research-focus-card h3 {
    color: #ece8ee;

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

    font-size: 19px;

    line-height: 1.3;

    margin-bottom: 11px;
}


.ai2gi-research-focus-card p {
    color: #868092;

    font-size: 13px;

    line-height: 1.78;

    margin-bottom: 20px;
}


.ai2gi-research-focus-link {
    display: inline-block;

    color: #a3727d;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.13em;
}


/* =========================================================
   RESEARCH FAQ
========================================================= */

.ai2gi-research-faq {
    margin-bottom: 105px;
}


.ai2gi-research-faq .sec-heading {
    margin-bottom: 25px;
}


.ai2gi-research-faq .sec-heading .sec-title {
    max-width: 530px;
}


/* =========================================================
   FAQ SUPPORT CARD
========================================================= */

.ai2gi-research-faq-support {
    max-width: 475px;

    position: relative;

    padding: 28px;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(87,67,111,0.28);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(207,2,31,0.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #211843,
            #151337
        );

    box-shadow:
        0 25px 55px rgba(0,0,0,0.20);
}


.ai2gi-research-faq-support::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #ad638f,
            transparent
        );
}


.ai2gi-research-faq-support-top {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.ai2gi-research-faq-mark {
    width: 47px;
    height: 47px;

    display: flex;

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

    border-radius: 11px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #CF021F,
            #60366d
        );

    box-shadow:
        0 0 20px rgba(207,2,31,0.13);
}


.ai2gi-research-faq-support-top span {
    display: block;

    color: #94707e;

    font-size: 8px;

    letter-spacing: 0.15em;

    font-weight: 700;

    margin-bottom: 4px;
}


.ai2gi-research-faq-support-top strong {
    color: #e8e2eb;

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

    font-size: 17px;
}


.ai2gi-research-faq-support-divider {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.32),
            rgba(255,255,255,0.06),
            transparent
        );

    margin-bottom: 20px;
}


.ai2gi-research-faq-support > .desc {
    color: #898395;

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 22px;
}


.ai2gi-research-faq-support-points {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}


.ai2gi-research-faq-support-points span {
    padding: 6px 9px;

    border-radius: 5px;

    border: 1px solid rgba(207,2,31,0.17);

    background: rgba(207,2,31,0.04);

    color: #9c747e;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.10em;
}


/* =========================================================
   FAQ TYPOGRAPHY
========================================================= */

.ai2gi-research-faq .faq-title {
    font-size: 16px;
}


.ai2gi-research-faq .faq-text p {
    font-size: 15px;

    line-height: 1.85;
}


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

@media (max-width: 1199px) {

    .ai2gi-research-hero-layout {
        gap: 40px;
    }

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

}


@media (max-width: 991px) {

    .ai2gi-research-hero {
        padding: 100px 0 85px;

        margin-bottom: 65px;
    }

    .ai2gi-research-hero-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .ai2gi-research-hero-content {
        text-align: center;
    }

    .ai2gi-research-hero-title {
        margin-left: auto;
        margin-right: auto;
    }

    .ai2gi-research-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .ai2gi-research-hero-actions {
        justify-content: center;
    }

    .ai2gi-research-hero-tags {
        justify-content: center;
    }

    .ai2gi-research-hero-visual {
        min-height: 520px;
    }

    .ai2gi-research-process {
        margin-bottom: 65px;
    }

    .ai2gi-research-workflow {
        margin-bottom: 70px;
    }

    .ai2gi-research-lab-section {
        margin-bottom: 75px;
    }

    .ai2gi-research-faq {
        margin-bottom: 75px;
    }

    .ai2gi-research-faq-support {
        max-width: 100%;

        margin-bottom: 35px;
    }

}


@media (max-width: 767px) {

    .ai2gi-research-hero {
        padding: 80px 0 65px;

        margin-bottom: 50px;
    }

    .ai2gi-research-hero-title {
        font-size: 40px;
    }

    .ai2gi-research-hero-desc {
        font-size: 16px;
    }

    .ai2gi-research-hero-actions {
        flex-direction: column;
    }

    .ai2gi-research-hero-tags {
        justify-content: center;
    }

    .ai2gi-research-hero-visual {
        min-height: 430px;
    }

    .ai2gi-research-orbit-one {
        width: 350px;
        height: 350px;
    }

    .ai2gi-research-orbit-two {
        width: 280px;
        height: 280px;
    }

    .ai2gi-research-lab-card {
        width: 92%;

        min-height: 320px;

        padding: 23px;
    }

    .ai2gi-research-lab-main {
        padding: 34px 0 27px;
    }

    .ai2gi-research-lab-main h3 {
        font-size: 23px;
    }

    .ai2gi-research-lab-main p {
        font-size: 11px;
    }

    .ai2gi-research-lab-flow {
        gap: 5px;
    }

    .ai2gi-research-flow-step {
        font-size: 7px;
    }

    .ai2gi-research-flow-step span {
        width: 22px;
        height: 22px;
    }

    .ai2gi-research-lab-bottom {
        gap: 15px;
    }

    .ai2gi-research-floating-card {
        min-width: 145px;

        padding: 8px 10px;
    }

    .ai2gi-research-float-one {
        left: -2px;
        top: 25px;
    }

    .ai2gi-research-float-two {
        right: -2px;
        bottom: 15px;
    }

    .ai2gi-research-floating-card strong {
        font-size: 8px;
    }

    .ai2gi-research-floating-card small {
        font-size: 7px;
    }

    .ai2gi-research-process {
        margin-bottom: 50px;
    }

    .ai2gi-research-workflow {
        margin-bottom: 55px;
    }

    .ai2gi-research-workflow-intro {
        font-size: 14px;
    }

    .ai2gi-research-lab-section {
        margin-bottom: 60px;
    }

    .ai2gi-research-lab-heading {
        margin-bottom: 32px;
    }

    .ai2gi-research-lab-heading h2 {
        font-size: 30px;
    }

    .ai2gi-research-focus-grid {
        grid-template-columns: 1fr;
    }

    .ai2gi-research-focus-card {
        min-height: 275px;
    }

    .ai2gi-research-faq {
        margin-bottom: 60px;
    }

    .ai2gi-research-faq .faq-title {
        font-size: 14px;
    }

    .ai2gi-research-faq .faq-text p {
        font-size: 14px;
    }

}


/* =========================================================
   RESEARCH PROCESS - EQUAL CARD HEIGHT
========================================================= */

.ai2gi-research-process .row {
    align-items: stretch;
}

.ai2gi-research-process .col-lg-4 {
    display: flex;
}

.ai2gi-research-process .process-item-wrap {
    width: 100%;
    height: 100%;
    display: flex;
}

.ai2gi-research-process .process-item {
    width: 100%;
    height: 100%;
    min-height: 310px;

    display: flex;
    flex-direction: column;
}

.ai2gi-research-process .process-content {
    flex: 1;
}

.ai2gi-research-process .process-content .desc {
    font-size: 15px;
    line-height: 1.8;
}

/* Keep the step label at the bottom consistently */
.ai2gi-research-process .process-step {
    margin-top: auto;
}


/* =========================================================
   SECOND RESEARCH WORKFLOW - EQUAL HEIGHT
========================================================= */

.ai2gi-research-workflow .row {
    align-items: stretch;
}

.ai2gi-research-workflow .process-item {
    height: 100%;
    min-height: 300px;

    display: flex;
    flex-direction: column;
}

.ai2gi-research-workflow .process-content {
    flex: 1;
}

.ai2gi-research-workflow .process-step {
    margin-bottom: 10px;
}


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

@media (max-width: 991px) {

    .ai2gi-research-process .process-item {
        min-height: 290px;
    }

    .ai2gi-research-workflow .process-item {
        min-height: 285px;
    }

}


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

@media (max-width: 767px) {

    .ai2gi-research-process .process-item {
        min-height: 270px;
    }

    .ai2gi-research-workflow .process-item {
        min-height: 260px;
    }

}




/* =========================================================
   AI2Gi RESOURCES PAGE
   UNIQUE CSS
========================================================= */


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

.ai2gi-resources-hero {
    position: relative;
    overflow: hidden;

    padding: 125px 0 115px;

    margin-bottom: 90px;

    background:
        radial-gradient(
            circle at 83% 16%,
            rgba(207, 2, 31, 0.28),
            transparent 23%
        ),
        radial-gradient(
            circle at 72% 76%,
            rgba(234, 104, 73, 0.18),
            transparent 27%
        ),
        radial-gradient(
            circle at 20% 85%,
            rgba(50, 34, 101, 0.18),
            transparent 29%
        ),
        linear-gradient(
            125deg,
            #12143b 0%,
            #21143f 43%,
            #30163f 72%,
            #36173d 100%
        );

    border-bottom: 1px solid rgba(207,2,31,0.15);
}


.ai2gi-resources-hero-layout {
    display: grid;

    grid-template-columns: 1.03fr 0.97fr;

    align-items: center;

    gap: 62px;

    position: relative;
    z-index: 4;
}


.ai2gi-resources-hero-glow {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(14px);
}


.ai2gi-resources-glow-pink {
    width: 300px;
    height: 300px;

    top: -100px;
    right: 17%;

    background: rgba(207,2,31,0.10);
}


.ai2gi-resources-glow-orange {
    width: 330px;
    height: 330px;

    right: -100px;
    bottom: -130px;

    background: rgba(231,94,60,0.10);
}


.ai2gi-resources-glow-blue {
    width: 250px;
    height: 250px;

    left: -110px;
    bottom: 20%;

    background: rgba(39,32,95,0.15);
}


.ai2gi-resources-hero-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.07;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.05) 1px,
            transparent 1px
        );

    background-size: 72px 72px;
}


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

.ai2gi-resources-hero-kicker {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 9px 16px;

    margin-bottom: 24px;

    border-radius: 50px;

    border: 1px solid rgba(207,2,31,0.38);

    background: rgba(207,2,31,0.07);

    color: #df9ba7;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.07em;
}


.ai2gi-resources-hero-kicker span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #CF021F;

    box-shadow:
        0 0 8px rgba(207,2,31,0.85),
        0 0 18px rgba(207,2,31,0.30);
}


.ai2gi-resources-hero-title {
    max-width: 700px;

    color: #ffffff;

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

    font-size: clamp(44px, 5.3vw, 72px);

    line-height: 1.04;

    font-weight: 700;

    margin-bottom: 24px;
}


.ai2gi-resources-hero-title span {
    display: block;

    background:
        linear-gradient(
            100deg,
            #ffffff 5%,
            #e8a4bd 38%,
            #ee926d 70%,
            #d9657c 100%
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


.ai2gi-resources-hero-desc {
    max-width: 620px;

    color: #a8a4b8;

    font-size: 18px;

    line-height: 1.85;

    margin-bottom: 33px;
}


.ai2gi-resources-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

    margin-bottom: 32px;
}


.ai2gi-resources-secondary-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #b8b0c0;

    font-size: 15px;

    transition: 0.3s ease;
}


.ai2gi-resources-secondary-link span {
    color: #dc8191;

    font-size: 20px;

    transition: 0.3s ease;
}


.ai2gi-resources-secondary-link:hover {
    color: #ffffff;
}


.ai2gi-resources-secondary-link:hover span {
    transform: translateX(5px);
}


.ai2gi-resources-hero-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    padding-top: 22px;

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


.ai2gi-resources-hero-tags span {
    padding: 6px 10px;

    border-radius: 5px;

    border: 1px solid rgba(141,90,114,0.23);

    background: rgba(255,255,255,0.02);

    color: #857d90;

    font-size: 10px;
}


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

.ai2gi-resources-hero-visual {
    min-height: 550px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;
}


.ai2gi-resources-hero-orbit {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ai2gi-resources-orbit-one {
    width: 525px;
    height: 525px;

    border: 1px solid rgba(207,2,31,0.15);

    animation:
        ai2giResourcesOrbitOne
        21s linear infinite;
}


.ai2gi-resources-orbit-two {
    width: 405px;
    height: 405px;

    border: 1px dashed rgba(204,106,145,0.16);

    animation:
        ai2giResourcesOrbitTwo
        16s linear infinite;
}


@keyframes ai2giResourcesOrbitOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes ai2giResourcesOrbitTwo {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


/* =========================================================
   LIBRARY CARD
========================================================= */

.ai2gi-resources-library-card {
    width: min(470px, 90%);

    min-height: 365px;

    position: relative;

    z-index: 7;

    padding: 31px;

    border-radius: 23px;

    border: 1px solid rgba(119,82,120,0.37);

    background:
        linear-gradient(
            145deg,
            rgba(39,29,67,0.98),
            rgba(19,19,53,0.98)
        );

    box-shadow:
        0 35px 80px rgba(0,0,0,0.38),
        0 0 40px rgba(207,2,31,0.05);
}


.ai2gi-resources-library-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #df8d6b,
            transparent
        );
}


.ai2gi-resources-library-top {
    display: flex;

    justify-content: space-between;

    align-items: center;
}


.ai2gi-resources-library-top small {
    display: block;

    color: #706a7b;

    font-size: 8px;

    letter-spacing: 0.15em;

    margin-bottom: 4px;
}


.ai2gi-resources-library-top strong {
    color: #ddd9e2;

    font-size: 10px;

    letter-spacing: 0.06em;
}


.ai2gi-resources-library-top > span {
    padding: 6px 10px;

    border-radius: 5px;

    color: #df8c86;

    border: 1px solid rgba(207,2,31,0.24);

    background: rgba(207,2,31,0.05);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;
}


.ai2gi-resources-library-main {
    padding: 48px 0 32px;
}


.ai2gi-resources-library-main > small {
    display: block;

    color: #a07382;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 10px;
}


.ai2gi-resources-library-main h3 {
    color: #ffffff;

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

    font-size: 31px;

    line-height: 1.2;

    margin-bottom: 14px;
}


.ai2gi-resources-library-main h3 strong {
    display: block;

    color: #dc829d;
}


.ai2gi-resources-library-main p {
    max-width: 350px;

    color: #827d8e;

    font-size: 13px;

    line-height: 1.8;

    margin: 0;
}


.ai2gi-resources-library-items {
    display: flex;

    gap: 12px;

    margin-bottom: 24px;
}


.ai2gi-resources-library-items div {
    flex: 1;

    padding: 12px;

    border-radius: 9px;

    border: 1px solid rgba(100,77,115,0.20);

    background: rgba(255,255,255,0.025);
}


.ai2gi-resources-library-items span {
    display: block;

    color: #756e7d;

    font-size: 8px;

    margin-bottom: 4px;
}


.ai2gi-resources-library-items strong {
    color: #cfc9d7;

    font-size: 10px;
}


.ai2gi-resources-library-bottom {
    display: flex;

    gap: 25px;

    padding-top: 17px;

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


.ai2gi-resources-library-bottom small {
    display: block;

    color: #5f596c;

    font-size: 8px;

    margin-bottom: 4px;
}


.ai2gi-resources-library-bottom strong {
    color: #d0cbd8;

    font-size: 9px;
}


/* =========================================================
   FLOATING CARDS
========================================================= */

.ai2gi-resources-floating-card {
    position: absolute;

    z-index: 10;

    min-width: 190px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 11px 14px;

    border-radius: 11px;

    border: 1px solid rgba(126,86,111,0.28);

    background:
        rgba(22,19,51,0.95);

    backdrop-filter: blur(11px);

    box-shadow:
        0 17px 35px rgba(0,0,0,0.25);

    animation:
        ai2giResourcesFloat
        4.8s ease-in-out infinite;
}


.ai2gi-resources-floating-card > span {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    display: flex;

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

    border-radius: 9px;

    color: #df8494;

    border: 1px solid rgba(207,2,31,0.20);

    background: rgba(207,2,31,0.07);

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


.ai2gi-resources-floating-card strong {
    display: block;

    color: #ded9e2;

    font-size: 10px;

    margin-bottom: 3px;
}


.ai2gi-resources-floating-card small {
    color: #706a7a;

    font-size: 8px;
}


.ai2gi-resources-float-one {
    left: -5px;
    top: 88px;
}


.ai2gi-resources-float-two {
    right: -4px;
    bottom: 80px;

    animation-delay: 1.5s;
}


@keyframes ai2giResourcesFloat {

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

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

}


/* =========================================================
   PROCESS
========================================================= */

.ai2gi-resources-process {
    margin-bottom: 95px;
}


.ai2gi-resources-process .row {
    align-items: stretch;
}


.ai2gi-resources-process .col-lg-4 {
    display: flex;
}


.ai2gi-resources-process-card {
    width: 100%;
    height: 100%;
}


.ai2gi-resources-process-card .process-item {
    height: 100%;
    min-height: 315px;

    display: flex;
    flex-direction: column;
}


.ai2gi-resources-process-card .process-content {
    flex: 1;
}


.ai2gi-resources-process-card .process-content .desc {
    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   RESOURCE BLOG
========================================================= */

.ai2gi-resources-blog {
    margin-bottom: 100px;
}


.ai2gi-resources-blog-wrapper {
    align-items: stretch;
}


.ai2gi-resources-blog .blog-item {
    height: 100%;
}


.ai2gi-resources-blog .blog-content .title {
    font-size: 20px;
    line-height: 1.45;
}


.ai2gi-resources-blog .blog-meta span {
    font-size: 11px;
}


/* =========================================================
   COUNTUP
========================================================= */

.ai2gi-resources-countup {
    margin-bottom: 100px;
}


.ai2gi-resources-countup-intro {
    max-width: 560px;

    color: #8e899b;

    font-size: 16px;

    line-height: 1.85;

    margin: 20px 0 25px;
}


.ai2gi-resources-countup-wrap {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.ai2gi-resources-countup-wrap .countup-item-wrap {
    height: auto;

    flex: 1;
}


.ai2gi-resources-countup-wrap .countup-item {
    min-height: 185px;

    display: flex;

    flex-direction: column;
}


.ai2gi-resources-countup-wrap .countup-item .desc {
    flex: 1;

    font-size: 14px;

    line-height: 1.75;
}


.ai2gi-resources-countup .count-text {
    font-size: 16px;
}


/* =========================================================
   FAQ SUPPORT
========================================================= */

.ai2gi-resources-faq {
    margin-bottom: 105px;
}


.ai2gi-resources-faq .sec-heading {
    margin-bottom: 25px;
}


.ai2gi-resources-faq .sec-heading .sec-title {
    max-width: 530px;
}


.ai2gi-resources-faq-support {
    max-width: 475px;

    position: relative;

    padding: 28px;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(87,67,111,0.28);

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(207,2,31,0.10),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #211843,
            #151337
        );

    box-shadow:
        0 25px 55px rgba(0,0,0,0.20);
}


.ai2gi-resources-faq-support::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #CF021F,
            #dd886d,
            transparent
        );
}


.ai2gi-resources-faq-support-top {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}


.ai2gi-resources-faq-mark {
    width: 47px;
    height: 47px;

    display: flex;

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

    border-radius: 11px;

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    background:
        linear-gradient(
            135deg,
            #CF021F,
            #64376e
        );

    box-shadow:
        0 0 20px rgba(207,2,31,0.13);
}


.ai2gi-resources-faq-support-top span {
    display: block;

    color: #94707e;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.15em;

    margin-bottom: 4px;
}


.ai2gi-resources-faq-support-top strong {
    color: #e8e2eb;

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

    font-size: 17px;
}


.ai2gi-resources-faq-divider {
    height: 1px;

    margin-bottom: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(207,2,31,0.32),
            rgba(255,255,255,0.06),
            transparent
        );
}


.ai2gi-resources-faq-support > .desc {
    color: #898395;

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 22px;
}


.ai2gi-resources-faq-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 25px;
}


.ai2gi-resources-faq-tags span {
    padding: 6px 9px;

    border-radius: 5px;

    border: 1px solid rgba(207,2,31,0.17);

    background: rgba(207,2,31,0.04);

    color: #9e757f;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.10em;
}


/* =========================================================
   FAQ FONT SIZE
========================================================= */

.ai2gi-resources-faq .faq-title {
    font-size: 16px;
}


.ai2gi-resources-faq .faq-text p {
    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .ai2gi-resources-hero-layout {
        gap: 42px;
    }

    .ai2gi-resources-process-card .process-item {
        min-height: 300px;
    }

}


@media (max-width: 991px) {

    .ai2gi-resources-hero {
        padding: 100px 0 85px;

        margin-bottom: 65px;
    }


    .ai2gi-resources-hero-layout {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .ai2gi-resources-hero-content {
        text-align: center;
    }


    .ai2gi-resources-hero-title,
    .ai2gi-resources-hero-desc {
        margin-left: auto;
        margin-right: auto;
    }


    .ai2gi-resources-hero-actions {
        justify-content: center;
    }


    .ai2gi-resources-hero-tags {
        justify-content: center;
    }


    .ai2gi-resources-hero-visual {
        min-height: 520px;
    }


    .ai2gi-resources-process {
        margin-bottom: 70px;
    }


    .ai2gi-resources-blog {
        margin-bottom: 75px;
    }


    .ai2gi-resources-countup {
        margin-bottom: 75px;
    }


    .ai2gi-resources-faq {
        margin-bottom: 80px;
    }


    .ai2gi-resources-faq-support {
        max-width: 100%;

        margin-bottom: 35px;
    }

}


@media (max-width: 767px) {

    .ai2gi-resources-hero {
        padding: 80px 0 65px;

        margin-bottom: 50px;
    }


    .ai2gi-resources-hero-title {
        font-size: 40px;
    }


    .ai2gi-resources-hero-desc {
        font-size: 16px;
    }


    .ai2gi-resources-hero-actions {
        flex-direction: column;
    }


    .ai2gi-resources-hero-visual {
        min-height: 430px;
    }


    .ai2gi-resources-orbit-one {
        width: 350px;
        height: 350px;
    }


    .ai2gi-resources-orbit-two {
        width: 280px;
        height: 280px;
    }


    .ai2gi-resources-library-card {
        width: 92%;

        min-height: 325px;

        padding: 23px;
    }


    .ai2gi-resources-library-main {
        padding: 34px 0 25px;
    }


    .ai2gi-resources-library-main h3 {
        font-size: 23px;
    }


    .ai2gi-resources-library-main p {
        font-size: 11px;
    }


    .ai2gi-resources-library-items {
        gap: 7px;
    }


    .ai2gi-resources-library-bottom {
        gap: 15px;
    }


    .ai2gi-resources-floating-card {
        min-width: 145px;

        padding: 8px 10px;
    }


    .ai2gi-resources-float-one {
        left: -2px;
        top: 25px;
    }


    .ai2gi-resources-float-two {
        right: -2px;
        bottom: 15px;
    }


    .ai2gi-resources-floating-card strong {
        font-size: 8px;
    }


    .ai2gi-resources-floating-card small {
        font-size: 7px;
    }


    .ai2gi-resources-process {
        margin-bottom: 50px;
    }


    .ai2gi-resources-process-card .process-item {
        min-height: 275px;
    }


    .ai2gi-resources-process-card .process-content .desc {
        font-size: 14px;
    }


    .ai2gi-resources-blog {
        margin-bottom: 60px;
    }


    .ai2gi-resources-blog .blog-content .title {
        font-size: 18px;
    }


    .ai2gi-resources-countup {
        margin-bottom: 60px;
    }


    .ai2gi-resources-countup-intro {
        font-size: 14px;
    }


    .ai2gi-resources-countup-wrap {
        gap: 13px;
    }


    .ai2gi-resources-countup-wrap .countup-item {
        min-height: 175px;
    }


    .ai2gi-resources-faq {
        margin-bottom: 65px;
    }


    .ai2gi-resources-faq .faq-title {
        font-size: 14px;
    }


    .ai2gi-resources-faq .faq-text p {
        font-size: 14px;
    }

}