/* =========================================================
   ICT / FPT Support & Service
========================================================= */

.ict-fpt-support {

    position:
        relative;

    width:
        100%;

    padding:
        120px 0;

}


/* =========================================================
   Container
========================================================= */

.ict-fpt-support-inner {

    width:
        min(
            1180px,
            calc(100% - 80px)
        );

    margin:
        0 auto;

}


/* =========================================================
   Heading
========================================================= */

.ict-fpt-support-heading {

    max-width:
        760px;

    margin-bottom:
        48px;

}


.ict-fpt-support-eyebrow {

    display:
        block;

    margin-bottom:
        14px;

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.16em;

    text-transform:
        uppercase;

    color:
        var(--text-soft);

    opacity:
        0.68;

}


.ict-fpt-support-heading h2 {

    margin:
        0 0 18px;

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.035em;

    color:
        var(--text);

}


.ict-fpt-support-heading p {

    margin:
        0;

    max-width:
        680px;

    font-size:
        1rem;

    line-height:
        1.75;

    color:
        var(--text-soft);

}


/* =========================================================
   Support Cards
========================================================= */

.ict-fpt-support-grid {

    display:
        grid;

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

    gap:
        20px;

}


/* =========================================================
   Card
========================================================= */

.ict-fpt-support-card {

    position:
        relative;

    min-height:
        270px;

    padding:
        30px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        var(--glass-background);

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


.ict-fpt-support-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--card-border-hover);

    background:
        var(--card-color);

    box-shadow:
        var(--shadow);

}


/* =========================================================
   Card Arrow
========================================================= */

.ict-fpt-support-card-arrow {

    position:
        absolute;

    right:
        28px;

    bottom:
        26px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        50%;

    color:
        var(--text-soft);

    background:
        var(--glass-background);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;

}


.ict-fpt-support-card:hover
.ict-fpt-support-card-arrow {

    transform:
        translateX(4px);

    border-color:
        var(--card-border-hover);

    background:
        var(--card-color);

    color:
        var(--primary);

}


.ict-fpt-support-card-arrow i {

    font-size:
        0.75rem;

}


/* =========================================================
   Card Icon
========================================================= */

.ict-fpt-support-card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        28px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        14px;

    background:
        var(--glass-background);

}


.ict-fpt-support-card-icon i {

    font-size:
        1.25rem;

    color:
        var(--primary);

}


/* =========================================================
   Card Content
========================================================= */

.ict-fpt-support-card-content span {

    display:
        block;

    margin-bottom:
        9px;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

    color:
        var(--text-soft);

    opacity:
        0.72;

}


.ict-fpt-support-card-content h3 {

    margin:
        0 0 12px;

    font-size:
        1.25rem;

    font-weight:
        700;

    line-height:
        1.25;

    color:
        var(--text);

}


.ict-fpt-support-card-content p {

    margin:
        0;

    font-size:
        0.92rem;

    line-height:
        1.7;

    color:
        var(--text-soft);

}


/* =========================================================
   Contact CTA
========================================================= */

.ict-fpt-support-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    margin-top:
        24px;

    padding:
        34px 38px;

    border:
        1px solid
        var(--card-border);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(19,216,255,.055),
            var(--glass-background)
        );

}


/* =========================================================
   CTA Content
========================================================= */

.ict-fpt-support-cta-content {

    max-width:
        700px;

}


.ict-fpt-support-cta-content span {

    display:
        block;

    margin-bottom:
        9px;

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

    color:
        var(--primary);

}


.ict-fpt-support-cta-content h3 {

    margin:
        0 0 10px;

    font-size:
        1.45rem;

    font-weight:
        700;

    line-height:
        1.25;

    color:
        var(--text);

}


.ict-fpt-support-cta-content p {

    margin:
        0;

    font-size:
        0.92rem;

    line-height:
        1.65;

    color:
        var(--text-soft);

}


/* =========================================================
   CTA Button
========================================================= */

.ict-fpt-support-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    flex-shrink:
        0;

    min-height:
        48px;

    padding:
        0 22px;

    border:
        1px solid
        var(--card-border-hover);

    border-radius:
        999px;

    text-decoration:
        none;

    font-size:
        0.88rem;

    font-weight:
        700;

    color:
        var(--button-text);

    background:
        var(--glass-background);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

}


.ict-fpt-support-button:hover {

    transform:
        translateX(3px);

    border-color:
        var(--card-border-hover);

    background:
        var(--card-color);

}


.ict-fpt-support-button i {

    color:
        var(--primary);

}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1000px) {

    .ict-fpt-support-inner {

        width:
            min(
                100% - 48px,
                760px
            );

    }


    .ict-fpt-support-grid {

        grid-template-columns:
            1fr;

    }


    .ict-fpt-support-card {

        min-height:
            auto;

    }

}


@media (max-width: 680px) {

    .ict-fpt-support {

        padding:
            80px 0;

    }


    .ict-fpt-support-inner {

        width:
            calc(100% - 32px);

    }


    .ict-fpt-support-heading {

        margin-bottom:
            32px;

    }


    .ict-fpt-support-heading h2 {

        font-size:
            2rem;

    }


    .ict-fpt-support-card {

        padding:
            24px;

    }


    .ict-fpt-support-cta {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            26px;

        padding:
            28px 24px;

    }


    .ict-fpt-support-button {

        width:
            100%;

    }

}