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

   Purple : #18002F
   Orange : #F28C00
   Blue   : #008BCB
========================================================= */


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

.sunergize-facts {

    position: relative;

    overflow: hidden;

    width: 100%;

    padding: 110px 0 115px;

    background: #F7F9FA;

    color: #171717;

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.facts-bg-grid {

    position: absolute;

    inset: 0;

    opacity: .55;

    background-image:

        linear-gradient(
            rgba(24, 0, 47, .045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(24, 0, 47, .045) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    pointer-events: none;

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.facts-glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


.facts-glow-blue {

    width: 550px;

    height: 550px;

    right: -250px;

    top: -250px;

    background:
        radial-gradient(
            circle,
            rgba(
                0,
                139,
                203,
                .12
            ),
            transparent 68%
        );

}


.facts-glow-orange {

    width: 400px;

    height: 400px;

    left: -250px;

    bottom: -250px;

    background:
        radial-gradient(
            circle,
            rgba(
                242,
                140,
                0,
                .09
            ),
            transparent 70%
        );

}



/* =========================================================
   CONTAINER
========================================================= */

.facts-container {

    position: relative;

    z-index: 2;

    width: min(
        1280px,
        90%
    );

    margin: auto;

}



/* =========================================================
   TOP
========================================================= */

.facts-top {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

}


.facts-label {

    display: flex;

    align-items: center;

    gap: 13px;

    color: #18002F;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.facts-label span {

    width: 42px;

    height: 2px;

    background: #F28C00;

}


.facts-code {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #91999D;

    font-size: 9px;

    letter-spacing: 2px;

}


.facts-code b {

    color: #18002F;

}


.facts-code i {

    display: block;

    width: 45px;

    height: 1px;

    background: #CBD3D6;

}



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

.facts-heading {

    display: flex;

    align-items: center;

    gap: 45px;

    margin-top: 45px;

}


.facts-heading-number {

    font-size: 130px;

    line-height: .75;

    font-weight: 800;

    letter-spacing: -9px;

    color: transparent;

    -webkit-text-stroke:
        2px #f07f03;

}


/*.facts-heading-content h2 {*/

/*    margin: 0;*/

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

/*    line-height: .98;*/

/*    font-weight: 700;*/

/*    letter-spacing: -3px;*/

/*    text-transform: uppercase;*/

/*    color: #18002F;*/

/*}*/


/*.facts-heading-content h2 span {*/

/*    color: #008BCB;*/

/*}*/


.facts-services {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 27px;

    color: #737D82;

    font-size: 11px;

}

.facts-services span{
    
    font-size:15px;
}

.facts-services em {

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background: #F28C00;

}



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

.facts-cards {

    display: grid;

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

    gap: 16px;

    margin-top: 75px;

}



/* =========================================================
   CARD
========================================================= */

.fact-card {

    position: relative;

    min-height: 315px;

    padding: 30px 32px;

    overflow: hidden;

    background: #FFFFFF;

    border: 1px solid #E4E9EB;

    box-shadow:
        0 15px 45px
        rgba(
            24,
            0,
            47,
            .045
        );

    opacity: 0;

    transform:
        translateY(45px);

    transition:

        opacity .8s ease,

        transform .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        box-shadow .4s ease,

        border-color .4s ease;

}


.sunergize-facts.is-visible
.fact-card {

    opacity: 1;

    transform:
        translateY(0);

}


.sunergize-facts.is-visible
.fact-card:nth-child(1) {

    transition-delay: .05s;

}


.sunergize-facts.is-visible
.fact-card:nth-child(2) {

    transition-delay: .18s;

}


.sunergize-facts.is-visible
.fact-card:nth-child(3) {

    transition-delay: .31s;

}


.fact-card:hover {

    border-color:
        rgba(
            0,
            139,
            203,
            .30
        );

    box-shadow:
        0 25px 60px
        rgba(
            24,
            0,
            47,
            .09
        );

}



/* =========================================================
   BACKGROUND NUMBER
========================================================= */

.fact-card-number-bg {

    position: absolute;

    right: -15px;

    bottom: -50px;

    font-size: 220px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -15px;

    color:
        rgba(
            24,
            0,
            47,
            .035
        );

    pointer-events: none;

    transition:
        color .5s ease;

}


.fact-card:hover
.fact-card-number-bg {

    /*color:*/
    /*    rgba(*/
    /*        0,*/
    /*        139,*/
    /*        203,*/
    /*        .055*/
    /*    );*/
    
    color:#f4c99c69;

}



/* =========================================================
   CARD HEAD
========================================================= */

.fact-card-head {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content:
        space-between;

    align-items: center;

}


.fact-card-head span {

    color: #F28C00;

    font-size: 10px;

    font-weight: 800;

}


.fact-card-head small {

    color: #899399;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}



/* =========================================================
   NUMBER
========================================================= */

.fact-number {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: baseline;

    gap: 6px;

    margin-top: 68px;

}


.fact-number .fact-counter {

    font-size: 82px;

    line-height: .8;

    font-weight: 700;

    letter-spacing: -5px;

    color: #057fbe;

}


.fact-card-main
.fact-number .fact-counter {

    /*font-size: 105px;*/

}


.fact-number sup {

    font-size: 38px;

    color: #F28C00;

    font-weight: 700;

}


.fact-number b {

    font-size: 22px;

    color: #008BCB;

    font-weight: 600;

}



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

.fact-description {

    position: absolute;

    left: 32px;

    right: 32px;

    bottom: 30px;

}


.fact-description > span {

    color: #18002F;

    font-size: 18px;

    font-weight: 800;

    /*letter-spacing: 1.8px;*/

}


.fact-description p {

    max-width: 270px;

    margin: 9px 0 0;

    color: #7A858A;

    font-size: 12px;

    line-height: 1.5;

}



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

.fact-progress {

    position: absolute;

    left: 32px;

    right: 32px;

    bottom: 0;

    height: 3px;

    background: #EDF0F2;

}


.fact-progress span {

    display: block;

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #18002F,
            #008BCB
        );

    transition:
        width 1.5s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.sunergize-facts.is-visible
.fact-card:nth-child(1)
.fact-progress span {

    width: 100%;

}


.sunergize-facts.is-visible
.fact-card:nth-child(2)
.fact-progress span {

    width: 100%;

    transition-delay: .15s;

}


.sunergize-facts.is-visible
.fact-card:nth-child(3)
.fact-progress span {

    width: 100%;

    transition-delay: .25s;

}



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

@media(max-width: 991px) {

    .sunergize-facts {

        padding: 85px 0;

    }


    .facts-heading {

        gap: 25px;

    }


    .facts-heading-number {

        font-size: 90px;

    }


    /*.facts-heading-content h2 {*/

    /*    font-size: 48px;*/

    /*}*/


    .facts-cards {

        grid-template-columns:
            1fr 1fr;

    }


    .fact-card-main {

        grid-column:
            1 / -1;

    }

}



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

@media(max-width: 767px) {

    .sunergize-facts {

        padding: 70px 0 80px;

    }


    .facts-container {

        width: 88%;

    }


    .facts-code {

        display: none;

    }


    .facts-heading {

        display: block;

        margin-top: 35px;

    }


    .facts-heading-number {

        display: none;

    }


    /*.facts-heading-content h2 {*/

    /*    font-size: 38px;*/

    /*    line-height: 1.02;*/

    /*    letter-spacing: -1.5px;*/

    /*}*/


    .facts-services {

        font-size: 9px;

        line-height: 1.7;

    }


    .facts-cards {

        display: block;

        margin-top: 50px;

    }


    .fact-card {

        min-height: 285px;

        margin-bottom: 14px;

        padding: 25px;

    }


    .fact-card-number-bg {

        font-size: 160px;

    }


    .fact-number {

        margin-top: 58px;

    }


    .fact-number .fact-counter {

        font-size: 65px;

    }


    .fact-card-main
    .fact-number .fact-counter {

        font-size: 82px;

    }


    .fact-number sup {

        font-size: 30px;

    }


    .fact-number b {

        font-size: 18px;

    }


    .fact-description {

        left: 25px;

        right: 25px;

        bottom: 35px;

    }


    .fact-progress {

        left: 25px;

        right: 25px;

    }

}



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

@media(max-width: 480px) {

    /*.facts-heading-content h2 {*/

    /*    font-size: 32px;*/

    /*}*/


    .facts-label {

        font-size: 9px;

    }


    .facts-label span {

        width: 30px;

    }


    .fact-card {

        min-height: 270px;

    }


    .fact-card-main
    .fact-number .fact-counter {

        font-size: 72px;

    }

}