/* =========================================================
   BOOSTPME — SECTORS
========================================================= */

.boost-sectors-section {
    position: relative;
    overflow: hidden;

    padding: 130px 0 115px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(79, 108, 255, .09),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 70%,
            rgba(255, 79, 154, .08),
            transparent 30%
        ),
        #fbfaf8;

    color: #17151c;
}


/* =========================================================
   ORBS
========================================================= */

.boost-sectors-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;

    opacity: .8;
}

.boost-sectors-orb-one {
    width: 420px;
    height: 420px;

    top: -190px;
    left: -180px;

    background:
        rgba(80, 108, 255, .15);
}

.boost-sectors-orb-two {
    width: 450px;
    height: 450px;

    right: -210px;
    bottom: -210px;

    background:
        rgba(255, 79, 154, .13);
}


/* =========================================================
   HEADING
========================================================= */

.boost-sectors-heading {
    position: relative;

    z-index: 2;

    max-width: 900px;

    margin-bottom: 75px;
}

.boost-sectors-kicker {
    display: block;

    margin-bottom: 18px;

    color: #938c97;

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

    letter-spacing: 2.7px;
}

.boost-sectors-heading h2 {
    margin: 0;

    font-size:
        clamp(
            50px,
            6vw,
            88px
        );

    line-height: .93;

    letter-spacing: -4px;

    font-weight: 500;
}

.boost-sectors-heading h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #4f6cff,
            #8f58ff,
            #ff5498,
            #ff914b
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   LIST
========================================================= */

.boost-sectors-list {
    position: relative;

    z-index: 2;

    border-top:
        1px solid
        rgba(30, 25, 40, .09);
}


/* =========================================================
   ITEM
========================================================= */

.boost-sector-item {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr)
        minmax(260px, auto)
        45px;

    gap: 20px;

    align-items: center;

    min-height: 118px;

    overflow: hidden;

    border-bottom:
        1px solid
        rgba(30, 25, 40, .09);

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


/*
 * Couche couleur animée.
 */

