/*==================================================
STATISTICS
Rahban Tir
==================================================*/

.hp-stats{

    position:relative;
    margin-top:-95px;
    margin-bottom:90px;
    z-index:30;

}

.hp-stats .rt-container{

    max-width:1350px;
    margin:auto;
    padding:0 20px;

}

.hp-stats-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

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

.hp-stat-card{

    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    min-height:330px;

    overflow:hidden;

    border-radius:24px;

    padding:40px 28px;

    text-align:center;

    background:linear-gradient(
        180deg,
        #173d74 0%,
        #204b88 35%,
        #32446f 60%,
        #e31e24 100%
    );

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}

/*==================================================
Hover
==================================================*/

.hp-stat-card:hover{

    transform:translateY(-10px);

    background:linear-gradient(
        180deg,
        #1a467f 0%,
        #255595 35%,
        #3d537e 60%,
        #f1262b 100%
    );

    box-shadow:
        0 30px 65px rgba(0,0,0,.22),
        0 15px 35px rgba(227,30,36,.30);

}

/*==================================================
ICON
==================================================*/

.hp-stat-icon{

    width:84px;
    height:84px;

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

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    font-size:36px;

    margin-bottom:26px;

    transition:.35s;

}

.hp-stat-card:hover .hp-stat-icon{

    transform:scale(1.10);

}



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

.hp-stat-number{

    font-size:64px;

    font-weight:800;

    line-height:1;

    color:#fff;

    margin-bottom:20px;

    position:relative;

    z-index:5;

    transition:.35s;

}

.hp-stat-card:hover .hp-stat-number{

    color:#ffffff;

}

/*==================================================
LINE
==================================================*/

.hp-stat-line{

    width:60px;

    height:4px;

    background:#ff4d4d;

    border-radius:20px;

    margin-bottom:22px;

    transition:.35s;

}

.hp-stat-card:hover .hp-stat-line{

    width:85px;

    background:#ffffff;

}

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

.hp-stat-title{

    font-size:24px;

    font-weight:700;

    color:#ffffff;

    margin-bottom:12px;

    position:relative;

    z-index:5;

    transition:.35s;

}

.hp-stat-card:hover .hp-stat-title{

    color:#ffffff;

}

/*==================================================
TEXT
==================================================*/

.hp-stat-text{

    font-size:15px;

    line-height:1.9;

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

    position:relative;

    z-index:5;

    transition:.35s;

}

.hp-stat-card:hover .hp-stat-text{

    color:#ffffff;

}

/*==================================================
Prevent Hover Problems
==================================================*/

.hp-stat-card *,
.hp-stat-card:hover *{

    opacity:1 !important;

    visibility:visible !important;

}

.hp-stat-card:hover{

    color:#ffffff;

}

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

@media(max-width:1200px){

    .hp-stats-grid{

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

    }

}

@media(max-width:768px){

    .hp-stats{

        margin-top:-60px;

        margin-bottom:70px;

    }

    .hp-stats-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .hp-stat-card{

        min-height:280px;

        padding:34px 24px;

    }

    .hp-stat-icon{

        width:72px;

        height:72px;

        font-size:30px;

    }

    .hp-stat-number{

        font-size:48px;

    }

    .hp-stat-title{

        font-size:20px;

    }

    .hp-stat-text{

        font-size:14px;

    }

}