.boost-sector-item::before {
    content: "";

    position: absolute;

    inset: 6px 0;

    z-index: -1;

    border-radius: 20px;

    opacity: 0;

    transform:
        scaleX(.97);

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


/* =========================================================
   COLORS
========================================================= */

.sector-hotel::before {
    background:
        linear-gradient(
            110deg,
            rgba(78, 112, 255, .17),
            rgba(123, 87, 255, .07)
        );
}

.sector-restaurant::before {
    background:
        linear-gradient(
            110deg,
            rgba(0, 189, 159, .15),
            rgba(79, 160, 255, .07)
        );
}

.sector-btp::before {
    background:
        linear-gradient(
            110deg,
            rgba(255, 151, 70, .17),
            rgba(255, 82, 115, .07)
        );
}

.sector-retail::before {
    background:
        linear-gradient(
            110deg,
            rgba(255, 79, 154, .14),
            rgba(178, 74, 255, .07)
        );
}

.sector-realestate::before {
    background:
        linear-gradient(
            110deg,
            rgba(145, 84, 255, .15),
            rgba(80, 108, 255, .07)
        );
}

.sector-finance::before {
    background:
        linear-gradient(
            110deg,
            rgba(184, 255, 92, .14),
            rgba(82, 191, 130, .07)
        );
}

.sector-pme::before {
    background:
        linear-gradient(
            110deg,
            rgba(80, 108, 255, .12),
            rgba(255, 79, 154, .10),
            rgba(255, 151, 70, .08)
        );
}


/* =========================================================
   HOVER
========================================================= */

.boost-sector-item:hover {
    padding:
        0
        18px;
}

.boost-sector-item:hover::before {
    opacity: 1;

    transform:
        scaleX(1);
}


/* =========================================================
   INDEX
========================================================= */

.boost-sector-index {
    color: #aaa4ac;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


/* =========================================================
   NAME
========================================================= */

.boost-sector-name {
    position: relative;

    font-size:
        clamp(
            38px,
            5.2vw,
            76px
        );

    line-height: .9;

    letter-spacing: -3.5px;

    font-weight: 500;

    transition:
        transform .35s ease,
        letter-spacing .35s ease;
}

.boost-sector-item:hover
.boost-sector-name {
    transform:
        translateX(6px);

    letter-spacing:
        -2.5px;
}


/* =========================================================
   TAGS
========================================================= */

.boost-sector-info {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 6px;

    opacity: .48;

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

.boost-sector-info span {
    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding:
        0
        9px;

    border:
        1px solid
        rgba(30, 25, 40, .08);

    border-radius: 999px;

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

    color: #716b74;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .6px;
}

.boost-sector-item:hover
.boost-sector-info {
    opacity: 1;

    transform:
        translateX(-5px);
}


/* =========================================================
   ARROW
========================================================= */

.boost-sector-arrow {
    display: flex;

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

    width: 37px;
    height: 37px;

    border:
        1px solid
        rgba(30, 25, 40, .09);

    border-radius: 50%;

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

    color: #746d77;

    font-size: 15px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.boost-sector-item:hover
.boost-sector-arrow {
    transform:
        rotate(45deg)
        scale(1.08);

    background:
        #17151c;

    color: #ffffff;
}


/* =========================================================
   DIFFERENT TEXT HOVER COLORS
========================================================= */

.sector-hotel:hover
.boost-sector-name {
    color: #536cff;
}

.sector-restaurant:hover
.boost-sector-name {
    color: #00a88e;
}

.sector-btp:hover
.boost-sector-name {
    color: #ef7541;
}

.sector-retail:hover
.boost-sector-name {
    color: #ed4a91;
}

.sector-realestate:hover
.boost-sector-name {
    color: #8256e8;
}

.sector-finance:hover
.boost-sector-name {
    color: #55994c;
}

.sector-pme:hover
.boost-sector-name {
    background:
        linear-gradient(
            90deg,
            #506cff,
            #9757ff,
            #ff5598
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   BOTTOM
========================================================= */

.boost-sectors-bottom {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .7fr
        1.5fr
        auto;

    gap: 35px;

    align-items: center;

    margin-top: 65px;

    padding:
        28px
        0;

    border-top:
        1px solid
        rgba(30, 25, 40, .08);
}

.boost-sectors-bottom > span {
    color: #97909a;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.boost-sectors-bottom strong {
    max-width: 520px;

    font-size:
        clamp(
            19px,
            2.4vw,
            29px
        );

    line-height: 1.15;

    letter-spacing: -1px;

    font-weight: 500;
}

.boost-sectors-bottom a {
    display: inline-flex;

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

    min-height: 45px;

    padding:
        0
        17px;

    border-radius: 11px;

    background: #17151c;

    color: #ffffff;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

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

.boost-sectors-bottom a:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px
        rgba(30, 25, 40, .18);
}


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

@media
(max-width: 900px) {

    .boost-sector-item {
        grid-template-columns:
            40px
            1fr
            42px;

        min-height: 105px;
    }

    .boost-sector-info {
        grid-column:
            2 / 4;

        justify-content: flex-start;

        padding-bottom: 14px;
    }

    .boost-sector-arrow {
        grid-column: 3;

        grid-row: 1;
    }

    .boost-sectors-bottom {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .boost-sectors-bottom a {
        width: max-content;
    }

}


@media
(max-width: 600px) {

    .boost-sectors-section {
        padding:
            90px
            0;
    }

    .boost-sectors-heading {
        margin-bottom: 50px;
    }

    .boost-sectors-heading h2 {
        letter-spacing: -2.5px;
    }

    .boost-sector-item {
        grid-template-columns:
            28px
            1fr
            35px;

        gap: 8px;

        min-height: 90px;
    }

    .boost-sector-item:hover {
        padding:
            0
            7px;
    }

    .boost-sector-name {
        font-size: 39px;

        letter-spacing: -2px;
    }

    .boost-sector-info {
        gap: 4px;
    }

    .boost-sector-info span {
        min-height: 24px;

        padding:
            0
            7px;

        font-size: 6px;
    }

    .boost-sector-arrow {
        width: 32px;
        height: 32px;

        font-size: 12px;
    }

}